Admin Dashboard

The admin dashboard provides a complete store management interface. All admin pages share a layout with AdminHeader and AdminSidebar. On mobile, the sidebar collapses into a Sheet.

Dashboard Overview

Route: /admin

The main dashboard displays:

• Stats grid — revenue, orders, customers, conversion rate cards
• Revenue chart — line chart showing revenue over time
• Recent orders table — latest orders with status badges

import { StatsGrid } from "@/components/admin/stats-grid"
import { RevenueChart } from "@/components/admin/revenue-chart"
import { DataTable } from "@/components/admin/data-table"

Products

Route: /admin/products

Data table listing all products with:

• Columns: image, name, category, price, stock, status
• Sortable columns
• Status badges (Active, Draft, Out of Stock)
• "Add Product" CTA

Add Product

Route: /admin/products/new

Product creation form with:

• Basic info (title, description, category)
• Pricing (price, compare-at price)
• Inventory (stock quantity, SKU)
• Media upload placeholder
• Variant management (size, color)

Orders

Route: /admin/orders

Data table listing all orders:

• Columns: order ID, customer, date, total, status, payment
• Status badges (Pending, Processing, Shipped, Delivered, Cancelled)
• Click to view order detail

Order Detail

Route: /admin/orders/[id]

Full order view:

• Customer info and shipping address
• Line items with product details
• Payment and shipping status
• Order notes with OrderNotes component
• Status update actions

Customers

Route: /admin/customers

Data table with customer list:

• Columns: name, email, orders count, total spent, joined date
• Click to view customer detail

Customer Detail

Route: /admin/customers/[id]

Customer profile showing:

• Contact information
• Order history
• Lifetime value stats

Analytics

Route: /admin/analytics

• Revenue and orders charts over time
• Conversion funnel visualization
• Top-selling products
• Traffic source breakdown

import { AnalyticsChart } from "@/components/admin/analytics-chart"
import { ConversionFunnel } from "@/components/admin/conversion-funnel"

Discounts

Route: /admin/discounts

Discount code management:

• List of active and expired discount codes
• DiscountForm for creating new codes
• Fields: code, type (percentage/fixed), value, minimum order, expiry date

Settings

Route: /admin/settings

Store configuration:

• Store name, description, currency
• Shipping zones
• Tax settings
• Notification preferences

Mobile Responsiveness

The admin sidebar uses useIsMobile() to detect viewport width:

• Desktop (768px+): Fixed sidebar with icon + label navigation
• Mobile (<768px): Sidebar collapses, accessible via hamburger menu in AdminHeader as a Sheet overlay