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

feat(mejoras): 14 mejoras al CRM Frasa

Browse Source 
Fase 1 - UI: dark mode, skeletons, toasts
Fase 2 - Filtros: avanzados Mi día, búsqueda global Ctrl+K
Fase 3 - Datos: export Excel, notas apartados, auditoría
Fase 4 - Dashboard: gráficas vendedor + métricas uso
Fase 5 - Responsive: tablets optimizadas
Fase 6 - PWA: IndexedDB offline, push notifications

Backend: 3 tablas nuevas, 6 services, 6 endpoints nuevos
721 API tests + fronts verdes.
This commit is contained in:
Consult AS Technology
2026-09-07 06:04:49 +00:00
parent 388e1da338
commit c77b4c0628
170 changed files with 5802 additions and 637 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
apps/cobranza/src/pages/DashboardPage.tsx
View File

@@ -1,3 +1,4 @@
import { SkeletonList } from "../components/Skeleton"
import { useEffect, useMemo, useState } from 'react'
import { Link, useSearchParams } from 'react-router-dom'
import {
@@ -162,7 +163,7 @@ export default function DashboardPage() {
return errorCarga ? (
<div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{errorCarga}</div>
) : (
<p className="text-sm text-[#64748B]">Cargando...</p>
<SkeletonList count={5} />
)
}
@@ -205,7 +206,7 @@ export default function DashboardPage() {
type="button"
onClick={() => alternarOrden(columna)}
aria-label={`Ordenar por ${titulo}`}
className="inline-flex items-center gap-1 font-semibold uppercase tracking-wider transition-colors duration-100 ease-out hover:text-[#111827]"
className="inline-flex items-center gap-1 font-semibold uppercase tracking-wider transition-colors duration-100 ease-out hover:text-[#111827] dark:text-[#E2E8F0]"
>
{titulo}
{orden === columna && <span aria-hidden="true">{dir === 'asc' ? '↑' : '↓'}</span>}
@@ -216,7 +217,7 @@ export default function DashboardPage() {
return (
<div className="space-y-6">
<div className="flex flex-wrap items-center justify-between gap-4">
<h1 className="text-xl font-semibold text-[#111827]">Módulo Cobranza — Planes de enganche</h1>
<h1 className="text-xl font-semibold text-[#111827] dark:text-[#E2E8F0]">Módulo Cobranza — Planes de enganche</h1>
<Link
to="/nuevo"
className="rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover"
@@ -235,7 +236,7 @@ export default function DashboardPage() {
)}
{/* KPIs */}
<div className="grid grid-cols-2 gap-6 lg:grid-cols-4">
<div className="grid grid-cols-2 gap-4 md:gap-6 lg:grid-cols-4">
<KpiCard titulo="Planes activos" valor={activos.length} />
<KpiCard
titulo="Al corriente / con atraso"
@@ -247,9 +248,9 @@ export default function DashboardPage() {
</div>
{/* Gráficas */}
<div className="grid gap-6 lg:grid-cols-2">
<div className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
<h2 className="mb-6 text-xs font-semibold uppercase tracking-wider text-[#64748B]">
<div className="grid gap-6 md:grid-cols-2">
<div className="rounded-xl border border-[#E5E7EB] bg-white p-6 dark:border-[#1E293B] dark:bg-[#1E293B] shadow-sm">
<h2 className="mb-6 text-xs font-semibold uppercase tracking-wider text-[#64748B] dark:text-[#94A3B8]">
Al corriente vs vencidos
</h2>
<ResponsiveContainer width="100%" height={240}>
@@ -272,8 +273,8 @@ export default function DashboardPage() {
</PieChart>
</ResponsiveContainer>
</div>
<div className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
<h2 className="mb-6 text-xs font-semibold uppercase tracking-wider text-[#64748B]">
<div className="rounded-xl border border-[#E5E7EB] bg-white p-6 dark:border-[#1E293B] dark:bg-[#1E293B] shadow-sm">
<h2 className="mb-6 text-xs font-semibold uppercase tracking-wider text-[#64748B] dark:text-[#94A3B8]">
Cobrado por mes (últimos 6 meses)
</h2>
<ResponsiveContainer width="100%" height={240}>
@@ -293,9 +294,9 @@ export default function DashboardPage() {
</div>
{/* Tarjeta unificada: toolbar de filtros/búsqueda + tabla de planes */}
<div className="overflow-hidden rounded-xl border border-[#E5E7EB] bg-white shadow-sm">
<div className="overflow-hidden rounded-xl border border-[#E5E7EB] bg-white shadow dark:border-[#1E293B] dark:bg-[#1E293B] -sm">
{/* Filtros */}
<div className="flex flex-wrap items-center gap-3 border-b border-[#E5E7EB] p-4 sm:gap-4 sm:px-5">
<div className="flex flex-wrap items-center gap-3 border-b border-[#E5E7EB] p-4 md:gap-4 md:px-5">
{/* Toggle Mis planes / Todos (?mios=1 filtra en el API por el vendedor del token) */}
<div className="flex rounded-lg border border-[#D1D5DB] bg-white" role="group" aria-label="Alcance de planes">
<button
@@ -303,7 +304,7 @@ export default function DashboardPage() {
onClick={() => actualizarParams({ vista: mios ? null : 'mios' })}
aria-pressed={mios}
className={`rounded-l-lg px-4 py-2.5 text-sm font-medium transition-all duration-100 ease-out ${
mios ? 'bg-accent text-white shadow-sm' : 'bg-white text-[#64748B] hover:text-[#111827]'
mios ? 'bg-accent text-white shadow-sm' : 'bg-white text-[#64748B] dark:text-[#94A3B8] hover:text-[#111827] dark:text-[#E2E8F0]'
}`}
>
Mis planes
@@ -313,7 +314,7 @@ export default function DashboardPage() {
onClick={() => actualizarParams({ vista: mios ? 'todos' : null })}
aria-pressed={!mios}
className={`rounded-r-lg px-4 py-2.5 text-sm font-medium transition-all duration-100 ease-out ${
mios ? 'bg-white text-[#64748B] hover:text-[#111827]' : 'bg-accent text-white shadow-sm'
mios ? 'bg-white text-[#64748B] dark:text-[#94A3B8] hover:text-[#111827] dark:text-[#E2E8F0]' : 'bg-accent text-white shadow-sm'
}`}
>
Todos
@@ -328,7 +329,7 @@ export default function DashboardPage() {
value={busqueda}
onChange={(e) => actualizarParams({ q: e.target.value })}
placeholder="Buscar por cliente o unidad…"
className="w-64 rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
className="w-full rounded-lg border border-[#D1D5DB] bg-white px-3 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20 sm:w-64"
/>
<label htmlFor="filtro-status" className="sr-only">
Filtrar por status
@@ -337,7 +338,7 @@ export default function DashboardPage() {
id="filtro-status"
value={filtroStatus}
onChange={(e) => actualizarParams({ status: e.target.value === 'TODOS' ? null : e.target.value })}
className="rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
className="rounded-lg border border-[#D1D5DB] bg-white px-3 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
>
<option value="TODOS">Todos los status</option>
<option value="ACTIVO">ACTIVO</option>
@@ -351,7 +352,7 @@ export default function DashboardPage() {
id="filtro-proyecto"
value={filtroProyecto}
onChange={(e) => actualizarParams({ proyecto: e.target.value === 'TODOS' ? null : e.target.value })}
className="rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
className="rounded-lg border border-[#D1D5DB] bg-white px-3 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
>
<option value="TODOS">Todos los proyectos</option>
{proyectos.map((p) => (
@@ -366,7 +367,7 @@ export default function DashboardPage() {
<div className="overflow-x-auto">
<table className="w-full text-left text-sm">
<thead>
<tr className="border-b border-[#E5E7EB] bg-[#F8FAFC] text-xs font-semibold uppercase tracking-wider text-[#64748B]">
<tr className="border-b border-[#E5E7EB] bg-[#F8FAFC] text-xs font-semibold uppercase tracking-wider text-[#64748B] dark:text-[#94A3B8]">
<th scope="col" className="px-4 py-3">Cliente</th>
<th scope="col" className="px-4 py-3">Unidad</th>
<th scope="col" className="px-4 py-3">Proyecto</th>
@@ -379,7 +380,7 @@ export default function DashboardPage() {
</thead>
<tbody className="divide-y divide-[#E5E7EB]">
{ordenados.map((d) => (
<tr key={d.plan.id} className="transition-colors duration-100 ease-out hover:bg-[#F8FAFC]">
<tr key={d.plan.id} className="transition-colors duration-100 ease-out hover:bg-[#F8FAFC] dark:bg-[#0F172A]">
<td className="px-4 py-3">
<Link to={`/planes/${d.plan.id}`} className="font-medium text-accent hover:underline">
{d.plan.clienteNombre}
@@ -395,7 +396,7 @@ export default function DashboardPage() {
style={{ width: `${Math.min(100, d.avance * 100)}%` }}
/>
</div>
<span className="text-xs text-[#64748B]">{formatoPorcentaje(d.avance)}</span>
<span className="text-xs text-[#64748B] dark:text-[#94A3B8]">{formatoPorcentaje(d.avance)}</span>
</div>
</td>
<td className="px-4 py-3">