summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--package.json7
-rw-r--r--src/lib/quotation/components/Quotationheader.jsx2
-rw-r--r--src/lib/transaction/components/TransactionStatusBadge.jsx4
-rw-r--r--src/lib/transaction/components/Transactions.jsx461
-rw-r--r--src/lib/treckingAwb/component/Manifest.jsx76
-rw-r--r--src/styles/globals.css8
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;
+}