From 84b1e73fa7b24516390bb73ae2fa09b37da15257 Mon Sep 17 00:00:00 2001
From: Satyam-Rastogi <satyamrastogi302@gmail.com>
Date: Mon, 18 May 2026 18:29:29 +0530
Subject: [PATCH] fix(storm-intel): modal z-index, zone click-to-zoom, drawer
 close on fly-to, left padding

- ZoneAssignmentModal: portal to document.body with z-9999 so it renders above Leaflet map stacking context
- ZoneLayer: clicking any zone polygon or centroid circle fits map bounds to that zone
- handleFlyTo: closes detail drawer after zooming so the map is unobstructed
- StormDetailDrawer: pl-5 on header, body, and footer for consistent left padding
---
 src/components/storm/ZoneAssignmentModal.jsx | 10 ++++++----
 src/pages/StormIntelPage.jsx                 | 20 ++++++++++++++++----
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/components/storm/ZoneAssignmentModal.jsx b/src/components/storm/ZoneAssignmentModal.jsx
index d922ce3..edd445d 100644
--- a/src/components/storm/ZoneAssignmentModal.jsx
+++ b/src/components/storm/ZoneAssignmentModal.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 import { X, MapPin, Check } from 'lucide-react';
 import { DISPATCH_REPS } from '../../data/mockStore';
@@ -38,14 +39,14 @@ const ZoneAssignmentModal = ({ open, onClose, onSave, polygon = [], linkedStormI
         });
     };
 
-    return (
+    return ReactDOM.createPortal(
         <AnimatePresence>
             {open && (
                 <>
                     <motion.div
                         key="zam-backdrop"
                         initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
-                        className="fixed inset-0 bg-black/40 backdrop-blur-[2px] z-[60]"
+                        className="fixed inset-0 bg-black/40 backdrop-blur-[2px] z-[9998]"
                         onClick={onClose}
                     />
                     <motion.div
@@ -54,7 +55,7 @@ const ZoneAssignmentModal = ({ open, onClose, onSave, polygon = [], linkedStormI
                         animate={{ opacity: 1, scale: 1, y: 0 }}
                         exit={{ opacity: 0, scale: 0.95, y: 10 }}
                         transition={{ type: 'spring', stiffness: 380, damping: 32 }}
-                        className="fixed inset-x-4 top-[8%] sm:inset-auto sm:left-1/2 sm:-translate-x-1/2 sm:top-[12%] sm:w-[420px] z-[61] bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-white/[0.08] shadow-2xl overflow-hidden"
+                        className="fixed inset-x-4 top-[8%] sm:inset-auto sm:left-1/2 sm:-translate-x-1/2 sm:top-[12%] sm:w-[420px] z-[9999] bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-white/[0.08] shadow-2xl overflow-hidden"
                     >
                         {/* Color accent bar */}
                         <div className="h-1 w-full" style={{ backgroundColor: color }} />
@@ -188,7 +189,8 @@ const ZoneAssignmentModal = ({ open, onClose, onSave, polygon = [], linkedStormI
                     </motion.div>
                 </>
             )}
-        </AnimatePresence>
+        </AnimatePresence>,
+        document.body
     );
 };
 
diff --git a/src/pages/StormIntelPage.jsx b/src/pages/StormIntelPage.jsx
index 6494e66..07753db 100644
--- a/src/pages/StormIntelPage.jsx
+++ b/src/pages/StormIntelPage.jsx
@@ -97,7 +97,16 @@ const MapFlyTo = ({ storm, flyCount }) => {
 };
 
 const ZoneLayer = ({ zones }) => {
+    const map = useMap();
     if (!zones?.length) return null;
+
+    const flyToZone = (polygon) => {
+        try {
+            const bounds = L.latLngBounds(polygon);
+            map.fitBounds(bounds, { padding: [50, 50], maxZoom: 15, animate: true, duration: 0.7 });
+        } catch { /* malformed polygon */ }
+    };
+
     return zones.map(zone => {
         if (!zone.polygon?.length) return null;
         const centroid = zone.polygon.reduce(
@@ -116,6 +125,7 @@ const ZoneLayer = ({ zones }) => {
                         opacity:     zone.status === 'completed' ? 0.45 : 0.85,
                         dashArray:   zone.status === 'completed' ? '5 4' : undefined,
                     }}
+                    eventHandlers={{ click: () => flyToZone(zone.polygon) }}
                 >
                     <Tooltip direction="top" opacity={1} className="storm-tooltip" sticky={false}>
                         <div style={{ fontFamily: 'system-ui,sans-serif', minWidth: 140 }}>
@@ -126,11 +136,12 @@ const ZoneLayer = ({ zones }) => {
                         </div>
                     </Tooltip>
                 </Polygon>
-                {/* Agent initials circle at centroid */}
+                {/* Agent initials circle at centroid — also clickable */}
                 <CircleMarker
                     center={centroid}
                     radius={11}
                     pathOptions={{ color: zone.color, fillColor: zone.color, fillOpacity: 1, weight: 1.5 }}
+                    eventHandlers={{ click: () => flyToZone(zone.polygon) }}
                 >
                     <Tooltip direction="top" opacity={1} className="storm-tooltip">
                         <p style={{ fontSize: 11, fontWeight: 700, color: '#18181b' }}>{zone.name}</p>
@@ -527,7 +538,7 @@ const StormDetailDrawer = ({ storm, open, onClose, onFlyTo, onAssignZone, canMan
                     >
                         <div className="h-1 w-full shrink-0" style={{ backgroundColor: sty.dot }} />
 
-                        <div className="flex items-center justify-between px-4 py-3 border-b border-zinc-100 dark:border-white/[0.06] shrink-0">
+                        <div className="flex items-center justify-between pl-5 pr-4 py-3 border-b border-zinc-100 dark:border-white/[0.06] shrink-0">
                             <div className="flex items-center gap-2">
                                 <div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ backgroundColor: sty.dot + '18' }}>
                                     <TypeIcon size={16} style={{ color: sty.dot }} />
@@ -547,7 +558,7 @@ const StormDetailDrawer = ({ storm, open, onClose, onFlyTo, onAssignZone, canMan
                             </button>
                         </div>
 
-                        <div className="flex-1 overflow-y-auto px-4 py-4 space-y-4">
+                        <div className="flex-1 overflow-y-auto pl-5 pr-4 py-4 space-y-4">
                             <div>
                                 <h2 className="text-lg font-black text-zinc-900 dark:text-white leading-tight">
                                     {storm.areaName}
@@ -617,7 +628,7 @@ const StormDetailDrawer = ({ storm, open, onClose, onFlyTo, onAssignZone, canMan
                             </button>
                         </div>
 
-                        <div className="px-4 py-3 border-t border-zinc-100 dark:border-white/[0.06] space-y-2 shrink-0">
+                        <div className="pl-5 pr-4 py-3 border-t border-zinc-100 dark:border-white/[0.06] space-y-2 shrink-0">
                             <button
                                 onClick={handleCreateLead}
                                 className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl font-bold text-[13px] text-white transition-all hover:opacity-90 active:scale-[0.98]"
@@ -880,6 +891,7 @@ const StormIntelPage = () => {
 
     const handleFlyTo = useCallback(() => {
         setFlyCount(c => c + 1);
+        setDrawerOpen(false);
     }, []);
 
     const handleClose = useCallback(() => {