Merged in refactor (pull request #1)

Refactor

1 files changed, 216 insertions, 0 deletions

diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx
new file mode 100644
index 00000000..ccbdede2
--- /dev/null
+++ b/src/lib/transaction/components/Transactions.jsx
@@ -0,0 +1,216 @@
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+import { toast } from 'react-hot-toast'
+import { EllipsisVerticalIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline'
+
+import { downloadPurchaseOrder, downloadQuotation } from '../utils/transactions'
+import useTransactions from '../hooks/useTransactions'
+import currencyFormat from '@/core/utils/currencyFormat'
+import cancelTransactionApi from '../api/cancelTransactionApi'
+import TransactionStatusBadge from './TransactionStatusBadge'
+import Spinner from '@/core/components/elements/Spinner/Spinner'
+import Link from '@/core/components/elements/Link/Link'
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import Pagination from '@/core/components/elements/Pagination/Pagination'
+import { toQuery } from 'lodash-contrib'
+import _ from 'lodash'
+import Alert from '@/core/components/elements/Alert/Alert'
+
+const Transactions = () => {
+  const router = useRouter()
+  const { q = '', page = 1 } = router.query
+
+  const limit = 10
+
+  const query = {
+    name: q,
+    offset: (page - 1) * limit,
+    limit
+  }
+  const { transactions } = useTransactions({ query })
+
+  const [inputQuery, setInputQuery] = useState(q)
+  const [toOthers, setToOthers] = useState(null)
+  const [toCancel, setToCancel] = useState(null)
+
+  const submitCancelTransaction = async () => {
+    const isCancelled = await cancelTransactionApi({
+      transaction: toCancel
+    })
+    if (isCancelled) {
+      toast.success('Berhasil batalkan transaksi')
+      transactions.refetch()
+    }
+    setToCancel(null)
+  }
+
+  const pageCount = Math.ceil(transactions?.data?.saleOrderTotal / limit)
+  let pageQuery = _.omit(query, ['limit', 'offset'])
+  pageQuery = _.pickBy(pageQuery, _.identity)
+  pageQuery = toQuery(pageQuery)
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    router.push(`/my/transactions?q=${inputQuery}`)
+  }
+
+  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)}
+              />
+            </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>
+      ))}
+
+      <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>?
+        </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>
+  )
+}
+
+export default Transactions