Dentolize · HR Module Walkthrough
On this pageBusiness viewTechnical view

Mobile Parity Port

Business view

The HR module isn't web-only. The clinic-mobile app (React Native / Expo) gets a full HR surface so managers and staff can work from their phones:

  • A live Today board, payroll runs with per-line detail and processing, an

employee profile with the master-record editor, salary and salary components, loans & advances with repayments, payslips, and self-service income & leave.

  • Leave requests and approvals (with the same coverage warning), and the

same payroll settings (tenure leave, overtime, GOSI, end-of-service, WPS, WhatsApp).

Everything is permission-gated exactly as on the web. This is the main subject of PR #353's diff — the new screens and the GraphQL operations that back them are all net-new mobile code.

Four small gaps remain versus the web (all disclosed in the PR, none touching ledger correctness):

  1. No date-clearing in the HR record form — a once-set date can't be blanked

on mobile.

  1. Loan repayment has no date picker — it dates to today.
  2. No post-upload expiry editing — a document's expiry is set at upload only.
  3. Manager "assign leave" is web-only — mobile creates leave for the current

user only.

Technical view

All paths under packages/clinic-mobile/src.

  • Entry tiles in components/dashboard/More/More.js (permission-gated):

viewSalaryHub → SalaryHub / HrOverview / HrToday / HrCommissionReport; viewOwnSalary → MyIncome; always → MyLeave; approveLeave||manageHr → LeaveApprovals; manageSalaryHub → EmployeeLoans / HrCommissionPolicies; manageHr → LeaveTypes / Holidays.

  • Screens registered in components/dashboard/More/MoreStack.js:131.

Screens (components/dashboard/More/salaryHub/ and .../leave/)

  • SalaryHubScreen.js — 3-tab hub (People / Payroll / Settings), incl. the full

payroll-settings editor (mode, pay day, tenure leave, overtime, GOSI, EOS, WPS, WhatsApp).

  • HrTodayScreen.js — live board, polls every 60s.
  • EmployeeProfileScreen.js — multi-tab profile (Overview with masked

identity/banking, Attendance, Leave, Payslips, Commission, Documents).

  • EmployeeMasterFormScreen.js — HR master form; sends only changed fields.
  • EmployeeSalaryScreen.js + SalaryComponentsSection.js — salary profile

and recurring allowances/deductions.

  • PayrollRunDetailScreen.js — per-line net (editable), confirm / process /

cancel.

  • PayslipList.js, MyIncomeScreen.js — payslips and self-service income.
  • EmployeeLoansScreen.js + NewEmployeeLoanScreen.js — loans with

pause/resume/cancel and repayment.

  • EmployeeDocumentsTab.js — document upload with optional expiry.
  • leave/LeaveApprovalsScreen.js, leave/NewLeaveRequestScreen.js — approve

(with leaveCoverage) and self-request.

GraphQL surface

New operations under shared/store/queries/actions/hr/ and shared/store/mutations/actions/hr/ (a large set: departments, positions, employeeLoans, hrToday, teamRoster, timesheet, orgChart, hrAnalytics, leaveCoverage, leaveLiabilityReport, punctualityByBranch, payrollCostTrend, vacancies, jobApplications, checklistTemplates, employeeChecklists, trainingRecords, disciplinaryWarnings, performanceReviews/goals, benefitPlans/ enrollments, jobGrades, schedulePeriods, salaryComponents, eosSummary; and mutations for every upsert/delete/acknowledge/enroll plus loans, EOS payment, and overtime approval). Payroll operations under .../payroll/ (runs, settings, profiles, wpsFile, doctor payouts) are consumed by the salary hub.

The data layer defines more operations than the shipped mobile screens surface (org/benefits/checklists/performance/timesheet/analytics have queries but thinner mobile UI) — the store runs slightly ahead of the mobile UI. The web Talent Hub is the fuller home for those.

Confirmed parity gaps (verified in code)

  1. common/controlledFields/DateField.js handleChangeDate (:29) only ever calls

onChange(date) and never clears — no null affordance in EmployeeMasterFormScreen.js.

  1. EmployeeLoansScreen.js repay modal (:191) sends {id, amount, treasury} with

no date → server dates it today.

  1. EmployeeDocumentsTab.js sets expiryDate only during upload (:88); file rows

expose no edit control.

  1. NewLeaveRequestScreen.js builds a request for the current user only; there is no

assignLeave in mobile source — it's a web-only manager flow.

These are UX gaps to schedule, not correctness defects.