The Roasted Ember

As a frontend developer, implement the LandingHero section using @react-three/fiber (Canvas, useFrame, useThree), @react-three/drei (Environment), framer-motion, and three.js. The section renders a 3D scene with multiple CoffeePlant meshes — each plant has a procedurally generated trunk (cylinder), branches, leaves (box meshes), and coffee berries (sphere meshes) using a seeded RNG (LCG algorithm: s*16807 % 2147483647). useFrame drives idle sway animation (sin wave on rotation.y and position.y), emissive glow lerp on hover (THREE.MathUtils.lerp toward 0.6), and pointer cursor change on pointerOver/pointerOut. leafPositions and berryPositions are memoized per plant index. The Canvas wraps the scene with Environment preset for lighting. Framer Motion handles the 2D overlay text entrance. scrollProgress prop accepted for parallax offset. This is a performance-critical section requiring WebGL fallback handling.

As a frontend developer, implement the BrandIntro section using framer-motion (useScroll, useTransform, useInView, motion). The section is a two-column layout with a text column and an image column. useScroll on the section ref drives useTransform for a convergence parallax: textX shifts 0→40px and imageX shifts 0→-40px as scrollYProgress goes 0→1. useInView (once: true, amount: 0.3) triggers staggerContainer (staggerChildren 0.12, delayChildren 0.1) with itemVariants (opacity 0→1, y 24→0, x -20→0, duration 0.6) for text elements, and imageVariants (opacity 0→1, x 60→0, scale 0.95→1, duration 0.8) for the image column. A parallax background layer at CSS var(--scroll)*-0.3px speed renders 3 decorative SVG coffee beans (ellipse + center line) and 2 leaf SVGs. A midground layer runs at *-0.5px. Stats row displays: '12+ Origin Countries', '100% Arabica Beans', '0 Burnt Batches'.

As a frontend developer, implement the CoffeeJourneyIntro section using framer-motion (motion, useInView, useAnimation, AnimatePresence). The section renders 3 STEPS: 'Explore the Plantation', 'Discover Our Products', 'Enjoy True Quality'. Each step has a number badge and description. ConnectorSVG sub-component renders animated SVG lines (pathLength 0→1, duration 0.8) between steps — vertical variant uses a 2x48 viewBox line, horizontal variant uses a 180x2 viewBox line with a linear gradient (id: cji-grad). ParticleBurst sub-component renders 12 particles on step activation using AnimatePresence: each particle is a motion.span that animates from x:0/y:0 to computed polar-coordinate x/y (distance 40-70px), opacity 1→0, scale 1→0.2, duration 0.6s easeOut. Particle colors cycle through ['#F25C54','#FFB84D','#D4A373','#ffffff']. useInView (once: true) triggers connector draw animations with staggered delays.

As a frontend developer, implement the FeaturedProducts section using framer-motion (motion, useAnimation, AnimatePresence), lucide-react (ShoppingCart, Check, ArrowRight), and React hooks (useState, useCallback, useRef, useEffect). Renders 3 PRODUCTS: 'Ethiopian Yirgacheffe' ($18.99, gradient #D4A373→#4B2E39), 'Colombian Supremo' ($16.49, gradient #7A4B5E→#2E2E2E), 'Sumatra Mandheling' ($19.99, gradient #4B2E39→#D4A373). Each product card has a CoffeeIllustration SVG sub-component (cup body rect, coffee surface ellipse, handle path, steam paths). Add-to-cart button triggers ConfettiBurst sub-component: 14 particles generated by generateConfettiParticles() using polar angle distribution (Math.PI*2*i/count ± random offset), distance 40-100px, colors from CONFETTI_COLORS array ['#F25C54','#FFB84D','#D4A373','#4B2E39','#7A4B5E','#F7F3F0'], animated x/y/scale/opacity with staggered delays (0-0.08s). Cart state toggles between ShoppingCart and Check icons on add.

As a frontend developer, implement the QualityPromise section using framer-motion (motion, useInView). Renders 3 PILLARS: 'Premium Selection' (bean icon), 'Sustainable Sourcing' (leaf icon), 'Smooth Roast' (roaster icon). Each pillar has a custom inline SVG icon sub-component: CoffeeBeanIcon (ellipse rx=10 ry=13 with 3 curved stroke paths), LeafIcon (leaf path + midrib + 3 branch paths at varying opacities), RoasterIcon (rect with rounded corners, circle, circle, and top pipe path). staggerContainer variant (staggerChildren 0.15, delayChildren 0.1) with fadeUp variants (opacity 0→1, y 18→0, duration 0.5 easeOut) triggered by useInView. Pillar cards use motion.div with fadeUp. Section uses a warm background treatment consistent with the coffee brand palette (#D4A373, #4B2E39, #F25C54).

As a frontend developer, implement the TestimonialCarousel section using framer-motion (motion, AnimatePresence, useMotionValue, useTransform, animate) and React hooks (useState, useEffect, useCallback, useRef). Renders 5 TESTIMONIALS from Sarah Mitchell, James Ortega, Priya Deshmukh, Marcus Chen, Olivia Harmon — each with name, initials avatar, star rating (4-5), review text, and brew method badge (Pour Over, Espresso, French Press, Cold Brew, AeroPress). StarRating sub-component renders 5 stars using '★' character with filled/empty class. MagneticDot sub-component for navigation: uses useMotionValue (x, y, scale) with pointer proximity detection (getBoundingClientRect, distance calculation) and framer-motion animate() for magnetic pull effect (strength proportional to 1-dist/maxDist where maxDist=50px). AUTO_ADVANCE_MS=5000 drives useEffect interval for automatic carousel advancement. AnimatePresence handles slide transition between testimonials. Active dot scales up, inactive dots remain small.

As a frontend developer, implement the WhyChooseUs section using framer-motion (motion, useAnimation) and lucide-react (ShieldCheck, Truck, Users, BookOpen, Coffee, Award). Renders 6 BENEFITS in a grid: 'Quality Guarantee', 'Fast & Fresh Shipping', 'Community Support', 'Educational Resources', 'Sustainable Sourcing', 'Award-Winning Roasts' — each with a Lucide icon, title, description, and unique ringColor. PulseRings sub-component renders 3 concentric animated SVG circles (r=28, viewBox 0 0 64 64) using motion.circle: each ring animates scale [1→1.35], [1→1.55], [1→1.75] with opacity [0.8→0] on hover / [0.5→0] at rest, repeat Infinity, duration 2s easeOut, staggered delays (0, 0.5s). Hover state tracked via useState per card, passed as isHovered prop to PulseRings. useAnimation controls entrance animations per card. Each card has ringColor specific to its benefit (rgba values for #4B2E39, #D4A373, #F25C54, #FFB84D).

As a frontend developer, implement the NewsletterCTA section using framer-motion (motion, useInView, AnimatePresence) and React hooks (useState, useRef, useEffect). The section has a dynamic gradient background div (nc-gradient-bg) whose hsl values shift based on scroll progress: hsl(340+hueShift, 40%, 24%) → hsl(350+hueShift, 30%, 34%), where hueShift = progress*15 computed from getBoundingClientRect in a scroll event listener. useInView (once: false, amount: 0.3) triggers headlineVariants (y 30→0, opacity 0→1, 0.7s), subtextVariants (y 20→0, delay 0.15s), formVariants (y 20→0, delay 0.3s). Form has 3 phases managed by useState: 'idle' → 'loading' (setTimeout 1600ms) → 'success'. AnimatePresence handles phase transition animations. Input focus state (isFocused) drives inline style: borderColor '#FFB84D', boxShadow '0 0 0 4px rgba(255,184,77,0.25)', backgroundColor 'rgba(255,255,255,0.95)'. handleReset() resets phase to 'idle' and clears email. Parallax bg layer at var(--scroll)*-0.2px with decorative SVG coffee beans.

As a frontend developer, implement the Footer section using framer-motion (motion), react-icons/fa (FaInstagram, FaTwitter, FaFacebookF, FaPinterestP, FaTiktok), and React hooks (useState). Renders a footer with 4 animated columns using columnVariant (opacity 0→1, y 40→0, staggered delay i*0.1, duration 0.6) and copyrightVariant (opacity 0→1, y 20→0, delay 0.4s). CollapsibleColumn sub-component: button with aria-expanded toggles open state, renders title + '▾' icon with 'ftr-open' class rotation, content div toggles between 'ftr-expanded'/'ftr-collapsed' CSS classes. quickLinks array (Products, Reviews, Cart, Dashboard), supportLinks array (FAQ, Shipping, Returns, Order Tracking, Contact Us). socialIcons array: 5 react-icons/fa icons (Instagram, Twitter, Facebook, Pinterest, TikTok) rendered as motion.a elements. Mini newsletter form (useState email + subscribed) with handleSubmit setting subscribed:true. Parallax background at var(--scroll)*-0.2px with 3 decorative SVG coffee beans. Coffee brand dark palette (#4B2E39 base).

As a frontend developer, implement the LoginNavbar section for the Login page. This is the shared Navbar component (may already exist from the Landing page task 01e3d0fa-8406-44c0-aec2-9c7c8f32116c). The component uses useState for scrolled and drawerOpen states, useEffect for scroll listener (window.scrollY > 12 threshold) and body overflow lock on mobile drawer open. Renders a nav with nb-navbar/nb-scrolled classes, brand logo using Coffee icon from lucide-react (size 18, color #F7F3F0), brand name 'The Roasted Ember' with tagline 'Premium Coffee', NAV_ITEMS array mapping to Dashboard/Products/Orders/Reviews/Cart hrefs with nb-active class on current path match, ShoppingCart icon cart button, Menu/X toggle for mobile drawer, mobile overlay div with nb-mobile-overlay/nb-open classes, and slide-in mobile drawer with nb-mobile-drawer/nb-open classes. Verify the component already exists from Landing; if so, reuse Navbar.jsx and Navbar.css without duplication.

As a frontend developer, implement the Navbar shared component for the Products page. Note: this component may already exist from the Landing page (task 01e3d0fa-8406-44c0-aec2-9c7c8f32116c) — verify and reuse sections/Navbar.jsx if present. The Navbar uses useState for scrolled (window.scrollY > 12 via scroll event listener) and drawerOpen (mobile drawer toggle). NAV_ITEMS array links to Dashboard, Products, Orders, Reviews, Cart. Active link detection via window.location.pathname comparison. ShoppingCart icon links to /Cart. Menu/X icons from lucide-react toggle the mobile drawer. drawerOpen locks document.body.style.overflow. Mobile drawer slides in with nb-open class on nb-mobile-drawer and nb-mobile-overlay. Coffee icon from lucide-react used in brand logo mark. nb-scrolled class applied on scroll for sticky appearance change. Navbar.css handles sticky positioning, drawer slide animation, and responsive breakpoints.

As a frontend developer, implement the ProductsGrid section for the Products page. Renders 9 product cards from PRODUCTS array (Ember Blend, Golden Hour, Midnight Velvet, Sunstone Espresso, Hazy Dawn, Smoky Timber, Honeyed Maple, Coalspark Espresso, Wild Bramble). Each card shows: name, description, roast badge (getRoastClass maps roast to CSS class: prg-badge--light/medium/dark/espresso), price, star rating via renderStars (fullStars = Math.floor(rating), hasHalf check at rating-fullStars >= 0.25, emptyStars fill to 5), review count, ShoppingCart and Eye icons from lucide-react as action buttons. useMemo derives filtered/sorted product list. Coffee icon from lucide-react used as placeholder product image. Each card includes @react-three/fiber Canvas with useFrame for a small animated coffee visual. ProductsGrid.css handles responsive 3-column grid (tablet: 2-col, mobile: 1-col), card hover lift, badge color variants, and star icon coloring.

As a frontend developer, implement the ProductsEmptyState section for the Products page. Renders a @react-three/fiber Canvas with CoffeeCup 3D model and SoftShadows from @react-three/drei. CoffeeCup groupRef animates via useFrame: rotation.y = sin(t*0.35)*0.25 and position.y = sin(t*0.7)*0.12. Cup geometry: saucer (cylinderGeometry [1.05,1.12,0.15,48] color #F7F3F0), saucer inner ring (torusGeometry [0.68,0.04,8,48] color #e0d8d2), cup body (cylinderGeometry [0.55,0.48,1.05,48] color #4B2E39), highlight band (torusGeometry [0.54,0.025,8,48] color #D4A373 metalness 0.4), rim (torusGeometry [0.54,0.07,12,48] color #7A4B5E), interior circle (color #1a0e14), handle (torusGeometry [0.32,0.07,8,24,Math.PI*1.2] at position [0.59,-0.05,0]). Three SteamWisp components at different positions and delays animate upward with opacity fade. X icon from lucide-react used in empty state UI. ProductsEmptyState.css handles centered full-section layout shown when no products match filters.

As a backend developer, implement FastAPI endpoints for the orders resource: GET /api/orders (admin list with filters: status, date range, search by id/customer; pagination; sorting), GET /api/orders/{id} (detail with line items), POST /api/orders (create order from cart), PUT /api/orders/{id}/status (admin update status: pending/processing/shipped/delivered/cancelled), GET /api/orders/user/{user_id} (user order history). SQLAlchemy Order model: id, user_id, status, total, subtotal, shipping, tax, discount, created_at, updated_at. OrderItem model: order_id, product_id, quantity, unit_price. Alembic migrations. Note: Frontend tasks depending on this API include OrdersTable (e23bd2f7), OrdersFilters (c4287d85), RecentOrders (16ec12e6), OrderConfirmationHero (fbde8971), OrderDetails (a6b0682b), ShippingInfo (2313871a), OrderSummary (6fb0ee5b).

As a backend developer, implement FastAPI endpoints for the cart resource: GET /api/cart (get current user's cart with line items and computed totals), POST /api/cart/items (add item: product_id, quantity), PUT /api/cart/items/{item_id} (update quantity), DELETE /api/cart/items/{item_id} (remove item), DELETE /api/cart (clear cart), POST /api/cart/promo (apply promo code — validate 'ember5' returns $5 discount). SQLAlchemy Cart model: id, user_id, created_at. CartItem model: cart_id, product_id, quantity, unit_price. PromoCode model: code, discount_amount, is_active. Computed fields: subtotal, shipping (free if subtotal>=50 else $5.99), tax (subtotal*0.0825), grand_total. Note: Frontend tasks depending on this API include CartItems (1ba982c4), CartSummary (a8baa451), CartHeader (0af67177), OrderSummary for Checkout (f6f82b24).

As a backend developer, implement FastAPI endpoint for product detail: GET /api/products/{id} (full product detail with fields: id, name, description, origin, roast_level, flavor_notes, price, stock_quantity, rating, review_count, image_url, is_active, specifications, brewing_notes). Also add GET /api/products/{id}/related (returns 4 related products by same roast_level or origin, excluding current product). Alembic migration for any new columns. Note: Frontend tasks depending on this API include ProductDetailHero (c32cb825), ProductInfo (c87a37f1), ProductGallery (b9a4951d), ProductSpecifications (faa975e9), RelatedProducts for ProductDetail (cbfabcf4), BraveFlavorProfile (e3dfb73b), ProductReviews (faf6072b).

As a backend developer, implement FastAPI authentication endpoints: POST /api/auth/login (accepts email+password, validates credentials, returns JWT access token and refresh token; admin role flag in payload), POST /api/auth/logout (invalidates refresh token), POST /api/auth/refresh (issues new access token from valid refresh token), GET /api/auth/me (returns current user profile from JWT). SQLAlchemy User model: id, email, password_hash, role (user/admin), created_at, last_login. JWT middleware dependency (get_current_user, require_admin) for protecting routes. Alembic migration for users table. Seed admin user (admin@roastedembar.com). Note: Frontend login form (5f47f876) depends on POST /api/auth/login. All admin dashboard/orders/reviews/products management endpoints depend on require_admin middleware.

As a frontend developer, implement the LoginContainer section for the Login page. This is the primary auth form section with a full-viewport layout. Integrates a React Three Fiber Canvas with an EmberParticles component: 40 floating ember particles using THREE.BufferGeometry with position, size, and color attributes; particles drift upward via useFrame animation loop (speed 0.15–0.45), resetting at y > 5.5, with sine-wave horizontal ripple (Math.sin(t * 0.7 + i * 0.3) * 0.0008); vertex colors from four palette ranges (warm amber, coral, gold, dark plum); pointsMaterial with AdditiveBlending, opacity 0.55, sizeAttenuation. The login form uses useState for email, password, showPassword, error, and loading states; includes Mail and Lock lucide icons as input prefix icons, Eye/EyeOff toggle for password visibility, AlertCircle for inline error display, and LogIn icon on the submit button. Form uses useRef for focus management. CSS file LoginContainer.css handles the split layout (3D canvas background left/center, form card right), glassmorphism card styling, and responsive collapse to stacked layout on mobile.

As a frontend developer, implement the LoginFooter section for the Login page. This is the shared Footer component (may already exist from the Landing page task 672cb0d2-c8e2-4db9-a5f7-1a537cf1da63). Renders a footer with ftr-footer class containing: ftr-bean-accent decorative div, brand block with coffee emoji logo linking to /Dashboard, tagline text 'Crafted for those who believe coffee should never taste burnt. Smooth, rich, and roasted to perfection.', and social links (Instagram, Twitter, Facebook) with inline SVG icons and aria-labels. Two link columns: shopLinks array (All Products, Shopping Cart, Checkout, Customer Reviews) and accountLinks array (Dashboard, My Orders, Order Confirmation, Sign In). Dynamic currentYear via new Date().getFullYear(). Uses Footer.css for layout. Verify the component already exists from Landing; if so, reuse Footer.jsx and Footer.css without duplication.

As a frontend developer, implement the ProductsPagination section for the Products page. Features a raw Three.js ember glow backdrop in mountRef container: OrthographicCamera(-1,1,1,-1), 40-particle BufferGeometry with Float32Array positions and sizes attributes, custom ShaderMaterial with AdditiveBlending and uniforms uTime/uColor1(#F25C54)/uColor2(#FFB84D)/uColor3(#D4A373). Vertex shader sets gl_PointSize = size * 280.0. Fragment shader uses smoothstep radial alpha, sin-based color mixing between uColor1/uColor2/uColor3, and exp(-d*4.5) glow addition. requestAnimationFrame loop increments uTime and renders; cleanup on unmount. useState tracks currentPage. useCallback wraps page change handlers. ChevronLeft/ChevronRight from lucide-react for prev/next. Page number buttons rendered from total page count. ProductsPagination.css handles centered layout, active page highlight, and button hover states.

As a frontend developer, implement the Navbar section for the Dashboard page. This shared component may already exist from Landing, Login, or Products pages. Uses useState for scrolled (threshold window.scrollY > 12) and drawerOpen (mobile drawer toggle with body overflow lock). NAV_ITEMS array maps 5 links (Dashboard, Products, Orders, Reviews, Cart) to anchor tags with nb-active class based on currentPath (window.location.pathname). Renders Coffee icon (lucide-react size=18) in nb-logo-mark div alongside nb-brand-name and nb-brand-tagline spans. Desktop nb-nav-links ul hidden on mobile. nb-actions row includes ShoppingCart icon link to /Cart and Menu/X hamburger toggling nb-mobile-drawer and nb-mobile-overlay divs. nb-scrolled class applies backdrop-filter blur on scroll. Mobile drawer has nb-drawer-header with brand repeat and X close button. CSS uses nb- prefix classes. Verify sections/Navbar.jsx exists before regenerating.

As a frontend developer, implement the shared Navbar component for the ProductDetail page. This component already exists from the Products page (task 52c6ed15-06e5-4842-8e3f-be58e7e542bf). It uses useState for scrolled/drawerOpen states, useEffect for scroll listener and body overflow lock, lucide-react icons (ShoppingCart, Menu, X, Coffee), NAV_ITEMS array with Dashboard/Products/Orders/Reviews/Cart links, active link detection via window.location.pathname, and a mobile drawer with overlay. Verify the existing Navbar.jsx imports correctly into the ProductDetail page layout without duplication.

As a backend developer, implement FastAPI endpoints for the checkout resource: POST /api/checkout (submit checkout: shipping_address, billing_address, contact fields, payment_method; validates cart, creates order, clears cart, returns order_id and confirmation number), GET /api/checkout/shipping-rates (returns shipping options and costs based on cart subtotal), POST /api/checkout/validate (validate form fields server-side before final submission). CheckoutRequest Pydantic model with ShippingAddress (name, street, city, state, zip, country), ContactInfo (email, phone), PaymentMethod (type: card/paypal/applepay, card fields). Returns OrderConfirmation with order_id, order_number (TRE-YYYY-XXXXX format), estimated_delivery. Note: Frontend tasks depending on this API include CheckoutForm (c96d9f02), CheckoutCTA (9f2091f1), OrderConfirmationHero (fbde8971).

As a backend developer, implement FastAPI endpoints for admin dashboard data: GET /api/admin/metrics (total_orders, total_revenue, new_customers, avg_order_value with trend percentages vs prior period), GET /api/admin/activity (time-series data for orders and revenue by day for last N days: ?days=7|14|30|90), GET /api/admin/recent-orders (last N orders with id, customer, total, status, date; supports search, sort, pagination). All endpoints require admin role JWT authorization. Compute trend by comparing first vs second half of selected period. Revenue aggregated from orders with status != cancelled. Note: Frontend tasks depending on this API include DashboardMetrics (a3a2ae1b), DashboardActivityChart (313b0029), RecentOrders (16ec12e6), DashboardWelcome (07c5aa16).

As a Tech Lead, verify the end-to-end integration between the Products page frontend (ProductsGrid, ProductsFilterBar, ProductsPagination, ProductsHero) and the backend GET /api/products endpoint. Ensure filter parameters (roast, origin, price range, flavor, in-stock) are correctly sent as query params, paginated responses render correctly in the grid, loading/error states display properly, and add-to-cart actions update Redux cart state. Confirm RTK Query cache invalidation on cart mutation. Depends on: ProductsGrid (9280368e), ProductsFilterBar (9ca2c516), backend_products_api, backend_global_state.

As a Tech Lead, verify the end-to-end integration between the NewsletterCTA section (c7afa4ca) and the backend POST /api/newsletter/subscribe endpoint. Ensure the idle→loading→success phase flow in NewsletterCTA triggers a real API call (replacing the current setTimeout mock), the email is validated client-side before submission, success/already-subscribed/error responses are handled gracefully with appropriate UI feedback, and rate-limit 429 responses show a friendly message. Also wire the Footer mini newsletter form (672cb0d2) to the same endpoint. Depends on: NewsletterCTA (c7afa4ca), Footer Landing (672cb0d2), backend_newsletter_api.

As a Tech Lead, verify the end-to-end integration between the Products page admin actions and the backend POST /api/products, PUT /api/products/{id}, DELETE /api/products/{id} endpoints. Ensure admin JWT token is sent in Authorization header for mutating requests, product creation/update form data matches the Product Pydantic schema, successful mutations invalidate the RTK Query products cache and refresh the ProductsGrid, and delete confirmation removes product from grid. Depends on: ProductsGrid (9280368e), backend_products_api, backend_global_state (b61c54bc), backend_auth_api.

As a frontend developer, implement the Sidebar section for the Dashboard page. Uses useState for isOpen (mobile drawer), isCollapsed (desktop collapse), and activePath (initialized from window.location.pathname, default '/Dashboard'). NAV_SECTIONS array has 3 groups — Main (Dashboard/Products/Orders with badge='3'/Reviews), Shopping (ProductDetail/Cart/Checkout/OrderConfirmation), Account (Login) — each item with lucide-react icon (LayoutDashboard, Package, ShoppingCart, Star, ShoppingBag, CreditCard, CheckCircle, LogIn). sb-hamburger button (Menu icon) toggles isOpen; sb-collapse-btn (ChevronLeft icon) toggles isCollapsed. sb-overlay div closes drawer on click. sb-brand shows Flame icon in sb-brand__icon with sb-brand__name text. useCallback wraps handleToggle, handleCollapse, handleOverlayClick, handleLinkClick. Body overflow locked when isOpen. sb-sidebar applies sb-sidebar--open and sb-sidebar--collapsed modifier classes. Active nav item uses sb-active CSS class. Responsive: fixed-width left panel on desktop, slide-in drawer on mobile below 768px. CSS uses sb- prefix.

As a frontend developer, implement the DashboardWelcome section for the Dashboard page. Features an EmberParticles 3D component via @react-three/fiber Canvas: 40 particles using Float32Array positions/velocities (useMemo), THREE.BufferGeometry with BufferAttribute, THREE.PointsMaterial (color '#D4A373', size 0.03, AdditiveBlending, transparent opacity 0.55). useFrame updates particle positions per-tick — particles drift upward (vel.y += 0.001-0.004), reset to y=-0.6 when exceeding y=0.7, x-bounce when |x|>1.2. formatDateTime() formats current date/time with weekday/month/day/hour via toLocaleDateString 'en-US'. useState(dateTime) updates every minute via setInterval in useEffect. STATS array renders 3 stat boxes (Total Orders '1,284' with ShoppingCart icon dw-stat-box--orders, Total Revenue '$48,920' with DollarSign dw-stat-box--revenue, New Customers '342' with Users dw-stat-box--customers). CSS uses dw- prefix classes.

As a frontend developer, implement the DashboardMetrics section for the Dashboard page. Features an EmberFlame 3D component via @react-three/fiber Canvas: two mesh refs (meshRef inner ember core sphereGeometry args=[0.35,32,32] with meshStandardMaterial color/emissive '#F25C54' emissiveIntensity=0.6, glowRef outer sphere args=[0.52,32,32] meshBasicMaterial color '#FFB84D' transparent opacity=0.25), plus two pointLights (color '#F25C54' and '#FFB84D'). useFrame animates scale via sin(t*3.2)*0.06, y position via sin(t*2.7)*0.08, and glow opacity via 0.22+sin(t*3.5)*0.08. METRICS array has 4 cards (Total Revenue '$48,920' DollarSign dm-card-icon--revenue trend up 12.5%, Total Orders '1,247' ShoppingBag trend up 8.3%, New Customers '328' Users trend up 18.7%, Avg. Order Value '$39.22' TrendingUp trend down 2.1%). ArrowUp/ArrowDown lucide icons render per trendDir. dm-section layout, dm-header with dm-title-accent Canvas wrapper, dm-card grid. CSS uses dm- prefix.

As a frontend developer, implement the DashboardActivityChart section for the Dashboard page. Registers Chart.js modules (CategoryScale, LinearScale, PointElement, LineElement, Filler, Tooltip, Legend). generateChartData(days) produces labels (month+day format), orders (random 12-47), revenue arrays for the selected period. computeSummary() derives totalOrders, totalRevenue, avgOrder, orderTrend (%), revTrend (%) by comparing first/second halves. useState(dateRange) defaults to '30', with dropdown options (7/14/30/90 days) using ChevronDown icon. useMemo regenerates chart data on dateRange change. Chart.js Line component (chartRef) renders two datasets (orders primary line '#D4A373', revenue secondary line '#F25C54') with area fill, custom tooltip, and tension=0.4. Download button (lucide Download icon) triggers chart export. EmberGlow 3D accent uses @react-three/fiber Canvas with Float from @react-three/drei: sphereGeometry args=[0.55,32,32] meshStandardMaterial emissive '#FFB84D' emissiveIntensity=1.4. Summary stat pills show totalOrders, totalRevenue, avgOrder with trend arrows. CSS uses dac- prefix.

As a frontend developer, implement the RecentOrders section for the Dashboard page. ORDERS array contains 12 hardcoded coffee order objects (id '#TR-28xx', customer name, total, status 'completed'|'pending'|'cancelled', date). PAGE_SIZE=6 for pagination. EmberGlow 3D component via @react-three/fiber useFrame: octahedronGeometry args=[0.65,0] meshStandardMaterial color '#D4A373' emissive '#FFB84D' emissiveIntensity=1.3, rotation.y += elapsedTime*0.5, x-axis sin oscillation, pulse scale via sin(elapsedTime*2.2)*0.1. StatusBadge component renders ro-badge ro-badge--{status} span with ro-badge-dot and STATUS_LABELS map. SortIcon renders ChevronDown (ro-sort-icon--active) based on sortKey/sortDir match. useState for searchQuery, currentPage, sortKey, sortDir, expandedRow. useMemo filters ORDERS by searchQuery (id or customer), then sorts by sortKey/sortDir, then paginates to PAGE_SIZE slice. Search input with Search lucide icon and X clear button. Column headers (Order ID, Customer, Total, Status, Date) are clickable for sort with ChevronDown/ChevronUp. ChevronLeft/ChevronRight pagination buttons. Inbox icon for empty state. ArrowRight for row detail expand. CSS uses ro- prefix.

As a frontend developer, implement the ReviewsQueue section for the Dashboard page. StarField 3D component renders 30 THREE.OctahedronGeometry (args=[0.3,0]) meshes in a circular arrangement via useMemo (angle-based radius 2.2-3.8, random y, scale 0.06-0.16, alternating colors '#D4A373'/'#FFB84D'/'#F25C54' with emissive). StarShape component renders individual OctahedronGeometry args=[0.22,0] with conditional filled/unfilled meshStandardMaterial color '#D4A373' vs '#c4c4c4'. StarRating3D computes star positions via useMemo ((i-(maxStars-1)/2)*0.48 spacing). ThreeStarRating wraps Canvas (camera fov=40 position z=1.2, dpr=[1,1.5]) with Suspense. useState for activeTab ('pending'|'approved'|'rejected'), searchQuery, selectedIds (Set). useMemo filters reviews by tab and searchQuery. Bulk action buttons (CheckCircle approve, XCircle reject, RotateCcw undo) operate on selectedIds. MessageSquareText icon for review count badge. Star icon for rating display. Individual review cards show customer name, product, rating (ThreeStarRating), review text, date, and approve/reject action buttons. CSS uses rq- prefix.

As a frontend developer, implement the QuickActions section for the Dashboard page. ACTIONS array defines 4 items (Add Product href=/Products PlusCircle icon, View Inventory href=/Products PackageSearch icon, Process Orders href=/Orders ClipboardCheck icon, Manage Reviews href=/Reviews Star icon) each with label and hint string. EmberParticles uses vanilla THREE.js (NOT @react-three/fiber) via useRef containerRef mounted in useEffect: creates Scene, PerspectiveCamera (fov=45, z=18), WebGLRenderer (alpha=true, antialias=true) appended to containerRef.current. 55 particles with Float32Array positions (22×10×8 spread) and vertexColors Float32Array using THREE.Color for colorEmber '#F25C54' (45%), colorAmber '#D4A373' (35%), colorHoney '#FFB84D' (20%). PointsMaterial (size=0.12, vertexColors, AdditiveBlending, opacity=0.55). per-particle speeds Float32Array (0.004-0.018). animate() RAF loop drifts particles upward, resets y when > height/2. ResizeObserver updates camera aspect and renderer size. Cleanup cancels animId, disposes geometry/material, removes DOM element. Action cards link to href with ChevronRight icon. CSS uses qa- prefix.

As a frontend developer, implement the Footer section for the Dashboard page. This shared component may already exist from Landing or Products pages (sections/Footer.jsx) — verify before regenerating. Renders ftr-footer with ftr-bean-accent decorative div. ftr-brand block contains ftr-logo (☕ emoji icon + 'The Roasted Ember' text), ftr-tagline paragraph, and ftr-social row with 3 inline SVG icon links (Instagram rect+path+line, Twitter path, Facebook path) each as ftr-social-link anchors with target=_blank rel=noopener. ftr-links-group contains two nav columns: shopLinks (All Products /Products, Shopping Cart /Cart, Checkout /Checkout, Customer Reviews /Reviews) and accountLinks (Dashboard /Dashboard, My Orders /Orders, Order Confirmation /OrderConfirmation, Sign In /Login). currentYear derived from new Date().getFullYear() for copyright. CSS uses ftr- prefix classes with bean-accent decorative element.

As a frontend developer, implement the ProductDetailHero section featuring a Three.js/R3F 3D coffee bean scene. Includes CoffeeBeanShape (custom SphereGeometry with per-vertex stretch/dimple math via THREE.MathUtils.smoothstep), MeshDistortMaterial (color #4B2E39, distort 0.25, speed 2), useFrame rotation (y += 0.004) and floating sin animation, SceneLights with directional amber/caramel lights and point light (#F25C54), AmbientParticles (40-point Float32Array cloud with AdditiveBlending, rotating via useFrame), Canvas camera at [0, 0.3, 4.5] fov 40. Wraps in Suspense. Also renders headline, subheadline, star rating display, ShoppingCart/Heart CTA buttons, and breadcrumb with ChevronRight. Uses lucide-react icons: Star, ShoppingCart, Heart, Leaf, Coffee, Scale, Timer.

As a frontend developer, implement the ProductGallery section with dual view modes: a 2D image carousel and a 3D interactive viewer. GALLERY_IMAGES array (5 items: front/back/beans/brew/packaging) each with color/accent/bgColor. ProductPlaceholder SVG renders a stylized coffee bag with rect/ellipse/path elements. CoffeeBeanModel uses R3F with two Sphere+MeshDistortMaterial meshes (main #4B2E39 distort 0.35, secondary #7A4B5E distort 0.3), OrbitControls from @react-three/drei. Uses useState for active image index, view mode toggle, fullscreen modal. Navigation via ChevronLeft/ChevronRight buttons. Icons: Coffee, Package, Eye, Maximize, ChevronLeft, ChevronRight, X, RotateCcw, ZoomIn, Camera, Box from lucide-react. useCallback for navigation handlers, useRef/useEffect for gesture support.

As a frontend developer, implement the ProductInfo section combining a decorative 3D coffee bean with product metadata. CoffeeBeanMesh uses useMemo to build a Float32Array of bezier-curve-based points (48 segments), groupRef with useFrame for sin/cos rotation (y = sin(t*0.3)*0.25+0.4, z = cos(t*0.4)*0.08, y position sin(t*0.6)*0.12). BeanScene Canvas at [0,0,3.5] fov 38 with alpha true. FLAVOR_NOTES array (6 items: Dark Chocolate/Hazelnut/Brown Sugar/Stone Fruit/Caramel/Citrus). AROMA_PROFILE array (5 entries with percentage values) rendered as horizontal bars. ROAST_DOTS array (4 levels: Light/Medium/Med-Dark/Dark) shown as interactive dot selector. Icons: MapPin, Flame, Coffee, Wind from lucide-react.

As a frontend developer, implement the ProductSpecifications section with an accordion-based spec table and decorative 3D bean. FloatingBean uses groupRef with useFrame sin/cos rotation (y sin(t*0.35)*0.35, z cos(t*0.28)*0.18, position.y sin(t*0.45)*0.18), two meshes: main sphereGeometry scaled [0.72,0.38,0.42] color #4B2E39, crease scaled [0.06,0.44,0.02] color #2E1D24. tableSpecs array (4 items: grind/brew/shelf/storage) with type 'chips' or 'text'. useState openIds object for accordion toggle state. toggleAccordion handler updates openIds. Chip items render as inline pill tags. Icons: Coffee, Droplets, Clock, Shield, ChevronDown, Info from lucide-react. Canvas camera [0,0,3.5] fov 40, dpr [1,1.5].

As a frontend developer, implement the BraveFlavorProfile section with an interactive 3D radar chart. FLAVOR_DIMENSIONS array (4 keys: acidity/body/sweetness/bitterness with colors #F25C54/#4B2E39/#FFB84D/#7D7D7D). FlavorRadar uses useMemo to compute radar points from polar angle (2π*i/count - π/2) scaled by value/100, shapePoints and basePoints as THREE.Vector3 arrays, surfaceGeometry built from BufferGeometry triangles (center + adjacent polygon vertices). Uses R3F Line from @react-three/drei for base ring and shape outline, Sphere for vertex dots, Html for axis labels. OrbitControls enabled. FLAVOR_NOTES array (4 items) with dim reference for color-coding. useState for hover/active dimension. Canvas with groupRef animation.

As a frontend developer, implement the ProductReviews section with review listing, filtering, and a decorative 3D element. REVIEWS array (6 items) with id/name/initials/date/rating/title/text/helpful/verified fields. STAR_BREAKDOWN array (5 star tiers with counts). FILTERS array ('All','5 star',...'1 star'). AVG_RATING computed from REVIEWS. useState for activeFilter and helpful vote tracking. useMemo to filter reviews by star rating. Star rendering maps 1-5 with filled/empty Star icons. ThumbsUp button with click handler increments helpful count per review id. Edit3 and Flag icons for review actions. R3F Canvas with useFrame decorative bean animation. Verified badge display conditional on review.verified. Pagination or show-more for > 3 reviews.

As a frontend developer, implement the RelatedProducts section as a horizontally scrollable carousel with 3D accent. relatedProducts array (4 items: golden-hour/velvet-dusk/ember-dark/morning-dew) each with id/name/origin/roast/notes/price/features/color. CoffeeBeanMesh uses useEffect with requestAnimationFrame loop (rotation.y += 0.006, rotation.z += 0.003) for autonomous animation (no useFrame, manual RAF). Bean has sphereGeometry #D4A373, crease cylinderGeometry #B8895A, highlight dot #F7D5A8. CoffeeBeanCanvas wraps in R3F Canvas camera [0,0.08,2.1] fov 40. Product cards show name/origin/roast badge/notes/price/features list. useRef for carousel scroll container, ChevronLeft/ChevronRight nav buttons, useCallback for scroll handlers. Eye icon for quick-view modal. X to close modal. Leaf/Droplets/Coffee icons for feature badges.

As a frontend developer, implement the ProductDetailCTA section combining add-to-cart controls, wishlist, sharing, and a 3D bean accent. CoffeeBeanShape uses Float from @react-three/drei (speed 1.8, rotationIntensity 0.35, floatIntensity 0.5), group scaled [0.85,1.15,0.55] with sphereGeometry (#6B3A2A roughness 0.45) and torusGeometry arc for crease. ThreeCoffeeBean wraps in Canvas camera [0,0,4.5] fov 32, alpha true, dpr [1,1.5]. SharePopover component with useState copied, navigator.clipboard.writeText for link copy, window.open for Facebook/Twitter share and sms: URI for SMS. useCallback for handleCopy. Quantity selector with Minus/Plus buttons and useState count. Add-to-cart button with ShoppingCart icon. Heart wishlist toggle. Share2 icon triggers popover. Truck icon for delivery info. Check icon for confirmation state. LinkIcon and MessageCircle in share options.

As a frontend developer, implement the shared Footer component for the ProductDetail page. This component already exists from the Products page (task 25a12332-abe6-413b-8520-09530d8f8357). Footer renders shopLinks (All Products/Cart/Checkout/Reviews) and accountLinks (Dashboard/Orders/OrderConfirmation/Login) as two nav columns, ftr-bean-accent decorative div, brand logo with ☕ emoji and tagline, social links (Instagram/Twitter/Facebook) as inline SVG icons, and currentYear copyright via new Date().getFullYear(). Verify the existing Footer.jsx imports correctly into the ProductDetail page without duplication.

As a frontend developer, implement the shared Navbar component for the Cart page. This component already exists from previous pages (Dashboard, ProductDetail). It uses useState for scrolled/drawerOpen state, useEffect for scroll listener (window.scrollY > 12 threshold) and body overflow lock when mobile drawer opens. Renders a sticky nav with Coffee icon (lucide-react), brand name 'The Roasted Ember' + tagline, NAV_ITEMS array mapping 5 links (Dashboard, Products, Orders, Reviews, Cart), ShoppingCart icon button linking to /Cart, hamburger Menu/X toggle, mobile overlay div, and slide-in mobile drawer. Active link detection via window.location.pathname comparison. Import from sections/Navbar.jsx if already generated.

As a frontend developer, implement the OrdersHeader section for the Orders page. This section renders a page header with a breadcrumb nav (Dashboard / Orders), a 3D EmberGlow sphere using @react-three/fiber Canvas with a custom useEffect animation loop that drives uTime uniform and mesh rotation via requestAnimationFrame, ambient and directional lights, and a meshStandardMaterial with emissive #F25C54 and color #D4A373. The right side contains a 'New Order' action button with a Lucide Plus icon. The component uses useMemo for shader uniforms, useRef for the mesh, and useEffect for the animation loop cleanup. CSS class oh-root wraps the layout. Note: Navbar shared component may already exist from a previous page.

As a frontend developer, implement the OrdersFilters section for the Orders page. This section contains a Three.js EmberCanvas background particle system using WebGLRenderer (not react-three-fiber) with 40 floating particles in PointsMaterial color 0xD4A373 and 8 larger glow points in 0xF25C54 with AdditiveBlending, all rendered via a raw requestAnimationFrame loop. The filter bar includes: a Search input with Lucide Search icon, a Status dropdown with ChevronDown using ORDER_STATUSES array (All Statuses, Pending, Processing, Shipped, Delivered, Cancelled), a Calendar date range picker with Lucide Calendar icon, a Download export button, and an X clear-filters button. Uses useState for filter state, useRef for the canvas element, useEffect for Three.js setup and cleanup, and useCallback for event handlers. CSS class structure uses THREE_EMBER_STYLE for absolute positioning of the canvas background.

As a frontend developer, implement the OrdersTable section for the Orders page. This section renders an orders data table with a Three.js ember particle system background. The static ORDERS array contains 8 sample orders (TRE-1035 through TRE-1042) with fields: id, customer, date, total, status. The table includes sortable columns with inline SVG icons (IconChevronUp, IconChevronDown) for sort direction indicators. Each row renders a status badge using STATUS_LABELS map (pending, processing, completed, cancelled) with distinct CSS classes. Row action buttons use inline SVG IconEye (view), IconEdit (edit), and IconX (cancel/delete). An empty state uses IconPackage SVG. The Three.js background uses BufferGeometry with position attributes for ember particles. Uses useState for sortField/sortDirection, useEffect for Three.js lifecycle, useRef for canvas, and useMemo for sorted order data derivation. CSS file OrdersTable.css handles table layout, badge colors, and hover states.

As a frontend developer, implement the OrdersPagination section for the Orders page. This section renders a pagination control bar with an @react-three/fiber Canvas background using EmberParticles — a points mesh with EMBER_COUNT=28 particles that uses useFrame for animation, rising vertically (posArr[i*3+1] += velocities[i]) and resetting when y > 0.7. Particles use bufferAttribute for position, color, and size with vertexColors PointsMaterial at opacity 0.7 and AdditiveBlending. The buildPageRange function generates smart page ranges with ellipsis ('...') for large page counts, showing 7 pages max. The pagination UI renders: Previous button, numbered page buttons (with ellipsis spans for gaps), and Next button. Uses useState for currentPage, useMemo for the buildPageRange result derived from current page and total pages. Camera positioned at [0,0,2.2] with fov 42, dpr clamped to [1,1.5]. CSS class OrdersPagination.css positions the Canvas absolutely behind the controls.

As a frontend developer, implement the Navbar section for the Reviews page. This component already exists from previous pages — reuse the existing Navbar.jsx and Navbar.css without modification. The Navbar uses lucide-react icons (ShoppingCart, Menu, X, Coffee), manages scrolled state via useEffect listening to window.scrollY > 12, and drawerOpen state for mobile navigation. Features a sticky nav with .nb-scrolled class on scroll, desktop nav links (Dashboard, Products, Orders, Reviews, Cart) with active state detection via window.location.pathname, a cart icon button, and a mobile slide-out drawer with overlay. The Reviews nav link should appear active on this page.

As a Tech Lead, verify the end-to-end integration between the Login page frontend (LoginContainer 5f47f876) and the backend POST /api/auth/login endpoint. Ensure form submission sends email/password JSON body, successful response stores JWT token in localStorage/Redux authSlice, failed login (401) displays inline error via AlertCircle, loading spinner shows during request, and successful login redirects to /Dashboard. Verify admin role in JWT payload gates access to admin-only pages (Dashboard, Orders, Reviews admin queue). Depends on: LoginContainer (5f47f876), backend_auth_api.

As a frontend developer, implement the CartHeader section for the Cart page. Uses @react-three/fiber Canvas with camera at [0, 0.3, 5.5] fov 45, dpr [1, 1.5], alpha true. Renders a BeanCluster group of 5 CoffeeBean meshes arranged in a circular pattern using angle/radius math; each CoffeeBean uses sphereGeometry with MeshDistortMaterial (color #4B2E39, distort 0.4, speed 1.5) plus an inner detail mesh for the bean crease. useFrame drives per-bean rotation (y += speed*0.008, x += speed*0.003) and sinusoidal float on y-axis; BeanCluster group slowly rotates (y += 0.0015). Section also renders breadcrumb nav (Home / Cart) with aria-label, item count badge, page title, and subtitle. Hardcoded itemCount=3 — connect to real cart state when available.

As a frontend developer, implement the CartItems section for the Cart page. Manages INITIAL_ITEMS array of 4 coffee products (Sumatra Mandheling, Ethiopian Yirgacheffe, Ember Signature Blend, Colombian Supremo) via useState. Uses useState for removingIds Set to trigger CSS fade-out animation before splice (300ms timeout). handleQtyChange increments/decrements quantity (min 1) per item id; handleRemove adds id to removingIds then filters items after 300ms. Renders a decorative @react-three/fiber Canvas (160x160px) in the aside with Float-wrapped CoffeeBean3D using two additional smaller sphere meshes at offset positions, all semi-transparent. Main content renders item cards per INITIAL_ITEMS: product image placeholder, name, variant, Minus/Plus quantity buttons (lucide-react), Trash2 remove button, Edit3 edit link, and line total via fmtUSD(). ArrowLeft 'Continue Shopping' link and item count header. Shows empty Package icon state when items.length === 0. On mobile (< 768px): aside 3D canvas hidden, cards stack vertically.

As a frontend developer, implement the RelatedProducts section for the Cart page. Renders a horizontal scrollable or grid carousel of 6 product cards from a local `products` array (Velvet Dusk Blend, Golden Hour Single Origin, Ember Dark Roast, Morning Dew Decaf, Wild Ember Espresso, Amber Sunrise) each with: id, name, desc, roast badge, rating (Star icons from lucide-react), reviewCount, price, color, accent. Each card features a @react-three/fiber Canvas with BeanModel (Sphere from @react-three/drei, flattened scale [1, 0.55, 1.15] using productColor, plus small accent Sphere) and OrbitControls. CoffeeBeanCanvas has a useEffect that cycles beanColor state through 5 colors every 3200ms via setInterval. Card actions use useState per-card for added-to-cart state; clicking Plus button transitions to Check icon with green feedback. Star rating display maps Math.floor(rating) filled stars plus partial. Section heading 'You May Also Like'. Mobile: 1-column stack; tablet: 2-col grid; desktop: 3-col grid.

As a frontend developer, implement the shared Footer component for the Cart page. This component already exists from previous pages (Dashboard, Products, ProductDetail) — import from sections/Footer.jsx if available. Renders ftr-footer with a decorative ftr-bean-accent div, brand section (☕ logo icon + 'The Roasted Ember' text + tagline paragraph + social links for Instagram/Twitter/Facebook with inline SVG icons). Two link columns: 'Shop' (All Products /Products, Shopping Cart /Cart, Checkout /Checkout, Customer Reviews /Reviews) and 'Account' (Dashboard /Dashboard, My Orders /Orders, Order Confirmation /OrderConfirmation, Sign In /Login). Footer bottom bar with dynamic currentYear via new Date().getFullYear() and copyright text.

As a frontend developer, implement the ReviewsHeader section for the Reviews page. Uses a useRef canvasRef with a raw Three.js scene (not @react-three/fiber) — creates a PerspectiveCamera at z=8, WebGLRenderer with alpha:true. Spawns EMBER_COUNT=40 SphereGeometry(0.06) meshes using MeshBasicMaterial with warm colors [#D4A373, #FFB84D, #F25C54, #F7A072] at random opacities 0.35–0.80. Each ember has userData fields: speedY, speedX, amplitude, phase, baseY. Animation loop moves embers upward, resets them to y=-3.2 when they exceed y=3.2, and pulses opacity via sin. Includes ResizeObserver for canvas resizing and full cleanup on unmount. Hero content overlays the canvas with a security badge, headline with accent span, animated divider, subheadline, and trust indicators row with lucide-react Star icons for the 5-star rating display.

As a frontend developer, implement the ReviewsFilters section for the Reviews page. Contains a @react-three/fiber Canvas with a CoffeeParticles component using useRef groupRef and useFrame for 28 floating sphere particles in colors #D4A373, #7A4B5E, #4B2E39 that drift with sin/cos animation wrapping at boundaries ±1.8y / ±7x. Main filter UI manages 5 state hooks: productOpen (dropdown), selectedProduct (from PRODUCTS array of 7 items including 'All Products'), rating (0–5 star click filter with toggle-off behavior), sortOpen (dropdown), selectedSort (from SORT_OPTIONS: newest/helpful/highest), and search string. Product and sort controls are custom dropdowns with ChevronDown icons. Star rating filter renders 5 interactive Star icons from lucide-react. Search input includes a Search icon and X clear button shown conditionally. Active filters are shown as dismissible chips. Responsive layout collapses filter row on mobile.

As a frontend developer, implement the ReviewsStats section for the Reviews page. Uses @react-three/fiber Canvas with a StarScene component containing 5 FloatingStar meshes. Each FloatingStar creates a THREE.Shape star polygon via createStarShape(outerR=0.4, innerR=0.15, pts=5), extruded with bevel (depth:0.08, bevelThickness:0.04), colored with MeshStandardMaterial using emissive glow (emissiveIntensity:0.25) in colors #FFB84D, #D4A373, #F25C54. useFrame animates rotation.z/x and y-position bobbing per star's rotSpeed, bobSpeed, bobAmp, delay props. Scene has ambientLight(0.55), directionalLight, and two pointLights (#FFB84D, #F25C54). HTML overlay renders: overall rating (e.g. 4.6), total review count, DISTRIBUTION array of 5 star rows with animated progress bars and counts [687, 312, 142, 68, 38], plus three stat cards using lucide-react icons (MessageSquare, Star, ThumbsUp) showing aggregate metrics.

As a frontend developer, implement the ReviewsCTA section for the Reviews page. Contains a @react-three/fiber Canvas with two 3D element types: (1) CoffeeBean components — each uses a custom THREE.Shape created with bezierCurveTo calls to form an elongated bean silhouette (w=0.5, h=0.82), extruded with bevel (depth:0.15), wrapped in @react-three/drei Float for gentle floating, with useFrame for additional rotation.y/x and sin-based y drift. 8 beans instantiated with random positions, scales 0.4–1.1, and coffee-brown colors ['#6B3A2E','#4a2c2c','#8B5E3C','#5C3317','#3E1F0D']. (2) AmbientParticles — 18 sphere meshes in a group that rotates slowly (+=0.0004 per frame) in #D4A373 at 0.25 opacity. HTML CTA overlay includes: section headline, subheadline, primary CTA button with ArrowRight icon and gradient background, secondary link, and trust badges using lucide-react (Star, Feather, Heart) icons.

As a frontend developer, implement the Footer section for the Reviews page. This component may already exist from previous pages (ProductDetail, Cart, Orders) — reuse Footer.jsx and Footer.css without modification. The footer renders a .ftr-bean-accent decorative element, brand section with coffee emoji logo linking to /Dashboard, tagline text, and three social icon links (Instagram, Twitter, Facebook) using inline SVG paths. Two link columns: shopLinks array (All Products, Shopping Cart, Checkout, Customer Reviews) and accountLinks array (Dashboard, My Orders, Order Confirmation, Sign In). Footer bottom shows dynamic currentYear via new Date().getFullYear(). CSS uses ftr- prefix namespace.

As a frontend developer, implement the shared Navbar section for the Checkout page. This component may already exist from previous pages (Cart, Reviews). It uses useState for scrolled and drawerOpen states, useEffect for scroll listener and body overflow lock, NAV_ITEMS array with Dashboard/Products/Orders/Reviews/Cart links, lucide-react icons (ShoppingCart, Menu, X, Coffee), nb-navbar/nb-scrolled CSS classes for scroll-aware styling, a mobile drawer overlay with nb-mobile-overlay/nb-open toggling, and active link detection via window.location.pathname. Verify the shared Navbar component is wired into the Checkout page layout.

As a Tech Lead, verify the end-to-end integration between Orders page frontend (OrdersTable, OrdersFilters, OrdersPagination, OrdersHeader) and the backend /api/orders endpoints. Ensure search, status filter, and date range filters are sent as query params to GET /api/orders, sortable columns map to sort_field/sort_dir query params, status updates from admin actions call PUT /api/orders/{id}/status, pagination fetches correct page slices, and RecentOrders in Dashboard reflects the same data source. Verify order detail view fetches GET /api/orders/{id} with full line items. Depends on: OrdersTable (e23bd2f7), OrdersFilters (c4287d85), RecentOrders (16ec12e6), backend_orders_api.

As a Tech Lead, verify the end-to-end integration between Dashboard page frontend (DashboardMetrics, DashboardActivityChart, DashboardWelcome) and the backend /api/admin/metrics and /api/admin/activity endpoints. Ensure DashboardMetrics fetches live total_revenue, total_orders, new_customers, avg_order_value with trend percentages; DashboardActivityChart generates chart data from the time-series API response for the selected date range (7/14/30/90 days); DashboardWelcome stats reflect real counts. Verify admin JWT token is sent in Authorization header and 401 redirects to Login. Depends on: DashboardMetrics (a3a2ae1b), DashboardActivityChart (313b0029), DashboardWelcome (07c5aa16), backend_dashboard_api.

As a Tech Lead, verify the end-to-end integration between the ProductDetail page frontend (ProductDetailHero, ProductInfo, ProductGallery, ProductSpecifications, ProductDetailCTA, RelatedProducts, ProductReviews) and the backend GET /api/products/{id} and GET /api/products/{id}/related endpoints. Ensure product data (name, origin, roast_level, flavor_notes, price, rating) populates all sections from the API, add-to-cart action from ProductDetailCTA updates Redux cartSlice and calls POST /api/cart/items, related products carousel renders from API response, and ProductReviews section loads from GET /api/reviews?product_id={id}. Depends on: ProductDetailHero (c32cb825), ProductDetailCTA (0b1a2a26), ProductReviews (faf6072b), backend_product_detail_api, backend_cart_api, backend_reviews_api.

As a frontend developer, implement the CartEmpty section for the Cart page — displayed when the cart has zero items. Uses @react-three/fiber Canvas with Float, SoftShadows, and Environment from @react-three/drei. Renders a 3D Mug group (useRef groupRef) with: cylinderGeometry body (args [0.55, 0.48, 0.9, 48], color #F7F3F0), torusGeometry rim highlight (color #D4A373), bottom ring torus (color #E8E0D8), partial torus handle (Math.PI*0.8 arc), and inner dark disc (color #4B2E39) to show emptiness. Mug group uses useFrame for gentle sinusoidal sway (rotation.y = sin(t*0.35)*0.3, rotation.x = sin(t*0.28)*0.08 - 0.12). Steam particle system uses useMemo to generate 40 particles in Float32Array, distributed in circular radius ≤ 0.28 above the mug rim, animated per-frame (y drift upward, x sinusoidal wobble, reset when y > threshold). Accompanying UI: 'Your cart is empty' headline, subtext, and 'Browse Products' CTA button linking to /Products.

As a frontend developer, implement the CartSummary section for the Cart page — the order summary sidebar/panel. Contains a decorative @react-three/fiber Canvas rendering EmberField: 60 points particles in Float32Array with per-particle colors in warm orange/red range (RGB approx 0.95, 0.36–0.61, 0.2–0.3). Uses useEffect (not useFrame) with requestAnimationFrame loop for particle animation — y-axis sinusoidal drift, z-axis cosine drift, vertical wrapping at ±1.5 bounds. pointsMaterial uses THREE.AdditiveBlending, vertexColors, depthWrite false, opacity 0.7. UI layer includes: subtotal line items, shipping/tax rows, PromoBadge component (shows applied promo code string, discount value, onRemove handler), promo code input field with apply button, order total, and 'Proceed to Checkout' primary CTA button. useState manages promoCode input string and applied promo state. On mobile (< 768px): summary stacks below cart items, full width.

As a frontend developer, implement the ReviewsGrid section for the Reviews page. Uses raw Three.js (not fiber) for a background canvas. Renders REVIEWS array of 8+ review objects each with: id, reviewer, initials, rating(1-5), date, product name, title, text, helpfulCount. Avatar displays initials with gradient backgrounds from AVATAR_COLORS array of 8 gradients (dark coffee/mauve tones). Each review card shows: star rating row (filled/empty stars), verified badge, product label, review title and body text, helpful count with ThumbsUp button (lucide-react) managing per-card voted state, and Flag icon for reporting. Cards use CSS Grid layout, collapse to single column on mobile. Implements useCallback and useEffect for scroll-based lazy loading or intersection observer for card entrance animations. State includes helpfulVotes map keyed by review id and flagged set.

As a frontend developer, implement the CheckoutProgressBar section for the Checkout page. This section renders a three-step progress tracker (Cart, Shipping, Payment) using lucide-react icons (ShoppingCart, Package, CreditCard, Check). Each step has a statusClass of completed/active/pending driven by a hardcoded currentStep=1 value. An embedded @react-three/fiber Canvas renders a rotating 3D CoffeeBean composed of two hemisphere meshes (color #4B2E39 and #6A4653) with a box crease mesh (color #2E2E2E), animated via useFrame incrementing rotation.y and rotation.x each delta. The BeanScene uses camera position [0, 0.15, 2.2] with fov 28, alpha transparency, and three-point lighting. chpb-progress, chpb-track, chpb-step, chpb-step-icon, chpb-check-badge CSS classes drive layout and state styling.

As a frontend developer, implement the CheckoutForm section for the Checkout page. This is a large, stateful form using useState and useRef with three field groups: SHIPPING_FIELDS (8 fields including text inputs and select dropdowns for US_STATES and COUNTRIES), CONTACT_FIELDS (email, phone), and BILLING_FIELDS. Validation is handled via useCallback. lucide-react icons (MapPin, Mail, Phone, AlertCircle) decorate field labels. A decorative @react-three/fiber Canvas renders CoffeeBean3D — a sphereGeometry scaled [1.25, 0.75, 0.45] in color #4B2E39, animated via useFrame with rotation.y driven by elapsedTime * 0.5 and rotation.z oscillating with Math.sin. CSS classes (cf-root, cf-section, cf-field, cf-error) style the form layout. Countries array includes US, CA, GB, AU, DE, FR, JP. Full US_STATES array of 50 states populates the state dropdown.

As a frontend developer, implement the PaymentMethod section for the Checkout page. This section uses useState to track selected method (card/paypal/applepay) and credit card field values (cardholder, cardNumber, expiry, cvv). PAYMENT_OPTIONS array maps to CreditCard, Wallet, Smartphone lucide-react icons. Card number input is formatted into groups of 4 digits via handleCardNumber using regex replace and .match(/.{1,4}/g). An @react-three/fiber Canvas renders 4 randomised CoffeeBean instances, each wrapped in @react-three/drei Float (speed 1.2, rotationIntensity 0.3, floatIntensity 0.4). Each CoffeeBean is built from two hemisphere sphereGeometry halves at ±[0.14,0,0] in color #5A3844 plus a box crease mesh. useMemo generates stable random positions/rotations/scales. A Shield icon displays a security badge. CSS classes pm-root, pm-option, pm-card-fields, pm-security-badge drive layout.

As a frontend developer, implement the OrderSummary section for the Checkout page. This section displays a static ORDER_ITEMS array (Ethiopian Yirgacheffe ×2 @$18.99, Colombian Supremo ×1 @$16.99, Sumatra Mandheling ×1 @$17.99) with per-item SVG coffee cup icons using item.color (#D4A373, #7A4B5E, #4B2E39). useState manages promoCode and promoApplied; handleApplyPromo checks for code 'ember5' to apply a $5 discount. Totals computed as subtotal, shipping ($0 if subtotal>=50 else $5.99), tax (subtotal * 0.0825), discount, and grandTotal. A @react-three/fiber Canvas header renders CoffeeBeanMesh (sphereGeometry scaled [0.7,0.9,0.5] in #4B2E39, useFrame rotating rotation.y by delta*0.8 and rotation.z by delta*0.3). Camera at [0,0,2.8] fov 42 with ambient and directional lighting. CSS classes os-root, os-header, os-bean-canvas, os-items, os-item, os-totals, os-promo drive layout.

As a frontend developer, implement the shared Footer section for the Checkout page. This component may already exist from previous pages (Cart, ProductDetail, Reviews). It renders two link column groups: shopLinks (All Products, Shopping Cart, Checkout, Customer Reviews) and accountLinks (Dashboard, My Orders, Order Confirmation, Sign In). Includes brand logo with ☕ emoji, tagline copy, and three social icon SVGs (Instagram rect/circle, Twitter path, Facebook path) as anchor tags with target=_blank. A decorative ftr-bean-accent div is rendered aria-hidden. currentYear computed via new Date().getFullYear(). CSS classes ftr-footer, ftr-inner, ftr-brand, ftr-logo, ftr-social, ftr-links-group, ftr-social-link drive layout. Verify shared Footer is wired into the Checkout page.

As a frontend developer, implement the Navbar section for the OrderConfirmation page. This shared component (may already exist from previous pages) uses useState for scrolled and drawerOpen states, useEffect for scroll listener and body overflow lock, and renders a sticky nav with Coffee icon (lucide-react), brand name 'The Roasted Ember', NAV_ITEMS links (Dashboard, Products, Orders, Reviews, Cart), ShoppingCart icon button, and a hamburger Menu/X toggle. Includes a mobile overlay and slide-in drawer with the same nav links. Active link detection via window.location.pathname. CSS classes: nb-navbar, nb-scrolled, nb-inner, nb-brand, nb-logo-mark, nb-nav-links, nb-actions, nb-cart-btn, nb-menu-toggle, nb-mobile-overlay, nb-mobile-drawer.

As a frontend developer, implement the ReviewsPagination section for the Reviews page. Contains a @react-three/fiber Canvas backdrop with EmberParticles component using a single points mesh with BufferGeometry. Builds Float32Array buffers for positions (count=22), colors (warm reds/ambers/tans), sizes, and speeds. useFrame animates y-position upward with wrap at ±1.4, and x-drift via sin. PointsMaterial uses vertexColors, THREE.AdditiveBlending, depthWrite:false. Pagination logic: TOTAL_ITEMS=89, ITEMS_PER_PAGE=6, TOTAL_PAGES=15. getVisiblePages() function builds visible page array with ellipsis tokens ('ellipsis-start', 'ellipsis-end') for ranges beyond 7 pages. useState for currentPage. Renders prev/next ChevronLeft/ChevronRight buttons (lucide-react) disabled at boundaries, numbered page buttons with active styling, and ellipsis indicators. Shows 'Showing X–Y of 89 reviews' text.

As a frontend developer, implement the CheckoutCTA section for the Checkout page. This section features a full-width CTA button area with a @react-three/fiber Canvas background rendering two particle systems: EmberParticles (14 spheres at ring positions, animated via useFrame with per-particle sine/cosine drift and pulsing opacity between 0.18–0.46 using colors #F25C54, #D4A373, #FFB84D) and CoffeeBeanShapes (6 extruded THREE.Shape beans using bezierCurveTo paths with configurable rotSpeed and floatSpeed). OrbitControls is imported from @react-three/drei. useState and useRef manage button interaction state. useEffect and useCallback manage particle lifecycle. CSS classes chcta-root, chcta-canvas, chcta-content, chcta-btn drive the overlay layout with the 3D background behind the CTA.

As a frontend developer, implement the OrderConfirmationHero section using @react-three/fiber Canvas with a FloatingBeans 3D component. FloatingBeans uses useMemo to generate 18 bean objects with random positions, rotations, speeds, scales, and phases; useFrame animates each bean's y-position and rotation with sine waves via clock.elapsedTime. BeanScene renders the Canvas with ambientLight, two pointLights (orange #FFB84D and red #F25C54), and FloatingBeans. The hero displays a Check icon (lucide-react, size=40) inside a circular badge, h1 'Order Confirmed!', static order number 'TRE-2024-08371', dynamic date via toLocaleDateString, and a thank-you message paragraph. CSS classes: och-hero, och-canvas-bg, och-inner, och-check-wrapper, och-check-circle, och-title, och-order-number, och-order-date, och-message.

As a frontend developer, implement the OrderSummary section with a @react-three/fiber Canvas embedding a CoffeeBeanShape mesh. CoffeeBeanShape uses useMemo to build a deformed THREE.SphereGeometry (squeeze/flatten via position attribute loop) with meshStandardMaterial (color #5A3A2E). useFrame rotates the bean on y and x axes. BeanCanvas wraps the Canvas in os-coffee-canvas-wrap div. Static summaryData object contains 3 line items (Ethiopian, Cold Brew, Signature Roast), subtotal $65.96, shipping $5.99, tax $5.76, total $77.71, and payment method 'Visa ending in 4242'. Component renders os-section > os-card with header (bean canvas + title + 'Confirmed' badge), body rows for items/shipping/tax, a divider, total row, and CreditCard icon payment row. fmt() helper formats to $XX.XX. CSS classes: os-section, os-card, os-header, os-header-left, os-coffee-canvas-wrap, os-header-title, os-header-badge, os-body, os-row, os-label, os-value, os-label-muted, os-value-muted.

As a frontend developer, implement the OrderDetails section with a complex @react-three/fiber scene and detailed product line items. CoffeeBeanMesh uses useMemo to build a procedural THREE.SphereGeometry with stretchX/stretchZ deformation and center indent per vertex, rendered with meshStandardMaterial (color #5C3A2E). BeanScene composes lighting (ambientLight 0.6, two directionalLights including warm #D4A373) around the bean mesh. orderItems array has 5 products: Ethiopia Yirgacheffe (2x$18.99), Sumatra Mandheling (1x$16.49), Colombian Supremo (3x$15.99), Brazilian Santos (1x$14.49), Ember Signature (2x$17.99). Each item has a custom SVG coffee icon thumbnail. useState tracks hover state per row. formatCurrency helper renders $XX.XX values. Section renders a table/list of items with quantity, unit price, and line total. CSS imports OrderDetails.css.

As a frontend developer, implement the ShippingInfo section which combines a raw Three.js imperative canvas (ShippingBeanCanvas via useRef + useCallback setup) with React address/tracking UI. The Three.js setup builds a scene with two bean ellipsoid meshes (left/right at ±0.28 x-offset, scaled 0.6×0.72×0.5), a TorusGeometry crease, AmbientLight (#4B2E39), DirectionalLight key (#D4A373) and fill (#7A4B5E), animates via requestAnimationFrame. SHIPPING_ADDRESS and BILLING_ADDRESS constants (Alex Thompson, 1427 Roastery Lane, Portland OR 97201). DELIVERY object has estimatedDate 'May 26 2026', method string, and progressPct 35. TRACKING_NUMBER 'TRE-2026-4298-1A7B' with useState for clipboard copy (Clipboard/ClipboardCheck icons toggle). Lucide icons used: MapPin, CreditCard, Truck, Clipboard, ClipboardCheck, Pencil, Package. Renders shipping address card, billing address card, delivery progress bar at 35%, and tracking number with copy-to-clipboard interaction. CSS imports ShippingInfo.css.

As a frontend developer, implement the NextSteps section with a @react-three/fiber Canvas featuring CoffeeBeanModel. CoffeeBeanModel uses useFrame to rotate y by 0.003/frame, oscillate x via sin(elapsedTime*0.5)*0.15, and float y via sin(elapsedTime*0.8)*0.15. The mesh uses @react-three/drei Sphere (args [1.1,32,32]) with MeshDistortMaterial (color #4B2E39, distort 0.35, speed 1.2, emissive #1a0f14) plus a child TorusGeometry crease (args [1.05,0.06,16,32,Math.PI]) in color #7A4B5E. Section renders ns-bean-scene Canvas (camera pos [0,0.3,4.5] fov 35), heading 'What's Next?', email confirmation notice with Mail icon and hardcoded customer@example.com, and action cards with icons: Truck (Track Order), ShoppingBag (Continue Shopping), Headphones (Customer Support), BookOpen (Coffee Guide), each with ArrowRight chevron. CSS classes: ns-section, ns-bean-scene, ns-inner, ns-heading, ns-email-notice, ns-email-body, ns-email-title, ns-email-detail, ns-actions, ns-action-card, ns-card-accent, ns-card-icon-row, ns-card-icon, ns-card-title.

As a frontend developer, implement the Footer section for the OrderConfirmation page. This shared component (may already exist from previous pages — check sections/Footer.jsx) renders a footer with ftr-bean-accent decorative div, brand section (☕ logo, tagline 'Crafted for those who believe coffee should never taste burnt'), three social icon links (Instagram, Twitter, Facebook as inline SVGs with aria-labels), two link columns: Shop (All Products, Shopping Cart, Checkout, Customer Reviews) and Account (Dashboard, My Orders, Order Confirmation, Sign In). Dynamic currentYear via new Date().getFullYear(). CSS classes: ftr-footer, ftr-bean-accent, ftr-inner, ftr-brand, ftr-logo, ftr-logo-icon, ftr-logo-text, ftr-tagline, ftr-social, ftr-social-link, ftr-links-group.

As a Tech Lead, verify the end-to-end integration between Cart page frontend (CartItems, CartSummary, CartHeader, RelatedProducts) and the backend /api/cart endpoints. Ensure add-to-cart from ProductsGrid/FeaturedProducts updates Redux cartSlice and persists to backend, quantity changes and item removal sync to API and local state, promo code 'ember5' calls POST /api/cart/promo and reflects $5 discount in CartSummary totals, and cart item count in Navbar reflects Redux state. Confirm cart persists across page refresh via localStorage. Depends on: CartItems (1ba982c4), CartSummary (a8baa451), backend_cart_api, backend_global_state.

As a Tech Lead, verify the end-to-end integration between Reviews page frontend (ReviewsGrid, ReviewsStats, ReviewsFilters, ReviewsPagination) and the backend /api/reviews endpoints. Ensure filter params (product, rating, sort) are sent as query params, ReviewsStats aggregate data (4.6 avg, star distribution) comes from GET /api/reviews/stats, helpful vote button calls PUT /api/reviews/{id}/helpful and updates count in UI, pagination correctly fetches page slices (ITEMS_PER_PAGE=6), and ReviewsQueue in Dashboard correctly calls PUT /api/reviews/{id}/status for approve/reject. Depends on: ReviewsGrid (8d4f5cd5), ReviewsStats (e32c6112), ReviewsFilters (f873f7b7), ReviewsQueue (92707de6), backend_reviews_api.

As a Tech Lead, verify the end-to-end integration between Checkout page frontend (CheckoutForm, PaymentMethod, OrderSummary, CheckoutCTA) and the backend POST /api/checkout endpoint. Ensure CheckoutForm validated fields are submitted correctly, OrderSummary reflects live cart data from Redux store, successful checkout response redirects to OrderConfirmation with real order_number and estimated_delivery, and cart is cleared in Redux and backend after successful order. Verify CheckoutProgressBar step states update correctly. Depends on: CheckoutForm (c96d9f02), CheckoutCTA (9f2091f1), backend_checkout_api, backend_cart_api.

As a Tech Lead, verify the end-to-end integration between the OrderConfirmation page frontend (OrderConfirmationHero, OrderDetails, ShippingInfo, OrderSummary, NextSteps) and the backend GET /api/orders/{id} endpoint. Ensure the order_id returned by POST /api/checkout is passed via route param or Redux to the OrderConfirmation page, OrderConfirmationHero displays the real order_number (TRE-YYYY-XXXXX format) and date from the API, OrderSummary reflects actual line items and totals, ShippingInfo shows real shipping address from order, and NextSteps email notice shows the real customer email. Depends on: OrderConfirmationHero (fbde8971), OrderDetails (a6b0682b), ShippingInfo (2313871a), OrderSummary for OrderConfirmation (6fb0ee5b), backend_orders_api, backend_checkout_api.