diff options
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/auth/components/Menu.jsx | 3 | ||||
| -rw-r--r-- | src/lib/shipment/api/listShipment.js | 9 | ||||
| -rw-r--r-- | src/lib/shipment/components/Shipments.jsx | 219 | ||||
| -rw-r--r-- | src/lib/treckingAwb/api/getManifest.js | 0 | ||||
| -rw-r--r-- | src/lib/treckingAwb/component/Manifest.jsx | 72 |
5 files changed, 303 insertions, 0 deletions
diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx index 386b817c..e54992be 100644 --- a/src/lib/auth/components/Menu.jsx +++ b/src/lib/auth/components/Menu.jsx @@ -15,6 +15,9 @@ const Menu = () => { <LinkItem href='/my/transactions' active={routeStartWith('/my/transactions')}> Daftar Transaksi </LinkItem> + <LinkItem href='/my/shipments' active={routeStartWith('/my/shipments')}> + Daftar Pengiriman + </LinkItem> <LinkItem href='/my/invoices' active={routeStartWith('/my/invoices')}> Invoice & Faktur Pajak </LinkItem> 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..eb14c77f --- /dev/null +++ b/src/lib/shipment/components/Shipments.jsx @@ -0,0 +1,219 @@ +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 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' + +const { listShipments } = require('../api/listShipment') + +const Shipments = () => { + const router = useRouter() + const { q = '', page = 1 } = router.query + + const limit = 15 + + const query = { + name: q, + offset: (page - 1) * limit, + limit + } + + const queryString = _.toQuery(query) + + const { data: shipments } = useQuery('shipments', () => listShipments({ query: queryString })) + const [ idAWB, setIdAWB ] = useState(null) + + const closePopup = () => { + setIdAWB(null) + } + + const handleSubmit = async () => {} + 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'>99 {'>'}</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} /> + </div> + <h1 className='text-xs'>Pengiriman</h1> + <h1 className='text-xs'>99 {'>'}</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> + </div> + </div> + + <form className='flex gap-x-3' onSubmit={handleSubmit}> + <input + type='text' + className='form-input' + placeholder='Cari Pengiriman...' + value='' + onChange={(e) => setInputQuery(e.target.value)} + /> + <button className='btn-light bg-transparent px-3' type='submit'> + <MagnifyingGlassIcon className='w-6' /> + </button> + </form> + </div> + </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='' + 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> + </div> + </div> + </div> + <Manifest idAWB={idAWB} closePopup={closePopup}/> + </DesktopView> + </> + ) +} + +export default Shipments diff --git a/src/lib/treckingAwb/api/getManifest.js b/src/lib/treckingAwb/api/getManifest.js new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/src/lib/treckingAwb/api/getManifest.js 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 |
