invoice, invoice detail, address, create address, edit address, wishlist

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>
       </>
     )
   )