{/* Current time */}
{time.toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" })}
{isOpen ? (
/* Closing countdown ring */
{remainText}
Fermeture - {SCHEDULE.closeHour}:00
) : (
/* Closed — next opening */
Réouverture - {String(SCHEDULE.openHour).padStart(2, "0")}:00
)}
e.stopPropagation()} style={{
background: C.white, borderRadius: 20, padding: "28px", width: 480, maxHeight: "80vh",
overflowY: "auto", boxShadow: "0 20px 60px rgba(0,0,0,.2)",
}}>
Articles en rupture
Sélectionnez les articles indisponibles
{orderProducts.map(p => (
toggleRupture(p.id)} style={{
display: "flex", alignItems: "center", justifyContent: "space-between",
padding: "12px 16px", borderRadius: 12, cursor: "pointer",
border: ruptureItems[p.id] ? `2px solid ${C.red}` : `1px solid ${C.border}`,
background: ruptureItems[p.id] ? C.redLight : C.white,
marginBottom: 8, transition: "all .15s",
}}>
{p.name}
{p.category} · {formatXPF(p.price)}
{ruptureItems[p.id] && (
)}
))}
{/* Auto-disable toggle */}
setAutoDisable(!autoDisable)} style={{
display: "flex", alignItems: "center", gap: 10, padding: "14px 0",
cursor: "pointer", userSelect: "none", marginTop: 8,
borderTop: `1px solid ${C.border}`,
}}>
Désactiver automatiquement ces articles du catalogue
);
}
return (
e.stopPropagation()} style={{
background: C.white, borderRadius: 20, padding: "28px", width: 400,
boxShadow: "0 20px 60px rgba(0,0,0,.2)",
}}>
Refuser la commande
{order.id} · {order.customer}
{reasons.map(r => (
setReason(r.id)} style={{
padding: "14px 16px", borderRadius: 12, cursor: "pointer",
border: reason === r.id ? `2px solid ${C.red}` : `1px solid ${C.border}`,
background: reason === r.id ? C.redLight : C.white,
marginBottom: 8, fontSize: 14, fontWeight: 500, color: C.title,
transition: "all .15s",
}}>
{r.label}
))}
{reason === "other" && (
setCustomReason(e.target.value)}
style={{
width: "100%", padding: "12px 16px", borderRadius: 12,
border: `1px solid ${C.border}`, fontSize: 14, color: C.title,
fontFamily: "'Inter', sans-serif", marginBottom: 8, background: C.bg,
outline: "none",
}}
/>
)}
);
}
// ─── SIDEBAR ───────────────────────────────────────────────
const NAV_ITEMS = [
{ id: "orders", label: "Commandes", icon: (
{ if (!isSelected) { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "0 4px 16px rgba(0,0,0,.08)"; }}}
onMouseLeave={(e) => { if (!isSelected) { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = shadowDefault; }}}
>
{topBarColor && (
)}
{/* Row 1: ID + Status + Loyalty + Wait time */}
{order.id}
{isPending && order.pendingSince && (
)}
{/* Row 2: Customer + Timer + Type */}
{order.customer}
{isPreparing && order.prepTimeLeft != null && (
)}
{/* Driver / status line (preparing + ready) */}
{(isPreparing || isReady) && (
{order.driver ? (
<>
🛵
{order.driver.name} · {order.driver.status === "en_route" ? "en route" : order.driver.status === "late" ? `en retard de ${order.driver.delay} min` : "sur place"}
) : (
isReady && order.type === "pickup" ? (
🛍️ En attente du client
) : (
🛵 En attente de livreur
)
)}
)}
{/* Row 3: Items + Total */}
1 ? 700 : 400, color: order.items.length > 1 ? "#D97706" : C.textLight }}>
{order.items.length} article{order.items.length > 1 ? "s" : ""}
{formatXPF(order.total)}
{/* Quick "Prête" button for preparing orders — only after 2min */}
{showReadyBtn && (
)}
);
}
function OrdersList({ orders, onSelect, onReady, viewMode, setViewMode, selectedId }) {
const pending = orders.filter((o) => o.status === "pending");
const inProgress = orders.filter((o) => o.status === "preparing");
const ready = orders.filter((o) => o.status === "ready");
const Section = ({ title, count, color, items }) => (
{/* Header card */}
{order.id}
{order.customer}
{order.phone && (
📞 {order.phone}
)}
{order.phone && }
Reçue à {order.createdAt}
{order.type === "delivery" && order.address && (
)}
{order.note && (
💬
{order.note}
)}
{/* Prep time card */}
{order.prepTimeLeft != null && (
{order.prepTimeLeft <= 0 ? "En retard de :" : "Commande récupérée dans :"}
Pour {order.time}
)}
{/* Driver status */}
{order.driver &&
}
{/* Actions for pending */}
{order.status === "pending" && (
<>
{!order.scheduled && (
Ajouter du temps
{[5, 10, 15].map((t) => (
))}
{/* Custom time */}
{customMode ? (
+
{
const v = e.target.value;
setCustomValue(v);
const n = parseInt(v);
setPrepTime(n > 0 ? n : null);
}}
onBlur={() => { if (!customValue) { setCustomMode(false); setPrepTime(null); }}}
style={{
border: "none", outline: "none", background: "transparent",
width: 36, fontSize: 16, fontWeight: 800, color: C.primary,
fontFamily: "'Inter', sans-serif", textAlign: "center",
}}
/>
min
) : (
)}
)}
)}
{/* Action for preparing */}
{order.status === "preparing" && next && (
<>
{!order.driver && (
Ajouter du temps
{[5, 10, 15].map((t) => (
))}
)}
)}
{/* Action for ready */}
{order.status === "ready" && (
order.type === "pickup" ? (
) : (
🛵 La commande disparaîtra automatiquement à la récupération par le livreur
)
)}
{/* Timeline */}
Articles
{Object.entries(grouped).map(([category, items], ci) => (
{category}
{items.map((item, i) => {
const hasOptions = item.options && item.options.length > 0;
const optionsPerUnit = (item.options || []).reduce((s, o) => s + o.unitPrice * (o.qty / item.qty), 0);
const unitTotal = item.unitPrice + optionsPerUnit;
// If qty > 1 AND has options → expand into individual lines
if (item.qty > 1 && hasOptions) {
return Array.from({ length: item.qty }, (_, ui) => (
1
{item.name}
{formatXPF(item.unitPrice)}
{item.options.map((opt, oi) => {
const perUnit = Math.round(opt.qty / item.qty);
return (
{perUnit > 1 && ×{perUnit}}
{opt.name}
{opt.unitPrice > 0 && (
+{formatXPF(opt.unitPrice * perUnit)}
)}
);
})}
{optionsPerUnit > 0 && (
{formatXPF(unitTotal)}
)}
));
}
// Normal rendering (qty == 1, or qty > 1 without options)
const optionsTotal = (item.options || []).reduce((s, o) => s + o.unitPrice * o.qty, 0);
const lineTotal = item.unitPrice * item.qty + optionsTotal;
const showLineTotal = item.qty > 1 || optionsTotal > 0;
return (
1 ? C.yellowLight : C.primaryLight,
color: item.qty > 1 ? "#D97706" : C.primary,
display: "flex", alignItems: "center", justifyContent: "center",
fontSize: 11, fontWeight: 800,
}}>{item.qty}
{item.name}
{formatXPF(item.unitPrice)}
{/* Options (only for qty == 1 items with options) */}
{hasOptions && (
{item.options.map((opt, oi) => (
{opt.qty > 1 && ×{opt.qty}}
{opt.name}
{opt.unitPrice > 0 && (
+{formatXPF(opt.unitPrice * opt.qty)}
)}
))}
)}
{/* Total line when paid options or qty > 1 */}
{showLineTotal && (
{formatXPF(lineTotal)}
)}
);
})}
))}
{/* Grand total */}
Total
{formatXPF(order.total)}
);
return (
Produits
{activeCount} actifs
{inactiveCount} désactivés
{/* Search */}
{/* Category pills */}
{categories.map((cat) => (
))}
{/* Product list */}
{filtered.map((product, i) => (
{product.name}
{product.category}
{formatXPF(product.price)}
onToggle(product.id)}
label={product.active ? "Actif" : "Inactif"}
colorOn={C.green}
colorOff={C.red}
/>
))}
{filtered.length === 0 && (
Aucun produit trouvé
)}
);
}
// ─── VIEW : HISTORY ────────────────────────────────────────
function HistoryView() {
const [filter, setFilter] = useState("all");
const [search, setSearch] = useState("");
const [expanded, setExpanded] = useState(null);
const filtered = MOCK_HISTORY.filter((o) => {
const matchFilter = filter === "all" || o.status === filter;
const matchSearch = o.customer.toLowerCase().includes(search.toLowerCase()) || o.id.toLowerCase().includes(search.toLowerCase());
return matchFilter && matchSearch;
});
const grouped = filtered.reduce((acc, o) => {
if (!acc[o.date]) acc[o.date] = [];
acc[o.date].push(o);
return acc;
}, {});
const totalDone = MOCK_HISTORY.filter((o) => o.status === "done").length;
const totalRefused = MOCK_HISTORY.filter((o) => o.status === "refused").length;
const totalRevenue = MOCK_HISTORY.filter((o) => o.status === "done").reduce((s, o) => s + o.total, 0);
return (
Historique
{/* Stats row */}
Chiffre d'affaires
{formatXPF(totalRevenue)}
{/* Search + filter */}
{["all", "done", "refused"].map((f) => {
const labels = { all: "Toutes", done: "Terminées", refused: "Refusées" };
return (
);
})}
{/* Grouped list */}
{Object.entries(grouped).map(([date, items]) => {
// Parse dd/mm and build human label
const [dd, mm] = date.split("/").map(Number);
const now = new Date();
const year = now.getFullYear();
const entryDate = new Date(year, mm - 1, dd);
const today = new Date(year, now.getMonth(), now.getDate());
const diffDays = Math.round((today - entryDate) / 86400000);
const monthNames = ["janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre"];
const fullDate = `${String(dd).padStart(2,"0")} ${monthNames[mm - 1]}`;
let label;
if (diffDays === 0) label = "Aujourd'hui";
else if (diffDays === 1) label = "Hier";
else if (diffDays < 7) label = `Il y a ${diffDays} jours`;
else label = "Cette semaine";
if (diffDays >= 7 && diffDays < 14) label = "La semaine dernière";
else if (diffDays >= 14) label = `Il y a ${Math.floor(diffDays / 7)} semaines`;
return (
{label}
{fullDate}
{items.map((order, i) => {
const isExpanded = expanded === order.id;
const isDone = order.status === "done";
const prepMin = isDone && order.acceptedAt && order.readyAt ? timeDiffMin(order.acceptedAt, order.readyAt) : null;
const delivMin = isDone && order.readyAt && order.deliveredAt && order.type === "delivery" ? timeDiffMin(order.readyAt, order.deliveredAt) : null;
const totalMin = isDone && order.orderedAt && order.deliveredAt ? timeDiffMin(order.orderedAt, order.deliveredAt) : null;
const schedDiff = isDone && order.scheduled && order.deliveredAt ? timeDiffMin(order.scheduled, order.deliveredAt) : null;
const announcedPrep = isDone ? (() => { const s = (order.statusHistory || []).find(h => h.status === "preparing"); if (!s) return null; const m = s.label.match(/(\d+)\s*min/); return m ? parseInt(m[1]) : null; })() : null;
const prepLate = prepMin !== null && announcedPrep !== null && prepMin > announcedPrep;
const grouped2 = (order.items || []).reduce((acc, item) => {
const cat = item.category || "Autres";
if (!acc[cat]) acc[cat] = [];
acc[cat].push(item);
return acc;
}, {});
const timingEl = isDone ? (
{order.orderedAt} → {order.deliveredAt}
Prép {prepMin}min{prepLate ? ` (${announcedPrep})` : ""}
{delivMin !== null ? (
10 ? C.red : C.textLight }}>
Livr {delivMin}min
) : (
)}
10 ? C.red : C.textLight) : C.textLight }}>
{order.scheduled
? (schedDiff > 0 ? `+${schedDiff}min` : `${schedDiff}min`)
: `Total ${totalMin}min`}
) : null;
return (
setExpanded(isExpanded ? null : order.id)}
style={{
padding: "10px 20px", cursor: "pointer",
background: isExpanded ? C.bg : "transparent",
transition: "background .15s",
}}
>
{/* Line 1: core info */}
{order.id}
{order.customer}
{/* Timing inline on large screens */}
{timingEl}
{order.rating && (
{"★".repeat(order.rating)}{"☆".repeat(5 - order.rating)}
)}
{isDone ? formatXPF(order.total) : "—"}
{/* Timing on separate line for small/medium screens */}
{timingEl &&
{timingEl}
}
{/* Expanded detail */}
{isExpanded && (
{order.phone && 📞 {order.phone}}
{order.phone && }
{order.note && (
💬
{order.note}
)}
{order.items && order.items.length > 0 && (
{Object.entries(grouped2).map(([cat, catItems], ci) => (
{cat}
{catItems.map((item, ii) => (
1 ? "#D97706" : C.primary, width: 16, textAlign: "center" }}>{item.qty}
{item.name}
{formatXPF(item.unitPrice * item.qty)}
))}
))}
Total
{formatXPF(order.total)}
)}
)}
);
})}
);
})}
{Object.keys(grouped).length === 0 && (
Aucune commande trouvée
)}
);
}
// ─── APP ───────────────────────────────────────────────────
function App() {
const [page, setPage] = useState("orders");
const [selectedOrder, setSelectedOrder] = useState(null);
const [orders, setOrders] = useState(MOCK_ORDERS);
const [products, setProducts] = useState(MOCK_PRODUCTS);
const [storeOpen, setStoreOpen] = useState(true);
const [closedToday, setClosedToday] = useState(false);
const [themeMode, setThemeMode] = useState("auto");
const [systemDark, setSystemDark] = useState(false);
const [viewMode, setViewMode] = useState("page"); // "page" or "split"
// Detect system dark preference
useEffect(() => {
const mq = window.matchMedia("(prefers-color-scheme: dark)");
setSystemDark(mq.matches);
const handler = (e) => setSystemDark(e.matches);
mq.addEventListener("change", handler);
return () => mq.removeEventListener("change", handler);
}, []);
// Resolve theme
const isDark = themeMode === "dark" || (themeMode === "auto" && systemDark);
C = isDark ? DARK : LIGHT;
const handleUpdateStatus = (orderId, newStatus, prepTime) => {
if (newStatus === "done") {
setOrders((prev) => prev.filter((o) => o.id !== orderId));
setSelectedOrder(null);
return;
}
setOrders((prev) =>
prev.map((o) => {
if (o.id !== orderId) return o;
const updates = { status: newStatus };
if (newStatus === "preparing" && o.status !== "preparing") {
// Fresh acceptance
updates.acceptedAt = Date.now();
if (prepTime) updates.prepTimeLeft = prepTime;
} else if (newStatus === "preparing" && o.status === "preparing" && prepTime) {
// Adding time to existing prep
updates.prepTimeLeft = (o.prepTimeLeft || 0) + prepTime;
}
return { ...o, ...updates };
})
);
setSelectedOrder((prev) => {
if (!prev || prev.id !== orderId) return prev;
const updates = { status: newStatus };
if (newStatus === "preparing" && prev.status !== "preparing") {
updates.acceptedAt = Date.now();
if (prepTime) updates.prepTimeLeft = prepTime;
} else if (newStatus === "preparing" && prev.status === "preparing" && prepTime) {
updates.prepTimeLeft = (prev.prepTimeLeft || 0) + prepTime;
}
return { ...prev, ...updates };
});
};
const handleReady = (orderId) => {
setOrders((prev) =>
prev.map((o) => (o.id === orderId ? { ...o, status: "ready" } : o))
);
if (selectedOrder && selectedOrder.id === orderId) {
setSelectedOrder((prev) => prev ? { ...prev, status: "ready" } : null);
}
};
const handleToggleProduct = (productId) => {
setProducts((prev) =>
prev.map((p) => (p.id === productId ? { ...p, active: !p.active } : p))
);
};
const pendingCount = orders.filter((o) => o.status === "pending").length;
const inactiveCount = products.filter((p) => !p.active).length;
return (