diff options
Diffstat (limited to 'src/lib/transaction/components/Transaction.jsx')
| -rw-r--r-- | src/lib/transaction/components/Transaction.jsx | 180 |
1 files changed, 142 insertions, 38 deletions
diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx index dca85f0c..8ad7351d 100644 --- a/src/lib/transaction/components/Transaction.jsx +++ b/src/lib/transaction/components/Transaction.jsx @@ -12,7 +12,6 @@ import currencyFormat from '@/core/utils/currencyFormat' import VariantGroupCard from '@/lib/variant/components/VariantGroupCard' import { ChevronDownIcon, ChevronRightIcon, ChevronUpIcon } from '@heroicons/react/24/outline' import Link from '@/core/components/elements/Link/Link' -import Alert from '@/core/components/elements/Alert/Alert' import checkoutPoApi from '../api/checkoutPoApi' import cancelTransactionApi from '../api/cancelTransactionApi' import MobileView from '@/core/components/views/MobileView' @@ -21,9 +20,13 @@ import Menu from '@/lib/auth/components/Menu' import Image from '@/core/components/elements/Image/Image' import { createSlug } from '@/core/utils/slug' import toTitleCase from '@/core/utils/toTitleCase' +import useAirwayBill from '../hooks/useAirwayBill' const Transaction = ({ id }) => { const { transaction } = useTransaction({ id }) + const { queryAirwayBill } = useAirwayBill({ orderId: id }) + + const [airwayBillPopup, setAirwayBillPopup] = useState(null) const poNumber = useRef(null) const poFile = useRef(null) @@ -173,6 +176,35 @@ const Transaction = ({ id }) => { <Divider /> + <div className='p-4'> + <div className='font-medium'>Pengiriman</div> + <div className='flex flex-col gap-y-3 mt-4'> + {queryAirwayBill.data?.airways?.map((airway) => ( + <button + className='shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between items-center text-left' + key={airway?.waybillNumber} + onClick={() => setAirwayBillPopup(airway?.waybillNumber)} + > + <div> + <span className='text-sm text-gray_r-11'>No Resi</span> + <p className='mt-1 font-medium'>{airway?.waybillNumber}</p> + </div> + <div className='flex gap-x-2'> + <div className='text-sm text-gray_r-11 badge-green'> + {airway?.deliveryStatus?.status} + </div> + <ChevronRightIcon className='w-5 stroke-2' /> + </div> + </button> + ))} + </div> + {!queryAirwayBill?.data?.airways && ( + <div className='badge-red text-sm px-2'>Belum ada pengiriman</div> + )} + </div> + + <Divider /> + <div className='p-4 flex flex-col gap-y-4'> <DescriptionRow label='Purchase Order'> {transaction.data?.purchaseOrderName || '-'} @@ -229,9 +261,7 @@ const Transaction = ({ id }) => { </Link> ))} {transaction.data?.invoices?.length === 0 && ( - <Alert type='info' className='text-center'> - Belum ada Invoice - </Alert> + <div className='badge-red text-sm px-2'>Belum ada invoice</div> )} </div> </div> @@ -268,20 +298,36 @@ const Transaction = ({ id }) => { <div className='w-3/12 pr-4'> <Menu /> </div> - <div className='w-9/12 p-4 bg-white border border-gray_r-6 rounded'> + <div className='w-9/12 p-4 py-6 bg-white border border-gray_r-6 rounded'> <h1 className='text-title-sm font-semibold mb-6'>Detail Transaksi</h1> <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> - <button - type='button' - className='btn-solid-red px-3 py-2' - onClick={() => downloadQuotation(transaction.data)} - > - Download - </button> + <div className='flex gap-x-4'> + <button + type='button' + className='btn-solid-red px-3 py-2 mr-auto' + onClick={() => downloadQuotation(transaction.data)} + > + Download + </button> + {transaction.data?.status == 'draft' && ( + <button className='btn-yellow' onClick={checkout}> + Lanjutkan Transaksi + </button> + )} + {transaction.data?.status != 'draft' && ( + <button + className='btn-light' + disabled={transaction.data?.status != 'waiting'} + onClick={openCancelTransaction} + > + Batalkan Transaksi + </button> + )} + </div> <div className='grid grid-cols-2 gap-x-6 mt-6'> <div className='grid grid-cols-2 gap-y-4'> @@ -313,7 +359,7 @@ const Transaction = ({ id }) => { </div> </div> - <div className='text-h-sm font-semibold mt-6 mb-4'>Informasi Pelanggan</div> + <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> @@ -321,7 +367,32 @@ const Transaction = ({ id }) => { </div> </div> - <div className='text-h-sm font-semibold mt-6 mb-4'>Rincian Pembelian</div> + <div className='text-h-sm font-semibold mt-10 mb-4'>Pengiriman</div> + <div className='grid grid-cols-3 gap-4'> + {queryAirwayBill.data?.airways?.map((airway) => ( + <button + className='shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between items-center text-left' + key={airway?.waybillNumber} + onClick={() => setAirwayBillPopup(airway?.waybillNumber)} + > + <div> + <span className='text-sm text-gray_r-11'>No Resi</span> + <p className='mt-1 font-medium'>{airway?.waybillNumber}</p> + </div> + <div className='flex gap-x-2'> + <div className='text-sm text-gray_r-11 badge-green'> + {airway?.deliveryStatus?.status} + </div> + <ChevronRightIcon className='w-5 stroke-2' /> + </div> + </button> + ))} + </div> + {!queryAirwayBill.data?.airways && ( + <div className='badge-red text-sm'>Belum ada pengiriman</div> + )} + + <div className='text-h-sm font-semibold mt-10 mb-4'>Rincian Pembelian</div> <table className='table-data'> <thead> <tr> @@ -401,7 +472,7 @@ const Transaction = ({ id }) => { {currencyFormat(transaction.data?.amountTax)} </div> - <div className='text-right'>Biaya Pengiriman</div> + <div className='text-right whitespace-nowrap'>Biaya Pengiriman</div> <div className='text-right font-medium'> {currencyFormat(transaction.data?.deliveryAmount)} </div> @@ -413,8 +484,8 @@ const Transaction = ({ id }) => { </div> </div> - <div className='text-h-sm font-semibold mt-6 mb-4'>Invoice</div> - <div className='grid grid-cols-4 gap-4'> + <div className='text-h-sm font-semibold mt-10 mb-4'>Invoice</div> + <div className='grid grid-cols-3 gap-4'> {transaction.data?.invoices?.map((invoice, index) => ( <Link href={`/my/invoices/${invoice.id}`} key={index}> <div className='shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between'> @@ -437,30 +508,63 @@ const Transaction = ({ id }) => { ))} </div> {transaction.data?.invoices?.length === 0 && ( - <Alert type='info' className='text-center'> - Belum ada Invoice - </Alert> + <div className='badge-red text-sm'>Belum ada pengiriman</div> )} - - <div className='mt-6'> - {transaction.data?.status == 'draft' && ( - <button className='btn-yellow' onClick={checkout}> - Lanjutkan Transaksi - </button> - )} - {transaction.data?.status != 'draft' && ( - <button - className='btn-light' - disabled={transaction.data?.status != 'waiting'} - onClick={openCancelTransaction} - > - Batalkan Transaksi - </button> - )} - </div> </div> </div> </DesktopView> + + {queryAirwayBill.data?.airways?.map((airway) => ( + <BottomPopup + key={airway.waybillNumber} + title='Detail Pengiriman' + active={airwayBillPopup == airway.waybillNumber} + close={() => setAirwayBillPopup(null)} + > + <div className='flex flex-col gap-y-4 my-4'> + <div className='flex justify-between'> + <div className='text-gray_r-11'>No Pengiriman</div> + <div>{airway?.deliveryOrder?.name}</div> + </div> + <div className='flex justify-between'> + <div className='text-gray_r-11'>Kurir</div> + <div>{airway?.deliveryOrder?.carrier}</div> + </div> + <div className='flex justify-between'> + <div className='text-gray_r-11'>No Resi</div> + <div>{airway?.waybillNumber}</div> + </div> + </div> + + <div className='pt-4'> + <div className='font-semibold text-body-1 mb-4'>Status Pengiriman</div> + <ol class='relative border-l border-gray_r-7'> + {airway?.manifests?.map((manifest, index) => ( + <li class='mb-6 ml-4' key={index}> + <div + class={`absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 border ${ + index == 0 ? 'bg-red-600 border-red-600' : 'bg-gray_r-7 border-white' + }`} + /> + <time class='text-sm leading-none text-gray-400'> + {manifest.manifestDate} {manifest.manifestTime} + </time> + <p + class={`leading-6 font-medium text-body-2 mt-2 ${ + index == 0 ? 'text-red-600' : 'text-gray_r-11' + }`} + > + {manifest.manifestDescription} + </p> + </li> + ))} + {(!airway?.manifests || airway?.manifests?.length == 0) && ( + <div className='badge-red text-sm'>Belum ada pengiriman</div> + )} + </ol> + </div> + </BottomPopup> + ))} </> ) ) @@ -536,7 +640,7 @@ const SectionContent = ({ address }) => { const DescriptionRow = ({ children, label }) => ( <div className='grid grid-cols-2'> <span className='text-gray_r-11'>{label}</span> - <span className='text-right break-all leading-6'>{children}</span> + <span className='text-right leading-6'>{children}</span> </div> ) |