rez-table-listing-mui 0.0.26 → 0.0.27

package/src/assets/svg.tsx

@@ -862,3 +862,35 @@ export const ChevronDownIcon = () => {
     </svg>
   );
 };
+export const CheckBox = () => {
+  return (
+    <svg
+      width="13"
+      height="14"
+      viewBox="0 0 13 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.72054 8.43116L4.17187 6.88233C4.07954 6.7901 3.96349 6.74288 3.82371 6.74066C3.68404 6.73855 3.56587 6.78577 3.46921 6.88233C3.37265 6.97899 3.32437 7.0961 3.32437 7.23366C3.32437 7.37121 3.37265 7.48833 3.46921 7.58499L5.29871 9.41449C5.41926 9.53494 5.55987 9.59516 5.72054 9.59516C5.88121 9.59516 6.02182 9.53494 6.14237 9.41449L9.85137 5.70549C9.9436 5.61316 9.99082 5.4971 9.99304 5.35733C9.99515 5.21766 9.94793 5.09949 9.85137 5.00283C9.75471 4.90627 9.6376 4.85799 9.50004 4.85799C9.36249 4.85799 9.24537 4.90627 9.14871 5.00283L5.72054 8.43116ZM6.66787 13.3337C5.79187 13.3337 4.96848 13.1674 4.19771 12.835C3.42693 12.5025 2.75648 12.0514 2.18637 11.4815C1.61626 10.9116 1.16487 10.2414 0.832207 9.47099C0.499652 8.70055 0.333374 7.87738 0.333374 7.00149C0.333374 6.12549 0.499596 5.3021 0.832041 4.53133C1.16449 3.76055 1.61565 3.0901 2.18554 2.51999C2.75543 1.94988 3.4256 1.49849 4.19604 1.16583C4.96649 0.83327 5.78965 0.666992 6.66554 0.666992C7.54154 0.666992 8.36493 0.833214 9.13571 1.16566C9.90649 1.4981 10.5769 1.94927 11.147 2.51916C11.7172 3.08905 12.1685 3.75921 12.5012 4.52966C12.8338 5.3001 13 6.12327 13 6.99916C13 7.87516 12.8338 8.69855 12.5014 9.46933C12.1689 10.2401 11.7178 10.9105 11.1479 11.4807C10.578 12.0508 9.90782 12.5022 9.13737 12.8348C8.36693 13.1674 7.54376 13.3337 6.66787 13.3337Z"
+        fill="#16B364"
+      />
+    </svg>
+  );
+};
+export const CrossBox = () => {
+  return (
+    <svg
+      width="13"
+      height="14"
+      viewBox="0 0 13 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.66659 7.70283L8.71525 9.75166C8.80759 9.84388 8.92364 9.8911 9.06342 9.89333C9.20309 9.89544 9.32125 9.84821 9.41792 9.75166C9.51447 9.65499 9.56275 9.53788 9.56275 9.40033C9.56275 9.26277 9.51447 9.14566 9.41792 9.04899L7.36909 7.00033L9.41792 4.95166C9.51014 4.85933 9.55736 4.74327 9.55959 4.60349C9.5617 4.46383 9.51447 4.34566 9.41792 4.24899C9.32125 4.15244 9.20414 4.10416 9.06659 4.10416C8.92903 4.10416 8.81192 4.15244 8.71525 4.24899L6.66659 6.29783L4.61792 4.24899C4.52559 4.15677 4.40953 4.10955 4.26975 4.10733C4.13009 4.10521 4.01192 4.15244 3.91525 4.24899C3.8187 4.34566 3.77042 4.46277 3.77042 4.60033C3.77042 4.73788 3.8187 4.85499 3.91525 4.95166L5.96409 7.00033L3.91525 9.04899C3.82303 9.14133 3.77581 9.25738 3.77359 9.39716C3.77147 9.53683 3.8187 9.65499 3.91525 9.75166C4.01192 9.84821 4.12903 9.89649 4.26659 9.89649C4.40414 9.89649 4.52125 9.84821 4.61792 9.75166L6.66659 7.70283ZM6.66775 13.3337C5.79175 13.3337 4.96836 13.1674 4.19759 12.835C3.42681 12.5025 2.75636 12.0514 2.18625 11.4815C1.61614 10.9116 1.16475 10.2414 0.832085 9.47099C0.49953 8.70055 0.333252 7.87738 0.333252 7.00149C0.333252 6.12549 0.499474 5.3021 0.831919 4.53133C1.16436 3.76055 1.61553 3.0901 2.18542 2.51999C2.75531 1.94988 3.42547 1.49849 4.19592 1.16583C4.96636 0.83327 5.78953 0.666992 6.66542 0.666992C7.54142 0.666992 8.36481 0.833214 9.13559 1.16566C9.90636 1.4981 10.5768 1.94927 11.1469 2.51916C11.717 3.08905 12.1684 3.75921 12.5011 4.52966C12.8336 5.3001 12.9999 6.12327 12.9999 6.99916C12.9999 7.87516 12.8337 8.69855 12.5013 9.46933C12.1688 10.2401 11.7176 10.9105 11.1478 11.4807C10.5779 12.0508 9.9077 12.5022 9.13725 12.8348C8.36681 13.1674 7.54364 13.3337 6.66775 13.3337Z"
+        fill="#F63D68"
+      />
+    </svg>
+  );
+};

package/src/components/filter/components/attributes-filter.tsx

@@ -8,6 +8,7 @@ const AttributesFilter = ({
   dropdownData,
   searchTerm,
   setSearchTerm,
+  tabValue,
 }: AttributesFilterProps) => {
   return (
     <Box>
@@ -18,6 +19,7 @@ const AttributesFilter = ({
         dropdownData={dropdownData}
         searchTerm={searchTerm}
         setSearchTerm={setSearchTerm}
+        tabValue={tabValue}
       />
     </Box>
   );

package/src/components/filter/components/forms/components/Attributes-select.tsx

@@ -21,6 +21,7 @@ const SelectAttribute = ({
   dropdownData,
   searchTerm = "",
   setSearchTerm,
+  tabValue,
 }: AttributesFilterSelectProps) => {
   const { filterMaster, setFilterMaster, filters, setFilters } = tableStates;
 
@@ -43,7 +44,7 @@ const SelectAttribute = ({
 
   const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     event.preventDefault();
-
+    console.log("tabValu", tabValue);
     const selectedValue = event.target.value;
     setFilterMaster(
       (prev) =>
@@ -53,6 +54,7 @@ const SelectAttribute = ({
             ...prev?.attributes,
             radio: selectedValue,
           },
+          activeFilterTabIndex: tabValue,
         } as FilterMasterStateProps)
     );
 

package/src/components/filter/components/forms/index.tsx

@@ -90,14 +90,25 @@ const FilterForm = ({
     watch,
     reset,
     formState: { isDirty },
+    unregister,
+    setValue,
   } = useForm<FormValues>({
     mode: "onChange",
     defaultValues,
+    resetOptions: {
+      keepDirtyValues: false, // Keep modified values when resetting
+      keepErrors: false, // Keep form errors when resetting
+    },
   });
 
   // Watch for form changes
   const formValues = watch();
 
+  // Reset form when filters change
+  useEffect(() => {
+    reset(defaultValues);
+  }, [selectedFilters, filterName]);
+
   // Effect to update filters when form values change
   useEffect(() => {
     if (isDirty) {
@@ -107,34 +118,33 @@ const FilterForm = ({
             value: string | string[];
             operator: string;
           };
-          // Only update if the value or operator has actually changed
-          if (
-            filterValue.value !== filter.filter_value ||
-            filterValue.operator !== filter.filter_operator
-          ) {
-            return {
-              ...filter,
-              filter_value: filterValue.value,
-              filter_operator: filterValue.operator,
-            };
-          }
+
+          return {
+            ...filter,
+            filter_value: filterValue.value,
+            filter_operator: filterValue.operator,
+          };
         }
         return filter;
       });
 
-      // Only update if there are actual changes
-      const hasChanges = updatedFilters.some(
-        (filter, index) =>
-          filter.filter_value !== selectedFilters[index].filter_value ||
-          filter.filter_operator !== selectedFilters[index].filter_operator
-      );
-
-      if (hasChanges) {
-        setSelectedFilters(updatedFilters);
-        setFilters(updatedFilters);
-      }
+      setSelectedFilters(updatedFilters);
+      setFilters(updatedFilters);
     }
-  }, [formValues, selectedFilters]);
+  }, [formValues]);
+
+  // Cleanup effect
+  useEffect(() => {
+    return () => {
+      // Reset form and clear any lingering state
+      reset(defaultValues);
+      selectedFilters.forEach((filter) => {
+        if (filter.name) {
+          unregister(filter.name);
+        }
+      });
+    };
+  }, []);
 
   const editModeStylingBorder = {
     border: "1px solid #c5c5c5",
@@ -284,7 +294,17 @@ const FilterForm = ({
                   />
                   <IconButton
                     sx={{ marginLeft: "auto" }}
-                    onClick={() => handleRemoveFilter(filter.filter_attribute)}
+                    onClick={() => {
+                      const fieldName = `${filter.name}.value`;
+                      unregister(fieldName); // ✅ Unregister field manually
+
+                      // ✅ Trigger dirty manually (optional, but safe fallback)
+                      setValue("filterName", formValues.filterName, {
+                        shouldDirty: true,
+                      });
+
+                      handleRemoveFilter(filter.filter_attribute);
+                    }}
                     size="small"
                   >
                     <CloseIcon />
@@ -408,7 +428,7 @@ const FilterForm = ({
               },
             }}
             // onClick={() => setSaveFilterModalOpen(true)}
-            disabled={editMode && !isDirty}
+            // disabled={editMode && !isDirty}
             onClick={() => {
               setSavedFilterModalOpen && setSavedFilterModalOpen(true);
             }}

package/src/components/filter/components/main-filter.tsx

@@ -1,7 +1,10 @@
 import { Box } from "@mui/material";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import FilterForm from "./forms";
-import { FilterFormComponentProps } from "../../../types/filter";
+import {
+  FilterFormComponentProps,
+  FilterMasterStateProps,
+} from "../../../types/filter";
 
 const MainFilter = ({
   columnsData,
@@ -13,7 +16,17 @@ const MainFilter = ({
 }: FilterFormComponentProps) => {
   const [searchTerm, setSearchTerm] = useState<string>("");
 
-  const { setFilters } = tableStates;
+  const { setFilters, setFilterMaster } = tableStates;
+
+  useEffect(() => {
+    setFilterMaster(
+      (prev) =>
+        ({
+          ...prev,
+          activeFilterTabIndex: 0,
+        } as FilterMasterStateProps)
+    );
+  }, []);
 
   const handleRemoveFilter = (filter_attribute: string) => {
     setFilters((prev) =>

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

@@ -4,6 +4,7 @@ import BackArrow from "@mui/icons-material/ArrowBackIosNew";
 import {
   FilterColumnsDataProps,
   FilterDropdownDataProps,
+  FilterMasterStateProps,
   UpdatedFilterStateProps,
 } from "../../../types/filter";
 import { CraftTableOptionsProps } from "../../../types/table-options";
@@ -35,7 +36,7 @@ const SavedFilterEditComponent = ({
   setSavedFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
   setDeleteFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
-  const { setFilters } = tableStates;
+  const { setFilters, setFilterMaster } = tableStates;
 
   const handleRemoveFilter = (filter_attribute: string) => {
     setFilters((prev) =>
@@ -64,6 +65,17 @@ const SavedFilterEditComponent = ({
           }}
           onClick={() => {
             setEditMode && setEditMode(false);
+            setFilters([]);
+            setFilterMaster(
+              (prev) =>
+                ({
+                  ...prev,
+                  saved_filters: {
+                    ...prev?.saved_filters,
+                    selectedId: "",
+                  },
+                } as FilterMasterStateProps)
+            );
           }}
         >
           <BackArrow sx={{ width: "13px", height: "13px" }} />
@@ -73,12 +85,6 @@ const SavedFilterEditComponent = ({
         </Box>
       </Box>
 
-      {/* <FilterCriteria
-        columnsData={columnsData}
-        tableStates={tableStates}
-        setSelectedFilters={setSelectedFilters}
-      /> */}
-
       {/* Render selectedFilters state */}
       <FilterForm
         selectedFilters={selectedFilters}

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

@@ -26,6 +26,7 @@ const SavedFilter = ({
   setEditMode,
   setDeleteFilterModalOpen,
   setSavedFilterModalOpen,
+  tabValue,
 }: FilterFormComponentProps) => {
   const { setFilterMaster, setFilterToDelete } = tableStates;
   const [searchTerm, setSearchTerm] = useState<string>("");
@@ -60,6 +61,7 @@ const SavedFilter = ({
             selectedId: filter.value,
             selectedName: filter.label,
           },
+          activeFilterTabIndex: tabValue,
         } as FilterMasterStateProps)
     );
 
@@ -126,7 +128,7 @@ const SavedFilter = ({
       {/* Render search input and list */}
       {!editMode && renderList()}
 
-      {editMode && (
+      {editMode ? (
         <SavedFilterEditComponent
           columnsData={columnsData}
           dropdownData={dropdownData}
@@ -140,7 +142,7 @@ const SavedFilter = ({
           setSavedFilterModalOpen={setSavedFilterModalOpen}
           setDeleteFilterModalOpen={setDeleteFilterModalOpen}
         />
-      )}
+      ) : null}
     </Box>
   );
 };

package/src/components/filter/components/tabs/index.tsx

@@ -1,4 +1,6 @@
-import { Tabs, Tab, TabsProps } from "@mui/material";
+import React, { useState } from "react";
+import { Tabs, Tab, TabsProps, Box } from "@mui/material";
+import { CheckBox, CrossBox } from "../../../../assets/svg";
 
 export interface TabItem {
   label: string;
@@ -6,14 +8,22 @@ export interface TabItem {
 
 interface StyledTabsProps extends TabsProps {
   tabItems: TabItem[];
+  activeFilterIndex: number;
 }
 
 const CustomTabs = ({
   value,
   onChange,
   tabItems,
+  activeFilterIndex = -1,
   ...tabsProps
 }: StyledTabsProps) => {
+  const [hoveredTab, setHoveredTab] = useState<number | null>(null);
+
+  const handleCrossClick = (idx: number) => (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
   return (
     <Tabs
       value={value}
@@ -28,23 +38,46 @@ const CustomTabs = ({
       }}
       {...tabsProps}
     >
-      {tabItems.map((tab, idx) => (
-        <Tab
-          key={idx}
-          label={tab.label}
-          sx={{
-            fontSize: "14px",
-            textTransform: "capitalize",
-            color: "#888888",
-            fontWeight: "normal",
-            whiteSpace: "nowrap",
-            "&.Mui-selected": {
-              color: "black",
-              fontWeight: "bold",
-            },
-          }}
-        />
-      ))}
+      {tabItems.map((tab, idx) => {
+        const isActive = activeFilterIndex === idx;
+        const isHovered = hoveredTab === idx;
+
+        return (
+          <Tab
+            key={idx}
+            label={
+              <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
+                <span>{tab.label}</span>
+                {isActive && (
+                  <Box
+                    onMouseEnter={() => setHoveredTab(idx)}
+                    onMouseLeave={() => setHoveredTab(null)}
+                    sx={{
+                      display: "flex",
+                      alignItems: "center",
+                      cursor: isHovered ? "pointer" : "default",
+                    }}
+                    onClick={isHovered ? handleCrossClick(idx) : undefined}
+                  >
+                    {isHovered ? <CrossBox /> : <CheckBox />}
+                  </Box>
+                )}
+              </Box>
+            }
+            sx={{
+              fontSize: "14px",
+              textTransform: "capitalize",
+              color: "#888888",
+              fontWeight: "normal",
+              whiteSpace: "nowrap",
+              "&.Mui-selected": {
+                color: "black",
+                fontWeight: "bold",
+              },
+            }}
+          />
+        );
+      })}
     </Tabs>
   );
 };

package/src/components/filter/index.tsx

@@ -32,7 +32,7 @@ const FilterDrawer = ({
 
   const [searchTerm, setSearchTerm] = useState<string>("");
 
-  const { filters, filterToDelete } = tableStates;
+  const { filters, filterToDelete, filterMaster } = tableStates;
 
   const filterNameInput: InputField = {
     label: "Filter Name",
@@ -126,6 +126,7 @@ const FilterDrawer = ({
           value={tabValue}
           onChange={handleTabChange}
           tabItems={tabItems}
+          activeFilterIndex={filterMaster?.activeFilterTabIndex ?? 0}
         />
 
         <Box>
@@ -154,6 +155,7 @@ const FilterDrawer = ({
                 setDeleteFilterModalOpen={setDeleteFilterModalOpen}
                 setSavedFilterModalOpen={setSaveFilterModalOpen}
                 dropdownData={dropdownData}
+                tabValue={tabValue}
               />
             )}
           </CustomTabPanel>
@@ -166,6 +168,7 @@ const FilterDrawer = ({
                 dropdownData={dropdownData}
                 searchTerm={searchTerm}
                 setSearchTerm={setSearchTerm}
+                tabValue={tabValue}
               />
             )}
           </CustomTabPanel>

package/src/libs/hooks/useEntityTableAPI.tsx

@@ -66,7 +66,7 @@ const entityListingCall = async ({
 export const useEntityTableAPI = ({
   page = 0,
   size = 50,
-  quickFilter,
+  quickFilter = [],
 }: EntityTableAPIProps) => {
   const { data, isPending: isTableDataPending } = useQuery({
     queryKey: [page, size, quickFilter],

package/src/types/filter.ts

@@ -181,6 +181,7 @@ export interface FilterFormComponentProps {
   setEditMode?: React.Dispatch<React.SetStateAction<boolean>>;
   setDeleteFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
   setSavedFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+  tabValue?: number;
 }
 
 export interface FilterMasterStateProps {
@@ -192,6 +193,7 @@ export interface FilterMasterStateProps {
     selectedId: string;
     selectedName: string;
   };
+  activeFilterTabIndex: number;
 }
 
 export interface AttributesFilterProps {
@@ -200,6 +202,7 @@ export interface AttributesFilterProps {
   dropdownData: FilterDropdownDataProps;
   searchTerm: string;
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
+  tabValue?: number;
 }
 
 export interface AttributesFilterSelectProps {
@@ -208,4 +211,5 @@ export interface AttributesFilterSelectProps {
   dropdownData: FilterDropdownDataProps;
   searchTerm: string;
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
+  tabValue?: number;
 }