umwd-components 0.1.674 → 0.1.681

package/dist/types/components/{e-commerce → common}/EnhancedTable/EnhancedTable.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { EnhancedTableProps } from "../../../types/e-commerce/enhancedTable/types";
+import { EnhancedTableProps } from "../../../types/common/enhancedTable/types";
 declare function EnhancedTable(props: EnhancedTableProps): React.JSX.Element;
 export default EnhancedTable;

package/dist/types/components/common/EnhancedTable/EnhancedTableFilterRow.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { HeadCell } from "../../../types/common/enhancedTable/types";
+interface EnhancedTableFilterRowProps {
+    headCells: HeadCell[];
+    filters: {
+        [key: string]: string;
+    };
+    onFilterChange: (columnId: string, value: string) => void;
+    withSelection?: boolean;
+    withSubRows?: boolean;
+}
+declare function EnhancedTableFilterRow({ headCells, filters, onFilterChange, withSelection, withSubRows, }: EnhancedTableFilterRowProps): React.JSX.Element;
+export default EnhancedTableFilterRow;

package/dist/types/components/{e-commerce → common}/EnhancedTable/EnhancedTableHead.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { EnhancedTableHeadProps } from "../../../types/e-commerce/enhancedTable/types";
+import { EnhancedTableHeadProps } from "../../../types/common/enhancedTable/types";
 declare function EnhancedTableHead(props: EnhancedTableHeadProps): React.JSX.Element;
 export default EnhancedTableHead;

package/dist/types/components/{e-commerce → common}/EnhancedTable/EnhancedTableRow.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { EnhancedTableRowProps } from "../../../types/e-commerce/enhancedTable/types";
+import { EnhancedTableRowProps } from "../../../types/common/enhancedTable/types";
 declare function EnhancedTableRow(props: EnhancedTableRowProps, index: number): React.JSX.Element;
 export default EnhancedTableRow;

package/dist/types/components/{e-commerce → common}/EnhancedTable/EnhancedTableToolbar.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { EnhancedTableToolbarProps } from "../../../types/e-commerce/enhancedTable/types";
+import { EnhancedTableToolbarProps } from "../../../types/common/enhancedTable/types";
 declare function EnhancedTableToolbar(props: EnhancedTableToolbarProps): React.JSX.Element;
 export default EnhancedTableToolbar;

package/dist/types/index.d.ts

@@ -28,10 +28,10 @@ export { getHomePageData as getHomePageData, getAllPages as getAllPages, getNavi
 export { getSinglePage as getSinglePage } from "./data/loaders/page-elements/getSinglePage";
 export { default as PageBuilder } from "./components/page-builder/PageBuilder";
 export { updatePageAction as updatePageAction } from "./data/actions/pagebuilder-actions";
-export { default as EnhancedTable } from "./components/e-commerce/EnhancedTable/EnhancedTable";
-export { default as EnhancedTableRow } from "./components/e-commerce/EnhancedTable/EnhancedTableRow";
-export { default as EnhancedTableHead } from "./components/e-commerce/EnhancedTable/EnhancedTableHead";
-export { default as EnhancedTableToolbar } from "./components/e-commerce/EnhancedTable/EnhancedTableToolbar";
+export { default as EnhancedTable } from "./components/common/EnhancedTable/EnhancedTable";
+export { default as EnhancedTableRow } from "./components/common/EnhancedTable/EnhancedTableRow";
+export { default as EnhancedTableHead } from "./components/common/EnhancedTable/EnhancedTableHead";
+export { default as EnhancedTableToolbar } from "./components/common/EnhancedTable/EnhancedTableToolbar";
 export { default as ProductCard } from "./components/e-commerce/products/ProductCard";
 export { default as Price } from "./components/e-commerce/products/Price";
 export { default as ProductCategoryCard } from "./components/e-commerce/products/ProductCategoryCard";

package/dist/types/types/{e-commerce → common}/enhancedTable/types.d.ts

@@ -6,6 +6,9 @@ export interface HeadCell {
     numeric: boolean;
     align?: "left" | "right" | "center";
     sortable?: boolean;
+    filterable?: boolean;
+    filterType?: "text" | "select" | "date";
+    filterOptions?: string[];
 }
 export type Data = {
     id: number;
@@ -42,10 +45,14 @@ export interface EnhancedTableHeadProps {
     numSelected: number;
     onRequestSort: (event: React.MouseEvent<unknown>, property: string) => void;
     onSelectAllClick: (event: React.MouseEvent<unknown>) => void;
+    onFilterChange?: (columnId: string, value: string) => void;
     order: Order;
     orderBy: string;
     rowCount: number;
     headCells: HeadCell[];
+    filters?: {
+        [key: string]: string;
+    };
     withSelection?: boolean;
     withSubRows?: boolean;
 }
@@ -55,6 +62,9 @@ export interface EnhancedTableToolbarProps {
     title?: string;
     functions?: func[];
     selectFunctions?: selectFunc[];
+    showFilters?: boolean;
+    onToggleFilters?: () => void;
+    hasFilterableColumns?: boolean;
 }
 export interface EnhancedTableRowProps {
     row: Data[number];

package/dist/types/types/e-commerce/customer/types.d.ts

@@ -1,5 +1,7 @@
 import { BusinessCredentialsWithJSONProps } from "../BusinessCredentialsProps";
 import { AddressProps } from "../../AddressProps";
+import { Opo } from "../opo/types";
+import { Iro } from "../iro/types";
 export type CustomerLabel = {
     id: number;
     title: string;
@@ -23,4 +25,10 @@ export interface CustomerProfileProps {
     delivery_address: AddressProps;
     billing_address: AddressProps;
     business_credentials: BusinessCredentialsWithJSONProps;
+    orders: {
+        data: Opo[];
+    };
+    returns: {
+        data: Iro[];
+    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.674",
+  "version": "0.1.681",
   "description": "UMWD Component library",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",

package/src/components/{e-commerce → common}/EnhancedTable/EnhancedTable.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import Box from "@mui/material/Box";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
@@ -11,12 +11,13 @@ import TableRow from "@mui/material/TableRow";
 import Paper from "@mui/material/Paper";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Switch from "@mui/material/Switch";
-import { Order } from "../../../types/e-commerce/enhancedTable/types";
+import { Order } from "../../../types/common/enhancedTable/types";
 import EnhancedTableHead from "./EnhancedTableHead";
 import EnhancedTableToolbar from "./EnhancedTableToolbar";
 import EnhancedTableRow from "./EnhancedTableRow";
+import EnhancedTableFilterRow from "./EnhancedTableFilterRow";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { EnhancedTableProps } from "../../../types/e-commerce/enhancedTable/types";
+import { EnhancedTableProps } from "../../../types/common/enhancedTable/types";
 
 function EnhancedTable(props: EnhancedTableProps) {
   const {
@@ -41,6 +42,22 @@ function EnhancedTable(props: EnhancedTableProps) {
   const [page, setPage] = useState(0);
   const [dense, setDense] = useState(false);
   const [rowsPerPage, setRowsPerPage] = useState(5);
+  const [showFilters, setShowFilters] = useState(false);
+  const [filters, setFilters] = useState<{ [key: string]: string }>(() => {
+    const params = new URLSearchParams(searchParams?.toString());
+    const initialFilters: { [key: string]: string } = {};
+    headCells.forEach((cell) => {
+      if (cell.filterable) {
+        const filterValue = params.get(`filter[${cell.id}]`);
+        if (filterValue) {
+          initialFilters[cell.id] = filterValue;
+        }
+      }
+    });
+    return initialFilters;
+  });
+
+  const hasFilterableColumns = headCells.some((cell) => cell.filterable);
 
   const handleRequestSort = (
     e: React.MouseEvent<unknown>,
@@ -96,7 +113,13 @@ function EnhancedTable(props: EnhancedTableProps) {
     setDense(event.target.checked);
   };
 
-  const isSelected = (id: number) => selected.indexOf(id) !== -1;
+  const handleFilterChange = (columnId: string, value: string) => {
+    setFilters((prev) => ({
+      ...prev,
+      [columnId]: value,
+    }));
+    setPage(0); // Reset to first page when filter changes
+  };
 
   // Avoid a layout jump when reaching the last page with empty rows.
   const emptyRows =
@@ -107,6 +130,8 @@ function EnhancedTable(props: EnhancedTableProps) {
   useEffect(() => {
     if (searchParams) {
       const params = new URLSearchParams(searchParams);
+
+      // Handle sorting params
       if (order) {
         params.set("order", order);
       } else {
@@ -117,6 +142,8 @@ function EnhancedTable(props: EnhancedTableProps) {
       } else {
         params.delete("orderBy");
       }
+
+      // Handle pagination params
       if (page) {
         params.set("page", page.toString());
       } else {
@@ -127,9 +154,19 @@ function EnhancedTable(props: EnhancedTableProps) {
       } else {
         params.delete("rowsPerPage");
       }
+
+      // Handle filter params
+      Object.entries(filters).forEach(([key, value]) => {
+        if (value) {
+          params.set(`filter[${key}]`, value);
+        } else {
+          params.delete(`filter[${key}]`);
+        }
+      });
+
       replace(`${pathname}?${params.toString()}`);
     }
-  }, [order, orderBy, page, rowsPerPage]);
+  }, [order, orderBy, page, rowsPerPage, filters]);
 
   return (
     <Box sx={{ width: "100%" }}>
@@ -140,6 +177,9 @@ function EnhancedTable(props: EnhancedTableProps) {
           title={title}
           functions={functions}
           selectFunctions={selectFunctions}
+          showFilters={showFilters}
+          onToggleFilters={() => setShowFilters(!showFilters)}
+          hasFilterableColumns={hasFilterableColumns}
         />
         <TableContainer>
           <Table
@@ -153,12 +193,24 @@ function EnhancedTable(props: EnhancedTableProps) {
               orderBy={orderBy}
               onSelectAllClick={handleSelectAllClick}
               onRequestSort={handleRequestSort}
-              rowCount={rowsPerPage}
+              onFilterChange={handleFilterChange}
+              filters={filters}
+              rowCount={data.length}
               headCells={headCells}
               withSelection={withSelection}
               withSubRows={Boolean(subHeadCells && subHeadCells.length > 0)}
-            />
+            />{" "}
+            {showFilters && hasFilterableColumns && (
+              <EnhancedTableFilterRow
+                headCells={headCells}
+                filters={filters}
+                onFilterChange={handleFilterChange}
+                withSelection={withSelection}
+                withSubRows={Boolean(subHeadCells && subHeadCells.length > 0)}
+              />
+            )}
             <TableBody>
+              {" "}
               {data &&
                 data.map((row, index) => {
                   return (

package/src/components/common/EnhancedTable/EnhancedTableFilterRow.tsx

@@ -0,0 +1,121 @@
+import React from "react";
+import TableRow from "@mui/material/TableRow";
+import TableCell from "@mui/material/TableCell";
+import TextField from "@mui/material/TextField";
+import Select from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
+import { HeadCell } from "../../../types/common/enhancedTable/types";
+
+interface EnhancedTableFilterRowProps {
+  headCells: HeadCell[];
+  filters: { [key: string]: string };
+  onFilterChange: (columnId: string, value: string) => void;
+  withSelection?: boolean;
+  withSubRows?: boolean;
+}
+
+function EnhancedTableFilterRow({
+  headCells,
+  filters,
+  onFilterChange,
+  withSelection,
+  withSubRows,
+}: EnhancedTableFilterRowProps) {
+  const [draftFilters, setDraftFilters] = React.useState<{
+    [key: string]: string;
+  }>(filters);
+
+  const handleSubmit = (columnId: string, value: string) => {
+    onFilterChange(columnId, value);
+  };
+
+  return (
+    <TableRow>
+      {withSelection && <TableCell padding="checkbox" />}
+      {withSubRows && <TableCell />}
+      {headCells.map((headCell) => (
+        <TableCell
+          key={headCell.id}
+          align={headCell.numeric ? "right" : "left"}
+          padding={headCell.disablePadding ? "none" : "normal"}
+        >
+          {" "}
+          {headCell.filterable &&
+            (() => {
+              const currentValue = draftFilters[headCell.id] || "";
+
+              switch (headCell.filterType) {
+                case "select":
+                  return (
+                    <Select
+                      size="small"
+                      value={currentValue}
+                      onChange={(e) => {
+                        const value = e.target.value;
+                        setDraftFilters((prev) => ({
+                          ...prev,
+                          [headCell.id]: value,
+                        }));
+                        handleSubmit(headCell.id, value); // For select, we submit immediately
+                      }}
+                      fullWidth
+                    >
+                      <MenuItem value="">All</MenuItem>
+                      {headCell.filterOptions?.map((option) => (
+                        <MenuItem key={option} value={option}>
+                          {option}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  );
+                case "date":
+                  return (
+                    <TextField
+                      type="date"
+                      size="small"
+                      value={currentValue}
+                      onChange={(e) =>
+                        setDraftFilters((prev) => ({
+                          ...prev,
+                          [headCell.id]: e.target.value,
+                        }))
+                      }
+                      onBlur={() => handleSubmit(headCell.id, currentValue)}
+                      onKeyPress={(e) => {
+                        if (e.key === "Enter") {
+                          handleSubmit(headCell.id, currentValue);
+                        }
+                      }}
+                      fullWidth
+                    />
+                  );
+                default:
+                  return (
+                    <TextField
+                      size="small"
+                      placeholder={`Filter ${headCell.label}`}
+                      value={currentValue}
+                      onChange={(e) =>
+                        setDraftFilters((prev) => ({
+                          ...prev,
+                          [headCell.id]: e.target.value,
+                        }))
+                      }
+                      onBlur={() => handleSubmit(headCell.id, currentValue)}
+                      onKeyPress={(e) => {
+                        if (e.key === "Enter") {
+                          handleSubmit(headCell.id, currentValue);
+                        }
+                      }}
+                      fullWidth
+                    />
+                  );
+              }
+            })()}
+        </TableCell>
+      ))}
+    </TableRow>
+  );
+}
+
+export default EnhancedTableFilterRow;

package/src/components/{e-commerce → common}/EnhancedTable/EnhancedTableHead.tsx

@@ -5,9 +5,8 @@ import TableCell from "@mui/material/TableCell";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import TableSortLabel from "@mui/material/TableSortLabel";
-// import { visuallyHidden } from "@mui/utils";
 import { visuallyHidden } from "@mui/utils";
-import { EnhancedTableHeadProps } from "../../../types/e-commerce/enhancedTable/types";
+import { EnhancedTableHeadProps } from "../../../types/common/enhancedTable/types";
 
 function EnhancedTableHead(props: EnhancedTableHeadProps) {
   const {
@@ -52,24 +51,27 @@ function EnhancedTableHead(props: EnhancedTableHeadProps) {
             padding={headCell.disablePadding ? "none" : "normal"}
             sortDirection={orderBy === headCell.id ? order : false}
           >
-            {headCell.sortable !== false ? (
-              <TableSortLabel
-                active={orderBy === headCell.id}
-                direction={orderBy === headCell.id ? order : "asc"}
-                onClick={createSortHandler(headCell.id)}
-              >
-                {headCell.label}
-                {orderBy === headCell.id ? (
-                  <Box component="span" sx={visuallyHidden}>
-                    {order === "desc"
-                      ? "sorted descending"
-                      : "sorted ascending"}
-                  </Box>
-                ) : null}
-              </TableSortLabel>
-            ) : (
-              <>{headCell.label}</>
-            )}
+            {" "}
+            <Box>
+              {headCell.sortable !== false ? (
+                <TableSortLabel
+                  active={orderBy === headCell.id}
+                  direction={orderBy === headCell.id ? order : "asc"}
+                  onClick={createSortHandler(headCell.id)}
+                >
+                  {headCell.label}
+                  {orderBy === headCell.id ? (
+                    <Box component="span" sx={visuallyHidden}>
+                      {order === "desc"
+                        ? "sorted descending"
+                        : "sorted ascending"}
+                    </Box>
+                  ) : null}
+                </TableSortLabel>
+              ) : (
+                <span>{headCell.label}</span>
+              )}
+            </Box>
           </TableCell>
         ))}
       </TableRow>

package/src/components/{e-commerce → common}/EnhancedTable/EnhancedTableRow.tsx

@@ -11,7 +11,7 @@ import TableBody from "@mui/material/TableBody";
 import Checkbox from "@mui/material/Checkbox";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import { EnhancedTableRowProps } from "../../../types/e-commerce/enhancedTable/types";
+import { EnhancedTableRowProps } from "../../../types/common/enhancedTable/types";
 
 function EnhancedTableRow(props: EnhancedTableRowProps, index: number) {
   const {

package/src/components/{e-commerce → common}/EnhancedTable/EnhancedTableToolbar.tsx

@@ -3,11 +3,21 @@ import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
+import FilterListIcon from "@mui/icons-material/FilterList";
 import { alpha } from "@mui/material/styles";
-import { EnhancedTableToolbarProps } from "../../../types/e-commerce/enhancedTable/types";
+import { EnhancedTableToolbarProps } from "../../../types/common/enhancedTable/types";
 
 function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
-  const { title, selected, setSelected, functions, selectFunctions } = props;
+  const {
+    title,
+    selected,
+    setSelected,
+    functions,
+    selectFunctions,
+    showFilters,
+    onToggleFilters,
+    hasFilterableColumns,
+  } = props;
 
   const numSelected = selected.length;
 
@@ -62,6 +72,7 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
         </>
       ) : (
         <>
+          {" "}
           {functions &&
             functions.map((func, index) => (
               <Tooltip key={index} title={func.label}>
@@ -70,6 +81,13 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
                 </IconButton>
               </Tooltip>
             ))}
+          {hasFilterableColumns && (
+            <Tooltip title="Filter list">
+              <IconButton onClick={onToggleFilters}>
+                <FilterListIcon color={showFilters ? "primary" : "inherit"} />
+              </IconButton>
+            </Tooltip>
+          )}
         </>
       )}
     </Toolbar>