feat: implement global settings management with group support and enhance UI alerts

Author: JasonKrik

.gitignore

@@ -65,3 +65,4 @@ services/backend/tests/.test-context.json
 ._*.js
 ._*.json
 cookies.txt
+cookiejar.txt

services/backend/src/global-settings/index.ts

@@ -119,10 +119,11 @@ export class GlobalSettingsInitService {
         const exists = await GlobalSettingsService.exists(setting.key);
 
         if (!exists) {
+          const groupIdForThisSetting = this.getGroupIdForSetting(setting.key);
           await GlobalSettingsService.set(setting.key, setting.defaultValue, {
             description: setting.description,
             encrypted: setting.encrypted,
-            group_id: undefined // Temporarily set to undefined to avoid foreign key constraint
+            group_id: groupIdForThisSetting === 'unknown' ? undefined : groupIdForThisSetting // Pass correct group_id
           });
 
           result.created++;

services/backend/src/routes/globalSettings/index.ts

@@ -15,6 +15,25 @@ import {
 } from './schemas';
 
 export default async function globalSettingsRoute(fastify: FastifyInstance) {
+  // GET /api/settings/groups - List all groups with their settings (admin only)
+  fastify.get('/api/settings/groups', {
+    preHandler: requirePermission('settings.view'),
+  }, async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const groupsWithSettings = await GlobalSettingsService.getAllGroupsWithSettings();
+      return reply.status(200).send({
+        success: true,
+        data: groupsWithSettings,
+      });
+    } catch (error) {
+      fastify.log.error(error, 'Error fetching all global setting groups with settings');
+      return reply.status(500).send({
+        success: false,
+        error: 'Failed to fetch all global setting groups with settings',
+      });
+    }
+  });
+
   // GET /api/settings - List all global settings (admin only)
   fastify.get('/api/settings', {
     preHandler: requirePermission('settings.view'),

services/backend/src/services/globalSettingsService.ts

@@ -22,6 +22,10 @@ export interface GlobalSettingGroup {
   updated_at: Date;
 }
 
+export interface GlobalSettingGroupWithSettings extends GlobalSettingGroup {
+  settings: GlobalSetting[];
+}
+
 export interface CreateGlobalSettingInput {
   key: string;
   value: string;
@@ -353,6 +357,42 @@ export class GlobalSettingsService {
     }
   }
 
+  /**
+   * Get all groups with their metadata from the globalSettingGroups table.
+   * Does not include the settings themselves.
+   */
+  static async getAllGroupMetadata(): Promise<GlobalSettingGroup[]> {
+    const db = getDb();
+    const schema = getSchema();
+    try {
+      const results = await db
+        .select()
+        .from(schema.globalSettingGroups)
+        .orderBy(schema.globalSettingGroups.sort_order, schema.globalSettingGroups.name); // Sort by sort_order, then name
+      return results as GlobalSettingGroup[];
+    } catch (error) {
+      throw new Error(`Failed to get all group metadata: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+  }
+
+  /**
+   * Get all groups with their metadata and their associated settings.
+   */
+  static async getAllGroupsWithSettings(): Promise<GlobalSettingGroupWithSettings[]> {
+    const groupMetadatas = await this.getAllGroupMetadata();
+    const groupsWithSettings: GlobalSettingGroupWithSettings[] = [];
+
+    for (const groupMetadata of groupMetadatas) {
+      const settings = await this.getByGroup(groupMetadata.id);
+      groupsWithSettings.push({
+        ...groupMetadata,
+        settings: settings,
+      });
+    }
+    // The groups are already sorted by getAllGroupMetadata
+    return groupsWithSettings;
+  }
+
   /**
    * Get a specific group by ID
    */

services/frontend/src/components/settings/GlobalSettingsSidebarNav.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button' // Adjusted path assuming shadcn/ui components are in @/components/ui
+
+export interface Setting {
+  key: string
+  value: any
+  description?: string
+  is_encrypted?: boolean
+  group_id?: string
+  // Add other potential fields like 'required', 'type' if known/needed
+}
+
+export interface GlobalSettingGroup {
+  id: string
+  name: string
+  description?: string
+  icon?: string
+  sort_order?: number
+  settings?: Setting[]
+}
+
+interface NavItem {
+  title: string
+  href: string
+}
+
+const props = defineProps<{
+  groups: GlobalSettingGroup[]
+}>()
+
+const $route = useRoute()
+
+const sidebarNavItems = computed((): NavItem[] => {
+  return props.groups.map(group => ({
+    title: group.name,
+    href: `/admin/settings/${group.id}`,
+  })).sort((a, b) => {
+    // Assuming groups are already sorted by sort_order by the parent or API
+    // If not, and sort_order is available on GlobalSettingGroup, sort here
+    return a.title.localeCompare(b.title) // Fallback sort by title
+  })
+})
+</script>
+
+<template>
+  <nav class="flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1">
+    <Button
+      v-for="item in sidebarNavItems"
+      :key="item.title"
+      as="router-link"
+      :to="item.href"
+      variant="ghost"
+      :class="cn(
+        'w-full text-left justify-start',
+        $route.path === item.href && 'bg-muted hover:bg-muted',
+      )"
+    >
+      {{ item.title }}
+    </Button>
+  </nav>
+</template>

services/frontend/src/i18n/locales/en/globalSettings.ts

@@ -2,5 +2,10 @@ export default {
   globalSettings: {
     title: 'Global Settings',
     description: 'Manage global application settings',
+    alerts: {
+      successTitle: "Success!",
+      saveSuccess: "Your settings have been saved successfully.",
+      noChanges: "No changes detected. Settings are up to date."
+    }
   },
 }

services/frontend/src/router/index.ts

@@ -75,7 +75,7 @@ const routes = [
     },
     children: [
       {
-        path: 'settings',
+        path: 'settings/:groupId?', // Added :groupId? to make it optional
         name: 'AdminSettings',
         component: () => import('../views/GlobalSettings.vue'),
       },