rez-table-listing-mui 1.0.29 → 1.0.31

package/src/App.tsx

@@ -24,7 +24,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 NTM BRD
 
   const [selectedTab, setSelectedTab] = useState("ALL");
 
@@ -33,7 +33,7 @@ function App() {
 
   const { defaultColumns } = useDefaultColumns();
 
-  const { metaQuery } = useFetchData("UPR");
+  const { metaQuery } = useFetchData("NTM");
   const { detailsQuery } = useDetailsQueryAPI(
     filterMaster?.saved_filters?.selectedId
       ? filterMaster?.saved_filters?.selectedId
@@ -58,7 +58,7 @@ function App() {
 
     const fetchMeta = async () => {
       try {
-        const { res } = await entityTableMetaMaster("UPR");
+        const { res } = await entityTableMetaMaster("NTM");
         setColumns(res);
       } catch (error) {
         console.error("Failed to fetch metadata:", error);
@@ -77,7 +77,7 @@ function App() {
   const { tableData, isTableDataPending } = useEntityTableAPI({
     page: 0,
     size: 50,
-    entity_type: "UPR",
+    entity_type: "NTM",
     tabs: {
       columnName: "status",
       sortBy: "ASC",
@@ -156,7 +156,7 @@ function App() {
     const payload = {
       name,
       is_default: false,
-      mapped_entity_type: "UPR", // For that entity type
+      mapped_entity_type: "NTM", // For that entity type
       status: "ACTIVE",
       entity_type: "SFM", // FIXED entity type
       filterDetails: quickFilter,
@@ -171,7 +171,7 @@ function App() {
       name: filterToDelete?.label,
       id: filterToDelete?.value,
       is_default: false,
-      mapped_entity_type: "UPR",
+      mapped_entity_type: "NTM",
       status: "INACTIVE",
       entity_type: "SFM",
     };
@@ -192,7 +192,7 @@ function App() {
       name: filterMaster?.saved_filters?.selectedName, // Name of the filter
       is_default: false,
       id: filterMaster?.saved_filters?.selectedId,
-      mapped_entity_type: "UPR",
+      mapped_entity_type: "NTM",
       status: "ACTIVE",
       entity_type: "SFM",
       filterDetails: quickFilter,
@@ -218,10 +218,10 @@ function App() {
           enableRowSelection: false,
           enableServerSideSorting: enableServerSideSorting,
         }}
-        loadingOptions={{
-          isLoading: isTableDataPending || detailsQuery.isPending,
-          // loaderText: "Loading, Please wait...",
-        }}
+        // loadingOptions={{
+        //   isLoading: isTableDataPending || detailsQuery.isPending,
+        //   // loaderText: "Loading, Please wait...",
+        // }}
         topbarOptions={{
           tableStates,
           leftSideComponent: (

package/src/components/common/confirm-modal/index.tsx

@@ -32,6 +32,7 @@ export interface InputField {
   multiline?: boolean;
   rows?: number;
   defaultValue?: string;
+  labelClassName?: string;
 }
 
 export interface ConfirmModalProps {
@@ -43,6 +44,7 @@ export interface ConfirmModalProps {
   input?: InputField;
   maxWidth?: "xs" | "sm" | "md" | "lg" | "xl";
   fullWidth?: boolean;
+  className?: string;
 }
 
 const ConfirmModal: React.FC<ConfirmModalProps> = ({
@@ -130,6 +132,7 @@ const ConfirmModal: React.FC<ConfirmModalProps> = ({
             <Typography
               variant="body2"
               component="label"
+              className={input.labelClassName}
               sx={{
                 display: "block",
                 marginBottom: 1,
@@ -180,6 +183,7 @@ const ConfirmModal: React.FC<ConfirmModalProps> = ({
             key={index}
             variant={button.variant || "outlined"}
             color={button.color || "primary"}
+            className="confirm-modal-button"
             sx={button.sx}
             onClick={() => handleButtonClick(button)}
             disabled={

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

@@ -9,12 +9,14 @@ import { SxProps, Theme } from "@mui/material";
 const FormDatePicker = ({
   filter,
   control,
-  sx,
 }: {
   filter: UpdatedFilterStateProps;
   control: any;
   sx?: SxProps<Theme>;
 }) => {
+  const range = filter.filter_operator === "between";
+  console.log("range+++", range);
+
   return (
     <Controller
       name={`${filter?.name}.value`} // or use a consistent structure like `filters.${index}.filter_value`

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

@@ -16,6 +16,7 @@ import {
   UpdatedFilterStateProps,
 } from "../../../../../types/filter";
 import { CraftTableOptionsProps } from "../../../../../types/table-options";
+import CustomSearch from "../../search";
 
 const FilterCriteria = ({
   columnsData,
@@ -45,11 +46,20 @@ const FilterCriteria = ({
 
   const handleAddFilter = (column: FilterColumnsListProps) => {
     const dropdownOptions = columnsData.operation_list[column.data_type];
+
+    // console.log("dropdownOptionssssss", dropdownOptions);
+
     const defaultValue = column.data_type === "multiselect" ? [] : "";
+    console.log("defaultValue", defaultValue);
+
     const defaultOperator = dropdownOptions?.[0]?.value || "";
+    // console.log("defaultOperator", defaultOperator);
+
     const matchingDropdownList =
       columnsData.operation_list[column.data_type] || [];
 
+    // console.log("matchingDropdownList", matchingDropdownList);
+
     const newFilter = {
       filter_attribute: column.attribute_key,
       filter_operator: defaultOperator,
@@ -129,7 +139,8 @@ const FilterCriteria = ({
                     borderRadius: "6px",
                   }}
                 >
-                  Filter by...
+                  {/* Filter by... */}
+                  {/* <CustomSearch placeholder="Filter by..." /> */}
                 </ListSubheader>
               }
             >

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

@@ -15,7 +15,7 @@ import {
 } from "../../../../types/filter";
 import { Controller, useForm } from "react-hook-form";
 import FormTextfield from "./components/Textfield";
-import React, { useEffect, useMemo } from "react";
+import React, { useEffect, useMemo, useCallback } from "react";
 import FormSelect from "./components/Select";
 import FormDatePicker from "./components/Date";
 import FormDropdown from "./components/Dropdown";
@@ -23,6 +23,7 @@ import FormMultiSelect from "./components/Multi-Select";
 import { CraftTableOptionsProps } from "../../../../types/table-options";
 import FilterCriteria from "./components/Filter-criteria";
 import CustomSearch from "../search";
+import { customDebounce } from "../../../../libs/utils/debounce";
 
 interface FormValues {
   filterName: string;
@@ -106,9 +107,18 @@ const FilterForm = ({
 
   // Reset form when filters change
   useEffect(() => {
-    reset(defaultValues);
+    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
+    [setSelectedFilters, setFilters]
+  );
+
   // Effect to update filters when form values change
   useEffect(() => {
     if (isDirty) {
@@ -128,10 +138,10 @@ const FilterForm = ({
         return filter;
       });
 
-      setSelectedFilters(updatedFilters);
-      setFilters(updatedFilters);
+      // Use the debounced update function instead of direct updates
+      debouncedUpdateFilters(updatedFilters);
     }
-  }, [formValues]);
+  }, [formValues, isDirty, selectedFilters, debouncedUpdateFilters]);
 
   // Cleanup effect
   useEffect(() => {
@@ -231,6 +241,8 @@ const FilterForm = ({
           columnsData={columnsData}
           tableStates={tableStates}
           setSelectedFilters={setSelectedFilters}
+          // searchTerm={searchTerm}
+          // setSearchTerm={setSearchTerm}
         />
 
         {/* Render search input */}
@@ -296,9 +308,8 @@ const FilterForm = ({
                     sx={{ marginLeft: "auto" }}
                     onClick={() => {
                       const fieldName = `${filter.name}.value`;
-                      unregister(fieldName); // ✅ Unregister field manually
+                      unregister(fieldName);
 
-                      // ✅ Trigger dirty manually (optional, but safe fallback)
                       setValue("filterName", formValues.filterName, {
                         shouldDirty: true,
                       });

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

@@ -6,6 +6,7 @@ interface SearchInputProps {
   value: string;
   onChange: (value: string) => void;
   placeholder?: string;
+  className?: string;
 }
 
 const CustomSearch = ({
@@ -28,10 +29,14 @@ const CustomSearch = ({
       value={search}
       onChange={handleChange}
       placeholder={placeholder}
+      className={"search-input"}
       InputProps={{
         startAdornment: (
           <InputAdornment position="start">
-            <SearchIcon sx={{ color: "#888888", fontSize: "20px" }} />
+            <SearchIcon
+              sx={{ color: "#888888", fontSize: "20px" }}
+              className="search-icon-svg"
+            />
           </InputAdornment>
         ),
       }}

package/src/components/filter/index.tsx

@@ -241,14 +241,18 @@ const FilterDrawer = ({
             },
             {
               label: "Delete",
+
               onClick: () => {
                 onDeleteFilter && onDeleteFilter();
-
                 setDeleteFilterModalOpen(false);
                 setEditMode && setEditMode(false);
               },
               variant: "contained",
-              sx: { color: "white", backgroundColor: "#f63d68" },
+              sx: {
+                color: "white",
+                backgroundColor: "#f63d68",
+                "&:hover": { backgroundColor: "#f63d68" },
+              },
             },
           ]}
           maxWidth="xs"

package/src/libs/hooks/useCraftTable.tsx

@@ -14,7 +14,7 @@ import {
 
 export function useCraftTable(paginationPageSize: number = 25) {
   const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
+    pageIndex: 1,
     pageSize: paginationPageSize,
   });
   const [sorting, setSorting] = useState<SortingState>([]);

package/src/libs/utils/common.ts

@@ -101,4 +101,4 @@ api.interceptors.request.use(
   }
 );
 
-export const ENTITY_TYPE = "UPR";
+export const ENTITY_TYPE = "NTM";

package/src/libs/utils/debounce.ts

@@ -0,0 +1,15 @@
+export const customDebounce = <T extends (...args: any[]) => any>(
+  func: T,
+  delay: number
+) => {
+  let timerId: NodeJS.Timeout;
+
+  return function (this: any, ...args: Parameters<T>) {
+    const context = this;
+
+    clearTimeout(timerId);
+    timerId = setTimeout(() => {
+      func.apply(context, args);
+    }, delay);
+  };
+};