<iman> update tempo page mobile view

1 files changed, 209 insertions, 96 deletions

diff --git a/src/lib/tempo/components/Tempo.jsx b/src/lib/tempo/components/Tempo.jsx
index b79824fa..3af5b56c 100644
--- a/src/lib/tempo/components/Tempo.jsx
+++ b/src/lib/tempo/components/Tempo.jsx
@@ -25,7 +25,6 @@ import DesktopView from '@/core/components/views/DesktopView';
 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';
 import Image from '~/components/ui/image';
 import useDevice from '@/core/hooks/useDevice';
@@ -286,6 +285,11 @@ const Tempo = () => {
                         value={statusNew}
                         onChange={(e) => {
                           setStatusNew(Number(e.target.value));
+                          if (e.target.value == 0) {
+                            if (inputQuery) {
+                              router.push('/my/tempo/');
+                            }
+                          }
                         }}
                         className='border p-2'
                       >
@@ -424,40 +428,44 @@ const Tempo = () => {
       <MobileView>
         <div className=' bg-[#FEF8E2] w-[110%] inset-0 relative transform -translate-x-5 px-8 py-4'>
           <div className='flex flex-col gap-y-4 '>
+            <p className='flex flex-row gap-2 w-full text-sm items-center'>
+              <span className='opacity-70 text-nowrap'>
+                Kredit Limit Anda :{' '}
+              </span>
+              <Skeleton
+                isLoaded={!isLoading}
+                h='fit'
+                w='fit'
+                className='text-xl font-semibold text-green-700 min-w-56'
+              >
+                {limitTempo ? currencyFormat(limitTempo) : '-'}
+              </Skeleton>
+            </p>
             <div className='flex flex-col items-center justify-center'>
               <p className='flex flex-row w-full text-sm gap-2 items-center justify-start'>
-                Status Detail Tempo Pembayaran Anda adalah{' '}
+                <span className='opacity-70'>
+                  Status Detail Tempo Pembayaran Anda adalah :
+                </span>
                 <Skeleton
                   isLoaded={!isLoading}
                   h='fit'
                   w={24}
                   className={`${
                     tempo.paymentTerm ? 'badge-solid-green' : 'badge-yellow'
-                  }  px-1 text-xs flex items-center justify-center font-thin`}
+                  }  px-1 text-xs flex items-center justify-center font-extralight text-nowrap`}
                 >
                   {tempo.paymentTerm ? tempo.paymentTerm : 'Review'}
                 </Skeleton>
               </p>
             </div>
-            <div className='flex items-start justify-around text-sm '>
-              <div className='w-[40%]  flex flex-col gap-2'>
-                <p>Kredit Limit Terpakai</p>
-                <Skeleton
-                  isLoaded={!isLoading}
-                  // h='36px'
-                  // w={16}
-                  className='font-semibold text-base'
-                >
-                  {amountDue ? currencyFormat(amountDue) : '-'}
-                </Skeleton>
-              </div>
+            <div className='flex items-start justify-around text-sm gap-3'>
               <div className='w-[30%] flex  flex-col gap-2'>
-                <p>Sisa Kredit Limit</p>
+                <p className='opacity-70 text-nowrap'>Sisa Kredit Limit</p>
                 <Skeleton
                   isLoaded={!isLoading}
                   // h='36px'
                   // w={16}
-                  className='font-semibold text-base'
+                  className='font-semibold text-sm text-nowrap text-green-700 '
                 >
                   {limitTempo && amountDue
                     ? currencyFormat(
@@ -465,34 +473,72 @@ const Tempo = () => {
                       )
                     : '-'}
                 </Skeleton>
+              </div>{' '}
+              <div className='w-[40%]  flex flex-col gap-2'>
+                <p className='opacity-70 text-nowrap'>Kredit Limit Terpakai</p>
+                <Skeleton
+                  isLoaded={!isLoading}
+                  // h='36px'
+                  // w={16}
+                  className='font-semibold text-sm text-nowrap text-green-700'
+                >
+                  {amountDue ? currencyFormat(amountDue) : '-'}
+                </Skeleton>
               </div>
               <div className=' w-[30%] flex flex-col gap-2'>
-                <p>Kredit Limit</p>
+                <p className='opacity-70 text-nowrap'>Jatuh Tempo</p>
                 <Skeleton
                   isLoaded={!isLoading}
                   // h='36px'
                   // w={16}
-                  className=' font-semibold text-base'
+                  className=' font-semibold text-sm text-nowrap text-red-600'
                 >
-                  {limitTempo ? currencyFormat(limitTempo) : '-'}
+                  {tempo.amountJatuhTempo
+                    ? currencyFormat(tempo.amountJatuhTempo)
+                    : '-'}
                 </Skeleton>
               </div>
             </div>
           </div>
         </div>
-        <div className='p-4 flex flex-col gap-y-4'>
-          {auth && !auth?.tempoProgres == 'review' && tempo.paymentTerm && (
-            <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)}
-              />
+        <div className='p-4 flex flex-col gap-y-4 w-full'>
+          {auth && (!auth?.tempoProgres == 'review' || tempo.paymentTerm) && (
+            <form
+              className='w-full flex gap-x-2 flex-row justify-between'
+              onSubmit={handleSubmit}
+            >
+              <div className='flex w-3/5'>
+                <input
+                  type='text'
+                  className='form-input'
+                  placeholder='Cari Invoice...'
+                  value={inputQuery}
+                  onChange={(e) => setInputQuery(e.target.value)}
+                />
+              </div>
               <button className='btn-light bg-transparent px-3' type='submit'>
                 <MagnifyingGlassIcon className='w-6' />
               </button>
+              <div className='flex w-1/5 '>
+                <div className='flex flex-row gap-4 items-center justify-center'>
+                  <select
+                    id='statusSelect'
+                    value={statusNew}
+                    onChange={(e) => {
+                      setStatusNew(Number(e.target.value));
+                      if (e.target.value == 0) {
+                        setInputQuery(' ');
+                      }
+                    }}
+                    className='border p-2 w-full h-full rounded-md'
+                  >
+                    <option value={0}>All</option>
+                    <option value={1}>Jatuh Tempo</option>
+                    <option value={2}>Belum Jatuh Tempo</option>
+                    <option value={3}>Lunas</option>
+                  </select>
+                </div>
+              </div>
             </form>
           )}
 
@@ -515,90 +561,157 @@ const Tempo = () => {
               />
             </div>
           ) : (
-            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/quotations/${invoice.salesOrderId}`}>
-                    <span className='text-caption-2 text-gray_r-11'>
-                      No. Transaksi
-                    </span>
-                    <h2 className='font-semibold text-black mt-1'>
-                      {invoice.salesOrder}
-                    </h2>
-                  </Link>
-                  <div className='flex gap-x-1 justify-end  items-end '>
-                    {invoice.amountResidual > 0 ? (
-                      new Date() > getDueDate(invoice.invoiceDateDue) ? (
-                        <div className='inline-flex items-end rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20'>
-                          Jatuh Tempo
-                        </div>
-                      ) : (
+            <div>
+              {(statusNew == 0 || statusNew == 2 || statusNew == 4) &&
+                invoices.data?.saleOrders?.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/quotations/${invoice.id}`}>
+                        <span className='text-caption-2 text-gray_r-11'>
+                          No. Transaksi
+                        </span>
+                        <h2 className='font-semibold text-black mt-1'>
+                          {invoice.name}
+                        </h2>
+                      </Link>
+                      <div className='flex gap-x-1 justify-end  items-end '>
                         <div className='badge-solid-red h-fit ml-auto'>
-                          Belum Lunas
+                          Belum Jatuh Tempo
                         </div>
-                      )
-                    ) : (
-                      <div className='badge-solid-green h-fit ml-auto'>
-                        Lunas
+                        {/* <EllipsisVerticalIcon
+                      className='w-5 h-5'
+                      onClick={() => setToOthers(invoice)}
+                    /> */}
                       </div>
-                    )}
-                    {/* <EllipsisVerticalIcon
-                    className='w-5 h-5'
-                    onClick={() => setToOthers(invoice)}
-                  /> */}
+                    </div>
+                    <Link href={`/my/quotations/${invoice.id}`}>
+                      <div className='grid grid-cols-2 text-caption-2 text-gray_r-11 mt-2 font-normal'>
+                        <p className='opacity-70'>
+                          {invoice.dateOrder.split(' ')[0]}
+                        </p>
+                        <p className='text-right text-xs text-red-500'>
+                          Jatuh Tempo: -
+                        </p>
+                      </div>
+                      <hr className='my-3' />
+                      <div className='grid grid-cols-2'>
+                        <div>
+                          <span className='text-caption-2 text-gray_r-11'>
+                            No. Invoice
+                          </span>
+                          <p className='mt-1 font-semibold text-gray_r-12'>-</p>
+                        </div>
+                        <div className='text-right'>
+                          <span className='opacity-65 text-caption-2 text-gray_r-11'>
+                            Total Belanja
+                          </span>
+                          <p className='mt-1 font-semibold text-red-500 '>
+                            {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>
-                <Link href={`/my/invoices/${invoice.id}`}>
-                  <div className='grid grid-cols-2 text-caption-2 text-gray_r-11 mt-2 font-normal'>
-                    <p className='opacity-70'>
-                      {formatTanggal(invoice.invoiceDate)}
-                    </p>
-                    <p className='text-right text-xs text-red-500'>
-                      Jatuh Tempo: {formatTanggal(invoice.invoiceDateDue)}
-                    </p>
+                ) : (
+                  <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>
-                  <hr className='my-3' />
+                )} */}
+                  </div>
+                ))}
+              {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'>
-                    <div>
+                    <Link href={`/my/quotations/${invoice.salesOrderId}`}>
                       <span className='text-caption-2 text-gray_r-11'>
-                        No. Invoice
+                        No. Transaksi
                       </span>
-                      <p className='mt-1 font-semibold text-gray_r-12'>
-                        {invoice.name || '-'}
-                      </p>
+                      <h2 className='font-semibold text-black mt-1'>
+                        {invoice.salesOrder}
+                      </h2>
+                    </Link>
+                    <div className='flex gap-x-1 justify-end  items-end '>
+                      {invoice.amountResidual > 0 ? (
+                        new Date() > getDueDate(invoice.invoiceDateDue) ? (
+                          <div className='inline-flex items-end rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20'>
+                            Jatuh Tempo
+                          </div>
+                        ) : (
+                          <div className='badge-solid-red h-fit ml-auto'>
+                            Belum Jatuh Tempo
+                          </div>
+                        )
+                      ) : (
+                        <div className='badge-solid-green h-fit ml-auto'>
+                          Lunas
+                        </div>
+                      )}
+                      {/* <EllipsisVerticalIcon
+                      className='w-5 h-5'
+                      onClick={() => setToOthers(invoice)}
+                    /> */}
                     </div>
-                    <div className='text-right'>
-                      <span className='opacity-65 text-caption-2 text-gray_r-11'>
-                        Total Belanja
-                      </span>
-                      <p className='mt-1 font-semibold text-red-500 '>
-                        {currencyFormat(invoice.amountTotal)}
+                  </div>
+                  <Link href={`/my/invoices/${invoice.id}`}>
+                    <div className='grid grid-cols-2 text-caption-2 text-gray_r-11 mt-2 font-normal'>
+                      <p className='opacity-70'>
+                        {formatTanggal(invoice.invoiceDate)}
                       </p>
+                      <p className='text-right text-xs text-red-500'>
+                        Jatuh Tempo: {formatTanggal(invoice.invoiceDateDue)}
+                      </p>
+                    </div>
+                    <hr className='my-3' />
+                    <div className='grid grid-cols-2'>
+                      <div>
+                        <span className='text-caption-2 text-gray_r-11'>
+                          No. Invoice
+                        </span>
+                        <p className='mt-1 font-semibold text-gray_r-12'>
+                          {invoice.name || '-'}
+                        </p>
+                      </div>
+                      <div className='text-right'>
+                        <span className='opacity-65 text-caption-2 text-gray_r-11'>
+                          Total Belanja
+                        </span>
+                        <p className='mt-1 font-semibold text-red-500 '>
+                          {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>
-                </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 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>
-              )} */}
-              </div>
-            ))
+              ))}
+            </div>
           )}
 
           <Pagination
             pageCount={pageCount}
             currentPage={parseInt(pageNew)}
-            url={`/my/invoices${pageQuery}`}
+            url={`/my/tempo?${toQuery(_.omit(query, ['page']))}`}
             className='mt-2 mb-2'
           />