From de7361718def0f6bb32294bb074841ba2c0a3ce6 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 21 Feb 2023 16:25:35 +0700
Subject: fix

---
 src/lib/invoice/components/Invoice.jsx  | 126 +++++++++++++++++++++++++
 src/lib/invoice/components/Invoices.jsx | 157 ++++++++++++++++++++++++++++++++
 2 files changed, 283 insertions(+)
 create mode 100644 src/lib/invoice/components/Invoice.jsx
 create mode 100644 src/lib/invoice/components/Invoices.jsx

(limited to 'src/lib/invoice/components')

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
diff --git a/src/lib/invoice/components/Invoices.jsx b/src/lib/invoice/components/Invoices.jsx
new file mode 100644
index 00000000..3b1e71e3
--- /dev/null
+++ b/src/lib/invoice/components/Invoices.jsx
@@ -0,0 +1,157 @@
+import { CheckIcon, ClockIcon, EllipsisVerticalIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"
+import { toQuery } from "lodash-contrib"
+import _ from "lodash"
+import { useRouter } from "next/router"
+import { useState } from "react"
+import useInvoices from "../hooks/useInvoices"
+import Spinner from "@/core/components/elements/Spinner/Spinner"
+import Alert from "@/core/components/elements/Alert/Alert"
+import Pagination from "@/core/components/elements/Pagination/Pagination"
+import Link from "@/core/components/elements/Link/Link"
+import currencyFormat from "@/core/utils/currencyFormat"
+import BottomPopup from "@/core/components/elements/Popup/BottomPopup"
+import { downloadInvoice, downloadTaxInvoice } from "../utils/invoices"
+
+const Invoices = () => {
+  const router = useRouter()
+  const {
+    q = '',
+    page = 1
+  } = router.query
+
+  const limit = 10
+
+  const query = {
+    name: q,
+    offset: (page - 1) * limit,
+    limit
+  }
+  const { invoices } = useInvoices({ query })
+
+  const [ inputQuery, setInputQuery ] = useState(q)
+  const [ toOthers, setToOthers ] = useState(null)
+
+  const pageCount = Math.ceil(invoices?.data?.saleOrderTotal / limit)
+  let pageQuery = _.omit(query, ['limit', 'offset'])
+  pageQuery = _.pickBy(pageQuery, _.identity)
+  pageQuery = toQuery(pageQuery)
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    router.push(`/my/invoices?q=${inputQuery}`)
+  } 
+
+  return (
+    <div className="p-4 flex flex-col gap-y-4">
+      <form className="flex gap-x-3" onSubmit={handleSubmit}>
+        <input 
+          type="text" 
+          className="form-input" 
+          placeholder="Cari Transaksi..."
+          value={inputQuery}
+          onChange={(e) => setInputQuery(e.target.value)}
+        />
+        <button 
+          className="btn-light bg-transparent px-3"
+          type="submit"
+        >
+          <MagnifyingGlassIcon className="w-6" />
+        </button>
+      </form>
+
+      { invoices.isLoading && (
+        <div className="flex justify-center my-4">
+          <Spinner className="w-6 text-gray_r-12/50 fill-gray_r-12" />
+        </div>
+      ) }
+
+      { !invoices.isLoading && invoices.data?.invoices?.length === 0 && (
+        <Alert type="info" className="text-center">
+          Tidak ada data transaksi
+        </Alert>
+      ) }
+
+      { invoices.data?.invoices?.map((invoice, index) => (
+        <div className="p-4 shadow border border-gray_r-3 rounded-md" key={index}>
+          <div className="grid grid-cols-2">
+            <Link href={`/my/invoice/${invoice.id}`}>
+              <span className="text-caption-2 text-gray_r-11">No. Invoice</span>
+              <h2 className="text-red_r-11 mt-1">{ invoice.name }</h2>
+            </Link>
+            <div className="flex gap-x-1 justify-end">
+              { invoice.amountResidual > 0 ? (
+                <div className="badge-solid-red h-fit ml-auto">Belum Lunas</div>
+                ) : (
+                <div className="badge-solid-green h-fit ml-auto">Lunas</div>
+              ) }
+              <EllipsisVerticalIcon className="w-5 h-5" onClick={() => setToOthers(invoice)} />
+            </div>
+          </div>
+          <Link href={`/my/invoice/${invoice.id}`}>
+            <div className="grid grid-cols-2 text-caption-2 text-gray_r-11 mt-2 font-normal">
+              <p>
+                { invoice.invoiceDate }
+              </p>
+              <p className="text-right">
+                { invoice.paymentTerm }
+              </p>
+            </div>
+            <hr className="my-3"/>
+            <div className="grid grid-cols-2">
+              <div>
+                <span className="text-caption-2 text-gray_r-11">No. Purchase Order</span>
+                <p className="mt-1 font-medium text-gray_r-12">{ invoice.purchaseOrderName || '-' }</p>
+              </div>
+              <div className="text-right">
+                <span className="text-caption-2 text-gray_r-11">Total Invoice</span>
+                <p className="mt-1 font-medium text-gray_r-12">{ currencyFormat(invoice.amountTotal) }</p>
+              </div>
+            </div>
+          </Link>
+          { invoice.efaktur ? (
+            <div className="badge-green h-fit mt-3 ml-auto flex items-center gap-x-0.5">
+              <CheckIcon className="w-4 stroke-2" />
+              Faktur Pajak
+            </div>
+            ) : (
+            <div className="badge-red h-fit mt-3 ml-auto flex items-center gap-x-0.5">
+              <ClockIcon className="w-4 stroke-2" />
+              Faktur Pajak
+            </div>
+          ) }
+        </div>
+      )) }
+
+      <Pagination
+        pageCount={pageCount}
+        currentPage={parseInt(page)} 
+        url={`/my/invoices${pageQuery}`}
+        className="mt-2 mb-2"
+      />
+
+      <BottomPopup
+        title="Lainnya"
+        active={toOthers}
+        close={() => setToOthers(null)}
+      >
+        <div className="flex flex-col gap-y-4 mt-2">
+          <button 
+            className="text-left disabled:opacity-60"
+            onClick={() => { downloadInvoice(toOthers); setToOthers(null) }}
+          >
+            Download Invoice
+          </button>
+          <button 
+            className="text-left disabled:opacity-60"
+            disabled={!toOthers?.efaktur}
+            onClick={() => { downloadTaxInvoice(toOthers); setToOthers(null) }}
+          >
+            Download Faktur Pajak
+          </button>
+        </div>
+      </BottomPopup>
+    </div>
+  )
+}
+
+export default Invoices
\ No newline at end of file
-- 
cgit v1.2.3