diff options
Diffstat (limited to 'src/lib/transaction/components/Transaction.jsx')
| -rw-r--r-- | src/lib/transaction/components/Transaction.jsx | 348 |
1 files changed, 295 insertions, 53 deletions
diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx index 299f7a07..5f17b623 100644 --- a/src/lib/transaction/components/Transaction.jsx +++ b/src/lib/transaction/components/Transaction.jsx @@ -68,6 +68,25 @@ const Transaction = ({ id }) => { const closeUploadPo = () => setUploadPo(false); const [copied, setCopied] = useState(false); const [toOthers, setToOthers] = useState(null); + 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.data, transaction.isLoading]); + console.log('totalAmount', totalAmount); + console.log('totalDiscountAmount', totalDiscountAmount); const submitUploadPo = async () => { const file = poFile.current.files[0]; const name = poNumber.current.value; @@ -206,32 +225,70 @@ 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-1'> - <p className='text-gray_r-12/70'>Subtotal</p> - <p>{currencyFormat(transaction.data?.amountUntaxed)}</p> - </div> - <div className='flex justify-between mt-1'> - <p className='text-gray_r-12/70'> - PPN {((PPN - 1) * 100).toFixed(0)}% - </p> - <p>{currencyFormat(transaction.data?.amountTax)}</p> - </div> - <div className='flex justify-between mt-1'> - <p className='text-gray_r-12/70'>Biaya Pengiriman</p> - <p>{currencyFormat(transaction.data?.deliveryAmount)}</p> - </div> - <div className='flex justify-between mt-1 font-medium'> - <p>Grand Total</p> - <p>{currencyFormat(transaction.data?.amountTotal)}</p> - </div> - </div> - ), - [transaction.data] - ); + const countWeight = (products) => { + if (!products || !Array.isArray(products)) return 0.0; + + const weight = products.reduce( + (total, product) => total + (product.weight * product.quantity || 0), + 0 + ); + return weight + ' Kg'; + }; + + // const memoizeVariantGroupCard = useMemo( + // () => ( + // <div className='p-4 pt-0 flex flex-col gap-y-3'> + // <VariantGroupCard variants={transaction.data?.products} buyMore /> + // <div className='font-medium'>Info Pengiriman</div> + // <div className='flex justify-between mt-1'> + // <p className='text-gray_r-12/70'>Metode Pembayaran</p> + // <p> + // {transaction.data?.paymentType + // ? transaction.data?.paymentType + // ?.replace(/_/g, ' ') + // .replace(/\b\w/g, (char) => char.toUpperCase()) + // : '-'} + // </p> + // </div> + // <div className='flex justify-between mt-1'> + // <p className='text-gray_r-12/70'>Berat Barang</p> + // <p>{transaction.data?.pickings[0]?.weightTotal}</p> + // </div> + // <hr className='mt-1 border border-gray-100' /> + // <div className='flex justify-between mt-1'> + // <p className='text-gray_r-12/70'>Total Belanja</p> + // <p>{currencyFormat(totalAmount)}</p> + // </div> + // <div className='flex justify-between mt-1'> + // <p className='text-gray_r-12/70'>Diskon Belanja</p> + // <p>{'- ' + currencyFormat(totalDiscountAmount)}</p> + // </div> + // <div className='flex justify-between mt-1'> + // <p className='text-gray_r-12/70'>Subtotal</p> + // <p>{currencyFormat(transaction.data?.amountUntaxed)}</p> + // </div> + // <div className='flex justify-between mt-1'> + // <p className='text-gray_r-12/70'> + // PPN {((PPN - 1) * 100).toFixed(0)}% + // </p> + // <p>{currencyFormat(transaction.data?.amountTax)}</p> + // </div> + // <div className='flex justify-between mt-1'> + // <p className='text-gray_r-12/70'>Biaya Pengiriman</p> + // <p>{currencyFormat(transaction.data?.deliveryAmount)}</p> + // </div> + // <div className='flex justify-between mt-1 font-medium'> + // <p className='text-gray_r-12/70'>Asuransi Pengiriman</p> + // <p>{currencyFormat(transaction.data?.amountTotal)}</p> + // </div> + // <div className='flex justify-between mt-1 font-medium'> + // <p>Grand Total</p> + // <p>{currencyFormat(transaction.data?.amountTotal)}</p> + // </div> + // </div> + // ), + // [transaction.data] + // ); const memoizeVariantGroupCardReject = useMemo( () => ( @@ -538,28 +595,121 @@ const Transaction = ({ id }) => { <Divider /> <div className='flex flex-col gap-y-4 p-4'> - <DescriptionRow label='Status Transaksi'> - <div className='flex justify-end'></div> - </DescriptionRow> <DescriptionRow label='No Transaksi'> - {transaction.data?.name} + <p className='font-semibold'>{transaction.data?.name}</p> + </DescriptionRow> + <DescriptionRow label='Tanggal Transaksi'> + {transaction.data?.dateOrder + ? formatDate(transaction.data?.dateOrder) + : '-'} + </DescriptionRow> + <DescriptionRow label='Purchase Order'> + {transaction.data?.purchaseOrderName || '-'} </DescriptionRow> <DescriptionRow label='Ketentuan Pembayaran'> - {transaction.data?.paymentTerm} + {transaction.data?.paymentTerm || '-'} </DescriptionRow> <DescriptionRow label='Nama Sales'> {transaction.data?.sales} </DescriptionRow> - <DescriptionRow label='Waktu Transaksi'> - {transaction.data?.dateOrder} - </DescriptionRow> </div> <Divider /> <div className='p-4'> - <div className='font-medium'>Pengiriman</div> - <div className='flex flex-col gap-y-3 mt-4'> + <div className='flex flex-row justify-between items-center'> + <div className='font-medium'>Info Pengiriman</div> + <span + className='text-red-500' + onClick={() => setIdAWB(transaction?.data?.pickings[0]?.id)} + > + Lihat Detail + </span> + </div> + <hr className='mt-4 mb-4 border border-gray-100' /> + <div className='flex flex-col gap-y-4'> + <DescriptionRow label='Dokumen Pengiriman'> + <p className='text-red-500 font-semibold text-start'> + {transaction.data?.pickings?.length == 0 + ? 'Belum ada pengiriman' + : transaction?.data?.pickings[0].name} + </p> + </DescriptionRow> + <DescriptionRow label='Kurir'> + <p className='text-start'> + {transaction?.data?.pickings[0]?.carrierName ? ( + <p className=' text-nowrap'> + {transaction?.data?.pickings[0]?.carrierName} + </p> + ) : ( + '-' + )} + </p> + </DescriptionRow> + <DescriptionRow label='Jenis Service'> + <p className='text-start'> + {transaction?.data?.pickings[0]?.serviceType && + transaction?.data?.pickings[0]?.carrierName + ? transaction?.data?.pickings[0]?.serviceType + : '-'} + </p> + </DescriptionRow> + <DescriptionRow label='Nomor Resi'> + <div className='flex flex-row gap-1 text-start'> + {transaction?.data?.pickings[0]?.trackingNumber || '-'} + {transaction?.data?.pickings[0]?.trackingNumber && ( + <button + className={`${ + copied ? 'text-gray-400' : 'text-red-600 ' + }`} + onClick={() => + handleCopyClick( + transaction?.data?.pickings[0]?.trackingNumber + ) + } + > + <svg + aria-hidden='true' + fill='none' + stroke='currentColor' + stroke-width='1.5' + viewBox='0 0 24 24' + className='w-5 h-6' + > + <path + d='M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75' + stroke-linecap='round' + stroke-linejoin='round' + ></path> + </svg> + </button> + )} + </div> + </DescriptionRow> + <DescriptionRow label='Estimasi Tiba'> + <p className='text-start'> + {transaction?.data?.pickings[0]?.eta + ? transaction?.data?.pickings[0]?.eta + : '-'} + </p> + </DescriptionRow> + <DescriptionRow label='Alamat Pengiriman'> + <div className='flex flex-col justify-start items-start'> + <div className='text-start text-nowrap truncate w-full'> + {transaction?.data?.address?.customer?.name} + </div> + <div className='text-start'> + {transaction?.data?.address?.customer?.phone + ? transaction?.data?.address?.customer?.phone + : '-'} + </div> + <div className='text-start'> + {transaction?.data?.address?.customer?.alamatBisnis} + </div> + </div> + </DescriptionRow> + </div> + {/* <div className='flex flex-col gap-y-3 mt-4'> {transaction?.data?.pickings?.map((airway) => ( <button className='shadow rounded-md p-3 text-gray_r-12 font-normal flex justify-between items-center text-left' @@ -583,10 +733,10 @@ const Transaction = ({ id }) => { </div> {transaction?.data?.pickings == 0 && ( <div className='badge-red text-sm px-2'>Belum ada pengiriman</div> - )} + )} */} </div> - <Divider /> + {/* <Divider /> <div className='p-4'> <p className='font-medium'>Invoice</p> @@ -615,11 +765,11 @@ const Transaction = ({ id }) => { <div className='badge-red text-sm px-2'>Belum ada invoice</div> )} </div> - </div> + </div> */} <Divider /> - {!auth?.feature.soApproval && ( + {/* {!auth?.feature.soApproval && ( <div className='p-4 flex flex-col gap-y-4'> <DescriptionRow label='Purchase Order'> {transaction.data?.purchaseOrderName || '-'} @@ -647,11 +797,59 @@ const Transaction = ({ id }) => { </div> )} - <Divider /> + <Divider /> */} <div className='font-medium p-4'>Detail Produk</div> {transaction?.data?.products.length > 0 ? ( - <div>{memoizeVariantGroupCard}</div> + <div className='p-4 pt-0 flex flex-col gap-y-3'> + <VariantGroupCard variants={transaction.data?.products} buyMore /> + <div className='font-medium'>Rincian Pembayaran</div> + <div className='flex justify-between mt-1'> + <p className='text-gray_r-12/70'>Metode Pembayaran</p> + <p> + {transaction.data?.paymentType + ? transaction.data?.paymentType + ?.replace(/_/g, ' ') + .replace(/\b\w/g, (char) => char.toUpperCase()) + : '-'} + </p> + </div> + <div className='flex justify-between mt-1'> + <p className='text-gray_r-12/70'>Berat Barang</p> + <p>{transaction.data?.pickings[0]?.weightTotal + ' Kg'}</p> + </div> + <hr className='mt-1 border border-gray-100' /> + <div className='flex justify-between mt-1'> + <p className='text-gray_r-12/70'>Total Belanja</p> + <p>{currencyFormat(totalAmount)}</p> + </div> + <div className='flex justify-between mt-1'> + <p className='text-gray_r-12/70'>Diskon Belanja</p> + <p>{'- ' + currencyFormat(totalDiscountAmount)}</p> + </div> + <div className='flex justify-between mt-1'> + <p className='text-gray_r-12/70'>Subtotal</p> + <p>{currencyFormat(transaction.data?.amountUntaxed)}</p> + </div> + <div className='flex justify-between mt-1'> + <p className='text-gray_r-12/70'> + PPN {((PPN - 1) * 100).toFixed(0)}% + </p> + <p>{currencyFormat(transaction.data?.amountTax)}</p> + </div> + <div className='flex justify-between mt-1'> + <p className='text-gray_r-12/70'>Biaya Pengiriman</p> + <p>{currencyFormat(transaction.data?.deliveryAmount)}</p> + </div> + <div className='flex justify-between mt-1 font-medium'> + <p className='text-gray_r-12/70'>Asuransi Pengiriman</p> + <p>-</p> + </div> + <div className='flex justify-between mt-1 font-medium'> + <p>Grand Total</p> + <p>{currencyFormat(transaction.data?.amountTotal)}</p> + </div> + </div> ) : ( <div className='badge-red text-sm px-2 ml-4'> Semua produk telah di reject @@ -665,13 +863,13 @@ const Transaction = ({ id }) => { </div> )} - <Divider /> + {/* <Divider /> */} - <SectionAddress address={transaction.data?.address} /> + {/* <SectionAddress address={transaction.data?.address} /> */} - <Divider /> + {/* <Divider /> */} - <div className='p-4 pt-0'> + {/* <div className='p-4 pt-0'> {transaction.data?.status == 'draft' && auth?.feature.soApproval && ( <div className='flex gap-x-2'> @@ -728,7 +926,7 @@ const Transaction = ({ id }) => { Batalkan Transaksi </button> )} - </div> + </div> */} </MobileView> <DesktopView> @@ -1018,7 +1216,7 @@ const Transaction = ({ id }) => { <div>Kurir</div> <div>: </div> {transaction?.data?.pickings[0]?.carrierName ? ( - <div className='flex flex-row w-full gap-1 items-start justify-start '> + <div className='flex flex-row w-full gap-1 items-center justify-start '> <p className=' text-nowrap'> {transaction?.data?.pickings[0]?.carrierName} </p> @@ -1326,7 +1524,49 @@ const Transaction = ({ id }) => { )} {transaction?.data?.products?.length > 0 && ( - <div className='flex justify-end mt-4'> + // <div className='flex justify-end mt-4'> + // <div className='w-1/4 grid grid-cols-2 gap-y-3 text-gray_r-12/80'> + // <div className='text-right'>Subtotal</div> + // <div className='text-right font-medium'> + // {currencyFormat(transaction.data?.amountUntaxed)} + // </div> + + // <div className='text-right'> + // PPN {((PPN - 1) * 100).toFixed(0)}% + // </div> + // <div className='text-right font-medium'> + // {currencyFormat(transaction.data?.amountTax)} + // </div> + + // <div className='text-right whitespace-nowrap'> + // Biaya Pengiriman + // </div> + // <div className='text-right font-medium'> + // {currencyFormat(transaction.data?.deliveryAmount)} + // </div> + + // <div className='text-right'>Grand Total</div> + // <div className='text-right font-medium text-gray_r-12'> + // {currencyFormat(transaction.data?.amountTotal)} + // </div> + // </div> + // </div> + + <div className='flex justify-end mt-4 flex-col items-end'> + <div className='w-1/4 grid grid-cols-2 gap-y-3 text-gray_r-12/80'> + <div className='text-right'>Total Belanja</div> + <div className='text-right font-medium'> + {currencyFormat(totalAmount)} + </div> + + <div className='text-right'>Total Diskon</div> + <div className='text-right font-medium'> + {'- ' + currencyFormat(totalDiscountAmount)} + </div> + </div> + + <hr className='w-full border border-gray-100 mt-4 mb-4 self-stretch' /> + <div className='w-1/4 grid grid-cols-2 gap-y-3 text-gray_r-12/80'> <div className='text-right'>Subtotal</div> <div className='text-right font-medium'> @@ -1340,15 +1580,17 @@ const Transaction = ({ id }) => { {currencyFormat(transaction.data?.amountTax)} </div> - <div className='text-right whitespace-nowrap'> - Biaya Pengiriman - </div> + <div className='text-right'>Biaya Pengiriman</div> <div className='text-right font-medium'> {currencyFormat(transaction.data?.deliveryAmount)} </div> + </div> + <hr className='w-full border border-gray-100 mt-4 mb-4 self-stretch' /> + + <div className='w-1/4 grid grid-cols-2 gap-y-3 font-semibold'> <div className='text-right'>Grand Total</div> - <div className='text-right font-medium text-gray_r-12'> + <div className='text-right'> {currencyFormat(transaction.data?.amountTotal)} </div> </div> |