cool-idea

As a frontend developer, implement the LoginHero section for the Login page. Uses React Three Fiber Canvas with @react-three/drei components (Box, Sphere, MeshDistortMaterial). Contains a WarehouseAccent component with four refs (groupRef, cubeRef, sphere1Ref, sphere2Ref) and useFrame animation loop. The main emerald cube (Box args=[0.72,0.72,0.72]) uses MeshDistortMaterial with color #2A9D8F, emissive #1A6D5F, distort=0.08, speed=0.8. Two accent spheres orbit: sphere1 (Sphere args=[0.14,16,16], color #F4A261) and sphere2 (Sphere args=[0.1,16,16], color #A8DADC). Six micro-chip meshes are generated via useMemo with randomized theta/radius orbital positions. useFrame animates groupRef rotation (sin waves), cubeRef rotation increments and Y bobbing, sphere refs with sin/cos positional offsets. Imports THREE and LoginHero.css.

As a frontend developer, implement the LoginForm section for the Login page. Component uses seven useState hooks: email, password, remember, showPassword, loading, errors (object), and apiError (string). Includes a validate() function checking non-empty email and password length >= 6. handleSubmit is async, calls validate(), sets loading, runs a simulated 1400ms auth delay, then sets apiError 'Invalid credentials'. clearFieldError removes specific field error and clears apiError. Renders section.lf-root > div.lf-card containing: lf-header with h2 'Welcome back' and subtitle; conditional lf-alert div with SVG circle-info icon and apiError text (role=alert); a form (lf-form, noValidate) with email field (lf-field, input id=lf-email, envelope SVG icon, dynamic lf-input class with lf-invalid on error, onChange clears field error), password field with show/hide toggle button and eye SVG, remember-me checkbox (lf-check-group), submit button showing spinner SVG when loading or text 'Sign In'. Requires backend API integration for real auth. Imports LoginForm.css.

As a frontend developer, implement the LoginFooter section for the Login page. Stateless functional component rendering footer.lf-root > div.lf-inner containing: a decorative lf-divider (aria-hidden); a lf-links row with two anchor tags — 'Privacy Policy' linking to /Privacy and 'Terms of Service' linking to /Terms, separated by a lf-sep span (aria-hidden, middot); and a lf-copyright paragraph displaying dynamic currentYear via new Date().getFullYear() followed by 'cool-idea. All rights reserved.' This is a Login-specific footer (not the global site footer) — distinct from any shared Footer component on other pages. Imports LoginFooter.css.

As a frontend developer, implement the DashboardTopBar section for the Dashboard page. This header component uses useState for openMenu (null | 'notif' | 'profile') and useRef+useEffect for outside-click dismissal. It renders: (1) a brand logo using the Boxes lucide icon with 'cool-idea Inventory' text linked to /Dashboard; (2) a breadcrumb nav with ChevronRight separators across Dashboard → Inventory → Item Detail routes with aria-current on the active crumb; (3) a notification bell button using Bell icon with a numeric badge showing notifications.length (3), toggling a dtb-panel dropdown with 3 mock notification entries each styled with var(--secondary/primary/accent) color dots and relative timestamps; (4) a user profile button with ChevronDown toggling a second dtb-panel showing user info, links to Dashboard/Settings/Profile routes using LayoutDashboard/SettingsIcon/User icons, and a LogOut action. Both panels are mutually exclusive via the toggle() helper. All styles in DashboardTopBar.css with dtb- prefixed class names.

As a Frontend Developer, configure React Router (react-router-dom) for the application with routes for all 12 pages: /, /Login, /Dashboard, /Inventory, /AddItem, /ItemDetail/:id, /EditItem/:id, /Reports, /UserManagement, /UserDetail/:id, /Settings, /Profile. Set up a root App component with BrowserRouter, a layout wrapper that includes shared Navbar/Sidebar conditionally, and lazy loading for all page components using React.lazy and Suspense.

As a Backend Developer, implement authentication API endpoints using FastAPI and JWT. Endpoints: POST /api/v1/auth/login (accept email+password, return access_token and refresh_token with user role/permissions), POST /api/v1/auth/logout (invalidate token), POST /api/v1/auth/refresh (rotate refresh token), GET /api/v1/auth/me (return current user profile). Implement password hashing with bcrypt, JWT creation/verification with python-jose, and role-based permission middleware. Define role constants: warehouse_manager, staff_member, admin with permission sets matching the SRD. Add token blacklisting via Redis or DB table.

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. This aside component uses useState for role (defaulting to 'admin'). It renders: (1) a brand mark using Warehouse lucide icon with 'cool-idea Inventory' text; (2) a role-switcher tab bar (role='tablist') with three buttons for 'manager', 'staff', 'admin' — clicking changes the active role and filters the visible nav items via NAV_ITEMS[].roles array; (3) a section label 'Menu'; (4) a nav rendering visibleItems as anchor tags with dsb-link and is-active classes, each showing a lucide icon (LayoutDashboard, Boxes, BarChart3, Users, Settings, UserCircle) sized 18, an optional badge (e.g. '128' for Inventory, 'Admin' soft badge for User Management); (5) a bottom profile strip showing initials avatar, name, role title, and a logout link — profile data sourced from ROLE_PROFILE keyed by active role. Component accepts activePath prop defaulting to '/Dashboard'. All styles in DashboardSidebar.css with dsb- prefix.

As a frontend developer, implement the DashboardWelcome section for the Dashboard page. This section component uses useState for greeting and dateStr, both initialised from pure helper functions timeGreeting() (returns 'Good morning/afternoon/evening' based on current hour) and todayDate() (formats date with en-IN locale, weekday+day+month+year). A useEffect runs setInterval every 60 000 ms to refresh both values, clearing on unmount. It renders: (1) a dw-greet-top row with an h1 greeting interpolating the user name 'Ravi' in a dw-name span, and a ShieldCheck-less role badge 'Warehouse Manager' with an animated dw-badge-dot; (2) a status paragraph mentioning 3 low-stock items; (3) a dw-metrics row mapping QUICK_METRICS (Total Items 128, Low Stock 12 with TrendingUp icon in var(--accent), Alerts 3 with AlertTriangle icon in var(--secondary)) — each metric card conditionally applies borderColor and color inline styles based on accent/warn flags. All styles in DashboardWelcome.css with dw- prefix.

As a frontend developer, implement the DashboardStatsGrid section for the Dashboard page. The section renders 6 KPI cards from the STATS array (Total Items 3,847 / Low Stock Items 23 / Recent Transactions 142 / Items Updated Today 37 / Active Categories 48 / Pending Orders 16) each with a variant class (primary, secondary, accent, highlight, primary-dark). Each card is implemented as a KPICard sub-component that uses useState for inline style and useRef+useCallback for mouse-tracking: onMouseMove calculates rotateX/rotateY (±3deg) from cursor position within the card bounding rect, applies perspective(600px) 3D tilt transform and sets --mx/--my CSS custom properties for a radial shimmer effect; onMouseLeave resets the style object. Each card renders: a dsg-card-accent decorative bar, an icon-wrap with the stat's lucide icon (Boxes, AlertTriangle, ListOrdered, TrendingUp) at size 22, the trend badge using TREND_CONFIG mapping (ArrowUpRight=dsg-trend-up, ArrowDownRight=dsg-trend-down, Minus=dsg-trend-neutral), the stat value, label, and trend label text. All styles in DashboardStatsGrid.css with dsg- prefix.

As a frontend developer, implement the DashboardQuickActions section for the Dashboard page. This is a stateless presentational section rendering a dqa-grid of 4 action anchor elements from the ACTIONS array: Add Stock Item (PackagePlus, /AddItem, Manager), Generate Report (FileText, /Reports, Staff/Manager), Manage Users (Users, /UserManagement, Admin), View Settings (Settings, /Settings, Admin). Each dqa-btn anchor renders: a dqa-btn-icon span with the lucide icon at size 21, a dqa-btn-text span containing the label and desc, a dqa-btn-role badge showing the role string, and an ArrowRight icon (size 18) with dqa-btn-arrow class. The header uses a decorative two-line layout (dqa-header-line / dqa-header-label / dqa-header-line). Note: roles array on each action item is present in data but not yet used for filtering in this stateless version. All styles in DashboardQuickActions.css with dqa- prefix.

As a frontend developer, implement the DashboardActivityOverview section for the Dashboard page. This component integrates Chart.js and Three.js. It uses useState for activePeriod ('7d'|'30d'|'90d'), useRef for threeRef (Three.js mount target) and mountRef. CHART_DATA_BY_PERIOD provides labels, itemsIn, itemsOut, adjustments arrays and summary totals for each period. A useMemo computes chartConfig (Chart.js options) with responsive layout, index-mode tooltip styled with #264653 background/Inter font, x/y grid using rgba(233,108,51,0.08), and line tension 0.3. The Line chart from react-chartjs-2 is registered with CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip, Legend, Filler. A Three.js scene is mounted into mountRef using useRef/useEffect for a decorative 3D background element (scene setup, renderer, animation loop, resize handling, cleanup on unmount). Period switcher renders PERIODS tab buttons toggling activePeriod. Summary stats display totalIn, totalOut, netChange with a TrendingUp icon. All styles in DashboardActivityOverview.css.

As a frontend developer, implement the DashboardRecentItems section for the Dashboard page. This component uses useState for activeTab ('items'|'activity'), expandedId (string|null for row expand), and sortConfig ({key, dir}). It renders two tabs — 'Recent Items' and 'User Activity'. The Recent Items tab maps RECENT_ITEMS (8 entries: Hydraulic Pump, Steel Brackets, Industrial Lubricant, Copper Wiring, Safety Goggles, Packaging Foam, Conveyor Belt, Aluminium Sheets) showing item name, category, action badge (Added/Updated/Removed mapped to PlusCircle/Edit3/MinusCircle icons), status chip (in_stock/low_stock/out_stock with AlertTriangle for low/out), user initials avatar, and timestamp. Clicking a row toggles expandedId to show an expanded detail panel with ChevronDown/ChevronUp toggle. The User Activity tab maps USER_ACTIVITIES (8 entries) showing user initials, role, action (Added Item/Updated Stock/Generated Report/Changed Permissions/Removed Item/Configured Alert mapped to Package/Edit3/FileText/UserPlus/MinusCircle/Settings2 icons), target, timestamp, and status badge (completed/pending/cancelled). A Clock icon appears in the section header. Sortable columns use sortConfig state. Empty state renders Archive/Inbox icons. All styles in DashboardRecentItems.css with dri- prefix.

As a frontend developer, implement the PageHeader section for the UserManagement page. This section renders a `ph-root` section containing a `ph-inner` div with a left column (`ph-left`) featuring a `ThreeDAccent` 3D canvas component and a `ph-title-block` with an 'Admin Panel' label and 'User Management' h1. The `ThreeDAccent` component uses `@react-three/fiber` Canvas with an `AccentShape` mesh — an `IcosahedronGeometry(0.85, 1)` with `meshPhysicalMaterial` (color #F4A261, roughness 0.28, metalness 0.05, clearcoat 0.4). `AccentShape` uses `useFrame` for smooth lerp rotation and a global `pointermove` listener via `useRef(targetRot)` to make the shape react to cursor position. The Canvas has camera at [0,0,2.6] fov 38, with ambient and two directional lights (one teal-tinted at [-3,-1,-2]). The header also includes an inline `SearchIcon` SVG in a search input and a `PlusIcon` SVG CTA button. Imports `PageHeader.css`. Note: DashboardTopBar and DashboardSidebar components may already exist from the Dashboard page — reuse shared layout primitives where applicable.

As a frontend developer, implement the SettingsNav section for the Settings page. Build a collapsible sidebar navigation using `useState` for `collapsed` (default true) and `activeId` (default 'system') state. Render two `navGroups`: 'Settings' (System, Notifications, Integrations with lucide icons Settings, Bell, Link2) and 'Advanced' (Danger Zone with AlertTriangle icon and `danger` styling). The toggle button uses `ChevronUp` icon and toggles `sn-collapsed` / `sn-nav-collapsed` / `sn-nav-expanded` CSS classes. Each nav link applies `sn-active` for the active item and `sn-danger` for danger items, with `aria-current='page'` on active links. Clicking a link calls `handleLinkClick(id)` to update `activeId`.

As a frontend developer, implement the InventorySidebar section for the Inventory page. This sidebar uses useState hooks for activeQuick, activeCat, activeStatuses (multi-select array), and mobileOpen state. Render three groups: (1) Quick Views list with lucide icons (Package, PlusCircle, Clock, AlertTriangle) showing item counts and a warn badge for Low Stock; (2) Categories list with color-coded dot indicators (isb-cat-dot) for Plumbing, Electrical, Construction, Safety Gear with toggle selection; (3) Stock Status checkboxes for In Stock, Low Stock, Out of Stock with CSS classes isb-in/isb-low/isb-out. Includes a 'Clear All' button that resets activeCat and activeStatuses, and an activeFiltersCount badge. Mobile open/close toggle with X icon. Apply InventorySidebar.css styles.

As a frontend developer, implement the InventoryHeader section for the Inventory page. This header uses useState for role ('Staff Member' default) and viewMode ('table'/'grid' toggle). Renders a breadcrumb nav with Home icon and ChevronRight separators linking Dashboard → Inventory. Displays a role-driven title block where the roles object maps 'Warehouse Manager', 'Staff Member', and 'Admin' to different primaryLabel/primaryIcon/primaryHref/secondaryLabel/secondaryIcon/subtitle configurations using lucide icons (Plus, FileText). Includes an ih-meta badge showing item count with a dot indicator, and an ih-view-toggle button group with LayoutGrid/List icons switching viewMode state. Apply InventoryHeader.css styles.

As a frontend developer, implement the InventoryFiltersSearch section for the Inventory page. This component uses useState for query, showAutocomplete, highlightIndex, showDatePanel, dateFrom, and dateTo; plus useRef for inputRef and wrapperRef; plus useCallback and useEffect for outside-click dismissal. Implements a live search over MOCK_ITEMS (10 items with name, sku, category fields) with grouped autocomplete dropdown organized by category. Supports keyboard navigation via ArrowUp/ArrowDown/Enter/Escape on the suggestion list. Includes a clear button (X icon) and a Calendar date-range panel toggle (showDatePanel) with dateFrom/dateTo inputs and an active hasDateFilter indicator badge. Apply InventoryFiltersSearch.css styles.

As a frontend developer, implement the InventoryTable section for the Inventory page. This is the most complex section, using useState, useMemo, useRef, useCallback, and Suspense. Renders a sortable data table of 12 inventoryData items (ITM-001 to ITM-012) with columns: SKU, Item Name, Category, Current Stock, Reorder Level, Status, Unit Price, and an Actions column with Eye/Pencil/Trash2 lucide icon buttons. Status cells use statusLabels map rendering instock/lowstock/outofstock CSS classes. Integrates a @react-three/fiber Canvas with OrbitControls, Text, and Html from @react-three/drei for a 3D visualization panel (useFrame animation). Includes an inline search with Search/X icons, useMemo-filtered rows, and a Package icon empty state. Apply InventoryTable.css styles.

As a frontend developer, implement the ReportsHeader section for the Reports page. Build the `rh-root` section component using `useState` to hold a hardcoded `role` ('Warehouse Manager'). Render a breadcrumb `<nav>` using `React.Fragment` to map over `breadcrumbItems` (Dashboard → Reports) with a `/` separator and an active-state span for the current page. Render an `rh-title-row` containing an `rh-title-block` (h1 with `rh-title-accent` span and a role-driven subtitle from `roleGuidance` lookup object) alongside an `rh-role-badge` that shows a colored `rh-role-dot`, an inline SVG user icon (person + circle), and the role string. Below, render `rh-action-row` with a `Generate New Report` button featuring a plus SVG icon. Apply all scoped BEM class names from ReportsHeader.css. Note: Navbar component may already exist from the Dashboard page.

As a frontend developer, implement the ProfileHeader section for the Profile page. This section renders a `<section className="ph-root">` with a decorative SVG warehouse shelf motif (`ph-bg-accent`) using `<rect>` elements to simulate shelf beams and box placeholders styled with `--primary`, `--primary-light`, `--accent`, `--highlight`, and `--secondary` CSS variables. Includes a breadcrumb `<nav className="ph-breadcrumb">` built from a static `breadcrumbs` array using `React.Fragment` and `ChevronRight` separators from lucide-react, with an active crumb rendered as a `<span>` and inactive crumbs as `<a>` tags. The title row (`ph-head-row`) contains a `ph-title-block` with a `User` icon badge and an `<h1>` heading, plus a `ph-action-pill` anchor linking to `/Settings` with an `Edit3` icon. A `ph-shelf-bar` decorative bar closes the inner layout. No state hooks. Depends on Dashboard's DashboardTopBar task to establish page-level chain.

As a Backend Developer, implement the inventory stock item REST API using FastAPI. Endpoints: GET /api/v1/inventory (list with pagination, filtering by category/status/search, sorting), POST /api/v1/inventory (create new item — Warehouse Manager only), GET /api/v1/inventory/{id} (get item detail), PUT /api/v1/inventory/{id} (update item — Warehouse Manager only), DELETE /api/v1/inventory/{id} (soft delete — Warehouse Manager only), GET /api/v1/inventory/stats (summary counts: total, low stock, out of stock, categories). Apply JWT auth middleware and role-based access control. Return paginated responses with total count, page, per_page metadata. Validate SKU uniqueness and required fields.

As a Backend Developer, implement user management REST API using FastAPI. Endpoints: GET /api/v1/users (list users with pagination and filters — Admin only), POST /api/v1/users (create user — Admin only), GET /api/v1/users/{id} (get user detail with audit log), PUT /api/v1/users/{id} (update user profile, role, permissions — Admin only), DELETE /api/v1/users/{id} (deactivate user — Admin only), PUT /api/v1/users/{id}/role (change role — Admin only), PUT /api/v1/users/{id}/permissions (update permissions — Admin only), POST /api/v1/users/bulk-action (bulk deactivate/assign-role — Admin only), GET /api/v1/users/{id}/audit-log (get audit trail for user). Enforce Admin-only access via dependency injection.

As a Backend Developer, implement the system settings REST API using FastAPI. Endpoints: GET /api/v1/settings (get all system configuration values — Admin only), PUT /api/v1/settings (update multiple settings at once — Admin only), GET /api/v1/settings/{key} (get single setting value), PUT /api/v1/settings/{key} (update single setting), POST /api/v1/settings/reset (reset all settings to defaults — Admin only), GET /api/v1/settings/integrations (list integration configs: Slack, GitHub, Jira, Stripe with status), PUT /api/v1/settings/integrations/{service} (update integration config), DELETE /api/v1/settings/integrations/{service} (disconnect integration). Validate settings values (currency enum, timezone enum, tracking method enum). Log all settings changes to AuditLog.

As a Backend Developer, implement the user profile REST API using FastAPI. Endpoints: GET /api/v1/profile (get current authenticated user profile), PUT /api/v1/profile (update profile fields: name, email, phone, department, warehouse_location), PUT /api/v1/profile/password (change password — requires current_password, new_password, confirm), PUT /api/v1/profile/preferences (update preferences: language, theme, timezone, email_notifications, sms_notifications, notification_frequency, channels), GET /api/v1/profile/sessions (list active sessions with device/location/ip info), DELETE /api/v1/profile/sessions/{session_id} (revoke session), DELETE /api/v1/profile/account (delete/deactivate own account — danger zone). All endpoints require valid JWT. Validate email uniqueness on update.

As a Frontend Developer, set up a centralized API client layer using axios or fetch with interceptors. Create an apiClient module with: base URL from environment variable REACT_APP_API_URL, request interceptor to attach JWT Authorization header from localStorage/sessionStorage, response interceptor to handle 401 (redirect to /Login), 403 (show permission error), and 500 (show global error toast). Create typed API service modules: authService, inventoryService, userService, reportsService, settingsService, profileService, dashboardService — each exporting async functions corresponding to backend endpoints. Export a useApi custom hook with loading/error/data state for React components. Note: this task must complete before frontend section tasks that call real APIs can be wired up.

As a frontend developer, implement the UserTable section for the UserManagement page. This section uses a large static `USERS_DATA` array (20 users with id, name, email, role, status fields) and constants `ROWS_PER_PAGE = 8`, `ROLE_CONFIG` (Admin/Manager/Staff badge class mappings), and `AVATAR_COLORS` array. State hooks include `useState` for current page, sort column/direction, selected row IDs, filters, and search query. Helper functions `getInitials(name)` and `getAvatarColor(name)` (hash-based color assignment) drive avatar rendering. `useMemo` is used for filtered+sorted+paginated user slices. The table renders per-row checkboxes for selection, color avatar circles, user name/email, role badges (`ut-role-badge--admin`, `ut-role-badge--manager`, `ut-role-badge--staff`), status indicators, and an actions menu. Includes a THREE.js import (likely for a subtle canvas accent). Pagination controls navigate between pages. Uses `useRef`, `useEffect`, `useCallback` for scroll/focus management. Imports `UserTable.css`. This section is independent of UserModal and BulkActions and can be built in parallel.

As a frontend developer, implement the UserModal section for the UserManagement page. The `UserModal` component manages state via `useState` hooks for `isOpen`, `fullName`, `email`, `role` (default 'staff_member'), and `permissions` (array). It renders a backdrop div (`umd-backdrop`) with click-to-close, and an inner `umd-panel` dialog (role='dialog', aria-modal='true'). The header includes a user-plus SVG icon, 'Add User' h2, and a close button with an X SVG. The body is a form with controlled inputs: a text input for Full Name (id='umd-fullname'), an email input, a role `<select>` populated from `ROLES` array (warehouse_manager, staff_member, admin), and a permissions checklist from `PERMISSIONS` array (add_stock, edit_stock, delete_stock, view_reports, manage_users — each with a label and desc). `togglePermission` handler toggles permission values in the array. `handleSubmit` logs the payload and closes modal; `handleCancel` closes via backdrop or close button. Returns null when `isOpen` is false. Imports `UserModal.css`. Independent of UserTable and BulkActions — can be built in parallel.

As a frontend developer, implement the BulkActions section for the UserManagement page. The `BulkActions` component uses `useState` for `expanded` (boolean, default false) and `selectedCount` (number, default 4). It renders an inline SVG icon set `BA_ICONS` covering checkSquare, userPlus, shield, userX, trash, and chevronDown icons. The toolbar displays a selection summary string ('1 user selected' / 'N users selected') using `selectionText`. Action buttons include: `ba-btn--primary` 'Assign Role' (userPlus icon), `ba-btn--outline` 'Update Permissions' (shield icon), `ba-btn--warning` 'Deactivate' (userX icon), and a destructive 'Delete' button (trash icon). A chevronDown toggle button controls the `expanded` state for a collapsible panel. Each button calls `handleAction(action)` which logs the action and selected count. Imports `BulkActions.css`. Independent of UserTable and UserModal — can be built in parallel.

As a frontend developer, implement the SettingsHeader section for the Settings page. Build a 3D gear hero using `@react-three/fiber` Canvas with a custom `GearMesh` component that uses `THREE.Shape` to procedurally generate an 8-tooth gear outline via `extrudeGeometry` with bevel settings (depth 0.18, bevelThickness 0.06). Apply `meshPhysicalMaterial` with color `#2A9D8F`, metalness 0.15, roughness 0.22, clearcoat 0.3. The `SettingsIconScene` adds ambient + two directional lights (one with `#F4A261` tint) and `OrbitControls` with `autoRotate` (speed 1.6), damping 0.12, zoom/pan disabled. The `SettingsHeader` component renders breadcrumbs (Dashboard → Settings) using `ChevronRight` separators and a `saveStatus` badge that switches between `sh-save-status--saved`, `sh-save-status--unsaved`, and `sh-save-status--saving` classes with corresponding labels.

As a frontend developer, implement the SystemConfiguration section for the Settings page. Build a multi-field settings form with `useState` hooks for: `appName` ('cool-idea Inventory'), `darkMode` (false), `timezone` ('Asia/Kolkata'), `trackingMethod` ('fifo'), `lowStockThreshold` ('10'), `currency` ('INR'), and `saved` (false). Render three subsections: 'Application Identity' (appName text input, darkMode toggle), inventory config (timezone select from 6 options, trackingMethod select from 4 FIFO/LIFO/weighted/specific options, lowStockThreshold number input), and currency (currency select from 6 options). `handleSave` sets `saved` to true then clears after 2800ms; `handleReset` restores all defaults. Show a `sc-toast` with `CheckCircle2` icon when `saved` is true. Include Save and Reset buttons. Uses CSS classes prefixed with `sc-`.

As a frontend developer, implement the NotificationSettings section for the Settings page. Build a notification preferences card with `useState` for `emailEnabled` (true), `smsEnabled` (false), `frequency` ('immediate'), `channels` (['inventory_alerts','system_updates']), and `saved` (false). Use `useRef` for `toastTimer` and `useEffect` to clear the timer on unmount. Render toggle switches (role='switch', aria-checked) for email and SMS notifications using `ns-toggle`/`ns-active` CSS classes with `ns-toggle-track`, `ns-toggle-track-on`, `ns-toggle-thumb` spans. Render a frequency dropdown with `ChevronDown` icon (immediate/daily/weekly options). Render three channel checkboxes from `channelOptions` (inventory_alerts, user_reports, system_updates) with `toggleChannel` callback. `handleSave` sets `saved` for 2400ms, toggling `ns-toast` / `ns-toast ns-toast-leaving` CSS. Save button uses `Save` lucide icon. Uses `useCallback` for `toggleChannel` and `handleSave`.

As a frontend developer, implement the IntegrationSettings section for the Settings page. Build a complex 3D integration hub using `@react-three/fiber` Canvas with `OrbitControls`, `Sphere`, `Line`, and `Html` from `@react-three/drei`. Render `IntegrationNode` components positioned in a circular layout (radius 2.2, angle computed as `(index/total)*Math.PI*2`) each with a `torusGeometry` outer ring and inner core sphere colored by `STATUS_COLORS` (connected: #2A9D8F, error: #E76F51, pending: #E9C46A). Nodes support `onPointerOver`/`onPointerOut`/`onClick` with `hoveredId` state for scale transitions (ring: 1→1.45, core: 1→1.18) and cursor changes. Manage `INITIAL_INTEGRATIONS` state (Slack, GitHub, Jira, Stripe) with connected/error statuses. Render integration cards below the 3D scene with status badges, service URLs, and action buttons using Plus, Copy, Check, Trash2, Unlink, Globe, Key, RefreshCw, AlertCircle lucide icons. Use `useState`, `useRef`, `useCallback`, `useMemo`, `useEffect` hooks throughout.

As a frontend developer, implement the DangerZone section for the Settings page. Build a high-risk actions panel with `useState` for `modal` (null). Define three `actions` array entries: 'export' (Download icon, `dz-btn-export` class), 'reset' (RefreshCw icon, `dz-btn-reset` class, irreversible warning), and 'delete' (Trash2 icon, `dz-btn-delete` class, permanent warning). Each action renders in a `dz-action` div with title, description, optional warning text, and an action button. `openModal(id)` and `closeModal()` manage the confirmation modal. The `activeAction` is found via `actions.find(a => a.id === modal)` and rendered as a confirmation overlay with `confirmTitle`, `confirmDesc`, and an X button (lucide `X` icon) to dismiss. Uses `AlertTriangle` icon in the header. Uses CSS classes prefixed with `dz-`.

As a frontend developer, implement the Footer section for the Settings page. Note: this Footer component may already exist from previous pages and can be reused. Build a static footer with a decorative SVG shelf-line illustration (rgba teal/orange/red boxes at fixed positions). Render three `linkGroups`: Inventory (Dashboard, Inventory, Add Item, Reports), Manage (User Management, User Detail, Settings, Profile), Account (Login, Item Detail, Edit Item). Render social icons row with Github, Linkedin, Twitter, Mail from lucide-react. Brand block shows 'cool' + 'idea' with a `ftr-mark-box` decorative element and tagline copy. Dynamic `year` via `new Date().getFullYear()`. Uses CSS classes prefixed with `ftr-`.

As a frontend developer, implement the InventoryPagination section for the Inventory page. Uses useState for perPage (default 10), currentPage (default 1), and sizeOpen (dropdown toggle). Implements a generatePageNumbers utility that produces ellipsis-aware page arrays for large page counts (>7 pages). Renders an ipg-summary block with total item count and current range (startItem–endItem). Renders ChevronLeft/ChevronRight arrow buttons with ipg-disabled state, a numbered page button list with ipg-active-page styling and aria-current, and ellipsis spans. Includes a PAGE_SIZE_OPTIONS dropdown [10, 25, 50] with ChevronUp icon and changeSize callback that preserves the visible item position across size changes. Apply InventoryPagination.css styles.

As a frontend developer, implement the ReportsFilters section for the Reports page. Build the `rf-root` panel using five `useState` hooks: `reportType`, `startDate`, `endDate`, `status`, and `category`. Render a title row with a `SlidersHorizontal` lucide icon. Render a filter grid with: a `<select>` for report type (mapped from `REPORT_TYPES` constant array with 7 options including inventory_summary, stock_level, movement_log, valuation, low_stock_alert, expiry_tracking), two `<input type='date'>` fields for start/end date range, a `<select>` for status (generated, in_progress, failed, archived from `STATUS_OPTIONS`), and a `<select>` for category (raw_materials, finished_goods, packaging, consumables, electronics, perishables from `CATEGORY_OPTIONS`). Implement `getActiveFilters()` that derives an active filter chip array from state; render each chip with a `<X>` lucide icon for individual clear. Implement `handleResetAll` to clear all five state values and a `handleGenerate` handler that logs filter state to console. Include a `RotateCcw` reset button and a `BarChart3` / `Plus` generate button. Import `ChevronDown` for styled selects. Apply all scoped BEM class names from ReportsFilters.css.

As a frontend developer, implement the ReportsList section for the Reports page. Build a paginated reports table using `useState` and `useMemo`. Implement the `StatusOrb` sub-component that renders a `<canvas>` element using the raw Canvas 2D API (no react-three/fiber): on mount via `useEffect`, scale by `devicePixelRatio`, read `STATUS_ORB_COLORS` lookup (keyed by completed/pending/failed/processing with fill, glow, pulse values), and run a `requestAnimationFrame` animation loop that draws a pulsing glow ring (`globalAlpha * pulseAmp`), a core radial gradient sphere, and a specular highlight circle. Cancel the animation frame on unmount. Import `Download`, `FileText`, `FileSpreadsheet`, `ClipboardList`, `Search`, `ChevronLeft`, `ChevronRight` from lucide-react. Build the main table with a search `<input>` using the `Search` icon, column headers, and rows that embed `<StatusOrb status={row.status} />` as an inline badge. Implement left/right pagination controls with `ChevronLeft`/`ChevronRight` buttons. Apply all scoped BEM class names from ReportsList.css.

As a frontend developer, implement the ReportsStats section for the Reports page. Build the `ReportsStats` component that renders four stat cards from a `stats` array (ids: total, avg_time, common_type, pending) each containing an inline SVG icon, a metric value string ('247', '1.8s', 'Stock Level', '12'), and a description string. Integrate a Three.js background canvas via `useRef` and `useEffect`: import `* as THREE from 'three'`, create a `THREE.Scene`, `PerspectiveCamera` (fov 45, z=30), and `WebGLRenderer` with `alpha: true` and `antialias: true`. Generate 80 floating particles using `THREE.BufferGeometry` with `Float32Array` positions (spread ±20x, ±10y, ±7.5z) and a `sizes` Float32Array. Run an animation loop with `requestAnimationFrame` and dispose of the renderer and geometry on component unmount. Set `renderer.setPixelRatio(Math.min(dpr, 2))`. Apply all scoped BEM class names from ReportsStats.css.

As a frontend developer, implement the ReportsExport section for the Reports page. Build the `ReportsExport` component with three `useState` hooks: `selectedIds` (a `Set`), `format` ('csv' default), and `selectAll` (boolean). Render an `rex-heading` with a `FileSpreadsheet` lucide icon and 'Bulk Export' title. Inside `rex-card`, render an `rex-select-all-row` with a checkbox that calls `toggleSelectAll` — when toggling on, sets `selectedIds` to all 8 report IDs from `REPORT_ITEMS` constant; when toggling off, clears the Set. Display `rex-count-badge` showing `selectedIds.size`. Map over `REPORT_ITEMS` (8 entries: rpt-001 through rpt-008, each with name, type csv/pdf, date, author) to render `rex-item` divs that toggle selected state via `toggleItem(id)` using Set spread/delete pattern, applying `rex-item--selected` class conditionally. Render a format toggle between csv and pdf options. Implement `handleExport` that filters selected items and calls `alert` with count and format. Import `Download` and `FileSpreadsheet` from lucide-react. Apply all scoped BEM class names from ReportsExport.css.

As a frontend developer, implement the ProfileAvatarCard section for the Profile page. This is a complex 3D interactive section using `@react-three/fiber` Canvas and `@react-three/drei` Html. It renders a 3D warehouse shelf scene with 15 `SHELF_DATA` items (Steel Bolts, PVC Pipes, Cement Bags, Safety Gloves, etc.) mapped to interactive `ShelfBox` mesh components. Each `ShelfBox` uses `useRef` and `useFrame` for smooth scale animation (`targetScaleY` lerp between 0.22 and 0.32) and emissive intensity transitions on hover/select states. A `ShelfFrame` component renders horizontal shelf beams. State includes `useState` for `hoveredIndex` and `selectedIndex`. The `Html` component from drei overlays item detail tooltips on the 3D canvas. Five COLORS (`#2A9D8F`, `#A8DADC`, `#F4A261`, `#E9C46A`, `#E76F51`) cycle across box columns. Uses `useCallback` for hover and click handlers and `useMemo` for data derivations. Avatar card UI wraps the Canvas with `Camera`, `Edit3`, `Mail`, `Package`, `BarChart2`, `Tag` lucide icons for profile summary and stats display.

As a frontend developer, implement the ProfileInfoSection section for the Profile page. This section renders a card (`pis-card`) with inline field editing for six profile fields defined in `PROFILE_FIELDS`: fullName, email, phone, department, warehouseLocation, and joinDate. State hooks include `useState` for `data` (initialized from `INITIAL_DATA` with values like 'Rajesh Kumar', 'rajesh.kumar@coolidea.in', '+91 98765 43210', 'Warehouse Operations', 'Mumbai Central Hub — Andheri East', '14 March 2022'), `editing` (currently active field key or null), `draft` (string value being edited), and `toast` (success message string or null). `startEdit` (useCallback) sets editing key and draft value; `cancelEdit` clears both; `saveEdit` trims draft, updates `data` via functional setState, clears editing state, and fires a toast message. A `useEffect` auto-dismisses the toast after 2800ms via `setTimeout`. Each field row renders a lucide icon from `FIELD_ICONS` map (User, Mail, Phone, Building2, MapPin, CalendarDays) plus toggling between read-view with a `Pencil` edit button and an inline input with `Check`/`X` confirm/cancel buttons. Header shows field count badge.

As a frontend developer, implement the ProfilePreferencesSection section for the Profile page. This section includes a `@react-three/fiber` Canvas with an `EmeraldOrnament` component — an `icosahedronGeometry(1.4, 1)` mesh with teal `#2A9D8F` material and an outer wireframe icosahedron (`1.48` radius, `#A8DADC`), animated via `useFrame` with continuous `groupRef.current.rotation.y` spin, sinusoidal `rotation.x`, and `meshRef.current.rotation.z` for the inner mesh. State hooks manage: `language` (default 'en', options for 7 Indian/global languages), `theme` ('light'/'dark' toggle with Sun/Moon lucide icons), `emailNotifications` (boolean toggle), `smsNotifications` (boolean toggle), `timezone` (default 'Asia/Kolkata', 7 timezone options). A `handleSave` function fires a toast via `setShowToast(true)` and clears after 2800ms using `toastTimerRef`. The `toastTimerRef` (useRef) is cleaned up on unmount. Icons used: Settings, Moon, Sun, Globe, Clock, Bell, MessageSquare, Save, CheckCircle from lucide-react. THREE is imported directly for any non-fiber geometry needs.

As a frontend developer, implement the ProfileSecuritySection section for the Profile page. This section features a `@react-three/fiber` Canvas with a `SecurityShield` component built from a custom `THREE.Shape` shield path (quadratic curves from `(0, 1.6)` forming a shield silhouette — `ShapeGeometry(shape, 32)`) and a `TorusGeometry(1.3, 0.09, 32, 80)` ring. Three refs (`groupRef`, `ringRef`, `coreRef`) drive animations via `useFrame`: group rotates on Y-axis with sinusoidal Y position, ring rotates on X and Z with locked/unlocked scale pulsing, and core scales with a sine-based pulse when unlocked. Material colors switch between teal `#2A9D8F`/`#A8DADC` (locked) and orange `#E76F51`/`#F4A261` (unlocked) with varying emissiveIntensity. `useMemo` memoizes `ringGeo` and `coreGeo`. A `SessionItem` functional component maps device types (desktop/mobile/tablet/browser) to lucide icons (Monitor, Smartphone, Tablet, Globe) with `isCurrent` badge highlighting. Section includes password change UI (Shield, KeyRound icons) and active sessions list with LogOut, Clock, ShieldAlert, CheckCircle2 icons. State via `useState` controls the `locked` boolean for the 3D shield.

As a frontend developer, implement the ProfileDangerZone section for the Profile page. This section uses a raw Three.js imperative setup (not @react-three/fiber) via `useRef(canvasRef)` targeting a `<canvas>` element. Inside `useEffect`, it creates a `THREE.WebGLRenderer({ canvas, alpha: true, antialias: true })`, a `PerspectiveCamera(40, aspect, 0.1, 100)` at `position.set(0, 0, 8)`, and two animated tori: outer `TorusGeometry(1.4, 0.06, 32, 100)` with orange `0xE76F51` emissive material, tilted `rotation.x = Math.PI * 0.42`; inner `TorusGeometry(1.08, 0.04, 24, 80)` with 55% opacity, tilted `rotation.x = Math.PI * 0.48`. The `animate` loop increments `torus.rotation.z += 0.003`, `torus.rotation.y += 0.002`, `innerTorus.rotation.z += 0.004`, `innerTorus.rotation.y -= 0.0025`. A `ResizeObserver` on the canvas handles responsive resizing. Full cleanup on unmount: `cancelAnimationFrame`, `ro.disconnect()`, `scene.clear()`, `renderer.dispose()`, geometry and material disposal. State `showDialog` (useState) controls a confirmation modal rendered conditionally. `warningItems` array lists 3 destructive action warnings. Icons: AlertTriangle, Trash2, X, AlertCircle, Info from lucide-react.

As a frontend developer, implement the Sidebar section for the UserDetail page. This component may already exist from previous pages (Dashboard, UserManagement, etc.) — reuse or extend it as needed. The Sidebar uses useState to track activeRole (Admin/Staff/Manager), renders role-specific NAV_BY_ROLE navigation items with Lucide icons (LayoutDashboard, Boxes, Users, FileBarChart, Settings, UserCircle, PackagePlus, Warehouse, LogOut), and displays ROLE_META user info (name, role, initials). Includes a role switcher with ARIA tablist/tab roles, animated nav items with staggered animationDelay (i * 45ms), badge support for items like 'Admin' and 'New', and a StockFlow brand mark with Warehouse icon. Import from '../styles/Sidebar.css'.

As a frontend developer, implement the ItemDetailHeader section for the ItemDetail page. Build the `ItemDetailHeader` component using the `idh-root` header layout with `idh-inner` and `idh-surface` containers. Render the `idh-accent-bar` decorative element, item title (`idh-title`), and a dynamic status badge (`idh-badge`) driven by the `STATUS_CONFIG` object (supports `instock`, `lowstock`, `outofstock` states) with animated `idh-badge-dot` indicator. Display the `idh-sku` block with `idh-sku-label` and the `idh-timestamp` row using the `Clock` icon from `lucide-react`. Wire up the `itemData` object (title, sku, status, lastUpdated) and apply the correct `cssClass` from `STATUS_CONFIG`. Note: This component may reference a shared Navbar from Inventory page.

As a frontend developer, implement the AddItemHeader section for the AddItem page. This section renders a 3D ambient emblem using React Three Fiber's Canvas with an AmbientEmblem component built from THREE.Shape with quadratic bezier curves forming a rounded diamond with a hole cutout. The emblem renders three extruded meshes (using extrudeGeometry) at different positions, rotations, and transparent opacities in colors #A8DADC, #2A9D8F, and #F4A261, all wrapped in a Float animation from @react-three/drei for gentle floating movement. Alongside the 3D canvas, it renders breadcrumb navigation linking Dashboard → Inventory → Add New Item, and a back-link arrow to /Inventory. Uses useMemo for geometry and extrudeSettings to avoid re-creation. Note: check if Navbar/header shell already exists from a previous page. Apply AddItemHeader.css styles.

As a Backend Developer, implement the reports REST API using FastAPI. Endpoints: GET /api/v1/reports (list reports with pagination, search, status filter), POST /api/v1/reports/generate (trigger async report generation with filters: type, date range, category, status), GET /api/v1/reports/{id} (get report metadata and status), GET /api/v1/reports/{id}/download (stream file download — CSV or PDF), DELETE /api/v1/reports/{id} (archive/delete report), GET /api/v1/reports/stats (summary: total count, avg generation time, most common type, pending count). Implement background task for async report generation using FastAPI BackgroundTasks or Celery. Support CSV export using Python csv module and PDF using reportlab or weasyprint.

As a Backend Developer, implement the dashboard aggregation REST API using FastAPI. Endpoints: GET /api/v1/dashboard/stats (return KPIs: total_items, low_stock_count, recent_transactions, items_updated_today, active_categories, pending_orders), GET /api/v1/dashboard/activity (return activity chart data by period: 7d/30d/90d with items_in, items_out, adjustments arrays and date labels), GET /api/v1/dashboard/recent-items (latest 8 inventory changes with action type, user, timestamp), GET /api/v1/dashboard/user-activity (latest 8 user actions across all users — Admin/Manager only), GET /api/v1/dashboard/notifications (return user notifications list). Use SQL aggregation queries for efficiency. Cache responses with 60-second TTL using FastAPI-cache or Redis.

As a Frontend Developer, set up global state management using React Context API or Zustand. Define stores/contexts for: AuthContext (currentUser, role, permissions, token, login/logout actions), InventoryContext (optional — for shared filters/pagination state across Inventory pages), NotificationContext (global toast/notification queue). Implement a ProtectedRoute component that checks AuthContext for valid session and redirects unauthenticated users to /Login. Implement role-based route guards that restrict access by user role (e.g., Admin-only routes for UserManagement, Settings). Wrap app in providers in App.jsx root.

As a frontend developer, implement the UserDetailHeader section for the UserDetail page. Features a Three.js-powered StatusSphere component rendered via useRef/useEffect that creates a WebGLRenderer with a SphereGeometry (0.55 radius, 48 segments), MeshStandardMaterial colored teal (#2A9D8F) for active or grey (#9BA1A6) for inactive, ambient and point lights, and a glow mesh (SphereGeometry 0.72, opacity 0.25) when active. The sphere animates with rotation.y += 0.006 and pulse scale via Math.sin when active, with full cleanup on unmount (cancelAnimationFrame, removeChild, dispose). UserDetailHeader uses useState for USER_DATA (name, email, userId, status, lastModified, modifiedBy) and renders a breadcrumb nav (Dashboard → User Management → user name), user name heading, status badge with StatusSphere, and metadata chips using Lucide icons (Mail, Hash, Clock, UserIcon). Import from '../styles/UserDetailHeader.css'.

As a frontend developer, implement the UserProfileCard section for the UserDetail page. Uses useState for an editing boolean toggle and a fields object (name, email, phone, department) initialized from USER constant. The card renders a top row with a upc-avatar (initials 'AS') and upc-status-dot, identity block showing fields.name and a role badge with upc-role-dot, and an edit toggle button that switches between Pencil and X Lucide icons with aria-label. A divider separates the top row from a upc-fields grid where each field (Email via Mail icon, Phone via Phone icon, Building2 for department) conditionally renders an input in editing mode or a static div otherwise, driven by handleChange updating fields state via spread. Includes Pencil and X from lucide-react. Import from '../styles/UserProfileCard.css'.

As a frontend developer, implement the RolesPermissionsForm section for the UserDetail page. Uses useState for selectedRole (default 'warehouse_manager') and permissions array initialized from ROLE_PERMISSION_DEFAULTS. handleRoleChange updates both selectedRole and resets permissions to ROLE_PERMISSION_DEFAULTS[roleId]. togglePermission adds/removes permission IDs from the permissions array. Renders a role selector card with a Shield Lucide icon, a radiogroup of three role options (warehouse_manager, staff_member, admin) each with icon initials, name, description, and radio input; selecting a role calls handleRoleChange. Below, a permissions card with Key icon renders six permission toggles (add_items, edit_items, remove_items, view_reports, manage_users, config_settings) as checkboxes with Check and AlertCircle icons indicating state. Save button triggers form submission. Import from '../styles/RolesPermissionsForm.css'.

As a frontend developer, implement the AccessControlSection for the UserDetail page. Features a Three.js/React Three Fiber 3D background via @react-three/fiber Canvas and @react-three/drei OrbitControls. SecurityLockMesh renders an extruded lock body (THREE.Shape with ExtrudeGeometry, MeshStandardMaterial teal #2A9D8F), a keyhole (CylinderGeometry + BoxGeometry in #1E7A6F), a shackle (TorusGeometry with orange #F4A261), and three FloatingRing components (radii 1.0/1.2/1.4, colors #A8DADC/#E9C46A). groupRef animates with sine-based rotation and position using performance.now(); shackleRef bobs vertically. useMemo memoizes lockBodyShape and extrudeSettings. UI layer includes useState for password visibility toggle (Eye/EyeOff icons), copy-to-clipboard with Check/Copy icons, token regeneration with RefreshCw, session controls with Lock and MonitorSmartphone icons, and 2FA toggle with ShieldCheck. Import from '../styles/AccessControlSection.css'.

As a frontend developer, implement the AuditLogSection for the UserDetail page. Uses useState to manage expanded entry (expandedId), view mode toggle (timeline vs list via LayoutList/List Lucide icons), and category filter state. Renders 8 AUDIT_ENTRIES covering action_categories: login, role_change, permission_update, form_submission, settings_change — each with timestamp, changed_by, changed_by_role, and a details object with category-specific fields (ip/device/location/auth_method for login; previous_role/new_role/reason/approved_by for role_change; permissions_added/removed/scope/effective_from for permission_update; form_name/items_affected/warehouse_zone/reference_id for form_submission; setting_key/previous_value/new_value/reason for settings_change). ChevronDown animates expand/collapse per entry. Clock and User Lucide icons decorate timestamps and actor fields. Category filter chips allow filtering by action_category. Import from '../styles/AuditLogSection.css'.

As a frontend developer, implement the ItemDetailContent section for the ItemDetail page. Build the `ItemDetailContent` component with `useState` for active image selection from a 4-image gallery (`IMAGES` array: main, side, box, detail — all SVG data URIs). Implement a `ZoomIcon` SVG component and image thumbnail strip. Render the `SPECS_DATA` table (7 rows: SKU, Manufacturer, Material, Weight, Dimensions, Warranty, Batch Number) and `PRICING_DATA` rows (Unit Price, Bulk Price 50+, MSRP, Our Price) with an `accent` flag for highlighted pricing row and `sale` flag for strikethrough/discounted display. Import and apply `WarehouseIcon.css` and `ItemDetailContent.css`. Manage image zoom interaction state via `useState` hooks.

As a frontend developer, implement the ItemDetailActions section for the ItemDetail page. Build the `ItemDetailActions` component using `useState` for `showDeleteDialog`, `toast`, and `isProcessing` states. Implement five action handlers: `handleEdit` (navigates to `/EditItem`), `handleDeleteClick` (opens confirm dialog), `handleDeleteConfirm` (simulates API delete with 800ms delay, then navigates to `/Inventory` after 1200ms), `handlePrint` (`window.print()`), `handleExport` (CSV export toast sequence), and `handleShare` (`navigator.clipboard.writeText`). Wire up `framer-motion` `AnimatePresence` and `motion` components for dialog and toast animations using `dialogOverlayVariants`, `dialogCardVariants`, and `toastVariants`. Render action buttons with `Pencil`, `Trash2`, `Printer`, `Download`, `Share2` icons from `lucide-react`, a delete confirmation dialog with `AlertTriangle` icon, and a dismissible toast notification with `CheckCircle2`. Auto-dismiss toast after 2800ms via `useEffect`/`clearTimeout`.

As a frontend developer, implement the RelatedItems section for the ItemDetail page. Build the `RelatedItems` component featuring a Three.js/R3F background canvas with the `PulsingOrbs` scene — 24 randomly positioned `Float`-wrapped `Sphere` mesh objects using `meshStandardMaterial` with `transparent`, `emissive`, and `emissiveIntensity` properties, lit by `ambientLight` and `directionalLight`. Use `useMemo` to generate stable `orbData` with HSL color via `THREE.Color`. Render 6 related inventory item cards from the `relatedItems` array (Galvanized Steel Pipe, Brass Ball Valve, PVC Coupling Joint, Industrial Silicone Sealant, Heavy-Duty Shelf Bracket, Stainless Steel Fastener Kit) each showing a `ThumbIcon` SVG, item name, SKU, stock count, and a status badge driven by `statusLabels`/`statusClass` maps (in-stock, low-stock, out-of-stock). Import `ThumbIcon.css` and `RelatedItems.css`. Use `useState`, `useRef`, and `useEffect` for canvas lifecycle and card interaction state. Requires `@react-three/fiber`, `@react-three/drei`, and `three` packages.

As a frontend developer, implement the AddItemForm section for the AddItem page. This is a complex multi-section form (basic, quantity, pricing) paired with an interactive 3D WarehouseScene rendered via React Three Fiber Canvas. The WarehouseScene contains ShelfUnit components built with RoundedBox from @react-three/drei, each with 4 shelf levels and dynamically placed item boxes; shelf highlighting changes based on formData.activeSection ('basic', 'quantity', 'pricing') mapped via highlightMap. ShelfUnit uses useFrame for a subtle y-axis sine-wave rotation animation. The 3D scene includes ambient, directional, and point lights, a floor plane, and DreiText labels loaded from a Google Fonts woff2 URL. The form itself manages state via useState and useCallback hooks with fields covering item name, SKU, category, quantity, unit, price, supplier, warehouse location, min stock level, and description. Uses OrbitControls for interactive 3D camera. Apply AddItemForm.css (10132 chars of styles).

As a frontend developer, implement the EditItemHeader section for the EditItem page. This section renders a 3D animated package visualization using Three.js with a WebGLRenderer (alpha, antialias) mounted via useRef to a DOM element. The scene includes a rotating BoxGeometry (1.1x1.1x1.1) mesh with MeshStandardMaterial (color 0x2A9D8F, roughness 0.35, metalness 0.15), EdgesGeometry overlay with semi-transparent LineBasicMaterial (color 0x1E7A6F, opacity 0.28), a lid accent band BoxGeometry (1.16x0.09x1.16) with MeshStandardMaterial (color 0xF4A261), and a subtle floor PlaneGeometry shadow catch. Lighting includes AmbientLight (0.55), key DirectionalLight (0.7), and fill DirectionalLight (color 0x2A9D8F, 0.3). The box and band rotate in sync via requestAnimationFrame (box.rotation.y += 0.004). Camera is PerspectiveCamera(35) at position (2.4, 2.0, 3.2). Overlay metadata shows item name 'Industrial Steel Bolts M12', SKU, status badge, stockQty, lastModified, and category from a static itemData object. Renderer resizes responsively via getBoundingClientRect. Cleanup cancels RAF and removes renderer DOM element on unmount.

As a Tech Lead, verify the end-to-end integration between the Login frontend (LoginForm, LoginHero, Navbar, LoginFooter) and the Auth backend API (POST /api/v1/auth/login). Ensure: form submission calls authService.login(), JWT token is stored and attached to subsequent requests via the API client interceptor, user role is loaded into AuthContext, successful login redirects to /Dashboard, failed login shows apiError message in LoginForm, and ProtectedRoute guards prevent unauthenticated access to all other pages. Note: depends on LoginForm section task (50af5d1c) and Auth API task.

As a Tech Lead, verify the end-to-end integration between the Dashboard frontend sections (DashboardStatsGrid, DashboardActivityOverview, DashboardRecentItems, DashboardWelcome, DashboardQuickActions, DashboardSidebar, DashboardTopBar) and the Dashboard backend API (/api/v1/dashboard/*). Ensure: KPI stats are fetched and rendered in DashboardStatsGrid, activity chart data populates DashboardActivityOverview by period, recent items and user activity populate DashboardRecentItems, notifications appear in DashboardTopBar, role-based nav items in DashboardSidebar reflect AuthContext role, and quick actions are filtered by role. Note: depends on Dashboard section tasks and Dashboard Stats API task.

As a Tech Lead, verify the end-to-end integration between the Inventory frontend sections (InventoryHeader, InventoryTable, InventoryFiltersSearch, InventorySidebar, InventoryPagination) and the Inventory backend API (GET /api/v1/inventory). Ensure: table data is fetched from the API with pagination params, search and filter inputs trigger API calls with query params (category, status, search, page, per_page), pagination controls update currentPage and re-fetch, role-based action buttons (add/edit/delete) appear only for Warehouse Manager role, and status badges render correctly based on API response. Note: depends on Inventory section tasks (96a2e6ec, bde725d3, 1d1881f4, db73f2f7, c923cbc8) and Inventory CRUD API task.

As a Tech Lead, verify the end-to-end integration between the UserManagement frontend sections (PageHeader, UserTable, BulkActions, UserModal) and the User Management backend API (GET /api/v1/users, POST /api/v1/users, bulk-action). Ensure: UserTable fetches paginated user list from GET /api/v1/users with search/filter params, UserModal form submission calls POST /api/v1/users and closes on success with table refresh, BulkActions toolbar calls bulk-action endpoint with selected user IDs and action type, pagination and sort params are passed as query params, and Admin role guard is enforced on page access. Note: depends on UserManagement section tasks (6cff9697, 7fbf30fe, df82aba5, eb8e2d2d) and User Management API.

As a Tech Lead, verify the end-to-end integration between the Reports frontend sections (ReportsHeader, ReportsStats, ReportsList, ReportsFilters, ReportsExport) and the Reports backend API (GET /api/v1/reports, POST /api/v1/reports/generate, GET /api/v1/reports/stats, GET /api/v1/reports/{id}/download). Ensure: ReportsList fetches and renders paginated report list from API with search, ReportsStats displays live aggregated stats from /reports/stats, ReportsFilters submits filter params to POST /generate and shows newly created report in list, download button calls /download endpoint and triggers file download, ReportsExport bulk export calls generate with multiple IDs. Note: depends on Reports section tasks (1d0bca6d, 4d2e1dc1, 8a6ba23a, c812f256, d33e0b18) and Reports API.

As a Tech Lead, verify the end-to-end integration between the Settings frontend sections (SettingsHeader, SettingsNav, SystemConfiguration, NotificationSettings, IntegrationSettings, DangerZone, Footer) and the Settings backend API (GET /api/v1/settings, PUT /api/v1/settings, POST /api/v1/settings/reset, GET/PUT /api/v1/settings/integrations/{service}). Ensure: SystemConfiguration form is pre-populated from GET /api/v1/settings on mount, save action calls PUT and shows toast, reset calls POST /settings/reset, IntegrationSettings 3D nodes reflect live integration status from API, DangerZone export/delete actions call appropriate endpoints, and Admin role guard is enforced. Note: depends on Settings section tasks (a5d22479, 61c6b513, 5e37a6b5, 40112c04, 31d98f7f, 28124fd4) and Settings API.

As a Tech Lead, verify the end-to-end integration between the Profile frontend sections (ProfileHeader, ProfileAvatarCard, ProfileInfoSection, ProfileSecuritySection, ProfilePreferencesSection, ProfileDangerZone) and the Profile backend API (GET /api/v1/profile, PUT /api/v1/profile, PUT /api/v1/profile/password, PUT /api/v1/profile/preferences, GET /api/v1/profile/sessions, DELETE /api/v1/profile/account). Ensure: ProfileInfoSection is pre-populated from GET /api/v1/profile, inline field saves call PUT /api/v1/profile, password change in ProfileSecuritySection calls PUT /profile/password with current+new passwords, preferences save calls PUT /profile/preferences, active sessions list shows data from GET /sessions, ProfileDangerZone delete account calls DELETE /profile/account and redirects to /Login. Note: depends on Profile section tasks (ecbd619c, 2ea04b8c, 8f5310b2, 549ce10b, 934616d1, 2c9cdda9) and Profile API.

As a frontend developer, implement the ActionButtonsSection for the UserDetail page. Features a Three.js accent background (ActionBarCanvas) rendered into a mountRef div via useEffect: creates a PerspectiveCamera at z=8, three wave line meshes (THREE.Line with BufferGeometry from 120-point sine-wave points, LineBasicMaterial in colors #2A9D8F/#A8DADC/#F4A261, opacity 0.22–0.34) animated with rotation.z sine oscillation and opacity pulse via THREE.Clock. ResizeObserver handles canvas resize. Cleaned up on unmount with running flag, cancelAnimationFrame, ro.disconnect(), renderer.dispose(). UI layer uses useState for loading/success/error states and a delete confirmation dialog (AlertTriangle icon). Renders Save (Save icon, triggers async with RotateCw spinner), Cancel (X icon, resets state), and Delete User (Trash2 icon, opens confirmation modal with CheckCircle/XCircle confirm/cancel). Toast-style feedback shows CheckCircle on success, XCircle on error. Import from '../styles/ActionButtonsSection.css'.

As a frontend developer, implement the AddItemPreview section for the AddItem page. This section renders a 'Confirmation Preview' card that displays a live summary of all form fields defined in FIELD_TEMPLATES (name, sku, category, quantity, unit, price, supplier, location, minStock, description). It includes a PreviewCube 3D component rendered in a React Three Fiber Canvas — a rotating boxGeometry mesh (1.6×1.6×1.6) with continuous useFrame rotation on both Y and X axes at ROTATING_CUBE_SPEED (0.004), using meshStandardMaterial with emissive glow (#1E7A6F). Uses useMemo to compute form completeness percentage (filled/total fields), with completenessColor derived from thresholds (≥80% → --primary, ≥40% → --highlight, else --secondary). The formatValue helper formats price as ₹ Indian locale and quantity with en-IN locale. Includes OrbitControls and Box from @react-three/drei. Apply AddItemPreview.css styles.

As a frontend developer, implement the EditItemForm section for the EditItem page. This section renders a multi-field controlled form using useState hooks for form (INITIAL_FORM with fields: name, sku, category, currentStock, reorderLevel, unit, cost, sellingPrice, description, supplier, lastRestockDate), errors, and touched state. Implements per-field validation via validateField() covering required checks, SKU regex (/^[A-Z0-9-]+$/), non-negative stock, and numeric pricing. handleChange updates form state and re-validates touched fields inline; handleBlur marks fields as touched and triggers validation. Renders CATEGORIES dropdown (8 options including Electronics, Textiles, Automotive Parts, etc.) and UNITS dropdown (7 options: pcs, kg, ltr, mtr, box, carton, pallet) as select elements. Includes text inputs for name, SKU, currentStock, reorderLevel, cost, sellingPrice, a textarea for description, and inputs for supplier and lastRestockDate. Error messages render conditionally per field when errors[name] is set. Pre-populated with INITIAL_FORM defaults (Cotton T-Shirt - Premium, SKU CTS-PRM-001, textiles category, stock 245).

As a Tech Lead, verify the end-to-end integration between the ItemDetail frontend sections (ItemDetailHeader, ItemDetailActions, ItemDetailContent, RelatedItems) and the Inventory backend API (GET /api/v1/inventory/{id}, DELETE /api/v1/inventory/{id}). Ensure: item data is fetched by ID from URL params and populated into all sections, status badge in ItemDetailHeader reflects live API status, delete action in ItemDetailActions calls the API and redirects to /Inventory on success, edit button navigates to /EditItem/{id} with correct ID, related items section fetches items from same category. Note: depends on ItemDetail section tasks (c7b864bc, e125e8bf, e755afad, fdcc5658) and Inventory CRUD API.

As a frontend developer, implement the EditItemActions section for the EditItem page. This section renders a sticky action bar with three interactive elements controlled by useState hooks for status ('idle'|'saving'|'saved'|'error') and showConfirm (boolean). The statusStates map drives an animated ea-status-dot (CSS class variants: ea-saving, ea-saved, ea-error) and ea-status-text with aria-live='polite' for accessibility. handleSave simulates async save via setTimeout (1100ms delay), randomly succeeds (Math.random() > 0.15), sets 'saved' or 'error' status, and auto-resets to 'idle' after 2800ms on success. handleDelete closes the confirm modal, triggers 'saving', then sets 'saved' after 900ms with 2800ms reset. The Save button shows an ea-spinner with 'Saving...' text during saving state, and a floppy-disk SVG icon otherwise; disabled when status === 'saving'. A Delete button (ea-btn-danger) with trash SVG opens a showConfirm modal. A Cancel anchor (ea-btn-secondary) links to '/Inventory'. The confirm dialog renders conditionally based on showConfirm state with confirm/cancel actions.

As a Tech Lead, verify the end-to-end integration between the AddItem frontend sections (AddItemHeader, AddItemForm, AddItemPreview) and the Inventory backend API (POST /api/v1/inventory). Ensure: form submission in AddItemForm calls inventoryService.createItem() with all form fields, SKU uniqueness validation error from API is displayed inline on the SKU field, successful creation navigates to /Inventory or /ItemDetail/{newId}, AddItemPreview completeness percentage is computed from actual form state, and Warehouse Manager role guard prevents Staff Member access to the page. Note: depends on AddItem section tasks (0db2cc41, 393f3e60, 618bee98) and Inventory CRUD API.

As a Tech Lead, verify the end-to-end integration between the UserDetail frontend sections (UserDetailHeader, UserProfileCard, AccessControlSection, RolesPermissionsForm, AuditLogSection, ActionButtonsSection) and the User Management backend API (GET /api/v1/users/{id}, PUT /api/v1/users/{id}, PUT /api/v1/users/{id}/role, PUT /api/v1/users/{id}/permissions, GET /api/v1/users/{id}/audit-log, DELETE /api/v1/users/{id}). Ensure: user data is loaded by ID and pre-populates all sections, RolesPermissionsForm submits role+permission updates to API, ActionButtonsSection save calls PUT endpoint, delete calls DELETE and redirects to /UserManagement, AuditLogSection fetches and renders real audit log entries. Note: depends on UserDetail section tasks (03d3a83d, 26826c03, 62e01015, 7aa14876, 8a39070c, a9f614a6) and User API.

As a Tech Lead, verify the end-to-end integration between the EditItem frontend sections (EditItemHeader, EditItemForm, EditItemActions) and the Inventory backend API (GET /api/v1/inventory/{id}, PUT /api/v1/inventory/{id}, DELETE /api/v1/inventory/{id}). Ensure: item data is loaded from GET endpoint on page mount and pre-populates EditItemForm fields, save action calls PUT endpoint with updated form data and shows success/error in EditItemActions status dot, delete action calls DELETE endpoint and redirects to /Inventory, and field validation errors from API are displayed per-field. Note: depends on EditItem section tasks (0ce667a4, 54d91d17, 72264044) and Inventory CRUD API.