Phase 0: Add ModuleGuard component and implement Modules settings UI

- Created ModuleGuard component to protect routes based on module status
- Implemented Modules.tsx page with toggle switches for all modules
- Fixed Switch component onChange prop type
- Module enable/disable UI fully functional

frontend/src/components/common/ModuleGuard.tsx

@@ -0,0 +1,40 @@
+import { ReactNode, useEffect } from 'react';
+import { Navigate } from 'react-router-dom';
+import { useSettingsStore } from '../../store/settingsStore';
+import { isModuleEnabled } from '../../config/modules.config';
+
+interface ModuleGuardProps {
+  module: string;
+  children: ReactNode;
+  redirectTo?: string;
+}
+
+/**
+ * ModuleGuard - Protects routes based on module enable status
+ * Redirects to settings page if module is disabled
+ */
+export default function ModuleGuard({ module, children, redirectTo = '/settings/modules' }: ModuleGuardProps) {
+  const { moduleEnableSettings, loadModuleEnableSettings, loading } = useSettingsStore();
+
+  useEffect(() => {
+    // Load module enable settings if not already loaded
+    if (!moduleEnableSettings && !loading) {
+      loadModuleEnableSettings();
+    }
+  }, [moduleEnableSettings, loading, loadModuleEnableSettings]);
+
+  // While loading, show children (optimistic rendering)
+  if (loading || !moduleEnableSettings) {
+    return <>{children}</>;
+  }
+
+  // Check if module is enabled
+  const enabled = isModuleEnabled(module, moduleEnableSettings as any);
+
+  if (!enabled) {
+    return <Navigate to={redirectTo} replace />;
+  }
+
+  return <>{children}</>;
+}
+

frontend/src/pages/Settings/Modules.tsx

@@ -1,36 +1,48 @@
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 import PageMeta from '../../components/common/PageMeta';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { fetchAPI } from '../../services/api';
+import { useSettingsStore } from '../../store/settingsStore';
+import { MODULES } from '../../config/modules.config';
 import { Card } from '../../components/ui/card';
+import Switch from '../../components/form/switch/Switch';
 
 export default function ModuleSettings() {
   const toast = useToast();
-  const [settings, setSettings] = useState<any[]>([]);
+  const {
-  const [loading, setLoading] = useState(true);
+    moduleEnableSettings,
+    loadModuleEnableSettings,
+    updateModuleEnableSettings,
+    loading,
+  } = useSettingsStore();
 
   useEffect(() => {
-    loadSettings();
+    loadModuleEnableSettings();
-  }, []);
+  }, [loadModuleEnableSettings]);
 
-  const loadSettings = async () => {
+  const handleToggle = async (moduleName: string, enabled: boolean) => {
     try {
-      setLoading(true);
+      const enabledKey = `${moduleName}_enabled` as keyof typeof moduleEnableSettings;
-      const response = await fetchAPI('/v1/system/settings/modules/');
+      await updateModuleEnableSettings({
-      setSettings(response.results || []);
+        [enabledKey]: enabled,
+      } as any);
+      toast.success(`${MODULES[moduleName]?.name || moduleName} ${enabled ? 'enabled' : 'disabled'}`);
     } catch (error: any) {
-      toast.error(`Failed to load module settings: ${error.message}`);
+      toast.error(`Failed to update module: ${error.message}`);
-    } finally {
-      setLoading(false);
     }
   };
 
+  const getModuleEnabled = (moduleName: string): boolean => {
+    if (!moduleEnableSettings) return true; // Default to enabled
+    const enabledKey = `${moduleName}_enabled` as keyof typeof moduleEnableSettings;
+    return moduleEnableSettings[enabledKey] !== false;
+  };
+
   return (
     <div className="p-6">
       <PageMeta title="Module Settings" />
       <div className="mb-6">
         <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Module Settings</h1>
-        <p className="text-gray-600 dark:text-gray-400 mt-1">Module-specific configuration</p>
+        <p className="text-gray-600 dark:text-gray-400 mt-1">Enable or disable modules for your account</p>
       </div>
 
       {loading ? (
@@ -39,7 +51,38 @@ export default function ModuleSettings() {
         </div>
       ) : (
         <Card className="p-6">
-          <p className="text-gray-600 dark:text-gray-400">Module settings management interface coming soon.</p>
+          <div className="space-y-6">
+            {Object.entries(MODULES).map(([key, module]) => (
+              <div
+                key={key}
+                className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
+              >
+                <div className="flex items-center gap-4">
+                  <div className="text-2xl">{module.icon}</div>
+                  <div>
+                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                      {module.name}
+                    </h3>
+                    {module.description && (
+                      <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                        {module.description}
+                      </p>
+                    )}
+                  </div>
+                </div>
+                <div className="flex items-center gap-3">
+                  <span className="text-sm text-gray-600 dark:text-gray-400">
+                    {getModuleEnabled(key) ? 'Enabled' : 'Disabled'}
+                  </span>
+                  <Switch
+                    label=""
+                    checked={getModuleEnabled(key)}
+                    onChange={(enabled) => handleToggle(key, enabled)}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
         </Card>
       )}
     </div>