rez-table-listing-mui 1.0.49 → 1.2.1

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;
@@ -21,77 +21,186 @@ const FormDatePicker = ({
   views = ["day", "month", "year"],
   onValueChange,
 }: FormDatePickerProps) => {
+  const isRange = filter.filter_operator === "between";
+  const isRelativeToToday = filter.filter_operator === "today";
+
   return (
-    <Controller
-      name={`${filter?.name}.value`}
-      control={control}
-      defaultValue={filter.filter_value || ""}
-      render={({ field }) => {
-        const isYearOnly = views.length === 1 && views[0] === "year";
-        // Convert string year (e.g., "2025") to Date for DatePicker, or null if empty
-        const displayValue = isYearOnly
-          ? field.value
-            ? new Date(Number(field.value), 0, 1)
-            : null
-          : 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 (
-          <LocalizationProvider dateAdapter={AdapterDateFns}>
-            <DatePicker
-              views={views}
-              value={displayValue}
-              onChange={(date) => {
-                // Handle picker selection or typed input
-                const formatted = date
-                  ? isYearOnly
-                    ? moment(date).format("YYYY")
-                    : moment(date).format("DD-MM-YYYY")
-                  : "";
-                field.onChange(formatted);
-                onValueChange?.();
-              }}
-              format={isYearOnly ? "yyyy" : "dd-MM-yyyy"}
-              sx={{
-                "& .MuiOutlinedInput-input": {
-                  padding: "8.5px 14px",
-                  fontSize: "14px",
-                  color: "#000",
-                },
-                "& .MuiInputBase-root": {
-                  bgcolor: "white",
-                },
-                ...sx,
-              }}
-              slotProps={{
-                textField: {
-                  size: "small",
-                  fullWidth: true,
-                  placeholder: isYearOnly ? "YYYY" : "DD-MM-YYYY",
-                  inputProps: isYearOnly
-                    ? {
-                        maxLength: 4, // Limit to 4 digits
-                        inputMode: "numeric", // Optimize for numeric input
-                        pattern: "[0-9]*", // Restrict to numbers
+              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");
                       }
-                    : undefined,
-                  onBlur: () => {
-                    if (isYearOnly) {
-                      const value = field.value;
-                      if (value && !/^\d{4}$/.test(value)) {
-                        field.onChange("");
-                        onValueChange?.();
+                      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",
+                      },
+                    }}
+                  />
+                </>
+              );
+            }
+
+            // Single DatePicker
+            return (
+              <DatePicker
+                {...field}
+                views={views}
+                value={
+                  isRelativeToToday
+                    ? todayDate
+                    : field.value
+                    ? moment(field.value, "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");
+                  }
+                  field.onChange(formatted);
+                  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"
+                        : "DD-MM-YYYY",
                   },
-                },
-              }}
-            />
-          </LocalizationProvider>
-        );
-      }}
-    />
+                }}
+              />
+            );
+          }}
+        />
+      </Box>
+    </LocalizationProvider>
   );
 };
 

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,

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";
@@ -243,7 +242,10 @@ const FilterForm = ({
             <CustomSearch value={searchTerm} onChange={setSearchTerm} />
           )}
 
-          <Box className="filter-form-inputs">
+          <Box
+            className="filter-form-inputs"
+            sx={filterFormStyles.formFlexContainer}
+          >
             {selectedFilters
               .filter(
                 (filter) =>
@@ -255,6 +257,7 @@ const FilterForm = ({
                     .toLowerCase()
                     .includes(searchTerm.toLowerCase())
               )
+              .reverse()
               .map((filter) => {
                 const { dropdown_list = [] } = filter;
                 return (
@@ -269,6 +272,7 @@ const FilterForm = ({
                       <FormDropdown
                         filter={filter}
                         control={control}
+                        setValue={setValue}
                         dropdownList={dropdown_list}
                         sx={filterFormStyles.formListItemHeaderDropdown}
                         onValueChange={updateFiltersFromForm}
@@ -332,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" />
                       )}

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

@@ -13,9 +13,10 @@ import {
   Typography,
 } from "@mui/material";
 import CustomSearch from "./search";
-import { DeleteIcon } from "../../../assets/svg";
+import { DeleteIcon, EditIcon } from "../../../assets/svg";
 import SavedFilterEditComponent from "./saved-edit-filter";
 import { filterStyles } from "../style";
+import { CheckBox } from "../../../assets/svg";
 
 const SavedFilter = ({
   columnsData,
@@ -66,11 +67,26 @@ const SavedFilter = ({
           activeFilterTabIndex: tabValue,
         } as FilterMasterStateProps)
     );
-
+    // setEditfilter state on edit icon click
     setEditMode && setEditMode(true);
     setFilterToDelete(filter);
   };
 
+  const handleAppyFilter = (filter: FilterOperationListProps) => {
+    setFilterMaster(
+      (prev) =>
+        ({
+          ...prev,
+          saved_filters: {
+            ...prev?.attributes,
+            selectedId: filter?.value,
+            selectedName: filter?.label,
+          },
+          activeFilterTabIndex: tabValue,
+        } as FilterMasterStateProps)
+    );
+  };
+
   const renderList = () => (
     <>
       <CustomSearch
@@ -99,24 +115,62 @@ const SavedFilter = ({
                 key={filter?.value}
                 sx={{
                   cursor: "pointer",
-                  border: "1px solid #ccc",
+                  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={() => handleListItemClick(filter)}
+                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()}>
+                <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); // Store the filter to delete
-
-                      setDeleteFilterModalOpen &&
-                        setDeleteFilterModalOpen(true); // Open the delete confirmation modal
+                      setFilterToDelete(filter);
+                      setDeleteFilterModalOpen?.(true);
                     }}
                   >
                     <DeleteIcon />

package/src/components/filter/index.tsx

@@ -79,7 +79,7 @@ export function TableFilter({
 
   const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
     setTabValue(newValue);
-    if (newValue !== 1) {
+    if (newValue === 0) {
       setEditMode(false);
       setSelectedFilters([]);
     }
@@ -89,7 +89,7 @@ export function TableFilter({
   const tabItems: TabItem[] = [
     { label: "Filter" },
     { label: "Saved Filter" },
-    // { label: "Attributes" },
+    { label: "Attributes" },
   ];
 
   const handleTabCrossClick = (index: number) => {
@@ -122,7 +122,7 @@ export function TableFilter({
             ({
               ...prev,
               attributes: {
-                radio: "",
+                radio: [],
                 selected: "",
               },
             } as FilterMasterStateProps)

package/src/components/filter/style.ts

@@ -90,7 +90,7 @@ export const filterFormStyles: filterFormStyleType = {
   formFlexContainer: {
     display: "flex",
     flexDirection: "column",
-    gap: "1.25rem",
+    gap: "0.75rem",
   },
 
   formListItem: {