/* Relay — chrome: nav rail, top bar, toolbar, detail slide-over, toasts */ const { BRANCHES, statusOrder } = window.RelayData; // ---------------- Nav rail ---------------- function NavRail({ view, setView }) { const items = [ { id: "dashboard", icon: I.dashboard, label: "Canlı pano" }, { id: "orders", icon: I.orders, label: "Tüm siparişler" }, { id: "catalog", icon: I.catalog, label: "Katalog" }, { id: "reports", icon: I.reports, label: "Raporlar" }, { id: "integrations", icon: I.integrations, label: "Entegrasyonlar" }, ]; const [hover, setHover] = React.useState(null); return ( ); } // ---------------- Top bar ---------------- function TopBar({ branch, setBranch, soundOn, setSoundOn, now, newCount, search, setSearch, showSearch = true }) { const [open, setOpen] = React.useState(false); return (
{/* branch selector */}
{open && ( <>
setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 40 }} />
Şubeler
{BRANCHES.map((b) => ( ))}
)}
{/* search */} {showSearch ? (
setSearch(e.target.value)} placeholder="Sipariş, müşteri, referans ara…" style={{ width: "100%", padding: "9px 12px 9px 36px", borderRadius: "var(--radius-sm)", border: "1px solid var(--border)", background: "var(--surface-2)", fontSize: 13, color: "var(--text)", outline: "none", }} />
) :
} {/* live status */}
Canlı {clockTime(now)}
{/* sound */} {/* bell */}
); } // ---------------- Toolbar (filters + layout switch) ---------------- function Toolbar({ typeFilter, setTypeFilter, platFilter, togglePlat, clearPlat, statusFilter, setStatusFilter, layout, setLayout, simOn, setSimOn, counts }) { const platList = Object.values(PLATFORMS); const layouts = [ { id: "list", icon: I.list, label: "Liste" }, { id: "grid", icon: I.grid, label: "Izgara" }, { id: "columns", icon: I.columns, label: "Sütunlar" }, ]; const statuses = [ { id: "active", label: "Aktif" }, { id: "new", label: "Yeni" }, { id: "preparing", label: "Hazırlanıyor" }, { id: "ready", label: "Hazır" }, { id: "completed", label: "Tamamlandı" }, { id: "all", label: "Tümü" }, ]; const seg = (active) => ({ padding: "6px 12px", fontSize: 12.5, fontWeight: 600, border: "none", background: active ? "var(--surface)" : "transparent", color: active ? "var(--text)" : "var(--text-2)", borderRadius: 6, boxShadow: active ? "var(--shadow-sm)" : "none", }); return (
{/* type */}
{[["all", "Tümü"], ["food", "Yemek"], ["retail", "Perakende"]].map(([id, lbl]) => ( ))}
{/* status pills */}
{statuses.map((s) => ( ))}
{/* platform filter chips */}
{platList.map((p) => { const on = platFilter.includes(p.id); const anyOn = platFilter.length > 0; return ( ); })} {platFilter.length > 0 && }
{/* sim toggle */} {/* layout switch */}
{layouts.map((l) => { const Ico = l.icon; return ( ); })}
); } // ---------------- Detail slide-over ---------------- function DetailPanel({ order, now, onClose, onAccept, onReject, onAdvance, onReject2 }) { if (!order) return null; const f = FLOW_LABELS[order.type]; const act = actionFor(order); const isNew = order.status === "new"; const steps = statusOrder.map((k) => ({ key: k, label: f[k] })); const curIdx = order.status === "cancelled" ? -1 : statusOrder.indexOf(order.status); return ( <>
); } // ---------------- Toasts ---------------- function Toasts({ toasts, onClick }) { return (
{toasts.map((t) => (
onClick(t.order)} style={{ background: "var(--surface)", border: "1px solid var(--border)", borderLeft: "3px solid var(--new)", borderRadius: "var(--radius)", boxShadow: "var(--shadow-lg)", padding: "12px 14px", display: "flex", alignItems: "center", gap: 11, cursor: "pointer", animation: "toastIn .3s cubic-bezier(.2,.8,.2,1)", }}>
Yeni sipariş
{t.order.customer}
{PLATFORMS[t.order.platformId].name} · {t.order.currency} {fmtMoney(t.order.total)}
))}
); } Object.assign(window, { NavRail, TopBar, Toolbar, DetailPanel, Toasts });