rez-table-listing-mui 1.0.32 → 1.0.34

package/src/App.tsx

@@ -16,15 +16,17 @@ import {
   useFetchData,
 } from "./libs/hooks/useEntityTableHooks";
 import LoginButton from "./components/login";
+import { CraftTableFilter } from ".";
 // import { ENTITY_TYPE } from "./libs/utils/common";
 
 function App() {
-  const [mockLoading, setMockLoading] = useState<boolean>(true);
+  // const [mockLoading, setMockLoading] = useState<boolean>(true);
   // const [jsonData] = useState<any[]>([]);
   const [columns, setColumns] = useState<any[]>([]);
+  const [showFilter, setShowFilter] = useState<boolean>(true);
   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 UPR BRD
 
   const [selectedTab, setSelectedTab] = useState("ALL");
 
@@ -33,32 +35,27 @@ function App() {
 
   const { defaultColumns } = useDefaultColumns();
 
-  const { metaQuery } = useFetchData("NTM");
+  const { metaQuery } = useFetchData("UPR");
   const { detailsQuery } = useDetailsQueryAPI(
     filterMaster?.saved_filters?.selectedId
       ? filterMaster?.saved_filters?.selectedId
       : metaQuery?.data?.default_filter?.value
   );
 
-  //API CALL FOR SAVED FILTER
-  const { savedMutation } = useSavedFilterAPI();
-
-  //API FOR DELETING FILTER
-  const { deleteMutation } = useDeleteFilterAPI();
-
-  //API FOR UPDATE FILTER
-  const { updateMutation } = useUpdateFilterAPI();
+  const { savedMutation } = useSavedFilterAPI(); //API CALL FOR SAVED FILTER
+  const { deleteMutation } = useDeleteFilterAPI(); //API FOR DELETING FILTER
+  const { updateMutation } = useUpdateFilterAPI(); //API FOR UPDATE FILTER
 
   const { dropdownData } = useCommonDropdownAPI(metaQuery.data);
 
   useEffect(() => {
-    setTimeout(() => {
-      setMockLoading(false);
-    }, 1000);
+    // setTimeout(() => {
+    //   setMockLoading(false);
+    // }, 1000);
 
     const fetchMeta = async () => {
       try {
-        const { res } = await entityTableMetaMaster("NTM");
+        const { res } = await entityTableMetaMaster("UPR");
         setColumns(res);
       } catch (error) {
         console.error("Failed to fetch metadata:", error);
@@ -77,7 +74,7 @@ function App() {
   const { tableData, isTableDataPending } = useEntityTableAPI({
     page: 0,
     size: 50,
-    entity_type: "NTM",
+    entity_type: "UPR",
     tabs: {
       columnName: "status",
       sortBy: "ASC",
@@ -156,7 +153,7 @@ function App() {
     const payload = {
       name,
       is_default: false,
-      mapped_entity_type: "NTM", // For that entity type
+      mapped_entity_type: "UPR", // For that entity type
       status: "ACTIVE",
       entity_type: "SFM", // FIXED entity type
       filterDetails: quickFilter,
@@ -171,7 +168,7 @@ function App() {
       name: filterToDelete?.label,
       id: filterToDelete?.value,
       is_default: false,
-      mapped_entity_type: "NTM",
+      mapped_entity_type: "UPR",
       status: "INACTIVE",
       entity_type: "SFM",
     };
@@ -192,7 +189,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: "UPR",
       status: "ACTIVE",
       entity_type: "SFM",
       filterDetails: quickFilter,
@@ -237,16 +234,7 @@ function App() {
           searchValue: searchTerm,
           onSearchChange: (val) => setSearchTerm(val),
           showFilterToggle: true,
-          filterOptions: {
-            tableStates: tableStates,
-            tableData: tableData,
-            columnsData: metaQuery.data || [],
-            defaultFilters: detailsQuery.data || [],
-            dropdownData: dropdownData || [],
-            onDeleteFilter: handleRemoveFilter,
-            onSaveFilter: handleSaveFilter,
-            onUpdateFilter: handleUpdateFilter,
-          },
+          onFilterButtonClick: () => setShowFilter(!showFilter),
         }}
         paginationOptions={{
           showPagination: true,
@@ -258,6 +246,20 @@ function App() {
           renderStatus: handleRenderStatus,
           renderAction: handleRenderAction,
         }}
+        filterOptions={{
+          show: showFilter,
+          component: (
+            <CraftTableFilter
+              tableStates={tableStates}
+              columnsData={metaQuery.data || []}
+              dropdownData={dropdownData || []}
+              onDeleteFilter={handleRemoveFilter}
+              onSaveFilter={handleSaveFilter}
+              onUpdateFilter={handleUpdateFilter}
+              onClose={() => setShowFilter(false)}
+            />
+          ),
+        }}
       />
     </div>
   );

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

@@ -1,6 +1,19 @@
-import { Box } from "@mui/material";
-import { AttributesFilterProps } from "../../../types/filter";
-import SelectAttribute from "./forms/components/Attributes-select";
+import {
+  Box,
+  FormControl,
+  FormControlLabel,
+  MenuItem,
+  Radio,
+  RadioGroup,
+  Select,
+  SelectChangeEvent,
+} from "@mui/material";
+import {
+  AttributesFilterProps,
+  FilterMasterStateProps,
+} from "../../../types/filter";
+import CustomSearch from "./search";
+import { useMemo } from "react";
 
 const AttributesFilter = ({
   columnsData,
@@ -10,17 +23,177 @@ const AttributesFilter = ({
   setSearchTerm,
   tabValue,
 }: AttributesFilterProps) => {
+  const { filterMaster, setFilterMaster, filters, setFilters } = tableStates;
+
+  const selectedAttribute = filterMaster?.attributes?.selected;
+
+  // Get the current filter value to set radio button state
+  const currentFilterValue = useMemo(() => {
+    if (!selectedAttribute) return "";
+
+    const matchingColumn = columnsData.column_list.find(
+      (column) => column.datasource_list === selectedAttribute
+    );
+
+    if (!matchingColumn) return "";
+
+    const existingFilter = filters.find(
+      (filter) => filter.filter_attribute === matchingColumn.attribute_key
+    );
+
+    return existingFilter?.filter_value || "";
+  }, [selectedAttribute, filters, columnsData]);
+
+  const handleSelectChange = (event: SelectChangeEvent) => {
+    const attributeKey = event.target.value as string;
+
+    setFilterMaster(
+      (prev) =>
+        ({
+          ...prev,
+          attributes: {
+            ...prev?.attributes,
+            selected: attributeKey,
+            radio: "", // Reset radio selection when changing attribute
+          },
+        } as FilterMasterStateProps)
+    );
+  };
+
+  const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.preventDefault();
+
+    const selectedValue = event.target.value;
+
+    setFilterMaster(
+      (prev) =>
+        ({
+          ...prev,
+          attributes: {
+            ...prev?.attributes,
+            radio: selectedValue,
+          },
+          activeFilterTabIndex: tabValue,
+        } as FilterMasterStateProps)
+    );
+
+    const selectedAttribute = filterMaster?.attributes.selected;
+    if (selectedAttribute) {
+      const matchingColumn = columnsData.column_list.find(
+        (column) => column.datasource_list === selectedAttribute
+      );
+      if (matchingColumn) {
+        const defaultOperator =
+          columnsData.operation_list[matchingColumn.data_type]?.[0]?.value ||
+          "equals";
+        const newFilter = {
+          filter_attribute: matchingColumn.attribute_key,
+          filter_operator: defaultOperator,
+          filter_value: selectedValue,
+        };
+
+        setFilters([newFilter]);
+      }
+    }
+  };
+
+  const selectedAttributeOptions = useMemo(() => {
+    const selected = columnsData.column_list.find(
+      (col) => col.datasource_list === selectedAttribute
+    )?.attribute_key;
+
+    return selected ? dropdownData[selected] : [];
+  }, [selectedAttribute, dropdownData]);
+
   return (
-    <Box>
-      {/* Render select Attributes */}
-      <SelectAttribute
-        columnsData={columnsData}
-        tableStates={tableStates}
-        dropdownData={dropdownData}
-        searchTerm={searchTerm}
-        setSearchTerm={setSearchTerm}
-        tabValue={tabValue}
-      />
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "1.25rem",
+      }}
+    >
+      <FormControl fullWidth size="small">
+        <Select
+          value={selectedAttribute || ""}
+          onChange={handleSelectChange}
+          displayEmpty
+          renderValue={(selected) => {
+            if (!selected) {
+              return <span>Select Attribute</span>;
+            }
+            return columnsData?.column_list?.find(
+              (col) => col.datasource_list === selected
+            )?.name;
+          }}
+          sx={{
+            "& .MuiOutlinedInput-root": {
+              borderRadius: "6px",
+              fontSize: "14px",
+              bgcolor: "#fafafa",
+              "& fieldset": {
+                borderColor: "#7a5af8 !important",
+              },
+              "&:hover fieldset": {
+                borderColor: "#7a5af8 !important",
+              },
+              "&.Mui-focused fieldset": {
+                borderColor: "#7a5af8 !important",
+                boxShadow: "none",
+              },
+            },
+            "& .MuiSelect-select": {
+              padding: "8px 14px",
+            },
+          }}
+        >
+          {columnsData?.column_list
+            ?.filter((column) => column.data_type.includes("select"))
+            .map((column, index) => (
+              <MenuItem
+                key={index}
+                value={column.datasource_list}
+                disabled={column.datasource_list === selectedAttribute}
+              >
+                {column.name}
+              </MenuItem>
+            ))}
+        </Select>
+      </FormControl>
+
+      <Box>
+        {selectedAttribute && (
+          <CustomSearch value={searchTerm} onChange={setSearchTerm} />
+        )}
+
+        {dropdownData && (
+          <Box sx={{ mt: 2 }}>
+            <FormControl>
+              <RadioGroup
+                onChange={handleRadioChange}
+                value={currentFilterValue} // Set the value from current filter
+              >
+                {selectedAttributeOptions
+                  ?.filter((option) => {
+                    if (!searchTerm) return true;
+
+                    return option.label
+                      .toLowerCase()
+                      .includes(searchTerm.toLowerCase());
+                  })
+                  .map((option) => (
+                    <FormControlLabel
+                      key={option.value}
+                      value={option.value}
+                      control={<Radio />}
+                      label={option.label}
+                    />
+                  ))}
+              </RadioGroup>
+            </FormControl>
+          </Box>
+        )}
+      </Box>
     </Box>
   );
 };

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

@@ -6,20 +6,24 @@ 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">;
+  onValueChange?: () => void;
+};
 
+const FormDatePicker = ({
+  filter,
+  control,
+  sx,
+  views = ["day", "month", "year"], // default to full date picker
+  onValueChange,
+}: 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 +33,40 @@ 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);
+              onValueChange?.();
+            }}
+            format={
+              views?.length === 1 && views[0] === "year" ? "yyyy" : "dd-MM-yyyy"
+            }
+            sx={{
+              "& .MuiOutlinedInput-input": {
+                padding: "12px 20px",
+              },
+              ...sx,
             }}
-            format="dd-MM-yyyy"
             slotProps={{
               textField: {
                 size: "small",
                 fullWidth: true,
-                placeholder: "DD-MM-YYYY",
+                placeholder:
+                  views?.length === 1 && views[0] === "year"
+                    ? "YYYY"
+                    : "DD-MM-YYYY",
               },
             }}
           />
@@ -58,3 +77,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/Dropdown.tsx

@@ -11,6 +11,7 @@ interface FormDropdownProps {
   }[];
   isLoading?: boolean;
   sx?: SxProps<Theme>;
+  onValueChange?: () => void;
 }
 
 const FormDropdown = ({
@@ -19,6 +20,7 @@ const FormDropdown = ({
   dropdownList,
   isLoading = false,
   sx,
+  onValueChange,
 }: FormDropdownProps) => {
   return (
     <Controller
@@ -36,7 +38,7 @@ const FormDropdown = ({
               border: "none",
               boxShadow: "none",
               "& .MuiSelect-icon": {
-                top: "45%", // move up
+                top: "45%",
                 transform: "translateY(-50%)",
                 "& .MuiOutlinedInput-input": {
                   padding: "12px 20px",
@@ -45,13 +47,16 @@ const FormDropdown = ({
             }}
             disabled={isLoading}
             disableUnderline
+            onChange={(e) => {
+              field.onChange(e); // ✅ sync with RHF
+              onValueChange?.(); // ✅ trigger debounce
+            }}
           >
-            {dropdownList &&
-              dropdownList.map((item, idx) => (
-                <MenuItem key={idx} value={item.value}>
-                  {item.label}
-                </MenuItem>
-              ))}
+            {dropdownList?.map((item, idx) => (
+              <MenuItem key={idx} value={item.value}>
+                {item.label}
+              </MenuItem>
+            ))}
           </Select>
         </FormControl>
       )}

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

@@ -5,7 +5,6 @@ import {
   List,
   ListItem,
   Paper,
-  ListSubheader,
   ListItemText,
 } from "@mui/material";
 import { useState, useRef } from "react";
@@ -22,12 +21,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,
@@ -112,11 +115,10 @@ const FilterCriteria = ({
       {showFilterOptions && (
         <Paper
           sx={{
-            mt: 2,
             width: filterButtonRef.current?.offsetWidth || 360, // Dynamic width based on button
             p: 1,
-            maxHeight: "300px",
-            overflowY: "auto",
+            mt: 2,
+            // overflowY: "auto",
             cursor: "pointer",
             position: "absolute",
             zIndex: 1300,
@@ -124,46 +126,51 @@ const FilterCriteria = ({
         >
           <Box
             sx={{
-              maxHeight: "300px", // Adjust height as needed
               overflowY: "auto", // Enable vertical scrolling
               width: "100%", // Adjust width as needed
             }}
           >
-            <List
-              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>
-                );
-              })}
+            <List>
+              <CustomSearch
+                placeholder="Filter by..."
+                value={searchTerm}
+                onChange={setSearchTerm}
+              />
+
+              <Box
+                sx={{
+                  my: 2,
+                  maxHeight: `calc(100vh - 360px)`,
+                  overflowY: "auto",
+                  transition: "all 0.4s ease-in-out",
+                }}
+              >
+                {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>
+                    );
+                  })}
+              </Box>
             </List>
           </Box>
         </Paper>

package/src/components/filter/components/forms/components/Multi-Select.tsx

@@ -8,11 +8,13 @@ const FormMultiSelect = ({
   control,
   dropdownData,
   sx,
+  onValueChange,
 }: {
   filter: UpdatedFilterStateProps;
   control: any;
   dropdownData: Record<string, DropdownOption[]>;
   sx?: SxProps<Theme>;
+  onValueChange?: () => void;
 }) => {
   const options = dropdownData[filter.filter_attribute] || [];
 
@@ -32,7 +34,10 @@ const FormMultiSelect = ({
             }}
             multiple
             value={field.value || []}
-            onChange={(e) => field.onChange(e.target.value)}
+            onChange={(e) => {
+              field.onChange(e.target.value);
+              onValueChange?.();
+            }}
             renderValue={(selected: string[]) =>
               selected
                 .map(