page daftar pengiriman

1 files changed, 72 insertions, 0 deletions

diff --git a/src/lib/treckingAwb/component/Manifest.jsx b/src/lib/treckingAwb/component/Manifest.jsx
new file mode 100644
index 00000000..b8ad78c4
--- /dev/null
+++ b/src/lib/treckingAwb/component/Manifest.jsx
@@ -0,0 +1,72 @@
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import { useState } from 'react'
+
+const Manifest = ({ idAWB, closePopup }) => {
+  console.log('ini adalah', idAWB)
+  const airway = {
+    waybillNumber: '1234',
+    deliveryOrder: {
+      name: 'name',
+      carrier: 'carrier'
+    },
+    manifests: [
+      {
+        datetime: '12/12/2023',
+        description: 'ini descripsi'
+      }
+    ]
+  }
+  return (
+    <>
+      <BottomPopup
+        key={airway.waybillNumber}
+        title='Detail Pengiriman'
+        active={idAWB}
+        close={closePopup}
+      >
+        <div className='flex flex-col gap-y-4 my-4'>
+          <div className='flex justify-between'>
+            <div className='text-gray_r-11'>No Pengiriman</div>
+            <div>{airway?.deliveryOrder?.name}</div>
+          </div>
+          <div className='flex justify-between'>
+            <div className='text-gray_r-11'>Kurir</div>
+            <div>{airway?.deliveryOrder?.carrier}</div>
+          </div>
+          <div className='flex justify-between'>
+            <div className='text-gray_r-11'>No Resi</div>
+            <div>{airway?.waybillNumber}</div>
+          </div>
+        </div>
+
+        <div className='pt-4'>
+          <div className='font-semibold text-body-1 mb-4'>Status Pengiriman</div>
+          <ol class='relative border-l border-gray_r-7'>
+            {airway?.manifests?.map((manifest, index) => (
+              <li class='mb-6 ml-4' key={index}>
+                <div
+                  class={`absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 border ${
+                    index == 0 ? 'bg-red-600 border-red-600' : 'bg-gray_r-7 border-white'
+                  }`}
+                />
+                <time class='text-sm leading-none text-gray-400'>{manifest.datetime}</time>
+                <p
+                  class={`leading-6 font-medium text-body-2 mt-2 ${
+                    index == 0 ? 'text-red-600' : 'text-gray_r-11'
+                  }`}
+                >
+                  {manifest.description}
+                </p>
+              </li>
+            ))}
+            {(!airway?.manifests || airway?.manifests?.length == 0) && (
+              <div className='badge-red text-sm'>Belum ada pengiriman</div>
+            )}
+          </ol>
+        </div>
+      </BottomPopup>
+    </>
+  )
+}
+
+export default Manifest