umwd-components 0.1.730 → 0.1.732

package/dist/esm/src/components/e-commerce/products/EditProductForm.js

@@ -33,11 +33,13 @@ const INITIAL_STATE = {
     message: null,
 };
 function EditProductForm({ data, vendorArr, categoriesArray, revalidateCallback, handleClose, sx, }) {
-    const { id, title, description, external_product_number, image, gallery, price, dimensions, categories, vendors, } = data;
-    const initialGallery = gallery?.data || [];
-    const initialCategories = categories?.data || [];
+    const { documentId, title, description, external_product_number, image, gallery, price, dimensions, categories, vendors, } = data;
+    console.log("price", price);
+    const initialGallery = gallery || [];
+    const initialCategories = categories || [];
+    console.log("initialCategories", initialCategories);
     const { handleAddMessage } = useSnackbar();
-    const [formState, formAction] = useFormState(updateProductAction, INITIAL_STATE);
+    const [formState, formAction] = useFormState(updateProductAction.bind(null, documentId), INITIAL_STATE);
     useEffect(() => {
         if (formState?.message) {
             handleAddMessage({
@@ -83,19 +85,19 @@ function EditProductForm({ data, vendorArr, categoriesArray, revalidateCallback,
             setProductGallery([...productGallery, item]);
         }
     }
-    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: jsx(Typography, { variant: "h3", component: "h1", children: "Edit Product" }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "title", name: "title", label: "Title", defaultValue: title }), jsx(MarkdownEditor, { name: "description", label: "Description", defaultValue: description }), jsx(TextField, { id: "external_product_number", name: "external_product_number", label: "External Product Number", defaultValue: external_product_number })] }) }), jsxs(Grid, { item: true, xs: 6, children: [jsx(Typography, { variant: "h6", children: "Product Image" }), jsx("input", { id: "image", type: "hidden", name: "image", value: productImage?.id }), jsx(StrapiImage, { id: productImage?.id || "", url: productImage?.url || "", alternativeText: "product image", width: productImage?.width && productImage?.height
-                                        ? 200 * (productImage.width / productImage.height)
-                                        : 200, height: 200 }), jsx(Button, { onClick: () => setMediaDialogOpen("image"), children: "open media library" }), jsx(MediaLibraryDialog, { open: mediaDialogOpen === "image", handleClose: () => setMediaDialogOpen(null), handleCancel: () => {
-                                        setProductImage(null);
-                                        setMediaDialogOpen(null);
-                                    }, handleSelect: handleSelectImage, selected: productImage ? [productImage] : [] })] }), jsxs(Grid, { item: true, xs: 6, children: [jsx(Typography, { variant: "h6", children: "Image Gallery" }), jsx("input", { id: "gallery", type: "hidden", name: "gallery", value: JSON.stringify(productGallery.map((item) => item.id)) }), jsx(Stack, { direction: "row", spacing: 2, children: productGallery.map((item) => {
-                                        return (jsx(StrapiImage, { id: item.id, url: item.url, alternativeText: "gallery image", width: item?.width && item?.height
-                                                ? 100 * (item.width / item.height)
-                                                : 100, height: 100 }, item.id));
-                                    }) }), jsx(Button, { onClick: () => setMediaDialogOpen("gallery"), children: "open media library" }), jsx(MediaLibraryDialog, { open: mediaDialogOpen === "gallery", handleClose: () => setMediaDialogOpen(null), handleCancel: () => {
-                                        setProductGallery([]);
-                                        setMediaDialogOpen(null);
-                                    }, handleSelect: handleSelectGallery, selected: productGallery })] }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Price" }), jsx(PriceFields, { componentName: "price", componentReference: "e-commerce-elements.price", data: price })] }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Categories" }), jsx(CategorySelector, { categories: categoriesArray, currentValue: [...initialCategories.map((cat) => cat.id)] })] }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Dimensions" }), jsx(DimensionsFields, { componentName: "dimensions", componentReference: "e-commerce-elements.dimensions", data: dimensions })] }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Vendors" }), jsx(VendorSelector, { vendorNames: vendorArr, currentValue: vendors.data?.[0]?.id })] }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { py: 1 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "update product", loadingText: "loading" })] }) })] })] }) }));
+    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: jsx(Typography, { variant: "h3", component: "h1", children: "Edit Product" }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "title", name: "title", label: "Title", defaultValue: title }), jsx(MarkdownEditor, { name: "description", label: "Description", defaultValue: description }), jsx(TextField, { id: "external_product_number", name: "external_product_number", label: "External Product Number", defaultValue: external_product_number })] }) }), jsxs(Grid, { item: true, xs: 6, children: [jsx(Typography, { variant: "h6", children: "Product Image" }), jsx("input", { id: "image", type: "hidden", name: "image", value: productImage?.id }), jsx(StrapiImage, { id: productImage?.id || "", url: productImage?.url || "", alternativeText: "product image", width: productImage?.width && productImage?.height
+                                    ? 200 * (productImage.width / productImage.height)
+                                    : 200, height: 200 }), jsx(Button, { onClick: () => setMediaDialogOpen("image"), children: "open media library" }), jsx(MediaLibraryDialog, { open: mediaDialogOpen === "image", handleClose: () => setMediaDialogOpen(null), handleCancel: () => {
+                                    setProductImage(null);
+                                    setMediaDialogOpen(null);
+                                }, handleSelect: handleSelectImage, selected: productImage ? [productImage] : [] })] }), jsxs(Grid, { item: true, xs: 6, children: [jsx(Typography, { variant: "h6", children: "Image Gallery" }), jsx("input", { id: "gallery", type: "hidden", name: "gallery", value: JSON.stringify(productGallery.map((item) => item.id)) }), jsx(Stack, { direction: "row", spacing: 2, children: productGallery.map((item) => {
+                                    return (jsx(StrapiImage, { id: item.id, url: item.url, alternativeText: "gallery image", width: item?.width && item?.height
+                                            ? 100 * (item.width / item.height)
+                                            : 100, height: 100 }, item.id));
+                                }) }), jsx(Button, { onClick: () => setMediaDialogOpen("gallery"), children: "open media library" }), jsx(MediaLibraryDialog, { open: mediaDialogOpen === "gallery", handleClose: () => setMediaDialogOpen(null), handleCancel: () => {
+                                    setProductGallery([]);
+                                    setMediaDialogOpen(null);
+                                }, handleSelect: handleSelectGallery, selected: productGallery })] }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Price" }), jsx(PriceFields, { componentName: "price", componentReference: "e-commerce-elements.price", data: price })] }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Categories" }), jsx(CategorySelector, { categories: categoriesArray, currentValue: [...initialCategories.map((cat) => cat.documentId)] })] }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Dimensions" }), jsx(DimensionsFields, { componentName: "dimensions", componentReference: "e-commerce-elements.dimensions", data: dimensions })] }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Vendors" }), jsx(VendorSelector, { vendorNames: vendorArr, currentValue: vendors[0]?.documentId })] }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { py: 1 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "update product", loadingText: "loading" })] }) })] }) }) }));
 }
 
 export { EditProductForm };

package/dist/esm/src/components/e-commerce/products/EditStockForm.js

@@ -36,9 +36,11 @@ const INITIAL_STATE = {
     severity: null,
 };
 function EditStockForm({ data, revalidateCallback, handleClose, sx, }) {
-    const { id, title, product_number, stock, ipos, opos, reports } = data;
+    const { documentId, title, product_number, stock, ipos, opos, reports } = data;
     const { handleAddMessage } = useSnackbar();
-    const [formState, formAction] = useFormState(updateProductAction, INITIAL_STATE);
+    // Bind the documentId to the form action following form patterns
+    const boundAction = updateProductAction.bind(null, documentId);
+    const [formState, formAction] = useFormState(boundAction, INITIAL_STATE);
     useEffect(() => {
         if (formState?.message) {
             handleAddMessage({
@@ -59,27 +61,48 @@ function EditStockForm({ data, revalidateCallback, handleClose, sx, }) {
             });
         }
     }, [formState?.strapiErrors, handleAddMessage]);
-    return (jsxs(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: [jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsx(Typography, { variant: "h6", children: title }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(TableContainer, { component: Paper, children: [jsx(Typography, { variant: "h6", sx: { pl: 2 }, children: "Incoming orders" }), jsxs(Table, { size: "small", children: [jsx(TableHead, { children: jsxs(TableRow, { children: [jsx(TableCell, { children: "Number" }), jsx(TableCell, { children: "Order Date" }), jsx(TableCell, { children: "Line Item Number" }), jsx(TableCell, { children: "Ordered Quantity" }), jsx(TableCell, { children: "Received Quantity" }), jsx(TableCell, { children: "Registered Quantity" }), jsx(TableCell, { children: "Released Quantity" })] }) }), jsx(TableBody, { children: ipos.map((ipo) => (jsx(Fragment, { children: ipo.items.map((item) => (jsxs(TableRow, { children: [jsx(TableCell, { children: ipo.ipo_number }), jsx(TableCell, { children: ipo.order_date }), jsx(TableCell, { children: item.line_item_number }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.ordered_quantity, maxValue: item.ordered_quantity, color: "primary" }) }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.received_quantity, maxValue: item.ordered_quantity, color: "primary" }) }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.registered_quantity, maxValue: item.ordered_quantity, color: "primary" }) }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.released_quantity, maxValue: item.ordered_quantity, color: "primary" }) })] }, ipo.id))) }))) }), jsx(TableFooter, { children: jsxs(TableRow, { children: [jsx(TableCell, { colSpan: 6, align: "right", children: "Total added to stock:" }), jsx(TableCell, { children: ipos.reduce((total, ipo) => total +
-                                                            ipo.items.reduce((itemTotal, item) => itemTotal + item.released_quantity, 0), 0) })] }) })] }), jsx(Typography, { variant: "h6", sx: { pl: 2 }, children: "Outgoing orders" }), jsxs(Table, { size: "small", children: [jsx(TableHead, { children: jsxs(TableRow, { children: [jsx(TableCell, { children: "Number" }), jsx(TableCell, { children: "Order Date" }), jsx(TableCell, { children: "Line Item Number" }), jsx(TableCell, { children: "Ordered Quantity" }), jsx(TableCell, { children: "Picked Quantity" }), jsx(TableCell, { children: "Packed Quantity" }), jsx(TableCell, { children: "Shipped Quantity" })] }) }), jsx(TableBody, { children: opos.map((opo) => (jsx(Fragment, { children: opo.opo_items.map((item) => (jsxs(TableRow, { children: [jsx(TableCell, { children: opo.opo_number }), jsx(TableCell, { children: opo.order_date }), jsx(TableCell, { children: item.line_item_number }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.ordered_quantity, maxValue: item.ordered_quantity, color: "primary" }) }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.picked_quantity, maxValue: item.ordered_quantity, color: "primary" }) }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.packed_quantity, maxValue: item.ordered_quantity, color: "primary" }) }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.shipped_quantity, maxValue: item.ordered_quantity, color: "primary" }) })] }, opo.documentId))) }))) }), jsx(TableFooter, { children: jsxs(TableRow, { children: [jsx(TableCell, { colSpan: 3, align: "right", children: "Total reduced from stock:" }), jsx(TableCell, { children: opos.reduce((total, opo) => total +
-                                                            opo.opo_items.reduce((itemTotal, item) => itemTotal + item.ordered_quantity, 0), 0) })] }) })] }), jsxs(Table, { size: "small", children: [jsxs(TableRow, { children: [jsx(TableCell, { align: "right", children: "Total added to stock:" }), jsx(TableCell, { children: ipos.reduce((total, ipo) => total +
-                                                        ipo.items.reduce((itemTotal, item) => itemTotal + item.released_quantity, 0), 0) })] }), jsxs(TableRow, { children: [jsx(TableCell, { align: "right", children: "Total reduced from stock:" }), jsx(TableCell, { children: opos.reduce((total, opo) => total +
-                                                        opo.opo_items.reduce((itemTotal, item) => itemTotal + item.ordered_quantity, 0), 0) })] }), jsxs(TableRow, { children: [jsx(TableCell, { align: "right", children: "Corrections:" }), jsx(TableCell, { children: jsx(Tooltip, { title: "Total stock corrections", children: jsx(Typography, { children: reports
+    return (jsxs(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: [jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsx(Typography, { variant: "h6", children: title }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(TableContainer, { component: Paper, children: [jsx(Typography, { variant: "h6", sx: { pl: 2 }, children: "Incoming orders" }), jsxs(Table, { size: "small", children: [jsx(TableHead, { children: jsxs(TableRow, { children: [jsx(TableCell, { children: "Number" }), jsx(TableCell, { children: "Order Date" }), jsx(TableCell, { children: "Line Item Number" }), jsx(TableCell, { children: "Ordered Quantity" }), jsx(TableCell, { children: "Received Quantity" }), jsx(TableCell, { children: "Registered Quantity" }), jsx(TableCell, { children: "Released Quantity" })] }) }), jsx(TableBody, { children: Array.isArray(ipos) ? (ipos.map((ipo) => (jsx(Fragment, { children: ipo.items.map((item) => (jsxs(TableRow, { children: [jsx(TableCell, { children: ipo.ipo_number }), jsx(TableCell, { children: ipo.order_date }), jsx(TableCell, { children: item.line_item_number }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.ordered_quantity, maxValue: item.ordered_quantity, color: "primary" }) }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.received_quantity, maxValue: item.ordered_quantity, color: "primary" }) }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.registered_quantity, maxValue: item.ordered_quantity, color: "primary" }) }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.released_quantity, maxValue: item.ordered_quantity, color: "primary" }) })] }, ipo.documentId))) })))) : (jsx(TableRow, { children: jsx(TableCell, { colSpan: 7, align: "center", children: "No incoming orders found." }) })) }), jsx(TableFooter, { children: jsxs(TableRow, { children: [jsx(TableCell, { colSpan: 6, align: "right", children: "Total added to stock:" }), jsx(TableCell, { children: Array.isArray(ipos)
+                                                            ? ipos.reduce((total, ipo) => total +
+                                                                ipo.items.reduce((itemTotal, item) => itemTotal + item.released_quantity, 0), 0)
+                                                            : 0 })] }) })] }), jsx(Typography, { variant: "h6", sx: { pl: 2 }, children: "Outgoing orders" }), jsxs(Table, { size: "small", children: [jsx(TableHead, { children: jsxs(TableRow, { children: [jsx(TableCell, { children: "Number" }), jsx(TableCell, { children: "Order Date" }), jsx(TableCell, { children: "Line Item Number" }), jsx(TableCell, { children: "Ordered Quantity" }), jsx(TableCell, { children: "Picked Quantity" }), jsx(TableCell, { children: "Packed Quantity" }), jsx(TableCell, { children: "Shipped Quantity" })] }) }), jsx(TableBody, { children: Array.isArray(opos) ? (opos.map((opo) => (jsx(Fragment, { children: opo.opo_items.map((item) => (jsxs(TableRow, { children: [jsx(TableCell, { children: opo.opo_number }), jsx(TableCell, { children: opo.order_date }), jsx(TableCell, { children: item.line_item_number }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.ordered_quantity, maxValue: item.ordered_quantity, color: "primary" }) }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.picked_quantity, maxValue: item.ordered_quantity, color: "primary" }) }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.packed_quantity, maxValue: item.ordered_quantity, color: "primary" }) }), jsx(TableCell, { children: jsx(AmountIndicator, { value: item.shipped_quantity, maxValue: item.ordered_quantity, color: "primary" }) })] }, opo.documentId))) })))) : (jsx(TableRow, { children: jsx(TableCell, { colSpan: 7, align: "center", children: "No outgoing orders found" }) })) }), jsx(TableFooter, { children: jsxs(TableRow, { children: [jsx(TableCell, { colSpan: 3, align: "right", children: "Total reduced from stock:" }), jsx(TableCell, { children: Array.isArray(opos)
+                                                            ? opos.reduce((total, opo) => total +
+                                                                opo.opo_items.reduce((itemTotal, item) => itemTotal + item.ordered_quantity, 0), 0)
+                                                            : 0 })] }) })] }), jsxs(Table, { size: "small", children: [jsxs(TableRow, { children: [jsx(TableCell, { align: "right", children: "Total added to stock:" }), jsx(TableCell, { children: Array.isArray(ipos) && ipos.length > 0
+                                                        ? ipos.reduce((total, ipo) => total +
+                                                            ipo.items.reduce((itemTotal, item) => itemTotal + item.released_quantity, 0), 0)
+                                                        : 0 })] }), jsxs(TableRow, { children: [jsx(TableCell, { align: "right", children: "Total reduced from stock:" }), jsx(TableCell, { children: Array.isArray(opos) && opos.length > 0
+                                                        ? opos.reduce((total, opo) => total +
+                                                            opo.opo_items.reduce((itemTotal, item) => itemTotal + item.ordered_quantity, 0), 0)
+                                                        : 0 })] }), jsxs(TableRow, { children: [jsx(TableCell, { align: "right", children: "Corrections:" }), jsx(TableCell, { children: jsx(Tooltip, { title: "Total stock corrections", children: jsx(Typography, { children: reports
                                                                 ? reports.reduce((total, report) => total + report.quantity, 0)
                                                                 : 0 }) }) }), jsx(TableCell, { children: jsx(Tooltip, { title: "Total stock corrections after updating", children: jsx("b", { children: reports
                                                                 ? reports.reduce((total, report) => total + report.quantity, 0)
-                                                                : 0 }) }) })] }), jsxs(TableRow, { children: [jsx(TableCell, { align: "right", children: "Stock:" }), jsx(TableCell, { children: jsx(Tooltip, { title: "Total stock", children: jsx(Typography, { children: ipos.reduce((total, ipo) => total +
-                                                                ipo.items.reduce((itemTotal, item) => itemTotal + item.released_quantity, 0), 0) -
-                                                                opos.reduce((total, opo) => total +
-                                                                    opo.opo_items.reduce((itemTotal, item) => itemTotal + item.ordered_quantity, 0), 0) +
+                                                                : 0 }) }) })] }), jsxs(TableRow, { children: [jsx(TableCell, { align: "right", children: "Stock:" }), jsx(TableCell, { children: jsx(Tooltip, { title: "Total stock", children: jsx(Typography, { children: (Array.isArray(ipos) && ipos.length > 0
+                                                                ? ipos.reduce((total, ipo) => total +
+                                                                    ipo.items.reduce((itemTotal, item) => itemTotal + item.released_quantity, 0), 0)
+                                                                : 0) -
+                                                                (Array.isArray(opos) && opos.length > 0
+                                                                    ? opos.reduce((total, opo) => total +
+                                                                        opo.opo_items.reduce((itemTotal, item) => itemTotal + item.ordered_quantity, 0), 0)
+                                                                    : 0) +
                                                                 (reports
                                                                     ? reports.reduce((total, report) => total + report.quantity, 0)
-                                                                    : 0) }) }) }), jsx(TableCell, { children: jsx(Tooltip, { title: "Total stock after updating", children: jsx("b", { children: ipos.reduce((total, ipo) => total +
-                                                                ipo.items.reduce((itemTotal, item) => itemTotal + item.released_quantity, 0), 0) -
-                                                                opos.reduce((total, opo) => total +
-                                                                    opo.opo_items.reduce((itemTotal, item) => itemTotal + item.ordered_quantity, 0), 0) +
+                                                                    : 0) }) }) }), jsx(TableCell, { children: jsx(Tooltip, { title: "Total stock after updating", children: jsx("b", { children: (Array.isArray(ipos) && ipos.length > 0
+                                                                ? ipos.reduce((total, ipo) => total +
+                                                                    ipo.items.reduce((itemTotal, item) => itemTotal + item.released_quantity, 0), 0)
+                                                                : 0) -
+                                                                (Array.isArray(opos) && opos.length > 0
+                                                                    ? opos.reduce((total, opo) => total +
+                                                                        opo.opo_items.reduce((itemTotal, item) => itemTotal + item.ordered_quantity, 0), 0)
+                                                                    : 0) +
                                                                 (reports
                                                                     ? reports.reduce((total, report) => total + report.quantity, 0)
-                                                                    : 0) }) }) })] })] })] }) })] }), jsxs("form", { action: formAction, children: [id && jsx("input", { id: "id", type: "hidden", name: "id", value: id }), jsx("input", { id: "stock_reports", type: "hidden", name: "stock_reports", value: JSON.stringify(reports) }), jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, sx: { mt: 2 }, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Stock corrections" }), 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(Stack, { direction: "row", justifyContent: "flex-end", children: jsx(ReportMakingComponent, { content: "content", quantity: 0, type: "stock", related: [{ id: id, __type: "api::e-commerce.product" }], revalidateCallback: revalidateCallback, biggerButton: true }) })] }) }), jsx(Grid, { item: true, xs: 12, children: jsx(Stack, { direction: "row", justifyContent: "flex-end", alignItems: "center", sx: { py: 1 }, children: handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Close" })) }) })] })] })] }));
+                                                                    : 0) }) }) })] })] })] }) })] }), jsxs("form", { action: formAction, children: [jsx("input", { id: "stock_reports", type: "hidden", name: "stock_reports", value: JSON.stringify(reports) }), jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, sx: { mt: 2 }, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Stock corrections" }), 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(Stack, { direction: "row", justifyContent: "flex-end", children: jsx(ReportMakingComponent, { content: "content", quantity: 0, type: "stock", related: [
+                                                    {
+                                                        documentId: documentId,
+                                                        __type: "api::e-commerce.product",
+                                                    },
+                                                ], revalidateCallback: revalidateCallback, biggerButton: true }) })] }) }), jsx(Grid, { item: true, xs: 12, children: jsx(Stack, { direction: "row", justifyContent: "flex-end", alignItems: "center", sx: { py: 1 }, children: handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Close" })) }) })] })] })] }));
 }
 
 export { EditStockForm };

package/dist/esm/src/components/e-commerce/products/PriceFields.js

@@ -13,7 +13,8 @@ import InputAdornment from '@mui/material/InputAdornment';
 import Stack from '@mui/material/Stack';
 
 function PriceFields({ data, componentName, componentReference, }) {
-    const { id, vat_rate, vat, price_incl_vat, price } = data || {};
+    const { documentId, vat_rate, vat, price_incl_vat, price } = data || {};
+    console.log("documentId", documentId);
     const [priceState, setPriceState] = useState(price?.toString() || "");
     const [vatRateState, setVatRateState] = useState(() => vat_rate?.toString() || "21");
     const [vatState, setVatState] = useState(vat || 0);
@@ -28,7 +29,7 @@ function PriceFields({ data, componentName, componentReference, }) {
             setPriceInclVatState(priceInclVat);
         }
     }, [priceState, vatRateState]);
-    return (jsxs(Stack, { spacing: 2, direction: "row", children: [jsx("input", { id: ``, type: "hidden", name: `${componentName}.__component`, value: componentReference }), id && (jsx("input", { id: ``, type: "hidden", name: `${componentName}.id`, value: id })), jsx(TextField, { id: "price", InputProps: {
+    return (jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(TextField, { id: "price", InputProps: {
                     startAdornment: (jsx(InputAdornment, { position: "start", children: jsx(EuroIcon, {}) })),
                 }, name: `${componentName}.price`, label: "price", type: "float", value: priceState, onChange: (e) => {
                     setPriceState(e.target.value);

package/dist/esm/src/components/e-commerce/products/ProductCard.js

@@ -20,7 +20,7 @@ import AddToCartButton from '../cart/AddToCartButton.client.js';
 import MarkdownDisplay from '../../common/markdown/MarkdownDisplay.js';
 
 function ProductCard({ product, sx = [] }) {
-    const { id, uuid, product_number, title, description, slug, price, image, stock, } = product;
+    const { documentId, uuid, product_number, title, description, slug, price, image, stock, } = product;
     const imgURL = getStrapiMedia(image?.url);
     const thumbURL = getStrapiMedia(image?.formats?.thumbnail?.url);
     return (jsxs(Card, { sx: [
@@ -28,12 +28,12 @@ function ProductCard({ product, sx = [] }) {
             { width: "100%", height: "100%" },
             { display: "flex", flexDirection: "column" },
             ...(Array.isArray(sx) ? sx : [sx]),
-        ], children: [jsx(CardMedia, { component: "img", height: "140", src: `${imgURL}`, alt: image.alternativeText }), jsxs(CardContent, { children: [jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { pb: 2 }, children: [jsx(StyledLink, { href: `/shop/${slug}`, target: "_self", children: jsx(Typography, { variant: "h5", children: title }) }), jsx(Price, { id: id, price: price.price, vat: price.vat, vat_rate: price.vat_rate, price_incl_vat: price.price_incl_vat })] }), description && (jsx(MarkdownDisplay, { children: description.substring(0, 150) + "..." }))] }), jsx(Box, { sx: { flexGrow: 1 } }), jsxs(CardActions, { sx: {
+        ], children: [jsx(CardMedia, { component: "img", height: "140", src: `${imgURL}`, alt: image.alternativeText }), jsxs(CardContent, { children: [jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { pb: 2 }, children: [jsx(StyledLink, { href: `/shop/${slug}`, target: "_self", children: jsx(Typography, { variant: "h5", children: title }) }), jsx(Price, { documentId: documentId, price: price.price, vat: price.vat, vat_rate: price.vat_rate, price_incl_vat: price.price_incl_vat })] }), description && (jsx(MarkdownDisplay, { children: description.substring(0, 150) + "..." }))] }), jsx(Box, { sx: { flexGrow: 1 } }), jsxs(CardActions, { sx: {
                     display: "flex",
                     justifyContent: "flex-end",
                     alignItems: "flex-end",
                 }, children: [jsx(Button, { size: "small", href: `/shop/${slug}`, children: "Learn More" }), jsx(AddToCartButton, { product: {
-                            id: id,
+                            documentId: documentId,
                             uuid: uuid,
                             slug: slug,
                             thumb: thumbURL,

package/dist/esm/src/components/e-commerce/products/ProductCategoryCard.js

@@ -26,7 +26,7 @@ function ProductCategoryCard({ category, sx = [] }) {
                         alignItems: "center",
                         gap: 2,
                         flexDirection: "column",
-                    }, children: [jsx(Typography, { variant: "h4", component: "h1", align: "center", children: title }), description && (jsx(Box, { sx: { textAlign: "center", p: 2, overflow: "hidden" }, children: jsx(MarkdownDisplay, { children: description }) })), jsxs(Button, { variant: "contained", color: "primary", href: `/shop/categories/${slug}`, children: ["See all ", category.title] }), products.data.length - PRODUCTS_PER_CATEGORY > 0 && (jsxs(Typography, { variant: "body2", children: [products.data.length - PRODUCTS_PER_CATEGORY, " more..."] }))] }), products.data.slice(0, PRODUCTS_PER_CATEGORY).map((product) => (jsx(Grid, { item: true, xs: 12, sm: 6, md: 3, children: jsx(ProductCard, { product: product }, product.id) })))] }) }));
+                    }, children: [jsx(Typography, { variant: "h4", component: "h1", align: "center", children: title }), description && (jsx(Box, { sx: { textAlign: "center", p: 2, overflow: "hidden" }, children: jsx(MarkdownDisplay, { children: description }) })), jsxs(Button, { variant: "contained", color: "primary", href: `/shop/categories/${slug}`, children: ["See all ", category.title] }), products.data.length - PRODUCTS_PER_CATEGORY > 0 && (jsxs(Typography, { variant: "body2", children: [products.data.length - PRODUCTS_PER_CATEGORY, " more..."] }))] }), products.data.slice(0, PRODUCTS_PER_CATEGORY).map((product) => (jsx(Grid, { item: true, xs: 12, sm: 6, md: 3, children: jsx(ProductCard, { product: product }, product.documentId) })))] }) }));
 }
 
 export { ProductCategoryCard as default };

package/dist/esm/src/components/e-commerce/products/ProductSelector.js

@@ -14,15 +14,15 @@ const ProductSelector = ({ productNames, currentValue, sx, multiple = true, onCh
     const [selectedValues, setSelectedValues] = useState(currentValue || []);
     const handleProductChange = (event, value) => {
         if (multiple === true) {
-            const ids = value.map((product) => product.id);
+            const ids = value.map((product) => product.documentId);
             setSelectedValues(ids);
             if (onChangeCallback)
                 onChangeCallback(ids);
         }
         else if (value) {
-            setSelectedValues([value.id]);
+            setSelectedValues([value.documentId]);
             if (onChangeCallback)
-                onChangeCallback([value.id]);
+                onChangeCallback([value.documentId]);
         }
         else {
             setSelectedValues([]);
@@ -36,8 +36,8 @@ const ProductSelector = ({ productNames, currentValue, sx, multiple = true, onCh
         ], children: [jsx(Autocomplete, { multiple: multiple, options: productNames, getOptionLabel: (option) => {
                     return `${option.product_number} | ${option.title}`;
                 }, filterSelectedOptions: true, onChange: handleProductChange, renderInput: (params) => jsx(TextField, { ...params, label: "Products" }), defaultValue: multiple
-                    ? productNames.filter((productName) => selectedValues.includes(productName.id))
-                    : productNames.find((productName) => productName.id === selectedValues[0]) || null }), jsx("input", { type: "hidden", name: "products", value: JSON.stringify(selectedValues) })] }));
+                    ? productNames.filter((productName) => selectedValues.includes(productName.documentId))
+                    : productNames.find((productName) => productName.documentId === selectedValues[0]) || null }), jsx("input", { type: "hidden", name: "products", value: JSON.stringify(selectedValues) })] }));
 };
 
 export { ProductSelector as default };

package/dist/esm/src/components/e-commerce/products/SingleProduct.js

@@ -19,7 +19,7 @@ import AddToCartButton from '../cart/AddToCartButton.client.js';
 import MarkdownDisplay from '../../common/markdown/MarkdownDisplay.js';
 
 function SingleProduct({ product, sx = [] }) {
-    const { id, uuid, product_number, title, description, slug, price, image, gallery, categories, stock, } = product;
+    const { documentId, uuid, product_number, title, description, slug, price, image, gallery, categories, stock, } = product;
     const imgURL = image?.url ? getStrapiMedia(image.url) : null;
     const thumbURL = image?.formats?.thumbnail?.url
         ? getStrapiMedia(image.formats.thumbnail.url)
@@ -28,7 +28,7 @@ function SingleProduct({ product, sx = [] }) {
                                         fontWeight: 600,
                                         color: stock === 0 ? "red" : "white",
                                     }, align: "right", children: [stock, " items in stock"] }), jsx(AddToCartButton, { product: {
-                                        id: id,
+                                        documentId: documentId,
                                         uuid: uuid,
                                         slug: slug,
                                         thumb: thumbURL,
@@ -39,15 +39,15 @@ function SingleProduct({ product, sx = [] }) {
                                         price_incl_vat: price.price_incl_vat,
                                         product_number: product_number,
                                         stock: stock,
-                                    } })] }) })) }), jsx(Grid, { item: true, xs: 12, sm: 12, md: 6, lg: 5, xl: 5, children: imgURL !== null && (jsx(Box, { sx: { height: "400px", width: "100%", position: "relative" }, children: jsx(Suspense, { fallback: jsx("div", { children: "Loading..." }), children: jsx(StrapiImage, { id: image.id, url: imgURL, alternativeText: image.alternativeText, fill: true, style: { objectFit: "contain" } }) }) })) }), jsx(Grid, { item: true, xs: 12, sm: 12, md: 6, lg: 7, xl: 7, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsx(Typography, { variant: "h6", children: "Image gallery" }) }), jsx(Grid, { item: true, xs: 12, children: jsx(Suspense, { fallback: jsx("div", { children: "Loading..." }), children: jsx(Stack, { spacing: 1, direction: "row", children: product?.gallery?.data &&
-                                            product.gallery.data.map((img) => {
+                                    } })] }) })) }), jsx(Grid, { item: true, xs: 12, sm: 12, md: 6, lg: 5, xl: 5, children: imgURL !== null && (jsx(Box, { sx: { height: "400px", width: "100%", position: "relative" }, children: jsx(Suspense, { fallback: jsx("div", { children: "Loading..." }), children: jsx(StrapiImage, { id: image.id, url: imgURL, alternativeText: image.alternativeText, fill: true, style: { objectFit: "contain" } }) }) })) }), jsx(Grid, { item: true, xs: 12, sm: 12, md: 6, lg: 7, xl: 7, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsx(Typography, { variant: "h6", children: "Image gallery" }) }), jsx(Grid, { item: true, xs: 12, children: jsx(Suspense, { fallback: jsx("div", { children: "Loading..." }), children: jsx(Stack, { spacing: 1, direction: "row", children: product?.gallery &&
+                                            product.gallery.map((img) => {
                                                 const imgUrl = img?.url ? getStrapiMedia(img.url) : null;
                                                 return (jsx(Box, { sx: {
                                                         width: " 150px",
                                                         height: "150px",
                                                         position: "relative",
                                                     }, children: imgUrl !== null && (jsx(StrapiImage, { id: img.id, url: imgUrl, alternativeText: img.alternativeText, fill: true, style: { objectFit: "contain" } })) }, img.id));
-                                            }) }) }) }), jsx(Grid, { item: true, xs: 12, md: 6, children: categories?.data && (jsxs(Stack, { justifyContent: "center", alignItems: "center", direction: categories.data.length === 1 ? "row" : "column", children: [categories.data.length === 1 ? (jsx(Typography, { children: "Category:" })) : (jsx(Typography, { children: "Categories:" })), categories.data?.map((categorie) => {
+                                            }) }) }) }), jsx(Grid, { item: true, xs: 12, md: 6, children: categories && (jsxs(Stack, { justifyContent: "center", alignItems: "center", direction: categories.length === 1 ? "row" : "column", children: [categories.length === 1 ? (jsx(Typography, { children: "Category:" })) : (jsx(Typography, { children: "Categories:" })), categories.map((categorie) => {
                                             return (jsx(Link, { href: `/shop/categories/${categorie.slug}`, legacyBehavior: true, children: jsx(Button, { variant: "text", children: categorie.slug }) }, categorie.id));
                                         })] })) }), jsx(Grid, { item: true, xs: 12, md: 6, children: jsx(Stack, { children: jsx(Link, { href: "/shop", legacyBehavior: true, children: jsx(Button, { variant: "outlined", children: "continue shopping" }) }) }) })] }) })] }) }));
 }

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

@@ -60,7 +60,7 @@ function IPOItemFields({ productsArr, vendorID = null, }) {
         return items.map((item, index) => {
             return {
                 line_item_number: `${index + 1}.0.0`,
-                product: item.product.id,
+                product: item.product.documentId,
                 ordered_quantity: item.amount,
                 expected_delivery_date: item.pdw,
             };
@@ -103,7 +103,7 @@ function IPOItemFields({ productsArr, vendorID = null, }) {
                                             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.id === ids[0]);
+                            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) => {

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

@@ -31,11 +31,16 @@ function ItemUpdater({ item, index, handleUpdateQuantity, image, revalidateCallb
         : 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.id, "received_quantity");
+                        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.id, "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.id, "released_quantity");
+                        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: [
+                                    {
+                                        documentId: item.documentId,
+                                        __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));
 }
 

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

@@ -72,7 +72,7 @@ function ManageIPOForm({ data, sx, revalidateCallback, handleClose, role, }) {
     const parseItems = (items) => {
         return items.map((item) => {
             return {
-                id: item.id,
+                documentId: item.documentId,
                 received_quantity: item.received_quantity,
                 registered_quantity: item.registered_quantity,
                 released_quantity: item.released_quantity,
@@ -81,16 +81,18 @@ function ManageIPOForm({ data, sx, revalidateCallback, handleClose, role, }) {
     };
     const handleUpdateQuantity = (value, itemID, type) => {
         const newItems = [...items];
-        const index = newItems.findIndex((item) => item.id === itemID);
+        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, { item: true, xs: 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, { item: true, xs: 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" ||
+    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 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.documentId, __type: "api::logistics.ipo" },
+                                        ], revalidateCallback: revalidateCallback })] }), jsx(Divider, {})] }) }), jsx(Grid, { item: true, xs: 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, { item: true, xs: 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.id}`, "order_confirmation");
+                                                            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.id}`, "delivery_note");
+                                                        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, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Notes" }), jsx(NotesDisplay, { notes: data.notes }), jsx(Divider, {})] }) })), jsx(Grid, { item: true, xs: 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}

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

@@ -42,13 +42,13 @@ function TextualIPOItemUpdater({ item, index, handleAddReport, handleUpdateQuant
     const preReports = item.reports?.filter((report) => Boolean("id" in report) === false) ||
         [];
     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 + registered_quantity, maxNewValue: ordered_quantity, color: "info", handleChange: (newValue) => {
-                                        handleUpdateQuantity(newValue, item.id, "received_quantity");
+                                        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.id, "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.id, reports: preReports, handleRemoveReportAtIndex: handleRemoveReportAtIndex }), jsx(SimpleReportFields, { itemID: item.id, content: "", type: "registered", minValue: -(received_quantity -
+                                        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.id, "released_quantity");
+                                handleUpdateQuantity(newValue, item.documentId, "released_quantity");
                             } })] }))] })) }, index));
 }
 

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

@@ -133,14 +133,14 @@ function TextualManageIPOForm({ data, sx, revalidateCallback, handleClose, role,
     const parseItems = (items) => {
         return items.map((item) => {
             return {
-                id: item.id,
+                id: 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,
@@ -151,7 +151,7 @@ function TextualManageIPOForm({ data, sx, revalidateCallback, handleClose, role,
     };
     const handleUpdateQuantity = (value, itemID, type) => {
         const newItems = [...items];
-        const index = newItems.findIndex((item) => item.id === itemID);
+        const index = newItems.findIndex((item) => item.documentId === itemID);
         newItems[index][type] = value;
         setItems(newItems);
     };
@@ -160,7 +160,7 @@ function TextualManageIPOForm({ data, sx, revalidateCallback, handleClose, role,
      * - only used with Textual form */
     const handleAddReport = (report, itemID) => {
         const newItems = [...items];
-        const index = newItems.findIndex((item) => item.id === itemID);
+        const index = newItems.findIndex((item) => item.documentId === itemID);
         const reportsOnItem = newItems[index]?.reports || [];
         const newReports = [...reportsOnItem, report];
         if (newItems[index]?.reports == undefined) {
@@ -171,7 +171,7 @@ function TextualManageIPOForm({ data, sx, revalidateCallback, handleClose, role,
     };
     const handleRemoveReportAtIndex = (itemID, index) => {
         const newItems = [...items];
-        const itemIndex = newItems.findIndex((item) => item.id === itemID);
+        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));
@@ -207,12 +207,14 @@ function TextualManageIPOForm({ data, sx, revalidateCallback, handleClose, role,
     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, { item: true, xs: 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, { item: true, xs: 12, children: jsx(Typography, { variant: "h5", sx: { py: 1 }, children: "Details" }) }), jsx(Grid, { item: true, xs: 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, { item: true, xs: 6, children: jsx(Paper, { elevation: 2, sx: { p: 2, height: "100%" }, children: jsxs(Stack, { spacing: 2, children: [(data.internal_status === "placed" ||
+        ], children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 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.documentId, __type: "api::logistics.ipo" },
+                                        ], revalidateCallback: revalidateCallback })] }), jsx(Divider, {})] }) }), jsx(Grid, { item: true, xs: 12, children: jsx(Typography, { variant: "h5", sx: { py: 1 }, children: "Details" }) }), jsx(Grid, { item: true, xs: 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, { item: true, xs: 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, { item: true, xs: 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(Fragment, { children: [jsx(Typography, { variant: "h6", children: "Order Confirmation" }), jsx(Typography, { children: data.order_confirmation?.name }), jsx(Button, { variant: "contained", onClick: () => {
-                                                            downloadBase64File(`api/ipos/${data.id}`, "order_confirmation");
+                                                            downloadBase64File(`api/ipos/${data.documentId}`, "order_confirmation");
                                                         }, children: "Download" })] })) : (jsxs(Fragment, { children: [jsx(Typography, { variant: "h5", children: "Order Confirmation" }), jsx(Typography, { variant: "body1", children: "Here you can upload the the order confirmation for this order" }), jsx(Typography, { variant: "body1", children: "FileUpload" }), jsx(Divider, {}), jsx(UploadBase64MediaForm /* This form manages it's own state internally */, { 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(Fragment, { children: [jsx(Typography, { variant: "h6", children: "Delivery Note" }), jsx(Typography, { children: data.delivery_note?.name }), jsx(Button, { variant: "contained", onClick: () => {
-                                                        downloadBase64File(`api/ipos/${data.id}`, "delivery_note");
+                                                        downloadBase64File(`api/ipos/${data.documentId}`, "delivery_note");
                                                     }, children: "Download" })] })) : (jsxs(Fragment, { children: [jsx(Typography, { variant: "h5", children: "Delivery Note" }), jsx(Typography, { variant: "body1", children: "Here you can upload the the delivery note for this order" }), jsx(Divider, {}), jsx(UploadBase64MediaForm, { reference: "api::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, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Notes" }), jsx(NotesDisplay, { notes: data.notes }), jsx(Divider, {})] }) })), jsx(Grid, { item: true, xs: 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",

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

@@ -36,7 +36,7 @@ const INITIAL_STATE = {
     severity: null,
 };
 function EditVendorForm({ data, productNamesArr, revalidateCallback, handleClose, sx, }) {
-    const { id, website_url, phone_number, email, business_credentials, address, products, contacts, notes, } = data;
+    const { documentId, 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();
@@ -81,9 +81,12 @@ function EditVendorForm({ data, productNamesArr, revalidateCallback, handleClose
     // 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) => {
+    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsxs("form", { action: formAction, children: [documentId && (jsx("input", { id: "id", type: "hidden", name: "id", value: documentId })), 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.documentId,
+                                                __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.documentId) })] }), 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: {

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

@@ -18,7 +18,7 @@ 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;
+    const { documentId, 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.

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

@@ -18,12 +18,13 @@ const VendorSelector = ({ vendorNames, currentValue, onSelectVendor, }) => {
     const [selectedValue, setSelectedValue] = useState(currentValue || null);
     const handleVendorChange = (event, value) => {
         // if (!value) return;
-        const id = value?.id || null;
-        setSelectedValue(id);
+        const documentId = value?.documentId || null;
+        setSelectedValue(documentId);
         if (onSelectVendor)
-            onSelectVendor(id);
+            onSelectVendor(documentId);
     };
-    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) : "" })] }));
+    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.documentId === selectedValue) ||
+                    null }), jsx("input", { type: "hidden", name: "vendors", value: selectedValue ? selectedValue : "" })] }));
 };
 
 export { VendorSelector as default };