frosty-real

As a frontend developer, implement the `LandingHero` section for the Landing page. Use `useState` for `mouse` (x/y normalized cursor position) and `useCallback` for `handleMouseMove` and `handleMouseLeave` handlers that compute cursor offset relative to viewport center. Render a parallax background div (`lh-bg`) with three glow spans (`lh-glow-a/b/c`), a CSS grid overlay, and an inline SVG skyline silhouette path. Render `FLOATING_ICONS` (Home, Building2, KeyRound, MapPin, Warehouse, Landmark — 7 items) as `motion.span` elements with individual `cls`, `depth`, `bob`, and `dur` values driving CSS-var-based cursor-follow parallax and bob animations. Display the headline, sub-copy, and a search input row. Render the `STATS` array (48K+ Listings, 120+ Cities, 15K+ Happy Buyers) as stat badges. Apply `LandingHero.css`.

As a frontend developer, implement the `LandingCityscape` section for the Landing page. Use `@react-three/fiber` `Canvas` with `PerspectiveCamera`, `OrbitControls`, `ContactShadows`, and `Environment` from `@react-three/drei`. Build the `buildCity()` function using a seeded pseudo-random (`seeded(i)`) to generate a deterministic 5×4 grid of building blocks with heights derived from property type (commercial taller, plot shorter). Render each building as a Three.js mesh coloured by `TYPE_COLOR` map (apartment=#1A73E8, villa=#FF7043, commercial=#FFA726, plot=#26A69A). Use `useFrame` for per-frame animation. Implement `TYPES` filter tabs (All, Apartments, Villas, Commercial, Plots) using `useState` to filter the `PROPERTIES` array (8 items). On building click, show an `AnimatePresence`-driven property detail panel with `MapPin`, `BedDouble`, `Bath`, `Maximize` icons and price/location data. Include a `MousePointerClick` hint overlay and an `ArrowRight` CTA. Apply `LandingCityscape.css`.

As a frontend developer, implement the `LandingFeatured` section for the Landing page. Render the `PROPERTIES` array (4 cards: Skyline Garden Villa, Lakeview Premium Apartment, Aurelia Sky Penthouse, Urban Nest Studio Loft) each with an Unsplash cover image, price badge, location (`MapPin`), bed/bath/area stats (`BedDouble`, `Bath`, `Maximize`), and property type chip (`Home`/`Building2`/`Sparkles`). Implement the `FavoriteButton` sub-component using `useState` for `hover` and `active` state: on activation emit 4 `PARTICLE_COLORS` burst `motion.span` particles via `AnimatePresence` at computed trigonometric angles, plus a `lf-fav-flash` glow `motion.div`. Use `useRef` for the carousel container and implement `ChevronLeft`/`ChevronRight` scroll controls. Apply `LandingFeatured.css`.

As a frontend developer, implement the `LandingHowItWorks` section for the Landing page. Build the `FlowColumn` sub-component accepting a `flow` config object; render a flow head with a badge icon (`Search` for buyers, `Building2` for sellers), kicker, and name. Animate the column in with `motion.div` `opacity/y` on `inView`. Render the 3-step list using `containerVariants` (staggerChildren: 0.15) and `stepVariants` (opacity/x slide-in) driven by a `useInView` ref on the section root. Render a decorative SVG connector line between steps. Implement two parallel columns — `buyerFlow` (Search, Apply Filters, Contact Agent → `/Search` CTA) and `sellerFlow` (Create Account, List Property, Submit Approval → `/ListProperty` CTA) — each with primary and ghost CTA buttons. Apply `LandingHowItWorks.css`.

As a frontend developer, implement the `LandingWhyChoose` section for the Landing page. Build the `AnimatedCounter` sub-component using `useMotionValue`, `useTransform`, and `animate` from framer-motion to count from 0 to each `target` value over 2s with `easeOut`, triggered by `useInView`. Render the `BENEFITS` array (4 cards: Bank-Grade Security 99.9%, Large Inventory 50K+, Expert Support 24/7, Fast Approval 12h) using `cardVariants` with custom stagger delay `i * 0.12`. Each card shows its lucide icon (`ShieldCheck`, `Building2`, `Headphones`, `Zap`), title, description, and an animated badge displaying the live counter value with `suffix` and `badgeLabel`. Render a social-proof row with 4 `avatars` (initials + brand colors: AR, PK, SM, DV) and 5 `Star` icons. Include a `wc-bg-layer` parallax div with `translateY(--scroll * -0.3px)`. Apply `LandingWhyChoose.css`.

As a frontend developer, implement the `LandingCTA` section for the Landing page. Build the `MagneticButton` sub-component using `useMotionValue`, `useSpring`, and `useTransform` for magnetic cursor-follow effect within `MAGNET_RADIUS=90px` at `MAGNET_STRENGTH=0.35`; on click, animate `scale` to 0.92 then back to 1 before navigating. Use `useState` + `useEffect` with a `matchMedia('(min-width: 768px) and (pointer: fine)')` listener to enable magnetic effect only on desktop pointer devices. Render `lcta-band` with an animated `motion.div` gradient background cycling `backgroundPosition` over 14s. Include `lcta-decor` orbs (`lcta-orb-a/b`) and a `lcta-grid` with parallax `translateY(--scroll * -0.45px)`. Render an inline SVG skyline, headline with `Sparkles` icon, sub-copy, and two `MagneticButton` CTAs: 'Create Free Account' (`UserPlus`, `/Signup`) and 'List a Property' (`Building2`, `/ListProperty`). Apply `LandingCTA.css`.

As a frontend developer, implement the `Footer` section for the Landing page. Use `useRef` on the root `footer` element and `useInView` (once: true, amount: 0.2) to trigger entrance animations. Render two parallax `ftr-bg-layer` divs — the first (speed -0.3px) with `ftr-orb-a/b` decorative orbs and a skyline SVG, the second (speed -0.6px) as a secondary parallax layer. Render the animated frosty-real brand logo (reusing the SVG house from Navbar). Render 4 `linkColumns` (Browse, Sell, Company, Support — each with a lucide icon: `Search`, `Tag`, `Building2`, `LifeBuoy`) using `listVariants` (staggerChildren: 0.06) and `itemVariants` (opacity/y) controlled by `inView`. Each hovered link triggers `iconVariants` spring animation (scale 0→1, rotate -25→0). Render contact info with `Mail`, `Phone`, `MapPin` icons and 4 social links (`Facebook`, `Twitter`, `Instagram`, `Linkedin`) with brand colours. Note: this component may already exist from a previous page. Apply `Footer.css`.

As a frontend developer, implement the Navbar section for the Login page. This component may already exist from the Landing page (task d91ed567-17c9-4355-b0c2-27694eb59e7d) and should be reused or verified as consistent. The Navbar uses framer-motion with useScroll and useMotionValueEvent to track scroll position (threshold 40px) and toggle a 'nv-scrolled' CSS class on the nav bar. Includes an animated SVG logo with motion.path for house body and roof (pathLength 0→1 over 0.8s), a motion.rect window that scales in with opacity after 0.95s delay. NAV_LINKS array drives desktop navigation (Browse, Search, Post Property, Dashboard). Mobile hamburger button toggles open state with body overflow locking via useEffect. Framer AnimatePresence manages mobile drawer open/close. Action buttons link to /Login and /Signup. Import from '../styles/Navbar.css'.

As a frontend developer, implement the Navbar section for the Signup page. This component may already exist from the Landing and Login pages (task d91ed567 and f609c77a). Reuse or verify the existing Navbar component which uses framer-motion (useScroll, useMotionValueEvent, AnimatePresence) to track scroll state via scrollY threshold of 40px, toggling 'nv-scrolled' class. Includes an animated SVG logo with house body, roof, and window glow drawn via motion.path pathLength variants and delayed transitions. Renders NAV_LINKS array (Browse, Search, Post Property, Dashboard) as anchor tags. Desktop actions include 'Sign In' ghost CTA to /Login and 'Get Started' CTA to /Signup. Mobile burger button toggles open state and locks body scroll via useEffect. AnimatePresence wraps mobile drawer overlay.

As a frontend developer, implement the Navbar section for the Search page. This component may already exist from previous pages (Landing, Login, Signup). It uses `useState` for `scrolled` and `open` states, `useScroll` and `useMotionValueEvent` from framer-motion to toggle the `nv-scrolled` class when scrollY exceeds 40px. Features an animated SVG logo with framer-motion `motion.path` draw animations for house body, roof, and a `motion.rect` window glow with scale/opacity transitions. Renders NAV_LINKS array with Browse, Search, Post Property, Dashboard hrefs. Includes desktop `nv-actions` with Sign In (ghost) and Get Started CTA buttons, plus a `nv-burger` hamburger button with `aria-expanded` for mobile. Body overflow is locked via `useEffect` when mobile menu is open. Import from `../styles/Navbar.css`.

As a Backend Developer, implement user management API endpoints using FastAPI. Include: GET /api/users (paginated list with filters: role, status, search), GET /api/users/{id} (user detail), PUT /api/users/{id} (update user profile/role), PATCH /api/users/{id}/status (activate/suspend/deactivate), DELETE /api/users/{id} (soft delete), GET /api/users/stats (counts by role and status). Admin-only endpoints must be guarded by RBAC middleware. Note: Frontend tasks UsersAccountsGrid (fac03ec9), UsersHeader (d5db1c17), UserManagement for AdminDashboard (f6a30df1) depend on this API.

As a Backend Developer, implement property listings CRUD API endpoints using FastAPI. Include: GET /api/properties (paginated list with filters: location, price_min, price_max, type, bhk, amenities, status), GET /api/properties/{id} (property detail with agent info), POST /api/properties (create new listing, seller/agent only), PUT /api/properties/{id} (update listing), DELETE /api/properties/{id} (soft delete), PATCH /api/properties/{id}/status (approve/reject/flag, admin only), GET /api/properties/featured (featured listings for landing page). Note: Frontend tasks ListingsResults (51d7d0fe), ListingsPagination (546916f2), SearchResults (805bfca0), ResultsListings (31ed2c09), ListingSubmit (be0222fd), ListingsReview for AdminDashboard (e462aa84) depend on this API.

As a Backend Developer, implement the contact form submission API endpoint using FastAPI. Include: POST /api/contact (submit a general contact/support message with fields: name, email, subject, message, category). Validate all fields server-side, store contact submissions in the database, and optionally trigger an email notification to the platform admin. Note: Frontend tasks ContactForm for Contact page (c4778b70) and ContactForm for PropertyDetail (a5caeb8a) depend on this API.

As a Backend Developer, implement user profile management API endpoints using FastAPI. Include: GET /api/profile (current user's full profile), PUT /api/profile (update personal info: fullName, email, phone, location, bio), POST /api/profile/avatar (upload avatar image), PUT /api/profile/security/password (change password with current password verification), PUT /api/profile/preferences (update notification/language/theme preferences), DELETE /api/profile/sessions/{session_id} (logout a specific session), POST /api/profile/export (request data export), POST /api/profile/deactivate (deactivate account), DELETE /api/profile (delete account with confirmation). Note: Frontend tasks ProfilePersonal (86bb1a78), ProfileSecurity (d97c4b28), ProfilePreferences (a7fe0ee1), ProfileDanger (2b0b8f85) depend on this API.

As a Backend Developer, implement admin settings and platform configuration API endpoints using FastAPI. Include: GET /api/admin/settings (retrieve platform config: siteName, contactEmail, maxFileSize), PUT /api/admin/settings (update platform config), GET /api/admin/notifications (notification preferences), PUT /api/admin/notifications (update notification preferences), GET /api/admin/permissions (role-permission matrix), PUT /api/admin/permissions (update editable permission rows). All endpoints restricted to admin role via RBAC middleware. Note: Frontend task AdminSettings (a10d5533) depends on this API.

As a frontend developer, implement the LoginHero section for the Login page. This is the primary authentication form rendered inside a split-layout card. Left panel hosts a React Three Fiber Canvas (camera at [0, 0.3, 2.8], fov 38, alpha true) rendering a HouseModel group that continuously rotates via useFrame (rotation.y += delta * 0.25, rotation.x += delta * 0.08), composed of boxGeometry meshes for floor, house body, roof (rotated Math.PI/4), door, and chimney each with meshStandardMaterial transparent colors. Three lights: ambientLight (0.7), two directionalLights. Right panel contains the login form with useState hooks for email, password, showPassword, submitting, and errors. Lucide icons used: Home, Mail, Lock, Eye, EyeOff, ShieldCheck, Fingerprint, AlertCircle. Form validate() checks email regex and password minimum 6 chars, populating errors object. handleSubmit prevents default, runs validate, sets submitting state. Eye/EyeOff toggle controls password visibility. Import from '../styles/LoginHero.css'.

As a frontend developer, implement the Footer section for the Login page. This component may already exist from the Landing page (task 17cede7d-aa38-4bfe-abc7-c461e4dae36c) and should be reused or verified as consistent. The Footer uses useRef and useInView (once: true, amount 0.2) from framer-motion to trigger entrance animations. Background includes two parallax layers: ftr-bg-orb elements and an SVG cityscape path (fill rgba(26,115,232,0.25)) both driven by CSS --scroll variable. Four link columns (Browse, Sell, Company, Support) each with a Lucide icon (Search, Tag, Building2, LifeBuoy) and four links each, animated via listVariants (staggerChildren 0.06) and itemVariants (opacity 0→1, y 10→0). Social icons (Facebook, Twitter, Instagram, LinkedIn) use iconVariants with spring animation (stiffness 380, damping 18) on hover. Contact info section shows Mail, Phone, MapPin icons. Import from '../styles/Footer.css'.

As a frontend developer, implement the SignupHero section for the Signup page. This section renders a @react-three/fiber Canvas containing a BuildingMesh component — a multi-storey real-estate building with a boxGeometry tower body (0.72×1.85×0.72), flat roof with parapet overhang, ground/podium slab, and a roof accent block in #FF7043. Windows are generated programmatically across 3 storeys via storeyOffsets and frontWindowXs arrays, with emissive #FFCA28 materials and per-storey opacity gradients. useFrame drives continuous Y-axis rotation (0.0025 rad/frame) and sinusoidal vertical float via clock.elapsedTime. The surrounding hero layout uses framer-motion for text entrance animations. useMemo is used for particle/geometry data optimization.

As a frontend developer, implement the SignupForm section for the Signup page. This is the core interactive form with useState hooks managing: fullName, email, password, confirmPassword, userType (default 'buyer'), showPassword, showConfirm, touched (per-field blur tracking object), and submitted flag. USER_TYPES array (buyer/seller/agent) renders role selector cards with lucide-react icons (User, Home, Briefcase). Real-time validation uses EMAIL_RE regex, MIN_PASSWORD_LENGTH=8, and NAME_MIN_LENGTH=2 constants. getFieldClass and getMessageClass derive 'sf-valid'/'sf-invalid' CSS classes per field based on touched+submitted state. renderFieldIcon renders CheckCircle or AlertCircle (lucide-react) as inline validation indicators. handleBlur marks fields touched on blur; handleSubmit sets all fields touched and blocks submission if !allValid. Background has sf-bg-orb decorative orbs. Form submission currently logs to console — wire up to auth API endpoint.

As a frontend developer, implement the SignupTrust section for the Signup page. Uses IntersectionObserver (threshold 0.15) via useEffect on rootRef to toggle a visible state, triggering staggered CSS animation classes (st-anim-0 through st-anim-3) on child elements once the section enters the viewport — observer disconnects after first trigger. Renders three animated content blocks: a trust badge with Users icon (lucide-react) showing '50,000+ property seekers', a divider, and a security assurance block with ShieldCheck icon describing 256-bit TLS encryption. A links row includes anchors to /Terms, /Privacy, and /Login ('Sign In'), separated by middle-dot spans. Decorative background orbs (st-orb-a, st-orb-b) are rendered via st-bg-layer.

As a frontend developer, implement the Footer section for the Signup page. This component may already exist from Landing (task 17cede7d) and Login (task 839d17d0) pages — reuse or verify. Uses framer-motion useInView (once: true, amount: 0.2) on rootRef to trigger entrance animations. Renders four linkColumns (Browse, Sell, Company, Support) each with a lucide-react Icon header and staggered link lists driven by listVariants/itemVariants (staggerChildren: 0.06, y: 10 → 0 fade-up). Social icons (Facebook, Twitter, Instagram, LinkedIn from lucide-react) use iconVariants with spring animation (stiffness: 380, damping: 18) for scale/rotate entrance on hover. Background includes two-layer parallax bg-orbs with CSS var(--scroll) translateY offsets and an SVG ftr-skyline cityscape path with rgba(26,115,232,0.25) fill.

As a frontend developer, implement the SearchHero section for the Search page. Renders a full-width hero with a 3D cityscape using `@react-three/fiber` Canvas and `@react-three/drei` Box and OrbitControls. BUILDING_DATA array defines 18 buildings with x/z positions, heights (2.2–5.2 units), widths, depths, and blue-palette colors (#2e6ab0–#5998e0). The `CityScene` group includes a semi-transparent ground plane (`planeGeometry` 26×18), all BuildingBlock meshes with hover detection via `isBuildingHoverable` distance check (radius 1.8), and a subtle road grid using `boxGeometry` lines at fixed x/z intervals. Uses `useRef` for `hoveredRef` hover tracking and `useMemo`/`useRef` for optimization. Hero overlay contains a search bar with `Search`, `SlidersHorizontal`, `ArrowRight`, `Building2`, `DollarSign`, `MapPin` lucide icons, and a `useState`-driven input. Import from `../styles/SearchHero.css`.

As a frontend developer, implement the SearchFilters section for the Search page. A collapsible sidebar filter panel using multiple `useState` hooks: `mobileOpen`, `collapsedGroups`, `location`, `locationFocused`, `propertyTypes` (array), `priceMin`/`priceMax` (0–500 range slider), `bedrooms`, `bathrooms`, `selectedAmenities` (array), and `listingStatus`. PROPERTY_TYPES array (6 types with counts: Apartment 142, Villa 87, Plot 53, Penthouse 28, Studio 41, Commercial 36), LOCATIONS array (10 Bengaluru localities with autocomplete dropdown), AMENITIES array with lucide icons (Wifi, Car, Dumbbell, Shield, Waves, Wind), LISTING_STATUSES (All/Active/New Today/Price Reduced), BED_OPTIONS and BATH_OPTIONS ('Any', '1'–'5+'). Uses `useCallback` for `toggleGroup`, `togglePropertyType`, `toggleAmenity`, `handleReset`, `handleApply`. `useRef` on location input. `ChevronDown` icons animate on group collapse. Mobile drawer toggled via `mobileOpen`. Import from `../styles/SearchFilters.css`.

As a frontend developer, implement the SearchResults section for the Search page. Renders a paginated property card grid using `useState` for sort order and saved/favorited state. SORT_OPTIONS array (price-asc, price-desc, date, rating) drives a `ChevronDown` dropdown. PROPERTIES array contains 7+ listings with id, title, price, location, beds, baths, area, badge ('sale'/'rent'/'new'), Unsplash image URL, agent name/label, and saved boolean. Each card shows property image with badge overlay, `Heart` icon toggling saved state, price, title, `MapPin`/`BedDouble`/`Bath`/`Maximize2` detail icons, agent info with `Eye`/`Phone` action buttons. `AnimatePresence` and `motion` from framer-motion animate card entry/exit. `SearchX` empty-state component shown when no results. Pagination with `ChevronLeft`/`ChevronRight` buttons. `SlidersHorizontal` mobile filter toggle. Import from `../styles/SearchResults.css`.

As a frontend developer, implement the SearchMap section for the Search page. A full 3D interactive map using `@react-three/fiber` Canvas with `useFrame` for animation loop and `@react-three/drei` OrbitControls, Text, Billboard, RoundedBox components. PROPERTIES array (9 listings) includes lat/lng coordinates, price, bhk, sqft, featured flag, and Unsplash image. THREE.js is imported directly for geometry/material operations. `useState` tracks `selectedProperty`, expanded/fullscreen state. `useRef` for canvas ref. `useMemo` for computed property positions. `useCallback` for click handlers. Map controls panel with `MapPin`, `Maximize`/`Minimize`, `Layers`, `Navigation` lucide icons. `AnimatePresence` and `motion` (framer-motion) animate a property detail popup card that shows address, price, BHK, sqft, and image on pin click. Featured properties get distinct pin styling via RoundedBox. Import from `../styles/SearchMap.css`.

As a frontend developer, implement the Footer section for the Search page. This component may already exist from Landing, Login, or Signup pages. Uses `useRef` + `useInView` (framer-motion, `once: true, amount: 0.2`) to trigger staggered reveal animations. `linkColumns` array defines 4 columns (Browse, Sell, Company, Support) each with a lucide icon (Search, Tag, Building2, LifeBuoy) and 4 nav links. `socials` array maps Facebook, Twitter, Instagram, LinkedIn icons with brand hex colors. Framer-motion variants: `listVariants` with `staggerChildren: 0.06`/`delayChildren: 0.1`, `itemVariants` (opacity 0→1, y 10→0), `iconVariants` (spring scale+rotate from rest to active). Background layer has two `ftr-bg-orb` spans and an SVG `ftr-skyline` with parallax `translateY` via CSS `--scroll` variable. Import from `../styles/Footer.css`.

As a frontend developer, implement the Navbar section for the Results page. This component may already exist from previous pages (Login, Signup, Search). It uses framer-motion's useScroll and useMotionValueEvent hooks to track scroll position (setScrolled when scrollY > 40), toggling the 'nv-scrolled' CSS class. Includes an animated SVG logo (house body path, roof path, and window rect with pathLength and opacity/scale animations), NAV_LINKS array mapping to Browse/Search/Post Property/Dashboard hrefs, desktop nav links (nv-links), CTA buttons (Sign In ghost + Get Started solid), and a hamburger button (nv-burger) that toggles the mobile drawer via open state with body overflow lock via useEffect. Import Navbar.css for styling.

As a frontend developer, implement the Navbar section for the Profile page. This component may already exist from previous pages (Results, Contact, etc.). It uses framer-motion's useScroll and useMotionValueEvent to toggle a 'nv-scrolled' class when scrollY > 40. Features an animated SVG logo with motion.path drawing (house body, roof via pathLength 0→1) and a motion.rect window glow. Renders NAV_LINKS array (Browse, Search, Post Property, Dashboard) as anchor tags, plus Sign In (ghost) and Get Started (CTA) buttons. Includes a hamburger button that toggles mobile menu open state and locks body scroll via useEffect. Reuse the existing Navbar component if already implemented.

As a frontend developer, implement the Navbar section for the Dashboard page. This component (Navbar.jsx) uses framer-motion hooks — useScroll, useMotionValueEvent, AnimatePresence — to detect scroll position via scrollY and toggle the 'nv-scrolled' class at 40px threshold. Features an animated SVG logo with motion.path drawing the house body and roof via pathLength variants (0→1, 800ms easeInOut), and a motion.rect window glow with opacity/scale entrance at 0.95s delay. Includes a NAV_LINKS array with Browse, Search, Post Property, Dashboard routes. Has desktop nv-links, nv-actions (Sign In ghost CTA + Get Started CTA), and a nv-burger hamburger for mobile. Mobile open state locks body scroll via useEffect. Note: Navbar component likely already exists from previous pages (Contact, Profile, Favorites); reuse or verify it matches this page's requirements.

As a frontend developer, implement the Navbar section for the AdminDashboard page. This component (Navbar.css) may already exist from previous pages (Dashboard, ListProperty, Inquiries). It uses framer-motion hooks: useScroll, useMotionValueEvent for scroll-based nv-scrolled class toggling at 40px threshold. Features animated SVG logo with motion.path house body/roof (pathLength 0→1, 0.8s easeInOut with 0.15s delay on roof) and motion.rect window glow (opacity/scale, 0.4s delay 0.95s). NAV_LINKS array renders Browse/Search/Post Property/Dashboard hrefs. Mobile burger button toggles open state, locking body scroll via useEffect. nv-actions renders Sign In (nv-cta-ghost) and Get Started (nv-cta) CTAs. AnimatePresence wraps mobile drawer. Depends on Login page task to establish page chain.

As a Backend Developer, implement property image management API endpoints. Include: POST /api/properties/{id}/images (multipart upload, max 10 images, validate MIME types jpeg/png/webp/avif, max 10MB each), DELETE /api/properties/{id}/images/{image_id} (remove image), PATCH /api/properties/{id}/images/{image_id}/primary (set as primary image), GET /api/properties/{id}/images (list all images with URLs). Store images using local filesystem or object storage; return CDN/public URLs in responses. Note: Frontend task PropertyImages (f81d311f) depends on this API.

As a Backend Developer, implement saved/favorites API endpoints using FastAPI. Include: GET /api/favorites (list user's saved properties with full property details), POST /api/favorites/{property_id} (save a property), DELETE /api/favorites/{property_id} (unsave a property), GET /api/favorites/ids (list of saved property IDs for quick lookup). All endpoints require authentication. Note: Frontend tasks FavoritesGrid (c99645c6), FavoritesFilters (61a5464b), FavoritesHero (f73a4700) depend on this API.

As a Backend Developer, implement inquiries and messaging API endpoints using FastAPI. Include: GET /api/inquiries (list inquiries for current user, with filters: all/unread/responded, search), GET /api/inquiries/{id} (inquiry thread with all messages), POST /api/inquiries (create new inquiry linking buyer to property/agent), POST /api/inquiries/{id}/messages (send a reply message), PATCH /api/inquiries/{id}/read (mark as read), DELETE /api/inquiries/{id} (delete inquiry), GET /api/inquiries/stats (counts: total, unread, responded). Note: Frontend tasks InquiriesList (9db70ac4), InquiriesDetail (427653fb), InquiriesHeader (1214c107) depend on this API.

As a Backend Developer, implement analytics and reporting API endpoints using FastAPI. Include: GET /api/reports/metrics (platform-wide metrics: total listings, active users, revenue, property views, sold count, inquiries), GET /api/reports/user-growth (monthly buyer/seller/agent growth data for line chart), GET /api/reports/inquiries-by-city (inquiry counts per city for bar chart), GET /api/reports/property-types (distribution by type for doughnut chart), GET /api/reports/revenue (monthly sales revenue data), GET /api/reports/listings (paginated report rows with listing, agent, inquiry, status, date, views columns). All endpoints admin-only. Note: Frontend tasks ReportsMetrics (a0ce5976), ReportsCharts (b580b7ce), ReportsTable (40488007) depend on this API.

As a frontend developer, implement the ResultsHeader section for the Results page. Uses useState hooks for sortValue (default 'relevance'), viewMode ('grid'/'list'), activeFilters (INITIAL_FILTERS array with 5 preset chips: Mumbai, 2-3 BHK, ₹50-100L, Apartment, Ready to Move), and queryHovered. Displays a summary row with animated h1 (framer-motion layout spring) showing the joined filter labels as searchQuery, and a hover-driven rh-query-accent gradient via backgroundPosition. Shows a resultsCount badge (47 properties found) with Search lucide icon, animating in with opacity/scale. Controls row includes a sort <select> over SORT_OPTIONS (Relevance, Price asc/desc, Newest, Area desc), view toggle buttons using Grid3X3 and List lucide icons, and a SlidersHorizontal filter toggle. Active filter chips render with AnimatePresence and individual X remove buttons calling removeFilter(id), plus a 'Clear all' button calling clearAllFilters(). Imports ResultsHeader.css.

As a frontend developer, implement the ResultsFilterSidebar section for the Results page. Manages openCategory (accordion — default 'location'), drawerOpen (mobile drawer toggle), and selectedFilters state via useState/useCallback. Renders FILTER_CATEGORIES array (6 categories: location with search_checkbox type and Search input filtering options, price as a dual-handle range slider (min=0, max=500, step=5, unit='L', format fn for ₹XL display), propertyType/bedrooms/amenities/advanced as checkbox lists). Each category uses ChevronDown animated accordion expand/collapse. Checkbox options render Check lucide icon when selected. The location category includes a Search input with X clear button for filtering the city/locality list. Mobile: SlidersHorizontal trigger button opens a full-screen drawer (drawerOpen state). RotateCcw reset button clears all selectedFilters. Imports ResultsFilterSidebar.css and all lucide icons (SlidersHorizontal, MapPin, Home, IndianRupee, Building2, Wifi, BedDouble, ChevronDown, Check, Search, X, RotateCcw).

As a frontend developer, implement the ResultsListings section for the Results page. Imports @react-three/fiber Canvas (used for 3D card effects or background elements) alongside framer-motion AnimatePresence for card enter/exit animations. Renders a PROPERTIES array of 6 mock listings (Sobha Dream Acres, Purva Riviera, Brigade Metropolis, Prestige Kingfisher, DLF Westend Heights, plus one more) each with id, title, location, price (INR formatted), beds, baths, sqft, carpetArea, type, age, possession date, rera number, Unsplash image URL, and agent object (name, pravatar avatar, id). Card UI displays: property image, Heart (wishlist toggle) button, MapPin+location, Bed+Bath+Ruler stats, Building2 type badge, Calendar possession date, RERA number, agent avatar+name, and a contact/view CTA. Uses useState for wishlist/favorites set and useRef/useEffect/useCallback for intersection observer or hover interactions. AnimatePresence handles card mount/unmount. SearchX shown for empty state. Imports ResultsListings.css.

As a frontend developer, implement the Footer section for the Results page. This component may already exist from previous pages (Landing, Login, Signup, Search). Uses useRef (rootRef) and framer-motion useInView (once: true, amount: 0.2) to trigger staggered entrance animations. Renders a parallax ftr-bg-layer with two ftr-bg-orb elements and an SVG ftr-skyline cityscape path (fill rgba blue). Four linkColumns (Browse, Sell, Company, Support) each with a lucide Icon header and 4 anchor links — rendered with listVariants (staggerChildren 0.06, delayChildren 0.1) and itemVariants (opacity 0→1, y 10→0). Socials row renders Facebook/Twitter/Instagram/LinkedIn icons using iconVariants (spring scale+rotate from rest to active on hover). Contact info section with Mail, Phone, MapPin lucide icons. Footer bottom bar shows copyright text and brand logo. Imports Footer.css.

As a frontend developer, implement the PropertyHero section for the PropertyDetail page. This section renders a breadcrumb nav (Home → Listings → Koramangala → 3BHK Apartment, 4th Block) and action buttons using lucide-react icons (Heart, Share2, MapPin, Eye, Calendar). Implements `useState` for `saved` toggle — Heart icon dynamically fills pink (#e91e63) when saved. Share button uses `navigator.share` API with clipboard fallback. Renders a status badge with animated dot ('Listed 2 weeks ago') and quick stats row showing view count (Eye icon) and calendar info. Apply `ph-root`, `ph-inner`, `ph-top`, `ph-breadcrumb`, `ph-actions`, `ph-btn`, `ph-btn--save`, `ph-btn--saved`, `ph-badge`, `ph-stats` CSS classes from PropertyHero.css. Note: Navbar component may already exist from previous pages.

As a frontend developer, implement the PropertyGallery section for the PropertyDetail page. Uses `useState` for `activeIndex`, `lightboxOpen`, and `lightboxIndex`; `useCallback` for `goTo`, `goNext`, `goPrev`, `openLightbox`. Renders a 12-image PROPERTY_IMAGES array (Unsplash URLs) with a main spotlight image and thumbnail strip. Animated image transitions via `framer-motion` `AnimatePresence` and `motion` components. Supports a fullscreen lightbox overlay with keyboard navigation (arrow keys). Detects `hasVideo` flag for video-type entries and renders a video badge. Prev/next arrow controls navigate the main image. CSS classes from PropertyGallery.css. Requires `framer-motion` dependency.

As a frontend developer, implement the PropertyDetails section for the PropertyDetail page. Renders a static `PROPERTY_STATS` array (8 entries: Price ₹2.85 Crore, Property Type, Area 2850 sq.ft., Bedrooms 4BHK, Bathrooms, Year Built, Facing, Floor) using lucide-react icons (IndianRupee, Home, Maximize, BedDouble, Bath, Calendar, Compass, Layers). Maps each stat into a `pd-stat` grid item with icon, label, and value — price value gets additional `pd-price` class for highlighted styling. Wrapped in a `pd-card` inside `pd-root` section. Pure static display, no state. Apply CSS from PropertyDetails.css.

As a frontend developer, implement the PropertyDescription section for the PropertyDetail page. Features a tabbed interface with three tabs (Description, Features, Legal) using lucide-react icons (FileText, Star, Scale) and `useState` for active tab. Renders inline 3D amenity badges via `@react-three/fiber` Canvas — each `AmenityBadge` wraps an `AmenityIcon3D` mesh component that uses `useFrame` to rotate on Y+X axes (delta * 0.9 and 0.25 respectively). Geometry is selected by shape string: pool=TorusGeometry, gym=DodecahedronGeometry, parking=BoxGeometry, security=TetrahedronGeometry, garden=ConeGeometry, pets=SphereGeometry, power=OctahedronGeometry, cctv=IcosahedronGeometry, home=CylinderGeometry. Eight AMENITIES entries rendered as `pd-amenity-tag` badges. Legal tab shows LEGAL_BLOCKS with RERA ID (KA2023BANG045672) and registration data. Uses `useRef` and `useMemo` for geometry memoization. Requires `three`, `@react-three/fiber` dependencies. Apply CSS from PropertyDescription.css.

As a frontend developer, implement the PropertyAmenities section for the PropertyDetail page. Renders 16 amenity entries (Children's Playground, Community Center, 24x7 Security, Covered Parking, 24hr Water Supply, Power Backup, High-Speed Internet, Gymnasium, CCTV Surveillance, Club House, Piped Gas Supply, Rainwater Harvesting, EV Charging Points, Lift/Elevator, Waste Disposal, Convenience Store) using lucide-react icons (Trees, Building2, Shield, Car, Droplets, Zap, Wifi, Dumbbell, Camera, Users, Flame, CloudSun, Plug, Gauge, Recycle, Store). Badges with `premium` flag render a `pam-premium-tag` label and `pam-premium` CSS modifier. Computes `premiumCount` and `totalCount` dynamically for the summary count row. Pure static display, no state. Apply CSS classes (`pam-root`, `pam-card`, `pam-grid`, `pam-badge`, `pam-counts`) from PropertyAmenities.css.

As a frontend developer, implement the AgentCard aside section for the PropertyDetail page. Displays agent Priya Sharma (initials 'PS') with a `ac-avatar-ring` decorative ring and `ac-avatar-placeholder` fallback (no photo). Renders a CheckCircle verified badge overlay on the avatar. Name row includes ShieldCheck icon with 'Verified' text. Stats row shows Contacts (347), Response Rate (98%), Years on Platform (7) via `ac-stat` entries. CTA buttons link to /Inquiries ('Message Agent' with MessageSquare icon) and /Contact ('Call Agent' with Phone icon), styled as `ac-btn-primary` and `ac-btn-secondary`. Pure static display, no state. Apply CSS from AgentCard.css.

As a frontend developer, implement the ContactForm section for the PropertyDetail page. Features a full `@react-three/fiber` Canvas 3D scene with a `FormGeometry` group containing: a central BoxGeometry envelope mesh (`envelopeRef`) that smoothly lerps color between SHAPE_COLORS states (idle=#1A73E8, focus=#FFCA28, success=#4caf50, error=#FF7043) using `useRef` + `useEffect` + `useFrame`; an animated TorusGeometry ring (`ringRef`) rotating on X+Z; a particle system group (`particlesRef`) counter-rotating. The group bobs vertically via `Math.sin(Date.now())`. Form fields (User, Mail, MessageSquare, HelpCircle, Building2 icons from lucide-react) track `formState` ('idle'|'focus'|'success'|'error') to drive 3D color transitions. Submit triggers animated state transitions via `framer-motion` `AnimatePresence` — success (CheckCircle2) and error (AlertCircle) feedback overlays. Loader2 icon shows during async submission. Uses `useState`, `useRef`, `useEffect`, `useMemo`. Requires `three`, `@react-three/fiber`, `framer-motion`. Apply CSS from ContactForm.css.

As a frontend developer, implement the PropertyMap section for the PropertyDetail page. Renders a custom Three.js map (no external map SDK) using a `<canvas>` ref with an OrthographicCamera (top-down view, viewSize=8). Scene contains a road grid (`gridGroup`) of major/minor line segments, the property marker at PROPERTY_COORDS (lat:12.9352, lng:77.6245), and 6 NEARBY_LANDMARKS (schools=orange #FF7043, hospitals=red #E53935, transport=green #43A047) converted to plane XY via `toPlane()` (equirectangular, SCALE=200). Implements pan (drag via `dragRef`), smooth zoom (`targetZoomRef` lerp on scroll/pinch), and tooltip (`useState`) on marker hover via raycasting (`markersRef`). Navigation icons (MapPin, Navigation, Map, Crosshair) from lucide-react for UI controls. Animation loop via `requestAnimationFrame` (`animRef`). `useEffect` for scene init and resize observer; `useCallback` for event handlers. Renderer cleanup on unmount. Apply CSS from PropertyMap.css. Requires `three`.

As a frontend developer, implement the RelatedProperties section for the PropertyDetail page. Renders 6 RELATED_PROPERTIES cards (Spacious 3BHK Indiranagar, Modern 2BHK Koramangala, Luxury 4BHK Whitefield, Elegant 3BHK Penthouse Jayanagar, Cozy 2BHK HSR Layout, Premium 3BHK Duplex Sarjapur Road) as anchor tags linking to `/PropertyDetail?id={prop.id}`. Each `rp-card` contains a lazy-loaded image, `rp-price-badge` overlay, title, location (CardIconMapPin SVG), and bed/bath stats (CardIconBed, CardIconBath inline SVG components). Implements a horizontal scroll carousel using `useRef` for the scroll container and `useState`+`useCallback` for prev/next arrow navigation. Apply CSS classes from RelatedProperties.css.

As a frontend developer, implement the ProfileHeader section for the Profile page. Renders breadcrumb navigation using BREADCRUMBS array (Home→Dashboard→Profile) with ChevronRight separators and lucide icons. Displays a user profile card driven by USER_PROFILES object with four role variants (buyer, seller, agent, admin), each with name, initials, role badge with roleClass, email, joined date, location, and verified status. Features a 3D decorative AvatarRing component using @react-three/fiber Canvas, useFrame for continuous rotation animation (ringRef.current.rotation.z/x/y), a React.useMemo-generated CanvasTexture gradient (#1A73E8→#4A92F0→#FF7043), and @react-three/drei Float and Ring components. Uses framer-motion useInView for scroll-triggered entrance animations. Includes Edit3 and Share2 action buttons, and meta info pills with Mail, Calendar, MapPin, and Shield icons.

As a frontend developer, implement the ProfileTabs section for the Profile page. Renders a horizontal tab list using the TABS array (personal/Personal Info with User icon, security/Security & Privacy with Shield icon, preferences/Preferences with Bell icon, danger/Danger Zone with AlertTriangle icon). Uses useState to track activeTab (default 'personal'). Each tab is a button with ARIA role='tab', aria-selected, and aria-controls attributes pointing to 'profile-panel-{id}'. Active tab receives the 'ptabs-active' CSS class. Icons rendered via lucide-react at size 18, strokeWidth 2.

As a frontend developer, implement the ProfilePersonal section for the Profile page. Manages form state with useState for four FIELDS (fullName, email, phone, location) plus a bio field capped at BIO_MAX_LENGTH=280 chars with live character counter. Implements avatar upload via drag-and-drop dropzone and hidden file input (fileInputRef), with dragOver state and avatarPreview URL via FileReader. Validation via useCallback validate() checks required fields, email regex, phone regex, and bio length, setting errors state map. On save, sets saving=true (simulated async), then calls showToast() which uses toastTimeout ref with 3200ms auto-dismiss. AnimatePresence wraps the toast notification (CheckCircle2 on success, AlertCircle on error). Save button shows Loader2 spinner during saving state and Save icon otherwise. Camera/Upload/X icons for avatar actions.

As a frontend developer, implement the ProfileSecurity section for the Profile page. Contains three sub-sections: (1) Password Change card with currentPassword, newPassword, confirmPassword state, Eye/EyeOff toggles (showCurrent/showNew/showConfirm), and getPasswordStrength() function that scores password on length≥8, length≥12, case mix, digits, special chars — returning score/label/cls (ps-strength-weak/fair/good/strong); canSubmit requires currentPassword≥6, newPassword≥8, and passwordsMatch; on submit shows success passwordMsg auto-clearing after 3500ms. (2) Privacy Settings card with twoFA toggle (useState true), profileVisible toggle (true), emailVisible toggle (false), and info tooltips via Info icon. (3) Active Sessions card rendering INITIAL_SESSIONS array (3 sessions: Laptop/Smartphone/Monitor) with Laptop/Smartphone/Monitor icons, IP, location via MapPin, lastActive via Clock, active badge, and handleLogout() that filters session by id. LogOut icon triggers logout per session.

As a frontend developer, implement the ProfilePreferences section for the Profile page. Renders three preference cards: (1) Notifications card with four NOTIFICATIONS toggles (marketing, propertyAlerts, inquiryNotifications, systemUpdates) managed via toggles useState object, each with label and description. (2) Language card with LANGUAGES dropdown (7 Indian language options: en/hi/bn/te/ta/mr/gu) managed via language useState, with Globe icon. (3) Theme card with Sun/Moon toggle between 'light'/'dark' themes managed via theme useState. Features a 3D decorative ToggleSphere component rendered in @react-three/fiber Canvas inside Suspense; useFrame animates groupRef.current.rotation.y (continuous), groupRef.current.rotation.x (sin wave), and meshRef.current.scale (scales up based on activeCount of enabled toggles + sin pulse). Sphere uses icosahedronGeometry with meshPhysicalMaterial (clearcoat, transparent) and wireframe overlay. Save button uses framer-motion animation and Loader2/Check/Save icons for saving state feedback.

As a frontend developer, implement the ProfileDanger section for the Profile page. Features a custom Three.js particle field background via useDangerParticles(canvasRef) hook: creates a WebGLRenderer (alpha:true), PerspectiveCamera at z=18, and a PointsMaterial particle system with COUNT=180 particles arranged in spherical distribution. Particles have orange-to-coral vertex colors (warm gradient via Float32Array) and react to cursor via onMouseMove updating mouseRef.current x/y. Uses AdditiveBlending, depthWrite:false. Renders three danger action cards: (1) Export Data card with Download icon and confirmation flow. (2) Deactivate Account card with ShieldOff icon and toggle confirmation. (3) Delete Account card (most dangerous) with Trash2 icon, requires typing confirmation text into input to enable the destructive button. Each card uses useState for its own confirmation/expanded state, and useCallback for handlers. AnimatePresence or conditional rendering shows expanded confirmation UI.

As a frontend developer, implement the Footer section for the Profile page. This component may already exist from previous pages (Results, Contact). Uses useInView with rootRef (once:true, amount:0.2) to trigger entrance animations. Renders two parallax background layers (ftr-bg-layer) with CSS orbs (ftr-orb-a/b) and an SVG skyline path with translateY parallax on scroll via CSS custom property --scroll. Renders four linkColumns (Browse, Sell, Company, Support) each with a title Icon and 4 links, animated with listVariants (staggerChildren:0.06) and itemVariants (opacity/y slide-in). Social links (Facebook/Twitter/Instagram/LinkedIn) use iconVariants with spring animation (stiffness:380, damping:18) for scale/rotate on hover. Contact info section shows Mail, Phone, MapPin details. Reuse the existing Footer component if already implemented.

As a frontend developer, implement the Navbar section for the Favorites page. This component (likely already exists from previous pages such as Contact and Profile) uses framer-motion with useScroll and useMotionValueEvent to track scroll position and toggle the 'nv-scrolled' class at >40px. State includes scrolled (boolean) and open (boolean) for mobile menu. Features an animated SVG logo with motion.path for house body/roof with pathLength animations (0.8s duration) and motion.rect for window glow with scale+opacity transitions. NAV_LINKS array renders Browse/Search/Post Property/Dashboard links. Actions include ghost 'Sign In' and filled 'Get Started' CTAs. Mobile burger button toggles AnimatePresence-driven drawer and sets body overflow:hidden when open.

As a frontend developer, implement the DashboardHeader section for the Dashboard page. Uses lucide-react icons: Home, ChevronRight, PlusCircle, Building2, Eye, MessageSquare. Renders a dh-root header with a decorative dh-dots dot-grid background and an animated dh-accent-bar gradient strip. Contains a top row with an accessible breadcrumb nav (ol.dh-breadcrumb) mapping a breadcrumbs array with Home icon link and Dashboard text link, plus a 'New Listing' CTA button linking to /ListProperty with PlusCircle icon. Title row displays 'Dashboard Overview' with dh-title-highlight span. Quick stats strip (dh-stats-strip) shows three dh-stat-item entries with icons for Active Listings (12), Views, and Messages using Building2, Eye, MessageSquare icons with static values.

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. Uses useState for collapsed, mobileOpen, and activeItem state; useRef for sceneRef, canvasRef, animRef. Renders a NAV_SECTIONS config with two groups: Main (Overview → /Dashboard, Listings → /Listings with badge 12, Inquiries → /Inquiries with badge 5) and Tools (Analytics → /Reports, Settings → /Settings). Supports collapse/expand toggle via ChevronLeft icon and mobile drawer via AnimatePresence. Critically integrates a Three.js 3D decorative particle scene via useCallback setupScene: creates a WebGLRenderer on canvasRef, PerspectiveCamera at z=14, BufferGeometry with 120 particles using Float32Array positions/colors lerped between --primary, --secondary, --accent CSS vars. Animation loop via requestAnimationFrame stored in animRef. Cleanup on unmount. Includes lucide-react icons: LayoutDashboard, Building2, MessageSquare, BarChart3, Settings, User, Home, ChevronLeft.

As a frontend developer, implement the DashboardWelcome section for the Dashboard page. Renders a dw-root section with two decorative background orbs (dw-bg-orb-a, dw-bg-orb-b) inside dw-bg-layer. Inner content includes a greeting row with hardcoded agent name 'Priya Sharma' wrapped in dw-agent-name span, plus a dw-badge-row with two badges: Agent (BadgeCheck icon) and Seller (Star icon). Quick stats row maps QUICK_STATS array — '3 Active', '1 Featured', '2 New', '2 Pending' — as dw-quick-chip spans with color-coded dot classes (--active, --featured, --new, --urgent). Metrics grid maps METRICS array of 4 items (Active Listings/Building2, Pending Approvals/Clock, New Inquiries/Mail, Saved Favorites/Heart) each with an icon box using iconClass for color variant, a dw-metric-value number, and a dw-metric-label. All lucide-react icons used: Building2, Clock, Mail, Heart, ShieldCheck, BadgeCheck, Star.

As a frontend developer, implement the DashboardStats section for the Dashboard page. Uses useState for role switching, useRef and useMemo for 3D scene management. Defines ROLE_STATS with three role configs — admin (Pending Listings/142, Active Users/3856, Total Properties/9412, Support Tickets/27), agent (Active Listings/64, Inquiries/213, Unread Messages/9, Saved Properties/48), buyer (Saved Properties/12, Recently Viewed/47, Price Alerts/5, My Inquiries/8). ROLES array drives tab switching UI. TrendArrow sub-component renders TrendingUp, TrendingDown, or Minus icon with dst-trend-up/down/neutral class. Integrates a Three.js 3D scene via @react-three/fiber Canvas with a MiniCityBuildings component using useFrame and useThree for a rotating bar chart/city miniature animation. AnimatePresence wraps role-tab stat card transitions. Lucide icons: Building2, Users, ClipboardList, MessageSquare, Heart, Eye, Bell, TrendingUp, TrendingDown, Minus.

As a frontend developer, implement the DashboardContent section for the Dashboard page — the largest and most complex section (~44KB JSX). Uses useState for role tab switching and useMemo for filtered data. ROLES tabs: Admin (Users icon), Agent/Seller (Building2), Buyer (Home). Admin panel includes: PENDING_LISTINGS table (5 rows: LST-1042 through LST-1028 with approve CheckCircle / reject XCircle actions), USER_MANAGEMENT table (5 rows: USR-201 through USR-189 with role badges and status chips), and REPORTS list (RPT-052 through RPT-056 with type/date/status). Agent panel shows AGENT_LISTINGS grid with LayoutGrid/List view toggle, Search input with Search icon, SlidersHorizontal filter button, Edit3/Trash2/Eye action buttons per listing, and ChevronLeft/ChevronRight pagination controls. Buyer panel displays saved properties with Heart icon, PlusCircle for new search, Inbox for empty state. All role views use AnimatePresence-free state transitions. Lucide icons: CheckCircle, XCircle, Edit3, Trash2, Eye, MessageSquare, Search, MapPin, Building2, Home, Clock, ChevronLeft, ChevronRight, LayoutGrid, List, SlidersHorizontal, Heart, PlusCircle, Inbox, FileText, Users, TrendingUp, Star.

As a frontend developer, implement the DashboardActivity section for the Dashboard page. Uses useRef for timelineRef and useInView (framer-motion) with once:true, amount:0.1 to trigger entrance animation when scrolled into view. Renders an ACTIVITIES array of 7 timeline items (a1–a7) each with type, desc, detail, time, optional tag/tagLabel, and Icon component (CheckCircle, Building2, MessageSquare, UserCheck, Mail, Activity). Framer-motion containerVariants applies staggerChildren (0.08s) and delayChildren (0.05s) on the timeline list; itemVariants animates each item from opacity:0/x:-16 to visible (0.4s easeOut); iconVariants uses spring animation (stiffness:420, damping:20) for scale 0→1 on icons. NEW_COUNT=1 badge displayed on header. Tags render as colored chips (new=green, pending=amber, done=blue). Section header includes Activity icon from lucide-react.

As a frontend developer, implement the Footer section for the Dashboard page. Uses useRef for rootRef and useInView (once:true, amount:0.2) to trigger staggered link entrance animations. Two parallax ftr-bg-layer divs with CSS var(--scroll) translate for ftr-bg-orb-a/b orbs and an SVG ftr-skyline cityscape path at 25% blue opacity. linkColumns array defines 4 columns: Browse (Search, All Listings, Results, Favorites), Sell (List a Property, Property Details, Inquiries, Dashboard), Company (Landing, Profile, Signup, Login), Support (Contact, Inquiries, Reports, AdminDashboard) — each with a column Icon. listVariants (staggerChildren:0.06, delayChildren:0.1) and itemVariants (opacity:0/y:10 → visible, 0.4s) animate link lists. socials array renders Facebook (#1877F2), Twitter (#1DA1F2), Instagram (#E4405F), LinkedIn (#0A66C2) icons with iconVariants spring scale/rotate animation (rest → active). Contact info section with Mail, Phone, MapPin icons. Note: Footer component likely already exists from previous pages (Contact, Profile, Favorites); reuse or verify it matches Dashboard's link structure.

As a frontend developer, implement the Navbar section for the ListProperty page. This component (Navbar.css) reuses the shared Navbar already built for Dashboard/Favorites/Profile pages. It uses useState for menuOpen and scrolled states, useEffect with a passive scroll listener that sets scrolled when window.scrollY > 8, and toggles the nv-scrolled class on the nv-root header. Renders a lucide-react Home icon logo linking to /ListProperty, a navPages list with a single 'List Property' entry, desktop nv-btn-ghost 'Sign In' and nv-btn-primary 'Get Started' action buttons, a hamburger/X toggle button using lucide Menu/X icons, and a nv-mobile drawer with nv-mobile-open class toggled by menuOpen state. The component may already exist from previous pages — verify before re-implementing.

As a frontend developer, implement the InquiriesHeader section for the Inquiries page. This section renders a top-row with a title block (SVG chat-bubble icon, h1 'Inquiries' heading, subtitle text) and two action buttons — 'Mark as Read' (with checkmark SVG) and 'Delete' (with trash SVG, styled ih-btn--danger). The bottom row includes a filter pill group driven by the FILTERS constant (keys: all/unread/responded with counts 24/8/16) managed via useState('all') activeFilter state with aria-pressed toggling and ih-filter-pill--active class, plus a search input wrapped in ih-search-wrap with a search SVG icon and searchTerm state via useState(''). Note: Navbar component may already exist from the Dashboard page (task c67f3fdc-18a8-4156-8721-04c61b3a78c7).

As a frontend developer, implement the AdminSidebar section for the AdminDashboard page. Uses AdminSidebar.css with lucide-react icons: LayoutDashboard, ClipboardList, Users, BarChart3, Settings, ChevronLeft, Building2, ShieldCheck. MENU_ITEMS array includes 5 nav items with badge counts (Listings Review: 14, User Management: 3). Two state hooks: collapsed (desktop collapse/expand via ChevronLeft toggle) and mobileOpen (mobile overlay trigger). useEffect locks body scroll when mobileOpen=true and closes sidebar on window resize >=768px. Renders as-overlay div for mobile backdrop, as-mobile-trigger hamburger button, and aside.as-root with conditional as-collapsed/as-open classes. as-header contains as-brand link and as-toggle collapse button. as-toggle rotates ChevronLeft icon when collapsed.

As a frontend developer, implement the AdminHeader section for the AdminDashboard page. Uses AdminHeader.css with framer-motion AnimatePresence for profile dropdown animation and lucide-react icons: ChevronDown, User, Settings, HelpCircle, LogOut, Search, CheckCircle, FileDown, RefreshCw, Shield, Database. Breadcrumbs array renders Dashboard→Admin with ah-breadcrumb-link/ah-breadcrumb-current. quickActions array (Approve All/Export Data/Refresh) renders action buttons with variant styling. tabs array (Overview/Listings/Users/Reports/Settings) with badge counts drives activeTab useState. profileLinks array (My Profile/Account Settings/System Logs/Help) renders in AnimatePresence dropdown. profileOpen state toggled by ah-profile-btn, closed by outside click via useRef dropdownRef + profileBtnRef and mousedown event listener. searchVal useState controls ah-search-input.

As a frontend developer, implement the OverviewCards section for the AdminDashboard page. Uses OverviewCards.css with react-chartjs-2 Line charts and Chart.js registration of CategoryScale, LinearScale, PointElement, LineElement, Filler, Tooltip. CARD_DATA array defines 4 cards: Total Listings (2,847, +12.4%, blue #1A73E8), Pending Approvals (143, -3.2%, orange #FF7043), Active Users (6,512, +8.7%, green #22c55e), Revenue (₹18.2L, +5.1%, amber #FFA726). Each card has 12-point sparkline data. buildDataset() constructs Chart.js dataset with fill, tension:0.4, colored border/background. chartOptions disables all axes and legends for minimal sparkline rendering. TrendIndicator component renders TrendingUp/TrendingDown icons with oc-trend-up/oc-trend-down/oc-trend-neutral classes. cardRefs useRef + bounds useState track card dimensions for potential hover effects via updateBounds on resize.

As a frontend developer, implement the ListingsReview section for the AdminDashboard page. Uses ListingsReview.css with @react-three/fiber Canvas, @react-three/drei (Box, RoundedBox, Html), Suspense, and THREE.js for 3D building previews. buildingColors map provides body/roof/accent colors per type: Apartment (#1A73E8), Villa (#FF7043), Plot (#66BB6A), Commercial (#7E57C2). BuildingPreview component renders RoundedBox body (0.7×1.1×0.7, radius 0.04) with 4 window plane meshes (emissive accent glow), cone roof (coneGeometry 4 segments), and ground shadow plane. PreviewCanvas wraps it in Canvas (fov:35, camera [1.5,1.2,1.5]) with hovered state. Main ListingsReview uses useState for search, filter panel toggle, sort column/direction, pagination (ChevronLeft/ChevronRight), and per-row approve/reject/flag actions (Check/X/AlertTriangle icons). useMemo drives filtered+sorted listing rows. Search input, SlidersHorizontal filter toggle, and Download export button in toolbar. Empty state renders Inbox icon.

As a frontend developer, implement the UserManagement section for the AdminDashboard page. Uses UserManagement.css with framer-motion motion/AnimatePresence for row animations and lucide-react icons: Search, Filter, ChevronLeft, ChevronRight, Ban, CheckCircle, Edit3, MoreHorizontal, Users. USERS array contains 12 mock users with id, name, email, type (Buyer/Seller/Agent/Admin), status (Active/Suspended/Pending), joined date, and initials. ROLES tabs: All/Buyers/Sellers/Agents/Admins. State: activeTab, search, selectedIds (Set for bulk selection), page (pagination, ROWS_PER_PAGE=8), roleEdits. useMemo filtered derives list by activeTab (strips plural 's') and search query matching name/email/id. tabCounts useMemo computes per-role counts with All total. Row actions: Ban (Ban icon), Approve (CheckCircle), Edit role (Edit3), overflow menu (MoreHorizontal). Status badges render Active/Suspended/Pending with distinct CSS classes.

As a frontend developer, implement the ReportsAnalytics section for the AdminDashboard page. Uses ReportsAnalytics.css with react-chartjs-2 Line, Pie, Bar charts and full Chart.js registration (CategoryScale, LinearScale, PointElement, LineElement, BarElement, ArcElement, Tooltip, Legend, Filler). Features a 3D decorative ParticleField component using @react-three/fiber Canvas + useFrame: 60 particles with Float32Array positions/colors, rotating points mesh with AdditiveBlending and vertexColors. DATE_RANGES array (7d/30d/90d/1y) drives date range selector useState. activityDataSeries provides 30-day views/inquiries mock arrays. listingTypeData (5 types with colors) feeds Pie chart. revenueData provides 6-month rentalRevenue/salesRevenue Bar chart data. motion from framer-motion animates chart card entrances. TrendingUp/TrendingDown lucide icons show metric deltas. Download button triggers data export UI.

As a frontend developer, implement the AdminSettings section for the AdminDashboard page. Uses AdminSettings.css with lucide-react icons: Settings, Bell, Shield, AlertTriangle, Save, Check. PLATFORM_CONFIG provides siteName/contactEmail/maxFileSize defaults. NOTIFICATIONS array (4 items: emailNewListing, emailUserReport, approvalAlerts, weeklyDigest) initialized into notifications state object via reduce. PERMISSIONS defines roles array and 6 permissions with fixed matrix; permissionMatrix state initialized from PERMISSIONS.fixed. State: siteName, contactEmail, maxFileSize (platform config form), confirmText (danger zone confirmation input), saved (shows Check icon 3s after save), resetDone. toggleNotification flips individual notification keys. togglePermission guards Super Admin/Buyer/Seller roles as immutable and toggles editable rows. handleSave sets saved=true with 3s timeout. Renders three settings panels: Platform Config form, Notifications toggles, Permissions matrix table.

As a frontend developer, implement the Footer section for the AdminDashboard page. This component (Footer.css) may already exist from previous pages (Dashboard, ListProperty). Uses framer-motion useInView (once:true, amount:0.2) via rootRef to trigger entrance animations. listVariants/itemVariants define staggerChildren:0.06 + delayChildren:0.1 with y:10→0 opacity fade per link. iconVariants animate column icons with spring scale/rotate (stiffness:380, damping:18). linkColumns array (4 columns: Browse/Sell/Company/Support) each with Icon and 4 links. socials array (Facebook/Twitter/Instagram/LinkedIn) with brand hex colors. ftr-bg-layer divs with ftr-bg-orb spans for parallax orbs. ftr-skyline SVG with semi-transparent blue city silhouette path. Social icon hover triggers iconVariants active state.

As a frontend developer, implement the Navbar section for the Listings page. This component may already exist from previous pages (AdminDashboard, ListProperty). It uses framer-motion's useScroll and useMotionValueEvent hooks to detect scroll past 40px and toggle the 'nv-scrolled' class on the nav bar. Includes an animated SVG logo (house body, roof, window glow) with pathLength and scale animations, NAV_LINKS array mapping to Browse/Search/Post Property/Dashboard hrefs, a mobile burger button that toggles 'open' state and locks document.body.overflow, AnimatePresence-driven mobile drawer, and CTA buttons for Sign In and Get Started. Reuse from Landing/ListProperty if already implemented.

As a frontend developer, implement the Navbar section for the Users page. This component may already exist from AdminDashboard and other pages — reuse if available. Uses framer-motion hooks: useScroll and useMotionValueEvent to track scroll position (setScrolled at >40px). Manages mobile menu open/close state with useEffect toggling document.body.style.overflow. Renders animated SVG logo with motion.path (house body, roof with pathLength animations, window rect with opacity/scale transition). NAV_LINKS array maps to Browse /Listings, Search /Search, Post Property /ListProperty, Dashboard /Dashboard. Includes nv-cta-ghost Sign In and nv-cta Get Started CTAs plus animated hamburger burger button.

As a frontend developer, implement the Navbar section for the Reports page. This component may already exist from previous pages (AdminDashboard, Listings, Users). It uses framer-motion with useScroll and useMotionValueEvent to track scroll position and toggle the 'nv-scrolled' class at 40px. Includes an animated SVG logo with sequenced pathLength animations for house body, roof, and a window rect that scales in. NAV_LINKS array drives the desktop link list (Browse, Search, Post Property, Dashboard). Mobile hamburger button toggles 'open' state which locks body scroll via useEffect. Actions include ghost 'Sign In' and filled 'Get Started' CTA links. AnimatePresence wraps the mobile drawer.

As a Backend Developer, implement dashboard statistics API endpoints using FastAPI. Include: GET /api/dashboard/stats (role-aware stats: admin gets pending listings, active users, total properties, support tickets; agent/seller gets active listings, inquiries, unread messages, saved properties; buyer gets saved properties, recently viewed, price alerts, inquiries), GET /api/dashboard/activity (recent activity timeline entries for current user), GET /api/dashboard/listings (agent's own listings with pagination and search/filter), GET /api/dashboard/pending-listings (admin's pending approval queue). Note: Frontend tasks DashboardStats (468f0512), DashboardContent (ff2c8ebe), DashboardActivity (55c234dc) depend on this API.

As a Tech Lead, verify the end-to-end integration between the Signup (d70bd915) and Login (7f6326ad) frontend forms and the Auth API backend (backend-auth-api). Ensure: signup form POSTs to /api/auth/signup with correct payload and handles validation errors; login form POSTs to /api/auth/login, receives JWT token, stores in AuthContext, and redirects to Dashboard; logout clears token and redirects to Landing. Verify error states (invalid credentials, duplicate email) are surfaced correctly in the UI.

As a frontend developer, implement the ResultsPagination section for the Results page. Uses useState for currentPage (default 1), perPage (default 12), jumpValue (text input), resultCount (156, fixed), and loading (boolean with 300ms simulated fetch via setTimeout). Computes totalPages = ceil(156/perPage), startResult, endResult for the 'Showing X–Y of Z properties' summary. getPageNumbers() utility generates a smart page array with 'ellipsis-start'/'ellipsis-end' sentinels when totalPages > 7, always showing first and last pages plus ±1 around currentPage. Renders: rp-summary text, a 'Load More' button (ChevronsDown lucide icon) visible when currentPage < totalPages via handleLoadMore, numbered page buttons using ChevronLeft/ChevronRight for prev/next, ellipsis spans, and active page highlight. A PER_PAGE_OPTIONS select (12/24/36/48) resets to page 1 on change via handlePerPageChange. A jump-to-page form input with handleJump parseInt validates and calls goToPage. goToPage guards against out-of-range, same page, or loading state. Imports ResultsPagination.css.

As a frontend developer, implement the Navbar section for the Contact page. This component may already exist from previous pages (Search, Results, PropertyDetail). It uses useState for `scrolled` and `open` states, useScroll and useMotionValueEvent from framer-motion to detect scroll past 40px and apply `nv-scrolled` class. Includes an animated SVG logo with motion.path for house body/roof (pathLength 0→1) and motion.rect for window glow with scale/opacity animation. Renders NAV_LINKS array (Browse, Search, Post Property, Dashboard) as anchor tags, plus Sign In ghost CTA and Get Started CTA buttons. Hamburger button toggles mobile menu with body overflow lock via useEffect.

As a frontend developer, implement the FavoritesHero section for the Favorites page. Contains a React Three Fiber Canvas with camera at [0,8,10] fov:38 and dpr:[1,1.5]. The CityScene component procedurally generates 14 BuildingModel entries using useMemo with randomized positions, heights (1–4.5), and colors from ['#1A73E8','#FF7043','#FFCA28','#1A73E8','#FFA726']. Each BuildingModel uses @react-three/drei Float with speed:1.2, rotationIntensity:0.08, floatIntensity:0.3 and renders two stacked boxGeometry meshes with transparent MeshStandardMaterial (opacity 0.12 and 0.08). Scene includes ambientLight intensity:1.4, directionalLight, and two pointLights (blue and orange). A ground plane uses planeGeometry 26x18 with opacity:0.08. Overlaid HTML includes Heart and ArrowRight icons from lucide-react, a static favoriteCount:12 badge, decorative CSS orb spans (fh-orb-a/b/c), and a canvas wrapper div (fh-canvas-wrap).

As a frontend developer, implement the FavoritesFilters section for the Favorites page. Contains rich filter UI with multiple state hooks: activeType (string, default 'all'), priceRange ([number,number] with PRICE_MIN=0/PRICE_MAX=250000000/PRICE_STEP=500000), location (string), sort (string 'newest'), locationOpen (boolean), sortOpen (boolean). PROPERTY_TYPES array has 5 entries (All/Apartment/Villa/Plot/Penthouse) each with lucide-react icons (SlidersHorizontal/Building2/Home/Trees/Castle). LOCATIONS array has 8 options covering Indian cities. SORT_OPTIONS has 5 entries. Dual range slider for price with formatPrice helper rendering ₹Cr/₹L/₹K formats. Location and Sort custom dropdowns use refs (locationRef, sortRef) with click-away listeners via useEffect. Derived values: hasActiveFilters boolean and badgeCount integer for active filter badge. handleClearAll useCallback resets all state. Static filterCounts object drives per-type property counts. X and RotateCcw icons for clear actions, Check for selected states, ArrowUpDown for sort trigger, MapPin for location.

As a frontend developer, implement the FavoritesGrid section for the Favorites page. Renders a grid of 8 static property cards from FAVORITES_DATA array (items include Skyline Residency, Gardenia Villa, Ocean Breeze Apartments, Heritage Plot, Sunrise Towers, Maplewood Estate, Silver Oak Commercial, Greenfield Plot) each with Unsplash images, price, type, beds/baths/area. State: favorites initialized from FAVORITES_DATA with saved:true flag via useState lazy initializer, and sortBy (string). handleToggleFavorite useCallback removes items by id (filters out from favorites array — i.e. unsave). handleCardMouseMove useCallback uses cardRefs (useRef object keyed by id) for mouse-tracking 3D tilt transforms on hover. Each card displays MapPin/Bed/Bath/Maximize2/Eye/Trash2/Heart/Search/ChevronRight icons from lucide-react. Cards animate on hover with CSS transforms driven by mouse position relative to card bounds.

As a frontend developer, implement the FavoritesEmpty section for the Favorites page. Conditionally rendered when the favorites list is empty. Uses framer-motion useInView with rootRef (once:true, amount:0.3) to trigger entrance animation. contentVariants define hidden:{opacity:0,y:20} → visible:{opacity:1,y:0} with duration:0.6 easeOut. Contains a React Three Fiber Canvas (camera position:[0,0,5.5] fov:40, alpha:true) rendering EmptyIcon3D: a @react-three/drei Float (speed:1.4, rotationIntensity:0.5, floatIntensity:0.6, floatingRange:[-0.15,0.15]) containing a heart shape built from two sphereGeometry lobes (radius 0.42, position ±[0.42,0.22,0]) plus a coneGeometry bottom point ([0,-0.52,0] rotated Math.PI), all using #FF7043 meshStandardMaterial. An icosahedronGeometry star accent at [0,0.15,0.55] uses #FFCA28 with emissive glow (emissiveIntensity:0.35). A torusGeometry ring (args:[1.05,0.03,16,80]) with #1A73E8 opacity:0.35. Decorative glow layer (fe-glow-layer) and CTA with lucide-react Search icon to browse properties.

As a frontend developer, implement the Footer section for the Favorites page. This component (likely already exists from Contact and Profile pages) uses framer-motion useInView (rootRef, once:true, amount:0.2) to trigger staggered entrance. listVariants stagger children by 0.06s with 0.1s delayChildren; itemVariants animate opacity:0→1 and y:10→0 over 0.4s easeOut; iconVariants use spring (stiffness:380, damping:18) for scale/rotate reveal on hover. Four linkColumns (Browse/Sell/Company/Support) each with lucide-react icons (Search/Tag/Building2/LifeBuoy) and 4 links per column covering all app routes. Socials array has Facebook/Twitter/Instagram/LinkedIn with brand colors (#1877F2/#1DA1F2/#E4405F/#0A66C2). Background has two-layer parallax div.ftr-bg-layer with CSS var(--scroll) transforms at -0.3px and -0.6px multipliers. SVG ftr-skyline cityscape path (viewBox 1200x120) with rgba(26,115,232,0.25) fill. Contact info rows with Mail/Phone/MapPin icons.

As a frontend developer, implement the ListPropertyHeader section (ListPropertyHeader.css) for the ListProperty page. Renders a 6-step progress indicator using the steps array (Basic Info, Images, Description, Location, Pricing, Review) each with lucide icons (FileText, Image, FileEdit, MapPin, IndianRupee, ClipboardCheck). Uses useState activeStep (default 0) and listens for custom window event 'lph-set-step' via useEffect to update activeStep and re-dispatch 'lpn-set-step' to sync the sidebar nav. Renders a breadcrumb nav with ChevronRight separator linking Dashboard → List Property, an lph-header-row with h1 title and a 'Step X of 6' badge span, a description paragraph, and an ordered list lph-progress where each step dot has lph-step-pending/lph-step-active/lph-step-completed classes plus lph-step-connector lines styled lph-conn-completed for passed steps.

As a frontend developer, implement the ListPropertyNav section (ListPropertyNav.css) for the ListProperty page. Renders a sidebar/mobile navigation for the 6-step listing form using a steps array with number, label, and sublabel. Uses useState for activeStep (default 1) and drawerOpen (default false). Computes completedCount = activeStep - 1, progressPercent as a percentage, and getStepState() returning 'completed'/'active'/'upcoming' per step number. handleStepClick fires a custom window event 'lph-set-step' with step: stepNumber - 1 to sync the header stepper and closes the mobile drawer. useEffect listens for 'lpn-set-step' events to update activeStep from external sources. Renders a mobile lpn-drawer-toggle button showing current step label with ChevronDown icon, a lpn-mobile-stepper horizontal dot list, and a desktop vertical step list with Check icons for completed steps, active indicators, and sublabel text.

As a frontend developer, implement the Footer section (Footer.css) for the ListProperty page. This shared Footer component may already exist from Profile/Favorites/Dashboard pages — verify before re-implementing. Renders an SVG ftr-skyline decorative cityscape path using var(--primary) fill. Contains a brand column with Home lucide icon logo, tagline text, and ftr-contact links (Mail icon → hello@frosty-real.in, Phone icon). exploreLinks column (List a Property, Buy a Home, Rent a Home, Find an Agent) and companyLinks column (About, How It Works, Careers, Help Center). Newsletter subscription form with controlled email useState, subscribed boolean toggle — handleSubscribe prevents default, sets subscribed true on non-empty email, clears input. Renders Send lucide icon submit button. Social row with 5 icons (Facebook, Twitter, Instagram, Linkedin, Youtube) from socials array. Bottom bar with legalLinks (Privacy Policy, Terms of Service, Cookie Settings).

As a frontend developer, implement the InquiriesList section for the Inquiries page. This section renders a scrollable list of 10+ inquiry items sourced from the INQUIRIES constant, each with sender initials avatar, sender name, subject, preview text, timestamp, unread badge count, and persona tag (buyer/seller/agent). State management uses useState and useMemo for selection and filtering. Framer Motion's AnimatePresence and motion components provide list item enter/exit animations. Lucide-react icons (CheckSquare, Archive, MailOpen, Inbox) are used for item-level actions. Items are marked unread/read visually, and clicking an item selects it. The component integrates with the active filter and search term from InquiriesHeader (if lifted to shared state or prop-drilled).

As a frontend developer, implement the ListingsHero section for the Listings page. Uses @react-three/fiber Canvas with a Scene3D containing multiple PropertyShape (boxGeometry) and RoofShape (coneGeometry) floating 3D meshes with semi-transparent meshStandardMaterial (opacity 0.12–0.14). Each shape animates via useFrame using sine/cosine wave motion with per-shape random phase offsets and mouse-driven parallax via a mouseTarget ref. A MouseTracker div layer captures onPointerMove to update mouseTarget.current[0/1] with normalized [-1,1] coords. Includes a breadcrumb nav (Home → Browse → All Properties), headline text, subtext, and lucide-react Building2/Home icons. Ambient and directional lighting in the 3D scene.

As a frontend developer, implement the ListingsFilters section for the Listings page. Manages rich filter state with useState/useCallback/useMemo hooks covering: text search input, location dropdown (10 Indian cities), property type multi-select (Apartment/House/Villa/Penthouse/Studio/Plot), BHK options (1–5+ BHK), amenities checkboxes (Pool/Gym/Parking/Garden/Security/Power Backup), and dual-handle price range slider from 0 to 50,000,000 INR with formatPrice helper (Cr/L formatting). Includes custom inline SVG icons: ICON_Search, ICON_ChevronDown, ICON_X, ICON_Sliders, ICON_Filter, ICON_RefreshCw. Uses framer-motion AnimatePresence for expandable filter panel toggle. THREE.js import present for potential background effect. Active filter chip badges with individual dismiss (ICON_X) and a global Reset Filters (ICON_RefreshCw) button. Mobile-responsive collapsible filter drawer.

As a frontend developer, implement the Footer section for the Listings page. This component may already exist from ListProperty or AdminDashboard pages. Uses framer-motion useInView (once: true, amount: 0.2) on a rootRef to trigger staggered entrance animations via listVariants (staggerChildren: 0.06) and itemVariants (opacity 0→1, y 10→0). Contains four linkColumns (Browse/Sell/Company/Support) each with a lucide-react Icon and 4 links. Social links row with Facebook/Twitter/Instagram/LinkedIn icons using iconVariants spring animation (scale 0→1, rotate -25→0). Background layer has two orb spans and an SVG skyline path with parallax CSS var(--scroll). Branding section with Home icon, frosty-real name, tagline, Mail/Phone/MapPin contact info, and bottom copyright bar.

As a frontend developer, implement the UsersTopBar section for the Users page. Renders a breadcrumb row with BREADCRUMB_SEGMENTS [{label:'Admin', href:'/AdminDashboard'}, {label:'Users', href:'/Users', active:true}] and ChevronRight separators from lucide-react. Includes a ThreeAccent sub-component using a Three.js canvas (useRef) that creates two intersecting TorusKnotGeometry meshes (geoA: 1.4 radius blue #1a73e8, opacity 0.38; geoB: 1.6 radius orange #ff7043, opacity 0.22) in a Group with slow idle rotation (group.rotation.y += 0.0018, group.rotation.x += 0.0009). Uses ResizeObserver to handle responsive canvas sizing, PerspectiveCamera at position [0, 0.6, 8], AmbientLight and two DirectionalLights. Cleanup cancels RAF and disconnects ResizeObserver. Also renders a SlidersHorizontal icon toggle button from lucide-react.

As a frontend developer, implement the UsersSidebar section for the Users page. Uses useState for activeFilter (default 'all') and useMemo to derive activeColor from COLOR_MAP and activeLabel from FILTER_OPTIONS. FILTER_OPTIONS includes 5 entries: all (248 badge, #1A73E8), buyers (87, #FF7043), sellers (63, #4CAF50), agents (42, #FFCA28), suspended (11, #E53935). Renders a 3D indicator panel using @react-three/fiber Canvas with camera at position [0,0,3.6] fov 35, and an IndicatorSphere sub-component using @react-three/drei Sphere (args [1,48,48]) with MeshDistortMaterial (speed 1.8, distort 0.22, opacity 0.92) that changes color reactively based on activeFilter. Below the 3D canvas, renders filter buttons with Icon, label, and badge count. Also renders QUICK_LINKS with Shield (Manage Permissions), BarChart3 (View Reports), Settings (Account Settings) icons from lucide-react.

As a frontend developer, implement the UsersHeader section for the Users page. Accepts totalUsers prop and uses useState for query string. Renders an uh-info-row with Users icon (lucide-react, size 16) alongside h2 'All Users' label and a count badge showing totalUsers.toLocaleString() with 'Showing X accounts' text. Renders a search input (uh-search-input) with Search icon (size 17) prefix and conditional X clear button (uh-search-clear, size 15) that appears when query is non-empty. handleClear resets query to empty string; handleChange updates query from input event. Input has aria-label 'Search users by name or email'.

As a frontend developer, implement the UsersFiltersAndSort section for the Users page. Accepts open prop (synced via useEffect to internal advancedOpen state). Manages useState for: sortOpen, sortValue (default 'joined_desc'), activeStatuses (['active','pending','suspended']), advancedOpen, advancedRole, advancedVerification, advancedLocation. SORT_OPTIONS provides 6 sorting values (name_asc/desc, joined_desc/asc, activity_desc/asc). STATUS_TOGGLES renders 3 toggles (active 42 count, pending 8, suspended 3) each with a colored dot CSS class. ROLE_OPTIONS and VERIFICATION_OPTIONS power advanced filter selects. Uses framer-motion AnimatePresence for sort dropdown and advanced panel expand/collapse. Implements cursor-reactive glow on toolbar via handleToolbarMouseMove callback setting CSS custom properties --ufs-mx and --ufs-my via useRef on toolbarRef. Sort dropdown closes on outside click via mousedown listener referencing sortRef. RotateCcw icon triggers reset of all filter state.

As a frontend developer, implement the UsersAccountsGrid section for the Users page. Accepts props: selected (Set), onSelectionChange, pageSize, currentPage, onPageChange. USERS static array contains 9 users (Priya Sharma, Arjun Mehta, Vikram Desai, Neha Kapoor, Rahul Nair, Ananya Iyer, Sandeep Reddy, Kavita Joshi, Deepak Menon) with fields id, name, email, type, status, joinDate, initials. useMemo slices visible users based on currentPage and perPage. Derives allSelected and anySelected booleans. toggleSelectAll adds/removes all visible users from selection Set. toggleUser toggles individual user selection. statusColor maps Active/Pending/Suspended to CSS modifier classes. Renders per-user rows with initials avatar, name/email, type badge, status badge, joinDate, and action icons Edit3, Ban, Eye from lucide-react. Includes ChevronLeft/ChevronRight pagination controls and SearchX empty-state illustration. Renders indeterminate checkbox state for partial selection.

As a frontend developer, implement the Footer section for the Users page. This component may already exist from AdminDashboard, ListProperty, Listings, and other pages — reuse if available. Uses useInView (framer-motion, once:true, amount:0.2) on rootRef for entrance animation. Renders ftr-bg-layer with two ftr-bg-orb elements (orb-a, orb-b) and a parallax SVG skyline (ftr-skyline viewBox 0 0 1200 120). Four linkColumns (Browse, Sell, Company, Support) each with a column Icon from lucide-react and staggered child links using listVariants/itemVariants motion variants (staggerChildren 0.06, y:10→0 opacity transition). Social icons row (Facebook #1877F2, Twitter #1DA1F2, Instagram #E4405F, LinkedIn #0A66C2) uses iconVariants with spring animation (stiffness 380, damping 18). Contact info row includes Mail, Phone, MapPin lucide icons.

As a frontend developer, implement the ReportsHeader section for the Reports page. Uses Three.js (WebGLRenderer with alpha) and a custom ShaderMaterial with GLSL vertex and fragment shaders — uniforms include uTime (float) and uColor (vec3 '#1A73E8'). An OrthographicCamera renders 80 particles with randomized positions and sizes stored in BufferGeometry attributes. The fragment shader computes a radial alpha via smoothstep for soft circle particles. A clock-driven animate loop drifts each particle's x/y using sin/cos with per-particle phase offsets. Also renders breadcrumbs [Dashboard → Reports & Analytics] and a BarChart3 lucide icon as the section heading. Handles canvas resize via parentElement.getBoundingClientRect.

As a frontend developer, implement the ReportsFilter section for the Reports page. Manages controlled state for dateFrom (default: 30 days ago), dateTo (today), reportType (from REPORT_TYPES array of 7 options), expanded (collapsible panel), and activeChips array. The rf-collapse div uses inline maxHeight/opacity CSS transitions (0→520px) for expand/collapse. handleGenerate computes date-diff to display 'Last 30 Days' vs formatted date range chips; handleReset restores defaults and clears chips. removeChip determines which state to reset based on chip content. Uses SlidersHorizontal, RotateCcw, BarChart3, and X from lucide-react. The toggle button shows 'Hide Filters' / 'Show Filters' with aria-expanded for accessibility.

As a frontend developer, implement the ReportsMetrics section for the Reports page. Renders a 6-card metrics grid using the METRICS array (Total Listings 1,284; Active Users 8,649; Revenue ₹42.8L; Property Views 56.2K; Properties Sold 317; New Inquiries 943) each with a lucide icon (Building2, Users, IndianRupee, Eye, Home, MessageSquare) and TrendingUp/TrendingDown trend indicators with percentage labels. Also initializes a Three.js background using WebGLRenderer with PointsMaterial (color 0x1A73E8, size 0.028, opacity 0.35) for 24 drifting particles tracked with a velocities Float32Array. A linesGroup (6 line pairs between random particle pairs) updates each frame to visualize connections. Pixel ratio capped at 2 for performance.

As a frontend developer, implement the ReportsCharts section for the Reports page. Registers Chart.js modules (LineElement, BarElement, ArcElement, CategoryScale, LinearScale, PointElement, Tooltip, Legend, Filler). Renders three charts: (1) Line chart — 'Monthly User Growth' with three datasets (Buyers #1A73E8, Sellers #FF7043, Agents #FFCA28) with fill:true, tension:0.4, and custom point styles; (2) Bar chart — 'Property Inquiries by City' with Buy Inquiries (#1A73E8) and Rent Inquiries (#FFA726) for 8 cities (Bangalore to Ahmedabad) with borderRadius:6; (3) Doughnut chart — property type or status distribution. All charts use shared tooltipStyles object with Inter font and rgba(255,255,255,0.96) background. Also integrates a @react-three/fiber Canvas with @react-three/drei Sphere and Points as a decorative 3D accent. framer-motion useInView triggers stagger entrance animations.

As a frontend developer, implement the ReportsTable section for the Reports page. Manages useMemo-sorted REPORT_ROWS (15 rows: listing, agent, inquiries, status, date, views columns) with useState for sortKey, sortDir, and currentPage. ROWS_PER_PAGE=6 drives pagination with ChevronLeft/ChevronRight controls and page count display. Column headers with ChevronUp sort indicators toggle ascending/descending on click. Status badges render color-coded pill variants (Active, Pending, Closed, New). Includes a DataRing 3D accent rendered via @react-three/fiber Canvas with OrbitControls — a torusGeometry (args [0.65, 0.08, 16, 32]) with emissive #1A73E8 meshStandardMaterial (emissiveIntensity 0.4, metalness 0.5). Database icon from lucide-react used in the section header.

As a frontend developer, implement the ReportsExport section for the Reports page. Renders four action buttons (Download PDF, Export CSV, Print, Share Report) from the actionButtons config array with variant 'primary' (rx-btn-primary) or 'outline' (rx-btn-outline) styling. Each button uses framer-motion whileTap scale:0.97 with spring stiffness:400 damping:22. triggerToast useCallback manages toast state transitions: when a prior toast exists it sets exiting:true, waits 350ms, then replaces with the new toastMessages[key] string. Auto-dismiss fires after 2200ms with a 350ms exit fade. The toast element uses framer-motion initial/animate/exit opacity+y transitions with duration:0.3. Icons are FileText, Download, Printer, Share2 from lucide-react.

As a frontend developer, implement the Footer section for the Reports page. This component may already exist from previous pages (AdminDashboard, Listings, Users). Uses framer-motion useInView (once:true, amount:0.2) on the root ref to gate stagger animations. linkColumns array drives four columns (Browse, Sell, Company, Support) each with a lucide icon and 4 child links. listVariants/itemVariants apply staggerChildren:0.06 + delayChildren:0.1 with opacity:0→1 and y:10→0 item entrance. iconVariants animate column icons from scale:0/rotate:-25 to scale:1/rotate:0 via spring stiffness:380 damping:18. Social links (Facebook #1877F2, Twitter #1DA1F2, Instagram #E4405F, LinkedIn #0A66C2) rendered with per-brand colors. Two parallax bg orbs and an SVG skyline path with translateY CSS custom property scroll effect.

As a Tech Lead, verify the end-to-end integration between the Search (SearchFilters bd36cba0, SearchResults 805bfca0, SearchMap 1852a021) and Results (ResultsFilterSidebar d83e570f, ResultsListings 31ed2c09, ResultsPagination 073825f0) frontend sections and the Properties API (backend-properties-api). Ensure: filter state correctly maps to API query params (location, price_min/max, type, bhk, amenities), pagination works with totalCount from API, property cards render real data, and the map view displays actual lat/lng coordinates from the API response.

As a Tech Lead, verify the end-to-end integration between the Profile frontend sections (ProfilePersonal 86bb1a78, ProfileSecurity d97c4b28, ProfilePreferences a7fe0ee1, ProfileDanger 2b0b8f85, ProfileHeader fee389fc) and the Profile API (backend-profile-api). Ensure: profile data loads from GET /api/profile on mount; save actions PUT to the correct endpoints; avatar upload uses POST /api/profile/avatar with FormData; password change validates current password; session list fetches and logout-session works; account deactivation/deletion shows confirmation and calls the API.

As a Tech Lead, verify the end-to-end integration between the ListingsReview section for AdminDashboard (e462aa84) and the Properties API (backend-properties-api). Ensure: pending listings are fetched from GET /api/properties?status=pending with search, sort, and pagination; approve action calls PATCH /api/properties/{id}/status with {status: 'approved'}; reject calls with {status: 'rejected'}; flag calls with {status: 'flagged'}; the UI correctly reflects updated status after API response.

As a Tech Lead, verify the end-to-end integration between the Dashboard frontend sections (DashboardStats 468f0512, DashboardContent ff2c8ebe, DashboardActivity 55c234dc, DashboardWelcome 4b16e6bd) and the Dashboard API (backend-dashboard-api). Ensure: role-aware stats load from GET /api/dashboard/stats based on current user role; activity timeline fetches from GET /api/dashboard/activity; agent's listings grid fetches from GET /api/dashboard/listings with search/filter; admin's pending approval queue fetches from GET /api/dashboard/pending-listings; approve/reject actions call the Properties API.

As a Tech Lead, verify the end-to-end integration between the AdminSettings frontend section (a10d5533) and the Admin Settings API (backend-admin-settings-api). Ensure: platform config form loads from GET /api/admin/settings on mount; save button PUTs updated config and shows 3s success Check icon feedback; notification toggles load from GET /api/admin/notifications and each toggle PUTs the updated preferences; permission matrix loads from GET /api/admin/permissions and editable rows PUT changes while Super Admin/Buyer/Seller rows remain immutable.

As a frontend developer, implement the ContactHero section for the Contact page. Uses @react-three/fiber Canvas with a BackgroundShapes component rendering 8 semi-transparent blue boxGeometry meshes (meshStandardMaterial color #1A73E8, opacity 0.08) at varied positions/rotations, plus a ground planeGeometry and ambientLight/directionalLight. useInView from framer-motion triggers entrance animation (once: true, amount: 0.3). Renders gradient orbs (ch-orb-left, ch-orb-right), a breadcrumb nav (Home / Contact), and an icon accent bar with Mail, Phone, MessageSquare icons from lucide-react. Camera set at position [0,0,4] fov 45 with alpha-enabled gl renderer.

As a frontend developer, implement the ContactForm section for the Contact page. Features a @react-three/fiber Canvas with FormGeometry component that renders a central envelope mesh (boxGeometry 1.6x1.05x0.08) using useFrame for continuous Y rotation (delta*0.25), sinusoidal float, ring rotation, and particle rotation. Color transitions via THREE.Color lerp between SHAPE_COLORS states: idle (#1A73E8), focus (#FFCA28), success (#4caf50), error (#FF7043). Form state managed with useState tracking formState ('idle'|'focus'|'success'|'error') and field values. Lucide icons used: Mail, User, MessageSquare, HelpCircle, Building2, ShieldCheck, AlertCircle, CheckCircle2, Send, Loader2. AnimatePresence handles success/error message transitions. useMemo generates THREE.Shape for envelope body and flap path geometries.

As a frontend developer, implement the ContactInfo section for the Contact page. Renders a `contactCards` array with email (hello@frosty-real.com), phone (+91 80 4567 8900), and address (Koramangala, Bengaluru) cards, each with a lucide icon (Mail, Phone, MapPin), detail text, actionLabel anchor, secondary text, and per-card color variant classes (ci-card--email, ci-card--phone, ci-card--address). Renders an `officeHours` table (Mon–Fri, Saturday, Sunday). Uses useInView (once: true, amount: 0.15) to trigger motion.div with containerVariants (staggerChildren: 0.1) and cardVariants (opacity 0→1, y 28→0 with custom cubic-bezier ease). Background layer has two decorative orb spans (ci-bg-orb-a, ci-bg-orb-b).

As a frontend developer, implement the Footer section for the Contact page. This component may already exist from previous pages (Search, Results). Uses useInView (once: true, amount: 0.2) to trigger listVariants (staggerChildren: 0.06) and itemVariants (opacity 0→1, y 10→0). Renders four linkColumns (Browse, Sell, Company, Support) each with a lucide Icon and link arrays. Social icons (Facebook, Twitter, Instagram, LinkedIn) use iconVariants with spring animation (stiffness 380, damping 18) for scale/rotate hover. Includes a parallax ftr-bg-layer with two orb spans and an inline SVG ftr-skyline cityscape path. Footer brand logo mirrors Navbar SVG animation.

As a frontend developer, implement the PropertyBasicInfo section (PropertyBasicInfo.css) for the ListProperty page. Consumes useListPropertyForm context (formState, setField) from ListPropertyContext. Uses local useState for form fields: propertyType (select with propertyTypes array including house/apartment/land/commercial options), bedrooms (spinner default 2), bathrooms (spinner default 2), builtUpArea (text input), areaUnit (toggle among sqft/sqm/sqyd via areaUnits array), and propertyAge (select from ageOptions). Syncs all fields to shared context via useEffect on form change. Implements handleSpinner (delta ±1 clamped 0-99), handleSpinnerInput (raw integer parse), handleSpinnerBlur (default to 0), handleChange (clears field error), and a validate() function that populates errors state. Renders lucide icons Home, Bed, Bath, Square, Calendar, ArrowRight. Shows inline field errors, and an ArrowRight 'Continue' button that fires validate() before advancing the step.

As a frontend developer, implement the PropertyImages section (PropertyImages.css) for the ListProperty page. Uses @react-three/fiber Canvas, @react-three/drei OrbitControls, and THREE.TextureLoader for a 3D image preview modal (ImageScene + ImagePlane components). ImagePlane uses useFrame to animate rotation.y with sin wave (0.3 speed) and position.z oscillation (0.5 speed), loads texture via useLoader(THREE.TextureLoader), and renders a planeGeometry sized to texture aspect ratio. Consumes useListPropertyForm context (setField) to sync imageCount. Main PropertyImages component uses useState for images array (max 10), primaryIndex, dragover, uploading (with uploadProgress 0-100), and previewImage (triggers 3D modal). Implements drag-and-drop via dropZoneRef with dragover/dragleave/drop handlers, file input via fileInputRef, validateFile() checking MIME types (jpeg/png/webp/avif) and max 10MB size, upload simulation with progress bar. Renders image thumbnails with Star (set primary), Trash2 (remove), and Plus upload tile. Lucide icons: Upload, Image, Star, Trash2, Plus, X, Images, Camera.

As a frontend developer, implement the PropertyDescription section (PropertyDescription.css) for the ListProperty page. Includes a 3D accent using @react-three/fiber Canvas with @react-three/drei Float wrapping an icosahedronGeometry (args [0.85, 2]) with meshStandardMaterial color #FFCA28, lit by ambientLight and two pointLights (yellow #FFCA28 and blue #1A73E8). Consumes useListPropertyForm (formState, setField). Uses useState for description (max 2000 chars via MAX_CHARS), selectedAmenities (Set initialized from formState), activeFormats (Set for toolbar state), saving boolean, and toastMsg. Renders a rich text toolbar with 10 toolbarButtons (Bold, Italic, Underline, H1, H2, Quote, List, AlignLeft, AlignCenter, AlignRight lucide icons) applying document.execCommand. Amenity toggles for 10 amenitiesList items (pool, parking, garden, gym, security, wifi, cctv, fireplace, ac, tv) each with lucide icons. Character counter. Save draft button with saving spinner state and toast notification. Syncs description and selectedAmenities array to context on change.

As a frontend developer, implement the PropertyLocation section (PropertyLocation.css) for the ListProperty page. Contains a 3D cityscape built with @react-three/fiber Canvas and @react-three/drei OrbitControls. Building component uses useRef meshRef, useState hovered, THREE.Color for dynamic color brightness on hover/highlight, renders boxGeometry with meshStandardMaterial and a sphereGeometry yellow marker (emissive #FFCA28) when hovered or highlighted. CityScene renders an array of 6+ buildings at various positions/heights/colors with onBuildingClick and highlightedIndex props. Main PropertyLocation consumes useListPropertyForm (setField). Renders a search input with Search icon that filters against MOCK_ADDRESSES array (5 Indian city addresses with lat/lng) showing suggestion dropdown. Navigation buttons: Navigation (use current location), Plus/Minus zoom controls. Displays selected address with MapPin icon. Shows NEARBY_LANDMARKS list (6 entries: Cyber Hub, Apollo Hospital, Shri Ram School, Ambience Mall, HUDA Metro, Aravalli Park) each with distance, type, and lucide icons (Landmark, Stethoscope, School, ShoppingBag, Train, Trees). Syncs location to context via setField.

As a frontend developer, implement the PropertyPricing section (PropertyPricing.css) for the ListProperty page. Includes a 3D PricingSphere component using @react-three/fiber Canvas with an icosahedronGeometry (args [1.0, 1]) and meshStandardMaterial (color #1A73E8, metalness 0.3, roughness 0.4, transparent opacity 0.28), animated via requestAnimationFrame incrementing rotation.y by 0.003 and rotation.x by 0.001 in a useEffect. Consumes useListPropertyForm (formState, setField). State: price (digits-only validated), priceError, offerType ('negotiable'/'fixed'), loanAmount, timeline (from 5-option timelineOptions select), sqftArea (derived from formState.builtUpArea or default 1200), pricePerSqft (computed price/sqftArea), currencyToggle ('inr'). Displays real-time pricePerSqft calculation, marketAvgPrice comparison (6500 ₹/sqft baseline), TrendingUp market insight. Renders IndianRupee, TrendingUp, Clock, Tag, Info, AlertCircle lucide icons. Syncs all 6 fields to shared context. handlePriceChange allows only digits.

As a frontend developer, implement the InquiriesDetail section for the Inquiries page. This section renders a full message thread panel with a MESSAGES constant containing 6 chat messages (received/sent types, with initials avatars, timestamps, date groups via DATE_GROUPS). State includes replyText (useState), showEmoji (useState), attachedFile (useState), localMessages (useState initialized from MESSAGES), and isSending (useState). A useRef messagesEndRef enables scrollToBottom via useEffect on localMessages/isSending changes. The handleSend function appends new sent messages to localMessages with optimistic UI and isSending animation. An emoji picker overlay renders a 24-emoji EMOJIS grid toggled by showEmoji. File attachment is handled via a hidden fileInputRef triggered by the Paperclip lucide icon. The header bar includes Phone, Info, MoreVertical, and X lucide icons. Message attachments render with FileText/Image icons, file name, size, and a Download button. The reply textarea uses textareaRef with auto-resize behavior and Send button triggers handleSend.

As a frontend developer, implement the ListingsResults section for the Listings page. Renders a grid of property cards from a PROPERTIES array of 5+ mock listings (id, title, location, city, price, priceDisplay, type, bhk, area, image URL, description, amenities[]). Each card displays an Unsplash image, Heart (wishlist toggle with useState per card), Eye and MessageCircle interaction icons from lucide-react, property title, MapPin + location, Bed + BHK, Maximize2 + area, price display, and amenity badges. Uses useRef and useCallback for card hover/focus interactions. Includes a results header showing count, sort dropdown (SlidersHorizontal icon), and a Search empty-state illustration. Implements grid/list view toggle. useMemo for filtered/sorted property list derived from filter state (likely receives filter props or uses shared context).

As a frontend developer, implement the UsersActionPanel section for the Users page. Accepts props: selected (Set), onSelectionChange, pageSize, currentPage, onPageChange, onPageSizeChange, totalUsers. Computes totalPages, isPrevDisabled, isNextDisabled, selectedCount, hasSelection, visibleCount. Derives selectAllState as 'none'|'all'|'indeterminate' based on selectedCount vs visibleCount. handleSelectAll selects IDs start..end on current page or clears all. handleSuspend and handleDelete clear selection when hasSelection. PAGE_SIZE_OPTIONS [10,25,50,100] powers a select dropdown. Renders uap-count-badge with Users icon showing totalUsers, a custom uap-checkbox with Check icon (size 12) for all/indeterminate states, bulk action buttons with Ban and Trash2 icons from lucide-react, and ChevronLeft/ChevronRight pagination with startItem–endItem range display and ChevronDown page-size selector.

As a Tech Lead, verify the end-to-end integration between the Favorites frontend sections (FavoritesGrid c99645c6, FavoritesFilters 61a5464b, FavoritesHero f73a4700, FavoritesEmpty e35af18e) and the Favorites API (backend-favorites-api). Ensure: Heart/favorite toggle buttons in Listings, Results, Search, and PropertyDetail pages all call POST/DELETE /api/favorites/{property_id}; the Favorites page fetches saved properties from GET /api/favorites and renders real data; FavoritesEmpty shows when the API returns an empty list; filter/sort operates on the fetched data.

As a Tech Lead, verify the end-to-end integration between the Users page frontend sections (UsersHeader d5db1c17, UsersFiltersAndSort 4637a26e, UsersAccountsGrid fac03ec9, UsersActionPanel 6f4eb268, UsersSidebar efff6f1b) and UserManagement for AdminDashboard (f6a30df1) with the Users API (backend-users-api). Ensure: paginated user list fetches from GET /api/users with filter/sort/search params; status badge counts match API stats; bulk suspend/delete actions call PATCH/DELETE endpoints; role editing PUTs to the correct endpoint; pagination and page size selector work correctly.

As a Tech Lead, verify the end-to-end integration between the Reports page frontend sections (ReportsMetrics a0ce5976, ReportsCharts b580b7ce, ReportsTable 40488007, ReportsFilter 2ec0341b) and ReportsAnalytics for AdminDashboard (23d226f6) with the Reports API (backend-reports-api). Ensure: metrics cards fetch from GET /api/reports/metrics; chart data fetches from the respective chart endpoints; date range filter in ReportsFilter sends dateFrom/dateTo params to the API; reports table paginates via GET /api/reports/listings; all values display correctly with INR formatting.

As a frontend developer, implement the ListingSubmit section (ListingSubmit.css) for the ListProperty page. Consumes useListPropertyForm (formState) reading propertyType, bedrooms, bathrooms, builtUpArea, areaUnit, propertyAge, location, price, description, selectedAmenities, imageCount, and offerType. Uses propertyTypeLabels and ageLabels lookup maps for display, and formatINR() helper that formats numbers as ₹ Cr / ₹ L / ₹ localeString. State: termsAccepted boolean, submitted boolean, message ({type, text} | null). handleSubmit validates termsAccepted, sets submitted true, shows success message with 24-48hr review copy. handleSaveDraft shows draft-saved success toast. handleAddAnother resets submitted/termsAccepted/message. dismissMessage clears toast. Renders a review summary card of all form fields, a terms checkbox, Submit and Save Draft action buttons with Check/AlertCircle/CheckCircle/Plus/Home lucide icons, and conditional success/error message banners.

As a frontend developer, implement the ListingsPagination section for the Listings page. Manages currentPage (initial: 5), perPage (initial: 24), and dropdownOpen state. Total properties is 1,250; totalPages computed via Math.ceil. generatePageNumbers function produces smart page ranges with ellipsis ('...') items — always shows page 1, last page, and up to 3 pages around current. Per-page selector dropdown (12/24/48 options) uses a ref (dropdownRef) for outside-click dismissal via document mousedown listener. A useEffect clamps currentPage when totalPages shrinks below it. Renders ChevronLeft/ChevronRight prev/next buttons, numbered page buttons with active highlight, ellipsis spans, and a counter showing 'Showing X–Y of 1,250 properties'. ChevronDown animates open/close on the per-page trigger button.

As a Tech Lead, verify the end-to-end integration between the Inquiries frontend sections (InquiriesHeader 1214c107, InquiriesList 9db70ac4, InquiriesDetail 427653fb) and the Inquiries API (backend-inquiries-api). Ensure: inquiry list fetches from GET /api/inquiries with filter and search params; clicking an inquiry loads the message thread from GET /api/inquiries/{id}; reply form POSTs to /api/inquiries/{id}/messages with optimistic UI update; file attachments are handled; mark-as-read and delete actions call the correct endpoints.

As a Tech Lead, verify the end-to-end integration between the ContactForm frontend sections (Contact page c4778b70 and PropertyDetail page a5caeb8a) and the Contact API (backend-contact-api). Ensure: form POSTs to POST /api/contact with correct payload; success state triggers the 3D color transition to green (#4caf50) and shows CheckCircle2 confirmation; error state triggers red (#FF7043) and shows AlertCircle; field validation errors from the API are mapped to the correct form fields.

As a Tech Lead, verify the end-to-end integration between the ListProperty frontend sections (PropertyBasicInfo 524a0cf0, PropertyImages f81d311f, PropertyDescription 0b520b0d, PropertyLocation 481d11ec, PropertyPricing 194d32b9, ListingSubmit be0222fd) and the Properties API (backend-properties-api) and Images API (backend-property-images-api). Ensure: multi-step form context accumulates data correctly, image upload POSTs to /api/properties/{id}/images with correct multipart payload, final submission POSTs all fields to /api/properties, and success/error states are handled in the UI.