diff options
Diffstat (limited to 'src/pages/my/invoices.js')
| -rw-r--r-- | src/pages/my/invoices.js | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/src/pages/my/invoices.js b/src/pages/my/invoices.js new file mode 100644 index 00000000..e136f4fd --- /dev/null +++ b/src/pages/my/invoices.js @@ -0,0 +1,124 @@ +import WithAuth from "@/components/auth/WithAuth"; +import Alert from "@/components/elements/Alert"; +import Link from "@/components/elements/Link"; +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 { 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 [ activePopupId, setActivePopupId ] = useState(null); + + 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}`); + }; + + 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 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. Transaksi</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-red h-fit ml-auto">Belum Lunas</div> + ) : ( + <div className="badge-green h-fit ml-auto">Lunas</div> + ) } + <EllipsisVerticalIcon className="w-5 h-5" onClick={() => {}} /> + </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">Nomor PO</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> + </div> + )) } + </div> + </Layout> + </WithAuth> + ); +}
\ No newline at end of file |