summaryrefslogtreecommitdiff
path: root/src/lib/transaction
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/transaction')
-rw-r--r--src/lib/transaction/components/Transaction.jsx478
-rw-r--r--src/lib/transaction/components/TransactionStatusBadge.jsx2
-rw-r--r--src/lib/transaction/components/Transactions.jsx362
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>
+ </>
)
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 03:56:42 +0000