// arcai-admin.jsx — A01 Org Dashboard, A02 Cohort View, A03 User Detail const SIDEBAR_W = 240; function SidebarNav({ active, onNavigate }) { const items = [ { id: 'A01', label: 'Dashboard', icon: }, { id: 'A02', label: 'Cohorts', icon: }, { id: 'A03', label: 'Users', icon: }, { id: 'goals', label: 'Goals', icon: }, { id: 'reports', label: 'Reports', icon: }, { id: 'settings', label: 'Settings', icon: }, ]; return (
{/* Logo */}
arcai
PT Acme · Admin
{/* Nav items */} {/* User */}
Sarah Kusuma
HR Manager
); } function TopBar({ title, subtitle }) { return (
{subtitle}
{title}
{['Minggu','Bulan','Kuartal'].map((l, i) => ( ))}
); } // ── KPI Card ────────────────────────────────────────────────────────────── function KPICard({ label, value, sub, sparkData, progress, icon, wide }) { return (
{icon && {icon}}{label}
{value}
{sub}
{sparkData && } {progress !== undefined && (
{Math.round(progress * 100)}%
)}
); } // ── A01 Org Dashboard ───────────────────────────────────────────────────── function ScreenA01({ onNavigate }) { const laggingUsers = [ { name: 'Budi Santoso', team: 'Marketing', level: 1, lastActive: '8 hari lalu' }, { name: 'Citra Lestari', team: 'Finance', level: 1, lastActive: '11 hari lalu' }, { name: 'Doni Wijaya', team: 'Sales', level: 2, lastActive: '7 hari lalu' }, { name: 'Eka Putri', team: 'HR', level: 1, lastActive: '14 hari lalu' }, { name: 'Fajar Nugroho', team: 'Ops', level: 2, lastActive: '9 hari lalu' }, ]; const champions = [ { name: 'Rayis Ananda', team: 'Product', level: 4, streak: 21, xp: 1240 }, { name: 'Lina Sari', team: 'Engineering', level: 4, streak: 18, xp: 1180 }, { name: 'Marco Tan', team: 'Design', level: 3, streak: 14, xp: 920 }, { name: 'Nadia Putri', team: 'Marketing', level: 3, streak: 12, xp: 860 }, { name: 'Omar Faisal', team: 'Product', level: 3, streak: 10, xp: 810 }, ]; const trendData = [ { label: 'Jan', value: 1.2 }, { label: 'Feb', value: 1.5 }, { label: 'Mar', value: 1.7 }, { label: 'Apr W1', value: 1.9 }, { label: 'Apr W2', value: 2.1 }, { label: 'Apr W3', value: 2.3 }, { label: 'Apr W4', value: 2.4 }, ]; return (
{/* Alert banner */}
⚠️
3 karyawan stuck lebih dari 7 hari — Tim Anda perlu perhatian
{/* KPI row */}
{/* Trend chart */}
Tren Avg Level
Rata-rata level tim per minggu
{/* Tables row */}
{/* Lagging */}
⚠️
Perlu Perhatian
5 karyawan
{laggingUsers.map((u, i) => (
e.currentTarget.style.background = 'var(--bg-soft)'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'} onClick={() => onNavigate('A03')} >
{u.name}
{u.team} · {u.lastActive}
))}
{/* Champions */}
🏆
Top Performers
bulan ini
{champions.map((u, i) => (
e.currentTarget.style.background = 'var(--bg-soft)'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'} onClick={() => onNavigate('A03')} > #{i+1}
{u.name}
{u.team} · 🔥 {u.streak} hari
))}
); } // ── A02 Cohort View ─────────────────────────────────────────────────────── function ScreenA02({ onNavigate }) { const [selected, setSelected] = React.useState(null); const [search, setSearch] = React.useState(''); const teams = [ { name: 'Marketing', manager: 'Andi Susanto', members: 24, avgLevel: 2.1, completion: 62, trend: [1.4,1.6,1.8,1.9,2.0,2.1], lastActivity: '1 jam lalu', trendDir: 'up' }, { name: 'Engineering', manager: 'Lina Sari', members: 18, avgLevel: 3.4, completion: 89, trend: [2.1,2.5,2.8,3.0,3.2,3.4], lastActivity: '2 jam lalu', trendDir: 'up' }, { name: 'Sales', manager: 'Hendra Gunawan', members: 32, avgLevel: 1.8, completion: 45, trend: [1.5,1.6,1.6,1.7,1.7,1.8], lastActivity: '3 hari lalu', trendDir: 'flat' }, { name: 'Finance', manager: 'Maria Santoso', members: 14, avgLevel: 2.0, completion: 58, trend: [1.2,1.4,1.5,1.7,1.8,2.0], lastActivity: '5 jam lalu', trendDir: 'up' }, { name: 'HR', manager: 'Dewi Rahayu', members: 10, avgLevel: 2.3, completion: 70, trend: [1.8,1.9,2.0,2.1,2.2,2.3], lastActivity: '1 hari lalu', trendDir: 'up' }, { name: 'Operations', manager: 'Budi Hartono', members: 20, avgLevel: 1.5, completion: 38, trend: [1.2,1.2,1.3,1.4,1.4,1.5], lastActivity: '4 hari lalu', trendDir: 'flat' }, { name: 'Product', manager: 'Sinta Dewi', members: 12, avgLevel: 3.2, completion: 83, trend: [2.0,2.4,2.7,2.9,3.1,3.2], lastActivity: '30 menit lalu', trendDir: 'up' }, { name: 'Design', manager: 'Rian Kusuma', members: 8, avgLevel: 2.8, completion: 77, trend: [1.9,2.1,2.3,2.5,2.7,2.8], lastActivity: '2 jam lalu', trendDir: 'up' }, ]; const filtered = teams.filter(t => t.name.toLowerCase().includes(search.toLowerCase()) || t.manager.toLowerCase().includes(search.toLowerCase())); return (
{/* Filter bar */}
setSearch(e.target.value)} placeholder="Cari tim atau manager..." style={{ width: '100%', background: 'var(--surface-1)', border: '1px solid var(--border)', color: 'var(--text)', padding: '10px 14px 10px 36px', borderRadius: 12, fontSize: 13, fontFamily: 'var(--font-body)', outline: 'none' }} onFocus={e => e.target.style.borderColor = 'var(--accent)'} onBlur={e => e.target.style.borderColor = 'var(--border)'} />
{['Semua Dept','Manager','Level ≥ 2','Aktif'].map((f, i) => ( ))}
{/* DataTable */}
{/* Header */}
{['TIM', 'MANAGER', 'ANGGOTA', 'AVG LEVEL', 'COMPLETION', 'TREND', 'AKTIVITAS'].map((h, i) => (
{h} {i < 5 && ▲}
))}
{filtered.map((t, i) => (
setSelected(selected === t.name ? null : t.name)} style={{ display: 'grid', gridTemplateColumns: '1.4fr 1.2fr 80px 100px 140px 80px 100px', gap: 0, padding: '0 20px', height: 56, alignItems: 'center', borderBottom: i < filtered.length - 1 ? '1px solid var(--border)' : 'none', cursor: 'pointer', background: selected === t.name ? 'var(--accent-overlay-soft)' : 'transparent', borderLeft: selected === t.name ? '2px solid var(--accent)' : '2px solid transparent', transition: 'background 0.15s', }} onMouseEnter={e => { if (selected !== t.name) e.currentTarget.style.background = 'var(--bg-soft)'; }} onMouseLeave={e => { if (selected !== t.name) e.currentTarget.style.background = 'transparent'; }} >
{t.name}
{t.manager}
{t.members}
{t.completion}%
{t.trendDir === 'up' ? '↑' : '→'}
{t.lastActivity}
))}
{/* Side panel (inline summary) */} {selected && (
{selected}
{teams.find(t => t.name === selected)?.manager}
onNavigate('A03')} size="sm">Lihat Detail Anggota →
{[ { label: 'Avg Level', value: teams.find(t => t.name === selected)?.avgLevel.toFixed(1) }, { label: 'Completion', value: `${teams.find(t => t.name === selected)?.completion}%` }, { label: 'Anggota', value: teams.find(t => t.name === selected)?.members }, ].map(s => (
{s.value}
{s.label}
))}
)}
); } // ── A03 User Detail ─────────────────────────────────────────────────────── function ScreenA03({ onNavigate }) { const [note, setNote] = React.useState('Sudah 3x tidak submit lesson minggu ini. Kirim pesan personal sebelum review bulanan.'); const radarData = [ { label: 'Foundations', value: 0.82 }, { label: 'Prompting', value: 0.91 }, { label: 'Tools', value: 0.64 }, { label: 'Workflow', value: 0.45 }, { label: 'Building', value: 0.3 }, ]; const activities = [ { icon: '📝', title: 'Selesai: Prompt Engineering Basics', time: '2 hari lalu', score: '92/100', type: 'lesson' }, { icon: '🎯', title: 'Quiz: ChatGPT API Fundamentals', time: '3 hari lalu', score: '78/100', type: 'quiz' }, { icon: '⬆️', title: 'Naik ke Level 2', time: '5 hari lalu', score: null, type: 'levelup' }, { icon: '📝', title: 'Selesai: Intro to AI Tools', time: '6 hari lalu', score: '85/100', type: 'lesson' }, { icon: '📝', title: 'Selesai: AI dalam Kerjaan Harian', time: '8 hari lalu', score: '90/100', type: 'lesson' }, ]; const levelHistory = [ { label: 'Jan', value: 1.0 }, { label: 'Feb', value: 1.2 }, { label: 'Mar', value: 1.4 }, { label: 'Apr W1', value: 1.6 }, { label: 'Apr W2', value: 1.8 }, { label: 'Apr W3', value: 2.0 }, { label: 'Skrg', value: 2.1 }, ]; return (
{/* Profile header */}
Budi Santoso
Marketing · Senior Copywriter
Reports to: Andi Susanto
Kirim Nudge Reset Streak Lihat sebagai user
⚠ Tidak aktif 8 hari — streak terputus
{/* 2-col grid */}
{/* Left: Activity timeline */}
Aktivitas Terbaru
{activities.map((a, i) => (
{a.icon}
{a.title}
{a.time} {a.score && {a.score}}
))}
{/* Level progress per path */}
Progress per Lesson
{[ { name: 'AI dalam Kerjaan Harian', progress: 1.0, done: true }, { name: 'Intro to AI Tools', progress: 1.0, done: true }, { name: 'Prompt Engineering Basics', progress: 1.0, done: true }, { name: 'ChatGPT API Fundamentals', progress: 0.78, done: false }, { name: 'Chain-of-Thought Prompting', progress: 0, done: false }, { name: 'AI Workflow Automation', progress: 0, done: false, locked: true }, ].map((l, i) => (
{l.name} {l.done ? '✓ Selesai' : l.locked ? '🔒' : `${Math.round(l.progress * 100)}%`}
))}
{/* Right: Radar + Note + Trend */}
{/* Radar */}
Competency Radar
5 dimensi kompetensi AI
{radarData.map(d => ( 0.7 ? 'var(--success)' : d.value > 0.5 ? 'var(--accent)' : 'var(--text-muted)', fontWeight: 700 }}> {d.label}: {d.value > 0.7 ? 'kuat' : d.value > 0.5 ? 'cukup' : 'perlu latihan'} ))}
{/* Manager note */}
Catatan Manager
Privat · hanya terlihat Anda