import React, { useState, useMemo } from 'react'; import { LayoutDashboard, FilePlus, Users, FileCheck, Trophy, Search, Calendar, FileText, UploadCloud, CheckCircle2, AlertCircle } from 'lucide-react'; // Daftar Nama GTK (Dummy Data Sesuai Permintaan) const DAFTAR_GTK = [ "Drs. H. Sudirman, M.Pd", "Siti Aminah, S.Pd", "Budi Raharjo, M.Kom", "Anita Lestari, S.Si", "Rahmat Hidayat, S.Pd", "Dewi Sartika, S.Pd", "Andri Wijaya, S.E (TU)", "Siska Putri, A.Md (TU)" ]; const App = () => { const [submissions, setSubmissions] = useState([]); const [formData, setFormData] = useState({ namaGtk: '', namaKegiatan: '', tglMulai: '', tglSelesai: '', temaKegiatan: '', resume: '', sertifikatName: '' }); const [error, setError] = useState(''); const [success, setSuccess] = useState(''); // Perhitungan Statistik (Resume Dashboard Atas) const stats = useMemo(() => { const uniqueGtk = new Set(submissions.map(s => s.namaGtk)).size; const totalSertifikat = submissions.length; // Mencari GTK Terbanyak Upload const counts = {}; submissions.forEach(s => counts[s.namaGtk] = (counts[s.namaGtk] || 0) + 1); const topGtk = Object.entries(counts).reduce((a, b) => (a[1] > b[1] ? a : b), ["Belum ada", 0]); return { uniqueGtk, totalSertifikat, topGtkName: topGtk[0], topGtkCount: topGtk[1] }; }, [submissions]); const countWords = (str) => { return str.trim().split(/\s+/).filter(word => word.length > 0).length; }; const handleInputChange = (e) => { const { name, value } = e.target; setFormData(prev => ({ ...prev, [name]: value })); }; const handleFileUpload = (e) => { const file = e.target.files[0]; if (file) { if (file.size > 2 * 1024 * 1024) { setError('Ukuran file maksimal adalah 2 MB'); e.target.value = null; } else { setError(''); setFormData(prev => ({ ...prev, sertifikatName: file.name })); } } }; const handleSubmit = (e) => { e.preventDefault(); setError(''); // Validasi Resume Minimal 20 Kata if (countWords(formData.resume) < 20) { setError('Resume harus minimal 20 kata!'); return; } if (!formData.sertifikatName) { setError('Harap upload sertifikat!'); return; } const newEntry = { ...formData, id: Date.now(), timestamp: new Date().toLocaleString('id-ID') }; setSubmissions([newEntry, ...submissions]); setSuccess('Data berhasil disimpan!'); setFormData({ namaGtk: '', namaKegiatan: '', tglMulai: '', tglSelesai: '', temaKegiatan: '', resume: '', sertifikatName: '' }); setTimeout(() => setSuccess(''), 3000); }; return (

{/* Header */}

E-Monitoring Pengembangan Diri

SMK Negeri 15 Kota Bekasi

Tahun Ajaran

2024/2025

{/* DASHBOARD RESUME (BAGIAN ATAS) */}

GTK Input Data

{stats.uniqueGtk} Orang

Sertifikat Terupload

{stats.totalSertifikat} Berkas

GTK Terbanyak Upload

{stats.topGtkName}

{stats.topGtkCount} Kali Upload

{/* FORM INPUT DATA (KIRI) */}

Formulir Mandiri

{error && (

{error}

)} {success && (

{success}

)}

Nama GTK -- Pilih Nama -- {DAFTAR_GTK.map(name => ( {name} ))}

Nama Kegiatan

Tgl Mulai

Tgl Selesai

Tema Kegiatan

Resume Kegiatan = 20 ? 'text-emerald-500' : 'text-slate-400'}`}> {countWords(formData.resume)} / 20 kata

{formData.sertifikatName || "Upload Sertifikat (Max 2MB)"} Klik untuk mencari file

{/* TABEL HASIL MONITORING (KANAN) */}

Monitor Inputan

Live Update

{submissions.length === 0 ? ( ) : ( submissions.map((sub) => ( )) )}

Nama GTK	Kegiatan / Tema	Waktu	File
Belum ada data masuk hari ini.
{sub.namaGtk} {sub.timestamp}	{sub.namaKegiatan} "{sub.temaKegiatan}"	{sub.tglMulai} s/d {sub.tglSelesai}

Sistem Informasi Monitoring GTK SMKN 15 Kota Bekasi v1.0

); }; export default App;