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

style: reskin NovaSpark en las 7 apps

Browse Source 
Del look editorial (verde #1B4332, esquinas a 0, botones en mayusculas)
al sistema NovaSpark: primario azul #2563EB, detalle naranja #F97316,
fondo #F8FAFC con tarjetas blancas rounded-xl + shadow-sm, chips
rounded-full semanticos, focus ring azul, transiciones 100-200ms.
Incluye headers de tabla en los PDFs (cotizador y estado de cuenta).
This commit is contained in:
Consult AS Technology
2026-09-03 02:35:34 +00:00
parent 89fcd1c579
commit 599dce2629
78 changed files with 842 additions and 828 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
apps/cobranza/src/pages/HoyPage.tsx
View File

@@ -36,17 +36,17 @@ export default function HoyPage() {
if (!resultado) {
return errorCarga ? (
<div className="border border-red-300 bg-white px-4 py-3 text-sm text-red-700">{errorCarga}</div>
<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-neutral-400">Cargando...</p>
<p className="text-sm text-[#64748B]">Cargando...</p>
)
}
return (
<div className="space-y-16">
<div className="space-y-8">
<div>
<h1 className="text-3xl font-light text-neutral-900">Cobranza del día</h1>
<p className="mt-1 text-sm text-neutral-500">
<h1 className="text-3xl font-light text-[#111827]">Cobranza del día</h1>
<p className="mt-1 text-sm text-[#64748B]">
Pagos vencidos y vencimientos de los próximos 7 días, en todos los planes activos.
</p>
{resultado.origen === 'local' && (
@@ -62,29 +62,29 @@ export default function HoyPage() {
<KpiCard titulo="Monto por cobrar" valor={formatoMoneda(totalPorCobrar)} />
</div>
<div className="overflow-x-auto">
<div className="overflow-x-auto rounded-xl border border-[#E5E7EB] bg-white shadow-sm">
<table className="w-full text-left text-sm">
<thead>
<tr className="border-b border-neutral-900 text-xs font-bold uppercase tracking-widest text-neutral-500">
<th scope="col" className="py-3 pr-4">Cliente</th>
<th scope="col" className="py-3 pr-4">Teléfono</th>
<th scope="col" className="py-3 pr-4">Unidad</th>
<th scope="col" className="py-3 pr-4"># pago</th>
<th scope="col" className="py-3 pr-4">Vencimiento</th>
<th scope="col" className="py-3 pr-4 text-right">Monto</th>
<th scope="col" className="py-3 pr-4 text-right">Restante</th>
<th scope="col" className="py-3 pr-4 text-right">Días atraso</th>
<th scope="col" className="py-3">Plan</th>
<tr className="border-b border-[#E5E7EB] bg-[#F8FAFC] text-xs font-semibold uppercase tracking-wider text-[#64748B]">
<th scope="col" className="px-4 py-3">Cliente</th>
<th scope="col" className="px-4 py-3">Teléfono</th>
<th scope="col" className="px-4 py-3">Unidad</th>
<th scope="col" className="px-4 py-3"># pago</th>
<th scope="col" className="px-4 py-3">Vencimiento</th>
<th scope="col" className="px-4 py-3 text-right">Monto</th>
<th scope="col" className="px-4 py-3 text-right">Restante</th>
<th scope="col" className="px-4 py-3 text-right">Días atraso</th>
<th scope="col" className="px-4 py-3">Plan</th>
</tr>
</thead>
<tbody>
<tbody className="divide-y divide-[#E5E7EB]">
{items.map(({ plan, pago, atraso }) => (
<tr
key={`${plan.id}-${pago.id}`}
className="border-b border-neutral-200 transition-colors duration-150 hover:bg-neutral-50"
className="transition-colors duration-100 ease-out hover:bg-[#F8FAFC]"
>
<td className="py-3 pr-4 font-medium">{plan.clienteNombre}</td>
<td className="py-3 pr-4">
<td className="px-4 py-3 font-medium">{plan.clienteNombre}</td>
<td className="px-4 py-3">
{plan.clienteTelefono ? (
<a href={`tel:${plan.clienteTelefono.replace(/\s/g, '')}`} className="text-accent hover:underline">
{plan.clienteTelefono}
@@ -93,14 +93,14 @@ export default function HoyPage() {
<span className="text-neutral-400">—</span>
)}
</td>
<td className="py-3 pr-4">{plan.unidadCodigo}</td>
<td className="py-3 pr-4">{pago.numPago}</td>
<td className="py-3 pr-4">{formatoFechaCorta(pago.fechaVencimiento)}</td>
<td className="py-3 pr-4 text-right">{formatoMoneda(pago.monto)}</td>
<td className="py-3 pr-4 text-right font-medium">
<td className="px-4 py-3">{plan.unidadCodigo}</td>
<td className="px-4 py-3">{pago.numPago}</td>
<td className="px-4 py-3">{formatoFechaCorta(pago.fechaVencimiento)}</td>
<td className="px-4 py-3 text-right">{formatoMoneda(pago.monto)}</td>
<td className="px-4 py-3 text-right font-medium">
{formatoMoneda(round2(pago.monto - pago.montoPagado))}
</td>
<td className="py-3 pr-4 text-right">
<td className="px-4 py-3 text-right">
{atraso > 0 ? (
<span className="font-medium text-red-700">{atraso}</span>
) : (
@@ -109,7 +109,7 @@ export default function HoyPage() {
</span>
)}
</td>
<td className="py-3">
<td className="px-4 py-3">
<Link to={`/planes/${plan.id}`} className="text-accent hover:underline">
Ver plan
</Link>