Web: Spanish-first staff UI — login + unified customer browser
First real frontend feature against the live Customer module API.
- login/ — session login form posting to /auth/login with credentials
included; the session cookie is what every subsequent request rides on.
- clientes/ — customer list with search and the cross-line stats header
(customers, utilities/insurance split, both-lines count).
- clientes/[id]/ — unified detail view: identity, properties + services,
policies, and transaction history for one customer, which is the whole
point of the migration (one record spanning both business lines).
- components/AppShell.tsx, lib/{api,labels,types}.ts — shared fetch wrapper
(always credentials: "include"), Spanish label maps for the enum values
the API returns, and the API response types.
- globals.css + layout.tsx — Spanish-first document (lang="es"), the type
scale, and the design tokens the pages share. Fonts load via <link> so an
offline build still renders on the system fallback stacks.
- page.tsx now redirects / to /clientes.
Also fixes pnpm-workspace.yaml: the allowBuilds map held pnpm's literal
placeholder text ("set this to true or false"), which made every install
fail with ERR_PNPM_IGNORED_BUILDS. Since pnpm 11 auto-installs before
running a script, that broke `pnpm start:dev` outright. Set the values to
true and dropped the superseded onlyBuiltDependencies list.
Verified: both apps build clean, and login -> /auth/me -> /customers/stats
round-trips against the dev database (1682 customers, 526 on both lines).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -0,0 +1,765 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { AppShell } from "@/components/AppShell";
|
||||
import { getCustomer } from "@/lib/api";
|
||||
import {
|
||||
domainLabel,
|
||||
formatDate,
|
||||
formatMoney,
|
||||
serviceKindGlyph,
|
||||
serviceKindLabel,
|
||||
sourceSystemLabel,
|
||||
} from "@/lib/labels";
|
||||
import type {
|
||||
CustomerDetail,
|
||||
Installment,
|
||||
Policy,
|
||||
Property,
|
||||
Transaction,
|
||||
TransactionSummaryRow,
|
||||
} from "@/lib/types";
|
||||
|
||||
export default function ClienteDetailPage({
|
||||
params,
|
||||
}: {
|
||||
params: { id: string };
|
||||
}) {
|
||||
const { id } = params;
|
||||
return (
|
||||
<AppShell>
|
||||
<Detail id={id} />
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
function Detail({ id }: { id: string }) {
|
||||
const [data, setData] = useState<CustomerDetail | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
getCustomer(id)
|
||||
.then((d) => {
|
||||
if (alive) {
|
||||
setData(d);
|
||||
setLoading(false);
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
if (alive) {
|
||||
setError(
|
||||
e?.status === 404
|
||||
? "No encontramos este cliente."
|
||||
: e?.message ?? "No se pudo cargar el cliente.",
|
||||
);
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, [id]);
|
||||
|
||||
if (loading) return <DetailSkeleton />;
|
||||
|
||||
if (error)
|
||||
return (
|
||||
<>
|
||||
<BackLink />
|
||||
<div className="state-error" role="alert">
|
||||
{error}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
if (!data) return null;
|
||||
|
||||
const hasUtilities = data.properties.length > 0;
|
||||
const hasInsurance = data.policies.length > 0;
|
||||
|
||||
return (
|
||||
<div className="rise">
|
||||
<BackLink />
|
||||
<Hero data={data} hasUtilities={hasUtilities} hasInsurance={hasInsurance} />
|
||||
|
||||
<DatosSection data={data} />
|
||||
<PropiedadesSection properties={data.properties} />
|
||||
<PolizasSection policies={data.policies} />
|
||||
<EstadoCuentaSection
|
||||
summary={data.transactionSummary}
|
||||
transactions={data.transactions}
|
||||
/>
|
||||
<DocumentosSection data={data} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BackLink() {
|
||||
return (
|
||||
<Link href="/clientes" className="back-link">
|
||||
← Volver a Clientes
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ Hero */
|
||||
function Hero({
|
||||
data,
|
||||
hasUtilities,
|
||||
hasInsurance,
|
||||
}: {
|
||||
data: CustomerDetail;
|
||||
hasUtilities: boolean;
|
||||
hasInsurance: boolean;
|
||||
}) {
|
||||
const provenance = data.legacyRefs
|
||||
.map((r) => `${sourceSystemLabel(r.sourceSystem)} #${r.legacyId}`)
|
||||
.join(" · ");
|
||||
|
||||
const facts: { label: string; value: string }[] = [
|
||||
{ label: "Cliente desde", value: formatDate(data.customerSince) },
|
||||
{
|
||||
label: "Cuota",
|
||||
value:
|
||||
data.feeAmount != null && data.feeAmount !== ""
|
||||
? formatMoney(data.feeAmount, data.preferredCurrency)
|
||||
: "—",
|
||||
},
|
||||
{ label: "Propiedades", value: String(data.properties.length) },
|
||||
{ label: "Pólizas", value: String(data.policies.length) },
|
||||
{ label: "Moneda", value: data.preferredCurrency ?? "—" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="detail-hero">
|
||||
<div className="hero-top">
|
||||
<div>
|
||||
<h1 className="hero-name">{data.name}</h1>
|
||||
{provenance && (
|
||||
<div className="hero-provenance">Origen: {provenance}</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="hero-badges">
|
||||
{hasUtilities && (
|
||||
<span className="badge badge-servicios">
|
||||
<span className="dot" /> Servicios
|
||||
</span>
|
||||
)}
|
||||
{hasInsurance && (
|
||||
<span className="badge badge-seguros">
|
||||
<span className="dot" /> Seguros
|
||||
</span>
|
||||
)}
|
||||
<span
|
||||
className={`badge ${
|
||||
data.status ? "badge-on-dark" : "badge-negative"
|
||||
}`}
|
||||
>
|
||||
{data.status ? "Activo" : "Inactivo"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hero-facts">
|
||||
{facts.map((f) => (
|
||||
<div key={f.label}>
|
||||
<div className="hero-fact-label">{f.label}</div>
|
||||
<div className="hero-fact-value">{f.value}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------- Datos del cliente */
|
||||
function DatosSection({ data }: { data: CustomerDetail }) {
|
||||
const mxAddress = [data.addressLine1, data.addressLine2]
|
||||
.filter(Boolean)
|
||||
.join(", ");
|
||||
const cityLine = [
|
||||
data.city?.replace(/,\s*$/, ""),
|
||||
data.state,
|
||||
data.zipCode,
|
||||
data.country,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(", ");
|
||||
|
||||
const idLine =
|
||||
data.identificationNumber || data.identificationType
|
||||
? [
|
||||
data.identificationType,
|
||||
data.identificationNumber,
|
||||
data.identificationExpiration
|
||||
? `vence ${formatDate(data.identificationExpiration)}`
|
||||
: null,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" · ")
|
||||
: null;
|
||||
|
||||
return (
|
||||
<section className="section">
|
||||
<SectionHead rule="datos" title="Datos del cliente" />
|
||||
<div className="card">
|
||||
<div className="kv-grid">
|
||||
<KV label="Teléfono" value={data.phone} mono />
|
||||
<KV label="Móvil" value={data.mobile} mono />
|
||||
<KV label="Fax" value={data.fax} mono />
|
||||
<KV label="Correo electrónico" value={data.email} />
|
||||
<KV label="Documento de identidad" value={idLine} />
|
||||
<KV
|
||||
label="Estado"
|
||||
value={data.status ? "Activo" : "Inactivo"}
|
||||
/>
|
||||
{(mxAddress || cityLine) && (
|
||||
<div className="kv-block">
|
||||
<div className="kv-label">Domicilio</div>
|
||||
<div className="kv-value">
|
||||
{mxAddress && <div>{mxAddress}</div>}
|
||||
{cityLine && <div>{cityLine}</div>}
|
||||
{!mxAddress && !cityLine && "—"}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{data.notes && (
|
||||
<div className="kv-block">
|
||||
<div className="kv-label">Notas</div>
|
||||
<div className="kv-value">{data.notes}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function KV({
|
||||
label,
|
||||
value,
|
||||
mono,
|
||||
}: {
|
||||
label: string;
|
||||
value: string | null | undefined;
|
||||
mono?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<div className="kv-label">{label}</div>
|
||||
<div className={`kv-value${mono && value ? " mono" : ""}`}>
|
||||
{value || "—"}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------- Propiedades y servicios */
|
||||
function PropiedadesSection({ properties }: { properties: Property[] }) {
|
||||
return (
|
||||
<section className="section">
|
||||
<SectionHead
|
||||
rule="servicios"
|
||||
title="Propiedades y servicios"
|
||||
count={properties.length}
|
||||
/>
|
||||
<div className="card">
|
||||
{properties.length === 0 ? (
|
||||
<div className="empty-inline">
|
||||
Este cliente no tiene propiedades registradas.
|
||||
</div>
|
||||
) : (
|
||||
properties.map((p) => <PropertyCard key={p.id} p={p} />)
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function PropertyCard({ p }: { p: Property }) {
|
||||
const addr = [p.addressLine1, p.addressLine2].filter(Boolean).join(", ");
|
||||
const phones = [p.phone1, p.phone2, p.phone3].filter(Boolean);
|
||||
|
||||
return (
|
||||
<div className="prop-card">
|
||||
<div className="prop-addr">{addr || "Propiedad"}</div>
|
||||
<div className="prop-meta">
|
||||
{p.zone && <span>Zona: {p.zone}</span>}
|
||||
{phones.length > 0 && (
|
||||
<span className="mono">{phones.join(" · ")}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{p.services.length > 0 && (
|
||||
<div className="svc-grid">
|
||||
{p.services.map((s) => (
|
||||
<div
|
||||
key={s.id}
|
||||
className={`svc-item${s.active ? "" : " inactive"}`}
|
||||
>
|
||||
<div className="svc-head">
|
||||
<span className="svc-kind">
|
||||
<span className="svc-glyph" aria-hidden>
|
||||
{serviceKindGlyph(s.kind)}
|
||||
</span>
|
||||
{serviceKindLabel(s.kind)}
|
||||
</span>
|
||||
{!s.active && (
|
||||
<span className="badge badge-neutral">Inactivo</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="svc-detail">
|
||||
{s.accountNumber && (
|
||||
<span>
|
||||
Cuenta: <span className="mono">{s.accountNumber}</span>
|
||||
</span>
|
||||
)}
|
||||
{s.meterNumber && (
|
||||
<span>
|
||||
Medidor: <span className="mono">{s.meterNumber}</span>
|
||||
</span>
|
||||
)}
|
||||
{s.route && (
|
||||
<span>
|
||||
Ruta: <span className="mono">{s.route}</span>
|
||||
</span>
|
||||
)}
|
||||
{s.dueDay && <span>Día de pago: {s.dueDay}</span>}
|
||||
{s.notes && <span>{s.notes}</span>}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{p.trustAccount && (
|
||||
<div className="trust-box">
|
||||
<div className="trust-title">Fideicomiso</div>
|
||||
<div className="trust-facts">
|
||||
{p.trustAccount.bankName && (
|
||||
<span>
|
||||
<strong>Banco:</strong> {p.trustAccount.bankName}
|
||||
</span>
|
||||
)}
|
||||
{p.trustAccount.trustNumber && (
|
||||
<span>
|
||||
<strong>No.:</strong>{" "}
|
||||
<span className="mono">{p.trustAccount.trustNumber}</span>
|
||||
</span>
|
||||
)}
|
||||
{p.trustAccount.bankFee && (
|
||||
<span>
|
||||
<strong>Comisión:</strong>{" "}
|
||||
{formatMoney(p.trustAccount.bankFee, "MXN")}
|
||||
</span>
|
||||
)}
|
||||
{p.trustAccount.dueDate1 && (
|
||||
<span>
|
||||
<strong>Vigencia:</strong>{" "}
|
||||
{formatDate(p.trustAccount.dueDate1)}
|
||||
{p.trustAccount.dueDate2
|
||||
? ` – ${formatDate(p.trustAccount.dueDate2)}`
|
||||
: ""}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------ Pólizas de seguro */
|
||||
function PolizasSection({ policies }: { policies: Policy[] }) {
|
||||
return (
|
||||
<section className="section">
|
||||
<SectionHead
|
||||
rule="seguros"
|
||||
title="Pólizas de seguro"
|
||||
count={policies.length}
|
||||
/>
|
||||
<div className="card">
|
||||
{policies.length === 0 ? (
|
||||
<div className="empty-inline">
|
||||
Este cliente no tiene pólizas registradas.
|
||||
</div>
|
||||
) : (
|
||||
policies.map((p) => <PolicyCard key={p.id} p={p} />)
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function PolicyCard({ p }: { p: Policy }) {
|
||||
const headline = p.total ?? p.netPremium;
|
||||
const headlineLabel = p.total ? "Total" : "Prima neta";
|
||||
|
||||
return (
|
||||
<div className="policy-card">
|
||||
<div className="policy-head">
|
||||
<div>
|
||||
<div className="policy-num">{p.policyNumber || "—"}</div>
|
||||
<div className="policy-type-row">
|
||||
{p.policyType?.name && (
|
||||
<span className="badge badge-seguros">
|
||||
<span className="dot" /> {p.policyType.name}
|
||||
</span>
|
||||
)}
|
||||
{p.insuranceProvider?.name && (
|
||||
<span>{p.insuranceProvider.name}</span>
|
||||
)}
|
||||
{p.agentName && (
|
||||
<>
|
||||
<span className="sep">·</span>
|
||||
<span>Agente: {p.agentName}</span>
|
||||
</>
|
||||
)}
|
||||
<span
|
||||
className={`badge ${
|
||||
p.liquidated ? "badge-positive" : "badge-neutral"
|
||||
}`}
|
||||
>
|
||||
{p.liquidated ? "Liquidada" : "Pendiente"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="policy-type-row">
|
||||
<span className="kv-label" style={{ margin: 0 }}>
|
||||
Vigencia:
|
||||
</span>
|
||||
<span className="mono">
|
||||
{formatDate(p.policyFrom)} – {formatDate(p.policyTo)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="policy-figures">
|
||||
<div className="policy-total">
|
||||
{formatMoney(headline, p.currency)}
|
||||
</div>
|
||||
<div className="policy-total-label">{headlineLabel}</div>
|
||||
{p.total && p.netPremium && (
|
||||
<div className="muted" style={{ fontSize: 12, marginTop: 4 }}>
|
||||
Prima neta {formatMoney(p.netPremium, p.currency)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="policy-body">
|
||||
{p.installments.length > 0 && (
|
||||
<div className="subpanel">
|
||||
<div className="subpanel-title">
|
||||
<span>Pagos</span>
|
||||
<span>{p.installments.length}</span>
|
||||
</div>
|
||||
{p.installments.map((inst) => (
|
||||
<InstallmentRow key={inst.id} inst={inst} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{p.vehicles.length > 0 && (
|
||||
<div className="subpanel">
|
||||
<div className="subpanel-title">
|
||||
<span>Vehículos</span>
|
||||
<span>{p.vehicles.length}</span>
|
||||
</div>
|
||||
<div className="mini-list">
|
||||
{p.vehicles.map((v) => (
|
||||
<div key={v.id}>
|
||||
{[v.make, v.model, v.modelYear].filter(Boolean).join(" ") ||
|
||||
"Vehículo"}
|
||||
<div className="mini-sub">
|
||||
{[
|
||||
v.bodyType,
|
||||
v.licensePlate ? `Placa ${v.licensePlate}` : null,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" · ")}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{p.insuredDrivers.length > 0 && (
|
||||
<div className="subpanel">
|
||||
<div className="subpanel-title">
|
||||
<span>Asegurados</span>
|
||||
<span>{p.insuredDrivers.length}</span>
|
||||
</div>
|
||||
<div className="mini-list">
|
||||
{p.insuredDrivers.map((d) => (
|
||||
<div key={d.id}>
|
||||
{d.fullName || "—"}
|
||||
{d.licenseNumber && (
|
||||
<div className="mini-sub mono">Lic. {d.licenseNumber}</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{p.beneficiaries.length > 0 && (
|
||||
<div className="subpanel">
|
||||
<div className="subpanel-title">
|
||||
<span>Beneficiarios</span>
|
||||
<span>{p.beneficiaries.length}</span>
|
||||
</div>
|
||||
<div className="mini-list">
|
||||
{p.beneficiaries.map((b) => (
|
||||
<div key={b.id}>
|
||||
{b.name || "—"}
|
||||
{(b.phone || b.email) && (
|
||||
<div className="mini-sub">
|
||||
{[b.phone, b.email].filter(Boolean).join(" · ")}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function InstallmentRow({ inst }: { inst: Installment }) {
|
||||
const method = inst.isCash
|
||||
? "Efectivo"
|
||||
: inst.checkNumber
|
||||
? `Ref. ${inst.checkNumber}`
|
||||
: null;
|
||||
return (
|
||||
<div className="pay-row">
|
||||
<span style={{ display: "flex", alignItems: "center", gap: 9 }}>
|
||||
<span className="pay-seq">{inst.sequence}</span>
|
||||
<span>
|
||||
{inst.paidDate ? formatDate(inst.paidDate) : "Sin pagar"}
|
||||
{method && (
|
||||
<span className="muted" style={{ fontSize: 11 }}>
|
||||
{" "}
|
||||
· {method}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</span>
|
||||
<span className="mono" style={{ fontWeight: 600 }}>
|
||||
{formatMoney(inst.amount, inst.currency)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------- Estado de cuenta */
|
||||
function EstadoCuentaSection({
|
||||
summary,
|
||||
transactions,
|
||||
}: {
|
||||
summary: TransactionSummaryRow[];
|
||||
transactions: Transaction[];
|
||||
}) {
|
||||
return (
|
||||
<section className="section">
|
||||
<SectionHead
|
||||
rule="cuenta"
|
||||
title="Estado de cuenta"
|
||||
count={transactions.length}
|
||||
countSuffix="movimientos"
|
||||
/>
|
||||
|
||||
{summary.length > 0 && (
|
||||
<div className="summary-grid">
|
||||
{summary.map((row, i) => (
|
||||
<div className={`summary-card ${row.domain}`} key={i}>
|
||||
<div className="summary-domain">
|
||||
<span className={`tx-dot ${row.domain}`} />
|
||||
{domainLabel(row.domain)} · {row.currency}
|
||||
</div>
|
||||
<div className="summary-total">
|
||||
{formatMoney(row.total, row.currency)}
|
||||
</div>
|
||||
<div className="summary-count">
|
||||
{row.count}{" "}
|
||||
{row.count === 1 ? "movimiento" : "movimientos"}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="card">
|
||||
{transactions.length === 0 ? (
|
||||
<div className="empty-inline">Sin movimientos registrados.</div>
|
||||
) : (
|
||||
<div className="tx-scroll">
|
||||
<table className="tx-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Fecha</th>
|
||||
<th>Línea</th>
|
||||
<th>Tipo</th>
|
||||
<th>Referencia</th>
|
||||
<th>Concepto</th>
|
||||
<th className="num">Monto</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{transactions.map((t) => (
|
||||
<TxRow key={t.id} t={t} />
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
{transactions.length >= 100 && (
|
||||
<div className="section-note" style={{ padding: "0 16px 14px" }}>
|
||||
Mostrando los 100 movimientos más recientes.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function TxRow({ t }: { t: Transaction }) {
|
||||
const num = t.amount != null ? Number(t.amount) : NaN;
|
||||
const sign = !Number.isNaN(num) && num < 0 ? "neg" : "pos";
|
||||
const tipo =
|
||||
t.type?.nameEs || t.type?.nameEn || "—";
|
||||
const concept = t.message || t.period || "—";
|
||||
|
||||
return (
|
||||
<tr>
|
||||
<td className="mono" style={{ whiteSpace: "nowrap" }}>
|
||||
{formatDate(t.transactionDate)}
|
||||
</td>
|
||||
<td className="tx-domain-cell">
|
||||
<span className={`tx-dot ${t.domain}`} />
|
||||
{domainLabel(t.domain)}
|
||||
</td>
|
||||
<td>{tipo}</td>
|
||||
<td className="tx-ref">{t.reference || "—"}</td>
|
||||
<td className="tx-concept">{concept}</td>
|
||||
<td className="num">
|
||||
<span className={`tx-amount ${sign}`}>
|
||||
{formatMoney(t.amount, t.currency)}
|
||||
</span>{" "}
|
||||
<span className="tx-cur">{t.currency}</span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------- Documentos */
|
||||
function DocumentosSection({ data }: { data: CustomerDetail }) {
|
||||
type Doc = { type: string; key: string | null; scope: string };
|
||||
const docs: Doc[] = [];
|
||||
data.properties.forEach((p) => {
|
||||
const label = [p.addressLine1].filter(Boolean).join("") || "Propiedad";
|
||||
p.documents.forEach((d) =>
|
||||
docs.push({
|
||||
type: d.documentType || "Documento",
|
||||
key: d.storageKey,
|
||||
scope: label,
|
||||
}),
|
||||
);
|
||||
});
|
||||
data.policies.forEach((p) => {
|
||||
p.documents.forEach((d) =>
|
||||
docs.push({
|
||||
type: d.documentType || "Documento",
|
||||
key: d.storageKey,
|
||||
scope: `Póliza ${p.policyNumber ?? ""}`.trim(),
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<section className="section">
|
||||
<SectionHead rule="docs" title="Documentos" count={docs.length} />
|
||||
<div className="card">
|
||||
{docs.length === 0 ? (
|
||||
<div className="empty-inline">
|
||||
No hay documentos registrados para este cliente.
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="doc-list">
|
||||
{docs.map((d, i) => (
|
||||
<div className="doc-item" key={i}>
|
||||
<span className="doc-icon" aria-hidden>
|
||||
▤
|
||||
</span>
|
||||
<div style={{ minWidth: 0 }}>
|
||||
<div className="doc-type">{d.type}</div>
|
||||
<div className="doc-key">{d.scope}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div
|
||||
className="section-note"
|
||||
style={{ padding: "0 22px 18px" }}
|
||||
>
|
||||
Los archivos se almacenan en el object storage
|
||||
(storageKey); no se descargan desde esta vista.
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------- helpers */
|
||||
function SectionHead({
|
||||
rule,
|
||||
title,
|
||||
count,
|
||||
countSuffix,
|
||||
}: {
|
||||
rule: string;
|
||||
title: string;
|
||||
count?: number;
|
||||
countSuffix?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="section-head">
|
||||
<span className={`section-rule ${rule}`} aria-hidden />
|
||||
<h2 className="section-title">{title}</h2>
|
||||
{count != null && (
|
||||
<span className="section-count">
|
||||
{count} {countSuffix ?? ""}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DetailSkeleton() {
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
className="skeleton"
|
||||
style={{ height: 16, width: 140, marginBottom: 18 }}
|
||||
/>
|
||||
<div className="skeleton" style={{ height: 180, borderRadius: 16 }} />
|
||||
<div
|
||||
className="skeleton"
|
||||
style={{ height: 200, borderRadius: 16, marginTop: 34 }}
|
||||
/>
|
||||
<div
|
||||
className="skeleton"
|
||||
style={{ height: 260, borderRadius: 16, marginTop: 34 }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,321 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { AppShell } from "@/components/AppShell";
|
||||
import { getStats, listCustomers } from "@/lib/api";
|
||||
import { formatNumber } from "@/lib/labels";
|
||||
import type {
|
||||
BusinessLine,
|
||||
CustomerListItem,
|
||||
CustomerListResponse,
|
||||
CustomerStats,
|
||||
} from "@/lib/types";
|
||||
|
||||
type Filter = "all" | BusinessLine;
|
||||
|
||||
const FILTERS: { key: Filter; label: string }[] = [
|
||||
{ key: "all", label: "Todos" },
|
||||
{ key: "utility", label: "Servicios" },
|
||||
{ key: "insurance", label: "Seguros" },
|
||||
{ key: "both", label: "Ambos" },
|
||||
];
|
||||
|
||||
export default function ClientesPage() {
|
||||
return (
|
||||
<AppShell>
|
||||
<ClientesBrowser />
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
function ClientesBrowser() {
|
||||
const [stats, setStats] = useState<CustomerStats | null>(null);
|
||||
const [query, setQuery] = useState("");
|
||||
const [filter, setFilter] = useState<Filter>("all");
|
||||
const [page, setPage] = useState(1);
|
||||
|
||||
const [data, setData] = useState<CustomerListResponse | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const debounceRef = useRef<ReturnType<typeof setTimeout>>();
|
||||
|
||||
useEffect(() => {
|
||||
getStats().then(setStats).catch(() => setStats(null));
|
||||
}, []);
|
||||
|
||||
const runSearch = useCallback(
|
||||
(q: string, f: Filter, p: number) => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
listCustomers({
|
||||
query: q || undefined,
|
||||
line: f === "all" ? undefined : f,
|
||||
page: p,
|
||||
pageSize: 25,
|
||||
})
|
||||
.then((res) => {
|
||||
setData(res);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((e) => {
|
||||
setError(
|
||||
e?.message ?? "No se pudieron cargar los clientes.",
|
||||
);
|
||||
setLoading(false);
|
||||
});
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
// Debounced search on query/filter change; resets to page 1.
|
||||
useEffect(() => {
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current);
|
||||
debounceRef.current = setTimeout(() => {
|
||||
setPage(1);
|
||||
runSearch(query, filter, 1);
|
||||
}, 280);
|
||||
return () => {
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current);
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [query, filter]);
|
||||
|
||||
function goToPage(p: number) {
|
||||
setPage(p);
|
||||
runSearch(query, filter, p);
|
||||
if (typeof window !== "undefined")
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="page-head rise">
|
||||
<p className="eyebrow">Directorio unificado</p>
|
||||
<h1 className="page-title">Clientes</h1>
|
||||
<StatStrip stats={stats} />
|
||||
</div>
|
||||
|
||||
<div className="toolbar">
|
||||
<div className="search-box">
|
||||
<span className="search-icon" aria-hidden>
|
||||
⌕
|
||||
</span>
|
||||
<input
|
||||
className="input search-input"
|
||||
type="search"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Buscar por nombre, ciudad, teléfono…"
|
||||
aria-label="Buscar clientes"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="seg"
|
||||
role="tablist"
|
||||
aria-label="Filtrar por línea de negocio"
|
||||
>
|
||||
{FILTERS.map((f) => (
|
||||
<button
|
||||
key={f.key}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={filter === f.key}
|
||||
className={`seg-btn ${filter === f.key ? "active" : ""}`}
|
||||
onClick={() => setFilter(f.key)}
|
||||
>
|
||||
{f.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{data && !loading && !error && (
|
||||
<div className="result-meta" aria-live="polite">
|
||||
{data.total === 0
|
||||
? "Sin resultados"
|
||||
: `${formatNumber(data.total)} ${
|
||||
data.total === 1 ? "cliente" : "clientes"
|
||||
}`}
|
||||
{query ? ` para “${query}”` : ""}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error ? (
|
||||
<div className="state-error" role="alert">
|
||||
{error}
|
||||
</div>
|
||||
) : loading ? (
|
||||
<ListSkeleton />
|
||||
) : data && data.items.length === 0 ? (
|
||||
<EmptyState query={query} />
|
||||
) : (
|
||||
<>
|
||||
<div className="cust-list">
|
||||
{data?.items.map((c) => (
|
||||
<CustomerRow key={c.id} c={c} />
|
||||
))}
|
||||
</div>
|
||||
{data && data.pageCount > 1 && (
|
||||
<Pager
|
||||
page={data.page}
|
||||
pageCount={data.pageCount}
|
||||
onChange={goToPage}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function StatStrip({ stats }: { stats: CustomerStats | null }) {
|
||||
const cells: {
|
||||
value: string;
|
||||
label: string;
|
||||
accent?: boolean;
|
||||
}[] = stats
|
||||
? [
|
||||
{ value: formatNumber(stats.customers), label: "Clientes", accent: true },
|
||||
{ value: formatNumber(stats.withUtilities), label: "Con servicios" },
|
||||
{ value: formatNumber(stats.withInsurance), label: "Con seguros" },
|
||||
{ value: formatNumber(stats.bothLines), label: "Ambas líneas", accent: true },
|
||||
{ value: formatNumber(stats.policies), label: "Pólizas" },
|
||||
{ value: formatNumber(stats.properties), label: "Propiedades" },
|
||||
]
|
||||
: [];
|
||||
|
||||
if (!stats) {
|
||||
return (
|
||||
<div className="stat-strip" aria-hidden>
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div className="stat-cell" key={i}>
|
||||
<div className="skeleton" style={{ height: 25, width: "60%" }} />
|
||||
<div
|
||||
className="skeleton"
|
||||
style={{ height: 11, width: "80%", marginTop: 8 }}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="stat-strip">
|
||||
{cells.map((c) => (
|
||||
<div
|
||||
className={`stat-cell${c.accent ? " accent" : ""}`}
|
||||
key={c.label}
|
||||
>
|
||||
<div className="stat-value">{c.value}</div>
|
||||
<div className="stat-label">{c.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CustomerRow({ c }: { c: CustomerListItem }) {
|
||||
const location = [c.city?.replace(/,\s*$/, ""), c.state]
|
||||
.filter(Boolean)
|
||||
.join(", ");
|
||||
const contact = c.phone || c.mobile || c.email;
|
||||
|
||||
return (
|
||||
<Link href={`/clientes/${c.id}`} className="cust-row">
|
||||
<div className="cust-main">
|
||||
<div className="cust-name">
|
||||
{!c.status && (
|
||||
<span className="inactive-dot" title="Inactivo" aria-hidden />
|
||||
)}
|
||||
{c.name}
|
||||
</div>
|
||||
<div className="cust-sub">
|
||||
{location && <span>{location}</span>}
|
||||
{location && contact && <span className="sep">·</span>}
|
||||
{contact && <span>{contact}</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="cust-side">
|
||||
{c.hasUtilities && (
|
||||
<span className="badge badge-servicios">
|
||||
<span className="dot" /> Servicios
|
||||
{c.propertyCount > 0 && (
|
||||
<span className="badge-count">· {c.propertyCount}</span>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
{c.hasInsurance && (
|
||||
<span className="badge badge-seguros">
|
||||
<span className="dot" /> Seguros
|
||||
{c.policyCount > 0 && (
|
||||
<span className="badge-count">· {c.policyCount}</span>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
function Pager({
|
||||
page,
|
||||
pageCount,
|
||||
onChange,
|
||||
}: {
|
||||
page: number;
|
||||
pageCount: number;
|
||||
onChange: (p: number) => void;
|
||||
}) {
|
||||
return (
|
||||
<nav className="pager" aria-label="Paginación">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline"
|
||||
onClick={() => onChange(page - 1)}
|
||||
disabled={page <= 1}
|
||||
>
|
||||
← Anterior
|
||||
</button>
|
||||
<span className="pager-info">
|
||||
Página <strong>{page}</strong> de {pageCount}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline"
|
||||
onClick={() => onChange(page + 1)}
|
||||
disabled={page >= pageCount}
|
||||
>
|
||||
Siguiente →
|
||||
</button>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
function ListSkeleton() {
|
||||
return (
|
||||
<div className="cust-list" aria-hidden>
|
||||
{Array.from({ length: 8 }).map((_, i) => (
|
||||
<div className="skeleton skel-row" key={i} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyState({ query }: { query: string }) {
|
||||
return (
|
||||
<div className="state-box">
|
||||
<div className="state-glyph" aria-hidden>
|
||||
⌕
|
||||
</div>
|
||||
<h3>Sin resultados</h3>
|
||||
<p>
|
||||
{query
|
||||
? `No encontramos clientes para “${query}”.`
|
||||
: "No hay clientes que coincidan con el filtro."}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,13 +1,29 @@
|
||||
import type { ReactNode } from "react";
|
||||
import "./globals.css";
|
||||
|
||||
export const metadata = {
|
||||
title: "Jorge Cuadros & Assoc.",
|
||||
description: "Unified customer, insurance, and utilities platform",
|
||||
title: "Jorge Cuadros & Asociados — Plataforma",
|
||||
description:
|
||||
"Plataforma interna unificada de clientes, servicios y seguros.",
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<html lang="es">
|
||||
<head>
|
||||
{/* Google Fonts via <link> so an offline build still runs with the
|
||||
system fallback stacks defined in globals.css. */}
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link
|
||||
rel="preconnect"
|
||||
href="https://fonts.gstatic.com"
|
||||
crossOrigin="anonymous"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,560;9..144,600&family=Work+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,170 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { ApiError, login, me } from "@/lib/api";
|
||||
|
||||
export default function LoginPage() {
|
||||
const router = useRouter();
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [bootChecking, setBootChecking] = useState(true);
|
||||
|
||||
// If already signed in, skip straight to the customer browser.
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
me()
|
||||
.then(() => router.replace("/clientes"))
|
||||
.catch(() => {
|
||||
if (alive) setBootChecking(false);
|
||||
});
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, [router]);
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await login(email.trim(), password);
|
||||
router.replace("/clientes");
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError && err.status === 401) {
|
||||
setError("Correo o contraseña incorrectos");
|
||||
} else if (err instanceof ApiError && err.status === 0) {
|
||||
setError(err.message);
|
||||
} else {
|
||||
setError("No se pudo iniciar sesión. Inténtalo de nuevo.");
|
||||
}
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (bootChecking) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
minHeight: "100vh",
|
||||
display: "grid",
|
||||
placeItems: "center",
|
||||
color: "var(--brand-700)",
|
||||
}}
|
||||
>
|
||||
<span className="spinner" aria-label="Cargando" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="login-wrap">
|
||||
{/* Brand / narrative panel */}
|
||||
<aside className="login-aside" aria-hidden="false">
|
||||
<div className="login-aside-top">
|
||||
<div className="login-brand">
|
||||
<span className="brand-mark" aria-hidden>
|
||||
JC
|
||||
</span>
|
||||
<div className="brand-text">
|
||||
<span className="brand-name" style={{ color: "#f6f3ec" }}>
|
||||
Jorge Cuadros
|
||||
</span>
|
||||
<span className="brand-sub">& Asociados</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="login-aside-mid">
|
||||
<p className="eyebrow" style={{ color: "rgba(242,239,231,0.6)" }}>
|
||||
Plataforma interna
|
||||
</p>
|
||||
<h1 className="login-headline">
|
||||
Un solo expediente para <em>Servicios</em> y <em>Seguros</em>.
|
||||
</h1>
|
||||
<p className="login-lede">
|
||||
Consulta en un mismo lugar las propiedades, pólizas y el estado de
|
||||
cuenta de cada cliente en Baja California.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="login-aside-foot">
|
||||
<div className="login-lob">
|
||||
<span className="badge badge-servicios">
|
||||
<span className="dot" /> Servicios
|
||||
</span>
|
||||
<span className="badge badge-seguros">
|
||||
<span className="dot" /> Seguros
|
||||
</span>
|
||||
</div>
|
||||
<span className="login-foot-note">
|
||||
Gestión de propiedades y correduría de seguros
|
||||
</span>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Form panel */}
|
||||
<section className="login-form-panel">
|
||||
<div className="login-form-inner rise">
|
||||
<p className="eyebrow">Acceso del personal</p>
|
||||
<h2 className="login-form-title">Iniciar sesión</h2>
|
||||
<p className="muted" style={{ marginTop: 6, marginBottom: 28 }}>
|
||||
Ingresa con tu cuenta para continuar.
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSubmit} noValidate>
|
||||
<label className="field">
|
||||
<span className="field-label">Correo electrónico</span>
|
||||
<input
|
||||
type="email"
|
||||
autoComplete="username"
|
||||
className="input"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="nombre@jorgecuadros.local"
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="field">
|
||||
<span className="field-label">Contraseña</span>
|
||||
<input
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
className="input"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
{error && (
|
||||
<div className="login-error" role="alert">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary login-submit"
|
||||
disabled={submitting}
|
||||
>
|
||||
{submitting ? (
|
||||
<>
|
||||
<span className="spinner" style={{ width: 15, height: 15 }} />
|
||||
Entrando…
|
||||
</>
|
||||
) : (
|
||||
"Entrar"
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,5 @@
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<main>
|
||||
<h1>Jorge Cuadros & Assoc.</h1>
|
||||
<p>Unified customer platform — scaffold in progress.</p>
|
||||
</main>
|
||||
);
|
||||
redirect("/clientes");
|
||||
}
|
||||
|
||||
@@ -0,0 +1,99 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, type ReactNode } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { logout, me } from "@/lib/api";
|
||||
import type { AuthUser } from "@/lib/types";
|
||||
|
||||
/**
|
||||
* Authenticated shell: gates on /auth/me, redirects to /login when the
|
||||
* session is missing, renders the brand header + logout, and wraps page
|
||||
* content. Used by /clientes and /clientes/[id].
|
||||
*/
|
||||
export function AppShell({ children }: { children: ReactNode }) {
|
||||
const router = useRouter();
|
||||
const [user, setUser] = useState<AuthUser | null>(null);
|
||||
const [checking, setChecking] = useState(true);
|
||||
const [loggingOut, setLoggingOut] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
me()
|
||||
.then((u) => {
|
||||
if (alive) {
|
||||
setUser(u);
|
||||
setChecking(false);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
router.replace("/login");
|
||||
});
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, [router]);
|
||||
|
||||
async function handleLogout() {
|
||||
setLoggingOut(true);
|
||||
try {
|
||||
await logout();
|
||||
} catch {
|
||||
/* ignore — we redirect regardless */
|
||||
}
|
||||
router.replace("/login");
|
||||
}
|
||||
|
||||
if (checking) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
minHeight: "100vh",
|
||||
display: "grid",
|
||||
placeItems: "center",
|
||||
color: "var(--brand-700)",
|
||||
}}
|
||||
>
|
||||
<span className="spinner" aria-label="Cargando" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="appbar">
|
||||
<div className="appbar-inner">
|
||||
<Link href="/clientes" className="brand">
|
||||
<span className="brand-mark" aria-hidden>
|
||||
JC
|
||||
</span>
|
||||
<span className="brand-text">
|
||||
<span className="brand-name">Jorge Cuadros</span>
|
||||
<span className="brand-sub">& Asociados</span>
|
||||
</span>
|
||||
</Link>
|
||||
<nav className="appbar-nav" aria-label="Principal">
|
||||
<Link href="/clientes" className="appbar-link active">
|
||||
Clientes
|
||||
</Link>
|
||||
</nav>
|
||||
<span className="appbar-spacer" />
|
||||
<div className="appbar-user">
|
||||
{user && (
|
||||
<span className="appbar-user-name">{user.name}</span>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost"
|
||||
onClick={handleLogout}
|
||||
disabled={loggingOut}
|
||||
>
|
||||
{loggingOut ? "Saliendo…" : "Cerrar sesión"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main className="shell-main">{children}</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
// Cross-origin API client. All requests send the session cookie (connect.sid)
|
||||
// via credentials: "include". The API origin comes from NEXT_PUBLIC_API_ORIGIN.
|
||||
|
||||
import type {
|
||||
AuthUser,
|
||||
BusinessLine,
|
||||
CustomerDetail,
|
||||
CustomerListResponse,
|
||||
CustomerStats,
|
||||
} from "./types";
|
||||
|
||||
export const API_ORIGIN =
|
||||
process.env.NEXT_PUBLIC_API_ORIGIN ?? "http://localhost:3001";
|
||||
|
||||
export class ApiError extends Error {
|
||||
status: number;
|
||||
constructor(status: number, message: string) {
|
||||
super(message);
|
||||
this.status = status;
|
||||
this.name = "ApiError";
|
||||
}
|
||||
}
|
||||
|
||||
async function apiFetch<T>(
|
||||
path: string,
|
||||
init?: RequestInit,
|
||||
): Promise<T> {
|
||||
let res: Response;
|
||||
try {
|
||||
res = await fetch(`${API_ORIGIN}${path}`, {
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(init?.headers ?? {}),
|
||||
},
|
||||
...init,
|
||||
});
|
||||
} catch (e) {
|
||||
throw new ApiError(
|
||||
0,
|
||||
"No se pudo conectar con el servidor. Verifica tu conexión.",
|
||||
);
|
||||
}
|
||||
|
||||
if (!res.ok) {
|
||||
let message = `Error ${res.status}`;
|
||||
try {
|
||||
const body = await res.json();
|
||||
if (body?.message) message = body.message;
|
||||
} catch {
|
||||
/* ignore non-JSON error bodies */
|
||||
}
|
||||
throw new ApiError(res.status, message);
|
||||
}
|
||||
|
||||
if (res.status === 204) return undefined as T;
|
||||
return (await res.json()) as T;
|
||||
}
|
||||
|
||||
export function login(email: string, password: string): Promise<AuthUser> {
|
||||
return apiFetch<AuthUser>("/auth/login", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ email, password }),
|
||||
});
|
||||
}
|
||||
|
||||
export function me(): Promise<AuthUser> {
|
||||
return apiFetch<AuthUser>("/auth/me");
|
||||
}
|
||||
|
||||
export function logout(): Promise<{ success: boolean }> {
|
||||
return apiFetch<{ success: boolean }>("/auth/logout", { method: "POST" });
|
||||
}
|
||||
|
||||
export function getStats(): Promise<CustomerStats> {
|
||||
return apiFetch<CustomerStats>("/customers/stats");
|
||||
}
|
||||
|
||||
export interface CustomerQuery {
|
||||
query?: string;
|
||||
page?: number;
|
||||
pageSize?: number;
|
||||
line?: BusinessLine;
|
||||
}
|
||||
|
||||
export function listCustomers(
|
||||
q: CustomerQuery,
|
||||
): Promise<CustomerListResponse> {
|
||||
const params = new URLSearchParams();
|
||||
if (q.query) params.set("query", q.query);
|
||||
if (q.page) params.set("page", String(q.page));
|
||||
if (q.pageSize) params.set("pageSize", String(q.pageSize));
|
||||
if (q.line) params.set("line", q.line);
|
||||
const qs = params.toString();
|
||||
return apiFetch<CustomerListResponse>(`/customers${qs ? `?${qs}` : ""}`);
|
||||
}
|
||||
|
||||
export function getCustomer(id: string): Promise<CustomerDetail> {
|
||||
return apiFetch<CustomerDetail>(`/customers/${id}`);
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
// Spanish label maps + formatting helpers. Single source of truth for i18n.
|
||||
|
||||
import type { ServiceKind, TransactionDomain } from "./types";
|
||||
|
||||
export const DOMAIN_LABELS: Record<string, string> = {
|
||||
UTILITY: "Servicios",
|
||||
INSURANCE: "Seguros",
|
||||
TRUST: "Fideicomiso",
|
||||
};
|
||||
|
||||
export function domainLabel(domain: TransactionDomain): string {
|
||||
return DOMAIN_LABELS[domain] ?? domain;
|
||||
}
|
||||
|
||||
export const SERVICE_KIND_LABELS: Record<string, string> = {
|
||||
WATER: "Agua",
|
||||
ELECTRIC: "Electricidad",
|
||||
GAS: "Gas",
|
||||
CABLE: "Cable/TV",
|
||||
PROPERTY_TAX: "Predial",
|
||||
FEDERAL_ZONE: "Zona Federal",
|
||||
ALARM: "Alarma",
|
||||
OTHER: "Otro",
|
||||
};
|
||||
|
||||
export function serviceKindLabel(kind: ServiceKind): string {
|
||||
return SERVICE_KIND_LABELS[kind] ?? kind;
|
||||
}
|
||||
|
||||
// A short glyph per service kind, drawn with unicode so no icon dependency.
|
||||
export const SERVICE_KIND_GLYPH: Record<string, string> = {
|
||||
WATER: "≈",
|
||||
ELECTRIC: "⚡",
|
||||
GAS: "◐",
|
||||
CABLE: "▤",
|
||||
PROPERTY_TAX: "⌂",
|
||||
FEDERAL_ZONE: "⇲",
|
||||
ALARM: "◈",
|
||||
OTHER: "•",
|
||||
};
|
||||
|
||||
export function serviceKindGlyph(kind: ServiceKind): string {
|
||||
return SERVICE_KIND_GLYPH[kind] ?? "•";
|
||||
}
|
||||
|
||||
// ----- formatting -----
|
||||
|
||||
export function formatMoney(
|
||||
value: string | number | null | undefined,
|
||||
currency: string | null | undefined,
|
||||
): string {
|
||||
if (value === null || value === undefined || value === "") return "—";
|
||||
const num = typeof value === "string" ? Number(value) : value;
|
||||
if (Number.isNaN(num)) return String(value);
|
||||
const cur = (currency ?? "USD").toUpperCase();
|
||||
try {
|
||||
return new Intl.NumberFormat("es-MX", {
|
||||
style: "currency",
|
||||
currency: cur,
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
}).format(num);
|
||||
} catch {
|
||||
// Unknown currency code — fall back to plain number + suffix.
|
||||
return `${num.toLocaleString("es-MX", {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})} ${cur}`;
|
||||
}
|
||||
}
|
||||
|
||||
export function formatDate(
|
||||
iso: string | null | undefined,
|
||||
): string {
|
||||
if (!iso) return "—";
|
||||
const d = new Date(iso);
|
||||
if (Number.isNaN(d.getTime())) return "—";
|
||||
const dd = String(d.getUTCDate()).padStart(2, "0");
|
||||
const mm = String(d.getUTCMonth() + 1).padStart(2, "0");
|
||||
const yyyy = d.getUTCFullYear();
|
||||
return `${dd}/${mm}/${yyyy}`;
|
||||
}
|
||||
|
||||
export function formatNumber(n: number): string {
|
||||
return n.toLocaleString("es-MX");
|
||||
}
|
||||
|
||||
// "sourceSystem" from legacyRefs → display label.
|
||||
export function sourceSystemLabel(source: string): string {
|
||||
const map: Record<string, string> = {
|
||||
utilities: "Servicios",
|
||||
insurance: "Seguros",
|
||||
};
|
||||
return map[source] ?? source;
|
||||
}
|
||||
@@ -0,0 +1,219 @@
|
||||
// TypeScript types for the Jorge Cuadros & Asociados API responses.
|
||||
// Decimals arrive as strings, dates as ISO strings.
|
||||
|
||||
export interface AuthUser {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
role: string;
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
export interface CustomerStats {
|
||||
customers: number;
|
||||
withUtilities: number;
|
||||
withInsurance: number;
|
||||
bothLines: number;
|
||||
policies: number;
|
||||
properties: number;
|
||||
transactions: number;
|
||||
}
|
||||
|
||||
export type BusinessLine = "utility" | "insurance" | "both";
|
||||
|
||||
export interface CustomerListItem {
|
||||
id: string;
|
||||
name: string;
|
||||
city: string | null;
|
||||
state: string | null;
|
||||
email: string | null;
|
||||
phone: string | null;
|
||||
mobile: string | null;
|
||||
status: boolean;
|
||||
propertyCount: number;
|
||||
policyCount: number;
|
||||
transactionCount: number;
|
||||
hasUtilities: boolean;
|
||||
hasInsurance: boolean;
|
||||
}
|
||||
|
||||
export interface CustomerListResponse {
|
||||
items: CustomerListItem[];
|
||||
total: number;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
pageCount: number;
|
||||
}
|
||||
|
||||
export interface LegacyRef {
|
||||
id: string;
|
||||
sourceSystem: string; // "utilities" | "insurance"
|
||||
sourceTable: string;
|
||||
legacyId: string;
|
||||
}
|
||||
|
||||
export type ServiceKind =
|
||||
| "WATER"
|
||||
| "ELECTRIC"
|
||||
| "GAS"
|
||||
| "CABLE"
|
||||
| "PROPERTY_TAX"
|
||||
| "FEDERAL_ZONE"
|
||||
| "ALARM"
|
||||
| "OTHER"
|
||||
| string;
|
||||
|
||||
export interface Service {
|
||||
id: string;
|
||||
kind: ServiceKind;
|
||||
accountNumber: string | null;
|
||||
meterNumber: string | null;
|
||||
route: string | null;
|
||||
dueDay: string | null;
|
||||
active: boolean;
|
||||
notes: string | null;
|
||||
}
|
||||
|
||||
export interface TrustAccount {
|
||||
id: string;
|
||||
bankName: string | null;
|
||||
trustNumber: string | null;
|
||||
bankFee: string | null;
|
||||
dueDate1: string | null;
|
||||
dueDate2: string | null;
|
||||
}
|
||||
|
||||
export interface DocumentRef {
|
||||
id?: string;
|
||||
documentType: string | null;
|
||||
storageKey: string | null;
|
||||
}
|
||||
|
||||
export interface Property {
|
||||
id: string;
|
||||
addressLine1: string | null;
|
||||
addressLine2: string | null;
|
||||
phone1: string | null;
|
||||
phone2: string | null;
|
||||
phone3: string | null;
|
||||
zone: string | null;
|
||||
services: Service[];
|
||||
trustAccount: TrustAccount | null;
|
||||
documents: DocumentRef[];
|
||||
}
|
||||
|
||||
export interface Installment {
|
||||
id: string;
|
||||
sequence: number;
|
||||
amount: string | null;
|
||||
currency: string | null;
|
||||
dueDate: string | null;
|
||||
paidDate: string | null;
|
||||
checkNumber: string | null;
|
||||
isCash: boolean;
|
||||
}
|
||||
|
||||
export interface Vehicle {
|
||||
id: string;
|
||||
make: string | null;
|
||||
model: string | null;
|
||||
modelYear: number | null;
|
||||
licensePlate: string | null;
|
||||
bodyType: string | null;
|
||||
engineNumber?: string | null;
|
||||
vinNumber?: string | null;
|
||||
}
|
||||
|
||||
export interface InsuredDriver {
|
||||
id: string;
|
||||
fullName: string | null;
|
||||
licenseNumber: string | null;
|
||||
}
|
||||
|
||||
export interface Beneficiary {
|
||||
id: string;
|
||||
name: string | null;
|
||||
phone: string | null;
|
||||
email: string | null;
|
||||
address?: string | null;
|
||||
}
|
||||
|
||||
export interface NamedRef {
|
||||
name: string | null;
|
||||
shortDescription?: string | null;
|
||||
}
|
||||
|
||||
export interface Policy {
|
||||
id: string;
|
||||
policyNumber: string | null;
|
||||
policyType: NamedRef | null;
|
||||
insuranceProvider: NamedRef | null;
|
||||
agentName: string | null;
|
||||
policyFrom: string | null;
|
||||
policyTo: string | null;
|
||||
netPremium: string | null;
|
||||
total: string | null;
|
||||
currency: string | null;
|
||||
liquidated: boolean;
|
||||
installments: Installment[];
|
||||
vehicles: Vehicle[];
|
||||
insuredDrivers: InsuredDriver[];
|
||||
beneficiaries: Beneficiary[];
|
||||
claims: unknown[];
|
||||
documents: DocumentRef[];
|
||||
}
|
||||
|
||||
export type TransactionDomain = "UTILITY" | "INSURANCE" | "TRUST" | string;
|
||||
|
||||
export interface TransactionType {
|
||||
nameEn: string | null;
|
||||
nameEs: string | null;
|
||||
}
|
||||
|
||||
export interface Transaction {
|
||||
id: string;
|
||||
transactionDate: string | null;
|
||||
domain: TransactionDomain;
|
||||
amount: string | null;
|
||||
currency: string | null;
|
||||
reference: string | null;
|
||||
period?: string | null;
|
||||
message: string | null;
|
||||
checkNumber: string | null;
|
||||
type: TransactionType | null;
|
||||
}
|
||||
|
||||
export interface TransactionSummaryRow {
|
||||
domain: TransactionDomain;
|
||||
currency: string;
|
||||
total: string;
|
||||
count: number;
|
||||
}
|
||||
|
||||
export interface CustomerDetail {
|
||||
id: string;
|
||||
name: string;
|
||||
addressLine1: string | null;
|
||||
addressLine2: string | null;
|
||||
city: string | null;
|
||||
state: string | null;
|
||||
zipCode: string | null;
|
||||
country: string | null;
|
||||
phone: string | null;
|
||||
mobile: string | null;
|
||||
fax: string | null;
|
||||
email: string | null;
|
||||
notes: string | null;
|
||||
identificationType: string | null;
|
||||
identificationNumber: string | null;
|
||||
identificationExpiration: string | null;
|
||||
customerSince: string | null;
|
||||
status: boolean;
|
||||
feeAmount: string | number | null;
|
||||
preferredCurrency: string | null;
|
||||
legacyRefs: LegacyRef[];
|
||||
properties: Property[];
|
||||
policies: Policy[];
|
||||
transactions: Transaction[];
|
||||
transactionSummary: TransactionSummaryRow[];
|
||||
}
|
||||
Reference in New Issue
Block a user