1. Project Overview & Scope Objective: Transform the current SIDF desktop internal platform into a fully responsive mobile web experience. The goal is to allow users to perform critical approval and data entry tasks via standard mobile browsers (Chrome/Safari) on smartphones. Core Philosophy: "Zero Logic Change, Maximum Usability." • Platform: Responsive Web (HTML/CSS adaptation). This is NOT a native iOS/Android App. • Data Integrity: We will retain 100% of the existing business logic, fields, and validations. The only change is the visual layout to fit small screens. • Localization: All designs, prototypes, and specs must be delivered in English (LTR) and Arabic (RTL).

2. Roadmap Overview (7-Phase Strategy) We have broken the project into 7 distinct phases to isolate complexity. We start with the Design System, then move module-by-module from "High Traffic" to "High Complexity."PhaseFocus AreaKey DeliverablesPhase 1Design SystemMobile Style Guide, Master Components, Navigation.Phase 2Admin ModulesDelegation, Committee Maintenance, SLA.Phase 3RFP ApproverSearch, Inbox, Approvals, Details, Signature.Phase 4ContractsRMI, Contract Approvals, Contract List.Phase 5COCCertificate of Completion (Financials & POs).Phase 6BOCBid Opening Committee (Attendance & Data Entry).Phase 7FinalizationArabic Mirroring (RTL) & Developer Handoff.

Question Dev

3. Detailed Phase Breakdown Phase 1: Design System & Mobile Architecture Goal: Create the "LEGO bricks" for the entire app to ensure consistency. • Deliverables: ◦ Mobile Style Guide: Typography scale (readable 16px body), Color Palette (Standard/Hover/Error states), and Spacing Grid (8px system). ◦ Master Components: ▪ "Data Card": The unified component to replace desktop table rows. ▪ "Accordion": The expand/collapse pattern for long forms. ▪ "Input Sheet": Slide-up drawer for filters and menus (replacing desktop pop-ups). ◦ Navigation: Hamburger Menu (Drawer) and Top Bar design. Phase 2: Admin Modules (Foundation) Goal: Apply the Design System to simpler CRUD (Create-Read-Update-Delete) lists. • Modules: ◦ Delegation: List View (Cards) and Add/Edit User (Full-screen Form). ◦ Committee Maintenance: Member management using the "Data Card" pattern. ◦ SLA: Mobile-friendly Search and Edit inputs. Phase 3: RFP Approver (High Traffic) Goal: Streamline the core approval loop. • Modules: ◦ Unified Lists: "Search RFP," "My Inbox," and "My Approvals" using the RFP Master Card (showing Status & SLA Countdown). ◦ Project Details: Implement Accordion Navigation to group long sections (Scope, BOQ, Attachments). ◦ Signature: "Upload Signature" flow (Draw/Upload $\rightarrow$ Preview $\rightarrow$ Delete).

Phase 4: Contracts (Long Forms & PDFs) Goal: Handle PDF interactions and extended data forms. • Modules: ◦ RMI (Request for Material Info): Design the RMI Master Card (displaying Award Amount & Vendor) and the long-form RMI Details using nested accordions. ◦ Contract Approvals/List: Add prominent "View PDF" and "Download" touch targets to the cards. ◦ Filters: Advanced filter sheet including "Pending With" and "Officer" dropdowns. Phase 5: Certificate of Completion (Complex Financials) Goal: Visualize heavy financial data without wide tables. • Modules: ◦ COC Details: ▪ Financial Receipt: Stack Invoice Amount, Penalties, and Totals vertically for readability. ▪ PO Lists: Convert the wide "PO/SES" table into a vertical list of PO Cards. ◦ Actions: Sticky "Approve/Reject" footer to prevent errors.

Phase 6: Bid Opening Committee (Active Data Entry) Goal: Optimize for active input and checklist verification. • Modules: ◦ Attendance: Replace checkboxes with Toggle Switches for Member Attendance. ◦ Bidders List: Convert the grid into Expandable Input Cards. ◦ Inputs: Use Segmented Controls (Yes/No buttons) for document verification (Bid Bond, Technical Offer) instead of small checkboxes. Phase 7: Localization & Handoff Goal: Finalize for development. • Arabic Mirroring: Create RTL versions of all key screens (Navigation slides from right, text aligns right). • Dev Handoff: Annotate responsive behavior (e.g., "At 768px, hide Column B and move Data C to a new row"). 4. Critical Questions for the Dev Team Please address these constraints immediately to ensure design feasibility:

1. Framework Capabilities: "Which frontend framework is currently used (e.g., Bootstrap, Angular Material)? Does it have a 'Card View' mode for its data grids, or will we need to structure a custom <div> layout for mobile?"
2. RTL Strategy: "How is Arabic currently handled? Are you using logical CSS properties (e.g., margin-inline-start)? We need to know this to annotate the designs correctly."
3. Performance: "The RMI and RFP Details pages load a lot of data. On mobile, do we need to design 'Lazy Loading' states (spinners when opening an accordion), or does the data load all at once?"
4. PDF Behavior: "For Contracts and BOC, should the 'View PDF' button trigger a file download or open the PDF in a new browser tab?"
5. Navigation: "We are moving the left sidebar to a mobile drawer. Is there any technical reason the menu structure cannot be rendered inside a slide-out drawer?"

Design system