feat(billing): shared statements module across both business lines
Plan step 6 — the payoff of the unified customer record: a utility charge and an insurance payment finally sit on the same page, under the same person, with a running balance. API (apps/api/src/billing/): - GET /billing — cross-customer movement browser. Search over customer, referencia, cheque, concepto and periodo; filters for business line, currency, charge-vs-credit, concept, origin table and a from/to date range; 5 sorts. Returns totals for the whole filtered set, not just the page, so a filtered view can't be misread as the full ledger. - GET /billing/balances — per-customer receivables worklist with owing/credit/settled buckets and 4 sorts. Raw SQL (parameterized via Prisma.sql): needs conditional sums per currency and per direction in one pass plus ordering and pagination on a computed balance, none of which groupBy expresses. - GET /billing/stats, /billing/facets, /billing/customers/:id. Web: - /estado-cuenta — two views over the same ledger, because staff ask two different questions: "Saldos por cliente" (who owes what) and "Movimientos" (every charge and credit). - /estado-cuenta/[id] — the statement: balance per currency, the same balance split by business line, charges broken out by concept, and the full movement list with a running balance. - Cross-linked from the customer and property detail pages. Two data findings shape the whole module: 1. transactions.amount is a signed ledger. Every charge type is negative without exception (WATER 3115/3117, ELECTRIC 2191/2191, PROPERTY TAXES 926/926, TRUST FEE 188/188) and every deposit type positive (CHECK and CASH DEPOSIT, PAYPAL, all of EFECTIVO). So SUM(amount) is the balance and negative means the customer owes the office. 2. Currency is not summable. 912 of the 1269 customers with a ledger move in both MXN and USD, the charge side is MXN-only while receipts arrive in both, and no per-movement exchange rate was ever stored. A single "total balance" would be a figure that never existed in the books, so every total is reported per currency and the balance filter/sort takes a currency argument rather than collapsing. Also: type_transactions.nameEs is entirely null (the legacy TYPE OF TRX ESPAÑOL column is empty in all 79 rows), so Spanish concept names come from a label map in labels.ts; the entries that are payee names rather than categories fall through untranslated, which is correct. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -0,0 +1,845 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { AppShell } from "@/components/AppShell";
|
||||
import {
|
||||
getBillingFacets,
|
||||
getBillingStats,
|
||||
listBalances,
|
||||
listMovements,
|
||||
} from "@/lib/api";
|
||||
import {
|
||||
balancePhrase,
|
||||
balanceTone,
|
||||
directionLabel,
|
||||
domainLabel,
|
||||
formatDate,
|
||||
formatMoney,
|
||||
formatNumber,
|
||||
ledgerSourceLabel,
|
||||
SIN_NOMBRE,
|
||||
txTypeLabel,
|
||||
} from "@/lib/labels";
|
||||
import type {
|
||||
BalanceFilter,
|
||||
BalanceListItem,
|
||||
BalanceListResponse,
|
||||
BalanceSort,
|
||||
BillingFacets,
|
||||
BillingStats,
|
||||
LedgerCurrency,
|
||||
LedgerDirection,
|
||||
MovementListItem,
|
||||
MovementListResponse,
|
||||
MovementSort,
|
||||
TransactionDomain,
|
||||
} from "@/lib/types";
|
||||
|
||||
/**
|
||||
* Shared billing / statements browser — plan step 6.
|
||||
*
|
||||
* Two views over the same ledger, because staff ask two different questions:
|
||||
* - "Saldos": who owes what, one row per customer. The receivables worklist.
|
||||
* - "Movimientos": every individual charge and credit, filterable — the
|
||||
* answer to "what did we bill for water in April".
|
||||
*
|
||||
* Both are cross-line: a customer's utility charges and insurance movements sit
|
||||
* in the same ledger, which is the point of the unified customer record.
|
||||
*
|
||||
* Balances are always shown *per currency* and never added together — see the
|
||||
* currency note in `billing.service.ts`.
|
||||
*/
|
||||
type View = "saldos" | "movimientos";
|
||||
|
||||
const BALANCE_FILTERS: { key: BalanceFilter; label: string }[] = [
|
||||
{ key: "owing", label: "Con adeudo" },
|
||||
{ key: "credit", label: "Con saldo a favor" },
|
||||
{ key: "settled", label: "En ceros" },
|
||||
{ key: "all", label: "Todos" },
|
||||
];
|
||||
|
||||
const BALANCE_SORTS: { key: BalanceSort; label: string }[] = [
|
||||
{ key: "owing_desc", label: "Mayor adeudo primero" },
|
||||
{ key: "credit_desc", label: "Mayor saldo a favor primero" },
|
||||
{ key: "recent", label: "Movimiento más reciente" },
|
||||
{ key: "customer", label: "Cliente (A–Z)" },
|
||||
];
|
||||
|
||||
const MOVEMENT_SORTS: { key: MovementSort; label: string }[] = [
|
||||
{ key: "date_desc", label: "Fecha (más reciente)" },
|
||||
{ key: "date_asc", label: "Fecha (más antigua)" },
|
||||
{ key: "amount_asc", label: "Cargo más grande" },
|
||||
{ key: "amount_desc", label: "Abono más grande" },
|
||||
{ key: "customer", label: "Cliente (A–Z)" },
|
||||
];
|
||||
|
||||
const DIRECTIONS: { key: LedgerDirection | ""; label: string }[] = [
|
||||
{ key: "", label: "Cargos y abonos" },
|
||||
{ key: "charge", label: "Sólo cargos" },
|
||||
{ key: "credit", label: "Sólo abonos" },
|
||||
];
|
||||
|
||||
const DOMAINS: { key: TransactionDomain | ""; label: string }[] = [
|
||||
{ key: "", label: "Ambas líneas" },
|
||||
{ key: "UTILITY", label: "Servicios" },
|
||||
{ key: "INSURANCE", label: "Seguros" },
|
||||
];
|
||||
|
||||
export default function EstadoCuentaPage() {
|
||||
return (
|
||||
<AppShell>
|
||||
<BillingBrowser />
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
function BillingBrowser() {
|
||||
const [stats, setStats] = useState<BillingStats | null>(null);
|
||||
const [facets, setFacets] = useState<BillingFacets | null>(null);
|
||||
const [view, setView] = useState<View>("saldos");
|
||||
|
||||
// The currency every balance figure is filtered and sorted on. MXN is the
|
||||
// default because the charge side of the ledger is MXN-only.
|
||||
const [currency, setCurrency] = useState<LedgerCurrency>("MXN");
|
||||
const [query, setQuery] = useState("");
|
||||
const [domain, setDomain] = useState<TransactionDomain | "">("");
|
||||
|
||||
const [balanceFilter, setBalanceFilter] = useState<BalanceFilter>("owing");
|
||||
const [balanceSort, setBalanceSort] = useState<BalanceSort>("owing_desc");
|
||||
|
||||
const [direction, setDirection] = useState<LedgerDirection | "">("");
|
||||
const [typeId, setTypeId] = useState("");
|
||||
const [source, setSource] = useState("");
|
||||
const [from, setFrom] = useState("");
|
||||
const [to, setTo] = useState("");
|
||||
const [movementSort, setMovementSort] = useState<MovementSort>("date_desc");
|
||||
|
||||
const [balances, setBalances] = useState<BalanceListResponse | null>(null);
|
||||
const [movements, setMovements] = useState<MovementListResponse | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const debounceRef = useRef<ReturnType<typeof setTimeout>>();
|
||||
|
||||
useEffect(() => {
|
||||
getBillingStats().then(setStats).catch(() => setStats(null));
|
||||
getBillingFacets().then(setFacets).catch(() => setFacets(null));
|
||||
}, []);
|
||||
|
||||
const runSearch = useCallback(
|
||||
(p: number) => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const done = (fn: () => void) => {
|
||||
fn();
|
||||
setLoading(false);
|
||||
};
|
||||
if (view === "saldos") {
|
||||
listBalances({
|
||||
query: query || undefined,
|
||||
currency,
|
||||
balance: balanceFilter,
|
||||
domain: domain || undefined,
|
||||
sort: balanceSort,
|
||||
page: p,
|
||||
pageSize: 25,
|
||||
})
|
||||
.then((res) => done(() => setBalances(res)))
|
||||
.catch((e) => {
|
||||
setError(e?.message ?? "No se pudieron cargar los saldos.");
|
||||
setLoading(false);
|
||||
});
|
||||
} else {
|
||||
listMovements({
|
||||
query: query || undefined,
|
||||
currency,
|
||||
domain: domain || undefined,
|
||||
direction: direction || undefined,
|
||||
typeId: typeId || undefined,
|
||||
source: source || undefined,
|
||||
from: from || undefined,
|
||||
to: to || undefined,
|
||||
sort: movementSort,
|
||||
page: p,
|
||||
pageSize: 25,
|
||||
})
|
||||
.then((res) => done(() => setMovements(res)))
|
||||
.catch((e) => {
|
||||
setError(e?.message ?? "No se pudieron cargar los movimientos.");
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
},
|
||||
[
|
||||
view,
|
||||
query,
|
||||
currency,
|
||||
domain,
|
||||
balanceFilter,
|
||||
balanceSort,
|
||||
direction,
|
||||
typeId,
|
||||
source,
|
||||
from,
|
||||
to,
|
||||
movementSort,
|
||||
],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current);
|
||||
debounceRef.current = setTimeout(() => runSearch(1), 280);
|
||||
return () => {
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current);
|
||||
};
|
||||
}, [runSearch]);
|
||||
|
||||
function goToPage(p: number) {
|
||||
runSearch(p);
|
||||
if (typeof window !== "undefined")
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
|
||||
/** Jumping in from a headline count should land on the matching worklist. */
|
||||
function pickBalance(f: BalanceFilter, cur?: LedgerCurrency) {
|
||||
setView("saldos");
|
||||
setBalanceFilter(f);
|
||||
if (cur) setCurrency(cur);
|
||||
setBalanceSort(f === "credit" ? "credit_desc" : "owing_desc");
|
||||
}
|
||||
|
||||
const data = view === "saldos" ? balances : movements;
|
||||
const filtered =
|
||||
query !== "" ||
|
||||
domain !== "" ||
|
||||
(view === "saldos"
|
||||
? balanceFilter !== "owing" || balanceSort !== "owing_desc"
|
||||
: direction !== "" ||
|
||||
typeId !== "" ||
|
||||
source !== "" ||
|
||||
from !== "" ||
|
||||
to !== "" ||
|
||||
movementSort !== "date_desc");
|
||||
|
||||
function clearFilters() {
|
||||
setQuery("");
|
||||
setDomain("");
|
||||
setCurrency("MXN");
|
||||
setBalanceFilter("owing");
|
||||
setBalanceSort("owing_desc");
|
||||
setDirection("");
|
||||
setTypeId("");
|
||||
setSource("");
|
||||
setFrom("");
|
||||
setTo("");
|
||||
setMovementSort("date_desc");
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="page-head rise">
|
||||
<p className="eyebrow">Cobranza y facturación</p>
|
||||
<h1 className="page-title">Estado de cuenta</h1>
|
||||
<BillingStatStrip
|
||||
stats={stats}
|
||||
currency={currency}
|
||||
balanceFilter={view === "saldos" ? balanceFilter : null}
|
||||
onPickBalance={pickBalance}
|
||||
/>
|
||||
<LedgerTotalsStrip 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={
|
||||
view === "saldos"
|
||||
? "Buscar por cliente o ciudad…"
|
||||
: "Buscar por cliente, referencia, cheque, concepto…"
|
||||
}
|
||||
aria-label="Buscar en el estado de cuenta"
|
||||
/>
|
||||
</div>
|
||||
<div className="seg" role="tablist" aria-label="Vista">
|
||||
{(
|
||||
[
|
||||
{ key: "saldos" as View, label: "Saldos por cliente" },
|
||||
{ key: "movimientos" as View, label: "Movimientos" },
|
||||
]
|
||||
).map((v) => (
|
||||
<button
|
||||
key={v.key}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={view === v.key}
|
||||
className={`seg-btn ${view === v.key ? "active" : ""}`}
|
||||
onClick={() => setView(v.key)}
|
||||
>
|
||||
{v.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="filter-row">
|
||||
<label className="filter-field">
|
||||
<span className="filter-label">Moneda</span>
|
||||
<select
|
||||
className="input select"
|
||||
value={currency}
|
||||
onChange={(e) => setCurrency(e.target.value as LedgerCurrency)}
|
||||
>
|
||||
<option value="MXN">Pesos (MXN)</option>
|
||||
<option value="USD">Dólares (USD)</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="filter-field">
|
||||
<span className="filter-label">Línea de negocio</span>
|
||||
<select
|
||||
className="input select"
|
||||
value={domain}
|
||||
onChange={(e) => setDomain(e.target.value as TransactionDomain | "")}
|
||||
>
|
||||
{DOMAINS.map((d) => (
|
||||
<option key={d.key} value={d.key}>
|
||||
{d.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{view === "saldos" ? (
|
||||
<>
|
||||
<label className="filter-field">
|
||||
<span className="filter-label">Saldo</span>
|
||||
<select
|
||||
className="input select"
|
||||
value={balanceFilter}
|
||||
onChange={(e) =>
|
||||
setBalanceFilter(e.target.value as BalanceFilter)
|
||||
}
|
||||
>
|
||||
{BALANCE_FILTERS.map((b) => (
|
||||
<option key={b.key} value={b.key}>
|
||||
{b.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="filter-field">
|
||||
<span className="filter-label">Ordenar por</span>
|
||||
<select
|
||||
className="input select"
|
||||
value={balanceSort}
|
||||
onChange={(e) => setBalanceSort(e.target.value as BalanceSort)}
|
||||
>
|
||||
{BALANCE_SORTS.map((s) => (
|
||||
<option key={s.key} value={s.key}>
|
||||
{s.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<label className="filter-field">
|
||||
<span className="filter-label">Movimiento</span>
|
||||
<select
|
||||
className="input select"
|
||||
value={direction}
|
||||
onChange={(e) =>
|
||||
setDirection(e.target.value as LedgerDirection | "")
|
||||
}
|
||||
>
|
||||
{DIRECTIONS.map((d) => (
|
||||
<option key={d.key} value={d.key}>
|
||||
{d.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="filter-field">
|
||||
<span className="filter-label">Concepto</span>
|
||||
<select
|
||||
className="input select"
|
||||
value={typeId}
|
||||
onChange={(e) => setTypeId(e.target.value)}
|
||||
>
|
||||
<option value="">Todos los conceptos</option>
|
||||
{facets?.types.map((t) => (
|
||||
<option key={t.id} value={t.id}>
|
||||
{txTypeLabel({ nameEn: t.name })} ({formatNumber(t.count)})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="filter-field">
|
||||
<span className="filter-label">Origen</span>
|
||||
<select
|
||||
className="input select"
|
||||
value={source}
|
||||
onChange={(e) => setSource(e.target.value)}
|
||||
>
|
||||
<option value="">Todos los orígenes</option>
|
||||
{facets?.sources.map((s) => (
|
||||
<option key={s.name} value={s.name}>
|
||||
{ledgerSourceLabel(s.name)} ({formatNumber(s.count)})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="filter-field">
|
||||
<span className="filter-label">Desde</span>
|
||||
<input
|
||||
className="input"
|
||||
type="date"
|
||||
value={from}
|
||||
onChange={(e) => setFrom(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="filter-field">
|
||||
<span className="filter-label">Hasta</span>
|
||||
<input
|
||||
className="input"
|
||||
type="date"
|
||||
value={to}
|
||||
onChange={(e) => setTo(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="filter-field">
|
||||
<span className="filter-label">Ordenar por</span>
|
||||
<select
|
||||
className="input select"
|
||||
value={movementSort}
|
||||
onChange={(e) =>
|
||||
setMovementSort(e.target.value as MovementSort)
|
||||
}
|
||||
>
|
||||
{MOVEMENT_SORTS.map((s) => (
|
||||
<option key={s.key} value={s.key}>
|
||||
{s.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</>
|
||||
)}
|
||||
|
||||
{filtered && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost filter-clear"
|
||||
onClick={clearFilters}
|
||||
>
|
||||
Limpiar filtros
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{data && !loading && !error && (
|
||||
<div className="result-meta" aria-live="polite">
|
||||
{data.total === 0
|
||||
? "Sin resultados"
|
||||
: view === "saldos"
|
||||
? `${formatNumber(data.total)} ${
|
||||
data.total === 1 ? "cliente" : "clientes"
|
||||
} · saldo en ${currency}`
|
||||
: `${formatNumber(data.total)} ${
|
||||
data.total === 1 ? "movimiento" : "movimientos"
|
||||
}`}
|
||||
{query ? ` para “${query}”` : ""}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{view === "movimientos" && movements && !loading && (
|
||||
<FilteredTotals totals={movements.totals} />
|
||||
)}
|
||||
|
||||
{error ? (
|
||||
<div className="state-error" role="alert">
|
||||
{error}
|
||||
</div>
|
||||
) : loading ? (
|
||||
<ListSkeleton />
|
||||
) : data && data.total === 0 ? (
|
||||
<EmptyState query={query} view={view} />
|
||||
) : view === "saldos" ? (
|
||||
<>
|
||||
<div className="cust-list">
|
||||
{balances?.items.map((b) => (
|
||||
<BalanceRow key={b.id} b={b} currency={currency} />
|
||||
))}
|
||||
</div>
|
||||
{balances && balances.pageCount > 1 && (
|
||||
<Pager
|
||||
page={balances.page}
|
||||
pageCount={balances.pageCount}
|
||||
onChange={goToPage}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="card">
|
||||
<div className="tx-scroll">
|
||||
<table className="tx-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Fecha</th>
|
||||
<th>Cliente</th>
|
||||
<th>Línea</th>
|
||||
<th>Concepto</th>
|
||||
<th>Referencia</th>
|
||||
<th className="num">Monto</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{movements?.items.map((m) => (
|
||||
<MovementRow key={m.id} m={m} />
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{movements && movements.pageCount > 1 && (
|
||||
<Pager
|
||||
page={movements.page}
|
||||
pageCount={movements.pageCount}
|
||||
onChange={goToPage}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/** Headline counts; the owing/credit cells double as worklist shortcuts. */
|
||||
function BillingStatStrip({
|
||||
stats,
|
||||
currency,
|
||||
balanceFilter,
|
||||
onPickBalance,
|
||||
}: {
|
||||
stats: BillingStats | null;
|
||||
currency: LedgerCurrency;
|
||||
balanceFilter: BalanceFilter | null;
|
||||
onPickBalance: (f: BalanceFilter, cur?: LedgerCurrency) => void;
|
||||
}) {
|
||||
if (!stats) {
|
||||
return (
|
||||
<div className="stat-strip" aria-hidden>
|
||||
{Array.from({ length: 5 }).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>
|
||||
);
|
||||
}
|
||||
|
||||
const cur = stats.byCurrency.find((c) => c.currency === currency);
|
||||
|
||||
return (
|
||||
<div className="stat-strip">
|
||||
<button
|
||||
type="button"
|
||||
className={`stat-cell stat-cell-btn accent${
|
||||
balanceFilter === "owing" ? " selected" : ""
|
||||
}`}
|
||||
onClick={() => onPickBalance("owing")}
|
||||
aria-pressed={balanceFilter === "owing"}
|
||||
>
|
||||
<div className="stat-value">{formatNumber(cur?.owing ?? 0)}</div>
|
||||
<div className="stat-label">Clientes con adeudo ({currency})</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`stat-cell stat-cell-btn${
|
||||
balanceFilter === "credit" ? " selected" : ""
|
||||
}`}
|
||||
onClick={() => onPickBalance("credit")}
|
||||
aria-pressed={balanceFilter === "credit"}
|
||||
>
|
||||
<div className="stat-value">{formatNumber(cur?.inCredit ?? 0)}</div>
|
||||
<div className="stat-label">Con saldo a favor ({currency})</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`stat-cell stat-cell-btn${
|
||||
balanceFilter === "all" ? " selected" : ""
|
||||
}`}
|
||||
onClick={() => onPickBalance("all")}
|
||||
aria-pressed={balanceFilter === "all"}
|
||||
>
|
||||
<div className="stat-value">{formatNumber(stats.ledgerCustomers)}</div>
|
||||
<div className="stat-label">Clientes con movimientos</div>
|
||||
</button>
|
||||
<div className="stat-cell">
|
||||
<div className="stat-value">{formatNumber(stats.movements)}</div>
|
||||
<div className="stat-label">
|
||||
Movimientos · {formatDate(stats.firstMovement)} a{" "}
|
||||
{formatDate(stats.lastMovement)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="stat-cell">
|
||||
<div className="stat-value">
|
||||
{formatNumber(stats.crossLineCustomers)}
|
||||
</div>
|
||||
<div className="stat-label">Con movimientos en ambas líneas</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Charges vs credits for the whole ledger, per currency. Kept as two separate
|
||||
* chips rather than one figure: the two currencies are never added together.
|
||||
*/
|
||||
function LedgerTotalsStrip({ stats }: { stats: BillingStats | null }) {
|
||||
if (!stats || stats.byCurrency.length === 0) return null;
|
||||
return (
|
||||
<div className="mix-strip">
|
||||
<span className="premium-caption">Movimiento histórico</span>
|
||||
{stats.byCurrency.map((c) => (
|
||||
<div className="ledger-chip" key={c.currency}>
|
||||
<span className="ledger-chip-cur">{c.currency}</span>
|
||||
<span className="ledger-chip-figs">
|
||||
<span className="tx-amount neg">
|
||||
{formatMoney(c.charges, c.currency)}
|
||||
</span>
|
||||
<span className="ledger-chip-label">
|
||||
en cargos · {formatNumber(c.chargeCount)}
|
||||
</span>
|
||||
</span>
|
||||
<span className="ledger-chip-figs">
|
||||
<span className="tx-amount pos">
|
||||
{formatMoney(c.credits, c.currency)}
|
||||
</span>
|
||||
<span className="ledger-chip-label">
|
||||
en abonos · {formatNumber(c.creditCount)}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Totals for everything the current movement filter matched, not just the page. */
|
||||
function FilteredTotals({
|
||||
totals,
|
||||
}: {
|
||||
totals: MovementListResponse["totals"];
|
||||
}) {
|
||||
if (totals.length === 0) return null;
|
||||
return (
|
||||
<div className="filtered-totals">
|
||||
{totals.map((t) => (
|
||||
<div className="filtered-total" key={t.currency}>
|
||||
<span className="filtered-total-cur">{t.currency}</span>
|
||||
<span>
|
||||
<strong className="tx-amount neg">
|
||||
{formatMoney(t.charges, t.currency)}
|
||||
</strong>{" "}
|
||||
cargos
|
||||
</span>
|
||||
<span>
|
||||
<strong className="tx-amount pos">
|
||||
{formatMoney(t.credits, t.currency)}
|
||||
</strong>{" "}
|
||||
abonos
|
||||
</span>
|
||||
<span className="filtered-total-net">
|
||||
Neto <strong>{formatMoney(t.net, t.currency)}</strong>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BalanceRow({
|
||||
b,
|
||||
currency,
|
||||
}: {
|
||||
b: BalanceListItem;
|
||||
currency: LedgerCurrency;
|
||||
}) {
|
||||
const selected =
|
||||
b.balances.find((x) => x.currency === currency) ?? b.balances[0];
|
||||
const other = b.balances.find((x) => x.currency !== currency);
|
||||
const tone = balanceTone(selected.balance);
|
||||
const location = [b.city?.replace(/,\s*$/, ""), b.state]
|
||||
.filter(Boolean)
|
||||
.join(", ");
|
||||
|
||||
return (
|
||||
<Link href={`/estado-cuenta/${b.id}`} className="cust-row bal-row">
|
||||
<div className="cust-main">
|
||||
<div className="cust-name">
|
||||
<span className={b.name === SIN_NOMBRE ? "cust-name-missing" : undefined}>
|
||||
{b.name}
|
||||
</span>
|
||||
{b.utilityMovements > 0 && (
|
||||
<span className="badge badge-servicios">
|
||||
<span className="dot" /> Servicios
|
||||
</span>
|
||||
)}
|
||||
{b.insuranceMovements > 0 && (
|
||||
<span className="badge badge-seguros">
|
||||
<span className="dot" /> Seguros
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="cust-sub">
|
||||
{location && <span>{location}</span>}
|
||||
{location && <span className="sep">·</span>}
|
||||
<span>
|
||||
{formatNumber(b.movements)}{" "}
|
||||
{b.movements === 1 ? "movimiento" : "movimientos"}
|
||||
</span>
|
||||
<span className="sep">·</span>
|
||||
<span>último {formatDate(b.lastMovement)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bal-side">
|
||||
<div className={`bal-amount ${tone}`}>
|
||||
{formatMoney(selected.balance, selected.currency)}
|
||||
</div>
|
||||
<div className={`bal-phrase ${tone}`}>
|
||||
{balancePhrase(selected.balance)} · {selected.currency}
|
||||
</div>
|
||||
{other && Math.abs(Number(other.balance)) >= 0.005 && (
|
||||
<div className="bal-other">
|
||||
{formatMoney(other.balance, other.currency)} en {other.currency}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
function MovementRow({ m }: { m: MovementListItem }) {
|
||||
return (
|
||||
<tr>
|
||||
<td className="mono" style={{ whiteSpace: "nowrap" }}>
|
||||
{formatDate(m.transactionDate)}
|
||||
</td>
|
||||
<td>
|
||||
<Link href={`/estado-cuenta/${m.customerId}`} className="inline-link">
|
||||
<span
|
||||
className={
|
||||
m.customerName === SIN_NOMBRE ? "cust-name-missing" : undefined
|
||||
}
|
||||
>
|
||||
{m.customerName}
|
||||
</span>
|
||||
</Link>
|
||||
</td>
|
||||
<td className="tx-domain-cell">
|
||||
<span className={`tx-dot ${m.domain}`} />
|
||||
{domainLabel(m.domain)}
|
||||
</td>
|
||||
<td>
|
||||
{txTypeLabel(m.type)}
|
||||
{m.message && <div className="tx-concept">{m.message}</div>}
|
||||
</td>
|
||||
<td className="tx-ref">
|
||||
{m.reference || m.checkNumber || "—"}
|
||||
<div className="tx-concept">{ledgerSourceLabel(m.source)}</div>
|
||||
</td>
|
||||
<td className="num">
|
||||
<span className={`tx-amount ${m.direction === "charge" ? "neg" : "pos"}`}>
|
||||
{formatMoney(m.amount, m.currency)}
|
||||
</span>
|
||||
<span className="tx-cur">
|
||||
{m.currency} · {directionLabel(m.direction)}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
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, view }: { query: string; view: View }) {
|
||||
return (
|
||||
<div className="state-box">
|
||||
<div className="state-glyph" aria-hidden>
|
||||
⌕
|
||||
</div>
|
||||
<h3>Sin resultados</h3>
|
||||
<p>
|
||||
{query
|
||||
? `No encontramos ${
|
||||
view === "saldos" ? "clientes" : "movimientos"
|
||||
} para “${query}”.`
|
||||
: `No hay ${
|
||||
view === "saldos" ? "saldos" : "movimientos"
|
||||
} que coincidan con los filtros.`}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user