// Shared UI primitives — donut chart, transaction row, account card, etc. const { useState: finUseState, useMemo: finUseMemo, useEffect: finUseEffect, useRef: finUseRef } = React; // ───────────────────────────────────────────────────────────── // Donut Chart (SVG) — month spending by category // ───────────────────────────────────────────────────────────── function DonutChart({ data, size = 220, thickness = 22, total, label = "Gastado", caption }) { const Icon = window.FinanzasIcon; const sum = data.reduce((s, d) => s + d.total, 0) || 1; const r = (size - thickness) / 2; const c = 2 * Math.PI * r; const cx = size / 2, cy = size / 2; let offset = 0; const segments = data.map((d) => { const frac = d.total / sum; const len = frac * c; const seg = ( ); offset += len; return seg; }); return (
{/* Background track */} {segments}
{label}
{window.fmtMXN(total).replace("$", "$ ")}
{caption ? (
{caption}
) : null}
); } // Mini sparkline (for daily-spend trend on mobile) function Sparkline({ values, width = 260, height = 56, color = "var(--bx-navy-700)" }) { if (!values || !values.length) return null; const max = Math.max(...values, 1); const step = width / (values.length - 1 || 1); const pts = values.map((v, i) => [i * step, height - (v / max) * (height - 6) - 3]); const d = pts.map(([x, y], i) => `${i === 0 ? "M" : "L"}${x.toFixed(1)} ${y.toFixed(1)}`).join(" "); const area = `${d} L${width} ${height} L0 ${height} Z`; return ( {pts.length > 0 && ( )} ); } // Category icon disk (colored circle with white icon) function CatBadge({ catId, size = 40, soft = true }) { const Icon = window.FinanzasIcon; const cat = window.catBy(catId); if (!cat) return null; return (
); } // Single transaction row (used desktop + mobile) function TxRow({ tx, onEdit, dense = false, showDay = false, last = false }) { const cat = window.catBy(tx.cat); const acc = window.accBy(tx.acc); const isIncome = tx.amount > 0; return (
onEdit?.(tx)}>
{tx.desc}
{cat.label} {acc.name} {tx.tags?.includes("recurring") && ( <> Recurrente )}
{!dense && (
{window.relTime(tx.date)}
)}
{window.fmtMXN(tx.amount, { sign: true })}
); } // Account card — used in account strip function AccountCard({ acc, compact = false, active = false, onClick }) { const Icon = window.FinanzasIcon; const iconName = acc.type === "Crédito" ? "card" : acc.type === "Cash" ? "wallet" : acc.type === "Inversión" ? "piggy" : "bank"; const negative = acc.balance < 0; return ( ); } // Budget row with progress bar function BudgetRow({ b }) { const cat = window.catBy(b.cat); const pct = Math.min(1, b.spent / b.limit); const over = pct >= 0.9; return (
{cat.label}
{window.fmtMXN(b.spent)} / {window.fmtMXN(b.limit)}
); } // Legend item under donut function LegendItem({ d, total }) { const pct = ((d.total / total) * 100).toFixed(0); return (
{d.label}
{pct}% {window.fmtMXN(d.total)}
); } // Status bar for iOS frame function IOSStatusBar({ dark = false }) { const fg = dark ? "#fff" : "var(--bx-ink-1)"; return (
9:41
{/* Signal */} {/* Wifi */} {/* Battery */}
); } Object.assign(window, { DonutChart, Sparkline, CatBadge, TxRow, AccountCard, BudgetRow, LegendItem, IOSStatusBar, });