Billing Dashboard

Complete billing management template with revenue charts, customer stats, and quick actions

Preview

Billing Dashboard

View live template →

Features

Complete billing dashboard with revenue analytics
Customer statistics and growth metrics
Plan distribution visualization
Quick actions for common billing operations
Invoice management table with filtering
Subscription management integration
Usage meter displays
Pricing table component

Install Summary

This template kit includes page routes, components, and all required dependencies. Download the bundle and extract it into your project root.

Page Files

File	Path
layout.tsx	app/templates/billing/layout.tsx
page.tsx	app/templates/billing/page.tsx

Component Files

File	Path
alerts-card.tsx	components/templates/billing/alerts-card.tsx
customer-stats.tsx	components/templates/billing/customer-stats.tsx
plan-distribution.tsx	components/templates/billing/plan-distribution.tsx
quick-actions.tsx	components/templates/billing/quick-actions.tsx
revenue-chart.tsx	components/templates/billing/revenue-chart.tsx
types.ts	components/templates/billing/types.ts
index.ts	components/templates/billing/index.ts

Dependencies

Install these dependencies before using the template:

Terminal

bash

npx shadcn@latest add button tabs

Terminal

bash

npm install recharts @phosphor-icons/react

Installation

Download the complete template as a ZIP file, or copy the text bundle to your clipboard:

Page Files

The template includes the following page files:

1. layout.tsx

layout.tsx

tsx

export default function BillingTemplateLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <div className="min-h-screen bg-background">{children}</div>;
}

2. page.tsx

page.tsx

tsx

"use client";

import Link from "next/link";
import { ArrowLeft, CurrencyDollar, Users, Percent, ChartLineUp, Download, Eye } from "@phosphor-icons/react";
import { Button } from "@/components/ui/button";

Template Components

The template includes the following component files:

1. alerts-card.tsx

alerts-card.tsx

tsx

"use client";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Warning, Clock, XCircle, ArrowRight } from "@phosphor-icons/react";

2. customer-stats.tsx

customer-stats.tsx

tsx

"use client";

import { cn } from "@/lib/utils";
import { Users, UserPlus, UserMinus, Clock } from "@phosphor-icons/react";
import type { CustomerStatsProps } from "./types";

3. plan-distribution.tsx

plan-distribution.tsx

tsx

"use client";

import { cn } from "@/lib/utils";
import { ChartPie } from "@phosphor-icons/react";
import type { PlanDistributionProps } from "./types";

4. quick-actions.tsx

quick-actions.tsx

tsx

"use client";

import { cn } from "@/lib/utils";
import { CreditCard, Receipt, UserPlus, Gear, Tag } from "@phosphor-icons/react";
import type { QuickActionsProps, QuickAction } from "./types";

5. revenue-chart.tsx

revenue-chart.tsx

tsx

"use client";

import {
  Bar,
  BarChart,

6. types.ts

types.ts

tsx

import type { ReactNode } from "react";

// Alerts
export type AlertType = "warning" | "error" | "info";

7. index.ts

index.ts

tsx

"use client";

export { AlertsCard } from "./alerts-card";
export { CustomerStats } from "./customer-stats";
export { PlanDistribution } from "./plan-distribution";

Getting Started

Step 1: Extract Files

After downloading and extracting the template ZIP:

Copy page files to app/templates/billing/
Copy component files to components/templates/billing/

Step 2: Install Dependencies

Install the required shadcn/ui components:

Terminal

bash

npx shadcn@latest add button tabs

Install external packages:

Terminal

bash

npm install recharts @phosphor-icons/react

Step 3: Access Your Template

The template will be available at /templates/billing

What's Included

Revenue charts and analytics
Customer statistics dashboard
Plan distribution visualization
Quick actions for billing operations
Invoice management table with filtering
Subscription management integration
Usage meter displays
Pricing table component