Feature:linking plans from kyl to dpr page

src/components/kyl_MWSProfilePanel.jsx

@@ -3,17 +3,16 @@ import { stateAtom, districtAtom, blockAtom, dataJsonAtom } from '../store/locat
 import { useRecoilValue } from 'recoil';
 import { useEffect, useState } from 'react';
 import { trackEvent } from "../services/analytics.js";
-import { CheckCircle2, Layers3 } from "lucide-react";
+import { CheckCircle2, Layers3,Table } from "lucide-react";
 
-const KYLMWSProfilePanel = ({ mwsData, onBack, hideBackButton = false ,  selectionMode = "single", setSelectionMode, onResetMWS,onResetSelection, 
+const KYLMWSProfilePanel = ({ mwsData, onBack, hideBackButton = false, onResetMWS,onOpenSelection,
   selectedMWS = [],}) => {
   const state = useRecoilValue(stateAtom);
   const district = useRecoilValue(districtAtom);
   const block = useRecoilValue(blockAtom);
   const dataJson = useRecoilValue(dataJsonAtom)
 
   const [dataString, setDataString] = useState("")
-  console.log("onResetMWS =>", onResetMWS);
 
   const transformName = (name) => {
     if (!name) return name;
@@ -49,49 +48,7 @@ const KYLMWSProfilePanel = ({ mwsData, onBack, hideBackButton = false ,  selecti
 
   return (
     <div className="bg-white rounded-lg border border-gray-100 p-3">
-                 <div className="bg-white rounded-xl border border-gray-200 p-3 shadow-sm">
-        <p className="text-[11px] font-semibold text-gray-600 uppercase tracking-wide mb-2">
-          Selection Mode
-        </p>
-
-        <div className="flex rounded-lg bg-gray-100 p-1">
-          <button
-            onClick={() => {
-              onResetSelection();
-              setSelectionMode("single");
-            }}
-            className={`flex-1 flex items-center justify-center gap-2 py-2 rounded-md text-sm font-medium transition-all ${
-              selectionMode === "single"
-                ? "bg-white text-blue-600 shadow-sm"
-                : "text-gray-500 hover:text-gray-700"
-            }`}
-          >
-            <CheckCircle2 className="w-4 h-4" />
-            Single
-          </button>
-
-          <button
-            onClick={() => {
-             onResetSelection();
-              setSelectionMode("multi");
-            }}
-            className={`flex-1 flex items-center justify-center gap-2 py-2 rounded-md text-sm font-medium transition-all ${
-              selectionMode === "multi"
-                ? "bg-white text-emerald-600 shadow-sm"
-                : "text-gray-500 hover:text-gray-700"
-            }`}
-          >
-            <Layers3 className="w-4 h-4" />
-            Multi
-          </button>
-        </div>
-
-        <p className="text-[10px] text-gray-400 mt-2">
-          {selectionMode === "single"
-            ? "Only one Micro-Watershed can be selected."
-            : "Select multiple Micro-Watersheds by clicking on the map."}
-        </p>
-         </div>
+
       {!hideBackButton && (
         <div className="flex items-center gap-2 mb-4 mt-4">
           <button 
@@ -113,7 +70,7 @@ const KYLMWSProfilePanel = ({ mwsData, onBack, hideBackButton = false ,  selecti
 
 
 
-{selectionMode === "single" ? (
+{selectedMWS.length <= 1 ? (
   <>
     <div className="space-y-2 mb-4">
       <p className="text-sm text-gray-600">
@@ -203,6 +160,7 @@ const KYLMWSProfilePanel = ({ mwsData, onBack, hideBackButton = false ,  selecti
       <span className="text-sm">View Profile</span>
     </button>
 
+
       </div>
 
     ))}
@@ -211,6 +169,17 @@ const KYLMWSProfilePanel = ({ mwsData, onBack, hideBackButton = false ,  selecti
 
 </div>
 )}
+{onOpenSelection && (
+        <div className="flex justify-center mt-4">
+          <button
+            onClick={onOpenSelection}
+            className="flex justify-center items-center gap-1 px-4 py-1.5 text-[11px] font-semibold text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors border border-indigo-100"
+          >
+            <Table className="w-3 h-3" />
+            View Selection
+          </button>
+        </div>
+      )}
     </div>
   );
 };

src/components/kyl_mapContainer.jsx

@@ -2,7 +2,6 @@
 import { useState } from "react";
 import KYLLocationSearchBar from "./kyl_location";
 import YearSlider from "./yearSlider";
-import SelectionModeToggle from "./SelectionModeToggle";
 
 // Layer Controls component
 const LayerControls = ({
@@ -161,12 +160,12 @@ const MapZoomControls = ({ mapRef }) => {
 };
 
 // Updated MapLegend component
-const MapLegend = ({ showMWS, showVillages, currentLayer, showConnectivity }) => {
+const MapLegend = ({ showMWS, showVillages, currentLayer, showConnectivity,showPlans,setShowPlans }) => {
   // Add state for collapsed status
   const [isCollapsed, setIsCollapsed] = useState(false);
 
   // If no layers are shown, don't display legend
-  if (!showMWS && !showVillages && (!currentLayer || currentLayer.length === 0))
+  if (!showMWS && !showVillages && !showPlans && (!currentLayer || currentLayer.length === 0))
     return null;
 
   const activeWBLayer = currentLayer?.find((layer) =>
@@ -202,6 +201,19 @@ const MapLegend = ({ showMWS, showVillages, currentLayer, showConnectivity }) =>
     },
   ];
 
+  const planLegendItems = [
+  {
+    color: "#FF6FFF",
+    border: "#ffffff",
+    name: "In Progress",
+  },
+  {
+    color: "#CCFF00",
+    border: "#3E5800",
+    name: "DPR Reviewed",
+  },
+];
+
   const lulcLegendItems = [
   { color: "#A9A9A9", label: "Barren Lands" },
   { color: "#F0F4A3", label: "Single Kharif" },
@@ -853,6 +865,33 @@ const MapLegend = ({ showMWS, showVillages, currentLayer, showConnectivity }) =>
                 </div>
               )}
 
+              {/* Plans Legend Section */}
+{showPlans && (
+  <div className="space-y-2">
+    <h4 className="text-xs font-medium text-gray-600">
+      Plans
+    </h4>
+
+    {planLegendItems.map((item, index) => (
+      <div
+        key={`plan-${index}`}
+        className="flex items-center gap-2"
+      >
+        <div
+          className="w-4 h-4 rounded-full"
+          style={{
+            backgroundColor: item.color,
+            border: `2px solid ${item.border}`,
+          }}
+        />
+        <span className="text-sm text-gray-600">
+          {item.name}
+        </span>
+      </div>
+    ))}
+  </div>
+)}
+
               {/* LULC Legend Section */}
               {isLulcLayerActive && (
                 <div className="space-y-2">
@@ -2071,6 +2110,7 @@ const KYLMapContainer = ({
   currentLayer,
   setSearchLatLong,
   showConnectivity,
+  showPlans,
    selectionMode,
   setSelectionMode,
 }) => {
@@ -2118,6 +2158,7 @@ const KYLMapContainer = ({
         showVillages={showVillages && areVillageLayersAvailable}
         currentLayer={currentLayer}
         showConnectivity={showConnectivity}
+        showPlans={showPlans}
       />
 
       {/* Search Bar */}