From bc04e721d51e149709ab3cfaf5e77ef034511860 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Mon, 27 Mar 2023 10:17:49 +0700 Subject: invoice, invoice detail, address, create address, edit address, wishlist --- src/lib/invoice/components/Invoice.jsx | 292 +++++++++++++++++++++++------ src/lib/invoice/components/Invoices.jsx | 313 ++++++++++++++++++++------------ 2 files changed, 426 insertions(+), 179 deletions(-) (limited to 'src/lib/invoice') 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 (
@@ -27,74 +51,226 @@ const Invoice = ({ id }) => { return ( invoice.data?.name && ( <> -
- {invoice.data?.name} - - {invoice.data?.amountResidual > 0 ? ( - Belum Lunas - ) : ( - Lunas - )} - - - {invoice.data?.purchaseOrderName || '-'} - - {invoice.data?.paymentTerm} - {invoice.data?.amountResidual > 0 && invoice.invoiceDate != invoice.invoiceDateDue && ( - - {invoice.data?.invoiceDateDue} + +
+ {invoice.data?.name} + + {invoice.data?.amountResidual > 0 ? ( + Belum Lunas + ) : ( + Lunas + )} + + + {invoice.data?.purchaseOrderName || '-'} + + + {invoice.data?.paymentTerm} - )} - {invoice.data?.sales} - {invoice.data?.invoiceDate} -
-

Invoice

- + {invoice.data?.amountResidual > 0 && invoice.invoiceDate != invoice.invoiceDateDue && ( + + {invoice.data?.invoiceDateDue} + + )} + {invoice.data?.sales} + {invoice.data?.invoiceDate} +
+

Invoice

+ +
+
+

Faktur Pajak

+ +
-
-

Faktur Pajak

- + + + +
Detail Penagihan
+ +
+ {address?.name} + {address?.email || '-'} + {address?.mobile || '-'} + {fullAddress}
-
- + + +
Detail Produk
+ +
+ +
+

Total Belanja

+

{currencyFormat(invoice.data?.amountTotal)}

+
+
+ + + +
+
+ +
+
+

Invoice & Faktur Pajak

+ +
+ {invoice?.data?.name} + {invoice?.data?.amountResidual > 0 ? ( +
Belum Lunas
+ ) : ( +
Lunas
+ )} +
+ + + +
+
+
Tanggal Invoice
+
: {invoice?.data?.invoiceDate}
+ +
Purchase Order
+
+ :{' '} + +
+ +
Ketentuan Pembayaran
+
: {invoice?.data?.paymentTerm}
+
+
+
Nama Sales
+
: {invoice?.data?.sales}
+ +
Faktur Pajak
+
+ :{' '} + {invoice.data?.efaktur ? ( + + ) : ( + '-' + )} +
+
+
-
Detail Penagihan
+
Rincian Pembelian
+ + + + + + + + + + + + {invoice?.data?.products?.map((product) => ( + + + + + + + + ))} + +
Nama ProdukJumlahHargaDiskonSubtotal
+ + {product?.name} + +
+ + {product?.parent?.name} + +
+ {product?.code}{' '} + {product?.attributes.length > 0 + ? `| ${product?.attributes.join(', ')}` + : ''} +
+
+ 		{product.quantity}{currencyFormat(product.price.price)} + {product.price.discountPercentage > 0 + ? `${product.price.discountPercentage}%` + : ''} + {currencyFormat(product.price.priceDiscount * product.quantity)}
-
- {address?.name} - {address?.email || '-'} - {address?.mobile || '-'} - {fullAddress} -
+
+
+
Subtotal
+
{currencyFormat(totalAmount)}
- +
Total Diskon
+
+ {currencyFormat(-totalDiscountAmount)} +
-
Detail Produk
+
PPN 11% (Incl.)
+
{currencyFormat(totalAmount * 0.11)}
-
- -
-

Total Belanja

-

{currencyFormat(invoice.data?.amountTotal)}

+
Grand Total
+
+ {currencyFormat(invoice.data?.amountTotal)} +
+
+
+
-
+ ) ) diff --git a/src/lib/invoice/components/Invoices.jsx b/src/lib/invoice/components/Invoices.jsx index ab318a3c..51041316 100644 --- a/src/lib/invoice/components/Invoices.jsx +++ b/src/lib/invoice/components/Invoices.jsx @@ -16,6 +16,9 @@ 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 MobileView from '@/core/components/views/MobileView' +import DesktopView from '@/core/components/views/DesktopView' +import Menu from '@/lib/auth/components/Menu' const Invoices = () => { const router = useRouter() @@ -44,133 +47,201 @@ const Invoices = () => { } return ( -
-
- setInputQuery(e.target.value)} - /> - -
- - {invoices.isLoading && ( -
- -
- )} - - {!invoices.isLoading && invoices.data?.invoices?.length === 0 && ( - - Tidak ada data invoice - - )} - - {invoices.data?.invoices?.map((invoice, index) => ( -
-
- - No. Invoice -

{invoice.name}

- -
- {invoice.amountResidual > 0 ? ( -
Belum Lunas
- ) : ( -
Lunas
- )} - setToOthers(invoice)} - /> -
-
- -
-

{invoice.invoiceDate}

-

{invoice.paymentTerm}

+ <> + +
+
+ setInputQuery(e.target.value)} + /> + +
+ + {invoices.isLoading && ( +
+
-
-
-
- No. Purchase Order -

- {invoice.purchaseOrderName || '-'} -

-
-
- Total Invoice -

- {currencyFormat(invoice.amountTotal)} -

+ )} + + {!invoices.isLoading && invoices.data?.invoices?.length === 0 && ( + + Tidak ada data invoice + + )} + + {invoices.data?.invoices?.map((invoice, index) => ( +
+
+ + No. Invoice +

{invoice.name}

+ +
+ {invoice.amountResidual > 0 ? ( +
Belum Lunas
+ ) : ( +
Lunas
+ )} + setToOthers(invoice)} /> +
+ +
+

{invoice.invoiceDate}

+

{invoice.paymentTerm}

+
+
+
+
+ No. Purchase Order +

+ {invoice.purchaseOrderName || '-'} +

+
+
+ Total Invoice +

+ {currencyFormat(invoice.amountTotal)} +

+
+
+ + {invoice.efaktur ? ( +
+ + Faktur Pajak +
+ ) : ( +
+ + Faktur Pajak +
+ )}
- - {invoice.efaktur ? ( -
- - Faktur Pajak -
- ) : ( -
- - Faktur Pajak + ))} + + + + setToOthers(null)}> +
+ +
- )} +
- ))} - - - - setToOthers(null)} - > -
- - + + + +
+
+ +
+
+
+

+ Invoice & Faktur Pajak{' '} + {invoices?.data?.invoices ? `(${invoices?.data?.invoices.length})` : ''} +

+
+ setInputQuery(e.target.value)} + /> + +
+
+ + + + + + + + + + + + + + {invoices.isLoading && ( + + + + )} + {!invoices.isLoading && + (!invoices?.data?.invoices || invoices?.data?.invoices?.length == 0) && ( + + + + )} + {invoices.data?.invoices?.map((invoice) => ( + + + + + + + + + ))} + +
No. InvoiceNo. POTanggalSalespersonStatusTotal
+
+ +
+
Tidak ada data invoice
+ {invoice.name} + {invoice.purchaseOrderName || '-'}{invoice.invoiceDate}{invoice.sales} + {invoice.amountResidual > 0 ? ( +
Belum Lunas
+ ) : ( +
Lunas
+ )} + 		{currencyFormat(invoice.amountTotal)}
+ + +
- -
+ + ) } -- cgit v1.2.3