chore: add project files and setup gitignore

2026-05-08 10:25:14 +01:00
parent ea29a2f3f3
commit 70a62021a2
58 changed files with 13404 additions and 0 deletions
--- a/reserva-mesa-dashboard/components/dashboard/AssignTableModal.tsx
+++ b/reserva-mesa-dashboard/components/dashboard/AssignTableModal.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import { X, Users, Table as TableIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Mesa } from "@/types/mesa";
+import { Reserva } from "@/types/reserva";
+
+interface AssignTableModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  reserva: Reserva | null;
+  mesas: Mesa[];
+  onAssign: (mesa: Mesa) => void;
+}
+
+export function AssignTableModal({ isOpen, onClose, reserva, mesas, onAssign }: AssignTableModalProps) {
+  if (!reserva) return null;
+
+  const mesasDisponiveis = mesas.filter(
+    (m) => m.estado === "Livre" && m.capacidade >= reserva.pessoas
+  );
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={onClose}
+            className="fixed inset-0 z-[60] bg-background/80 backdrop-blur-sm"
+          />
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95, x: "-50%", y: "-50%" }}
+            animate={{ opacity: 1, scale: 1, x: "-50%", y: "-50%" }}
+            exit={{ opacity: 0, scale: 0.95, x: "-50%", y: "-50%" }}
+            className="fixed left-1/2 top-1/2 z-[70] w-[90%] max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-border bg-card p-8 shadow-[0_0_50px_-12px_rgba(0,0,0,0.5)]"
+          >
+            <div className="flex items-center justify-between mb-6">
+              <h3 className="text-xl font-display font-bold">Atribuir Mesa</h3>
+              <button onClick={onClose} className="rounded-full p-1 hover:bg-muted">
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            <div className="mb-6 rounded-lg bg-muted/50 p-4">
+              <p className="text-sm font-medium text-muted-foreground uppercase tracking-wider mb-1">Reserva de</p>
+              <p className="font-bold text-lg">{reserva.clienteEmail}</p>
+              <p className="text-sm text-muted-foreground">{reserva.pessoas} pessoas • {reserva.hora}</p>
+            </div>
+
+            <div className="space-y-4">
+              <p className="text-sm font-medium">Mesas Disponíveis (Capacidade ≥ {reserva.pessoas})</p>
+              
+              <div className="grid grid-cols-2 gap-3 max-h-60 overflow-y-auto pr-2">
+                {mesasDisponiveis.map((mesa) => (
+                  <button
+                    key={mesa.id}
+                    onClick={() => onAssign(mesa)}
+                    className="flex flex-col items-center justify-center rounded-lg border border-border p-3 hover:border-primary/50 hover:bg-primary/5 transition-all group"
+                  >
+                    <TableIcon className="h-5 w-5 mb-1 text-muted-foreground group-hover:text-primary" />
+                    <span className="font-bold text-lg">Mesa {mesa.numero}</span>
+                    <span className="text-xs text-muted-foreground">{mesa.capacidade} lugares</span>
+                  </button>
+                ))}
+              </div>
+
+              {mesasDisponiveis.length === 0 && (
+                <div className="text-center py-6 border-2 border-dashed rounded-lg">
+                  <p className="text-sm text-muted-foreground text-destructive">Nenhuma mesa livre com capacidade suficiente.</p>
+                </div>
+              )}
+            </div>
+
+            <div className="mt-8 flex gap-3">
+              <Button variant="outline" className="flex-1" onClick={() => onAssign({ numero: 0 } as any)}>
+                Confirmar sem Mesa
+              </Button>
+              <Button variant="ghost" onClick={onClose}>Cancelar</Button>
+            </div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}
--- a/reserva-mesa-dashboard/components/dashboard/Header.tsx
+++ b/reserva-mesa-dashboard/components/dashboard/Header.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { UserNav } from "./UserNav";
+import { usePathname } from "next/navigation";
+
+const pageTitles: Record<string, string> = {
+  "/": "Dashboard",
+  "/reservas": "Reservas",
+  "/lista-espera": "Lista de Espera",
+  "/mesas": "Mesas",
+  "/equipa": "Equipa",
+  "/historico": "Histórico",
+  "/configuracoes": "Configurações",
+};
+
+export function Header() {
+  const pathname = usePathname();
+  const title = pageTitles[pathname] || "Dashboard";
+
+  return (
+    <header className="hidden md:flex h-20 items-center justify-between px-8 border-b border-border bg-card/50 backdrop-blur-sm sticky top-0 z-30">
+      <h2 className="text-xl font-display font-bold text-foreground">{title}</h2>
+      <UserNav />
+    </header>
+  );
+}
--- a/reserva-mesa-dashboard/components/dashboard/MobileNav.tsx
+++ b/reserva-mesa-dashboard/components/dashboard/MobileNav.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { useState } from "react";
+import { Sidebar } from "./Sidebar";
+import { Menu, X } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+
+export function MobileNav() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="md:hidden">
+      <div className="flex h-16 items-center justify-between border-b border-border bg-card px-4">
+        <div className="flex items-center gap-2">
+          <div className="h-8 w-8 rounded-lg bg-primary flex items-center justify-center">
+            <span className="text-primary-foreground font-bold">R</span>
+          </div>
+          <span className="text-lg font-display font-bold text-primary">ReservaMesa</span>
+        </div>
+        <button
+          onClick={() => setIsOpen(true)}
+          className="rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+        >
+          <Menu className="h-6 w-6" />
+        </button>
+      </div>
+
+      <AnimatePresence>
+        {isOpen && (
+          <>
+            {/* Backdrop */}
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              onClick={() => setIsOpen(false)}
+              className="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm"
+            />
+            
+            {/* Sidebar */}
+            <motion.div
+              initial={{ x: "-100%" }}
+              animate={{ x: 0 }}
+              exit={{ x: "-100%" }}
+              transition={{ type: "spring", damping: 25, stiffness: 200 }}
+              className="fixed inset-y-0 left-0 z-50 w-64 shadow-2xl"
+            >
+              <div className="relative h-full w-full">
+                <button
+                  onClick={() => setIsOpen(false)}
+                  className="absolute right-4 top-4 z-50 rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                >
+                  <X className="h-6 w-6" />
+                </button>
+                <Sidebar />
+              </div>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
--- a/reserva-mesa-dashboard/components/dashboard/NotificationMonitor.tsx
+++ b/reserva-mesa-dashboard/components/dashboard/NotificationMonitor.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { ref, onChildAdded, off, get } from "firebase/database";
+import { db } from "@/lib/firebase";
+import { useAuth } from "@/hooks/useAuth";
+import { useToast } from "@/components/ui/toast";
+
+export function NotificationMonitor() {
+  const { user } = useAuth();
+  const { toast } = useToast();
+  const isInitialLoad = useRef(true);
+  const seenReservas = useRef<Set<string>>(new Set());
+
+  useEffect(() => {
+    if (!user?.email) return;
+
+    const reservasRef = ref(db, "reservas");
+
+    // Primeiro, marcamos todas as reservas existentes como "vistas"
+    // para não disparar notificações para o passado
+    const loadExisting = async () => {
+      const snapshot = await get(reservasRef);
+      if (snapshot.exists()) {
+        const data = snapshot.val();
+        Object.keys(data).forEach(id => seenReservas.current.add(id));
+      }
+      isInitialLoad.current = false;
+    };
+
+    loadExisting();
+
+    const unsubscribe = onChildAdded(reservasRef, (snapshot) => {
+      const id = snapshot.key;
+      if (!id || seenReservas.current.has(id)) return;
+      
+      // Adiciona ao set para não repetir se o listener reiniciar
+      seenReservas.current.add(id);
+
+      // Se ainda estivermos no load inicial (do get), ignoramos o toast
+      if (isInitialLoad.current) return;
+
+      const data = snapshot.val();
+      if (data.restauranteEmail === user.email && data.estado === "Pendente") {
+        toast(`Nova reserva recebida de ${data.clienteEmail}!`, "info");
+      }
+    });
+
+    return () => {
+      off(reservasRef, "child_added", unsubscribe);
+    };
+  }, [user?.email, toast]);
+
+  return null; // Componente apenas lógico
+}
--- a/reserva-mesa-dashboard/components/dashboard/OccupancyPieChart.tsx
+++ b/reserva-mesa-dashboard/components/dashboard/OccupancyPieChart.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import React from "react";
+import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from "recharts";
+
+interface OccupancyPieChartProps {
+  data: { name: string; value: number; color: string }[];
+}
+
+export function OccupancyPieChart({ data }: OccupancyPieChartProps) {
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return <div className="h-[300px] w-full flex items-center justify-center bg-muted/10 animate-pulse rounded-lg" />;
+
+  return (
+    <ResponsiveContainer width="100%" height={300}>
+      <PieChart>
+        <Pie
+          data={data}
+          cx="50%"
+          cy="50%"
+          innerRadius={60}
+          outerRadius={80}
+          paddingAngle={5}
+          dataKey="value"
+        >
+          {data.map((entry, index) => (
+            <Cell key={`cell-${index}`} fill={entry.color} />
+          ))}
+        </Pie>
+        <Tooltip 
+          contentStyle={{ backgroundColor: "#1A1814", border: "1px solid #2A261E", borderRadius: "8px" }}
+          itemStyle={{ color: "#fff" }}
+        />
+        <Legend 
+          verticalAlign="bottom" 
+          align="center"
+          iconType="circle"
+          formatter={(value) => <span className="text-xs text-muted-foreground">{value}</span>}
+        />
+      </PieChart>
+    </ResponsiveContainer>
+  );
+}
--- a/reserva-mesa-dashboard/components/dashboard/OverviewChart.tsx
+++ b/reserva-mesa-dashboard/components/dashboard/OverviewChart.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import React from "react";
+import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, Tooltip, CartesianGrid } from "recharts";
+
+interface OverviewChartProps {
+  data: { name: string; total: number }[];
+}
+
+export function OverviewChart({ data }: OverviewChartProps) {
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return <div className="h-[350px] w-full bg-muted/10 animate-pulse rounded-lg" />;
+
+  return (
+    <ResponsiveContainer width="100%" height={350}>
+      <BarChart data={data}>
+        <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="rgba(255,255,255,0.05)" />
+        <XAxis
+          dataKey="name"
+          stroke="#888888"
+          fontSize={12}
+          tickLine={false}
+          axisLine={false}
+        />
+        <YAxis
+          stroke="#888888"
+          fontSize={12}
+          tickLine={false}
+          axisLine={false}
+          tickFormatter={(value) => `${value}`}
+        />
+        <Tooltip 
+          contentStyle={{ backgroundColor: "#1A1814", border: "1px solid #2A261E", borderRadius: "8px" }}
+          itemStyle={{ color: "#D4891A" }}
+          cursor={{ fill: "rgba(212, 137, 26, 0.05)" }}
+        />
+        <Bar
+          dataKey="total"
+          fill="currentColor"
+          radius={[4, 4, 0, 0]}
+          className="fill-primary"
+        />
+      </BarChart>
+    </ResponsiveContainer>
+  );
+}
--- a/reserva-mesa-dashboard/components/dashboard/Sidebar.tsx
+++ b/reserva-mesa-dashboard/components/dashboard/Sidebar.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+import { 
+  LayoutDashboard, 
+  CalendarDays, 
+  Table as TableIcon, 
+  History, 
+  Settings,
+  LogOut,
+  ListOrdered,
+  Users
+} from "lucide-react";
+import { useAuth } from "@/hooks/useAuth";
+
+const navigation = [
+  { name: "Dashboard", href: "/", icon: LayoutDashboard },
+  { name: "Reservas", href: "/reservas", icon: CalendarDays },
+  { name: "Lista de Espera", href: "/lista-espera", icon: ListOrdered },
+  { name: "Mesas", href: "/mesas", icon: TableIcon },
+  { name: "Equipa", href: "/equipa", icon: Users },
+  { name: "Histórico", href: "/historico", icon: History },
+  { name: "Configurações", href: "/configuracoes", icon: Settings },
+];
+
+export function Sidebar() {
+  const pathname = usePathname();
+  const { logout } = useAuth();
+
+  return (
+    <div className="flex h-full flex-col bg-card border-r border-border">
+      <div className="flex h-20 items-center px-6">
+        <Link href="/" className="flex items-center gap-2">
+          <div className="h-8 w-8 rounded-lg bg-primary flex items-center justify-center">
+            <span className="text-primary-foreground font-bold text-xl">R</span>
+          </div>
+          <span className="text-xl font-display font-bold text-primary">ReservaMesa</span>
+        </Link>
+      </div>
+
+      <nav className="flex-1 space-y-1 px-3 py-4">
+        {navigation.map((item) => {
+          const isActive = pathname === item.href;
+          return (
+            <Link
+              key={item.name}
+              href={item.href}
+              className={cn(
+                "group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200",
+                isActive 
+                  ? "bg-primary/10 text-primary" 
+                  : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+              )}
+            >
+              <item.icon className={cn(
+                "h-5 w-5",
+                isActive ? "text-primary" : "text-muted-foreground group-hover:text-accent-foreground"
+              )} />
+              {item.name}
+            </Link>
+          );
+        })}
+      </nav>
+
+      <div className="p-4 border-t border-border">
+        <button
+          onClick={() => logout()}
+          className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-muted-foreground hover:bg-destructive/10 hover:text-destructive transition-all duration-200"
+        >
+          <LogOut className="h-5 w-5" />
+          Terminar Sessão
+        </button>
+      </div>
+    </div>
+  );
+}
--- a/reserva-mesa-dashboard/components/dashboard/UserNav.tsx
+++ b/reserva-mesa-dashboard/components/dashboard/UserNav.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { useAuth } from "@/hooks/useAuth";
+import { User } from "lucide-react";
+
+export function UserNav() {
+  const { user } = useAuth();
+
+  return (
+    <div className="flex items-center gap-3">
+      <div className="hidden text-right md:block">
+        <p className="text-sm font-medium text-foreground">{user?.ownerName || "Administrador"}</p>
+        <p className="text-xs text-muted-foreground">{user?.email}</p>
+      </div>
+      <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center border border-primary/20">
+        <User className="h-5 w-5 text-primary" />
+      </div>
+    </div>
+  );
+}