summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/lib/transaction/api/airwayBillApi.js13
-rw-r--r--src/lib/transaction/components/Transaction.jsx180
-rw-r--r--src/lib/transaction/components/Transactions.jsx2
-rw-r--r--src/lib/transaction/hooks/useAirwayBill.js11
4 files changed, 167 insertions, 39 deletions
diff --git a/src/lib/transaction/api/airwayBillApi.js b/src/lib/transaction/api/airwayBillApi.js
new file mode 100644
index 00000000..1ef579c7
--- /dev/null
+++ b/src/lib/transaction/api/airwayBillApi.js
@@ -0,0 +1,13 @@
+import odooApi from '@/core/api/odooApi'
+import { getAuth } from '@/core/utils/auth'
+
+const airwayBillApi = async ({ orderId }) => {
+ const auth = getAuth()
+ const dataAirwayBill = await odooApi(
+ 'GET',
+ `/api/v1/partner/${auth.partnerId}/sale-order/${orderId}/awb`
+ )
+ return dataAirwayBill
+}
+
+export default airwayBillApi
diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index dca85f0c..74f3dbd5 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -12,7 +12,6 @@ import currencyFormat from '@/core/utils/currencyFormat'
import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'
import { ChevronDownIcon, ChevronRightIcon, ChevronUpIcon } from '@heroicons/react/24/outline'
import Link from '@/core/components/elements/Link/Link'
-import Alert from '@/core/components/elements/Alert/Alert'
import checkoutPoApi from '../api/checkoutPoApi'
import cancelTransactionApi from '../api/cancelTransactionApi'
import MobileView from '@/core/components/views/MobileView'
@@ -21,9 +20,13 @@ import Menu from '@/lib/auth/components/Menu'
import Image from '@/core/components/elements/Image/Image'
import { createSlug } from '@/core/utils/slug'
import toTitleCase from '@/core/utils/toTitleCase'
+import useAirwayBill from '../hooks/useAirwayBill'
const Transaction = ({ id }) => {
const { transaction } = useTransaction({ id })
+ const { queryAirwayBill } = useAirwayBill({ orderId: id })
+
+ const [airwayBillPopup, setAirwayBillPopup] = useState(null)
const poNumber = useRef(null)
const poFile = useRef(null)
@@ -173,6 +176,35 @@ const Transaction = ({ id }) => {
<Divider />
+ <div className='p-4'>
+ <div className='font-medium'>Pengiriman</div>
+ <div className='flex flex-col gap-y-3 mt-4'>
+ {queryAirwayBill.data?.airways?.map((airway) => (
+ <button
+ className='shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between items-center text-left'
+ key={airway?.waybillNumber}
+ onClick={() => setAirwayBillPopup(airway?.waybillNumber)}
+ >
+ <div>
+ <span className='text-sm text-gray_r-11'>No Resi</span>
+ <p className='mt-1 font-medium'>{airway?.waybillNumber}</p>
+ </div>
+ <div className='flex gap-x-2'>
+ <div className='text-sm text-gray_r-11 badge-green'>
+ {airway?.deliveryStatus?.status}
+ </div>
+ <ChevronRightIcon className='w-5 stroke-2' />
+ </div>
+ </button>
+ ))}
+ </div>
+ {!queryAirwayBill?.data?.airways && (
+ <div className='badge-red text-sm px-2'>Belum ada pengiriman</div>
+ )}
+ </div>
+
+ <Divider />
+
<div className='p-4 flex flex-col gap-y-4'>
<DescriptionRow label='Purchase Order'>
{transaction.data?.purchaseOrderName || '-'}
@@ -229,9 +261,7 @@ const Transaction = ({ id }) => {
</Link>
))}
{transaction.data?.invoices?.length === 0 && (
- <Alert type='info' className='text-center'>
- Belum ada Invoice
- </Alert>
+ <div className='badge-red text-sm px-2'>Belum ada invoice</div>
)}
</div>
</div>
@@ -268,20 +298,36 @@ const Transaction = ({ id }) => {
<div className='w-3/12 pr-4'>
<Menu />
</div>
- <div className='w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
+ <div className='w-9/12 p-4 py-6 bg-white border border-gray_r-6 rounded'>
<h1 className='text-title-sm font-semibold mb-6'>Detail Transaksi</h1>
<div className='flex items-center gap-x-2 mb-3'>
<span className='text-h-sm font-medium'>{transaction?.data?.name}</span>
<TransactionStatusBadge status={transaction?.data?.status} />
</div>
- <button
- type='button'
- className='btn-solid-red px-3 py-2'
- onClick={() => downloadQuotation(transaction.data)}
- >
- Download
- </button>
+ <div className='flex gap-x-4'>
+ <button
+ type='button'
+ className='btn-solid-red px-3 py-2 mr-auto'
+ onClick={() => downloadQuotation(transaction.data)}
+ >
+ Download
+ </button>
+ {transaction.data?.status == 'draft' && (
+ <button className='btn-yellow' onClick={checkout}>
+ Lanjutkan Transaksi
+ </button>
+ )}
+ {transaction.data?.status != 'draft' && (
+ <button
+ className='btn-light'
+ disabled={transaction.data?.status != 'waiting'}
+ onClick={openCancelTransaction}
+ >
+ Batalkan Transaksi
+ </button>
+ )}
+ </div>
<div className='grid grid-cols-2 gap-x-6 mt-6'>
<div className='grid grid-cols-2 gap-y-4'>
@@ -313,7 +359,7 @@ const Transaction = ({ id }) => {
</div>
</div>
- <div className='text-h-sm font-semibold mt-6 mb-4'>Informasi Pelanggan</div>
+ <div className='text-h-sm font-semibold mt-10 mb-4'>Informasi Pelanggan</div>
<div className='grid grid-cols-2 gap-x-4'>
<div className='border border-gray_r-6 rounded p-3'>
<div className='font-medium mb-4'>Detail Pelanggan</div>
@@ -321,7 +367,32 @@ const Transaction = ({ id }) => {
</div>
</div>
- <div className='text-h-sm font-semibold mt-6 mb-4'>Rincian Pembelian</div>
+ <div className='text-h-sm font-semibold mt-10 mb-4'>Pengiriman</div>
+ <div className='grid grid-cols-3 gap-4'>
+ {queryAirwayBill.data?.airways?.map((airway) => (
+ <button
+ className='shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between items-center text-left'
+ key={airway?.waybillNumber}
+ onClick={() => setAirwayBillPopup(airway?.waybillNumber)}
+ >
+ <div>
+ <span className='text-sm text-gray_r-11'>No Resi</span>
+ <p className='mt-1 font-medium'>{airway?.waybillNumber}</p>
+ </div>
+ <div className='flex gap-x-2'>
+ <div className='text-sm text-gray_r-11 badge-green'>
+ {airway?.deliveryStatus?.status}
+ </div>
+ <ChevronRightIcon className='w-5 stroke-2' />
+ </div>
+ </button>
+ ))}
+ </div>
+ {!queryAirwayBill.data?.airways && (
+ <div className='badge-red text-sm'>Belum ada pengiriman</div>
+ )}
+
+ <div className='text-h-sm font-semibold mt-10 mb-4'>Rincian Pembelian</div>
<table className='table-data'>
<thead>
<tr>
@@ -401,7 +472,7 @@ const Transaction = ({ id }) => {
{currencyFormat(transaction.data?.amountTax)}
</div>
- <div className='text-right'>Biaya Pengiriman</div>
+ <div className='text-right whitespace-nowrap'>Biaya Pengiriman</div>
<div className='text-right font-medium'>
{currencyFormat(transaction.data?.deliveryAmount)}
</div>
@@ -413,8 +484,8 @@ const Transaction = ({ id }) => {
</div>
</div>
- <div className='text-h-sm font-semibold mt-6 mb-4'>Invoice</div>
- <div className='grid grid-cols-4 gap-4'>
+ <div className='text-h-sm font-semibold mt-10 mb-4'>Invoice</div>
+ <div className='grid grid-cols-3 gap-4'>
{transaction.data?.invoices?.map((invoice, index) => (
<Link href={`/my/invoices/${invoice.id}`} key={index}>
<div className='shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between'>
@@ -437,30 +508,63 @@ const Transaction = ({ id }) => {
))}
</div>
{transaction.data?.invoices?.length === 0 && (
- <Alert type='info' className='text-center'>
- Belum ada Invoice
- </Alert>
+ <div className='badge-red text-sm'>Belum ada invoice</div>
)}
-
- <div className='mt-6'>
- {transaction.data?.status == 'draft' && (
- <button className='btn-yellow' onClick={checkout}>
- Lanjutkan Transaksi
- </button>
- )}
- {transaction.data?.status != 'draft' && (
- <button
- className='btn-light'
- disabled={transaction.data?.status != 'waiting'}
- onClick={openCancelTransaction}
- >
- Batalkan Transaksi
- </button>
- )}
- </div>
</div>
</div>
</DesktopView>
+
+ {queryAirwayBill.data?.airways?.map((airway) => (
+ <BottomPopup
+ key={airway.waybillNumber}
+ title='Detail Pengiriman'
+ active={airwayBillPopup == airway.waybillNumber}
+ close={() => setAirwayBillPopup(null)}
+ >
+ <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>
+ ))}
</>
)
)
@@ -536,7 +640,7 @@ const SectionContent = ({ address }) => {
const DescriptionRow = ({ children, label }) => (
<div className='grid grid-cols-2'>
<span className='text-gray_r-11'>{label}</span>
- <span className='text-right break-all leading-6'>{children}</span>
+ <span className='text-right leading-6'>{children}</span>
</div>
)
diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx
index 642881a6..be63effd 100644
--- a/src/lib/transaction/components/Transactions.jsx
+++ b/src/lib/transaction/components/Transactions.jsx
@@ -252,7 +252,7 @@ const Transactions = ({ context = '' }) => {
{transactions.data?.saleOrders?.map((saleOrder) => (
<tr key={saleOrder.id}>
<td>
- <Link href={`${router.pathname}/${saleOrder.id}`}>{saleOrder.name}</Link>
+ <Link className='whitespace-nowrap' href={`${router.pathname}/${saleOrder.id}`}>{saleOrder.name}</Link>
</td>
<td>{saleOrder.purchaseOrderName || '-'}</td>
<td>{saleOrder.dateOrder || '-'}</td>
diff --git a/src/lib/transaction/hooks/useAirwayBill.js b/src/lib/transaction/hooks/useAirwayBill.js
new file mode 100644
index 00000000..c711ab77
--- /dev/null
+++ b/src/lib/transaction/hooks/useAirwayBill.js
@@ -0,0 +1,11 @@
+import { useQuery } from 'react-query'
+import airwayBillApi from '../api/airwayBillApi'
+
+const useAirwayBill = ({ orderId }) => {
+ const fetchAirwayBill = async () => await airwayBillApi({ orderId })
+ const queryAirwayBill = useQuery(`airwayBill-${orderId}`, fetchAirwayBill)
+
+ return { queryAirwayBill }
+}
+
+export default useAirwayBill
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 07:35:00 +0000