From 7e22e353733c8af58466ed59504b4974ca1ffc0c Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 6 Mar 2023 17:09:28 +0700
Subject: subtotal di menu transaksi

---
 src/core/components/elements/Navbar/Navbar.jsx |  1 -
 src/lib/transaction/components/Transaction.jsx | 58 ++++++++++++++++++++------
 2 files changed, 45 insertions(+), 14 deletions(-)

(limited to 'src')

diff --git a/src/core/components/elements/Navbar/Navbar.jsx b/src/core/components/elements/Navbar/Navbar.jsx
index 0198ea5e..1442b9fa 100644
--- a/src/core/components/elements/Navbar/Navbar.jsx
+++ b/src/core/components/elements/Navbar/Navbar.jsx
@@ -11,7 +11,6 @@ import Link from '../Link/Link'
 import useSidebar from '@/core/hooks/useSidebar'
 import MobileView from '../../views/MobileView'
 import DesktopView from '../../views/DesktopView'
-import DocumentTimeIcon from '@/icons/document_time.svg'
 
 const Search = dynamic(() => import('./Search'))
 
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 />
 
-- 
cgit v1.2.3