feat: initialize project with Supabase authentication, routing, and dashboard screens for project data visualization
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { supabase } from '../services/supabaseClient';
|
||||
import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from 'recharts';
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { supabaseData } from '../services/supabaseClient';
|
||||
import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid } from 'recharts';
|
||||
import NavBar from '../components/NavBar';
|
||||
|
||||
const GLM_COLORS = { positivo: '#6CC24A', neutro: '#F0C75E', negativo: '#FF6A13' };
|
||||
@@ -9,15 +9,30 @@ const CHART_PALETTE = ['#6CC24A', '#4F758B', '#A4D65E', '#5B7F95', '#C4D600', '#
|
||||
export default function Dashboard() {
|
||||
const [rawData, setRawData] = useState([]);
|
||||
const [filteredData, setFilteredData] = useState([]);
|
||||
const [encuestasEnviadas, setEncuestasEnviadas] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const [posiciones, setPosiciones] = useState([]);
|
||||
const [homologaciones, setHomologaciones] = useState([]);
|
||||
const [paises, setPaises] = useState([]);
|
||||
const opcionesUnicas = (campo) => [
|
||||
...new Set(
|
||||
rawData
|
||||
.map(item => (item?.[campo] ?? '').toString().trim())
|
||||
.filter(v => v !== '')
|
||||
),
|
||||
].sort((a, b) => a.localeCompare(b, 'es'));
|
||||
|
||||
const posiciones = useMemo(() => opcionesUnicas('posicion'), [rawData]);
|
||||
const homologaciones = useMemo(() => opcionesUnicas('homologacion_ia'), [rawData]);
|
||||
const paises = useMemo(() => opcionesUnicas('pais'), [rawData]);
|
||||
const cuentas = useMemo(() => opcionesUnicas('cuenta_proyecto'), [rawData]);
|
||||
const jefes = useMemo(() => opcionesUnicas('jefe_directo'), [rawData]);
|
||||
|
||||
const [filtroPosicion, setFiltroPosicion] = useState('');
|
||||
const [filtroHomologacion, setFiltroHomologacion] = useState('');
|
||||
const [filtroPais, setFiltroPais] = useState('');
|
||||
const [filtroCuenta, setFiltroCuenta] = useState('');
|
||||
const [filtroJefe, setFiltroJefe] = useState('');
|
||||
const [busquedaNombre, setBusquedaNombre] = useState('');
|
||||
|
||||
const [paginaActual, setPaginaActual] = useState(1);
|
||||
|
||||
@@ -28,26 +43,45 @@ export default function Dashboard() {
|
||||
useEffect(() => {
|
||||
aplicarFiltros();
|
||||
setPaginaActual(1);
|
||||
}, [filtroPosicion, filtroHomologacion, filtroPais, rawData]);
|
||||
}, [filtroPosicion, filtroHomologacion, filtroPais, filtroCuenta, filtroJefe, rawData]);
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
const { data, error } = await supabase
|
||||
setError(null);
|
||||
console.log('[DashboardTerminacion] Iniciando fetch...');
|
||||
|
||||
const { data, error: fetchError } = await supabaseData
|
||||
.from('encuesta_terminacion_glm')
|
||||
.select('*')
|
||||
.order('timestamp', { ascending: false });
|
||||
|
||||
if (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
if (fetchError) {
|
||||
console.error('[DashboardTerminacion] Error de Supabase:', {
|
||||
message: fetchError.message,
|
||||
details: fetchError.details,
|
||||
hint: fetchError.hint,
|
||||
code: fetchError.code,
|
||||
});
|
||||
setError(fetchError.message || 'Error al cargar los datos de encuestas.');
|
||||
} else {
|
||||
setRawData(data);
|
||||
const uniquePosiciones = [...new Set(data.map(item => item.posicion).filter(Boolean))];
|
||||
const uniqueHomologaciones = [...new Set(data.map(item => item.homologacion_ia).filter(Boolean))];
|
||||
const uniquePaises = [...new Set(data.map(item => item.pais).filter(Boolean))];
|
||||
setPosiciones(uniquePosiciones);
|
||||
setHomologaciones(uniqueHomologaciones);
|
||||
setPaises(uniquePaises);
|
||||
console.log('[DashboardTerminacion] Datos recibidos:', data?.length ?? 0, 'registros');
|
||||
setRawData(data ?? []);
|
||||
}
|
||||
|
||||
const { data: kpiData, error: kpiError } = await supabaseData
|
||||
.from('encuesta_terminacion_kpi_glm')
|
||||
.select('encuestas_enviadas');
|
||||
|
||||
if (kpiError) {
|
||||
console.error('[DashboardTerminacion] Error al cargar KPI:', kpiError.message);
|
||||
} else {
|
||||
const totalEnviadas = (kpiData ?? []).reduce(
|
||||
(acc, curr) => acc + (Number(curr.encuestas_enviadas) || 0),
|
||||
0
|
||||
);
|
||||
setEncuestasEnviadas(totalEnviadas);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
@@ -56,6 +90,8 @@ export default function Dashboard() {
|
||||
if (filtroPosicion) result = result.filter(item => item.posicion === filtroPosicion);
|
||||
if (filtroHomologacion) result = result.filter(item => item.homologacion_ia === filtroHomologacion);
|
||||
if (filtroPais) result = result.filter(item => item.pais === filtroPais);
|
||||
if (filtroCuenta) result = result.filter(item => item.cuenta_proyecto === filtroCuenta);
|
||||
if (filtroJefe) result = result.filter(item => item.jefe_directo === filtroJefe);
|
||||
|
||||
// Ordenar por fecha de más reciente a más vieja
|
||||
result = [...result].sort((a, b) => {
|
||||
@@ -67,15 +103,26 @@ export default function Dashboard() {
|
||||
setFilteredData(result);
|
||||
};
|
||||
|
||||
const filasPorPagina = 20;
|
||||
const filasPorPagina = 10;
|
||||
const totalPaginas = Math.ceil(filteredData.length / filasPorPagina) || 1;
|
||||
const indiceUltimoItem = paginaActual * filasPorPagina;
|
||||
const indicePrimerItem = indiceUltimoItem - filasPorPagina;
|
||||
const datosPaginados = filteredData.slice(indicePrimerItem, indiceUltimoItem);
|
||||
const datosFiltradosTabla = busquedaNombre.trim()
|
||||
? filteredData.filter(item =>
|
||||
(item?.nombre ?? '').toString().toLowerCase().includes(busquedaNombre.trim().toLowerCase())
|
||||
)
|
||||
: filteredData;
|
||||
|
||||
const totalRegistrosTabla = datosFiltradosTabla.length;
|
||||
const datosPaginados = datosFiltradosTabla.slice(indicePrimerItem, indiceUltimoItem);
|
||||
|
||||
const totalRegistros = filteredData.length;
|
||||
const regresarian = filteredData.filter(d => d.considerar_regresar).length;
|
||||
const recomendarian = filteredData.filter(d => d.siento_comodo_recomendando).length;
|
||||
const porcentajeAprobacion = encuestasEnviadas > 0
|
||||
? Math.round((totalRegistros / encuestasEnviadas) * 100)
|
||||
: 0;
|
||||
const esVerdadero = (v) => v === true || String(v).toLowerCase().trim() === 'true';
|
||||
const regresarian = filteredData.filter(d => esVerdadero(d.considerar_regresar)).length;
|
||||
const recomendarian = filteredData.filter(d => esVerdadero(d.siento_comodo_recomendando)).length;
|
||||
|
||||
const sentimientoCount = filteredData.reduce((acc, curr) => {
|
||||
const sent = curr.sentimiento_ia || 'neutro';
|
||||
@@ -88,7 +135,66 @@ export default function Dashboard() {
|
||||
value: sentimientoCount[key]
|
||||
}));
|
||||
|
||||
if (loading) return <div className="p-10 text-center text-xl font-semibold text-azul-glm">Cargando datos...</div>;
|
||||
const pendientes = Math.max(encuestasEnviadas - totalRegistros, 0);
|
||||
const chartDataAprobacion = [
|
||||
{ name: 'Completadas', value: totalRegistros },
|
||||
{ name: 'Pendientes', value: pendientes },
|
||||
];
|
||||
|
||||
const esFalso = (v) => v === false || String(v).toLowerCase().trim() === 'false';
|
||||
|
||||
const chartDataRegresar = [
|
||||
{ name: 'Sí', value: filteredData.filter(d => esVerdadero(d.considerar_regresar)).length },
|
||||
{ name: 'No', value: filteredData.filter(d => esFalso(d.considerar_regresar)).length },
|
||||
];
|
||||
|
||||
const chartDataRecomendar = [
|
||||
{ name: 'Sí', value: filteredData.filter(d => esVerdadero(d.siento_comodo_recomendando)).length },
|
||||
{ name: 'No', value: filteredData.filter(d => esFalso(d.siento_comodo_recomendando)).length },
|
||||
];
|
||||
|
||||
const contarPorCampo = (campo) => {
|
||||
const conteo = filteredData.reduce((acc, curr) => {
|
||||
const valor = (curr?.[campo] ?? '').toString().trim() || 'Sin especificar';
|
||||
acc[valor] = (acc[valor] || 0) + 1;
|
||||
return acc;
|
||||
}, {});
|
||||
return Object.keys(conteo)
|
||||
.sort((a, b) => conteo[b] - conteo[a])
|
||||
.map((key, index) => ({
|
||||
name: key,
|
||||
value: conteo[key],
|
||||
fill: CHART_PALETTE[index % CHART_PALETTE.length],
|
||||
}));
|
||||
};
|
||||
|
||||
const chartDataMotivoSalida = contarPorCampo('homologacion_ia');
|
||||
const chartDataPorPais = contarPorCampo('pais');
|
||||
const chartDataPorProyecto = contarPorCampo('cuenta_proyecto');
|
||||
|
||||
if (loading) return (
|
||||
<div className="p-10 text-center">
|
||||
<div className="inline-block w-10 h-10 border-4 border-verde-glm border-t-transparent rounded-full animate-spin mb-4" />
|
||||
<p className="text-xl font-semibold text-azul-glm">Cargando datos...</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (error) return (
|
||||
<div className="p-10 max-w-xl mx-auto min-h-screen flex items-center justify-center">
|
||||
<div className="bg-white p-8 rounded-2xl border border-red-200 shadow-sm text-center w-full">
|
||||
<div className="text-red-500 text-4xl mb-4">⚠️</div>
|
||||
<h2 className="text-xl font-bold text-red-700 mb-2">Error al cargar datos</h2>
|
||||
<p className="text-sm text-gray-600 mb-1">{error}</p>
|
||||
<p className="text-xs text-gray-400 mb-6">Revisa la consola del navegador (F12) para más detalles.</p>
|
||||
<button
|
||||
onClick={fetchData}
|
||||
className="bg-azul-glm hover:bg-azul-medio text-white font-semibold py-2.5 px-6 rounded-lg transition-colors"
|
||||
>
|
||||
Reintentar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-7xl mx-auto min-h-screen">
|
||||
@@ -112,7 +218,7 @@ export default function Dashboard() {
|
||||
<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="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 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 Posición</label>
|
||||
<select
|
||||
@@ -155,10 +261,38 @@ export default function Dashboard() {
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<label className="block text-xs font-bold text-azul-glm uppercase tracking-wider mb-1">Filtrar por Cuenta/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={filtroCuenta}
|
||||
onChange={(e) => setFiltroCuenta(e.target.value)}
|
||||
>
|
||||
<option value="">Todas las cuentas/proyectos</option>
|
||||
{cuentas.map((cuenta, idx) => (
|
||||
<option key={idx} value={cuenta}>{cuenta}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<label className="block text-xs font-bold text-azul-glm uppercase tracking-wider mb-1">Filtrar por Jefe Directo</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={filtroJefe}
|
||||
onChange={(e) => setFiltroJefe(e.target.value)}
|
||||
>
|
||||
<option value="">Todos los jefes directos</option>
|
||||
{jefes.map((jefe, idx) => (
|
||||
<option key={idx} value={jefe}>{jefe}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-end">
|
||||
<button
|
||||
onClick={() => { setFiltroPosicion(''); setFiltroHomologacion(''); setFiltroPais(''); }}
|
||||
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"
|
||||
onClick={() => { setFiltroPosicion(''); setFiltroHomologacion(''); setFiltroPais(''); setFiltroCuenta(''); setFiltroJefe(''); }}
|
||||
className="w-full 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 Filtros
|
||||
</button>
|
||||
@@ -166,9 +300,13 @@ export default function Dashboard() {
|
||||
</div>
|
||||
|
||||
{/* KPIs GLM */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<div className="bg-white p-6 rounded-xl border border-gris-medio/30 shadow-sm border-l-[6px] border-naranja">
|
||||
<h2 className="text-xs text-acero uppercase font-bold tracking-wider">Total Encuestas Enviadas</h2>
|
||||
<p className="text-3xl font-extrabold text-naranja mt-1">{encuestasEnviadas}</p>
|
||||
</div>
|
||||
<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 Registros</h2>
|
||||
<h2 className="text-xs text-acero uppercase font-bold tracking-wider">Total Encuestas Completadas</h2>
|
||||
<p className="text-3xl font-extrabold text-azul-glm mt-1">{totalRegistros}</p>
|
||||
</div>
|
||||
<div className="bg-white p-6 rounded-xl border border-gris-medio/30 shadow-sm border-l-[6px] border-verde-glm">
|
||||
@@ -213,20 +351,165 @@ export default function Dashboard() {
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-6 rounded-xl border border-gris-medio/30 shadow-sm">
|
||||
<h3 className="text-base font-bold text-azul-glm mb-4 pb-2 border-b-2 border-verde-glm">% de Aprobación</h3>
|
||||
<div className="h-64 relative">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={chartDataAprobacion}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={60}
|
||||
outerRadius={80}
|
||||
dataKey="value"
|
||||
startAngle={90}
|
||||
endAngle={-270}
|
||||
>
|
||||
<Cell fill="#6CC24A" />
|
||||
<Cell fill="#E2E8F0" />
|
||||
</Pie>
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none" style={{ top: '-2rem' }}>
|
||||
<span className="text-4xl font-extrabold text-verde-glm">{porcentajeAprobacion}%</span>
|
||||
<span className="text-xs text-acero">{totalRegistros} de {encuestasEnviadas}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* GRÁFICAS SÍ / NO */}
|
||||
<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">
|
||||
<h3 className="text-base font-bold text-azul-glm mb-4 pb-2 border-b-2 border-verde-glm">¿Regresaría a la organización en el futuro?</h3>
|
||||
<div className="h-64">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={chartDataRegresar} layout="vertical" margin={{ top: 10, right: 30, left: 10, bottom: 10 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0" />
|
||||
<XAxis type="number" allowDecimals={false} tick={{ fontSize: 12, fill: '#4F758B' }} />
|
||||
<YAxis type="category" dataKey="name" tick={{ fontSize: 13, fill: '#4F758B' }} width={40} />
|
||||
<Tooltip />
|
||||
<Bar dataKey="value" name="Respuestas" radius={[0, 4, 4, 0]}>
|
||||
{chartDataRegresar.map((entry) => (
|
||||
<Cell key={entry.name} fill={entry.name === 'Sí' ? '#6CC24A' : '#FF6A13'} />
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-6 rounded-xl border border-gris-medio/30 shadow-sm">
|
||||
<h3 className="text-base font-bold text-azul-glm mb-4 pb-2 border-b-2 border-verde-glm">Recomendaría a otra persona para trabajar en la organización</h3>
|
||||
<div className="h-64">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={chartDataRecomendar} layout="vertical" margin={{ top: 10, right: 30, left: 10, bottom: 10 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0" />
|
||||
<XAxis type="number" allowDecimals={false} tick={{ fontSize: 12, fill: '#4F758B' }} />
|
||||
<YAxis type="category" dataKey="name" tick={{ fontSize: 13, fill: '#4F758B' }} width={40} />
|
||||
<Tooltip />
|
||||
<Bar dataKey="value" name="Respuestas" radius={[0, 4, 4, 0]}>
|
||||
{chartDataRecomendar.map((entry) => (
|
||||
<Cell key={entry.name} fill={entry.name === 'Sí' ? '#6CC24A' : '#FF6A13'} />
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* GRÁFICAS DE SALIDA LABORAL */}
|
||||
<div className="grid grid-cols-1 gap-6 mb-8">
|
||||
<div className="bg-white p-6 rounded-xl border border-gris-medio/30 shadow-sm">
|
||||
<h3 className="text-base font-bold text-azul-glm mb-4 pb-2 border-b-2 border-verde-glm">Motivo de Salida Laboral</h3>
|
||||
<div className="h-72">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={chartDataMotivoSalida} margin={{ top: 10, right: 20, left: 10, bottom: 22 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0" />
|
||||
<XAxis dataKey="name" tick={{ fontSize: 11, fill: '#4F758B' }} interval={0} angle={-20} textAnchor="end" height={60} />
|
||||
<YAxis allowDecimals={false} tick={{ fontSize: 12, fill: '#4F758B' }} />
|
||||
<Tooltip />
|
||||
<Bar dataKey="value" name="Salidas" radius={[4, 4, 0, 0]}>
|
||||
{chartDataMotivoSalida.map((entry, index) => (
|
||||
<Cell key={`motivo-${index}`} fill={entry.fill} />
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-6 rounded-xl border border-gris-medio/30 shadow-sm">
|
||||
<h3 className="text-base font-bold text-azul-glm mb-4 pb-2 border-b-2 border-verde-glm">Salida Laboral Según País</h3>
|
||||
<div className="h-72">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={chartDataPorPais} margin={{ top: 10, right: 20, left: 10, bottom: 10 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0" />
|
||||
<XAxis dataKey="name" tick={{ fontSize: 11, fill: '#4F758B' }} interval={0} angle={-20} textAnchor="end" height={60} />
|
||||
<YAxis allowDecimals={false} tick={{ fontSize: 12, fill: '#4F758B' }} />
|
||||
<Tooltip />
|
||||
<Bar dataKey="value" name="Salidas" radius={[4, 4, 0, 0]}>
|
||||
{chartDataPorPais.map((entry, index) => (
|
||||
<Cell key={`pais-${index}`} fill={entry.fill} />
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-6 rounded-xl border border-gris-medio/30 shadow-sm">
|
||||
<h3 className="text-base font-bold text-azul-glm mb-4 pb-2 border-b-2 border-verde-glm">Salida Laboral Según Proyecto</h3>
|
||||
<div className="h-72">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={chartDataPorProyecto} margin={{ top: 10, right: 20, left: 10, bottom: 10 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0" />
|
||||
<XAxis dataKey="name" tick={{ fontSize: 11, fill: '#4F758B' }} interval={0} angle={-20} textAnchor="end" height={60} />
|
||||
<YAxis allowDecimals={false} tick={{ fontSize: 12, fill: '#4F758B' }} />
|
||||
<Tooltip />
|
||||
<Bar dataKey="value" name="Salidas" radius={[4, 4, 0, 0]}>
|
||||
{chartDataPorProyecto.map((entry, index) => (
|
||||
<Cell key={`proyecto-${index}`} fill={entry.fill} />
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</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">
|
||||
<div className="px-6 py-4 border-b border-gris-medio/30 bg-verde-bg flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
||||
<h3 className="text-base font-bold text-azul-glm">Detalle de Registros</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-xs font-bold text-azul-glm uppercase tracking-wider">Buscar empleado</label>
|
||||
<input
|
||||
type="text"
|
||||
value={busquedaNombre}
|
||||
onChange={(e) => { setBusquedaNombre(e.target.value); setPaginaActual(1); }}
|
||||
placeholder="Escriba el nombre..."
|
||||
className="w-56 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"
|
||||
/>
|
||||
</div>
|
||||
</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">Nombre</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">País</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">Posición</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Jefe Directo</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">PDV</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Trade Partner</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Motivo</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Sentimiento</th>
|
||||
</tr>
|
||||
@@ -237,8 +520,13 @@ export default function Dashboard() {
|
||||
<td className="px-6 py-4 whitespace-nowrap text-acero">
|
||||
{new Date(item.timestamp).toLocaleDateString()}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap font-semibold text-gris-oscuro">{item.pais}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap font-semibold text-gris-oscuro">{item.nombre}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-gris-oscuro">{item.pais}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-gris-oscuro">{item.cuenta_proyecto}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-gris-oscuro">{item.posicion}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-gris-oscuro">{item.jefe_directo}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-gris-oscuro">{item.pdv}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-gris-oscuro">{item.trade_partner}</td>
|
||||
<td className="px-6 py-4 text-gris-oscuro max-w-xs truncate">{item.homologacion_ia}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
{(() => {
|
||||
|
||||
Reference in New Issue
Block a user