feat(frontend): add statistics page with under construction message

Author: Lasim

.assets/deploystack-banner.png

@@ -44,7 +44,8 @@ import {
   FolderTree,
   Satellite,
   ListTodo,
-  Bot
+  Bot,
+  BarChart3
 } from 'lucide-vue-next'
 
 // Define props, including variant
@@ -104,6 +105,11 @@ const navigationItems = [
     icon: Bot,
     url: '/client-configuration',
   },
+  {
+    title: t('sidebar.navigation.statistics'),
+    icon: BarChart3,
+    url: '/statistics',
+  },
   // {
   //   title: t('sidebar.navigation.credentials'),
   //   icon: Key,

services/frontend/src/components/AppSidebar.vue

@@ -25,6 +25,7 @@ import satelliteConfigMessages from './satelliteConfig'
 import satellitesMessages from './satellites'
 import userAccountMessages from './userAccount'
 import clientConfigurationMessages from './clientConfiguration'
+import statisticsMessages from './statistics'
 
 import walkthroughMessages from './walkthrough'
 
@@ -55,6 +56,7 @@ export default {
   satellites: satellitesMessages,
   userAccount: userAccountMessages,
   clientConfiguration: clientConfigurationMessages,
+  statistics: statisticsMessages,
   walkthrough: walkthroughMessages,
   common: commonMessages
 }

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

@@ -5,6 +5,7 @@ export default {
       title: 'Navigation',
       mcpServer: 'MCP Server',
       clientConfiguration: 'Client Configuration',
+      statistics: 'Statistics',
       provider: 'Provider',
       credentials: 'Credentials',
     },

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

@@ -0,0 +1,8 @@
+export default {
+  title: 'Statistics',
+  underConstruction: {
+    title: 'Under Construction',
+    description: 'This page is currently being built',
+    message: 'Statistics and analytics features are coming soon. Check back later for insights into your MCP server usage, team activity, and more.',
+  },
+}

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

@@ -129,6 +129,12 @@ const routes = [
     component: () => import('../views/client-configuration/index.vue'),
     meta: { requiresSetup: true },
   },
+  {
+    path: '/statistics',
+    name: 'Statistics',
+    component: () => import('../views/statistics/index.vue'),
+    meta: { requiresSetup: true },
+  },
   {
     path: '/provider',
     name: 'Provider',

services/frontend/src/router/index.ts

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import DashboardLayout from '@/components/DashboardLayout.vue'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { Construction } from 'lucide-vue-next'
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <DashboardLayout :title="t('statistics.title')">
+    <div class="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle class="flex items-center gap-2">
+            <Construction class="h-5 w-5" />
+            {{ t('statistics.underConstruction.title') }}
+          </CardTitle>
+          <CardDescription>
+            {{ t('statistics.underConstruction.description') }}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p class="text-muted-foreground">
+            {{ t('statistics.underConstruction.message') }}
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  </DashboardLayout>
+</template>