>();
+
+ 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 (
+ <>
+
+
Directorio unificado
+
Clientes
+
+
+
+
+ ⌕
+
+ setQuery(e.target.value)}
+ placeholder="Buscar por nombre, ciudad, teléfono…"
+ aria-label="Buscar clientes"
+ />
+
+
+ {FILTERS.map((f) => (
+
+ ))}
+
+
+ {data.total === 0
+ ? "Sin resultados"
+ : `${formatNumber(data.total)} ${
+ data.total === 1 ? "cliente" : "clientes"
+ }`}
+ {query ? ` para “${query}”` : ""}
+
+ )}
+
+ {error ? (
+
+ {error}
+
+ ) : loading ? (
+
+ ) : data && data.items.length === 0 ? (
+
+ ) : (
+ <>
+
+ {data?.items.map((c) => (
+
+ ))}
+
+ {data && data.pageCount > 1 && (
+
+ )}
+
+ )}
+
+ );
+}
+
+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 (
+
+ {Array.from({ length: 6 }).map((_, i) => (
+
+ ))}
+
+ {cells.map((c) => (
+
+
{c.value}
+
{c.label}
+
+ ))}
+
+
+ {!c.status && (
+
+ )}
+ {c.name}
+
+
+ {location && {location}}
+ {location && contact && ·}
+ {contact && {contact}}
+
+
+ {c.hasUtilities && (
+
+ Servicios
+ {c.propertyCount > 0 && (
+ · {c.propertyCount}
+ )}
+
+ )}
+ {c.hasInsurance && (
+
+ Seguros
+ {c.policyCount > 0 && (
+ · {c.policyCount}
+ )}
+
+ )}
+
+
+ );
+}
+
+function Pager({
+ page,
+ pageCount,
+ onChange,
+}: {
+ page: number;
+ pageCount: number;
+ onChange: (p: number) => void;
+}) {
+ return (
+
+ );
+}
+
+function ListSkeleton() {
+ return (
+
+ {Array.from({ length: 8 }).map((_, i) => (
+
+ ))}
+
+
+ ⌕
+
+
Sin resultados
+
+ {query
+ ? `No encontramos clientes para “${query}”.`
+ : "No hay clientes que coincidan con el filtro."}
+
+
+
+
+ );
+ }
+
+ return (
+
+ {/* Brand / narrative panel */}
+
+
+ {/* Form panel */}
+
+
+
Acceso del personal
+
Iniciar sesión
+
+ Ingresa con tu cuenta para continuar.
+
+
+
+
+
Jorge Cuadros & Assoc.
- Unified customer platform — scaffold in progress.
-
- );
+ redirect("/clientes");
}
diff --git a/apps/web/src/components/AppShell.tsx b/apps/web/src/components/AppShell.tsx
new file mode 100644
index 0000000..c536f2a
--- /dev/null
+++ b/apps/web/src/components/AppShell.tsx
@@ -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(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 (
+
+
+
+ );
+ }
+
+ return (
+ <>
+
+ {children}
+
+ );
+}
diff --git a/apps/web/src/lib/api.ts b/apps/web/src/lib/api.ts
new file mode 100644
index 0000000..f339538
--- /dev/null
+++ b/apps/web/src/lib/api.ts
@@ -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(
+ path: string,
+ init?: RequestInit,
+): Promise {
+ 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 {
+ return apiFetch("/auth/login", {
+ method: "POST",
+ body: JSON.stringify({ email, password }),
+ });
+}
+
+export function me(): Promise {
+ return apiFetch("/auth/me");
+}
+
+export function logout(): Promise<{ success: boolean }> {
+ return apiFetch<{ success: boolean }>("/auth/logout", { method: "POST" });
+}
+
+export function getStats(): Promise {
+ return apiFetch("/customers/stats");
+}
+
+export interface CustomerQuery {
+ query?: string;
+ page?: number;
+ pageSize?: number;
+ line?: BusinessLine;
+}
+
+export function listCustomers(
+ q: CustomerQuery,
+): Promise {
+ 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(`/customers${qs ? `?${qs}` : ""}`);
+}
+
+export function getCustomer(id: string): Promise {
+ return apiFetch(`/customers/${id}`);
+}
diff --git a/apps/web/src/lib/labels.ts b/apps/web/src/lib/labels.ts
new file mode 100644
index 0000000..40fa46c
--- /dev/null
+++ b/apps/web/src/lib/labels.ts
@@ -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 = {
+ UTILITY: "Servicios",
+ INSURANCE: "Seguros",
+ TRUST: "Fideicomiso",
+};
+
+export function domainLabel(domain: TransactionDomain): string {
+ return DOMAIN_LABELS[domain] ?? domain;
+}
+
+export const SERVICE_KIND_LABELS: Record = {
+ 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 = {
+ 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 = {
+ utilities: "Servicios",
+ insurance: "Seguros",
+ };
+ return map[source] ?? source;
+}
diff --git a/apps/web/src/lib/types.ts b/apps/web/src/lib/types.ts
new file mode 100644
index 0000000..4b7699d
--- /dev/null
+++ b/apps/web/src/lib/types.ts
@@ -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[];
+}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 65fb98c..cdf700c 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -2,19 +2,12 @@ packages:
- "apps/*"
- "packages/*"
-allowBuilds:
- '@nestjs/core': set this to true or false
- '@prisma/client': set this to true or false
- '@prisma/engines': set this to true or false
- argon2: set this to true or false
- prisma: set this to true or false
-
# Native / postinstall build scripts we trust (argon2 native addon, Prisma
# engine download + client generation, Nest core). pnpm blocks build scripts
# by default; these are required for the API to run.
-onlyBuiltDependencies:
- - "@nestjs/core"
- - "@prisma/client"
- - "@prisma/engines"
- - argon2
- - prisma
+allowBuilds:
+ '@nestjs/core': true
+ '@prisma/client': true
+ '@prisma/engines': true
+ argon2: true
+ prisma: true