WorkForce_Hub

As a frontend developer, implement the Navbar section for the Dashboard page. This component (Navbar.css) uses useState for `scrolled` and `drawerOpen` states, a passive scroll event listener that sets `data-scrolled` on the nav root, and a mobile drawer with overlay. Includes NAV_ITEMS array linking to /Landing and /Dashboard routes, a WorkForce_Hub SVG logo mark, desktop center links, a 'Get Started' CTA with lucide ArrowRight icon linking to /Login, and a hamburger Menu/X button toggle. The mobile drawer locks body scroll via `document.body.style.overflow` when open and uses `useCallback` for `closeDrawer`. Note: This component likely already exists from the Landing page — reuse or verify it matches Dashboard requirements.

As a Backend Developer, implement employee management API endpoints. Build GET /employees (list with search, filter by department/role/status, pagination), POST /employees (create new employee with validation), PUT /employees/{id} (update employee details), DELETE /employees/{id} (soft delete/offboarding), and GET /employees/{id}/profile (full profile with employment history). Include role-based access control: HR can CRUD all employees; Managers can view their direct reports only; Employees can view their own profile. Implement CSV export endpoint GET /employees/export. Database model: employees table with user_id, department_id, manager_id, position, salary, join_date, status fields.

As a Backend Developer, implement department management API endpoints. Build GET /departments (list all departments with headcount, manager info), POST /departments (create department — HR/SuperAdmin only), PUT /departments/{id} (update department name, manager, budget, status), DELETE /departments/{id} (soft delete with validation that no active employees remain), and GET /departments/{id}/members (list members of a specific department). Enforce role-based access: only HR and SuperAdmin can create/update/delete departments. Database model: departments table with id, name, manager_id, budget, description, is_active, created_at.

As a Backend Developer, implement SuperAdmin account management API endpoints. Build GET /accounts (list all HR and Manager accounts with role, status, created date — SuperAdmin only), POST /accounts (SuperAdmin creates HR or Manager account with auto-generated password), PUT /accounts/{id} (update account status, role — SuperAdmin only), DELETE /accounts/{id} (SuperAdmin deletes HR/Manager account, cascades appropriately), and GET /accounts/{id} (single account detail). Include endpoint for regenerating credentials POST /accounts/{id}/reset-password. Enforce that only SuperAdmin role can access any /accounts endpoint. The users table backs this: id, name, email, password_hash, role, is_active.

As a Backend Developer, implement audit logging API endpoints. Build GET /audit-logs (paginated list of audit entries filtered by user, action type, resource, status, date range — SuperAdmin only), GET /audit-logs/{id} (full audit log detail including before/after state diff), and POST /audit-logs (internal endpoint for logging actions, or implement as middleware/decorator). Implement an audit logging middleware/decorator that automatically captures user, action, resource, resource_id, status, IP address, user agent, before/after state for all mutating API calls. Store in audit_logs table: id, timestamp, user_id, action, resource, resource_id, status, ip, user_agent, details_json. Implement Redis-backed export queue for large log exports.

As a Backend Developer, implement system settings API endpoints. Build GET /settings (retrieve current org-wide settings: timezone, date_format, currency, language — SuperAdmin only), PUT /settings (update organization-wide settings — SuperAdmin only), GET /settings/profile (current user's profile data), PUT /settings/profile (update current user's own profile: name, bio, contact info), PUT /settings/password (change password with current password verification), GET /settings/sessions (list active sessions for current user from Redis), DELETE /settings/sessions/{session_id} (revoke a specific session), and DELETE /settings/sessions (revoke all sessions except current — logout everywhere). Use Redis to store active session metadata keyed by user_id.

As a Backend Developer, implement FastAPI JWT authentication middleware and role-based access control (RBAC) system. Build: (1) JWT token creation/validation utilities using python-jose with RS256 or HS256 algorithm, access token (15min) and refresh token (7 days) generation; (2) get_current_user FastAPI dependency that extracts and validates JWT from Authorization header; (3) RBAC decorators/dependencies require_roles([...]) that raise 403 for insufficient permissions; (4) Redis integration for refresh token storage and blacklisting on logout; (5) CORS middleware configuration for Next.js frontend origin; (6) Rate limiting middleware on /auth endpoints using Redis; (7) Request logging middleware that feeds the audit log system. This is a cross-cutting concern that all backend API tasks depend on.

As a Frontend Developer, implement a centralized API client layer for the Next.js frontend. Build: (1) Axios or fetch-based API client configured with base URL from environment variables; (2) Request interceptor that attaches JWT access token from localStorage/cookie to Authorization header; (3) Response interceptor that catches 401 responses, calls POST /auth/refresh to get new access token, retries the failed request, and redirects to login if refresh also fails; (4) TypeScript types/interfaces matching all backend response schemas (Employee, Leave, Attendance, Payroll, Task, PerformanceReview, Announcement, AuditLog, Department, Account); (5) API service modules for each resource (authApi, employeesApi, leavesApi, attendanceApi, payrollApi, tasksApi, reviewsApi, announcementsApi, reportsApi, settingsApi, accountsApi, auditLogsApi); (6) React Query (or SWR) setup for server state management with appropriate cache keys and invalidation logic. This is a cross-cutting concern consumed by all frontend pages.

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. Uses framer-motion `motion` and `AnimatePresence` for animated sidebar transitions. Manages `mobileOpen` and `userCardExpanded` states via useState. Includes PRIMARY_NAV (Dashboard, Team, Leaves, Tasks, Reports with badge '3') and SECONDARY_NAV (Announcements with 'New' badge, Attendance, Profile, Reviews) arrays with lucide icons. Features a mobile toggle button (Menu/X) with `aria-expanded`, a backdrop overlay, body scroll lock on mobile open, auto-close on resize to desktop via resize event listener, an expandable user card with ChevronDown toggle, and a logout handler (`window.location.href = '/Login'`). Brand header shows WorkForce_Hub with LayoutDashboard icon.

As a frontend developer, implement the Footer section for the Dashboard page. Static functional component using Footer.css with a `ftr-glow` decorative div and `ftr-inner` layout container. Renders four link column arrays: productLinks (Dashboard, Employees, Payroll, Analytics), resourceLinks (Reports, Announcements, Tasks, Attendance), companyLinks (Landing, Team, Departments, Settings), and legalLinks (Audit Logs, Profile, Leaves, Reviews). Brand section includes WorkForce_Hub logo anchor with `ftr-logo-icon` span and tagline paragraph. Social icons row uses react-icons FaLinkedinIn, FaTwitter, FaGithub, FaYoutube from `react-icons/fa`. Note: This component likely already exists from the Landing page — reuse or verify it matches Dashboard route hrefs.

As a frontend developer, implement the ProfileHeader section for the Profile page. This section renders a cursor-reactive 3D-tilt avatar card using Framer Motion `useMotionValue` and `useSpring` (stiffness: 180, damping: 18) on a `motion.div` with `rotateX`/`rotateY` spring values driven by `handleMouseMove` and `handleMouseLeave` handlers. The avatar card includes `ph-avatar-ring`, `ph-avatar-glow`, and a `ph-avatar-fallback` div displaying initials 'SC'. Below the card: a status badge with `ph-status-dot` (Active), an `<h1>` for 'Sarah Chen', a role `<p>`, a metadata row with `Building2` and `Mail` Lucide icons showing department and email, and a `Pencil`-icon Edit Profile button. Import from `framer-motion`, `lucide-react`, and `../styles/ProfileHeader.css`. Note: Navbar component may already exist from the Dashboard page.

As a frontend developer, implement the ProfileDetails section for the Profile page. This is a complex tabbed details panel with: a `TAB_CONFIG` array of 5 tabs (personal, contact, employment, emergency, bank) each with a Lucide icon (`User`, `Mail`, `Briefcase`, `Heart`, `CreditCard`); `useState` for active tab; `PROFILE_DATA` object containing field arrays for each tab category (personal: firstName/lastName/dob/gender/maritalStatus/nationality, contact: email/phone/address/city/postalCode/country, employment: employeeId/department/position/manager/employmentType/dateJoined/status, emergency: contactName/relationship/phone/altPhone, bank: bankName/accountHolder/accountNumber/bankCode/branchCode/swift). Implements inline field editing with `Edit2`, `Check`, `X` icons and `useState`/`useRef` for edit state per field. Includes a Three.js ambient particle background canvas using `THREE` (imported from 'three') initialized with `useRef` and `useEffect` for the canvas setup and animation loop. Uses `motion` and `AnimatePresence` from `framer-motion` for tab transition animations. Import `useMemo` for memoized field rendering. Import from `../styles/ProfileDetails.css`.

As a frontend developer, implement the ProfileActions section for the Profile page. This section provides a save/cancel action bar and tertiary action links, driven by `useState` for `saving`, `toast`, and `exiting` states. `handleSave` simulates an 800ms async save via `setTimeout`, toggling `saving` then calling `showToast('Profile changes saved successfully.', 'success')`. `handleCancel` triggers a 'Changes discarded.' info toast. The `tertiaryActions` array defines three link-style actions: 'Download Profile' (`Download` icon, info toast), 'Change Password' (`KeyRound` icon, navigates to `/Settings`), and 'Delete Account' (`Trash2` icon, destructive styling, error toast requiring admin confirmation). `showToast` uses a `TOAST_DURATION_MS = 3000` timer with a 320ms pre-exit `exiting` flag for animation. Toast is rendered via `AnimatePresence` from `framer-motion` with `CheckCircle` and `AlertTriangle` icons for success/error states. Tertiary buttons use `motion.a` with `whileTap={{ scale: 0.97 }}` spring transitions; primary buttons use `motion.button` with `whileHover={{ scale: 1.03 }}`. Layout uses `pa-grid` split into `pa-secondary-actions` (left) and `pa-primary-actions` (right). Import `useCallback` for memoized handlers and `../styles/ProfileActions.css`.

As a frontend developer, implement the PayslipsHeader section for the Payslips page. Build the `psh-root` section with a breadcrumb nav linking back to `/Dashboard` with a separator and current page label. Render the title row containing a custom inline SVG icon (`psh-icon-svg` with a receipt/payslip motif: rect, paths, circles, and a horizontal line) wrapped in `psh-icon-wrap`, alongside an `h1` with `psh-title` and an accented span `psh-title-accent` around 'Payslips'. Include a `psh-desc` paragraph describing payslip viewing/downloading. Render a `psh-stats` row with two stat items using `psh-stat-dot--paid` (value: 8) and `psh-stat-dot--pending` (value: 1) colored dot indicators with labels and values. Apply all `psh-*` CSS classes from `PayslipsHeader.css`. Note: Navbar/Sidebar components already exist from Dashboard page.

As a frontend developer, implement the PayslipsFilters section for the Payslips page. Build the `pf-root` container with four controlled filter controls separated by `pf-divider` elements. Implement a Year dropdown (`pf-dropdown-wrapper pf-year`) using a `<select>` with `useState` over YEARS array `['2026','2025','2024','2023','2022']` with a `ChevronDown` icon from lucide-react. Implement a Month dropdown (`pf-month`) with `useState` over full MONTHS array (12 entries) with `ChevronDown`. Implement a Status dropdown (`pf-status`) with `useState` over STATUSES `['All Status','Paid','Pending']` with `ChevronDown`. Implement a search input (`pf-search-wrapper`) with a `Search` icon prefix, a controlled text input with placeholder 'Search payslips by ID, name, or amount...', and a conditional clear button (using `X` icon from lucide-react) rendered only when `search` state is non-empty. Also import `FilePlus` from lucide-react for potential add action. Apply all `pf-*` CSS classes from `PayslipsFilters.css`.

As a frontend developer, implement the PayslipsList section for the Payslips page. Define a static PAYSLIPS array of 12 entries with fields `{id, period, gross, net, status}` covering May 2026 through June 2025, with one 'pending' entry (id 8, October 2025). Use `useState` for `currentPage` and implement client-side pagination with `ITEMS_PER_PAGE = 8`, computing `totalPages`, `startIdx`, and slicing `currentSlips`. Render payslip cards using `framer-motion`'s `motion` and `AnimatePresence` with `cardVariants` (`hidden: {opacity:0, y:12}`, `visible` with staggered `delay: i * 0.04` and `duration: 0.35`, `exit: {opacity:0, y:-8}`). Each card shows period, gross/net amounts with `DollarSign`/`FileText` icons, a status badge, an Eye button triggering `onViewPayslip(slip)` prop callback, and a Download button implementing a placeholder `handleDownload` that creates a Blob text file and triggers browser download via `URL.createObjectURL`. Render a pagination control with `ChevronLeft`/`ChevronRight` buttons and a `renderPageNumbers` function that handles ellipsis (`'...'`) for > 5 pages. Import `Calendar`, `Eye`, `Download`, `ChevronLeft`, `ChevronRight`, `FileText`, `DollarSign` from lucide-react. Apply all CSS classes from `PayslipsList.css`.

As a frontend developer, implement the LeavesHeader section for the Leaves page. This section renders a `<section className="lh-root">` containing a breadcrumb nav built from a static `breadcrumb` array using `React.Fragment` with `ChevronRight` separators and `Home` icon from lucide-react. The header row includes an `<h1>` titled 'Leave Management', a subtitle paragraph, and two action buttons: a primary 'Apply Leave' anchor linking to `/Leaves` with a `Plus` icon, and a secondary 'View Balance' button with a `BarChart3` icon. A decorative `lh-divider` div closes the section. Styles are in `LeavesHeader.css`. Note: Navbar component may already exist from the Dashboard page. Depends on Dashboard page tasks to establish page-level chain.

As a frontend developer, implement the TasksHeader section for the Tasks page. This section renders a `<section className='th-root'>` containing a two-column layout: a left side with a breadcrumb nav (Dashboard → Tasks using `React.Fragment` and conditional rendering for the active crumb) and a title row with an `<h1>My Tasks</h1>` heading plus an animated badge showing '5 active' with a `th-badge-dot--active` dot indicator. The right side includes a view-mode toggle group using `useState('kanban')` with two `<button>` elements using `LayoutGrid` and `List` icons from lucide-react, toggling `th-toggle-btn--active` class and `aria-pressed` attributes, plus a `<button className='th-add-btn'>` with a `Plus` icon for quick task creation. Note: Navbar component may already exist from the Dashboard page (task fcf60416-33d7-4e87-b3b4-93bd0766eba2).

As a frontend developer, implement the TasksFilters section for the Tasks page. This section uses `useState` for `search`, `status`, `priority`, `assignee`, `dateFrom`, `dateTo`, and `viewMode` ('kanban'), plus `openDropdown` state to manage which custom dropdown is open. It uses `useRef` for `statusRef`, `priorityRef`, and `assigneeRef` with a `useEffect` + `document.addEventListener('mousedown', ...)` pattern for click-outside dismissal via a `closeDropdown` callback. The UI renders a `Search` icon-prefixed text input with an `X` clear button, three custom dropdown triggers (Status, Priority, Assignee) using `ChevronDown` and colored `tf-dot--*` status/priority indicators from `STATUS_OPTIONS`, `PRIORITY_OPTIONS`, and `ASSIGNEE_OPTIONS` arrays, a date-range input pair (From/To), a view-mode toggle with `LayoutGrid`/`List` icons, an active filter count badge, and a `RotateCcw` reset button. `handleClearAll` resets all filter state. `selectOption` closes the dropdown on selection.

As a frontend developer, implement the TasksBoard section for the Tasks page. This section uses `useState` for task data initialized from `INITIAL_TASKS` (11 tasks across todo/in-progress/review/done statuses with priority, assignee, assigneeInitials, avatarClass, dueDate, daysLeft fields), `useCallback` and `useMemo` for performance optimization. It renders a kanban board layout with `COLUMNS` array (todo, in-progress, review, done) each with `tb-col-dot--*` color classes and `statusColor` hex values. Task cards display title, `id` (T-XXXX), priority badge, assignee avatar (using `avatarClass` like `tb-avatar--a1`), due date with `Calendar` icon, and `daysLeft` with `Clock` icon including overdue styling. Uses `framer-motion`'s `motion` and `AnimatePresence` for card enter/exit animations. Includes `LayoutGrid`/`List` view toggle, `ChevronLeft`/`ChevronRight` pagination controls, and a `ClipboardList` empty-state illustration. Supports both kanban board and list view modes.

As a frontend developer, implement the AttendanceHeader section for the Attendance page. This section renders a breadcrumb nav (Dashboard → Attendance using ChevronRight from lucide-react), an h1 title with ath-title-accent span, a dynamic subtitle that switches between real-time and historical copy based on isCurrentPeriod state, and a role badge with ath-role-dot. It manages selectedMonth (0-indexed), selectedYear, and dropdownOpen state via useState. Navigation controls use ChevronLeft/ChevronRight buttons calling goToPrevMonth/goToNextMonth which handle year boundary wrapping. A month dropdown (dropdownRef with outside-click detection via useEffect mousedown listener) renders MONTHS array options and a yearOptions array spanning CURRENT_YEAR (2026) down 2 years. The decorative ath-glow div sits behind the ath-inner container. Depends on Dashboard Navbar task to establish page chain.

As a frontend developer, implement the AnnouncementsHeader section for the Announcements page. This section renders a `<section className="ah-root">` containing a two-column layout (`ah-inner`): a left block with a breadcrumb nav (using `ChevronRight` icon, mapping over a `BREADCRUMB` array of 3 items — Home, Communication, Announcements — with `React.Fragment` keys and conditional rendering for current vs. linked crumbs), an `ah-title-row` with a `Megaphone` icon box, an `<h1>` with accent span, and an `ah-count-badge` showing a dot and '24 active'; and a right block with role-based CTA — when `USER_ROLE === 'hr'` renders an `ah-create-btn` anchor with `Plus` icon, otherwise renders an `ah-role-pill` with `Eye` icon and role label. Wire up the simulated `USER_ROLE` constant ('hr' | 'manager' | 'employee'). Apply `AnnouncementsHeader.css` (5024 chars). Note: Navbar component may already exist from the Dashboard page.

As a frontend developer, implement the ReviewsHeader section for the Reviews page. Build the `ReviewsHeader` component using framer-motion with `containerVariants` (staggerChildren: 0.12, delayChildren: 0.15) and `cardVariants` (opacity 0→1, y 20→0, duration 0.45) for animated stat cards. Render a breadcrumb nav with `ChevronRight` icon linking to `/Dashboard` → `Performance Reviews`. Implement the title row with `rvh-title-accent` span styling. Map over the `stats` array (Total Reviews: 248, Pending Approval: 12, Completed: 236) rendering `rvh-stat-card` divs with dynamic `accentClass` variants (`rvh-stat-card--total`, `--pending`, `--completed`). Use `whileInView` with `viewport={{ once: true, amount: 0.3 }}` for scroll-triggered animation. Note: Navbar component may already exist from the Dashboard page.

As a frontend developer, implement the EmployeesHeader section for the Employees page. This section renders a full-width header with decorative background glows (eh-decor-glow, eh-decor-glow-left), a breadcrumb nav linking Dashboard → Employees, a page title block ('Employees') with subtitle, and an 'Add Employee' button with framer-motion whileHover (scale: 1.02) and whileTap (scale: 0.98) animations. Uses containerVariants with staggerChildren (0.08) and delayChildren (0.05), and itemVariants with y: 12 → 0 entrance animations. Includes a controlled search input (useState searchValue) with a Search icon and X clear button from lucide-react. Displays three stat cards using the STATS array (total: 284, active: 247, inactive: 37) each with a lucide-react icon (Users, UserCheck, UserX) and colorClass variant. All child elements animate via itemVariants. Note: Navbar/Sidebar components likely already exist from the Dashboard page.

As a frontend developer, implement the EmployeesFilter section for the Employees page. This section renders a collapsible sidebar filter panel using framer-motion AnimatePresence and animated height/opacity transitions (duration: 0.25, ease [0.4, 0, 0.2, 1]) for each group. Uses useState for filters (department: [], status: [], employment_type: [], dateFrom, dateTo), collapsed state (DEFAULT_COLLAPSED object keyed by group id), and mobileOpen toggle. Includes three FILTER_GROUPS: Department (8 options with counts), Status (4 options), and Employment Type (4 options), each rendered as checkbox groups via renderCheckboxGroup using Check icon from lucide-react. Active filter count computed via useMemo across all filter arrays and date fields. Features a mobile open/close toggle with SlidersHorizontal icon, a 'Clear All' button (X icon) that resets all filters, ChevronDown rotation animation per group collapse state, and a date range picker (dateFrom/dateTo inputs) in a separate date_range group.

As a frontend developer, implement the EmployeesTable section for the Employees page. This section renders a sortable, selectable data table of 12 hardcoded EMPLOYEES records (name, email, department, position, status, hireDate). Uses useState for sortKey, sortDir ('asc'/'desc'), selected (Set), expandedMobile (for mobile accordion rows), and loading. handleSort toggles sort direction when the same key is clicked or resets to 'asc' on new key. sortedEmployees computed via useMemo using [...EMPLOYEES].sort(). Columns include a select-all checkbox, Name, Email, Department, Position, Status badge, Hire Date, and an Actions column with Eye (view), Pencil (edit), UserMinus (offboard) icons from lucide-react. Table headers use ArrowUpDown icon and ChevronDown for active sort indicators. Accepts currentPage and pageSize props for slice-based pagination. Includes framer-motion AnimatePresence for row entrance/exit animations, mobile-responsive expanded row toggling via expandedMobile state, and an empty-state UI with Users icon when no rows match.

As a frontend developer, implement the PayrollPageHero section for the Payroll page. This hero section features a Three.js ParticleField background with two particle systems: 60 primary indigo particles (color 0x6366F1, opacity 0.45) and 30 secondary emerald particles (color 0x10B981, opacity 0.3), both using AdditiveBlending. The hero renders animated tagline words ('Streamline payroll processing with automated calculations, compliance & instant payouts.') using framer-motion word-by-word reveal animations via useAnimation and useInView hooks. Three CTA action buttons are rendered using the actions array: 'Run Payroll' (primary variant, Zap icon), 'Generate Report' (secondary variant, FileText icon), and 'Export' (accent variant, Download icon). Imports THREE from 'three', motion/useAnimation/useInView from 'framer-motion', and icons Play/FileText/Download/ChevronRight/Zap from lucide-react. The Navbar component from Dashboard should already exist (task fcf60416-33d7-4e87-b3b4-93bd0766eba2).

As a frontend developer, implement the PayrollMetricsPanel section for the Payroll page. This section renders a 4-card metrics grid using framer-motion staggered card animations (cardVariants: hidden opacity 0 y:24, visible with delay i*0.1 and ease [0.25,0.46,0.45,0.94]) with whileInView and viewport once:true margin:-40px. Each card renders: an icon (DollarSign, Users, Clock, CalendarCheck from lucide-react) with colored icon classes (pmp-card-icon--indigo, --emerald, --amber, --sky), a label, a primary value with optional sub-text (e.g. '/ 148 total'), a trend footer with TrendingUp/TrendingDown/Minus icons mapped via trendIcon object, and a status badge (on-track, pending, overdue variants). Data covers Total Payroll '$284,650.00', Processed Employees '142', Pending Approvals '6', and Last Run Date 'Jun 1, 2026'. The section header shows a 'pmp-label' reading 'Payroll Summary'.

As a frontend developer, implement the PayrollProcessing section for the Payroll page. This section features a tabbed payroll cycle management interface with 4 tabs (TABS array: pending, inprogress, completed, failed) controlled by useState activeTab. It includes a search input (useState searchQuery) that filters PAYROLL_CYCLES data (12 cycle records with fields id, start, end, employees, status, amount) via useMemo filteredCycles. Pagination is implemented with PAGE_SIZE=6, useState currentPage, computed totalPages and safePage, and paginatedCycles slice. Each cycle row renders columns for cycle ID (e.g. 'PR-2026-0625'), date range, employee count, status badge, and amount. Action icons include Eye, CheckCircle, XCircle, Download, RotateCw, ClipboardList from lucide-react. Tab switching resets currentPage via handleTabChange. Also includes a Filter button (Filter icon) and search icon (Search) in the toolbar.

As a frontend developer, implement the PayslipsHistory section for the Payroll page. This is the most complex section, featuring a full payslip management table with 9+ employee records (PAYSLIPS_DATA array with fields: id, employeeName, monthYear, gross, net, status, department, position, payrollPeriod, paymentMethod, taxDeducted, deductions, bankAccount). State is managed via useState for search query, current page, and selected payslip for detail view. useMemo computes filteredPayslips from the search query. Pagination uses ChevronsLeft/ChevronLeft/ChevronRight/ChevronsRight icons from lucide-react for first/prev/next/last page controls. Each row includes a FileText icon, employee name, department, position, monthYear, gross/net amounts, status badge (paid/pending/failed), and Download action button. AnimatePresence from framer-motion wraps row transitions. A payslip detail drawer/modal renders full breakdown (payrollPeriod, paymentMethod, taxDeducted, deductions, bankAccount) on row selection.

As a frontend developer, implement the PayrollReportsSection for the Payroll page. This section integrates Chart.js via react-chartjs-2 with ChartJS.register for CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, and ArcElement. It renders 4 report cards (REPORTS array: payroll_summary, tax_withholding, deduction_analysis, yearend_report) each with an icon (FileText, Receipt, PieChartIcon, CalendarCheck), name, description, iconClass (prr-card-icon--payroll/tax/deduction/yearend), and embedded Bar chart data. Framer-motion useMotionValue, useSpring, and useTransform hooks power hover tilt/parallax card interactions via useRef and useCallback. Each card has an ArrowRight CTA and a Loader2 loading state. The active/selected report renders an expanded bar chart with chartLabel and chartData containing labels and multi-dataset configurations (salaries+bonuses for payroll_summary, categorical breakdowns for others). A BarChart3 and Zap icon appear in the section header. Imports useState, useRef, useCallback, useMemo from React.

As a frontend developer, implement the DepartmentsHeader section for the Departments page. This section renders a `<section className='dh-root'>` containing: (1) a breadcrumb `<nav>` with an anchor linking to /Dashboard labeled 'WorkForce_Hub', a separator span, and a current-page span 'Departments'; (2) a title row `<div className='dh-title-row'>` with a desktop-visible SVG building icon (22×22, stroke-based, paths for building outline, door, windows), a heading block with `<h1 className='dh-title'>` containing a `<span className='dh-title-accent'>Departments</span>`, and a subtitle paragraph describing organizational management; (3) a quick stat row `<div className='dh-meta'>` displaying a colored dot indicator and bold count '14 active departments'; (4) a decorative bottom divider. Import DepartmentsHeader.css for all styling. Note: Navbar component may already exist from Dashboard page.

As a frontend developer, implement the ReportsHeader section for the Reports page. Build the `rh-root` section with a decorative `rh-glow` backdrop div and `rh-inner` container. Implement the breadcrumb `<nav>` with an anchor to `/Dashboard`, a `ChevronRight` lucide icon (size 14) as separator with `rh-breadcrumb-separator` class, and a `<span>` for the current 'Reports' page. Build the heading row with an `<h1>` using `rh-title` class containing a `<span className='rh-title-accent'>Reports</span>` accent and '& Analytics' text, plus a real-time badge with `rh-badge` class containing an animated `rh-badge-dot` span. Add the `rh-accent-line` decorative divider and the `rh-description` paragraph describing the analytics scope. Apply all styles from `ReportsHeader.css`. Note: Navbar component may already exist from the Dashboard page (task fcf60416-33d7-4e87-b3b4-93bd0766eba2).

As a frontend developer, implement the TeamHero section for the Team page. This section features a full 3D office scene built with @react-three/fiber and @react-three/drei, including: interactive PortalNode meshes (using Float, meshStandardMaterial with emissive glow, pointLight on hover/active) representing department filters, an OfficeFloor wireframe plane grid, and ambient Particles system (60 floating points animated via useFrame). The scene uses useRef, useState (hovered, isActive), and useFrame for per-frame lerp scaling and rotation animations. Above the canvas, render a heading with department filter chips (FILTER_CHIPS array: All Members, Engineering, HR, Design, Management, Finance, Operations) using motion and AnimatePresence from framer-motion for chip selection transitions. Includes a Search input with the Search icon from lucide-react and a SlidersHorizontal filter toggle button. The Canvas is wrapped in Suspense. Depends on Navbar from Dashboard page (fcf60416-33d7-4e87-b3b4-93bd0766eba2).

As a frontend developer, implement the TeamMembers section for the Team page. This section renders a paginated, filterable member directory using a static ALL_MEMBERS array of 12+ members (Sarah Chen, Marcus Rivera, Aisha Patel, James Okonkwo, Elena Torres, David Kim, Priya Sharma, Leo Bianchi, Fatima Al-Rashid, Ryan Nakamura, Camila Rojas, Omar Hassan, etc.) with fields: id, name, role, department, email, phone, avatar (null), initials, status (active/away/offline). Uses useState for search query and pagination, useMemo for filtered/paginated member slices, and useCallback for event handlers. Member cards display initials-based avatars, status badges, Mail/Phone/Building2/Users icons from lucide-react, and are animated with motion and AnimatePresence from framer-motion. Pagination controls use ChevronLeft/ChevronRight icons. Independent of TeamHero — can be built in parallel.

As a frontend developer, implement the Departments section for the Team page. This section renders an expandable department list using a DEPARTMENTS array of 6 departments (Engineering, Human Resources, Sales, Operations, Finance, Marketing) each with: id, name, head, members count, icon (Code/Heart/TrendingUp/Shield/DollarSign/Megaphone from lucide-react), accentKey, description, and subTeams array. Uses useState, useRef, useEffect, and useCallback for accordion expand/collapse behavior. Includes a THREE.js canvas background (imported as * as THREE) for ambient visual effects. AnimatePresence and motion from framer-motion animate the collapsible subTeam panels and ChevronDown rotation. Each department card shows the department head, member count via Users icon, and a list of subTeams with lead names. The CSS is notably large (34799 chars) indicating rich accent-color theming per department. Independent of TeamHero and TeamMembers — can be built in parallel.

As a frontend developer, implement the TeamStats section for the Team page. This section renders a 4-card stats grid using a static stats array: Total Team Size (48, emerald, TrendingUp), Active Members (42, amber, TrendingUp), Departments (6, indigo, Minus), Open Roles (8, red, TrendingDown). Each StatCard uses motion with whileInView, viewport once, and staggered delay (index * 0.08) for scroll-reveal animations. Cards display a colored icon container, numeric value, label, subtitle, and a trend badge with TrendingUp/TrendingDown/Minus icons from lucide-react and directional color classes (ts-trend--up/down/neutral). Background includes two decorative blob divs (ts-blob--1, ts-blob--2). Pure presentational component — no useState or API calls. Independent of all other Team sections — can be built in parallel.

As a frontend developer, implement the Roles section for the Team page. This section renders an expandable roles directory using a ROLES array of 8+ role definitions (Engineering Manager, Software Engineer, HR Manager, HR Specialist, Design Lead, Product Designer, Data Analyst, etc.) each with: title, department, description, and memberCount. Uses useState for tracking expanded role items with accordion toggle. ROLE_ICONS maps role titles to lucide-react icons (Code, Briefcase, Users, Palette, BarChart3, TrendingUp, Calculator, Headphones, Shield). ICON_CLASSES maps role titles to CSS class strings (rl-role-icon-engineer, rl-role-icon-manager, rl-role-icon-hr, rl-role-icon-designer, etc.) for per-role color theming. AnimatePresence and motion from framer-motion animate the collapsible description panels; ChevronRight/ChevronDown icons indicate open/closed state. Independent of all other Team sections — can be built in parallel.

As a frontend developer, implement the AccountsHero section for the Accounts page. This section renders a full-width hero with a subtle `ah-glow` accent background div, a breadcrumb nav (Dashboard → Accounts) using `ChevronRight` from lucide-react, a Super Admin role badge with an animated `ah-badge-dot`, and a top row containing an `ah-heading-group` (h1 with `ah-title-accent` span) and a `Create Account` CTA button wired to the `onOpenCreateModal` prop using `Plus` icon. Below the heading, a stats strip (`ah-stats`) displays three stat cards for Super Admin (Shield icon, value: 2), HR Accounts (Users icon, value: 8), and Managers (UserCheck icon, value: 24), each separated by `ah-stat-divider` spans. The component receives `onOpenCreateModal` as a prop and uses `ah-si-super`, `ah-si-hr`, `ah-si-manager` modifier classes for icon wrap colors. Apply all styles from `AccountsHero.css`.

As a frontend developer, implement the AccountsTable section for the Accounts page. This section manages a static `ACCOUNTS_DATA` array of 15 accounts (fields: id, name, email, role, status, created) with `ROWS_PER_PAGE = 6`. State hooks include `searchTerm`, `roleFilter`, `statusFilter`, `sortField` (default: 'created'), `sortDir` (default: 'desc'), `currentPage`, `deleteTargetId`, and `toast`. Filtering is done via `useMemo` combining search and role/status dropdowns. Sorting is toggled via `handleSort` using `useCallback`. The table renders rows with `motion` from framer-motion and `AnimatePresence` for row enter/exit animations. Each row includes name, email, a role badge, an active/inactive status pill, a formatted created date, and Edit (`Edit3`) / Delete (`Trash2`) action icons from lucide-react. A summary bar shows counts using `Users`, `UserCheck`, `UserX`, `Shield` icons. Pagination controls use `ChevronLeft`/`ChevronRight`. A `SlidersHorizontal` filter icon toggles the filter panel. A `Search` icon is part of the search input. The component accepts an `onDeleteRequest` prop. Apply all styles from `AccountsTable.css`.

As a frontend developer, implement the CreateAccountModal section for the Accounts page. The modal conditionally renders based on the `isOpen` prop and calls `onClose` to dismiss. State hooks: `fullName`, `email`, `role`, `department`, `phone`, `password` (initialized via `generatePassword()` which builds a 16-char password from a mixed charset), `copied`, `errors`, `success`, and `submitting`. The ROLES select offers '', 'hr', 'manager', 'employee' options; DEPARTMENTS select offers 8 optional department options. `handleCopy` uses `navigator.clipboard.writeText` with a fallback `document.execCommand('copy')` and sets `copied` for 2s. `handleRegenerate` calls `generatePassword()` and resets `copied`. `validate` checks required fields (fullName, email, role) and optional phone format via regex. `handleSubmit` prevents default, runs validation, sets `submitting` during a simulated async operation, then shows `success` state. Icons used: `X` (close), `UserPlus` (modal header), `Copy`/`Check` (password copy toggle), `AlertCircle` (field errors), `ShieldCheck`, `Briefcase`. Apply all styles from `CreateAccountModal.css`.

As a frontend developer, implement the DeleteConfirmation modal section for the Accounts page. The component accepts `isOpen`, `account`, `onClose`, and `onConfirm` props, returning null when either is falsy. State hooks: `confirmed` and `animating`. A `useEffect` resets both to false whenever `isOpen` or `account` changes. `handleDelete` sets `animating: true`, then after 650ms sets `confirmed: true` and `animating: false` to trigger the shatter/success transition. `handleOverlayClick` only fires when clicking the overlay itself and respects the `animating` guard. The component defines two framer-motion variant objects: `shatterVariants` (idle/exit with scale, rotateX, blur filter transitions) and `fragmentVariants` (custom per-index staggered y/x/scale/opacity exit animations with 0.04s delay per fragment index `i`). A `ROLE_BADGE_CLASS` map applies CSS modifier classes (`dc-ap-badge--hr`, `dc-ap-badge--manager`, `dc-ap-badge--employee`) based on `account.role`. The confirmed success view renders a `motion.div` with `initial={{ scale: 0, rotate: -60 }}` animate, green ambient pulse, and a `CheckCircle2` icon. Icons used: `AlertTriangle`, `ShieldAlert`, `CheckCircle2`, `X`. Uses `motion` and `AnimatePresence` from framer-motion. Apply all styles from `DeleteConfirmation.css`.

As a frontend developer, implement the AnalyticsHeader section for the Analytics page. This section renders a page header with a Three.js AccentCanvas component featuring three interwoven TorusGeometry rings in brand colors (#6366f1, #10b981, #f59e0b) with opacity animation, plus 40 ambient BufferGeometry particles. The header includes a date range dropdown (DATE_RANGES: 7d/30d/90d/ytd/custom) driven by useState, a team filter dropdown (FILTER_OPTIONS: All Teams/Engineering/Marketing/Sales/HR), a Download button with lucide-react Download icon, and a Filter toggle with X/Filter icons. Uses framer-motion for entrance animations, lucide-react Calendar/ChevronDown icons, and a useRef/useEffect for the Three.js WebGLRenderer lifecycle (alpha:true, antialias:true, pixelRatio clamped to 2). Note: Navbar component may already exist from Dashboard page (fcf60416).

As a frontend developer, implement the AnalyticsKPICards section for the Analytics page. This section renders four KPI cards (Total Employees: 1,274; Active Leaves: 43; Payroll This Month: $489K; System Uptime: 99.9%) using KPI_CARDS config with lucide-react icons (Users, CalendarCheck, DollarSign, Activity). Each card includes a renderSparkline() SVG function that computes min/max/range from SPARKLINE_DATA arrays and draws an SVG polyline path with a linearGradient fill and a terminal dot circle. Cards animate in via framer-motion containerVariants (staggerChildren: 0.1) and cardVariants (opacity 0→1, y 24→0, duration 0.5s). TrendingUp/TrendingDown icons from lucide-react indicate change direction with color-coded percentage labels.

As a frontend developer, implement the AnalyticsCharts section for the Analytics page. This section registers Chart.js modules (CategoryScale, LinearScale, PointElement, LineElement, BarElement, Title, Tooltip, Legend, Filler) and renders two charts side by side: (1) a Line chart for headcount over 12 months (Jul–Jun) using headcountData with indigo border (#6366F1), rgba fill, tension 0.35, and custom pointBorderColor '#0F0F0F'; (2) a grouped Bar chart for leave types (Sick Leave #EF4444, Casual Leave #F59E0B, Annual Leave #10B981) using leaveData with borderRadius:4, borderSkipped:false. Both charts share chartGridOptions with dark tooltip styling (rgba(20,20,20,0.96) background, cornerRadius:10) and grid lines at rgba(255,255,255,0.06). TrendingUp/TrendingDown lucide icons appear in chart headers. Uses useRef and useEffect for chart lifecycle management.

As a frontend developer, implement the AnalyticsEmployeeMetrics section for the Analytics page. This section includes two custom SVG chart components: (1) AttendanceRing — a circular SVG progress ring using computed circumference (radius=64, strokeWidth=8, normalizedRadius=60) showing 94% attendance rate with strokeDashoffset animation (1.2s cubic-bezier) and a centered label overlay; (2) LeaveDonut — a custom SVG donut chart (outerR=70, innerR=44, cx/cy=85) computing arc paths for three segments (Approved 62%, Pending 18%, Used 20%) with CSS variable colors (--secondary, --accent, --highlight). State is managed with useState and useEffect for mount-time animations. useRef is used for DOM references. Both charts include legends with color swatches and percentage values.

As a frontend developer, implement the AnalyticsDepartmentBreakdown section for the Analytics page. This section uses DEPARTMENT_DATA (9 departments: Engineering, Product, Design, Marketing, Sales, HR, Finance, Operations, Customer Support) with headcount, openPositions, avgSalary, and color fields. It features: (1) a sortable table with useState for sortKey (name/headcount/openPositions/avgSalary) and sortDir (asc/desc), useMemo for sorted data, and hoveredRow state; (2) a horizontal Bar chart (indexAxis:'y') from react-chartjs-2 with custom tooltip callbacks showing '${ctx.raw} employees', dark styling, and getGradientColors() for bar colors; (3) open positions badges with getOpenBadgeClass() returning 'urgent'/'active'/'low' CSS classes; (4) formatSalary() formatting values as '$XXXk'. framer-motion animates row entries. SORT_KEYS drives column header click handlers.

As a frontend developer, implement the AnalyticsPayrollSummary section for the Analytics page. This section renders a payroll overview with: (1) CUMULATIVE totals computed by summing PAYROLL_DATA (salaries, benefits, bonuses, deductions) per month across MONTHS array; (2) budget tracking with MONTHLY_BUDGET=218000, IS_OVER_BUDGET flag, BUDGET_PCT, MOM_CHANGE and MOM_PCT derived values; (3) a stacked area Line chart (react-chartjs-2) using CHART_ORDER=['deductions','bonuses','benefits','salaries'] with fill:true, tension:0.4, per-dataset CHART_COLORS with rgba backgrounds; (4) a chartKey state reset via useEffect to force chart re-mount; (5) BREAKDOWN_ITEMS list rendered with color swatches using CSS classes (aps-breakdown-color--salaries etc.); (6) PENDING_PAYSLIPS=23 badge with lucide-react FileText/AlertTriangle icons; (7) fmtCurrency() formatting. Uses framer-motion for section entrance, DollarSign/TrendingUp/TrendingDown icons.

As a frontend developer, implement the AnalyticsEngagementTrends section for the Analytics page. This section features: (1) a Three.js WebGL background (useRef/useEffect lifecycle) integrated alongside chart content; (2) TIME_RANGES=['Week','Month','Quarter','Year'] tab switcher using useState, driving SATISFACTION_DATA and COMPLETION_DATA objects each with labels/values arrays per range; (3) two Line charts (react-chartjs-2) rendered via useMemo-derived chartData, with chartOptions() factory accepting color and isStep params — dark tooltip styling (rgba(15,15,15,0.92)), no legend, grid rgba(255,255,255,0.05); (4) ENGAGEMENT_METRICS array (views:12847, clicks:4321, shares:892, recipients:3840) rendered as metric cards with lucide-react icons (Eye, MousePointerClick, Share2, Users) and direction-based change badges; (5) framer-motion motion + AnimatePresence for tab transition animations. Chart.js modules registered: CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Filler, Legend.

As a frontend developer, implement the SettingsSidebar section for the Settings page. Build the sidebar navigation component using SETTINGS_CATEGORIES and DANGER_CATEGORIES arrays, each with custom inline SVG icons (profile/user, lock/security, bell/notifications, sun/appearance, gear/system, and danger zone variants). Implement useState for activeCategory tracking, useCallback for click handlers, and render nav items with active state styling. The sidebar should visually differentiate the danger zone category from standard categories. Note: Navbar component may already exist from the Dashboard page (fcf60416-33d7-4e87-b3b4-93bd0766eba2).

As a frontend developer, implement the AuditLogsHeader section for the Audit Logs page. This section renders a `<section className="alh-root">` with a decorative dot cluster (`alh-dots`), a heading group containing an icon box with `Clock` (lucide-react, size 20), an `<h1>` title 'Audit Logs', and a pulsing 'Live' badge with `alh-badge-dot`. Below the title row is a subtitle paragraph describing real-time audit monitoring. On the right side, two action buttons are rendered: a secondary 'Refresh' button that uses `useState(false)` for `refreshing` state and triggers `handleRefresh()` which sets refreshing to true for 800ms — during which the `RotateCw` icon (size 16) receives class `alh-spin` and inline animation style `alh-spin 0.6s linear`; and a primary 'Export Logs' button with `FileDown` icon (size 16). A decorative `alh-accent-line` gradient sits at the bottom. Note: Navbar/Sidebar components from Dashboard page may already exist.

As a frontend developer, implement the AuditLogsFilters section for the Audit Logs page. This section uses `framer-motion` (`motion`, `AnimatePresence`) with `dropdownVariants` (hidden: opacity 0, y -8, scale 0.96; visible: opacity 1, y 0, scale 1) for animated dropdowns. Three filter datasets are defined as constants: `USER_FILTERS` (6 options with role-specific icons — `Shield`, `Briefcase`, `User`, `Activity` — and colored dot values), `ACTION_FILTERS` (10 action types including login/logout/create/update/delete/approve/reject/export/config_change), and `STATUS_FILTERS` (5 statuses with color dots: success #10B981, failure #EF4444, warning #F59E0B, pending #9CA3AF). A reusable `FilterDropdown` sub-component manages `open` state, `search` state, and a `ref` for click-outside detection via `useEffect` + `document.addEventListener('mousedown')`. It uses `useMemo` for `selected` option and `filtered` options (search filtering). `handleSelect` via `useCallback` closes the dropdown on selection. Dropdowns support `showDots` prop for colored dot indicators and `hasActiveFilter` styling when value !== 'all'. Also includes a search input with `Search` icon and a reset-filters button with `RotateCcw` icon. Uses hooks: `useState`, `useRef`, `useEffect`, `useCallback`, `useMemo`.

As a frontend developer, implement the AuditLogsTable section for the Audit Logs page. This section defines `ACTION_ICON_MAP` mapping action types (view/create/update/delete/login/logout/export) to lucide-react icons (`Eye`, `Plus`, `Pencil`, `Trash2`, `LogIn`, `LogOut`, `Download`) with CSS class names for color coding. `AUDIT_DATA` is a static array of audit log entries each containing: `id` (AUD-XXXX format), `timestamp`, `user` object (`name`, `role`, `initials`), `action`/`actionLabel`, `resource`/`resourceId`, `status`/`statusLabel`, `ip`, and a `details` object with `before`, `after`, `reason`, `sessionId`, `userAgent`, and `changes` fields. The table uses `useState` for expandable row state and `useMemo` for filtered/sorted data. Rows are expandable to reveal the details panel. Uses `framer-motion` `motion` and `AnimatePresence` for row expand/collapse animations. Columns include: ID, Timestamp, User (with initials avatar), Action (with icon from ACTION_ICON_MAP), Resource, Status badge, IP address, and an expand chevron (`ChevronDown`) button. Status badges are color-coded (success/failure/warning). Empty state renders a `Search` icon with `ShieldAlert` for no-results. Sample data includes 4+ entries (AUD-2406-001 through AUD-2406-004+) with realistic HR audit scenarios.

As a Backend Developer, implement leave management API endpoints. Build GET /leaves (list leaves filtered by employee/status/date range, role-scoped: Employees see own, Managers see team, HR sees all), POST /leaves (employee submits leave application with type, start_date, end_date, reason), PUT /leaves/{id}/approve (Manager/HR approves, sets approved_by), PUT /leaves/{id}/reject (Manager/HR rejects with optional reason), and GET /leaves/balance/{employee_id} (returns available/used/pending leave days by type). Implement leave balance calculation logic for casual, sick, and earned leave types. Database model: leaves table with id, employee_id, type, start_date, end_date, reason, status, approved_by.

As a Backend Developer, implement attendance tracking API endpoints. Build GET /attendance (list attendance records filtered by employee_id, date range, department, status — role-scoped), POST /attendance (clock-in/clock-out entry creation or update), GET /attendance/summary/{employee_id} (monthly summary with present/absent/late/leave counts), and GET /attendance/team (Manager views full team attendance for current/past month). Implement status logic: present if clocked in before threshold, late if after threshold, absent if no record. Database model: attendance table with id, employee_id, date, clock_in, clock_out, status fields.

As a Backend Developer, implement payroll management API endpoints. Build GET /payroll (list payroll records filtered by month, department, employee — HR/SuperAdmin only), POST /payroll (HR runs payroll: accepts salary components basic/HRA/bonus/deductions per employee, computes net_salary = basic + HRA + bonus - deductions, bulk processes all employees), GET /payroll/{id}/payslip (returns full payslip data for a specific payroll record including breakdowns), GET /payroll/employee/{id} (employee views their own payroll history), and GET /payroll/export (export payroll report as CSV). Database model: payroll table with id, employee_id, month, basic, HRA, bonus, deductions, net_salary, generated_at.

As a Backend Developer, implement task management API endpoints. Build GET /tasks (list tasks role-scoped: Employees see assigned tasks, Managers see tasks they assigned or for their team, HR/Admin see all), POST /tasks (Manager/HR creates task with title, description, assigned_to, due_date, priority, status), PUT /tasks/{id} (update task fields — Employees can only update status), DELETE /tasks/{id} (Manager/Admin deletes task), and GET /tasks/analytics (completion rate, status distribution by assignee/team). Database model: tasks table with id, title, description, assigned_to, assigned_by, due_date, priority, status.

As a Backend Developer, implement performance review API endpoints. Build GET /performance (list reviews — Employees see own reviews, Managers see reviews they wrote, HR/Admin see all), POST /performance (Manager creates review with employee_id, quarter, year, ratings_json containing per-criteria scores 1-5, comments), PUT /performance/{id} (update review — Manager who created it, or HR), GET /performance/{id} (full review detail including ratings breakdown), and GET /performance/employee/{id}/history (employee's full review archive). Database model: performance_reviews table with id, employee_id, reviewer_id, quarter, year, ratings_json, comments, status.

As a Backend Developer, implement announcements API endpoints. Build GET /announcements (list announcements visible to requesting user — filtered by department if applicable, paginated), POST /announcements (HR creates announcement with title, content, optional department_id for targeted announcements), PUT /announcements/{id} (HR edits announcement), DELETE /announcements/{id} (HR/SuperAdmin deletes announcement), and GET /announcements/{id} (full announcement detail). Role access: HR/SuperAdmin can POST/PUT/DELETE; all authenticated users can GET announcements for their department or company-wide. Database model: announcements table with id, title, content, department_id (nullable for company-wide), created_by, created_at.

As a Frontend Developer, implement the Login page for WorkForce_Hub. Build a smooth animated login form using Framer Motion with: (1) Email and password input fields with React Hook Form validation; (2) Role-based login with auto-redirect after successful auth (Super Admin → /Accounts, HR → /Employees, Manager → /Team, Employee → /Profile); (3) Animated form entrance with staggered field reveals; (4) Loading state on submit button with Loader2 spinner; (5) Error toast/inline message on invalid credentials (401 response); (6) 'Forgot password' link flow; (7) JWT token storage in httpOnly cookie or localStorage with proper security considerations; (8) Remember me toggle. Calls POST /auth/login API. Integrates with the AuthGuard to redirect already-authenticated users away from the login page. Uses the brand color system and dark-mode-default styling consistent with the rest of the app.

As a frontend developer, implement the DashboardHeader section for the Dashboard page. Uses useState for `currentRole` (defaulting to 'Employee') and `cursorPos` ({x:50,y:50}), plus a `useRef` on the action button for mouse-tracking gradient effect via `handleMouseMove` and `handleMouseLeave` callbacks. ROLE_CONFIGS object defines four roles (Employee, HR, Manager, SuperAdmin) each with badge, title, action label, actionIcon (Plus from lucide), actionHref, and subtitle strings. Renders a breadcrumb nav using BREADCRUMB_SEGMENTS with ChevronRight separators and a dynamic role badge span. Title renders as `{config.title} Dashboard` with a role-highlighted span. The CTA button href changes per role (e.g., /Leaves for Employee, /Tasks for Manager). DashboardHeader.css provides layout styles.

As a frontend developer, implement the PayslipsDetails section for the Payslips page. This is a slide-in/modal detail panel driven by `selectedPayslip` and `onClose` props, rendered via `framer-motion`'s `AnimatePresence`. Define a `PAYSLIP_DETAILS.default` object containing employee info (Sarah Chen, EMP-0421, Engineering), 8 deductions (Federal Income Tax, State Income Tax, Social Security, Medicare, Health Insurance, Dental & Vision, 401k, Life Insurance) with types `'tax'`, `'benefits'`, `'insurance'`, and 2 additional income entries (Performance Bonus, Overtime). Implement `buildPayslip(slip)` which parses gross/net from formatted strings like '₹68,425.00' via regex, computes a `ratio = gross / base.grossSalary`, and scales all deduction/income amounts proportionally. Implement `getDeductionIcon(type)` mapping `{tax: Percent, benefits: Gift, insurance: ShieldCheck}` with `Receipt` as fallback, using lucide-react icons `X, Printer, Download, FileText, Building2, ShieldCheck, Umbrella, Wallet, Percent, Receipt, Gift, CreditCard, Banknote, User, Hash, Landmark, ChevronRight, EyeOff`. Render sections for: header with close (`X`) button, print (`Printer`) and download (`Download`) actions; employee info block; earnings breakdown; deductions list with typed icons; additional income; bank details with masked account/routing numbers using `EyeOff`; and a net pay summary. Apply all CSS classes from `PayslipsDetails.css`. This panel integrates with `PayslipsList` via the `onViewPayslip` callback.

As a frontend developer, implement the LeavesSummary section for the Leaves page. This section uses `useState` for `viewMonth`, `viewYear`, and `refreshing` state, and `useMemo` to compute `calendarDays` via a `getCalendarDays(year, month)` helper that calculates padding days for previous/next months. It renders three stat cards from the `leaveDays` array (Available Days: 14, Used This Year: 8, Pending Requests: 2) each with a lucide icon (`CheckCircle2`, `Calendar`, `Clock`). A mini calendar is rendered with `ChevronLeft`/`ChevronRight` month navigation via `goToPrevMonth`/`goToNextMonth` handlers, highlighting today's date and marking `leaveDates` and `pendingDates` sets. A `RefreshCw` icon triggers `handleRefresh` which sets `refreshing` to true for 800ms. Styles are in `LeavesSummary.css`.

As a frontend developer, implement the LeavesList section for the Leaves page. This section uses `useState` for `statusFilter` (default 'all'), `dateFrom`, `dateTo`, `sortKey` (default 'from'), and `sortDir` (default 'desc'). It uses `useMemo` for filtered and sorted data derived from a static `LEAVE_DATA` array of 12 leave records. It renders a filterable, sortable table with columns for employee (with avatar initials via `getInitials()`), leave type, from/to dates formatted via `formatDate()`, duration, and status badge using `STATUS_CONFIG` map with classes `ll-badge-approved`, `ll-badge-pending`, `ll-badge-rejected`. Column header clicks call `toggleSort(key)` rendering `ChevronUp`/`ChevronDown` icons. Filter controls include a status dropdown, date range inputs, and a reset button (`X` icon) shown when `hasActiveFilters` is true. A `Filter` icon and `Calendar` icon are used in the filter bar. Styles are in `LeavesList.css`.

As a frontend developer, implement the LeavesApplyForm section for the Leaves page. This section manages a rich form with `useState` hooks for `form` (INITIAL_FORM with fields: leaveType, startDate, endDate, reason, attachment), `errors`, `touched`, `submitting`, and `success`. A `useRef` (`fileInputRef`) handles file input triggering. The form includes: a custom-styled `<select>` for leave type from `LEAVE_TYPES` array (8 options) with `ChevronDown` icon; date range pickers for start/end date with today as minimum; a textarea for reason with character count; and a file upload zone with drag-and-drop UI using `Upload`, `FileText`, and `X` icons. Field-level validation runs on blur via `handleBlur → validateField(field, value)` with rules for each field (e.g., startDate cannot be in the past, reason min 10 chars). Full form validation runs on submit via `validateForm()`. `submitting` state disables the submit button with a loading indicator. `success` state shows a `CheckCircle` confirmation panel. Error messages display inline using `AlertCircle` icon. Styles are in `LeavesApplyForm.css`.

As a frontend developer, implement the AttendanceFilters section for the Attendance page. This section renders five filter groups defined in the FILTER_GROUPS constant array: Department (Building2 icon, 7 options with hex color dots), Team (Users icon, 5 options), Status/employee_status (UserCheck icon, 4 options), Date Range (CalendarRange icon, 8 options including 'custom' for custom range), and Attendance (Clock icon, 5 status options using semantic color keys like 'present'/'absent'/'late'/'leave'). Each filter group renders as a dropdown using AnimatePresence and motion.div with a dropIn spring animation variant (stiffness: 420, damping: 28). Filter state is managed via useCallback and tracked per group key. A Filter icon header with active-filter count badge, a RotateCcw reset button, and ChevronDown indicators per group are included. Outside-click detection via useRef/useEffect closes open dropdowns. Parallel to AttendanceHeader — no inter-section dependency.

As a frontend developer, implement the AttendanceStats section for the Attendance page. This section renders a 4-card grid (as-grid) using the STAT_CARDS constant array containing: Present (UserCheck, 142/168, +3.2% TrendingUp, as-card--present), Absent (UserX, 8/168, +1.5% TrendingUp, as-card--absent), Late (Clock, 12/168, -0.8% TrendingDown, as-card--late), and On Leave (CalendarOff, 6/168, 0.0% Minus, as-card--leave). Each card is a motion.div with cardVariants (hidden: opacity 0 y:20, visible with staggered delay i*0.08s, duration 0.45s, cubic-ease) and whileHover y:-3 lift. Each card renders an as-card-icon, as-card-label, as-card-count, as-card-sub ('out of N employees'), and an as-card-trend div with dynamic class as-trend-up/down/neutral. Parallel to AttendanceFilters — no inter-section dependency.

As a frontend developer, implement the AttendanceCalendar section for the Attendance page. This section renders an interactive monthly calendar with CalendarDays icon header, ChevronLeft/ChevronRight month navigation updating selectedMonth/selectedYear state, and a WEEKDAYS header row ['Sun'...'Sat']. The generateCalendarDays(year, month) utility builds padding cells and weekday/weekend day objects via useMemo. MOCK_ATTENDANCE data object (keyed by ISO date strings like '2026-06-01') provides per-day status and an employees array with name, dept, and per-employee status. Clicking a day cell opens a detail modal/panel (AnimatePresence + motion.div) showing the employees list for that date with individual status badges. Day cells display a status dot color-coded by presence/late/absent. The X (lucide) button closes the detail view. All calendar grid transitions use framer-motion AnimatePresence for month-change slide animations. Parallel to AttendanceStats — no inter-section dependency.

As a frontend developer, implement the AttendanceTable section for the Attendance page. This section renders a sortable, paginated data table of ATTENDANCE_RECORDS (12 mock records) with columns: Name, Department, Date, In Time, Out Time, Duration, Status, and Actions. State includes sortKey, sortDir ('asc'/'desc'), and currentPage with PAGE_SIZE=8. handleSort toggles sort direction when the same column is clicked again. Dates are formatted via formatDate() using toLocaleDateString. Status badges use STATUS_LABELS map (present/absent/late/half_day/holiday) with per-status CSS classes. The Actions column renders Eye and Edit3 icon buttons (lucide-react). Rows animate in via AnimatePresence + motion.div. Column headers render ChevronUp/ChevronDown sort indicators (lucide-react). Pagination controls render previous/next page buttons and a page counter. A Users icon appears in the table empty-state. Parallel to AttendanceCalendar — no inter-section dependency.

As a frontend developer, implement the AnnouncementsFilters section for the Announcements page. This section uses `useState` for six pieces of state: `searchQuery`, `dateFrom`, `dateTo`, `department` (default 'All Departments'), `sortBy` (default 'newest'), `deptOpen`, and `sortOpen`. It uses `useRef` for `deptRef` and `sortRef` and a `useEffect` with `document.addEventListener('mousedown', handler)` to close dropdowns on outside click. A `useCallback`-wrapped `handleClear` resets all filters. `hasActiveFilters` is a derived boolean. The UI renders: a search input with `Search` icon, conditional `X` clear button, and controlled `value`/`onChange`; a date range row with `Calendar` icon and two `type='date'` inputs for `dateFrom` and `dateTo`; a custom department dropdown (`deptRef`, toggles `deptOpen`) rendering a list of 10 `DEPARTMENTS` with `Check` icon for selected item animated via `AnimatePresence`/`motion.div` from `framer-motion`; a sort dropdown (`sortRef`, toggles `sortOpen`) over 3 `SORT_OPTIONS` objects with value/label; and a conditional 'Clear Filters' button when `hasActiveFilters`. Apply `AnnouncementsFilters.css` (8867 chars).

As a frontend developer, implement the AnnouncementsList section for the Announcements page. This section uses `useState`, `useCallback`, `useRef`, and `useEffect` from React, and `motion` from `framer-motion` for animated card rendering. It renders a static `ANNOUNCEMENTS` array of 6 objects (each with `id`, `title`, `department`, `date`, `author`, `preview`), including announcements from HR, Executive, IT, Operations, Facilities departments. Each card displays: `Calendar` icon with formatted date, `User` icon with author name, department badge, announcement title, preview text (truncated), and a `ChevronRight` or `ArrowRight` icon CTA for 'Read More'. Cards use `motion.div` for entrance animations. The `Megaphone` icon is also imported for potential empty-state or header use. Apply `AnnouncementsList.css` (8027 chars). This section is independent of AnnouncementsFilters in terms of shared state in the current static implementation, but logically follows the filters section in the page layout.

As a frontend developer, implement the ReviewsFilterBar section for the Reviews page. Build the `ReviewsFilterBar` component with `useState` hooks for `search`, `role`, `statuses` (array), `dateFrom`, `dateTo`, `employeeName`, `openDropdown`, and `employeeOpen`. Implement `useRef` for `dropdownRef` and `employeeRef` with a `closeAllDropdowns` `useCallback` registered via `useEffect` on `mousedown` events for click-outside detection. Use a second `useEffect` to call `onFiltersChange` prop with all filter state whenever any filter changes. Render a search input with `Search` and `X` (clear) icons from lucide-react. Build role dropdown using `ROLE_OPTIONS` (All Roles, Manager, Employee) with `ChevronDown` toggle. Build multi-select status dropdown using `STATUS_OPTIONS` (Pending/AlertCircle, In Progress/Clock, Completed/CheckCircle) with colored dot indicators and `toggleStatus` handler. Include date range inputs (`dateFrom`, `dateTo`) with `Calendar` icon and employee name filter with `User` icon. Compute `activeFilterCount` across all filter fields and render active filter tags with individual remove handlers. Implement `clearAll` to reset all state. Accept `filteredCount` prop for display.

As a frontend developer, implement the ReviewsFormSection section for the Reviews page. Build the `ReviewsFormSection` component with `useState` hooks for `reviewee`, `ratings` (object keyed by criterion), `overallRating`, `feedback`, `reviewStart`, `reviewEnd`, `goals` (array, initialized with `INITIAL_GOALS`), `toast`, and `submitting`. Use `useRef` for `sliderRefs` (per-criterion) and `textareaRef`. Implement `useCallback` handlers: `handleRatingChange` (updates criterion score via slider), `handleGoalChange` (updates goal at index), `addGoal` (appends empty string), `removeGoal` (removes by index, min 1). Implement `insertFormatting` callback using `textareaRef.current.selectionStart/End` for rich text formatting in the feedback textarea. Render an employee selector dropdown from `EMPLOYEES` array (6 entries across Engineering, Design, Product, Analytics). Render the `CRITERIA` array (6 criteria: technical_skill, communication, teamwork, initiative, reliability, leadership) each with a range slider and score display. Render an overall rating row with `Star` icons (0-5, `overallRating` state). Include a `goals` list with dynamic add (`Plus` icon) and remove (`Trash2` icon) inputs. Include Save (`Save` icon) and Submit (`Send` icon) buttons with `submitting` loading state. Show `AnimatePresence` toast notification (`CheckCircle2`) on save/submit. Use `framer-motion` for form section entrance animation.

As a frontend developer, implement the EmployeesPagination section for the Employees page. This section renders a pagination control bar accepting currentPage, pageSize, onPageChange, and onPageSizeChange props. Uses a getPageNumbers utility that generates smart page number arrays with ellipsis ('...') placeholders for totalPages > 7, handling three cases: near start (≤4), near end (≥totalPages-3), and middle range. Page numbers computed via useMemo. Renders a 'Showing X–Y of Z employees' info block with epp-info-highlight spans, Previous/Next arrow buttons (ChevronLeft/ChevronRight from lucide-react) that disable at boundaries, numbered page buttons with epp-active class for the current page, ellipsis spans for '...' entries, and a PAGE_SIZE_OPTIONS select dropdown (5, 10, 20, 50) triggering onPageSizeChange. handlePrev/handleNext clamp within [1, totalPages]. All controls follow accessible aria-label and aria-current patterns.

As a frontend developer, implement the DepartmentsControls section for the Departments page. This section uses `useState` for `searchQuery`, `activeFilter`, `activeSort`, `filterOpen`, `sortOpen`, and `isStuck`; `useRef` for `filterRef` and `sortRef`; and `useCallback` for `handleClearSearch`, `handleFilterSelect`, and `handleSortSelect`. A sticky-detection `useEffect` dynamically inserts a sentinel `<div>` as the first child of `.dc-root` and uses `IntersectionObserver` to toggle `isStuck` state when the bar scrolls past its natural position. A second `useEffect` handles outside-click dismissal of both dropdowns via `document.addEventListener('mousedown', ...)`. Renders a filter dropdown (FILTER_OPTIONS: all/active/inactive with colored dot indicators) and a sort dropdown (SORT_OPTIONS: name-asc/desc, employees-desc/asc, recent) using `framer-motion` `AnimatePresence` for open/close animations. Icons from `lucide-react`: `Plus`, `Search`, `X`, `SlidersHorizontal`, `ArrowUpDown`, `ChevronDown`. The search input renders a clearable `X` button when `searchQuery` is non-empty. Import DepartmentsControls.css.

As a frontend developer, implement the DepartmentsTable section for the Departments page. Uses `useState` for `page` (current page index). Renders a paginated table from `DEPARTMENTS_DATA` (12 static department records: id, name, manager, employees, budget, status) with `ROWS_PER_PAGE = 8`. `COLUMNS` array defines five columns: Department Name, Manager, Employees, Budget, Status. Row animations use `framer-motion` custom `rowVariants` (`hidden`→`visible` with staggered delay `i * 0.04` and cubic-bezier easing, `exit` for row removal) wrapped in `AnimatePresence`. Each row includes `Pencil` and `Trash2` icon action buttons from `lucide-react` triggering `handleEdit` and `handleDelete` console callbacks (modal/confirmation integration stubs). Status column renders active/inactive badge styling. Pagination controls use `ChevronLeft`/`ChevronRight` from lucide-react with a `getPageNumbers()` helper that shows up to 5 visible page numbers with ellipsis condensing for larger sets. Empty state renders a `Building2` icon with a 'No departments found' message. Import DepartmentsTable.css.

As a frontend developer, implement the ReportsFilters section for the Reports page. Build a complex filter toolbar using `useState` for `reportType`, `department`, `datePreset`, `customStart`, `customEnd`, `searchQuery`, `openDropdown`, and `activeTags` state. Implement three custom dropdown components using `useRef` (reportRef, deptRef, dateRef) and a rootRef for outside-click detection via `useEffect` and `useCallback`. Render dropdown menus for Report Type (8 options from REPORT_TYPES array), Department (8 options from DEPARTMENTS array with colored dot indicators), and Date Range (5 presets from DATE_PRESETS plus conditional custom date inputs). Include a search input with `Search` lucide icon. Implement `getDateRange()` with switch-case for 7d/30d/quarter/ytd/custom presets and `formatDate`/`formatDateShort` helpers. Render active filter tags with `X` dismiss buttons. Implement Reset All (`RotateCcw` icon) and Apply Filters buttons. Animate dropdowns with `framer-motion` `AnimatePresence` and `motion.div`. Import `Calendar`, `Building2`, `FileText`, `Search`, `ChevronDown`, `Filter`, `RotateCcw`, `X` from lucide-react. Apply `ReportsFilters.css` styles.

As a frontend developer, implement the KeyMetrics section for the Reports page. Build the `km-root` section with a `km-glow` backdrop and `km-inner` container. Render a `motion.div` grid with `containerVariants` (staggerChildren: 0.1, delayChildren: 0.1) triggered by `whileInView` with `viewport={{ once: true, amount: 0.2 }}`. Map over 4 metric cards from the `metrics` array (Total Employees '1,284', Active Leaves '47', Payroll Processed '$2.4M', Attendance Rate '96.8%'), each wrapped in `motion.div` with `cardVariants` (opacity 0→1, y 24→0, duration 0.45, cubic-bezier ease). Each card has a `km-icon-box` with the metric's lucide icon (`Users`, `CalendarX`, `DollarSign`, `TrendingUp`) at size 22, `km-body` with label, value, and a trend span using `trendIcon()` helper that renders `TrendingUp`, `TrendingDown`, or `Minus` icons. Apply per-card accent classes: `km-card--employees`, `km-card--leaves`, `km-card--payroll`, `km-card--attendance`. Apply `KeyMetrics.css` styles.

As a frontend developer, implement the EmployeeReports section for the Reports page. Register Chart.js with `ArcElement`, `Tooltip`, `Legend`, `DoughnutController`. Build a dual-visualization layout: (1) A Three.js 3D bar chart using `@react-three/fiber` `Canvas` with `OrthographicCamera` and `OrbitControls` (enableZoom=false, enablePan=false, limited polar/azimuth angles). Render `BarMesh` components for each of 8 DEMOGRAPHICS entries (Engineering 48, Marketing 22, Sales 31, HR 12, Finance 18, Operations 26, Product 20, Design 14) using `boxGeometry` with `BAR_WIDTH=0.7`, `BAR_DEPTH=0.6`, `BAR_GAP=1.4`, `MAX_BAR_HEIGHT=8`. Add `meshStandardMaterial` with hover state (`#FBBF24` color, 0.4 emissiveIntensity). Handle `onPointerOver`/`onPointerOut` for `hoveredIndex` state. Use `useMemo` for bar data computation in `BarChartScene`. (2) A `react-chartjs-2` `Doughnut` chart for STATUS_DATA (Active Full-Time 142, Active Part-Time 28, On Leave 11, Probation 15, Suspended 2) with total employee count overlay. Use `useState`, `useRef`, `useEffect`, `useMemo`. Apply `EmployeeReports.css` styles.

As a frontend developer, implement the PayrollReports section for the Reports page. Register all Chart.js modules via `Chart.register(...registerables)`. Build a line chart using vanilla Chart.js (not react-chartjs-2) via `useRef` (`chartRef`, `chartInstanceRef`) and `useEffect` for canvas imperative API. Create a vertical linear gradient fill (indigo rgba 0.45→0.12→0.01) using `ctx.createLinearGradient`. Configure the chart with 12-month MONTHLY_PAYROLL_DATA labels/amounts, `borderColor: '#6366F1'`, `tension: 0.35`, `fill: true`, `mode: 'index'` interaction, custom tooltip with dark background `rgba(26,26,26,0.95)`. Clean up with `chartInstanceRef.current.destroy()` on unmount. Below the chart, render a `PAYROLL_TABLE_DATA` table (6 departments: Engineering $156,200, Marketing $48,200, Sales $38,400, Operations $44,800, Finance $32,900, HR $10,900) with `TrendIcon` component rendering `TrendUp`/`TrendDown`/`Minus` lucide icons, and a monthly total row using `formatCurrency()` Intl formatter. Include a `Download` icon button. Apply `PayrollReports.css` styles.

As a frontend developer, implement the LeaveReports section for the Reports page. Register Chart.js with `CategoryScale`, `LinearScale`, `BarElement`, `Title`, `Tooltip`, `Legend`. Use `useState` for `animated` and `useRef` for `sectionRef`. Implement `IntersectionObserver` in `useEffect` (threshold: 0.15) to trigger `setAnimated(true)` once on scroll-into-view, then `obs.disconnect()`. Build a grouped `Bar` chart from `react-chartjs-2` with 3 datasets (Pending `#6366F1`, Approved `#10B981`, Rejected `#EF4444`) across 8 LEAVE_TYPES (Annual, Sick, Personal, Maternity, Paternity, Bereavement, Unpaid, Compensatory). Configure `borderRadius: 4`, `borderSkipped: false`, `barPercentage: 0.7`, `categoryPercentage: 0.8`. Compute SUMMARY totals (pending, approved, rejected, total) via IIFE. Render 4 summary stat cards using icons `CalendarCheck`, `Clock`, `CheckCircle2`, `XCircle` and `TrendingUp`, `Users`, `Briefcase`, `Plane` icons. Apply `LeaveReports.css` styles.

As a frontend developer, implement the AttendanceReports section for the Reports page. Use `useState` and `useEffect` with Three.js `Canvas` from `@react-three/fiber`. Build 4 summary metric cards from METRICS array (Overall Attendance 92.4%, On-Time Arrival 88.7%, Avg Late Minutes 12.3min, Absence Rate 3.8%) with direction indicators using `ArrowUp`/`ArrowDown` icons and `TrendingUp`/`TrendingDown` lucide icons. Render an 8×8 attendance heatmap grid for EMPLOYEES (Alex Chen, Sarah Kim, Marcus Johnson, Priya Patel, David Okafor, Emily Rodriguez, James Wilson, Yuki Tanaka) across WEEKS (W1–W8) using `getCellClass()` helper to apply `ar-heatmap-cell--excellent` (≥95), `ar-heatmap-cell--high` (≥88), `ar-heatmap-cell--mid` (≥78), `ar-heatmap-cell--low` (<78) CSS classes. Render a DEPARTMENTS table (6 departments with `getPercentClass()` and `getProgressClass()` helpers applying good/warn/bad variants based on ≥93/≥87 thresholds) with progress bars and trend badges. Animate cards with `motion.div` from framer-motion. Integrate `THREE` for 3D backdrop particle/canvas effect. Apply `AttendanceReports.css` styles.

As a frontend developer, implement the ExportActions section for the Reports page. Use `useState` for `activeAction` (string | null) and `completedAction` (string | null). Render 4 action buttons from EXPORT_ACTIONS array (PDF with `FileText`, CSV with `Download`, Schedule Report with `Send`, Print with `Printer`) each as `motion.button` with `whileTap={{ scale: 0.96 }}` and `whileHover={{ scale: 1.03 }}`. Apply variant classes `ea-btn--primary`, `ea-btn--secondary`, `ea-btn--tertiary`. Implement `handleAction()`: set `activeAction` to clicked id, guard against concurrent actions with early return. For 'print': `setTimeout 400ms` → `window.print()` → set completedAction → clear after 1800ms. For others: `setTimeout 1200ms` → clear activeAction → set completedAction → clear after 2000ms. Use `AnimatePresence mode='wait'` to swap between default icon, `Loader2` spinner (animated rotate), and `CheckCircle` success icon states. Disable all buttons while `activeAction` is truthy. Include decorative `ea-glow` backdrop and `ea-label` 'Export & Share' heading. Apply `ExportActions.css` styles.

As a frontend developer, implement the SettingsHeader section for the Settings page. Build the header using framer-motion AnimatePresence and motion.p for animated subtitle transitions (opacity 0→1, y 8→0, duration 0.25s easeOut with mode='wait') keyed on activeCategory state. Render a breadcrumb nav with ChevronRight separators linking Dashboard → Settings → active category label. Include a Settings icon ring (sh-icon-ring), an h1 title, and an sh-accent-line decorative element. SETTINGS_CATEGORIES array maps keys (profile, security, notifications, appearance, system, danger) to label and desc strings displayed in the animated subtitle.

As a frontend developer, implement the ProfileSettings section for the Settings page. Build a 3D cursor-reactive avatar using @react-three/fiber Canvas with AvatarSphere (IcosahedronGeometry r=1.05 flatShading, wireframe overlay opacity=0.15, SphereGeometry point particles) and useFrame for smooth mouse-tracking rotation (x*1.2, y*0.6 with 0.08 lerp factor). Implement useState for editing mode toggle, useRef for mouseRef tracking, and useMemo for geometry instances. Render FieldCard components for fields (bio uses textarea, others use input) with Edit3/Save/X/Upload/Shield/CheckCircle2 lucide icons. AnimatePresence handles edit mode transitions. AvatarScene wraps Canvas with ambient, directional, and point lights.

As a frontend developer, implement the AccountSecurity section for the Settings page. Build password change form with getPasswordStrength evaluator (scores length≥8, length≥12, uppercase, digits, special chars → weak/fair/good/strong with 25/50/75/100% width bar). Implement Eye/EyeOff toggle for password visibility using useState. Build SessionCard components with tilt-reactive mechanic using useMotionValue, useSpring (stiffness=260, damping=22), and onMouseMove/onMouseLeave handlers computing rotateX/rotateY from card center offset * 0.03. Session cards show device icons (MonitorSmartphone/Laptop/Smartphone/Tablet), location, lastActive time, and a revoke button. Current session is visually distinguished. Use AnimatePresence with staggered entry (delay: index * 0.06).

As a frontend developer, implement the NotificationSettings section for the Settings page. Build notification preference UI with NOTIFICATION_GROUPS array (leave-requests, announcements, task-assignments, performance-reviews, payroll) each having email/push/sms channel toggles. Implement useState for frequency (immediate/daily/weekly via FREQUENCY_OPTIONS), toggles object keyed by group id and channel type, and expandedGroup for accordion-style expand/collapse using AnimatePresence with ChevronDown rotation. Each group row shows name, desc, expandedDesc on expand, and three channel toggle switches. Frequency selector uses useCallback for change handlers.

As a frontend developer, implement the AppearanceSettings section for the Settings page. Build the appearance panel as a motion.section (opacity 0→1, y 16→0, duration 0.4s easeOut). Implement useState for theme ('dark'/'light'), fontSize (0/1/2 index), and colorScheme (hex string). Render two theme cards (dark/light) with preview bar mockups, Moon/Sun icons, and radio-style aria-checked selection. Render COLOR_SCHEMES array (Indigo #6366F1, Emerald #10B981, Amber #F59E0B, Rose #F43F5E, Cyan #06B6D4, Violet #8B5CF6) as swatch buttons with Check overlay when active. Render FONT_SIZES ('Small'/'Normal'/'Large') as segmented control. Live preview panel shows previewFontSize and previewHeadingSize computed from fontSize state. Save button uses Save icon from lucide-react.

As a frontend developer, implement the SystemSettings section for the Settings page. Build organization-wide settings panel with SETTINGS array driving four custom select dropdowns: timezone (TIMEZONES, 13 options), date_format (DATE_FORMATS, 5 options), currency (CURRENCIES, 9 options), language (LANGUAGES, 9 options). Each row uses its corresponding icon (Globe, CalendarDays, DollarSign, Clock) with label, desc, and ChevronDown custom select. Implement useState for values object defaulted from SETTINGS[].defaultValue and a saved state. Render RotateCcw reset button and Save button with Shield/Info/CheckCircle2 lucide icons. Show a success banner using AnimatePresence after save action.

As a frontend developer, implement the DangerZone section for the Settings page. Build the danger zone panel with DANGER_ACTIONS array (logout, export, delete) each containing id, label, desc, icon component (LogOut/Download/Trash2), btnLabel, btnStyle (dz-btn-danger or dz-btn-outline), confirmTitle, confirmBody, and confirmAction. Implement useState for modalId to control which confirmation modal is open. openModal/closeModal handlers manage the modal state. Render AnimatePresence-wrapped modal overlay with motion animation, showing the active action's confirmTitle, confirmBody, and a confirmAction button. Section header uses ShieldAlert icon. Warning banner uses AlertTriangle. X button closes modal.

As a frontend developer, implement the AuditLogsPagination section for the Audit Logs page. This section manages state with `useState` for `currentPage` (default 1), `pageSize` (default 25), and `direction` (±1 for animation). `TOTAL_RECORDS` is hardcoded to 2847. `PAGE_SIZE_OPTIONS` provides [10, 25, 50, 100] choices. `getVisiblePages(currentPage, totalPages)` generates a smart ellipsis page list: shows all pages if ≤7, otherwise shows page 1, optional '...' ellipsis, a window of currentPage±1, optional '...' ellipsis, and last page. Computes `totalPages`, `startRecord`, and `endRecord` from current state. `handlePageChange` via `useCallback` sets `direction` based on whether navigating forward or backward and updates `currentPage`. `handlePageSizeChange` resets to page 1 and direction 0. `handlePrev`/`handleNext` guard against boundary conditions. Uses `framer-motion` `motion` and `AnimatePresence` to animate `startRecord` and `endRecord` count spans with vertical slide transitions (`y: direction * 6`) and `mode="wait"` — each keyed by their value for re-animation on change. Also renders a page-size `<select>` dropdown, previous/next buttons with `ChevronLeft`/`ChevronRight` icons, and numbered page buttons with active styling.

As a Backend Developer, implement analytics and reports API endpoints. Build GET /reports/headcount (employee count grouped by department for bar chart), GET /reports/attendance (monthly attendance rate as percentage over time for line chart), GET /reports/payroll (payroll cost by month/department for area chart), GET /reports/leaves (leave utilization by type for pie chart), and GET /reports/overview (combined KPI summary: total employees, active leaves, payroll this month, attendance rate, system uptime). All reports endpoints support query params for date range and department filter. HR/SuperAdmin roles required for most endpoints; Managers can access team-scoped versions. Implement Redis caching (5-min TTL) for expensive aggregation queries.

As a Tech Lead, verify the end-to-end integration between the Login page frontend implementation and the Auth backend API. Ensure POST /auth/login correctly returns JWT tokens, the frontend stores them, refresh token rotation works on expiry, and role-based redirects function correctly for all four roles (Super Admin, HR, Manager, Employee). Verify logout invalidates tokens in Redis. Confirm the AuthGuard HOC properly protects all dashboard routes and redirects unauthenticated users to /Login.

As a Tech Lead, verify the end-to-end integration between the Payroll page frontend sections (PayrollPageHero, PayrollMetricsPanel, PayrollProcessing, PayslipsHistory, PayrollReportsSection) and the Payroll backend API. Ensure Run Payroll action calls POST /payroll, payroll cycles load from GET /payroll with tab-based status filters, payslip detail view fetches from GET /payroll/{id}/payslip, metrics panel stats are driven by real aggregated data, and export/download actions work. Confirm HR/SuperAdmin-only access enforcement.

As a Tech Lead, verify the end-to-end integration between the Tasks page frontend sections (TasksHeader, TasksFilters, TasksBoard) and the Tasks backend API. Ensure task board loads from GET /tasks with role-scoped data (Employees see their tasks, Managers see team tasks), task status updates call PUT /tasks/{id}, new task creation calls POST /tasks, and filters (status, priority, assignee, date range) work as query params. Verify the kanban column grouping by status matches backend status enum values.

As a Tech Lead, verify the end-to-end integration between the Accounts page frontend sections (AccountsHero, AccountsTable, CreateAccountModal, DeleteConfirmation) and the Accounts backend API. Ensure account list loads from GET /accounts (SuperAdmin only), Create Account modal submits to POST /accounts with auto-generated password, delete confirmation triggers DELETE /accounts/{id}, and edit actions call PUT /accounts/{id}. Confirm the stats strip in AccountsHero (Super Admin count: 2, HR: 8, Managers: 24) derives from real API data.

As a Tech Lead, verify the end-to-end integration between the Profile page frontend sections (ProfileHeader, ProfileDetails, ProfileActions) and the backend API. Ensure profile data loads from GET /employees/{id}/profile (or GET /settings/profile for the current user), inline field edits save to PUT /settings/profile, the Download Profile action generates a real export, Change Password links to the Settings security section, and Delete Account triggers the correct danger zone API call. Confirm Employees can only view/edit their own profile.

As a frontend developer, implement the DashboardStatsCards section for the Dashboard page. Uses framer-motion `motion` with `cardVariants` (hidden: opacity 0, y 24, scale 0.96 → visible with staggered delay i*0.08s) and `AnimatePresence`. Imports useState, useRef, useCallback, useEffect, useMemo from React and lucide icons (Users, UserCheck, CalendarCheck, ClipboardList, TrendingUp, TrendingDown, Minus, Building2, Briefcase, Clock, FileText). Renders STAT_CARDS array of 4 cards (Total Employees 1,284; Pending Approvals 47; Leave Balance 18; Org Headcount 2,641) each with metric, trend direction badge, accent color variant (primary/accent/secondary), subLabel, subValue, and a `SparklinePath` SVG component. SparklinePath uses useMemo to normalize sparkline data, compute polyline points and SVG fill path with colorMap keyed by accent (primary: #6366F1, secondary: #10B981, accent: #F59E0B). DashboardStatsCards.css handles grid layout.

As a frontend developer, implement the AttendanceExport section for the Attendance page. This section renders three EXPORT_ACTIONS buttons (FileText CSV, FileDown PDF, Printer Print — all 'outline' variant) and two BULK_ACTIONS buttons (CheckCheck Bulk Approve 'success' variant, XCircle Bulk Reject 'danger' variant). State includes selectedCount (integer), toast ({message, type} | null), and processingKey (string | null for loading states). handleExport simulates a 900ms async export then calls showToast with success message. handleBulk validates selectedCount > 0 (showing error toast if none selected), simulates 1000ms processing, then shows success with count and label ('approved'/'rejected'), then resets selectedCount to 0. A clearSelection button (X icon) dismisses the AnimatePresence selection pill that appears when selectedCount > 0. Toast notifications use AnimatePresence with CheckCircle2 (success) and AlertCircle (error) icons and auto-dismiss via toastTimer ref (3000ms). Buttons disable during isProcessing. Depends on AttendanceTable since it coordinates with table row selections.

As a frontend developer, implement the ReviewsList section for the Reviews page. Build the `ReviewsList` component using `useState` for pagination and sort state, `useEffect` for filter synchronization, and `useMemo` for filtered/paginated data derived from `REVIEW_MOCK_DATA` (8 mock review entries with ids RV-001 through RV-008). Implement `ITEMS_PER_PAGE = 5` pagination with `ChevronLeft`/`ChevronRight` navigation. Render each review row with dual avatar initials (reviewer + reviewee via `getInitials()` helper), role labels, status badges using `statusLabels` map (pending, in-progress, completed), and formatted dates via `formatDate()` using `toLocaleDateString`. Implement action buttons per row using `actionConfig` map: `view` (Eye icon, `rvl-btn-view`), `edit` (Edit2, `rvl-btn-edit`), `approve` (CheckCircle, `rvl-btn-approve`), `reject` (XCircle, `rvl-btn-reject`) — each row conditionally renders only its allowed actions array. Use `framer-motion` `AnimatePresence` for row enter/exit animations. Include empty state with `FileText` icon. Render a `ChevronDown` sort toggle on column headers.

As a frontend developer, implement the DepartmentsModal section for the Departments page. Accepts props: `isOpen` (default true), `onClose` callback, and `department` (optional object for edit mode). Uses `useState` for `form` ({name, manager, budget, description, isActive}) and `errors` ({name?, manager?, budget?}). `isEditing` flag derives from `!!department`. A `useEffect` on `department` prop populates form fields when editing or resets them for create mode, and clears errors. `handleChange` uses a curried `useCallback` that clears the specific field error on change. `handleToggle` toggles `form.isActive`. `validate` enforces: name required, manager selected, budget is a positive number — collecting to `errors` state. `handleSubmit` calls `validate()` then `onClose?.(form)` on success. Overlay click (`handleOverlayClick`) and Escape key (`handleKeyDown`, attached via `document.addEventListener` in a `useEffect` when `isOpen`) both call `onClose?.()`. `document.body.style.overflow` is set to 'hidden' when open and restored on close. Manager select renders from `MANAGERS` array (7 names). `framer-motion` `AnimatePresence` wraps overlay (`overlayVariants`) and modal panel (`modalVariants` with spring stiffness 400/damping 30/mass 0.8 enter, easeIn exit). Icons: `X` (close button), `ChevronDown` (select arrow), `Building2` (modal header icon). Import DepartmentsModal.css.

As a Tech Lead, verify the end-to-end integration between the Employees page frontend sections (EmployeesHeader, EmployeesTable, EmployeesFilter, EmployeesPagination) and the Employees backend API. Ensure employee list loads from GET /employees with working search, filter, sort, and pagination query params. Verify Add Employee form submits to POST /employees correctly with validation. Confirm Edit (PUT /employees/{id}), offboard (DELETE /employees/{id}), and profile view (GET /employees/{id}/profile) flows work end-to-end with proper role-based access enforcement.

As a Tech Lead, verify the end-to-end integration between the Leaves page frontend sections (LeavesHeader, LeavesList, LeavesApplyForm, LeavesSummary) and the Leaves backend API. Ensure leave application form submits to POST /leaves, leave list loads from GET /leaves with role-based scoping, approve/reject actions call PUT /leaves/{id}/approve and /reject respectively, and leave balance summary fetches from GET /leaves/balance/{employee_id}. Confirm the calendar view in LeavesSummary reflects real leave dates. Verify Manager can only see/approve their team's leaves.

As a Tech Lead, verify the end-to-end integration between the Payslips page frontend sections (PayslipsHeader, PayslipsFilters, PayslipsList, PayslipsDetails) and the Payroll backend API. Ensure payslip list loads from GET /payroll/employee/{id} filtered by year/month/status params matching the filter controls, the payslip detail panel fetches full breakdown from GET /payroll/{id}/payslip, and the download action generates and triggers a real payslip file download. Confirm Employees can only view their own payslips.

As a Tech Lead, verify the end-to-end integration between the Announcements page frontend sections (AnnouncementsHeader, AnnouncementsFilters, AnnouncementsList) and the Announcements backend API. Ensure announcements list loads from GET /announcements with role-scoped visibility (Employees see their department + company-wide, HR sees all), create announcement form (HR role) calls POST /announcements, department filter works as a query param, and search/sort filters function correctly. Confirm the role-based CTA in AnnouncementsHeader (HR create button vs Employee read-only pill) matches backend access control.

As a Tech Lead, verify the end-to-end integration between the Reports page frontend sections (ReportsHeader, ReportsFilters, KeyMetrics, EmployeeReports, LeaveReports, AttendanceReports, PayrollReports, ExportActions) and the Reports backend API. Ensure KPI metric cards load from GET /reports/overview, chart data for headcount/leave/attendance/payroll sections loads from respective GET /reports/* endpoints, filter controls (date range, department, report type) translate correctly to API query params, and export actions trigger real data downloads (PDF/CSV). Verify Redis caching does not serve stale data after filter changes.

As a Tech Lead, verify the end-to-end integration between the Analytics page frontend sections (AnalyticsHeader, AnalyticsKPICards, AnalyticsCharts, AnalyticsEmployeeMetrics, AnalyticsDepartmentBreakdown, AnalyticsPayrollSummary, AnalyticsEngagementTrends) and the Reports/Analytics backend API. Ensure KPI cards, charts, and department breakdown tables all load from real backend report endpoints with working date range and team filter params. Verify the Analytics page is restricted to SuperAdmin role only.

As a Tech Lead, verify the end-to-end integration between the Audit Logs page frontend sections (AuditLogsHeader, AuditLogsFilters, AuditLogsTable, AuditLogsPagination) and the Audit Logs backend API. Ensure audit log list loads from GET /audit-logs with working filters (user, action type, resource, status, date range), pagination params (page, pageSize) work correctly, expanded row detail view fetches from GET /audit-logs/{id}, and the Export Logs button triggers a real export. Confirm SuperAdmin-only access. Verify the audit logging middleware is capturing real system actions.

As a Tech Lead, verify the end-to-end integration between the Settings page frontend sections (SettingsHeader, SettingsSidebar, ProfileSettings, AccountSecurity, NotificationSettings, AppearanceSettings, SystemSettings, DangerZone) and the Settings backend API. Ensure profile settings load/save via GET/PUT /settings/profile, password change calls PUT /settings/password with strength validation, active sessions list loads from GET /settings/sessions with revoke via DELETE /settings/sessions/{id}, system settings (timezone/currency/language) load/save via GET/PUT /settings (SuperAdmin only), and danger zone actions (logout everywhere, delete account) call the correct endpoints.

As a frontend developer, implement the DashboardSecondaryContent section for the Dashboard page. Uses framer-motion `motion` and `AnimatePresence` for animated content transitions, plus useState, useEffect, useCallback, useRef. Contains three data arrays: `activities` (6 items with user, time, dotColor CSS class variants dsc-activity-dot--accent/secondary/primary/highlight), `approvals` (3 pending leave/sick/remote-work items with initials avatars and approve/reject CheckCircle/XCircle lucide icon buttons), and `announcements` (4 items with badge variants dsc-announce-badge--urgent/info/success/warning). Also includes `insights` array with team metrics. Lucide imports: Clock, CheckCircle, XCircle, Megaphone, TrendingUp, TrendingDown, ExternalLink, ArrowRight, Users, ListChecks, FileText. Renders activity feed timeline, pending approvals action panel, and announcements list with ExternalLink/ArrowRight CTAs. DashboardSecondaryContent.css provides panel/grid layout.

As a frontend developer, implement the ReviewsDetailPanel section for the Reviews page. Build the `ReviewsDetailPanel` component using `useState` for active tab and `useRef` for panel scroll, driven by `REVIEW_DETAILS_MAP` keyed by review id (RV-001 through at least RV-002 with full detail objects). Implement a tabbed interface with icons from lucide-react: `FileText` (Overview), `BarChart3` (Ratings), `MessageSquare` (Notes/Response), `Clock` (Timeline). Render the Overview tab with employee/reviewer metadata cards using `User`, `Calendar`, `Briefcase` icons and an overall rating display with `Star` icons. Render the Ratings tab with per-category score bars (categories: Technical Skills, Communication, Collaboration, Leadership, Problem Solving, Initiative) with `tier` class variants (`high`, `mid`). Render the Notes tab with reviewer notes (author, text, date) and employee response block. Render the Timeline tab with ordered status steps (completed/active states) with labels, dates, and comments. Use `framer-motion` `AnimatePresence` for tab panel transitions. Include `Eye`, `CheckCircle`, `XCircle` action buttons in the panel header. Panel should animate in/out using `motion` when a review is selected from ReviewsList.

As a Tech Lead, verify the end-to-end integration between the Departments page frontend sections (DepartmentsHeader, DepartmentsControls, DepartmentsTable, DepartmentsModal) and the Departments backend API. Ensure department list loads from GET /departments, Create/Edit modal submits to POST/PUT /departments correctly, delete triggers DELETE /departments/{id} with confirmation, and filter/search/sort work with the backend. Confirm role-based access (HR/SuperAdmin only for mutations) is enforced at both API and UI levels.

As a Tech Lead, verify the end-to-end integration between the Attendance page frontend sections (AttendanceHeader, AttendanceStats, AttendanceCalendar, AttendanceTable, AttendanceFilters, AttendanceExport) and the Attendance backend API. Ensure attendance records load from GET /attendance with working date/department/status filters, monthly summary stats are derived from real data, calendar view shows real per-day records, clock-in/out POSTs to POST /attendance, and export/bulk actions work correctly. Confirm Manager-scoped team view and Employee-scoped personal view both work as expected.

As a Tech Lead, verify the end-to-end integration between the Reviews page frontend sections (ReviewsHeader, ReviewsFilterBar, ReviewsList, ReviewsDetailPanel, ReviewsFormSection) and the Performance Reviews backend API. Ensure review list loads from GET /performance with role-based scoping, review form submission calls POST /performance with correct ratings_json structure, review detail panel fetches from GET /performance/{id}, and approve/reject actions update status correctly. Confirm Manager-only create access and Employee read-only access to their own reviews.

As a Tech Lead, verify the end-to-end integration between the Dashboard page frontend sections (DashboardHeader, DashboardStatsCards, DashboardSidebar, DashboardSecondaryContent) and the backend API. Ensure role-specific stat cards (Total Employees, Pending Approvals, Leave Balance, Org Headcount) load from appropriate backend endpoints, recent activity feed and pending approvals panel show real data, and the sidebar navigation correctly reflects the authenticated user's role. Verify approve/reject quick actions in DashboardSecondaryContent call the leaves API. Confirm role-based stat content switches correctly for all four roles.