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/invoice/components/Invoice.jsx  | 165 +++++++++++++-----------------
 src/lib/invoice/components/Invoices.jsx | 175 ++++++++++++++++----------------
 2 files changed, 161 insertions(+), 179 deletions(-)

(limited to 'src/lib/invoice/components')

diff --git a/src/lib/invoice/components/Invoice.jsx b/src/lib/invoice/components/Invoice.jsx
index aee4a498..eaf7b7e0 100644
--- a/src/lib/invoice/components/Invoice.jsx
+++ b/src/lib/invoice/components/Invoice.jsx
@@ -1,17 +1,17 @@
-import Spinner from "@/core/components/elements/Spinner/Spinner"
-import useInvoice from "../hooks/useInvoice"
-import { downloadInvoice, downloadTaxInvoice } from "../utils/invoices"
-import Divider from "@/core/components/elements/Divider/Divider"
-import VariantGroupCard from "@/lib/variant/components/VariantGroupCard"
-import currencyFormat from "@/core/utils/currencyFormat"
+import Spinner from '@/core/components/elements/Spinner/Spinner'
+import useInvoice from '../hooks/useInvoice'
+import { downloadInvoice, downloadTaxInvoice } from '../utils/invoices'
+import Divider from '@/core/components/elements/Divider/Divider'
+import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'
+import currencyFormat from '@/core/utils/currencyFormat'
 
 const Invoice = ({ id }) => {
   const { invoice } = useInvoice({ id })
 
   if (invoice.isLoading) {
     return (
-      <div className="flex justify-center my-6">
-        <Spinner className="w-6 text-gray_r-12/50 fill-gray_r-12" />
+      <div className='flex justify-center my-6'>
+        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
       </div>
     )
   }
@@ -24,103 +24,84 @@ const Invoice = ({ id }) => {
   if (address?.city?.name) fullAddress.push(address.city.name)
   fullAddress = fullAddress.join(', ')
 
-  return invoice.data?.name && (
-    <>
-      <div className="flex flex-col gap-y-4 p-4">
-        <DescriptionRow label="No Invoice">
-          { invoice.data?.name }
-        </DescriptionRow>
-        <DescriptionRow label="Status Transaksi">
-          { invoice.data?.amountResidual > 0 ? (
-            <span className="badge-solid-red">Belum Lunas</span>
+  return (
+    invoice.data?.name && (
+      <>
+        <div className='flex flex-col gap-y-4 p-4'>
+          <DescriptionRow label='No Invoice'>{invoice.data?.name}</DescriptionRow>
+          <DescriptionRow label='Status Transaksi'>
+            {invoice.data?.amountResidual > 0 ? (
+              <span className='badge-solid-red'>Belum Lunas</span>
             ) : (
-            <span className="badge-solid-green">Lunas</span>
-          ) }
-        </DescriptionRow>
-        <DescriptionRow label="Purchase Order">
-          { invoice.data?.purchaseOrderName || '-' }
-        </DescriptionRow>
-        <DescriptionRow label="Ketentuan Pembayaran">
-          { invoice.data?.paymentTerm }
-        </DescriptionRow>
-        { invoice.data?.amountResidual > 0 && invoice.invoiceDate != invoice.invoiceDateDue && (
-          <DescriptionRow label="Tanggal Jatuh Tempo">
-            { invoice.data?.invoiceDateDue }
+              <span className='badge-solid-green'>Lunas</span>
+            )}
           </DescriptionRow>
-        ) }
-        <DescriptionRow label="Nama Sales">
-          { invoice.data?.sales }
-        </DescriptionRow>
-        <DescriptionRow label="Tanggal Invoice">
-          { invoice.data?.invoiceDate }
-        </DescriptionRow>
-        <div className="flex items-center">
-          <p className="text-gray_r-11 leading-none">Invoice</p>
-          <button 
-            type="button"
-            className="btn-light py-1.5 px-3 ml-auto"
-            onClick={() => downloadInvoice(invoice.data)}
-          >
-            Download
-          </button>
-        </div>
-        <div className="flex items-center">
-          <p className="text-gray_r-11 leading-none">Faktur Pajak</p>
-          <button 
-            type="button"
-            className="btn-light py-1.5 px-3 ml-auto"
-            onClick={() => downloadTaxInvoice(invoice.data)}
-            disabled={!invoice.data?.efaktur}
-          >
-            Download
-          </button>
+          <DescriptionRow label='Purchase Order'>
+            {invoice.data?.purchaseOrderName || '-'}
+          </DescriptionRow>
+          <DescriptionRow label='Ketentuan Pembayaran'>{invoice.data?.paymentTerm}</DescriptionRow>
+          {invoice.data?.amountResidual > 0 && invoice.invoiceDate != invoice.invoiceDateDue && (
+            <DescriptionRow label='Tanggal Jatuh Tempo'>
+              {invoice.data?.invoiceDateDue}
+            </DescriptionRow>
+          )}
+          <DescriptionRow label='Nama Sales'>{invoice.data?.sales}</DescriptionRow>
+          <DescriptionRow label='Tanggal Invoice'>{invoice.data?.invoiceDate}</DescriptionRow>
+          <div className='flex items-center'>
+            <p className='text-gray_r-11 leading-none'>Invoice</p>
+            <button
+              type='button'
+              className='btn-light py-1.5 px-3 ml-auto'
+              onClick={() => downloadInvoice(invoice.data)}
+            >
+              Download
+            </button>
+          </div>
+          <div className='flex items-center'>
+            <p className='text-gray_r-11 leading-none'>Faktur Pajak</p>
+            <button
+              type='button'
+              className='btn-light py-1.5 px-3 ml-auto'
+              onClick={() => downloadTaxInvoice(invoice.data)}
+              disabled={!invoice.data?.efaktur}
+            >
+              Download
+            </button>
+          </div>
         </div>
-      </div>
 
-      <Divider />
+        <Divider />
 
-      <div className="p-4 font-medium">
-        Detail Penagihan
-      </div>
-      
-      <div className="flex flex-col gap-y-4 p-4 border-t border-gray_r-6">
-        <DescriptionRow label="Nama">
-          { address?.name }
-        </DescriptionRow>
-        <DescriptionRow label="Email">
-          { address?.email || '-' }
-        </DescriptionRow>
-        <DescriptionRow label="No Telepon">
-          { address?.mobile || '-' }
-        </DescriptionRow>
-        <DescriptionRow label="Alamat">
-          { fullAddress }
-        </DescriptionRow>
-      </div>
+        <div className='p-4 font-medium'>Detail Penagihan</div>
 
-      <Divider />
+        <div className='flex flex-col gap-y-4 p-4 border-t border-gray_r-6'>
+          <DescriptionRow label='Nama'>{address?.name}</DescriptionRow>
+          <DescriptionRow label='Email'>{address?.email || '-'}</DescriptionRow>
+          <DescriptionRow label='No Telepon'>{address?.mobile || '-'}</DescriptionRow>
+          <DescriptionRow label='Alamat'>{fullAddress}</DescriptionRow>
+        </div>
+
+        <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={invoice.data?.products} 
-          buyMore 
-        />
-        <div className="flex justify-between mt-3 font-medium">
-          <p>Total Belanja</p>
-          <p>{ currencyFormat(invoice.data?.amountTotal) }</p>
+        <div className='p-4 pt-0 flex flex-col gap-y-3'>
+          <VariantGroupCard variants={invoice.data?.products} buyMore />
+          <div className='flex justify-between mt-3 font-medium'>
+            <p>Total Belanja</p>
+            <p>{currencyFormat(invoice.data?.amountTotal)}</p>
+          </div>
         </div>
-      </div>
-    </>
+      </>
+    )
   )
 }
 
 const DescriptionRow = ({ children, label }) => (
-  <div className="grid grid-cols-2">
-    <span className="text-gray_r-11">{ label }</span>
-    <span className="text-right">{ children }</span>
+  <div className='grid grid-cols-2'>
+    <span className='text-gray_r-11'>{label}</span>
+    <span className='text-right'>{children}</span>
   </div>
 )
 
-export default Invoice
\ No newline at end of file
+export default Invoice
diff --git a/src/lib/invoice/components/Invoices.jsx b/src/lib/invoice/components/Invoices.jsx
index 37944e33..81521785 100644
--- a/src/lib/invoice/components/Invoices.jsx
+++ b/src/lib/invoice/components/Invoices.jsx
@@ -1,23 +1,25 @@
-import { CheckIcon, ClockIcon, EllipsisVerticalIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"
-import { toQuery } from "lodash-contrib"
-import _ from "lodash"
-import { useRouter } from "next/router"
-import { useState } from "react"
-import useInvoices from "../hooks/useInvoices"
-import Spinner from "@/core/components/elements/Spinner/Spinner"
-import Alert from "@/core/components/elements/Alert/Alert"
-import Pagination from "@/core/components/elements/Pagination/Pagination"
-import Link from "@/core/components/elements/Link/Link"
-import currencyFormat from "@/core/utils/currencyFormat"
-import BottomPopup from "@/core/components/elements/Popup/BottomPopup"
-import { downloadInvoice, downloadTaxInvoice } from "../utils/invoices"
+import {
+  CheckIcon,
+  ClockIcon,
+  EllipsisVerticalIcon,
+  MagnifyingGlassIcon
+} from '@heroicons/react/24/outline'
+import { toQuery } from 'lodash-contrib'
+import _ from 'lodash'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+import useInvoices from '../hooks/useInvoices'
+import Spinner from '@/core/components/elements/Spinner/Spinner'
+import Alert from '@/core/components/elements/Alert/Alert'
+import Pagination from '@/core/components/elements/Pagination/Pagination'
+import Link from '@/core/components/elements/Link/Link'
+import currencyFormat from '@/core/utils/currencyFormat'
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import { downloadInvoice, downloadTaxInvoice } from '../utils/invoices'
 
 const Invoices = () => {
   const router = useRouter()
-  const {
-    q = '',
-    page = 1
-  } = router.query
+  const { q = '', page = 1 } = router.query
 
   const limit = 10
 
@@ -28,8 +30,8 @@ const Invoices = () => {
   }
   const { invoices } = useInvoices({ query })
 
-  const [ inputQuery, setInputQuery ] = useState(q)
-  const [ toOthers, setToOthers ] = useState(null)
+  const [inputQuery, setInputQuery] = useState(q)
+  const [toOthers, setToOthers] = useState(null)
 
   const pageCount = Math.ceil(invoices?.data?.saleOrderTotal / limit)
   let pageQuery = _.omit(query, ['limit', 'offset'])
@@ -39,112 +41,111 @@ const Invoices = () => {
   const handleSubmit = (e) => {
     e.preventDefault()
     router.push(`/my/invoices?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 Invoice..."
+    <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 Invoice...'
           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>
 
-      { invoices.isLoading && (
-        <div className="flex justify-center my-4">
-          <Spinner className="w-6 text-gray_r-12/50 fill-gray_r-12" />
+      {invoices.isLoading && (
+        <div className='flex justify-center my-4'>
+          <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
         </div>
-      ) }
+      )}
 
-      { !invoices.isLoading && invoices.data?.invoices?.length === 0 && (
-        <Alert type="info" className="text-center">
+      {!invoices.isLoading && invoices.data?.invoices?.length === 0 && (
+        <Alert type='info' className='text-center'>
           Tidak ada data invoice
         </Alert>
-      ) }
+      )}
 
-      { invoices.data?.invoices?.map((invoice, index) => (
-        <div className="p-4 shadow border border-gray_r-3 rounded-md" key={index}>
-          <div className="grid grid-cols-2">
+      {invoices.data?.invoices?.map((invoice, index) => (
+        <div className='p-4 shadow border border-gray_r-3 rounded-md' key={index}>
+          <div className='grid grid-cols-2'>
             <Link href={`/my/invoice/${invoice.id}`}>
-              <span className="text-caption-2 text-gray_r-11">No. Invoice</span>
-              <h2 className="text-red_r-11 mt-1">{ invoice.name }</h2>
+              <span className='text-caption-2 text-gray_r-11'>No. Invoice</span>
+              <h2 className='text-red_r-11 mt-1'>{invoice.name}</h2>
             </Link>
-            <div className="flex gap-x-1 justify-end">
-              { invoice.amountResidual > 0 ? (
-                <div className="badge-solid-red h-fit ml-auto">Belum Lunas</div>
-                ) : (
-                <div className="badge-solid-green h-fit ml-auto">Lunas</div>
-              ) }
-              <EllipsisVerticalIcon className="w-5 h-5" onClick={() => setToOthers(invoice)} />
+            <div className='flex gap-x-1 justify-end'>
+              {invoice.amountResidual > 0 ? (
+                <div className='badge-solid-red h-fit ml-auto'>Belum Lunas</div>
+              ) : (
+                <div className='badge-solid-green h-fit ml-auto'>Lunas</div>
+              )}
+              <EllipsisVerticalIcon className='w-5 h-5' onClick={() => setToOthers(invoice)} />
             </div>
           </div>
           <Link href={`/my/invoice/${invoice.id}`}>
-            <div className="grid grid-cols-2 text-caption-2 text-gray_r-11 mt-2 font-normal">
-              <p>
-                { invoice.invoiceDate }
-              </p>
-              <p className="text-right">
-                { invoice.paymentTerm }
-              </p>
+            <div className='grid grid-cols-2 text-caption-2 text-gray_r-11 mt-2 font-normal'>
+              <p>{invoice.invoiceDate}</p>
+              <p className='text-right'>{invoice.paymentTerm}</p>
             </div>
-            <hr className="my-3"/>
-            <div className="grid grid-cols-2">
+            <hr className='my-3' />
+            <div className='grid grid-cols-2'>
               <div>
-                <span className="text-caption-2 text-gray_r-11">No. Purchase Order</span>
-                <p className="mt-1 font-medium text-gray_r-12">{ invoice.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'>
+                  {invoice.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">{ currencyFormat(invoice.amountTotal) }</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'>
+                  {currencyFormat(invoice.amountTotal)}
+                </p>
               </div>
             </div>
           </Link>
-          { invoice.efaktur ? (
-            <div className="badge-green h-fit mt-3 ml-auto flex items-center gap-x-0.5">
-              <CheckIcon className="w-4 stroke-2" />
+          {invoice.efaktur ? (
+            <div className='badge-green h-fit mt-3 ml-auto flex items-center gap-x-0.5'>
+              <CheckIcon className='w-4 stroke-2' />
               Faktur Pajak
             </div>
-            ) : (
-            <div className="badge-red h-fit mt-3 ml-auto flex items-center gap-x-0.5">
-              <ClockIcon className="w-4 stroke-2" />
+          ) : (
+            <div className='badge-red h-fit mt-3 ml-auto flex items-center gap-x-0.5'>
+              <ClockIcon className='w-4 stroke-2' />
               Faktur Pajak
             </div>
-          ) }
+          )}
         </div>
-      )) }
+      ))}
 
       <Pagination
         pageCount={pageCount}
-        currentPage={parseInt(page)} 
+        currentPage={parseInt(page)}
         url={`/my/invoices${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"
-            onClick={() => { downloadInvoice(toOthers); 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'
+            onClick={() => {
+              downloadInvoice(toOthers)
+              setToOthers(null)
+            }}
           >
             Download Invoice
           </button>
-          <button 
-            className="text-left disabled:opacity-60"
+          <button
+            className='text-left disabled:opacity-60'
             disabled={!toOthers?.efaktur}
-            onClick={() => { downloadTaxInvoice(toOthers); setToOthers(null) }}
+            onClick={() => {
+              downloadTaxInvoice(toOthers)
+              setToOthers(null)
+            }}
           >
             Download Faktur Pajak
           </button>
@@ -154,4 +155,4 @@ const Invoices = () => {
   )
 }
 
-export default Invoices
\ No newline at end of file
+export default Invoices
-- 
cgit v1.2.3