rez-table-listing-mui 1.0.37 → 1.0.39

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

@@ -0,0 +1,133 @@
+import React, { useState } from "react";
+import {
+  DialogTitle,
+  IconButton,
+  Box,
+  Typography,
+  DialogContent,
+  DialogActions,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import CustomVerticalTabs from "./tabs/vertical";
+import CustomTabPanel from "./tabs/vertical/custom-tab-panel";
+import QuickTab from "./components/quick-tab";
+import Column from "./components/column";
+import Sorting from "./components/sorting";
+import { QuickFilterModalProps } from "../../types/filter-settings";
+import { CustomDialog, DialogTransition } from "./components/custom-dialog";
+import { dialogStyles } from "./style";
+import CustomButton from "./components/custom-button";
+import { SETTINGS_TABS } from "./constants";
+
+const QuickFilterSettings = ({
+  show,
+  filterSettingStates,
+  onClose,
+  columnsData,
+  tabsApiData,
+  tabsApiDataLoading,
+}: QuickFilterModalProps) => {
+  const [tabValue, setTabValue] = useState(0);
+
+  const {
+    showListViewSettings,
+    setSettingsData,
+    quickTabStates,
+    sortingTabState,
+    columnTabState,
+  } = filterSettingStates;
+
+  const hasAPIData = Boolean(Object.entries(columnsData).length);
+
+  const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
+    setTabValue(newValue);
+  };
+
+  return (
+    <CustomDialog
+      open={show || showListViewSettings}
+      fullWidth
+      maxWidth="lg"
+      slots={{
+        transition: DialogTransition,
+      }}
+    >
+      <DialogTitle sx={dialogStyles.dialogTitle}>
+        <Typography sx={{ fontSize: "1.125rem" }}>List View Setting</Typography>
+        <IconButton
+          size="small"
+          color="inherit"
+          onClick={() => {
+            onClose && onClose();
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+
+      <DialogContent>
+        {!hasAPIData ? ( // check if columns data is available
+          <Typography>Please pass meta data in component</Typography>
+        ) : (
+          <>
+            <CustomVerticalTabs
+              value={tabValue}
+              onChange={handleTabChange}
+              tabItems={SETTINGS_TABS}
+            />
+
+            <Box sx={{ flex: "1" }}>
+              <CustomTabPanel value={tabValue} index={0}>
+                {tabValue === 0 && (
+                  <QuickTab
+                    filterSettingStates={filterSettingStates}
+                    columnsData={columnsData}
+                    tabsApiData={tabsApiData}
+                    tabsApiDataLoading={tabsApiDataLoading}
+                  />
+                )}
+              </CustomTabPanel>
+
+              <CustomTabPanel value={tabValue} index={1}>
+                {tabValue === 1 && (
+                  <Column
+                    filterSettingStates={filterSettingStates}
+                    columnsData={columnsData}
+                  />
+                )}
+              </CustomTabPanel>
+
+              <CustomTabPanel value={tabValue} index={2}>
+                {tabValue === 2 && (
+                  <Sorting
+                    filterSettingStates={filterSettingStates}
+                    columnsData={columnsData}
+                  />
+                )}
+              </CustomTabPanel>
+            </Box>
+          </>
+        )}
+      </DialogContent>
+
+      {hasAPIData && (
+        <DialogActions>
+          <CustomButton
+            onClick={() => {
+              setSettingsData((prev: any) => ({
+                ...prev,
+                quick_tab: quickTabStates,
+                columns: columnTabState,
+                sorting: sortingTabState,
+              }));
+            }}
+          >
+            Save Quick Filter
+          </CustomButton>
+        </DialogActions>
+      )}
+    </CustomDialog>
+  );
+};
+
+export default QuickFilterSettings;

package/src/components/table-settings/style.ts

@@ -0,0 +1,115 @@
+import { SxProps, Theme } from "@mui/material";
+
+interface DialogStyleProps {
+  dialogTitle: SxProps<Theme>;
+  dialogContent: SxProps<Theme>;
+  dialogActionsButton: SxProps<Theme>;
+}
+
+interface ListingValuesStyleProps {
+  wrapper: SxProps<Theme>;
+  heading: SxProps<Theme>;
+  button: SxProps<Theme>;
+  draggableContainer: SxProps<Theme>;
+  draggableCover: SxProps<Theme>;
+  itemLabel: SxProps<Theme>;
+  headerContainer: SxProps<Theme>;
+}
+interface TabStyleProps {
+  mainTabsHeader: SxProps<Theme>;
+  mainTabSelect: SxProps<Theme>;
+  mainTabDropdown: SxProps<Theme>;
+  selectDropdownSeparator: SxProps<Theme>;
+  checkboxStyle: SxProps<Theme>;
+}
+
+export const dialogStyles: DialogStyleProps = {
+  dialogTitle: {
+    backgroundColor: "#FBFBFC",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "0.75rem",
+  },
+
+  dialogContent: {
+    display: "flex",
+    gap: "1rem",
+    paddingTop: "1rem !important",
+  },
+
+  dialogActionsButton: {
+    backgroundColor: "#7A5AF8",
+    color: "#fff",
+  },
+};
+
+export const listingValuesStyles: ListingValuesStyleProps = {
+  wrapper: {
+    border: "0.5px solid #0E0C0B1F",
+    borderRadius: "8px",
+    minHeight: "10rem",
+  },
+  heading: { fontWeight: 400, color: "#0E0C0BB2", fontSize: "16px" },
+  button: { fontSize: "13px", textTransform: "none", color: "#0E0C0BB2" },
+  draggableContainer: {
+    maxHeight: 200,
+    borderRadius: 1,
+    p: 1,
+    mt: 2,
+    transition: "background-color 0.2s ease",
+  },
+  draggableCover: {
+    minHeight: "200px",
+    maxHeight: "200px",
+    overflowY: "auto",
+  },
+  itemLabel: { display: "flex", alignItems: "center", flex: 1 },
+  headerContainer: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    mb: 2,
+  },
+};
+
+export const TabsStyles: TabStyleProps = {
+  mainTabsHeader: {
+    fontStyle: "italic",
+    mb: 2,
+    display: "block",
+    fontWeight: 400,
+    fontSize: "12px",
+    color: "#0E0C0BB2",
+  },
+  mainTabDropdown: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "50%",
+    paddingRight: 1,
+  },
+  mainTabSelect: {
+    width: "65%",
+    "& .MuiOutlinedInput-root": {
+      "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+        borderColor: "#7A5AF8",
+      },
+    },
+  },
+
+  selectDropdownSeparator: {
+    width: "30%",
+    "& .MuiOutlinedInput-root": {
+      "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+        borderColor: "#7A5AF8",
+      },
+    },
+  },
+
+  checkboxStyle: {
+    p: 2,
+    display: "flex",
+    flexDirection: "column",
+  },
+};

package/src/components/table-settings/tabs/horizontal/index.tsx

@@ -0,0 +1,21 @@
+import { Tabs, TabsProps } from "@mui/material";
+import { horizontalTabStyles } from "../styles";
+
+const CustomTabs = ({ children, ...props }: TabsProps) => {
+  const { value, onChange } = props;
+
+  return (
+    <Tabs
+      value={value}
+      onChange={onChange}
+      aria-label="horizontal-tabs"
+      variant="scrollable"
+      sx={horizontalTabStyles.mainTabsContainer}
+      {...props}
+    >
+      {children}
+    </Tabs>
+  );
+};
+
+export default CustomTabs;

package/src/components/table-settings/tabs/styles.ts

@@ -0,0 +1,67 @@
+import { SxProps, Theme } from "@mui/material";
+
+interface VerticalTabStyleProps {
+  mainTabsContainer: SxProps<Theme>;
+  mainTabContainer: SxProps<Theme>;
+  mainTabLabel: SxProps<Theme>;
+}
+
+export const verticalTabStyles: VerticalTabStyleProps = {
+  mainTabsContainer: {
+    backgroundColor: "#FAFAF9",
+    height: "100%",
+    minWidth: "6.75rem",
+    position: "sticky",
+    top: "0",
+    left: "0",
+
+    "& .MuiTabs-indicator": {
+      display: "none",
+    },
+  },
+
+  mainTabContainer: {
+    borderRadius: "0.375rem",
+    padding: "0.5rem 1.25rem",
+    alignItems: "flex-start",
+    color: "rgba(14, 12, 11, 0.9)",
+    textTransform: "initial",
+    minHeight: "38px",
+
+    "&.Mui-selected": {
+      backgroundColor: "rgba(122, 90, 248, 0.16)",
+      color: "#7A5AF8",
+      borderRadius: "0.375rem",
+    },
+  },
+
+  mainTabLabel: {},
+};
+
+interface HorizontalTabStyleProps {
+  mainTabsContainer: SxProps<Theme>;
+  mainTabContainer: SxProps<Theme>;
+  mainTabLabel: SxProps<Theme>;
+}
+
+export const horizontalTabStyles: HorizontalTabStyleProps = {
+  mainTabsContainer: {
+    mb: 2,
+    "& .MuiTab-root": {
+      color: "#0E0C0BE5",
+      textTransform: "none",
+      fontWeight: 500,
+    },
+    "& .Mui-selected": {
+      color: "#7A5AF8",
+    },
+    "& .MuiTabs-indicator": {
+      backgroundColor: "#7A5AF8",
+      height: 3,
+    },
+  },
+
+  mainTabContainer: {},
+
+  mainTabLabel: {},
+};

package/src/components/table-settings/tabs/vertical/custom-tab-panel.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import Box from "@mui/material/Box";
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+const CustomTabPanel = ({
+  children,
+  value,
+  index,
+  ...props
+}: TabPanelProps) => {
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...props}
+    >
+      {value === index && <Box>{children}</Box>}
+    </div>
+  );
+};
+
+export default CustomTabPanel;

package/src/components/table-settings/tabs/vertical/index.tsx

@@ -0,0 +1,38 @@
+import { Tabs, Tab, TabsProps, Box } from "@mui/material";
+import { verticalTabStyles } from "../styles";
+
+interface StyledTabsProps extends TabsProps {
+  tabItems: { label: string }[];
+}
+
+const CustomVerticalTabs = ({ tabItems, ...props }: StyledTabsProps) => {
+  const { value, onChange } = props;
+
+  return (
+    <Tabs
+      value={value}
+      onChange={onChange}
+      aria-label="vertical-tabs"
+      orientation="vertical"
+      variant="scrollable"
+      sx={verticalTabStyles.mainTabsContainer}
+      {...props}
+    >
+      {tabItems.map((tab, idx) => {
+        return (
+          <Tab
+            key={idx}
+            sx={verticalTabStyles.mainTabContainer}
+            label={
+              <Box sx={verticalTabStyles.mainTabLabel}>
+                <span>{tab.label}</span>
+              </Box>
+            }
+          />
+        );
+      })}
+    </Tabs>
+  );
+};
+
+export default CustomVerticalTabs;

package/src/components/tabs/index.tsx

@@ -1,7 +1,9 @@
 import "./index.scss";
 import { formatClassName } from "../../libs/utils/common";
-import { CircularProgress } from "@mui/material";
+import { CircularProgress, IconButton } from "@mui/material";
 import { CraftTableOptionsProps } from "../../types/table-options";
+import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
+import { settingsOptionsProps } from "../../types/table";
 
 interface TabDataProps {
   tab_value: string | null;
@@ -10,10 +12,12 @@ interface TabDataProps {
 
 interface TableTabsProps {
   loading?: boolean;
-  tabsData: TabDataProps[] | undefined;
+  tabsData?: TabDataProps[];
   activeTab?: string;
   tableStates: CraftTableOptionsProps;
   onClick: (state: string) => void;
+  columns?: any[];
+  settingsOptions?: settingsOptionsProps;
 }
 
 export function TableTabs({
@@ -22,12 +26,19 @@ export function TableTabs({
   activeTab = "ALL",
   onClick,
   tableStates,
+  settingsOptions,
 }: TableTabsProps) {
   const handleTabClick = (tab: string) => {
-    onClick && onClick(tab);
+    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",
+  }));
+
   return (
     <div className="table-tabs">
       {loading ? (
@@ -35,49 +46,32 @@ export function TableTabs({
           <CircularProgress size={24} />
         </div>
       ) : (
-        <ul className="tabs">
-          {tabsData?.length > 0 &&
-            tabsData.map(({ tab_value, tab_value_count }) => (
+        <div className="tabs">
+          {settingsOptions?.showIcon && (
+            <IconButton
+              onClick={settingsOptions?.onClick}
+              style={{ zIndex: 1000, marginRight: "0.75rem" }}
+            >
+              <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 || "ALL")}
+                onClick={() => handleTabClick(tab_value)}
               >
-                <span className="tab__label">
-                  {typeof tab_value === "string"
-                    ? tab_value.toUpperCase()
-                    : "UNKNOWN"}
-                </span>
+                <span className="tab__label">{tab_value}</span>
                 <span className="count">{tab_value_count}</span>
               </li>
             ))}
-        </ul>
+          </ul>
+        </div>
       )}
-
-      {/* <Popover
-        open={Boolean(anchorEl)}
-        anchorEl={anchorEl}
-        onClose={() => setAnchorEl(null)}
-        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-      >
-        <Box p={2} sx={{ width: 200 }}>
-          <Typography variant="subtitle1" gutterBottom>
-            Select a Column
-          </Typography>
-          <List dense>
-            {columns.map(({ accessorKey, header }) => (
-              <ListItemButton
-                key={accessorKey}
-                onClick={() => handleColumnSelect(accessorKey)}
-              >
-                <ListItemText primary={header} />
-              </ListItemButton>
-            ))}
-          </List>
-        </Box>
-      </Popover> */}
     </div>
   );
 }

package/src/index.ts

@@ -5,3 +5,4 @@ export { TableFilter as CraftTableFilter } from "./components/filter";
 
 export * from "./types/table";
 export * from "./types/table-options";
+export * from "./types/filter-settings";

package/src/libs/hooks/useCraftTableFilterSettings.tsx

@@ -0,0 +1,176 @@
+import { useState } from "react";
+import { craftTableFilterSettingsOptionsProps } from "../../types/table-options";
+import {
+  ColumnTabConfigProps,
+  QuickTabConfigProps,
+  SettingsDataProps,
+  SortingConfigProps,
+} from "../../types/filter-settings";
+
+export function useCraftTableFilterSettings() {
+  //states for the quick filter layout
+  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",
+    //         },
+    //       ],
+    //     },
+    //   ],
+    // },
+  });
+
+  // Quick FIlter settings local states
+  const [quickTabStates, setQuickTabStates] = useState<QuickTabConfigProps>(
+    settingsData?.quick_tab || {}
+  );
+  const [columnTabState, setColumnTabState] = useState<ColumnTabConfigProps>(
+    settingsData?.column || {}
+  );
+  const [sortingTabState, setSortingTabState] = useState<SortingConfigProps>(
+    settingsData?.sorting || {}
+  );
+
+  const craftTableFilterSettingsOptions: craftTableFilterSettingsOptionsProps =
+    {
+      settingsData: settingsData,
+      setSettingsData: setSettingsData,
+      showListViewSettings: showListViewSettings,
+      setShowListViewSettings: setShowListViewSettings,
+      quickTabStates: quickTabStates,
+      setQuickTabStates: setQuickTabStates,
+      columnTabState: columnTabState,
+      setColumnTabState: setColumnTabState,
+      sortingTabState: sortingTabState,
+      setSortingTabState: setSortingTabState,
+    };
+
+  return craftTableFilterSettingsOptions;
+}