Admin Dashboard
Overview of the Hanzo Commerce Admin Dashboard for managing your store
The Hanzo Commerce Admin Dashboard is a modern, full-featured administration interface for managing every aspect of your online store. Built with React, Vite, TanStack Query, and Tailwind CSS, it provides a fast, responsive experience for store operators.
Features
Product Management
Create and manage products, variants, collections, and inventory
Order Processing
View, fulfill, and manage orders through their complete lifecycle
Customer Management
Browse customer profiles, groups, and order history
Store Settings
Configure regions, taxes, shipping, payments, and team access
Architecture
The admin dashboard is a single-page application that communicates with the Hanzo Commerce API through @hanzo/sdk:
admin/
├── src/
│ ├── components/ # Shared UI components (Tailwind + Radix)
│ ├── features/ # Feature modules (products, orders, etc.)
│ ├── hooks/ # TanStack Query hooks for API calls
│ ├── layouts/ # Page layouts and navigation shell
│ ├── pages/ # Route-level page components
│ └── lib/ # SDK client, utilities, formatters
├── public/ # Static assets
├── index.html
└── vite.config.tsTech Stack
| Layer | Technology |
|---|---|
| Framework | React 18 |
| Build | Vite 5 |
| Data Fetching | TanStack Query v5 |
| Styling | Tailwind CSS 3 |
| Components | Radix UI primitives |
| Routing | React Router v6 |
| API Client | @hanzo/sdk admin module |
| Auth | hanzo.id OAuth2 / PKCE |
Dashboard Overview
When you log in, the dashboard displays a summary view with:
- Revenue metrics -- total sales, average order value, and conversion rate for the selected period
- Recent orders -- the latest orders with status indicators and quick-action buttons
- Low stock alerts -- products and variants approaching zero inventory
- Top products -- best-selling items ranked by revenue or units sold
- Customer activity -- new registrations, returning customers, and engagement trends
Getting Started
Install the SDK and initialize the admin client:
npm install @hanzo/sdkimport { HanzoSDK } from '@hanzo/sdk'
const sdk = new HanzoSDK({
baseUrl: 'https://api.hanzo.ai/v1',
apiKey: process.env.HANZO_API_KEY!,
})
// Use the admin module
const products = await sdk.admin.product.list({ limit: 20 })
const orders = await sdk.admin.order.list({ status: 'pending' })For full setup instructions including environment configuration, authentication, and deployment, see the Setup Guide.
Next Steps
How is this guide?
Last updated on