chore: add project files and setup gitignore

reserva-mesa-dashboard/components/auth/AuthGuard.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import { useAuth } from "@/hooks/useAuth";
+
+export default function AuthGuard({ children }: { children: React.ReactNode }) {
+  const { user, loading } = useAuth();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    if (!loading) {
+      if (!user && !pathname.startsWith("/login") && !pathname.startsWith("/register")) {
+        router.push("/login");
+      }
+    }
+  }, [user, loading, router, pathname]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-background">
+        <div className="text-primary font-display text-2xl animate-pulse">A carregar...</div>
+      </div>
+    );
+  }
+
+  // Se não estiver logado e não estiver numa rota pública, não renderiza nada 
+  // (o useEffect vai redirecionar)
+  if (!user && !pathname.startsWith("/login") && !pathname.startsWith("/register")) {
+    return null;
+  }
+
+  return <>{children}</>;
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

reserva-mesa-dashboard/components/ui/button.tsx

@@ -0,0 +1,52 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

reserva-mesa-dashboard/components/ui/card.tsx

@@ -0,0 +1,75 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-display text-2xl font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

reserva-mesa-dashboard/components/ui/input.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

reserva-mesa-dashboard/components/ui/label.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

reserva-mesa-dashboard/components/ui/switch.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
+  ({ className, onCheckedChange, ...props }, ref) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (onCheckedChange) {
+        onCheckedChange(e.target.checked);
+      }
+    };
+
+    return (
+      <div className="relative inline-flex items-center cursor-pointer">
+        <input
+          type="checkbox"
+          className="sr-only peer"
+          ref={ref}
+          onChange={handleChange}
+          {...props}
+        />
+        <div
+          className={cn(
+            "w-11 h-6 bg-muted peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary",
+            className
+          )}
+        ></div>
+      </div>
+    );
+  }
+);
+Switch.displayName = "Switch";
+
+export { Switch };

reserva-mesa-dashboard/components/ui/toast.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import React, { useState, useEffect, createContext, useContext, useCallback } from "react";
+import { X, CheckCircle2, AlertCircle, Info } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+
+type ToastType = "success" | "error" | "info";
+
+interface Toast {
+  id: string;
+  message: string;
+  type: ToastType;
+}
+
+interface ToastContextType {
+  toast: (message: string, type?: ToastType) => void;
+}
+
+const ToastContext = createContext<ToastContextType>({
+  toast: () => {},
+});
+
+export const useToast = () => useContext(ToastContext);
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const toast = React.useCallback((message: string, type: ToastType = "info") => {
+    const id = Math.random().toString(36).substring(2, 9);
+    setToasts((prev) => [...prev, { id, message, type }]);
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, 5000);
+  }, []);
+
+  const removeToast = (id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  };
+
+  return (
+    <ToastContext.Provider value={{ toast }}>
+      {children}
+      <div className="fixed bottom-6 right-6 z-50 flex flex-col gap-3 pointer-events-none">
+        <AnimatePresence>
+          {toasts.map((t) => (
+            <motion.div
+              key={t.id}
+              initial={{ opacity: 0, y: 20, scale: 0.95 }}
+              animate={{ opacity: 1, y: 0, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.95, transition: { duration: 0.2 } }}
+              className={`pointer-events-auto flex items-center gap-3 px-4 py-3 rounded-xl border shadow-lg backdrop-blur-md min-w-[300px] ${
+                t.type === "success" ? "bg-green-500/10 border-green-500/20 text-green-500" :
+                t.type === "error" ? "bg-destructive/10 border-destructive/20 text-destructive" :
+                "bg-primary/10 border-primary/20 text-primary"
+              }`}
+            >
+              {t.type === "success" && <CheckCircle2 className="h-5 w-5 shrink-0" />}
+              {t.type === "error" && <AlertCircle className="h-5 w-5 shrink-0" />}
+              {t.type === "info" && <Info className="h-5 w-5 shrink-0" />}
+              
+              <p className="text-sm font-medium flex-1">{t.message}</p>
+              
+              <button 
+                onClick={() => removeToast(t.id)}
+                className="p-1 rounded-md hover:bg-black/5 transition-colors"
+              >
+                <X className="h-4 w-4 opacity-50" />
+              </button>
+            </motion.div>
+          ))}
+        </AnimatePresence>
+      </div>
+    </ToastContext.Provider>
+  );
+}