Merged in Feature/page_tracking_awb (pull request #59)

Feature/page tracking awb

12 files changed, 605 insertions, 454 deletions

diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx
index ff673953..2faede9b 100644
--- a/src/lib/auth/components/CompanyProfile.jsx
+++ b/src/lib/auth/components/CompanyProfile.jsx
@@ -93,7 +93,7 @@ const CompanyProfile = () => {
               />
             </div>
             <div className='flex flex-wrap'>
-              <div className='w-full mb-3'>Nama Usaha</div>
+              <div className='w-full mb-3'>Badan Usaha</div>
               <div className='w-3/12 pr-1'>
                 <Controller
                   name='companyType'
diff --git a/src/lib/auth/components/LoginDesktop.jsx b/src/lib/auth/components/LoginDesktop.jsx
index 42fa8896..d22da6f8 100644
--- a/src/lib/auth/components/LoginDesktop.jsx
+++ b/src/lib/auth/components/LoginDesktop.jsx
@@ -95,7 +95,7 @@ const LoginDesktop = () => {
                 {!isLoading ? 'Masuk' : 'Loading...'}
               </button>
             </form>
-            <div className='flex  items-center mt-3 mb-3'>
+            {/* <div className='flex  items-center mt-3 mb-3'>
               <hr className='flex-1' />
               <p className='text-gray-400'>ATAU</p>
               <hr className='flex-1' />
@@ -114,7 +114,7 @@ const LoginDesktop = () => {
                 height={10}
               />
               <p>Masuk dengan Google</p>
-            </button>
+            </button> */}
 
             <div className='text-gray_r-11 mt-10'>
               Belum punya akun Indoteknik?{' '}
diff --git a/src/lib/auth/components/LoginMobile.jsx b/src/lib/auth/components/LoginMobile.jsx
index 095f4174..6e1831d4 100644
--- a/src/lib/auth/components/LoginMobile.jsx
+++ b/src/lib/auth/components/LoginMobile.jsx
@@ -13,10 +13,19 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
 import odooApi from '@/core/api/odooApi'
 import { getAuth } from '@/core/utils/auth'
+import PageContent from '@/lib/content/components/PageContent'
 
 const LoginMobile = () => {
-  const { handleSubmit, handleChangeInput, isLoading, isValid, alert, emailRef, passwordRef, handleGoogleSubmit } =
-    useLogin()
+  const {
+    handleSubmit,
+    handleChangeInput,
+    isLoading,
+    isValid,
+    alert,
+    emailRef,
+    passwordRef,
+    handleGoogleSubmit
+  } = useLogin()
 
   const router = useRouter()
   const [query, setQuery] = useState(router?.query?.next || '/')
@@ -91,7 +100,7 @@ const LoginMobile = () => {
             {!isLoading ? 'Masuk' : 'Loading...'}
           </button>
         </form>
-        <div className='flex  items-center mt-3 mb-3'>
+        {/* <div className='flex  items-center mt-3 mb-3'>
           <hr className='flex-1' />
           <p className='text-gray-400'>ATAU</p>
           <hr className='flex-1' />
@@ -110,7 +119,7 @@ const LoginMobile = () => {
             height={10}
           />
           <p>Masuk dengan Google</p>
-        </button>
+        </button> */}
 
         <div className='text-gray_r-11 mt-4'>
           Belum punya akun Indoteknik?{' '}
@@ -118,6 +127,9 @@ const LoginMobile = () => {
             Daftar
           </Link>
         </div>
+        {/* <div className='mt-5'>
+          <PageContent path='/login' />
+        </div> */}
       </div>
     </MobileView>
   )
diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx
index 939a0d5f..f475db1f 100644
--- a/src/lib/auth/components/Menu.jsx
+++ b/src/lib/auth/components/Menu.jsx
@@ -1,6 +1,7 @@
 import Link from '@/core/components/elements/Link/Link'
 import { useRouter } from 'next/router'
 import ImageNext from 'next/image'
+import whatsappUrl from '@/core/utils/whatsappUrl'
 
 const Menu = () => {
   const router = useRouter()
@@ -42,7 +43,7 @@ const Menu = () => {
       </LinkItem>
       <div className='mt-4 mb-1 font-medium'>Pusat Bantuan</div>
 
-      <LinkItem href='/'>
+      <LinkItem href={whatsappUrl('', '', '')} rel='noopener noreferrer' target='_blank'>
         <div className='flex gap-x-3 items-center'>
           <ImageNext src='/images/icon/icon_layanan_pelanggan.svg' width={18} height={20} />
           <p>Layanan Pelanggan</p>
diff --git a/src/lib/auth/components/RegisterDesktop.jsx b/src/lib/auth/components/RegisterDesktop.jsx
index a2bc98c2..6072bfb9 100644
--- a/src/lib/auth/components/RegisterDesktop.jsx
+++ b/src/lib/auth/components/RegisterDesktop.jsx
@@ -152,7 +152,7 @@ const RegisterDesktop = () => {
                 <PageContent path='/register#tnd'></PageContent>
               </BottomPopup>
             </div>
-            <div className='flex  items-center mt-3 mb-3'>
+            {/* <div className='flex  items-center mt-3 mb-3'>
               <hr className='flex-1' />
               <p className='text-gray-400'>ATAU</p>
               <hr className='flex-1' />
@@ -171,7 +171,7 @@ const RegisterDesktop = () => {
                 height={10}
               />
               <p>Daftar dengan Google</p>
-            </button>
+            </button> */}
 
             <div className='text-gray_r-11 mt-10'>
               Sudah punya akun Indoteknik?{' '}
diff --git a/src/lib/auth/components/RegisterMobile.jsx b/src/lib/auth/components/RegisterMobile.jsx
index 2e918a14..1b0d2adf 100644
--- a/src/lib/auth/components/RegisterMobile.jsx
+++ b/src/lib/auth/components/RegisterMobile.jsx
@@ -151,7 +151,7 @@ const RegisterMobile = () => {
           </BottomPopup>
         </div>
 
-        <div className='flex  items-center mt-3 mb-3'>
+        {/* <div className='flex  items-center mt-3 mb-3'>
           <hr className='flex-1' />
           <p className='text-gray-400'>ATAU</p>
           <hr className='flex-1' />
@@ -170,7 +170,7 @@ const RegisterMobile = () => {
             height={10}
           />
           <p>Daftar dengan Google</p>
-        </button>
+        </button> */}
 
         <div className='text-gray_r-11 mt-4'>
           Sudah punya akun Indoteknik?{' '}
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 0eb05345..ce691403 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -492,7 +492,9 @@ const Checkout = () => {
                     <div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0 z-50' />
                   )}
 
-                  <div className={`border border-solid mb-5 w-full hover:cursor-pointer  p-2 pl-4 pr-4 `}>
+                  <div
+                    className={`border border-solid mb-5 w-full hover:cursor-pointer  p-2 pl-4 pr-4 `}
+                  >
                     {item.canApply && (
                       <div
                         class='p-2 mb-4 text-sm text-green-800 rounded-lg bg-green-50 dark:text-green-400'
@@ -521,7 +523,8 @@ const Checkout = () => {
                       >
                         <p className='text-sm'>
                           Tambah produk{' '}
-                          <span className='text-red-500 font-bold '>{item.manufactureNames}</span> senilai{' '}
+                          <span className='text-red-500 font-bold '>{item.manufactureNames}</span>{' '}
+                          senilai{' '}
                           <span className='text-red-500 font-bold'>
                             {currencyFormat(item.minPurchaseAmount)}
                           </span>{' '}
@@ -539,7 +542,8 @@ const Checkout = () => {
                         >
                           <p className='text-sm'>
                             Tambah produk{' '}
-                            <span className='text-red-500 font-bold'>{item.manufactureNames}</span> senilai{' '}
+                            <span className='text-red-500 font-bold'>{item.manufactureNames}</span>{' '}
+                            senilai{' '}
                             <span className='text-red-500 font-bold'>
                               {currencyFormat(item.differenceToApply)}
                             </span>{' '}
@@ -654,6 +658,29 @@ const Checkout = () => {
 
         <Divider />
 
+        {selectedCarrierId == SELF_PICKUP_ID && (
+          <div className='p-4'>
+            <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-4 h-4 mr-3'
+                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'>
+                Fitur Self Pickup, hanya berlaku untuk customer di area jakarta. Apa bila memilih
+                fitur ini, anda akan dihubungi setelah barang siap diambil.
+              </div>
+            </div>
+          </div>
+        )}
+
         {selectedCarrierId == SELF_PICKUP_ID && <PickupAddress label='Alamat Pickup' />}
         {selectedCarrierId != SELF_PICKUP_ID && (
           <>
@@ -886,393 +913,416 @@ const Checkout = () => {
       </MobileView>
 
       <DesktopView>
-        <div className='container mx-auto py-10 flex'>
-          <div className='w-3/4 border border-gray_r-6 rounded bg-white'>
-            {selectedCarrierId == SELF_PICKUP_ID && <PickupAddress label='Alamat Pickup' />}
-            {selectedCarrierId != SELF_PICKUP_ID && (
-              <>
-                <SectionAddress
-                  address={selectedAddress.shipping}
-                  label='Alamat Pengiriman'
-                  url='/my/address?select=shipping'
-                />
-                <Divider />
-                <SectionAddress
-                  address={selectedAddress.invoicing}
-                  label='Alamat Penagihan'
-                  url='/my/address?select=invoice'
-                />
-              </>
-            )}
-            <Divider />
-            <SectionValidation address={selectedAddress.invoicing} />
-            <SectionExpedisi
-              address={selectedAddress.shipping}
-              listExpedisi={listExpedisi}
-              setSelectedExpedisi={setSelectedExpedisi}
-              checkWeigth={checkWeigth}
-              checkoutValidation={checkoutValidation}
-              expedisiValidation={expedisiValidation}
-            />
-            <Divider />
-            <SectionListService
-              listserviceExpedisi={listserviceExpedisi}
-              setSelectedServiceType={setSelectedServiceType}
-            />
+        <div className='container mx-auto py-10'>
+          {selectedCarrierId == SELF_PICKUP_ID && (
+            <div
+              class='flex items-center p-4 mb-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300'
+              role='alert'
+            >
+              <svg
+                class='flex-shrink-0 inline w-4 h-4 mr-3'
+                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>
+                Fitur Self Pickup, hanya berlaku untuk customer di area jakarta. Apa bila memilih
+                fitur ini, anda akan dihubungi setelah barang siap diambil.
+              </div>
+            </div>
+          )}
+
+          <div className='flex'>
+            {' '}
+            <div className='w-3/4 border border-gray_r-6 rounded bg-white'>
+              {selectedCarrierId == SELF_PICKUP_ID && <PickupAddress label='Alamat Pickup' />}
+              {selectedCarrierId != SELF_PICKUP_ID && (
+                <>
+                  <SectionAddress
+                    address={selectedAddress.shipping}
+                    label='Alamat Pengiriman'
+                    url='/my/address?select=shipping'
+                  />
+                  <Divider />
+                  <SectionAddress
+                    address={selectedAddress.invoicing}
+                    label='Alamat Penagihan'
+                    url='/my/address?select=invoice'
+                  />
+                </>
+              )}
+              <Divider />
+              <SectionValidation address={selectedAddress.invoicing} />
+              <SectionExpedisi
+                address={selectedAddress.shipping}
+                listExpedisi={listExpedisi}
+                setSelectedExpedisi={setSelectedExpedisi}
+                checkWeigth={checkWeigth}
+                checkoutValidation={checkoutValidation}
+                expedisiValidation={expedisiValidation}
+              />
+              <Divider />
+              <SectionListService
+                listserviceExpedisi={listserviceExpedisi}
+                setSelectedServiceType={setSelectedServiceType}
+              />
 
-            <div className='p-4'>
-              <div className='font-medium'>Detail Pesanan</div>
-              <table className='table-checkout'>
-                <thead>
-                  <tr>
-                    <th>Nama Produk</th>
-                    <th>Jumlah</th>
-                    <th>Harga</th>
-                    <th>Subtotal</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {!products ? (
+              <div className='p-4'>
+                <div className='font-medium'>Detail Pesanan</div>
+                <table className='table-checkout'>
+                  <thead>
                     <tr>
-                      <td colSpan={4}>
-                        <div className='container my-4'>
-                          <div class='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div>
-                          <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
-                          <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
-                          <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
-                        </div>
-                      </td>
+                      <th>Nama Produk</th>
+                      <th>Jumlah</th>
+                      <th>Harga</th>
+                      <th>Subtotal</th>
                     </tr>
-                  ) : (
-                    products?.map((product) => (
-                      <>
-                        <tr
-                          key={product.id}
-                          className={`${product.program ? '!border-t-0 !border-b-0' : ''}`}
-                        >
-                          <td className='flex'>
-                            <div className='w-[20%] flex-shrink-0'>
-                              <Image
-                                src={product?.parent?.image}
-                                alt={product?.name}
-                                className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
-                              />
-                            </div>
-                            <div className='px-2 text-left'>
-                              <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'>
-                                {product?.parent?.name}
-                              </div>
-                              <div className='text-gray_r-11 mt-2'>
-                                {product?.code}{' '}
-                                {product?.attributes.length > 0
-                                  ? `| ${product?.attributes.join(', ')}`
-                                  : ''}
-                              </div>
-                              <div className='text-gray_r-11 mt-2'>
-                                Berat item : {product?.weight} Kg
+                  </thead>
+                  <tbody>
+                    {!products ? (
+                      <tr>
+                        <td colSpan={4}>
+                          <div className='container my-4'>
+                            <div class='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div>
+                            <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+                            <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+                            <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                          </div>
+                        </td>
+                      </tr>
+                    ) : (
+                      products?.map((product) => (
+                        <>
+                          <tr
+                            key={product.id}
+                            className={`${product.program ? '!border-t-0 !border-b-0' : ''}`}
+                          >
+                            <td className='flex'>
+                              <div className='w-[20%] flex-shrink-0'>
+                                <Image
+                                  src={product?.parent?.image}
+                                  alt={product?.name}
+                                  className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
+                                />
                               </div>
-                            </div>
-                          </td>
-                          <td>
-                            <input
-                              className='form-input w-16 py-2 text-center bg-gray_r-1'
-                              type='number'
-                              value={product?.quantity}
-                              disabled
-                            />
-                          </td>
-                          <td>
-                            {product?.price?.discountPercentage > 0 && (
-                              <div className='flex gap-x-1 items-center justify-center mt-3'>
-                                <div className='text-gray_r-11 line-through text-caption-1'>
-                                  {currencyFormat(product?.price?.price)}
+                              <div className='px-2 text-left'>
+                                <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'>
+                                  {product?.parent?.name}
                                 </div>
-                                <div className='badge-solid-red'>
-                                  {product?.price?.discountPercentage}%
+                                <div className='text-gray_r-11 mt-2'>
+                                  {product?.code}{' '}
+                                  {product?.attributes.length > 0
+                                    ? `| ${product?.attributes.join(', ')}`
+                                    : ''}
+                                </div>
+                                <div className='text-gray_r-11 mt-2'>
+                                  Berat item : {product?.weight} Kg
                                 </div>
                               </div>
-                            )}
-                            <div className='font-normal mt-1'>
-                              {product.price.priceDiscount > 0
-                                ? currencyFormat(product?.price?.priceDiscount)
-                                : 'Call For Price'}
-                            </div>
-                          </td>
-                          <td>
-                            <div className='text-danger-500 font-medium'>
-                              {product.price.priceDiscount > 0 ? (
-                                currencyFormat(product?.price?.priceDiscount * product?.quantity)
-                              ) : (
-                                <a
-                                  href={whatsappUrl('product', {
-                                    name: product.name,
-                                    url: createSlug(
-                                      '/shop/product/',
-                                      product.name,
-                                      product.id,
-                                      true
-                                    )
-                                  })}
-                                  className='underline'
-                                >
-                                  Call For Price{' '}
-                                </a>
-                              )}
-                            </div>
-                          </td>
-                        </tr>
-                        {product.program &&
-                          product.program.items &&
-                          product.program.items.map((item) => (
-                            <>
-                              <tr key={product?.program?.id} className='!border-t-0'>
-                                <td className='flex'>
-                                  <div className='w-[20%] flex-shrink-0'>
-                                    <Image
-                                      src={item.parent.image}
-                                      alt={item.name}
-                                      className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
-                                    />
+                            </td>
+                            <td>
+                              <input
+                                className='form-input w-16 py-2 text-center bg-gray_r-1'
+                                type='number'
+                                value={product?.quantity}
+                                disabled
+                              />
+                            </td>
+                            <td>
+                              {product?.price?.discountPercentage > 0 && (
+                                <div className='flex gap-x-1 items-center justify-center mt-3'>
+                                  <div className='text-gray_r-11 line-through text-caption-1'>
+                                    {currencyFormat(product?.price?.price)}
                                   </div>
-                                  <div className='px-2 text-left'>
-                                    <div className=''>
-                                      <span className='border border-solid border-red-600 rounded-md p-1 text-red-600'>
-                                        {product.program.type.label}
-                                      </span>
-                                    </div>
-                                    <div className='mt-2 line-clamp-2 leading-6'>{item.name}</div>
+                                  <div className='badge-solid-red'>
+                                    {product?.price?.discountPercentage}%
                                   </div>
-                                </td>
-                                <td>
-                                  <input
-                                    className='form-input w-16 py-2 text-center bg-gray_r-1'
-                                    type='number'
-                                    value={1}
-                                    disabled
-                                  />
-                                </td>
-                                <td>
-                                  {item?.price?.discountPercentage > 0 && (
-                                    <div className='flex gap-x-1 items-center justify-center mt-3'>
-                                      <div className='text-gray_r-11 line-through text-caption-1'>
-                                        {currencyFormat(product?.price?.price)}
+                                </div>
+                              )}
+                              <div className='font-normal mt-1'>
+                                {product.price.priceDiscount > 0
+                                  ? currencyFormat(product?.price?.priceDiscount)
+                                  : 'Call For Price'}
+                              </div>
+                            </td>
+                            <td>
+                              <div className='text-danger-500 font-medium'>
+                                {product.price.priceDiscount > 0 ? (
+                                  currencyFormat(product?.price?.priceDiscount * product?.quantity)
+                                ) : (
+                                  <a
+                                    href={whatsappUrl('product', {
+                                      name: product.name,
+                                      url: createSlug(
+                                        '/shop/product/',
+                                        product.name,
+                                        product.id,
+                                        true
+                                      )
+                                    })}
+                                    className='underline'
+                                  >
+                                    Call For Price{' '}
+                                  </a>
+                                )}
+                              </div>
+                            </td>
+                          </tr>
+                          {product.program &&
+                            product.program.items &&
+                            product.program.items.map((item) => (
+                              <>
+                                <tr key={product?.program?.id} className='!border-t-0'>
+                                  <td className='flex'>
+                                    <div className='w-[20%] flex-shrink-0'>
+                                      <Image
+                                        src={item.parent.image}
+                                        alt={item.name}
+                                        className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
+                                      />
+                                    </div>
+                                    <div className='px-2 text-left'>
+                                      <div className=''>
+                                        <span className='border border-solid border-red-600 rounded-md p-1 text-red-600'>
+                                          {product.program.type.label}
+                                        </span>
                                       </div>
+                                      <div className='mt-2 line-clamp-2 leading-6'>{item.name}</div>
                                     </div>
-                                  )}
-                                  <div className='font-normal mt-1'>
-                                    {item?.price.priceDiscount > 0 ? 'Gratis' : ''}
-                                  </div>
-                                </td>
-                                <td>
-                                  <div className='text-danger-500 font-medium'>
-                                    {item.price.priceDiscount > 0 ? 'Gratis' : ''}
-                                  </div>
-                                </td>
-                                <td></td>
-                              </tr>
-                            </>
-                          ))}
-                      </>
-                    ))
-                  )}
-                </tbody>
-              </table>
-            </div>
-          </div>
-
-          <div className='w-1/4 pl-4'>
-            <div className='sticky top-48 border border-gray_r-6 bg-white rounded p-4'>
-              <div className='flex justify-between items-center'>
-                <div className='font-medium'>Ringkasan Pesanan</div>
-                <div className='text-gray_r-11 text-caption-1'>{products?.length} Barang</div>
+                                  </td>
+                                  <td>
+                                    <input
+                                      className='form-input w-16 py-2 text-center bg-gray_r-1'
+                                      type='number'
+                                      value={1}
+                                      disabled
+                                    />
+                                  </td>
+                                  <td>
+                                    {item?.price?.discountPercentage > 0 && (
+                                      <div className='flex gap-x-1 items-center justify-center mt-3'>
+                                        <div className='text-gray_r-11 line-through text-caption-1'>
+                                          {currencyFormat(product?.price?.price)}
+                                        </div>
+                                      </div>
+                                    )}
+                                    <div className='font-normal mt-1'>
+                                      {item?.price.priceDiscount > 0 ? 'Gratis' : ''}
+                                    </div>
+                                  </td>
+                                  <td>
+                                    <div className='text-danger-500 font-medium'>
+                                      {item.price.priceDiscount > 0 ? 'Gratis' : ''}
+                                    </div>
+                                  </td>
+                                  <td></td>
+                                </tr>
+                              </>
+                            ))}
+                        </>
+                      ))
+                    )}
+                  </tbody>
+                </table>
               </div>
+            </div>
+            <div className='w-1/4 pl-4'>
+              <div className='sticky top-48 border border-gray_r-6 bg-white rounded p-4'>
+                <div className='flex justify-between items-center'>
+                  <div className='font-medium'>Ringkasan Pesanan</div>
+                  <div className='text-gray_r-11 text-caption-1'>{products?.length} Barang</div>
+                </div>
 
-              <hr className='my-4 border-gray_r-6' />
-              {!cartCheckout ? (
-                <div
-                  role='status'
-                  class='max-w-md  space-y-3 divide-y divide-gray-200 animate-pulse dark:divide-gray-700 dark:border-gray-700'
-                >
-                  <div class='flex items-center justify-between'>
-                    <div>
-                      <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                <hr className='my-4 border-gray_r-6' />
+                {!cartCheckout ? (
+                  <div
+                    role='status'
+                    class='max-w-md  space-y-3 divide-y divide-gray-200 animate-pulse dark:divide-gray-700 dark:border-gray-700'
+                  >
+                    <div class='flex items-center justify-between'>
+                      <div>
+                        <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                      </div>
+                      <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
                     </div>
-                    <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
-                  </div>
-                  <div class='flex items-center justify-between pt-4'>
-                    <div>
-                      <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                    <div class='flex items-center justify-between pt-4'>
+                      <div>
+                        <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                      </div>
+                      <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
                     </div>
-                    <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
-                  </div>
-                  <div class='flex items-center justify-between pt-4'>
-                    <div>
-                      <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                    <div class='flex items-center justify-between pt-4'>
+                      <div>
+                        <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                      </div>
+                      <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+                    </div>
+                    <div class='flex items-center justify-between pt-4'>
+                      <div>
+                        <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                      </div>
+                      <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+                    </div>
+                    <div class='flex items-center justify-between pt-4'>
+                      <div>
+                        <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                      </div>
+                      <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
                     </div>
-                    <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
                   </div>
-                  <div class='flex items-center justify-between pt-4'>
-                    <div>
-                      <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                ) : (
+                  <div className='flex flex-col gap-y-4'>
+                    <div className='flex gap-x-2 justify-between'>
+                      <div className='text-gray_r-11'>Total Belanja</div>
+                      <div>{currencyFormat(cartCheckout?.totalPurchase)}</div>
+                    </div>
+                    <div className='flex gap-x-2 justify-between'>
+                      <div className='text-gray_r-11'>Diskon Produk</div>
+                      <div className='text-danger-500'>
+                        - {currencyFormat(cartCheckout?.totalDiscount)}
+                      </div>
+                    </div>
+                    {activeVoucher && (
+                      <div className='flex gap-x-2 justify-between'>
+                        <div className='text-gray_r-11'>Diskon Voucher</div>
+                        <div className='text-danger-500'>- {currencyFormat(discountVoucher)}</div>
+                      </div>
+                    )}
+                    <div className='flex gap-x-2 justify-between'>
+                      <div className='text-gray_r-11'>Subtotal</div>
+                      <div>{currencyFormat(cartCheckout?.subtotal)}</div>
+                    </div>
+                    <div className='flex gap-x-2 justify-between'>
+                      <div className='text-gray_r-11'>PPN 11%</div>
+                      <div>{currencyFormat(cartCheckout?.tax)}</div>
+                    </div>
+                    <div className='flex gap-x-2 justify-between'>
+                      <div className='text-gray_r-11'>
+                        Biaya Kirim
+                        <p className='text-xs mt-3'>{etdFix}</p>
+                      </div>
+                      <div>
+                        {currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}
+                      </div>
                     </div>
-                    <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
                   </div>
-                  <div class='flex items-center justify-between pt-4'>
+                )}
+
+                <hr className='my-4 border-gray_r-6' />
+                {!cartCheckout ? (
+                  <div className='flex gap-x-2 justify-between mb-4'>
                     <div>
+                      {' '}
                       <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
                     </div>
-                    <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
-                  </div>
-                </div>
-              ) : (
-                <div className='flex flex-col gap-y-4'>
-                  <div className='flex gap-x-2 justify-between'>
-                    <div className='text-gray_r-11'>Total Belanja</div>
-                    <div>{currencyFormat(cartCheckout?.totalPurchase)}</div>
-                  </div>
-                  <div className='flex gap-x-2 justify-between'>
-                    <div className='text-gray_r-11'>Diskon Produk</div>
-                    <div className='text-danger-500'>
-                      - {currencyFormat(cartCheckout?.totalDiscount)}
+                    <div className='font-semibold text-gray_r-12'>
+                      <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
                     </div>
                   </div>
-                  {activeVoucher && (
-                    <div className='flex gap-x-2 justify-between'>
-                      <div className='text-gray_r-11'>Diskon Voucher</div>
-                      <div className='text-danger-500'>- {currencyFormat(discountVoucher)}</div>
+                ) : (
+                  <div className='flex gap-x-2 justify-between mb-4'>
+                    <div>Grand Total</div>
+                    <div className='font-semibold text-gray_r-12'>
+                      {currencyFormat(
+                        cartCheckout?.grandTotal +
+                          Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
+                      )}
                     </div>
-                  )}
-                  <div className='flex gap-x-2 justify-between'>
-                    <div className='text-gray_r-11'>Subtotal</div>
-                    <div>{currencyFormat(cartCheckout?.subtotal)}</div>
-                  </div>
-                  <div className='flex gap-x-2 justify-between'>
-                    <div className='text-gray_r-11'>PPN 11%</div>
-                    <div>{currencyFormat(cartCheckout?.tax)}</div>
                   </div>
-                  <div className='flex gap-x-2 justify-between'>
-                    <div className='text-gray_r-11'>
-                      Biaya Kirim
-                      <p className='text-xs mt-3'>{etdFix}</p>
-                    </div>
-                    <div>
-                      {currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}
+                )}
+
+                <hr className='my-4 border-gray_r-6' />
+
+                <div className='mt-4 mb-4'>
+                  <button
+                    type='button'
+                    onClick={() => {
+                      SetBottomPopup(true)
+                      voucher()
+                    }}
+                    className='text-gray-900 p-3 flex items-center justify-between  rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
+                  >
+                    <div className='flex items-center justify-between gap-x-3'>
+                      <span className='text-left text-gray_r-9'>
+                        <Image
+                          src={'/images/DISKONICON.svg'}
+                          alt={''}
+                          className='object-contain object-center h-6 w-full rounded-md'
+                        />
+                      </span>
+                      {activeVoucher ? (
+                        <div className=''>
+                          <div className='text-left text-sm text-black font-semibold'>
+                            Hemat {currencyFormat(discountVoucher)}
+                          </div>
+                          <div className='text-left mt-1 text-green-600 text-xs'>
+                            Voucher berhasil digunakan
+                          </div>
+                        </div>
+                      ) : (
+                        <span className='text-left text-sm text-gray_r-9'>
+                          Hemat belanja dengan promo
+                        </span>
+                      )}
                     </div>
-                  </div>
+                    <span className='text-left ml-1 text-gray_r-9'>{'>'}</span>
+                  </button>
                 </div>
-              )}
 
-              <hr className='my-4 border-gray_r-6' />
-              {!cartCheckout ? (
-                <div className='flex gap-x-2 justify-between mb-4'>
-                  <div>
-                    {' '}
-                    <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
-                  </div>
-                  <div className='font-semibold text-gray_r-12'>
-                    <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
-                  </div>
+                <p className='text-caption-2 text-gray_r-11 leading-5'>
+                  Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '}
+                  <Link href='/syarat-ketentuan' className='inline font-normal'>
+                    Syarat & Ketentuan
+                  </Link>{' '}
+                  yang berlaku
+                </p>
+
+                <hr className='my-4 border-gray_r-6' />
+
+                <div className='font-medium mt-4'>
+                  Purchase Order <span className='font-normal text-gray_r-11'>(Opsional)</span>
                 </div>
-              ) : (
-                <div className='flex gap-x-2 justify-between mb-4'>
-                  <div>Grand Total</div>
-                  <div className='font-semibold text-gray_r-12'>
-                    {currencyFormat(
-                      cartCheckout?.grandTotal +
-                        Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
-                    )}
+
+                <div className='mt-4 flex gap-x-3'>
+                  <div className='w-6/12'>
+                    <label className='form-label font-normal'>Dokumen PO</label>
+                    <input
+                      type='file'
+                      className='form-input mt-2 h-12'
+                      accept='image/*,application/pdf'
+                      ref={poFile}
+                    />
+                  </div>
+                  <div className='w-6/12'>
+                    <label className='form-label font-normal'>Nomor PO</label>
+                    <input type='text' className='form-input mt-2 h-12' ref={poNumber} />
                   </div>
                 </div>
-              )}
+                <p className='text-caption-2 text-gray_r-11 mt-2'>Ukuran dokumen PO Maksimal 5MB</p>
 
-              <hr className='my-4 border-gray_r-6' />
+                <hr className='my-4 border-gray_r-6' />
 
-              <div className='mt-4 mb-4'>
                 <button
-                  type='button'
-                  onClick={() => {
-                    SetBottomPopup(true)
-                    voucher()
-                  }}
-                  className='text-gray-900 p-3 flex items-center justify-between  rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
+                  className='w-full btn-yellow mt-4'
+                  onClick={checkout}
+                  disabled={isLoading || !products || products?.length == 0 || priceCheck}
                 >
-                  <div className='flex items-center justify-between gap-x-3'>
-                    <span className='text-left text-gray_r-9'>
-                      <Image
-                        src={'/images/DISKONICON.svg'}
-                        alt={''}
-                        className='object-contain object-center h-6 w-full rounded-md'
-                      />
+                  {isLoading ? 'Loading...' : 'Lanjut Pembayaran'}
+                </button>
+                {priceCheck && (
+                  <div className='mt-4'>
+                    <span className='text-danger-500'>
+                      *) Terdapat produk yang belum memiliki harga,{' '}
+                      <a href={whatsappUrl()} className='underline'>
+                        Hubungi Kami untuk meminta harga.
+                      </a>
                     </span>
-                    {activeVoucher ? (
-                      <div className=''>
-                        <div className='text-left text-sm text-black font-semibold'>
-                          Hemat {currencyFormat(discountVoucher)}
-                        </div>
-                        <div className='text-left mt-1 text-green-600 text-xs'>
-                          Voucher berhasil digunakan
-                        </div>
-                      </div>
-                    ) : (
-                      <span className='text-left text-sm text-gray_r-9'>
-                        Hemat belanja dengan promo
-                      </span>
-                    )}
                   </div>
-                  <span className='text-left ml-1 text-gray_r-9'>{'>'}</span>
-                </button>
-              </div>
-
-              <p className='text-caption-2 text-gray_r-11 leading-5'>
-                Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '}
-                <Link href='/syarat-ketentuan' className='inline font-normal'>
-                  Syarat & Ketentuan
-                </Link>{' '}
-                yang berlaku
-              </p>
-
-              <hr className='my-4 border-gray_r-6' />
-
-              <div className='font-medium mt-4'>
-                Purchase Order <span className='font-normal text-gray_r-11'>(Opsional)</span>
-              </div>
-
-              <div className='mt-4 flex gap-x-3'>
-                <div className='w-6/12'>
-                  <label className='form-label font-normal'>Dokumen PO</label>
-                  <input
-                    type='file'
-                    className='form-input mt-2 h-12'
-                    accept='image/*,application/pdf'
-                    ref={poFile}
-                  />
-                </div>
-                <div className='w-6/12'>
-                  <label className='form-label font-normal'>Nomor PO</label>
-                  <input type='text' className='form-input mt-2 h-12' ref={poNumber} />
-                </div>
+                )}
               </div>
-              <p className='text-caption-2 text-gray_r-11 mt-2'>Ukuran dokumen PO Maksimal 5MB</p>
-
-              <hr className='my-4 border-gray_r-6' />
-
-              <button
-                className='w-full btn-yellow mt-4'
-                onClick={checkout}
-                disabled={isLoading || !products || products?.length == 0 || priceCheck}
-              >
-                {isLoading ? 'Loading...' : 'Lanjut Pembayaran'}
-              </button>
-              {priceCheck && (
-                <div className='mt-4'>
-                  <span className='text-danger-500'>
-                    *) Terdapat produk yang belum memiliki harga,{' '}
-                    <a href={whatsappUrl()} className='underline'>
-                      Hubungi Kami untuk meminta harga.
-                    </a>
-                  </span>
-                </div>
-              )}
             </div>
           </div>
         </div>
diff --git a/src/lib/home/api/categoryHomeApi.js b/src/lib/home/api/categoryHomeApi.js
index 81909d7b..44b77daa 100644
--- a/src/lib/home/api/categoryHomeApi.js
+++ b/src/lib/home/api/categoryHomeApi.js
@@ -1,7 +1,7 @@
 import odooApi from '@/core/api/odooApi'
 
 const categoryHomeIdApi = async ({ id }) => {
-  const dataCategoryHomeId = await odooApi('GET', `/api/v1/categories_homepage?id=${id}`)
+  const dataCategoryHomeId = await odooApi('GET', `/api/v1/product/category-homepage?id=${id}`)
   return dataCategoryHomeId
 }
 
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 187ab3c9..3b9296a8 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -59,8 +59,6 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
     getBackgound()
   }, [])
 
-  console.log('ini set', backgorundFlashSale)
-
   const [informationTab, setInformationTab] = useState(informationTabOptions[0].value)
 
   const variantQuantityRefs = useRef([])
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 36cd8d18..abf462a1 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -44,8 +44,8 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                       width={13}
                       height={5}
                     />
-                    <span className='text-white text-[11px] font-semibold'>
-                      {product?.flashSale?.tag}
+                    <span className='text-white text-[9px] md:text-[10px] font-semibold'>
+                    {product?.flashSale?.tag != "false" || product?.flashSale?.tag != product?.flashSale?.tag ? product?.flashSale?.tag : 'FLASH SALE'}
                     </span>
                   </div>
                 </div>
@@ -138,7 +138,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                 width={15}
                 height={10}
               />
-              <span className='text-white text-xs font-semibold'>FLASH SALE</span>
+              <span className='text-white text-xs font-semibold'>{product?.flashSale?.tag != "false" || product?.flashSale?.tag != product?.flashSale?.tag ? product?.flashSale?.tag : 'FLASH SALE'}</span>
             </div>
           )}
           {product?.manufacture?.name ? (
diff --git a/src/lib/shipment/components/Shipments.jsx b/src/lib/shipment/components/Shipments.jsx
index c9d3e627..129e2496 100644
--- a/src/lib/shipment/components/Shipments.jsx
+++ b/src/lib/shipment/components/Shipments.jsx
@@ -5,7 +5,7 @@ import { EllipsisVerticalIcon, MagnifyingGlassIcon } from '@heroicons/react/24/o
 import ImageNext from 'next/image'
 import { useRouter } from 'next/router'
 import { useQuery } from 'react-query'
-import _ from 'lodash-contrib'
+import _, { forEach } from 'lodash-contrib'
 import Spinner from '@/core/components/elements/Spinner/Spinner'
 import Manifest from '@/lib/treckingAwb/component/Manifest'
 import { useState } from 'react'
@@ -18,20 +18,24 @@ const { listShipments } = require('../api/listShipment')
 const Shipments = () => {
   const router = useRouter()
   const { q = '', page = 1 } = router.query
+  const [paramStatus, setParamStatus] = useState(null)
 
   const limit = 15
 
   const query = {
     q: q,
+    status: paramStatus,
     offset: (page - 1) * limit,
     limit
   }
-  console.log('ini query', query)
   const [inputQuery, setInputQuery] = useState(q)
   const queryString = _.toQuery(query)
 
-  const { data: shipments } = useQuery('shipments', () => listShipments({ query: queryString }))
+  const { data: shipments } = useQuery('shipments' + queryString, () =>
+    listShipments({ query: queryString })
+  )
   const [idAWB, setIdAWB] = useState(null)
+  console.log('ini shipmnets', shipments)
 
   const pageCount = Math.ceil(shipments?.pickingTotal / limit)
   let pageQuery = _.omit(query, ['limit', 'offset', 'context'])
@@ -46,41 +50,25 @@ const Shipments = () => {
     e.preventDefault()
     router.push(`${router.pathname}?q=${inputQuery}`)
   }
+
+  const filterStatus = async (status) => {
+    if (status === paramStatus) {
+      setParamStatus(null)
+    } else {
+      setParamStatus(status)
+    }
+  }
   return (
     <>
       <MobileView>
         <div className='p-4 flex flex-col gap-y-4'>
           <div className='flex justify-between gap-x-1'>
-            <div className='flex justify-between items-center gap-x-2 p-2 bg-white border border-gray-200 rounded-lg shadow'>
-              <div>
-                <ImageNext src='/images/BOX(1).svg' width={15} height={20} />
-              </div>
-              <h1 className='text-xs'>Pending</h1>
-              <h1 className='text-xs'>
-                {' '}
-                {shipments?.summary?.pendingCount} {'>'}
-              </h1>
-            </div>
-            <div className='flex justify-between items-center gap-x-2 p-2 bg-white border border-gray-200 rounded-lg shadow'>
-              <div>
-                <ImageNext src='/images/BOX_DELIVER_(1).svg' width={18} height={20} />
-              </div>
-              <h1 className='text-xs'>Pengiriman</h1>
-              <h1 className='text-xs'>
-                {' '}
-                {shipments?.summary?.shipmentCount} {'>'}
-              </h1>
-            </div>
-            <div className='flex justify-between items-center gap-x-2 p-2 bg-white border border-gray-200 rounded-lg shadow'>
-              <div>
-                <ImageNext src='/images/open-box(1).svg' width={16} height={20} />
-              </div>
-              <h1 className='text-xs'>Selesai</h1>
-              <h1 className='text-xs'>
-                {' '}
-                {shipments?.summary?.shipmentCount} {'>'}
-              </h1>
-            </div>
+            <CardStatus
+              device={'mobile'}
+              paramStatus={paramStatus}
+              shipments={shipments}
+              filterStatus={filterStatus}
+            />
           </div>
 
           <form className='flex gap-x-3' onSubmit={handleSubmit}>
@@ -109,14 +97,19 @@ const Shipments = () => {
                   <p className='mt-2'>No. Resi : {shipment.trackingNumber || '-'}</p>
                 </div>
                 <div className='flex justify-between'>
-                  {shipment?.delivered && (
+                  {shipment?.status === 'completed' && (
                     <div className='bg-green-100 p-2 rounded '>
                       <p className='text-green-600 text-sm'>Pesanan Tiba</p>
                     </div>
                   )}
-                  {!shipment?.delivered && (
+                  {shipment?.status === 'shipment' && (
+                    <div className='bg-yellow-100 p-2 rounded '>
+                      <p className='text-yellow-600 text-sm'>Sedang Dikirim</p>
+                    </div>
+                  )}
+                  {shipment?.status === 'pending' && (
                     <div className='bg-red-100 p-2 rounded '>
-                      <p className='text-red-600 text-sm'>Sedang Dikirim</p>
+                      <p className='text-red-600 text-sm'>Pending</p>
                     </div>
                   )}
                 </div>
@@ -184,54 +177,16 @@ const Shipments = () => {
                   <path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z' />
                 </svg>
                 <div>
-                  <span class='font-medium'>Warning alert!</span> Change a few things up and try
-                  submitting again.
+                  Lacak pengiriman untuk setiap transaksi anda semakin mudah di Indoteknik.com
                 </div>
               </div>
               <div className='flex justify-between gap-x-5'>
-                <div class='max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow min-w-[268px]'>
-                  <h2 class='mb-2 text-lg font-bold tracking-tight'>Pending</h2>
-                  <div className='bg-red-100 border border-red-200 rounded-sm p-2 w-20 h-[39px] mb-2'>
-                    <div>
-                      <ImageNext
-                        src='/images/BOX(1).svg'
-                        width={25}
-                        height={20}
-                        style={{ stroke: 'red' }}
-                      />
-                    </div>
-                  </div>
-                  <h1 className='text-xl font-bold'>
-                    {shipments?.summary?.pendingCount} <span className='text-sm'>Pesanan</span>
-                  </h1>
-                </div>
-                <div class='max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow min-w-[268px]'>
-                  <h5 class='mb-2 text-lg font-bold tracking-tight'>Pengiriman</h5>
-                  <div className='bg-yellow-100 border border-yellow-200 rounded-sm p-1 w-20 mb-2'>
-                    <div>
-                      <ImageNext src='/images/BOX_DELIVER_(1).svg' width={30} height={20} />
-                    </div>
-                  </div>
-                  <h1 className='text-xl font-bold'>
-                    {shipments?.summary?.shipmentCount} <span className='text-sm'>Pesanan</span>
-                  </h1>
-                </div>
-                <div class='max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow min-w-[268px]'>
-                  <h5 class='mb-2 text-lg font-bold tracking-tight'>Pesanan Tiba</h5>
-                  <div className='bg-green-100 border border-green-200 rounded-sm p-1 w-20 mb-2'>
-                    <div>
-                      <ImageNext
-                        src='/images/open-box(1).svg'
-                        width={30}
-                        height={20}
-                        className='stroke-orange-600'
-                      />
-                    </div>
-                  </div>
-                  <h1 className='text-xl font-bold'>
-                    {shipments?.summary?.completedCount} <span className='text-sm'>Pesanan</span>
-                  </h1>
-                </div>
+                <CardStatus
+                  device={'desktop'}
+                  paramStatus={paramStatus}
+                  shipments={shipments}
+                  filterStatus={filterStatus}
+                />
               </div>
             </div>
             <div className='p-4 bg-white border border-gray_r-6 rounded'>
@@ -312,4 +267,131 @@ const Shipments = () => {
   )
 }
 
+const CardStatus = ({ device, paramStatus, shipments, filterStatus }) => {
+  const status = [`pending`, `shipment`, `completed`]
+
+  return (
+    <>
+      {status.map((value) => {
+        const statusData = getStatusLabel(device, value, shipments)
+        if (device === 'desktop') {
+          return (
+            <div
+              key={value} // Gunakan 'value' sebagai 'key' jika mungkin
+              className={`max-w-sm p-6 bg-white border rounded-lg shadow md:min-w-[268px] cursor-pointer hover:shadow-lg ${
+                paramStatus === value ? 'border-red-600' : 'border-gray-200'
+              }`}
+              onClick={() => filterStatus(value)}
+            >
+              <h2 className='mb-2 text-lg font-bold tracking-tight'>{statusData.label}</h2>
+              {statusData.image}
+              <h1 className='text-xl font-bold'>
+                {statusData.shipCount} <span className='text-sm'>Pesanan</span>
+              </h1>
+            </div>
+          )
+        } else {
+          return (
+            <div
+              key={value}
+              className={`flex justify-between items-center gap-x-1 pt-2 pb-2 pl-1 pr-1  bg-white border border-gray-200 rounded-lg shadow cursor-pointer ${
+                paramStatus === value ? 'border-red-600' : 'border-gray-200'
+              }`}
+              onClick={() => filterStatus(value)}
+            >
+              {statusData.image}
+              <h1 className='text-xs'>{statusData.label}</h1>
+              <h1 className='text-xs '>
+                {' '}
+                <span className='truncate'>{statusData.shipCount}</span> {'>'}
+              </h1>
+            </div>
+          )
+        }
+      })}
+    </>
+  )
+}
+
+const getStatusLabel = (device, status, shipments) => {
+  let images = null
+  switch (status) {
+    case 'pending':
+      if (device === 'desktop') {
+        images = (
+          <div className='bg-red-100 border border-red-200 rounded-sm p-2 w-20 h-[39px] mb-2'>
+            <div>
+              <ImageNext
+                src='/images/BOX(1).svg'
+                width={25}
+                height={20}
+                style={{ stroke: 'red' }}
+              />
+            </div>
+          </div>
+        )
+      } else {
+        images = (
+          <div>
+            <ImageNext src='/images/BOX(1).svg' width={15} height={20} />
+          </div>
+        )
+      }
+      return {
+        label: 'Pending',
+        shipCount: shipments?.summary?.pendingCount,
+        image: images
+      }
+    case 'shipment':
+      if (device === 'desktop') {
+        images = (
+          <div className='bg-yellow-100 border border-yellow-200 rounded-sm p-1 w-20 mb-2'>
+            <div>
+              <ImageNext src='/images/BOX_DELIVER_(1).svg' width={30} height={20} />
+            </div>
+          </div>
+        )
+      } else {
+        images = (
+          <div>
+            <ImageNext src='/images/BOX_DELIVER_(1).svg' width={18} height={20} />
+          </div>
+        )
+      }
+      return {
+        label: 'Pengiriman',
+        shipCount: shipments?.summary?.shipmentCount,
+        image: images
+      }
+    case 'completed':
+      if (device === 'desktop') {
+        images = (
+          <div className='bg-green-100 border border-green-200 rounded-sm p-1 w-20 mb-2'>
+            <div>
+              <ImageNext
+                src='/images/open-box(1).svg'
+                width={30}
+                height={20}
+                className='stroke-orange-600'
+              />
+            </div>
+          </div>
+        )
+      } else {
+        images = (
+          <div>
+            <ImageNext src='/images/open-box(1).svg' width={16} height={20} />
+          </div>
+        )
+      }
+      return {
+        label: 'Pesanan Tiba',
+        shipCount: shipments?.summary?.completedCount,
+        image: images
+      }
+    default:
+      return 'Status Tidak Dikenal'
+  }
+}
+
 export default Shipments
diff --git a/src/lib/treckingAwb/component/Manifest.jsx b/src/lib/treckingAwb/component/Manifest.jsx
index 185a9d55..cf2fa4ed 100644
--- a/src/lib/treckingAwb/component/Manifest.jsx
+++ b/src/lib/treckingAwb/component/Manifest.jsx
@@ -5,6 +5,7 @@ import { getAuth } from '@/core/utils/auth'
 import { useEffect, useState } from 'react'
 import { toast } from 'react-hot-toast'
 import ImageNext from 'next/image'
+import { list } from 'postcss'
 
 const Manifest = ({ idAWB, closePopup }) => {
   const [manifests, setManifests] = useState(null)
@@ -84,14 +85,19 @@ const Manifest = ({ idAWB, closePopup }) => {
         >
           <div className='flex justify-between items-center mb-5'>
             <h1 className='text-body-1'>Status Pesanan</h1>
-            {manifests?.delivered && (
+            {manifests?.status === 'completed' && (
               <div className='bg-green-100 p-2 rounded '>
                 <p className='text-green-600 text-sm'>Pesanan Tiba</p>
               </div>
             )}
-            {!manifests?.delivered && (
+            {manifests?.status === 'shipment' && (
+              <div className='bg-yellow-100 p-2 rounded '>
+                <p className='text-yellow-600 text-sm'>Sedang Dikirim</p>
+              </div>
+            )}
+            {manifests?.status === 'pending' && (
               <div className='bg-red-100 p-2 rounded '>
-                <p className='text-red-600 text-sm'>Sedang Dikirim</p>
+                <p className='text-red-600 text-sm'>Pending</p>
               </div>
             )}
           </div>
@@ -152,7 +158,9 @@ const Manifest = ({ idAWB, closePopup }) => {
                     )}
                     {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'} `}
+                        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'
+                        } `}
                       />
                     )}