From e6feac8e6ce2ea3c428d4307251634708b676c25 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Wed, 23 Aug 2023 17:03:23 +0700
Subject: page daftar pengiriman

---
 .../elements/Navbar/NavbarUserDropdown.jsx         |   1 +
 src/lib/auth/components/Menu.jsx                   |   3 +
 src/lib/shipment/api/listShipment.js               |   9 +
 src/lib/shipment/components/Shipments.jsx          | 219 +++++++++++++++++++++
 src/lib/treckingAwb/api/getManifest.js             |   0
 src/lib/treckingAwb/component/Manifest.jsx         |  72 +++++++
 src/pages/my/menu.jsx                              |   1 +
 src/pages/my/shipments/index.jsx                   |  29 +++
 8 files changed, 334 insertions(+)
 create mode 100644 src/lib/shipment/api/listShipment.js
 create mode 100644 src/lib/shipment/components/Shipments.jsx
 create mode 100644 src/lib/treckingAwb/api/getManifest.js
 create mode 100644 src/lib/treckingAwb/component/Manifest.jsx
 create mode 100644 src/pages/my/shipments/index.jsx

(limited to 'src')

diff --git a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
index 7848124c..075462e9 100644
--- a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
+++ b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
@@ -15,6 +15,7 @@ const NavbarUserDropdown = () => {
       <div className='navbar-user-dropdown'>
         <Link href='/my/quotations'>Daftar Quotation</Link>
         <Link href='/my/transactions'>Daftar Transaksi</Link>
+        <Link href='/my/shipments'>Daftar Pengiriman</Link>
         <Link href='/my/invoices'>Invoice & Faktur Pajak</Link>
         <Link href='/my/wishlist'>Wishlist</Link>
         <Link href='/my/address'>Daftar Alamat</Link>
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
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
diff --git a/src/pages/my/menu.jsx b/src/pages/my/menu.jsx
index c8e1e7e9..8d209fba 100644
--- a/src/pages/my/menu.jsx
+++ b/src/pages/my/menu.jsx
@@ -42,6 +42,7 @@ export default function Menu() {
             <div className='divide-y divide-gray_r-6 border-y border-gray_r-6 mt-4'>
               <LinkItem href='/my/quotations'>Daftar Quotation</LinkItem>
               <LinkItem href='/my/transactions'>Daftar Transaksi</LinkItem>
+              <LinkItem href='/my/shipments'>Daftar Pengiriman</LinkItem>
               <LinkItem href='/my/invoices'>Invoice & Faktur Pajak</LinkItem>
               <LinkItem href='/my/wishlist'>Wishlist</LinkItem>
             </div>
diff --git a/src/pages/my/shipments/index.jsx b/src/pages/my/shipments/index.jsx
new file mode 100644
index 00000000..cb69c4e9
--- /dev/null
+++ b/src/pages/my/shipments/index.jsx
@@ -0,0 +1,29 @@
+import Seo from '@/core/components/Seo'
+import AppLayout from '@/core/components/layouts/AppLayout'
+import BasicLayout from '@/core/components/layouts/BasicLayout'
+import DesktopView from '@/core/components/views/DesktopView'
+import MobileView from '@/core/components/views/MobileView'
+import IsAuth from '@/lib/auth/components/IsAuth'
+import dynamic from 'next/dynamic'
+
+const ShipmentsComponent = dynamic(() => import('@/lib/shipment/components/Shipments'))
+
+export default function MyShipments() {
+  return (
+    <IsAuth>
+      <Seo title='Shipments - Indoteknik.com' />
+
+      <MobileView>
+        <AppLayout title='Pengiriman'>
+          <ShipmentsComponent />
+        </AppLayout>
+      </MobileView>
+
+      <DesktopView>
+        <BasicLayout>
+          <ShipmentsComponent />
+        </BasicLayout>
+      </DesktopView>
+    </IsAuth>
+  )
+}
-- 
cgit v1.2.3