SK ATTENDANCE

As a frontend developer, implement the Navbar section for the Landing page. This component uses framer-motion's useScroll and useTransform hooks to create a scroll-reactive background (rgba(241, 250, 238, opacity) transitioning from 0 to 1 over the first 120px of scroll). The navbar includes: an animated SVG clock logo (circle, hour/minute hands drawn via pathLength animations with staggered delays), desktop nav links from NAV_LINKS array (6 routes: Landing, Dashboard, Employees, Attendance, Reports, Salary), a mobile hamburger toggle using useState(mobileOpen), AnimatePresence-driven mobile menu drawer, body scroll lock via useEffect when mobile menu is open, and a scrolled CSS class applied when window.scrollY > 40 for backdrop-filter: blur(12px). This component may already exist from a previous page — check sections/Navbar.jsx before regenerating.

As a frontend developer, implement the EmployeesFilters section for the Employees page. This section manages 6 state hooks: `search` (string), `status` ('All'|'Active'|'Inactive'|'On Leave'), `contractor` ('All Contractors'|'Hemil Shah'|'Rajesh Kumar'), `skill` ('All'|'Skilled'|'Unskilled'), `sort` ('Name A–Z'|'Recently Added'|'Hire Date'), and `mobileOpen` (boolean). A `collapseRef` + `ResizeObserver` useEffect tracks filter panel height for animated mobile collapse via `collapseHeight` state. Active filters are computed as an array of `{key, label}` objects; `clearAll()` resets all filters; `removeFilter(key)` removes individual filters. Desktop toolbar renders a search input with SVG magnifier icon, dropdown selects for status/contractor/skill/sort, and an active filter chips row with individual remove buttons and a 'Clear All' link. Mobile: a toggle button reveals the filter panel with animated height transition using `AnimatePresence`. Uses framer-motion for chip entry/exit animations. This section is independent of EmployeesHeader and can be built in parallel.

As a frontend developer, implement the EmployeesGrid section for the Employees page. This section uses `useState` for view mode ('grid'|'list') and `useMemo` for filtered/sorted employee list. The static EMPLOYEES array contains 15+ employee records with fields: id (EMP-001 format), name, designation, contractor, status ('Active'|'On Leave'|'Inactive'), phone, and initials. Grid and list toggle buttons use Grid3X3 and List icons from lucide-react. Each employee card renders: initials avatar, name, designation, contractor (Briefcase icon), status badge with color-coded styling, phone (Phone icon), and three action icon buttons — View (Eye), Edit (Pencil), Delete (Trash2). AnimatePresence wraps the card list for enter/exit transitions. An empty state with SearchX icon and 'No employees found' message renders when the filtered list is empty. A Users icon header shows total visible count. Responsive: grid collapses to list on mobile. This section is independent of other Employees sections and can be built in parallel.

As a frontend developer, implement the EmployeesBulkActions section for the Employees page. This section uses `selectedCount` state (init: 3) and two useCallbacks: `clearSelection` (sets count to 0) and `handleAction(actionKey)` (console.logs action + count). The component conditionally renders via AnimatePresence with `mode='wait'`: when selectedCount > 0, a `motion.div` toolbar appears with `toolbarVariants` (opacity/y/-scale spring entry, exit easing). The toolbar left side shows a count badge with `eba-count-pulse` class, employee count label (singular/plural), and an X clear button (whileHover/whileTap scale). The right side renders 4 action buttons from BULK_ACTIONS array — 'Assign to Contractor' (Users icon, variant: assign), 'Change Status' (RefreshCw, status), 'Export Selected' (Download, export), 'Delete Selected' (Trash2, delete variant styled red) — animated with `buttonStagger` and `buttonItem` variants (staggerChildren: 0.06, x: 12→0). When selectedCount is 0, a `placeholderVariants` empty-state hint renders with MousePointerClick icon. This section is independent of other Employees sections and can be built in parallel.

As a frontend developer, implement the EmployeesImport section for the Employees page. This section manages 6 state hooks: `dragActive` (boolean), `selectedFile` (File|null), `importState` ('idle'|'importing'|'done'), `progress` (number 0-100), `results` (null|object), `errorsOpen` (boolean). A `inputRef` refs the hidden file input. `resetState` useCallback clears all state and resets the input value. Drag-and-drop handlers: `handleDragEnter`, `handleDragLeave`, `handleDragOver` (all preventDefault/stopPropagation), wired to the dropzone div. The dropzone animates between `dropzoneVariants` idle (borderColor rgba teal 0.35) and active (scale 1.012, borderColor rgba teal 0.9) states. `ACCEPTED_FORMATS` = '.csv,.xlsx,.json'. A `formatFileSize(bytes)` utility formats B/KB/MB. When a file is selected, a `fileCardVariants` animated card (height: 0→auto) shows filename (truncated to MAX_FILE_NAME_LENGTH=42), size, and an X remove button. Import progress shows a Loader2 spinning icon and animated progress bar. Results panel uses `resultsVariants` and `statCounterVariants` (custom delay, scale 0.6→1) for success/error counts. MOCK_ERRORS array (4 items with row, field, message) animates in with `errorItemVariants` (staggered x: -12→0). A 'Download Template' link with Download icon and 'Reset' button with RefreshCw complete the UI. This section is independent of other Employees sections and can be built in parallel.

As a frontend developer, implement the EmployeesStats section for the Employees page. This section renders a `<section className='emst-root'>` with whileInView animations throughout (viewport once: true, margin: '-40px'). A section header with BarChart3 icon and 'Workforce Overview' title fades in (y: 16→0). Four `statCards` are rendered via `cardVariants` with staggered custom delays (i*0.1): Total Employees (45, Users icon, TrendingUp '+3 this month'), Active (42/45, UserCheck, 93.3%), Inactive (3/45, UserX, TrendingDown 6.7%), Contractors (2, Briefcase, Minus 'Active'). A `TrendIcon` helper component switches between TrendingUp/TrendingDown/Minus based on direction prop. Two breakdown panels use `breakdownVariants` (delay: 0.4+i*0.12): (1) Contractor breakdown with `contractors` array (Contractor A: 28 employees/62%, Contractor B: 17/38%) showing initials avatars, counts, and animated progress bars using `emst-contractor-bar--a/b` classes; (2) Skill breakdown with `skills` array (Skilled: 28/62%, Unskilled: 17/38%) showing dot indicators (`emst-skill-dot--skilled/unskilled`) and progress bars. PieChart and BarChart3 icons used for panel headers. This section is independent of other Employees sections and can be built in parallel.

As a frontend developer, implement the EmployeesCTA section for the Employees page. This section defines a reusable `MagneticButton` sub-component using `useRef`, `useMotionValue` (x, y), and `useSpring` (stiffness: 180, damping: 15) for springX/springY. `handleMouseMove` computes offset from button center (0.28 multiplier) and sets motion values; `handleMouseLeave` resets to 0. The `motion.a` applies springX/springY via style prop, whileHover scale 1.03, whileTap 0.96. The main `EmployeesCTA` section renders: a `ecta-deco-layer` with 4 decorative circles (`ecta-deco-circle--1/2/3/4`); a content div with a `motion.h2` headline 'Manage Attendance & Salary' (whileInView y: 18→0, viewport margin '-60px', accent spans for 'Attendance' and 'Salary'); a `motion.p` subheadline (delay: 0.12); and two `MagneticButton` instances — primary CTA linking to attendance management and secondary linking to salary/reports. SVG chevron arrow (`ecta-btn-arrow`) included inside each button span. This section is independent of other Employees sections and can be built in parallel.

As a Backend Developer, implement the FastAPI authentication endpoints: POST /api/v1/auth/login (email+password, returns JWT access+refresh tokens), POST /api/v1/auth/logout (invalidate token), POST /api/v1/auth/refresh (rotate refresh token), GET /api/v1/auth/me (current user profile). Include role-based claims (manager/hr/contractor) in JWT payload. Use passlib[bcrypt] for password hashing. Middleware to protect all non-auth routes. Note: LoginForm frontend task (2f4f8abc) depends on this API.

As a Backend Developer, define SQLAlchemy ORM models and Alembic migrations for all core entities: User (id, email, password_hash, role, created_at), Employee (id, name, designation, contractor_id FK, skill_type enum, daily_wage, monthly_salary, phone, photo_url, status, hired_at), Contractor (id, name, contact, type), AttendanceRecord (id, employee_id FK, date, check_in, check_out, hours_worked, overtime_hours, status enum, photo_url, notes, created_by FK, created_at), SalaryRecord (id, employee_id FK, month, base_salary, overtime_pay, sunday_bonus, deductions, net_salary, calculated_at). Create initial Alembic migration and seed script for 2 contractors and 45 employees with realistic data matching SRD. Use MySQL/MariaDB as per tech stack.

As a Frontend Developer, configure global state management for the React web app using React Context or Zustand: AuthContext (current user, role, JWT token, isAuthenticated, login/logout actions), AttendanceContext (current date's attendance records, live update trigger), EmployeeContext (employee list cache, selected employee). Configure axios instance with base URL from environment variable VITE_API_BASE_URL, attach JWT Authorization header via request interceptor, handle 401 refresh token rotation via response interceptor. Export useAuth, useAttendance, useEmployee custom hooks. This is a cross-cutting concern required by all pages before they can integrate with backend APIs.

As a DevOps Engineer, create and document all required environment variable files: backend/.env.example (DATABASE_URL, SECRET_KEY, ALGORITHM, ACCESS_TOKEN_EXPIRE_MINUTES, REFRESH_TOKEN_EXPIRE_DAYS, PHOTO_STORAGE_PATH, MAX_UPLOAD_SIZE_MB), frontend/.env.example (VITE_API_BASE_URL, VITE_APP_NAME). Update docker-compose.yml to pass env vars to services via env_file references. Document all variables in project README. Ensure .env files are in .gitignore. This must be completed before backend and frontend services can connect.

Deploy the current develop branch to the stage environment for this product. Do not implement code changes.

Deploy the current develop branch to the stage environment for this product. Do not implement code changes.

Deploy the current develop branch to the stage environment for this product. Do not implement code changes.

As a frontend developer, implement the LandingHero section for the Landing page. This is a 3D-heavy hero using @react-three/fiber Canvas with custom Three.js components: ClockTorus (rotating torus at 0.003 rad/frame with sinusoidal x-tilt), ClockInnerRing (counter-rotating inner ring at -0.005 rad/frame, rgba opacity 0.6), ClockHands (hourRef rotating at -t*0.08, minuteRef at -t*0.5 using boxGeometry), CenterSphere (pulsing scale via sin(t*2)*0.08 on a sphere with emissiveIntensity 0.5 in F4A261 amber), and TickMarks3D (12 tick marks computed via useMemo). Parallax scroll transform applied via useScroll + useTransform from framer-motion. Section includes headline, subheadline, and CTA button layered over the Canvas. meshStandardMaterial with metalness/roughness/emissive properties used throughout.

As a frontend developer, implement the LandingClockShowcase section for the Landing page. This is the most complex section — an interactive 3D clock face using @react-three/fiber with 12 TIME_SLOTS (hour labels, present/absent counts, employee names). Each clock sector is a ClockSector component built from THREE.Shape with custom arc geometry (innerRadius 1.8, outerRadius 3.6, sectorAngle = 2π/12, 24 arc segments). Sectors respond to onHover and onClick events. DRILL_DATA array drives a detail drill-down panel via AnimatePresence. useState tracks hovered sector index and selected slot. useCallback optimizes hover/click handlers. The section shows present/absent employee stats per hour slot and a drilldown list of individual employee statuses. useRef and useFrame drive real-time 3D animations. Responsive: Canvas collapses to simplified stat cards on mobile.

As a frontend developer, implement the LandingFeatures section for the Landing page. This section renders a responsive grid of 6 FeatureCard components sourced from the FEATURES array: Live Data Entry (MdEditNote), Photo Validation (MdCameraAlt), Automated Salary Calculation (MdCalculate), Real-Time Reports (MdBarChart), Multi-Device Support (MdDevices), and Data Security (MdSecurity) — all from react-icons/md. Cards use cardVariants with staggered delays (i*0.1) and y:36 entry animation triggered by useInView (sectionRef, once:true, amount:0.2). Each card has an icon wrapper with whileHover scale:1.15 spring animation, title, description paragraph, and a decorative lf-card-accent bottom stripe. headerVariants animate the section heading on scroll entry. Cards are hidden/visible state-toggled via inView boolean.

As a frontend developer, implement the LandingUserPersonas section for the Landing page. This section renders 3 PersonaCard components from the personas array: Manager (FiClipboard, lup-icon-wrap--manager color class), HR Personnel (FiUsers, lup-icon-wrap--hr), and Contractor (FiTruck, lup-icon-wrap--contractor). Each card uses a per-card useInView ref (margin: '-60px') with cardVariants (y:40 entry, stagger i*0.15). Cards have whileHover scale:1.02 spring. Inside each card, responsibility bullet items animate via bulletVariants (x:-14 entry, stagger 0.3 + i*0.08). Each bullet uses bold verb text and descriptive text subparts. useEffect + useCallback manage any card interaction state. Responsive: 3-column grid on desktop, 1-column stack on mobile.

As a frontend developer, implement the LandingTechStack section for the Landing page. This section renders 4 technology category panels from techCategories array: Frontend (React, React Native, Framer Motion, Chart.js), Backend (Python, FastAPI, Celery, Redis), Database (MySQL, SQLAlchemy, Alembic), and Orchestration (Docker, Kubernetes, Nginx, GitHub Actions). Each category has a CategoryIcon SVG component (monitor/server/database/cloud variants rendered inline via conditional returns). useState tracks the active selected category for an accordion or tab-style explanation panel. useInView drives scroll-triggered entry animations. Tech badge chips are displayed per category. The explanation text updates dynamically when a category is selected, describing how each tech applies to the 45-employee attendance system.

As a frontend developer, implement the LandingSecurityTrust section for the Landing page. This section renders 3 security pillar cards from the pillars array: Data Privacy (FiShield), Real-Time Accuracy (FiClock), and Multi-User Support (FiUsers). Each pillar card triggers a modal on click using AnimatePresence — the modal contains modalBody extended description and a features bullet list. The modal uses FiX for close and FiArrowRight for detail links. useState tracks the currently open pillar id. Trust badges row renders FiLock (Encrypted Data), FiAward (Role-Based Access), FiCheckCircle, and others from react-icons/fi. useInView triggers staggered scroll-entry animations on the pillars and badge row. The section communicates enterprise-grade encryption, photo validation accuracy, and 50-concurrent-user multi-role support.

As a frontend developer, implement the LandingHowItWorks section for the Landing page. This section renders 6 StepCard components from the STEPS array: Add Employees (FiUserPlus), Mark Attendance (FiCheckCircle), Photo Validation (FiCamera), Calculate Salary (FiDollarSign), Generate Reports (FiFileText), Sync & Share (FiUploadCloud). Each StepCard has useState(hovered) for detail text reveal and animates via framer-motion with initial scale:0.7 + y:30 entry. An AnimatedNumber sub-component animates the step number counter from 0 to target using useMotionValue, useTransform, and framer-motion's animate() with easeOut over 0.6s — subscribed via rounded.on('change'). useInView on the section container gates all animations (once:true). Cards have a progress connector line visual between steps. Responsive: 2-column grid on tablet, 1-column on mobile.

As a frontend developer, implement the LandingCTA section for the Landing page. This section features a MagneticButton component that tracks mouse position via onMouseMove + getBoundingClientRect(), computes clamped offsets (maxOffset:8, factor:0.12), and applies them via framer-motion animate({x, y}) with spring (stiffness:300, damping:20, mass:0.5). On mouseEnter, generateParticles() spawns 8 particles at angles (2π*i/8) with randomized distance (30–50px) colored with var(--accent) and var(--highlight) alternately. Particles animate via AnimatePresence with opacity:0/scale:1.5/translate to final x/y over 0.7s easeOut. A DecorativeClock SVG (50x50 viewBox) renders 12 tick marks computed from angle formula with inner:36/outer:40 radii. Section includes headline, subtext, two MagneticButton CTAs (primary and secondary styles), and useInView scroll entry animation.

As a frontend developer, implement the Footer section for the Landing page. This component renders a 4-column link grid from footerColumns array: Product (5 links to Attendance/Salary/Reports/Dashboard), Company (5 links), Resources (5 links), and Legal (5 links). Each column uses columnVariants with stagger (i*0.1) and y:24 entry animation. Individual links use linkVariants (rest: x:0, hover: x:4 over 0.2s easeOut) via framer-motion motion.div with whileHover. A parallax background layer (ftr-parallax-bg) uses CSS custom property --scroll to apply translateY(calc(var(--scroll) * -0.15px)) for three decorative circles (ftr-deco-circle--1/2/3). Social icon wrappers use socialVariants with rotate:360 on hover over 0.6s easeInOut. Brand logo is an inline SVG clock (36x36 viewBox, circle cx:18 cy:18 r:14). Copyright text fades in via copyrightVariants (delay:0.5, opacity:0.6). This component may already exist — check sections/Footer.jsx before regenerating.

As a frontend developer, implement the Navbar section for the Login page. This is a shared component that may already exist from the Landing page (task 7301e09c-6ea1-4b4b-81d2-f2aa2dcea415). The Navbar uses framer-motion with useScroll and useTransform hooks to animate background opacity from transparent to rgba(241, 250, 238, 1) as user scrolls past 120px. Features: scrolled state toggling nb-scrolled class, backdrop-filter blur(12px) on scroll, body overflow lock when mobile menu open via AnimatePresence, animated SVG clock logo with pathLength animations (circle draws in 0.8s, hour hand at 0.5s delay 0.6, minute hand at 0.5s delay 0.8), NAV_LINKS array mapping to /Landing /Dashboard /Employees /Attendance /Reports /Salary routes, and mobile hamburger menu. Verify the component is reused from sections/Navbar.jsx if it exists.

As a Backend Developer, implement FastAPI endpoints for employee management: GET /api/v1/employees (list with filters: contractor_id, status, skill_type, search, pagination), POST /api/v1/employees (create employee record with fields: name, designation, contractor_id, skill_type, daily_wage/monthly_salary, phone, photo_url), GET /api/v1/employees/{id}, PUT /api/v1/employees/{id}, DELETE /api/v1/employees/{id}. POST /api/v1/employees/bulk-import (accept CSV/XLSX via multipart, return import results with row-level errors). GET /api/v1/employees/template (download CSV template). Note: EmployeesGrid (0d90fe12), EmployeesFilters (1aa0149b), EmployeesImport (d1a86568) frontend tasks depend on this API.

As a Backend Developer, implement FastAPI endpoints for live attendance data entry: POST /api/v1/attendance (create attendance record with employee_id, date, check_in, check_out, photo_url, status: present/absent/leave/on-duty, notes), GET /api/v1/attendance (list with filters: date, contractor_id, employee_id, status, date_range, pagination), GET /api/v1/attendance/{id}, PUT /api/v1/attendance/{id}, DELETE /api/v1/attendance/{id}. GET /api/v1/attendance/summary (aggregate counts: total/present/absent/leave/on-duty for a given date). Support real-time data entry as described in SRD. Note: LiveDataFlow (0ee3263d), AttendanceClock (c4c3279b), DashboardAttendanceSummary (025a299e) frontend tasks depend on this API.

As a Backend Developer, implement endpoints for photograph capture and storage: POST /api/v1/photos/upload (multipart upload of employee photo, store to local filesystem or S3-compatible storage, return photo_url), POST /api/v1/photos/validate (compare attendance capture photo against stored employee profile photo using pixel comparison or hash matching — no ML required per SRD). GET /api/v1/employees/{id}/photo (retrieve stored employee profile photo). Ensure photos are stored securely, accessible only to authenticated users. Use python-multipart for file handling. Note: AttendanceClock (c4c3279b) and EmployeesImport (d1a86568) frontend tasks depend on this.

As a Backend Developer, implement CRUD endpoints for contractor management: GET /api/v1/contractors (list all contractors), POST /api/v1/contractors (create: name, contact, type), GET /api/v1/contractors/{id}, PUT /api/v1/contractors/{id}, DELETE /api/v1/contractors/{id}. GET /api/v1/contractors/{id}/employees (list employees under a contractor with present/absent counts). Seed data with two contractors: Hemil Shah and Rajesh Patel as per SRD. Note: DashboardContractorSegmentation (05cbdc41), ReportsFilterBar (00afdc85) frontend tasks depend on this API.

As a DevOps Engineer, configure static file serving for employee photographs: set up a /photos volume mount in docker-compose.yml mapped to PHOTO_STORAGE_PATH, configure FastAPI StaticFiles mount at /static path, set file size limits (max 5MB per image), configure allowed MIME types (image/jpeg, image/png). Ensure photos directory has correct permissions. Add nginx reverse proxy configuration to serve /static files directly without hitting FastAPI for performance. This is required by the photo validation feature.

As a Tech Lead, verify end-to-end integration between the Login page frontend (LoginForm section — task 2f4f8abc) and the Authentication API (task be-auth-api). Ensure: JWT token is stored in httpOnly cookie or localStorage after successful login, role claim from token correctly routes Manager vs HR vs Contractor to respective dashboard views, validation errors from API (401/422) are surfaced in LoginForm's formError banner, and token refresh interceptor in global state (fe-global-state) works correctly. Test with all three user roles.

As a frontend developer, implement the LoginHero section for the Login page. This section renders a decorative split-panel hero with an interactive SVG analog clock graphic. State: hoveredHour (null | number) via useState, clockRef via useRef. Clock hands are computed from live Date() values: hourRotation = ((hours % 12) + minutes/60) * 30, minuteRotation = minutes * 6 + seconds * 0.1, secondRotation = seconds * 6. Uses polarToCartesian and describeTickLine helpers to render 12 HOUR_TICKS and 60 MINOR_TICKS via SVG paths. The clock wrapper applies lhr-clock-interactive class when hoveredHour is not null, and includes a lhr-clock-glow div. Two floating info pills animate in: lhr-clock-pill--top fades in with y:-8→0 at delay 0.5, lhr-clock-pill--left fades in with x:-8→0 at delay 0.65. Background layer contains 3 decorative circles (lhr-deco-circle--1/2/3), 2 rings (lhr-deco-ring--1/2), and a dot grid. Main content uses fadeUp variant with custom delay parameter. framer-motion initial scale 0.85→1 on clock wrap over 0.8s with custom cubic bezier [0.25, 0.46, 0.45, 0.94].

As a frontend developer, implement the LoginForm section for the Login page. State hooks: email, password (strings), remember (boolean), showPassword (boolean), loading (boolean), errors (object with email/password keys), formError (string). Validation via EMAIL_RE regex and validateField function — email required + regex check, password required + min 6 chars. handleBlur triggers per-field validation updating errors state. handleChange clears field errors on typing and clears formError. handleSubmit prevents default, runs full validation, sets loading true, then simulates async with setTimeout 1600ms. Form card uses framer-motion: initial opacity:0 y:28 → whileInView opacity:1 y:0, viewport once with margin -40px, duration 0.55s custom easing. Header contains lf-icon-wrap with SVG login arrow icon, lf-title 'Welcome back', lf-subtitle 'Sign in to your SK ATTENDANCE account'. Form fields: email input with onBlur/onChange handlers, password input with showPassword toggle button, remember checkbox. Conditional formError banner renders when formError is truthy. Submit button shows loading spinner state.

As a frontend developer, implement the LoginBenefits section for the Login page. Renders a 3-card benefits grid driven by the benefits array: (1) 'Live Attendance' with clock SVG icon, (2) 'Real-time Salary Calculations' with list SVG icon, (3) 'Photo Validation' with camera SVG icon. Animation: containerVariants with staggerChildren 0.12s and delayChildren 0.1s wraps card elements using cardVariants (opacity:0 y:28 → opacity:1 y:0, duration 0.55s, cubic bezier [0.25, 0.46, 0.45, 0.94]). Section heading uses headingVariants (opacity:0 y:20 → opacity:1 y:0, duration 0.5s) with whileInView triggered at viewport margin -60px once:true. Each card renders lbe-card-icon-svg, title, and description text. Cards use lbe-card class with lbe-card-icon-wrap and lbe-card-body structure. Section uses lbe-section > lbe-inner layout with lbe-heading containing a span element for label and heading text.

As a frontend developer, implement the Footer section for the Login page. This is a shared component that may already exist from the Landing page (task a2d6e162-91f2-4098-a508-bd2ad7c31108). The Footer renders 4 footerColumns (Product, Company, Resources, Legal) each with 5 links. Uses columnVariants with custom delay i*0.1 for staggered column reveal (opacity:0 y:24 → opacity:1 y:0). Individual links use linkVariants (x:0 → x:4 on hover). Social icons use socialVariants (rotate:0 → rotate:360 on hover, duration 0.6s easeInOut). Copyright uses copyrightVariants (opacity:0 → opacity:0.6 at delay 0.5). Parallax background layer ftr-parallax-bg uses CSS var(--scroll) with translateY calc(var(--scroll, 0) * -0.15px) containing 3 ftr-deco-circle elements. SVG clock logo in ftr-brand section links to /Landing. Verify reuse from sections/Footer.jsx if it exists.

As a frontend developer, implement the shared Navbar section for the Dashboard page. The Navbar component uses framer-motion's useScroll and useTransform hooks to animate background opacity from transparent to rgba(241, 250, 238, 1) as the user scrolls past 120px. It includes a scroll-triggered backdropFilter blur effect (12px) that activates after 40px scroll. The SVG clock logo animates its circle path and both clock hands via framer-motion pathLength transitions (0→1) with staggered delays (0.6s, 0.8s). Navigation links include: Landing, Dashboard, Employees, Attendance, Reports, Salary with active state via currentPage prop. Mobile hamburger menu uses AnimatePresence for slide-in/out and locks body scroll via overflow:hidden when open. Note: This component may already exist from the Landing or Login pages — reuse if present, otherwise create fresh.

As a Backend Developer, implement FastAPI salary computation endpoints: GET /api/v1/salary/calculate (compute salary for a given employee_id and month, applying rules: unskilled=daily_wage*days_present, skilled=monthly_salary*(days_present+sundays_attended)/30, overtime=(hourly_rate*1.0)*overtime_hours), GET /api/v1/salary/summary (aggregate by contractor_id and month: total payroll, skilled subtotal, unskilled subtotal, overtime total), GET /api/v1/salary/breakdown/{employee_id} (line-item breakdown: base, overtime, sunday_bonus, deductions, net). All calculations must match the SRD overtime (1x rate) and Sunday policy. Note: DashboardSalarySummary (11929a3c), SalaryCalculation (bff35a19) frontend tasks depend on this API.

As a Backend Developer, implement dashboard aggregation endpoints: GET /api/v1/dashboard/overview (returns: total_employees, present_today, absent_today, late_arrivals, pending_approvals, overtime_this_week — all computed in real-time from attendance+employee tables), GET /api/v1/dashboard/recent-activity (last 10 system events: attendance entries, photo validations, salary calculations), GET /api/v1/dashboard/stats (employee skill/contractor breakdown for donut chart). Optimize queries for low latency per non-functional requirements. Note: DashboardOverview (5c4e8986), DashboardHero (add29a5e), DashboardRecentActivity (85c094ee) frontend tasks depend on this API.

As a Tech Lead, verify end-to-end integration between Attendance page frontend sections (LiveDataFlow 0ee3263d, AttendanceClock c4c3279b, ReportingExport c772c14a) and the Attendance API (be-attendance-api) and Photo API (be-photo-api). Ensure: live attendance POST correctly persists records to the database, AttendanceClock TIME_SLOTS render real data from GET /api/v1/attendance/summary, photo capture in AttendanceClock triggers the validation endpoint and shows match/mismatch feedback, check-in/check-out times are correctly stored and displayed. Test real-time update flow end to end.

As a Tech Lead, verify end-to-end integration between Employees page frontend sections (EmployeesGrid 0d90fe12, EmployeesFilters 1aa0149b, EmployeesImport d1a86568) and the Employees CRUD API (be-employees-api). Ensure: EmployeesGrid fetches paginated data from GET /api/v1/employees with filter params, EmployeesFilters correctly maps UI filter state to API query params, EmployeesImport POST /api/v1/employees/bulk-import returns row-level errors that populate MOCK_ERRORS display, template download from GET /api/v1/employees/template works, and employee photo upload (POST /api/v1/photos/upload) integrates with the add employee flow.

As a frontend developer, implement the DashboardHero section for the Dashboard page. It features a KineticGreeting component that renders per-character staggered text reveal using framer-motion for rotating welcome messages from the WELCOME_GREETINGS array (e.g., 'Welcome back, Hemil Shah 👋'). Four QUICK_STATS cards display Present Today (38), Total Employees (45), Pending Approvals (7), and Overtime This Week (12h), each with a custom inline SVG icon and themed icon wrapper classes (dhr-stat-icon-wrap--present, --employees, --pending, --overtime). A role switcher renders three ROLES (Manager, Worker, Contractor) using useAnimation for animated role transitions. Uses framer-motion for card stagger reveal on viewport entry.

As a frontend developer, implement the DashboardOverview section for the Dashboard page. Displays four metric cards (Total Employees: 45, Present Today: 41, Absent Today: 3, Late Arrivals: 1) using lucide-react icons (Users, CheckCircle, XCircle, Clock, TrendingUp, TrendingDown, Minus). Each do-card has a theme variant (--primary, --accent, --secondary, --highlight) with an inline sparkline visualization built from an array of 12 normalized values rendered as SVG polylines. Trend badges display directional indicators with text (e.g. '+2 from yesterday'). Uses framer-motion containerVariants with staggerChildren:0.08 and cardVariants (opacity 0→1, y 24→0) triggered by whileInView with viewport margin -40px. Cards have whileHover y:-4 lift effect.

As a frontend developer, implement the DashboardAttendanceSummary section for the Dashboard page. Integrates react-chartjs-2 Bar chart with Chart.js (CategoryScale, LinearScale, BarElement, Tooltip, Filler registered). Chart data toggles between three periods via tab state: Today (hourly labels 6AM–6PM, data=[2,8,18,22,5,3,1,12,4,6,3,2,1]), This Week (Mon–Sat, data=[40,42,41,39,43,25]), This Month (Week 1–4, data=[210,218,205,195]). Bar color: rgba(42,157,143,0.65) with hover 0.85. Status rows display Check In (08:15 AM), Check Out (05:30 PM estimated), Break Duration (45 min) with custom SVG icons and color-coded classes (das-status-icon--in, --out, --break). Summary stats row shows 4 metrics with an accent highlight for Late Arrivals. Uses AnimatePresence for chart period transitions.

As a frontend developer, implement the DashboardSalarySummary section for the Dashboard page. Features an accordion UI with useState(openCategory) toggling between 'skilled' and 'unskilled' categories. Skilled breakdown: 5 employees (Rajesh Kumar ₹23,350, Sunil Patel ₹21,920, Amit Singh ₹22,280, Vikram Desai ₹23,400, Prakash Mehta ₹21,600) with subtotal ₹1,12,550. Unskilled breakdown: 4 employees with subtotal ₹43,990. Uses framer-motion AnimatePresence with accordionVariants for height:0→auto animated expand/collapse (spring easing [0.25,0.46,0.45,0.94]). Summary cards use cardFadeIn variants with custom delay per index. Lucide icons: DollarSign, Clock, Sun, CheckCircle, ChevronDown, ArrowRight. Two dss-deco decorative background blobs. Section header: 'Salary Calculation Overview — May 2026'.

As a frontend developer, implement the DashboardQuickActions section for the Dashboard page. Renders 5 action cards in a dqa-grid-5 layout using framer-motion containerVariants (staggerChildren:0.08, delayChildren:0.1) and cardVariants (opacity/y animation). Actions: Enter Live Attendance (Clock icon, primary color, href /Attendance), Capture Photo (Camera, secondary, /Attendance), Generate Report (Download, accent, /Reports), Calculate Salary (Calculator, primary, /Salary), Upload Employees (Upload, secondary, /Employees). Each card has an icon, title, description text, and ChevronRight arrow. Three decorative background circles (dqa-deco-circle--1/2/3) positioned absolutely. Section header includes a dqa-label-dot indicator, heading 'Manager & HR Workflows', and subheading text. All triggered via whileInView with viewport margin -30px.

As a frontend developer, implement the DashboardRecentActivity section for the Dashboard page. Renders 8 activity items from activityData array using framer-motion listVariants (staggerChildren:0.08) and itemVariants (opacity 0→1, x -24→0, spring stiffness:220 damping:24). Each item is wrapped in a TiltCard component that implements mouse-tracking 3D tilt effect via onMouseMove handler using getBoundingClientRect to compute dx/dy offsets and apply rotateX/rotateY up to ±4 degrees, resetting on mouseLeave. Status metadata (completed, pending, error) drives lucide-react icons (CheckCircle, Clock, AlertCircle), dot classes (dra-dot--completed/pending/error), and badge classes (dra-badge--completed/pending/error). Section header uses Activity lucide icon. Uses useInView hook for scroll-triggered list animation.

As a frontend developer, implement the DashboardEmployeeStats section for the Dashboard page. Integrates react-chartjs-2 Doughnut chart with Chart.js (ArcElement, Tooltip, Legend registered). Features dual filter state: activeFilter (contractor: 'all'|'hemil'|'raj') and activeDeptFilter (department: 'all'|'construction'|'maintenance'|'logistics'|'cleaning'|'security'). Data for 'all' filter: Skilled=28, Unskilled=17, Total=45 across 5 departments (AMC Civil 15, Maintenance 10, Logistics 8, Cleaning 5, Security 7). Donut chart uses CONTRACTOR_COLORS array ['#F4A261','#E76F51','#2A9D8F','#E9C46A','#A8DADC']. Custom SkillIcon and UnskilledIcon SVG components. Uses containerVariants (staggerChildren:0.08) and itemFadeUp variants. CONTRACTORS and DEPARTMENTS filter button arrays rendered as pill selectors.

As a frontend developer, implement the DashboardContractorSegmentation section for the Dashboard page. Renders contractor cards from contractorData array featuring two contractors: Rajesh Kumar (24 total employees, 21 present, ₹3,12,500 salary) and Mehboob Shaikh (21 total employees, 18 present, ₹2,74,800 salary). Each contractor card expands via AnimatePresence to show a detailed employee roster table with columns: Name, Type (skilled/unskilled badge), Present (boolean icon), and Daily Wage. Employee list includes real names (Amit Sharma, Sunil Patil, Vikram Desai, Salman Khan, Wasim Ansari, etc.) with type and wage data. Uses framer-motion for card expand/collapse accordion animations. Contractor summary shows initials avatar (avatarAlt boolean switches avatar style), totalEmployees, presentToday attendance count, and salaryProcessed formatted in INR.

As a frontend developer, implement the shared Footer section for the Dashboard page. Renders four footerColumns (Product, Company, Resources, Legal) each with 5 links using columnVariants with custom delay (i*0.1) and framer-motion whileInView stagger. Individual links use linkVariants with rest/hover states (x:0→4 slide). Social icons use socialVariants with 360-degree rotation on hover (duration:0.6, easeInOut). Copyright text uses copyrightVariants (opacity 0→0.6, delay:0.5). Background uses ftr-parallax-bg div with three decorative ftr-deco-circle elements and CSS variable --scroll for parallax translateY(-0.15px). Product links include: Live Attendance (/Attendance), Salary Calculator (/Salary), Reports & Export (/Reports), Photo Validation, Dashboard. Note: This component may already exist from the Landing or Login pages — reuse if present.

As a frontend developer, implement the EmployeesHeader section for the Employees page. This section renders a <section className='emh-header'> with two animated blocks using framer-motion: (1) a `motion.div` with `headerAnim` variants (opacity: 0→1, y: 20→0, duration 0.5, custom cubic-bezier) containing a title group ('Employees' h1, subtitle paragraph about 45 employees across contractors) and a `motion.div` badge with `childAnim` variants showing a pulsing dot and '45 Employees' count; (2) a `motion.div` actions bar with `staggerChildren` variants (staggerChildren: 0.1, delayChildren: 0.1) containing three `motion.button` elements — 'Add Employee' (emh-btn--primary, UserPlus icon from lucide-react, whileHover scale 1.03, whileTap 0.97), 'Bulk Import' (emh-btn--secondary, Upload icon), and 'Download Template' (emh-btn--tertiary, Download icon). All buttons have aria-label attributes. This is the first section of the Employees page and must depend on the Dashboard Navbar task to establish page-level chaining.

As a frontend developer, implement the shared Navbar section for the Attendance page. This component already exists from Dashboard page — verify it renders correctly in the Attendance page context. The Navbar uses framer-motion useScroll/useTransform for scroll-driven background opacity (rgba(241,250,238,0–1)), blur(12px) backdrop-filter on scroll, a clock SVG logo with animated pathLength (motion.circle, motion.line), NAV_LINKS array including the Attendance active link, mobile hamburger menu with AnimatePresence toggle, and body overflow lock when mobile menu is open. Confirm the 'Attendance' nav link receives active styling.

As a Backend Developer, implement report generation endpoints: GET /api/v1/reports/attendance (filtered attendance report by contractor_id, date_range, status, returns JSON data for chart rendering), GET /api/v1/reports/salary (salary report by contractor_id and month), GET /api/v1/reports/export/excel (generate and stream .xlsx file using openpyxl or xlsxwriter, with contractor segregation sheets), GET /api/v1/reports/export/pdf (generate and stream PDF using reportlab or weasyprint). Reports must support contractor-level segregation. Note: ReportsExportSection (8c9f9782), ReportsDetailedTable (d4427774), ReportsChartGrid (6b19d7d8) frontend tasks depend on this API.

As a Tech Lead, verify end-to-end integration between Dashboard page frontend sections (DashboardOverview 5c4e8986, DashboardHero add29a5e, DashboardAttendanceSummary 025a299e, DashboardContractorSegmentation 05cbdc41, DashboardSalarySummary 11929a3c, DashboardEmployeeStats 85049936) and backend APIs (be-dashboard-api, be-salary-api, be-contractors-api). Ensure: overview metrics match live attendance records, contractor segmentation card expands with real employee rosters from be-contractors-api, salary summary accordion figures match salary API calculations, employee stats donut chart uses real skill/contractor distribution data.

As a Tech Lead, verify end-to-end integration between the SalaryCalculation frontend section (bff35a19) and the Salary Calculation API (be-salary-api). Ensure: preset selection correctly populates wage/days/OT inputs and calls GET /api/v1/salary/calculate with correct params, live formula results match backend calculation (not just client-side compute), skilled 30-day Sunday policy and 1x overtime rate are correctly applied server-side and reflected in the UI breakdown, and AnimatedValue components update when API response arrives.

As a frontend developer, implement the AttendanceHero section with a three-layer parallax system. The background layer (translateY * -0.3px) contains an animated SVG clock (viewBox 0 0 400 400) with TICK_MARKS array (12 computed line positions, major every 3rd), an hour hand (motion.g rotating 0–360deg over scrollY 0–1600) and minute hand (rotating 0–1080deg). Midground layer (-0.15px) holds two gradient overlays. Foreground content uses containerVariants/childVariants (staggerChildren 0.18, y:28→0, opacity) for headline, subheadline, and CTA. Uses --scroll CSS variable passed from parent scroll handler.

As a frontend developer, implement the AttendanceClock section which renders a 3D interactive clock using @react-three/fiber Canvas and @react-three/drei OrbitControls. The ClockScene component uses useFrame for continuous hand rotation (hourRef * 0.08, minuteRef * 0.4, secondRef * 2.5 rad/s). The clock face is a circleGeometry mesh with ringGeometry accent and torusGeometry outer rim. TIME_SLOTS array (4 items: 9am/12pm/3pm/6pm, each with employees/present/late/absent counts) are rendered as interactive hotspots. useState tracks hoveredSlot and selectedSlot. AnimatePresence renders a details panel with present/late/absent breakdown bars. A Suspense boundary wraps the Canvas with a fallback loader. HOUR_MARKERS (12 positions computed via Math.cos/sin) are rendered as Text3D labels.

As a frontend developer, implement the KeyFeatures section with three feature cards: 'Live Data Entry' (Activity icon), 'Photo Validation' (Camera icon), 'Automated Salary Calculation' (Calculator icon) — all from lucide-react. Uses useInView (once:true, margin:-80px) to trigger cardVariants (opacity:0→1, y:40→0, staggered by index * 0.15) and iconVariants (rotate:-90→0, scale:0.6→1). Three parallax layers: bg (-0.2px) with deco-circles and arc, midground (-0.4px) with blob and 9 dot grid. Each card has a linkLabel anchor to /Attendance or /Salary. Section ref passed to useInView for scroll-triggered animation.

As a frontend developer, implement the UserPersonas section displaying three persona cards: Hemil Shah (Manager), Priya Kapoor (HR Personnel), Rajesh Mehta (Contractor). Each card contains an inline SVG avatar, a responsibilities list (4 items each, some with highlight:true styling), a workflow string, and a learnHref CTA. useState tracks the activePersona index. useCallback manages persona selection. useInView triggers entrance animations. Responsibility items with highlight:true receive distinct color treatment (primary orange). Cards are horizontally scrollable on mobile, grid layout on desktop.

As a frontend developer, implement the LiveDataFlow section with a 4-step timeline (stepContainerVariants/stepItemVariants with x:-24→0 stagger, stepCircleVariants with scale 0.6→1 and teal box-shadow glow, stepTextVariants y:10→0). Steps: '01 Manager Opens SK Attendance', '02 Capture Employee Photo' (Camera icon), '03 Log In/Out Time' (LogIn/LogOut icons from lucide-react), '04 System Confirms Entry'. An SVG connector line uses lineVariants (pathLength 0→1, duration 1.4). Desktop shows a mockup panel using mockupVariants (scale:0.8→1, y:20→0). connectorVariants animates width from 0 to calc(100% - 56px) per step. Parallax background layer included.

As a frontend developer, implement the SalaryCalculation section with an interactive salary calculator. breakdownItems array (4 items: Base Salary teal, Overtime orange, Sunday gold, Deductions coral) each with inline SVG icon, formula string, and result value. presets array (3 items: Unskilled 300/25d, Semi-skilled 450/26d, Skilled 650/26d) drives useState for wage/days/ot inputs. AnimatedValue component renders computed ₹ values. useCallback handles preset selection and input changes. Real-time formula: base = wage * days, overtime = (wage/8) * ot, total = base + overtime. Breakdown cards use framer-motion entrance animations. Responsive: stacks to single column on mobile.

As a frontend developer, implement the ReportingExport section with three report cards: Excel Export, PDF Reports, Contractor Segregation — each with distinct iconClass (excel/pdf/contractor) coloring. useState tracks activeCard. Each card has a preview SVG component: TablePreview (animated rect width 0→312, motion.text rows), DocumentPreview (PDF layout), FilteredPreview (contractor segmentation view). useInView triggers card entrance. useRef on section container. Preview SVGs use motion.rect/motion.text with variants for animated drawing effect (hidden:{width:0} → visible:{width:312}). Buttons show download/generate actions. Responsive: cards stack on mobile.

As a frontend developer, implement the SystemBenefits section displaying 6 benefit cards: Real-Time Sync, Data Security, Mobile-Friendly, Accurate Calculations, Compliance Ready, Easy Reporting — each with an inline SVG icon. Uses useScroll/useTransform for parallax decorative background elements. useInView triggers staggered card entrance animations. Cards arranged in a responsive grid (3-col desktop, 2-col tablet, 1-col mobile). Each card highlights key phrases in description text using secondary teal color. Section uses --scroll CSS variable for parallax background layer offset.

As a frontend developer, implement the GetStartedCTA section with a MagneticButton component using useMotionValue/useSpring (stiffness:180, damping:16) for mouse-tracking magnetic pull effect (clamped ±16px). ClockIcon SVG uses var(--secondary) teal color. Parallax decorative background (translateY * -0.2px) with 3 deco-circles. useScroll/useTransform drives clockParallaxY (0→-240px). useInView triggers stagger variants (y:24→0, delay: i*0.12). Two CTA buttons: primary 'Get Started' (accent color) and secondary 'View Dashboard'. Section ref passed to useInView with margin:-80px.

As a frontend developer, implement the shared Footer section for the Attendance page. This component may already exist from Dashboard/Login pages — verify it renders correctly here. Footer uses footerColumns array (4 columns: Product, Company, Resources, Legal — each with 5 links). columnVariants stagger (i*0.1 delay, y:24→0). linkVariants hover (x:0→4). socialVariants hover (rotate:360, duration:0.6). copyrightVariants (opacity:0→0.6, delay:0.5). Clock SVG logo in brand section. Parallax background (-0.15px) with 3 deco-circles. Motion.whileInView on all animated elements with once:true viewport.

As a frontend developer, implement the shared Navbar section for the Reports page. This component already exists from previous pages — reuse sections/Navbar.jsx which uses framer-motion useScroll/useTransform for scroll-based background opacity animation, useState for mobileOpen/scrolled, animated SVG clock logo with motion.circle/line pathLength animations, NAV_LINKS array with active highlighting for 'Reports', mobile drawer with body scroll lock via useEffect, and backdrop-filter blur on scroll. Wire up currentPage='Reports' prop for active nav link state.

As a Tech Lead, verify end-to-end integration between Reports page frontend sections (ReportsChartGrid 6b19d7d8, ReportsDetailedTable d4427774, ReportsExportSection 8c9f9782, ReportsSalaryBreakdown 1cf54816, ReportsFilterBar 00afdc85) and the Reports & Export API (be-reports-api). Ensure: chart data flows correctly from API into Chart.js datasets, filter bar params propagate to API query, ReportsDetailedTable paginates from real attendance records, Excel/PDF export triggers correct API endpoint and browser download initiates, salary breakdown figures match salary API calculations, contractor segregation filter correctly scopes data.

As a frontend developer, implement the ReportsHero section using framer-motion containerVariants/fadeUpVariants with staggerChildren 0.12. Render a decorative rh-clock-layer containing an animated SVG clock (200x200 viewBox) with outer/inner rings, 12 tick marks computed via trigonometry, continuously rotating hour hand (40s linear infinite) and minute hand (16s linear infinite) via motion.line animate rotate, and a red accent center dot. Include rh-glow-wash radial gradient background element, rh-deco-dot decorative dots, headline/subheadline text with fade-up entrance animations, and stat chips showing key report metrics. Background uses CSS custom properties --primary for stroke colors.

As a frontend developer, implement the ReportsFilterBar section with complex interactive state: useState for selected status chips (STATUS_OPTIONS: present/absent/leave/onduty with dot color classes rfb-dot-present etc.), VIEW_OPTIONS toggle (table/card/chart) with TableIcon/CardIcon/ChartIcon SVG components, CONTRACTORS dropdown with ChevronDown animated rotation via rfb-rotated class and AnimatePresence for dropdown panel, date range inputs with CalendarIcon SVG, and a FilterIcon clear-filters button. All filter controls use framer-motion AnimatePresence for dropdown open/close animations. Chips use rfb-chip-present/absent/leave/onduty CSS classes. useRef for click-outside detection to close dropdown. Fully responsive collapsing layout for mobile.

As a frontend developer, implement the ReportsAttendanceSummary section with four METRICS cards (Total Employees: 45, Present Today: 38, Absent Today: 5, On Leave: 2) using lucide-react icons (Users, UserCheck, UserX, Clock). Each card uses AnimatedCounter component built with framer-motion useMotionValue/useSpring (stiffness:80, damping:20, mass:0.6)/useTransform to animate numbers from 0 to target on scroll into view via useInView with margin '-60px'. Cards use cardVariants with custom delay (i*0.1) stagger. Each card shows iconColor/iconBg from --primary/--secondary/--highlight tokens, trend badge with up/down/neutral directions, and percentage labels. useRef for inView container reference. ras-grid CSS grid layout.

As a frontend developer, implement the ReportsSalaryBreakdown section with three salaryCards (Total: ₹2,84,500 / Skilled: ₹1,96,000 / Unskilled: ₹88,500) each using variant classes (total/skilled/unskilled). Each card contains a MiniBarChart SVG component rendering weeklyData arrays as rect bars with rounded tops, gradient overlay via linearGradient defs, and baseline line. Cards show trend icons (up/down), trendPct percentages with trendPctClass coloring, and meta text. Below, overtimeData section (Skilled: ₹12,400/62hrs at ₹200/hr, Unskilled: ₹6,800/45hrs at ₹150/hr) with their own MiniBarCharts. AnimatePresence used for card entrance. useState for expanded card state. barColor prop passed per variant.

As a frontend developer, implement the ReportsChartGrid section using react-chartjs-2 with Chart.js registration of ArcElement, CategoryScale, LinearScale, PointElement, LineElement, BarElement, Filler, Tooltip, Legend. Render four charts: (1) Doughnut chart for attendance breakdown (Present:32, Absent:5, Leave:6, On Duty:2) with cutout 62%, custom tooltip callbacks showing percentages; (2) Line chart for weekly attendance trend (Mon-Fri: 89/92/87/94/91%) with fill:true, tension:0.4, pointRadius:5; (3) Grouped Bar chart for salary distribution by contractor (Hemil/Shah, Skilled/Unskilled series) with borderRadius:6; (4) Bar chart for overtime hours (Hemil:24h, Shah:38h) with barThickness:52. ChartJS.defaults set for Inter font family. Each chart wrapped in motion.div with entrance animations. Color constants: C_PRIMARY #2A9D8F, C_SECONDARY #E76F51, C_ACCENT #F4A261, C_HIGHLIGHT #E9C46A.

As a frontend developer, implement the ReportsExportSection with two-column layout: left column contains export controls — format radio buttons (Excel .xlsx / PDF) with SVG file icons and rfe-format-dot indicators, CONTRACTORS multi-select checkboxes (Hemil Shah, Rajesh Patel, Skilled Workers, Unskilled Workers) using useState toggleContractor toggling array, date range pickers (dateFrom: 2026-05-01, dateTo: 2026-05-23) with useState. Right column shows a decorative animated bar chart preview using CHART_HEIGHTS array [28,44,22,52,34,42,26,48,36,30,46,38] rendered as SVG bars. Export button triggers download simulation. motion.div entrance animations with framer-motion. Format state defaults to 'excel', contractors state defaults to ['hemil','skilled'].

As a frontend developer, implement the ReportsSampleInsights section with three insight cards using lucide-react Award/Clock/TrendingUp icons and cardVariants (stagger delay i*0.12). Card 1: Top Attendance — attendanceContractors ranked list (Rajesh Kumar 98.5%, Priya Singh 96.2%, Amit Sharma 94.8%) with animated progress bars using rankVariants (x: -12 to 0). Card 2: Overtime Leaders — overtimeEmployees list (Vikram Patel 24h, Sunita Devi 18.5h, Mohammed Khan 15h) with barWidth percentages. Card 3: Salary Trend — SVG area/line chart built via buildSmoothPath() cubic bezier function using salaryValues [28400,31200,33600] for Jan/Feb/Mar with salaryTrendPct +8.9%, area fill path closing back to baseline, data point dots overlaid. All cards use whileInView viewport animations with once:true.

As a frontend developer, implement the ReportsCTA section with framer-motion fadeUpVariant (staggered delay i*0.12, y:28 to 0) for headline/subheadline/button group. Render three trustBadges (Real-time Data/clock, 24/7 Support/headset, Secure Export/shield) using badgeVariant (scale: 0.85 to 1, delay 0.3+i*0.1) with inline SVG icon components ClockIcon/HeadsetIcon/ShieldIcon mapped via iconMap object. Primary CTA button uses primaryBtnVariants (spring stiffness:400, damping:17, hover scale:1.05, boxShadow rgba(244,162,97,0.45)) with BarChartIcon. Secondary button uses secondaryBtnVariants with HeadphonesIcon. Both buttons use motion.button with whileHover/whileTap. Background uses CSS accent gradient.

As a frontend developer, implement the shared Footer section for the Reports page. Reuse sections/Footer.jsx which includes framer-motion columnVariants (stagger delay i*0.1, y:24) for four footerColumns (Product/Company/Resources/Legal) each with 5 links using linkVariants (x:0 to 4 on hover). Footer brand section has animated SVG clock logo, tagline, and social icon buttons with socialVariants (rotate 0 to 360 on hover). Parallax background via ftr-parallax-bg div with CSS var(--scroll) translateY(-0.15px). Three decorative ftr-deco-circle elements. copyrightVariants fade-in with delay:0.5. Product column links include Reports & Export href='/Reports'. whileInView viewport triggers with once:true.

As a frontend developer, implement the ReportsDetailedTable section with a 10+ row EMPLOYEES dataset (Rajesh Kumar EMP-001, Amit Patel EMP-002, Sunita Devi EMP-003, etc.) including name, id, contractor, date, checkIn/checkOut, hours, status (Present/Absent/Leave/On-Duty), photoValidated boolean, salary, and notes fields. Build interactive table with useMemo for filtered/sorted data, useState for sort column/direction, selected rows, expanded row (notes drawer), and search query. Implement status badge chips with color coding, photoValidated checkmarks, sortable column headers with sort direction indicators, row expansion via AnimatePresence for notes panel, and bulk selection checkboxes. Responsive: collapses to card view on mobile. Pagination or virtual scroll for large datasets.