comment chagnes

frontend/package.json

@@ -23,12 +23,14 @@
     "axios": "^1.6.2",
     "date-fns": "^4.1.0",
     "dotenv": "^16.5.0",
+    "papaparse": "^5.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-email-editor": "^1.7.11",
     "react-redux": "^9.0.2",
     "react-router-dom": "^6.20.1",
-    "recharts": "^2.10.3"
+    "recharts": "^2.10.3",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",

frontend/src/hooks/productAdminHooks.js

@@ -0,0 +1,106 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import apiClient from '@services/api';
+import { useNotification } from './reduxHooks';
+import { useNavigate, useParams, useLocation } from 'react-router-dom';
+
+
+// Fetch categories
+export const useCategories = () => {
+    return useQuery({
+        queryKey: ['categories'],
+        queryFn: async () => {
+            const response = await apiClient.get('/products/categories/all');
+            return response.data;
+        }
+    })
+};
+
+// Fetch all available tags
+export const useTags = () => {
+    return useQuery({
+        queryKey: ['tags'],
+        queryFn: async () => {
+            const response = await apiClient.get('/products/tags/all');
+            return response.data;
+        }
+    })
+};
+
+// Fetch product data if editing
+export const useProduct = (id, isNewProduct) => {
+    return useQuery({
+        queryKey: ['product', id],
+        queryFn: async () => {
+            const response = await apiClient.get(`/products/${id}`);
+            return response.data[0];
+        },
+        enabled: !isNewProduct 
+    })
+};
+
+// Create product mutation
+export const useCreateProduct = () => {
+    const notification = useNotification();
+    const queryClient = useQueryClient();
+    const navigate = useNavigate();
+    return useMutation({
+        mutationFn: async (productData) => {
+            return await apiClient.post('/admin/products', productData);
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['admin-products'] });
+            notification.showNotification('Product created successfully', 'success');
+            // Redirect after a short delay
+            setTimeout(() => {
+                navigate('/admin/products');
+            }, 1500);
+        },
+        onError: (error) => {
+            notification.showNotification(
+             `Failed to create product: ${error.message}`,
+              'error'
+            );
+        }
+    })
+};
+
+// Update product mutation
+export const useUpdateProduct = (id) => {
+    const notification = useNotification();
+    const queryClient = useQueryClient();
+    return useMutation({
+        mutationFn: async ({ id, productData }) => {
+            return await apiClient.put(`/admin/products/${id}`, productData);
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['admin-products'] });
+            queryClient.invalidateQueries({ queryKey: ['product', id] });
+            notification.showNotification('Product updated successfully', 'success');
+        },
+        onError: (error) => {
+            notification.showNotification(
+             `Failed to update product: ${error.message}`,
+              'error'
+            );
+        }
+    })
+};
+
+// Save stock notification settings
+export const useSaveStockNotification = (id) => {
+    const notification = useNotification();
+    return useMutation({
+        mutationFn: async (notificationData) => {
+            return await apiClient.post(`/admin/products/${id}/stock-notification`, notificationData);
+        },
+        onSuccess: () => {
+            notification.showNotification('Stock notification settings saved!', 'success');
+        },
+        onError: (error) => {
+            notification.showNotification(
+             `Failed to save notification settings: ${error.message}`,
+              'error'
+            );
+        }
+    })
+};

frontend/src/pages/Admin/ProductEditPage.jsx

@@ -31,6 +31,7 @@ import NotificationsActiveIcon from '@mui/icons-material/NotificationsActive';
 import ImageUploader from '@components/ImageUploader';
 import apiClient from '@services/api';
 import { useAuth } from '@hooks/reduxHooks';
+import { useCategories, useTags, useProduct, useCreateProduct, useUpdateProduct, useSaveStockNotification } from '@hooks/productAdminHooks';
 
 const ProductEditPage = () => {
   const { pathname } = useLocation();
@@ -75,106 +76,26 @@ const ProductEditPage = () => {
   });
 
   // Fetch categories
-  const { data: categories, isLoading: categoriesLoading } = useQuery({
+  const { data: categories, isLoading: categoriesLoading } = useCategories();
-    queryKey: ['categories'],
-    queryFn: async () => {
-      const response = await apiClient.get('/products/categories/all');
-      return response.data;
-    }
-  });
 
   // Fetch all available tags
-  const { data: allTags, isLoading: tagsLoading } = useQuery({
+  const { data: allTags, isLoading: tagsLoading } = useTags();
-    queryKey: ['tags'],
-    queryFn: async () => {
-      const response = await apiClient.get('/products/tags/all');
-      return response.data;
-    }
-  });
 
   // Fetch product data if editing
   const {
     data: product,
     isLoading: productLoading,
     error: productError
-  } = useQuery({
+  } = useProduct(id === 'new' ? null : id, isNewProduct);
-    queryKey: ['product', id],
-    queryFn: async () => {
-      const response = await apiClient.get(`/products/${id}`);
-      return response.data[0];
-    },
-    enabled: !isNewProduct 
-  });
 
   // Create product mutation
-  const createProduct = useMutation({
+  const createProduct = useCreateProduct();
-    mutationFn: async (productData) => {
-      return await apiClient.post('/admin/products', productData);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['admin-products'] });
-      setNotification({
-        open: true,
-        message: 'Product created successfully!',
-        severity: 'success'
-      });
-      // Redirect after a short delay
-      setTimeout(() => {
-        navigate('/admin/products');
-      }, 1500);
-    },
-    onError: (error) => {
-      setNotification({
-        open: true,
-        message: `Failed to create product: ${error.message}`,
-        severity: 'error'
-      });
-    }
-  });
 
   // Update product mutation
-  const updateProduct = useMutation({
+  const updateProduct = useUpdateProduct(id === 'new' ? null : id);
-    mutationFn: async ({ id, productData }) => {
-      return await apiClient.put(`/admin/products/${id}`, productData);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['admin-products'] });
-      queryClient.invalidateQueries({ queryKey: ['product', id] });
-      setNotification({
-        open: true,
-        message: 'Product updated successfully!',
-        severity: 'success'
-      });
-    },
-    onError: (error) => {
-      setNotification({
-        open: true,
-        message: `Failed to update product: ${error.message}`,
-        severity: 'error'
-      });
-    }
-  });
 
   // Save stock notification settings
-  const saveStockNotification = useMutation({
+  const saveStockNotification = useSaveStockNotification(id === 'new' ? null : id);
-    mutationFn: async (notificationData) => {
-      return await apiClient.post(`/admin/products/${id}/stock-notification`, notificationData);
-    },
-    onSuccess: () => {
-      setNotification({
-        open: true,
-        message: 'Stock notification settings saved!',
-        severity: 'success'
-      });
-    },
-    onError: (error) => {
-      setNotification({
-        open: true,
-        message: `Failed to save notification settings: ${error.message}`,
-        severity: 'error'
-      });
-    }
-  });
 
   // Handle form changes
   const handleChange = (e) => {
@@ -323,35 +244,34 @@ const ProductEditPage = () => {
     };
     
     // Add notification data if enabled
-    if (notificationEnabled && !isNewProduct) {
+    
+    if (notificationEnabled) {
       productData.stockNotification = {
         enabled: true,
         email: notificationEmail,
         threshold: stockThreshold
       };
     }
-    
     if (isNewProduct) {
       createProduct.mutate(productData);
     } else {
       updateProduct.mutate({ id, productData });
-      
+    }
     // Save notification settings separately
-      if (notificationEnabled) {
+    // if (notificationEnabled) {
-        saveStockNotification.mutate({
+    //   saveStockNotification.mutate({
-          enabled: true,
+    //     enabled: true,
-          email: notificationEmail,
+    //     email: notificationEmail,
-          threshold: stockThreshold
+    //     threshold: stockThreshold
-        });
+    //   });
-      } else {
+    // } else {
-        // Disable notifications if checkbox is unchecked
+    //   // Disable notifications if checkbox is unchecked
-        saveStockNotification.mutate({
+    //   saveStockNotification.mutate({
-          enabled: false,
+    //     enabled: false,
-          email: '',
+    //     email: '',
-          threshold: 0
+    //     threshold: 0
-        });
+    //   });
-      }
+    // }
-    }
   };
   
   // Handle notification close
@@ -545,7 +465,7 @@ const ProductEditPage = () => {
           </Grid>
 
           {/* Stock Notification Section */}
-          {!isNewProduct && (
+          
           <>
             <Grid item xs={12}>
               <Divider sx={{ my: 2 }} />
@@ -616,7 +536,6 @@ const ProductEditPage = () => {
               </Card>
             </Grid>
           </>
-          )}
 
           <Grid item xs={12}>
             <Divider sx={{ my: 2 }} />