1 files changed, 81 insertions, 3 deletions

diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 8369c425..2e328a7e 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -17,6 +17,7 @@ import getFileBase64 from '@/core/utils/getFileBase64';
 import currencyFormat from '@/core/utils/currencyFormat';
 import VariantGroupCard from '@/lib/variant/components/VariantGroupCard';
 import {
+  EllipsisVerticalIcon,
   ChevronDownIcon,
   ChevronRightIcon,
   ChevronUpIcon,
@@ -61,6 +62,7 @@ const Transaction = ({ id }) => {
   const openUploadPo = () => setUploadPo(true);
   const closeUploadPo = () => setUploadPo(false);
   const [copied, setCopied] = useState(false);
+  const [toOthers, setToOthers] = useState(null);
   const submitUploadPo = async () => {
     const file = poFile.current.files[0];
     const name = poNumber.current.value;
@@ -418,10 +420,75 @@ const Transaction = ({ id }) => {
             </button>
           </div>
         </BottomPopup>
+
+        <BottomPopup
+          title='Lainnya'
+          active={toOthers}
+          close={() => setToOthers(null)}
+        >
+          <div className='flex flex-col gap-y-4 mt-2'>
+            <button
+              className='text-left disabled:opacity-60'
+              disabled={!toOthers?.purchaseOrderFile}
+              onClick={() => {
+                downloadPurchaseOrder(toOthers);
+                setToOthers(null);
+              }}
+            >
+              Download PO
+            </button>
+            <button
+              className='text-left disabled:opacity-60'
+              disabled={toOthers?.status != 'draft'}
+              onClick={() => {
+                downloadQuotation(toOthers);
+                setToOthers(null);
+              }}
+            >
+              Download Quotation
+            </button>
+            <button
+              className='text-left disabled:opacity-60'
+              disabled={toOthers?.status != 'waiting'}
+              onClick={() => {
+                setToCancel(toOthers);
+                setToOthers(null);
+              }}
+            >
+              Batalkan Transaksi
+            </button>
+          </div>
+        </BottomPopup>
+
         <Manifest idAWB={idAWB} closePopup={closePopup}></Manifest>
 
         <MobileView>
           <div className='p-4'>
+            <div className='flex flex-row w-full justify-between items-center py-2 px-3 mb-4 text-sm border border-yellow-500 text-yellow-800 rounded-lg bg-yellow-50 gap-2'>
+              <div class='flex items-center w-full ' role='alert'>
+                <svg
+                  class='flex-shrink-0 inline w-4 h-4 mr-2'
+                  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 className='text-justify flex flex-col gap-1'>
+                  <span className='text-black text-xs text-start'>
+                    Pesanan anda mungkin mengalami keterlambatan tiba
+                  </span>
+                </div>
+              </div>
+              <span
+                className='text-red-500 text-xs hover:cursor-pointer text-nowrap z-50'
+                onClick={() => setIdAWB(transaction?.data?.pickings[0]?.id)}
+              >
+                Lihat Detail
+              </span>
+            </div>
+          </div>
+          <div className='p-4'>
             {auth?.feature?.soApproval && (
               <StepApproval
                 layer={statusApprovalWeb}
@@ -430,11 +497,22 @@ const Transaction = ({ id }) => {
               />
             )}
           </div>
+
+          <div className='flex flex-row justify-between items-center gap-2 px-4'>
+            <div className='flex flex-col justify-start items-start gap-2'>
+              <div className='font-medium'>Pengiriman</div>
+              <TransactionStatusBadge status={transaction.data?.status} />
+            </div>
+            <div>
+              <EllipsisVerticalIcon
+                className='w-5 h-5'
+                onClick={() => setToOthers(transaction?.data)}
+              />
+            </div>
+          </div>
           <div className='flex flex-col gap-y-4 p-4'>
             <DescriptionRow label='Status Transaksi'>
-              <div className='flex justify-end'>
-                <TransactionStatusBadge status={transaction.data?.status} />
-              </div>
+              <div className='flex justify-end'></div>
             </DescriptionRow>
             <DescriptionRow label='No Transaksi'>
               {transaction.data?.name}