umwd-components 0.1.834 → 0.1.836

package/dist/esm/src/components/e-commerce/products/AddProductForm.js

@@ -0,0 +1,91 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useActionState, useEffect, useState } from 'react';
+import Box from '@mui/material/Box';
+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 Grid from '@mui/material/Grid';
+import { SubmitButton } from '../../SubmitButton.js';
+import { createProductAction } from '../../../data/actions/e-commerce/product/createProductAction.js';
+import { MediaLibraryDialog } from '../../common/media/MediaLibraryDialog.js';
+import { StrapiImage } from '../../StrapiImage.js';
+import { PriceFields } from './PriceFields.js';
+import CategorySelector from '../categories/CategorySelectorV2.js';
+import { DimensionsFields } from '../../common/Dimensions.js';
+import VendorSelector from '../../logistics/vendor/VendorSelector.js';
+import MarkdownEditor from '../../common/markdown/MarkdownEditor.js';
+import { useSnackbar } from '../../../context/common/SnackbarContext.js';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    severity: null,
+    data: null,
+    message: null,
+};
+const AddProductForm = ({ vendorArr, categories, revalidateCallback, handleClose, sx, }) => {
+    const [formState, formAction] = useActionState(createProductAction, INITIAL_STATE);
+    const { handleAddMessage } = useSnackbar();
+    useEffect(() => {
+        if (formState?.message) {
+            handleAddMessage({
+                message: formState.message,
+                severity: formState.severity || "error",
+            });
+            if (formState.severity === "success") {
+                revalidateCallback && revalidateCallback();
+                handleClose && handleClose();
+            }
+        }
+    }, [formState?.message]);
+    useEffect(() => {
+        if (formState?.strapiErrors) {
+            handleAddMessage({
+                message: formState.strapiErrors.message || "Error adding product",
+                severity: formState.severity || "error",
+            });
+        }
+    }, [formState?.strapiErrors]);
+    const [mediaDialogOpen, setMediaDialogOpen] = useState(null);
+    const [productImage, setProductImage] = useState(null);
+    const [productGallery, setProductGallery] = useState([]);
+    function handleSelectImage(item) {
+        setProductImage(item);
+    }
+    function handleSelectGallery(item) {
+        const maxSelection = 5;
+        const index = productGallery.indexOf(item);
+        if (index > -1) {
+            const arr = [...productGallery];
+            arr.splice(productGallery.indexOf(item), 1);
+            setProductGallery(arr);
+        }
+        else if (productGallery.length >= maxSelection) {
+            setProductGallery([...productGallery]);
+        }
+        else {
+            setProductGallery([...productGallery, item]);
+        }
+    }
+    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsx("form", { action: formAction, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: 12, children: jsx(Typography, { variant: "h3", component: "h1", children: "Add New Product" }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "title", name: "title", label: "Title" }), jsx(MarkdownEditor, { name: "description", label: "Description" }), jsx(TextField, { id: "external_product_number", name: "external_product_number", label: "External Product Number" })] }) }), jsxs(Grid, { size: 6, children: [jsx(Typography, { variant: "h6", children: "Product Image" }), jsx("input", { id: "image", type: "hidden", name: "image", value: productImage?.id || "" }), jsx(StrapiImage, { id: productImage?.id || "", url: productImage?.url || "", alternativeText: "product image", width: productImage?.width && productImage?.height
+                                    ? 200 * (productImage.width / productImage.height)
+                                    : 200, height: 200 }), jsx(Button, { onClick: () => setMediaDialogOpen("image"), children: "open media library" }), jsx(MediaLibraryDialog, { open: mediaDialogOpen === "image", handleClose: () => setMediaDialogOpen(null), handleCancel: () => {
+                                    setProductImage(null);
+                                    setMediaDialogOpen(null);
+                                }, handleSelect: handleSelectImage, selected: productImage ? [productImage] : [] })] }), jsxs(Grid, { size: 6, children: [jsx(Typography, { variant: "h6", children: "Image Gallery" }), jsx("input", { id: "gallery", type: "hidden", name: "gallery", value: JSON.stringify(productGallery.map((item) => item.id)) }), jsx(Stack, { direction: "row", spacing: 2, children: productGallery.map((item) => {
+                                    return (jsx(StrapiImage, { id: item.id, url: item.url, alternativeText: "gallery image", width: 100 * (item.width / item.height), height: 100 }, item.id));
+                                }) }), jsx(Button, { onClick: () => setMediaDialogOpen("gallery"), children: "open media library" }), jsx(MediaLibraryDialog, { open: mediaDialogOpen === "gallery", handleClose: () => setMediaDialogOpen(null), handleCancel: () => {
+                                    setProductGallery([]);
+                                    setMediaDialogOpen(null);
+                                }, handleSelect: handleSelectGallery, selected: productGallery })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Price" }), jsx(PriceFields, { componentName: "price", componentReference: "e-commerce-elements.price" })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Categories" }), jsx(CategorySelector, { categories: categories, currentValue: [] })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Dimensions" }), jsx(DimensionsFields, { componentName: "dimensions", componentReference: "e-commerce-elements.dimensions" })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Vendors" }), jsx(VendorSelector, { vendorNames: vendorArr, currentValue: null })] }), jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { py: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "create new product", loadingText: "loading" })] }) })] }) }) }));
+};
+
+export { AddProductForm };

package/dist/esm/src/components/e-commerce/products/EditProductForm.js

@@ -0,0 +1,102 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useActionState, useEffect, useState } from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import { SubmitButton } from '../../SubmitButton.js';
+import { updateProductAction } from '../../../data/actions/e-commerce/product/updateProductAction.js';
+import { MediaLibraryDialog } from '../../common/media/MediaLibraryDialog.js';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import { StrapiImage } from '../../StrapiImage.js';
+import { PriceFields } from './PriceFields.js';
+import CategorySelector from '../categories/CategorySelectorV2.js';
+import { DimensionsFields } from '../../common/Dimensions.js';
+import VendorSelector from '../../logistics/vendor/VendorSelector.js';
+import MarkdownEditor from '../../common/markdown/MarkdownEditor.js';
+import { useSnackbar } from '../../../context/common/SnackbarContext.js';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    severity: null,
+    data: null,
+    message: null,
+};
+function EditProductForm({ data, vendorArr, categoriesArray, revalidateCallback, handleClose, sx, }) {
+    const { documentId, title, description, external_product_number, image, gallery, price, dimensions, categories, vendors, } = data;
+    console.log("price", price);
+    const initialGallery = gallery || [];
+    const initialCategories = categories || [];
+    console.log("initialCategories", initialCategories);
+    const { handleAddMessage } = useSnackbar();
+    const [formState, formAction] = useActionState(updateProductAction.bind(null, documentId), INITIAL_STATE);
+    useEffect(() => {
+        if (formState?.message) {
+            handleAddMessage({
+                message: formState.message,
+                severity: formState.severity || "error",
+            });
+            if (formState.severity === "success") {
+                revalidateCallback && revalidateCallback();
+                handleClose && handleClose();
+            }
+        }
+    }, [formState?.message]);
+    useEffect(() => {
+        if (formState?.strapiErrors) {
+            handleAddMessage({
+                message: formState.strapiErrors.message || "Error updating product",
+                severity: formState.severity || "error",
+            });
+        }
+    }, [formState?.strapiErrors]);
+    const [mediaDialogOpen, setMediaDialogOpen] = useState(null);
+    const [productImage, setProductImage] = useState(image || null);
+    const [productGallery, setProductGallery] = useState([...initialGallery]);
+    function handleSelectImage(item) {
+        setProductImage(item);
+    }
+    function handleSelectGallery(item) {
+        const maxSelection = 5;
+        /**
+         * INFO: This cannot be handled by .index(item) because the item is an object
+         * which is slightly different than the object in the array
+         */
+        const index = productGallery.findIndex((image) => image.id === item.id);
+        if (index > -1) {
+            const arr = [...productGallery];
+            arr.splice(index, 1);
+            setProductGallery(arr);
+        }
+        else if (productGallery.length >= maxSelection) {
+            setProductGallery([...productGallery]);
+        }
+        else {
+            setProductGallery([...productGallery, item]);
+        }
+    }
+    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsx("form", { action: formAction, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: 12, children: jsx(Typography, { variant: "h3", component: "h1", children: "Edit Product" }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "title", name: "title", label: "Title", defaultValue: title }), jsx(MarkdownEditor, { name: "description", label: "Description", defaultValue: description }), jsx(TextField, { id: "external_product_number", name: "external_product_number", label: "External Product Number", defaultValue: external_product_number })] }) }), jsxs(Grid, { size: 6, children: [jsx(Typography, { variant: "h6", children: "Product Image" }), jsx("input", { id: "image", type: "hidden", name: "image", value: productImage?.id }), jsx(StrapiImage, { id: productImage?.id || "", url: productImage?.url || "", alternativeText: "product image", width: productImage?.width && productImage?.height
+                                    ? 200 * (productImage.width / productImage.height)
+                                    : 200, height: 200 }), jsx(Button, { onClick: () => setMediaDialogOpen("image"), children: "open media library" }), jsx(MediaLibraryDialog, { open: mediaDialogOpen === "image", handleClose: () => setMediaDialogOpen(null), handleCancel: () => {
+                                    setProductImage(null);
+                                    setMediaDialogOpen(null);
+                                }, handleSelect: handleSelectImage, selected: productImage ? [productImage] : [] })] }), jsxs(Grid, { size: 6, children: [jsx(Typography, { variant: "h6", children: "Image Gallery" }), jsx("input", { id: "gallery", type: "hidden", name: "gallery", value: JSON.stringify(productGallery.map((item) => item.id)) }), jsx(Stack, { direction: "row", spacing: 2, children: productGallery.map((item) => {
+                                    return (jsx(StrapiImage, { id: item.id, url: item.url, alternativeText: "gallery image", width: item?.width && item?.height
+                                            ? 100 * (item.width / item.height)
+                                            : 100, height: 100 }, item.id));
+                                }) }), jsx(Button, { onClick: () => setMediaDialogOpen("gallery"), children: "open media library" }), jsx(MediaLibraryDialog, { open: mediaDialogOpen === "gallery", handleClose: () => setMediaDialogOpen(null), handleCancel: () => {
+                                    setProductGallery([]);
+                                    setMediaDialogOpen(null);
+                                }, handleSelect: handleSelectGallery, selected: productGallery })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Price" }), jsx(PriceFields, { componentName: "price", componentReference: "e-commerce-elements.price", data: price })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Categories" }), jsx(CategorySelector, { categories: categoriesArray, currentValue: [...initialCategories.map((cat) => cat.documentId)] })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Dimensions" }), jsx(DimensionsFields, { componentName: "dimensions", componentReference: "e-commerce-elements.dimensions", data: dimensions })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Vendors" }), jsx(VendorSelector, { vendorNames: vendorArr, currentValue: vendors[0]?.documentId })] }), jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { py: 1 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "update product", loadingText: "loading" })] }) })] }) }) }));
+}
+
+export { EditProductForm };

package/dist/esm/src/components/e-commerce/products/EditReturnStockForm.js

@@ -0,0 +1,82 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useActionState, useEffect } from 'react';
+import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { updateProductAction } from '../../../data/actions/e-commerce/product/updateProductAction.js';
+import Grid from '@mui/material/Grid';
+import ReportsDisplay from '../../logistics/report/ReportsDisplay.js';
+import ReportMakingComponent from '../../logistics/report/ReportMakingComponent.js';
+import { useSnackbar } from '../../../context/common/SnackbarContext.js';
+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 TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Tooltip from '@mui/material/Tooltip';
+import Button from '@mui/material/Button';
+import { AmountIndicator } from '../../common/AmountIndicator.js';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+    severity: null,
+};
+function EditReturnStockForm({ data, revalidateCallback, handleClose, sx, }) {
+    const { id, documentId, title, product_number, stock, iros, opoItems, reports, } = data;
+    const { handleAddMessage } = useSnackbar();
+    // Bind the documentId to the form action following form patterns
+    const boundAction = updateProductAction.bind(null, documentId);
+    const [formState, formAction] = useActionState(boundAction, INITIAL_STATE);
+    useEffect(() => {
+        if (formState?.message) {
+            handleAddMessage({
+                message: formState.message,
+                severity: formState.severity || "error",
+            });
+            if (formState.severity === "success") {
+                revalidateCallback && revalidateCallback();
+                handleClose && handleClose();
+            }
+        }
+    }, [formState?.message, handleAddMessage, revalidateCallback, handleClose]);
+    useEffect(() => {
+        if (formState?.strapiErrors) {
+            handleAddMessage({
+                message: formState.strapiErrors.message || "Error updating stock",
+                severity: "error",
+            });
+        }
+    }, [formState?.strapiErrors, handleAddMessage]);
+    return (jsxs(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: [jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: 12, children: jsxs(Typography, { variant: "h6", children: ["Return product: ", title] }) }), jsx(Grid, { size: 12, children: jsxs(TableContainer, { component: Paper, children: [jsx(Typography, { variant: "h6", sx: { pl: 2 }, children: "Incoming return orders" }), jsxs(Table, { size: "small", children: [jsx(TableHead, { children: jsxs(TableRow, { children: [jsx(TableCell, { children: "Number" }), jsx(TableCell, { children: "Order Date" }), jsx(TableCell, { children: "Line Item Number" }), jsx(TableCell, { children: "Ordered Quantity" }), jsx(TableCell, { children: "Received Quantity" }), jsx(TableCell, { children: "Registered Quantity" }), jsx(TableCell, { children: "Released Quantity" })] }) }), jsx(TableBody, { children: Array.isArray(iros) ? (iros.map((iro) => iro.iro_items.map((item) => (jsxs(TableRow, { children: [jsx(TableCell, { children: iro.iro_number }), jsx(TableCell, { children: iro.order_date }), jsx(TableCell, { children: item.line_item_number }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.returned_quantity, maxValue: item.returned_quantity, color: "primary" }) }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.received_quantity, maxValue: item.returned_quantity, color: "primary" }) }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.registered_quantity, maxValue: item.returned_quantity, color: "primary" }) }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.released_quantity, maxValue: item.returned_quantity, color: "primary" }) })] }, iro.documentId))))) : (jsx(TableRow, { children: jsx(TableCell, { colSpan: 7, align: "center", children: "No returns found." }) })) })] }), jsx(Table, { size: "small", children: jsx(TableBody, { children: jsxs(TableRow, { children: [jsx(TableCell, { align: "right", children: "Items returned:" }), jsx(TableCell, { children: jsx(Tooltip, { title: "Total stock", children: jsx(Typography, { children: (Array.isArray(iros) && iros.length > 0
+                                                                ? iros.reduce((total, iro) => total +
+                                                                    iro.iro_items.reduce((itemTotal, item) => itemTotal + item.released_quantity, 0), 0)
+                                                                : 0) +
+                                                                (reports
+                                                                    ? reports.reduce((total, report) => total + report.quantity, 0)
+                                                                    : 0) }) }) }), jsx(TableCell, { children: jsx(Tooltip, { title: "Total stock after updating", children: jsx("b", { children: (Array.isArray(iros) && iros.length > 0
+                                                                ? iros.reduce((total, iro) => total +
+                                                                    iro.iro_items.reduce((itemTotal, item) => itemTotal + item.released_quantity, 0), 0)
+                                                                : 0) +
+                                                                (reports
+                                                                    ? reports.reduce((total, report) => total + report.quantity, 0)
+                                                                    : 0) }) }) })] }) }) })] }) })] }), jsxs("form", { action: formAction, children: [jsx("input", { id: "stock_reports", type: "hidden", name: "stock_reports", value: JSON.stringify(reports) }), jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: 12, sx: { mt: 2 }, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Stock corrections" }), jsx(Typography, { variant: "body2", children: "Here you can report and correct for damages wrong items etc. Do not forget to click the button!" }), jsx(ReportsDisplay, { reports: reports }), jsx(Stack, { direction: "row", justifyContent: "flex-end", children: jsx(ReportMakingComponent, { content: "content", quantity: 0, type: "stock", related: [
+                                                    {
+                                                        id: id,
+                                                        __type: "api::e-commerce.product",
+                                                    },
+                                                ], revalidateCallback: revalidateCallback, biggerButton: true }) })] }) }), jsx(Grid, { size: 12, children: jsx(Stack, { direction: "row", justifyContent: "flex-end", alignItems: "center", sx: { py: 1 }, children: handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Close" })) }) })] })] })] }));
+}
+
+export { EditReturnStockForm };

package/dist/esm/src/components/e-commerce/products/EditStockForm.js

@@ -0,0 +1,107 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useActionState, useEffect } from 'react';
+import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { updateProductAction } from '../../../data/actions/e-commerce/product/updateProductAction.js';
+import Grid from '@mui/material/Grid';
+import ReportsDisplay from '../../logistics/report/ReportsDisplay.js';
+import ReportMakingComponent from '../../logistics/report/ReportMakingComponent.js';
+import { useSnackbar } from '../../../context/common/SnackbarContext.js';
+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 TableFooter from '@mui/material/TableFooter';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Tooltip from '@mui/material/Tooltip';
+import Button from '@mui/material/Button';
+import { AmountIndicator } from '../../common/AmountIndicator.js';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+    severity: null,
+};
+function EditStockForm({ data, revalidateCallback, handleClose, sx, }) {
+    const { id, documentId, title, product_number, stock, ipos, opos, opoItems, reports, } = data;
+    const { handleAddMessage } = useSnackbar();
+    // Bind the documentId to the form action following form patterns
+    const boundAction = updateProductAction.bind(null, documentId);
+    const [formState, formAction] = useActionState(boundAction, INITIAL_STATE);
+    useEffect(() => {
+        if (formState?.message) {
+            handleAddMessage({
+                message: formState.message,
+                severity: formState.severity || "error",
+            });
+            if (formState.severity === "success") {
+                revalidateCallback && revalidateCallback();
+                handleClose && handleClose();
+            }
+        }
+    }, [formState?.message, handleAddMessage, revalidateCallback, handleClose]);
+    useEffect(() => {
+        if (formState?.strapiErrors) {
+            handleAddMessage({
+                message: formState.strapiErrors.message || "Error updating stock",
+                severity: "error",
+            });
+        }
+    }, [formState?.strapiErrors, handleAddMessage]);
+    return (jsxs(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: [jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: 12, children: jsx(Typography, { variant: "h6", children: title }) }), jsx(Grid, { size: 12, children: jsxs(TableContainer, { component: Paper, children: [jsx(Typography, { variant: "h6", sx: { pl: 2 }, children: "Incoming orders" }), jsxs(Table, { size: "small", children: [jsx(TableHead, { children: jsxs(TableRow, { children: [jsx(TableCell, { children: "Number" }), jsx(TableCell, { children: "Order Date" }), jsx(TableCell, { children: "Line Item Number" }), jsx(TableCell, { children: "Ordered Quantity" }), jsx(TableCell, { children: "Received Quantity" }), jsx(TableCell, { children: "Registered Quantity" }), jsx(TableCell, { children: "Released Quantity" })] }) }), jsx(TableBody, { children: Array.isArray(ipos) ? (ipos.map((ipo) => ipo.items.map((item) => (jsxs(TableRow, { children: [jsx(TableCell, { children: ipo.ipo_number }), jsx(TableCell, { children: ipo.order_date }), jsx(TableCell, { children: item.line_item_number }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.ordered_quantity, maxValue: item.ordered_quantity, color: "primary" }) }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.received_quantity, maxValue: item.ordered_quantity, color: "primary" }) }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.registered_quantity, maxValue: item.ordered_quantity, color: "primary" }) }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.released_quantity, maxValue: item.ordered_quantity, color: "primary" }) })] }, ipo.documentId))))) : (jsx(TableRow, { children: jsx(TableCell, { colSpan: 7, align: "center", children: "No incoming orders found." }) })) }), jsx(TableFooter, { children: jsxs(TableRow, { children: [jsx(TableCell, { colSpan: 6, align: "right", children: "Total added to stock:" }), jsx(TableCell, { children: Array.isArray(ipos)
+                                                            ? ipos.reduce((total, ipo) => total +
+                                                                ipo.items.reduce((itemTotal, item) => itemTotal + item.released_quantity, 0), 0)
+                                                            : 0 })] }) })] }), jsx(Typography, { variant: "h6", sx: { pl: 2 }, children: "Outgoing orders" }), jsxs(Table, { size: "small", children: [jsx(TableHead, { children: jsxs(TableRow, { children: [jsx(TableCell, { children: "Number" }), jsx(TableCell, { children: "Order Date" }), jsx(TableCell, { children: "Line Item Number" }), jsx(TableCell, { children: "Ordered Quantity" }), jsx(TableCell, { children: "Picked Quantity" }), jsx(TableCell, { children: "Packed Quantity" }), jsx(TableCell, { children: "Shipped Quantity" })] }) }), jsx(TableBody, { children: Array.isArray(opos) ? (opos.map((opo) => opo.opo_items.map((item) => (jsxs(TableRow, { children: [jsx(TableCell, { children: opo.opo_number }), jsx(TableCell, { children: opo.order_date }), jsx(TableCell, { children: item.line_item_number }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.ordered_quantity, maxValue: item.ordered_quantity, color: "primary" }) }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.picked_quantity, maxValue: item.ordered_quantity, color: "primary" }) }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.packed_quantity, maxValue: item.ordered_quantity, color: "primary" }) }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.shipped_quantity, maxValue: item.ordered_quantity, color: "primary" }) })] }, opo.documentId))))) : (jsx(TableRow, { children: jsx(TableCell, { colSpan: 7, align: "center", children: "No outgoing orders found" }) })) }), jsx(TableFooter, { children: jsxs(TableRow, { children: [jsx(TableCell, { colSpan: 3, align: "right", children: "Total reduced from stock:" }), jsx(TableCell, { children: Array.isArray(opos)
+                                                            ? opos.reduce((total, opo) => total +
+                                                                opo.opo_items.reduce((itemTotal, item) => itemTotal + item.ordered_quantity, 0), 0)
+                                                            : 0 })] }) })] }), jsx(Table, { size: "small", children: jsxs(TableBody, { children: [jsxs(TableRow, { children: [jsx(TableCell, { align: "right", children: "Total added to stock:" }), jsx(TableCell, { children: Array.isArray(ipos) && ipos.length > 0
+                                                            ? ipos.reduce((total, ipo) => total +
+                                                                ipo.items.reduce((itemTotal, item) => itemTotal + item.released_quantity, 0), 0)
+                                                            : 0 })] }), jsxs(TableRow, { children: [jsx(TableCell, { align: "right", children: "Total reduced from stock:" }), jsx(TableCell, { children: Array.isArray(opos) && opos.length > 0
+                                                            ? opos.reduce((total, opo) => total +
+                                                                opo.opo_items.reduce((itemTotal, item) => itemTotal + item.ordered_quantity, 0), 0)
+                                                            : 0 })] }), jsxs(TableRow, { children: [jsx(TableCell, { align: "right", children: "Corrections:" }), jsx(TableCell, { children: jsx(Tooltip, { title: "Total stock corrections", children: jsx(Typography, { children: reports
+                                                                    ? reports.reduce((total, report) => total + report.quantity, 0)
+                                                                    : 0 }) }) }), jsx(TableCell, { children: jsx(Tooltip, { title: "Total stock corrections after updating", children: jsx("b", { children: reports
+                                                                    ? reports.reduce((total, report) => total + report.quantity, 0)
+                                                                    : 0 }) }) })] }), jsxs(TableRow, { children: [jsx(TableCell, { align: "right", children: "Stock:" }), jsx(TableCell, { children: jsx(Tooltip, { title: "Total stock", children: jsx(Typography, { children: (Array.isArray(ipos) && ipos.length > 0
+                                                                    ? ipos.reduce((total, ipo) => total +
+                                                                        ipo.items.reduce((itemTotal, item) => itemTotal + item.released_quantity, 0), 0)
+                                                                    : 0) -
+                                                                    (Array.isArray(opos) && opos.length > 0
+                                                                        ? opos.reduce((total, opo) => total +
+                                                                            opo.opo_items.reduce((itemTotal, item) => itemTotal + item.ordered_quantity, 0), 0)
+                                                                        : 0) +
+                                                                    (reports
+                                                                        ? reports.reduce((total, report) => total + report.quantity, 0)
+                                                                        : 0) }) }) }), jsx(TableCell, { children: jsx(Tooltip, { title: "Total stock after updating", children: jsx("b", { children: (Array.isArray(ipos) && ipos.length > 0
+                                                                    ? ipos.reduce((total, ipo) => total +
+                                                                        ipo.items.reduce((itemTotal, item) => itemTotal + item.released_quantity, 0), 0)
+                                                                    : 0) -
+                                                                    (Array.isArray(opos) && opos.length > 0
+                                                                        ? opos.reduce((total, opo) => total +
+                                                                            opo.opo_items.reduce((itemTotal, item) => itemTotal + item.ordered_quantity, 0), 0)
+                                                                        : 0) +
+                                                                    (reports
+                                                                        ? reports.reduce((total, report) => total + report.quantity, 0)
+                                                                        : 0) }) }) })] })] }) })] }) })] }), jsxs("form", { action: formAction, children: [jsx("input", { id: "stock_reports", type: "hidden", name: "stock_reports", value: JSON.stringify(reports) }), jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: 12, sx: { mt: 2 }, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Stock corrections" }), jsx(Typography, { variant: "body2", children: "Here you can report and correct for damages wrong items etc. Do not forget to click the button!" }), jsx(ReportsDisplay, { reports: reports }), jsx(Stack, { direction: "row", justifyContent: "flex-end", children: jsx(ReportMakingComponent, { content: "content", quantity: 0, type: "stock", related: [
+                                                    {
+                                                        id: id,
+                                                        __type: "api::e-commerce.product",
+                                                    },
+                                                ], revalidateCallback: revalidateCallback, biggerButton: true }) })] }) }), jsx(Grid, { size: 12, children: jsx(Stack, { direction: "row", justifyContent: "flex-end", alignItems: "center", sx: { py: 1 }, children: handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Close" })) }) })] })] })] }));
+}
+
+export { EditStockForm };

package/dist/esm/src/components/e-commerce/products/Price.js

@@ -0,0 +1,18 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Chip from '@mui/material/Chip';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+
+function Price(priceData) {
+    const { vat_rate, vat, price_incl_vat, price } = priceData;
+    return (jsx(Tooltip, { title: jsxs(Stack, { direction: "column", children: [vat_rate && (jsxs(Typography, { variant: "body2", children: ["vat rate: ", vat_rate, " %"] })), jsxs(Typography, { variant: "body2", children: ["vat: \u20AC ", vat] }), jsxs(Typography, { variant: "body2", children: ["price incl. vat: \u20AC ", price_incl_vat] })] }), children: jsx(Chip, { label: `€ ${price}` }) }));
+}
+
+export { Price as default };

package/dist/esm/src/components/e-commerce/products/PriceFields.js

@@ -0,0 +1,46 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import TextField from '@mui/material/TextField';
+import EuroIcon from '@mui/icons-material/Euro';
+import InputAdornment from '@mui/material/InputAdornment';
+import Stack from '@mui/material/Stack';
+
+function PriceFields({ data, componentName, componentReference, }) {
+    const { vat_rate, vat, price_incl_vat, price } = data || {};
+    const [priceState, setPriceState] = useState(price?.toString() || "");
+    const [vatRateState, setVatRateState] = useState(() => vat_rate?.toString() || "21");
+    const [vatState, setVatState] = useState(vat || 0);
+    const [priceInclVatState, setPriceInclVatState] = useState(price_incl_vat || 0);
+    useEffect(() => {
+        if (priceState && vatRateState) {
+            const price = parseFloat(priceState);
+            const vatRate = parseFloat(vatRateState);
+            const vat = price * (vatRate / 100);
+            const priceInclVat = price + vat;
+            setVatState(vat);
+            setPriceInclVatState(priceInclVat);
+        }
+    }, [priceState, vatRateState]);
+    return (jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(TextField, { id: "price", InputProps: {
+                    startAdornment: (jsx(InputAdornment, { position: "start", children: jsx(EuroIcon, {}) })),
+                }, name: `${componentName}.price`, label: "price", type: "float", value: priceState, onChange: (e) => {
+                    setPriceState(e.target.value);
+                } }), jsx(TextField, { id: "vat_rate", name: `${componentName}.vat_rate`, type: "number", InputProps: {
+                    endAdornment: jsx(InputAdornment, { position: "end", children: "%" }),
+                }, label: "Vat Rate", value: vatRateState, onChange: (e) => {
+                    setVatRateState(e.target.value);
+                } }), jsx(TextField, { id: "vat", InputProps: {
+                    startAdornment: (jsx(InputAdornment, { position: "start", children: jsx(EuroIcon, {}) })),
+                }, name: `${componentName}.vat`, label: "Vat", value: vatState?.toFixed(2), disabled: true }), jsx("input", { hidden: true, name: `${componentName}.vat`, value: vatState?.toFixed(2), readOnly: true }), jsx(TextField, { id: "price_incl_vat", InputProps: {
+                    startAdornment: (jsx(InputAdornment, { position: "start", children: jsx(EuroIcon, {}) })),
+                }, name: `${componentName}.price_incl_vat`, label: "Price Incl VAT", value: priceInclVatState?.toFixed(2), disabled: true }), jsx("input", { hidden: true, name: `${componentName}.price_incl_vat`, value: priceInclVatState?.toFixed(2), readOnly: true })] }));
+}
+
+export { PriceFields };

package/dist/esm/src/components/e-commerce/products/ProductCard.js

@@ -0,0 +1,49 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import Price from './Price.js';
+import { getStrapiMedia } from '../../../lib/utils.js';
+import { StyledLink } from '../../StyledLink.js';
+import AddToCartButton from '../cart/AddToCartButton.client.js';
+import MarkdownDisplay from '../../common/markdown/MarkdownDisplay.js';
+
+function ProductCard({ product, sx = [] }) {
+    const { documentId, uuid, product_number, title, description, slug, price, image, stock, } = product;
+    const imgURL = getStrapiMedia(image?.url);
+    const thumbURL = getStrapiMedia(image?.formats?.thumbnail?.url);
+    return (jsxs(Card, { sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            { width: "100%", height: "100%" },
+            { display: "flex", flexDirection: "column" },
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], children: [jsx(CardMedia, { component: "img", height: "140", src: `${imgURL}`, alt: image?.alternativeText || "fallback alt text" }), jsxs(CardContent, { children: [jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { pb: 2 }, children: [jsx(StyledLink, { href: `/shop/${slug}`, target: "_self", children: title }), jsx(Price, { price: price.price, vat: price.vat, vat_rate: price.vat_rate, price_incl_vat: price.price_incl_vat })] }), description && (jsx(MarkdownDisplay, { children: description.substring(0, 150) + "..." }))] }), jsx(Box, { sx: { flexGrow: 1 } }), jsxs(CardActions, { sx: {
+                    display: "flex",
+                    justifyContent: "flex-end",
+                    alignItems: "flex-end",
+                }, children: [jsx(Button, { size: "small", href: `/shop/${slug}`, children: "Learn More" }), jsx(AddToCartButton, { product: {
+                            documentId: documentId,
+                            uuid: uuid,
+                            slug: slug,
+                            thumb: thumbURL,
+                            title: title,
+                            vat_rate: price.vat_rate,
+                            price_excl_vat: price.price,
+                            price_incl_vat: price.price_incl_vat,
+                            quantity: 1,
+                            product_number: product_number,
+                            stock: stock,
+                        } })] })] }));
+}
+
+export { ProductCard as default };

package/dist/esm/src/components/e-commerce/products/ProductCategoryCard.js

@@ -0,0 +1,40 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Grid from '@mui/material/Grid';
+import Card from '@mui/material/Card';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import ProductCard from './ProductCard.js';
+import MarkdownDisplay from '../../common/markdown/MarkdownDisplay.js';
+
+function ProductCategoryCard({ category, sx = [] }) {
+    const { title, description, slug, products } = category;
+    const PRODUCTS_PER_CATEGORY = 3;
+    return (jsx(Card, { sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            { width: "100%", height: "100%", pt: 2, pl: 2, pb: 2, mb: 2 },
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], children: jsxs(Grid, { container: true, spacing: 2, size: 12, children: [jsxs(Grid, { sx: {
+                        display: "flex",
+                        justifyContent: "start",
+                        alignItems: "center",
+                        gap: 2,
+                        flexDirection: "column",
+                    }, size: {
+                        xs: 12,
+                        sm: 6,
+                        md: 3
+                    }, children: [jsx(Typography, { variant: "h4", component: "h1", align: "center", children: title }), description && (jsx(Box, { sx: { textAlign: "center", p: 2, overflow: "hidden" }, children: jsx(MarkdownDisplay, { children: description }) })), jsxs(Button, { variant: "contained", color: "primary", href: `/shop/categories/${slug}`, children: ["See all ", category.title] }), products.data.length - PRODUCTS_PER_CATEGORY > 0 && (jsxs(Typography, { variant: "body2", children: [products.data.length - PRODUCTS_PER_CATEGORY, " more..."] }))] }), products.data.slice(0, PRODUCTS_PER_CATEGORY).map((product) => (jsx(Grid, { size: {
+                        xs: 12,
+                        sm: 6,
+                        md: 3
+                    }, children: jsx(ProductCard, { product: product }, product.documentId) })))] }) }));
+}
+
+export { ProductCategoryCard as default };

package/dist/esm/src/components/e-commerce/products/ProductSelector.js

@@ -0,0 +1,65 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+
+const ProductSelector = ({ name = "products", productNames, currentValue, // Should be an array of document IDs
+sx, multiple = true, onChangeCallback, }) => {
+    const [selectedValues, setSelectedValues] = useState(currentValue || []);
+    const handleProductChange = (event, value) => {
+        // null check for value
+        if (!value) {
+            setSelectedValues([]);
+            if (onChangeCallback)
+                onChangeCallback([]);
+            return;
+        }
+        if (Array.isArray(value)) {
+            if (multiple === true) {
+                // If multiple is true, we take all selected products' documentIds
+                const ids = value.map((product) => product.documentId);
+                setSelectedValues(ids);
+                if (onChangeCallback)
+                    onChangeCallback(ids);
+                return;
+            }
+            else {
+                // If multiple is false, we take the first selected product's documentId
+                const firstId = value[0].documentId;
+                setSelectedValues([firstId]);
+                if (onChangeCallback)
+                    onChangeCallback([firstId]);
+                return;
+            }
+        }
+        else if (!Array.isArray(value) && value.documentId) {
+            // If value is a single ProductName object, we take its documentId
+            setSelectedValues([value.documentId]);
+            if (onChangeCallback)
+                onChangeCallback([value.documentId]);
+            return;
+        }
+        // If value is empty or not an array or object, reset selected values
+        setSelectedValues([]);
+        if (onChangeCallback)
+            onChangeCallback([]);
+    };
+    return (jsxs(Box, { sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], children: [jsx(Autocomplete, { multiple: multiple, options: productNames, getOptionLabel: (option) => {
+                    return `${option?.product_number || "Unknown Product"} | ${option?.title || "Untitled Product"}`;
+                }, filterSelectedOptions: true, onChange: handleProductChange, renderInput: (params) => jsx(TextField, { ...params, label: "Products" }), value: multiple
+                    ? productNames.filter((productName) => selectedValues.includes(productName.documentId))
+                    : // If not multiple, we return the first matching product
+                        productNames.filter((productName) => selectedValues.includes(productName.documentId))[0] || "" }), jsx("input", { type: "hidden", name: name, value: JSON.stringify(selectedValues) })] }));
+};
+
+export { ProductSelector as default };