rez-table-listing-mui 1.2.4 → 1.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "type": "module",
   "description": "A rez table listing component built on TanStack Table",
   "main": "dist/index.js",

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

@@ -30,7 +30,7 @@ const AttributesFilter = ({
   const currentFilterValue = useMemo(() => {
     if (!selectedAttribute) return [];
 
-    const matchingColumn = columnsData.column_list.find(
+    const matchingColumn = columnsData?.column_list?.find(
       (column) => column.datasource_list === selectedAttribute
     );
 
@@ -65,7 +65,7 @@ const AttributesFilter = ({
     const selectedAttr = filterMaster?.attributes.selected;
     if (!selectedAttr) return;
 
-    const matchingColumn = columnsData.column_list.find(
+    const matchingColumn = columnsData?.column_list?.find(
       (column) => column.datasource_list === selectedAttr
     );
     if (!matchingColumn) return;

package/src/components/filter/index.tsx

@@ -53,13 +53,13 @@ export function TableFilter({
   };
 
   useEffect(() => {
-    if (!columnsData || !columnsData.column_list) {
+    if (!columnsData || !columnsData?.column_list) {
       setSelectedFilters([]);
       return;
     }
 
     const updated = filters?.map((filter) => {
-      const matchingColumn = columnsData.column_list.find(
+      const matchingColumn = columnsData?.column_list.find(
         (column) => column.attribute_key === filter.filter_attribute
       );
       const matchingDropdownList =

package/src/components/index-table.tsx

@@ -123,7 +123,7 @@ function TableWrapper<T>({
     showChangeLayoutToggle: true,
     viewMoreToggle: true,
     showSearch: true,
-    showSortingToggle: true,
+    showSortingToggle: false,
     showFilterToggle: true,
     tableStates,
 

package/src/components/pagination/default/index.scss

@@ -1,16 +1,13 @@
 .pagination_container {
   --grey-300: #edeeef;
 
-  // box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.05);
   padding: 8px;
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  gap: 1.5rem;
+  gap: 1rem;
   font-size: 0.875rem;
-  // border-top: 1px solid var(--grey-300);
   background-color: #fff;
-  margin-bottom: 0.5rem;
 
   @media screen and (max-width: 991px) {
     justify-content: center;

package/src/components/search/index.tsx

@@ -61,21 +61,6 @@ const TableSearch = ({ value, onChange }: TableSearchProps): JSX.Element => {
         top: "10px",
       }}
     >
-      {/* <Box
-        className="search-icon ts--button"
-        onClick={() => {
-          setShowSearchInput((prev) => !prev);
-          if (!showSearchInput) {
-            // Focus input when showing
-            setTimeout(() => {
-              searchContainerRef.current?.querySelector("input")?.focus();
-            }, 100);
-          }
-        }}
-      >
-        <SearchIcon />
-      </Box> */}
-
       <TextField
         type="text"
         placeholder="Search"

package/src/components/table-settings/components/quick-tab.tsx

@@ -137,136 +137,6 @@ const QuickTab = ({
     }
   }, [quickTabStates?.hide_list, quickTabStates?.show_list]);
 
-  // useEffect(() => {
-  //   // if Tab changes i dont want to reset the show list and hide list in tab change the api musnt trigger for the show list and hide list
-
-  //   if (!Object.entries(quickTabStates).length) {
-  //     // if (quickTabStates && quickTabStates.show_list?.length) return;
-  //     setQuickTabStates({
-  //       attribute: columnsData?.column_list?.filter(
-  //         (item) => item.datasource_list
-  //       )[0]?.attribute_key,
-  //       sorting: sortingOptions[0]?.value as QuickTabSortingType,
-  //       hide_list: [],
-  //       show_list: [],
-  //       isAllSelected: true,
-  //       isCombineOther: false,
-  //     });
-  //   }
-
-  //   if (settingsData?.quick_tab?.attribute !== quickTabStates?.attribute) {
-  //     setQuickTabStates((prev) => ({
-  //       ...prev,
-  //       hide_list: tabsApiData, // All data goes to hide_list initially
-  //       show_list: [], // Empty the show_list when attribute/sorting changes
-  //     }));
-  //   } else {
-  //     setQuickTabStates((prev) => ({
-  //       ...prev,
-  //       hide_list: settingsData?.quick_tab?.hide_list,
-  //       show_list: settingsData?.quick_tab?.show_list,
-  //     }));
-  //   }
-  // }, [columnsData.column_list, tabsApiData]);
-
-  // // When quickTabState show_list or hide_list changes, update the columnTabState
-  // useEffect(() => {
-  //   if (Object.entries(settingsData?.column || {}).length) {
-  //     const mappedColumns: ColumnItem[] =
-  //       columnsData?.column_list?.map((column) => ({
-  //         label: column?.name,
-  //         value: column?.attribute_key,
-  //       })) || [];
-  //     //Later changed TabData to interface from filter settings types file
-  //     const mappedTabs: TabData[] =
-  //       quickTabStates?.show_list?.map((tab) => ({
-  //         tab_name: tab,
-  //         show_list: mappedColumns,
-  //         hide_list: [],
-  //       })) || [];
-
-  //     if (settingsData?.column?.isDefault) {
-  //       setColumnTabState((prev) => ({
-  //         ...prev,
-  //         show_list: mappedColumns,
-  //         hide_list: [],
-  //       }));
-  //     } else {
-  //       setColumnTabState((prev) => ({
-  //         ...prev,
-  //         tabs: mappedTabs,
-  //       }));
-  //     }
-  //   }
-
-  //   // check for error
-  //   const hasInvalidValidShowList =
-  //     quickTabStates.show_list &&
-  //     (quickTabStates.show_list?.length === 0 ||
-  //       quickTabStates.show_list.length >= 5);
-
-  //   if (hasInvalidValidShowList) {
-  //     // Check if error is already in the state to avoid duplication
-  //     const errorMessage = {
-  //       type: "quick_tab_error",
-  //       message:
-  //         "Quick Tab : View as Tabs should have at least 1 and at most 5 tabs.",
-  //     };
-  //     const hasQuickTabError = saveButtonError?.messages?.some(
-  //       (message) => message.type === "quick_tab_error"
-  //     );
-
-  //     if (!hasQuickTabError) {
-  //       setSaveButtonError((prev) => ({
-  //         ...prev,
-  //         hasError: true,
-  //         messages: [...(prev?.messages || []), errorMessage], // Only add if it doesn't exist
-  //       }));
-  //     }
-  //   } else {
-  //     const otherMessages =
-  //       saveButtonError?.messages?.filter(
-  //         (message) => message.type !== "quick_tab_error"
-  //       ) || [];
-
-  //     setSaveButtonError((prev) => ({
-  //       ...prev,
-  //       hasError: otherMessages.length > 0,
-  //       messages: otherMessages,
-  //     }));
-  //   }
-  // }, [quickTabStates.show_list, quickTabStates.hide_list]);
-
-  // useEffect(() => {
-  //   setQuickTabStates((prev) => ({
-  //     ...prev,
-  //     hide_list: tabsApiData, // All data goes to hide_list initially
-  //     show_list: [], // Empty the show_list when attribute/sorting changes
-  //   }));
-  // }, [tabsApiData, quickTabStates.attribute, quickTabStates.sorting]);
-
-  //   if (!Object.entries(quickTabStates).length) {
-  //     // Logic for column
-  //     setColumnTabState((prev) => ({ ...prev, isDefault: true }));
-  //     // Logic for sorting
-  //     setSortingTabState((prev) => ({ ...prev, isDefault: true, tabs: [] }));
-  //   } else {
-  //     // Logic for sorting
-  //     if (!sortingTabState.tabs?.length) {
-  //       const emptySortBy: SortingConfigSortByProps[] = [
-  //         { column: "", order: "asc" },
-  //       ];
-  //       setSortingTabState((prev) => ({
-  //         ...prev,
-  //         tabs: quickTabStates?.show_list?.map((tab) => ({
-  //           tab_name: tab,
-  //           sortby: emptySortBy,
-  //         })),
-  //       }));
-  //     }
-  //   }
-  // }, [quickTabStates]);
-
   const sortingOptions = [
     { label: "A-Z", value: "asc" },
     { label: "Z-A", value: "dsc" },

package/src/components/table-settings/components/sorting.tsx

@@ -262,7 +262,7 @@ const Sorting = ({
         showList:
           columnTabState?.show_list ||
           // if columns isDefault and show_list is empty, show all columns
-          columnsData?.column_list.map((column) => ({
+          columnsData?.column_list?.map((column) => ({
             label: column.name,
             value: column.attribute_key,
           })) ||

package/src/components/tabs/index.tsx

@@ -1,9 +1,9 @@
 import "./index.scss";
-import { formatClassName } from "../../libs/utils/common";
-import { CircularProgress, IconButton } from "@mui/material";
+import { Box, CircularProgress, IconButton, Tab, Tabs } 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";
 
 interface TabDataProps {
   tab_value: string | null;
@@ -28,50 +28,70 @@ export function TableTabs({
   tableStates,
   settingsOptions,
 }: TableTabsProps) {
+  if (loading) return <CircularProgress size={24} />;
+
   const handleTabClick = (tab: string) => {
     onClick(tab);
     tableStates.setPagination((prev) => ({ ...prev, pageIndex: 0 }));
   };
 
   // Normalize tab_value to uppercase for display + logic
-  const normalizedTabs = tabsData.map((tab) => ({
-    ...tab,
-    tab_value: tab.tab_value?.toUpperCase() ?? "UNKNOWN",
-  }));
+  const normalizedTabs = tabsData
+    ?.filter((tab) => tab.tab_value)
+    ?.map((tab) => ({
+      ...tab,
+      tab_value: tab.tab_value,
+    }));
 
   return (
-    <div className="table-tabs">
-      {loading ? (
-        <div className="tabs-loader">
-          <CircularProgress size={24} />
-        </div>
-      ) : (
-        <div className="tabs">
-          {settingsOptions?.showIcon && (
-            <IconButton
-              onClick={settingsOptions?.onClick}
-              style={{ zIndex: 1000 }}
-            >
-              <SettingsOutlinedIcon />
-            </IconButton>
-          )}
-
-          <ul className="tabs">
-            {normalizedTabs.map(({ tab_value, tab_value_count }) => (
-              <li
-                key={tab_value}
-                className={formatClassName(
-                  `tab ${activeTab === tab_value ? "active" : ""}`
-                )}
-                onClick={() => handleTabClick(tab_value)}
-              >
-                <span className="tab__label">{tab_value}</span>
-                <span className="count">{tab_value_count}</span>
-              </li>
-            ))}
-          </ul>
-        </div>
+    <Box display="flex" alignItems="center" justifyContent="flex-start">
+      {/* Layout settings icon */}
+      {settingsOptions?.showIcon && (
+        <IconButton
+          onClick={settingsOptions?.onClick}
+          sx={{ zIndex: 1000, mx: 1 }}
+        >
+          <SettingsOutlinedIcon />
+        </IconButton>
       )}
-    </div>
+
+      {/* Tabs */}
+      <Tabs
+        value={activeTab}
+        onChange={(_, newValue) => handleTabClick(newValue)}
+        variant="scrollable"
+        scrollButtons={false}
+        slotProps={{ indicator: { sx: { display: "none" } } }}
+        sx={tableTabsStyles.tabs}
+      >
+        {normalizedTabs.map(({ tab_value, tab_value_count }) => {
+          const isSelected = activeTab === tab_value;
+
+          return (
+            <Tab
+              key={tab_value}
+              value={tab_value}
+              label={
+                <Box display="flex" alignItems="center" gap={1}>
+                  <Box>{tab_value}</Box>
+                  <Box
+                    sx={{
+                      ...tableTabsStyles.tabCount,
+                      ...(isSelected && {
+                        backgroundColor: "#ced3da",
+                        borderColor: "#ced3da",
+                      }),
+                    }}
+                  >
+                    {tab_value_count}
+                  </Box>
+                </Box>
+              }
+              sx={tableTabsStyles.tab}
+            />
+          );
+        })}
+      </Tabs>
+    </Box>
   );
 }

package/src/components/tabs/styles.ts

@@ -0,0 +1,33 @@
+import { SxProps, Theme } from "@mui/material";
+
+interface TabStylesProps {
+  tabs: SxProps<Theme>;
+  tab: SxProps<Theme>;
+  tabCount: SxProps<Theme>;
+}
+
+export const tableTabsStyles: TabStylesProps = {
+  tabs: {
+    minHeight: "38px",
+  },
+
+  tab: {
+    color: "#888888",
+    padding: "8px 12px",
+    minHeight: "38px",
+    textTransform: "none",
+    minWidth: "unset",
+    whiteSpace: "nowrap",
+
+    "&.Mui-selected": {
+      color: "#0e0c0b",
+      fontWeight: 700,
+    },
+  },
+
+  tabCount: {
+    padding: "2px 6px",
+    borderRadius: "4px",
+    border: "1px solid #888",
+  },
+};

package/src/components/topbar/index.scss

@@ -3,17 +3,23 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    // min-height: 2.5rem;
     background-color: #fff;
 
+    .tabs-section {
+      flex: 1 1 auto; // allow tabs to grow and shrink
+      min-width: 0; // important to allow shrinking
+      overflow: hidden; // prevent overflow
+    }
+
     .right-section {
       display: flex;
       justify-content: center;
-      // gap: 0.4rem;  // All icons gap
+      flex-shrink: 0;
+
       .search-wrapper {
         display: flex;
         align-items: center;
-        justify-content: flex-end; //
+        justify-content: flex-end;
         position: relative;
         margin-right: 0.1rem;
 
@@ -26,33 +32,6 @@
           // z-index: 2;
           margin-bottom: 1.2rem;
         }
-
-        // .search-input {
-        //   width: 0;
-        //   opacity: 0;
-        //   margin-left: 8px;
-        //   padding: 6px 8px;
-        //   font-size: 0.875rem;
-        //   border: 1px solid #ccc;
-        //   border-radius: 4px;
-        //   background-color: #f5f5f5;
-        //   color: #000;
-        //   transition: width 0.3s ease, opacity 0.3s ease;
-        //   // position: absolute;
-        //   // right: 40px;
-        //   // top: 50%;
-        //   // transform: translateY(-50%);
-
-        //   &:focus {
-        //     outline: none;
-        //     border-color: #000;
-        //   }
-        // }
-
-        // .search-input.expanded {
-        //   width: 200px;
-        //   opacity: 1;
-        // }
       }
 
       .ts--button {
@@ -70,15 +49,6 @@
         margin-top: 1rem;
       }
 
-      // .add-new-button {
-      //   margin-right: 0.9rem;
-      //   margin-bottom: 0.5rem;
-      //   border-radius: 2px;
-      //   // padding: 4px 14px;
-      //   background-color: #505050;
-      //   cursor: pointer;
-      // }
-
       .fullscreen-toggle {
         margin-right: 0.5rem;
         margin-top: 0.9rem;

package/src/components/topbar/index.tsx

@@ -107,13 +107,13 @@ function Topbar<T>({
     handler: () => setShowSearchInput(false),
   });
 
-  // const handleFilterDrawer = () => {
-  //   setShowFilterInput((prev) => !prev);
-  // };
-
   return (
     <div className="ts-topbar">
-      <div className="tabs-section">{leftSideComponent}</div>
+      <div className="tabs-section">
+        <div style={{ overflowX: "auto", whiteSpace: "nowrap" }}>
+          {leftSideComponent}
+        </div>
+      </div>
 
       <div className="right-section">
         {rightSideComponent}

package/src/libs/hooks/useCraftTableFilterSettings.tsx

@@ -13,140 +13,7 @@ export function useCraftTableFilterSettings() {
   const [showListViewSettings, setShowListViewSettings] =
     useState<boolean>(false);
 
-  const [settingsData, setSettingsData] = useState<SettingsDataProps>({
-    // quick_tab: {
-    //   attribute: "status",
-    //   sorting: "asc",
-    //   hide_list: ["active", "inactive", "pending"],
-    //   show_list: [],
-    //   isAllSelected: true,
-    //   isCombineOther: false,
-    // },
-    // column: {
-    //   isDefault: true,
-    //   show_list: [
-    //     {
-    //       label: "Customer Name",
-    //       value: "customer_name",
-    //     },
-    //     {
-    //       label: "Customer ID",
-    //       value: "customer_id",
-    //     },
-    //   ],
-    //   hide_list: [
-    //     {
-    //       label: "Email",
-    //       value: "email",
-    //     },
-    //     {
-    //       label: "Phone",
-    //       value: "phone",
-    //     },
-    //   ],
-    //   tabs: [
-    //     {
-    //       tab_name: "Active",
-    //       show_list: [
-    //         {
-    //           label: "Customer Name",
-    //           value: "customer_name",
-    //         },
-    //         {
-    //           label: "Status",
-    //           value: "status",
-    //         },
-    //       ],
-    //       hide_list: [
-    //         {
-    //           label: "Email",
-    //           value: "email",
-    //         },
-    //       ],
-    //     },
-    //     {
-    //       tab_name: "Inactive",
-    //       show_list: [
-    //         {
-    //           label: "Customer ID",
-    //           value: "customer_id",
-    //         },
-    //         {
-    //           label: "Status",
-    //           value: "status",
-    //         },
-    //       ],
-    //       hide_list: [
-    //         {
-    //           label: "Phone",
-    //           value: "phone",
-    //         },
-    //       ],
-    //     },
-    //     {
-    //       tab_name: "Pending",
-    //       show_list: [
-    //         {
-    //           label: "Customer Name",
-    //           value: "customer_name",
-    //         },
-    //         {
-    //           label: "Customer ID",
-    //           value: "customer_id",
-    //         },
-    //       ],
-    //       hide_list: [
-    //         {
-    //           label: "Email",
-    //           value: "email",
-    //         },
-    //         {
-    //           label: "Phone",
-    //           value: "phone",
-    //         },
-    //       ],
-    //     },
-    //   ],
-    // },
-    // sorting: {
-    //   isDefault: true,
-    //   sortby: [
-    //     {
-    //       column: "customer_id",
-    //       order: "asc",
-    //     },
-    //   ],
-    //   tabs: [
-    //     {
-    //       tab_name: "active",
-    //       sortby: [
-    //         {
-    //           column: "customer_name",
-    //           order: "asc",
-    //         },
-    //       ],
-    //     },
-    //     {
-    //       tab_name: "inactive",
-    //       sortby: [
-    //         {
-    //           column: "customer_id",
-    //           order: "desc",
-    //         },
-    //       ],
-    //     },
-    //     {
-    //       tab_name: "pending",
-    //       sortby: [
-    //         {
-    //           column: "status",
-    //           order: "asc",
-    //         },
-    //       ],
-    //     },
-    //   ],
-    // },
-  });
+  const [settingsData, setSettingsData] = useState<SettingsDataProps>({});
 
   // Quick FIlter settings local states
 

package/src/libs/utils/common.ts

@@ -77,14 +77,23 @@ export function customDebounce<T extends (...args: any[]) => any>(
 }
 
 //ENTITY TYPE
+const ENVIRONMENT = "adm_dev";
 export const ENTITY_TYPE = "ROL";
 
+const environments = {
+  adm_dev: "http://localhost:4010/api",
+  crm_dev: "http://localhost:4011/api",
+  uat: "http://13.200.182.92:4010/api",
+};
+
+const getBaseUrl = () => environments[ENVIRONMENT]
+
 // uat http://13.200.182.92:4010/api
 // local http://localhost:4010/api
 
 // API INTEGRATION
 export const api = axios.create({
-  baseURL: "http://localhost:4010/api",
+  baseURL: getBaseUrl(),
   timeout: 10000,
   headers: {
     "Content-Type": "application/json",