From 0d28dc8ff5fb8c5399e356ed6ecae4fce2019ca6 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Sat, 31 May 2025 08:55:43 +0700
Subject: <hafid> fix repeat-order

---
 src/lib/transaction/components/Transactions.jsx | 124 +++++++++++++++++++++---
 1 file changed, 110 insertions(+), 14 deletions(-)

(limited to 'src/lib/transaction')

diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx
index 45821901..c4651119 100644
--- a/src/lib/transaction/components/Transactions.jsx
+++ b/src/lib/transaction/components/Transactions.jsx
@@ -78,6 +78,8 @@ const Transactions = ({ 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 parseDate = (date) => {
     if (null || 'null') return null;
@@ -263,7 +265,16 @@ const Transactions = ({ context = '' }) => {
   const getAllData = async () => {
     const query = {
       name: q,
-      context,
+      offset: (pageNew - 1) * limitNew,
+      limit: limitNew,
+      context: contextMap[statusNew], // gunakan contextMap
+      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),
     };
@@ -345,22 +356,29 @@ const Transactions = ({ context = '' }) => {
     }
   };
 
-  const handleStatusChange = (status) => {
+  
+  const handleStatusChange = async (status) => {
     setStatusNew(status);
+    setPageNew(1);
 
-    if (['quotation', 'cancel', 'diterima', ''].includes(status)) {
-      setcontextNew('quotation');
-    } else {
-      setcontextNew('');
+    if (status === 'all' && cachedAllData) {
+      setCurrentData(cachedAllData); 
+      return; 
     }
-
+    const data = await fetchSite(status, 1);
+    
     if (status === 'all') {
-      router.push(`${router.pathname}`);
-    } else {
-      setPageNew(1);
+      setCachedAllData(data);
     }
+
+    setCurrentData(data);
   };
 
+  useEffect(() => {
+    setCachedAllData([]);
+  }, []);
+
+
   const handleReset = () => {
     setState([
       {
@@ -857,9 +875,7 @@ const Transactions = ({ context = '' }) => {
                 <div className='text-justify flex flex-col gap-1'>
                   <p className='font-bold text-black'>Info Transaksi</p>
                   <span className='text-black'>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                    do eiusmod tempor incididunt ut labore et dolore magna
-                    aliqua.
+                    Gunakan filter status untuk mempermudah pencarian transaksi anda di Daftar Transaksi
                   </span>
                 </div>
               </div>
@@ -928,6 +944,86 @@ const Transactions = ({ context = '' }) => {
                     </button>
                   </form>
                 </div>
+                <div className='flex flex-col gap-2 pb-2'>
+                  <button
+                    type='button'
+                    className='form-input btn py-4 mt-1 cursor-pointer hover:bg-gray-100 rounded transition duration-150 ease-in-out text-left w-full'
+                    onClick={() => setIsOpenCalender(true)}
+                  >
+                    <span className='text-nowrap px-1 truncate'>
+                      {state[0]?.startDate
+                        ? `${state[0].startDate.toLocaleDateString()} - ${state[0].endDate.toLocaleDateString()}`
+                        : 'Filter By Tanggal'}
+                    </span>
+                  </button>
+                  {isOpenCalender && (
+                  <div className='absolute mt-2 bg-white p-4 rounded shadow-lg'>
+                    {/* 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={true}
+                      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'>
+                      <button
+                        className='px-4 py-1 bg-gray-500 text-white rounded'
+                        onClick={() => setIsOpenCalender(false)}
+                      >
+                        Done
+                      </button>
+                      <button
+                        className='px-4 py-1 bg-red-500 text-white rounded'
+                        onClick={handleReset}
+                      >
+                        Reset
+                      </button>
+                    </div>
+                  </div>
+                )}
+                </div>
                 <div className='flex flex-row gap-4 items-center justify-center'>
                   <p>
                     Menampilkan {startItem}-
@@ -980,7 +1076,7 @@ const Transactions = ({ context = '' }) => {
                     {transactions.data.saleOrders.map((saleOrder, index) => (
                       <div
                         key={index}
-                        className='border py-2 px-4 hover:border-red-500 w-full rounded-lg'
+                        className='border py-2 px-4 hover:border-red-500 w-full rounded-lg data-item'
                       >
                         <Link
                           href={`${router.pathname}/${saleOrder?.id}`}
-- 
cgit v1.2.3