7415b40240
From the 2026-07-14 UI/UX audit (17/40). Four phases: P1 — Settings route crashed on Agents→Edit (Input/Textarea used but never imported). Added imports + a shared route-level error boundary (components/route-error.tsx) re-exported from all shell routes, so one crashing panel degrades to an explained card with the nav intact instead of replacing the whole app with a stack trace. Corrected the stale CLAUDE.md claim that `npm run typecheck` crashes — it works, and would have caught the missing import. P2 — Error/empty/feedback foundations. Fixed useSession identity churn that fired ~3x duplicate fetches per screen and self-inflicted 429s (referentially stable snapshot). New lib/errors.ts (describeError → plain-language + the fix) and components/data-state.tsx (DataState renders exactly one of error/loading/empty/content, so a failed load never shows as "empty"; DialogError for in-dialog failures; 429 auto-retry). Rolled across all 15 list routes; every mutation now toasts. Surfaced+fixed two silent-failure bugs (sso + buckets-CORS swallowed load errors; the latter could wipe rules on save). P3 — Nav IA + trust cleanup. Default-expanded rail; regrouped into 7 coherent sections; collapsed the Apps/Plan/Entitlements stub triplication into one honest /billing page; deleted fabricated seeded notifications and the dead Help menu item; fixed the 403 copy (referenced a tenant switcher that doesn't exist); removed orphan /assistant + /library routes; gated dev-seed login hints behind DEV; renamed /activity → /audit-log with a redirect. P4 — Tenant detail page (routes/tenants.$id.tsx + components/tenant-detail/*), closing the provision→configure gap. 8 tabs (Overview, Plan & quotas, Branding, Localization, Email & SMS, Feature flags, IP rules, Inbound webhooks), each verified saving to the real backend. Row name links to detail. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
// Billing — one honest home for the three surfaces that were previously three
|
|
// separate "Coming soon" nav items (Plan, Entitlements, Apps). None of them
|
|
// has a live endpoint yet, so none earns its own nav weight; they collapse to
|
|
// this single page until Phase 5 wires them. When Plan and Entitlements go
|
|
// live they become their own items under the Billing group and this becomes
|
|
// the group overview.
|
|
|
|
import { CreditCard, Gauge, LayoutGrid } from "lucide-react"
|
|
|
|
import { AppShell } from "~/components/layout/app-shell"
|
|
import { PageHeader } from "~/components/layout/page-header"
|
|
import { pageTitle } from "~/lib/page-meta"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "~/components/ui/card"
|
|
|
|
export const meta = () => pageTitle("Billing")
|
|
|
|
const upcoming = [
|
|
{
|
|
icon: CreditCard,
|
|
title: "Plan",
|
|
description:
|
|
"The tenant's subscription, renewal date, payment method, and invoice history.",
|
|
},
|
|
{
|
|
icon: Gauge,
|
|
title: "Entitlements",
|
|
description:
|
|
"Metered allowances — included units and usage to date per meter (AI tokens, storage, and so on).",
|
|
},
|
|
{
|
|
icon: LayoutGrid,
|
|
title: "Apps",
|
|
description:
|
|
"Apps this tenant publishes, and the users who've granted them access to their personal clouds.",
|
|
},
|
|
]
|
|
|
|
export default function BillingRoute() {
|
|
return (
|
|
<AppShell>
|
|
<PageHeader
|
|
title="Billing"
|
|
description="Subscription, metered usage, and published apps for this tenant."
|
|
/>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Not yet available on this deployment</CardTitle>
|
|
<CardDescription>
|
|
Billing isn't wired to a payment provider here. These are the
|
|
surfaces that will land under Billing — each becomes its own screen
|
|
once its endpoint exists.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ul className="flex flex-col divide-y">
|
|
{upcoming.map(({ icon: Icon, title, description }) => (
|
|
<li key={title} className="flex items-start gap-3 py-3 first:pt-0 last:pb-0">
|
|
<div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
|
|
<Icon className="size-4" />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="font-medium">{title}</p>
|
|
<p className="text-sm text-muted-foreground">{description}</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
</AppShell>
|
|
)
|
|
}
|
|
|
|
export { RouteErrorBoundary as ErrorBoundary } from "~/components/route-error"
|