Upload 51 files

.dockerignore

@@ -0,0 +1,10 @@
+node_modules
+dist
+.git
+.gitignore
+README.md
+build.log
+eslint.config.js
+package-lock.json (ignore local ones to let HF generate their own or use the one copied)
+# Keep package-lock.json if you want identical versions, but usually it's better to let HF install fresh if they have a different arch.
+# Actually, keep package-lock.json for stability.

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+frontend/public/images/tacos.jpg filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,32 @@
+FROM node:22-alpine AS build
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package files first for better caching
+COPY frontend/package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application
+COPY frontend/ .
+
+# Build the application
+RUN npm run build
+
+# Second stage: Serve the application with a lightweight HTTP server
+FROM node:22-alpine
+WORKDIR /app
+
+# Install 'serve' tool to host static files
+RUN npm install -g serve
+
+# Copy only the built files from the build stage
+COPY --from=build /app/dist ./dist
+
+# Hugging Face Spaces expect port 7860
+EXPOSE 7860
+
+# Command to serve the static site on port 7860
+CMD ["serve", "-s", "dist", "-l", "7860"]

README.md

@@ -1,10 +1,23 @@
 ---
-title: Restaurante
-emoji: 🌍
-colorFrom: yellow
-colorTo: pink
+title: Resto OS Premium
+emoji: 🍴
+colorFrom: red
+colorTo: yellow
 sdk: docker
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Resto OS Premium
+
+Sistema de gestión de restaurantes premium con carta digital QR y panel pos.
+
+## Despliegue en Hugging Face
+Este repositorio está configurado para un **Docker Space**. 
+Hugging Face detectará automáticamente el `Dockerfile` y realizará la construcción de la aplicación React de forma automática.
+
+## Características
+- Gestión de Menú con Imágenes (Firebase Storage)
+- Control de Inventario
+- Punto de Venta (POS) para Meseros
+- Vista de Cocina en tiempo real
+- Carta Digital QR con Temas Dinámicos

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md

@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

frontend/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "chart.js": "^4.5.1",
+    "firebase": "^12.11.0",
+    "lucide-react": "^0.577.0",
+    "react": "^19.2.4",
+    "react-chartjs-2": "^5.3.1",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.13.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "vite": "^6.0.0"
+  }
+}

frontend/src/App.css

@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}

frontend/src/App.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { AuthProvider, useAuth } from './context/AuthContext';
+import ProtectedRoute from './components/ProtectedRoute';
+
+// Páginas
+import Login from './pages/Login';
+import AdminDashboard from './pages/AdminDashboard';
+import WaiterPOS from './pages/WaiterPOS';
+import CustomerMenu from './pages/CustomerMenu';
+import KitchenView from './pages/KitchenView';
+
+// Router base para redirigir dependiendo del rol al loguearse
+function RootRedirect() {
+  const { currentUser, userRole, loading } = useAuth();
+  if (loading) return <div className="app-container" style={{justifyContent:'center', alignItems:'center'}}>Cargando...</div>;
+  if (!currentUser) return <Navigate to="/login" replace />;
+  if (userRole === 'admin') return <Navigate to="/admin" replace />;
+  if (userRole === 'mesero') return <Navigate to="/pos" replace />;
+  return <Navigate to="/login" replace />; // Default
+}
+
+function App() {
+  return (
+    <Router>
+      <AuthProvider>
+        <Routes>
+          <Route path="/" element={<RootRedirect />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/menu" element={<CustomerMenu />} />
+
+          {/* Rutas Privadas */}
+          <Route 
+            path="/admin/*" 
+            element={
+              <ProtectedRoute allowedRoles={['admin']}>
+                <AdminDashboard />
+              </ProtectedRoute>
+            } 
+          />
+          <Route 
+            path="/pos/*" 
+            element={
+              <ProtectedRoute allowedRoles={['admin', 'mesero']}>
+                <WaiterPOS />
+              </ProtectedRoute>
+            } 
+          />
+          <Route 
+            path="/kitchen" 
+            element={
+              <ProtectedRoute allowedRoles={['admin', 'mesero']}>
+                <KitchenView />
+              </ProtectedRoute>
+            } 
+          />
+
+          {/* Fallback */}
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+      </AuthProvider>
+    </Router>
+  );
+}
+
+export default App;

frontend/src/components/ProtectedRoute.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+export default function ProtectedRoute({ children, allowedRoles }) {
+  const { currentUser, userRole, loading } = useAuth();
+
+  if (loading) return <div className="app-container" style={{justifyContent:'center', alignItems:'center'}}>Cargando...</div>;
+
+  if (!currentUser) {
+    return <Navigate to="/login" replace />;
+  }
+
+  if (allowedRoles && !allowedRoles.includes(userRole)) {
+    return <Navigate to="/unauthorized" replace />;
+  }
+
+  return children;
+}

frontend/src/components/admin/CRMManager.jsx

@@ -0,0 +1,129 @@
+import React, { useState, useEffect } from 'react';
+import { db } from '../../firebase/config';
+import { ref, onValue } from 'firebase/database';
+import { Users, Truck, Heart, Star, Phone, MapPin, History, Search } from 'lucide-react';
+
+export default function CRMManager() {
+  const [customers, setCustomers] = useState([]);
+  const [deliveryOrders, setDeliveryOrders] = useState([]);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  useEffect(() => {
+    // Analytics for CRM (from Orders)
+    onValue(ref(db, 'orders'), (snapshot) => {
+      const data = snapshot.val();
+      if (data) {
+        const orders = Object.values(data);
+        const customerMap = {};
+        const deliveries = [];
+
+        orders.forEach(order => {
+          if (order.customerEmail) {
+            const email = order.customerEmail;
+            if (!customerMap[email]) {
+              customerMap[email] = { 
+                email, 
+                name: order.customerName || 'Cliente', 
+                totalSpent: 0, 
+                orderCount: 0,
+                lastOrder: 0
+              };
+            }
+            customerMap[email].totalSpent += order.total;
+            customerMap[email].orderCount += 1;
+            if (order.timestamp > customerMap[email].lastOrder) {
+                customerMap[email].lastOrder = order.timestamp;
+            }
+          }
+
+          if (order.type === 'delivery') {
+            deliveries.push(order);
+          }
+        });
+
+        setCustomers(Object.values(customerMap).sort((a,b) => b.totalSpent - a.totalSpent));
+        setDeliveryOrders(deliveries.sort((a,b) => b.timestamp - a.timestamp));
+      }
+    });
+  }, []);
+
+  const filteredCustomers = customers.filter(c => 
+    c.email.toLowerCase().includes(searchTerm.toLowerCase()) || 
+    c.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  return (
+    <div className="animate-fade-in" style={{ padding: '0 1rem' }}>
+      <header style={{ marginBottom: '2.5rem' }}>
+        <h2 className="text-gradient" style={{ fontSize: '2rem', fontWeight: '800', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+          <Users size={28} /> CRM & Fidelización
+        </h2>
+        <p style={{ color: 'var(--text-muted)' }}>Gestión de clientes frecuentes y seguimiento de delivery</p>
+      </header>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: '2rem' }}>
+        
+        {/* Customer List */}
+        <section className="glass-card">
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
+                <h3 style={sectionTitleStyle}><Heart size={18} /> Clientes Frecuentes</h3>
+                <div style={{ position: 'relative', width: '200px' }}>
+                    <Search size={14} style={{ position: 'absolute', left: '10px', top: '12px', color: 'var(--text-muted)' }} />
+                    <input 
+                        type="text" placeholder="Buscar..." 
+                        value={searchTerm} onChange={e => setSearchTerm(e.target.value)}
+                        style={{ ...inputStyle, paddingLeft: '30px', padding: '0.4rem 0.5rem 0.4rem 2rem', fontSize: '0.8rem' }} 
+                    />
+                </div>
+            </div>
+            
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', maxHeight: '500px', overflowY: 'auto' }}>
+                {filteredCustomers.map((c, i) => (
+                    <div key={c.email} className="glass-panel" style={{ padding: '1rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+                            <div style={{ width: '40px', height: '40px', background: 'rgba(0,0,0,0.03)', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: '800', color: i < 3 ? 'var(--warning)' : 'var(--text-muted)' }}>
+                                {i < 3 ? <Star size={18} fill="var(--warning)" /> : i + 1}
+                            </div>
+                            <div>
+                                <div style={{ fontWeight: '700' }}>{c.name}</div>
+                                <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{c.email}</div>
+                            </div>
+                        </div>
+                        <div style={{ textAlign: 'right' }}>
+                            <div style={{ color: 'var(--success)', fontWeight: '800' }}>${c.totalSpent.toFixed(2)}</div>
+                            <div style={{ fontSize: '0.65rem', color: 'var(--text-muted)' }}>{c.orderCount} visitas | {Math.floor(c.totalSpent / 10)} pts</div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </section>
+
+        {/* Delivery Activity */}
+        <section className="glass-card">
+            <h3 style={sectionTitleStyle}><Truck size={18} /> Monitor de Delivery</h3>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                {deliveryOrders.slice(0, 10).map(order => (
+                    <div key={order.id} style={{ padding: '1rem', borderLeft: '3px solid var(--primary)', background: 'rgba(0,0,0,0.02)', borderRadius: '0 8px 8px 0' }}>
+                        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
+                            <span style={{ fontWeight: '700', fontSize: '0.9rem' }}>#{order.id.slice(-5)} - {order.customerName}</span>
+                            <span style={{ fontSize: '0.75rem', padding: '2px 8px', borderRadius: '4px', background: 'rgba(255,90,95,0.1)', color: 'var(--primary)' }}>{order.status.toUpperCase()}</span>
+                        </div>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '0.75rem', color: 'var(--text-muted)' }}>
+                            <MapPin size={12} /> {order.address || 'Local / Para llevar'}
+                        </div>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '0.75rem', color: 'var(--text-muted)', marginTop: '0.25rem' }}>
+                            <History size={12} /> {new Date(order.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                        </div>
+                    </div>
+                ))}
+                {deliveryOrders.length === 0 && <p style={{ textAlign: 'center', color: 'var(--text-muted)', paddingTop: '2rem' }}>No hay pedidos delivery recientes</p>}
+            </div>
+        </section>
+
+      </div>
+    </div>
+  );
+}
+
+const inputStyle = { width: '100%', padding: '0.8rem', borderRadius: '8px', background: 'rgba(0,0,0,0.03)', border: '1px solid var(--border-subtle)', color: 'var(--text-main)', outline: 'none' };
+const sectionTitleStyle = { fontSize: '1.2rem', fontWeight: '700', display: 'flex', alignItems: 'center', gap: '0.75rem' };

frontend/src/components/admin/DashboardOverview.jsx

@@ -0,0 +1,71 @@
+import React, { useState, useEffect } from 'react';
+import { db } from '../../firebase/config';
+import { ref, onValue } from 'firebase/database';
+import { TrendingUp, Users, ShoppingBag, AlertCircle } from 'lucide-react';
+
+export default function DashboardOverview() {
+  const [stats, setStats] = useState({ ventasHoy: 0, mesasActivas: 0, stockBajo: 0 });
+
+  useEffect(() => {
+    // Aquí iría la escucha de Firebase para stats en tiempo real
+    setStats({
+      ventasHoy: 12500,
+      mesasActivas: 4,
+      stockBajo: 2
+    });
+  }, []);
+
+  const cards = [
+    { title: 'Ventas de Hoy', value: `$${stats.ventasHoy.toLocaleString()}`, icon: <TrendingUp size={24} color="var(--success)" />, bg: 'rgba(32, 201, 151, 0.1)' },
+    { title: 'Mesas Activas', value: stats.mesasActivas, icon: <Users size={24} color="var(--info)" />, bg: 'rgba(50, 173, 230, 0.1)' },
+    { title: 'Ticket Promedio', value: '$275.50', icon: <ShoppingBag size={24} color="var(--primary)" />, bg: 'rgba(255, 90, 95, 0.1)' },
+    { title: 'Utilidad Est.', value: '$4,200', icon: <AlertCircle size={24} color="var(--warning)" />, bg: 'rgba(245, 166, 35, 0.1)' }
+  ];
+
+  return (
+    <div className="animate-fade-in">
+      <h2 className="text-gradient" style={{ fontSize: '2rem', marginBottom: '1.5rem' }}>Resumen General</h2>
+      
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '1.5rem', marginBottom: '3rem' }}>
+        {cards.map((card, i) => (
+          <div key={i} className="glass-card" style={{ display: 'flex', alignItems: 'center', gap: '1.5rem' }}>
+            <div style={{ width: '56px', height: '56px', borderRadius: '50%', background: card.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              {card.icon}
+            </div>
+            <div>
+              <p style={{ color: 'var(--text-muted)', fontSize: '0.9rem', marginBottom: '0.25rem' }}>{card.title}</p>
+              <h3 style={{ fontSize: '1.5rem', fontWeight: '700' }}>{card.value}</h3>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.5rem' }}>
+        <div className="glass-card">
+          <h3 className="text-gradient" style={{ marginBottom: '1rem' }}>Saturación por Horario (Peak Hours)</h3>
+          <div style={{ height: '10px', width: '100%', background: 'rgba(0,0,0,0.05)', borderRadius: '10px', overflow: 'hidden', display: 'flex' }}>
+            <div style={{ width: '20%', background: 'var(--primary)', opacity: 0.3 }}></div>
+            <div style={{ width: '40%', background: 'var(--primary)' }}></div>
+            <div style={{ width: '15%', background: 'var(--primary)', opacity: 0.5 }}></div>
+            <div style={{ width: '25%', background: 'rgba(0,0,0,0.05)' }}></div>
+          </div>
+          <p style={{ color: 'var(--text-muted)', fontSize: '0.8rem', marginTop: '1rem' }}>Punto máximo detectado: 14:00 - 15:30 (Almuerzo)</p>
+        </div>
+
+        <div className="glass-card">
+          <h3 className="text-gradient" style={{ marginBottom: '1rem' }}>Alertas de Suministros (ERP)</h3>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.9rem' }}>
+              <span>Tomate Cherry (Kg)</span>
+              <span style={{ color: 'var(--danger)', fontWeight: '700' }}>1.2 (Bajo)</span>
+            </div>
+            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.9rem' }}>
+              <span>Aceite de Oliva (L)</span>
+              <span style={{ color: 'var(--warning)', fontWeight: '700' }}>3.0 (Crítico)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/admin/FinanceManager.jsx

@@ -0,0 +1,192 @@
+import React, { useState, useEffect } from 'react';
+import { db } from '../../firebase/config';
+import { ref, onValue, push, set } from 'firebase/database';
+import { DollarSign, ArrowUpCircle, ArrowDownCircle, Save, Calendar, Clock, History } from 'lucide-react';
+
+export default function FinanceManager() {
+  const [cashSessions, setCashSessions] = useState([]);
+  const [expenses, setExpenses] = useState([]);
+  const [activeSession, setActiveSession] = useState(null);
+  const [openingBalance, setOpeningBalance] = useState('');
+  const [expenseData, setExpenseData] = useState({ concept: '', amount: '', category: 'Varios' });
+
+  useEffect(() => {
+    // Fetch sessions
+    onValue(ref(db, 'finance/sessions'), (snapshot) => {
+      const data = snapshot.val();
+      if (data) {
+        const list = Object.keys(data).map(id => ({ id, ...data[id] })).sort((a,b) => b.openedAt - a.openedAt);
+        setCashSessions(list);
+        const active = list.find(s => s.status === 'open');
+        setActiveSession(active || null);
+      }
+    });
+
+    // Fetch expenses
+    onValue(ref(db, 'finance/expenses'), (snapshot) => {
+      const data = snapshot.val();
+      setExpenses(data ? Object.keys(data).map(id => ({ id, ...data[id] })).sort((a,b) => b.timestamp - a.timestamp) : []);
+    });
+  }, []);
+
+  const openCash = async () => {
+    if (!openingBalance) return;
+    const newSessionRef = push(ref(db, 'finance/sessions'));
+    await set(newSessionRef, {
+      openedAt: Date.now(),
+      openingBalance: parseFloat(openingBalance),
+      status: 'open',
+      totalSales: 0,
+      totalExpenses: 0
+    });
+    setOpeningBalance('');
+  };
+
+  const closeCash = async () => {
+    if (!activeSession) return;
+    if (window.confirm('¿Deseas cerrar el turno de caja actual?')) {
+        await set(ref(db, `finance/sessions/${activeSession.id}/status`), 'closed');
+        await set(ref(db, `finance/sessions/${activeSession.id}/closedAt`), Date.now());
+    }
+  };
+
+  const addExpense = async (e) => {
+    e.preventDefault();
+    if (!expenseData.concept || !expenseData.amount) return;
+    const expenseRef = push(ref(db, 'finance/expenses'));
+    await set(expenseRef, {
+      ...expenseData,
+      amount: parseFloat(expenseData.amount),
+      timestamp: Date.now(),
+      sessionId: activeSession?.id || 'none'
+    });
+    setExpenseData({ concept: '', amount: '', category: 'Varios' });
+  };
+
+  return (
+    <div className="animate-fade-in" style={{ padding: '0 1rem' }}>
+      <header style={{ marginBottom: '2.5rem' }}>
+        <h2 className="text-gradient" style={{ fontSize: '2rem', fontWeight: '800', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+          <DollarSign size={28} /> Control Financiero
+        </h2>
+        <p style={{ color: 'var(--text-muted)' }}>Arqueo de caja, egresos y flujo de efectivo semanal</p>
+      </header>
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))', gap: '2rem' }}>
+        
+        {/* Cash Arqueo Module */}
+        <div className="glass-card" style={{ border: activeSession ? '1px solid var(--success)' : '1px solid var(--border-subtle)' }}>
+            <h3 style={{ marginBottom: '1.5rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                <Clock size={20} /> Turno de Caja (Arqueo)
+            </h3>
+            
+            {!activeSession ? (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                    <p style={{ fontSize: '0.9rem', color: 'var(--text-muted)' }}>Caja cerrada actualmente. Ingresa el fondo de apertura para iniciar.</p>
+                    <input 
+                        type="number" 
+                        placeholder="Monto de Apertura ($)" 
+                        value={openingBalance}
+                        onChange={(e) => setOpeningBalance(e.target.value)}
+                        style={inputStyle} 
+                    />
+                    <button onClick={openCash} className="btn-primary" style={{ padding: '0.8rem' }}>
+                        Abrir Turno
+                    </button>
+                </div>
+            ) : (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
+                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+                        <div style={statBoxStyle}>
+                            <span style={{ fontSize: '0.75rem', opacity: 0.6 }}>Apertura</span>
+                            <div style={{ fontSize: '1.2rem', fontWeight: '800' }}>${activeSession.openingBalance.toFixed(2)}</div>
+                        </div>
+                        <div style={statBoxStyle}>
+                            <span style={{ fontSize: '0.75rem', opacity: 0.6 }}>Hora</span>
+                            <div style={{ fontSize: '1rem', fontWeight: '600' }}>{new Date(activeSession.openedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>
+                        </div>
+                    </div>
+                    <div style={{ ...statBoxStyle, background: 'rgba(76,217,100,0.05)', borderColor: 'var(--success)' }}>
+                        <span style={{ fontSize: '0.75rem', color: 'var(--success)' }}>Ventas Registradas</span>
+                        <div style={{ fontSize: '1.5rem', fontWeight: '900', color: 'var(--success)' }}>$0.00</div>
+                        <p style={{ fontSize: '0.7rem', opacity: 0.6, marginTop: '0.2rem', color: 'var(--text-muted)' }}>Sincronizado con POS en tiempo real</p>
+                    </div>
+                    <button onClick={closeCash} className="btn-glass" style={{ color: 'var(--primary)', borderColor: 'var(--primary)', padding: '0.8rem' }}>
+                        Cerrar Turno / Corte
+                    </button>
+                </div>
+            )}
+        </div>
+
+        {/* Expenses Module */}
+        <div className="glass-card">
+            <h3 style={{ marginBottom: '1.5rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                <ArrowDownCircle size={20} /> Registro de Egresos
+            </h3>
+            <form onSubmit={addExpense} style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                <input type="text" placeholder="Concepto (ej. Pago luz, Propina extra)" value={expenseData.concept} onChange={e => setExpenseData({...expenseData, concept: e.target.value})} style={inputStyle} />
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+                    <input type="number" placeholder="Monto ($)" value={expenseData.amount} onChange={e => setExpenseData({...expenseData, amount: e.target.value})} style={inputStyle} />
+                    <select value={expenseData.category} onChange={e => setExpenseData({...expenseData, category: e.target.value})} style={inputStyle}>
+                        <option value="Varios">Varios</option>
+                        <option value="Compras">Compras</option>
+                        <option value="Servicios">Servicios</option>
+                        <option value="Sueldos">Sueldos</option>
+                    </select>
+                </div>
+                <button type="submit" className="btn-glass" style={{ padding: '0.8rem' }}>
+                    <Plus size={18} /> Registrar Egreso
+                </button>
+            </form>
+
+            <div style={{ marginTop: '2rem', maxHeight: '200px', overflowY: 'auto' }}>
+                <h4 style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginBottom: '1rem', borderBottom: '1px solid var(--border-subtle)', paddingBottom: '0.5rem' }}>Últimos Gastos</h4>
+                {expenses.map(exp => (
+                    <div key={exp.id} style={{ display: 'flex', justifyContent: 'space-between', padding: '0.5rem 0', fontSize: '0.9rem' }}>
+                        <span>{exp.concept}</span>
+                        <span style={{ color: 'var(--primary)', fontWeight: '700' }}>-${exp.amount.toFixed(2)}</span>
+                    </div>
+                ))}
+                {expenses.length === 0 && <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)', textAlign: 'center' }}>No hay gastos registrados</p>}
+            </div>
+        </div>
+      </div>
+
+      <div className="glass-panel" style={{ marginTop: '3rem', padding: '1.5rem' }}>
+        <h3 style={{ fontSize: '1.1rem', marginBottom: '1.5rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            <History size={18} /> Historial de Turnos Recientes
+        </h3>
+        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.9rem' }}>
+            <thead>
+                <tr style={{ textAlign: 'left', borderBottom: '1px solid var(--border-subtle)', opacity: 0.6 }}>
+                    <th style={{ padding: '1rem' }}>Fecha</th>
+                    <th style={{ padding: '1rem' }}>Apertura</th>
+                    <th style={{ padding: '1rem' }}>Cierre</th>
+                    <th style={{ padding: '1rem' }}>Ventas</th>
+                    <th style={{ padding: '1rem' }}>Estado</th>
+                </tr>
+            </thead>
+            <tbody>
+                {cashSessions.map(sess => (
+                    <tr key={sess.id} style={{ borderBottom: '1px solid var(--border-subtle)' }}>
+                        <td style={{ padding: '1rem' }}>{new Date(sess.openedAt).toLocaleDateString()}</td>
+                        <td style={{ padding: '1rem' }}>${sess.openingBalance.toFixed(2)}</td>
+                        <td style={{ padding: '1rem' }}>{sess.closedAt ? new Date(sess.closedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '-'}</td>
+                        <td style={{ padding: '1rem' }}>${(sess.totalSales || 0).toFixed(2)}</td>
+                        <td style={{ padding: '1rem' }}>
+                            <span style={{ padding: '2px 8px', borderRadius: '4px', background: sess.status === 'open' ? 'rgba(76,217,100,0.1)' : 'rgba(0,0,0,0.05)', color: sess.status === 'open' ? 'var(--success)' : 'var(--text-muted)', fontSize: '0.75rem' }}>
+                                {sess.status.toUpperCase()}
+                            </span>
+                        </td>
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+const inputStyle = { width: '100%', padding: '0.8rem', borderRadius: '8px', background: 'rgba(0,0,0,0.03)', border: '1px solid var(--border-subtle)', color: 'var(--text-main)', outline: 'none' };
+const statBoxStyle = { padding: '1rem', borderRadius: '12px', background: 'rgba(0,0,0,0.02)', border: '1px solid var(--border-subtle)', display: 'flex', flexDirection: 'column', gap: '0.25rem' };
+const Plus = ({ size }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>;

frontend/src/components/admin/InventoryControl.jsx

@@ -0,0 +1,192 @@
+import React, { useState, useEffect } from 'react';
+import { db } from '../../firebase/config';
+import { ref, onValue, push, set, remove, update } from 'firebase/database';
+import { Plus, Trash2, Edit3, AlertTriangle, X, Save } from 'lucide-react';
+
+export default function InventoryControl() {
+  const [items, setItems] = useState([]);
+  const [formData, setFormData] = useState({ name: '', quantity: '', unit: '', minStock: '' });
+  const [editingItem, setEditingItem] = useState(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  useEffect(() => {
+    const inventoryRef = ref(db, 'inventory');
+    onValue(inventoryRef, (snapshot) => {
+      const data = snapshot.val();
+      if (data) {
+        const productList = Object.keys(data).map(key => ({ id: key, ...data[key] }));
+        setItems(productList);
+      } else {
+        setItems([]);
+      }
+    });
+  }, []);
+
+  const handleAddItem = async (e) => {
+    e.preventDefault();
+    if (!formData.name || !formData.quantity) return;
+    
+    const inventoryRef = ref(db, 'inventory');
+    const newItemRef = push(inventoryRef);
+    await set(newItemRef, {
+      name: formData.name,
+      quantity: Number(formData.quantity),
+      unit: formData.unit || 'Und',
+      minStock: Number(formData.minStock) || 10
+    });
+    setFormData({ name: '', quantity: '', unit: '', minStock: '' });
+  };
+
+  const handleDelete = async (id) => {
+    if(window.confirm('¿Seguro que deseas eliminar este insumo?')){
+      await remove(ref(db, `inventory/${id}`));
+    }
+  };
+
+  const openEdit = (item) => {
+    setEditingItem({ ...item });
+    setIsModalOpen(true);
+  };
+
+  const handleSaveEdit = async () => {
+    if (!editingItem.name) return;
+    const { id, ...updates } = editingItem;
+    await update(ref(db, `inventory/${id}`), {
+      ...updates,
+      quantity: Number(updates.quantity),
+      minStock: Number(updates.minStock)
+    });
+    setEditingItem(null);
+    setIsModalOpen(false);
+  };
+
+  const handleAddStock = async (id, currentQty) => {
+    await set(ref(db, `inventory/${id}/quantity`), currentQty + 10);
+  }
+
+  return (
+    <div className="animate-fade-in" style={{ padding: '0 1rem' }}>
+      <h2 className="text-gradient" style={{ fontSize: '2rem', marginBottom: '1.5rem', fontWeight: '800' }}>Control de Stock</h2>
+
+      <div className="glass-card" style={{ marginBottom: '2rem', padding: '1.5rem' }}>
+        <h3 style={{ marginBottom: '1.25rem', fontSize: '1.1rem' }}>Registrar Nuevo Insumo</h3>
+        <form onSubmit={handleAddItem} style={{ display: 'flex', gap: '1rem', alignItems: 'flex-end', flexWrap: 'wrap' }}>
+          <div style={{ flex: 2, minWidth: '150px' }}>
+            <label style={labelStyle}>Nombre del Insumo</label>
+            <input type="text" value={formData.name} onChange={e => setFormData({...formData, name: e.target.value})} required style={inputStyle} placeholder="Tomate rojo" />
+          </div>
+          <div style={{ flex: 1, minWidth: '80px' }}>
+            <label style={labelStyle}>Cantidad</label>
+            <input type="number" value={formData.quantity} onChange={e => setFormData({...formData, quantity: e.target.value})} required style={inputStyle} placeholder="50" />
+          </div>
+          <div style={{ flex: 1, minWidth: '80px' }}>
+            <label style={labelStyle}>Unidad</label>
+            <input type="text" value={formData.unit} onChange={e => setFormData({...formData, unit: e.target.value})} style={inputStyle} placeholder="Kg, Lt, Und" />
+          </div>
+          <button type="submit" className="btn-primary" style={{ padding: '0.8rem 1.5rem' }}>
+            <Plus size={20} />
+          </button>
+        </form>
+      </div>
+
+      <div className="glass-panel" style={{ overflow: 'hidden' }}>
+        <table style={{ width: '100%', borderCollapse: 'collapse', textAlign: 'left' }}>
+          <thead>
+            <tr style={{ borderBottom: '1px solid var(--border-subtle)', background: 'rgba(255,255,255,0.02)' }}>
+              <th style={{ padding: '1.25rem', color: 'var(--text-muted)', fontWeight: '500' }}>Insumo</th>
+              <th style={{ padding: '1.25rem', color: 'var(--text-muted)', fontWeight: '500' }}>Stock Actual</th>
+              <th style={{ padding: '1.25rem', color: 'var(--text-muted)', fontWeight: '500' }}>Estado</th>
+              <th style={{ padding: '1.25rem', color: 'var(--text-muted)', fontWeight: '500', textAlign: 'right' }}>Acciones</th>
+            </tr>
+          </thead>
+          <tbody>
+            {items.length === 0 ? (
+              <tr><td colSpan="4" style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-muted)' }}>Sin insumos registrados</td></tr>
+            ) : (
+              items.map((item) => {
+                const isLow = item.quantity <= (item.minStock || 10);
+                return (
+                  <tr key={item.id} style={{ borderBottom: '1px solid var(--border-subtle)', transition: 'background 0.2s' }} className="table-row-hover">
+                    <td style={{ padding: '1.25rem', fontWeight: '600' }}>{item.name}</td>
+                    <td style={{ padding: '1.25rem', fontWeight: '700', color: isLow ? 'var(--primary)' : 'var(--text-main)', fontSize: '1.1rem' }}>
+                      {item.quantity} <span style={{ fontSize: '0.8rem', fontWeight: '400', color: 'var(--text-muted)' }}>{item.unit}</span>
+                    </td>
+                    <td style={{ padding: '1.25rem' }}>
+                      {isLow ? (
+                        <span style={{ display: 'inline-flex', alignItems: 'center', gap: '0.4rem', color: 'var(--primary)', fontSize: '0.8rem', background: 'rgba(255,107,107,0.1)', padding: '0.25rem 0.75rem', borderRadius: '12px', fontWeight: '600' }}>
+                          <AlertTriangle size={14} /> RELLENAR
+                        </span>
+                      ) : (
+                        <span style={{ color: 'var(--success)', fontSize: '0.8rem', fontWeight: '600', background: 'rgba(76,217,100,0.1)', padding: '0.25rem 0.75rem', borderRadius: '12px' }}>ÓPTIMO</span>
+                      )}
+                    </td>
+                    <td style={{ padding: '1.25rem', textAlign: 'right' }}>
+                      <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end' }}>
+                        <button onClick={() => handleAddStock(item.id, item.quantity)} title="Sumar 10" style={actionBtnStyle}>+10</button>
+                        <button onClick={() => openEdit(item)} title="Editar" style={actionBtnStyle}><Edit3 size={16} /></button>
+                        <button onClick={() => handleDelete(item.id)} title="Eliminar" style={{...actionBtnStyle, color: 'var(--primary)'}}><Trash2 size={16} /></button>
+                      </div>
+                    </td>
+                  </tr>
+                )
+              })
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Modal de Edición */}
+      {isModalOpen && (
+        <div style={{ position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh', background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(8px)', display: 'flex', justifyContent: 'center', alignItems: 'center', zIndex: 9999, padding: '20px' }}>
+          <div className="glass-panel animate-slide-up" style={{ maxWidth: '450px', width: '100%', padding: '2.5rem' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
+              <h2 className="text-gradient" style={{ fontSize: '1.5rem' }}>Editar Insumo</h2>
+              <button onClick={() => setIsModalOpen(false)} style={{ background: 'none', border: 'none', color: 'var(--text-muted)', cursor: 'pointer' }}><X size={24} /></button>
+            </div>
+
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+              <div>
+                <label style={labelStyle}>Nombre del Insumo</label>
+                <input type="text" value={editingItem.name} onChange={e => setEditingItem({...editingItem, name: e.target.value})} style={inputStyle} />
+              </div>
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+                <div>
+                  <label style={labelStyle}>Stock</label>
+                  <input type="number" value={editingItem.quantity} onChange={e => setEditingItem({...editingItem, quantity: e.target.value})} style={inputStyle} />
+                </div>
+                <div>
+                  <label style={labelStyle}>Min. Stock</label>
+                  <input type="number" value={editingItem.minStock || 10} onChange={e => setEditingItem({...editingItem, minStock: e.target.value})} style={inputStyle} />
+                </div>
+              </div>
+              <div>
+                <label style={labelStyle}>Unidad</label>
+                <input type="text" value={editingItem.unit} onChange={e => setEditingItem({...editingItem, unit: e.target.value})} style={inputStyle} />
+              </div>
+              
+              <button onClick={handleSaveEdit} className="btn-primary" style={{ height: '50px', marginTop: '1rem', display: 'flex', gap: '0.75rem', alignItems: 'center', justifyContent: 'center' }}>
+                <Save size={18} /> Guardar Cambios
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+const inputStyle = {
+  width: '100%', padding: '0.8rem', borderRadius: '8px', 
+  background: 'rgba(0,0,0,0.03)', border: '1px solid var(--border-subtle)', 
+  color: 'var(--text-main)', outline: 'none'
+};
+
+const labelStyle = { 
+  display: 'block', marginBottom: '0.5rem', fontSize: '0.85rem', color: 'var(--text-muted)' 
+};
+
+const actionBtnStyle = {
+  width: '32px', height: '32px', borderRadius: '8px', border: '1px solid var(--border-subtle)',
+  background: 'rgba(0,0,0,0.02)', color: 'var(--text-main)', cursor: 'pointer',
+  display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 0.2s', fontSize: '0.75rem', fontWeight: '700'
+};

frontend/src/components/admin/MenuEditor.jsx

@@ -0,0 +1,231 @@
+import React, { useState, useEffect } from 'react';
+import { db, storage } from '../../firebase/config';
+import { ref, onValue, push, set, remove, update } from 'firebase/database';
+import { ref as sRef, uploadBytes, getDownloadURL } from 'firebase/storage';
+import { Plus, Trash2, Edit3, X, Image as ImageIcon, Save, Palette, Upload, Loader2, ListTree, ChefHat } from 'lucide-react';
+
+export default function MenuEditor() {
+  const [products, setProducts] = useState([]);
+  const [inventory, setInventory] = useState([]);
+  const [formData, setFormData] = useState({ 
+    name: '', price: '', category: 'Principales', image: '', 
+    variants: [], ingredients: [] 
+  });
+  const [editingItem, setEditingItem] = useState(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [menuTheme, setMenuTheme] = useState('dark');
+  const [uploading, setUploading] = useState(false);
+
+  useEffect(() => {
+    onValue(ref(db, 'menu'), (snapshot) => {
+      const data = snapshot.val();
+      setProducts(data ? Object.keys(data).map(id => ({ id, ...data[id] })) : []);
+    });
+
+    onValue(ref(db, 'inventory'), (snapshot) => {
+      const data = snapshot.val();
+      setInventory(data ? Object.keys(data).map(id => ({ id, ...data[id] })) : []);
+    });
+
+    onValue(ref(db, 'config/menuTheme'), (snapshot) => {
+      if (snapshot.exists()) setMenuTheme(snapshot.val());
+    });
+  }, []);
+
+  const handleToggleTheme = async () => {
+    await set(ref(db, 'config/menuTheme'), menuTheme === 'dark' ? 'light' : 'dark');
+  };
+
+  const handleImageUpload = async (e, isEditing = false) => {
+    const file = e.target.files[0];
+    if (!file || !file.type.startsWith('image/')) return;
+    setUploading(true);
+    try {
+      const storagePath = `menu/${Date.now()}_${file.name}`;
+      const fileRef = sRef(storage, storagePath);
+      await uploadBytes(fileRef, file);
+      const url = await getDownloadURL(fileRef);
+      if (isEditing) setEditingItem(prev => ({ ...prev, image: url }));
+      else setFormData(prev => ({ ...prev, image: url }));
+    } catch (error) { console.error(error); } finally { setUploading(false); }
+  };
+
+  const handleAddProduct = async (e) => {
+    e.preventDefault();
+    if (!formData.name || !formData.price) return;
+    const newRef = push(ref(db, 'menu'));
+    await set(newRef, { ...formData, price: parseFloat(formData.price), active: true });
+    setFormData({ name: '', price: '', category: 'Principales', image: '', variants: [], ingredients: [] });
+  };
+
+  const handleDelete = async (id) => {
+    if(window.confirm('¿Eliminar producto?')) await remove(ref(db, `menu/${id}`));
+  };
+
+  const addIngredientToProduct = (isEditing) => {
+    const newIng = { id: '', qty: 1 };
+    if (isEditing) setEditingItem({ ...editingItem, ingredients: [...(editingItem.ingredients || []), newIng] });
+    else setFormData({ ...formData, ingredients: [...formData.ingredients, newIng] });
+  };
+
+  const handleSaveEdit = async () => {
+    const { id, ...updates } = editingItem;
+    await update(ref(db, `menu/${id}`), { ...updates, price: parseFloat(updates.price) });
+    setIsModalOpen(false);
+  };
+
+  return (
+    <div className="animate-fade-in" style={{ padding: '0 1rem' }}>
+      <header style={{ marginBottom: '2.5rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <div>
+          <h2 className="text-gradient" style={{ fontSize: '2rem', fontWeight: '800', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+            <ChefHat size={28} /> Carta & Recetas
+          </h2>
+          <p style={{ color: 'var(--text-muted)' }}>Gestión de productos y consumo de insumos</p>
+        </div>
+        <button onClick={handleToggleTheme} className="btn-glass" style={{ padding: '0.8rem 1.25rem' }}>
+          Tema QR: {menuTheme.toUpperCase()}
+        </button>
+      </header>
+
+      <section className="glass-card" style={{ marginBottom: '3rem', padding: '1.5rem' }}>
+        <h3 style={{ marginBottom: '1.5rem', fontSize: '1.1rem' }}>Agregar Platillo</h3>
+        <form onSubmit={handleAddProduct} style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1.25rem', alignItems: 'end' }}>
+          <div>
+            <label style={labelStyle}>Nombre</label>
+            <input type="text" value={formData.name} onChange={e => setFormData({...formData, name: e.target.value})} style={inputStyle} />
+          </div>
+          <div>
+            <label style={labelStyle}>Precio Base ($)</label>
+            <input type="number" value={formData.price} onChange={e => setFormData({...formData, price: e.target.value})} style={inputStyle} />
+          </div>
+          <div>
+            <label style={labelStyle}>Categoría</label>
+            <select value={formData.category} onChange={e => setFormData({...formData, category: e.target.value})} style={inputStyle}>
+              {['Entradas', 'Bebidas', 'Fuertes', 'Postres', 'Pizzas', 'Combos'].map(c => <option key={c} value={c}>{c}</option>)}
+            </select>
+          </div>
+          <div style={{ display: 'flex', gap: '0.5rem' }}>
+            <button type="button" onClick={() => addIngredientToProduct(false)} className="btn-glass" style={{ flex: 1, padding: '0.8rem' }}>
+              <ListTree size={18} /> Insumos
+            </button>
+            <button type="submit" className="btn-primary" style={{ padding: '0.8rem 1.5rem', opacity: uploading ? 0.5 : 1 }}>
+              <Plus size={20} />
+            </button>
+          </div>
+        </form>
+
+        {formData.ingredients.length > 0 && (
+          <div style={{ marginTop: '1.5rem', display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
+            {formData.ingredients.map((ing, idx) => (
+              <div key={idx} className="glass-panel" style={{ padding: '0.5rem 1rem', display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+                <select 
+                  value={ing.id} 
+                  onChange={e => {
+                    const newIngs = [...formData.ingredients];
+                    newIngs[idx].id = e.target.value;
+                    setFormData({...formData, ingredients: newIngs});
+                  }}
+                  style={{...inputStyle, padding: '0.4rem', width: 'auto'}}
+                >
+                  <option value="">Seleccionar Insumo</option>
+                  {inventory.map(i => <option key={i.id} value={i.id}>{i.name}</option>)}
+                </select>
+                <input 
+                  type="number" 
+                  value={ing.qty} 
+                  onChange={e => {
+                    const newIngs = [...formData.ingredients];
+                    newIngs[idx].qty = parseFloat(e.target.value);
+                    setFormData({...formData, ingredients: newIngs});
+                  }}
+                  style={{...inputStyle, padding: '0.4rem', width: '60px', background: 'rgba(0,0,0,0.03)'}}
+                />
+                <button type="button" onClick={() => setFormData({...formData, ingredients: formData.ingredients.filter((_, i) => i !== idx)})} style={{color: 'var(--primary)', background: 'none', border: 'none'}}><X size={16}/></button>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '1.5rem' }}>
+        {products.map(item => (
+          <div key={item.id} className="glass-card" style={{ padding: '0', overflow: 'hidden' }}>
+            <div style={{ position: 'relative', height: '160px', background: 'rgba(255,255,255,0.05)' }}>
+              {item.image && <img src={item.image} alt={item.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />}
+              <div style={{ position: 'absolute', top: '10px', right: '10px', display: 'flex', gap: '5px' }}>
+                <button onClick={() => { setEditingItem({...item}); setIsModalOpen(true); }} style={actionBtnStyle}><Edit3 size={16} /></button>
+                <button onClick={() => handleDelete(item.id)} style={{...actionBtnStyle, color: 'var(--primary)'}}><Trash2 size={16} /></button>
+              </div>
+            </div>
+            <div style={{ padding: '1.25rem' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
+                <h4 style={{ fontWeight: '700' }}>{item.name}</h4>
+                <span style={{ color: 'var(--success)', fontWeight: '800' }}>${item.price}</span>
+              </div>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <span style={{ fontSize: '0.7rem', color: 'var(--text-muted)', background: 'rgba(0,0,0,0.03)', padding: '2px 8px', borderRadius: '4px' }}>{item.category}</span>
+                {item.ingredients?.length > 0 && <span title="Tiene receta vinculada" style={{ color: 'var(--primary)' }}><ChefHat size={14} /></span>}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {isModalOpen && editingItem && (
+        <div style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', background: 'rgba(0,0,0,0.85)', display: 'flex', justifyContent: 'center', alignItems: 'center', zIndex: 1000, padding: '20px' }}>
+          <div className="glass-panel animate-scale-in" style={{ maxWidth: '600px', width: '100%', padding: '2rem', maxHeight: '90vh', overflowY: 'auto' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '2rem' }}>
+              <h2 className="text-gradient">Editar: {editingItem.name}</h2>
+              <button onClick={() => setIsModalOpen(false)} style={{ background: 'none', border: 'none', color: 'var(--text-muted)' }}><X size={24} /></button>
+            </div>
+            
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+                <div><label style={labelStyle}>Nombre</label><input type="text" value={editingItem.name} onChange={e => setEditingItem({...editingItem, name: e.target.value})} style={inputStyle} /></div>
+                <div><label style={labelStyle}>Precio</label><input type="number" value={editingItem.price} onChange={e => setEditingItem({...editingItem, price: e.target.value})} style={inputStyle} /></div>
+              </div>
+              
+              <div>
+                <label style={labelStyle}>Receta (Consumo de insumos por venta)</label>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                  {(editingItem.ingredients || []).map((ing, i) => (
+                    <div key={i} style={{ display: 'flex', gap: '0.5rem' }}>
+                      <select value={ing.id} onChange={e => {
+                        const ings = [...editingItem.ingredients];
+                        ings[i].id = e.target.value;
+                        setEditingItem({...editingItem, ingredients: ings});
+                      }} style={{...inputStyle, flex: 2}}>
+                        <option value="">Seleccionar Insumo</option>
+                        {inventory.map(inv => <option key={inv.id} value={inv.id}>{inv.name}</option>)}
+                      </select>
+                      <input type="number" value={ing.qty} onChange={e => {
+                        const ings = [...editingItem.ingredients];
+                        ings[i].qty = parseFloat(e.target.value);
+                        setEditingItem({...editingItem, ingredients: ings});
+                      }} style={{...inputStyle, flex: 1}} />
+                      <button onClick={() => setEditingItem({...editingItem, ingredients: editingItem.ingredients.filter((_, idx) => idx !== i)})} style={{color: 'var(--primary)'}}><Trash2 size={18} /></button>
+                    </div>
+                  ))}
+                  <button onClick={() => addIngredientToProduct(true)} className="btn-glass" style={{ padding: '0.5rem', fontSize: '0.8rem' }}><Plus size={14} /> Añadir Insumo</button>
+                </div>
+              </div>
+
+              <div style={{ display: 'flex', gap: '1rem', marginTop: '1rem' }}>
+                <label style={{ flex: 1, display: 'flex', alignItems: 'center', gap: '0.5rem', background: 'var(--primary)', padding: '0.8rem', borderRadius: '8px', cursor: 'pointer', justifyContent: 'center' }}>
+                  <Upload size={18} /> {uploading ? 'Subiendo...' : 'Cambiar Imagen'}
+                  <input type="file" hidden onChange={e => handleImageUpload(e, true)} accept="image/*" />
+                </label>
+                <button onClick={handleSaveEdit} className="btn-primary" style={{ flex: 1, padding: '0.8rem' }}><Save size={18} /> Guardar</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+const inputStyle = { width: '100%', padding: '0.8rem', borderRadius: '8px', background: 'rgba(0,0,0,0.03)', border: '1px solid var(--border-subtle)', color: 'var(--text-main)', outline: 'none' };
+const labelStyle = { display: 'block', fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '0.4rem' };
+const actionBtnStyle = { width: '32px', height: '32px', borderRadius: '8px', border: 'none', background: 'rgba(255,255,255,0.9)', color: 'var(--text-main)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' };

frontend/src/components/admin/Reports.jsx

@@ -0,0 +1,162 @@
+import React, { useState, useEffect } from 'react';
+import { db } from '../../firebase/config';
+import { ref, onValue } from 'firebase/database';
+import {
+  Chart as ChartJS, CategoryScale, LinearScale, PointElement,
+  LineElement, Title, Tooltip, Legend, BarElement
+} from 'chart.js';
+import { Line, Bar } from 'react-chartjs-2';
+import { TrendingUp, Package, Users as UsersIcon, Clock, Award, BarChart3 } from 'lucide-react';
+
+ChartJS.register(
+  CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, BarElement
+);
+
+export default function Reports() {
+  const [salesData, setSalesData] = useState([0, 0, 0, 0, 0, 0, 0]);
+  const [hourlyData, setHourlyData] = useState(new Array(24).fill(0));
+  const [waiterPerformance, setWaiterPerformance] = useState({ labels: [], data: [] });
+  const [topProducts, setTopProducts] = useState({ labels: [], data: [] });
+  const [stats, setStats] = useState({ totalSales: 0, orderCount: 0, avgTicket: 0 });
+
+  useEffect(() => {
+    onValue(ref(db, 'orders'), (snapshot) => {
+      const data = snapshot.val();
+      if (data) {
+        const orders = Object.values(data).filter(o => o.status === 'completed');
+        const weeklySales = [0, 0, 0, 0, 0, 0, 0];
+        const hourSales = new Array(24).fill(0);
+        const productCounts = {};
+        const waiterSales = {};
+        let total = 0;
+
+        orders.forEach(order => {
+          total += order.total;
+          
+          const date = new Date(order.timestamp);
+          // Weekly
+          const day = date.getDay(); 
+          const dayIdx = (day + 6) % 7; 
+          weeklySales[dayIdx] += order.total;
+
+          // Hourly
+          const hour = date.getHours();
+          hourSales[hour] += 1; // Count orders per hour for peak density
+
+          // Waiters
+          const waiter = order.waiter || 'Sistema/Admin';
+          waiterSales[waiter] = (waiterSales[waiter] || 0) + order.total;
+
+          // Products
+          order.items.forEach(item => {
+            productCounts[item.name] = (productCounts[item.name] || 0) + item.qty;
+          });
+        });
+
+        setSalesData(weeklySales);
+        setHourlyData(hourSales);
+        setStats({
+          totalSales: total,
+          orderCount: orders.length,
+          avgTicket: total / (orders.length || 1)
+        });
+
+        const sortedProducts = Object.entries(productCounts)
+          .sort((a,b) => b[1] - a[1])
+          .slice(0, 5);
+        setTopProducts({
+          labels: sortedProducts.map(p => p[0]),
+          data: sortedProducts.map(p => p[1])
+        });
+
+        const sortedWaiters = Object.entries(waiterSales)
+          .sort((a,b) => b[1] - a[1]);
+        setWaiterPerformance({
+          labels: sortedWaiters.map(w => w[0].split('@')[0]),
+          data: sortedWaiters.map(w => w[1])
+        });
+      }
+    });
+  }, []);
+
+  const chartOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: { legend: { labels: { color: '#9595a8', font: { size: 10 } } } },
+    scales: {
+      x: { ticks: { color: '#9595a8', font: { size: 10 } }, grid: { display: false } },
+      y: { ticks: { color: '#9595a8', font: { size: 10 } }, grid: { color: 'rgba(0,0,0,0.05)' } }
+    }
+  };
+
+  return (
+    <div className="animate-fade-in" style={{ paddingBottom: '3rem' }}>
+      <header style={{ marginBottom: '2.5rem' }}>
+        <h2 className="text-gradient" style={{ fontSize: '2rem', fontWeight: '800' }}>RESTO Analytics PLUS</h2>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '1.5rem', marginTop: '1.5rem' }}>
+            <StatCard title="Ventas Totales" value={`$${stats.totalSales.toFixed(2)}`} icon={<TrendingUp size={18}/>} color="var(--primary)" />
+            <StatCard title="Pedidos" value={stats.orderCount} icon={<Package size={18}/>} color="var(--success)" />
+            <StatCard title="Ticket Promedio" value={`$${stats.avgTicket.toFixed(2)}`} icon={<BarChart3 size={18}/>} color="#4dabf7" />
+        </div>
+      </header>
+      
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(450px, 1fr))', gap: '2rem' }}>
+        {/* Ventas Semanales */}
+        <ChartCard title="Flujo de Ventas Semanal" icon={<Calendar size={18}/>}>
+          <Line data={{
+            labels: ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'],
+            datasets: [{ label: 'Ventas ($)', data: salesData, borderColor: 'var(--primary)', backgroundColor: 'rgba(255,90,95,0.1)', fill: true, tension: 0.4 }]
+          }} options={chartOptions} />
+        </ChartCard>
+
+        {/* Rendimiento Meseros */}
+        <ChartCard title="Rendimiento por Mesero" icon={<Award size={18}/>}>
+          <Bar data={{
+            labels: waiterPerformance.labels,
+            datasets: [{ label: 'Ventas Totales ($)', data: waiterPerformance.data, backgroundColor: 'rgba(76,217,100,0.6)', borderRadius: 6 }]
+          }} options={chartOptions} />
+        </ChartCard>
+
+        {/* Horas Pico */}
+        <ChartCard title="Horas Pico (Densidad de Pedidos)" icon={<Clock size={18}/>}>
+          <Line data={{
+            labels: Array.from({length: 24}, (_, i) => `${i}:00`),
+            datasets: [{ label: 'Pedidos', data: hourlyData, borderColor: '#4dabf7', backgroundColor: 'rgba(77,171,247,0.1)', fill: true, tension: 0.4 }]
+          }} options={chartOptions} />
+        </ChartCard>
+
+        {/* Top Productos */}
+        <ChartCard title="Productos Estrella" icon={<Package size={18}/>}>
+          <Bar data={{
+            labels: topProducts.labels,
+            datasets: [{ label: 'Unidades', data: topProducts.data, backgroundColor: 'rgba(0,0,0,0.03)', borderColor: 'var(--border-subtle)', borderWidth: 1, borderRadius: 6 }]
+          }} options={chartOptions} />
+        </ChartCard>
+      </div>
+    </div>
+  );
+}
+
+function StatCard({ title, value, icon, color }) {
+  return (
+    <div className="glass-card" style={{ padding: '1.5rem' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', color: 'var(--text-muted)', fontSize: '0.85rem', marginBottom: '0.75rem' }}>
+        {title} <span style={{ color }}>{icon}</span>
+      </div>
+      <div style={{ fontSize: '1.75rem', fontWeight: '900' }}>{value}</div>
+    </div>
+  );
+}
+
+function ChartCard({ title, icon, children }) {
+  return (
+    <div className="glass-card" style={{ height: '380px', display: 'flex', flexDirection: 'column', padding: '1.5rem' }}>
+      <h3 style={{ marginBottom: '1.5rem', fontSize: '1.1rem', fontWeight: '700', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+        {icon} {title}
+      </h3>
+      <div style={{ flex: 1, position: 'relative' }}>
+        {children}
+      </div>
+    </div>
+  );
+}

frontend/src/components/admin/SettingsPlus.jsx

@@ -0,0 +1,115 @@
+import React, { useState, useEffect } from 'react';
+import { db } from '../../firebase/config';
+import { ref, onValue, set, update } from 'firebase/database';
+import { Settings, Percent, DollarSign, Store, Globe, Bell, Save } from 'lucide-react';
+
+export default function SettingsPlus() {
+  const [settings, setSettings] = useState({
+    restaurantName: 'Resto OS Premium',
+    currency: 'USD',
+    taxRate: 16,
+    serviceCharge: 10,
+    language: 'es',
+    timezone: 'America/Mexico_City'
+  });
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    onValue(ref(db, 'config/settings'), (snapshot) => {
+      if (snapshot.exists()) setSettings(snapshot.val());
+    });
+  }, []);
+
+  const handleSave = async () => {
+    setSaving(true);
+    await set(ref(db, 'config/settings'), settings);
+    setTimeout(() => setSaving(false), 800);
+  };
+
+  return (
+    <div className="animate-fade-in" style={{ padding: '0 1rem' }}>
+      <header style={{ marginBottom: '2.5rem' }}>
+        <h2 className="text-gradient" style={{ fontSize: '2rem', fontWeight: '800', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+          <Settings size={28} /> Configuración Global
+        </h2>
+        <p style={{ color: 'var(--text-muted)' }}>Ajustes generales del sistema ERP</p>
+      </header>
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: '2rem' }}>
+        
+        <div className="glass-card">
+          <h3 style={sectionTitleStyle}><Store size={18} /> Información Local</h3>
+          <div style={formGrid}>
+            <div style={inputGroup}>
+                <label style={labelStyle}>Nombre del Establecimiento</label>
+                <input type="text" value={settings.restaurantName} onChange={e => setSettings({...settings, restaurantName: e.target.value})} style={inputStyle} />
+            </div>
+            <div style={inputGroup}>
+                <label style={labelStyle}>Moneda Principal</label>
+                <select value={settings.currency} onChange={e => setSettings({...settings, currency: e.target.value})} style={inputStyle}>
+                    <option value="USD">Dólar ($ USD)</option>
+                    <option value="MXN">Peso ($ MXN)</option>
+                    <option value="EUR">Euro (€ EUR)</option>
+                    <option value="COP">Peso ($ COP)</option>
+                </select>
+            </div>
+          </div>
+        </div>
+
+        <div className="glass-card">
+          <h3 style={sectionTitleStyle}><Percent size={18} /> Impuestos y Cargos</h3>
+          <div style={formGrid}>
+            <div style={inputGroup}>
+                <label style={labelStyle}>Impuesto (IVA/VAT) %</label>
+                <input type="number" value={settings.taxRate} onChange={e => setSettings({...settings, taxRate: parseFloat(e.target.value)})} style={inputStyle} />
+            </div>
+            <div style={inputGroup}>
+                <label style={labelStyle}>Servicio Sugerido %</label>
+                <input type="number" value={settings.serviceCharge} onChange={e => setSettings({...settings, serviceCharge: parseFloat(e.target.value)})} style={inputStyle} />
+            </div>
+          </div>
+        </div>
+
+        <div className="glass-card">
+          <h3 style={sectionTitleStyle}><Globe size={18} /> Idioma y Región</h3>
+          <div style={formGrid}>
+            <div style={inputGroup}>
+                <label style={labelStyle}>Idioma Interfaz</label>
+                <select value={settings.language} onChange={e => setSettings({...settings, language: e.target.value})} style={inputStyle}>
+                    <option value="es">Español</option>
+                    <option value="en">English</option>
+                </select>
+            </div>
+            <div style={inputGroup}>
+                <label style={labelStyle}>Zona Horaria</label>
+                <select value={settings.timezone} onChange={e => setSettings({...settings, timezone: e.target.value})} style={inputStyle}>
+                    <option value="America/Mexico_City">Mexico City (CST)</option>
+                    <option value="America/Bogota">Bogotá (EST)</option>
+                    <option value="Europe/Madrid">Madrid (CET)</option>
+                </select>
+            </div>
+          </div>
+        </div>
+
+        <div className="glass-card" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', border: '1px dashed var(--primary)' }}>
+            <button 
+                onClick={handleSave} 
+                className="btn-primary" 
+                style={{ width: '200px', height: '55px', fontSize: '1.1rem' }}
+                disabled={saving}
+            >
+                {saving ? 'Guardando...' : <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><Save size={20}/> Guardar Cambios</span>}
+            </button>
+            <p style={{ marginTop: '1rem', fontSize: '0.8rem', color: 'var(--text-muted)' }}>Los cambios se aplicarán a todos los terminales.</p>
+        </div>
+
+      </div>
+    </div>
+  );
+}
+
+const inputStyle = { width: '100%', padding: '0.8rem', borderRadius: '8px', background: 'rgba(0,0,0,0.03)', border: '1px solid var(--border-subtle)', color: 'var(--text-main)', outline: 'none' };
+const labelStyle = { display: 'block', fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '0.5rem' };
+const sectionTitleStyle = { marginBottom: '1.5rem', fontSize: '1.1rem', fontWeight: '700', display: 'flex', alignItems: 'center', gap: '0.75rem' };
+const formGrid = { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.5rem' };
+const inputGroup = { display: 'flex', flexDirection: 'column' };

frontend/src/components/admin/TableManager.jsx

@@ -0,0 +1,139 @@
+import React, { useState, useEffect } from 'react';
+import { db } from '../../firebase/config';
+import { ref, onValue, set, update, push, remove } from 'firebase/database';
+import { Layout, Plus, Trash2, Map as MapIcon, Grid, Save, MousePointer2 } from 'lucide-react';
+
+export default function TableManager() {
+  const [tables, setTables] = useState([]);
+  const [newTable, setNewTable] = useState({ number: '', capacity: 4 });
+
+  useEffect(() => {
+    onValue(ref(db, 'config/tables'), (snapshot) => {
+      const data = snapshot.val();
+      if (data) {
+        setTables(Object.keys(data).map(id => ({ id, ...data[id] })).sort((a,b) => a.number - b.number));
+      } else {
+          setTables([]);
+      }
+    });
+  }, []);
+
+  const addTable = async (e) => {
+    e.preventDefault();
+    if (!newTable.number) return;
+    const tableRef = push(ref(db, 'config/tables'));
+    await set(tableRef, {
+      number: parseInt(newTable.number),
+      capacity: parseInt(newTable.capacity),
+      status: 'available',
+      x: 0,
+      y: 0
+    });
+    setNewTable({ number: '', capacity: 4 });
+  };
+
+  const deleteTable = async (id) => {
+    if (window.confirm('¿Eliminar esta mesa del mapa?')) {
+        await remove(ref(db, `config/tables/${id}`));
+    }
+  };
+
+  return (
+    <div className="animate-fade-in" style={{ padding: '0 1rem' }}>
+      <header style={{ marginBottom: '2.5rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <div>
+            <h2 className="text-gradient" style={{ fontSize: '2rem', fontWeight: '800', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+                <MapIcon size={28} /> Diseño de Salón
+            </h2>
+            <p style={{ color: 'var(--text-muted)' }}>Configura la distribución física de tu restaurante</p>
+        </div>
+      </header>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: '2rem' }}>
+        
+        {/* Sidebar: Add Tables */}
+        <aside className="glass-card" style={{ alignSelf: 'start' }}>
+            <h3 style={{ marginBottom: '1.5rem', fontSize: '1.1rem' }}>Añadir Mesas</h3>
+            <form onSubmit={addTable} style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
+                <div>
+                    <label style={labelStyle}>Número de Mesa</label>
+                    <input type="number" value={newTable.number} onChange={e => setNewTable({...newTable, number: e.target.value})} style={inputStyle} placeholder="Ej. 10" />
+                </div>
+                <div>
+                    <label style={labelStyle}>Capacidad (Personas)</label>
+                    <input type="number" value={newTable.capacity} onChange={e => setNewTable({...newTable, capacity: e.target.value})} style={inputStyle} placeholder="Ej. 4" />
+                </div>
+                <button type="submit" className="btn-primary" style={{ padding: '0.8rem' }}>
+                    <Plus size={18} /> Crear Mesa
+                </button>
+            </form>
+
+            <div style={{ marginTop: '2.5rem' }}>
+                <h4 style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '1rem', borderTop: '1px solid var(--border-subtle)', paddingTop: '1.5rem' }}>Listado</h4>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', maxHeight: '300px', overflowY: 'auto' }}>
+                    {tables.map(t => (
+                        <div key={t.id} style={{ display: 'flex', justifyContent: 'space-between', padding: '0.6rem 1rem', background: 'rgba(0,0,0,0.03)', borderRadius: '8px', alignItems: 'center' }}>
+                            <span style={{ fontWeight: '700' }}>Mesa {t.number}</span>
+                            <div style={{ display: 'flex', gap: '0.5rem' }}>
+                                <span style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{t.capacity} px</span>
+                                <button onClick={() => deleteTable(t.id)} style={{ color: 'var(--primary)', background: 'none', border: 'none' }}><Trash2 size={14} /></button>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </aside>
+
+        {/* Visual Map Area */}
+        <section className="glass-panel" style={{ height: '600px', position: 'relative', overflow: 'hidden', background: 'var(--bg-card)', backgroundSize: '30px 30px', border: '1px solid var(--border-subtle)', backgroundImage: 'radial-gradient(circle, rgba(0,0,0,0.05) 1px, transparent 1px)' }}>
+            <div style={{ position: 'absolute', top: '1.5rem', left: '1.5rem', display: 'flex', gap: '1.5rem', fontSize: '0.75rem' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}><div style={{ width: 12, height: 12, background: 'var(--success)', borderRadius: '2px' }} /> Libre</div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}><div style={{ width: 12, height: 12, background: 'var(--primary)', borderRadius: '2px' }} /> Ocupado</div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}><div style={{ width: 12, height: 12, background: '#fcc419', borderRadius: '2px' }} /> Reservado</div>
+            </div>
+            
+            <div style={{ width: '100%', height: '100%', padding: '5rem 3rem', display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(110px, 1fr))', gap: '3rem' }}>
+                {tables.map(t => {
+                    const statusColor = t.status === 'occupied' ? 'var(--primary)' : t.status === 'reserved' ? '#fcc419' : 'var(--success)';
+                    return (
+                        <div 
+                            key={t.id} 
+                            onClick={async () => {
+                                const nextStatus = t.status === 'available' ? 'occupied' : t.status === 'occupied' ? 'reserved' : 'available';
+                                await update(ref(db, `config/tables/${t.id}`), { status: nextStatus });
+                            }}
+                            className="animate-scale-in"
+                            style={{ 
+                                width: '100px', height: '100px', 
+                                background: t.status === 'available' ? 'rgba(76,217,100,0.05)' : 'rgba(0,0,0,0.02)', 
+                                border: `2px solid ${statusColor}`, 
+                                borderRadius: t.capacity > 4 ? '16px' : '50%',
+                                display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+                                boxShadow: t.status === 'occupied' ? '0 0 20px rgba(255,90,95,0.05)' : 'none',
+                                cursor: 'pointer', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                                position: 'relative'
+                            }}
+                        >
+                            <span style={{ fontSize: '1.4rem', fontWeight: '900', color: statusColor }}>{t.number}</span>
+                            <span style={{ fontSize: '0.65rem', opacity: 0.6, color: 'var(--text-muted)' }}>{t.capacity} p</span>
+                            {t.status !== 'available' && (
+                                <div style={{ position: 'absolute', top: '-5px', right: '-5px', width: 12, height: 12, borderRadius: '50%', background: statusColor, border: '2px solid var(--bg-card)' }} />
+                            )}
+                        </div>
+                    );
+                })}
+                {tables.length === 0 && (
+                    <div style={{ gridColumn: '1 / -1', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: 0.1 }}>
+                        <Grid size={80} />
+                    </div>
+                )}
+            </div>
+        </section>
+
+      </div>
+    </div>
+  );
+}
+
+const inputStyle = { width: '100%', padding: '0.8rem', borderRadius: '8px', background: 'rgba(0,0,0,0.03)', border: '1px solid var(--border-subtle)', color: 'var(--text-main)', outline: 'none' };
+const labelStyle = { display: 'block', fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '0.5rem' };

frontend/src/components/admin/UserManager.jsx

@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import { db } from '../../firebase/config';
+import { ref, onValue, set, update } from 'firebase/database';
+import { Users, Shield, UserPlus, Trash2, CheckCircle, Activity, ShieldCheck, UserCog } from 'lucide-react';
+
+export default function UserManager() {
+  const [employees, setEmployees] = useState([]);
+  const [newEmployee, setNewEmployee] = useState({ email: '', role: 'mesero', name: '' });
+
+  useEffect(() => {
+    onValue(ref(db, 'users'), (snapshot) => {
+      const data = snapshot.val();
+      if (data) {
+        setEmployees(Object.keys(data).map(uid => ({ uid, ...data[uid] })));
+      }
+    });
+  }, []);
+
+  const handleUpdateRole = async (uid, newRole) => {
+    await update(ref(db, `users/${uid}`), { role: newRole });
+  };
+
+  const roleColors = {
+    admin: 'var(--primary)',
+    mesero: 'var(--success)',
+    cocina: 'var(--warning)',
+    cajero: '#50ADE6'
+  };
+
+  return (
+    <div className="animate-fade-in" style={{ padding: '0 1rem' }}>
+      <header style={{ marginBottom: '2.5rem' }}>
+        <h2 className="text-gradient" style={{ fontSize: '2rem', fontWeight: '800', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+          <UserCog size={28} /> Equipo y Roles
+        </h2>
+        <p style={{ color: 'var(--text-muted)' }}>Control de acceso y permisos para empleados</p>
+      </header>
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '1.5rem' }}>
+        {employees.map(emp => (
+          <div key={emp.uid} className="glass-card" style={{ padding: '1.5rem', borderLeft: `4px solid ${roleColors[emp.role] || '#fff'}` }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: '1rem' }}>
+                <div>
+                    <h3 style={{ fontSize: '1.1rem', fontWeight: '700' }}>{emp.name || 'Sin Nombre'}</h3>
+                    <p style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>{emp.email}</p>
+                </div>
+                <div style={{ background: 'rgba(0,0,0,0.03)', padding: '0.5rem', borderRadius: '50%' }}>
+                    <Shield size={20} style={{ color: roleColors[emp.role] }} />
+                </div>
+            </div>
+
+            <div style={{ marginBottom: '1.5rem' }}>
+                <label style={labelStyle}>Rol Asignado</label>
+                <select 
+                    value={emp.role} 
+                    onChange={(e) => handleUpdateRole(emp.uid, e.target.value)}
+                    style={{...inputStyle, background: 'rgba(0,0,0,0.03)', border: '1px solid var(--border-subtle)'}}
+                >
+                    <option value="admin">Administrador (Total)</option>
+                    <option value="mesero">Mesero (POS)</option>
+                    <option value="cocina">Cocina (KDS)</option>
+                    <option value="cajero">Cajero (Caja/POS)</option>
+                </select>
+            </div>
+
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', fontSize: '0.7rem', color: 'var(--success)' }}>
+                    <Activity size={12} /> Activo
+                </div>
+                <button style={{ background: 'none', border: 'none', color: 'var(--primary)', cursor: 'pointer' }} title="Revocar Acceso">
+                    <Trash2 size={16} />
+                </button>
+            </div>
+          </div>
+        ))}
+
+        <div className="glass-card" style={{ border: '2px dashed var(--border-subtle)', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center', padding: '2rem', gap: '1rem' }}>
+            <div style={{ background: 'rgba(0,0,0,0.03)', padding: '1rem', borderRadius: '50%', color: 'var(--text-muted)' }}>
+                <UserPlus size={32} />
+            </div>
+            <h3 style={{ fontSize: '1rem', fontWeight: '700' }}>Registrar Nuevo Empleado</h3>
+            <p style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>El empleado debe registrarse primero en la app para aparecer aquí.</p>
+        </div>
+      </div>
+
+      <div className="glass-panel" style={{ marginTop: '3rem', padding: '2rem' }}>
+        <h3 style={{ fontSize: '1.1rem', marginBottom: '1.5rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            <ShieldCheck size={18} /> Permisos por Rol
+        </h3>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1.5rem' }}>
+            {[
+                { role: 'Admin', rights: 'Control total de inventario, finanzas y menú.' },
+                { role: 'Mesero', rights: 'Toma de pedidos, cierre de cuentas y mapa de mesas.' },
+                { role: 'Cocina', rights: 'Visualización de tickets y cambio de estado de preparación.' },
+                { role: 'Cajero', rights: 'Gestión de arqueo de caja y cobros de POS.' }
+            ].map(r => (
+                <div key={r.role}>
+                    <h4 style={{ fontSize: '0.9rem', fontWeight: '800', marginBottom: '0.5rem' }}>{r.role}</h4>
+                    <p style={{ fontSize: '0.8rem', color: 'var(--text-muted)', lineHeight: '1.4' }}>{r.rights}</p>
+                </div>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const inputStyle = { width: '100%', padding: '0.8rem', borderRadius: '8px', background: 'rgba(0,0,0,0.03)', border: '1px solid var(--border-subtle)', color: 'var(--text-main)', outline: 'none' };
+const labelStyle = { display: 'block', fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '0.5rem' };

frontend/src/context/AuthContext.jsx

@@ -0,0 +1,64 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { auth, db } from '../firebase/config';
+import { onAuthStateChanged, signInWithEmailAndPassword, signOut } from 'firebase/auth';
+import { ref, get } from 'firebase/database';
+
+export const AuthContext = createContext();
+
+export const useAuth = () => {
+  return useContext(AuthContext);
+};
+
+export const AuthProvider = ({ children }) => {
+  const [currentUser, setCurrentUser] = useState(null);
+  const [userRole, setUserRole] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const login = async (email, password) => {
+    return signInWithEmailAndPassword(auth, email, password);
+  };
+
+  const logout = () => {
+    return signOut(auth);
+  };
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, async (user) => {
+      if (user) {
+        setCurrentUser(user);
+        // Obtener rol del usuario desde DB
+        try {
+          const userRef = ref(db, `users/${user.uid}`);
+          const snapshot = await get(userRef);
+          if (snapshot.exists()) {
+            setUserRole(snapshot.val().role);
+          } else {
+            console.log("Rol no definido para este usuario = asume default");
+            setUserRole('comensal'); 
+          }
+        } catch (error) {
+          console.error("Error al obtener el rol del usuario", error);
+        }
+      } else {
+        setCurrentUser(null);
+        setUserRole(null);
+      }
+      setLoading(false);
+    });
+
+    return unsubscribe;
+  }, []);
+
+  const value = {
+    currentUser,
+    userRole,
+    login,
+    logout
+  };
+
+  return (
+    <AuthContext.Provider value={value}>
+      {!loading && children}
+    </AuthContext.Provider>
+  );
+};

frontend/src/firebase/config.js

@@ -0,0 +1,22 @@
+import { initializeApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
+import { getDatabase } from "firebase/database";
+import { getStorage } from "firebase/storage";
+
+const firebaseConfig = {
+  apiKey: "AIzaSyBm2Tvsz7SHtWEWO-97p3gvqC76iqt05VM",
+  authDomain: "rest-fc379.firebaseapp.com",
+  databaseURL: "https://rest-fc379-default-rtdb.firebaseio.com",
+  projectId: "rest-fc379",
+  storageBucket: "rest-fc379.firebasestorage.app",
+  messagingSenderId: "119970678093",
+  appId: "1:119970678093:web:16fb097882249fdce0e304",
+  measurementId: "G-ZDEW4Q04NN"
+};
+
+const app = initializeApp(firebaseConfig);
+export const auth = getAuth(app);
+export const db = getDatabase(app);
+export const storage = getStorage(app);
+
+export default app;

frontend/src/index.css

@@ -0,0 +1,190 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
+
+:root {
+  /* Premium Light Theme Core Palette */
+  --bg-base: #f8f9fa;
+  --bg-surface: #ffffff;
+  --bg-glass: rgba(255, 255, 255, 0.85);
+  --bg-glass-hover: rgba(245, 245, 250, 0.9);
+  --bg-card: #ffffff;
+  
+  /* Brand Accents */
+  --primary: #FF5A5F;
+  --primary-hover: #ff4046;
+  --primary-glow: rgba(255, 90, 95, 0.15);
+  --secondary: #00A699;
+  --secondary-hover: #008f84;
+  
+  /* Text */
+  --text-main: #1a1a20;
+  --text-muted: #6b6b7b;
+  --text-disabled: #a5a5b8;
+  
+  /* Status Colors */
+  --success: #20C997;
+  --warning: #F5A623;
+  --danger: #FF3B30;
+  --info: #32ADE6;
+
+  /* Borders & Shadows */
+  --border-subtle: rgba(0, 0, 0, 0.08);
+  --border-focus: rgba(255, 90, 95, 0.3);
+  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.08);
+  --shadow-glow: 0 0 20px var(--primary-glow);
+  --glass-blur: blur(20px);
+  --glass-border: 1px solid var(--border-subtle);
+
+  /* Transitions */
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.3s cubic-bezier(0.25, 1, 0.5, 1);
+  --transition-slow: 0.5s cubic-bezier(0.25, 1, 0.5, 1);
+  
+  /* Radii */
+  --radius-sm: 8px;
+  --radius-md: 16px;
+  --radius-lg: 24px;
+  --radius-pill: 9999px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+}
+
+body {
+  background-color: var(--bg-base);
+  color: var(--text-main);
+  min-height: 100vh;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  background-image: 
+    radial-gradient(circle at 10% 20%, rgba(255, 90, 95, 0.02) 0%, transparent 30%),
+    radial-gradient(circle at 90% 80%, rgba(0, 166, 153, 0.02) 0%, transparent 30%);
+  background-attachment: fixed;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+/* Base Glassmorphic Container */
+.glass-panel {
+  background: var(--bg-glass);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: var(--glass-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+}
+
+/* Glass Card with Hover */
+.glass-card {
+  background: var(--bg-card);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: var(--glass-border);
+  border-radius: var(--radius-md);
+  transition: all var(--transition-normal);
+  padding: 1.5rem;
+  box-shadow: var(--shadow-sm);
+}
+
+.glass-card:hover {
+  transform: translateY(-4px);
+  background: var(--bg-glass-hover);
+  border-color: rgba(0, 0, 0, 0.1);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
+}
+
+/* Premium Buttons */
+.btn-primary {
+  background: var(--primary);
+  color: #fff;
+  padding: 0.75rem 1.75rem;
+  border-radius: var(--radius-pill);
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  transition: all var(--transition-fast);
+  box-shadow: 0 4px 14px var(--primary-glow);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.btn-primary:hover {
+  background: var(--primary-hover);
+  transform: scale(1.02);
+  box-shadow: 0 6px 20px var(--primary-glow);
+}
+
+.btn-primary:active {
+  transform: scale(0.98);
+}
+
+.btn-glass {
+  background: rgba(0,0,0,0.03);
+  border: 1px solid rgba(0,0,0,0.08);
+  color: var(--text-main);
+  padding: 0.75rem 1.75rem;
+  border-radius: var(--radius-pill);
+  font-weight: 500;
+  transition: all var(--transition-fast);
+  backdrop-filter: blur(8px);
+}
+
+.btn-glass:hover {
+  background: rgba(0,0,0,0.06);
+  border-color: rgba(0,0,0,0.12);
+}
+
+/* Typography styles */
+.text-gradient {
+  background: linear-gradient(135deg, #1a1a20 0%, #6b6b7b 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.text-gradient-primary {
+  background: linear-gradient(135deg, var(--primary) 0%, #ff8a8e 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Layout Utilities */
+.app-container {
+  display: flex;
+  min-height: 100vh;
+  width: 100%;
+}
+
+.main-content {
+  flex: 1;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.4s ease-out forwards;
+}

frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/src/pages/AdminDashboard.jsx

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import { useAuth } from '../context/AuthContext';
+import { useNavigate } from 'react-router-dom';
+import { LayoutDashboard, Utensils, Box, PieChart, LogOut, DollarSign, UtensilsCrossed, Users, Settings, Save, ShieldCheck, Truck } from 'lucide-react';
+import DashboardOverview from '../components/admin/DashboardOverview';
+import MenuEditor from '../components/admin/MenuEditor';
+import InventoryControl from '../components/admin/InventoryControl';
+import Reports from '../components/admin/Reports';
+import FinanceManager from '../components/admin/FinanceManager';
+import UserManager from '../components/admin/UserManager';
+import TableManager from '../components/admin/TableManager';
+import CRMManager from '../components/admin/CRMManager';
+import SettingsPlus from '../components/admin/SettingsPlus';
+
+export default function AdminDashboard() {
+  const { logout, currentUser } = useAuth();
+  const navigate = useNavigate();
+  const [activeTab, setActiveTab] = useState('overview');
+
+  const handleLogout = async () => {
+    await logout();
+    navigate('/login');
+  };
+
+  const navItems = [
+    { id: 'overview', label: 'Resumen', icon: <LayoutDashboard size={20} /> },
+    { id: 'menu', label: 'Menú & Precios', icon: <Utensils size={20} /> },
+    { id: 'inventory', label: 'Control de Stock', icon: <Box size={20} /> },
+    { id: 'reports', label: 'Reportes y Analítica', icon: <PieChart size={20} /> },
+    { id: 'cash', label: 'Finanzas & Caja', icon: <DollarSign size={20} /> },
+    { id: 'users', label: 'Gestión de Personal', icon: <Users size={20} /> },
+    { id: 'tables', label: 'Arquitectura Salón', icon: <LayoutDashboard size={20} /> },
+    { id: 'crm', label: 'CRM & Operaciones', icon: <Truck size={20} /> },
+    { id: 'settings', label: 'Configuración ERP', icon: <Settings size={20} /> },
+    { id: 'kitchen', label: 'Pantalla Cocina', icon: <UtensilsCrossed size={20} />, action: () => window.open('/kitchen', '_blank') },
+    { id: 'menu_public', label: 'Carta Digital', icon: <Utensils size={20} />, action: () => window.open('/menu', '_blank') }
+  ];
+
+  return (
+    <div className="app-container">
+      {/* Sidebar */}
+      <aside className="glass-panel" style={{ width: '280px', borderRadius: '0', borderRight: '1px solid var(--border-subtle)', display: 'flex', flexDirection: 'column' }}>
+        <div style={{ padding: '2rem 1.5rem', borderBottom: '1px solid var(--border-subtle)' }}>
+          <h1 className="text-gradient" style={{ fontSize: '1.5rem', fontWeight: '800' }}>RESTO PLUS</h1>
+          <p style={{ color: 'var(--text-muted)', fontSize: '0.85rem', marginTop: '0.25rem' }}>Sistema ERP Inteligente</p>
+        </div>
+
+        <nav style={{ flex: 1, padding: '1.5rem 1rem', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+          {navItems.map(item => (
+             <button
+              key={item.id}
+              onClick={() => {
+                if (item.action) item.action();
+                else setActiveTab(item.id);
+              }}
+              style={{
+                display: 'flex', alignItems: 'center', gap: '1rem', padding: '0.8rem 1rem', width: '100%',
+                borderRadius: 'var(--radius-sm)', transition: 'all var(--transition-fast)',
+                background: activeTab === item.id ? 'rgba(255,90,95,0.1)' : 'transparent',
+                color: activeTab === item.id ? 'var(--primary)' : 'var(--text-muted)',
+                fontWeight: activeTab === item.id ? '600' : '500',
+                borderLeft: activeTab === item.id ? '3px solid var(--primary)' : '3px solid transparent'
+              }}
+            >
+              {item.icon}
+              {item.label}
+            </button>
+          ))}
+        </nav>
+
+        <div style={{ padding: '1.5rem 1rem' }}>
+          <button onClick={handleLogout} className="btn-glass" style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem' }}>
+            <LogOut size={18} /> Salir
+          </button>
+        </div>
+      </aside>
+
+      {/* Main Content Area */}
+      <main className="main-content" style={{ overflowY: 'auto', background: 'var(--bg-base)' }}>
+        <div className="animate-fade-in" style={{ width: '100%', maxWidth: '1200px', margin: '0 auto', padding: '2rem' }}>
+          {activeTab === 'overview' && <DashboardOverview />}
+          {activeTab === 'menu' && <MenuEditor />}
+          {activeTab === 'inventory' && <InventoryControl />}
+          {activeTab === 'reports' && <Reports />}
+          {activeTab === 'cash' && <FinanceManager />}
+          {activeTab === 'users' && <UserManager />}
+          {activeTab === 'tables' && <TableManager />}
+          {activeTab === 'crm' && <CRMManager />}
+          {activeTab === 'settings' && <SettingsPlus />}
+        </div>
+      </main>
+    </div>
+  );
+}

frontend/src/pages/CustomerMenu.jsx

@@ -0,0 +1,210 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { db } from '../firebase/config';
+import { ref, onValue } from 'firebase/database';
+import { Utensils, Star, Clock, MapPin, ChefHat, Instagram, Facebook, ArrowRight } from 'lucide-react';
+
+export default function CustomerMenu() {
+  const [menuItems, setMenuItems] = useState([]);
+  const [categories, setCategories] = useState([]);
+  const [activeCategory, setActiveCategory] = useState('Todos');
+  const [menuTheme, setMenuTheme] = useState('light'); // 'dark' or 'light'
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // Escuchar el menú
+    const menuRef = ref(db, 'menu');
+    onValue(menuRef, (snapshot) => {
+      const data = snapshot.val();
+      if (data) {
+        const list = Object.keys(data).map(id => ({ id, ...data[id] })).filter(item => item.active !== false);
+        setMenuItems(list);
+        
+        const cats = [...new Set(list.map(item => item.category))];
+        setCategories(['Todos', ...cats]);
+      }
+    });
+
+    // Escuchar el tema configurado por el admin
+    const themeRef = ref(db, 'config/menuTheme');
+    onValue(themeRef, (snapshot) => {
+      if (snapshot.exists()) {
+        setMenuTheme(snapshot.val());
+      }
+    });
+  }, []);
+
+  const filteredItems = activeCategory === 'Todos' 
+    ? menuItems 
+    : menuItems.filter(item => item.category === activeCategory);
+
+  const isDark = menuTheme === 'dark';
+  
+  const themeColors = {
+    bg: isDark ? '#0a0a0a' : '#ffffff',
+    text: isDark ? '#ffffff' : '#1a1a1a',
+    muted: isDark ? 'rgba(255,255,255,0.6)' : 'rgba(0,0,0,0.6)',
+    card: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.02)',
+    border: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)',
+    accent: '#FF6B6B'
+  };
+
+  return (
+    <div style={{ 
+      minHeight: '100vh', 
+      background: themeColors.bg, 
+      color: themeColors.text, 
+      fontFamily: "'Outfit', sans-serif",
+      transition: 'all 0.5s ease'
+    }}>
+      
+      {/* Hero Section */}
+      <section style={{ 
+        height: '60vh', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center',
+        background: `linear-gradient(rgba(0,0,0,${isDark ? 0.7 : 0.4}), rgba(0,0,0,${isDark ? 0.7 : 0.4})), url('https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?auto=format&fit=crop&q=80&w=2070')`,
+        backgroundSize: 'cover', backgroundPosition: 'center'
+      }}>
+        <div style={{ textAlign: 'center', padding: '0 20px' }} className="animate-slide-up">
+          <h1 style={{ fontSize: '4rem', fontWeight: '900', marginBottom: '1rem', letterSpacing: '-2px' }}>Gourmet Experience</h1>
+          <p style={{ fontSize: '1.25rem', opacity: 0.9, maxWidth: '600px', margin: '0 auto' }}>Descubre una fusión de sabores únicos, preparados con pasión y los ingredientes más frescos.</p>
+          <div style={{ marginTop: '2rem', display: 'flex', gap: '1rem', justifyContent: 'center' }}>
+            <button onClick={() => navigate('/login')} className="btn-primary" style={{ padding: '12px 30px', borderRadius: '30px' }}>
+              Reservar Mesa <ArrowRight size={18} style={{ marginLeft: '10px' }} />
+            </button>
+          </div>
+        </div>
+        
+        {/* Badges */}
+        <div style={{ 
+          position: 'absolute', bottom: '-40px', left: '50%', transform: 'translateX(-50%)',
+          display: 'flex', gap: '30px', width: '100%', justifyContent: 'center', maxWidth: '800px'
+        }}>
+          {[
+            { icon: <Star size={20} />, text: "4.9 Estrellas" },
+            { icon: <Clock size={20} />, text: "30-45 min" },
+            { icon: <MapPin size={20} />, text: "Centro Histórico" }
+          ].map((badge, i) => (
+            <div key={i} className="glass-card" style={{ 
+              padding: '15px 25px', borderRadius: '15px', display: 'flex', alignItems: 'center', gap: '10px',
+              background: isDark ? 'rgba(30,30,30,0.8)' : 'rgba(255,255,255,0.9)',
+              color: isDark ? '#fff' : '#1a1a1a', border: `1px solid ${themeColors.border}`,
+              boxShadow: '0 10px 30px rgba(0,0,0,0.1)'
+            }}>
+              <span style={{ color: themeColors.accent }}>{badge.icon}</span>
+              <span style={{ fontWeight: '600', fontSize: '0.9rem' }}>{badge.text}</span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Menu Section */}
+      <section style={{ maxWidth: '1200px', margin: '100px auto', padding: '0 20px' }}>
+        <div style={{ textAlign: 'center', marginBottom: '60px' }}>
+          <h2 style={{ fontSize: '2.5rem', fontWeight: '800', marginBottom: '1rem' }}>Nuestra Carta</h2>
+          <div style={{ width: '60px', height: '4px', background: themeColors.accent, margin: '0 auto', borderRadius: '2px' }}></div>
+        </div>
+
+        {/* Category Tabs */}
+        <div style={{ 
+          display: 'flex', justifyContent: 'center', gap: '10px', marginBottom: '50px', 
+          overflowX: 'auto', padding: '10px 0', scrollbarWidth: 'none' 
+        }}>
+          {categories.map(cat => (
+            <button
+              key={cat}
+              onClick={() => setActiveCategory(cat)}
+              style={{
+                padding: '12px 25px', borderRadius: '30px', border: 'none', cursor: 'pointer',
+                background: activeCategory === cat ? themeColors.accent : themeColors.card,
+                color: activeCategory === cat ? '#fff' : themeColors.text,
+                fontWeight: '600', transition: 'all 0.3s ease', whiteSpace: 'nowrap',
+                border: `1px solid ${activeCategory === cat ? themeColors.accent : themeColors.border}`
+              }}
+            >
+              {cat}
+            </button>
+          ))}
+        </div>
+
+        {/* Menu Grid */}
+        <div style={{ 
+          display: 'grid', 
+          gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))', 
+          gap: '30px' 
+        }}>
+          {filteredItems.map(item => (
+            <div key={item.id} className="glass-card" style={{ 
+              padding: '0', overflow: 'hidden', border: `1px solid ${themeColors.border}`,
+              background: themeColors.card, position: 'relative', transition: 'transform 0.3s ease'
+            }} onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-10px)'} onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}>
+              
+              {/* Dish Image */}
+              <div style={{ height: '240px', overflow: 'hidden', position: 'relative' }}>
+                <img 
+                  src={item.image || 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?auto=format&fit=crop&q=80&w=1760'} 
+                  alt={item.name} 
+                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                />
+                <div style={{ 
+                  position: 'absolute', top: '15px', right: '15px', 
+                  background: 'rgba(0,0,0,0.6)', color: '#fff', padding: '5px 15px', 
+                  borderRadius: '20px', fontWeight: '800', fontSize: '1.1rem', backdropFilter: 'blur(5px)'
+                }}>
+                  ${item.price}
+                </div>
+              </div>
+
+              {/* Dish Details */}
+              <div style={{ padding: '25px' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '10px' }}>
+                  <span style={{ fontSize: '0.75rem', textTransform: 'uppercase', color: themeColors.accent, fontWeight: '800', letterSpacing: '1px' }}>{item.category}</span>
+                </div>
+                <h3 style={{ fontSize: '1.4rem', fontWeight: '700', marginBottom: '10px' }}>{item.name}</h3>
+                <p style={{ color: themeColors.muted, fontSize: '0.95rem', lineHeight: '1.6' }}>Preparado con ingredientes frescos de la estación y el toque secreto de nuestro chef.</p>
+                <div style={{ marginTop: '20px', display: 'flex', gap: '15px' }}>
+                  <span style={{ fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '5px', color: themeColors.muted }}>
+                    <ChefHat size={16} /> Especialidad
+                  </span>
+                  <span style={{ fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '5px', color: themeColors.muted }}>
+                    <Clock size={16} /> 20 min
+                  </span>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer style={{ 
+        padding: '80px 20px', borderTop: `1px solid ${themeColors.border}`, 
+        background: isDark ? 'rgba(0,0,0,0.5)' : 'rgba(0,0,0,0.02)', textAlign: 'center' 
+      }}>
+        <div style={{ maxWidth: '600px', margin: '0 auto' }}>
+          <h2 style={{ fontSize: '1.8rem', fontWeight: '900', marginBottom: '1.5rem' }}>Restaurant OS</h2>
+          <p style={{ color: themeColors.muted, marginBottom: '30px' }}>Siguenos en nuestras redes sociales para estar al tanto de nuestras promociones y eventos especiales.</p>
+          <div style={{ display: 'flex', justifyContent: 'center', gap: '20px' }}>
+            <button onClick={() => {}} style={{ background: 'none', border: 'none', color: themeColors.text, cursor: 'pointer' }}><Instagram size={24} /></button>
+            <button onClick={() => {}} style={{ background: 'none', border: 'none', color: themeColors.text, cursor: 'pointer' }}><Facebook size={24} /></button>
+          </div>
+          <div style={{ marginTop: '50px', fontSize: '0.85rem', color: themeColors.muted }}>
+            © {new Date().getFullYear()} Gourmet Experience. Todos los derechos reservados.
+          </div>
+        </div>
+      </footer>
+
+      {/* Admin Quick Back (Floating) */}
+      <button 
+        onClick={() => navigate('/login')}
+        style={{
+          position: 'fixed', bottom: '30px', right: '30px', width: '50px', height: '50px', borderRadius: '50%',
+          background: themeColors.accent, color: '#fff', border: 'none', cursor: 'pointer',
+          boxShadow: '0 10px 20px rgba(0,0,0,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100
+        }}
+        title="Admin Login"
+      >
+        <Utensils size={24} />
+      </button>
+    </div>
+  );
+}

frontend/src/pages/KitchenView.jsx

@@ -0,0 +1,126 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { db } from '../firebase/config';
+import { ref, onValue, update } from 'firebase/database';
+import { useAuth } from '../context/AuthContext';
+import { useNavigate } from 'react-router-dom';
+import { CheckCircle, Clock, UtensilsCrossed, LogOut, ExternalLink, PlayCircle, Flame } from 'lucide-react';
+
+export default function KitchenView() {
+  const { logout } = useAuth();
+  const navigate = useNavigate();
+  const [orders, setOrders] = useState([]);
+  const lastOrderCount = useRef(0);
+
+  useEffect(() => {
+    const ordersRef = ref(db, 'orders');
+    onValue(ordersRef, (snapshot) => {
+      const data = snapshot.val();
+      if (data) {
+        const orderList = Object.keys(data).map(k => ({ id: k, ...data[k] }))
+          .filter(o => o.status !== 'completed')
+          .sort((a, b) => b.timestamp - a.timestamp);
+        
+        // Alerta de sonido si hay nuevas órdenes
+        if (orderList.length > lastOrderCount.current) {
+            playNotificationSound();
+        }
+        lastOrderCount.current = orderList.length;
+        setOrders(orderList);
+      } else {
+        setOrders([]);
+      }
+    });
+  }, []);
+
+  const playNotificationSound = () => {
+    const audio = new Audio('https://assets.mixkit.co/active_storage/sfx/2869/2869-preview.mp3');
+    audio.play().catch(e => console.log("User interaction required for audio"));
+  };
+
+  const updateStatus = async (id, status) => {
+    await update(ref(db, `orders/${id}`), { status });
+  };
+
+  const handleLogout = async () => {
+    await logout();
+    navigate('/login');
+  };
+
+  return (
+    <div className="app-container" style={{ flexDirection: 'column', background: 'var(--bg-base)', height: '100vh', overflow: 'hidden' }}>
+      <header className="glass-panel" style={{ padding: '1rem 2.5rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderRadius: '0', borderBottom: '1px solid var(--border-subtle)' }}>
+        <h1 className="text-gradient" style={{ fontSize: '1.5rem', fontWeight: '800', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+          <UtensilsCrossed size={24} /> KDS - Centro de Cocina
+        </h1>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '1.5rem' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', color: 'var(--success)', fontSize: '0.9rem' }}>
+            <div style={{ width: '8px', height: '8px', background: 'var(--success)', borderRadius: '50%', boxShadow: '0 0 10px var(--success)' }}></div>
+            En Vivo
+          </div>
+          <button className="btn-glass" onClick={handleLogout} style={{ padding: '0.5rem 1rem', color: 'var(--primary)' }}>
+            <LogOut size={16} /> Salir
+          </button>
+        </div>
+      </header>
+
+      <div className="main-content" style={{ padding: '2rem', display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: '1.5rem', overflowY: 'auto' }}>
+        {orders.length === 0 ? (
+          <div style={{ gridColumn: '1 / -1', textAlign: 'center', paddingTop: '10vh', color: 'var(--text-muted)' }}>
+             <UtensilsCrossed size={60} style={{ opacity: 0.1, marginBottom: '1rem' }} />
+             <h2 style={{ fontSize: '1.5rem' }}>Cocina Despejada</h2>
+             <p>No hay pedidos en espera.</p>
+          </div>
+        ) : (
+          orders.map((order) => (
+            <div key={order.id} className="glass-card animate-fade-in" style={{ 
+                padding: '1.5rem', 
+                borderLeft: order.status === 'preparing' ? '4px solid var(--warning)' : '4px solid var(--primary)',
+                background: order.status === 'preparing' ? 'rgba(255,160,0,0.05)' : 'var(--bg-card)',
+                boxShadow: 'var(--shadow-sm)'
+            }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '1.25rem', alignItems: 'center' }}>
+                <span style={{ fontSize: '1.2rem', fontWeight: '800', color: order.status === 'preparing' ? 'var(--warning)' : 'var(--primary)' }}>
+                    {order.table} {order.type === 'Llevar' && '🛍️'} {order.type === 'Delivery' && '🚀'}
+                </span>
+                <span style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>
+                  {Math.floor((Date.now() - order.timestamp) / 60000)} min atrás
+                </span>
+              </div>
+              
+              <div style={{ marginBottom: '1.5rem', minHeight: '80px' }}>
+                {order.items.map((item, idx) => (
+                  <div key={idx} style={{ display: 'flex', justifyContent: 'space-between', padding: '0.5rem 0', borderBottom: '1px solid var(--border-subtle)' }}>
+                    <span style={{ fontWeight: '600' }}><span style={{ color: 'var(--primary)', fontWeight: '800' }}>{item.qty}</span> {item.name}</span>
+                  </div>
+                ))}
+              </div>
+
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}>
+                {order.status !== 'preparing' ? (
+                    <button 
+                        className="btn-glass" 
+                        onClick={() => updateStatus(order.id, 'preparing')}
+                        style={{ background: 'rgba(255,160,0,0.1)', color: '#FFB000' }}
+                    >
+                        <Flame size={18} /> Preparar
+                    </button>
+                ) : (
+                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '0.8rem', color: 'var(--warning)', fontWeight: '700' }}>
+                        ENCENDIDO...
+                    </div>
+                )}
+                <button 
+                    className="btn-primary" 
+                    onClick={() => updateStatus(order.id, 'completed')}
+                    style={{ background: 'var(--success)', color: '#fff' }}
+                >
+                    <CheckCircle size={18} /> Listo
+                </button>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Login.jsx

@@ -0,0 +1,181 @@
+import React, { useState } from 'react';
+import { useAuth } from '../context/AuthContext';
+import { useNavigate } from 'react-router-dom';
+import { User, ShieldCheck, Utensils, ArrowRightCircle } from 'lucide-react';
+
+export default function Login() {
+  const [email, setEmail] = useState('admin@rest-os.com');
+  const [password, setPassword] = useState('admin-password123');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [loginMode, setLoginMode] = useState('admin'); // 'admin' or 'mesero'
+
+  const { login, currentUser } = useAuth();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    
+    // Si ya hay una sesión activa, simplemente navegar
+    if (currentUser && currentUser.email === email) {
+      const targetRole = email.includes('admin') ? 'admin' : 'mesero';
+      navigate(targetRole === 'admin' ? '/admin' : '/pos');
+      setLoading(false);
+      return;
+    }
+
+    try {
+      await login(email, password);
+      // navigation is handled by RootRedirect in App.jsx
+    } catch (err) {
+      setError('Credenciales inválidas. Por favor intente de nuevo.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const setDemo = (role) => {
+    if (role === 'admin') {
+      setEmail('admin@rest-os.com');
+      setPassword('admin-password123');
+      setLoginMode('admin');
+    } else {
+      setEmail('mesero@rest-os.com');
+      setPassword('mesero-password123');
+      setLoginMode('mesero');
+    }
+  };
+
+  return (
+    <div className="app-container" style={{
+      background: 'var(--bg-base)',
+      justifyContent: 'center', alignItems: 'center', minHeight: '100vh', padding: '20px'
+    }}>
+      {/* Icono de Ver Menú Público */}
+      <button
+        onClick={() => navigate('/menu')}
+        className="glass-card animate-fade-in"
+        style={{
+          position: 'absolute', top: '30px', right: '30px', padding: '12px 24px',
+          display: 'flex', alignItems: 'center', gap: '10px', color: 'var(--primary)',
+          cursor: 'pointer', border: '1px solid rgba(255,107,107,0.3)',
+          zIndex: 10
+        }}
+      >
+        <Utensils size={20} />
+        <span style={{ fontWeight: '600' }}>Ver Carta Digital</span>
+        <ArrowRightCircle size={18} />
+      </button>
+
+      <div className="glass-panel animate-slide-up" style={{
+        maxWidth: '900px', width: '100%', padding: '0', display: 'flex',
+        overflow: 'hidden', boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)'
+      }}>
+
+        {/* Lado Izquierdo: Selección de Rol */}
+        <div style={{
+          width: '35%', background: 'rgba(0,0,0,0.02)',
+          borderRight: '1px solid var(--border-subtle)', padding: '40px 30px',
+          display: 'flex', flexDirection: 'column', gap: '20px'
+        }}>
+          <h2 style={{ fontSize: '1.4rem', fontWeight: '800', marginBottom: '10px' }}>Bienvenido</h2>
+          <p style={{ color: 'var(--text-muted)', fontSize: '0.9rem', marginBottom: '20px' }}>Seleccione su rol para ingresar al sistema</p>
+
+          <button
+            onClick={() => { setDemo('admin'); setError(''); }}
+            style={{
+              padding: '20px', borderRadius: 'var(--radius-sm)', border: '1px solid',
+              borderColor: loginMode === 'admin' ? 'var(--primary)' : 'transparent',
+              background: loginMode === 'admin' ? 'rgba(255,107,107,0.1)' : 'rgba(255,255,255,0.02)',
+              display: 'flex', alignItems: 'center', gap: '15px', textAlign: 'left',
+              transition: 'all 0.3s ease', cursor: 'pointer'
+            }}
+          >
+            <div style={{
+              padding: '10px', borderRadius: '10px',
+              background: loginMode === 'admin' ? 'var(--primary)' : 'rgba(255,255,255,0.05)',
+              color: loginMode === 'admin' ? '#fff' : 'var(--text-muted)'
+            }}>
+              <ShieldCheck size={24} />
+            </div>
+            <div>
+              <div style={{ fontWeight: '700', color: loginMode === 'admin' ? 'var(--text-main)' : 'var(--text-muted)' }}>Administrador</div>
+              <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>Gestión y Reportes</div>
+            </div>
+          </button>
+
+          <button
+            onClick={() => { setDemo('mesero'); setError(''); }}
+            style={{
+              padding: '20px', borderRadius: 'var(--radius-sm)', border: '1px solid',
+              borderColor: loginMode === 'mesero' ? 'var(--primary)' : 'transparent',
+              background: loginMode === 'mesero' ? 'rgba(255,107,107,0.1)' : 'rgba(255,255,255,0.02)',
+              display: 'flex', alignItems: 'center', gap: '15px', textAlign: 'left',
+              transition: 'all 0.3s ease', cursor: 'pointer'
+            }}
+          >
+            <div style={{
+              padding: '10px', borderRadius: '10px',
+              background: loginMode === 'mesero' ? 'var(--primary)' : 'rgba(255,255,255,0.05)',
+              color: loginMode === 'mesero' ? '#fff' : 'var(--text-muted)'
+            }}>
+              <User size={24} />
+            </div>
+            <div>
+              <div style={{ fontWeight: '700', color: loginMode === 'mesero' ? 'var(--text-main)' : 'var(--text-muted)' }}>Mesero / POS</div>
+              <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>Pedidos y Control</div>
+            </div>
+          </button>
+        </div>
+
+        {/* Lado Derecho: Formulario de Login */}
+        <div style={{ flex: 1, padding: '60px' }}>
+          <div style={{ marginBottom: '40px' }}>
+            <h1 className="text-gradient" style={{ fontSize: '2.5rem', fontWeight: '900', marginBottom: '10px' }}>
+              {loginMode === 'admin' ? 'Dashboard Admin' : 'Terminal Meseros'}
+            </h1>
+            <p style={{ color: 'var(--text-muted)' }}>Ingrese sus credenciales para continuar</p>
+          </div>
+
+          {error && (
+            <div className="glass-card" style={{ padding: '10px 20px', background: 'rgba(255,90,95,0.1)', border: '1px solid var(--primary)', borderRadius: 'var(--radius-sm)', marginBottom: '20px', color: 'var(--primary)', fontSize: '0.9rem' }}>
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+            <div>
+              <label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9rem', color: 'var(--text-muted)' }}>Correo Electrónico</label>
+              <input
+                type="email" required value={email} onChange={(e) => setEmail(e.target.value)}
+                style={{ width: '100%', padding: '14px', borderRadius: '10px', background: 'rgba(0,0,0,0.03)', border: '1px solid var(--border-subtle)', color: 'var(--text-main)' }}
+              />
+            </div>
+            <div>
+              <label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9rem', color: 'var(--text-muted)' }}>Contraseña</label>
+              <input
+                type="password" required value={password} onChange={(e) => setPassword(e.target.value)}
+                style={{ width: '100%', padding: '14px', borderRadius: '10px', background: 'rgba(0,0,0,0.03)', border: '1px solid var(--border-subtle)', color: 'var(--text-main)' }}
+              />
+            </div>
+            <button type="submit" className="btn-primary" style={{ height: '55px', fontSize: '1.1rem', marginTop: '10px' }} disabled={loading}>
+              {loading ? 'Validando...' : 'Iniciar Sesión'}
+            </button>
+          </form>
+
+          {/* Botón Demo rápido */}
+          <div style={{ marginTop: '30px', textAlign: 'center' }}>
+            <button
+              onClick={() => setDemo(loginMode)}
+              style={{ background: 'none', border: 'none', color: 'var(--text-muted)', cursor: 'pointer', textDecoration: 'underline', fontSize: '0.85rem' }}
+            >
+              Usar cuenta de prueba para {loginMode === 'admin' ? 'Admin' : 'Mesero'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/WaiterPOS.jsx

@@ -0,0 +1,453 @@
+import React, { useState, useEffect } from 'react';
+import { useAuth } from '../context/AuthContext';
+import { useNavigate } from 'react-router-dom';
+import { db } from '../firebase/config';
+import { ref, onValue, push, set } from 'firebase/database';
+import { LogOut, Coffee, Send, Trash2, ShoppingBag, Truck, Receipt, CheckCircle, XCircle, CreditCard, Banknote, QrCode } from 'lucide-react';
+
+export default function WaiterPOS() {
+  const { logout, currentUser } = useAuth();
+  const navigate = useNavigate();
+  const [menu, setMenu] = useState([]);
+  const [activeTable, setActiveTable] = useState(null);
+  const [cart, setCart] = useState([]);
+  const [orderType, setOrderType] = useState('Mesa'); // Mesa, Llevar, Delivery
+  const [discount, setDiscount] = useState(0);
+  const [tip, setTip] = useState(0);
+  const [paymentMethod, setPaymentMethod] = useState('Efectivo');
+  const [isCheckoutOpen, setIsCheckoutOpen] = useState(false);
+  const [customerData, setCustomerData] = useState({ name: '', email: '', phone: '', address: '' });
+
+  // Fetch Menu
+  useEffect(() => {
+    onValue(ref(db, 'menu'), (snapshot) => {
+      const data = snapshot.val();
+      if (data) {
+        setMenu(Object.keys(data).map(k => ({ id: k, ...data[k] })));
+      }
+    });
+  }, []);
+
+  const handleLogout = async () => {
+    await logout();
+    navigate('/login');
+  };
+
+  const addToCart = (product) => {
+    if (!activeTable && orderType === 'Mesa') {
+      alert("Selecciona una mesa primero.");
+      return;
+    }
+    const existing = cart.find(item => item.id === product.id);
+    if (existing) {
+      setCart(cart.map(item => item.id === product.id ? { ...item, qty: item.qty + 1 } : item));
+    } else {
+      setCart([...cart, { ...product, qty: 1 }]);
+    }
+  };
+
+  const removeFromCart = (id) => {
+    setCart(cart.filter(item => item.id !== id));
+  };
+
+  const subtotal = cart.reduce((acc, item) => acc + (item.price * item.qty), 0);
+  const discountAmount = (subtotal * discount) / 100;
+  const totalCart = subtotal - discountAmount + Number(tip || 0);
+
+  const sendOrder = async () => {
+    if ((orderType === 'Mesa' && !activeTable) || cart.length === 0) return;
+    const orderRef = push(ref(db, 'orders'));
+    const orderData = {
+      table: orderType === 'Mesa' ? activeTable : orderType,
+      type: orderType,
+      waiter: currentUser?.email,
+      customerName: customerData.name || 'Consumidor Final',
+      customerEmail: customerData.email || 'anonimo@rest.os',
+      address: customerData.address || '',
+      items: cart,
+      subtotal,
+      discount,
+      tip,
+      total: totalCart,
+      paymentMethod: paymentMethod,
+      status: 'pending',
+      timestamp: Date.now()
+    };
+
+    await set(orderRef, orderData);
+    
+    if (!isCheckoutOpen) {
+        setCart([]);
+        setActiveTable(null);
+        setCustomerData({ name: '', email: '', phone: '', address: '' });
+        alert('¡Comanda enviada a cocina exitosamente!');
+    } else {
+        // Finalizar y descontar stock
+        await set(ref(db, `orders/${orderRef.key}/status`), 'completed');
+        
+        // Lógica de Descuento de Inventario
+        for (const item of cart) {
+            const productRef = ref(db, `menu/${item.id}`);
+            onValue(productRef, async (snapshot) => {
+                const product = snapshot.val();
+                if (product && product.ingredients) {
+                    for (const ing of product.ingredients) {
+                        onValue(ref(db, `inventory/${ing.id}`), async (invSnap) => {
+                            const invData = invSnap.val();
+                            if (invData) {
+                                const newQty = invData.quantity - (item.qty * ing.qty);
+                                await update(ref(db, `inventory/${ing.id}`), { quantity: newQty });
+                            }
+                        }, { onlyOnce: true });
+                    }
+                }
+            }, { onlyOnce: true });
+        }
+
+        setIsCheckoutOpen(false);
+        setCart([]);
+        setActiveTable(null);
+        setCustomerData({ name: '', email: '', phone: '', address: '' });
+        alert('¡Venta realizada y stock actualizado!');
+    }
+  };
+
+  const printTicket = () => {
+    const printWindow = window.open('', '_blank');
+    printWindow.document.write(`
+      <html>
+        <head><title>Ticket de Venta</title></head>
+        <body style="font-family: monospace; width: 300px; padding: 20px;">
+          <h2 style="text-align: center;">RESTAURANT OS</h2>
+          <hr/>
+          <p>Mesa: ${activeTable || orderType}</p>
+          <p>Fecha: ${new Date().toLocaleString()}</p>
+          <hr/>
+          ${cart.map(item => `<p>${item.qty}x ${item.name.padEnd(20)} $${(item.price * item.qty).toFixed(2)}</p>`).join('')}
+          <hr/>
+          <p>Subtotal: $${subtotal.toFixed(2)}</p>
+          <p>Descuento (${discount}%): -$${discountAmount.toFixed(2)}</p>
+          <p>Propina: $${Number(tip || 0).toFixed(2)}</p>
+          <h3 style="text-align: right;">Total: $${totalCart.toFixed(2)}</h3>
+          <p style="text-align: center;">¡Gracias por su visita!</p>
+        </body>
+      </html>
+    `);
+    printWindow.document.close();
+    printWindow.print();
+  };
+
+  return (
+    <div className="app-container" style={{ display: 'flex', flexDirection: 'column', height: '100vh', overflow: 'hidden' }}>
+      {/* Navbar */}
+      <header className="glass-panel" style={{ padding: '1rem 2rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderRadius: '0', borderBottom: '1px solid var(--border-subtle)', background: 'var(--bg-base)' }}>
+        <h1 className="text-gradient" style={{ fontSize: '1.5rem', fontWeight: '800' }}>RESTO PLUS POS</h1>
+        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+          <span style={{ color: 'var(--text-muted)', fontSize: '0.9rem' }}>{currentUser?.email}</span>
+          <button className="btn-glass" onClick={() => window.open('/menu', '_blank')} style={{ padding: '0.5rem 1rem' }}>Carta Digital</button>
+          <button className="btn-glass" onClick={() => window.open('/kitchen', '_blank')} style={{ padding: '0.5rem 1rem' }}>Cocina</button>
+          <button className="btn-glass" onClick={handleLogout} style={{ padding: '0.5rem 1rem', display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+            <LogOut size={16} /> Salir
+          </button>
+        </div>
+      </header>
+
+      <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
+        {/* Left Column: Tables & Menu */}
+        <div style={{ flex: '65%', padding: '1.5rem', overflowY: 'auto', background: 'rgba(255,255,255,0.01)' }}>
+          
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
+            <h2 className="text-gradient" style={{ fontSize: '1.25rem' }}>Tipo de Pedido</h2>
+            <div style={{ display: 'flex', gap: '0.5rem' }}>
+               {[
+                 { id: 'Mesa', icon: <Coffee size={18} /> },
+                 { id: 'Llevar', icon: <ShoppingBag size={18} /> },
+                 { id: 'Delivery', icon: <Truck size={18} /> }
+               ].map(type => (
+                 <button 
+                  key={type.id}
+                  onClick={() => { setOrderType(type.id); if(type.id !== 'Mesa') setActiveTable(null); }}
+                  className={orderType === type.id ? 'btn-primary' : 'btn-glass'}
+                  style={{ padding: '0.5rem 1rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}
+                 >
+                   {type.icon} {type.id}
+                 </button>
+               ))}
+            </div>
+          </div>
+
+          <div className="glass-card" style={{ padding: '1.25rem', marginBottom: '1.5rem', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '1rem' }}>
+            <div style={{ gridColumn: orderType === 'Delivery' ? 'span 2' : 'auto' }}>
+                <label style={{ fontSize: '0.7rem', color: 'var(--text-muted)' }}>Cliente / Mesa</label>
+                <input 
+                    type="text" placeholder="Nombre del Cliente" 
+                    value={customerData.name} onChange={e => setCustomerData({...customerData, name: e.target.value})}
+                    style={{ ...inputStyle, padding: '0.6rem' }} 
+                />
+            </div>
+            {orderType === 'Delivery' && (
+                <div style={{ gridColumn: 'span 2' }}>
+                    <label style={{ fontSize: '0.7rem', color: 'var(--text-muted)' }}>Dirección de Entrega</label>
+                    <input 
+                        type="text" placeholder="Calle, Número, Referencias" 
+                        value={customerData.address} onChange={e => setCustomerData({...customerData, address: e.target.value})}
+                        style={{ ...inputStyle, padding: '0.6rem' }} 
+                    />
+                </div>
+            )}
+            <div>
+                <label style={{ fontSize: '0.7rem', color: 'var(--text-muted)' }}>Email (Puntos)</label>
+                <input 
+                    type="email" placeholder="cliente@email.com" 
+                    value={customerData.email} onChange={e => setCustomerData({...customerData, email: e.target.value})}
+                    style={{ ...inputStyle, padding: '0.6rem' }} 
+                />
+            </div>
+          </div>
+
+          {orderType === 'Mesa' && (
+            <div style={{ display: 'flex', gap: '1rem', overflowX: 'auto', paddingBottom: '1rem', marginBottom: '1.5rem' }}>
+              {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(table => (
+                <button 
+                  key={table}
+                  onClick={() => setActiveTable(table)}
+                  style={{ 
+                    minWidth: '70px', height: '70px', borderRadius: 'var(--radius-lg)', 
+                    background: activeTable === table ? 'var(--primary)' : 'rgba(0,0,0,0.03)',
+                    border: activeTable === table ? '2px solid transparent' : '1px solid var(--border-subtle)',
+                    color: activeTable === table ? '#fff' : 'var(--text-main)',
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    fontWeight: '600', transition: 'all 0.2s', cursor: 'pointer',
+                    boxShadow: activeTable === table ? '0 4px 12px var(--primary-glow)' : 'none'
+                  }}
+                >
+                  {table}
+                </button>
+              ))}
+            </div>
+          )}
+
+          <h2 className="text-gradient" style={{ fontSize: '1.25rem', marginBottom: '1.5rem' }}>Catálogo de Productos</h2>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: '1rem' }}>
+            {menu.map(product => (
+              <button 
+                key={product.id} 
+                onClick={() => addToCart(product)}
+                className="glass-card" 
+                style={{ textAlign: 'left', padding: '1rem', borderColor: 'var(--border-subtle)', position: 'relative' }}
+              >
+                <p style={{ fontWeight: '600', marginBottom: '0.5rem', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                  {product.name}
+                </p>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <span style={{ color: 'var(--success)', fontWeight: '700' }}>${Number(product.price).toFixed(2)}</span>
+                    <span style={{ fontSize: '0.7rem', color: 'var(--text-muted)' }}>{product.category}</span>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Right Column: Order Details */}
+        <div style={{ flex: '35%', background: 'var(--bg-card)', borderLeft: '1px solid var(--border-subtle)', display: 'flex', flexDirection: 'column' }}>
+          <div style={{ padding: '1.5rem', borderBottom: '1px solid var(--border-subtle)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <h2 className="text-gradient" style={{ fontSize: '1.25rem' }}>
+              {orderType === 'Mesa' ? `Mesa ${activeTable || '?'}` : orderType}
+            </h2>
+            <button onClick={() => setCart([])} style={{ color: 'var(--danger)', fontSize: '0.8rem', background: 'none', border: 'none', cursor: 'not-allowed' }} disabled={cart.length === 0}>
+                Limpiar
+            </button>
+          </div>
+
+          <div style={{ flex: 1, overflowY: 'auto', padding: '1rem', display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+            {cart.map((item) => (
+              <div key={item.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0.75rem', background: 'rgba(0,0,0,0.02)', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)' }}>
+                <div style={{ flex: 1 }}>
+                  <div style={{ fontWeight: '600', fontSize: '0.95rem' }}>{item.name}</div>
+                  <div style={{ color: 'var(--text-muted)', fontSize: '0.85rem' }}>{item.qty} x ${item.price}</div>
+                </div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+                  <span style={{ fontWeight: '700' }}>${(item.qty * item.price).toFixed(2)}</span>
+                  <button onClick={() => removeFromCart(item.id)} style={{ color: 'var(--danger)', background: 'none', border: 'none', cursor: 'pointer' }}>
+                    <Trash2 size={16} />
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div style={{ padding: '1.5rem', borderTop: '1px solid var(--border-subtle)', background: 'rgba(0,0,0,0.03)' }}>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', marginBottom: '1rem', fontSize: '0.9rem', color: 'var(--text-muted)' }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                    <span>Subtotal:</span>
+                    <span>${subtotal.toFixed(2)}</span>
+                </div>
+                <div style={{ display: 'flex', justifyContent: 'space-between', color: 'var(--primary)' }}>
+                    <span>Descuento ({discount}%):</span>
+                    <span>-${discountAmount.toFixed(2)}</span>
+                </div>
+                {tip > 0 && (
+                    <div style={{ display: 'flex', justifyContent: 'space-between', color: 'var(--success)' }}>
+                        <span>Propina:</span>
+                        <span>+${Number(tip).toFixed(2)}</span>
+                    </div>
+                )}
+            </div>
+
+            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '1.4rem', fontWeight: '900', marginBottom: '1.5rem' }}>
+              <span>Total:</span>
+              <span className="text-gradient-primary">${totalCart.toFixed(2)}</span>
+            </div>
+
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+                <button 
+                className="btn-glass" 
+                onClick={sendOrder}
+                disabled={cart.length === 0 || (orderType === 'Mesa' && !activeTable)}
+                style={{ opacity: (cart.length === 0) ? 0.5 : 1, padding: '0.8rem' }}
+                >
+                <Send size={18} /> Comanda
+                </button>
+                <button 
+                className="btn-primary" 
+                onClick={() => setIsCheckoutOpen(true)}
+                disabled={cart.length === 0}
+                style={{ opacity: (cart.length === 0) ? 0.5 : 1, padding: '0.8rem' }}
+                >
+                <Receipt size={18} /> Pagar
+                </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Checkout Modal */}
+      {isCheckoutOpen && (
+        <div style={{ 
+            position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, 
+            background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(10px)',
+            display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000
+        }}>
+            <div className="glass-panel animate-scale-in" style={{ width: '100%', maxWidth: '500px', padding: '2.5rem' }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
+                    <h2 className="text-gradient" style={{ fontSize: '1.75rem' }}>Finalizar Venta</h2>
+                    <button onClick={() => setIsCheckoutOpen(false)} style={{ background: 'none', border: 'none', color: 'var(--text-muted)' }}>
+                        <XCircle size={28} />
+                    </button>
+                </div>
+
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+                    <div>
+                        <label style={{ display: 'block', fontSize: '0.9rem', marginBottom: '0.5rem', color: 'var(--text-muted)' }}>Descuento (%)</label>
+                        <select 
+                            value={discount} 
+                            onChange={(e) => setDiscount(Number(e.target.value))}
+                            style={{ width: '100%', padding: '0.8rem', background: 'rgba(255,255,255,0.05)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', color: '#fff' }}
+                        >
+                            <option value="0">Sin Descuento</option>
+                            <option value="5">5% Promo</option>
+                            <option value="10">10% Cortesía</option>
+                            <option value="15">15% Empleado</option>
+                            <option value="50">50% VIP</option>
+                        </select>
+                    </div>
+
+                    <div>
+                        <label style={{ display: 'block', fontSize: '0.9rem', marginBottom: '0.5rem', color: 'var(--text-muted)' }}>Propina (Efectivo/Sugerida)</label>
+                        <input 
+                            type="number" 
+                            placeholder="$ 0.00"
+                            value={tip}
+                            onChange={(e) => setTip(e.target.value)}
+                            style={{ width: '100%', padding: '0.8rem', background: 'rgba(0,0,0,0.03)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', color: 'var(--text-main)' }}
+                        />
+                    </div>
+
+                    <div>
+                        <label style={{ display: 'block', fontSize: '0.9rem', marginBottom: '0.5rem', color: 'var(--text-muted)' }}>Método de Pago</label>
+                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '0.75rem' }}>
+                            {[
+                                { id: 'Efectivo', icon: <Banknote size={20} /> },
+                                { id: 'Tarjeta', icon: <CreditCard size={20} /> },
+                                { id: 'QR', icon: <QrCode size={20} /> }
+                            ].map(m => (
+                                <button 
+                                    key={m.id}
+                                    onClick={() => setPaymentMethod(m.id)}
+                                    className={paymentMethod === m.id ? 'btn-primary' : 'btn-glass'}
+                                    style={{ padding: '1rem 0.5rem', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem', fontSize: '0.8rem' }}
+                                >
+                                    {m.icon} {m.id}
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div style={{ background: 'rgba(255,255,255,0.02)', padding: '1.5rem', borderRadius: 'var(--radius-lg)', marginTop: '1rem', border: '1px dashed var(--border-subtle)' }}>
+                        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '1.5rem', fontWeight: '900' }}>
+                            <span>Total a Pagar:</span>
+                            <span className="text-gradient">${totalCart.toFixed(2)}</span>
+                        </div>
+                    </div>
+
+                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem', marginTop: '1rem' }}>
+                        <button className="btn-glass" onClick={printTicket} style={{ padding: '1rem' }}>
+                            <Receipt size={20} /> Preview Ticket
+                        </button>
+                        <button className="btn-primary" onClick={sendOrder} style={{ padding: '1rem' }}>
+                            <CheckCircle size={20} /> Confirmar Pago
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+      )}
+
+      <style>{`
+        .btn-glass {
+            background: rgba(0,0,0,0.03);
+            border: 1px solid var(--border-subtle);
+            color: var(--text-main);
+            border-radius: var(--radius-md);
+            cursor: pointer;
+            font-weight: 600;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+        }
+        .btn-glass:hover {
+            background: rgba(0,0,0,0.06);
+            transform: translateY(-2px);
+        }
+        .btn-primary {
+            background: var(--primary);
+            color: white;
+            border: none;
+            border-radius: var(--radius-md);
+            cursor: pointer;
+            font-weight: 600;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            box-shadow: 0 4px 12px var(--primary-glow);
+        }
+        .btn-primary:hover {
+            opacity: 0.9;
+            transform: translateY(-2px);
+            box-shadow: 0 6px 16px var(--primary-glow);
+        }
+        .animate-scale-in {
+            animation: scaleIn 0.3s ease-out;
+        }
+        @keyframes scaleIn {
+            from { transform: scale(0.9); opacity: 0; }
+            to { transform: scale(1); opacity: 1; }
+        }
+      `}</style>
+    </div>
+  );
+}

frontend/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "chart.js": "^4.5.1",
+    "firebase": "^12.11.0",
+    "lucide-react": "^0.577.0",
+    "react": "^19.2.4",
+    "react-chartjs-2": "^5.3.1",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.13.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "vite": "^6.0.0"
+  }
+}