BonardaHR Frontend Overview
Welcome to the BonardaHR Frontend developer documentation. BonardaHR is a modern, enterprise-grade Human Resource Management System (HRMS) Single Page Application (SPA) built using React 19, TypeScript, Vite 7, and Tailwind CSS 4.
Purpose & Scope​
The BonardaHR frontend delivers a unified portal for employees, managers, HR administrators, and system admins. It provides:
- Employee Directory & Lifecycle: Complete profiles, dynamic sections, bulk CSV import, HiBob sync, and interactive D3 organization chart visualization.
- Attendance & Timesheets: Real-time clock-in/clock-out, weekly timesheet submission, manager review/approval workflows, and configurable attendance policies.
- Time Off & Balances: Multi-policy leave management, balance tracking, holiday-aware date selection, team calendar views, and balance adjustment audits.
- Document Management & E-Sign: Company & employee document libraries, SharePoint integration, in-browser PDF preview (
react-pdf), and digital signature canvases. - Automated Workflows: Multi-step visual workflow builders, triggers, and approval chains.
- Task Management & Feedback: Team task boards/lists, 1-on-1s, and 360 performance feedback cycles.
- RBAC & Administration: Granular permission guards, customizable role definitions, site & calendar configurations, and support impersonation modes.
Technology Stack​
| Layer / Concern | Technology | Purpose |
|---|---|---|
| Framework & Language | React (TypeScript) | Core UI framework and strict type safety |
| Build & Dev Server | Vite | Ultra-fast HMR and optimized production bundles |
| Styling | Tailwind CSS | Modern utility-first styling with @theme variables |
| Routing | React Router | Declarative data routing, layouts, and route guards |
| Server State | TanStack React Query | Server state caching, background invalidation, optimistic updates |
| Forms & Validation | React Hook Form + Zod | High-performance uncontrolled forms with strict schema validation |
| HTTP Client | Axios | Interceptor-based API client with auth and impersonation headers |
| Authentication | Microsoft Authentication Library for React | Microsoft Entra ID (Azure AD) SSO and dev login fallback |
| Visualizations | D3, Recharts | Hierarchical org charts and analytics reporting |
| Calendars & Timelines | FullCalendar, React Calendar Timeline | Interactive team attendance and time-off schedules |
| Icons & Feedback | Lucide React, Solar Icons, Sonner | UI iconography and toast notifications |
| Testing | Vitest, Testing Library | Fast unit and integration testing suite |
Source Tree Structure​
frontend/
├── public/ # Static assets (favicons, manifest)
├── src/
│ ├── api/ # Global Axios client & API error utilities
│ │ └── apiClient.ts # Interceptors for Auth & Impersonation
│ ├── assets/ # SVGs, brand logos, custom Poppins & Bricolage fonts
│ ├── config/ # Runtime 12-factor configuration (runtimeConfig.ts)
│ ├── features/ # Domain-specific feature modules
│ │ ├── admin/ # RBAC, departments, custom profile sections, sites, calendars
│ │ ├── attendance/ # Timesheets, clock in/out, attendance policies
│ │ ├── auth/ # Login, Azure MSAL, ProtectedRoute, PermissionGuards
│ │ ├── dashboard/ # Role-based dashboard widgets and metrics
│ │ ├── documents/ # Document repository, SharePoint browser, PDF preview
│ │ ├── employees/ # Directory, profiles, D3 Org Chart, bulk import
│ │ ├── esign/ # Electronic signature requests & canvas
│ │ ├── feedback/ # 360 feedback templates and reviews
│ │ ├── impersonation/ # Admin impersonation context & audit
│ │ ├── notifications/ # Notification center & alerts
│ │ ├── onboarding/ # Onboarding workflows & checklists
│ │ ├── reports/ # HR analytics & data export
│ │ ├── search/ # Global search modal
│ │ ├── tasks/ # Task boards and assignments
│ │ ├── timeoff/ # Leave requests, balance cards, team calendar
│ │ └── workflows/ # Multi-step workflow template builder
│ ├── routes/ # AppRoutes.tsx (createBrowserRouter layout)
│ ├── shared/ # Reusable UI components, hooks, constants, utilities
│ │ ├── components/ # UI kit (Modal, Stepper, DataTable, FormFields)
│ │ ├── constants/ # Permissions, colors, country codes
│ │ ├── hooks/ # useMediaQuery, useDebouncedValue
│ │ └── utils/ # getApiErrorMessage, dateUtils, capitalize
│ ├── App.tsx # Root Provider hierarchy
│ ├── index.css # Tailwind 4 theme & custom fonts
│ └── main.tsx # Application entry point
├── Dockerfile # Multi-stage production build (Node 22 + Nginx)
├── docker-entrypoint.sh # Dynamic envsubst script for runtime configuration
├── env.template.js # Runtime environment variable template
└── vite.config.ts # Vite build & proxy settings