From ed950b23d50f9b3993cfd2ac2386a5b3a68d5e57 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 20 Feb 2023 17:03:28 +0700
Subject: fix

---
 src/lib/transaction/components/Transactions.jsx | 149 ++++++++++++++++++++++++
 1 file changed, 149 insertions(+)
 create mode 100644 src/lib/transaction/components/Transactions.jsx

(limited to 'src/lib/transaction/components/Transactions.jsx')

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
-- 
cgit v1.2.3


From e9409874e44c5bdc7d60f6cdb8910d7bc0a12318 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 20 Feb 2023 17:24:02 +0700
Subject: fix

---
 src/lib/transaction/components/Transactions.jsx | 59 ++++++++++++++++++++-----
 1 file changed, 48 insertions(+), 11 deletions(-)

(limited to 'src/lib/transaction/components/Transactions.jsx')

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)}>
-- 
cgit v1.2.3


From 4fd738fd54f81fa53c2b3e78b7a80fbfda250352 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 21 Feb 2023 10:19:32 +0700
Subject: fix

---
 src/lib/transaction/components/Transactions.jsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/lib/transaction/components/Transactions.jsx')

diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx
index 45a6445c..5eb1d947 100644
--- a/src/lib/transaction/components/Transactions.jsx
+++ b/src/lib/transaction/components/Transactions.jsx
@@ -56,7 +56,6 @@ const Transactions = () => {
 
   const handleSubmit = (e) => {
     e.preventDefault()
-    if (!inputQuery) return
     router.push(`/my/transactions?q=${inputQuery}`)
   } 
 
-- 
cgit v1.2.3


From fdfb47c3a825258b871ac5921605642e5e05fdd8 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 21 Feb 2023 12:04:20 +0700
Subject: fix

---
 src/lib/transaction/components/Transactions.jsx | 32 +++++++++++++++----------
 1 file changed, 19 insertions(+), 13 deletions(-)

(limited to 'src/lib/transaction/components/Transactions.jsx')

diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx
index 5eb1d947..246a4a2c 100644
--- a/src/lib/transaction/components/Transactions.jsx
+++ b/src/lib/transaction/components/Transactions.jsx
@@ -14,6 +14,7 @@ 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()
@@ -29,24 +30,22 @@ const Transactions = () => {
     offset: (page - 1) * limit,
     limit
   }
-
-  const [ inputQuery, setInputQuery ] = useState(q)
-
   const { transactions } = useTransactions({ query })
 
+  const [ inputQuery, setInputQuery ] = useState(q)
   const [ toOthers, setToOthers ] = useState(null)
-  const [ toDelete, setToDelete ] = useState(null)
+  const [ toCancel, setToCancel ] = useState(null)
 
   const submitCancelTransaction = async () => {
     const isCancelled = await cancelTransactionApi({
       partnerId: auth.partnerId,
-      transaction: toDelete
+      transaction: toCancel
     })
     if (isCancelled) {
       toast.success('Berhasil batalkan transaksi')
       transactions.refetch()
     }
-    setToDelete(null)
+    setToCancel(null)
   }
 
   const pageCount = Math.ceil(transactions?.data?.saleOrderTotal / limit)
@@ -82,6 +81,13 @@ const Transactions = () => {
             <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">
@@ -132,21 +138,21 @@ const Transactions = () => {
           <button 
             className="text-left disabled:opacity-60"
             disabled={!toOthers?.purchaseOrderFile}
-            onClick={() => { downloadPurchaseOrder(auth.partnerId, toOthers); setToOthers(null) }}
+            onClick={() => { downloadPurchaseOrder(toOthers); setToOthers(null) }}
           >
             Download PO
           </button>
           <button 
             className="text-left disabled:opacity-60"
             disabled={toOthers?.status != 'draft'}
-            onClick={() => { downloadQuotation(auth.partnerId, toOthers); setToOthers(null) }}
+            onClick={() => { downloadQuotation(toOthers); setToOthers(null) }}
           >
             Download Quotation
           </button>
           <button 
             className="text-left disabled:opacity-60" 
             disabled={ toOthers?.status != 'waiting' }
-            onClick={() => { setToDelete(toOthers); setToOthers(null) }}
+            onClick={() => { setToCancel(toOthers); setToOthers(null) }}
           >
             Batalkan Transaksi
           </button>
@@ -154,12 +160,12 @@ const Transactions = () => {
       </BottomPopup>
 
       <BottomPopup
-        active={toDelete}
-        close={() => setToDelete(null)}
+        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">{toDelete?.name}</span>?
+          Apakah anda yakin membatalkan transaksi <span className="underline">{toCancel?.name}</span>?
         </div>
         <div className="flex mt-6 gap-x-4">
           <button 
@@ -172,7 +178,7 @@ const Transactions = () => {
           <button 
             className="btn-light flex-1" 
             type="button"
-            onClick={() => setToDelete(null)}
+            onClick={() => setToCancel(null)}
           >
             Batal
           </button>
-- 
cgit v1.2.3


From 3f2ff1475676ba47a841796e39e7d17d627e5356 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 21 Feb 2023 14:46:24 +0700
Subject: fix

---
 src/lib/transaction/components/Transactions.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'src/lib/transaction/components/Transactions.jsx')

diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx
index 246a4a2c..25a6076a 100644
--- a/src/lib/transaction/components/Transactions.jsx
+++ b/src/lib/transaction/components/Transactions.jsx
@@ -38,7 +38,6 @@ const Transactions = () => {
 
   const submitCancelTransaction = async () => {
     const isCancelled = await cancelTransactionApi({
-      partnerId: auth.partnerId,
       transaction: toCancel
     })
     if (isCancelled) {
@@ -171,7 +170,7 @@ const Transactions = () => {
           <button 
             className="btn-solid-red flex-1" 
             type="button"
-            onClick={() => submitCancelTransaction()}
+            onClick={submitCancelTransaction}
           >
             Ya, Batalkan
           </button>
-- 
cgit v1.2.3


From de7361718def0f6bb32294bb074841ba2c0a3ce6 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 21 Feb 2023 16:25:35 +0700
Subject: fix

---
 src/lib/transaction/components/Transactions.jsx | 133 ++++++++++++------------
 1 file changed, 66 insertions(+), 67 deletions(-)

(limited to 'src/lib/transaction/components/Transactions.jsx')

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">
-- 
cgit v1.2.3


From f66b12fd1d0b83af0d7230d7b1565fbe00afbe3c Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 11:03:34 +0700
Subject: prettier

---
 src/lib/transaction/components/Transactions.jsx | 192 ++++++++++++------------
 1 file changed, 94 insertions(+), 98 deletions(-)

(limited to 'src/lib/transaction/components/Transactions.jsx')

diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx
index 280e8fc5..f582319d 100644
--- a/src/lib/transaction/components/Transactions.jsx
+++ b/src/lib/transaction/components/Transactions.jsx
@@ -1,27 +1,24 @@
-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"
+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 { q = '', page = 1 } = router.query
 
   const limit = 10
 
@@ -32,9 +29,9 @@ const Transactions = () => {
   }
   const { transactions } = useTransactions({ query })
 
-  const [ inputQuery, setInputQuery ] = useState(q)
-  const [ toOthers, setToOthers ] = useState(null)
-  const [ toCancel, setToCancel ] = useState(null)
+  const [inputQuery, setInputQuery] = useState(q)
+  const [toOthers, setToOthers] = useState(null)
+  const [toCancel, setToCancel] = useState(null)
 
   const submitCancelTransaction = async () => {
     const isCancelled = await cancelTransactionApi({
@@ -55,129 +52,128 @@ const Transactions = () => {
   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..."
+    <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 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" />
+
+      {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">
+      {!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">
+      {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>
+              <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">
+            <div className='flex gap-x-1 justify-end'>
               <TransactionStatusBadge status={saleOrder.status} />
-              <EllipsisVerticalIcon className="w-5 h-5" onClick={() => setToOthers(saleOrder)} />
+              <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 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>
+                <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 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 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>
+                <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 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)} 
+        currentPage={parseInt(page)}
         url={`/my/transactions${pageQuery}`}
-        className="mt-2 mb-2"
+        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"
+      <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) }}
+            onClick={() => {
+              downloadPurchaseOrder(toOthers)
+              setToOthers(null)
+            }}
           >
             Download PO
           </button>
-          <button 
-            className="text-left disabled:opacity-60"
+          <button
+            className='text-left disabled:opacity-60'
             disabled={toOthers?.status != 'draft'}
-            onClick={() => { downloadQuotation(toOthers); setToOthers(null) }}
+            onClick={() => {
+              downloadQuotation(toOthers)
+              setToOthers(null)
+            }}
           >
             Download Quotation
           </button>
-          <button 
-            className="text-left disabled:opacity-60" 
-            disabled={ toOthers?.status != 'waiting' }
-            onClick={() => { setToCancel(toOthers); setToOthers(null) }}
+          <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 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}
-          >
+        <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)}
-          >
+          <button className='btn-light flex-1' type='button' onClick={() => setToCancel(null)}>
             Batal
           </button>
         </div>
@@ -186,4 +182,4 @@ const Transactions = () => {
   )
 }
 
-export default Transactions
\ No newline at end of file
+export default Transactions
-- 
cgit v1.2.3


From ac3fdf7be9982e65d8f83a20bc487f8dd62e3bfc Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 23:36:47 +0700
Subject: fix

---
 src/lib/transaction/components/Transactions.jsx | 49 ++++++++++++++++++++-----
 1 file changed, 40 insertions(+), 9 deletions(-)

(limited to 'src/lib/transaction/components/Transactions.jsx')

diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx
index f582319d..ccbdede2 100644
--- a/src/lib/transaction/components/Transactions.jsx
+++ b/src/lib/transaction/components/Transactions.jsx
@@ -56,7 +56,10 @@ const Transactions = () => {
 
   return (
     <div className='p-4 flex flex-col gap-y-4'>
-      <form className='flex gap-x-3' onSubmit={handleSubmit}>
+      <form
+        className='flex gap-x-3'
+        onSubmit={handleSubmit}
+      >
         <input
           type='text'
           className='form-input'
@@ -64,7 +67,10 @@ const Transactions = () => {
           value={inputQuery}
           onChange={(e) => setInputQuery(e.target.value)}
         />
-        <button className='btn-light bg-transparent px-3' type='submit'>
+        <button
+          className='btn-light bg-transparent px-3'
+          type='submit'
+        >
           <MagnifyingGlassIcon className='w-6' />
         </button>
       </form>
@@ -76,13 +82,19 @@ const Transactions = () => {
       )}
 
       {!transactions.isLoading && transactions.data?.saleOrders?.length === 0 && (
-        <Alert type='info' className='text-center'>
+        <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='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>
@@ -90,7 +102,10 @@ const Transactions = () => {
             </Link>
             <div className='flex gap-x-1 justify-end'>
               <TransactionStatusBadge status={saleOrder.status} />
-              <EllipsisVerticalIcon className='w-5 h-5' onClick={() => setToOthers(saleOrder)} />
+              <EllipsisVerticalIcon
+                className='w-5 h-5'
+                onClick={() => setToOthers(saleOrder)}
+              />
             </div>
           </div>
           <Link href={`/my/transaction/${saleOrder.id}`}>
@@ -129,7 +144,11 @@ const Transactions = () => {
         className='mt-2 mb-2'
       />
 
-      <BottomPopup title='Lainnya' active={toOthers} close={() => setToOthers(null)}>
+      <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'
@@ -164,16 +183,28 @@ const Transactions = () => {
         </div>
       </BottomPopup>
 
-      <BottomPopup active={toCancel} close={() => setToCancel(null)} title='Batalkan Transaksi'>
+      <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}>
+          <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)}>
+          <button
+            className='btn-light flex-1'
+            type='button'
+            onClick={() => setToCancel(null)}
+          >
             Batal
           </button>
         </div>
-- 
cgit v1.2.3

