Management Software
A React + TypeScript admin dashboard for managing an ecommerce store — orders, sales analytics, customers and products, backed by Supabase.
Built as a portfolio project to practice frontend architecture, state management, and data visualization with a modern React stack.
Live demo: management-software-three.vercel.app — click Try the demo on the login page to explore it with sample data.
Features
Authentication
- Login with Supabase Auth for two roles stored in
app_metadata: admin (full access) and demo (read-only); any other account is signed out
- Row Level Security policies restrict what each role can read and write
Public demo
- One-click demo login with a dedicated account that owns ~150 sample orders, so visitors never see real customers' orders
- Editing controls are disabled in demo mode, and a badge in the header says so
- The demo password is public by design, so protection lives in the database: the demo role can't edit data, place orders, or change its own password or email (restrictive RLS policies and a trigger on
auth.users)
Dashboard
- KPI cards (revenue, orders, average order value, active customers) computed live from order data over a rolling 30-day window, with sparkline trends
- Sales performance bar chart (rolling 12 months) and category breakdown donut chart
- Recent orders widget
Orders
- Full order list with status badges and formatted currency
- Filter by status, search by customer/email, and filter by date range
- Order detail side panel with line items and totals
- Order status updates with TanStack Query mutations, cache invalidation and saving/offline/error feedback
Customers
- Customer list aggregated from order history (orders count, total spent, last order)
- Search and sort, with a "Returning" vs "New" segment badge
- Order history detail panel per customer
Products
- Product catalog with image thumbnails and an availability toggle
- Create products with image upload to Supabase Storage
- Delete products with a confirmation dialog (the Storage image is removed too)
Responsive layout
- Sidebar navigation on desktop, bottom tab bar on mobile
Tech stack
Getting started
npm install
cp .env.example .env.local # then fill in your Supabase URL, publishable key and demo credentials
npm run dev
The app runs at http://localhost:5173. The Try the demo button only appears when VITE_DEMO_EMAIL and VITE_DEMO_PASSWORD are set.
Dashboard metrics and customer summaries are derived from the orders at runtime rather than pre-computed, so they stay consistent with the current date and with each other.
Testing
The functions that turn orders into dashboard data are pure and live in src/utils, separate from data fetching, so they can be unit-tested without mocking Supabase.
npm run test # watch mode
npm run test:run # single run
Tests sit next to the code they cover (*.test.ts), and src/test/factories.ts builds test orders with sensible defaults so each test only sets the fields it cares about.
Backend
The dashboard uses the same Supabase project as the companion Terre d'Oliva storefront, so both apps share one database: orders placed in the store show up here. The database schema lives in the storefront repository, as the single source of truth (see supabase/README.md).
Roadmap
Project structure
src/
├── components/
│ ├── dashboard/ # Dashboard-specific widgets
│ ├── orders/ # Orders domain components (table, filters, row detail)
│ ├── products/ # Products table and new product sheet
│ ├── shared/ # Components shared across domains
│ ├── layout/ # Sidebar, mobile navbar, header
│ └── ui/ # shadcn/ui primitives
├── hooks/ # Custom hooks (auth)
├── lib/ # Supabase client and helpers
├── pages/ # Route-level pages
├── services/ # Data-fetching layer (Supabase queries)
├── test/ # Test helpers (data factories)
├── types/ # Shared TypeScript types
└── utils/ # Formatting, status helpers and derived-data builders (unit-tested)
