feat(frontend): wire Vite app to FastAPI parser with NDJSON streaming + Upload page

2026-06-19 17:31:59 -06:00
parent 999889ecb3
commit 3d3bdfb07c
44 changed files with 7811 additions and 0 deletions
@@ -0,0 +1,106 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { RemitStatusBadge } from "@/components/StatusBadge";
+import { useAppStore } from "@/store";
+import { fmt } from "@/lib/format";
+
+export function Remittances() {
+  const remits = useAppStore((s) => s.remittances);
+
+  const total = remits.reduce(
+    (acc, r) => ({
+      paid: acc.paid + r.paidAmount,
+      adjustments: acc.adjustments + r.adjustmentAmount,
+    }),
+    { paid: 0, adjustments: 0 }
+  );
+
+  return (
+    <div className="space-y-8 animate-fade-in">
+      <header>
+        <div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground mb-2 flex items-center gap-2">
+          <span className="inline-block h-px w-6 bg-border" />
+          Remittances
+        </div>
+        <h1 className="text-[22px] font-semibold tracking-tight">835 remittances</h1>
+        <p className="text-muted-foreground mt-1.5 text-[14px]">
+          Electronic remittance advice from payers, matched to submitted claims.
+        </p>
+      </header>
+
+      <div className="grid gap-4 grid-cols-2 lg:grid-cols-3">
+        <div className="surface rounded-xl p-5">
+          <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+            Remits
+          </div>
+          <div className="display text-[28px] leading-none mt-3">{fmt.num(remits.length)}</div>
+        </div>
+        <div className="surface rounded-xl p-5">
+          <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+            Total paid
+          </div>
+          <div className="display text-[28px] leading-none mt-3">{fmt.usd(total.paid)}</div>
+        </div>
+        <div className="surface rounded-xl p-5">
+          <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+            Adjustments
+          </div>
+          <div className="display text-[28px] leading-none mt-3">{fmt.usd(total.adjustments)}</div>
+        </div>
+      </div>
+
+      <div className="surface rounded-xl overflow-hidden">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Remit</TableHead>
+              <TableHead>Claim</TableHead>
+              <TableHead>Payer</TableHead>
+              <TableHead className="text-right">Paid</TableHead>
+              <TableHead className="text-right">Adjustment</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Received</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {remits.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={7} className="text-center py-12 text-muted-foreground">
+                  No remittances yet.
+                </TableCell>
+              </TableRow>
+            ) : (
+              remits.map((r) => (
+                <TableRow key={r.id}>
+                  <TableCell className="display num text-[13px]">{r.id}</TableCell>
+                  <TableCell className="display num text-[13px] text-muted-foreground">
+                    {r.claimId}
+                  </TableCell>
+                  <TableCell>{r.payerName}</TableCell>
+                  <TableCell className="text-right display num">
+                    {fmt.usdPrecise(r.paidAmount)}
+                  </TableCell>
+                  <TableCell className="text-right display num text-muted-foreground">
+                    {fmt.usdPrecise(r.adjustmentAmount)}
+                  </TableCell>
+                  <TableCell>
+                    <RemitStatusBadge status={r.status} />
+                  </TableCell>
+                  <TableCell className="text-muted-foreground num text-[13px]">
+                    {fmt.dateShort(r.receivedDate)}
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}