rez-table-listing-mui 0.0.25 → 0.0.27

package/src/components/table-head.tsx

@@ -17,7 +17,6 @@ import {
 import DraggableTableHeader from "./table-head-dnd-cell";
 import TableHeadPin from "./table-head-pin";
 import Checkbox from "./inputs/checkbox";
-import TableHeadPopover from "./table-head-popover";
 
 interface TableHeadProps<T> {
   table: Table<T>;
@@ -41,15 +40,6 @@ function TableHead<T>({
 
   // Popover
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-  const [wrap, setWrap] = useState(false);
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const toggleWrap = () => {
-    setWrap((prev) => !prev);
-  };
 
   const handleHover = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl((prev) => (prev ? null : event.currentTarget));

package/src/components/topbar/index.scss

@@ -126,3 +126,8 @@
     }
   }
 }
+
+.MuiDrawer-root {
+  display: block !important;
+  transform: none !important;
+}

package/src/components/topbar/index.tsx

@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from "react";
 import {
   ChangeLayoutIcon,
   SortingIcon,
-  CustomizationIcon,
+  FilterationIcon,
   HideColumnIcon,
 } from "../../assets/svg";
 import { Popover } from "@mui/material";
@@ -17,9 +17,11 @@ import SortPopover from "../sorting-modal.tsx";
 import ColumnToggle from "../column-visibility-modal/index.tsx";
 import { CraftTableOptionsProps } from "../../types/table-options.ts";
 import TableSearch from "../search/index.tsx";
+import FilterDrawer from "../filter/index.tsx";
 
 interface TopbarProps<T> {
   table: Table<T>;
+  isFullscreen: boolean;
   fullscreenToggle: () => void;
   isCompactTable: boolean;
   setIsCompactTable: React.Dispatch<React.SetStateAction<boolean>>;
@@ -35,13 +37,14 @@ interface TopbarProps<T> {
 function Topbar<T>({
   table,
   isCompactTable,
+  isFullscreen,
   fullscreenToggle,
   setIsCompactTable,
   paginationComponent,
   topbarOptions,
   tableStates,
 }: TopbarProps<T>) {
-  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [isFullscreenState, setIsFullscreenState] = useState(isFullscreen);
   const [sortAnchorEl, setSortAnchorEl] = useState<HTMLElement | null>(null);
   const [groupBy, setGroupBy] = useState<string>("None");
 
@@ -57,7 +60,12 @@ function Topbar<T>({
     table.getAllLeafColumns().map((col) => col.id)
   );
 
-  // console.log("showColumnHiding", showColumnHiding); //only for built purpose-> remove it later
+  //Filter
+  const [showFilterInput, setShowFilterInput] = useState(false);
+
+  // search
+  const [showSearchInput, setShowSearchInput] = useState(false);
+  const searchContainerRef = useRef<HTMLDivElement>(null);
 
   // sync column order with table instance
   useEffect(() => {
@@ -70,11 +78,22 @@ function Topbar<T>({
     showColumnToggle,
     showChangeLayoutToggle,
     viewMoreToggle,
+    showSortingToggle,
+    showFilterToggle,
     showSearch,
-    showFilter,
-    showCustomizationToggle,
     searchValue,
     onSearchChange,
+    filterOptions = {
+      columnsData: {
+        column_list: [],
+        operation_list: {},
+        saved_filter: [],
+      },
+      onDeleteFilter: () => {},
+      onSaveFilter: () => {},
+      dropdownData: [],
+      onUpdateFilter: () => {},
+    },
   } = topbarOptions ?? {};
 
   const { container: fullscreenContainer } = useFullscreenPopoverContainer();
@@ -94,15 +113,15 @@ function Topbar<T>({
     setLayoutAnchorEl(null);
   };
 
-  // search
-  const [showSearchInput, setShowSearchInput] = useState(false);
-  const searchContainerRef = useRef<HTMLDivElement>(null);
-
   useOutsideClick({
     ref: searchContainerRef,
     handler: () => setShowSearchInput(false),
   });
 
+  const handleFilterDrawer = () => {
+    setShowFilterInput((prev) => !prev);
+  };
+
   return (
     <div className="ts-topbar">
       <div className="tabs-section">{leftSideComponent}</div>
@@ -112,10 +131,12 @@ function Topbar<T>({
         {paginationComponent}
 
         {showSearch && (
-          <TableSearch
-            value={searchValue ?? ""}
-            onChange={onSearchChange ?? (() => {})}
-          />
+          <div title="Search">
+            <TableSearch
+              value={searchValue ?? ""}
+              onChange={onSearchChange ?? (() => {})}
+            />
+          </div>
         )}
 
         {showChangeLayoutToggle && (
@@ -168,7 +189,7 @@ function Topbar<T>({
           </>
         )}
 
-        {showFilter && (
+        {showSortingToggle && (
           <>
             <div
               className="filter ts--button"
@@ -189,9 +210,23 @@ function Topbar<T>({
           </>
         )}
 
-        {showCustomizationToggle && (
-          <div className="customization ts--button" title="Filter">
-            <CustomizationIcon />
+        {showFilterToggle && (
+          <div
+            className="filter ts--button"
+            title="Filter"
+            onClick={() => setShowFilterInput(true)}
+          >
+            <FilterationIcon />
+            <FilterDrawer
+              tableStates={tableStates}
+              open={showFilterInput}
+              onClose={handleFilterDrawer}
+              onDeleteFilter={filterOptions?.onDeleteFilter}
+              columnsData={filterOptions.columnsData} // @ts-ignore
+              onSaveFilter={filterOptions?.onSaveFilter}
+              dropdownData={filterOptions.dropdownData}
+              onUpdateFilter={filterOptions?.onUpdateFilter}
+            />
           </div>
         )}
 
@@ -202,10 +237,10 @@ function Topbar<T>({
               onCompactToggle={(value: string) =>
                 setIsCompactTable(value === "Compact")
               }
-              isFullscreen={isFullscreen}
+              isFullscreen={isFullscreenState}
               onFullscreenToggle={() => {
                 fullscreenToggle();
-                setIsFullscreen((prev) => !prev);
+                setIsFullscreenState((prev) => !prev);
               }}
               groupBy={groupBy}
               onGroupByChange={(value: string) => setGroupBy(value)}

package/src/components/viewmore/index.tsx

@@ -27,8 +27,8 @@ const ViewMore = ({
   onCompactToggle,
   isFullscreen,
   onFullscreenToggle,
-  groupBy,
-  onGroupByChange,
+  // groupBy,
+  // onGroupByChange,
   tableStates,
 }: ViewMorePopoverProps) => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

package/src/libs/hooks/useCraftTable.tsx

@@ -6,6 +6,11 @@ import {
 } from "@tanstack/react-table";
 import { useState } from "react";
 import { CraftTableOptionsProps } from "../../types/table-options";
+import {
+  FilterMasterStateProps,
+  FilterOperationListProps,
+  FilterStateProps,
+} from "../../types/filter";
 
 export function useCraftTable(paginationPageSize: number = 25) {
   const [pagination, setPagination] = useState<PaginationState>({
@@ -18,9 +23,20 @@ export function useCraftTable(paginationPageSize: number = 25) {
   const [wrapColumns, setWrapColumns] = useState<Record<string, boolean>>({
     all_wrap: true,
   });
-  const [globalWrapColumns, setGlobalWrapColumns] = useState<boolean | null>(
-    null
-  );
+
+  // Filters to be rendered in form
+  const [filters, setFilters] = useState<FilterStateProps[]>([]);
+  // Saved filter Component - savedFilterEditValue is set on list click
+  const [savedFilterEditValue, setSavedFilterEditValue] = useState<
+    string | number
+  >("");
+  const [filterToDelete, setFilterToDelete] =
+    useState<FilterOperationListProps | null>(null);
+  const [filterSelectedAttributeValue, setFilterSelectedAttributeValue] =
+    useState<string>("");
+
+  const [filterMaster, setFilterMaster] =
+    useState<FilterMasterStateProps | null>(null);
 
   if (pagination.pageIndex < 0 || pagination.pageSize <= 0) {
     throw new Error(
@@ -39,8 +55,16 @@ export function useCraftTable(paginationPageSize: number = 25) {
     setExpanded: setExpanded,
     wrapColumns: wrapColumns,
     setWrapColumns: setWrapColumns,
-    globalWrapColumns: globalWrapColumns,
-    setGlobalWrapColumns: setGlobalWrapColumns,
+    filters: filters,
+    setFilters: setFilters,
+    savedFilterEditValue: savedFilterEditValue,
+    setSavedFilterEditValue: setSavedFilterEditValue,
+    filterToDelete: filterToDelete,
+    setFilterToDelete: setFilterToDelete,
+    filterSelectedAttributeValue: filterSelectedAttributeValue,
+    setFilterSelectedAttributeValue: setFilterSelectedAttributeValue,
+    filterMaster: filterMaster,
+    setFilterMaster: setFilterMaster,
   };
 
   return craftTableOptions;

package/src/libs/hooks/useDefaultColumns.tsx

@@ -11,7 +11,7 @@ export const useDefaultColumns = () => {
         header: "First Name",
         id: "firstName",
         accessorKey: "firstName",
-        // meta: { label: "First Name" },
+        meta: { label: "First Name" },
         // header: ({ table }) => (
         //   <>
         //     <button
@@ -58,7 +58,7 @@ export const useDefaultColumns = () => {
         header: "Last Name",
         accessorKey: "lastName",
         size: 100,
-        meta: { wrap: true },
+        meta: { label: "Last Name" },
       },
       {
         header: "Email Id",

package/src/libs/hooks/useEntityTableAPI.tsx

@@ -0,0 +1,183 @@
+import {
+  useMutation,
+  useQueries,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import { api, ENTITY_TYPE } from "../utils/common";
+import {
+  APIParamsProps,
+  EntityListingResponse,
+  EntityTableAPIProps,
+} from "../../types/common";
+import {
+  commonGetDropdownDataAPI,
+  createSavedFilter,
+  deleteSavedFilter,
+  updateSavedFilter,
+} from "../utils/apiColumn";
+import { FilterColumnsDataProps } from "../../types/filter";
+
+const entityListingCall = async ({
+  page,
+  size,
+  entity_type = ENTITY_TYPE,
+  tabs = {
+    columnName: "status",
+    sortBy: "ASC",
+    value: "",
+  },
+  sortby = [
+    {
+      sortColum: "name",
+      sortType: "ASC",
+    },
+    {
+      sortColum: "status",
+      sortType: "DSC",
+    },
+  ],
+  quickFilter = [],
+  attributeFilter = [],
+}: EntityTableAPIProps): Promise<{
+  responseStatus: number;
+  data: EntityListingResponse;
+}> => {
+  const url = `filter`;
+
+  const body = {
+    entity_type,
+    tabs,
+    sortby,
+    quickFilter,
+    attributeFilter,
+  };
+
+  const params: APIParamsProps = {
+    page,
+    size,
+  };
+
+  const response = await api.post(url, body, { params });
+
+  return { responseStatus: response.status, data: response.data };
+};
+
+export const useEntityTableAPI = ({
+  page = 0,
+  size = 50,
+  quickFilter = [],
+}: EntityTableAPIProps) => {
+  const { data, isPending: isTableDataPending } = useQuery({
+    queryKey: [page, size, quickFilter],
+    queryFn: () =>
+      entityListingCall({
+        page,
+        size,
+        quickFilter,
+      }),
+  });
+
+  return {
+    tableData: data?.data.data,
+    status: data?.responseStatus,
+    isTableDataPending,
+  };
+};
+
+//for saved filter API
+export const useSavedFilterAPI = () => {
+  const queryClient = useQueryClient();
+  const savedMutation = useMutation({
+    mutationKey: ["savedFilter"],
+    mutationFn: ({
+      entity_type,
+      payload,
+    }: {
+      entity_type: string;
+      payload: any;
+    }) => {
+      return createSavedFilter(entity_type, payload);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["meta"] });
+    },
+  });
+
+  return { savedMutation };
+};
+
+//for delete filter API
+export const useDeleteFilterAPI = () => {
+  const queryClient = useQueryClient();
+  const deleteMutation = useMutation({
+    mutationKey: ["deleteFilter"],
+    mutationFn: ({
+      entity_type,
+      payload,
+    }: {
+      entity_type: string;
+      payload: any;
+    }) => {
+      return deleteSavedFilter(entity_type, payload);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["meta"] });
+    },
+  });
+
+  return { deleteMutation };
+};
+
+// for updating saved filter API
+export const useUpdateFilterAPI = () => {
+  const queryClient = useQueryClient();
+
+  const updateMutation = useMutation({
+    mutationKey: ["updateFilter"],
+    mutationFn: ({
+      entity_type,
+      payload,
+    }: {
+      entity_type: string;
+      payload: any;
+    }) => {
+      return updateSavedFilter(entity_type, payload);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["meta"] });
+    },
+  });
+
+  return { updateMutation };
+};
+
+export const useCommonDropdownAPI = (
+  metaData?: FilterColumnsDataProps,
+  value?: string
+) => {
+  // Step 1: Extract all keys and query types
+  const dropdownConfigs = (metaData?.column_list || [])
+    .filter((col) => col?.datasource_list)
+    .map((col) => ({
+      key: col.attribute_key,
+      dataSourceType: value ?? col.datasource_list ?? "STS",
+    }));
+
+  // Step 2: Use useQueries to fetch them all in parallel
+  const dropdownResults = useQueries({
+    queries: dropdownConfigs.map((cfg) => ({
+      queryKey: ["commonDropdown", cfg.dataSourceType],
+      queryFn: () => commonGetDropdownDataAPI(cfg.dataSourceType, null),
+      enabled: !!cfg.dataSourceType,
+    })),
+  });
+
+  // Step 3: Map results to keys
+  const dropdownData: Record<string, any> = {};
+  dropdownConfigs.forEach((cfg, idx) => {
+    dropdownData[cfg.key] = dropdownResults[idx].data;
+  });
+
+  return { dropdownData };
+};

package/src/libs/hooks/useEntityTableHooks.ts

@@ -0,0 +1,25 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  entityTableFilterMaster,
+  fetchDetailsByFilterId,
+} from "../utils/apiColumn";
+
+export const useDetailsQueryAPI = (value: string) => {
+  const detailsQuery = useQuery({
+    queryKey: ["details", value],
+    queryFn: () => fetchDetailsByFilterId(value),
+    enabled: !!value, // This ensures that the second query only runs if the first one has data
+  });
+
+  return { detailsQuery };
+};
+
+export const useFetchData = (entity_type: string) => {
+  // First query to get meta data
+  const metaQuery = useQuery({
+    queryKey: ["meta", entity_type],
+    queryFn: () => entityTableFilterMaster(entity_type),
+  });
+
+  return { metaQuery };
+};

package/src/libs/utils/apiColumn.ts

@@ -0,0 +1,123 @@
+import { api } from "./common";
+import {
+  createSavedFilterPaload,
+  deleteSavedFilterPayload,
+  updateSavedFilterPayload,
+} from "../../types/filter";
+
+export const entityTableMetaMaster = async (entity_type: string) => {
+  try {
+    const response = await api.post(
+      `/meta/get-table-data?entity_type=${entity_type}&list_type=${entity_type}`
+    );
+
+    const rawColumns = response.data?.data?.column_list || [];
+
+    const res = rawColumns.map((item: any) => ({
+      id: item.attribute_key,
+      accessorKey: item.attribute_key,
+      header: item.name,
+    }));
+    return { res };
+  } catch (error) {
+    console.error("Failed to fetch table meta:", error);
+    return { res: [] };
+  }
+};
+
+export const entityTableFilterMaster = async (entity_type: string) => {
+  try {
+    const response = await api.post(
+      `/meta/get-table-data?entity_type=${entity_type}&list_type=${entity_type}`
+    );
+
+    const filteredData = {
+      ...response.data.data,
+      column_list: response.data.data.column_list.filter(
+        (item: any) => item.attribute_key !== "action"
+      ),
+    };
+    // console.log("response", filteredData.column_list);
+    // return response.data.data;
+    return filteredData; // FOR ACTION COLUMN REMOVE
+  } catch (error) {
+    console.error("Failed to fetch filter operation list meta:", error);
+  }
+};
+
+export const fetchDetailsByFilterId = async (filterId: string) => {
+  const response = await api.get(`/filter/${filterId}`);
+  return response.data;
+};
+
+export const commonGetDropdownDataAPI = async (
+  entity_type: string,
+  organization_id?: string | null,
+  data?: any
+) => {
+  try {
+    const requestBody = {
+      status: "ACTIVE",
+      organization_id: organization_id,
+      ...data,
+    };
+
+    const response = await api.post(
+      `/list-master/getDropdownData/${entity_type}`,
+      requestBody
+    );
+
+    return response.data;
+  } catch (error) {
+    console.error("Failed to fetch dropdown data:", error);
+    throw error;
+  }
+};
+
+export const createSavedFilter = async (
+  entity_type: string,
+  payload: createSavedFilterPaload
+) => {
+  try {
+    const response = await api.post(
+      `/entity/create?entity_type=${entity_type}`,
+      payload
+    );
+    return response.data;
+  } catch (error) {
+    console.error("Failed to fetch saved filter list:", error);
+    throw error;
+  }
+};
+
+export const deleteSavedFilter = async (
+  entity_type: string,
+  payload: deleteSavedFilterPayload
+) => {
+  try {
+    const response = await api.post(
+      `/entity/update/17?entity_type=${entity_type}`,
+      payload
+    );
+    return response.data;
+  } catch (error) {
+    console.error("Failed to delete saved filter:", error);
+    throw error;
+  }
+};
+
+export const updateSavedFilter = async (
+  entity_type: string,
+  payload: updateSavedFilterPayload
+) => {
+  try {
+    const response = await api.post(
+      `/entity/update/17?entity_type=${entity_type}`,
+      payload
+    );
+    return response.data;
+  } catch (error) {
+    console.error("Failed to update saved filter:", error);
+    throw error;
+  }
+};

package/src/libs/utils/common.ts

@@ -1,6 +1,7 @@
 import { Column } from "@tanstack/react-table";
 import { alignProps } from "../../types/common";
 import { CSSProperties } from "react";
+import axios from "axios";
 
 export const formatClassName = (className: string): string => {
   return className.replace(/\s+/g, " ").trim();
@@ -60,3 +61,44 @@ export const getColumnPinningStylesBody = <T>(
     width: column.getSize(),
   };
 };
+
+export function customDebounce<T extends (...args: any[]) => any>(
+  func: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  let timerId: ReturnType<typeof setTimeout> | null = null;
+
+  return function (this: ThisParameterType<T>, ...args: Parameters<T>): void {
+    if (timerId) clearTimeout(timerId);
+    timerId = setTimeout(() => {
+      func.apply(this, args);
+    }, delay);
+  };
+}
+
+// uat http://13.200.182.92:9091/api
+// local http://localhost:9091/api
+
+// API INTEGRATION
+export const api = axios.create({
+  baseURL: "http://13.200.182.92:9091/api",
+  timeout: 10000,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+api.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem("authToken");
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+export const ENTITY_TYPE = "UPR";

package/src/main.tsx

@@ -1,9 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  <QueryClientProvider  client={new QueryClient()}>
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  </QueryClientProvider>
 );