Spaces:
Running
Running
File size: 2,350 Bytes
188bf54 28b0bde 188bf54 28b0bde 188bf54 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 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: 'Órdenes', value: '45', icon: <ShoppingBag size={24} color="var(--primary)" />, bg: 'rgba(255, 90, 95, 0.1)' },
{ title: 'Stock Bajo', value: stats.stockBajo, 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 className="glass-card">
<h3 className="text-gradient">Actividad Reciente</h3>
<p style={{ color: 'var(--text-muted)', marginTop: '0.5rem' }}>Módulo de notificaciones en tiempo real desde Cocina/Meseros...</p>
</div>
</div>
);
}
|