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

36
apps/cotizador/src/components/MisCotizaciones.tsx
View File

@@ -36,7 +36,7 @@ export function MisCotizaciones({ cotizaciones, cargando, error, onRetomar }: Pr
<div className="flex flex-wrap items-center justify-between gap-4">
<h2
id="mis-cotizaciones-titulo"
className="text-xs font-bold tracking-widest text-neutral-500 uppercase"
className="text-xs font-semibold uppercase tracking-wider text-[#64748B]"
>
Mis cotizaciones
</h2>
@@ -45,18 +45,18 @@ export function MisCotizaciones({ cotizaciones, cargando, error, onRetomar }: Pr
aria-expanded={abierto}
aria-controls="mis-cotizaciones-contenido"
onClick={() => setAbierto((v) => !v)}
className="border border-neutral-900 bg-white px-5 py-2.5 text-xs font-bold tracking-widest text-neutral-900 uppercase transition-colors duration-150 hover:bg-neutral-100"
className="rounded-lg border border-[#D1D5DB] bg-white px-4 py-2 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
>
{abierto ? 'Ocultar historial' : `Ver historial (${cotizaciones.length})`}
</button>
</div>
{abierto && (
<div id="mis-cotizaciones-contenido" className="mt-6 border border-neutral-200 bg-white p-6">
{cargando && <p className="text-sm text-neutral-500">Cargando historial…</p>}
<div id="mis-cotizaciones-contenido" className="mt-6 rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
{cargando && <p className="text-sm text-[#64748B]">Cargando historial…</p>}
{error && <p className="text-xs text-red-700">{error}</p>}
{!cargando && !error && cotizaciones.length === 0 && (
<p className="text-sm text-neutral-500">
<p className="text-sm text-[#64748B]">
Aún no tienes cotizaciones guardadas. Se guardan al generar el PDF.
</p>
)}
@@ -64,13 +64,13 @@ export function MisCotizaciones({ cotizaciones, cargando, error, onRetomar }: Pr
<div className="overflow-x-auto">
<table className="w-full min-w-[640px] border-collapse text-sm">
<thead>
<tr>
<tr className="bg-[#F8FAFC]">
{['Fecha', 'Folio', 'Cliente', 'Unidad', 'Propuesta', 'Precio final', ''].map(
(h) => (
<th
key={h}
scope="col"
className="p-3 text-left text-xs font-bold tracking-widest text-neutral-500 uppercase"
className="p-3 text-left text-xs font-semibold uppercase tracking-wider text-[#64748B]"
>
{h}
</th>
@@ -80,36 +80,36 @@ export function MisCotizaciones({ cotizaciones, cargando, error, onRetomar }: Pr
</thead>
<tbody>
{cotizaciones.map((c) => (
<tr key={c.id}>
<td className="border-t border-neutral-200 p-3 whitespace-nowrap">
<tr key={c.id} className="hover:bg-[#F8FAFC]">
<td className="border-t border-[#E5E7EB] p-3 whitespace-nowrap">
{formatoFechaHora(c.createdAt)}
</td>
<td className="border-t border-neutral-200 p-3 whitespace-nowrap">
<td className="border-t border-[#E5E7EB] p-3 whitespace-nowrap">
{c.folio ?? '—'}
</td>
<td className="border-t border-neutral-200 p-3">{c.clienteNombre}</td>
<td className="border-t border-neutral-200 p-3 whitespace-nowrap">
<td className="border-t border-[#E5E7EB] p-3">{c.clienteNombre}</td>
<td className="border-t border-[#E5E7EB] p-3 whitespace-nowrap">
{c.unidadCodigo}
<span className="ml-1 text-xs text-neutral-400">{c.desarrollo}</span>
<span className="ml-1 text-xs text-[#64748B]">{c.desarrollo}</span>
</td>
<td className="border-t border-neutral-200 p-3 whitespace-nowrap">
<td className="border-t border-[#E5E7EB] p-3 whitespace-nowrap">
{TITULO_PROPUESTA[c.tipoPropuesta] ?? c.tipoPropuesta}
</td>
<td className="border-t border-neutral-200 p-3 text-right whitespace-nowrap">
<td className="border-t border-[#E5E7EB] p-3 text-right whitespace-nowrap">
{formatoMoneda(c.precioFinal)}
</td>
<td className="border-t border-neutral-200 p-3 text-right">
<td className="border-t border-[#E5E7EB] p-3 text-right">
<div className="flex justify-end gap-2">
<button
type="button"
onClick={() => onRetomar(c)}
className="border border-accent bg-white px-3 py-1.5 text-xs font-bold tracking-widest text-accent uppercase transition-colors duration-150 hover:bg-accent hover:text-white"
className="rounded-lg border border-accent bg-white px-3 py-1.5 text-xs font-medium text-accent transition-all duration-100 ease-out hover:bg-accent hover:text-white"
>
Retomar
</button>
<a
href={`/client/?cotizacion=${c.id}`}
className="border border-neutral-900 bg-white px-3 py-1.5 text-xs font-bold tracking-widest text-neutral-900 uppercase transition-colors duration-150 hover:bg-neutral-900 hover:text-white"
className="rounded-lg border border-[#D1D5DB] bg-white px-3 py-1.5 text-xs font-medium text-[#374151] transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
>
Iniciar alta
</a>