// Customer-facing screens (mobile) // 1. Cek Pesanan — landing page where user inputs Order ID // 2. Tracking — order detail with 8-stage timeline, ring progress, history const { useState, useEffect, useMemo, useRef } = React; const MI = ({ name, size, style }) => ( {name} ); // ═══════════════════════════════════════════════════════ // SCREEN 1 — CEK PESANAN // ═══════════════════════════════════════════════════════ function CekPesananScreen({ navigate, theme }) { const [orderId, setOrderId] = useState("ORD-260526-001"); const [err, setErr] = useState(""); const submit = (e) => { e?.preventDefault(); const id = orderId.trim(); if (!id) { setErr("Masukkan ID pesanan dulu"); return; } navigate("tracking"); }; return (

{/* Backdrop — gradient + decorative pattern (replaces video bg in real app) */}

{/* Logo + brand */}

Damelkeun

Track pesanan kamu
real-time, transparan.

Jasa konveksi yang fokus memberi update jelas, dari DP sampai pesanan tiba di tangan Anda.

{/* Form card */} {/* Feature pills */}

{[ { icon: "schedule", title: "Real-time", desc: "Update tanpa refresh" }, { icon: "chat", title: "WA Notif", desc: "Otomatis tiap update" }, { icon: "verified", title: "Transparan", desc: "8 tahap terlacak" }, ].map((f) => (

{f.title}

{f.desc}

))}

© 2026 Damelkeun Jaya Mandiri

); } // ═══════════════════════════════════════════════════════ // SCREEN 2 — TRACKING // ═══════════════════════════════════════════════════════ function TrackingScreen({ navigate, theme, scenario }) { const order = useMemo(() => buildMainOrder(scenario), [scenario]); const [refreshing, setRefreshing] = useState(false); const [lastSync, setLastSync] = useState(new Date()); // Polling simulation useEffect(() => { const i = setInterval(() => { setRefreshing(true); setTimeout(() => { setRefreshing(false); setLastSync(new Date()); }, 600); }, 8000); return () => clearInterval(i); }, []); const currentIdx = useMemo(() => { for (let i = 0; i < STAGES.length; i++) { if (Number(order[STAGES[i].key]) < 100) return i; } return STAGES.length; }, [order]); const status = STATUS_INFO[order.status] || STATUS_INFO.Active; const allDone = order.status === "Done" || order.overall_persen === 100; // Stage completion dates (mock — backfill from history) const stageDates = { dp: "2026-05-12", belanja_kain: "2026-05-20", potong_kain: "2026-05-22", sablon_bordir: "2026-05-24", jahit: "2026-05-26", qc: "2026-05-27", packing: "2026-05-28", pengiriman: "2026-05-29", }; const fmtDate = (iso) => { if (!iso) return ""; const d = new Date(iso); const hari = ["Min","Sen","Sel","Rab","Kam","Jum","Sab"][d.getDay()]; const bln = ["Jan","Feb","Mar","Apr","Mei","Jun","Jul","Agu","Sep","Okt","Nov","Des"][d.getMonth()]; return `${hari}, ${d.getDate()} ${bln}`; }; return (

{/* Decorative blobs */}

{/* Header */}

Damelkeun

Tracking Pesanan

{refreshing ? "Sync..." : "Live"}

{/* Order hero */}

{order.order_id}

{order.nama_pembeli}

{fmtDate(order.tanggal_order)} • {order.qty} pcs

{status.label}

DETAIL PRODUK

{order.detail_produk}

{/* Ring + overall */}

{order.overall_persen} %

Progress Total Produksi

{allDone ? (

{order.status === "Done" ? "Pesanan Anda Selesai!" : "—"}

) : order.status === "Cancel" ? (

Pesanan dibatalkan

) : currentIdx < STAGES.length ? ( <>

Sedang dikerjakan:

{STAGES[currentIdx].label}

) : null}

{/* Timeline */}

Tahapan Produksi

{STAGES.filter((s) => Number(order[s.key]) === 100).length}/{STAGES.length}

{STAGES.map((s, idx) => { const val = Number(order[s.key] || 0); const done = val === 100; const active = idx === currentIdx && order.status !== "Cancel"; return (

{idx < STAGES.length - 1 && (

)}

{s.label}

{s.desc}

{val}%

{!done && val > 0 && (

)} {done && (

Selesai {fmtDate(stageDates[s.key])}

)}

); })}

{/* History with photos */}

Riwayat Update

{SAMPLE_HISTORY.length}

{SAMPLE_HISTORY.slice(0, 4).map((h) => { const stageObj = STAGES.find((s) => s.key === h.stage); const label = stageObj ? stageObj.label : h.stage; const hasPhoto = h.foto_urls && h.foto_urls.length > 0; const dt = new Date(h.timestamp); return (

{label} {hasPhoto && ( )}

{h.old_value}% → {h.new_value}%

{fmtDate(h.timestamp)} • {dt.toLocaleTimeString("id-ID", { hour: "2-digit", minute: "2-digit" })}

{hasPhoto && (

{h.foto_urls.map((id, i) => { const ph = PHOTO_PLACEHOLDERS[id]; return (

{ph.label}

); })}

)}

); })}

{/* Deadline */} {!allDone && order.status !== "Cancel" && (

Deadline Pesanan

10 hari lagi (5 Juni 2026)

)} {/* Meta */}

Update terakhir: {lastSync.toLocaleTimeString("id-ID", { hour: "2-digit", minute: "2-digit" })}

); } window.CekPesananScreen = CekPesananScreen; window.TrackingScreen = TrackingScreen; window.MI = MI;