feat: attendence func

Vandana reddy Balannagarirequested to merge
feat/attendence-func into develop

Overview

This MR implements doctor attendance tracking functionality in the admin dashboard. It allows administrators to record doctor login and logout timestamps during medical camps and automatically updates doctor availability based on attendance activity.

Previously, newly added doctors were incorrectly displayed as "Available" even when they had not logged into the medical camp. This change ensures doctor availability reflects real-time attendance using login and logout timestamps returned from the backend.

What does this MR do and why?

Previously the Manage Doctors page determined doctor availability using a default availability field. This caused incorrect UI behavior:

  • Newly added doctors appeared as Available even though they had never logged in.
  • The Login button was disabled incorrectly.
  • The Logout button was enabled even when the doctor had not logged in.

This MR fixes the issue by deriving availability strictly from attendance timestamps returned by the backend.

Approach:

Doctor availability is calculated using:

const isLoggedIn = doctor.login_time && !doctor.logout_time;

Behavior:

login_time = null, logout_time = null → Status: Not Available → Login enabled → Logout disabled
login_time exists, logout_time = null → Status: Available → Login disabled → Logout enabled
login_time exists, logout_time exists → Status: Not Available → Login enabled → Logout disabled

This ensures UI state always reflects actual doctor attendance.

Changes Made

Files Modified:

  • src/pages/ManageDoctorsPage.tsx
  • src/pages/admin/StaffAttendancePage.tsx
  • src/components/AttendanceMarker.tsx
  • src/components/QRScanner.tsx
  • src/lib/api.ts
  • src/types/api.ts

Localization Updates:

  • src/locales/en/translations.json
  • src/locales/hi/translations.json
  • src/locales/te/translations.json

Tests Added / Updated:

  • tests/pages/ManageDoctorsPage.attendance.test.tsx
  • tests/components/AttendanceMarker.exit-mode.test.ts
  • tests/components/QRScanner.exit-mode.test.tsx
  • tests/lib/api.test.ts
  • tests/pages/AttendanceMarker.test.tsx
  • tests/unit/components/StaffAttendancePage.test.tsx

Other Changes:

  • Updated CHANGELOG.md

Technical Details

Root Cause:

Doctor availability was previously derived from a default availability value rather than actual attendance timestamps, which caused incorrect UI states for newly added doctors.

Solution:

Availability is now determined by login_time and logout_time values returned from the backend attendance API.

Frontend logic ensures:

  • New doctors start as Not Available
  • Login activates Available status
  • Logout resets the doctor to Not Available

Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 💥 Breaking change
  • 📝 Documentation update
  • 🎨 UI/UX improvement
  • ♻️ Refactor
  • ⚡ Performance improvement
  • 🧪 Test update
  • 🔧 Configuration change
  • 🚨 Security fix

Related Issues / References

Related to doctor attendance tracking for medical camps.

Screenshots or Screen Recordings

Before After
Newly added doctor shown as Available Newly added doctor shown as Not Available
Login button disabled Login button enabled
Logout button enabled incorrectly Logout button enabled only after login

after updated screen shorts

Screenshot_from_2026-04-15_22-56-46 Screenshot_from_2026-04-15_22-56-56 Screenshot_from_2026-04-15_22-59-09 Screenshot_from_2026-04-15_23-00-08 Screenshot_from_2026-04-15_23-00-25 Screenshot_from_2026-04-15_23-01-41 Screenshot_from_2026-04-17_15-55-07

How to Set Up and Validate Locally

  1. Checkout this branch:

git checkout feat/attendence-func

  1. Install dependencies:

bun install

  1. Configure environment variables if needed:

VITE_SERVER_URL=http://localhost:8000

  1. Start development server:

bun dev

  1. Navigate to:

http://localhost:5173/admin/manage-doctors

  1. Validate the following scenarios:
  • Add a new doctor
  • Verify doctor appears as Not Available
  • Click Login
  • Verify doctor becomes Available
  • Click Logout
  • Verify doctor returns to Not Available
  • added logout buttons in staff attendence for coordinator and admin

Testing Done

  • Manual testing completed
  • Unit tests added/updated

Test Cases Covered:

Scenario Expected Result Status
New doctor created Status = Not Available ✅
Doctor login Status becomes Available ✅
Doctor logout Status returns to Not Available ✅

Code Quality Checklist

Code Standards

  • Code follows project conventions
  • No console.log or debug statements
  • No unused imports or variables
  • i18n supported translations
  • TypeScript types defined correctly
  • ESLint and Prettier checks pass

React Best Practices

  • Components follow single responsibility
  • Hooks follow rules of hooks
  • Proper state management used

API & Data Fetching

  • API types defined in src/types/api.ts
  • API calls handled through existing service layer
  • Loading and error states handled properly

Error Handling

  • Errors handled gracefully
  • User-friendly error messages shown

Documentation

  • CHANGELOG.md updated

Known Limitations / Technical Debt

Currently doctor attendance depends on backend attendance API responses. If the backend does not return login_time or logout_time correctly, the UI state may not reflect accurate availability.

Additional Notes

This feature integrates with existing medical camp attendance flows and does not modify backend contracts. Volunteer QR attendance functionality remains unchanged.

closes #312 (closed)

Edited by Vandana reddy Balannagari

Merge request reports