rez-table-listing-mui 1.0.35 → 1.0.37

package/src/App.tsx

@@ -25,7 +25,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 AYR BRD
 
   const [selectedTab, setSelectedTab] = useState("ALL");
 
@@ -34,7 +34,7 @@ function App() {
 
   const { defaultColumns } = useDefaultColumns();
 
-  const { metaQuery } = useFetchData("UPR");
+  const { metaQuery } = useFetchData("AYR");
   const { detailsQuery } = useDetailsQueryAPI(
     filterMaster?.saved_filters?.selectedId
       ? filterMaster?.saved_filters?.selectedId
@@ -54,7 +54,7 @@ function App() {
 
     const fetchMeta = async () => {
       try {
-        const { res } = await entityTableMetaMaster("UPR");
+        const { res } = await entityTableMetaMaster("AYR");
         setColumns(res);
       } catch (error) {
         console.error("Failed to fetch metadata:", error);
@@ -73,7 +73,7 @@ function App() {
   const { tableData, isTableDataPending } = useEntityTableAPI({
     page: 0,
     size: 50,
-    entity_type: "UPR",
+    entity_type: "AYR",
     tabs: {
       columnName: "status",
       sortBy: "ASC",
@@ -147,12 +147,11 @@ function App() {
       filter_operator: f.filter_operator,
       filter_value: f.filter_value,
     }));
-    console.log("Quick Filter in App.tsx", quickFilter);
 
     const payload = {
       name,
       is_default: false,
-      mapped_entity_type: "UPR", // For that entity type
+      mapped_entity_type: "AYR", // For that entity type
       status: "ACTIVE",
       entity_type: "SFM", // FIXED entity type
       filterDetails: quickFilter,
@@ -167,7 +166,7 @@ function App() {
       name: filterToDelete?.label,
       id: filterToDelete?.value,
       is_default: false,
-      mapped_entity_type: "UPR",
+      mapped_entity_type: "AYR",
       status: "INACTIVE",
       entity_type: "SFM",
     };
@@ -182,13 +181,12 @@ function App() {
       filter_operator: f.filter_operator,
       filter_value: f.filter_value,
     }));
-    console.log("Quick Filter in App.tsx", quickFilter);
 
     const payload = {
       name: filterMaster?.saved_filters?.selectedName, // Name of the filter
       is_default: false,
       id: filterMaster?.saved_filters?.selectedId,
-      mapped_entity_type: "UPR",
+      mapped_entity_type: "AYR",
       status: "ACTIVE",
       entity_type: "SFM",
       filterDetails: quickFilter,

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,173 @@ 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";
+
+  console.log("filter", filter.filter_operator);
+
   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
+              ? ["", ""] // range default
+              : filter.filter_value
+              ? moment(filter.filter_value, "YYYY-MM-DD").toDate() //
+              : null
+          }
+          render={({ field }) => {
+            const value = field.value;
+
+            if (isRange) {
+              const fromDate = Array.isArray(value) ? value[0] : "";
+              const toDate = Array.isArray(value) ? value[1] : "";
+
+              return (
+                <>
+                  <DatePicker
+                    views={views}
+                    value={
+                      fromDate ? moment(fromDate, "YYYY-MM-DD").toDate() : null //
+                    }
+                    onChange={(date) => {
+                      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?.();
+                    }}
+                    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={
+                      toDate ? moment(toDate, "YYYY-MM-DD").toDate() : null //
+                    }
+                    onChange={(date) => {
+                      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?.();
+                    }}
+                    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 date picker fallback
+            return (
+              <DatePicker
+                {...field}
+                views={views}
+                value={
+                  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) => {
+                  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?.();
+                }}
+                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/Filter-criteria.tsx

@@ -16,6 +16,7 @@ import {
 } from "../../../../../types/filter";
 import { CraftTableOptionsProps } from "../../../../../types/table-options";
 import CustomSearch from "../../search";
+import { filterStyles } from "../../../style";
 
 const FilterCriteria = ({
   columnsData,
@@ -47,21 +48,65 @@ const FilterCriteria = ({
   const { filters, setFilters } = tableStates;
   const filterButtonRef = useRef<HTMLButtonElement>(null);
 
-  const handleAddFilter = (column: FilterColumnsListProps) => {
-    const dropdownOptions = columnsData.operation_list[column.data_type];
+  //Remove this function once date with range is fixed
+  // 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);
 
-    // console.log("dropdownOptionssssss", dropdownOptions);
+  //   const newFilter = {
+  //     filter_attribute: column.attribute_key,
+  //     filter_operator: defaultOperator,
+  //     filter_value: defaultValue,
+  //   };
 
-    const defaultValue = column.data_type === "multiselect" ? [] : "";
-    console.log("defaultValue", defaultValue);
+  //   const newSelectedFilter = {
+  //     ...newFilter,
+  //     id: column.id,
+  //     name: column.name,
+  //     data_type: column.data_type,
+  //     dropdown_list: matchingDropdownList,
+  //   };
+
+  //   setFilters((prev) => [...prev, newFilter]);
+  //   setSelectedFilters((prev) => [...prev, newSelectedFilter]);
+  //   //   if (editMode) {
+  //   //     setEditFilters((prev) => [...prev, newFilter]);
+  //   //     setSelectedFilters((prev) => [...prev, newSelectedFilter]);
+  //   //   } else {
+  //   //     setFilters((prev) => [...prev, newFilter]);
+  //   //     setSelectedFilters((prev) => [...prev, newSelectedFilter]);
+  //   //   }
+
+  //   setShowFilterOption(false);
+  // };
+
+  // Updated this function to handle the addition of date with
+
+  const handleAddFilter = (column: FilterColumnsListProps) => {
+    const dropdownOptions = columnsData.operation_list[column.data_type] || [];
 
-    const defaultOperator = dropdownOptions?.[0]?.value || "";
-    // console.log("defaultOperator", defaultOperator);
+    const defaultOperator = dropdownOptions[0]?.value || "";
 
-    const matchingDropdownList =
-      columnsData.operation_list[column.data_type] || [];
+    const defaultValue =
+      column.data_type === "date" && defaultOperator === "between"
+        ? ["", ""] // range-based value for "between"
+        : column.data_type === "multiselect"
+        ? []
+        : "";
 
-    // console.log("matchingDropdownList", matchingDropdownList);
+    const matchingDropdownList = dropdownOptions;
 
     const newFilter = {
       filter_attribute: column.attribute_key,
@@ -79,13 +124,6 @@ const FilterCriteria = ({
 
     setFilters((prev) => [...prev, newFilter]);
     setSelectedFilters((prev) => [...prev, newSelectedFilter]);
-    //   if (editMode) {
-    //     setEditFilters((prev) => [...prev, newFilter]);
-    //     setSelectedFilters((prev) => [...prev, newSelectedFilter]);
-    //   } else {
-    //     setFilters((prev) => [...prev, newFilter]);
-    //     setSelectedFilters((prev) => [...prev, newSelectedFilter]);
-    //   }
 
     setShowFilterOption(false);
   };
@@ -118,7 +156,6 @@ const FilterCriteria = ({
             width: filterButtonRef.current?.offsetWidth || 360, // Dynamic width based on button
             p: 1,
             mt: 2,
-            // overflowY: "auto",
             cursor: "pointer",
             position: "absolute",
             zIndex: 1300,
@@ -126,8 +163,10 @@ const FilterCriteria = ({
         >
           <Box
             sx={{
-              overflowY: "auto", // Enable vertical scrolling
-              width: "100%", // Adjust width as needed
+              maxHeight: `calc(100vh - 440px)`,
+              overflowY: "auto",
+              width: "100%",
+              ...filterStyles.scrollbarCustom,
             }}
           >
             <List>
@@ -140,7 +179,6 @@ const FilterCriteria = ({
               <Box
                 sx={{
                   my: 2,
-                  maxHeight: `calc(100vh - 360px)`,
                   overflowY: "auto",
                   transition: "all 0.4s ease-in-out",
                 }}

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

@@ -163,9 +163,9 @@ const FilterForm = ({
                 "&.Mui-focused fieldset": { borderColor: "#7A5AF8" },
               },
               display: "flex",
-              alignItems: "center", // vertical alignment
-              justifyContent: "center", // horizontal alignment
-              paddingY: 2,
+              alignItems: "center",
+              justifyContent: "center",
+              padding: "0.5rem 0 1rem 0",
               gap: 1,
             }}
           >

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

@@ -38,8 +38,13 @@ const MainFilter = ({
     );
   };
 
+  const mainBoxStyles = {
+    ...filterStyles.filterMainComponentWrapper,
+    ...filterStyles.scrollbarCustom,
+  };
+
   return (
-    <Box sx={filterStyles.filterMainComponentWrapper}>
+    <Box sx={mainBoxStyles}>
       {/* Set selectedFilters state */}
 
       {/* Render selectedFilters state */}

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

@@ -74,7 +74,8 @@ const SavedFilter = ({
     <>
       <CustomSearch value={searchTerm} onChange={setSearchTerm} />
 
-      {columnsData.saved_filter.length === 0 ? (
+      {!Array.isArray(columnsData?.saved_filter) ||
+      columnsData?.saved_filter?.length === 0 ? (
         <Typography sx={{ mt: 2 }}>No saved filters yet.</Typography>
       ) : (
         <List
@@ -124,8 +125,13 @@ const SavedFilter = ({
     </>
   );
 
+  const mainBoxStyles = {
+    ...filterStyles.filterMainComponentWrapper,
+    ...filterStyles.scrollbarCustom,
+  };
+
   return (
-    <Box sx={filterStyles.filterMainComponentWrapper}>
+    <Box sx={mainBoxStyles}>
       {/* Render search input and list */}
       {!editMode && renderList()}
 

package/src/components/filter/index.tsx

@@ -52,10 +52,7 @@ export function TableFilter({
       return;
     }
 
-    console.log("main useEffect triggered");
-
     const updated = filters?.map((filter) => {
-      console.log("inside map");
       const matchingColumn = columnsData.column_list.find(
         (column) => column.attribute_key === filter.filter_attribute
       );

package/src/components/filter/style.ts

@@ -5,6 +5,7 @@ interface StyleProps {
   filterMainHeader: SxProps<Theme>;
   filterMainComponentWrapper: SxProps<Theme>;
   filterAttributeMainSelect: SxProps<Theme>;
+  scrollbarCustom: SxProps<Theme>;
 }
 
 interface filterFormStyleType {
@@ -17,11 +18,28 @@ interface filterFormStyleType {
 }
 
 export const filterStyles: StyleProps = {
+  scrollbarCustom: {
+    overflowY: "auto",
+    pr: 1,
+
+    "&::-webkit-scrollbar": {
+      width: "4px",
+    },
+    "&::-webkit-scrollbar-thumb": {
+      backgroundColor: "#999",
+      borderRadius: "4px",
+    },
+    "&::-webkit-scrollbar-track": {
+      backgroundColor: "#f0f0f0",
+    },
+  },
+
   filterContainer: {
     height: "100%",
     overflowY: "hidden",
     boxShadow: "0px 3px 8px 0px rgba(34, 48, 62, 0.10)",
     borderRadius: "0.5rem",
+    minHeight: "calc(100vh - 200px)",
   },
 
   filterMainHeader: {

package/src/components/index.scss

@@ -28,7 +28,6 @@
       opacity: 0;
       margin-right: calc(-1 * var(--filter-width));
       transition: all 0.4s ease-in-out;
-      max-height: calc(100vh - 50px);
     }
     .ts__table__filter.show {
       transition: all 0.4s ease-in-out;
@@ -37,7 +36,6 @@
       max-width: var(--filter-width);
       margin-left: 1.25rem;
       margin-right: 0rem;
-      min-height: calc(100vh - 50px);
     }
   }
 

package/src/libs/utils/apiColumn.ts

@@ -37,7 +37,6 @@ export const entityTableFilterMaster = async (entity_type: string) => {
         (item: any) => item.attribute_key !== "action"
       ),
     };
-    // console.log("response", filteredData.column_list);
     // return response.data.data;
     return filteredData; // FOR ACTION COLUMN REMOVE
   } catch (error) {

package/src/libs/utils/common.ts

@@ -77,11 +77,11 @@ export function customDebounce<T extends (...args: any[]) => any>(
 }
 
 // uat http://13.200.182.92:9091/api
-// local http://localhost:9091/api
+// local http://localhost:4010/api
 
 // API INTEGRATION
 export const api = axios.create({
-  baseURL: "http://13.200.182.92:9091/api",
+  baseURL: "http://localhost:4010/api",
   timeout: 10000,
   headers: {
     "Content-Type": "application/json",
@@ -101,4 +101,4 @@ api.interceptors.request.use(
   }
 );
 
-export const ENTITY_TYPE = "UPR";
+export const ENTITY_TYPE = "AYR";