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

10
apps/cotizador/src/components/AuthGate.tsx
View File

@@ -17,17 +17,17 @@ export default function AuthGate({ children }: { children: ReactNode }) {
}
return (
<div className="min-h-screen bg-white text-neutral-900">
<div className="border-b border-neutral-200">
<div className="min-h-screen bg-[#F8FAFC] text-[#111827]">
<div className="border-b border-[#E5E7EB] bg-white">
<div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-2">
<span className="text-xs font-bold uppercase tracking-widest text-neutral-500">
<span className="text-xs font-medium text-[#64748B]">
{sesion.usuario.nombre} · {sesion.usuario.rol}
</span>
<div className="flex items-center gap-4">
<button
type="button"
onClick={() => setModalPassword(true)}
className="text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:text-neutral-900"
className="text-xs font-medium text-[#64748B] transition-colors duration-100 hover:text-[#111827]"
>
Contraseña
</button>
@@ -37,7 +37,7 @@ export default function AuthGate({ children }: { children: ReactNode }) {
logout()
setSesion(null)
}}
className="text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:text-accent-hover"
className="text-xs font-medium text-accent transition-colors duration-100 hover:text-accent-hover"
>
Salir
</button>

20
apps/cotizador/src/components/CambiarPasswordModal.tsx
View File

@@ -3,8 +3,8 @@ import { validarConfirmacion, validarPasswordNueva } from '../lib/password'
import { cambiarPassword } from '../services/auth'
const CLASE_INPUT =
'w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none'
const CLASE_LABEL = 'mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500'
'w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:ring-2 focus:ring-accent/20 focus:outline-none'
const CLASE_LABEL = 'mb-2 block text-xs font-medium text-[#4B5563]'
/**
* Modal "Cambiar contraseña": actual + nueva + confirmar. Valida en cliente
@@ -45,19 +45,19 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
aria-modal="true"
aria-label="Cambiar contraseña"
>
<div className="w-full max-w-sm border border-neutral-200 bg-white p-6">
<h2 className="mb-6 text-xs font-bold uppercase tracking-widest text-neutral-500">
<div className="w-full max-w-sm rounded-2xl border border-[#E5E7EB] bg-white p-6 shadow-xl">
<h2 className="mb-6 text-xs font-semibold uppercase tracking-wider text-[#64748B]">
Cambiar contraseña
</h2>
{exito ? (
<>
<p className="border border-accent px-4 py-3 text-xs font-bold uppercase tracking-widest text-accent">
<p className="rounded-lg bg-green-50 px-4 py-3 text-xs font-medium text-green-700">
Contraseña actualizada
</p>
<button
type="button"
onClick={onCerrar}
className="mt-6 w-full bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover"
className="mt-6 w-full 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"
>
Cerrar
</button>
@@ -92,7 +92,7 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
required
className={CLASE_INPUT}
/>
<p className="mt-2 text-xs text-neutral-400">Mínimo 8 caracteres y un número</p>
<p className="mt-2 text-xs text-[#64748B]">Mínimo 8 caracteres y un número</p>
</div>
<div>
<label htmlFor="password-confirmar" className={CLASE_LABEL}>
@@ -111,7 +111,7 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
{error && (
<p
role="alert"
className="border border-red-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-red-700"
className="rounded-lg bg-red-50 px-4 py-3 text-xs font-medium text-red-700"
>
{error}
</p>
@@ -120,14 +120,14 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
<button
type="submit"
disabled={cargando}
className="flex-1 bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
className="flex-1 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 disabled:opacity-50"
>
{cargando ? 'Guardando…' : 'Guardar'}
</button>
<button
type="button"
onClick={onCerrar}
className="border border-neutral-300 px-5 py-3 text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:border-neutral-500"
className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
>
Cancelar
</button>

24
apps/cotizador/src/components/ComparadorPropuestas.tsx
View File

@@ -76,7 +76,7 @@ export function ComparadorPropuestas({ precioLista, apartado, propuestas, titulo
<div className="flex flex-wrap items-center justify-between gap-4">
<h2
id="comparador-titulo"
className="text-xs font-bold tracking-widest text-neutral-500 uppercase"
className="text-xs font-semibold uppercase tracking-wider text-[#64748B]"
>
Comparar propuestas
</h2>
@@ -85,18 +85,18 @@ export function ComparadorPropuestas({ precioLista, apartado, propuestas, titulo
aria-expanded={abierto}
aria-controls="comparador-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 comparación' : 'Comparar propuestas'}
</button>
</div>
{abierto && (
<div id="comparador-contenido" className="mt-6 border border-neutral-200 bg-white p-6">
<div id="comparador-contenido" className="mt-6 rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
<div className="overflow-x-auto">
<table className="w-full min-w-[720px] border-collapse text-sm">
<thead>
<tr>
<tr className="bg-[#F8FAFC]">
<th scope="col" className="w-48 p-3 text-left align-bottom">
<span className="sr-only">Concepto</span>
</th>
@@ -106,11 +106,11 @@ export function ComparadorPropuestas({ precioLista, apartado, propuestas, titulo
scope="col"
className={`p-3 text-right align-bottom ${bordeColumna(i, 'inicio')}`}
>
<span className="block text-xs font-bold tracking-widest text-neutral-900 uppercase">
<span className="block text-xs font-semibold uppercase tracking-wider text-[#111827]">
{titulos[i] ?? p.tipo}
</span>
{i === ganador && (
<span className="mt-2 inline-block border border-accent px-2 py-0.5 text-xs font-bold tracking-widest text-accent uppercase">
<span className="mt-2 inline-block rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-700">
Menor total
</span>
)}
@@ -120,20 +120,20 @@ export function ComparadorPropuestas({ precioLista, apartado, propuestas, titulo
</thead>
<tbody>
{filas.map((fila, indiceFila) => (
<tr key={fila.etiqueta}>
<tr key={fila.etiqueta} className="hover:bg-[#F8FAFC]">
<th
scope="row"
className="border-t border-neutral-200 p-3 text-left text-xs font-bold tracking-widest text-neutral-500 uppercase"
className="border-t border-[#E5E7EB] p-3 text-left text-xs font-medium text-[#64748B]"
>
{fila.etiqueta}
</th>
{propuestas.map((p, i) => (
<td
key={p.tipo}
className={`border-t border-neutral-200 p-3 text-right whitespace-nowrap ${
className={`border-t border-[#E5E7EB] p-3 text-right whitespace-nowrap ${
fila.destacada
? `font-bold ${i === ganador ? 'text-accent' : 'text-neutral-900'}`
: 'font-light text-neutral-900'
? `font-semibold ${i === ganador ? 'text-accent' : 'text-[#111827]'}`
: 'text-[#111827]'
} ${bordeColumna(
i,
indiceFila === filas.length - 1 ? 'fin' : 'media',
@@ -147,7 +147,7 @@ export function ComparadorPropuestas({ precioLista, apartado, propuestas, titulo
</tbody>
</table>
</div>
<p className="mt-6 text-xs text-neutral-400">
<p className="mt-6 text-xs text-[#64748B]">
El enganche ya incluye la deducción del apartado. El total pagado suma apartado +
enganche + mensualidades + pago final.
</p>

26
apps/cotizador/src/components/ComparadorUnidades.tsx
View File

@@ -71,14 +71,14 @@ export function ComparadorUnidades({ unidades, tipo, apartado, acabados }: Props
const selector = (id: string, valor: string, onChange: (v: string) => void, etiqueta: string) => (
<div>
<label htmlFor={id} className="mb-2 block text-xs font-bold tracking-widest text-neutral-500 uppercase">
<label htmlFor={id} className="mb-2 block text-xs font-medium text-[#4B5563]">
{etiqueta}
</label>
<select
id={id}
value={valor}
onChange={(e) => onChange(e.target.value)}
className="w-full border border-neutral-300 bg-white px-3 py-2.5 text-sm transition-colors duration-150 focus:border-neutral-900 focus:outline-none"
className="w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:ring-2 focus:ring-accent/20 focus:outline-none"
>
<option value="">Selecciona una unidad…</option>
{LISTA_DESARROLLOS.map((dev) => {
@@ -103,7 +103,7 @@ export function ComparadorUnidades({ unidades, tipo, apartado, acabados }: Props
<div className="flex flex-wrap items-center justify-between gap-4">
<h2
id="comparador-unidades-titulo"
className="text-xs font-bold tracking-widest text-neutral-500 uppercase"
className="text-xs font-semibold uppercase tracking-wider text-[#64748B]"
>
Comparar unidades
</h2>
@@ -112,28 +112,28 @@ export function ComparadorUnidades({ unidades, tipo, apartado, acabados }: Props
aria-expanded={abierto}
aria-controls="comparador-unidades-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 comparación' : 'Comparar 2 unidades'}
</button>
</div>
{abierto && (
<div id="comparador-unidades-contenido" className="mt-6 border border-neutral-200 bg-white p-6">
<div id="comparador-unidades-contenido" className="mt-6 rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
<div className="grid gap-6 md:grid-cols-2">
{selector('comparador-a', codigoA, setCodigoA, 'Unidad A')}
{selector('comparador-b', codigoB, setCodigoB, 'Unidad B')}
</div>
{!comparacion ? (
<p className="mt-6 text-sm text-neutral-500">
<p className="mt-6 text-sm text-[#64748B]">
Selecciona dos unidades para ver la comparación lado a lado.
</p>
) : (
<div className="mt-6 overflow-x-auto">
<table className="w-full min-w-[480px] border-collapse text-sm">
<thead>
<tr>
<tr className="bg-[#F8FAFC]">
<th scope="col" className="w-48 p-3 text-left">
<span className="sr-only">Concepto</span>
</th>
@@ -141,7 +141,7 @@ export function ComparadorUnidades({ unidades, tipo, apartado, acabados }: Props
<th
key={`${c.desarrolloId}|${c.unidad.codigo}`}
scope="col"
className="p-3 text-right text-xs font-bold tracking-widest text-neutral-900 uppercase"
className="p-3 text-right text-xs font-semibold uppercase tracking-wider text-[#111827]"
>
{c.unidad.codigo}
</th>
@@ -150,18 +150,18 @@ export function ComparadorUnidades({ unidades, tipo, apartado, acabados }: Props
</thead>
<tbody>
{filas.map((fila) => (
<tr key={fila.etiqueta}>
<tr key={fila.etiqueta} className="hover:bg-[#F8FAFC]">
<th
scope="row"
className="border-t border-neutral-200 p-3 text-left text-xs font-bold tracking-widest text-neutral-500 uppercase"
className="border-t border-[#E5E7EB] p-3 text-left text-xs font-medium text-[#64748B]"
>
{fila.etiqueta}
</th>
{[comparacion.a, comparacion.b].map((c) => (
<td
key={`${c.desarrolloId}|${c.unidad.codigo}`}
className={`border-t border-neutral-200 p-3 text-right whitespace-nowrap ${
fila.destacada ? 'font-bold text-accent' : 'font-light text-neutral-900'
className={`border-t border-[#E5E7EB] p-3 text-right whitespace-nowrap ${
fila.destacada ? 'font-semibold text-accent' : 'text-[#111827]'
}`}
>
{fila.obtener(c)}
@@ -171,7 +171,7 @@ export function ComparadorUnidades({ unidades, tipo, apartado, acabados }: Props
))}
</tbody>
</table>
<p className="mt-6 text-xs text-neutral-400">
<p className="mt-6 text-xs text-[#64748B]">
Cada unidad se calcula con los parámetros de su desarrollo y el mismo apartado.
El enganche ya incluye la deducción del apartado.
</p>

26
apps/cotizador/src/components/LoginScreen.tsx
View File

@@ -1,7 +1,7 @@
import { useState, type FormEvent } from 'react'
import { login, ErrorLogin, type UsuarioSesion } from '../services/auth'
/** Pantalla de login StudioBlank: marca FRASA, usuario + contraseña, Enter envía */
/** Pantalla de login NovaSpark: marca FRASA, usuario + contraseña, Enter envía */
export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSesion) => void }) {
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
@@ -22,11 +22,13 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
}
return (
<div className="flex min-h-screen items-center justify-center bg-white px-4">
<div className="w-full max-w-sm">
<div className="mb-10 text-center">
<p className="text-lg font-bold tracking-widest">FRASA</p>
<p className="mt-2 text-xs font-bold uppercase tracking-widest text-neutral-500">
<div className="flex min-h-screen items-center justify-center bg-[#F8FAFC] px-4">
<div className="w-full max-w-sm rounded-xl border border-[#E5E7EB] bg-white p-8 shadow-sm">
<div className="mb-8 text-center">
<p className="text-lg font-bold tracking-wide">
FRASA<span className="text-[#F97316]">.</span>
</p>
<p className="mt-2 text-xs font-medium text-[#64748B]">
Acceso al ecosistema
</p>
</div>
@@ -34,7 +36,7 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
<div>
<label
htmlFor="login-usuario"
className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500"
className="mb-2 block text-xs font-medium text-[#4B5563]"
>
Usuario
</label>
@@ -46,13 +48,13 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
autoComplete="username"
autoFocus
required
className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
className="w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:ring-2 focus:ring-accent/20 focus:outline-none"
/>
</div>
<div>
<label
htmlFor="login-password"
className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500"
className="mb-2 block text-xs font-medium text-[#4B5563]"
>
Contraseña
</label>
@@ -63,13 +65,13 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
onChange={(e) => setPassword(e.target.value)}
autoComplete="current-password"
required
className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
className="w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:ring-2 focus:ring-accent/20 focus:outline-none"
/>
</div>
{error && (
<p
role="alert"
className="border border-red-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-red-700"
className="rounded-lg bg-red-50 px-4 py-3 text-xs font-medium text-red-700"
>
{error}
</p>
@@ -77,7 +79,7 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
<button
type="submit"
disabled={cargando}
className="w-full bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
className="w-full 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 disabled:opacity-50"
>
{cargando ? 'Entrando…' : 'Entrar'}
</button>

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>

14
apps/cotizador/src/components/ModalCliente.tsx
View File

@@ -12,8 +12,8 @@ interface Props {
}
const campoInput =
'w-full border border-neutral-300 bg-white px-3 py-2.5 text-sm transition-colors duration-150 focus:border-neutral-900 focus:outline-none'
const etiquetaCampo = 'mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500'
'w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:ring-2 focus:ring-accent/20 focus:outline-none'
const etiquetaCampo = 'mb-2 block text-xs font-medium text-[#4B5563]'
/**
* Modal sencillo para pedir los datos del cliente cuando se va a
@@ -55,14 +55,14 @@ export function ModalCliente({ abierto, nombreInicial = '', telefonoInicial = ''
aria-modal="true"
aria-labelledby="modal-cliente-titulo"
>
<div className="w-full max-w-md border border-neutral-200 bg-white p-6">
<div className="w-full max-w-md rounded-2xl border border-[#E5E7EB] bg-white p-6 shadow-xl">
<h2
id="modal-cliente-titulo"
className="text-xs font-bold tracking-widest text-neutral-500 uppercase"
className="text-xs font-semibold uppercase tracking-wider text-[#64748B]"
>
Datos del cliente
</h2>
<p className="mt-2 text-sm text-neutral-600">
<p className="mt-2 text-sm text-[#4B5563]">
Se necesitan para guardar la cotización y generar el PDF.
</p>
@@ -113,14 +113,14 @@ export function ModalCliente({ abierto, nombreInicial = '', telefonoInicial = ''
<button
type="button"
onClick={onCancelar}
className="border border-neutral-300 bg-white px-5 py-2.5 text-xs font-bold tracking-widest text-neutral-600 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]"
>
Cancelar
</button>
<button
type="button"
onClick={aceptar}
className="bg-accent px-5 py-2.5 text-xs font-bold tracking-widest text-white uppercase transition-colors duration-150 hover:bg-accent-hover"
className="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover"
>
Continuar
</button>

20
apps/cotizador/src/components/ProposalCard.tsx
View File

@@ -11,15 +11,15 @@ interface Props {
function Renglon({ etiqueta, valor, nota }: { etiqueta: string; valor: string; nota?: string }) {
return (
<div className="flex items-baseline justify-between gap-2 py-2">
<span className="text-xs font-bold tracking-widest text-neutral-500 uppercase">
<span className="text-xs font-medium text-[#64748B]">
{etiqueta}
{nota && (
<span className="mt-0.5 block text-xs font-normal tracking-normal text-neutral-400 normal-case">
<span className="mt-0.5 block text-xs font-normal text-[#64748B]">
{nota}
</span>
)}
</span>
<span className="text-lg font-light text-neutral-900">{valor}</span>
<span className="text-lg font-medium text-[#111827]">{valor}</span>
</div>
)
}
@@ -29,18 +29,18 @@ export function ProposalCard({ numero, titulo, propuesta, onDescuentoChange }: P
const porcentaje = propuesta.descuento * 100
return (
<article className="flex flex-col border border-neutral-200 bg-white p-6">
<header className="mb-6 border-b border-neutral-200 pb-4">
<p className="text-xs font-bold tracking-widest text-accent uppercase">
<article className="flex flex-col rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm transition-all duration-200 hover:shadow-md">
<header className="mb-6 border-b border-[#E5E7EB] pb-4">
<p className="text-xs font-semibold uppercase tracking-wider text-accent">
Propuesta comercial #{numero}
</p>
<h2 className="mt-1 text-xl font-light text-neutral-900">{titulo}</h2>
<h2 className="mt-1 text-xl font-semibold text-[#111827]">{titulo}</h2>
</header>
<div className="mb-6">
<label
htmlFor={`descuento-${propuesta.tipo}`}
className="mb-2 block text-xs font-bold tracking-widest text-neutral-500 uppercase"
className="mb-2 block text-xs font-medium text-[#4B5563]"
>
Descuento (%)
</label>
@@ -55,11 +55,11 @@ export function ProposalCard({ numero, titulo, propuesta, onDescuentoChange }: P
const v = Number(e.target.value)
onDescuentoChange(Number.isFinite(v) ? Math.min(100, Math.max(0, v)) / 100 : 0)
}}
className="w-28 border border-neutral-300 bg-white px-3 py-2.5 text-sm transition-colors duration-150 focus:border-neutral-900 focus:outline-none"
className="w-28 rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:ring-2 focus:ring-accent/20 focus:outline-none"
/>
</div>
<div className="divide-y divide-neutral-200">
<div className="divide-y divide-[#E5E7EB]">
<Renglon etiqueta="Monto de descuento" valor={formatoMoneda(propuesta.montoDescuento)} />
<Renglon etiqueta="Precio final c/desc." valor={formatoMoneda(propuesta.precioFinal)} />
<Renglon

16
apps/cotizador/src/components/UnitInfoCard.tsx
View File

@@ -9,8 +9,8 @@ interface Props {
function Fila({ etiqueta, valor }: { etiqueta: string; valor: string }) {
return (
<div className="flex items-center justify-between py-2">
<dt className="text-sm text-neutral-500">{etiqueta}</dt>
<dd className="text-sm font-medium text-neutral-900">{valor}</dd>
<dt className="text-sm text-[#64748B]">{etiqueta}</dt>
<dd className="text-sm font-medium text-[#111827]">{valor}</dd>
</div>
)
}
@@ -33,16 +33,18 @@ export function UnitInfoCard({ unidad, numMeses }: Props) {
const extras = unidad.extras ?? {}
const etiquetaStatus = ETIQUETA_STATUS[unidad.status]
return (
<section className="border border-neutral-200 bg-white p-6">
<h2 className="mb-4 text-xs font-bold tracking-widest text-neutral-900 uppercase">
<section className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
<h2 className="mb-4 text-xs font-semibold uppercase tracking-wider text-[#111827]">
Unidad {unidad.codigo}
</h2>
{etiquetaStatus !== undefined && unidad.etapa != null && unidad.etapa !== '' && (
<p className="mb-4 text-xs text-neutral-500">
{etiquetaStatus} — en {unidad.etapa.toLowerCase()}
<p className="mb-4">
<span className="rounded-full bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-700">
{etiquetaStatus} — en {unidad.etapa.toLowerCase()}
</span>
</p>
)}
<dl className="divide-y divide-neutral-200">
<dl className="divide-y divide-[#E5E7EB]">
<Fila etiqueta="Modelo" valor={unidad.modelo} />
{extras['prototipo'] != null && <Fila etiqueta="Prototipo" valor={String(extras['prototipo'])} />}
{extras['etapa'] != null && <Fila etiqueta="Etapa" valor={String(extras['etapa'])} />}

16
apps/cotizador/src/components/UnitSelector.tsx
View File

@@ -78,7 +78,7 @@ export function UnitSelector({ unidades, valor, onChange }: Props) {
<div ref={contenedorRef} className="relative">
<label
htmlFor="unidad"
className="mb-2 block text-xs font-bold tracking-widest text-neutral-500 uppercase"
className="mb-2 block text-xs font-medium text-[#4B5563]"
>
Unidad
</label>
@@ -100,17 +100,17 @@ export function UnitSelector({ unidades, valor, onChange }: Props) {
}}
onFocus={() => setAbierto(true)}
onKeyDown={onKeyDown}
className="w-full border border-neutral-300 bg-white px-3 py-2.5 text-sm transition-colors duration-150 focus:border-neutral-900 focus:outline-none"
className="w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:ring-2 focus:ring-accent/20 focus:outline-none"
/>
{abierto && (
<ul
id="unidad-listbox"
role="listbox"
aria-label="Unidades disponibles"
className="absolute z-10 mt-1 max-h-64 w-full overflow-auto border border-neutral-300 bg-white"
className="absolute z-10 mt-1 max-h-64 w-full overflow-auto rounded-lg border border-[#E5E7EB] bg-white shadow-xl"
>
{opciones.length === 0 ? (
<li className="px-3 py-2.5 text-sm text-neutral-500">Sin unidades que coincidan</li>
<li className="px-3 py-2.5 text-sm text-[#64748B]">Sin unidades que coincidan</li>
) : (
opciones.map((u, i) => (
<li
@@ -127,12 +127,12 @@ export function UnitSelector({ unidades, valor, onChange }: Props) {
}}
onMouseEnter={() => setIndiceActivo(i)}
className={`cursor-pointer px-3 py-2.5 text-sm ${
i === indiceActivo ? 'bg-neutral-100' : 'bg-white'
i === indiceActivo ? 'bg-[#F8FAFC]' : 'bg-white'
}`}
>
<span className="font-medium text-neutral-900">{u.codigo}</span>
<span className="text-neutral-500"> — Modelo {u.modelo} — </span>
<span className="text-neutral-900">{formatoMoneda(u.precioSinAcabados)}</span>
<span className="font-medium text-[#111827]">{u.codigo}</span>
<span className="text-[#64748B]"> — Modelo {u.modelo} — </span>
<span className="text-[#111827]">{formatoMoneda(u.precioSinAcabados)}</span>
</li>
))
)}