Platform Overview
Velari is a B2B private-label cosmetics platform connecting brands (companies), salesmen (factory staff), and an internal admin team. The platform covers the full cycle: formula sampling → product creation → ordering → delivery.
| Role | Who | Main Access |
|---|---|---|
| Customer | Brand owner / company member | /dashboard |
| Salesman | Velari factory staff | /salesman |
| Admin | Platform administrators | /admin |
After login the system automatically redirects each user to their correct panel based on their role. A salesman who also has admin access sees both panels via a sidebar link.
Customer Guide
Customers are cosmetics brands that use Velari to source private-label formulas and products. A company can have multiple brands and multiple members.
Registration
New companies register at /auth/register/company.
Individual users (not company owners) register at/auth/register/user. They cannot access the company dashboard until a company owner adds them as a member.
Dashboard
The dashboard at /dashboard gives a quick summary: total brands, product counts by status (active / draft / inactive), and company overview stats.
The active brand selector in the sidebar controls which brand's data is shown across formulas, products, and orders. Switch brands by clicking the selector and choosing from the dropdown.
localStorage.Brands
Manage brands at /dashboard/brands. Only the company owner can create, rename, or delete brands.
- Create: Type a brand name and click Add.
- Rename: Click the pencil icon, edit the name, press Enter or Save.
- Delete: Click the trash icon. Brands that have active orders or products cannot be deleted.
Formulas & Sampling
Browse your brand's assigned formulas at /dashboard/formulas. Your salesman assigns formulas to each of your brands — you can only see formulas that have been assigned to the active brand.
Each formula card shows the color, name, category, and max sample quantity. Click the ⓘ button to open a detail panel with the reference code and full info.
If a formula already has a product created from it, theProduct created badge replaces the Request sample button — you cannot sample it again.
Placing a sample order
Formula Orders
View your sample orders at /dashboard/formulas/orders. Orders are filtered by the active brand.
Expand any order to see the formulas, quantities, delivery address, and notes. Click a formula name to open the formula detail modal.
Creating a product from a delivered sample
When an order status reaches Delivered, a Ready to create products button appears at the bottom of the expanded order.
Products
View your company's products at /dashboard/products. Products are filtered by the active brand. Use the status filter (All / Active / Draft / Inactive) to narrow the list.
Click any product row to open the detail page with full information: brand, category, SKU, barcode, status, linked formula, and content sections (description, ingredients, how to use).
Product Orders
Order products at /dashboard/products/orders.
View all past orders at /dashboard/products/orders/history. Each order card shows the status progress bar (Pending → Processing → Shipped → Delivered), product list with quantities, and delivery info. Click a product row to see its full details.
Team Members
Manage team members at /dashboard/members. Only the company owner can invite, remove, and configure member permissions.
- Invite: Enter the member's registered email and click Add. The user must already have a Velari account.
- Brand access: Click the brand count button next to a member to open the brand assignment panel. Check/uncheck brands and click Save. Members only see brands they have access to.
- Remove: Click the trash icon next to a non-owner member. Owners cannot be removed.
Salesman Guide
Salesmen are Velari factory staff who manage client companies, assign formula access to brands, handle products, and process orders. Access the salesman panel at /salesman.
Dashboard
The salesman dashboard shows at a glance:
- Stats row: total companies, total brands, pending product orders, pending formula orders (highlighted yellow when > 0).
- New products warning: if any company added new products in the last 7 days, an amber banner lists them with a Mark as seen button per brand.
- Needs review: unacknowledged new companies (brand dot) and new brands (purple dot). Click to go to that company.
- Pending orders: combined product + formula orders sorted by newest, with type badges.
- Recent companies: the 5 most recent assigned companies.
A Todo list button (top-right corner, round icon) opens a slide-out panel. Add tasks, check them off, and clear completed items. Todos are stored in browser localStorage.
Companies
View all assigned companies at /salesman/companies. New companies show a New badge.
- Search: filter by company name or email in real time.
- Mark seen: click the Mark seen button on a new company to acknowledge it (badge disappears).
- Click a company row to go to its detail page.
Company detail page
At /salesman/companies/{id} you can:
- Brands section: see all brands, acknowledge new ones (New badge), and see inactive brands (greyed out).
- Min order quantities: set per-category minimum order quantities for this company. Edit the number and click Save. Changes apply globally.
- Manage Formulas: button to go to the brand formula assignment page.
Brand Management
Each company can have multiple brands. In the company detail page, the brands section shows all brands with status badges.
- New brands show a New badge — click Mark seen to acknowledge.
- Inactive brands show a small inactive label.
Formula Assignment
Assign formulas to a specific brand at/salesman/companies/{id}/formulas. Click Manage Formulas from the company detail page.
The page has two panels: Available (left) and Assigned (right).
- Brand selector: choose which brand to assign formulas to. Each brand has its own formula access.
- Assign one: click the → button on a formula to move it to Assigned.
- Assign all: click Assign all → to move the entire filtered list.
- Remove: click the ← button on an assigned formula to unassign.
- Bulk remove: click ← Remove all.
- Search: filter by formula name or reference code.
- Category filter pills: narrow the available list by category.
Products
Manage products at /salesman/products. The sidebar lists all assigned companies and their brands.
- Select a company to see all products across that company's brands, grouped by category.
- Select a brand to see only that brand's products.
- Search: filter by name, number, SKU, or barcode.
Create / Edit product
Click New Product (top right) or Edit on any product row.
- Required: at least a name or number.
- Assign a brand, category, and optionally a linked formula.
- Set color (hex picker), SKU, barcode.
- Set status: Draft (not visible to client), Active, or Inactive.
- Use the AI auto-fill button (if available) to generate product info from a description.
Delete product
Click Delete on a product row. A confirmation modal appears. Products used in existing orders cannot be deleted (a 409 error is shown).
Orders
Manage all orders at /salesman/orders. Both product orders and formula orders are shown in separate tabs.
Filters & Search
- Tab switcher: Products / Formulas.
- Status filter: click any status pill (only shows statuses that have at least one order).
- Company filter: dropdown appears when there are 2+ companies.
- Date range: Today / 7 days / 30 days / All.
- Sort: toggle Newest first / Oldest first.
- Search: by company name, brand name, order ID, or item name/SKU.
Update order status
Create a new order
Click New Order to open the order creation modal.
Order detail pages
Click Details on any order card to open the full detail page:/salesman/orders/product/{id} or/salesman/orders/formula/{id}.
The detail page shows all order info, the full items table (with colors, numbers, SKUs), and allows status changes.
New orders notification
The page auto-refreshes every 30 seconds. When new orders arrive, aN new orders banner appears at the top. The order cards that arrived since your last page load show aNEW badge. Opening an order card marks it as seen (badge disappears).
Todo List
A personal task manager accessible from any salesman page via the round checklist button in the top-right corner.
- Type a task and press Enter or click + to add.
- Click the checkbox to mark a task as done (shown with strikethrough).
- Hover a task and click ✕ to delete it.
- Click Clear done to remove all completed tasks at once.
- The footer shows X remaining · Y done.
localStorage under the key salesman_todos — they persist across page reloads but are browser-specific.Admin Guide
The admin panel at /admin is for Velari internal staff. Access requires Staff flag. Some sections additionally require Superuser.
Dashboard
The admin dashboard shows stat cards for: Users, Groups, Formulas, Products, Blog Posts, Categories, Companies, and Pending Orders. Each card links to the corresponding section.
The user profile banner at the top shows the logged-in admin's name, email, and role badges (Superuser / Staff).
Quick action buttons below the grid allow: New Blog Post, Manage Categories, View Orders.
Users & Groups
Users — /admin/users (Superuser only)
- Search and paginate all registered users.
- Click Edit on any user to open the edit modal.
- Edit first/last name, toggle Staff access, Salesman, Superuser flags.
- Assign Groups and direct Permissions to the user.
Groups — /admin/groups
- Groups bundle permissions that can be assigned to multiple users at once.
- Click New Group or Edit to open the group modal.
- Set a group name and use the permission picker to search and select permissions.
- Delete a group via the delete modal (confirmation required).
| Permission codename prefix | Grants access to |
|---|---|
view_formulas | Read formulas in admin |
add_formulas | Create new formulas |
change_formulas | Edit existing formulas |
delete_formulas | Delete formulas |
view_blog | Read blog posts / categories |
add_blog | Write new blog posts |
view_companies | View companies in admin |
view_products | Read products in admin |
Companies
At /admin/companies you can search and browse all registered companies. Click Edit to open the company detail page.
The company detail page (/admin/companies/{id}) shows:
- Company info: name, owner email, assigned salesman.
- Edit Salesman: reassign the company to a different salesman (or remove assignment).
- Brands: list of all brands with active/inactive status.
- Members: list of team members with their roles.
Formulas
Manage the formula library at /admin/formulas.
- Search by name or reference. Filter by category tabs. Sort by name or creation date. Toggle Show inactive.
- New Formula: click top-right button. Set name (required), reference code, category, color, and active status.
- AI auto-fill: in the form sidebar, describe the formula and click Fill fields. Claude Haiku generates a name, color, and category suggestion.
- Edit: click Edit on any row.
- Delete: click Delete on any row.
Formula categories come from the product category tree (categories marked with a Formula Max Qty value). Manage them at/admin/product-categories.
Products
Manage all products at /admin/products. The sidebar lists all companies and brands. Select a company or brand to view its products, grouped by category.
- New Product: opens a full form with brand, number, name, SKU, barcode, color, status, category, formula, description, and ingredients fields.
- AI auto-fill: sidebar panel generates product info from a natural-language description.
- Edit: click Edit on any product row.
- Delete: confirmation modal. Products in active orders cannot be deleted.
Product Categories are managed at/admin/product-categories. Categories form a tree (parent → children). Each category has:
- Product Min Qty: minimum units per product order for this category.
- Formula Max Qty: maximum sample units per formula order for formulas in this category.
- Active: inactive categories are hidden from the client's product order page.
Blog
Manage blog posts at /admin/blog and categories at /admin/categories.
Blog posts
- Filter by All / Published / Draft.
- Click New Post or Edit on any row.
- The post form uses a rich text editor (Tiptap) supporting headings, bold, italic, lists, links, blockquotes, and code blocks.
- Set Title, Slug (auto-generated from title), Excerpt, Body, Category, Read time, and Accent color.
- Set status to Draft (not public) or Published with a publish date.
- Published posts immediately appear on the public blog at /blog.
Blog categories
- Create categories manually or use the AI generator: describe what you want (e.g., Generate 5 skincare blog categories) and click Generate.
- Duplicates are detected and marked — they are skipped on import.
- Edit category name and slug inline. Delete categories that have no posts.