/* global React, StripeBg, Logo, Button, RedTitle, GreenTitle, Eyebrow, useToast */ // Pepe Verde — admin (login + dashboard + reservas + menu CRUD + settings). // Demo credentials shown on login screen. State persists to localStorage. const { useState, useMemo, useEffect } = React; const ADMIN_PASS = "pepeverde"; // demo // ============================================================ // ADMIN ROOT — handles login + sub-routes // ============================================================ function AdminApp({ lang, settings, setSettings, items, setItems, categories, setCategories, reservations, setReservations }) { const [authed, setAuthed] = useState(() => { try { return sessionStorage.getItem("pv_admin") === "1"; } catch (e) { return false; } }); const [tab, setTab] = useState("dashboard"); if (!authed) return { try { sessionStorage.setItem("pv_admin", "1"); } catch (e) {} setAuthed(true); }} />; return (
{/* Sidebar */} {/* Main */}
{tab === "dashboard" && } {tab === "reservas" && } {tab === "menu" && } {tab === "settings" && }
); } // ============================================================ // LOGIN // ============================================================ function AdminLogin({ onAuth }) { const [pass, setPass] = useState(""); const [err, setErr] = useState(false); const submit = (e) => { e.preventDefault(); if (pass === ADMIN_PASS) onAuth(); else setErr(true); }; return (
admin Entrar
{ setPass(e.target.value); setErr(false); }} style={{ width: "100%", padding: "12px 14px", fontFamily: 'Inter, sans-serif', fontSize: 14, background: "#F7F4E8", color: "#1F5A3F", border: err ? "1px solid #C8463F" : "1px solid rgba(31,90,63,0.4)", outline: "none", borderRadius: 0, boxSizing: "border-box", }} /> {err &&

Password incorreta

}

Demo: password é pepeverde

← Voltar ao site

); } // ============================================================ // DASHBOARD // ============================================================ function AdminDashboard({ reservations, settings, setTab }) { const today = new Date().toISOString().slice(0, 10); const todayRes = reservations.filter((r) => r.date === today && r.status !== "cancelled" && r.status !== "declined"); const pending = reservations.filter((r) => r.status === "pending"); const upcoming = reservations .filter((r) => r.date >= today && (r.status === "confirmed" || r.status === "pending")) .sort((a, b) => (a.date + a.time).localeCompare(b.date + b.time)) .slice(0, 8); // by-day for next 7 days const byDay = useMemo(() => { const days = []; for (let i = 0; i < 7; i++) { const d = new Date(); d.setDate(d.getDate() + i); const key = d.toISOString().slice(0, 10); const list = reservations.filter((r) => r.date === key && (r.status === "confirmed" || r.status === "pending")); days.push({ key, label: d.toLocaleDateString("pt-PT", { weekday: "short", day: "2-digit", month: "short" }), count: list.length, people: list.reduce((s, r) => s + r.people, 0), }); } return days; }, [reservations]); const maxPeople = Math.max(1, ...byDay.map((d) => d.people)); return (
s + r.people, 0)} pessoas`} /> s + d.count, 0)} sub={`${byDay.reduce((s, d) => s + d.people, 0)} pessoas`} />

Próximos 7 dias

{byDay.map((d) => (
{d.people}p
{d.label}
))}

Próximas reservas

); } function StatCard({ label, value, sub, accent = "#1F5A3F" }) { return (
{label}
{value}
{sub &&
{sub}
}
); } // ============================================================ // RESERVAS // ============================================================ function AdminReservas({ reservations, setReservations, settings }) { const toast = useToast(); const [filter, setFilter] = useState("all"); const [period, setPeriod] = useState("all"); // all, today, week, month const [editing, setEditing] = useState(null); // reservation or 'new' const [search, setSearch] = useState(""); const filtered = useMemo(() => { let list = [...reservations].sort((a, b) => (b.date + b.time).localeCompare(a.date + a.time)); if (filter !== "all") list = list.filter((r) => r.status === filter); if (search.trim()) { const q = search.toLowerCase(); list = list.filter((r) => r.name.toLowerCase().includes(q) || r.email.toLowerCase().includes(q) || r.phone.includes(q)); } const today = new Date().toISOString().slice(0, 10); if (period === "today") list = list.filter((r) => r.date === today); if (period === "week") { const w = new Date(); w.setDate(w.getDate() + 7); const wk = w.toISOString().slice(0, 10); list = list.filter((r) => r.date >= today && r.date <= wk); } if (period === "month") { const m = new Date(); m.setMonth(m.getMonth() + 1); const mk = m.toISOString().slice(0, 10); list = list.filter((r) => r.date >= today && r.date <= mk); } return list; }, [reservations, filter, period, search]); const update = (id, patch) => { setReservations(reservations.map((r) => r.id === id ? { ...r, ...patch } : r)); toast("Reserva actualizada"); }; const remove = (id) => { if (!confirm("Apagar reserva?")) return; setReservations(reservations.filter((r) => r.id !== id)); toast("Reserva apagada"); }; const exportCsv = () => { const rows = [ ["ID", "Nome", "Telefone", "Email", "Data", "Hora", "Pessoas", "Zona", "Estado", "Notas"], ...filtered.map((r) => [r.id, r.name, r.phone, r.email, r.date, r.time, r.people, r.area, r.status, r.notes]), ]; const csv = rows.map((r) => r.map((c) => `"${String(c || "").replace(/"/g, '""')}"`).join(",")).join("\n"); const blob = new Blob([csv], { type: "text/csv" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "reservas-" + new Date().toISOString().slice(0, 10) + ".csv"; a.click(); URL.revokeObjectURL(url); toast("CSV exportado"); }; return (
} />
setSearch(e.target.value)} style={{ flex: 1, minWidth: 240, padding: "10px 14px", fontFamily: 'Inter, sans-serif', fontSize: 13, background: "#F7F4E8", color: "#1F5A3F", border: "1px solid rgba(31,90,63,0.4)", outline: "none", borderRadius: 0, }} />
{editing && ( setEditing(null)} onSave={(data) => { if (editing === "new") { setReservations([{ id: "r-" + Date.now().toString(36), createdAt: Date.now(), ...data }, ...reservations]); toast("Reserva criada"); } else { update(editing.id, data); } setEditing(null); }} /> )}
); } function Pills({ options, value, onChange, accent = "#1F5A3F" }) { return (
{options.map(([k, l]) => ( ))}
); } function StatusBadge({ status }) { const map = { pending: { bg: "#fff5d6", color: "#8a6d00", label: "Pendente" }, confirmed: { bg: "#dceadf", color: "#1F5A3F", label: "Confirmada" }, declined: { bg: "#f5dad7", color: "#7a1d18", label: "Recusada" }, cancelled: { bg: "#e8e3d6", color: "#5a5040", label: "Cancelada" }, completed: { bg: "#cde5d8", color: "#1F5A3F", label: "Concluída" }, noshow: { bg: "#f5dad7", color: "#7a1d18", label: "No-show" }, }; const s = map[status] || map.pending; return ( {s.label} ); } function ReservationTable({ reservations, onEdit, onUpdate, onRemove, compact = false }) { if (reservations.length === 0) { return (
Sem reservas para mostrar
); } return (
{!compact && } {reservations.map((r, i) => ( {!compact && ( )} ))}
Data / Hora Nome Pax Contacto EstadoAções
{r.date}
{r.time}
{r.name}
{r.notes &&
“{r.notes}”
}
{r.area}
 {r.people}
{r.phone}
{r.email}
{r.status === "pending" && ( <> onUpdate(r.id, { status: "confirmed" })}>✓ Aceitar onUpdate(r.id, { status: "declined" })}>✕ Recusar )} {r.status === "confirmed" && ( <> onUpdate(r.id, { status: "completed" })}>Concluir onUpdate(r.id, { status: "noshow" })}>No-show )} onEdit(r)}>Editar onRemove(r.id)}>Apagar
); } function ActionBtn({ children, onClick, variant = "primary" }) { const styles = { primary: { background: "#1F5A3F", color: "#F7F4E8", border: "1px solid #1F5A3F" }, red: { background: "transparent", color: "#C8463F", border: "1px solid #C8463F" }, outline: { background: "transparent", color: "#1F5A3F", border: "1px solid #1F5A3F" }, ghost: { background: "transparent", color: "#1F5A3F", border: "1px solid transparent", opacity: 0.5 }, }; return ( ); } // ============================================================ // RESERVATION MODAL (new + edit) // ============================================================ function ReservationModal({ reservation, onClose, onSave, settings }) { const [form, setForm] = useState(reservation || { name: "", phone: "", email: "", date: "", time: "", people: 2, area: "indiferente", notes: "", status: "confirmed", }); return (
e.stopPropagation()} style={{ background: "#F7F4E8", border: "1px solid #1F5A3F", padding: "36px 32px", maxWidth: 520, width: "100%", maxHeight: "90vh", overflow: "auto", }}> {reservation ? "editar" : "nova"} Reserva
setForm({ ...form, name: v })} />
setForm({ ...form, phone: v })} /> setForm({ ...form, email: v })} />
setForm({ ...form, date: v })} /> setForm({ ...form, time: v })} /> setForm({ ...form, people: Number(v) })} />
setForm({ ...form, notes: v })} />
); } function Field({ label, value, onChange, type = "text", textarea = false }) { return (
{textarea ? (