diff options
Diffstat (limited to 'src/lib/transaction/components')
| -rw-r--r-- | src/lib/transaction/components/Transaction.jsx | 478 | ||||
| -rw-r--r-- | src/lib/transaction/components/TransactionStatusBadge.jsx | 2 | ||||
| -rw-r--r-- | src/lib/transaction/components/Transactions.jsx | 362 |
3 files changed, 536 insertions, 306 deletions
diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx index dc9338fa..104a7f2d 100644 --- a/src/lib/transaction/components/Transaction.jsx +++ b/src/lib/transaction/components/Transaction.jsx @@ -15,6 +15,12 @@ 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' +import DesktopView from '@/core/components/views/DesktopView' +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' const Transaction = ({ id }) => { const { transaction } = useTransaction({ id }) @@ -88,10 +94,7 @@ const Transaction = ({ id }) => { const memoizeVariantGroupCard = useMemo( () => ( <div className='p-4 pt-0 flex flex-col gap-y-3'> - <VariantGroupCard - variants={transaction.data?.products} - buyMore - /> + <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> @@ -124,120 +127,6 @@ const Transaction = ({ id }) => { return ( transaction.data?.name && ( <> - <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='No Transaksi'>{transaction.data?.name}</DescriptionRow> - <DescriptionRow label='Ketentuan Pembayaran'> - {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 flex flex-col gap-y-4'> - <DescriptionRow label='Purchase Order'> - {transaction.data?.purchaseOrderName || '-'} - </DescriptionRow> - <div className='flex items-center'> - <p className='text-gray_r-11 leading-none'>Dokumen PO</p> - <button - type='button' - className='btn-light py-1.5 px-3 ml-auto' - onClick={ - transaction.data?.purchaseOrderFile - ? () => downloadPurchaseOrder(transaction.data) - : openUploadPo - } - > - {transaction.data?.purchaseOrderFile ? 'Download' : 'Upload'} - </button> - </div> - </div> - - <Divider /> - - <div className='font-medium p-4'>Detail Produk</div> - - {memoizeVariantGroupCard} - - <Divider /> - - <SectionAddress address={transaction.data?.address} /> - - <Divider /> - - <div className='p-4'> - <p className='font-medium'>Invoice</p> - <div className='flex flex-col gap-y-3 mt-4'> - {transaction.data?.invoices?.map((invoice, index) => ( - <Link - href={`/my/invoice/${invoice.id}`} - key={index} - > - <div className='shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between'> - <div> - <p className='mb-2'>{invoice?.name}</p> - <div className='flex items-center gap-x-1'> - {invoice.amountResidual > 0 ? ( - <div className='badge-red'>Belum Lunas</div> - ) : ( - <div className='badge-green'>Lunas</div> - )} - <p className='text-caption-2 text-gray_r-11'> - {currencyFormat(invoice.amountTotal)} - </p> - </div> - </div> - <ChevronRightIcon className='w-5 stroke-2' /> - </div> - </Link> - ))} - {transaction.data?.invoices?.length === 0 && ( - <Alert - type='info' - className='text-center' - > - Belum ada Invoice - </Alert> - )} - </div> - </div> - - <Divider /> - - <div className='p-4 pt-0'> - {transaction.data?.status == 'draft' && ( - <button - className='btn-yellow w-full mt-4' - onClick={checkout} - > - Lanjutkan Transaksi - </button> - )} - <button - className='btn-light w-full mt-4' - disabled={transaction.data?.status != 'draft'} - onClick={downloadQuotation} - > - Download Quotation - </button> - {transaction.data?.status != 'draft' && ( - <button - className='btn-light w-full mt-4' - disabled={transaction.data?.status != 'waiting'} - onClick={openCancelTransaction} - > - Batalkan Transaksi - </button> - )} - </div> - <BottomPopup active={cancelTransaction} close={closeCancelTransaction} @@ -255,54 +144,334 @@ const Transaction = ({ id }) => { > Ya, Batalkan </button> - <button - className='btn-light flex-1' - type='button' - onClick={closeCancelTransaction} - > + <button className='btn-light flex-1' type='button' onClick={closeCancelTransaction}> Batal </button> </div> </BottomPopup> - <BottomPopup - title='Upload PO' - close={closeUploadPo} - active={uploadPo} - > + <BottomPopup title='Upload PO' close={closeUploadPo} active={uploadPo}> <div> <label>Nomor PO</label> - <input - type='text' - className='form-input mt-3' - ref={poNumber} - /> + <input type='text' className='form-input mt-3' ref={poNumber} /> </div> <div className='mt-4'> <label>Dokumen PO</label> - <input - type='file' - className='form-input mt-3 py-2' - ref={poFile} - /> + <input type='file' className='form-input mt-3 py-2' ref={poFile} /> </div> <div className='grid grid-cols-2 gap-x-3 mt-6'> - <button - type='button' - className='btn-light w-full' - onClick={closeUploadPo} - > + <button type='button' className='btn-light w-full' onClick={closeUploadPo}> Batal </button> - <button - type='button' - className='btn-solid-red w-full' - onClick={submitUploadPo} - > + <button type='button' className='btn-solid-red w-full' onClick={submitUploadPo}> Upload </button> </div> </BottomPopup> + + <MobileView> + <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='No Transaksi'>{transaction.data?.name}</DescriptionRow> + <DescriptionRow label='Ketentuan Pembayaran'> + {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 flex flex-col gap-y-4'> + <DescriptionRow label='Purchase Order'> + {transaction.data?.purchaseOrderName || '-'} + </DescriptionRow> + <div className='flex items-center'> + <p className='text-gray_r-11 leading-none'>Dokumen PO</p> + <button + type='button' + className='btn-light py-1.5 px-3 ml-auto' + onClick={ + transaction.data?.purchaseOrderFile + ? () => downloadPurchaseOrder(transaction.data) + : openUploadPo + } + > + {transaction.data?.purchaseOrderFile ? 'Download' : 'Upload'} + </button> + </div> + </div> + + <Divider /> + + <div className='font-medium p-4'>Detail Produk</div> + + {memoizeVariantGroupCard} + + <Divider /> + + <SectionAddress address={transaction.data?.address} /> + + <Divider /> + + <div className='p-4'> + <p className='font-medium'>Invoice</p> + <div className='flex flex-col gap-y-3 mt-4'> + {transaction.data?.invoices?.map((invoice, index) => ( + <Link href={`/my/invoice/${invoice.id}`} key={index}> + <div className='shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between'> + <div> + <p className='mb-2'>{invoice?.name}</p> + <div className='flex items-center gap-x-1'> + {invoice.amountResidual > 0 ? ( + <div className='badge-red'>Belum Lunas</div> + ) : ( + <div className='badge-green'>Lunas</div> + )} + <p className='text-caption-2 text-gray_r-11'> + {currencyFormat(invoice.amountTotal)} + </p> + </div> + </div> + <ChevronRightIcon className='w-5 stroke-2' /> + </div> + </Link> + ))} + {transaction.data?.invoices?.length === 0 && ( + <Alert type='info' className='text-center'> + Belum ada Invoice + </Alert> + )} + </div> + </div> + + <Divider /> + + <div className='p-4 pt-0'> + {transaction.data?.status == 'draft' && ( + <button className='btn-yellow w-full mt-4' onClick={checkout}> + Lanjutkan Transaksi + </button> + )} + <button + className='btn-light w-full mt-4' + disabled={transaction.data?.status != 'draft'} + onClick={downloadQuotation} + > + Download Quotation + </button> + {transaction.data?.status != 'draft' && ( + <button + className='btn-light w-full mt-4' + disabled={transaction.data?.status != 'waiting'} + onClick={openCancelTransaction} + > + Batalkan Transaksi + </button> + )} + </div> + </MobileView> + + <DesktopView> + <div className='container mx-auto flex py-10'> + <div className='w-3/12 pr-4'> + <Menu /> + </div> + <div className='w-9/12 p-4 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' + disabled={transaction.data?.status != 'draft'} + onClick={downloadQuotation} + > + Download + </button> + + <div className='grid grid-cols-2 gap-x-6 mt-6'> + <div className='grid grid-cols-2 gap-y-4'> + <div>Nama Sales</div> + <div>: {transaction?.data?.sales}</div> + + <div>Tanggal Transaksi</div> + <div>: {transaction?.data?.dateOrder}</div> + </div> + <div className='grid grid-cols-2 gap-y-4'> + <div>Ketentuan Pembayaran</div> + <div>: {transaction?.data?.paymentTerm}</div> + + <div>Purchase Order</div> + <div> + : {transaction?.data?.purchaseOrderName}{' '} + <button + type='button' + className='inline-block text-red_r-11' + onClick={ + transaction.data?.purchaseOrderFile + ? () => downloadPurchaseOrder(transaction.data) + : openUploadPo + } + > + {transaction?.data?.purchaseOrderFile ? 'Download' : 'Upload'} + </button> + </div> + </div> + </div> + + <div className='text-h-sm font-semibold mt-6 mb-4'>Info Pengiriman</div> + <div className='grid grid-cols-3 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> + <div className='border border-gray_r-6 rounded p-3'> + <div className='font-medium mb-4'>Detail Pengiriman</div> + <SectionContent address={transaction?.data?.address?.shipping} /> + </div> + <div className='border border-gray_r-6 rounded p-3'> + <div className='font-medium mb-4'>Detail Penagihan</div> + <SectionContent address={transaction?.data?.address?.invoice} /> + </div> + </div> + + <div className='text-h-sm font-semibold mt-6 mb-4'>Rincian Pembelian</div> + <table className='table-data'> + <thead> + <tr> + <th>Nama Produk</th> + <th>Jumlah</th> + <th>Harga</th> + <th>Diskon</th> + <th>Subtotal</th> + </tr> + </thead> + <tbody> + {transaction?.data?.products?.map((product) => ( + <tr key={product.id}> + <td className='flex'> + <Link + href={createSlug( + '/shop/product/', + product?.parent.name, + product?.parent.id + )} + className='w-[30%] flex-shrink-0' + > + <Image + src={product?.parent?.image} + alt={product?.name} + className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md' + /> + </Link> + <div className='px-2 text-left'> + <Link + href={createSlug( + '/shop/product/', + product?.parent.name, + product?.parent.id + )} + className='line-clamp-2 leading-6 !text-gray_r-12 font-normal' + > + {product?.parent?.name} + </Link> + <div className='text-gray_r-11 mt-2'> + {product?.code}{' '} + {product?.attributes.length > 0 + ? `| ${product?.attributes.join(', ')}` + : ''} + </div> + </div> + </td> + <td>{product.quantity}</td> + <td>{currencyFormat(product.price.price)}</td> + <td> + {product.price.discountPercentage > 0 + ? `${product.price.discountPercentage}%` + : ''} + </td> + <td>{currencyFormat(product.price.priceDiscount * product.quantity)}</td> + </tr> + ))} + </tbody> + </table> + + <div className='flex justify-end mt-4'> + <div className='w-1/4 grid grid-cols-2 gap-y-2 text-gray_r-12/80'> + <div className='text-right'>Subtotal</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 className='text-right'>PPN 11% (Incl.)</div> + <div className='text-right font-medium'>{currencyFormat(totalAmount * 0.11)}</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='text-h-sm font-semibold mt-6 mb-4'>Invoice</div> + <div className='grid grid-cols-4 gap-4'> + {transaction.data?.invoices?.map((invoice, index) => ( + <Link href={`/my/invoice/${invoice.id}`} key={index}> + <div className='shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between'> + <div> + <p className='mb-2'>{invoice?.name}</p> + <div className='flex items-center gap-x-1'> + {invoice.amountResidual > 0 ? ( + <div className='badge-red'>Belum Lunas</div> + ) : ( + <div className='badge-green'>Lunas</div> + )} + <p className='text-caption-2 text-gray_r-11'> + {currencyFormat(invoice.amountTotal)} + </p> + </div> + </div> + <ChevronRightIcon className='w-5 stroke-2' /> + </div> + </Link> + ))} + </div> + {transaction.data?.invoices?.length === 0 && ( + <Alert type='info' className='text-center'> + Belum ada Invoice + </Alert> + )} + + <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> </> ) ) @@ -351,10 +520,7 @@ const SectionAddress = ({ address }) => { } const SectionButton = ({ label, active, toggle }) => ( - <button - className='p-4 font-medium flex justify-between w-full' - onClick={toggle} - > + <button className='p-4 font-medium flex justify-between w-full' onClick={toggle}> <span>{label}</span> {active ? <ChevronUpIcon className='w-5' /> : <ChevronDownIcon className='w-5' />} </button> @@ -363,13 +529,13 @@ const SectionButton = ({ label, active, toggle }) => ( const SectionContent = ({ address }) => { let fullAddress = [] if (address?.street) fullAddress.push(address.street) - if (address?.subDistrict?.name) fullAddress.push(address.subDistrict.name) - if (address?.district?.name) fullAddress.push(address.district.name) - if (address?.city?.name) fullAddress.push(address.city.name) + if (address?.subDistrict?.name) fullAddress.push(toTitleCase(address.subDistrict.name)) + if (address?.district?.name) fullAddress.push(toTitleCase(address.district.name)) + if (address?.city?.name) fullAddress.push(toTitleCase(address.city.name)) fullAddress = fullAddress.join(', ') return ( - <div className='flex flex-col gap-y-4 p-4 border-t border-gray_r-6'> + <div className='flex flex-col gap-y-4 p-4 md:p-0 border-t border-gray_r-6 md:border-0'> <DescriptionRow label='Nama'>{address.name}</DescriptionRow> <DescriptionRow label='Email'>{address.email || '-'}</DescriptionRow> <DescriptionRow label='No Telepon'>{address.mobile || '-'}</DescriptionRow> diff --git a/src/lib/transaction/components/TransactionStatusBadge.jsx b/src/lib/transaction/components/TransactionStatusBadge.jsx index 7372e4da..88467c2b 100644 --- a/src/lib/transaction/components/TransactionStatusBadge.jsx +++ b/src/lib/transaction/components/TransactionStatusBadge.jsx @@ -1,6 +1,6 @@ const TransactionStatusBadge = ({ status }) => { let badgeProps = { - className: ['h-fit'], + className: ['h-fit md:text-caption-2'], text: '' } switch (status) { diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx index ccbdede2..30c670ae 100644 --- a/src/lib/transaction/components/Transactions.jsx +++ b/src/lib/transaction/components/Transactions.jsx @@ -15,6 +15,9 @@ import Pagination from '@/core/components/elements/Pagination/Pagination' import { toQuery } from 'lodash-contrib' import _ from 'lodash' import Alert from '@/core/components/elements/Alert/Alert' +import MobileView from '@/core/components/views/MobileView' +import DesktopView from '@/core/components/views/DesktopView' +import Menu from '@/lib/auth/components/Menu' const Transactions = () => { const router = useRouter() @@ -55,161 +58,222 @@ const Transactions = () => { } return ( - <div className='p-4 flex flex-col gap-y-4'> - <form - className='flex gap-x-3' - onSubmit={handleSubmit} - > - <input - type='text' - className='form-input' - placeholder='Cari Transaksi...' - value={inputQuery} - onChange={(e) => setInputQuery(e.target.value)} - /> - <button - className='btn-light bg-transparent px-3' - type='submit' - > - <MagnifyingGlassIcon className='w-6' /> - </button> - </form> - - {transactions.isLoading && ( - <div className='flex justify-center my-4'> - <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' /> - </div> - )} - - {!transactions.isLoading && transactions.data?.saleOrders?.length === 0 && ( - <Alert - type='info' - className='text-center' - > - Tidak ada data transaksi - </Alert> - )} - - {transactions.data?.saleOrders?.map((saleOrder, index) => ( - <div - className='p-4 shadow border border-gray_r-3 rounded-md' - key={index} - > - <div className='grid grid-cols-2'> - <Link href={`/my/transaction/${saleOrder.id}`}> - <span className='text-caption-2 text-gray_r-11'>No. Transaksi</span> - <h2 className='text-red_r-11 mt-1'>{saleOrder.name}</h2> - </Link> - <div className='flex gap-x-1 justify-end'> - <TransactionStatusBadge status={saleOrder.status} /> - <EllipsisVerticalIcon - className='w-5 h-5' - onClick={() => setToOthers(saleOrder)} - /> + <> + <MobileView> + <div className='p-4 flex flex-col gap-y-4'> + <form className='flex gap-x-3' onSubmit={handleSubmit}> + <input + type='text' + className='form-input' + placeholder='Cari Transaksi...' + value={inputQuery} + onChange={(e) => setInputQuery(e.target.value)} + /> + <button className='btn-light bg-transparent px-3' type='submit'> + <MagnifyingGlassIcon className='w-6' /> + </button> + </form> + + {transactions.isLoading && ( + <div className='flex justify-center my-4'> + <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' /> </div> - </div> - <Link href={`/my/transaction/${saleOrder.id}`}> - <div className='grid grid-cols-2 mt-3'> - <div> - <span className='text-caption-2 text-gray_r-11'>No. Purchase Order</span> - <p className='mt-1 font-medium text-gray_r-12'> - {saleOrder.purchaseOrderName || '-'} - </p> - </div> - <div className='text-right'> - <span className='text-caption-2 text-gray_r-11'>Total Invoice</span> - <p className='mt-1 font-medium text-gray_r-12'>{saleOrder.invoiceCount} Invoice</p> + )} + + {!transactions.isLoading && transactions.data?.saleOrders?.length === 0 && ( + <Alert type='info' className='text-center'> + Tidak ada data transaksi + </Alert> + )} + + {transactions.data?.saleOrders?.map((saleOrder, index) => ( + <div className='p-4 shadow border border-gray_r-3 rounded-md' key={index}> + <div className='grid grid-cols-2'> + <Link href={`/my/transaction/${saleOrder.id}`}> + <span className='text-caption-2 text-gray_r-11'>No. Transaksi</span> + <h2 className='text-red_r-11 mt-1'>{saleOrder.name}</h2> + </Link> + <div className='flex gap-x-1 justify-end'> + <TransactionStatusBadge status={saleOrder.status} /> + <EllipsisVerticalIcon + className='w-5 h-5' + onClick={() => setToOthers(saleOrder)} + /> + </div> </div> + <Link href={`/my/transaction/${saleOrder.id}`}> + <div className='grid grid-cols-2 mt-3'> + <div> + <span className='text-caption-2 text-gray_r-11'>No. Purchase Order</span> + <p className='mt-1 font-medium text-gray_r-12'> + {saleOrder.purchaseOrderName || '-'} + </p> + </div> + <div className='text-right'> + <span className='text-caption-2 text-gray_r-11'>Total Invoice</span> + <p className='mt-1 font-medium text-gray_r-12'> + {saleOrder.invoiceCount} Invoice + </p> + </div> + </div> + <div className='grid grid-cols-2 mt-3'> + <div> + <span className='text-caption-2 text-gray_r-11'>Sales</span> + <p className='mt-1 font-medium text-gray_r-12'>{saleOrder.sales}</p> + </div> + <div className='text-right'> + <span className='text-caption-2 text-gray_r-11'>Total Harga</span> + <p className='mt-1 font-medium text-gray_r-12'> + {currencyFormat(saleOrder.amountTotal)} + </p> + </div> + </div> + </Link> </div> - <div className='grid grid-cols-2 mt-3'> - <div> - <span className='text-caption-2 text-gray_r-11'>Sales</span> - <p className='mt-1 font-medium text-gray_r-12'>{saleOrder.sales}</p> - </div> - <div className='text-right'> - <span className='text-caption-2 text-gray_r-11'>Total Harga</span> - <p className='mt-1 font-medium text-gray_r-12'> - {currencyFormat(saleOrder.amountTotal)} - </p> - </div> + ))} + + <Pagination + pageCount={pageCount} + currentPage={parseInt(page)} + url={`/my/transactions${pageQuery}`} + className='mt-2 mb-2' + /> + + <BottomPopup title='Lainnya' active={toOthers} close={() => setToOthers(null)}> + <div className='flex flex-col gap-y-4 mt-2'> + <button + className='text-left disabled:opacity-60' + disabled={!toOthers?.purchaseOrderFile} + onClick={() => { + downloadPurchaseOrder(toOthers) + setToOthers(null) + }} + > + Download PO + </button> + <button + className='text-left disabled:opacity-60' + disabled={toOthers?.status != 'draft'} + onClick={() => { + downloadQuotation(toOthers) + setToOthers(null) + }} + > + Download Quotation + </button> + <button + className='text-left disabled:opacity-60' + disabled={toOthers?.status != 'waiting'} + onClick={() => { + setToCancel(toOthers) + setToOthers(null) + }} + > + Batalkan Transaksi + </button> </div> - </Link> - </div> - ))} - - <Pagination - pageCount={pageCount} - currentPage={parseInt(page)} - url={`/my/transactions${pageQuery}`} - className='mt-2 mb-2' - /> - - <BottomPopup - title='Lainnya' - active={toOthers} - close={() => setToOthers(null)} - > - <div className='flex flex-col gap-y-4 mt-2'> - <button - className='text-left disabled:opacity-60' - disabled={!toOthers?.purchaseOrderFile} - onClick={() => { - downloadPurchaseOrder(toOthers) - setToOthers(null) - }} - > - Download PO - </button> - <button - className='text-left disabled:opacity-60' - disabled={toOthers?.status != 'draft'} - onClick={() => { - downloadQuotation(toOthers) - setToOthers(null) - }} - > - Download Quotation - </button> - <button - className='text-left disabled:opacity-60' - disabled={toOthers?.status != 'waiting'} - onClick={() => { - setToCancel(toOthers) - setToOthers(null) - }} - > - Batalkan Transaksi - </button> - </div> - </BottomPopup> - - <BottomPopup - active={toCancel} - close={() => setToCancel(null)} - title='Batalkan Transaksi' - > - <div className='leading-7 text-gray_r-12/80'> - Apakah anda yakin membatalkan transaksi{' '} - <span className='underline'>{toCancel?.name}</span>? + </BottomPopup> + + <BottomPopup active={toCancel} close={() => setToCancel(null)} title='Batalkan Transaksi'> + <div className='leading-7 text-gray_r-12/80'> + Apakah anda yakin membatalkan transaksi{' '} + <span className='underline'>{toCancel?.name}</span>? + </div> + <div className='flex mt-6 gap-x-4'> + <button + className='btn-solid-red flex-1' + type='button' + onClick={submitCancelTransaction} + > + Ya, Batalkan + </button> + <button className='btn-light flex-1' type='button' onClick={() => setToCancel(null)}> + Batal + </button> + </div> + </BottomPopup> </div> - <div className='flex mt-6 gap-x-4'> - <button - className='btn-solid-red flex-1' - type='button' - onClick={submitCancelTransaction} - > - Ya, Batalkan - </button> - <button - className='btn-light flex-1' - type='button' - onClick={() => setToCancel(null)} - > - Batal - </button> + </MobileView> + + <DesktopView> + <div className='container mx-auto flex py-10'> + <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='flex mb-6 items-center justify-between'> + <h1 className='text-title-sm font-semibold'> + Daftar Transaksi{' '} + {transactions?.data?.saleOrders ? `(${transactions?.data?.saleOrders.length})` : ''} + </h1> + <form className='flex gap-x-2' onSubmit={handleSubmit}> + <input + type='text' + className='form-input' + placeholder='Cari Transaksi...' + value={inputQuery} + onChange={(e) => setInputQuery(e.target.value)} + /> + <button className='btn-light bg-transparent px-3' type='submit'> + <MagnifyingGlassIcon className='w-6' /> + </button> + </form> + </div> + <table className='table-data'> + <thead> + <tr> + <th>No. Transaksi</th> + <th>Tanggal</th> + <th className='!text-left'>Salesperson</th> + <th className='!text-left'>Total</th> + <th>Status</th> + </tr> + </thead> + <tbody> + {transactions.isLoading && ( + <tr> + <td colSpan={5}> + <div className='flex justify-center my-2'> + <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' /> + </div> + </td> + </tr> + )} + {!transactions.isLoading && + (!transactions?.data?.saleOrders || + transactions?.data?.saleOrders?.length == 0) && ( + <tr> + <td colSpan={5}>Tidak ada data transaksi</td> + </tr> + )} + {transactions.data?.saleOrders?.map((saleOrder) => ( + <tr key={saleOrder.id}> + <td> + <Link href={`/my/transaction/${saleOrder.id}`}>{saleOrder.name}</Link> + </td> + <td>-</td> + <td className='!text-left'>{saleOrder.sales}</td> + <td className='!text-left'>{currencyFormat(saleOrder.amountTotal)}</td> + <td> + <div className='flex justify-center'> + <TransactionStatusBadge status={saleOrder.status} /> + </div> + </td> + </tr> + ))} + </tbody> + </table> + + <Pagination + pageCount={pageCount} + currentPage={parseInt(page)} + url={`/my/transactions${pageQuery}`} + className='mt-2 mb-2' + /> + </div> </div> - </BottomPopup> - </div> + </DesktopView> + </> ) } |