1 files changed, 110 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..e34ad8c2
--- /dev/null
+++ b/src/lib/invoice/components/Invoice.jsx
@@ -0,0 +1,110 @@
+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-6'>
+        <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'>Invoice</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