Fixed checkin and checkout functionality and dateTime in Readable format

[SanjayaGrg]

Summary

Fixed guard attendance check-in/check-out flow and added attendance history display in the guard app.

What changed

Attendance API integration

• Updated guard app attendance integration to work with the latest backend attendance schema

• Replaced old fields:

  • shiftId → shift
  • guardId → guard
  • checkInTime → clockIn
  • checkOutTime → clockOut

• Synced frontend attendance state with backend attendance history API

Check-in / Check-out fixes

• Fixed check-in and check-out validation flow
• Prevented duplicate check-in and duplicate check-out handling issues
• Fixed attendance state not persisting correctly after app refresh or login
• Synced attendance history after reopening shift details

Attendance history UI

• Added attendance history section in ShiftDetailsModal

• Displayed:

  • Check-in time
  • Check-out time

• Attendance history only appears when attendance exists

• Added readable date/time formatting for attendance records

Shift tabs updates

• Applied tab now loads attendance history from backend
• Completed tab now loads attendance history from backend
• Mapped attendance records to corresponding shifts using shift IDs

Location details

• Added detailed location information in shift details:

  • Street
  • Suburb
  • State
  • Postcode

Testing

• Tested check-in flow successfully
• Tested check-out flow successfully
• Verified attendance history appears after reopening app
• Verified attendance history appears in Applied and Completed shifts
• Verified formatted readable dates/times display correctly

Screenshots:

[TeddyScript101]

From your file changes, I noticed that you also updated the backend code, which is not appropriate within our current project setup.

The frontend should integrate with the existing APIs instead of modifying the backend implementation, as backend changes may affect other team members’ work, create integration conflicts, and impact the overall system stability.

If you have any concerns or need backend changes, please reach out to the backend team leader first.
It is reported that the check-in/check-out feature is working as expected. Here is a demo video showing the check-in/check-out flow:

check-in/check-out demo video
Panopto Demo Video

To test this feature, you’ll need to combine PR #298 with the ShiftDetailsScreen.tsx file from main, since PR #298 is still in an open state.

Steps:

Check out PR #298

[uppalkrish]

This pull request is for frontend team but contains changes to backend code
please recreate a new pr and change frontend code only, for backend code changes please contact me on teams

[SanjayaGrg]

Thanks for the feedback @TeddyScript101 and @uppalkrish ,

I have fixed this by creating a new frontend-only branch and PR: #402

Changes in the new PR:

• removed all backend changes
• kept only the frontend updates
• recreated the check-in/check-out related frontend fixes there
• included the readable date/time formatting changes in the frontend only

Please review #402 instead of this closed PR.