Merge pull request 'enhancecoutermapping' (#156) from enhancement/entryandquickadd into main

Reviewed-on: Pozomind/pozo-retail-app#156

src/Pages/CounterCategoryMapping/CounterCategoryMappingForm.jsx

@@ -1,13 +1,10 @@
 import { useRef, useState, useCallback, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { Messages } from '../../Components/Notifications/Messages';
-import { Form, Table, Space } from 'antd';
+import { Form, Table, Space, Input } from 'antd';
 import FormHeader from '../PageComponents/FormHeader.jsx';
-import { InputField } from '../../Components/Forms/InputField.jsx';
-import { DropDowns } from '../../Components/Forms/DropDown.jsx';
 import Buttons from '../../Components/Forms/Buttons.jsx';
 import {
-  CloseCircleOutlined,
   ArrowRightOutlined,
   DeleteFilled,
   EditFilled,
@@ -31,14 +28,15 @@ import {
 import { useAuth } from '../../AuthContext.jsx';
 import '../../Styles/CounterCategoryMappingForm/CounterCategoryMapping.scss';
 const subDirectory = import.meta.env.BASE_URL;
+import FolderExploreCompoent from "./FolderExploreCompoent.jsx"
 
 const CounterCategoryMappingForm = () => {
   const { SadminuserAccess } = useAuth();
   let SAAccessCommonMaster = SadminuserAccess?.find(
     (e) => e?.MenuName === 'Counter Category Mapping'
   );
-
   const formRef = useRef(null);
+  const memoizedData = useRef({});
   const dispatch = useDispatch();
   const CompId = getSession('CompId');
   const BranchId = getSession('BranchId');
@@ -48,12 +46,6 @@ const CounterCategoryMappingForm = () => {
   const [messageType, setMessageType] = useState(null);
   const [messageData, setMessageData] = useState(null);
   const [CounterName, setCounterName] = useState(null);
-  const [Categorydata, setCategorydata] = useState([]);
-  const [SubCategorydata, setSubCategorydata] = useState([]);
-  const [SelectedCategory, setSelectedCategory] = useState(null);
-  const [SelectedSubCategory, setSelectedSubCategory] = useState(null);
-  const [CounterSelCategory, setCounterSelCategory] = useState([]);
-  const [CounterSelSubCategory, setCounterSelSubCategory] = useState([]);
   const [SelectedCatList, setSelectedCatList] = useState([]);
   const [CategoryDataModal, setCategoryDataModal] = useState(false);
   const [Editstate, setEditState] = useState(false);
@@ -61,7 +53,10 @@ const CounterCategoryMappingForm = () => {
   const [CounterDetail, setCounterDetail] = useState([]);
   const [empData, setEmpData] = useState({});
   const [addnewAccess, setaddnewAccess] = useState(true);
+  const [openModel, setOpenModel] = useState(false);
+  const [expandedRows, setExpandedRows] = useState([]);
 
+  console.log(CounterName, 'CounterName')
   const items = [
     {
       name: 'Home',
@@ -74,16 +69,21 @@ const CounterCategoryMappingForm = () => {
     },
   ];
 
+
   useEffect(() => {
     dispatch(changeBreadCrumb({ items: items }));
-  }, []);
-  useEffect(() => {
     getCategorydetails();
     getCounterTokenDatas();
-    // if (UserType === "Employee") {
-    //     fetchApi()
-    // }
   }, []);
+  useEffect(() => {
+    if (EditData) {
+      formRef?.current?.setFieldsValue({
+        CounterName: EditData?.CounterName,
+      });
+    }
+  }, [Editstate]);
+
+
   useEffect(() => {
     if (UserType === 'Employee') {
       fetchApi();
@@ -111,19 +111,121 @@ const CounterCategoryMappingForm = () => {
     let Category = await dispatch(getCategoryData(data)).unwrap();
     if (Category?.data?.statusCode === 1) {
       if (Category?.data?.data?.length > 0) {
-        setCategorydata(Category?.data?.data);
-      } else {
-        setCategorydata([]);
+        const categoryList = Category.data.data;
+        const filteredCategories = categoryList?.map(e => ({
+          ProdCat: e.ProdCat,
+          ProdCatName: e?.ProdCatName,
+          isCatExpend: false,
+          ProdSubCat: []
+        }));
+
+        setExpandedRows(filteredCategories);
+      }
+      else {
+        setExpandedRows([])
+
       }
     } else {
-      setCategorydata([]);
+      setExpandedRows([])
+
     }
   };
+
+  const handleFinish = async () => {
+    if (Editstate) {
+      let putData = {
+        AppId: AppId,
+        BranchId: BranchId,
+        CompId: CompId,
+        "CounterId": EditData?.CounterId,
+        "CounterName": CounterName,
+        "ActiveStatus": "A",
+
+        CategoryDetails: (expandedRows || [])
+          .filter(cat => cat?.isCatExpend || cat?.CounterCatId)
+          .map(cat => {
+
+            const selectedSubs = (cat?.ProdSubCat || [])
+              .filter(sub => sub?.isSubcatexpend || sub?.CounterSubCatId)
+              .map(sub => ({
+                ProdSubCat: sub?.ProdSubCat,
+                CounterCatId: sub?.CounterCatId || null,
+                CounterSubCatId: sub?.CounterSubCatId || null,
+                ActiveStatus: sub?.isSubcatexpend ? "A" : "D"
+              }));
+
+            return {
+              CounterId: EditData?.CounterId || null,
+              CounterCatId: cat?.CounterCatId,
+              ProdCat: cat?.ProdCat,
+              ActiveStatus: cat?.isCatExpend ? "A" : "D",
+              SubCategoryDetails: selectedSubs
+            };
+          }),
+        "UpdatedBy": UserId
+      }
+      let PostCounterToken = await dispatch(
+        putCounterCategoryMap(putData)
+      ).unwrap();
+      if (PostCounterToken?.data?.statusCode === 1) {
+        setEditData([])
+        setEditState(false)
+        setMessageType('success');
+        setMessageData(PostCounterToken?.data?.response);
+        setOpenModel(false)
+        ClearDatas()
+        formRef?.current?.resetFields();
+      } else {
+        setMessageType('error');
+        setMessageData(PostCounterToken?.data?.response);
+      }
+    }
+    else {
+      let postdata = {
+        AppId: AppId,
+        BranchId: BranchId,
+        CompId: CompId,
+        CounterName: "values?.CounterName",
+        ActiveStatus: 'A',
+        CategoryDetails: (expandedRows || [])
+          .filter(cat => cat?.isCatExpend)
+          .map(cat => {
+
+            const selectedSubs = (cat?.ProdSubCat || [])
+              .filter(sub => sub?.isSubcatexpend)
+              .map(sub => ({
+                ProdSubCat: sub?.ProdSubCat,
+              }));
+
+            return {
+              ProdCat: cat?.ProdCat,
+              SubCategoryDetails: selectedSubs
+            };
+          })
+        ,
+        CreatedBy: UserId,
+      };
+      let PostCounterToken = await dispatch(
+        postCounterCategoryMap(postdata)
+      ).unwrap();
+      if (PostCounterToken?.data?.statusCode === 1) {
+        setMessageType('success');
+        setMessageData(PostCounterToken?.data?.response);
+        setOpenModel(false)
+        formRef?.current?.resetFields();
+      } else {
+        setMessageType('error');
+        setMessageData(PostCounterToken?.data?.response);
+      }
+    }
+
+  }
   const getCounterTokenDatas = async () => {
     let data = {
       AppId: AppId,
       CompId: CompId,
       BranchId: BranchId,
+      UserId: UserId
     };
     let Counterdatas = await dispatch(getCounterTokenData(data)).unwrap();
     if (Counterdatas?.data?.statusCode === 1) {
@@ -149,8 +251,7 @@ const CounterCategoryMappingForm = () => {
     );
     setEmpData(datas?.[0]);
   };
-
-  const getSubCategorydetails = async (ProdCat) => {
+  const getSubCategorydetailsFromChild = async (ProdCat) => {
     let data = {
       AppId: AppId,
       CompId: CompId,
@@ -163,283 +264,20 @@ const CounterCategoryMappingForm = () => {
         (item) => item.ProdSubCat !== null
       );
       if (filterSubcategory?.length > 0) {
-        setSubCategorydata(filterSubcategory);
+        return filterSubcategory
+
       } else {
-        setSubCategorydata([]);
+        return []
       }
-      return filterSubcategory;
+
     } else {
-      setSubCategorydata([]);
+      return []
     }
   };
   const onComplete = useCallback(() => {
     setMessageData(null);
     setMessageType(null);
   }, []);
-  const handleCategorydataChange = async (selectedcat) => {
-    setSubCategorydata([]); // Clear existing subcategories
-    setSelectedSubCategory(null);
-    let subcatdata = await getSubCategorydetails(selectedcat); // Fetch subcategories for the selected category
-    setSelectedCategory(selectedcat);
-
-    let allSubcategoriesSelected =
-      subcatdata?.length > 0
-        ? subcatdata.every((subcategory) => {
-            // Check in CounterSelCategory if subcategory is mapped
-            let foundInCounterSelCategory = CounterSelCategory?.some(
-              (item) =>
-                item.ProdCat === selectedcat &&
-                item.SubCategoryDetails?.some(
-                  (sub) =>
-                    sub.ProdSubCat === subcategory.ProdSubCat &&
-                    sub.ActiveStatus === 'A' // Check if ProdSubCat matches without ActiveStatus
-                )
-            );
-
-            // Check in CounterDetail if subcategory is mapped
-            let foundInCounterDetail =
-              CounterDetail.length > 0 &&
-              CounterDetail?.some((counter) =>
-                counter.CategoryDetails?.some(
-                  (category) =>
-                    category.ProdCat === selectedcat &&
-                    category.SubCategoryDetails?.some(
-                      (sub) =>
-                        sub.ProdSubCat === subcategory.ProdSubCat &&
-                        sub.ActiveStatus === 'A' // Check if ProdSubCat matches without ActiveStatus
-                    )
-                )
-              );
-
-            return foundInCounterSelCategory || foundInCounterDetail;
-          })
-        : false;
-
-    let alreadyExists =
-      CounterSelCategory?.some(
-        (item) =>
-          item.ProdCat === selectedcat &&
-          item.ActiveStatus === 'A' &&
-          item.SubCategoryDetails?.length === 0
-      ) ||
-      CounterDetail?.some((counter) =>
-        counter.CategoryDetails?.some(
-          (category) =>
-            category.ProdCat === selectedcat &&
-            // && category.ActiveStatus === 'A'
-            category.SubCategoryDetails?.length === 0
-        )
-      );
-
-    // Check if the category is marked as 'D' (removed)
-    let isRemoved = CounterSelCategory?.some(
-      (item) => item.ProdCat === selectedcat && item.ActiveStatus === 'D'
-    );
-
-    // Proceed with logic based on checks
-    if (!allSubcategoriesSelected) {
-      if (!alreadyExists) {
-        let isAlreadySelected = CounterSelCategory?.some(
-          (item) => item.ProdCat === selectedcat
-        );
-
-        if (!isAlreadySelected) {
-          let selected = Categorydata?.find(
-            (item) => item.ProdCat === selectedcat
-          );
-          setCounterSelCategory((prev) => [
-            ...prev,
-            {
-              ProdCat: selected?.ProdCat,
-              ProdCatName: selected?.ProdCatName,
-              ActiveStatus: 'A',
-              SubCategoryDetails: [],
-            },
-          ]);
-        } else {
-          setCounterSelCategory((prevCategories) =>
-            prevCategories.map(
-              (item) =>
-                item.ProdCat === selectedcat
-                  ? { ...item, ActiveStatus: 'A' } // Update ActiveStatus to 'A'
-                  : item // Keep the item unchanged
-            )
-          );
-        }
-      } else {
-        setMessageType('error');
-        setMessageData('This category is already mapped');
-        formRef.current.resetFields(['Category']);
-        setSelectedCategory(null);
-        setSubCategorydata([]);
-        setSelectedSubCategory(null);
-      }
-    } else {
-      setMessageType('error');
-      setMessageData('This category is already mapped');
-      formRef.current.resetFields(['Category']);
-      setSelectedCategory(null);
-      setSubCategorydata([]);
-      setSelectedSubCategory(null);
-    }
-
-    formRef.current.resetFields(['Category']);
-    if (subcatdata?.length === 0) {
-      setSelectedCategory(null);
-    }
-  };
-
-  const handleSubCategorydataChange = async (selectedSubcat) => {
-    setSelectedSubCategory(selectedSubcat);
-    const isInCounterSelCategory = CounterSelCategory.some((category) =>
-      category.SubCategoryDetails.some(
-        (sub) => sub.ProdSubCat === selectedSubcat && sub.ActiveStatus === 'A'
-      )
-    );
-
-    // Check if subcategory exists in CounterDetail
-    const isInCounterDetail = CounterDetail.some((counter) =>
-      counter.CategoryDetails.some((category) =>
-        category.SubCategoryDetails.some(
-          (sub) => sub.ProdSubCat === selectedSubcat
-        )
-      )
-    );
-
-    if (isInCounterSelCategory || isInCounterDetail) {
-      setMessageType('error');
-      setMessageData('This Subcategory is already mapped');
-      formRef.current.resetFields(['SubCategory']);
-    } else {
-      setCounterSelCategory((prev) => {
-        let selected = SubCategorydata?.find(
-          (item) => item.ProdSubCat === selectedSubcat
-        );
-        const existingCategoryIndex = prev.findIndex(
-          (cat) => cat.ProdCat === selected?.ProdCat
-        );
-
-        if (existingCategoryIndex !== -1) {
-          // If category exists, check for existing subcategory
-          const existingSubCategoryIndex = prev[
-            existingCategoryIndex
-          ].SubCategoryDetails.findIndex(
-            (sub) => sub.ProdSubCat === selected?.ProdSubCat
-          );
-
-          if (existingSubCategoryIndex !== -1) {
-            // Subcategory exists, check its ActiveStatus
-            const existingSubCategory =
-              prev[existingCategoryIndex].SubCategoryDetails[
-                existingSubCategoryIndex
-              ];
-
-            if (existingSubCategory.ActiveStatus === 'D') {
-              // If ActiveStatus is "D", update it to "A"
-              const updatedCategory = {
-                ...prev[existingCategoryIndex],
-                SubCategoryDetails: prev[
-                  existingCategoryIndex
-                ].SubCategoryDetails.map((sub, index) =>
-                  index === existingSubCategoryIndex
-                    ? { ...sub, ActiveStatus: 'A' }
-                    : sub
-                ),
-              };
-              return [
-                ...prev.slice(0, existingCategoryIndex),
-                updatedCategory,
-                ...prev.slice(existingCategoryIndex + 1),
-              ];
-            } else {
-              return prev;
-            }
-          } else {
-            // Subcategory does not exist, add it
-            const updatedCategory = {
-              ...prev[existingCategoryIndex],
-              SubCategoryDetails: [
-                ...prev[existingCategoryIndex].SubCategoryDetails,
-                {
-                  ProdSubCat: selected?.ProdSubCat,
-                  ProdSubCatName: selected?.ProdSubCatName,
-                  ProdCat: selected?.ProdCat,
-                  ActiveStatus: 'A',
-                },
-              ],
-            };
-            return [
-              ...prev.slice(0, existingCategoryIndex),
-              updatedCategory,
-              ...prev.slice(existingCategoryIndex + 1),
-            ];
-          }
-        } else {
-          // If category doesn't exist, add a new category with subcategory
-          return [
-            ...prev,
-            {
-              ProdCat: selected?.ProdCat,
-              ProdCatName: selected?.ProdCatName,
-              ActiveStatus: 'A',
-              SubCategoryDetails: [
-                {
-                  ProdSubCat: selected?.ProdSubCat,
-                  ProdSubCatName: selected?.ProdSubCatName,
-                  ProdCat: selected?.ProdCat,
-                  ActiveStatus: 'A',
-                },
-              ],
-            },
-          ];
-        }
-      });
-    }
-
-    setSelectedSubCategory(null);
-    setSelectedCategory(null);
-    setSubCategorydata([]);
-    formRef.current.resetFields(['SubCategory', 'Category']);
-  };
-  const handleRemoveCategory = async (cat) => {
-    // let remove = CounterSelCategory?.filter(item =>item.ProdCat !== cat.ProdCat)
-    // setCounterSelCategory(remove)
-    setCounterSelCategory((prevCategories) =>
-      prevCategories.map(
-        (item) =>
-          item.ProdCat === cat.ProdCat
-            ? { ...item, ActiveStatus: 'D', SubCategoryDetails: [] } // Update ActiveStatus to 'D'
-            : item // Keep the item unchanged
-      )
-    );
-    setSelectedSubCategory(null);
-    setSelectedCategory(null);
-    setSubCategorydata([]);
-    formRef.current.resetFields(['SubCategory', 'Category']);
-  };
-
-  const handleRemoveSubCategory = async (subcat) => {
-    setCounterSelCategory((prevCategories) =>
-      prevCategories.map(
-        (category) =>
-          category.ProdCat === subcat.ProdCat
-            ? {
-                ...category,
-                SubCategoryDetails: category.SubCategoryDetails.map(
-                  (sub) =>
-                    sub.ProdSubCat === subcat.ProdSubCat
-                      ? { ...sub, ActiveStatus: 'D' } // Update ActiveStatus to 'D'
-                      : sub // Keep the subcategory unchanged
-                ),
-              }
-            : category // Keep the category unchanged
-      )
-    );
-    setSelectedSubCategory(null);
-    setSelectedCategory(null);
-    setSubCategorydata([]);
-    formRef.current.resetFields(['SubCategory', 'Category']);
-  };
   const ViewCategorydetails = async (CategoryList) => {
     setSelectedCatList(CategoryList);
     setCategoryDataModal(true);
@@ -449,20 +287,61 @@ const CounterCategoryMappingForm = () => {
     setCategoryDataModal(false);
   };
   const editData = async (record, index) => {
+
+    setCounterName(record?.CounterName)
     setEditState(true);
+    setOpenModel(true)
     setEditData(record);
-    let subcatdetail = record?.CategoryDetails?.flatMap(
-      (item) => item?.SubCategoryDetails
+
+    formRef?.current?.setFieldsValue({
+      CounterName: record?.CounterName,
+    });
+
+    const results = await Promise.all(
+      record?.CategoryDetails.map(cat =>
+        getSubCategorydetailsFromChild(cat?.ProdCat)
+      )
     );
-    formRef.current?.setFieldsValue({ CounterName: record?.CounterName });
-    formRef.current.resetFields(['Category']);
-    formRef.current.resetFields(['SubCategory']);
-    setCounterName(record?.CounterName);
-    setCounterSelCategory(record?.CategoryDetails);
-    // setCounterSelSubCategory(subcatdetail)
-    setSelectedCategory(null);
-    setSelectedSubCategory(null);
-    setSubCategorydata([]);
+    const subCategoryMap = {};
+    record?.CategoryDetails.forEach((cat, i) => {
+      subCategoryMap[cat?.ProdCat] = results[i] || [];
+    });
+    console.log(subCategoryMap, "subCategoryMap");
+
+    setExpandedRows(prev =>
+      prev.map(e => {
+        const catDetail = record?.CategoryDetails?.find(
+          x => x?.ProdCat === e.ProdCat
+        );
+
+        if (!catDetail) return e;
+
+        const subDetailMap = {};
+        catDetail?.SubCategoryDetails?.forEach(s => {
+          subDetailMap[s?.ProdSubCat] = s;
+        });
+
+        return {
+          ...e,
+          isCatExpend: true,
+          CounterCatId: catDetail?.CounterCatId,
+          ActiveStatus: "A",
+
+          // ✅ Attach subcategories
+          ProdSubCat: (subCategoryMap[e?.ProdCat] || []).map(sub => {
+            const subDetail = subDetailMap[sub?.ProdSubCat];
+
+            return {
+              ...sub,
+              CounterCatId: subDetail?.CounterCatId,
+              CounterSubCatId: subDetail?.CounterSubCatId,
+              isSubcatexpend: !!subDetail // true if exists
+            };
+          })
+        };
+      })
+    );
+
   };
   const statusFormatter = async (record, index) => {
     let deletedata = {
@@ -486,101 +365,12 @@ const CounterCategoryMappingForm = () => {
     }
     ClearDatas();
   };
-  const onFinish = async (values) => {
-    const subcatalreadyselected =
-      CounterDetail?.flatMap(
-        (counter) =>
-          counter.CategoryDetails?.filter(
-            (category) =>
-              category.ActiveStatus === 'A' &&
-              category.SubCategoryDetails?.length > 0
-          ).map((category) => category.ProdCat) // Extract ProdCat IDs
-      ) || [];
 
-    let removewithoutsubcat = CounterSelCategory.filter(
-      (category) =>
-        !(
-          subcatalreadyselected.includes(category.ProdCat) &&
-          category.SubCategoryDetails?.length === 0 &&
-          category.ActiveStatus === 'A'
-        )
-    );
-    const filtereddeactivecat = removewithoutsubcat.filter(
-      (item) => !(!item.CounterId && item.ActiveStatus === 'D')
-    );
-    const filtereddeactivesub = filtereddeactivecat
-      .map((item) => {
-        return {
-          ...item,
-          SubCategoryDetails: item.SubCategoryDetails.filter(
-            (sub) => sub.ActiveStatus !== 'D'
-          ),
-        };
-      })
-      .filter((item) => item !== null);
-    // if(CounterSelCategory.some(category =>
-    //     ( subcatalreadyselected.includes(category.ProdCat) && category.SubCategoryDetails?.length === 0 && category.ActiveStatus ==="A")
-    //  )){
-    //     alert("Some Category is already mapped with subcategory so remove that category for mapping")
-    // }
-
-    if (Editstate) {
-      let putdata = {
-        AppId: AppId,
-        BranchId: BranchId,
-        CompId: CompId,
-        CounterName: values?.CounterName,
-        CounterId: EditData?.CounterId,
-        ActiveStatus: 'A',
-        CategoryDetails: filtereddeactivesub,
-        UpdatedBy: UserId,
-      };
-
-      let PutCounterToken = await dispatch(
-        putCounterCategoryMap(putdata)
-      ).unwrap();
-      if (PutCounterToken?.data?.statusCode === 1) {
-        setMessageType('success');
-        setMessageData(PutCounterToken?.data?.response);
-        formRef?.current?.resetFields();
-      } else {
-        setMessageType('error');
-        setMessageData(PutCounterToken?.data?.response);
-      }
-    } else {
-      let postdata = {
-        AppId: AppId,
-        BranchId: BranchId,
-        CompId: CompId,
-        CounterName: values?.CounterName,
-        ActiveStatus: 'A',
-        CategoryDetails: filtereddeactivesub,
-        CreatedBy: UserId,
-      };
-
-      let PostCounterToken = await dispatch(
-        postCounterCategoryMap(postdata)
-      ).unwrap();
-      if (PostCounterToken?.data?.statusCode === 1) {
-        setMessageType('success');
-        setMessageData(PostCounterToken?.data?.response);
-        formRef?.current?.resetFields();
-      } else {
-        setMessageType('error');
-        setMessageData(PostCounterToken?.data?.response);
-      }
-    }
-    ClearDatas();
-  };
   const ClearDatas = async () => {
+    getCategorydetails();
     getCounterTokenDatas();
     formRef?.current?.resetFields();
-    setSelectedCategory(null);
-    setSelectedSubCategory(null);
-    setSubCategorydata([]);
     setCounterName(null);
-    setCounterSelCategory([]);
-    setCounterSelSubCategory([]);
     setEditData([]);
     setEditState(false);
   };
@@ -674,10 +464,112 @@ const CounterCategoryMappingForm = () => {
         ),
     },
   ];
+  const handleNewMapping = () => {
+    setOpenModel(true)
+    setEditState(false)
+  }
+
+  const handleChangeinput = async ({ type, value, Cat, subcat }) => {
+
+    if (type === "cat") {
+
+      if (value) {
+        try {
+          let data;
+          if (memoizedData.current[Cat]) {
+            data = memoizedData.current[Cat];
+          } else {
+            data = await getSubCategorydetailsFromChild(Cat);
+            memoizedData.current[Cat] = data;
+          }
+
+          setExpandedRows(prev => {
+            const alreadyExists = prev.find(e => e.ProdCat === Cat);
+
+            if (alreadyExists) {
+              return prev.map(e =>
+                e.ProdCat === Cat
+                  ? {
+                    ...e,
+                    isCatExpend: true,
+                    ProdSubCat: data.map(sub => ({
+                      ...sub,
+                      isSubcatexpend: true,
+                    })),
+                  }
+                  : e
+              );
+            }
+
+            return [
+              ...prev,
+              {
+                ProdCat: Cat,
+                isCatExpend: true,
+                ProdSubCat: data.map(sub => ({
+                  ...sub,
+                  isSubcatexpend: false,
+                })),
+              },
+            ];
+          });
+
+        } catch (error) {
+          console.error("Subcategory fetch failed", error);
+        }
+
+      } else {
+        setExpandedRows(prev =>
+          prev.map(e =>
+            e.ProdCat === Cat
+              ? { ...e, isCatExpend: false }
+              : e
+          )
+        );
+      }
+
+    }
+    else if (type === "subcat") {
+
+      setExpandedRows(prev =>
+        prev.map(e => {
+
+          if (e.ProdCat !== Cat) return e;
+
+          const updatedSubs = e.ProdSubCat.map(sub =>
+            sub.ProdSubCat === subcat
+              ? { ...sub, isSubcatexpend: value }
+              : sub
+          );
+
+          // 🔥 Check if ANY subcategory is still true
+          const isAnySubSelected = updatedSubs.some(
+            sub => sub.isSubcatexpend
+          );
+
+          return {
+            ...e,
+            isCatExpend: isAnySubSelected,   // auto update category
+            ProdSubCat: updatedSubs
+          };
+        })
+      );
+    }
+  };
 
   return (
     <div className="pageOverAll">
       <div className="userPage">
+        <div className='countermapBTN'>
+          <FormHeader title={'Counter Category Mapping'} />
+          <Buttons
+            buttonText="Add New"
+            color="901D77"
+            icon={<ArrowRightOutlined />}
+            handleSubmit={handleNewMapping}
+            disabled={addnewAccess}
+          />
+        </div>
         <div className="userPageContent">
           <Messages
             messageType={messageType}
@@ -685,7 +577,7 @@ const CounterCategoryMappingForm = () => {
             onComplete={onComplete}
           />
 
-          <Form ref={formRef} className="formDivAnt" onFinish={onFinish}>
+          {/* <Form ref={formRef} className="formDivAnt" onFinish={onFinish}>
             <div className="CounterForm">
               <div className="Counterformdata">
             <FormHeader title={'Counter Category Mapping'} />
@@ -770,35 +662,7 @@ const CounterCategoryMappingForm = () => {
                 CounterSelSubCategory?.some(
                   (subcat) => subcat.ActiveStatus === 'A'
                 )) && (
-                // <div style={{width:"500px",height:"200px", border:"1px solid black"}}>
-                //      {CounterSelCategory?.length >0  &&
-                //         <>
-                //         <div>Selected Category:</div>
-                //         <div>{
-                //         CounterSelCategory?.map((item, index) => (
-                //                 <div key={index} className="selected-day">
-                //                     {item?.ProdCatName}
-                //                     <CloseCircleOutlined className="close-icon" onClick={() => handleRemoveCategory(item)} />
-                //                 </div>
-                //             ))}
-                //             </div>
-                //             </>
-                //         }
-                //          {CounterSelSubCategory?.length >0  &&
-                //         <>
-                //         <div>Selected Sub Category:</div>
-                //         <div>{
-                //         CounterSelSubCategory?.map((item, index) => (
-                //                 <div key={index} className="selected-day">
-                //                     {item?.ProdSubCatName}
-                //                     <CloseCircleOutlined className="close-icon" onClick={() => handleRemoveSubCategory(item)} />
-                //                 </div>
-                //             ))}
-                //             </div>
-                //             </>
-                //         }
                
-                // </div>
                 <table className="Counter-Category-mapping">
                   <thead>
                     <tr>
@@ -900,7 +764,9 @@ const CounterCategoryMappingForm = () => {
                 />
               </div>
             </div>
-          </Form>
+          </Form> */}
+
+
           {CounterDetail?.length > 0 && (
             <div style={{ height: '400px', overflowY: 'scroll' }}>
               <Table
@@ -993,6 +859,75 @@ const CounterCategoryMappingForm = () => {
             </div>
           }
         />
+        <DefaultModal
+          open={openModel}
+          title="Category Mapping"
+          handleCancel={() => { setOpenModel(false); ClearDatas() }}
+          handleSubmit={() => handleFinish()}
+          width={600}
+          footer={false}
+        >
+          <Form ref={formRef} onFinish={handleFinish}>
+            <Form.Item
+              name="CounterName"
+              rules={[
+                {
+                  required: true,
+                  // pattern: /^[\w\s]+$/,
+                  message: 'Please Enter Counter Name',
+                },
+                {
+                  validator: async (_, value) => {
+                    await validateSafeInput(value);
+
+                    if (value && value.length > 30) {
+                      return Promise.reject(
+                        'Counter Name should not exceed 30 characters'
+                      );
+                    }
+
+                    return Promise.resolve();
+                  },
+                },
+              ]}
+            >
+              <Input
+                placeholder="Enter counter name"
+                maxLength={50}
+                allowClear
+                value={CounterName}
+                onChange={(e) => setCounterName(e.target.value)}
+                style={{ marginBottom: "16px" }}
+              />
+
+            </Form.Item>
+            <div className='addCatAmping'>
+
+
+              {expandedRows?.map((item) => (
+                <FolderExploreCompoent
+                  key={item.ProdCat}
+                  data={item}
+                  handleChangeinput={handleChangeinput}
+                  expandedRows={expandedRows}
+                />
+              ))}
+
+            </div>
+            <div style={{
+              display: "flex",
+              flexDirection: "row-reverse"
+            }}>
+              <Buttons
+                buttonText="SUBMIT"
+                color="901D77"
+                icon={<ArrowRightOutlined />}
+
+              />
+            </div>
+          </Form>
+        </DefaultModal>
+
       </div>
     </div>
   );

src/Pages/CounterCategoryMapping/FolderExploreCompoent.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+import SubCategoryItem from "./SubCategoryItem";
+import "./FolderExploreComponent.scss"
+
+const FolderExploreComponent = ({
+    data,
+    handleChangeinput,
+}) => {
+    const { ProdCat, ProdCatName, isCatExpend, ProdSubCat } = data;
+    const subCategory = ProdSubCat || [];
+    return (
+        <div className="FolderExploremaster">
+            {/* Parent Checkbox */}
+            <div style={{
+                backgroundColor: "#f1f1ff",
+                marginBottom: "6px",
+                padding: "10px",
+                borderRadius:"8px",
+                fontFamily:"Poppins"
+            }}>
+
+                <label>
+                    <input
+                        type="checkbox"
+                        checked={isCatExpend}
+                        onChange={(event) =>
+                            handleChangeinput({ type: "cat", value: event.target.checked, Cat: ProdCat })
+                        }
+                    />
+                    {" "}{ProdCatName}
+                </label>
+                {/* Children */}
+                {isCatExpend &&
+                    subCategory.map((sub) => (
+                        <SubCategoryItem
+                            key={sub.ProdSubCat}
+                            sub={sub}
+                            catId={ProdCat}
+                            handleChangeinput={handleChangeinput}
+                        />
+                    ))}
+            </div>
+        </div>
+    );
+};
+
+export default FolderExploreComponent;

src/Pages/CounterCategoryMapping/FolderExploreComponent.scss

@@ -0,0 +1,4 @@
+.FolderExploremaster{
+    display: flex;
+    flex-direction: column;
+}

src/Pages/CounterCategoryMapping/SubCategoryItem.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+const SubCategoryItem = ({ catId, sub, selected, handleChangeinput }) => {
+  return (
+    <div
+      style={{
+        marginLeft: "30px",
+        display: "flex",
+        alignItems: "center",
+        marginTop: "4px",
+      }}
+    >
+      <input
+        type="checkbox"
+        checked={sub?.isSubcatexpend}
+        onChange={(e) =>
+          handleChangeinput({ type: "subcat", value: e.target.checked, Cat: catId, subcat: sub.ProdSubCat })
+        }
+      />
+      <span style={{ marginLeft: "6px" }}>
+     {sub.ProdSubCatName}
+      </span>
+    </div>
+  );
+};
+
+export default SubCategoryItem;

src/Styles/CounterCategoryMappingForm/CounterCategoryMapping.scss

@@ -5,13 +5,34 @@
   gap: 1rem;
   flex-wrap: wrap;
   margin-bottom: 12px;
+
   .ant-form-item {
     margin-bottom: 0px;
   }
 
 }
+
 .Counterformdata {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
 }
+
+.addCatAmping {
+  height: 65vh;
+  overflow: auto;
+  scrollbar-width: thin;
+
+  .ant-input {
+    padding: 3px 14px 6px 11px !important;
+  }
+}
+
+.countermapBTN {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  width: 100%;
+  margin-bottom: 10px;
+}