Consult AS Technology
599dce2629
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).
52 lines
2.2 KiB
TypeScript
52 lines
2.2 KiB
TypeScript
import { useFormContext } from 'react-hook-form'
|
|
import { CampoNumero, CampoTexto } from '../components/Campos'
|
|
import SectionCard from '../components/SectionCard'
|
|
import { formatoMoneda } from '../lib/formatters'
|
|
|
|
interface Props {
|
|
prefix: string
|
|
}
|
|
|
|
/** Campos de datos económicos con totales calculados de solo lectura */
|
|
export default function EconomicosCampos({ prefix }: Props) {
|
|
const { watch } = useFormContext()
|
|
const p = (campo: string) => `${prefix}${campo}`
|
|
|
|
const ingresosMensuales = Number(watch(p('ingresosMensuales'))) || 0
|
|
const otrosIngresos = Number(watch(p('otrosIngresos'))) || 0
|
|
const gastosLuz = Number(watch(p('gastosLuz'))) || 0
|
|
const gastosOtros = Number(watch(p('gastosOtros'))) || 0
|
|
|
|
return (
|
|
<SectionCard titulo="Datos económicos">
|
|
<CampoNumero nombre={p('ingresosMensuales')} etiqueta="Ingresos mensuales" />
|
|
<CampoNumero nombre={p('otrosIngresos')} etiqueta="Otros ingresos" />
|
|
<label htmlFor={`${prefix}totalIngresos`} className="block">
|
|
<span className="mb-1 block text-xs font-medium text-[#4B5563]">Total ingresos</span>
|
|
<input
|
|
id={`${prefix}totalIngresos`}
|
|
type="text"
|
|
readOnly
|
|
value={formatoMoneda(ingresosMensuales + otrosIngresos)}
|
|
className="w-full rounded-lg border border-[#E5E7EB] bg-[#F8FAFC] px-3 py-2.5 text-sm font-semibold text-[#111827]"
|
|
/>
|
|
</label>
|
|
<CampoNumero nombre={p('gastosLuz')} etiqueta="Gastos luz" />
|
|
<CampoNumero nombre={p('gastosOtros')} etiqueta="Otros gastos" />
|
|
<label htmlFor={`${prefix}gastosTotal`} className="block">
|
|
<span className="mb-1 block text-xs font-medium text-[#4B5563]">Gastos total</span>
|
|
<input
|
|
id={`${prefix}gastosTotal`}
|
|
type="text"
|
|
readOnly
|
|
value={formatoMoneda(gastosLuz + gastosOtros)}
|
|
className="w-full rounded-lg border border-[#E5E7EB] bg-[#F8FAFC] px-3 py-2.5 text-sm font-semibold text-[#111827]"
|
|
/>
|
|
</label>
|
|
<CampoTexto nombre={p('dependientes.personas')} etiqueta="Dependientes económicos (personas)" />
|
|
<CampoTexto nombre={p('dependientes.parentesco')} etiqueta="Parentesco" />
|
|
<CampoTexto nombre={p('dependientes.edad')} etiqueta="Edad" />
|
|
</SectionCard>
|
|
)
|
|
}
|