add information label if brand and categories in empty

2 files changed, 61 insertions, 42 deletions

diff --git a/src/lib/product/components/ProductFilter.jsx b/src/lib/product/components/ProductFilter.jsx
index 38e2d2c3..14eef0ba 100644
--- a/src/lib/product/components/ProductFilter.jsx
+++ b/src/lib/product/components/ProductFilter.jsx
@@ -96,12 +96,18 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
               value={brand}
               onChange={(e) => setBrand(e.target.value)}
             >
-              <option value=''>Pilih Brand...</option>
-              {brands.map((brand, index) => (
-                <option value={brand.brand} key={index}>
-                  {brand.brand} <span className='text-sm text-gray-200'>({brand.qty})</span>
-                </option>
-              ))}
+              {brands.length > 0 ? (
+                <>
+                  <option value=''>Pilih Brand...</option>
+                  {brands.map((brand, index) => (
+                    <option value={brand.brand} key={index}>
+                      {brand.brand} <span className='text-sm text-gray-200'>({brand.qty})</span>
+                    </option>
+                  ))}
+                </>
+              ) : (
+                <option value=''>Brands tidak tersedia</option>
+              )}
             </select>
           </div>
         )}
@@ -114,12 +120,18 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
             value={category}
             onChange={(e) => setCategory(e.target.value)}
           >
-            <option value=''>Pilih Kategori...</option>
-            {categories.map((category, index) => (
-              <option value={category.name} key={index}>
-                {category.name} <span className='text-sm text-gray-200'>({category.qty})</span>
-              </option>
-            ))}
+            {categories.length > 0 ? (
+              <>
+                <option value=''>Pilih Kategori...</option>
+                {categories.map((category, index) => (
+                  <option value={category.name} key={index}>
+                    {category.name} <span className='text-sm text-gray-200'>({category.qty})</span>
+                  </option>
+                ))}
+              </>
+            ) : (
+              <option value=''>Kategori tidak tersedia</option>
+            )}
           </select>
         </div>
         <div>
diff --git a/src/lib/product/components/ProductFilterDesktop.jsx b/src/lib/product/components/ProductFilterDesktop.jsx
index 582dabea..e84d6526 100644
--- a/src/lib/product/components/ProductFilterDesktop.jsx
+++ b/src/lib/product/components/ProductFilterDesktop.jsx
@@ -111,7 +111,6 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
   return (
     <>
       <Accordion defaultIndex={[0]} allowMultiple>
-        
         {!router.pathname.includes('brands') && (
           <AccordionItem>
             <AccordionButton padding={[2, 4]}>
@@ -123,21 +122,25 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
 
             <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.brand)}
-                      onChange={handleBrandsChange}
-                      value={brand.brand}
-                      size='md'
-                    >
-                      <div className='flex items-center gap-2'>
-                        <span>{brand.brand} </span>
-                        <span className='text-sm text-gray-600'>({brand.qty})</span>
-                      </div>
-                    </Checkbox>
-                  </div>
-                ))}
+                {brands && brands.length > 0 ? (
+                  brands.map((brand, index) => (
+                    <div className='flex items-center gap-2 ' key={index}>
+                      <Checkbox
+                        isChecked={brandValues.includes(brand.brand)}
+                        onChange={handleBrandsChange}
+                        value={brand.brand}
+                        size='md'
+                      >
+                        <div className='flex items-center gap-2'>
+                          <span>{brand.brand} </span>
+                          <span className='text-sm text-gray-600'>({brand.qty})</span>
+                        </div>
+                      </Checkbox>
+                    </div>
+                  ))
+                ) : (
+                  <div className='flex items-center gap-2'>Brands tidak tersedia</div>
+                )}
               </Stack>
             </AccordionPanel>
           </AccordionItem>
@@ -153,21 +156,25 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
 
           <AccordionPanel>
             <Stack gap={3} direction='column' maxH={'240px'} overflow='auto'>
-              {categories.map((category, index) => (
-                <div className='flex items-center gap-2' key={index}>
-                  <Checkbox
-                    isChecked={categoryValues.includes(category.name)}
-                    onChange={handleCategoriesChange}
-                    value={category.name}
-                    size='md'
-                  >
-                    <div className='flex items-center gap-2'>
+              {categories && categories.length > 0 ? (
+                categories.map((category, index) => (
+                  <div className='flex items-center gap-2' key={index}>
+                    <Checkbox
+                      isChecked={categoryValues.includes(category.name)}
+                      onChange={handleCategoriesChange}
+                      value={category.name}
+                      size='md'
+                    >
+                      <div className='flex items-center gap-2'>
                         <span>{category.name} </span>
                         <span className='text-sm text-gray-600'>({category.qty})</span>
                       </div>
-                  </Checkbox>
-                </div>
-              ))}
+                    </Checkbox>
+                  </div>
+                ))
+              ) : (
+                <div className='flex items-center gap-2'>Kategori tidak tersedia</div>
+              )}
             </Stack>
           </AccordionPanel>
         </AccordionItem>
@@ -218,7 +225,7 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
           </AccordionPanel>
         </AccordionItem>
 
-        <AccordionItem>
+        {/* <AccordionItem>
           <AccordionButton padding={[2, 4]}>
             <Box as='span' flex='1' textAlign='left' fontWeight='semibold'>
               Ketersedian Stok
@@ -236,7 +243,7 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
               Ketersedian Stock
             </Checkbox>
           </AccordionPanel>
-        </AccordionItem>
+        </AccordionItem> */}
       </Accordion>
 
       <Button className='w-full mt-6' colorScheme='red' onClick={handleSubmit}>