Upload 47 files

src/components/admin/InventoryControl.jsx

@@ -79,6 +79,10 @@ export default function InventoryControl() {
             <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}>Mínimo</label>
+            <input type="number" value={formData.minStock} onChange={e => setFormData({...formData, minStock: e.target.value})} style={inputStyle} placeholder="10" />
+          </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" />

src/components/admin/MenuEditor.jsx

@@ -9,7 +9,7 @@ export default function MenuEditor() {
   const [inventory, setInventory] = useState([]);
   const [formData, setFormData] = useState({ 
     name: '', price: '', category: 'Principales', image: '', 
-    variants: [], ingredients: [] 
+    variants: [], ingredients: [], extras: [] 
   });
   const [editingItem, setEditingItem] = useState(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -55,7 +55,7 @@ export default function MenuEditor() {
     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: [] });
+    setFormData({ name: '', price: '', category: 'Principales', image: '', variants: [], ingredients: [], extras: [] });
   };
 
   const handleDelete = async (id) => {
@@ -68,6 +68,12 @@ export default function MenuEditor() {
     else setFormData({ ...formData, ingredients: [...formData.ingredients, newIng] });
   };
 
+  const addExtraToProduct = (isEditing) => {
+    const newExtra = { name: '', price: 0 };
+    if (isEditing) setEditingItem({ ...editingItem, extras: [...(editingItem.extras || []), newExtra] });
+    else setFormData({ ...formData, extras: [...(formData.extras || []), newExtra] });
+  };
+
   const handleSaveEdit = async () => {
     const { id, ...updates } = editingItem;
     await update(ref(db, `menu/${id}`), { ...updates, price: parseFloat(updates.price) });
@@ -146,6 +152,29 @@ export default function MenuEditor() {
             ))}
           </div>
         )}
+
+        <div style={{ marginTop: '1.5rem' }}>
+          <button type="button" onClick={() => addExtraToProduct(false)} className="btn-glass" style={{ padding: '0.5rem 1rem', fontSize: '0.85rem' }}>
+             <Plus size={16} /> Agregar Extra (Ej. Queso Extra)
+          </button>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem', marginTop: '1rem' }}>
+            {(formData.extras || []).map((ext, idx) => (
+              <div key={idx} className="glass-panel" style={{ padding: '0.5rem', display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+                <input type="text" placeholder="Extra" value={ext.name} onChange={e => {
+                  const newExts = [...formData.extras];
+                  newExts[idx].name = e.target.value;
+                  setFormData({...formData, extras: newExts});
+                }} style={{...inputStyle, padding: '0.4rem', width: '120px'}} />
+                <input type="number" placeholder="$" value={ext.price} onChange={e => {
+                  const newExts = [...formData.extras];
+                  newExts[idx].price = parseFloat(e.target.value);
+                  setFormData({...formData, extras: newExts});
+                }} style={{...inputStyle, padding: '0.4rem', width: '60px'}} />
+                <button type="button" onClick={() => setFormData({...formData, extras: formData.extras.filter((_, i) => i !== idx)})} style={{color: 'var(--primary)', background: 'none', border: 'none'}}><X size={16}/></button>
+              </div>
+            ))}
+          </div>
+        </div>
       </section>
 
       <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '1.5rem' }}>
@@ -211,6 +240,28 @@ export default function MenuEditor() {
                 </div>
               </div>
 
+              <div>
+                <label style={labelStyle}>Extras Sugeridos (Opcional)</label>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                  {(editingItem.extras || []).map((ext, i) => (
+                    <div key={i} style={{ display: 'flex', gap: '0.5rem' }}>
+                      <input type="text" placeholder="Extra" value={ext.name} onChange={e => {
+                        const exts = [...(editingItem.extras || [])];
+                        exts[i].name = e.target.value;
+                        setEditingItem({...editingItem, extras: exts});
+                      }} style={{...inputStyle, flex: 2}} />
+                      <input type="number" placeholder="$" value={ext.price} onChange={e => {
+                        const exts = [...(editingItem.extras || [])];
+                        exts[i].price = parseFloat(e.target.value);
+                        setEditingItem({...editingItem, extras: exts});
+                      }} style={{...inputStyle, flex: 1}} />
+                      <button onClick={() => setEditingItem({...editingItem, extras: editingItem.extras.filter((_, idx) => idx !== i)})} style={{color: 'var(--primary)'}}><Trash2 size={18} /></button>
+                    </div>
+                  ))}
+                  <button onClick={() => addExtraToProduct(true)} className="btn-glass" style={{ padding: '0.5rem', fontSize: '0.8rem' }}><Plus size={14} /> Añadir Extra</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'}

src/components/admin/Reports.jsx

@@ -6,7 +6,8 @@ import {
   LineElement, Title, Tooltip, Legend, BarElement
 } from 'chart.js';
 import { Line, Bar } from 'react-chartjs-2';
-import { TrendingUp, Package, Users as UsersIcon, Calendar } from 'lucide-react';
+import { TrendingUp, Package, Users as UsersIcon, Calendar, DollarSign, Plus, Trash2, Receipt } from 'lucide-react';
+import { push, set, remove } from 'firebase/database';
 
 ChartJS.register(
   CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, BarElement
@@ -16,6 +17,9 @@ export default function Reports() {
   const [salesData, setSalesData] = useState([0, 0, 0, 0, 0, 0, 0]);
   const [topProducts, setTopProducts] = useState({ labels: [], data: [] });
   const [stats, setStats] = useState({ totalSales: 0, orderCount: 0, avgTicket: 0 });
+  const [todaySummary, setTodaySummary] = useState({ Efectivo: 0, Tarjeta: 0, QR: 0 });
+  const [expenses, setExpenses] = useState([]);
+  const [newExpense, setNewExpense] = useState({ desc: '', amount: '', category: 'Insumos' });
 
   useEffect(() => {
     onValue(ref(db, 'orders'), (snapshot) => {
@@ -24,16 +28,22 @@ export default function Reports() {
         const orders = Object.values(data);
         const weeklySales = [0, 0, 0, 0, 0, 0, 0];
         const productCounts = {};
+        const todayPayments = { Efectivo: 0, Tarjeta: 0, QR: 0 };
         let total = 0;
+        const todayStr = new Date().toLocaleDateString();
 
         orders.forEach(order => {
             if (order.status === 'completed') {
                 total += order.total;
-                // Simple day mapping (last 7 days logic would be better but this is for demo)
-                const day = new Date(order.timestamp).getDay(); // 0-6
-                const index = (day + 6) % 7; // Map Mon-Sun
+                const orderDay = new Date(order.timestamp);
+                const day = orderDay.getDay(); 
+                const index = (day + 6) % 7;
                 weeklySales[index] += order.total;
 
+                if (orderDay.toLocaleDateString() === todayStr) {
+                    todayPayments[order.paymentMethod || 'Efectivo'] += order.total;
+                }
+
                 order.items.forEach(item => {
                     productCounts[item.name] = (productCounts[item.name] || 0) + item.qty;
                 });
@@ -41,6 +51,8 @@ export default function Reports() {
         });
 
         setSalesData(weeklySales);
+        setTodaySummary(todayPayments);
+        // ... (rest of the stats logic continues)
         setStats({
             totalSales: total,
             orderCount: orders.filter(o => o.status === 'completed').length,
@@ -56,9 +68,20 @@ export default function Reports() {
             data: sortedProducts.map(p => p[1])
         });
       }
+    onValue(ref(db, 'expenses'), (snapshot) => {
+        const data = snapshot.val();
+        setExpenses(data ? Object.keys(data).map(k => ({ id: k, ...data[k] })) : []);
     });
   }, []);
 
+  const handleAddExpense = async (e) => {
+    e.preventDefault();
+    if (!newExpense.desc || !newExpense.amount) return;
+    const expRef = push(ref(db, 'expenses'));
+    await set(expRef, { ...newExpense, amount: parseFloat(newExpense.amount), timestamp: Date.now() });
+    setNewExpense({ desc: '', amount: '', category: 'Insumos' });
+  };
+
   const lineData = {
     labels: ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'],
     datasets: [{

src/pages/WaiterPOS.jsx

@@ -16,6 +16,8 @@ export default function WaiterPOS() {
   const [tip, setTip] = useState(0);
   const [paymentMethod, setPaymentMethod] = useState('Efectivo');
   const [isCheckoutOpen, setIsCheckoutOpen] = useState(false);
+  const [tableStatuses, setTableStatuses] = useState({});
+  const [selectedCategory, setSelectedCategory] = useState('Todos');
 
   // Fetch Menu
   useEffect(() => {
@@ -25,6 +27,11 @@ export default function WaiterPOS() {
         setMenu(Object.keys(data).map(k => ({ id: k, ...data[k] })));
       }
     });
+
+    onValue(ref(db, 'tables'), (snapshot) => {
+      const data = snapshot.val();
+      if (data) setTableStatuses(data);
+    });
   }, []);
 
   const handleLogout = async () => {
@@ -32,19 +39,29 @@ export default function WaiterPOS() {
     navigate('/login');
   };
 
-  const addToCart = (product) => {
+  const addToCart = async (product) => {
     if (!activeTable && orderType === 'Mesa') {
       alert("Selecciona una mesa primero.");
       return;
     }
+    
+    // Mark table as occupied
+    if (orderType === 'Mesa' && activeTable) {
+        await set(ref(db, `tables/${activeTable}`), 'occupied');
+    }
+
     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 }]);
+      setCart([...cart, { ...product, qty: 1, note: '' }]);
     }
   };
 
+  const updateCartItemNote = (id, note) => {
+    setCart(cart.map(item => item.id === id ? { ...item, note } : item));
+  };
+
   const removeFromCart = (id) => {
     setCart(cart.filter(item => item.id !== id));
   };
@@ -80,7 +97,13 @@ export default function WaiterPOS() {
         // Finalizar y descontar stock
         await set(ref(db, `orders/${orderRef.key}/status`), 'completed');
         
+        // Mark table as free
+        if (orderType === 'Mesa' && activeTable) {
+            await set(ref(db, `tables/${activeTable}`), 'free');
+        }
+
         // Lógica de Descuento de Inventario
+        // ... (existing logic continues)
         for (const item of cart) {
             // Buscamos el producto en el menú para ver su receta (ingredients)
             // Nota: En un entorno real, esto se haría en el backend para evitar race conditions y asegurar integridad.
@@ -182,9 +205,9 @@ export default function WaiterPOS() {
                   onClick={() => setActiveTable(table)}
                   style={{ 
                     minWidth: '70px', height: '70px', borderRadius: 'var(--radius-lg)', 
-                    background: activeTable === table ? 'var(--primary)' : 'rgba(255,255,255,0.05)',
-                    border: activeTable === table ? '2px solid transparent' : '1px solid var(--border-subtle)',
-                    color: activeTable === table ? '#fff' : 'var(--text-main)',
+                    background: activeTable === table ? 'var(--primary)' : (tableStatuses[table] === 'occupied' ? 'rgba(255,90,95,0.2)' : 'rgba(255,255,255,0.05)'),
+                    border: activeTable === table ? '2px solid transparent' : (tableStatuses[table] === 'occupied' ? '1px solid var(--primary)' : '1px solid var(--border-subtle)'),
+                    color: activeTable === table ? '#fff' : (tableStatuses[table] === 'occupied' ? 'var(--primary)' : 'var(--text-main)'),
                     display: 'flex', alignItems: 'center', justifyContent: 'center',
                     fontWeight: '600', transition: 'all 0.2s', cursor: 'pointer'
                   }}
@@ -195,9 +218,25 @@ export default function WaiterPOS() {
             </div>
           )}
 
-          <h2 className="text-gradient" style={{ fontSize: '1.25rem', marginBottom: '1.5rem' }}>Catálogo de Productos</h2>
+          <h2 className="text-gradient" style={{ fontSize: '1.25rem', marginBottom: '1rem' }}>Catálogo de Productos</h2>
+          
+          <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1.5rem', overflowX: 'auto', paddingBottom: '0.5rem' }}>
+              {['Todos', ...new Set(menu.map(p => p.category))].map(cat => (
+                  <button 
+                    key={cat}
+                    onClick={() => setSelectedCategory(cat)}
+                    className={selectedCategory === cat ? 'btn-primary' : 'btn-glass'}
+                    style={{ padding: '0.4rem 1rem', fontSize: '0.85rem', whiteSpace: 'nowrap' }}
+                  >
+                      {cat}
+                  </button>
+              ))}
+          </div>
+
           <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: '1rem' }}>
-            {menu.map(product => (
+            {menu
+              .filter(p => selectedCategory === 'Todos' || p.category === selectedCategory)
+              .map(product => (
               <button 
                 key={product.id} 
                 onClick={() => addToCart(product)}
@@ -233,6 +272,13 @@ export default function WaiterPOS() {
                 <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>
+                  <input 
+                    type="text" 
+                    placeholder="Nota / Extra..." 
+                    value={item.note} 
+                    onChange={(e) => updateCartItemNote(item.id, e.target.value)}
+                    style={{ width: '100%', marginTop: '0.5rem', padding: '4px 8px', fontSize: '0.75rem', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '4px', color: '#fff' }}
+                  />
                 </div>
                 <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
                   <span style={{ fontWeight: '700' }}>${(item.qty * item.price).toFixed(2)}</span>