rapid-store

As a frontend developer, implement the `LandingHero` section using `framer-motion`'s `useScroll` and `useTransform` hooks tied to `heroRef` with offset `['start start', 'end start']`. Derive scroll-driven transforms: `headlineScale` (1.15→0.85), `headlineBlur` (4px→0px via `useTransform` mapped to CSS `blur()`), `headlineOpacity` (multi-keyframe 0.7→1→1→0.3), `swirlRotate` (0→280deg), `swirlScale` (1→1.15→0.9), `swirlOpacity` (multi-keyframe), `subOpacity`, `subY` (20→0), and `hintOpacity` (0.6→0) for scroll hint. Render a parallax background layer (`lh-deco-bg`) with six `lh-shape` divs at 0.3x scroll speed, a midground layer (`lh-deco-mid`) at 0.5x containing a `motion.div` swirl wrapper with the derived rotate/scale/opacity, housing an SVG with two `linearGradient` defs (`lh-grad-1`, `lh-grad-2`). Apply `LandingHero.css` (8031 chars).

As a frontend developer, implement the `TrustBadges` section with a `MagneticBadge` sub-component. Use `useInView` with `once: true, margin: '-80px'` on `containerRef` to trigger staggered entry animations. Define `badgeVariants` with `hidden` (opacity 0, x: -60, scale 0.92) and `visible` states using custom `i * 0.08` delay stagger. In `MagneticBadge`, implement magnetic mouse-tracking via `handleMouseMove`/`handleMouseLeave` callbacks on `iconRef`, clamping icon translation to ±8px at 0.15x strength. Render 6 badges from the `badges` array (`FiUsers`, `FiStar`, `FiClock`, `FiShield`, `FiTruck`, `FiAward` from `react-icons/fi`) each showing a `tb-stat` and `tb-label`. Include `whileHover={{ scale: 1.05 }}` spring transition. Render parallax `tb-deco-bg` (0.25x) and `tb-deco-mid` (0.45x) layers. Apply `TrustBadges.css` (4314 chars).

As a frontend developer, implement the `LandingFeatures` section with a `TiltCard` sub-component. Define 8 feature entries in `FEATURES` array using `lucide-react` icons (`Zap`, `BarChart3`, `Search`, `Shield`, `ShoppingCart`, `Truck`, `Heart`, `CreditCard`) with `colorType` of `'primary'` or `'secondary'`. In `TiltCard`, manage `tilt` state (`{ rotateX, rotateY }`) and `isHovered` state; implement `handleMouseMove` to calculate delta from card center via `getBoundingClientRect`, applying ±8deg 3D tilt via `rotateX`/`rotateY`. Use `useInView` for scroll-triggered card entry animations. Apply `LandingFeatures.css` (5250 chars). Cards animate in on viewport entry with staggered delays.

As a frontend developer, implement the `HowItWorks` section using both `framer-motion` and `gsap`. Manage `activatedSteps` array state and `isMobile` boolean via `useEffect` with `window.innerWidth < 768` resize listener. Use `useInView` with `once: true, margin: '-80px'` on `sectionRef`. On desktop: animate SVG connector path via GSAP `strokeDashoffset` (path `getTotalLength()` → 0, duration 2.4s, `power2.inOut`, delay 0.3) using `connectorRef`. On mobile: animate each connector in `mobileConnectorRefs` array with staggered `0.4 + i * 0.6` delay (0.8s each). Sequentially activate 4 steps (`STEPS` array: Browse Products `Search`, Filter & Compare `SlidersHorizontal`, Add to Cart `ShoppingCart`, Secure Checkout `CreditCard` from `lucide-react`) via `setTimeout` at `600 + i * 600` ms. Apply `HowItWorks.css` (8732 chars).

As a frontend developer, implement the `Testimonials` section with an auto-rotating carousel. Manage `direction` state for swipe direction and auto-rotate via `setInterval` at `AUTO_ROTATE_MS` (5000ms), cleared on manual navigation. Use `AnimatePresence` with custom `dir` prop and `cardVariants` (enter from ±300px x, opacity 0, scale 0.92; center via spring stiffness 260 damping 26; exit to ∓300px). Animate quote text word-by-word using `wordVariant` (opacity, y: 12, blur 4px, staggered `i * 0.03` delay). Animate avatar with `avatarVariant` (x: -40, scale 0.8 → spring entry, delay 0.15) and author info with `infoVariant` (x: 40, delay 0.2). Animate star ratings with `starVariant` (scale 0, rotate -90 → spring, staggered `0.3 + i * 0.08`). Render 5 testimonials from `testimonials` array with `initials` avatars, `rating` stars, `name`, and `role`. Apply `Testimonials.css` (6507 chars).

As a frontend developer, implement the `LandingPricing` section with a billing toggle (`useState` for monthly/annual). Define 3 tiers: Starter ($29/$23), Pro ($79/$63, `featured: true`), Enterprise (null price, 'Contact Sales'). Use `AnimatePresence` with `priceVariants` (opacity, y: ±12, blur 4px) for animated price switching between monthly and annual values. Use `useInView` on section ref with `cardVariants` (hidden: opacity 0, y: 40; visible with `i * 0.15` stagger). Render feature lists with `Check` and `Shield` icons from `lucide-react`, tooltips via `tooltip` field on each feature object. Apply `featured` tier's `lp-cta-primary` vs `lp-cta-outline` vs `lp-cta-enterprise` CTA classes. All CTA hrefs point to `/Signup` or `/Landing`. Apply `LandingPricing.css` (8709 chars).

As a frontend developer, implement the `LandingFAQ` section with category filtering and accordion expand/collapse. Manage `activeCategory` state (default `'All'`) from `CATEGORIES` array (`['All', 'General', 'Billing', 'Technical', 'Shipping']`). Filter `FAQ_DATA` (8 items across General/Billing/Technical categories, each with `id`, `category`, `question`, `answer`) by active category. Use `AnimatePresence` for accordion panel expand/collapse transitions on individual FAQ items toggled by `useCallback` handlers. Render category filter pill buttons that update `activeCategory`. Each accordion item shows question header with expand indicator and animates answer panel in/out. Apply `LandingFAQ.css` (5822 chars).

As a frontend developer, implement the `LandingCTA` section with magnetic button, particle burst, and GSAP background pulse. Manage `particles` array state (18 particles, `PARTICLE_COLORS`: orange/indigo/teal palette), `btnOffset` `{ x, y }` state for magnetic movement, and `isHovering` boolean. In `handleMouseMove`, compute distance from `btnZoneRef` center; within 180px radius apply `strength * 0.25` magnetic pull to `setBtnOffset`. On `handleClick`: generate 18 particles with random angle (360/18 * i ± 10°), distance (80–200px), color, size (4–9px), duration (0.8–1.5s); trigger GSAP `fromTo` on `overlayRef` background color; trigger GSAP timeline on `btnRef` (scale 0.92 → elastic.out back to 1); clear particles after 2000ms. Use `useAnimationControls` (`pulseControls`) for background glow pulse cycle on hover. Use `useInView` on `sectionRef`. Apply `LandingCTA.css` (4804 chars).

As a frontend developer, implement the `Footer` section with newsletter subscription and animated link columns. Manage `email` and `subscribed` state; `handleSubscribe` sets `subscribed: true` and clears `email` on non-empty submission. Use `useInView` on `footerRef` with `once: true, margin: '-60px'` to trigger `columnVariants` (hidden: opacity 0, y: 30; visible with `i * 0.12` stagger, 0.5s duration) and `linkVariants` (hidden: opacity 0, x: -10; visible with `i * 0.05` stagger). Render 4 link columns from `linkColumns` array (Product, Company, Resources, Legal) with hrefs to `/Products`, `/Cart`, `/Checkout`, `/Wishlist`, `/Analytics`, `/AdminDashboard`, `/ProductManager`, `/OrderManager`, `/UserManager`, etc. Render social icons (`FiTwitter`, `FiGithub`, `FiInstagram`, `FiLinkedin` from `react-icons/fi`) and `FiSend` for newsletter submit. Render parallax `ftr-deco-bg` (0.2x) and `ftr-deco-mid` (0.4x) layers. Apply `Footer.css` (6306 chars). Note: this component may be reused across multiple pages.

As a frontend developer, implement the LoginHero section for the Login page. This is a static presentational section using a `.lh-root` wrapper containing: a decorative `.lh-glow` div (aria-hidden), a `.lh-content` block with an `.lh-accent-line` (including an `.lh-accent-dot` span and 'rapid-store' text), an `<h1>` with class `lh-headline` featuring a gradient-styled `<span className='lh-headline-gradient'>` around the word 'back', a `.lh-subheadline` paragraph, and a decorative `.lh-rule` divider. No state or interactivity — purely layout and CSS-driven visuals including glow effects and gradient text defined in LoginHero.css (3131 chars). Depends on Landing Navbar task to establish page-chain dependency.

As a frontend developer, implement the SignupHero section for the Signup page. Build the `SignupHero` component featuring a `KineticHeadline` sub-component that splits the 'Join Our Community' headline string into individual `<span>` characters via `useMemo`, each receiving a staggered `animationDelay` (0.5s + index * 0.03s) for a letter-by-letter entrance animation. Include three decorative `sh-glow-circle` divs inside `sh-glow-bg` for layered radial glow effects, three `sh-strip` accent border strips, a `sh-trust-row` badge with a pulsing `sh-trust-dot`, the `SUBHEADLINE` paragraph, an `sh-accent-graphic` icon cluster rendering `Zap`, `ShieldCheck`, `HeartHandshake`, and `Users` from lucide-react with variant classNames (`is-accent`, `is-highlight`, `is-warn`), and a `sh-trust-stats` row with three stat chips (10K+ Active Members, 99.9% Uptime, 24/7 Support) separated by `sh-stat-sep` dividers. Apply all styles from SignupHero.css.

As a frontend developer, implement the ProductsHero section for the Products page. This section uses an IntersectionObserver (threshold 0.15) via useRef/useEffect to trigger a `visible` state that applies `is-visible` reveal classes to staggered elements. The JSX renders decorative layers (prh-glow-top, prh-glow-right, prh-orb--left, prh-orb--right) as aria-hidden divs, a badge with an animated dot ('Browse & Discover'), an h1 with a `.prh-title-accent` span ('Shop Our Catalog'), and a subtitle paragraph. Below the text, render a CATEGORIES row mapping 6 icon+label items (Headphones, Smartphone, Watch, Camera, Gamepad2, Laptop) as links, and a FEATURED_COLLECTIONS row of 3 cards each containing an icon, badge pill ('Hot'/'Best'/'Pick'), label, title, description, and an ArrowRight CTA linking to /ProductDetail. Note: Navbar component may already exist from the Landing page.

As a Backend Developer, implement product REST API endpoints: GET /api/products (list with pagination, filter by category, price range, sort), GET /api/products/:id (product detail with specs, images, reviews), POST /api/products (admin create), PUT /api/products/:id (admin update), DELETE /api/products/:id (admin delete). Support query params: category, minPrice, maxPrice, sortBy, page, perPage. Returns product fields: id, name, sku, category, price, oldPrice, stock, status, images, rating, reviewCount, badge. These endpoints support ProductsGrid, ProductsFilters, ProductTableSection, ProductFormModal, ProductDetailInfo, HomeFeaturedProducts, and related product sections.

As a Backend Developer, implement user management REST API endpoints: GET /api/users (admin list with pagination, filter by role/status/search), GET /api/users/:id, POST /api/users (admin create), PUT /api/users/:id (admin update role/status), DELETE /api/users/:id (admin delete). Also: GET /api/users/me (current user profile), PUT /api/users/me (update profile: name, email, phone, bio, avatar). Supports UserTable, UserManagerHeader, UserManagementPreview, ProfileEditForm, ProfileHeader sections. Note: depends on auth endpoints.

As a Backend Developer, implement authentication middleware and role-based access control (RBAC). JWT verification middleware that extracts and validates bearer tokens on protected routes. Role guard middleware supporting roles: superadmin, admin, editor, viewer, user. Apply auth middleware to all /api/* routes except /api/auth/login and /api/auth/register. Apply admin role guard to /api/users (management), /api/analytics, /api/orders (admin list/update), /api/products (POST/PUT/DELETE). Return 401 for missing/expired token, 403 for insufficient role. Include refresh token rotation logic.

As a Frontend Developer, set up a centralized HTTP API client (e.g., Axios instance or fetch wrapper) with: base URL from environment variable (VITE_API_BASE_URL), request interceptor to attach Authorization: Bearer <token> header from authStore, response interceptor to handle 401 (trigger token refresh or redirect to /Login), 403 (redirect to unauthorized page), and generic error toast via uiStore. Export typed API service modules: authService, productsService, ordersService, usersService, cartService, wishlistService, reviewsService, analyticsService, addressesService, checkoutService, newsletterService. All frontend section components that need live data should import from these service modules instead of using inline static data.

As a Frontend Developer, configure client-side routing for all 16 pages using React Router v6. Define routes: /, /Landing, /Login, /Signup, /Home, /Products, /ProductDetail/:id, /Cart, /Checkout, /OrderConfirm, /Profile, /Wishlist, /AdminDashboard, /ProductManager, /OrderManager, /UserManager, /Analytics. Implement ProtectedRoute wrapper component that checks authStore.isAuthenticated and redirects to /Login if not. Implement AdminRoute wrapper that additionally checks user role (admin/superadmin) and redirects to /Home if unauthorized. Apply ProtectedRoute to: /Home, /Cart, /Checkout, /OrderConfirm, /Profile, /Wishlist. Apply AdminRoute to: /AdminDashboard, /ProductManager, /OrderManager, /UserManager, /Analytics.

As a Backend Developer, create seed scripts to populate the development database with realistic demo data: 20+ products across Electronics/Apparel/Footwear/Accessories/Home/Fitness categories matching the product names referenced in frontend static arrays (Aurora Wireless Headphones, Summit Trail Running Shoes, etc.), 10 demo users with varied roles (admin, editor, viewer, user) and statuses, 50+ sample orders in various statuses (processing/shipped/delivered/cancelled), product reviews, wishlist and cart items for demo user accounts. Seed data should match the static ORDERS/USERS/PRODUCTS constants used in frontend components to ensure seamless integration.

As a frontend developer, implement the LoginCard section for the Login page. This is the core authentication form component using multiple `useState` hooks: `email`, `password`, `rememberMe`, `showPassword`, `loading`, `error`, and `fieldErrors` (object with `email` and `password` keys). Implements a `validate()` function with regex-based email validation (`/^[^\s@]+@[^\s@]+\.[^\s@]+$/`) and minimum password length check (6 chars), setting per-field errors via `setFieldErrors`. The `handleSubmit` async handler calls `e.preventDefault()`, runs validation, sets `loading` to true, simulates a 1200ms auth delay via `Promise`/`setTimeout`, then throws a simulated error ('Invalid email or password. Please try again.'). The JSX renders: a global `role='alert'` error banner with an inline SVG warning icon; an email `<input>` with icon, `id='lc-email'`, conditional `lc-input-error` class; a password field with show/hide toggle (`showPassword` state) via eye icon SVG; a remember-me checkbox row; a submit button that shows a loading spinner when `loading` is true; and a forgot-password link. Styles from LoginCard.css (5133 chars).

As a frontend developer, implement the LoginSocial section for the Login page. This stateless component renders three social OAuth provider buttons defined via a `socialProviders` array containing objects with `key`, `label`, `btnClass`, and `icon` fields. Three custom SVG icon components are defined inline: `GoogleIcon` (multi-path SVG with four colored paths for G-logo: `#4285F4`, `#34A853`, `#FBBC05`, `#EA4335` with individual class names `ls-icon-google-g/r/b/y`), `GitHubIcon` (single filled SVG path), and `AppleIcon` (single filled SVG path). The `LoginSocial` component renders a `.ls-root > .ls-inner` wrapper with an `ls-divider` separator and maps over `socialProviders` to render styled buttons with provider-specific `btnClass` modifiers. Styles from LoginSocial.css (2172 chars).

As a frontend developer, implement the LoginFooterLinks section for the Login page. This is a purely static, stateless presentational component with a `.lfl-root` wrapper containing two rows: (1) `.lfl-signup-row` with a `.lfl-signup-text` paragraph ('Don't have an account?') and an `<a href='/Signup'>` anchor with class `lfl-signup-link` ('Sign up for free'); (2) `.lfl-policy-row` with two `<a>` tags linking to `/PrivacyPage` and `/TermsPage` (both with class `lfl-policy-link`) separated by an aria-hidden `.lfl-policy-sep` span ('·'). Styles from LoginFooterLinks.css (2143 chars). No state, no interactivity.

As a frontend developer, implement the SignupFormContainer section for the Signup page. Build a complex registration form component managing state with `useState` for `name`, `email`, `password`, `confirmPassword`, `termsAccepted`, `showPassword`, `showConfirm`, `submitting`, `shakeCard`, and `successPulse`. Use `useRef` for `cardRef`, `submitAttempted`, and a `touched` object tracking blur state per field. Implement `useMemo`-derived validation: `nameError` (required, min 2 chars), `emailError` (required, regex format), `passwordError` (required, min 8 chars), `confirmError` (must match password), and `termsError` (must be accepted on submit). Compute `passwordStrength` via `useMemo` scoring length ≥8, uppercase, digit, and special character presence (levels 0–4, labels: Weak/Fair/Good/Strong). Render password/confirm toggle visibility buttons using `Eye`/`EyeOff` from lucide-react. On submit, trigger `shakeCard` animation on validation failure and `successPulse` on success; use `setSubmitting` to show a `Loader2` spinner during async submission. Display `CheckCircle` and `AlertCircle` icons for field-level validation feedback. Include a terms checkbox linking to Terms of Service and Privacy Policy. Apply all styles from SignupFormContainer.css.

As a frontend developer, implement the SignupBenefits section for the Signup page. Build the `SignupBenefits` component with three benefit cards defined in the `BENEFITS` array (Instant Support Access with `Headphones`, Secure Account with `ShieldCheck`, Order Tracking with `Truck` from lucide-react). Implement scroll-reveal animations using `IntersectionObserver` with a 0.2 threshold and `-40px` rootMargin bottom; track visible card IDs in `visibleIds` state (a `Set`) and add `is-visible` class when each card enters the viewport, using `cardRefs` array assigned via ref callbacks and `data-benefit-id` attributes. Implement mouse-tracking glow via `handleMouseMove` that computes cursor position relative to the card and sets `--mouse-x`/`--mouse-y` CSS custom properties, reset to 50% on `handleMouseLeave`. Render section header with `sb-label`, `sb-title` with `sb-title-accent` span, and `sb-subtitle`. Apply all styles from SignupBenefits.css.

As a frontend developer, implement the SignupSecurity section for the Signup page. Build the `SignupSecurity` component with a cursor-reactive encryption badge: attach `onMouseMove` and `onMouseLeave` handlers to a `badgeRef` div that compute cursor position as a percentage relative to the badge's bounding rect and store it in `mousePos` state (`{ mx, my }`), passed as `--mx`/`--my` CSS custom properties to drive a radial glow effect. The badge displays a `Shield` icon (size 26, strokeWidth 2), an `ssc-lock-line` decorative element, and two text spans ('End-to-End Encrypted' label and 'Your data is protected with AES-256 + TLS 1.3' sub). Render three `securityMeasures` cards inline-defined in the component: AES-256 Encryption (`Lock`, `is-encrypt`), GDPR Compliant (`Globe`, `is-gdpr`), and 24/7 Monitoring (`Eye`, `is-monitor`). Include an `ssc-content` description block with a paragraph referencing Nimbus Commerce's military-grade encryption, and an `ExternalLink` icon from lucide-react. Include a decorative `ssc-glow` div. Apply all styles from SignupSecurity.css.

As a frontend developer, implement the SignupFAQ section for the Signup page. Build the `SignupFAQ` component with an accordion pattern using four `FAQ_ITEMS` (Why create an account, Is my data secure, Can I change email, Is signup free). Manage `openId` state at the parent level and pass `isOpen` and `onToggle` to each `FaqItem` sub-component. In `FaqItem`, use `contentRef` to measure the answer div's `scrollHeight` and store it in `contentHeight` state via a `measureContent` `useCallback`; apply `maxHeight: isOpen ? contentHeight : 0` inline style for smooth CSS height transition. Re-measure on `window resize` via a `useEffect` listener. Render a `<button>` toggle with `aria-expanded` and `aria-controls` attributes using a `Plus` icon (size 16, strokeWidth 2.5) that rotates when open. Include an `ArrowRight` icon from lucide-react for the 'Ask a different question' CTA link. Apply `is-open` class to open items. Apply all styles from SignupFAQ.css.

As a frontend developer, implement the SignupCTA section for the Signup page. Build the `SignupCTA` component with a full-section mouse-follow gradient: attach `mousemove` and `mouseleave` event listeners via `useEffect` on `rootRef`, computing normalized cursor position (0–1) and storing in `mouse` state; pass as `--mx`/`--my` CSS custom properties to the section root to drive a `scta-glow` radial gradient. Implement a magnetic button effect on `btnRef`: in `handleMouseMove`, compute cursor offset relative to the button's bounding rect (`bx`, `by`), calculate distance, and if within `maxDist` (1.2), set `haptic` state with `x: bx*14, y: by*14, active: true`; apply as `translateX`/`translateY` inline transform with `0.12s ease-out` transition when active and `0.35s cubic-bezier(0.25, 0.1, 0.25, 1)` on release. Render two `scta-orbit` rings each containing a `scta-orbit-dot` for animated orbital accents. The CTA headline reads 'Start selling in minutes.' with an `<em>` 'Free forever to get started.' subline. The `scta-btn` anchor links to `/Signup` with a `scta-btn-arrow` '→' span. Apply all styles from SignupCTA.css.

As a frontend developer, implement the ProductsFilters section for the Products page. This section manages complex filter state with useState hooks: `search`, `sortBy` (default 'newest'), `sortOpen`, `panelOpen`, `activeCategories` (array), and `priceRange` ([0, 2000]). A useEffect closes the sort dropdown on outside click via `sortRef`. The top row includes a search input with a Search icon and X clear button, a custom sort dropdown (SlidersHorizontal icon toggle) showing SORT_OPTIONS ('newest', 'price_asc', 'price_desc', 'rating') with Check icons, and a mobile filter panel toggle with a filterCount badge. An expandable panel reveals 6 CATEGORIES as toggle chips (toggleCategory/removeCategory callbacks) and a dual-handle price range slider formatted with `formatPrice`. Active filter tags render below the top row with X remove buttons, and a 'Clear all filters' button appears when `hasActiveFilters` is true.

As a frontend developer, implement the ProductsRelated section for the Products page. This section renders a horizontally scrollable carousel of 8 RELATED_PRODUCTS using `trackRef` and `viewportRef`. State includes `scrollPos`, `maxScroll`, `canScrollLeft`/`canScrollRight`, `isDragging`, `dragStartX`, `dragScrollStart`, `wishlisted` map, and `activeDot`. The `updateScrollState` callback (via useCallback) syncs scroll state; drag-to-scroll is implemented via mouse down/move/up handlers. Each product card displays a gradient-background icon area (using the product's `gradient` CSS value and Lucide icon component), badge pills ('trending'/'sale'/'new'), Heart wishlist toggle, Star rating, name, category, price with optional `originalPrice` strikethrough, and an ArrowRight link to /ProductDetail. ChevronLeft/ChevronRight nav buttons and dot indicators for active scroll position are included.

As a frontend developer, implement the ProductsFAQ section for the Products page. This section uses Framer Motion's `motion` and `AnimatePresence` for accordion animations. A useState `activeId` tracks the open item. The FAQ_ITEMS array contains 3 entries (track-order with Package icon → /OrderManager, return-policy with RefreshCw icon → /Profile, international with Globe icon → /Products). The `AccordionItem` sub-component renders: an icon wrap, question text, and a `motion.span` ChevronDown that rotates 180° on open (duration 0.35s, cubic-ease). The answer wrapper uses AnimatePresence with `initial={false}` and animates `height: 0 → 'auto'` and `opacity: 0 → 1` on mount. Each item also includes an actionLabel/actionHref CTA link with ArrowRight icon. A section header uses HelpCircle icon and a 'Still have questions?' MessageCircle CTA.

As a frontend developer, implement the ProductsCTA section for the Products page. This section uses Framer Motion's `useInView` (with `sectionRef` and varying margins -80px/-120px/-160px) to trigger staggered entrance animations for title, subtitle, and form. The `ScrambleChar` sub-component scrambles random chars from `SCRAMBLE_POOL` ('!@#$%&*?ABCDE...') on a per-character `startDelay` using setInterval (45ms tick, 6–10 maxTicks) before resolving to the real char with a `pcta-pop-in` CSS animation. TITLE_WORDS array maps 'Subscribe', '&', 'Save', '10%' with `accentIndices` for highlighted chars. State includes `email`, `emailError`, `submitted` (shows PartyPopper success state), and `copied` (clipboard copy of PROMO_CODE 'SAVE10-NOW' with Copy→Check icon transition). The form validates email with regex via `validateEmail` useCallback and handles clipboard via `navigator.clipboard.writeText` with a textarea fallback.

As a frontend developer, implement the HomeHero section for the Home page. This section features a character-by-character animated headline ('Discover Your Vibe') using HEADLINE_SPANS with containerVariants and charVariants (stagger 0.04s, blur+y animation via framer-motion). Includes mouse-tracking magnetic CTA buttons ('Shop Now' with ShoppingBag icon, 'Browse All' with secondary styling) using useMotionValue, useSpring, useTransform hooks with ctaPrimaryBounds/ctaSecondaryBounds refs for 0.22x magnetic pull. Renders FLOATING_TAGS ('Trending Now', 'Fast Shipping') as floating cards with positional CSS classes hh-float-card-top and hh-float-card-bottom. Uses isInView state with sectionRef IntersectionObserver to trigger entrance animations. Imports from '../styles/HomeHero.css'. Icons: ShoppingBag, Sparkles, TrendingUp, Zap from lucide-react.

As a frontend developer, implement the AdminSidebar section for the AdminDashboard page. Build the Sidebar component from Sidebar.css with a collapsible mobile drawer using useState(false) for open/closed state. Render a sb-root container with a sb-mobile-toggle button that toggles between Menu and X icons (lucide-react, size 22). Implement sb-backdrop overlay that closes the sidebar on click via closeMenu(). The sb-panel aside animates open/closed via sb-open class. Include sb-brand block with LayoutDashboard icon, 'Aurora Admin' title, and 'Console' subtitle. Render navItems array (Dashboard /AdminDashboard, Products /ProductManager, Orders /OrderManager with badge '8', Users /UserManager, Analytics /Analytics) as sb-link anchors with lucide icons (size 19), active state detection via window.location.pathname comparison, and sb-link-badge for Orders. Include sb-footer with sb-user link to /Profile showing sb-avatar 'AR', name 'Alex Rivera', and role 'Administrator'. Note: this Sidebar component may already exist from other admin pages.

As a frontend developer, implement the ProductDetailBreadcrumb section for the ProductDetail page. Render a responsive breadcrumb navigation using a static `breadcrumbPath` array with four entries: Home → Products → Electronics → Wireless Headphones Pro X. On tablet and above, render a `<nav aria-label='Breadcrumb'>` with an `<ol className='pdb-list'>` that maps each crumb to a `<li className='pdb-item'>`: non-last items render an `<a className='pdb-link'>` followed by a chevron SVG separator (`<span className='pdb-sep'>`); the last item renders a `<span className='pdb-current'>`. On mobile, show a collapsed `<div className='pdb-mobile-back'>` with a left-chevron SVG back button (`pdb-mobile-back-btn`) linking to `/Products` and a `<span className='pdb-mobile-current'>` showing the product name. Apply all styles from `ProductDetailBreadcrumb.css` including responsive breakpoint toggling between the full list and the mobile back pattern.

As a Backend Developer, implement order REST API endpoints: GET /api/orders (admin list with pagination, filter by status/customer/date/payment), GET /api/orders/:id (order detail with line items, timeline, shipping/billing), POST /api/orders (create order from cart), PUT /api/orders/:id/status (admin update status), DELETE /api/orders/:id (admin cancel). Also: GET /api/orders/user/:userId (user order history for Profile page). Returns fields: id, customer, date, amount, status, payment, lineItems, shippingAddress, billingAddress, timeline, notes. Supports OrderTableContainer, OrderDetailModal, OrderHistory, RecentOrdersPanel, OrderConfirm sections.

As a Backend Developer, implement cart REST API endpoints: GET /api/cart (get current user cart), POST /api/cart/items (add item), PUT /api/cart/items/:itemId (update quantity), DELETE /api/cart/items/:itemId (remove item), DELETE /api/cart (clear cart), POST /api/cart/promo (apply promo code, validate against PROMO_CODE logic). Returns cart with items array (id, productId, name, variant, sku, price, quantity, img), subtotal, tax, discount, shipping, total. Supports CartItems, CartSummary, CheckoutSummary sections.

As a Backend Developer, implement wishlist REST API endpoints: GET /api/wishlist (current user wishlist with product details), POST /api/wishlist/items (add product to wishlist), DELETE /api/wishlist/items/:productId (remove item), POST /api/wishlist/cart (move selected items to cart). Returns items with id, name, price, oldPrice, rating, reviews, image, inStock fields. Supports WishlistGrid, WishlistActions, WishlistFilters, WishlistSection (Profile) sections.

As a Backend Developer, implement product review REST API endpoints: GET /api/products/:id/reviews (paginated reviews list with filter by star rating, sort by helpful/date), POST /api/products/:id/reviews (submit review: rating, text, verified purchase check), POST /api/reviews/:reviewId/helpful (toggle helpful vote). Returns review fields: id, name, initials, rating, date, text, helpful, verified. Supports ProductDetailReviews section.

As a Backend Developer, implement user address book REST API endpoints: GET /api/users/me/addresses (list addresses), POST /api/users/me/addresses (add address: label, type, street, city, state, zip, country, phone), PUT /api/users/me/addresses/:id (update address), DELETE /api/users/me/addresses/:id (delete address), PUT /api/users/me/addresses/:id/default (set as default). Returns address fields: id, label, type (Home/Work/Other), street, city, state, zip, country, phone, isDefault. Supports AddressBook section in Profile page.

As a Backend Developer, implement account security REST API endpoints: PUT /api/users/me/password (change password: currentPw, newPw, confirmPw with strength validation), POST /api/users/me/2fa/enable, POST /api/users/me/2fa/disable, GET /api/users/me/sessions (login history: ip, timestamp, device, isCurrent), DELETE /api/users/me/sessions/:id (revoke session), DELETE /api/users/me/sessions (sign out all). Supports AccountSecuritySection in Profile page.

As a frontend developer, implement the ProductsGrid section for the Products page. This section renders a 12-product grid using a PRODUCTS array with ids p1–p12, each containing name, price, oldPrice (nullable), rating, reviews count, Unsplash image URL, and badge ('sale'/'new'/null). Each product card uses useState-tracked `wishlisted` (Heart icon toggle) and `addedToCart` state (ShoppingCart → Check icon transition). Cards display badge pills conditionally, a hover-reveal overlay with the cart button, star rating with Star icons and numeric review count, product name, price (with strikethrough oldPrice when present), and a wishlist Heart button. The `useCallback` pattern is used for add-to-cart and wishlist handlers.

As a frontend developer, implement the WelcomeBanner section for the AdminDashboard page. Build the WelcomeBanner component from WelcomeBanner.css with a wb-root section containing a decorative wb-bg div and wb-glow radial gradient element. Render wb-inner with two columns: wb-text-block (greeting with 👋 wave emoji span, h1 with 'Welcome back,' and wb-heading-name span 'Admin') and wb-actions. Render STATUS_ITEMS array (Pending Orders count=3 with wb-dot-order, New Signups count=2 with wb-dot-user) as wb-status-pill anchor links using ShoppingBag and UserCheck icons (lucide-react, size 15) navigating to /OrderManager and /UserManager. Render QUICK_ACTIONS array (View Orders primary → /OrderManager with Package icon, Review Users secondary → /UserManager with Users icon) as wb-btn anchors with wb-btn-primary/wb-btn-secondary variants, each showing icons at size 18.

As a frontend developer, implement the StatsCards section for the AdminDashboard page. Build the StatsCards component from StatsCards.css rendering a sc-root section (aria-label='Key metrics') with sc-inner grid. Map the STATS array (revenue '$284,592' sc-card--revenue with DollarSign icon, orders '1,847' sc-card--orders with Package icon, users '38,412' sc-card--users with Users icon, conversion '3.24%' sc-card--conversion with TrendingUp icon) into sc-card divs. Each card includes sc-card-top (sc-card-icon with icon size 18, sc-card-label), sc-card-value, and TrendIndicator sub-component. TrendIndicator renders either sc-trend-up (ArrowUp size 14) or sc-trend-down (ArrowDown size 14) div with trend percentage and sc-trend-label. All icons from lucide-react.

As a frontend developer, implement the QuickActionsBar section for the AdminDashboard page. Build the QuickActionsBar component from QuickActionsBar.css using useState for moreOpen and mobileOpen, and useRef(null) on wrapRef for outside-click detection via useEffect mousedown listener that calls document.addEventListener/removeEventListener. Render qab-root with qab-inner containing qab-label 'Quick Actions'. Desktop: render PRIMARY_ACTIONS (Add Product → /ProductManager PlusCircle, Create Order → /OrderManager FileText, Add User → /UserManager UserPlus, Run Report → /Analytics BarChart3, all icon size 16) as qab-btn anchor links. Render qab-secondary with qab-more-btn button (MoreHorizontal + 'More' text + ChevronDown with is-open class when moreOpen). When moreOpen, render qab-dropdown with SECONDARY_ACTIONS (Export Data Download, Generate Invoice FileSpreadsheet, Send Notification Bell) as qab-drop-item buttons that close the dropdown on click. Implement mobile toggle pattern with mobileOpen state. All icons from lucide-react.

As a frontend developer, implement the RecentOrdersPanel section for the AdminDashboard page. Build the RecentOrdersPanel component from RecentOrdersPanel.css using useState for search and page (0-indexed), and useMemo for filtered orders (search across id, customer, status), pages count, and visibleOrders slice (PAGE_SIZE=5). Render ORDERS array of 10 orders (ORD-4821 through ORD-4812) with fields: id, customer, initials, amount, status ('processing'/'shipped'/'pending'), date. Implement StatusBadge sub-component rendering rop-badge rop-badge-{status} span with rop-badge-dot and capitalized label. Include search input with Search icon (lucide-react) and pagination controls using ChevronLeft/ChevronRight (size varies) with page number buttons. Implement handleRowClick navigating via window.location.href to /OrderManager?order={orderId}. Show ShoppingBag/PackageOpen empty-state when no results. Pagination renders pageNumbers array from useMemo.

As a frontend developer, implement the ActivityFeedPanel section for the AdminDashboard page. Build the ActivityFeedPanel component from ActivityFeedPanel.css. Render ACTIVITIES array (10 items: act-1 through act-10) each with actor initials (AK, DR, SYS, TJ), actorType ('product'/'order'/'system'/'user'), badge/badgeLabel, JSX description with strong and af-highlight spans, and relative time string. Activity types include: product creation (Aurora Headphones), order shipping (#4821 to Mara Quinn), system backup completion, admin privilege grant, pricing update (AeroLite Sneakers), order refund (#4819 Liam Cho), inventory sync (2,840 SKUs), account deactivation (Parker Lind), image upload (Mirage Bottle), and one more order event. Include Activity icon and ArrowRight icon from lucide-react in panel header. Render feed as a scrollable list with actor avatar badges color-coded by actorType.

As a frontend developer, implement the AnalyticsCharts section for the AdminDashboard page. Build the AnalyticsCharts component from AnalyticsCharts.css using chart.js and react-chartjs-2. Register ChartJS modules: CategoryScale, LinearScale, PointElement, LineElement, BarElement, ArcElement, Title, Tooltip, Legend, Filler. Render Line, Bar, and Pie chart components with tab switcher using useState for active chart type (TrendingUp, BarChart3, PieChart lucide icons). Implement seededRandom(seed) deterministic RNG for buildSalesSeries (weekly/daily toggle, 12 week or 30 day labels, revenue values) and buildCustomerSeries (weekly/daily, customer counts). CATEGORIES Pie data: Electronics 34% #6366f1, Apparel 26% #14b8a6, Home & Garden 18% #f97316, Sports 12% #fbbf24, Books 10% #818cf8. Implement fmtRevenue (M/k formatting) and fmtNumber helpers. Include custom ChartTooltip sub-component (visible, x, y, label, value, delta, deltaLabel props) with anch-tooltip positioning via inline style transform. Use useCallback for event handlers.

As a frontend developer, implement the UserManagementPreview section for the AdminDashboard page. Build the UserManagementPreview component from UserManagementPreview.css using framer-motion (motion, AnimatePresence) and lucide-react (Search, X, Edit3, Trash2, Mail, Calendar, AlertTriangle, Users, Plus, ArrowLeft, ArrowRight). Manage useState for search, page (1-indexed), and deleteTarget (null or user object). useMemo filters USERS array (10 users: USR-2841 Avery Kane Active through USR-1558 Fiona Archer Active) by name/email/id match. Compute totalPages = ceil(filtered.length / PAGE_SIZE=5), safePage, and pageUsers slice. Render animated table rows using rowVariants ({hidden: opacity 0 x -12, visible: opacity 1 x 0, exit: opacity 0 x 12}) and card layout using cardVariants ({hidden: opacity 0 y 16, visible: opacity 1 y 0, exit: opacity 0 y -8}) wrapped in AnimatePresence. Include getInitials() helper splitting name on space. Implement search input with clear X button (handleClearSearch), pagination (handlePageChange with ArrowLeft/ArrowRight), Edit3 edit button, Trash2 delete trigger (confirmDelete sets deleteTarget), and delete confirmation modal (AlertTriangle icon) with executeDelete/cancelDelete handlers.

As a frontend developer, implement the ProductDetailGallery section for the ProductDetail page. Manage a `productImages` array of 5 Unsplash images with ids, src, alt, and label fields. Use `useState` for `activeIndex`, `switching` (fade transition flag), `zoomPos` ({x, y}), `isZooming`, `glowPos` ({x, y}), and `showHint`. Use `useRef` for `mainRef` (main image container) and `hintTimer`. Implement `handleThumbClick` with a 180ms `switching` transition that sets the new `activeIndex`. Implement `handleMouseMove` using `getBoundingClientRect()` on `mainRef` to compute clamped percentage-based cursor position, updating `zoomPos`, `glowPos`, and `isZooming`; also clear the `showHint` flag after 2000ms via `hintTimer`. Implement `handleMouseLeave` to clear `isZooming` and `handleMouseEnter` to manage hint timer. Pass `--glow-x` and `--glow-y` as CSS custom properties on the main container. Apply all styles from `ProductDetailGallery.css` including the zoom overlay and thumbnail switching animations.

As a frontend developer, implement the ProductDetailInfo section for the ProductDetail page. Define static `SIZE_OPTIONS` (['S','M','L','XL','2XL']), `COLOR_OPTIONS` (4 objects with label and hex), and `HIGHLIGHT_TAGS` (['Free Shipping','30-Day Returns','1-Year Warranty','In Stock']). Use `useState` for `selectedSize` (default 'M'), `selectedColor` (default first color option), `quantity` (default 1), and `inWishlist` (default false). Render: a rating badge row (`pdi-badge-row`) with a pulsing star badge (`pdi-pulse-highlight`), review count, and sold count with staggered fade-up animations (`pdi-anim-fade-up` + delay classes). Render the product name `<h1 className='pdi-name'>` and a price block showing current price ($129.99), original ($179.99), and discount badge (−28%). Add a divider and variant selectors: a size selector mapping SIZE_OPTIONS to toggle buttons (`pdi-option--active` on selected), and a color swatch selector mapping COLOR_OPTIONS with hex-based swatch buttons. Implement `decrementQty` (min 1) and `incrementQty` (max 20) handlers for a quantity stepper. Include an Add-to-Cart CTA and a wishlist toggle button updating `inWishlist`. Apply all animations and styles from `ProductDetailInfo.css`.

As a frontend developer, implement the ProductDetailSpecs section for the ProductDetail page. Define a static `SPEC_GROUPS` array with 5 groups (materials, dimensions, care, features, warranty), each containing an `id`, `label`, and `rows` array of `{name, value}` objects (e.g., 20 total rows covering full-grain leather specs, weight/dimensions, care instructions, IPX4 weather rating, OEKO-TEX certification, and Goodyear welt warranty). Use `useState` for `openGroups` (a `Set`, default containing 'materials') and `revealed` (boolean). Use `useRef` for `sectionRef`. Implement `toggleGroup` with `useCallback` that adds/removes group IDs from the `openGroups` Set using immutable set operations. Wire a `useEffect` with an IntersectionObserver on `sectionRef` to set `revealed = true` on scroll-into-view. Render each group as an accordion panel with a `<ChevronDown>` icon (from lucide-react) that rotates when open, and a collapsible table of spec rows. Apply reveal animations and accordion transitions from `ProductDetailSpecs.css`.

As a frontend developer, implement the ProductDetailReviews section for the ProductDetail page. Define inline SVG icon components: `StarIcon`, `ThumbsUpIcon`, `ChevronLeftIcon`, `ChevronRightIcon`, `CheckIcon`, and `MessageSquareIcon`. Define a static `reviewsData` array with at least 4 review objects (id, name, initials, rating 3–5, date, text, helpful count, verified boolean) — including entries for Marcus Chen (5★, 42 helpful), Sarah Mitchell (4★, 28 helpful), Jordan Park (5★, 35 helpful), and Emily Rodriguez (3★). Use `useState` for pagination/active page, helpful-clicked tracking, and filter state. Use `useRef` for scroll anchoring. Implement `useCallback` handlers for pagination navigation (ChevronLeft/Right buttons), helpful vote toggling, and star filter selection. Render a ratings summary block and a paginated list of review cards, each showing: avatar initials, name, verified badge (`CheckIcon`), star rating, date, review text, and a helpful counter button (`ThumbsUpIcon`). Include a `MessageSquareIcon` CTA for writing a review. Apply all styles and entrance animations from `ProductDetailReviews.css`.

As a frontend developer, implement the ProductDetailRelated section for the ProductDetail page. Define a `relatedProducts` array of 6 product objects (id, name, category, image URL, rating, reviewCount, price, oldPrice, badge) covering: Wireless Pro Headphones (BESTSELLER), Ultra-Slim Laptop Stand, Mechanical RGB Keyboard (SALE), Ergonomic Mouse Pro, 4K Webcam with Ring Light (NEW), and USB-C Hub 7-in-1. Implement the `StarRating` sub-component that renders 5 SVG star icons, differentiating filled, partial (fractional), and empty stars using `Math.floor`/`Math.ceil`. Use `useState` for `addedItems` (a `Set` tracking cart-added product IDs), `activeDot` (carousel dot index), `canScrollLeft` (false initially), and `canScrollRight` (true initially). Use `useRef` for `carouselRef`. Implement `updateScrollState` with `useCallback` to update `canScrollLeft`/`canScrollRight` and `activeDot` based on carousel scroll position. Wire scroll/resize listeners via `useEffect`. Implement left/right scroll button handlers. Each product card renders: image, badge overlay (BESTSELLER/SALE/NEW), category label, name, `StarRating`, review count, price with optional strikethrough old price, and an Add-to-Cart button that toggles the item in `addedItems`. Apply all carousel scroll behavior and styles from `ProductDetailRelated.css`.

As a frontend developer, implement the CartBreadcrumb section for the Cart page. Build a multi-step progress indicator using the STEPS array with keys 'cart', 'checkout', 'confirmation' and icons ShoppingCart, CreditCard, CheckCircle from lucide-react. Implement useState(false) for visibility and useRef for rootRef. Wire up IntersectionObserver with threshold 0.3 that sets visible=true once and unobserves. Render cb-root > cb-inner with mapped cb-step elements applying is-completed, is-current, is-future CSS classes based on currentIdx. Render cb-circle with conditional CheckCircle for completed steps or the step's own icon sized 20 (current) or 18 (future). Render cb-connector elements between steps with is-filled and is-partial classes; apply cb-fill-forward 1.2s cubic-bezier animation on the cb-connector-fill div when isCurrent && visible. Future step links use pointerEvents none and preventDefault. Apply aria-current='step' and aria-label with completion status for accessibility. Note: CartBreadcrumb component may already exist from a previous page — reuse if available.

As a frontend developer, implement the ProfileBreadcrumb section for the Profile page. Render a horizontal breadcrumb trail using a static BREADCRUMB_CRUMBS array with three entries: Home (href='/Home', Home icon), My Account (href='/Profile', no icon), and Profile Settings (current, User icon, no link). Use React.Fragment to map crumbs, inserting ChevronRight separators (size=14) between items. The current crumb renders as a <span className='pbc-current'> with an icon span, while non-current crumbs render as <a className='pbc-link'> with conditional icon spans using 'pbc-home-icon' for the Home entry and 'pbc-link-icon' for others. Apply ProfileBreadcrumb.css with pbc-root, pbc-inner, pbc-sep, pbc-current, pbc-current-icon, pbc-link, pbc-home-icon, pbc-link-icon class names.

As a frontend developer, implement the WishlistHeader section for the Wishlist page. The section renders a `<header className="wh-root">` with decorative background layers (`wh-bg`, `wh-glow-left`, `wh-glow-right`), a breadcrumb nav using `ChevronRight` from lucide-react linking back to `/Home`, a title row with `<h1 className="wh-title">My Wishlist</h1>` and an accent underline div, and a subtitle row showing a Heart icon (filled with `var(--primary_light)`), a hardcoded `itemCount = 8` badge, and descriptive label text. Includes a `wh-border-accent` decorative bottom border. All decorative elements use `aria-hidden="true"`. Apply WishlistHeader.css for glow/gradient background styling.

As a frontend developer, implement the ProductManagerHeader section for the ProductManager page. This static header component renders a `<header className="pmh-root">` with an ambient `pmh-glow` div, a title block displaying 'Product Manager' (h1.pmh-title) and subtitle text, and an actions row containing: (1) an anchor `pmh-btn-add` with lucide `Plus` icon linking to /ProductManager, (2) a `pmh-btn-bulk` button with lucide `Layers` icon for bulk actions, and (3) a `pmh-count` span with lucide `Package` icon showing a hardcoded count of 156 products with aria-label. Apply ProductManagerHeader.css (4123 chars) for layout, glow effect, and button styles. Note: AdminSidebar may already exist from AdminDashboard page.

As a frontend developer, implement the OrderManagerHeader section for the OrderManager page. The section renders a <header> with class `omh-root` containing an `omh-inner` layout split into `omh-left` and `omh-actions`. The left side includes a title row with a `ClipboardList` lucide icon (size 20) and an `<h1>` with class `omh-title`, plus a subtitle row showing static order count (1,284), an active filter badge with class `omh-badge omh-badge-status`, and a status label — all separated by `omh-sep` spans. The actions area contains two buttons: an Export CSV button with `FileDown` icon (size 16) and an outline Report button with `FileText` icon (size 16). All styling is static via OrderManagerHeader.css (4301 chars). Note: AdminSidebar component may already exist from AdminDashboard page.

As a frontend developer, implement the UserManagerHeader section for the UserManager page. This section renders a sticky/top header using the `umh-root` and `umh-inner` CSS class structure. It includes: (1) a breadcrumb nav (`umh-breadcrumb`) with links to `/AdminDashboard` using `ChevronRight` separators from lucide-react, ending in an `aria-current='page'` span; (2) a title row (`umh-title-row`) with a `Users` icon (22px), an `<h1>` with 'User Manager', and a subtitle paragraph; (3) an actions area (`umh-actions`) containing a `HelpCircle` button that toggles `helpOpen` state via `useState(false)`, rendering a glassmorphic popover (`umh-help-popover`) with `backdropFilter: blur(20px)`, absolute positioning, and help text about filters and adding users; (4) an 'Add User' button with a `UserPlus` icon. The component imports from `lucide-react`: `Users`, `UserPlus`, `HelpCircle`, `ChevronRight`. Note: AdminSidebar from AdminDashboard (task a028fef8-b1ab-4433-8c3b-a05cf06e1e66) must exist first as this page depends on AdminDashboard.

As a frontend developer, implement the AnalyticsSidebar section for the Analytics page. This section renders a collapsible aside navigation using useState for activeSection and collapsed state. It maps over ANALYTICS_SECTIONS (Overview, Revenue, Customers, Products, Orders, Settings) with lucide-react icons (BarChart3, DollarSign, Users, Package, ShoppingCart, Settings, TrendingUp). The sidebar includes an ansb-header with brand logo and ChevronDown collapse toggle button (rotates 90deg via inline transform when collapsed), an ansb-nav that toggles between ansb-collapsed/ansb-expanded classes, nav items with ansb-active class and badge spans, auto-collapse on mobile (window.innerWidth < 768), and an ansb-footer showing data refresh status. Note: AdminSidebar pattern from AdminDashboard may serve as a structural reference.

As a Backend Developer, implement analytics REST API endpoints (admin only): GET /api/analytics/kpis?period= (revenue, orders, avg order value, conversion rate with sparkline data), GET /api/analytics/revenue?period= (revenue by product/category with growth), GET /api/analytics/customers?view= (monthly/weekly new vs returning segments, top customers), GET /api/analytics/orders?period= (orders time series), GET /api/analytics/products (product performance: unitsSold, revenue, rating per product). POST /api/analytics/export (generate export, returns download URL or triggers CSV). Supports AnalyticsKPIs, AnalyticsCharts, AnalyticsRevenue, AnalyticsCustomers, AnalyticsProducts, AnalyticsExport sections.

As a Backend Developer, implement checkout REST API endpoints: POST /api/checkout/validate (validate shipping address and payment details before submission), POST /api/checkout/place-order (create order from cart with shipping, billing, payment method; returns order confirmation with id, confirmationDate, estimatedDelivery, total). Integrates with cart, products (stock decrement), and orders services. Returns order confirmation data consumed by OrderConfirmHero, OrderEstimate, OrderSummary sections. Supports CheckoutFormPanel multi-step form submission.

As a Tech Lead, verify the end-to-end integration between the authentication frontend implementation (LoginCard, SignupFormContainer, ProfileSidebar sign-out) and the Auth API backend. Ensure JWT tokens are stored correctly, Authorization headers are sent on protected API calls, 401 responses redirect to /Login, role-based route guards block unauthorized admin access, and the signup flow correctly creates a user and redirects. Validate across Guest Visitor and Registered User flows.

As a frontend developer, implement the ProductsPagination section for the Products page. This section uses useState for `current` page (default 1), `perPage` (default 12 from PER_PAGE_OPTIONS [12,24,48,96]), and `cursorPos` for a CSS cursor-glow effect tracked via `handleMouseMove`/`handleMouseLeave` on `trayRef`. The `getPageNumbers` utility generates a smart ellipsis page array for up to 7 visible slots. Renders ChevronsLeft/ChevronRight first/last nav buttons and ChevronLeft/ChevronRight prev/next buttons (disabled when `isFirst`/`isLast`). The `.pp-dots` tray renders page number buttons and ellipsis spans; active page gets `is-active` class. A per-page `<select>` resets current to 1 on change. Item range text ('Showing X–Y of 187') is computed from `startItem`/`endItem`. Keyboard navigation via `handleKeyDown` supports Enter/Space.

As a frontend developer, implement the CartItems section for the Cart page. Initialize state with INITIAL_ITEMS array of 4 products (Wireless Headphones, Mechanical Keyboard, USB-C Hub, Desk Mat) each with id, name, variant, sku, price, quantity, img fields. Manage items with useState(INITIAL_ITEMS), toast with useState(null), and toastTimer via useRef. Implement updateQuantity using useCallback to clamp quantity between 1 and 99. Implement removeItem using useCallback to filter item out, set toast state with {id, name}, and auto-clear toast after 5000ms via setTimeout stored in toastTimer.current. Implement undoRemove to restore the removed item from INITIAL_ITEMS if not already present. Use AnimatePresence with mode='popLayout' from framer-motion wrapping motion.div elements for each cart item card with enter/exit animations. Render ci-root > ci-inner with ci-header showing title and dynamic item count. Each ci-card includes product image placeholder, name, variant, SKU, quantity +/- controls with Trash2 and RefreshCw icons, and per-item total price via formatPrice. Render toast notification with undo action using AnimatePresence.

As a frontend developer, implement the CartEmpty section for the Cart page. Build a purely static empty-state display with ce-root containing an ambient glow div (ce-ambient) and four decorative floating dots (ce-dot ce-dot-1 through ce-dot-4) as aria-hidden spans. Inside ce-inner render an icon wrapper (ce-icon-wrap) with two animated rings (ce-icon-ring, ce-icon-ring-2), an icon glow span (ce-icon-glow), and a ShoppingCart icon (size=40, strokeWidth=1.8). Render ce-headline 'Your cart is empty', ce-subtext paragraph, and a ce-cta anchor linking to '/Products' with 'Continue Shopping' text and an ArrowRight icon (size=18, strokeWidth=2). All decorative elements are aria-hidden. No state or hooks required — purely presentational.

As a frontend developer, implement the CartSummary section for the Cart page. Manage shipping state with useState('free') toggling between 'free' and 'express'. Use useRef for rootRef on the cms-root div. Implement handleMouseMove with useCallback to calculate tilt angles: x=(clientX-rect.left)/rect.width-0.5, y=(clientY-rect.top)/rect.height-0.5, then apply perspective(800px) rotateX(y*-3deg) rotateY(x*3deg) transform directly on rootRef.current.style. Implement handleMouseLeave to reset transform. Compute subtotal=189.97, tax=subtotal*0.08, shippingCost=12.99 when express else 0, orderTotal=subtotal+tax+shippingCost. Render cms-root > cms-inner with cms-title 'Order Summary', cms-row elements for Subtotal and Estimated tax (8%), a cms-divider, then a shipping selector with two cms-ship-option buttons for Standard Delivery (5-8 days, Free) and Express Shipping (2-3 days, $12.99) with is-active class on the selected option and cms-ship-radio indicators. Include icons ShoppingCart, ArrowLeft, ShieldCheck, BadgePercent, Lock from lucide-react. Render order total row and a checkout CTA button with Lock icon.

As a frontend developer, implement the RecommendedProducts section for the Cart page. Define RECOMMENDED array of 6 products (Wireless Earbuds Pro, Smart Watch Series 5, USB-C Charging Hub, 14" Laptop Sleeve, Mirrorless Camera Kit, Bluetooth Speaker XL) each with id, name, price, rating, reviews, tag, and a lucide-react icon component. Manage added state with useState({}) keyed by product id, justAdded with useState(null) for 400ms micro-animation, and activeIndex with useState(0). Use useRef for trackRef on the scroll container. Implement handleAdd to set added[id]=true and trigger justAdded timeout. Implement scrollTo(dir) to scroll trackRef.current by (cardWidth+16)*2 = (210+16)*2 pixels left or right using scrollTo with smooth behavior. Implement handleTrackScroll to compute activeIndex via Math.round(scrollLeft/(cardWidth+16)). Implement scrollToIndex for dot navigation. Render rc-root with rc-glow-left and rc-glow-right ambient elements, rc-inner > rc-header with rc-headline (with rc-headline-accent span) and rc-badge 'Frequently bought together'. Render rc-carousel-wrap with left/right rc-arrow buttons (ChevronLeft/ChevronRight), the rc-track scrollable container with product cards each showing icon, tag badge, name, Star rating, reviews count, price, and Add to Cart button with ShoppingCart icon. Render pagination dots below the carousel.

As a frontend developer, implement the CartFAQ section for the Cart page. Define FAQ_ITEMS array with 4 entries (ids: save-cart, return-policy, gift-wrapping, secure-checkout) each with question and answer strings. Manage openId with useState('save-cart') — toggling via toggleItem sets openId to id or null if already open (accordion behavior). Use useRef({}) for itemRefs to hold DOM refs for each FAQ item card. Implement setRef using useCallback returning a ref callback that stores nodes in itemRefs.current[id]. In useEffect, attach mousemove (passive) and mouseleave event listeners to each item ref calling handleMouseMove and handleMouseLeave module-level functions that apply perspective(800px) rotateX(y*-3deg) rotateY(x*3deg) 3D tilt transforms computed from mouse position relative to element bounds. Clean up all listeners on unmount by storing handler references in a handlers object. Render cfq-root (aria-labelledby='cfq-headline') > cfq-inner with cfq-head-block containing cfq-eyebrow 'Support' span and cfq-headline h2 with id. Map FAQ_ITEMS to cfq-item cards with setRef(id), clicking toggleItem(id), showing cfq-question and conditionally rendered cfq-answer with aria-expanded and aria-controls for accessibility.

As a frontend developer, implement the ProfileSidebar section for the Profile page. Manage two state hooks: activeTab (default 'my-profile') and drawerOpen (default false). Render a desktop <aside className='psb-sidebar'> containing a user block (avatar initials 'MJ', avatar ring div, name 'Mara Quinn', email), a nav section with SIDEBAR_NAV items (my-profile, orders with badge=5, wishlist with badge=3, security, addresses) using icons User/ShoppingBag/Heart/Shield/MapPin, active state toggle via handleNavClick, and a Sign Out link (LogOut icon) to /Login. Render a mobile header (psb-mobile-header) with user summary and a Menu/X toggle button (psb-mobile-toggle) that opens a psb-drawer overlay with psb-drawer-backdrop for mobile navigation. Apply ProfileSidebar.css across all psb-* class names.

As a frontend developer, implement the ProfileHeader section for the Profile page. Use useState(false) for 'entered' and useRef for rootRef. Wire an IntersectionObserver (threshold: 0.2) in a useEffect that sets entered=true on first intersection and then unobserves, triggering a CSS animation via the 'entered' class appended to ph-root. Render a <section> with ph-inner containing: an avatar wrap (ph-avatar-ring div, ph-avatar-img div showing initials 'AK', ph-online-dot span), and an info block with h1 ph-name ('Avery Kane'), p ph-email, a ph-meta row with Crown icon badge ('Premium Member') and Calendar icon join date ('Joined March 2024'), a ph-divider, and an Edit Profile anchor (Edit3 icon, href='/Profile'). Apply ProfileHeader.css with all ph-* class names.

As a frontend developer, implement the ProfileTabNav section for the Profile page. Manage activeTab state (default 'profile') and overflow state ({ start: false, end: false }). Use useRef for listRef and useCallback for checkOverflow which reads el.scrollLeft, el.clientWidth, el.scrollWidth to set overflow start/end flags. Wire a useEffect that calls checkOverflow, attaches a passive scroll listener, and connects a ResizeObserver to listRef. Compute dynamic listClass from ptn-list + 'is-scrollable' or 'is-scrolled-end' based on overflow state. Render a <nav aria-label='Profile sections'> with a ptn-inner div and a div[role='tablist'] with TABS (profile, orders, wishlist, security, addresses) rendered as <button role='tab' aria-selected> with ptn-tab-icon and ptn-tab-label spans; active tab uses strokeWidth=2.5 vs 1.8 on the icon. Apply ProfileTabNav.css with ptn-* class names.

As a frontend developer, implement the ProfileEditForm section for the Profile page. Manage state hooks: isOpen (collapsible panel), form (INITIAL_FORM with firstName, lastName, email, phone, bio), errors object, avatar URL (null), showToast boolean, and fileRef for hidden file input. Implement validate() checking firstName/lastName required, email regex, phone regex, bio max 500 chars. handleSubmit triggers validation and on success sets showToast=true with 3s auto-dismiss. handleCancel resets form and errors. handleAvatarClick triggers fileRef.current.click(); handleFileChange uses URL.createObjectURL for avatar preview. Render a pef-toggle <button aria-expanded> with User icon and animated ChevronDown (rotates when isOpen). The collapsible pef-body (is-open class) contains a Camera icon avatar upload button, text fields for firstName/lastName/email/phone (with fieldError helper for 'is-error' class), a bio textarea with character counter, and Save/Cancel action buttons. A CheckCircle toast and X dismiss button appear when showToast is true. Apply ProfileEditForm.css with pef-* class names.

As a frontend developer, implement the AccountSecuritySection for the Profile page. Implement the EncryptionMatrix canvas particle system: use useRef for canvasRef, rafRef, mouseRef ({ x: -1000, y: -1000 }), and dimsRef ({ w, h }). The draw() callback clears the canvas and renders a grid of hex characters (0-9A-Fa-f) where each cell's alpha and hue are computed from mouse distance (radius 60–260, alpha 0.04–0.55, hue 230+dist/5%20). Wire mouse/touch move listeners and a ResizeObserver for canvas sizing; run animation via requestAnimationFrame. Implement passwordStrength(pw) scoring (length ≥8, ≥12, uppercase, lowercase, digit, special → max 5) and strengthLabel(s) returning { text, cls } for 'is-weak'/'is-medium'/'is-strong'. Manage state for showCurrentPw/showNewPw/showConfirmPw (eye toggle), currentPw/newPw/confirmPw fields, 2FA toggle (isTwoFAEnabled), and a loginHistory array (5 LOGIN_HISTORY entries with Monitor/Smartphone icons, ip, timestamp, isCurrent flag). Render password change form with Eye/EyeOff toggles, strength meter bar, and 2FA toggle section. Render login history list with LogOut 'Revoke' buttons and a 'Sign out all' action. Apply AccountSecuritySection.css with relevant class names.

As a frontend developer, implement the OrderHistory section for the Profile page. Manage useState for expandedOrderId (which order's detail panel is open) and any per-order loading states. Render a list of ORDERS (5 entries: RAP-4821 delivered, RAP-4807 shipped, RAP-4792 processing, RAP-4765 delivered, RAP-4731 cancelled) each with a StatusBadge component driven by STATUS_CONFIG mapping statuses to Clock/Truck/CheckCircle2/XCircle icons. Each order card shows order ID, formatted date (Calendar icon), item count, total price, and a ChevronDown toggle. Expanded panels show a tracking stepper (steps array, currentStep highlighted) with carrier/tracking number, estimated delivery text, and a line-item table (name, SKU, qty, price). Cancelled orders show an AlertCircle state; processing orders with no tracking show an estimated delivery note. Include a 'View All Orders' ArrowRight link and a ShoppingBag empty state. Use Loader2 for any async states. Apply OrderHistory.css with all relevant class names.

As a frontend developer, implement the WishlistSection for the Profile page. Manage items state (WISHLIST_ITEMS – 6 entries with id, name, price, originalPrice, inStock flags), sortBy state ('added'/'price-low'/'price-high'/'name'), toast state ({ message, type } or null with 2600ms auto-dismiss), and removingId state for exit animation. Implement handleRemove: sets removingId, waits 280ms, filters item from list, shows 'removed' toast. Implement handleAddToCart: shows 'cart' toast with item name. Compute sortedItems via [...items].sort() based on sortBy. Render wl-head with Heart icon title and item count badge plus a sort <select>. Map sortedItems to cards showing placeholder image area, name, price (with strikethrough originalPrice if present), inStock/out-of-stock badge (AlertCircle), a Trash2 remove button, and a ShoppingCart 'Add to Cart' button (disabled if out-of-stock). Render a wl-empty state (Heart icon, 'Browse Products' ArrowRight link to /Products) when items.length === 0. Apply WishlistSection.css with wl-* class names.

As a frontend developer, implement the AddressBook section for the Profile page. Manage addresses state (INITIAL_ADDRESSES – 3 entries: Home/Work/Family House with street, city, state, zip, country, phone, isDefault), showAddForm boolean, deleteTarget (id or null for confirmation modal), and form state (label, type, street, city, state, zip, country, phone). Implement handleSetDefault(id) which maps addresses setting isDefault=true only for matching id. Implement handleDelete(id) which filters address and clears deleteTarget. Implement handleAddSubmit which creates a new address with Date.now() id, sets isDefault if list is empty, appends to addresses, resets form, and closes showAddForm. Render AddressIcon component switching between Home/Briefcase/MapPinned icons based on type. Render formatAddress helper for single-line display. Render address cards with type icon, label, formatted address, phone (Phone icon), isDefault Star badge, a 'Set as Default' button (CheckCircle), Pencil edit trigger, and Trash2 delete trigger. Render a delete confirmation modal when deleteTarget is set. Render a collapsible add-address form (Plus button in header) with fields for label, type select, street, city, state, zip, country, phone. Apply AddressBook.css with ab-* class names.

As a frontend developer, implement the WishlistFilters section for the Wishlist page. Uses `useState` for `search`, `activeCategory` (default `'all'`), `activeSort` (default `'date-desc'`), `sortOpen`, `drawerOpen`, and `scrolled` state. Uses `useRef` for `sortRef` (click-outside sort dropdown) and `rootRef` (scroll detection). Three `useEffect` hooks: scroll listener that sets `scrolled` when `window.scrollY > rootRef.current.offsetTop`, mousedown click-outside listener that closes sort dropdown, and body overflow lock when `drawerOpen` is true. Renders a search input with `Search` and `X` icons, category filter pills from `CATEGORIES` array (6 items with counts), a sort dropdown button with `ArrowUpDown`/`ChevronDown` icons and `renderSortDropdown()` showing 4 `SORT_OPTIONS`, a mobile filter drawer toggle using `SlidersHorizontal`, a `totalFiltersActive` badge counter, and a `RotateCcw` reset button via `handleClearFilters` useCallback. Apply WishlistFilters.css for sticky/scrolled state, drawer overlay, and dropdown styles.

As a frontend developer, implement the WishlistGrid section for the Wishlist page. Uses `useState` for `items` (initialized from `WISHLIST_ITEMS` array of 6 products with id, name, price, oldPrice, rating, reviews, image, inStock) and `viewMode` (`'grid'` or `'list'` toggle using `LayoutGrid`/`List` icons). Renders animated product cards using `motion.div` from framer-motion with `cardVariants` (hidden/visible/exit states: opacity+y translate on enter with staggered `delay: i * 0.08`, scale+opacity on exit). Uses `AnimatePresence` for card removal animations. Each card shows product image, remove button (`X` icon) that filters item from state, star ratings via `renderStars(rating)` helper (handles full `Star`, `StarHalf`, and empty stars using lucide-react), price with optional `oldPrice` strikethrough, `Eye` quick-view and `ShoppingCart` add-to-cart action buttons, and in-stock indicator. `LayoutGrid`/`List` view mode toggle changes card layout class. Apply WishlistGrid.css for grid/list responsive layouts and card hover states.

As a frontend developer, implement the WishlistEmpty section for the Wishlist page. Renders a `<section className="we-root">` empty-state view with: a `we-glow` ambient background div, six `<span className="we-sparkle">` decorative dot elements (all `aria-hidden`), and a `we-inner` content block containing an animated icon wrapper (`we-icon-wrap`) with two rotating dashed `we-icon-circle` spans and a `Heart` icon (size 36, strokeWidth 1.8) in `we-icon-inner`, an `<h2>` title 'Your wishlist is empty', a subtitle paragraph, and a CTA `<a>` linking to `/Products` labeled 'Browse Products' with an `ArrowRight` icon. Apply WishlistEmpty.css for sparkle keyframe animations, rotating dashed circles on the heart icon, and glow background effect.

As a frontend developer, implement the RelatedProducts section for the Wishlist page. Uses `useState` for per-card `tilt` ({x,y}) and `glow` ({x,y}) mouse-tracking state and `hovered` state inside `ProductCard` component. Uses `useRef` for `cardRef` to get `getBoundingClientRect()` for relative mouse position. `handleMouseMove` useCallback computes `relX`/`relY` from mouse position within card bounds and applies `tiltX = (relY-0.5)*14` / `tiltY = (relX-0.5)*-14` 3D perspective tilt and glow gradient position. Cards use inline `transform: perspective(800px) rotateX() rotateY()` style. Renders 6 products from `PRODUCTS` array (title, category, price, optional oldPrice, badge type from `['trending','new','popular']`) with `badgeIconMap` mapping badge types to `TrendingUp`, `Sparkles`, `Zap` lucide icons. Each `ProductCard` is a `motion.div` with `initial={{ opacity:0, y:24 }}`, `whileInView={{ opacity:1, y:0 }}`, `viewport={{ once:true, margin:"-40px" }}` scroll-triggered entrance. Cards show `Heart` wishlist toggle and `ShoppingBag` add button with `onAdd` callback prop. Section header uses `ChevronRight` for a 'View All' link. Apply RelatedProducts.css for card glassmorphism, glow radial gradient, badge chip styles, and hover tilt transitions.

As a frontend developer, implement the ProductFiltersPanel section for the ProductManager page. This interactive filter panel uses multiple `useState` hooks: `category` (string, default ''), `minPrice`/`maxPrice` (strings), `priceValue` (number, default 500 for a range slider), `stockFilters` (object with keys `in_stock`, `low_stock`, `out_of_stock` booleans), `sortBy` (string, default 'newest'), and `mobileOpen` (boolean). Renders a `pfp-header` with lucide `SlidersHorizontal` title and a Clear button (`X` icon) wired to `handleClear()` that resets all state. Includes: a category `<select>` from CATEGORIES array (8 options), a price range with min/max inputs and a range slider bound to `priceValue`, stock filter checkboxes (STOCK_OPTIONS: in_stock/low_stock/out_of_stock) with colored dot indicators toggled via `toggleStock()`, a sort dropdown from SORT_OPTIONS (6 options with `ArrowUpDown` icons), and an active filters chip list derived from filter state with individual `X` dismiss buttons and a global clear. Uses lucide icons: `SlidersHorizontal`, `ChevronDown`, `Check`, `X`, `ArrowUpDown`. Apply ProductFiltersPanel.css (10469 chars). Mobile collapsible panel controlled by `mobileOpen` state.

As a frontend developer, implement the ProductTableSection section for the ProductManager page. This stateless table component renders a `<section className="pts-root">` containing a scrollable `pts-table-wrap` div with a `<table className="pts-table">`. The thead has 7 columns: Image, Name, Category, Price, Stock, Status, Actions. The tbody maps over a hardcoded PRODUCTS array of 8 items (Aurora Wireless Headphones, Summit Trail Running Shoes, Minimalist Desk Lamp, Organic Cotton Tee, Stainless Steel Water Bottle, Compact Bluetooth Speaker, Leather Laptop Sleeve, Yoga Mat Premium), each with id, name, category, price, stock, status, and Unsplash image URLs (88x88 crop). Each `pts-row` displays: a product image thumbnail, name, category, formatted price, stock quantity with `getStockClass()` helper (returns 'is-low' for stock<=0 or <10, 'is-ok' otherwise) for color coding, an active/inactive status badge, and action buttons using lucide `Pencil` (edit) and `Trash2` (delete) icons plus `PackageOpen` for empty states. Apply ProductTableSection.css (5714 chars).

As a frontend developer, implement the ProductFormModal section for the ProductManager page. This complex modal form uses `useState` for `open` (default true), `form` (INITIAL_FORM object with fields: name, description, category, price, stock, supplier, status boolean, images array), `errors` (validation error map), and `isDragging` (boolean for drag-and-drop). Also uses `useRef` for `fileInputRef` and `useCallback` for all handlers. The form includes: a modal backdrop with `handleBackdropClick()` to close on outside click; a header with lucide `Package` icon and `X` close button; fields for name (lucide `Type`), description (lucide `FileText`), category select from CATEGORIES array (9 options including blank), price (lucide `DollarSign`), stock quantity (lucide `Hash`), supplier select from SUPPLIERS array (7 options), a status toggle (active/inactive boolean), and an image upload zone with lucide `Upload`/`Image`/`AlertTriangle` icons supporting drag-and-drop (`isDragging` state, `handleFiles()` callback) and `fileInputRef` click trigger. `validate()` checks all required fields and sets per-field errors; `handleSave()` calls validate and closes modal on success; `handleCancel()` resets INITIAL_FORM and closes. Apply ProductFormModal.css (10556 chars) for modal overlay, form layout, drag-drop zone, and validation error styles.

As a frontend developer, implement the OrderFilterSidebar section for the OrderManager page. This is a complex interactive sidebar using `useState`, `useRef`, and `useCallback` hooks. It renders multiple collapsible filter sections via a `SectionIcon` helper component that switches between SVG icons for 'status', 'date', and 'customer' filter types. Static data includes `STATUS_OPTIONS` (6 statuses with counts), `PAYMENT_OPTIONS` (4 methods with CreditCard/Wallet/Building2/Banknote lucide icons, colored bg tokens), `DATE_PRESETS` array, and a `CUSTOMERS` array (7 entries). Utility functions include `getInitials`, `getAvatarColor` (hash-based color from a 7-color palette), and `formatCurrency`. The sidebar includes a `SlidersHorizontal` icon header, a `RotateCcw` reset button, `ChevronDown` collapse toggles with `Check` indicators for selections, a `Search` input for customer filtering, and `X` clear buttons for active filters. Styled via OrderFilterSidebar.css (14460 chars).

As a frontend developer, implement the OrderStatsBar section for the OrderManager page. The section renders a static `<section>` with class `osb-root` containing an `osb-grid` of four `StatCard` sub-components. Each card is driven by the `STAT_CARDS` data array containing id, label, numeric value, trend direction ('up'/'down'), trendLabel string, change integer, and period string. Each `StatCard` renders: a top row with a lucide icon (PackageCheck, Clock, Truck, CheckCircle2 — size 18, strokeWidth 2) and a trend badge using `TrendingUp` or `TrendingDown` (size 13); a large `osb-card-value` displaying `value.toLocaleString()`; a label; and a footer row with signed change amount and period text. CSS modifier classes `osb-card--{id}` and `osb-trend--up/down` apply per-card theming. Styled via OrderStatsBar.css (4461 chars). No state or API calls.

As a frontend developer, implement the BulkActionsBar section for the OrderManager page. The section uses `useState` (selectedCount initialized to 3, allChecked to false), `useRef`, `useCallback`, and `useEffect` hooks. It renders a `<section>` with class `bab-root` that gains the `is-visible` class when `selectedCount > 0`. A `bab-glow-line` decorative element sits at the top. The left panel contains a custom checkbox label with `CheckSquare` icon (size 14, strokeWidth 2.8) that toggles `allChecked` (sets selectedCount to 8 or 0) and a count display. The `BULK_ACTIONS` array (4 items: ship/deliver/notify/cancel with Truck/PackageCheck/Bell/XCircle lucide icons) drives the action buttons. Each button is wrapped in a `MagneticButton` sub-component that uses `useRef` and `useState({x,y})` to implement magnetic mouse-tracking via `onMouseMove` (15% offset factor applied to `translate3d` CSS transform) and resets on `mouseLeave`. The 'cancel' action resets selectedCount to 0. Styled via BulkActionsBar.css (6201 chars).

As a frontend developer, implement the UserFilterSidebar section for the UserManager page. This section is a filter panel with multiple interactive controls and a mobile drawer. State managed via `useState`: `search`, `selectedRole` (default 'all'), `selectedStatus` (default 'all'), `selectedSort` (default 'newest'), `sortOpen`, `drawerOpen`. Uses `useRef(null)` for `sortRef` to detect outside clicks via `useEffect` mousedown listener. A second `useEffect` toggles `document.body.style.overflow = 'hidden'` when `drawerOpen` is true. Derived state: `hasActiveFilters` (boolean), `activePillCount` (count of active filters). Constants defined: `ROLE_OPTIONS` (5 entries: all/superadmin/admin/editor/viewer with counts), `STATUS_OPTIONS` (3 entries: all/active/inactive with counts), `SORT_OPTIONS` (5 entries: newest/oldest/name_asc/name_desc/last_active). Filter content includes: search input (`ufs-search-wrap`) with `Search` icon and clear `X` button; role filter group with pill buttons using `Check` icon for selected state; status filter group similarly; sort dropdown (`sortRef`) with `ChevronDown` and `SlidersHorizontal` icons. Mobile-responsive drawer toggled by a `Filter` button showing `activePillCount` badge; `X` and `RotateCcw` icons for close/reset. `handleClearAll` resets all state. Imports from lucide-react: `Search`, `Filter`, `ChevronDown`, `SlidersHorizontal`, `X`, `RotateCcw`, `Check`.

As a frontend developer, implement the UserStatsBar section for the UserManager page. This is a static stats display rendered as a `<section className='usb-root'>` containing `usb-inner` and `usb-grid`. A `stats` array of 3 objects (total, active, inactive) each has: `id`, `label`, `count` (formatted strings like '26,834'), `trend` ('up'/'down'/'neutral'), `change` (e.g. '+12.4%'), `subtitle` ('vs. previous month'), `icon` (lucide-react component), and `colorClass` (`usb-card--total`, `usb-card--active`, `usb-card--inactive`). Each card renders: `usb-card-head` with icon (18px) and label; `usb-card-value` with count; `usb-card-trend` with a `trendIcon()` helper returning `TrendingUp`/`TrendingDown`/`Minus` (14px) and a `trendClass()` helper returning CSS modifier (`usb-trend--up`, `usb-trend--down`, `usb-trend--neutral`). No state or effects — pure presentational component. Imports from lucide-react: `Users`, `UserCheck`, `UserX`, `TrendingUp`, `TrendingDown`, `Minus`.

As a frontend developer, implement the AnalyticsTopBar section for the Analytics page. This section renders a top navigation bar using useState for activeRange ('30days' default), customFrom, customTo, and appliedCustom state, plus useCallback for handleRangeClick, handleApplyCustom, and handleExport. It renders a left section with BarChart3 icon and 'Analytics' h1 title, a center date range selector mapping DATE_RANGES (Today, Last 7 days, Last 30 days, Custom) as toggle buttons with an-tb__range-btn--active class, and a right section with conditionally rendered custom date inputs (type='date') when activeRange === 'custom' plus an Apply button. A Download icon Export button calls handleExport which logs the resolved date range. The getDefaultDates utility computes ISO date strings from the selected range.

As a frontend developer, implement the AnalyticsKPIs section for the Analytics page. This section renders four KPI metric cards using useState for selected period, useEffect for animated counter on value change, useRef for canvas sparkline rendering, and useCallback for period switching. KPI_DATA is keyed by period (Last 7 days, Last 30 days, Last quarter, This year) and contains cards for Total Revenue (DollarSign icon, indigo sparkline), Total Orders (ShoppingBag icon, teal sparkline), Avg. Order Value (TrendingUp icon, orange sparkline), and Conversion Rate (Activity icon, yellow sparkline). Each card shows an animated numeric counter with prefix/suffix, a trend badge (up/down), comparisonLabel and comparisonValue, and a canvas-drawn sparkline with colored line and fill gradient. A PERIODS dropdown (ChevronDown icon) switches the active data set.

As a frontend developer, implement the AnalyticsCharts section for the Analytics page. This section uses Chart.js via react-chartjs-2 (registering CategoryScale, LinearScale, PointElement, LineElement, BarElement, Title, Tooltip, Legend, Filler) and useState plus useCallback for chart type and time range switching. It renders two charts: a Line chart for revenue comparison (this period vs last period) using REVENUE_SERIES data keyed by 7/30/90 days with TrendingUp icon header, and a Bar chart for orders using ORDERS_SERIES with Package icon header. makeLineOptions factory configures responsive charts with custom tooltip (external handler), grid styling, tick formatting ($Xk), and interaction mode 'index'. Time range buttons toggle between 7/30/90 day datasets. Note: AnalyticsCharts component name also appears in AdminDashboard — this is the full Analytics page version.

As a frontend developer, implement the AnalyticsRevenue section for the Analytics page. This section uses Chart.js Pie and Bar charts (registering ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement) with useState for period (Week/Month/Quarter/Year), sortKey ('revenue'), and sortDir ('desc'), plus useMemo for categoryAgg and totalRevenue computations. revenueData contains 8 products (Rapid Pro Headphones, UltraCharge Power Bank, etc.) with fields: product, sku, category, unitsSold, revenue, growth. categoryPalette maps Electronics/Accessories/Furniture/Lifestyle/Appliances to hex colors. The Pie chart visualizes revenue by category; the Bar chart shows product-level revenue. A sortable data table renders rows with formatCurrency and formatCompact helpers, growth indicators (positive/negative), and period toggle buttons. Category aggregation uses useMemo over revenueData grouped by category.

As a frontend developer, implement the AnalyticsCustomers section for the Analytics page. This section uses Chart.js Line chart (registering CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler) with useState for segView ('monthly'/'weekly') and sortField/sortDir for table sorting, plus useMemo for chartData computation. MONTHLY_SEGMENTS provides weekly and monthly data arrays for newCustomers and returning customer datasets rendered as filled area Line chart with indigo (#6366f1) for returning and teal (#14b8a6) for new customers. KPI summary cards use lucide-react icons: Users, UserPlus, TrendingUp, UserX with ArrowUpRight/ArrowDownRight trend indicators. TOP_CUSTOMERS array (5 entries: Sarah Chen, Marcus Rivera, Aisha Patel, David Kim, Nina Johansson) renders as a sortable table with avatarClass, orders, spend columns and ChevronRight navigation hints.

As a frontend developer, implement the AnalyticsProducts section for the Analytics page. This section renders a paginated, sortable product performance table using useState for sortField, sortDir, and currentPage, plus useMemo for sorted/paginated data slices. PRODUCT_DATA contains 18 products across categories (Electronics, Apparel, Home Goods, Accessories, Fitness, Footwear) with fields: name, category, unitsSold, revenue, rating. Pagination uses ROWS_PER_PAGE=10 with page navigation controls. A StarRating sub-component (importing StarRating.css) renders full/half/empty stars using ap-star and ap-star-empty spans plus a numeric rating label. formatCurrency helper formats revenue values. Column headers are clickable for ascending/descending sort toggling. The table also includes a category filter or search capability based on the JSX structure.

As a frontend developer, implement the AnalyticsExport section for the Analytics page. This section uses useState for showSchedule (boolean toggle), scheduleStatus, scheduleConfig ({frequency, day, format, email}), downloadStatus, and exportStatus. It renders an ae-grid with three action cards: (1) Download Report card with handleDownload that shows 'Generating PDF...' then 'Report downloaded successfully' via setTimeout(1400ms); (2) Export CSV card with handleExportCSV showing 'Exporting CSV...' then 'Data exported — 2,847 rows' via setTimeout(1100ms); (3) Schedule Report card toggling showSchedule which reveals a form with frequency/day/format selects and email input, handleScheduleSubmit shows 'Scheduling report...' then auto-closes after 2200ms, handleScheduleCancel resets state. An activity log section renders logEntries array (5 entries with time, label, status: success/info) with styled status indicators. All icons are inline SVG.

As a frontend developer, implement the CheckoutProgressBar section for the Checkout page. This component renders a 3-step progress indicator (Shipping, Billing, Review) using Lucide icons (Truck, CreditCard, ClipboardList, Check). It uses useState to track activeStep (0-indexed). Each step renders a clickable button with cpb-circle classes (is-active, is-completed, is-inactive), a cpb-label span, and a cpb-connector div between steps. handleStepClick only allows navigation to step 0 or previously completed steps — future steps are disabled. The progressbar role with aria-valuenow/min/max provides accessibility. Completed steps show a Check icon; active steps show a larger icon (size 20 vs 18). Connector divs receive is-completed and is-active modifier classes based on step state.

As a Tech Lead, verify the end-to-end integration between the ProductDetail page frontend sections (ProductDetailInfo, ProductDetailGallery, ProductDetailSpecs, ProductDetailReviews, ProductDetailRelated) and the Products/Reviews API backend. Ensure product data loads from GET /api/products/:id, specs and images render correctly, review pagination and helpful votes work against the API, related products carousel fetches live data, and add-to-cart triggers the Cart API correctly updating global cart state.

As a Tech Lead, verify the end-to-end integration between the AdminDashboard frontend sections (StatsCards, RecentOrdersPanel, ActivityFeedPanel, AnalyticsCharts, UserManagementPreview, QuickActionsBar, WelcomeBanner) and the backend APIs (analytics KPIs, orders list, users list). Ensure admin-only JWT role guard is enforced, stats cards display live revenue/orders/users/conversion data, recent orders panel loads from the orders API with search and pagination, user management preview loads from the users API, and chart data comes from analytics endpoints. Validate the full admin flow from login to dashboard.

As a frontend developer, implement the WishlistActions section for the Wishlist page. Uses `useState` for `selectedIds` (Set), `selectAllState` (`'none'`|`'all'`|`'indeterminate'`), `prevCount`, `bouncing`, and `confirmingClear`. Uses `useRef` for `numRef` (counter DOM reference). Three `useEffect` hooks: derives `selectAllState` from `selectedCount` vs `totalCount`, triggers `bouncing` CSS animation for 350ms on counter change via `setTimeout`, and manages component lifecycle. `toggleSelectAll` toggles between selecting all `allIds` and clearing the Set. `handleClearAll` implements two-step confirmation pattern: first click sets `confirmingClear = true` with 2000ms auto-reset timeout, second click within window clears selections. `handleShare` and `handleMoveToCart` are placeholder handlers. The section root has class `wa-visible` conditionally when `hasSelections` is true (slide-up reveal). Renders left panel with indeterminate checkbox (`Check` icon, `is-checked`/`is-indeterminate` classes), animated bouncing selected count, right panel with `Share2`, `ShoppingCart`, and `Trash2` action buttons. Apply WishlistActions.css for sticky bottom bar, slide-up animation, and confirmation state styling.

As a frontend developer, implement the ProductPagination section for the ProductManager page. This interactive pagination component uses `useState` for `currentPage` (default 1) and `rowsPerPage` (default 10). It derives `totalPages` from `Math.ceil(124 / rowsPerPage)` where TOTAL_ITEMS=124. Includes a `buildPageNumbers(current, total)` helper that returns a smart page array with '...' ellipsis entries for large page counts (<=4 from start shows first 5 + ellipsis + last; >=total-3 shows first + ellipsis + last 5; otherwise first + ellipsis + prev/current/next + ellipsis + last). Renders a `pp-root` div with: Previous button (lucide `ChevronLeft`, disabled when page=1) wired to `handlePrev()`, a `pp-indicator` showing 'Page X of Y', a `pp-pages` nav mapping pageNumbers to either `pp-ellipsis` spans or numbered buttons (active class on current page) via `handlePageClick()`, Next button (lucide `ChevronRight`, disabled at last page) wired to `handleNext()`, and a rows-per-page `<select>` with ROWS_PER_PAGE_OPTIONS [10,25,50,100] that resets currentPage to 1 on change. Apply ProductPagination.css (4842 chars).

As a frontend developer, implement the OrderTableContainer section for the OrderManager page. The component uses `useState` hook for sort state (active column and direction). It renders a table driven by a static `ORDERS` array of 12 order objects with fields: id, customer, date, amount, status, payment. Sortable columns are defined by `SORTABLE_COLUMNS` array covering all 6 fields. A `SortIcon` sub-component renders dual up/down arrows with `is-active`, `is-asc`, and `is-desc` CSS modifier classes. `StatusBadge` and `PaymentBadge` sub-components apply status-specific CSS classes from `STATUS_STYLE` and `PAYMENT_STYLE` maps (Pending/Processing/Shipped/Delivered/Cancelled/Refunded and Paid/Partial/Unpaid/Refunded-pay) with a `otc-badge-dot` indicator dot. Each row includes action buttons with `Eye`, `Pencil`, and `XCircle` lucide icons. A `Search` input is included for filtering. Styled via OrderTableContainer.css (9565 chars).

As a frontend developer, implement the UserTable section for the UserManager page. This is a complex interactive data table with full CRUD operations. State via `useState`: `users` (initialized from `USERS` constant — 8 mock users with fields: id, name, email, role, status boolean, lastLogin, initials), `selectedIds` (Set), `sortKey` (default 'name'), `sortDir` ('asc'/'desc'), `deleteUser` (null or user object), `editUser` (null or user object), `editDraft` (object). `ROLES` constant = ['Super Admin','Admin','Editor','Viewer']. `SORT_KEYS` = ['id','name','email','role','status','lastLogin']. Derived: `allSelected` boolean. `useMemo` used for sorted user list. Key handlers: `handleSort(key)` toggles sort direction or sets new key; `toggleSelectAll()` / `toggleSelect(id)` manage Set-based selection; `toggleStatus(id)` flips user.status; `confirmDelete()` filters out `deleteUser` from users state and clears from selectedIds; `bulkDelete()` removes all selectedIds. Edit flow: `editUser` / `editDraft` state with `Save` / `X` icons. Delete confirmation modal with `AlertTriangle` icon. Table columns: checkbox, ID, Name+initials avatar, Email, Role (dropdown in edit mode), Status (toggle), Last Login, Actions (Edit2/Trash2 icons). Imports from lucide-react: `Edit2`, `Trash2`, `Check`, `AlertTriangle`, `X`, `Save`.

As a frontend developer, implement the CheckoutFormPanel section for the Checkout page. This is the most complex section — a multi-step form (step 1: Shipping, step 2: Billing/Payment, step 3: Review) controlled by useState step (1-3). Form state is managed via a single initialState object with fields: street, apt, city, state, zip, country, sameAsShipping, billingStreet/Apt/City/State/Zip/Country, paymentMethod (card/wallet), cardNumber/Name/Expiry/Cvc, walletProvider (apple/etc), saveCard. Uses useRef for autocompleteRef and addressInputRef. Address autocomplete filters SHIPPING_ADDRESSES array (5 mock entries) against addressQuery state with keyboard navigation via activeAutocompleteIndex. Lucide icons used: MapPin, CreditCard, Wallet, ClipboardCheck, ChevronLeft, ChevronRight, Lock, ShieldCheck, Package, Truck. Validation errors stored in errors state object; set() helper clears field errors on change. ORDER_ITEMS (3 items) displayed in review step. Implements useEffect for outside-click detection to close autocomplete dropdown.

As a frontend developer, implement the CheckoutSummary section for the Checkout page. This component renders an order summary sidebar with 3 ORDER_ITEMS (Aurora Wireless Headphones qty 2 @ $129.99, Nimbus Pro Mousepad qty 1 @ $34.99, USB-C Cable qty 3 @ $19.99). Uses useState for promoCode, promoApplied, promoError, and collapsed (mobile toggle). Includes a custom ItemThumb component that renders inline SVG icons mapped by string key (headphones, square, cable). Promo code logic: handleApplyPromo validates against PROMO_CODE ('WELCOME20') for a $20 PROMO_DISCOUNT; handleRemovePromo resets promo state. Price calculation: subtotal from item prices×qty, discount applied if promoApplied, taxable = subtotal - discount, tax at 8% TAX_RATE, total = taxable + tax + SHIPPING_COST ($8.99). The chs-toggle-btn conditionally renders in mobile collapsed state (window.innerWidth < 768 check). Lucide icons: ShoppingBag, ChevronDown, Check, ShieldCheck, Tag, Zap.

As a frontend developer, implement the CheckoutSecurityBadges section for the Checkout page. This is a purely static presentational section rendering a BADGES array of 4 trust indicators: 'SSL Encrypted' (ShieldCheck icon, '256-bit TLS — your data stays private end-to-end.'), 'PCI-DSS Compliant' (CreditCard icon, 'Level 1 certified payment processing.'), 'Money-Back Guarantee' (BadgePercent icon, '30-day refunds. No questions asked.'), and '24/7 Support' (Clock icon, 'Live chat & phone, every day of the year.'). Each badge renders as a csb-badge div containing a csb-icon span (Lucide icon size 20 strokeWidth 2) and a csb-text span with csb-title and csb-desc child spans. The section root is a semantic <section> element with csb-root class wrapping a csb-inner container. No state or interactivity required. Lucide icons used: ShieldCheck, CreditCard, BadgePercent, Clock.

As a frontend developer, implement the OrderConfirmHero section for the OrderConfirm page. This section renders a full-width hero using the `och-root` layout with an animated `och-ambient-ring` decorative element. Includes an SVG checkmark badge (`och-check-badge` with a polyline checkmark icon), an `och-headline` displaying 'Order Confirmed', an `och-order-num` row showing a hardcoded order number 'ORD-4821' with label/value spans, and a confirmation message paragraph referencing a static email 'you@example.com'. The `confirmationDate` is derived via `new Date().toLocaleDateString('en-US', {...})` with weekday/year/month/day options, though it is computed but not currently rendered — note this for future integration. Apply OrderConfirmHero.css for ambient ring, badge pulse, and layout styles.

As a Tech Lead, verify the end-to-end integration between the Products page frontend sections (ProductsGrid, ProductsFilters, ProductsPagination, ProductsHero) and the Products API backend. Ensure filter/sort query params are passed correctly, paginated product lists render with live data, category and price range filters return correct results, and the ProductsGrid renders API product shapes correctly replacing static PRODUCTS array. Validate search, sort, and pagination interactions end-to-end.

As a Tech Lead, verify the end-to-end integration between the Profile page frontend sections (ProfileEditForm, OrderHistory, WishlistSection, AddressBook, AccountSecuritySection) and the Users/Orders/Wishlist/Addresses/Security API backend. Ensure profile edits persist via PUT /api/users/me, order history loads from GET /api/orders/user/:userId with correct status/tracking data, wishlist section syncs with the Wishlist API, address CRUD operations hit the Addresses API, and password change/2FA/session revocation work end-to-end.

As a Tech Lead, verify the end-to-end integration between the Analytics page frontend sections (AnalyticsKPIs, AnalyticsCharts, AnalyticsRevenue, AnalyticsCustomers, AnalyticsProducts, AnalyticsTopBar, AnalyticsExport) and the Analytics API backend. Ensure KPI cards load live data from GET /api/analytics/kpis with the selected period, revenue charts render from GET /api/analytics/revenue, customer segments load from GET /api/analytics/customers, product performance table loads from GET /api/analytics/products, date range changes in AnalyticsTopBar re-fetch all panels, and the export/download flow calls POST /api/analytics/export and handles the file response.

As a frontend developer, implement the OrderPagination section for the OrderManager page. The component uses `useState` for three state values: `currentPage` (initialized 1), `pageSize` (initialized 50), and `jumpInput` (string for the jump-to-page input). Total orders is a static constant (234). A `generatePageNumbers` helper function produces an ellipsis-aware page number array: always includes page 1 and last page, inserts '...' when current page is far from edges, and shows a sliding window of ±1 around current page. The UI renders: a count display showing `startItem-endItem of TOTAL_ORDERS`; a page size selector group with `PAGE_SIZE_OPTIONS` [10,25,50,100] toggle buttons using `is-active` class and `aria-pressed`; a nav section with `ChevronsLeft`/`ChevronLeft`/`ChevronRight`/`ChevronsRight` arrow buttons (disabled state via `is-disabled` class); page number buttons; and a jump-to-page text input with Enter key handler and a Go button. Styled via OrderPagination.css (5518 chars).

As a frontend developer, implement the OrderDetailModal section for the OrderManager page. The component uses `useState` for three values: `isOpen` (initialized true), `statusValue` (initialized from `orderData.currentStatus`), and `notes` (editable textarea initialized from `orderData.notes`). Static `orderData` object contains: id 'ORD-4817', date, customer 'Mara Quinn', shippingAddress and billingAddress objects, a `lineItems` array (3 items with name/sku/qty/price/total), and a `timeline` array (5 steps with status/time/note/state values of 'completed'/'active'/'pending'). `STATUSES` constant drives a status dropdown (5 values). A `statusBadgeClass` helper applies `is-{status.toLowerCase()}` CSS modifier. The modal renders as a full-screen `odm-overlay` div with `role='dialog'` and `aria-modal`; clicking the overlay backdrop closes the modal via `handleOverlayClick`. Header includes X close button. Action buttons include `Printer` (calls `window.print()`), `Send` (email placeholder), and `FileText`. Content panels cover: status badge + dropdown with `ChevronDown`, shipping/billing addresses with `MapPin` icon, line items table, order subtotal calculation (via `reduce` on `item.total`), timeline with `Clock`/`Package` icons showing state-based CSS classes, and an editable notes textarea. Styled via OrderDetailModal.css (14329 chars).

As a frontend developer, implement the UserPagination section for the UserManager page. Rendered as a `<nav className='upg-root' aria-label='User table pagination'>`. State via `useState`: `currentPage` (default 1), `rowsPerPage` (default 25), `pageInput` (string, default '1'). Constants: `ROWS_OPTIONS = [10, 25, 50, 100]`, `totalPages = 16`, `totalUsers = 392`. Derived: `startItem` and `endItem` calculated from currentPage and rowsPerPage. Handlers: `goToPage(page)` clamps to [1, totalPages] and syncs both `currentPage` and `pageInput`; `handlePageInputChange` updates `pageInput` string; `handlePageInputBlur` parses input and validates range before committing or resetting; `handlePageInputKeyDown` triggers blur on Enter; `handleRowsChange` resets to page 1. `visiblePages()` function computes a sliding window of up to 5 page numbers centered on `currentPage`. UI: rows-per-page `<select>` with `upg-rows-select`; item range display (`upg-info`); pagination bar (`upg-bar`) with ChevronsLeft/ChevronLeft/page buttons/ChevronRight/ChevronsRight; direct page input field with `upg-page-input` class. Imports from lucide-react: `ChevronLeft`, `ChevronRight`, `ChevronsLeft`, `ChevronsRight`.

As a frontend developer, implement the OrderSummary section for the OrderConfirm page. Uses `useRef` and `useState` hooks to drive a 3D tilt card effect: `handleMouseMove` calculates `deltaX`/`deltaY` relative to the card's bounding rect center and updates `tilt` state (capped at `maxTilt = 4`), applied as a CSS `perspective(1200px) rotateX() rotateY()` transform on the `os-card` div via inline style. `handleMouseLeave` resets tilt to `{x:0, y:0}`. Renders static `ORDER_DATA` (itemCount: 4, subtotal: $293.48, tax: $23.48, total: $316.96, deliveryDate: 'May 20–22, 2026'). Displays a header with `Receipt` lucide icon, an `os-meta-row` with `Package` and `Truck` icons for item count and delivery date, and an `os-price-grid` with colored dot indicators for Subtotal, Tax, and Total cells. Apply OrderSummary.css for card glass styling and tilt transition.

As a frontend developer, implement the OrderDetails section for the OrderConfirm page. Renders a static `ORDER_ITEMS` array of 4 products (Wireless Headphones SKU-AUD-4821 $149.99 x1, USB-C Cable SKU-ACC-3104 $19.99 x2, Laptop Sleeve SKU-BAG-7720 $34.50 x1, Mechanical Keyboard SKU-KBD-1183 $89.00 x1). Computes `subtotal`, `tax` (8% rate), `shipping` (free if subtotal > $50, else $5.99), and `total` inline. Displays a desktop column label row (`od-labels`) with Product/Unit Price/Qty/Total headers. Maps `ORDER_ITEMS` into `od-list` `<ul>` with each `<li>` showing a product image placeholder (`Package` lucide icon via `od-img-placeholder` when `item.image` is null), product name, SKU, unit price, quantity, and line total. Shows an empty state with `ShoppingBag` icon if no items. Uses `Intl.NumberFormat` via `formatPrice()` helper for currency display. Apply OrderDetails.css for responsive table/list layout.

As a frontend developer, implement the PaymentConfirm section for the OrderConfirm page. Renders a static payment card (`pmc-card`) with a decorative `pmc-accent-bar`. Header row uses `CreditCard` lucide icon (size 20), section title 'Payment Method', and subtitle 'Billing Details'. A `pmc-method-row` shows a VISA badge (`pmc-card-icon-wrap` text node), method info (label 'Card', name 'Visa', detail 'ending in 1234'), and a verified badge using `CheckCircle` lucide icon (size 14). Two `pmc-divider` separators frame a detail grid with rows for Cardholder ('Avery Kane'), Expiration ('09/27'), and Transaction ID ('TXN-48291A7F'). Bottom `pmc-charge-block` displays 'Amount Charged' label and '$316.96' value. Apply PaymentConfirm.css for card shadow, accent bar, and detail row styling.

As a frontend developer, implement the ShippingInfo section for the OrderConfirm page. Renders a static `SHIPPING_DATA` object (label: 'Shipping To', name: 'Elliot Morrison', street: '4821 Maplewood Drive, Apt 12B', cityStateZip: 'Portland, OR 97209', phone: '(503) 482 - 7193'). The `shi-card` contains a `shi-header` with a `MapPin` lucide icon (size 20) and the `SHIPPING_DATA.label`. The `shi-body` renders `shi-name`, two `shi-line` divs for street and city/state/zip, and a phone line with `Phone` lucide icon (size 15, class `shi-phone-icon`) alongside the formatted phone number. Apply ShippingInfo.css for card layout and phone icon inline alignment.

As a frontend developer, implement the OrderEstimate section for the OrderConfirm page. Renders an `oe-card` with three sub-regions: a label row (`oe-label-row`) containing a `Truck` lucide icon (size 18) and 'Estimated Delivery' text; a date badge (`oe-date-badge`) with a `Calendar` lucide icon (size 16, color: `var(--primary_light)`), date text 'May 20–22', and year span '2026'; and a helper text block (`oe-helper`) stating 'Standard shipping — arrives in 3–5 business days after dispatch' with 'Standard shipping' bolded. An `oe-divider` element (mobile-only via CSS) separates the badge from the helper text. Apply OrderEstimate.css for badge styling, icon coloring, and mobile-responsive divider.

As a Tech Lead, verify the end-to-end integration between Cart and Wishlist frontend sections (CartItems, CartSummary, WishlistGrid, WishlistActions) and the Cart/Wishlist API backend. Ensure cart items persist across page refreshes via API, quantity updates and item removals sync to backend, promo code validation hits the API, wishlist add/remove operations update the server, and move-to-cart action transfers wishlist items to cart via the API. Validate global cart/wishlist state updates in authStore.

As a Tech Lead, verify the end-to-end integration between the ProductManager frontend sections (ProductTableSection, ProductFormModal, ProductFiltersPanel, ProductPagination) and the Products API backend. Ensure the product table loads from GET /api/products with admin auth, the add/edit form modal submits to POST/PUT /api/products with image upload handling, filter and sort query params are forwarded correctly, pagination syncs with API total counts, and delete actions call DELETE /api/products/:id with confirmation. Verify stock status color coding matches live stock values.

As a frontend developer, implement the OrderCallToAction section for the OrderConfirm page. Renders an `octa-inner` container with: a decorative `octa-divider` containing a `CircleCheckBig` lucide icon (size 18); a heading 'Thank you for your order!'; a subhead paragraph describing processing status and tracking email; an `octa-ref` pill displaying reference number 'ORD-4821' with bolded value; and an `octa-actions` block with a primary CTA anchor (`octa-btn-primary`) linking to '/Products' with `ShoppingBag` icon (size 18) and `ArrowRight` icon (size 16), plus an `octa-secondary-links` group with two anchor links to '/Profile' — 'View Order in Profile' and 'Download Receipt', both using `FileText` lucide icon (size 16). Apply OrderCallToAction.css for button gradients, pill styling, and link hover states.

As a Tech Lead, verify the end-to-end integration between the Checkout frontend (CheckoutFormPanel, CheckoutSummary, CheckoutProgressBar) and the Checkout/Orders API backend, and the resulting OrderConfirm page sections (OrderConfirmHero, OrderSummary, OrderDetails, ShippingInfo, PaymentConfirm, OrderEstimate, OrderCallToAction). Ensure the multi-step checkout form submits to POST /api/checkout/place-order, the response order data is passed to the OrderConfirm page, confirmation details (order ID, date, delivery estimate, totals, shipping/billing) render from live API data replacing static hardcoded values. Validate the full shopper flow end-to-end.

As a Tech Lead, verify the end-to-end integration between the OrderManager frontend sections (OrderTableContainer, OrderDetailModal, OrderFilterSidebar, BulkActionsBar, OrderPagination, OrderStatsBar) and the Orders API backend. Ensure the orders table loads from GET /api/orders with admin auth, filter sidebar params are forwarded correctly, order detail modal loads from GET /api/orders/:id, status dropdown update calls PUT /api/orders/:id/status, bulk actions (ship/deliver/cancel) hit the appropriate API endpoints, and pagination syncs with total order count. Verify stats bar data comes from analytics or orders aggregate endpoints.

As a Tech Lead, verify the end-to-end integration between the UserManager frontend sections (UserTable, UserFilterSidebar, UserStatsBar, UserPagination) and the Users API backend. Ensure the user table loads from GET /api/users with admin auth, filter/sort params are forwarded, role dropdown in edit mode submits to PUT /api/users/:id, status toggle calls the update endpoint, delete with confirmation calls DELETE /api/users/:id, and pagination syncs with total user count. Verify stats bar (total/active/inactive counts) comes from a users aggregate endpoint.