diff options
Diffstat (limited to 'src/lib/invoice/components/Invoice.jsx')
| -rw-r--r-- | src/lib/invoice/components/Invoice.jsx | 292 |
1 files changed, 234 insertions, 58 deletions
diff --git a/src/lib/invoice/components/Invoice.jsx b/src/lib/invoice/components/Invoice.jsx index e34ad8c2..355f36e5 100644 --- a/src/lib/invoice/components/Invoice.jsx +++ b/src/lib/invoice/components/Invoice.jsx @@ -4,10 +4,34 @@ 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 MobileView from '@/core/components/views/MobileView' +import DesktopView from '@/core/components/views/DesktopView' +import Menu from '@/lib/auth/components/Menu' +import Link from '@/core/components/elements/Link/Link' +import Image from '@/core/components/elements/Image/Image' +import { createSlug } from '@/core/utils/slug' +import { useEffect, useState } from 'react' const Invoice = ({ id }) => { const { invoice } = useInvoice({ id }) + const [totalAmount, setTotalAmount] = useState(0) + const [totalDiscountAmount, setTotalDiscountAmount] = useState(0) + + useEffect(() => { + if (invoice?.data?.products) { + let calculateTotalAmount = 0 + let calculateTotalDiscountAmount = 0 + invoice.data.products.forEach((product) => { + calculateTotalAmount += product.price.price * product.quantity + calculateTotalDiscountAmount += + (product.price.price - product.price.priceDiscount) * product.quantity + }) + setTotalAmount(calculateTotalAmount) + setTotalDiscountAmount(calculateTotalDiscountAmount) + } + }, [invoice]) + if (invoice.isLoading) { return ( <div className='flex justify-center my-6'> @@ -27,74 +51,226 @@ const Invoice = ({ id }) => { 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} + <MobileView> + <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> - )} - <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> + {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 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> + + <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> - <Divider /> + <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> + </MobileView> + + <DesktopView> + <div className='container mx-auto flex py-10'> + <div className='w-3/12 pr-4'> + <Menu /> + </div> + <div className='w-9/12 p-4 bg-white border border-gray_r-6 rounded'> + <h1 className='text-title-sm font-semibold mb-6'>Invoice & Faktur Pajak</h1> + + <div className='flex items-center gap-x-2 mb-3'> + <span className='text-h-sm font-medium'>{invoice?.data?.name}</span> + {invoice?.data?.amountResidual > 0 ? ( + <div className='badge-solid-red h-fit'>Belum Lunas</div> + ) : ( + <div className='badge-solid-green h-fit'>Lunas</div> + )} + </div> + + <button + type='button' + className='btn-solid-red px-3 py-2' + onClick={() => downloadInvoice(invoice.data)} + > + Download + </button> + + <div className='grid grid-cols-2 gap-x-6 mt-6'> + <div className='h-fit grid grid-cols-2 gap-y-4'> + <div>Tanggal Invoice</div> + <div>: {invoice?.data?.invoiceDate}</div> + + <div>Purchase Order</div> + <div> + :{' '} + <button + type='button' + className='inline-block text-red_r-11' + onClick={() => downloadInvoice(invoice.data)} + > + Download + </button> + </div> + + <div>Ketentuan Pembayaran</div> + <div>: {invoice?.data?.paymentTerm}</div> + </div> + <div className='h-fit grid grid-cols-2 gap-y-4'> + <div>Nama Sales</div> + <div>: {invoice?.data?.sales}</div> + + <div>Faktur Pajak</div> + <div> + :{' '} + {invoice.data?.efaktur ? ( + <button + type='button' + className='inline-block text-red_r-11' + onClick={() => downloadTaxInvoice(invoice?.data)} + > + Download + </button> + ) : ( + '-' + )} + </div> + </div> + </div> - <div className='p-4 font-medium'>Detail Penagihan</div> + <div className='text-h-sm font-semibold mt-6 mb-4'>Rincian Pembelian</div> + <table className='table-data'> + <thead> + <tr> + <th>Nama Produk</th> + <th>Jumlah</th> + <th>Harga</th> + <th>Diskon</th> + <th>Subtotal</th> + </tr> + </thead> + <tbody> + {invoice?.data?.products?.map((product) => ( + <tr key={product.id}> + <td className='flex'> + <Link + href={createSlug( + '/shop/product/', + product?.parent.name, + product?.parent.id + )} + className='w-[30%] flex-shrink-0' + > + <Image + src={product?.parent?.image} + alt={product?.name} + className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md' + /> + </Link> + <div className='px-2 text-left'> + <Link + href={createSlug( + '/shop/product/', + product?.parent.name, + product?.parent.id + )} + className='line-clamp-2 leading-6 !text-gray_r-12 font-normal' + > + {product?.parent?.name} + </Link> + <div className='text-gray_r-11 mt-2'> + {product?.code}{' '} + {product?.attributes.length > 0 + ? `| ${product?.attributes.join(', ')}` + : ''} + </div> + </div> + </td> + <td>{product.quantity}</td> + <td>{currencyFormat(product.price.price)}</td> + <td> + {product.price.discountPercentage > 0 + ? `${product.price.discountPercentage}%` + : ''} + </td> + <td>{currencyFormat(product.price.priceDiscount * product.quantity)}</td> + </tr> + ))} + </tbody> + </table> - <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='flex justify-end mt-4'> + <div className='w-1/4 grid grid-cols-2 gap-y-2 text-gray_r-12/80'> + <div className='text-right'>Subtotal</div> + <div className='text-right font-medium'>{currencyFormat(totalAmount)}</div> - <Divider /> + <div className='text-right'>Total Diskon</div> + <div className='text-right font-medium'> + {currencyFormat(-totalDiscountAmount)} + </div> - <div className='font-medium p-4'>Detail Produk</div> + <div className='text-right'>PPN 11% (Incl.)</div> + <div className='text-right font-medium'>{currencyFormat(totalAmount * 0.11)}</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='text-right'>Grand Total</div> + <div className='text-right font-medium text-gray_r-12'> + {currencyFormat(invoice.data?.amountTotal)} + </div> + </div> + </div> + </div> </div> - </div> + </DesktopView> </> ) ) |