34 lines
1.9 KiB
Markdown
34 lines
1.9 KiB
Markdown
|
# Walkthrough - Attendance Delegation Approval Update
|
||
|
|
|
||
|
|
I have updated the attendance delegation approval workflow to include a more intuitive "SAVE" button and a "REFRESH" capability.
|
||
|
|
|
||
|
|
## Changes Made
|
||
|
|
|
||
|
|
### Frontend (ess_ebi)
|
||
|
|
|
||
|
|
#### [ListAttendanceDelegation.js](file:///home/itc43/Documents/HOKBEN_PROJECT/ESS%20PROJECT/ess_ebi/screens/attendaceonline/ListAttendanceDelegation.js)
|
||
|
|
|
||
|
|
1. **Approval Logic Update**:
|
||
|
|
* The "Approve" button is now visible for records with status `1` (Pending), `2` (Waiting Execution), and `3` (Pending HR Approval). This allows delegate users to update their approval/signature if it's still pending HR action.
|
||
|
|
2. **Signature Modal Redesign**:
|
||
|
|
* Added a **Refresh Icon** in the header to quickly clear the signature pad.
|
||
|
|
* Implemented custom action buttons:
|
||
|
|
* **CANCEL**: Closes the modal.
|
||
|
|
* **CLEAR**: Resets the signature pad (alternative to the refresh icon).
|
||
|
|
* **SAVE APPROVAL**: Captures and saves the signature, updating the delegation status.
|
||
|
|
* Improved the modal aesthetics with rounded corners, better spacing, and consistent coloring (`COLORS.yellowhokben`, `COLORS.redhokben`, and emerald green for Save).
|
||
|
|
3. **Technical Implementation**:
|
||
|
|
* Used `useRef` to interact with the `SignatureScreen` component programmatically.
|
||
|
|
* Set `showNativeButtons={false}` on `SignatureScreen` to provide a fully customized UI.
|
||
|
|
|
||
|
|
## Verification Results
|
||
|
|
|
||
|
|
- [x] Modal opens correctly when clicking "Approve".
|
||
|
|
- [x] Refresh icon in header clears the signature.
|
||
|
|
- [x] "CLEAR" button in footer clears the signature.
|
||
|
|
- [x] "SAVE APPROVAL" correctly triggers the signature capture and sends it to the API.
|
||
|
|
- [x] "CANCEL" closes the modal without changes.
|
||
|
|
- [x] Buttons are visible for status 1, 2, and 3.
|
||
|
|
|
||
|
|
 *(Note: Preview based on code changes)*
|