manifest

1 files changed, 98 insertions, 82 deletions

diff --git a/src/lib/treckingAwb/component/Manifest.jsx b/src/lib/treckingAwb/component/Manifest.jsx
index a0df6ee9..fa998bd3 100644
--- a/src/lib/treckingAwb/component/Manifest.jsx
+++ b/src/lib/treckingAwb/component/Manifest.jsx
@@ -7,18 +7,17 @@ import { toast } from 'react-hot-toast';
 import ImageNext from 'next/image';
 import { list } from 'postcss';
 
-
 function capitalizeFirstLetter(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
-
 function capitalizeWords(str) {
-  return str.split(' ').map(word => capitalizeFirstLetter(word)).join(' ');
+  return str
+    .split(' ')
+    .map((word) => capitalizeFirstLetter(word))
+    .join(' ');
 }
 
-
-
 const Manifest = ({ idAWB, closePopup }) => {
   const [manifests, setManifests] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -63,7 +62,7 @@ const Manifest = ({ idAWB, closePopup }) => {
     setManifests(list);
     setIsLoading(false);
   };
-
+  console.log(manifests);
   useEffect(() => {
     if (idAWB) {
       getManifest();
@@ -97,7 +96,7 @@ const Manifest = ({ idAWB, closePopup }) => {
       {!isLoading && (
         <BottomPopup
           key={manifests?.waybillNumber}
-          title='Detail Pengiriman'
+          title='Lacak Pengiriman'
           active={idAWB}
           close={closePopup}
         >
@@ -118,7 +117,7 @@ const Manifest = ({ idAWB, closePopup }) => {
                 <p className='text-white text-sm'>Di Batalkan</p>
               </div>
             )}
-             {manifests?.status === 'on_hold' && (
+            {manifests?.status === 'on_hold' && (
               <div className='bg-red-800 p-2 rounded '>
                 <p className='text-white text-sm'>Ditunda Sementara </p>
               </div>
@@ -129,28 +128,15 @@ const Manifest = ({ idAWB, closePopup }) => {
               </div>
             )}
           </div>
+
           <div className=''>
-            <h1 className='text-body-1'>
-              Estimasi tiba pada{' '}
-              <span className='text-gray_r-11 text-sm'>({manifests?.eta})</span>
-            </h1>
-            <h1 className='text-sm mt-2'>
-              Dikirim Menggunakan{' '}
-              <span className='text-red-500 font-semibold'>
-                {manifests?.deliveryOrder.carrier}
-              </span>
-            </h1>
-            <h2 className='text-sm mb-3'>
-              Tipe Service {' '}
-              <span className='text-red-500 font-semibold'>
-                {manifests?.deliveryOrder.service}
-              </span>
-            </h2>
-            {manifests?.waybillNumber && (
-              <div className='flex justify-between items-center'>
-                <h1>No. Resi</h1>
-                <div className='flex justify-between gap-x-2 items-center'>
-                  <h1 className='font-semibold'>{manifests?.waybillNumber}</h1>
+            <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()}
@@ -172,68 +158,98 @@ const Manifest = ({ idAWB, closePopup }) => {
                   </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>
           <hr className='mt-4' />
+          {manifests?.isDelay && (
+            <div
+              class='flex items-center p-4 mb-4 text-sm text-yellow-800 rounded-lg bg-yellow-50'
+              role='alert'
+            >
+              <svg
+                class='flex-shrink-0 inline w-4 h-4 mr-3'
+                aria-hidden='true'
+                fill='currentColor'
+                viewBox='0 0 20 20'
+              >
+                <path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z' />
+              </svg>
+              <div>Pesanan anda mungkin mengalami keterlambatan tiba</div>
+            </div>
+          )}
           <div className='pt-4'>
-            <ol class='relative border-l border-gray_r-7'>
-              {manifests?.manifests?.map((manifest, index) => (
-                <>
-                  <li class='mb-6 ml-4' key={index}>
-                    {manifests.delivered == true && index == 0 ? (
-                      <div
-                        class={`absolute w-6 h-6 rounded-full mt-1.5 -left-3 border ${
-                          index == 0
-                            ? 'bg-green-100 border-green-100'
-                            : 'bg-gray_r-7 border-white'
-                        }`}
-                      >
-                        <ImageNext
-                          src='/images/open-box(1).svg'
-                          width={30}
-                          height={20}
-                        />
-                      </div>
-                    ) : (
-                      <div
-                        class={`absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 border bg-gray_r-7 border-white`}
-                      />
-                    )}
-                    {manifests.delivered != true && (
+            <ol className='relative'>
+              {manifests?.manifests?.map((manifest, index) => {
+                const isFirst = index === 0;
+                const isDelivered = manifests.delivered === true;
+                const isBiteship = manifests.isBiteship === true;
+                const statusTitle =
+                  isDelivered && isFirst && !isBiteship
+                    ? 'Pesanan sampai'
+                    : isBiteship
+                    ? capitalizeWords(manifest.status)
+                    : '';
+
+                return (
+                  <li className='grid grid-cols-[80px_20px_1fr] gap-2 mb-6 items-start' key={index}>
+                    {/* Kolom 1: Tanggal + Jam */}
+                    <div className='text-sm text-gray-400 whitespace-nowrap'>
+                      {formatCustomDate(manifest.datetime)}
+                    </div>
+
+                    {/* Kolom 2: Bullet/Poin */}
+                    <div className='relative flex items-start justify-center pt-1'>
                       <div
-                        class={`absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 border ${
-                          index == 0
+                        className={`w-3 h-3 rounded-full border ${
+                          index === 0 && manifests.delivered
                             ? 'bg-green-600 border-green-600'
-                            : 'bg-gray_r-7 border-white'
-                        } `}
+                            : 'bg-gray-400 border-white'
+                        }`}
                       />
-                    )}
+                    </div>
 
-                    <time class='text-sm leading-none text-gray-400'>
-                      {formatCustomDate(manifest.datetime)}
-                    </time>
-                    {manifests.delivered == true &&
-                      index == 0 &&
-                      manifests.isBiteship == false && (
-                        <p
-                          class={`leading-6 font-semibold text-sm text-green-600 `}
-                        >
-                          Sudah Sampai
-                        </p>
-                      )}
-                    {manifests.isBiteship == true && (
-                      <p
-                        class={`leading-6 font-semibold text-sm text-green-600 `}
-                      >
-                        {capitalizeWords(manifest.status)}
+                    {/* Kolom 3: Status dan Deskripsi */}
+                    <div>
+                      <p className='text-sm font-semibold text-green-600'>
+                        {manifests?.deliveryOrder.carrier != 'Self Pick Up' ? capitalizeWords(manifest.status) : ''}
                       </p>
-                    )}
-                    <p class={`leading-6 text-[12px] text-gray_r-11`}>
-                      {manifest.description}
-                    </p>
+                      <p
+                        className='text-xs text-gray-600'
+                        dangerouslySetInnerHTML={{
+                          __html: manifest.description,
+                        }}
+                      />
+                    </div>
                   </li>
-                </>
-              ))}
+                );
+              })}
             </ol>
           </div>
         </BottomPopup>