summaryrefslogtreecommitdiff
path: root/src/lib/treckingAwb
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/treckingAwb')
-rw-r--r--src/lib/treckingAwb/component/Manifest.jsx180
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>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 06:16:09 +0000