Fix/review filter reset

FRONTEND/src/components/ui/FilterPanel.jsx

@@ -7,7 +7,7 @@ import {
 } from '@chakra-ui/react';
 import { useProductStore } from '../../store/product';
 
-const FilterPanel = ({ filters, setFilters }) => {
+const FilterPanel = ({ filters, setFilters, isDisabled = false }) => {
   const [localFilters, setLocalFilters] = useState(filters);
   const [categories, setCategories] = useState([]);
   const [brands, setBrands] = useState([]);
@@ -101,6 +101,7 @@ const FilterPanel = ({ filters, setFilters }) => {
                 <Checkbox
                   key={cat}
                   colorScheme="blue"
+                  isDisabled={isDisabled}
                   isChecked={(localFilters.categories || []).includes(cat)}
                   onChange={() => handleCategoryChange(cat)}
                 >
@@ -122,6 +123,7 @@ const FilterPanel = ({ filters, setFilters }) => {
                 <Checkbox
                   key={brand}
                   colorScheme="blue"
+                  isDisabled={isDisabled}
                   isChecked={localFilters.brand === brand}
                   onChange={() => handleBrandChange(brand)}
                 >
@@ -143,6 +145,7 @@ const FilterPanel = ({ filters, setFilters }) => {
             </Text>
           </HStack>
           <RangeSlider
+            isDisabled={isDisabled}
             min={0} max={5000} step={10}
             value={[localFilters.minPrice, localFilters.maxPrice]}
             onChange={(val) =>
@@ -166,6 +169,7 @@ const FilterPanel = ({ filters, setFilters }) => {
             onChange={(e) =>
               setLocalFilters({ ...localFilters, minRating: Number(e.target.value) })
             }
+            isDisabled={isDisabled}
           >
             <option value={0}>Any Rating</option>
             <option value={1}>1+ Stars</option>
@@ -184,6 +188,7 @@ const FilterPanel = ({ filters, setFilters }) => {
             onChange={(e) =>
               setLocalFilters({ ...localFilters, inStock: e.target.checked })
             }
+            isDisabled={isDisabled}
           >
             <Text fontSize="sm">In Stock Only</Text>
           </Checkbox>
@@ -192,10 +197,11 @@ const FilterPanel = ({ filters, setFilters }) => {
         <Divider />
 
         <VStack spacing={3}>
-          <Button colorScheme="blue" w="full" onClick={handleApply}>
+          <Button colorScheme="blue" w="full" onClick={handleApply}
+          isDisabled={isDisabled}>
             Apply Filters
           </Button>
-          <Button variant="outline" w="full" onClick={handleReset}>
+          <Button variant="outline" w="full" onClick={handleReset} isDisabled={isDisabled}>
             Clear Filters
           </Button>
         </VStack>

FRONTEND/src/pages/CreatePage.jsx

@@ -8,7 +8,7 @@
 import { useNavigate } from 'react-router-dom';
 
 const CreatePage = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const [newProduct, setNewProduct] = useState({
     name: "",
@@ -97,7 +97,7 @@
     setIsDirty(true);
   };
 
   const borderColor = useColorModeValue("gray.200", "gray.600");
   const toggleBg = useColorModeValue("blue.50", "blue.900");
   const infoColor = useColorModeValue("gray.700", "gray.300");
 
@@ -108,7 +108,7 @@
           Create New Product
         </Heading>
         <Box
           w={"full"} bg={cardBg}
           p={6} rounded={"lg"} shadow={"md"}
         >
           <VStack spacing={4}>
@@ -275,7 +275,7 @@
                   name="originalPrice"
                   type="number"
                   min="0"
-                  step="0.01"
+                  step="0.01"               
                   aria-label="Original Price"
                   value={newProduct.originalPrice}
                   onChange={(e) => handleChange("originalPrice", e.target.value)}

FRONTEND/src/pages/HomePage.jsx

@@ -157,6 +157,7 @@ const HomePage = () => {
             }}
             maxW="250px"
             aria-label="Sort products"
+            isDisabled={isSearching}
           >
             <option value="">Default</option>
             <option value="price_asc">Price: Low to High</option>
@@ -195,7 +196,7 @@ const HomePage = () => {
             </Box>
           </VStack>
 
-          <Box
+          <Box 
             w="full"
             display={hasNoProducts ? "block" : "grid"}
             gridTemplateColumns={hasNoProducts ? "1fr" : "300px 1fr"}
@@ -205,10 +206,15 @@ const HomePage = () => {
             {/* Sidebar with Filters — hidden when store has no products */}
             {!hasNoProducts && (
               <Box position="sticky" top="100px">
-                <FilterPanel filters={filters} setFilters={setFilters} />
+                <FilterPanel
+                  filters={filters}
+                  setFilters={setFilters}
+                  isDisabled={isSearching}
+                />
               </Box>
             )}
 
+
             {/* Product grid — skeletons while loading, real cards when ready */}
             <Box>
               <SimpleGrid columns={{ base: 1, md: 2, xl: 3 }} spacing={10} w="full">