cr - traking web awb

1 files changed, 162 insertions, 78 deletions

diff --git a/src/lib/shipment/components/Shipments.jsx b/src/lib/shipment/components/Shipments.jsx
index 8b369a11..129e2496 100644
--- a/src/lib/shipment/components/Shipments.jsx
+++ b/src/lib/shipment/components/Shipments.jsx
@@ -5,7 +5,7 @@ import { EllipsisVerticalIcon, MagnifyingGlassIcon } from '@heroicons/react/24/o
 import ImageNext from 'next/image'
 import { useRouter } from 'next/router'
 import { useQuery } from 'react-query'
-import _ from 'lodash-contrib'
+import _, { forEach } from 'lodash-contrib'
 import Spinner from '@/core/components/elements/Spinner/Spinner'
 import Manifest from '@/lib/treckingAwb/component/Manifest'
 import { useState } from 'react'
@@ -18,19 +18,24 @@ const { listShipments } = require('../api/listShipment')
 const Shipments = () => {
   const router = useRouter()
   const { q = '', page = 1 } = router.query
+  const [paramStatus, setParamStatus] = useState(null)
 
   const limit = 15
 
   const query = {
     q: q,
+    status: paramStatus,
     offset: (page - 1) * limit,
     limit
   }
   const [inputQuery, setInputQuery] = useState(q)
   const queryString = _.toQuery(query)
 
-  const { data: shipments } = useQuery('shipments', () => listShipments({ query: queryString }))
+  const { data: shipments } = useQuery('shipments' + queryString, () =>
+    listShipments({ query: queryString })
+  )
   const [idAWB, setIdAWB] = useState(null)
+  console.log('ini shipmnets', shipments)
 
   const pageCount = Math.ceil(shipments?.pickingTotal / limit)
   let pageQuery = _.omit(query, ['limit', 'offset', 'context'])
@@ -45,41 +50,25 @@ const Shipments = () => {
     e.preventDefault()
     router.push(`${router.pathname}?q=${inputQuery}`)
   }
+
+  const filterStatus = async (status) => {
+    if (status === paramStatus) {
+      setParamStatus(null)
+    } else {
+      setParamStatus(status)
+    }
+  }
   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>
+            <CardStatus
+              device={'mobile'}
+              paramStatus={paramStatus}
+              shipments={shipments}
+              filterStatus={filterStatus}
+            />
           </div>
 
           <form className='flex gap-x-3' onSubmit={handleSubmit}>
@@ -108,14 +97,19 @@ const Shipments = () => {
                   <p className='mt-2'>No. Resi : {shipment.trackingNumber || '-'}</p>
                 </div>
                 <div className='flex justify-between'>
-                  {shipment?.delivered && (
+                  {shipment?.status === 'completed' && (
                     <div className='bg-green-100 p-2 rounded '>
                       <p className='text-green-600 text-sm'>Pesanan Tiba</p>
                     </div>
                   )}
-                  {!shipment?.delivered && (
+                  {shipment?.status === 'shipment' && (
+                    <div className='bg-yellow-100 p-2 rounded '>
+                      <p className='text-yellow-600 text-sm'>Sedang Dikirim</p>
+                    </div>
+                  )}
+                  {shipment?.status === 'pending' && (
                     <div className='bg-red-100 p-2 rounded '>
-                      <p className='text-red-600 text-sm'>Sedang Dikirim</p>
+                      <p className='text-red-600 text-sm'>Pending</p>
                     </div>
                   )}
                 </div>
@@ -187,49 +181,12 @@ const Shipments = () => {
                 </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>
+                <CardStatus
+                  device={'desktop'}
+                  paramStatus={paramStatus}
+                  shipments={shipments}
+                  filterStatus={filterStatus}
+                />
               </div>
             </div>
             <div className='p-4 bg-white border border-gray_r-6 rounded'>
@@ -310,4 +267,131 @@ const Shipments = () => {
   )
 }
 
+const CardStatus = ({ device, paramStatus, shipments, filterStatus }) => {
+  const status = [`pending`, `shipment`, `completed`]
+
+  return (
+    <>
+      {status.map((value) => {
+        const statusData = getStatusLabel(device, value, shipments)
+        if (device === 'desktop') {
+          return (
+            <div
+              key={value} // Gunakan 'value' sebagai 'key' jika mungkin
+              className={`max-w-sm p-6 bg-white border rounded-lg shadow md:min-w-[268px] cursor-pointer hover:shadow-lg ${
+                paramStatus === value ? 'border-red-600' : 'border-gray-200'
+              }`}
+              onClick={() => filterStatus(value)}
+            >
+              <h2 className='mb-2 text-lg font-bold tracking-tight'>{statusData.label}</h2>
+              {statusData.image}
+              <h1 className='text-xl font-bold'>
+                {statusData.shipCount} <span className='text-sm'>Pesanan</span>
+              </h1>
+            </div>
+          )
+        } else {
+          return (
+            <div
+              key={value}
+              className={`flex justify-between items-center gap-x-1 pt-2 pb-2 pl-1 pr-1  bg-white border border-gray-200 rounded-lg shadow cursor-pointer ${
+                paramStatus === value ? 'border-red-600' : 'border-gray-200'
+              }`}
+              onClick={() => filterStatus(value)}
+            >
+              {statusData.image}
+              <h1 className='text-xs'>{statusData.label}</h1>
+              <h1 className='text-xs '>
+                {' '}
+                <span className='truncate'>{statusData.shipCount}</span> {'>'}
+              </h1>
+            </div>
+          )
+        }
+      })}
+    </>
+  )
+}
+
+const getStatusLabel = (device, status, shipments) => {
+  let images = null
+  switch (status) {
+    case 'pending':
+      if (device === 'desktop') {
+        images = (
+          <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>
+        )
+      } else {
+        images = (
+          <div>
+            <ImageNext src='/images/BOX(1).svg' width={15} height={20} />
+          </div>
+        )
+      }
+      return {
+        label: 'Pending',
+        shipCount: shipments?.summary?.pendingCount,
+        image: images
+      }
+    case 'shipment':
+      if (device === 'desktop') {
+        images = (
+          <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>
+        )
+      } else {
+        images = (
+          <div>
+            <ImageNext src='/images/BOX_DELIVER_(1).svg' width={18} height={20} />
+          </div>
+        )
+      }
+      return {
+        label: 'Pengiriman',
+        shipCount: shipments?.summary?.shipmentCount,
+        image: images
+      }
+    case 'completed':
+      if (device === 'desktop') {
+        images = (
+          <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>
+        )
+      } else {
+        images = (
+          <div>
+            <ImageNext src='/images/open-box(1).svg' width={16} height={20} />
+          </div>
+        )
+      }
+      return {
+        label: 'Pesanan Tiba',
+        shipCount: shipments?.summary?.completedCount,
+        image: images
+      }
+    default:
+      return 'Status Tidak Dikenal'
+  }
+}
+
 export default Shipments