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/Transaction.jsx  | 377 ++++++++++++------------
 src/lib/transaction/components/Transactions.jsx | 133 +++++----
 2 files changed, 253 insertions(+), 257 deletions(-)

(limited to 'src/lib/transaction')

diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 143b24bb..e049a9ac 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -77,216 +77,213 @@ const Transaction = ({ id }) => {
     transaction.refetch()
   }
 
-  return (
-    <>
-      { transaction.isLoading && (
-        <div className="flex justify-center my-4">
-          <Spinner className="w-6 text-gray_r-12/50 fill-gray_r-12" />
-        </div>
-      ) }
+  if (transaction.isLoading) {
+    return (
+      <div className="flex justify-center my-4">
+        <Spinner className="w-6 text-gray_r-12/50 fill-gray_r-12" />
+      </div>
+    )
+  }
 
-      { 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>
+  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>
-          
-          <Divider />
+        </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>
+      <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 />
+      <Divider />
 
-          <div className="font-medium p-4">Detail Produk</div>
+      <div className="font-medium p-4">Detail Produk</div>
 
-          <div className="p-4 pt-0 flex flex-col gap-y-3">
-            <VariantGroupCard 
-              variants={transaction.data?.products} 
-              buyMore 
-            />
-            <div className="flex justify-between mt-3 font-medium">
-              <p>Total Belanja</p>
-              <p>{ currencyFormat(transaction.data?.amountTotal) }</p>
-            </div>
-          </div>
+      <div className="p-4 pt-0 flex flex-col gap-y-3">
+        <VariantGroupCard 
+          variants={transaction.data?.products} 
+          buyMore 
+        />
+        <div className="flex justify-between mt-3 font-medium">
+          <p>Total Belanja</p>
+          <p>{ currencyFormat(transaction.data?.amountTotal) }</p>
+        </div>
+      </div>
 
-          <Divider />
-          
-          <SectionButton 
-            label="Detail Pelanggan" 
-            active={section.customer}
-            toggle={() => toggleSection('customer')}
-          />
+      <Divider />
+      
+      <SectionButton 
+        label="Detail Pelanggan" 
+        active={section.customer}
+        toggle={() => toggleSection('customer')}
+      />
 
-          { section.customer && <SectionContent address={transaction.data?.address?.customer} /> }
+      { section.customer && <SectionContent address={transaction.data?.address?.customer} /> }
 
-          <Divider />
-          
-          <SectionButton 
-            label="Detail Pengiriman" 
-            active={section.shipping}
-            toggle={() => toggleSection('shipping')}
-          />
+      <Divider />
+      
+      <SectionButton 
+        label="Detail Pengiriman" 
+        active={section.shipping}
+        toggle={() => toggleSection('shipping')}
+      />
 
-          { section.shipping && <SectionContent address={transaction.data?.address?.shipping} /> }
+      { section.shipping && <SectionContent address={transaction.data?.address?.shipping} /> }
 
-          <Divider />
-          
-          <SectionButton 
-            label="Detail Penagihan" 
-            active={section.invoice}
-            toggle={() => toggleSection('invoice')}
-          />
+      <Divider />
+      
+      <SectionButton 
+        label="Detail Penagihan" 
+        active={section.invoice}
+        toggle={() => toggleSection('invoice')}
+      />
 
-          { section.invoice && <SectionContent address={transaction.data?.address?.invoice} /> }
+      { section.invoice && <SectionContent address={transaction.data?.address?.invoice} /> }
 
-          <Divider />
+      <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 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>
-                </Link>
-              )) }
-              { transaction.data?.invoices?.length === 0 && (
-                <Alert type='info' className='text-center'>
-                  Belum ada Invoice
-                </Alert>
-              ) }
-            </div>
-          </div>
-
-          <Divider />
+                </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>
 
-          <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>
+      <Divider />
 
-          <BottomPopup
-            active={cancelTransaction}
-            close={closeCancelTransaction}
-            title="Batalkan Transaksi"
+      <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}
           >
-            <div className="leading-7 text-gray_r-12/80">
-              Apakah anda yakin membatalkan transaksi <span className="underline">{transaction.data?.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={closeCancelTransaction}
-              >
-                Batal
-              </button>
-            </div>
-          </BottomPopup>
+            Batalkan Transaksi
+          </button>
+        ) }
+      </div>
 
-          <BottomPopup
-            title="Upload PO"
-            close={closeUploadPo}
-            active={uploadPo}
+      <BottomPopup
+        active={cancelTransaction}
+        close={closeCancelTransaction}
+        title="Batalkan Transaksi"
+      >
+        <div className="leading-7 text-gray_r-12/80">
+          Apakah anda yakin membatalkan transaksi <span className="underline">{transaction.data?.name}</span>?
+        </div>
+        <div className="flex mt-6 gap-x-4">
+          <button 
+            className="btn-solid-red flex-1" 
+            type="button"
+            onClick={submitCancelTransaction}
           >
-            <div>
-              <label>Nomor PO</label>
-              <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} />
-            </div>
-            <div className="grid grid-cols-2 gap-x-3 mt-6">
-              <button 
-                type="button"
-                className="btn-light w-full"
-                onClick={closeUploadPo}
-              >Batal</button>
-              <button 
-                type="button"
-                className="btn-solid-red w-full"
-                onClick={submitUploadPo}
-              >Upload</button>
-            </div>
-          </BottomPopup>
-        </>
-      )}
+            Ya, Batalkan
+          </button>
+          <button 
+            className="btn-light flex-1" 
+            type="button"
+            onClick={closeCancelTransaction}
+          >
+            Batal
+          </button>
+        </div>
+      </BottomPopup>
 
+      <BottomPopup
+        title="Upload PO"
+        close={closeUploadPo}
+        active={uploadPo}
+      >
+        <div>
+          <label>Nomor PO</label>
+          <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} />
+        </div>
+        <div className="grid grid-cols-2 gap-x-3 mt-6">
+          <button 
+            type="button"
+            className="btn-light w-full"
+            onClick={closeUploadPo}
+          >Batal</button>
+          <button 
+            type="button"
+            className="btn-solid-red w-full"
+            onClick={submitUploadPo}
+          >Upload</button>
+        </div>
+      </BottomPopup>
     </>
   )
 }
@@ -305,7 +302,7 @@ const SectionButton = ({ label, active, toggle }) => (
 const SectionContent = ({ address }) => {
   let fullAddress = []
   if (address?.street) fullAddress.push(address.street)
-  if (address?.sub_district?.name) fullAddress.push(address.sub_district.name)
+  if (address?.subDistrict?.name) fullAddress.push(address.sub_district.name)
   if (address?.district?.name) fullAddress.push(address.district.name)
   if (address?.city?.name) fullAddress.push(address.city.name)
   fullAddress = fullAddress.join(', ')
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