From bc04e721d51e149709ab3cfaf5e77ef034511860 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 27 Mar 2023 10:17:49 +0700
Subject: invoice, invoice detail, address, create address, edit address,
 wishlist

---
 src/lib/invoice/components/Invoices.jsx | 313 ++++++++++++++++++++------------
 1 file changed, 192 insertions(+), 121 deletions(-)

(limited to 'src/lib/invoice/components/Invoices.jsx')

diff --git a/src/lib/invoice/components/Invoices.jsx b/src/lib/invoice/components/Invoices.jsx
index ab318a3c..51041316 100644
--- a/src/lib/invoice/components/Invoices.jsx
+++ b/src/lib/invoice/components/Invoices.jsx
@@ -16,6 +16,9 @@ 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 MobileView from '@/core/components/views/MobileView'
+import DesktopView from '@/core/components/views/DesktopView'
+import Menu from '@/lib/auth/components/Menu'
 
 const Invoices = () => {
   const router = useRouter()
@@ -44,133 +47,201 @@ const Invoices = () => {
   }
 
   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...'
-          value={inputQuery}
-          onChange={(e) => setInputQuery(e.target.value)}
-        />
-        <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' />
-        </div>
-      )}
-
-      {!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'>
-            <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>
-            </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>
-          </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>
+    <>
+      <MobileView>
+        <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>
+          </form>
+
+          {invoices.isLoading && (
+            <div className='flex justify-center my-4'>
+              <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
             </div>
-            <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>
-              </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>
+          )}
+
+          {!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'>
+                <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>
+                </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>
               </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>
+                <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>
+                  </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>
+                </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' />
+                  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' />
+                  Faktur Pajak
+                </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' />
-              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' />
-              Faktur Pajak
+          ))}
+
+          <Pagination
+            pageCount={pageCount}
+            currentPage={parseInt(page)}
+            url={`/my/invoices${pageQuery}`}
+            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)
+                }}
+              >
+                Download Invoice
+              </button>
+              <button
+                className='text-left disabled:opacity-60'
+                disabled={!toOthers?.efaktur}
+                onClick={() => {
+                  downloadTaxInvoice(toOthers)
+                  setToOthers(null)
+                }}
+              >
+                Download Faktur Pajak
+              </button>
             </div>
-          )}
+          </BottomPopup>
         </div>
-      ))}
-
-      <Pagination
-        pageCount={pageCount}
-        currentPage={parseInt(page)}
-        url={`/my/invoices${pageQuery}`}
-        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)
-            }}
-          >
-            Download Invoice
-          </button>
-          <button
-            className='text-left disabled:opacity-60'
-            disabled={!toOthers?.efaktur}
-            onClick={() => {
-              downloadTaxInvoice(toOthers)
-              setToOthers(null)
-            }}
-          >
-            Download Faktur Pajak
-          </button>
+      </MobileView>
+
+      <DesktopView>
+        <div className='container mx-auto flex py-10'>
+          <div className='w-3/12 pr-4'>
+            <Menu />
+          </div>
+          <div className='w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
+            <div className='flex mb-6 items-center justify-between'>
+              <h1 className='text-title-sm font-semibold'>
+                Invoice & Faktur Pajak{' '}
+                {invoices?.data?.invoices ? `(${invoices?.data?.invoices.length})` : ''}
+              </h1>
+              <form className='flex gap-x-2' 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>
+              </form>
+            </div>
+
+            <table className='table-data'>
+              <thead>
+                <tr>
+                  <th>No. Invoice</th>
+                  <th>No. PO</th>
+                  <th>Tanggal</th>
+                  <th className='!text-left'>Salesperson</th>
+                  <th>Status</th>
+                  <th className='!text-left'>Total</th>
+                </tr>
+              </thead>
+              <tbody>
+                {invoices.isLoading && (
+                  <tr>
+                    <td colSpan={5}>
+                      <div className='flex justify-center my-2'>
+                        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+                      </div>
+                    </td>
+                  </tr>
+                )}
+                {!invoices.isLoading &&
+                  (!invoices?.data?.invoices || invoices?.data?.invoices?.length == 0) && (
+                    <tr>
+                      <td colSpan={6}>Tidak ada data invoice</td>
+                    </tr>
+                  )}
+                {invoices.data?.invoices?.map((invoice) => (
+                  <tr key={invoice.id}>
+                    <td>
+                      <Link href={`/my/invoice/${invoice.id}`}>{invoice.name}</Link>
+                    </td>
+                    <td>{invoice.purchaseOrderName || '-'}</td>
+                    <td>{invoice.invoiceDate}</td>
+                    <td className='!text-left'>{invoice.sales}</td>
+                    <td>
+                      {invoice.amountResidual > 0 ? (
+                        <div className='badge-solid-red h-fit mx-auto'>Belum Lunas</div>
+                      ) : (
+                        <div className='badge-solid-green h-fit mx-auto'>Lunas</div>
+                      )}
+                    </td>
+                    <td className='!text-left'>{currencyFormat(invoice.amountTotal)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+
+            <Pagination
+              pageCount={pageCount}
+              currentPage={parseInt(page)}
+              url={`/my/transactions${pageQuery}`}
+              className='mt-2 mb-2'
+            />
+          </div>
         </div>
-      </BottomPopup>
-    </div>
+      </DesktopView>
+    </>
   )
 }
 
-- 
cgit v1.2.3