Admin dashboard

The back office in apps/admin — what staff can manage, how the sidebar is organised, and how sign-in and API calls work.

The Admin dashboard is where the store is run. Staff manage the catalog, process and print orders, approve vendors and reviews, plan purchases, pay salaries, send notifications and edit storefront content: banners, menus, blog posts and CMS pages. It is a Vite + React single-page app in apps/admin, served on port 5173.

At a glance

Who uses it

admin, employee (with an employee_role) and the read-only preview role. user and vendor accounts are blocked.

Built with

React 19, Vite 8, React Router 8, Tailwind CSS v4, Zustand, axios, Recharts. See Tech stack.

Size

99 routes rendering 90 lazy-loaded pages; 87 sidebar items in 16 groups.

Router

All routes are declared in apps/admin/src/App.tsx.

The sidebar opens with a Dashboard link, followed by 16 groups. It can be “standard” or “accordion”, a setting in the header’s settings drawer.

Group	Items	What’s inside
Premium Apps	4	Chat, events calendar, Kanban board, file manager
Product Management	10	Product dashboard, products, types, bases, categories, brands, sizes, colours, badges, page banners
Order & Sales	5	Order dashboard, orders, abandoned carts, invoices, quality control
Payment Gateways	6	Payment methods, gateways, manual payments, offline/online orders, POS
User Management	7	Users dashboard, all users, admins, subscriptions, addresses, employees, salaries
Store Management (Client)	7	Previews of storefront screens: home, search, product, cart, checkout, payment, order placed
Notifications Setup	4	Dashboard, global inbox, send notification, campaign history
About, Careers & Contact	5	About page, team, testimonials, careers, contact settings
Vendor Management	3	Vendor requests, vendor products, vendor config
Purchase	5	Dashboard, create purchase, approved, purchased, suppliers
Marketing	4	Banners, ads banners, coupons, appearance menus
Blog	4	Posts, authors, categories, tags
System Config	6	Social media, website config, website icons, shipping zones, component types, home pages
API Config	2	System metrics (request log), endpoint tester
My Profile	4	Profile, account overview, security, notifications
Utility Pages	10	Pricing, FAQ, maintenance, error and auth page previews, UI components

apps/admin/src/components/dashboard/Sidebar.tsx

What staff can do

Dashboard

Eight summary widgets: Total Sales, Total Orders, Total Customers, Shipping Delays, Refund Requests, Stock Products, Abandoned Carts and Payment Failures. Below them sit an order-status pie chart, a revenue bar chart, recent orders and a low-stock list. The data comes from GET/api/stats.

Catalog

Create, edit and delete products with brands, categories, colours, sizes, types, product bases and vendor. Products from vendors wait for approval (PUT/api/products/:id/approve).

Bulk upload reads an .xlsx, .xls or .csv file and checks that every category and brand name exists before it sends anything. A downloadable template is included. The upload goes to POST/api/products/bulk. Categories have their own bulk upload (POST/api/categories/bulk).

apps/admin/src/components/products/BulkUploadModal.tsx

Orders and invoices

The orders page shows different tabs for each role. Each employee sees the orders waiting on them and can pick only the statuses their step allows. From here staff edit orders, change their status, mark them packed, assign a deliveryman and delete orders one at a time or in bulk. The order lifecycle is explained on How it works. The role rules are on Auth and roles.

Invoices can be printed from the browser, either with react-to-print or from an escaped HTML print window.

apps/admin/src/pages/dashboard/InvoicePage.tsx

People

Users, customers, admins: one users screen with role and employee-role filters.
Employees and salaries: create salary records, then mark them paid (PATCH/api/salaries/:id/pay).
Vendors: approve or reject requests, approve or edit vendor products, and set the global vendor config. manage_vendors is admin-only.

Purchasing

1Requisition
2Approved
3Purchased
4Received

Purchase status, changed with PUT /api/purchases/:id/status

Suppliers are managed in the same group.

Content and site

Banners, ads banners, page banners, menus (admin only), website icons, social links, website config sections with drag-to-reorder, and the four blog areas. CMS pages built here are served by the storefront’s /[...slug] route.

Notifications

Send a notification to everyone, to specific users or to a role (POST/api/notifications/admin/bulk-send), then review past campaigns in Campaign History.

Open http://localhost:5173/login and sign in with email and password. This sends POST/api/auth/login. You can also use Continue with Google or Continue with GitHub, which sign in through Firebase and then call POST/api/auth/oauth.
The token and user are saved in localStorage under auth-storage (apps/admin/src/store/useAuthStore.ts).
DashboardLayout lets in admin, employee and preview accounts. Others see a block screen.

The Master Admin and Seller Admin demo buttons on the sign-in page both fill in the same read-only preview account. A preview user can browse every screen, but any create, update or delete is cancelled with a toast.

API client

apps/admin/src/lib/config.ts creates one axios instance (adminApi). Its base URL is ${VITE_NEXT_PUBLIC_API_URL}/api, it has a 30 s timeout, and it sends credentials.

Request interceptor: adds Authorization: Bearer <token> and blocks POST, PUT, PATCH and DELETE for the preview role.
Response interceptor: logs each request for System Metrics. On a 401 it clears the session and redirects to /login.

Auth and rolesRoles, employee sub-roles and read-only mode.

How it worksThe order lifecycle staff move orders through.

API endpointsEvery endpoint behind these screens.

DeploymentShipping the admin to Vercel.