Frolic-project

As a frontend developer, implement the SplashHero section for the Splash page. Build the `SplashHero` component with a `@react-three/fiber` `Canvas` (camera at `[0,0,8]`, fov 50, alpha background, dpr `[1,1.5]`) containing the `OrbGalaxy` sub-component. `OrbGalaxy` uses `useMemo` to generate 12 `Sphere` instances from `@react-three/drei` with per-sphere randomized position (angle/radius/y), size (0.22–0.67), emissive color from a 12-color palette, and phase offset. Use `useFrame` to animate `groupRef.current.rotation.y` at 0.08 rad/s and `rotation.x` as a sine wave at 0.12 rad/s. Add `OrbitControls` with zoom and pan disabled. Render trust avatar badges (`sh-trust-avatar--1` through `--4` with initials AK/PS/RD/SM) and `framer-motion` entrance animations on hero text. Include `ArrowRight` and `ChevronDown` lucide icons. Apply `SplashHero.css` (7747 chars).

As a frontend developer, implement the SplashFeatures section for the Splash page. Build the `SplashFeatures` component with `useState` for `activeIndex` (default 0) and `linePaths`, and `useRef` for `gridRef` and `cardRefs` array. Implement `computeLinePath` utility that calculates SVG `M x1,y1 L x2,y2` paths between card DOM elements using `getBoundingClientRect` relative to the container. Render an SVG overlay on `gridRef` that draws connection lines from the active card to all other cards, recalculated on `activeIndex` change and window resize via `useCallback recalcLines`. Render the 6-item `features` array (Marathi Voice AI, Route-Aware Matching, Real-Time Tracking, Same-Day Delivery, Secure Payments, Smart Fare Estimation) as interactive cards with emoji icons. Use `framer-motion` `AnimatePresence` for card transitions. Apply `SplashFeatures.css` (4774 chars).

As a frontend developer, implement the SplashVoiceAI section for the Splash page. Build the `SplashVoiceAI` component with `useState` for `playing` (default true) and `transcriptIndex`, and `useRef` for `waveDataRef` (14-element Float array initialized to 0.15). Use `framer-motion` `useAnimationFrame` to animate waveform bar heights: when playing, compute per-bar target from sine waves (time * 2.3 + phase) plus jitter (time * 5.7), lerp `waveDataRef` at 0.25 rate; when paused, decay to 0.1 at 0.08 rate. Cycle `transcriptIndex` through 4 Marathi `TRANSCRIPT_LINES` every 2800ms via `setInterval` (cleared when `playing` is false). Render 4 `FEATURES` bullet points (address extraction, weight detection, hands-free booking, mixed Marathi-English). Include `Mic`, `Check`, `MicOff`, `ArrowRight` lucide icons. Add 3 parallax background orbs (`sv-bg-orb--primary/teal/accent`) and `sv-grid-overlay` with CSS `--scroll` variable transforms. Apply `SplashVoiceAI.css` (9234 chars).

As a frontend developer, implement the SplashHowItWorks section for the Splash page. Build the `SplashHowItWorks` component with `useRef` for `sectionRef`, `framer-motion` `useInView` (once, margin -100px), `useState` for `mobileIndex` and `isMobile`, and `useAnimate` scope. Implement `CountUpNumber` sub-component using `requestAnimationFrame` with cubic ease-out (`1 - Math.pow(1 - progress, 3)`) over 800ms duration, displaying zero-padded 2-digit step numbers. Render the 4-step `STEPS` array (Book Your Delivery, We Match a Driver, Track in Real-Time, Delivered Safely) as a desktop grid and a mobile carousel. Mobile carousel auto-advances every 4000ms via `setInterval`, with `ChevronLeft`/`ChevronRight` manual nav buttons that reset the interval. Use `framer-motion` `AnimatePresence` for step transitions. Apply `SplashHowItWorks.css` (6635 chars).

As a frontend developer, implement the SplashStats section for the Splash page. Build the `SplashStats` component with `useRef` for `sectionRef`, `useState` for `isVisible`, and an `IntersectionObserver` (threshold 0.25, rootMargin '0px 0px -40px 0px') that sets `isVisible` true on first intersection. Implement `CountUpNumber` sub-component using `framer-motion` `useMotionValue`, `useTransform`, and `animate` to count from 0 to target over 2 seconds with cubic bezier `[0.25, 0.1, 0.25, 1.0]`; format decimals with `.toFixed(1)` and integers with `.toLocaleString()`. Render 4 stat cards from the `stats` array: 15000+ Deliveries Completed (`Package` icon), 500+ Active Drivers (`Users` icon), 45+ Areas Covered (`MapPin` icon), 4.8 Average Rating (`Star` icon). Add 3 parallax background orbs (`ss-bg-orb--blue/teal/indigo`) and `ss-grid-overlay` with CSS `--scroll` variable transforms. Apply `SplashStats.css` (3651 chars).

As a frontend developer, implement the SplashCTA section for the Splash page. Build the `SplashCTA` component with `useState` for `particles` array and `particleId` counter, `useRef` for `cardRef`, and `framer-motion` `useMotionValue`/`useSpring` for magnetic hover (`magnetX`, `magnetY` with stiffness 150, damping 15). Implement `handleMouseMove` that computes distance from card center and applies proportional offset (max 12px) within 140px radius, resetting to 0 on `handleMouseLeave`. Implement `burstParticles` that generates 14 particles distributed at equal angles with random radii (60–140px), alternating `scta-particle--blue/teal` CSS classes, added to state and cleaned up after 1000ms timeout. Render a `motion.div` card with `whileHover={{ scale: 1.02 }}` spring transition. Include `ArrowRight`, `MapPin`, `Search` lucide icons. Add 3 parallax orb layers (`scta-orb--blue/teal/accent`) with CSS `--scroll` transforms at -0.2px and -0.35px rates. Use `framer-motion` `AnimatePresence` for particle burst layer. Apply `SplashCTA.css` (7095 chars).

As a frontend developer, implement the Footer section for the Splash page. Build the `Footer` component as a static functional component using `new Date().getFullYear()` for the dynamic copyright year. Render 4 `linkColumns` (Platform, Drivers, Account, Legal) each with 5 navigation links mapped from the `linkColumns` array into `ftr-col` divs inside a `ftr-links` nav. Render the brand block with `Package` lucide icon (strokeWidth 2.2) in `ftr-mark`, wordmark 'Frolic', and a tagline about route-aware Sangli District delivery. Render 4 social icon links (`Twitter`, `Linkedin`, `Facebook`, `Instagram` from lucide-react, strokeWidth 1.8) in `ftr-socials`. Include a `ftr-glow` decorative div. Apply `Footer.css` (4464 chars). Note: this component is shared across pages and may already exist from a previous page implementation.

As a frontend developer, implement the LoginHero section for the Login page. This is a static trust-building hero section rendered via the `loh-root` container. It includes: a trust badge with an animated `loh-trust-dot` pulse indicator and text 'Secure & Reliable Parcel Delivery Across Sangli'; an `h1` headline with a highlighted `loh-headline-accent` span for 'Frolic Logistics'; a subheadline paragraph with bolded 'one-time password' and 'secure authentication' text; and a stats trust strip (`loh-trust-strip`) displaying three `loh-stat` blocks — '500+ Active Drivers', '15,000+ Deliveries Completed', 'Sangli District Coverage' — separated by `loh-stat-divider` elements. No state hooks or interactivity. Note: Navbar component may already exist from the Splash page (task faedc3ef-1974-4be3-b798-0463381cf6e9).

As a frontend developer, implement the LocationInput section for the Booking page. This section manages `pickup`, `dropoff`, `pickupSuggestions`, `dropoffSuggestions`, `activePickupIdx`, `activeDropoffIdx`, `pickupFocused`, `dropoffFocused`, `voiceActive`, and `locating` state via `useState`. Uses `useRef` for `pickupRef`, `dropoffRef`, `pickupListRef`, `dropoffListRef`, and `blurTimeoutRef`. Implements `filterSuggestions` via `useCallback` against `MOCK_SUGGESTIONS` for both `pickup` and `dropoff` types with case-insensitive matching. Renders two autocomplete inputs (MapPin/Navigation icons from lucide-react) with live suggestion dropdowns, keyboard navigation (ArrowUp/Down/Enter), and `ArrowUpDown` swap button. Includes a `LocateFixed` GPS button that sets `locating` state, a `Mic`/`MicOff` toggle for `voiceActive`, and `QUICK_PICKUPS` chip row with four preset labels (Bus Stand, Railway Station, City Mall, Civil Hospital). Manages blur with timeout ref to allow suggestion list clicks.

As a frontend developer, implement the VoiceAIBooking section for the Booking page. This section simulates Marathi Voice AI input with `isListening`, `activeMode` (pickup/dropoff toggle), `transcript`, `confidence`, `language` ('mr'), and `waveHeights` (16-bar array) state. Uses `phraseIndexRef`, `charTimerRef`, and `waveTimerRef` refs. `startSimulation` cycles through 10 `marathiPhrases` (Devanagari script), incrementally types chars via `setInterval` at 80ms, builds random confidence (86–98%), and animates 16 waveform bars using `Math.sin` + noise at 80ms interval. `stopSimulation` clears both intervals and resets wave to flat. `toggleListening` switches between states. Renders a `vab-glow` div that activates on listening, header with `vab-label` showing Pickup/Drop-off mode, language badge, mode toggle tabs, animated waveform bars (`waveHeights` mapped to inline height styles), Devanagari transcript display, confidence meter, and microphone toggle button.

As a frontend developer, implement the ParcelDetails section for the Booking page. Manages `category`, `weight`, and `instructions` state via `useState`. Renders four `CATEGORIES` (documents, small, medium, large) each with emoji icon, English name, Marathi bilingual label (`nameMr`), weight hint range, and three `weightPresets`. `handleCategorySelect` toggles selection (deselects if same category, resets weight). `handleWeightPreset` sets weight to preset value. Renders a `pd-card` with a 📋 header (bilingual subtitle 'पार्सलची माहिती भरा'), a 2×2 `pd-cat-grid` of `pd-cat-option` buttons with `aria-pressed` and `pd-cat-option--selected` class, a weight input field showing preset chips when a category is selected, and a special instructions textarea. Includes `pd-label__bilingual` spans for all field labels.

As a frontend developer, implement the FareEstimateHero section for the FareEstimate page. Build the static hero section using the FareEstimateHero component which renders a decorative background layer with feh-bg containing feh-bg-gradient, three positioned orbs (feh-orb--blue, feh-orb--teal, feh-orb--accent), and a feh-grid overlay. The main feh-content area includes: a badge with animated feh-badge-dot and 'Transparent Pricing Engine' label; an h1 headline with 'Transparent Pricing, Zero Surprises' where 'Zero Surprises' uses feh-headline-accent styled span; a subheadline paragraph; a trust row using lucide-react Check icon with feh-trust-check class showing '500+ drivers' highlight span; and two CTA anchors — feh-btn--primary linking to /Booking with lucide-react ArrowRight icon, and feh-btn--glass linking to /FareSettings. A scroll indicator with feh-scroll-text and feh-scroll-line is rendered at bottom. Import FareEstimateHero.css for all styling. This is the page entry point and depends on Booking page tasks.

As a frontend developer, implement the TrackingHero section for the Tracking page. Build the hero section with animated background orbs (trh-orb--1/2/3), grid overlay (trh-grid), and a live-tracking badge with pulsing dot. Implement dual-mode tracking input using useState for trackingInput, searchStatus (error/success with auto-clear via statusTimeout ref), and activeMode ('booking' | 'phone'). Add mode-switch toggle buttons (handleModeSwitch) that clear input and refocus the inputRef. Render dynamic placeholder text based on activeMode. Implement handleSearch with validation — shows error status on empty, success status on valid input, both auto-dismissed via setTimeout (3000ms / 2200ms). Render four clickable exampleIds chips (FLB-8294-K7MP, 88023-IND-LZ9, etc.) via handleExampleClick that pre-fill input and switch mode. Support Enter key via handleKeyDown. Use useCallback for all handlers. CSS includes 9304 chars of styles. Page-level dependency on Booking page (BookingHero task).

As a frontend developer, implement the MarketplaceHeader section for the Marketplace page. Build the `MarketplaceHeader` component using `useState(true)` for `isOnline` toggle state. Implement `getGreeting()` logic that reads `new Date().getHours()` and returns one of three greeting objects from `greetingOptions` (👋 Good morning, ☀️ Good afternoon, 🌙 Good evening). Render a two-row layout: top row with `.mh-greeting-group` (emoji + welcome text + `driverName` h1) and a toggle button `.mh-status-badge` with dynamic `--offline` modifier class and `.mh-status-dot` indicator. Stats row renders two `.mh-stat-card` elements — one for today's earnings (₹1,240 formatted with `toLocaleString('en-IN')`) with `.mh-stat-icon-wrap--earnings` and one for route info (`Sangli Bus Stand → Miraj Road → Vishrambag`) with `.mh-stat-icon-wrap--route`. Note: check if a shared Navbar/Header component already exists from previous pages before creating new layout wrappers.

As a frontend developer, implement the ActiveDeliveriesMap section for the Delivery page. This section renders a Canvas-based map using canvasRef and requestAnimationFrame (animFrameRef) with an 8-driver deliveryData set (ids D-1042 to D-1049, statuses: in_transit, picked_up, out_for_delivery) and 6 landmark overlays. State includes mapLayer ('street'), liveTracking boolean, zoomLevel, selectedDelivery, drivers array, time counter, and canvasSize. The drawMap callback reads canvas.clientWidth/Height, applies devicePixelRatio scaling, renders road network paths, landmark labels, driver pins with status-colored markers, pickup/dropoff icons, and animated route lines. Stats bar shows active/pickingUp/inTransit/outForDelivery counts. Controls include map layer toggle, live tracking toggle, and zoom buttons. Apply ActiveDeliveriesMap.css with responsive canvasSize via ResizeObserver.

As a frontend developer, implement the DeliveryFiltersBar section for the Delivery page. This section manages multi-filter state: status (STATUS_OPTIONS: all/pending_pickup/in_transit/delivered/cancelled), driverQuery string, driverSelected string, area (AREA_OPTIONS: 9 Sangli-district zones), dateFrom/dateTo strings, and category (CATEGORY_OPTIONS: 9 parcel types). Includes a driver autocomplete component with driverFocus/driverHover state, filteredDrivers computed from DRIVER_DATASET (12 names), keyboard navigation support, and outside-click handler via useEffect on document. activeFilterCount badge counts non-default filter values. clearAll useCallback resets all state. Autocomplete uses driverRef and autocompleteRef. Apply DeliveryFiltersBar.css with class prefix 'dfb-'.

As a frontend developer, implement the DeliveryStatsBar section for the Delivery page. This section renders 4 STATS cards (active=86, eta=32min, onTime=94%, drivers=42%) each with an SVG icon, trend badge (trendDir: up/down), and a showPulse live indicator for the active stat. The AnimatedValue sub-component uses requestAnimationFrame with cubic-ease easing over 1400ms, tracking hasAnimated via useState to prevent re-animation, and renders '—' until revealed. The parent DeliveryStatsBar uses useState(revealed=false), rootRef, and observerRef. IntersectionObserver sets revealed=true on intersection. isAccent prop applies 'dsb-value--accent' class variant. Apply DeliveryStatsBar.css with class prefix 'dsb-'. The first stat card shows a pulse animation via showPulse flag.

As a frontend developer, implement the EarningsHero section for the Earnings page. This section renders a full-width hero with animated background decorative layers (eh-bg-orb--1, eh-bg-orb--2, eh-bg-grid). Implement three-period toggle (PERIODS: 'this-month', 'last-month', 'all-time') using useState('this-month') that switches the displayed EARNINGS_DATA object — showing amount, change, deliveries, rating, tips, hours. Render a greeting block with Wallet icon (lucide-react, size 22) and driver name 'Rajesh Patil'. Implement four stat badges (BADGES array) for deliveries, rating, tips, hours using Package, Star, Gift, Clock icons with distinct iconClass modifiers. Add a mouse-glow effect using useRef(earningsRef), useCallback handlers (handleMouseMove, handleMouseEnter, handleMouseLeave) tracking glowPos state and glowVisible state for a CSS radial spotlight. formatBadgeValue helper formats rating to 2 decimals, tips with ₹ prefix, others with toLocaleString(). Import from '../styles/EarningsHero.css'. Note: this component is new to the Earnings page and establishes the hero branding.

As a Backend Developer, implement customer profile management API endpoints using FastAPI. Create GET /customers/me (fetch authenticated customer profile), PUT /customers/me (update personal info: name, email, dob, gender), GET /customers/me/addresses (list saved addresses), POST /customers/me/addresses (add address), PUT /customers/me/addresses/{id} (update address), DELETE /customers/me/addresses/{id} (delete address), GET /customers/me/payment-methods (list saved payment methods), POST /customers/me/payment-methods (add method), DELETE /customers/me/payment-methods/{id} (remove method), PUT /customers/me/notification-preferences (update notification toggles). All endpoints require JWT authentication middleware. Note: frontend tasks ProfileHeader (68dbb9e0), PersonalInfo (31970303), AddressBook (bb55091c), PaymentMethods (454f41aa), NotificationPreferences (9b3ea1d9) depend on these.

As a Backend Developer, implement driver profile and status management API endpoints using FastAPI. Create GET /drivers/me (fetch driver profile), PUT /drivers/me (update driver info), PUT /drivers/me/status (set online/offline status), GET /drivers/me/earnings (earnings dashboard with period filter: this-month/last-month/all-time, returns amount, deliveries, rating, tips, hours), GET /drivers/me/earnings/breakdown (category breakdown for doughnut chart), GET /drivers/me/earnings/chart (time-series earnings data for bar chart, supports 7d/30d/90d periods), GET /drivers/me/earnings/withdrawal-history (list with status filter), POST /drivers/me/earnings/withdraw (initiate withdrawal with method: bank/upi and amount). Note: frontend tasks DriverHero (f970d0be), DriverOnlineStatus (162cbf64), DriverEarnings (cb2a8bc3), EarningsHero (50f85810), EarningsChart (b43385ab), EarningsMetrics (cfbb3a83), EarningsBreakdown (6f4fb0a7), EarningsWithdrawal (9882cb94) depend on these.

As a Backend Developer, implement KYC document submission and verification API endpoints using FastAPI. Create POST /drivers/me/kyc/aadhaar (upload Aadhaar card with number, name, DOB, front/back images as multipart form), POST /drivers/me/kyc/driving-license (upload DL with number, name, expiry, image), POST /drivers/me/kyc/rc (upload Registration Certificate with vehicle number, owner name, expiry, image), GET /drivers/me/kyc/status (fetch KYC verification status for all documents: submitted/under_review/verified/rejected with rejection reasons), GET /admin/kyc/pending (list pending KYC submissions with pagination - admin only), PUT /admin/kyc/{id}/approve (approve document - admin only), PUT /admin/kyc/{id}/reject (reject with reason - admin only). Store uploaded files in S3-compatible object storage. Note: frontend tasks KYCDocumentUpload (7985df50), KYCVerificationStatus (ad10b656), DriverKYCPrompt (1b5ca736) depend on these.

As a Backend Developer, implement fare configuration management API endpoints using FastAPI (admin only). Create GET /fare-settings/structure (fetch base fare, per-km rate, per-kg rate, category modifiers), PUT /fare-settings/structure (update fare structure), GET /fare-settings/distance-slabs (fetch distance-based pricing tiers), POST /fare-settings/distance-slabs (add new slab), PUT /fare-settings/distance-slabs/{id} (update slab), DELETE /fare-settings/distance-slabs/{id} (delete slab), GET /fare-settings/weight-slabs (fetch weight-based charge tiers), POST /fare-settings/weight-slabs, PUT /fare-settings/weight-slabs/{id}, DELETE /fare-settings/weight-slabs/{id}, GET /fare-settings/category-rates (fetch category multipliers), PUT /fare-settings/category-rates/{id}, GET /fare-settings/peak-modifiers (fetch peak hour multiplier periods), POST /fare-settings/peak-modifiers, PUT /fare-settings/peak-modifiers/{id}, DELETE /fare-settings/peak-modifiers/{id}, POST /fare-settings/preview (calculate estimated fare for test inputs). All require admin JWT. Note: frontend tasks FareStructurePanel (64f17502), DistanceSlabRates (144b6e17), WeightBasedCharges (88a10423), CategoryWiseRates (27583813), PeakHourModifiers (dc3252b0), ActionButtonsPanel (b41b2e9b), FareSettingsHeader (99fa5f11) depend on these.

As a Backend Developer, implement push notification management API endpoints using FastAPI. Create GET /notifications (fetch paginated notification list for authenticated user with filters: category=delivery/account/promotions, sortBy=newest/oldest/unread), PUT /notifications/{id}/read (mark single notification as read), PUT /notifications/read-all (mark all notifications as read), DELETE /notifications/{id} (delete single notification), DELETE /notifications/clear-all (delete all user notifications), POST /notifications/register-device (register FCM device token for push notifications), POST /internal/notifications/send (internal endpoint to dispatch Firebase push notification to user/topic). Integrate Firebase Admin SDK for FCM push delivery. Integrate SMS gateway (e.g., Twilio/Msg91) for SMS fallback. Note: frontend tasks NotificationsHeader (c4b8e49f), NotificationsFilter (7e3fbf97), NotificationsList (9d214d45), NotificationsCTA (2a45bd38) depend on these.

As an AI Engineer, implement the Marathi Voice AI API endpoint using FastAPI. Create POST /voice-ai/transcribe (accepts audio file as multipart/form-data, returns Marathi speech-to-text transcript with confidence score), POST /voice-ai/extract (accepts transcript text, uses NLP/LLM to extract: pickup address, drop address, delivery instructions, parcel category, weight from spoken Marathi input; returns structured JSON with extracted fields and confidence scores). Integrate with a Marathi-capable STT service (e.g., Google Cloud Speech-to-Text with hi-IN/mr-IN models, or a fine-tuned Whisper model). Implement address normalization against Sangli district location database. Support mixed Marathi-English (code-switched) input. Note: frontend tasks VoiceAIHero (ae5cedb6), VoiceAIDemo (4803f8b2), VoiceAIWorkflow (dfc78cc3), VoiceAILanguageSupport (c672ba43), VoiceAIBooking (982f3953), LocationInput (4197871c) depend on these.

As a Backend Developer, implement Razorpay payment processing integration using FastAPI. Create POST /payments/create-order (create Razorpay order for booking fare, returns order_id and amount for frontend SDK), POST /payments/verify (verify Razorpay payment signature after successful payment, update booking payment_status), POST /payments/webhook (handle Razorpay webhook events: payment.captured, payment.failed, refund.created), POST /payments/refund (initiate refund for cancelled bookings). Implement Razorpay Payout API integration for driver settlement disbursements to bank accounts/UPI. Store payment records with booking_id, razorpay_order_id, razorpay_payment_id, status, method (UPI/card/netbanking/COD), amount. Note: frontend tasks BookingConfirmation (244598bc), SettlementsPayoutModal (22867993) depend on these.

As a Backend Developer, implement JWT authentication and authorization middleware for the FastAPI backend. Create: JWT token generation utility (access token 15-minute TTL, refresh token 7-day TTL using PyJWT), FastAPI dependency get_current_user() that validates Bearer token from Authorization header and returns user object, role-based authorization dependencies: require_customer(), require_driver(), require_admin() that check user.role against allowed roles and raise HTTP 403 on mismatch, optional_user() for public endpoints that optionally identify the caller. Implement token blacklist using Redis for logout/refresh revocation. Configure CORS middleware allowing the React frontend origin. Add request logging middleware. Add rate limiting middleware using slowapi. This is a cross-cutting concern used by all protected API endpoints.

As a frontend developer, implement the LoginForm section for the Login page. This is a multi-step interactive OTP authentication form with three steps managed via `useState('phone' | 'otp' | 'success')`. Step 1 (phone): a country code dropdown (`countryOpen` state, `countryRef` for outside-click detection via `useEffect` + `document.addEventListener('mousedown')`) populated from a `countryCodes` array of 6 entries (India, US, UK, UAE, Saudi Arabia, Qatar) each with flag emoji, name, and dial code; a phone input limited to 10 digits using `handlePhoneChange` with `formatPhone` callback (formats as 'XXXXX XXXXX'); form submission via `handleRequestOTP` which validates 10-digit length, simulates API call with 1200ms `setTimeout`, then transitions to OTP step and starts `resendTimer` at 30 seconds. Step 2 (otp): a 6-cell OTP input grid managed via `otp` array state and `otpRefs` array ref, with auto-focus on the first cell (`useEffect` on step change), `handleOtpChange` for digit entry and auto-advance, keyboard navigation. Resend countdown driven by `useEffect` + `setInterval` decrementing `resendTimer`. `loading` state controls submit button disabled/spinner state. `error` state displays inline validation messages. Step 3 (success): confirmation state. Constants: `OTP_LENGTH = 6`, `RESEND_COOLDOWN = 30`. Involves simulated API calls — enable test_agent for backend integration readiness.

As a frontend developer, implement the LoginAlternative section for the Login page. This is a static navigation alternatives section rendered inside `la-root > la-inner`. It contains: a styled divider row (`la-divider-row`) with two `la-divider-line` spans flanking a `la-divider-label` reading 'Other access options'; a CTA button group (`la-cta`) with three anchor tags — `la-cta__btn--signup` linking to '/Register' with '✨ New to Frolic? Sign Up', `la-cta__btn--driver` linking to '/DriverLogin' with '🚛 Driver Login', and `la-cta__btn--admin` linking to '/AdminLogin' with '🛡️ Admin Portal'; a bottom divider span (`la-divider-bottom`); and a guest access row (`la-guest`) with an anchor to '/Tracking' labeled '👁️ Continue as Guest'. No state or interactivity — pure navigation links with CSS styling.

As a frontend developer, implement the OTPHero section for the OTP page. This section renders a full-page hero using the `oth-root` layout with three decorative animated orbs (`oth-orb--1`, `oth-orb--2`, `oth-orb--3`) inside `oth-bg`, plus a CSS grid overlay (`oth-grid`). The content area includes: a badge with an animated `oth-badge-dot` and 'Secure Verification' label; an h1 headline with an `oth-headline-accent` span for 'your phone'; a subheadline paragraph; a phone card (`oth-phone-card`) displaying a Phone icon from lucide-react, the static number '+91 98765 43210', and a Pencil icon edit button (`oth-edit-btn`) linking to `/Login`; and a hint paragraph with a bold wait instruction. Import from `lucide-react`: `Phone`, `Pencil`. Apply `OTPHero.css` (7698 chars). Note: This is the entry section for the OTP page — check if a shared Navbar component exists from the Login/Splash pages before creating a new one.

As a frontend developer, implement the OTPForm section for the OTP page. This is a complex interactive form component with the following state: `otp` (array of 6 digits), `activeIndex` (currently focused input), `cardState` ('default' | 'error' | 'success'), `fieldStates` (per-digit state array), `message` (text + type), `timer` (countdown from 30), `timerExpired`, `submitting`, and `verified`. Key behaviors: (1) A `useEffect` drives a 1-second countdown timer — when it hits 0, `timerExpired` is set true and resend is unlocked. (2) A second `useEffect` auto-focuses the input at `activeIndex` via `inputRefs` (array of refs). (3) `handleChange` (useCallback) strips non-digits, advances `activeIndex` on fill, resets `cardState` from 'error' on new input. (4) `handleKeyDown` (useCallback) handles Backspace (clears current digit or moves to previous) and arrow-key navigation. OTP_LENGTH=6, INITIAL_TIMER=30, MASKED_PHONE='+91 987** 43210'. Icons from lucide-react: `ShieldCheck`, `CheckCircle`, `ArrowRight`. Apply `OTPForm.css` (8621 chars). This section is independent of OTPHero and can be built in parallel.

As a frontend developer, implement the OTPSupport section for the OTP page. This section uses `openIndex` state (useState, null default) to manage an accordion FAQ with 3 static FAQ_ITEMS (questions: 'Didn't receive the OTP?', 'What if my phone number is wrong?', 'How long is the OTP valid?'). The `toggleFaq(index)` handler sets openIndex to the clicked index or null if already open. Layout includes: (1) a help text block with an inline 'Resend OTP' button (onClick handler stubbed with a comment for parent integration); (2) a divider with label 'or verify via'; (3) two alternate method buttons (`os-alt-btn`) with `Phone` and `MessageCircle` icons from lucide-react for 'Get a Call' and 'WhatsApp'; (4) an FAQ accordion where each item gets `os-faq-item--open` and `os-faq-body--open` CSS classes when open, and a `ChevronDown` icon rotates via CSS. Also includes a `Headphones` import from lucide-react (used in the support card area). Apply `OTPSupport.css` (4104 chars). This section is independent of OTPHero and OTPForm and can be built in parallel.

As a frontend developer, implement the Sidebar section for the Dashboard page. Build the collapsible navigation sidebar using useState for mobileOpen, collapsed, and expanded group states. Implement NAV_GROUPS configuration with 5 groups (Overview, People, Verification, Operations, Finance) each containing labeled nav items with lucide-react icons (LayoutDashboard, Users, IdCard, Package, Wallet). Implement getActivePath() to read window.location.pathname and auto-expand the active group on mount. Add mobile top bar with hamburger toggle (Menu/X icons), backdrop overlay with sb-backdrop/sb-open classes, and aside drawer with sb-open class for mobile. Implement desktop collapse toggle using PanelLeftClose icon and sb-collapsed CSS class on sb-root. Add ChevronRight rotation animation for group expand/collapse. Apply useEffect to lock body scroll when mobileOpen is true. Note: This is a new shared sidebar component that will be reused across all admin pages.

As a frontend developer, implement the FareEstimation section for the Booking page. Manages `breakdownOpen`, `slideKey`, and `hasData` state. Uses a `CSS_FE` constants map for all BEM class names. Renders static `fareBreakdownItems` (base ₹29, distance ₹42 for 8.5km, weight ₹15 for 3kg, urgency ₹20) with total computed via `reduce`. An 8-second `setInterval` increments `slideKey` for periodic re-render animation. Implements a collapsible `fe-breakdown` panel toggled by `breakdownOpen` (chevron `fe-toggle-icon--open` class), with `fe-breakdown--open` class driving CSS transition. Each breakdown item has a colored `fe-breakdown-dot` (base/weight/urgency/distance variants). Renders `fe-total-preview` with large fare amount, a `fe-surcharge-row` notice, and `fe-disclaimer` text. Implements empty-state (`fe-empty`) and skeleton-loading states (`fe-skeleton`, `fe-skeleton--lg/sm/md`) when `!hasData`.

As a frontend developer, implement the FareInputForm section for the FareEstimate page. Build the interactive form component using useState hooks for: pickup, drop, category, weight (form values); pickupSuggestions, dropSuggestions, pickupFocused, dropFocused (autocomplete state); pickupField, dropField, categoryField, weightField using FIELD_STATE enum (idle/touched/valid/error) for per-field validation feedback; and voiceEnabled toggle. Use useRef for pickupRef, dropRef, pickupListRef, dropListRef to manage outside-click dismissal of suggestion dropdowns via a mousedown document listener in useEffect. Implement LOCATION_SUGGESTIONS array (10 Sangli-area locations) for autocomplete on pickup and drop fields. Implement PARCEL_CATEGORIES constant (documents, fragile, perishable, heavy) for a select dropdown. Implement useCallback-based validators: validatePickup (min 5 chars), validateDrop (min 5 chars + not equal to pickup), validateCategory (truthy check), validateWeight (numeric, >0, <=500). Import FareInputForm.css for all field states, suggestion list, and validation styling.

As a frontend developer, implement the FareBreakdown section for the FareEstimate page. Build the animated fare breakdown component using useState for animatedValues object (base, distance, weight, category, taxes, total all starting at 0) and copied boolean; useRef for sectionRef and animFrameRef; useCallback for animateValues which runs an 800ms ease-out cubic requestAnimationFrame loop interpolating from 0 to target values (base: 29.00, distance: 49.20, weight: 17.50, category: 15.00, taxes: 19.93, total: 130.63). Use IntersectionObserver with threshold 0.25 on sectionRef to trigger animateValues once (guarded by hasAnimated state). Render fareData array of 4 line items each with lucide-react icons (Package, MapPin, Scale, Layers) and animated currency values. Render taxLine (GST & Platform Fee 18%, 19.93) and a total row showing animated total of 130.63. Implement handleCopy using navigator.clipboard.writeText to copy total amount string, toggling copied state for 2s to swap lucide-react Copy/Check icons. Show deliveryTime '25–35 min' with lucide-react Clock icon and a Receipt icon for the card header. Import FareBreakdown.css.

As a frontend developer, implement the PricingTiers section for the FareEstimate page. Build the static pricing reference component rendering a pt-section with pt-inner wrapper. Render a pt-header with label 'Pricing', h2 title 'How We Calculate Your Fare', and subtitle paragraph. Render a pt-grid containing three cards: (1) pt-card--distance mapping distanceTiers array (5 entries: 0–3km ₹25 base, 3–8km ₹8/km, 8–15km ₹7/km, 15–30km ₹6/km, 30+km ₹5.50/km) as pt-tier-item list items with range, rate, and note; (2) a weight card mapping weightTiers array (5 entries with surcharge percentages 0%, +15%, +30%, +50%, +80%); (3) a category card mapping categoryPremiums array (5 entries: Documents +0%, Regular +5%, Fragile +20%, Perishable +25%, Heavy +35%) each with emoji, label, premium badge, note, and color variant class. All data is static — no state or effects required. Import PricingTiers.css for card grid layout, tier-item rows, and color variants (blue, teal, amber).

As a frontend developer, implement the TrackingMap section for the Tracking page. Build a canvas-based animated map using canvasRef and containerRef with a requestAnimationFrame render loop that handles DPR-aware resizing. Canvas draws: horizontal/vertical street grid lines (rgba(255,255,255,0.04)), a diagonal major street, and block shapes as city blocks. Render two SVG map pins (PICKUP at cx=0.22/cy=0.52 in green #22c55e, DROPOFF at cx=0.72/cy=0.35 in red #ef4444). Animate driverPos (useState, starting at 0.42/0.58) and currentPos (0.55/0.42) along the route. Display live eta (14 min) and distance (3.8 km) stats. Implement zoom controls (zoomIn/zoomOut via useCallback, clamped 0.6–2.0, step 0.15) and pan state. Cancel animation frame on cleanup. CSS includes 7669 chars of map panel styles.

As a frontend developer, implement the TrackingStatus section for the Tracking page. Build a three-column status card (ts-card) with fade-in via visible state (opacity 0→1, triggered by a 100ms useEffect timer). Left column (ts-booking): displays bookingId 'FLB-2024-08742', parcel category 'Documents' with weight '2.4 kg', and destination 'Miraj Road, Sangli' with emoji row icons. Center column (ts-status): renders a dynamic status badge (ts-status__badge--in-transit) with a pulsing ts-status__pulse span and animated icon class (ts-status__icon--active for 'in-transit'/'pickup' statuses), plus ETA display at '12:45 PM'. Right column (ts-driver): driver avatar with initials 'RP', name 'Rajesh Patil', vehicle 'Bajaj Pulsar - MH 10 AB 3456', and rating 4.8. Mobile dividers (ts-divider) between columns. Status icon map covers pickup/in-transit/delivered/cancelled states. CSS includes 8692 chars.

As a frontend developer, implement the TrackingDetails section for the Tracking page. Build an accordion-style details panel with six detailGroups (pickup, dropoff, parcel, sender, receiver, instructions) driven by expandedId useState (default 'pickup'). Each group card uses lucide-react icons (MapPin, Navigation, Package, User, Phone, FileText, Scale, Tag) for the group header icon and per-field icons. toggleCard collapses the active card or expands the clicked one (toggle behavior). Each expanded card renders a list of fields with their icon and text. Data includes full Sangli-district addresses (e.g., 'Miraj Road, Near Civil Hospital, Ganapati Peth, Sangli - 416410'), parcel dimensions (30cm×22cm×3cm), sender 'Rajesh Balasaheb Patil', receiver 'Aniket Subhash Deshmukh', and special instructions ('do not fold or bend', delivery window 2–5 PM). CSS includes 6163 chars.

As a frontend developer, implement the TrackingTimeline section for the Tracking page. Build a vertical timeline with six milestones (placed→confirmed→picked_up→in_transit→out_for_delivery→delivered) using IntersectionObserver to progressively reveal nodes (ttl-node elements with data-index) into visibleNodes Set as they scroll into view (threshold 0.25, rootMargin '-40px'). Animate a track fill bar (trackFill state 0–100%) via scroll event listener that calculates progress based on trackRef getBoundingClientRect relative to window height. Each milestone node has a status (completed/active/pending), emoji icon (📋✅📦🚚📍🏁), title, description, and timestamp — pending items show '--:-- --'. The 'in_transit' milestone is active. All observers and scroll listeners are cleaned up on unmount. CSS includes 5495 chars.

As a frontend developer, implement the TrackingSupport section for the Tracking page. Build a support CTA strip with three action cards (trs-card) — 'Call Driver' (Phone icon), 'Contact Support' (MessageCircle icon), and 'Reschedule Delivery' (Calendar icon) — all from lucide-react. Each card is an anchor tag linking to '/Tracking'. Manage activeCard state (useState null) via onMouseEnter/onMouseLeave per card to toggle icon color between var(--primary) and var(--primary-light) with 0.25s ease transition on the Icon's color prop. Each card displays label and sublabel text. Section heading reads 'Need help? We're here for you.' with trs-heading-accent span on the second part. CSS includes 3660 chars of card grid styles.

As a frontend developer, implement the `FilterBar` component for the Marketplace page. Manage five state variables via `useState`: `distance`, `weight`, `payment` (null by default, single-select chip filters), `sort` ('newest'), and `sortOpen`/`mobileOpen` booleans. Use `useRef(null)` on the sort dropdown container and wire a `useEffect` `mousedown` outside-click listener to close it. Render three chip groups — Distance (0-5 km, 5-15 km, 15-30 km, 30+ km), Weight (Up to 2 kg, 2-5 kg, 5-10 kg, 10+ kg), Payment (Prepaid, COD, Wallet) — each chip gets `.fb-chip--active` when its value matches state. Build an `activeFilters` derived array and render removable active-filter tags with `lucide-react` `X` icon via `removeFilter(type)`. Include a sort dropdown with options Newest First / Closest First / Highest Fare and a mobile drawer toggle via `.mobileOpen` state. Implement `clearFilters()` to reset all three filter states to null.

As a frontend developer, implement the `EarningsSummary` component for the Marketplace page. Register `chart.js` modules: `CategoryScale`, `LinearScale`, `PointElement`, `LineElement`, `Filler`, `Tooltip`. Use `useState` for animated counters (`counts`: deliveries/earnings/average all starting at 0), `chartVisible` boolean, and `payoutProgress` number. Use `useRef` for `sectionRef` and `hasAnimated` guard. Implement `IntersectionObserver` at `threshold: 0.25` on `sectionRef` to trigger `animateCounters()` — a 1800ms eased counter animation over 50 steps using cubic ease-out (`1 - Math.pow(1 - progress, 3)`) targeting `STATS_TARGETS` (deliveries: 42, earnings: ₹12,850, average: ₹306). On intersection also set `chartVisible(true)` and after 400ms set `payoutProgress` to 72. Render a `<Line>` chart from `react-chartjs-2` with `EARNINGS_DATA` (Mon–Sun), blue border (`#3b82f6`) and a linear gradient fill via canvas context. Display stat cards with `lucide-react` icons: `TrendingUp`, `Package`, `IndianRupee`, `Clock`, `Wallet`, `Calendar`. Render payout info card with a CSS progress bar animating to 72%.

As a frontend developer, implement the DeliveryDetailHeader section for the DeliveryDetail page. This section renders a sticky header with: (1) a back navigation link to /Deliveries with an SVG chevron icon, (2) a top row showing DELIVERY_ID ('FLD-8472-0916') and a dynamic status badge with CSS modifier class `ddh-status--{status}` and a pulsing dot (`ddh-status__dot--pulsing`) for active statuses, (3) a meta row with calendar SVG icon showing booked timestamp, and (4) a 4-column metrics grid displaying Estimated Arrival, Distance, Parcel Weight, and Fare with highlight styling. Uses `useState` for elapsed time and `useEffect` with a 30-second `setInterval` to compute a live elapsed time string (e.g. '2h 15m ago') from a base date of 2026-06-24T09:35:00. Import `DeliveryDetailHeader.css` for all `ddh-*` BEM class styles.

As a frontend developer, implement the DeliveryListTable section for the Delivery page. This section renders a sortable table of 12 DELIVERIES records (ids FL-10-MH-4951 to FL-10-MH-4962) with fields: id, driverName/driverInit, pickup, drop, STATUS map (pending/in_transit/delivered/cancelled with cls variants), progress (0-100), and eta. State includes sortField (from SORT_FIELDS array of 7 fields), sortDir ('asc'/'desc'), and activeRow. useMemo computes sortedDeliveries via case-insensitive string/numeric comparison. Each row renders a driver avatar using driverInit initials, a status badge with cls-based styling, a progress bar with percentage fill, and ETA text. Column headers are clickable to toggle sort direction with visual indicators. Apply DeliveryListTable.css with class prefix 'dlt-'.

As a frontend developer, implement the EarningsMetrics section for the Earnings page. Render four metric cards from METRICS array (total_earnings, active_deliveries, average_rating, withdrawal_balance) with DollarSign, Package, Star, Wallet icons from lucide-react. Each card displays value, meta, trend badge (TrendingUp/TrendingDown/Minus icons based on trendDir), and a sparkline bar chart rendered via renderSparkline() — 16-bar mini bar chart with height computed as (val/max)*100%. Implement IntersectionObserver with threshold 0.15 using sectionRef and hasRevealed ref — on intersection stagger-reveals cards using setVisibleCards with 120ms setTimeout delays per card index (i*120). Also render QUICK_STATS row (3 items: Deliveries This Week, Tips Earned, Bonus Incentives) with accent color variants. Import from '../styles/EarningsMetrics.css'.

As a frontend developer, implement the EarningsChart section for the Earnings page. Register Chart.js modules (CategoryScale, LinearScale, BarElement, Tooltip, Filler) via ChartJS.register and render a Bar chart using react-chartjs-2. Implement dual toggle controls: PERIODS ('7d', '30d', '90d') and VIEWS ('daily', 'weekly', 'monthly'). Use generateDailyData(days) to produce synthetic time-series with sine-wave variance; aggregate via aggregateWeekly() (7-day chunks, W1/W2 labels) and aggregateMonthly() (group by month label). Compute trend with computeTrend() — compares first-half vs second-half averages, returns pct and direction ('up'/'down'). Track state: period, view, chartData, trend, range (min/max/avg), animating. Use useCallback buildData() with prevKeyRef to detect period/view key changes and trigger animating state during transitions. Display TrendingUp/TrendingDown icons and trend pct badge. Import from '../styles/EarningsChart.css'.

As a frontend developer, implement the EarningsBreakdown section for the Earnings page. Register ArcElement, Tooltip, Legend via ChartJS.register and render a Doughnut chart from react-chartjs-2 with data from CATEGORIES array (deliveries 62%, bonuses 23%, referrals 9%, tips 6%) using colors #3b82f6, #2dd4bf, #6366f1, #fbbf24. Render four expandable category cards with Package, Gift, Users, ThumbsUp icons — each card has a progress bar (ebd-cat-bar-fill with category-specific class), percentage, amount (₹ formatted), and count label. Implement accordion expand/collapse via expanded state (setExpanded toggles null vs category id) with ChevronDown rotation. Implement IntersectionObserver on sectionRef with hasAnimated ref — on intersection animate percentage bars from 0 to target using 40-step setInterval per category. Render a details list inside expanded card showing sub-breakdown rows. Import from '../styles/EarningsBreakdown.css'.

As a frontend developer, implement the EarningsWithdrawal section for the Earnings page. Render a two-column top row: left is an available-balance card showing ₹12,450 available and ₹3,250 pending with Wallet icon; right is a withdrawal form with method toggle (method state: 'bank' | 'upi') using Building2, Smartphone, Landmark icons for Bank Transfer/UPI/NEFT options, a controlled withdrawAmount input, and a handleWithdraw() handler that validates positive non-empty amount. Render WITHDRAWAL_HISTORY list (5 items) with filter tabs (activeFilter state: 'all', 'completed', 'pending', 'failed') — filteredHistory filters by status. Each history row shows date, time, amount, method, ref (TXN number), and a status badge using STATUS_CONFIG (CheckCircle2 for completed, AlertCircle for pending, XCircle for failed) with distinct className modifiers eaw-badge--completed/pending/failed. Import from '../styles/EarningsWithdrawal.css'.

As a frontend developer, implement the EarningsIncentives section for the Earnings page. Render four incentive cards from the incentives array using Trophy, Zap, Star, Gift icons — each card shows tier badge (einc-card-badge--gold/active/silver/new), title, reward amount, description, and a CTA button. Cards with progress > 0 and target > 0 render a progress bar (e.g., 7/10 deliveries, 92/100 milestone). The 'new-driver-ramp' card has done=true and renders a completed state. Implement IntersectionObserver on rootRef with threshold 0.1 that sets visible state to true on intersection (one-shot via observer.disconnect()). Render a referral section with a Copy/Check icon toggle — handleCopy() writes REFERRAL_LINK ('https://frolic.app/driver/join?ref=DRV-KOLH-0742') to clipboard via navigator.clipboard.writeText, sets copied state true for 2500ms then resets. Use Link2 icon for referral link display. Background has two decorative einc-bg-orb elements. Import from '../styles/EarningsIncentives.css'.

As a frontend developer, implement the EarningsFAQ section for the Earnings page. Render an accordion FAQ using framer-motion AnimatePresence + motion components for animated expand/collapse. Implement AccordionItem sub-component accepting item, isOpen, onToggle, index props — each item shows question, ChevronDown icon (rotates on open), and animated answer panel. Manage openId state (useState(null)) in parent EarningsFAQ that tracks which FAQ item is expanded (toggle: setOpenId(id === openId ? null : id)). Render 4 FAQ items from faqItems array: 'How are earnings calculated?' (highlights: Base Fare, Distance Rate, Weight Surcharge, Peak Multiplier), 'When can I withdraw?' (24-Hour Settlement, UPI & Bank Transfer), 'What are completion bonuses?' (₹250/₹500/₹1,000/₹2,000 tiers), 'How do referrals work?' (₹500 per Referral, ₹300 Welcome Bonus). Each answer includes a highlights chip row rendering the highlights array as pill badges. Render HelpCircle icon in section header and an ArrowRight CTA. Import from '../styles/EarningsFAQ.css'.

As a Backend Developer, implement booking/parcel delivery API endpoints using FastAPI. Create POST /bookings (create booking with pickup/drop locations, sender/receiver details, parcel category, weight), GET /bookings/{id} (fetch booking details), GET /bookings/me (customer booking history with pagination, filters by status/date), PUT /bookings/{id}/status (update delivery status - driver only), POST /bookings/{id}/proof-of-delivery (upload POD image - driver only), GET /bookings/{id}/tracking (real-time tracking data with driver location, ETA, timeline). Implement fare calculation engine: base fare + distance rate (per km slab) + weight surcharge + category premium + peak hour multiplier + GST. Integrate Google Maps Distance Matrix API for distance/ETA calculation. Note: frontend tasks BookingConfirmation (244598bc), LocationInput (4197871c), ParcelDetails (73bcd6d2), FareEstimation (953cd760), BookingSummary (4765c79a), HistoryTimeline (d38cc38b) depend on these.

As a Backend Developer, implement driver settlement and payout management API endpoints using FastAPI (admin only). Create GET /admin/settlements (list all settlements with pagination, filters: searchQuery, dateFrom, dateTo, status; returns driver name, earned, settled, pending, date, status), GET /admin/settlements/summary (dashboard summary cards: total pending amount, total settled this month, success rate, next payout date), POST /admin/settlements/{driver_id}/payout (initiate manual payout: validate driver bank details, compute commission deduction at configurable rate, record settlement record, trigger Razorpay payout API), GET /admin/settlements/{id} (fetch single settlement details for modal), GET /drivers/me/settlements (driver's own settlement history). Note: frontend tasks SettlementsHeader (420381ca), SettlementsSummaryCards (0fbd27c6), SettlementsTransactionTable (701ee96c), SettlementsPagination (78036ac3), SettlementsPayoutModal (22867993), SettlementsFiltersAndSearch (24fd08fe) depend on these.

As a Backend Developer, implement admin customer management API endpoints using FastAPI. Create GET /admin/customers (list all customers with pagination, search across name/email/phone/id, filters: status/dateFrom/dateTo/orderMin/orderMax/location, sort by multiple fields), GET /admin/customers/{id} (fetch single customer with full details), PUT /admin/customers/{id}/status (activate/deactivate customer), POST /admin/customers (create new customer account), DELETE /admin/customers/{id} (soft delete customer), GET /admin/customers/stats (aggregate stats: total, active, inactive counts, avg order value), POST /admin/customers/bulk-email (send bulk email to filtered customer set), GET /admin/customers/issues (list pending customer issues), PUT /admin/customers/issues/{id}/resolve (mark issue resolved). Note: frontend tasks CustomersHero (a0edcb54), CustomersStats (95d89f59), CustomersFilters (5afc23b9), CustomersTable (3ed6120d), CustomerActions (e4c0a809) depend on these.

As a Tech Lead, verify the end-to-end integration between the OTP authentication frontend (LoginForm, OTPForm, OTPHero) and the backend OTP Auth API. Ensure phone number submission triggers OTP via SMS, OTP verification returns JWT tokens that are stored in browser (localStorage/cookie), protected routes redirect to login when unauthenticated, and the refresh token flow correctly renews sessions. Validate that the 30-second resend countdown matches backend rate limiting behavior.

As a Tech Lead, verify the end-to-end integration between the KYC page frontend (KYCDocumentUpload, KYCVerificationStatus, KYCHero, DriverKYCPrompt) and the KYC Document API. Ensure multipart file uploads succeed with progress indicators, form validation errors map correctly to API error responses, document status polling/refresh works on the verification status page, admin KYC approval/rejection updates the driver's status in real time, and rejected documents display the rejection reason with re-upload capability.

As a Tech Lead, verify the end-to-end integration between the Marathi Voice AI frontend (VoiceAIBooking, VoiceAIDemo) and the Voice AI API. Ensure audio captured from the microphone is correctly sent to the /voice-ai/transcribe endpoint, the transcript is displayed in real time with confidence score, the /voice-ai/extract endpoint correctly parses Marathi addresses and fills the booking location fields, and mixed Marathi-English input is handled gracefully. Validate the complete flow from speech to pre-filled booking form.

As a Tech Lead, verify the end-to-end integration between the FareSettings admin page frontend (FareStructurePanel, DistanceSlabRates, WeightBasedCharges, CategoryWiseRates, PeakHourModifiers, ActionButtonsPanel) and the Fare Settings API. Ensure all fare configuration panels load current values from the API on page load, inline edits persist to the database when saved, the preview fare calculation uses live configuration, and changes immediately reflect in new booking fare estimations on the customer side.

As a Tech Lead, verify the end-to-end integration between the Earnings page frontend (EarningsHero, EarningsMetrics, EarningsChart, EarningsBreakdown, EarningsWithdrawal, EarningsIncentives) and the Driver Profile API earnings endpoints. Ensure period toggle (this-month/last-month/all-time) fetches correct data from the API, earnings chart renders real time-series data, breakdown doughnut chart uses actual category percentages, withdrawal form submits to the withdrawal API with validation, and withdrawal history reflects real transaction records.

As a Tech Lead, verify the end-to-end integration between the Notifications page frontend (NotificationsHeader, NotificationsFilter, NotificationsList, NotificationsCTA) and the Notifications API. Ensure notification list loads from API with correct unread counts, filter/sort changes trigger API requests, mark-as-read and delete actions persist to the backend, FCM device token registration occurs on login, and push notifications appear in real time when delivery status changes.

As a Tech Lead, verify the end-to-end integration between the Profile page frontend (ProfileHeader, PersonalInfo, AddressBook, PaymentMethods, NotificationPreferences, SecuritySettings) and the Customer Profile API. Ensure profile data loads on page entry, inline field edits persist to the API, address add/edit/delete operations update the backend correctly, default address promotion logic matches server-side behavior, notification preference toggles save to the API, and payment method management (add/delete/set-default) works end to end.

As a frontend developer, implement the DashboardHeader section for the Dashboard page. Build a header with live date display using getFullDate() (en-IN locale with weekday, day, month, year) updated every 60 seconds via setInterval in useEffect. Implement dateRange state initialized via getDefaultDateRange() (last 7 days). Add PRESETS array (Today, This Week, This Month) with activePreset state and handlePreset() that computes and sets date ranges. Implement STATUS_OPTIONS dropdown (All Deliveries, Pending, In Transit, Completed, Cancelled) with statusOpen toggle, statusRef for outside-click detection via mousedown listener, and colored dot indicators using dotClass CSS classes (dh-status-option-dot--all/pending/active/completed/cancelled). Render LayoutDashboard, Calendar, Filter, ChevronDown, X icons from lucide-react. Display formatted date range via formatDateDisplay() helper.

As a frontend developer, implement the AnalyticsMetrics section for the Dashboard page. Build 4 KPI cards (Total Deliveries, Active Drivers, Pending Settlements, System Revenue) using KPI_CONFIG array with keys, labels, icons (Package, Truck, Wallet, TrendingUp), colorClass variants (am-card--deliveries/drivers/settlements/revenue), and trend/change metadata. Implement count-up animation triggered by IntersectionObserver on sectionRef — uses setInterval over 50 steps with cubic ease-out (1 - Math.pow(1-t, 3)) to animate from 0 to KPI_TARGETS values over 1600ms, setting countDone state on completion. Render inline SVG sparklines using buildSparklinePath() which computes M/L path commands from SPARKLINE_DATA arrays normalized to a padded bounding box. Add sparkAnimate state for sparkline CSS animation trigger. Display ArrowUpRight/ArrowDownRight trend icons based on trend field. Add RefreshCw icon. Note hasAnimated ref prevents re-triggering on repeated intersection.

As a frontend developer, implement the DeliveryMonitoring section for the Dashboard page. Build a delivery monitoring panel with STATUS_FILTERS tabs (All, Pending, Picked Up, In Transit, Delivered) using activeFilter state and icons (SlidersHorizontal, Clock, Package, Truck, CheckCircle). Render DELIVERY_DATA list (10 entries with id, driver, status, lat/lng, pickup/drop, eta fields) filtered via useMemo based on activeFilter. Implement STATUS_META map providing per-status color, label, icon component, and CSS class variants (dm-ic-*, dm-fi-*, dm-dot-*) for pending/picked_up/in_transit/delivered. Add highlightedStatus state for hover cross-highlighting between map markers and list items. Embed a static map using an iframe or img with MAP_QUERY (encodeURIComponent of 'Sangli,Maharashtra,India'). Implement chartReady state initialized via useEffect for progressive map render. Render ChevronDown and AlertCircle icons from lucide-react. Include MapPin and Clock icons on delivery list items for pickup/drop display.

As a frontend developer, implement the QuickActions section for the Dashboard page. Build a grid of 4 action cards (Approve KYC Documents, Handle Settlement, Generate Report, Manage Fare Settings) using the actions array with id, label, sub, href, badge, badgeVariant, icon, and iconVariant fields. Icons used: FileCheck (kyc), HandCoins (settlement), FileBarChart (report), SlidersHorizontal (fare). Implement 3D tilt effect on mouse move using tiltState object keyed by action id — compute rotateX and rotateY from mouse position relative to card center via getBoundingClientRect(), clamped to ±4 degrees, applied as perspective(600px) CSS transform. Use cardRefs ref object with setCardRef callback to store DOM refs per card. Reset tilt to {rotateX:0, rotateY:0} on mouse leave with 0.35s ease transition. Render badge counts (12 for KYC, 5 for settlement) with badgeVariant CSS classes. Add ChevronRight icon per card. Wrap each card in an anchor tag linking to its href.

As a frontend developer, implement the RecentActivity section for the Dashboard page. Build an activity feed table/list from ACTIVITY_DATA (12 entries with timestamp, user, userId, type, typeLabel, event, status, statusLabel fields covering booking/driver/kyc/settlement types). Implement FILTER_OPTIONS tabs ('All', 'Bookings', 'Drivers', 'KYC', 'Settlements') as active filter state. Implement client-side pagination with PAGE_SIZE=8 using currentPage state and useMemo-filtered/sliced data — render ChevronLeft/ChevronRight pagination controls. Add Search input with search state filtering across user, event, and userId fields. Implement Download button (Download icon) for CSV/export action. Use TYPE_STYLE_MAP for per-type dot CSS classes (ra-type-dot--booking etc.) and STATUS style map for status badge coloring. Render Activity icon in section header. Show empty state with Inbox icon when no results match. Display userId badges alongside user names per row.

As a frontend developer, implement the KYCHero section for the KYC page. This section uses useState to animate a progress bar from 0 to 25% via a 400ms setTimeout in useEffect, representing the initial 'Document Upload' stage (Step 1 of 3). Render decorative background shapes (kh-bg-shape--1, kh-bg-shape--2), a 'Driver Verification Required' badge with a pulsing dot, an h1 title with a gradient accent span, and a subtitle describing the 24-hour review process. The bottom row includes: (1) a kh-progress-track bar with an animated kh-progress-fill driven by the progress state, (2) a kh-stage card with a lucide FileCheck icon showing 'Document Upload — Step 1 of 3', and (3) a kh-security row with a lucide ShieldCheck icon and encrypted-data messaging. Apply KYCHero.css styles.

As a frontend developer, implement the CustomersHero section for the Customers page. This section renders a full hero area with: (1) an IntersectionObserver-driven entrance animation system using `visible` state and staggered CSS classes `ch-anim--1`, `ch-anim--2`, `ch-anim--3` applied via `rootRef`; (2) a breadcrumb nav linking to `/Dashboard` with a separator span; (3) an `<h1>` title with a `ch-title-accent` span for 'Customer'; (4) an overview paragraph describing the Sangli district customer management context; (5) a `ch-controls-row` containing a search input with a custom inline `SearchIcon` SVG component bound to `searchQuery` state; (6) a filter pill group rendering `filterOptions` array (All/Active/Inactive/Pending with counts) as buttons with active class toggling via `activeFilter` state; (7) a dynamic count display using `activeCount` derived from the selected filter. Imports `CustomersHero.css`.

As a frontend developer, implement the DriverHero section for the Drivers page. Build the hero section with animated gradient orbs (dh-orb--primary, dh-orb--teal, dh-orb--accent), a CSS grid overlay, and a status badge with a pulsing dh-badge-dot indicating live driver activity in Sangli. Implement the IntersectionObserver-based count-up animation using useRef (hasAnimated, statRef) and useState (activeDrivers) that counts from 0 to 500 with cubic easing over 1800ms in 60 steps when the stat enters the viewport at 40% threshold. Render VALUE_PROPS array mapping Zap, MapPin, DollarSign icons with labels (Instant Matching, Route-Optimized, Competitive Earnings) as dh-value-prop chips. Include the primary CTA anchor linking to /Drivers with ArrowRight icon. The component may reuse the Navbar already implemented in Splash/Dashboard pages.

As a frontend developer, implement the DeliveriesHero section for the Deliveries page. This section features an animated orb background (dh-orb--1, dh-orb--2, dh-orb--3) with a CSS grid overlay. It uses useState for counts ({active, today, completed}) and badgeVisible state, plus useRef for mountedRef and hasAnimated guards. On mount, a requestAnimationFrame loop runs for 1800ms using easeOutCubic easing to animate TARGET_STATS counters (active: 27, today: 142, completed: 1846). A status badge fades in via inline style transition after 400ms setTimeout showing the live active count. The headline renders 'Your Deliveries, In Real Time' with a dh-headline-accent span. Action buttons include a primary 'View Active Deliveries' link to /Tracking and a secondary button, styled with dh-btn and dh-btn-arrow classes. The Navbar component from Splash page may already exist and should be reused.

As a frontend developer, implement the ActiveDeliveries section for the Deliveries page. This section renders a live delivery table/card list from INITIAL_DELIVERIES (6 entries: FLP-1427 through FLP-1432) using useState for deliveries array and refreshing boolean. STATUS_MAP defines five statuses (in_transit, picked_up, out_for_delivery, pending_pickup, delayed) each with a label and CSS class. The section header includes a RefreshCw icon button from lucide-react that triggers handleRefresh(), setting refreshing to true for 1200ms. Each delivery card displays parcel_id, sender_short, receiver_short, location, eta, status badge, and driver initials avatar. An isEmpty guard renders an empty state. Imports Package and Box icons from lucide-react for visual decoration.

As a frontend developer, implement the DeliveryStatus section for the Deliveries page. This section uses useState for selectedDelivery index (default 0) to toggle between two mock deliveries (DLV-2847 and DLV-2851). STAGES array defines four pipeline steps (booked, pickup, in_transit, delivered) each with an icon from lucide-react (Package, MapPin, Truck, CheckCircle), a desc, doneLabel, and pendingLabel. progressPct is computed as ((activeIdx) / (STAGES.length - 1)) * 100 and drives a progress bar. A ds-toggle-group renders buttons per delivery ID, applying ds-toggle-btn--active class on the selected one. A ds-info-card shows eta and distance, conditionally classed ds-info-card--active when delivery is not yet complete. Background glow divs (ds-bg-glow, ds-bg-glow--right) are rendered for visual depth. Also uses Clock and Navigation icons from lucide-react.

As a frontend developer, implement the TrackingMap section for the Deliveries page. This is a canvas-based interactive map rendered via useRef (canvasRef, containerRef, animRef). It uses useState for zoom (default 1, range 0.6–2.0), driverPos ({x:0.42, y:0.58}), currentPos ({x:0.55, y:0.42}), eta (14), distance (3.8), and lastUpdate string. The canvas render loop uses requestAnimationFrame and draws: a background street grid (horizontal/vertical lines at rgba(255,255,255,0.04)), a major diagonal road at rgba(255,255,255,0.055), and map overlay elements. MAP_POINTS defines PICKUP (green #22c55e) and DROPOFF (red #ef4444) markers. zoomIn/zoomOut callbacks use useCallback with Math.min/max clamping. A setInterval every 30000ms updates lastUpdate to a random '${s}s ago' string. Imports MapPin, Package, Clock, Route, Phone, Star, Navigation, User from lucide-react for UI controls overlaid on the canvas.

As a frontend developer, implement the DeliveryHistory section for the Deliveries page. This section renders a paginated, filterable, sortable delivery history table from HISTORY_DATA (12 entries with id, recipient, date, status, driver, amount). State includes filterStatus, filterDriver, filterDateFrom, filterDateTo, sortKey, currentPage, and a dropdown open state. STATUS_CONFIG maps delivered/cancelled/returned/failed to label and CSS badge class. DRIVERS array ['All Drivers', 'Suresh Kamble', 'Mahesh Jadhav', 'Ravi Bhosale', 'Nilesh Chavan'] populates a driver filter. SORT_OPTIONS (date_desc, date_asc, amount_desc, amount_asc) drive sort behavior. Helper functions getInitials() and formatDate() (using en-IN locale) format display values. Each row has a MoreHorizontal icon button for a context menu with ExternalLink, RotateCcw, FileText, AlertCircle actions. Pagination uses ChevronLeft/ChevronRight icons. An Inbox icon renders the empty state. SlidersHorizontal icon appears on the filter toggle. Uses useRef, useEffect, and useCallback for dropdown outside-click detection.

As a frontend developer, implement the DeliveriesCTA section for the Deliveries page. This section uses framer-motion (motion.div, useAnimation, useInView) with sectionRef and isInView (once: true, margin: '-80px') to trigger controls.start('visible') on scroll entry. cardVariants animates the main dcta-card (opacity 0→1, y 40→0, duration 0.7). itemVariants staggers child elements (opacity 0→1, y 20→0, delay: 0.2 + i*0.1). stats array (500+ Active Drivers, 45+ Areas Covered, 15K+ Deliveries Done, 4.8 Avg. Rating) is rendered as animated stat items. Two magnetic buttons (btnPrimaryRef, btnSecondaryRef) use a shared applyMagnetic useCallback that adds mousemove/mouseleave listeners applying translate(x*0.18, y*0.18) transforms with ease-out transitions. Three decorative orb divs (dcta-orb--1/2/3) provide background depth. Imports ArrowRight, Users, MapPin from lucide-react.

As a frontend developer, implement the FareSettingsHeader section for the FareSettings page. This section uses `useState` for `animated` (avgFare, totalRoutes counters) and `useRef` for `hasAnimated` and `sectionRef`. An `IntersectionObserver` triggers a cubic-ease counter animation over 1400ms/40 steps for avgFare (target: 87) and totalRoutes (target: 42) when the section enters the viewport at 0.3 threshold. Renders three stat cards with inline SVG icons: a rupee/fare icon (blue), a route/pulse icon (teal), and a clock icon (indigo). The Last Updated stat displays live IST date+time via `toLocaleTimeString` and `toLocaleDateString` with `Asia/Kolkata` timezone. Includes a breadcrumb nav and page title block. Import and apply `FareSettingsHeader.css`. Note: Sidebar component may already exist from Dashboard page.

As a frontend developer, implement the SettlementsHeader section for the Settlements page. This section uses a sectionRef with IntersectionObserver (threshold: 0.2) to trigger animated count reveals for total (1247), pending (86), and settled (1161) settlement records. On intersection, a cubic-ease setInterval animates counts over 1500ms in 50 steps using `setCounts` state. Uses Framer Motion for staggered entrance animations: breadcrumb (y: -6→0, 0.5s), title row (y: 12→0, delay 0.08s), and subtitle (y: 10→0, delay 0.16s). Renders a breadcrumb nav linking to /Dashboard, an h1 with `sh-title-accent` span for 'Driver Settlements', a `sh-status-badge` with animated dot showing 'Cycle Active — Week 25', and a subtitle paragraph with live-counting inline stats. Accepts `onInitiatePayout` callback prop. Note: Sidebar component already exists from Dashboard page. Should depend on Dashboard Sidebar task to establish page chain.

As a frontend developer, implement the ReportsHero section for the Reports page. Build the hero section with a grid overlay background, header row containing an h1 title with 'rh-title-accent' span styling, subtitle text about Sangli District delivery performance, and a real-time data badge with animated 'rh-badge-dot'. Implement the quick filter bar using useState('7days') for activeFilter state, rendering five filter pills (today, 7days, 30days, month, quarter) with emoji icons and active state toggle via 'rh-filter-pill--active' class, plus a Custom Range button. Add a meta row with last-updated timestamp display and a Refresh Data button with refresh icon. Note: Navbar/Sidebar component may already exist from Dashboard page.

As a frontend developer, implement the BookingSummary section for the Booking page. Manages `cardStyle` state and `cardRef` ref. Implements a 3D tilt card effect via `handleMouseMove`: computes `rotateX`/`rotateY` from cursor offset, sets `--cursor-x`/`--cursor-y` CSS custom properties, and applies dynamic `boxShadow` and `borderColor`. `handleMouseLeave` smoothly resets transform with `cubic-bezier(0.23,1,0.32,1)` transition. Renders five `summaryData` rows (pickup 📍, dropoff 🏁, parcel 📦, fare ₹, time ⏱️) each with icon, label, value, meta sub-text, and edit button. Edit buttons call `handleEditClick` which uses `document.querySelector` with `editTarget` selector, `scrollIntoView({ behavior: 'smooth', block: 'center' })`, and temporarily adds `bsum-edit-flash` class (removed after 1500ms). Fare row gets `bsum-row__value--highlight` class. Time row has no edit target.

As a frontend developer, implement the FareEstimateCTA section for the FareEstimate page. Build the animated CTA component using framer-motion with useInView hook (cardRef, once: true, margin: '-60px'). Implement useState for hoveredBadge (null | index). Define cardVariants (hidden: opacity 0, y 44, scale 0.96 → visible: opacity 1, y 0, scale 1, duration 0.65, cubic bezier [0.22, 0.61, 0.36, 1]), badgeVariants (staggered per custom index with delay 0.3 + i*0.12), and buttonVariants (staggered delay 0.7 + i*0.1). Render decorative fcta-glow div with three positioned orbs (fcta-glow__orb--1/2/3). Render fcta-content with motion.div fcta-card animated by cardVariants. Inside the card: a motion.div fcta-badge-row rendering trustBadges array ('Transparent Pricing', 'Zero Hidden Fees', 'Same-Day Delivery') as motion.span elements with badgeVariants, hoveredBadge scale transform on hover (1.04), and a fcta-badge__check span. Implement handleModifyClick using document.querySelector('.fa-slot-fareinputform') with scrollIntoView smooth scroll to scroll back to the FareInputForm section. Render a motion.h2 fcta-headline with staggered entrance. Import FareEstimateCTA.css.

As a frontend developer, implement the `DeliveryGrid` component for the Marketplace page. Define `PARCEL_CATEGORIES` map (document 📄, food 🍔, electronics 📱, clothing 👕, medicine 💊, grocery 🛒, furniture 🪑, other 📦) and a `DELIVERY_DATA` array of 12+ delivery objects each with fields: `id`, `category`, `pickup`, `dropoff`, `distance`, `weight`, `fare`, `expiresIn` (seconds). Use `useState`, `useEffect`, `useRef`, and `useCallback` for countdown timers on each card's `expiresIn` field — rendering live countdown badges. Render delivery cards in a responsive grid, each showing category icon from `PARCEL_CATEGORIES`, pickup/dropoff addresses, distance (km), weight (kg), fare (₹), and a countdown expiry timer. Implement accept/decline card interactions. Handle expired deliveries (expiresIn reaches 0) by visually marking or removing cards.

As a frontend developer, implement the DeliveryDetailStatus section for the DeliveryDetail page. This section renders a horizontal multi-step progress tracker using a `STEPS` array of 4 statuses: booked (completed), picked_up (completed), out_for_delivery (active), delivered (upcoming). Uses `useState` for `animatedFill` and `mounted`, and `useRef` for `rootRef`. Computes a `fillPercent` based on `activeIndex` and `totalSteps` to animate a CSS connector fill bar from left to right. Each step node renders a contextual SVG icon: `CheckIcon` (polyline checkmark) for completed, `TruckIcon` (truck SVG) for active, and a `ClockIcon` (circle clock) or `PackageIcon` (3D box) for upcoming states. Step cards show label, desc, and timestamp. Triggers fill animation via `useEffect` after mount. Imports `DeliveryDetailStatus.css` for `dds-*` BEM classes.

As a frontend developer, implement the DeliveryDetailMap section for the DeliveryDetail page. This section renders an SVG-based animated delivery map with: (1) pickup (`PICKUP_POS {x:22,y:58}`) and dropoff (`DROPOFF_POS {x:72,y:28}`) markers, (2) a smooth bezier route path computed by `generateSmoothPath(ROUTE_POINTS)` using cubic Bézier curves, (3) a live driver marker that animates along the interpolated route using `requestAnimationFrame` with an ease-in-out function over a 30-second loop, (4) a dynamic ETA label (`etaMinutes`) that decrements as driver progresses, (5) a map type toggle switcher with 3 options: 'Map', 'Satellite', 'Hybrid' — each changing the SVG background fill via `mapBackgrounds` object, and (6) zoom in/out control buttons (`handleZoomIn`, `handleZoomOut`). Uses `useState` for `mapType`, `driverProgress`, `etaMinutes`, `animateRoute`; uses `useRef` for `animRef` and `startTimeRef`; uses `useCallback` for `animateDriver`. Imports `DeliveryDetailMap.css` for `ddm-*` BEM classes.

As a frontend developer, implement the DeliveryDetailParcelInfo section for the DeliveryDetail page. This is a static display section that renders: (1) a section label with a colored dot and 'Parcel Information' heading, (2) a card (`dpi__card`) containing a category badge ('Electronics') with a grid SVG icon, (3) a 2-column info grid with items: Weight & Dimensions (showing two `dpi__weight-chip` pills — '2.5 kg' with currency SVG and '30 × 20 × 10 cm' with box SVG), Declared Value ('₹1,250.00' with highlight styling via `dpi__item-value--highlight`), and Special Instructions (info circle SVG icon + fragile handling notice text). All data is hardcoded — no state hooks. Imports `DeliveryDetailParcelInfo.css` for all `dpi-*` BEM classes.

As a frontend developer, implement the DeliveryDetailDriverInfo section for the DeliveryDetail page. This section renders a driver profile card with: (1) an avatar div styled with `background: linear-gradient(135deg, #6366f1, #1e1b4b)` showing initials 'RP' and an online status dot (`ddri-status-dot`), (2) driver name 'Ramesh Patil', a phone number row with masked display ('+91 98XXX XXXXX') that toggles to full number ('+91 98765 43210') via a 'Show'/'Hide' button using `useState` for `phoneRevealed`, and a vehicle info row ('Honda Activa 6G · MH-10 AB 1234') with a 🏍️ emoji icon, (3) a stats panel showing a star rating (4.8 rendered as full/half/empty stars computed via `fullStars`, `hasHalfStar`, `emptyStars`), and total deliveries count (1247), plus action buttons for calling/messaging the driver. Imports `DeliveryDetailDriverInfo.css` for all `ddri-*` BEM classes.

As a frontend developer, implement the DeliveryDetailTimeline section for the DeliveryDetail page. This section renders a vertical event timeline with 7 hardcoded `timelineEvents` entries covering: Booking Confirmed, Assigned to Driver, Driver En Route, Picked Up, In Transit (in-progress), Arrived at Destination (future), Delivered (future). Each event renders a `dtl-event--{state}` modifier class ('completed', 'in-progress', 'future'), an icon rendered by `statusIcon(state)` returning '✓', '●', or '○', event status text, and for the 'in-progress' state a live pulsing dot (`dtl-event__live-dot`). A summary header shows counts computed from `completedCount`, `inProgressCount`, `futureCount` via `Array.filter`. Uses `useState` (visible from imports). Imports `DeliveryDetailTimeline.css` for all `dtl-*` BEM classes.

As a frontend developer, implement the DeliveryDetailActions section for the DeliveryDetail page. This section renders a CTA panel with: (1) a primary 'Track Live' button (`da-primary`) containing a map-pin SVG icon and a pulsing dot element (`da-pulse-dot`) — clicking it sets `trackingActive` to true via `useState` and navigates to '/Tracking' via `window.location.href`, (2) a secondary button row (`da-secondary`) with two buttons: 'Contact Driver' (phone SVG icon) and 'Report Issue' (info-circle SVG icon), each with `aria-label` for accessibility, and (3) additional tertiary links and a help contact section (from truncated JSX). All button click handlers are defined inline. Imports `DeliveryDetailActions.css` for all `da-*` BEM classes.

As a frontend developer, implement the DeliveryDetailPanel section for the Delivery page. This section displays a detailed side panel for delivery FLD-2024-0847 using DELIVERY_DATA with driver (Rahul Patil, RP initials, rating 4.9, 312 trips, isOnline), parcel (Documents, 0.5kg, sender Aniket Joshi, receiver Sneha Kulkarni), pickup/drop addresses with contact info and ETA, and a 4-stage timeline (booked/pickup/in_transit/delivered). Renders TIMELINE_ICONS as inline SVGs for each stage with completed/active state styling. STATUS_OPTIONS dropdown (5 options) with getStatusBadgeClass helper maps status to badge variant. POD (proof of delivery) section renders placeholder when pod.available=false. useState manages local status edit state. Apply DeliveryDetailPanel.css with class prefix 'ddp-'. Note: similar detail panel patterns may exist from DeliveryDetail page tasks [cd9101a4, 24fe3eea].

As a Backend Developer, implement driver route setup and delivery marketplace API endpoints using FastAPI. Create POST /drivers/me/route (save driver route with routeType, startLocation, endLocation, viaPoints array), GET /drivers/me/route (fetch current route), GET /marketplace/deliveries (list open delivery requests filtered/sorted by driver's route proximity, category, weight, fare; supports filters: distance, weight, payment type, sort: newest/closest/highest-fare), POST /marketplace/deliveries/{id}/accept (driver accepts delivery request), POST /marketplace/deliveries/{id}/decline (driver declines). Implement route-based matching engine that scores open bookings against driver route overlap using Google Maps Route API. Include countdown/expiry logic for marketplace listings. Note: frontend tasks RouteInputSection (866974a2), ConfirmationSection (c84f111a), DeliveryGrid (2831441a), FilterBar (73d724ea), MarketplaceHeader (29ec1afc) depend on these.

As a Backend Developer, implement admin driver management API endpoints using FastAPI. Create GET /admin/drivers (list all drivers with pagination, search, filters: status/kyc_status), GET /admin/drivers/{id} (fetch driver details including KYC status, earnings summary, active deliveries), PUT /admin/drivers/{id}/status (activate/deactivate driver account), GET /admin/deliveries (list all deliveries with filters: status, driverQuery, area, dateFrom/To, category), GET /admin/deliveries/{id} (fetch delivery details), PUT /admin/deliveries/{id}/status (admin override delivery status), GET /admin/dashboard/analytics (dashboard KPIs: total deliveries, active drivers, pending settlements, system revenue, recent activity feed), GET /admin/dashboard/delivery-monitoring (active deliveries with lat/lng for map). Note: frontend tasks DashboardHeader (f60f8a36), AnalyticsMetrics (9552f6ee), DeliveryMonitoring (d4701765), RecentActivity (f404fa6f), DriverHero (f970d0be), DeliveryListTable (78d95049), DeliveryFiltersBar (37f9428c) depend on these.

As a Backend Developer, implement real-time delivery tracking API endpoints using FastAPI with WebSocket support. Create GET /tracking/{booking_id} (fetch current tracking data: driver location, ETA, distance, status, timeline events), WebSocket /ws/tracking/{booking_id} (subscribe to real-time driver location updates pushed every 10 seconds), PUT /drivers/me/location (driver posts current GPS coordinates - called every 10-15 seconds when active), GET /tracking/search (look up booking by booking_id or customer phone number). Implement Redis pub/sub for real-time location broadcasting. Return timeline events array with status, timestamp, completed/active/future states. Note: frontend tasks TrackingHero (9f8939a6), TrackingMap (0b6e3b52), TrackingStatus (2c12588f), TrackingTimeline (ccc518b1), TrackingDetails (cc554ff3) depend on these.

As a Tech Lead, verify the end-to-end integration between the Booking page frontend (LocationInput, ParcelDetails, FareEstimation, BookingSummary, BookingConfirmation) and the Booking API. Ensure location autocomplete uses the Google Maps API, fare estimation updates dynamically as user inputs pickup/drop/category/weight, booking submission creates a record in the database, Razorpay payment modal opens for prepaid bookings, and confirmation screen shows the booking ID. Validate COD flow bypasses payment step. Verify VoiceAI-filled location fields integrate correctly with the location inputs.

As a Tech Lead, verify the end-to-end integration between the Settlements admin page frontend (SettlementsHeader, SettlementsSummaryCards, SettlementsTransactionTable, SettlementsPagination, SettlementsPayoutModal, SettlementsFiltersAndSearch) and the Driver Settlements API. Ensure settlement table loads real driver data with correct earnings/commission calculations, search/filter/sort operations call the API with correct query params, the payout modal submits to the Razorpay Payout API and updates the settlement record status, and summary cards reflect updated totals after payout.

As a Tech Lead, verify the end-to-end integration between the Customers admin page frontend (CustomersHero, CustomersStats, CustomersFilters, CustomersTable, CustomerActions) and the Admin Customer Management API. Ensure the customer table loads paginated real data, search/filter/sort operations correctly query the API, stats cards reflect real aggregate counts, add-customer modal submits to the API with validation error handling, bulk email action calls the backend endpoint, and issue resolution updates are persisted.

As a frontend developer, implement the KYCDocumentUpload section for the KYC page. This is a complex multi-step document upload form using useState (currentStep, activeDocTab, dragActive, formData, files, errors, submitState, submitMessage, uploadProgress) and useRef for three hidden file inputs (aadhaarInputRef, dlInputRef, rcInputRef). Render a three-step stepper using the STEPS array (Aadhaar, Driving License, RC). For each DOC_TYPES entry, render: a drag-and-drop file zone that handles dragenter/dragleave/drop events and updates dragActive state per key, a hidden file input accepting .jpg/.jpeg/.png/.pdf up to 5 MB, and three text fields per document (e.g., aadhaarNumber/fullNameOnAadhaar/dob, dlNumber/dlFullName/dlExpiry, vehicleNumber/rcOwnerName/rcExpiry). Show per-field validation errors via the errors state. Display uploadProgress bars per document key. On submit, set submitState to 'success'/'error'/'info' and show submitMessage. Include a formatFileSize helper for displaying file sizes. Use useCallback for drag/drop handlers. Apply KYCDocumentUpload.css styles.

As a frontend developer, implement the KYCVerificationStatus section for the KYC page. Uses useState (animated) and useRef (rootRef) with an IntersectionObserver that fires setAnimated(true) after 150ms when 15% of the section is visible, then disconnects. Render a four-step horizontal progress stepper from the verificationSteps array (Submitted/done, Document Review/active, Identity Verified/next, Approved/next). Render a vertical timeline from timelineSteps (Aadhaar Card/verified, Driving License/verified, RC Book/pending, Profile Photograph/upcoming, Background Verification/upcoming) — each step shows its lucide icon (IdCard, Car, FileText, UserCheck, CheckCircle), status badge, date, and description. Render three documentCards (Aadhaar/verified, Driving License/verified, RC Book/rejected) — the rejected card must display a rejectionReason block with re-upload instructions. Show a completedCount summary derived by filtering timelineSteps for status === 'verified'. Apply KYCVerificationStatus.css and animate entry based on the animated state flag.

As a frontend developer, implement the KYCDocumentChecklist section for the KYC page. Uses useState to track expanded/collapsed state for each accordion card. Render three expandable document cards from the documents array (Aadhaar Card, Driving License, Registration Certificate) each with: a lucide icon (User, CreditCard, FileText), a 'Required' badge (badgeType styling), a description string, a ChevronDown toggle that rotates on expand, a requirements list with CheckCircle2 icons, a tips list with Info icons, and an example field value. Each card's icon-box uses a unique CSS modifier (kdc-card__icon-box--aadhaar, --dl, --rc). Tips sections apply a kdc-card__tips-inner class variant per document. Apply KYCDocumentChecklist.css styles.

As a frontend developer, implement the KYCSecurityInfo section for the KYC page. This is a static informational section with no local state. Render a section header with a label dot, h2 title with a gradient accent span, and subtitle. Inside the main glass card (ksi-card): render four securityPills (AES-256 Encryption/Lock, TLS 1.3/Shield, SOC 2 Compliant/FileKey, 99.9% Uptime/Server) as inline chip badges. Render three encryptionItems cards (End-to-End Encryption/Lock, Document Masking/ScanLine, Data Anonymization/EyeOff) each with icon, title, and description. Render a dataPoints list of six bullet strings (ISO 27001 storage, 90-day deletion, RBAC, audit trail, pen testing, GDPR/IT Act). Render four complianceBadges (BadgeCheck/ISO 27001, ShieldCheck/SOC 2 Type II, GlobeLock/GDPR Ready, FileCheck/IT Act 2000) with year labels. Render four trustIndicators stats (Database/100% Encrypted Storage, Shield/0 Data Breaches, Banknote/24/7 Security Monitoring, BadgeCheck/45s Avg. Verification). Apply KYCSecurityInfo.css styles.

As a frontend developer, implement the KYCCTASection section for the KYC page. This is a static CTA section with no local state. Render three decorative background orbs (kcta-orb--1, kcta-orb--2, kcta-orb--3) as aria-hidden divs. Inside the kcta-card: a CheckCircle icon in kcta-icon-wrap, an h2 heading with a kcta-heading-accent gradient span ('Ready to Start Delivering with Frolic?'), and a paragraph describing KYC requirements and driver marketplace benefits. Render a kcta-contact row with a Mail icon, descriptive text, and a mailto link to support@frolic-logistics.com. Render two CTA buttons in kcta-actions: a primary button (ArrowRight icon, 'Submit Your Documents', href='/KYC') and a secondary button (HelpCircle icon, 'Get Help with KYC', href='/Help'). Render a kcta-help paragraph with a link to '/Login' for already-verified drivers. Apply KYCCTASection.css styles.

As a frontend developer, implement the CustomersTable section for the Customers page. This section renders a full data table with: (1) static `CUSTOMER_DATA` array of 12 customers with fields: id, name, phone, email, orders, lastOrder, status, initials; (2) `useMemo`-derived `filtered` array supporting search across name/email/phone/id and multi-field sorting via `sortField`/`sortDir` state; (3) client-side pagination with `ITEMS_PER_PAGE = 8` and `currentPage` state; (4) IntersectionObserver-based row reveal animations using `rowRefs` array ref and `observerRef`; (5) `selectedCustomer` state for row selection/highlighting; (6) sortable column headers with directional indicators; (7) status badge rendering (Active/Inactive) with color-coded classes; (8) avatar initials rendering. Imports `CustomersTable.css` and uses `useState`, `useEffect`, `useRef`, `useMemo`.

As a frontend developer, implement the CustomersFilters section for the Customers page. This section renders a collapsible advanced filter panel with: (1) `expanded` toggle state controlled by clicking the `cf-header` div with `role='button'`, `aria-expanded`, and keyboard handler for Enter/Space; (2) multi-select status chip group using `statuses` array state and `STATUS_OPTIONS` with color-coded dot classes (`cf-status-dot--green/red/amber`) and active state classes; (3) date range inputs for `dateFrom`/`dateTo` states; (4) order count range slider with `orderMin`/`orderMax` states (0–100); (5) location text input with `LOCATION_SUGGESTIONS` autocomplete array for Sangli district locations; (6) `useMemo`-derived `activeTags` array building tag objects for each active filter type (status/date/orders/location); (7) active filter tag pills with individual `removeTag` handlers and a `clearAll` function resetting all state; (8) `hasActiveFilters` boolean for conditional rendering. Imports `CustomersFilters.css`.

As a frontend developer, implement the CustomersStats section for the Customers page. This section renders an analytics card grid with: (1) `statsData` array of 4 stat cards (Total/Active/Inactive Customers, Avg. Order Value) each with metric, icon emoji, accent color, change percentage, trend direction, trendPct, and trendLabel; (2) IntersectionObserver on `sectionRef` triggering `animated` state for card reveal CSS class `cs-card--visible`; (3) a 400ms delayed `setTimeout` triggering `trendsVisible` state for staggered trend bar animations; (4) helper functions `getBadgeArrow`, `getBadgeClass`, `getTrendFillClass` mapping trend values ('up'/'down') to CSS modifier classes (`cs-card__badge--up/down`, `cs-card__trend-fill--up/down`); (5) `cs-card__glow` decorative element per card; (6) section header with `cs-section-label`, `cs-section-title`, `cs-section-desc`; (7) accent-colored card variants using `cs-card--blue/teal/amber/indigo` classes. Imports `CustomersStats.css`.

As a frontend developer, implement the CustomerActions section for the Customers page. This section renders a multi-action panel with: (1) `showExportMenu` dropdown with click-outside detection via `exportRef` and `mousedown` event listener, offering CSV and Excel export handlers (`handleExportCSV`, `handleExportExcel`) that trigger toast notifications; (2) `showAddModal` with a controlled form using `formData` state (name, email, phone, city, status, notes) and `handleAddCustomer` submit handler with required-field validation; (3) `showEmailModal` with `emailForm` state (subject, message) and `handleBulkEmail` submit handler for bulk emailing active customers; (4) `showResolveModal` with `issues` state initialized from `pendingIssuesData` array of 3 pending issues (payment dispute, address update, account verification) and `handleResolveIssue` function updating issue status; (5) `toast` state with auto-dismiss via `toastTimer` ref using 3000ms `setTimeout`, supporting 'success' and 'error' types; (6) cleanup `useEffect` for `toastTimer`. Imports `CustomerActions.css`.

As a frontend developer, implement the DriverOnlineStatus section for the Drivers page. Build the interactive online/offline toggle card using useState (isOnline, animating) with a 400ms animation timeout on toggle. Render the dos-card with conditional CSS classes (dos-online / dos-offline) and a dos-status-badge that switches between 'You're Online' (dos-online-badge) and 'You're Offline' (dos-offline-badge) with an animated dos-status-dot. Implement the dos-toggle button with aria-label and aria-pressed accessibility attributes and a sliding dos-toggle-knob. Display quickStats grid (Active Now, Today, Earned Today, Nearby Reqs) with conditional values based on isOnline state. Show contextual dos-info text driven by online state using the Info icon. Include the Radio icon in the dos-icon-circle header alongside the section label and title.

As a frontend developer, implement the DriverMarketplace section for the Drivers page. Build the delivery request marketplace with FILTER_OPTIONS (all, nearby <2km, express, highValue) and SORT_OPTIONS (newest, highest pay, closest) using useState and useRef for filter/sort state. Render the REQUEST_DATA array of 9 delivery cards (FR-2847 through FR-2868+) each showing pickup/drop addresses, category, weight, dimensions, distance, earnings badge, priority tag (express/fragile/standard), and timeRemaining countdown. Implement filter and sort logic via useCallback handlers. Display Package, MapPin, Navigation, Box, Scale, Ruler, CheckCircle, RefreshCw, Filter, Zap, Clock icons contextually per card. Show empty state with Inbox icon when no requests match filters. Include a refresh button with RefreshCw. Support accept/decline actions per card with CheckCircle interaction.

As a frontend developer, implement the DriverActiveDelivery section for the Drivers page. Build the live delivery tracking panel using useState (routeProgress initialized at 0.48, currentStep at 2) and useEffect interval (every 1500ms) that oscillates routeProgress between 0.48 and 0.52 to animate the driver position marker. Render the SVG-based map panel with dh-map-grid overlay, positioning pickup marker (lat:30, lng:40), drop marker (lat:75, lng:65), and animated driver truck icon computed from routeProgress. Display DELIVERY_DATA (id: FRO-DRV-2847) with pickup/drop addresses and contact names/phones for Rajesh Patil and Sunita Deshmukh. Render TIMELINE_STEPS (6 steps: Accepted→done, En Route to Pickup→done, At Pickup→active, Picked Up/En Route to Drop/Delivered→pending) with conditional step status styling. Include action buttons for Phone, MessageCircle (contact), Camera (proof of delivery), Upload, and ArrowRight for navigation. Show distance (4.2 km) and ETA (12 min) with Route and Clock icons in the dad-id badge.

As a frontend developer, implement the DriverEarnings section for the Drivers page. Register Chart.js with CategoryScale, LinearScale, PointElement, LineElement, Filler, Tooltip, Legend via ChartJS.register. Build a react-chartjs-2 Line chart with dual datasets — Earnings (₹, blue #3b82f6, fill) and Trips (teal #2dd4bf, fill) — switchable between weekly (CHART_WEEKS: W1-W6, data: [2100,2850,1950,3200,2450,1800]) and monthly (CHART_MONTHS: Jan-Jun, data: [8200,10450,9300,11500,9800,7200]) modes via useState (chartMode). Implement IntersectionObserver with useRef (sectionRef) at 15% threshold to trigger useState (animateIn) entrance animation. Render PAYOUT_HISTORY table with 5 settlement rows (STL-2026-xxxx IDs, dates, amounts, paid/pending status badges) using CheckCircle, Clock, AlertCircle icons. Display summary stat cards with Wallet, TrendingUp, Route, IndianRupee, ArrowUp, Banknote, CalendarCheck icons. Include weekly/monthly toggle buttons.

As a frontend developer, implement the DriverKYCPrompt section for the Drivers page. Use framer-motion AnimatePresence and motion.div for the card enter (opacity:0→1, y:20→0) and exit (opacity→0, y→-10, scale→0.98, 0.35s ease) animations. Implement 3D magnetic tilt effect via onMouseMove/onMouseLeave handlers on cardRef applying perspective(800px) rotateX/rotateY based on cursor position within the card (±8deg range) and mouseActive state. Render docData array of 3 KYC documents — Aadhaar (missing/Required+AlertTriangle), Driving License (pending/Under Review+Clock), Registration Certificate (complete/Verified+FileCheck) — using statusConfig lookup for icon, iconClass, statusClass, itemClass. Calculate progressPct (completedCount/totalCount * 100, = 33%) and render a progress bar. Implement dismiss functionality via useState (dismissed) that collapses the section with dkyc-root--dismissed class. Render decorative dkyc-orb--1 and dkyc-orb--2 background elements. Include ShieldAlert header icon and ArrowRight CTA.

As a frontend developer, implement the DriverCTA section for the Drivers page. Build the full-width CTA card with a decorative background layer containing three gradient orbs (dcta-orb--blue, dcta-orb--teal, dcta-orb--accent) and a dcta-grid-overlay. Render the two-column dcta-card-inner layout: left column with a pulsing dcta-badge-dot badge ('Maximize Your Earnings'), headline 'Turn Every Kilometre Into Real Income' with dcta-headline-accent span, description paragraph, featureHighlights chips mapping Route/Eye/Zap icons with labels (Smart Route Setup, Real-Time Tracking, Instant Payouts), and a trust badge row with four dcta-avatar placeholder spans ('D1'–'D4') and '500+ active drivers across Sangli' copy. Right column renders secondaryCTAs array of 3 action cards — Set Your Route (MapPin→/RouteSetup), Check Earnings (Banknote→/Earnings), Complete KYC (Shield→/KYC) — each with icon, label, hint text, ArrowRight, and href links.

As a frontend developer, implement the FareStructurePanel section for the FareSettings page. This panel uses `useState` for `expanded`, `editing`, and `formValues` (baseFare, distanceMultiplier, weightMultiplier) initialized from `FARE_DATA` constants (baseFare: 25, perKmRate: 3.5, perKgRate: 2.0). Includes an inline edit mode toggled by `setEditing`, with `handleInputChange` supporting partial float inputs (empty/dot states), `handleSave` with numeric validation fallback, and `handleCancel` resetting to defaults. Renders `CATEGORY_MODIFIERS` array (8 items) split into `activeModifiers` and `inactiveModifiers` with `getModifierPercent` formatting. An expand/collapse toggle (`expanded`) shows inactive modifiers. `formatCurrency` displays values as `₹X.XX`. Import and apply `FareStructurePanel.css`.

As a frontend developer, implement the CategoryWiseRates section for the FareSettings page. Uses `useState` for `categories` (5 initial items: Documents, Small Package, Medium Package, Heavy Package, Special Items with rateMultiplier values 1.0–2.8), `editingId`, `draft` (rateMultiplier + description), `searchQuery`, and `toast`. Uses `useRef` for `toastTimer` and `editInputRef`. `showToast` via `useCallback` manages a 2200ms auto-dismiss toast with a 220ms leaving animation. `useEffect` auto-focuses and selects `editInputRef` when `editingId` changes. `filteredCategories` filters by name and description against `searchQuery`. `startEdit`, `cancelEdit`, `saveEdit` manage inline row editing with `parseFloat` validation. Import and apply `CategoryWiseRates.css`.

As a frontend developer, implement the DistanceSlabRates section for the FareSettings page. Uses `useState` for `slabs` (5 initial distance slabs: 0–5km at ₹25/km up to 40+km at ₹10/km with surcharges), `editingId`, `editValues` (rangeLabel, ratePerKm, surcharge), `showAddForm`, `newSlab` (minKm, maxKm, ratePerKm, surcharge), and `deleteConfirmId`. Implements `startEdit`/`cancelEdit`/`saveEdit`/`handleEditChange` for inline row editing. Two-step delete confirmation via `confirmDelete`/`cancelDelete` (double-click pattern using `deleteConfirmId`). `addSlab` parses new slab fields, generates a `rangeLabel`, assigns a timestamped ID, and determines `dotClass` based on minKm thresholds. `getSurchargeClass` maps surcharge values to CSS modifier classes (none/low/med/high). Import and apply `DistanceSlabRates.css`.

As a frontend developer, implement the WeightBasedCharges section for the FareSettings page. Uses `useState` for `slabs` (5 default weight slabs: 0–1kg at ₹35 up to 10+kg at ₹120), `editingId`, `editForm`, `validationState`, and `toast`. Uses a module-level `nextId` counter for new slab IDs. `validateSlab` via `useCallback` checks charge positivity, minKg ≥ 0, maxKg > minKg, and cross-slab pricing progression (returning `valid`/`warn`/`invalid` status with messages). `getProgressionStatus` checks all sorted slabs for charge regression and gap coverage. Supports inline editing with per-field validation feedback, toast notifications for save/error states, and add/delete slab operations. Import and apply `WeightBasedCharges.css`.

As a frontend developer, implement the PeakHourModifiers section for the FareSettings page. Uses `useState` for `periods` (3 default periods: Morning Rush 1.35×, Evening Peak 1.50×, Weekend Premium 1.25× disabled) and `enteringId` for CSS enter animation. Module-level `nextId`/`uid()` generates new period IDs. `toggleEnabled` flips the `enabled` flag per period. `toggleDay` adds/removes days from the `days` array for a given period. `updateField` mutates any field (name, startTime, endTime, multiplier) inline. `addPeriod` appends a new default period and sets `enteringId` with a 400ms timeout for entry animation. `removePeriod` filters the period out. `formatMultiplier` converts multiplier to `+N%` string. `enabledCount` derived stat displayed in header. `ALL_DAYS` constant drives the day-toggle pill buttons. Import and apply `PeakHourModifiers.css`.

As a frontend developer, implement the SettlementsSummaryCards section for the Settlements page. Renders a 4-card `ssc-grid` layout with static data array. Cards include: 'Total Pending Amount' (₹4,82,350, iconMod: 'pending'), 'Total Settled This Month' (₹18,94,200 with inline `ssc-trend ssc-trend--up` SVG showing +12.4%, iconMod: 'settled'), 'Settlement Success Rate' (98.3%, 4 failed of 238 attempts with +1.2% trend, iconMod: 'rate'), and 'Next Payout Date' (28 Jun 2026 wrapped in `ssc-card__payout-date` span, 120 drivers next cycle, iconMod: 'payout'). Each card uses `ssc-card--{borderMod}` BEM modifier for colored left-border accents. Inline SVG icons per card. No state or interactivity — pure display component.

As a frontend developer, implement the SettlementsFiltersAndSearch section for the Settlements page. Manages four controlled state values via useState: `searchQuery` (text), `dateFrom` (date string), `dateTo` (date string), and `statusFilter` (default 'All'). Renders a `sfs-bar` flex row containing: a search input with inline SVG magnifier icon and placeholder 'Search driver name or ID...', a From date input (`sfs-date__input`, id: sfs-date-from), an em-dash separator span, a To date input (id: sfs-date-to), and a `sfs-status__select` dropdown with options All Settlements / Pending / Settled / Failed. A `handleReset` function resets all four state values. All inputs are fully accessible with aria-label and htmlFor associations. The CSS includes 6896 chars of styling — likely includes custom select chevron icon via a positioned span.

As a frontend developer, implement the SettlementsPayoutModal section for the Settlements page. Accepts `open` (bool, default false) and `onClose` props. Uses `loading` and `success` useState hooks; a useEffect resets both to false whenever `open` becomes true. Renders null when not open. Modal structure: `spm-overlay` (backdrop, click to close) wraps `spm-card` (role='dialog', aria-modal, stopPropagation). Header shows dynamic title ('Process Payout' / 'Payout Processed') and X close button (disabled during loading) from lucide-react. Body renders: a driver card with initials avatar, name/phone/driverId, and a `spm-status--ready` badge with dot; a settlement summary grid showing deliveries (47), totalEarnings (₹18,450), commissionRate (12%), commissionAmount (₹2,214), netPayout (₹16,236), and period. Bank details section uses Building2 and User icons from lucide-react showing SBI account ending 3842 with IFSC. `handleConfirm` simulates a 1800ms async API call via setTimeout, then sets success=true. Confirm button shows Loader2 spinner during loading and CheckCircle on success.

As a frontend developer, implement the ReportsFilters section for the Reports page. Build a multi-filter bar using useState for reportType ('all'), statusFilter (null), dateFrom, dateTo, and searchQuery. Implement a Report Type dropdown with five REPORT_TYPES options (all, deliveries, drivers, revenue, kyc). Add Status filter as toggle pill buttons using STATUS_OPTIONS with colored dot indicators (rf-pill-dot--completed, rf-pill-dot--pending, rf-pill-dot--failed) and toggle deselect behavior. Add date range inputs with useMemo-computed defaultFrom (30 days back) and today defaults. Include a search input with lucide-react Search and X icons for clear. Use useMemo to compute activeFilterCount across all active filters, display count badge, and wire a handleClear function to reset all filter state.

As a frontend developer, implement the ReportsMetrics section for the Reports page. Build six metric cards (deliveries, revenue, drivers, kyc, settlements, satisfaction) each with icon, label, value, trend badge showing trendPct and trendLabel, and an animated SVG Sparkline component. Implement the Sparkline component using useRef and useMemo to compute SVG path 'd' attributes for both the line path and filled area path based on generated data points. Apply 'rm-card__sparkline-path--up' or '--down' stroke classes based on trend direction. Use generateSparklinePoints() to produce randomized trend-biased sparkline data with configurable variance. Implement useEffect-based IntersectionObserver on each card to trigger 'visible' animation state when entering viewport, driving CSS entrance transitions.

As a frontend developer, implement the BookingConfirmation section for the Booking page. Manages `paymentMethod` ('razorpay' default), `showInstructions`, `instructions`, `isConfirming`, and `isConfirmed` state. `handleConfirm` sets `isConfirming` for 1800ms then transitions to `isConfirmed` success state. Renders two `paymentOptions` (Razorpay 💳 with UPI/card/net banking desc, Cash on Delivery 💵) as clickable `bc-payment__option` divs with `bc-payment__option--active` class on selection, keyboard accessible via `onKeyDown` Enter/Space. Renders a `showInstructions` toggle revealing a delivery instructions textarea. Shows three `trustBadges` (🔒 Secure Payment, 📍 Real-Time Tracking, 🛡️ Verified Drivers). Confirm button shows spinner/loading state during `isConfirming`. On `isConfirmed`, conditionally renders a `bc-success` card with ✅ icon, 'Booking Confirmed!' heading, success description, and a 'Track Your Parcel' link routing to `/Tracking`.

As a Backend Developer, implement reporting and data export API endpoints using FastAPI. Create GET /admin/reports/deliveries (paginated delivery report with filters: reportType, statusFilter, dateFrom/To, searchQuery; returns rows with all delivery fields), GET /admin/reports/metrics (aggregate KPI metrics: total deliveries, revenue, active drivers, KYC completions, settlements, satisfaction rate with trend data and sparkline series), GET /admin/reports/charts (time-series data for revenue line chart, delivery bar chart, status pie chart), POST /admin/reports/export (generate and return CSV/Excel/PDF download for the given date range and report type), POST /admin/reports/schedule (schedule recurring report email with frequency and recipient email). Note: frontend tasks ReportsHero (5085803c), ReportsMetrics (3fbaa8aa), ReportsCharts (d03852f1), ReportsFilters (338b02c2), ReportsTable (00e570f1), ReportsExport (02ede4ae) depend on these.

As a Tech Lead, verify the end-to-end integration between the Tracking page frontend (TrackingHero, TrackingMap, TrackingStatus, TrackingTimeline, TrackingDetails) and the Real-Time Tracking API. Ensure WebSocket connection establishes successfully on the tracking page, driver location updates arrive and animate the map marker in real time, ETA counts down correctly, timeline milestones update when booking status changes, and the search-by-booking-ID flow retrieves correct tracking data. Validate Firebase push notifications trigger status update UI refreshes.

As a Tech Lead, verify the end-to-end integration between the driver Marketplace and RouteSetup frontend components (DeliveryGrid, FilterBar, MarketplaceHeader, RouteInputSection, ConfirmationSection) and the Route & Marketplace API. Ensure driver route submission persists correctly and is used by the matching engine, marketplace delivery cards are filtered by the driver's route proximity, countdown timers on cards reflect backend expiry, accept/decline actions update booking state in real time, and earnings summary reflects accepted deliveries.

As a Tech Lead, verify the end-to-end integration between the Dashboard admin page frontend (DashboardHeader, AnalyticsMetrics, QuickActions, DeliveryMonitoring, RecentActivity) and the Admin API. Ensure KPI metric cards animate with real data from the API, delivery monitoring map shows live active deliveries, recent activity feed reflects real events from the database, date range filter correctly queries the API, and quick action badge counts (KYC pending: 12, settlements: 5) reflect actual backend counts.

As a frontend developer, implement the ActionButtonsPanel section for the FareSettings page. Uses `useState` for `saving` (spinner state), `confirmOpen` (modal visibility), `toast`, and `toastExiting`. Uses `useRef` for `toastTimer` and `exitTimer` to manage dual-timer toast lifecycle (4000ms display + 350ms exit animation). `showToast` via `useCallback` shows a success toast with title 'Fare settings saved' and resets any pending timers. `dismissToast` triggers the exit animation. `handleSave` opens a confirmation modal (`setConfirmOpen(true)`). `handleConfirmApply` is async: closes modal, sets `saving`, awaits a 1200ms simulated API delay, clears saving, then calls `showToast`. Primary save button tracks mouse position via `onMouseMove` and CSS custom properties `--ap-mx`/`--ap-my` for a radial highlight effect, disabled during `saving`. Also renders Preview and Reset buttons calling `showToast`. Import and apply `ActionButtonsPanel.css`.

As a frontend developer, implement the SettlementsTransactionTable section for the Settlements page. Uses three useState hooks: `sortKey` (null), `sortDir` ('asc'), and `activeRow` (null). The `sortedData` is derived via React.useMemo — sorts the 10-row `settlementData` array supporting both numeric (earned, settled, pending) and string (driver, date, status) comparisons with null-safe guards. Column headers defined in a `columns` array with keys: driver, earned, settled, pending, date, status. `handleSort` toggles asc/desc on re-click. Renders driver column with avatar initials badge (e.g., 'RP', 'AD') alongside driver name and phone. Currency columns display ₹ amounts. Status column renders colored badge chips for Settled / Pending / Failed states. Active row highlighting via `activeRow` state on row click. Table is fully sortable with visual sort direction indicators per column header.

As a frontend developer, implement the ReportsTable section for the Reports page. Build a sortable data table using COLUMNS config (date, delivery_id, driver_name, customer_name, category, status, amount — all sortable) and ROWS static dataset of 6+ delivery records with fields including driver_id, customer_id, pickup, dropoff, weight, payment, completed_at, and notes. Implement useMemo-based sort logic with sortKey and sortDir state. Render status badges with color coding for delivered, in_transit, cancelled states. Add expandable row detail panel showing pickup/dropoff, weight, payment method, completed_at, and notes. Include pagination controls and row-count selector. Format amount as ₹ currency and display '—' for zero-amount cancelled orders.

As a frontend developer, implement the ReportsCharts section for the Reports page. Register and use Chart.js modules (CategoryScale, LinearScale, PointElement, LineElement, BarElement, ArcElement, Filler, LineController, BarController, PieController) via react-chartjs-2. Implement three charts: (1) Revenue Over Time Line chart with two datasets — 'Delivery Revenue' (solid blue with gradient fill using createLinearGradient) and 'Settlement Fees' (teal dashed line, borderDash: [6,3]), tension 0.4, custom point styles; (2) a Bar chart; (3) a Pie/Donut chart. Apply shared chartTooltipStyles and chartFont (Inter) across all charts. Use IntersectionObserver via useRef/useEffect with threshold 0.15 to set 'visible' state and trigger chart entrance animations on scroll into view.

As a Tech Lead, verify the end-to-end integration between the Reports admin page frontend (ReportsHero, ReportsMetrics, ReportsCharts, ReportsFilters, ReportsTable, ReportsExport) and the Reports API. Ensure metric cards and charts load real data from the API, filter changes trigger API calls with updated query parameters, the table paginator correctly requests paginated rows, CSV/Excel/PDF export downloads trigger correctly with the selected date range, and scheduled report configuration persists to the backend.

As a frontend developer, implement the SettlementsPagination section for the Settlements page. Uses `currentPage` (useState, init 1) and `jumpValue` (useState, init '') state. Derives totalPages from totalRecords (247) / pageSize (10) = 25 pages. Computes `showingFrom` and `showingTo` for the records label. The `visiblePages` useMemo implements a windowed pagination algorithm: shows all pages if ≤7 total, otherwise renders first page + leading ellipsis or trailing ellipsis + last page with a 3-page window around currentPage. Renders Prev/Next nav buttons with disabled state at boundaries, page number buttons with `spg-page--active` on current page and `aria-current='page'`, ellipsis spans, and a jump-to-page input with `handleJumpKeyDown` (Enter key) and `handleJump` button. `goToPage` validates bounds before setting state.

As a frontend developer, implement the ReportsExport section for the Reports page. Build an export configuration panel with format selection buttons (CSV, PDF, Excel) using formatRefs array and a cursor-reactive 3D tilt effect via handleFormatMouseMove computing perspective rotateX/rotateY transforms from mouse position relative to button center. Implement date range presets (today, yesterday, last7, last30, thisMonth, custom) using handlePresetClick with getDateRange() computing ISO date strings, wiring into startDate/endDate state. Add schedule toggle (scheduleOn boolean) revealing frequency selector (weekly) and email input when enabled. Implement handleExport with loading state (1500ms simulated timeout) and toast notification showing exported format label, auto-dismissing after 3000ms. Apply glowRef cursor-tracking glow effect on the section container.

As a frontend developer, implement the ProfileHeader section for the Profile page. Build the `ProfileHeader` component using `ph-root` as the container with a `ph-glow` blue accent div for visual depth. Render a glassmorphism `ph-card` containing: (1) `ph-avatar-wrap` with a `ph-avatar-placeholder` showing initials 'RS' and a `ph-online-dot` status indicator; (2) `ph-info` block displaying `ph-name` (Rahul Sharma), `ph-phone` with emoji icon, and `ph-badges` showing a `ph-badge--member` badge with animated `ph-badge-dot` (Premium Member) and a `ph-badge--since` badge (Member since May 2025); (3) `ph-meta` stats section with two `ph-meta-item` elements (47 Deliveries, 4.9 Rating) separated by `ph-meta-divider`; (4) `ph-actions` with an anchor `ph-edit-btn` linking to /Profile with a pencil `ph-edit-icon`. Apply ProfileHeader.css (6238 chars) for glassmorphism styling, glow effects, badge animations, and responsive layout.

As a frontend developer, implement the HistoryHero section for the History page. This section renders a full-width hero with decorative background layers (hhr-bg-glow, hhr-bg-grid), an animated count-up effect using useState and useRef for two stats: total deliveries (target: 347) and total spent in INR (target: ₹28,940), animated over 1800ms with 40 steps using cubic ease-out (1 - Math.pow(1 - progress, 3)). Includes a mountedRef cleanup guard on unmount. Renders a status badge with an animated dot, a calendar SVG date badge showing 'Last 30 Days', an h1 title with a hhr-title-accent span, a subtitle paragraph, and two hhr-stat-card elements displaying the animated values formatted via Intl.NumberFormat ('en-IN', INR currency). Apply HistoryHero.css (5066 chars) for all layout and visual styling.

As a frontend developer, implement the ProfileNavigation section for the Profile page. Build the `ProfileNavigation` component with `useState` for `activeTab` (default 'personal') and `dropdownOpen`, plus `useRef(null)` for `dropdownRef`. Define a `tabs` array of 5 entries: personal (👤 Personal Info), address (📍 Address Book), payments (💳 Payments), notifications (🔔 Notifications), security (🔒 Security). Implement a `useEffect` that attaches `mousedown` and `touchstart` event listeners on `document` to close the dropdown when clicking outside `dropdownRef`. Implement `handleTabClick(id)` that sets `activeTab`, closes dropdown, and calls `document.querySelector('.pr-slot-<mappedName>').scrollIntoView({ behavior: 'smooth', block: 'start' })` using a tab-to-slot name mapping (e.g., 'personal' → 'personalinfo', 'address' → 'addressbook', etc.). Render a `pn-root` container with `pn-inner` containing: (1) a mobile `pn-dropdown` with a `pn-dropdown__trigger` button showing active tab icon/label and a `ChevronIcon` SVG (polyline 6 9 12 15 18 9), with `aria-haspopup='listbox'` and `aria-expanded`; (2) a `pn-dropdown__menu` with `role='listbox'` rendered conditionally; (3) a desktop horizontal tab bar rendering each tab as a button with active state styling. Apply ProfileNavigation.css (5417 chars) for sticky/fixed nav, mobile dropdown, active indicator animations.

As a frontend developer, implement the HistoryFilters section for the History page. This section renders a filter bar with five pieces of local state: status ('all'), dateRange ('month'), searchId (''), customStart (''), and customEnd (''), all managed via useState. STATUS_FILTERS array (all, pending, completed, cancelled) renders as aria-pressed pill buttons (hfl-pill / hfl-pill--active). DATE_RANGES array (today, week, month, custom) renders as a styled <select> (hfl-select). When dateRange === 'custom', a custom date range input pair (customStart, customEnd) appears with an Apply button (handleCustomApply). A search input field with an inline clear button (handleSearchClear) allows searching by order ID. activeFilterCount is computed dynamically and displayed in a badge; a 'Clear All' button (handleClearAll) resets all state to defaults. Apply HistoryFilters.css (8741 chars) for full layout.

As a frontend developer, implement the HistoryTimeline section for the History page. This section renders a paginated list of delivery history entries from a static historyEntries array (8 entries with id, sender, receiver, dateTime, status, category, categoryIcon, fare fields). State includes visibleCount (starts at 3), loading, and fullyLoaded. An IntersectionObserver (threshold 0.15, rootMargin '0px 0px -30px 0px') is attached to entryRefs via useCallback to add ht-entry--visible class on scroll-in for entrance animations. A 'Load More' button triggers a simulated async load (setLoading, setTimeout) incrementing visibleCount by 3 each time until fullyLoaded. A summary bar is computed via reduce over all entries tracking total, completed, pending, and total spent. Each entry card renders category emoji icon, sender→receiver route, dateTime, status badge (completed/pending/cancelled via statusLabels map), fare in INR, and a 'View Details' button. Apply HistoryTimeline.css (10274 chars).

As a frontend developer, implement the HistoryEmptyState section for the History page. This section uses useState for visible (false, triggered via 80ms setTimeout on mount) and mode ('empty' | 'no_results'). When mode === 'no_results' (isFiltered), it renders a 'No Results Found' state with a search/minus SVG icon, subtitle about adjusting filters, a 'Clear Filters' CTA href='/History', and a secondary 'Adjust Filters' button. When mode === 'empty', it renders a truck/delivery SVG icon, 'No Deliveries Yet' title, subtitle about booking first delivery, and a 'Book Your First Delivery' CTA href='/Booking'. An animated icon wrapper renders three staggered he-icon-ring div layers and he-icon-inner. CSS classes he-animate and he-animate-delay-1/2/3 are applied once visible===true for staggered entrance. A demo toggle button switches mode for preview. Apply HistoryEmptyState.css (4573 chars).

As a frontend developer, implement the PersonalInfo section for the Profile page. Build the `PersonalInfo` component with `useState` hooks for `data` (initialized from `INITIAL_DATA`: firstName 'Rajesh', lastName 'Patil', email 'rajesh.patil@frolic.app', phone '+91 98765 43210', dob '1992-08-15', gender 'Male'), `editingField` (null), `editValue` (''), and `globalEdit` (false). Define `FIELD_DEFS` array of 6 fields (firstName, lastName, email/text, phone/tel, dob/date, gender/select) and `GENDER_OPTIONS` array ('Male', 'Female', 'Other', 'Prefer not to say'). Implement: `startEdit(key)` sets editingField and editValue; `cancelEdit()` resets both; `saveEdit()` updates data state and resets; `handleKeyDown(e)` for Enter/Escape keyboard shortcuts; `toggleGlobalEdit()` for bulk edit mode toggle; `saveAll()` and `cancelAll()` for global form actions. Implement `renderField(field)` that conditionally renders a read-only `pi-field__row` (with value display and per-field `pi-field__edit-btn` with SVG pencil icon) or an editable input/select with `pi-field--editing` class. Apply PersonalInfo.css (8827 chars) for field layout, inline editing transitions, global edit mode styling, and save/cancel action buttons.

As a frontend developer, implement the AddressBook section for the Profile page. Build the `AddressBook` component with `useState` hooks for `addresses` (initialized from `initialAddresses` array of 3 addresses: Home at Patwardhan Colony, Work at Frolic Logistics Hub, Other at Shanti Apartments — each with id, label, addressLine1, addressLine2, city, pincode, state, isDefault), `editing` (null), `form` (initialized to `emptyAddress`), and `isNew` (false). Define `labelIcons` map: Home 🏠, Work 🏢, Other 📍. Define `formatAddress(addr)` utility joining addressLine1, addressLine2, city+pincode, state. Implement: `openNew()` resets form to emptyAddress and sets isNew=true/editing=true; `openEdit(addr)` spreads address into form; `closeModal()` resets editing and form; `handleChange(field, value)` updates form state; `handleSave()` validates addressLine1 and city, handles new address insertion (with isDefault logic clearing other defaults) or edit update (ensuring exactly one default address always exists, auto-promoting first if none); `handleDelete(id)` removes address with default auto-promotion logic. Render address cards with label icon, formatted address, default badge, Edit/Delete actions, and an 'Add New Address' button. Include a modal overlay for the address form with label selector (Home/Work/Other), input fields for addressLine1, addressLine2, city, pincode, state, and isDefault checkbox. Apply AddressBook.css (9756 chars) for card layout, modal styles, default badge, and form field styling.

As a frontend developer, implement the PaymentMethods section for the Profile page. Build the `PaymentMethods` component with `useState` for `methods` (initialized from `initialMethods` array of 3 entries: Credit Card Visa last4 '4521' expiry '09/27' isDefault true, UPI Google Pay upiId 'rahul.sharma@okhdfc' isDefault false, Debit Card Mastercard last4 '7834' expiry '03/26' isDefault false). Implement: `handleSetDefault(id)` maps all methods setting isDefault to id match; `handleDelete(id)` filters out the method by id. Implement `getIconClass(method)` returning 'pm-card__icon--upi' for UPI/Google Pay, 'pm-card__icon--mastercard' for Mastercard, or default 'pm-card__icon'. Implement `getCardNumber(method)` returning `method.upiId` for UPI type or '···· ···· ···· {last4}' for cards. Render a `pm-root` section with `pm-header` (label 'Payment Methods', title 'Saved Payment Options', subtitle about faster checkout), and `pm-content` with `pm-list` rendering each method as a `pm-card` (with `pm-card--default` class when isDefault). Each card shows icon div, `pm-card__info` with type/subtype, card number, and optional expiry. Apply PaymentMethods.css (6089 chars) for card layout, default badge highlight, icon color variants for UPI/Mastercard/Visa, and delete/set-default action buttons.

As a frontend developer, implement the NotificationPreferences section for the Profile page. Build the `NotificationPreferences` component with `useState` hooks for `toggles` (initialized by iterating `categoryData` to set all toggle ids to true), `saved` (false), and `toast` (null). Define `categoryData` array of 3 categories: 'delivery' (📦 Delivery & Order Updates with 4 toggles: delivery_status 📍, booking_confirmation ✅, driver_arrival 🚗, proof_delivery 📸), 'marketing' (💎 Offers & Promotions with 3 toggles: promotional 🏷️, newsletter 📬, referral 🎁), 'channels' (🔔 Notification Channels with 3 toggles: push 📱, sms 💬, email 📧). Implement `handleToggle(id)` that inverts the toggle state and sets saved=false. Implement `handleSave()` that sets saved=true and triggers a `toast` state with a success message (toast auto-dismisses). Render each category as a card with category icon, title, subtitle, and a list of toggle rows — each row showing toggle icon, label, description text, and a CSS toggle switch input bound to `toggles[t.id]`. Include a sticky/fixed Save Preferences button that triggers `handleSave()`, and a toast notification component that appears on save. Apply NotificationPreferences.css (6644 chars) for category card layout, toggle switch styling, toast animation, and save button.

As a frontend developer, implement the SecuritySettings section for the Profile page. Build the `SecuritySettings` component importing `{ Shield, Key, Monitor, Smartphone, Clock, ChevronRight, Eye, EyeOff }` from 'lucide-react'. Use `useState` hooks for `twoFAEnabled` (true), `showPasswordForm` (false), `showCurrentPw` (false), `showNewPw` (false), `showConfirmPw` (false). Define `sessions` array (3 entries: Chrome on Windows active now/isCurrent true, Frolic Android 2 hours ago, Safari iPhone 3 days ago — each with device, location, lastActive, isCurrent, icon type). Define `loginActivity` array (5 entries with date, ip, location, device, status: 4 'success' and 1 'fail' for Kolhapur IP). Implement `getSessionIcon(iconType)` returning `<Monitor>` or `<Smartphone>` lucide components at size 18. Render a `ss-root` with `ss-inner` containing: (1) `ss-header` with title and subtitle; (2) `ss-grid` with cards for: Change Password card (Key icon, toggles `showPasswordForm` to reveal a form with 3 password fields each with Eye/EyeOff visibility toggle buttons for currentPw/newPw/confirmPw), Two-Factor Authentication card (Shield icon, toggle switch for `twoFAEnabled`), Active Sessions card (Monitor icon, lists sessions with `isCurrent` badge and revoke button for non-current sessions), Recent Login Activity card (Clock icon, table of loginActivity with status badges for success/fail). Apply SecuritySettings.css (8535 chars) for grid card layout, password field input groups, 2FA toggle, session list, login activity table with status color coding.

As a frontend developer, implement the HistoryDetailModal section for the History page. This modal component uses useState for visible, closing, and booking (seeded with mockBooking data including sender/receiver addresses+phones, parcel details, date triplet, 4-step timeline array with past/active/pending states, driver info with rating, itemised fare breakdown with GST, paymentMethod, POD flags, and route info). openModal/closeModal are wrapped in useCallback; closeModal sets closing=true then hides after 260ms timeout for exit animation. An Escape key listener is attached via useEffect. Body scroll lock (document.body.style.overflow = 'hidden') is applied when visible. Overlay click on hdm-overlay closes modal (handleOverlayClick). A DOM slot query (.hi-slot-historydetailmodal) exposes _hdmOpen for programmatic opening from HistoryTimeline 'View Details' buttons. Modal renders: booking status badge, sender+receiver cards, parcel details table, timeline stepper with getStatusLabel(), driver card with star rating, itemised fare table, payment method, POD indicators, and route summary. Returns null when not visible. Apply HistoryDetailModal.css (14915 chars).