update

frontend/src/contexts/AppContext.tsx

@@ -0,0 +1,32 @@
+import { createContext, useContext, useState, type ReactNode } from 'react';
+
+type TabId = 'docs' | 'compliance' | 'status' | 'rag';
+
+interface AppContextValue {
+  activeTab: TabId;
+  setActiveTab: (tab: TabId) => void;
+}
+
+const AppContext = createContext<AppContextValue | undefined>(undefined);
+
+export const useApp = (): AppContextValue => {
+  const context = useContext(AppContext);
+  if (!context) {
+    throw new Error('useApp must be used within an AppProvider');
+  }
+  return context;
+};
+
+interface AppProviderProps {
+  children: ReactNode;
+}
+
+export const AppProvider: React.FC<AppProviderProps> = ({ children }) => {
+  const [activeTab, setActiveTab] = useState<TabId>('compliance');
+
+  return (
+    <AppContext.Provider value={{ activeTab, setActiveTab }}>
+      {children}
+    </AppContext.Provider>
+  );
+};

frontend/src/contexts/ThemeContext.tsx

@@ -0,0 +1,49 @@
+import React, { createContext, useContext, useState, useEffect, type ReactNode } from 'react';
+import { darkTheme, lightTheme } from '../types/theme';
+import type { ThemeColors } from '../types/theme';
+
+interface ThemeContextValue {
+  isDark: boolean;
+  theme: ThemeColors;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+export const useTheme = (): ThemeContextValue => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
+
+interface ThemeProviderProps {
+  children: ReactNode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+  const [isDark, setIsDark] = useState<boolean>(true);
+  const theme = isDark ? darkTheme : lightTheme;
+
+  const toggleTheme = () => {
+    setIsDark((prev) => !prev);
+  };
+
+  // Apply class to document for Tailwind dark mode + body background
+  useEffect(() => {
+    if (isDark) {
+      document.documentElement.classList.add('dark');
+      document.body.style.background = '#0a0a12';
+    } else {
+      document.documentElement.classList.remove('dark');
+      document.body.style.background = '#ffffff';
+    }
+  }, [isDark]);
+
+  return (
+    <ThemeContext.Provider value={{ isDark, theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

frontend/src/contexts/index.ts

@@ -0,0 +1,2 @@
+export { ThemeProvider, useTheme } from './ThemeContext';
+export { AppProvider, useApp } from './AppContext';