From cf92e065f057737071e6cd7c666a4f1c475bb613 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 15 Nov 2024 14:21:17 +0700
Subject: <iman> update pengajuan tempo

---
 src/lib/tempo/components/Tempo.jsx | 305 ++++++++++++++++++++++++-------------
 1 file changed, 201 insertions(+), 104 deletions(-)

(limited to 'src/lib')

diff --git a/src/lib/tempo/components/Tempo.jsx b/src/lib/tempo/components/Tempo.jsx
index 3f6e36d1..ef516c64 100644
--- a/src/lib/tempo/components/Tempo.jsx
+++ b/src/lib/tempo/components/Tempo.jsx
@@ -4,6 +4,7 @@ import {
   EllipsisVerticalIcon,
   MagnifyingGlassIcon,
 } from '@heroicons/react/24/outline';
+import { Skeleton } from '@chakra-ui/react';
 import { div, toQuery } from 'lodash-contrib';
 import _ from 'lodash';
 import { useRouter } from 'next/router';
@@ -25,33 +26,37 @@ import Menu from '@/lib/auth/components/Menu';
 import odooApi from '@/core/api/odooApi';
 import { getAuth } from '@/core/utils/auth';
 import ProgressBar from '@ramonak/react-progress-bar';
+import FooterBanner from '~/modules/footer-banner';
 const Tempo = () => {
   const auth = getAuth();
   const router = useRouter();
-  const { q = '', page = 1 } = router.query;
+  const { q = '', page = 1, limit = 15 } = router.query;
 
-  const limit = 15;
+  const [pageNew, setPageNew] = useState(page);
+  const [limitNew, setLimitNew] = useState(limit);
 
   const query = {
     name: q,
-    offset: (page - 1) * limit,
-    limit,
+    offset: (pageNew - 1) * limitNew,
+    limit: limitNew,
   };
   const { invoices } = useInvoices({ query });
-
+  console.log('invoices', invoices);
   const [isLoading, setIsLoading] = useState(true);
   const [tempo, setTempo] = useState([]);
   const [inputQuery, setInputQuery] = useState(q);
   const [toOthers, setToOthers] = useState(null);
 
-  const pageCount = Math.ceil(invoices?.data?.invoiceTotal / limit);
-  let pageQuery = _.omit(query, ['limit', 'offset']);
+  const pageCount = Math.ceil(invoices?.data?.invoiceTotal / limitNew);
+  let pageQuery = _.omit(query, ['limitNew', 'offset']);
+  console.log('pageQuery1', pageQuery);
   pageQuery = _.pickBy(pageQuery, _.identity);
+  console.log('pageQuery2', pageQuery);
   pageQuery = toQuery(pageQuery);
-
+  console.log('pageQuery3', pageQuery);
   const handleSubmit = (e) => {
     e.preventDefault();
-    router.push(`/my/invoices?q=${inputQuery}`);
+    router.push(`/my/tempo?q=${inputQuery}`);
   };
   useEffect(() => {
     const loadTempo = async () => {
@@ -76,6 +81,8 @@ const Tempo = () => {
     if (Math.round((amountDue / limitTempo) * 100) >= 50) return 'Hampir Habis';
     return '';
   };
+  const startItem = 1 + (pageNew - 1) * limitNew;
+  const endItem = Math.min(limitNew * pageNew, invoices?.data?.invoiceTotal);
   return (
     <>
       <DesktopView>
@@ -83,26 +90,44 @@ const Tempo = () => {
           <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='w-9/12 p-4 bg-white border border-gray_r-6 rounded flex flex-col gap-y-4'>
             <div className='flex flex-col mb-6 items-start justify-start'>
               <h1 className='text-title-sm font-semibold'>Pembayaran Tempo</h1>
-              <p>
-                Jenis Tempo Pembayaran Anda adalah :{' '}
-                {!isLoading && (
-                  <span className='badge-solid-green px-2'>
-                    {tempo.paymentTerm}
-                  </span>
-                )}
+              <p className='flex flex-row gap-2 w-full'>
+                Jenis Tempo Pembayaran Anda adalah{' '}
+                <Skeleton
+                  isLoaded={!isLoading}
+                  h='fit'
+                  w={32}
+                  className='badge-solid-green px-2 text-sm flex items-center justify-center font-thin'
+                >
+                  {' '}
+                  {tempo.paymentTerm}
+                </Skeleton>
               </p>
             </div>
             <div className='grid grid-flow-col gap-4 mb-4'>
               <div className='border  w-full p-4'>
                 <p>Limit Tempo Terpakai</p>
-                <h1>{!isLoading && currencyFormat(amountDue)}</h1>
+                <Skeleton
+                  isLoaded={!isLoading}
+                  h='36px'
+                  // w={16}
+                  className='text-3xl font-semibold'
+                >
+                  {currencyFormat(amountDue)}
+                </Skeleton>
               </div>
               <div className='border w-full p-4'>
                 <p>Limit Tempo</p>
-                <h1>{!isLoading && currencyFormat(limitTempo)}</h1>
+                <Skeleton
+                  isLoaded={!isLoading}
+                  h='36px'
+                  // w={16}
+                  className='text-3xl font-semibold'
+                >
+                  {currencyFormat(limitTempo)}
+                </Skeleton>
               </div>
             </div>
 
@@ -122,102 +147,174 @@ const Tempo = () => {
                 {getLabel()}
               </span>
             </div>
+            <div className='border p-4 rounded mt-4'>
+              <div className='flex mb-6 items-center justify-between mt-4'>
+                <form className='flex' onSubmit={handleSubmit}>
+                  <button className='bg-gray_r-2 px-3' type='submit'>
+                    <MagnifyingGlassIcon className='w-6' />
+                  </button>
+                  <input
+                    type='text'
+                    className='form-input bg-gray_r-2 border-none'
+                    placeholder='Cari Invoice...'
+                    value={inputQuery}
+                    onChange={(e) => setInputQuery(e.target.value)}
+                  />
+                </form>
+                {!invoices.isLoading && (
+                  <div className='flex flex-row gap-4 items-center justify-center'>
+                    <p>
+                      Menampilkan {startItem}-{endItem} dari{' '}
+                      {invoices?.data?.invoiceTotal}
+                    </p>
+                    <select
+                      id='limitSelect'
+                      value={limitNew}
+                      onChange={(e) => {
+                        setLimitNew(Number(e.target.value));
+                        setPageNew(1);
+                      }}
+                      className='border p-2'
+                    >
+                      <option value={10}>10</option>
+                      <option value={15}>15</option>
+                      <option value={20}>20</option>
+                    </select>
+                  </div>
+                )}
+              </div>
 
-            <div className='flex mb-6 items-center justify-between mt-4'>
-              <form className='flex gap-x-2' onSubmit={handleSubmit}>
-                <button className='btn-light bg-transparent px-3' type='submit'>
-                  <MagnifyingGlassIcon className='w-6' />
-                </button>
-                <input
-                  type='text'
-                  className='form-input'
-                  placeholder='Cari Nomor Pesanan anda'
-                  value={inputQuery}
-                  onChange={(e) => setInputQuery(e.target.value)}
-                />
-              </form>
-            </div>
-
-            <table className='table-data'>
-              <thead>
-                <tr>
-                  <th>No. Invoice</th>
-                  <th>No. Transaksi</th>
-                  <th className='!text-left'>Salesperson</th>
-                  <th>Tanggal</th>
-                  <th>Jatuh Tempo</th>
-                  <th>Status</th>
-                  <th className='!text-left'>Total</th>
-                </tr>
-              </thead>
-              <tbody>
-                {invoices.isLoading && (
+              <table className='table-data'>
+                <thead>
                   <tr>
-                    <td colSpan={6}>
-                      <div className='flex justify-center my-2'>
-                        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
-                      </div>
-                    </td>
+                    <th>No. Invoice</th>
+                    <th>No. Transaksi</th>
+                    <th className='!text-left'>Salesperson</th>
+                    <th>Tanggal</th>
+                    <th>Jatuh Tempo</th>
+                    <th>Status</th>
+                    <th className='!text-left'>Total</th>
                   </tr>
-                )}
-                {!invoices.isLoading &&
-                  (!invoices?.data?.invoices ||
-                    invoices?.data?.invoices?.length == 0) && (
+                </thead>
+                <tbody>
+                  {invoices.isLoading && (
                     <tr>
-                      <td colSpan={6}>Tidak ada invoice</td>
+                      <td colSpan={6}>
+                        <div className='flex justify-center my-2'>
+                          <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+                        </div>
+                      </td>
                     </tr>
                   )}
-                {invoices.data?.invoices?.map((invoice) => (
-                  <tr key={invoice.id}>
-                    <td>
-                      <Link href={`${router.pathname}/${invoice.id}`}>
-                        {invoice.name}
-                      </Link>
-                    </td>
-                    <td>{invoice.purchaseOrderName || '-'}</td>
-                    <td className='!text-left'>{invoice.sales}</td>
-                    <td>{invoice.invoiceDate}</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>
-                      {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>
+                  {!invoices.isLoading &&
+                    (!invoices?.data?.invoices ||
+                      invoices?.data?.invoices?.length == 0) && (
+                      <tr>
+                        <td colSpan={6}>Tidak ada invoice</td>
+                      </tr>
+                    )}
+                  {invoices.data?.invoices?.map((invoice) => (
+                    <tr key={invoice.id}>
+                      <td>
+                        <Link href={`/my/invoices/${invoice.id}`}>
+                          {invoice.name}
+                        </Link>
+                      </td>
+                      <td>{invoice.salesOrder || '-'}</td>
+                      <td className='!text-left'>{invoice.sales}</td>
+                      <td>{invoice.invoiceDate}</td>
+                      <td>{invoice.invoiceDateDue}</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/invoices${pageQuery}`}
-              className='mt-2 mb-2'
-            />
+              <Pagination
+                pageCount={pageCount}
+                currentPage={parseInt(pageNew)}
+                // url={`/my/tempo${pageQuery}`}
+                url={`/my/tempo?${toQuery(_.omit(query, ['page']))}`}
+                className='mt-2 mb-2'
+              />
+            </div>
+            <div className=''>
+              <FooterBanner />
+            </div>
           </div>
         </div>
       </DesktopView>
       <MobileView>
         <div className='p-4 flex flex-col gap-y-4'>
+          <div className='flex flex-col gap-y-2'>
+            <div className='flex flex-col items-center justify-center'>
+              <p className='flex flex-row w-full text-sm gap-2 items-center justify-start'>
+                Jenis Tempo Pembayaran Anda adalah{' '}
+                <Skeleton
+                  isLoaded={!isLoading}
+                  h='fit'
+                  w={24}
+                  className='badge-solid-green px-1 text-xs flex items-center justify-center font-thin'
+                >
+                  {' '}
+                  {tempo.paymentTerm}
+                </Skeleton>
+              </p>
+            </div>
+            <div className='grid grid-flow-col text-sm'>
+              <div className='  w-full'>
+                <p>Limit Tempo Terpakai</p>
+                <Skeleton
+                  isLoaded={!isLoading}
+                  // h='36px'
+                  // w={16}
+                  className='font-semibold text-lg'
+                >
+                  {currencyFormat(amountDue)}
+                </Skeleton>
+              </div>
+              <div className=' w-full'>
+                <p>Limit Tempo</p>
+                <Skeleton
+                  isLoaded={!isLoading}
+                  // h='36px'
+                  // w={16}
+                  className=' font-semibold text-lg'
+                >
+                  {currencyFormat(limitTempo)}
+                </Skeleton>
+              </div>
+            </div>
+          </div>
+          <div className='flex gap-2 flex-col'>
+            <ProgressBar
+              completed={amountDue}
+              bgColor='#ef4444'
+              labelAlignment='outside'
+              isLabelVisible={false}
+              baseBgColor='#E5E7EB'
+              labelColor='#e80909'
+              labelSize='0'
+              maxCompleted={limitTempo}
+              height='6px'
+            />
+            <span className='flex justify-end opacity-75 text-xs font-semibold text-red-500'>
+              {getLabel()}
+            </span>
+          </div>
           <form className='flex gap-x-3' onSubmit={handleSubmit}>
             <input
               type='text'
@@ -310,7 +407,7 @@ const Tempo = () => {
 
           <Pagination
             pageCount={pageCount}
-            currentPage={parseInt(page)}
+            currentPage={parseInt(pageNew)}
             url={`/my/invoices${pageQuery}`}
             className='mt-2 mb-2'
           />
-- 
cgit v1.2.3