Merged in Feature/page_tracking_awb (pull request #57)

Feature/page tracking awb

7 files changed, 601 insertions, 30 deletions

diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx
index 386b817c..939a0d5f 100644
--- a/src/lib/auth/components/Menu.jsx
+++ b/src/lib/auth/components/Menu.jsx
@@ -1,5 +1,6 @@
 import Link from '@/core/components/elements/Link/Link'
 import { useRouter } from 'next/router'
+import ImageNext from 'next/image'
 
 const Menu = () => {
   const router = useRouter()
@@ -10,30 +11,61 @@ const Menu = () => {
     <div className='grid grid-cols-1 bg-white border border-gray_r-6 rounded py-2 px-4 sticky top-48'>
       <div className='mt-4 mb-1 font-medium'>Menu</div>
       <LinkItem href='/my/quotations' active={routeStartWith('/my/quotations')}>
-        Daftar Quotation
+        <div className='flex gap-x-3 items-center'>
+          <ImageNext src='/images/icon/icon_daftar_quotation.svg' width={18} height={20} />
+          <p>Daftar Quotation</p>
+        </div>
       </LinkItem>
       <LinkItem href='/my/transactions' active={routeStartWith('/my/transactions')}>
-        Daftar Transaksi
+        <div className='flex gap-x-3 items-center'>
+          <ImageNext src='/images/icon/icon_daftar_transaksi.svg' width={18} height={20} />
+          <p>Daftar Transaksi</p>
+        </div>
+      </LinkItem>
+      <LinkItem href='/my/shipments' active={routeStartWith('/my/shipments')}>
+        <div className='flex gap-x-3 items-center'>
+          <ImageNext src='/images/icon/icon_pengiriman.svg' width={18} height={20} />
+          <p>Daftar Pengiriman</p>
+        </div>
       </LinkItem>
       <LinkItem href='/my/invoices' active={routeStartWith('/my/invoices')}>
-        Invoice & Faktur Pajak
+        <div className='flex gap-x-3 items-center'>
+          <ImageNext src='/images/icon/icon_invoice.svg' width={18} height={20} />
+          <p>Invoice & Faktur Pajak</p>
+        </div>
       </LinkItem>
       <LinkItem href='/my/wishlist' active={routeStartWith('/my/wishlist')}>
-        Wishlist
+        <div className='flex gap-x-3 items-center'>
+          <ImageNext src='/images/icon/icon_wishlist.svg' width={18} height={20} />
+          <p>Wishlist</p>
+        </div>
       </LinkItem>
-
       <div className='mt-4 mb-1 font-medium'>Pusat Bantuan</div>
-      <LinkItem href='/'>Layanan Pelanggan</LinkItem>
 
+      <LinkItem href='/'>
+        <div className='flex gap-x-3 items-center'>
+          <ImageNext src='/images/icon/icon_layanan_pelanggan.svg' width={18} height={20} />
+          <p>Layanan Pelanggan</p>
+        </div>
+      </LinkItem>
       <div className='mt-4 mb-1 font-medium'>Pengaturan Akun</div>
       <LinkItem href='/my/address' active={routeStartWith('/my/address')}>
-        Daftar Alamat
+        <div className='flex gap-x-3 items-center'>
+          <ImageNext src='/images/icon/icon_daftar_alamat.svg' width={18} height={20} />
+          <p>Daftar Alamat</p>
+        </div>
       </LinkItem>
       <LinkItem href='/my/profile' active={routeStartWith('/my/profile')}>
-        Profil Saya
+        <div className='flex gap-x-3 items-center'>
+          <ImageNext src='/images/icon/icon_profile.svg' width={18} height={20} />
+          <p>Profil Saya</p>
+        </div>
       </LinkItem>
       <button type='button' className='text-gray_r-12/80 p-2 text-left'>
-        Keluar Akun
+        <div className='flex gap-x-3 items-center'>
+          <ImageNext src='/images/icon/icon_logout.svg' width={18} height={20} />
+          <p>Keluar Akun</p>
+        </div>
       </button>
     </div>
   )
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index afb94c10..0eb05345 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -297,10 +297,12 @@ const Checkout = () => {
       order_line: JSON.stringify(productOrder),
       delivery_amount: biayaKirim,
       carrier_id: selectedCarrierId,
+      estimated_arrival_days: splitDuration(etd),
       delivery_service_type: selectedExpedisiService,
       voucher: activeVoucher,
       type: 'sale_order'
     }
+
     if (query) {
       data.source = 'buy'
     }
@@ -1444,6 +1446,22 @@ function calculateEstimatedArrival(duration) {
   return ''
 }
 
+function splitDuration(duration){
+  if (duration) {
+    let estimationDate = null
+    if (duration.includes('-')){
+      estimationDate = duration.split('-')
+      estimationDate = parseInt(estimationDate[1])
+    }else{
+      estimationDate = parseInt(duration)
+    }
+
+    return estimationDate
+  }
+
+  return ''
+}
+
 const extractDuration = (text) => {
   const matches = text.match(/\d+(?:-\d+)?/g)
 
diff --git a/src/lib/shipment/api/listShipment.js b/src/lib/shipment/api/listShipment.js
new file mode 100644
index 00000000..a9237b76
--- /dev/null
+++ b/src/lib/shipment/api/listShipment.js
@@ -0,0 +1,9 @@
+import odooApi from "@/core/api/odooApi";
+import { getAuth } from "@/core/utils/auth"
+
+export const listShipments = async ({query}) => {
+    const auth = getAuth()
+    const list = await odooApi('GET', `/api/v1/partner/${auth.partnerId}/stock-picking?${query}`)
+
+    return list;
+}
diff --git a/src/lib/shipment/components/Shipments.jsx b/src/lib/shipment/components/Shipments.jsx
new file mode 100644
index 00000000..c9d3e627
--- /dev/null
+++ b/src/lib/shipment/components/Shipments.jsx
@@ -0,0 +1,315 @@
+import DesktopView from '@/core/components/views/DesktopView'
+import MobileView from '@/core/components/views/MobileView'
+import Menu from '@/lib/auth/components/Menu'
+import { EllipsisVerticalIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline'
+import ImageNext from 'next/image'
+import { useRouter } from 'next/router'
+import { useQuery } from 'react-query'
+import _ from 'lodash-contrib'
+import Spinner from '@/core/components/elements/Spinner/Spinner'
+import Manifest from '@/lib/treckingAwb/component/Manifest'
+import { useState } from 'react'
+import Pagination from '@/core/components/elements/Pagination/Pagination'
+import Link from 'next/link'
+import TransactionStatusBadge from '@/lib/transaction/components/TransactionStatusBadge'
+
+const { listShipments } = require('../api/listShipment')
+
+const Shipments = () => {
+  const router = useRouter()
+  const { q = '', page = 1 } = router.query
+
+  const limit = 15
+
+  const query = {
+    q: q,
+    offset: (page - 1) * limit,
+    limit
+  }
+  console.log('ini query', query)
+  const [inputQuery, setInputQuery] = useState(q)
+  const queryString = _.toQuery(query)
+
+  const { data: shipments } = useQuery('shipments', () => listShipments({ query: queryString }))
+  const [idAWB, setIdAWB] = useState(null)
+
+  const pageCount = Math.ceil(shipments?.pickingTotal / limit)
+  let pageQuery = _.omit(query, ['limit', 'offset', 'context'])
+  pageQuery = _.pickBy(pageQuery, _.identity)
+  pageQuery = _.toQuery(pageQuery)
+
+  const closePopup = () => {
+    setIdAWB(null)
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    router.push(`${router.pathname}?q=${inputQuery}`)
+  }
+  return (
+    <>
+      <MobileView>
+        <div className='p-4 flex flex-col gap-y-4'>
+          <div className='flex justify-between gap-x-1'>
+            <div className='flex justify-between items-center gap-x-2 p-2 bg-white border border-gray-200 rounded-lg shadow'>
+              <div>
+                <ImageNext src='/images/BOX(1).svg' width={15} height={20} />
+              </div>
+              <h1 className='text-xs'>Pending</h1>
+              <h1 className='text-xs'>
+                {' '}
+                {shipments?.summary?.pendingCount} {'>'}
+              </h1>
+            </div>
+            <div className='flex justify-between items-center gap-x-2 p-2 bg-white border border-gray-200 rounded-lg shadow'>
+              <div>
+                <ImageNext src='/images/BOX_DELIVER_(1).svg' width={18} height={20} />
+              </div>
+              <h1 className='text-xs'>Pengiriman</h1>
+              <h1 className='text-xs'>
+                {' '}
+                {shipments?.summary?.shipmentCount} {'>'}
+              </h1>
+            </div>
+            <div className='flex justify-between items-center gap-x-2 p-2 bg-white border border-gray-200 rounded-lg shadow'>
+              <div>
+                <ImageNext src='/images/open-box(1).svg' width={16} height={20} />
+              </div>
+              <h1 className='text-xs'>Selesai</h1>
+              <h1 className='text-xs'>
+                {' '}
+                {shipments?.summary?.shipmentCount} {'>'}
+              </h1>
+            </div>
+          </div>
+
+          <form className='flex gap-x-3' onSubmit={handleSubmit}>
+            <input
+              type='text'
+              className='form-input'
+              placeholder='Cari Pengiriman...'
+              value={inputQuery}
+              onChange={(e) => setInputQuery(e.target.value)}
+            />
+            <button className='btn-light bg-transparent px-3' type='submit'>
+              <MagnifyingGlassIcon className='w-6' />
+            </button>
+          </form>
+
+          {shipments?.pickings.map((shipment) => (
+            <div className='p-4 shadow border border-gray_r-3 rounded-md' key={shipment.id}>
+              <div className='flex justify-between items-center mb-3'>
+                <div className='text-caption-2 text-gray_r-11'>
+                  <p>
+                    Kurir :{' '}
+                    <span className='text-gray_r-11 font-semibold'>
+                      {shipment.carrierName || '-'}
+                    </span>
+                  </p>
+                  <p className='mt-2'>No. Resi : {shipment.trackingNumber || '-'}</p>
+                </div>
+                <div className='flex justify-between'>
+                  {shipment?.delivered && (
+                    <div className='bg-green-100 p-2 rounded '>
+                      <p className='text-green-600 text-sm'>Pesanan Tiba</p>
+                    </div>
+                  )}
+                  {!shipment?.delivered && (
+                    <div className='bg-red-100 p-2 rounded '>
+                      <p className='text-red-600 text-sm'>Sedang Dikirim</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+              <hr />
+              <div className='flex justify-between mt-2 items-center mb-5'>
+                <div>
+                  <span className='text-caption-2 text-gray_r-11'>No. Transaksi</span>
+                  <Link href={`/my/transactions/${shipment.saleOrder.id}`}>
+                    <h2 className='text-danger-500 mt-1 mb-2'>{shipment.saleOrder.name}</h2>
+                  </Link>
+                  <span className='text-caption-2 text-gray_r-11'>{shipment.date}</span>
+                </div>
+                <div>
+                  <button
+                    onClick={() => setIdAWB(shipment.id)}
+                    className='bg-red-600 p-2 border border-red-600 rounded text-white w-24'
+                  >
+                    {!shipment.delivered ? 'Lacak' : 'Histori'}
+                  </button>
+                </div>
+              </div>
+              <hr />
+              <button
+                onClick={() => setIdAWB(shipment.id)}
+                className='flex items-center mt-1 gap-x-1 min-w-full'
+              >
+                <ImageNext src={`/images/BOX_DELIVERY_GREEN.svg`} width={20} height={20} />
+                <p className='text-sm text-green-700 truncate'>
+                  {shipment.lastManifest.description}
+                </p>
+                <p className='ml-auto'>{'>'}</p>
+              </button>
+            </div>
+          ))}
+
+          <Pagination
+            pageCount={pageCount}
+            currentPage={parseInt(page)}
+            url={router.pathname + pageQuery}
+            className='mt-2 mb-2'
+          />
+        </div>
+
+        <Manifest idAWB={idAWB} closePopup={closePopup} />
+      </MobileView>
+      <DesktopView>
+        <div className='container mx-auto flex py-10'>
+          <div className='w-3/12 pr-4'>
+            <Menu />
+          </div>
+          <div className='w-9/12'>
+            <div className='p-4 bg-white border border-gray_r-6 rounded mb-2'>
+              <h1 className='text-title-sm font-semibold'>Pengiriman</h1>
+              <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>
+                  <span class='font-medium'>Warning alert!</span> Change a few things up and try
+                  submitting again.
+                </div>
+              </div>
+              <div className='flex justify-between gap-x-5'>
+                <div class='max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow min-w-[268px]'>
+                  <h2 class='mb-2 text-lg font-bold tracking-tight'>Pending</h2>
+                  <div className='bg-red-100 border border-red-200 rounded-sm p-2 w-20 h-[39px] mb-2'>
+                    <div>
+                      <ImageNext
+                        src='/images/BOX(1).svg'
+                        width={25}
+                        height={20}
+                        style={{ stroke: 'red' }}
+                      />
+                    </div>
+                  </div>
+                  <h1 className='text-xl font-bold'>
+                    {shipments?.summary?.pendingCount} <span className='text-sm'>Pesanan</span>
+                  </h1>
+                </div>
+                <div class='max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow min-w-[268px]'>
+                  <h5 class='mb-2 text-lg font-bold tracking-tight'>Pengiriman</h5>
+                  <div className='bg-yellow-100 border border-yellow-200 rounded-sm p-1 w-20 mb-2'>
+                    <div>
+                      <ImageNext src='/images/BOX_DELIVER_(1).svg' width={30} height={20} />
+                    </div>
+                  </div>
+                  <h1 className='text-xl font-bold'>
+                    {shipments?.summary?.shipmentCount} <span className='text-sm'>Pesanan</span>
+                  </h1>
+                </div>
+                <div class='max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow min-w-[268px]'>
+                  <h5 class='mb-2 text-lg font-bold tracking-tight'>Pesanan Tiba</h5>
+                  <div className='bg-green-100 border border-green-200 rounded-sm p-1 w-20 mb-2'>
+                    <div>
+                      <ImageNext
+                        src='/images/open-box(1).svg'
+                        width={30}
+                        height={20}
+                        className='stroke-orange-600'
+                      />
+                    </div>
+                  </div>
+                  <h1 className='text-xl font-bold'>
+                    {shipments?.summary?.completedCount} <span className='text-sm'>Pesanan</span>
+                  </h1>
+                </div>
+              </div>
+            </div>
+            <div className='p-4 bg-white border border-gray_r-6 rounded'>
+              <div className='flex mb-6 items-center justify-between'>
+                <h1 className='text-title-sm font-semibold'>Detail Pengiriman</h1>
+                <form className='flex gap-x-2' onSubmit={handleSubmit}>
+                  <input
+                    type='text'
+                    className='form-input'
+                    placeholder='Cari Pengiriman...'
+                    value={inputQuery}
+                    onChange={(e) => setInputQuery(e.target.value)}
+                  />
+                  <button className='btn-light bg-transparent px-3' type='submit'>
+                    <MagnifyingGlassIcon className='w-6' />
+                  </button>
+                </form>
+              </div>
+              <table className='table-data'>
+                <thead>
+                  <tr>
+                    <th>Tanggal</th>
+                    <th>No. Resi</th>
+                    <th>No. Pengiriman</th>
+                    <th>Sales Order</th>
+                    <th>Purchase Order</th>
+                    <th>Expedisi</th>
+                    <th>Status</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {!shipments && (
+                    <tr>
+                      <td colSpan={7}>
+                        <div className='flex justify-center my-2'>
+                          <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+                        </div>
+                      </td>
+                    </tr>
+                  )}
+                  {shipments && shipments?.pickings?.length == 0 && (
+                    <tr>
+                      <td colSpan={7}>Tidak ada transaksi</td>
+                    </tr>
+                  )}
+                  {shipments?.pickings.map((shipment) => (
+                    <tr key={shipment.id}>
+                      <td>{shipment.date || '-'}</td>
+                      <td>{shipment.trackingNumber || '-'}</td>
+                      <td>{shipment.name || '-'}</td>
+                      <td>{shipment.saleOrder.name || '-'}</td>
+                      <td>{shipment.saleOrder.clientOrderRef || '-'}</td>
+                      <td>{shipment.carrierName || '-'}</td>
+                      <td>
+                        <button
+                          onClick={() => setIdAWB(shipment.id)}
+                          className='bg-red-600 border border-red-600 rounded-md text-sm text-white p-1 w-20'
+                        >
+                          Lacak
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+              <Pagination
+                pageCount={pageCount}
+                currentPage={parseInt(page)}
+                url={router.pathname + pageQuery}
+                className='mt-2 mb-2'
+              />
+            </div>
+          </div>
+        </div>
+        <Manifest idAWB={idAWB} closePopup={closePopup} />
+      </DesktopView>
+    </>
+  )
+}
+
+export default Shipments
diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 74f3dbd5..82eb1775 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -21,6 +21,7 @@ import Image from '@/core/components/elements/Image/Image'
 import { createSlug } from '@/core/utils/slug'
 import toTitleCase from '@/core/utils/toTitleCase'
 import useAirwayBill from '../hooks/useAirwayBill'
+import Manifest from '@/lib/treckingAwb/component/Manifest'
 
 const Transaction = ({ id }) => {
   const { transaction } = useTransaction({ id })
@@ -31,6 +32,7 @@ const Transaction = ({ id }) => {
   const poNumber = useRef(null)
   const poFile = useRef(null)
   const [uploadPo, setUploadPo] = useState(false)
+  const [idAWB, setIdAWB] = useState(null)
   const openUploadPo = () => setUploadPo(true)
   const closeUploadPo = () => setUploadPo(false)
   const submitUploadPo = async () => {
@@ -110,6 +112,10 @@ const Transaction = ({ id }) => {
     )
   }
 
+  const closePopup = () => {
+    setIdAWB(null)
+  }
+
   return (
     transaction.data?.name && (
       <>
@@ -158,6 +164,7 @@ const Transaction = ({ id }) => {
             </button>
           </div>
         </BottomPopup>
+        <Manifest idAWB={idAWB} closePopup={closePopup}></Manifest>
 
         <MobileView>
           <div className='flex flex-col gap-y-4 p-4'>
@@ -179,26 +186,28 @@ const Transaction = ({ id }) => {
           <div className='p-4'>
             <div className='font-medium'>Pengiriman</div>
             <div className='flex flex-col gap-y-3 mt-4'>
-              {queryAirwayBill.data?.airways?.map((airway) => (
+              {transaction?.data?.pickings?.map((airway) => (
                 <button
-                  className='shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between items-center text-left'
-                  key={airway?.waybillNumber}
-                  onClick={() => setAirwayBillPopup(airway?.waybillNumber)}
+                  className='shadow rounded-md p-3 text-gray_r-12 font-normal flex justify-between items-center text-left'
+                  key={airway?.id}
+                  onClick={() => setIdAWB(airway?.id)}
                 >
                   <div>
-                    <span className='text-sm text-gray_r-11'>No Resi</span>
-                    <p className='mt-1 font-medium'>{airway?.waybillNumber}</p>
+                    <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_r-11 badge-green'>
-                      {airway?.deliveryStatus?.status}
+                    <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>
-            {!queryAirwayBill?.data?.airways && (
+            {transaction?.data?.pickings == 0 && (
               <div className='badge-red text-sm px-2'>Belum ada pengiriman</div>
             )}
           </div>
@@ -368,27 +377,29 @@ const Transaction = ({ id }) => {
               </div>
 
               <div className='text-h-sm font-semibold mt-10 mb-4'>Pengiriman</div>
-              <div className='grid grid-cols-3 gap-4'>
-                {queryAirwayBill.data?.airways?.map((airway) => (
+              <div className='grid grid-cols-3 gap-1'>
+                {transaction?.data?.pickings?.map((airway) => (
                   <button
-                    className='shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between items-center text-left'
-                    key={airway?.waybillNumber}
-                    onClick={() => setAirwayBillPopup(airway?.waybillNumber)}
+                    className='shadow rounded-md p-3 text-gray_r-12 font-normal flex justify-between items-center text-left'
+                    key={airway?.id}
+                    onClick={() => setIdAWB(airway?.id)}
                   >
                     <div>
-                      <span className='text-sm text-gray_r-11'>No Resi</span>
-                      <p className='mt-1 font-medium'>{airway?.waybillNumber}</p>
+                      <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_r-11 badge-green'>
-                        {airway?.deliveryStatus?.status}
+                      <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>
-              {!queryAirwayBill.data?.airways && (
+              {transaction?.data?.pickings.length == 0 && (
                 <div className='badge-red text-sm'>Belum ada pengiriman</div>
               )}
 
@@ -514,7 +525,7 @@ const Transaction = ({ id }) => {
           </div>
         </DesktopView>
 
-        {queryAirwayBill.data?.airways?.map((airway) => (
+        {/* {queryAirwayBill.data?.airways?.map((airway) => (
           <BottomPopup
             key={airway.waybillNumber}
             title='Detail Pengiriman'
@@ -564,7 +575,7 @@ const Transaction = ({ id }) => {
               </ol>
             </div>
           </BottomPopup>
-        ))}
+        ))} */}
       </>
     )
   )
diff --git a/src/lib/treckingAwb/api/getManifest.js b/src/lib/treckingAwb/api/getManifest.js
new file mode 100644
index 00000000..7d78a5f2
--- /dev/null
+++ b/src/lib/treckingAwb/api/getManifest.js
@@ -0,0 +1,9 @@
+const { default: odooApi } = require("@/core/api/odooApi")
+const { getAuth } = require("@/core/utils/auth")
+
+export const getManifest = async ({id}) => {
+    const auth = getAuth() 
+    const manifest = await odooApi('GET', `/api/v1/partner/${auth.partnerId}/stock-picking/${id}/tracking`)
+
+    return manifest
+}
\ No newline at end of file
diff --git a/src/lib/treckingAwb/component/Manifest.jsx b/src/lib/treckingAwb/component/Manifest.jsx
new file mode 100644
index 00000000..185a9d55
--- /dev/null
+++ b/src/lib/treckingAwb/component/Manifest.jsx
@@ -0,0 +1,177 @@
+import odooApi from '@/core/api/odooApi'
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
+import { getAuth } from '@/core/utils/auth'
+import { useEffect, useState } from 'react'
+import { toast } from 'react-hot-toast'
+import ImageNext from 'next/image'
+
+const Manifest = ({ idAWB, closePopup }) => {
+  const [manifests, setManifests] = useState(null)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const formatCustomDate = (date) => {
+    const months = [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec'
+    ]
+
+    const parts = date.split(' ') // Pisahkan tanggal dan waktu
+    const [datePart, timePart] = parts
+    const [yyyy, mm, dd] = datePart.split('-')
+    const [hh, min] = timePart.split(':')
+
+    const monthAbbreviation = months[parseInt(mm, 10) - 1]
+
+    return `${dd} ${monthAbbreviation} ${hh}:${min}`
+  }
+
+  const getManifest = async () => {
+    setIsLoading(true)
+    const auth = getAuth()
+    const list = await odooApi(
+      'GET',
+      `/api/v1/partner/${auth.partnerId}/stock-picking/${idAWB}/tracking`
+    )
+    setManifests(list)
+    setIsLoading(false)
+  }
+
+  useEffect(() => {
+    if (idAWB) {
+      getManifest()
+    } else {
+      setManifests(null)
+    }
+  }, [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 && (
+        <BottomPopup active={true} close=''>
+          <div className='leading-7 text-gray_r-12/80 flex justify-center'>Mohon Tunggu</div>
+          <div className='container flex justify-center my-4'>
+            <LogoSpinner width={48} height={48} />
+          </div>
+        </BottomPopup>
+      )}
+      {!isLoading && (
+        <BottomPopup
+          key={manifests?.waybillNumber}
+          title='Detail Pengiriman'
+          active={idAWB}
+          close={closePopup}
+        >
+          <div className='flex justify-between items-center mb-5'>
+            <h1 className='text-body-1'>Status Pesanan</h1>
+            {manifests?.delivered && (
+              <div className='bg-green-100 p-2 rounded '>
+                <p className='text-green-600 text-sm'>Pesanan Tiba</p>
+              </div>
+            )}
+            {!manifests?.delivered && (
+              <div className='bg-red-100 p-2 rounded '>
+                <p className='text-red-600 text-sm'>Sedang Dikirim</p>
+              </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 mb-3'>
+              Dikirim Menggunakan{' '}
+              <span className='text-red-500 font-semibold'>{manifests?.deliveryOrder.carrier}</span>
+            </h1>
+            {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>
+                  <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>
+          <hr className='mt-4' />
+          <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 && (
+                      <div
+                        class={`absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 border ${index == 0 ? 'bg-green-600 border-green-600' : 'bg-gray_r-7 border-white'} `}
+                      />
+                    )}
+
+                    <time class='text-sm leading-none text-gray-400'>
+                      {formatCustomDate(manifest.datetime)}
+                    </time>
+                    {manifests.delivered == true && index == 0 && (
+                      <p class={`leading-6 font-semibold text-sm text-green-600 `}>Sudah Sampai</p>
+                    )}
+                    <p class={`leading-6 text-[12px] text-gray_r-11`}>{manifest.description}</p>
+                  </li>
+                </>
+              ))}
+            </ol>
+          </div>
+        </BottomPopup>
+      )}
+    </>
+  )
+}
+
+export default Manifest