diff options
Diffstat (limited to 'src/lib/shipment')
| -rw-r--r-- | src/lib/shipment/components/Shipments.jsx | 122 |
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> </> ) |