ake/paperclip
1
0
Fork 0
mirror of https://github.com/alkimake/paperclip.git synced 2026-06-18 11:40:39 +09:00
Code Issues Projects Releases Packages Wiki Activity

feat(costs): add billing, quota, and budget control plane

Browse source
This commit is contained in:
Dotta 2026-03-14 22:00:12 -05:00
parent 656b4659fc
commit 76e6cc08a6
91 changed files with 22406 additions and 769 deletions
Download patch file Download diff file Expand all files Collapse all files

44
ui/src/components/FinanceBillerCard.tsx Normal file
View file

@ -0,0 +1,44 @@
import type { FinanceByBiller } from "@paperclipai/shared";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { formatCents, providerDisplayName } from "@/lib/utils";
interface FinanceBillerCardProps {
row: FinanceByBiller;
}
export function FinanceBillerCard({ row }: FinanceBillerCardProps) {
return (
<Card>
<CardHeader className="px-4 pt-4 pb-1">
<div className="flex items-start justify-between gap-3">
<div>
<CardTitle className="text-base">{providerDisplayName(row.biller)}</CardTitle>
<CardDescription className="mt-1 text-xs">
{row.eventCount} event{row.eventCount === 1 ? "" : "s"} across {row.kindCount} kind{row.kindCount === 1 ? "" : "s"}
</CardDescription>
</div>
<div className="text-right">
<div className="text-lg font-semibold tabular-nums">{formatCents(row.netCents)}</div>
<div className="text-[11px] uppercase tracking-[0.16em] text-muted-foreground">net</div>
</div>
</div>
</CardHeader>
<CardContent className="space-y-3 px-4 pb-4 pt-3">
<div className="grid gap-2 text-sm sm:grid-cols-3">
<div className="border border-border p-3">
<div className="text-[11px] uppercase tracking-[0.14em] text-muted-foreground">debits</div>
<div className="mt-1 font-medium tabular-nums">{formatCents(row.debitCents)}</div>
</div>
<div className="border border-border p-3">
<div className="text-[11px] uppercase tracking-[0.14em] text-muted-foreground">credits</div>
<div className="mt-1 font-medium tabular-nums">{formatCents(row.creditCents)}</div>
</div>
<div className="border border-border p-3">
<div className="text-[11px] uppercase tracking-[0.14em] text-muted-foreground">estimated</div>
<div className="mt-1 font-medium tabular-nums">{formatCents(row.estimatedDebitCents)}</div>
</div>
</div>
</CardContent>
</Card>
);
}