diff options
Diffstat (limited to 'src/lib/invoice/components/Invoice.jsx')
| -rw-r--r-- | src/lib/invoice/components/Invoice.jsx | 165 |
1 files changed, 73 insertions, 92 deletions
diff --git a/src/lib/invoice/components/Invoice.jsx b/src/lib/invoice/components/Invoice.jsx index aee4a498..eaf7b7e0 100644 --- a/src/lib/invoice/components/Invoice.jsx +++ b/src/lib/invoice/components/Invoice.jsx @@ -1,17 +1,17 @@ -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" +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 className='flex justify-center my-6'> + <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' /> </div> ) } @@ -24,103 +24,84 @@ const Invoice = ({ id }) => { 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> + 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 } + <span className='badge-solid-green'>Lunas</span> + )} </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> + <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> - </div> - <Divider /> + <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> + <div className='p-4 font-medium'>Detail Penagihan</div> - <Divider /> + <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='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 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> - </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 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 +export default Invoice |