mossy-scanner

As a frontend developer, implement the `LandingHero` section using React Three Fiber `Canvas` with a `Tree` component (cylinderGeometry trunk + sphereGeometry canopy clusters, useFrame sway animation via Math.sin), and a `FloatingLeaves` component using `InstancedMesh` with 60 leaf instances. Leaf data is `useMemo`-generated with x/y/z/speed/rotSpeed/phase/drift/scale per leaf; per-instance colors are set via a Float32Array buffer from a 5-color palette (#2A9D8F, #A8DADC, #F4A261, #E9C46A, #3cb371). useFrame drives continuous leaf float/drift/rotation animations. Wrap hero text content with `motion` + `useInView` entrance animations. Apply LandingHero.css classes.

As a frontend developer, implement the `LandingForestVisualization` section using React Three Fiber `Canvas` with a `ForceGraph` component. Initialize a d3 force simulation (`d3.forceSimulation`) with forceManyBody (strength -120), forceCenter, forceCollide (radius 1.8), forceX/Y for 5 ORGANIZATIONS nodes. Use `useFrame` to sync d3 simulation tick positions into React state via `nodesRef`. On hover of a node (hoveredIdx state), orbit receipt leaf positions using angle = (li/receipts.length)*Math.PI*2 + Date.now()*0.001. Implement drag interactions with `dragging` state and node fx/fy pinning. Use `@react-three/drei` `Billboard` and `Text` for node labels. GSAP animates label/canopy entrance. Apply LandingForestVisualization.css classes.

As a frontend developer, implement the `LandingKeyFeatures` section rendering 6 `FeatureCard` components from the FEATURES array (Fast OCR Scanning, Auto-Categorization, Multi-Organization Support, Powerful Search, Secure Storage, Real-time Sync). Each card uses `useRef` + `useInView` (once:true, margin:-60px) and `DIRECTION_VARIANTS` (top/bottom/left/right) for directional entrance animations. Cards animate `whileHover` with scale:1.04 and box-shadow. Icons from lucide-react (Scan, FolderTree, Building2, Search, ShieldCheck, RefreshCw) use `ICON_VARIANTS` with rotate -180→0 entrance. Transition uses cubic-bezier [0.25,0.46,0.45,0.94] with index*0.1s stagger delays. Apply `kf-card`, `kf-card-inner` CSS classes.

As a frontend developer, implement the `LandingOCRHighlight` section with a GSAP-animated receipt scanner demo. Use refs: `receiptRef`, `scanLineRef`, `vendorRef`, `dateRef`, `totalRef`, `itemRefs`, `svgPathsRef`. The scan line animates top-to-bottom via GSAP timeline triggered by `useInView`. Extracted fields (vendor, date, total, 4 RECEIPT_ITEMS) highlight sequentially with GSAP opacity/color transitions. SVG connection paths draw via strokeDashoffset animation. Render 4 benefit cards from BENEFITS array (extract, recognize, accuracy, language) each with custom inline SVG icons and `ocr-benefit-icon--*` CSS classes. Track `accuracyCount` state for animated counter. Apply LandingOCRHighlight.css classes.

As a frontend developer, implement the `LandingOrganizationMgmt` section with an SVG tree visualization of 4 organizations (Greenleaf Cafe, Oakridge Consulting, Maplewood Retail, Birchcraft Studios) from the ORGS array. Render BRANCH_CONFIGS as SVG paths from trunkEnd to branchEnd with ellipse canopies, scatter leaf circles, and text labels. Each org has branchColor/canopyColor. Implement org card selection with `useState` (activeOrg), GSAP-driven card transitions (opacity/y/scale on org switch via `useCallback`). Show org stats (receipts, categories, team) and `ArrowRightLeft`/`Users`/`ChevronRight` lucide icons. Apply `LandingOrganizationMgmt.css` classes.

As a frontend developer, implement the `LandingSearchCapability` section featuring a typewriter effect cycling through EXAMPLE_QUERIES (['Vendor: Staples','Date: Last Month','Category: Office Supplies','Amount: $50 - $200']) via `visibleChars`/`isDeleting` state and `setTimeout` in `useEffect`. Render per-character `motion.span` with `charVariants` (hidden: opacity:0/y:6, visible: opacity:1/y:0). Implement `activeTags` state toggled by clicking FILTER_CARDS — tags animate in/out with `AnimatePresence` and `tagSpring` (stiffness:500, damping:22). Render 4 FILTER_CARDS (vendor/date/category/amount) with lucide icons (Store, Calendar, Tag, DollarSign) and 4 FEATURES badges (Zap, SlidersHorizontal, Clock, Filter). Apply LandingSearchCapability.css classes.

As a frontend developer, implement the `LandingSecurityTrust` section with 4 SECURITY_BADGES (GDPR, encryption, backups, enterprise). Each badge renders a `LockIcon` SVG component with `bodyRef`/`shackleRef` driven by GSAP timeline: body draws via strokeDashoffset over 0.7s, shackle draws over 0.5s, then shackle rotates/translates open with a bounce, then closes, using `triggerAnim` prop and `hasAnimated` guard ref. Badges toggle an `activeModal` state; selected badge shows expanded detail card with `AnimatePresence` + `motion.div`. `useCallback` handles badge click. Apply LandingSecurityTrust.css classes including `ocr-benefit-icon--*` equivalents for badge icons.

As a frontend developer, implement the `LandingPricing` section rendering 3 plan cards from the `plans` array (Free/Pro/Enterprise) with inline SVG icons (LEAF_ICON, TREE_ICON, FOREST_ICON). Implement billing toggle `useState` (monthly/annual) with `AnimatePresence` price swap animation. Pro plan renders with `recommended:true` badge. Each plan card uses `motion.div` with `whileHover` lift effect. Feature lists render CHECK_ICON SVGs with per-plan `checkClass`. CTA buttons link to `/Signup` with `ctaClass` variants (lp-cta--free, lp-cta--pro, lp-cta--enterprise). Apply `lp-plan-icon--*`, `lp-feature-check--*` CSS classes from LandingPricing.css.

As a frontend developer, implement the `LandingTestimonials` section with 4 TESTIMONIALS (Sarah Chen, Marcus Rivera, Priya Kapoor, James Okafor). Implement auto-advancing carousel with `currentIdx` state and `AUTOPLAY_MS=5000` via `useEffect`/`setInterval`. `TestimonialCard` renders conditionally as carousel (mobile) or static grid (desktop) using `isCarousel` prop. `StarRating` renders 5 `StarIcon` motion.svg components animating scale:0→1 with spring (stiffness:400, damping:15) and i*0.08s delay per star, filled vs empty based on count. Card transitions use `AnimatePresence` with slide/fade. Avatar initials rendered with `lt-avatar--*` CSS color classes. Apply LandingTestimonials.css classes.

As a frontend developer, implement the `LandingCTA` section with a magnetic CTA button using `useRef` (btnRef) and `btnOffset` state (x,y). `handleMouseMove` computes dx/dy from button center, applies up to 18px magnetic offset within 120px proximity radius via `setBtnOffset`. On button click, `generateParticles()` creates 14 particles with randomized angle/speed/vx/vy/color/size/rotation from PARTICLE_COLORS palette; particles animate outward via `AnimatePresence` with `burstKey` to remount. Render 3 parallax layers: `lcta-bg-layer` (0.25x scroll), `lcta-mid-layer` with 6 `lcta-mid-leaf` divs (0.45x scroll), and `lcta-fg-leaves` with 4 `lcta-fg-leaf` divs. Apply LandingCTA.css classes.

As a frontend developer, implement the `Footer` component with a GSAP-animated tree SVG logo (treeSvgPath draw-on via strokeDashoffset on mount using `logoRef`). Render 3 social links (LinkedIn, Twitter, GitHub) as orbiting icons: `orbitAngles` state advances via `requestAnimationFrame` in `orbitAnimRef`, positioning each icon at ORBIT_RADIUS=44 using cos/sin. Render 4 `linkColumns` (Product, Company, Legal, Support) each with 4 anchor links. Implement email newsletter `useState` (email, isFocused) with focus/blur handlers. Use `motion`/`useAnimation` from framer-motion for link hover underline animations. Apply Footer.css classes. This component may already exist from other pages — check for reuse.

As a frontend developer, implement the LoginNavbar section for the Login page. This reuses the shared Navbar component (may already exist from the Landing page task 31e48528-1281-4233-b1d9-c60caa1d0034). The Navbar includes: org switcher dropdown with ORGANIZATIONS array (Oakwood Bakery, Maple Consulting, Cedar Logistics) using activeOrg/setActiveOrg state and orgRef for click-outside detection; notification bell with hasUnread badge state, NOTIFICATIONS array (3 items with scan/report/team types), and handleMarkRead handler; profile dropdown with profileOpen state and profileRef; mobile hamburger menu with mobileOpen/setMobileOpen toggle and X icon; NAV_LINKS array mapping Dashboard/Organizations/Receipt/Settings with lucide-react icons; active link detection via window.location.pathname; and useEffect click-outside handler covering all three dropdown refs. Import from '../styles/Navbar.css'.

As a frontend developer, implement the Navbar section for the Signup page. This component reuses the shared Navbar from Landing/Login pages — check if it already exists before rebuilding. The Navbar features: a TreeRingLogo SVG component with 5 animated concentric circles (RING_RADII: [6,9,12,15,17.5]) using framer-motion pathLength/opacity entrance animations and scroll-driven rotation via useTransform(scrollY, [0,600], [0,180]); a HamburgerIcon with 3 animated spans that morph into an X on open; NAV_LINKS array with 5 routes (Landing, Dashboard, Scanner, Organizations, Search); scroll-driven background color transition from rgba(241,250,238,0.85) to rgba(42,157,143,0.92) using useTransform(scrollY,[0,200],...); useState for mobileOpen and hasScrolled; AnimatePresence for mobile menu drawer. CSS uses nb- prefixed classes.

As a Backend Developer, implement FastAPI endpoints for receipt OCR processing: POST /api/receipts/scan (accepts multipart image upload, runs OCR extraction, returns structured receipt data within 2s SLA), POST /api/receipts/scan/batch (batch scan), GET /api/receipts/{id}/ocr (retrieve OCR results). Integrate a Python OCR library (e.g., pytesseract or cloud OCR) and GPT-5.4 for data normalization and field extraction (merchant, date, amount, line items, tax, total). Store results in MongoDB. Note: Frontend tasks that depend on this include ScannerControls (e4821927), ScannerPreview (fd54acb5), ReceiptOCRData (36fb365f).

As a Backend Developer, implement full CRUD endpoints for receipts in FastAPI: GET /api/receipts (list with pagination, up to 10k per org), GET /api/receipts/{id} (single receipt detail), PUT /api/receipts/{id} (update receipt fields including OCR corrections), DELETE /api/receipts/{id} (soft delete), GET /api/receipts/{id}/images (retrieve receipt images). Support filtering by org, category, status, date range. Use MongoDB with indexes on org_id, category, date, and status. Note: Frontend tasks that depend on this include ReceiptHeader (edde0e8f), ReceiptOCRData (36fb365f), ReceiptActionBar (b96a1a6e), DashboardReceiptsList (ac88e470), DashboardStatsCards (04b0032d).

As a Backend Developer, implement organization management endpoints in FastAPI: GET /api/organizations (list user's organizations), POST /api/organizations (create new org), GET /api/organizations/{id} (org details with stats), PUT /api/organizations/{id} (update org name/domain/settings), DELETE /api/organizations/{id} (delete org with confirmation), POST /api/organizations/{id}/switch (set active org in session), GET /api/organizations/{id}/members (list members), POST /api/organizations/{id}/members/invite (send invite by email), DELETE /api/organizations/{id}/members/{member_id} (remove member). Store in MongoDB with org_id references on all receipt documents. Note: Frontend tasks that depend on this include OrganizationsGrid (27a57791), OrganizationsSettings (960dd713), OrganizationsMembersList (835e5abf), OrganizationsInviteModal (f2fd7b76), OrganizationsCreateNew (fcbca7a3), OrganizationSettings in Settings (bbce311b).

As a Backend Developer, implement user profile and settings endpoints in FastAPI: GET /api/users/me (profile data), PUT /api/users/me (update name/email/phone/bio), POST /api/users/me/photo (upload profile photo, store in GridFS or object storage), PUT /api/users/me/password (change password with current password verification), GET /api/users/me/sessions (list active sessions), DELETE /api/users/me/sessions/{session_id} (revoke session), GET /api/users/me/notifications (notification preferences), PUT /api/users/me/notifications (update preferences), DELETE /api/users/me (account deletion with password confirmation). Note: Frontend tasks that depend on this include ProfileSettings (6cef8541), SecuritySettings (aea08dff), NotificationSettings (c5675cc5), DangerZone (4c0ab417).

As a Backend Developer, implement receipt image upload and storage: POST /api/receipts/images/upload (accepts multipart image, validates type/size, stores in MongoDB GridFS or local volume, returns image_id and URL), GET /api/receipts/images/{image_id} (serve image with auth check), DELETE /api/receipts/images/{image_id} (remove image). Support JPEG/PNG/HEIC formats. Apply image preprocessing before OCR (contrast enhancement, deskewing). Enforce per-org storage quotas. Note: Frontend tasks that depend on this include ReceiptImageViewer (83a1a62c), ScannerPreview (fd54acb5), ScannerControls (e4821927).

As a Backend Developer, implement global FastAPI middleware: JWT bearer token validation middleware (verify token signature, expiry, user existence), CORS configuration (allow React Native / web origins), rate limiting middleware (100 req/min per user, 10 req/min on auth endpoints), request logging middleware. Create reusable `get_current_user` dependency for protected routes. Implement refresh token rotation strategy. Add GDPR-compliant request/response logging (exclude PII from logs). This is a prerequisite for all protected API endpoints.

As a frontend developer, implement the LoginHero section for the Login page. This section renders a full Three.js 3D canvas mounted via mountRef using WebGLRenderer with alpha:true and antialias:true. It builds a custom leaf shape using THREE.Shape with bezierCurveTo curves and ExtrudeGeometry (depth:0.06, bevel enabled). The scene includes: a MeshStandardMaterial leaf mesh (color 0x2A9D8F, roughness 0.35, emissive 0x0a3a30) positioned at (0, 0.15, 0) with rotation; a center vein CylinderGeometry (radius 0.018, height 2.35) using veinMaterial (color 0x1a6a5e); 8 floating SphereGeometry particles (radius 0.04) in a particlesGroup with gold MeshStandardMaterial (color 0xE9C46A, emissive 0x5a4a20) arranged at varying radii via angle/Math.random(); AmbientLight (0xa8dadc, 1.4) and DirectionalLight (0xf4a261, 0.8) at position (2,3,4); camera at z=5 with 45° FOV; animation loop with rotation and particle float. Uses useEffect for setup/cleanup and useRef for mount target. Includes Leaf icon from lucide-react. Import from '../styles/LoginHero.css'.

As a frontend developer, implement the LoginFormContainer section for the Login page. This is the core auth form rendered inside an lfc-card div with className lfc-root. State includes: email, password, rememberMe, showPassword, isSubmitting, formError, touched ({email, password}), and ripples array. Validation uses regex /^[^\s@]+@[^\s@]+\.[^\s@]+$/ for emailValid and password.length >= 8 for passwordValid; derived emailError/passwordError flags drive lfc-input--error/lfc-input--success classes via inputClass helper. handleSubmit (useCallback) marks all fields touched, validates sequentially setting formError strings, then simulates auth with setTimeout 1500ms redirecting to /Dashboard via window.location.href. handleRipple (useCallback) calculates click position relative to submitBtnRef, appends ripple objects {id, x, y, size} to ripples state and cleans up after 650ms. UI includes: Mail and Lock lucide-react icons as input prefix icons; Eye/EyeOff toggle for password visibility; AlertCircle for field-level error messages; Check icon for valid state; rememberMe checkbox; formError alert block with AlertCircle; submit button with ripple effect elements rendered from ripples array; and a forgot-password link. Import from '../styles/LoginFormContainer.css'.

As a frontend developer, implement the LoginSecurityBadges section for the Login page. This is a static trust-signal section rendering four inline SVG badge items from the securityBadges array: 'Bank-Level Security' (shield with checkmark path), 'GDPR Compliant' (padlock rect+path+circle), 'End-to-End Encrypted' (key/wrench path), and 'SOC 2 Certified' (circle with smile face lines). Each badge renders as an lsb-badge div containing an lsb-icon span (inline SVG with stroke-based icons, strokeWidth:2, strokeLinecap/strokeLinejoin round) and an lsb-label span. The section uses className lsb-root with an lsb-inner container and maps over the securityBadges array by id key. No state or interactivity. Import from '../styles/LoginSecurityBadges.css'.

As a frontend developer, implement the LoginAlternativeAuth section for the Login page. This section renders OAuth provider buttons from the PROVIDERS array containing Google (multi-path SVG with brand colors #4285F4/#34A853/#FBBC05/#EA4335), Apple (single currentColor path SVG), and Microsoft (four colored rects SVG). State is loading (null | string providerId). handleProviderClick guards against concurrent loading, sets loading to the clicked providerId to simulate OAuth redirect. Each button renders with className laa-btn laa-btn--{provider.id}, is disabled when loading !== null, and conditionally renders an laa-spinner span (aria-hidden) while loading or the laa-btn-icon span with provider SVG otherwise. The layout includes an laa-divider with laa-divider-text 'or continue with' separator above the laa-buttons flex container. Root section uses className laa-root with laa-inner wrapper. Import from '../styles/LoginAlternativeAuth.css'.

As a frontend developer, implement the LoginFooter section for the Login page. This reuses the shared Footer component (may already exist from Landing page task 7124d042-046c-44c0-8f96-c2ddb821b2b2). The footer renders a ftr-root element with two decorative LeafSVG components (custom inline SVG with nested path elements for leaf shape and vein strokes, className ftr-leaf ftr-leaf--1/2). The ftr-inner contains: ftr-brand block with ftr-logo (inline SVG icon + 'mossy-scanner' text) and ftr-tagline paragraph; ftr-links-group with two columns — 'Product' mapping appPages array (Dashboard/Organizations/Receipt/Settings href links) and 'Account' mapping accountLinks array (Login/Signup hrefs). The ftr-bottom bar renders dynamic copyright year via new Date().getFullYear() and ftr-bottom-links with Privacy Policy and Terms of Service anchors pointing to /Settings. Import from '../styles/Footer.css'.

As a frontend developer, implement the SignupHero section for the Signup page. The section renders a .sh-root container with 3 decorative background orbs (.sh-bg-orb--1/2/3), an SVG user-plus icon accent animated via framer-motion iconVariants (scale: 0→1, opacity: 0→1, delay 0.05s), an h1 headline 'Create Your Account' with an .sh-headline-accent span animated via headlineVariants (opacity/y, duration 0.6s), a decorative .sh-divider, a subheadline paragraph animated via subVariants (delay 0.15s), and a motivational paragraph animated via motivVariants (delay 0.3s). All animations use whileInView with viewport once:true and margin '-40px'. CSS uses sh- prefixed classes.

As a frontend developer, implement the SignupForm section for the Signup page. This is the core interactive section featuring a 4-step wizard defined by STEPS array (keys: name, email, password, org) each with label/heading/subtitle. Uses useState for multi-step state management. Includes 6 SVG icon components: UserIcon, MailIcon, LockIcon, BuildingIcon, EyeIcon, EyeOffIcon, and CheckIcon for password visibility toggling and validation feedback. Step 4 renders MOCK_ORGANIZATIONS array (4 orgs including 'Create New Organization') as a selectable list. The form includes real-time password strength validation, step progress indicator, field-level error states, and animated step transitions. CSS uses sf- prefixed classes spanning 10421 chars of styles.

As a frontend developer, implement the SignupBenefits section for the Signup page. The section renders a .sbg-root container with 2 decorative background circles (.sbg-bg-circle--1/2), a header block with section label 'Why mossy-scanner', h2 title, and subtitle. Displays 3 benefit cards from the benefits array (Fast Setup, Secure Account, Multiple Organizations) each with an iconMap-resolved SVG icon (LightningIcon, ShieldIcon, LayersIcon), title, description, and a highlights array rendered as a bullet list. Uses useState(null) for activeCard hover/focus interaction to highlight the active card. CSS uses sbg- prefixed classes.

As a frontend developer, implement the SignupFAQ section for the Signup page. This section uses gsap and d3 imports alongside React hooks (useState, useRef, useEffect, useCallback). Renders 6 FAQ_ITEMS (ids: password, organization, privacy, free, ocr, multiple) as an accordion — each item has a question string and JSX answer with .sfq-panel-highlight spans. GSAP drives accordion open/close height animations on panel refs. D3 may be used for decorative data-driven visual elements. useState tracks the active open FAQ id. The component is the most complex static section on this page due to GSAP+D3 integration. CSS uses sfq- prefixed classes.

As a frontend developer, implement the SignupSecurityTrust section for the Signup page. The section renders a securityBadges array of 4 badge objects (AES-256 Encryption, GDPR Compliant with highlight:true, SOC 2 Certified, Two-Factor Auth) each with an inline SVG icon, variant ('primary'/'secondary'), and highlight flag for styling differentiation. Below the badges, renders a complianceCards array of 3 cards (GDPR Compliance, End-to-End Encryption, SOC 2 Type II) each with title, desc, inline SVG icon, iconClass (gdpr/ssl), and borderClass for themed borders. All SVG icons are inlined JSX. CSS uses .sst- prefixed classes with 6611 chars of styles.

As a frontend developer, implement the SignupCTA section for the Signup page. The section renders a .scta-root with a .scta-bg-layer decorative background, a leaf accent SVG with two animated .scta-leaf-path paths (second path has animationDelay: '0.2s'), an h2 headline 'Ready to Get Started?', a subheadline paragraph, and a .scta-actions div containing: a primary anchor button to '/Signup' (.scta-primary-btn) with an arrow SVG icon in .scta-btn-arrow, and a secondary anchor link to '/Login' (.scta-secondary-link) with text 'Already have an account? Log in'. A .scta-trust-row renders 2 .scta-trust-item elements (256-bit encryption with lock SVG, and a checkmark SVG trust badge). CSS uses scta- prefixed classes.

As a frontend developer, implement the Footer section for the Signup page. This component reuses the shared Footer from Landing — check if it already exists before rebuilding. The Footer features: a GSAP-animated tree SVG logo (treeSvgPath constant) on logoRef with an orbitAngleRef-driven animation loop via orbitAnimRef; 3 socialLinks with orbit angles (LinkedIn:0°, Twitter:120°, GitHub:240°) rendered around ORBIT_RADIUS:44 using setOrbitAngles state and useEffect animation; 4 linkColumns (Product, Company, Legal, Support) each with 4 links; a newsletter email input with useState for email and isFocused; framer-motion useAnimation for entrance effects. CSS uses ft- prefixed classes.

As a frontend developer, implement the Navbar section for the Dashboard page. This component may already exist from previous pages (Login, Signup). It uses framer-motion's useScroll and useTransform hooks to drive scroll-based animations: logoRotate (0–180deg over 600px scroll) and bgColor transition from rgba(241,250,238,0.85) to rgba(42,157,143,0.92) over 200px scroll. Includes TreeRingLogo SVG component with 5 animated concentric circles (RING_RADII: [6,9,12,15,17.5]) using pathLength/opacity transitions with staggered delays, plus an animated leaf path. HamburgerIcon component uses three motion.span elements animating into an X on open. NAV_LINKS array includes Landing, Dashboard, Scanner, Organizations, Search routes. Mobile menu state managed via useState(mobileOpen). hasScrolled state triggers at 40px scroll via passive event listener. Background and shadow transitions driven by scroll position.

As a Backend Developer, implement auto-categorization service using GPT-5.4: POST /api/receipts/{id}/categorize (auto-categorize based on OCR data), PUT /api/receipts/{id}/category (manual category override), GET /api/categories (list available categories). Use GPT-5.4 to classify receipts into predefined categories (groceries, office-supplies, travel, meals, utilities, software, marketing, rent, insurance, equipment, shipping, other). Store categorization results and confidence scores in MongoDB. Note: Frontend tasks that depend on this include ReceiptCategorySelector (5ac12f48), ScannerSettings (d1d8105e).

As a Backend Developer, implement search endpoints in FastAPI: GET /api/receipts/search (full-text search with filters: query, category[], status[], org_id[], date_from, date_to, amount_min, amount_max, page, per_page). Use MongoDB text indexes on merchant name, description, and notes fields. Return paginated results with total count, page metadata, and relevance scores. Support sort by date, amount, vendor. Note: Frontend tasks that depend on this include SearchBar (8683e7c7), SearchFilters (7f23eb08), SearchResults (a019166c), SearchPagination (345186f3).

As a Backend Developer, implement dashboard analytics endpoints: GET /api/dashboard/stats (total receipts, pending review count, categorized count, trends vs last period), GET /api/dashboard/recent-activity (last 10 activity events), GET /api/dashboard/category-breakdown (receipt count and total amount per category for active org). Aggregate using MongoDB aggregation pipelines. Cache results with a short TTL (60s) to support up to 10k receipts per org without performance degradation. Note: Frontend tasks that depend on this include DashboardStatsCards (04b0032d), DashboardWelcomeBanner (18d6e724), DashboardRecentActivity (44ff1746), DashboardCategoryBreakdown (b786caf1), DashboardReceiptsList (ac88e470).

As a Frontend Developer, implement a centralized API client and global auth state for the React Native app: create an axios/fetch-based API client with base URL config, JWT token injection via request interceptor, 401 handling with automatic token refresh, and error normalization. Implement global auth state using React Context or Zustand (currentUser, activeOrg, token, isAuthenticated). Create custom hooks: useAuth(), useReceipts(), useOrganizations(), useSearch(). Add AsyncStorage (React Native) for token persistence across app restarts. This is a cross-cutting concern that all page-level data-fetching tasks depend on. Note: Frontend section tasks for LoginFormContainer (5670d373), SignupForm (695e47c2), DashboardReceiptsList (ac88e470), etc. should depend on this.

As a Tech Lead, verify the end-to-end integration between the Receipt page frontend sections and the Receipts backend API. Ensure ReceiptHeader loads live receipt data (merchant, date, confidence score), ReceiptImageViewer fetches images from the image storage service, ReceiptOCRData renders and saves inline edits via PUT /api/receipts/{id}, ReceiptCategorySelector persists category changes, ReceiptMetadata saves org/project/notes/tags, and ReceiptActionBar save/discard flows correctly update MongoDB. Depends on: ReceiptHeader (edde0e8f), ReceiptImageViewer (83a1a62c), ReceiptOCRData (36fb365f), ReceiptCategorySelector (5ac12f48), ReceiptMetadata (6990fb7e), ReceiptActionBar (b96a1a6e), backend-receipts-crud-api, backend-image-storage.

As a Tech Lead, verify the end-to-end integration between the Settings page frontend sections and the User Profile/Organizations backend APIs. Ensure ProfileSettings loads and saves real user data via PUT /api/users/me, SecuritySettings loads real sessions and handles password change, NotificationSettings persists preferences to the backend, OrganizationSettings (in Settings) reflects and saves org data, and DangerZone account deletion calls DELETE /api/users/me with password confirmation and clears local auth state. Depends on: ProfileSettings (6cef8541), SecuritySettings (aea08dff), NotificationSettings (c5675cc5), OrganizationSettings (bbce311b), DangerZone (4c0ab417), backend-user-profile-api, backend-organizations-api.

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. Uses GSAP for entrance animations on nav items. NAV_ITEMS array defines 5 items: Dashboard (active, no badge), Scanner (badge: count 3, type 'accent'), Search (no badge), Organizations (badge: count 2, type 'subtle'), Settings (no badge) — each with custom inline SVG icons. Sidebar manages collapsed/expanded state with useRef and useEffect for GSAP-driven width transitions. Badge rendering varies by type (accent vs subtle CSS classes). Active item highlighted via dbs-item--active class. Sidebar supports keyboard navigation and hover states. Component uses useRef for animation targets and GSAP context for cleanup on unmount.

As a frontend developer, implement the Footer section for the Dashboard page. This component may already exist from Landing or Signup pages. Uses both framer-motion (useAnimation) and GSAP for animations. Features an animated TreeRingLogo with an SVG tree path (treeSvgPath bezier curves). Orbital social links: LinkedIn (angle 0°), Twitter (120°), GitHub (240°) positioned at ORBIT_RADIUS=44 around a center logo using trigonometry — orbitAngles state drives continuous rotation via orbitAnimRef. email state with useState for newsletter input, isFocused state for input focus styling. logoRef and orbitAngleRef for imperative animation control. linkColumns array defines 4 columns: Product (Scanner, Search, Dashboard, Organizations), Company (About, Careers, Blog, Contact), Legal (Privacy, Terms, Cookie, GDPR), Support (Help, Docs, API Status, Settings). Footer renders social orbit, nav link columns, newsletter form, and copyright.

As a frontend developer, implement the Navbar section for the Organizations page. This component may already exist from previous pages (Login, Signup, Dashboard). It uses framer-motion's useScroll and useTransform hooks to drive logo rotation (0–180deg over 600px scroll) and background color transition from rgba(241,250,238,0.85) to rgba(42,157,143,0.92) over 200px scroll. Includes TreeRingLogo SVG component with 5 animated concentric circles (RING_RADII: [6,9,12,15,17.5]) and a leaf path, each animated via pathLength/opacity with staggered 0.12s delays. HamburgerIcon uses three motion.span elements animating into an X on open. NAV_LINKS array includes Landing, Dashboard, Scanner, Organizations, Search. Mobile menu uses AnimatePresence for slide-in drawer. hasScrolled state adds elevated shadow class after 40px scroll.

As a frontend developer, implement the ScannerHeader section for the Scanner page. The component uses useRef and useEffect with GSAP to animate children of `contentRef` via `gsap.fromTo` (opacity 0→1, y 16→0, stagger 0.1, delay 0.15, power2.out ease). The layout includes: a left group with an SVG scanner icon and `h1.sch-title` ('Receipt Scanner') plus an `.sch-org-badge` showing org dot, label, and org name ('Acme Supplies Co.'); a center group with `.sch-receipt-count` showing a receipt SVG icon and count value ('247'); a right group with an outline 'Switch Org' button (with swap arrows SVG) and a filled anchor button linking to /Dashboard. Uses `.sch-accent-line` decorative element and `.sch-root` layout root. The Navbar equivalent for this page — apply page-level dependency on Dashboard Navbar task.

As a frontend developer, implement the shared Navbar section for the Search page. This component may already exist from Dashboard/Organizations/Scanner pages. Uses useState for activeOrg, orgOpen, notifOpen, profileOpen, mobileOpen. Includes useRef (orgRef, notifRef, profileRef) with useEffect for click-outside detection via mousedown listener. Renders NAV_ITEMS array with lucide-react icons (LayoutDashboard, Building2, Search, Receipt, ScanLine, Settings), org switcher dropdown with ORGS array (3 orgs with color swatches), notification bell dropdown with NOTIFICATIONS array (scan/alert/org types with notifIconClass/notifIconEl helpers), profile dropdown with LogOut/User icons, and mobile hamburger Menu/X toggle. Active route highlighted via window.location.pathname comparison. Imports Navbar.css.

As a frontend developer, implement the Navbar section for the Settings page. This component (shared across pages — may already exist from Dashboard, Scanner, Search, Receipt pages) renders a scroll-aware navigation bar using framer-motion's useScroll and useTransform hooks. Key features: TreeRingLogo SVG component with 5 animated concentric circles (RING_RADII: [6,9,12,15,17.5]) and a leaf path, logo rotation driven by scrollY [0,600]→[0,180deg], background color transition from rgba(241,250,238,0.85) to rgba(42,157,143,0.92) over scrollY [0,200], HamburgerIcon with 3 animated spans (rotate/opacity/scaleX transitions), AnimatePresence-wrapped mobile menu drawer, NAV_LINKS array including Landing/Dashboard/Scanner/Organizations/Search, hasScrolled state toggled at 40px scroll threshold. CSS handles glassmorphism backdrop-filter and responsive breakpoints.

As a Tech Lead, verify the end-to-end integration between the Login/Signup frontend implementation and the Auth backend API. Ensure JWT tokens are correctly issued, stored in AsyncStorage, injected into subsequent requests, and that protected routes redirect unauthenticated users. Verify signup flow creates user and org in MongoDB. Verify token refresh works seamlessly. Depends on: LoginFormContainer (5670d373), SignupForm (695e47c2), backend-auth-api, frontend-api-client.

As a Tech Lead, verify the end-to-end integration between the Scanner frontend and the OCR backend API. Ensure image capture/upload from ScannerControls/ScannerPreview reaches the backend image storage service, OCR processing completes within the 2-second SLA, and extracted data is returned and rendered correctly in ReceiptOCRData. Verify auto-categorization fires after OCR and the category is pre-populated in ReceiptCategorySelector. Depends on: ScannerControls (e4821927), ScannerPreview (fd54acb5), ReceiptOCRData (36fb365f), backend-ocr-api, backend-categorization-api, backend-image-storage.

As a Tech Lead, verify the end-to-end integration between the Search frontend (SearchBar, SearchFilters, SearchResults, SearchPagination) and the backend search API. Ensure filter values from SearchFilters are correctly serialized into API query params, results are rendered in SearchResults, pagination state is synced with API total count, and clicking a result navigates to the Receipt page with correct data. Depends on: SearchBar (8683e7c7), SearchFilters (7f23eb08), SearchResults (a019166c), SearchPagination (345186f3), backend-search-api.

As a Tech Lead, verify the end-to-end integration between the Organizations frontend sections and the Organizations backend API. Ensure OrganizationsGrid loads real org data, OrganizationsCreateNew posts to the API and reflects in the grid, OrganizationsMembersList loads and paginates real members, OrganizationsInviteModal sends real invites, OrganizationsSettings saves and deletes via API, and org switching updates the active org context used by Dashboard and Receipt pages. Depends on: OrganizationsGrid (27a57791), OrganizationsCreateNew (fcbca7a3), OrganizationsMembersList (835e5abf), OrganizationsInviteModal (f2fd7b76), OrganizationsSettings (960dd713), backend-organizations-api, frontend-api-client.

As a Tech Lead, verify the end-to-end integration between the Dashboard frontend sections and the Dashboard Stats/Receipts backend APIs. Ensure DashboardStatsCards and DashboardWelcomeBanner display live counts from /api/dashboard/stats, DashboardRecentActivity loads from /api/dashboard/recent-activity, DashboardCategoryBreakdown renders live aggregation data, DashboardReceiptsList paginates real receipts, and DashboardFiltersAndSearch correctly filters the list via API params. Depends on: DashboardStatsCards (04b0032d), DashboardWelcomeBanner (18d6e724), DashboardRecentActivity (44ff1746), DashboardCategoryBreakdown (b786caf1), DashboardReceiptsList (ac88e470), DashboardFiltersAndSearch (a9795632), backend-dashboard-stats-api, backend-receipts-crud-api.

As a frontend developer, implement the DashboardWelcomeBanner section for the Dashboard page. Uses GSAP context in useEffect to stagger-animate .dwb-stat-pill elements from opacity:0/y:20/scale:0.95 to full visibility (duration 0.5s, stagger 0.1s, delay 0.3s, power2.out). Displays today's dynamically formatted date (weekday, month, day, year via toLocaleDateString). Renders 4 quickStats pills: Total Receipts (1,247, dwb-stat-icon-wrap--receipts), Pending Review (38, dwb-stat-icon-wrap--pending), Categories (14, dwb-stat-icon-wrap--categories), Organizations (3, dwb-stat-icon-wrap--orgs) — each with unique inline SVG icons. Section includes decorative accent blobs as static CSS background elements for depth. Uses sectionRef for GSAP context scoping with ctx.revert() cleanup.

As a frontend developer, implement the DashboardStatsCards section for the Dashboard page. Renders 3 STAT_CARDS: Total Receipts (1247, trend up '+12% this month', 'Across all organizations'), Pending Review (34, trend down '−8% from last week', 'Awaiting categorization'), Categorized (1196, trend up '+15% this month', '95.8% categorization rate') — each with unique inline SVG icons. TrendBadge sub-component renders directional SVG arrow icons with CSS classes dsc-trend--up, dsc-trend--down, dsc-trend--neutral. GSAP animation in useEffect stagger-animates cardsRef array from opacity:0/y:30/scale:0.96 to full visibility (duration 0.5s, stagger 0.12s, power3.out). cardsRef populated via callback refs. Cards are independently styled and display label, value, trend badge, and subtitle.

As a frontend developer, implement the DashboardQuickActions section for the Dashboard page. Renders 3 action buttons as anchor tags: Scan Receipt (dqa-btn--primary, links to /Scanner, includes animated dqa-btn-ring and dqa-btn-shimmer decorative spans, keyboard shortcut Ctrl+S), New Organization (dqa-btn--secondary, links to /Organizations, keyboard shortcut Ctrl+N), and Export Data (dqa-btn--tertiary, links to /Dashboard). Each button includes: dqa-btn-icon with custom SVG (SCAN_ICON, ORG_ICON, EXPORT_ICON), dqa-btn-text with title and sub-description, dqa-btn-arrow with ARROW_ICON SVG, and dqa-btn-shortcut badge. Section is purely static with no useState/useEffect — all interaction handled via CSS hover/focus states on the button variants.

As a frontend developer, implement the DashboardReceiptsList section for the Dashboard page. Manages state with useState for current page. Renders 12 hardcoded RECEIPTS with fields: id, date, description, vendor, amount, category, status. CATEGORIES array: ['Meals','Travel','Supplies','Utilities','Software','Other']. ITEMS_PER_PAGE = 8 with pagination logic via generatePageNumbers() supporting ellipsis for >5 total pages. categoryClass() maps categories to CSS classes (drl-cat--meals, drl-cat--travel, etc.). statusLabel() maps status keys to display labels (verified/pending/flagged). formatDate() uses toLocaleDateString for 'MMM D, YYYY' format. Pagination renders page number buttons with active state highlighting. Each receipt row displays formatted date, description, vendor, amount, category badge, and status badge.

As a frontend developer, implement the DashboardCategoryBreakdown section for the Dashboard page. Integrates Chart.js via react-chartjs-2 Doughnut component — registers ArcElement, Tooltip, Legend. CATEGORY_DATA has 7 entries with category, count, amount, and hex color fields. chartData maps amounts to dataset with custom backgroundColor per category, borderColor '#FFFFFF', borderWidth 2.5, borderRadius 1, spacing 1. chartOptions: cutout '58%', animateScale/animateRotate (800ms easeOutQuart), custom tooltip callbacks formatting currency and percentage. Custom tooltip: dark teal background, Inter font, cornerRadius 8. hoveredCategory state (useState) updated via chart onHover callback and handleLegendMouseEnter/Leave (useCallback). Custom legend rendered outside chart showing color swatch, category name, count, and formatCurrency(amount). totalAmount and totalCount computed via reduce. chartRef for imperative chart access.

As a frontend developer, implement the DashboardRecentActivity section for the Dashboard page. Uses GSAP for staggered timeline item entrance animations. ACTIVITY_ITEMS array has 7 entries with fields: id, action, detail, badge, badgeType (success/info/warning/danger), dotType (scan/category/export/alert), time, users (initials arrays). DotIcon sub-component renders type-specific inline SVGs (scan: barcode scanner, category: 4-rect grid, export: download arrow, alert: warning). Each item renders: colored timeline dot with DotIcon, badge chip with badgeType CSS class, action title, detail text, relative time string, user avatar initials stack. useState manages expanded/collapsed state for items exceeding a display limit. useRef targets for GSAP fromTo animations (opacity:0, x:-20 stagger entrance). useCallback for stable event handlers.

As a frontend developer, implement the OrganizationsHeader section for the Organizations page. Renders a static section with class oh-root/oh-inner containing a breadcrumb nav (aria-label='Breadcrumb') with a Dashboard link (href='/Dashboard'), a separator span, and a current 'Organizations' span. Below is a title row (oh-title-row) with an h1 'My Organizations' and a CTA anchor (oh-cta) linking to /Organizations with an inline SVG plus-icon (24x24, two crossing lines). A horizontal hr divider (oh-divider) appears below the title row. No state or animations.

As a frontend developer, implement the OrganizationsGrid section for the Organizations page. Uses a hardcoded orgData array of 6 organizations (Green Leaf Cafe, Mountain Outfitters, Urban Tech Solutions, Harbor View Bakery, Sunset Creative Studio, Pacific Northwest Consulting) each with id, name, domain, memberCount, receiptCount, and lastActivity fields. Renders an og-grid of anchor cards (og-card) linking to /Dashboard?org={id}. Each card has an og-card-header with an SVG house/building icon in og-card-icon-wrap and an og-card-title-group. When orgData is empty, renders an og-empty state with a home SVG icon, 'No Organizations Yet' h3, and descriptive paragraph. No state hooks — purely data-driven render.

As a frontend developer, implement the OrganizationsEmptyState section for the Organizations page. Uses @react-three/fiber Canvas and @react-three/drei OrbitControls to render a 3D empty forest scene. Tree component accepts position, trunkHeight, trunkRadius, swayAmount props; uses useRef for groupRef and swayRef, and useFrame to animate rotation.z as a sine wave (0.6 frequency) per-tree. Each Tree renders a CylinderGeometry trunk (color #5C7A6E) and 4 Branch components. Branch uses useMemo to compute direction vector, midpoint, angleY (atan2), and angleX for mesh rotation, rendering a tapered CylinderGeometry (color #4A6658). GroundPlane is a rotated PlaneGeometry (40x40, color #D4DDCE). MistParticles renders 60 particle points. Scene includes ambient and directional lighting with shadow support.

As a frontend developer, implement the OrganizationsCreateNew section for the Organizations page. Uses gsap for entrance animations triggered via useEffect/useRef. Contains CURRENCIES array (8 entries: USD/EUR/GBP/CAD/AUD/JPY/CHF/INR with symbol and flag emoji) and TIMEZONES array (10 entries). Form state managed via useState: orgName, description, selectedCurrency (default 'USD'), selectedTimezone (default 'America/New_York'), plus multi-step wizard state. Renders icon components: OrgIcon, DescIcon, ClockIcon, CoinIcon, ArrowIcon, CheckIcon (all inline SVGs). The form includes animated step indicators, input validation, currency/timezone select dropdowns, and a submit flow with GSAP-animated success state. Multiple refs used for GSAP targeting of form panels.

As a frontend developer, implement the OrganizationsInviteModal section for the Organizations page. Accepts isOpen (default true) and onClose props. State: email, selectedRole ('accountant' default), emailError, pendingInvites (INITIAL_PENDING: 3 hardcoded entries), isSending, showSuccess, lastInvited. Uses useEffect to toggle document.body.style.overflow on isOpen and attach Escape keydown listener (suppressed during showSuccess). validateEmail checks for empty, regex format, and duplicate detection against pendingInvites. handleSendInvite sets isSending, delays 500ms (setTimeout), appends newInvite to pendingInvites, then triggers showSuccess. ROLES array has 'owner' and 'accountant' with descriptions. Uses framer-motion AnimatePresence for modal backdrop and panel enter/exit animations, overlayRef and modalRef for click-outside detection.

As a frontend developer, implement the OrganizationsMembersList section for the Organizations page. Uses MEMBERS_DATA array of 10 members (Aaron Chen through Hannah Park) each with id, name, email, role (Owner/Admin/Editor/Viewer), and joinDate. State: searchQuery, roleFilter ('All'), sortColumn, sortDir ('asc'), currentPage (1). PAGE_SIZE=6 with client-side pagination. useMemo computes filteredMembers (case-insensitive search across name/email/role) then sorted by SORTABLE_COLUMNS. placeholderAvatar generates 2-char initials. Icon components: SearchIcon, FilterIcon, PlusIcon, EditIcon, TrashIcon, ChevronLeftIcon (all inline SVGs). Renders a toolbar with search input and role filter dropdown, a sortable table with clickable column headers toggling asc/desc, row actions (EditIcon, TrashIcon buttons), and a pagination footer with prev/next controls and page indicator.

As a frontend developer, implement the OrganizationsSettings section for the Organizations page. TABS array has 'general' and 'danger' tabs. MOCK_ORG seeds form state: orgName, orgDesc, currency, timezone. State: activeTab, mobileCollapsed, saving, showDeleteModal, deleteConfirmInput, deleting, toast (null or {type, message}). Auto-dismiss toast via useEffect with 3500ms setTimeout. handleSave validates orgName, sets saving, simulates API with 800ms timeout, sets success toast. handleDelete checks deleteConfirmInput === orgName, sets deleting, simulates 1000ms delete, closes modal, sets error toast. handleArchive sets success toast immediately. isDeleteConfirmed derived boolean gates delete button. Renders CURRENCIES (10) and TIMEZONES (14) select dropdowns, SaveIcon inline SVG, delete confirmation modal with name-match input, and a toast notification overlay.

As a frontend developer, implement the Footer section for the Organizations page. This component may already exist from previous pages (Signup, Dashboard). Uses framer-motion useAnimation and gsap for animations. ORBIT_RADIUS=44 with 3 socialLinks (LinkedIn at 0°, Twitter at 120°, GitHub at 240°) orbiting a central tree logo SVG (treeSvgPath). orbitAngleRef and orbitAnimRef manage requestAnimationFrame-based orbit rotation stored in state via setOrbitAngles. Email subscription input with isFocused state. linkColumns array has 4 columns (Product, Company, Legal, Support) each with 4 links. logoRef targets GSAP hover animation on the tree SVG. Motion variants animate footer columns on scroll-into-view.

As a frontend developer, implement the ScannerPreview section for the Scanner page. This is a complex 3D + D3 section. It renders a `@react-three/fiber` `<Canvas>` containing `ViewfinderScene` with: a `ViewfinderRing` mesh (torusGeometry args [1.05, 0.012, 16, 80]) animated via GSAP `gsap.to(ringRef.current.rotation, {z: Math.PI*2, repeat:-1})` and pulsing scale yoyo; and 8 `ViewfinderCorner` meshes (boxGeometry) placed at hardcoded corner positions. State includes `zoomLevel`, `flashOn`, `captureState`, `dragOver`, `hasCamera`, and `flashTrigger`. Camera detection via `navigator.mediaDevices.getUserMedia`. A D3 SVG overlay (`svgRef`) renders corner bracket focus guides using `svg.append` with `strokeColor: 'rgba(42,157,143,0.45)'`, cleared and redrawn on mount. Also manages `scanLineRef` and `flashRef` for animation hooks. Drag-and-drop state tracked via `dragOver`. Uses lucide-react icons: Camera, Upload, Zap, ZapOff.

As a frontend developer, implement the ScannerControls section for the Scanner page. Uses `useState` for `status` ('ready'|'processing'|'success'), `autoFocus` (bool), `brightness` (0-100), and `contrast` (0-100). Uses `useCallback` for `handleCapture` (sets status to 'processing', resolves to 'success' after 2000ms timeout), `handleUpload` (triggers hidden `fileInputRef`), `handleFileChange` (reads file, sets processing→success), and `handleCancel` (resets to 'ready'). Layout: `.scc-actions` group with Capture button (Camera icon, disabled during processing), Upload button (Upload icon), hidden `<input type='file' accept='image/*'>`, and Cancel button (X icon). `.scc-toggles` group with Auto-Focus toggle button (Zap icon, `aria-pressed`, active class toggling `scc-toggle--active`), brightness slider (Sun icon, `scc-slider`), and contrast slider (Contrast icon). Uses `framer-motion` `<motion>` and `<AnimatePresence>` for status transition animations. Lucide icons: Camera, Upload, X, Zap, Sun, Contrast, CheckCircle2, Loader2.

As a frontend developer, implement the ScannerHistory section for the Scanner page. This is a high-complexity section combining 3D thumbnails, D3 sparklines, and GSAP animations. Uses `MOCK_RECEIPTS` array (12 entries with id, name, date, org, status, amount, merchant) and `ACTIVITY_DATA` (14-day counts for sparkline). The `ReceiptThumb` component renders in a `@react-three/fiber` `<Canvas>` using `@react-three/drei` `<Box>` and `<Plane>` primitives. D3 is used to render an activity sparkline SVG using the ACTIVITY_DATA dataset (date/count). GSAP animates list item entry. State includes receipt list filtering/selection. Status values 'processed'|'pending'|'error' control badge styling. Imports gsap, d3, Canvas, Box, Plane from their respective packages.

As a frontend developer, implement the ScannerSettings section for the Scanner page. State: `expanded` (bool), `ocrQuality` (0-100, default 70), `imageQuality` ('low'|'medium'|'high'|'original', default 'high'), `autoCategorize` (bool, default true), `defaultCategory` (string, default 'uncategorized'), `saveStatus` (null|'saving'|'saved'). Uses GSAP for collapse/expand panel animation: `gsap.fromTo(bodyRef, {height:0, opacity:0}, {height: innerHeight, opacity:1, duration:0.4, ease:'power2.out'})` on expand; `gsap.to(bodyRef, {height:0, opacity:0, duration:0.3})` on collapse. Also `animateSaveBtn` pulses the save button via `gsap.fromTo(saveBtnRef, {scale:1}, {scale:1.06, yoyo:true, repeat:1})`. D3 `scaleLinear` computes `rangePct` from ocrQuality for range slider fill. UI: collapsible `.scst-panel` with click-toggle header (Sliders + ChevronDown icons), body containing OCR quality slider with qualityLabels array ['Draft','Standard','High','Ultra'], imageQuality radio/select with 4 options, autoCategorize toggle, defaultCategory select with 5 category options, and Save button (Save/Check icons) with saving→saved→null status cycle.

As a frontend developer, implement the SearchHeader section for the Search page. Renders a static layout with a teal sh-accent-bar top stripe (aria-hidden), a breadcrumb nav (Dashboard → Search) using ChevronRight icon from lucide-react with aria-label, a title row containing an h1 with Search icon (size=18) and 'Search Receipts' text, and two sh-stat-card quick-stat blocks: one showing Receipt icon with 'Total Receipts / 2,572' and one showing Building2 icon with 'Organization / Green Valley Café'. Ends with an sh-separator bottom rule. Imports SearchHeader.css. No state or interactivity.

As a frontend developer, implement the SearchFilters section for the Search page. Contains four collapsible filter groups rendered via compound sub-components (DateRangeGroup, CategoryGroup, StatusGroup, OrgGroup). Uses useState for openGroups (accordion state), datePreset (string from DATE_PRESETS: Today/This Week/This Month/Last 3 Months/This Year/All Time), customStart/customEnd (date inputs), selectedCategories (array, from CATEGORIES with 8 items + counts), selectedStatuses (array, from STATUSES with 3 color-coded items), selectedOrgs (array, from ORGS with 3 items + counts). Each group header uses sf-group-header with ChevronDown/ChevronUp toggle and sf-group-active-count badge. DateRangeGroup renders preset pill buttons + From/To date inputs. Category/Status/Org groups render checkbox-style toggles. Footer row contains RotateCcw reset button and active-filter X chips. Uses SlidersHorizontal, Calendar, Tag, DollarSign, CheckCircle2, Building2, Filter, GripHorizontal from lucide-react. Imports SearchFilters.css.

As a frontend developer, implement the SearchBar section for the Search page. Uses useState for query (text input) and filters (array, initialized with INITIAL_FILTERS: vendor-gvc, category-food, date-may). Uses useRef for chipsRef (container) and chipRefs (map of id→el for individual chips). Integrates gsap for two animation flows: animateChipsIn (gsap.fromTo on .sb-chip elements with opacity/y/scale stagger 0.06, back.out ease, called via useEffect on filters change) and handleRemoveFilter (gsap.to single chip with opacity/scale/x exit then setState, power2.in ease) and handleClearAll (gsap.to all chips with staggered y exit). Search input row has Search icon (size=20), type='search' input with placeholder, and conditional X clear button (shown when hasQuery). Filter chips rendered in chipsRef div with setChipRef(id) ref pattern for each chip. Imports SearchBar.css and gsap.

As a frontend developer, implement the SearchResults section for the Search page. Imports three heavy libraries: three (Three.js), gsap with ScrollTrigger plugin (registered via gsap.registerPlugin), and d3. RECEIPTS array contains 12 mock entries (vendor, date, amount, category, confidence 85–99). ReceiptCard sub-component uses cardRef + useEffect with gsap.context for ScrollTrigger-driven entrance animation (opacity/y/scale fromTo, delay=index*0.06, power2.out, trigger start='top bottom-=40px') and a second useEffect using d3.select on confBarRef to animate a confidence bar via d3 transition after animated state is true. Parent SearchResults component uses useState for activeCategory (from CATEGORIES array, 8 options), sortBy (from SORT_OPTIONS: Date/Amount/Vendor), viewMode ('list'|'grid'), selectedIds (Set), and sortAsc (bool). Renders a toolbar with category filter pills, sort dropdown (ChevronDown), List/Grid3X3 view toggle buttons, and select-all checkbox. Results rendered as ReceiptCard grid/list with Eye/Pencil/Trash2 action icons. Empty state uses SearchX icon with RotateCcw retry. Imports SearchResults.css.

As a frontend developer, implement the SearchPagination section for the Search page. Uses useState for currentPage (init 1), perPage (init 20, options [10,20,50]), and dropdownOpen (bool). Uses useRef for dropdownRef for click-outside detection. useEffect clamps currentPage to totalPages when perPage changes. totalPages derived as Math.ceil(245/perPage), startItem/endItem computed from currentPage. buildPages() constructs page number array with ellipsis logic: ≤7 pages = full list; else first/last always shown with '...' gaps around currentPage window (±1). goToPage callback validates range before setState. Per-page dropdown renders PER_PAGE_OPTIONS with ChevronUp icon. Active page indicator uses inline transform translateX(activeIndex*(34+2)px) for sliding underline/highlight. ChevronLeft/ChevronRight prev/next buttons. Results summary shows 'Showing X-Y of 245 receipts'. Imports SearchPagination.css.

As a frontend developer, implement the shared Footer section for the Search page. This component may already exist from Dashboard/Organizations pages. Renders a footer element with ftr-edge top border, ftr-leaf-bg decorative background, and ftr-inner content wrapper. ftr-top contains ftr-brand (ScanLine logo icon + 'mossy-scanner' text + tagline paragraph) and ftr-nav-cols with three nav columns: Product (Scanner/Dashboard/Search/Receipt links), Manage (Organizations/Settings links), Account (Login/Sign Up links). ftr-bottom renders dynamic copyright year via new Date().getFullYear() and three ftr-badge spans with Shield (GDPR Compliant), Zap (OCR in 2s), Leaf (10k+ Receipts) icons from lucide-react. Imports Footer.css.

As a frontend developer, implement the Navbar section for the Receipt page. This component (likely already exists from Search/Scanner/Organizations pages) uses framer-motion useScroll and useTransform for scroll-driven logo rotation (0–180deg over 600px) and background color transition from rgba(241,250,238,0.85) to rgba(42,157,143,0.92). Includes TreeRingLogo SVG component with 5 animated concentric rings (RING_RADII=[6,9,12,15,17.5]) and a leaf path, each animating pathLength 0→1 with staggered 0.12s delays. HamburgerIcon animates 3 spans into X on open. NAV_LINKS includes Landing, Dashboard, Scanner, Organizations, Search. useState for mobileOpen and hasScrolled; AnimatePresence for mobile menu. Reuse existing Navbar component if already built from prior pages.

As a frontend developer, implement the SettingsSidebar section for the Settings page. This component renders a vertical navigation sidebar with 6 NAV_SECTIONS (profile, organization, notifications, security, privacy, appearance), each with custom inline SVG icons. State: activeSection (default 'profile'), drawerOpen (boolean), isMobile (boolean via window.innerWidth < 768 check using useCallback checkMobile). On mobile, renders as a slide-in drawer with body scroll lock (document.body.style.overflow='hidden') via useEffect. useEffect attaches a passive resize listener to toggle isMobile. Active section is highlighted. Component must coordinate with content sections to drive scroll-to or tab visibility. CSS: 5565 chars for responsive sidebar and drawer overlay styles.

As a frontend developer, implement the SettingsHeader section for the Settings page. This is a static presentational section rendering a breadcrumb nav (Dashboard → Settings) using a React.Fragment map with sh-breadcrumb-separator '/' dividers, sh-breadcrumb-link anchor for Dashboard href='/Dashboard', and sh-breadcrumb-current span for the active 'Settings' crumb. Below the breadcrumb: an h1.sh-title 'Settings' and a p.sh-description describing account preferences, organization details, notification settings, and security configurations. No state or interactivity. CSS: 1677 chars for layout and typography styles.

As a frontend developer, implement the Footer section for the Settings page. This component (shared — may already exist from Search and Receipt pages) uses both framer-motion (useAnimation) and gsap for animations. Features: an SVG treeSvgPath logo ('M20 32 L20 18 M20 18 C20 18 10 18...') animated via gsap on logoRef, orbiting social links (LinkedIn angle=0, Twitter angle=120, GitHub angle=240) at ORBIT_RADIUS=44 with orbitAngleRef tracking rotation and orbitAnimRef for requestAnimationFrame; orbitAngles state drives social link positions. Email newsletter input with isFocused state. 4 linkColumns (Product/Company/Legal/Support) with nav links including href='/Settings'. State: email (string), isFocused (boolean), orbitAngles (array). CSS: 6746 chars for layout and animations.

As a frontend developer, implement the DashboardFiltersAndSearch section for the Dashboard page. Uses framer-motion AnimatePresence for category dropdown animation. State: searchQuery, selectedCategory ('all'), categoryOpen (bool), sortBy ('date_desc'), dateFrom, dateTo (strings), glowPos ({x:50,y:50}). hasActiveFilters computed boolean from non-default state values. Refs: searchWrapRef, categoryBtnRef, dropdownRef for outside-click detection. CATEGORIES array has 10 options (all, office_supplies, travel, software, utilities, marketing, inventory, professional, rent, uncategorized). SORT_OPTIONS array has 6 sort modes. Icon components: SearchIcon, ChevronDown, FilterIcon, CalendarIcon, XIcon — all inline SVG. Renders: search input with live glow effect tracking mouse position via glowPos state, animated category dropdown with framer-motion, date range pickers (dateFrom/dateTo), sort select, and active filter chips with XIcon clear buttons.

As a frontend developer, implement the ReceiptHeader section for the Receipt page. Displays RECEIPT_DATA (merchant_name 'Blue Bottle Coffee', transaction_date, receipt_id 'RCPT-2847-A91F', total_amount $24.87, status 'confirmed', confidence_score 94). STATUS_CONFIG maps status to badge className variants (confirmed/pending/reviewed). Includes inline SVG icons: StoreIcon, CalendarIcon, ReceiptIdIcon. Animated confidence bar using performance.now()-based tick loop (800ms duration, eased) with useState(animatedScore) starting from 0, ref-guarded hasAnimated to prevent re-firing. getConfidenceClass() returns rch-confidence--high/medium/low based on score thresholds (85, 60). IntersectionObserver on cardRef triggers animation on viewport entry.

As a frontend developer, implement the ReceiptImageViewer section for the Receipt page. Displays RECEIPT_IMAGES array (3 mock placehold.co images at 800x1100) with multi-page navigation via ChevronLeft/ChevronRight controls. State: zoom level, rotation (RotateCwIcon increments 90deg), current image index. Toolbar includes ZoomInIcon, ZoomOutIcon, RotateCwIcon buttons built via React.createElement (not JSX). EmptyImageIcon shown when no images loaded. useRef and useCallback for pan/drag interactions. useEffect for keyboard navigation support. Image transforms applied via CSS transform combining scale and rotate values.

As a frontend developer, implement the ReceiptOCRData section for the Receipt page. Renders OCR-extracted fields with a rich set of inline SVG icon constants: ICON_STORE, ICON_MAP_PIN, ICON_LIST, ICON_DOLLAR, ICON_TAX, ICON_TOTAL, ICON_CREDIT, ICON_CALENDAR, ICON_CLOCK, ICON_EDIT, ICON_CHECK. Each field is editable — useState and useCallback manage edit mode toggling per field. useRef tracks active input for focus management. useEffect handles click-outside to commit edits. Inline editing replaces display values with input fields, with save/cancel via ICON_CHECK/ICON_EDIT. Field data covers merchant, address, line items, subtotal, tax, total, payment method, date, time.

As a frontend developer, implement the ReceiptCategorySelector section for the Receipt page. Renders 12 predefined CATEGORIES (groceries, office-supplies, travel, meals, utilities, software, marketing, rent, insurance, equipment, shipping, other) each with id, label, color hex, and emoji icon. State: selectedId, confirmedId, customValue, customCategories[], showConfirmBanner. allCategories merges CATEGORIES + customCategories. D3 animated color indicator ring via ringSvgRef: clears SVG, appends background circle arc, then animated foreground arc using d3.arc() with attrTween transition (700ms, easeCubicInOut) targeting endAngle based on selection state (0.6π unselected → 1.8π selected → 2π confirmed). CATEGORY_COLORS lookup object. Custom category input with useState(customValue). Confirm banner shown via showConfirmBanner state toggle.

As a frontend developer, implement the ReceiptMetadata section for the Receipt page. Contains four sub-panels: (1) Organization selector — ORGANIZATIONS array (4 orgs with id, name, role, initial) rendered as dropdown with ChevronIcon; (2) Project field — PROJECT_SUGGESTIONS autocomplete list (6 suggestions: Q2 Marketing Campaign, Office Supplies FY26, etc.) with useState for input value and filtered suggestions; (3) Notes textarea with StickyNoteIcon; (4) Tags panel — SUGGESTED_TAGS array (reimbursable, tax-deductible, urgent, recurring, client-meeting, personal) as toggleable chips with TagIcon, plus custom tag input. AlertCircleIcon and AlertCircleIcon used for validation warnings. BuildingIcon for org panel, LayersIcon for project panel. useState and useCallback manage all form state. Inline SVG icons: ChevronIcon, AlertCircleIcon, BuildingIcon, LayersIcon, StickyNoteIcon, TagIcon.

As a frontend developer, implement the Footer section for the Receipt page. This component (likely already exists from Organizations/Search pages) uses framer-motion useAnimation and GSAP for animations. Features an orbital social links system: 3 social links (LinkedIn angle=0, Twitter angle=120, GitHub angle=240) positioned around ORBIT_RADIUS=44 using orbitAngleRef and orbitAnimRef for continuous GSAP rotation animation, with orbitAngles state tracking current positions. treeSvgPath defines an inline tree/branch SVG illustration. logoRef for GSAP entrance animation. 4 link columns: Product (Scanner, Search, Dashboard, Organizations), Company, Legal, Support. Email newsletter input with useState(email) and isFocused state for focus styling. Reuse existing Footer component if already built from prior pages.

As a frontend developer, implement the ProfileSettings section for the Settings page. This is a rich interactive form section with: INITIAL_FORM state (name, email, phone, bio fields pre-filled with Alex Johnson data), VALIDATION_RULES object with regex patterns for each field (name: /^[a-zA-ZÀ-ÿ\s'.-]{2,80}$/, email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, phone: /^\+?[\d\s()\-.]{7,20}$/, bio maxLength 300), validateField function, and hooks: form/errors/touched/photo/photoPreview/saved states plus fileInputRef. handleChange uses useCallback and calls validateField inline; handleBlur marks fields touched and re-validates; handlePhotoSelect validates file type (image/*) and size (5MB limit) then uses FileReader for preview URL. Form shows inline error messages per field, a photo upload area with preview, and a saved confirmation state. CSS: 9958 chars.

As a frontend developer, implement the OrganizationSettings section for the Settings page. This component manages INITIAL_ORGS array (4 orgs: Acme Corporation, Green Leaf Consulting, Riverbank Studio, North Star Logistics) with state: organizations, deleteTarget, editingOrg, editName, editDomain. Interactions: handleDelete sets deleteTarget triggering a confirmation modal (confirmDelete filters org from state, cancelDelete clears target); handleSwitch sets one org active (maps all to active:false then flips target); handleEdit opens inline edit form pre-populating editName/editDomain; saveEdit validates editName.trim() then updates org in state; handleAdd generates a new org with Math.max id increment and immediately opens edit mode. JSX renders an ogs-add-btn with plus SVG icon, org cards with active badge, edit modal overlay, and delete confirmation dialog. CSS: 9682 chars.

As a frontend developer, implement the NotificationSettings section for the Settings page. This component renders 4 TOGGLE_ITEMS (email, push, receipt, category) each with a custom inline SVG icon, label, and description. A reusable ToggleSwitch sub-component renders a styled checkbox with ns-switch-track (active/inactive class variants) and ns-switch-thumb (active/inactive class variants). FREQUENCY_OPTIONS array provides 4 radio-style frequency choices: instant, daily, weekly, never. State managed via useCallback-wrapped toggles setter and a frequency state. Each toggle card shows icon, label, description, and the ToggleSwitch. The frequency selector renders as a fieldset of styled radio options. CSS: 6440 chars.

As a frontend developer, implement the SecuritySettings section for the Settings page. This is a complex security management section with: SESSIONS array (3 sessions: iPhone 15 Pro current, MacBook Pro, iPad Air) rendered as session cards with DeviceIcon sub-component (phone/tablet/laptop type detection), location, lastActive, and a revoke button. Password change form with 3 fields (current, new, confirm) each with EyeIcon/EyeOffIcon toggle for visibility; computeStrength function scoring passwords on 5 rules (minLength 8, upper, lower, digit, special) returning level (weak/fair/good/strong) and score (25/50/75/100) driving a progress bar; getValidationErrors checks minimum length. State: sessions, password fields, showCurrent/showNew/showConfirm booleans, strength object, validationErrors, saved. CSS: 12338 chars.

As a frontend developer, implement the PrivacySettings section for the Settings page. This component renders 3 PRIVACY_TOGGLES (analytics, marketing, thirdparty) each with: id, inline SVG icon, iconClass (pvs-card-icon--analytics/marketing/thirdparty), title, description, and detail text. State: toggles object ({analytics:true, marketing:false, thirdparty:false}) and consentTimestamps object ({analytics:'2026-05-15T09:42:00Z', marketing:null, thirdparty:null}). handleToggle flips the boolean and simultaneously updates the corresponding timestamp (new Date().toISOString() when enabling, null when disabling). formatTimestamp formats ISO strings to 'May 15, 2026, 09:42 AM' style using toLocaleDateString. Each card displays the formatted consent timestamp when enabled. CSS: 6731 chars.

As a frontend developer, implement the AppearanceSettings section for the Settings page. This component provides theme and accent color customization with: ACCENT_COLORS array (4 options: Teal #2A9D8F, Crimson #E63946, Orange #F4A261, Gold #E9C46A each with id/label/color/hex). State: themeMode ('light'|'dark'|'system'), selectedAccent (default 'primary'), showToast (boolean). currentAccent derived via Array.find. handleApply (useCallback) sets showToast=true then clears after 2500ms setTimeout. Theme mode section renders as a radiogroup div with 3 aps-theme-option cards (light/dark/system), each with aps-theme-radio dot, label, description, and SVG icon; keyboard accessible via onKeyDown Enter/Space. Accent section renders 4 circular color swatches. A live preview card demonstrates the selected theme+accent combination. CSS: 10726 chars.

As a frontend developer, implement the DangerZone section for the Settings page. This component implements a multi-step account deletion flow with: DELETE_CONFIRM_PHRASE constant ('delete my account'), MODAL_STEPS enum (CONFIRM_READ=0, PASSWORD_INPUT=1, TYPE_CONFIRM=2). State: modalOpen, step, password, passwordError, confirmText, deleting. Refs: passwordInputRef, confirmInputRef used with useEffect to auto-focus the active step's input when step/modalOpen changes. Body scroll lock via useEffect on modalOpen. openModal resets all state to step 0. closeModal is blocked when deleting=true. handleOverlayClick closes on backdrop click (e.target===e.currentTarget) if not deleting. handleKeyDown closes on Escape if not deleting. goToPasswordStep advances to step 1. verifyPassword validates password (non-empty, length≥4) then advances to step 2 with handlePasswordKeyDown Enter shortcut. handleDelete sets deleting=true then simulates async deletion via setTimeout. handleConfirmKeyDown triggers handleDelete on Enter when confirmText===DELETE_CONFIRM_PHRASE. CSS: 10758 chars.

As a frontend developer, implement the ReceiptActionBar section for the Receipt page. Sticky bottom action bar using framer-motion and GSAP. State: saving (bool), feedback ({ type: 'success'|'saved-next'|'discarded', text }), showDiscard (bool), undoStack[], redoStack[]. SaveIcon, ArrowRightIcon, TrashIcon, UndoIcon, RedoIcon, CheckIcon, AlertIcon as inline SVG components with rab-btn-icon/rab-feedback-icon classes. showFeedback() useCallback clears previous feedbackTimer via useRef and sets new setTimeout to auto-dismiss feedback. GSAP used for button press ripple/bounce animations on action triggers. AnimatePresence wraps feedback toast for enter/exit transitions. Discard confirmation modal controlled by showDiscard. Undo/redo stack manipulation on save/discard actions.