Goutam/LynkedUpPro_CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(storm-intel): modal z-index, zone click-to-zoom, drawer close on fly-to, left padding

Browse Source 
- 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
This commit is contained in:
Satyam-Rastogi
2026-05-18 18:29:29 +05:30
parent 12bd2fe0de
commit 84b1e73fa7
2 changed files with 22 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/StormIntelPage.jsx
+16 -4
View File
@@ -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(() => {