import React, { useState } from ‘react’;
import { ChevronRight, ChevronLeft, Check, Upload, Award, Target, Loader2, Sparkles } from ‘lucide-react’;
const StepWrapper = ({ children, title, subtitle }) => (
);
const App = () => {
const [step, setStep] = useState(0);
const [isSubmitting, setIsSubmitting] = useState(false);
const [submitted, setSubmitted] = useState(false);
const [formData, setFormData] = useState({
nama: ”,
umur: ”,
kerjaya: ”,
industri: ”,
pengalaman: ”,
tujuan: [],
scales: {
confidence: 5,
clarity: 5,
influence: 5,
storytelling: 5,
publicSpeaking: 5,
emotionalRegulation: 5,
structuringThoughts: 5,
rapportBuilding: 5,
difficultConversations: 5,
selfImage: 5
},
diagnosis: {
cabaran: ”,
struggle: ”,
perubahan: ”,
ketakutan: ”
},
videoFile: null,
videoBase64: null,
videoMime: ”
});
const goals = [
“Nak lebih yakin”, “Nak belajar influence”, “Nak improve public speaking”,
“Nak improve storytelling”, “Nak kurangkan rasa takut bercakap”,
“Nak jadi lebih charismatic”, “Nak jadi leader yang lebih berpengaruh”,
“Nak improve communication dalam bisnes/kerjaya”
];
const scaleQuestions = [
{ key: ‘confidence’, label: ‘Confidence Level (Keyakinan)’ },
{ key: ‘clarity’, label: ‘Communication Clarity (Kejelasan idea)’ },
{ key: ‘influence’, label: ‘Influence Ability (Kebolehan mempengaruhi)’ },
{ key: ‘storytelling’, label: ‘Storytelling Skill’ },
{ key: ‘publicSpeaking’, label: ‘Public Speaking Skill’ },
{ key: ’emotionalRegulation’, label: ‘Emotional Regulation (Takut/Gugup)’ },
{ key: ‘structuringThoughts’, label: ‘Ability to Structure Thoughts’ },
{ key: ‘rapportBuilding’, label: ‘Rapport Building & Connection’ },
{ key: ‘difficultConversations’, label: ‘Ability to Handle Difficult Conversations’ },
{ key: ‘selfImage’, label: ‘Self-Image as a Communicator (Identiti)’ },
];
const handleNext = () => setStep(s => s + 1);
const handleBack = () => setStep(s => s – 1);
const toggleGoal = (goal) => {
setFormData(prev => {
const newTujuan = prev.tujuan.includes(goal)
? prev.tujuan.filter(t => t !== goal)
: prev.tujuan.length < 3 ? [...prev.tujuan, goal] : prev.tujuan;
return { ...prev, tujuan: newTujuan };
});
};
const handleVideoUpload = (e) => {
const file = e.target.files[0];
if (file) {
if (file.size > 25 * 1024 * 1024) {
alert(“Fail terlalu besar. Sila pastikan video bawah 25MB untuk kelancaran.”);
return;
}
const reader = new FileReader();
reader.onload = (event) => {
setFormData({
…formData,
videoFile: file,
videoBase64: event.target.result.split(‘,’)[1],
videoMime: file.type
});
};
reader.readAsDataURL(file);
}
};
const handleSubmit = async () => {
if (!formData.nama || !formData.videoBase64) {
alert(“Sila pastikan Nama dan Video telah di-upload.”);
return;
}
setIsSubmitting(true);
// URL Web App dari Google Script anda
const GAS_URL = “https://script.google.com/macros/s/AKfycbyTDbmhqZWgfQicoFhKZUtN6YFh0iqey5WCZ35bwOvwg77K6o_EVLWHzZhefr-WWxGU/exec”;
try {
await fetch(GAS_URL, {
method: ‘POST’,
mode: ‘no-cors’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify(formData)
});
// Memberi masa sedikit untuk proses di Drive
await new Promise(r => setTimeout(r, 5000));
setSubmitted(true);
} catch (error) {
console.error(error);
alert(“Ralat berlaku. Sila periksa sambungan internet atau URL Web App anda.”);
} finally {
setIsSubmitting(false);
}
};
const progress = (step / 6) * 100;
if (submitted) {
return (
{title}
{subtitle &&{subtitle}
}
{children}
Assessment Berjaya!
Data anda telah selamat disimpan dalam sistem TIC. Sila tunggu maklum balas daripada pasukan kami.
{/* Header & Progress Indicator */}
{/* Loading Overlay */}
{isSubmitting && (
)}
{/* Step 1: Info */}
{step === 1 && (
)}
{/* Step 2: Matlamat */}
{step === 2 && (
)}
{/* Step 3: Scales */}
{step === 3 && (
)}
{/* Step 4: C. Self-Diagnosis */}
{step === 4 && (
Menyambung ke Google Drive…
Mohon jangan tutup paparan ini. Video anda sedang diproses.
Selamat datang, Communicator. Borang interaktif ini akan membantu kami memetakan potensi anda terus ke dalam pangkalan data TIC.
setFormData({…formData, nama: e.target.value})}
/>
setFormData({…formData, umur: e.target.value})}
/>
setFormData({…formData, kerjaya: e.target.value})}
/>
setFormData({…formData, industri: e.target.value})}
/>
{goals.map(goal => (
))}
{scaleQuestions.map(q => (
))}
{formData.scales[q.key]}/10
setFormData({
…formData,
scales: { …formData.scales, [q.key]: parseInt(e.target.value) }
})}
/>