indigo-doc

As a frontend developer, implement the LoginHero section for the Login page. The section (`lh-hero`) includes: a CSS animated `lh-bg-gradient` div, a `lh-particles` container with 8 `lh-particle` spans and 3 `lh-data-line` spans for ambient animation effects, and a `lh-content` div featuring a badge with a pulsing `lh-badge-dot`, an `<h1>` headline with an `lh-headline-accent` span, a subheadline paragraph, and a `lh-trust` row with three trust items each using lucide icons (`Shield`, `Lock`, `Zap`) and labels ('256-bit Encryption', 'Role-Based Access', 'Real-Time Sync'). Apply LoginHero.css styles (~5392 chars).

As a frontend developer, implement the LoginForm section for the Login page. Uses `useState` for `email`, `password`, `showPassword`, `rememberMe`, `error`, `loading`, and `success` states, plus `useRef` for `cardRef` and `glowRef`. Implements a `handleMouseMove` callback (via `useCallback`) that tracks cursor position relative to `cardRef` and translates a `lgf-glow` div to create a spotlight glow effect. The `handleSubmit` callback validates email presence, password presence, and minimum length (6 chars), then simulates async login with a 1800ms `setTimeout` toggling `loading` and `success`. On success, renders a `lgf-success` panel with a `CheckCircle` icon and redirect message. The main form renders: an `lgf-error` alert (with `AlertCircle` icon) when `error` is set, an email field with `Mail` icon, a password field with `Eye`/`EyeOff` toggle, a remember-me checkbox, forgot-password link, a submit button with loading state, a divider, and a Google SSO button using the `Chrome` icon. Apply LoginForm.css styles (~11024 chars).

As a frontend developer, implement the LoginFooter section for the Login page. The component renders a `<footer className="lf-footer">` with an inner div containing a copyright paragraph that dynamically computes `currentYear` via `new Date().getFullYear()` and displays '© {year} indigo-doc. All rights reserved.', plus a `<nav aria-label="Footer links">` with three anchor links ('Privacy Policy', 'Terms of Service', 'Support' via mailto) separated by `lf-divider` divs. Apply LoginFooter.css styles (~1995 chars).

As a frontend developer, implement the NavBar section for the Dashboard page. This component renders a top navigation bar using the `nb-root`/`nb-inner` CSS structure with a brand link (`/Login`) containing a `FileText` lucide icon and the 'indigo-doc' brand name, plus a `HelpCircle` icon help button. Note: this component likely already exists from the Login page (task e58abc62-c374-4bf0-b56f-28300a563d3a) and may only need to be verified/reused rather than rebuilt. Confirm shared component reuse and wire it into the Dashboard page layout.

As a frontend developer, implement the LoginForm section for the Login page. Manages 12 state variables: `email`, `password`, `showPassword`, `rememberMe`, `emailError`, `passwordError`, `globalError`, `loading`, `success`, `focusedField`, `touched` (`{ email, password }`). Uses `useRef` for `cardRef` and `glowRef`; `handleMouseMove` tracks cursor Y position relative to card rect and sets `glowRef` top/opacity for a trailing glow effect; `handleMouseLeave` fades glow out. `passwordStrength` is a `useMemo` that scores the password (0–5 points for length ≥6, ≥10, mixed case, digits, special chars) and returns `{ level, label, cls }` ('weak'/'fair'/'good'/'strong') — rendered as a 4-segment strength bar. `validateEmail` and `validatePassword` are `useCallback` validators; `handleEmailBlur`/`handlePasswordBlur` set `touched` state and trigger field-level errors on blur. `handleSubmit` (preventDefault) runs both validators, sets errors, and on success simulates async loading (`setLoading(true)`) then `setSuccess(true)` with an `AnimatePresence`-driven success state overlay showing a `CheckCircle` icon and redirect CTA. Email field uses `Mail` lucide icon; password field uses `Lock` icon plus an `Eye`/`EyeOff` toggle button controlling `showPassword`. Inline error messages animate in via `AnimatePresence` with `motion.p` using `initial={{ opacity:0, y:-6 }}`. `globalError` renders an `AlertCircle` banner. Remember Me is a styled checkbox toggling `rememberMe`. Submit button shows `ArrowRight` icon and a spinner div during `loading`. Requires `framer-motion`, `lucide-react`.

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. This component uses `useState` for `activeItem` (default 'dashboard'), `expandedItems` (default `{ inventory: true }`), and `mobileOpen` toggle. It renders grouped navigation via `navGroups` array (Main, Operations, Finance & Reports, Workspace) with lucide icons (LayoutDashboard, Briefcase, FileText, Package, BarChart2, DollarSign, BarChart2, StickyNote), badge indicators (count/type: info/warning/success), and a nested child item for Inventory → Van Inventory. Uses `framer-motion` `AnimatePresence` for animated drawer open/close. Includes a hamburger button with three `<span>` elements toggling `open` class, a `ds-user` avatar block with initials 'AD', a Settings item, and a LogOut button at the bottom.

As a frontend developer, implement the DashboardHeader section for the Dashboard page. Uses `useState` for `activeFilter` (default 'all'), `searchValue`, `dateTimeStr`, and `showNotifPanel`. A `useEffect` runs a `setInterval` every 30 seconds to refresh `dateTimeStr` via `formatDateTime()` which formats full weekday, month, date, year, and 12-hour time. Renders a `motion.header` with `opacity 0→1, y -8→0` entrance animation. Top row includes a greeting block ('Good morning, Alex') with live datetime, and right controls with a role badge (USER_ROLE='Admin', `getRoleBadgeClass` utility) and a `Bell` icon button with NOTIFICATION_COUNT=7 badge that toggles `showNotifPanel`. The notification panel uses `AnimatePresence` and lists 7 hardcoded notifications with types (urgent/info/warning). A filter bar below renders 5 `FILTERS` (All, Jobs, Quotes, Inventory, Overdue) as toggle buttons, plus a `Search` icon input bound to `searchValue`.

As a frontend developer, implement the DashboardMetricsRow section for the Dashboard page. Renders 4 `MetricCard` components from the `metrics` array (Active Jobs, Pending Quotes, Low Stock Alerts, Revenue MTD) each with variant classes (primary, highlight, accent, secondary). Each card is a `motion.a` link using `cardVariants` (opacity 0→1, y 18→0, spring ease) inside a `motion.div` container with `staggerChildren: 0.09`. Cards include lucide icons (Briefcase, FileText, AlertTriangle, DollarSign), a spark bar that animates via `useState(sparked)` + `useEffect` with 120ms timeout, trend indicators via `TrendIcon` component (TrendingUp/TrendingDown/AlertTriangle), trend class variants (dmr-trend--up/down/warn), a `sparkPct` CSS width, sub-label, and a `ChevronRight` drill-down link. `whileHover={{ scale: 1.015 }}` and `whileTap={{ scale: 0.98 }}` applied to each card.

As a frontend developer, implement the DashboardWorkflowMap section for the Dashboard page. Uses `useState` for `selectedNode` (null default). Renders `WORKFLOW_NODES` array of 4 nodes (ingestion, notes, tracking, supplier) each with status (active/processing), lucide icons (Inbox, FileText, Briefcase, MessageSquare), metricValue/metricUnit, description, stats array (4 key/val pairs), detailMetrics (4 val/label), and actions array with icon links. Node cards use `motion` with hover/tap animations. Clicking a node sets `selectedNode` and opens an `AnimatePresence`-driven detail panel showing detailMetrics grid, full description, stats list, and action buttons (primary/secondary variants). The panel has an `X` close button. Connector arrows between nodes use `ArrowRight`. Node status badges reflect active (CheckCircle, green) vs processing (RefreshCw, amber) vs error (AlertCircle, red) states via status-derived CSS classes.

As a frontend developer, implement the DashboardJobsSection for the Dashboard page. Uses `useState` for `activeFilter` (default 'All') and `page` (default 1). Filters `ALL_JOBS` (8 hardcoded jobs with id, customer, status/statusLabel, tech object with name/initials/avatarClass, due/dueLabel/dueClass) against FILTERS array ['All','Pending','In Progress','Completed','Overdue']. Paginates at PAGE_SIZE=5 with `Math.ceil` total pages, safe page clamping, and slice logic. Renders filter pill buttons, a paginated table/list of job rows with status badge chips (in-progress/pending/completed/overdue CSS variants), technician avatar initials with color class (av-blue/green/purple/orange/teal/pink), due date labels with `today`/`overdue` highlight classes, and `ExternalLink` icon links per job. Navigation uses `ChevronLeft`/`ChevronRight` buttons with disabled state. Header includes `Filter`, `Calendar`, `UserPlus`, and `ArrowRight` icons. Uses `framer-motion` `AnimatePresence` for list transitions.

As a frontend developer, implement the DashboardQuotesSection for the Dashboard page. Uses `useState` for `expandedQuote` (null). Renders `QUOTES` array (5 quotes: Q-2024-0091 through Q-2024-0079) each with id, customer, service, amount, status (overdue/pending/sent), sentDate, expiryDate, contact, email, phone, line items array, and notes. Each quote row is collapsible via `AnimatePresence`; clicking toggles `expandedQuote`. Collapsed view shows status badge (overdue=AlertCircle red, pending=Clock amber, sent=Send blue), customer name, service, amount, and a `ChevronDown` rotated chevron. Expanded detail panel shows contact info, line items breakdown with `Layers` icon, notes block, and action buttons (Mail follow-up, ExternalLink to /Quotes). Status icon mapping uses AlertCircle/Clock/CheckSquare/Send. Section header shows `FileText` icon and summary counts. Uses `motion` for row entrance animations with stagger.

As a frontend developer, implement the DashboardInventorySection for the Dashboard page. Uses `useState` for `selectedVan` (default 'van-1') and `expandedItem` (null). Renders a `VANS` array of 4 vans (van-1 through van-4 with name and plate) as tab selectors. `INVENTORY_BY_VAN` map provides per-van data (totalValue, totalItems, lowStockCount, items array). Each item has id, name, sku, qty, threshold, unit — items where `qty < threshold` are flagged as low-stock. Summary stats row shows totalValue (DollarSign), totalItems (Package), lowStockCount (AlertTriangle) with TrendingDown indicator. Item rows are expandable via `AnimatePresence`/`ChevronDown`; expanded view shows SKU, restock action (ShoppingCart), and order status. Low-stock items render an AlertTriangle warning and a `Truck` restock CTA. Section header includes `RefreshCw` sync button and `ArrowRight` link to /Inventory. Uses `motion` for item entrance animations with stagger and `CheckCircle` for in-stock status.

As a frontend developer, implement the DashboardQuickActions section for the Dashboard page. Renders a static `actions` array of 4 action buttons (Create Job → /Jobs, Send Quote Follow-Up → /Quotes, Log Parts Usage → /Van Inventory, Request Restock → /Inventory) each with lucide icons (Briefcase, Send, Package, RefreshCw) and variant classes (dqa-btn--primary/secondary/accent/highlight). Container uses `motion.div` with `containerVariants` (staggerChildren: 0.07) and each `motion.a` uses `itemVariants` (opacity 0→1, y 10→0, 0.28s easeOut) plus `whileHover={{ scale: 1.01 }}` and `whileTap={{ scale: 0.97 }}`. Each button renders an icon wrap, label+desc text block, and a `ChevronRight` arrow. Section header displays a `Zap` icon, 'Quick Actions' title, and 'Common tasks at a glance' subtitle. No state required — purely presentational with animation.

As a frontend developer, implement the DashboardFooter section for the Dashboard page. Renders a `<footer>` with `daf-footer`/`daf-inner` structure. Top section contains a brand link to /Dashboard with a `FileText` lucide icon and 'indigo-doc' text, plus a `<nav>` rendering `NAV_LINKS` array of 8 links (Dashboard, Jobs, Quotes, Inventory, Financials, Analytics, Notes, Van Inventory) separated by `daf-nav-sep` span '/' characters using `React.Fragment`. A `daf-divider` separates top from bottom. Bottom section renders copyright using `new Date().getFullYear()` for dynamic year, a version tag 'v1.4.2', policy links (Privacy Policy, Terms of Service), a `Mail` icon with support email link (support@indigo-doc.com), and an 'All systems operational' status indicator with a `daf-status-dot` span. Fully static — no state or animations.

As a frontend developer, implement the NavBar section for the Jobs page. This component renders a `<nav className="nb-root">` with an inner container holding a brand link (`nb-brand`) that includes a `FileText` lucide icon inside `nb-logo` and the text 'indigo-doc', plus a `HelpCircle` icon button for help. The component is shared across pages — it likely already exists from the Login and Dashboard pages; confirm reuse or adapt as needed. Apply NavBar.css styles (2305 chars).

As a frontend developer, implement the NavBar section for the Quotes page. This component renders a nav.nb-root with an nb-inner container holding a brand link (nb-brand) with a FileText lucide icon inside nb-logo and the 'indigo-doc' brand name, plus a HelpCircle icon button (nb-help). The component already exists from Login and Dashboard pages — reuse or verify the shared NavBar component. Apply nb-root backdrop-filter blur, slide-down animation, and responsive breakpoints (mobile hides nb-brand-name, padding adjusts at 768px and 1024px).

As a frontend developer, implement the NavBar section for the Inventory page. This component may already exist from previous pages (Jobs, Quotes). It renders a <nav> with class `nb-root` containing an inner wrapper `nb-inner` with a brand link (href='/Login') displaying a FileText lucide icon and the text 'indigo-doc', plus a HelpCircle icon button for help. Import from '../styles/NavBar.css'. Reuse the existing NavBar component if already built.

As a frontend developer, implement the NavBar section for the Financials page. This is a shared navigation component (may already exist from previous pages) using `nb-root`, `nb-inner`, `nb-brand`, `nb-logo`, `nb-brand-name`, and `nb-help` CSS classes. Renders a nav bar with a FileText lucide icon logo linking to /Login, the brand name 'indigo-doc', and a HelpCircle icon help button with aria-label. Import from '../styles/NavBar.css'. Verify the component is reused from prior pages (Quotes, Inventory) rather than duplicated.

As a frontend developer, implement the NavBar section for the Analytics page. This is a shared layout component (may already exist from Inventory/Financials pages) using `nb-root`, `nb-inner`, `nb-brand`, `nb-logo`, `nb-brand-name`, and `nb-help` CSS classes. Renders a `FileText` lucide icon inside the brand logo div, an `indigo-doc` brand name linking to `/Login`, and a `HelpCircle` help button. Import from `../styles/NavBar.css`. Verify the component is reused from a prior page rather than duplicated.

As a frontend developer, implement the JobsPageHeader section for the Jobs page. The component uses `useState('list')` to manage `viewMode` (list/grid toggle). It renders a breadcrumb nav (`jph-breadcrumb`) with a `Home` icon link to `/Dashboard` and a `ChevronRight` separator leading to an active 'Jobs' crumb. A main row (`jph-main-row`) contains a title group with an `<h1>` 'Jobs' and a `jph-count-badge` labeled 'All Active', plus a controls area with a view toggle group using `LayoutList` and `LayoutGrid` buttons (aria-pressed, conditional `jph-toggle-active` class) and a 'Create New Job' anchor button with a `Plus` icon linking to `/Jobs`. Apply JobsPageHeader.css (3941 chars).

As a frontend developer, implement the JobsFilter section for the Jobs page. The component uses `useState` and `useCallback` to manage: `search` (text), `activeStatuses` (array), `activePriorities` (array), `activeTechs` (array), `dateFrom`, `dateTo`, and `drawerOpen` (mobile drawer toggle). It defines static data arrays for `STATUSES` (Open, In Progress, Pending, Completed, Cancelled with hex colors), `PRIORITIES` (Critical, High, Medium, Low), and `TECHNICIANS` (5 entries with id, name, initials, color). A reusable `FilterGroup` sub-component uses its own `useState(defaultOpen)` and renders a collapsible section with a `ChevronDown` icon that rotates via `jf-open` class. Filter interactions include `toggleStatus`, `togglePriority`, `toggleTech` callbacks and a `handleReset` function. An `activeCount` derived value tracks total active filters. Uses `framer-motion` (`motion`, `AnimatePresence`) for drawer animations. Lucide icons used: `Search`, `ChevronDown`, `SlidersHorizontal`, `CheckSquare`, `Circle`, `Clock`, `AlertTriangle`, `User`, `Calendar`, `Check`, `RotateCcw`, `Filter`. Apply JobsFilter.css (8802 chars).

As a frontend developer, implement the JobsList section for the Jobs page. The component uses `useState` and `useMemo` to manage view mode (list/grid via `LayoutGrid`/`List` icons), active status filter tab, and sort option. Static `JOBS` array contains 8 job objects each with: `id`, `customer`, `service`, `status` (scheduled/in-progress/completed/on-hold/cancelled), `technician`, `techInitials`, `dueDate`, and `progress` (0–100). `STATUS_FILTERS` array drives tab navigation (All, Scheduled, In Progress, Completed, On Hold, Cancelled). `SORT_OPTIONS` array (6 entries: Newest First, Oldest First, Due Date Soonest/Latest, Customer A–Z, Progress High–Low) drives a sort dropdown. `badgeClass` and `badgeLabel` maps derive CSS classes and display labels per status. Uses `framer-motion` (`motion`, `AnimatePresence`) for list item entrance animations. Lucide icons: `LayoutGrid`, `List`, `ChevronUp`, `ChevronDown`, `ClipboardList`, `Plus`, `Calendar`, `User`, `Tag`, `ArrowUpDown`. An empty state uses `ClipboardList` with a `Plus` CTA. Apply JobsList.css (10106 chars).

As a frontend developer, implement the QuotesHeader section for the Quotes page. This renders a header.qh-root with a qh-inner container containing: (1) a breadcrumb nav (qh-breadcrumb) with Dashboard link using LayoutDashboard icon and ChevronRight separator leading to 'Quotes' as current page; (2) a qh-title-row with a qh-title-group containing a FileText icon in qh-icon-wrap and h1/p title text ('Quotes' + subtitle), and qh-actions with an Admin role badge (qh-role-badge with animated qh-role-dot) and a Send Quote button (qh-btn-send with Send icon); (3) a qh-context-strip with three context items showing auto follow-up status (Clock icon), visibility (Shield icon), and ServiceMate sync status (RefreshCw icon). All static, no state hooks required.

As a frontend developer, implement the QuotesFiltersToolbar section for the Quotes page. Uses useState for activeStatus ('all'), searchQuery (''), dateFrom (''), dateTo (''), and view ('table'/'grid'). Renders a qft-root with qft-inner containing: (1) a top row with a search input (qft-search-wrapper + qft-search-input with Search icon), date range inputs (qft-date-range with From/To labels and two date inputs), a view toggle group (qft-view-btn with LayoutList/LayoutGrid icons and qft-active state), and an optional clear button shown when hasActiveFilters is true; (2) a status filter pills row with STATUS_FILTERS array (all/pending/sent/accepted/expired with counts) rendered as qft-filter-pill buttons with qft-dot color indicators and active state styling. Uses framer-motion AnimatePresence for the clear button. clearAll useCallback resets all filters.

As a frontend developer, implement the QuotesStatusSummary section for the Quotes page. Renders a section.qss-root with qss-inner containing four stat cards from the stats array: Pending Quotes (24, +12%, Clock icon, qss-card--pending), Sent Today (8, +3, Send icon, qss-card--sent), Awaiting Response (17, 0%, MessageSquare icon, qss-card--awaiting), Expired (5, -2, XCircle icon, qss-card--expired). Each card has qss-card-header (label + colored icon), qss-card-body (qss-stat-value number + qss-pct with PctArrow component rendering TrendingUp/TrendingDown/Minus lucide icons based on pctDir), and qss-card-footer context text. Fully static, no state hooks.

As a frontend developer, implement the QuotesPendingTable section for the Quotes page. Uses useState for sortField ('id'), sortDir ('asc'), currentPage (1), selectedIds ([]), and expandedId (null). ALL_QUOTES array has 12 entries with id, customer, amount, status (pending/sent/review/expired/approved), created date, and service name. Renders a qpt-root with: (1) a table header row with COLUMNS array (Quote ID, Customer, Amount, Status, Created Date, Actions) with sortable columns showing ChevronUp/ChevronDown sort icons; (2) animated tbody rows using framer-motion with qpt-badge status chips (STATUS_CONFIG maps status to label/cls), formatted currency amounts, action buttons (Eye/Send/Pencil/Trash2/Download icons in qpt-row-actions, opacity-0 revealed on hover); (3) mobile card fallback layout; (4) pagination controls with ChevronLeft/ChevronRight and page number buttons, PAGE_SIZE=6. AnimatePresence wraps row transitions.

As a frontend developer, implement the QuotesFollowUpQueue section for the Quotes page. Uses useState for queue (initialQueue array of 6 items with id, customer, email, phone, daysPending, status, autoFollowUp, quoteValue) and scheduledIds ([]). Computes overdueCount/pendingCount/autoOnCount from queue. Renders a section.qfuq-root with: (1) a qfuq-header with AlertTriangle icon title, stats strip showing overdue/pending/auto-on counts, and a 'Send All Urgent' bulk button (handleBulkSend marks all items with daysPending > URGENCY_THRESHOLD=7 as scheduled); (2) a qfuq-queue-list with AnimatePresence-wrapped motion.div cards for each queue item showing urgency indicator, customer name, contact info (Mail/Phone icons), daysPending badge, quoteValue, an autoFollowUp toggle button (Zap icon, handleToggle), and a Schedule button (CalendarPlus icon, handleSchedule marks item as scheduled with CheckCircle confirmation). Items with daysPending > 7 get overdue styling.

As a frontend developer, implement the QuotesAnalytics section for the Quotes page. Registers Chart.js with ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement. Uses useState for activeTab and useRef for chart instances. Renders a qa-root with: (1) a header with BarChart2 icon and RefreshCw refresh button; (2) a Doughnut chart (react-chartjs-2) for conversion breakdown (Converted 62%, Declined 14%, Pending 18%, Expired 6%) with pieOptions (cutout 68%, custom tooltips, dark background); (3) a horizontal Bar chart for response time distribution across 6 buckets ('< 1 hr' to '2+ days') with barOptions (indexAxis: 'y', custom tooltip callbacks); (4) a TOP_CUSTOMERS table with name, quotes count, conversion rate progress bar, and value columns; (5) four KPIS stat tiles (Avg Response Time, Conversion Rate, Avg Quote Value, Active Customers) with TrendingUp/TrendingDown icons. Uses framer-motion AnimatePresence for tab transitions.

As a frontend developer, implement the QuotesActions section for the Quotes page. Uses useState for allSelected (false), activeModal (null), and toast (null). ACTIONS array defines 4 actions: Bulk Send Follow-Ups (Send icon, qa-primary card, badge '14 Pending', triggers confirm modal), Export as CSV (Download icon, qa-export, badge '87 Quotes', direct toast), Generate Report (FileText icon, qa-report, badge 'This Month', direct toast), Archive Expired (Archive icon, qa-destructive, badge '9 Expired', destructive confirm modal with AlertTriangle icon). handleActionClick checks confirmTitle — if present opens activeModal, else showToast. Confirm modal rendered with AnimatePresence as a fixed overlay (motion.div) with modalIconClass, confirmBody (HTML via dangerouslySetInnerHTML), cancel/confirm buttons. Toast notification animates in/out via AnimatePresence with CheckCircle and Zap icons. showToast auto-clears after 3200ms.

As a frontend developer, implement the LoginFooter section for the Quotes page. This renders a footer.lf-footer with lf-inner containing a copyright paragraph (lf-copyright) showing dynamic currentYear via new Date().getFullYear() with 'indigo-doc' highlighted in primary_light color, and a nav.lf-links with three anchor links (Privacy Policy, Terms of Service, support@indigo-doc.com) separated by lf-divider elements. Includes lf-fadeUp entrance animation (opacity 0 to 1 with translateY). Mobile responsive: flex-direction column, links wrap, dividers hidden. Component already exists from Login page — reuse or verify shared component.

As a frontend developer, implement the InventoryHeader section for the Inventory page. Uses framer-motion `fadeUp` variants (opacity 0→1, y 10→0, staggered by index * 0.07s) on a breadcrumb nav (Dashboard → Inventory), a title group with a Package lucide icon and h1 'Inventory Management', a description paragraph about centralised stock view, and three animated scope tags (Van Stock/Truck, Warehouse/Warehouse, Purchase Orders/ShoppingCart icons) each with variant-specific CSS classes. Includes an actions area with Plus and RefreshCw icon buttons (`ih-btn--secondary`). Import from '../styles/InventoryHeader.css'.

As a frontend developer, implement the InventoryFilters section for the Inventory page. Uses `useState` for four controlled fields: `search` (text input with Search icon, placeholder 'Search part name or SKU...'), `location` (select from LOCATIONS array), `status` (select from STATUSES array), and `supplier` (select from SUPPLIERS array). Computes `activeBadges` array from non-default selections and renders animated badge chips using framer-motion AnimatePresence with individual X (remove) buttons calling `removeBadge(key)`. Includes a RotateCcw 'Reset filters' button calling `resetAll()` shown only when `hasFilters` is true. Active selects receive `ifl-select--active` class. Import from '../styles/InventoryFilters.css'.

As a frontend developer, implement the InventoryTabs section for the Inventory page. Uses `useState` for `activeTab` (default 'all_stock'). Renders a `role='tablist'` tab bar with four tabs defined in TABS constant: All Stock (Layers icon), Van Inventory (Truck icon), Warehouse (Warehouse icon), Low Stock Alerts (AlertTriangle icon, count badge of 7). Active tab renders a framer-motion `layoutId='it-tab-indicator'` spring-animated underline indicator. Below the tab bar, an `AnimatePresence mode='wait'` panel shows the active tab's meta description string with a fade/slide transition. Applies aria roles: tab, tabpanel, aria-selected, aria-controls. Import from '../styles/InventoryTabs.css'.

As a frontend developer, implement the LowStockAlerts section for the Inventory page. Renders a header with AlertTriangle icon, title 'Low Stock Alerts', and a count badge showing ALERT_ITEMS.length (6 items). Includes an 'View all alerts' link with ArrowRight icon. Uses `useState` for `requestedIds` array. Renders a horizontally scrollable `lsa-track-wrapper` of alert cards, each showing: urgency icon (AlertOctagon for critical, AlertTriangle for high, AlertCircle for medium) with urgency label, partName, SKU, location with locationType icon (Truck for van, Warehouse for warehouse), current qty vs reorder level, and a 'Request Restock' ShoppingCart button that calls `handleRestock(id)` and transitions to a CheckCircle 'Requested' state when id is in `requestedIds`. Empty state shows Package icon. Import from '../styles/LowStockAlerts.css'.

As a frontend developer, implement the PurchaseOrdersTable section for the Inventory page. Renders a filterable, expandable table over PURCHASE_ORDERS (5 orders with supplier, supplierInitials, status, totalCost, expectedDelivery, and items arrays). Uses `useState` for `filterSupplier`, `filterStatus`, and `expandedId`. Filter controls include supplier select (ALL_SUPPLIERS) and status select (ALL_STATUSES: pending/in-transit/delivered) with STATUS_LABELS mapping. Each row shows: supplier avatar (initials), PO id, status badge, `formatCurrency(totalCost)` (£ format with thousands separator), expected delivery date, and Eye/Edit2/Trash2/RefreshCw action buttons. Clicking a row or ChevronRight expands inline via framer-motion AnimatePresence to show an items sub-table (name, SKU, qty, unitCost). ShoppingCart icon in section header. Import from '../styles/PurchaseOrdersTable.css'.

As a frontend developer, implement the VanInventoryCards section for the Inventory page. Renders a summary header showing `totalVans` (6) and `totalLowStock` (aggregated from all vans). Uses framer-motion `containerVariants` (staggerChildren: 0.07) and `cardVariants` (opacity 0→1, y 18→0, 0.35s easeOut) for a grid of VanCard sub-components. Each VanCard shows: van name, technician name, totalItems count, lowStockCount badge (conditionally rendered with AlertTriangle), and a parts list of up to 3 items each with a proportional fill bar (qty/max %) colored by level ('ok'=green, 'warning'=amber, 'danger'=red). Cards with `lowStockCount > 0` receive `vic-card--low-stock` class. Action buttons per card: Eye (View), ClipboardList (List), ShoppingCart (Restock). Import from '../styles/VanInventoryCards.css'.

As a frontend developer, implement the InventoryActions section for the Inventory page. Uses `useState` for `loadingId`, `toast`, and `mobileOpen`. Defines ACTIONS map with five entries: createPO (ShoppingCart, accent), addPart (Plus, primary), export (Download, secondary), sync (RefreshCw, ghost), print (Printer, ghost). `handleAction(actionId)` sets loadingId, then after 900ms timeout clears it and sets a toast with msg/variant/Icon/key, auto-dismissed after 2600ms. ActionButton sub-component renders a framer-motion `whileTap={{ scale: 0.96 }}` button showing Loader spinner when `loadingId === actionId`. Desktop layout splits primary group (createPO, addPart) left and secondary group (export, sync, print) right. Mobile collapses secondary actions behind a ChevronDown toggle (`mobileOpen`). Toast uses AnimatePresence with CheckCircle/AlertCircle icons. Import from '../styles/InventoryActions.css'.

As a frontend developer, implement the InventoryFooter section for the Inventory page. Uses `useState` for `timestamp` (initialized via `formatTimestamp(new Date())`) and `connectionStatus` (default 'connected'). A `useEffect` sets up a `setInterval` every 30000ms to update the timestamp using `formatTimestamp` (formats as 'Mon DD, YYYY HH:MM:SS'). Renders a footer with left side showing: RefreshCw sync icon, 'Last updated:' label, live timestamp, and a status dot + label from STATUS_CONFIG ('Connected'/'Syncing...'/'Connection Error') with class based on connectionStatus. Right side renders a nav with BookOpen 'Help Docs' and Settings 'Settings' links (both href='/Dashboard') separated by a divider. Import from '../styles/InventoryFooter.css'.

As a frontend developer, implement the FinancialsBreadcrumb section for the Financials page. Renders a nav element with class `fbc-root` containing an ordered list breadcrumb trail: Dashboard (linked to /Dashboard) → ChevronRight separator → 'Financials' (aria-current=page). Also includes a back button with ArrowLeft icon linking to /Dashboard. Uses lucide-react ChevronRight and ArrowLeft icons with explicit 14×14 dimensions. Import from '../styles/FinancialsBreadcrumb.css'.

As a frontend developer, implement the FinancialsHeader section for the Financials page. Uses `useState` for `showDatePicker` (boolean), `dateFrom` (string), `dateTo` (string), and `activeRange` (object|null). Includes a DollarSign icon title row, subtitle text, and a conditional `fh-active-range` badge showing formatted date range with Calendar icon and an X clear button when `activeRange` is set. Actions area has a framer-motion animated Export Report anchor (`whileHover scale 1.03`, `whileTap scale 0.97`) and a Filter by Date Range button that toggles a date popover. The popover uses `AnimatePresence` with `motion.div` animating `opacity`, `y`, and `scale` (`initial`, `animate`, `exit`). Includes `handleApplyRange`, `handleClearRange`, and `formatDate` (DD/MM/YYYY formatter) helpers. Import from '../styles/FinancialsHeader.css'.

As a frontend developer, implement the FinancialsSummaryCards section for the Financials page. Renders four KPI cards (revenue, outstanding, paid, overdue) from the static `KPI_CARDS` array using framer-motion `containerVariants` (staggerChildren 0.1) and `cardVariants` (opacity 0→1, y 22→0, duration 0.45). Each `KPICard` uses `motion.div` with `whileHover y: -3` spring animation. Cards include: a variant-specific icon (`DollarSign`, `Clock`, `CheckCircle`, `AlertTriangle`), metric value, trend badge with `TrendingUp`/`TrendingDown` icon colored by sentiment (up-good, up-bad, down-good), comparison text, and a `SparkBar` mini chart rendered from `sparkData` arrays using percentage heights. Import from '../styles/FinancialsSummaryCards.css'.

As a frontend developer, implement the FinancialsInvoiceTracking section for the Financials page. This is the most complex section, using `useState` for search, sort field/direction, current page, and active tab (Invoices/Purchase Orders/Payments). Uses `useMemo` for filtered and sorted data. Contains three static datasets: `INVOICES` (12 records with id, client, amount, status, due, issued), `PURCHASE_ORDERS` (6 records), and `PAYMENTS`. Renders a tabbed interface with FileText, ShoppingCart, CreditCard lucide icons. Each tab has a searchable, sortable table with `ChevronUp`/`ChevronDown` sort icons, `Eye` and `Flag` action buttons, status badges (Paid/Pending/Overdue/Approved), and paginated rows using `ChevronLeft`/`ChevronRight` pagination controls. Uses `AnimatePresence` and `motion` for tab transition animations. Import from '../styles/FinancialsInvoiceTracking.css'.

As a frontend developer, implement the FinancialsPurchaseOrders section for the Financials page. Uses `useState` for `supplierFilter`, `statusFilter`, `search`, `sortField` (default 'date'), and `sortDir` (default 'desc'). Uses `useMemo` for filtered/sorted rows from 10-item `PO_DATA` array. Renders a header with ShoppingCart icon and a Plus 'New PO' button. Toolbar includes a Search input with lucide Search icon, a supplier dropdown (All Suppliers + unique suppliers from PO_DATA), and a status dropdown ('All Statuses', 'Pending', 'Received', 'Cancelled'). Table has sortable columns (id, supplier, amount, date, status) using `SortIcon` component with `ChevronUp`/`ChevronDown`. Each row has a `StatusBadge` (fpo-badge-pending/received/cancelled with dot indicator) and Eye, Edit2, Trash2 action buttons. Uses `AnimatePresence` and `motion` row animations. Import from '../styles/FinancialsPurchaseOrders.css'.

As a frontend developer, implement the FinancialsPaymentStatus section for the Financials page. Uses `useRef` for `chartRef` and `chartInstanceRef`. Registers Chart.js modules: `BarElement`, `CategoryScale`, `LinearScale`, `Tooltip`, `Legend`. In `useEffect`, destroys any existing chart instance and creates a grouped bar chart on canvas with 12-month labels (Jun–May) and three datasets: Paid (green rgba 5,150,105 0.75), Pending, and Overdue — each with `borderRadius: 4` and `borderSkipped: false`. Also renders three `statusData` stat cards (Paid 142/$284,630/67%, Pending 38/$76,420/18%, Overdue 19/$38,210/9%) using `containerVariants` stagger and `cardVariants` with CheckCircle, Clock, AlertTriangle icons. Renders a `timelineItems` list of 6 recent invoice entries with status-keyed color classes. Import from '../styles/FinancialsPaymentStatus.css'.

As a frontend developer, implement the FinancialsXeroReconciliation section for the Financials page. Uses `useState` for `syncing` (boolean) and `lastSynced` (timestamp string, default '05 May 2026, 09:14 AM'). Has a `handleReconcile` function that triggers a sync animation. Renders three sub-panels: (1) Sync status header with RefreshCw icon button (spins when `syncing`), last synced timestamp, and Activity/Database/List summary stats; (2) `ALERTS` list (3 items: warning, error, info) using `alertIcon` helper mapping to AlertTriangle, XCircle, Info lucide icons with amount badges; (3) `PENDING_ITEMS` list (4 items: 3 unmatched invoices + 1 PO payment mismatch) with ref, type, and amount. `SYNC_HISTORY` table (5 rows) shows id, timestamp, `statusIcon` (CheckCircle/AlertTriangle/XCircle at 11px), records count, discrepancies, and initiatedBy. Uses `containerVariants` (staggerChildren 0.08, delayChildren 0.1) and `itemVariants` (opacity/y with 0.35s easeOut). Import from '../styles/FinancialsXeroReconciliation.css'.

As a frontend developer, implement the FinancialsQuickActions section for the Financials page. Renders a static `actions` array of 4 items: Generate Financial Report (FileText icon, /Financials), Export to CSV (Download icon, /Financials), View Supplier Performance (Users icon, /Financials), and Track Revenue Trends (TrendingUp icon, /Analytics). Each action renders as an anchor tag with classes `fqa-btn` + variant modifier (fqa-btn--report/export/supplier/revenue), containing an `fqa-icon-wrap`, `fqa-text` div with `fqa-label` and `fqa-sub` spans, and a ChevronRight arrow (16px). Section uses `fqa-root` > `fqa-inner` > `fqa-heading` + `fqa-grid` layout. Import from '../styles/FinancialsQuickActions.css'.

As a frontend developer, implement the LoginFooter section for the Financials page. This is a shared footer component (may already exist from Quotes page, task c8bb06d4-a5c6-4aad-a71d-291d12e66116). Renders a footer with `lf-footer` > `lf-inner` layout containing: a copyright paragraph with `new Date().getFullYear()` and bold 'indigo-doc' span, and a nav with three links (Privacy Policy → /Login, Terms of Service → /Login, Support → mailto:support@indigo-doc.com) separated by `lf-divider` elements. Import from '../styles/LoginFooter.css'. Verify reuse from prior pages before reimplementing.

As a frontend developer, implement the AnalyticsHeader section for the Analytics page. Uses `useState` for `activePeriod` (default `'month'`), `startDate`, and `endDate`. Renders a two-row layout: top row has an eyebrow label with `ah-eyebrow-dot`, an `h1` title with `ah-title-accent` span, a description paragraph, and an Export Report button with `Download` lucide icon and a `handleExport` stub. Controls row contains a `TIME_PERIODS` array (`today`, `week`, `month`, `custom`) mapped to `ah-period-btn` buttons with `aria-pressed`; the active button renders a `motion.span` with `layoutId="ah-period-pill"` and spring transition for an animated pill indicator. When `activePeriod === 'custom'`, an `AnimatePresence`-wrapped `motion.div` with `initial={{ opacity: 0, height: 0 }}` / `animate={{ opacity: 1, height: 'auto' }}` / `exit` reveals a custom date range input. Import `motion`, `AnimatePresence` from framer-motion; `Download`, `Calendar`, `RefreshCw` from lucide-react.

As a frontend developer, implement the AnalyticsFilterSidebar section for the Analytics page. Defines a reusable `FilterSection` sub-component with `useState(open)`, `aria-expanded`, keyboard `onKeyDown` toggle, and `AnimatePresence`-wrapped `motion.div` using `bodyVariants` (`open`/`closed` height+opacity transitions). Main `AnalyticsFilterSidebar` manages state: `drawerOpen` (mobile drawer), `selectedStatuses` (array, default `['pending','in-progress','completed']`), `selectedTechs` (array), `dateFrom`, `dateTo`, `selectedDatePreset`, and `selectedSuppliers`. Renders `JOB_STATUSES` checkboxes with colored status dots and counts, `TECHNICIANS` avatar chips (`initials`, `color`), `DATE_PRESETS` quick-select buttons, and `SUPPLIERS` checkboxes. Includes a Reset Filters button. Uses `Filter`, `ChevronDown`, `ChevronUp`, `Calendar`, `Users`, `Briefcase`, `Truck`, `SlidersHorizontal`, `RotateCcw`, `Check` lucide icons. Mobile drawer toggled by `drawerOpen` state with `AnimatePresence`.

As a frontend developer, implement the AnalyticsMetricsGrid section for the Analytics page. Defines a `METRICS` array of four cards (Total Jobs, Active Jobs, Completed This Month, Revenue This Month) each with `label`, `value`, `icon` (lucide), `trend`, `trendUp` bool, and a `spark` array of 12 data points. Implements `buildSparkPath(data, width, height)` to compute SVG line and area paths with padding. Renders a `SparkLine` sub-component using an inline SVG with a `linearGradient` (id generated via `useId`) fading `#3b82f6` to transparent; renders `amg-spark-area` filled path and `amg-spark-path` stroke. Each card is a `motion.div` (`amg-card`) with `initial={{ opacity: 0, y: 16 }}`, staggered `delay: idx * 0.07` entrance, and `whileHover={{ y: -4 }}`. Displays `TrendingUp` or `TrendingDown` lucide icon based on `trendUp`.

As a frontend developer, implement the AnalyticsJobTrends section for the Analytics page. Registers Chart.js modules (`CategoryScale`, `LinearScale`, `PointElement`, `LineElement`, `Title`, `Tooltip`, `Legend`, `Filler`) and renders a `Line` chart from `react-chartjs-2`. State: `showCreated`, `showCompleted` (toggle booleans), and `tooltip` object (`{ visible, x, y, date, created, completed }`). Datasets use 18-month `MONTHS` labels; Jobs Created (`#3b82f6`, `fill: true`, tension 0.42) and Jobs Completed (`#10b981`, dual y-axis `y2`), both with orange (`#f97316`) point backgrounds and `pointRadius: 4`. Chart options use `interaction: { mode: 'index', intersect: false }`, `animation: { duration: 900, easing: 'easeInOutQuart' }`, hidden legend. `computeStats` derives `totalCreated`, `totalCompleted`, `completionRate`, `avgPerMonth` displayed as stat chips. Uses `useRef` for `chartRef`. Toggles hide datasets by mapping values to `null`. Animated stat summary via `AnimatePresence`.

As a frontend developer, implement the AnalyticsInventoryPerformance section for the Analytics page. Uses `useState(animated)` and `useRef(rootRef)` with an `IntersectionObserver` (threshold 0.15) to trigger bar animations on scroll-into-view; observer disconnects after first trigger. Renders a `CATEGORIES` array of 7 inventory categories each with `label`, `turnover`, `maxVal`; computes `MAX_TURNOVER` to identify the top-performing row (`aip-row-top` class + `aip-top-badge` span). Header displays title, subtitle, and two `motion.div` stat cards (Total SKUs: 1,847 and Low Stock Alerts: 23) with staggered `delay: 0.1/0.2` fade-in entrances. Bar chart rows render `aip-bar-label` and an animated bar whose width is `(turnover / 10) * 100`% controlled by `animated` state, with `aip-bar-fill` and turnover value label.

As a frontend developer, implement the AnalyticsSupplierMetrics section for the Analytics page. Registers Chart.js `ArcElement`, `Tooltip`, `Legend` and renders a `Doughnut` chart (`cutout: '62%'`) from `react-chartjs-2` with `PIE_COLORS` for 5 suppliers; custom tooltip callback formats `${label}: ${parsed} orders`. Defines `containerVariants` / `cardVariants` / `rowVariants` framer-motion variants for staggered entrance. Renders three `KPI_CARDS` (Avg Response Time 3.4 hrs, Quote Accuracy 91.7%, On-Time Delivery 94.2%) each with `colorClass`, `TrendingUp`/`TrendingDown` lucide icon, and trend label. Supplier table rows use custom `rowVariants` with `custom={i}` prop for per-row stagger delays. Top supplier (`AutoParts Direct`, `top: true`) gets an `Award` badge. Order share bars render as percentage of `totalOrders`. Uses `Package`, `Award`, `TrendingUp`, `TrendingDown` lucide icons.

As a frontend developer, implement the AnalyticsFinancialSummary section for the Analytics page. Registers Chart.js modules (`CategoryScale`, `LinearScale`, `PointElement`, `LineElement`, `Filler`, `Tooltip`, `Legend`) and renders a dual-dataset `Line` chart with 12-month revenue (`revenueData`, blue fill) and cost (`costData`, green fill) series; tooltip callback formats values as `$Xk`. Implements an `AnimatedNumber` sub-component using framer-motion `useMotionValue`, `useTransform`, and `animate` to count up to target value on mount (duration 1.4s, `easeOut`); supports `prefix`, `suffix`, and auto `k` formatting for values ≥ 1000. Displays KPI summary cards using `DollarSign`, `TrendingUp`, `TrendingDown`, `BarChart2`, `Percent`, `ArrowUpRight` lucide icons. Uses `useEffect` + `useRef` for intersection-triggered animation. Chart options include custom axis tick formatters and `interaction: { mode: 'index', intersect: false }`.

As a frontend developer, implement the AnalyticsTeamPerformance section for the Analytics page. Manages `useState` for `sortKey` and `sortDir` (asc/desc), plus pagination state for current page with `ITEMS_PER_PAGE`. Uses `useMemo` to sort `ALL_TECHNICIANS` (12 entries across HVAC, Plumbing, Electrical depts) by `sortKey`/`sortDir` and slice to current page. `COLUMNS` array defines 6 columns: rank, name, jobsDone, avgJobTime, rating, notesAccuracy — all sortable except rank. Renders a `StarRating` sub-component computing full/half/empty star counts from a float value. The top-ranked technician (Marcus Reyes, `eom: true`) receives an `Award` lucide badge for Employee of the Month. Sort toggle via `ChevronUp` icon on active column header. Pagination uses `ChevronLeft`/`ChevronRight` buttons. Rows animate in via `motion.tr` with `AnimatePresence` on sort/page change. Avatar initials colored from `AVATAR_COLORS` array indexed by technician id.

As a frontend developer, implement the LoginFooter section for the Analytics page. This is a shared layout component (may already exist from Financials/Inventory pages) using `lf-footer`, `lf-inner`, `lf-copyright`, `lf-links`, `lf-link`, and `lf-divider` CSS classes. Dynamically computes `currentYear` via `new Date().getFullYear()`. Renders copyright text with `indigo-doc` brand span, and a footer nav with three links: Privacy Policy (`/Login`), Terms of Service (`/Login`), and Support (`mailto:support@indigo-doc.com`), separated by `lf-divider` divs. Import from `../styles/LoginFooter.css`. Verify the component is reused from a prior page rather than duplicated.

As a frontend developer, implement the NotesJobHeader section for the Notes page. This section renders a sticky page header with: (1) a 4-level breadcrumb nav (Dashboard → Jobs → JOB-2024-0847 → Notes) using ChevronRight separators from lucide-react; (2) a main row showing job identity block with Briefcase icon, job ID 'JOB-2024-0847', divider dot, and customer name 'Meridian HVAC Solutions'; (3) a clickable status badge that cycles through JOB_STATUSES array ['in-progress','pending','completed','on-hold'] via useState(cycleIdx) and handleStatusCycle(), with STATUS_CLASS_MAP driving conditional CSS classes; (4) metadata chips showing Calendar/date, User/assignedTo, Clock/lastUpdated using lucide icons; (5) an ExternalLink button for opening in ServiceMate. Uses framer-motion for entry animation (opacity 0→1, y -6→0, duration 0.28s). NavBar component may already exist from prior pages — this is a page-specific header, not the global nav. CSS uses njh- prefix with responsive breakpoints for mobile stacking.

As a frontend developer, implement the NavBar section for the Van Inventory page. This component (may already exist from previous pages) renders a `<nav className="nb-root">` with an inner wrapper containing a brand link (`/Login`) using the `FileText` lucide icon and the text 'indigo-doc', plus a help button with `HelpCircle` icon. Import from `../styles/NavBar.css`. Reuse the existing NavBar component if already implemented in Analytics or other pages.

As a frontend developer, implement the JobsListPagination section for the Jobs page. The component uses `useState` to manage `currentPage` (default 1), `perPage` (default 25), and `jumpValue` (string). Constants `TOTAL_JOBS = 147` and `PER_PAGE_OPTIONS = [10, 25, 50, 100]`. A `getPageNumbers(currentPage, totalPages)` helper returns a smart page array with `'ellipsis-start'`/`'ellipsis-end'` sentinels for truncation (handles ≤7 pages flat, left-skewed, right-skewed, and centered windows). Derived values: `totalPages`, `startItem`, `endItem`. Handlers: `goToPage` (clamps to bounds), `handlePerPageChange` (resets to page 1), `handleJump` (parses integer from `jumpValue`), `handleJumpKeyDown` (Enter key triggers jump). Renders a meta row with count display and a `<select>` for per-page, plus pagination controls with `motion.button` (whileTap scale 0.94) for Prev/Next using `ChevronLeft`/`ChevronRight`, a page number row rendering ellipsis spans and numbered page buttons, and a jump-to-page input. Apply JobsListPagination.css (5373 chars).

As a frontend developer, implement the StockLevelsTable section for the Inventory page. Renders a paginated, sortable data table over INVENTORY_DATA (12+ items with fields: id, partName, category, sku, location, quantity, reorderLevel, status, supplier, lastUpdated, unitCost, leadTime, binLocation, notes). Uses `useState` for sort column/direction, current page, rows-per-page, and an expandedRowId for inline detail expansion. Column headers with ChevronUp/ChevronDown sort indicators. Each row shows a location badge (Truck icon for 'van', Warehouse icon for 'warehouse'), status chip (in-stock/low-stock/out-of-stock), and action buttons (Eye, Edit3, RefreshCw). Expanded rows animate in via framer-motion AnimatePresence showing leadTime, binLocation, notes. Pagination with ChevronLeft/ChevronRight and page count. Download button with Download icon. Import from '../styles/StockLevelsTable.css'.

As a frontend developer, implement the NotesSidebar section for the Notes page. This section renders a collapsible left sidebar containing: (1) a collapse toggle button using PanelLeftClose/PanelLeftOpen icons with useState(collapsed) driving width transition; (2) a search input with Search icon and useState(search) for live filtering of ALL_NOTES array (6 seeded notes for JOB-4821 with tech names J. Martinez, S. Patel, K. Thompson); (3) three filter pill rows for TECHS, STATUSES, DATES arrays using useState(activeTech/activeStatus/activeDate); (4) a scrollable note list where each card shows tech name, formatted date via formatDate(), time, statusClass()/statusLabel() badge (complete/draft/pending), word count, and truncated preview text; (5) useState(selectedId) for active note highlighting; (6) useMemo for filtered note computation combining search + tech + status + date filters. Uses framer-motion AnimatePresence for card entrance animations. CSS uses ns- prefix with mobile responsive drawer behavior.

As a frontend developer, implement the NotesEditor section for the Notes page. This section renders a rich textarea editor with: (1) a toolbar with Bold/Italic toggle buttons (useState(boldActive/italicActive)) and List/ListOrdered/Minus formatting buttons from lucide-react; (2) four HINT_TAGS buttons (Work Performed, Issues Found, Parts Used, Time On-Site) each with an icon and snippet string — clicking calls insertAtCursor() which uses textareaRef.current.selectionStart/End to splice text; (3) a controlled textarea with useRef(textareaRef), useState(text), MAX_CHARS=5000 limit, and multi-line PLACEHOLDER constant; (4) auto-save logic using saveTimerRef (1800ms debounce → 'saving' state → 700ms → 'saved' → 2500ms → 'idle') via useState(saveStatus) and getSaveState() helper; (5) a footer bar showing live charCount, wordCount, fillPct progress bar with fillClass (ne-fill-low/mid/high), and animated save status indicator with saveCls/saveLabel; (6) Save and RotateCcw action buttons. CSS uses ne- prefix with responsive layout.

As a frontend developer, implement the VanInventoryHeader section using `framer-motion` for a fade-in slide-down entrance (`opacity: 0→1, y: -8→0`, duration 0.35s). Includes: a breadcrumb nav with links to `/Dashboard` and `/Inventory` using `ChevronRight` separators; a title row with a spring-animated `Truck` icon wrapper (`whileHover scale 1.08`) and h1 'Van Inventory'; a spring-animated CTA button (`RefreshCw` icon, 'Request Restock', `whileHover scale 1.04`, `whileTap scale 0.97`); a search toolbar with `Search` icon and controlled `<input>` bound to `useState('')` for `search`; and filter pills from `FILTER_PILLS` array (All Vans, Low Stock, Restocked, Critical) managed by `useState('all')` for `activeFilter` with `vih-pill--active` class toggling and `aria-pressed`.

As a frontend developer, implement the VanSelector aside component with static `VAN_DATA` array (7 vans: Alpha through Golf Unit with vehicleId, stock count, and status ok/low/critical). Uses `useState(activeVanId || 'VAN-001')` for `selectedId` and calls `onSelectVan` prop callback on selection. Renders a desktop header with van count, a `<ul>` list where each `<li>` uses `motion.div` with staggered entrance (`delay: idx * 0.045, x: -8→0`), `Truck` icon, van name/id info, and a status badge via `getBadgeClass()` returning `vs-badge-critical/low/ok` classes. Items are keyboard accessible (`onKeyDown` for Enter/Space). Includes a footer note and a mobile dropdown using `AnimatePresence` with `ChevronDown` toggle.

As a frontend developer, implement the InventoryOverview section rendering a 4-card stats grid from a static `stats` array. Each card uses a `Package/AlertTriangle/Wrench/RefreshCw` lucide icon, displays a numeric value (247/14/32/6), a label, and a status badge. Cards use BEM-style modifier classes: `io-card--primary/accent/secondary/highlight` and `io-icon-wrap--primary/accent/secondary/highlight`. Badges use `io-badge--ok/warn/neutral` variants. No state or API calls — purely presentational stat cards.

As a frontend developer, implement the StockLevelsTable with 12-item static `PARTS_DATA` array. Uses `useState` for search query, sort field/direction, status filter, and an expanded row detail panel. `useMemo` computes filtered+sorted results using `STATUS_ORDER` (critical:0, low:1, in-stock:2). Renders column headers with `ArrowUpDown/ArrowUp/ArrowDown` sort icons, filter chips using `Filter` icon, and a search input with `Search` icon. Each row shows part name/desc, part code, qty with `slt-qty-critical/low/ok` color classes, reorder level, status badge via `getStatusBadge()` (dot + label), and last-updated timestamp via `formatDate()` (relative time: hours ago). Expanding a row (`ChevronRight`) reveals a detail panel with a `PlusCircle` restock action and dismiss `X` button. `AnimatePresence` handles panel animation.

As a frontend developer, implement the PartsUsageLog section with 7-item static `USAGE_ENTRIES` array (partName, qty, technician, timestamp, jobRef, notes). Uses `useState` for `search`, `techFilter` (dropdown from `TECHNICIANS` array with `ChevronDown`), and `expandedId` for accordion expansion. `useMemo` computes filtered entries matching search against partName/technician/jobRef and technician filter. Renders each entry as a card with `ClipboardList` header icon, `User` technician chip, `Briefcase` jobRef chip, `Clock` timestamp, quantity badge, and an expand toggle. `AnimatePresence` animates the notes panel expansion showing `FileText` icon and full notes text. Search input uses `Search` icon.

As a frontend developer, implement the RestockRequests section with 6-item `INITIAL_REQUESTS` state array (partName, requestedQty, reason, requester, requestDate, status: pending/approved/ordered, deliveryDate). Uses `useState` for `activeFilter` (all/pending/approved/ordered from `FILTERS` array with color indicators) and `requests` list. `StatusBadge` component renders dot-badge with `rr-badge-pending/approved/ordered` classes. `REASON_META` maps low/used/preventative to label+class. Each card shows requester initials via `getInitials()`, formatted date via `formatDate()` (en-AU locale), delivery date with `Calendar` icon, and `Truck`/`CheckCircle`/`XCircle`/`Clock` icons per status. `AnimatePresence` with `motion.li` handles filter transitions. Approve/cancel actions update request status in state.

As a frontend developer, implement the LowStockAlerts section with 5-item static `LOW_STOCK_ITEMS` array (id, name, sku, current, reorderLevel, unit, severity: critical/low, supplier). Uses `useState` for `dismissed` (hides entire component when true), `expanded` (show/hide full item list toggle), `showForm` (restock order modal/panel), `formData` (pre-filled from `DEFAULT_FORM`), and `submitted` (1.2s success flash). Renders a banner with `AlertTriangle` icon showing criticalCount/totalCount. `handleQuickRestock` auto-fills `formData` from the first critical item (qty = reorderLevel - current + 2). Each item row shows a `getBarPct()` stock level progress bar, severity badge, supplier name, and SKU. The inline restock form has part/sku/quantity/supplier/priority/notes fields and `handleFormSubmit` sets `submitted` for 1.2s then closes. `AnimatePresence` animates form and list expansion. Dismiss `X` button sets `dismissed: true`.

As a frontend developer, implement the NotesStructuredOutput section for the Notes page. This section renders the AI-processed structured output panel with: (1) a header with Cpu icon showing 'AI Structured Output' title and a ShieldAlert confidence indicator; (2) four FIELD_DATA cards (work_performed, issues_encountered, parts_used, recommendations) each with title, icon (Wrench/AlertTriangle/Package/Lightbulb), confidenceLabel percentage badge, and confidence class ('high'/'medium'); (3) inline editing per card — useState tracking editingId, with Pencil toggle button switching between read view and a textarea pre-filled with editValue, confirmed via Check/X buttons; (4) 'issues_encountered' card renders a warningFlag banner below the items list; (5) 'parts_used' card renders a structured table with columns code/name/qty/unit instead of a bullet list; (6) a CalendarClock 'Follow-up' card spanning two columns. Uses framer-motion AnimatePresence for edit panel slide transitions. CSS uses nso- prefix with 2-column grid layout and responsive single-column fallback.

As a frontend developer, implement the NotesActions section for the Notes page. This section renders the bottom action bar with: (1) primary 'Save Note' button (na-btn-save) with Save icon, useState(saving) driving disabled state and 'Saving...' label during 900ms async simulation; (2) destructive 'Discard' button (na-btn-destructive) with X icon; (3) secondary 'Clear' button (na-btn-secondary) with Trash2 icon; (4) a visual na-sep divider; (5) 'Attach Image' button with Paperclip icon calling handleAttachImage stub; (6) 'Link Parts' button with Link2 icon calling handleLinkParts stub; (7) a confirmation dialog system using useState(activeDialog) with DIALOG_TYPES enum (DISCARD/CLEAR) and dialogConfig object defining title/body/confirmLabel — dialog rendered with framer-motion AnimatePresence for backdrop + modal entry; (8) a success toast notification using useState(savedToast/toastLeaving) with 2400ms display → fade-out sequence, showing CheckCircle icon. CSS uses na- prefix with sticky bottom bar layout and responsive stacking.