<hafid> fix repeat order

6 files changed, 274 insertions, 284 deletions

diff --git a/package.json b/package.json
index 590faac6..494b5e9a 100644
--- a/package.json
+++ b/package.json
@@ -14,8 +14,10 @@
     "@choc-ui/chakra-autocomplete": "^5.6.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@headlessui/react": "^2.2.6",
     "@heroicons/react": "^2.0.13",
     "@hookform/resolvers": "^2.9.10",
+    "@jridgewell/set-array": "^1.2.1",
     "@ramonak/react-progress-bar": "^5.3.0",
     "@react-email/components": "^0.0.2",
     "@react-email/render": "^0.0.6",
@@ -27,8 +29,8 @@
     "classnames": "^2.3.2",
     "clsx": "^2.0.0",
     "cookies-next": "^2.1.1",
-    "date-fns": "^4.1.0",
     "cors": "^2.8.5",
+    "date-fns": "^4.1.0",
     "flowbite": "^1.6.4",
     "framer-motion": "^7.10.3",
     "lodash-contrib": "^4.1200.1",
@@ -41,8 +43,9 @@
     "next-pwa": "^5.6.0",
     "next-seo": "^5.15.0",
     "nodemailer": "^6.8.0",
-    "react-date-range": "^2.0.1",
     "react": "18.2.0",
+    "react-date-range": "^2.0.1",
+    "react-datepicker": "^8.4.0",
     "react-dom": "18.2.0",
     "react-google-recaptcha": "^2.1.0",
     "react-hook-form": "^7.42.1",
diff --git a/src/lib/quotation/components/Quotationheader.jsx b/src/lib/quotation/components/Quotationheader.jsx
index 6551296a..a035edc7 100644
--- a/src/lib/quotation/components/Quotationheader.jsx
+++ b/src/lib/quotation/components/Quotationheader.jsx
@@ -243,7 +243,7 @@ const Quotationheader = (quotationCount) => {
                                           Status :
                                         </p>
                                         <p className='badge-yellow h-fit text-xs whitespace-nowrap'>
-                                          Pesanan Diterima
+                                          Pesanan Diproses
                                         </p>
                                       </div>
                                     </div>
diff --git a/src/lib/transaction/components/TransactionStatusBadge.jsx b/src/lib/transaction/components/TransactionStatusBadge.jsx
index e061587c..cb8cbcd9 100644
--- a/src/lib/transaction/components/TransactionStatusBadge.jsx
+++ b/src/lib/transaction/components/TransactionStatusBadge.jsx
@@ -14,11 +14,11 @@ const TransactionStatusBadge = ({ status }) => {
       break
     case 'waiting':
       badgeProps.className.push('badge-yellow')
-      badgeProps.text = 'Pesanan Diterima'
+      badgeProps.text = 'Pesanan Diproses'
       break
     case 'sale':
       badgeProps.className.push('badge-yellow')
-      badgeProps.text = 'Pesanan Diproses'
+      badgeProps.text = 'Pesanan Dikemas'
       break
     case 'shipping':
       badgeProps.className.push('badge-green')
diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx
index c4651119..acb925da 100644
--- a/src/lib/transaction/components/Transactions.jsx
+++ b/src/lib/transaction/components/Transactions.jsx
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef  } from 'react';
 import { toast } from 'react-hot-toast';
 import {
   EllipsisVerticalIcon,
@@ -34,7 +34,10 @@ import Image from '@/core/components/elements/Image/Image';
 import { upsertUserCart } from '~/services/cart';
 import { useProductCartContext } from '@/contexts/ProductCartContext';
 import { Swiper, SwiperSlide } from 'swiper/react';
+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';
@@ -45,6 +48,7 @@ import { Popover } from '@headlessui/react';
 const Transactions = ({ context = '' }) => {
   const auth = useAuth();
   const router = useRouter();
+  const swiperRef = useRef(null);
   const {
     q = '',
     page = 1,
@@ -80,11 +84,12 @@ const Transactions = ({ context = '' }) => {
   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 parseDate = (date) => {
-    if (null || 'null') return null;
-    if (!date) return null;
-    if (date instanceof Date) return date; // Jika sudah Date, langsung return
+    if (!date || date === 'null') return null;
+    if (date instanceof Date) return date;
     const [day, month, year] = date.split('/').map(Number);
     return new Date(year, month - 1, day);
   };
@@ -106,7 +111,7 @@ const Transactions = ({ context = '' }) => {
     sort: sortNew,
     startDate: state[0].startDate
       ? state[0].startDate.toLocaleDateString('id-ID')
-      : state[0].startDate,
+      : null,
     endDate: state[0]?.endDate?.toLocaleDateString('id-ID'),
     site:
       siteFilter || (auth?.webRole === null && auth?.site ? auth.site : null),
@@ -114,8 +119,9 @@ const Transactions = ({ context = '' }) => {
   const statuses = [
     { id: 'all', label: 'Semua' },
     { id: 'quotation', label: 'Pending Quotation' },
-    { id: 'diterima', label: 'Pesanan Diterima' },
     { id: 'diproses', label: 'Pesanan Diproses' },
+    { id: 'dikemas', label: 'Pesanan Dikemas' },
+    { id: 'partial', label: 'Dikirim Sebagian' },
     { id: 'dikirim', label: 'Pesanan Dikirim' },
     { id: 'selesai', label: 'Pesanan Selesai' },
     { id: 'cancel', label: 'Pesanan Dibatalkan' },
@@ -302,6 +308,22 @@ const Transactions = ({ context = '' }) => {
     }
   };
 
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (
+        calendarRef.current &&
+        !calendarRef.current.contains(event.target)
+      ) {
+        setIsOpenCalender(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
   const startItem = 1 + (pageNew - 1) * limitNew;
   const endItem = Math.min(
     limitNew * pageNew,
@@ -438,82 +460,82 @@ const Transactions = ({ context = '' }) => {
                 </option>
               ))}
             </select>
-            <div className='relative w-full text-xs'>
-              <div
-                className='border border-gray-300 rounded-lg bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 w-full px-2 py-1 flex items-center justify-between cursor-pointer'
-                onClick={() => setIsOpenCalender(true)}
-              >
-                <span className='text-nowrap px-1 truncate'>
-                  {state[0]?.startDate
-                    ? `${state[0].startDate.toLocaleDateString()} - ${state[0].endDate.toLocaleDateString()}`
-                    : 'Semua Tanggal'}
-                </span>
-              </div>
-
-              {isOpenCalender && (
-                <div className='fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50'>
-                  <div className='calendar-container bg-white shadow-lg border rounded-lg p-4  w-full'>
-                    <DateRangePicker
-                      onChange={(item) => setState([item.selection])}
-                      showSelectionPreview={true}
-                      maxDate={new Date()}
-                      moveRangeOnFirstSelection={false}
-                      months={1}
-                      ranges={state}
-                      direction='horizontal'
-                      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 ref={calendarRef} className="relative inline-block">
+                <button
+                  type='button'
+                  className='p-2 w-auto h-auto cursor-pointer 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" />
+                      )}
+                  </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'
+                  >
+                    &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'>
+                    <button
+                      className='px-4 py-1 bg-red-500 text-white rounded'
+                      onClick={handleReset}
+                    >
+                      Reset
+                    </button>
                   </div>
                 </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}
@@ -643,7 +665,7 @@ const Transactions = ({ context = '' }) => {
                       {saleOrder.products?.length > 1 && (
                         <div className='flex flex-row gap-1 justify-start items-center'>
                           {saleOrder.products
-                            .slice(1, 6)
+                            .slice(1, 4)
                             .map((product, index) => (
                               <Image
                                 key={index} // Tambahkan key untuk setiap elemen dalam map()
@@ -652,16 +674,21 @@ const Transactions = ({ context = '' }) => {
                                 className='object-contain object-center border border-gray_r-6 h-8 w-8 rounded-md'
                               />
                             ))}
-                          <Link
-                            href={`${router.pathname}/${saleOrder?.id}`}
-                            className=' text-red-500 text-nowrap'
-                          >
-                            {saleOrder.products?.length > 6
-                              ? 'Lihat ' +
-                                (saleOrder.products?.length - 6) +
-                                ' produk lainnya'
-                              : 'Lihat semua produk'}
-                          </Link>
+                          {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>
+                            )}
                         </div>
                       )}
                     </div>
@@ -880,33 +907,60 @@ const Transactions = ({ context = '' }) => {
                 </div>
               </div>
             </div>
-            <div className='flex flex-col gap-y-2  border rounded-lg mb-2'>
+            <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>
-                  <Swiper
-                    spaceBetween={10}
-                    slidesPerView={5.8}
-                    className='w-full h-8'
-                  >
-                    {statuses.map((status) => (
-                      <SwiperSlide key={status.id} className='w-auto'>
-                        <button
-                          className={`px-4 py-1 text-sm font-medium border rounded-lg transition whitespace-nowrap min-w-40
-                  ${
-                    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)}
+                  <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" />
+                        </svg>
+                      </button>
+
+                      {/* Swiper container scrollable */}
+                      <div className="w-full overflow-hidden">
+                        <Swiper
+                          spaceBetween={10}
+                          slidesPerView="auto"
+                          className="status-swiper"
+                          modules={[Navigation]}
+                          navigation={{
+                            nextEl: '.custom-next',
+                            prevEl: '.custom-prev',
+                          }}
                         >
-                          {status.label}
-                        </button>
-                      </SwiperSlide>
-                    ))}
-                  </Swiper>
+                          {statuses.map((status) => (
+                            <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'
+                                  }`}
+                                onClick={() => handleStatusChange(status.id)}
+                              >
+                                {status.label}
+                              </button>
+                            </SwiperSlide>
+                          ))}
+                        </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" />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
                 </div>
               </div>
               <div className='flex flex-row items-center justify-between mb-2 p-2'>
@@ -944,86 +998,6 @@ 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}-
@@ -1050,6 +1024,82 @@ const Transactions = ({ context = '' }) => {
                     <option value={15}>15</option>
                     <option value={20}>20</option>
                   </select>
+                  <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" />
+                          )}
+                      </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'>
+                        <button
+                          className='px-4 py-1 bg-red-500 text-white rounded'
+                          onClick={handleReset}
+                        >
+                          Reset
+                        </button>
+                      </div>
+                    </div>
+                    )}
+                  </div>
                 </div>
               </div>
             </div>
@@ -1140,7 +1190,7 @@ const Transactions = ({ context = '' }) => {
                                     {saleOrder.products?.length > 1 && (
                                       <div className='flex flex-row gap-1 justify-start items-center'>
                                         {saleOrder.products
-                                          .slice(1, 6)
+                                          .slice(1, 4)
                                           .map((product, index) => (
                                             <Image
                                               key={index} // Tambahkan key untuk setiap elemen dalam map()
@@ -1149,16 +1199,21 @@ const Transactions = ({ context = '' }) => {
                                               className='object-contain object-center border border-gray_r-6 h-16 w-16 rounded-md'
                                             />
                                           ))}
-                                        <Link
-                                          href={`${router.pathname}/${saleOrder?.id}`}
-                                          className='text-sm text-red-500 text-nowrap'
-                                        >
-                                          {saleOrder.products?.length > 6
-                                            ? 'Lihat ' +
-                                              (saleOrder.products?.length - 6) +
-                                              ' produk lainnya'
-                                            : 'Lihat semua produk'}
-                                        </Link>
+                                        {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>
+                                        )}
                                       </div>
                                     )}
                                   </div>
diff --git a/src/lib/treckingAwb/component/Manifest.jsx b/src/lib/treckingAwb/component/Manifest.jsx
index 5b456ccf..acb86f57 100644
--- a/src/lib/treckingAwb/component/Manifest.jsx
+++ b/src/lib/treckingAwb/component/Manifest.jsx
@@ -135,82 +135,6 @@ const Manifest = ({ idAWB, closePopup }) => {
               </div>
             )}
           </div>
-<<<<<<< HEAD
-          <div className=''>
-            <h1 className='text-body-1'>
-              Estimasi tiba pada{' '}
-              <span className='text-gray_r-11 text-sm'>({manifests?.eta})</span>
-            </h1>
-            <h1 className='text-sm mt-2 mb-3'>
-              Dikirim Menggunakan{' '}
-              <span className='text-red-500 font-semibold'>
-                {manifests?.deliveryOrder.carrier}
-              </span>
-            </h1>
-            {manifests?.waybillNumber && (
-              <div className='flex justify-between items-center'>
-                <h3>No. Resi</h3>
-                <div className='flex justify-between gap-x-2 items-center'>
-                  <h3 className='font-semibold'>{manifests?.waybillNumber}</h3>
-                  <button
-                    className={`${copied ? 'text-gray-400' : 'text-red-600 '}`}
-                    onClick={() => handleCopyClick()}
-                  >
-                    <svg
-                      aria-hidden='true'
-                      fill='none'
-                      stroke='currentColor'
-                      stroke-width='1.5'
-                      viewBox='0 0 24 24'
-                      className='w-5 h-6'
-                    >
-                      <path
-                        d='M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75'
-                        stroke-linecap='round'
-                        stroke-linejoin='round'
-                      ></path>
-                    </svg>
-                  </button>
-                </div>
-              </div>
-            )}
-          </div>
-          <hr className='mt-4' />
-          <div className='pt-4'>
-            <ol class='relative border-l border-gray_r-7'>
-              {manifests?.manifests?.map((manifest, index) => (
-                <>
-                  <li class='mb-6 ml-4' key={index}>
-                    {manifests.delivered == true && index == 0 ? (
-                      <div
-                        class={`absolute w-6 h-6 rounded-full mt-1.5 -left-3 border ${
-                          index == 0
-                            ? 'bg-green-100 border-green-100'
-                            : 'bg-gray_r-7 border-white'
-                        }`}
-                      >
-                        <ImageNext
-                          src='/images/open-box(1).svg'
-                          width={30}
-                          height={20}
-                        />
-                      </div>
-                    ) : (
-                      <div
-                        class={`absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 border bg-gray_r-7 border-white`}
-                      />
-                    )}
-                    {manifests.delivered != true && (
-                      <div
-                        class={`absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 border ${
-                          index == 0
-                            ? 'bg-green-600 border-green-600'
-                            : 'bg-gray_r-7 border-white'
-                        } `}
-                      />
-                    )}
-=======
->>>>>>> new-release
 
           <InformationSection manifests={manifests} />
 
diff --git a/src/styles/globals.css b/src/styles/globals.css
index d9b82447..1860fc2b 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -696,3 +696,11 @@ button {
 ::-webkit-scrollbar-thumb:hover {
     background-color: #555;
 }
+.status-swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.status-swiper .swiper-slide {
+  width: auto !important;
+}