From 997a259e869dbe96c4a6991333617688696ee0c2 Mon Sep 17 00:00:00 2001
From: Manvi <manvi.khatri@oniondev.com>
Date: Mon, 7 Sep 2026 18:09:57 +0530
Subject: [PATCH 1/2] Fix:Reorganization of the view seelction, selected mws
 and selected villages and also add the X button on multislect mwses against
 each mws list

---
 src/components/kyl_MWSProfilePanel.jsx | 152 +++++++++++++++++--------
 src/components/kyl_rightSidebar.jsx    |  39 +++++++
 src/pages/kyl_dashboard.jsx            |  36 ++++++
 3 files changed, 178 insertions(+), 49 deletions(-)

diff --git a/src/components/kyl_MWSProfilePanel.jsx b/src/components/kyl_MWSProfilePanel.jsx
index c6180897..d0f81430 100644
--- a/src/components/kyl_MWSProfilePanel.jsx
+++ b/src/components/kyl_MWSProfilePanel.jsx
@@ -1,4 +1,4 @@
-import { ArrowLeft } from 'lucide-react';
+import { ArrowLeft, X } from 'lucide-react';
 import { stateAtom, districtAtom, blockAtom, dataJsonAtom } from '../store/locationStore.jsx';
 import { useRecoilValue } from 'recoil';
 import { useEffect, useState } from 'react';
@@ -6,7 +6,7 @@ import { trackEvent } from "../services/analytics.js";
 import { CheckCircle2, Layers3,Table } from "lucide-react";
 
 const KYLMWSProfilePanel = ({ mwsData, onBack, hideBackButton = false, onResetMWS,onOpenSelection,
-  selectedMWS = [],  intersectingVillages = [], }) => {
+  selectedMWS = [],  intersectingVillages = [],onRemoveMWS }) => {
   const state = useRecoilValue(stateAtom);
   const district = useRecoilValue(districtAtom);
   const block = useRecoilValue(blockAtom);
@@ -67,10 +67,7 @@ const KYLMWSProfilePanel = ({ mwsData, onBack, hideBackButton = false, onResetMW
       
       {hideBackButton && (
         <h2 className="text-lg font-medium mb-4">Micro watershed profile</h2>
-      )}
-
-               
-     
+      )}   
                 
 
 {selectedMWS.length <= 1 ? (
@@ -123,67 +120,124 @@ const KYLMWSProfilePanel = ({ mwsData, onBack, hideBackButton = false, onResetMW
     </p>
   </div>
 
+      {onOpenSelection && (
+        <div className="flex justify-start 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>
+      )}
   <hr />
+  
+
+<div className="flex items-center justify-between mb-2">
+  <h3 className="font-medium text-gray-900">
+    Selected MWS
+  </h3>
+
+  <div className="w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 text-xs font-semibold flex items-center justify-center">
+    {selectedMWS.length}
+  </div>
+</div>
+
 
   {/* Selected MWS List */}
-  <div className="space-y-3 max-h-[320px] overflow-y-auto">
+<div className="space-y-3 max-h-[320px] overflow-y-auto overflow-x-hidden pt-2">
 
-    {selectedMWS.map((uid, index) => (
+  {selectedMWS.map((uid, index) => (
 
-      <div
-        key={uid}
-        className="flex items-center justify-between rounded-lg border border-gray-200 px-4 py-3 hover:border-indigo-300 hover:bg-indigo-50 transition"
-      >
+    <div
+      key={uid}
+      className="relative flex items-center justify-between rounded-lg border border-gray-200 px-2 py-2 hover:border-indigo-300 hover:bg-indigo-50 transition"
+    >
 
-        <div className="flex items-center gap-3">
+      {/* Remove MWS button - top right corner */}
+      <button
+        type="button"
+        title="Remove from selection"
+        onClick={(e) => {
+          e.stopPropagation();
+          onRemoveMWS?.(
+            typeof uid === 'object' ? (uid.id ?? uid.uid) : uid
+          );
+        }}
+        className="
+          absolute -top-2 right-0      
+          w-4 h-4
+          flex items-center justify-center
+          rounded-full
+          bg-white
+          border border-gray-200
+          shadow-sm
+          text-gray-400
+          hover:text-red-500
+          hover:border-red-200
+          hover:bg-red-50
+          transition-all
+          z-10
+        "
+      >
+        <X className="w-2 h-2" />
+      </button>
 
-          <div className="w-7 h-7 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center text-xs font-semibold">
-            {index + 1}
-          </div>
+      {/* Left side - Number + UID */}
+      <div className="flex items-center gap-3">
 
-          <div>
-           <p className="text-sm font-medium text-gray-800">
-              {typeof uid === 'object' ? (uid.name ?? uid.id ?? 'Unknown') : uid}
-            </p>
-          </div>
+        <div className="w-7 h-7 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center text-xs font-semibold">
+          {index + 1}
+        </div>
 
+        <div>
+          <p className="text-sm font-medium text-gray-800">
+            {typeof uid === 'object'
+              ? (uid.name ?? uid.id ?? 'Unknown')
+              : uid}
+          </p>
         </div>
 
-       <button
-      className="flex items-center gap-2 text-indigo-600 hover:text-indigo-700 mb-2"
-      onClick={() => handleReportDownload(mwsData?.uid)}
-    >
-      <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-        />
-      </svg>
-      <span className="text-sm">View Profile</span>
-    </button>
+      </div>
 
+      {/* View Profile */}
+      <button
+        className="flex items-center gap-1 text-indigo-600 hover:text-indigo-700 mr-2"
+        onClick={() =>
+          handleReportDownload(
+            typeof uid === 'object'
+              ? (uid.id ?? uid.uid)
+              : uid
+          )
+        }
+      >
+        <svg
+          className="w-4 h-4"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+          />
+        </svg>
+
+        <span className="text-sm">View Profile</span>
+      </button>
 
-      </div>
+    </div>
 
-    ))}
+  ))}
 
-  </div>
+</div>
 
 </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>
-      )}
+
 
        {intersectingVillages.length > 0 && (
   <div className="mt-5">
diff --git a/src/components/kyl_rightSidebar.jsx b/src/components/kyl_rightSidebar.jsx
index d8697ce6..17f1db0d 100644
--- a/src/components/kyl_rightSidebar.jsx
+++ b/src/components/kyl_rightSidebar.jsx
@@ -379,6 +379,44 @@ useEffect(() => {
     setSelectedStewardProfile(null);
   };
 
+  const handleRemoveMWS = (uid) => {
+  setManualSelectedMWS((prev) => {
+    const updated = prev.filter(
+      (id) => String(id) !== String(uid)
+    );
+
+    // Update map selection styling
+    if (mwsLayerRef?.current) {
+      const features = mwsLayerRef.current
+        .getSource()
+        .getFeatures();
+
+      features.forEach((feature) => {
+        const featureUid = feature.get("uid");
+
+        feature.set(
+          "isSelected",
+          updated.some(
+            (id) => String(id) === String(featureUid)
+          )
+            ? 1
+            : 0,
+          true
+        );
+      });
+
+      mwsLayerRef.current.getSource().changed();
+    }
+
+    // If no MWS remains, close the profile
+    if (updated.length === 0) {
+      onResetMWS();
+    }
+
+    return updated;
+  });
+};
+
   const handleIndicatorRemoval = (filter) => {
     setManualSelectedMWS([]);
     if (toggleStates[filter.name]) {
@@ -2087,6 +2125,7 @@ const sheet5Count =
           setSelectionMode={setSelectionMode}
           onResetMWS={onResetMWS}
           onResetSelection={onResetMWSSelection} 
+          onRemoveMWS={handleRemoveMWS}
           onOpenSelection={() => setShowSelectionPopup(true)}
           intersectingVillages={displayVillages}  
       />
diff --git a/src/pages/kyl_dashboard.jsx b/src/pages/kyl_dashboard.jsx
index e0beb5fa..651a14d0 100644
--- a/src/pages/kyl_dashboard.jsx
+++ b/src/pages/kyl_dashboard.jsx
@@ -235,6 +235,42 @@ const KYLDashboardPage = () => {
     }
   };
 
+  const handleRemoveMWS = (uid) => {
+  setManualSelectedMWS((prev) => {
+    const updated = prev.filter((id) => id !== uid);
+
+    // Update MWS selection styling on map
+    updateSelectedMWSStyle(updated);
+
+    // If no MWS is left, close the profile
+    if (updated.length === 0) {
+      setSelectedMWSProfile(null);
+      setHighlightMWS(null);
+      return updated;
+    }
+
+    // If the currently highlighted MWS was removed,
+    // highlight another remaining MWS
+    if (highlightMWS === uid) {
+      const nextUid = updated[updated.length - 1];
+      setHighlightMWS(nextUid);
+
+      const nextFeature = mwsLayerRef.current
+        ?.getSource()
+        ?.getFeatures()
+        ?.find(
+          (feature) => feature.get("uid") === nextUid
+        );
+
+      if (nextFeature) {
+        setSelectedMWSProfile(nextFeature.getProperties());
+      }
+    }
+
+    return updated;
+  });
+};
+
   const handleResetMWSSelection = () => {
     setManualSelectedMWS([]);
     setFilterSelections({

From 6d637568822403a9c6124be6c0882b1a0e43a12e Mon Sep 17 00:00:00 2001
From: Manvi <manvi.khatri@oniondev.com>
Date: Tue, 8 Sep 2026 11:49:39 +0530
Subject: [PATCH 2/2] Resolved comments:handleRemoveMWS function was repeated,
 so resolved that

---
 src/components/kyl_rightSidebar.jsx | 41 ++---------------------------
 src/pages/kyl_dashboard.jsx         |  1 +
 2 files changed, 3 insertions(+), 39 deletions(-)

diff --git a/src/components/kyl_rightSidebar.jsx b/src/components/kyl_rightSidebar.jsx
index 17f1db0d..ef60616b 100644
--- a/src/components/kyl_rightSidebar.jsx
+++ b/src/components/kyl_rightSidebar.jsx
@@ -70,7 +70,8 @@ const KYLRightSidebar = ({
   setShowStewards,
   mwsIndex,
   villageNameIndex,
-  setManualSelectedMWS
+  setManualSelectedMWS,
+  handleRemoveMWS,
 }) => {
   const [loadingWB, setLoadingWB] = React.useState(false);
   const [showSelectionPopup, setShowSelectionPopup] = React.useState(false);
@@ -379,44 +380,6 @@ useEffect(() => {
     setSelectedStewardProfile(null);
   };
 
-  const handleRemoveMWS = (uid) => {
-  setManualSelectedMWS((prev) => {
-    const updated = prev.filter(
-      (id) => String(id) !== String(uid)
-    );
-
-    // Update map selection styling
-    if (mwsLayerRef?.current) {
-      const features = mwsLayerRef.current
-        .getSource()
-        .getFeatures();
-
-      features.forEach((feature) => {
-        const featureUid = feature.get("uid");
-
-        feature.set(
-          "isSelected",
-          updated.some(
-            (id) => String(id) === String(featureUid)
-          )
-            ? 1
-            : 0,
-          true
-        );
-      });
-
-      mwsLayerRef.current.getSource().changed();
-    }
-
-    // If no MWS remains, close the profile
-    if (updated.length === 0) {
-      onResetMWS();
-    }
-
-    return updated;
-  });
-};
-
   const handleIndicatorRemoval = (filter) => {
     setManualSelectedMWS([]);
     if (toggleStates[filter.name]) {
diff --git a/src/pages/kyl_dashboard.jsx b/src/pages/kyl_dashboard.jsx
index 651a14d0..2790b58a 100644
--- a/src/pages/kyl_dashboard.jsx
+++ b/src/pages/kyl_dashboard.jsx
@@ -2576,6 +2576,7 @@ const wb_id = props?.UID ?? props?.id ?? props?.wb_id;
           mwsIndex={mwsIndex}
           villageNameIndex={villageNameIndex}
           setManualSelectedMWS={setManualSelectedMWS}
+          handleRemoveMWS={handleRemoveMWS}
         />
       </div>
     </div>