umwd-components 0.1.840 → 0.1.841

package/dist/esm/umwd-components/src/components/logistics/ipo/ManageIPOForm.js

@@ -0,0 +1,99 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useActionState, useState, useEffect } from 'react';
+import { useSnackbar } from '../../../context/common/SnackbarContext.js';
+import { updateIpoAction } from '../../../data/actions/logistics/ipo/updateIpoAction.js';
+import { UploadBase64MediaForm } from '../../common/media/UploadBase64MediaForm.js';
+import downloadBase64File from '../../../data/loaders/common/media/downloadBase64File.js';
+import ItemUpdater from './IPOItemUpdater.js';
+import ItemDisplay from './ItemDisplay.js';
+import NotesDisplay from '../note/NotesDisplay.js';
+import NoteTakingComponent from '../note/NoteTakingComponent.js';
+import { SubmitButton } from '../../SubmitButton.js';
+import { confirmationService } from '../../../data/services/common/confirmation-service.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';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+    severity: null,
+};
+function ConfirmFormDialog({ open, handleClose, orderID, currentStatus, 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("ipos", [orderID]);
+                            revalidateCallback && revalidateCallback();
+                            handleClose();
+                        }, children: "Confirm" }), jsx(Button, { variant: "outlined", onClick: handleClose, children: "Cancel" })] })] }));
+}
+function ManageIPOForm({ data, sx, revalidateCallback, handleClose, role, }) {
+    const [formState, formAction] = useActionState((prevState, formData) => updateIpoAction(data.documentId, prevState, formData), INITIAL_STATE);
+    const { handleAddMessage } = useSnackbar();
+    const [items, setItems] = useState(data.items ? data.items : []);
+    const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
+    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 performing action",
+                severity: "error",
+            });
+        }
+    }, [formState?.strapiErrors]);
+    const parseItems = (items) => {
+        return items.map((item) => {
+            return {
+                documentId: item.documentId,
+                received_quantity: item.received_quantity,
+                registered_quantity: item.registered_quantity,
+                released_quantity: item.released_quantity,
+            };
+        });
+    };
+    const handleUpdateQuantity = (value, itemID, type) => {
+        const newItems = [...items];
+        const index = newItems.findIndex((item) => item.documentId === itemID);
+        newItems[index][type] = value;
+        setItems(newItems);
+    };
+    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: "Manage Inbound Purchase Order" }), jsx(Typography, { variant: "body1", children: "Update the incoming purchase order details" })] }), jsx(NoteTakingComponent, { content: "", related: [{ id: data.id, __type: "api::logistics.ipo" }], 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: data.ipo_number })] }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Custom reference" }), jsx(Typography, { variant: "body2", children: data.customer_reference })] }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Order Date" }), jsx(Typography, { variant: "body2", children: data.order_date })] }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Supplier" }), jsx(Typography, { variant: "body2", children: data.vendor_profile?.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: data.internal_status })] }), (data.internal_status === "placed" ||
+                                data.internal_status === "released_on_stock") &&
+                                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 will this order be available to the dispatcher." }), jsx(ConfirmFormDialog, { open: confirmDialogOpen, handleClose: () => setConfirmDialogOpen(false), orderID: data.documentId, currentStatus: data.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: jsxs(Stack, { spacing: 1, children: [role === "enduser" && (jsx(Fragment, { children: data.order_confirmation ? (jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "h6", children: "Order Confirmation" }), jsx(Typography, { children: data.order_confirmation?.name }), jsx(Button, { variant: "contained", onClick: () => {
+                                                            downloadBase64File(`api/ipos/${data.documentId}`, "order_confirmation");
+                                                        }, children: "Download" })] })) : (jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "h6", children: "Order Confirmation" }), jsx(Typography, { variant: "body1", children: "Upload the order confirmation for this order" }), jsx(UploadBase64MediaForm, { reference: "api::logistics.ipo", refID: data.documentId, field: "order_confirmation", multiple: false, accept: "text/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", path: "api/ipos", componentName: "order_confirmation", componentReference: "common.base64-encoded-media", revalidateCallback: revalidateCallback })] })) })), data.delivery_note ? (jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "h6", children: "Delivery Note" }), jsx(Typography, { children: data.delivery_note?.name }), jsx(Button, { variant: "contained", onClick: () => {
+                                                        downloadBase64File(`api/ipos/${data.documentId}`, "delivery_note");
+                                                    }, children: "Download" })] })) : (jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "h6", children: "Delivery Note" }), jsx(Typography, { variant: "body1", children: "Upload the delivery note for this order" }), jsx(UploadBase64MediaForm, { reference: "api::logistics.ipo", refID: data.documentId, field: "delivery_note", multiple: false, accept: "text/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", path: "api/ipos", componentName: "delivery_note", componentReference: "common.base64-encoded-media", 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: 2, children: [jsx(Typography, { variant: "h5", children: "Items" }), data.internal_status === "placed" && (jsx(Alert, { severity: "warning", children: "Items cannot be updated before order confirmation" })), jsxs("form", { action: formAction, children: [jsx("input", { type: "hidden", name: "items", value: JSON.stringify(parseItems(items)) }), jsxs(Stack, { spacing: 2, children: [data?.items &&
+                                                data.items.map((item, index) => (jsx(Paper, { sx: { p: 2 }, children: data.internal_status === "placed" ? (jsx(ItemDisplay, { item: item, index: index, image: item?.product?.image })) : (jsx(ItemUpdater, { item: item, index: index, handleUpdateQuantity: handleUpdateQuantity, image: item?.product?.image, 
+                                                        // handleRemoveReportAtIndex={handleRemoveReportAtIndex}
+                                                        revalidateCallback: revalidateCallback })) }, index))), data.internal_status !== "placed" && (jsx(Paper, { sx: { p: 2 }, children: jsxs(Stack, { direction: "row", justifyContent: "flex-end", spacing: 2, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Update Items", loadingText: "Updating...", variant: "contained" })] }) }))] })] })] }) })] }) }));
+}
+
+export { ManageIPOForm as default };

package/dist/esm/umwd-components/src/components/logistics/ipo/TextualIPOItemUpdater.js

@@ -0,0 +1,56 @@
+/*
+ * 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 { TextualAmountUpdater } from '../../common/TextualAmountUpdater.js';
+import ArrowButtonDownIcon from '@mui/icons-material/ArrowDropDown';
+import ImagePreviewTooltip from '../../common/ImagePreviewTooltip.js';
+import ReportsDisplay from '../report/ReportsDisplay.js';
+import PreReportsDisplay from '../report/PreReportsDisplay.js';
+import SimpleReportFields from '../report/SimpleReportFields.js';
+import Box from '@mui/material/Box';
+
+function TextualIPOItemUpdater({ item, index, handleAddReport, handleUpdateQuantity, image, handleRemoveReportAtIndex, showing, }) {
+    const { line_item_number, product, ordered_quantity, received_quantity, registered_quantity, released_quantity, reports, } = item;
+    const [open, setOpen] = useState(false);
+    // these values where wrapped with useMemo before but that did not work well while updating values
+    reports && reports.length > 0
+        ? reports
+            .filter((report) => report.type === "received")
+            .reduce((a, b) => a + b.quantity, 0)
+        : 0;
+    const registered_reports_quantity = reports && reports.length > 0
+        ? reports
+            .filter((report) => report.type === "registered")
+            .reduce((a, b) => a + b.quantity, 0)
+        : 0;
+    reports && reports.length > 0
+        ? reports
+            .filter((report) => report.type === "released")
+            .reduce((a, b) => a + b.quantity, 0)
+        : 0;
+    const dbReports = item.reports?.filter((report) => "documentId" in report) ||
+        [];
+    const preReports = item.reports?.filter((report) => !("documentId" in report)) ||
+        [];
+    return (jsx(Stack, { spacing: 1, children: item && (jsxs(Fragment, { children: [jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 1 }, children: [jsxs(Typography, { variant: "body1", children: ["Line Item Number: ", line_item_number] }), jsxs(Typography, { variant: "body1", children: ["Part Number: ", product?.product_number] }), image && (jsx(Fragment, { children: jsx(ImagePreviewTooltip, { image: image, label: item.product?.title }) }))] }), jsx(Divider, { sx: { mb: 1 } }), showing && showing.includes("received") && (jsxs(Fragment, { children: [jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 1 }, children: [jsx(Typography, { variant: "body2", children: "Received" }), jsx(TextualAmountUpdater, { label: "Received", currentValue: received_quantity, totalValue: ordered_quantity, minnewvalue: 0, maxnewvalue: ordered_quantity, color: "info", handleChange: (newValue) => {
+                                        handleUpdateQuantity(newValue, item.documentId, "received_quantity");
+                                    } })] }), jsx(Divider, { sx: { mb: 2 } })] })), showing && showing.includes("registered") && (jsxs(Fragment, { children: [jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [jsx(Typography, { variant: "body2", children: "Registered" }), jsx(TextualAmountUpdater, { label: "Registered", currentValue: registered_quantity, totalValue: ordered_quantity + registered_reports_quantity, minnewvalue: 0 + released_quantity, maxnewvalue: received_quantity + registered_reports_quantity, color: "info", handleChange: (newValue) => {
+                                        handleUpdateQuantity(newValue, item.documentId, "registered_quantity");
+                                    } })] }), jsx(Divider, { sx: { mb: 2 } })] })), showing && showing.includes("reports") && (jsxs(Box, { sx: { mb: 2 }, children: [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: dbReports }), jsx(PreReportsDisplay, { itemID: item.documentId, reports: preReports, handleRemoveReportAtIndex: handleRemoveReportAtIndex }), jsx(SimpleReportFields, { itemID: item.documentId, content: "", type: "registered", minValue: -(received_quantity -
+                                            registered_quantity +
+                                            registered_reports_quantity), handleAddReport: handleAddReport })] }) })] })), showing && showing.includes("released") && (jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 1 }, children: [jsx(Typography, { variant: "body2", children: "Released" }), jsx(TextualAmountUpdater, { label: "Released", currentValue: released_quantity, totalValue: ordered_quantity + registered_reports_quantity, minnewvalue: 0, maxnewvalue: registered_quantity, color: "info", handleChange: (newValue) => {
+                                handleUpdateQuantity(newValue, item.documentId, "released_quantity");
+                            } })] }))] })) }, index));
+}
+
+export { TextualIPOItemUpdater as default };

package/dist/esm/umwd-components/src/components/logistics/ipo/TextualManageIPOForm.js

@@ -0,0 +1,234 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useActionState, useState, useEffect } from 'react';
+import { useSnackbar } from '../../../context/common/SnackbarContext.js';
+import { updateIpoAction } from '../../../data/actions/logistics/ipo/updateIpoAction.js';
+import { confirmationService } from '../../../data/services/common/confirmation-service.js';
+import { cancellationService } from '../../../data/services/common/cancellation-service.js';
+import { UploadMinioMediaForm } from '../../common/media/minio/UploadMinioMediaForm.js';
+import NoteTakingComponent from '../note/NoteTakingComponent.js';
+import NotesDisplay from '../note/NotesDisplay.js';
+import ItemDisplay from './ItemDisplay.js';
+import TextualIPOItemUpdater from './TextualIPOItemUpdater.js';
+import { IpoStatusIndicator } from './IpoStatusIndicator.js';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Paper from '@mui/material/Paper';
+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 Divider from '@mui/material/Divider';
+import TextField from '@mui/material/TextField';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import Alert from '@mui/material/Alert';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import NumbersIcon from '@mui/icons-material/Numbers';
+import DescriptionIcon from '@mui/icons-material/Description';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import BusinessIcon from '@mui/icons-material/Business';
+import UpdateIcon from '@mui/icons-material/Update';
+import { SubmitButton } from '../../SubmitButton.js';
+import { MinioDisplay } from '../../common/media/minio/MinioDisplay.js';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+    severity: null,
+};
+function ConfirmFormDialog({ open, handleClose, orderID, currentStatus, revalidateCallback, }) {
+    const { handleAddMessage } = useSnackbar();
+    const handleConfirm = async () => {
+        try {
+            await confirmationService("ipos", [orderID]);
+            handleAddMessage({
+                message: "IPO confirmed successfully",
+                severity: "success",
+            });
+            revalidateCallback && revalidateCallback();
+            handleClose();
+        }
+        catch (error) {
+            handleAddMessage({
+                message: "Failed to confirm IPO",
+                severity: "error",
+            });
+        }
+    };
+    return (jsxs(Dialog, { open: open, onClose: handleClose, 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] }), jsx(Alert, { severity: "info", children: "Once confirmed, the order will be available for processing." })] }) }), jsxs(DialogActions, { children: [jsx(Button, { variant: "outlined", onClick: handleClose, children: "Cancel" }), jsx(Button, { variant: "contained", color: "primary", onClick: handleConfirm, children: "Confirm Order" })] })] }));
+}
+function CancelIpoDialog({ open, handleClose, orderID, revalidateCallback, }) {
+    const [reason, setReason] = 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;
+        }
+        try {
+            await cancellationService("ipos", orderID, reason);
+            handleAddMessage({
+                message: "Order cancelled successfully",
+                severity: "success",
+            });
+            revalidateCallback && revalidateCallback();
+            handleClose();
+        }
+        catch (error) {
+            handleAddMessage({
+                message: "Failed to cancel order",
+                severity: "error",
+            });
+        }
+    };
+    return (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) => setReason(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 TextualManageIPOForm({ data, sx, revalidateCallback, handleClose, role, }) {
+    const [formState, formAction] = useActionState((prevState, formData) => updateIpoAction(data.documentId, prevState, formData), INITIAL_STATE);
+    const { handleAddMessage } = useSnackbar();
+    const [items, setItems] = useState(data.items ? data.items : []);
+    const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
+    const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
+    const [showing, setShowing] = useState(["received", "registered", "released", "reports"]);
+    const options = [
+        "received",
+        "registered",
+        "released",
+        "reports",
+    ];
+    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 IPO",
+                severity: "error",
+            });
+        }
+    }, [formState?.strapiErrors]);
+    const parseItems = (items) => {
+        return items.map((item) => {
+            return {
+                documentId: item.documentId,
+                ordered_quantity: item.ordered_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) => "id" in report);
+        const preReports = reportsOnItem.filter((report) => !("id" in report));
+        preReports.splice(index, 1);
+        const newReports = [...dbReports, ...preReports];
+        newItems[itemIndex].reports = newReports;
+        setItems(newItems);
+    };
+    useEffect(() => {
+        if (formState?.message === "Ipo Updated") {
+            handleAddMessage({
+                message: "Ipo Updated",
+                severity: "success",
+            });
+            if (formState.severity === "success") {
+                revalidateCallback && revalidateCallback();
+                handleClose && handleClose();
+            }
+        }
+    }, [formState?.message]);
+    useEffect(() => {
+        if (formState?.strapiErrors) {
+            handleAddMessage({
+                message: formState.strapiErrors.message || "Error updating IPO",
+                severity: "error",
+            });
+        }
+    }, [formState?.strapiErrors]);
+    useEffect(() => {
+        console.log("data", data);
+        if (data.items) {
+            setItems(data.items ? data.items : []);
+        }
+    }, [data]);
+    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: "Management Inbound Purchase Order" }), jsx(Typography, { variant: "body1", children: "Manage arrival, registration and recieval of purchase order" })] }), jsx(NoteTakingComponent, { content: "", related: [{ id: data.id, __type: "api::logistics.ipo" }], 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: "Purchase Order Number" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.ipo_number })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(DescriptionIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Custom 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: "Order Date" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.order_date })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(BusinessIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Supplier" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.vendor_profile?.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: "Order Status" }), jsx(IpoStatusIndicator, { status: data.internal_status })] })] }) }) }), role === "enduser" && (jsx(Grid, { size: 6, children: jsx(Paper, { elevation: 2, sx: { p: 2, height: "100%" }, children: jsxs(Stack, { spacing: 2, children: [(data.internal_status === "placed" ||
+                                    data.internal_status === "released_on_stock") && (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: data.documentId, currentStatus: data.internal_status, revalidateCallback: revalidateCallback })] })), (data.internal_status === "placed" ||
+                                    data.internal_status === "ordered") && (jsxs(Fragment, { children: [jsx(Button, { variant: "contained", color: "error", onClick: () => setCancelDialogOpen(true), children: "Cancel order" }), jsx(CancelIpoDialog, { open: cancelDialogOpen, handleClose: () => setCancelDialogOpen(false), orderID: data.documentId, revalidateCallback: revalidateCallback })] }))] }) }) })), jsx(Grid, { size: 12, children: jsx(Typography, { variant: "h5", children: "Documents" }) }), role === "enduser" && (jsx(Grid, { size: 6, children: data.minio_order_confirmation ? (jsx(Paper, { sx: { p: 2 }, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Order Confirmation" }), jsx(MinioDisplay, { fileSize: data.minio_order_confirmation?.fileSize, mimeType: data.minio_order_confirmation?.mimeType, fileName: data.minio_order_confirmation?.fileName, bucketName: data.minio_order_confirmation?.bucketName, revalidateCallback: revalidateCallback })] }) })) : (jsx(Paper, { sx: { p: 2 }, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Order Confirmation" }), jsx(Typography, { variant: "body2", children: "Upload the order confirmation document for this purchase order" }), jsx(UploadMinioMediaForm, { reference: "api::logistics.ipo", refID: data.documentId, field: "minio_order_confirmation", bucketName: "umwd", multiple: false, revalidateCallback: revalidateCallback })] }) })) })), jsx(Grid, { size: 6, children: data.minio_delivery_note ? (jsx(Paper, { sx: { p: 2 }, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Delivery Note" }), jsx(MinioDisplay, { fileSize: data.minio_delivery_note?.fileSize, mimeType: data.minio_delivery_note?.mimeType, fileName: data.minio_delivery_note?.fileName, bucketName: data.minio_delivery_note?.bucketName, revalidateCallback: revalidateCallback })] }) })) : (jsx(Paper, { sx: { p: 2 }, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Delivery Note" }), jsx(Typography, { variant: "body2", children: "Upload the delivery note document for this purchase order" }), jsx(UploadMinioMediaForm, { reference: "api::logistics.ipo", refID: data.documentId, field: "minio_delivery_note", bucketName: "umwd", multiple: false, 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 === "placed" && (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 === "placed" ||
+                                                    data.internal_status === "cancelled" ||
+                                                    data.internal_status === "done" ? (jsx(ItemDisplay, { item: item, index: index, image: item?.product?.image })) : (jsx(TextualIPOItemUpdater, { item: item, index: index, handleUpdateQuantity: handleUpdateQuantity, handleAddReport: handleAddReport, image: item?.product?.image, handleRemoveReportAtIndex: handleRemoveReportAtIndex, revalidateCallback: revalidateCallback, showing: showing })) }, index));
+                                        }), jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "space-between", children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { variant: "contained", text: "Update items", loadingText: "Loading..." })] })] })] }) })] }) }));
+}
+
+export { TextualManageIPOForm as default };

package/dist/esm/umwd-components/src/components/logistics/note/NoteTakingComponent.js

@@ -0,0 +1,88 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useActionState, useEffect } from 'react';
+import IconButton from '@mui/material/IconButton';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import dayjs from '../../../../node_modules/dayjs/dayjs.min.js';
+import NoteAltIcon from '@mui/icons-material/NoteAlt';
+import { SubmitButton } from '../../SubmitButton.js';
+import { createNoteAction } from '../../../data/actions/logistics/note/createNoteAction.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,
+};
+/** INFO Notes can only be created with entities that already excist,
+ * this is because the note has to be saved with a relation to the parent entity */
+function NoteTakingComponent({ content, related, revalidateCallback, }) {
+    const [open, setOpen] = useState(false);
+    const createNoteWithRelationsAction = createNoteAction.bind(null, related ? related : null);
+    const [formState, formAction] = useActionState(createNoteWithRelationsAction, INITIAL_STATE);
+    const { handleAddMessage } = useSnackbar();
+    useEffect(() => {
+        if (formState?.strapiErrors) {
+            handleAddMessage({
+                message: formState.strapiErrors,
+                severity: formState.severity || "error",
+            });
+        }
+        if (formState?.message) {
+            handleAddMessage({
+                message: formState.message,
+                severity: formState.severity || "error",
+            });
+        }
+        if (formState?.severity === "success") {
+            setOpen(false);
+            if (revalidateCallback) {
+                revalidateCallback();
+            }
+        }
+    }, [formState]);
+    return (jsxs(Fragment, { children: [jsx(IconButton, { onClick: () => setOpen(true), sx: {
+                    width: 50,
+                    height: 50,
+                    color: "#ffff88",
+                }, children: jsx(NoteAltIcon, { fontSize: "large" }) }), jsx(Dialog, { open: open, fullWidth: true, maxWidth: "lg", onClose: () => setOpen(false), children: jsxs("form", { action: formAction, children: [jsx(DialogContent, { sx: { p: 1 }, children: jsx(Paper, { elevation: 4, sx: {
+                                    background: "linear-gradient(135deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%)",
+                                    color: "black",
+                                    p: 1,
+                                }, children: jsxs(Stack, { spacing: 2, children: [jsxs(Typography, { variant: "body1", textAlign: "right", children: ["related to:", " ", jsx("span", { style: { fontWeight: "bold" }, children: related && related.length > 0
+                                                        ? related
+                                                            .map((rel) => {
+                                                            return rel.id;
+                                                        })
+                                                            .join(", ")
+                                                        : "No Relation Provided" })] }), jsxs(Typography, { variant: "body1", textAlign: "right", children: ["date:", " ", jsx("span", { style: { fontWeight: "bold" }, children: dayjs(Date.now()).format("DD-MM-YYYY") })] }), jsx(MarkdownEditor, { name: "content", label: "The note", defaultValue: content, sx: {
+                                                color: "black",
+                                                label: { color: "black" },
+                                                input: { color: "black" },
+                                                div: { color: "black" },
+                                            }, textfieldProps: {
+                                                id: "content",
+                                                placeholder: "Write your note here...",
+                                                multiline: true,
+                                                minRows: 5,
+                                                maxRows: 10,
+                                                error: formState?.zodErrors?.content != undefined ? true : false,
+                                                helperText: formState?.zodErrors?.content || "",
+                                            } })] }) }) }), jsxs(DialogActions, { children: [jsx(Button, { onClick: () => setOpen(false), children: "Cancel" }), jsx(SubmitButton, { text: "Submit", loadingText: "Loading..." })] })] }) })] }));
+}
+
+export { NoteTakingComponent as default };

package/dist/esm/umwd-components/src/components/logistics/note/NotesDisplay.js

@@ -0,0 +1,24 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Typography from '@mui/material/Typography';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Stack from '@mui/material/Stack';
+import MarkdownDisplay from '../../common/markdown/MarkdownDisplay.js';
+
+const NotesDisplay = ({ notes }) => {
+    return (jsx(Stack, { spacing: 2, children: notes.map((note, index) => {
+            return (jsx(Card, { variant: "outlined", sx: {
+                    background: "linear-gradient(135deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%)",
+                    color: "black",
+                    p: 1,
+                }, children: jsxs(CardContent, { children: [jsx(Typography, { children: note.date }), jsx(MarkdownDisplay, { children: note.content }), jsxs(Typography, { align: "right", sx: { fontStyle: "bold" }, children: ["- ", note.author?.first_name, " ", note.author?.last_name, " ", note.author?.username] })] }) }, index));
+        }) }));
+};
+
+export { NotesDisplay as default };

package/dist/esm/umwd-components/src/components/logistics/report/PreReportsDisplay.js

@@ -0,0 +1,23 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Stack from '@mui/material/Stack';
+import Chip from '@mui/material/Chip';
+import Grid from '@mui/material/Grid';
+import MarkdownDisplay from '../../common/markdown/MarkdownDisplay.js';
+import { IconButton, Divider } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+const PreReportsDisplay = ({ itemID, reports, handleRemoveReportAtIndex, }) => {
+    return (jsx(Stack, { spacing: 2, children: reports &&
+            reports.length > 0 &&
+            reports.map((report, index) => {
+                return (jsxs(Grid, { container: true, children: [jsx(Grid, { size: 2, children: jsx(Chip, { label: `${report.quantity > 0 ? "+" : ""} ${report.quantity}`, color: report.quantity > 0 ? "success" : "error", size: "small" }) }), jsx(Grid, { size: 7, children: jsx(MarkdownDisplay, { children: report.content }) }), jsx(Grid, { size: 1, children: jsx(IconButton, { "aria-label": "delete", onClick: () => handleRemoveReportAtIndex(itemID, index), children: jsx(DeleteIcon, {}) }) }), jsx(Grid, { size: 12, children: jsx(Divider, { sx: { mb: 1 } }) })] }, index));
+            }) }));
+};
+
+export { PreReportsDisplay as default };