Story 2252 - pramaan-admin

Firm Billing tab now uses the design reorg

This walkthrough covers the frontend-only Billing tab reorganization for pramaan-spec#2252. Backend contracts, generated files, and the Project board were not changed.

What Changed

Restyled shared DefinitionPanel chrome because billing and provisioning are its only production consumers.
Kept case "billing" as full-width stacked Subscription, Provisioning, and Danger zone sections.
Kept the Danger zone full-width below Provisioning and converted its body from a button strip into title, description, and action rows.
Preserved the existing edit provisioning, lifecycle pending buttons, and revoke-all-grants AlertDialog/form flow.
Added focused Storybook coverage for provisioning without Edit and archived read-only danger state.

Billing Tab Before and After

Before: B5 baseline with three stacked full-width panels.

Before screenshot of the stacked Billing tab

After: subscription, provisioning, and danger zone remain stacked; danger actions render as rows.

After screenshot of the reorganized Billing tab

Unchanged Tab Sanity Check

The implementation only changed the Billing case composition and the shared definition panel consumed by Billing and Provisioning. These Storybook captures confirm the other tab cases still render through their existing paths.

Overview tab

Members tab

Support access tab

Token Notes

The local design reference used exact danger-zone tints that do not have a one-to-one component token for the red border shade. The implementation maps the design to existing tokens only: bg-semantic-red-bg, border-surface-table-border, rounded-[var(--radius-table)], and text-brand-primary.

Verification

pnpm exec tsc --noEmit
pnpm run lint
pnpm run test
pnpm run test:storybook
Storybook iframe check confirmed stacked full-width billing cards, the full-width danger zone below them, and no AI credits text.