umwd-components 0.1.834 → 0.1.835

package/dist/esm/src/components/common/AmountUpdater.js

@@ -0,0 +1,123 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+import Badge from '@mui/material/Badge';
+import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
+import { useTheme, styled } from '@mui/material/styles';
+
+function AmountUpdater({ currentValue, totalValue, minnewvalue, maxnewvalue, color, handleChange, offsetEnd, // offsetEnd is the offset of the end of the slider
+ }) {
+    const percentage = (100 / totalValue) * currentValue;
+    const [newValue, setNewValue] = useState(currentValue);
+    const newPercentage = (100 / totalValue) * newValue;
+    // is offsetEnd actually in use?
+    const offSetPercentage = offsetEnd ? (100 / totalValue) * offsetEnd * -1 : 0;
+    const theme = useTheme();
+    const addOne = () => {
+        if (newValue + 1 <= maxnewvalue) {
+            setNewValue(newValue + 1);
+            handleChange(newValue + 1);
+        }
+    };
+    const substractOne = () => {
+        if (newValue - 1 >= minnewvalue) {
+            setNewValue(newValue - 1);
+            handleChange(newValue - 1);
+        }
+    };
+    const addStep = (step) => {
+        if (newValue + step <= maxnewvalue) {
+            setNewValue(newValue + step);
+            handleChange(newValue + step);
+        }
+    };
+    const substractStep = (step) => {
+        if (newValue - step >= minnewvalue) {
+            setNewValue(newValue - step);
+            handleChange(newValue - step);
+        }
+    };
+    useEffect(() => {
+        setNewValue(currentValue);
+    }, [currentValue]);
+    const StyledBadge = styled(Badge)(({ theme }) => ({
+        "& .MuiBadge-badge": {
+            backgroundColor: "#fff",
+            fontWeight: "bold",
+            color: "black",
+            mixBlendMode: "lighten",
+            margin: "-1px 0px",
+            padding: "0px 4px",
+        },
+    }));
+    const StyledIconButton = styled(IconButton)(({ theme }) => ({
+        "&:hover": {
+            color: theme.palette.primary.main,
+            "& .MuiBadge-badge": {
+                backgroundColor: theme.palette.primary.main,
+            },
+        },
+    }));
+    return (jsxs(Box, { sx: [
+            {
+                display: "flex",
+                alignItems: "center",
+                background: `
+          linear-gradient(90deg, ${theme.palette[color].main}55 ${percentage}%, ${theme.palette[color].main}33 ${percentage}%),
+          linear-gradient(90deg, ${theme.palette[color].main}55 ${newPercentage}%, ${theme.palette[color].main}33 ${newPercentage}%)
+          `,
+                width: "100%",
+                borderRadius: "16px",
+                padding: "2px",
+                justifyContent: "space-between",
+            },
+            newValue - totalValue === 1 && {
+                paddingRight: "4px",
+                background: `linear-gradient(-90deg, ${theme.palette[color].main}33 4px, ${theme.palette[color].main}66 4px)`,
+            },
+            newValue - totalValue === 2 && {
+                paddingRight: "8px",
+                background: `linear-gradient(-90deg, ${theme.palette[color].main}33 8px, ${theme.palette[color].main}66 8px)`,
+            },
+            newValue - totalValue === 3 && {
+                paddingRight: "12px",
+                background: `linear-gradient(-90deg, ${theme.palette[color].main}33 12px, ${theme.palette[color].main}66 12px)`,
+            },
+            newValue - totalValue === 4 && {
+                paddingRight: "16px",
+                background: `linear-gradient(-90deg, ${theme.palette[color].main}33 16px, ${theme.palette[color].main}66 16px)`,
+            },
+            newValue - totalValue >= 5 && {
+                paddingRight: "20px",
+                background: `linear-gradient(-90deg, ${theme.palette[color].main}33 20px, ${theme.palette[color].main}66 20px)`,
+            },
+            offsetEnd != undefined &&
+                offsetEnd < 0 && {
+                background: `linear-gradient(-90deg, ${theme.palette.error.main} ${offSetPercentage}%, ${theme.palette[color].main}66 ${offSetPercentage}%)`,
+            },
+        ], children: [jsxs(Box, { children: [newValue - 100 >= minnewvalue && (jsx(StyledIconButton, { size: "small", onClick: (e) => substractStep(100), children: jsx(StyledBadge, { badgeContent: 100, max: 100, anchorOrigin: {
+                                vertical: "bottom",
+                                horizontal: "left",
+                            }, children: jsx(RemoveCircleIcon, {}) }) })), newValue - 25 >= minnewvalue && (jsx(StyledIconButton, { size: "small", onClick: (e) => substractStep(25), children: jsx(StyledBadge, { badgeContent: 25, anchorOrigin: {
+                                vertical: "bottom",
+                                horizontal: "left",
+                            }, children: jsx(RemoveCircleIcon, {}) }) })), newValue - 10 >= minnewvalue && (jsx(StyledIconButton, { size: "small", onClick: (e) => substractStep(10), children: jsx(StyledBadge, { badgeContent: 10, anchorOrigin: {
+                                vertical: "bottom",
+                                horizontal: "left",
+                            }, children: jsx(RemoveCircleIcon, {}) }) })), newValue - 5 >= minnewvalue && (jsx(StyledIconButton, { size: "small", onClick: (e) => substractStep(5), children: jsx(StyledBadge, { badgeContent: 5, anchorOrigin: {
+                                vertical: "bottom",
+                                horizontal: "left",
+                            }, children: jsx(RemoveCircleIcon, {}) }) })), jsx(StyledIconButton, { size: "small", onClick: () => substractOne(), disabled: newValue - 1 < minnewvalue, children: jsx(RemoveCircleIcon, {}) })] }), jsxs(Stack, { direction: "row", spacing: 1, children: [currentValue !== totalValue ? (jsx(Typography, { variant: "body2", children: `${currentValue} / ${totalValue}` })) : (jsx(Typography, { variant: "body2", children: `${currentValue}` })), newValue !== currentValue && (jsx(Typography, { variant: "body2", children: `+ (${newValue - currentValue}) = ${newValue}` }))] }), jsxs(Box, { children: [jsx(StyledIconButton, { size: "small", onClick: () => addOne(), disabled: newValue + 1 > maxnewvalue, children: jsx(AddCircleIcon, {}) }), newValue + 5 <= maxnewvalue && (jsx(StyledIconButton, { size: "small", onClick: (e) => addStep(5), children: jsx(StyledBadge, { badgeContent: 5, children: jsx(AddCircleIcon, {}) }) })), newValue + 10 <= maxnewvalue && (jsx(StyledIconButton, { size: "small", onClick: (e) => addStep(10), children: jsx(StyledBadge, { badgeContent: 10, children: jsx(AddCircleIcon, {}) }) })), newValue + 25 <= maxnewvalue && (jsx(StyledIconButton, { size: "small", onClick: (e) => addStep(25), children: jsx(StyledBadge, { badgeContent: 25, children: jsx(AddCircleIcon, {}) }) })), newValue + 100 <= maxnewvalue && (jsx(StyledIconButton, { size: "small", onClick: (e) => addStep(100), children: jsx(StyledBadge, { badgeContent: 100, max: 100, children: jsx(AddCircleIcon, {}) }) }))] })] }));
+}
+
+export { AmountUpdater, AmountUpdater as default };

package/dist/esm/src/components/common/Contacts.js

@@ -0,0 +1,31 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import { ContactType } from '../../types/common/Contact.js';
+import Autocomplete from '@mui/material/Autocomplete';
+import IconButton from '@mui/material/IconButton';
+import { Delete } from '@mui/icons-material';
+
+function Contacts({ data, }) {
+    const { documentId, first_name, last_name, email, phone_number, type, onClick, } = data;
+    return (jsx(Stack, { children: jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(AccountCircleIcon, {}), jsxs(Stack, { children: [jsxs(Typography, { children: [first_name, " ", last_name] }), jsx(Typography, { children: email }), jsx(Typography, { children: phone_number }), jsx(Typography, { children: type }), onClick && (jsx(Button, { onClick: (e) => {
+                                if (first_name) {
+                                    onClick(e, first_name); // TODO need fixing!!
+                                }
+                            }, children: "Edit" }))] })] }) }));
+}
+function ContactsFields({ data, componentName, componentReference, deleteCallback, }) {
+    const { first_name, last_name, email, phone_number, type } = data || {};
+    return (jsxs(Stack, { spacing: 1, children: [jsxs(Stack, { spacing: 1, direction: "row", children: [jsx(TextField, { id: "first_name", name: `${componentName}.first_name`, label: "First Name", defaultValue: first_name || "" }), deleteCallback && (jsx(IconButton, { onClick: deleteCallback, children: jsx(Delete, {}) }))] }), jsx(TextField, { id: "last_name", name: `${componentName}.last_name`, label: "Last Name", defaultValue: last_name || "" }), jsx(TextField, { id: "email", name: `${componentName}.email`, label: "E-mail", defaultValue: email || "" }), jsx(TextField, { id: "phone_number", name: `${componentName}.phone_number`, label: "Phone Number", defaultValue: phone_number || "" }), jsx(Autocomplete, { id: "type", options: Object.values(ContactType), defaultValue: type || Object.values(ContactType)[0], renderInput: (params) => (jsx(TextField, { ...params, name: `${componentName}.type`, label: "Type" })) })] }));
+}
+
+export { ContactsFields, Contacts as default };

package/dist/esm/src/components/common/Dimensions.js

@@ -0,0 +1,18 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import '@mui/material/Typography';
+import HomeIcon from '@mui/icons-material/Home';
+
+function DimensionsFields({ data, componentName, componentReference, }) {
+    const { width_mm, height_mm, depth_mm, weight_gr } = data || {};
+    return (jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(HomeIcon, {}), jsxs(Stack, { spacing: 1, sx: { flex: 1 }, children: [jsx(TextField, { id: "width_mm", type: "number", name: `${componentName}.width_mm`, label: "Width (mm)", defaultValue: width_mm || "" }), jsx(TextField, { id: "height_mm", type: "number", name: `${componentName}.height_mm`, label: "Height (mm)", defaultValue: height_mm || "" }), jsx(TextField, { id: "depth_mm", type: "number", name: `${componentName}.depth_mm`, label: "Depth (mm)", defaultValue: depth_mm || "" }), jsx(TextField, { id: "weight_gr", type: "number", name: `${componentName}.weight_gr`, label: "Weight (gr)", defaultValue: weight_gr || "" })] })] }));
+}
+
+export { DimensionsFields };

package/dist/esm/src/components/common/EnhancedTable/EnhancedTable.js

@@ -0,0 +1,169 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import Box from '@mui/material/Box';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TablePagination from '@mui/material/TablePagination';
+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 EnhancedTableHead from './EnhancedTableHead.js';
+import EnhancedTableToolbar from './EnhancedTableToolbar.js';
+import EnhancedTableRow from './EnhancedTableRow.js';
+import EnhancedTableFilterRow from './EnhancedTableFilterRow.js';
+import { useRouter, usePathname, useSearchParams } from 'next/navigation';
+
+function EnhancedTable(props) {
+    const { data, meta, headCells, subHeadCells, withSelection, title, subTitle, functions, selectFunctions, } = props;
+    const { replace } = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const [order, setOrder] = useState("asc");
+    const [orderBy, setOrderBy] = useState("createdAt");
+    const [selected, setSelected] = useState([]);
+    const [page, setPage] = useState(0);
+    const [dense, setDense] = useState(false);
+    const [rowsPerPage, setRowsPerPage] = useState(5);
+    const [showFilters, setShowFilters] = useState(false);
+    const [filters, setFilters] = useState(() => {
+        const params = new URLSearchParams(searchParams?.toString());
+        const initialFilters = {};
+        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, property) => {
+        const isAsc = orderBy === property && order === "asc";
+        setOrder(isAsc ? "desc" : "asc");
+        setOrderBy(property);
+    };
+    const handleSelectAllClick = (e) => {
+        const target = e.target;
+        if (target.checked) {
+            const newSelected = data.map((n) => n.documentId);
+            setSelected(newSelected);
+            return;
+        }
+        setSelected([]);
+    };
+    const handleSelectClick = (e, id) => {
+        const selectedIndex = selected.indexOf(id);
+        let newSelected = [];
+        if (selectedIndex === -1) {
+            newSelected = newSelected.concat(selected, id);
+        }
+        else if (selectedIndex === 0) {
+            newSelected = newSelected.concat(selected.slice(1));
+        }
+        else if (selectedIndex === selected.length - 1) {
+            newSelected = newSelected.concat(selected.slice(0, -1));
+        }
+        else if (selectedIndex > 0) {
+            newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
+        }
+        setSelected(newSelected);
+    };
+    const handleChangePage = (event, newPage) => {
+        setPage(newPage);
+    };
+    const handleChangeRowsPerPage = (event) => {
+        setRowsPerPage(parseInt(event.target.value, 10));
+        setPage(0);
+    };
+    const handleChangeDense = (event) => {
+        setDense(event.target.checked);
+    };
+    const handleFilterChange = (columnId, value) => {
+        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 = page + 1 === meta?.pagination?.pageCount
+        ? meta?.pagination?.total - meta?.pagination?.pageCount * rowsPerPage
+        : 0;
+    useEffect(() => {
+        if (searchParams) {
+            // Store current scroll position
+            const scrollPosition = {
+                x: window.scrollX,
+                y: window.scrollY,
+            };
+            const params = new URLSearchParams(searchParams);
+            // Handle sorting params
+            if (order) {
+                params.set("order", order);
+            }
+            else {
+                params.delete("order");
+            }
+            if (orderBy) {
+                params.set("orderBy", orderBy);
+            }
+            else {
+                params.delete("orderBy");
+            }
+            // Handle pagination params
+            if (page) {
+                params.set("page", page.toString());
+            }
+            else {
+                params.delete("page");
+            }
+            if (rowsPerPage) {
+                params.set("rowsPerPage", rowsPerPage.toString());
+            }
+            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}]`);
+                }
+            });
+            /**
+             * to get the filtersobject from the URL search params
+             * * const params = new URLSearchParams(searchParams);
+              const filters = {};
+              params.forEach((value, key) => {
+              if (key.startsWith("filter[")) {
+              filters[key.slice(7, -1)] = value;
+              }
+             *
+             *  */ replace(`${pathname}?${params.toString()}`, { scroll: false });
+            // Restore scroll position after URL update
+            requestAnimationFrame(() => {
+                window.scrollTo(scrollPosition.x, scrollPosition.y);
+            });
+        }
+    }, [order, orderBy, page, rowsPerPage, filters]);
+    return (jsxs(Box, { sx: { width: "100%" }, children: [jsxs(Paper, { sx: { width: "100%", mb: 2 }, children: [jsx(EnhancedTableToolbar, { selected: selected, setSelected: setSelected, title: title, functions: functions, selectFunctions: selectFunctions, showFilters: showFilters, onToggleFilters: () => setShowFilters(!showFilters), hasFilterableColumns: hasFilterableColumns }), jsx(TableContainer, { children: jsxs(Table, { sx: { minWidth: 750 }, "aria-labelledby": "tableTitle", size: dense ? "small" : "medium", children: [jsx(EnhancedTableHead, { numSelected: selected.length, order: order, orderBy: orderBy, onSelectAllClick: handleSelectAllClick, onRequestSort: handleRequestSort, rowCount: data.length, headCells: headCells, withSelection: withSelection, withSubRows: !!subHeadCells }), jsxs(TableBody, { children: [showFilters && (jsx(EnhancedTableFilterRow, { headCells: headCells, filters: filters, onFilterChange: handleFilterChange, withSelection: withSelection, withSubRows: !!subHeadCells })), data.map((row, index) => (jsx(EnhancedTableRow, { row: row, headCells: headCells, subHeadCells: subHeadCells, withSelection: withSelection, isSelected: selected.includes(row.documentId), handleSelectClick: handleSelectClick, subTitle: subTitle }, row.documentId || row.key || index))), emptyRows > 0 && (jsx(TableRow, { style: {
+                                                height: (dense ? 33 : 53) * emptyRows,
+                                            }, children: jsx(TableCell, { colSpan: headCells.length +
+                                                    (withSelection ? 1 : 0) +
+                                                    (subHeadCells ? 1 : 0) }) }))] })] }) }), jsx(TablePagination, { rowsPerPageOptions: [5, 10, 25], component: "div", count: meta?.pagination?.total, rowsPerPage: rowsPerPage, page: page, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage })] }), jsx(FormControlLabel, { control: jsx(Switch, { checked: dense, onChange: handleChangeDense }), label: "Dense padding" })] }));
+}
+
+export { EnhancedTable as default };

package/dist/esm/src/components/common/EnhancedTable/EnhancedTableFilterRow.js

@@ -0,0 +1,68 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+
+function EnhancedTableFilterRow({ headCells, filters, onFilterChange, withSelection, withSubRows, }) {
+    const [draftFilters, setDraftFilters] = React.useState(filters);
+    const handleSubmit = (columnId, value) => {
+        onFilterChange(columnId, value);
+    };
+    // Function to handle select values with spaces
+    const handleSelectChange = (headCellId, value) => {
+        setDraftFilters((prev) => ({ ...prev, [headCellId]: value }));
+        handleSubmit(headCellId, value);
+    };
+    return (jsxs(TableRow, { children: [withSelection && jsx(TableCell, { padding: "checkbox" }), withSubRows && jsx(TableCell, {}), headCells.map((headCell) => (jsx(TableCell, { align: headCell.numeric ? "right" : "left", padding: headCell.disablePadding ? "none" : "normal", children: headCell.filterable &&
+                    (() => {
+                        const currentValue = draftFilters[headCell.id] || "";
+                        switch (headCell.filterType) {
+                            case "select":
+                                return (jsxs(Select, { size: "small", value: currentValue, onChange: (e) => handleSelectChange(headCell.id, e.target.value), fullWidth: true, sx: { height: 32 }, children: [jsx(MenuItem, { value: "", children: "All" }), headCell.filterOptions?.map((option) => (jsx(MenuItem, { value: option, children: option }, option)))] }));
+                            case "date":
+                                const [startDate, endDate] = currentValue
+                                    ? currentValue.split(",")
+                                    : ["", ""];
+                                return (jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [jsx(TextField, { type: "date", size: "small", InputProps: {
+                                                sx: { height: 32, fontSize: "0.875rem" },
+                                            }, value: startDate, onChange: (e) => setDraftFilters((prev) => ({
+                                                ...prev,
+                                                [headCell.id]: [e.target.value, endDate]
+                                                    .filter(Boolean)
+                                                    .join(","),
+                                            })), sx: { width: 130 } }), jsx(TextField, { type: "date", size: "small", InputProps: {
+                                                sx: { height: 32, fontSize: "0.875rem" },
+                                            }, value: endDate, onChange: (e) => setDraftFilters((prev) => ({
+                                                ...prev,
+                                                [headCell.id]: [startDate, e.target.value]
+                                                    .filter(Boolean)
+                                                    .join(","),
+                                            })), sx: { width: 130 } }), jsx(Button, { size: "small", sx: { minWidth: 32, height: 32, px: 0.5 }, onClick: () => {
+                                                setDraftFilters((prev) => ({
+                                                    ...prev,
+                                                    [headCell.id]: "",
+                                                }));
+                                                handleSubmit(headCell.id, "");
+                                            }, children: "\u2715" }), jsx(Button, { size: "small", variant: "contained", sx: { minWidth: 32, height: 32, px: 0.5 }, onClick: () => handleSubmit(headCell.id, draftFilters[headCell.id] || ""), children: "\u2713" })] }));
+                            default:
+                                return (jsx(TextField, { size: "small", placeholder: `Filter ${headCell.label}`, value: currentValue, InputProps: { sx: { height: 32, fontSize: "0.875rem" } }, onChange: (e) => setDraftFilters((prev) => ({
+                                        ...prev,
+                                        [headCell.id]: e.target.value,
+                                    })), onBlur: () => handleSubmit(headCell.id, currentValue), onKeyDown: (e) => e.key === "Enter" &&
+                                        handleSubmit(headCell.id, currentValue), fullWidth: true }));
+                        }
+                    })() }, headCell.id)))] }));
+}
+
+export { EnhancedTableFilterRow as default };

package/dist/esm/src/components/common/EnhancedTable/EnhancedTableHead.js

@@ -0,0 +1,30 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Box from '@mui/material/Box';
+import Checkbox from '@mui/material/Checkbox';
+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 '../../../../node_modules/@mui/utils/esm/visuallyHidden/visuallyHidden.js';
+
+function EnhancedTableHead(props) {
+    const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort, headCells, withSelection, withSubRows, } = props;
+    const createSortHandler = (property) => (event) => {
+        onRequestSort(event, property);
+    };
+    return (jsx(TableHead, { children: jsxs(TableRow, { children: [withSelection && (jsx(TableCell, { padding: "checkbox", children: jsx(Checkbox, { color: "primary", indeterminate: numSelected > 0 && numSelected < rowCount, checked: rowCount > 0 && numSelected === rowCount, 
+                        //onChange={onSelectAllClick}
+                        onClick: (event) => onSelectAllClick(event), inputProps: {
+                            "aria-label": "select all desserts",
+                        } }) })), withSubRows && jsx(TableCell, {}), headCells.map((headCell) => (jsxs(TableCell, { align: headCell.numeric ? "right" : "left", padding: headCell.disablePadding ? "none" : "normal", sortDirection: orderBy === headCell.id ? order : false, children: [" ", jsx(Box, { children: headCell.sortable !== false ? (jsxs(TableSortLabel, { active: orderBy === headCell.id, direction: orderBy === headCell.id ? order : "asc", onClick: createSortHandler(headCell.id), children: [headCell.label, orderBy === headCell.id ? (jsx(Box, { component: "span", sx: visuallyHidden, children: order === "desc"
+                                            ? "sorted descending"
+                                            : "sorted ascending" })) : null] })) : (jsx("span", { children: headCell.label })) })] }, headCell.id)))] }) }));
+}
+
+export { EnhancedTableHead as default };

package/dist/esm/src/components/common/EnhancedTable/EnhancedTableRow.js

@@ -0,0 +1,30 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { Fragment } from 'react';
+import Box from '@mui/material/Box';
+import TableRow from '@mui/material/TableRow';
+import TableCell from '@mui/material/TableCell';
+import IconButton from '@mui/material/IconButton';
+import Collapse from '@mui/material/Collapse';
+import Typography from '@mui/material/Typography';
+import Table from '@mui/material/Table';
+import TableHead from '@mui/material/TableHead';
+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';
+
+function EnhancedTableRow(props, index) {
+    const { row, headCells, subHeadCells, withSelection, isSelected, handleSelectClick, subTitle, } = props;
+    const { subRows } = row;
+    const [open, setOpen] = React.useState(false);
+    const colspan = headCells.length + (withSelection ? 1 : 0) + (subHeadCells ? 1 : 0);
+    return (jsxs(Fragment, { children: [jsxs(TableRow, { sx: { "& > *": { borderBottom: "unset" } }, children: [withSelection && (jsx(TableCell, { padding: "checkbox", children: jsx(Checkbox, { color: "primary", checked: isSelected, onClick: (event) => handleSelectClick && handleSelectClick(event, row.documentId) }) })), subRows && subHeadCells && (jsx(TableCell, { children: jsx(IconButton, { "aria-label": "expand row", size: "small", onClick: () => setOpen(!open), children: open ? jsx(KeyboardArrowUpIcon, {}) : jsx(KeyboardArrowDownIcon, {}) }) })), headCells.map((cell, index) => (jsx(TableCell, { align: cell.numeric ? "right" : "left", padding: cell.disablePadding ? "none" : "normal", children: row[cell.id] }, cell.id + index)))] }), subRows && subHeadCells && (jsx(TableRow, { children: jsx(TableCell, { style: { paddingBottom: 0, paddingTop: 0 }, colSpan: colspan, children: jsx(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: jsxs(Box, { sx: { margin: 1 }, children: [jsx(Typography, { variant: "h6", gutterBottom: true, component: "div", children: subTitle }), jsxs(Table, { size: "small", "aria-label": "purchases", children: [jsx(TableHead, { children: jsx(TableRow, { children: subHeadCells.map((cell) => (jsx(TableCell, { align: cell.numeric ? "right" : "left", padding: cell.disablePadding ? "none" : "normal", children: cell.label }, `${row.documentId}${cell.id}`))) }) }), jsx(TableBody, { children: subRows.map((subRow, index) => (jsx(TableRow, { children: subHeadCells.map((cell, index) => (jsx(TableCell, { align: cell.numeric ? "right" : "left", padding: cell.disablePadding ? "none" : "normal", children: subRow[cell.id] }, `${subRow.documentId}${subRow.key}${cell.id}${index}`))) }, `${subRow.documentId}-${subRow.key}-${index}`))) })] })] }) }) }) }))] }));
+}
+
+export { EnhancedTableRow as default };

package/dist/esm/src/components/common/EnhancedTable/EnhancedTableToolbar.js

@@ -0,0 +1,32 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+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';
+
+function EnhancedTableToolbar(props) {
+    const { title, selected, setSelected, functions, selectFunctions, showFilters, onToggleFilters, hasFilterableColumns, } = props;
+    const numSelected = selected.length;
+    return (jsxs(Toolbar, { sx: {
+            pl: { sm: 2 },
+            pr: { xs: 1, sm: 1 },
+            ...(numSelected > 0 && {
+                bgcolor: (theme) => alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
+            }),
+        }, children: [numSelected > 0 ? (jsxs(Typography, { sx: { flex: "1 1 100%" }, color: "inherit", variant: "subtitle1", component: "div", children: [numSelected, " selected"] })) : (jsx(Typography, { sx: { flex: "1 1 100%" }, variant: "h6", id: "tableTitle", component: "div", children: title })), numSelected > 0 ? (jsx(Fragment, { children: selectFunctions &&
+                    selectFunctions.map((func, index) => (jsx(Tooltip, { title: func.label, children: jsx(IconButton, { onClick: (e) => {
+                                func.onClick(e, selected);
+                                setSelected && setSelected([]);
+                            }, children: func.icon }) }, index))) })) : (jsxs(Fragment, { children: [" ", functions &&
+                        functions.map((func, index) => (jsx(Tooltip, { title: func.label, children: jsx(IconButton, { onClick: (e) => func.onClick(e), children: func.icon }) }, index))), hasFilterableColumns && (jsx(Tooltip, { title: "Filter list", children: jsx(IconButton, { onClick: onToggleFilters, children: jsx(FilterListIcon, { color: showFilters ? "primary" : "inherit" }) }) }))] }))] }));
+}
+
+export { EnhancedTableToolbar as default };

package/dist/esm/src/components/common/ImagePreviewTooltip.js

@@ -0,0 +1,30 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Tooltip from '@mui/material/Tooltip';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { StrapiImage } from '../StrapiImage.js';
+
+function ImagePreviewTooltip({ label, image }) {
+    return (jsx(Tooltip, { title: jsxs(Fragment, { children: [image?.formats !== undefined ? (jsx(StrapiImage, { id: image.id, url: `${image.formats.thumbnail.url}`, alternativeText: "", width: image.formats.thumbnail.width, height: image.formats.thumbnail.height, style: {
+                        maxWidth: "100%",
+                        height: "auto",
+                    } })) : (jsx(Typography, { variant: "body2", children: "No image available" })), jsx(Typography, { variant: "body2", children: label ? label : image.alt })] }), children: jsx(Box, { sx: {
+                display: "block",
+                position: "relative",
+                width: 36,
+                height: 36,
+                borderRadius: "50%",
+                overflow: "hidden",
+            }, children: image?.formats !== undefined ? (jsx(StrapiImage, { id: image.id, url: `${image.formats.thumbnail.url}`, alternativeText: "", width: image.formats.thumbnail.width, height: image.formats.thumbnail.height, style: {
+                    maxWidth: "100%",
+                    height: "auto",
+                } })) : (jsx(Typography, { variant: "body2", children: "No image available" })) }) }));
+}
+
+export { ImagePreviewTooltip as default };

package/dist/esm/src/components/common/NumberInput.js

@@ -0,0 +1,48 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import React, { useEffect } from 'react';
+import TextField from '@mui/material/TextField';
+
+const NumberInput = (props) => {
+    const { label, minnewvalue, maxnewvalue, setValueCallback } = props;
+    const [value, setValue] = React.useState(0);
+    useEffect(() => {
+        setValueCallback && setValueCallback(value);
+    }, [value]);
+    return (jsx(TextField, { type: "number", label: label, size: "small", value: value, onChange: (event) => {
+            const newValue = Number(event.target.value);
+            if (minnewvalue !== undefined && maxnewvalue !== undefined) {
+                setValue(Math.max(minnewvalue, Math.min(newValue, maxnewvalue)));
+            }
+            else if (minnewvalue !== undefined) {
+                setValue(Math.max(newValue, minnewvalue));
+            }
+            else if (maxnewvalue !== undefined) {
+                setValue(Math.min(newValue, maxnewvalue));
+            }
+            else {
+                setValue(newValue);
+            }
+        }, inputProps: {
+            step: 1,
+            min: minnewvalue ?? undefined,
+            max: maxnewvalue ?? undefined,
+        }, onWheel: (event) => {
+            // `event.currentTarget` is a callable type but is targetting the MUI element
+            // whereas `event.target` targets the input element but does not have the callable type, so casting
+            event.target.blur();
+        }, helperText: `min: ${minnewvalue}, max: ${maxnewvalue}`, error: (minnewvalue !== undefined && value < minnewvalue) ||
+            (maxnewvalue !== undefined && value > maxnewvalue) ||
+            props.error, sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            { width: "9rem" },
+            ...(Array.isArray(props?.sx) ? props.sx : [props.sx]),
+        ] }));
+};
+
+export { NumberInput as default };

package/dist/esm/src/components/common/Pagination.js

@@ -0,0 +1,46 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import { useRouter, usePathname, useSearchParams } from 'next/navigation';
+import MuiPagination from '@mui/material/Pagination';
+import Box from '@mui/material/Box';
+import { useTheme } from '@mui/material/styles';
+
+function Pagination({ pageCount }) {
+    const router = useRouter();
+    const theme = useTheme();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const currentPage = searchParams !== null ? Number(searchParams.get("page")) : 1;
+    const createPageURL = (pageNumber) => {
+        // Provide an empty string as a fallback if searchParams is null
+        const params = new URLSearchParams(searchParams ?? "");
+        params.set("page", pageNumber.toString());
+        return `${pathname}?${params.toString()}`;
+    };
+    const changePage = (event, value) => {
+        const url = createPageURL(value);
+        router.push(url);
+    };
+    return (jsx(Box, { sx: [
+            {
+                background: theme.palette.primary.main,
+                color: theme.palette.primary.contrastText,
+                p: 2,
+                textAlign: "center",
+                borderRadius: 2,
+                mt: 2,
+                "& .MuiButtonBase-root": {
+                    color: theme.palette.primary.contrastText,
+                },
+            },
+            Boolean(pageCount == 1) && { visibility: "hidden" },
+        ], children: jsx(MuiPagination, { count: pageCount, page: currentPage, onChange: changePage, disabled: Boolean(pageCount === 1) }) }));
+}
+
+export { Pagination as default };