summaryrefslogtreecommitdiff
path: root/src/lib/shipment
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/shipment')
-rw-r--r--src/lib/shipment/api/listShipment.js9
-rw-r--r--src/lib/shipment/components/Shipments.jsx315
2 files changed, 324 insertions, 0 deletions
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
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 14:43:18 +0000