umwd-components 0.1.834 → 0.1.835

package/dist/esm/src/components/layout/SideNav.js

@@ -0,0 +1,154 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
+import Typography from '@mui/material/Typography';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import SpeedDial from '@mui/material/SpeedDial';
+import SpeedDialAction from '@mui/material/SpeedDialAction';
+import Drawer from '@mui/material/Drawer';
+import AppBar from '@mui/material/AppBar';
+import MenuIcon from '@mui/icons-material/Menu';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import { useTheme } from '@mui/material/styles';
+import { StyledLink } from '../StyledLink.js';
+import { Paper } from '@mui/material';
+
+function SideNav({ children, data, }) {
+    const { sections = [], actions = [], sx = {}, title, drawerWidth = 260, } = data;
+    const theme = useTheme();
+    const AppbarSxOpen = {
+        zIndex: theme.zIndex.drawer + 1,
+        marginLeft: drawerWidth,
+        width: `calc(100% - ${drawerWidth}px)`,
+        /* transition: theme.transitions.create(["width", "margin"], {
+          easing: theme.transitions.easing.sharp,
+          duration: theme.transitions.duration.enteringScreen,
+        }), */
+    };
+    const AppbarSxClosed = {
+        zIndex: theme.zIndex.drawer + 1,
+        transition: theme.transitions.create(["width", "margin"], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+    };
+    const drawerSxOpen = {
+        width: drawerWidth,
+        flexShrink: 0,
+        whiteSpace: "nowrap",
+        boxSizing: "border-box",
+        transition: theme.transitions.create("width", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+        overflowX: "hidden",
+        "& .MuiDrawer-paper": {
+            width: drawerWidth,
+            transition: theme.transitions.create("width", {
+                easing: theme.transitions.easing.sharp,
+                duration: theme.transitions.duration.enteringScreen,
+            }),
+            overflowX: "hidden",
+        },
+    };
+    const drawerSxClosed = {
+        flexShrink: 0,
+        whiteSpace: "nowrap",
+        boxSizing: "border-box",
+        transition: theme.transitions.create("width", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        overflowX: "hidden",
+        width: `calc(${theme.spacing(7)} + 1px)`,
+        [theme.breakpoints.up("sm")]: {
+            width: `calc(${theme.spacing(8)} + 1px)`,
+        },
+        "& .MuiDrawer-paper": {
+            transition: theme.transitions.create("width", {
+                easing: theme.transitions.easing.sharp,
+                duration: theme.transitions.duration.leavingScreen,
+            }),
+            overflowX: "hidden",
+            width: `calc(${theme.spacing(7)} + 1px)`,
+            [theme.breakpoints.up("sm")]: {
+                width: `calc(${theme.spacing(8)} + 1px)`,
+            },
+        },
+    };
+    const [open, setOpen] = React.useState(true);
+    const handleDrawerOpen = () => {
+        setOpen(true);
+    };
+    const handleDrawerClose = () => {
+        setOpen(false);
+    };
+    return (jsxs(Box, { sx: { display: "flex", ...sx }, children: [jsx(AppBar, { position: "fixed", sx: [open && AppbarSxOpen, !open && AppbarSxClosed], children: jsxs(Toolbar, { component: Paper, elevation: 4, children: [jsx(IconButton, { color: "inherit", "aria-label": "open drawer", onClick: handleDrawerOpen, edge: "start", sx: {
+                                marginRight: 5,
+                                ...(open && { display: "none" }),
+                            }, children: jsx(MenuIcon, {}) }), jsx(StyledLink, { href: "/dashboard", target: "_self", children: title ?? "Dashboard" }), jsx(Box, { sx: {
+                                position: "relative",
+                                height: "40px",
+                                flexGrow: 1,
+                            }, children: jsx(SpeedDial, { ariaLabel: "...", icon: jsx(AccountCircleIcon, {}), direction: "down", sx: {
+                                    position: "absolute",
+                                    top: 0,
+                                    right: 0,
+                                    width: 40,
+                                    "& .MuiFab-root": { width: 40, height: 40 },
+                                }, children: actions.map((action, index) => (jsx(SpeedDialAction, { icon: action.icon, "aria-label": action.name, tooltipTitle: action.name, 
+                                    /* a very precious hint from somebody on github:
+                                      here what's happening is that when you do onClick={mutateUserUniverserData}, you are doing this,
+                                      onClick={(event) => mutateUserUniverserData(event)}, and you kind of want to ignore the event,
+                                      because it is not serializable according Server Actions. */
+                                    onClick: () => {
+                                        action.action();
+                                    } }, index))) }) })] }) }), jsxs(Drawer, { variant: "permanent", open: open, sx: [open && drawerSxOpen, !open && drawerSxClosed], children: [jsx(Box, { sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "flex-end",
+                            padding: theme.spacing(0, 1),
+                            // necessary for content to be below app bar
+                            ...theme.mixins.toolbar,
+                        }, children: jsx(IconButton, { onClick: handleDrawerClose, children: theme.direction === "rtl" ? (jsx(ChevronRightIcon, {})) : (jsx(ChevronLeftIcon, {})) }) }), jsx(Divider, {}), sections.map((section, index) => (jsxs(Box, { sx: {
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "flex-start",
+                        }, children: [jsx(StyledLink, { href: section.link, target: "_self", children: jsxs(Box, { sx: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        p: 1,
+                                        cursor: "pointer",
+                                    }, children: [section.icon, !open && section.subSections && jsx(Typography, { children: "..." }), open && (jsx(Typography, { sx: { pl: 2 }, children: section.title }))] }) }), section.subSections &&
+                                open &&
+                                section.subSections.map((subSection, index) => {
+                                    return (jsx(StyledLink, { href: subSection.link, target: "_self", children: jsx(Box, { sx: {
+                                                display: "flex",
+                                                alignItems: "center",
+                                                justifyContent: "center",
+                                                p: 1,
+                                                cursor: "pointer",
+                                            }, children: jsx(Typography, { variant: "body2", sx: { pl: 4 }, children: subSection.title }) }) }, index));
+                                })] }, index)))] }), jsxs(Box, { component: "main", sx: { flexGrow: 1, minHeight: "100vh" }, children: [jsx(Box, { sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "flex-end",
+                            // padding: theme.spacing(0, 1),
+                            // necessary for content to be below app bar
+                            ...theme.mixins.toolbar,
+                        } }), children] })] }));
+}
+
+export { SideNav as default };

package/dist/esm/src/components/logistics/dispatcher/DispatcherProfileDisplay.js

@@ -0,0 +1,41 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import Grid from '@mui/material/Grid';
+import Alert from '@mui/material/Alert';
+import PersonIcon from '@mui/icons-material/Person';
+import EmailIcon from '@mui/icons-material/Email';
+import PhoneIcon from '@mui/icons-material/Phone';
+import Address from '../../common/Address.js';
+import BusinessCredentials from '../../e-commerce/customer/BusinessCredentials.js';
+import { StyledLink } from '../../StyledLink.js';
+import { usePathname } from 'next/navigation';
+
+function DispatcherProfileDisplay({ data, }) {
+    const { first_name, last_name, email, phone, company_address, business_credentials, editProfileUrl = "/dashboard/dispatcher/user/profile/edit", completeEnough = false, } = data;
+    const pathname = usePathname();
+    // Check if the current path is for a dispatcher profile
+    const isDispatcher = pathname.includes("dispatcher/user/");
+    return (jsx(Paper, { sx: { p: 2 }, children: jsxs(Stack, { spacing: 2, children: [isDispatcher && (jsx(Fragment, { children: !Boolean(completeEnough) ? (jsx(Alert, { severity: "warning", action: jsx(StyledLink, { href: editProfileUrl, target: "_self", children: jsx(Button, { variant: "contained", children: "complete profile" }) }), children: "After completion of your profile you can enjoy all the benefits of your services." })) : (jsx(Stack, { direction: "row", justifyContent: "flex-end", children: jsx(StyledLink, { href: editProfileUrl, target: "_self", children: jsx(Button, { variant: "contained", children: "edit profile" }) }) })) })), jsx(Divider, {}), jsxs(Grid, { container: true, spacing: 2, sx: { width: "100%" }, children: [jsxs(Grid, { size: {
+                                xs: 12,
+                                md: 4
+                            }, children: [jsx(Typography, { variant: "h6", children: "Personal Information" }), jsxs(Stack, { spacing: 1, sx: { mt: 2 }, children: [jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(PersonIcon, {}), jsx(Typography, { children: `${first_name} ${last_name}` })] }), jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(EmailIcon, {}), jsx(Typography, { children: email })] }), jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(PhoneIcon, {}), jsx(Typography, { children: phone })] })] })] }), jsxs(Grid, { size: {
+                                xs: 12,
+                                md: 4
+                            }, children: [jsx(Typography, { variant: "h6", children: "Business Credentials" }), business_credentials ? (jsx(BusinessCredentials, { data: business_credentials })) : (jsx(Typography, { children: "Business credentials not available" }))] }), jsxs(Grid, { size: {
+                                xs: 12,
+                                md: 4
+                            }, children: [jsx(Typography, { variant: "h6", children: "Company Address" }), company_address ? (jsx(Address, { data: { ...company_address } })) : (jsx(Typography, { children: "Company address not available" }))] })] })] }) }));
+}
+
+export { DispatcherProfileDisplay as default };

package/dist/esm/src/components/logistics/dispatcher/DispatcherProfileEditForm.js

@@ -0,0 +1,65 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Divider from '@mui/material/Divider';
+import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Grid from '@mui/material/Grid';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import { AddressFields } from '../../common/Address.js';
+import { SubmitButton } from '../../SubmitButton.js';
+import { useActionState, useEffect } from 'react';
+import { updateDispatcherProfileAction } from '../../../data/actions/logistics/dispatcher/profile-actions.js';
+import { BusinessCredentialsFields } from '../../e-commerce/customer/BusinessCredentials.js';
+import { useSession } from '../../../context/auth/SessionContext.js';
+import { useSnackbar } from '../../../context/common/SnackbarContext.js';
+import EmailIcon from '@mui/icons-material/Email';
+import PhoneIcon from '@mui/icons-material/Phone';
+import PersonIcon from '@mui/icons-material/Person';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+    severity: null,
+};
+function DispatcherProfileEditForm({ data, sx, revalidateCallback, handleClose, }) {
+    const { documentId, first_name, last_name, email, phone, company_address, business_credentials, } = data;
+    const boundAction = updateDispatcherProfileAction.bind(null, documentId);
+    const [formState, formAction] = useActionState(boundAction, INITIAL_STATE);
+    const { handleAddMessage } = useSnackbar();
+    const { refreshSession } = useSession();
+    useEffect(() => {
+        if (formState?.message) {
+            handleAddMessage({
+                message: formState.message,
+                severity: formState.severity || "error",
+            });
+            if (formState.severity === "success") {
+                refreshSession();
+                revalidateCallback && revalidateCallback();
+                handleClose && handleClose();
+            }
+        }
+    }, [formState?.message]);
+    useEffect(() => {
+        if (formState?.strapiErrors) {
+            handleAddMessage({
+                message: formState.strapiErrors.message || "Error performing action",
+                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: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Edit Profile" }), jsx(Typography, { variant: "body1", children: "Update your profile information" })] }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Personal Information" }), jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(PersonIcon, {}), jsx(Typography, { children: `${first_name} ${last_name}` })] }), jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(EmailIcon, {}), jsx(TextField, { id: "email", name: "email", label: "Email", type: "email", defaultValue: email })] }), jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(PhoneIcon, {}), jsx(TextField, { id: "phone", name: "phone", label: "Phone", type: "tel", defaultValue: phone })] })] }) }), jsx(Grid, { size: 12, children: jsxs(Paper, { sx: { p: 2 }, children: [jsx(Typography, { variant: "h6", gutterBottom: true, children: "Company Address" }), jsx(Divider, { sx: { mb: 2 } }), jsx(AddressFields, { componentName: "company_address", componentReference: "common.address", data: company_address })] }) }), jsx(Grid, { size: 12, children: jsxs(Paper, { sx: { p: 2 }, children: [jsx(Typography, { variant: "h6", gutterBottom: true, children: "Business Credentials" }), jsx(Divider, { sx: { mb: 2 } }), jsx(BusinessCredentialsFields, { componentName: "business_credentials", componentReference: "business.credentials", data: business_credentials })] }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", spacing: 2, alignItems: "center", sx: { mt: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Save Changes", loadingText: "Saving...", variant: "contained" })] }) })] }) }) }));
+}
+
+export { DispatcherProfileEditForm as default };

package/dist/esm/src/components/logistics/ipo/AddIPOForm.js

@@ -0,0 +1,80 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useActionState, useState, useEffect } from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import Button from '@mui/material/Button';
+import Checkbox from '@mui/material/Checkbox';
+import { SubmitButton } from '../../SubmitButton.js';
+import { createIPOAction } from '../../../data/actions/logistics/ipo/createIPOAction.js';
+import Grid from '@mui/material/Grid';
+import VendorSelector from '../vendor/VendorSelector.js';
+import { getSingleVendor } from '../../../data/loaders/logistics/getSingleVendor.js';
+import { IPOItemFields } from './IPOItemFields.js';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { useSnackbar } from '../../../context/common/SnackbarContext.js';
+
+// TODO: order date should be set by the user
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+    severity: null,
+};
+function AddIPOForm({ vendorNamesArr, sx, revalidateCallback, handleClose, }) {
+    const [formState, formAction] = useActionState(createIPOAction, INITIAL_STATE);
+    const [productsArr, setProductsArr] = useState([]);
+    const [vendorID, setVendorID] = useState(null);
+    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 performing action",
+                severity: "error",
+            });
+        }
+    }, [formState?.strapiErrors]);
+    const handleVendorSelect = async (selectedVendorID) => {
+        setVendorID(selectedVendorID);
+        if (!selectedVendorID) {
+            setProductsArr([]);
+            return;
+        }
+        const vendor = await getSingleVendor(selectedVendorID);
+        const vendorProducts = vendor?.products.filter((product) => !product.product_number.startsWith("r")) || [];
+        setProductsArr(vendorProducts);
+    };
+    return (jsx(Box, { sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            ...(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: "Add IPO" }), jsx(Typography, { variant: "body1", children: "Create a new incoming purchase order" })] }) }), jsx(Grid, { sx: { mt: 1 }, size: {
+                            xs: 12,
+                            md: 6,
+                        }, children: vendorNamesArr ? (jsx(VendorSelector, { vendorNames: vendorNamesArr, currentValue: null, onSelectVendor: handleVendorSelect })) : (jsx(Typography, { children: "No vendors on file, you need to create a vendor first before you are able to create incoming purchase orders" })) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Order Details" }), jsx(Typography, { variant: "body1", children: "The orderdate should be the official date of the order, don't worry, you can also set days in the past or future" }), jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: jsx(DatePicker, { name: "order_date", label: "Order Date" }) }), jsx(Typography, { variant: "body1", children: "Please enter a custom reference for this order" }), jsx(TextField, { id: "customer_reference", name: "customer_reference", type: "text", label: "Custom Reference" }), jsx(Divider, {})] }) }), jsx(Grid, { size: 12, children: jsx(IPOItemFields, { productsArr: productsArr, vendorID: vendorID }) }), jsxs(Grid, { size: 12, children: [jsx(Checkbox, { name: "confirmation", defaultChecked: true }), jsx(Typography, { variant: "body2", children: "I confirm that the information provided is accurate to the best of my knowledge and like to confirm immediately." })] }), jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mt: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Create IPO", loadingText: "Creating...", variant: "contained", disabled: vendorID === null })] }) })] }) }) }));
+}
+
+export { AddIPOForm };

package/dist/esm/src/components/logistics/ipo/IPOItemFields.js

@@ -0,0 +1,127 @@
+/*
+ * 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 '../../e-commerce/products/ProductSelector.js';
+import WeekPicker from '../../common/WeekPicker.js';
+import dayjs from '../../../../node_modules/dayjs/dayjs.min.js';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { useTheme } from '@mui/material/styles';
+
+const getWeek = (date) => {
+    return dayjs(date).isoWeek();
+};
+function IPOItemFields({ productsArr, vendorID = null, }) {
+    const [items, setItems] = useState([]);
+    const [nextProductName, setNextProductName] = useState(null);
+    const [nextAmount, setNextAmount] = useState(0);
+    const [nextPDW, setNextPDW] = useState(new Date()); // preffered delivery week
+    const [selectedProduct, setSelectedProduct] = useState([]);
+    const handleAddItem = () => {
+        if (nextProductName === null || nextAmount === null) {
+            console.log("nextProductName or nextAmount is null");
+            return;
+        }
+        const newItem = {
+            product: nextProductName,
+            amount: nextAmount,
+            pdw: nextPDW,
+        };
+        setItems([...items, newItem]);
+        // reset the fields
+        setNextProductName(null);
+        setNextAmount(0);
+        setNextPDW(new Date());
+        setSelectedProduct([]);
+    };
+    const handleDeleteItem = (index) => {
+        const newItems = items.filter((_, i) => i !== index);
+        setItems(newItems);
+    };
+    const theme = useTheme();
+    useEffect(() => {
+        setItems([]);
+    }, [vendorID]);
+    const parseItems = (items) => {
+        return items.map((item, index) => {
+            return {
+                line_item_number: `${index + 1}.0.0`,
+                product: item.product.documentId,
+                ordered_quantity: item.amount,
+                expected_delivery_date: item.pdw,
+            };
+        });
+    };
+    const [parsedItems, setParsedItems] = useState([]);
+    useEffect(() => {
+        setParsedItems(parseItems(items));
+    }, [items]);
+    return (jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Adding the products" }), jsx(Typography, { variant: "body1", children: "Please select the products that are in the purchase order" }), jsx(Typography, { variant: "body2", children: "Only products by the selected supplier can be added" }), jsxs(Table, { children: [jsx(TableHead, { children: jsxs(TableRow, { children: [jsx(TableCell, { id: "line_item_number", sx: [
+                                        { width: "15%" },
+                                        vendorID === null && {
+                                            color: theme.palette.text.disabled,
+                                        },
+                                    ], children: "Line Item Number" }), jsx(TableCell, { sx: [
+                                        { width: "55%" },
+                                        vendorID === null && {
+                                            color: theme.palette.text.disabled,
+                                        },
+                                    ], children: "Product Number" }), jsx(TableCell, { sx: [
+                                        { width: "15%" },
+                                        vendorID === null && {
+                                            color: theme.palette.text.disabled,
+                                        },
+                                    ], children: "Amount" }), jsx(TableCell, { sx: [
+                                        { width: "15%" },
+                                        vendorID === null && {
+                                            color: theme.palette.text.disabled,
+                                        },
+                                    ], children: "Preferred delivery week" }), jsx(TableCell, { sx: [
+                                        vendorID === null && {
+                                            color: theme.palette.text.disabled,
+                                        },
+                                    ] })] }) }), jsx(TableBody, { children: items.map((item, index) => {
+                            return (jsxs(TableRow, { children: [jsxs(TableCell, { sx: [
+                                            { width: "15%" },
+                                            vendorID === null && { color: theme.palette.text.disabled },
+                                        ], children: [index + 1, ".0.0"] }), jsxs(TableCell, { sx: [
+                                            { width: "55%" },
+                                            vendorID === null && { color: theme.palette.text.disabled },
+                                        ], children: [item.product.product_number, " | ", item.product.title] }), jsx(TableCell, { sx: { width: "15%" }, children: item.amount }), jsx(TableCell, { sx: { width: "10%" }, children: getWeek(item.pdw) }), jsx(TableCell, { align: "right", sx: { width: "5%" }, children: jsx(IconButton, { onClick: () => handleDeleteItem(index), children: jsx(DeleteIcon, {}) }) })] }, index));
+                        }) })] }), jsx("input", { type: "hidden", name: "ipo_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: "55%" }, 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));
+                        }, disabled: vendorID === null, sx: { width: "15%" } }), jsx(WeekPicker, { value: nextPDW, onChangeCallback: (date) => {
+                            setNextPDW(date);
+                        }, label: "Preferred delivery week", disabled: false }), jsx(IconButton, { disabled: vendorID === null ||
+                            nextAmount === 0 ||
+                            nextPDW === null ||
+                            nextProductName === null, onClick: handleAddItem, children: jsx(AddIcon, {}) })] })] }));
+}
+
+export { IPOItemFields };

package/dist/esm/src/components/logistics/ipo/IPOItemUpdater.js

@@ -0,0 +1,47 @@
+/*
+ * 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 '../report/ReportMakingComponent.js';
+import ReportsDisplay from '../report/ReportsDisplay.js';
+
+function ItemUpdater({ item, index, handleUpdateQuantity, image, revalidateCallback, }) {
+    const { line_item_number, product, received_quantity, registered_quantity, released_quantity, ordered_quantity, reports, } = 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_number] })] }), image && (jsx(Fragment, { children: jsx(ImagePreviewTooltip, { image: image, label: item.product.title }) }))] }), jsx(Typography, { variant: "body2", children: "Received" }), jsx(AmountUpdater, { currentValue: received_quantity, totalValue: ordered_quantity + received_bad_quantity, minnewvalue: 0 + registered_quantity + -registered_bad_quantity, maxnewvalue: ordered_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: ordered_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::logistics.ipo-item",
+                                    },
+                                ], revalidateCallback: revalidateCallback })] }) }), jsx(Typography, { variant: "body2", children: "Released" }), jsx(AmountUpdater, { currentValue: released_quantity || 0, totalValue: ordered_quantity + received_bad_quantity + registered_bad_quantity, minnewvalue: 0, maxnewvalue: registered_quantity, color: "info", handleChange: (newValue) => {
+                        handleUpdateQuantity(newValue, item.documentId, "released_quantity");
+                    } })] })) }, index));
+}
+
+export { ItemUpdater as default };

package/dist/esm/src/components/logistics/ipo/IpoStatusIndicator.js

@@ -0,0 +1,55 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import Chip from '@mui/material/Chip';
+
+const statusColorArray = [
+    { status: "placed", color: "info" },
+    { status: "ordered", color: "info" },
+    { status: "logistics_operator_process", color: "info" },
+    { status: "released_on_stock", color: "info" },
+    { status: "done", color: "success" },
+    { status: "cancelled", color: "error" },
+    { status: null, color: "default" },
+];
+const enduserStatusColorArray = [
+    { status: "placed", color: "warning" },
+    { status: "ordered", color: "info" },
+    { status: "logistics_operator_process", color: "info" },
+    { status: "released_on_stock", color: "info" },
+    { status: "done", color: "success" },
+    { status: "cancelled", color: "error" },
+    { status: null, color: "default" },
+];
+const dispatcherStatusColorArray = [
+    { status: "placed", color: "info" },
+    { status: "ordered", color: "warning" },
+    { status: "logistics_operator_process", color: "info" },
+    { status: "released_on_stock", color: "info" },
+    { status: "done", color: "success" },
+    { status: "cancelled", color: "error" },
+    { status: null, color: "default" },
+];
+const IpoStatusIndicator = ({ 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 { IpoStatusIndicator };

package/dist/esm/src/components/logistics/ipo/ItemDisplay.js

@@ -0,0 +1,17 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import ImagePreviewTooltip from '../../common/ImagePreviewTooltip.js';
+
+function ItemDisplay({ item, index, image }) {
+    const { line_item_number, product, ordered_quantity } = item;
+    return (jsx(Stack, { spacing: 1, children: item && (jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", 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_number] }), jsxs(Typography, { variant: "body1", children: ["Quantity Ordered: ", ordered_quantity] })] }), image && (jsx(Fragment, { children: jsx(ImagePreviewTooltip, { image: image, label: item.product.title }) }))] })) }, index));
+}
+
+export { ItemDisplay as default };