50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T2bae,"use client"; import type { ComponentProps, ReactNode } from "react"; import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/lib/utils"; export interface CostLine { /** Stable id, e.g. "compute_unit_seconds". */ id: string; /** Line label, e.g. "Compute". */ label: string; /** Billable amount after allowances, in `unit`. */ quantity: number; /** Total consumed before the allowance, in `unit`. */ used?: number; /** Billing unit, e.g. "CU-hr" or "GB-mo". */ unit: string; /** USD per unit. */ rate: number; /** quantity x rate, in USD. */ cost: number; /** Amount the plan covered, shown as a quiet "N included" note. */ included?: number; } export type CostEstimateCardProps = Omit< ComponentProps<"section">, "children" > & { /** Line items in display order. */ lines: CostLine[]; /** Overrides the summed total, e.g. when the invoice already exists. */ total?: number; /** * "cost" ranks the biggest line first, which is what the reader came * for. "given" keeps the order you passed, e.g. to match an invoice. */ order?: "cost" | "given"; /** * Roll lines costing nothing into one muted summary row. They still * appear, because "we checked and it was zero" is worth saying, but * they stop competing with the lines that cost money. */ collapseZero?: boolean; /** Plan name shown beside the total, e.g. "scale". */ plan?: string; /** Billing period readout, e.g. "Feb 1 – Feb 14". */ period?: string; /** * Spending limit in USD. Draws a progress meter and, once the estimate * passes it, says so rather than letting the number pass unremarked. */ spendingLimit?: number; /** Right-side header slot, e.g. a plan switch or DateRangePicker. */ action?: ReactNode; /** Footer content, e.g. a link to the invoice. */ footer?: ReactNode; /** * Says the estimate is a projection, not a bill. Defaults to a plain * note; pass null to drop it when you're rendering a settled invoice. */ note?: ReactNode; isLoading?: boolean; error?: string | null; }; /* ───────────────────────────────────────────────────────── * COST STORYBOARD * * rest the number first, then how it was reached: * quantity x rate per line. A cost with no * arithmetic behind it is a number to distrust * included allowances are shown, not silently netted — * "500 GB included" explains why 620 GB bills * as 120 * limit with a spending limit set, a meter shows the * distance to it and turns to the warning tone * once crossed; a limit you can't see is a * limit you'll hit * loading the total and every line skeleton in place * note the estimate names itself an estimate — * metering lags and rounding differs, and the * invoice is the source of truth * ───────────────────────────────────────────────────────── */ const CURRENCY = new Intl.NumberFormat("en-US", { currency: "USD", style: "currency", }); const PRECISE_CURRENCY = new Intl.NumberFormat("en-US", { currency: "USD", maximumFractionDigits: 4, minimumFractionDigits: 2, style: "currency", }); const QUANTITY = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2, }); const PERCENT = new Intl.NumberFormat("en-US", { maximumFractionDigits: 1, minimumFractionDigits: 1, style: "percent", }); const LineRow = ({ line, share }: { line: CostLine; share: number }) => (

{line.label} {QUANTITY.format(line.quantity)} {line.unit} ×{" "} {PRECISE_CURRENCY.format(line.rate)} {/* One template string, not interleaved JSX text and expressions: JSX collapses the spaces around them and the line renders as "·604 used,500 included". */} {line.included ? ( {`· ${QUANTITY.format( line.used ?? line.quantity + line.included )} used, ${QUANTITY.format(line.included)} included`} ) : null} {CURRENCY.format(line.cost)} {PERCENT.format(share)}

); /** The lines that cost nothing, said once instead of a row each. */ const ZeroRow = ({ lines }: { lines: CostLine[] }) => (

{lines.length} with no usage ·{" "} {lines.map((line) => line.label).join(", ")} {CURRENCY.format(0)}

); /** * Below this share the fill is too narrow to hold its own label, so the * spent figure steps outside the fill instead of being clipped by it. */ const MIN_INSIDE_SHARE = 0.24; const FULL_METER = 100; const SpendMeter = ({ total, limit }: { total: number; limit: number }) => { const share = limit > 0 ? Math.min(total / limit, 1) : 0; const isOver = total > limit; const fitsInside = share >= MIN_INSIDE_SHARE; return ( // No progressbar role: the bar carries real text stating spent, left, // and the limit, which reads better than a percentage announcement.

{/* The figures ride the bar rather than sitting under it: the amount spent is the fill, so the number belongs where the color is. */}

{CURRENCY.format(total)} spent {isOver ? `${CURRENCY.format(total - limit)} over` : `${CURRENCY.format(limit - total)} left of ${CURRENCY.format(limit)}`}

); }; export const CostEstimateCard = ({ action, className, collapseZero = true, error = null, footer, isLoading = false, lines, order = "cost", note = "estimate · metering lags ~15m, the invoice is the source of truth", period, plan, spendingLimit, total, ...props }: CostEstimateCardProps) => { const sum = total ?? lines.reduce((carry, line) => carry + line.cost, 0); // Biggest line first: the reader came to find what is driving the bill, // and metric declaration order has nothing to do with cost. const ranked = order === "cost" ? [...lines].toSorted((a, b) => b.cost - a.cost) : lines; const charged = collapseZero ? ranked.filter((line) => line.cost > 0) : ranked; const free = collapseZero ? ranked.filter((line) => line.cost === 0) : []; const shareOf = (cost: number) => (sum > 0 ? cost / sum : 0); if (isLoading) { return (

{lines.map((line) => ( ))}

); } return (

estimated cost

{CURRENCY.format(sum)}

{/* The plan sets every rate on this card, so it reads at full strength rather than as a footnote beside the date. */}

{plan ? {plan} plan : null} {plan && period ? ( · ) : null} {period ? ( {period} ) : null}

{action}

{spendingLimit === undefined ? null : ( )} {error ? (

error {error}

) : null} {/* No total row: the figure is already the headline and the meter's left label. Three copies of one number is not emphasis. */}

))} {free.length > 0 ? : null}

{note ? (

{note}

) : null} {footer ?

{footer}

: null}

); }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@neon-ui","registryDependencies":["utils","https://ui.neon.com/r/neon-tokens.json","https://ui.neon.com/r/skeleton.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/cost-estimate-card/cost-estimate-card.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]