diff options
Diffstat (limited to 'src/lib/transaction/components')
| -rw-r--r-- | src/lib/transaction/components/Transaction.jsx | 377 | ||||
| -rw-r--r-- | src/lib/transaction/components/Transactions.jsx | 133 |
2 files changed, 253 insertions, 257 deletions
diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx index 143b24bb..e049a9ac 100644 --- a/src/lib/transaction/components/Transaction.jsx +++ b/src/lib/transaction/components/Transaction.jsx @@ -77,216 +77,213 @@ const Transaction = ({ id }) => { transaction.refetch() } - return ( - <> - { transaction.isLoading && ( - <div className="flex justify-center my-4"> - <Spinner className="w-6 text-gray_r-12/50 fill-gray_r-12" /> - </div> - ) } + if (transaction.isLoading) { + return ( + <div className="flex justify-center my-4"> + <Spinner className="w-6 text-gray_r-12/50 fill-gray_r-12" /> + </div> + ) + } - { 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> + 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> - - <Divider /> + </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> + <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 /> + <Divider /> - <div className="font-medium p-4">Detail Produk</div> + <div className="font-medium p-4">Detail Produk</div> - <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> - </div> - </div> + <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> + </div> + </div> - <Divider /> - - <SectionButton - label="Detail Pelanggan" - active={section.customer} - toggle={() => toggleSection('customer')} - /> + <Divider /> + + <SectionButton + label="Detail Pelanggan" + active={section.customer} + toggle={() => toggleSection('customer')} + /> - { section.customer && <SectionContent address={transaction.data?.address?.customer} /> } + { section.customer && <SectionContent address={transaction.data?.address?.customer} /> } - <Divider /> - - <SectionButton - label="Detail Pengiriman" - active={section.shipping} - toggle={() => toggleSection('shipping')} - /> + <Divider /> + + <SectionButton + label="Detail Pengiriman" + active={section.shipping} + toggle={() => toggleSection('shipping')} + /> - { section.shipping && <SectionContent address={transaction.data?.address?.shipping} /> } + { section.shipping && <SectionContent address={transaction.data?.address?.shipping} /> } - <Divider /> - - <SectionButton - label="Detail Penagihan" - active={section.invoice} - toggle={() => toggleSection('invoice')} - /> + <Divider /> + + <SectionButton + label="Detail Penagihan" + active={section.invoice} + toggle={() => toggleSection('invoice')} + /> - { section.invoice && <SectionContent address={transaction.data?.address?.invoice} /> } + { section.invoice && <SectionContent address={transaction.data?.address?.invoice} /> } - <Divider /> + <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 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> - </Link> - )) } - { transaction.data?.invoices?.length === 0 && ( - <Alert type='info' className='text-center'> - Belum ada Invoice - </Alert> - ) } - </div> - </div> - - <Divider /> + </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> - <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> + <Divider /> - <BottomPopup - active={cancelTransaction} - close={closeCancelTransaction} - title="Batalkan Transaksi" + <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} > - <div className="leading-7 text-gray_r-12/80"> - Apakah anda yakin membatalkan transaksi <span className="underline">{transaction.data?.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={closeCancelTransaction} - > - Batal - </button> - </div> - </BottomPopup> + Batalkan Transaksi + </button> + ) } + </div> - <BottomPopup - title="Upload PO" - close={closeUploadPo} - active={uploadPo} + <BottomPopup + active={cancelTransaction} + close={closeCancelTransaction} + title="Batalkan Transaksi" + > + <div className="leading-7 text-gray_r-12/80"> + Apakah anda yakin membatalkan transaksi <span className="underline">{transaction.data?.name}</span>? + </div> + <div className="flex mt-6 gap-x-4"> + <button + className="btn-solid-red flex-1" + type="button" + onClick={submitCancelTransaction} > - <div> - <label>Nomor PO</label> - <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} /> - </div> - <div className="grid grid-cols-2 gap-x-3 mt-6"> - <button - type="button" - className="btn-light w-full" - onClick={closeUploadPo} - >Batal</button> - <button - type="button" - className="btn-solid-red w-full" - onClick={submitUploadPo} - >Upload</button> - </div> - </BottomPopup> - </> - )} + Ya, Batalkan + </button> + <button + className="btn-light flex-1" + type="button" + onClick={closeCancelTransaction} + > + Batal + </button> + </div> + </BottomPopup> + <BottomPopup + title="Upload PO" + close={closeUploadPo} + active={uploadPo} + > + <div> + <label>Nomor PO</label> + <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} /> + </div> + <div className="grid grid-cols-2 gap-x-3 mt-6"> + <button + type="button" + className="btn-light w-full" + onClick={closeUploadPo} + >Batal</button> + <button + type="button" + className="btn-solid-red w-full" + onClick={submitUploadPo} + >Upload</button> + </div> + </BottomPopup> </> ) } @@ -305,7 +302,7 @@ const SectionButton = ({ label, active, toggle }) => ( const SectionContent = ({ address }) => { let fullAddress = [] if (address?.street) fullAddress.push(address.street) - if (address?.sub_district?.name) fullAddress.push(address.sub_district.name) + if (address?.subDistrict?.name) fullAddress.push(address.sub_district.name) if (address?.district?.name) fullAddress.push(address.district.name) if (address?.city?.name) fullAddress.push(address.city.name) fullAddress = fullAddress.join(', ') diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx index 25a6076a..280e8fc5 100644 --- a/src/lib/transaction/components/Transactions.jsx +++ b/src/lib/transaction/components/Transactions.jsx @@ -58,79 +58,78 @@ const Transactions = () => { } return ( - <div className="p-4"> - <div className="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 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.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)} /> + { 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> - <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 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="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 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> - </Link> - </div> - )) } - - <Pagination - pageCount={pageCount} - currentPage={parseInt(page)} - url={`/my/transactions${pageQuery}`} - className="mt-2 mb-2" - /> - </div> + </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"> |