rez-table-listing-mui 1.0.47 → 1.0.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.0.47",
+  "version": "1.0.49",
   "type": "module",
   "description": "A rez table listing component built on TanStack Table",
   "main": "dist/index.js",

package/src/App.tsx

@@ -31,7 +31,7 @@ function App() {
   const [columns, setColumns] = useState<any[]>([]);
   const [searchTerm, setSearchTerm] = useState("");
   // const [data, setData] = useState<Person[]>(() => makeData(50, 3, 2));
-  // const [entity_type] = useState(ENTITY_TYPE); //OR UPR BRD
+  // const [entity_type] = useState(ENTITY_TYPE); //OR UPR AYR
 
   const [selectedTab, setSelectedTab] = useState("ALL");
 
@@ -45,7 +45,7 @@ function App() {
 
   const { defaultColumns } = useDefaultColumns();
 
-  const { metaQuery } = useFetchData("BRD");
+  const { metaQuery } = useFetchData("AYR");
   const { detailsQuery } = useDetailsQueryAPI(
     filterMaster?.saved_filters?.selectedId
       ? filterMaster?.saved_filters?.selectedId
@@ -55,16 +55,16 @@ function App() {
   const { savedMutation } = useSavedFilterAPI(); //API CALL FOR SAVED FILTER
   const { deleteMutation } = useDeleteFilterAPI(); //API FOR DELETING FILTER
   const { updateMutation } = useUpdateFilterAPI(); //API FOR UPDATE FILTER
-  const { saveSettingsDataMutation } = useSaveSettingsDataAPI("BRD");
+  const { saveSettingsDataMutation } = useSaveSettingsDataAPI("AYR");
   const { dropdownData } = useCommonDropdownAPI(metaQuery.data);
   const { settingsTabDropdownData, settingsTabDropdownPending } =
     useSettingsDropDownAPI({
-      entity_type: "BRD",
+      entity_type: "AYR",
       column: filterSettingStates?.quickTabStates?.attribute,
       sort_by: filterSettingStates?.quickTabStates?.sorting,
     });
 
-  const { getSettingsAPIData } = useGetSettingsDataAPI("BRD");
+  const { getSettingsAPIData } = useGetSettingsDataAPI("AYR");
 
   useEffect(() => {
     // setTimeout(() => {
@@ -73,7 +73,7 @@ function App() {
 
     const fetchMeta = async () => {
       try {
-        const { res: allColumns } = await entityTableMetaMaster("BRD");
+        const { res: allColumns } = await entityTableMetaMaster("AYR");
 
         const savedColumnSettings = filterSettingStates.settingsData?.column;
 
@@ -91,10 +91,22 @@ function App() {
             const visibleColumns = new Set(
               activeTabSettings.show_list.map((c) => c.value)
             );
-            const filtered = allColumns.filter((col: any) =>
+
+            // First, filter columns based on visibleColumns
+            const filteredColumns = allColumns.filter((col: any) =>
               visibleColumns.has(col.accessorKey)
             );
-            setColumns(filtered);
+
+            // Then, order the filtered columns based on the sequence in show_list
+            const orderedColumns = activeTabSettings.show_list
+              .map((showItem) =>
+                filteredColumns.find(
+                  (col: any) => col.accessorKey === showItem.value
+                )
+              )
+              .filter((col: any) => col !== undefined); // To ensure we filter out any undefined columns
+
+            setColumns(orderedColumns);
           } else {
             // Fallback if no specific settings for the active tab are found
             setColumns(allColumns);
@@ -134,7 +146,7 @@ function App() {
   const { tableData } = useEntityTableAPI({
     page: 0,
     size: 50,
-    entity_type: "BRD",
+    entity_type: "AYR",
     tabs: {
       columnName: "status",
       sortBy: "ASC",
@@ -213,7 +225,7 @@ function App() {
     const payload = {
       name,
       is_default: false,
-      mapped_entity_type: "BRD", // For that entity type
+      mapped_entity_type: "AYR", // For that entity type
       status: "ACTIVE",
       entity_type: "SFM", // FIXED entity type
       filterDetails: quickFilter,
@@ -237,7 +249,7 @@ function App() {
       name: filterToDelete?.label,
       id: filterToDelete?.value,
       is_default: false,
-      mapped_entity_type: "BRD",
+      mapped_entity_type: "AYR",
       status: "INACTIVE",
       entity_type: "SFM",
     };
@@ -257,7 +269,7 @@ function App() {
       name: filterMaster?.saved_filters?.selectedName, // Name of the filter
       is_default: false,
       id: filterMaster?.saved_filters?.selectedId,
-      mapped_entity_type: "BRD",
+      mapped_entity_type: "AYR",
       status: "ACTIVE",
       entity_type: "SFM",
       filterDetails: quickFilter,
@@ -269,7 +281,7 @@ function App() {
   const handleSaveSettingsData = (settingsData: SettingsDataProps) => {
     const payload = {
       entity_type: "LAP",
-      mapped_entity_type: "BRD",
+      mapped_entity_type: "AYR",
       layout_json: settingsData,
     };
 

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

@@ -18,121 +18,81 @@ const FormDatePicker = ({
   filter,
   control,
   sx,
-  views = ["day", "month", "year"], // default to full date picker
+  views = ["day", "month", "year"],
   onValueChange,
 }: FormDatePickerProps) => {
   return (
     <Controller
-      name={`${filter?.name}.value`} // Use consistent field structure
+      name={`${filter?.name}.value`}
       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
-            }
-            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");
-                }
-              }
-              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:
-                  views?.length === 1 && views[0] === "year"
-                    ? "YYYY"
-                    : "DD-MM-YYYY",
-              },
-            }}
-          />
-        </LocalizationProvider>
-      )}
+      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;
+
+        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
+                      }
+                    : undefined,
+                  onBlur: () => {
+                    if (isYearOnly) {
+                      const value = field.value;
+                      if (value && !/^\d{4}$/.test(value)) {
+                        field.onChange("");
+                        onValueChange?.();
+                      }
+                    }
+                  },
+                },
+              }}
+            />
+          </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/Filter-criteria.tsx

@@ -17,6 +17,7 @@ import {
 import { CraftTableOptionsProps } from "../../../../../types/table-options";
 import CustomSearch from "../../search";
 import { filterStyles } from "../../../style";
+import useElementWidth from "../../../../../libs/hooks/useElementWidth";
 
 const FilterCriteria = ({
   columnsData,
@@ -44,10 +45,13 @@ const FilterCriteria = ({
     },
   }));
 
-  const [showFilterOptions, setShowFilterOption] = useState(false);
-  const { filters, setFilters } = tableStates;
+  const { filters, setFilters, showFilterOptions, setShowFilterOption } =
+    tableStates;
+
   const filterButtonRef = useRef<HTMLButtonElement>(null);
 
+  const filterButtonWidth = useElementWidth(filterButtonRef);
+
   const handleAddFilter = (column: FilterColumnsListProps) => {
     const dropdownOptions = columnsData.operation_list[column.data_type];
 
@@ -110,7 +114,7 @@ const FilterCriteria = ({
       {showFilterOptions && (
         <Paper
           sx={{
-            width: filterButtonRef.current?.offsetWidth || 360, // Dynamic width based on button
+            width: filterButtonWidth || 360, // Dynamic width based on button
             p: 1,
             mt: 2,
             cursor: "pointer",
@@ -141,8 +145,12 @@ const FilterCriteria = ({
                 }}
               >
                 {columnsData?.column_list
-                  ?.filter((column) =>
-                    column.name.toLowerCase().includes(searchTerm.toLowerCase())
+                  ?.filter(
+                    (column) =>
+                      column.name.toLowerCase() !== "action" && // Exclude Action column in filter criteria options
+                      column.name
+                        .toLowerCase()
+                        .includes(searchTerm.toLowerCase())
                   )
                   .map((column, index) => {
                     const isAlreadySelected = filters?.some(

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

@@ -41,6 +41,8 @@ const FilterForm = ({
   dropdownData,
   searchTerm = "",
   setSearchTerm,
+  criteriaSearchTerm = "",
+  setCriteriaSearchTerm,
   selectedFilters,
   setSelectedFilters,
   handleRemoveFilter,
@@ -53,6 +55,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 +95,7 @@ const FilterForm = ({
     control,
     watch,
     reset,
-    formState: { isDirty },
+    // formState: { isDirty },
     setValue,
     unregister,
   } = useForm<FormValues & { dummyChange: string }>({
@@ -107,7 +111,7 @@ const FilterForm = ({
 
   useEffect(() => {
     reset(defaultValues);
-  }, [selectedFilters, filterName]);
+  }, [selectedFilters]);
 
   const debouncedUpdateFilters = useCallback(
     customDebounce((updatedFilters: UpdatedFilterStateProps[]) => {
@@ -231,8 +235,8 @@ const FilterForm = ({
             columnsData={columnsData}
             tableStates={tableStates}
             setSelectedFilters={setSelectedFilters}
-            searchTerm={searchTerm}
-            setSearchTerm={setSearchTerm}
+            searchTerm={criteriaSearchTerm}
+            setSearchTerm={setCriteriaSearchTerm}
           />
 
           {!editMode && (
@@ -315,7 +319,7 @@ const FilterForm = ({
                           onValueChange={updateFiltersFromForm}
                         />
                       ) : filter.data_type === "select" ? (
-                        <FormSelect
+                        <FormMultiSelect
                           filter={filter}
                           control={control}
                           dropdownData={dropdownData}
@@ -362,7 +366,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}
       />

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

@@ -31,6 +31,7 @@ const SavedFilter = ({
 }: FilterFormComponentProps) => {
   const { setFilterMaster, setFilterToDelete } = tableStates;
   const [searchTerm, setSearchTerm] = useState<string>("");
+  const [criteriaSearchTerm, setCriteriaSearchTerm] = useState<string>("");
 
   // reset savedFilterEditValue when component unmounts
   useEffect(() => {
@@ -149,6 +150,8 @@ const SavedFilter = ({
           setEditMode={setEditMode}
           searchTerm={searchTerm}
           setSearchTerm={setSearchTerm}
+          criteriaSearchTerm={criteriaSearchTerm}
+          setCriteriaSearchTerm={setCriteriaSearchTerm}
           setSavedFilterModalOpen={setSavedFilterModalOpen}
           setDeleteFilterModalOpen={setDeleteFilterModalOpen}
         />

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

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
-import { TextField, InputAdornment } from "@mui/material";
+import { TextField, InputAdornment, IconButton } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
+import { CloseIcon } from "../../../../assets/svg";
 
 interface SearchInputProps {
   value: string;
@@ -22,6 +23,11 @@ const CustomSearch = ({
     onChange?.(val);
   };
 
+  const handleClear = () => {
+    setSearch(""); // Clear the search value
+    onChange?.(""); // Propagate the cleared value
+  };
+
   return (
     <TextField
       fullWidth
@@ -39,6 +45,17 @@ const CustomSearch = ({
             />
           </InputAdornment>
         ),
+        endAdornment: search && ( // Show the clear icon only when there's a value
+          <InputAdornment position="end">
+            <IconButton
+              edge="end"
+              onClick={handleClear}
+              sx={{ color: "#888888", fontSize: "20px" }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </InputAdornment>
+        ),
       }}
       sx={{
         "& .MuiOutlinedInput-root": {

package/src/components/filter/index.tsx

@@ -36,8 +36,14 @@ export function TableFilter({
 
   const [searchTerm, setSearchTerm] = useState<string>("");
 
-  const { filters, setFilters, filterToDelete, filterMaster, setFilterMaster } =
-    tableStates;
+  const {
+    filters,
+    setFilters,
+    filterToDelete,
+    filterMaster,
+    setFilterMaster,
+    setShowFilterOption,
+  } = tableStates;
 
   const filterNameInput: InputField = {
     label: "Filter Name",
@@ -137,6 +143,7 @@ export function TableFilter({
           onClick={(e) => {
             e.stopPropagation();
             onClose && onClose();
+            setShowFilterOption(false);
           }}
           aria-label="close"
         >
@@ -256,11 +263,19 @@ export function TableFilter({
           },
           {
             label: "Delete",
-
             onClick: () => {
               onDeleteFilter && onDeleteFilter();
               setDeleteFilterModalOpen(false);
               setEditMode && setEditMode(false);
+              setSelectedFilters([]);
+              setFilters([]);
+              setFilterMaster(
+                (prev) =>
+                  ({
+                    ...prev,
+                    activeFilterTabIndex: -1,
+                  } as FilterMasterStateProps)
+              );
             },
             variant: "contained",
             sx: {