rez-table-listing-mui 0.0.26 → 1.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "0.0.26",
+  "version": "1.0.27",
   "type": "module",
   "description": "A rez table listing component built on TanStack Table",
   "main": "dist/index.js",
@@ -16,14 +16,17 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "uat": "vite --mode uat",
+    "build:uat": "vite build --mode uat"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@tanstack/react-table": "^8.20.5"
+    "@tanstack/react-table": "^8.20.5",
+    "@tanstack/react-query": "^5.76.1"
   },
   "peerDependencies": {
     "@dnd-kit/core": "^6.1.0",
@@ -31,14 +34,30 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@tanstack/react-table": "^8.20.5",
+    "@tanstack/react-query": "^5.76.1",
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.1.0",
+    "@mui/material": "^7.0.2",
+    "@date-io/date-fns": "^3.2.1",
+    "@faker-js/faker": "^9.7.0",
+    "@mui/lab": "^7.0.0-beta.12",
+    "@mui/x-date-pickers": "^8.4.0",
+    "axios": "^1.9.0",
+    "date-fns": "^4.1.0",
+    "moment": "^2.30.1",
+    "papaparse": "^5.5.2",
+    "react-hook-form": "^7.56.4",
+    "uuid": "^11.1.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.2",
+    "@types/papaparse": "^5.3.15",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^8.17.0",
@@ -55,6 +74,7 @@
     "sass": "^1.85.0",
     "sass-embedded": "^1.82.0",
     "typescript": "^5.7.2",
-    "vite": "^6.0.2"
+    "vite": "^6.0.2",
+    "vite-plugin-checker": "^0.9.3"
   }
 }

package/src/App.tsx

@@ -49,11 +49,6 @@ function App() {
   //API FOR UPDATE FILTER
   const { updateMutation } = useUpdateFilterAPI();
 
-  // const { dropdownData } = useCommonDropdownAPI(
-  //   metaQuery.data,
-  //   tableStates.filterMaster?.attributes?.selected
-  // );
-
   const { dropdownData } = useCommonDropdownAPI(metaQuery.data);
 
   useEffect(() => {
@@ -79,7 +74,7 @@ function App() {
 
   const enableServerSideSorting = false;
 
-  const { tableData } = useEntityTableAPI({
+  const { tableData, isTableDataPending } = useEntityTableAPI({
     page: 0,
     size: 50,
     entity_type: "UPR",
@@ -224,8 +219,8 @@ function App() {
           enableServerSideSorting: enableServerSideSorting,
         }}
         loadingOptions={{
-          isLoading: mockLoading,
-          loaderText: "Loading, Please wait...",
+          isLoading: isTableDataPending || detailsQuery.isPending,
+          // loaderText: "Loading, Please wait...",
         }}
         topbarOptions={{
           tableStates,
@@ -244,9 +239,9 @@ function App() {
           showFilterToggle: true,
           filterOptions: {
             tableStates: tableStates,
+            tableData: tableData,
             columnsData: metaQuery.data || [],
             defaultFilters: detailsQuery.data || [],
-            tableData: tableData,
             dropdownData: dropdownData || [],
             onDeleteFilter: handleRemoveFilter,
             onSaveFilter: handleSaveFilter,

package/src/assets/svg.tsx

@@ -862,3 +862,35 @@ export const ChevronDownIcon = () => {
     </svg>
   );
 };
+export const CheckBox = () => {
+  return (
+    <svg
+      width="13"
+      height="14"
+      viewBox="0 0 13 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.72054 8.43116L4.17187 6.88233C4.07954 6.7901 3.96349 6.74288 3.82371 6.74066C3.68404 6.73855 3.56587 6.78577 3.46921 6.88233C3.37265 6.97899 3.32437 7.0961 3.32437 7.23366C3.32437 7.37121 3.37265 7.48833 3.46921 7.58499L5.29871 9.41449C5.41926 9.53494 5.55987 9.59516 5.72054 9.59516C5.88121 9.59516 6.02182 9.53494 6.14237 9.41449L9.85137 5.70549C9.9436 5.61316 9.99082 5.4971 9.99304 5.35733C9.99515 5.21766 9.94793 5.09949 9.85137 5.00283C9.75471 4.90627 9.6376 4.85799 9.50004 4.85799C9.36249 4.85799 9.24537 4.90627 9.14871 5.00283L5.72054 8.43116ZM6.66787 13.3337C5.79187 13.3337 4.96848 13.1674 4.19771 12.835C3.42693 12.5025 2.75648 12.0514 2.18637 11.4815C1.61626 10.9116 1.16487 10.2414 0.832207 9.47099C0.499652 8.70055 0.333374 7.87738 0.333374 7.00149C0.333374 6.12549 0.499596 5.3021 0.832041 4.53133C1.16449 3.76055 1.61565 3.0901 2.18554 2.51999C2.75543 1.94988 3.4256 1.49849 4.19604 1.16583C4.96649 0.83327 5.78965 0.666992 6.66554 0.666992C7.54154 0.666992 8.36493 0.833214 9.13571 1.16566C9.90649 1.4981 10.5769 1.94927 11.147 2.51916C11.7172 3.08905 12.1685 3.75921 12.5012 4.52966C12.8338 5.3001 13 6.12327 13 6.99916C13 7.87516 12.8338 8.69855 12.5014 9.46933C12.1689 10.2401 11.7178 10.9105 11.1479 11.4807C10.578 12.0508 9.90782 12.5022 9.13737 12.8348C8.36693 13.1674 7.54376 13.3337 6.66787 13.3337Z"
+        fill="#16B364"
+      />
+    </svg>
+  );
+};
+export const CrossBox = () => {
+  return (
+    <svg
+      width="13"
+      height="14"
+      viewBox="0 0 13 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.66659 7.70283L8.71525 9.75166C8.80759 9.84388 8.92364 9.8911 9.06342 9.89333C9.20309 9.89544 9.32125 9.84821 9.41792 9.75166C9.51447 9.65499 9.56275 9.53788 9.56275 9.40033C9.56275 9.26277 9.51447 9.14566 9.41792 9.04899L7.36909 7.00033L9.41792 4.95166C9.51014 4.85933 9.55736 4.74327 9.55959 4.60349C9.5617 4.46383 9.51447 4.34566 9.41792 4.24899C9.32125 4.15244 9.20414 4.10416 9.06659 4.10416C8.92903 4.10416 8.81192 4.15244 8.71525 4.24899L6.66659 6.29783L4.61792 4.24899C4.52559 4.15677 4.40953 4.10955 4.26975 4.10733C4.13009 4.10521 4.01192 4.15244 3.91525 4.24899C3.8187 4.34566 3.77042 4.46277 3.77042 4.60033C3.77042 4.73788 3.8187 4.85499 3.91525 4.95166L5.96409 7.00033L3.91525 9.04899C3.82303 9.14133 3.77581 9.25738 3.77359 9.39716C3.77147 9.53683 3.8187 9.65499 3.91525 9.75166C4.01192 9.84821 4.12903 9.89649 4.26659 9.89649C4.40414 9.89649 4.52125 9.84821 4.61792 9.75166L6.66659 7.70283ZM6.66775 13.3337C5.79175 13.3337 4.96836 13.1674 4.19759 12.835C3.42681 12.5025 2.75636 12.0514 2.18625 11.4815C1.61614 10.9116 1.16475 10.2414 0.832085 9.47099C0.49953 8.70055 0.333252 7.87738 0.333252 7.00149C0.333252 6.12549 0.499474 5.3021 0.831919 4.53133C1.16436 3.76055 1.61553 3.0901 2.18542 2.51999C2.75531 1.94988 3.42547 1.49849 4.19592 1.16583C4.96636 0.83327 5.78953 0.666992 6.66542 0.666992C7.54142 0.666992 8.36481 0.833214 9.13559 1.16566C9.90636 1.4981 10.5768 1.94927 11.1469 2.51916C11.717 3.08905 12.1684 3.75921 12.5011 4.52966C12.8336 5.3001 12.9999 6.12327 12.9999 6.99916C12.9999 7.87516 12.8337 8.69855 12.5013 9.46933C12.1688 10.2401 11.7176 10.9105 11.1478 11.4807C10.5779 12.0508 9.9077 12.5022 9.13725 12.8348C8.36681 13.1674 7.54364 13.3337 6.66775 13.3337Z"
+        fill="#F63D68"
+      />
+    </svg>
+  );
+};

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

@@ -8,6 +8,7 @@ const AttributesFilter = ({
   dropdownData,
   searchTerm,
   setSearchTerm,
+  tabValue,
 }: AttributesFilterProps) => {
   return (
     <Box>
@@ -18,6 +19,7 @@ const AttributesFilter = ({
         dropdownData={dropdownData}
         searchTerm={searchTerm}
         setSearchTerm={setSearchTerm}
+        tabValue={tabValue}
       />
     </Box>
   );

package/src/components/filter/components/forms/components/Attributes-select.tsx

@@ -21,11 +21,29 @@ const SelectAttribute = ({
   dropdownData,
   searchTerm = "",
   setSearchTerm,
+  tabValue,
 }: AttributesFilterSelectProps) => {
   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;
 
@@ -36,6 +54,7 @@ const SelectAttribute = ({
           attributes: {
             ...prev?.attributes,
             selected: attributeKey,
+            radio: "", // Reset radio selection when changing attribute
           },
         } as FilterMasterStateProps)
     );
@@ -45,6 +64,7 @@ const SelectAttribute = ({
     event.preventDefault();
 
     const selectedValue = event.target.value;
+
     setFilterMaster(
       (prev) =>
         ({
@@ -53,6 +73,7 @@ const SelectAttribute = ({
             ...prev?.attributes,
             radio: selectedValue,
           },
+          activeFilterTabIndex: tabValue,
         } as FilterMasterStateProps)
     );
 
@@ -71,19 +92,7 @@ const SelectAttribute = ({
           filter_value: selectedValue,
         };
 
-        const existingFilterIndex = filters.findIndex(
-          (filter) => filter.filter_attribute === matchingColumn.attribute_key
-        );
-
-        let updatedFilters;
-        if (existingFilterIndex !== -1) {
-          updatedFilters = [...filters];
-          updatedFilters[existingFilterIndex] = newFilter;
-        } else {
-          updatedFilters = [...filters, newFilter];
-        }
-
-        setFilters(updatedFilters);
+        setFilters([newFilter]);
       }
     }
   };
@@ -102,7 +111,7 @@ const SelectAttribute = ({
         <Select
           value={selectedAttribute || ""}
           onChange={handleSelectChange}
-          displayEmpty // Ensures the placeholder is shown when no value is selected
+          displayEmpty
           renderValue={(selected) => {
             if (!selected) {
               return <span>Select Attribute</span>;
@@ -152,7 +161,10 @@ const SelectAttribute = ({
       {dropdownData && (
         <Box sx={{ mt: 2 }}>
           <FormControl>
-            <RadioGroup onChange={handleRadioChange}>
+            <RadioGroup
+              onChange={handleRadioChange}
+              value={currentFilterValue} // Set the value from current filter
+            >
               {selectedAttributeOptions
                 ?.filter((option) => {
                   if (!searchTerm) return true;

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

@@ -90,14 +90,25 @@ const FilterForm = ({
     watch,
     reset,
     formState: { isDirty },
+    unregister,
+    setValue,
   } = useForm<FormValues>({
     mode: "onChange",
     defaultValues,
+    resetOptions: {
+      keepDirtyValues: false, // Keep modified values when resetting
+      keepErrors: false, // Keep form errors when resetting
+    },
   });
 
   // Watch for form changes
   const formValues = watch();
 
+  // Reset form when filters change
+  useEffect(() => {
+    reset(defaultValues);
+  }, [selectedFilters, filterName]);
+
   // Effect to update filters when form values change
   useEffect(() => {
     if (isDirty) {
@@ -107,34 +118,33 @@ const FilterForm = ({
             value: string | string[];
             operator: string;
           };
-          // Only update if the value or operator has actually changed
-          if (
-            filterValue.value !== filter.filter_value ||
-            filterValue.operator !== filter.filter_operator
-          ) {
-            return {
-              ...filter,
-              filter_value: filterValue.value,
-              filter_operator: filterValue.operator,
-            };
-          }
+
+          return {
+            ...filter,
+            filter_value: filterValue.value,
+            filter_operator: filterValue.operator,
+          };
         }
         return filter;
       });
 
-      // Only update if there are actual changes
-      const hasChanges = updatedFilters.some(
-        (filter, index) =>
-          filter.filter_value !== selectedFilters[index].filter_value ||
-          filter.filter_operator !== selectedFilters[index].filter_operator
-      );
-
-      if (hasChanges) {
-        setSelectedFilters(updatedFilters);
-        setFilters(updatedFilters);
-      }
+      setSelectedFilters(updatedFilters);
+      setFilters(updatedFilters);
     }
-  }, [formValues, selectedFilters]);
+  }, [formValues]);
+
+  // Cleanup effect
+  useEffect(() => {
+    return () => {
+      // Reset form and clear any lingering state
+      reset(defaultValues);
+      selectedFilters.forEach((filter) => {
+        if (filter.name) {
+          unregister(filter.name);
+        }
+      });
+    };
+  }, []);
 
   const editModeStylingBorder = {
     border: "1px solid #c5c5c5",
@@ -284,7 +294,17 @@ const FilterForm = ({
                   />
                   <IconButton
                     sx={{ marginLeft: "auto" }}
-                    onClick={() => handleRemoveFilter(filter.filter_attribute)}
+                    onClick={() => {
+                      const fieldName = `${filter.name}.value`;
+                      unregister(fieldName); // ✅ Unregister field manually
+
+                      // ✅ Trigger dirty manually (optional, but safe fallback)
+                      setValue("filterName", formValues.filterName, {
+                        shouldDirty: true,
+                      });
+
+                      handleRemoveFilter(filter.filter_attribute);
+                    }}
                     size="small"
                   >
                     <CloseIcon />
@@ -408,7 +428,7 @@ const FilterForm = ({
               },
             }}
             // onClick={() => setSaveFilterModalOpen(true)}
-            disabled={editMode && !isDirty}
+            // disabled={editMode && !isDirty}
             onClick={() => {
               setSavedFilterModalOpen && setSavedFilterModalOpen(true);
             }}

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

@@ -1,7 +1,10 @@
 import { Box } from "@mui/material";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import FilterForm from "./forms";
-import { FilterFormComponentProps } from "../../../types/filter";
+import {
+  FilterFormComponentProps,
+  FilterMasterStateProps,
+} from "../../../types/filter";
 
 const MainFilter = ({
   columnsData,
@@ -13,7 +16,17 @@ const MainFilter = ({
 }: FilterFormComponentProps) => {
   const [searchTerm, setSearchTerm] = useState<string>("");
 
-  const { setFilters } = tableStates;
+  const { setFilters, setFilterMaster } = tableStates;
+
+  useEffect(() => {
+    setFilterMaster(
+      (prev) =>
+        ({
+          ...prev,
+          activeFilterTabIndex: 0,
+        } as FilterMasterStateProps)
+    );
+  }, []);
 
   const handleRemoveFilter = (filter_attribute: string) => {
     setFilters((prev) =>

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

@@ -4,6 +4,7 @@ import BackArrow from "@mui/icons-material/ArrowBackIosNew";
 import {
   FilterColumnsDataProps,
   FilterDropdownDataProps,
+  FilterMasterStateProps,
   UpdatedFilterStateProps,
 } from "../../../types/filter";
 import { CraftTableOptionsProps } from "../../../types/table-options";
@@ -35,7 +36,7 @@ const SavedFilterEditComponent = ({
   setSavedFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
   setDeleteFilterModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
-  const { setFilters } = tableStates;
+  const { setFilters, setFilterMaster } = tableStates;
 
   const handleRemoveFilter = (filter_attribute: string) => {
     setFilters((prev) =>
@@ -64,6 +65,17 @@ const SavedFilterEditComponent = ({
           }}
           onClick={() => {
             setEditMode && setEditMode(false);
+            setFilters([]);
+            setFilterMaster(
+              (prev) =>
+                ({
+                  ...prev,
+                  saved_filters: {
+                    ...prev?.saved_filters,
+                    selectedId: "",
+                  },
+                } as FilterMasterStateProps)
+            );
           }}
         >
           <BackArrow sx={{ width: "13px", height: "13px" }} />
@@ -73,12 +85,6 @@ const SavedFilterEditComponent = ({
         </Box>
       </Box>
 
-      {/* <FilterCriteria
-        columnsData={columnsData}
-        tableStates={tableStates}
-        setSelectedFilters={setSelectedFilters}
-      /> */}
-
       {/* Render selectedFilters state */}
       <FilterForm
         selectedFilters={selectedFilters}

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

@@ -26,6 +26,7 @@ const SavedFilter = ({
   setEditMode,
   setDeleteFilterModalOpen,
   setSavedFilterModalOpen,
+  tabValue,
 }: FilterFormComponentProps) => {
   const { setFilterMaster, setFilterToDelete } = tableStates;
   const [searchTerm, setSearchTerm] = useState<string>("");
@@ -60,6 +61,7 @@ const SavedFilter = ({
             selectedId: filter.value,
             selectedName: filter.label,
           },
+          activeFilterTabIndex: tabValue,
         } as FilterMasterStateProps)
     );
 
@@ -126,7 +128,7 @@ const SavedFilter = ({
       {/* Render search input and list */}
       {!editMode && renderList()}
 
-      {editMode && (
+      {editMode ? (
         <SavedFilterEditComponent
           columnsData={columnsData}
           dropdownData={dropdownData}
@@ -140,7 +142,7 @@ const SavedFilter = ({
           setSavedFilterModalOpen={setSavedFilterModalOpen}
           setDeleteFilterModalOpen={setDeleteFilterModalOpen}
         />
-      )}
+      ) : null}
     </Box>
   );
 };

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

@@ -1,4 +1,6 @@
-import { Tabs, Tab, TabsProps } from "@mui/material";
+import React, { useState } from "react";
+import { Tabs, Tab, TabsProps, Box } from "@mui/material";
+import { CheckBox, CrossBox } from "../../../../assets/svg";
 
 export interface TabItem {
   label: string;
@@ -6,14 +8,22 @@ export interface TabItem {
 
 interface StyledTabsProps extends TabsProps {
   tabItems: TabItem[];
+  activeFilterIndex: number;
 }
 
 const CustomTabs = ({
   value,
   onChange,
   tabItems,
+  activeFilterIndex = -1,
   ...tabsProps
 }: StyledTabsProps) => {
+  const [hoveredTab, setHoveredTab] = useState<number | null>(null);
+
+  const handleCrossClick = (idx: number) => (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
   return (
     <Tabs
       value={value}
@@ -28,23 +38,46 @@ const CustomTabs = ({
       }}
       {...tabsProps}
     >
-      {tabItems.map((tab, idx) => (
-        <Tab
-          key={idx}
-          label={tab.label}
-          sx={{
-            fontSize: "14px",
-            textTransform: "capitalize",
-            color: "#888888",
-            fontWeight: "normal",
-            whiteSpace: "nowrap",
-            "&.Mui-selected": {
-              color: "black",
-              fontWeight: "bold",
-            },
-          }}
-        />
-      ))}
+      {tabItems.map((tab, idx) => {
+        const isActive = activeFilterIndex === idx;
+        const isHovered = hoveredTab === idx;
+
+        return (
+          <Tab
+            key={idx}
+            label={
+              <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
+                <span>{tab.label}</span>
+                {isActive && (
+                  <Box
+                    onMouseEnter={() => setHoveredTab(idx)}
+                    onMouseLeave={() => setHoveredTab(null)}
+                    sx={{
+                      display: "flex",
+                      alignItems: "center",
+                      cursor: isHovered ? "pointer" : "default",
+                    }}
+                    onClick={isHovered ? handleCrossClick(idx) : undefined}
+                  >
+                    {isHovered ? <CrossBox /> : <CheckBox />}
+                  </Box>
+                )}
+              </Box>
+            }
+            sx={{
+              fontSize: "14px",
+              textTransform: "capitalize",
+              color: "#888888",
+              fontWeight: "normal",
+              whiteSpace: "nowrap",
+              "&.Mui-selected": {
+                color: "black",
+                fontWeight: "bold",
+              },
+            }}
+          />
+        );
+      })}
     </Tabs>
   );
 };

package/src/components/filter/index.tsx

@@ -32,7 +32,7 @@ const FilterDrawer = ({
 
   const [searchTerm, setSearchTerm] = useState<string>("");
 
-  const { filters, filterToDelete } = tableStates;
+  const { filters, filterToDelete, filterMaster } = tableStates;
 
   const filterNameInput: InputField = {
     label: "Filter Name",
@@ -126,6 +126,7 @@ const FilterDrawer = ({
           value={tabValue}
           onChange={handleTabChange}
           tabItems={tabItems}
+          activeFilterIndex={filterMaster?.activeFilterTabIndex ?? 0}
         />
 
         <Box>
@@ -154,6 +155,7 @@ const FilterDrawer = ({
                 setDeleteFilterModalOpen={setDeleteFilterModalOpen}
                 setSavedFilterModalOpen={setSaveFilterModalOpen}
                 dropdownData={dropdownData}
+                tabValue={tabValue}
               />
             )}
           </CustomTabPanel>
@@ -166,6 +168,7 @@ const FilterDrawer = ({
                 dropdownData={dropdownData}
                 searchTerm={searchTerm}
                 setSearchTerm={setSearchTerm}
+                tabValue={tabValue}
               />
             )}
           </CustomTabPanel>