rez-table-listing-mui 1.3.34 → 1.3.35

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

@@ -1,607 +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,
-//   FilterMasterStateProps,
-//   FilterOperationListProps,
-// } 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 { filterStyles } from "../style";
-// 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>("");
-
-//   const normalizeFilter = (f: any): FilterOperationListProps => {
-//     const prefs =
-//       f.sharedPreferences || f.preferences || f.meta || f.shared_meta || {};
-
-//     return {
-//       label: f.name || f.label || "Unnamed Filter",
-//       value: f.id || f.value,
-//       code: f.code ?? "",
-//       is_shared: f.is_shared ?? prefs.is_shared ?? false,
-//       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" ||
-//         prefs.is_editable === true ||
-//         prefs.is_editable === "true",
-//     };
-//   };
-
-//   const mappedSavedFilter: FilterOperationListProps[] =
-//     columnsData?.saved_filter?.map(normalizeFilter) ?? [];
-//   // console.log("mappedSavedFilter", mappedSavedFilter);
-
-//   const mappedSharedFilter: FilterOperationListProps[] =
-//     columnsData?.shared_filter?.map(normalizeFilter) ?? [];
-//   // console.log("mappedSharedFilter", mappedSharedFilter);
-
-//   // Reset on unmount
-//   useEffect(() => {
-//     return () => {
-//       const editModeFromTab =
-//         filterComponentOptions?.tabOptions?.savedFilter?.editMode;
-
-//       if (!editModeFromTab) {
-//         setEditMode && setEditMode(false);
-//         setFilterMaster(
-//           (prev) =>
-//             ({
-//               ...prev,
-//               saved_filters: {
-//                 ...(prev?.saved_filters ?? {}),
-//                 selectedId: "",
-//                 selectedName: "",
-//                 description: "",
-//                 selectedCode: "",
-//                 shareWithTeam: undefined,
-//                 allowTeamEdit: undefined,
-//               },
-//             } as FilterMasterStateProps)
-//         );
-//       }
-//     };
-//   }, []);
-
-//   const applyFilterStates = (filter: FilterOperationListProps) => {
-//     const newFilterMaster = {
-//       ...filterMaster,
-//       saved_filters: {
-//         ...(filterMaster?.saved_filters ?? {}),
-//         selectedId: filter.value,
-//         selectedName: filter.label,
-//         description: filter.description,
-//         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: FilterOperationListProps) => {
-//     applyFilterStates(filter);
-//     setEditMode && setEditMode(true);
-//     setFilterToDelete(filter);
-//   };
-
-//   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  filters yet." } = {}
-//   ) =>
-//     source.length === 0 ? (
-//       <Typography>{emptyMessage}</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",
-//                 // border:
-//                 //   filter.value ===
-//                 //   tableStates?.filterMaster?.saved_filters?.selectedId
-//                 //     ? `3px solid #7a5af8`
-//                 //     : "1px solid #C5C5C5",
-//                 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 ===
-//                 tableStates?.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",
-//                 }}
-//               >
-//                 {((!isSharedList && filter.is_editable === true) ||
-//                   filter.is_owner === true) && (
-//                   //  ||
-//                   // String(filter.created_by) !== String(filter.user_id))
-//                   <IconButton
-//                     size="large"
-//                     onClick={() => handleListItemClick(filter)}
-//                   >
-//                     <EditIcon />
-//                   </IconButton>
-//                 )}
-//                 {filter?.is_owner === true && (
-//                   <IconButton
-//                     size="small"
-//                     onClick={() => {
-//                       setFilterToDelete(filter);
-//                       setDeleteFilterModalOpen?.(true);
-//                     }}
-//                   >
-//                     <DeleteIcon />
-//                   </IconButton>
-//                 )}
-//               </Box>
-//             </ListItem>
-//           ))}
-//       </List>
-//     );
-
-//   return (
-//     <Box
-//       // sx={{
-//       //   ...filterStyles.filterMainComponentWrapper,
-//       //   ...filterStyles.scrollbarCustom,
-//       // }}
-//       className="saved-filter-component-wrapper"
-//     >
-//       {!editMode && (
-//         <>
-//           {/* Search Box */}
-//           <Box sx={{ mb: 2 }}>
-//             <CustomSearch
-//               value={searchTerm}
-//               onChange={setSearchTerm}
-//               className="search-input"
-//             />
-//           </Box>
-
-//           {/* ---- My Filters Section ---- */}
-//           <Box
-//             sx={{
-//               background: "#fff",
-//               borderRadius: "12px",
-//               border: "1px solid #eee",
-//               mb: 2,
-//               overflow: "hidden",
-//             }}
-//           >
-//             <Accordion
-//               // defaultExpanded
-//               disableGutters
-//               elevation={0}
-//               expanded={openAccordion === "my"}
-//               onChange={() =>
-//                 setOpenAccordion(openAccordion === "my" ? "shared" : "my")
-//               }
-//             >
-//               <AccordionSummary
-//                 expandIcon={<ExpandMoreIcon fontSize="small" />}
-//               >
-//                 <Typography fontWeight={600}>My Filters</Typography>
-//               </AccordionSummary>
-//               <Divider sx={{ width: "100%" }} />
-//               <AccordionDetails
-//                 sx={{
-//                   p: "9px",
-//                   maxHeight: "320px",
-//                   overflowY: "auto",
-//                   scrollbarWidth: "thin",
-//                 }}
-//               >
-//                 {renderList(mappedSavedFilter) || (
-//                   <Typography>No My Filters</Typography>
-//                 )}
-//               </AccordionDetails>
-//             </Accordion>
-//           </Box>
-
-//           {/* ---- Shared Filters Section ---- */}
-//           <Box
-//             sx={{
-//               background: "#fff",
-//               borderRadius: "12px",
-//               border: "1px solid #eee",
-//               mb: 2,
-//               overflow: "hidden",
-//             }}
-//           >
-//             <Accordion
-//               disableGutters
-//               elevation={0}
-//               expanded={openAccordion === "shared"}
-//               onChange={() =>
-//                 setOpenAccordion(openAccordion === "shared" ? "my" : "shared")
-//               }
-//             >
-//               <AccordionSummary
-//                 expandIcon={<ExpandMoreIcon fontSize="small" />}
-//               >
-//                 <Typography fontWeight={600}>Shared Filters</Typography>
-//               </AccordionSummary>
-//               <Divider sx={{ width: "100%" }} />
-
-//               <AccordionDetails
-//                 sx={{
-//                   p: "9px",
-//                   maxHeight: "320px",
-//                   overflowY: "auto",
-//                   scrollbarWidth: "thin",
-//                 }}
-//               >
-//                 {renderList(mappedSharedFilter) || (
-//                   <Typography>No Shared Filters</Typography>
-//                 )}
-//               </AccordionDetails>
-//             </Accordion>
-//           </Box>
-//         </>
-//       )}
-
-//       {/* Edit Component */}
-//       {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;
-
 import { useEffect, useState } from "react";
 import {
   FilterFormComponentProps,
@@ -940,7 +336,7 @@ const SavedFilter = ({
               <AccordionDetails
                 sx={{
                   p: "9px",
-                  maxHeight: "320px",
+                  maxHeight: "230px",
                   overflowY: "auto",
                   scrollbarWidth: "thin",
                 }}
@@ -955,9 +351,9 @@ const SavedFilter = ({
             sx={{
               background: "#fff",
               borderRadius: "12px",
-              // border: "1px solid "#eee",
-              // mb: 2,
-              // overflow: "hidden",
+              border: "1px solid #eee",
+              mb: 2,
+              overflow: "hidden",
             }}
           >
             <Accordion
@@ -977,7 +373,7 @@ const SavedFilter = ({
               <AccordionDetails
                 sx={{
                   p: "9px",
-                  maxHeight: "320px",
+                  maxHeight: "230px",
                   overflowY: "auto",
                   scrollbarWidth: "thin",
                 }}
@@ -1010,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;