umwd-components 0.1.834 → 0.1.835

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

@@ -0,0 +1,386 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useActionState, useState, useEffect } from 'react';
+import { updateIroAction } from '../../../data/actions/e-commerce/iro/updateIroAction.js';
+import TextualIroItemUpdater from './TextualIROItemUpdater.js';
+import IroItemDisplay from './IroItemDisplay.js';
+import NotesDisplay from '../../logistics/note/NotesDisplay.js';
+import NoteTakingComponent from '../../logistics/note/NoteTakingComponent.js';
+import { SubmitButton } from '../../SubmitButton.js';
+import Alert from '@mui/material/Alert';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Divider from '@mui/material/Divider';
+import { confirmationService } from '../../../data/services/common/confirmation-service.js';
+import { cancellationService } from '../../../data/services/common/cancellation-service.js';
+import { FormControlLabel, Checkbox, List, ListItem, DialogContentText, CircularProgress, TextField } from '@mui/material';
+import NumbersIcon from '@mui/icons-material/Numbers';
+import AssignmentReturnIcon from '@mui/icons-material/AssignmentReturn';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import BusinessIcon from '@mui/icons-material/Business';
+import DescriptionIcon from '@mui/icons-material/Description';
+import UpdateIcon from '@mui/icons-material/Update';
+import { IroStatusIndicator } from './IroStatusIndicator.js';
+import { queryAllProducts } from '../../../data/loaders/e-commerce/queryAllProducts.js';
+import qs from '../../../../node_modules/qs/lib/index.js';
+import { useSnackbar } from '../../../context/common/SnackbarContext.js';
+import { MinioItemList } from '../../common/media/minio/MinioItemList.js';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+    severity: null,
+};
+function OverwritesDialog({ open, handleClose, overwrites, setOverwrites, iro, revalidateCallback, closeMainDialog, }) {
+    const [loading, setLoading] = useState(false);
+    const { handleAddMessage } = useSnackbar();
+    const handleConfirm = async () => {
+        try {
+            await confirmationService("iros", [iro.documentId], overwrites);
+            handleAddMessage({
+                message: "Return order confirmed successfully",
+                severity: "success",
+            });
+            revalidateCallback && revalidateCallback();
+            handleClose();
+            closeMainDialog && closeMainDialog();
+        }
+        catch (error) {
+            handleAddMessage({
+                message: "Failed to confirm return order",
+                severity: "error",
+            });
+        }
+    };
+    // Initialize overwrites values when dialog opens
+    useEffect(() => {
+        const fetchProducts = async () => {
+            setLoading(true);
+            const query = qs.stringify({
+                filters: {
+                    product_number: {
+                        $in: iro.iro_items.map((item) => item.product?.product_number?.replace(/^r-/, "") || ""),
+                    },
+                },
+                populate: {
+                    price: true,
+                },
+            }, { encodeValuesOnly: true });
+            const correspondingProductsData = await queryAllProducts(query);
+            const correspondingProducts = correspondingProductsData.data.map((product) => {
+                return {
+                    id: product.documentId,
+                    product_number: product.product_number,
+                    price: product.price,
+                };
+            });
+            console.log("correspondingProducts", correspondingProducts);
+            setLoading(false);
+            // Calculate totals from the IRO items
+            let totalExclVat = 0;
+            let totalInclVat = 0;
+            // Create line overwrites for each item
+            const lineOverwrites = iro.iro_items.map((item, index) => {
+                const product = item.product;
+                const correspondingProduct = correspondingProducts.find((p) => p.product_number === product?.product_number?.replace(/^r-/, "") ||
+                    "");
+                // For return products, typically the product_number starts with r-
+                // The original product should have the same number without the r-
+                let price_excl_vat = 0;
+                let price_incl_vat = 0;
+                let vat_rate = 0;
+                if (correspondingProduct && correspondingProduct.price) {
+                    price_excl_vat = correspondingProduct.price.price || 0;
+                    price_incl_vat = correspondingProduct.price.price_incl_vat || 0;
+                    vat_rate = correspondingProduct.price.vat_rate || 0;
+                    // Add to totals
+                    const itemTotalExclVat = price_excl_vat * item.returned_quantity;
+                    const itemTotalInclVat = price_incl_vat * item.returned_quantity;
+                    totalExclVat += itemTotalExclVat;
+                    totalInclVat += itemTotalInclVat;
+                }
+                return {
+                    vat_rate,
+                    price_excl_vat,
+                    price_incl_vat,
+                    quantity: item.returned_quantity,
+                };
+            });
+            // Set the calculated values to the overwrites
+            setOverwrites({
+                customer_internal_reference: iro.customer_reference || "",
+                total_excl_vat: parseFloat(totalExclVat.toFixed(2)),
+                total_incl_vat: parseFloat(totalInclVat.toFixed(2)),
+                lines: lineOverwrites,
+            });
+        };
+        if (open && iro?.iro_items?.length > 0) {
+            fetchProducts();
+        }
+    }, [open, iro]);
+    return (jsxs(Dialog, { open: open, onClose: handleClose, fullWidth: true, maxWidth: "lg", children: [jsx(DialogTitle, { children: "Check or overwrite value for the return payment" }), jsx(DialogContent, { children: jsxs(Stack, { spacing: 2, alignItems: "left", sx: { px: 0 }, children: [jsx(DialogContentText, { children: "This is very important because these values will be used for automated invoice generation" }), jsx(DialogContentText, { variant: "h5", children: "Overwrites" }), loading ? (jsx(CircularProgress, {})) : (jsxs(Stack, { spacing: 2, children: [jsx(TextField, { label: "Customer internal reference", name: "customer_internal_reference", fullWidth: true, variant: "outlined", value: overwrites.customer_internal_reference, onChange: (e) => setOverwrites({
+                                        ...overwrites,
+                                        customer_internal_reference: e.target.value,
+                                    }) }), jsx(TextField, { label: "Total excl. VAT", name: "total_excl_vat", type: "number", fullWidth: true, variant: "outlined", value: overwrites.total_excl_vat, onChange: (e) => setOverwrites({
+                                        ...overwrites,
+                                        total_excl_vat: parseFloat(e.target.value),
+                                    }) }), jsx(TextField, { label: "Total incl. VAT", name: "total_incl_vat", type: "number", fullWidth: true, variant: "outlined", value: overwrites.total_incl_vat, onChange: (e) => setOverwrites({
+                                        ...overwrites,
+                                        total_incl_vat: parseFloat(e.target.value),
+                                    }) })] })), iro?.iro_items?.length > 0 && (jsxs(Fragment, { children: [jsx(DialogContentText, { variant: "h5", children: "Items" }), iro.iro_items.map((item, index) => {
+                                    return (jsxs(Stack, { spacing: 2, direction: "row", alignItems: "center", sx: { px: 2 }, children: [jsx(Typography, { sx: { minWidth: 100 }, children: item.line_item_number }), jsx(Typography, { sx: { minWidth: 150 }, children: item.product?.product_number }), jsx(Typography, { sx: { minWidth: 200 }, children: item.product?.title }), jsx(TextField, { size: "small", label: "VAT %", name: "vat_rate", type: "number", sx: { width: 100 }, value: overwrites?.lines?.[index]?.vat_rate ?? "", onChange: (e) => {
+                                                    const newLines = [...(overwrites.lines || [])];
+                                                    newLines[index] = {
+                                                        ...newLines[index],
+                                                        vat_rate: parseFloat(e.target.value),
+                                                    };
+                                                    setOverwrites({
+                                                        ...overwrites,
+                                                        lines: newLines,
+                                                    });
+                                                } }), jsx(TextField, { size: "small", label: "Price excl.", name: "price_excl_vat", type: "number", sx: { width: 120 }, value: overwrites?.lines?.[index]?.price_excl_vat ?? "", onChange: (e) => {
+                                                    const newLines = [...(overwrites.lines || [])];
+                                                    newLines[index] = {
+                                                        ...newLines[index],
+                                                        price_excl_vat: parseFloat(e.target.value),
+                                                    };
+                                                    setOverwrites({
+                                                        ...overwrites,
+                                                        lines: newLines,
+                                                    });
+                                                } }), jsx(TextField, { size: "small", label: "Price incl.", name: "price_incl_vat", type: "number", sx: { width: 120 }, value: overwrites?.lines?.[index]?.price_incl_vat ?? "", onChange: (e) => {
+                                                    const newLines = [...(overwrites.lines || [])];
+                                                    newLines[index] = {
+                                                        ...newLines[index],
+                                                        price_incl_vat: parseFloat(e.target.value),
+                                                    };
+                                                    setOverwrites({
+                                                        ...overwrites,
+                                                        lines: newLines,
+                                                    });
+                                                } }), jsx(TextField, { size: "small", label: "Qty", name: "quantity", type: "number", sx: { width: 80 }, value: overwrites?.lines?.[index]?.quantity ?? "", onChange: (e) => {
+                                                    const newLines = [...(overwrites.lines || [])];
+                                                    newLines[index] = {
+                                                        ...newLines[index],
+                                                        quantity: parseFloat(e.target.value),
+                                                    };
+                                                    setOverwrites({
+                                                        ...overwrites,
+                                                        lines: newLines,
+                                                    });
+                                                } })] }, item.documentId));
+                                })] }))] }) }), jsxs(DialogActions, { children: [jsx(Button, { variant: "contained", onClick: handleConfirm, children: "Confirm" }), jsx(Button, { variant: "contained", onClick: handleClose, children: "Cancel" })] })] }));
+}
+function ConfirmFormDialog({ open, handleClose, orderID, currentStatus, revalidateCallback, openOverwritesDialog, }) {
+    const { handleAddMessage } = useSnackbar();
+    const handleConfirm = async () => {
+        if (currentStatus !== "requested" &&
+            currentStatus !== "finalising_process") {
+            handleAddMessage({
+                message: "Cannot confirm return order in current status",
+                severity: "error",
+            });
+            return;
+        }
+        if (currentStatus === "finalising_process") {
+            if (!openOverwritesDialog) {
+                handleAddMessage({
+                    message: "Please provide overwrites for the invoice",
+                    severity: "error",
+                });
+                return;
+            }
+            openOverwritesDialog();
+            handleClose();
+            return;
+        }
+        // if currentStatus is requested
+        try {
+            await confirmationService("iros", [orderID]);
+            handleAddMessage({
+                message: "Return order confirmed successfully",
+                severity: "success",
+            });
+            revalidateCallback && revalidateCallback();
+            handleClose();
+        }
+        catch (error) {
+            handleAddMessage({
+                message: "Failed to confirm return order",
+                severity: "error",
+            });
+        }
+    };
+    return (jsxs(Dialog, { open: open, onClose: handleClose, children: [jsx(DialogTitle, { children: "Confirm Return" }), jsx(DialogContent, { children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { children: "Are you sure you want to confirm this return?" }), jsxs(List, { children: [currentStatus === "requested" && (jsx(ListItem, { children: "When confirming this return order a rma number will be generated" })), jsx(ListItem, { children: currentStatus === "requested"
+                                        ? "By confirming the return you will update it's status from requested to returning"
+                                        : "By confirming the return you will update it's status from finalising_process to done" }), currentStatus === "finalising_process" && (jsx(ListItem, { children: "Confirming this order will automatically create an invoice" }))] }), jsxs(Typography, { children: ["Current status: ", currentStatus] })] }) }), jsxs(DialogActions, { children: [jsx(Button, { variant: "contained", onClick: handleConfirm, children: "Yes" }), jsx(Button, { variant: "contained", onClick: handleClose, children: "No" })] })] }));
+}
+function CancelIroDialog({ open, handleClose, orderID, revalidateCallback, }) {
+    const [reason, setRoason] = useState("");
+    const [reasonError, setReasonError] = useState("");
+    const { handleAddMessage } = useSnackbar();
+    const handleCancel = async () => {
+        if (reason.length < 5) {
+            setReasonError("Please provide a reason for the cancellation (min 5 characters)");
+            return;
+        }
+        setReasonError("");
+        try {
+            await cancellationService("iros", orderID, reason);
+            handleAddMessage({
+                message: "Return order cancelled successfully",
+                severity: "success",
+            });
+            revalidateCallback && revalidateCallback();
+            handleClose();
+        }
+        catch (error) {
+            handleAddMessage({
+                message: "Failed to cancel return order",
+                severity: "error",
+            });
+        }
+    };
+    return (jsx("form", { children: jsxs(Dialog, { open: open, onClose: handleClose, children: [jsx(DialogTitle, { children: "Cancel Return" }), jsx(DialogContent, { children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { children: "Are you sure you want to cancel this return?" }), jsxs(List, { children: [jsx(ListItem, { children: "By cancelling this return order you will update it's status from requested to cancelled" }), jsx(ListItem, { children: "Please provide a reason for the cancellation" }), jsx(ListItem, { children: "The customer will be notified about the cancellation and of the reason for the cancellation" })] }), jsx(TextField, { label: "Cancellation reason", name: "reason", multiline: true, rows: 4, fullWidth: true, variant: "outlined", value: reason, onChange: (e) => setRoason(e.target.value), placeholder: "Please provide a reason for the cancellation", error: !!reasonError, helperText: reasonError })] }) }), jsxs(DialogActions, { children: [jsx(Button, { variant: "outlined", onClick: handleClose, children: "Close" }), jsx(Button, { variant: "contained", color: "error", onClick: handleCancel, children: "Confirm Cancellation" })] })] }) }));
+}
+function TextualManageIroForm({ data, sx, 
+// revalidates the selectedOpo from the database
+revalidateCallback, handleClose, role, }) {
+    // Bind documentId to the action
+    const boundUpdateIroAction = (prevState, formData) => updateIroAction(data.documentId, prevState, formData);
+    const [formState, formAction] = useActionState(boundUpdateIroAction, INITIAL_STATE);
+    const [items, setItems] = useState(data.iro_items ? data.iro_items : []);
+    const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
+    const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
+    const [overwritesDialogOpen, setOverwritesDialogOpen] = useState(false);
+    const [overwrites, setOverwrites] = useState({
+        customer_internal_reference: "",
+        total_excl_vat: 0,
+        total_incl_vat: 0,
+        lines: [],
+    });
+    const [showing, setShowing] = useState(["received", "registered", "released", "reports"]);
+    const options = [
+        "received",
+        "registered",
+        "released",
+        "reports",
+    ];
+    const parseItems = (items) => {
+        return items.map((item) => {
+            return {
+                documentId: item.documentId,
+                returned_quantity: item.returned_quantity,
+                received_quantity: item.received_quantity,
+                registered_quantity: item.registered_quantity,
+                released_quantity: item.released_quantity,
+                reports: item.reports?.map((report) => {
+                    return {
+                        id: "id" in report ? report.id : undefined,
+                        documentId: "documentId" in report ? report.documentId : undefined,
+                        quantity: report.quantity,
+                        content: report.content,
+                        type: report.type,
+                    };
+                }) || [],
+            };
+        });
+    };
+    const handleUpdateQuantity = (value, itemID, type) => {
+        const newItems = [...items];
+        const index = newItems.findIndex((item) => item.documentId === itemID);
+        newItems[index][type] = value;
+        setItems(newItems);
+    };
+    /** INFO
+     * - merely presetting the report in the items values, this is not a db update
+     * - only used with Textual form */
+    const handleAddReport = (report, itemID) => {
+        const newItems = [...items];
+        const index = newItems.findIndex((item) => item.documentId === itemID);
+        const reportsOnItem = newItems[index]?.reports || [];
+        const newReports = [...reportsOnItem, report];
+        if (newItems[index]?.reports == undefined) {
+            newItems[index] = { ...newItems[index], reports: [] };
+        }
+        newItems[index].reports = newReports;
+        setItems(newItems);
+    };
+    const handleRemoveReportAtIndex = (itemID, index) => {
+        const newItems = [...items];
+        const itemIndex = newItems.findIndex((item) => item.documentId === itemID);
+        const reportsOnItem = newItems[itemIndex]?.reports || [];
+        const dbReports = reportsOnItem.filter((report) => "documentId" in report);
+        const preReports = reportsOnItem.filter((report) => !("documentId" in report));
+        preReports.splice(index, 1);
+        const newReports = [...dbReports, ...preReports];
+        newItems[itemIndex].reports = newReports;
+        setItems(newItems);
+    };
+    const { handleAddMessage } = useSnackbar();
+    // Message handling
+    useEffect(() => {
+        if (formState?.message) {
+            handleAddMessage({
+                message: formState.message,
+                severity: formState.severity || "error",
+            });
+            if (formState.severity === "success") {
+                revalidateCallback && revalidateCallback();
+                handleClose && handleClose();
+            }
+        }
+    }, [formState?.message]);
+    // Error handling
+    useEffect(() => {
+        if (formState?.strapiErrors) {
+            handleAddMessage({
+                message: formState.strapiErrors.message || "Error updating IRO",
+                severity: formState.severity || "error",
+            });
+        }
+    }, [formState?.strapiErrors]);
+    // Items state update
+    useEffect(() => {
+        if (data.iro_items) {
+            setItems(data.iro_items ? data.iro_items : []);
+        }
+    }, [data]);
+    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "space-between", children: [jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Management Inbound Return" }), jsx(Typography, { variant: "body1", children: "Manage arrival, registration and release of returns" })] }), jsx(NoteTakingComponent, { content: "", related: [{ id: data.id, __type: "api::e-commerce.iro" }], revalidateCallback: revalidateCallback })] }), jsx(Divider, {})] }) }), jsx(Grid, { size: 12, children: jsx(Typography, { variant: "h5", sx: { py: 1 }, children: "Details" }) }), jsx(Grid, { size: 6, children: jsx(Paper, { elevation: 2, sx: { p: 2, height: "100%" }, children: jsxs(Stack, { spacing: 2, children: [jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(NumbersIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Return Number" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.return_number })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(AssignmentReturnIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "RMA Number" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.rma_number })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(DescriptionIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Customer Reference" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.customer_reference })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(CalendarTodayIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Return Date" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.return_date })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(BusinessIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Customer" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.customer?.business_credentials?.company_name })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(UpdateIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Return Status" }), jsx(IroStatusIndicator, { status: data.internal_status })] })] }) }) }), (data.internal_status === "requested" ||
+                    data.internal_status === "finalising_process") &&
+                    role === "enduser" && (jsx(Grid, { size: 6, children: jsx(Paper, { elevation: 2, sx: { p: 2, height: "100%" }, children: jsxs(Stack, { spacing: 2, children: [jsx(Button, { variant: "contained", color: "primary", onClick: () => setConfirmDialogOpen(true), children: "Confirm order" }), data.internal_status === "requested" && (jsx(Alert, { severity: "warning", children: "Please confirm the order as soon as possible, only upon confirmation this order will be assigned an RMA number and will become available to the dispatcher. Status: requested - returning" })), data.internal_status === "finalising_process" && (jsx(Alert, { severity: "warning", children: "Please finalise this return order. Make sure the customer receives a return payment if eligible and then confirm this step. Status: finalising_process - done" })), data.internal_status === "finalising_process" && (jsx(Button, { variant: "contained", sx: { color: "yellow" }, children: "// TODO RE-PAYMENT PROCESS" })), jsx(Button, { variant: "contained", color: "error", onClick: () => setCancelDialogOpen(true), children: "Cancel order" }), jsx(ConfirmFormDialog, { open: confirmDialogOpen, handleClose: () => setConfirmDialogOpen(false), orderID: data.documentId, currentStatus: data.internal_status, revalidateCallback: revalidateCallback, openOverwritesDialog: () => setOverwritesDialogOpen(true) }), jsx(OverwritesDialog, { open: overwritesDialogOpen, handleClose: () => setOverwritesDialogOpen(false), overwrites: overwrites, setOverwrites: setOverwrites, iro: data, revalidateCallback: revalidateCallback, closeMainDialog: handleClose }), jsx(CancelIroDialog, { open: cancelDialogOpen, handleClose: () => setCancelDialogOpen(false), orderID: data.documentId, revalidateCallback: revalidateCallback })] }) }) })), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Documents" }), jsx(Paper, { sx: { p: 2 }, children: jsx(Stack, { spacing: 1 }) })] }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Customer Attachements" }), jsx(Paper, { sx: { p: 1 }, children: jsx(MinioItemList, { items: data.customer_attachment, emptyMessage: "No customer attachments found.", direction: "row", revalidateCallback: revalidateCallback }) })] }) }), data?.notes?.length > 0 && (jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Notes" }), jsx(NotesDisplay, { notes: data.notes }), jsx(Divider, {})] }) })), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "h5", children: "Items" }), jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", spacing: 2, component: Paper, p: 1, sx: {
+                                    bgcolor: "background.default",
+                                    border: "1px solid",
+                                    borderColor: "divider",
+                                    boxShadow: "none",
+                                }, children: [jsx(Typography, { variant: "body2", color: "text.secondary", children: "Show:" }), options.map((option) => (jsx(FormControlLabel, { control: jsx(Checkbox, { size: "small", checked: showing.includes(option), onChange: (e) => {
+                                                if (e.target.checked) {
+                                                    setShowing([...showing, option]);
+                                                }
+                                                else {
+                                                    setShowing(showing.filter((item) => item !== option));
+                                                }
+                                            } }), label: jsx(Typography, { variant: "body2", color: "text.secondary", children: option.charAt(0).toUpperCase() + option.slice(1) }), sx: { mr: 0 } }, option)))] }), data.internal_status === "requested" && (jsx(Alert, { severity: "warning", children: "Before confirmation you cannot update the items" })), jsx(Divider, {}), jsxs("form", { action: formAction, children: [jsx("input", { type: "hidden", name: "items", value: JSON.stringify(parseItems(items)) }), items &&
+                                        items.map((item, index) => {
+                                            return (jsx(Paper, { sx: { p: 2, mb: 2 }, children: data.internal_status === "requested" ||
+                                                    data.internal_status === "cancelled" ||
+                                                    data.internal_status === "done" ? (jsx(IroItemDisplay, { item: item, index: index, image: item?.product?.image })) : (jsx(TextualIroItemUpdater, { item: item, index: index, handleUpdateQuantity: handleUpdateQuantity, handleAddReport: handleAddReport, image: item?.product?.image, handleRemoveReportAtIndex: handleRemoveReportAtIndex, revalidateCallback: revalidateCallback, showing: showing })) }, index));
+                                        }), 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: "Save changes", loadingText: "Saving...", variant: "contained" })] })] })] }) })] }) }));
+}
+
+export { TextualManageIroForm as default };

package/dist/esm/src/components/e-commerce/opo/CreateOpoForm.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 { createOpoAction } from '../../../data/actions/e-commerce/opo/createOpoAction.js';
+import { SubmitButton } from '../../SubmitButton.js';
+import { CustomerSelector } from '../customer/CustomerSelector.js';
+import { OPOItemFields } from './OPOItemFields.js';
+import { useSnackbar } from '../../../context/common/SnackbarContext.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,
+};
+function CreateOpoForm({ sx, revalidateCallback, handleClose, customerLabels, productLabels, }) {
+    const [orderConfirmed, setOrderConfirmed] = useState(false);
+    const [formState, formAction] = useActionState(createOpoAction, INITIAL_STATE);
+    const { handleAddMessage } = useSnackbar();
+    console.log(customerLabels, productLabels);
+    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 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 order" }) }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Choose a customer" }), 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 for this order" }), jsx(OPOItemFields, { 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 order? Creating a order this way will not create a shipping label nor will it invoke a payment. It does however create an invoice which you can find under invoices" }), jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(Checkbox, { value: orderConfirmed, checked: orderConfirmed, onChange: () => setOrderConfirmed(!orderConfirmed) }), orderConfirmed && (jsx(Typography, { color: "primary", children: "I am sure I want to confirm this order" }))] }), jsx("input", { name: "internal_status", type: "hidden", value: orderConfirmed ? "ordered" : "placed" })] }), jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Confirm", loadingText: "Loading...", variant: "contained" })] }) })] }) }) }));
+}
+
+export { CreateOpoForm as default };

package/dist/esm/src/components/e-commerce/opo/ManageOpoForm.js

@@ -0,0 +1,180 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useActionState, useState, useEffect } from 'react';
+import { updateOpoAction } from '../../../data/actions/e-commerce/opo/updateOpoAction.js';
+import { UploadBase64MediaForm } from '../../common/media/UploadBase64MediaForm.js';
+import downloadBase64File from '../../../data/loaders/common/media/downloadBase64File.js';
+import OpoItemUpdater from './OpoItemUpdater.js';
+import OpoItemDisplay from './OpoItemDisplay.js';
+import NotesDisplay from '../../logistics/note/NotesDisplay.js';
+import NoteTakingComponent from '../../logistics/note/NoteTakingComponent.js';
+import { SubmitButton } from '../../SubmitButton.js';
+import Alert from '@mui/material/Alert';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Divider from '@mui/material/Divider';
+import { confirmationService } from '../../../data/services/common/confirmation-service.js';
+import { useSnackbar } from '../../../context/common/SnackbarContext.js';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    message: null,
+};
+/*
+I took away the updateOpoAction and am using the service for confirming directly
+There must be a solid explanation for this, but I don't have it right now
+something with the confirm-route and the update-route not being the same
+
+const CONFIRMATION_STATE = {
+  zodErrors: null,
+  strapiErrors: null,
+  data: null,
+  message: null,
+};
+
+function ConfirmFormDialog({
+  open,
+  handleClose,
+  orderID,
+  currentStatus,
+  revalidateCallback,
+}: {
+  open: boolean;
+  handleClose: () => void;
+  orderID: string;
+  currentStatus: "placed" | "external_shipping_process";
+  revalidateCallback?: () => void;
+}) {
+  const [formState, formAction] = useActionState(
+    updateOpoAction,
+    CONFIRMATION_STATE
+  );
+
+  useEffect(() => {
+    if (formState?.message === "Opo Updated") {
+      revalidateCallback && revalidateCallback();
+      handleClose();
+    }
+  }, [formState?.message]);
+
+  return (
+    <Dialog open={open}>
+      <form action={formAction}>
+        <input name="id" type="hidden" value={orderID} />
+        <input
+          name="internal_status"
+          type="hidden"
+          value={currentStatus === "placed" ? "ordered" : "done"}
+        />
+        <DialogTitle>Confirm Order</DialogTitle>
+        <DialogContent>
+          <Stack spacing={2}>
+            <Typography>
+              Are you sure you want to confirm this order?
+            </Typography>
+            <Typography>Current status: {currentStatus}</Typography>
+          </Stack>
+        </DialogContent>
+        <DialogActions>
+          <SubmitButton text="Confirm" loadingText="Loading..." />
+          <StrapiErrors error={formState?.strapiErrors} />
+          {formState?.message && (
+            <Alert severity="error">{formState?.message}</Alert>
+          )}
+          <Button variant="contained" color="secondary" onClick={handleClose}>
+            Cancel
+          </Button>
+        </DialogActions>
+      </form>
+    </Dialog>
+  );
+} */
+function ConfirmFormDialog({ open, handleClose, orderID, currentStatus, 
+// revalidates the selectedOpo from the database
+revalidateCallback, }) {
+    return (jsxs(Dialog, { open: open, children: [jsx(DialogTitle, { children: "Confirm Order" }), jsx(DialogContent, { children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { children: "Are you sure you want to confirm this order?" }), jsxs(Typography, { children: ["Current status: ", currentStatus] })] }) }), jsxs(DialogActions, { children: [jsx(Button, { variant: "contained", onClick: (e) => {
+                            confirmationService("opos", [orderID]);
+                            // revalidates the selectedOpo from the database
+                            revalidateCallback && revalidateCallback();
+                        }, children: "Confirm" }), jsx(Button, { variant: "contained", onClick: handleClose, children: "Cancel" })] })] }));
+}
+function ManageOPOForm({ opo, sx, 
+// revalidates the selectedOpo from the database
+revalidateCallback, handleClose, role, }) {
+    // TODO bind to id of OPO
+    const boundUpdateOpoAction = (prevState, formData) => updateOpoAction(opo.documentId, prevState, formData);
+    const [formState, formAction] = useActionState(boundUpdateOpoAction, INITIAL_STATE);
+    const { handleAddMessage } = useSnackbar();
+    const [items, setItems] = useState(opo.opo_items ? opo.opo_items : []);
+    const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
+    const parseItems = (items) => {
+        return items.map((item) => {
+            return {
+                documentId: item.documentId,
+                ordered_quantity: item.ordered_quantity,
+                picked_quantity: item.picked_quantity,
+                packed_quantity: item.packed_quantity,
+                shipped_quantity: item.shipped_quantity,
+            };
+        });
+    };
+    const handleUpdateQuantity = (value, itemID, type) => {
+        const newItems = [...items];
+        const index = newItems.findIndex((item) => item.documentId === itemID);
+        newItems[index][type] = value;
+        setItems(newItems);
+    };
+    useEffect(() => {
+        if (opo.opo_items) {
+            setItems(opo.opo_items);
+        }
+    }, [opo]);
+    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 OPO",
+                severity: formState.severity || "error",
+            });
+        }
+    }, [formState?.strapiErrors]);
+    return (jsx(Box, { sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "space-between", children: [jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Manage Outbound Purchase Order" }), jsx(Typography, { variant: "body1", children: "Manage picking, packing and shipping of purchase order" })] }), jsx(NoteTakingComponent, { content: "", related: [{ id: opo.id, __type: "api::e-commerce.opo" }], revalidateCallback: revalidateCallback })] }), jsx(Divider, {})] }) }), jsx(Grid, { size: 6, children: jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "h5", children: "Details" }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Purchase Order Number" }), jsx(Typography, { variant: "body2", children: opo.opo_number })] }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Custom reference" }), jsx(Typography, { variant: "body2", children: opo.customer_reference })] }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Order Date" }), jsx(Typography, { variant: "body2", children: opo.order_date })] }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Customer" }), jsx(Typography, { variant: "body2", children: opo.customer?.business_credentials?.company_name })] }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Order Status" }), jsx(Typography, { variant: "body2", width: "250px", children: opo.internal_status })] }), (opo.internal_status === "placed" ||
+                                opo.internal_status === "external_shipping_process") &&
+                                role === "enduser" && (jsxs(Fragment, { children: [jsx(Button, { variant: "contained", color: "primary", onClick: () => setConfirmDialogOpen(true), children: "Confirm order" }), jsx(Alert, { severity: "warning", children: "Please confirm the order as soon as possible, only upon confirmation this order will be available to the dispatcher" }), jsx(ConfirmFormDialog, { open: confirmDialogOpen, handleClose: () => setConfirmDialogOpen(false), orderID: opo.documentId, currentStatus: opo.internal_status, revalidateCallback: revalidateCallback })] }))] }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Documents" }), jsx(Paper, { sx: { p: 2 }, children: jsx(Stack, { spacing: 1, children: opo.delivery_note ? (jsxs(Fragment, { children: [jsx(Typography, { variant: "h6", children: "Delivery Note" }), jsx(Typography, { children: opo.delivery_note?.name }), jsx(Button, { variant: "contained", onClick: () => {
+                                                    downloadBase64File(`api/opos/${opo.documentId}`, "delivery_note");
+                                                }, children: "Download" })] })) : (jsxs(Fragment, { children: [jsx(Typography, { variant: "h5", children: "Delivery Note" }), jsx(Typography, { variant: "body1", children: "Here you can upload the the delivery note for this order" }), jsx(Divider, {}), jsx(UploadBase64MediaForm, { reference: "api::e-commerce.opo", refID: opo.documentId, field: "delivery_note", multiple: false, accept: "text/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", path: "api/opos", componentName: "delivery_note", componentReference: "common.base64-encoded-media", revalidateCallback: revalidateCallback })] })) }) })] }) }), opo?.notes?.length > 0 && (jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Notes" }), jsx(NotesDisplay, { notes: opo.notes }), jsx(Divider, {})] }) })), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "h5", children: "Items" }), opo.internal_status === "placed" && (jsx(Alert, { severity: "warning", children: "Before confirmation you cannot update the items" })), jsx(Divider, {}), jsxs("form", { action: formAction, children: [jsx("input", { name: "id", type: "hidden", value: opo.documentId }), items &&
+                                        items.map((item, index) => {
+                                            console.log("item", item);
+                                            return (jsx(Paper, { sx: { p: 2, mb: 2 }, children: opo.internal_status === "placed" ? (jsx(OpoItemDisplay, { item: item, index: index, image: item?.product?.image })) : (jsx(OpoItemUpdater, { item: item, index: index, handleUpdateQuantity: handleUpdateQuantity, image: item?.product?.image, revalidateCallback: revalidateCallback })) }, index));
+                                        }), jsx(Paper, { sx: { p: 2 }, children: jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "space-between", children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Update items", loadingText: "Loading..." })] }) }), jsx("input", { type: "hidden", name: "items", value: JSON.stringify(parseItems(items)) })] })] }) })] }) }));
+}
+
+export { ManageOPOForm as default };