import { Callout } from "~/ui/Callout";
import { InlineSelect } from "~/ui/Field";
import { useState } from "react";
import { useNavigate } from "@tanstack/react-router";
import type { getBilling } from "~/fns/billing";
import { formatQuantity, meterDef } from "~/lib/meters";
import type { MeterDef } from "~/lib/meters";
import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { TextLink } from "~/ui/TextLink";
import { Heading } from "~/ui/Heading";
import { ProgressTrack, quotaTone } from "~/ui/ProgressTrack";
import { StripePanels } from "./StripePanels";
import { useFeatureFlag } from "~/hooks/use-feature-flag";
import { UsageChart } from "./UsageChart";
import { SpendingLimit } from "./SpendingLimit";
import { RatesPanel } from "./RatesPanel";
import { InfoTip } from "./InfoTip";
import { ComputeRatesNote } from "./ComputeRatesNote";
import { AiEndpointForm } from "~/components/ai/AiEndpointForm";
type Billing = Awaited<ReturnType<typeof getBilling>>;
type Meter = Billing["summary"]["meters"][number];
const CATEGORIES = ["compute", "storage", "network", "ai", "ops"] as const;
const CATEGORY_LABELS: Record<string, string> = {
compute: "Compute",
storage: "Storage",
network: "Network",
ai: "AI",
ops: "Operations",
};
function unitOf(meter: string): MeterDef["unit"] {
return meterDef(meter)?.unit ?? "count";
}
function dollars(cents: number): string {