rez-table-listing-mui 1.0.48 → 1.0.50

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

@@ -4,7 +4,7 @@ import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import moment from "moment";
 import { UpdatedFilterStateProps } from "../../../../../types/filter";
-import { SxProps, Theme } from "@mui/material";
+import { SxProps, Theme, Box } from "@mui/material";
 
 type FormDatePickerProps = {
   filter: UpdatedFilterStateProps;
@@ -18,121 +18,190 @@ const FormDatePicker = ({
   filter,
   control,
   sx,
-  views = ["day", "month", "year"], // default to full date picker
+  views = ["day", "month", "year"],
   onValueChange,
 }: FormDatePickerProps) => {
+  const isRange = filter.filter_operator === "between";
+  const isRelativeToToday = filter.filter_operator === "today";
+
   return (
-    <Controller
-      name={`${filter?.name}.value`} // Use consistent field structure
-      control={control}
-      defaultValue={
-        filter.filter_value
-          ? moment(filter.filter_value, "DD-MM-YYYY").toDate()
-          : null
-      }
-      render={({ field }) => (
-        <LocalizationProvider dateAdapter={AdapterDateFns}>
-          <DatePicker
-            {...field}
-            views={views}
-            value={
-              field.value ? moment(field.value, "DD-MM-YYYY").toDate() : null
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <Box display="flex" gap={1}>
+        <Controller
+          name={`${filter?.name}.value`}
+          control={control}
+          defaultValue={
+            isRange
+              ? ["", ""]
+              : isRelativeToToday
+              ? moment().format("YYYY-MM-DD")
+              : filter.filter_value
+              ? moment(filter.filter_value, "YYYY-MM-DD").toDate()
+              : null
+          }
+          render={({ field }) => {
+            const value = field.value;
+            const todayDate = moment().toDate();
+            if (isRange) {
+              const fromDate = Array.isArray(value) ? value[0] : "";
+              const toDate = Array.isArray(value) ? value[1] : "";
+
+              return (
+                <>
+                  <DatePicker
+                    views={views}
+                    value={
+                      isRelativeToToday
+                        ? todayDate
+                        : fromDate
+                        ? moment(fromDate, "YYYY-MM-DD").toDate()
+                        : null
+                    }
+                    onChange={(date) => {
+                      if (isRelativeToToday) return;
+                      let formatted = "";
+                      if (date) {
+                        formatted =
+                          views?.length === 1 && views[0] === "year"
+                            ? moment(date).format("YYYY")
+                            : moment(date).format("YYYY-MM-DD");
+                      }
+                      const updated: [string, string] = [
+                        formatted,
+                        toDate || "",
+                      ];
+                      field.onChange(updated);
+                      onValueChange?.();
+                    }}
+                    disabled={isRelativeToToday}
+                    format={
+                      views?.length === 1 && views[0] === "year"
+                        ? "yyyy"
+                        : "dd-MM-yyyy"
+                    }
+                    sx={{
+                      "& .MuiOutlinedInput-input": {
+                        padding: "12px 20px",
+                      },
+                      ...sx,
+                    }}
+                    slotProps={{
+                      textField: {
+                        size: "small",
+                        fullWidth: true,
+                        placeholder:
+                          views?.length === 1 && views[0] === "year"
+                            ? "YYYY"
+                            : "From Date",
+                      },
+                    }}
+                  />
+
+                  <DatePicker
+                    views={views}
+                    value={
+                      isRelativeToToday
+                        ? todayDate
+                        : toDate
+                        ? moment(toDate, "YYYY-MM-DD").toDate()
+                        : null
+                    }
+                    onChange={(date) => {
+                      if (isRelativeToToday) return;
+                      let formatted = "";
+                      if (date) {
+                        formatted =
+                          views?.length === 1 && views[0] === "year"
+                            ? moment(date).format("YYYY")
+                            : moment(date).format("YYYY-MM-DD");
+                      }
+                      const updated: [string, string] = [
+                        fromDate || "",
+                        formatted,
+                      ];
+                      field.onChange(updated);
+                      onValueChange?.();
+                    }}
+                    disabled={isRelativeToToday}
+                    format={
+                      views?.length === 1 && views[0] === "year"
+                        ? "yyyy"
+                        : "dd-MM-yyyy"
+                    }
+                    sx={{
+                      "& .MuiOutlinedInput-input": {
+                        padding: "12px 20px",
+                      },
+                      ...sx,
+                    }}
+                    slotProps={{
+                      textField: {
+                        size: "small",
+                        fullWidth: true,
+                        placeholder:
+                          views?.length === 1 && views[0] === "year"
+                            ? "YYYY"
+                            : "To Date",
+                      },
+                    }}
+                  />
+                </>
+              );
             }
-            onChange={(date) => {
-              let formatted = "";
-              if (date) {
-                if (views?.length === 1 && views[0] === "year") {
-                  formatted = moment(date).format("YYYY");
-                } else {
-                  formatted = moment(date).format("DD-MM-YYYY");
+
+            // Single DatePicker
+            return (
+              <DatePicker
+                {...field}
+                views={views}
+                value={
+                  isRelativeToToday
+                    ? todayDate
+                    : field.value
+                    ? moment(field.value, "YYYY-MM-DD").toDate()
+                    : null
                 }
-              }
-              field.onChange(formatted);
-              onValueChange?.();
-            }}
-            format={
-              views?.length === 1 && views[0] === "year" ? "yyyy" : "dd-MM-yyyy"
-            }
-            sx={{
-              "& .MuiOutlinedInput-input": {
-                padding: "12px 20px",
-              },
-              ...sx,
-            }}
-            slotProps={{
-              textField: {
-                size: "small",
-                fullWidth: true,
-                placeholder:
+                onChange={(date) => {
+                  if (isRelativeToToday) return;
+                  let formatted = "";
+                  if (date) {
+                    formatted =
+                      views?.length === 1 && views[0] === "year"
+                        ? moment(date).format("YYYY")
+                        : moment(date).format("YYYY-MM-DD");
+                  }
+                  field.onChange(formatted);
+                  onValueChange?.();
+                }}
+                disabled={isRelativeToToday}
+                format={
                   views?.length === 1 && views[0] === "year"
-                    ? "YYYY"
-                    : "DD-MM-YYYY",
-              },
-            }}
-          />
-        </LocalizationProvider>
-      )}
-    />
+                    ? "yyyy"
+                    : "dd-MM-yyyy"
+                }
+                sx={{
+                  "& .MuiOutlinedInput-input": {
+                    padding: "12px 20px",
+                  },
+                  ...sx,
+                }}
+                slotProps={{
+                  textField: {
+                    size: "small",
+                    fullWidth: true,
+                    placeholder:
+                      views?.length === 1 && views[0] === "year"
+                        ? "YYYY"
+                        : "DD-MM-YYYY",
+                  },
+                }}
+              />
+            );
+          }}
+        />
+      </Box>
+    </LocalizationProvider>
   );
 };
 
 export default FormDatePicker;
-
-// import { Controller } from "react-hook-form";
-// import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-// import { DatePicker } from "@mui/x-date-pickers/DatePicker";
-// import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
-// import moment from "moment";
-// import { UpdatedFilterStateProps } from "../../../../../types/filter";
-// import { SxProps, Theme } from "@mui/material";
-
-// const FormDatePicker = ({
-//   filter,
-//   control,
-//   sx,
-// }: {
-//   filter: UpdatedFilterStateProps;
-//   control: any;
-//   sx?: SxProps<Theme>;
-// }) => {
-//   return (
-//     <Controller
-//       name={`${filter?.name}.value`} // or use a consistent structure like `filters.${index}.filter_value`
-//       control={control}
-//       defaultValue={
-//         filter.filter_value
-//           ? moment(filter.filter_value, "DD-MM-YYYY").toDate()
-//           : null
-//       }
-//       render={({ field }) => (
-//         <LocalizationProvider dateAdapter={AdapterDateFns}>
-//           <DatePicker
-//             sx={{
-//               "& .MuiOutlinedInput-input": {
-//                 padding: "12px 20px",
-//               },
-//             }}
-//             {...field}
-//             value={
-//               field.value ? moment(field.value, "DD-MM-YYYY").toDate() : null
-//             }
-//             onChange={(date) => {
-//               const formatted = date ? moment(date).format("DD-MM-YYYY") : "";
-//               field.onChange(formatted);
-//             }}
-//             format="dd-MM-yyyy"
-//             slotProps={{
-//               textField: {
-//                 size: "small",
-//                 fullWidth: true,
-//                 placeholder: "DD-MM-YYYY",
-//               },
-//             }}
-//           />
-//         </LocalizationProvider>
-//       )}
-//     />
-//   );
-// };
-
-// export default FormDatePicker;

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

@@ -1,10 +1,12 @@
 import { FormControl, MenuItem, Select, SxProps, Theme } from "@mui/material";
-import { Controller } from "react-hook-form";
+import { Controller, UseFormSetValue } from "react-hook-form";
 import { UpdatedFilterStateProps } from "../../../../../types/filter";
+import moment from "moment";
 
 interface FormDropdownProps {
   filter: UpdatedFilterStateProps;
   control: any;
+  setValue: UseFormSetValue<any>;
   dropdownList: {
     label?: string;
     value?: string;
@@ -17,6 +19,7 @@ interface FormDropdownProps {
 const FormDropdown = ({
   filter,
   control,
+  setValue,
   dropdownList,
   isLoading = false,
   sx,
@@ -48,8 +51,38 @@ const FormDropdown = ({
             disabled={isLoading}
             disableUnderline
             onChange={(e) => {
-              field.onChange(e); // ✅ sync with RHF
-              onValueChange?.(); // ✅ trigger debounce
+              const newOperator = e.target.value;
+              const oldOperator = field.value;
+
+              field.onChange(e);
+
+              if (
+                (filter.data_type === "date" || filter.data_type === "year") &&
+                newOperator !== oldOperator
+              ) {
+                if (newOperator === "today") {
+                  setValue(
+                    `${filter.name}.value`,
+                    moment().format("YYYY-MM-DD"),
+                    {
+                      shouldDirty: true,
+                    }
+                  );
+                } else if (newOperator === "between") {
+                  setValue(`${filter.name}.value`, ["", ""], {
+                    shouldDirty: true,
+                  });
+                } else if (
+                  oldOperator === "between" ||
+                  oldOperator === "today"
+                ) {
+                  setValue(`${filter.name}.value`, "", {
+                    shouldDirty: true,
+                  });
+                }
+              }
+
+              onValueChange?.();
             }}
           >
             {dropdownList?.map((item, idx) => (

package/src/components/filter/components/forms/components/Filter-criteria.tsx

@@ -7,7 +7,7 @@ import {
   Paper,
   ListItemText,
 } from "@mui/material";
-import { useState, useRef } from "react";
+import { useRef } from "react";
 import { AddIcon } from "../../../../../assets/svg";
 import {
   FilterColumnsDataProps,
@@ -45,8 +45,8 @@ const FilterCriteria = ({
     },
   }));
 
-  const [showFilterOptions, setShowFilterOption] = useState(false);
-  const { filters, setFilters } = tableStates;
+  const { filters, setFilters, showFilterOptions, setShowFilterOption } =
+    tableStates;
 
   const filterButtonRef = useRef<HTMLButtonElement>(null);
 

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

@@ -1,5 +1,12 @@
 import { Controller } from "react-hook-form";
-import { FormControl, Select, MenuItem, Theme, SxProps } from "@mui/material";
+import {
+  FormControl,
+  Select,
+  MenuItem,
+  Theme,
+  SxProps,
+  Checkbox,
+} from "@mui/material";
 import { UpdatedFilterStateProps } from "../../../../../types/filter";
 import { DropdownOption } from "../../../../../types/common";
 
@@ -22,39 +29,60 @@ const FormMultiSelect = ({
     <Controller
       name={`${filter?.name}.value`}
       control={control}
-      defaultValue={filter.filter_value || []}
-      render={({ field }) => (
-        <FormControl sx={sx} fullWidth size="small">
-          <Select
-            {...field}
-            sx={{
-              "& .MuiOutlinedInput-input": {
-                padding: "12px 20px",
-              },
-            }}
-            multiple
-            value={field.value || []}
-            onChange={(e) => {
-              field.onChange(e.target.value);
-              onValueChange?.();
-            }}
-            renderValue={(selected: string[]) =>
-              selected
-                .map(
-                  (val) =>
-                    options.find((item) => item.value === val)?.label || val
-                )
-                .join(", ")
-            }
-          >
-            {options.map((item, idx) => (
-              <MenuItem key={idx} value={item.value}>
-                {item.label}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-      )}
+      defaultValue={
+        Array.isArray(filter.filter_value)
+          ? filter.filter_value.filter(Boolean)
+          : []
+      }
+      render={({ field }) => {
+        const cleanedValue = Array.isArray(field.value)
+          ? field.value.filter(Boolean)
+          : [];
+
+        return (
+          <FormControl sx={sx} fullWidth size="small">
+            <Select
+              {...field}
+              sx={{
+                "& .MuiOutlinedInput-input": {
+                  padding: "12px 20px",
+                },
+              }}
+              multiple
+              value={cleanedValue}
+              onChange={(e) => {
+                const value = e.target.value;
+                const filtered = Array.isArray(value)
+                  ? value.filter(Boolean)
+                  : [];
+                field.onChange(filtered);
+                onValueChange?.();
+              }}
+              renderValue={(selected) => {
+                const filtered = Array.isArray(selected)
+                  ? selected.filter(Boolean)
+                  : [];
+                return filtered
+                  .map(
+                    (val) =>
+                      options.find((item) => item.value === val)?.label || val
+                  )
+                  .join(", ");
+              }}
+            >
+              {options.map((item, idx) => (
+                <MenuItem key={idx} value={item.value}>
+                  <Checkbox
+                    checked={cleanedValue.includes(item.value)}
+                    sx={{ marginRight: 1 }}
+                  />
+                  {item.label}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        );
+      }}
     />
   );
 };

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

@@ -16,7 +16,6 @@ import {
 import { Controller, useForm } from "react-hook-form";
 import FormTextfield from "./components/Textfield";
 import React, { useEffect, useMemo, useCallback } from "react";
-import FormSelect from "./components/Select";
 import FormDatePicker from "./components/Date";
 import FormDropdown from "./components/Dropdown";
 import FormMultiSelect from "./components/Multi-Select";
@@ -41,6 +40,8 @@ const FilterForm = ({
   dropdownData,
   searchTerm = "",
   setSearchTerm,
+  criteriaSearchTerm = "",
+  setCriteriaSearchTerm,
   selectedFilters,
   setSelectedFilters,
   handleRemoveFilter,
@@ -53,6 +54,8 @@ const FilterForm = ({
   dropdownData: FilterDropdownDataProps;
   searchTerm?: string;
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
+  criteriaSearchTerm?: string;
+  setCriteriaSearchTerm: React.Dispatch<React.SetStateAction<string>>;
   selectedFilters: UpdatedFilterStateProps[];
   setSelectedFilters: React.Dispatch<
     React.SetStateAction<UpdatedFilterStateProps[]>
@@ -91,7 +94,7 @@ const FilterForm = ({
     control,
     watch,
     reset,
-    formState: { isDirty },
+    // formState: { isDirty },
     setValue,
     unregister,
   } = useForm<FormValues & { dummyChange: string }>({
@@ -231,15 +234,18 @@ const FilterForm = ({
             columnsData={columnsData}
             tableStates={tableStates}
             setSelectedFilters={setSelectedFilters}
-            searchTerm={searchTerm}
-            setSearchTerm={setSearchTerm}
+            searchTerm={criteriaSearchTerm}
+            setSearchTerm={setCriteriaSearchTerm}
           />
 
           {!editMode && (
             <CustomSearch value={searchTerm} onChange={setSearchTerm} />
           )}
 
-          <Box className="filter-form-inputs">
+          <Box
+            className="filter-form-inputs"
+            sx={filterFormStyles.formFlexContainer}
+          >
             {selectedFilters
               .filter(
                 (filter) =>
@@ -251,6 +257,7 @@ const FilterForm = ({
                     .toLowerCase()
                     .includes(searchTerm.toLowerCase())
               )
+              .reverse()
               .map((filter) => {
                 const { dropdown_list = [] } = filter;
                 return (
@@ -265,6 +272,7 @@ const FilterForm = ({
                       <FormDropdown
                         filter={filter}
                         control={control}
+                        setValue={setValue}
                         dropdownList={dropdown_list}
                         sx={filterFormStyles.formListItemHeaderDropdown}
                         onValueChange={updateFiltersFromForm}
@@ -315,7 +323,7 @@ const FilterForm = ({
                           onValueChange={updateFiltersFromForm}
                         />
                       ) : filter.data_type === "select" ? (
-                        <FormSelect
+                        <FormMultiSelect
                           filter={filter}
                           control={control}
                           dropdownData={dropdownData}
@@ -328,6 +336,20 @@ const FilterForm = ({
                           dropdownData={dropdownData}
                           onValueChange={updateFiltersFromForm}
                         />
+                      ) : filter.data_type === "radio" ? (
+                        <FormMultiSelect
+                          filter={filter}
+                          control={control}
+                          dropdownData={dropdownData}
+                          onValueChange={updateFiltersFromForm}
+                        />
+                      ) : filter.data_type === "checkbox" ? (
+                        <FormMultiSelect
+                          filter={filter}
+                          control={control}
+                          dropdownData={dropdownData}
+                          onValueChange={updateFiltersFromForm}
+                        />
                       ) : (
                         <FormControl fullWidth size="small" />
                       )}
@@ -362,7 +384,7 @@ const FilterForm = ({
           <Button
             variant="contained"
             fullWidth
-            disabled={!isDirty && editMode}
+            // disabled={!isDirty && editMode}
             sx={{
               color: "white",
               backgroundColor: "#7A5AF8",

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

@@ -16,6 +16,7 @@ const MainFilter = ({
   setSavedFilterModalOpen,
 }: FilterFormComponentProps) => {
   const [searchTerm, setSearchTerm] = useState<string>("");
+  const [criteriaSearchTerm, setCriteriaSearchTerm] = useState<string>("");
 
   const { setFilters, setFilterMaster } = tableStates;
 
@@ -52,6 +53,8 @@ const MainFilter = ({
         columnsData={columnsData}
         searchTerm={searchTerm}
         setSearchTerm={setSearchTerm}
+        criteriaSearchTerm={criteriaSearchTerm}
+        setCriteriaSearchTerm={setCriteriaSearchTerm}
         selectedFilters={selectedFilters}
         setSelectedFilters={setSelectedFilters}
         handleRemoveFilter={handleRemoveFilter}

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

@@ -19,6 +19,8 @@ const SavedFilterEditComponent = ({
   setEditMode,
   searchTerm,
   setSearchTerm,
+  criteriaSearchTerm,
+  setCriteriaSearchTerm,
   setSavedFilterModalOpen,
   setDeleteFilterModalOpen,
 }: {
@@ -33,6 +35,8 @@ const SavedFilterEditComponent = ({
   setEditMode?: React.Dispatch<React.SetStateAction<boolean>>;
   searchTerm?: string;
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
+  criteriaSearchTerm?: string;
+  setCriteriaSearchTerm: React.Dispatch<React.SetStateAction<string>>;
   setSavedFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
   setDeleteFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
@@ -95,6 +99,8 @@ const SavedFilterEditComponent = ({
         dropdownData={dropdownData}
         searchTerm={searchTerm}
         setSearchTerm={setSearchTerm}
+        criteriaSearchTerm={criteriaSearchTerm}
+        setCriteriaSearchTerm={setCriteriaSearchTerm}
         setSavedFilterModalOpen={setSavedFilterModalOpen}
         setDeleteFilterModalOpen={setDeleteFilterModalOpen}
       />