From d1a018ce300e1b59374db77459cdd6296f9b822e Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Wed, 28 May 2025 15:11:12 +0700
Subject: <miqdad> make detail invoice similar to detail transaction

---
 src/lib/invoice/components/Invoice.jsx | 158 +++++++++++++++++++++------------
 1 file changed, 99 insertions(+), 59 deletions(-)

(limited to 'src/lib/invoice/components')

diff --git a/src/lib/invoice/components/Invoice.jsx b/src/lib/invoice/components/Invoice.jsx
index 15bfa746..a26b231f 100644
--- a/src/lib/invoice/components/Invoice.jsx
+++ b/src/lib/invoice/components/Invoice.jsx
@@ -1,60 +1,66 @@
-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 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'
+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 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 PPN = process.env.NEXT_PUBLIC_PPN
-  const { invoice } = useInvoice({ id })
+  const PPN = process.env.NEXT_PUBLIC_PPN;
+  const { invoice } = useInvoice({ id });
 
-  const [totalAmount, setTotalAmount] = useState(0)
-  const [totalDiscountAmount, setTotalDiscountAmount] = useState(0)
+  const [totalAmount, setTotalAmount] = useState(0);
+  const [totalDiscountAmount, setTotalDiscountAmount] = useState(0);
+
+  const amountBeforePPN = invoice.data?.amountTotal / PPN;
+  const taxAmount = invoice.data?.amountTotal - amountBeforePPN;
 
   useEffect(() => {
     if (invoice?.data?.products) {
-      let calculateTotalAmount = 0
-      let calculateTotalDiscountAmount = 0
+      let calculateTotalAmount = 0;
+      let calculateTotalDiscountAmount = 0;
       invoice.data.products.forEach((product) => {
-        calculateTotalAmount += product.price.price * product.quantity
+        calculateTotalAmount += product.price.price * product.quantity;
         calculateTotalDiscountAmount +=
-          (product.price.price - product.price.priceDiscount) * product.quantity
-      })
-      setTotalAmount(calculateTotalAmount)
-      setTotalDiscountAmount(calculateTotalDiscountAmount)
+          (product.price.price - product.price.priceDiscount) *
+          product.quantity;
+      });
+      setTotalAmount(calculateTotalAmount);
+      setTotalDiscountAmount(calculateTotalDiscountAmount);
     }
-  }, [invoice])
+  }, [invoice]);
 
   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>
-    )
+    );
   }
 
-  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(', ')
+  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 && (
       <>
         <MobileView>
           <div className='flex flex-col gap-y-4 p-4'>
-            <DescriptionRow label='No Invoice'>{invoice.data?.name}</DescriptionRow>
+            <DescriptionRow label='No Invoice'>
+              {invoice.data?.name}
+            </DescriptionRow>
             <DescriptionRow label='Status Transaksi'>
               {invoice.data?.amountResidual > 0 ? (
                 <span className='badge-solid-red'>Belum Lunas</span>
@@ -68,13 +74,18 @@ const Invoice = ({ id }) => {
             <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>
+            {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
@@ -104,8 +115,12 @@ const Invoice = ({ id }) => {
 
           <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='Email'>
+              {address?.email || '-'}
+            </DescriptionRow>
+            <DescriptionRow label='No Telepon'>
+              {address?.mobile || '-'}
+            </DescriptionRow>
             <DescriptionRow label='Alamat'>{fullAddress}</DescriptionRow>
           </div>
 
@@ -128,10 +143,14 @@ const Invoice = ({ id }) => {
               <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>
+              <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>
+                <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>
                 ) : (
@@ -180,14 +199,16 @@ const Invoice = ({ id }) => {
                 </div>
               </div>
 
-              <div className='text-h-sm font-semibold mt-6 mb-4'>Rincian Pembelian</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>Diskon</th> */}
                     <th>Subtotal</th>
                   </tr>
                 </thead>
@@ -229,13 +250,22 @@ const Invoice = ({ id }) => {
                         </div>
                       </td>
                       <td>{product.quantity}</td>
-                      <td>{currencyFormat(product.price.price)}</td>
                       <td>
+                        {currencyFormat(
+                          product.price.priceDiscount - taxAmount
+                        )}
+                      </td>
+                      {/* <td>
                         {product.price.discountPercentage > 0
                           ? `${product.price.discountPercentage}%`
                           : ''}
+                      </td> */}
+                      <td>
+                        {currencyFormat(
+                          product.price.priceDiscount * product.quantity -
+                            taxAmount
+                        )}
                       </td>
-                      <td>{currencyFormat(product.price.priceDiscount * product.quantity)}</td>
                     </tr>
                   ))}
                 </tbody>
@@ -244,20 +274,30 @@ const Invoice = ({ id }) => {
               <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>
+                  <div className='text-right font-medium'>
+                    {currencyFormat(
+                      totalAmount - totalDiscountAmount - taxAmount
+                    )}
+                  </div>
 
-                  <div className='text-right'>Total Diskon</div>
+                  {/* <div className='text-right'>Total Diskon</div>
                   <div className='text-right font-medium'>
-                    {currencyFormat(-totalDiscountAmount)}
+                    {currencyFormat(totalDiscountAmount)}
+                  </div> */}
+                  <div className='text-right'>
+                    PPN {((PPN - 1) * 100).toFixed(0)}%
+                  </div>
+                  <div className='text-right font-medium'>
+                    {currencyFormat(
+                      invoice.data?.amountTotal -
+                        invoice.data?.amountTotal / PPN
+                    )}
                   </div>
 
                   <div className='text-right'>Grand Total</div>
                   <div className='text-right font-medium text-gray_r-12'>
                     {currencyFormat(invoice.data?.amountTotal)}
                   </div>
-
-                  <div className='text-right'>PPN {((PPN - 1) * 100).toFixed(0)}% (Incl.)</div>
-                  <div className='text-right font-medium'>{currencyFormat(invoice.data?.amountTotal - totalAmount)}</div>
                 </div>
               </div>
             </div>
@@ -265,14 +305,14 @@ const Invoice = ({ id }) => {
         </DesktopView>
       </>
     )
-  )
-}
+  );
+};
 
 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
+export default Invoice;
-- 
cgit v1.2.3