CostEstimateCard

1"use client";
2 
3import type { ComponentProps, ReactNode } from "react";
4 
5import { Skeleton } from "@/components/ui/skeleton";
6import { cn } from "@/lib/utils";
7 
8export interface CostLine {
9  /** Stable id, e.g. "compute_unit_seconds". */
10  id: string;
11  /** Line label, e.g. "Compute". */
12  label: string;
13  /** Billable amount after allowances, in `unit`. */
14  quantity: number;
15  /** Total consumed before the allowance, in `unit`. */
16  used?: number;
17  /** Billing unit, e.g. "CU-hr" or "GB-mo". */
18  unit: string;
19  /** USD per unit. */
20  rate: number;
21  /** quantity x rate, in USD. */
22  cost: number;
23  /** Amount the plan covered, shown as a quiet "N included" note. */
24  included?: number;
25}
26 
27export type CostEstimateCardProps = Omit<
28  ComponentProps<"section">,
29  "children"
30> & {
31  /** Line items in display order. */
32  lines: CostLine[];
33  /** Overrides the summed total, e.g. when the invoice already exists. */
34  total?: number;
35  /**
36   * "cost" ranks the biggest line first, which is what the reader came
37   * for. "given" keeps the order you passed, e.g. to match an invoice.
38   */
39  order?: "cost" | "given";
40  /**
41   * Roll lines costing nothing into one muted summary row. They still
42   * appear, because "we checked and it was zero" is worth saying, but
43   * they stop competing with the lines that cost money.
44   */
45  collapseZero?: boolean;
46  /** Plan name shown beside the total, e.g. "scale". */
47  plan?: string;
48  /** Billing period readout, e.g. "Feb 1 – Feb 14". */
49  period?: string;
50  /**
51   * Spending limit in USD. Draws a progress meter and, once the estimate
52   * passes it, says so rather than letting the number pass unremarked.
53   */
54  spendingLimit?: number;
55  /** Right-side header slot, e.g. a plan switch or DateRangePicker. */
56  action?: ReactNode;
57  /** Footer content, e.g. a link to the invoice. */
58  footer?: ReactNode;
59  /**
60   * Says the estimate is a projection, not a bill. Defaults to a plain
61   * note; pass null to drop it when you're rendering a settled invoice.
62   */
63  note?: ReactNode;
64  isLoading?: boolean;
65  error?: string | null;
66};
67 
68/* ─────────────────────────────────────────────────────────
69 * COST STORYBOARD
70 *
71 *  rest      the number first, then how it was reached:
72 *            quantity x rate per line. A cost with no
73 *            arithmetic behind it is a number to distrust
74// … truncated