feat(hail-recon): Hail Recon integration — storm intel panel, hail history, auto storm mode, address monitoring

src/components/dispatch/DispatchLeadQueue.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Globe, MapPin, Users, Phone, Clock, CloudLightning, FileText, Search, X, Zap, CheckCircle } from 'lucide-react';
 import { useMockStore, DISPATCH_REPS, DISPATCH_RECOMMENDATIONS } from '../../data/mockStore';
+import HailBadge from './HailBadge';
 
 // ---------------------------------------------------------------------------
 // Config maps
@@ -87,7 +88,7 @@ const DROP_POOL = [
 // ---------------------------------------------------------------------------
 // LeadCard
 // ---------------------------------------------------------------------------
-const LeadCard = ({ lead, isSelected, isNew, onSelect, onViewDetails, onQuickAssign, stormMode, accent, index }) => {
+const LeadCard = ({ lead, isSelected, isNew, onSelect, onViewDetails, onQuickAssign, stormMode, accent, index, hailSummary }) => {
     const urgCfg    = URGENCY_CONFIG[lead.urgency]  || URGENCY_CONFIG.standard;
     const statusCfg = STATUS_CONFIG[lead.status]    || STATUS_CONFIG.unassigned;
     const srcCfg    = SOURCE_CONFIG[lead.source]    || SOURCE_CONFIG.call_center;
@@ -188,6 +189,13 @@ const LeadCard = ({ lead, isSelected, isNew, onSelect, onViewDetails, onQuickAss
                 {lead.property.address}, {lead.property.city}
             </p>
 
+            {/* Hail badge — Storm Mode only */}
+            {stormMode && hailSummary && (
+                <div className="mt-1.5">
+                    <HailBadge summary={hailSummary} />
+                </div>
+            )}
+
             {/* Bottom row: status + time */}
             <div className="flex items-center justify-between mt-1.5 gap-2">
                 {assignedRep ? (
@@ -275,7 +283,7 @@ const LeadCard = ({ lead, isSelected, isNew, onSelect, onViewDetails, onQuickAss
 // ---------------------------------------------------------------------------
 // DispatchLeadQueue
 // ---------------------------------------------------------------------------
-const DispatchLeadQueue = ({ selectedLead, onSelectLead, onViewDetails, onQuickAssign, stormMode, accent }) => {
+const DispatchLeadQueue = ({ selectedLead, onSelectLead, onViewDetails, onQuickAssign, stormMode, accent, hailSummaries = {}, filterHailOnly = false }) => {
     const { dispatchLeads } = useMockStore();
     const [activeTab, setActiveTab]     = useState('all');
     const [droppedLeads, setDropped]    = useState([]);
@@ -346,6 +354,11 @@ const DispatchLeadQueue = ({ selectedLead, onSelectLead, onViewDetails, onQuickA
         });
     }
 
+    // Hail filter — only show leads with at least one hail hit
+    if (stormMode && filterHailOnly) {
+        filteredLeads = filteredLeads.filter(l => (hailSummaries[l.id]?.hitCount ?? 0) > 0);
+    }
+
     return (
         <div className="flex flex-col">
 
@@ -427,6 +440,7 @@ const DispatchLeadQueue = ({ selectedLead, onSelectLead, onViewDetails, onQuickA
                                 stormMode={stormMode}
                                 accent={accent}
                                 index={index}
+                                hailSummary={hailSummaries[lead.id] ?? null}
                             />
                         ))
                     )}

src/components/dispatch/HailBadge.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { CloudLightning } from 'lucide-react';
+import { hailSeverity, hailSeverityColor, daysAgo } from '../../hooks/useHailRecon';
+
+/**
+ * Compact hail hit badge for dispatch queue cards.
+ * Shows hit count + last-hit recency. Only rendered in Storm Mode.
+ */
+export default function HailBadge({ summary, className = '' }) {
+    if (!summary) return null;
+
+    const { hitCount, lastHit, maxSize } = summary;
+
+    if (hitCount === 0) {
+        return (
+            <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold border
+                bg-zinc-100 dark:bg-zinc-800 border-zinc-200 dark:border-white/10 text-zinc-400 ${className}`}>
+                <CloudLightning size={9} />
+                No hail history
+            </span>
+        );
+    }
+
+    const days    = lastHit ? daysAgo(lastHit.date) : null;
+    const textCls = hailSeverityColor(maxSize, 'text');
+    const bgCls   = hailSeverityColor(maxSize, 'bg');
+    const brdCls  = hailSeverityColor(maxSize, 'border');
+
+    const recencyLabel = days === null ? '' :
+        days === 0 ? 'Today' :
+        days === 1 ? 'Yesterday' :
+        days < 30  ? `${days}d ago` :
+        days < 365 ? `${Math.floor(days / 30)}mo ago` :
+                     `${Math.floor(days / 365)}yr ago`;
+
+    return (
+        <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold border
+            ${bgCls} ${brdCls} ${textCls} ${className}`}>
+            <CloudLightning size={9} />
+            Hit {hitCount}x
+            {recencyLabel && <span className="opacity-70">· {recencyLabel}</span>}
+        </span>
+    );
+}

src/components/dispatch/StormIntelPanel.jsx

@@ -0,0 +1,193 @@
+import React, { useState, useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { CloudLightning, ChevronDown, AlertTriangle, MapPin, Calendar, Shield } from 'lucide-react';
+import { hailSeverity, hailSeverityColor, daysAgo } from '../../hooks/useHailRecon';
+
+// ── Severity badge ────────────────────────────────────────────────────────────
+function SizeBadge({ size }) {
+    if (!size) return null;
+    const textCls = hailSeverityColor(size, 'text');
+    const bgCls   = hailSeverityColor(size, 'bg');
+    const brdCls  = hailSeverityColor(size, 'border');
+    return (
+        <span className={`inline-flex items-center px-1.5 py-0.5 rounded-md text-[10px] font-black border ${bgCls} ${brdCls} ${textCls}`}>
+            {size.toFixed(2)}"
+        </span>
+    );
+}
+
+// ── Single lead row ───────────────────────────────────────────────────────────
+function IntelRow({ lead, summary }) {
+    const { hitCount, lastHit, maxSize } = summary;
+    const days = lastHit ? daysAgo(lastHit.date) : null;
+    const severity = hailSeverity(maxSize);
+    const isHot = severity === 'severe' || severity === 'significant';
+
+    return (
+        <div className={`flex items-center gap-3 px-4 py-3 border-b border-amber-100 dark:border-amber-500/10 last:border-0
+            ${isHot ? 'bg-amber-50/60 dark:bg-amber-500/5' : ''}`}>
+            {/* Urgency dot */}
+            <div className={`w-1.5 h-1.5 rounded-full shrink-0 ${
+                lead.urgency === 'emergency' ? 'bg-red-500' :
+                lead.urgency === 'high'      ? 'bg-amber-500' : 'bg-zinc-400'
+            }`} />
+
+            {/* Address */}
+            <div className="flex-1 min-w-0">
+                <p className="text-xs font-bold text-zinc-900 dark:text-white truncate">{lead.customer?.name}</p>
+                <p className="text-[10px] text-zinc-500 truncate flex items-center gap-1">
+                    <MapPin size={9} className="shrink-0" />
+                    {lead.property?.address}
+                </p>
+            </div>
+
+            {/* Hit stats */}
+            <div className="flex items-center gap-2 shrink-0">
+                {lastHit && (
+                    <span className="text-[10px] text-zinc-500 flex items-center gap-0.5">
+                        <Calendar size={9} />
+                        {days === 0 ? 'Today' : days === 1 ? 'Yesterday' : `${days}d ago`}
+                    </span>
+                )}
+                <SizeBadge size={maxSize} />
+                <span className="text-[10px] font-bold text-amber-600 dark:text-amber-400 bg-amber-100 dark:bg-amber-500/10
+                    border border-amber-200 dark:border-amber-500/20 rounded-full px-1.5 py-0.5">
+                    {hitCount}x
+                </span>
+            </div>
+        </div>
+    );
+}
+
+// ── Main panel ────────────────────────────────────────────────────────────────
+export default function StormIntelPanel({ leads, summaries, stormEvent, onFilterChange, filterHailOnly }) {
+    const [open, setOpen] = useState(true);
+
+    const hailedLeads = useMemo(() => {
+        return leads
+            .filter(l => (summaries[l.id]?.hitCount ?? 0) > 0)
+            .sort((a, b) => {
+                const aLast = summaries[a.id]?.lastHit?.date ?? '';
+                const bLast = summaries[b.id]?.lastHit?.date ?? '';
+                return bLast.localeCompare(aLast);
+            });
+    }, [leads, summaries]);
+
+    const recentCount = useMemo(() =>
+        hailedLeads.filter(l => {
+            const d = summaries[l.id]?.lastHit?.date;
+            return d && daysAgo(d) <= 60;
+        }).length,
+    [hailedLeads, summaries]);
+
+    const totalHailed = hailedLeads.length;
+
+    return (
+        <div className="rounded-2xl border border-amber-200 dark:border-amber-500/20 overflow-hidden
+            bg-amber-50/80 dark:bg-amber-500/5 shadow-sm">
+
+            {/* Header */}
+            <button
+                type="button"
+                onClick={() => setOpen(o => !o)}
+                className="w-full flex items-center gap-3 px-4 py-3 hover:bg-amber-100/50 dark:hover:bg-amber-500/10 transition-colors"
+            >
+                <div className="p-1.5 rounded-lg bg-amber-500/20 border border-amber-400/30">
+                    <CloudLightning size={14} className="text-amber-600 dark:text-amber-400 animate-pulse" />
+                </div>
+
+                <div className="flex-1 text-left">
+                    <p className="text-xs font-black uppercase tracking-widest text-amber-700 dark:text-amber-400">
+                        Storm Intel
+                    </p>
+                    <p className="text-[10px] text-amber-600/70 dark:text-amber-500/70 mt-0.5">
+                        {totalHailed} of {leads.length} leads in hail-affected zones
+                        {recentCount > 0 && ` · ${recentCount} hit within 60 days`}
+                    </p>
+                </div>
+
+                {/* Webhook event pill */}
+                {stormEvent && (
+                    <div className="flex items-center gap-1 px-2 py-1 rounded-lg bg-red-500/10 border border-red-400/30 shrink-0">
+                        <AlertTriangle size={10} className="text-red-500 animate-pulse" />
+                        <span className="text-[10px] font-bold text-red-600 dark:text-red-400 uppercase tracking-wider">
+                            Live Alert
+                        </span>
+                    </div>
+                )}
+
+                <ChevronDown
+                    size={14}
+                    className="text-amber-500 shrink-0 transition-transform duration-200"
+                    style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)' }}
+                />
+            </button>
+
+            <AnimatePresence>
+                {open && (
+                    <motion.div
+                        initial={{ height: 0, opacity: 0 }}
+                        animate={{ height: 'auto', opacity: 1 }}
+                        exit={{ height: 0, opacity: 0 }}
+                        transition={{ duration: 0.2 }}
+                        className="overflow-hidden"
+                    >
+                        {/* Live webhook event banner */}
+                        {stormEvent && (
+                            <div className="mx-3 mb-2 mt-1 px-3 py-2 rounded-xl bg-red-50 dark:bg-red-500/10
+                                border border-red-200 dark:border-red-500/20 flex items-start gap-2">
+                                <AlertTriangle size={13} className="text-red-500 mt-0.5 shrink-0" />
+                                <div>
+                                    <p className="text-[10px] font-black uppercase tracking-wider text-red-600 dark:text-red-400">
+                                        Hail Alert Received
+                                    </p>
+                                    <p className="text-[11px] text-red-700 dark:text-red-300 mt-0.5">
+                                        {stormEvent.address}{stormEvent.city ? `, ${stormEvent.city}` : ''} —{' '}
+                                        {stormEvent.hailSize ? `${stormEvent.hailSize}" hail` : 'Hail reported'}
+                                    </p>
+                                </div>
+                            </div>
+                        )}
+
+                        {/* Filter toggle */}
+                        <div className="px-4 pb-2 pt-1 flex items-center justify-between">
+                            <div className="flex items-center gap-1.5">
+                                <Shield size={11} className="text-amber-500" />
+                                <span className="text-[10px] font-bold uppercase tracking-wider text-amber-600 dark:text-amber-500">
+                                    Hail-Affected Leads
+                                </span>
+                            </div>
+                            <button
+                                onClick={() => onFilterChange?.(!filterHailOnly)}
+                                className={`flex items-center gap-1 px-2.5 py-1 rounded-lg text-[10px] font-bold uppercase tracking-wider
+                                    border transition-all ${filterHailOnly
+                                        ? 'bg-amber-500 border-amber-500 text-white'
+                                        : 'bg-white dark:bg-black/20 border-amber-300 dark:border-amber-500/30 text-amber-600 dark:text-amber-400'
+                                    }`}
+                            >
+                                {filterHailOnly ? 'Showing hail-affected' : 'Filter queue'}
+                            </button>
+                        </div>
+
+                        {/* Lead list */}
+                        <div className="border-t border-amber-100 dark:border-amber-500/10 max-h-64 overflow-y-auto">
+                            {hailedLeads.length === 0 ? (
+                                <p className="text-center text-xs text-zinc-400 py-6">
+                                    No hail history found for current leads
+                                </p>
+                            ) : (
+                                hailedLeads.map(lead => (
+                                    <IntelRow
+                                        key={lead.id}
+                                        lead={lead}
+                                        summary={summaries[lead.id]}
+                                    />
+                                ))
+                            )}
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+}