feat(policies): full CRUD + child editors + insurance lookups (plan phase 3)
Policy header, all five child collections, and the insurance reference catalogs become create/edit/delete-able on the RBAC foundation. API: - Policy gains archivedAt (soft-delete); list/browser default to archivedAt=null with ?includeArchived opt-in. - PoliciesService: header create/update/archive/restore (customer FK validated for a clean 404); add/update/remove for installments, vehicles, drivers, beneficiaries, claims — each scoped to its policy so one policy's id can't touch another's rows; lookups CRUD for providers, policy types, adjusters. - PoliciesController write routes: header create/update need STAFF+ (policy:create/update), archive/restore need MANAGER+ (policy:delete), every child route needs policy:update. New LookupsController at /lookups (read open; mutate needs lookup:manage / MANAGER+). Mutations audited. - DTOs (policy header, children, lookups); dates coerced; shared coerce.ts. Web: - Generic ChildCollection editor (config-driven add/edit/remove table), reused by both the policy detail child editors and the catalogs screen. - PolicyForm (header) with type/provider selects and a debounced CustomerPicker; /polizas/nuevo (accepts ?customerId prefill) and /polizas/[id]/editar. Policy detail: gated action bar (Editar/Archivar) + "Administrar detalles" child editors for all five collections. - /catalogos admin screen (aseguradoras/tipos/ajustadores), nav-gated on lookup:manage. "Nueva póliza" buttons on the list and on the customer detail (prefilled). api.ts + types for all of the above. Verified against dev: policy create (dates coerced, archivedAt null), installment/vehicle add, VIEWER child-add 403, cross-policy child guard 404, lookups CRUD with VIEWER 403 / MANAGER 201, archive drops from the default list and includeArchived surfaces it. Both apps compile clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -0,0 +1,102 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { AppShell } from "@/components/AppShell";
|
||||
import { ChildCollection, type ChildConfig } from "@/components/ChildCollection";
|
||||
import { useCan } from "@/lib/abilities";
|
||||
import { createLookup, getLookups, removeLookup, updateLookup } from "@/lib/api";
|
||||
import type { LookupsResponse } from "@/lib/types";
|
||||
|
||||
const PROVIDER: ChildConfig = {
|
||||
apiKind: "providers",
|
||||
title: "Aseguradoras",
|
||||
fields: [{ key: "name", label: "Nombre" }],
|
||||
};
|
||||
const TYPE: ChildConfig = {
|
||||
apiKind: "policy-types",
|
||||
title: "Tipos de póliza",
|
||||
fields: [
|
||||
{ key: "name", label: "Nombre" },
|
||||
{ key: "shortDescription", label: "Descripción" },
|
||||
],
|
||||
};
|
||||
const ADJUSTER: ChildConfig = {
|
||||
apiKind: "adjusters",
|
||||
title: "Ajustadores",
|
||||
fields: [
|
||||
{ key: "company", label: "Empresa" },
|
||||
{ key: "name", label: "Nombre" },
|
||||
{ key: "city", label: "Ciudad" },
|
||||
{ key: "phone", label: "Teléfono" },
|
||||
{ key: "beeper", label: "Beeper" },
|
||||
],
|
||||
};
|
||||
|
||||
export default function CatalogosPage() {
|
||||
return (
|
||||
<AppShell>
|
||||
<Catalogos />
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
function Catalogos() {
|
||||
const canEdit = useCan("lookup:manage");
|
||||
const [data, setData] = useState<LookupsResponse | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
function reload() {
|
||||
getLookups().then(setData).catch((e) => setError(e?.message ?? "Error al cargar."));
|
||||
}
|
||||
useEffect(reload, []);
|
||||
|
||||
if (!canEdit) {
|
||||
return (
|
||||
<>
|
||||
<div className="page-head"><h1 className="page-title">Catálogos</h1></div>
|
||||
<div className="state-box state-error">
|
||||
No tiene permisos para administrar catálogos.
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const section = (config: ChildConfig, rows: Record<string, unknown>[]) => (
|
||||
<ChildCollection
|
||||
config={config}
|
||||
rows={rows}
|
||||
canEdit={canEdit}
|
||||
onAdd={async (p) => {
|
||||
await createLookup(config.apiKind, p);
|
||||
reload();
|
||||
}}
|
||||
onSave={async (id, p) => {
|
||||
await updateLookup(config.apiKind, id, p);
|
||||
reload();
|
||||
}}
|
||||
onRemove={async (id) => {
|
||||
await removeLookup(config.apiKind, id);
|
||||
reload();
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="page-head">
|
||||
<p className="eyebrow">Datos de referencia de seguros</p>
|
||||
<h1 className="page-title">Catálogos</h1>
|
||||
</div>
|
||||
{error && <div className="state-box state-error">{error}</div>}
|
||||
{!data ? (
|
||||
<div className="empty-inline"><span className="spinner" aria-label="Cargando" /></div>
|
||||
) : (
|
||||
<>
|
||||
{section(PROVIDER, data.providers as unknown as Record<string, unknown>[])}
|
||||
{section(TYPE, data.types as unknown as Record<string, unknown>[])}
|
||||
{section(ADJUSTER, data.adjusters as unknown as Record<string, unknown>[])}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -98,7 +98,11 @@ function Detail({ id }: { id: string }) {
|
||||
|
||||
<DatosSection data={data} />
|
||||
<PropiedadesSection properties={data.properties} />
|
||||
<PolizasSection policies={data.policies} />
|
||||
<PolizasSection
|
||||
policies={data.policies}
|
||||
customerId={data.id}
|
||||
customerName={data.name}
|
||||
/>
|
||||
<EstadoCuentaSection
|
||||
customerId={data.id}
|
||||
summary={data.transactionSummary}
|
||||
@@ -452,14 +456,33 @@ function PropertyCard({ p }: { p: Property }) {
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------ Pólizas de seguro */
|
||||
function PolizasSection({ policies }: { policies: Policy[] }) {
|
||||
function PolizasSection({
|
||||
policies,
|
||||
customerId,
|
||||
customerName,
|
||||
}: {
|
||||
policies: Policy[];
|
||||
customerId: string;
|
||||
customerName: string;
|
||||
}) {
|
||||
const canCreate = useCan("policy:create");
|
||||
return (
|
||||
<section className="section">
|
||||
<SectionHead
|
||||
rule="seguros"
|
||||
title="Pólizas de seguro"
|
||||
count={policies.length}
|
||||
/>
|
||||
<div className="detail-actionbar">
|
||||
<SectionHead
|
||||
rule="seguros"
|
||||
title="Pólizas de seguro"
|
||||
count={policies.length}
|
||||
/>
|
||||
{canCreate && (
|
||||
<Link
|
||||
href={`/polizas/nuevo?customerId=${customerId}&customerName=${encodeURIComponent(customerName)}`}
|
||||
className="btn btn-outline"
|
||||
>
|
||||
+ Nueva póliza
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
<div className="card">
|
||||
{policies.length === 0 ? (
|
||||
<div className="empty-inline">
|
||||
|
||||
@@ -315,6 +315,59 @@ button {
|
||||
color: var(--muted, #6b7280);
|
||||
margin: 4px 0 14px;
|
||||
}
|
||||
.child-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.child-editor {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||
margin-top: 12px;
|
||||
padding-top: 14px;
|
||||
}
|
||||
.picker {
|
||||
position: relative;
|
||||
}
|
||||
.picker-selected {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.picker-list {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 4px 0 0;
|
||||
padding: 4px;
|
||||
list-style: none;
|
||||
background: var(--card-bg, #fff);
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
max-height: 280px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.picker-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 8px 10px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
.picker-item:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Buttons
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { AppShell } from "@/components/AppShell";
|
||||
import { PolicyForm } from "@/components/PolicyForm";
|
||||
import { useCan } from "@/lib/abilities";
|
||||
import { getPolicy } from "@/lib/api";
|
||||
import type { PolicyDetail } from "@/lib/types";
|
||||
|
||||
export default function EditarPolizaPage({
|
||||
params,
|
||||
}: {
|
||||
params: { id: string };
|
||||
}) {
|
||||
return (
|
||||
<AppShell>
|
||||
<EditarPoliza id={params.id} />
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
function EditarPoliza({ id }: { id: string }) {
|
||||
const allowed = useCan("policy:update");
|
||||
const [policy, setPolicy] = useState<PolicyDetail | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!allowed) return;
|
||||
getPolicy(id)
|
||||
.then(setPolicy)
|
||||
.catch((e) => setError(e?.message ?? "No se pudo cargar la póliza."));
|
||||
}, [id, allowed]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="page-head">
|
||||
<Link href={`/polizas/${id}`} className="back-link">← Póliza</Link>
|
||||
<h1 className="page-title">Editar póliza</h1>
|
||||
</div>
|
||||
{!allowed ? (
|
||||
<div className="state-box state-error">
|
||||
No tiene permisos para editar pólizas.
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="state-box state-error">{error}</div>
|
||||
) : !policy ? (
|
||||
<div className="empty-inline"><span className="spinner" aria-label="Cargando" /></div>
|
||||
) : (
|
||||
<PolicyForm policy={policy} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -3,7 +3,17 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { AppShell } from "@/components/AppShell";
|
||||
import { getPolicy } from "@/lib/api";
|
||||
import {
|
||||
addPolicyChild,
|
||||
archivePolicy,
|
||||
getLookups,
|
||||
getPolicy,
|
||||
removePolicyChild,
|
||||
restorePolicy,
|
||||
updatePolicyChild,
|
||||
} from "@/lib/api";
|
||||
import { useCan } from "@/lib/abilities";
|
||||
import { ChildCollection, type ChildConfig } from "@/components/ChildCollection";
|
||||
import {
|
||||
expiryPhrase,
|
||||
formatDate,
|
||||
@@ -12,7 +22,7 @@ import {
|
||||
premiumHeadline,
|
||||
SIN_NOMBRE,
|
||||
} from "@/lib/labels";
|
||||
import type { Installment, PolicyDetail } from "@/lib/types";
|
||||
import type { AdjusterRow, Installment, PolicyDetail } from "@/lib/types";
|
||||
|
||||
export default function PolizaDetailPage({
|
||||
params,
|
||||
@@ -73,9 +83,14 @@ function Detail({ id }: { id: string }) {
|
||||
|
||||
if (!data) return null;
|
||||
|
||||
const reload = () => getPolicy(id).then(setData).catch(() => {});
|
||||
|
||||
return (
|
||||
<div className="rise">
|
||||
<BackLink />
|
||||
<div className="detail-actionbar">
|
||||
<BackLink />
|
||||
<PolicyActions data={data} onChange={reload} />
|
||||
</div>
|
||||
<Hero data={data} />
|
||||
<ClienteSection data={data} />
|
||||
<CondicionesSection data={data} />
|
||||
@@ -87,10 +102,163 @@ function Detail({ id }: { id: string }) {
|
||||
{data.claims.length > 0 && <SiniestrosSection data={data} />}
|
||||
<CoberturasSection data={data} />
|
||||
<DocumentosSection data={data} />
|
||||
<ChildrenEditor data={data} onChange={reload} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Edit / archive controls for the policy header. */
|
||||
function PolicyActions({
|
||||
data,
|
||||
onChange,
|
||||
}: {
|
||||
data: PolicyDetail;
|
||||
onChange: () => void;
|
||||
}) {
|
||||
const canEdit = useCan("policy:update");
|
||||
const canDelete = useCan("policy:delete");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const archived = data.archivedAt != null;
|
||||
|
||||
async function toggle() {
|
||||
const verb = archived ? "restaurar" : "archivar";
|
||||
if (!window.confirm(`¿Seguro que desea ${verb} esta póliza?`)) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
if (archived) await restorePolicy(data.id);
|
||||
else await archivePolicy(data.id);
|
||||
onChange();
|
||||
} catch (e) {
|
||||
window.alert((e as Error)?.message ?? "No se pudo completar la acción.");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (!canEdit && !canDelete) return null;
|
||||
return (
|
||||
<div className="row-actions">
|
||||
{archived && <span className="badge badge-negative">Archivada</span>}
|
||||
{canEdit && (
|
||||
<Link href={`/polizas/${data.id}/editar`} className="btn btn-outline">
|
||||
Editar
|
||||
</Link>
|
||||
)}
|
||||
{canDelete && (
|
||||
<button type="button" className="btn btn-ghost" onClick={toggle} disabled={busy}>
|
||||
{archived ? "Restaurar" : "Archivar"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Editable child collections — only shown to users who can edit the policy. */
|
||||
function ChildrenEditor({
|
||||
data,
|
||||
onChange,
|
||||
}: {
|
||||
data: PolicyDetail;
|
||||
onChange: () => void;
|
||||
}) {
|
||||
const canEdit = useCan("policy:update");
|
||||
const [adjusters, setAdjusters] = useState<AdjusterRow[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (canEdit) getLookups().then((l) => setAdjusters(l.adjusters)).catch(() => {});
|
||||
}, [canEdit]);
|
||||
|
||||
if (!canEdit) return null;
|
||||
|
||||
const INSTALLMENTS: ChildConfig = {
|
||||
apiKind: "installments",
|
||||
title: "Pagos",
|
||||
fields: [
|
||||
{ key: "sequence", label: "Sec.", type: "number" },
|
||||
{ key: "amount", label: "Monto", type: "number" },
|
||||
{ key: "currency", label: "Moneda", type: "select",
|
||||
options: [{ value: "MXN", label: "MXN" }, { value: "USD", label: "USD" }] },
|
||||
{ key: "dueDate", label: "Vence", type: "date" },
|
||||
{ key: "paidDate", label: "Pagado", type: "date" },
|
||||
{ key: "checkNumber", label: "Cheque" },
|
||||
{ key: "isCash", label: "Efectivo", type: "checkbox" },
|
||||
],
|
||||
};
|
||||
const VEHICLES: ChildConfig = {
|
||||
apiKind: "vehicles",
|
||||
title: "Vehículos",
|
||||
fields: [
|
||||
{ key: "make", label: "Marca" },
|
||||
{ key: "model", label: "Modelo" },
|
||||
{ key: "modelYear", label: "Año" },
|
||||
{ key: "licensePlate", label: "Placa" },
|
||||
{ key: "vinNumber", label: "VIN" },
|
||||
{ key: "stateCode", label: "Estado" },
|
||||
],
|
||||
};
|
||||
const DRIVERS: ChildConfig = {
|
||||
apiKind: "drivers",
|
||||
title: "Conductores",
|
||||
fields: [
|
||||
{ key: "fullName", label: "Nombre" },
|
||||
{ key: "birthDate", label: "Nacimiento", type: "date" },
|
||||
{ key: "sex", label: "Sexo" },
|
||||
{ key: "occupation", label: "Ocupación" },
|
||||
{ key: "licenseNumber", label: "Licencia" },
|
||||
{ key: "licenseState", label: "Estado" },
|
||||
],
|
||||
};
|
||||
const BENEFICIARIES: ChildConfig = {
|
||||
apiKind: "beneficiaries",
|
||||
title: "Beneficiarios",
|
||||
fields: [
|
||||
{ key: "name", label: "Nombre" },
|
||||
{ key: "phone", label: "Teléfono" },
|
||||
{ key: "email", label: "Correo" },
|
||||
{ key: "address", label: "Dirección" },
|
||||
],
|
||||
};
|
||||
const CLAIMS: ChildConfig = {
|
||||
apiKind: "claims",
|
||||
title: "Siniestros",
|
||||
fields: [
|
||||
{ key: "claimType", label: "Tipo" },
|
||||
{ key: "incidentDate", label: "Fecha", type: "date" },
|
||||
{ key: "description", label: "Descripción" },
|
||||
{ key: "adjusterId", label: "Ajustador", type: "select",
|
||||
options: adjusters.map((a) => ({ value: a.id, label: a.name ?? a.company ?? a.id })) },
|
||||
{ key: "claimedAmount", label: "Reclamado", type: "number" },
|
||||
{ key: "settledAmount", label: "Pagado", type: "number" },
|
||||
{ key: "resolved", label: "Resuelto", type: "checkbox" },
|
||||
],
|
||||
};
|
||||
|
||||
const bind = (cfg: ChildConfig, rows: Record<string, unknown>[]) => (
|
||||
<ChildCollection
|
||||
config={cfg}
|
||||
rows={rows}
|
||||
canEdit={canEdit}
|
||||
onAdd={async (p) => { await addPolicyChild(data.id, cfg.apiKind, p); onChange(); }}
|
||||
onSave={async (cid, p) => { await updatePolicyChild(data.id, cfg.apiKind, cid, p); onChange(); }}
|
||||
onRemove={async (cid) => { await removePolicyChild(data.id, cfg.apiKind, cid); onChange(); }}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<section className="section">
|
||||
<div className="section-head">
|
||||
<span className="section-rule cuenta" aria-hidden />
|
||||
<h2 className="section-title">Administrar detalles</h2>
|
||||
</div>
|
||||
{bind(INSTALLMENTS, data.installments as unknown as Record<string, unknown>[])}
|
||||
{bind(VEHICLES, data.vehicles as unknown as Record<string, unknown>[])}
|
||||
{bind(DRIVERS, data.insuredDrivers as unknown as Record<string, unknown>[])}
|
||||
{bind(BENEFICIARIES, data.beneficiaries as unknown as Record<string, unknown>[])}
|
||||
{bind(CLAIMS, data.claims as unknown as Record<string, unknown>[])}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function BackLink() {
|
||||
return (
|
||||
<Link href="/polizas" className="back-link">
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
"use client";
|
||||
|
||||
import { Suspense } from "react";
|
||||
import Link from "next/link";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { AppShell } from "@/components/AppShell";
|
||||
import { PolicyForm } from "@/components/PolicyForm";
|
||||
import { useCan } from "@/lib/abilities";
|
||||
|
||||
export default function NuevaPolizaPage() {
|
||||
return (
|
||||
<AppShell>
|
||||
<Suspense fallback={null}>
|
||||
<NuevaPoliza />
|
||||
</Suspense>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
function NuevaPoliza() {
|
||||
const allowed = useCan("policy:create");
|
||||
const params = useSearchParams();
|
||||
const customerId = params.get("customerId") ?? undefined;
|
||||
const customerName = params.get("customerName") ?? undefined;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="page-head">
|
||||
<Link href="/polizas" className="back-link">← Pólizas</Link>
|
||||
<h1 className="page-title">Nueva póliza</h1>
|
||||
</div>
|
||||
{allowed ? (
|
||||
<PolicyForm fixedCustomerId={customerId} fixedCustomerName={customerName} />
|
||||
) : (
|
||||
<div className="state-box state-error">
|
||||
No tiene permisos para crear pólizas.
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -3,6 +3,7 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { AppShell } from "@/components/AppShell";
|
||||
import { useCan } from "@/lib/abilities";
|
||||
import {
|
||||
EXPIRY_WINDOW_DAYS,
|
||||
getPolicyFacets,
|
||||
@@ -54,6 +55,7 @@ export default function PolizasPage() {
|
||||
}
|
||||
|
||||
function PolizasBrowser() {
|
||||
const canCreate = useCan("policy:create");
|
||||
const [stats, setStats] = useState<PolicyStats | null>(null);
|
||||
const [facets, setFacets] = useState<PolicyFacets | null>(null);
|
||||
|
||||
@@ -122,7 +124,13 @@ function PolizasBrowser() {
|
||||
<>
|
||||
<div className="page-head rise">
|
||||
<p className="eyebrow">Cartera de seguros</p>
|
||||
<h1 className="page-title">Pólizas</h1>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 16 }}>
|
||||
<h1 className="page-title" style={{ margin: 0 }}>Pólizas</h1>
|
||||
<span style={{ flex: 1 }} />
|
||||
{canCreate && (
|
||||
<Link href="/polizas/nuevo" className="btn btn-primary">+ Nueva póliza</Link>
|
||||
)}
|
||||
</div>
|
||||
<StatStrip
|
||||
stats={stats}
|
||||
status={status}
|
||||
|
||||
Reference in New Issue
Block a user