rez-table-listing-mui 1.3.61 → 2.0.0

package/src/listing/components/{table-head.tsx → table-head/table-head.tsx}

@@ -3,17 +3,25 @@ import {
   CraftTableFeatureProps,
   craftTableFilterSettingsOptionsProps,
   CraftTableOptionsProps,
-} from "../types/table-options";
-import { DownArrow, UpArrow } from "../../assets/svg";
-import { CSSProperties, useState } from "react";
-import { getColumnPinningStyles } from "../libs/utils/common";
+} from "../../types/table-options";
+import { DownArrow, UpArrow } from "../../../assets/svg";
+import { useState } from "react";
+import { getColumnPinningStyles } from "../../libs/utils/common";
 import {
   horizontalListSortingStrategy,
   SortableContext,
 } from "@dnd-kit/sortable";
 import DraggableTableHeader from "./table-head-dnd-cell";
 import TableHeadPin from "./table-head-pin";
-import Checkbox from "./inputs/checkbox";
+import Checkbox from "../inputs/checkbox";
+import TableColumnResizeHandle from "./table-head-resizer";
+import {
+  TableHeadCell,
+  TableHeadContent,
+  TableHeadRoot,
+  TableHeadRow,
+  TableHeadSort,
+} from "./table-head.styles";
 
 interface TableHeadProps<T> {
   table: Table<T>;
@@ -49,54 +57,26 @@ function TableHead<T>({
   };
 
   return (
-    <thead className={`ts__head ${stickyHeader ? "ts--sticky" : ""}`.trim()}>
+    <TableHeadRoot sticky={stickyHeader}>
       {table.getHeaderGroups().map((headerGroup) => (
-        <tr className="ts__head__tr" key={headerGroup?.id}>
+        <TableHeadRow striped={featureOptions.striped} key={headerGroup?.id}>
           {enableRowSelection && (
-            <th
-              className="ts__head__th ts__head__checkbox"
-              style={{
-                position: "sticky",
-                left: 0,
-                width: "50px",
-              }}
+            <TableHeadCell
+              sticky
+              compact={featureOptions.compactTable}
+              style={{ width: 50 }}
             >
-              <div className="ts__content">
+              <TableHeadContent>
                 <Checkbox
                   checked={table.getIsAllRowsSelected()}
                   indeterminate={table.getIsSomeRowsSelected()}
                   onChange={() => table.toggleAllRowsSelected()}
                 />
-              </div>
-            </th>
+              </TableHeadContent>
+            </TableHeadCell>
           )}
 
           {headerGroup.headers.map((header) => {
-            let sortProps: {
-              className: string;
-              title?: string;
-              style?: CSSProperties;
-            } = {
-              className: "ts__content",
-              // style: {
-              //   justifyContent: getColumnAlignment(
-              //     (header?.column?.columnDef?.meta as align)?.align
-              //   ),
-              // },
-            };
-
-            // if (header.column.getCanSort()) {
-            //   sortProps = {
-            //     ...sortProps,
-            //     title:
-            //       header.column.getNextSortingOrder() === "asc"
-            //         ? "Sort ascending"
-            //         : header.column.getNextSortingOrder() === "desc"
-            //         ? "Sort descending"
-            //         : "Clear sort",
-            //   };
-            // }
-
             return enableColumnReordering ? (
               <SortableContext
                 key={header?.id}
@@ -113,36 +93,30 @@ function TableHead<T>({
                 />
               </SortableContext>
             ) : (
-              <th
+              <TableHeadCell
                 key={header?.id}
-                className="ts__head__th"
                 colSpan={header.colSpan}
+                compact={featureOptions.compactTable}
+                onClick={handleHover}
                 style={{
                   ...getColumnPinningStyles(header.column),
                   width: `${header.column.getSize()}px`,
                   minWidth: `${header.column.columnDef.minSize}px`,
                   maxWidth: `${header.column.columnDef.maxSize}px`,
                 }}
-                onClick={handleHover}
               >
                 {header.isPlaceholder ? null : (
-                  <div {...sortProps}>
-                    <div
-                      className={`${
-                        header.column.getCanSort() ? "ts__content__sort" : ""
-                      }`.trim()}
-                      // onClick={header.column.getToggleSortingHandler()}
-                    >
+                  <TableHeadContent>
+                    <TableHeadSort sortable={header.column.getCanSort()}>
                       {flexRender(
                         header.column.columnDef.header,
                         header.getContext()
                       )}
 
-                      {{
-                        asc: <UpArrow />,
-                        desc: <DownArrow />,
-                      }[header.column.getIsSorted() as "asc" | "desc"] ?? null}
-                    </div>
+                      {{ asc: <UpArrow />, desc: <DownArrow /> }[
+                        header.column.getIsSorted() as "asc" | "desc"
+                      ] ?? null}
+                    </TableHeadSort>
 
                     {enableColumnPinning && (
                       <TableHeadPin
@@ -151,19 +125,12 @@ function TableHead<T>({
                         tableStates={tableStates}
                       />
                     )}
-                  </div>
+                  </TableHeadContent>
                 )}
 
                 {/* column resizing */}
                 {header.column.getCanResize() ? (
-                  <div
-                    onDoubleClick={() => header.column.resetSize()}
-                    onMouseDown={header.getResizeHandler()}
-                    onTouchStart={header.getResizeHandler()}
-                    className={`column__resize ${
-                      header.column.getIsResizing() ? "is__resizing" : ""
-                    }`}
-                  />
+                  <TableColumnResizeHandle header={header} />
                 ) : null}
 
                 {/* Popover */}
@@ -174,12 +141,12 @@ function TableHead<T>({
                   wrap={wrap}
                   tableStates={tableStates}
                 /> */}
-              </th>
+              </TableHeadCell>
             );
           })}
-        </tr>
+        </TableHeadRow>
       ))}
-    </thead>
+    </TableHeadRoot>
   );
 }
 

package/src/listing/components/table.tsx

@@ -1,7 +1,7 @@
 import { formatClassName } from "../libs/utils/common";
 import { CraftTableComponentProps } from "../types/table";
-import TableBody from "./table-body";
-import TableHead from "./table-head";
+import TableBody from "./table-body/table-body";
+import TableHead from "./table-head/table-head";
 
 function Table<T>({
   table,

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

@@ -1,31 +1,28 @@
-import "./index.scss";
-import { Box, CircularProgress, IconButton, Tab, Tabs } from "@mui/material";
+import { Box, CircularProgress, IconButton } from "@mui/material";
 import { CraftTableOptionsProps } from "../../types/table-options";
-import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
 import { settingsOptionsProps } from "../../types/table";
-import { tableTabsStyles } from "./styles";
 import { useMemo } from "react";
-import { SettingIcon } from "../../../assets/svg";
+import { TableTab, TableTabCount, TableTabsRoot } from "./tabs.styles";
+import { SettingsOutlined } from "@mui/icons-material";
 
 interface TabDataProps {
   tab_name: string | null;
-  count: string | number;
+  count?: string | number;
 }
 
 interface TableTabsProps {
   loading?: boolean;
   tabsData?: TabDataProps[];
-  activeTab?: string;
+  activeTab?: TabDataProps;
   tableStates: CraftTableOptionsProps;
   onClick: (state: string) => void;
-  columns?: any[];
   settingsOptions?: settingsOptionsProps;
 }
 
 export function TableTabs({
   loading = false,
   tabsData = [],
-  activeTab = "All",
+  activeTab = { tab_name: "All", count: 0 },
   onClick,
   tableStates,
   settingsOptions,
@@ -34,10 +31,12 @@ export function TableTabs({
 
   const handleTabClick = (tab: string) => {
     onClick(tab);
-    tableStates.setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+    tableStates.setPagination((prev) => ({
+      ...prev,
+      pageIndex: 0,
+    }));
   };
 
-  // Normalize tab_name to uppercase for display + logic
   const normalizedTabs = useMemo(() => {
     return tabsData
       ?.filter((tab) => tab.tab_name !== null)
@@ -55,60 +54,47 @@ export function TableTabs({
     );
   }, [normalizedTabs]);
 
-  const selectedTab = activeTab || defaultTab;
+  const selectedTab = activeTab?.tab_name || defaultTab;
 
   return (
     <Box display="flex" alignItems="center" justifyContent="flex-start">
-      {/* Layout settings icon */}
+      {/* Settings icon */}
       {settingsOptions?.showIcon && (
-        <IconButton
-          onClick={settingsOptions?.onClick}
-          sx={{ zIndex: 1000, mx: 0 }}
-        >
-          <SettingIcon />
+        <IconButton size="small" onClick={settingsOptions?.onClick}>
+          <SettingsOutlined fontSize="small" />
         </IconButton>
       )}
 
       {/* Tabs */}
-      <Tabs
+      <TableTabsRoot
         value={selectedTab}
         onChange={(_, newValue) => handleTabClick(newValue)}
         variant="scrollable"
         scrollButtons="auto"
-        slotProps={{ indicator: { sx: { display: "none" } } }}
-        sx={tableTabsStyles.tabs}
       >
-        {normalizedTabs.map(({ tab_name, count }) => {
-          const isSelected = activeTab === tab_name;
+        {normalizedTabs.map((tab) => {
+          const isSelected = activeTab?.tab_name === tab?.tab_name;
 
           return (
-            <Tab
-              key={tab_name}
-              value={tab_name}
+            <TableTab
+              key={tab?.tab_name}
+              value={tab}
               label={
                 <Box display="flex" alignItems="center" gap={1}>
-                  <Box>{tab_name}</Box>
-                  <Box
-                    sx={{
-                      ...tableTabsStyles.tabCount,
-                      ...(isSelected && {
-                        // backgroundColor: "#ced3da",
-                        // borderColor: "#ced3da",
-                        backgroundColor: "#000",
-                        color: "#fff",
-                        fontWeight: "500",
-                      }),
-                    }}
-                  >
-                    {count == 0 ? "0" : String(count).padStart(2, "0")}
+                  <Box sx={{ color: isSelected ? "#000" : "" }}>
+                    {tab?.tab_name}
                   </Box>
+                  <TableTabCount selected={isSelected}>
+                    {tab?.count == 0
+                      ? "0"
+                      : String(tab?.count).padStart(2, "0")}
+                  </TableTabCount>
                 </Box>
               }
-              sx={tableTabsStyles.tab}
             />
           );
         })}
-      </Tabs>
+      </TableTabsRoot>
     </Box>
   );
 }

package/src/listing/components/tabs/tabs.styles.ts

@@ -0,0 +1,49 @@
+// tableTabs.styles.ts
+import { styled } from "@mui/material/styles";
+import Tabs, { tabsClasses } from "@mui/material/Tabs";
+import Tab, { tabClasses } from "@mui/material/Tab";
+import Box from "@mui/material/Box";
+
+export const TableTabsRoot = styled(Tabs)(({ theme }) => ({
+  minHeight: theme.spacing(3.5),
+
+  [`& .${tabsClasses.flexContainer}`]: {
+    minHeight: theme.spacing(3.5),
+  },
+
+  // hide indicator (instead of slotProps every time)
+  [`& .${tabsClasses.indicator}`]: {
+    display: "none",
+  },
+}));
+
+export const TableTab = styled(Tab)(({ theme }) => ({
+  color: theme.palette.grey[600],
+  padding: theme.spacing(1, 1.5),
+  minHeight: theme.spacing(3.5),
+  maxHeight: theme.spacing(3.5),
+  textTransform: "none",
+  minWidth: "unset",
+  whiteSpace: "nowrap",
+
+  [`&.${tabClasses.selected}`]: {
+    color: theme.palette.text.primary,
+    fontWeight: 700,
+  },
+}));
+
+export const TableTabCount = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "selected",
+})<{ selected?: boolean }>(({ theme, selected }) => ({
+  padding: theme.spacing(0.25),
+  borderRadius: theme.shape.borderRadius,
+  border: `1px solid ${
+    selected ? theme.palette.text.primary : theme.palette.grey[700]
+  }`,
+  color: selected ? theme.palette.common.white : theme.palette.text.primary,
+  backgroundColor: selected ? theme.palette.text.primary : "transparent",
+  fontWeight: selected ? 500 : 400,
+  lineHeight: 1,
+  minWidth: 20,
+  textAlign: "center",
+}));

package/src/listing/libs/hooks/useEntityTableAPI.tsx

@@ -24,6 +24,7 @@ import {
   getOperationList,
   getLayoutAttributes,
   getAttributes,
+  getTableTabs,
 } from "../utils/apiColumn";
 import {
   FilterDataMainFilterEntityListProps,
@@ -401,6 +402,13 @@ export const useGetLayoutAttributes = ({
   return { layoutAttributes };
 };
 
+export const useGetTableTabs = (payload: any) => {
+  const { data: tableTabs, isLoading } = useQuery({
+    queryKey: ["tableTabs", payload],
+    queryFn: () => getTableTabs(payload),
+  });
+  return { tableTabs, isLoading };
+};
 // export const useGetSettingsColumnAttributes = (entity_type: string) => {
 //   // First query to get meta data
 //   const settingsColumnAttributes = useQuery({

package/src/listing/libs/hooks/useEntityTableHooks.ts

@@ -14,11 +14,11 @@ export const useDetailsQueryAPI = (value: string | undefined) => {
   return { detailsQuery };
 };
 
-export const useFetchData = (entity_type: string) => {
+export const useFetchData = (entity_type: string, payload?: any) => {
   // First query to get meta data
   const metaQuery = useQuery({
-    queryKey: ["meta", entity_type],
-    queryFn: () => entityTableFilterMaster(entity_type),
+    queryKey: ["meta", entity_type, payload],
+    queryFn: () => entityTableFilterMaster(entity_type, payload),
   });
 
   return { metaQuery };

package/src/listing/libs/services/getLayoutAPI.tsx

@@ -7,7 +7,7 @@ export const getLeadNavigationTabs = async (entity_type: string) => {
       type: "layout",
     };
 
-    const response = await api.get("/layout-preference", { params });
+    const response = await api.get("meta/layout-preference", { params });
 
     return response.data.mapped_json;
   } catch (error) {

package/src/listing/libs/utils/apiColumn.ts

@@ -27,10 +27,14 @@ export const entityTableMetaMaster = async (entity_type: string) => {
   }
 };
 
-export const entityTableFilterMaster = async (entity_type: string) => {
+export const entityTableFilterMaster = async (
+  entity_type: string,
+  payload?: any
+) => {
   try {
     const response = await api.post(
-      `/meta/get-table-data?entity_type=${entity_type}&list_type=${entity_type}`
+      `/meta/get-table-data?entity_type=${entity_type}&list_type=${entity_type}`,
+      payload
     );
 
     // const filteredData = {
@@ -141,7 +145,7 @@ export const saveSettingsData = async (payload: any) => {
 export const getSettingsData = async (entity_type: any) => {
   try {
     const response = await api.get(
-      `layout-preference?entity_type=${entity_type}`
+      `meta/layout-preference?entity_type=${entity_type}`
     );
     return response.data;
   } catch (error) {
@@ -156,7 +160,7 @@ export const viewSettingsDropDown = async ({
   sort_by,
 }: viewSettingsDropDownAPIProps): Promise<Array<string>> => {
   const response = await api.get(
-    `/layout-preference/column?entity_type=${entity_type}&column=${column}&sort_by=${sort_by}`
+    `meta/layout-preference/column?entity_type=${entity_type}&column=${column}&sort_by=${sort_by}`
   );
 
   return response.data;
@@ -164,7 +168,7 @@ export const viewSettingsDropDown = async ({
 
 export const getFilterEntityList = async (entity_type: string) => {
   const response = await api.get(
-    `/entity-relation/${entity_type}?include=true`
+    `meta/entity-relation/${entity_type}?include=true`
   );
 
   return response.data;
@@ -176,7 +180,7 @@ export const getFilterCriteriaByEntity = async (
   const params = { entity_type: selectedFilterEntity?.value };
 
   const response = await api.get(
-    `/attribute-master/getAttributes?direct=false&entity_type=${selectedFilterEntity?.value}`
+    `meta/attribute-master/getAttributes?direct=false&entity_type=${selectedFilterEntity?.value}`
   );
 
   return response.data;
@@ -198,7 +202,7 @@ export const getLayoutAttributes = async ({
     element_type,
   };
   const response = await api.post(
-    `/layout-preference/attributes`,
+    `meta/layout-preference/attributes`,
     { entity_type },
     { params }
   );
@@ -207,9 +211,14 @@ export const getLayoutAttributes = async ({
 
 export const getAttributes = async (entity_type: string) => {
   const response = await api.get(
-    `/attribute-master/getAttributes?direct=false&entity_type=${entity_type}`
+    `meta/attribute-master/getAttributes?direct=false&entity_type=${entity_type}`
   );
   console.log("resss", response);
 
   return response.data;
 };
+
+export const getTableTabs = async (payload: any) => {
+  const response = await api.post(`filter/adm/tabs`, payload);
+  return response.data;
+};

package/src/listing/libs/utils/common.ts

@@ -78,7 +78,7 @@ export function customDebounce<T extends (...args: any[]) => any>(
 
 //ENTITY TYPE
 const ENVIRONMENT = "adm_dev";
-export const ENTITY_TYPE = "SCH";
+export const ENTITY_TYPE = "ROL";
 export const MAPPED_ENTITY_TYPE = "LYPR"; // LAP OR LYPR
 export const USER_ID = 226;
 
@@ -111,3 +111,47 @@ api.interceptors.request.use(
     return Promise.reject(error);
   }
 );
+
+export const formatTableHeaders = (columns: any) => {
+  const mapped = columns.map((col: any) => {
+    const meta =
+      col.attribute_key === "status" ||
+      col.attribute_key === "lead_status" ||
+      col.attribute_key === "flag" ||
+      col.attribute_key === "invitation_status"
+        ? { type: "custom", propName: "renderStatus", align: col.align }
+        : col.attribute_key === "profile_image" ||
+          col.attribute_key === "short_logo"
+        ? {
+            type: "custom",
+            propName: "profileImageFetch",
+            align: col.align,
+          }
+        : col.attribute_key === "start_date" || col.attribute_key === "end_date"
+        ? { type: "custom", propName: "dateFormater", align: col.align }
+        : col.attribute_key === "action"
+        ? { type: "custom", propName: "renderAction", align: col.align }
+        : col.attribute_key === "code"
+        ? {
+            type: "custom",
+            propName: "drillCellRenderer",
+            align: col.align,
+          }
+        : col.attribute_key === "primary_mobile"
+        ? {
+            type: "custom",
+            propName: "apiCallonClick",
+            align: col.align,
+          }
+        : undefined;
+
+    return {
+      header: col.name ?? "",
+      accessorKey: col.attribute_key ?? "",
+      size: col.size,
+      meta,
+    };
+  });
+
+  return mapped;
+};

package/src/listing/types/common.ts

@@ -48,6 +48,7 @@ export interface EntityTableAPIProps {
     columnName: string;
     sortBy: "ASC" | "DSC";
     value?: string;
+    name?: string;
   };
   sortby?: {
     sortColum: string;

package/src/listing/types/table.ts

@@ -95,7 +95,7 @@ export interface CraftTableProps<T> {
   filterOptions?: FilterOptionsProps;
   settingsOptions?: settingsOptionsProps;
   craftTableFilterSettingsOptions?: craftTableFilterSettingsOptionsProps;
-  activeTab?: string;
+  activeTab?: any;
 }
 export interface CraftTableComponentProps<T> {
   table: Table<T>;
@@ -115,6 +115,6 @@ export interface TableHeaderProps<T> {
   activeTab?: string;
   featureOptions: CraftTableFeatureProps;
   tableStates: CraftTableOptionsProps;
-  filterSettingStates: craftTableFilterSettingsOptionsProps;
+  filterSettingStates?: craftTableFilterSettingsOptionsProps;
   onSaveSettings?: (columnId: string) => void;
 }