Finalize CRM module: bookings, pricing, survey with full UI integration and validation

src/components/AuthGuard.jsx

@@ -1,9 +1,40 @@
-import { Navigate, Outlet } from 'react-router-dom';
+import { useState, useEffect, useRef } from 'react';
+import { Navigate, Outlet, useNavigate } from 'react-router-dom';
+
+const INACTIVITY_LIMIT_MS = 10 * 60 * 1000; // 10 minutes
 
 export default function AuthGuard({ children }) {
-  const token = localStorage.getItem('auth_token');
-  
-  if (!token) {
+  const navigate = useNavigate();
+  const loggedIn = localStorage.getItem('logged_in');
+  const timerRef = useRef(null);
+
+  useEffect(() => {
+    if (!loggedIn) return;
+
+    const logout = () => {
+      localStorage.removeItem('logged_in');
+      localStorage.removeItem('auth_token');
+      localStorage.removeItem('user_data');
+      navigate('/login', { replace: true });
+    };
+
+    const resetTimer = () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(logout, INACTIVITY_LIMIT_MS);
+    };
+
+    const events = ['mousemove', 'keydown', 'scroll', 'click'];
+    
+    events.forEach(event => window.addEventListener(event, resetTimer));
+    resetTimer(); // Start the timer initially
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      events.forEach(event => window.removeEventListener(event, resetTimer));
+    };
+  }, [loggedIn, navigate]);
+
+  if (!loggedIn) {
     return <Navigate to="/login" replace />;
   }
 

src/components/Logo.jsx

@@ -42,8 +42,8 @@ export default function Logo({ onDark = false, compact = false, height = 26, sx
           height,
           width: 'auto',
           display: 'block',
-          // The asset is white; on light surfaces recolour it to near-black so it stays visible.
-          filter: onDark ? 'none' : 'brightness(0) saturate(100%)'
+          // The asset is white; on light surfaces recolour it to Doormile Red (#C01227)
+          filter: onDark ? 'none' : 'brightness(0) saturate(100%) invert(15%) sepia(93%) saturate(5437%) hue-rotate(346deg) brightness(81%) contrast(92%)'
         }}
       />
     </Box>