diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/core/components/elements/Navbar/Navbar.jsx | 1 | ||||
| -rw-r--r-- | src/lib/transaction/components/Transaction.jsx | 58 |
2 files changed, 45 insertions, 14 deletions
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 /> |