diff options
Diffstat (limited to 'src/lib/transaction/components')
| -rw-r--r-- | src/lib/transaction/components/Transaction.jsx | 316 |
1 files changed, 146 insertions, 170 deletions
diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx index 9216f7f7..2c1a6208 100644 --- a/src/lib/transaction/components/Transaction.jsx +++ b/src/lib/transaction/components/Transaction.jsx @@ -46,6 +46,8 @@ import { downloadTaxInvoice, } from '@/lib/invoice/utils/invoices'; import axios from 'axios'; +import InformationSection from '../../treckingAwb/component/InformationSection'; +import { Button } from '@chakra-ui/react'; const Transaction = ({ id }) => { const PPN = process.env.NEXT_PUBLIC_PPN; const router = useRouter(); @@ -225,70 +227,32 @@ const Transaction = ({ id }) => { transaction.refetch(); }; - 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 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 memoizeVariantGroupCardReject = useMemo( () => ( @@ -595,6 +559,16 @@ const Transaction = ({ id }) => { <Divider /> <div className='flex flex-col gap-y-4 p-4'> + <DescriptionRow label='Status Transaksi'> + <div className='flex justify-end'> + <TransactionStatusBadge status={transaction.data?.status} /> + </div> + </DescriptionRow> + <DescriptionRow label='Status Transaksi'> + <div className='flex justify-end font-semibold text-red-500'> + {transaction.data?.expectedReadyToShip} + </div> + </DescriptionRow> <DescriptionRow label='No Transaksi'> <p className='font-semibold'>{transaction.data?.name}</p> </DescriptionRow> @@ -709,31 +683,7 @@ const Transaction = ({ id }) => { </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' - key={airway?.id} - onClick={() => setIdAWB(airway?.id)} - > - <div> - <span className='text-sm text-gray_r-11'> - No Resi : {airway?.trackingNumber || '-'}{' '} - </span> - <p className='mt-1 font-medium'>{airway?.name}</p> - </div> - <div className='flex gap-x-2'> - <div className='text-sm text-gray-600 badge-green leading-[1.5] mt-1'> - {airway?.delivered ? 'Pesanan Tiba' : 'Sedang Dikirim'} - </div> - <ChevronRightIcon className='w-5 stroke-2' /> - </div> - </button> - ))} - </div> - {transaction?.data?.pickings == 0 && ( - <div className='badge-red text-sm px-2'>Belum ada pengiriman</div> - )} */} + </div> {/* <Divider /> @@ -948,48 +898,25 @@ const Transaction = ({ id }) => { )} </div> - <div className=''> - <div - class='flex items-center p-4 mb-4 text-sm border border-yellow-500 text-yellow-800 rounded-lg bg-yellow-50' - role='alert' - > - <svg - class='flex-shrink-0 inline w-5 h-5 mr-2' - aria-hidden='true' - fill='currentColor' - viewBox='0 0 20 20' - > - <path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z' /> - </svg> - <span class='sr-only'>Info Transaksi</span> - <div className='text-justify flex flex-col gap-1'> - <p className='font-bold text-black'>Info Transaksi</p> - <span className='text-black'> - Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. - </span> - </div> - </div> - </div> - <div className='flex flex-row items-center justify-between'> - <div className='flex items-center gap-x-2 mb-3'> - <span className='text-h-sm font-medium'> - {transaction?.data?.name} - </span> - <TransactionStatusBadge status={transaction?.data?.status} /> - </div> - <div> - <div className='relative inline-block text-left'> - <button - onClick={() => downloadQuotation(transaction.data)} - type='button' - className='btn-light bg-slate-50 mt-3 w-full gap-2 items-center flex flex-row !text-gray_r-11 px-4 py-3 mb-2' - > - <p>Export to PDF</p> - </button> - </div> - </div> + {/*new-release*/} + {/*<div className='flex items-center justify-between mb-3'>*/} + {/* <div className='flex items-center gap-x-2'>*/} + {/* <span className='text-h-sm font-medium'>*/} + {/* {transaction?.data?.name}*/} + {/* </span>*/} + {/* <TransactionStatusBadge status={transaction?.data?.status} />*/} + {/* </div>*/} + {/* <div className='text-h-sm'>*/} + {/* Estimasi Barang Siap:{' '}*/} + {/* <span className='text-red-500 font-semibold'>*/} + {/* {transaction?.data?.expectedReadyToShip}*/} + {/* </span>*/} + {/* </div>*/} + <div className='flex items-center gap-x-2 mb-3'> + <span className='text-h-sm font-medium'> + {transaction?.data?.name} + </span> + <TransactionStatusBadge status={transaction?.data?.status} /> </div> {/* <div className='flex gap-x-4'> <button @@ -1284,54 +1211,103 @@ const Transaction = ({ id }) => { </div> </div> - <hr className='mt-4 mb-4 border border-gray-100' /> - - {/* <div className='text-h-sm font-semibold mt-10 mb-4'> - Informasi Pelanggan - </div> - <div className='grid grid-cols-2 gap-x-4'> - <div className='border border-gray_r-6 rounded p-3'> - <div className='font-medium mb-4'>Detail Pelanggan</div> - <SectionContent - address={transaction?.data?.address?.customer} - /> + <div className='flex gap-x-3'> + <div className='w-1/2'> + <div className='text-h-sm font-semibold mt-10 mb-4'> + Informasi Pelanggan + </div> + <div className='border border-gray_r-6 rounded p-3'> + <div className='font-medium mb-4'>Detail Pelanggan</div> + <SectionContent + address={transaction?.data?.address?.customer} + /> + </div> </div> - </div> - <div className='flex '> <div className='w-1/2'> <div className='text-h-sm font-semibold mt-10 mb-4'> - Pengiriman + Informasi Pengiriman </div> {transaction?.data?.pickings.length == 0 && ( <div className='badge-red text-sm'> Belum ada pengiriman </div> )} - <div className='grid grid-cols-1 gap-1 w-2/3'> - {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 h-20' - key={airway?.id} - onClick={() => setIdAWB(airway?.id)} - > - <div> - <span className='text-sm text-gray_r-11'> - No Resi : {airway?.trackingNumber || '-'}{' '} - </span> - <p className='mt-1 font-medium'>{airway?.name}</p> - </div> - <div className='flex gap-x-2'> - <div className='text-sm text-gray-600 badge-green leading-[1.5] mt-1'> - {airway?.delivered - ? 'Pesanan Tiba' - : 'Sedang Dikirim'} - </div> - <ChevronRightIcon className='w-5 stroke-2' /> - </div> - </button> - ))} - </div> + {/* <div className='grid grid-cols-1 gap-1 w-1/2'> */} + {transaction?.data?.pickings?.map((airway) => ( + <div + key={airway?.id} + className='border border-gray_r-6 rounded p-3' + > + <InformationSection manifests={airway} /> + <div className='p-4'> + <button + className='bg-transparent text-red-600 hover:underline p-0 font-semibold' + onClick={() => { + if (airway?.waybillNumber == '-') { + toast.error('Nomor Resi belum tersedia'); + return; + } + setIdAWB(airway.id); + }} + > + Lacak Pengiriman + </button> + </div> + </div> + // <button + // className='shadow rounded-md p-3 text-gray_r-12 font-normal flex justify-between items-center text-left h-20' + // key={airway?.id} + // onClick={() => setIdAWB(airway?.id)} + // > + // <div> + // <span className='text-sm text-gray_r-11'> + // No Resi : {airway?.trackingNumber || '-'}{' '} + // </span> + // <p className='mt-1 font-medium'>{airway?.name}</p> + // </div> + // <div className='flex gap-x-2'> + // <div className='text-sm text-gray-600 badge-green leading-[1.5] mt-1'> + // {airway?.delivered + // ? 'Pesanan Tiba' + // : 'Sedang Dikirim'} + // </div> + // <ChevronRightIcon className='w-5 stroke-2' /> + // </div> + // </button> + ))} + {/* </div> */} </div> + </div> + + <div className='flex '> + {/*New release*/} + {/* <div className='grid grid-cols-1 gap-1 w-2/3'>*/} + {/* {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 h-20'*/} + {/* key={airway?.id}*/} + {/* onClick={() => setIdAWB(airway?.id)}*/} + {/* >*/} + {/* <div>*/} + {/* <p className='text-sm text-gray_r-11'>*/} + {/* {airway?.name}*/} + {/* </p>*/} + {/* <span className='text-md text-bold mt-1'>*/} + {/* No Resi : {airway?.trackingNumber || '-'}{' '}*/} + {/* </span>*/} + {/* </div>*/} + {/* <div className='flex gap-x-2'>*/} + {/* <div className='text-sm text-gray-600 badge-green leading-[1.5] mt-1 text-center'>*/} + {/* {airway?.delivered*/} + {/* ? 'Pesanan Tiba'*/} + {/* : 'Sedang Dikirim'}*/} + {/* </div>*/} + {/* <ChevronRightIcon className='w-5 stroke-2' />*/} + {/* </div>*/} + {/* </button>*/} + {/* ))}*/} + {/* </div>*/} + {/*</div>*/} <div className='invoice w-1/2 '> <div className='text-h-sm font-semibold mt-10 mb-4 '> Invoice @@ -1362,7 +1338,7 @@ const Transaction = ({ id }) => { ))} </div> </div> - </div> */} + </div> <div className='text-h-sm font-semibold mt-4 mb-4'> Rincian Pembelian |