fix

1 files changed, 149 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..97eb5f91
--- /dev/null
+++ b/src/lib/transaction/components/Transactions.jsx
@@ -0,0 +1,149 @@
+import { useRouter } from "next/router"
+import { getAuth } from "@/core/utils/auth"
+import { useState } from "react"
+import { toast } from "react-hot-toast"
+import { EllipsisVerticalIcon } 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"
+
+const Transactions = () => {
+  const auth = getAuth()
+  const router = useRouter()
+  const {
+    q = '',
+    page = 1
+  } = router.query
+
+  const { transactions } = useTransactions({
+    partnerId: auth?.partnerId,
+    query: {
+      name: q,
+      limit: 30,
+      offset: (page - 1) * 30
+    }
+  })
+
+  const [ toOthers, setToOthers ] = useState(null)
+  const [ toDelete, setToDelete ] = useState(null)
+
+  const submitCancelTransaction = async () => {
+    const isCancelled = await cancelTransactionApi({
+      partnerId: auth.partnerId,
+      transaction: toDelete
+    })
+    if (isCancelled) {
+      toast.success('Berhasil batalkan transaksi')
+      transactions.refetch()
+    }
+    setToDelete(null)
+  }
+
+  return (
+    <div className="p-4">
+      <div className="flex flex-col gap-y-4">
+        { transactions.isLoading && (
+          <div className="flex justify-center my-4">
+            <Spinner className="w-6 text-gray_r-12/50 fill-gray_r-12" />
+          </div>
+        ) }
+        { 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>
+
+      <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(auth.partnerId, toOthers); setToOthers(null) }}
+          >
+            Download PO
+          </button>
+          <button 
+            className="text-left disabled:opacity-60"
+            disabled={toOthers?.status != 'draft'}
+            onClick={() => { downloadQuotation(auth.partnerId, toOthers); setToOthers(null) }}
+          >
+            Download Quotation
+          </button>
+          <button 
+            className="text-left disabled:opacity-60" 
+            disabled={ toOthers?.status != 'waiting' }
+            onClick={() => { setToDelete(toOthers); setToOthers(null) }}
+          >
+            Batalkan Transaksi
+          </button>
+        </div>
+      </BottomPopup>
+
+      <BottomPopup
+        active={toDelete}
+        close={() => setToDelete(null)}
+        title="Batalkan Transaksi"
+      >
+        <div className="leading-7 text-gray_r-12/80">
+          Apakah anda yakin membatalkan transaksi <span className="underline">{toDelete?.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={() => setToDelete(null)}
+          >
+            Batal
+          </button>
+        </div>
+      </BottomPopup>
+    </div>
+  )
+}
+
+export default Transactions
\ No newline at end of file