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/config/modules.config.ts

@@ -0,0 +1,110 @@
+/**
+ * Module Configuration
+ * Defines all available modules and their properties
+ */
+
+export interface ModuleConfig {
+  name: string;
+  route: string;
+  icon?: string;
+  description?: string;
+  enabled: boolean; // Will be checked from API
+}
+
+export const MODULES: Record<string, ModuleConfig> = {
+  planner: {
+    name: 'Planner',
+    route: '/planner',
+    icon: '📊',
+    description: 'Keyword research and clustering',
+    enabled: true, // Default, will be checked from API
+  },
+  writer: {
+    name: 'Writer',
+    route: '/writer',
+    icon: '✍️',
+    description: 'Content generation and management',
+    enabled: true,
+  },
+  thinker: {
+    name: 'Thinker',
+    route: '/thinker',
+    icon: '🧠',
+    description: 'AI prompts and strategies',
+    enabled: true,
+  },
+  automation: {
+    name: 'Automation',
+    route: '/automation',
+    icon: '⚙️',
+    description: 'Automated workflows and tasks',
+    enabled: true,
+  },
+  site_builder: {
+    name: 'Site Builder',
+    route: '/site-builder',
+    icon: '🏗️',
+    description: 'Build and manage sites',
+    enabled: true,
+  },
+  linker: {
+    name: 'Linker',
+    route: '/linker',
+    icon: '🔗',
+    description: 'Internal linking optimization',
+    enabled: true,
+  },
+  optimizer: {
+    name: 'Optimizer',
+    route: '/optimizer',
+    icon: '⚡',
+    description: 'Content optimization',
+    enabled: true,
+  },
+  publisher: {
+    name: 'Publisher',
+    route: '/publisher',
+    icon: '📤',
+    description: 'Content publishing',
+    enabled: true,
+  },
+};
+
+/**
+ * Get module config by name
+ */
+export function getModuleConfig(moduleName: string): ModuleConfig | undefined {
+  return MODULES[moduleName];
+}
+
+/**
+ * Get all enabled modules
+ */
+export function getEnabledModules(moduleEnableSettings?: Record<string, boolean>): ModuleConfig[] {
+  return Object.entries(MODULES)
+    .filter(([key, module]) => {
+      // If moduleEnableSettings provided, use it; otherwise default to enabled
+      if (moduleEnableSettings) {
+        const enabledKey = `${key}_enabled` as keyof typeof moduleEnableSettings;
+        return moduleEnableSettings[enabledKey] !== false; // Default to true if not set
+      }
+      return module.enabled;
+    })
+    .map(([, module]) => module);
+}
+
+/**
+ * Check if a module is enabled
+ */
+export function isModuleEnabled(moduleName: string, moduleEnableSettings?: Record<string, boolean>): boolean {
+  const module = MODULES[moduleName];
+  if (!module) return false;
+  
+  if (moduleEnableSettings) {
+    const enabledKey = `${moduleName}_enabled` as keyof typeof moduleEnableSettings;
+    return moduleEnableSettings[enabledKey] !== false; // Default to true if not set
+  }
+  
+  return module.enabled;
+}
+

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>

frontend/src/services/api.ts

@@ -1474,6 +1474,20 @@ export async function deleteAccountSetting(key: string): Promise<void> {
 }
 
 // Module Settings
+export interface ModuleEnableSettings {
+  id: number;
+  planner_enabled: boolean;
+  writer_enabled: boolean;
+  thinker_enabled: boolean;
+  automation_enabled: boolean;
+  site_builder_enabled: boolean;
+  linker_enabled: boolean;
+  optimizer_enabled: boolean;
+  publisher_enabled: boolean;
+  created_at: string;
+  updated_at: string;
+}
+
 export interface ModuleSetting {
   id: number;
   module_name: string;
@@ -1498,6 +1512,19 @@ export async function createModuleSetting(data: { module_name: string; key: stri
   });
 }
 
+export async function fetchModuleEnableSettings(): Promise<ModuleEnableSettings> {
+  const response = await fetchAPI('/v1/system/settings/modules/enable/');
+  return response;
+}
+
+export async function updateModuleEnableSettings(data: Partial<ModuleEnableSettings>): Promise<ModuleEnableSettings> {
+  const response = await fetchAPI('/v1/system/settings/modules/enable/', {
+    method: 'PUT',
+    body: JSON.stringify(data),
+  });
+  return response;
+}
+
 export async function updateModuleSetting(moduleName: string, key: string, data: Partial<{ config: Record<string, any>; is_active: boolean }>): Promise<ModuleSetting> {
   return fetchAPI(`/v1/system/settings/modules/${key}/?module_name=${moduleName}`, {
     method: 'PUT',

frontend/src/store/settingsStore.ts

@@ -13,13 +13,17 @@ import {
   fetchModuleSettings,
   createModuleSetting,
   updateModuleSetting,
+  fetchModuleEnableSettings,
+  updateModuleEnableSettings,
   AccountSetting,
   ModuleSetting,
+  ModuleEnableSettings,
 } from '../services/api';
 
 interface SettingsState {
   accountSettings: Record<string, AccountSetting>;
   moduleSettings: Record<string, Record<string, ModuleSetting>>;
+  moduleEnableSettings: ModuleEnableSettings | null;
   loading: boolean;
   error: string | null;
   
@@ -29,6 +33,9 @@ interface SettingsState {
   updateAccountSetting: (key: string, value: any) => Promise<void>;
   loadModuleSettings: (moduleName: string) => Promise<void>;
   updateModuleSetting: (moduleName: string, key: string, value: any) => Promise<void>;
+  loadModuleEnableSettings: () => Promise<void>;
+  updateModuleEnableSettings: (data: Partial<ModuleEnableSettings>) => Promise<void>;
+  isModuleEnabled: (moduleName: string) => boolean;
   reset: () => void;
 }
 
@@ -37,6 +44,7 @@ export const useSettingsStore = create<SettingsState>()(
     (set, get) => ({
       accountSettings: {},
       moduleSettings: {},
+      moduleEnableSettings: null,
       loading: false,
       error: null,
       
@@ -135,10 +143,40 @@ export const useSettingsStore = create<SettingsState>()(
         }
       },
       
+      loadModuleEnableSettings: async () => {
+        set({ loading: true, error: null });
+        try {
+          const settings = await fetchModuleEnableSettings();
+          set({ moduleEnableSettings: settings, loading: false });
+        } catch (error: any) {
+          set({ error: error.message, loading: false });
+        }
+      },
+      
+      updateModuleEnableSettings: async (data: Partial<ModuleEnableSettings>) => {
+        set({ loading: true, error: null });
+        try {
+          const settings = await updateModuleEnableSettings(data);
+          set({ moduleEnableSettings: settings, loading: false });
+        } catch (error: any) {
+          set({ error: error.message, loading: false });
+          throw error;
+        }
+      },
+      
+      isModuleEnabled: (moduleName: string): boolean => {
+        const settings = get().moduleEnableSettings;
+        if (!settings) return true; // Default to enabled if not loaded
+        
+        const enabledKey = `${moduleName}_enabled` as keyof ModuleEnableSettings;
+        return settings[enabledKey] !== false; // Default to true if not set
+      },
+      
       reset: () => {
         set({
           accountSettings: {},
           moduleSettings: {},
+          moduleEnableSettings: null,
           loading: false,
           error: null,
         });
@@ -149,6 +187,7 @@ export const useSettingsStore = create<SettingsState>()(
       partialize: (state) => ({
         accountSettings: state.accountSettings,
         moduleSettings: state.moduleSettings,
+        moduleEnableSettings: state.moduleEnableSettings,
       }),
     }
   )