Developer Portal

Initial loading screen shown when the app first opens. Features animated logo reveal with 3-phase animation (icon → text → loading bar), subtle background grid pattern, decorative gradient orbs, and auto-transition to Welcome/Home screen after 3 seconds.

3-slide intro carousel shown on first app launch. Features language selector (AR/EN), skip button, and Get Started CTA. Slides cover: platform intro, investment benefits, security.

English version of Welcome screen. Same layout and functionality as Arabic version but LTR.

English version of Nafath verification. Same as Arabic but LTR with 60s timer.

English version of registration. Same flow as Arabic with 120s Nafath timer.

English version of PIN screen.

English version of Home dashboard. Same layout as Arabic but LTR.

Browse all investment opportunities with search, type filters (All/Residential/Commercial/Retail), sort options, and card-based listing with like, progress, and View Details. Includes 'Completed' filter tab to show fully funded opportunities with 100% progress and 'Ownership Certificates Issued' badge.

Full property detail page with hero image, key metrics, property description, location, financial breakdown, documents section, and Invest Now CTA. When accessed with ?status=completed, shows 'Fully Funded' badge, 100% progress, and 'Closed' CTA instead of 'Invest Now'.

Unified multi-step investment flow with auto wallet balance detection. Scenario 1 (sufficient balance): Select tokens → Choose payment method → Confirm → Success. Scenario 2 (insufficient balance): Top-up wallet → Select tokens → Choose payment method → Confirm → Success. Payment methods: Wallet (available), Mada (available), Credit Card (coming soon). Replaces the old separate InvestConfirmScreen.

Confirmation screen after successful investment. Shows animated checkmark, confetti, investment amount, property info, transaction details (expandable), share buttons, and navigation options.

Portfolio overview with total value, invested amount, total return, quick stats (properties count, avg return), upcoming distribution, allocation chart, investments list, and performance summary. Each investment card now shows a status badge: 'Processing' (amber) for pending ownership registration, or 'Confirmed' (green) for investments with issued ownership certificates.

Wallet screen with balance card (gradient with logo watermark), quick actions (deposit/withdraw), transaction history list, and pending transactions.

Know Your Customer verification flow. Multi-step: personal info, employment, financial profile, risk assessment, document upload.

User profile with avatar, personal info, settings menu (notifications, security, language, help), about section with logo, delete account flow (3 steps: confirm popup → PIN verification → success → /welcome), and logout. Support channels: email ([email protected]) + support ticket (/contact-us). Phone and live chat removed in v3.0.

Rewards and referral program. Shows reward points, tier status, referral code, earning history, and available rewards to redeem.

Notification center with categorized notifications and inline expandable detail view. Shows investments, distributions, system alerts. Tap to expand notification detail directly (no separate detail screen). Features: unread indicator, mark all as read, delete notification, mark as unread. Action buttons within expanded detail navigate to relevant screens.

Frequently Asked Questions screen with categorized accordion-style Q&A. Features 6 categories (General, Investment, Properties, Security, Wallet, Referrals), search functionality, and Contact Support CTA.

Privacy policy page with formatted legal text.

Terms and conditions page.

Investment risk disclosure page.

Grid/list view of all available investment opportunities. Alternative to Explore with different card layout.

App preferences including language, notifications, security (biometric, PIN), appearance (dark mode), and account management (sign out, delete account).

Edit personal information form with fields for full name, email, phone, national ID, date of birth, and nationality. Features input validation, save confirmation, and profile photo upload.

Bank account management screen. Shows linked bank card with IBAN, bank name, account holder (auto-filled from Nafath). Features add new bank form with: (1) Beneficiary name read-only from Nafath identity data, (2) Bank selection dropdown, (3) IBAN input with real-time format validation (SA + 22 digits), (4) Open Banking verification via Arab Bank — IBAN is verified and matched with Nafath data before acceptance. Account only added after successful verification.

Standalone deposit screen. Amount input with quick-select presets (1K, 5K, 10K, 25K). Three payment methods: mada card, VIBAN bank transfer, Apple Pay. Each method shows step-by-step instructions.

Standalone withdrawal screen. Shows available balance, amount input with quick presets, verified IBAN destination card with bank details, and processing time notice (1-3 business days).

Full transaction ledger with search, filter chips (All, Deposits, Withdrawals, Investments, Returns, Referrals), date grouping by month, summary cards (Total In/Out), and transaction detail bottom sheet modal.

Comprehensive services hub accessible from Home quick actions. Features quick service grid (Deposit, Withdraw, Transfer, Statement), account management, investment tools, rewards, support, and settings/legal sections.

Support ticket submission screen with full form: question type (dropdown), subject, description, full name, email, phone (optional). Accessible from More screen, Profile help section, FAQ screen, and error states.

Displays user's bookmarked/favorited investment opportunities. White background with blue gradient header matching app design system. Property cards match the approved card design: status badges (top-left), red bookmark badge (top-right), property image, name, location with flag, 3 metrics row (Expected Return, Net Yield, Distribution), property specs (beds/baths/sqm), and blue progress bar with funded percentage. Tapping a card navigates to /detail. Empty state shows heart icon in blue circle with prompt to explore opportunities.

3-step account deletion flow: Step 1 (Confirm) shows warning cards about consequences (investments lost, wallet forfeited, data deleted, irreversible), checkbox agreement, and Continue/Cancel buttons. Step 2 (PIN) shows 4-digit PIN entry with masked dots for verification. Step 3 (Success) shows green checkmark animation with confirmation message and Back to Login button. Progress stepper at top shows current step.

Skeleton loading state patterns for Home, Explore, and Portfolio screens. Shows shimmer animations that match actual component dimensions. Includes developer implementation notes for Flutter shimmer package.

Comprehensive error state patterns: Network Error, Server Error (500), Timeout, Session Expired, 404 Not Found, and Maintenance Mode. Each with animated SVG icons, error codes, retry actions, and support links.

Investment detail screen accessed from Portfolio. Shows confirmed investment with Real Estate Registration ownership certificate, returns breakdown (rental income + capital appreciation), next distribution date, and downloadable documents. Two-phase status system: Processing → Confirmed.

Empty state patterns for 5 key screens: Portfolio (no investments), Notifications (all caught up), Transactions (no history), Search (no results), Watchlist (no saved). Each includes animated SVG illustration, descriptive message, and CTA button.

Biometric authentication screen with 3 tabs: Fingerprint (Touch ID with animated scan), Face ID (with scan line animation), and Setup (toggle biometric methods, configure where to use biometric: login, investment confirmation, withdrawals). Includes security note about on-device storage.

Dark mode preview showing Home, Explore, and Detail screens in dark theme. Demonstrates the full dark color palette with proper contrast ratios.

Detailed report for fully-funded (completed) opportunities showing historical performance, achieved returns, quarterly breakdown, investment timeline, and downloadable documents.