From 2e797c89f6077b96d923398c48f2d651da339cd6 Mon Sep 17 00:00:00 2001 From: Satyam-Rastogi Date: Mon, 18 May 2026 16:49:37 +0530 Subject: [PATCH] =?UTF-8?q?feat(storm-intel):=20Storm=20Intelligence=20Hub?= =?UTF-8?q?=20=E2=80=94=20Phase=201?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds a new Storm Intel section to the sidebar and routes for ADMIN and OWNER roles. - StormIntelPage: full-height layout with Leaflet map + storm polygon overlays, severity-coded color system, horizontal filter bar (date range / severity / sort), and a scrollable storm event list - Storm detail drawer slides in from right with hail size, est. homes, days ago, conversion window indicator (Hot Zone / Warm / Cold / Too Fresh), intel text, and quick-action buttons (Create Lead, Open in Dispatch, Assign Canvassers stub) - Clicking a storm card or map polygon zooms the map to that polygon and opens the drawer - useStormEvents hook with USE_MOCK flag, date-range cutoff filter, type/severity filter, sort by date or severity, and conversionWindow() helper - api/storm-events.js: NWS api.weather.gov proxy (free, no auth needed), parses GeoJSON polygons and hail size from alert descriptions - MOCK_STORM_EVENTS: 7 realistic Plano TX storm events with accurate polygon coords - Sidebar: CloudLightning "Storm Intel" entry added for OWNER and ADMIN nav --- api/storm-events.js | 95 +++++ src/App.jsx | 17 + src/components/Layout.jsx | 4 +- src/data/mockStore.jsx | 119 +++++++ src/hooks/useStormEvents.js | 85 +++++ src/pages/StormIntelPage.jsx | 660 +++++++++++++++++++++++++++++++++++ 6 files changed, 979 insertions(+), 1 deletion(-) create mode 100644 api/storm-events.js create mode 100644 src/hooks/useStormEvents.js create mode 100644 src/pages/StormIntelPage.jsx diff --git a/api/storm-events.js b/api/storm-events.js new file mode 100644 index 0000000..5376974 --- /dev/null +++ b/api/storm-events.js @@ -0,0 +1,95 @@ +/** + * Proxies active NWS severe weather alerts for Texas to the frontend. + * No auth required — api.weather.gov is a free public endpoint. + * + * For historical data beyond 7 days, integrate NOAA Storm Events CSV API + * or SWDI (https://www.ncei.noaa.gov/pub/data/swdi/) in a future iteration. + * + * Response: array of normalised storm event objects (same shape as MOCK_STORM_EVENTS) + */ + +const NWS_HEADERS = { + 'User-Agent': 'PlanoRealtyCRM/1.0 (admin@plano-realty.com)', + Accept: 'application/geo+json', +}; + +function severityFromSize(inches) { + if (!inches || inches < 0.75) return 'none'; + if (inches < 1.00) return 'trace'; + if (inches < 1.50) return 'moderate'; + if (inches < 2.00) return 'significant'; + return 'severe'; +} + +function parseHailSize(text = '') { + const m = text.match(/(\d+\.?\d*)\s*inch/i) || text.match(/(\d+\.?\d*)"/) ; + return m ? parseFloat(m[1]) : null; +} + +export default async function handler(req, res) { + res.setHeader('Cache-Control', 's-maxage=3600, stale-while-revalidate=86400'); + res.setHeader('Access-Control-Allow-Origin', '*'); + + if (req.method !== 'GET') { + return res.status(405).json({ error: 'Method not allowed' }); + } + + try { + // NWS active severe weather alerts for TX — hail + thunderstorm + const url = 'https://api.weather.gov/alerts/active?area=TX&event=Hail,Severe+Thunderstorm,Tornado'; + const nwsRes = await fetch(url, { headers: NWS_HEADERS }); + + if (!nwsRes.ok) { + console.warn('[storm-events] NWS returned', nwsRes.status); + return res.status(200).json([]); + } + + const geojson = await nwsRes.json(); + const features = (geojson.features || []); + + const events = features + .filter(f => { + const evt = (f.properties?.event || '').toLowerCase(); + return evt.includes('hail') || evt.includes('thunderstorm') || evt.includes('tornado'); + }) + .map((f, i) => { + const p = f.properties || {}; + const desc = p.description || p.headline || ''; + const hailSize = parseHailSize(desc) ?? parseHailSize(p.parameters?.hailSize?.[0] ?? ''); + + // NWS GeoJSON polygon coordinates are [lng, lat] — swap for Leaflet + let polygon = []; + const geom = f.geometry; + if (geom?.type === 'Polygon' && geom.coordinates?.[0]) { + polygon = geom.coordinates[0].map(([lng, lat]) => [lat, lng]); + } else if (geom?.type === 'MultiPolygon' && geom.coordinates?.[0]?.[0]) { + polygon = geom.coordinates[0][0].map(([lng, lat]) => [lat, lng]); + } + + const typeStr = (p.event || '').toLowerCase(); + const type = typeStr.includes('tornado') ? 'tornado' + : typeStr.includes('hail') ? 'hail' + : 'wind'; + + return { + id: `NWS-${p.id || i}`, + date: p.onset || p.sent || new Date().toISOString(), + type, + severity: severityFromSize(hailSize), + maxHailSize: hailSize, + areaName: p.areaDesc || 'Unknown Area', + county: 'Collin', + estimatedHomes: null, + description: p.headline || desc.slice(0, 300), + source: 'NWS', + polygon, + }; + }) + .filter(e => e.polygon.length >= 3); // require a valid polygon + + return res.status(200).json(events); + } catch (err) { + console.error('[storm-events] error:', err.message); + return res.status(200).json([]); + } +} diff --git a/src/App.jsx b/src/App.jsx index ad5198d..74f8351 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -36,6 +36,7 @@ import LynkDispatchPage from './pages/LynkDispatchPage'; import EstimatesPage from './pages/EstimatesPage'; import KanbanPage from './pages/KanbanPage'; import LeadProjectPage from './pages/LeadProjectPage'; +import StormIntelPage from './pages/StormIntelPage'; // ... (existing imports) const ProtectedRoute = ({ children, allowedRoles }) => { @@ -262,6 +263,22 @@ function App() { } /> + + + + } + /> + + + + } + /> { { to: "/emp/fa/leads", icon: ClipboardList, label: "Leads" }, { to: "/owner/kanban", icon: LayoutGrid, label: "Pipeline" }, { to: "/admin/dispatch", icon: Zap, label: "LynkDispatch" }, + { to: "/owner/storm-intel", icon: CloudLightning, label: "Storm Intel" }, { to: "/owner/maps", icon: Map, label: "Territory Map" }, { to: "/owner/pro-canvas", @@ -160,6 +161,7 @@ const Layout = () => { { to: "/emp/fa/leads", icon: ClipboardList, label: "Leads" }, { to: "/admin/kanban", icon: LayoutGrid, label: "Pipeline" }, { to: "/admin/dispatch", icon: Zap, label: "LynkDispatch" }, + { to: "/admin/storm-intel", icon: CloudLightning, label: "Storm Intel" }, { to: "/admin/maps", icon: Map, label: "Territory Map" }, { to: "/admin/pro-canvas", diff --git a/src/data/mockStore.jsx b/src/data/mockStore.jsx index d2d7ca2..4192be8 100644 --- a/src/data/mockStore.jsx +++ b/src/data/mockStore.jsx @@ -5582,3 +5582,122 @@ export const LEAD_FORM_OPTIONS = { 'SD','TN','TX','UT','VT','VA','WA','WV','WI','WY', ], }; + +// ── Storm Events — mock history of severe weather events in Plano TX area ────── +// Each polygon is an array of [lat, lng] pairs forming the storm impact boundary. +// severity scale: trace (<1"), moderate (1–1.5"), significant (1.5–2"), severe (2"+) +// conversionWindow: days 7–60 = hot, 61–120 = warm, >120 = cold +export const MOCK_STORM_EVENTS = [ + { + id: 'SE-001', + date: '2026-04-28', + type: 'hail', + severity: 'severe', + maxHailSize: 2.5, + areaName: 'NE Plano / Spring Creek Pkwy', + county: 'Collin', + estimatedHomes: 1240, + description: 'Golf ball–sized hail (2.5") swept through northeast Plano, generating dozens of immediate roof damage reports. Highest claim density in the Spring Creek / Custer Rd corridor.', + source: 'NOAA', + polygon: [ + [33.110, -96.715], [33.101, -96.695], [33.083, -96.695], + [33.074, -96.715], [33.083, -96.735], [33.101, -96.735], + ], + }, + { + id: 'SE-002', + date: '2026-03-15', + type: 'hail', + severity: 'moderate', + maxHailSize: 1.2, + areaName: 'Central Plano / W 15th St', + county: 'Collin', + estimatedHomes: 870, + description: 'Quarter-sized hail moved through central Plano neighborhoods. Minor granule loss on older roofs; several shingle bruising reports filed.', + source: 'NWS', + polygon: [ + [33.072, -96.748], [33.065, -96.730], [33.051, -96.730], + [33.044, -96.748], [33.051, -96.766], [33.065, -96.766], + ], + }, + { + id: 'SE-003', + date: '2026-02-03', + type: 'hail', + severity: 'significant', + maxHailSize: 1.75, + areaName: 'SE Plano / Parker Rd Corridor', + county: 'Collin', + estimatedHomes: 960, + description: 'Half-dollar sized hail impacted the Parker Rd corridor. High claim conversion probability — many homes in this zone have 15–20 year old roofs.', + source: 'NOAA', + polygon: [ + [33.036, -96.718], [33.029, -96.700], [33.015, -96.700], + [33.008, -96.718], [33.015, -96.736], [33.029, -96.736], + ], + }, + { + id: 'SE-004', + date: '2026-01-20', + type: 'hail', + severity: 'moderate', + maxHailSize: 1.0, + areaName: 'W Plano / Legacy West', + county: 'Collin', + estimatedHomes: 680, + description: 'Quarter-sized hail with sustained winds up to 45 mph. Mixed residential and commercial impact around the Legacy West district.', + source: 'NWS', + polygon: [ + [33.086, -96.822], [33.079, -96.804], [33.065, -96.804], + [33.058, -96.822], [33.065, -96.840], [33.079, -96.840], + ], + }, + { + id: 'SE-005', + date: '2025-12-10', + type: 'hail', + severity: 'trace', + maxHailSize: 0.8, + areaName: 'Allen / N Plano Border', + county: 'Collin', + estimatedHomes: 430, + description: 'Marble-sized hail, minimal visible damage. Worth a light canvassing pass on homes with 10+ year roofs in this zone.', + source: 'NWS', + polygon: [ + [33.120, -96.658], [33.114, -96.643], [33.102, -96.643], + [33.096, -96.658], [33.102, -96.673], [33.114, -96.673], + ], + }, + { + id: 'SE-006', + date: '2025-11-05', + type: 'hail', + severity: 'significant', + maxHailSize: 1.6, + areaName: 'S Plano / Haggard Park Area', + county: 'Collin', + estimatedHomes: 810, + description: 'Half-dollar hail combined with strong gusts. Shingle bruising confirmed across multiple streets. This zone responded well to canvassing in Q4.', + source: 'NOAA', + polygon: [ + [33.047, -96.773], [33.040, -96.755], [33.026, -96.755], + [33.019, -96.773], [33.026, -96.791], [33.040, -96.791], + ], + }, + { + id: 'SE-007', + date: '2025-09-18', + type: 'hail', + severity: 'moderate', + maxHailSize: 1.1, + areaName: 'Frisco / N Plano', + county: 'Collin', + estimatedHomes: 530, + description: 'Storm cell crossed from Frisco into north Plano. Roofs 10 years or older in this zone are likely showing impact marks.', + source: 'NOAA', + polygon: [ + [33.138, -96.782], [33.130, -96.762], [33.116, -96.762], + [33.108, -96.782], [33.116, -96.802], [33.130, -96.802], + ], + }, +]; diff --git a/src/hooks/useStormEvents.js b/src/hooks/useStormEvents.js new file mode 100644 index 0000000..d6a97c9 --- /dev/null +++ b/src/hooks/useStormEvents.js @@ -0,0 +1,85 @@ +/** + * Storm events hook. + * + * USE_MOCK = true → returns MOCK_STORM_EVENTS from mockStore (local dev) + * USE_MOCK = false → calls /api/storm-events which proxies NWS/NOAA + * + * Flip to false once the Vercel deployment is live (no extra env vars needed — + * NWS api.weather.gov is a free, unauthenticated public endpoint). + */ + +import { useState, useEffect, useMemo } from 'react'; +import { MOCK_STORM_EVENTS } from '../data/mockStore'; + +const USE_MOCK = true; + +const DATE_RANGE_DAYS = { '1m': 30, '3m': 90, '6m': 180, '1y': 365 }; + +const SEVERITY_ORDER = { severe: 4, significant: 3, moderate: 2, trace: 1 }; + +export function useStormEvents({ dateRange = '6m', typeFilter = 'all', severityFilter = 'all', sortBy = 'date' } = {}) { + const [allEvents, setAllEvents] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + let cancelled = false; + setLoading(true); + setError(null); + + const load = async () => { + try { + let data; + if (USE_MOCK) { + await new Promise(r => setTimeout(r, 450)); + data = MOCK_STORM_EVENTS; + } else { + const days = DATE_RANGE_DAYS[dateRange] || 180; + const res = await fetch(`/api/storm-events?days=${days}&county=Collin`); + if (!res.ok) throw new Error(`Storm events error: ${res.status}`); + data = await res.json(); + } + if (!cancelled) setAllEvents(Array.isArray(data) ? data : []); + } catch (e) { + if (!cancelled) setError(e.message); + } finally { + if (!cancelled) setLoading(false); + } + }; + + load(); + return () => { cancelled = true; }; + }, [dateRange]); + + const events = useMemo(() => { + const cutoffMs = Date.now() - (DATE_RANGE_DAYS[dateRange] || 180) * 86400000; + + let filtered = allEvents.filter(e => { + if (new Date(e.date).getTime() < cutoffMs) return false; + if (typeFilter !== 'all' && e.type !== typeFilter) return false; + if (severityFilter !== 'all' && e.severity !== severityFilter) return false; + return true; + }); + + if (sortBy === 'severity') { + filtered = filtered.sort((a, b) => (SEVERITY_ORDER[b.severity] ?? 0) - (SEVERITY_ORDER[a.severity] ?? 0)); + } else { + filtered = filtered.sort((a, b) => new Date(b.date) - new Date(a.date)); + } + + return filtered; + }, [allEvents, dateRange, typeFilter, severityFilter, sortBy]); + + const totalHomes = useMemo(() => events.reduce((s, e) => s + (e.estimatedHomes ?? 0), 0), [events]); + + return { events, loading, error, totalHomes }; +} + +// Returns a label + color class for how "hot" a storm zone is (conversion likelihood) +export function conversionWindow(dateStr) { + const days = Math.floor((Date.now() - new Date(dateStr).getTime()) / 86400000); + if (days < 7) return { label: 'Too Fresh', color: 'text-sky-500', bg: 'bg-sky-50 dark:bg-sky-500/10', border: 'border-sky-200 dark:border-sky-500/20' }; + if (days <= 60) return { label: 'Hot Zone', color: 'text-red-500', bg: 'bg-red-50 dark:bg-red-500/10', border: 'border-red-200 dark:border-red-500/20' }; + if (days <= 120) return { label: 'Warm', color: 'text-orange-500', bg: 'bg-orange-50 dark:bg-orange-500/10', border: 'border-orange-200 dark:border-orange-500/20' }; + return { label: 'Cold', color: 'text-zinc-400', bg: 'bg-zinc-100 dark:bg-zinc-800', border: 'border-zinc-200 dark:border-white/10' }; +} diff --git a/src/pages/StormIntelPage.jsx b/src/pages/StormIntelPage.jsx new file mode 100644 index 0000000..0459886 --- /dev/null +++ b/src/pages/StormIntelPage.jsx @@ -0,0 +1,660 @@ +import React, { useState, useCallback, useRef, useEffect, memo } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { motion, AnimatePresence } from 'framer-motion'; +import { MapContainer, TileLayer, Polygon, Tooltip, useMap } from 'react-leaflet'; +import L from 'leaflet'; +import 'leaflet/dist/leaflet.css'; +import { + CloudLightning, Wind, Zap, Droplets, Filter, X, ChevronRight, + Home, AlertTriangle, TrendingUp, Users, Calendar, MapPin, + Flame, Snowflake, Clock, ArrowRight, Eye, UserPlus, Loader2, +} from 'lucide-react'; +import { useTheme } from '../context/ThemeContext'; +import { useStormEvents, conversionWindow } from '../hooks/useStormEvents'; + +// ─── Constants ─────────────────────────────────────────────────────────────── + +const PLANO_CENTER = [33.055, -96.752]; +const DEFAULT_ZOOM = 11; + +const SEVERITY_STYLES = { + severe: { fill: '#DC2626', stroke: '#991B1B', fillOpacity: 0.28, weight: 2.5, text: 'text-red-600 dark:text-red-400', bg: 'bg-red-50 dark:bg-red-500/10', border: 'border-red-200 dark:border-red-500/20', label: 'Severe', dot: '#DC2626' }, + significant: { fill: '#EF4444', stroke: '#DC2626', fillOpacity: 0.22, weight: 2, text: 'text-red-500 dark:text-red-400', bg: 'bg-red-50 dark:bg-red-500/10', border: 'border-red-200 dark:border-red-500/20', label: 'Significant', dot: '#EF4444' }, + moderate: { fill: '#F97316', stroke: '#EA580C', fillOpacity: 0.20, weight: 2, text: 'text-orange-500 dark:text-orange-400', bg: 'bg-orange-50 dark:bg-orange-500/10', border: 'border-orange-200 dark:border-orange-500/20', label: 'Moderate', dot: '#F97316' }, + trace: { fill: '#EAB308', stroke: '#CA8A04', fillOpacity: 0.15, weight: 1.5, text: 'text-yellow-600 dark:text-yellow-400', bg: 'bg-yellow-50 dark:bg-yellow-500/10', border: 'border-yellow-200 dark:border-yellow-500/20', label: 'Trace', dot: '#EAB308' }, +}; + +const TYPE_ICONS = { + hail: CloudLightning, + wind: Wind, + tornado: Zap, + flood: Droplets, +}; + +const MAP_STYLES = ` + .storm-intel-map .leaflet-container { background: #e8e0d8; font-family: system-ui, sans-serif; } + .storm-tooltip { background: white !important; border: 1px solid rgba(0,0,0,0.08) !important; border-radius: 10px !important; box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important; padding: 8px 10px !important; pointer-events: none !important; } + .storm-tooltip::before { display: none !important; } + @keyframes stormPulse { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } } +`; + +// ─── Map sub-components ─────────────────────────────────────────────────────── + +const MapFlyTo = ({ storm, flyCount }) => { + const map = useMap(); + const prevCount = useRef(0); + + useEffect(() => { + const invalidate = () => map.invalidateSize({ animate: false }); + const t1 = setTimeout(invalidate, 60); + const t2 = setTimeout(invalidate, 340); + window.addEventListener('resize', invalidate); + return () => { clearTimeout(t1); clearTimeout(t2); window.removeEventListener('resize', invalidate); }; + }, [map]); + + useEffect(() => { + if (!storm?.polygon?.length || flyCount === prevCount.current) return; + prevCount.current = flyCount; + try { + const bounds = L.latLngBounds(storm.polygon); + map.fitBounds(bounds, { padding: [60, 60], maxZoom: 14, animate: true, duration: 0.7 }); + } catch { /* malformed polygon */ } + }, [storm, flyCount, map]); + + return null; +}; + +const StormMap = memo(({ events, selectedId, onSelect, theme, flyCount, selectedStorm }) => { + return ( +
+ + + + + + + {events.map(storm => { + const sty = SEVERITY_STYLES[storm.severity] ?? SEVERITY_STYLES.trace; + const isSelected = storm.id === selectedId; + const TypeIcon = TYPE_ICONS[storm.type] ?? CloudLightning; + const days = Math.floor((Date.now() - new Date(storm.date).getTime()) / 86400000); + + return ( + onSelect(storm), + mouseover: (e) => { e.target.setStyle({ fillOpacity: Math.min(sty.fillOpacity + 0.1, 0.4), weight: sty.weight + 1 }); }, + mouseout: (e) => { + if (storm.id === selectedId) return; + e.target.setStyle({ fillOpacity: sty.fillOpacity, weight: sty.weight }); + }, + }} + > + +
+
+ + {sty.label} Hail + + {storm.maxHailSize && ( + + {storm.maxHailSize}" + + )} +
+

+ {storm.areaName} +

+

+ {days === 0 ? 'Today' : `${days}d ago`} · ~{(storm.estimatedHomes ?? '?').toLocaleString()} homes +

+
+ + + ); + })} + + + {/* Legend */} +
+
+

Severity

+
+ {Object.entries(SEVERITY_STYLES).map(([key, sty]) => ( +
+
+ {sty.label} +
+ ))} +
+
+
+ + {/* Storm count badge */} +
+
+ + {events.length} storm{events.length !== 1 ? 's' : ''} +
+
+
+ ); +}); +StormMap.displayName = 'StormMap'; + +// ─── Storm card ─────────────────────────────────────────────────────────────── + +const StormCard = ({ storm, isSelected, onSelect }) => { + const sty = SEVERITY_STYLES[storm.severity] ?? SEVERITY_STYLES.trace; + const conv = conversionWindow(storm.date); + const TypeIcon = TYPE_ICONS[storm.type] ?? CloudLightning; + const days = Math.floor((Date.now() - new Date(storm.date).getTime()) / 86400000); + const dateLabel = new Date(storm.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); + + return ( + + ); +}; + +// ─── Detail drawer ──────────────────────────────────────────────────────────── + +const StormDetailDrawer = ({ storm, open, onClose, onFlyTo }) => { + const navigate = useNavigate(); + const { theme } = useTheme(); + + if (!storm) return null; + + const sty = SEVERITY_STYLES[storm.severity] ?? SEVERITY_STYLES.trace; + const conv = conversionWindow(storm.date); + const TypeIcon = TYPE_ICONS[storm.type] ?? CloudLightning; + const days = Math.floor((Date.now() - new Date(storm.date).getTime()) / 86400000); + const dateLabel = new Date(storm.date).toLocaleDateString('en-US', { weekday: 'short', month: 'long', day: 'numeric', year: 'numeric' }); + + const handleCreateLead = () => { + navigate('/emp/fa/leads/new'); + }; + + const handleViewInDispatch = () => { + navigate('/admin/dispatch'); + }; + + return ( + <> + {/* Backdrop on mobile */} + + {open && ( + + )} + + + {/* Drawer panel */} + + {open && ( + + {/* Severity bar */} +
+ + {/* Header */} +
+
+
+ +
+
+

+ {sty.label} {storm.type === 'hail' ? 'Hail' : storm.type} +

+

{dateLabel}

+
+
+ +
+ + {/* Scrollable body */} +
+ {/* Area name */} +
+

+ {storm.areaName} +

+

{storm.county} County, TX

+
+ + {/* Conversion window */} +
+ {conv.label === 'Hot Zone' && } + {conv.label === 'Warm' && } + {conv.label === 'Cold' && } + {conv.label === 'Too Fresh' && } +
+

{conv.label}

+

+ {conv.label === 'Hot Zone' && 'Peak canvassing window — highest conversion likelihood'} + {conv.label === 'Warm' && 'Still worth canvassing — moderate conversion rate'} + {conv.label === 'Cold' && 'Low conversion — storm damage assessment mostly done'} + {conv.label === 'Too Fresh' && 'Too recent — wait for claims process to begin'} +

+
+
+ + {/* Stats grid */} +
+ {storm.maxHailSize && ( +
+

Max Hail

+

{storm.maxHailSize}"

+

{sty.label} category

+
+ )} + {storm.estimatedHomes && ( +
+

Est. Homes

+

{storm.estimatedHomes.toLocaleString()}

+

in impact zone

+
+ )} +
+

Days Ago

+

{days}

+

since impact

+
+
+

Source

+

{storm.source}

+

data origin

+
+
+ + {/* Description */} +
+

Intel

+

+ {storm.description} +

+
+ + {/* Map action */} + +
+ + {/* Action buttons */} +
+ + + +
+ + )} + + + ); +}; + +// ─── Filter bar ─────────────────────────────────────────────────────────────── + +const FilterChip = ({ active, onClick, children }) => ( + +); + +// ─── Main page ──────────────────────────────────────────────────────────────── + +const StormIntelPage = () => { + const { theme } = useTheme(); + + const [dateRange, setDateRange] = useState('6m'); + const [typeFilter, setTypeFilter] = useState('all'); + const [severityFilter, setSeverityFilter] = useState('all'); + const [sortBy, setSortBy] = useState('date'); + const [selectedStorm, setSelectedStorm] = useState(null); + const [drawerOpen, setDrawerOpen] = useState(false); + const [flyCount, setFlyCount] = useState(0); + const [showFilters, setShowFilters] = useState(false); + + const { events, loading, error, totalHomes } = useStormEvents({ dateRange, typeFilter, severityFilter, sortBy }); + + const handleSelect = useCallback((storm) => { + setSelectedStorm(storm); + setDrawerOpen(true); + setFlyCount(c => c + 1); + }, []); + + const handleFlyTo = useCallback(() => { + setFlyCount(c => c + 1); + }, []); + + const handleClose = useCallback(() => { + setDrawerOpen(false); + }, []); + + // Responsive map height + const [mapHeight, setMapHeight] = useState('320px'); + useEffect(() => { + const update = () => { + const w = window.innerWidth; + setMapHeight(w < 640 ? '280px' : w < 768 ? '340px' : w < 1024 ? '400px' : '100%'); + }; + update(); + window.addEventListener('resize', update); + return () => window.removeEventListener('resize', update); + }, []); + + const isDark = theme === 'dark'; + + return ( +
+ + {/* ── Header ── */} +
+
+
+
+ +
+
+

Storm Intel

+

+ Plano TX · Collin County +

+
+
+ + {/* Summary stats */} +
+
+

{events.length}

+

Storms

+
+
+
+

{(totalHomes / 1000).toFixed(1)}k

+

Homes

+
+
+
+

+ {events.filter(e => conversionWindow(e.date).label === 'Hot Zone').length} +

+

Hot Zones

+
+
+ + {/* Mobile filter toggle */} + +
+
+ + {/* ── Filter bar ── */} + + {(showFilters || true) && ( + = 1024 ? '' : 'hidden lg:flex'}`} + > +
+ {/* Date range */} +
+ Range + {[['1m', '1 Month'], ['3m', '3 Months'], ['6m', '6 Months'], ['1y', '1 Year']].map(([val, label]) => ( + setDateRange(val)}>{label} + ))} +
+ +
+ + {/* Severity */} +
+ Severity + {[['all', 'All'], ['severe', 'Severe'], ['significant', 'Significant'], ['moderate', 'Moderate'], ['trace', 'Trace']].map(([val, label]) => ( + setSeverityFilter(val)}>{label} + ))} +
+ +
+ + {/* Sort */} +
+ Sort + setSortBy('date')}>Newest + setSortBy('severity')}>Severity +
+
+ + )} + + + {/* ── Body ── */} +
+ + {/* Map */} +
+ {loading ? ( +
+ +

Loading storm data...

+
+ ) : error ? ( +
+ +

Failed to load storm data

+

{error}

+
+ ) : events.length === 0 ? ( +
+ +

No storms match your filters

+
+ ) : ( + + )} +
+ + {/* Storm list */} +
+ {/* List header */} +
+

+ {events.length} Event{events.length !== 1 ? 's' : ''} +

+ {selectedStorm && ( + + )} +
+ + {/* Cards */} +
+ {loading ? ( + Array.from({ length: 4 }).map((_, i) => ( +
+ )) + ) : events.length === 0 ? ( +
+ +

No storms in this range

+
+ ) : ( + events.map(storm => ( + + )) + )} +
+
+
+ + {/* Detail drawer */} + +
+ ); +}; + +export default StormIntelPage;