consultoria-as/FRASA-CAS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: rediseno de layout profesional en las 7 apps

Browse Source 
Headers sticky con marca y acciones, contenedores max-w-[1280px],
grids de contenido con rails laterales sticky (cotizador, mi-dia,
detalle de cobranza), stepper vertical en el wizard de alta, toolbar+
tabla unificadas en cobranza, tabs como segmented control en
dashboards, chat con barra de entrada fija y preguntas sugeridas,
landing con navbar + hero + grid de modulos + footer.
This commit is contained in:
Consult AS Technology
2026-09-03 04:28:56 +00:00
parent 599dce2629
commit d59c8c0d7e
39 changed files with 1622 additions and 1235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
apps/dashboards/src/components/MiTablero.tsx
View File

@@ -1,7 +1,7 @@
import { useCallback, useEffect, useState } from 'react'
import { Cell, Funnel, FunnelChart, LabelList, ResponsiveContainer, Tooltip } from 'recharts'
import KpiCard from './KpiCard'
import { EstadoVacio, TituloSeccion } from './comunes'
import { EstadoVacio, TarjetaGrafica, type AccionesTablero } from './comunes'
import { funnelMisLeads, type ResumenMiDia } from '../lib/mi-tablero'
import { fetchResumenMiDia } from '../services/mi-dia'
@@ -13,7 +13,7 @@ const COLORES_FUNNEL = ['#94A3B8', '#64748B', '#3B82F6', '#2563EB']
* apartados por vencer) y un funnel simple de sus leads por estado.
* Fuente: GET /api/mi-dia/resumen (filtra por su mondayUserId en el API).
*/
export default function MiTablero() {
export default function MiTablero({ alCambiarAcciones }: { alCambiarAcciones: (acciones: AccionesTablero) => void }) {
const [resumen, setResumen] = useState<ResumenMiDia | null>(null)
const [error, setError] = useState<string | null>(null)
const [cargando, setCargando] = useState(true)
@@ -34,28 +34,22 @@ export default function MiTablero() {
void cargar()
}, [cargar])
// Expone "Actualizar" al header sticky de DashboardPage
useEffect(() => {
alCambiarAcciones({ actualizar: () => void cargar(), cargando })
}, [alCambiarAcciones, cargar, cargando])
const funnel = resumen ? funnelMisLeads(resumen.misLeads) : []
return (
<main className="mx-auto max-w-6xl px-4 py-8">
<div className="mb-8 flex items-end justify-between">
<div>
<p className="text-xs font-semibold uppercase tracking-wider text-accent">FRASA Desarrollos</p>
<h1 className="mt-2 text-3xl font-light text-[#111827]">Mi tablero</h1>
{resumen && (
<p className="mt-1 text-xs text-[#64748B]">
Actualizado: {new Date(resumen.generadoEn).toLocaleString('es-MX')}
</p>
)}
</div>
<button
type="button"
onClick={() => void cargar()}
disabled={cargando}
className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-2 text-xs font-medium text-accent shadow-sm transition-all duration-100 ease-out hover:bg-blue-50 disabled:opacity-50"
>
{cargando ? 'Actualizando…' : 'Actualizar'}
</button>
<main className="mx-auto max-w-[1280px] px-4 py-8 sm:px-6">
<div className="mb-8">
<h1 className="text-xl font-semibold text-[#111827]">Mi tablero</h1>
{resumen && (
<p className="mt-1 text-sm text-[#64748B]">
Actualizado: {new Date(resumen.generadoEn).toLocaleString('es-MX')}
</p>
)}
</div>
{error && (
@@ -75,7 +69,7 @@ export default function MiTablero() {
{resumen && (
<>
<section aria-label="Mis indicadores" className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<section aria-label="Mis indicadores" className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
<KpiCard
titulo="Mis leads activos"
valor={resumen.misLeads.length}
@@ -93,26 +87,27 @@ export default function MiTablero() {
/>
</section>
<section aria-label="Mis leads por estado" className="mt-12">
<TituloSeccion>Mis leads por estado</TituloSeccion>
{funnel.length === 0 ? (
<EstadoVacio mensaje="Sin leads asignados" />
) : (
<div className="h-72">
<ResponsiveContainer width="100%" height="100%">
<FunnelChart>
<Tooltip />
<Funnel dataKey="valor" data={funnel} nameKey="etapa" isAnimationActive={false}>
{funnel.map((etapa, i) => (
<Cell key={etapa.etapa} fill={COLORES_FUNNEL[i % COLORES_FUNNEL.length]} />
))}
<LabelList position="right" dataKey="etapa" stroke="none" fontSize={11} />
<LabelList position="center" dataKey="valor" stroke="none" fill="#fff" fontSize={12} />
</Funnel>
</FunnelChart>
</ResponsiveContainer>
</div>
)}
<section aria-label="Mis leads por estado" className="mt-10">
<TarjetaGrafica titulo="Mis leads por estado">
{funnel.length === 0 ? (
<EstadoVacio mensaje="Sin leads asignados" />
) : (
<div className="h-72">
<ResponsiveContainer width="100%" height="100%">
<FunnelChart>
<Tooltip />
<Funnel dataKey="valor" data={funnel} nameKey="etapa" isAnimationActive={false}>
{funnel.map((etapa, i) => (
<Cell key={etapa.etapa} fill={COLORES_FUNNEL[i % COLORES_FUNNEL.length]} />
))}
<LabelList position="right" dataKey="etapa" stroke="none" fontSize={11} />
<LabelList position="center" dataKey="valor" stroke="none" fill="#fff" fontSize={12} />
</Funnel>
</FunnelChart>
</ResponsiveContainer>
</div>
)}
</TarjetaGrafica>
</section>
</>
)}