diff options
Diffstat (limited to 'src/lib/invoice/components/Invoice.jsx')
| -rw-r--r-- | src/lib/invoice/components/Invoice.jsx | 126 |
1 files changed, 126 insertions, 0 deletions
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 |