A Billing Overview Built as One Block
Payment Admin Dashboard condenses a finance back office into a single screen: invoice stat cards with progress bars, a transaction history chart, a cash flow summary, and a filterable invoices table, all framed by a dark indigo sidebar and a compact header. A period Select in the page title row (last 30, 60, or 90 days) sets the reporting window.
It suits billing sections of SaaS products, bookkeeping tools, agency client portals, and any admin area where receivables need to be visible at a glance. Browse the wider blocks library if you want companion screens such as checkout pages or pricing tables around it.
The Indigo Sidebar Trick: Scoped CSS Variables
Instead of forking the sidebar component, this block restyles it by overriding CSS variables inline on SidebarProvider: --sidebar is set to the indigo-950 color token, with matching --sidebar-border, --sidebar-foreground, and --sidebar-accent values. The Shadcn UI sidebar picks these up automatically, producing a branded navigation rail while the content area keeps standard tokens.
This is the recommended pattern for giving one section of an app its own identity. Because the overrides are scoped to the provider, dark and light modes elsewhere remain untouched, and removing the style prop instantly returns the sidebar to your global theme.
Cash Flow Charting With Gradient Areas
The transaction history panel plots incoming versus outgoing money as a two-series AreaChart with linearGradient fills that fade to transparent. A YAxis tick formatter prints dollar values, and ChartTooltipContent renders theme-aware tooltips for both series.
Next to the chart, the cash flow summary card totals the same data and uses Progress bars to compare inflow against outflow, giving stakeholders a numeric readout that mirrors the visual one. Both read from a shared data.json, so a single fetch call powers the whole row.
Invoices, Statuses, and a Modular TanStack Table
The invoices table is split into columns, toolbar, pagination, and data-table files, following the composition style from the TanStack Table introduction. Column definitions type an Invoice record and render status Badges with distinct paid, partially paid, due, and overdue treatments that each include dark-mode variants.
The toolbar wraps a search input in the InputGroup component with a leading search icon and a clear button, plus a column visibility dropdown and a New Invoice action. Pagination controls handle page size and navigation, so the table scales from ten rows to thousands.
Unlocking the Code and Choosing a Framework
As a premium entry in the collection, this dashboard keeps its preview open while gating the source. An All Access purchase reveals the code tab and activates the copyable shadcn CLI snippet at the top of the page, which comes preformatted for npm, pnpm, yarn, and bun.
You are also free to skip React entirely: the payment dashboard has been rebuilt with Vuejs components from shadcn-vue and Svelte components from shadcn-svelte, so all three stacks receive the indigo sidebar, the cash flow charts, and the invoices table as first-class blocks.