feat: implement dashboard screens for carnet and termination tracking with navigation and charts

src/App.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
-import Dashboard from './Dashboard';
+import Dashboard from './screens/DashboardTerminacion';
+import DashboardCarnet from './screens/DashboardCarnet';
 
 export default function App() {
   return (
@@ -8,6 +9,7 @@ export default function App() {
       <Routes>
         <Route path="/" element={<Navigate to="/dashboard/encuesta-terminacion" replace />} />
         <Route path="/dashboard/encuesta-terminacion" element={<Dashboard />} />
+        <Route path="/dashboard/carnet" element={<DashboardCarnet />} />
         <Route
           path="*"
           element={

src/components/NavBar.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+const linkBase = 'font-semibold text-sm py-2.5 px-5 rounded-lg transition-colors text-center flex-1';
+const linkActive = 'bg-azul-glm text-white';
+const linkInactive = 'bg-verde-bg text-azul-glm hover:bg-verde-glm hover:text-white border border-verde-glm/40';
+
+export default function NavBar() {
+  return (
+    <nav className="flex gap-3 bg-white p-3 rounded-xl border border-gris-medio/30 shadow-sm mb-8">
+      <NavLink
+        to="/dashboard/encuesta-terminacion"
+        className={({ isActive }) => `${linkBase} ${isActive ? linkActive : linkInactive}`}
+      >
+        Encuesta Terminacion
+      </NavLink>
+      <NavLink
+        to="/dashboard/carnet"
+        className={({ isActive }) => `${linkBase} ${isActive ? linkActive : linkInactive}`}
+      >
+        Carnets
+      </NavLink>
+    </nav>
+  );
+}

src/screens/DashboardCarnet.jsx

@@ -0,0 +1,208 @@
+import React, { useState, useEffect } from 'react';
+import { supabase } from '../services/supabaseClient';
+import { BarChart, Bar, Cell, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer, CartesianGrid } from 'recharts';
+import NavBar from '../components/NavBar';
+
+const CHART_PALETTE = ['#6CC24A', '#4F758B', '#A4D65E', '#5B7F95', '#C4D600', '#6B8FA3', '#3E6B8A', '#8FBF5A'];
+
+export default function DashboardCarnet() {
+    const [rawData, setRawData] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [clientes, setClientes] = useState([]);
+    const [filtroCliente, setFiltroCliente] = useState('');
+    const [paginaActual, setPaginaActual] = useState(1);
+
+    useEffect(() => {
+        fetchData();
+    }, []);
+
+    useEffect(() => {
+        setPaginaActual(1);
+        const uniqueClientes = [...new Set(rawData.map(item => item.cliente_proyecto).filter(Boolean))];
+        setClientes(uniqueClientes);
+    }, [rawData]);
+
+    const fetchData = async () => {
+        setLoading(true);
+        const { data, error } = await supabase
+            .from('carnet_empleados_creados_glm')
+            .select('*')
+            .order('created_at', { ascending: false });
+
+        if (error) {
+            console.error('Error fetching data:', error);
+        } else {
+            setRawData(data);
+        }
+        setLoading(false);
+    };
+
+    const datosFiltrados = filtroCliente
+        ? rawData.filter(item => item.cliente_proyecto === filtroCliente)
+        : rawData;
+
+    const totalCarnets = datosFiltrados.length;
+
+    const conteoPorCliente = rawData.reduce((acc, curr) => {
+        const cliente = curr.cliente_proyecto || 'Sin cliente';
+        acc[cliente] = (acc[cliente] || 0) + 1;
+        return acc;
+    }, {});
+
+    const chartDataCliente = Object.keys(conteoPorCliente).map((cliente, index) => ({
+        name: cliente,
+        value: conteoPorCliente[cliente],
+        fill: CHART_PALETTE[index % CHART_PALETTE.length]
+    }));
+
+    const filasPorPagina = 20;
+    const totalPaginas = Math.ceil(datosFiltrados.length / filasPorPagina) || 1;
+    const indiceUltimoItem = paginaActual * filasPorPagina;
+    const indicePrimerItem = indiceUltimoItem - filasPorPagina;
+
+    if (loading) return <div className="p-10 text-center text-xl font-semibold text-azul-glm">Cargando datos...</div>;
+
+    return (
+        <div className="p-6 max-w-7xl mx-auto min-h-screen">
+
+            {/* HEADER GLM */}
+            <header className="flex flex-col sm:flex-row items-center gap-4 mb-8 bg-white p-4 rounded-xl border border-gris-medio/30 shadow-sm">
+                <div className="flex-shrink-0 bg-verde-bg p-2 rounded-lg">
+                    <img
+                        src="https://dbit.digitalcompass.agency/storage/v1/object/public/public-assets/GLM_completo.png"
+                        alt="Logo GLM"
+                        className="h-12 w-auto object-contain max-w-[180px]"
+                    />
+                </div>
+                <div className="text-center sm:text-left flex-1">
+                    <h1 className="text-2xl font-bold text-azul-glm tracking-tight">Dashboard de Carnets</h1>
+                    <p className="text-xs text-acero italic">Conteo de carnets creados por cliente / proyecto</p>
+                </div>
+            </header>
+
+            {/* NAVEGACIÓN GLM */}
+            <NavBar />
+
+            {/* FILTRO GLM */}
+            <div className="flex flex-col md:flex-row gap-4 mb-8 bg-white p-5 rounded-xl border border-gris-medio/30 shadow-sm">
+                <div className="flex-1">
+                    <label className="block text-xs font-bold text-azul-glm uppercase tracking-wider mb-1">Filtrar por Cliente / Proyecto</label>
+                    <select
+                        className="w-full rounded-lg p-2.5 border text-sm text-gris-oscuro bg-amarillo-input focus:bg-white focus:ring-2 focus:ring-verde-glm focus:outline-none"
+                        value={filtroCliente}
+                        onChange={(e) => setFiltroCliente(e.target.value)}
+                    >
+                        <option value="">Todos los clientes / proyectos</option>
+                        {clientes.map((cliente, idx) => (
+                            <option key={idx} value={cliente}>{cliente}</option>
+                        ))}
+                    </select>
+                </div>
+                <div className="flex items-end">
+                    <button
+                        onClick={() => setFiltroCliente('')}
+                        className="w-full md:w-auto bg-verde-bg hover:bg-verde-glm hover:text-white text-azul-glm font-semibold text-sm py-2.5 px-5 rounded-lg border border-verde-glm/40 hover:border-verde-glm transition-colors"
+                    >
+                        Limpiar Filtro
+                    </button>
+                </div>
+            </div>
+
+            {/* KPI GLM */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+                <div className="bg-white p-6 rounded-xl border border-gris-medio/30 shadow-sm border-l-[6px] border-azul-glm">
+                    <h2 className="text-xs text-acero uppercase font-bold tracking-wider">Total Carnets Creados</h2>
+                    <p className="text-3xl font-extrabold text-azul-glm mt-1">{totalCarnets}</p>
+                </div>
+                <div className="bg-white p-6 rounded-xl border border-gris-medio/30 shadow-sm border-l-[6px] border-verde-glm">
+                    <h2 className="text-xs text-acero uppercase font-bold tracking-wider">Clientes / Proyectos</h2>
+                    <p className="text-3xl font-extrabold text-verde-glm mt-1">{clientes.length}</p>
+                    <p className="text-xs text-acero mt-1">distintos en el histórico</p>
+                </div>
+            </div>
+
+            {/* GRÁFICA GLM */}
+            <div className="bg-white p-6 rounded-xl border border-gris-medio/30 shadow-sm mb-8">
+                <h3 className="text-base font-bold text-azul-glm mb-4 pb-2 border-b-2 border-verde-glm">Carnets por Cliente / Proyecto</h3>
+                <div className="h-80">
+                    <ResponsiveContainer width="100%" height="100%">
+                        <BarChart data={chartDataCliente} margin={{ top: 10, right: 20, left: 20, bottom: 60 }}>
+                            <CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0" />
+                            <XAxis
+                                dataKey="name"
+                                angle={-30}
+                                textAnchor="end"
+                                interval={0}
+                                height={70}
+                                tick={{ fontSize: 11, fill: '#4F758B' }}
+                            />
+                            <YAxis allowDecimals={false} tick={{ fontSize: 12, fill: '#4F758B' }} />
+                            <Tooltip />
+                            <Legend />
+                            <Bar dataKey="value" name="Carnets" radius={[4, 4, 0, 0]}>
+                                {chartDataCliente.map((entry, index) => (
+                                    <Cell key={`cell-${index}`} fill={entry.fill} />
+                                ))}
+                            </Bar>
+                        </BarChart>
+                    </ResponsiveContainer>
+                </div>
+            </div>
+
+            {/* TABLA GLM */}
+            <div className="bg-white rounded-xl border border-gris-medio/30 shadow-sm overflow-hidden">
+                <div className="px-6 py-4 border-b border-gris-medio/30 bg-verde-bg">
+                    <h3 className="text-base font-bold text-azul-glm">Detalle de Carnets</h3>
+                </div>
+                <div className="overflow-x-auto">
+                    <table className="min-w-full divide-y divide-gris-medio/50 text-sm">
+                        <thead className="bg-azul-glm">
+                            <tr>
+                                <th className="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Fecha</th>
+                                <th className="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Cliente / Proyecto</th>
+                                <th className="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Carnets</th>
+                            </tr>
+                        </thead>
+                        <tbody className="bg-white divide-y divide-gris-medio/30">
+                            {chartDataCliente.map((row, idx) => (
+                                <tr key={idx} className={`${idx % 2 === 0 ? 'bg-white' : 'bg-gris-claro'} hover:bg-verde-bg/50 transition-colors`}>
+                                    <td className="px-6 py-4 whitespace-nowrap text-acero" colSpan={2}>{row.name}</td>
+                                    <td className="px-6 py-4 whitespace-nowrap font-semibold text-azul-glm">{row.value}</td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+
+                {/* Controles de Pagina */}
+                <div className="flex flex-col sm:flex-row items-center justify-between gap-4 px-6 py-4 border-t border-gris-medio/30 bg-gris-claro/50">
+                    <div className="text-xs text-acero font-medium">
+                        {datosFiltrados.length > 0
+                            ? `Mostrando registros ${indicePrimerItem + 1} - ${Math.min(indiceUltimoItem, datosFiltrados.length)} de ${datosFiltrados.length}`
+                            : 'No hay registros para mostrar'
+                        }
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <button
+                            onClick={() => setPaginaActual(prev => Math.max(prev - 1, 1))}
+                            disabled={paginaActual === 1}
+                            className="px-3 py-1.5 rounded-lg border border-gris-medio text-xs font-semibold text-azul-glm bg-white hover:bg-gris-claro disabled:opacity-50 disabled:cursor-not-allowed transition-all cursor-pointer"
+                        >
+                            Atrás
+                        </button>
+                        <span className="text-xs text-gris-oscuro font-bold">
+                            Página {paginaActual} de {totalPaginas}
+                        </span>
+                        <button
+                            onClick={() => setPaginaActual(prev => Math.min(prev + 1, totalPaginas))}
+                            disabled={paginaActual === totalPaginas}
+                            className="px-3 py-1.5 rounded-lg border border-gris-medio text-xs font-semibold text-azul-glm bg-white hover:bg-gris-claro disabled:opacity-50 disabled:cursor-not-allowed transition-all cursor-pointer"
+                        >
+                            Siguiente
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

src/screens/DashboardTerminacion.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import { supabase } from './services/supabaseClient';
+import { supabase } from '../services/supabaseClient';
 import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import NavBar from '../components/NavBar';
 
 const GLM_COLORS = { positivo: '#6CC24A', neutro: '#F0C75E', negativo: '#FF6A13' };
 const CHART_PALETTE = ['#6CC24A', '#4F758B', '#A4D65E', '#5B7F95', '#C4D600', '#6B8FA3'];
@@ -107,6 +108,9 @@ export default function Dashboard() {
                 </div>
             </header>
 
+            {/* NAVEGACIÓN GLM */}
+            <NavBar />
+
             {/* FILTROS GLM */}
             <div className="flex flex-col md:flex-row gap-4 mb-8 bg-white p-5 rounded-xl border border-gris-medio/30 shadow-sm">
                 <div className="flex-1">