<iman> add pengajuan tempo detail

1 files changed, 77 insertions, 80 deletions

diff --git a/src/lib/tempo/components/Tempo.jsx b/src/lib/tempo/components/Tempo.jsx
index 8fb55147..71dd0f64 100644
--- a/src/lib/tempo/components/Tempo.jsx
+++ b/src/lib/tempo/components/Tempo.jsx
@@ -41,7 +41,6 @@ const Tempo = () => {
     limit: limitNew,
   };
   const { invoices } = useInvoices({ query });
-  console.log('invoices', invoices);
   const [isLoading, setIsLoading] = useState(true);
   const [tempo, setTempo] = useState([]);
   const [inputQuery, setInputQuery] = useState(q);
@@ -49,11 +48,8 @@ const Tempo = () => {
 
   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/tempo?q=${inputQuery}`);
@@ -74,7 +70,6 @@ const Tempo = () => {
     parseInt(tempo.amountDue + tempo.remainingLimit)
   );
   const amountDue = Math.round(parseInt(tempo.amountDue));
-  console.log('tempo', tempo);
   const getLabel = () => {
     if (Math.round((amountDue / limitTempo) * 100) >= 100)
       return 'Limit Tempo mencapai batas';
@@ -292,72 +287,74 @@ const Tempo = () => {
         </div>
       </DesktopView>
       <MobileView>
-        <div className='flex flex-col gap-y-2 bg-[#FEF8E2]'>
-          <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 className=' bg-[#FEF8E2] w-[110%] inset-0 relative transform -translate-x-5 px-8 py-4'>
+          <div className='flex flex-col gap-y-4 '>
+            <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='w-full'>
-              <p>Sisa Kredit Limit</p>
-              <Skeleton
-                isLoaded={!isLoading}
-                // h='36px'
-                // w={16}
-                className='font-semibold text-lg'
-              >
-                {currencyFormat(Math.round(parseInt(limitTempo - amountDue)))}
-              </Skeleton>
+            <div className='flex  justify-around text-sm '>
+              <div className='w-[40%]  flex flex-col gap-2'>
+                <p>Limit Tempo Terpakai</p>
+                <Skeleton
+                  isLoaded={!isLoading}
+                  // h='36px'
+                  // w={16}
+                  className='font-semibold text-base'
+                >
+                  {currencyFormat(amountDue)}
+                </Skeleton>
+              </div>
+              <div className='w-[30%] flex  flex-col gap-2'>
+                <p>Sisa Kredit Limit</p>
+                <Skeleton
+                  isLoaded={!isLoading}
+                  // h='36px'
+                  // w={16}
+                  className='font-semibold text-base'
+                >
+                  {currencyFormat(Math.round(parseInt(limitTempo - amountDue)))}
+                </Skeleton>
+              </div>
+              <div className=' w-[30%] flex flex-col gap-2'>
+                <p>Limit Tempo</p>
+                <Skeleton
+                  isLoaded={!isLoading}
+                  // h='36px'
+                  // w={16}
+                  className=' font-semibold text-base'
+                >
+                  {currencyFormat(limitTempo)}
+                </Skeleton>
+              </div>
             </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 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>
           </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>
         </div>
         <div className='p-4 flex flex-col gap-y-4'>
           <form className='flex gap-x-3' onSubmit={handleSubmit}>
@@ -391,7 +388,7 @@ const Tempo = () => {
               key={index}
             >
               <div className='grid grid-cols-2'>
-                <Link href={`${router.pathname}/${invoice.id}`}>
+                <Link href={`/my/quotations/${invoice.salesOrderId}`}>
                   <span className='text-caption-2 text-gray_r-11'>
                     No. Transaksi
                   </span>
@@ -399,7 +396,7 @@ const Tempo = () => {
                     {invoice.salesOrder}
                   </h2>
                 </Link>
-                <div className='flex gap-x-1 justify-end'>
+                <div className='flex gap-x-1 justify-end  items-center'>
                   {invoice.amountResidual > 0 ? (
                     <div className='badge-solid-red h-fit ml-auto'>
                       {new Date() > getDueDate(invoice.invoiceDateDue)
@@ -409,13 +406,13 @@ const Tempo = () => {
                   ) : (
                     <div className='badge-solid-green h-fit ml-auto'>Lunas</div>
                   )}
-                  <EllipsisVerticalIcon
+                  {/* <EllipsisVerticalIcon
                     className='w-5 h-5'
                     onClick={() => setToOthers(invoice)}
-                  />
+                  /> */}
                 </div>
               </div>
-              <Link href={`${router.pathname}/${invoice.id}`}>
+              <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)}
@@ -428,23 +425,23 @@ const Tempo = () => {
                 <div className='grid grid-cols-2'>
                   <div>
                     <span className='text-caption-2 text-gray_r-11'>
-                      No. Purchase Order
+                      No. Invoice
                     </span>
-                    <p className='mt-1 font-medium text-gray_r-12'>
-                      {invoice.purchaseOrderName || '-'}
+                    <p className='mt-1 font-semibold text-gray_r-12'>
+                      {invoice.name || '-'}
                     </p>
                   </div>
                   <div className='text-right'>
-                    <span className='text-caption-2 text-gray_r-11'>
-                      Total Invoice
+                    <span className='opacity-65 text-caption-2 text-gray_r-11'>
+                      Total Belanja
                     </span>
-                    <p className='mt-1 font-medium text-gray_r-12'>
+                    <p className='mt-1 font-semibold text-red-500 '>
                       {currencyFormat(invoice.amountTotal)}
                     </p>
                   </div>
                 </div>
               </Link>
-              {invoice.efaktur ? (
+              {/* {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
@@ -454,7 +451,7 @@ const Tempo = () => {
                   <ClockIcon className='w-4 stroke-2' />
                   Faktur Pajak
                 </div>
-              )}
+              )} */}
             </div>
           ))}