rez-table-listing-mui 1.0.32 → 1.0.34

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

@@ -9,6 +9,7 @@ interface FormSelectProps {
   dropdownData: Record<string, DropdownOption[]>;
   isLoading?: boolean;
   sx?: SxProps<Theme>;
+  onValueChange?: () => void;
 }
 
 const FormSelect = ({
@@ -17,6 +18,7 @@ const FormSelect = ({
   dropdownData,
   isLoading = false,
   sx,
+  onValueChange,
 }: FormSelectProps) => {
   // Use dropdownData if available, otherwise fallback to filter's dropdown_list
   const dropdownOptions =
@@ -33,10 +35,17 @@ const FormSelect = ({
             {...field}
             disabled={isLoading}
             sx={{
+              "&.Mui-focused fieldset": {
+                borderColor: "#7A5AF8 !important",
+              },
               "& .MuiOutlinedInput-input": {
                 padding: "12px 20px",
               },
             }}
+            onChange={(e) => {
+              field.onChange(e);
+              onValueChange?.();
+            }}
           >
             {dropdownOptions.map((item, idx) => (
               <MenuItem key={idx} value={item.value}>

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

@@ -7,12 +7,14 @@ interface FormTextfieldProps {
   filter: UpdatedFilterStateProps;
   control: any;
   isLoading?: boolean;
+  onValueChange?: () => void;
 }
 
 const FormTextfield = ({
   filter,
   control,
   isLoading = false,
+  onValueChange,
 }: FormTextfieldProps) => {
   return (
     <Controller
@@ -34,6 +36,10 @@ const FormTextfield = ({
           type={filter.data_type || "text"}
           placeholder={"Enter value"}
           disabled={isLoading}
+          onChange={(e) => {
+            field.onChange(e);
+            onValueChange?.();
+          }}
         />
       )}
     />

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

@@ -24,6 +24,7 @@ import { CraftTableOptionsProps } from "../../../../types/table-options";
 import FilterCriteria from "./components/Filter-criteria";
 import CustomSearch from "../search";
 import { customDebounce } from "../../../../libs/utils/debounce";
+import { filterFormStyles } from "../../style";
 
 interface FormValues {
   filterName: string;
@@ -43,7 +44,6 @@ const FilterForm = ({
   selectedFilters,
   setSelectedFilters,
   handleRemoveFilter,
-  handleClearAllFilters,
   editMode = false,
   tableStates,
   setSavedFilterModalOpen,
@@ -58,13 +58,13 @@ const FilterForm = ({
     React.SetStateAction<UpdatedFilterStateProps[]>
   >;
   handleRemoveFilter: (filter_attribute: string) => void;
-  handleClearAllFilters: () => void;
   editMode?: boolean;
   tableStates: CraftTableOptionsProps;
   setSavedFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
   setDeleteFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
-  const { filterMaster, setFilters, setFilterMaster } = tableStates;
+  const { filterMaster, setFilters, setFilterMaster, setPagination } =
+    tableStates;
 
   const filterName = filterMaster?.saved_filters?.selectedName || "";
 
@@ -82,6 +82,7 @@ const FilterForm = ({
 
     return {
       filterName: filterName ?? "",
+      dummyChange: "",
       ...filterValues,
     };
   }, [selectedFilters, filterName]);
@@ -91,63 +92,55 @@ const FilterForm = ({
     watch,
     reset,
     formState: { isDirty },
-    unregister,
     setValue,
-  } = useForm<FormValues>({
+    unregister,
+  } = useForm<FormValues & { dummyChange: string }>({
     mode: "onChange",
     defaultValues,
     resetOptions: {
-      keepDirtyValues: false, // Keep modified values when resetting
-      keepErrors: false, // Keep form errors when resetting
+      keepDirtyValues: false,
+      keepErrors: false,
     },
   });
 
-  // Watch for form changes
   const formValues = watch();
 
-  // Reset form when filters change
   useEffect(() => {
     if (!isDirty) reset(defaultValues);
   }, [selectedFilters, filterName]);
 
-  // Create a debounced version of the filter update function
   const debouncedUpdateFilters = useCallback(
     customDebounce((updatedFilters: UpdatedFilterStateProps[]) => {
       setSelectedFilters(updatedFilters);
       setFilters(updatedFilters);
-    }, 1000), // 1000ms delay
+    }, 1000),
     [setSelectedFilters, setFilters]
   );
 
-  // Effect to update filters when form values change
-  useEffect(() => {
-    if (isDirty) {
-      const updatedFilters = selectedFilters.map((filter) => {
-        if (filter.name && typeof formValues[filter.name] === "object") {
-          const filterValue = formValues[filter.name] as {
-            value: string | string[];
-            operator: string;
-          };
+  const updateFiltersFromForm = useCallback(() => {
+    const updatedFilters = selectedFilters.map((filter) => {
+      if (filter.name && typeof formValues[filter.name] === "object") {
+        const filterValue = formValues[filter.name] as {
+          value: string | string[];
+          operator: string;
+        };
 
-          return {
-            ...filter,
-            filter_value: filterValue.value,
-            filter_operator: filterValue.operator,
-          };
-        }
-        return filter;
-      });
+        return {
+          ...filter,
+          filter_value: filterValue.value,
+          filter_operator: filterValue.operator,
+        };
+      }
+      return filter;
+    });
 
-      // Use the debounced update function instead of direct updates
-      debouncedUpdateFilters(updatedFilters);
-    }
-  }, [formValues, isDirty, selectedFilters, debouncedUpdateFilters]);
+    setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+    debouncedUpdateFilters(updatedFilters);
+  }, [formValues, selectedFilters, debouncedUpdateFilters]);
 
-  // Cleanup effect
   useEffect(() => {
     return () => {
-      // Reset form and clear any lingering state
-      reset(defaultValues);
+      reset();
       selectedFilters.forEach((filter) => {
         if (filter.name) {
           unregister(filter.name);
@@ -156,15 +149,9 @@ const FilterForm = ({
     };
   }, []);
 
-  const editModeStylingBorder = {
-    border: "1px solid #c5c5c5",
-    borderRadius: "6px",
-    padding: "5px 10px 10px 10px",
-  };
-
   return (
     <form>
-      <Box sx={editMode ? editModeStylingBorder : {}}>
+      <Box sx={editMode ? filterFormStyles.formEditModeStyle : {}}>
         {editMode && (
           <Box
             sx={{
@@ -190,10 +177,9 @@ const FilterForm = ({
                   fullWidth
                   size="small"
                   placeholder="Filter Name"
-                  value={field.value}
+                  value={filterName || field.value}
                   onChange={(e) => {
                     field.onChange(e);
-
                     if (editMode) {
                       setFilterMaster(
                         (prev) =>
@@ -227,9 +213,9 @@ const FilterForm = ({
             <Box onClick={(e) => e.stopPropagation()}>
               <IconButton
                 size="small"
-                onClick={() => {
-                  setDeleteFilterModalOpen && setDeleteFilterModalOpen(true);
-                }}
+                onClick={() =>
+                  setDeleteFilterModalOpen && setDeleteFilterModalOpen(true)
+                }
               >
                 <DeleteIcon />
               </IconButton>
@@ -237,178 +223,117 @@ const FilterForm = ({
           </Box>
         )}
 
-        <FilterCriteria
-          columnsData={columnsData}
-          tableStates={tableStates}
-          setSelectedFilters={setSelectedFilters}
-          // searchTerm={searchTerm}
-          // setSearchTerm={setSearchTerm}
-        />
-
-        {/* Render search input */}
-        {!editMode && (
-          <CustomSearch value={searchTerm} onChange={setSearchTerm} />
-        )}
+        <Box sx={filterFormStyles.formFlexContainer}>
+          <FilterCriteria
+            columnsData={columnsData}
+            tableStates={tableStates}
+            setSelectedFilters={setSelectedFilters}
+            searchTerm={searchTerm}
+            setSearchTerm={setSearchTerm}
+          />
 
-        {selectedFilters
-          ?.filter(
-            (filter) =>
-              filter.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-              filter.filter_value
-                ?.toString()
-                .toLowerCase()
-                .includes(searchTerm.toLowerCase())
-          )
-          .map((filter) => {
-            const { dropdown_list = [] } = filter;
+          {!editMode && (
+            <CustomSearch value={searchTerm} onChange={setSearchTerm} />
+          )}
 
-            return (
-              <Box
-                key={filter.filter_attribute}
-                sx={{
-                  mt: 2,
-                  p: 1,
-                  borderRadius: 2,
-                  backgroundColor: "#FAFAFA",
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: 0.5,
-                  // border: "1px solid #E0E0E0",
-                }}
-              >
+          {selectedFilters
+            .filter(
+              (filter) =>
+                filter.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                filter.filter_value
+                  ?.toString()
+                  .toLowerCase()
+                  .includes(searchTerm.toLowerCase())
+            )
+            .map((filter) => {
+              const { dropdown_list = [] } = filter;
+              return (
                 <Box
-                  sx={{
-                    display: "flex",
-                    justifyContent: "flex-start",
-                    alignItems: "center",
-                    gap: 2,
-                  }}
+                  key={filter.filter_attribute}
+                  sx={filterFormStyles.formListItem}
                 >
-                  <Typography
-                    sx={{
-                      fontWeight: 500,
-                      fontSize: "13px",
-                      color: "#797877",
-                    }}
-                  >
-                    {filter.name}
-                  </Typography>
-                  <FormDropdown
-                    filter={filter}
-                    control={control}
-                    dropdownList={dropdown_list}
-                    sx={{
-                      fontSize: "13px",
-                      minWidth: 50,
-                      border: "none",
-                      boxShadow: "none",
-                    }}
-                  />
-                  <IconButton
-                    sx={{ marginLeft: "auto" }}
-                    onClick={() => {
-                      const fieldName = `${filter.name}.value`;
-                      unregister(fieldName);
-
-                      setValue("filterName", formValues.filterName, {
-                        shouldDirty: true,
-                      });
-
-                      handleRemoveFilter(filter.filter_attribute);
-                    }}
-                    size="small"
-                  >
-                    <CloseIcon />
-                  </IconButton>
-                </Box>
-
-                <Box>
-                  {filter.data_type === "text" ? (
-                    <FormTextfield filter={filter} control={control} />
-                  ) : filter.data_type === "number" ? (
-                    <FormTextfield filter={filter} control={control} />
-                  ) : filter.data_type === "date" ? (
-                    <FormDatePicker
-                      filter={filter}
-                      control={control}
-                      sx={{
-                        "& .MuiOutlinedInput-root": {
-                          borderRadius: "6px",
-                          fontSize: "14px",
-                          bgcolor: "#ffffff",
-                          "& fieldset": { borderColor: "#c1c1c1" },
-                          "&.Mui-focused fieldset": {
-                            borderColor: "#7A5AF8",
-                          },
-                        },
-                      }}
-                    />
-                  ) : filter.data_type === "select" ? (
-                    <FormSelect
+                  <Box sx={filterFormStyles.formListItemHeader}>
+                    <Typography sx={filterFormStyles.formListItemHeaderName}>
+                      {filter.name}
+                    </Typography>
+                    <FormDropdown
                       filter={filter}
                       control={control}
-                      dropdownData={dropdownData}
-                      sx={{
-                        "& .MuiOutlinedInput-root": {
-                          borderRadius: "6px",
-                          fontSize: "14px",
-                          bgcolor: "#ffffff",
-                          "& fieldset": { borderColor: "#c1c1c1" },
-                          "&.Mui-focused fieldset": {
-                            borderColor: "#7A5AF8",
-                          },
-                        },
-                      }}
+                      dropdownList={dropdown_list}
+                      sx={filterFormStyles.formListItemHeaderDropdown}
+                      onValueChange={updateFiltersFromForm}
                     />
-                  ) : filter.data_type === "multiselect" ? (
-                    <FormMultiSelect
-                      filter={filter}
-                      control={control}
-                      dropdownData={dropdownData}
-                      sx={{
-                        "& .MuiOutlinedInput-root": {
-                          borderRadius: "6px",
-                          fontSize: "14px",
-                          bgcolor: "#ffffff",
-                          "& fieldset": { borderColor: "#c1c1c1" },
-                          "&.Mui-focused fieldset": {
-                            borderColor: "#7A5AF8",
-                          },
-                        },
+                    <IconButton
+                      sx={{ marginLeft: "auto" }}
+                      onClick={() => {
+                        unregister(`${filter.name}.value`);
+                        unregister(`${filter.name}.operator`);
+
+                        // ✅ Toggle dummy field to force form dirty
+                        const dummy = watch("dummyChange");
+                        setValue(
+                          "dummyChange",
+                          dummy === "changed" ? "reset" : "changed",
+                          {
+                            shouldDirty: true,
+                          }
+                        );
+
+                        handleRemoveFilter(filter.filter_attribute);
                       }}
-                    />
-                  ) : (
-                    <FormControl
-                      fullWidth
                       size="small"
-                      sx={{
-                        "& .MuiOutlinedInput-root": {
-                          borderRadius: "6px",
-                          fontSize: "14px",
-                          bgcolor: "#ffffff",
-                          "& fieldset": { borderColor: "#c1c1c1" },
-                          "&.Mui-focused fieldset": {
-                            borderColor: "#7A5AF8",
-                          },
-                        },
-                      }}
-                    ></FormControl>
-                  )}
+                    >
+                      <CloseIcon />
+                    </IconButton>
+                  </Box>
+
+                  <Box>
+                    {filter.data_type === "text" ||
+                    filter.data_type === "number" ? (
+                      <FormTextfield
+                        filter={filter}
+                        control={control}
+                        onValueChange={updateFiltersFromForm}
+                      />
+                    ) : filter.data_type === "year" ? (
+                      <FormDatePicker
+                        filter={filter}
+                        control={control}
+                        views={["year"]}
+                        onValueChange={updateFiltersFromForm}
+                      />
+                    ) : filter.data_type === "date" ? (
+                      <FormDatePicker
+                        filter={filter}
+                        control={control}
+                        onValueChange={updateFiltersFromForm}
+                      />
+                    ) : filter.data_type === "select" ? (
+                      <FormSelect
+                        filter={filter}
+                        control={control}
+                        dropdownData={dropdownData}
+                        onValueChange={updateFiltersFromForm}
+                      />
+                    ) : filter.data_type === "multiselect" ? (
+                      <FormMultiSelect
+                        filter={filter}
+                        control={control}
+                        dropdownData={dropdownData}
+                        onValueChange={updateFiltersFromForm}
+                      />
+                    ) : (
+                      <FormControl fullWidth size="small" />
+                    )}
+                  </Box>
                 </Box>
-              </Box>
-            );
-          })}
+              );
+            })}
+        </Box>
       </Box>
 
       {selectedFilters.length > 0 && (
-        <Box
-          sx={{
-            display: "flex",
-            justifyContent: "center",
-            gap: 1,
-            mt: 3,
-          }}
-        >
+        <Box sx={{ display: "flex", justifyContent: "center", gap: 1, mt: 3 }}>
           <Button
             variant="outlined"
             sx={{
@@ -420,8 +345,8 @@ const FilterForm = ({
             }}
             fullWidth
             onClick={() => {
-              reset();
-              handleClearAllFilters();
+              setFilters([]);
+              setSelectedFilters([]);
             }}
           >
             Clear All
@@ -430,16 +355,15 @@ const FilterForm = ({
           <Button
             variant="contained"
             fullWidth
+            disabled={!isDirty && editMode}
             sx={{
               color: "white",
               backgroundColor: "#7A5AF8",
               "&.Mui-disabled": {
-                backgroundColor: "#d7cefd", // Change background color when disabled
+                backgroundColor: "#d7cefd",
                 color: "rgba(255, 255, 255, 0.7)",
               },
             }}
-            // onClick={() => setSaveFilterModalOpen(true)}
-            // disabled={editMode && !isDirty}
             onClick={() => {
               setSavedFilterModalOpen && setSavedFilterModalOpen(true);
             }}

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

@@ -5,6 +5,7 @@ import {
   FilterFormComponentProps,
   FilterMasterStateProps,
 } from "../../../types/filter";
+import { filterStyles } from "../style";
 
 const MainFilter = ({
   columnsData,
@@ -37,13 +38,8 @@ const MainFilter = ({
     );
   };
 
-  const handleClearAllFilters = () => {
-    setFilters([]);
-    setSelectedFilters([]);
-  };
-
   return (
-    <Box>
+    <Box sx={filterStyles.filterMainComponentWrapper}>
       {/* Set selectedFilters state */}
 
       {/* Render selectedFilters state */}
@@ -54,7 +50,6 @@ const MainFilter = ({
         selectedFilters={selectedFilters}
         setSelectedFilters={setSelectedFilters}
         handleRemoveFilter={handleRemoveFilter}
-        handleClearAllFilters={handleClearAllFilters}
         tableStates={tableStates}
         setSavedFilterModalOpen={setSavedFilterModalOpen}
         dropdownData={dropdownData}

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

@@ -47,9 +47,21 @@ const SavedFilterEditComponent = ({
     );
   };
 
-  const handleClearAllFilters = () => {
+  const handleBackButtonClick = () => {
+    setEditMode && setEditMode(false);
     setFilters([]);
-    setSelectedFilters([]);
+    setFilterMaster(
+      (prev) =>
+        ({
+          ...prev,
+          saved_filters: {
+            ...prev?.saved_filters,
+            selectedId: "",
+            selectedName: "",
+          },
+          activeFilterTabIndex: -1,
+        } as FilterMasterStateProps)
+    );
   };
 
   return (
@@ -63,20 +75,7 @@ const SavedFilterEditComponent = ({
             cursor: "pointer",
             mb: 2,
           }}
-          onClick={() => {
-            setEditMode && setEditMode(false);
-            setFilters([]);
-            setFilterMaster(
-              (prev) =>
-                ({
-                  ...prev,
-                  saved_filters: {
-                    ...prev?.saved_filters,
-                    selectedId: "",
-                  },
-                } as FilterMasterStateProps)
-            );
-          }}
+          onClick={handleBackButtonClick}
         >
           <BackArrow sx={{ width: "13px", height: "13px" }} />
           <Typography variant="body2" sx={{ color: "#8592A3" }}>
@@ -90,7 +89,6 @@ const SavedFilterEditComponent = ({
         selectedFilters={selectedFilters}
         setSelectedFilters={setSelectedFilters}
         handleRemoveFilter={handleRemoveFilter}
-        handleClearAllFilters={handleClearAllFilters}
         editMode={editMode}
         tableStates={tableStates}
         columnsData={columnsData}

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

@@ -15,6 +15,7 @@ import {
 import CustomSearch from "./search";
 import { DeleteIcon } from "../../../assets/svg";
 import SavedFilterEditComponent from "./saved-edit-filter";
+import { filterStyles } from "../style";
 
 const SavedFilter = ({
   columnsData,
@@ -124,7 +125,7 @@ const SavedFilter = ({
   );
 
   return (
-    <Box>
+    <Box sx={filterStyles.filterMainComponentWrapper}>
       {/* Render search input and list */}
       {!editMode && renderList()}
 

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

@@ -41,7 +41,6 @@ const CustomSearch = ({
         ),
       }}
       sx={{
-        mt: 2,
         "& .MuiOutlinedInput-root": {
           borderRadius: "6px",
           fontSize: "14px",

package/src/components/filter/components/tabs/custom-tab-panel.tsx

@@ -1,17 +1,20 @@
 import * as React from "react";
 import Box from "@mui/material/Box";
+import { SxProps, Theme } from "@mui/material";
 
 interface TabPanelProps {
   children?: React.ReactNode;
   index: number;
   value: number;
+  sx?: SxProps<Theme>;
 }
 
 const CustomTabPanel = ({
   children,
   value,
   index,
-  ...other
+  sx,
+  ...props
 }: TabPanelProps) => {
   return (
     <div
@@ -19,9 +22,10 @@ const CustomTabPanel = ({
       hidden={value !== index}
       id={`simple-tabpanel-${index}`}
       aria-labelledby={`simple-tab-${index}`}
-      {...other}
+      style={{ height: "100%" }}
+      {...props}
     >
-      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+      {value === index && <Box sx={{ height: "100%", ...sx }}>{children}</Box>}
     </div>
   );
 };