add icon menu sidebar, add pagination

1 files changed, 109 insertions, 13 deletions

diff --git a/src/lib/shipment/components/Shipments.jsx b/src/lib/shipment/components/Shipments.jsx
index eb14c77f..d62afcb7 100644
--- a/src/lib/shipment/components/Shipments.jsx
+++ b/src/lib/shipment/components/Shipments.jsx
@@ -1,7 +1,7 @@
 import DesktopView from '@/core/components/views/DesktopView'
 import MobileView from '@/core/components/views/MobileView'
 import Menu from '@/lib/auth/components/Menu'
-import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'
+import { EllipsisVerticalIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline'
 import ImageNext from 'next/image'
 import { useRouter } from 'next/router'
 import { useQuery } from 'react-query'
@@ -9,6 +9,9 @@ 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')
 
@@ -19,21 +22,30 @@ const Shipments = () => {
   const limit = 15
 
   const query = {
-    name: q,
+    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 [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 () => {}
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    router.push(`${router.pathname}?q=${inputQuery}`)
+  }
   return (
     <>
       <MobileView>
@@ -44,21 +56,30 @@ const Shipments = () => {
                 <ImageNext src='/images/BOX(1).svg' width={15} height={20} />
               </div>
               <h1 className='text-xs'>Pending</h1>
-              <h1 className='text-xs'>99 {'>'}</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={15} height={20} />
+                <ImageNext src='/images/BOX_DELIVER_(1).svg' width={18} height={20} />
               </div>
               <h1 className='text-xs'>Pengiriman</h1>
-              <h1 className='text-xs'>99 {'>'}</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'>99 {'>'}</h1>
+              <h1 className='text-xs'>
+                {' '}
+                {shipments?.summary?.shipmentCount} {'>'}
+              </h1>
             </div>
           </div>
 
@@ -67,14 +88,80 @@ const Shipments = () => {
               type='text'
               className='form-input'
               placeholder='Cari Pengiriman...'
-              value=''
+              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_DELIVER_(1).svg`} width={20} height={20} />
+                <p className='text-sm text-green-600 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'>
@@ -155,7 +242,7 @@ const Shipments = () => {
                     type='text'
                     className='form-input'
                     placeholder='Cari Pengiriman...'
-                    value=''
+                    value={inputQuery}
                     onChange={(e) => setInputQuery(e.target.value)}
                   />
                   <button className='btn-light bg-transparent px-3' type='submit'>
@@ -199,7 +286,10 @@ const Shipments = () => {
                       <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'>
+                        <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>
@@ -207,10 +297,16 @@ const Shipments = () => {
                   ))}
                 </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}/>
+        <Manifest idAWB={idAWB} closePopup={closePopup} />
       </DesktopView>
     </>
   )