"use client"; import { FormEvent, useEffect, useState } from "react"; type Surface = "login" | "admin" | "guest" | "staff"; type AdminSection = "overview" | "menu" | "tables" | "branding" | "settings"; type TicketKind = "order" | "call"; type TicketStatus = "open" | "done"; type Brand = { primary: string; accent: string; background: string; text: string; radius: number; font: "modern" | "classic" | "soft"; }; type Settings = { confirmBeforeResolve: boolean; soundEnabled: boolean; orderingEnabled: boolean; waiterCallEnabled: boolean; orderingPaused: boolean; showTotal: boolean; }; type MenuItem = { id: string; categoryId?: string; variantId?: string; imageAssetId?: string; persisted?: boolean; translations?: Record; name: string; description: string; category: string; portion: string; price: number; available: boolean; featured?: boolean; image?: string; tags: string[]; allergens?: string[]; }; type DiningTable = { id: string; number: number; zone: string; token: string; active: boolean; }; type TicketItem = { id?: string; name: string; quantity: number; portion?: string; price: number; note?: string; }; type Ticket = { id: string; kind: TicketKind; status: TicketStatus; tableNumber: number; zone: string; createdAt: string; resolvedAt?: string; total?: number; callReason?: string; paymentMethod?: string; items?: TicketItem[]; }; type RestaurantState = { restaurant: { id: string; slug: string; name: string; location: string; currency: string; brand: Brand; settings: Settings; }; categories: string[]; items: MenuItem[]; tables: DiningTable[]; tickets: Ticket[]; }; type CartLine = MenuItem & { quantity: number; note?: string }; type GuestCopy = { greeting: string; whatToEat: string; kitchenHours: string; callWaiter: string; helpOrBill: string; pausedTitle: string; pausedBody: string; search: string; fromKitchen: string; itemsLabel: string; noResults: string; yourOrder: string; oneItem: string; manyItems: string; allergens: string; poweredBy: string; kitchenNote: string; noteExample: string; add: string; checkItems: string; subtotal: string; service: string; included: string; total: string; payAtRestaurant: string; payBody: string; sendOrder: string; callTitle: string; callBody: string; reasons: string[]; payQuestion: string; card: string; cash: string; notify: string; orderSent: string; orderSentBody: string; prepTime: string; continueMenu: string; }; const GUEST_COPY: Record<"SR" | "EN" | "DE", GuestCopy> = { SR: { greeting: "Dobro veče 👋", whatToEat: "Šta vam se jede?", kitchenHours: "Kuhinja radi do 22:30 · priprema 15–25 min", callWaiter: "Pozovi konobara", helpOrBill: "Pomoć ili račun", pausedTitle: "Poručivanje je trenutno pauzirano.", pausedBody: "Meni možete pregledati, a konobara pozvati u svakom trenutku.", search: "Pretražite meni…", fromKitchen: "Iz naše kuhinje", itemsLabel: "artikala", noResults: "Nema rezultata za ovu pretragu.", yourOrder: "Vaša porudžbina", oneItem: "stavka", manyItems: "stavke", allergens: "Alergeni dostupni", poweredBy: "Digitalni meni pokreće MeniFlow", kitchenNote: "Napomena za kuhinju", noteExample: "Npr. bez luka", add: "Dodaj", checkItems: "Proverite stavke pre slanja.", subtotal: "Međuzbir", service: "Usluga", included: "Uključena", total: "Ukupno", payAtRestaurant: "Plaćanje u restoranu", payBody: "Porudžbinu plaćate konobaru, karticom ili gotovinom.", sendOrder: "Pošalji porudžbinu", callTitle: "Pozovite konobara", callBody: "Recite nam kako možemo da pomognemo.", reasons: ["Potrebna mi je pomoć", "Želim da poručim", "Donesite račun", "Drugo"], payQuestion: "Kako želite da platite?", card: "Kartica", cash: "Gotovina", notify: "Obavesti konobara", orderSent: "Porudžbina je poslata", orderSentBody: "Osoblje je primilo vaš zahtev. Prijatno!", prepTime: "Procenjeno vreme pripreme", continueMenu: "Nastavi pregled menija", }, EN: { greeting: "Good evening 👋", whatToEat: "What are you in the mood for?", kitchenHours: "Kitchen open until 10:30 PM · 15–25 min preparation", callWaiter: "Call a waiter", helpOrBill: "Help or the bill", pausedTitle: "Ordering is currently paused.", pausedBody: "You can still browse the menu or call a waiter at any time.", search: "Search the menu…", fromKitchen: "From our kitchen", itemsLabel: "items", noResults: "No items match your search.", yourOrder: "Your order", oneItem: "item", manyItems: "items", allergens: "Allergen info available", poweredBy: "Digital menu powered by MeniFlow", kitchenNote: "Note for the kitchen", noteExample: "E.g. no onions", add: "Add", checkItems: "Review your items before sending.", subtotal: "Subtotal", service: "Service", included: "Included", total: "Total", payAtRestaurant: "Pay at the restaurant", payBody: "Pay your waiter by card or cash.", sendOrder: "Send order", callTitle: "Call a waiter", callBody: "Tell us how we can help.", reasons: ["I need help", "I would like to order", "Bring the bill", "Other"], payQuestion: "How would you like to pay?", card: "Card", cash: "Cash", notify: "Notify waiter", orderSent: "Order sent", orderSentBody: "The team has received your request. Enjoy!", prepTime: "Estimated preparation time", continueMenu: "Continue browsing", }, DE: { greeting: "Guten Abend 👋", whatToEat: "Worauf haben Sie Appetit?", kitchenHours: "Küche bis 22:30 Uhr · Zubereitung 15–25 Min.", callWaiter: "Service rufen", helpOrBill: "Hilfe oder Rechnung", pausedTitle: "Bestellungen sind momentan pausiert.", pausedBody: "Sie können die Speisekarte ansehen oder jederzeit den Service rufen.", search: "Speisekarte durchsuchen…", fromKitchen: "Aus unserer Küche", itemsLabel: "Gerichte", noResults: "Keine passenden Gerichte gefunden.", yourOrder: "Ihre Bestellung", oneItem: "Artikel", manyItems: "Artikel", allergens: "Allergeninfo verfügbar", poweredBy: "Digitale Speisekarte von MeniFlow", kitchenNote: "Hinweis an die Küche", noteExample: "Z. B. ohne Zwiebeln", add: "Hinzufügen", checkItems: "Bitte prüfen Sie Ihre Auswahl.", subtotal: "Zwischensumme", service: "Service", included: "Inklusive", total: "Gesamt", payAtRestaurant: "Zahlung im Restaurant", payBody: "Zahlen Sie beim Service mit Karte oder bar.", sendOrder: "Bestellung senden", callTitle: "Service rufen", callBody: "Wie können wir helfen?", reasons: ["Ich brauche Hilfe", "Ich möchte bestellen", "Die Rechnung bitte", "Sonstiges"], payQuestion: "Wie möchten Sie zahlen?", card: "Karte", cash: "Bar", notify: "Service benachrichtigen", orderSent: "Bestellung gesendet", orderSentBody: "Das Team hat Ihre Anfrage erhalten. Guten Appetit!", prepTime: "Voraussichtliche Zubereitungszeit", continueMenu: "Weiter zur Speisekarte", }, }; const FOOD_IMAGES = { grill: "https://images.unsplash.com/photo-1544025162-d76694265947?auto=format&fit=crop&w=900&q=80", salad: "https://images.unsplash.com/photo-1540189549336-e6e99c3679fe?auto=format&fit=crop&w=900&q=80", pasta: "https://images.unsplash.com/photo-1473093295043-cdd812d0e601?auto=format&fit=crop&w=900&q=80", dessert: "https://images.unsplash.com/photo-1571877227200-a0d98ea607e9?auto=format&fit=crop&w=900&q=80", }; const bistroItems: MenuItem[] = [ { id: "item-cevapi", name: "Ćevapi u somunu", description: "Domaći juneći ćevapi, somun, luk i kajmak.", category: "Glavna jela", portion: "10 kom · 300 g", price: 890, available: true, featured: true, image: FOOD_IMAGES.grill, tags: ["Preporuka kuće"], allergens: ["Gluten", "Mleko"], }, { id: "item-pasta", name: "Pasta sa tartufima", description: "Sveža pasta, krem od parmezana i crni tartuf.", category: "Glavna jela", portion: "320 g", price: 1190, available: true, featured: true, image: FOOD_IMAGES.pasta, tags: ["Vegetarijansko"], allergens: ["Gluten", "Mleko", "Jaja"], }, { id: "item-salata", name: "Dunavska salata", description: "Zeleniš, pečena paprika, feta, orasi i preliv od nara.", category: "Salate", portion: "280 g", price: 690, available: true, featured: true, image: FOOD_IMAGES.salad, tags: ["Vegetarijansko", "Bez glutena"], allergens: ["Mleko", "Orašasti plodovi"], }, { id: "item-tiramisu", name: "Tiramisu", description: "Maskarpone, espresso i kakao — naš kućni klasik.", category: "Dezerti", portion: "160 g", price: 490, available: true, image: FOOD_IMAGES.dessert, tags: ["Omiljeno"], allergens: ["Mleko", "Jaja", "Gluten"], }, { id: "item-limunada", name: "Domaća limunada", description: "Limun, nana i malo meda. Bez veštačkih dodataka.", category: "Bezalkoholna pića", portion: "0,4 l", price: 360, available: true, tags: ["Domaće"], }, { id: "item-voda", name: "Mineralna voda", description: "Rosa gazirana ili negazirana.", category: "Bezalkoholna pića", portion: "0,33 l", price: 220, available: true, tags: [], }, { id: "item-rakija", name: "Šljivovica Reserve", description: "Odležala domaća rakija od požegače.", category: "Alkoholna pića", portion: "0,03 l", price: 390, available: false, tags: ["18+"], }, ]; function makeTables(count = 14): DiningTable[] { return Array.from({ length: count }, (_, index) => ({ id: `table-${index + 1}`, number: index + 1, zone: index < 8 ? "Sala" : index < 12 ? "Terasa" : "Bašta", token: `bd-${(index + 1).toString().padStart(2, "0")}-7f3a`, active: true, })); } const initialTickets: Ticket[] = [ { id: "ticket-1", kind: "call", status: "open", tableNumber: 7, zone: "Sala", createdAt: new Date(Date.now() - 11 * 60_000).toISOString(), callReason: "Donesite račun", paymentMethod: "Kartica", }, { id: "ticket-2", kind: "order", status: "open", tableNumber: 12, zone: "Terasa", createdAt: new Date(Date.now() - 5 * 60_000).toISOString(), total: 2040, items: [ { name: "Ćevapi u somunu", quantity: 2, price: 890, note: "Bez luka" }, { name: "Mineralna voda", quantity: 1, price: 220, portion: "0,33 l" }, { name: "Domaća limunada", quantity: 1, price: 360, portion: "0,4 l" }, ], }, { id: "ticket-3", kind: "call", status: "open", tableNumber: 4, zone: "Sala", createdAt: new Date(Date.now() - 2 * 60_000).toISOString(), callReason: "Potrebna mi je pomoć", }, { id: "ticket-4", kind: "order", status: "open", tableNumber: 9, zone: "Terasa", createdAt: new Date(Date.now() - 45_000).toISOString(), total: 1050, items: [ { name: "Dunavska salata", quantity: 1, price: 690 }, { name: "Domaća limunada", quantity: 1, price: 360 }, ], }, { id: "ticket-history", kind: "order", status: "done", tableNumber: 2, zone: "Sala", createdAt: new Date(Date.now() - 42 * 60_000).toISOString(), resolvedAt: new Date(Date.now() - 31 * 60_000).toISOString(), total: 1380, items: [{ name: "Dunavska salata", quantity: 2, price: 690 }], }, ]; const bistroFallback: RestaurantState = { restaurant: { id: "restaurant-bistro-dunav", slug: "bistro-dunav", name: "Bistro Dunav", location: "Dorćol · Beograd", currency: "RSD", brand: { primary: "#1F5A4A", accent: "#D77A5B", background: "#FFF9F3", text: "#24211F", radius: 22, font: "modern", }, settings: { confirmBeforeResolve: true, soundEnabled: true, orderingEnabled: true, waiterCallEnabled: true, orderingPaused: false, showTotal: true, }, }, categories: [ "Sve", "Preporučujemo", "Glavna jela", "Salate", "Dezerti", "Bezalkoholna pića", "Alkoholna pića", ], items: bistroItems, tables: makeTables(), tickets: initialTickets, }; const casaFallback: RestaurantState = { restaurant: { id: "restaurant-casa-verde", slug: "casa-verde", name: "Casa Verde", location: "Vračar · Beograd", currency: "RSD", brand: { primary: "#305B38", accent: "#E5A93F", background: "#FBF7EA", text: "#27312A", radius: 14, font: "classic", }, settings: { confirmBeforeResolve: false, soundEnabled: true, orderingEnabled: true, waiterCallEnabled: true, orderingPaused: false, showTotal: true, }, }, categories: ["Sve", "Preporučujemo", "Paste", "Salate", "Dezerti", "Pića"], items: [ { ...bistroItems[1], id: "casa-pasta", category: "Paste", price: 1290 }, { ...bistroItems[2], id: "casa-salata", name: "Verde salata", price: 740 }, { ...bistroItems[3], id: "casa-tiramisu", price: 520 }, ], tables: makeTables(10).map((table) => ({ ...table, token: `cv-${table.number}-4b2e` })), tickets: initialTickets.slice(2), }; function fallbackFor(slug: string) { return structuredClone(slug === "casa-verde" ? casaFallback : bistroFallback); } function money(value: number, currency = "RSD") { return `${new Intl.NumberFormat("sr-RS").format(value)} ${currency}`; } function timeAgo(value: string) { const minutes = Math.max(0, Math.floor((Date.now() - new Date(value).getTime()) / 60_000)); if (minutes < 1) return "upravo sada"; if (minutes === 1) return "pre 1 min"; return `pre ${minutes} min`; } function initials(value: string) { return value .split(" ") .map((part) => part[0]) .join("") .slice(0, 2) .toUpperCase(); } function zoneFromLabel(value: unknown) { const raw = String(value ?? "Sala").split("·").at(-1)?.trim() || "Sala"; return raw.charAt(0).toUpperCase() + raw.slice(1); } function normalizeApiState(payload: Partial & Record, fallback: RestaurantState): RestaurantState { const source = payload as Record; const restaurantSource = source.restaurant ?? {}; const brandingSource = source.branding ?? restaurantSource.brand ?? {}; const settingsSource = source.settings ?? restaurantSource.settings ?? {}; const categoryRows = Array.isArray(source.categories) ? source.categories : []; const categoryNameById = new Map( categoryRows .filter((entry: any) => entry && typeof entry === "object") .map((entry: any) => [String(entry.id), String(entry.name)]), ); const categories = categoryRows.length && typeof categoryRows[0] === "object" ? ["Sve", "Preporučujemo", ...categoryRows.map((entry: any) => String(entry.name))] : source.categories; const apiItems = Array.isArray(source.items) && source.items.some((entry: any) => Array.isArray(entry?.variants)) ? source.items.map((entry: any) => { const variant = entry.variants?.find((candidate: any) => candidate.isAvailable) ?? entry.variants?.[0] ?? {}; const fallbackMatch = fallback.items.find((candidate) => candidate.name === entry.name); const portionAmount = variant.portionAmount ?? ""; const portionUnit = variant.portionUnit === "piece" ? "kom" : variant.portionUnit === "portion" ? "porcija" : variant.portionUnit ?? ""; return { id: String(entry.id), categoryId: String(entry.categoryId), variantId: variant.id ? String(variant.id) : undefined, imageAssetId: entry.imageAssetId ? String(entry.imageAssetId) : undefined, persisted: true, translations: entry.translations && typeof entry.translations === "object" ? entry.translations : undefined, name: String(entry.name), description: String(entry.description ?? ""), category: categoryNameById.get(String(entry.categoryId)) ?? "Ostalo", portion: [variant.label, portionAmount && portionUnit ? `${portionAmount} ${portionUnit}` : ""].filter(Boolean).join(" · "), price: Number(variant.priceMinor ?? 0) / 100, available: Boolean(entry.isAvailable && (variant.isAvailable ?? true)), featured: Boolean(entry.isFeatured), image: entry.imageAssetId ? `/api/demo/media/${encodeURIComponent(String(entry.imageAssetId))}` : fallbackMatch?.image, tags: Array.isArray(entry.dietaryTags) ? entry.dietaryTags : [], allergens: fallbackMatch?.allergens ?? [], } satisfies MenuItem; }) : source.items; const apiTables = Array.isArray(source.tables) && source.tables.some((entry: any) => "tableNumber" in entry) ? source.tables.map((entry: any) => ({ id: String(entry.id), number: Number(entry.tableNumber), zone: zoneFromLabel(entry.label), token: String(entry.qrToken), active: Boolean(entry.isActive), } satisfies DiningTable)) : source.tables; const ticketRows = source.tickets && !Array.isArray(source.tickets) ? [...(source.tickets.open ?? []), ...(source.tickets.history ?? [])] : source.tickets; const apiTickets = Array.isArray(ticketRows) && ticketRows.some((entry: any) => entry.type) ? ticketRows.map((entry: any) => ({ id: String(entry.id), kind: entry.type === "waiter_call" ? "call" : "order", status: entry.status === "resolved" ? "done" : "open", tableNumber: Number(entry.tableNumber), zone: zoneFromLabel(entry.tableLabel), createdAt: String(entry.createdAt), resolvedAt: entry.resolvedAt ? String(entry.resolvedAt) : undefined, total: Number(entry.totalMinor ?? 0) / 100, callReason: entry.type === "waiter_call" ? String(entry.note ?? "Potrebna mi je pomoć") : undefined, items: Array.isArray(entry.items) ? entry.items.map((line: any) => ({ id: String(line.id), name: String(line.itemName), quantity: Number(line.quantity), portion: String(line.variantLabel ?? ""), price: Number(line.unitPriceMinor ?? 0) / 100, })) : [], } satisfies Ticket)) : ticketRows; return { restaurant: source.restaurant ? { ...fallback.restaurant, id: String(restaurantSource.id ?? fallback.restaurant.id), slug: String(restaurantSource.slug ?? fallback.restaurant.slug), name: String(brandingSource.displayName ?? restaurantSource.name ?? fallback.restaurant.name), currency: String(restaurantSource.currency ?? fallback.restaurant.currency), brand: { ...fallback.restaurant.brand, primary: brandingSource.primaryColor ?? brandingSource.primary ?? fallback.restaurant.brand.primary, accent: brandingSource.accentColor ?? brandingSource.accent ?? fallback.restaurant.brand.accent, background: brandingSource.backgroundColor ?? brandingSource.background ?? fallback.restaurant.brand.background, text: brandingSource.textColor ?? brandingSource.text ?? fallback.restaurant.brand.text, font: brandingSource.fontFamily === "serif" ? "classic" : fallback.restaurant.brand.font, }, settings: { ...fallback.restaurant.settings, confirmBeforeResolve: settingsSource.confirmBeforeResolve ?? fallback.restaurant.settings.confirmBeforeResolve, orderingEnabled: settingsSource.acceptOrders ?? settingsSource.orderingEnabled ?? fallback.restaurant.settings.orderingEnabled, waiterCallEnabled: settingsSource.waiterCallEnabled ?? fallback.restaurant.settings.waiterCallEnabled, }, } : fallback.restaurant, categories: Array.isArray(categories) && categories.length ? categories : fallback.categories, items: Array.isArray(apiItems) && apiItems.length ? apiItems : fallback.items, tables: Array.isArray(apiTables) && apiTables.length ? apiTables : fallback.tables, tickets: Array.isArray(apiTickets) && apiTickets.length ? apiTickets : fallback.tickets, }; } export default function RestaurantDemo({ initialSurface = "admin", initialSlug = "bistro-dunav", guestToken }: { initialSurface?: Surface; initialSlug?: string; guestToken?: string }) { const [surface, setSurface] = useState(initialSurface); const [section, setSection] = useState("overview"); const [slug, setSlug] = useState(initialSlug); const [data, setData] = useState(() => fallbackFor(initialSlug)); const [loading, setLoading] = useState(false); const [toast, setToast] = useState(null); useEffect(() => { let active = true; const fallback = fallbackFor(slug); setData(fallback); setLoading(true); fetch(`/api/demo/state?slug=${encodeURIComponent(slug)}`, { cache: "no-store" }) .then((response) => (response.ok ? response.json() : Promise.reject())) .then((payload) => { if (active) setData(normalizeApiState(payload.state ?? payload, fallback)); }) .catch(() => undefined) .finally(() => active && setLoading(false)); return () => { active = false; }; }, [slug]); useEffect(() => { if (!toast) return; const timer = window.setTimeout(() => setToast(null), 4200); return () => window.clearTimeout(timer); }, [toast]); async function postAction(action: string, payload: Record) { try { let actionPayload: Record = payload; if (action === "toggleItem") { actionPayload = { itemId: payload.itemId, isAvailable: payload.available }; } else if (action === "addMenuItem") { const item = payload.item as MenuItem; const amount = Number.parseFloat(item.portion.replace(",", ".")) || undefined; const unit = /\bml\b/i.test(item.portion) ? "ml" : /\bg\b/i.test(item.portion) ? "g" : /kom/i.test(item.portion) ? "piece" : "portion"; actionPayload = { item: { itemId: item.persisted ? item.id : undefined, categoryId: item.categoryId ?? data.items.find((entry) => entry.category === item.category)?.categoryId, name: item.name, description: item.description, imageAssetId: item.imageAssetId, isAvailable: item.available, isFeatured: item.featured, dietaryTags: item.tags, variants: [{ label: item.portion, portionAmount: amount, portionUnit: unit, priceMinor: Math.round(item.price * 100) }], }, }; } else if (action === "updateBranding") { const brand = payload.brand as Brand; actionPayload = { branding: { primaryColor: brand.primary, accentColor: brand.accent, backgroundColor: brand.background, textColor: brand.text, fontFamily: brand.font === "classic" ? "serif" : "sans" } }; } else if (action === "updateSettings") { const settings = payload.settings as Settings; actionPayload = { settings: { confirmBeforeResolve: settings.confirmBeforeResolve, acceptOrders: settings.orderingEnabled && !settings.orderingPaused, waiterCallEnabled: settings.waiterCallEnabled } }; } else if (action === "createTable") { const table = payload.table as DiningTable; actionPayload = { table: { tableNumber: table.number, label: `${table.zone} ${table.number}`, seats: 4 } }; } else if (action === "createOrder") { const items = payload.items as Array<{ itemId: string; quantity: number; note?: string }>; actionPayload = { qrToken: payload.tableToken, clientRequestId: `web-${Date.now()}-${Math.random().toString(16).slice(2)}`, note: items.map((item) => item.note).filter(Boolean).join(" · "), items: items.map((item) => ({ itemId: item.itemId, variantId: data.items.find((entry) => entry.id === item.itemId)?.variantId, quantity: item.quantity })), }; } else if (action === "createWaiterCall") { actionPayload = { qrToken: payload.tableToken, note: [payload.reason, payload.paymentMethod].filter(Boolean).join(" · ") }; } const response = await fetch("/api/demo/action", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ slug, action, ...actionPayload }), }); if (!response.ok) return; const result = await response.json(); if (result.state) setData((current) => normalizeApiState(result.state, current)); } catch { // The fully interactive fallback keeps the preview useful before D1 is attached. } } const sharedProps = { data, setData, postAction, setToast }; return (
{surface !== "login" && (
Klikabilni prototip
)} {surface === "login" && setSurface("admin")} />} {surface === "admin" && ( setSurface("staff")} onOpenGuest={() => setSurface("guest")} onLogout={() => setSurface("login")} /> )} {surface === "guest" && } {surface === "staff" && } {toast &&
✓{toast}
}
); } function LoginScreen({ onLogin }: { onLogin: () => void }) { const [email, setEmail] = useState("ana@bistrodunav.rs"); const [password, setPassword] = useState("demo2026"); function submit(event: FormEvent) { event.preventDefault(); if (email && password) onLogin(); } return (
M

MeniFlow za restorane

Vaš meni. Vaš brend.
Bolja usluga.

Od QR menija do porudžbine i poziva konobaru — sve na jednom mestu.

01

Jednostavan meniMenjajte ponudu i dostupnost za nekoliko sekundi.

02

Brža uslugaSvaki zahtev odmah stiže pravoj osobi.

03

Vaš identitetBoje, logo i stil svakog restorana.

M

Portal za restorane

Dobro došli nazad

Prijavite se da upravljate svojim restoranom.

Demo Podaci su već popunjeni — samo kliknite „Prijavi se“.
); } type SharedProps = { data: RestaurantState; setData: React.Dispatch>; postAction: (action: string, payload: Record) => Promise; setToast: React.Dispatch>; }; function AdminApp({ data, setData, postAction, setToast, section, setSection, slug, setSlug, loading, onOpenStaff, onOpenGuest, onLogout, }: SharedProps & { section: AdminSection; setSection: (section: AdminSection) => void; slug: string; setSlug: (slug: string) => void; loading: boolean; onOpenStaff: () => void; onOpenGuest: () => void; onLogout: () => void; }) { const nav: { id: AdminSection; label: string; icon: string }[] = [ { id: "overview", label: "Pregled", icon: "⌂" }, { id: "menu", label: "Meni", icon: "≡" }, { id: "tables", label: "Stolovi i QR", icon: "▦" }, { id: "branding", label: "Brendiranje", icon: "◐" }, { id: "settings", label: "Podešavanja", icon: "⚙" }, ]; return (
MMeniFlow
{section === "overview" && } {section === "menu" && } {section === "tables" && } {section === "branding" && } {section === "settings" && }
); } function PageHeading({ eyebrow, title, description, action }: { eyebrow?: string; title: string; description?: string; action?: React.ReactNode }) { return
{eyebrow &&

{eyebrow}

}

{title}

{description &&

{description}

}
{action}
; } function AdminOverview({ data, setSection, onOpenStaff, onOpenGuest }: { data: RestaurantState; setSection: (value: AdminSection) => void; onOpenStaff: () => void; onOpenGuest: () => void }) { const open = data.tickets.filter((ticket) => ticket.status === "open"); const orders = open.filter((ticket) => ticket.kind === "order"); const unavailable = data.items.filter((item) => !item.available).length; const recent = [...open].sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()).slice(0, 3); return ( <> Otvori operativni ekran} />
↗
Aktivni zahtevi{open.length}

{open.filter((ticket) => ticket.kind === "call").length} poziva · {orders.length} porudžbine

Uživo
≡
Artikli u meniju{data.items.length}

{data.items.filter((item) => item.available).length} dostupno danas

!
Nedostupno{unavailable}

Brzo vratite u ponudu

▦
Aktivni QR stolovi{data.tables.filter((table) => table.active).length}

{new Set(data.tables.map((table) => table.zone)).size} zone restorana

Aktivni zahtevi

Najstariji zahtevi su prvi.

{recent.map((ticket) =>
{ticket.kind === "call" ? "◔" : "≡"}
Sto {ticket.tableNumber}

{ticket.kind === "call" ? ticket.callReason : `${ticket.items?.reduce((sum, item) => sum + item.quantity, 0)} stavke · ${money(ticket.total ?? 0)}`}

10 * 60_000 ? "urgent" : ""}`}>{timeAgo(ticket.createdAt)}
)}
{recent.length === 0 &&
Sve je rešeno — nema aktivnih zahteva.
}

Današnji ritam

Broj zahteva po delu dana

Danas
47ukupno zahteva
+12% u odnosu na juče
12h15h18h21h
); } function MenuManager({ data, setData, postAction, setToast }: SharedProps) { const [query, setQuery] = useState(""); const [category, setCategory] = useState("Sve"); const [showForm, setShowForm] = useState(false); const [editing, setEditing] = useState(null); const filtered = data.items.filter((item) => (category === "Sve" || category === "Preporučujemo" ? category === "Sve" || item.featured : item.category === category) && item.name.toLowerCase().includes(query.toLowerCase())); function toggle(item: MenuItem) { setData((current) => ({ ...current, items: current.items.map((entry) => entry.id === item.id ? { ...entry, available: !entry.available } : entry) })); void postAction("toggleItem", { itemId: item.id, available: !item.available }); setToast(item.available ? `${item.name} je označen kao nedostupan.` : `${item.name} je ponovo dostupan.`); } return ( <> { setEditing(null); setShowForm(true); }}>＋ Dodaj artikal} />
{data.categories.map((name) => )}
ArtikalKategorijaPorcijaCenaDostupno
{filtered.map((item) =>
{item.name}

{item.description}

{item.tags.slice(0, 2).map((tag) => {tag})}{item.allergens?.length ? i : null}
{item.category}{item.portion}{money(item.price, data.restaurant.currency)}
)}
Prikazano {filtered.length} od {data.items.length} artikala 1
{showForm && setShowForm(false)} onSave={async (item, file) => { let savedItem = item; if (file) { if (file.size > 5 * 1024 * 1024) { setToast("Fotografija može imati najviše 5 MB."); return false; } try { const form = new FormData(); form.append("slug", data.restaurant.slug); form.append("file", file); const response = await fetch("/api/demo/upload", { method: "POST", body: form }); const result = await response.json(); if (!response.ok || !result.asset) throw new Error(result?.error?.message ?? "Upload nije uspeo."); savedItem = { ...item, imageAssetId: result.asset.id, image: result.asset.url }; } catch { setToast("Fotografija nije sačuvana. Pokušajte ponovo."); return false; } } setData((current) => ({ ...current, items: editing ? current.items.map((entry) => entry.id === savedItem.id ? savedItem : entry) : [savedItem, ...current.items] })); await postAction("addMenuItem", { item: savedItem }); setShowForm(false); setToast(editing ? "Izmene artikla su sačuvane." : `${savedItem.name} je dodat u meni.`); return true; }} />} ); } function FoodThumb({ item, large = false }: { item: MenuItem; large?: boolean }) { return
{item.image ? : {item.category.includes("pića") ? "0,3" : initials(item.name).slice(0, 1)}}
; } function MenuItemModal({ data, existing, onClose, onSave }: { data: RestaurantState; existing: MenuItem | null; onClose: () => void; onSave: (item: MenuItem, file: File | null) => Promise }) { const [name, setName] = useState(existing?.name ?? ""); const [category, setCategory] = useState(existing?.category ?? "Glavna jela"); const [description, setDescription] = useState(existing?.description ?? ""); const [portion, setPortion] = useState(existing?.portion ?? "300 g"); const [price, setPrice] = useState(existing?.price.toString() ?? ""); const [tags, setTags] = useState(existing?.tags.join(", ") ?? ""); const [available, setAvailable] = useState(existing?.available ?? true); const [featured, setFeatured] = useState(existing?.featured ?? false); const [selectedFile, setSelectedFile] = useState(null); const [saving, setSaving] = useState(false); async function submit(event: FormEvent) { event.preventDefault(); if (!name.trim() || !Number(price)) return; setSaving(true); const saved = await onSave({ id: existing?.id ?? `item-${Date.now()}`, name: name.trim(), category, description: description.trim(), portion: portion.trim(), price: Number(price), available, featured, image: existing?.image, imageAssetId: existing?.imageAssetId, persisted: existing?.persisted, tags: tags.split(",").map((tag) => tag.trim()).filter(Boolean), allergens: existing?.allergens ?? [], categoryId: existing?.categoryId ?? data.items.find((item) => item.category === category)?.categoryId, variantId: existing?.variantId, }, selectedFile); if (!saved) setSaving(false); } return
event.target === event.currentTarget && onClose()}>

{existing ? "Izmena ponude" : "Novi artikal"}

{existing ? "Uredi artikal" : "Dodajte novi artikal"}

Fotografija i dodatne oznake nisu obavezne.