Refactor

1 files changed, 180 insertions, 0 deletions

diff --git a/src2/pages/my/invoices.js b/src2/pages/my/invoices.js
new file mode 100644
index 00000000..9b2e77dc
--- /dev/null
+++ b/src2/pages/my/invoices.js
@@ -0,0 +1,180 @@
+import WithAuth from "@/components/auth/WithAuth"
+import Alert from "@/components/elements/Alert"
+import Link from "@/components/elements/Link"
+import Pagination from "@/components/elements/Pagination"
+import AppBar from "@/components/layouts/AppBar"
+import Layout from "@/components/layouts/Layout"
+import apiOdoo from "@/core/utils/apiOdoo"
+import { useAuth } from "@/core/utils/auth"
+import currencyFormat from "@/core/utils/currencyFormat"
+import useBottomPopup from "@/lib/elements/hooks/useBottomPopup"
+import { CheckIcon, ClockIcon, EllipsisVerticalIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"
+import { useRouter } from "next/router"
+import { useEffect, useRef, useState } from "react"
+
+export default function Invoices() {
+  const [ auth ] = useAuth()
+  const router = useRouter()
+  const { 
+    q, 
+    page = 1 
+  } = router.query
+
+  const [ invoices, setInvoices ] = useState([])
+
+  const [ pageCount, setPageCount ] = useState(0)
+  const [ isLoading, setIsLoading ] = useState(true)
+
+  const searchQueryRef = useRef()
+
+  useEffect(() => {
+    const loadInvoices = async () => {
+      if (auth) {
+        const limit = 10
+        let offset = (page - 1) * 10
+        let queryParams = [`limit=${limit}`, `offset=${offset}`]
+        if (q) queryParams.push(`name=${q}`)
+        queryParams = queryParams.join('&')
+        queryParams = queryParams ? '?' + queryParams : ''
+
+        const dataInvoices = await apiOdoo('GET', `/api/v1/partner/${auth.partner_id}/invoice${queryParams}`)
+        setInvoices(dataInvoices)
+        setPageCount(Math.ceil(dataInvoices.sale_order_total / limit))
+        setIsLoading(false)
+      }
+    }
+    loadInvoices()
+  }, [ auth, q, page ])
+
+  const actionSearch = (e) => {
+    e.preventDefault()
+    let queryParams = []
+    if (searchQueryRef.current.value) queryParams.push(`q=${searchQueryRef.current.value}`)
+    queryParams = queryParams.join('&')
+    queryParams = queryParams ? `?${queryParams}` : ''
+    router.push(`/my/invoices${queryParams}`)
+  }
+
+  const downloadInvoice = (data) => {
+    const url = `${process.env.ODOO_HOST}/api/v1/download/invoice/${data.id}/${data.token}`
+    window.open(url, 'download')
+    closePopup()
+  }
+  
+  const downloadTaxInvoice = (data) => {
+    const url = `${process.env.ODOO_HOST}/api/v1/download/tax-invoice/${data.id}/${data.token}`
+    window.open(url, 'download')
+    closePopup()
+  }
+
+  const childrenPopup = (data) => (
+    <div className="flex flex-col gap-y-6">
+      <button 
+        className="text-left disabled:opacity-60"
+        onClick={() => downloadInvoice(data)}
+      >
+        Download Faktur Pembelian
+      </button>
+      <button 
+        className="text-left disabled:opacity-60"
+        disabled={!data?.efaktur}
+        onClick={() => downloadTaxInvoice(data)}
+      >
+        Download Faktur Pajak
+      </button>
+    </div>
+  )
+
+  const {
+    closePopup,
+    openPopup,
+    BottomPopup
+  } = useBottomPopup({
+    title: 'Lainnya',
+    children: childrenPopup
+  })
+
+  return (
+    <WithAuth>
+      <Layout>
+        <AppBar title="Invoice" />
+
+        <form onSubmit={actionSearch} className="p-4 pb-0 flex gap-x-4">
+          <input 
+            type="text" 
+            className="form-input" 
+            placeholder="Cari Transaksi" 
+            ref={searchQueryRef}
+            defaultValue={q}
+          />
+          <button type="submit" className="border border-gray_r-7 rounded px-3">
+            <MagnifyingGlassIcon className="w-5"/>
+          </button>
+        </form>
+
+        <div className="p-4 flex flex-col gap-y-5">
+          { invoices?.invoice_total === 0 && !isLoading && (
+            <Alert type="info" className="text-center">
+              Invoice tidak ditemukan
+            </Alert>
+          ) }
+          { invoices?.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.amount_residual > 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={() => openPopup(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.invoice_date }
+                  </p>
+                  <p className="text-right">
+                    { invoice.payment_term }
+                  </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.purchase_order_name || '-' }</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.amount_total) }</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>
+          )) }
+        </div>
+
+        <div className="pb-6 pt-2">
+          <Pagination currentPage={page} pageCount={pageCount} url={`/my/invoices${q ? `?q=${q}` : ''}`} />
+        </div>
+        { BottomPopup }
+      </Layout>
+    </WithAuth>
+  )
+}
\ No newline at end of file