fix

1 files changed, 126 insertions, 0 deletions

diff --git a/src/lib/invoice/components/Invoice.jsx b/src/lib/invoice/components/Invoice.jsx
new file mode 100644
index 00000000..de6eacca
--- /dev/null
+++ b/src/lib/invoice/components/Invoice.jsx
@@ -0,0 +1,126 @@
+import Spinner from "@/core/components/elements/Spinner/Spinner"
+import useInvoice from "../hooks/useInvoice"
+import { downloadInvoice, downloadTaxInvoice } from "../utils/invoices"
+import Divider from "@/core/components/elements/Divider/Divider"
+import VariantGroupCard from "@/lib/variant/components/VariantGroupCard"
+import currencyFormat from "@/core/utils/currencyFormat"
+
+const Invoice = ({ id }) => {
+  const { invoice } = useInvoice({ id })
+
+  if (invoice.isLoading) {
+    return (
+      <div className="flex justify-center my-4">
+        <Spinner className="w-6 text-gray_r-12/50 fill-gray_r-12" />
+      </div>
+    )
+  }
+
+  const address = invoice.data?.customer
+  let fullAddress = []
+  if (address?.street) fullAddress.push(address.street)
+  if (address?.subDistrict?.name) fullAddress.push(address.subDistrict.name)
+  if (address?.district?.name) fullAddress.push(address.district.name)
+  if (address?.city?.name) fullAddress.push(address.city.name)
+  fullAddress = fullAddress.join(', ')
+
+  return invoice.data?.name && (
+    <>
+      <div className="flex flex-col gap-y-4 p-4">
+        <DescriptionRow label="No Invoice">
+          { invoice.data?.name }
+        </DescriptionRow>
+        <DescriptionRow label="Status Transaksi">
+          { invoice.data?.amountResidual > 0 ? (
+            <span className="badge-solid-red">Belum Lunas</span>
+            ) : (
+            <span className="badge-solid-green">Lunas</span>
+          ) }
+        </DescriptionRow>
+        <DescriptionRow label="Purchase Order">
+          { invoice.data?.purchaseOrderName || '-' }
+        </DescriptionRow>
+        <DescriptionRow label="Ketentuan Pembayaran">
+          { invoice.data?.paymentTerm }
+        </DescriptionRow>
+        { invoice.data?.amountResidual > 0 && invoice.invoiceDate != invoice.invoiceDateDue && (
+          <DescriptionRow label="Tanggal Jatuh Tempo">
+            { invoice.data?.invoiceDateDue }
+          </DescriptionRow>
+        ) }
+        <DescriptionRow label="Nama Sales">
+          { invoice.data?.sales }
+        </DescriptionRow>
+        <DescriptionRow label="Tanggal Invoice">
+          { invoice.data?.invoiceDate }
+        </DescriptionRow>
+        <div className="flex items-center">
+          <p className="text-gray_r-11 leading-none">Faktur Pembelian</p>
+          <button 
+            type="button"
+            className="btn-light py-1.5 px-3 ml-auto"
+            onClick={() => downloadInvoice(invoice.data)}
+          >
+            Download
+          </button>
+        </div>
+        <div className="flex items-center">
+          <p className="text-gray_r-11 leading-none">Faktur Pajak</p>
+          <button 
+            type="button"
+            className="btn-light py-1.5 px-3 ml-auto"
+            onClick={() => downloadTaxInvoice(invoice.data)}
+            disabled={!invoice.data?.efaktur}
+          >
+            Download
+          </button>
+        </div>
+      </div>
+
+      <Divider />
+
+      <div className="p-4 font-medium">
+        Detail Penagihan
+      </div>
+      
+      <div className="flex flex-col gap-y-4 p-4 border-t border-gray_r-6">
+        <DescriptionRow label="Nama">
+          { address?.name }
+        </DescriptionRow>
+        <DescriptionRow label="Email">
+          { address?.email || '-' }
+        </DescriptionRow>
+        <DescriptionRow label="No Telepon">
+          { address?.mobile || '-' }
+        </DescriptionRow>
+        <DescriptionRow label="Alamat">
+          { fullAddress }
+        </DescriptionRow>
+      </div>
+
+      <Divider />
+
+      <div className="font-medium p-4">Detail Produk</div>
+
+      <div className="p-4 pt-0 flex flex-col gap-y-3">
+        <VariantGroupCard 
+          variants={invoice.data?.products} 
+          buyMore 
+        />
+        <div className="flex justify-between mt-3 font-medium">
+          <p>Total Belanja</p>
+          <p>{ currencyFormat(invoice.data?.amountTotal) }</p>
+        </div>
+      </div>
+    </>
+  )
+}
+
+const DescriptionRow = ({ children, label }) => (
+  <div className="grid grid-cols-2">
+    <span className="text-gray_r-11">{ label }</span>
+    <span className="text-right">{ children }</span>
+  </div>
+)
+
+export default Invoice
\ No newline at end of file