umwd-components 0.1.715 → 0.1.717

package/dist/esm/src/components/logistics/report/ReportMakingComponent.js

@@ -0,0 +1,87 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, 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 Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import dayjs from '../../../../node_modules/dayjs/dayjs.min.js';
+import { SubmitButton } from '../../SubmitButton.js';
+import { useFormState } from 'react-dom';
+import { createReportAction } from '../../../data/actions/logistics/report/createReportAction.js';
+import MarkdownEditor from '../../common/markdown/MarkdownEditor.js';
+import AnnouncementIcon from '@mui/icons-material/Announcement';
+import { Box, Tooltip } from '@mui/material';
+import { getUserMeLoader } from '../../../data/loaders/user/getUserMeLoader.js';
+import { useSnackbar } from '../../../context/common/SnackbarContext.js';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+};
+/** INFO Reports can only be created with entities that already excist,
+ * this is because the report has to be saved with a relation to the parent entity */
+function ReportMakingComponent({ content, related, type, minValue, maxValue, revalidateCallback, biggerButton = false, // if true, the button will be bigger
+ }) {
+    const [open, setOpen] = useState(false);
+    const [currentUser, setCurrentUser] = useState(null);
+    const createReportWithRelationsAction = createReportAction.bind(null, related, type);
+    const [formState, formAction] = useFormState(createReportWithRelationsAction, INITIAL_STATE);
+    const { handleAddMessage } = useSnackbar();
+    useEffect(() => {
+        if (formState?.message) {
+            handleAddMessage({
+                message: formState.message,
+                severity: formState.severity || "error",
+            });
+            if (formState.severity === "success") {
+                revalidateCallback && revalidateCallback();
+                setOpen(false);
+            }
+        }
+    }, [formState?.message]);
+    useEffect(() => {
+        async function fetchUser() {
+            const { ok, data, error } = await getUserMeLoader();
+            if (ok && data) {
+                console.log("Current User:", data);
+                setCurrentUser(data);
+            }
+            else {
+                setCurrentUser(null);
+                console.error("Error fetching current user:", error);
+            }
+        }
+        fetchUser();
+    }, []);
+    return (jsxs(Fragment, { children: [jsx(Box, { sx: { display: "block", position: "relative" }, children: biggerButton ? (jsx(Button, { variant: "contained", onClick: () => setOpen(true), startIcon: jsx(AnnouncementIcon, {}), children: "Create Report" })) : (jsx(Tooltip, { title: "Create a report", children: jsx(IconButton, { onClick: () => setOpen(true), children: jsx(AnnouncementIcon, { fontSize: "large" }) }) })) }), jsx(Dialog, { open: open, fullWidth: true, maxWidth: "lg", sx: { marginX: 1 }, onClose: () => setOpen(false), children: jsxs("form", { action: formAction, children: [jsxs(DialogContent, { sx: { p: 1 }, children: [" ", jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "body1", textAlign: "right", children: dayjs(Date.now()).format("DD-MM-YYYY") }), jsx(TextField, { id: "quantity", name: "quantity", type: "number", label: "Amount", size: "small", InputProps: {
+                                                inputProps: {
+                                                    min: `${minValue !== undefined &&
+                                                        maxValue !== undefined &&
+                                                        minValue < maxValue
+                                                        ? minValue
+                                                        : maxValue}`,
+                                                    max: `${minValue !== undefined &&
+                                                        maxValue !== undefined &&
+                                                        maxValue > minValue
+                                                        ? maxValue
+                                                        : minValue}`,
+                                                    step: "1",
+                                                },
+                                            }, defaultValue: 0, helperText: minValue &&
+                                                maxValue &&
+                                                `Enter a number between ${minValue} and ${maxValue}` }), jsx(MarkdownEditor, { name: "content", label: "The report", defaultValue: content }), currentUser !== null && (jsxs(Fragment, { children: [jsx(Typography, { variant: "body1", textAlign: "right", children: currentUser.username }), jsx(Typography, { variant: "body2", textAlign: "right", children: currentUser.email })] }))] })] }), jsxs(DialogActions, { children: [jsx(Button, { onClick: () => setOpen(false), children: "Cancel" }), jsx(SubmitButton, { text: "Submit", loadingText: "Loading..." })] })] }) })] }));
+}
+
+export { ReportMakingComponent as default };

package/dist/esm/src/components/logistics/report/ReportsDisplay.js

@@ -0,0 +1,39 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Typography from '@mui/material/Typography';
+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 { Divider } from '@mui/material';
+
+const ReportsDisplay = ({ reports }) => {
+    return (jsx(Stack, { spacing: 1, sx: { mb: 1 }, children: reports &&
+            reports.length > 0 &&
+            reports.map((report, index) => {
+                return (jsxs(Grid, { container: true, children: [jsx(Grid, { item: true, xs: 1, sx: {
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "flex-start",
+                            }, children: jsx(Chip, { label: `${report.quantity > 0 ? "+" : ""} ${report.quantity}`, color: report.quantity > 0 ? "success" : "error", size: "small" }) }), jsx(Grid, { item: true, xs: 7, sx: {
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "flex-start",
+                            }, children: jsx(MarkdownDisplay, { children: report.content }) }), jsx(Grid, { item: true, xs: 2, sx: {
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "flex-start",
+                            }, children: jsxs(Typography, { variant: "body2", children: [" ", report.date] }) }), jsx(Grid, { item: true, xs: 2, sx: {
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "flex-start",
+                            }, children: jsxs(Stack, { direction: "column", alignItems: "flex-end", children: [report.signature_username && (jsx(Typography, { variant: "body1", children: report.signature_username })), report.signature_username && (jsx(Typography, { variant: "body2", children: report.signature_email }))] }) }), jsx(Grid, { item: true, xs: 12, children: jsx(Divider, { sx: { my: 1 } }) })] }, index));
+            }) }));
+};
+
+export { ReportsDisplay as default };

package/dist/esm/src/components/logistics/report/ReportsWarning.js

@@ -0,0 +1,16 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
+
+const ReportsWarning = ({ reports }) => {
+    return (jsx(Tooltip, { title: jsxs(Fragment, { children: [jsx(Typography, { variant: "h6", children: "Reports" }), jsxs(Typography, { variant: "body2", children: ["Please be extra careful when processing this order, this order has", " ", reports.length, " report", reports.length > 1 && "s", "."] })] }), children: jsx(PriorityHighIcon, { color: "warning" }) }));
+};
+
+export { ReportsWarning as default };

package/dist/esm/src/components/logistics/report/SimpleReportFields.js

@@ -0,0 +1,46 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
+
+/** INFO The SimpleReportFields holds information on reports to be newly created upon updating the parent entity, other then the reportMakingComponent this requires the parent update or create function to handle the making of reports*/
+function SimpleReportFields({ itemID, 
+//content,
+type, minValue, maxValue, related, handleAddReport, }) {
+    // should keep state for values
+    const [quantity, setQuantity] = React.useState(0);
+    const [content, setContent] = React.useState("");
+    return (jsxs(Stack, { direction: "row", spacing: 1, justifyContent: "space-between", alignItems: "center", sx: { mb: 1 }, children: [jsx("input", { type: "hidden", name: "type", value: type }), jsx(TextField, { id: "quantity", name: "quantity", type: "number", label: "Amount", size: "small", InputProps: {
+                    inputProps: {
+                        min: minValue !== undefined ? minValue : -Infinity,
+                        max: maxValue !== undefined ? maxValue : Infinity,
+                        step: "1",
+                    },
+                }, value: quantity, onChange: (event) => setQuantity(Number(event.target.value)), 
+                //defaultValue={0}
+                helperText: `min: ${minValue}, max: ${maxValue}` }), jsx(TextField, { id: "content", name: "content", label: "The report", size: "small", value: content, onChange: (event) => setContent(event.target.value), 
+                //defaultValue={content}
+                sx: { flex: 1 } }), jsx(Button, { variant: "contained", color: "primary", onClick: () => {
+                    handleAddReport({ content: content, quantity: quantity, type: type }, itemID);
+                    setContent("");
+                    setQuantity(0);
+                }, 
+                /* onClick={() => {
+                  if (value < minNewValue || value > maxNewValue) {
+                    setError(true);
+                  } else {
+                    handleChange(value);
+                    setError(false);
+                  }
+                }} */
+                size: "small", children: "Confirm" })] }));
+}
+
+export { SimpleReportFields as default };

package/dist/esm/src/components/logistics/vendor/AddVendorForm.js

@@ -0,0 +1,108 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import { SubmitButton } from '../../SubmitButton.js';
+import { useFormState } from 'react-dom';
+import { useSnackbar } from '../../../context/common/SnackbarContext.js';
+import { createVendorAction } from '../../../data/actions/logistics/vendor/createVendorAction.js';
+import Grid from '@mui/material/Grid';
+import { BusinessCredentialsFields } from '../../e-commerce/customer/BusinessCredentials.js';
+import { AddressFields } from '../../common/Address.js';
+import ProductSelector from '../../e-commerce/products/ProductSelector.js';
+import { ContactsFields } from '../../common/Contacts.js';
+import AddIcon from '@mui/icons-material/Add';
+import { ContactType } from '../../../types/common/Contact.js';
+import { ExplanatoryFoldOut } from '../../ExplanatoryFoldOut.js';
+import { Paper } from '@mui/material';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+    severity: null,
+};
+function AddVendorForm({ productNamesArr, revalidateCallback, handleClose, sx, }) {
+    const [formState, formAction] = useFormState(createVendorAction, INITIAL_STATE);
+    const { handleAddMessage } = useSnackbar();
+    const [newContacts, setNewContacts] = useState([]);
+    const handleDeleteContact = (index) => {
+        const newContactsArr = newContacts.filter((_, i) => i !== index);
+        setNewContacts(newContactsArr);
+    };
+    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 vendor",
+                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, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Add Vendor" }), jsx(Typography, { variant: "body1", children: "Create a new vendor for your business" })] }) }), jsx(Grid, { item: true, xs: 12, children: jsx(ExplanatoryFoldOut, { title: "Vendor", description: "Vendors are businesses that you purchase products from." }) }), jsx(Grid, { item: true, xs: 12, md: 6, children: jsx(BusinessCredentialsFields, { componentName: "business_credentials", componentReference: "common.business-credentials" }) }), jsx(Grid, { item: true, xs: 12, md: 6, children: jsxs(Stack, { spacing: 1, sx: { pt: 1 }, children: [jsx(TextField, { id: "website_url", name: "website_url", label: "Website Url" }), jsx(TextField, { id: "phone_number", name: "phone_number", label: "Phone Number" }), jsx(TextField, { id: "email", name: "email", label: "Email" })] }) }), jsxs(Grid, { item: true, xs: 12, md: 6, children: [jsx(Typography, { variant: "h6", children: "Address" }), jsx(AddressFields, { componentName: "address", componentReference: "common.address" })] }), jsx(Grid, { item: true, xs: 12, children: jsx(Typography, { variant: "h6", children: "Products" }) }), jsx(Grid, { item: true, xs: 12, children: jsx(ProductSelector, { productNames: productNamesArr, currentValue: [] }) }), jsx(Grid, { item: true, xs: 12, children: jsx(Typography, { variant: "h6", children: "Contacts" }) }), newContacts.map((contact, index) => {
+                        return (jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 3, sx: {
+                                justifyContent: "center",
+                                display: "flex",
+                                alignItems: "center",
+                            }, children: jsx(Paper, { sx: {
+                                    p: 2,
+                                    width: "100%",
+                                    display: "flex",
+                                    justifyContent: "center",
+                                    alignItems: "center",
+                                    height: "100%",
+                                }, children: jsx(ContactsFields, { data: contact.data, componentName: contact.componentName, componentReference: "logistics-elements.contact", deleteCallback: () => {
+                                        handleDeleteContact(index);
+                                    } }, index) }) }, index));
+                    }), jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 3, sx: {
+                            justifyContent: "center",
+                            display: "flex",
+                            alignItems: "center",
+                        }, children: jsx(Paper, { sx: {
+                                p: 2,
+                                width: "100%",
+                                display: "flex",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                height: "100%",
+                            }, children: jsx(Button, { variant: "contained", startIcon: jsx(AddIcon, {}), onClick: () => {
+                                    setNewContacts([
+                                        ...newContacts,
+                                        {
+                                            componentName: `contacts[${newContacts.length}]`,
+                                            componentReference: "logistics-elements.contact",
+                                            data: {
+                                                first_name: "",
+                                                last_name: "",
+                                                email: "",
+                                                phone_number: "",
+                                                type: ContactType.Other,
+                                            },
+                                        },
+                                    ]);
+                                }, size: "large", children: "Add contact" }) }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "space-between", alignItems: "center", children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Create Vendor", loadingText: "Creating...", variant: "contained" })] }) })] }) }) }));
+}
+
+export { AddVendorForm };

package/dist/esm/src/components/logistics/vendor/EditVendorForm.js

@@ -0,0 +1,175 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useEffect, useState } from 'react';
+import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import { SubmitButton } from '../../SubmitButton.js';
+import { useFormState } from 'react-dom';
+import { useSnackbar } from '../../../context/common/SnackbarContext.js';
+import { updateVendorAction } from '../../../data/actions/logistics/vendor/updateVendorAction.js';
+import Grid from '@mui/material/Grid';
+import { BusinessCredentialsFields } from '../../e-commerce/customer/BusinessCredentials.js';
+import { AddressFields } from '../../common/Address.js';
+import ProductSelector from '../../e-commerce/products/ProductSelector.js';
+import Contacts, { ContactsFields } from '../../common/Contacts.js';
+import AddIcon from '@mui/icons-material/Add';
+import { ContactType } from '../../../types/common/Contact.js';
+import { ExplanatoryFoldOut } from '../../ExplanatoryFoldOut.js';
+import NoteTakingComponent from '../note/NoteTakingComponent.js';
+import NotesDisplay from '../note/NotesDisplay.js';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+    severity: null,
+};
+function EditVendorForm({ data, productNamesArr, revalidateCallback, handleClose, sx, }) {
+    const { id, website_url, phone_number, email, business_credentials, address, products, contacts, notes, } = data;
+    console.log("data", data);
+    const [formState, formAction] = useFormState(updateVendorAction, INITIAL_STATE);
+    const { handleAddMessage } = useSnackbar();
+    useEffect(() => {
+        if (formState?.message) {
+            handleAddMessage({
+                message: formState.message,
+                severity: formState.severity || "error",
+            });
+            if (formState.severity === "success") {
+                revalidateCallback && revalidateCallback();
+                handleClose && handleClose();
+            }
+        }
+    }, [formState?.message]);
+    useEffect(() => {
+        if (formState?.strapiErrors) {
+            handleAddMessage({
+                message: formState.strapiErrors.message || "Error updating vendor",
+                severity: "error",
+            });
+        }
+    }, [formState?.strapiErrors]);
+    const initialProducts = products?.data || [];
+    const [open, setOpen] = useState([]);
+    const onClickHandler = (event, id) => {
+        if (open.includes(id)) {
+            setOpen(open.filter((openId) => openId !== id));
+        }
+        else {
+            setOpen([...open, id]);
+        }
+    };
+    const [oldContacts, setOldContacts] = useState(contacts.reduce((acc, contact, index) => {
+        acc.push({
+            componentName: `contacts[${index}]`,
+            componentReference: "logistics-elements.contact",
+            data: contact,
+        });
+        return acc;
+    }, []));
+    // INFO must utilize the uuid to ensure that the new contacts are unique
+    // this is important to use both the deleteCallback and still not have problems with the key
+    const [newContacts, setNewContacts] = useState([]);
+    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsxs("form", { action: formAction, children: [id && jsx("input", { id: "id", type: "hidden", name: "id", value: id }), jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [jsx(Typography, { variant: "h5", children: "Edit Vendor" }), jsx(NoteTakingComponent, { content: "", related: [
+                                            { id: data.id, __type: "api::logistics.vendor-profile" },
+                                        ], revalidateCallback: revalidateCallback })] }) }), jsx(Grid, { item: true, xs: 12, children: jsx(ExplanatoryFoldOut, { title: "Vendor", description: "Vendors are businesses that you purchase products from." }) }), jsx(Grid, { item: true, xs: 12, md: 6, children: jsx(BusinessCredentialsFields, { data: business_credentials, componentName: "business_credentials", componentReference: "common.business-credentials" }) }), jsx(Grid, { item: true, xs: 12, md: 6, children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "website_url", name: "website_url", label: "Website Url", defaultValue: website_url }), jsx(TextField, { id: "phone_number", name: "phone_number", label: "Phone Number", defaultValue: phone_number }), jsx(TextField, { id: "email", name: "email", label: "Email", defaultValue: email })] }) }), jsxs(Grid, { item: true, xs: 12, md: 6, children: [jsx(Typography, { variant: "h6", children: "Address" }), jsx(AddressFields, { data: address, componentName: "address", componentReference: "common.address" })] }), jsxs(Grid, { item: true, xs: 12, sx: { mt: 1 }, children: [jsx(Typography, { variant: "h6", children: "Products" }), jsx(ProductSelector, { productNames: productNamesArr, currentValue: initialProducts.map((prod) => prod.id) })] }), jsx(Grid, { item: true, xs: 12, sx: { mt: 1 }, children: jsx(Typography, { variant: "h6", children: "Contacts" }) }), oldContacts?.map((contact, index) => {
+                            if (contact.data?.id) {
+                                if (open.includes(contact.data?.id)) {
+                                    return (jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 3, sx: {
+                                            justifyContent: "center",
+                                            display: "flex",
+                                            alignItems: "center",
+                                        }, children: jsx(Paper, { sx: {
+                                                p: 2,
+                                                width: "100%",
+                                                display: "flex",
+                                                justifyContent: "center",
+                                                alignItems: "center",
+                                                height: "100%",
+                                            }, children: jsx(ContactsFields, { data: contact.data, componentName: `contacts[${index}]`, componentReference: "logistics-elements.contact", deleteCallback: () => {
+                                                    setOldContacts(oldContacts.filter((_, i) => i !== index));
+                                                    /* setOpen(
+                                                    open.filter((openId) => openId !== contact.data?.id)
+                                                  ); */
+                                                } }) }) }, contact.data.id));
+                                }
+                                else {
+                                    return (jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 3, sx: {
+                                            justifyContent: "center",
+                                            display: "flex",
+                                            alignItems: "center",
+                                        }, children: jsxs(Paper, { sx: {
+                                                p: 2,
+                                                width: "100%",
+                                                display: "flex",
+                                                justifyContent: "center",
+                                                alignItems: "center",
+                                                height: "100%",
+                                            }, children: [jsx("input", { type: "hidden", name: `contacts[${index}].id`, value: contact.data.id }), jsx("input", { type: "hidden", name: `contacts[${index}].__component`, value: "logistics-elements.contact" }), jsx(Contacts, { data: { ...contact.data, onClick: onClickHandler } })] }) }, contact.data.id));
+                                }
+                            }
+                            return null;
+                        }), newContacts.map((contact, index) => {
+                            return (jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 3, sx: {
+                                    justifyContent: "center",
+                                    display: "flex",
+                                    alignItems: "center",
+                                }, children: jsx(Paper, { sx: {
+                                        p: 2,
+                                        width: "100%",
+                                        display: "flex",
+                                        justifyContent: "center",
+                                        alignItems: "center",
+                                        height: "100%",
+                                    }, children: jsx(ContactsFields, { data: contact.data, componentName: contact.componentName, componentReference: "logistics-elements.contact", deleteCallback: () => {
+                                            setNewContacts(newContacts
+                                                .filter((_, i) => i !== index)
+                                                .map((_, i) => {
+                                                return {
+                                                    ..._,
+                                                    componentName: `contacts[${i + oldContacts.length}]`,
+                                                };
+                                            }));
+                                        } }) }) }, contact.data?.id || index));
+                        }), jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 3, sx: {
+                                justifyContent: "center",
+                                display: "flex",
+                                alignItems: "center",
+                            }, children: jsx(Paper, { sx: {
+                                    p: 2,
+                                    width: "100%",
+                                    display: "flex",
+                                    justifyContent: "center",
+                                    alignItems: "center",
+                                    height: "100%",
+                                }, children: jsx(Button, { variant: "contained", startIcon: jsx(AddIcon, {}), onClick: () => {
+                                        setNewContacts([
+                                            ...newContacts,
+                                            {
+                                                componentName: `contacts[${oldContacts.length + newContacts.length}]`,
+                                                componentReference: "logistics-elements.contact",
+                                                data: {
+                                                    uuid: Math.random(),
+                                                    first_name: "",
+                                                    last_name: "",
+                                                    email: "",
+                                                    phone_number: "",
+                                                    type: ContactType.Other,
+                                                },
+                                            },
+                                        ]);
+                                    }, size: "large", children: "Add contact" }) }) }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Notes" }), notes?.data !== undefined ? (jsx(NotesDisplay, { notes: notes.data })) : (jsx(Typography, { children: "No notes to display" }))] }), " ", jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "space-between", alignItems: "center", sx: { mt: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Update Vendor", loadingText: "Updating..." })] }) })] })] }) }));
+}
+
+export { EditVendorForm };

package/dist/esm/src/components/logistics/vendor/VendorDisplay.js

@@ -0,0 +1,30 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+import BusinessCredentials from '../../e-commerce/customer/BusinessCredentials.js';
+import Address from '../../common/Address.js';
+import Price from '../../e-commerce/products/Price.js';
+import { ExplanatoryFoldOut } from '../../ExplanatoryFoldOut.js';
+import Contacts from '../../common/Contacts.js';
+
+function VendorDisplay({ data, sx }) {
+    const { id, website_url, phone_number, email, business_credentials, address, products, contacts, } = data;
+    console.log(contacts);
+    return (jsxs(Box, { sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            { p: 2 },
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], component: Paper, children: [jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsx(Typography, { variant: "h5", children: "Vendor" }) }), jsx(Grid, { item: true, xs: 12, md: 6, children: jsx(BusinessCredentials, { data: business_credentials }) }), jsxs(Grid, { item: true, xs: 12, md: 6, children: [jsxs(Typography, { variant: "body1", children: ["Website Url: ", website_url] }), jsxs(Typography, { variant: "body1", children: ["Phone Number: ", phone_number] }), jsxs(Typography, { variant: "body1", children: ["Email: ", email] })] }), jsxs(Grid, { item: true, xs: 12, md: 6, children: [jsx(Typography, { variant: "h6", children: "Address" }), jsx(Address, { data: address })] })] }), jsxs(Grid, { item: true, xs: 12, sx: { mt: 3 }, children: [jsx(Typography, { variant: "h6", children: "Products" }), jsx(ExplanatoryFoldOut, { title: "Products", sx: { mt: 1 }, children: jsx(Stack, { spacing: 1, children: products.data.map((product, index) => (jsx(Paper, { sx: { p: 1 }, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [jsxs(Typography, { variant: "h6", children: ["Product: ", product.title, " ", product.product_number] }), jsx(Price, { ...product.price })] }) }, index))) }) })] }), jsxs(Grid, { item: true, xs: 12, sx: { mt: 3 }, children: [jsx(Typography, { variant: "h6", children: "Contacts" }), jsx(ExplanatoryFoldOut, { title: "Contacts", sx: { mt: 1 }, children: jsx(Stack, { spacing: 1, children: contacts.map((contact, index) => (jsx(Paper, { sx: { p: 1 }, children: jsx(Contacts, { data: contact }) }, index))) }) })] })] }));
+}
+
+export { VendorDisplay };

package/dist/esm/src/components/logistics/vendor/VendorSelector.js

@@ -0,0 +1,29 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+
+/**
+ * INFO : This component is used to select a vendor from a list of vendors,
+ * other than the selectors for products and categories this selector can select only one(!) value
+ */
+const VendorSelector = ({ vendorNames, currentValue, onSelectVendor, }) => {
+    console.log(currentValue);
+    const [selectedValue, setSelectedValue] = useState(currentValue || null);
+    const handleVendorChange = (event, value) => {
+        // if (!value) return;
+        const id = value?.id || null;
+        setSelectedValue(id);
+        if (onSelectVendor)
+            onSelectVendor(id);
+    };
+    return (jsxs(Fragment, { children: [jsx(Autocomplete, { options: vendorNames, getOptionLabel: (option) => option?.business_credentials?.company_name, filterSelectedOptions: true, onChange: handleVendorChange, renderInput: (params) => jsx(TextField, { ...params, label: "Vendors" }), value: vendorNames?.find((vendor) => vendor.id === selectedValue) || null }), jsx("input", { type: "hidden", name: "vendors", value: selectedValue ? JSON.stringify(selectedValue) : "" })] }));
+};
+
+export { VendorSelector as default };

package/dist/esm/src/components/page-builder/ColumnsSection.js

@@ -0,0 +1,42 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import Paper from '@mui/material/Paper';
+import getIcon from '../../lib/getIcon.js';
+
+function ColumnsSection({ data, }) {
+    const { column, maxWidth, sx = [] } = data;
+    // TODO make suitable for multiple column layouts
+    return (jsx(Container, { maxWidth: maxWidth || "lg", sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            { my: 1 },
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], children: jsx(Grid, { container: true, spacing: 2, children: column.map((column) => {
+                const Icon = getIcon(column.icon);
+                return (jsx(Grid, { item: true, xs: 12, md: 6, children: jsxs(Paper, { sx: { p: 2, height: "100%" }, children: [jsxs(Typography, { variant: "h5", sx: {
+                                    mb: 2,
+                                    display: "flex",
+                                    justifyContent: "flex-start",
+                                    alignItems: "center",
+                                }, children: [Icon !== null && (jsx(Icon, { sx: {
+                                            mr: 2,
+                                            mt: 0.2,
+                                            width: "50px",
+                                            height: "50px",
+                                            fill: "currentColor",
+                                            stroke: "none",
+                                        } })), column.heading] }), 
+                            /* column.textV2 ? (
+                            <BlockRendererClient content={column.textV2} />
+                          ) : */ jsx(Typography, { children: column.text })] }) }, column.id));
+            }) }) }));
+}
+
+export { ColumnsSection };