rez-table-listing-mui 1.0.48 → 1.0.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.0.48",
+  "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

@@ -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/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 }>({
@@ -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: {

package/src/components/table-settings/common/listing-values.tsx

@@ -26,8 +26,40 @@ interface ListingValuesProps {
   containerId: string;
   tabsApiDataLoading?: boolean;
   onItemToggle: (itemId: string, fromContainerId: string) => void;
+  enableDragAndDrop?: boolean;
 }
 
+const ListingValuesContent = ({
+  item,
+  containerId,
+  onItemToggle,
+}: {
+  item: FilterValue;
+  containerId: string;
+  onItemToggle: (itemId: string, fromContainerId: string) => void;
+}) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 1,
+        flex: 1,
+        color: containerId === "tabs" ? "black" : "#9e9d9b",
+      }}
+    >
+      <Typography>{item.label}</Typography>
+      <IconButton
+        size="small"
+        onClick={() => onItemToggle(item.id, containerId)}
+      >
+        {containerId === "tabs" ? <EyeIcon /> : <ClosedEyeIcon />}
+      </IconButton>
+    </Box>
+  );
+};
+
 const ListingValues = ({
   filteredValues,
   buttonText,
@@ -38,6 +70,7 @@ const ListingValues = ({
   containerId,
   tabsApiDataLoading,
   onItemToggle,
+  enableDragAndDrop = true,
 }: ListingValuesProps) => {
   const { setNodeRef } = useDroppable({
     id: containerId,
@@ -73,39 +106,39 @@ const ListingValues = ({
           )}
 
           <Box ref={setNodeRef} sx={listingValuesStyles.draggableContainer}>
-            <SortableContext
-              items={filteredValues.map((item) => item.id)}
-              strategy={verticalListSortingStrategy}
-            >
+            {enableDragAndDrop ? (
+              <SortableContext
+                items={filteredValues.map((item) => item.id)}
+                strategy={verticalListSortingStrategy}
+              >
+                <Box sx={listingValuesStyles.draggableCover}>
+                  {filteredValues.map((item) => (
+                    <DraggableListItem
+                      key={item.id}
+                      id={item.id}
+                      containerId={containerId}
+                    >
+                      <ListingValuesContent
+                        item={item}
+                        containerId={containerId}
+                        onItemToggle={onItemToggle}
+                      />
+                    </DraggableListItem>
+                  ))}
+                </Box>
+              </SortableContext>
+            ) : (
               <Box sx={listingValuesStyles.draggableCover}>
                 {filteredValues.map((item) => (
-                  <DraggableListItem
+                  <ListingValuesContent
                     key={item.id}
-                    id={item.id}
+                    item={item}
                     containerId={containerId}
-                  >
-                    <Box
-                      sx={{
-                        display: "flex",
-                        alignItems: "center",
-                        flex: 1,
-                        color: containerId === "tabs" ? "black" : "#9e9d9b",
-                      }}
-                    >
-                      <Typography>{item.label}</Typography>
-                    </Box>
-
-                    {/* on click i want to append this item in the show list and remove it from the hide list */}
-                    <IconButton
-                      size="small"
-                      onClick={() => onItemToggle(item.id, containerId)}
-                    >
-                      {containerId === "tabs" ? <EyeIcon /> : <ClosedEyeIcon />}
-                    </IconButton>
-                  </DraggableListItem>
+                    onItemToggle={onItemToggle}
+                  />
                 ))}
               </Box>
-            </SortableContext>
+            )}
           </Box>
         </Box>
       )}

package/src/components/table-settings/components/column.tsx

@@ -16,7 +16,6 @@ import { craftTableFilterSettingsOptionsProps } from "../../../types/table-optio
 import CustomToggleSwitchButton from "./toggle-button-switch";
 import { FilterColumnsDataProps } from "../../../types/filter";
 import { TOGGLE_BUTTON_TABS } from "../constants";
-import { ColumnTabConfigProps } from "../../../types/filter-settings";
 import CustomTabs from "../tabs/horizontal";
 
 export interface ColumnItem {
@@ -39,14 +38,8 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
   const [searchTerm, setSearchTerm] = useState<string>("");
   const [selectedTabIndex, setSelectedTabIndex] = useState<number>(0);
 
-  const {
-    quickTabStates,
-    columnTabState,
-    setColumnTabState,
-    settingsData,
-    sortingTabState,
-    setSortingTabState,
-  } = filterSettingStates;
+  const { quickTabStates, columnTabState, setColumnTabState, settingsData } =
+    filterSettingStates;
 
   useEffect(() => {
     const mappedColumns: ColumnItem[] =