purple-project

As a user, I want all pages to have a consistent visual theme so that the platform feels cohesive. Apply the purple-project design tokens globally: Background #F3E5F5 (Lavender Mist), Surface #D1C4E9 (Soft Purple), Text #311B92 (Deep Indigo), Accent #7B1FA2 (Royal Purple), Muted #B39DDB (Light Lilac). Update global CSS/theme config, typography (Inter font family), spacing standards, button styles, and card components. Remove any scaffold pages not in the user flows (e.g. welcome page, ai-assistant page if not needed). Ensure all existing scaffold pages (Login, Signup, Dashboard) inherit the new theme.

As a user, I want to sign in to my account so that I can access the dashboard. Implement the Login page with email and password fields, form validation, error messages, and a 'Sign In' button. Link to Signup page. On success, redirect Admin to Dashboard overview and Customer to Dashboard. Apply purple-project theme. Integrate with existing basic authentication backend.

As a customer, I want to create an account so that I can start using the referral platform. Implement the Signup page with fields for name, email, password, and optional referral code input. Include form validation, error handling, and a 'Create Account' CTA. On success, redirect to Dashboard. Apply purple-project theme. Support referral code capture in the URL params (e.g. ?ref=CODE) to pre-fill the referral field.

As a customer, I want to view my commission summary and referral stats on a dashboard so that I can track my earnings. Implement the Dashboard Overview page showing: total commissions earned (AED), active referrals count, recent activity feed, and a mini referral tree widget. For Admin: show platform-wide stats — total sales, total commissions paid, active users. Use surface color cards with purple-project theme. Link to Products, Referrals, Commissions, Reports, and Settings pages.

As a customer, I want to browse and purchase products so that I can participate in the referral program. Implement the Products page with a product catalog grid showing product image, name, price (AED), and stock status. Include a 'Buy Now' or 'Add to Cart' action. As an Admin, I want to manage the catalog with options to add, edit, update pricing, and update stock. Apply purple-project theme with surface color cards. Links from Dashboard.

As a customer, I want to view and share my referral link and track my referral network so that I can grow my commissions. Implement the Referrals page showing: unique referral link with a copy button, referral network tree visualization (interactive, animated nodes using #7B1FA2 for active and #B39DDB for inactive), referral history list with names and commission earned per referral. As an Admin, I want to monitor all referral activity across users. Apply purple-project theme.

As a customer, I want to view a detailed breakdown of my commissions so that I have full transparency on my earnings. Implement the Commissions page with: a commission balance summary (AED), a table of commission transactions (date, referral name, product, amount earned), commission status (pending/paid), and a withdrawal request button. As an Admin, I want to review and approve/reject commission payouts. Apply purple-project theme.

As an Admin, I want to generate and view reports on sales, referrals, and commissions so that I can make data-driven decisions. Implement the Reports page with: date range filters, summary cards (total sales AED, total referrals, total commissions paid), charts/graphs for trends, and export to CSV functionality. Apply purple-project theme with surface color cards and #7B1FA2 accent for chart colors.

As an Admin, I want to configure platform settings such as commission percentage so that I can control business rules. Implement the Settings page with: commission rate configuration (default 10%), currency settings (AED), timezone settings (GMT+4), and account profile settings. Include a save/update button with confirmation. As a customer, show account settings (name, email, password change). Apply purple-project theme.

As a user, I want to use a backend API for product management so that product data is persisted and retrievable. Implement FastAPI endpoints: GET /products (list with pagination), GET /products/{id}, POST /products (admin), PUT /products/{id} (admin update pricing/stock), DELETE /products/{id} (admin). Include AED currency support and stock status fields. Secure admin endpoints with role-based access control.

As a user, I want to use a backend API for referral tracking so that my referral network is accurately recorded. Implement FastAPI endpoints: GET /referrals/my (customer's referral list), GET /referrals/link (generate/fetch unique referral link), POST /referrals/register (record a new referral on signup), GET /referrals/tree (hierarchical referral network data for tree visualization), GET /referrals (admin — all referrals). Support referral code capture during signup.

As an admin, I want to use a backend API for platform configuration so that business rules like commission rate can be updated. Implement FastAPI endpoints: GET /settings (fetch current config), PUT /settings/commission (update commission percentage), PUT /settings/currency (update currency), GET /settings/profile (user profile), PUT /settings/profile (update profile), PUT /settings/password (change password). Restrict configuration endpoints to Admin role.

As a user, I want to use a backend API for commission calculation and management so that earnings are accurately computed. Implement FastAPI endpoints: GET /commissions/my (customer commission history), POST /commissions/calculate (trigger commission calculation on purchase — 10% of product profit), GET /commissions (admin — all commissions), PUT /commissions/{id}/status (admin approve/reject payout), GET /commissions/summary (balance summary). Support AED currency.

As an admin, I want to use a backend API for generating reports so that I can get aggregated data on platform performance. Implement FastAPI endpoints: GET /reports/sales (total sales by date range), GET /reports/referrals (referral activity summary), GET /reports/commissions (commission payouts summary), GET /reports/export (CSV export). Include date range filtering and AED currency formatting. Restrict all endpoints to Admin role.

As a customer, I want to use a backend API for purchasing products so that transactions are recorded and commissions are triggered. Implement FastAPI endpoints: POST /orders (create order, record purchase, trigger commission calculation for referrer), GET /orders/my (customer order history), GET /orders/{id} (order detail), GET /orders (admin — all orders). Ensure AED currency, UAE timezone (GMT+4) timestamps, and automatic 10% commission credit to referrer on successful purchase.

As a user, I want the frontend pages to be connected to real backend APIs so that all data is live and persisted. Wire up all frontend pages (Products, Referrals, Commissions, Reports, Settings, Dashboard) to their respective backend API endpoints. Implement API client service layer with Axios/fetch, handle loading states, error states, and empty states. Implement JWT token management for authenticated requests. Ensure AED currency formatting and GMT+4 timezone display across all pages.