Merged in regenerate-midtrans (pull request #453)

<Miqdad> Regenerate midtrans

1 files changed, 393 insertions, 529 deletions

diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx
index 7efa773a..600518fa 100644
--- a/src/lib/transaction/components/Transactions.jsx
+++ b/src/lib/transaction/components/Transactions.jsx
@@ -1,11 +1,11 @@
+import axios from 'axios';
 import { useRouter } from 'next/router';
-import { useEffect, useState, useRef  } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { toast } from 'react-hot-toast';
 import {
   EllipsisVerticalIcon,
   MagnifyingGlassIcon,
   ChevronDownIcon,
-  ChevronUpIcon,
 } from '@heroicons/react/24/outline';
 import useAuth from '@/core/hooks/useAuth';
 import {
@@ -38,17 +38,13 @@ import { Navigation } from 'swiper';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import { Calendar } from 'lucide-react';
-import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
 import { DateRangePicker } from 'react-date-range';
-import { addDays } from 'date-fns';
-import 'react-date-range/dist/styles.css'; // main style file
-import 'react-date-range/dist/theme/default.css'; // theme css file
-import { Popover } from '@headlessui/react';
+import 'react-date-range/dist/styles.css';
+import 'react-date-range/dist/theme/default.css';
+
 const Transactions = ({ context = '' }) => {
   const auth = useAuth();
   const router = useRouter();
-  const swiperRef = useRef(null);
   const {
     q = '',
     page = 1,
@@ -59,15 +55,11 @@ const Transactions = ({ context = '' }) => {
     startDate = null,
     endDate = new Date(),
   } = router.query;
-  const {
-    productCart,
-    setRefreshCart,
-    setProductCart,
-    refreshCart,
-    isLoading,
-    setIsloading,
-  } = useProductCartContext();
+  const { setRefreshCart } = useProductCartContext();
+
   const [inputQuery, setInputQuery] = useState(q);
+  const [cachedAllData, setCachedAllData] = useState(null); // Simpan data "All"
+  const [currentData, setCurrentData] = useState([]); // Data yang ditampilkan
   const [toOthers, setToOthers] = useState(null);
   const [toCancel, setToCancel] = useState(null);
   const [listSites, setListSites] = useState([]);
@@ -75,17 +67,16 @@ const Transactions = ({ context = '' }) => {
   const [siteFilter, setSiteFilter] = useState(site);
   const [pageNew, setPageNew] = useState(page);
   const [limitNew, setLimitNew] = useState(limit);
-  // const [status, setStatus] = useState('idle');
   const [statusNew, setStatusNew] = useState(status);
   const [sortNew, setSortNew] = useState(sort);
   const [contextNew, setcontextNew] = useState(router.query.context || context);
-  const [dateRange, setDateRange] = useState([null, null]);
-  // const [startDate, endDate] = dateRange;
   const [isOpenCalender, setIsOpenCalender] = useState(false);
-  const [cachedAllData, setCachedAllData] = useState(null); // Simpan data "All"
-  const [currentData, setCurrentData] = useState([]);     // Data yang ditampilkan
   const calendarRef = useRef(null);
-  const [isDateSelected, setIsDateSelected] = useState(false);
+  const isUnpaid = (s) =>
+    ['belum_bayar'].includes(String(s || '').toLowerCase());
+
+  // loading id utk tombol lanjutkan transaksi
+  const [contLoadingId, setContLoadingId] = useState(null);
 
   const parseDate = (date) => {
     if (!date || date === 'null') return null;
@@ -96,7 +87,7 @@ const Transactions = ({ context = '' }) => {
 
   const [state, setState] = useState([
     {
-      startDate: startDate != null || 'null' ? parseDate(startDate) : null, // Gunakan `parseDate`
+      startDate: startDate != null || 'null' ? parseDate(startDate) : null,
       endDate: startDate == null ? endDate : parseDate(endDate),
       key: 'selection',
     },
@@ -116,9 +107,11 @@ const Transactions = ({ context = '' }) => {
     site:
       siteFilter || (auth?.webRole === null && auth?.site ? auth.site : null),
   };
+
   const statuses = [
     { id: 'all', label: 'Semua' },
     { id: 'quotation', label: 'Pending Quotation' },
+    { id: 'belum_bayar', label: 'Belum Bayar' },
     { id: 'diproses', label: 'Pesanan Diproses' },
     { id: 'dikemas', label: 'Pesanan Dikemas' },
     { id: 'partial', label: 'Dikirim Sebagian' },
@@ -135,6 +128,7 @@ const Transactions = ({ context = '' }) => {
     shipping: 'Pesanan Dikirim',
     done: 'Pesanan Selesai',
     cancel: 'Pesanan Dibatalkan',
+    belum_bayar: 'Belum Bayar',
   };
 
   const sortes = [
@@ -142,16 +136,16 @@ const Transactions = ({ context = '' }) => {
     { id: 'asc', label: 'dari yang terkecil' },
     { id: 'desc', label: 'dari yang terbesar' },
   ];
+
   const { transactions } = useTransactions({ query });
+
   const fetchSite = async () => {
     const site = await getSite();
     setListSites(site.sites);
   };
 
   const submitCancelTransaction = async () => {
-    const isCancelled = await cancelTransactionApi({
-      transaction: toCancel,
-    });
+    const isCancelled = await cancelTransactionApi({ transaction: toCancel });
     if (isCancelled) {
       toast.success('Berhasil batalkan transaksi');
       transactions.refetch();
@@ -159,23 +153,16 @@ const Transactions = ({ context = '' }) => {
     setToCancel(null);
   };
 
-  const pageCount = Math.ceil(transactions?.data?.saleOrderTotal / limitNew);
-  let pageQuery = _.omit(query, ['limit', 'offset', 'context']);
-  pageQuery = _.pickBy(
-    pageQuery,
-    (value, key) => value !== '' && !(key === 'page' && value === '1')
+  const pageCount = Math.ceil(
+    (transactions?.data?.saleOrderTotal || 0) / (limitNew || 1)
   );
-  pageQuery = toQuery(pageQuery);
 
   const handleSubmit = (e) => {
     e.preventDefault();
     const queryParams = {};
     if (inputQuery) queryParams.q = inputQuery;
     if (siteFilter) queryParams.site = siteFilter;
-    router.push({
-      pathname: router.pathname,
-      query: queryParams,
-    });
+    router.push({ pathname: router.pathname, query: queryParams });
   };
 
   const handleSiteFilterChange = (e) => {
@@ -183,10 +170,7 @@ const Transactions = ({ context = '' }) => {
     const queryParams = {};
     if (inputQuery) queryParams.q = inputQuery;
     if (e.target.value) queryParams.site = e.target.value;
-    router.push({
-      pathname: router.pathname,
-      query: queryParams,
-    });
+    router.push({ pathname: router.pathname, query: queryParams });
   };
 
   const exportToExcel = (data, siteFilter) => {
@@ -201,19 +185,17 @@ const Transactions = ({ context = '' }) => {
     ];
     const rowsToExport = [];
 
-    data.forEach((saleOrder) => {
+    (data || []).forEach((saleOrder) => {
       const row = {
         'No. Transaksi': saleOrder.name,
         'No. PO': saleOrder.purchaseOrderName || '-',
         Tanggal: saleOrder.dateOrder || '-',
-        'Created By': saleOrder.address.customer?.name || '-',
+        'Created By': saleOrder.address?.customer?.name || '-',
         Salesperson: saleOrder.sales,
         Total: currencyFormat(saleOrder.amountTotal),
         Status: contextLabelMap[saleOrder.status] || saleOrder.status,
       };
-      if (siteFilter) {
-        row['Site'] = siteFilter;
-      }
+      if (siteFilter) row['Site'] = siteFilter;
       rowsToExport.push(row);
     });
 
@@ -226,13 +208,30 @@ const Transactions = ({ context = '' }) => {
     XLSX.writeFile(workbook, 'transactions.xlsx');
   };
 
+  const getAllData = async () => {
+    const qobj = {
+      name: q,
+      offset: (pageNew - 1) * limitNew,
+      limit: limitNew,
+      context: contextNew[statusNew] || 'all',
+      sort: sortNew,
+      startDate: state[0]?.startDate
+        ? state[0].startDate.toLocaleDateString('id-ID')
+        : null,
+      endDate: state[0]?.endDate
+        ? state[0].endDate.toLocaleDateString('id-ID')
+        : null,
+      site:
+        siteFilter || (auth?.webRole === null && auth?.site ? auth.site : null),
+    };
+    const queryString = toQuery(qobj);
+    const data = await transactionsApi({ query: queryString });
+    return data;
+  };
+
   const handleExportCSV = async () => {
     const dataToExport = await getAllData();
 
-    exportToCSV(dataToExport?.saleOrders, siteFilter);
-  };
-
-  const exportToCSV = (data, siteFilter) => {
     const fieldsToExport = [
       'No. Transaksi',
       'No. PO',
@@ -242,28 +241,23 @@ const Transactions = ({ context = '' }) => {
       'Total',
       'Status',
     ];
-
-    if (siteFilter) {
-      fieldsToExport.push('Site');
-    }
-
-    const rowsToExport = data.map((saleOrder) => {
-      const row = [
-        saleOrder.name,
-        saleOrder.purchaseOrderName || '-',
-        saleOrder.dateOrder || '-',
-        saleOrder.address.customer?.name || '-',
-        saleOrder.sales,
-        currencyFormat(saleOrder.amountTotal),
-        contextLabelMap[saleOrder.status] || saleOrder.status,
-      ];
-
-      if (siteFilter) {
-        row.push(siteFilter);
-      }
-
-      return row.join(',');
-    });
+    const rowsToExport =
+      dataToExport?.saleOrders?.map((saleOrder) => {
+        const row = [
+          saleOrder.name,
+          saleOrder.purchaseOrderName || '-',
+          saleOrder.dateOrder || '-',
+          saleOrder.address?.customer?.name || '-',
+          saleOrder.sales,
+          currencyFormat(saleOrder.amountTotal),
+          (contextLabelMap[saleOrder.status] || saleOrder.status || '').replace(
+            /,/g,
+            ' '
+          ),
+        ];
+        if (siteFilter) row.push((siteFilter || '').replace(/,/g, ' '));
+        return row.join(',');
+      }) || [];
 
     const csvContent =
       'data:text/csv;charset=utf-8,' +
@@ -278,66 +272,31 @@ const Transactions = ({ context = '' }) => {
     document.body.removeChild(link);
   };
 
-  const getAllData = async () => {
-    const query = {
-      name: q,
-      offset: (pageNew - 1) * limitNew,
-      limit: limitNew,
-      context: contextNew[statusNew] || 'all',
-      sort: sortNew,
-      startDate: state[0]?.startDate
-        ? state[0].startDate.toLocaleDateString('id-ID')
-        : null,
-      endDate: state[0]?.endDate
-        ? state[0].endDate.toLocaleDateString('id-ID')
-        : null,
-      site:
-        siteFilter || (auth?.webRole === null && auth?.site ? auth.site : null),
-    };
-    const queryString = toQuery(query);
-    const data = await transactionsApi({ query: queryString });
-    return data;
-  };
-
   const handleExportExcel = async () => {
     const dataToExport = await getAllData();
-
     exportToExcel(dataToExport?.saleOrders, siteFilter);
   };
 
   const handleDownload = (format) => {
-    handleExport(format);
+    if (format === 'csv') handleExportCSV();
+    else if (format === 'xlsx') handleExportExcel();
     setIsOpen(false);
   };
 
-  const handleExport = (format) => {
-    if (format === 'csv') {
-      handleExportCSV();
-    } else if (format === 'xlsx') {
-      handleExportExcel();
-    }
-  };
-
   useEffect(() => {
     const handleClickOutside = (event) => {
-      if (
-        calendarRef.current &&
-        !calendarRef.current.contains(event.target)
-      ) {
+      if (calendarRef.current && !calendarRef.current.contains(event.target)) {
         setIsOpenCalender(false);
       }
     };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
   const startItem = 1 + (pageNew - 1) * limitNew;
   const endItem = Math.min(
     limitNew * pageNew,
-    transactions?.data?.saleOrderTotal
+    transactions?.data?.saleOrderTotal || 0
   );
 
   useEffect(() => {
@@ -346,11 +305,8 @@ const Transactions = ({ context = '' }) => {
 
   const handleBuyBack = async (products) => {
     try {
-      // setStatus('loading');
-      console.log("Products to add:", products);
-
       const results = await Promise.all(
-        products.map((product) =>
+        (products || []).map((product) =>
           upsertUserCart({
             userId: auth.id,
             type: 'product',
@@ -359,51 +315,42 @@ const Transactions = ({ context = '' }) => {
             selected: true,
             source: 'add_to_cart',
             qtyAppend: true,
-          }).catch(error => {
-            return { error, product };
-          })
+          }).catch((error) => ({ error, product }))
         )
       );
 
-      const failedOperations = results.filter(result => result && result.error);
-      // console.log(results);
-      
-      if (failedOperations.length > 0) {
-        console.error('Some products failed to add to cart:', failedOperations);
-        toast.error(`${failedOperations.length} produk gagal ditambahkan ke keranjang`);
-        
-        // You might want to proceed with the successful ones or handle differently
-        if (failedOperations.length < products.length) {
-          toast.success(`${products.length - failedOperations.length} produk berhasil ditambahkan ke keranjang`);
+      const failed = results.filter((r) => r && r.error);
+      if (failed.length > 0) {
+        toast.error(`${failed.length} produk gagal ditambahkan ke keranjang`);
+        if (failed.length < (products || []).length) {
+          toast.success(
+            `${
+              (products || []).length - failed.length
+            } produk berhasil ditambahkan`
+          );
           setRefreshCart(true);
           router.push('/shop/cart');
         }
         return;
       }
-
-      // All operations succeeded
       setRefreshCart(true);
-      toast.success('Semua produk berhasil ditambahkan ke keranjang belanja');
+      toast.success('Semua produk berhasil ditambahkan ke keranjang');
       router.push('/shop/cart');
-
-    } catch (error) {
-      console.error('Gagal menambahkan produk ke keranjang:', error);
+    } catch {
       toast.error('Terjadi kesalahan saat menambahkan produk ke keranjang');
-      // setStatus('error');
     }
   };
 
-  
   const handleStatusChange = async (status) => {
     setStatusNew(status);
     setPageNew(1);
 
     if (status === 'all' && cachedAllData) {
-      setCurrentData(cachedAllData); 
-      return; 
+      setCurrentData(cachedAllData);
+      return;
     }
     const data = await fetchSite(status, 1);
-    
+
     if (status === 'all') {
       setCachedAllData(data);
     }
@@ -411,19 +358,8 @@ const Transactions = ({ context = '' }) => {
     setCurrentData(data);
   };
 
-  useEffect(() => {
-    setCachedAllData([]);
-  }, []);
-
-
   const handleReset = () => {
-    setState([
-      {
-        startDate: null,
-        endDate: new Date(),
-        key: 'selection',
-      },
-    ]);
+    setState([{ startDate: null, endDate: new Date(), key: 'selection' }]);
     setIsOpenCalender(false);
     router.push(`${router.pathname}`);
   };
@@ -443,13 +379,88 @@ const Transactions = ({ context = '' }) => {
       'November',
       'Desember',
     ];
-
-    const [day, month, year] = dateString.split('/');
+    const [day, month, year] = (dateString || '').split('/');
+    if (!day || !month || !year) return dateString || '-';
     return `${day} ${months[parseInt(month, 10) - 1]} ${year}`;
   };
 
+  // ==== Lanjutkan Transaksi (tanpa endpoint baru) ====
+  const handleContinuePayment = async (saleOrder) => {
+    try {
+      setContLoadingId(saleOrder.id);
+
+      const base = (process.env.NEXT_PUBLIC_ODOO_API_HOST || '').replace(
+        /\/$/,
+        ''
+      );
+      const token = auth?.token;
+      const partnerId = auth?.partnerId;
+
+      // 1. TRIGGER GENERATE + GET URL
+      const { data: response } = await axios.get(
+        `${base}/api/v1/partner/${partnerId}/sale_order/${saleOrder.id}`,
+        {
+          params: { ensure_payment_link: 1, ts: Date.now() },
+          headers: { Token: token, 'Cache-Control': 'no-cache' },
+          timeout: 10000,
+        }
+      );
+
+      // 2. EKSTRAK URL
+      let paymentUrl =
+        response?.result?.payment_summary?.redirect_url ||
+        response?.data?.result?.payment_summary?.redirect_url;
+
+      // 3. JIKA DAPAT URL, BUKA
+      if (paymentUrl) {
+        window.location.href = paymentUrl;
+        toast.success('Membuka halaman pembayaran…');
+        return;
+      }
+
+      // 4. FALLBACK: COBA TANPA ensure_payment_link
+      try {
+        const { data: fallbackResponse } = await axios.get(
+          `${base}/api/v1/partner/${partnerId}/sale_order/${saleOrder.id}`,
+          { headers: { Token: token }, timeout: 5000 }
+        );
+
+        const fallbackUrl =
+          fallbackResponse?.result?.payment_summary?.redirect_url ||
+          fallbackResponse?.data?.result?.payment_summary?.redirect_url;
+
+        if (fallbackUrl) {
+          window.location.href = fallbackUrl;
+          toast.success('Membuka halaman pembayaran…');
+          return;
+        }
+      } catch (fallbackError) {
+        // Continue to next fallback
+      }
+
+      // 5. ULTIMATE FALLBACK: PAKAI URL DARI DATA LAMA
+      const existingUrl =
+        saleOrder?.paymentSummary?.redirectUrl ||
+        saleOrder?.payment_summary?.redirect_url;
+
+      if (existingUrl) {
+        window.open(existingUrl, '_blank', 'noopener,noreferrer');
+        toast.success('Membuka halaman pembayaran…');
+      } else {
+        toast.error('Link pembayaran tidak ditemukan. Silakan coba lagi.');
+      }
+    } catch (error) {
+      toast.error(
+        error.response?.data?.description || 'Gagal memproses pembayaran'
+      );
+    } finally {
+      setContLoadingId(null);
+    }
+  };
+
   return (
     <>
+      {/* ===== MOBILE ===== */}
       <MobileView>
         <div className=' flex flex-col gap-y-4'>
           <div className='grid grid-cols-[40%_40%_15%] justify-between items-center gap-2 w-full '>
@@ -475,23 +486,22 @@ const Transactions = ({ context = '' }) => {
                 </option>
               ))}
             </select>
-            <div ref={calendarRef} className="relative inline-block">
-                <button
-                  type='button'
-                  className='p-1 w-full h-auto cursor-pointer border hover:bg-gray-100 rounded transition duration-150 ease-in-out flex items-center justify-center'
-                  onClick={() => setIsOpenCalender((prev) => !prev)}
-                >
-                  <span className='text-nowrap px-1 truncate flex items-center gap-1'>
-                      {state[0]?.startDate ? (
-                        `${state[0].startDate.toLocaleDateString()} - ${state[0].endDate.toLocaleDateString()}`
-                      ) : (
-                        <Calendar size={20} className="text-gray-500" />
-                      )}
-                  </span>
-                </button>
-                {isOpenCalender && (
+            <div ref={calendarRef} className='relative inline-block'>
+              <button
+                type='button'
+                className='p-1 w-full h-auto cursor-pointer border hover:bg-gray-100 rounded transition duration-150 ease-in-out flex items-center justify-center'
+                onClick={() => setIsOpenCalender((prev) => !prev)}
+              >
+                <span className='text-nowrap px-1 truncate flex items-center gap-1'>
+                  {state[0]?.startDate ? (
+                    `${state[0].startDate.toLocaleDateString()} - ${state[0].endDate.toLocaleDateString()}`
+                  ) : (
+                    <Calendar size={20} className='text-gray-500' />
+                  )}
+                </span>
+              </button>
+              {isOpenCalender && (
                 <div className='absolute right-1 mt-2 bg-white p-4 rounded shadow-lg z-50'>
-                  {/* Tombol silang di sudut kanan atas */}
                   <button
                     onClick={() => setIsOpenCalender(false)}
                     className='absolute top-2 right-2 text-gray-600 hover:text-black text-xl font-bold'
@@ -508,37 +518,13 @@ const Transactions = ({ context = '' }) => {
                     className='w-full'
                   />
                   <style>{`
-                    /* Atur container agar menjadi column */
-                    .rdrCalendarWrapper {
-                      display: flex;
-                      flex-direction: column;
-                    }
-                    .rdrDateRangePickerWrapper  {
-                      display: flex;
-                      flex-direction: column;
-                    }
-
-                    /* Pindahkan rdrStaticRanges ke atas */
-                    .rdrDefinedRangesWrapper {
-                      order: -1;
-                      width: fit-content;
-                    }
-                    .rdrStaticRanges {
-                      flex-direction: row;
-                      margin-right: 2px;
-                    }
-
-                    /* Sembunyikan bagian input manual */
-                    .rdrInputRanges {
-                      display: none !important;
-                    }
-
-                    .rdrStaticRangeLabel {
-                      padding: 10px 10px;
-                    }
-                    .rdrMonth {
-                      width: -moz-available;
-                    }
+                    .rdrCalendarWrapper{display:flex;flex-direction:column;}
+                    .rdrDateRangePickerWrapper{display:flex;flex-direction:column;}
+                    .rdrDefinedRangesWrapper{order:-1;width:fit-content;}
+                    .rdrStaticRanges{flex-direction:row;margin-right:2px;}
+                    .rdrInputRanges{display:none !important;}
+                    .rdrStaticRangeLabel{padding:10px 10px;}
+                    .rdrMonth{width:-moz-available;}
                   `}</style>
                   <div className='flex flex-row justify-end gap-3 mt-2'>
                     <button
@@ -549,68 +535,7 @@ const Transactions = ({ context = '' }) => {
                     </button>
                   </div>
                 </div>
-                )}
-              </div>
-            {/* <div className='border border-gray-300 rounded-lg px-1 py-1 bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 text-xs'>
-              <DatePicker
-                closeOnScroll={(e) => e.target === document}
-                selectsRange={true}
-                startDate={startDate}
-                endDate={endDate}
-                dateFormat='dd/MM'
-                className='w-full'
-                maxDate={new Date()}
-                placeholderText='Semua Tanggal'
-                onChange={(update) => {
-                  setDateRange(update);
-                }}
-                withPortal
-                isClearable={true}
-              />
-            </div> */}
-          </div>
-          <div className='flex flex-row justify-between items-center gap-2'>
-            <form className='flex' onSubmit={handleSubmit}>
-              <button
-                className='btn-light border-r-0 rounded-r-none bg-transparent px-3'
-                type='submit'
-              >
-                <MagnifyingGlassIcon className='w-6' />
-              </button>
-              <input
-                type='text'
-                className='form-input border-l-0 rounded-l-none text-xs'
-                placeholder='Cari Transaksi...'
-                value={inputQuery}
-                onChange={(e) => setInputQuery(e.target.value)}
-              />
-            </form>
-            <div className='flex flex-row gap-2 items-center justify-center text-nowrap'>
-              <p className='text-xs'>
-                Menampilkan {startItem}-
-                {endItem
-                  ? endItem
-                  : transactions?.data?.saleOrderTotal
-                  ? transactions?.data?.saleOrderTotal
-                  : limitNew * pageNew}{' '}
-                dari{' '}
-                {transactions?.data?.saleOrderTotal
-                  ? transactions?.data?.saleOrderTotal
-                  : limitNew * pageNew}
-              </p>
-              <select
-                id='limitSelect'
-                value={limitNew}
-                onChange={(e) => {
-                  setLimitNew(Number(e.target.value));
-                  setPageNew(1);
-                }}
-                className='border p-2 text-xs'
-              >
-                <option value={10}>10</option>
-                <option value={15}>15</option>
-                <option value={20}>20</option>
-              </select>
+              )}
             </div>
           </div>
 
@@ -634,7 +559,9 @@ const Transactions = ({ context = '' }) => {
             >
               <div className='flex flex-row justify-between items-start'>
                 <Link href={`${router.pathname}/${saleOrder.id}`}>
-                  <h2 className='text-danger-500 text-base'>{saleOrder.name}</h2>
+                  <h2 className='text-danger-500 text-base'>
+                    {saleOrder.name}
+                  </h2>
                   <span className='font-medium text-black opacity-75'>
                     {formatDate(saleOrder.dateOrder.split(' ')[0]) || '-'}
                   </span>
@@ -681,29 +608,30 @@ const Transactions = ({ context = '' }) => {
                         <div className='flex flex-row gap-1 justify-start items-center'>
                           {saleOrder.products
                             .slice(1, 4)
-                            .map((product, index) => (
+                            .map((product, idx) => (
                               <Image
-                                key={index} // Tambahkan key untuk setiap elemen dalam map()
+                                key={idx}
                                 src={product?.parent?.image}
                                 alt={product?.name}
                                 className='object-contain object-center border border-gray_r-6 h-8 w-8 rounded-md'
                               />
                             ))}
                           {saleOrder.products.length > 4 ? (
-                              <Link
-                                href={`${router.pathname}/${saleOrder?.id}`}
-                                className='text-red-500 text-nowrap'
-                              >
-                                +{saleOrder.products.length - 4} lihat semua produk
-                              </Link>
-                            ) : (
-                              <Link
-                                href={`${router.pathname}/${saleOrder?.id}`}
-                                className='text-red-500 text-nowrap'
-                              >
-                                Lihat semua produk
-                              </Link>
-                            )}
+                            <Link
+                              href={`${router.pathname}/${saleOrder?.id}`}
+                              className='text-red-500 text-nowrap'
+                            >
+                              +{saleOrder.products.length - 4} lihat semua
+                              produk
+                            </Link>
+                          ) : (
+                            <Link
+                              href={`${router.pathname}/${saleOrder?.id}`}
+                              className='text-red-500 text-nowrap'
+                            >
+                              Lihat semua produk
+                            </Link>
+                          )}
                         </div>
                       )}
                     </div>
@@ -716,58 +644,50 @@ const Transactions = ({ context = '' }) => {
                   </div>
                 </div>
                 <div className='col-span-2 h-[1px] w-full bg-gray-300'></div>
-                <div className='flex flex-row gap-3 justify-between items-center text-sm'>
-                  <div className='flex flex-col text-black text-xs'>
-                    <p className='font-extralight text-sm'>Total Harga</p>
+
+                <div className='flex flex-col gap-3 text-sm'>
+                  <div className='flex flex-col text-black'>
+                    <p className='font-extralight'>Total Harga</p>
                     <p className='font-semibold text-lg'>
                       {currencyFormat(saleOrder.amountTotal)}
                     </p>
                   </div>
-                  <div>
-                    <button
-                      type='button'
-                      onClick={() => handleBuyBack(saleOrder.products)}
-                      className='flex-1 py-2 btn-solid-red text-nowrap'
-                    >
-                      Beli Lagi
-                    </button>
-                  </div>
-                </div>
 
-                {/* <div className='grid grid-cols-2 mt-3'>
-                  <div>
-                    <span className='text-caption-2 text-gray_r-11'>
-                      No. Purchase Order
-                    </span>
-                    <p className='mt-1 font-medium text-gray_r-12'>
-                      {saleOrder.purchaseOrderName || '-'}
-                    </p>
-                  </div>
-                  <div className='text-right'>
-                    <span className='text-caption-2 text-gray_r-11'>
-                      Total Invoice
-                    </span>
-                    <p className='mt-1 font-medium text-gray_r-12'>
-                      {saleOrder.invoiceCount} Invoice
-                    </p>
-                  </div>
-                </div> */}
-                {/* <div className='grid grid-cols-2 mt-3'>
-                  <div>
-                    <span className='text-caption-2 text-gray_r-11'>Sales</span>
-                    <p className='mt-1 font-medium text-gray_r-12'>
-                      {saleOrder.sales}
-                    </p>
-                  </div>
-                  <div className='text-right'>
-                    <span className='text-caption-2 text-gray_r-11'>
-                      Total Harga
-                    </span>
-                    <p className='mt-1 font-medium text-gray_r-12'>
-                      {currencyFormat(saleOrder.amountTotal)}
-                    </p>
+                  <div className='flex flex-col gap-2 w-full'>
+                    {/* Beli Lagi hanya muncul jika status bukan unpaid */}
+                    {!isUnpaid(saleOrder.status) && (
+                      <button
+                        type='button'
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          handleBuyBack(saleOrder.products);
+                        }}
+                        className='w-full py-2 btn-solid-red text-center rounded-md'
+                      >
+                        Beli Lagi
+                      </button>
+                    )}
+
+                    {/* Bayar Sekarang hanya kalau eligible */}
+                    {saleOrder?.eligibleContinue && (
+                      <button
+                        type='button'
+                        disabled={contLoadingId === saleOrder.id}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          handleContinuePayment(saleOrder);
+                        }}
+                        className='w-full py-2 text-center rounded-md border border-red-300 text-red-500 bg-white disabled:opacity-60'
+                      >
+                        {contLoadingId === saleOrder.id
+                          ? 'Memproses…'
+                          : 'Bayar Sekarang'}
+                      </button>
+                    )}
                   </div>
-                </div> */}
+                </div>
               </Link>
             </div>
           ))}
@@ -775,7 +695,6 @@ const Transactions = ({ context = '' }) => {
           <Pagination
             pageCount={pageCount}
             currentPage={parseInt(pageNew)}
-            // url={router.pathname + pageQuery}
             url={`${router.pathname}?${toQuery(_.omit(query, ['page']))}`}
             className='mt-2 mb-2'
           />
@@ -785,6 +704,30 @@ const Transactions = ({ context = '' }) => {
             active={toOthers}
             close={() => setToOthers(null)}
           >
+            {transactions.data?.status === 'draft' && (
+              <>
+                <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 className='flex flex-col gap-y-4 mt-2'>
               <button
                 className='text-left disabled:opacity-60'
@@ -796,26 +739,6 @@ const Transactions = ({ context = '' }) => {
               >
                 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>
 
@@ -848,6 +771,7 @@ const Transactions = ({ context = '' }) => {
         </div>
       </MobileView>
 
+      {/* ===== DESKTOP ===== */}
       <DesktopView>
         <div className='container mx-auto flex py-10'>
           <div className='w-3/12 pr-4'>
@@ -900,51 +824,36 @@ const Transactions = ({ context = '' }) => {
                 )}
               </div>
             </div>
-            <div className=''>
-              <div
-                class='flex items-center p-4 mb-4 text-sm border border-yellow-500 text-yellow-800 rounded-lg bg-yellow-50'
-                role='alert'
-              >
-                <svg
-                  class='flex-shrink-0 inline w-5 h-5 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>
-                <span class='sr-only'>Info</span>
-                <div className='text-justify flex flex-col gap-1'>
-                  <p className='font-bold text-black'>Info Transaksi</p>
-                  <span className='text-black'>
-                    Gunakan filter status untuk mempermudah pencarian transaksi anda di Daftar Transaksi
-                  </span>
-                </div>
-              </div>
-            </div>
+
             <div className='flex flex-col gap-y-2  border rounded-lg mb-2 w-full'>
               <div className='p-2'>
                 <div className='flex items-center space-x-3'>
                   <span className='text-base font-semibold text-gray-600'>
                     Status
                   </span>
-                  <div className="relative w-full overflow-hidden">
-                    {/* Container flex: tombol prev - swiper - tombol next */}
-                    <div className="flex items-center space-x-2">
-                      
-                      {/* Prev */}
-                      <button className="custom-prev w-8 h-8 flex-shrink-0 flex items-center justify-center bg-white border rounded-full shadow z-1">
-                        <svg className="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                  <div className='relative w-full overflow-hidden'>
+                    <div className='flex items-center space-x-2'>
+                      <button className='custom-prev w-8 h-8 flex-shrink-0 flex items-center justify-center bg-white border rounded-full shadow z-1'>
+                        <svg
+                          className='w-4 h-4 text-gray-500'
+                          fill='none'
+                          stroke='currentColor'
+                          viewBox='0 0 24 24'
+                        >
+                          <path
+                            strokeLinecap='round'
+                            strokeLinejoin='round'
+                            strokeWidth={2}
+                            d='M15 19l-7-7 7-7'
+                          />
                         </svg>
                       </button>
 
-                      {/* Swiper container scrollable */}
-                      <div className="w-full overflow-hidden">
+                      <div className='w-full overflow-hidden'>
                         <Swiper
                           spaceBetween={10}
-                          slidesPerView="auto"
-                          className="status-swiper"
+                          slidesPerView='auto'
+                          className='status-swiper'
                           modules={[Navigation]}
                           navigation={{
                             nextEl: '.custom-next',
@@ -952,12 +861,13 @@ const Transactions = ({ context = '' }) => {
                           }}
                         >
                           {statuses.map((status) => (
-                            <SwiperSlide key={status.id} className="!w-auto">
+                            <SwiperSlide key={status.id} className='!w-auto'>
                               <button
                                 className={`px-4 py-1 text-sm font-medium border rounded-lg transition whitespace-nowrap
-                                  ${statusNew === status.id
-                                    ? 'border-red-500 text-red-500 bg-white'
-                                    : 'border-gray-300 text-gray-400 bg-gray-100 hover:bg-gray-200'
+                                  ${
+                                    statusNew === status.id
+                                      ? 'border-red-500 text-red-500 bg-white'
+                                      : 'border-gray-300 text-gray-400 bg-gray-100 hover:bg-gray-200'
                                   }`}
                                 onClick={() => handleStatusChange(status.id)}
                               >
@@ -968,16 +878,26 @@ const Transactions = ({ context = '' }) => {
                         </Swiper>
                       </div>
 
-                      {/* Next */}
-                      <button className="custom-next w-8 h-8 flex-shrink-0 flex items-center justify-center bg-white border rounded-full shadow z-10">
-                        <svg className="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                      <button className='custom-next w-8 h-8 flex-shrink-0 flex items-center justify-center bg-white border rounded-full shadow z-10'>
+                        <svg
+                          className='w-4 h-4 text-gray-500'
+                          fill='none'
+                          stroke='currentColor'
+                          viewBox='0 0 24 24'
+                        >
+                          <path
+                            strokeLinecap='round'
+                            strokeLinejoin='round'
+                            strokeWidth={2}
+                            d='M9 5l7 7-7 7'
+                          />
                         </svg>
                       </button>
                     </div>
                   </div>
                 </div>
               </div>
+
               <div className='flex flex-row items-center justify-between mb-2 p-2'>
                 <div className='flex flex-col gap-2 pb-2'>
                   {listSites?.length > 0 ? (
@@ -1013,6 +933,7 @@ const Transactions = ({ context = '' }) => {
                     </button>
                   </form>
                 </div>
+
                 <div className='flex flex-row gap-4 items-center justify-center'>
                   <p>
                     Menampilkan {startItem}-
@@ -1038,87 +959,66 @@ const Transactions = ({ context = '' }) => {
                     <option value={10}>10</option>
                     <option value={15}>15</option>
                     <option value={20}>20</option>
-                    <option value={transactions?.data?.saleOrderTotal}>Semua</option>
+                    <option value={transactions?.data?.saleOrderTotal}>
+                      Semua
+                    </option>
                   </select>
-                  <div ref={calendarRef} className="relative inline-block">
+
+                  <div ref={calendarRef} className='relative inline-block'>
                     <button
                       type='button'
                       className='p-2 w-auto h-auto cursor-pointer border hover:bg-gray-100 rounded transition duration-150 ease-in-out flex items-center justify-center'
                       onClick={() => setIsOpenCalender((prev) => !prev)}
                     >
                       <span className='text-nowrap px-1 truncate flex items-center gap-1'>
-                          {state[0]?.startDate ? (
-                            `${state[0].startDate.toLocaleDateString()} - ${state[0].endDate.toLocaleDateString()}`
-                          ) : (
-                            <Calendar size={16} className="text-gray-500" />
-                          )}
+                        {state[0]?.startDate ? (
+                          `${state[0].startDate.toLocaleDateString()} - ${state[0].endDate.toLocaleDateString()}`
+                        ) : (
+                          <Calendar size={16} className='text-gray-500' />
+                        )}
                       </span>
                     </button>
                     {isOpenCalender && (
-                    <div className='absolute right-10 mt-2 bg-white p-4 rounded shadow-lg z-50'>
-                      {/* Tombol silang di sudut kanan atas */}
-                      <button
-                        onClick={() => setIsOpenCalender(false)}
-                        className='absolute top-2 right-2 text-gray-600 hover:text-black text-xl font-bold'
-                      >
-                        &times;
-                      </button>
-                      <DateRangePicker
-                        onChange={(item) => setState([item.selection])}
-                        showSelectionPreview={false}
-                        maxDate={new Date()}
-                        moveRangeOnFirstSelection={false}
-                        months={1}
-                        ranges={state}
-                        className='w-full'
-                      />
-                      <style>{`
-                        /* Atur container agar menjadi column */
-                        .rdrCalendarWrapper {
-                          display: flex;
-                          flex-direction: column;
-                        }
-                        .rdrDateRangePickerWrapper  {
-                          display: flex;
-                          flex-direction: column;
-                        }
-
-                        /* Pindahkan rdrStaticRanges ke atas */
-                        .rdrDefinedRangesWrapper {
-                          order: -1;
-                          width: fit-content;
-                        }
-                        .rdrStaticRanges {
-                          flex-direction: row;
-                          margin-right: 2px;
-                        }
-
-                        /* Sembunyikan bagian input manual */
-                        .rdrInputRanges {
-                          display: none !important;
-                        }
-
-                        .rdrStaticRangeLabel {
-                          padding: 10px 10px;
-                        }
-                        .rdrMonth {
-                          width: -moz-available;
-                        }
-                      `}</style>
-                      <div className='flex flex-row justify-end gap-3 mt-2'>
+                      <div className='absolute right-10 mt-2 bg-white p-4 rounded shadow-lg z-50'>
                         <button
-                          className='px-4 py-1 bg-red-500 text-white rounded'
-                          onClick={handleReset}
+                          onClick={() => setIsOpenCalender(false)}
+                          className='absolute top-2 right-2 text-gray-600 hover:text-black text-xl font-bold'
                         >
-                          Reset
+                          &times;
                         </button>
+                        <DateRangePicker
+                          onChange={(item) => setState([item.selection])}
+                          showSelectionPreview={false}
+                          maxDate={new Date()}
+                          moveRangeOnFirstSelection={false}
+                          months={1}
+                          ranges={state}
+                          className='w-full'
+                        />
+                        <style>{`
+                          .rdrCalendarWrapper{display:flex;flex-direction:column;}
+                          .rdrDateRangePickerWrapper{display:flex;flex-direction:column;}
+                          .rdrDefinedRangesWrapper{order:-1;width:fit-content;}
+                          .rdrStaticRanges{flex-direction:row;margin-right:2px;}
+                          .rdrInputRanges{display:none !important;}
+                          .rdrStaticRangeLabel{padding:10px 10px;}
+                          .rdrMonth{width:-moz-available;}
+                        `}</style>
+                        <div className='flex flex-row justify-end gap-3 mt-2'>
+                          <button
+                            className='px-4 py-1 bg-red-500 text-white rounded'
+                            onClick={handleReset}
+                          >
+                            Reset
+                          </button>
+                        </div>
                       </div>
-                    </div>
                     )}
                   </div>
                 </div>
               </div>
             </div>
+
             <div className='flex justify-center items-center'>
               {!transactions.isLoading &&
                 transactions?.data?.saleOrders?.length == 0 && (
@@ -1156,11 +1056,9 @@ const Transactions = ({ context = '' }) => {
                               <p className='text-red-500'>{saleOrder.name}</p>
                               <p className='text-black'>
                                 Salesperson:{' '}
-                                {
-                                  <span className='font-semibold'>
-                                    {saleOrder.sales}
-                                  </span>
-                                }
+                                <span className='font-semibold'>
+                                  {saleOrder.sales}
+                                </span>
                               </p>
                             </div>
                             <div className='text-black'>
@@ -1172,7 +1070,9 @@ const Transactions = ({ context = '' }) => {
                               </span>
                             </div>
                           </div>
+
                           <hr className='mt-3 mb-3 border border-gray-100' />
+
                           <div className='flex flex-row gap-2 justify-between items-center '>
                             <div className='flex justify-start w-3/4 flex-col gap-2'>
                               <div className='flex gap-2'>
@@ -1207,9 +1107,9 @@ const Transactions = ({ context = '' }) => {
                                       <div className='flex flex-row gap-1 justify-start items-center'>
                                         {saleOrder.products
                                           .slice(1, 4)
-                                          .map((product, index) => (
+                                          .map((product, idx) => (
                                             <Image
-                                              key={index} // Tambahkan key untuk setiap elemen dalam map()
+                                              key={idx}
                                               src={product?.parent?.image}
                                               alt={product?.name}
                                               className='object-contain object-center border border-gray_r-6 h-16 w-16 rounded-md'
@@ -1220,7 +1120,8 @@ const Transactions = ({ context = '' }) => {
                                             href={`${router.pathname}/${saleOrder?.id}`}
                                             className='text-red-500 text-nowrap'
                                           >
-                                            +{saleOrder.products.length - 4} lihat semua produk
+                                            +{saleOrder.products.length - 4}{' '}
+                                            lihat semua produk
                                           </Link>
                                         ) : (
                                           <Link
@@ -1244,25 +1145,48 @@ const Transactions = ({ context = '' }) => {
                                 </p>
                               </div>
                             </div>
+
                             <div className='w-[1px] h-24 bg-gray-300'></div>
-                            <div className='w-1/4 flex flex-row gap-3 justify-center items-center'>
+
+                            <div className='w-1/4 flex flex-col gap-2 items-center justify-center text-center pl-5'>
                               <div className='flex flex-col text-black'>
-                                <p>Total Harga</p>
-                                <p className='font-bold'>
+                                <p className='text-sm'>Total Harga</p>
+                                <p className='font-bold text-lg'>
                                   {currencyFormat(saleOrder.amountTotal)}
                                 </p>
                               </div>
-                              <div>
+
+                              {!isUnpaid(saleOrder.status) && (
                                 <button
                                   type='button'
-                                  onClick={() =>
-                                    handleBuyBack(saleOrder.products)
-                                  }
-                                  className='flex-1 py-2 btn-solid-red text-nowrap'
+                                  onClick={(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    handleBuyBack(saleOrder.products);
+                                  }}
+                                  className='w-full py-2 btn-solid-red text-nowrap rounded-md'
                                 >
                                   Beli Lagi
                                 </button>
-                              </div>
+                              )}
+
+                              {/* Bayar Sekarang: hanya kalau eligible */}
+                              {saleOrder?.eligibleContinue && (
+                                <button
+                                  type='button'
+                                  disabled={contLoadingId === saleOrder.id}
+                                  onClick={(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    handleContinuePayment(saleOrder);
+                                  }}
+                                  className='w-full py-2 text-nowrap border border-red-500 text-red-500 rounded-md disabled:opacity-60'
+                                >
+                                  {contLoadingId === saleOrder.id
+                                    ? 'Memproses…'
+                                    : 'Bayar Sekarang'}
+                                </button>
+                              )}
                             </div>
                           </div>
                         </Link>
@@ -1271,70 +1195,10 @@ const Transactions = ({ context = '' }) => {
                   </div>
                 )}
             </div>
-            {/* <table className='table-data'>
-              <thead>
-                <tr>
-                  <th>No. Transaksi</th>
-                  <th>No. PO</th>
-                  <th>Tanggal</th>
-                  <th>Created By</th>
-                  {auth?.feature?.soApproval && <th>Site</th>}
-                  <th className='!text-left'>Salesperson</th>
-                  <th className='!text-left'>Total</th>
-                  <th>Status</th>
-                </tr>
-              </thead>
-              <tbody>
-                {transactions.isLoading && (
-                  <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>
-                )}
-                {!transactions.isLoading &&
-                  (!transactions?.data?.saleOrders ||
-                    transactions?.data?.saleOrders?.length == 0) && (
-                    <tr>
-                      <td colSpan={7}>Tidak ada transaksi</td>
-                    </tr>
-                  )}
-                {transactions.data?.saleOrders?.map((saleOrder) => (
-                  <tr key={saleOrder.id}>
-                    <td>
-                      <Link
-                        className='whitespace-nowrap'
-                        href={`${router.pathname}/${saleOrder.id}`}
-                      >
-                        {saleOrder.name}
-                      </Link>
-                    </td>
-                    <td>{saleOrder.purchaseOrderName || '-'}</td>
-                    <td>{saleOrder.dateOrder || '-'}</td>
-                    <td>{saleOrder.address.customer?.name || '-'}</td>
-                    {auth?.feature?.soApproval && (
-                      <td>{saleOrder.sitePartner || '-'}</td>
-                    )}
-                    <td className='!text-left'>{saleOrder.sales}</td>
-                    <td className='!text-left'>
-                      {currencyFormat(saleOrder.amountTotal)}
-                    </td>
-                    <td>
-                      <div className='flex justify-center'>
-                        <TransactionStatusBadge status={saleOrder.status} />
-                      </div>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table> */}
 
             <Pagination
               pageCount={pageCount}
               currentPage={parseInt(pageNew)}
-              // url={router.pathname + (pageQuery ? `?${pageQuery}` : '')}
               url={`${router.pathname}?${toQuery(_.omit(query, ['page']))}`}
               className='mt-2 mb-2'
             />