fixed hooks

frontend/src/pages/Admin/OrdersPage.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Box,
   Typography,
@@ -60,6 +60,7 @@ const AdminOrdersPage = () => {
   
   const queryClient = useQueryClient();
 
+
   // Fetch orders
   const {
     data: orders,
@@ -88,6 +89,11 @@ const AdminOrdersPage = () => {
     },
     enabled: false // Only run when manually triggered
   });
+  useEffect(() => {
+    if(selectedOrder){
+      fetchOrderDetails();
+    }
+  }, [selectedOrder])
 
   // Update order status mutation
   const updateOrderStatus = useMutation({
@@ -149,7 +155,6 @@ const AdminOrdersPage = () => {
   const handleViewOrder = async (order) => {
     setSelectedOrder(order);
     setViewDialogOpen(true);
-    await fetchOrderDetails();
   };
 
   // Close view dialog

frontend/src/theme/ThemeProvider.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import { createTheme } from '@mui/material/styles';
@@ -8,14 +8,8 @@ import apiClient from '@services/api';
 import { useDarkMode } from '@hooks/reduxHooks';
 import useBrandingSettings from '@hooks/brandingHooks';
 
-/**
- * Custom ThemeProvider that uses branding settings for white labeling
- */
 const ThemeProvider = ({ children }) => {
-  const [darkMode, _, setDarkMode] = useDarkMode();
+  const [darkMode, toggleDarkMode, setDarkMode] = useDarkMode();
-  const [theme, setTheme] = useState(null);
-  
-  // Fetch branding settings
   const { data: brandingSettings } = useBrandingSettings();
   
   // Default colors
@@ -38,43 +32,38 @@ const ThemeProvider = ({ children }) => {
     }
   };
   
-  
+  // Set initial dark mode from branding settings
   useEffect(() => {
-    // Only pull from default if user specified style hasn't been set
+    if (brandingSettings && localStorage.getItem("darkMode") === null) {
-    if(brandingSettings){
+      const shouldUseDarkMode = brandingSettings.default_mode === 'dark';
-      let isDarkMode = darkMode;
+      if (shouldUseDarkMode !== darkMode) {
-      if(localStorage.getItem("darkMode") == null){
+        setDarkMode(shouldUseDarkMode);
-        isDarkMode = brandingSettings?.default_mode === 'dark' ? true : darkMode;
-        setDarkMode(isDarkMode);
       }
-      handleDarkMode(isDarkMode)
     }
-  }, [brandingSettings, darkMode]);
+  }, [brandingSettings]); // Remove darkMode and setDarkMode from dependencies
-  function handleDarkMode(darkMode){
-    let isDarkMode = darkMode;
 
-    // Get colors based on mode
+  // Create theme based on current settings
-    const mode = isDarkMode ? 'dark' : 'light';
+  const theme = useMemo(() => {
+    const mode = darkMode ? 'dark' : 'light';
     const colors = {
-      primary: isDarkMode 
+      primary: darkMode 
         ? (brandingSettings?.dark_primary_color || defaultColors.dark.primary) 
         : (brandingSettings?.light_primary_color || defaultColors.light.primary),
-      secondary: isDarkMode 
+      secondary: darkMode 
         ? (brandingSettings?.dark_secondary_color || defaultColors.dark.secondary) 
         : (brandingSettings?.light_secondary_color || defaultColors.light.secondary),
-      background: isDarkMode 
+      background: darkMode 
         ? (brandingSettings?.dark_background_color || defaultColors.dark.background) 
         : (brandingSettings?.light_background_color || defaultColors.light.background),
-      paper: isDarkMode 
+      paper: darkMode 
         ? (brandingSettings?.dark_surface_color || defaultColors.dark.paper) 
         : (brandingSettings?.light_surface_color || defaultColors.light.paper),
-      text: isDarkMode 
+      text: darkMode 
         ? (brandingSettings?.dark_text_color || defaultColors.dark.text) 
         : (brandingSettings?.light_text_color || defaultColors.light.text)
     };
     
-    // Create theme
+    return createTheme({
-    const newTheme = createTheme({
       palette: {
         mode,
         primary: {
@@ -92,7 +81,7 @@ const ThemeProvider = ({ children }) => {
         },
         text: {
           primary: colors.text,
-          secondary: isDarkMode 
+          secondary: darkMode 
             ? 'rgba(255, 255, 255, 0.7)' 
             : 'rgba(0, 0, 0, 0.6)',
         },
@@ -106,30 +95,6 @@ const ThemeProvider = ({ children }) => {
           'Arial',
           'sans-serif',
         ].join(','),
-        h1: {
-          fontSize: '2.5rem',
-          fontWeight: 500,
-        },
-        h2: {
-          fontSize: '2rem',
-          fontWeight: 500,
-        },
-        h3: {
-          fontSize: '1.75rem',
-          fontWeight: 500,
-        },
-        h4: {
-          fontSize: '1.5rem',
-          fontWeight: 500,
-        },
-        h5: {
-          fontSize: '1.25rem',
-          fontWeight: 500,
-        },
-        h6: {
-          fontSize: '1rem',
-          fontWeight: 500,
-        },
       },
       components: {
         MuiButton: {
@@ -144,7 +109,7 @@ const ThemeProvider = ({ children }) => {
           styleOverrides: {
             root: {
               borderRadius: 8,
-              boxShadow: isDarkMode 
+              boxShadow: darkMode 
                 ? '0 4px 20px rgba(0, 0, 0, 0.5)'
                 : '0 4px 20px rgba(0, 0, 0, 0.1)',
             },
@@ -153,7 +118,7 @@ const ThemeProvider = ({ children }) => {
         MuiAppBar: {
           styleOverrides: {
             root: {
-              boxShadow: isDarkMode 
+              boxShadow: darkMode 
                 ? '0 4px 20px rgba(0, 0, 0, 0.5)'
                 : '0 2px 10px rgba(0, 0, 0, 0.05)',
             },
@@ -161,30 +126,7 @@ const ThemeProvider = ({ children }) => {
         },
       },
     });
-    
+  }, [darkMode, brandingSettings, defaultColors]);
-    setTheme(newTheme);
-  }
-  // Use a default theme while loading
-  if (!theme) {
-    const defaultTheme = createTheme({
-      palette: {
-        mode: darkMode ? 'dark' : 'light',
-        primary: {
-          main: darkMode ? defaultColors.dark.primary : defaultColors.light.primary,
-        },
-        secondary: {
-          main: darkMode ? defaultColors.dark.secondary : defaultColors.light.secondary,
-        },
-      },
-    });
-    
-    return (
-      <MuiThemeProvider theme={defaultTheme}>
-        <CssBaseline />
-        {children}
-      </MuiThemeProvider>
-    );
-  }
   
   return (
     <MuiThemeProvider theme={theme}>