# Walkthrough - Attendance Delegation Timeline Update

I have updated the status mapping and timeline logic in the Attendance Delegation History page to align with the provided status definitions.

## Changes Made

### Attendance & Overtime Delegation History Pages
- **Standardized `_buildStatusBadge`**:
    - Both pages now use the same status mapping and labels:
        - `1`: "Pending Delegate Approval"
        - `2`: "Approved by Delegate / Pending Execute"
        - `3`: "Pending HR Staff"
        - `5`, `6`: "Cancel"
        - Default: "Approved HR Staff (Done)"
- **Standardized `_buildTimeline`**:
    - Both pages now share the same 5-step timeline:
        1. Delegation
        2. Pending Delegate Approval
        3. Approved by Delegate / Pending Execute
        4. Pending HR Staff
        5. Approved HR Staff (Done)
    - The logic for determining which step is active or completed is now consistent across both modules.
- **Refined Detail View**:
    - Synced the layout of coordinates, maps, and addresses.
    - Updated signature previews to support both Delegator and Delegate signatures side-by-side (when available).
    - Preserved overtime-specific fields like "Duration" while ensuring consistent styling.
- **Backend Fix (Overtime History)**:
    - Updated `getOvertimeDelegationHistory` and `getOvertimeDelegationHistoryEmployee` in `delegation-overtime-services.js` to join with `trx_multi_ovt_footer`.
    - History results now include an array of actual time segments (`segments`) for each delegation record.
- **Frontend Updates (Time Segments)**:
    - **React Native**: Added a new section in the `ListOvertimeDelegation.js` cards to display the "Actual Work Segments" (Start - End times) with their respective Clock In/Out timestamps.
    - **Flutter**: Updated `overtime_delegation_history_page.dart` to show a styled list of actual work segments with detailed timestamps for each interval.

## Verification Results

### Logic Check
- **Status 1**: "Pending Delegate Approval" is In Progress.
- **Status 2**: "Approved by Delegate / Pending Execute" is In Progress.
- **Status 3**: "Pending HR Staff" is In Progress.
- **Status 4/others**: All steps are marked as Done.
- **Status 5**: All steps are marked as Cancelled (Red X).

The code now strictly follows the mapping provided:
```javascript
 const getStatusText = (status) => {
    if (status == 1) return "Pending Delegate Approval";
    if (status == 2) return "Approved by Delegate / Pending Execute";
    if (status == 3) return "Pending HR Staff";
    if (status == 5) return "Cancel";
    return "Approved HR Staff (Done)";
  };
```