space-idea

As a frontend developer, implement the LoadMore section for the Materials page. Uses `useState` for `loading` (false) and `reachedEnd` (false) states. Build: (1) a `handleLoadMore` handler that sets `loading=true`, runs a 1200ms `setTimeout` simulating an API fetch, then sets `loading=false` and uses `Math.random() < 0.4` to probabilistically set `reachedEnd=true` (mimicking a `hasMore` flag from a real API response); (2) when `reachedEnd=true`, render an `lm-end` div with two `lm-end-line` dividers flanking a 'You've reached the end of available materials' span; (3) otherwise render an `lm-btn` button that shows a spinner (`lm-spinner` + `lm-spinner-ring`) and 'Loading Materials…' text during loading, or 'Load More Materials' when idle — button is `disabled` while loading with appropriate `aria-label`. Apply `LoadMore.css` (2342 chars). Depends on MaterialsGrid being present to logically follow the grid.

As a Backend Developer, implement phone OTP authentication API using FastAPI. Endpoints: POST /api/v1/auth/send-otp (accepts phone + country_code, validates format, generates 6-digit OTP, stores in Redis with 10-min TTL, sends via SMS provider — integrate with MSG91 or Twilio India), POST /api/v1/auth/verify-otp (accepts phone + otp, validates against Redis, creates/retrieves user record, returns JWT access_token + refresh_token with role claim), POST /api/v1/auth/refresh (rotates refresh token), POST /api/v1/auth/logout (invalidates refresh token). Implement JWT middleware with role-based guards (admin, provider, customer). Rate limiting: max 3 OTP sends per phone per hour using Redis counter. Return user role for frontend redirect logic (getRoleRedirect). Store phone, role, language, location in users table on first login.

As a Frontend Developer, set up global state management for the space-idea platform using React Context API (or Zustand if preferred). Create: (1) AuthContext — stores user object (id, phone, role, name, subscription_tier), access/refresh tokens, isAuthenticated, login/logout actions, token refresh logic; (2) UserContext — active language selection (default 'en'), location (lat/lng + city name), user preferences; (3) ChatContext — unread conversation count for Navbar notification dot, active conversation id; (4) NotificationContext — toast/snackbar notification queue for API success/error feedback. Implement ProtectedRoute component wrapping React Router routes requiring authentication. Implement RoleRoute restricting access by role (admin, provider, customer). Wrap App in providers. Persist auth state to localStorage with secure token storage pattern.

As a DevOps Engineer, set up GitHub Actions CI/CD pipeline for the space-idea platform. Workflows: (1) PR checks — lint (ESLint for React, flake8/ruff for FastAPI), type checks (mypy), unit tests (pytest for backend, Jest for frontend), build verification; (2) staging deploy — on merge to main: build Docker images, push to ECR, deploy to ECS/EKS staging environment, run smoke tests; (3) production deploy — manual approval gate, blue-green deployment on AWS ECS. Configure secrets: AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, DATABASE_URL, REDIS_URL, JWT_SECRET, MSG91_API_KEY. Add .github/workflows/ci.yml, deploy-staging.yml, deploy-prod.yml. Configure Dockerfile for frontend (multi-stage Node build) and backend (Python slim). Add .dockerignore files. Note: does NOT recreate existing k8s chart — adds CI layer on top.

As a Backend Developer, implement background notification system using FastAPI BackgroundTasks and/or Celery for async processing. Notification triggers: (1) new lead matched to provider when requirement posted — call POST /api/v1/leads internally; (2) new message received in conversation — push to recipient; (3) quote received/accepted/rejected — notify relevant party; (4) order status change — notify customer and provider; (5) admin approval/rejection of provider profile. Implement NotificationService with send_push(user_id, title, body, data) and send_in_app(user_id, type, payload). Store notifications in a notifications table (id, user_id, type, title, body, data{}, read, created_at). GET /api/v1/notifications (list unread notifications for authenticated user, paginated), PUT /api/v1/notifications/:id/read (mark as read), PUT /api/v1/notifications/read-all. Integrate Firebase Cloud Messaging (FCM) for mobile push. Note: depends on Database Models (ece6d85b) and Redis Cache (dc8d6cf5).

As a frontend developer, implement the OnboardingProgressBar section for the Onboarding page. This section uses D3.js (imported as * from 'd3') with a trackSvgRef to render an animated SVG progress bar. On each currentStep change, the useEffect clears the SVG, appends a linearGradient (#FF8C00 → #FFA54F) via defs, draws a background rect and an animated fill rect using d3.easeCubicInOut over 800ms, and adds a glow stroke rect that fades in with a 400ms delay. Renders an 'opb-header-row' with step counter and STEP_LABELS[currentStep-1], an 'opb-track' SVG container, and an 'opb-dots-row' with dot indicators for all 7 steps. Accepts a currentStep prop (default 1). CSS prefix: 'opb-'.

As a frontend developer, implement the OnboardingUserTypeSelector section for the Onboarding page. This section renders 8 user type cards (Customer, Labour, Mestri, Plumber, Architect, Contractor, Supplier, Admin) using Framer Motion's motion and AnimatePresence with containerVariants (staggerChildren: 0.06, delayChildren: 0.05) and cardVariants (spring stiffness:180, damping:22, mass:0.8, y:32 entry). Icons are sourced from lucide-react (User, HardHat, Wrench, Droplets, Ruler, Briefcase, Package, Shield). Uses useState for selectedId and useRef for gridRef. handleKeyDown implements full arrow-key grid navigation (ArrowRight/Left/Up/Down) computing column count from window.innerWidth breakpoints (1024→4 cols, 480→2 cols, 1→1 col). Accepts selectedUserType and onSelect props. Toggle deselect on re-click. CSS prefix: 'outs-'. aria role='radio' on each card.

As a frontend developer, implement the OnboardingLocationPicker section for the Onboarding page. This section uses useState for address, radius (default 10), gpsActive, gpsFetching, and currentCoords. It calls navigator.geolocation.getCurrentPosition on the GPS button click, storing lat/lng (toFixed(5)) in currentCoords state and constructing a formatted address string. The map preview area ('olp-map-placeholder') shows a MapPin icon from lucide-react with dynamic mapDisplay text and hint. Three radius options (5km, 10km, 25km) are rendered as selector buttons. The GPS toggle button changes label between 'Use Current Location' / 'Acquiring Location…' / 'Current Location Active — Tap to Clear' and applies 'olp-gps-active' class and 'olp-gps-spin' animation to the Navigation icon during fetch. Notifies parent via onDataChange({ address, radius }). CSS prefix: 'olp-'.

As a frontend developer, implement the OnboardingVerification section for the Onboarding page. This section handles document upload for two types: Aadhaar Card (🪪) and PAN Card (📋). Uses useState for activeDocType, files ({ aadhaar: null, pan: null }), dragOver, and validation state. Implements drag-and-drop via onDrop/onDragOver handlers using useCallback. A hidden file input (fileInputRef) accepts PDF, JPG, PNG up to 5MB (MAX_SIZE_BYTES). The validateFile callback checks ACCEPTED_TYPES and MAX_SIZE_BYTES, returning { valid, label, detail } objects. Valid files update the files map for the activeDocType key; invalid files clear that slot and show validation error. notifyDocs maps the files state to { name, status: 'Verified', type } objects and calls onDataChange({ verifiedDocs }). formatFileSize utility renders B/KB/MB. CSS prefix: 'ovf-'.

As a frontend developer, implement the OnboardingActionButtons section for the Onboarding page. This section renders Back and Next/Submit navigation buttons with useState for loading state. handleNext sets loading=true and calls onNext after a setTimeout of 1200ms on the last step or 300ms otherwise, then resets loading. handleBack is a no-op if isFirstStep or loading. The back button has visibility:hidden (not display:none) on step 1 and uses the 'oab-btn--back--hidden' class. The next button label changes to 'Complete Profile' on the last step, applying 'oab-btn--submit' class. Loading state renders an 'oab-spinner' with an 'oab-spinner-ring' child and disables the button. Inline SVG chevron icons (left/right arrows for back/next, checkmark for submit) are included directly in JSX. Accepts currentStep, totalSteps, onNext, onBack props. CSS prefix: 'oab-'.

As a frontend developer, implement the HomeGalaxyHero section for the Home page. Build a full 3D interactive hero using `@react-three/fiber` Canvas with `useFrame`, `useThree`, `OrbitControls`, `Stars` (DreiStars), and `Text` from `@react-three/drei`, plus `* as THREE`. Core elements: (1) Fibonacci sphere distribution (`fibonacciSphere(n, radius)` utility placing 12 feature nodes at calculated [x,y,z] coords); (2) 12 FEATURES cards (Find Professionals, Post Requirement, Buy & Sell Materials, Provider Leads, Showcase Portfolio, In-App Chat, Compare Quotes, Verified Reviews, Premium Plans, Location Search, Turnkey Projects, Analytics & Reports) rendered as interactive 3D objects; (3) `useState`, `useRef`, `useMemo`, `useCallback` for performance and selected-feature state management; (4) `AnimatePresence` + `motion` from framer-motion for feature detail overlay panel with Search, FileText, Star, X lucide icons; (5) `Suspense` boundary wrapping the Canvas. This is the highest-complexity section on the page.

As a frontend developer, implement the HomePlatformOverview section for the Home page. Build the `hpo-root` section with: (1) four PLATFORM_BLOCKS rendered as animated cards (Connect Customers to Professionals, Verified Quality & Trust, Multilingual Support, Location-Based Discovery) using Users, ShieldCheck, Languages, MapPin lucide icons; (2) `useRef` + `useInView` from framer-motion with `once: true` and `-80px` margin for scroll-triggered entrance; (3) `iconVariants` with staggered `delay: 0.1 + i * 0.12` fade+scale animations and `iconSpinVariants` triggering a 360° rotation on enter; (4) atmospheric parallax background with `hpo-atmo-blob a1–a3` at 0.2× scroll speed and midground `hpo-mid` layer containing `hpo-mid-dot d1–d8` and `hpo-mid-ring r1–r2` at 0.6× scroll speed via CSS `--scroll` custom property.

As a frontend developer, implement the HomeUserTypes section for the Home page. Build a persona showcase with 9 PERSONAS (Customer, Labor, Mestri, Plumber/Electrician, Architect, Contractor, Material Supplier, and additional types) using a flip-card interaction pattern powered by framer-motion `motion` components. Each card displays: (1) front face with lucide icon (User, Wrench, HardHat, Hammer, Building2, Briefcase, Truck etc.), persona name/role, avatarBg color, frontDesc, and tags array as badge pills; (2) back face revealing backDesc and a CTA link to `/Onboarding`; (3) card flip animation triggered on hover/tap. Icons imported include User, Wrench, HardHat, Hammer, Building2, Truck, Shield, Briefcase, PaintBucket from lucide-react. No local state hooks — flip state managed via CSS or framer-motion variants.

As a frontend developer, implement the HomeHowItWorks section for the Home page. Build a 5-step sequential process display using the `steps` array (Sign Up & Verify, Create Your Profile, Post & Browse Requirements, Connect & Chat, Complete & Review) with lucide icons UserPlus, UserCircle, ClipboardList, MessageSquare, Star. Implement: (1) `StepCard` sub-component using `useRef` + `useInView` (once: true, -60px margin) for per-card scroll triggers; (2) `badgeVariants` spring animation (scale 0.3→1, stiffness 260, damping 18, delay 0.08s) for step number badges; (3) `iconVariants` spring animation (rotate -90→0, scale 0.4→1, delay 0.18s) for step icons; (4) `contentVariants` ease-out animation (y 24→0, duration 0.55s, delay 0.24s) for text content; (5) `headerVariants` for section heading; (6) `isDesktop` and `animationKey` props passed to StepCard for responsive layout and re-trigger control; (7) `useEffect`, `useCallback` hooks for desktop detection. SVG connector lines rendered between steps.

As a frontend developer, implement the HomeCTA section for the Home page. Build the `hcta-root` section with: (1) ripple click effect system using `useState(ripples[])`, `useRef(rippleCounter)`, and `useCallback(spawnRipple)` that captures click coordinates (clientX/Y relative to button rect), computes ripple size, appends to ripples array, and auto-clears after 750ms; separate `primaryRipples` and `secondaryRipples` filtered arrays; (2) `AnimatePresence` wrapping ripple spans with `rippleAnim` (scale 0→4, opacity 0.6→0, 700ms easeOut); (3) entrance animations: `headlineAnim` (y 24→0, 600ms), `subAnim` (y 20→0, delay 0.15s), `btnPrimaryAnim` (scale 0.8→1, spring delay 0.35s), `btnSecondaryAnim` (scale 0.8→1, delay 0.55s) using cubic-bezier easing; (4) lucide icons UserPlus, Briefcase, Shield on CTA buttons; (5) atmospheric parallax `hcta-atmos` layer (3 blobs at 0.2× speed) and midground `hcta-mid` layer (3 lines + 5 dots at 0.4× speed).

As a frontend developer, implement the Footer section for the Home page. Build the `ftr-root` footer with: (1) animated star field using `useMemo` to generate 22 star objects with randomized top/left/delay/size properties rendered as `ftr-star` spans with CSS animation; (2) `ftr-glow` decorative overlay; (3) brand column with Rocket icon, 'space-idea' branded heading, tagline text, and social links (Facebook, Instagram, Linkedin, Twitter, Youtube icons) from lucide-react; (4) Quick Links column from `quickLinks` array (About, FAQ, Terms, Privacy); (5) Explore column from `exploreLinks` array (Find Providers, Browse Materials, Post a Requirement, Listings) linking to /Providers, /Materials, /Post, /Listings; (6) contact column with Mail and MessageCircle icons; (7) language switcher from `languages` array (English, हिंदी, मराठी, தமிழ், తెలుగు, বাংলা) using `useState(activeLang)` for active state. Note: this Footer component is shared across pages and may be reused on subsequent pages.

As a frontend developer, implement the ProfileSidebar section for the Profile page. Build a navigation sidebar using the NAV_TABS array (Overview, Portfolio, Verification, Reviews, Settings, Subscription) with inline SVG icons defined in TAB_ICONS_SVG (LayoutDashboard, Briefcase, ShieldCheck, Star, Settings, Crown). Each tab renders its icon plus a badge — numeric badges (e.g. 4, 12), string badges ('pending', 'pro'), or null. Use useState to track the active tab and apply active styling. Import and apply ProfileSidebar.css for layout and theming.

As a frontend developer, implement the SearchHero section for the Search page. This section renders a full-width search bar with three interactive dropdown/input controls: (1) a text input with a Search icon for keyword queries, (2) a location dropdown (locRef) with LOCATIONS array (Mumbai, Delhi, Bangalore, Pune, Hyderabad, Chennai) and MapPin + ChevronDown icons, (3) a category dropdown (catRef) with CATEGORIES array (All Services, Contractors, Architects, Engineers, Labourers, Material Suppliers, Equipment Rental, Interior Designers) with dynamic icon rendering via `CategoryIcon = category.icon`. Both dropdowns use `useRef` for outside-click detection via `document.addEventListener('mousedown', handleClick)` in a `useEffect`. State hooks: `useState` for query, location, category, activeFilters, locOpen, catOpen. Quick filter chips (QUICK_FILTERS: Verified/CheckCircle, Available Now/Clock, Nearby First/Navigation) are toggleable via `toggleFilter()` updating `activeFilters` array. A search button triggers `handleSearch()` and the input supports `Enter` key via `handleKeyDown`. Heading reads 'Find Construction Professionals' with subtitle. Import and apply SearchHero.css. Note: Navbar component may already exist from the Home page (task dc58518c-fe39-4661-95bd-edf8e2ceed5a).

As a frontend developer, implement the FilterPanel section for the Search page. This is a collapsible sidebar/panel component using `useState` for: expanded (toggle visibility), categories (multi-select array, default ['contractors','architects','laborers']), selectedRating (single select, default 4), distance (range slider, default 25km), availableNow (boolean toggle), priceMin/priceMax (text inputs), and verifiedOnly (boolean toggle). The panel header uses SlidersHorizontal and ChevronDown (with 'flip' CSS class when expanded) icons and displays an `activeFilterCount` badge computed as `categories.length + (priceMin || priceMax ? 1 : 0) + (verifiedOnly ? 1 : 0)`. The `fp-body-wrapper` div conditionally applies 'expanded' class for CSS-driven collapsible animation. Service Category checkboxes render CATEGORIES array (Contractors/84, Architects/47, Engineers/63, Laborers/152, Material Suppliers/91, Interior Designers/38) via `toggleCategory()`. Rating filters render RATINGS array (5 Stars/42, 4 & above/128, 3 & above/203) with Star icons using `setSelectedRating`. ShieldCheck icon used for Verified Only toggle. `handleApply()` collapses panel; `handleClear()` resets all state to defaults. The toggle supports keyboard accessibility (Enter/Space keys). Import and apply FilterPanel.css.

As a frontend developer, implement the ResultsGrid section for the Search page. This section renders a grid of provider cards using a PROVIDERS array of 9+ hardcoded entries (Rajesh Builders, Sharma Construction, Kumar & Sons Architects, Patel Electrical Services, GreenLeaf Interiors, Deshmukh Plumbing Works, Star Metal Fabricators, Verma Waterproofing Co., Gupta Tiling Experts) with fields: id, name, initials, avatar (null), service, rating, reviews, location, distance, rate, rateUnit, availability ('available'/'busy'/'offline'), verified (boolean), and featured (boolean). Uses `framer-motion` (`motion`, `AnimatePresence`) for card entrance/exit animations. Uses `d3` (likely for rating bar or distance scale visualizations). State hooks: `useState` and `useMemo` for filtered/sorted provider list. Each card displays: initials avatar fallback (avatar is null), service badge, star rating with review count, location with distance, rate with unit, availability status indicator, verified badge (ShieldCheck-style), and featured highlight. Import and apply ResultsGrid.css.

As a frontend developer, implement the PostHeader section for the Post page. This section renders a multi-step form header with a D3-animated circular progress arc (SVG-based, using `d3.transition` with `easeCubicInOut` over 800ms, animating `stroke-dashoffset` on `.ph-arc-fill`). State includes `currentStep` (useState, default 0) and `animationRef` to cancel in-flight D3 transitions. The header displays a breadcrumb row (Home / Post), an `<h1>` title 'Post Construction Requirement', and a step indicator showing `currentStep+1 / totalSteps`. Four STEPS are defined: Details, Location, Budget, Review. `handleStepClick` allows navigating to already-visited or next step only. The D3 arc SVG uses a 52×52 viewBox, two circles (`.ph-arc-bg`, `.ph-arc-fill`), rotated -90deg, with `strokeDasharray` set to circumference (2πr, r=22). The section also renders clickable step labels. Imports `d3` and `PostHeader.css`. Note: Navbar component may already exist from the Home page task.

As a frontend developer, implement the PostPreview section for the Post page. This section renders a read-only preview card of a construction requirement using static `previewData` state containing: title ('2BHK Apartment Interior Renovation in Whitefield'), a multi-line summary, location ('Whitefield, Bangalore'), budget range (₹3,50,000–₹5,50,000), projectType, timeline ('3–4 weeks'), timelinePercent (35), 5 attachments (mix of image/document types), and providerMatches (12). A D3 stacked horizontal bar chart is rendered via `barRef` into a container div using `d3.select`, `svg.selectAll('rect')`, and four segments (Planning 25%, Materials 20%, Execution 40%, Finishing 15%) colored with an orange palette (`#FFA54F`, `#FF8C00`, `#e07900`, `#c06a00`). The chart is responsive via a `resize` event listener. Lucide icons used: `MapPin`, `Wrench`, `IndianRupee`, `FileText`, `Image`, `Eye`. A `formatBudget` helper formats numbers. Imports `d3` and `PostPreview.css`.

As a frontend developer, implement the SubmissionActions section for the Post page. This section provides three action buttons — Post Requirement, Save Draft, and Cancel — with full async state management. State: `status` (idle | submitting | success | error) and `statusMsg` string. `handlePost` sets status to 'submitting' with message 'Posting your requirement…', then after 1800ms resolves to 'success' with a confirmation message. `handleSaveDraft` does the same with 1000ms delay and draft-saved message. `handleCancel` redirects to `/Dashboard`. A conditional status banner (`.sa-status`) renders with modifier classes `sa-success`, `sa-error`, or `sa-pending` and `sa-visible`. The success state displays an inline SVG check circle (`.sa-check-circle`, `.sa-check-tick`). The primary button shows a checkmark SVG icon (`.sa-btn-check`) and disables during submitting/success states. Spinner via `.sa-spinner` CSS class. `handleDismissStatus` resets state to idle. All handlers are memoized with `useCallback`. Lucide icons: `Check`, `Save`, `X`, `AlertCircle`, `Loader2`. Imports `SubmissionActions.css`.

As a frontend developer, implement the ProvidersHeader section for the Providers page. This section renders a hero-style search interface using React with useState and useMemo hooks. Implement the phd-root/phd-inner layout with a phd-title-block containing an h1 with a phd-title-accent span ('Construction' highlighted). Build the phd-controls-row with: (1) a phd-search-wrapper containing an SVG magnifier icon, a controlled text input (searchQuery state, handleSearchChange/handleClearSearch handlers) with aria-label, and a conditional clear button; (2) a location <select> bound to location state with the LOCATIONS array (14 cities + 'All Locations'); (3) a radius <select> bound to radius state with RADIUS_OPTIONS (5/10/25/50/100 km + 'Any distance'); (4) a toggle button for showAdvanced state (handleToggleAdvanced). Implement the resultsHint useMemo that computes '128 providers found' when any filter deviates from defaults. Apply ProvidersHeader.css (6055 chars). This component chains from the Dashboard page — include the DashboardHeader task as a page-level dependency.

As a frontend developer, implement the UsersHeader section for the Users page. This section renders a top-level management header (`uh-root` > `uh-inner` > `uh-top`) with two main areas: a title group showing 'Manage Users' (`uh-title`) with inline stats displaying hardcoded `totalUsers` (248) and `activeUsers` (187) with an animated status dot (`uh-stat-dot--active`), and an actions area containing a controlled search input (`useState` for `searchQuery`) with an inline SVG search icon, a conditional clear button (×) that appears when `searchQuery` is non-empty via `handleClearSearch`, and an Export CSV button with a download SVG icon (`uh-export-btn`). Apply `UsersHeader.css` with full responsive layout.

As a frontend developer, implement the CategoriesHeroSection for the Categories page. This section features a Three.js/React Three Fiber 3D particle galaxy background using GalaxyParticles component with 220 particles (PARTICLE_COUNT), distributed via spherical coordinates with Y_FLATTEN=0.35 for a flattened galaxy effect. Particles are colored in three groups: 40 orange particles (r:1.0, g:0.55, b:0.0), 18 slate-teal particles, and the remainder white/silver. The mesh animates via useFrame with slow Y-axis rotation (delta*0.12) and X-axis tilt (delta*0.04). Uses bufferGeometry with bufferAttribute for positions, colors, and sizes, with pointsMaterial using vertexColors, additive blending (blending=2), and sizeAttenuation. The hero overlay includes a Sparkles icon, headline text, subtitle, and a Search icon input field for category search. Import CategoriesHeroSection.css for styling. Note: Navbar component may already exist from the Home page (task dc58518c-fe39-4661-95bd-edf8e2ceed5a).

As a frontend developer, implement the ReportsHeader section for the Reports page. This section renders a top row with breadcrumb navigation (Dashboard → Reports via ChevronRight icon and anchor tag), an h1 title, and a dual date-range picker using two controlled date inputs with useState hooks (dateFrom, dateTo initialized to '2026-05-21' and '2026-06-20'). Below the top row, render a horizontal rh-stats-row containing 4 quickStat pill cards — Total Users, Total Providers, Platform Revenue (₹ 18.2L), and Active Sessions — each with a colored icon wrapper (orange, slate, green, gold variants via iconClass), value, label, and a trend badge showing up/down direction. A reportTypeFilters tab bar renders 4 filter labels (Platform Activity, User Engagement, Provider Analytics, Revenue) with activeFilter state managed via useState. Uses lucide-react icons: Calendar, ChevronRight, Users, Building2, TrendingUp, DollarSign, Activity. Styles from ReportsHeader.css. Note: Navbar may already exist from the Home page (task dc58518c-fe39-4661-95bd-edf8e2ceed5a).

As a Backend Developer, implement user management API endpoints. GET /api/v1/users (admin only, paginated, filterable by type/status/location/date_range, sortable), GET /api/v1/users/:id, PUT /api/v1/users/:id (update profile fields), DELETE /api/v1/users/:id (admin only, soft delete), POST /api/v1/users/:id/verify (admin: set verified status), POST /api/v1/users/:id/suspend (admin: suspend account), POST /api/v1/users/bulk-action (admin: send_message/verify/suspend/delete for selected IDs), GET /api/v1/users/:id/profile (public profile with aggregated stats), PUT /api/v1/users/me/profile (update own profile: name, email, bio, language, location). Include user type filtering (customer/provider/supplier/labor/contractor/architect/engineer). Export CSV endpoint: GET /api/v1/users/export?format=csv. Return paginated response with total_count for pagination controls.

As a Backend Developer, implement provider management API endpoints. GET /api/v1/providers (public, location-based search with lat/lng + radius filter, filterable by type/rating/verified/availability/experience, sortable by rating/distance/jobs, paginated — 20/page), GET /api/v1/providers/:id (full profile with portfolio summary, reviews aggregate, subscription tier), POST /api/v1/providers (create provider profile — called after onboarding), PUT /api/v1/providers/:id (update own profile), POST /api/v1/providers/:id/approve (admin only), POST /api/v1/providers/:id/reject (admin only, with reason), GET /api/v1/providers/pending (admin: list pending approval queue), GET /api/v1/providers/:id/leads (provider: own leads), GET /api/v1/providers/:id/stats (dashboard stats: total leads, active leads, conversion rate, response rate). Use Haversine formula or PostGIS ST_DWithin for radius-based filtering. Cache search results in Redis (TTL 5 min). Full-text search on name, bio, services, tags using PostgreSQL tsvector.

As a Backend Developer, implement onboarding and profile completion API endpoints. POST /api/v1/onboarding/start (initialize onboarding session for authenticated user, return step state), POST /api/v1/onboarding/profile (save profile form data: full_name, email, userType, services, skills, contract_types, materials, business_name, website), POST /api/v1/onboarding/location (save address + radius coordinates from GPS or manual entry), POST /api/v1/onboarding/documents (accept multipart file uploads for Aadhaar/PAN — store to S3 private bucket, return presigned URL for preview, queue admin review), POST /api/v1/onboarding/submit (mark profile as submitted for review, trigger admin notification), GET /api/v1/onboarding/status (return current step and completion state). PUT /api/v1/profile/basic-info (update editable basic profile fields including language preference and service radius). GET /api/v1/profile/me (full authenticated user profile with all sub-sections).

As a Backend Developer, implement construction requirement posting API. POST /api/v1/requirements (create new requirement: title, description, location, budget_min, budget_max, project_type, timeline, attachments[], category), GET /api/v1/requirements (list own requirements for customer, or matched requirements for provider — filtered by location radius, category, budget), GET /api/v1/requirements/:id, PUT /api/v1/requirements/:id (update own requirement), DELETE /api/v1/requirements/:id (soft delete), POST /api/v1/requirements/:id/attachments (upload images/documents to S3, return signed URLs), GET /api/v1/requirements/:id/matches (return matched providers sorted by match_percent based on category, location, budget overlap). Implement matching algorithm: score providers by service overlap, distance from requirement location, rating, and subscription tier (premium providers ranked higher). POST /api/v1/requirements/:id/save-draft (persist draft state). Notify matched providers via background task when requirement is posted.

As a Backend Developer, implement real-time chat API using FastAPI WebSockets + Redis pub/sub. WebSocket endpoint: WS /api/v1/chat/ws/{conversation_id} (authenticated, join room, broadcast messages to participants via Redis channel). REST endpoints: GET /api/v1/conversations (list all conversations for authenticated user with last_message, unread_count, participant info), GET /api/v1/conversations/:id/messages (paginated message history, newest-first, cursor-based), POST /api/v1/conversations (start new conversation between customer and provider — creates conversation record if not exists), POST /api/v1/conversations/:id/messages (send message: text/attachment types, store to DB, publish to Redis channel), PUT /api/v1/conversations/:id/messages/:msg_id/status (mark as read/delivered), POST /api/v1/conversations/:id/attachments (upload file to S3 chat-attachments bucket, return URL), DELETE /api/v1/conversations/:id (soft delete conversation). Track online presence via Redis key with 30s TTL refreshed by WebSocket heartbeat.

As a Backend Developer, implement materials marketplace API. GET /api/v1/materials (public, searchable + filterable by category/location/price_range/verified/availability, sortable, paginated with load-more cursor), GET /api/v1/materials/:id, POST /api/v1/materials (seller creates listing: name, category, price, unit, original_price, location, images[], stock, description), PUT /api/v1/materials/:id (update own listing), DELETE /api/v1/materials/:id (soft delete), POST /api/v1/materials/:id/images (upload to S3, return URLs), POST /api/v1/materials/:id/contact (initiate conversation with seller), GET /api/v1/materials/categories (list categories with counts: AAC Blocks, Aggregates, Bricks, Cement, Doors & Windows, etc.). Full-text search using PostgreSQL tsvector on name + description. Location-based filtering using lat/lng radius. Cache category counts in Redis. Return verified badge, availability status, distance from user location.

As a Backend Developer, implement the unified listings API for materials and services offered by providers/suppliers. GET /api/v1/listings (public, filterable by categories[], price_range[], condition, radius, verified_only, availability — In Stock / On Demand, sortable by newest/popular/rated/price_asc/price_desc, paginated — 248 results style), GET /api/v1/listings/:id, POST /api/v1/listings (supplier creates listing with images, pricing, stock info), PUT /api/v1/listings/:id, DELETE /api/v1/listings/:id (soft delete), POST /api/v1/listings/:id/photos (S3 upload, return CloudFront CDN URLs). Distinguish between priced material listings (price/priceUnit set) and service listings (price null, renders 'Get Quote' CTA). Return verified badge, seller info, location + distance, rating + review count. Full-text + category search. Link to materials API for material-type listings.

As a Backend Developer, implement reviews and ratings API. POST /api/v1/reviews (customer submits review for provider after project completion: provider_id, rating 1-5, title, body, category), GET /api/v1/reviews (list reviews for a provider: GET /api/v1/providers/:id/reviews — paginated, filterable by rating/category/sort; includes aggregated stats: avg_rating, total_count, recommendation_pct, star_breakdown per tier), GET /api/v1/reviews/:id, PUT /api/v1/reviews/:id/reply (provider adds reply to own review), POST /api/v1/reviews/:id/helpful (customer marks helpful/unhelpful — toggle, tracked per user), DELETE /api/v1/reviews/:id (admin moderation: soft delete), POST /api/v1/reviews/:id/moderate (admin: flag/approve review). Update provider aggregate rating on new review (running avg). Return reviewer verified badge, relative timestamps.

As a Backend Developer, implement categories and services management API. GET /api/v1/categories (public, tree structure with parent/child, includes provider_count, project_count, badge_type — trending/featured), GET /api/v1/categories/:id (category detail with subcategories and top providers), POST /api/v1/categories (admin: create category with name, icon, parent_id, description), PUT /api/v1/categories/:id (admin: edit category), DELETE /api/v1/categories/:id (admin: soft delete), GET /api/v1/categories/featured (return 6 featured categories for CategoriesFeaturedSection), GET /api/v1/categories/search?q= (search categories by name). Cache category tree in Redis (TTL 30 min, invalidated on admin edit). Return ICON_MAP keys for frontend icon resolution. Support 42 total categories (TOTAL_CATEGORIES constant). Admin endpoints protected by admin role guard.

As a Backend Developer, implement subscription management API. GET /api/v1/subscriptions/plans (return plan definitions: Free/₹0, Premium/₹499, Pro/₹999 with monthly/annual pricing, feature flags per tier), GET /api/v1/subscriptions/me (provider's current subscription: tier, status, renewal_date, billing_cycle), POST /api/v1/subscriptions (provider subscribes: plan_id, billing_cycle — monthly/annual; annual saves %), PUT /api/v1/subscriptions/cancel (cancel at period end, set status=cancelling), PUT /api/v1/subscriptions/upgrade (change tier mid-cycle with proration), GET /api/v1/subscriptions/:id (admin: view any subscription). Feature gating middleware: check subscription tier before allowing lead access beyond free limits, featured listing boost, priority visibility. Webhook endpoint POST /api/v1/subscriptions/webhook (handle payment gateway callbacks — integrate with Razorpay for INR payments). Return billing history array.

As a Backend Developer, implement portfolio management API. GET /api/v1/portfolio (public list of all platform projects, filterable by category/search/sort — All/Residential/Commercial/Materials/Services/Interiors/Renovation, paginated), GET /api/v1/providers/:id/portfolio (provider's projects), GET /api/v1/portfolio/:id (single project detail), POST /api/v1/portfolio (provider adds project: title, category, description, client, completion_date, duration, location, images[], testimonial, rating), PUT /api/v1/portfolio/:id (update own project), DELETE /api/v1/portfolio/:id, POST /api/v1/portfolio/:id/images (S3 upload, return CloudFront URLs). GET /api/v1/portfolio/stats (platform-wide stats: total_projects, verified_providers, customer_satisfaction, completed_categories — used by PortfolioStats section). GET /api/v1/portfolio/testimonials (6 featured testimonials for PortfolioTestimonials carousel).

As a Backend Developer, implement saved/favourites API. GET /api/v1/saved (authenticated user's saved items, filterable by item_type: all/providers/materials/services; sortable by newest/oldest/name_asc/name_desc; returns full item detail joined from respective table), POST /api/v1/saved (save item: item_id, item_type — provider/material/service), DELETE /api/v1/saved/:item_id (unsave/remove by item_id + item_type), GET /api/v1/saved/counts (return count per type: total, providers, materials, services — for filter chips). Unique constraint on (user_id, item_id, item_type) to prevent duplicates. Return enriched item data: for providers include rating, verified, location, subscription_tier; for materials include price, availability, distance. Counts used for SavedFiltersBar chip labels.

As a Backend Developer, implement unified search API. GET /api/v1/search/providers (full-text + location search: q, location, lat, lng, radius, categories[], rating_min, available_now, verified_only, price_min, price_max, sort — returns paginated provider cards with distance), GET /api/v1/search/materials (search materials by name/category/location), GET /api/v1/search/unified?q= (cross-entity search returning providers + materials + categories grouped). Use PostgreSQL full-text search (tsvector/tsquery) on providers.name + bio + services + tags. Add GIN index on tsvector column. Location search via lat/lng + radius using earth_distance extension or Haversine SQL function. Quick filter support: verified=true, available_now (checks provider online/availability status), nearby_first (sort by distance ascending). Cache frequent search queries in Redis with 3-min TTL. Return facet counts for filter panel display.

As a Backend Developer, implement admin analytics and reporting API. GET /api/v1/reports/overview (platform metrics: total_users, total_providers, total_transactions, platform_revenue, avg_rating — each with sparkline data array for last 30 days), GET /api/v1/reports/monthly (monthly aggregated data: new_users, new_providers, reviews_posted per month for last 12 months — used by ReportsExport chart), GET /api/v1/reports/table (tabular report data by category: Users/Providers/Transactions/Materials/Equipment/Listings with nested details, sortable, paginated), GET /api/v1/reports/quick-stats (4 quick stat pills: total_users, total_providers, platform_revenue, active_sessions), GET /api/v1/reports/export?format=csv|excel|pdf&date_from=&date_to= (generate and return file download). All endpoints admin-only. Support date range filter (date_from, date_to) and data_group, user_type, region filters matching ReportsFilters component. Use SQL aggregations with GROUP BY month/category. Cache report results in Redis (TTL 10 min).

As a Backend Developer, implement public-facing platform statistics API for the Home, Platform, and landing pages. GET /api/v1/platform/stats (public: total_verified_providers, total_cities, total_completed_projects, total_reviews — used by PlatformHero STATS section and HomeGalaxyHero), GET /api/v1/platform/featured-providers (public: 5 featured providers for carousel — highest rated + premium subscribers), GET /api/v1/platform/service-categories (public: 12 service categories with icon key, name, provider_count — for PlatformServices grid), GET /api/v1/platform/trust-badges (public: aggregate stats for PlatformTrustBadges animated numbers), GET /api/v1/platform/how-it-works (static content or CMS-driven steps). Results cached aggressively in Redis (TTL 1 hour) as they are homepage data. Return counts formatted as integers (frontend formats with commas/units).

As a Tech Lead, verify the end-to-end integration between the Login page frontend implementation (LoginForm, LoginContainer, LoginFooter) and the Auth OTP backend API. Ensure: OTP send request from LoginForm calls POST /api/v1/auth/send-otp with phone + country_code; 30-second countdown and resend flow correctly rate-limited by backend; OTP verification calls POST /api/v1/auth/verify-otp and receives JWT tokens stored in AuthContext; getRoleRedirect uses role from JWT claims to navigate to correct page (/Dashboard for admin, /ProviderHome for provider, /Home for customer); 401 errors surface correct error messages in LoginForm; loading states match API response timing. Note: depends on LoginForm (679bc276) and LoginContainer (7f0dcdfe) frontend tasks.

As a Backend Developer, integrate SMS provider (MSG91 for Indian numbers) for OTP delivery. Create a sms_service.py module with send_otp(phone, otp, country_code) function. MSG91 integration: configure SENDER_ID, TEMPLATE_ID, ROUTE for transactional SMS. Fallback to Twilio for non-Indian numbers. Abstract behind SMSProvider interface for easy swapping. Add retry logic (max 2 retries, 500ms backoff). Log delivery status. Add MSG91_API_KEY, MSG91_SENDER_ID, MSG91_TEMPLATE_ID, TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN environment variables. For development/testing, add a mock SMS provider that logs OTP to console when ENVIRONMENT=development. Note: depends on Auth OTP API (bff72385).

As a Backend Developer, implement cross-cutting FastAPI middleware and dependency injection guards. (1) JWT Auth middleware: extract Bearer token from Authorization header, decode with python-jose, inject current_user into request context; (2) Role-based guards: Depends(require_role('admin')), Depends(require_role('provider')), Depends(require_role('customer')) — raise 403 if role mismatch; (3) Subscription tier guard: Depends(require_subscription('premium')) — check provider's active subscription tier before granting access to premium lead quota; (4) Rate limiting middleware using Redis: sliding window counter keyed by IP + endpoint, configurable limits (OTP: 3/hour, search: 100/min, general API: 1000/hour); (5) CORS middleware: allow origins from ALLOWED_ORIGINS env var; (6) Request logging middleware: log method, path, status_code, duration_ms; (7) Global exception handler returning standardized {detail, code, status_code} JSON errors. Note: depends on Auth OTP API (bff72385) and Redis Cache (dc8d6cf5).

As a Frontend Developer, implement internationalization (i18n) for the React frontend to support all Indian languages. Install and configure react-i18next with i18next. Create /src/locales/ directory with translation JSON files for: en.json, hi.json, bn.json, te.json, mr.json, ta.json, gu.json. Translate all UI strings visible in the Navbar language switcher, common button labels (Submit, Cancel, Save, Back, Next), form validation messages, empty state messages, and error messages. Configure i18next to detect language from: (1) UserContext language preference, (2) localStorage, (3) browser Accept-Language header. Integrate language switcher in Navbar (task dc58518c) and OnboardingHeader (task 596a7f3d) with UserContext.setLanguage. Lazy-load locale files to avoid bundle bloat. Note: depends on Global State Management (ff075f43) and Design System (4941b3fb).

As a Tech Lead, verify the end-to-end integration between the frontend notification dot (ChatContext unread count in Navbar task dc58518c, NotificationContext in ff075f43) and the backend notifications system (task T-BE-NOTIFICATIONS). Ensure: Navbar Bell icon badge count reflects GET /api/v1/notifications unread count on page load; real-time unread count increments when new notifications arrive via WebSocket or polling (every 30s); notification types (new_lead, new_message, quote_received, order_update, profile_approved) each route to correct page on click; mark-as-read calls PUT /api/v1/notifications/:id/read and decrements badge; mark-all-read clears badge; FCM push notifications work in browser when app is not active. Verify provider receives push notification when new lead is created after customer posts requirement.

As a frontend developer, implement the OnboardingProfileForm section for the Onboarding page. This is the largest section (24879 chars JSX + 9535 chars CSS) with inline SVG icon components: IconUser, IconMail, IconPhone, IconGlobe, IconBriefcase, IconWrench, IconBuilding, IconStore, IconCheckCircle. Uses D3.js for animated form elements, and useState/useRef/useEffect/useCallback hooks for form field state management. The form dynamically adapts fields based on the user type (userType prop) — covering full_name, email, phone, website/portfolio, business name, services, skills, contract_types, and materials fields. Includes real-time field validation with animated D3-driven feedback indicators. Notifies parent via onDataChange callback with structured formData. CSS prefix: 'opf-'.

As a frontend developer, implement the ProfileHeader section for the Profile page. Build a static profile header (ph-root/ph-inner layout) with an avatar image (Unsplash URL, 256x256), a verified badge overlay with an inline checkmark SVG (ph-verified-badge/ph-verified-icon), user name 'Rajesh Kumar', profession 'Civil Contractor & Builder', location rendered with a map-pin SVG, and a star rating row using STAR_DATA array (4 filled, 1 empty) rendered via polygon SVGs with conditional fill. Include an 'Edit Profile' button (ph-edit-btn) with a pencil SVG icon. Import and apply ProfileHeader.css.

As a frontend developer, implement the ProfileBasicInfo section for the Profile page. Build an editable info form using useState, useCallback, and useRef hooks. Render fields with inline SVG icons from the ICONS map (user, mail, phone, mapPin, compass, globe, clock, edit, save). Include a LANGUAGES multi-select dropdown (15 Indian languages array) and a service-radius slider snapping to RADIUS_STOPS = [5, 10, 15, 25, 50, 75, 100] km. Toggle between view and edit modes with save/cancel actions. Apply pbi-field-icon and pbi-edit-icon CSS classes. Import ProfileBasicInfo.css.

As a frontend developer, implement the ProfileVerification section for the Profile page. Render a DOCUMENTS array of 6 document cards (Aadhaar, GST, Contractor License, Safety Certification, Liability Insurance, PAN Card) each with status ('verified' or 'pending'), timestamp, and action buttons using lucide-react icons (ShieldCheck, Upload, Eye, Clock, FileText, RefreshCw, CheckCircle2). Import DocumentCard.css and ProfileVerification.css. Implement a VerificationGlobe component using Three.js directly (useRef + useEffect): create a WebGLRenderer with alpha:true, PerspectiveCamera at z=4, a SphereGeometry (1.15, 48, 48), and a dot-matrix particle system using BufferGeometry with 1800 random points at radius 1.18 rendered as THREE.Points with PointsMaterial (color 0xff8c00, size 0.025). Add a ring and animate globe rotation. Use useState to manage per-document upload state.

As a frontend developer, implement the ProfilePortfolio section for the Profile page. Render sampleProjects (6 items: Green Valley Residential, Metro Mall, Riverside Bridge, Sunrise Tech Park, Heritage Haveli, Coastal Highway) each with a category, testimonial, client, completionDate, color, and shape property. Build a ProjectGeometry component using @react-three/fiber Canvas with useFrame for continuous rotation (rotation.y += 0.004, rotation.x += 0.002) and a wireRef. Use projectShapes map (box, cylinder, torus, cone, sphere, octahedron) to select geometry args. Wrap geometry in Float from @react-three/drei and use MeshTransmissionMaterial, Environment, PresentationControls, ContactShadows, and Suspense. Manage filter/selected state with useState and useCallback. Import ProjectCard.css and ProfilePortfolio.css.

As a frontend developer, implement the ProfileReviews section for the Profile page. Render sampleReviews (9 items with id, name, initials, rating 3–5, date, category, text) with pagination at REVIEWS_PER_PAGE = 6. Use useState to track currentPage. Each review card displays initials avatar, star rating (using lucide-react Star icon), date, category badge, and review text. Show a summary header with MessageSquare icon (lucide-react) and aggregate rating. Implement previous/next pagination controls that slice the reviews array. Import ProfileReviews.css.

As a frontend developer, implement the ProfileSettings section for the Profile page. Build an accordion-style settings panel using openCards state (useState, default { notifications: true }) toggled by toggleCard(id). Render 5 CARDS (notifications, privacy, language, subscription, logout) with emoji icons and ps-card-icon CSS modifier classes. Inside the notifications card, render NOTIFICATION_SETTINGS (email, sms, push) as toggle rows using checkbox inputs styled as ps-toggle/ps-toggle-track; manage with notifications state and toggleNotification(id). Privacy card renders an isPublic toggle (useState true). Language card renders a LANGUAGES select (6 options: en/hi/bn/te/mr/ta) with language state. Subscription card displays static plan 'Premium', renewal date, and 'active' status from subscription state. Logout card calls handleLogout() which redirects to '/Login'. Import ProfileSettings.css.

As a frontend developer, implement the ProvidersFilters section for the Providers page. This section renders a collapsible sidebar/panel filter UI using React with useState and useMemo hooks. Implement the filters state object (DEFAULT_FILTERS: providerTypes[], radius=25, rating=null, verified=false, availability[], experience[]) and an activeCount useMemo that tallies all active filter selections. Build the following filter groups: (1) PROVIDER_TYPES — 8 checkbox-style toggle chips (contractor, plumber, electrician, carpenter, mason, painter, architect, civil engineer) with counts, managed by toggleProviderType; (2) RADIUS_PRESETS — 4 preset buttons (5/10/25/50 km) bound to setRadius; (3) RATING_OPTIONS — 4 star-rating radio options (4.5/4.0/3.5/3.0 and up) with desc labels, managed by setRating (toggle off on re-click); (4) a verified toggle button bound to toggleVerified; (5) AVAILABILITY_OPTIONS — 3 toggles (Available Now/This Week/This Weekend) with colored dot indicators managed by toggleAvailability; (6) EXPERIENCE_OPTIONS — 3 toggles (Senior/Mid/Junior) with bar-count indicators managed by toggleExperience. Support expanded/collapsed panel state. Apply ProvidersFilters.css (10300 chars).

As a frontend developer, implement the ProvidersGrid section for the Providers page. This section renders a card grid of 7+ provider mock records using React with useState, useRef, and useEffect hooks, plus D3 for data visualisations within cards. Each provider object includes: id, name, profession, location (distance string), rating (float), reviewCount, jobsCompleted, responseRate (%), bio, tags[], avatar (null — render avatar initials fallback), verified (boolean), featured (boolean). Build provider cards displaying: avatar/initials block with a verified badge overlay, featured ribbon, name + profession heading, location string, star rating + review count, jobsCompleted and responseRate stats, bio text, and tag chips. Use D3 (imported as * from 'd3') via useRef/useEffect to render an animated stat bar or radial chart inside cards (e.g., responseRate arc). Support hover state interactions. Apply ProvidersGrid.css (8680 chars). This section is independent of ProvidersFilters — depend only on ProvidersHeader for page structure.

As a frontend developer, implement the UsersFilters section for the Users page. This section renders a multi-dimensional filter bar using multiple `useState` hooks managing `selectedType`, `selectedStatus`, `selectedLocation`, `dateRange`, and active filter chip state. It includes: a horizontal user-type pill tab row from the `userTypes` array (All Users, Customer, Provider, Supplier, Labor, Contractor, Architect, Engineer) with color-coded dots; a status filter row from `statusOptions` (All/Verified/Pending/Rejected) showing per-option counts (248/156/67/25); a location dropdown built from the `locations` array (Mumbai, Delhi NCR, Bangalore, etc.) with `ChevronDown` SVG icon; a date range picker trigger with `CalendarIcon` SVG; a `MapPinIcon` location filter; a `RotateCcwIcon` reset-all-filters button; and dismissible active filter chips with `XIcon`. Import `UsersFilters.css` for all layout and dot-color theming.

As a frontend developer, implement the UsersTable section for the Users page. This section renders a sortable, paginated data table using `useState` hooks for `sortKey`, `sortDir`, `currentPage`, and `pageSize`. It uses a `MOCK_USERS` array of 12 users (Rajesh Kumar, Priya Sharma, Amit Patel, etc.) with fields: id, name, email, phone, type, status, joinDate, lastActive. The `COLUMNS` array (7 columns: User Name, Email, Phone, User Type, Verification, Join Date, Last Active) drives sortable column headers with `ChevronUp` from `lucide-react` and directional sort toggling. Each row renders inline status badges via `STATUS_BADGE_MAP` (verified=`ut-badge-verified`, pending=`ut-badge-pending`, rejected=`ut-badge-rejected`). A `ChevronRight` row-action icon and a `Users` icon empty-state are also imported from `lucide-react`. Pagination controls use `PAGE_SIZE_OPTIONS` [10, 20, 50] with a results-per-page selector. Apply `UsersTable.css` for table layout, badge colours, and hover states.

As a frontend developer, implement the CategoriesFilterBar for the Categories page. This section is a rich interactive filter bar with the following state: sortBy (default 'popular'), sortOpen (dropdown toggle), activeFilters (array of active filter keys), drawerOpen (mobile drawer toggle), and drawerFilters (staged filters inside drawer). SORT_OPTIONS includes 'popular', 'az', and 'newest' options with lucide-react icons (ChevronDown, SlidersHorizontal, ListFilter, X, Check, Grid3X3, RotateCcw). FILTER_CATEGORIES includes 6 chip filters: verified, topRated, nearby, budgetFriendly, premium, trending. Key interactions: (1) Sort dropdown with outside-click dismissal via pointerdown listener and sortRef/sortBtnRef refs. (2) Cursor-reactive magnetic pill attraction effect on desktop via handleRootMove — uses chipRefs array to compute per-chip translate(x,y) based on cursor proximity with maxDist=180 and pull strength=0.16. (3) handleRootLeave resets all chip transforms. (4) toggleFilter adds/removes keys from activeFilters; clearFilters resets to []. (5) openDrawer stages current filters into drawerFilters for a mobile drawer panel; closeDrawer dismisses it. Displays TOTAL_CATEGORIES=42 count. Import CategoriesFilterBar.css for styling.

As a frontend developer, implement the CategoriesFeaturedSection for the Categories page. This section renders a horizontally scrollable or grid layout of 6 FeaturedCard components driven by FEATURED_CATEGORIES array: General Contractors (HardHat icon, 'Trending' badge, 1842 providers), Plumbing & Sanitary (Wrench, 'Featured', 1236 providers), Material Suppliers (Truck, 'Trending', 905 providers, href to /Materials), Interior Finishing (PaintBucket, 'Featured', 674 providers), Electrical Services (Zap, 'Trending', 1488 providers), Architects & Designers (Briefcase, 'Featured', 510 providers). FeaturedCard uses cardRef and innerRef with handleMouseMove for 3D tilt effect: rotateX/rotateY computed from cursor offset relative to card center with ±8deg range, applied to innerRef transform. Also sets CSS custom properties --cfs-mx and --cfs-my on cardRef for radial gradient spotlight tracking. handleMouseLeave resets inner transform. Each card shows: icon component, badge (badgeType: 'trending' | 'featured'), category name, description, providers count, projects count, and an ArrowRight/ChevronRight/ChevronsRight link. Lucide icons used: HardHat, Wrench, Truck, PaintBucket, Zap, ArrowRight, TrendingUp, Star, Users, Briefcase, ChevronRight, ChevronsRight. Import CategoriesFeaturedSection.css for styling.

As a frontend developer, implement the ReportsFilters section for the Reports page. This section manages a collapsible filter panel with responsive behavior using useState hooks: expanded (default true on desktop ≥768px, false on mobile), isMobile, reportType, dataGroup, userType, region, and search. A useEffect listens to window resize events to toggle mobile/desktop layout. Renders 4 select dropdowns — REPORT_TYPES (5 options), DATA_GROUPS (3 options), USER_TYPES (4 options), and REGIONS (9 Indian city options including Mumbai, Delhi NCR, Bangalore, etc.) — plus a search input. Computes activeTags array from active filter values and renders dismissible tag pills with X icons (lucide-react). A 'Reset All Filters' button with RotateCcw icon clears all state. The panel header shows a SlidersHorizontal icon with ChevronDown toggle for mobile collapse. Styles from ReportsFilters.css.

As a frontend developer, implement the ReportsOverview section for the Reports page. This section renders 5 metric cards — Total Users (12,847), Total Providers (3,942), Total Transactions (2,156), Platform Revenue (₹ 18.4L), and Average Rating (4.6) — each with value, change percentage, changeLabel, period, and a single-character icon. Each card includes a SparklineSvg sub-component that uses D3 (d3.select, d3.scaleLinear, d3.line, d3.area, d3.curveMonotoneX) to render a 90×40 SVG sparkline with a filled area gradient and terminal data point circle. The D3 chart uses useRef and useEffect for imperative DOM rendering, clearing and re-drawing on data change. Imports TrendBadge.css and ReportsOverview.css. Requires d3 as a dependency.

As a frontend developer, implement the ReportsTable section for the Reports page. This section renders a fully interactive data table with 7 columns (Category, Total, Active, New This Mo., Growth, Conversion, Actions) defined in COLUMNS config with sortable flags. REPORT_DATA contains 7+ rows including Users, Providers, Transactions, Materials, Equipment, and Listings with nested details objects. State managed via useState: sort key/direction, current page, page size (PAGE_SIZES: [10, 25, 50]), and an expanded row id for accordion detail panels. useMemo computes sorted and paginated data slices. Each row renders TrendingUp/TrendingDown icons from lucide-react based on growth value sign. Expandable rows reveal detail key-value grids (e.g., registeredToday, verified, topCity for Users; totalValue, avgOrderValue, refundRate for Transactions). Pagination renders ChevronLeft/ChevronRight controls with page number display. Column headers with ArrowUpDown icons trigger sort state. Styles from ReportsTable.css.

As a frontend developer, implement the ReportsExport section for the Reports page. This section uses react-chartjs-2 (Bar, Line components) with ChartJS registered scales (CategoryScale, LinearScale, BarElement, LineElement, PointElement, Filler, Title, Tooltip, Legend) and D3 (d3.randomUniform, d3.randomLcg) to generate deterministic monthly data for 12 months across 3 metrics: New Users (orange), New Providers (dark slate), and Reviews Posted (green). State includes viewMode ('chart'|'table'), chartType ('bar'|'line'), dropdownOpen (for export format dropdown), and monthlyData initialized via seeded D3 RNG. A useEffect closes the export dropdown on outside mousedown clicks using dropdownRef. Renders a view-mode toggle (BarChart3 / LineChart / Table2 icons), a chart/table panel that conditionally shows Bar or Line chart or a comparison TABLE_DATA table (8 rows with current/previous/change columns). An export dropdown with Download icon reveals CSV, Excel (FileSpreadsheet), PDF (FileText), and Print (Printer) options — handleExport useCallback dispatches format-specific export logic. Styles from ReportsExport.css.

As a frontend developer, implement the PortfolioHero section for the Portfolio page. This section features a full 3D interactive galaxy map built with @react-three/fiber and @react-three/drei, rendering a GalaxyScene with Stars (count=1200, radius=12), OrbitControls (autoRotate, autoRotateSpeed=0.5), and five clickable StarNode components (octahedronGeometry, meshStandardMaterial with emissive glow) defined by CLUSTER_NODES array (residential, commercial, renovation, interior, landscape). Each StarNode uses useFrame for rotation animation and hover scaling (1.35x) via Float wrapper. The section also includes a portfolioStats array (387+ Projects, 142 Clients, 24 Providers, 98% Satisfaction) and showcaseCategories displayed alongside the Canvas wrapped in Suspense. Uses useState, useEffect, useMemo, useRef hooks. Lucide icons: Building2, HardHat, Ruler, ArrowRight. Imports PortfolioHero.css. Note: Navbar/shared layout component may already exist from a previous page.

As a frontend developer, implement the PortfolioFilterBar section for the Portfolio page. This section renders a filter bar with: (1) a CATEGORIES tab row (7 items: All/127, Residential/48, Commercial/36, Materials/22, Services/15, Interiors/19, Renovation/12) using activeCategory state; (2) a search input with Search and X (clear) icons from lucide-react driving searchQuery state and handleSearchChange which adds filter badges for queries ≥2 chars; (3) a sort dropdown (sortRef, sortOpen state, outside-click handler via useEffect+mousedown) with 5 SORT_OPTIONS; (4) active filter badge chips with removeFilter functionality. Uses useState, useRef, useEffect. Lucide icons: Search, SlidersHorizontal, ChevronDown, X. Imports PortfolioFilterBar.css. Independent of other Portfolio sections — can be built in parallel.

As a frontend developer, implement the PortfolioProjects section for the Portfolio page. This section renders a grid of project cards from a PROJECTS array (6+ items including Luxury Villa Complex, Greenfield Commercial Tower, Highway Bridge Overbridge, Heritage Haveli Restoration, Modular School Campus, Apartment Complex). Each card displays: title, category badge, provider name with providerAvatar fallback, location (MapPin icon), description, star rating with review count, verified badge (CheckCircle), completed date (Calendar), duration (Clock), Eye/ArrowRight/ExternalLink action icons. Uses useState, useEffect, useRef, useCallback, useMemo for filtering/pagination logic and a SearchX empty-state component. Also includes a ChevronDown load-more control. Lucide icons: MapPin, Star, CheckCircle, Eye, ArrowRight, Clock, Calendar, SearchX, ChevronDown, ExternalLink. Imports PortfolioProjects.css. Independent of PortfolioFilterBar but logically connected — can be built in parallel; filter integration wired post-build.

As a frontend developer, implement the PortfolioStats section for the Portfolio page. This section renders a 4-card stats grid (Total Projects 3K+, Verified Providers 1.5K+, Customer Satisfaction 98%, Completed Categories 50+) using the STATS array with IntersectionObserver (rootMargin '0px 0px -60px 0px', threshold 0.15) to trigger scroll-in visibility. Each card uses data-stat-id attributes observed via observerRef (IntersectionObserver stored in observerRef.current). On intersection, animateCounter fires a requestAnimationFrame loop using d3.easeCubicOut over 1800ms duration, updating animatedValues state per stat ID. visibleCards Set state tracks already-animated cards. Icons from lucide-react: Briefcase (orange), ShieldCheck (gold), Smile (green), Layers (slate). Uses d3 for easing only. Imports PortfolioStats.css. Independent of other Portfolio sections — can be built in parallel.

As a frontend developer, implement the PortfolioTestimonials section for the Portfolio page. This section renders a carousel of 6 testimonial cards (Rajesh Patil/Contractor, Priya Sharma/Architect, Amit Agarwal/Material Supplier, Suresh Kumar/Turnkey Contractor, Meera Nair/Interior Designer, Vikram Reddy/Electrical Contractor) with activeIndex state, autoPlay boolean state, and intervalRef for auto-rotation. Navigation uses ChevronLeft/ChevronRight buttons. Each card shows quote text, author name, profession, location (MapPin), star rating (Star icons), and avatar fallback. Uses d3 for any transition easing, MessageSquareQuote as section icon. TOTAL_CARDS=6 constant drives loop logic. Uses useState, useEffect, useRef, useCallback, useMemo. Imports PortfolioTestimonials.css. Independent of other Portfolio sections — can be built in parallel.

As a frontend developer, implement the PortfolioCTA section for the Portfolio page. This section features: (1) an IntersectionObserver (threshold 0.25) on sectionRef triggering visible state for scroll-reveal animation; (2) a D3-powered canvas starfield (canvasRef, ANIMATED_PARTICLES=18 stars) with drifting organic movement (vx/vy), pulsing opacity via Math.sin(Date.now()*0.002+phase), and warm orange/gold radial gradient fills (rgba(255,140,0) → rgba(255,215,0,0)), with DPR-aware sizing and resize listener; (3) decorative pcta-glow-orb background elements (pcta-g1, pcta-g2 spans inside pcta-bg-glow div); (4) two CTA buttons with Upload and Compass lucide icons. Uses useEffect, useRef, useState. requestAnimationFrame loop with cancelAnimationFrame cleanup. Imports PortfolioCTA.css. Independent of other Portfolio sections — can be built in parallel.

As a frontend developer, implement the ListingsHeader section for the Listings page. This section renders a `.lh-root` card with: (1) a top row showing an `<h1>` title 'Materials & Services' and a results count badge ('248 results'); (2) a meta row with an SVG-icon category badge ('All Categories') and an active filter count display ('3 active filters'); (3) a controls row with a custom sort dropdown (`lh-sort-dropdown`) driven by `useState('newest')` and `useState(false)` for open state — the dropdown renders SORT_OPTIONS array (newest, popular, rated, price_asc, price_desc) as a listbox with keyboard Escape handling via `handleSortKeyDown`; and (4) a view mode toggle (`useState('grid')`) with grid/list icon buttons. The sort trigger button uses `aria-haspopup` and `aria-expanded` for accessibility. Import `ListingsHeader.css` for all layout and token-based styling.

As a frontend developer, implement the LeadsHeader section for the Leads page. This section renders a full-width hero header using `lh-root` with decorative background blobs (`lh-blob-1`, `lh-blob-2`, `lh-blob-3`). It uses `useState` for `view` (list/card toggle), `filterOpen`, `leadCount`, and `pulseActive`. An animated counter using `requestAnimationFrame` with ease-out cubic easing counts up to 247 over 1600ms, stored in `animRef` and cleaned up on unmount. The `lh-controls` cluster includes: (1) a lead count badge with `Users` icon from lucide-react showing the animated `leadCount` with a `lh-count-pulse` CSS class triggered on filter toggle, (2) a view toggle group with `List` and `LayoutGrid` icons switching between list/card modes, and (3) a filter toggle button with `SlidersHorizontal` icon that calls `handleFilterToggle` which sets `filterOpen` and triggers a 500ms `pulseActive` burst. Import from `../styles/LeadsHeader.css`.

As a frontend developer, implement the MaterialsHero section for the Materials page. Build the `mh-root` section component that renders: (1) a breadcrumb nav (`mh-breadcrumbs`) with `React.Fragment`-based mapping over `[{label:'Home',href:'/Home'},{label:'Materials',href:'/Materials'}]` items using SVG chevron separators and `mh-breadcrumb-current` for the last item; (2) an `mh-title-block` containing an `<h1>` with the text 'Buy & Sell' and an `mh-title-accent` span wrapping 'Construction Materials'; (3) an `mh-subtitle` paragraph for descriptive copy; (4) a stats row mapping over a `stats` array of 3 items (inline SVG icons for package/users/calendar, values '10,000+ Listings', '4,500+ Sellers', '24/7 Available'). Apply all class styles from `MaterialsHero.css` (4658 chars). This is the entry point for the Materials page and should include page-level dependency on the Search page task.

As a frontend developer, implement the SavedHeader section for the Saved page. This section features a full-bleed animated canvas background using a 2D particle network built with the HTML5 Canvas API. Uses `useRef` for the canvas element and `useEffect` to initialize and drive the animation loop via `requestAnimationFrame`. Spawns 50 particles (`PARTICLE_COUNT`) with random positions, velocities, radii (0.8–2.4px), and opacities. Each frame, particles wrap around edges and inter-particle connections are drawn in `rgba(255, 140, 0, alpha)` when distance < `CONNECTION_DIST` (90px), with line width 0.6. Particles are filled orange. A `ResizeObserver` on the canvas parent triggers `resize()` + `initParticles()` for responsive reflow. Cleans up animation frame and observer on unmount. Applies `sh-root` and `sh-canvas-wrap` CSS classes. This is the first section of the Saved page and must chain from the Search page dependency.

As a frontend developer, implement the ReviewsHeader section for the Reviews page. This section renders a cosmic star-field animated canvas background (GalaxyCanvas component) using HTML5 Canvas API with 110 animated stars, sparse connection lines between nearby stars (CONNECT_DIST=80), orange nebula blobs, and a green glow radial gradient. The PROVIDER object (Konkan Cement & Materials, avgRating 4.7, totalReviews 328) drives the header content including provider initials avatar fallback, verified badge using lucide-react CheckCircle, and star rating display using lucide-react Star. The canvas uses requestAnimationFrame loop, DPR-aware scaling, and a resize observer. Imports ReviewsHeader.css for layout styling. Note: this is the first section of the Reviews page and chains from the Profile page dependency.

As a frontend developer, implement the TopNav section for the Subscription page. This component uses useState for menuOpen toggle and useRef for menuRef click-outside detection, with a useEffect keydown listener that closes the menu on Escape. It renders a header with: a back button using window.history.back(), a logo linking to /Home with HardHat icon and 'spaceidea Build Marketplace' wordmark, a dynamic breadcrumb nav using ChevronLeft separators with aria-current on the last crumb, and a right-side icon cluster with MessageSquare (chat link to /Chat with notification dot), Bell, and a user avatar dropdown. The dropdown renders initials derived from userName prop (split/map/join), and shows user info (name, role, email) plus nav links using LayoutDashboard, User, Settings, CreditCard, LogOut icons. Props: crumbs, userName, userRole, userEmail. Note: this component may already exist from previous pages — reuse if available. Page-level dependency on Profile page task must be wired via depends_on.

As a frontend developer, implement the PlatformHero section for the Platform page. This section features a D3-powered interactive trust graph (force simulation) with NODES (platform hub, contractors, architects, engineers, laborers, suppliers, equipment, customers, verified, reviews, payments) and LINKS rendered via d3.forceSimulation, colored by COLOR_MAP groups (platform=#FF8C00, provider, seller, customer, trust). Includes a search bar with location input, Search/MapPin/Hammer icons from lucide-react, QUICK_TAGS pill buttons for categories like 'Home Construction' and 'Interior Design', a FEATURED_PROVIDERS carousel showing 5 provider cards with initials avatars (ph-provider-av1..5), rating stars, review counts, and ArrowRight CTA. STATS section shows '25,000+ Verified Providers', '150+ Cities' etc. Uses useState, useEffect, useRef, useCallback hooks. Import from '../styles/PlatformHero.css'. Depends on page-level Reports tasks.

As a Backend Developer, implement the leads management API for providers. GET /api/v1/leads (provider: paginated lead list with filters: category, radius, budget_min/max, status — all/new/responded/closed; includes match_percent per lead; infinite scroll via cursor pagination), GET /api/v1/leads/:id (lead detail with customer requirement and contact info if responded), POST /api/v1/leads/:id/respond (mark lead as responded, opens conversation), POST /api/v1/leads/:id/close (mark as closed/won/lost), GET /api/v1/leads/stats (aggregated stats: total, active, conversion_rate, response_rate with sparkline data arrays for last 24 periods). Leads are auto-generated when a customer posts a requirement and providers match. Subscription tier controls lead visibility: free tier sees limited leads per day, premium/pro see all. Implement lead expiry logic (unresponded leads expire after 72h for free tier).

As a Backend Developer, implement quotes management API. POST /api/v1/quotes (provider sends quote: requirement_id, customer_id, line_items[], payment_terms[], valid_until, attachments[]), GET /api/v1/quotes (list quotes — for customer: received quotes with status filter; for provider: sent quotes), GET /api/v1/quotes/:id (full quote detail: line_items, payment_terms, timeline, attachments, conversation thread), PUT /api/v1/quotes/:id/accept (customer accepts quote — update status, trigger order creation), PUT /api/v1/quotes/:id/reject (customer rejects quote with optional reason), PUT /api/v1/quotes/:id (provider updates quote while status=pending), GET /api/v1/quotes/stats (provider stats: total sent, pending, accepted, rejected counts, response rate). Quote total calculation: sum line_items amounts + GST. Attachment upload via S3. Status flow: pending → accepted/rejected. Trigger chat message on status change. Return IndianRupee-formatted totals including GST breakdown.

As a Tech Lead, verify the end-to-end integration between the Onboarding page frontend sections (OnboardingHeader, OnboardingProgressBar, OnboardingUserTypeSelector, OnboardingProfileForm, OnboardingLocationPicker, OnboardingVerification, OnboardingSubmitReview, OnboardingActionButtons) and the Onboarding backend API. Ensure: each step's data is persisted to the correct API endpoint; document file uploads reach S3 via POST /api/v1/onboarding/documents with presigned URLs; GPS coordinates from LocationPicker are sent with the location step; final submit calls POST /api/v1/onboarding/submit and AnimatedCheckmark triggers on 200 response; admin approval status polling or notification works post-submit. Note: depends on all Onboarding frontend tasks (596a7f3d, 4db25670, 35c1973c, 48d60617, cc79ed88, da94dd99, a3b7ea31, 9b71c468) and T-BE-ONBOARDING.

As a Tech Lead, verify the end-to-end integration between the Search page frontend (SearchHero, FilterPanel, ResultsGrid) and the Search backend API (GET /api/v1/search/providers). Ensure: search query + location + category from SearchHero are correctly sent as query params; FilterPanel filter state (categories, rating, distance, availableNow, priceRange, verifiedOnly) maps to API filter params; ResultsGrid renders real provider data from API response (replacing hardcoded PROVIDERS array); framer-motion entrance animations trigger correctly on new data fetch; quick filter chips (Verified/Available Now/Nearby First) pass correct params; pagination or load-more integrates with API cursor. Note: depends on SearchHero (b29be8ce), FilterPanel (3f3d6b57), ResultsGrid (1abe62c3) and T-BE-SEARCH.

As a Tech Lead, verify the end-to-end integration between the Providers page frontend (ProvidersHeader, ProvidersFilters, ProvidersGrid, ProvidersPagination) and the Providers backend API (GET /api/v1/providers). Ensure: location search from ProvidersHeader sends lat/lng + radius to API; ProvidersFilters state (provider types, radius, rating, verified, availability, experience) maps correctly to API query params; ProvidersGrid replaces mock provider data with API response, including D3 radial chart rendered from real responseRate data; ProvidersPagination D3 progress bar reflects real TOTAL_PROVIDERS and current page from API; admin approve/reject buttons call correct endpoints. Note: depends on ProvidersHeader (09d10852), ProvidersFilters (dfebbf0c), ProvidersGrid (719cf73e), ProvidersPagination (2683668d) and T-BE-PROVIDERS.

As a Tech Lead, verify the end-to-end integration between the Post page frontend (PostHeader, PostPreview, SubmissionActions) and the Requirements backend API. Ensure: PostHeader step navigation reflects real form data collection; PostPreview renders collected form data (not static previewData) including D3 budget chart; SubmissionActions handlePost calls POST /api/v1/requirements with complete form payload including S3-uploaded attachments; success state triggers navigation to Dashboard or requirement detail; handleSaveDraft calls draft API endpoint; error states from API surface in status banner. Verify matched providers count in PostPreview comes from GET /api/v1/requirements/:id/matches after creation. Note: depends on PostHeader (c75bd7c1), PostPreview (43242bb5), SubmissionActions (d3578640) and T-BE-REQUIREMENTS.

As a Tech Lead, verify the end-to-end integration between the Chat page frontend (ChatTopBar, ChatMessageThread, ChatInputBar) and the Chat backend API (WebSocket + REST). Ensure: ChatTopBar loads real conversation participant info (name, role, online status, verified badge) from GET /api/v1/conversations/:id; ChatMessageThread connects to WS /api/v1/chat/ws/{conversation_id}, receives real-time messages and renders them correctly (sent/read status CheckCheck icons update in real-time); ChatInputBar Send action calls WebSocket send and clears input on acknowledgement; Paperclip attachment uploads to S3 via POST /api/v1/conversations/:id/attachments then sends URL as message; online presence dot reflects Redis TTL heartbeat; Quote card in message thread renders real quote data. Note: depends on ChatTopBar (3062341e), ChatMessageThread (860932ac), ChatInputBar (a20c326a) and T-BE-CHAT.

As a Tech Lead, verify the end-to-end integration between the Materials page frontend (MaterialsHero, FilterBar, MaterialsGrid, LoadMore) and the Materials backend API (GET /api/v1/materials). Ensure: FilterBar location select populates from API or static LOCATIONS constant; category checkboxes (AAC Blocks 142, etc.) counts come from GET /api/v1/materials/categories; PriceSlider min/max filter sends price_min/price_max to API; MaterialsGrid replaces hardcoded MATERIALS array with API response — images use CloudFront CDN URLs, verified badge from API field, distance calculated from user location; heart/save toggle calls POST /api/v1/saved (item_type: material); LoadMore button fetches next cursor page from API, probabilistic reachedEnd replaced with real hasMore flag from API response. Note: depends on MaterialsHero (3162a7bb), FilterBar (1f9e3c49), MaterialsGrid (fe81c1f2), LoadMore (489bfe77) and T-BE-MATERIALS.

As a Tech Lead, verify the end-to-end integration between the Listings page frontend (ListingsHeader, ListingsFilters, ListingsGrid) and the Listings backend API (GET /api/v1/listings). Ensure: ListingsFilters active state (categories, price_range, condition, radius, verified_only, availability) maps to correct API query params; ListingsHeader result count (248 results) renders from API total_count; ListingsGrid replaces static LISTINGS array with API response — CloudFront image URLs render correctly, service listings (null price) show 'Get Quote' CTA, material listings show formatted price; sort dropdown calls API with sort param; verified badge and seller name from real data. Note: depends on ListingsHeader (c6c56285), ListingsFilters (a049e3f2), ListingsGrid (d35ceab3) and T-BE-LISTINGS.

As a Tech Lead, verify the end-to-end integration between the Reviews page frontend (ReviewsHeader, RatingSummary, ReviewFilters, ReviewsList, PaginationControls) and the Reviews backend API (GET /api/v1/providers/:id/reviews). Ensure: ReviewsHeader PROVIDER object loads from GET /api/v1/providers/:id — real avg_rating, totalReviews, name; RatingSummary D3 bar animation drives from real star_breakdown counts from API; ReviewFilters sort/rating/category params send to API and return filtered results; ReviewsList renders real REVIEWS_DATA replacing hardcoded entries — helpful vote calls POST /api/v1/reviews/:id/helpful; PaginationControls D3 SVG animation reflects real TOTAL_REVIEWS and page from API; provider reply block shows when reply field is set. Note: depends on ReviewsHeader (73bb7a1c), RatingSummary (5a64aa3d), ReviewFilters (62aa8d1f), ReviewsList (e73aea3f), PaginationControls (9513de24) and T-BE-REVIEWS.

As a Tech Lead, verify the end-to-end integration between the Categories page frontend (CategoriesHeroSection, CategoriesFilterBar, CategoriesFeaturedSection, CategoriesGrid) and the Categories backend API (GET /api/v1/categories). Ensure: CategoriesHeroSection search input calls GET /api/v1/categories/search?q= and renders live results; CategoriesFilterBar TOTAL_CATEGORIES=42 reflects real count from API; CategoriesFeaturedSection renders 6 categories from GET /api/v1/categories/featured with real provider_count and projects_count; CategoriesGrid renders all categories from API with real provider counts per category (e.g., 'AC Technician 1,240'); filter/sort chips in CategoriesFilterBar send params to API. Note: depends on CategoriesHeroSection (ab0a19d7), CategoriesFilterBar (b219fdad), CategoriesFeaturedSection (48cc7056), CategoriesGrid (36dc1ed1) and T-BE-CATEGORIES.

As a Tech Lead, verify the end-to-end integration between the Saved page frontend (SavedHeader, SavedFiltersBar, SavedItemsList, SavedEmptyState) and the Saved Items backend API (GET /api/v1/saved). Ensure: SavedFiltersBar chip counts (12 total, 5 providers, 4 materials, 3 services) load from GET /api/v1/saved/counts; SavedItemsList replaces SAVED_ITEMS_INITIAL with real API data — provider cards show real rating/verified/location, material cards show real price/availability; Heart toggle on unsave calls DELETE /api/v1/saved/:item_id with Framer Motion exit animation triggering correctly; sort dropdown sends sort param to API; SavedEmptyState renders when GET /api/v1/saved returns empty array; SavedFiltersBar category filter (providers/materials/services) sends item_type param to API. Note: depends on SavedHeader (fbd375dc), SavedFiltersBar (88395db8), SavedItemsList (33093f18), SavedEmptyState (5754ce13) and T-BE-SAVED.

As a Tech Lead, verify the end-to-end integration between the Portfolio page frontend (PortfolioHero, PortfolioStats, PortfolioFilterBar, PortfolioProjects, PortfolioTestimonials, PortfolioCTA) and the Portfolio backend API. Ensure: PortfolioStats animated counters receive real data from GET /api/v1/portfolio/stats (total_projects, verified_providers, customer_satisfaction, completed_categories); PortfolioFilterBar category filters and search send params to GET /api/v1/portfolio; PortfolioProjects replaces PROJECTS array with API response — images use CloudFront CDN URLs, real provider info; PortfolioTestimonials carousel loads 6 testimonials from GET /api/v1/portfolio/testimonials; PortfolioHero CLUSTER_NODES category click filters PortfolioProjects. Note: depends on PortfolioHero (6f6e8a62), PortfolioStats (a1a04bed), PortfolioProjects (c5a7f73d), PortfolioTestimonials (8a0fcd91) and T-BE-PORTFOLIO.

As a Tech Lead, verify the end-to-end integration between the Subscription page frontend (SubscriptionHero, SubscriptionPlans, SubscriptionComparison, SubscriptionFeatures, SubscriptionFAQ, SubscriptionCTA) and the Subscriptions backend API. Ensure: SubscriptionPlans plan pricing loads from GET /api/v1/subscriptions/plans (replacing hardcoded ₹499/₹999); billing toggle monthly/annual prices reflect API annual discount; CTA buttons for Premium/Pro call POST /api/v1/subscriptions with plan_id and billing_cycle; SubscriptionComparison feature flag matrix driven by plan feature flags from API; current subscription status shows in ProfileSettings subscription card from GET /api/v1/subscriptions/me; Razorpay payment modal integrates before subscription creation. Note: depends on SubscriptionPlans (8c0e2cd0), SubscriptionHero (9f66c8ea), SubscriptionComparison (b3bf4f9c) and T-BE-SUBSCRIPTIONS.

As a Tech Lead, verify the end-to-end integration between the Profile page frontend (ProfileHeader, ProfileBasicInfo, ProfileSidebar, ProfilePortfolio, ProfileVerification, ProfileReviews, ProfileSettings) and the backend APIs. Ensure: ProfileHeader loads from GET /api/v1/profile/me (real name, profession, rating, location); ProfileBasicInfo edit form submits to PUT /api/v1/profile/basic-info; ProfileVerification document upload calls POST /api/v1/onboarding/documents with S3 presigned URL flow and status reflects admin verification state; ProfilePortfolio renders from GET /api/v1/providers/:id/portfolio; ProfileReviews loads from GET /api/v1/providers/:id/reviews with real pagination; ProfileSettings language preference saves to API and updates UserContext; subscription card calls GET /api/v1/subscriptions/me; logout calls POST /api/v1/auth/logout. Note: depends on ProfileHeader (9ade2e74), ProfileBasicInfo (c4c8be50), ProfileVerification (07684d38), ProfileReviews (647d101a) and T-BE-ONBOARDING, T-BE-REVIEWS.

As a Tech Lead, verify the end-to-end integration between the Reports page frontend (ReportsHeader, ReportsOverview, ReportsFilters, ReportsTable, ReportsExport) and the Reports backend API. Ensure: ReportsHeader quick stat pills load from GET /api/v1/reports/quick-stats with real values; ReportsOverview D3 sparklines render from real 30-day sparkline arrays in API response; ReportsFilters date range (dateFrom/dateTo) and filter dropdowns (reportType, dataGroup, userType, region) send params to all report endpoints; ReportsTable paginated/sorted data loads from GET /api/v1/reports/table with real expandable detail rows; ReportsExport chart data loads from GET /api/v1/reports/monthly with D3 seeded RNG replaced by real monthly data; export buttons call GET /api/v1/reports/export?format= and trigger file download. Note: depends on ReportsHeader (2fc66966), ReportsOverview (e02e87d0), ReportsFilters (e4f9937b), ReportsTable (e4dc3cf5), ReportsExport (484c2bf5) and T-BE-REPORTS.

As a Tech Lead, verify the end-to-end integration between the Users page frontend (UsersHeader, UsersFilters, UserActions, UsersTable) and the Users backend API. Ensure: UsersHeader totalUsers (248) and activeUsers (187) load from GET /api/v1/users stats; UsersHeader Export CSV button calls GET /api/v1/users/export?format=csv and downloads file; UsersFilters type/status/location/date_range state maps to API query params and returns filtered user list; UsersTable replaces MOCK_USERS with real paginated data from API — sort params sent to API; UserActions approve/suspend/delete bulk calls POST /api/v1/users/bulk-action; individual row verify/suspend buttons call POST /api/v1/users/:id/verify and /suspend. Note: depends on UsersHeader (1717dc90), UsersFilters (97ae8605), UserActions (42aa6e0b), UsersTable (48703db9) and T-BE-USERS.

As a Tech Lead, verify the end-to-end integration between the Platform/Home page frontend sections (PlatformHero, PlatformServices, PlatformTrustBadges, HomeGalaxyHero) and the Platform Stats backend API. Ensure: PlatformHero STATS section ('25,000+ Verified Providers', '150+ Cities') loads real counts from GET /api/v1/platform/stats; PlatformServices 12-category grid with provider_count loads from GET /api/v1/platform/service-categories; PlatformTrustBadges AnimatedNumber components receive real aggregate stats; PlatformHero FEATURED_PROVIDERS carousel loads from GET /api/v1/platform/featured-providers with real provider data; HomeGalaxyHero stats section updates from API. Note: depends on PlatformHero (f5045ebc), PlatformServices (6e51a4d6), PlatformTrustBadges (77879c51), HomeGalaxyHero (6a454fd6) and T-BE-PLATFORM.

As a Backend Developer, integrate Razorpay payment gateway for INR subscription payments. Create payment_service.py with: create_order(amount_paise, currency='INR', receipt, notes) — calls Razorpay Orders API; verify_payment_signature(razorpay_order_id, razorpay_payment_id, razorpay_signature) — HMAC-SHA256 verification; capture_payment(payment_id, amount) — capture authorized payments. REST endpoints: POST /api/v1/payments/create-order (create Razorpay order for subscription purchase, return order_id + key_id for frontend SDK), POST /api/v1/payments/verify (verify signature after frontend payment modal closes, create subscription on success), POST /api/v1/subscriptions/webhook (handle Razorpay webhook events: payment.captured, payment.failed, subscription.activated, subscription.cancelled — verify webhook signature). Store payment records in a payments table. Emit subscription activation event. Add RAZORPAY_KEY_ID and RAZORPAY_KEY_SECRET to environment config. Note: depends on Subscriptions API (8aed58b2).

As a Backend Developer, implement multilingual support infrastructure. (1) Accept-Language header parsing in FastAPI middleware — detect language from header or user profile language preference, default to 'en'; (2) i18n translation loader: load locale JSON files from /locales/{lang}.json (en, hi, bn, te, mr, ta, gu) for API error messages and notification content; (3) PUT /api/v1/users/me/language (update user's preferred language in DB, cached in Redis keyed by user_id); (4) GET /api/v1/platform/languages (return supported language list with native names and codes for frontend language selector); (5) Translatable error messages for OTP validation, profile validation, and common API errors. Store language preference in users table language column. Note: depends on Database Models (ece6d85b) and Auth middleware (T-BE-MIDDLEWARE).

As a Tech Lead, verify the end-to-end integration between the Login page frontend implementation (LoginForm task 679bc276, LoginContainer task 7f0dcdfe) and the Auth OTP backend API (task bff72385) plus SMS provider (task T-BE-SMS). Ensure: OTP send request from LoginForm calls POST /api/v1/auth/send-otp with phone + country_code; 30-second countdown and resend flow correctly rate-limited by backend Redis counter; OTP verification calls POST /api/v1/auth/verify-otp and receives JWT tokens stored in AuthContext (ff075f43); getRoleRedirect uses role from JWT claims to navigate to correct page (/Dashboard for admin, /ProviderHome for provider, /Home for customer); 401 errors surface correct error messages in LoginForm; loading states match API response timing; SMS OTP actually delivered in development (console log) and production (MSG91). Verify rate limiting (max 3 OTP/hour) surfaces correct error in UI.

As a Tech Lead, verify the end-to-end integration between the OnboardingVerification section (task da94dd99) and the Onboarding API document upload endpoint (POST /api/v1/onboarding/documents in task c5743fcd) and the AWS S3 storage setup (task 4a58fb69). Ensure: drag-and-drop file selection in OnboardingVerification calls the presigned URL generation flow — frontend requests presigned URL from backend, uploads directly to S3 private bucket (document-verification), sends S3 key back to backend for association; file validation (PDF/JPG/PNG, 5MB max) enforced on both frontend and backend; upload progress shown during S3 upload; uploaded document preview uses presigned URL for display; ProfileVerification (task 07684d38) reuses same flow for re-upload post-onboarding; admin sees uploaded documents in provider approval queue.

As a frontend developer, implement the OnboardingSubmitReview section for the Onboarding page. This section contains an AnimatedCheckmark sub-component that uses D3.js (d3.select on svgRef) to animate SVG circle and path stroke-dashoffset to 0 via d3.easeCubicOut transitions (600ms circle, 500ms path with 350ms additional delay). The parent component sets animated=true via setTimeout(120ms) in useEffect. formData is destructured for full_name, email, phone, userType, address, radius, verifiedDocs, services, skills, contract_types, and materials. Summary sections are built dynamically: profileDetail joins email+phone with bullet separator, roleChips slices the first 4 items from merged services/skills/contract_types/materials, locationDetail combines address and radius. An onGoToStep prop enables edit navigation to specific steps. CSS prefix: 'osr-'.

As a frontend developer, implement the ProvidersPagination section for the Providers page. This section renders a pagination control using React (useState, useRef, useEffect, useCallback) and D3 for an animated progress indicator. Constants: TOTAL_PROVIDERS=450, PER_PAGE=20, TOTAL_PAGES=23. Implement the buildPageNumbers(current, total) utility that produces a smart ellipsis-aware page array (e.g., [1, '...', 4, 5, 6, '...', 23]). Render: previous/next arrow buttons with goTo callback (clamped to [1, TOTAL_PAGES], no-op on boundary); numbered page buttons with ellipsis separators; a result-count label ('startResult–endResult of 450'). Implement the D3 animated progress bar inside indicatorRef/svgRef: draws a background track rect (rgba(0,0,0,0.06)), animates an orange (#FF8C00) progress fill rect from width=0 to (page/TOTAL_PAGES)*width over 400ms with d3.easeCubicOut, and adds a dot indicator at ((page-1)/(TOTAL_PAGES-1))*width with a glow ring animated via d3.easeElasticOut. Apply ProvidersPagination.css (4699 chars). Depends on ProvidersGrid to appear below the grid.

As a frontend developer, implement the UserActions section for the Users page. This section renders a bulk-action toolbar (`ua-section` > `ua-inner`) with three interactive elements managed by `useState` hooks (`selectAll`, `selected` array, `bulkOpen`). It includes: a 'Select All' checkbox (`handleSelectAll` toggles all selection by pushing `'all'` into the `selected` array); a conditional selected-count label that shows 'All selected' vs '${n} selected'; and a `BULK_ACTIONS` dropdown (Send Message ✉, Verify ✓, Suspend ⏸, Delete ✕) with a chevron-down SVG trigger button (`ua-bulk-dropdown-trigger`). The dropdown menu (`ua-bulk-dropdown-menu`) opens on click and closes on blur via `setTimeout`. Danger actions (Suspend, Delete) use `ua-bulk-dropdown-item--danger` class. `handleBulkAction` clears selection on delete. Apply `UserActions.css` for the bar layout, danger-item colouring, and dropdown positioning.

As a frontend developer, implement the CategoriesGrid for the Categories page. This section renders a responsive grid of category cards, each with a custom inline SVG icon component (no external icon lib dependency for lazy-load compatibility). Defined icon components include: IconStructural (grid/rect with centered circle), IconLabor (person silhouette with layered lines), IconMaterials (shelf/storage rack), IconServices (folder with magnifier circle), IconRentals (monitor with two circles and horizontal connector), IconDesign (hexagon polyline with crossed diagonals), IconMEP (lightning bolt with orbiting circle), and IconFinishing (imported but truncated in provided JSX). Uses useState, useEffect, useRef, and useCallback hooks — likely for hover/intersection-observer animations or lazy rendering. Import CategoriesGrid.css for styling. Each category card likely links to a filtered category page. Ensure card hover states and accessible markup are implemented per the CSS file.

As a frontend developer, implement the ListingsFilters section for the Listings page. This is a complex interactive filter panel using multiple state hooks: `useState(false)` for open/collapsed state, `useState([])` for selectedCategories, `useState([0, 200000])` for priceRange dual-handle slider, `useState(null)` for condition, `useState(25)` for radius, `useState(false)` for verifiedOnly toggle, `useState(null)` for availability, and `useState(null)` for dragging (slider drag state). Uses `useRef(sliderRef)` for the price range slider DOM interaction and `useCallback`/`useEffect` for drag event listeners. Renders: (1) CATEGORIES array (10 items: Cement, Steel, Bricks, Sand, Pipes, Electrical, Paint, Hardware, Timber, Roofing with counts) as checkboxes with `toggleCategory`/`removeCategory` handlers; (2) PRICE_PRESETS (Under ₹5K, ₹5K-20K, ₹20K-1L, ₹1L+) as quick-select preset buttons with `applyPreset` toggling; (3) a dual-handle range slider for custom price input; (4) RADIUS_OPTIONS dropdown (5/10/25/50/100 km + All India); (5) AVAILABILITY_OPTIONS (In Stock / On Demand with badge labels); (6) a verified-only toggle with ShieldCheck icon; (7) `activeFilterCount` computed from all active states; (8) a `clearAll` reset function. Imports lucide-react icons: Check, ChevronDown, SlidersHorizontal, X, MapPin, ShieldCheck, Clock, Tag, Package, DollarSign. Import `ListingsFilters.css`.

As a frontend developer, implement the ListingsGrid section for the Listings page. This section renders a grid of listing cards from a static LISTINGS array (8+ items) covering both Materials (Portland Cement, TMT Steel Bars, Ready-Mix Concrete M25, Vitrified Floor Tiles, River Sand, etc.) and Services (Bricklaying & Masonry, Electrical Wiring, Excavator JCB Rental). Each card displays: Unsplash product image, category badge (Materials/Services), seller name with verified badge (boolean `verified` field), location string + distance, star rating + review count, and a price field (nullable — service listings show null price/priceUnit and render a 'Get Quote' CTA instead). Uses `useState` and `useMemo` for derived/filtered listing state. The grid layout is driven by `ListingsGrid.css` with responsive column breakpoints. Cards are interactive with hover states. Handles the distinction between priced material listings and quote-based service listings in the render logic.

As a frontend developer, implement the LeadsStats section for the Leads page. This section renders four stat cards defined in the `STATS` array: Total Leads (1247), Active Leads (389), Conversion Rate (24.8%), and Response Rate (91.5%), each with lucide-react icons (`Users`, `ShieldCheck`, `BarChart3`, `MessageSquare`), accent color variants (`total`, `active`, `conversion`, `response`), and change badges (e.g. '+12.4%'). The `AnimatedValue` sub-component uses `requestAnimationFrame` with ease-out cubic easing over 1400ms to count from 0 to the target value, formatting integers with `toLocaleString()` and floats with `toFixed(1)`. The `Sparkline` sub-component uses `d3` to render SVG path sparklines from 24-point `sparkData` arrays, with each card's `sparkColor`. Uses `useRef` with `hasDrawn` guard to prevent re-rendering sparklines. Import from `../styles/LeadsStats.css` and `d3`.

As a frontend developer, implement the LeadsFilter section for the Leads page. This section renders a collapsible filter drawer controlled by `drawerOpen` state toggled via a mobile bar button with `SlidersHorizontal` and `ChevronDown` icons. Filter state includes: `category` (select from 10 `CATEGORIES` options), `radius` (range slider 1–50km with `RADIUS_PRESETS` snap logic and `rangePos` CSS variable for custom thumb positioning), `budgetMin`/`budgetMax` (text inputs), and `status` (pill group from `STATUS_OPTIONS`: all/new/responded/closed with color badges and counts). `activeCount` is computed via `useMemo` counting non-default filter values and displayed as a badge on the toggle button. `handleClear` (via `useCallback`) resets all filters to defaults. `handleApply` closes the drawer. An `X` icon clears filters inline. The `lf-active-count` badge and `lf-open` class reflect live state. Import from `../styles/LeadsFilter.css`.

As a frontend developer, implement the BottomNav section for the Leads page. This component may already exist from a previous page (e.g. Post, Providers, Profile). It renders a fixed mobile bottom navigation bar (`bn-root`) with 5 tabs defined in the `TABS` array: Home (`/Home`), Search (`/Search`), Post (`/Post`, FAB style), Chats (`/Chat`), and Profile (`/Profile`) — using lucide-react icons `Home`, `Search`, `Plus`, `MessageCircle`, `User`. Active tab is derived on mount via `getActiveKey()` which matches `window.location.pathname` against tab `href` values (case-insensitive). The Post tab renders with a `bn-fab-bubble` wrapper for the floating action button style. Active tab receives `bn-active` class and `aria-current='page'`. Non-FAB tabs render `bn-icon` + `bn-label` spans. Import from `../styles/BottomNav.css`.

As a frontend developer, implement the SavedFiltersBar section for the Saved page. This section renders a horizontal filter chip row and a sort dropdown. Uses `useState` for `activeCategory` (default `'all'`), `sort` (default `'newest'`), and `dropdownOpen`. CATEGORIES constant defines four chips — All Saved (ListFilter icon, count 12), Providers (Users, 5), Materials (Package, 4), Services (Wrench, 3) — each rendered as `<button>` with `aria-pressed`, `sfb-chip` class, and `sfb-active` when selected. Sort dropdown uses `dropdownRef` and `useCallback`/`useEffect` to attach `mousedown`/`touchstart` document listeners for click-outside close. SORT_OPTIONS includes newest, oldest, name_asc, name_desc. Dropdown button shows `ArrowUpDown` and `ChevronDown` icons with `aria-haspopup='listbox'` and `aria-expanded`. Selected sort item renders a `Check` icon. Lucide icons used: ListFilter, ArrowUpDown, ChevronDown, Check, Package, Users, HardHat, Wrench. Applies `sfb-root`, `sfb-inner`, `sfb-chips`, `sfb-sort-wrapper`, `sfb-sort-btn` CSS classes.

As a frontend developer, implement the SavedEmptyState section for the Saved page. This section renders a 3D empty-state illustration using `@react-three/fiber` Canvas. The `StarField` component creates a `THREE.BufferGeometry` with 80 randomly placed points (positions + sizes attributes), rendered as `<points>` with `pointsMaterial` in `#FF8C00` using `AdditiveBlending`. The mesh rotates via `useFrame` (y-axis at 0.08 rad/s, x-axis sine wave at 0.15 rad/s). `OrbitRing` is a torus (`args=[1.0, 0.015, 16, 80]`) at `Math.PI/2.6` tilt, rotating on z-axis at 0.25 rad/s using `meshBasicMaterial` `#FFA54F` at 50% opacity. `OrbitDot` is a sphere (`args=[0.06, 16, 16]`) that orbits via `useFrame` using parametric cos/sin at 0.6 rad/s. `AmbientParticles` adds 50 full-scene background particles spread across 8 units. `StarfieldScene` composes all 3D elements with ambient light (0.3 intensity). Below the Canvas, a `Bookmark` icon, heading, subtext, and an `ArrowRight` CTA link to `/Search` are rendered. All geometry is memoized with `useMemo`. CSS classes prefixed `ses-`.

As a frontend developer, implement the RatingSummary section for the Reviews page. This section uses D3.js (d3.selectAll, d3.easeCubicOut, d3.transition) to animate bar fill widths on IntersectionObserver entry (threshold 0.3, 700ms duration, 80ms stagger delay per bar). The breakdown array defines 5 star tiers (284/156/72/31/18 counts) rendered as .rs-bar-fill elements. A renderStars() utility computes full/half/empty star states from avgRating (4.7). The rs-stats-cluster displays avgRating, totalCount (toLocaleString), and recommendationPct (92%). Uses lucide-react ThumbsUp icon. The barsRef and animatedRef hooks prevent re-animation. Imports RatingSummary.css. Independent of other sections — can be built in parallel with ReviewFilters and ReviewsList.

As a frontend developer, implement the ReviewFilters section for the Reviews page. This section manages three pieces of state via useState: sortOpen (boolean for dropdown visibility), sortValue (default 'most_recent'), ratingFilter (default 'all'), and categoryFilter (default 'All Categories'). A sortRef with document mousedown listener closes the sort dropdown on outside click. SORT_OPTIONS (4 options), RATING_FILTERS (6 chip values including star icons via lucide-react Star), and CATEGORIES (16 construction categories) drive the UI. activeFilterCount drives a badge showing combined active filters. handleClearAll resets all state. The rf-sort-menu uses aria-haspopup/aria-expanded for accessibility. ChevronDown and X icons from lucide-react. Imports ReviewFilters.css. Independent of RatingSummary — can build in parallel.

As a frontend developer, implement the ReviewsList section for the Reviews page. This section renders REVIEWS_DATA (4 review objects with fields: id, reviewer, initials, avatar, rating, date, relative, title, body, verified, helpful, unhelpful, reply). Each review card renders: an avatar fallback using initials, a star rating row, a BadgeCheck verified badge, review title/body text, ThumbsUp/ThumbsDown helpful vote counters with useState per review, a MessageSquare icon for reply count, and an optional provider reply block (from, text, date). Uses lucide-react icons: ThumbsUp, ThumbsDown, BadgeCheck, Star, MessageSquare. State is managed with useState and useRef for tracking helpful/unhelpful votes. useCallback and useEffect hooks support lazy rendering or intersection-based reveal. Imports ReviewsList.css. Independent of ReviewFilters and RatingSummary — can build in parallel.

As a frontend developer, implement the SubscriptionHero section for the Subscription page. This is a 3D React Three Fiber hero using @react-three/fiber Canvas with @react-three/drei Float, Text3D, RoundedBox, Center, and Environment. It renders three TierBadge meshes (FREE/#9E9E9E, PREMIUM/#FFD700, PRO/#FF6D00) as floating RoundedBox groups with inner accent strips and colored dot cluster spheres, each animated via useFrame with per-badge y-oscillation (Math.sin with clock.elapsedTime) and slow Y-rotation. A ParticleRing component creates an orbiting 60-particle ring around the badges. The 2D overlay includes a headline, subheadline, and two CTA buttons using ChevronRight, ArrowRight, and Zap lucide icons. Uses useRef and useMemo for geometry optimization. This section is independent of other content sections and depends only on TopNav.

As a frontend developer, implement the SubscriptionPlans section for the Subscription page. This component uses useState for billing toggle (monthly/annual), useEffect for intersection observer-based scroll animation, useRef for card refs, and useCallback for event handlers. It renders planData (monthly/annual variants) for three tiers: Free (₹0, sp-cta-outline), Premium (₹499, sp-cta-primary, popular badge), and Pro (₹999, sp-cta-default). Each plan card lists 10 benefits with Check/X icons from lucide-react. The popular Premium card gets elevated styling. A billing toggle switches between monthly and annual pricing (with annual savings callout). CTA buttons link to /Register (Free) and /Subscription (Premium/Pro). Uses ArrowRight icon on CTAs. This section is independent and parallel to SubscriptionComparison, SubscriptionFeatures, SubscriptionFAQ, and SubscriptionCTA.

As a frontend developer, implement the SubscriptionComparison section for the Subscription page. Uses useState for active highlighted column (free/premium/pro). Renders a structured feature comparison table across 4 categories: Leads & Visibility (5 items), Communication (5 items), Portfolio & Branding (5 items), and Analytics & Support (5 items). Each row renders three tier cells using renderMark() which maps boolean true → Check icon (sc-check), false → X icon (sc-x), 'unlimited' → Check, 'basic' → Minus (sc-dash), 'priority' → Check, 'featured' → special badge, and string 'limited-N' values → partial indicator. Icons from lucide-react: Check, X, Minus, ArrowRight, Zap. Includes a CTA row at the bottom with upgrade links. This section is independent and parallel to SubscriptionPlans, SubscriptionFeatures, SubscriptionFAQ, and SubscriptionCTA.

As a frontend developer, implement the SubscriptionFeatures section for the Subscription page. This section combines a raw Three.js GalaxyField canvas (NOT React Three Fiber — uses THREE.BufferGeometry, THREE.Points, requestAnimationFrame via animId ref, mounted imperatively to mountRef div) with a 2D feature grid. The galaxy particle field has 300 particles in a clustered spiral distribution with per-particle colors sampled from four THREE.Color values (orange #FF8C00, gold #FFD700, green #32CD32, slate #2F4F4F) via useMemo. The feature grid renders 8 feature cards from the features array, each with a lucide icon (Infinity, Headphones, BarChart3, BadgeCheck, Briefcase, MessageCircle, ShieldCheck, Zap) with color classes (sf-icon-orange, sf-icon-green, sf-icon-slate, sf-icon-gold), title, and description. Uses useRef, useEffect (for Three.js mount/unmount lifecycle), and useMemo. This section is independent and parallel to SubscriptionPlans, SubscriptionComparison, SubscriptionFAQ, and SubscriptionCTA.

As a frontend developer, implement the SubscriptionFAQ section for the Subscription page. Uses useState to track openId (the currently expanded FAQ item) with accordion open/close toggle logic. Renders faqData across 3 categories: Plans & Pricing (3 items: what-plans, upgrade-downgrade, billing-cycle), Cancellation & Refunds (2 items: cancel, refund), and Features & Access (items including lead-access and visibility). Each category renders a heading and a list of accordion items — clicking an item toggles its open state revealing the answer. Uses HelpCircle, ChevronDown (rotated when open), ArrowRight, and MessageCircle lucide icons. Includes a 'Still have questions?' contact CTA with MessageCircle icon at the bottom. This section is independent and parallel to SubscriptionPlans, SubscriptionComparison, SubscriptionFeatures, and SubscriptionCTA.

As a frontend developer, implement the SubscriptionCTA section for the Subscription page. Features a React Three Fiber Canvas (camera position [0,0,5], fov 55, dpr [1,1.5], alpha: true) with a ParticleField component: 140 particles using THREE.BufferGeometry bufferAttributes for position (Float32Array count*3), color (Float32Array count*3), and size (Float32Array count). Colors are blended from orange (#FF8C00), gold (#FFD700), green (#32CD32), and warm (#FFA54F) THREE.Color instances using lerp. pointsMaterial uses vertexColors, AdditiveBlending, depthWrite false, and sizeAttenuation. useFrame rotates the points mesh on Y (+0.0003) and X (+0.0001) axes. Uses useMemo for geometry data arrays. The 2D overlay (scta-inner) has a headline with italic 'Grow Your Business', a support paragraph, trust badges using CreditCard, Shield, Star icons, and a primary CTA button with ArrowRight icon. This section is independent and parallel to SubscriptionPlans, SubscriptionComparison, SubscriptionFeatures, and SubscriptionFAQ.

As a frontend developer, implement the PlatformUserTypes section for the Platform page. This section renders a role-selection grid ('put-grid') of 8 user type cards defined in the userTypes array: Customer (User icon), Individual Labour (Wrench), Mestri/Foreman (HardHat), Plumber/Electrician (Zap), Architect/Engineer (Compass), Contractor (Building2), Material Supplier (Package), Admin (ShieldCheck). Each card has a roleTag badge ('Hire', 'Work', 'Lead', etc.), description, icon, and ArrowRight link. Uses useState for activeCard hover state toggling 'put-card--active' CSS class. Cards link to '/Onboarding' or '/Dashboard'. Header includes 'put-label', 'put-title' with highlighted span, and 'put-subtitle'. Import from '../styles/PlatformUserTypes.css'.

As a frontend developer, implement the PlatformServices section for the Platform page. This section renders a 12-item SERVICE_CATEGORIES grid using an ICON_MAP that maps string keys to lucide-react components (Wrench, Hammer, Droplets, BrickWall, Zap, Building2, PaintBucket, Ruler, Drill, HardHat, Thermometer, ShieldCheck). Each service card displays the dynamic icon component resolved via ICON_MAP[category.icon], category name, provider count (formatted with underscore separators e.g. 1_240), and a short desc. Categories include AC Technician, Carpenter, Plumber, Mason, Electrician, Architect, Painter, General Contractor, Borewell & Drilling, Safety Consultant, Structural Engineer, Welder/Fabricator. Includes ChevronRight navigation and ArrowRight CTA. Stateless functional component. Import from '../styles/PlatformServices.css'.

As a frontend developer, implement the PlatformHowItWorks section for the Platform page. This section renders a 5-step process (Post Requirement → Receive Quotes → Compare & Chat → Hire & Complete → Rate & Review) using STEPS array with num, icon (FileText, Calculator, MessageSquareText, UserCheck, Star from lucide-react), title, and desc. Implements scroll-driven step reveal via IntersectionObserver on individual step elements (data-stepIndex attribute), storing visible indices in visibleSteps state array. Implements a scroll-driven SVG connector line (svgRef) with drawProgress state updated via window scroll listener on sectionRef, animating the connecting path between steps on desktop. Uses useState, useEffect, useRef, useCallback hooks. Step refs managed via stepRefs.current array. Import from '../styles/PlatformHowItWorks.css'.

As a frontend developer, implement the PlatformTrustBadges section for the Platform page. This section includes two D3-powered sub-components: AnimatedNumber (uses d3.interpolateRound tween with IntersectionObserver to count up from 0 on viewport entry, d3.format(',d') for formatting, accepts value/suffix/duration props) and StarRating (renders SVG star polygons via D3 path calculations with outerR/innerR, clipPath for partial fills, '#FFD700' fill color, also IntersectionObserver-triggered). Features ShieldCheck, CheckCircle, Users, Star, Briefcase, Clock icons from lucide-react. Includes a testimonials carousel with ChevronLeft/ChevronRight navigation buttons and Quote icon. Trust stat badges with animated numbers. Uses useState, useEffect, useRef, useCallback hooks throughout. Import from '../styles/PlatformTrustBadges.css'.

As a frontend developer, implement the PlatformCTA section for the Platform page. This section renders a canvas-based 2D particle animation (canvasRef) with 62 floating particles having vx/vy velocity, pulse animation, hue values (30=orange, 45=gold, 120=green), and connection lines drawn between nearby particles (dist < 110) with rgba(255,140,0,alpha) stroke. Also renders 18 blinking star particles. Canvas is DPR-aware (min devicePixelRatio 2), handles window resize, and runs requestAnimationFrame loop via animRef. Benefits list renders 3 items (Users/Verified Professionals, Shield/Secure Payment, CreditCard/Transparent Pricing) with Check icons. Includes Sparkles and ArrowRight icons for CTA buttons. Note: THREE is imported but canvas 2D context is used instead. Import from '../styles/PlatformCTA.css'.

As a frontend developer, implement the ChatTopBar section for the Chat page. This header component renders a conversation top bar with: a back arrow (ArrowLeft icon linking to /Chat), an avatar with initials fallback and online presence dot (.ctb-presence.is-online), identity info showing name, BadgeCheck verified icon, role tag, and status dot with online/offline state. Right side actions include Phone (voice call), Video (video call), Info button with infoActive toggle state using useState, and a MoreVertical dropdown menu using menuRef and useEffect for outside-click detection (document.addEventListener mousedown). The dropdown menu items include FileText (View Files), Bell (Mute Notifications), Flag (Report), and Trash2 (Delete Conversation) icons. Props: name, role, status, online, verified, avatarUrl with defaults. State: menuOpen, infoActive. CSS from ChatTopBar.css.

As a frontend developer, implement the OrdersHeader section for the Orders page. This section renders a `<section className='oh-root'>` with an inner wrapper containing two rows: (1) a header row with an `<h1 className='oh-title'>My Orders</h1>` and a `<span className='oh-count-badge'>` displaying a pulsing `oh-count-dot` and a hardcoded `activeOrdersCount` of 12 active orders; (2) a controls row featuring a search bar wrapper (`oh-search-wrapper`) with a `<Search />` lucide icon, a controlled `<input>` bound to `searchValue` via `useState`, and a conditional clear button rendering `<X size={14} />` when `searchValue.length > 0`. Also includes a filter toggle button (`oh-filter-btn`) with `<SlidersHorizontal />` icon that toggles `filterActive` state and conditionally renders an `oh-filter-indicator` dot. Handlers: `handleSearchChange`, `handleClearSearch`, `handleFilterToggle`. Note: this is a standalone header component — check if a shared Navbar exists from previous pages. Depends on page-level task from Listings page.

As a frontend developer, implement the OrdersTabs section for the Orders page. This section renders a horizontally scrollable tab bar (`otb-scroll`) with `role='tablist'` and `aria-label='Order status filters'`. It maps over a static `TABS` array of 6 tab objects — `{ id, label, status, count }` — covering: 'all' (124), 'active' (38), 'pending' (17), 'confirmed' (29), 'completed' (34), 'cancelled' (6). Each tab is a `<button>` with `role='tab'`, `aria-selected`, and a `data-status` attribute. Active tab is tracked via `useState('all')` and toggled by `handleTabClick`. Active tab receives the `otb-tab--active` class. Each tab renders `<span className='otb-label'>` and `<span className='otb-count'>`. Independent of OrdersHeader — can be built in parallel.

As a frontend developer, implement the OrdersListView section for the Orders page. This section renders a `<section className='olv-root'>` containing a header row with an `olv-title` ('Order History'), an `olv-count` badge showing the number of orders, and a sort button (`olv-sort-btn`) that toggles `sortOpen` state via `useState(false)`. The main content maps over a static `ORDER_DATA` array of 6 order objects — each with fields: `id` (e.g. 'ORD-2026-0847'), `project`, `provider`, `providerInitials`, `providerAccent` (boolean for avatar accent color), `providerOnline` (boolean for online status indicator), `status` ('pending' | 'confirmed' | 'completed'), `orderDate`, and `estimatedCompletion`. A `STATUS_CONFIG` map provides per-status `{ label, icon, cls }` — using lucide icons `Circle` (pending), `CheckCircle2` (confirmed/completed). Each order card should render provider avatar with initials, online indicator, order ID, project name, status badge with icon, dates (`Calendar` icon), and action buttons for `<MessageCircle />`, `<Phone />`, `<Eye />` (view detail). Also uses `PackageOpen` and `ChevronDown` from lucide-react. Orders are stored in `useState(ORDER_DATA)`. Independent of OrdersHeader and OrdersTabs — can be built in parallel.

As a frontend developer, implement the OrdersDetailView section for the Orders page. This is the most complex section — a detailed order modal/panel rendering a static `orderData` object for order 'ORD-2026-08942' with status 'in_progress'. Key sub-sections: (1) Project details block with `<MapPin />` location ('Whitefield, Bengaluru, Karnataka'), `<Calendar />` date, `<Banknote />` budget formatted via `formatCurrency` using `Intl.NumberFormat` with INR locale; (2) Timeline stepper with 6 steps mapping `timeline` array — each step has a dot with dynamic class from `getTimelineDotClass` returning `odv-timeline-dot--completed`, `odv-timeline-dot--current`, or `odv-timeline-dot--pending`, using lucide icons `CheckCircle2`, `CircleDot`, `Circle`; (3) Provider card showing avatar initials ('RC'), `<Star />` rating (4.7, 238 reviews), `<Phone />` contact, stats (47 projects, 12 years experience, 94% on-time rate); (4) Amount breakdown table mapping `amountBreakdown` array (6 line items) plus total, all formatted with `formatCurrency`; (5) Image gallery with 4 placeholder image slots (`images` array with `src` and `label`); (6) Inline chat widget with 3 seed messages from `orderData.chat`, distinguishing 'provider' vs 'customer' message alignment, with a compose input bound to state and a `<Send />` submit button (`<MessageSquare />` also used). Uses `useState` for chat input. Close button renders `<X />` icon. Navigation uses `<ChevronRight />`. Independent of other sections — can be built in parallel.

As a Backend Developer, implement orders management API. GET /api/v1/orders (authenticated user's orders, filterable by status: all/active/pending/confirmed/completed/cancelled, searchable by project/provider name, paginated), GET /api/v1/orders/:id (full order detail: timeline steps, amount breakdown, provider card, image gallery, chat history), POST /api/v1/orders (create order — auto-triggered on quote acceptance), PUT /api/v1/orders/:id/status (update order status through workflow: pending→confirmed→in_progress→completed/cancelled), GET /api/v1/orders/stats (active orders count, summary metrics). Timeline progression tracked with timestamps per step. Amount breakdown includes line items + GST. Orders link to conversation for inline chat. Material supplier orders track fulfillment status separately. Return status labels and config matching frontend STATUS_CONFIG.

As a Tech Lead, verify the end-to-end integration between the Leads page frontend (LeadsHeader, LeadsStats, LeadsFilter, LeadsGrid, LeadsEmpty, BottomNav) and the Leads backend API. Ensure: LeadsStats AnimatedValue and Sparkline components receive real data from GET /api/v1/leads/stats; LeadsFilter state (category, radius, budget, status) sends correct query params to GET /api/v1/leads; LeadsGrid IntersectionObserver infinite scroll correctly fetches MORE_LEADS via cursor pagination; match_percent progress bars render from real API data; LeadsEmpty shows when GET /api/v1/leads returns empty array; respond action calls POST /api/v1/leads/:id/respond and opens conversation. Note: depends on LeadsHeader (b49a83f2), LeadsStats (db9e54bf), LeadsFilter (155dfaba), LeadsGrid (14ebd1ef), LeadsEmpty (ffc83eac) and T-BE-LEADS.

As a Tech Lead, verify the end-to-end integration between the Quotes page frontend (QuotesPageHeader, QuotesFilterBar, QuotesList, QuoteDetailModal, QuotesEmptyState) and the Quotes backend API. Ensure: QuotesPageHeader stat counters (128, 42, 18, 86) load from GET /api/v1/quotes/stats; QuotesFilterBar status filters (pending/accepted/rejected) and search send params to GET /api/v1/quotes; QuotesList renders real quotes replacing QUOTE_DATA — IndianRupee formatted amounts, real provider info; QuoteDetailModal accept/reject buttons call PUT /api/v1/quotes/:id/accept and PUT /api/v1/quotes/:id/reject, status badge updates; inline message composer calls POST /api/v1/conversations/:id/messages; QuotesEmptyState renders when API returns empty array. Note: depends on QuotesPageHeader (e5174dac), QuotesFilterBar (8347a3af), QuotesList (91a34a32), QuoteDetailModal (25d9c4df) and T-BE-QUOTES.

As a Tech Lead, verify the end-to-end integration between the frontend i18n system (task T-FE-I18N, UserContext language in ff075f43) and the backend multilingual support (task T-BE-MULTILANG). Ensure: Navbar language switcher (Navbar task dc58518c) and OnboardingHeader language selector (task 596a7f3d) both call PUT /api/v1/users/me/language on selection; language preference persists across sessions (stored in DB, cached in Redis); GET /api/v1/platform/languages drives the language options list in both components; page re-renders with correct locale strings after language switch without full page reload; error messages returned from backend APIs are localized to the user's selected language; ProfileSettings language card (task 0f2d7fc6) reads and updates the same language preference via API.

As a Tech Lead, verify the end-to-end integration between the PortfolioCTA (task 5b7f037d) upload flow and the Portfolio API (task 68522d3f). Ensure: (1) 'Upload Project' CTA in PortfolioCTA opens a project creation form; (2) Image uploads call POST /api/v1/portfolio/:id/images with S3 presigned URL flow (AWS S3 task 4a58fb69) — images stored in portfolio-images bucket, CloudFront CDN URLs returned; (3) Project creation form submits to POST /api/v1/portfolio with title, category, description, client, completion_date, images[], testimonial; (4) Newly created project appears in PortfolioProjects (task c5a7f73d) grid immediately; (5) ProfilePortfolio (task 3623f50c) sampleProjects refreshed from GET /api/v1/providers/:id/portfolio showing the new project with 3D geometry viewer. Validate provider can only edit/delete own portfolio items.

As a Tech Lead, verify the end-to-end integration of the search-to-provider-profile-to-chat funnel — the core customer acquisition flow. Ensure: (1) SearchHero (task b29be8ce) query + location + category correctly sends to Search API (task 5f578e09) GET /api/v1/search/providers; (2) ResultsGrid (task 1abe62c3) provider card click navigates to GET /api/v1/providers/:id — ProfileHeader (task 9ade2e74) loads correctly; (3) ProfileReviews (task 647d101a) on provider profile loads from GET /api/v1/providers/:id/reviews; (4) 'Save Provider' heart on search result calls POST /api/v1/saved with item_type: 'provider' and appears in SavedItemsList (task 33093f18) under Providers filter; (5) 'Chat' button on provider profile calls POST /api/v1/conversations to create conversation, navigates to Chat page; (6) FilterPanel (task 3f3d6b57) verifiedOnly toggle sends verified=true param to Search API and only verified providers returned.

As a frontend developer, implement the LeadsGrid section for the Leads page. This section renders a responsive grid of lead cards from `INITIAL_LEADS` (6 items) with infinite scroll loading `MORE_LEADS` (2+ items). Each lead card displays: customer avatar initials (`customerInitials`), `CheckCircle` verified badge (conditional on `verified`), `projectTitle`, `category` pill, `IndianRupee` budget range, `MapPin` location with distance, `Clock` posted time, and a `matchPercent` progress bar. Action buttons include `Eye` (view) and `MessageSquare` (respond). State includes `leads` array, `loading` boolean, and `hasMore` boolean. A `Loader2` spinner (with spin animation) appears during load. Uses `useRef` for an IntersectionObserver sentinel div that triggers `loadMore` via `useCallback` when scrolled into view. `useEffect` wires the observer to the sentinel. Import from `../styles/LeadsGrid.css` with lucide-react icons.

As a frontend developer, implement the LeadsEmpty section for the Leads page. This section renders an animated empty-state illustration using D3 and inline SVG with a compass/blueprint theme. SVG paths are defined as constants: `COMPASS_OUTER`, `COMPASS_INNER`, `COMPASS_CROSSHAIR_H`, `COMPASS_CROSSHAIR_V`, `NEEDLE_N`, `NEEDLE_S`, `DASHED_RING`, cardinal tick marks (`TICK_N/S/E/W`), and blueprint lines (`BLUEPRINT_1/2/3`). `getPathLengths()` computes actual SVG path lengths via `createElementNS` and `getTotalLength()` for dash-offset animations, stored as `pathLengths` state. A `useRef` `entered` guard ensures path lengths are computed only once on mount. `generateDotGrid(cols, rows, r)` produces decorative dot arrays rendered as SVG circles in `dots-tr` and other corner positions. The `renderPath` helper applies `--path-len` CSS custom property per path for stroke-dasharray/dashoffset CSS animation. Icons from lucide-react: `Eraser`, `MapPin`, `Clock`, `Search`, `Compass`. Import from `../styles/LeadsEmpty.css` and `d3`.

As a frontend developer, implement the SavedItemsList section for the Saved page. This is the most complex section, featuring an animated list of saved items with per-card 3D tilt and save-toggle interactions. Uses `useState` for per-card saved state and `useRef`/`useCallback` for the tilt effect. `tiltFromEvent` computes `perspective(800px) rotateX/rotateY` transforms from pointer position relative to card center (±8deg). `SavedItemCard` sub-component handles `onPointerMove`, `onPointerLeave` to apply/reset tilt, and renders item details: category icon (Building2, Wrench, HardHat, Truck, Box), title, location (MapPin), rating (Star, conditional), verified badge (ShieldCheck), price label, and a Heart toggle button using `onToggleSave`. `AnimatePresence` + `motion.li` from Framer Motion handle exit animations when items are unsaved (layout, opacity/scale/height transition). The initial data `SAVED_ITEMS_INITIAL` contains 6 items spanning providers and materials with Mumbai locations. Empty-filter fallback shows a SearchX icon. Lucide icons: MapPin, Star, Heart, ShieldCheck, ArrowUpDown, Building2, HardHat, Truck, Wrench, Box, SearchX. CSS classes: saved items list root and card variants.

As a frontend developer, implement the PaginationControls section for the Reviews page. This section uses D3.js for an animated SVG progress track (svgRef, lineRef, dotRef) that transitions a line x2 and a dot cx attribute over 450ms with d3.easeCubicInOut, followed by a dot pulse (r: 5.5→4, 200ms). State includes currentPage (useState), showMoreLoading (boolean with 800ms setTimeout simulation), and visiblePages (increments by ITEMS_PER_PAGE=10 up to TOTAL_REVIEWS=247). getPageNumbers() via useCallback computes a windowed page array (maxVisible=5) with ellipsis '...' entries. goToPage() calls window.scrollTo smooth scroll and tracks prevPageRef for D3 from/to animation. handleShowMore simulates async load with Loader2 spinner icon. ChevronLeft/ChevronRight/ChevronDown from lucide-react. Imports PaginationControls.css. Depends on ReviewsList existing before pagination is wired.

As a frontend developer, implement the ChatMessageThread section for the Chat page. This is the primary message list component rendering a scrollable thread of messages from a MESSAGES const array. Features include: date separator dividers (null entries in array), provider vs customer message bubbles with distinct alignment and styling, message status icons (Check for sent, CheckCheck for read, AlertCircle for failed), a rich Quote card sub-component showing label, body, amount (₹), validUntil with Calendar icon, location with MapPin icon, and a 'View Full Quote' CTA. Attachment rendering for pdf (FileText icon) and image (Image icon) types with Download button. A sticky DateBadge header, scroll-to-bottom ChevronDown FAB with unread count badge, auto-scroll on mount using useRef and useEffect. MessageCircle empty state when no messages. Uses lucide-react icons: FileText, Image, Download, ChevronDown, Check, CheckCheck, AlertCircle, MessageCircle, Phone, Clock, Banknote, Calendar, MapPin. State: useState for scroll position/unread count, useRef for thread container. CSS from ChatMessageThread.css.

As a frontend developer, implement the ChatInputBar section for the Chat page. This is the message composer component with: a quick-action row containing a Call toggle button (Phone icon, callOn state via useState), a WhatsApp toggle button (MessageCircle icon, whatsappOn state), and a character counter displaying message.length/MAX_LEN (1000). A textarea with autoGrow callback (useCallback) that dynamically sets height up to 120px via el.scrollHeight, onChange capped at MAX_LEN chars, onKeyDown handling Enter (without Shift) to trigger handleSend. Attachment flow: Paperclip button triggers setShake animation (420ms), hidden file input via fileRef, attachment preview bar shows FileText icon + filename + × remove button. Send button (Send icon from lucide-react) enabled only when canSend (message.trim().length > 0 || attachment), triggers setPulse animation (460ms). On send: clears message state, clears attachment, resets textarea height, refocuses via textRef. State: message, focused, callOn, whatsappOn, attachment, shake, pulse. CSS from ChatInputBar.css with shake and pulse keyframe animations.

As a frontend developer, implement the QuotesPageHeader section for the Quotes page. This section features a Three.js WebGL animated accent canvas (canvasRef) with 8 floating geometric meshes (IcosahedronGeometry, OctahedronGeometry, TorusGeometry, DodecahedronGeometry, TorusKnotGeometry, SphereGeometry) using MeshStandardMaterial with orange/teal color palette and 0.22 opacity. Meshes have per-frame rotation and sinusoidal float animations via animRef requestAnimationFrame loop. Includes animated stat counters using useState(statValues) that count up from 0 to target values (128, 42, 18, 86) on mount, and animated bar chart using useState(barsHeights) with 6 bars. Stats display with Lucide icons (FileText, TrendingUp, Clock, CheckCircle2) via the STATS constant array. Implements AmbientLight and DirectionalLight with resize observer for responsive canvas. Component imports from '../styles/QuotesPageHeader.css'.

As a Tech Lead, verify the end-to-end integration between the Orders page frontend (OrdersHeader, OrdersTabs, OrdersListView, OrdersDetailView) and the Orders backend API. Ensure: OrdersHeader active orders count badge loads from GET /api/v1/orders/stats; OrdersTabs tab counts (124 all, 38 active, etc.) reflect real API data per status; OrdersListView renders real orders from GET /api/v1/orders?status=... with search and sort wired to API params; OrdersDetailView loads full order detail from GET /api/v1/orders/:id including real timeline steps, amount breakdown, provider card, and chat history; status update buttons call PUT /api/v1/orders/:id/status correctly. Note: depends on OrdersHeader (9d9a16c4), OrdersTabs (0dc644bd), OrdersListView (911c335c), OrdersDetailView (c541cdb1) and T-BE-ORDERS.

As a Tech Lead, verify the end-to-end integration between the Subscription page frontend (SubscriptionPlans task 8c0e2cd0, SubscriptionHero task 9f66c8ea) and the Razorpay payment backend (task T-BE-RAZORPAY) and Subscriptions API (task 8aed58b2). Ensure: Premium/Pro plan CTA buttons call POST /api/v1/payments/create-order to get Razorpay order_id; Razorpay JS SDK modal opens with correct amount, currency, prefill (name, phone); on modal success callback POST /api/v1/payments/verify is called with payment_id + signature; successful verification updates subscription status in UI and redirects to profile with new tier badge; payment failure shows error toast; webhook endpoint correctly activates subscription on payment.captured event. Verify annual discount calculation is consistent between frontend billing toggle and backend subscription proration.

As a Tech Lead, verify the end-to-end integration of the full provider approval workflow spanning multiple pages and APIs. Ensure: (1) After OnboardingSubmitReview (task a3b7ea31) calls POST /api/v1/onboarding/submit, admin receives notification (T-BE-NOTIFICATIONS) and sees provider in GET /api/v1/providers/pending; (2) Admin Providers page (ProvidersGrid task 719cf73e) approve/reject buttons call POST /api/v1/providers/:id/approve and POST /api/v1/providers/:id/reject correctly; (3) Provider receives push notification on approval/rejection; (4) Approved provider profile becomes publicly visible in GET /api/v1/providers (search results); (5) Rejected provider sees rejection reason in OnboardingStatus and can re-submit after addressing issues; (6) Admin DashboardActivities (task a83526b7) Pending Approvals tab reflects real data from GET /api/v1/providers/pending. Cross-page flow validation.

As a Tech Lead, verify the end-to-end integration for the review submission flow. Ensure: (1) After order completion (status: completed in Orders API task 7adebd78), customer is prompted to rate the provider — reviews CTA appears in OrdersDetailView (task c541cdb1); (2) Review form submits to POST /api/v1/reviews in Reviews API (task 78f218e7) with provider_id, rating, title, body, category; (3) ReviewsList (task e73aea3f) on the provider's Reviews page reflects the new review immediately after submission; (4) RatingSummary (task 5a64aa3d) D3 bar animation re-triggers with updated star_breakdown counts; (5) Provider aggregate rating in ProvidersGrid (task 719cf73e) and ProfileHeader (task 9ade2e74) updates to reflect new avg_rating; (6) Admin Reviews moderation — admin can soft-delete inappropriate reviews via POST /api/v1/reviews/:id/moderate. Verify helpful vote toggle in ReviewsList calls POST /api/v1/reviews/:id/helpful correctly.

As a frontend developer, implement the QuotesFilterBar section for the Quotes page. This section renders a filter/search bar with: a controlled search input (useState search) with mouse-follow radial glow effect via onMouseMove tracking (mousePos state, searchWrapRef) updating a CSS custom-property-driven gradient; status filter chips (STATUS_FILTERS: all/pending/accepted/rejected with dot color indicators and counts) using useState(status); a custom sort dropdown (SORT_OPTIONS: newest/oldest/price_high/price_low) with useState(sort) and useState(sortOpen) toggled by ArrowUpDown and ChevronDown Lucide icons, closed on outside blur via handleSortBlur and sortRef; a reset button (RotateCcw icon) shown when hasActiveFilters is true via handleClear; a dynamic result count computed from activeStatus.count filtered by search percentage. Uses useCallback for handleMouseMove, handleMouseLeave, handleSortBlur. Imports SlidersHorizontal, Search, X icons from lucide-react. Component imports from '../styles/QuotesFilterBar.css'.

As a frontend developer, implement the QuotesList section for the Quotes page. This section renders a list of 8 quote cards from QUOTE_DATA array (ids QT-2026-0136 through QT-2026-0142) each containing: service name, customer, IndianRupee-formatted amount, MapPin location, Calendar datePosted, Hash quote ID, Briefcase provider, and status badge (pending/accepted/rejected). Action buttons per card include Eye (view detail), CheckCircle (accept), XCircle (reject), and MessageSquare (chat). Uses useState for selected/active quote tracking, useEffect for mount animations, useRef for card refs, and useCallback for interaction handlers. Integrates d3 for animated bar/sparkline elements within cards. Lucide icons: Eye, CheckCircle, XCircle, MessageSquare, MapPin, Calendar, Hash, Briefcase, IndianRupee, User, FileText, ArrowUpDown, Inbox. Shows empty Inbox state when no results match. Component imports from '../styles/QuotesList.css'.

As a frontend developer, implement the QuotesEmptyState section for the Quotes page. This section renders a full-section empty state with a Canvas2D particle animation (canvasRef) using d3.range(50) to generate 50 drifting orange particles (rgba(255,140,0,alpha)) with per-frame position drift, boundary wrapping, and alpha oscillation via requestAnimationFrame loop. Includes a ResizeObserver (ro) to recreate particles on canvas resize. Background has a qes-bg-dots dot-pattern div and qes-glow radial gradient div for depth. Centered content features a qes-icon-wrap with two animated qes-icon-ring pulse rings and qes-icon-core containing FileText icon (size 34); headline 'No Quotes Yet'; a descriptive message paragraph; and two CTA buttons — a primary 'Request a Quote' with Plus icon and a secondary 'Browse Services' with Search icon. Canvas is absolutely positioned (inset 0, pointerEvents none, zIndex 1). Component imports from '../styles/QuotesEmptyState.css'.

As a Tech Lead, verify the end-to-end integration of the requirement posting to lead generation pipeline. Ensure: (1) SubmissionActions (task d3578640) calls POST /api/v1/requirements and on 200 response the matching algorithm in Requirements API (task 5d0eaa5f) fires a background task to create lead records for matched providers; (2) LeadsGrid (task 14ebd1ef) IntersectionObserver infinite scroll receives newly created leads via GET /api/v1/leads within seconds of requirement posting; (3) LeadsStats (task db9e54bf) AnimatedValue counters reflect incremented total after new lead; (4) Provider receives push notification (T-BE-NOTIFICATIONS) with new lead; (5) PostPreview (task 43242bb5) providerMatches count correctly loads from GET /api/v1/requirements/:id/matches after creation; (6) Free tier providers see limited lead preview with upgrade prompt overlay.

As a Tech Lead, verify the end-to-end integration of the Materials page save/contact flows. Ensure: (1) Heart/save toggle on MaterialsGrid (task fe81c1f2) calls POST /api/v1/saved with item_type: 'material' and DELETE /api/v1/saved/:item_id on unsave — Saved Items API (task 8f3466cb); (2) Saved material appears in SavedItemsList (task 33093f18) under Materials filter immediately; (3) Contact seller button on material card calls POST /api/v1/materials/:id/contact (task d2bc0f6e) which creates/opens conversation, then navigates to Chat page; (4) ChatTopBar (task 3062341e) loads correct conversation with seller; (5) SavedFiltersBar (task 88395db8) materials chip count increments on save. Validate full flow: browse materials → save → view in Saved → contact seller → chat.

As a frontend developer, implement the QuoteDetailModal section for the Quotes page. This modal renders full quote detail for QUOTE_DATA (id QT-2026-0472, '3BHK Apartment Full Renovation') with: a header showing quote ID, title, status badge, and X close button; customer card with initials avatar ('PS'), star rating (4.7, 23 reviews), verified ShieldCheck badge, MapPin location; a services/BOQ table with 8 line items (Flooring, Kitchen, False Ceiling, Bathrooms, Wardrobes, Painting, Electrical) showing qty, rate, amount, subtotal, GST, and IndianRupee-formatted total (₹11,82,242); payment terms list with 4 milestone entries and icons; a 5-step timeline (Quote Sent → Site Visit → Under Review → Start Date → Completion) with done/active/pending states; attachments list with PDF/image icons (FileDown, FileSpreadsheet, Image); action buttons ThumbsUp (accept), ThumbsDown (reject), MessageCircle (chat); an inline message composer with useState for message text, Paperclip/Image attachment buttons, and Send submit. Lucide icons: X, FileText, User, ShieldCheck, MapPin, Star, Clock, Calendar, FileDown, CircleDollarSign, MessageSquare, CheckCircle2, ThumbsUp, ThumbsDown, MessageCircle, Send, Paperclip, Image, FileSpreadsheet, ChevronDown, Building2, HardHat, PaintBucket, BrickWall, Wrench. Uses useState for modal open/close, active tab, and message input. Component imports from '../styles/QuoteDetailModal.css'.

As a Tech Lead, verify the end-to-end integration between the Quotes page accept flow and Order creation. Ensure: (1) QuoteDetailModal (task 25d9c4df) accept button calls PUT /api/v1/quotes/:id/accept in Quotes API (task 7dc9dfa0); (2) on 200 response, Orders API (task 7adebd78) auto-creates order record triggered by quote acceptance; (3) Customer receives push notification (T-BE-NOTIFICATIONS) confirming order creation; (4) OrdersListView (task 911c335c) shows new order in Active tab immediately; (5) Provider is notified of accepted quote and confirmed order; (6) OrdersDetailView (task c541cdb1) renders correct order data linked to the accepted quote; (7) Quote status badge in QuotesList (task 91a34a32) updates to 'accepted' without page refresh. Validate the status flow: quote pending → accepted → order created → order pending.