umwd-components 0.1.716 → 0.1.717

package/dist/esm/src/components/e-commerce/invoice/InvoicePDF.js

@@ -0,0 +1,118 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { StyleSheet, PDFDownloadLink, PDFViewer, Document, Page, View, Text } from '@react-pdf/renderer';
+import { useState, Fragment as Fragment$1 } 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 PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
+
+// TODO Think of a proper solution for theming this file for multiple clients
+// Font.register({
+//   family: "Roboto",
+//   fonts: [
+//     { src: roboto }, // font-style: normal, font-weight: normal
+//     { src: robotoBold, fontWeight: "bold" },
+//     { src: robotoItalic, fontStyle: "italic" },
+//   ],
+// });
+// Create styles
+const styles = StyleSheet.create({
+    page: {
+        flexDirection: "column",
+        backgroundColor: "#E4E4E4",
+        // fontFamily: "Roboto",
+    },
+    header: {
+        padding: 10,
+        // backgroundColor: lightThemeOptions.palette.primary.main,
+        // color: lightThemeOptions.palette.primary.contrastText,
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    logo: {
+        width: 24,
+        height: 24,
+        marginRight: 10,
+    },
+    section: {
+        margin: 10,
+        padding: 10,
+        fontSize: 12,
+    },
+    row: {
+        flexDirection: "row",
+    },
+    rowSection: {
+        flex: 1,
+    },
+    productRowSection: {
+        flex: 1,
+        width: 1 / 6,
+    },
+    h1: { fontSize: 28 },
+    h2: { fontSize: 24, fontWeight: "bold" },
+    h3: { fontSize: 16, fontWeight: "bold" },
+});
+// Create Document Component
+function InvoicePDF({ props }) {
+    const { invoice } = props;
+    console.log("invoice from invoicePDF", invoice);
+    const { seller_business_credentials, seller_company_address, buyer_company_address, buyer_business_credentials, type, invoice_number, } = invoice;
+    console.log("type", type);
+    if (type === "credit") {
+        return (jsx(Document, { title: `credit_${invoice?.invoice_number}`, children: jsxs(Page, { size: "A4", style: styles.page, children: [jsx(View, { style: styles.header, children: jsx(Text, { style: styles.h1, children: seller_business_credentials?.company_name }) }), jsx(View, { style: styles.section, children: jsx(Text, { style: styles.h2, children: "CREDIT NOTE" }) }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "BILLING DETAILS" }), jsx(Text, { children: buyer_business_credentials?.company_name }), jsxs(Text, { children: [invoice?.buyer_first_name, " ", invoice?.buyer_last_name] }), jsxs(Text, { children: [buyer_company_address?.street, " ", buyer_company_address?.street_number, " ", buyer_company_address?.street_number_addition] }), jsxs(Text, { children: [buyer_company_address?.postal_code, " ", buyer_company_address?.city] })] }), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "FROM" }), jsx(Text, { children: seller_business_credentials?.company_name }), jsxs(Text, { children: [seller_company_address?.street, " ", seller_company_address?.street_number, " ", seller_company_address?.street_number_addition] }), jsxs(Text, { children: [seller_company_address?.postal_code, " ", seller_company_address?.city] }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "CoC Number" }), jsx(Text, { children: seller_business_credentials?.coc_number }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "VAT Number" }), jsx(Text, { children: seller_business_credentials?.vat_number })] })] }) }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice number: " }), jsx(Text, { children: invoice?.invoice_number })] }), invoice?.customer_reference && (jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Your reference: " }), jsx(Text, { children: invoice?.customer_reference })] })), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice date" }), jsx(Text, { children: invoice?.invoice_date })] })] }) }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "SUMMARY" }), jsxs(View, { style: styles.row, children: [invoice?.admin_items?.length > 0 && (jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Line Item Number" }) })), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Title" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Amount" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT rate" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Incl. VAT" }) })] }), invoice?.items?.map((item, index) => {
+                                return (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["product_title" in item && item.product_title, "item_description" in item && item.item_description] }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsxs(View, { style: styles.productRowSection, children: [jsxs(Text, { style: { fontSize: "10px" }, children: [item.vat_rate, " %"] }), " "] }), jsx(View, { style: styles.productRowSection, children: item.price_excl_vat && item.price_incl_vat && (jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC", " ", (item.price_incl_vat - item.price_excl_vat)?.toFixed(2)] })) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_incl_vat?.toFixed(2)] }) })] }) }, index));
+                            }), invoice?.admin_items?.map((item, index) => {
+                                return (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.line_item_number }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.description }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: [item?.price?.vat_rate, " %"] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price_incl_vat?.toFixed(2)] }) })] }) }, index));
+                            })] }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "TOTALS" }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Incl. VAT" }) })] }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.VAT_total?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] })] }), jsx(View, { style: styles.section, children: jsxs(Text, { style: { ...styles.h3, border: "2px solid black", padding: 10 }, children: ["Total: \u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] }) }));
+    }
+    if (type === "proforma") {
+        return (jsx(Document, { title: `proforma_${invoice?.invoice_number}`, children: jsxs(Page, { size: "A4", style: styles.page, children: [jsx(View, { style: styles.header, children: jsx(Text, { style: styles.h1, children: seller_business_credentials?.company_name }) }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h2, children: "PROFORMA INVOICE" }), jsx(Text, { style: { fontSize: 10, marginTop: 5 }, children: "This is not a final invoice and cannot be used for tax purposes" })] }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "BILLING DETAILS" }), jsx(Text, { children: buyer_business_credentials?.company_name }), jsxs(Text, { children: [invoice?.buyer_first_name, " ", invoice?.buyer_last_name] }), jsxs(Text, { children: [buyer_company_address?.street, " ", buyer_company_address?.street_number, " ", buyer_company_address?.street_number_addition] }), jsxs(Text, { children: [buyer_company_address?.postal_code, " ", buyer_company_address?.city] })] }), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "FROM" }), jsx(Text, { children: seller_business_credentials?.company_name }), jsxs(Text, { children: [seller_company_address?.street, " ", seller_company_address?.street_number, " ", seller_company_address?.street_number_addition] }), jsxs(Text, { children: [seller_company_address?.postal_code, " ", seller_company_address?.city] }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "CoC Number" }), jsx(Text, { children: seller_business_credentials?.coc_number }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "VAT Number" }), jsx(Text, { children: seller_business_credentials?.vat_number })] })] }) }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice number: " }), jsx(Text, { children: invoice?.invoice_number })] }), invoice?.customer_reference && (jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Your reference: " }), jsx(Text, { children: invoice?.customer_reference })] })), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice date" }), jsx(Text, { children: invoice?.invoice_date })] })] }) }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "SUMMARY" }), jsxs(View, { style: styles.row, children: [invoice?.admin_items?.length > 0 && (jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Line Item Number" }) })), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Title" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Amount" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT rate" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Incl. VAT" }) })] }), invoice?.items?.map((item, index) => {
+                                return (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["product_title" in item && item.product_title, "item_description" in item && item.item_description] }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsxs(View, { style: styles.productRowSection, children: [jsxs(Text, { style: { fontSize: "10px" }, children: [item.vat_rate, " %"] }), " "] }), jsx(View, { style: styles.productRowSection, children: item.price_excl_vat && item.price_incl_vat && (jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC", " ", (item.price_incl_vat - item.price_excl_vat)?.toFixed(2)] })) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_incl_vat?.toFixed(2)] }) })] }) }, index));
+                            }), invoice?.admin_items?.map((item, index) => {
+                                return (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.line_item_number }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.description }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: [item?.price?.vat_rate, " %"] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price_incl_vat?.toFixed(2)] }) })] }) }, index));
+                            })] }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "TOTALS" }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Incl. VAT" }) })] }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.VAT_total?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] })] }), jsx(View, { style: styles.section, children: jsxs(Text, { style: { ...styles.h3, border: "2px solid black", padding: 10 }, children: ["Total Due: \u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] }) }));
+    }
+    else {
+        return (jsx(Document, { title: `invoice_${invoice?.invoice_number}`, children: jsxs(Page, { size: "A4", style: styles.page, children: [jsx(View, { style: styles.header, children: jsx(Text, { style: styles.h1, children: seller_business_credentials?.company_name }) }), jsx(View, { style: styles.section, children: jsx(Text, { style: styles.h2, children: "INVOICE" }) }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "BILLING DETAILS" }), jsx(Text, { children: buyer_business_credentials?.company_name }), jsxs(Text, { children: [invoice?.buyer_first_name, " ", invoice?.buyer_last_name] }), jsxs(Text, { children: [buyer_company_address?.street, " ", buyer_company_address?.street_number, " ", buyer_company_address?.street_number_addition] }), jsxs(Text, { children: [buyer_company_address?.postal_code, " ", buyer_company_address?.city] })] }), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "FROM" }), jsx(Text, { children: seller_business_credentials?.company_name }), jsxs(Text, { children: [seller_company_address?.street, " ", seller_company_address?.street_number, " ", seller_company_address?.street_number_addition] }), jsxs(Text, { children: [seller_company_address?.postal_code, " ", seller_company_address?.city] }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "CoC Number" }), jsx(Text, { children: seller_business_credentials?.coc_number }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "VAT Number" }), jsx(Text, { children: seller_business_credentials?.vat_number })] })] }) }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice number: " }), jsx(Text, { children: invoice?.invoice_number })] }), invoice?.customer_reference && (jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Your reference: " }), jsx(Text, { children: invoice?.customer_reference })] })), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice date" }), jsx(Text, { children: invoice?.invoice_date })] })] }) }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "SUMMARY" }), jsxs(View, { style: styles.row, children: [invoice?.admin_items?.length > 0 && (jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Line Item Number" }) })), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Title" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Amount" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT rate" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Incl. VAT" }) })] }), invoice?.items?.map((item, index) => {
+                                return (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["product_title" in item && item.product_title, "item_description" in item && item.item_description] }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsxs(View, { style: styles.productRowSection, children: [jsxs(Text, { style: { fontSize: "10px" }, children: [item.vat_rate, " %"] }), " "] }), jsx(View, { style: styles.productRowSection, children: item.price_excl_vat && item.price_incl_vat && (jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC", " ", (item.price_incl_vat - item.price_excl_vat)?.toFixed(2)] })) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_incl_vat?.toFixed(2)] }) })] }) }, index));
+                            }), invoice?.admin_items?.map((item, index) => {
+                                return (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.line_item_number }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.description }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: [item?.price?.vat_rate, " %"] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price_incl_vat?.toFixed(2)] }) })] }) }, index));
+                            })] }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "TOTALS" }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Incl. VAT" }) })] }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.VAT_total?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] })] }), jsx(View, { style: styles.section, children: jsxs(Text, { style: { ...styles.h3, border: "2px solid black", padding: 10 }, children: ["Total Due: \u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] }) }));
+    }
+}
+function InvoiceDownloadLink({ invoice }) {
+    /* const PDFDownloadLink = dynamic(
+      () => import("@react-pdf/renderer").then((mod) => mod.PDFDownloadLink),
+      {
+        ssr: false,
+        loading: () => <p>Loading...</p>,
+      }
+    ); */
+    return (jsx(PDFDownloadLink, { document: jsx(InvoicePDF, { props: { invoice: invoice } }), fileName: `invoice_${invoice?.invoice_number}`, children: jsx(IconButton, { children: jsx(PictureAsPdfIcon, {}) }) }));
+}
+function InvoicePDFViewer({ invoice }) {
+    /*  const PDFViewer = dynamic(
+      () => import("@react-pdf/renderer").then((mod) => mod.PDFViewer),
+      {
+        ssr: false,
+        loading: () => <p>Loading...</p>,
+      }
+    ); */
+    const [open, setOpen] = useState(false);
+    return (jsxs(Fragment, { children: [jsx(IconButton, { onClick: () => setOpen(true), children: jsx(PictureAsPdfIcon, {}) }), jsxs(Dialog, { open: open, fullWidth: true, maxWidth: "lg", children: [jsx(DialogContent, { children: jsx(PDFViewer, { style: {
+                                width: "100%",
+                                minHeight: "70vh",
+                            }, children: jsx(InvoicePDF, { props: { invoice: invoice } }) }) }), jsx(DialogActions, { children: jsx(Button, { variant: "contained", onClick: () => setOpen(false), children: "Close" }) })] })] }));
+}
+
+export { InvoiceDownloadLink, InvoicePDFViewer };

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

@@ -0,0 +1,59 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { useFormState } from 'react-dom';
+import { useSnackbar } from '../../../context/common/SnackbarContext.js';
+import { createIroAction } from '../../../data/actions/e-commerce/iro/createIroAction.js';
+import { SubmitButton } from '../../SubmitButton.js';
+import { CustomerSelector } from '../customer/CustomerSelector.js';
+import { IROItemFields } from './IROItemFields.js';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import Checkbox from '@mui/material/Checkbox';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+    severity: null,
+};
+/* INFO For use by admin only */
+function CreateIroForm({ sx, revalidateCallback, handleClose, customerLabels, productLabels, }) {
+    const [returnConfirmed, setReturnConfirmed] = useState(false);
+    const [formState, formAction] = useFormState(createIroAction, 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 creating return order",
+                severity: formState.severity || "error",
+            });
+        }
+    }, [formState?.strapiErrors]);
+    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsx("form", { action: formAction, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsx(Stack, { spacing: 2, children: jsx(Typography, { variant: "h3", component: "h1", children: "Create new return order" }) }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Choose a customer" }), jsx(Typography, { variant: "body2", children: "Select the customer for which you want to create a return order" }), jsx(CustomerSelector, { customerLabels: customerLabels })] }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Customer reference" }), jsx(Typography, { children: "If the customer utilizes a custom reference for inbound order management it should be left here" }), jsx(TextField, { id: "customer_reference", name: "customer_reference", sx: { width: "100%" } })] }) }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Choose products that should be in this return order" }), jsx(IROItemFields, { productsArr: productLabels })] }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Confirm Order" }), jsx(Typography, { children: "Are you sure you want to confirm this return? Confirming this order means you are sure the customer wants to return the products and you are ready to process the return." }), jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(Checkbox, { value: returnConfirmed, checked: returnConfirmed, onChange: () => setReturnConfirmed(!returnConfirmed) }), returnConfirmed && (jsx(Typography, { color: "primary", children: "I am sure I want to confirm this return order" }))] }), jsx("input", { name: "status", type: "hidden", value: returnConfirmed ? "returning" : "requested" })] }), " ", jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Confirm", loadingText: "Loading...", variant: "contained" })] }) })] }) }) }));
+}
+
+export { CreateIroForm as default };

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

@@ -0,0 +1,109 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import Table from '@mui/material/Table';
+import TableHead from '@mui/material/TableHead';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
+import IconButton from '@mui/material/IconButton';
+import AddIcon from '@mui/icons-material/Add';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import ProductSelector from '../products/ProductSelector.js';
+import '../../../../node_modules/dayjs/dayjs.min.js';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { useTheme } from '@mui/material/styles';
+
+function IROItemFields({ productsArr }) {
+    const [items, setItems] = useState([]);
+    const [nextProductName, setNextProductName] = useState(null);
+    const [nextAmount, setNextAmount] = useState(0);
+    const [nextReason, setNextReason] = useState("damaged");
+    const [nextOtherReason, setNextOtherReason] = useState("");
+    const [selectedProduct, setSelectedProduct] = useState([]);
+    const [showCustomReason, setShowCustomReason] = useState(false);
+    const handleAddItem = () => {
+        if (nextAmount === null) {
+            console.log("nextProductName or nextAmount is null");
+            return;
+        }
+        const newItem = {
+            product: nextProductName,
+            returned_quantity: nextAmount,
+            reason: nextReason,
+            other_reason: nextOtherReason,
+        };
+        setItems([...items, newItem]);
+        // reset the fields
+        setNextProductName(null);
+        setNextAmount(0);
+        setNextReason("damaged");
+        setNextOtherReason("");
+        setSelectedProduct([]);
+    };
+    const handleDeleteItem = (index) => {
+        const newItems = items.filter((_, i) => i !== index);
+        setItems(newItems);
+    };
+    useTheme();
+    const parseItems = (items) => {
+        return items.map((item, index) => {
+            return {
+                line_item_number: `${index + 1}.0.0`,
+                product: item.product?.id || 0,
+                returned_quantity: item.returned_quantity,
+                reason: nextReason,
+                other_reason: nextOtherReason,
+            };
+        });
+    };
+    const [parsedItems, setParsedItems] = useState([]);
+    useEffect(() => {
+        setParsedItems(parseItems(items));
+    }, [items]);
+    return (jsxs(Stack, { spacing: 2, children: [jsxs(Table, { children: [jsx(TableHead, { children: jsxs(TableRow, { children: [jsx(TableCell, { id: "line_item_number", sx: [{ width: "15%" }], children: "Line Item Number" }), jsx(TableCell, { sx: [{ width: "35%" }], children: "Product Number" }), jsx(TableCell, { sx: [{ width: "15%" }], children: "Amount" }), jsx(TableCell, { sx: [{ width: "35%" }], children: "Reason" }), jsx(TableCell, { sx: [] })] }) }), jsx(TableBody, { children: items.map((item, index) => {
+                            return (jsxs(TableRow, { children: [jsxs(TableCell, { sx: [{ width: "15%" }], children: [index + 1, ".0.0"] }), jsxs(TableCell, { sx: [{ width: "35%" }], children: [typeof item.product === "object"
+                                                ? item.product?.product_number
+                                                : item.product, " ", "|", " ", typeof item.product === "object" ? item.product?.title : ""] }), jsx(TableCell, { sx: { width: "15%" }, children: item.returned_quantity }), jsx(TableCell, { sx: { width: "35%" }, children: item.reason === "other" ? item.other_reason : item.reason }), jsx(TableCell, { align: "right", sx: { width: "5%" }, children: jsx(IconButton, { onClick: () => handleDeleteItem(index), children: jsx(DeleteIcon, {}) }) })] }, index));
+                        }) })] }), jsx("input", { type: "hidden", name: "iro_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: "70%" }, multiple: false, onChangeCallback: (ids) => {
+                            const product = productsArr.find((p) => p.id === ids[0]);
+                            setNextProductName(product || null);
+                            setSelectedProduct(ids);
+                        } })), jsx(TextField, { id: "amount", name: "amount", type: "number", label: "Amount", value: nextAmount, onChange: (e) => {
+                            if (e.target.value === "") {
+                                setNextAmount(0);
+                                return;
+                            }
+                            if (parseInt(e.target.value) < 0) {
+                                setNextAmount(0);
+                                return;
+                            }
+                            setNextAmount(parseInt(e.target.value));
+                        }, 
+                        /*  error={formErrors.amount != undefined ? true : false}
+                              helperText={formErrors.amount} */
+                        sx: { width: "15%" } }), jsxs(TextField, { value: nextReason, select: true, SelectProps: {
+                            native: true,
+                        }, variant: "outlined", fullWidth: !(nextReason === "other"), sx: { minWidth: "25%" }, onChange: (e) => {
+                            const reason = e.target.value;
+                            if (reason === "other") {
+                                setShowCustomReason(true);
+                            }
+                            else {
+                                setShowCustomReason(false);
+                            }
+                            setNextReason(e.target.value);
+                        }, children: [jsx("option", { value: "damaged", children: "Damaged" }), jsx("option", { value: "not_as_described", children: "Not as described" }), jsx("option", { value: "wrong_item", children: "Wrong item" }), jsx("option", { value: "other", children: "Other" })] }), showCustomReason && (jsx(TextField, { value: nextOtherReason, label: "Custom reason", variant: "outlined", fullWidth: true, onChange: (e) => {
+                            const customReason = e.target.value;
+                            setNextOtherReason(customReason);
+                        } })), jsx(IconButton, { onClick: handleAddItem, children: jsx(AddIcon, {}) })] })] }));
+}
+
+export { IROItemFields };

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

@@ -0,0 +1,18 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import ImagePreviewTooltip from '../../common/ImagePreviewTooltip.js';
+import ReportsDisplay from '../../logistics/report/ReportsDisplay.js';
+
+function IroItemDisplay({ item, index, image }) {
+    const { line_item_number, product, returned_quantity, received_quantity, registered_quantity, released_quantity, reports, reason, other_reason, } = item;
+    return (jsxs(Stack, { spacing: 1, children: [item && (jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [jsxs(Stack, { spacing: 1, sx: { width: "100%" }, children: [jsxs(Typography, { variant: "body1", children: ["Line Item Number: ", line_item_number] }), jsxs(Typography, { variant: "body1", children: ["Part Number: ", product?.product_number] })] }), jsxs(Stack, { spacing: 1, children: [jsxs(Typography, { variant: "body1", children: ["Reason: ", reason] }), other_reason !== undefined && (jsx(Typography, { variant: "body1", children: other_reason }))] }), image && (jsx(Fragment, { children: jsx(ImagePreviewTooltip, { image: image, label: item.product?.title }) }))] })), jsxs(Stack, { direction: "row", spacing: 1, justifyContent: "space-between", alignItems: "center", children: [jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(Typography, { variant: "caption", children: "Ordered" }), jsx(Typography, { variant: "h6", children: returned_quantity })] }), jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(Typography, { variant: "caption", children: "Received" }), jsx(Typography, { variant: "h6", children: received_quantity })] }), jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(Typography, { variant: "caption", children: "Registered" }), jsx(Typography, { variant: "h6", children: registered_quantity })] }), jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(Typography, { variant: "caption", children: "Released" }), jsx(Typography, { variant: "h6", children: released_quantity })] })] }), reports?.data?.length > 0 && (jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "body1", children: "Reports:" }), jsx(ReportsDisplay, { reports: reports.data.filter((report) => "id" in report && !("pre_report" in report)) })] }))] }, index));
+}
+
+export { IroItemDisplay as default };

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

@@ -0,0 +1,44 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import Divider from '@mui/material/Divider';
+import Collapse from '@mui/material/Collapse';
+import { AmountUpdater } from '../../common/AmountUpdater.js';
+import ArrowButtonDownIcon from '@mui/icons-material/ArrowDropDown';
+import ImagePreviewTooltip from '../../common/ImagePreviewTooltip.js';
+import ReportMakingComponent from '../../logistics/report/ReportMakingComponent.js';
+import ReportsDisplay from '../../logistics/report/ReportsDisplay.js';
+
+function IroItemUpdater({ item, index, handleUpdateQuantity, image, revalidateCallback, }) {
+    const { line_item_number, product, received_quantity, registered_quantity, released_quantity, returned_quantity, reports, reason, other_reason, } = item;
+    const received_bad_quantity = reports?.data !== undefined && reports.data.length > 0
+        ? reports.data
+            .filter((report) => report.type === "received")
+            .reduce((a, b) => a + b.quantity, 0)
+        : 0;
+    const registered_bad_quantity = reports?.data !== undefined && reports.data.length > 0
+        ? reports.data
+            .filter((report) => report.type === "registered")
+            .reduce((a, b) => a + b.quantity, 0)
+        : 0;
+    const [open, setOpen] = useState(false);
+    return (jsx(Stack, { spacing: 1, children: item && (jsxs(Fragment, { children: [jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [jsxs(Stack, { spacing: 1, children: [jsxs(Typography, { variant: "body1", children: ["Line Item Number: ", line_item_number] }), jsxs(Typography, { variant: "body1", children: ["Part Number: ", product && product.product_number] })] }), image && (jsx(Fragment, { children: jsx(ImagePreviewTooltip, { image: image, label: product && product.title }) }))] }), jsx(Typography, { variant: "body1", children: "Reason" }), jsx(Typography, { variant: "body2", children: "Received" }), jsx(AmountUpdater, { currentValue: received_quantity, totalValue: returned_quantity + received_bad_quantity, minNewValue: 0 + registered_quantity + -registered_bad_quantity, maxNewValue: returned_quantity + received_bad_quantity, color: "info", handleChange: (newValue) => {
+                        handleUpdateQuantity(newValue, item.id, "received_quantity");
+                    } }), jsx(Typography, { variant: "body2", children: "Registered" }), jsx(AmountUpdater, { currentValue: registered_quantity, totalValue: returned_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.data }), jsx(ReportMakingComponent, { content: "content", quantity: 0, type: "registered", minValue: -(received_quantity + registered_bad_quantity), maxValue: received_quantity, related: [{ id: item.id, __type: "api::e-commerce.iro-item" }], revalidateCallback: revalidateCallback })] }) }), jsx(Typography, { variant: "body2", children: "Released" }), jsx(AmountUpdater, { currentValue: released_quantity || 0, totalValue: returned_quantity +
+                        received_bad_quantity +
+                        registered_bad_quantity, minNewValue: 0, maxNewValue: registered_quantity, color: "info", handleChange: (newValue) => {
+                        handleUpdateQuantity(newValue, item.id, "released_quantity");
+                    } })] })) }, index));
+}
+
+export { IroItemUpdater as default };

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

@@ -0,0 +1,56 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import Chip from '@mui/material/Chip';
+
+// TODO update colors and statusses
+const statusColorArray = [
+    { status: "requested", color: "info" },
+    { status: "returning", color: "info" },
+    { status: "logistics_operator_process", color: "info" },
+    { status: "finalising_process", color: "info" },
+    { status: "done", color: "success" },
+    { status: "cancelled", color: "error" },
+    { status: null, color: "default" },
+];
+const enduserStatusColorArray = [
+    { status: "requested", color: "warning" },
+    { status: "returning", color: "info" },
+    { status: "logistics_operator_process", color: "info" },
+    { status: "finalising_process", color: "warning" },
+    { status: "done", color: "success" },
+    { status: "cancelled", color: "error" },
+    { status: null, color: "default" },
+];
+const dispatcherStatusColorArray = [
+    { status: "requested", color: "info" },
+    { status: "returning", color: "warning" },
+    { status: "logistics_operator_process", color: "info" },
+    { status: "finalising_process", color: "info" },
+    { status: "done", color: "success" },
+    { status: "cancelled", color: "error" },
+    { status: null, color: "default" },
+];
+const IroStatusIndicator = ({ status, role, }) => {
+    const readableStatus = status
+        ? status
+            .split("_")
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(" ")
+        : "Unknown";
+    return (jsx(Chip, { label: readableStatus, color: role === "enduser"
+            ? enduserStatusColorArray.find((s) => s.status === status)?.color ||
+                "default"
+            : role === "dispatcher"
+                ? dispatcherStatusColorArray.find((s) => s.status === status)
+                    ?.color || "default"
+                : statusColorArray.find((s) => s.status === status)?.color ||
+                    "default" }));
+};
+
+export { IroStatusIndicator };

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

@@ -0,0 +1,60 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { useFormState } from 'react-dom';
+import { updateIroAction } from '../../../data/actions/e-commerce/iro/updateIroAction.js';
+import NotesDisplay from '../../logistics/note/NotesDisplay.js';
+import NoteTakingComponent from '../../logistics/note/NoteTakingComponent.js';
+import { StrapiErrors } from '../../StrapiErrors.js';
+import { SubmitButton } from '../../SubmitButton.js';
+import Alert from '@mui/material/Alert';
+import '@mui/material/Dialog';
+import '@mui/material/DialogActions';
+import '@mui/material/DialogContent';
+import '@mui/material/DialogTitle';
+import Typography from '@mui/material/Typography';
+import '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Divider from '@mui/material/Divider';
+import 'next/headers';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+};
+function ManageIROForm({ data, sx, revalidateCallback, handleClose, role, }) {
+    // TODO bind to id of IRO
+    const [formState, formAction] = useFormState(updateIroAction, INITIAL_STATE);
+    const [items, setItems] = useState(data.iro_items.data ? data.iro_items.data : []);
+    const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
+    const parseItems = (items) => {
+        return items.map((item) => {
+            return {
+                id: item.id,
+                received_quantity: item.received_quantity,
+                registered_quantity: item.registered_quantity,
+                released_quantity: item.released_quantity,
+            };
+        });
+    };
+    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: 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.return_number })] }), jsx(Stack, { direction: "row", spacing: 2, children: jsx(Typography, { variant: "body1", width: "250px", children: "Custom reference" }) }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Order Date" }), jsx(Typography, { variant: "body2", children: data.return_date })] }), jsx(Stack, { direction: "row", spacing: 2, children: jsx(Typography, { variant: "body1", width: "250px", children: "Supplier" }) }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Order Status" }), jsx(Typography, { variant: "body2", width: "250px", children: data.status })] })] }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Documents" }), jsx(Paper, { sx: { p: 2 }, children: jsx(Stack, { spacing: 1, children: role === "enduser" && (jsx(Fragment, {})) }) })] }) }), data?.notes?.data?.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.data }), jsx(Divider, {})] }) })), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "h5", children: "Items" }), jsx(Divider, {}), jsxs("form", { action: formAction, children: [jsx("input", { name: "id", type: "hidden", value: data.id }), data?.iro_items?.data &&
+                                        data.iro_items.data.map((item, index) => {
+                                            console.log("item", item);
+                                            return (jsx(Paper, { sx: { p: 2, mb: 2 } }, index));
+                                        }), jsx(Paper, { sx: { p: 2 }, children: jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "end", children: [jsx(SubmitButton, { text: "Update items", loadingText: "Loading..." }), jsx(StrapiErrors, { error: formState?.strapiErrors }), formState?.message && (jsx(Alert, { severity: "error", children: formState?.message }))] }) }), jsx("input", { type: "hidden", name: "items", value: JSON.stringify(parseItems(items)) })] })] }) })] }) }));
+}
+
+export { ManageIROForm as default };