Module 1: ADMIN (Foundation) 1.1 Page: Delegation / Committee Main (List View) • Top Bar: Hamburger Menu, Page Title ("Delegation"), Notification Icon. • Action Area: ◦ Filter Icon: Triggers the Filter Sheet. ◦ Floating Action Button (FAB): Green Circle (+) fixed bottom-right to "Add New". • Content List: ◦ Delegation Card: ▪ Header: From User Name (Bold). ▪ Body: Arrow Icon ($\rightarrow$) pointing to "To User", Role Label, Dates. ▪ Status: Status Badge (Active/Inactive). ▪ Action: Edit (Pencil) Icon. 1.2 Page: Add/Edit User (Input Form) • Container: Full-Screen Sheet (slides up from bottom). • Form Elements: ◦ Dropdown Select: Native picker for "User", "Role", "Committee". ◦ Date Picker: Native OS calendar trigger. ◦ Toggle Switch: For "Is Active?" (replaces checkbox). • Footer: Sticky Action Bar containing a full-width "Submit" button. 1.3 Page: SLA Management • Search Area: ◦ Dropdown: "Select SLA List". ◦ Primary Button: "Search". • List Content: ◦ SLA Card: ▪ Header: Committee Role (e.g., "Chairman"). ▪ Body: Action Description ("Bids to be approved"). ▪ Input: Inline Number Input (for SLA Days) + Save Icon Button. Module 2: RFP APPROVER (Core Workflow) 2.1 Page: Search / Inbox / Approvals (List Views) • Top Bar: Page Title + Search Icon (triggers Filter Sheet). • Tabs: Segmented Control (e.g., [Pending Approval | Pending Review]). • Content List: ◦ RFP Master Card: ▪ Header: Project Name (Truncated) + Status Badge. ▪ Body: RFP #, Version, Created By. ▪ Alert: SLA Countdown (Icon + Text: Red if <48hrs, Green otherwise). ▪ Interaction: Entire card is tappable. 2.2 Page: Filter Sheet (Drawer) • Container: Bottom Sheet. • Inputs: RFP Number (Text), Created By (Dropdown), Project (Dropdown). • Actions: "Reset" (Secondary) and "Apply" (Primary) buttons. 2.3 Page: RFP Details (The Accordion View) • Sticky Header: Project Name, ID, and Status Badge (Always visible). • Body: ◦ Accordion Group: Expandable rows for: ▪ RFP Details (Label/Value pairs). ▪ Scope of Work (Long text block). ▪ Bill of Quantity (Data List). ▪ Attachments (File List with Download Icons). • Footer: Sticky Action Bar with: ◦ Reject Button: Red Outline/Text. ◦ Approve Button: Solid Green. 2.4 Page: Signature Upload • Body: ◦ Canvas Card: ▪ Empty State: Dashed Border + "Tap to Sign/Upload". ▪ Filled State: Image Preview + Floating "Delete" (X) Button. • Footer: Submit Button (Disabled until signed). Module 3: CONTRACTS 3.1 Page: RMI List • Content List: ◦ RMI Card: ▪ Header: Project Name + Award Number. ▪ Body: Vendor Name, Award Amount (Bold). ▪ Alert: SLA Text (Red/Green). ▪ Action: Edit Icon. 3.2 Page: Contract Approvals / Repository • Content List: ◦ Contract Master Card: ▪ Header: Project Name + Status. ▪ Body: Vendor, Contract Officer, Pending With. ▪ Actions (Right Side): • View PDF Button: Large Icon/Button (Eye). • Download Button: Large Icon/Button (Arrow). 3.3 Page: RMI Details (Long Form) • Sticky Header: Award Number. • Body: ◦ Nested Accordions: ▪ Project Info (Default Open). ▪ Evaluation Team (List of names). ▪ Awarding Result (Financials). ▪ Scope of Work (Text). • Footer: Approve/Reject Action Bar. Module 4: CERTIFICATE OF COMPLETION (COC) 4.1 Page: COC Details (Financials) • Top: Status Banner (Colored strip). • Section 1: General Info (Accordion): Project, Vendor, Contract #. • Section 2: Payment (Financial Receipt Block): ◦ Container: Light Grey Box. ◦ Rows: Invoice Amt, (-) Retention, (-) Penalties. ◦ Total Row: Total COC Amount (Large Bold Text). • Section 3: PO List: ◦ PO Card: Replaces the wide table. Shows PO#, Item#, SES Amount. • Section 4: Attachments: ◦ Upload Zone: "Tap to Upload" box. ◦ File List: Filename + Download Icon. Module 5: BID OPENING COMMITTEE (BOC) 5.1 Page: Bids Lists (Opened / Financial / Approved) • Content List: ◦ BOC Tender Card: ▪ Header: Tender Name. ▪ Body: Opening Date, Submission Type. ▪ Action: Download Button (Green) + Edit Button. 5.2 Page: BOC Form (Active Data Entry) • Section 1: Committee Members: ◦ Attendance Card: Member Name + Role. ◦ Controls: ▪ Toggle Switch: "Attendance". ▪ Toggle Switch: "Conflict of Interest". • Section 2: Bidders List: ◦ Bidder Input Card (Expandable): ▪ Header: Vendor Name. ▪ Expanded Body: • Segmented Control: [ Yes | No ] for "Technical Offer". • Segmented Control: [ Yes | No ] for "Bid Bond". • Text Input: "Comments". • Section 3: Checklist: ◦ Question Row: Question Text (Bold). ◦ Input: Segmented Control [ Yes | No | N/A ]. • Footer: Sticky "Submit" Button.