rez-table-listing-mui 1.0.31 → 1.0.33

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 NTM BRD
+  // const [entity_type] = useState(ENTITY_TYPE); //OR AYR BRD
 
   const [selectedTab, setSelectedTab] = useState("ALL");
 
@@ -33,7 +33,7 @@ function App() {
 
   const { defaultColumns } = useDefaultColumns();
 
-  const { metaQuery } = useFetchData("NTM");
+  const { metaQuery } = useFetchData("AYR");
   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("NTM");
+        const { res } = await entityTableMetaMaster("AYR");
         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: "NTM",
+    entity_type: "AYR",
     tabs: {
       columnName: "status",
       sortBy: "ASC",
@@ -156,7 +156,7 @@ function App() {
     const payload = {
       name,
       is_default: false,
-      mapped_entity_type: "NTM", // For that entity type
+      mapped_entity_type: "AYR", // 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: "NTM",
+      mapped_entity_type: "AYR",
       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: "NTM",
+      mapped_entity_type: "AYR",
       status: "ACTIVE",
       entity_type: "SFM",
       filterDetails: quickFilter,

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

@@ -6,20 +6,22 @@ import moment from "moment";
 import { UpdatedFilterStateProps } from "../../../../../types/filter";
 import { SxProps, Theme } from "@mui/material";
 
-const FormDatePicker = ({
-  filter,
-  control,
-}: {
+type FormDatePickerProps = {
   filter: UpdatedFilterStateProps;
   control: any;
   sx?: SxProps<Theme>;
-}) => {
-  const range = filter.filter_operator === "between";
-  console.log("range+++", range);
+  views?: Array<"year" | "month" | "day">;
+};
 
+const FormDatePicker = ({
+  filter,
+  control,
+  sx,
+  views = ["day", "month", "year"], // default to full date picker
+}: FormDatePickerProps) => {
   return (
     <Controller
-      name={`${filter?.name}.value`} // or use a consistent structure like `filters.${index}.filter_value`
+      name={`${filter?.name}.value`} // Use consistent field structure
       control={control}
       defaultValue={
         filter.filter_value
@@ -29,25 +31,39 @@ const FormDatePicker = ({
       render={({ field }) => (
         <LocalizationProvider dateAdapter={AdapterDateFns}>
           <DatePicker
-            sx={{
-              "& .MuiOutlinedInput-input": {
-                padding: "12px 20px",
-              },
-            }}
             {...field}
+            views={views}
             value={
               field.value ? moment(field.value, "DD-MM-YYYY").toDate() : null
             }
             onChange={(date) => {
-              const formatted = date ? moment(date).format("DD-MM-YYYY") : "";
+              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);
             }}
-            format="dd-MM-yyyy"
+            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: "DD-MM-YYYY",
+                placeholder:
+                  views?.length === 1 && views[0] === "year"
+                    ? "YYYY"
+                    : "DD-MM-YYYY",
               },
             }}
           />
@@ -58,3 +74,62 @@ const FormDatePicker = ({
 };
 
 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

@@ -22,12 +22,16 @@ const FilterCriteria = ({
   columnsData,
   tableStates,
   setSelectedFilters,
+  searchTerm,
+  setSearchTerm,
 }: {
   columnsData: FilterColumnsDataProps;
   tableStates: CraftTableOptionsProps;
   setSelectedFilters: React.Dispatch<
     React.SetStateAction<UpdatedFilterStateProps[]>
   >;
+  searchTerm: string;
+  setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
 }) => {
   const FilterButton = styled(Button)(({ theme }) => ({
     borderRadius: 20,
@@ -130,40 +134,49 @@ const FilterCriteria = ({
             }}
           >
             <List
-              subheader={
-                <ListSubheader
-                  component="div"
-                  sx={{
-                    fontWeight: "bold",
-                    bgcolor: "#f5f5f9",
-                    borderRadius: "6px",
-                  }}
-                >
-                  {/* Filter by... */}
-                  {/* <CustomSearch placeholder="Filter by..." /> */}
-                </ListSubheader>
-              }
+            // subheader={
+            //   <ListSubheader
+            //     component="div"
+            //     sx={{
+            //       fontWeight: "bold",
+            //       bgcolor: "#f5f5f9",
+            //       borderRadius: "6px",
+            //     }}
+            //   >
+            //     {/* Filter by... */}
+            //     {/* <CustomSearch placeholder="Filter by..." /> */}
+            //   </ListSubheader>
+            // }
             >
-              {columnsData?.column_list?.map((column, index) => {
-                const isAlreadySelected = filters?.some(
-                  (filter) => filter.filter_attribute === column.attribute_key
-                );
-
-                return (
-                  <ListItem
-                    key={index}
-                    onClick={() =>
-                      !isAlreadySelected && handleAddFilter(column)
-                    } // Prevent click if already selected
-                    sx={{
-                      opacity: isAlreadySelected ? 0.5 : 1,
-                      cursor: isAlreadySelected ? "not-allowed" : "pointer",
-                    }}
-                  >
-                    <ListItemText primary={column.name} />
-                  </ListItem>
-                );
-              })}
+              <CustomSearch
+                placeholder="Filter by..."
+                value={searchTerm}
+                onChange={setSearchTerm}
+              />
+              {columnsData?.column_list
+                ?.filter((column) =>
+                  column.name.toLowerCase().includes(searchTerm.toLowerCase())
+                )
+                .map((column, index) => {
+                  const isAlreadySelected = filters?.some(
+                    (filter) => filter.filter_attribute === column.attribute_key
+                  );
+
+                  return (
+                    <ListItem
+                      key={index}
+                      onClick={() =>
+                        !isAlreadySelected && handleAddFilter(column)
+                      } // Prevent click if already selected
+                      sx={{
+                        opacity: isAlreadySelected ? 0.5 : 1,
+                        cursor: isAlreadySelected ? "not-allowed" : "pointer",
+                      }}
+                    >
+                      <ListItemText primary={column.name} />
+                    </ListItem>
+                  );
+                })}
             </List>
           </Box>
         </Paper>

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

@@ -241,8 +241,8 @@ const FilterForm = ({
           columnsData={columnsData}
           tableStates={tableStates}
           setSelectedFilters={setSelectedFilters}
-          // searchTerm={searchTerm}
-          // setSearchTerm={setSearchTerm}
+          searchTerm={searchTerm}
+          setSearchTerm={setSearchTerm}
         />
 
         {/* Render search input */}
@@ -325,6 +325,23 @@ const FilterForm = ({
                 <Box>
                   {filter.data_type === "text" ? (
                     <FormTextfield filter={filter} control={control} />
+                  ) : filter.data_type === "year" ? (
+                    <FormDatePicker
+                      filter={filter}
+                      control={control}
+                      views={["year"]}
+                      sx={{
+                        "& .MuiOutlinedInput-root": {
+                          borderRadius: "6px",
+                          fontSize: "14px",
+                          bgcolor: "#ffffff",
+                          "& fieldset": { borderColor: "#c1c1c1" },
+                          "&.Mui-focused fieldset": {
+                            borderColor: "#7A5AF8",
+                          },
+                        },
+                      }}
+                    />
                   ) : filter.data_type === "number" ? (
                     <FormTextfield filter={filter} control={control} />
                   ) : filter.data_type === "date" ? (

package/src/libs/hooks/useCraftTable.tsx

@@ -14,7 +14,7 @@ import {
 
 export function useCraftTable(paginationPageSize: number = 25) {
   const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 1,
+    pageIndex: 0,
     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 = "NTM";
+export const ENTITY_TYPE = "AYR";

package/src/types/filter.ts

@@ -19,6 +19,7 @@ export type FilterInputDataTypes =
   | "select"
   | "multiselect"
   | "date"
+  | "year"
   | "number";
 
 export interface FilterColumnsListProps {