How darshankgithub/avicorex-hrms-ui works
UpsatirsHR is a Next.js frontend for an HR SaaS product. Users enter through login, establish an authenticated session, and use a role-aware dashboard and domain pages for employee, attendance, leave, payroll, recruitment, and other HR tasks. Those pages use a shared API URL/fetch layer to communicate with the backend. Shared shell, navigation, and permission components support the experience. The README describes the product focus; several domain routes are represented by their tree paths, but their implementation details and individual API calls were not sampled.
Main entry points: AuthContext.tsx Auth session · usePermissions.ts Permission hook · apiBase.ts API URL and fetch · Breadcrumbs.tsx Breadcrumb navigation
Components 23
Access and shell
- Login page
app/login/page.tsx - Login form
components/auth/LoginForm.tsx - Auth shell
components/auth/AuthShell.tsx - Auth session
components/auth/AuthContext.tsx - Role permissions
components/auth/rolePermissions.ts - Permission hook
components/auth/usePermissions.ts - Protected shell
components/shell/ProtectedShell.tsx - Dashboard
app/dashboard/page.tsx
People operations
- Employee records
app/employees/page.tsx - Recruitment
app/recruitment/page.tsx - Employee lifecycle
app/lifecycle/page.tsx - Organization structure
app/organization/hierarchy/page.tsx
Employee worklife
- Attendance
app/attendance/page.tsx - Leave management
app/leaves/page.tsx - Payroll
app/payroll/page.tsx - Performance
app/performance/page.tsx - Helpdesk
app/helpdesk/page.tsx - Employee services
app/services/page.tsx
Shared frontend services
- API URL and fetch
lib/apiBase.ts - Breadcrumb navigation
components/navigation/Breadcrumbs.tsx - Employee ID hook
components/auth/useEmployeeId.ts
Other components
- HR user
- UpsatirsHR backend
Connections 43
- HR user → Login page: signs in
README.md - Login page → Auth shell: renders
app/login/page.tsx - Login page → Login form: renders
app/login/page.tsx - Login form → Auth session: authenticates
- Auth session → API URL and fetch: builds auth requests
components/auth/AuthContext.tsx - Permission hook → Auth session: reads session
components/auth/usePermissions.ts - Permission hook → Role permissions: resolves role
components/auth/usePermissions.ts - Permission hook → API URL and fetch: fetches permissions
components/auth/usePermissions.ts - Protected shell → Auth session: guards access
- Dashboard → Auth session: reads session
app/dashboard/page.tsx - Dashboard → API URL and fetch: fetches dashboard data
app/dashboard/page.tsx - Employee records → Auth session: reads session
app/employees/page.tsx - Employee records → Permission hook: checks permissions
app/employees/page.tsx - Employee records → Breadcrumb navigation: renders
app/employees/page.tsx - Employee records → API URL and fetch: requests employee data
app/employees/page.tsx - Recruitment → Auth session: reads session
app/recruitment/page.tsx - Recruitment → Permission hook: checks permissions
app/recruitment/page.tsx - Recruitment → Breadcrumb navigation: renders
app/recruitment/page.tsx - Employee lifecycle → Auth session: reads session
app/lifecycle/page.tsx - Employee lifecycle → Permission hook: checks permissions
app/lifecycle/page.tsx - Employee lifecycle → Breadcrumb navigation: renders
app/lifecycle/page.tsx - Organization structure → Auth session: reads session
app/organization/hierarchy/page.tsx - Organization structure → Breadcrumb navigation: renders
app/organization/hierarchy/page.tsx - Attendance → Auth session: reads session
app/attendance/page.tsx - Attendance → Employee ID hook: gets employee ID
app/attendance/page.tsx - Attendance → Permission hook: checks permissions
app/attendance/page.tsx - Attendance → API URL and fetch: requests attendance data
app/attendance/page.tsx - Leave management → Auth session: reads session
app/leaves/page.tsx - Leave management → Employee ID hook: gets employee ID
app/leaves/page.tsx - Leave management → Permission hook: checks permissions
app/leaves/page.tsx - Leave management → API URL and fetch: requests leave data
app/leaves/page.tsx - Payroll → Auth session: reads session
app/payroll/page.tsx - Payroll → Permission hook: checks permissions
app/payroll/page.tsx - Payroll → Breadcrumb navigation: renders
app/payroll/page.tsx - Performance → Auth session: reads session
app/performance/page.tsx - Performance → Permission hook: checks permissions
app/performance/page.tsx - Performance → Breadcrumb navigation: renders
app/performance/page.tsx - Helpdesk → Auth session: reads session
app/helpdesk/page.tsx - Helpdesk → Permission hook: checks permissions
app/helpdesk/page.tsx - Helpdesk → Employee ID hook: gets employee ID
app/helpdesk/page.tsx - Employee services → Auth session: reads session
app/services/page.tsx - Employee services → Permission hook: checks permissions
app/services/page.tsx - API URL and fetch → UpsatirsHR backend: sends requests
lib/apiBase.ts