subtotal di menu transaksi

1 files changed, 45 insertions, 13 deletions

diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 55e959fa..dc9338fa 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -2,7 +2,7 @@ import Spinner from '@/core/components/elements/Spinner/Spinner'
 import useTransaction from '../hooks/useTransaction'
 import TransactionStatusBadge from './TransactionStatusBadge'
 import Divider from '@/core/components/elements/Divider/Divider'
-import { useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { downloadPurchaseOrder, downloadQuotation } from '../utils/transactions'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import uploadPoApi from '../api/uploadPoApi'
@@ -19,6 +19,23 @@ import cancelTransactionApi from '../api/cancelTransactionApi'
 const Transaction = ({ id }) => {
   const { transaction } = useTransaction({ id })
 
+  const [totalAmount, setTotalAmount] = useState(0)
+  const [totalDiscountAmount, setTotalDiscountAmount] = useState(0)
+
+  useEffect(() => {
+    if (transaction?.data?.products) {
+      let calculateTotalAmount = 0
+      let calculateTotalDiscountAmount = 0
+      transaction.data.products.forEach((product) => {
+        calculateTotalAmount += product.price.price * product.quantity
+        calculateTotalDiscountAmount +=
+          (product.price.price - product.price.priceDiscount) * product.quantity
+      })
+      setTotalAmount(calculateTotalAmount)
+      setTotalDiscountAmount(calculateTotalDiscountAmount)
+    }
+  }, [transaction])
+
   const poNumber = useRef('')
   const poFile = useRef('')
   const [uploadPo, setUploadPo] = useState(false)
@@ -68,18 +85,33 @@ const Transaction = ({ id }) => {
     transaction.refetch()
   }
 
-  const memoizeVariantGroupCard = useMemo(() => (
-    <div className='p-4 pt-0 flex flex-col gap-y-3'>
-      <VariantGroupCard
-        variants={transaction.data?.products}
-        buyMore
-      />
-      <div className='flex justify-between mt-3 font-medium'>
-        <p>Total Belanja</p>
-        <p>{currencyFormat(transaction.data?.amountTotal)}</p>
+  const memoizeVariantGroupCard = useMemo(
+    () => (
+      <div className='p-4 pt-0 flex flex-col gap-y-3'>
+        <VariantGroupCard
+          variants={transaction.data?.products}
+          buyMore
+        />
+        <div className='flex justify-between mt-1'>
+          <p className='text-gray_r-12/70'>Subtotal</p>
+          <p>{currencyFormat(totalAmount)}</p>
+        </div>
+        <div className='flex justify-between mt-1'>
+          <p className='text-gray_r-12/70'>Total Diskon</p>
+          <p>{currencyFormat(-totalDiscountAmount)}</p>
+        </div>
+        <div className='flex justify-between mt-1'>
+          <p className='text-gray_r-12/70'>PPN 11% (Incl.)</p>
+          <p>{currencyFormat(totalAmount * 0.11)}</p>
+        </div>
+        <div className='flex justify-between mt-1 font-medium'>
+          <p>Total Belanja</p>
+          <p>{currencyFormat(transaction.data?.amountTotal)}</p>
+        </div>
       </div>
-    </div>
-  ), [transaction.data])
+    ),
+    [transaction.data, totalAmount, totalDiscountAmount]
+  )
 
   if (transaction.isLoading) {
     return (
@@ -132,7 +164,7 @@ const Transaction = ({ id }) => {
 
         <div className='font-medium p-4'>Detail Produk</div>
 
-        { memoizeVariantGroupCard }
+        {memoizeVariantGroupCard}
 
         <Divider />