style: rediseno de layout profesional en las 7 apps
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:
@@ -18,7 +18,7 @@ import {
|
||||
import KpiCard from './KpiCard'
|
||||
import Perfilamiento from './Perfilamiento'
|
||||
import SeccionEquipo from './SeccionEquipo'
|
||||
import { EstadoVacio, TituloSeccion } from './comunes'
|
||||
import { EstadoVacio, TarjetaGrafica, type AccionesTablero } from './comunes'
|
||||
import {
|
||||
datosCobranza,
|
||||
datosFunnel,
|
||||
@@ -47,7 +47,13 @@ const COLORES_COBRANZA = ['#2563EB', '#F59E0B']
|
||||
* pipeline, funnel y cobranza). Con `mostrarEquipo` (coordinador/corporativo/
|
||||
* admin) agrega la sección Equipo con leads por vendedor.
|
||||
*/
|
||||
export default function TableroGeneral({ mostrarEquipo }: { mostrarEquipo: boolean }) {
|
||||
export default function TableroGeneral({
|
||||
mostrarEquipo,
|
||||
alCambiarAcciones,
|
||||
}: {
|
||||
mostrarEquipo: boolean
|
||||
alCambiarAcciones: (acciones: AccionesTablero) => void
|
||||
}) {
|
||||
const [resumen, setResumen] = useState<ResumenReportes | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [cargando, setCargando] = useState(true)
|
||||
@@ -68,6 +74,11 @@ export default function TableroGeneral({ mostrarEquipo }: { mostrarEquipo: boole
|
||||
void cargar()
|
||||
}, [cargar])
|
||||
|
||||
// Expone "Actualizar" al header sticky de DashboardPage
|
||||
useEffect(() => {
|
||||
alCambiarAcciones({ actualizar: () => void cargar(), cargando })
|
||||
}, [alCambiarAcciones, cargar, cargando])
|
||||
|
||||
const unidades = resumen ? unidadesApiladas(resumen) : []
|
||||
const funnel = resumen ? datosFunnel(resumen) : []
|
||||
const cobranza = resumen ? datosCobranza(resumen) : []
|
||||
@@ -76,25 +87,14 @@ export default function TableroGeneral({ mostrarEquipo }: { mostrarEquipo: boole
|
||||
const sinCobranza = resumen !== null && resumen.cobranza.planesAlCorriente + resumen.cobranza.planesConVencidos === 0
|
||||
|
||||
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]">Tablero comercial</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]">Tablero comercial</h1>
|
||||
{resumen && (
|
||||
<p className="mt-1 text-sm text-[#64748B]">
|
||||
Actualizado: {new Date(resumen.generadoEn).toLocaleString('es-MX')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
@@ -151,97 +151,101 @@ export default function TableroGeneral({ mostrarEquipo }: { mostrarEquipo: boole
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section aria-label="Inventario por desarrollo" className="mt-12">
|
||||
<TituloSeccion>Unidades por desarrollo y status</TituloSeccion>
|
||||
{unidades.length === 0 ? (
|
||||
<EstadoVacio mensaje="Sin inventario" />
|
||||
) : (
|
||||
<div className="h-72">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={unidades} margin={{ top: 8, right: 8, left: -16, bottom: 0 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} />
|
||||
<XAxis dataKey="desarrollo" tick={{ fontSize: 11 }} />
|
||||
<YAxis allowDecimals={false} tick={{ fontSize: 11 }} />
|
||||
<Tooltip />
|
||||
<Legend wrapperStyle={{ fontSize: 11 }} />
|
||||
{Object.keys(COLORES_STATUS).map((status) => (
|
||||
<Bar key={status} dataKey={status} stackId="unidades" fill={COLORES_STATUS[status]} />
|
||||
))}
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section aria-label="Pipeline de ventas por etapa" className="mt-12">
|
||||
<TituloSeccion>Pipeline de ventas por etapa</TituloSeccion>
|
||||
{sinPipeline ? (
|
||||
<EstadoVacio mensaje="Sin unidades en el pipeline" />
|
||||
) : (
|
||||
<div className="h-80">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={pipeline} layout="vertical" margin={{ top: 8, right: 24, left: 24, bottom: 0 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" horizontal={false} />
|
||||
<XAxis type="number" allowDecimals={false} tick={{ fontSize: 11 }} />
|
||||
<YAxis type="category" dataKey="etapa" width={90} tick={{ fontSize: 11 }} />
|
||||
<Tooltip />
|
||||
<Bar dataKey="valor" name="Unidades" fill="#2563EB" isAnimationActive={false} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<div className="mt-12 grid gap-12 lg:grid-cols-2">
|
||||
<section aria-label="Embudo comercial">
|
||||
<TituloSeccion>Embudo: leads → oportunidades → ganado</TituloSeccion>
|
||||
{funnel.every((e) => e.valor === 0) ? (
|
||||
<EstadoVacio mensaje="Sin movimiento comercial" />
|
||||
) : (
|
||||
<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]} />
|
||||
<div className="mt-10 grid gap-6 sm:grid-cols-1 lg:grid-cols-2">
|
||||
<section aria-label="Inventario por desarrollo" className="lg:col-span-2">
|
||||
<TarjetaGrafica titulo="Unidades por desarrollo y status">
|
||||
{unidades.length === 0 ? (
|
||||
<EstadoVacio mensaje="Sin inventario" />
|
||||
) : (
|
||||
<div className="h-72">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={unidades} margin={{ top: 8, right: 8, left: -16, bottom: 0 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} />
|
||||
<XAxis dataKey="desarrollo" tick={{ fontSize: 11 }} />
|
||||
<YAxis allowDecimals={false} tick={{ fontSize: 11 }} />
|
||||
<Tooltip />
|
||||
<Legend wrapperStyle={{ fontSize: 11 }} />
|
||||
{Object.keys(COLORES_STATUS).map((status) => (
|
||||
<Bar key={status} dataKey={status} stackId="unidades" fill={COLORES_STATUS[status]} />
|
||||
))}
|
||||
<LabelList position="right" dataKey="etapa" stroke="none" fontSize={11} />
|
||||
<LabelList position="center" dataKey="valor" stroke="none" fill="#fff" fontSize={12} />
|
||||
</Funnel>
|
||||
</FunnelChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
</TarjetaGrafica>
|
||||
</section>
|
||||
|
||||
<section aria-label="Pipeline de ventas por etapa" className="lg:col-span-2">
|
||||
<TarjetaGrafica titulo="Pipeline de ventas por etapa">
|
||||
{sinPipeline ? (
|
||||
<EstadoVacio mensaje="Sin unidades en el pipeline" />
|
||||
) : (
|
||||
<div className="h-80">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={pipeline} layout="vertical" margin={{ top: 8, right: 24, left: 24, bottom: 0 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" horizontal={false} />
|
||||
<XAxis type="number" allowDecimals={false} tick={{ fontSize: 11 }} />
|
||||
<YAxis type="category" dataKey="etapa" width={90} tick={{ fontSize: 11 }} />
|
||||
<Tooltip />
|
||||
<Bar dataKey="valor" name="Unidades" fill="#2563EB" isAnimationActive={false} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
</TarjetaGrafica>
|
||||
</section>
|
||||
|
||||
<section aria-label="Embudo comercial">
|
||||
<TarjetaGrafica titulo="Embudo: leads → oportunidades → ganado">
|
||||
{funnel.every((e) => e.valor === 0) ? (
|
||||
<EstadoVacio mensaje="Sin movimiento comercial" />
|
||||
) : (
|
||||
<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>
|
||||
|
||||
<section aria-label="Estado de la cobranza">
|
||||
<TituloSeccion>Cobranza: al corriente vs vencidos</TituloSeccion>
|
||||
{sinCobranza ? (
|
||||
<EstadoVacio mensaje="Sin planes activos" />
|
||||
) : (
|
||||
<div className="h-72">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={cobranza}
|
||||
dataKey="valor"
|
||||
nameKey="nombre"
|
||||
innerRadius={60}
|
||||
outerRadius={90}
|
||||
isAnimationActive={false}
|
||||
label={({ name, value }) => `${name}: ${value}`}
|
||||
fontSize={11}
|
||||
>
|
||||
{cobranza.map((rebanada, i) => (
|
||||
<Cell key={rebanada.nombre} fill={COLORES_COBRANZA[i % COLORES_COBRANZA.length]} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
<TarjetaGrafica titulo="Cobranza: al corriente vs vencidos">
|
||||
{sinCobranza ? (
|
||||
<EstadoVacio mensaje="Sin planes activos" />
|
||||
) : (
|
||||
<div className="h-72">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={cobranza}
|
||||
dataKey="valor"
|
||||
nameKey="nombre"
|
||||
innerRadius={60}
|
||||
outerRadius={90}
|
||||
isAnimationActive={false}
|
||||
label={({ name, value }) => `${name}: ${value}`}
|
||||
fontSize={11}
|
||||
>
|
||||
{cobranza.map((rebanada, i) => (
|
||||
<Cell key={rebanada.nombre} fill={COLORES_COBRANZA[i % COLORES_COBRANZA.length]} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
</TarjetaGrafica>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user