spicy-matrix

As a guest or user, I want to use the frontend Comparison Matrix page (v1 design) so that I can browse and filter feature comparisons across platforms. Implement a full-featured comparison table with 17 criteria rows and competitor columns, filter/search functionality, and visual indicators (✓/✗ with color coding). Green accent (#FF5733) for present features, muted taupe for absent. Sticky header row and column. Mobile: horizontal scroll with fixed first column. Page links from: Landing. Includes CTA to Register. Based on existing Comparison Matrix (v1) JSX design.

As a user, I want to use the frontend Landing page (v2 design) so that I can view platform features, access the comparison matrix, register, or sign in. Implement the interactive spice jar signature design concept with drag/tap animations, color shifts on hover, and micro-interaction popups. Include watercolor background effect that morphs between warm tones. Sections: NavBar, Hero with animated spice jar, Feature Highlights, Comparison Matrix preview, CTA for registration. Links to: Login, Signup, Comparison Matrix. Based on existing Landing (v2) JSX design.

As a user, I want to use the frontend Login page (v1 design) so that I can sign in to the platform. Implement the login form with email and password fields, validation states, and error messaging. Apply spicy-matrix theme tokens. Page links from: Landing. Page links to: Dashboard. Mobile-first responsive layout, centered card on warm ivory background. Based on existing Login (v1) JSX design.

As a user, I want to use the frontend Signup page (v1 design) so that I can create an account as an Individual, Agency, or HR Team. Implement registration form with role selection, full name, email, password, and language preference fields. Apply spicy-matrix theme. Page links from: Landing. Page links to: Dashboard. Mobile-first responsive layout. Based on existing Signup (v1) JSX design.

As a guest or authenticated user, I want to use the backend comparison matrix API so that I can retrieve feature comparison data across platforms. Implement FastAPI endpoint GET /comparison/matrix returning all 17 feature criteria with values per competitor. Support filter query params by feature category and target user type. Data is publicly accessible (no auth required for guests). Seed database with matrix data from SRD.

As a user, I want to use the frontend Dashboard page (v1 design) so that I can view an overview of my activity, quick stats, and primary actions based on my role. Implement: NavBar, Sidebar, WelcomeBanner with spice jar visual, QuickStats cards (role-adaptive), PrimaryActions CTAs, ActivityOverview chart, RecentItems list, SecondaryMetrics, QuickLinks, NotificationsPanel. Sidebar collapses to hamburger drawer on mobile. Role-based content: Individuals see eligibility checks and cost stats; Agencies see clients and documents; HR Teams see PR pathways. Links to: Eligibility Checker, Cost Calculator, Family Profiles, CRM, PR Planner, Country Rankings, Settings. Based on existing Dashboard (v1) JSX design.

As a user, I want to use the frontend Settings page (v1 design) so that I can configure my account preferences, language, and notification settings. Implement sections: Profile, Account Security, Notification Preferences, Appearance (language/RTL toggle), Integrations, and Danger Zone. Settings nav sidebar collapses to top tabs on mobile. Page links from: Dashboard (all personas). Based on existing Settings (v1) JSX design.

As a user, I want to use the backend dashboard API so that I can retrieve role-based stats, recent activity, and notifications for the Dashboard page. Implement FastAPI endpoints: GET /dashboard/stats (role-adaptive KPIs), GET /dashboard/activity (chart data), GET /dashboard/recent-items, GET /dashboard/notifications. Return role-specific data based on JWT claims. Secure all endpoints with auth middleware.

As an HR team user, I want to use the frontend PR Planner page (v1 design) so that I can plan PR pathways for employees. Implement pathway selection (6 pathways), timeline visualization, milestone tracking, employee profile input, and pathway comparison. Connects to Cost Calculator for cost estimation. Mobile-first responsive with collapsible sections. Page links from: Dashboard. Page links to: Cost Calculator. Based on existing PR Planner (v1) JSX design.

As an admin user, I want to use the frontend Languages page (v1 design) so that I can configure localization and RTL support for the platform. Implement language list (English, Arabic, French, Spanish) with enable/disable toggles, RTL mode toggle per language, translation key editor, and preview mode. Arabic RTL prioritized. Mobile-first layout. Page links from: Dashboard (Admin flow). Based on existing Languages (v1) JSX design.

As an HR team user, I want to use the frontend Country Rankings page (v1 design) so that I can compare country rankings for migration suitability. Implement ranked list/table of countries with sortable columns (ease of immigration, cost index, processing time, PR success rate), filter by region/criteria, and detail view per country. Visual rank indicators using accent and secondary colors. Mobile: card-based layout. Page links from: Dashboard. Based on existing Country Rankings (v1) JSX design.

As an agency user, I want to use the frontend CRM page (v1 design) so that I can manage my clients. Implement client list with search, filter, and sort; client detail view with status, notes, and assigned documents; add/edit client forms; and pipeline status tracking. Links to Documents page for file storage. Mobile: single column with swipe actions. Page links from: Dashboard. Based on existing CRM (v1) JSX design.

As a user, I want to use the frontend multi-language system so that I can navigate the platform in Arabic (RTL), English, French, or Spanish. Integrate i18n library (react-i18next or similar), configure RTL layout switching for Arabic, create translation JSON files for all 4 languages, and apply to all implemented pages. Ensure all text, icons, and layout direction respond correctly. Priority: Arabic RTL per SRD constraints.

As an individual user, I want to use the frontend Family Profiles page (v1 design) so that I can securely manage profiles for my family members. Implement profile list with add/edit/delete functionality, per-member forms (name, relation, DOB, nationality, passport info), and secure data handling indicators. AES-256 encryption note displayed. Mobile-first card layout. Page links from: Dashboard. Based on existing Family Profiles (v1) JSX design.

As a user, I want to use the frontend Cost Calculator page (v1 design) so that I can calculate migration costs for a selected country and visa type. Implement interactive form with destination country selector, visa type, family size input, and timeline. Display cost breakdown (government fees, legal fees, travel, living expenses) with charts and totals. Supports Individual and HR Team personas. Page links from: Dashboard, PR Planner. Based on existing Cost Calculator (v1) JSX design.

As an admin user, I want to use the frontend Users page (v1 design) so that I can manage all platform users. Implement user list with search, filter by role/status, bulk actions (activate, deactivate, delete), user detail drawer, and role assignment. Pagination and export functionality. Mobile: single column with action menus. Page links from: Dashboard (Admin flow). Based on existing Users (v1) JSX design.

As an individual user, I want to use the frontend Eligibility Checker page (v1 design) so that I can run an AI-powered check to determine my visa options. Implement multi-step form collecting user profile data (nationality, age, education, work experience, finances), submit to AI backend, and display eligibility results with visa options and recommendations. Loading states with spice-themed animation. Page links from: Dashboard. Based on existing Eligibility Checker (v1) JSX design.

As a user, I want to use the backend cost calculator API so that I can get detailed migration cost breakdowns. Implement FastAPI endpoint POST /calculator/cost accepting destination country, visa type, family size, and timeline. Return itemized costs: government fees, legal fees, travel, living expenses, and total with currency conversion for QAR. Seed country cost data in database.

As an admin user, I want to use the backend localization API so that I can configure language settings and RTL support. Implement FastAPI endpoints: GET /admin/languages (list supported languages with status), PUT /admin/languages/{code}/toggle (enable/disable), GET /admin/translations/{lang_code} (export translation keys), PUT /admin/translations/{lang_code} (update translation keys). Store language configs in database. Return RTL flag per language.

As an individual user, I want to use the AI-powered eligibility checker backend API so that I can receive visa options based on my profile. Implement FastAPI endpoint POST /eligibility/check integrating LiteLLM routing to Claude AI and Gemini Pro. Accept user profile (nationality, age, education, work history, finances), run eligibility logic, return ranked visa options with confidence scores. Implement Langchain for structured AI response parsing.

As an admin user, I want to use the backend users management API so that I can manage all platform users. Implement FastAPI endpoints: GET /admin/users (with search, filter by role/status, pagination), GET /admin/users/{id}, PUT /admin/users/{id}/role, PUT /admin/users/{id}/status (activate/deactivate), DELETE /admin/users/{id}. Protect all endpoints with admin role middleware. Support bulk status update.

As a user, I want to use the backend settings API so that I can persist my profile, language preference, notification, and security settings. Implement FastAPI endpoints: GET /settings/profile, PUT /settings/profile, PUT /settings/security (password change), GET/PUT /settings/notifications, GET/PUT /settings/appearance (language, RTL, theme). All endpoints require authentication. Validate language codes against supported languages.

As an agency user, I want to use the backend CRM API so that I can manage my client pipeline. Implement FastAPI CRUD endpoints: GET/POST/PUT/DELETE /crm/clients, GET/POST /crm/clients/{id}/notes, GET/PUT /crm/clients/{id}/status. Include client pipeline stages, search/filter query params, and pagination. Scope all data to authenticated agency account.

As an agency user, I want to use the frontend Documents page (v1 design) so that I can securely store and manage client files. Implement document list with file type icons, upload/download/delete actions, folder organization by client, and AES-256 encryption indicators. Drag-and-drop upload zone. Mobile: grid or list toggle. Page links from: CRM. Based on existing Documents (v1) JSX design.

As an individual user, I want to use the backend family profiles API so that I can securely manage family member data. Implement FastAPI CRUD endpoints: GET/POST/PUT/DELETE /family/profiles. Apply AES-256 encryption for PII fields (passport number, DOB, nationality). Associate profiles with authenticated user via JWT. Enforce data ownership so users can only access their own family data.

As an HR team user, I want to use the backend PR planner API so that I can plan and track PR pathways for employees. Implement FastAPI endpoints: GET /pr-planner/pathways (list 6 pathways), POST /pr-planner/plans (create plan), GET/PUT/DELETE /pr-planner/plans/{id}, GET /pr-planner/plans/{id}/milestones. Return pathway timelines, eligibility criteria, and success rates.

As an HR team user, I want to use the backend country rankings API so that I can retrieve and compare countries by migration suitability. Implement FastAPI endpoints: GET /countries/rankings (with sort/filter query params by ease, cost, processing time, success rate), GET /countries/{id}/detail. Seed database with ranking data for top migration destinations. Support QAR-based cost indexing.

As an agency user, I want to use the backend document storage API so that I can upload, retrieve, and manage client files securely. Implement FastAPI endpoints: POST /documents/upload (multipart), GET /documents, GET /documents/{id}/download, DELETE /documents/{id}. Apply AES-256 encryption at rest, associate documents with client records, enforce file type and size limits. Store files in secure object storage.