feat: add user management page and sidebar navigation, include internationalization support for admin users

Author: JasonKrik

services/frontend/src/components/AppSidebar.vue

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

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

@@ -0,0 +1,6 @@
+export default {
+  adminUsers: {
+    title: 'User Management',
+    description: 'Manage all users in the system.'
+  },
+}

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

@@ -5,6 +5,8 @@ import setupMessages from './setup'
 import dashboardMessages from './dashboard'
 import globalSettingsMessages from './globalSettings'
 import notFoundMessages from './notFound'
+import adminUsersMessages from './adminUsers'
+import sidebarMessages from './sidebar'
 
 export default {
   ...commonMessages,
@@ -13,6 +15,8 @@ export default {
   ...dashboardMessages,
   ...globalSettingsMessages,
   ...notFoundMessages,
+  ...adminUsersMessages,
+  ...sidebarMessages,
   // If there are any top-level keys directly under 'en', they can be added here.
   // For example, if you had a global 'appName': 'My Application'
   // appName: 'DeployStack Application',

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

@@ -0,0 +1,24 @@
+export default {
+  sidebar: {
+    navigation: {
+      title: 'Navigation',
+      mcpServer: 'MCP Server',
+      provider: 'Provider',
+      credentials: 'Credentials',
+    },
+    adminArea: {
+      title: 'Admin Area',
+      globalSettings: 'Global Settings',
+      users: 'Users',
+    },
+    teams: {
+      selectTeam: 'Select Team',
+      loading: 'Loading teams...',
+      noTeams: 'No teams found.',
+    },
+    user: {
+      account: 'Account',
+      logout: 'Logout',
+    },
+  },
+}

services/frontend/src/router/index.ts

@@ -79,6 +79,11 @@ const routes = [
         name: 'AdminSettings',
         component: () => import('../views/GlobalSettings.vue'),
       },
+      {
+        path: 'users',
+        name: 'AdminUsers',
+        component: () => import('../views/admin/Users.vue'), // Assuming the new component will be in views/admin/
+      },
     ],
   },
   {

services/frontend/src/views/admin/Users.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="p-4">
+    <h1 class="text-2xl font-semibold mb-4">{{ $t('adminUsers.title') }}</h1>
+    <p>{{ $t('adminUsers.description') }}</p>
+    <!-- User management table and functionality will go here -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+// Define page title for use in DashboardLayout or similar
+// This is a common pattern but might need adjustment based on your layout component
+// definePageMeta({
+//   title: t('adminUsers.title'),
+// })
+</script>
+
+<style scoped>
+/* Add any page-specific styles here */
+</style>