1 files changed, 48 insertions, 11 deletions
diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx
index 97eb5f91..45a6445c 100644
--- a/src/lib/transaction/components/Transactions.jsx
+++ b/src/lib/transaction/components/Transactions.jsx
@@ -1,8 +1,7 @@
 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 { EllipsisVerticalIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"
 
 import { downloadPurchaseOrder, downloadQuotation } from "../utils/transactions"
 import useTransactions from "../hooks/useTransactions"
@@ -12,23 +11,28 @@ 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"
 
 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 limit = 10
+
+  const query = {
+    name: q,
+    offset: (page - 1) * limit,
+    limit
+  }
+
+  const [ inputQuery, setInputQuery ] = useState(q)
+
+  const { transactions } = useTransactions({ query })
 
   const [ toOthers, setToOthers ] = useState(null)
   const [ toDelete, setToDelete ] = useState(null)
@@ -45,9 +49,35 @@ const Transactions = () => {
     setToDelete(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()
+    if (!inputQuery) return
+    router.push(`/my/transactions?q=${inputQuery}`)
+  } 
+
   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" />
@@ -89,6 +119,13 @@ const Transactions = () => {
             </Link>
           </div>
         )) }
+        
+        <Pagination
+          pageCount={pageCount}
+          currentPage={parseInt(page)} 
+          url={`/my/transactions${pageQuery}`}
+          className="mt-2 mb-2"
+        />
       </div>
 
       <BottomPopup title="Lainnya" active={toOthers} close={() => setToOthers(null)}>