umwd-components 0.1.716 → 0.1.718

package/src/components/e-commerce/invoice/InvoicePDF.tsx

@@ -1,916 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-
-import {
-  Font,
-  Page,
-  Text,
-  Image,
-  View,
-  Document,
-  Svg,
-  StyleSheet,
-} from "@react-pdf/renderer";
-import React, { Fragment, useState } from "react";
-// import { lightThemeOptions } from "styles/themes.js";
-// import { useMediaQuery } from "@mui/material";
-// import logo_white_square from "public/logo_white_square.png";
-// import roboto from "public/Roboto-Regular.ttf";
-// import robotoBold from "public/Roboto-Bold.ttf";
-// import robotoItalic from "public/Roboto-Italic.ttf";
-// should import this in a different manner
-import { Invoice } from "../../../types/e-commerce/invoice/types";
-
-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 CircularProgress from "@mui/material/CircularProgress";
-
-import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
-
-import { PDFDownloadLink, PDFViewer } from "@react-pdf/renderer";
-
-// 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 }: { props: { invoice: Invoice } }) {
-  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 (
-      <Document title={`credit_${invoice?.invoice_number}`}>
-        <Page size="A4" style={styles.page}>
-          <View style={styles.header}>
-            <Text style={styles.h1}>
-              {seller_business_credentials?.company_name}
-            </Text>
-          </View>
-
-          {/* Credit Note */}
-          <View style={styles.section}>
-            <Text style={styles.h2}>CREDIT NOTE</Text>
-          </View>
-
-          {/* Customer Details*/}
-          <View style={styles.section}>
-            <View style={styles.row}>
-              <View style={styles.rowSection}>
-                <Text style={styles.h3}>BILLING DETAILS</Text>
-                <Text>{buyer_business_credentials?.company_name}</Text>
-                <Text>
-                  {invoice?.buyer_first_name} {invoice?.buyer_last_name}
-                </Text>
-                <Text>
-                  {buyer_company_address?.street}{" "}
-                  {buyer_company_address?.street_number}{" "}
-                  {buyer_company_address?.street_number_addition}
-                </Text>
-                <Text>
-                  {buyer_company_address?.postal_code}{" "}
-                  {buyer_company_address?.city}
-                </Text>
-              </View>
-              <View style={styles.rowSection}>
-                <Text style={styles.h3}>FROM</Text>
-                <Text>{seller_business_credentials?.company_name}</Text>
-                <Text>
-                  {seller_company_address?.street}{" "}
-                  {seller_company_address?.street_number}{" "}
-                  {seller_company_address?.street_number_addition}
-                </Text>
-                <Text>
-                  {seller_company_address?.postal_code}{" "}
-                  {seller_company_address?.city}
-                </Text>
-                <Text style={{ fontWeight: "bold", marginTop: 10 }}>
-                  CoC Number
-                </Text>
-                <Text>{seller_business_credentials?.coc_number}</Text>
-                <Text style={{ fontWeight: "bold", marginTop: 10 }}>
-                  VAT Number
-                </Text>
-                <Text>{seller_business_credentials?.vat_number}</Text>
-              </View>
-            </View>
-          </View>
-
-          {/* Rest of the document structure follows the same as regular invoice */}
-          <View style={styles.section}>
-            <View style={styles.row}>
-              <View style={styles.rowSection}>
-                <Text style={{ fontWeight: "bold" }}>Invoice number: </Text>
-
-                <Text>{invoice?.invoice_number}</Text>
-              </View>
-              {invoice?.customer_reference && (
-                <View style={styles.rowSection}>
-                  <Text style={{ fontWeight: "bold" }}>Your reference: </Text>
-
-                  <Text>{invoice?.customer_reference}</Text>
-                </View>
-              )}
-              <View style={styles.rowSection}>
-                <Text style={{ fontWeight: "bold" }}>Invoice date</Text>
-                <Text>{invoice?.invoice_date}</Text>
-              </View>
-            </View>
-          </View>
-          {/* Invoice resume, products and price calculation */}
-          <View style={styles.section}>
-            <Text style={styles.h3}>SUMMARY</Text>
-            <View style={styles.row}>
-              {invoice?.admin_items?.length > 0 && (
-                <View style={styles.productRowSection}>
-                  <Text style={{ fontSize: "10px", fontWeight: "bold" }}>
-                    Line Item Number
-                  </Text>
-                </View>
-              )}
-              <View style={styles.productRowSection}>
-                <Text style={{ fontSize: "10px", fontWeight: "bold" }}>
-                  Title
-                </Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontSize: "10px", fontWeight: "bold" }}>
-                  Amount
-                </Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontSize: "10px", fontWeight: "bold" }}>
-                  VAT rate
-                </Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontSize: "10px", fontWeight: "bold" }}>
-                  VAT
-                </Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontSize: "10px", fontWeight: "bold" }}>
-                  Excl. VAT
-                </Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontSize: "10px", fontWeight: "bold" }}>
-                  Incl. VAT
-                </Text>
-              </View>
-            </View>
-            {invoice?.items?.map((item, index) => {
-              return (
-                <Fragment key={index}>
-                  <View style={styles.row}>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        {"product_title" in item && item.product_title}
-                        {"item_description" in item && item.item_description}
-                      </Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>{item.quantity}</Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        {item.vat_rate} %
-                      </Text>{" "}
-                      {/* should be integer */}
-                    </View>
-                    <View style={styles.productRowSection}>
-                      {item.price_excl_vat && item.price_incl_vat && (
-                        <Text style={{ fontSize: "10px" }}>
-                          €{" "}
-                          {(item.price_incl_vat - item.price_excl_vat)?.toFixed(
-                            2
-                          )}
-                        </Text>
-                      )}
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        € {item.price_excl_vat?.toFixed(2)}
-                      </Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        € {item.price_incl_vat?.toFixed(2)}
-                      </Text>
-                    </View>
-                  </View>
-                </Fragment>
-              );
-            })}
-            {invoice?.admin_items?.map((item, index) => {
-              return (
-                <Fragment key={index}>
-                  <View style={styles.row}>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        {item.line_item_number}
-                      </Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        {item.description}
-                      </Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>{item.quantity}</Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        {item?.price?.vat_rate} %
-                      </Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        € {item?.price?.vat?.toFixed(2)}
-                      </Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        € {item?.price?.price?.toFixed(2)}
-                      </Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        € {item?.price?.price_incl_vat?.toFixed(2)}
-                      </Text>
-                    </View>
-                  </View>
-                </Fragment>
-              );
-            })}
-          </View>
-          {/* Totals */}
-          <View style={styles.section}>
-            <Text style={styles.h3}>TOTALS</Text>
-            <View style={styles.row}>
-              <View style={styles.productRowSection}></View>
-              <View style={styles.productRowSection}></View>
-              <View style={styles.productRowSection}></View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontWeight: "bold" }}>VAT</Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontWeight: "bold" }}>Excl. VAT</Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontWeight: "bold" }}>Incl. VAT</Text>
-              </View>
-            </View>
-            <View style={styles.row}>
-              <View style={styles.productRowSection}></View>
-              <View style={styles.productRowSection}></View>
-              <View style={styles.productRowSection}></View>
-              <View style={styles.productRowSection}>
-                <Text>€ {invoice?.VAT_total?.toFixed(2)}</Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text>€ {invoice?.total_excl_vat?.toFixed(2)}</Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text>€ {invoice?.total_incl_vat?.toFixed(2)}</Text>
-              </View>
-            </View>
-          </View>
-          <View style={styles.section}>
-            <Text
-              style={{ ...styles.h3, border: "2px solid black", padding: 10 }}
-            >
-              Total: € {invoice?.total_incl_vat?.toFixed(2)}
-            </Text>
-          </View>
-
-          {/* Company disclaimer */}
-        </Page>
-      </Document>
-    );
-  }
-
-  if (type === "proforma") {
-    return (
-      <Document title={`proforma_${invoice?.invoice_number}`}>
-        <Page size="A4" style={styles.page}>
-          <View style={styles.header}>
-            <Text style={styles.h1}>
-              {seller_business_credentials?.company_name}
-            </Text>
-          </View>
-
-          {/* Proforma Invoice */}
-          <View style={styles.section}>
-            <Text style={styles.h2}>PROFORMA INVOICE</Text>
-            <Text style={{ fontSize: 10, marginTop: 5 }}>
-              This is not a final invoice and cannot be used for tax purposes
-            </Text>
-          </View>
-
-          {/* Customer Details*/}
-          <View style={styles.section}>
-            <View style={styles.row}>
-              <View style={styles.rowSection}>
-                <Text style={styles.h3}>BILLING DETAILS</Text>
-                <Text>{buyer_business_credentials?.company_name}</Text>
-                <Text>
-                  {invoice?.buyer_first_name} {invoice?.buyer_last_name}
-                </Text>
-                <Text>
-                  {buyer_company_address?.street}{" "}
-                  {buyer_company_address?.street_number}{" "}
-                  {buyer_company_address?.street_number_addition}
-                </Text>
-                <Text>
-                  {buyer_company_address?.postal_code}{" "}
-                  {buyer_company_address?.city}
-                </Text>
-              </View>
-              <View style={styles.rowSection}>
-                <Text style={styles.h3}>FROM</Text>
-                <Text>{seller_business_credentials?.company_name}</Text>
-                <Text>
-                  {seller_company_address?.street}{" "}
-                  {seller_company_address?.street_number}{" "}
-                  {seller_company_address?.street_number_addition}
-                </Text>
-                <Text>
-                  {seller_company_address?.postal_code}{" "}
-                  {seller_company_address?.city}
-                </Text>
-                <Text style={{ fontWeight: "bold", marginTop: 10 }}>
-                  CoC Number
-                </Text>
-                <Text>{seller_business_credentials?.coc_number}</Text>
-                <Text style={{ fontWeight: "bold", marginTop: 10 }}>
-                  VAT Number
-                </Text>
-                <Text>{seller_business_credentials?.vat_number}</Text>
-              </View>
-            </View>
-          </View>
-
-          {/* Rest of the document structure follows the same as regular invoice */}
-          <View style={styles.section}>
-            <View style={styles.row}>
-              <View style={styles.rowSection}>
-                <Text style={{ fontWeight: "bold" }}>Invoice number: </Text>
-
-                <Text>{invoice?.invoice_number}</Text>
-              </View>
-              {invoice?.customer_reference && (
-                <View style={styles.rowSection}>
-                  <Text style={{ fontWeight: "bold" }}>Your reference: </Text>
-
-                  <Text>{invoice?.customer_reference}</Text>
-                </View>
-              )}
-              <View style={styles.rowSection}>
-                <Text style={{ fontWeight: "bold" }}>Invoice date</Text>
-                <Text>{invoice?.invoice_date}</Text>
-              </View>
-            </View>
-          </View>
-          {/* Invoice resume, products and price calculation */}
-          <View style={styles.section}>
-            <Text style={styles.h3}>SUMMARY</Text>
-            <View style={styles.row}>
-              {invoice?.admin_items?.length > 0 && (
-                <View style={styles.productRowSection}>
-                  <Text style={{ fontSize: "10px", fontWeight: "bold" }}>
-                    Line Item Number
-                  </Text>
-                </View>
-              )}
-              <View style={styles.productRowSection}>
-                <Text style={{ fontSize: "10px", fontWeight: "bold" }}>
-                  Title
-                </Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontSize: "10px", fontWeight: "bold" }}>
-                  Amount
-                </Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontSize: "10px", fontWeight: "bold" }}>
-                  VAT rate
-                </Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontSize: "10px", fontWeight: "bold" }}>
-                  VAT
-                </Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontSize: "10px", fontWeight: "bold" }}>
-                  Excl. VAT
-                </Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontSize: "10px", fontWeight: "bold" }}>
-                  Incl. VAT
-                </Text>
-              </View>
-            </View>
-            {invoice?.items?.map((item, index) => {
-              return (
-                <Fragment key={index}>
-                  <View style={styles.row}>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        {"product_title" in item && item.product_title}
-                        {"item_description" in item && item.item_description}
-                      </Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>{item.quantity}</Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        {item.vat_rate} %
-                      </Text>{" "}
-                      {/* should be integer */}
-                    </View>
-                    <View style={styles.productRowSection}>
-                      {item.price_excl_vat && item.price_incl_vat && (
-                        <Text style={{ fontSize: "10px" }}>
-                          €{" "}
-                          {(item.price_incl_vat - item.price_excl_vat)?.toFixed(
-                            2
-                          )}
-                        </Text>
-                      )}
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        € {item.price_excl_vat?.toFixed(2)}
-                      </Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        € {item.price_incl_vat?.toFixed(2)}
-                      </Text>
-                    </View>
-                  </View>
-                </Fragment>
-              );
-            })}
-            {invoice?.admin_items?.map((item, index) => {
-              return (
-                <Fragment key={index}>
-                  <View style={styles.row}>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        {item.line_item_number}
-                      </Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        {item.description}
-                      </Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>{item.quantity}</Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        {item?.price?.vat_rate} %
-                      </Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        € {item?.price?.vat?.toFixed(2)}
-                      </Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        € {item?.price?.price?.toFixed(2)}
-                      </Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        € {item?.price?.price_incl_vat?.toFixed(2)}
-                      </Text>
-                    </View>
-                  </View>
-                </Fragment>
-              );
-            })}
-          </View>
-          {/* Totals */}
-          <View style={styles.section}>
-            <Text style={styles.h3}>TOTALS</Text>
-            <View style={styles.row}>
-              <View style={styles.productRowSection}></View>
-              <View style={styles.productRowSection}></View>
-              <View style={styles.productRowSection}></View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontWeight: "bold" }}>VAT</Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontWeight: "bold" }}>Excl. VAT</Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontWeight: "bold" }}>Incl. VAT</Text>
-              </View>
-            </View>
-            <View style={styles.row}>
-              <View style={styles.productRowSection}></View>
-              <View style={styles.productRowSection}></View>
-              <View style={styles.productRowSection}></View>
-              <View style={styles.productRowSection}>
-                <Text>€ {invoice?.VAT_total?.toFixed(2)}</Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text>€ {invoice?.total_excl_vat?.toFixed(2)}</Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text>€ {invoice?.total_incl_vat?.toFixed(2)}</Text>
-              </View>
-            </View>
-          </View>
-          <View style={styles.section}>
-            <Text
-              style={{ ...styles.h3, border: "2px solid black", padding: 10 }}
-            >
-              Total Due: € {invoice?.total_incl_vat?.toFixed(2)}
-            </Text>
-          </View>
-
-          {/* Company disclaimer */}
-        </Page>
-      </Document>
-    );
-  } else {
-    return (
-      <Document title={`invoice_${invoice?.invoice_number}`}>
-        <Page size="A4" style={styles.page}>
-          <View style={styles.header}>
-            {/* <Image style={styles.logo} src={logo_white_square.src} /> */}
-            <Text style={styles.h1}>
-              {seller_business_credentials?.company_name}
-            </Text>
-          </View>
-
-          {/* Invoice */}
-          <View style={styles.section}>
-            <Text style={styles.h2}>INVOICE</Text>
-          </View>
-          {/* Customer Details*/}
-          <View style={styles.section}>
-            <View style={styles.row}>
-              <View style={styles.rowSection}>
-                <Text style={styles.h3}>BILLING DETAILS</Text>
-                <Text>{buyer_business_credentials?.company_name}</Text>
-                <Text>
-                  {invoice?.buyer_first_name} {invoice?.buyer_last_name}
-                </Text>
-                <Text>
-                  {buyer_company_address?.street}{" "}
-                  {buyer_company_address?.street_number}{" "}
-                  {buyer_company_address?.street_number_addition}
-                </Text>
-                <Text>
-                  {buyer_company_address?.postal_code}{" "}
-                  {buyer_company_address?.city}
-                </Text>
-                {/* <Text>{invoice?.user_country}</Text> */}
-              </View>
-              {/* Company Details */}
-              <View style={styles.rowSection}>
-                <Text style={styles.h3}>FROM</Text>
-                <Text>{seller_business_credentials?.company_name}</Text>
-                <Text>
-                  {seller_company_address?.street}{" "}
-                  {seller_company_address?.street_number}{" "}
-                  {seller_company_address?.street_number_addition}
-                </Text>
-                <Text>
-                  {seller_company_address?.postal_code}{" "}
-                  {seller_company_address?.city}
-                </Text>
-                {/* <Text>{invoice?.company_country}</Text> */}
-                <Text style={{ fontWeight: "bold", marginTop: 10 }}>
-                  CoC Number
-                </Text>
-                <Text>{seller_business_credentials?.coc_number}</Text>
-                <Text style={{ fontWeight: "bold", marginTop: 10 }}>
-                  VAT Number
-                </Text>
-                <Text>{seller_business_credentials?.vat_number}</Text>
-              </View>
-            </View>
-          </View>
-          {/* Invoice number and date */}
-          <View style={styles.section}>
-            <View style={styles.row}>
-              <View style={styles.rowSection}>
-                <Text style={{ fontWeight: "bold" }}>Invoice number: </Text>
-
-                <Text>{invoice?.invoice_number}</Text>
-              </View>
-              {invoice?.customer_reference && (
-                <View style={styles.rowSection}>
-                  <Text style={{ fontWeight: "bold" }}>Your reference: </Text>
-
-                  <Text>{invoice?.customer_reference}</Text>
-                </View>
-              )}
-              <View style={styles.rowSection}>
-                <Text style={{ fontWeight: "bold" }}>Invoice date</Text>
-                <Text>{invoice?.invoice_date}</Text>
-              </View>
-            </View>
-          </View>
-          {/* Invoice resume, products and price calculation */}
-          <View style={styles.section}>
-            <Text style={styles.h3}>SUMMARY</Text>
-            <View style={styles.row}>
-              {invoice?.admin_items?.length > 0 && (
-                <View style={styles.productRowSection}>
-                  <Text style={{ fontSize: "10px", fontWeight: "bold" }}>
-                    Line Item Number
-                  </Text>
-                </View>
-              )}
-              <View style={styles.productRowSection}>
-                <Text style={{ fontSize: "10px", fontWeight: "bold" }}>
-                  Title
-                </Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontSize: "10px", fontWeight: "bold" }}>
-                  Amount
-                </Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontSize: "10px", fontWeight: "bold" }}>
-                  VAT rate
-                </Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontSize: "10px", fontWeight: "bold" }}>
-                  VAT
-                </Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontSize: "10px", fontWeight: "bold" }}>
-                  Excl. VAT
-                </Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontSize: "10px", fontWeight: "bold" }}>
-                  Incl. VAT
-                </Text>
-              </View>
-            </View>
-            {invoice?.items?.map((item, index) => {
-              return (
-                <Fragment key={index}>
-                  <View style={styles.row}>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        {"product_title" in item && item.product_title}
-                        {"item_description" in item && item.item_description}
-                      </Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>{item.quantity}</Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        {item.vat_rate} %
-                      </Text>{" "}
-                      {/* should be integer */}
-                    </View>
-                    <View style={styles.productRowSection}>
-                      {item.price_excl_vat && item.price_incl_vat && (
-                        <Text style={{ fontSize: "10px" }}>
-                          €{" "}
-                          {(item.price_incl_vat - item.price_excl_vat)?.toFixed(
-                            2
-                          )}
-                        </Text>
-                      )}
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        € {item.price_excl_vat?.toFixed(2)}
-                      </Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        € {item.price_incl_vat?.toFixed(2)}
-                      </Text>
-                    </View>
-                  </View>
-                </Fragment>
-              );
-            })}
-            {invoice?.admin_items?.map((item, index) => {
-              return (
-                <Fragment key={index}>
-                  <View style={styles.row}>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        {item.line_item_number}
-                      </Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        {item.description}
-                      </Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>{item.quantity}</Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        {item?.price?.vat_rate} %
-                      </Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        € {item?.price?.vat?.toFixed(2)}
-                      </Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        € {item?.price?.price?.toFixed(2)}
-                      </Text>
-                    </View>
-                    <View style={styles.productRowSection}>
-                      <Text style={{ fontSize: "10px" }}>
-                        € {item?.price?.price_incl_vat?.toFixed(2)}
-                      </Text>
-                    </View>
-                  </View>
-                </Fragment>
-              );
-            })}
-          </View>
-          {/* Totals */}
-          <View style={styles.section}>
-            <Text style={styles.h3}>TOTALS</Text>
-            <View style={styles.row}>
-              <View style={styles.productRowSection}></View>
-              <View style={styles.productRowSection}></View>
-              <View style={styles.productRowSection}></View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontWeight: "bold" }}>VAT</Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontWeight: "bold" }}>Excl. VAT</Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text style={{ fontWeight: "bold" }}>Incl. VAT</Text>
-              </View>
-            </View>
-            <View style={styles.row}>
-              <View style={styles.productRowSection}></View>
-              <View style={styles.productRowSection}></View>
-              <View style={styles.productRowSection}></View>
-              <View style={styles.productRowSection}>
-                <Text>€ {invoice?.VAT_total?.toFixed(2)}</Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text>€ {invoice?.total_excl_vat?.toFixed(2)}</Text>
-              </View>
-              <View style={styles.productRowSection}>
-                <Text>€ {invoice?.total_incl_vat?.toFixed(2)}</Text>
-              </View>
-            </View>
-          </View>
-          <View style={styles.section}>
-            <Text
-              style={{ ...styles.h3, border: "2px solid black", padding: 10 }}
-            >
-              Total Due: € {invoice?.total_incl_vat?.toFixed(2)}
-            </Text>
-          </View>
-
-          {/* Company disclaimer */}
-        </Page>
-      </Document>
-    );
-  }
-}
-
-export function InvoiceDownloadLink({ invoice }: { invoice: Invoice }) {
-  /* const PDFDownloadLink = dynamic(
-    () => import("@react-pdf/renderer").then((mod) => mod.PDFDownloadLink),
-    {
-      ssr: false,
-      loading: () => <p>Loading...</p>,
-    }
-  ); */
-
-  return (
-    <PDFDownloadLink
-      document={<InvoicePDF props={{ invoice: invoice }} />}
-      fileName={`invoice_${invoice?.invoice_number}`}
-    >
-      <IconButton>
-        <PictureAsPdfIcon />
-      </IconButton>
-    </PDFDownloadLink>
-  );
-}
-
-export function InvoicePDFViewer({ invoice }: { invoice: Invoice }) {
-  /*  const PDFViewer = dynamic(
-    () => import("@react-pdf/renderer").then((mod) => mod.PDFViewer),
-    {
-      ssr: false,
-      loading: () => <p>Loading...</p>,
-    }
-  ); */
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <IconButton onClick={() => setOpen(true)}>
-        <PictureAsPdfIcon />
-      </IconButton>
-      <Dialog open={open} fullWidth={true} maxWidth={"lg"}>
-        <DialogContent>
-          <PDFViewer
-            style={{
-              width: "100%",
-              minHeight: "70vh",
-            }}
-          >
-            <InvoicePDF props={{ invoice: invoice }} />
-          </PDFViewer>
-        </DialogContent>
-        <DialogActions>
-          <Button variant={"contained"} onClick={() => setOpen(false)}>
-            Close
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </>
-  );
-}