cotton-intelligence-platform

As a frontend developer, implement the `LandingHero` section using React Three Fiber (`@react-three/fiber`) with a `Canvas` wrapped in `Suspense`. Build the `RadialBurst` 3D scene: outer pulsing green sphere (radius 2.8, BackSide, #4A7C2C), inner accent sphere (radius 1.6, #E8B923), central core sphere (radius 0.3), and 64 ray line segments from `useMemo`-generated BufferGeometry. Use `useFrame` with `timeRef` for continuous sine-wave scale/opacity animation and slow z-axis rotation of rays. Render the static `CottonPlantSVG` illustration (400×500 viewBox with main stem, branches, boll paths in #4A7C2C) alongside hero headline copy and CTA buttons. Apply `framer-motion` entrance animations and LandingHero.css styles.

As a frontend developer, implement the `LandingValueProposition` section with a Three.js decorative background using React Three Fiber. Build `ParticleField` (120 points, Float32Array positions/sizes, per-frame sine/cosine drift via `useFrame`) and `FloatingRings` (two torus geometries at [-3,0,-2] and [3.5,-0.5,-3] with slow independent x/y/z rotation). Render `VALUE_CARDS` as a flip-card grid — each card has a front face showing `stat` (e.g., '15+'), `statLabel`, `title`, `description` and a `backDetail` on hover/flip. Use `useState` for active flip state per card. Apply `framer-motion` stagger entrance animations and LandingValueProposition.css styles.

As a frontend developer, implement the `LandingPlatformOverview` section with two animated lists driven by `useInView` and `AnimatePresence`. Render `BULLETS` (4 items: Supply Fundamentals, Speculative Positioning, Macro Signals, Crop Conditions) using `bulletContainerVariants` with `staggerChildren: 0.12` and `bulletItemVariants` (opacity 0→1, x -24→0, ease [0.25,0.46,0.45,0.94]). Render `MODULES` grid (8 items: Price Forecast, Supply & Demand, Crop Weather, India Intel, Trade Positioning, Macro Drivers, Competing Crops, Backtest Engine) using `gridContainerVariants` with `staggerChildren: 0.07` and card hover tooltips. Import Lucide icons: BarChart3, TrendingUp, Globe, CloudSun, Wheat, Activity, LineChart, Shield. Apply LandingPlatformOverview.css styles.

As a frontend developer, implement the `LandingKeyModules` section featuring 8 `MagneticCard` components built with `useMotionValue`, `useSpring`, and `useTransform` for magnetic cursor-tracking. Each card uses `useRef` for DOM rect calculation, mouse move handler updating `mouseX`/`mouseY` spring values, and a dynamic `boxShadow` derived from `springGlow` opacity transform (color-aware: #4A7C2C, #C97B2C, #E8B923 variants). Cards display module icon (Lucide: TrendingUp, Globe, CloudSun, BarChart3, Activity, MapPin, Wheat, FlaskConical), title, and 3 bullet points. Use `animate()` from framer-motion for glow entrance on hover and `isHovered` state for scale. Apply stagger entrance via container variants and LandingKeyModules.css styles.

As a frontend developer, implement the `LandingDataPipelines` section with an animated SVG data-flow diagram. Render 8 `DATA_SOURCES` (ICE, USDA, CFTC, NOAA, Cotlook, CAI, DXY/WTI, ICAC) at positions from `getSourcePositions()` around an 800×400 SVG hub. Build `buildCurvePath(sx,sy,ex,ey)` cubic bezier connectors with cubic offset logic. Implement `PulseAlongPath` component: uses `useMotionValue` for `progress`, subscribes to value changes via `progress.on('change')`, calls `pathRef.current.getPointAtLength()` to track a `motion.circle` (r=4) along each connector with staggered delay/duration per source color. Animate `STATS` counters (15+, <30min, 99.5%) using `useInView` trigger and `useSpring`. Apply LandingDataPipelines.css styles.

As a frontend developer, implement the `LandingUserPersonas` section as a horizontally scrollable carousel with 5 `PERSONAS` cards (Crop Intelligence Specialist, Executive/Senior Leadership, Market Analyst, Operations/Data Admin, Procurement Manager). Use `carouselRef` with native scroll tracking via `handleScroll` callback updating `scrollX` MotionValue and computing `activeIndex` from card width ratio. Implement `isDesktopWide` responsive state (threshold 1440px via resize listener). Each persona card uses `useMotionValue`/`useTransform`/`useSpring` for 3D tilt effect on mouse move and `AnimatePresence` for feature list reveal. Import `react-icons/tb`: TbPlant2, TbChartBar, TbBuildingBank, TbDatabase, TbShoppingCart. Apply PersonaCard.css and LandingUserPersonas.css styles.

As a frontend developer, implement the `LandingProcurementWindow` section displaying 4 monthly cards (October–January) with `useInView` trigger (margin '-80px', once: true) and `cardVariants` stagger animation (delay: i*0.18, duration 0.55, custom ease [0.25,0.46,0.45,0.94]). Render each `MONTHS` entry (key, month, headline, icon from Lucide: Wheat/TrendingUp/BarChart3/CalendarCheck, `isPeak` flag, 2 bullet points) with distinct peak styling for October. Include `supportingVariants` animated supporting content block (delay 0.8). Render three parallax decorative layers: `pw-parallax-bg` with 3 orbs (translateY at -0.2x scroll), `pw-parallax-mid` with 2 lines and 1 dot (translateY at -0.45x scroll) using CSS custom property `--scroll`. Apply LandingProcurementWindow.css styles.

As a frontend developer, implement the `LandingTestimonial` section with a single quote card layout. Use `useInView` (once: true, margin '-80px') to trigger animations. Animate `lt-accent-glow` div: initial boxShadow '0 0 16px 4px rgba(201,123,44,0.5)' fading to '0 0 6px 1px rgba(201,123,44,0.2)' on inView (duration 1.5s, delay 0.3). Render 5-star rating row using `StarIcon` SVG with staggered y-offset entrance, `QuoteIcon` SVG, and `TESTIMONIAL_LINES` array (6 lines of quote text from Rajesh Mehta, Head of Cotton Procurement at Vardhman Textiles) with per-line stagger animation. Include two parallax decorative layers: `lt-parallax-bg` (2 orbs, -0.2x) and `lt-parallax-mid` (2 lines, -0.4x) via CSS `--scroll` variable. Apply LandingTestimonial.css styles.

As a frontend developer, implement the `LandingCTA` section featuring a `MagneticButton` component with `useMotionValue`/`useSpring` (stiffness 250, damping 20) cursor-tracking magnetic effect, particle burst animation on click (`generateParticles(count)` producing angle/distance/scale/secondary particles with `AnimatePresence` burst key), and spring-reset on mouse leave. Render 4 `TRUST_BADGES` (SOC 2 Certified, 99.5% Uptime, 15+ Live Pipelines, AES-256 Encrypted) each with inline SVG icons: `ShieldIcon`, `CheckIcon`, `DataIcon`, `LockIcon` (all in #4A7C2C stroke). Use `useState` for `particles` array and `burstKey` counter. Apply `useCallback` for mouse handlers. Apply LandingCTA.css styles.

As a frontend developer, implement the `Footer` section with three link columns: `PRODUCT_LINKS` (Dashboard, Forecast, Supply & Demand, India Intelligence, Trade Positioning), `COMPANY_LINKS` (About Us, Careers, Contact, Privacy Policy, Terms of Service), and `RESOURCE_LINKS` (Crop Weather, Macro Drivers, Backtest Reports, Model Registry, Competing Crops). Render brand column with animated cotton-boll SVG logo (LOGO_PATH, pathLength 120) using `pathReady` state (setTimeout 100ms) for stroke-dashoffset draw animation via framer-motion. Include `SOCIAL_ICONS` row: FaLinkedinIn, FaTwitter, FaGithub, FaYoutube from `react-icons/fa` with hover scale via `whileHover`. Add `ftr-accent-border` shimmer top border and two parallax decorative layers (bg orbs at -0.2x, mid lines at -0.4x via `--scroll`). Note: this Footer component may already exist from a previous page — check for reuse before reimplementing. Apply Footer.css styles.

As a frontend developer, implement the Navbar section for the Login page. This component may already exist from the Landing page (task 3bc58413-0dd5-44d2-b191-738889ea72d6) and should be reused or referenced. The Navbar uses framer-motion hooks (useScroll, useTransform, useSpring, AnimatePresence) to create a scroll-driven background opacity transition from rgba(15,20,25,0.85) to rgba(15,20,25,0.98) and a backdrop blur from 8px to 16px over the first 80px of scroll. It includes the CottonLeafLogo SVG component with a spring-animated 12-degree rotation on hover and animated stroke-dashoffset vein reveals. Navigation links (Product→/Dashboard, Modules→/Forecast, Company→/Landing) are rendered with AnimatePresence for a mobile drawer toggled by mobileOpen state. Shadow opacity also animates from 0 to 0.4 over 60px scroll via useSpring.

As a backend developer, implement user management REST endpoints: GET /api/admin/users (list all users with role/status), POST /api/admin/users (create user), PATCH /api/admin/users/:id (update role, active status), DELETE /api/admin/users/:id (deactivate user). Enforce admin-only access via RBAC middleware. Support query params for role filter and search by username/email. Response includes id, username, email, role, lastLogin, active. Note: UserAccessControl frontend task (8fe2d5dc) renders this data.

As a backend developer, implement GET /api/admin/pipelines endpoint returning all 15+ pipeline statuses (id, name, source, status: healthy/warning/critical, lastRefresh, nextRefresh, sla, frequency, category). Implement GET /api/admin/pipelines/:id for single pipeline detail. Implement POST /api/admin/pipelines/:id/refresh to manually trigger a pipeline re-run via Airflow REST API. Data sourced from TimescaleDB pipeline_runs table. Note: PipelineHealthStatus (cb6511b4) and AdminHeaderBanner (37bb552a) frontend tasks consume these endpoints.

As a backend developer, implement GET /api/admin/freshness returning per-source freshness scores (name, freshnessPercent, status: compliant/warning/risk, lastUpdated, sla, slaLabel, alert) for all 15 data sources including ICE CT1, USDA WASDE, CFTC COT, NOAA, NASS, ICAC, CAI India, DXY, WTI, PSF, Competing Crops, MCX, USDA PSD, Brazil CONAB, Cotlook. Freshness computed from last successful ingest timestamp vs expected refresh cadence. Supports time_range query param (7/30/90 days). Note: DataFreshnessMetrics (177b975f) and DataFreshnessPanel (6fec38d2) frontend tasks consume this.

As a backend developer, implement GET /api/admin/alerts returning pipeline failure events with fields: id, severity (critical/warning/info), timestamp, source, failure_type (timeout/validation/api_error/parse_error/auth_error), error_message, retry_count. Support query params: severity filter, source filter, search text, page/limit pagination. Implement POST /api/admin/alerts/:id/acknowledge and POST /api/admin/alerts/:id/retry. Store alerts in TimescaleDB pipeline_alerts hypertable. Airflow failure webhooks write to this table. Note: AlertsAndFailures frontend task (15d5ec8a) renders this data.

As a backend developer, implement a proxy layer to the Airflow REST API: GET /api/admin/dags returns list of DAGs (id, name, dagId, lastRun, status, runtimeSec, nextScheduled, tasks[]). GET /api/admin/dags/:dagId/runs for run history. POST /api/admin/dags/:dagId/trigger to manually trigger a DAG run. GET /api/admin/dags/:dagId/tasks for task-level status breakdown. Proxy authenticates to Airflow using service account credentials stored in AWS Secrets Manager. Cache DAG list for 60s. Note: AirflowDAGStatus frontend task (ae49efc0) consumes these endpoints.

As a backend developer, implement GET /api/admin/logs returning structured pipeline log entries with fields: id, level (ERROR/WARN/INFO/DEBUG), source, time, msg, retry, detail (JSON blob with endpoint/status/policy/row counts). Support query params: level filter, source filter, search text, page/limit. Logs written to TimescaleDB pipeline_logs hypertable by Airflow task callbacks and pipeline agents. Implement GET /api/admin/logs/stream as SSE endpoint for real-time log tail (last 100 entries + new events). Note: RetryLogsAndEvents frontend task (d502bcc1) consumes this.

As a backend developer, implement model registry REST endpoints: GET /api/models returns all versioned model records (model_id, training_date, validation_mae, feature_count, data_range, status: active/archived/rollback, description). GET /api/models/:modelId for single model detail including feature importance snapshot. POST /api/models/:modelId/promote sets status to active and archives current active model. POST /api/models/:modelId/rollback sets status to rollback and promotes specified version. Models stored in PostgreSQL model_registry table with full audit history. Note: ModelRegistryPanel (b85b7acb) frontend task and Model Registry page tasks consume these endpoints.

As a backend developer, implement forecast data endpoints: GET /api/forecast/current returns latest 365-day forecast curve (date, predicted, upper80, lower80, upper95, lower95), model version, and generation timestamp. GET /api/forecast/scenarios returns bull/base/bear scenario paths at 30/90/180/365-day horizons. GET /api/forecast/history returns last 90 days of historical ICE CT1 prices plus rolling 20-day MAE. GET /api/forecast/csv streams the full 365-day forecast as downloadable CSV (FR03). GET /api/forecast/candlestick returns last 90 days OHLCV data. Responses served from pre-computed cache in Redis, refreshed within 30 minutes of ICE settlement (FR02). Note: Forecast page and DashboardBacktestModule (cbf06eea) frontend tasks consume these.

As a backend developer, implement supply/demand data endpoints: GET /api/supply-demand/overview returns world production, consumption, surplus/deficit by season. GET /api/supply-demand/countries returns country-wise WASDE data (production, consumption, ending stocks, MoM delta) for top 10 countries with traffic-light coloring flags, each referenced against the country's own cotton marketing year (FR04). GET /api/supply-demand/stocks returns closing stocks for 7 major countries (Brazil, India, USA, China, Pakistan, Australia, Uzbekistan) current vs prior season (FR05). GET /api/supply-demand/cotlook returns Cotlook StOU 6-month rolling window alongside USDA and ICAC StOU for three-way divergence tracker (FR06). Data sourced from TimescaleDB, refreshed on WASDE release day.

As a backend developer, implement crop and weather data endpoints: GET /api/crop-weather/nass returns USDA NASS crop progress (planted%, good/excellent condition%, harvested%, vs 5-year average) by week and season. GET /api/crop-weather/rainfall returns 90-day historical rainfall anomaly by growing region (Texas High Plains, Gujarat, Mato Grosso, Xinjiang, Queensland, Sindh) plus 15-day NOAA GFS forecast overlay (FR07). GET /api/crop-weather/enso returns current ENSO/ONI index, monthly values, 3-month outlook. GET /api/crop-weather/regions returns per-region anomaly, forecastRainfall, ensoSensitivity, cropNote for the 6 growing regions. Data refreshed daily from NOAA GFS and weekly from USDA NASS.

As a backend developer, implement CFTC COT and export sales endpoints: GET /api/trade/cot returns full disaggregated COT table (Managed Money, Commercial Hedgers, Swap Dealers, Other Reportables) with long/short/net/WoW delta for latest week and 52-week history (FR09). GET /api/trade/positioning-percentile returns managed money 5-year positioning percentile rank. GET /api/trade/export-sales returns USDA FAS weekly net export sales by destination country, cumulative vs USDA seasonal target, 4-week rolling average. Data refreshed weekly: COT every Friday within 4 hours of CFTC publication, export sales every Thursday. Note: Trade Positioning page and DashboardTradePositioningModule (ad2389a2) consume these.

As a backend developer, implement macro and synthetic competitiveness endpoints: GET /api/macro/dxy returns 90-day DXY daily values with 20-day and 90-day moving averages, current level, 20d change (FR — DXY trend). GET /api/macro/wti returns 90-day WTI crude prices with MA20. GET /api/macro/cotton-wti-ratio returns 90-day Cotton/WTI ratio with mean reference. GET /api/macro/psf returns 52-week PSF prices (USD/tonne and INR/kg), Cotton/PSF ratio with 90-day mean reference (FR10). GET /api/macro/normalised returns 180-day rebased-to-100 series for Cotton, PSF, WTI. GET /api/macro/substitution-risk returns composite synthetic substitution risk index. Data sourced from FRED, EIA, ICIS; refreshed daily.

As a backend developer, implement India domestic cotton data endpoints: GET /api/india/arrivals returns state-wise weekly Kapas arrivals (lakh bales) across 29+ season weeks for 4 seasons, for 11 states including Maharashtra, Gujarat, Telangana (FR08). GET /api/india/pressing returns weekly pressing/ginning numbers with cumulative totals vs prior season. GET /api/india/spot-prices returns MCX futures and physical spot prices for Rajkot, Akola, Guntur, Adoni daily. GET /api/india/basis returns India spot vs ICE CT1 basis chart (6 months) with 30-day and 60-day MA. GET /api/india/cai-estimate returns current CAI crop estimate, MoM delta, revision history, closing stock projection, carry-over stock. Data refreshed per SRD freshness SLAs.

As a backend developer, implement competing crops data endpoints: GET /api/competing-crops/usa-price-index returns 12-month normalised price index (base 100) for Cotton, Soybean, Corn, Wheat CBOT front-month futures (FR11). GET /api/competing-crops/usa-acreage returns USDA planted area by crop for 4 seasons in million acres. GET /api/competing-crops/price-ratios returns Cotton/Soybean and Cotton/Corn 90-day ratios with historical average reference lines. GET /api/competing-crops/india-kharif returns state-wise kharif sown area for Cotton, Soybean, Groundnut, Maize, Rice, Pulses across Maharashtra, Gujarat, Telangana vs 5-year normal. GET /api/competing-crops/india-msp returns current MSP table for all major kharif crops with Cotton ratio. Refreshed daily for futures, weekly for sowing area during season.

As an AI engineer, implement the Prophet + LSTM ensemble forecasting engine: (1) Prophet model capturing yearly/weekly seasonality, US and India cotton year calendar effects, WASDE release date effects, and long-run structural trend. (2) LSTM model with 3 stacked layers, dropout regularisation, dense output, 63-trading-day input window, trained on the full feature set (price/momentum, supply fundamentals, CFTC positioning, macro/FX, crop/weather, India domestic, competing crops, export demand — per SRD Section 5b). (3) Ensemble blending with MAE-optimised weights, re-optimised quarterly. (4) Monte Carlo confidence interval bootstrap producing 80% and 95% bands. (5) Scenario generation (bull/base/bear) via feature sensitivity analysis. (6) Output: 365-day daily forecast curve stored in TimescaleDB, served via backend_forecast_api within 30 min of ICE CT1 EOD trigger (FR02, FR03, FR13).

As a backend developer, implement Redis caching for all pre-computed dashboard data: forecast curve cached with 30-min TTL (refreshed on ICE EOD trigger), WASDE/supply-demand data with 2-hour TTL, COT data with 4-hour TTL on Fridays, weather data with 1-hour TTL. Implement cache-aside pattern with stale-while-revalidate for all /api/* endpoints. Cache invalidation hooks triggered by Airflow DAG completion callbacks. Cache keys namespaced by data source and date. Performance requirement: API response <500ms for all cached endpoints (NFR). Implement Redis Pub/Sub for real-time log streaming to SSE endpoint in retry_logs_api.

As a backend developer, implement the pipeline failure alerting system (FR14): Airflow failure callbacks POST to /api/internal/alerts/ingest with pipeline_id, severity, error details. Alert processor evaluates SLA breach (>15 min since expected refresh) and fires notifications via: (1) Email via AWS SES to operations team distribution list. (2) Slack webhook to #ops-alerts channel. Alert deduplication window: 30 minutes per pipeline. Alert escalation: critical alerts after 3 failed retries trigger PagerDuty webhook. Alert resolution notification sent when pipeline recovers. All alert events persisted to pipeline_alerts hypertable. Retry logic: 3 attempts with exponential back-off (30s, 90s, 270s) as per SRD spec.

As a DevOps engineer, configure AWS CloudWatch dashboards and alarms for platform observability: (1) Pipeline execution metrics: run duration, success/failure rate, retry count per DAG. (2) API metrics: p50/p95/p99 latency per endpoint, error rate, request volume. (3) Forecast refresh latency: alarm if ICE EOD to dashboard update >30 minutes. (4) Data freshness alarms: per-source staleness alerts. (5) ECS service health: CPU, memory, task count. (6) TimescaleDB: query latency, connection pool, disk usage. (7) Redis: hit rate, memory usage, eviction count. Structured JSON logging from all services shipped to CloudWatch Logs with log group per service. Log-based metric filters for ERROR/CRITICAL pipeline events. Rolling MAE drift alarm if 20-day MAE exceeds 3¢ gate.

As a DevOps engineer, configure ECS Fargate with auto-scaling for the backend API service: target tracking scaling policy on CPU (70% target) and ALB request count per target (500 req/min). Minimum 2 tasks, maximum 10 tasks. Application Load Balancer with health check on /api/health. ECS task definitions for: api-service (Node.js/FastAPI backend), airflow-webserver, airflow-scheduler, airflow-worker (Celery). Separate ECS service for the ML forecast worker triggered by EventBridge on ICE EOD data arrival. HTTPS enforced via ACM certificate on ALB. S3 data lake bucket with versioning enabled, lifecycle policy archiving raw data to Glacier after 2 years. VPC private subnets for all services; NAT gateway for outbound pipeline calls.

As a frontend developer, implement the `LandingHero` section. Build a `@react-three/fiber` `Canvas` rendering the `RadialBurst` scene: outer `sphereGeometry` (r=2.8) with `#2A9D8F` glow, inner sphere (r=1.6) with `#F4A261`, a central core sphere (r=0.3), and `lineSegments` from `rayGeometry` (64 rays built via `useMemo`). The `useFrame` loop animates scale pulsing and opacity breathing on `outerRef`, `innerRef`, and slowly rotates `raysRef`. Wrap canvas in `Suspense`. Also render the `CottonPlantSVG` inline SVG illustration (`className="lh-cotton-svg"`, viewBox 400×500) alongside headline copy and CTA buttons. Uses `framer-motion` for entrance animations. Depends on Navbar existing.

As a frontend developer, implement the `LandingValueProposition` section. Build a `@react-three/fiber` `Canvas` with two decorative scenes: `ParticleField` (120 points animated via `useFrame` with per-particle sine drift on position attributes, `pointsMaterial` color `#2A9D8F`) and `FloatingRings` (two `torusGeometry` meshes at `[-3,0,-2]` and `[3.5,-0.5,-3]` with slow `rotation.x/y/z` animation). Render `VALUE_CARDS` (3 cards: 'Data-Driven Decisions' stat `15+`, plus at least 2 more) as flip cards with front/back state using `useState`. Uses `framer-motion` for scroll-triggered card entrance. Depends on Navbar existing and runs in parallel with other content sections.

As a frontend developer, implement the `LandingPlatformOverview` section. Render the `BULLETS` array (4 items: Supply Fundamentals, Speculative Positioning, Macro Signals, Crop Conditions) as animated list items using `bulletContainerVariants` with `staggerChildren: 0.12` and `bulletItemVariants` (`opacity: 0, x: -24` → visible). Render the `MODULES` grid (8 items including Price Forecast, Supply & Demand, Crop Weather, India Intel, Trade Positioning, Macro Drivers, Competing Crops, Backtest Engine) using `gridContainerVariants` with `staggerChildren: 0.07` and `cardVariants` (`opacity: 0, y: 24` → visible). Each module card shows a `lucide-react` icon, label, and tooltip on hover. Use `useInView` and `AnimatePresence` for scroll-triggered reveal. Runs in parallel with other content sections.

As a frontend developer, implement the `LandingKeyModules` section. Build 8 `MagneticCard` components from the `MODULES` array (Today's Price Forecast, Global Supply & Demand, Crop Progress & Weather, Trade & Positioning, Macro Drivers, India Cotton Intelligence, Competing Crops, Backtest & Performance). Each `MagneticCard` uses `useMotionValue` + `useSpring` (`stiffness:250, damping:22`) for mouse-tracking `translateX/translateY`, a `glowOpacity` spring animating `boxShadow` via `useTransform`, and `onMouseMove`/`onMouseLeave` handlers via `useCallback`. Cards display a `lucide-react` icon, color-coded accent, title, and 3 bullet points. Entrance uses `animate` from framer-motion with stagger. Runs in parallel with other content sections.

As a frontend developer, implement the `LandingDataPipelines` section. Render the `DATA_SOURCES` array (8 sources: ICE, USDA, CFTC, NOAA, Cotlook, CAI, DXY/WTI, ICAC) positioned around an SVG hub diagram (800×400) using `getSourcePositions()`. Build `buildCurvePath(sx,sy,ex,ey)` to generate cubic bezier SVG paths from each source to hub center. Implement the `PulseAlongPath` component: uses `useMotionValue` for `progress`, subscribes via `progress.on('change')`, reads `pathRef.current.getPointAtLength(v * totalLength)` to animate a `motion.circle` traveling along each curve with staggered `delay` and looping `opacity: [0,1,1,0]` transitions. Animate `STATS` counters (15+ pipelines, <30min latency, 99.5% uptime) with `useSpring`+`useInView`. Runs in parallel with other content sections.

As a frontend developer, implement the `LandingProcurementWindow` section. Render the `MONTHS` array (4 items: October–January) as animated cards using `cardVariants` with `custom={i}` delay (`i * 0.18s`), `opacity: 0, y: 24` → visible, triggered by `useInView(sectionRef, { once: true, margin: '-80px' })`. The October card has `isPeak: true` for special styling. Each card shows a `lucide-react` icon (Wheat, TrendingUp, BarChart3, CalendarCheck), headline, and 2 bullet points. Build three parallax decorative layers: `pw-parallax-bg` (3 orbs at `translateY(calc(var(--scroll,0)*-0.2px))`), `pw-parallax-mid` (2 lines + 1 dot at `-0.45px` multiplier), and a natural-scroll content layer. A `supportingVariants` block animates in with `delay: 0.8`. Runs in parallel with other content sections.

As a frontend developer, implement the `LandingTestimonial` section. Render the `TESTIMONIAL_LINES` array (6 lines) with per-line staggered `motion.span` animations triggered by `useInView(sectionRef, { once: true, margin: '-80px' })`. Build inline SVG helpers `StarIcon` (5-point star path) and `QuoteIcon` (double-quote path). Animate `lt-accent-glow` with `motion.div` from `boxShadow: '0 0 16px 4px rgba(231,111,81,0.5)'` → `'0 0 6px 1px rgba(231,111,81,0.2)'` over 1.5s with `delay: 0.3`. Render 5 `StarIcon` instances and attribution (`Rajesh Mehta, Head of Cotton Procurement, Vardhman Textiles`). Two parallax background layers (orbs at `-0.2px` multiplier, mid-lines at `-0.4px`). Runs in parallel with other content sections.

As a frontend developer, implement the `LandingCTA` section. Build the `MagneticButton` component with `useMotionValue` x/y + `useSpring` (`stiffness:250, damping:20`) for cursor-tracking magnetic effect via `handleMouseMove`/`handleMouseLeave` using `useCallback`. On click, call `onBurst` which triggers `generateParticles(count)` — particles rendered as `AnimatePresence` `motion.div` elements scattering outward via angle/distance computed in `generateParticles`, animated with `burstKey` reset. Render 4 `TRUST_BADGES` (SOC 2 Certified, 99.5% Uptime, 15+ Live Pipelines, AES-256 Encrypted) each with inline SVG icons (`ShieldIcon`, `CheckIcon`, `DataIcon`, `LockIcon`). Primary CTA links to dashboard trial. Runs in parallel with other content sections.

As a frontend developer, implement the `Footer` section. Build the `Footer` component rendering three link columns: `PRODUCT_LINKS` (5 links to Dashboard, Forecast, Supply Demand, India Intelligence, Trade Positioning), `COMPANY_LINKS` (5 links), and `RESOURCE_LINKS` (5 links to Crop Weather, Macro Drivers, Backtest, Model Registry, Competing Crops). Render `SOCIAL_ICONS` (LinkedIn, Twitter, GitHub, YouTube via `react-icons/fa`) with hover animations. Animate the cotton boll `LOGO_PATH` SVG using `pathReady` state (set after 100ms `setTimeout`) to trigger stroke-dashoffset draw animation (`LOGO_PATH_LENGTH = 120`). Include `ftr-accent-border` shimmer div, two parallax background orb layers (`-0.2px` multiplier), parallax mid-lines (`-0.4px`), and a natural-scroll `ftr-content` wrapper. Note: this component may already exist from another page — reuse if available. Depends on Navbar only.

As a frontend developer, implement the LoginHero section for the Login page. This section renders a full 3D scene using @react-three/fiber Canvas with OrbitControls from @react-three/drei. The CottonBollGeometry component uses useMemo to build a custom THREE.SphereGeometry (radius 1.2, 64×48 segments) with per-vertex noise distortion (sin/cos displacement) and computed vertex normals for a fluffy cotton boll appearance. The useFrame hook drives continuous rotation: Y-axis at 0.004 rad/frame plus sinusoidal X (amplitude 0.12, frequency 0.35) and cosine Z (amplitude 0.08, frequency 0.28) wobble. The scene includes a main boll mesh with meshStandardMaterial (color #E8E8E8, emissive #2D5016), an inner green accent core sphere, a torusGeometry sepal ring (color #C97B2C, emissive #E8B923), and 18 floating fiber particle spheres arranged radially at varying radius/elevation offsets. SceneLighting component provides ambient and directional lights.

As a frontend developer, implement the LoginForm section for the Login page. This is the primary authentication UI featuring useState hooks for email, password, showPassword, error, and loading states, plus useCallback for form submission logic. Inline SVG icon components are defined: MailIcon, LockIcon, EyeIcon, EyeOffIcon, AlertCircleIcon, and LogInIcon. A secondary 3D element (CottonBollEmblem) is embedded using @react-three/fiber Canvas with @react-three/drei Sphere and MeshDistortMaterial, animated via requestAnimationFrame in a useEffect (Y rotation 0.004, X rotation 0.0015 per frame with cancelAnimationFrame cleanup). The form includes an email input with MailIcon prefix, a password input with LockIcon prefix and EyeIcon/EyeOffIcon toggle button, an error state display with AlertCircleIcon, and a submit button with LogInIcon and loading spinner state. Form validation and submission handling are wired via useCallback.

As a frontend developer, implement the LoginFooterCTA section for the Login page. This section uses a raw THREE.js scene (not React Three Fiber) mounted imperatively via useRef and useEffect. Three COTTON_ORBITS rings are defined with radius (1.8, 2.4, 3.0), speed, count (8, 10, 6), colors (#C97B2C, #E8B923, #2D5016), and size parameters. Each orbit spawns SphereGeometry particle meshes with MeshBasicMaterial (opacity 0.55, transparent) and userData containing phase, elevation, wobbleSpeed, and wobbleAmp for sinusoidal animation. A central cotton boll glow sphere (radius 0.32, opacity 0.12, color #C97B2C) and inner core (radius 0.12, opacity 0.35, color #E8B923) are added to the scene. The renderer uses alpha:true, antialias:true with pixelRatio clamped to 2, and a ResizeObserver with 80ms debounce handles responsive canvas sizing. The animation loop uses dt clamped to 0.1s with performance.now() timing and a running flag for cleanup via cancelAnimationFrame.

As a frontend developer, implement the Footer section for the Login page. This component may already exist from the Landing page (task a62617db-0e10-400e-a1e3-5f1902bc09d8) and should be reused or referenced. The Footer uses framer-motion for a logo wrap with whileHover scale:1.03 spring animation (stiffness 300, damping 20). It includes three link columns — PRODUCT_LINKS (Dashboard, Forecast, Supply & Demand, India Intelligence, Trade Positioning), COMPANY_LINKS (About Us, Careers, Contact, Privacy Policy, Terms of Service), and RESOURCE_LINKS (Crop Weather, Macro Drivers, Backtest Reports, Model Registry, Competing Crops). Social icons (FaLinkedinIn, FaTwitter, FaGithub, FaYoutube from react-icons/fa) are rendered in a row. An animated SVG cotton boll logo uses a custom LOGO_PATH with LOGO_PATH_LENGTH=120 for stroke-dasharray animation, gated by a pathReady boolean state set via a 100ms setTimeout in useEffect. Decorative parallax background layers use CSS custom property --scroll with translateY transforms at -0.2px and -0.4px multipliers.

As a frontend developer, implement the Navbar section for the Dashboard page. This component may already exist from the Landing and Login pages. The Navbar uses framer-motion hooks (useScroll, useTransform, useSpring, AnimatePresence) to create a scroll-reactive background that transitions from rgba(15,20,25,0.85) to rgba(15,20,25,0.98) with backdrop blur scaling from 8px to 16px over the first 80px of scroll. Includes the CottonLeafLogo SVG component with spring-animated rotation (12deg on hover) and animated stroke-dashoffset vein reveals on hover. Features a NAV_LINKS array linking to /Dashboard, /Forecast, and /Landing. Implements useState for mobileOpen and logoHovered, and AnimatePresence for mobile menu transitions. Verify the component is reused/imported from shared components if already built.

As a frontend developer, implement the Navbar section for the Admin Dashboard page. This is the same shared Navbar component used across Landing, Login, and Dashboard pages — reuse if already built. The component uses framer-motion hooks: useScroll, useTransform, useSpring, AnimatePresence for scroll-driven opacity (0.85→0.98), backdrop blur (8px→16px), and shadow opacity (0→0.4) transitions. Includes CottonLeafLogo SVG sub-component with isHovered spring animation rotating the leaf 12°, and stroke-dashoffset animated veins (central, left/right, lower left/right) with staggered transitions (0.45s–0.6s). NAV_LINKS array points to /Dashboard, /Forecast, /Landing. useState manages mobileOpen and logoHovered. Mobile menu uses AnimatePresence for mount/unmount transitions.

As a backend developer, implement backtest and model performance endpoints: GET /api/backtest/accuracy-summary returns MAE for near-term, 1-week, and 1-month horizons across all historical cutoffs (FR12). GET /api/backtest/cutoffs returns paginated full historical cutoff table (date, lastClose, predicted, actual, error, dirCorrect, horizon) with sort/filter params — CSV download via GET /api/backtest/cutoffs/csv. GET /api/backtest/direction-accuracy returns overall % and by-horizon breakdown with trend. GET /api/backtest/rolling-mae returns 60-day rolling 20-day MAE series updated daily. GET /api/backtest/meta returns model metadata (version, training range, ensemble weights, feature set version). Note: Backtest page frontend tasks and DashboardBacktestModule (cbf06eea) consume these.

As a Tech Lead, verify the end-to-end integration between the Forecast page frontend tasks and the /api/forecast/* backend endpoints. Ensure the 365-day forecast curve loads from /api/forecast/current with correct upper/lower confidence bands, scenario paths (bull/base/bear) render from /api/forecast/scenarios at all 4 horizons, historical 90-day price chart populates from /api/forecast/history, CSV download triggers /api/forecast/csv with correct filename and Content-Disposition header, candlestick chart renders from /api/forecast/candlestick OHLCV data, and procurement window highlighting is correct relative to returned forecast dates. Verify forecast is refreshed within 30 minutes of ICE EOD (FR02).

As a Tech Lead, verify the end-to-end integration between the Supply Demand page frontend tasks and the /api/supply-demand/* backend endpoints. Ensure country-wise WASDE delta table renders live MoM delta with correct traffic-light coloring, all 7 country closing stocks load from /api/supply-demand/stocks, Cotlook StOU 6-month rolling window and USDA/ICAC three-way divergence tracker render correctly, data-freshness timestamp is visible per module, and WASDE data is live within 2 hours of USDA release (FR04, FR05, FR06). Verify chart interactivity (zoom, hover tooltips) works with live data shapes.

As a Tech Lead, verify the end-to-end integration between the Crop Weather page frontend tasks and the /api/crop-weather/* backend endpoints. Ensure NASS crop progress stats (planted%, good/excellent%, harvested%) load from live API and drive the ProgressRing SVG animations, 15-day rainfall forecast overlay renders on top of historical anomaly chart for all 6 growing regions (FR07), ENSO/ONI index panel shows current phase and 3-month outlook, and sparkline data in GrowingRegionHighlight derives from API anomaly values. Verify daily refresh by 08:00 IST per SRD freshness SLA.

As a Tech Lead, verify the end-to-end integration between the India Intelligence page frontend tasks and the /api/india/* backend endpoints. Ensure KapasArrivalsSection stacked bar chart populates from live state-wise weekly arrivals data for 4 seasons (FR08), CottonPressingSection bar+line chart uses real pressing/cumulative data, IndiaSpotPricesSection line chart renders MCX and 4 spot market price series from live API, BasisChartSection basis chart derives from /api/india/basis with correct MA lines, and CAIEstimateSection balance sheet panel shows live crop estimate with revision history. Verify data freshness timestamps are displayed per module.

As a Tech Lead, verify the end-to-end integration between the Trade Positioning page frontend tasks and the /api/trade/* backend endpoints. Ensure COT disaggregated table renders all 4 trader categories with live long/short/net/WoW delta values (FR09), managed money 52-week bar chart populates from live history, positioning percentile rank badge shows live 5-year percentile, export sales weekly and cumulative charts load from /api/trade/export-sales, and destination countries breakdown is accurate. Verify COT data refreshes every Friday within 4 hours of CFTC publication.

As a Tech Lead, verify the end-to-end integration between the Macro Drivers page frontend tasks and the /api/macro/* backend endpoints. Ensure DXYTrendPanel chart populates from live /api/macro/dxy data with real MA20/MA90 values, CrudeoilPanel WTI chart uses live /api/macro/wti data, CottonWTIRatioPanel ratio and mean reference derive from live API, PSFPricePanel renders live USD/tonne and INR/kg values with correct FX conversion, NormalisedComparisonPanel rebased-to-100 series load from /api/macro/normalised, and MacroDriversInsights generates insight text from live metric values rather than hardcoded strings. Verify synthetic substitution risk index renders from /api/macro/substitution-risk (FR10).

As a Tech Lead, verify the end-to-end integration between the Competing Crops page frontend tasks and the /api/competing-crops/* backend endpoints. Ensure the USA normalised price index chart populates from live Cotton/Soybean/Corn/Wheat futures data rebased to 100 (FR11), USDA acreage bar chart renders 4 seasons of real planted area, Cotton/Soybean and Cotton/Corn price ratio charts use live /api/competing-crops/price-ratios data with real historical mean reference lines, India kharif state-wise sown area table loads from live /api/competing-crops/india-kharif, and MSP comparison table shows current season values from /api/competing-crops/india-msp.

As a frontend developer, implement the DashboardTopBar section for the Dashboard page. Uses Three.js (not React Three Fiber) directly via useRef canvasRef and animRef. Creates a PerspectiveCamera (fov 60, z=30), WebGLRenderer with alpha:true, and a BufferGeometry Points system of 40 particles with PointsMaterial (color 0x4A7C2C, size 0.25, AdditiveBlending, opacity 0.5). Particles have individual Float32Array velocity arrays with boundary wrapping and slow orbital drift (points.rotation.y += 0.0003). Includes a resize handler and requestAnimationFrame cleanup on unmount. Renders Lucide icons: Home, RefreshCw, Settings, HelpCircle, ChevronRight, User as action buttons in the top bar.

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. Features a 3D CottonBollGeometry rendered via @react-three/fiber Canvas with OrbitControls, composing a central sphere (r=0.55), four lobe spheres, an accent torus ring (color 0xe8b923, emissiveIntensity 0.15), a cylindrical stem (color 0x6b4226), and a small leaf sphere — all using useMemo MeshStandardMaterial instances. The CottonBollGeometry useFrame hook rotates groupRef.current.rotation.y by 0.003 and oscillates rotation.x via Math.sin. Sidebar nav uses useState for collapse and active states, renders Lucide icons (TrendingUp, BarChart3, CloudSun, Globe, Layers, ArrowRightLeft, Gauge, History, Shield, ChevronDown, X, Menu, Activity, Database, Users) for module navigation items. Implements ChevronDown accordion for nested nav groups.

As a frontend developer, implement the DashboardWelcome section for the Dashboard page. Features a @react-three/fiber Canvas with OrbitControls rendering a custom CottonBollGeometry built from a morphed SphereGeometry (32x32 segments) whose vertex positions are displaced via a factor formula (1.0 + 0.18*(1-|y|) - 0.12*|y|) to flatten poles and widen equator. Four petal lobes are generated via useMemo with per-petal SphereGeometry scaled to (0.7, 1, 0.65) and positioned at evenly spaced angles at offset 0.62. Materials use MeshPhysicalMaterial with clearcoat:0.1, transparent opacity 0.42 for main body and 0.35 for petals. A MeshBasicMaterial torus ring (color #E8B923, opacity 0.18) provides the accent. useFrame drives rotation.y at 0.25 rad/s and oscillates rotation.x via Math.sin at 0.15 frequency.

As a frontend developer, implement the DashboardModuleNav section for the Dashboard page. Renders a horizontally scrollable tab bar for 8 MODULES: forecast, supply-demand, crop-weather, trade-positioning, macro-drivers, india-intelligence, competing-crops, and backtest — each linking to their respective page routes. Uses useState for activeId, showLeftFade, showRightFade, showLeftArrow, showRightArrow. A useCallback updateScrollIndicators function reads tabsRef.current.scrollLeft, scrollWidth, and clientWidth to conditionally show/hide fade masks and ChevronLeft/ChevronRight arrow buttons. A ResizeObserver on the tabs container re-evaluates scroll indicators on resize. handleTabClick calls document.getElementById('module-'+id).scrollIntoView with smooth behavior. scrollLeft/scrollRight buttons call el.scrollBy with ±220px smooth scroll.

As a frontend developer, implement the Footer section for the Dashboard page. This component may already exist from the Landing and Login pages — verify reuse before rebuilding. Uses framer-motion motion.div with whileHover scale:1.03 spring transition on the logo wrap. Features an animated SVG logo path (LOGO_PATH, estimated length 120) with stroke-dashoffset animation controlled by pathReady state set via setTimeout(100ms). Three link columns: PRODUCT_LINKS (Dashboard, Forecast, Supply & Demand, India Intelligence, Trade Positioning), COMPANY_LINKS (About Us, Careers, Contact, Privacy Policy, Terms of Service), RESOURCE_LINKS (Crop Weather, Macro Drivers, Backtest Reports, Model Registry, Competing Crops). SOCIAL_ICONS renders FaLinkedinIn, FaTwitter, FaGithub, FaYoutube from react-icons/fa. Decorative parallax layers use CSS custom property var(--scroll) with translateY transforms at -0.2px and -0.4px multipliers. ftr-accent-border shimmer top border and two ftr-parallax-bg-orb decorative orbs.

As a frontend developer, implement the AdminSidebar section for the Admin Dashboard page. Features a 3D CottonBoll3D component rendered via @react-three/fiber Canvas using Sphere with MeshDistortMaterial (color #4A7C2C, distort 0.18, speed 0.9), two torus accent rings (gold #E8B923 opacity 0.55, amber #C97B2C opacity 0.4), and a useFrame animation loop rotating the group on y/x axes and pulsing the main mesh scale with Math.sin. NAV_SECTIONS data defines two collapsible groups: 'Admin Dashboard' (5 sub-items: Pipeline Health Status, Data Freshness Metrics, Alerts & Failures, Airflow DAG Status, Retry Logs & Events) and 'Model Registry', each with custom SVG icons. Uses useState, useRef, useEffect, useCallback for expand/collapse accordion logic and active link tracking. CSS (10674 chars) handles sidebar layout, hover states, and responsive collapse.

As a frontend developer, implement the AdminHeaderBanner section for the Admin Dashboard page. Renders a live clock using useState + useEffect with setInterval updating every second, displaying formatted date (toLocaleDateString 'en-US' with weekday/year/month/day) and 12-hour time via formatDate/formatTime helpers. Includes a StatusSphere Three.js component (raw THREE, not fiber) mounted imperatively via useRef: creates Scene, PerspectiveCamera (z=2.8), WebGLRenderer with alpha, a SphereGeometry(0.55, 48, 48) MeshStandardMaterial with emissive color mapped from status ('healthy'→#4A7C2C, 'degraded'→#C97B2C, 'critical'→#FF6B6B), and a TorusGeometry orbital ring (r=0.78, tube=0.03) with matching emissive. Animation loop rotates ring on y/x axes. getSystemStatus() mock returns {status:'healthy', label:'All Healthy', detail:'15/15 pipelines operational'}. Cleanup disposes renderer on unmount.

As a frontend developer, implement the PipelineHealthStatus section for the Admin Dashboard page. Renders 15 pipeline rows (ICE CT1, USDA WASDE, CFTC COT, NASS Crop Progress, NOAA GFS, DXY, WTI, PSF, CAI India, MCX Futures, Cotlook A, ICAC, USDA FAS, etc.) each with status ('healthy'/'warning'/'critical'), lastRefresh, nextRefresh, SLA %, frequency, and category fields. Uses a 3D network graph via @react-three/fiber Canvas with OrbitControls, Line, Sphere, and Text from @react-three/drei to visualize pipeline connectivity. lucide-react icons (RefreshCw, Zap, Clock, AlertTriangle, CheckCircle) decorate status indicators. useState manages selected pipeline and filter state; useMemo computes filtered/sorted pipeline lists; useCallback handles refresh triggers; useRef tracks animation frame. Category filter tabs (futures, fundamental, positioning, crop, weather, macro, synthetic, india) allow sub-filtering. SLA badges color-coded green/amber/red. CSS (9826 chars) handles table layout, status pills, and 3D canvas sizing.

As a frontend developer, implement the DataFreshnessMetrics section for the Admin Dashboard page. Displays freshness scores for 15 data sources (ICE CT1 100%, USDA WASDE 100%, CFTC COT 100%, Cotlook 100%, NOAA 99.2%, NASS 96.8%, ICAC 100%, CAI India 94.3%, DXY 100%, WTI 100%, PSF 91.5%, Competing Crops 93.0%, MCX 100%, USDA PSD 87.2%, Brazil CONAB 82.6%) with status classification (compliant ≥99%, warning 90–99%, risk <90%). computeStats() derives compliant/warning/risk counts. Renders a Bar chart via react-chartjs-2 with ChartJS registered scales (CategoryScale, LinearScale, BarElement, Tooltip, Legend, LineElement, PointElement, Filler). TIME_RANGES selector (7/30/90 Days) uses useState. A 3D ring scene via @react-three/fiber uses useMemo to compute per-source segment angles (radius 1.4, inner 1.22, outer 1.58) with color coding (#4A7C2C compliant, #E8B923 warning, #FF6B6B risk), rendered with OrbitControls, Torus, Sphere, Ring from drei. CSS (6700 chars) handles metric cards and chart layout.

As a frontend developer, implement the AlertsAndFailures section for the Admin Dashboard page. Renders 12+ pipeline failure events with severity levels (critical/warning/info), each containing id, timestamp, source (ICE CT1, WASDE, CFTC COT, Cotlook A Index, NOAA GFS, CAI India, USDA NASS, DXY, WTI, PSF, MCX Futures, ICAC), failure_type (timeout/validation/api_error/parse_error/auth_error), error_message, and retry_count. Uses THREE.js (raw, not fiber) for a 3D alert indicator rendered imperatively via mountRef + useEffect with full scene/camera/renderer/mesh setup and cleanup. useState manages expanded alert rows, filter by severity, and search query. useEffect sets up auto-refresh interval. useRef holds the animation frame ID. useCallback memoizes filter handlers. Severity badge colors: critical→#FF6B6B, warning→#E8B923, info→#4A7C2C. CSS (12392 chars) styles the alert list, expandable detail rows, and severity filters.

As a frontend developer, implement the AirflowDAGStatus section for the Admin Dashboard page. Renders 4+ Airflow DAGs: Ingestion Pipeline (dagId ingestion_v2, 9 tasks, success, 247s runtime), Forecast Refresh (dagId forecast_refresh_v1, 7 tasks including train_prophet_model 128s, train_lstm_ensemble 215s, success, 583s), Model Training (dagId model_training_v3, 8 tasks with train_lstm_variant_b/ensemble_weighting/hyperparameter_sweep/save_model_artifact all failed, 1240s), and Backtest Pipeline (dagId backtest_v2). Each DAG shows lastRun Date, status ('success'/'failed'/'running'), runtimeSec, nextScheduled Date, and per-task status breakdown. 3D visualization via @react-three/fiber Canvas with OrbitControls and raw THREE.js geometry (useMemo computes node positions, useRef tracks mesh refs, useFrame animates). useState manages selected DAG and expanded task list. useCallback handles DAG trigger/retry actions. CSS (11824 chars) handles DAG cards, task gantt-style rows, and status color coding.

As a frontend developer, implement the RetryLogsAndEvents section for the Admin Dashboard page. Renders 8+ structured log entries with fields: id, level (ERROR/WARN/INFO/DEBUG), source (ice_ct1_api, wasde_parser, cftc_cot, cotlook_api, noaa_weather, icac_monthly, dxy_fx, psf_icis), time, msg, retry count, and a detail object (endpoint, status codes, retry policy, row counts, positions data, etc.). 3D log stream visualization via @react-three/fiber Canvas with useFrame animation, OrbitControls, and Text from drei for floating log labels. useState manages log level filter (ALL/ERROR/WARN/INFO/DEBUG), search term, selected log entry for detail drawer, and auto-scroll toggle. useMemo filters LOG_DATA by level+search. useRef tracks scroll container and animation frame. useEffect auto-scrolls log list on new entries. useCallback memoizes filter/search handlers. Log level colors: ERROR→#FF6B6B, WARN→#E8B923, INFO→#4A7C2C, DEBUG→#888. Detail JSON drawer expands inline. CSS (12365 chars) handles terminal-style log list and expandable detail panels.

As a frontend developer, implement the ModelRegistryPanel section for the Admin Dashboard page. Renders 10 versioned model records (CT1-PHL-2026-03 through CT1-PHL-2024-01) with fields: model_id, training_date, validation_mae (0.42–0.81), feature_count (39–94), data_range, status (active/archived/rollback), and description. lucide-react icons (Box, Calendar, BarChart3, Hash, Layers, Info, GitCompare, RotateCcw, AlertTriangle, Filter, ChevronRight) decorate model cards and action buttons. 3D model comparison visualization via @react-three/fiber Canvas with OrbitControls, Text, Sphere from drei and raw THREE.js — useMemo computes sphere positions/sizes from MAE values, useRef tracks mesh refs. useState manages selected model, comparison mode (toggling two models for side-by-side diff), and filter (active/archived/rollback). useMemo filters MODEL_DATA. useCallback handles promote-to-active and rollback actions. GitCompare triggers diff view between two selected model versions. CSS (12785 chars) handles model table, status badges (active→#4A7C2C, archived→#888, rollback→#E8B923), and diff panel.

As a frontend developer, implement the UserAccessControl section for the Admin Dashboard page. Manages 8 users (Sarah Chen, Marcus Okonkwo, Priya Sharma, James Whitfield, Elena Vasquez, Takumi Watanabe, Laura Becker, Carlos Rivera) with fields: id, username, email, role (admin/analyst/readonly), lastLogin, active boolean. ROLE_META maps roles to colorClass and desc ('Full access + config', 'View all modules + export', 'View only, no export'). 3D header accent via @react-three/fiber Canvas useFrame: AccessControlThreeD renders a Torus (r=1.15, tube=0.14, color #C97B2C emissive 0.6) with innerRef rotating on x/z, a center Sphere (r=0.32, #E8B923 emissive 0.7), and a second tilted Torus (r=0.75, tube=0.08). framer-motion AnimatePresence wraps user row mount/unmount. useState manages users array, editingId (inline role editor), filter by role, and search. useMemo filters/sorts INITIAL_USERS. useRef holds the Canvas container. Suspense wraps the 3D canvas. Inline role dropdown changes user.role with optimistic update. Active/inactive toggle updates user.active. CSS (15700 chars) handles user table, role badges, and edit controls.

As a frontend developer, implement the Footer section for the Admin Dashboard page. This is the same shared Footer component used across Landing, Login, and Dashboard pages — reuse if already built. The component uses framer-motion (motion.div with whileHover scale spring) and react-icons (FaLinkedinIn, FaTwitter, FaGithub, FaYoutube). Three link columns: PRODUCT_LINKS (Dashboard, Forecast, Supply & Demand, India Intelligence, Trade Positioning), COMPANY_LINKS (About Us, Careers, Contact, Privacy Policy, Terms of Service), RESOURCE_LINKS (Crop Weather, Macro Drivers, Backtest Reports, Model Registry, Competing Crops). Animated SVG logo path (LOGO_PATH cotton boll, LOGO_PATH_LENGTH=120) with pathReady state set via 100ms setTimeout useEffect to trigger stroke-dashoffset draw-on animation. Parallax background orbs (ftr-parallax-bg-orb--1/2) and midground lines (ftr-parallax-mid-line--1/2) use CSS custom property --scroll. Social icons row with hover transitions. CSS (5159 chars) handles multi-column grid, parallax layers, and shimmer accent top border.

As a frontend developer, implement the Navbar section for the Supply Demand page. This component may already exist from previous pages (Dashboard, Forecast). It uses framer-motion (motion.div, useScroll, useTransform, useSpring, AnimatePresence) for scroll-driven background opacity (0.85→0.98), backdrop blur (8→16px), and shadow opacity transitions. Features a CottonLeafLogo SVG component with animated leaf veins using strokeDashoffset and spring rotation on hover (logoHovered state). Uses useState for mobileOpen and logoHovered, NAV_LINKS array with Product/Modules/Company routes. Dark theme with rgba(15, 20, 25) background. Reuse existing Navbar component if already implemented.

As a frontend developer, implement the Navbar section for the Trade Positioning page. This component may already exist from previous pages (Dashboard, Forecast, Supply Demand). The Navbar uses framer-motion hooks including useScroll, useTransform, useSpring, and AnimatePresence to create a scroll-reactive glassmorphism header. Key behaviors: bgOpacity springs from 0.85 to 0.98 as scrollY goes 0→80px, backdropFilter blur springs from 8px to 16px, and box-shadow opacity springs from 0 to 0.4 over 0→60px scroll. Includes a CottonLeafLogo SVG component with hover-triggered rotation (12deg spring) and animated stroke-dashoffset reveals on 5 vein paths with staggered delays (0.45s–0.6s). NAV_LINKS array routes to /Dashboard, /Forecast, /Landing. State: mobileOpen (boolean) and logoHovered (boolean) via useState. Mobile menu uses AnimatePresence for mount/unmount animation. Imports from ../styles/Navbar.css.

As a frontend developer, implement the Navbar section for the Macro Drivers page. The Navbar component (shared across pages — may already exist from Dashboard, Admin Dashboard, Forecast, Supply Demand, or Trade Positioning pages) uses NAV_GROUPS config with three groups: Markets (Dashboard, Forecast, Trade Positioning), Intelligence (Crop & Weather, Supply & Demand, India Intelligence, Competing Crops), and Analytics (Macro Drivers, Backtest), plus ADMIN_LINKS. Implements useState hooks for scrolled, mobileOpen, and openDropdown states. Uses useEffect for scroll listener (sets scrolled when window.scrollY > 12), outside-click handler via mousedown event on document, and body scroll lock when mobileOpen. Uses useRef for dropdownRefs and navRef. Renders CottonIcon SVG, ChevronDown SVG, and LogInIcon SVG sub-components. Active route '/MacroDrivers' should be highlighted. Reuse existing Navbar component if available.

As a frontend developer, implement the Navbar section for the India Intelligence page. This reuses the shared Navbar component (may already exist from previous pages) featuring: NAV_GROUPS array with Markets, Intelligence, and Analytics dropdown groups (each with sub-items linking to /Dashboard, /Forecast, /TradePositioning, /CropWeather, /SupplyDemand, /IndiaIntelligence, /CompetingCrops, /MacroDrivers, /Backtest), ADMIN_LINKS array for AdminDashboard and ModelRegistry, CottonIcon SVG component, ChevronDown SVG, LogInIcon SVG, scroll-based opacity state via useEffect listening to window.scrollY > 12, mobileOpen/openDropdown state management, outside-click handler via document mousedown event, body scroll lock when mobile menu open, dropdownRefs for positioning, and navRef for click-outside detection. Responsive hamburger menu for mobile with animated dropdown groups.

As a frontend developer, implement the Navbar section for the Crop Weather page. This component may already exist from previous pages (Macro Drivers, India Intelligence). It uses framer-motion's useScroll, useTransform, and useSpring hooks to create a scroll-reactive navbar with dynamic background opacity (0.85→0.98), backdrop blur (8px→16px), and shadow opacity transitions. Includes the CottonLeafLogo SVG component with hover-triggered spring rotation (12deg) and animated stroke-dashoffset vein reveals on 5 leaf vein paths. NAV_LINKS array points to /Dashboard, /Forecast, /Landing. Mobile menu toggle via useState(mobileOpen) with AnimatePresence for drawer animation. Reuse existing Navbar component if available from prior pages.

As a frontend developer, implement the Navbar section for the Backtest page. Build the `Navbar` React component using `framer-motion` with scroll-driven backdrop blur and background opacity transitions via `useScroll`, `useTransform`, and `useSpring` hooks (scrollY mapped [0,80] → bgOpacity [0.85,0.98], blur [8,16]px, shadow opacity [0,0.4]). Implement the animated `CottonLeafLogo` SVG component with spring rotation on hover (`isHovered` state, rotate 0→12deg) and staggered stroke-dashoffset vein reveal animations. Include `NAV_LINKS` array linking to /Dashboard, /Forecast, /Landing. Add mobile menu toggle via `mobileOpen` useState with `AnimatePresence` for drawer animation. Note: this Navbar component likely already exists from Landing/Dashboard pages — check for reuse before reimplementing. Apply Navbar.css styles.

As a frontend developer, implement the Navbar section for the Model Registry page. This component may already exist from previous pages (Landing, Login, Dashboard, etc.) — verify reuse before rebuilding. The Navbar uses framer-motion hooks (useScroll, useTransform, useSpring, AnimatePresence) to create a scroll-reactive background transitioning from rgba(15,20,25,0.85) to rgba(15,20,25,0.98) with backdrop blur scaling from 8px to 16px over the first 80px of scroll. shadowOpacity springs from 0 to 0.4 over the first 60px. Includes the CottonLeafLogo SVG component with spring-animated rotation (12deg on hover, stiffness:300 damping:18) and animated stroke-dashoffset vein reveals on hover with staggered transition delays (0.45s central, 0.55s side veins, 0.6s lower veins). NAV_LINKS array links to /Dashboard, /Forecast, and /Landing. Uses useState for mobileOpen and logoHovered, and AnimatePresence for mobile menu transitions.

As a Tech Lead, verify the end-to-end integration between the Backtest page frontend tasks and the /api/backtest/* backend endpoints. Ensure ModelAccuracySummary cards render live near-term/1-week/1-month MAE from /api/backtest/accuracy-summary, DirectionAccuracy ring and HORIZON_ROWS table populate from live /api/backtest/direction-accuracy, RollingMAE chart loads 60-day series from /api/backtest/rolling-mae (FR12), HistoricalCutoffTable pagination and sort/filter params correctly hit /api/backtest/cutoffs, CSV download triggers /api/backtest/cutoffs/csv with correct headers, and BacktestMetaInfo panel shows live model metadata from /api/backtest/meta.

As a Tech Lead, verify the end-to-end integration between the LoginForm frontend task (2f1eac0a) and the /api/auth/* backend endpoints. Ensure form submission calls POST /api/auth/login with email/password, JWT access token is stored securely (httpOnly cookie or memory), redirect after login routes to /Dashboard, token refresh is handled transparently on 401 responses, logout clears the token and redirects to /Landing, and the error state displays the correct message for invalid credentials. Verify the admin role receives access to Admin Dashboard routes while analyst/readonly are redirected appropriately.

As a frontend developer, implement the DashboardSupplyDemandModule section for the Dashboard page. Wraps content in a ModuleCard component. Registers Chart.js with CategoryScale, LinearScale, PointElement, LineElement, BarElement, Filler, Tooltip, Legend. Renders 7 tabs (Production vs Consumption, Country Trends, Trade Flows, Stock-to-Use, WASDE Delta, Closing Stocks, Divergence Tracker) using useState for active tab. ProductionConsumptionChart renders a Chart.js Line chart with filled area datasets for World Production (color #4A7C2C) and World Consumption (color #E...) across 7 seasons. CHART_DARK theme object defines borderColor, gridColor, tickColor for dark mode. chartDefaults object configures responsive, maintainAspectRatio:false, 800ms easeOutQuart animation, dark tooltip (background rgba(15,20,25,0.94)), and per-axis dark grid/border colors. A separate Three.js canvas (via useRef, not R3F) decorates the module background with 10 COUNTRY_COLORS for data series.

As a frontend developer, implement the DashboardTradePositioningModule section for the Dashboard page. Wraps in ModuleCard. Uses Chart.register(...registerables) for full Chart.js registration. Renders a COT data table with 5 rows (Managed Money, Commercial Hedgers, Swap Dealers, Other Reportables, Total Reportable) each with long/short/net/deltaLong/deltaShort/deltaNet columns and conditional row classes (dtp-row-mm, dtp-row-total). A FreshnessBadge sub-component displays data freshness status. Chart tabs render: MANAGED_MONEY_WEEKLY (52-week net positioning line, array-generated with sine wave), COMMERCIAL_HEDGER_DATA (52-week cosine-based net), OI_WEEKLY (26-week open interest + price dual-axis), EXPORT_SALES_WEEKLY/EXPORT_CUMULATIVE vs USDA_SEASONAL target, DESTINATION_COUNTRIES donut/bar (China 285k, Vietnam 192k, Pakistan 158k, Turkey 124k, Bangladesh 98k, Mexico 72k). Uses @react-three/fiber Canvas with OrbitControls for 3D decorative element. Lucide icons: Info, TrendingUp, TrendingDown, Minus for delta indicators.

As a frontend developer, implement the DashboardMacroDriversModule section for the Dashboard page. Wraps in ModuleCard imported from '../sections/ModuleCard'. Registers Chart.js with CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler. Renders 7 tabs: DXY Trend, WTI Crude, Cotton/WTI, PSF Prices, Cotton/PSF, 3-Line Norm., Sub. Risk — each with emoji icon. Data generation: DXY_VALUES (90-day bearish walk from 106.2, clamped 102.5-108), WTI_VALUES (90-day from 72.5, clamped 65-82) with WTI_MA20 rolling average, CWTI_VALUES (90-day ratio from 0.98, clamped 0.78-1.22) with CWTI_MEAN=0.94, PSF_INR (52-week from 98.5, clamped 91-107) and PSF_USD (52-week from 1185) dual-axis. Uses @react-three/fiber Canvas with MeshDistortMaterial, Sphere, Torus, Float from @react-three/drei for animated 3D macro visualization element. generateDates helper produces date labels with weekly flag.

As a frontend developer, implement the DashboardIndiaIntelligenceModule section for the Dashboard page. Wraps in ModuleCard. Registers Chart.js with CategoryScale, LinearScale, PointElement, LineElement, BarElement, Title, Tooltip, Legend, Filler. Renders a 3D India map visualization via @react-three/fiber Canvas with OrbitControls and Html (from @react-three/drei) using three coordinate arrays: INDIA_OUTLINE_WEST (44 points), INDIA_OUTLINE_EAST (30 points), INDIA_OUTLINE_SOUTH (18 points) to construct the map geometry. COTTON_MARKERS array places 8 interactive 3D markers at cotton hub coordinates (Rajkot, Akola, Guntur, Adoni, Sirsa, Bathinda, Dhule, Bhatinda) with arrivals data, change percentages, and state labels shown via Html overlay. Uses useState, useMemo, useRef, useCallback, Suspense. Renders Line and Bar charts from react-chartjs-2 for arrivals trends and state-level data.

As a frontend developer, implement the DashboardCompetingCropsModule section for the Dashboard page. Wraps in ModuleCard. Renders 6 tabs: USA Price Index, USA Acreage, Price Ratios, India Kharif Acreage, India MSP Table, Competition Notes. USDA_CROPS array defines Cotton (#E8B923), Soybean (#4A7C2C), Corn (#C97B2C), Wheat (#FF6B6B) with dotClass CSS identifiers. PRICE_INDEX_DATA provides 12-month indexed values (base 100) for all four crops. ACREAGE_DATA covers 4 seasons with million-acre values per crop. PRICE_RATIO_DATA provides cottonSoybean (avg 0.087) and cottonCorn (avg 0.103) monthly ratios with mean reference lines. INDIA_ACREAGE_DATA covers 8 states × 6 crops matrix. Uses @react-three/fiber Canvas with OrbitControls, Text (from @react-three/drei), and THREE.js Line for 3D comparative crop visualization. Also imports Line from react-chartjs-2 for 2D chart tabs. Uses useState, useEffect, useRef, useMemo, useCallback.

As a frontend developer, implement the DashboardBacktestModule section for the Dashboard page. Wraps in ModuleCard. Registers Chart.js with LinearScale, PointElement, LineElement, BarElement, Tooltip, Legend, CategoryScale, Filler. Renders ACCURACY_SUMMARY cards (Near-Term MAE 1.82¢/lb 'good', 1-Week MAE 2.47¢/lb 'good', 1-Month MAE 3.91¢/lb 'warn') with badge styling. SCATTER_DATA (45 points, actual vs predicted with absError coloring) rendered via Chart.js Scatter. CUTOFF_ERRORS bar chart (20 cutoff dates). DIRECTION_ACCURACY gauge showing 72.4% over 340 samples with DIRECTION_TIMELINE bar (6 months, 70-75% range). ROLLING_MAE line chart (60 days). FULL_RESULTS table with cutoff/lastClose/predicted/actual/absError/gatePass columns. Uses @react-three/fiber Canvas with Torus, Sphere from @react-three/drei and useFrame for animated 3D accuracy visualization. Lucide icons: Download, TrendingUp, TrendingDown, Minus, AlertCircle. useState for active tab, useRef for chart instances, useMemo/useCallback for data transforms.

As a frontend developer, implement the SupplyDemandHero section for the Supply Demand page. Features a @react-three/fiber Canvas with a CottonBollGeometry component: a central sphere (radius 0.42) plus 4 surrounding boll segments, an accent torusGeometry ring in gold (#E8B923), all grouped under a ref that rotates continuously via useFrame (rotation.y += delta * 0.7, rotation.x += delta * 0.2). Canvas uses dpr=[1,1.5], alpha:true, camera at position [0,0.15,1.8] fov=32. Breadcrumb navigation array renders cotton-intelligence-platform / Modules / Supply & Demand. Uses useRef and useMemo. Styled with SupplyDemandHero.css.

As a frontend developer, implement the GlobalSupplyDemandOverview section for the Supply Demand page. Registers Chart.js with CategoryScale, LinearScale, BarElement, LineElement, PointElement, Title, Tooltip, Legend, Filler and renders Bar and Line charts from react-chartjs-2. Data includes SEASONS array ['2020/21'–'2024/25*'], PRODUCTION_DATA [113.2–117.0], CONSUMPTION_DATA [121.5–115.8], SURPLUS_DEFICIT computed per season, and COUNTRY_CONSUMPTION object for 9 countries (China, India, Pakistan, Bangladesh, Turkey, Vietnam, USA, Brazil, Australia) each with 5-season data arrays and unique colors. Includes a GlobeBackdrop component using THREE.js directly (not fiber): SphereGeometry wireframe globe (radius 1.2, opacity 0.35, color #4A7C2C), two TorusGeometry orbital rings with rotation. Uses useState, useRef, useEffect, useMemo. Styled with GlobalSupplyDemandOverview.css.

As a frontend developer, implement the Footer section for the Supply Demand page. This component may already exist from Dashboard or Forecast pages — reuse if available. Uses framer-motion (motion.div with whileHover scale spring) and react-icons (FaLinkedinIn, FaTwitter, FaGithub, FaYoutube). Features three link columns: PRODUCT_LINKS (Dashboard, Forecast, Supply & Demand, India Intelligence, Trade Positioning), COMPANY_LINKS, RESOURCE_LINKS (Crop Weather, Macro Drivers, Backtest, Model Registry, Competing Crops). Animated SVG logo using an SVG path (LOGO_PATH_LENGTH=120) with pathReady state set via 100ms setTimeout. Includes ftr-parallax-bg with two orb divs, ftr-parallax-mid with two line divs using CSS custom property --scroll for parallax offset. Shimmer accent top border. Styled with Footer.css.

As a frontend developer, implement the Footer section for the Trade Positioning page. This component may already exist from previous pages (Dashboard, Forecast, Supply Demand). The Footer uses framer-motion for logo hover scale (1.03 spring, stiffness 300, damping 20) and renders three link columns: PRODUCT_LINKS (5 items routing to Dashboard, Forecast, Supply Demand, India Intelligence, Trade Positioning), COMPANY_LINKS (5 items), and RESOURCE_LINKS (5 items routing to Crop Weather, Macro Drivers, Backtest, Model Registry, Competing Crops). Social icons rendered via react-icons/fa: FaLinkedinIn, FaTwitter, FaGithub, FaYoutube. Decorative parallax background includes two orb divs (ftr-parallax-bg-orb--1/2) on a 0.2x scroll layer and two line divs (ftr-parallax-mid-line--1/2) on a 0.4x scroll layer using CSS custom property --scroll. SVG logo uses LOGO_PATH with LOGO_PATH_LENGTH=120 for stroke-dasharray animation. State: pathReady (boolean) set via setTimeout(100ms) in useEffect for SVG path animation readiness. Imports from ../styles/Footer.css.

As a frontend developer, implement the MacroDriversHero section for the Macro Drivers page. Uses useRef (canvasRef, animRef) and useState for freshnessDate (computed once via initializer — formats current date as YYYY-MM-DD HH:MM UTC). Mounts a Three.js scene via useEffect: creates a PerspectiveCamera (FOV 60, z=5), WebGLRenderer with alpha and antialias:false, and a BufferGeometry Points cloud of 80 particles using PointsMaterial (color 0x4a7c2c, size 0.028, AdditiveBlending). Animation loop rotates points.rotation.y += 0.0008, applies sinusoidal x-rotation, and perturbs z-positions per particle. Cleans up renderer, geometry, material, and removes domElement on unmount. JSX renders: mdh-root section, mdh-canvas-wrap div (ref=canvasRef), mdh-scanlines decorative overlay div, and mdh-glow radial glow div behind headline.

As a frontend developer, implement the DXYTrendPanel section for the Macro Drivers page. Registers Chart.js plugins: CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler. Uses generateDXYData() to produce 90-day DXY mock data with seed 103.5, including dxyValues, ma20Values, ma90Values (sparse — only populated at index 88), currentDXY, change20d, pctChange20d, ma20Current, and ma90Current. Renders a react-chartjs-2 Line chart with three datasets (DXY, MA20, MA90). Imports TrendingUp, TrendingDown, DollarSign, AlertCircle from lucide-react for stat badges. Also includes a DXYParticleField sub-component using Three.js: PerspectiveCamera (FOV 55, z=7), mouse-reactive cursor tracking via mouseRef and targetMouse useRef with lerped interpolation, WebGLRenderer with antialias:true. Stat cards display currentDXY, change20d, pctChange20d, ma20Current, ma90Current with conditional trend icons.

As a frontend developer, implement the CrudeoilPanel section for the Macro Drivers page. Uses generateWTIData() producing 90-day WTI price data with base 77.4 and realistic drift/shock simulation (random shocks with 8% probability, clamped $66-$86), computing ma20 (null for first 19 days), currentPrice, change20d, changePct, high90d, and low90d. Uses useState hooks: tooltipData, tooltipPos, mounted, and data (initialized from generateWTIData). Three.js decorative particle field mounts in canvasRef: PerspectiveCamera (FOV 50, z=8), WebGLRenderer alpha:true antialias:false; uses SphereGeometry (r=0.035) with matOrange (0xc97b2c, opacity 0.42) and matGold MeshBasicMaterials. Imports Droplets, TrendingUp, TrendingDown, Lightbulb from lucide-react. Renders a react-chartjs-2 Line chart with WTI price and MA20 datasets, custom tooltip state managed via setTooltipData/setTooltipPos, and stat cards showing currentPrice, change20d, changePct, high90d, low90d.

As a frontend developer, implement the CottonWTIRatioPanel section for the Macro Drivers page. Uses generateRatioData() producing 90-day Cotton/WTI ratio data (base val 1.42, mean 1.48, noise + trend, clamped 1.25-1.75). Computes module-level constants: currentRatio, prevRatio, isTrendingUp, deviationFromMean, absDeviation, and crossovers array (detecting mean crossings with direction 'above'/'below'), sliced to recentCrossovers (last 3). Includes RatioGauge sub-component using Three.js: PerspectiveCamera (FOV 45, z=3.8), TorusGeometry outer ring (r=1.0, tube=0.06), active arc fill ratio based on deviation. Uses framer-motion for animations (motion imports). Registers Chart.js: CategoryScale, LinearScale, PointElement, LineElement, Tooltip, Filler. Renders react-chartjs-2 Line chart with ratio and mean reference line. Uses useMemo for chart data construction.

As a frontend developer, implement the PSFPricePanel section for the Macro Drivers page. Uses 52-week WEEK_LABELS array and three data-builder functions: buildPSFSeries() (base 1120, seasonal + trend + noise), buildCottonRebased() (random walk base 100), buildWTIRebased() (random walk base 100, higher vol). Computes PSF_REBASED via min-max normalization to 90-110 range. Module-level constants: CURRENT_PSF_USD, CURRENT_PSF_INR (×83.45 FX rate), PREV_PSF_USD, CHANGE_USD, CHANGE_PCT. Includes PSFAcentScene sub-component using Three.js: PerspectiveCamera (FOV 35, z=4.5) mounted via mountRef prop. Registers Chart.js: CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Filler, Legend. Renders react-chartjs-2 Line chart with PSF USD, Cotton rebased, WTI rebased, and PSF rebased datasets across 52 weeks. Stat display shows current PSF in both USD and INR, week-on-week change and percentage.

As a frontend developer, implement the CottonPSFRatioPanel section for the Macro Drivers page. Uses generateRatioData() producing 180 trading days of Cotton/PSF ratio values (base 1.22, with trend, seasonal sin wave, noise; special rules: val increases for last 15 days, decreases for i>140). Computes MA_VALUES via calcMA() with 90-day window (null for first 89 entries). Module-level constants: currentRatio, currentMA, ratioMin, ratioMax. Includes determineRisk() function returning 'HIGH'/'MEDIUM'/'LOW' based on ratio vs MA thresholds (1.06× and 1.02×) and riskLabel() mapping. Implements a custom Chart.js plugin (ratioZonePlugin with id 'ratioZonePlugin') in beforeDatasetsDraw hook that colors zones above/below the MA reference line using ctx fill operations. Registers Chart.js: CategoryScale, LinearScale, PointElement, LineElement, Filler, Tooltip, Legend. Uses Three.js accent scene. Renders react-chartjs-2 Line chart with ratio, MA line datasets and the zone plugin.

As a frontend developer, implement the NormalisedComparisonPanel section for the Macro Drivers page. Uses generateNormalisedData() producing 180-day rebased-to-100 price series for Cotton (vol 1.2, drift +0.032), PSF (vol 0.7, drift -0.018), and WTI (vol 2.1, drift +0.04) with partial correlation (corr factor 0.35). All series clamped: cotton 75-130, psf 70-120, wti 60-135. Includes generateInsight() function that computes last-20-session averages, full-period changes for cotton/psf/wti, and returns JSX with ncp-insight-highlight span elements conditionally rendered based on cotton-vs-PSF diff threshold (>3 pts). Imports Download, FileSpreadsheet, TrendingUp from lucide-react for export/action buttons. Three.js accent scene included. Registers Chart.js: CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler. Renders react-chartjs-2 Line chart with three datasets (Cotton, PSF, WTI rebased) plus dynamic insight text block.

As a frontend developer, implement the MacroDriversInsights section for the Macro Drivers page. Uses INSIGHT_COLUMNS array with three column configs: 'currency' (DXY analysis, metricValue '98.52', metricChange '+0.34', direction 'up'), 'energy' (WTI crude / PSF feedstock analysis, $72-$78/bbl band, 55-62% PSF cost share), and a third column. Each column has iconPath (SVG path string), title, JSX text content with mdi-highlight span elements for key terms (e.g. 'DXY', 'monetary policy divergence', 'USD-denominated cotton exports', '-0.62' correlation), metricLabel, metricValue, metricChange, metricDirection. Uses Three.js accent scene mounted via useRef. useState for expanded/active column state. useEffect for Three.js lifecycle. Renders three insight cards in a grid, each with SVG icon, title, rich text body, and metric badge showing current value and directional change indicator.

As a frontend developer, implement the Footer section for the Macro Drivers page. Shared component — may already exist from Dashboard, Admin Dashboard, Forecast, Supply Demand, or Trade Positioning pages. Uses PRODUCT_LINKS (Dashboard, Forecast, Supply Demand, India Intelligence, Trade Positioning), COMPANY_LINKS (About→/Landing, Login, Admin Dashboard), and RESOURCE_LINKS (Crop Weather, Competing Crops, Macro Drivers, Backtest, Model Registry) arrays. SOCIAL_ICONS uses react-icons/fa: FaLinkedinIn, FaTwitter, FaGithub, FaYoutube. Includes animated SVG logo using LOGO_PATH (cotton boll/leaf mark, pathLength 120) with pathReady state. Three.js particle field in canvasRef: PerspectiveCamera (FOV 60, z=6), WebGLRenderer alpha antialias:false, 55 SphereGeometry particles (r=0.04) in three materials: matPrimary (0x4a7c2c), matSecondary (0xc97b2c), matAccent (0xe8b923). Particles have individual speedX/speedY and baseY for sinusoidal drift animation. framer-motion used for entrance animations on link columns.

As a frontend developer, implement the IndiaIntelligenceHero section featuring: a cursor-reactive Three.js ParticleField (200 particles with vertexColors mixing colorPrimary #4a7c2c, colorSecondary #c97b2c, colorAccent #e8b923, PointsMaterial with AdditiveBlending, opacity 0.7, size 0.06) rendered via @react-three/fiber Canvas; mouse tracking via useEffect/useState cursor {x,y} in normalized space; useFrame animation driving per-particle sinusoidal drift toward cursor; QUICK_LINKS array of 5 items (Arrivals→BarChart3 icon, Pressing→Gauge, Prices→TrendingUp, Basis→ArrowLeftRight, Stocks→Layers) from lucide-react with targetId scroll anchors (in-slot-kapasarrivalssection etc.); hero headline, subheadline, and badge text referencing India Cotton Intelligence module; MapPin icon for India branding. Responsive layout with text column and 3D canvas column.

As a frontend developer, implement the KapasArrivalsSection featuring: Chart.js stacked Bar chart (CategoryScale, LinearScale, BarElement, Filler, Tooltip, Legend registered) showing weekly Kapas arrivals in lakh bales across 29 SEASON_WEEKS; STATES array of 11 Indian states (Maharashtra, Gujarat, Telangana, Karnataka, Andhra Pradesh, Haryana, Madhya Pradesh, Punjab, Rajasthan, Odisha, Others) each with rgba color and border color; generateSeasonData(baseScale) function producing ramp/peak/taper pattern across weeks; distributeArrivals(total) randomizing state-wise shares summing to 1; SEASON_DATA built for multiple seasons with buildSeasonDataset(scale); state toggle for season selection; Three.js decorative background; scroll-triggered reveal via IntersectionObserver; responsive grid layout with chart area and legend/state filter sidebar. Data freshness timestamp per SRD requirements.

As a frontend developer, implement the CottonPressingSection featuring: Chart.js mixed Bar+Line chart (CategoryScale, LinearScale, BarElement, LineElement, PointElement, Filler, Tooltip, Legend) using react-chartjs-2 Chart component; 52-week WEEK_LABELS array; generateSeasonData(baseStart, peakMult, skew) producing weekly pressing bales and cumulative totals with ramp/peak/taper phases; SEASON_DATA object with CY2425/CY2324/CY2223/CY2122 seasons; CHART_COLORS for weekly bars (rgba 74,124,44), cumulative line (#C97B2C), and 3 prior season overlays (fading gray); MILLS array of 5 regional ginning centres (Maharashtra Vidarbha, Gujarat Saurashtra, Telangana, Punjab, Rajasthan) each with status ok/warn/crit, gins count, and utilization %; activeSeason useState toggle; scroll-triggered IntersectionObserver reveal via revealRef/setRevealed; Three.js decorative canvas via canvasWrapRef/animRef; framer-motion AnimatePresence for transitions; AlertTriangle/Factory/TrendingUp/AlertCircle/ChevronDown lucide icons; ginning mill status table with colour-coded rows.

As a frontend developer, implement the IndiaSpotPricesSection featuring: Chart.js Line chart (CategoryScale, LinearScale, PointElement, LineElement, Filler, Tooltip, Legend) via react-chartjs-2; 5 price series generated by generatePriceSeries(base, amplitude, trend) for MCX Futures (base 57200), Rajkot Spot (54900), Akola Spot (54100), Guntur Spot (55300), Adoni Spot (54500) across 7 months (Oct–Apr) with DAYS_PER_MONTH array; MARKET_CONFIG array with key/label/color/cssClass/swClass for each market; RANGE_OPTIONS array (1M=30days, 3M=90days, 6M=all) for time range toggle; getStats(series) computing last price, day change/pct, 52-week high/low, mean, volatility%; active range useState, active market toggle, activeMarkets Set state; @react-three/fiber Canvas with OrbitControls and DreiText for 3D decorative element; TrendingUp/Clock/CalendarDays/BarChart3/Maximize2 lucide icons; stat cards grid showing last price, change, high/low, volatility; responsive legend with swatch dots; Suspense fallback for 3D canvas.

As a frontend developer, implement the CAIEstimateSection featuring: static data constants CURRENT_ESTIMATE (30.2 mn bales), MOM_DELTA (-0.8, -2.6%, direction down), PRIOR_SEASON (32.1 mn bales), CLOSING_STOCK (5.4 mn bales, 18% of consumption); REVISION_HISTORY array of 4 months (Mar–Jun) each with value/change/dir/isLatest; CONTEXT_NOTES array of 3 items (monsoon note, arrival pace note, ginning readiness note) with icon/iconClass/text; @react-three/fiber Canvas with OrbitControls, Text (@react-three/drei), and CottonBollCluster component featuring sphereGeometry central boll, 6 surrounding fluff meshes, meshStandardMaterial with emissive hover glow (#e8b923), useFrame rotation animation (sin/cos oscillation), onPointerEnter/Leave/click handlers; isHovered state per boll; framer-motion AnimatePresence for revision history panel transitions; headline metrics grid with large number display; context notes list with icon badges; full balance sheet panel layout.

As a frontend developer, implement the BasisChartSection featuring: Chart.js Line chart (CategoryScale, LinearScale, PointElement, LineElement, Filler, Tooltip, Legend) via react-chartjs-2; generateBasisData() returning 7-month arrays (Nov–May) with basis values in cents/lb (ranging -5.5 to -1.8), 30-day MA, and 60-day MA with null padding for early months; Three.js particle field via BasisParticleField component using imperative THREE.Scene/Camera/WebGLRenderer (not fiber Canvas) with 40 sphere particles using matPrimary (0x4a7c2c), matSecondary (0xc97b2c), matAccent (0xe8b923), sinusoidal drift animation via requestAnimationFrame; canvasRef for Three.js mount/unmount; TrendingUp/TrendingDown/Info/Minus lucide icons for basis direction indicator; framer-motion motion.div entrance animations; basis interpretation legend (premium=positive, parity=near-zero, discount=negative); current basis stat card with directional icon; MA reference lines on chart; responsive split layout with chart and interpretation panel.

As a frontend developer, implement the CarryoverStockSection featuring: SEASON_DATA array of 4 seasons (2025-26 current at 52.3 lakh bales, 2024-25 at 46.1, 2023-24 at 49.0, 2022-23 at 42.5) with indexed values (100 = SEASON_AVERAGE 48.25); buildBarChartData(normalized, datasets, opts) and buildLineChartData(normalized, datasets) builders producing Chart.js configs with current season colored #2D5016 and prior seasons #5A5A5A; barChartOptions with dark tooltip (rgba 15,20,25,0.94), custom grid colors; react-chartjs-2 Bar and Line components; normalized/raw toggle useState; @react-three/fiber Canvas with OrbitControls and Text (@react-three/drei) for 3D decorative accent; framer-motion useInView hook from framer-motion for scroll-triggered entrance; motion.div wrappers; ModuleCard import from ./ModuleCard for summary KPI cards; chart type toggle (bar vs line); season comparison table below charts; responsive grid with chart on left and stats/notes on right.

As a frontend developer, implement the DataFreshnessPanel featuring: SOURCES array of 5 pipeline entries (CAI monthly, MCX daily, Agmarknet daily-delayed, CAI-crop monthly, DACFW weekly-failed) each with id/name/freq/lastUpdated/sla/slaLabel/alert fields; SLA_STYLES map (on-time→FiShield green, delayed→FiClock orange, failed→FiAlertTriangle red) using react-icons/fi; summary counters onTimeCount/delayedCount/failedCount computed from sources state; retryingId useState for simulating pipeline retry UX; Three.js imperative particle field via canvasRef (not fiber) with 38 sphere particles using matOnTime (0x4a9e3f), matDelayed (0xc97b2c), matAccent (0x4a7c2c), requestAnimationFrame animation loop; framer-motion motion.div animations; FiClock/FiRefreshCw/FiExternalLink/FiAlertTriangle/FiActivity/FiShield icons from react-icons/fi; source rows with SLA badge, last-updated timestamp, alert message expansion; retry button triggering retryingId state with FiRefreshCw spin animation; overall pipeline health summary card at top.

As a frontend developer, implement the Footer section for India Intelligence. This reuses the shared Footer component (may already exist from previous pages) featuring: Three.js imperative particle field (not @react-three/fiber) via canvasRef/animRef with 55 sphere particles using matPrimary (0x4a7c2c), matSecondary (0xc97b2c), matAccent (0xe8b923), each with speedX/speedY/baseY drift, requestAnimationFrame loop, alpha:true WebGLRenderer; PRODUCT_LINKS (Dashboard, Forecast, Supply Demand, India Intelligence, Trade Positioning), COMPANY_LINKS (About, Login, Admin Dashboard), RESOURCE_LINKS (Crop Weather, Competing Crops, Macro Drivers, Backtest, Model Registry); SOCIAL_ICONS using FaLinkedinIn/FaTwitter/FaGithub/FaYoutube from react-icons/fa; animated SVG logo path (LOGO_PATH cotton boll, LOGO_PATH_LENGTH 120) with pathReady useState delayed 100ms for stroke-dashoffset draw-on animation; framer-motion motion.div/motion.a for social icon hover scale; shimmer top accent border; responsive 3-column link grid; copyright row; Three.js canvas cleanup on unmount.

As a frontend developer, implement the CropWeatherHero section for the Crop Weather page. Features a Three.js @react-three/fiber Canvas accent (cwh-threejs-accent) with a ParticleCluster component: 16 spherical particles positioned on a circular ring (radius 1.2–2.0) with alternating green (#4A7C2C), gold (#E8B923), and orange (#C97B2C) emissive materials. A torus ring geometry (args=[1.45, 0.015, 16, 48]) orbits the cluster. The group rotates via useFrame: rotation.y at 0.25x elapsed time and a sine-wave x-tilt at 0.15x. Camera positioned at [0, 0.3, 3.2] fov 38 with ambient + two point lights (gold and green). Stat cards use inline SVG icons: SeedlingIcon, RainIcon, and WaveIcon with custom stroke paths. Section uses framer-motion for entrance animations.

As a frontend developer, implement the CropProgressHistory section for the Crop Weather page. Renders three animated stat cards from CARD_DATA array (Planted 94%, Good/Excellent Condition 62%, Harvested 78%) each with a 5-year average delta indicator. Each card features a ProgressRing SVG component using framer-motion animate on a circle element: strokeDasharray computed from circumference C=2πR (R=54), animating strokeDashoffset from C to C*(1-pct/100) over 1.2s easeInOut on visibility trigger. Ring CSS classes: cph-ring-progress--planted, --condition, --harvested. Background uses a Three.js ParticleField with 120 points (bufferGeometry with Float32Array positions and colors), animated via useFrame with per-particle sine/cosine drift (elapsedTime*0.25). useState tracks intersection visibility for triggering ring animations.

As a frontend developer, implement the GrowingRegionHighlight section for the Crop Weather page. Renders 6 regional cards from the REGIONS array (Texas High Plains, Gujarat, Mato Grosso, Xinjiang, Queensland, Sindh) each with anomaly value, anomalyLabel, forecastRainfall, ensoSensitivity, and cropNote fields. Each card includes an inline Sparkline SVG (120×36px with padding=2) that renders a polyline path from a 6-point data array, with path color determined by getSparklineColor() helper returning #4ADE80 (green), #F87171 (red), or #F59E0B (amber) based on anomaly threshold (≥0.5 green, ≤-1.5 red). Anomaly display uses getAnomalyClass() for CSS class assignment (grh-anomaly--green/red/amber). formatAnomaly() prepends + sign for positive values. Three.js Canvas background rendered via @react-three/fiber with useFrame animation. useState/useCallback manage active region selection and hover states.

As a frontend developer, implement the Footer section for the Crop Weather page. This component may already exist from previous pages (Macro Drivers, India Intelligence). Uses vanilla Three.js (not @react-three/fiber) — renderer and scene are manually constructed via useEffect with a canvasRef. Spawns 55 particle meshes (SphereGeometry r=0.04) across 3 materials: matPrimary (#4a7c2c op 0.5), matSecondary (#c97b2c op 0.45), matAccent (#e8b923 op 0.35). Each particle has individual speedX/speedY drift values. Animated logo uses an SVG path (LOGO_PATH cotton boll shape, pathLength=120) with stroke-dashoffset draw-on animation via pathReady state. Link columns: PRODUCT_LINKS (5 items), COMPANY_LINKS (3 items), RESOURCE_LINKS (5 items). Social icons via react-icons/fa: FaLinkedinIn, FaTwitter, FaGithub, FaYoutube. Cleanup via animRef cancellation and renderer disposal. Reuse existing Footer component if available.

As a frontend developer, implement the `BacktestHero` section with a Three.js imperative particle field (not R3F). Mount a `THREE.WebGLRenderer` onto `canvasRef` via `useEffect`, creating primary green (`0x4a7c2c`) and gold (`0xe8b923`) particle spheres using `SphereGeometry(0.03)` and `SphereGeometry(0.05)` with per-frame animation loop stored in `animRef`. Render `QUICK_TABS` (Accuracy Summary, Direction Accuracy, Rolling MAE, Full Results) as a tab strip with `activeTab` useState and `TabIcon` component that switches between inline SVG icons (bar-chart, trending-up, activity, table) based on `icon` prop. Display `BADGES` (Live Model, 720 Cutoffs, Prophet + LSTM) as styled pill tags with `type` variant classes. Apply BacktestHero.css styles.

As a frontend developer, implement the `ModelAccuracySummary` section displaying 3 `METRICS` cards: Near-Term MAE (0.24¢/lb, -18% trend), 1-Week MAE (0.67¢/lb, -11% trend), 1-Month MAE (1.83¢/lb, +9% trend). Each metric card renders an SVG icon from `iconPath`/`iconViewBox`, the metric `value`, `unit`, `horizon` label, and a `trend` indicator ('up'/'down') with `trendLabel`. Mount a Three.js ambient particle field on `canvasRef` via `useEffect`: 40 spheres (`SphereGeometry(0.025, 6, 6)`) split between gold accent (`0xe8b923`, opacity 0.25) and muted (`0xa0a0a0`, opacity 0.15) materials, each with individual `speedX`/`speedY`/`amp`/`freq` properties for sinusoidal drift, animated via `tick += 0.004` render loop stored in `animRef`. Apply ModelAccuracySummary.css styles.

As a frontend developer, implement the `AbsoluteErrorAnalysis` section with 8+ `CUTOFF_DATA` entries (May 2024–Dec 2024) each containing 4 error-bucket segments (`0–1¢`, `1–2¢`, `2–3¢`, `3+¢`) with `cents` and `pct` values, a `total` sum, and a `gatePassed` boolean. Render an interactive segmented horizontal bar chart per cutoff row, coloring each segment bucket distinctly and marking gate-passed rows (Aug 2024, Oct 2024) with a visual indicator. Use `useState` and `useCallback` for selected cutoff detail expansion. Mount a Three.js decorative background on `canvasRef` via `useEffect` with green and gold particle spheres. Apply AbsoluteErrorAnalysis.css styles.

As a frontend developer, implement the `DirectionAccuracy` section with a Three.js `RingScene` component mounted on `mountRef`. Build 4 concentric `TorusGeometry(2.6, 0.18/0.2, 32, 128)` rings: a dark track ring (rotation.x = Math.PI*0.5) and a gold progress ring (color 0xE8B923, rotation.z = Math.PI to start from top), an inner glow sphere (`SphereGeometry(2.1, 48, 48)`, opacity 0.06), and 40 ambient particle spheres split between gold and green materials. Render `HORIZON_ROWS` table (1-Day 68.4%, 1-Week 71.9%, 1-Month 74.6%, 3-Month 76.2%, 6-Month 72.8%) with `cutoffs` count and `trend` string per row. Display `OVERALL_ACCURACY` (73.6%) as the central ring label, `TOTAL_CUTOFFS` (247), `TREND` ('+2.8% vs prior quarter'), and `DATA_TIMESTAMP`. Use `useState`/`useCallback` for row hover highlight. Apply DirectionAccuracy.css styles.

As a frontend developer, implement the `HistoricalCutoffTable` section displaying a large `CUTOFF_DATA` array (20+ rows) with columns: `date`, `lastClose`, `predicted`, `actual`, `error` (¢/lb), `dirCorrect` (boolean), and `horizon` (1-day/1-week). Use `useMemo` for derived sort/filter state and `useState` for sort column, sort direction, active horizon filter, and page/pagination state. Render each row with color-coded `error` magnitude (low/medium/high thresholds) and a directional accuracy badge (green check / red cross) based on `dirCorrect`. Mount a Three.js background on `canvasRef` via `useEffect`. Include column header sort click handlers and horizon filter tab strip. Apply HistoricalCutoffTable.css styles.

As a frontend developer, implement the `BacktestMetaInfo` section displaying 8 `META_ITEMS` (Model Version v2.3-Prophet-LSTM, Training Data Range Jan 2019–Jun 2024, Validation Set Size 15% with '3.3 years holdout' sub-label, Total Cutoffs 1,247, Ensemble Weights Prophet 60%/LSTM 40%, Last Model Retrain 2026-05-15, Feature Set Version v4.2, Prediction Horizon 365 days) in a labeled key-value grid. Mount a Three.js animated ring background on `canvasRef`: 4 concentric `RingGeometry` rings in a `ringGroup` alternating gold (`0xe8b923`) and green (`0x4a7c2c`) colors (opacity 0.08–0.17), each with individual rotation speed (0.08–0.20 rad/s) and `rotation.x = Math.PI*0.55`. Add 40 scattered dot spheres (`SphereGeometry(0.025)`) using 3 material variants (gold, green, amber `0xc97b2c`) with drift animation. Apply BacktestMetaInfo.css styles.

As a frontend developer, implement the `Footer` section with three link columns: `PRODUCT_LINKS` (Dashboard, Forecast, Supply & Demand, India Intelligence, Trade Positioning), `COMPANY_LINKS` (About Us, Careers, Contact, Privacy Policy, Terms of Service), and `RESOURCE_LINKS` (Crop Weather, Macro Drivers, Backtest Reports, Model Registry, Competing Crops). Render brand column with animated cotton-boll SVG logo (`LOGO_PATH`, `LOGO_PATH_LENGTH = 120`) using `pathReady` state (setTimeout 100ms) for stroke-dashoffset draw animation via framer-motion. Include `SOCIAL_ICONS` row: FaLinkedinIn, FaTwitter, FaGithub, FaYoutube from `react-icons/fa` with hover scale via `whileHover`. Add `ftr-accent-border` shimmer top border and two parallax decorative layers (bg orbs at -0.2x, mid lines at -0.4x via `--scroll`). Note: this Footer component already exists from Landing and other pages — reuse it without reimplementing. Apply Footer.css styles.

As a frontend developer, implement the Navbar section for the Competing Crops page. This component may already exist from previous pages (Landing, Login, India Intelligence, Crop Weather, Backtest) and should be reused or referenced. The Navbar uses framer-motion hooks (useScroll, useTransform, useSpring, AnimatePresence) to create a scroll-driven background opacity transition from rgba(15,20,25,0.85) to rgba(15,20,25,0.98) and a backdrop blur from 8px to 16px over the first 80px of scroll. It includes the CottonLeafLogo SVG component with a spring-animated 12-degree rotation on hover (stiffness 300, damping 18) and animated stroke-dashoffset vein reveals with staggered transition delays (0.45s, 0.55s, 0.6s). Navigation links (Product→/Dashboard, Modules→/Forecast, Company→/Landing) are rendered with AnimatePresence for a mobile drawer toggled by mobileOpen useState. Shadow opacity animates from 0 to 0.4 over 60px scroll via useSpring (stiffness 200, damping 30).

As a frontend developer, implement the Footer section for the Model Registry page. This component may already exist from previous pages (Landing, Login, Dashboard, etc.) — verify reuse before rebuilding. Uses framer-motion motion.div with whileHover scale:1.03 spring transition (stiffness:300, damping:20) on the logo wrap. Features an animated SVG logo path (LOGO_PATH length ~120) with stroke-dashoffset animation gated by pathReady state set via setTimeout(100ms) in useEffect. Three link columns: PRODUCT_LINKS (Dashboard, Forecast, Supply & Demand, India Intelligence, Trade Positioning), COMPANY_LINKS (About Us, Careers, Contact, Privacy Policy, Terms of Service), RESOURCE_LINKS (Crop Weather, Macro Drivers, Backtest Reports, Model Registry, Competing Crops). SOCIAL_ICONS renders FaLinkedinIn, FaTwitter, FaGithub, FaYoutube from react-icons/fa. Decorative parallax layers use CSS custom property var(--scroll) with translateY at -0.2px and -0.4px multipliers. ftr-accent-border shimmer top border and two ftr-parallax-bg-orb decorative orbs positioned via ftr-parallax-bg-orb--1 and ftr-parallax-bg-orb--2 classes.

As a Tech Lead, verify the end-to-end integration between the PipelineHealthStatus and AdminHeaderBanner frontend implementations and the /api/admin/pipelines backend API. Ensure real pipeline status data replaces mock data, SLA percentages render correctly from API responses, the manual refresh trigger (POST /api/admin/pipelines/:id/refresh) calls the Airflow API and updates the UI, status color coding (healthy/warning/critical) matches backend enum values, and the 3D network graph renders correctly with live pipeline count. Verify auth middleware rejects unauthenticated requests with 401.

As a Tech Lead, verify the end-to-end integration between the AlertsAndFailures frontend task (15d5ec8a) and the /api/admin/alerts backend API. Ensure live alert data replaces mock PIPELINE_FAILURES array, severity filter and search params are correctly passed as query params, the acknowledge and retry POST endpoints are wired to UI buttons, auto-refresh interval fetches new alerts from the API, and the SSE stream (if implemented) updates the alert list in real time. Confirm RBAC — only admin role can acknowledge/retry.

As a Tech Lead, verify the end-to-end integration between the AirflowDAGStatus frontend task (ae49efc0) and the /api/admin/dags proxy API. Ensure DAG list loads from real Airflow data, task-level status breakdown is accurate, manual DAG trigger button calls POST /api/admin/dags/:dagId/trigger and shows loading/success/error state, run history renders correctly, and 60s polling keeps the UI fresh. Confirm the Airflow service account credential flow from AWS Secrets Manager through the proxy to the Airflow REST API.

As a Tech Lead, verify the end-to-end integration between the ModelRegistryPanel frontend task (b85b7acb) and the /api/models backend API. Ensure MODEL_DATA array is replaced with live API data, promote and rollback actions call the correct POST endpoints and optimistically update the UI, the comparison diff view fetches both selected model versions, status filter passes as query param, and the active model badge updates immediately on promotion. Confirm admin-only access for promote/rollback endpoints returns 403 for analyst/readonly roles.

As a Tech Lead, verify the end-to-end integration between the UserAccessControl frontend task (8fe2d5dc) and the /api/admin/users backend API. Ensure the INITIAL_USERS array is replaced with live API data, inline role dropdown changes call PATCH /api/admin/users/:id with optimistic update and rollback on error, active/inactive toggle calls the same endpoint, search and role filter pass as query params, and new user creation via POST /api/admin/users works. Confirm only admin role can access the user management UI — analyst/readonly should see 403.

As a frontend developer, implement the Footer section for the Competing Crops page. This component may already exist from previous pages (Landing, Login, India Intelligence, Crop Weather, Backtest) and should be reused or referenced. The Footer uses framer-motion for a logo wrap with whileHover scale:1.03 spring animation (stiffness 300, damping 20). It includes three link columns — PRODUCT_LINKS (Dashboard, Forecast, Supply & Demand, India Intelligence, Trade Positioning), COMPANY_LINKS (About Us, Careers, Contact, Privacy Policy, Terms of Service), and RESOURCE_LINKS (Crop Weather, Macro Drivers, Backtest Reports, Model Registry, Competing Crops). Social icons (FaLinkedinIn, FaTwitter, FaGithub, FaYoutube from react-icons/fa) are rendered in a row. An animated SVG cotton boll logo uses LOGO_PATH with LOGO_PATH_LENGTH=120 for stroke-dasharray animation, gated by a pathReady boolean state set via a 100ms setTimeout in useEffect with clearTimeout cleanup. Decorative parallax background layers use CSS custom property --scroll with translateY transforms at -0.2px and -0.4px multipliers, plus two ftr-parallax-bg-orb decorative divs and two ftr-parallax-mid-line divs.

As a Tech Lead, verify the end-to-end integration between the DataFreshnessMetrics (177b975f) and DataFreshnessPanel (6fec38d2) frontend tasks and the /api/admin/freshness backend endpoint. Ensure all 15 data source freshness scores replace mock SOURCES arrays, TIME_RANGES selector passes the time_range query param and chart re-renders with new data, compliant/warning/risk status badges derive from live freshness percentages, retry button in DataFreshnessPanel calls the pipeline refresh endpoint and shows spinner, and summary counters (onTimeCount/delayedCount/failedCount) compute correctly from API response.