umwd-components 0.1.833 → 0.1.835

package/dist/esm/src/components/e-commerce/invoice/CreateInvoiceForm.js

@@ -0,0 +1,170 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useActionState, useState, useEffect } from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import { SubmitButton } from '../../SubmitButton.js';
+import { createInvoiceAction } from '../../../data/actions/e-commerce/invoices/createInvoiceAction.js';
+import Grid from '@mui/material/Grid';
+import { AddressFields } from '../../common/Address.js';
+import Divider from '@mui/material/Divider';
+import { BusinessCredentialsFields } from '../customer/BusinessCredentials.js';
+import { CustomerSelector } from '../customer/CustomerSelector.js';
+import { getSingleCustomer } from '../../../data/loaders/e-commerce/getSingleCustomer.js';
+import Checkbox from '@mui/material/Checkbox';
+import { InvoiceItemFields } from './InvoiceItemFields.js';
+import { getPublicInformation } from '../../../data/loaders/public-information/getPublicInformation.js';
+import MarkdownEditor from '../../common/markdown/MarkdownEditor.js';
+import { useSnackbar } from '../../../context/common/SnackbarContext.js';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+    severity: null,
+};
+function CreateInvoiceForm({ customerLabels, revalidateCallback, handleClose, sx, }) {
+    const [formState, formAction] = useActionState(createInvoiceAction, INITIAL_STATE);
+    const { handleAddMessage } = useSnackbar();
+    const [withBillingAddress, setWithBillingAddress] = useState(false);
+    const [withDeliveryAddress, setWithDeliveryAddress] = useState(false);
+    const [customerDefaults, setCustomerDefaults] = useState(null);
+    const [invoice, setInvoice] = useState(null);
+    // Message handling effect
+    useEffect(() => {
+        if (formState?.message) {
+            handleAddMessage({
+                message: formState.message,
+                severity: formState.severity || "error",
+            });
+            if (formState.severity === "success") {
+                revalidateCallback && revalidateCallback();
+                handleClose && handleClose();
+            }
+        }
+    }, [formState?.message]);
+    // Error handling effect
+    useEffect(() => {
+        if (formState?.strapiErrors) {
+            handleAddMessage({
+                message: formState.strapiErrors.message || "Error creating invoice",
+                severity: formState.severity || "error",
+            });
+        }
+    }, [formState?.strapiErrors]);
+    const onChangeCustomer = async (selectedValues) => {
+        if (selectedValues.length === 0) {
+            setCustomerDefaults(null);
+            return;
+        }
+        // get single customer profile
+        const customer = await getSingleCustomer(selectedValues[0]);
+        setCustomerDefaults(customer);
+    };
+    const onChangeItems = (items) => {
+        setInvoice((prev) => {
+            if (!prev)
+                return null;
+            return {
+                ...prev,
+                items: items.map((item) => ({
+                    ...item,
+                    product: "product" in item ? item.product : undefined,
+                    item_description: "item_description" in item ? item.item_description : undefined,
+                    price_excl_vat: "price_excl_vat" in item ? item.price_excl_vat : 0,
+                    vat_rate: "vat_rate" in item ? item.vat_rate : 0,
+                    vat: "vat" in item ? item.vat : 0,
+                    price_incl_vat: "price_incl_vat" in item ? item.price_incl_vat : 0,
+                })),
+                VAT_total: items.reduce((acc, item) => {
+                    return acc + item.price_excl_vat * (item.vat_rate / 100);
+                }, 0),
+                total_excl_vat: items.reduce((acc, item) => {
+                    return acc + item.price_excl_vat;
+                }, 0),
+                total_incl_vat: items.reduce((acc, item) => {
+                    return (acc +
+                        item.price_excl_vat +
+                        item.price_excl_vat * (item.vat_rate / 100));
+                }, 0),
+            };
+        });
+    };
+    useEffect(() => {
+        async function fetchPublicInformation() {
+            const publicInformation = await getPublicInformation();
+            setInvoice((prev) => {
+                return {
+                    ...prev,
+                    seller_phone: publicInformation?.phone,
+                    seller_email: publicInformation?.email,
+                    seller_company_address: publicInformation?.address,
+                    seller_business_credentials: publicInformation?.business_credentials,
+                };
+            });
+        }
+        fetchPublicInformation();
+    }, []);
+    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: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Create Invoice" }), jsx(Typography, { variant: "body2", children: "Create a new invoice by selecting a customer or filling in the details manually" })] }) }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Choose a user" }), jsx(CustomerSelector, { customerLabels: customerLabels, onChangeCallback: onChangeCustomer }), jsx(Typography, { variant: "h6", children: "Set user details manually" }), jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(TextField, { name: "buyer_first_name", label: "First Name", value: customerDefaults?.first_name ||
+                                            invoice?.buyer_first_name ||
+                                            "", onChange: (e) => {
+                                            setInvoice((prev) => ({
+                                                ...prev,
+                                                buyer_first_name: e.target.value,
+                                            }));
+                                        }, disabled: customerDefaults !== null ? true : false }), jsx(TextField, { name: "buyer_last_name", label: "Last Name", value: customerDefaults?.last_name || invoice?.buyer_last_name || "", onChange: (e) => {
+                                            setInvoice((prev) => ({
+                                                ...prev,
+                                                buyer_last_name: e.target.value,
+                                            }));
+                                        }, disabled: customerDefaults !== null ? true : false })] }), jsx(Typography, { variant: "body2" }), jsx(Typography, { variant: "h6", children: "Company Address" }), jsx(Divider, {}), jsx(AddressFields, { data: customerDefaults?.company_address, componentName: "buyer_company_address", componentReference: "common.address", onChangeCallback: (data) => {
+                                    setInvoice((prev) => ({
+                                        ...prev,
+                                        buyer_company_address: data,
+                                    }));
+                                }, disabled: customerDefaults !== null ? true : false }), jsx(Typography, { variant: "h6", children: "Delivery Address" }), jsx(Divider, {}), customerDefaults !== null ? (jsx(Fragment, { children: customerDefaults.delivery_address === null ? (jsx(Typography, { variant: "body2", children: "No delivery address on file" })) : (jsx(AddressFields, { data: customerDefaults?.delivery_address, componentName: "buyer_delivery_address", componentReference: "common.address", onChangeCallback: (data) => {
+                                        setInvoice((prev) => ({
+                                            ...prev,
+                                            buyer_delivery_address: data,
+                                        }));
+                                    }, disabled: customerDefaults !== null ? true : false })) })) : (jsxs(Fragment, { children: [jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(Checkbox, { value: withDeliveryAddress, checked: withDeliveryAddress, onChange: () => setWithDeliveryAddress(!withDeliveryAddress) }), jsx(Typography, { children: "Use a different address for delivery" })] }), withDeliveryAddress && (jsx(AddressFields, { componentName: "buyer_delivery_address", componentReference: "common.address", onChangeCallback: (data) => {
+                                            setInvoice((prev) => ({
+                                                ...prev,
+                                                buyer_delivery_address: data,
+                                            }));
+                                        } }))] })), jsx(Typography, { variant: "h6", children: "Billing Address" }), jsx(Divider, {}), customerDefaults !== null ? (jsx(Fragment, { children: customerDefaults.billing_address === null ? (jsx(Typography, { variant: "body2", children: "No billing address on file" })) : (jsx(AddressFields, { data: customerDefaults?.billing_address, componentName: "buyer_billing_address", componentReference: "common.address", onChangeCallback: (data) => {
+                                        setInvoice((prev) => ({
+                                            ...prev,
+                                            buyer_billing_address: data,
+                                        }));
+                                    }, disabled: customerDefaults !== null ? true : false })) })) : (jsxs(Fragment, { children: [jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(Checkbox, { value: withBillingAddress, checked: withBillingAddress, onChange: () => setWithBillingAddress(!withBillingAddress) }), jsx(Typography, { children: "Use a different address for billing" })] }), withBillingAddress && (jsx(AddressFields, { componentName: "buyer_billing_address", componentReference: "common.address", onChangeCallback: (data) => {
+                                            setInvoice((prev) => ({
+                                                ...prev,
+                                                buyer_billing_address: data,
+                                            }));
+                                        } }))] })), jsx(Typography, { variant: "h6", children: "Bussiness Credentials" }), jsx(Divider, {}), jsx(BusinessCredentialsFields, { data: customerDefaults?.business_credentials, componentName: "buyer_business_credentials", componentReference: "business.credentials", onChangeCallback: (data) => {
+                                    setInvoice((prev) => ({
+                                        ...prev,
+                                        buyer_business_credentials: data,
+                                    }));
+                                }, disabled: customerDefaults !== null ? true : false })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Invoice Items" }), jsx(InvoiceItemFields, { onChangeCallback: onChangeItems })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Add a Comment" }), jsx(MarkdownEditor, { name: "comments", label: "Comments", onChangeCallback: (data) => setInvoice((prev) => {
+                                    if (!prev)
+                                        return null;
+                                    return {
+                                        ...prev,
+                                        comments: data,
+                                    };
+                                }) })] }), jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Create Invoice", loadingText: "Creating...", variant: "contained" })] }) })] }) }) }));
+}
+
+export { CreateInvoiceForm };

package/dist/esm/src/components/e-commerce/invoice/InvoiceItemFields.js

@@ -0,0 +1,103 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import Table from '@mui/material/Table';
+import TableHead from '@mui/material/TableHead';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
+import IconButton from '@mui/material/IconButton';
+import AddIcon from '@mui/icons-material/Add';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+function InvoiceItemFields({ onChangeCallback, }) {
+    const [items, setItems] = useState([]);
+    const [nextItemDescription, setNextItemDescription] = useState("");
+    const [nextAmount, setNextAmount] = useState(0);
+    const [nextPriceExclVat, setNextPriceExclVat] = useState(0);
+    const [nextVatRate, setNextVatRate] = useState(0);
+    const handleAddItem = () => {
+        if (nextItemDescription === null || nextAmount === null) {
+            console.log("nextItemDescription or nextAmount is null");
+            return;
+        }
+        const newItem = {
+            item_description: nextItemDescription,
+            quantity: nextAmount,
+            price_excl_vat: nextPriceExclVat,
+            vat_rate: nextVatRate,
+            vat: nextPriceExclVat * (nextVatRate / 100),
+            price_incl_vat: nextPriceExclVat * (1 + nextVatRate / 100),
+        };
+        setItems([...items, newItem]);
+        onChangeCallback && onChangeCallback([...items, newItem]);
+        // reset the fields
+        setNextItemDescription("");
+        setNextAmount(0);
+        setNextPriceExclVat(0);
+        setNextVatRate(0);
+    };
+    const parseItems = (items) => {
+        return items.map((item, index) => {
+            return {
+                line_item_number: index + 1 + ".0.0",
+                description: item.item_description,
+                vat_rate: item.vat_rate,
+                price_excl_vat: item.price_excl_vat,
+                quantity: item.quantity,
+            };
+        });
+    };
+    return (jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Adding the items to the invoice" }), jsx(Typography, { variant: "body1" }), jsx(Typography, { variant: "body2" }), jsxs(Table, { children: [jsx(TableHead, { children: jsxs(TableRow, { children: [jsx(TableCell, { id: "line_item_number", sx: [{ width: "15%" }], children: "Line Item Number" }), jsx(TableCell, { sx: [{ width: "35%" }], children: "Item Description" }), jsx(TableCell, { sx: [{ width: "10%" }], children: "Price excl. VAT" }), jsx(TableCell, { sx: [{ width: "10%" }], children: "VAT Rate" }), jsx(TableCell, { sx: [{ width: "10%" }], children: "VAT" }), jsx(TableCell, { sx: [{ width: "10%" }], children: "Price incl. VAT" }), jsx(TableCell, { sx: [{ width: "10%" }], children: "Amount" }), jsx(TableCell, {})] }) }), jsx(TableBody, { children: items.map((item, index) => {
+                            return (jsxs(TableRow, { children: [jsxs(TableCell, { sx: [{ width: "15%" }], children: [index + 1, ".0.0"] }), jsx(TableCell, { sx: [{ width: "35%" }], children: item.item_description }), jsx(TableCell, { sx: { width: "10%" }, children: item.price_excl_vat }), jsx(TableCell, { sx: { width: "10%" }, children: item.vat_rate }), jsx(TableCell, { sx: { width: "10%" }, children: item.price_excl_vat * (item.vat_rate / 100) }), jsx(TableCell, { sx: { width: "10%" }, children: item.price_excl_vat * (1 + item.vat_rate / 100) }), jsx(TableCell, { sx: { width: "5%" }, children: item.quantity }), jsx(TableCell, { align: "right", sx: { width: "5%" }, children: jsx(IconButton, { children: jsx(DeleteIcon, {}) }) })] }, index));
+                        }) })] }), jsx("input", { type: "hidden", name: "admin_items", value: JSON.stringify(parseItems(items)) }), jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", sx: { p: 2, width: "100%" }, children: [jsxs(Typography, { variant: "body1", sx: { width: "15%" }, children: [items.length + 1, ".0.0"] }), jsx(TextField, { id: "item_description", name: "item_description", label: "Item Description", sx: { width: "35%" }, value: nextItemDescription, onChange: (e) => setNextItemDescription(e.target.value) }), jsx(TextField, { id: "price_excl_vat", name: "price_excl_vat", type: "number", label: "Price", value: nextPriceExclVat, onChange: (e) => {
+                            if (e.target.value === "") {
+                                setNextPriceExclVat(0);
+                                return;
+                            }
+                            if (parseInt(e.target.value) < 0) {
+                                setNextPriceExclVat(0);
+                                return;
+                            }
+                            setNextPriceExclVat(parseInt(e.target.value));
+                        }, 
+                        /*  error={formErrors.quantity != undefined ? true : false}
+                              helperText={formErrors.quantity} */
+                        sx: { width: "10%" } }), jsx(TextField, { id: "vat_rate", name: "vat_rate", type: "number", label: "VAT Rate", value: nextVatRate, onChange: (e) => {
+                            if (e.target.value === "") {
+                                setNextVatRate(0);
+                                return;
+                            }
+                            if (parseInt(e.target.value) < 0) {
+                                setNextVatRate(0);
+                                return;
+                            }
+                            setNextVatRate(parseInt(e.target.value));
+                        }, 
+                        /*  error={formErrors.quantity != undefined ? true : false}
+                              helperText={formErrors.quantity} */
+                        sx: { width: "30%" } }), jsx(TextField, { id: "quantity", name: "quantity", type: "number", label: "Amount", value: nextAmount, onChange: (e) => {
+                            if (e.target.value === "") {
+                                setNextAmount(0);
+                                return;
+                            }
+                            if (parseInt(e.target.value) < 0) {
+                                setNextAmount(0);
+                                return;
+                            }
+                            setNextAmount(parseInt(e.target.value));
+                        }, 
+                        /*  error={formErrors.quantity != undefined ? true : false}
+                              helperText={formErrors.quantity} */
+                        sx: { width: "5%" } }), jsx(IconButton, { onClick: handleAddItem, children: jsx(AddIcon, {}) })] })] }));
+}
+
+export { InvoiceItemFields };

package/dist/esm/src/components/e-commerce/iro/CreateIROForm.js

@@ -0,0 +1,58 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useActionState, useEffect } from 'react';
+import { useSnackbar } from '../../../context/common/SnackbarContext.js';
+import { createIroAction } from '../../../data/actions/e-commerce/iro/createIroAction.js';
+import { SubmitButton } from '../../SubmitButton.js';
+import { CustomerSelector } from '../customer/CustomerSelector.js';
+import { IROItemFields } from './IROItemFields.js';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import Checkbox from '@mui/material/Checkbox';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+    severity: null,
+};
+/* INFO For use by admin only */
+function CreateIroForm({ sx, revalidateCallback, handleClose, customerLabels, productLabels, }) {
+    const [returnConfirmed, setReturnConfirmed] = useState(false);
+    const [formState, formAction] = useActionState(createIroAction, 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 creating return order",
+                severity: formState.severity || "error",
+            });
+        }
+    }, [formState?.strapiErrors]);
+    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(Stack, { spacing: 2, children: jsx(Typography, { variant: "h3", component: "h1", children: "Create new return order" }) }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Choose a customer" }), jsx(Typography, { variant: "body2", children: "Select the customer for which you want to create a return order" }), jsx(CustomerSelector, { customerLabels: customerLabels })] }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Customer reference" }), jsx(Typography, { children: "If the customer utilizes a custom reference for inbound order management it should be left here" }), jsx(TextField, { id: "customer_reference", name: "customer_reference", sx: { width: "100%" } })] }) }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Choose products that should be in this return order" }), jsx(IROItemFields, { productsArr: productLabels })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Confirm Order" }), jsx(Typography, { children: "Are you sure you want to confirm this return? Confirming this order means you are sure the customer wants to return the products and you are ready to process the return." }), jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(Checkbox, { value: returnConfirmed, checked: returnConfirmed, onChange: () => setReturnConfirmed(!returnConfirmed) }), returnConfirmed && (jsx(Typography, { color: "primary", children: "I am sure I want to confirm this return order" }))] }), jsx("input", { name: "status", type: "hidden", value: returnConfirmed ? "returning" : "requested" })] }), " ", jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Confirm", loadingText: "Loading...", variant: "contained" })] }) })] }) }) }));
+}
+
+export { CreateIroForm as default };

package/dist/esm/src/components/e-commerce/iro/IROItemFields.js

@@ -0,0 +1,109 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import Table from '@mui/material/Table';
+import TableHead from '@mui/material/TableHead';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
+import IconButton from '@mui/material/IconButton';
+import AddIcon from '@mui/icons-material/Add';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import ProductSelector from '../products/ProductSelector.js';
+import '../../../../node_modules/dayjs/dayjs.min.js';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { useTheme } from '@mui/material/styles';
+
+function IROItemFields({ productsArr }) {
+    const [items, setItems] = useState([]);
+    const [nextProductName, setNextProductName] = useState(null);
+    const [nextAmount, setNextAmount] = useState(0);
+    const [nextReason, setNextReason] = useState("damaged");
+    const [nextOtherReason, setNextOtherReason] = useState("");
+    const [selectedProduct, setSelectedProduct] = useState([]);
+    const [showCustomReason, setShowCustomReason] = useState(false);
+    const handleAddItem = () => {
+        if (nextAmount === null) {
+            console.log("nextProductName or nextAmount is null");
+            return;
+        }
+        const newItem = {
+            product: nextProductName,
+            returned_quantity: nextAmount,
+            reason: nextReason,
+            other_reason: nextOtherReason,
+        };
+        setItems([...items, newItem]);
+        // reset the fields
+        setNextProductName(null);
+        setNextAmount(0);
+        setNextReason("damaged");
+        setNextOtherReason("");
+        setSelectedProduct([]);
+    };
+    const handleDeleteItem = (index) => {
+        const newItems = items.filter((_, i) => i !== index);
+        setItems(newItems);
+    };
+    useTheme();
+    const parseItems = (items) => {
+        return items.map((item, index) => {
+            return {
+                line_item_number: `${index + 1}.0.0`,
+                product: item.product?.documentId || "",
+                returned_quantity: item.returned_quantity,
+                reason: nextReason,
+                other_reason: nextOtherReason,
+            };
+        });
+    };
+    const [parsedItems, setParsedItems] = useState([]);
+    useEffect(() => {
+        setParsedItems(parseItems(items));
+    }, [items]);
+    return (jsxs(Stack, { spacing: 2, children: [jsxs(Table, { children: [jsx(TableHead, { children: jsxs(TableRow, { children: [jsx(TableCell, { id: "line_item_number", sx: [{ width: "15%" }], children: "Line Item Number" }), jsx(TableCell, { sx: [{ width: "35%" }], children: "Product Number" }), jsx(TableCell, { sx: [{ width: "15%" }], children: "Amount" }), jsx(TableCell, { sx: [{ width: "35%" }], children: "Reason" }), jsx(TableCell, { sx: [] })] }) }), jsx(TableBody, { children: items.map((item, index) => {
+                            return (jsxs(TableRow, { children: [jsxs(TableCell, { sx: [{ width: "15%" }], children: [index + 1, ".0.0"] }), jsxs(TableCell, { sx: [{ width: "35%" }], children: [typeof item.product === "object"
+                                                ? item.product?.product_number
+                                                : item.product, " ", "|", " ", typeof item.product === "object" ? item.product?.title : ""] }), jsx(TableCell, { sx: { width: "15%" }, children: item.returned_quantity }), jsx(TableCell, { sx: { width: "35%" }, children: item.reason === "other" ? item.other_reason : item.reason }), jsx(TableCell, { align: "right", sx: { width: "5%" }, children: jsx(IconButton, { onClick: () => handleDeleteItem(index), children: jsx(DeleteIcon, {}) }) })] }, index));
+                        }) })] }), jsx("input", { type: "hidden", name: "iro_items", value: JSON.stringify(parsedItems) }), jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", sx: { p: 2, width: "100%" }, children: [jsxs(Typography, { variant: "body1", sx: { width: "15%" }, children: [items.length + 1, ".0.0"] }), productsArr && (jsx(ProductSelector, { productNames: productsArr, currentValue: selectedProduct, sx: { width: "70%" }, multiple: false, onChangeCallback: (ids) => {
+                            const product = productsArr.find((p) => p.documentId === ids[0]);
+                            setNextProductName(product || null);
+                            setSelectedProduct(ids);
+                        } })), jsx(TextField, { id: "amount", name: "amount", type: "number", label: "Amount", value: nextAmount, onChange: (e) => {
+                            if (e.target.value === "") {
+                                setNextAmount(0);
+                                return;
+                            }
+                            if (parseInt(e.target.value) < 0) {
+                                setNextAmount(0);
+                                return;
+                            }
+                            setNextAmount(parseInt(e.target.value));
+                        }, 
+                        /*  error={formErrors.amount != undefined ? true : false}
+                              helperText={formErrors.amount} */
+                        sx: { width: "15%" } }), jsxs(TextField, { value: nextReason, select: true, SelectProps: {
+                            native: true,
+                        }, variant: "outlined", fullWidth: !(nextReason === "other"), sx: { minWidth: "25%" }, onChange: (e) => {
+                            const reason = e.target.value;
+                            if (reason === "other") {
+                                setShowCustomReason(true);
+                            }
+                            else {
+                                setShowCustomReason(false);
+                            }
+                            setNextReason(e.target.value);
+                        }, children: [jsx("option", { value: "damaged", children: "Damaged" }), jsx("option", { value: "not_as_described", children: "Not as described" }), jsx("option", { value: "wrong_item", children: "Wrong item" }), jsx("option", { value: "other", children: "Other" })] }), showCustomReason && (jsx(TextField, { value: nextOtherReason, label: "Custom reason", variant: "outlined", fullWidth: true, onChange: (e) => {
+                            const customReason = e.target.value;
+                            setNextOtherReason(customReason);
+                        } })), jsx(IconButton, { onClick: handleAddItem, children: jsx(AddIcon, {}) })] })] }));
+}
+
+export { IROItemFields };

package/dist/esm/src/components/e-commerce/iro/IroItemDisplay.js

@@ -0,0 +1,18 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import ImagePreviewTooltip from '../../common/ImagePreviewTooltip.js';
+import ReportsDisplay from '../../logistics/report/ReportsDisplay.js';
+
+function IroItemDisplay({ item, index, image }) {
+    const { line_item_number, product, returned_quantity, received_quantity, registered_quantity, released_quantity, reports, reason, other_reason, } = item;
+    return (jsxs(Stack, { spacing: 1, children: [item && (jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [jsxs(Stack, { spacing: 1, sx: { width: "100%" }, children: [jsxs(Typography, { variant: "body1", children: ["Line Item Number: ", line_item_number] }), jsxs(Typography, { variant: "body1", children: ["Part Number: ", product?.product_number] })] }), jsxs(Stack, { spacing: 1, children: [jsxs(Typography, { variant: "body1", children: ["Reason: ", reason] }), other_reason !== undefined && (jsx(Typography, { variant: "body1", children: other_reason }))] }), image && (jsx(Fragment, { children: jsx(ImagePreviewTooltip, { image: image, label: item.product?.title }) }))] })), jsxs(Stack, { direction: "row", spacing: 1, justifyContent: "space-between", alignItems: "center", children: [jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(Typography, { variant: "caption", children: "Ordered" }), jsx(Typography, { variant: "h6", children: returned_quantity })] }), jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(Typography, { variant: "caption", children: "Received" }), jsx(Typography, { variant: "h6", children: received_quantity })] }), jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(Typography, { variant: "caption", children: "Registered" }), jsx(Typography, { variant: "h6", children: registered_quantity })] }), jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(Typography, { variant: "caption", children: "Released" }), jsx(Typography, { variant: "h6", children: released_quantity })] })] }), reports?.length > 0 && (jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "body1", children: "Reports:" }), jsx(ReportsDisplay, { reports: reports.filter((report) => "id" in report && !("pre_report" in report)) })] }))] }, index));
+}
+
+export { IroItemDisplay as default };

package/dist/esm/src/components/e-commerce/iro/IroItemUpdater.js

@@ -0,0 +1,49 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import Divider from '@mui/material/Divider';
+import Collapse from '@mui/material/Collapse';
+import { AmountUpdater } from '../../common/AmountUpdater.js';
+import ArrowButtonDownIcon from '@mui/icons-material/ArrowDropDown';
+import ImagePreviewTooltip from '../../common/ImagePreviewTooltip.js';
+import ReportMakingComponent from '../../logistics/report/ReportMakingComponent.js';
+import ReportsDisplay from '../../logistics/report/ReportsDisplay.js';
+
+function IroItemUpdater({ item, index, handleUpdateQuantity, image, revalidateCallback, }) {
+    const { line_item_number, product, received_quantity, registered_quantity, released_quantity, returned_quantity, reports, reason, other_reason, } = item;
+    const received_bad_quantity = reports !== undefined && reports.length > 0
+        ? reports
+            .filter((report) => report.type === "received")
+            .reduce((a, b) => a + b.quantity, 0)
+        : 0;
+    const registered_bad_quantity = reports !== undefined && reports.length > 0
+        ? reports
+            .filter((report) => report.type === "registered")
+            .reduce((a, b) => a + b.quantity, 0)
+        : 0;
+    const [open, setOpen] = useState(false);
+    return (jsx(Stack, { spacing: 1, children: item && (jsxs(Fragment, { children: [jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [jsxs(Stack, { spacing: 1, children: [jsxs(Typography, { variant: "body1", children: ["Line Item Number: ", line_item_number] }), jsxs(Typography, { variant: "body1", children: ["Part Number: ", product && product.product_number] })] }), image && (jsx(Fragment, { children: jsx(ImagePreviewTooltip, { image: image, label: product && product.title }) }))] }), jsx(Typography, { variant: "body1", children: "Reason" }), jsx(Typography, { variant: "body2", children: "Received" }), jsx(AmountUpdater, { currentValue: received_quantity, totalValue: returned_quantity + received_bad_quantity, minnewvalue: 0 + registered_quantity + -registered_bad_quantity, maxnewvalue: returned_quantity + received_bad_quantity, color: "info", handleChange: (newValue) => {
+                        handleUpdateQuantity(newValue, item.documentId, "received_quantity");
+                    } }), jsx(Typography, { variant: "body2", children: "Registered" }), jsx(AmountUpdater, { currentValue: registered_quantity, totalValue: returned_quantity + received_bad_quantity, minnewvalue: 0 + released_quantity, maxnewvalue: received_quantity + registered_bad_quantity, color: "info", handleChange: (newValue) => {
+                        handleUpdateQuantity(newValue, item.documentId, "registered_quantity");
+                    }, offsetEnd: registered_bad_quantity }), jsx(Divider, { sx: { p: 0 }, children: jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(Typography, { variant: "body2", children: "Irregularities / Corrections" }), jsx(IconButton, { onClick: () => setOpen(!open), children: jsx(ArrowButtonDownIcon, {}) })] }) }), jsx(Collapse, { in: open, children: jsxs(Stack, { spacing: 2, children: [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(ReportMakingComponent, { content: "content", quantity: 0, type: "registered", minValue: -(received_quantity + registered_bad_quantity), maxValue: received_quantity, related: [
+                                    {
+                                        id: item.id,
+                                        __type: "api::e-commerce.iro-item",
+                                    },
+                                ], revalidateCallback: revalidateCallback })] }) }), jsx(Typography, { variant: "body2", children: "Released" }), jsx(AmountUpdater, { currentValue: released_quantity || 0, totalValue: returned_quantity +
+                        received_bad_quantity +
+                        registered_bad_quantity, minnewvalue: 0, maxnewvalue: registered_quantity, color: "info", handleChange: (newValue) => {
+                        handleUpdateQuantity(newValue, item.documentId, "released_quantity");
+                    } })] })) }, index));
+}
+
+export { IroItemUpdater as default };

package/dist/esm/src/components/e-commerce/iro/IroStatusIndicator.js

@@ -0,0 +1,56 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import Chip from '@mui/material/Chip';
+
+// TODO update colors and statusses
+const statusColorArray = [
+    { status: "requested", color: "info" },
+    { status: "returning", color: "info" },
+    { status: "logistics_operator_process", color: "info" },
+    { status: "finalising_process", color: "info" },
+    { status: "done", color: "success" },
+    { status: "cancelled", color: "error" },
+    { status: null, color: "default" },
+];
+const enduserStatusColorArray = [
+    { status: "requested", color: "warning" },
+    { status: "returning", color: "info" },
+    { status: "logistics_operator_process", color: "info" },
+    { status: "finalising_process", color: "warning" },
+    { status: "done", color: "success" },
+    { status: "cancelled", color: "error" },
+    { status: null, color: "default" },
+];
+const dispatcherStatusColorArray = [
+    { status: "requested", color: "info" },
+    { status: "returning", color: "warning" },
+    { status: "logistics_operator_process", color: "info" },
+    { status: "finalising_process", color: "info" },
+    { status: "done", color: "success" },
+    { status: "cancelled", color: "error" },
+    { status: null, color: "default" },
+];
+const IroStatusIndicator = ({ status, role, }) => {
+    const readableStatus = status
+        ? status
+            .split("_")
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(" ")
+        : "Unknown";
+    return (jsx(Chip, { label: readableStatus, color: role === "enduser"
+            ? enduserStatusColorArray.find((s) => s.status === status)?.color ||
+                "default"
+            : role === "dispatcher"
+                ? dispatcherStatusColorArray.find((s) => s.status === status)
+                    ?.color || "default"
+                : statusColorArray.find((s) => s.status === status)?.color ||
+                    "default" }));
+};
+
+export { IroStatusIndicator };