rez-table-listing-mui 1.3.33 → 1.3.35

package/src/listing/components/filter/components/saved-filter.tsx

@@ -1,248 +1,3 @@
-// import { useEffect, useState } from "react";
-// import {
-//   FilterFormComponentProps,
-//   FilterMasterStateProps,
-//   FilterOperationListProps,
-// } from "../../../types/filter";
-// import {
-//   Box,
-//   IconButton,
-//   List,
-//   ListItem,
-//   ListItemText,
-//   Typography,
-// } from "@mui/material";
-// import CustomSearch from "./search";
-// import { DeleteIcon, EditIcon } from "../../../../assets/svg";
-// import SavedFilterEditComponent from "./saved-edit-filter";
-// import { filterStyles } from "../style";
-// import { CheckBox } from "../../../../assets/svg";
-
-// const SavedFilter = ({
-//   columnsData,
-//   dropdownData,
-//   tableStates,
-//   editMode,
-//   setEditMode,
-//   setDeleteFilterModalOpen,
-//   setSavedFilterModalOpen,
-//   tabValue,
-//   onChangeFunction,
-//   filterComponentOptions,
-// }: FilterFormComponentProps) => {
-//   const { filters, filterMaster, setFilterMaster, setFilterToDelete } =
-//     tableStates;
-//   const [searchTerm, setSearchTerm] = useState<string>("");
-
-//   // reset savedFilterEditValue when component unmounts
-//   useEffect(() => {
-//     return () => {
-//       const editModeFromTabOptions =
-//         filterComponentOptions?.tabOptions?.savedFilter?.editMode;
-//       if (!editModeFromTabOptions) {
-//         setEditMode && setEditMode(false);
-//         setFilterMaster(
-//           (prev) =>
-//             ({
-//               ...prev,
-//               saved_filters: {
-//                 ...prev?.attributes,
-//                 selectedId: "",
-//                 selectedName: "",
-//                 selectedCode: "",
-//               },
-//             } as FilterMasterStateProps)
-//         );
-//       }
-//     };
-//   }, []);
-
-//   const handleListItemClick = (filter: FilterOperationListProps) => {
-//     const newFilterMasterState = {
-//       ...filterMaster,
-//       saved_filters: {
-//         ...filterMaster?.attributes,
-//         selectedId: filter?.value,
-//         selectedName: filter?.label,
-//         selectedCode: filter?.code,
-//       },
-//       attributes: {
-//         ...filterMaster?.attributes,
-//         radio: [],
-//       },
-//       activeFilterTabIndex: tabValue,
-//     } as FilterMasterStateProps;
-
-//     setFilterMaster(newFilterMasterState);
-
-//     const newState = {
-//       filterMaster: newFilterMasterState,
-//       filters: filters,
-//     };
-
-//     onChangeFunction && onChangeFunction(newState);
-
-//     // setEditfilter state on edit icon click
-//     setEditMode && setEditMode(true);
-//     setFilterToDelete(filter);
-//   };
-
-//   const handleAppyFilter = (filter: FilterOperationListProps) => {
-//     const newFilterMasterState = {
-//       ...filterMaster,
-//       saved_filters: {
-//         ...filterMaster?.attributes,
-//         selectedId: filter?.value,
-//         selectedName: filter?.label,
-//         selectedCode: filter?.code,
-//       },
-//       attributes: {
-//         ...filterMaster?.attributes,
-//         radio: [],
-//       },
-//       activeFilterTabIndex: tabValue,
-//     } as FilterMasterStateProps;
-
-//     setFilterMaster(newFilterMasterState);
-
-//     const newState = {
-//       filterMaster: newFilterMasterState,
-//       filters: filters,
-//     };
-
-//     onChangeFunction && onChangeFunction(newState);
-//   };
-
-//   const renderList = () => (
-//     <>
-//       <CustomSearch
-//         value={searchTerm}
-//         onChange={setSearchTerm}
-//         className="search-input"
-//       />
-
-//       {columnsData?.saved_filter?.length === 0 ? (
-//         <Typography sx={{ mt: 2 }}>No saved filters yet.</Typography>
-//       ) : (
-//         <List
-//           sx={{
-//             display: "flex",
-//             flexDirection: "column",
-//             gap: 1,
-//             mt: 2,
-//           }}
-//         >
-//           {columnsData?.saved_filter
-//             ?.filter((filter) =>
-//               filter.label?.toLowerCase().includes(searchTerm.toLowerCase())
-//             )
-//             ?.map((filter) => (
-//               <ListItem
-//                 key={filter?.value}
-//                 sx={{
-//                   cursor: "pointer",
-//                   border:
-//                     filter?.value ===
-//                     tableStates?.filterMaster?.saved_filters?.selectedId
-//                       ? `3px solid #7a5af8`
-//                       : "1px solid #C5C5C5",
-//                   borderRadius: "8px",
-//                   display: "flex",
-//                   justifyContent: "space-between",
-//                   gap: 1,
-//                   alignItems: "center",
-//                   "&:hover .action-icons": {
-//                     opacity: 1,
-//                     visibility: "visible",
-//                   },
-//                 }}
-//                 onClick={() => handleAppyFilter(filter)}
-//               >
-//                 {filter?.value ===
-//                   tableStates?.filterMaster?.saved_filters?.selectedId && (
-//                   <Box
-//                     sx={{
-//                       display: "flex",
-//                       alignItems: "center",
-//                       cursor: "pointer",
-//                       color: "green",
-//                       rounded: "full",
-//                     }}
-//                   >
-//                     <CheckBox />
-//                   </Box>
-//                 )}
-//                 <ListItemText primary={filter?.label} />
-
-//                 <Box
-//                   onClick={(e) => e.stopPropagation()}
-//                   className="action-icons"
-//                   sx={{
-//                     display: "flex",
-//                     gap: 1,
-//                     opacity: 0,
-//                     visibility: "hidden",
-//                     transition: "opacity 0.2s ease, visibility 0.2s ease",
-//                   }}
-//                 >
-//                   <IconButton
-//                     size="large"
-//                     onClick={() => handleListItemClick(filter)}
-//                   >
-//                     <EditIcon />
-//                   </IconButton>
-
-//                   <IconButton
-//                     size="small"
-//                     onClick={() => {
-//                       setFilterToDelete(filter);
-//                       setDeleteFilterModalOpen?.(true);
-//                     }}
-//                   >
-//                     <DeleteIcon />
-//                   </IconButton>
-//                 </Box>
-//               </ListItem>
-//             ))}
-//         </List>
-//       )}
-//     </>
-//   );
-
-//   const mainBoxStyles = {
-//     ...filterStyles.filterMainComponentWrapper,
-//     ...filterStyles.scrollbarCustom,
-//   };
-
-//   return (
-//     <Box sx={mainBoxStyles} className="saved-filter-component-wrapper">
-//       {/* Render search input and list */}
-//       {!editMode && renderList()}
-
-//       {editMode && (
-//         <SavedFilterEditComponent
-//           columnsData={columnsData}
-//           dropdownData={dropdownData}
-//           tableStates={tableStates}
-//           editMode={editMode}
-//           setEditMode={setEditMode}
-//           searchTerm={searchTerm}
-//           setSearchTerm={setSearchTerm}
-//           setSavedFilterModalOpen={setSavedFilterModalOpen}
-//           setDeleteFilterModalOpen={setDeleteFilterModalOpen}
-//           onChangeFunction={onChangeFunction}
-//           filterComponentOptions={filterComponentOptions}
-//         />
-//       )}
-//     </Box>
-//   );
-// };
-
-// export default SavedFilter;
-
-// do not delete this logic rework this
-// ----------------------------------------------------------------------------------------------------------------------------
-
 import { useEffect, useState } from "react";
 import {
   FilterFormComponentProps,
@@ -264,7 +19,6 @@ import {
 import CustomSearch from "./search";
 import { DeleteIcon, EditIcon } from "../../../../assets/svg";
 import SavedFilterEditComponent from "./saved-edit-filter";
-// import { filterStyles } from "../style";
 import { CheckBox } from "../../../../assets/svg";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
@@ -285,7 +39,20 @@ const SavedFilter = ({
 
   const [searchTerm, setSearchTerm] = useState<string>("");
 
-  const normalizeFilter = (f: any): FilterOperationListProps => {
+  const MyFilter = (f: any): FilterOperationListProps => {
+    return {
+      label: f.name || f.label || "Unnamed Filter",
+      value: f.id || f.value,
+      code: f.code ?? "",
+      is_shared: false,
+      created_by: f.created_by || "",
+      description: f.description || "",
+      is_owner: true, // My filter = always owner
+      is_editable: f.is_editable === true || f.is_editable === "true",
+    };
+  };
+
+  const SharedFilter = (f: any): FilterOperationListProps => {
     const prefs =
       f.sharedPreferences || f.preferences || f.meta || f.shared_meta || {};
 
@@ -293,11 +60,10 @@ const SavedFilter = ({
       label: f.name || f.label || "Unnamed Filter",
       value: f.id || f.value,
       code: f.code ?? "",
-      is_shared: f.is_shared ?? prefs.is_shared ?? false,
+      is_shared: f.is_shared ?? prefs.is_shared ?? true,
       created_by: f.created_by || "shared_filter",
       description: f.description || "",
       is_owner: f.is_owner === true || prefs.is_owner === "true",
-
       is_editable:
         f.is_editable === true ||
         f.is_editable === "true" ||
@@ -306,13 +72,13 @@ const SavedFilter = ({
     };
   };
 
-  const mappedSavedFilter: FilterOperationListProps[] =
-    columnsData?.saved_filter?.map(normalizeFilter) ?? [];
-  console.log("mappedSavedFilter", mappedSavedFilter);
+  //  SEPARATE DATA MAPPINGS
+
+  const myFilters: FilterOperationListProps[] =
+    columnsData?.saved_filter?.map(MyFilter) ?? [];
 
-  const mappedSharedFilter: FilterOperationListProps[] =
-    columnsData?.shared_filter?.map(normalizeFilter) ?? [];
-  console.log("mappedSharedFilter", mappedSharedFilter);
+  const sharedFilters: FilterOperationListProps[] =
+    columnsData?.shared_filter?.map(SharedFilter) ?? [];
 
   // Reset on unmount
   useEffect(() => {
@@ -341,6 +107,8 @@ const SavedFilter = ({
     };
   }, []);
 
+  // APPLY FILTER
+
   const applyFilterStates = (filter: FilterOperationListProps) => {
     const newFilterMaster = {
       ...filterMaster,
@@ -378,32 +146,87 @@ const SavedFilter = ({
   const handleApplyFilter = (filter: FilterOperationListProps) => {
     applyFilterStates(filter);
   };
+
   const [openAccordion, setOpenAccordion] = useState<"my" | "shared">("my");
 
-  /**
-   * renderList
-   * @param source - list to render
-   * @param isSharedList - true when rendering Shared Filters (default false)
-   *
-   * Behavior:
-   * - If isSharedList === true -> show Edit icon ONLY when filter.is_editable === true
-   * - If isSharedList === false -> show Edit icon always (or as per filter.is_editable if you prefer)
-   */
-  const renderList = (
-    source: FilterOperationListProps[],
-    isSharedList: boolean = false,
-    { emptyMessage = "No saved filters yet." } = {}
-  ) =>
+  //  RENDER: MY FILTERS
+
+  const renderMyFilters = (source: FilterOperationListProps[]) =>
+    source.length === 0 ? (
+      <Typography>No My Filters</Typography>
+    ) : (
+      <List sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
+        {source
+          .filter((f) =>
+            f.label?.toLowerCase().includes(searchTerm.toLowerCase())
+          )
+          .map((filter) => (
+            <ListItem
+              key={filter.value}
+              sx={{
+                cursor: "pointer",
+                borderRadius: "8px",
+                bgcolor: "#f2f6f8ff",
+                display: "flex",
+                justifyContent: "space-between",
+                gap: 1,
+                alignItems: "center",
+                "&:hover .action-icons": {
+                  opacity: 1,
+                  visibility: "visible",
+                },
+              }}
+              onClick={() => handleApplyFilter(filter)}
+            >
+              {filter.value === filterMaster?.saved_filters?.selectedId && (
+                <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <CheckBox />
+                </Box>
+              )}
+
+              <ListItemText primary={filter.label} />
+
+              <Box
+                onClick={(e) => e.stopPropagation()}
+                className="action-icons"
+                sx={{
+                  display: "flex",
+                  gap: 1,
+                  opacity: 0,
+                  visibility: "hidden",
+                  transition: "opacity 0.2s ease, visibility 0.2s ease",
+                }}
+              >
+                <IconButton
+                  size="large"
+                  onClick={() => handleListItemClick(filter)}
+                >
+                  <EditIcon />
+                </IconButton>
+
+                <IconButton
+                  size="small"
+                  onClick={() => {
+                    setFilterToDelete(filter);
+                    setDeleteFilterModalOpen?.(true);
+                  }}
+                >
+                  <DeleteIcon />
+                </IconButton>
+              </Box>
+            </ListItem>
+          ))}
+      </List>
+    );
+
+  // ----------------------------------------
+  //  RENDER: SHARED FILTERS
+  // ----------------------------------------
+  const renderSharedFilters = (source: FilterOperationListProps[]) =>
     source.length === 0 ? (
-      <Typography>{emptyMessage}</Typography>
+      <Typography>No Shared Filters</Typography>
     ) : (
-      <List
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          gap: 1,
-        }}
-      >
+      <List sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
         {source
           .filter((f) =>
             f.label?.toLowerCase().includes(searchTerm.toLowerCase())
@@ -413,11 +236,6 @@ const SavedFilter = ({
               key={filter.value}
               sx={{
                 cursor: "pointer",
-                // border:
-                //   filter.value ===
-                //   tableStates?.filterMaster?.saved_filters?.selectedId
-                //     ? `3px solid #7a5af8`
-                //     : "1px solid #C5C5C5",
                 borderRadius: "8px",
                 bgcolor: "#f2f6f8ff",
                 display: "flex",
@@ -431,8 +249,7 @@ const SavedFilter = ({
               }}
               onClick={() => handleApplyFilter(filter)}
             >
-              {filter.value ===
-                tableStates?.filterMaster?.saved_filters?.selectedId && (
+              {filter.value === filterMaster?.saved_filters?.selectedId && (
                 <Box sx={{ display: "flex", alignItems: "center" }}>
                   <CheckBox />
                 </Box>
@@ -451,11 +268,7 @@ const SavedFilter = ({
                   transition: "opacity 0.2s ease, visibility 0.2s ease",
                 }}
               >
-                {(!isSharedList ||
-                  filter.is_editable === true ||
-                  filter.is_owner === true) && (
-                  //  ||
-                  // String(filter.created_by) !== String(filter.user_id))
+                {(filter.is_editable || filter.is_owner) && (
                   <IconButton
                     size="large"
                     onClick={() => handleListItemClick(filter)}
@@ -463,7 +276,7 @@ const SavedFilter = ({
                     <EditIcon />
                   </IconButton>
                 )}
-                {filter?.is_owner === true && (
+                {filter.is_owner && (
                   <IconButton
                     size="small"
                     onClick={() => {
@@ -480,17 +293,14 @@ const SavedFilter = ({
       </List>
     );
 
+  // ----------------------------------------
+  //  RENDER MAIN COMPONENT
+  // ----------------------------------------
   return (
-    <Box
-      // sx={{
-      //   ...filterStyles.filterMainComponentWrapper,
-      //   ...filterStyles.scrollbarCustom,
-      // }}
-      className="saved-filter-component-wrapper"
-    >
+    <Box className="saved-filter-component-wrapper">
       {!editMode && (
         <>
-          {/* Search Box */}
+          {/* Search */}
           <Box sx={{ mb: 2 }}>
             <CustomSearch
               value={searchTerm}
@@ -499,7 +309,7 @@ const SavedFilter = ({
             />
           </Box>
 
-          {/* ---- My Filters Section ---- */}
+          {/* ---- My Filters ---- */}
           <Box
             sx={{
               background: "#fff",
@@ -510,7 +320,6 @@ const SavedFilter = ({
             }}
           >
             <Accordion
-              // defaultExpanded
               disableGutters
               elevation={0}
               expanded={openAccordion === "my"}
@@ -527,17 +336,17 @@ const SavedFilter = ({
               <AccordionDetails
                 sx={{
                   p: "9px",
-                  maxHeight: "320px",
+                  maxHeight: "230px",
                   overflowY: "auto",
                   scrollbarWidth: "thin",
                 }}
               >
-                {renderList(mappedSavedFilter, false)}
+                {renderMyFilters(myFilters)}
               </AccordionDetails>
             </Accordion>
           </Box>
 
-          {/* ---- Shared Filters Section ---- */}
+          {/* ---- Shared Filters ---- */}
           <Box
             sx={{
               background: "#fff",
@@ -561,16 +370,15 @@ const SavedFilter = ({
                 <Typography fontWeight={600}>Shared Filters</Typography>
               </AccordionSummary>
               <Divider sx={{ width: "100%" }} />
-
               <AccordionDetails
                 sx={{
                   p: "9px",
-                  maxHeight: "320px",
+                  maxHeight: "230px",
                   overflowY: "auto",
                   scrollbarWidth: "thin",
                 }}
               >
-                {renderList(mappedSharedFilter, true)}
+                {renderSharedFilters(sharedFilters)}
               </AccordionDetails>
             </Accordion>
           </Box>
@@ -598,303 +406,3 @@ const SavedFilter = ({
 };
 
 export default SavedFilter;
-
-// import { useEffect, useState } from "react";
-// import {
-//   FilterFormComponentProps,
-//   FilterMasterStateProps,
-// } from "../../../types/filter";
-// import {
-//   Accordion,
-//   AccordionDetails,
-//   AccordionSummary,
-//   Box,
-//   Divider,
-//   IconButton,
-//   List,
-//   ListItem,
-//   ListItemText,
-//   Typography,
-// } from "@mui/material";
-// import CustomSearch from "./search";
-// import { DeleteIcon, EditIcon } from "../../../../assets/svg";
-// import SavedFilterEditComponent from "./saved-edit-filter";
-// import { CheckBox } from "../../../../assets/svg";
-// import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-
-// const SavedFilter = ({
-//   columnsData,
-//   dropdownData,
-//   tableStates,
-//   editMode,
-//   setEditMode,
-//   setDeleteFilterModalOpen,
-//   onSaveFilterButtonClick,
-//   tabValue,
-//   onChangeFunction,
-//   filterComponentOptions,
-// }: FilterFormComponentProps) => {
-//   const { filters, filterMaster, setFilterMaster, setFilterToDelete } =
-//     tableStates;
-
-//   const [searchTerm, setSearchTerm] = useState<string>("");
-
-//   // ------------------------------
-//   // APPLY FILTER STATE (same logic)
-//   // ------------------------------
-//   const applyFilterStates = (filter: any) => {
-//     const newFilterMaster = {
-//       ...filterMaster,
-//       saved_filters: {
-//         ...(filterMaster?.saved_filters ?? {}),
-//         selectedId: filter?.value || filter?.id,
-//         selectedName: filter?.label || filter?.name,
-//         selectedCode: filter?.code,
-//         shareWithTeam: filter?.is_shared,
-//         allowTeamEdit: filter?.is_editable,
-//       },
-//       attributes: {
-//         ...filterMaster?.attributes,
-//         radio: [],
-//       },
-//       activeFilterTabIndex: tabValue,
-//     } as FilterMasterStateProps;
-
-//     setFilterMaster(newFilterMaster);
-
-//     onChangeFunction &&
-//       onChangeFunction({
-//         filterMaster: newFilterMaster,
-//         filters,
-//       });
-//   };
-
-//   const handleListItemClick = (filter: any) => {
-//     applyFilterStates(filter);
-//     setEditMode && setEditMode(true);
-//     setFilterToDelete(filter);
-//   };
-
-//   const handleApplyFilter = (filter: any) => {
-//     applyFilterStates(filter);
-//   };
-
-//   // ============================
-//   // ⭐ RENDER SAVED FILTER LIST
-//   // ============================
-//   const renderSavedFilterList = () => {
-//     const list = columnsData?.saved_filter ?? [];
-
-//     return list.length === 0 ? (
-//       <Typography>No saved filters yet.</Typography>
-//     ) : (
-//       <List sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
-//         {list
-//           .filter((f: any) =>
-//             f.label?.toLowerCase().includes(searchTerm.toLowerCase())
-//           )
-//           .map((filter: any) => (
-//             <ListItem
-//               key={filter.value}
-//               sx={{
-//                 cursor: "pointer",
-//                 borderRadius: "8px",
-//                 bgcolor: "#f2f6f8ff",
-//                 display: "flex",
-//                 justifyContent: "space-between",
-//                 gap: 1,
-//                 alignItems: "center",
-//                 "&:hover .action-icons": {
-//                   opacity: 1,
-//                   visibility: "visible",
-//                 },
-//               }}
-//               onClick={() => handleApplyFilter(filter)}
-//             >
-//               {filter.value === filterMaster?.saved_filters?.selectedId && (
-//                 <Box sx={{ display: "flex", alignItems: "center" }}>
-//                   <CheckBox />
-//                 </Box>
-//               )}
-
-//               <ListItemText primary={filter.label} />
-
-//               <Box
-//                 onClick={(e) => e.stopPropagation()}
-//                 className="action-icons"
-//                 sx={{
-//                   display: "flex",
-//                   gap: 1,
-//                   opacity: 0,
-//                   visibility: "hidden",
-//                   transition: "all 0.2s ease",
-//                 }}
-//               >
-//                 <IconButton
-//                   size="large"
-//                   onClick={() => handleListItemClick(filter)}
-//                 >
-//                   <EditIcon />
-//                 </IconButton>
-
-//                 <IconButton
-//                   size="small"
-//                   onClick={() => {
-//                     setFilterToDelete(filter);
-//                     setDeleteFilterModalOpen?.(true);
-//                   }}
-//                 >
-//                   <DeleteIcon />
-//                 </IconButton>
-//               </Box>
-//             </ListItem>
-//           ))}
-//       </List>
-//     );
-//   };
-
-//   // ============================
-//   // ⭐ RENDER SHARED FILTER LIST
-//   // ============================
-//   const renderSharedFilterList = () => {
-//     const list = columnsData?.shared_filter ?? [];
-
-//     return list.length === 0 ? (
-//       <Typography>No shared filters yet.</Typography>
-//     ) : (
-//       <List sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
-//         {list
-//           .filter((f: any) =>
-//             f.name?.toLowerCase().includes(searchTerm.toLowerCase())
-//           )
-//           .map((filter: any) => (
-//             <ListItem
-//               key={filter.id}
-//               sx={{
-//                 cursor: "pointer",
-//                 borderRadius: "8px",
-//                 bgcolor: "#f2f6f8ff",
-//                 display: "flex",
-//                 justifyContent: "space-between",
-//                 gap: 1,
-//                 alignItems: "center",
-//               }}
-//               onClick={() =>
-//                 handleApplyFilter({
-//                   id: filter.id,
-//                   value: filter.id,
-//                   name: filter.name,
-//                   label: filter.name,
-//                   code: filter.code,
-//                 })
-//               }
-//             >
-//               {filter.id === filterMaster?.saved_filters?.selectedId && (
-//                 <Box sx={{ display: "flex", alignItems: "center" }}>
-//                   <CheckBox />
-//                 </Box>
-//               )}
-
-//               <ListItemText primary={filter.name} />
-//             </ListItem>
-//           ))}
-//       </List>
-//     );
-//   };
-
-//   return (
-//     <Box className="saved-filter-component-wrapper">
-//       {!editMode && (
-//         <>
-//           <Box sx={{ mb: 2 }}>
-//             <CustomSearch
-//               value={searchTerm}
-//               onChange={setSearchTerm}
-//               className="search-input"
-//             />
-//           </Box>
-
-//           {/* ---- My Filters ---- */}
-//           <Box
-//             sx={{
-//               background: "#fff",
-//               borderRadius: "12px",
-//               border: "1px solid #eee",
-//               mb: 2,
-//               overflow: "hidden",
-//             }}
-//           >
-//             <Accordion defaultExpanded disableGutters elevation={0}>
-//               <AccordionSummary
-//                 expandIcon={<ExpandMoreIcon fontSize="small" />}
-//               >
-//                 <Typography fontWeight={600}>My Filters</Typography>
-//               </AccordionSummary>
-
-//               <Divider />
-//               <AccordionDetails
-//                 sx={{
-//                   p: "9px",
-//                   maxHeight: "320px",
-//                   overflowY: "auto",
-//                   scrollbarWidth: "thin",
-//                 }}
-//               >
-//                 {renderSavedFilterList()}
-//               </AccordionDetails>
-//             </Accordion>
-//           </Box>
-
-//           {/* ---- Shared Filters ---- */}
-//           <Box
-//             sx={{
-//               background: "#fff",
-//               borderRadius: "12px",
-//               border: "1px solid #eee",
-//               mb: 2,
-//               overflow: "hidden",
-//             }}
-//           >
-//             <Accordion disableGutters elevation={0}>
-//               <AccordionSummary
-//                 expandIcon={<ExpandMoreIcon fontSize="small" />}
-//               >
-//                 <Typography fontWeight={600}>Shared Filters</Typography>
-//               </AccordionSummary>
-
-//               <Divider />
-//               <AccordionDetails
-//                 sx={{
-//                   p: "9px",
-//                   maxHeight: "320px",
-//                   overflowY: "auto",
-//                   scrollbarWidth: "thin",
-//                 }}
-//               >
-//                 {renderSharedFilterList()}
-//               </AccordionDetails>
-//             </Accordion>
-//           </Box>
-//         </>
-//       )}
-
-//       {editMode && (
-//         <SavedFilterEditComponent
-//           columnsData={columnsData}
-//           dropdownData={dropdownData}
-//           tableStates={tableStates}
-//           editMode={editMode}
-//           setEditMode={setEditMode}
-//           searchTerm={searchTerm}
-//           setSearchTerm={setSearchTerm}
-//           onSaveFilterButtonClick={onSaveFilterButtonClick}
-//           setDeleteFilterModalOpen={setDeleteFilterModalOpen}
-//           onChangeFunction={onChangeFunction}
-//           filterComponentOptions={filterComponentOptions}
-//         />
-//       )}
-//     </Box>
-//   );
-// };
-
-// export default SavedFilter;