prettier

12 files changed, 292 insertions, 316 deletions

diff --git a/src/lib/product/api/productApi.js b/src/lib/product/api/productApi.js
index a543f086..6fe8901e 100644
--- a/src/lib/product/api/productApi.js
+++ b/src/lib/product/api/productApi.js
@@ -1,8 +1,8 @@
-import odooApi from "@/core/api/odooApi"
+import odooApi from '@/core/api/odooApi'
 
 const productApi = async ({ id }) => {
   const dataProduct = await odooApi('GET', `/api/v1/product/${id}`)
   return dataProduct
 }
 
-export default productApi
\ No newline at end of file
+export default productApi
diff --git a/src/lib/product/api/productSearchApi.js b/src/lib/product/api/productSearchApi.js
index 86b2914f..b9acd94b 100644
--- a/src/lib/product/api/productSearchApi.js
+++ b/src/lib/product/api/productSearchApi.js
@@ -1,9 +1,9 @@
-import _ from "lodash-contrib"
-import axios from "axios"
+import _ from 'lodash-contrib'
+import axios from 'axios'
 
 const productSearchApi = async ({ query }) => {
   const dataProductSearch = await axios(`${process.env.SELF_HOST}/api/shop/search?${query}`)
   return dataProductSearch.data
 }
 
-export default productSearchApi
\ No newline at end of file
+export default productSearchApi
diff --git a/src/lib/product/api/productSimilarApi.js b/src/lib/product/api/productSimilarApi.js
index 1449d9ca..7142fab4 100644
--- a/src/lib/product/api/productSimilarApi.js
+++ b/src/lib/product/api/productSimilarApi.js
@@ -1,8 +1,10 @@
-import axios from "axios"
+import axios from 'axios'
 
 const productSimilarApi = async ({ query }) => {
-  const dataProductSimilar = await axios(`${process.env.SELF_HOST}/api/shop/search?q=${query}&page=1&orderBy=popular`)
+  const dataProductSimilar = await axios(
+    `${process.env.SELF_HOST}/api/shop/search?q=${query}&page=1&orderBy=popular`
+  )
   return dataProductSimilar.data.response
 }
 
-export default productSimilarApi
\ No newline at end of file
+export default productSimilarApi
diff --git a/src/lib/product/components/Product.jsx b/src/lib/product/components/Product.jsx
index 92f4e37d..2181c38e 100644
--- a/src/lib/product/components/Product.jsx
+++ b/src/lib/product/components/Product.jsx
@@ -1,41 +1,40 @@
-import Badge from "@/core/components/elements/Badge/Badge"
-import Divider from "@/core/components/elements/Divider/Divider"
-import Image from "@/core/components/elements/Image/Image"
-import Link from "@/core/components/elements/Link/Link"
-import currencyFormat from "@/core/utils/currencyFormat"
-import { useEffect, useState } from "react"
-import Select from "react-select"
-import ProductSimilar from "./ProductSimilar"
-import LazyLoad from "react-lazy-load"
-import { toast } from "react-hot-toast"
-import { updateItemCart } from "@/core/utils/cart"
+import Badge from '@/core/components/elements/Badge/Badge'
+import Divider from '@/core/components/elements/Divider/Divider'
+import Image from '@/core/components/elements/Image/Image'
+import Link from '@/core/components/elements/Link/Link'
+import currencyFormat from '@/core/utils/currencyFormat'
+import { useEffect, useState } from 'react'
+import Select from 'react-select'
+import ProductSimilar from './ProductSimilar'
+import LazyLoad from 'react-lazy-load'
+import { toast } from 'react-hot-toast'
+import { updateItemCart } from '@/core/utils/cart'
 
 const informationTabOptions = [
   { value: 'specification', label: 'Spesifikasi' },
   { value: 'description', label: 'Deskripsi' },
-  { value: 'important', label: 'Info Penting' },
+  { value: 'important', label: 'Info Penting' }
 ]
 
 const Product = ({ product }) => {
-  const [ quantity, setQuantity ] = useState('1')
-  const [ selectedVariant, setSelectedVariant ] = useState(null)
-  const [ informationTab, setInformationTab ] = useState(null)
+  const [quantity, setQuantity] = useState('1')
+  const [selectedVariant, setSelectedVariant] = useState(null)
+  const [informationTab, setInformationTab] = useState(null)
 
-  const [ activeVariant, setActiveVariant ] = useState({
+  const [activeVariant, setActiveVariant] = useState({
     id: product.id,
     code: product.code,
     name: product.name,
     price: product.lowestPrice,
     stock: product.stockTotal,
-    weight: product.weight,
+    weight: product.weight
   })
-  
+
   const variantOptions = product.variants?.map((variant) => ({
     value: variant.id,
-    label: 
-      (variant.code ? `[${variant.code}] ` : '')
-      +
-      (variant.attributes.length > 0 ? variant.attributes.join(', ') : product.name) 
+    label:
+      (variant.code ? `[${variant.code}] ` : '') +
+      (variant.attributes.length > 0 ? variant.attributes.join(', ') : product.name)
   }))
 
   useEffect(() => {
@@ -46,9 +45,10 @@ const Product = ({ product }) => {
 
   useEffect(() => {
     if (selectedVariant) {
-      const variant = product.variants.find(variant => variant.id == selectedVariant.value)
-      const variantAttributes = variant.attributes.length > 0 ? ' - ' + variant.attributes.join(', ') : ''
-      
+      const variant = product.variants.find((variant) => variant.id == selectedVariant.value)
+      const variantAttributes =
+        variant.attributes.length > 0 ? ' - ' + variant.attributes.join(', ') : ''
+
       setActiveVariant({
         id: variant.id,
         code: variant.code,
@@ -87,76 +87,69 @@ const Product = ({ product }) => {
       <Image
         src={product.image}
         alt={product.name}
-        className="h-72 object-contain object-center w-full border-b border-gray_r-4"
+        className='h-72 object-contain object-center w-full border-b border-gray_r-4'
       />
 
-      <div className="p-4">
-        <Link href="/" className="mb-2">{ product.manufacture?.name }</Link>
-        <h1 className="leading-6 font-medium">
-          {activeVariant?.name}
-        </h1>
-        { activeVariant?.price?.discountPercentage > 0 && (
-          <div className="flex gap-x-1 items-center mt-2">
-            <div className="text-gray_r-11 line-through text-caption-1">
+      <div className='p-4'>
+        <Link href='/' className='mb-2'>
+          {product.manufacture?.name}
+        </Link>
+        <h1 className='leading-6 font-medium'>{activeVariant?.name}</h1>
+        {activeVariant?.price?.discountPercentage > 0 && (
+          <div className='flex gap-x-1 items-center mt-2'>
+            <div className='text-gray_r-11 line-through text-caption-1'>
               {currencyFormat(activeVariant?.price?.price)}
             </div>
-            <Badge type="solid-red">
-              {activeVariant?.price?.discountPercentage}%
-            </Badge>
+            <Badge type='solid-red'>{activeVariant?.price?.discountPercentage}%</Badge>
           </div>
-        ) }
-        <h3 className="text-red_r-11 font-semibold mt-1">
-          { activeVariant?.price?.priceDiscount > 0 ? currencyFormat(activeVariant?.price?.priceDiscount) : (
-            <span className="text-gray_r-11 leading-6 font-normal">
+        )}
+        <h3 className='text-red_r-11 font-semibold mt-1'>
+          {activeVariant?.price?.priceDiscount > 0 ? (
+            currencyFormat(activeVariant?.price?.priceDiscount)
+          ) : (
+            <span className='text-gray_r-11 leading-6 font-normal'>
               Hubungi kami untuk dapatkan harga terbaik,&nbsp;
-              <a href="https://wa.me/" className="text-red_r-11 underline">klik disini</a>
+              <a href='https://wa.me/' className='text-red_r-11 underline'>
+                klik disini
+              </a>
             </span>
-          ) }
+          )}
         </h3>
       </div>
 
       <Divider />
 
-      <div className="p-4">
+      <div className='p-4'>
         <div>
-          <label className="flex justify-between">
+          <label className='flex justify-between'>
             Pilih Varian:
-            <span className="text-gray_r-11">
-              { product?.variantTotal } Varian
-            </span>
+            <span className='text-gray_r-11'>{product?.variantTotal} Varian</span>
           </label>
           <Select
-            name="variant"
-            classNamePrefix="form-select"
+            name='variant'
+            classNamePrefix='form-select'
             options={variantOptions}
-            className="mt-2"
+            className='mt-2'
             value={selectedVariant}
             onChange={(option) => setSelectedVariant(option)}
             isSearchable={product.variantTotal > 10}
           />
         </div>
-        <div className="mt-4 mb-2">Jumlah</div>
-        <div className="flex gap-x-3">
-          <div className="w-2/12">
-            <input 
-              name="quantity"
-              type="number" 
-              className="form-input" 
+        <div className='mt-4 mb-2'>Jumlah</div>
+        <div className='flex gap-x-3'>
+          <div className='w-2/12'>
+            <input
+              name='quantity'
+              type='number'
+              className='form-input'
               value={quantity}
               onChange={(e) => setQuantity(e.target.value)}
             />
           </div>
-          <button 
-            type="button"
-            className="btn-yellow flex-1"
-            onClick={handleClickCart}
-          >
+          <button type='button' className='btn-yellow flex-1' onClick={handleClickCart}>
             Keranjang
           </button>
-          <button 
-            type="button"
-            className="btn-solid-red flex-1"
-          >
+          <button type='button' className='btn-solid-red flex-1'>
             Beli
           </button>
         </div>
@@ -164,78 +157,70 @@ const Product = ({ product }) => {
 
       <Divider />
 
-      <div className="p-4">
-        <h2 className="font-semibold">Informasi Produk</h2>
-        <div className="flex gap-x-4 mt-4 mb-3">
-          { informationTabOptions.map((option) => (
-            <TabButton 
-              value={option.value} 
+      <div className='p-4'>
+        <h2 className='font-semibold'>Informasi Produk</h2>
+        <div className='flex gap-x-4 mt-4 mb-3'>
+          {informationTabOptions.map((option) => (
+            <TabButton
+              value={option.value}
               key={option.value}
               active={informationTab == option.value}
               onClick={() => setInformationTab(option.value)}
             >
               {option.label}
             </TabButton>
-          )) }
+          ))}
         </div>
 
-        <TabContent 
-          active={informationTab == 'specification'} 
-          className="rounded border border-gray_r-6 divide-y divide-gray_r-6"
+        <TabContent
+          active={informationTab == 'specification'}
+          className='rounded border border-gray_r-6 divide-y divide-gray_r-6'
         >
-          <SpecificationContent label="Jumlah Varian">
+          <SpecificationContent label='Jumlah Varian'>
             <span>{product?.variantTotal} Varian</span>
           </SpecificationContent>
-          <SpecificationContent label="Nomor SKU">
+          <SpecificationContent label='Nomor SKU'>
             <span>SKU-{product?.id}</span>
           </SpecificationContent>
-          <SpecificationContent label="Part Number">
+          <SpecificationContent label='Part Number'>
             <span>{activeVariant?.code || '-'}</span>
-          </SpecificationContent>   
-          <SpecificationContent label="Stok">
-            { activeVariant?.stock > 0 && (
-              <span className="flex gap-x-1.5">
-                <div className="badge-solid-red">Ready Stock</div>
-                <div className="badge-gray">
-                  { activeVariant?.stock > 5 ? '> 5' : '< 5' }
-                </div>
+          </SpecificationContent>
+          <SpecificationContent label='Stok'>
+            {activeVariant?.stock > 0 && (
+              <span className='flex gap-x-1.5'>
+                <div className='badge-solid-red'>Ready Stock</div>
+                <div className='badge-gray'>{activeVariant?.stock > 5 ? '> 5' : '< 5'}</div>
               </span>
-            ) }
-            { activeVariant?.stock == 0 && (
-              <a 
-                href="https://wa.me" 
-                className="text-red_r-11 font-medium"
-              >
+            )}
+            {activeVariant?.stock == 0 && (
+              <a href='https://wa.me' className='text-red_r-11 font-medium'>
                 Tanya Stok
               </a>
-            ) }
-          </SpecificationContent>   
-          <SpecificationContent label="Berat Barang">
-            { activeVariant?.weight > 0 && (
-              <span>{ activeVariant?.weight } KG</span>
-            ) }
-            { activeVariant?.weight == 0 && (
-              <a 
-                href="https://wa.me" 
-                className="text-red_r-11 font-medium"
-              >
+            )}
+          </SpecificationContent>
+          <SpecificationContent label='Berat Barang'>
+            {activeVariant?.weight > 0 && <span>{activeVariant?.weight} KG</span>}
+            {activeVariant?.weight == 0 && (
+              <a href='https://wa.me' className='text-red_r-11 font-medium'>
                 Tanya Berat
               </a>
-            ) }
-          </SpecificationContent>   
+            )}
+          </SpecificationContent>
         </TabContent>
 
         <TabContent
           active={informationTab == 'description'}
-          className="leading-6 text-gray_r-11"
-          dangerouslySetInnerHTML={{__html: (product.description != '' ? product.description : 'Belum ada deskripsi produk.')}}
+          className='leading-6 text-gray_r-11'
+          dangerouslySetInnerHTML={{
+            __html: product.description != '' ? product.description : 'Belum ada deskripsi produk.'
+          }}
         />
       </div>
 
       <Divider />
 
-      <div className="p-4">
-        <h2 className="font-semibold mb-4">Kamu Mungkin Juga Suka</h2>
+      <div className='p-4'>
+        <h2 className='font-semibold mb-4'>Kamu Mungkin Juga Suka</h2>
         <LazyLoad>
           <ProductSimilar query={product?.name.split(' ').slice(1, 3).join(' ')} />
         </LazyLoad>
@@ -247,30 +232,23 @@ const Product = ({ product }) => {
 const TabButton = ({ children, active, ...props }) => {
   const activeClassName = active ? 'text-red_r-11 underline underline-offset-4' : 'text-gray_r-11'
   return (
-    <button 
-      {...props}
-      type="button" 
-      className={`font-medium pb-1 ${activeClassName}`}
-    >
-      { children }
+    <button {...props} type='button' className={`font-medium pb-1 ${activeClassName}`}>
+      {children}
     </button>
   )
 }
 
 const TabContent = ({ children, active, className, ...props }) => (
-  <div 
-    {...props}
-    className={`${active ? 'block' : 'hidden'} ${className}`}
-  >
-    { children }
+  <div {...props} className={`${active ? 'block' : 'hidden'} ${className}`}>
+    {children}
   </div>
 )
 
 const SpecificationContent = ({ children, label }) => (
-  <div className="flex justify-between p-3">
-    <span className="text-gray_r-11">{ label }</span>
-    { children }
+  <div className='flex justify-between p-3'>
+    <span className='text-gray_r-11'>{label}</span>
+    {children}
   </div>
 )
 
-export default Product
\ No newline at end of file
+export default Product
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 9eb00ae0..8a2f1d7f 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -1,68 +1,68 @@
-import Image from "@/core/components/elements/Image/Image"
-import Link from "@/core/components/elements/Link/Link"
-import currencyFormat from "@/core/utils/currencyFormat"
-import { createSlug } from "@/core/utils/slug"
+import Image from '@/core/components/elements/Image/Image'
+import Link from '@/core/components/elements/Link/Link'
+import currencyFormat from '@/core/utils/currencyFormat'
+import { createSlug } from '@/core/utils/slug'
 
 const ProductCard = ({ product, simpleTitle }) => {
   return (
     <>
-      <div className="rounded shadow-sm border border-gray_r-4">
-        <Link 
-          href={createSlug('/shop/product/', product?.name, product?.id)} 
-          className="border-b border-gray_r-4 relative"
+      <div className='rounded shadow-sm border border-gray_r-4'>
+        <Link
+          href={createSlug('/shop/product/', product?.name, product?.id)}
+          className='border-b border-gray_r-4 relative'
         >
-          <Image 
+          <Image
             src={product?.image}
             alt={product?.name}
-            className="w-full object-contain object-center h-36"
+            className='w-full object-contain object-center h-36'
           />
-          { product.variantTotal > 1 && (
-            <div className="absolute badge-gray bottom-1.5 left-1.5">{ product.variantTotal } Varian</div>
-          ) }
+          {product.variantTotal > 1 && (
+            <div className='absolute badge-gray bottom-1.5 left-1.5'>
+              {product.variantTotal} Varian
+            </div>
+          )}
         </Link>
-        <div className="p-2 pb-3 text-caption-2 leading-5 bg-white">
-          <Link 
-            href={createSlug('/shop/brands/', product?.manufacture?.name, product?.manufacture.id)} 
-            className="mb-1"
+        <div className='p-2 pb-3 text-caption-2 leading-5 bg-white'>
+          <Link
+            href={createSlug('/shop/brands/', product?.manufacture?.name, product?.manufacture.id)}
+            className='mb-1'
           >
             {product?.manufacture?.name}
           </Link>
-          <Link 
+          <Link
             href={createSlug('/shop/product/', product?.name, product?.id)}
-            className={`font-medium mb-2 !text-gray_r-12 ${simpleTitle ? 'line-clamp-2' : 'line-clamp-3'}`}
+            className={`font-medium mb-2 !text-gray_r-12 ${
+              simpleTitle ? 'line-clamp-2' : 'line-clamp-3'
+            }`}
           >
             {product?.name}
           </Link>
-          { product?.lowestPrice?.discountPercentage > 0 && (
-            <div className="flex gap-x-1 mb-1 items-center">
-              <div className="text-gray_r-11 line-through text-[11px]">
+          {product?.lowestPrice?.discountPercentage > 0 && (
+            <div className='flex gap-x-1 mb-1 items-center'>
+              <div className='text-gray_r-11 line-through text-[11px]'>
                 {currencyFormat(product?.lowestPrice?.price)}
               </div>
-              <div className="badge-solid-red">
-                {product?.lowestPrice?.discountPercentage}%
-              </div>
+              <div className='badge-solid-red'>{product?.lowestPrice?.discountPercentage}%</div>
             </div>
-          ) }
+          )}
 
-          <div className="text-red_r-11 font-semibold mb-2">
-            { product?.lowestPrice?.priceDiscount > 0 ? currencyFormat(product?.lowestPrice?.priceDiscount) : (
-              <a href="https://wa.me/">Call for price</a>
-            ) }
+          <div className='text-red_r-11 font-semibold mb-2'>
+            {product?.lowestPrice?.priceDiscount > 0 ? (
+              currencyFormat(product?.lowestPrice?.priceDiscount)
+            ) : (
+              <a href='https://wa.me/'>Call for price</a>
+            )}
           </div>
-          { product?.stockTotal > 0 && (
-            <div className="flex gap-x-1">
-              <div className="badge-solid-red">
-                Ready Stock
-              </div>
-              <div className="badge-gray">
-                { product?.stockTotal > 5 ? '> 5' : '< 5' }
-              </div>
+          {product?.stockTotal > 0 && (
+            <div className='flex gap-x-1'>
+              <div className='badge-solid-red'>Ready Stock</div>
+              <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div>
             </div>
-          ) }
+          )}
         </div>
       </div>
     </>
   )
 }
 
-export default ProductCard
\ No newline at end of file
+export default ProductCard
diff --git a/src/lib/product/components/ProductFilter.jsx b/src/lib/product/components/ProductFilter.jsx
index 023b6a8b..d920cfb8 100644
--- a/src/lib/product/components/ProductFilter.jsx
+++ b/src/lib/product/components/ProductFilter.jsx
@@ -1,31 +1,24 @@
-import BottomPopup from "@/core/components/elements/Popup/BottomPopup"
-import { useRouter } from "next/router"
-import { useState } from "react"
-import _ from "lodash"
-import { toQuery } from "lodash-contrib"
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+import _ from 'lodash'
+import { toQuery } from 'lodash-contrib'
 
 const orderOptions = [
   { value: 'price-asc', label: 'Harga Terendah' },
   { value: 'price-desc', label: 'Harga Tertinggi' },
   { value: 'popular', label: 'Populer' },
-  { value: 'stock', label: 'Ready Stock' },
+  { value: 'stock', label: 'Ready Stock' }
 ]
 
-const ProductFilter = ({ 
-  active, 
-  close, 
-  brands, 
-  categories, 
-  prefixUrl,
-  defaultBrand = null
-}) => {
+const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBrand = null }) => {
   const router = useRouter()
   const { query } = router
-  const [ order, setOrder ] = useState(query?.orderBy)
-  const [ brand, setBrand ] = useState(query?.brand)
-  const [ category, setCategory ] = useState(query?.category)
-  const [ priceFrom, setPriceFrom ] = useState(query?.priceFrom)
-  const [ priceTo, setPriceTo ] = useState(query?.priceTo)
+  const [order, setOrder] = useState(query?.orderBy)
+  const [brand, setBrand] = useState(query?.brand)
+  const [category, setCategory] = useState(query?.category)
+  const [priceFrom, setPriceFrom] = useState(query?.priceFrom)
+  const [priceTo, setPriceTo] = useState(query?.priceTo)
 
   const handleSubmit = () => {
     let params = {
@@ -42,85 +35,79 @@ const ProductFilter = ({
   }
 
   return (
-    <BottomPopup 
-      active={active} 
-      close={close}
-      title="Filter Produk"
-    >
-      <div className="flex flex-col gap-y-4">
-        { !defaultBrand && (
+    <BottomPopup active={active} close={close} title='Filter Produk'>
+      <div className='flex flex-col gap-y-4'>
+        {!defaultBrand && (
           <div>
             <label>Brand</label>
-            <select 
-              name="brand"
-              className="form-input mt-2"
+            <select
+              name='brand'
+              className='form-input mt-2'
               value={brand}
               onChange={(e) => setBrand(e.target.value)}
             >
-              <option value="">Pilih Brand...</option>
-              { brands.map((brand, index) => (
+              <option value=''>Pilih Brand...</option>
+              {brands.map((brand, index) => (
                 <option value={brand} key={index}>
                   {brand}
                 </option>
-              )) }
+              ))}
             </select>
           </div>
-        ) }
+        )}
         <div>
           <label>Kategori</label>
-          <select 
-            name="category"
-            className="form-input mt-2"
+          <select
+            name='category'
+            className='form-input mt-2'
             value={category}
             onChange={(e) => setCategory(e.target.value)}
           >
-            <option value="">Pilih Kategori...</option>
-            { categories.map((category, index) => (
+            <option value=''>Pilih Kategori...</option>
+            {categories.map((category, index) => (
               <option value={category} key={index}>
                 {category}
               </option>
-            )) }
+            ))}
           </select>
         </div>
         <div>
           <label>Urutkan</label>
-          <div className="flex mt-2 gap-x-2 overflow-x-auto">
-            { orderOptions.map((orderOption) => (
-              <button 
+          <div className='flex mt-2 gap-x-2 overflow-x-auto'>
+            {orderOptions.map((orderOption) => (
+              <button
                 key={orderOption.value}
-                className={`btn-light px-3 font-normal flex-shrink-0 ${order == orderOption.value ? 'bg-yellow_r-10' : 'bg-transparent'}`}
+                className={`btn-light px-3 font-normal flex-shrink-0 ${
+                  order == orderOption.value ? 'bg-yellow_r-10' : 'bg-transparent'
+                }`}
                 onClick={() => setOrder(orderOption.value)}
               >
-                { orderOption.label }
+                {orderOption.label}
               </button>
-            )) }
+            ))}
           </div>
         </div>
         <div>
           <label>Harga</label>
-          <div className="flex mt-2 gap-x-4 items-center">
-            <input 
-              type="number" 
-              className="form-input" 
-              placeholder="Dari" 
+          <div className='flex mt-2 gap-x-4 items-center'>
+            <input
+              type='number'
+              className='form-input'
+              placeholder='Dari'
               value={priceFrom}
               onChange={(e) => setPriceFrom(e.target.value)}
             />
             <span>—</span>
-            <input 
-              type="number" 
-              className="form-input" 
-              placeholder="Sampai" 
+            <input
+              type='number'
+              className='form-input'
+              placeholder='Sampai'
               value={priceTo}
               onChange={(e) => setPriceTo(e.target.value)}
             />
           </div>
         </div>
-        <button 
-          type="button" 
-          className="btn-solid-red w-full mt-2"
-          onClick={handleSubmit}
-        >
+        <button type='button' className='btn-solid-red w-full mt-2' onClick={handleSubmit}>
           Terapkan Filter
         </button>
       </div>
@@ -128,4 +115,4 @@ const ProductFilter = ({
   )
 }
 
-export default ProductFilter
\ No newline at end of file
+export default ProductFilter
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index 14df9864..25d0278f 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -1,21 +1,23 @@
-import { useEffect, useState } from "react"
-import useProductSearch from "../hooks/useProductSearch"
-import ProductCard from "./ProductCard"
-import Pagination from "@/core/components/elements/Pagination/Pagination"
-import { toQuery } from "lodash-contrib"
-import _ from "lodash"
-import ProductSearchSkeleton from "./Skeleton/ProductSearchSkeleton"
-import ProductFilter from "./ProductFilter"
-import useActive from "@/core/hooks/useActive"
+import { useEffect, useState } from 'react'
+import useProductSearch from '../hooks/useProductSearch'
+import ProductCard from './ProductCard'
+import Pagination from '@/core/components/elements/Pagination/Pagination'
+import { toQuery } from 'lodash-contrib'
+import _ from 'lodash'
+import ProductSearchSkeleton from './Skeleton/ProductSearchSkeleton'
+import ProductFilter from './ProductFilter'
+import useActive from '@/core/hooks/useActive'
 
 const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   const { page = 1 } = query
   if (defaultBrand) query.brand = defaultBrand.toLowerCase()
   const { productSearch } = useProductSearch({ query })
-  const [ products, setProducts ] = useState(null)
+  const [products, setProducts] = useState(null)
   const popup = useActive()
 
-  const pageCount = Math.ceil(productSearch.data?.response.numFound / productSearch.data?.responseHeader.params.rows)
+  const pageCount = Math.ceil(
+    productSearch.data?.response.numFound / productSearch.data?.responseHeader.params.rows
+  )
   const productStart = productSearch.data?.responseHeader.params.start
   const productRows = productSearch.data?.responseHeader.params.rows
   const productFound = productSearch.data?.response.numFound
@@ -25,11 +27,13 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
       return true
     }
   })
-  const categories = productSearch.data?.facetCounts?.facetFields?.categoryNameStr?.filter((value, index) => {
-    if (index % 2 === 0) {
-      return true
+  const categories = productSearch.data?.facetCounts?.facetFields?.categoryNameStr?.filter(
+    (value, index) => {
+      if (index % 2 === 0) {
+        return true
+      }
     }
-  })
+  )
 
   useEffect(() => {
     if (!products) {
@@ -40,47 +44,55 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   if (productSearch.isLoading) {
     return <ProductSearchSkeleton />
   }
-  
+
   return (
-    <div className="p-4">
-      <h1 className="mb-2 font-semibold text-h-sm">Produk</h1>
-      
-      <div className="mb-2 leading-6 text-gray_r-11">
-        { productFound > 0 ? (
+    <div className='p-4'>
+      <h1 className='mb-2 font-semibold text-h-sm'>Produk</h1>
+
+      <div className='mb-2 leading-6 text-gray_r-11'>
+        {productFound > 0 ? (
           <>
             Menampilkan&nbsp;
             {pageCount > 1 ? (
               <>
-                {productStart + 1}-{
-                  (productStart + productRows) > productFound ? productFound : productStart + productRows
-                }
+                {productStart + 1}-
+                {productStart + productRows > productFound
+                  ? productFound
+                  : productStart + productRows}
                 &nbsp;dari&nbsp;
               </>
-            ) : ''}
-            { productFound }
-            &nbsp;produk { query.q && (<>untuk pencarian <span className="font-semibold">{ query.q }</span></>) }
+            ) : (
+              ''
+            )}
+            {productFound}
+            &nbsp;produk{' '}
+            {query.q && (
+              <>
+                untuk pencarian <span className='font-semibold'>{query.q}</span>
+              </>
+            )}
           </>
-        ) : 'Mungkin yang anda cari'}
+        ) : (
+          'Mungkin yang anda cari'
+        )}
       </div>
 
-      <button className="btn-light mb-6 py-2 px-5" onClick={popup.activate}>
+      <button className='btn-light mb-6 py-2 px-5' onClick={popup.activate}>
         Filter
       </button>
 
-      <div className="grid grid-cols-2 gap-3">
-        { products && products.map((product) => (
-          <ProductCard product={product} key={product.id} />
-        )) }
+      <div className='grid grid-cols-2 gap-3'>
+        {products && products.map((product) => <ProductCard product={product} key={product.id} />)}
       </div>
 
       <Pagination
         pageCount={pageCount}
-        currentPage={parseInt(page)} 
+        currentPage={parseInt(page)}
         url={`${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
-        className="mt-6 mb-2"
+        className='mt-6 mb-2'
       />
 
-      <ProductFilter 
+      <ProductFilter
         active={popup.active}
         close={popup.deactivate}
         brands={brands || []}
@@ -92,4 +104,4 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   )
 }
 
-export default ProductSearch
\ No newline at end of file
+export default ProductSearch
diff --git a/src/lib/product/components/ProductSimilar.jsx b/src/lib/product/components/ProductSimilar.jsx
index 89cab536..63a33089 100644
--- a/src/lib/product/components/ProductSimilar.jsx
+++ b/src/lib/product/components/ProductSimilar.jsx
@@ -1,6 +1,6 @@
-import PopularProductSkeleton from "@/lib/home/components/Skeleton/PopularProductSkeleton"
-import useProductSimilar from "../hooks/useProductSimilar"
-import ProductSlider from "./ProductSlider"
+import PopularProductSkeleton from '@/lib/home/components/Skeleton/PopularProductSkeleton'
+import useProductSimilar from '../hooks/useProductSimilar'
+import ProductSlider from './ProductSlider'
 
 const ProductSimilar = ({ query }) => {
   const { productSimilar } = useProductSimilar({ query })
@@ -12,4 +12,4 @@ const ProductSimilar = ({ query }) => {
   return <ProductSlider products={productSimilar.data} />
 }
 
-export default ProductSimilar
\ No newline at end of file
+export default ProductSimilar
diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
index 8d677547..aafd3cf1 100644
--- a/src/lib/product/components/ProductSlider.jsx
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -1,51 +1,48 @@
-import { Swiper, SwiperSlide } from "swiper/react"
-import ProductCard from "./ProductCard"
-import "swiper/css"
-import Image from "@/core/components/elements/Image/Image"
-import Link from "@/core/components/elements/Link/Link"
-import { useState } from "react"
+import { Swiper, SwiperSlide } from 'swiper/react'
+import ProductCard from './ProductCard'
+import 'swiper/css'
+import Image from '@/core/components/elements/Image/Image'
+import Link from '@/core/components/elements/Link/Link'
+import { useState } from 'react'
 
-const bannerClassName = 'absolute rounded-r top-0 left-0 h-full max-w-[52%] idt-transition border border-gray_r-6'
+const bannerClassName =
+  'absolute rounded-r top-0 left-0 h-full max-w-[52%] idt-transition border border-gray_r-6'
 
-const ProductSlider = ({ 
-  products, 
-  simpleTitle = false,
-  bannerMode = false 
-}) => {
-  const [ activeIndex, setActiveIndex ] = useState(0)
+const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) => {
+  const [activeIndex, setActiveIndex] = useState(0)
   const swiperSliderFirstMove = (swiper) => {
     setActiveIndex(swiper.activeIndex)
   }
 
   return (
     <>
-      { bannerMode && (
-        <Image 
-          src={products.banner.image} 
-          alt={products.banner.name} 
-          className={`${bannerClassName} ${activeIndex > 0 ? 'opacity-0' : 'opacity-100'}`} 
+      {bannerMode && (
+        <Image
+          src={products.banner.image}
+          alt={products.banner.name}
+          className={`${bannerClassName} ${activeIndex > 0 ? 'opacity-0' : 'opacity-100'}`}
         />
-      ) }
-      <Swiper 
-        freeMode={true} 
-        slidesPerView={2.2} 
-        spaceBetween={8} 
-        onSlideChange={swiperSliderFirstMove} 
-        prefix="product"
+      )}
+      <Swiper
+        freeMode={true}
+        slidesPerView={2.2}
+        spaceBetween={8}
+        onSlideChange={swiperSliderFirstMove}
+        prefix='product'
       >
-        { bannerMode && (
+        {bannerMode && (
           <SwiperSlide>
-            <Link href={products.banner.url} className="w-full h-full block"></Link>
+            <Link href={products.banner.url} className='w-full h-full block'></Link>
           </SwiperSlide>
-        ) }
-        { products?.products?.map((product, index) => (
+        )}
+        {products?.products?.map((product, index) => (
           <SwiperSlide key={index}>
             <ProductCard product={product} simpleTitle={simpleTitle} />
           </SwiperSlide>
-        )) }
+        ))}
       </Swiper>
     </>
   )
 }
 
-export default ProductSlider
\ No newline at end of file
+export default ProductSlider
diff --git a/src/lib/product/components/Skeleton/ProductSearchSkeleton.jsx b/src/lib/product/components/Skeleton/ProductSearchSkeleton.jsx
index e51a565c..fa1e175d 100644
--- a/src/lib/product/components/Skeleton/ProductSearchSkeleton.jsx
+++ b/src/lib/product/components/Skeleton/ProductSearchSkeleton.jsx
@@ -1,7 +1,7 @@
-import ProductCardSkeleton from "@/core/components/elements/Skeleton/ProductCardSkeleton"
+import ProductCardSkeleton from '@/core/components/elements/Skeleton/ProductCardSkeleton'
 
 const ProductSearchSkeleton = () => (
-  <div className="p-4 grid grid-cols-2 gap-4">
+  <div className='p-4 grid grid-cols-2 gap-4'>
     <ProductCardSkeleton />
     <ProductCardSkeleton />
     <ProductCardSkeleton />
@@ -11,4 +11,4 @@ const ProductSearchSkeleton = () => (
   </div>
 )
 
-export default ProductSearchSkeleton
\ No newline at end of file
+export default ProductSearchSkeleton
diff --git a/src/lib/product/hooks/useProductSearch.js b/src/lib/product/hooks/useProductSearch.js
index d23a8098..0396caec 100644
--- a/src/lib/product/hooks/useProductSearch.js
+++ b/src/lib/product/hooks/useProductSearch.js
@@ -1,6 +1,6 @@
-import { useQuery } from "react-query"
-import productSearchApi from "../api/productSearchApi"
-import _ from "lodash-contrib"
+import { useQuery } from 'react-query'
+import productSearchApi from '../api/productSearchApi'
+import _ from 'lodash-contrib'
 
 const useProductSearch = ({ query }) => {
   const queryString = _.toQuery(query)
@@ -12,4 +12,4 @@ const useProductSearch = ({ query }) => {
   }
 }
 
-export default useProductSearch
\ No newline at end of file
+export default useProductSearch
diff --git a/src/lib/product/hooks/useProductSimilar.js b/src/lib/product/hooks/useProductSimilar.js
index 444fec0b..d16e4c58 100644
--- a/src/lib/product/hooks/useProductSimilar.js
+++ b/src/lib/product/hooks/useProductSimilar.js
@@ -1,5 +1,5 @@
-import productSimilarApi from "../api/productSimilarApi"
-import { useQuery } from "react-query"
+import productSimilarApi from '../api/productSimilarApi'
+import { useQuery } from 'react-query'
 
 const useProductSimilar = ({ query }) => {
   const fetchProductSimilar = async () => await productSimilarApi({ query })
@@ -10,4 +10,4 @@ const useProductSimilar = ({ query }) => {
   }
 }
 
-export default useProductSimilar
\ No newline at end of file
+export default useProductSimilar