diff options
Diffstat (limited to 'src/lib/invoice/components/Invoices.jsx')
| -rw-r--r-- | src/lib/invoice/components/Invoices.jsx | 175 |
1 files changed, 88 insertions, 87 deletions
diff --git a/src/lib/invoice/components/Invoices.jsx b/src/lib/invoice/components/Invoices.jsx index 37944e33..81521785 100644 --- a/src/lib/invoice/components/Invoices.jsx +++ b/src/lib/invoice/components/Invoices.jsx @@ -1,23 +1,25 @@ -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" +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 { q = '', page = 1 } = router.query const limit = 10 @@ -28,8 +30,8 @@ const Invoices = () => { } const { invoices } = useInvoices({ query }) - const [ inputQuery, setInputQuery ] = useState(q) - const [ toOthers, setToOthers ] = useState(null) + const [inputQuery, setInputQuery] = useState(q) + const [toOthers, setToOthers] = useState(null) const pageCount = Math.ceil(invoices?.data?.saleOrderTotal / limit) let pageQuery = _.omit(query, ['limit', 'offset']) @@ -39,112 +41,111 @@ const Invoices = () => { 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 Invoice..." + <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 Invoice...' value={inputQuery} onChange={(e) => setInputQuery(e.target.value)} /> - <button - className="btn-light bg-transparent px-3" - type="submit" - > - <MagnifyingGlassIcon className="w-6" /> + <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" /> + {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"> + {!invoices.isLoading && invoices.data?.invoices?.length === 0 && ( + <Alert type='info' className='text-center'> Tidak ada data invoice </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"> + {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> + <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 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 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"> + <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> + <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 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" /> + {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" /> + ) : ( + <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)} + currentPage={parseInt(page)} url={`/my/invoices${pageQuery}`} - className="mt-2 mb-2" + 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) }} + <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" + <button + className='text-left disabled:opacity-60' disabled={!toOthers?.efaktur} - onClick={() => { downloadTaxInvoice(toOthers); setToOthers(null) }} + onClick={() => { + downloadTaxInvoice(toOthers) + setToOthers(null) + }} > Download Faktur Pajak </button> @@ -154,4 +155,4 @@ const Invoices = () => { ) } -export default Invoices
\ No newline at end of file +export default Invoices |