<iman> update tempo

4 files changed, 167 insertions, 40 deletions

diff --git a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
index 83407bfd..7ed269b8 100644
--- a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
+++ b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
@@ -22,9 +22,9 @@ const NavbarUserDropdown = () => {
         <Link href='/my/shipments'>Daftar Pengiriman</Link>
         <Link href='/my/invoices'>Invoice & Faktur Pajak</Link>
         {atuh &&
-          (atuh.partnerTempo
-            ? atuh.partnerTempo?.toLowerCase().includes('tempo')
-            : '' || atuh.tempoProgres === 'review') && (
+          atuh.partnerTempo &&
+          (atuh.partnerTempo?.toLowerCase().includes('tempo') ||
+            atuh.tempoProgres === 'review') && (
             <Link href='/my/tempo'>Pembayaran Tempo</Link>
           )}
 
diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx
index 82a4de81..b562878d 100644
--- a/src/lib/auth/components/Menu.jsx
+++ b/src/lib/auth/components/Menu.jsx
@@ -63,8 +63,9 @@ const Menu = () => {
         </div>
       </LinkItem>
       {auth &&
-        (auth?.partnerTempo.toLowerCase().includes('tempo') ||
-          auth.tempoProgres == 'review') && (
+        auth.partnerTempo &&
+        (auth.partnerTempo?.toLowerCase().includes('tempo') ||
+          auth.tempoProgres === 'review') && (
           <LinkItem href='/my/tempo' active={routeStartWith('/my/tempo')}>
             <div className='flex gap-x-3 items-center'>
               <ImageNext
diff --git a/src/lib/pengajuan-tempo/component/Stepper.jsx b/src/lib/pengajuan-tempo/component/Stepper.jsx
index 539fe3f3..c5efa5bc 100644
--- a/src/lib/pengajuan-tempo/component/Stepper.jsx
+++ b/src/lib/pengajuan-tempo/component/Stepper.jsx
@@ -22,7 +22,7 @@ const Stepper = ({ currentStep, numberOfSteps }) => {
         <React.Fragment key={index}>
           {isFirstStep(index) ? null : (
             <div
-              className={`${isMobile ? 'w-12' : 'w-48'} h-[0.8px] ${activeColor(
+              className={`${isMobile ? 'w-12' : 'w-48'} h-[1px] ${activeColor(
                 index
               )}`}
             ></div>
diff --git a/src/lib/tempo/components/Tempo.jsx b/src/lib/tempo/components/Tempo.jsx
index 6f0a2a8c..f2a9e650 100644
--- a/src/lib/tempo/components/Tempo.jsx
+++ b/src/lib/tempo/components/Tempo.jsx
@@ -29,18 +29,22 @@ 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';
+import { Tooltip } from '@chakra-ui/react';
+import { InfoIcon } from 'lucide-react';
 const Tempo = () => {
   const auth = getAuth();
   const router = useRouter();
-  const { q = '', page = 1, limit = 15 } = router.query;
+  const { q = '', page = 1, limit = 15, status = 0 } = router.query;
   const { isDesktop, isMobile } = useDevice();
   const [pageNew, setPageNew] = useState(page);
   const [limitNew, setLimitNew] = useState(limit);
+  const [statusNew, setStatusNew] = useState(status);
 
   const query = {
     name: q,
     offset: (pageNew - 1) * limitNew,
     limit: limitNew,
+    status: statusNew,
   };
   const { invoices } = useInvoices({ query });
   const [isLoading, setIsLoading] = useState(true);
@@ -71,7 +75,7 @@ const Tempo = () => {
   const limitTempo = Math.round(
     parseInt(tempo.amountDue + tempo.remainingLimit)
   );
-  const amountDue = Math.round(parseInt(tempo.amountDue));
+  const amountDue = Math.round(parseInt(tempo.amountDue + tempo.amountDueSale));
   const getLabel = () => {
     if (Math.round((amountDue / limitTempo) * 100) >= 100)
       return 'Limit Tempo mencapai batas';
@@ -79,7 +83,13 @@ const Tempo = () => {
     return '';
   };
   const startItem = 1 + (pageNew - 1) * limitNew;
-  const endItem = Math.min(limitNew * pageNew, invoices?.data?.invoiceTotal);
+  const endItem = Math.min(
+    limitNew * pageNew,
+    invoices?.data?.invoiceTotal +
+      (statusNew === 0 || statusNew === 2 || statusNew === 4
+        ? invoices?.data?.saleOrderTotal
+        : 0)
+  );
   const getDueDate = (invoice) => {
     const [day, month, year] = invoice.split('/');
     const dueDate = new Date(year, month - 1, day); // Konversi ke objek Date
@@ -97,6 +107,13 @@ const Tempo = () => {
 
     return formattedDate;
   };
+
+  const handleClick = () => {
+    setStatusNew((prevStatus) => (prevStatus === 4 ? 0 : 4)); // Toggle antara 4 dan 0
+  };
+  const handleClickInvoice = () => {
+    setStatusNew((prevStatus) => (prevStatus === 1 ? 0 : 1)); // Toggle antara 4 dan 0
+  };
   return (
     <>
       <DesktopView>
@@ -107,6 +124,27 @@ const Tempo = () => {
           <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>
+              <div className='flex items-start mb-4'>
+                <p className='flex flex-row gap-2 w-full items-center'>
+                  Kredit Limit Anda
+                  <Skeleton
+                    isLoaded={!isLoading}
+                    h='fit'
+                    w='fit'
+                    className='text-3xl font-semibold text-green-600 min-w-56'
+                  >
+                    {limitTempo ? currencyFormat(limitTempo) : '-'}
+                  </Skeleton>
+                </p>
+                <Tooltip
+                  placement='top-start'
+                  label='Jumlah kredit limit dapat berubah sesuai dengan ketentuan yang Indoteknik miliki.'
+                >
+                  <div className='text-gray-600'>
+                    <InfoIcon size={15} />
+                  </div>
+                </Tooltip>
+              </div>
               <p className='flex flex-row gap-2 w-full'>
                 Status Detail Tempo Pembayaran Anda adalah{' '}
                 <Skeleton
@@ -121,25 +159,14 @@ const Tempo = () => {
                 </Skeleton>
               </p>
             </div>
-            <div className='grid grid-flow-col gap-4 mb-4'>
-              <div className='border  w-full p-4'>
-                <p>Kredit Limit Terpakai</p>
-                <Skeleton
-                  isLoaded={!isLoading}
-                  h='36px'
-                  // w={16}
-                  className='text-3xl font-semibold'
-                >
-                  {amountDue ? currencyFormat(amountDue) : '-'}
-                </Skeleton>
-              </div>
+            <div className='flex flex-row gap-4'>
               <div className='border w-full p-4'>
                 <p>Sisa Kredit Limit</p>
                 <Skeleton
                   isLoaded={!isLoading}
                   h='36px'
                   // w={16}
-                  className='text-3xl font-semibold'
+                  className='text-3xl font-semibold text-green-600'
                 >
                   {limitTempo && amountDue
                     ? currencyFormat(
@@ -148,31 +175,72 @@ const Tempo = () => {
                     : '-'}
                 </Skeleton>
               </div>
-              <div className='border w-full p-4'>
-                <p>Kredit Limit</p>
+              <div
+                className={`border  w-fit p-4 flex gap-4 items-center hover:cursor-pointer hover:shadow-lg ${
+                  statusNew == 4 ? 'bg-red-100' : ''
+                }`}
+                onClick={handleClick}
+              >
+                <div className=''>
+                  <p>Kredit Limit Terpakai</p>
+                  <Skeleton
+                    isLoaded={!isLoading}
+                    h='36px'
+                    // w={16}
+                    className='text-3xl font-semibold text-red-600'
+                  >
+                    {amountDue ? currencyFormat(amountDue) : '-'}
+                  </Skeleton>
+                </div>
+                <div className='w-fit h-full flex items-center text-red-600 text-lg text-nowrap font-medium '>
+                  {tempo.amountDueTotal
+                    ? tempo.amountDueTotal +
+                      tempo.amountDueSaleTotal +
+                      ` Transaksi`
+                    : ''}
+                </div>
+              </div>
+              <div
+                className={`border  w-fit p-4 flex gap-4 items-center hover:cursor-pointer hover:shadow-lg ${
+                  statusNew == 1 ? 'bg-red-100' : ''
+                }`}
+                onClick={handleClickInvoice}
+              >
+                <div className=''>
+                  <p>Jatuh Tempo</p>
+                  <Skeleton
+                    isLoaded={!isLoading}
+                    h='36px'
+                    // w={16}
+                    className='text-3xl font-semibold text-red-600'
+                  >
+                    {tempo.amountJatuhTempo
+                      ? currencyFormat(tempo.amountJatuhTempo)
+                      : '-'}
+                  </Skeleton>
+                </div>
+                <div className='w-fit h-full flex items-center text-red-600 text-lg text-nowrap font-medium '>
+                  {tempo.amountJatuhTempoTotal
+                    ? tempo.amountJatuhTempoTotal + ` Invoice`
+                    : ''}
+                </div>
+              </div>
+              {/* <div className='border w-full p-4'>
+                <p>Jatuh Tempo</p>
                 <Skeleton
                   isLoaded={!isLoading}
                   h='36px'
                   // w={16}
-                  className='text-3xl font-semibold'
+                  className='text-3xl font-semibold text-red-600'
                 >
-                  {limitTempo ? currencyFormat(limitTempo) : '-'}
+                  {tempo.amountJatuhTempo
+                    ? currencyFormat(tempo.amountJatuhTempo)
+                    : '-'}
                 </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='10px'
-              />
               <span className='flex justify-end opacity-75 font-semibold text-red-500'>
                 {getLabel()}
               </span>
@@ -187,7 +255,7 @@ const Tempo = () => {
                 />
               </div>
             ) : (
-              <div className='border p-4 rounded mt-4'>
+              <div className='border p-4 rounded'>
                 <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'>
@@ -205,7 +273,10 @@ const Tempo = () => {
                     <div className='flex flex-row gap-4 items-center justify-center'>
                       <p>
                         Menampilkan {startItem}-{endItem} dari{' '}
-                        {invoices?.data?.invoiceTotal}
+                        {invoices?.data?.invoiceTotal +
+                          (statusNew === 0 || statusNew === 2 || statusNew === 4
+                            ? invoices?.data?.saleOrderTotal
+                            : 0)}
                       </p>
                       <select
                         id='limitSelect'
@@ -220,6 +291,19 @@ const Tempo = () => {
                         <option value={15}>15</option>
                         <option value={20}>20</option>
                       </select>
+                      <select
+                        id='statusSelect'
+                        value={statusNew}
+                        onChange={(e) => {
+                          setStatusNew(Number(e.target.value));
+                        }}
+                        className='border p-2'
+                      >
+                        <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>
@@ -237,6 +321,48 @@ const Tempo = () => {
                     </tr>
                   </thead>
                   <tbody>
+                    {/* {invoices.isLoading && (
+                      <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>
+                      </tr>
+                    )} */}
+                    {/* {!invoices.isLoading &&
+                      (!invoices?.data?.saleOrders ||
+                        invoices?.data?.saleOrders?.length == 0) && (
+                        <tr>
+                          <td colSpan={6}>Tidak ada orders</td>
+                        </tr>
+                      )} */}
+                    {(statusNew == 0 || statusNew == 2 || statusNew == 4) &&
+                      invoices.data?.saleOrders?.map((orders) => (
+                        <tr key={orders.id}>
+                          <td>{orders.salesOrder || '-'}</td>
+                          <td>
+                            <Link href={`/my/transactions/${orders.id}`}>
+                              {orders.name}
+                            </Link>
+                          </td>
+                          <td className='!text-left'>{orders.sales}</td>
+                          <td>{orders.dateOrder.split(' ')[0]}</td>
+                          <td>-</td>
+                          <td>
+                            {
+                              <div className=' h-fit mx-auto inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20'>
+                                Belum Jatuh Tempo
+                              </div>
+                            }
+                          </td>
+                          <td className='!text-left'>
+                            {currencyFormat(orders.amountTotal)}
+                          </td>
+                        </tr>
+                      ))}
+                  </tbody>
+                  <tbody>
                     {invoices.isLoading && (
                       <tr>
                         <td colSpan={6}>