// Admin screens (desktop, inside browser frame) // Shell: sidebar nav + top header + content area // Screens: dashboard, daftar, detail, baru, pengaturan const { useState: useS, useMemo: useM } = React; // ═══════════════════════════════════════════════════════ // SHELL — Sidebar + Top header // ═══════════════════════════════════════════════════════ function AdminShell({ activeScreen, navigate, theme, children, pageTitle }) { const menu = [ { id: "admin-dashboard", name: "Dashboard", icon: "dashboard" }, { id: "admin-baru", name: "Pesanan Baru", icon: "add_circle" }, { id: "admin-daftar", name: "Daftar Pesanan", icon: "receipt_long" }, { id: "admin-pengaturan",name: "Pengaturan", icon: "settings" }, ]; return (

{pageTitle}

A

Admin Utama

Administrator

{children}
); } // ═══════════════════════════════════════════════════════ // 1) DASHBOARD // ═══════════════════════════════════════════════════════ function AdminDashboard({ navigate, theme }) { const stats = [ { label: "Order Aktif", value: 6, icon: "inventory_2", color: theme.primary, bg: `${theme.primary}1a` }, { label: "Sedang Diproses", value: 5, icon: "hourglass_empty", color: theme.secondary, bg: `${theme.secondary}1a` }, { label: "Selesai Bulan Ini", value: 12, icon: "check_circle", color: "#10b981", bg: "#d1fae5" }, { label: "Perlu Perhatian", value: 1, icon: "warning", color: "#ef4444", bg: "#fef2f2" }, ]; const chartData = [ { name: "DP", value: 0 }, { name: "Belanja Kain", value: 1 }, { name: "Potong Kain", value: 1 }, { name: "Sablon/Bordir", value: 1 }, { name: "Jahit", value: 1 }, { name: "QC", value: 1 }, { name: "Packing", value: 0 }, { name: "Pengiriman", value: 1 }, ]; const maxV = Math.max(...chartData.map((d) => d.value), 1); return (
{/* Welcome row */}

Selamat datang, Admin 👋

Gambaran umum produksi garmen hari ini.

{/* Stats */}
{stats.map((s) => (

{s.label}

{s.value}

))}
{/* Chart + Recent orders */}

Distribusi Tahapan

Order aktif per tahap produksi

{chartData.map((d) => (
{d.name}
{d.value}
))}

Pesanan Terbaru

{["Order ID", "Pembeli", "Tahap", "Progress", "Status"].map((h) => )} {ADMIN_ORDERS.slice(0, 6).map((o) => { const isDone = o.status === "Done"; const isCancel = o.status === "Cancel"; const badge = isDone ? { label: "Selesai", bg: "#d1fae5", color: "#15803d" } : isCancel ? { label: "Dibatalkan", bg: "#fee2e2", color: "#dc2626" } : o.overall_persen === 0 ? { label: "Menunggu", bg: "#f2f3f6", color: "#727586" } : { label: "Diproses", bg: "#fef9ec", color: "#d97706" }; return ( navigate("admin-detail", o.order_id)}> ); })}
{h}
{o.order_id} {o.nama_pembeli} {o.current_stage}
{o.overall_persen}%
{badge.label}
); } // ═══════════════════════════════════════════════════════ // 2) DAFTAR PESANAN // ═══════════════════════════════════════════════════════ function AdminDaftar({ navigate, theme }) { const [filter, setFilter] = useS("all"); const [search, setSearch] = useS(""); const filtered = useM(() => { return ADMIN_ORDERS.filter((o) => { if (filter === "active" && o.status !== "Active") return false; if (filter === "done" && o.status !== "Done") return false; if (filter === "cancel" && o.status !== "Cancel") return false; if (search && !`${o.order_id} ${o.nama_pembeli} ${o.detail_produk}`.toLowerCase().includes(search.toLowerCase())) return false; return true; }); }, [filter, search]); const counts = { all: ADMIN_ORDERS.length, active: ADMIN_ORDERS.filter((o) => o.status === "Active").length, done: ADMIN_ORDERS.filter((o) => o.status === "Done").length, cancel: ADMIN_ORDERS.filter((o) => o.status === "Cancel").length, }; return (
{/* Toolbar */}
setSearch(e.target.value)} placeholder="Cari order ID, nama, produk..." />
{[ { id: "all", label: "Semua" }, { id: "active", label: "Aktif" }, { id: "done", label: "Selesai" }, { id: "cancel", label: "Cancel" }, ].map((t) => ( ))}
{["Order ID", "Pembeli", "Produk", "Qty", "Tanggal", "Tahap", "Progress", "Status", ""].map((h) => )} {filtered.map((o) => { const isDone = o.status === "Done"; const isCancel = o.status === "Cancel"; const badge = isDone ? { label: "Selesai", bg: "#d1fae5", color: "#15803d" } : isCancel ? { label: "Dibatalkan", bg: "#fee2e2", color: "#dc2626" } : o.overall_persen === 0 ? { label: "Menunggu", bg: "#f2f3f6", color: "#727586" } : { label: "Diproses", bg: "#fef9ec", color: "#d97706" }; return ( navigate("admin-detail", o.order_id)}> ); })}
{h}
{o.order_id} {o.nama_pembeli} {o.detail_produk} {o.qty} {o.tanggal_order} {o.current_stage}
{o.overall_persen}%
{badge.label}
{filtered.length === 0 && (

Tidak ada pesanan yang cocok

)}
); } // ═══════════════════════════════════════════════════════ // 3) ORDER DETAIL — update progress per stage // ═══════════════════════════════════════════════════════ function AdminDetail({ navigate, theme, orderId }) { const baseOrder = useM(() => { return ADMIN_ORDERS.find((o) => o.order_id === orderId) || ADMIN_ORDERS[0]; }, [orderId]); // Stage values — editable const [stages, setStages] = useS({ dp: 100, belanja_kain: 100, potong_kain: 100, sablon_bordir: 100, jahit: 70, qc: 0, packing: 0, pengiriman: 0, }); const [notif, setNotif] = useS(null); const overall = calcOverall(stages); const update = (key, val) => { setStages((p) => ({ ...p, [key]: val })); }; const save = () => { setNotif("Progress disimpan. WhatsApp notif terkirim ke customer."); setTimeout(() => setNotif(null), 3000); }; return (
{/* Back row */} {/* Order header */}
{baseOrder.order_id}

{baseOrder.nama_pembeli}

{baseOrder.detail_produk} · {baseOrder.qty} pcs

{overall}%

Progress Total

{/* Notif */} {notif && (
{notif}
)}
{/* LEFT: progress editor */}

Update Progress per Tahap

{STAGES.map((s) => { const v = stages[s.key]; const done = v === 100; return (

{s.label}

{s.desc}

{v}%
update(s.key, Number(e.target.value))} style={{ accentColor: theme.primary }} />
{[0, 50, 100].map((q) => ( ))}
); })}
{/* RIGHT: side panel */}

Info Pesanan

Tanggal Order{baseOrder.tanggal_order}
Deadline5 Jun 2026
Telepon0812-3456-7890
Total TagihanRp 14.400.000

Upload Foto Bukti

{Object.keys(PHOTO_PLACEHOLDERS).slice(0, 3).map((k) => { const p = PHOTO_PLACEHOLDERS[k]; return (
{p.label}
); })}
Tambah Foto
); } // ═══════════════════════════════════════════════════════ // 4) PESANAN BARU — form // ═══════════════════════════════════════════════════════ function AdminBaru({ navigate, theme }) { const [form, setForm] = useS({ nama: "", hp: "", produk: "", qty: "", deadline: "", catatan: "", }); const [submitted, setSubmitted] = useS(false); const update = (k, v) => setForm((p) => ({ ...p, [k]: v })); const submit = (e) => { e?.preventDefault(); setSubmitted(true); setTimeout(() => { setSubmitted(false); navigate("admin-dashboard"); }, 2500); }; if (submitted) { return (

Pesanan Berhasil Dibuat!

Order ID ORD-260526-002 sudah dibuat. Link tracking dikirim ke WhatsApp customer.

Mengarahkan ke dashboard...
); } return (

Detail Customer

update("nama", e.target.value)} placeholder="cth: Pak Bayu Saputra" required />
update("hp", e.target.value)} placeholder="cth: 0812-3456-7890" required />

Detail Pesanan