Phase 1: Design System.

This list defines the "LEGO bricks" you need to build before creating any screens.

1. Foundation (Global Styles)

These rules apply to every screen in the app.

• Color Palette (SIDF Theme)
  • Primary Green: #28A745 (Main Actions, Submit, Active States).
  • Secondary/Surface: #FFFFFF (Card Backgrounds), #F4F6F8 (App Background).
  • Text Colors: #333333 (Primary Headings), #666666 (Labels/Secondary Data).
  • Status Colors:
    • Danger/Overdue: Red (Used for overdue SLAs and "Reject" actions).
    • Success: Green (Approved, Completed).
    • Warning: Orange/Yellow (Pending Review).
• Typography (Bi-Directional)
  • Font Family: A clean Sans-Serif that supports both English and Arabic.
  • H1 (Page Title): 20px Bold.
  • H2 (Card Title): 16px Bold (e.g., Project Name).
  • Body: 14px Regular (Data values).
  • Label/Caption: 12px Medium (Field labels like "RFP Number").
• Grid & Spacing
  • Base Unit: 4px / 8px.
  • Page Margins: 16px (standard mobile padding).
  • Card Padding: 12px or 16px.
• Touch Targets
  • Minimum Height: 44px for all inputs and buttons (Critical for mobile touch).

2. Components (Reusable UI Elements)

These are the standard elements used across Admin, RFP, and Contract modules.

• Navigation
  • Top App Bar: Hamburger Menu (Left/Right based on Lang), Page Title, Notification Icon.
  • Navigation Drawer: Slide-out menu containing the module links (Admin, RFP, Contracts, etc.).
• Buttons & Actions
  • Primary Button: Full width, Solid Green (e.g., "Search", "Submit").
  • Secondary Button: Outlined Green or Grey (e.g., "Cancel", "Reset").
  • Floating Action Button (FAB): Circular + button for "Add User" screens.
  • Action Group: A row of buttons for cards (e.g., [View PDF] [Download]).
• Inputs & Forms
  • Text Field: Label on top, input box below (Height 48px).
  • Date Picker: Native OS trigger.
  • Segmented Control: A horizontal toggle bar for exclusive choices (e.g., [Yes | No | N/A]). Critical for BOC Checklists.
  • Toggle Switch: Replacement for checkboxes in "Member Maintenance" and "BOC Attendance."
• Status Indicators
  • Status Badge: Pill-shaped container with colored background and text (e.g., "Submitted" in Green).
  • SLA Indicator: Icon (Clock) + Text Label. Rules: Green if > 2 days, Red if < 2 days.

3. Complex Data Structures (The Patterns)

These are the specific solutions to the "Responsive Web" challenges found in your screenshots.

A. The Master Data Card (Replaces Table Rows)