UI Admin

A modern, full-featured admin dashboard built as a portfolio project. Demonstrates real-world UI patterns — invoicing, customer management, billing, settings, authentication — using the latest React and Next.js ecosystem.

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router)
UI Library	React 19
Language	TypeScript
Styling	Tailwind CSS v4
Components	shadcn/ui + Base UI
Charts	Recharts
Forms	React Hook Form + Zod
Theming	next-themes
Notifications	Sonner
Date handling	date-fns + react-day-picker

Features

• Dashboard — KPI cards, revenue chart, recent activity feed
• Invoices — Full CRUD: list, create, edit, detail view; line-item editor, status badges, filters
• Customers — Customer table with row-level actions
• Billing — Plan cards, usage meters, payment method management
• Profile & Settings — User profile and app settings pages
• Authentication — Sign-in page with isolated auth layout
• Documentation — In-app docs page with collapsible code blocks
• Dark / Light mode — System-aware theme toggle
• Responsive layout — Collapsible sidebar, mobile-friendly nav
• Shared primitives — Data table, empty states, confirm dialogs, page headers, breadcrumb nav

Project Structure

src/
├── app/
│   ├── (auth)/          # Sign-in, documentation (no dashboard shell)
│   └── (dashboard)/     # Main app: dashboard, invoices, customers, billing, profile, settings
├── components/
│   ├── billing/         # PlanCard, UsageMeter, PaymentMethod
│   ├── customers/       # CustomerTable, CustomerRowActions
│   ├── dashboard/       # KpiCard, RevenueChart, RecentActivity
│   ├── invoices/        # InvoiceTable, InvoiceForm, LineItemsEditor, filters, summary
│   ├── layout/          # AppSidebar, AppHeader, NavItem, ThemeToggle, Breadcrumb, PageTransition
│   ├── shared/          # DataTable, EmptyState, ConfirmDialog, PageHeader
│   └── ui/              # shadcn/ui primitives + custom: CurrencyInput, DatePicker, Combobox
└── lib/                 # Utilities (cn, etc.)

Getting Started

Prerequisites

• Node.js 20+
• npm, yarn, pnpm, or bun

Installation

git clone https://github.com/dzulfanfadli/ui-admin.git
cd ui-admin
npm install

Development

npm run dev

Open http://localhost:3000 in your browser.

Build

npm run build
npm run start

Lint

npm run lint

Scripts

Command	Description
npm run dev	Start development server
npm run build	Production build
npm run start	Start production server
npm run lint	Run ESLint

License

MIT — see LICENSE for details.