transaction

3 files changed, 127 insertions, 106 deletions

diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 2ca7d386..62743df3 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -41,6 +41,7 @@ import { useRouter } from 'next/router';
 import { gtagPurchase } from '@/core/utils/googleTag';
 import { deleteItemCart } from '@/core/utils/cart';
 import axios from 'axios';
+import InformationSection from '../../treckingAwb/component/InformationSection';
 const Transaction = ({ id }) => {
   const PPN = process.env.NEXT_PUBLIC_PPN;
   const router = useRouter();
@@ -208,7 +209,9 @@ const Transaction = ({ id }) => {
           <p>{currencyFormat(transaction.data?.amountUntaxed)}</p>
         </div>
         <div className='flex justify-between mt-1'>
-          <p className='text-gray_r-12/70'>PPN {((PPN - 1) * 100).toFixed(0)}%</p>
+          <p className='text-gray_r-12/70'>
+            PPN {((PPN - 1) * 100).toFixed(0)}%
+          </p>
           <p>{currencyFormat(transaction.data?.amountTax)}</p>
         </div>
         <div className='flex justify-between mt-1'>
@@ -279,6 +282,8 @@ const Transaction = ({ id }) => {
     }
   };
 
+  console.log('ini transaction', transaction.data);
+
   return (
     transaction.data?.name && (
       <>
@@ -731,52 +736,58 @@ const Transaction = ({ id }) => {
                 </div>
               </div>
 
-              <div className='text-h-sm font-semibold mt-10 mb-4'>
-                Informasi Pelanggan
-              </div>
-              <div className='grid grid-cols-2 gap-x-4'>
-                <div className='border border-gray_r-6 rounded p-3'>
-                  <div className='font-medium mb-4'>Detail Pelanggan</div>
-                  <SectionContent
-                    address={transaction?.data?.address?.customer}
-                  />
+              <div className='flex gap-x-3'>
+                <div className='w-1/2'>
+                  <div className='text-h-sm font-semibold mt-10 mb-4'>
+                    Informasi Pelanggan
+                  </div>
+                  <div className='border border-gray_r-6 rounded p-3'>
+                    <div className='font-medium mb-4'>Detail Pelanggan</div>
+                    <SectionContent
+                      address={transaction?.data?.address?.customer}
+                    />
+                  </div>
                 </div>
-              </div>
-              <div className='flex '>
                 <div className='w-1/2'>
                   <div className='text-h-sm font-semibold mt-10 mb-4'>
-                    Pengiriman
+                    Informasi Pengiriman
                   </div>
                   {transaction?.data?.pickings.length == 0 && (
                     <div className='badge-red text-sm'>
                       Belum ada pengiriman
                     </div>
                   )}
-                  <div className='grid grid-cols-1 gap-1 w-2/3'>
-                    {transaction?.data?.pickings?.map((airway) => (
-                      <button
-                        className='shadow rounded-md p-3 text-gray_r-12 font-normal flex justify-between items-center text-left h-20'
-                        key={airway?.id}
-                        onClick={() => setIdAWB(airway?.id)}
-                      >
-                        <div>
-                          <span className='text-sm text-gray_r-11'>
-                            No Resi : {airway?.trackingNumber || '-'}{' '}
-                          </span>
-                          <p className='mt-1 font-medium'>{airway?.name}</p>
-                        </div>
-                        <div className='flex gap-x-2'>
-                          <div className='text-sm text-gray-600 badge-green leading-[1.5] mt-1'>
-                            {airway?.delivered
-                              ? 'Pesanan Tiba'
-                              : 'Sedang Dikirim'}
-                          </div>
-                          <ChevronRightIcon className='w-5 stroke-2' />
-                        </div>
-                      </button>
-                    ))}
-                  </div>
+                  {/* <div className='grid grid-cols-1 gap-1 w-1/2'> */}
+                  {transaction?.data?.pickings?.map((airway) => (
+                    <div key={airway?.id} className='border border-gray_r-6 rounded p-3'>
+                      <InformationSection  manifests={airway} />
+                    </div>
+                    // <button
+                    //   className='shadow rounded-md p-3 text-gray_r-12 font-normal flex justify-between items-center text-left h-20'
+                    //   key={airway?.id}
+                    //   onClick={() => setIdAWB(airway?.id)}
+                    // >
+                    //   <div>
+                    //     <span className='text-sm text-gray_r-11'>
+                    //       No Resi : {airway?.trackingNumber || '-'}{' '}
+                    //     </span>
+                    //     <p className='mt-1 font-medium'>{airway?.name}</p>
+                    //   </div>
+                    //   <div className='flex gap-x-2'>
+                    //     <div className='text-sm text-gray-600 badge-green leading-[1.5] mt-1'>
+                    //       {airway?.delivered
+                    //         ? 'Pesanan Tiba'
+                    //         : 'Sedang Dikirim'}
+                    //     </div>
+                    //     <ChevronRightIcon className='w-5 stroke-2' />
+                    //   </div>
+                    // </button>
+                  ))}
+                  {/* </div> */}
                 </div>
+              </div>
+
+              <div className='flex '>
                 <div className='invoice w-1/2 '>
                   <div className='text-h-sm font-semibold mt-10 mb-4 '>
                     Invoice
@@ -976,7 +987,9 @@ const Transaction = ({ id }) => {
                       {currencyFormat(transaction.data?.amountUntaxed)}
                     </div>
 
-                    <div className='text-right'>PPN {((PPN - 1) * 100).toFixed(0)}%</div>
+                    <div className='text-right'>
+                      PPN {((PPN - 1) * 100).toFixed(0)}%
+                    </div>
                     <div className='text-right font-medium'>
                       {currencyFormat(transaction.data?.amountTax)}
                     </div>
diff --git a/src/lib/treckingAwb/component/InformationSection.jsx b/src/lib/treckingAwb/component/InformationSection.jsx
new file mode 100644
index 00000000..41386683
--- /dev/null
+++ b/src/lib/treckingAwb/component/InformationSection.jsx
@@ -0,0 +1,73 @@
+import { useState } from "react";
+import toast from "react-hot-toast";
+
+const InformationSection = ({ manifests }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyClick = () => {
+    const textToCopy = manifests?.waybillNumber;
+    navigator.clipboard.writeText(textToCopy);
+    setCopied(true);
+    toast.success('No Resi Berhasil di Copy');
+    setTimeout(() => setCopied(false), 2000); // Reset copied state after 2 seconds
+  };
+
+  return (
+    <div className=''>
+      <div className='grid gap-y-4 p-4'>
+        <div className='grid grid-cols-[150px_auto] mb-4'>
+          <span className='font-semibold '>Nomor Resi</span>
+          <div className='flex gap-x-3'>
+            <span className='font-semibold'>: {manifests?.waybillNumber} </span>
+            <button
+              className={`${copied ? 'text-gray-400' : 'text-red-600 '}`}
+              onClick={() => handleCopyClick()}
+            >
+              <svg
+                aria-hidden='true'
+                fill='none'
+                stroke='currentColor'
+                stroke-width='1.5'
+                viewBox='0 0 24 24'
+                className='w-5 h-6'
+              >
+                <path
+                  d='M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75'
+                  stroke-linecap='round'
+                  stroke-linejoin='round'
+                ></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div className='grid grid-cols-[150px_auto]'>
+          <span>Kurir</span>
+          <span className='font-semibold'>
+            {' '}
+            : {manifests?.deliveryOrder.carrier}
+          </span>
+        </div>
+        <div className='grid grid-cols-[150px_auto]'>
+          <span>Jenis Service</span>
+          <span className='font-semibold'>
+            {' '}
+            : {manifests?.deliveryOrder.service}
+          </span>
+        </div>
+        <div className='grid grid-cols-[150px_auto]'>
+          <span>Tanggal Dikirim</span>
+          <span className='font-semibold'> : {manifests?.deliveredDate}</span>
+        </div>
+        <div className='grid grid-cols-[150px_auto]'>
+          <span>Estimasi Tiba</span>
+          <span className='font-semibold'>
+            :{' '}
+            <span className='text-red-600 font-semibold'>{manifests?.eta}</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InformationSection;
diff --git a/src/lib/treckingAwb/component/Manifest.jsx b/src/lib/treckingAwb/component/Manifest.jsx
index fa998bd3..e2251e3e 100644
--- a/src/lib/treckingAwb/component/Manifest.jsx
+++ b/src/lib/treckingAwb/component/Manifest.jsx
@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-hot-toast';
 import ImageNext from 'next/image';
 import { list } from 'postcss';
+import InformationSection from './InformationSection';
 
 function capitalizeFirstLetter(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
@@ -71,16 +72,6 @@ const Manifest = ({ idAWB, closePopup }) => {
     }
   }, [idAWB]);
 
-  const [copied, setCopied] = useState(false);
-
-  const handleCopyClick = () => {
-    const textToCopy = manifests?.waybillNumber;
-    navigator.clipboard.writeText(textToCopy);
-    setCopied(true);
-    toast.success('No Resi Berhasil di Copy');
-    setTimeout(() => setCopied(false), 2000); // Reset copied state after 2 seconds
-  };
-
   return (
     <>
       {isLoading && (
@@ -129,64 +120,8 @@ const Manifest = ({ idAWB, closePopup }) => {
             )}
           </div>
 
-          <div className=''>
-            <div className='grid gap-y-2 text-sm'>
-              <div className='grid grid-cols-[150px_auto]'>
-                <span className='font-semibold'>Nomor Resi</span>
-                <div className='flex gap-x-3'>
-                  <span className='font-semibold'>
-                    : {manifests?.waybillNumber}{' '}
-                  </span>
-                  <button
-                    className={`${copied ? 'text-gray-400' : 'text-red-600 '}`}
-                    onClick={() => handleCopyClick()}
-                  >
-                    <svg
-                      aria-hidden='true'
-                      fill='none'
-                      stroke='currentColor'
-                      stroke-width='1.5'
-                      viewBox='0 0 24 24'
-                      className='w-5 h-6'
-                    >
-                      <path
-                        d='M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75'
-                        stroke-linecap='round'
-                        stroke-linejoin='round'
-                      ></path>
-                    </svg>
-                  </button>
-                </div>
-              </div>
-              <div className='grid grid-cols-[150px_auto]'>
-                <span>Kurir</span>
-                <span className='font-semibold'>
-                  {' '}
-                  : {manifests?.deliveryOrder.carrier}
-                </span>
-              </div>
-              <div className='grid grid-cols-[150px_auto]'>
-                <span>Jenis Service</span>
-                <span className='font-semibold'>
-                  {' '}
-                  : {manifests?.deliveryOrder.service}
-                </span>
-              </div>
-              <div className='grid grid-cols-[150px_auto]'>
-                <span>Tanggal Dikirim</span>
-                <span className='font-semibold'> : {manifests?.deliveredDate}</span>
-              </div>
-              <div className='grid grid-cols-[150px_auto]'>
-                <span>Estimasi Tiba</span>
-                <span className='font-semibold'>
-                  :{' '}
-                  <span className='text-red-600 font-semibold'>
-                    {manifests?.eta}
-                  </span>
-                </span>
-              </div>
-            </div>
-          </div>
+          <InformationSection manifests={manifests} />
+         
           <hr className='mt-4' />
           {manifests?.isDelay && (
             <div