filter di web mobile

3 files changed, 109 insertions, 18 deletions

diff --git a/src/lib/product/components/ProductFilter.jsx b/src/lib/product/components/ProductFilter.jsx
index 7dadc39e..20c66a1f 100644
--- a/src/lib/product/components/ProductFilter.jsx
+++ b/src/lib/product/components/ProductFilter.jsx
@@ -3,6 +3,7 @@ import { useRouter } from 'next/router'
 import { useState } from 'react'
 import _ from 'lodash'
 import { toQuery } from 'lodash-contrib'
+import { Checkbox } from '@chakra-ui/react'
 
 const orderOptions = [
   { value: 'price-asc', label: 'Harga Terendah' },
@@ -20,6 +21,45 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
   const [priceFrom, setPriceFrom] = useState(query?.priceFrom)
   const [priceTo, setPriceTo] = useState(query?.priceTo)
 
+  const [stock, setStock] = useState(query?.stock)
+
+  const [activeRange, setActiveRange] = useState(null)
+
+  const priceRange = [
+    {
+      priceFrom: 100000,
+      priceTo: 200000
+    },
+    {
+      priceFrom: 200000,
+      priceTo: 300000
+    },
+    {
+      priceFrom: 300000,
+      priceTo: 400000
+    },
+    {
+      priceFrom: 400000,
+      priceTo: 500000
+    }
+  ]
+
+  const handlePriceFromChange = async (priceFromr, priceTor, index) => {
+    await setPriceFrom(priceFromr)
+    await setPriceTo(priceTor)
+    setActiveRange(index)
+  }
+
+  const handleReadyStockChange = (event) => {
+    const value = event.target.value
+    const isChecked = event.target.checked
+    if (isChecked) {
+      setStock(value)
+    } else {
+      setStock(null)
+    }
+  }
+
   const handleSubmit = () => {
     let params = {
       q: router.query.q,
@@ -27,13 +67,23 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
       brand,
       category,
       priceFrom,
-      priceTo
+      priceTo,
+      stock: stock
     }
     params = _.pickBy(params, _.identity)
     params = toQuery(params)
     router.push(`${prefixUrl}?${params}`)
   }
 
+  const formatCurrency = (value) => {
+    if (value >= 1000) {
+      const thousands = Math.floor(value / 1000) // Menghitung ribuan
+      return `Rp${thousands}k`
+    } else {
+      return `Rp${value}`
+    }
+  }
+
   return (
     <BottomPopup active={active} close={close} title='Filter Produk'>
       <div className='flex flex-col gap-y-4'>
@@ -49,7 +99,7 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
               <option value=''>Pilih Brand...</option>
               {brands.map((brand, index) => (
                 <option value={brand.brand} key={index}>
-                  {brand.brand}
+                  {brand.brand} <span className='text-sm text-gray-200'>({brand.qty})</span>
                 </option>
               ))}
             </select>
@@ -106,6 +156,33 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
               onChange={(e) => setPriceTo(e.target.value)}
             />
           </div>
+          <div className='grid grid-cols-2 gap-x-3 gap-y-2 mt-2'>
+            {priceRange.map((price, i) => (
+              <button
+                key={i}
+                onClick={() => handlePriceFromChange(price.priceFrom, price.priceTo, i)}
+                className={`w-full border ${
+                  i === activeRange ? 'border-red-600' : 'border-gray-400'
+                }
+                    py-2 p-3 rounded-full text-sm whitespace-nowrap`}
+              >
+                {formatCurrency(price.priceFrom)} - {formatCurrency(price.priceTo)}
+              </button>
+            ))}
+          </div>
+        </div>
+        <div>
+          <label>Ketersedian Stok</label>
+          <div className='mt-2'>
+            <Checkbox
+              isChecked={stock === 'ready stock'}
+              onChange={handleReadyStockChange}
+              value={'ready stock'}
+              size='md'
+            >
+              Ketersedian Stok
+            </Checkbox>
+          </div>
         </div>
         <button type='button' className='btn-solid-red w-full mt-2' onClick={handleSubmit}>
           Terapkan Filter
diff --git a/src/lib/product/components/ProductFilterDesktop.jsx b/src/lib/product/components/ProductFilterDesktop.jsx
index 357bdcea..7adf58cd 100644
--- a/src/lib/product/components/ProductFilterDesktop.jsx
+++ b/src/lib/product/components/ProductFilterDesktop.jsx
@@ -101,9 +101,9 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
   const formatCurrency = (value) => {
     if (value >= 1000) {
       const thousands = Math.floor(value / 1000) // Menghitung ribuan
-      return `Rp.${thousands}k`
+      return `Rp${thousands}k`
     } else {
-      return `Rp.${value}`
+      return `Rp${value}`
     }
   }
 
@@ -130,9 +130,7 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
                   >
                     <div className='flex items-center gap-2'>
                       <span>{brand.brand} </span>
-                      <div className='badge-solid-red w-[30px] text-center'>
-                        {brand.qty > 99 ? '99+' : brand.qty}
-                      </div>
+                      <span className='text-sm text-gray-600'>({brand.qty})</span>
                     </div>
                   </Checkbox>
                 </div>
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index c79e355e..ef4580d6 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -28,10 +28,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   const popup = useActive()
   const numRows = [30, 50, 80, 100]
 
-  console.log('ini product search', productSearch.data)
-  const pageCount = Math.ceil(
-    productSearch.data?.response.numFound / limit
-  )
+  const pageCount = Math.ceil(productSearch.data?.response.numFound / limit)
   const productStart = productSearch.data?.responseHeader.params.start
   const productRows = limit
   const productFound = productSearch.data?.response.numFound
@@ -104,7 +101,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   const handleOrderBy = (e) => {
     let params = {
       ...router.query,
-      orderBy: e.target.value,
+      orderBy: e.target.value
     }
     params = _.pickBy(params, _.identity)
     params = toQuery(params)
@@ -114,7 +111,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   const handleLimit = (e) => {
     let params = {
       ...router.query,
-      limit: e.target.value,
+      limit: e.target.value
     }
     params = _.pickBy(params, _.identity)
     params = toQuery(params)
@@ -153,9 +150,9 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
                 {pageCount > 1 ? (
                   <>
                     {productStart + 1}-
-                    {productStart + productRows > productFound
+                    {parseInt(productStart) + parseInt(productRows) > productFound
                       ? productFound
-                      : productStart + productRows}
+                      : parseInt(productStart) + parseInt(productRows)}
                     &nbsp;dari&nbsp;
                   </>
                 ) : (
@@ -175,9 +172,28 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
           </div>
 
           {productFound > 0 && (
-            <button className='btn-light mb-6 py-2 px-5' onClick={popup.activate}>
-              Filter
-            </button>
+            <div className='flex items-center gap-x-2 mb-5 justify-between'>
+              <div>
+                <button className='btn-light py-2 px-5 h-[40px]' onClick={popup.activate}>
+                  Filter
+                </button>
+              </div>
+              <div className=''>
+                <select
+                  name='limit'
+                  className='form-input w-24'
+                  value={router.query?.limit || ''}
+                  onChange={(e) => handleLimit(e)}
+                >
+                  {numRows.map((option, index) => (
+                    <option key={index} value={option}>
+                      {' '}
+                      {option}{' '}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
           )}
 
           <div className='grid grid-cols-2 gap-3'>