Update with chakra UI theme

7 files changed, 199 insertions, 261 deletions

diff --git a/src/lib/product/components/Product/ColumnsSLA.jsx b/src/lib/product/components/Product/ColumnsSLA.jsx
index 33da703a..e5296f96 100644
--- a/src/lib/product/components/Product/ColumnsSLA.jsx
+++ b/src/lib/product/components/Product/ColumnsSLA.jsx
@@ -1,8 +1,9 @@
 import odooApi from '@/core/api/odooApi'
 import { createSlug } from '@/core/utils/slug'
 import whatsappUrl from '@/core/utils/whatsappUrl'
-import { Button, Spinner } from 'flowbite-react'
-import { memo, useEffect, useState } from 'react'
+import { Box, Skeleton, Tooltip } from '@chakra-ui/react'
+import { Info } from 'lucide-react'
+import { memo } from 'react'
 import { useQuery } from 'react-query'
 
 const ColumnSLA = ({ variant, product }) => {
@@ -12,67 +13,35 @@ const ColumnSLA = ({ variant, product }) => {
   return (
     <>
       <td>
-        {dataSLA.isFetching ? (
-          <div className='text-center'>
-            <Spinner aria-label='Center-aligned spinner example' />
-          </div>
-        ) : dataSLA?.data?.qty > 0 ? (
-          dataSLA?.data?.qty
-        ) : (
-          <a
-            href={whatsappUrl('product', {
-              name: variant.name,
-              manufacture: product.manufacture?.name,
-              url: createSlug('/shop/product/', product.name, product.id, true)
-            })}
-            className='text-danger-500 font-medium'
-            target='_blank'
-            rel='noreferrer noopener'
-          >
-            Tanya Admin
-          </a>
-        )}
+        <Skeleton isLoaded={!dataSLA.isFetching} w='full'>
+          {dataSLA?.data?.qty > 0 ? (
+            dataSLA?.data?.qty
+          ) : (
+            <a
+              href={whatsappUrl('product', {
+                name: variant.name,
+                manufacture: product.manufacture?.name,
+                url: createSlug('/shop/product/', product.name, product.id, true)
+              })}
+              className='text-danger-500 font-medium'
+              target='_blank'
+              rel='noreferrer noopener'
+            >
+              Tanya Admin
+            </a>
+          )}
+        </Skeleton>
       </td>
+
       <td className='flex justify-center'>
-        {dataSLA.isFetching ? (
-          <Button color='gray'>
-            <Spinner aria-label='Alternate spinner button example' />
-            <span className='pl-3'>Loading...</span>
-          </Button>
-        ) : dataSLA?.data?.slaDate != '-' ? (
-          <button
-            type='button'
-            title={`Masa Persiapan Barang ${dataSLA?.data?.slaDate}`}
-            className={`flex gap-x-1 items-center p-2 rounded-lg w-full ${
-              dataSLA?.data?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light'
-            }`}
-          >
-            <div
-              className={`flex-1 text-caption-1  ${
-                dataSLA?.data?.slaDate === 'indent' ? 'text-white' : ''
-              }`}
-            >
+        <Skeleton isLoaded={!dataSLA.isFetching} w='75%'>
+          <Tooltip placement='top' label={`Masa Persiapan Barang ${dataSLA?.data?.slaDate}`}>
+            <Box className='border border-gray_r-7 rounded-md p-2 flex justify-center items-center gap-x-2'>
               {dataSLA?.data?.slaDate}
-            </div>
-            <div className='flex-end'>
-              <svg
-                aria-hidden='true'
-                fill='none'
-                stroke='currentColor'
-                stroke-width='1.5'
-                className={`w-7 h-7 ${dataSLA?.data?.slaDate === 'indent' ? 'text-white' : ''}`}
-              >
-                <path
-                  d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z'
-                  stroke-linecap='round'
-                  stroke-linejoin='round'
-                ></path>
-              </svg>
-            </div>
-          </button>
-        ) : (
-          '-'
-        )}
+              <Info size={16} />
+            </Box>
+          </Tooltip>
+        </Skeleton>
       </td>
     </>
   )
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 6da289bc..5cc35df7 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -15,7 +15,6 @@ import ProductCard from '../ProductCard'
 import productSimilarApi from '../../api/productSimilarApi'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import odooApi from '@/core/api/odooApi'
-import { Button, Spinner } from 'flowbite-react'
 import PromotionType from '@/lib/promotinProgram/components/PromotionType'
 import useAuth from '@/core/hooks/useAuth'
 import ImageNext from 'next/image'
@@ -23,6 +22,8 @@ import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
 import { LazyLoadComponent } from 'react-lazy-load-image-component'
 import ColumnsSLA from './ColumnsSLA'
 import { useProductCartContext } from '@/contexts/ProductCartContext'
+import { Box, Skeleton, Tooltip } from '@chakra-ui/react'
+import { Info } from 'lucide-react'
 
 const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -40,7 +41,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
   const [selectVariantPromoActive, setSelectVariantPromoActive] = useState(null)
   const [backgorundFlashSale, setBackgorundFlashSale] = useState(null)
 
-  const {setRefreshCart , refreshCart} = useProductCartContext()
+  const { setRefreshCart, refreshCart } = useProductCartContext()
 
   const getLowestPrice = useCallback(() => {
     const prices = product.variants.map((variant) => variant.price)
@@ -256,16 +257,16 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
               <h1 className='text-title-md leading-10 font-medium'>{product?.name}</h1>
               <div className='mt-10'>
                 <div className='flex p-3'>
-                  <div className='w-1/4 text-gray_r-12/70'>Nomor SKU</div>
-                  <div className='w-3/4'>SKU-{product.id}</div>
+                  <div className='w-4/12 text-gray_r-12/70'>Nomor SKU</div>
+                  <div className='w-8/12'>SKU-{product.id}</div>
                 </div>
                 <div className='flex p-3 bg-gray_r-4'>
-                  <div className='w-1/4 text-gray_r-12/70'>Part Number</div>
-                  <div className='w-3/4'>{product.code || '-'}</div>
+                  <div className='w-4/12 text-gray_r-12/70'>Part Number</div>
+                  <div className='w-8/12'>{product.code || '-'}</div>
                 </div>
                 <div className='flex p-3'>
-                  <div className='w-1/4 text-gray_r-12/70'>Manufacture</div>
-                  <div className='w-3/4'>
+                  <div className='w-4/12 text-gray_r-12/70'>Manufacture</div>
+                  <div className='w-8/12'>
                     {product.manufacture?.name ? (
                       <Link
                         href={createSlug(
@@ -282,9 +283,9 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                   </div>
                 </div>
                 <div className='flex p-3 items-center bg-gray_r-4'>
-                  <div className='w-1/4 text-gray_r-12/70'>Persiapan Barang</div>
-                  <div className='w-3/4'>
-                    {product.variants.length > 1 ? (
+                  <div className='w-4/12 text-gray_r-12/70'>Persiapan Barang</div>
+                  <div className='w-8/12'>
+                    {product.variants.length > 1 && (
                       <button
                         type='button'
                         onClick={goToVariantSection}
@@ -292,62 +293,32 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                       >
                         <span className='text-red-600 text-sm'>Lihat Selengkapnya</span>
                       </button>
-                    ) : product.variants[0].sla ? (
-                      product.variants[0].sla?.slaDate != '-' ? (
-                        <button
-                          type='button'
-                          title={`Masa Persiapan Barang ${product.variants[0].sla?.slaDate}`}
-                          className={`flex gap-x-1 items-center p-2 rounded-lg w-auto ${
-                            product.variants[0].sla?.slaDate === 'indent'
-                              ? 'bg-indigo-900'
-                              : 'btn-light'
-                          }`}
-                        >
-                          <div
-                            className={`flex-1 text-caption-1  ${
-                              product.variants[0].sla?.slaDate === 'indent' ? 'text-white' : ''
-                            }`}
+                    )}
+
+                    {product.variants.length === 1 && (
+                      <>
+                        {!product.variants[0]?.sla && <Skeleton width='20%' height='16px' />}
+                        {product.variants[0]?.sla && (
+                          <Tooltip
+                            placement='top'
+                            label={`Masa Persiapan Barang ${product.variants[0]?.sla?.slaDate}`}
                           >
-                            {product.variants[0].sla?.slaDate}
-                          </div>
-                          <div className='flex-end'>
-                            <svg
-                              aria-hidden='true'
-                              fill='none'
-                              stroke='currentColor'
-                              stroke-width='1.5'
-                              className={`w-7 h-7 ${
-                                product.variants[0].sla?.slaDate === 'indent' ? 'text-white' : ''
-                              }`}
-                            >
-                              <path
-                                d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z'
-                                stroke-linecap='round'
-                                stroke-linejoin='round'
-                              ></path>
-                            </svg>
-                          </div>
-                        </button>
-                      ) : (
-                        '-'
-                      )
-                    ) : (
-                      <Button color='gray'>
-                        <Spinner aria-label='Alternate spinner button example' />
-                        <span className='pl-3'>Loading...</span>
-                      </Button>
+                            <Box className='w-fit flex items-center gap-x-2'>
+                              {product.variants[0]?.sla?.slaDate}
+                              <Info size={16} />
+                            </Box>
+                          </Tooltip>
+                        )}
+                      </>
                     )}
                   </div>
                 </div>
+
                 {product.variants.length === 1 && (
                   <div className='flex p-3 '>
-                    <div className='w-1/4 text-gray_r-12/70'>Stock</div>
-                    <div className='w-3/4'>
-                      {isLoadingSLA && (
-                        <div className=''>
-                          <Spinner aria-label='Center-aligned spinner example' />
-                        </div>
-                      )}
+                    <div className='w-4/12 text-gray_r-12/70'>Stock</div>
+                    <div className='w-8/12'>
+                      {!product.variants[0]?.sla && <Skeleton width='10%' height='16px' />}
                       {product?.variants[0].sla?.qty > 0 && (
                         <span>{product?.variants[0].sla?.qty}</span>
                       )}
@@ -366,9 +337,10 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                     </div>
                   </div>
                 )}
+
                 <div className={`flex p-3 ${product.variants.length > 1 ? '' : 'bg-gray_r-4'} `}>
-                  <div className='w-1/4 text-gray_r-12/70'>Berat Barang</div>
-                  <div className='w-3/4'>
+                  <div className='w-4/12 text-gray_r-12/70'>Berat Barang</div>
+                  <div className='w-8/12'>
                     {product?.weight > 0 && <span>{product?.weight} KG</span>}
                     {product?.weight == 0 && (
                       <a
diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx
index 3ed68ba3..d64e70c2 100644
--- a/src/lib/product/components/Product/ProductDesktopVariant.jsx
+++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx
@@ -16,8 +16,9 @@ import productSimilarApi from '../../api/productSimilarApi'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import useAuth from '@/core/hooks/useAuth'
 import odooApi from '@/core/api/odooApi'
-import { Button, Spinner } from 'flowbite-react'
 import { useProductCartContext } from '@/contexts/ProductCartContext'
+import { Box, Skeleton, Tooltip } from '@chakra-ui/react'
+import { Info } from 'lucide-react'
 
 const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant }) => {
   const router = useRouter()
@@ -149,16 +150,16 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant })
               <h1 className='text-title-md leading-10 font-medium'>{product?.name}</h1>
               <div className='mt-10'>
                 <div className='flex p-3'>
-                  <div className='w-1/4 text-gray_r-12/70'>Nomor SKU</div>
-                  <div className='w-3/4'>SKU-{product.id}</div>
+                  <div className='w-4/12 text-gray_r-12/70'>Nomor SKU</div>
+                  <div className='w-8/12'>SKU-{product.id}</div>
                 </div>
                 <div className='flex p-3 bg-gray_r-4'>
-                  <div className='w-1/4 text-gray_r-12/70'>Part Number</div>
-                  <div className='w-3/4'>{product.code || '-'}</div>
+                  <div className='w-4/12 text-gray_r-12/70'>Part Number</div>
+                  <div className='w-8/12'>{product.code || '-'}</div>
                 </div>
                 <div className='flex p-3'>
-                  <div className='w-1/4 text-gray_r-12/70'>Manufacture</div>
-                  <div className='w-3/4'>
+                  <div className='w-4/12 text-gray_r-12/70'>Manufacture</div>
+                  <div className='w-8/12'>
                     {product.manufacture?.name ? (
                       <Link
                         href={createSlug(
@@ -174,62 +175,29 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant })
                     )}
                   </div>
                 </div>
+
                 <div className='flex p-3 items-center bg-gray_r-4'>
-                  <div className='w-1/4 text-gray_r-12/70'>Persiapan Barang</div>
-                  <div className='w-3/4'>
-                    {product.sla ? (
-                      product.sla?.slaDate != '-' ? (
-                        <button
-                          type='button'
-                          title={`Masa Persiapan Barang ${product.sla?.slaDate}`}
-                          className={`flex gap-x-1 items-center p-2 rounded-lg w-auto ${
-                            product.sla?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light'
-                          }`}
-                        >
-                          <div
-                            className={`flex-1 text-caption-1  ${
-                              product.sla?.slaDate === 'indent' ? 'text-white' : ''
-                            }`}
-                          >
-                            {product.sla?.slaDate}
-                          </div>
-                          <div className='flex-end'>
-                            <svg
-                              aria-hidden='true'
-                              fill='none'
-                              stroke='currentColor'
-                              stroke-width='1.5'
-                              className={`w-7 h-7 ${
-                                product.sla?.slaDate === 'indent' ? 'text-white' : ''
-                              }`}
-                            >
-                              <path
-                                d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z'
-                                stroke-linecap='round'
-                                stroke-linejoin='round'
-                              ></path>
-                            </svg>
-                          </div>
-                        </button>
-                      ) : (
-                        '-'
-                      )
-                    ) : (
-                      <Button color='gray'>
-                        <Spinner aria-label='Alternate spinner button example' />
-                        <span className='pl-3'>Loading...</span>
-                      </Button>
+                  <div className='w-4/12 text-gray_r-12/70'>Persiapan Barang</div>
+                  <div className='w-8/12'>
+                    {!product?.sla && <Skeleton width='20%' height='16px' />}
+                    {product?.sla && (
+                      <Tooltip
+                        placement='top'
+                        label={`Masa Persiapan Barang ${product?.sla?.slaDate}`}
+                      >
+                        <Box className='w-fit flex items-center gap-x-2'>
+                          {product?.sla?.slaDate}
+                          <Info size={16} />
+                        </Box>
+                      </Tooltip>
                     )}
                   </div>
                 </div>
+
                 <div className='flex p-3'>
-                  <div className='w-1/4 text-gray_r-12/70'>Stock</div>
-                  <div className='w-3/4'>
-                    {isLoadingSLA && (
-                      <div className=''>
-                        <Spinner aria-label='Center-aligned spinner example' />
-                      </div>
-                    )}
+                  <div className='w-4/12 text-gray_r-12/70'>Stock</div>
+                  <div className='w-8/12'>
+                    {!product?.sla && <Skeleton width='10%' height='16px' />}
                     {product?.sla?.qty > 0 && <span>{product?.sla?.qty}</span>}
                     {product?.sla?.qty == 0 && (
                       <a
@@ -245,8 +213,8 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant })
                   </div>
                 </div>
                 <div className='flex p-3 bg-gray_r-4'>
-                  <div className='w-1/4 text-gray_r-12/70'>Berat Barang</div>
-                  <div className='w-3/4'>
+                  <div className='w-4/12 text-gray_r-12/70'>Berat Barang</div>
+                  <div className='w-8/12'>
                     {product?.weight > 0 && <span>{product?.weight} KG</span>}
                     {product?.weight == 0 && (
                       <a
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 6b0b27a5..12c43727 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -17,7 +17,6 @@ import whatsappUrl from '@/core/utils/whatsappUrl'
 import PromotionType from '@/lib/promotinProgram/components/PromotionType'
 import { gtagAddToCart } from '@/core/utils/googleTag'
 import odooApi from '@/core/api/odooApi'
-import { Button, Spinner } from 'flowbite-react'
 import ImageNext from 'next/image'
 import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
 
diff --git a/src/lib/product/components/Product/ProductMobileVariant.jsx b/src/lib/product/components/Product/ProductMobileVariant.jsx
index e0ba90c3..d0c209cc 100644
--- a/src/lib/product/components/Product/ProductMobileVariant.jsx
+++ b/src/lib/product/components/Product/ProductMobileVariant.jsx
@@ -16,7 +16,7 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import { gtagAddToCart } from '@/core/utils/googleTag'
 import odooApi from '@/core/api/odooApi'
-import { Button, Spinner } from 'flowbite-react'
+import { Skeleton } from '@chakra-ui/react'
 
 const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -89,7 +89,7 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
       quantity,
       programLineId: null,
       selected: true,
-      source : 'buy'
+      source: 'buy'
     })
     router.push(`/shop/checkout?source=buy`)
   }
@@ -230,10 +230,7 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
           <SpecificationContent label='Ketersediaan'>
             <span>
               {isLoadingSLA ? (
-                <Button color='gray'>
-                  <Spinner aria-label='Alternate spinner button example' />
-                  <span className='pl-3'>Loading...</span>
-                </Button>
+                <Skeleton width='100px' height='full' />
               ) : product?.sla?.slaDate != '-' ? (
                 <button
                   type='button'
@@ -267,7 +264,7 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
                     </svg>
                   </div>
                 </button>
-              ): (
+              ) : (
                 '-'
               )}
             </span>
diff --git a/src/lib/product/components/ProductFilterDesktop.jsx b/src/lib/product/components/ProductFilterDesktop.jsx
index ce6c12ed..b64349c7 100644
--- a/src/lib/product/components/ProductFilterDesktop.jsx
+++ b/src/lib/product/components/ProductFilterDesktop.jsx
@@ -2,7 +2,21 @@ import { useRouter } from 'next/router'
 import { useState } from 'react'
 import _ from 'lodash'
 import { toQuery } from 'lodash-contrib'
-import { Accordion, Checkbox, Label, TextInput } from 'flowbite-react'
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  Button,
+  Checkbox,
+  Input,
+  InputGroup,
+  InputLeftAddon,
+  Stack,
+  VStack
+} from '@chakra-ui/react'
 
 const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = null }) => {
   const router = useRouter()
@@ -13,7 +27,7 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
   const [priceFrom, setPriceFrom] = useState(query?.priceFrom)
   const [priceTo, setPriceTo] = useState(query?.priceTo)
 
-  const handleCategorysChange = (event) => {
+  const handleCategoriesChange = (event) => {
     const value = event.target.value
     const isChecked = event.target.checked
     if (isChecked) {
@@ -48,80 +62,95 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
 
   return (
     <>
-      <Accordion flush={true} alwaysOpen={true}>
-        <Accordion.Panel>
-          <Accordion.Title>Kategori</Accordion.Title>
-          <Accordion.Content className='overflow-auto max-h-[200px]'>
-            <div className='flex flex-col gap-4 scroll-snap' id='checkbox'>
+      <Accordion defaultIndex={[0]} allowMultiple>
+        <AccordionItem>
+          <AccordionButton padding={[2, 4]}>
+            <Box as='span' flex='1' textAlign='left' fontWeight='semibold'>
+              Brand
+            </Box>
+            <AccordionIcon />
+          </AccordionButton>
+
+          <AccordionPanel>
+            <Stack gap={3} direction='column' maxH={'240px'} overflow='auto'>
+              {brands.map((brand, index) => (
+                <div className='flex items-center gap-2' key={index}>
+                  <Checkbox
+                    isChecked={brandValues.includes(brand)}
+                    onChange={handleBrandsChange}
+                    value={brand}
+                    size='md'
+                  >
+                    {brand}
+                  </Checkbox>
+                </div>
+              ))}
+            </Stack>
+          </AccordionPanel>
+        </AccordionItem>
+
+        <AccordionItem>
+          <AccordionButton padding={[2, 4]}>
+            <Box as='span' flex='1' textAlign='left' fontWeight='semibold'>
+              Kategori
+            </Box>
+            <AccordionIcon />
+          </AccordionButton>
+
+          <AccordionPanel>
+            <Stack gap={3} direction='column' maxH={'240px'} overflow='auto'>
               {categories.map((category, index) => (
                 <div className='flex items-center gap-2' key={index}>
                   <Checkbox
-                    id={`categoryOption${index}`}
-                    checked={categoryValues.includes(category)}
-                    onChange={handleCategorysChange}
+                    isChecked={categoryValues.includes(category)}
+                    onChange={handleCategoriesChange}
                     value={category}
-                  />
-                  <Label htmlFor={`categoryOption${index}`} className='dark:text-gray_r-12/80'>
+                    size='md'
+                  >
                     {category}
-                  </Label>
+                  </Checkbox>
                 </div>
               ))}
-            </div>
-          </Accordion.Content>
-        </Accordion.Panel>
-        <Accordion.Panel>
-          {!defaultBrand && (
-            <>
-              <Accordion.Title>Brand</Accordion.Title>
-              <Accordion.Content className='overflow-auto max-h-[200px]'>
-                <div className='flex flex-col gap-4 scroll-snap' id='checkbox'>
-                  {brands.map((brand, index) => (
-                    <div className='flex items-center gap-2' key={index}>
-                      <Checkbox
-                        id={`brandOption${index}`}
-                        checked={brandValues.includes(brand)}
-                        onChange={handleBrandsChange}
-                        value={brand}
-                      />
-                      <Label htmlFor={`brandOption${index}`} className='dark:text-gray_r-12/80'>
-                        {brand}
-                      </Label>
-                    </div>
-                  ))}
-                </div>
-              </Accordion.Content>
-            </>
-          )}
-        </Accordion.Panel>
-        <Accordion.Panel>
-          <Accordion.Title>Harga</Accordion.Title>
-          <Accordion.Content>
-            <div className='mb-3'>
-              <TextInput
-                placeholder='Harga Minimum'
-                addon='Rp'
-                type='number'
-                value={priceFrom}
-                onChange={(e) => setPriceFrom(e.target.value)}
-              />
-            </div>
-            <div className='mb-3'>
-              <TextInput
-                placeholder='Harga Maximum'
-                addon='Rp'
-                type='number'
-                value={priceTo}
-                onChange={(e) => setPriceTo(e.target.value)}
-              />
-            </div>
-          </Accordion.Content>
-        </Accordion.Panel>
+            </Stack>
+          </AccordionPanel>
+        </AccordionItem>
+
+        <AccordionItem>
+          <AccordionButton padding={[2, 4]}>
+            <Box as='span' flex='1' textAlign='left' fontWeight='semibold'>
+              Harga
+            </Box>
+            <AccordionIcon />
+          </AccordionButton>
+
+          <AccordionPanel paddingY={4}>
+            <VStack gap={4}>
+              <InputGroup>
+                <InputLeftAddon>Rp</InputLeftAddon>
+                <Input
+                  type='number'
+                  placeholder='Harga minimum'
+                  value={priceFrom}
+                  onChange={(e) => setPriceFrom(e.target.value)}
+                />
+              </InputGroup>
+              <InputGroup>
+                <InputLeftAddon>Rp</InputLeftAddon>
+                <Input
+                  type='number'
+                  placeholder='Harga maximum'
+                  value={priceTo}
+                  onChange={(e) => setPriceTo(e.target.value)}
+                />
+              </InputGroup>
+            </VStack>
+          </AccordionPanel>
+        </AccordionItem>
       </Accordion>
-      <div className='p-5'>
-        <button type='button' className='btn-solid-red w-full mt-6' onClick={handleSubmit}>
-          Terapkan
-        </button>
-      </div>
+
+      <Button className='w-full mt-6' colorScheme='red' onClick={handleSubmit}>
+        Terapkan
+      </Button>
     </>
   )
 }
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index ae9618d2..df9aa91b 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -39,9 +39,11 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
         const oddIndexSuggestions = response.data.spellcheck.suggestions.filter(
           (_, index) => index % 2 === 1
         )
+
         const oddIndexCollations = response.data.spellcheck.collations.filter(
           (_, index) => index % 2 === 1
         )
+
         const dataSpellings = oddIndexSuggestions.reduce((acc, curr) => {
           oddIndexCollations.forEach((collation) => {
             acc.push(collation.collationQuery)
@@ -52,7 +54,9 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
           return acc
         }, [])
 
-        setQ(dataSpellings[0])
+        if (dataSpellings.length > 0) {
+          setQ(dataSpellings[0])
+        }
 
         setSpellings(dataSpellings)
       })
@@ -183,7 +187,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
               defaultBrand={defaultBrand}
             />
           </div>
-          <div className='w-9/12 p-3'>
+          <div className='w-9/12 pl-6'>
             <h1 className='text-2xl mb-2 font-semibold'>Hasil Pencarian</h1>
             <div className='flex justify-between items-center mb-2'>
               <div className='mb-2 leading-6 text-gray_r-11'>