Upload 48 files

src/components/admin/EmployeeSchedules.jsx

@@ -0,0 +1,107 @@
+import React, { useState, useEffect } from 'react';
+import { db } from '../../firebase/config';
+import { ref, onValue, set } from 'firebase/database';
+import { Clock, Save, User as UserIcon } from 'lucide-react';
+
+export default function EmployeeSchedules() {
+  const [employees, setEmployees] = useState([]);
+  const [schedules, setSchedules] = useState({});
+
+  useEffect(() => {
+    // Fetch Employees (Users with role 'mesero' or 'admin')
+    onValue(ref(db, 'users'), (snapshot) => {
+      const data = snapshot.val();
+      if (data) {
+        setEmployees(Object.keys(data).map(k => ({ email: k.replace(',', '.'), ...data[k] })));
+      }
+    });
+
+    // Fetch Schedules
+    onValue(ref(db, 'schedules'), (snapshot) => {
+      if (snapshot.exists()) setSchedules(snapshot.val());
+    });
+  }, []);
+
+  const handleUpdateSchedule = async (email, field, value) => {
+    const safeEmail = email.replace(/\./g, ',');
+    await set(ref(db, `schedules/${safeEmail}/${field}`), value);
+  };
+
+  return (
+    <div className="animate-fade-in" style={{ padding: '0 1rem' }}>
+      <header style={{ marginBottom: '2rem' }}>
+        <h2 className="text-gradient" style={{ fontSize: '2rem', fontWeight: '800', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+          <Clock size={28} /> Control de Horarios
+        </h2>
+        <p style={{ color: 'var(--text-muted)' }}>Asignación de turnos y disponibilidad de personal</p>
+      </header>
+
+      <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' }}>Empleado</th>
+              <th style={{ padding: '1.25rem', color: 'var(--text-muted)', fontWeight: '500' }}>Rol</th>
+              <th style={{ padding: '1.25rem', color: 'var(--text-muted)', fontWeight: '500' }}>Entrada</th>
+              <th style={{ padding: '1.25rem', color: 'var(--text-muted)', fontWeight: '500' }}>Salida</th>
+              <th style={{ padding: '1.25rem', color: 'var(--text-muted)', fontWeight: '500' }}>Estado</th>
+            </tr>
+          </thead>
+          <tbody>
+            {employees.map((emp) => {
+              const safeEmail = emp.email.replace(/\./g, ',');
+              const sched = schedules[safeEmail] || { start: '09:00', end: '17:00' };
+              
+              return (
+                <tr key={emp.email} style={{ borderBottom: '1px solid var(--border-subtle)' }} className="table-row-hover">
+                  <td style={{ padding: '1.25rem' }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+                        <div style={{ width: '32px', height: '32px', borderRadius: '50%', background: 'var(--primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                            <UserIcon size={16} color="#fff" />
+                        </div>
+                        <span style={{ fontWeight: '600' }}>{emp.email}</span>
+                    </div>
+                  </td>
+                  <td style={{ padding: '1.25rem' }}>
+                    <span style={{ fontSize: '0.75rem', textTransform: 'uppercase', background: 'rgba(255,255,255,0.05)', padding: '4px 10px', borderRadius: '12px', color: 'var(--text-muted)' }}>
+                        {emp.role}
+                    </span>
+                  </td>
+                  <td style={{ padding: '1.25rem' }}>
+                    <input 
+                        type="time" 
+                        value={sched.start} 
+                        onChange={(e) => handleUpdateSchedule(emp.email, 'start', e.target.value)}
+                        style={inputStyle}
+                    />
+                  </td>
+                  <td style={{ padding: '1.25rem' }}>
+                    <input 
+                        type="time" 
+                        value={sched.end} 
+                        onChange={(e) => handleUpdateSchedule(emp.email, 'end', e.target.value)}
+                        style={inputStyle}
+                    />
+                  </td>
+                  <td style={{ padding: '1.25rem' }}>
+                    <span style={{ color: 'var(--success)', fontSize: '0.8rem', fontWeight: '600' }}>Activo</span>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+const inputStyle = {
+  padding: '0.5rem',
+  borderRadius: '6px',
+  background: 'rgba(255,255,255,0.05)',
+  border: '1px solid var(--border-subtle)',
+  color: '#fff',
+  outline: 'none',
+  fontSize: '0.9rem'
+};

src/components/admin/Reports.jsx

@@ -68,6 +68,8 @@ 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] })) : []);
@@ -151,6 +153,50 @@ export default function Reports() {
           </div>
         </div>
       </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: '2rem', marginTop: '2rem' }}>
+        {/* Arqueo de Caja */}
+        <div className="glass-card">
+          <h3 style={{ marginBottom: '1.5rem', fontSize: '1rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            <Receipt size={18} /> Arqueo de Caja (Hoy)
+          </h3>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+            {Object.entries(todaySummary).map(([method, amount]) => (
+                <div key={method} style={{ display: 'flex', justifyContent: 'space-between', padding: '1rem', background: 'rgba(255,255,255,0.02)', borderRadius: '8px' }}>
+                    <span style={{ color: 'var(--text-muted)' }}>{method}</span>
+                    <span style={{ fontWeight: '700' }}>${amount.toFixed(2)}</span>
+                </div>
+            ))}
+            <div style={{ padding: '1rem', marginTop: '0.5rem', background: 'rgba(76,217,100,0.1)', borderRadius: '8px', display: 'flex', justifyContent: 'space-between', border: '1px solid var(--success)' }}>
+                <span style={{ fontWeight: '700' }}>Corte Total Bruto:</span>
+                <span style={{ fontWeight: '900', color: 'var(--success)' }}>${Object.values(todaySummary).reduce((a,b) => a + b, 0).toFixed(2)}</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Registro de Gastos */}
+        <div className="glass-card">
+          <h3 style={{ marginBottom: '1.5rem', fontSize: '1rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            <DollarSign size={18} /> Registro de Egresos
+          </h3>
+          <form onSubmit={handleAddExpense} style={{ display: 'flex', gap: '0.5rem', marginBottom: '1.5rem' }}>
+              <input type="text" placeholder="Descripción" value={newExpense.desc} onChange={e => setNewExpense({...newExpense, desc: e.target.value})} style={{...inputStyle, flex: 2}} />
+              <input type="number" placeholder="$" value={newExpense.amount} onChange={e => setNewExpense({...newExpense, amount: e.target.value})} style={{...inputStyle, flex: 1}} />
+              <button type="submit" className="btn-primary" style={{ padding: '0 1rem' }}><Plus size={20}/></button>
+          </form>
+          <div style={{ maxHeight: '200px', overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+              {expenses.length === 0 ? <p style={{ color: 'var(--text-muted)', fontSize: '0.8rem', textAlign: 'center' }}>Sin gastos registrados</p> : 
+                expenses.map(exp => (
+                    <div key={exp.id} style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.85rem', padding: '0.5rem', borderBottom: '1px solid rgba(255,255,255,0.03)' }}>
+                        <span>{exp.desc}</span>
+                        <span style={{ color: 'var(--primary)', fontWeight: '600' }}>-${exp.amount.toFixed(2)}</span>
+                    </div>
+                ))
+              }
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
+
+const inputStyle = { width: '100%', padding: '0.7rem', borderRadius: '8px', background: 'rgba(255,255,255,0.05)', border: '1px solid var(--border-subtle)', color: '#fff', outline: 'none', fontSize: '0.9rem' };

src/pages/AdminDashboard.jsx

@@ -1,7 +1,7 @@
 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 } from 'lucide-react';
+import { LayoutDashboard, Utensils, Box, PieChart, LogOut, DollarSign, UtensilsCrossed, Users, Clock } from 'lucide-react';
 import DashboardOverview from '../components/admin/DashboardOverview';
 import MenuEditor from '../components/admin/MenuEditor';
 import InventoryControl from '../components/admin/InventoryControl';
@@ -9,6 +9,7 @@ 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 EmployeeSchedules from '../components/admin/EmployeeSchedules';
 
 export default function AdminDashboard() {
   const { logout, currentUser } = useAuth();
@@ -27,6 +28,7 @@ export default function AdminDashboard() {
     { id: 'reports', label: 'Reportes y Analítica', icon: <PieChart size={20} /> },
     { id: 'cash', label: 'Caja y Finanzas', icon: <DollarSign size={20} /> },
     { id: 'users', label: 'Equipo y Roles', icon: <Users size={20} /> },
+    { id: 'horarios', label: 'Horarios Personal', icon: <Clock size={20} /> },
     { id: 'tables', label: 'Diseño Salón', icon: <LayoutDashboard 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') }
@@ -80,6 +82,7 @@ export default function AdminDashboard() {
           {activeTab === 'reports' && <Reports />}
           {activeTab === 'cash' && <FinanceManager />}
           {activeTab === 'users' && <UserManager />}
+          {activeTab === 'horarios' && <EmployeeSchedules />}
           {activeTab === 'tables' && <TableManager />}
         </div>
       </main>

src/pages/CustomerMenu.jsx

@@ -1,14 +1,16 @@
 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';
+import { ref, onValue, push, set } from 'firebase/database';
+import { Utensils, Star, Clock, MapPin, ChefHat, Instagram, Facebook, ArrowRight, MessageSquare, Send } from 'lucide-react';
 
 export default function CustomerMenu() {
   const [menuItems, setMenuItems] = useState([]);
   const [categories, setCategories] = useState([]);
   const [activeCategory, setActiveCategory] = useState('Todos');
   const [menuTheme, setMenuTheme] = useState('dark'); // 'dark' or 'light'
+  const [feedback, setFeedback] = useState({ rating: 5, comment: '' });
+  const [submitted, setSubmitted] = useState(false);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -175,6 +177,63 @@ export default function CustomerMenu() {
         </div>
       </section>
 
+      {/* Feedback Section */}
+      <section style={{ maxWidth: '800px', margin: '100px auto', padding: '40px', textAlign: 'center' }}>
+          <div className="glass-card" style={{ padding: '3rem', border: `1px solid ${themeColors.border}`, background: themeColors.card }}>
+              {submitted ? (
+                  <div className="animate-fade-in">
+                      <Star size={50} color={themeColors.accent} fill={themeColors.accent} style={{ marginBottom: '1rem' }} />
+                      <h2 style={{ fontSize: '2rem', fontWeight: '800' }}>¡Gracias por tu Feedback!</h2>
+                      <p style={{ color: themeColors.muted, marginTop: '1rem' }}>Tu opinión nos ayuda a mejorar cada día.</p>
+                  </div>
+              ) : (
+                  <>
+                      <h2 style={{ fontSize: '2rem', fontWeight: '800', marginBottom: '1rem' }}>¿Qué te pareció tu visita?</h2>
+                      <p style={{ color: themeColors.muted, marginBottom: '2rem' }}>Déjanos tu comentario para seguir brindando la mejor calidad.</p>
+                      
+                      <div style={{ display: 'flex', justifyContent: 'center', gap: '10px', marginBottom: '2rem' }}>
+                          {[1,2,3,4,5].map(star => (
+                              <button 
+                                key={star} 
+                                onClick={() => setFeedback({...feedback, rating: star})}
+                                style={{ background: 'none', border: 'none', cursor: 'pointer', transition: 'transform 0.2s' }}
+                                onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.2)'}
+                                onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
+                              >
+                                  <Star size={32} color={star <= feedback.rating ? themeColors.accent : themeColors.muted} fill={star <= feedback.rating ? themeColors.accent : 'transparent'} />
+                              </button>
+                          ))}
+                      </div>
+
+                      <textarea 
+                          placeholder="Escribe tu comentario aquí..."
+                          value={feedback.comment}
+                          onChange={(e) => setFeedback({...feedback, comment: e.target.value})}
+                          style={{
+                              width: '100%', height: '120px', borderRadius: '15px', padding: '1.5rem',
+                              background: isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)',
+                              border: `1px solid ${themeColors.border}`, color: themeColors.text,
+                              outline: 'none', fontSize: '1rem', marginBottom: '1.5rem'
+                          }}
+                      />
+
+                      <button 
+                        onClick={async () => {
+                            if (!feedback.comment) return;
+                            const fRef = push(ref(db, 'feedback'));
+                            await set(fRef, { ...feedback, timestamp: Date.now() });
+                            setSubmitted(true);
+                        }}
+                        className="btn-primary" 
+                        style={{ padding: '15px 40px', borderRadius: '30px', display: 'flex', alignItems: 'center', gap: '10px', margin: '0 auto' }}
+                      >
+                        <Send size={18} /> Enviar Comentario
+                      </button>
+                  </>
+              )}
+          </div>
+      </section>
+
       {/* Footer */}
       <footer style={{ 
         padding: '80px 20px', borderTop: `1px solid ${themeColors.border}`, 

src/pages/KitchenView.jsx

@@ -9,6 +9,7 @@ export default function KitchenView() {
   const { logout } = useAuth();
   const navigate = useNavigate();
   const [orders, setOrders] = useState([]);
+  const [currentTime, setCurrentTime] = useState(Date.now());
   const lastOrderCount = useRef(0);
 
   useEffect(() => {
@@ -30,6 +31,9 @@ export default function KitchenView() {
         setOrders([]);
       }
     });
+
+    const timer = setInterval(() => setCurrentTime(Date.now()), 60000);
+    return () => clearInterval(timer);
   }, []);
 
   const playNotificationSound = () => {
@@ -81,15 +85,18 @@ export default function KitchenView() {
                 <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 style={{ fontSize: '0.8rem', color: (currentTime - order.timestamp) > 900000 ? 'var(--primary)' : 'var(--text-muted)', fontWeight: '700' }}>
+                  <Clock size={14} /> {Math.floor((currentTime - order.timestamp) / 60000)} min
                 </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 rgba(255,255,255,0.05)' }}>
-                    <span style={{ fontWeight: '600' }}><span style={{ color: 'var(--primary)', fontWeight: '800' }}>{item.qty}</span> {item.name}</span>
+                    <div style={{ display: 'flex', flexDirection: 'column' }}>
+                        <span style={{ fontWeight: '600' }}><span style={{ color: 'var(--primary)', fontWeight: '800' }}>{item.qty}</span> {item.name}</span>
+                        {item.note && <span style={{ fontSize: '0.75rem', color: 'var(--warning)', fontStyle: 'italic' }}>* {item.note}</span>}
+                    </div>
                   </div>
                 ))}
               </div>