The admin dashboard
What the back office does: products, categories, orders, customers, the homepage, staff, roles and permissions, settings and notifications.
For the Full Stack package
Pages
Every page exists in English under /en and in Arabic under /ar. The dashboard opens at /en/dashboard, after the sign-in at /en/auth/login.
| Sidebar item | Path | What it does |
|---|---|---|
| Overview | /en/dashboard | The shop at a glance, with the latest orders. The revenue, sales, goal, visitors, conversion and map cards show sample figures until you wire them to your own data. |
| AI Assistant | /en/dashboard/ai-assistant | A chat that answers questions about the shop and acts on it within the admin's permissions. |
| Products | /en/dashboard/products/all | The product list, the product form with the AI studio, and the deleted products. |
| Categories | /en/dashboard/categories/all | The category list and the deleted categories. |
| Orders | /en/dashboard/orders | Every order, and each order's detail page. |
| Users | /en/dashboard/users/all | The shop's customers, and the deleted ones. |
| Home Page | /en/dashboard/homepage | What the storefront's home page shows, section by section. |
| Admin Management | /en/dashboard/admins-management | Staff accounts. |
| Admin Roles | /en/dashboard/admins-roles | Roles and their permissions. |
| Settings | /en/dashboard/settings | The signed-in admin's profile and password, and the app settings. |
The bell in the top bar holds the notifications, and the "Go to storefront" link opens NEXT_PUBLIC_STOREFRONT_URL. The dashboard is never indexed by search engines: every page carries a noindex tag and robots.txt disallows every path.
What each admin can do
- The API checks a permission on every admin route, so an admin can only read and change what their roles allow, whatever the screen shows.
- The dashboard hides or disables each button its admin may not use, such as Add Product without
products.create, and the AI Assistant page shows "No Access" withoutai_chat.use. - Every item stays in the sidebar for every admin. A page the admin cannot read shows its empty or error state.
- Permission changes reach a signed-in admin straight away, without signing out.
Products
| Part of the form | Fields |
|---|---|
| Details | Name and short and long descriptions in English and Arabic (the English name is required), slug, SKU (required), category (required) |
| Price and stock | Price (required), compare-at price, cost price, stock quantity |
| Media | Up to 12 images and videos (MP4, WebM, MOV), in any order, one of them primary, each with alt text |
| Variants | Option type and value (such as Size and M, or Colour with its hex code), SKU, price adjustment, stock, active. Variant SKUs are unique. |
| Flags and tags | Active, featured, best seller, and free tags |
- A product with a compare-at price above its price counts as on sale in the storefront's filters.
- The form saves a draft by itself while you type. Open the product again and the dashboard offers the draft back; saving the product removes it.
- Deleting moves a product to Deleted, where it can be restored. Restoring needs the
products.restorepermission. - Featured and best-seller products can also be set from their own pages,
/en/dashboard/products/featuredand/en/dashboard/products/best-sellers, which the sidebar does not link.
Categories
A category has a name and description in English and Arabic, an image, a slug, a sort order and an active switch. Deleting moves it to Deleted, where it can be restored with the categories.restore permission.
The API stores a parent for each category and the list filters by it, but the form sets no parent: the shipped categories are one flat level.
Orders
The list searches and filters by order status and payment status, newest first. An order's page shows its items, totals, customer, addresses, note, timeline and tracking number, and downloads as a CSV file.
| Status | Meaning |
|---|---|
pending | Placed. A card order stays here until Stripe confirms the payment. |
confirmed | Paid by card, or placed with cash on delivery. |
processing | Being prepared. |
shipped | On its way. Add the tracking number the customer will see. |
delivered | Received. The order is closed. |
cancelled | Stopped. The order is closed. |
The order page moves an order one step forward at a time, or cancels it before it is closed. The payment status (unpaid, paid, failed, refunded) is set by the payment, not by hand. Changing an order needs orders.edit.
Customers
- The Users list searches and filters customers by name, email, phone, country, username, whether their email is verified, and dates.
- An admin can create a customer, change their password, mark their email verified or unverified, and delete or restore them.
- Customers edit their own details from their account on the storefront; the dashboard has no form to edit them.
The storefront's home page
Home Page picks the products and texts each section of the storefront's home page shows. Editing a section needs products.edit.
| Section | Items | On the storefront |
|---|---|---|
| Categories | Order only | The categories row, in the order set here |
| Style pillars | Up to 3 | Three style highlights |
| Editorial split | Up to 2 | A two-panel editorial block |
| New drops | Up to 6 | New arrivals; empty, it shows the newest products |
| Best sellers | Up to 8 | The best-seller row |
| Spotlight | Up to 6 | The spotlight gallery |
| Editorial slider | Up to 5 | The closing slider |
The Lux difference editor has no section on the shipped storefront home page, so what you set there does not show.
Staff, roles and permissions
- Admin Management lists the staff and creates, edits and deletes them. Assign roles sets which roles an admin holds.
- Admin Roles creates, renames and deletes roles. View permissions opens a grid of checkboxes, grouped by module, to grant each permission.
- Permissions are named
<module>.<action>, such asproducts.editororders.view, and an admin holds every permission of every role they have. - The Settings profile tab saves through
admins.edit, so a read-only admin cannot change their own details. The security tab, for a password change, needs no permission.
| Seeded role | Grants |
|---|---|
| Super Admin | Every permission |
| Viewer | Every permission ending in .view, which leaves out the AI assistant |
| Admin, Manager, Editor | Nothing yet: tick their permissions in Admin Roles before giving them to staff |
The seed signs the Super Admin in as admin@example.com and gives the eleven other staff accounts the Viewer role.
Settings
Settings has three tabs: Profile, Security and App settings. App settings is a table of key and value pairs, grouped by category, that an admin with settings.edit can change or delete.
| Category | Seeded keys |
|---|---|
| payment | stripe_fees_percentage, stripe_fixed_fee, platform_commission_percentage |
| withdrawal | minimum_withdrawal_amount, maximum_withdrawal_amount, withdrawal_processing_days |
support_email, notification_email | |
| general | site_name, site_tagline, maintenance_mode |
| features | referral_program_enabled, referral_bonus_percentage |
These are stored values for your own code to read. Nothing in the shipped storefront or API reads them yet, so changing one, maintenance_mode included, changes no behaviour on its own.
Notifications
- A new order notifies every admin who can view orders, and a finished or failed AI studio generation notifies the admin who started it.
- They arrive live, with a short message on screen, and stay in the bell's list until marked read or removed.
- The live connection uses
NEXT_PUBLIC_WEBSOCKET_BASE_URL, the API's address without/api, and the API accepts it only fromFRONTEND_URL. On your own domains, set both. - On the sample store there is no live connection.
The AI assistant and the AI studio
- AI Assistant is its own page in the sidebar. Without a Gemini key on the API it says "No AI model is connected".
- The AI studio is the product form itself, opened from Add Product or a product's row. It has two modes, Assistant and Animate, and a "Remove background" button. Its fields work and save without any key; until its keys are set it says "Listing writer not connected" or "AI studio not connected".
The sample store
Without NEXT_PUBLIC_API_BASE_URL, the dashboard answers every request from a sample store in the browser and shows a "Sample data" notice, which can be dismissed until the next reload.
- The sign-in form is prefilled with
admin@example.comandAdmin@123. Any valid email with a password of at least 6 characters signs in as the Super Admin. - Writes are real: creating a product, editing a category, moving an order and granting a permission are kept in the browser and survive a reload.
- The AI assistant and the AI studio's tools are unavailable, and there are no live notifications.
yarn remove:mockdeletes the sample store once your API is connected, and keepspublic/mock-media/.
Demo mode
Included with your purchase. Sign in to read, or open it in your download.
Running a public demo: per-visitor accounts, what visitors can change, and bring-your-own-key.
How the dashboard's code fits together
Included with your purchase. Sign in to read, or open it in your download.
The code's structure, and the recipes for adding a page, a translation and an API service.