import React, { useState, useMemo } from "react"; // Vendor Mobile UI - Single File React Component // TailwindCSS utility classes assumed available in the project. // Default export a React component you can paste into a Create React App / Vite + Tailwind project. const SAMPLE_ORDERS = [ { id: "ORD-001", brideName: "Ayu & Budi", venue: "The Banyan Hall", date: "2025-12-05T16:00:00", detail: [ { item: "Dekor Pelaminan", qty: 1 }, { item: "Catering - 150 pax", qty: 150 }, { item: "Fotografi", qty: 1 }, ], notes: "Permintaan warna: dusty pink + gold. Susunan kursi VIP 8 meja.", status: "Konfirmasi", }, { id: "ORD-002", brideName: "Siti & Rama", venue: "Villa Merah - Lombok", date: "2026-01-10T10:00:00", detail: [ { item: "Pelaminan sederhana", qty: 1 }, { item: "Sound System", qty: 1 }, ], notes: "Butuh generator cadangan. Kontak vendor catering: 0812xxxx", status: "Menunggu DP", }, { id: "ORD-003", brideName: "Nina & Ardi", venue: "Gedung Serbaguna Kota", date: "2025-11-30T18:00:00", detail: [ { item: "Lighting", qty: 1 }, { item: "MC & Entertainment", qty: 1 }, ], notes: "Tema: modern minimal. Koreografi dance 1 sesi.", status: "Siap", }, ]; function formatDate(iso) { try { const d = new Date(iso); return d.toLocaleString("id-ID", { weekday: "short", day: "2-digit", month: "short", year: "numeric", hour: "2-digit", minute: "2-digit", }); } catch (e) { return iso; } } export default function VendorMobileUI() { const [orders, setOrders] = useState(SAMPLE_ORDERS); const [query, setQuery] = useState(""); const [selected, setSelected] = useState(null); const [filterStatus, setFilterStatus] = useState("All"); const filtered = useMemo(() => { const q = query.trim().toLowerCase(); return orders.filter((o) => { if (filterStatus !== "All" && o.status !== filterStatus) return false; if (!q) return true; return ( o.brideName.toLowerCase().includes(q) || o.venue.toLowerCase().includes(q) || o.id.toLowerCase().includes(q) ); }); }, [orders, query, filterStatus]); function toggleExpand(order) { setSelected((prev) => (prev && prev.id === order.id ? null : order)); } function addSample() { const newOrder = { id: `ORD-${String(100 + orders.length + 1).padStart(3, "0")}`, brideName: "Contoh Baru", venue: "Contoh Venue", date: new Date().toISOString(), detail: [{ item: "Contoh item", qty: 1 }], notes: "Catatan contoh", status: "Menunggu DP", }; setOrders((s) => [newOrder, ...s]); } function removeOrder(id) { if (!confirm("Hapus order ini?")) return; setOrders((s) => s.filter((o) => o.id !== id)); if (selected && selected.id === id) setSelected(null); } function updateStatus(id, status) { setOrders((s) => s.map((o) => (o.id === id ? { ...o, status } : o))); if (selected && selected.id === id) setSelected((s) => ({ ...s, status })); } return ( ); }