Add pengiriman on detail transaction page

2 files changed, 143 insertions, 39 deletions

diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index dca85f0c..8ad7351d 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 pengiriman</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.manifestDate} {manifest.manifestTime}
+                    </time>
+                    <p
+                      class={`leading-6 font-medium text-body-2 mt-2 ${
+                        index == 0 ? 'text-red-600' : 'text-gray_r-11'
+                      }`}
+                    >
+                      {manifest.manifestDescription}
+                    </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>