As a developer, I want to implement the core design system and theme for laser-fintech so that all screens follow the luxury glassmorphic aesthetic. This includes: setting up the Midnight Navy (#0B1221) background, Sand Gold (#C5A059) accents, Off-White (#F1F5F9) text, Slate Gray (#2E3A4B) muted tones, glassmorphic surfaces with 24px corner radius, Bento Grid layout system, bilingual typography (Cairo for Arabic, system font for English), full RTL/LTR support for Arabic and English, and fluid transition/animation primitives (pulse, parallax, confetti). Remove any scaffold pages not needed by the SRD. This task must be completed before all other UI tasks.
As a user, I want to use a backend API for registration, login, and biometric token management so that I can securely access my laser-fintech account. Endpoints: POST /auth/register, POST /auth/login, POST /auth/biometric. Supports phone number + password authentication. Built with FastAPI + MySQL.
As a user, I want to see a Role Selection screen with two large glassmorphic cards ('Expat' and 'Merchant') with gold icons, so that I can identify my user type and be directed to the appropriate flow. Supports Arabic RTL layout. Navigates from Onboarding, leads to Login screen.
As a user, I want to see a Login screen with glassmorphic input fields for phone number and password, and a prominent gold fingerprint icon for biometric login, so that I can securely sign into my account. Supports Arabic RTL layout. Navigates from Role Selection, leads to KYC Verification.
As a user, I want to use a backend API for KYC identity verification so that my ID can be scanned, submitted, and reviewed for compliance. Endpoints: POST /kyc/submit, GET /kyc/status. Integrates with document scanning and status tracking stored in MongoDB.
As a user, I want to experience three onboarding screens with luxury 3D illustrations (Competitive Bidding, Guaranteed Escrow, Fast Delivery), each with a gold 'Next' button at the bottom, so that I understand the app's core value propositions. Transitions between screens should be fluid and seamless with parallax effects. Supports bilingual Arabic/English display with RTL layout. Navigates from Splash to Role Selection.
As the owner, I want to use a backend API for the Admin Dashboard so that I can view platform metrics, manage users, set fees, pull profit reports, and withdraw accumulated earnings. Endpoints: GET /admin/overview, GET /admin/users, PATCH /admin/users/:id, GET /admin/fees, PATCH /admin/fees, GET /admin/reports, POST /admin/withdraw. Role-protected with admin-only JWT. Built with FastAPI + MySQL.
As a user, I want to see a Registration screen with four glassmorphic input fields (name, email, phone number, password), so that I can create a new laser-fintech account. Supports Arabic RTL layout. Navigates from Login, leads to KYC Identity Verification.
As a user, I want to see an Identity Verification screen with a live camera view and a green laser frame for scanning my ID, so that I can complete KYC compliance. Supports Arabic RTL layout. Navigates from Registration, leads to Verification in Progress screen.
As a user, I want to see a Splash screen with a center-aligned gold 'S' laser-fintech logo on a Midnight Navy (#0B1221) background with a pulse animation, so that I have a premium first impression of the app. Implement based on the existing Splash (v1) JSX design. Entry point of the Expat and Merchant user flows. Navigates to the Onboarding screen.
As an expat user, I want to see a Success screen with gold confetti animation, a checkmark, a transaction summary, and a 'Download Receipt PDF' button, so that I can celebrate the completion of my transfer and save proof of transaction. Supports Arabic RTL layout. Final screen of the Expat transfer flow.
As a user, I want to see a Verification in Progress screen with a gold circular progress ring and a Verification Successful screen with a large green emerald checkmark, so that I have clear feedback on my KYC status. Supports Arabic RTL layout. Navigates from Identity Verification, leads to Expat Dashboard or Merchant Dashboard based on role.
As an expat user, I want to see a Recipient Details screen with glassmorphic input fields for name, city, and phone number, and a gold 'Continue' button, so that I can specify who will receive my transfer. Supports Arabic RTL layout. Navigates from Amount Input, leads to Bidding screen.
As an expat user, I want to see a Transaction Preview screen with a receipt-style layout showing final amounts, fees, and a 'Lock Funds' action, so that I can confirm all transaction details before committing. Supports Arabic RTL layout. Navigates from Bidding, leads to Escrow Tracker.
As the owner, I want to see a Profit Withdrawal screen with a summary of accumulated platform profits and a gold 'Withdraw to Bank' button, so that I can transfer my earnings directly to my bank account at any time. Supports Arabic RTL layout. Navigates from Admin Dashboard.
As the owner (Mohammed Bakri Osman), I want to see a comprehensive Admin Dashboard displaying all ongoing transactions, active users, revenue streams, and platform health metrics in a glassmorphic layout, so that I can monitor and control all platform operations at a glance. Supports Arabic RTL layout. Navigates from Admin Login.
As the owner, I want to see a Fee Management screen where I can set and adjust transfer fees, bidding commissions, and premium service charges in real-time, so that I can maximize profitability and react to market conditions. Supports Arabic RTL layout. Navigates from Admin Dashboard.
As the owner, I want to see a User Management screen where I can view all registered users, approve pending accounts, suspend suspicious accounts, or ban users, so that I can maintain platform integrity and security. Supports Arabic RTL layout. Navigates from Admin Dashboard.
As the owner, I want to see a Profit Reports screen with dynamic gold line/bar charts showing daily, weekly, and monthly earnings, so that I can track revenue trends and make informed business decisions. Supports Arabic RTL layout. Navigates from Admin Dashboard.
As an expat user, I want to use a backend API for real-time currency conversion (SAR to SDG) and transfer initiation so that I can see live rates and send money. Endpoints: GET /rates/live, POST /transfer/initiate. Integrates with live FX data source.
As an expat user, I want to see my Dashboard showing SAR and SDG balances in a large glassmorphic card with quick action buttons (Send, Receive) and a live market rates ticker below, so that I can monitor my finances at a glance. Supports Arabic RTL layout. Navigates from KYC Success, leads to Amount Input screen.
As an expat user, I want to use a backend API for the 3-tier bidding system so that I can receive ranked merchant offers (Best Rate, Fastest, Top Rated) and lock my chosen offer. Endpoints: GET /bids/available, POST /bids/select, POST /bids/lock. Stores bids in MySQL.
As an expat user, I want to see an Amount Input screen where I can enter SAR and see the corresponding SDG conversion in real-time using a ticker-style display, so that I know exactly how much the recipient will receive. Supports Arabic RTL layout. Navigates from Expat Dashboard, leads to Recipient Details.
As an expat user, I want to see a 3-tier Bidding screen with three colored cards (Gold frame: 'Best Rate', Cyan frame: 'Fastest', Pink frame: 'Top Rated'), each with a wide gold 'Select' button, so that I can choose the merchant offer that best suits my needs. Supports Arabic RTL layout. Navigates from Recipient Details, leads to Transaction Preview.
As a user, I want to use a backend API for live escrow tracking and secure encrypted messaging so that I can monitor my transaction stages in real-time and communicate with my counterpart safely. Endpoints: GET /escrow/status, POST /chat/send, GET /chat/messages. Uses WebSocket for real-time updates. End-to-end encryption applied.
As a user, I want to see a Secure Chat screen with encrypted messaging (gold bubbles for sender, navy for receiver) and a persistent warning banner 'Do not share numbers outside the app', so that I can communicate securely with the merchant while maintaining escrow protection. Supports Arabic RTL layout. Navigates from Escrow Tracker, accessible to both Expat and Merchant.
As a merchant, I want to use a backend API for managing bidding requests, active orders, wallet earnings, and payouts so that I can efficiently run my merchant operations. Endpoints: GET /merchant/bids, GET /merchant/orders, GET /merchant/wallet, POST /merchant/payout. Integrates with MySQL for order data and MongoDB for wallet analytics.
As an expat user, I want to see a Live Escrow Tracker with a vertical animated timeline showing transaction stages (Deposited in Green, Merchant Notified in Gold, In Delivery pulsing Orange), so that I have full transparency into my transfer's progress. Supports Arabic RTL layout. Navigates from Transaction Preview, leads to Secure Chat.
As a merchant, I want to see a Merchant Dashboard showing available bidding requests with location tags in a fast card system, so that I can quickly identify and respond to transfer opportunities in my city. Supports Arabic RTL layout. Navigates from KYC Success (Merchant role), leads to Active Orders.
As a merchant, I want to see an Active Orders screen for managing my ongoing transactions, so that I can track and fulfill my accepted bids efficiently. Supports Arabic RTL layout. Navigates from Merchant Dashboard, leads to Secure Chat.
As a merchant, I want to see a Wallet Overview screen with a gold line chart showing my weekly earnings, so that I can monitor my income trends and financial performance at a glance. Supports Arabic RTL layout. Navigates from Secure Chat, leads to Payout screen.
As a merchant, I want to see a Payout screen with my local bank details and a prominent gold 'Withdraw Funds' button, so that I can transfer my earnings to my bank account quickly and easily. Supports Arabic RTL layout. Final screen of the Merchant flow. Navigates from Wallet Overview.
No comments yet. Be the first!