feat: restructure global settings route and update sidebar navigation, enhance GlobalSettings view with DashboardLayout

Author: JasonKrik

services/frontend/src/components/AppSidebar.vue

@@ -216,10 +216,10 @@ onMounted(() => {
           <SidebarMenu>
             <SidebarMenuItem>
               <SidebarMenuButton
-                @click="navigateTo('/global-settings')"
-                :is-active="router.currentRoute.value.path === '/global-settings'"
+                @click="navigateTo('/admin/settings')"
+                :is-active="router.currentRoute.value.path === '/admin/settings'"
                 class="w-full justify-start"
-                :aria-current="router.currentRoute.value.path === '/global-settings' ? 'page' : undefined"
+                :aria-current="router.currentRoute.value.path === '/admin/settings' ? 'page' : undefined"
               >
                 <FileSliders class="mr-2 h-4 w-4 shrink-0" />
                 <span>{{ t('sidebar.adminArea.globalSettings') }}</span>

services/frontend/src/router/index.ts

@@ -68,13 +68,18 @@ const routes = [
     meta: { requiresSetup: true },
   },
   {
-    path: '/global-settings',
-    name: 'GlobalSettings',
-    component: () => import('../views/GlobalSettings.vue'),
+    path: '/admin',
     meta: { 
       requiresSetup: true,
       requiresRole: 'global_admin'
     },
+    children: [
+      {
+        path: 'settings',
+        name: 'AdminSettings',
+        component: () => import('../views/GlobalSettings.vue'),
+      },
+    ],
   },
   {
     path: '/:pathMatch(.*)*',

services/frontend/src/views/GlobalSettings.vue

@@ -1,16 +1,20 @@
-<template>
-  <div class="container mx-auto p-6">
-    <h1 class="text-3xl font-bold mb-4">
-      {{ t('globalSettings.title') }}
-    </h1>
-    <p class="text-gray-600">
-      {{ t('globalSettings.description') }}
-    </p>
-  </div>
-</template>
-
 <script setup lang="ts">
+import DashboardLayout from '@/components/DashboardLayout.vue'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 </script>
+
+<template>
+  <DashboardLayout :title="t('globalSettings.title')">
+    <div class="rounded-xl border bg-card text-card-foreground shadow">
+      <div class="p-6">
+        <h2 class="text-2xl font-bold">{{ t('globalSettings.title') }}</h2>
+        <p class="text-muted-foreground mt-2">{{ t('globalSettings.description') }}</p>
+        <div class="mt-6">
+          <p class="text-sm text-muted-foreground">This page is under construction.</p>
+        </div>
+      </div>
+    </div>
+  </DashboardLayout>
+</template>