diff --git a/.env b/.env
index ac0c1a85..d56a8566 100644
--- a/.env
+++ b/.env
@@ -25,5 +25,7 @@ NUXT_SESSION_PASSWORD=something_long_and_random_thats_at_least_32_characters
 NUXT_OAUTH_GITHUB_CLIENT_ID=
 NUXT_OAUTH_GITHUB_CLIENT_SECRET=
 
+# Determines if the application should support multiple teams.
+VUE_APP_SHOW_MULTIPLE_TEAMS=true
 # to use a corporate proxy
 # HTTP_PROXY=http://proxy.company.com:8080
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
new file mode 100644
index 00000000..92138ba8
--- /dev/null
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,5 @@
+Always add code comments.
+
+Always use English for both code and comments.
+
+Always use Chinese for discussion in chat.
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..f1c1eb8a
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "github.copilot.nextEditSuggestions.enabled": true
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 46690d3b..62ed2217 100644
--- a/README.md
+++ b/README.md
@@ -136,6 +136,14 @@ The `NUXT_PUBLIC_GITHUB_TEAM` environment variable filters metrics for a specifi
 NUXT_PUBLIC_GITHUB_TEAM=
 ````
 
+#### NUXT_PUBLIC_SHOW_MULTIPLE_TEAMS
+
+The `NUXT_PUBLIC_SHOW_MULTIPLE_TEAMS` environment variable is a boolean parameter that controls whether the application should support multiple teams. The default value is `true`. When it is set to `true` and `NUXT_PUBLIC_GITHUB_TEAM` is not set, the application will call the GitHub API to get the teams for the current organization or enterprise.
+
+````
+NUXT_PUBLIC_SHOW_MULTIPLE_TEAMS=true
+````
+
 #### NUXT_PUBLIC_IS_DATA_MOCKED
 
 Variable is false by default. To view mocked data switch it to true or use query parameter `?mock=true`.
diff --git a/app/components/MainComponent.vue b/app/components/MainComponent.vue
index 8a70b76f..db8be0cc 100644
--- a/app/components/MainComponent.vue
+++ b/app/components/MainComponent.vue
@@ -1,83 +1,173 @@
 <template>
-  <div>
-    <v-toolbar color="indigo" elevation="4">
-      <v-btn icon>
-        <v-icon>mdi-github</v-icon>
-      </v-btn>
+  <v-container>
+    <div>
+      <v-toolbar color="indigo" elevation="4">
+        <v-btn icon>
+          <v-icon>mdi-github</v-icon>
+        </v-btn>
 
-      <v-toolbar-title class="toolbar-title">{{ displayName }}</v-toolbar-title>
-      <h2 class="error-message"> {{ mockedDataMessage }} </h2>
-      <v-spacer />
+        <v-toolbar-title class="toolbar-title">{{ displayName }}</v-toolbar-title>
+        <h2 class="error-message"> {{ mockedDataMessage }} </h2>
+        <v-spacer />
 
-      <!-- Conditionally render the logout button -->
+        <!-- Conditionally render the logout button -->
+        <AuthState>
+          <template #default="{ loggedIn, user }">
+            <div v-show="loggedIn" class="user-info">
+              Welcome,
+              <v-avatar class="user-avatar">
+                <v-img :alt="user?.name" :src="user?.avatarUrl" />
+              </v-avatar> {{ user?.name }}
+            </div>
+            <v-btn v-if="showLogoutButton && loggedIn" class="logout-button" @click="logout">Logout</v-btn>
+          </template>
+        </AuthState>
+
+        <template #extension>
+
+          <v-tabs v-model="tab" align-tabs="title">
+            <v-tab v-for="item in tabItems" :key="item" :value="item">
+              {{ item }}
+            </v-tab>
+          </v-tabs>
+
+        </template>
+
+      </v-toolbar>
+
+      <!-- API Error Message -->
+      <div v-show="apiError && !signInRequired" class="error-message" v-text="apiError" />
       <AuthState>
-        <template #default="{ loggedIn, user }">
-          <div v-show="loggedIn" class="user-info">
-            Welcome,
-            <v-avatar class="user-avatar">
-              <v-img :alt="user?.name" :src="user?.avatarUrl" />
-            </v-avatar> {{ user?.name }}
+        <template #default="{ loggedIn }">
+          <div v-show="signInRequired" class="github-login-container">
+            <NuxtLink v-if="!loggedIn && signInRequired" to="/auth/github" external class="github-login-button"> <v-icon
+                left>mdi-github</v-icon>
+              Sign in with GitHub</NuxtLink>
           </div>
-          <v-btn v-if="showLogoutButton && loggedIn" class="logout-button" @click="logout">Logout</v-btn>
+        </template>
+        <template #placeholder>
+          <button disabled>Loading...</button>
         </template>
       </AuthState>
 
-      <template #extension>
-
-        <v-tabs v-model="tab" align-tabs="title">
-          <v-tab v-for="item in tabItems" :key="item" :value="item">
-            {{ item }}
-          </v-tab>
-        </v-tabs>
-
-      </template>
-
-    </v-toolbar>
-
-    <!-- API Error Message -->
-    <div v-show="apiError && !signInRequired" class="error-message" v-text="apiError" />
-    <AuthState>
-      <template #default="{ loggedIn }">
-        <div v-show="signInRequired" class="github-login-container">
-          <NuxtLink v-if="!loggedIn && signInRequired" to="/auth/github" external class="github-login-button"> <v-icon
-              left>mdi-github</v-icon>
-            Sign in with GitHub</NuxtLink>
-        </div>
-      </template>
-      <template #placeholder>
-        <button disabled>Loading...</button>
-      </template>
-    </AuthState>
-
-
-    <div v-show="!apiError">
-      <v-progress-linear v-show="!metricsReady" indeterminate color="indigo" />
-      <v-window v-show="metricsReady && metrics.length" v-model="tab">
-        <v-window-item v-for="item in tabItems" :key="item" :value="item">
-          <v-card flat>
-            <MetricsViewer v-if="item === itemName" :metrics="metrics" />
-            <BreakdownComponent v-if="item === 'languages'" :metrics="metrics" :breakdown-key="'language'" />
-            <BreakdownComponent v-if="item === 'editors'" :metrics="metrics" :breakdown-key="'editor'" />
-            <CopilotChatViewer v-if="item === 'copilot chat'" :metrics="metrics" />
-            <SeatsAnalysisViewer v-if="item === 'seat analysis'" :seats="seats" />
-            <ApiResponse
-v-if="item === 'api response'" :metrics="metrics" :original-metrics="originalMetrics"
-              :seats="seats" />
-          </v-card>
-        </v-window-item>
-        <v-alert
-v-show="metricsReady && metrics.length == 0" density="compact" text="No data available to display"
-          title="No data" type="warning" />
-      </v-window>
 
-    </div>
+      <div v-show="!apiError">
+        <v-progress-linear v-show="!metricsReady" indeterminate color="indigo" />
+        <v-window v-show="metricsReady && metrics.length" v-model="tab">
+          <v-window-item v-for="item in tabItems" :key="item" :value="item">
+            <v-card flat>
+              <MetricsViewer v-if="item === 'metrics'" :metrics="metrics" />
+              <BreakdownComponent v-if="item === 'languages'" :metrics="metrics" :breakdown-key="'language'" />
+              <BreakdownComponent v-if="item === 'editors'" :metrics="metrics" :breakdown-key="'editor'" />
+              <CopilotChatViewer v-if="item === 'copilot chat'" :metrics="metrics" />
+              <SeatsAnalysisViewer v-if="item === 'seat analysis'" :seats="seats" />
+              <ApiResponse
+                v-if="item === 'api response'"
+                :metrics="metrics"
+                :original-metrics="originalMetrics"
+                :seats="seats"
+              />
+              <MultiTeamsMetricsViewer 
+                v-if="item === 'multi-teams metrics'"
+                :teams="teams"
+              />
+            </v-card>
+          </v-window-item>
+          <v-alert
+            v-show="metricsReady && metrics.length === 0"
+            density="compact"
+            text="No data available to display"
+            title="No data"
+            type="warning"
+          />
+        </v-window>
+
+      </div>
 
-  </div>
+    </div>
+  </v-container>
 </template>
-<script lang='ts'>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import type { MetricsApiResponse } from '@/types/metricsApiResponse';
+
+// /* const router = useRouter();
+// const route = useRoute(); */
+
+const config = useRuntimeConfig();
+
+// Tab management
+const tab = ref('metrics');
+const tabItems = computed(() => {
+  // Generated by Copilot
+  // Only include 'multi-teams metrics' when scope is not enterprise
+  const items = ['metrics', 'languages', 'editors', 'copilot chat', 'seat analysis'];
+  
+  // Don't show multi-teams metrics for enterprise scope
+  if (config.public.scope !== 'enterprise') {
+    items.push('multi-teams metrics');
+  }
+
+  if (originalMetrics.value?.length > 0) {
+    items.push('api response');
+  }
+
+  return items;
+});
+
+// Generated by Copilot: Watch organization changes to reload teams
+watch(() => config.public.githubOrg, async (newOrg, oldOrg) => {
+  console.log(`Organization changed from ${oldOrg} to ${newOrg}, ready to reload teams`);
+    
+  if (newOrg && newOrg !== oldOrg && config.public.scope === 'org') {
+    console.log(`Organization changed from ${oldOrg} to ${newOrg}, reloading teams`);
+    await loadTeamsData();
+  }
+}, { immediate: true });
+
+// Generated by Copilot: Function to load teams data
+async function loadTeamsData() {
+  if (config.public.scope === 'org') {
+    // Generated by Copilot: Clear old teams data when organization changes
+    teams.value = []; // Reset teams array to clear old data
+    
+    const teamsFetch = useFetch('/api/teams');
+    const { data: teamsData, error: teamsError } = await teamsFetch;
+    
+    if (teamsError.value) {
+      processError(teamsError.value as H3Error);
+    } else if (teamsData.value) {
+      teams.value = teamsData.value.map((team: any) => team.name);
+      console.log(`Teams loaded for ${config.public.githubOrg}:`, teams.value);
+    }
+  }
+}
+
+// Helper function to get display name based on scope
+function getDisplayName(config: any): string {
+
+  switch (config.scope) {
+    case 'team':
+      return `Copilot Metrics Viewer | Organization： ${config.githubOrg} | Team： ${config.githubTeam}`;
+      //return `Copilot Metrics Viewer | Team： ${config.githubTeam}`;
+    case 'organization':
+      if(config.githubTeam) {
+        return `Copilot Metrics Viewer | Organization： ${config.githubOrg} | Team： ${config.githubTeam}`;
+      }
+      else {
+        return `Copilot Metrics Viewer | Organization： ${config.githubOrg}`;
+      }
+    case 'enterprise':
+      return `Copilot Metrics Viewer | Enterprise： ${config.githubEnt} `;
+    default:
+      return 'Copilot Metrics Viewer';
+  }
+}
+
 import type { Metrics } from '@/model/Metrics';
 import type { CopilotMetrics } from '@/model/Copilot_Metrics';
-import type { MetricsApiResponse } from '@/types/metricsApiResponse';
 import type { Seat } from "@/model/Seat";
 import type { H3Error } from 'h3'
 
@@ -87,130 +177,130 @@ import BreakdownComponent from './BreakdownComponent.vue'
 import CopilotChatViewer from './CopilotChatViewer.vue'
 import SeatsAnalysisViewer from './SeatsAnalysisViewer.vue'
 import ApiResponse from './ApiResponse.vue'
+import MultiTeamsMetricsViewer from './MultiTeamsMetricsViewer.vue'
 
-export default defineNuxtComponent({
-  name: 'MainComponent',
-  components: {
-    MetricsViewer,
-    BreakdownComponent,
-    CopilotChatViewer,
-    SeatsAnalysisViewer,
-    ApiResponse
-  },
-  methods: {
-    logout() {
-      const { clear } = useUserSession()
-      this.metrics = [];
-      this.seats = [];
-      // console.log('metrics are now', this.metrics);
-      clear();
-    }
-  },
+const { loggedIn, user } = useUserSession()
+const showLogoutButton = computed(() => config.public.usingGithubAuth && loggedIn.value);
+const mockedDataMessage = computed(() => config.public.isDataMocked ? 'Using mock data - see README if unintended' : '');
+const itemName = computed(() => 'metrics'); // 默认显示 metrics 内容
+//const githubInfo = getDisplayName(config.public)
+//const displayName = computed(() => githubInfo);
 
-  data() {
-    return {
-      tabItems: ['languages', 'editors', 'copilot chat', 'seat analysis', 'api response'],
-      tab: null
-    }
-  },
-  created() {
-    this.tabItems.unshift(this.itemName);
-  },
-  async setup() {
-    const { loggedIn, user } = useUserSession()
-    const config = useRuntimeConfig();
-    const showLogoutButton = computed(() => config.public.usingGithubAuth && loggedIn.value);
-    const mockedDataMessage = computed(() => config.public.isDataMocked ? 'Using mock data - see README if unintended' : '');
-    const itemName = computed(() => config.public.scope);
-    const githubInfo = getDisplayName(config.public)
-    const displayName = computed(() => githubInfo);
-
-    const metricsReady = ref(false);
-    const metrics = ref<Metrics[]>([]);
-    const originalMetrics = ref<CopilotMetrics[]>([]);
-    const seatsReady = ref(false);
-    const seats = ref<Seat[]>([]);
-    // API Error Message
-    const apiError = ref<string | undefined>(undefined);
-    const signInRequired = computed(() => {
-      return config.public.usingGithubAuth && !loggedIn.value;
-    });
-
-    /**
-     * Handles API errors by setting appropriate error messages.
-     * @param {H3Error} error - The error object returned from the API call.
-     */
-    function processError(error: H3Error) {
-      console.error(error || 'No data returned from API');
-      // Check the status code of the error response
-      if (error.statusCode) {
-        switch (error.statusCode) {
-          case 401:
-            apiError.value = '401 Unauthorized access returned by GitHub API - check if your token in the .env (for local runs). Check PAT token and GitHub permissions.';
-            break;
-          case 404:
-            apiError.value = `404 Not Found - is the ${config.public.scope || ''} org:"${config.public.githubOrg || ''}" ent:"${config.public.githubEnt || ''}" team:"${config.public.githubTeam}" correct? ${error.message}`;
-            break;
-          case 500:
-            apiError.value = `500 Internal Server Error - most likely a bug in the app. Error: ${error.message}`;
-            break;
-          default:
-            apiError.value = `${error.statusCode} Error: ${error.message}`;
-            break;
-        }
-      }
-    }
 
-    const metricsFetch = useFetch('/api/metrics');
-    const seatsFetch = useFetch('/api/seats');
-
-    const { data: metricsData, error: metricsError } = await metricsFetch;
-    if (metricsError.value || !metricsData.value) {
-      processError(metricsError.value as H3Error);
-    } else {
-      const apiResponse = metricsData.value as MetricsApiResponse;
-      metrics.value = apiResponse.metrics || [];
-      originalMetrics.value = apiResponse.usage || [];
-      metricsReady.value = true;
-    }
+const displayName = computed(() => getDisplayName(config.public));
 
-    if (config.public.scope === 'team' && metrics.value.length === 0 && !apiError.value) {
-      apiError.value = 'No data returned from API - check if the team exists and has any activity and at least 5 active members';
-    }
 
-    const { data: seatsData, error: seatsError } = await seatsFetch;
-    if (seatsError.value) {
-      processError(seatsError.value as H3Error);
-    } else {
-      seats.value = seatsData.value || [];
-      seatsReady.value = true;
+const metricsReady = ref(false);
+const metrics = ref<Metrics[]>([]);
+const originalMetrics = ref<CopilotMetrics[]>([]);
+const seatsReady = ref(false);
+const seats = ref<Seat[]>([]);
+const teams = ref<string[]>([]);
+
+// API Error Message
+const apiError = ref<string | undefined>(undefined);
+const signInRequired = computed(() => {
+  return config.public.usingGithubAuth && !loggedIn.value;
+});
+
+/**
+ * Handles API errors by setting appropriate error messages.
+ * @param {H3Error} error - The error object returned from the API call.
+ */
+function processError(error: H3Error) {
+  console.error(error || 'No data returned from API');
+  // Check the status code of the error response
+  if (error.statusCode) {
+    switch (error.statusCode) {
+      case 401:
+        apiError.value = '401 Unauthorized access returned by GitHub API - check if your token in the .env (for local runs). Check PAT token and GitHub permissions.';
+        break;
+      case 404:
+        apiError.value = `404 Not Found - is the ${config.public.scope || ''} org:'${config.public.githubOrg || ''} ent:'${config.public.githubEnt || ''}' team:'${config.public.githubTeam}' correct? ${error.message}`;
+        break;
+      case 500:
+        apiError.value = `500 Internal Server Error - most likely a bug in the app. Error: ${error.message}`;
+        break;
+      default:
+        apiError.value = `${error.statusCode} Error: ${error.message}`;
+        break;
     }
+  }
+}
+
+const metricsFetch = useFetch('/api/metrics');
+const seatsFetch = useFetch('/api/seats');
+
+const { data: metricsData, error: metricsError } = await metricsFetch;
+if (metricsError.value || !metricsData.value) {
+  processError(metricsError.value as H3Error);
+} else {
+  const apiResponse = metricsData.value as MetricsApiResponse;
+  metrics.value = apiResponse.metrics || [];
+  originalMetrics.value = apiResponse.usage || [];
+  metricsReady.value = true;
+}
+
+// Ensure originalMetrics is loaded
+if (metricsData.value) {
+  const apiResponse = metricsData.value as MetricsApiResponse;
+  metrics.value = apiResponse.metrics || [];
+  originalMetrics.value = apiResponse.usage || [];
+  metricsReady.value = true;
+}
+
+if (config.public.scope === 'team' && metrics.value.length === 0 && !apiError.value) {
+  apiError.value = 'No data returned from API - check if the team exists and has any activity and at least 5 active members';
+}
+
+// Ensure teams data is loaded
+//Todo: check whether the below code is needed, as it will fetch all teams for an org
+// why it is needed here? and the config.public.scope === 'organization', not org
+if (config.public.scope === 'org') {
+  const teamsFetch = useFetch('/api/teams');
+  const { data: teamsData, error: teamsError } = await teamsFetch;
+  
+  if (teamsError.value) {
+    processError(teamsError.value as H3Error);
+  } else if (teamsData.value) {
+    teams.value = teamsData.value.map((team: any) => team.name);
+    console.log("Teams data loaded in Main Component:", teams.value);
+  }
+}
 
-    return {
-      metricsReady,
-      metrics,
-      originalMetrics,
-      seatsReady,
-      seats,
-      apiError,
-      signInRequired,
-      showLogoutButton,
-      config,
-      mockedDataMessage,
-      itemName,
-      displayName,
-      user
-    };
-  },
-})
+const { data: seatsData, error: seatsError } = await seatsFetch;
+if (seatsError.value) {
+  processError(seatsError.value as H3Error);
+} else {
+  seats.value = seatsData.value || [];
+  seatsReady.value = true;
+}
+
+function logout() {
+  const { clear } = useUserSession()
+  metrics.value = [];
+  seats.value = [];
+  clear();
+}
 </script>
 
 <style scoped>
-.toolbar-title {
-  white-space: nowrap;
-  overflow: visible;
-  text-overflow: clip;
+/* Ensure the toolbar container adapts to content width */
+.v-toolbar {
+  flex-wrap: wrap; /* Allow wrapping of child elements */
+  max-width: 100%; /* Prevent overflow beyond the screen width */
+}
 
+/* Adjust toolbar-title to ensure full visibility without truncation */
+.toolbar-title {
+  color: #4CAF50; /* Highlight text with green color */
+  font-weight: bold; /* Make the text bold */
+  font-size: 1.2rem; /* Slightly increase font size */
+  white-space: nowrap; /* Prevent text wrapping */
+  overflow: visible; /* Ensure text is fully visible */
+  text-overflow: clip; /* Disable ellipsis */
+  flex: 1 1 auto; /* Allow the title to take up available space */
+  min-width: 0; /* Prevent overflow issues */
 }
 
 .error-message {
diff --git a/app/components/MetricsViewer.vue b/app/components/MetricsViewer.vue
index ce473095..b7c57770 100644
--- a/app/components/MetricsViewer.vue
+++ b/app/components/MetricsViewer.vue
@@ -186,20 +186,52 @@ export default defineComponent({
 
     const data = toRef(props, 'metrics').value;
 
+    // Combine data by day
+    const combinedDataByDay: { [key: string]: Metrics } = {};
+    data.forEach((m: Metrics) => {
+      if (!combinedDataByDay[m.day]) {
+        combinedDataByDay[m.day] = {
+          day: m.day,
+          total_suggestions_count: 0,
+          total_acceptances_count: 0,
+          total_lines_suggested: 0,
+          total_lines_accepted: 0,
+          total_active_users: 0,
+          total_chat_acceptances: 0,
+          total_chat_turns: 0,
+          total_active_chat_users: 0,
+          acceptance_rate_by_count: 0, // Add this line
+          acceptance_rate_by_lines: 0, // Add this line
+          breakdown: []
+        };
+      }
+      combinedDataByDay[m.day].total_suggestions_count += m.total_suggestions_count;
+      combinedDataByDay[m.day].total_acceptances_count += m.total_acceptances_count;
+      combinedDataByDay[m.day].total_lines_suggested += m.total_lines_suggested;
+      combinedDataByDay[m.day].total_lines_accepted += m.total_lines_accepted;
+      combinedDataByDay[m.day].total_active_users += m.total_active_users;
+      combinedDataByDay[m.day].total_chat_acceptances += m.total_chat_acceptances;
+      combinedDataByDay[m.day].total_chat_turns += m.total_chat_turns;
+      combinedDataByDay[m.day].total_active_chat_users += m.total_active_chat_users;
+    });
+
+    // Convert combined data to array and sort by day
+    const combinedDataArray = Object.values(combinedDataByDay).sort((a, b) => new Date(a.day).getTime() - new Date(b.day).getTime());
+
     cumulativeNumberSuggestions.value = 0;
-    const cumulativeSuggestionsData = data.map((m: Metrics) => {
+    const cumulativeSuggestionsData = combinedDataArray.map((m: Metrics) => {
       cumulativeNumberSuggestions.value += m.total_suggestions_count;
       return m.total_suggestions_count;
     });
 
     cumulativeNumberAcceptances.value = 0;
-    const cumulativeAcceptancesData = data.map((m: Metrics) => {
+    const cumulativeAcceptancesData = combinedDataArray.map((m: Metrics) => {
       cumulativeNumberAcceptances.value += m.total_acceptances_count;
       return m.total_acceptances_count;
     });
 
     totalSuggestionsAndAcceptanceChartData.value = {
-      labels: data.map((m: Metrics) => m.day),
+      labels: combinedDataArray.map((m: Metrics) => m.day),
       datasets: [
         {
           label: 'Total Suggestions',
@@ -219,18 +251,18 @@ export default defineComponent({
     };
 
     cumulativeNumberLOCAccepted.value = 0;
-    const cumulativeLOCAcceptedData = data.map((m: Metrics) => {
+    const cumulativeLOCAcceptedData = combinedDataArray.map((m: Metrics) => {
       const total_lines_accepted = m.total_lines_accepted;
       cumulativeNumberLOCAccepted.value += total_lines_accepted;
       return total_lines_accepted;
     });
 
     chartData.value = {
-      labels: data.map((m: Metrics) => m.day),
+      labels: combinedDataArray.map((m: Metrics) => m.day),
       datasets: [
         {
           label: 'Total Lines Suggested',
-          data: data.map((m: Metrics) => m.total_lines_suggested),
+          data: combinedDataArray.map((m: Metrics) => m.total_lines_suggested),
           backgroundColor: 'rgba(75, 192, 192, 0.2)',
           borderColor: 'rgba(75, 192, 192, 1)'
 
@@ -244,18 +276,18 @@ export default defineComponent({
       ]
     };
     
-    const acceptanceRatesByLines = data.map((m: Metrics) => {
+    const acceptanceRatesByLines = combinedDataArray.map((m: Metrics) => {
       const rate = m.total_lines_suggested !== 0 ? (m.total_lines_accepted / m.total_lines_suggested) * 100 : 0;
       return rate;
     });
 
-    const acceptanceRatesByCount = data.map((m: Metrics) => {
+    const acceptanceRatesByCount = combinedDataArray.map((m: Metrics) => {
       const rate = m.total_suggestions_count !== 0 ? (m.total_acceptances_count / m.total_suggestions_count) * 100 : 0;
       return rate;
     });
 
     acceptanceRateByLinesChartData.value = {
-      labels: data.map((m: Metrics) => m.day),
+      labels: combinedDataArray.map((m: Metrics) => m.day),
       datasets: [
         {
           type: 'line', // This makes the dataset a line in the chart
@@ -269,7 +301,7 @@ export default defineComponent({
     };
 
     acceptanceRateByCountChartData.value = {
-      labels: data.map((m: Metrics) => m.day),
+      labels: combinedDataArray.map((m: Metrics) => m.day),
       datasets: [
         {
           type: 'line', // This makes the dataset a line in the chart
@@ -282,7 +314,7 @@ export default defineComponent({
       ]
     };
     
-    totalLinesSuggested.value = data.reduce((sum: number, m: Metrics) => sum + m.total_lines_suggested, 0);
+    totalLinesSuggested.value = combinedDataArray.reduce((sum: number, m: Metrics) => sum + m.total_lines_suggested, 0);
 
     if(totalLinesSuggested.value === 0){
       acceptanceRateAverageByLines.value = 0;
@@ -297,12 +329,24 @@ export default defineComponent({
       acceptanceRateAverageByCount.value = cumulativeNumberAcceptances.value / cumulativeNumberSuggestions.value * 100;
     }
 
+    // Combine active users data by day
+    const activeUsersByDay: { [key: string]: number } = {};
+    combinedDataArray.forEach((m: Metrics) => {
+      if (!activeUsersByDay[m.day]) {
+        activeUsersByDay[m.day] = 0;
+      }
+      activeUsersByDay[m.day] += m.total_active_users;
+    });
+
+    // Sort the days to ensure the chart displays data in chronological order
+    const sortedDays = Object.keys(activeUsersByDay).sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
+
     totalActiveUsersChartData.value = {
-      labels: data.map((m: Metrics) => m.day),
+      labels: sortedDays,
       datasets: [
         {
           label: 'Total Active Users',
-          data: data.map((m: Metrics) => m.total_active_users),
+          data: sortedDays.map(day => activeUsersByDay[day]),
           backgroundColor: 'rgba(0, 0, 139, 0.2)', // dark blue with 20% opacity
           borderColor: 'rgba(255, 99, 132, 1)'
         }
diff --git a/app/components/MultiTeamsMetricsViewer.vue b/app/components/MultiTeamsMetricsViewer.vue
new file mode 100644
index 00000000..dea4cb84
--- /dev/null
+++ b/app/components/MultiTeamsMetricsViewer.vue
@@ -0,0 +1,469 @@
+<template>
+  <div>
+    <v-card>
+      <v-toolbar color="indigo" elevation="4">
+        <v-toolbar-title>{{ organization }} Teams Metrics</v-toolbar-title>
+      </v-toolbar>
+      <v-container>
+        <!-- Teams Selection -->
+        <v-row>
+          <v-col cols="12">
+            <v-select
+              v-model="selectedTeams"
+              :items="allTeams"
+              item-title="name"
+              item-value="slug"
+              label="Select Teams"
+              multiple
+              chips
+              clearable
+              persistent-hint
+              hint="Select teams to filter metrics data"
+              @change="handleTeamsChange"
+            ></v-select>
+          </v-col>
+        </v-row>
+
+        <!-- Teams Summary Table -->
+        <v-row v-if="metricsReady">
+          <v-col cols="12">
+            <v-simple-table class="elevation-1 mb-6" fixed-header height="auto">
+              <template v-slot:default>
+                <thead>
+                  <tr>
+                    <th class="text-left primary--text" style="width: 15%;">Team</th>
+                    <th class="text-center primary--text" style="width: 10%;">Total Suggestions</th>
+                    <th class="text-center primary--text" style="width: 10%;">Total Acceptances</th>
+                    <th class="text-center primary--text" style="width: 10%;">Lines Suggested</th>
+                    <th class="text-center primary--text" style="width: 10%;">Lines Accepted</th>
+                    <th class="text-center primary--text" style="width: 10%;">Chat Turns</th>
+                    <th class="text-center primary--text" style="width: 10%;">Chat Acceptances</th>
+                    <th class="text-center primary--text" style="width: 12.5%;">Acceptance Rate (Count)</th>
+                    <th class="text-center primary--text" style="width: 12.5%;">Acceptance Rate (Lines)</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="item in displayedTeamsSummary" :key="item.team">
+                    <td class="text-left font-weight-medium">{{ item.team.name }}</td>
+                    <td class="text-center">{{ item.total_suggestions_count.toLocaleString() }}</td>
+                    <td class="text-center">{{ item.total_acceptances_count.toLocaleString() }}</td>
+                    <td class="text-center">{{ item.total_lines_suggested.toLocaleString() }}</td>
+                    <td class="text-center">{{ item.total_lines_accepted.toLocaleString() }}</td>
+                    <td class="text-center">{{ item.total_chat_turns.toLocaleString() }}</td>
+                    <td class="text-center">{{ item.total_chat_acceptances.toLocaleString() }}</td>
+                    <td class="text-center">{{ (item.acceptance_rate_by_count * 100).toFixed(2) }}%</td>
+                    <td class="text-center">{{ (item.acceptance_rate_by_lines * 100).toFixed(2) }}%</td>
+                  </tr>
+                  <tr v-if="displayedTeamsSummary.length === 0">
+                    <td colspan="9" class="text-center py-4">No data available</td>
+                  </tr>
+                </tbody>
+              </template>
+            </v-simple-table>
+          </v-col>
+        </v-row>
+
+        <!-- Loading State -->
+        <v-row v-else>
+          <v-col cols="12" class="text-center">
+            <v-progress-circular indeterminate color="primary"></v-progress-circular>
+          </v-col>
+        </v-row>
+
+        <!-- Metrics Viewer -->
+        <v-row>
+          <v-col cols="12">
+            <div v-if="metricsReady" class="metrics-container">
+              <div class="metrics-title">
+                Detailed Metrics for {{ selectedTeams.length ? selectedTeamNames.join(', ') : 'All Teams' }}
+              </div>
+              <!-- Generated by Copilot: Using descriptive key based on selected teams -->
+              <MetricsViewer 
+                v-if="filteredMetrics.length"
+                :key="`metrics-${selectedTeams.length ? selectedTeamNames.join('-') : 'all'}`"
+                :metrics="filteredMetrics"
+              />
+              <v-alert
+                v-else
+                type="info"
+                text
+              >
+                No metrics data available for the selected teams.
+              </v-alert>
+            </div>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, onMounted } from 'vue';
+import { useRoute } from 'vue-router'; 
+import type { Metrics, Team, TeamMetricData, TeamAwareMetrics } from '../model/Metrics';
+import MetricsViewer from './MetricsViewer.vue';
+
+
+
+//Define props， it is from the parent component
+// to pass the teams to this component, it only includes the team name, no team slug
+const props = defineProps<{
+  teams: string[]
+}>();
+
+// Generated by Copilot: Get organization directly from route and config
+//const route = useRoute()
+
+console.log('teams in MultiTeamsMetricsViewer:', props.teams);
+
+const config = useRuntimeConfig();
+
+// Generated by Copilot: Use computed property to get organization from route params or config
+const organization = computed(() => {
+  //output the current route params and query
+  console.log('config in MultiTeamsMetricsView', config.public);
+  /* console.log('Route params:', route.params);
+  console.log('Route query:', route.query);
+
+  if (route.params.org) {
+    return route.params.org as string;
+  } */
+  // the config.public.githubOrg maybe changed in the index.vue since it support route there
+
+  return config.public.githubOrg;
+});
+
+// add a team interface to define the structure of team data
+
+// Generated by Copilot: Define reactive variables
+const allTeams = ref<Team[]>([]);
+const selectedTeams = ref<string[]>([]); // Contains team slugs
+
+const metricsReady = ref(false);
+
+// Generated by Copilot: Update type definition to use TeamAwareMetrics interface
+const allMetrics = ref<TeamAwareMetrics[]>([]);
+
+// Generated by Copilot: Update type definition to use TeamAwareMetrics interface for filtered metrics
+const filteredMetrics = ref<TeamAwareMetrics[]>([]);
+
+// for table display, it is a summary of metrics for all selected teams, with team info
+// Generated by Copilot: Updated type to use TeamMetricData interface
+const teamMetrics = ref<TeamMetricData[]>([]);
+const error = ref<string | null>(null);
+
+// Generated by Copilot: Function to handle team selection change
+const handleTeamsChange = () => {
+  // Update filtered metrics when teams selection changes
+  if (selectedTeams.value.length > 0) {
+    // Generated by Copilot: Filter metrics by selected team slugs instead of team names
+    // Since we now have both team name and teamSlug in each metric
+    filteredMetrics.value = allMetrics.value.filter(metric => 
+      selectedTeams.value.includes(metric.teamSlug)
+    );
+  } else {
+    // Generated by Copilot: Show all metrics when no team is selected
+    filteredMetrics.value = [...allMetrics.value];
+  }
+};
+
+// Generated by Copilot: Function to fetch team metrics data - only called once initially
+const fetchTeamsMetrics = async () => {
+  try {
+    metricsReady.value = false;
+    error.value = null;
+    
+    const teamsToFetch = allTeams.value;
+    
+    if (!teamsToFetch || teamsToFetch.length === 0) {
+      error.value = 'No teams available to fetch metrics';
+      metricsReady.value = true;
+      return;
+    }
+
+    const currentOrg = organization.value;
+    
+ //   console.log('Fetching metrics for teams:', teamsToFetch, 'in organization:', currentOrg);
+    // Generated by Copilot: Using Nuxt's $fetch instead of direct API call
+    const response = await $fetch('/api/teams-metrics', {
+      method: 'POST',
+      body: {
+        teams: teamsToFetch,
+        organization: currentOrg
+      }
+    });
+
+    if (response?.teamMetrics?.length > 0) {
+      // Generated by Copilot: Store team metrics for table display
+      teamMetrics.value = response.teamMetrics;
+      
+      // Generated by Copilot: Use the metrics array directly from the API response
+      // This array already includes both team and teamSlug fields for each metric
+      if (Array.isArray(response.metrics)) {
+        allMetrics.value = response.metrics;
+      } else {
+        // Generated by Copilot: Fallback to the old approach if metrics aren't in the expected format
+        allMetrics.value = [];
+        response.teamMetrics.forEach(teammetric => {
+          teammetric.metrics.forEach(metric => {
+            const metricWithTeam = structuredClone(metric);
+            metricWithTeam.team = teammetric.team.name;
+            metricWithTeam.teamSlug = teammetric.team.slug;
+            allMetrics.value.push(metricWithTeam);
+          });
+        });
+      }
+      
+      // Generated by Copilot: Apply initial filtering
+      handleTeamsChange();
+    } else {
+      allMetrics.value = [];
+      filteredMetrics.value = [];
+      teamMetrics.value = [];
+      error.value = 'No metrics data available for the teams';
+    }
+  } catch (err) {
+    allMetrics.value = [];
+    filteredMetrics.value = [];
+    teamMetrics.value = [];
+    error.value = 'Failed to fetch team metrics. Please try again later.';
+    console.error('Error fetching team metrics:', err);
+  } finally {
+    metricsReady.value = true;
+  }
+};
+
+// Generated by Zhuang
+// Modified fetchAllTeams to use $fetch for mounted component compatibility
+const fetchAllTeams = async () => {
+  try {
+    error.value = null;
+    
+    const currentOrg = organization.value;
+    if (!currentOrg) {
+      return;
+    }
+
+    console.log('Current teams in props:', props.teams);
+    console.log('Current teams in config', config.public.githubTeam);
+    // Get teams from props first, then from config, fallback to empty string
+    // Generated by Zhuang
+    const currentTeams = props.teams?.length > 0 
+      ? props.teams 
+      : (config.public.githubTeam || '');
+    console.log('Current teams now is :', currentTeams);
+
+    // console.log('Current public info  in fetchAllTeams in multi-teams:', config.public);
+    // console.log('current config.public.teams are:', config.public.githubTeam);
+    // const currentTeams = config.public.githubTeam !== undefined ? config.public.githubTeam : '';
+
+    // console.log('Current organization in mulit-teams:', currentOrg);
+    // console.log('Current teams in mulit-teams:', currentTeams);
+    // console.log('Current teams in config:', config.public.githubTeam);
+    // // Generated by Zhuang: Using $fetch as recommended for mounted components
+    // // This avoids the "Component is already mounted" warning with useFetch
+    // console.log(`Fetching teams for organization: ${currentOrg}`);
+    const response = await $fetch('/api/teams', {
+      params: { 
+      organization: currentOrg,
+      teams: currentTeams
+      }
+    });
+    
+    if (Array.isArray(response)) {
+      // for each team, need to get both team name and team slug
+      allTeams.value = response.map(team => ({
+          name: team.name,
+          slug: team.slug
+      }));
+      
+      // console.log(`Successfully fetched ${allTeams.value.length} teams for ${currentOrg}`);
+      if (allTeams.value.length > 0) {
+        await fetchTeamsMetrics();
+      }
+    } else {
+      console.error('Teams data is not an array:', response);
+      error.value = 'Invalid teams data received';
+    }
+  } catch (err) {
+    console.error('Exception in fetchAllTeams:', err);
+    error.value = 'Failed to fetch teams. Please try again later.';
+  }
+};
+
+// Generated by Copilot: Watch organization changes
+watch(organization, async (newOrg, oldOrg) => {
+  if (newOrg && newOrg !== oldOrg) {
+    // Generated by Copilot: Reset data when organization changes
+    selectedTeams.value = []; 
+    allTeams.value = []; 
+    teamMetrics.value = []; 
+    allMetrics.value = []; 
+    filteredMetrics.value = []; 
+    
+    // Generated by Copilot: Fetch teams for new organization
+    await fetchAllTeams(); 
+    await fetchTeamsMetrics(); // Fetch metrics for the new organization
+  }
+}, { immediate: true });
+
+// Generated by Copilot: Watch for teams prop changes
+watch(() => props.teams, (newTeams) => {
+  if (newTeams.length > 0) {
+    console.log('Teams prop changed to:', newTeams);
+    selectedTeams.value = []; // Reset selection when teams list changes
+    allTeams.value = newTeams;
+    fetchTeamsMetrics();
+  }
+}, { immediate: true });
+
+// Generated by Copilot: Add explicit watch for selectedTeams to ensure data updates
+watch(() => selectedTeams.value, () => {
+  // Generated by Copilot: Update filtered metrics when team selection changes
+  handleTeamsChange();
+}, { deep: true });
+
+// Generated by Copilot: Load initial data
+onMounted(async () => {
+  // Fetch all teams for the current organization
+  console.log('MultiTeamsMetricsViewer component mounted!');
+  console.log('Current config public are', config.public);
+  await fetchAllTeams();
+
+  if (props.teams?.length > 0) {
+    // Filter teams based on props.teams (matching by team.name)
+    const filteredTeams = allTeams.value.filter(team =>
+      props.teams.includes(team.name)
+    );
+
+    // Update allTeams to the filtered list
+    allTeams.value = filteredTeams;
+  }
+
+  // Fetch metrics for the filtered or all teams
+  await fetchTeamsMetrics();
+  
+});
+
+// Generated by Copilot: Calculate team summaries
+const displayedTeamsSummary = computed(() => {
+  if (!teamMetrics.value.length) return [];
+  
+  // Generated by Copilot: Filter team metrics based on selected team slugs
+  const teamsToDisplay = selectedTeams.value.length > 0
+    ? teamMetrics.value.filter(tm => selectedTeams.value.includes(tm.team.slug))
+    : teamMetrics.value;
+  
+  return teamsToDisplay.map(tm => {
+    const summary = tm.metrics.reduce((acc, metric) => {
+      acc.total_suggestions_count += metric.total_suggestions_count;
+      acc.total_acceptances_count += metric.total_acceptances_count;
+      acc.total_lines_suggested += metric.total_lines_suggested;
+      acc.total_lines_accepted += metric.total_lines_accepted;
+      acc.total_chat_acceptances += metric.total_chat_acceptances;
+      acc.total_chat_turns += metric.total_chat_turns;
+      return acc;
+    }, {
+      team: tm.team, // This is now an object with name and slug
+      total_suggestions_count: 0,
+      total_acceptances_count: 0,
+      total_lines_suggested: 0,
+      total_lines_accepted: 0,
+      total_chat_acceptances: 0,
+      total_chat_turns: 0,
+      acceptance_rate_by_count: 0,
+      acceptance_rate_by_lines: 0
+    });
+    
+    summary.acceptance_rate_by_count = summary.total_suggestions_count > 0 
+      ? summary.total_acceptances_count / summary.total_suggestions_count 
+      : 0;
+    summary.acceptance_rate_by_lines = summary.total_lines_suggested > 0 
+      ? summary.total_lines_accepted / summary.total_lines_suggested 
+      : 0;
+    
+    return summary;
+  });
+});
+
+// Generated by Copilot: Compute selected team names for display
+const selectedTeamNames = computed(() => {
+  return allTeams.value
+    .filter(team => selectedTeams.value.includes(team.slug))
+    .map(team => team.name);
+});
+</script>
+
+<style scoped>
+.v-toolbar-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.v-simple-table {
+  margin: 0 16px 20px 16px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  width: calc(100% - 32px);
+}
+
+/* Table header styles */
+:deep(.v-simple-table > .v-table__wrapper > table > thead > tr > th) {
+  background: linear-gradient(to bottom, #f5f7ff, #e8eaf6);
+  color: #1a237e;
+  font-weight: 600;
+  padding: 12px 16px;
+  font-size: 0.875rem;
+  border-bottom: 2px solid #1a237e;
+  white-space: nowrap;
+}
+
+/* Table body styles */
+:deep(.v-simple-table > .v-table__wrapper > table > tbody > tr > td) {
+  padding: 12px 16px;
+  font-size: 0.875rem;
+  border-bottom: 1px solid #e8eaf6;
+}
+
+/* Zebra striping */
+:deep(.v-simple-table > .v-table__wrapper > table > tbody > tr:nth-child(even)) {
+  background-color: #fafafa;
+}
+
+/* Hover effect */
+:deep(.v-simple-table > .v-table__wrapper > table > tbody > tr:hover) {
+  background-color: rgba(26, 35, 126, 0.04);
+}
+
+/* Metrics container styles */
+.metrics-container {
+  padding: 16px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
+}
+
+.metrics-title {
+  font-size: 1.1rem;
+  font-weight: 500;
+  color: #1a237e;
+  margin-bottom: 16px;
+  padding-left: 8px;
+  border-left: 4px solid #1a237e;
+}
+
+/* Select field styles */
+:deep(.v-select) {
+  margin-bottom: 16px;
+}
+
+:deep(.v-select__slot) {
+  border-color: #1a237e;
+}
+
+:deep(.v-select__selection) {
+  color: #1a237e;
+}
+</style>
diff --git a/app/components/SeatsAnalysisViewer.vue b/app/components/SeatsAnalysisViewer.vue
index 3b9c58e5..40404699 100644
--- a/app/components/SeatsAnalysisViewer.vue
+++ b/app/components/SeatsAnalysisViewer.vue
@@ -1,8 +1,7 @@
 <template>
     <div class="tiles-container">
-        <v-card
-elevation="4" color="white" variant="elevated" class="mx-auto my-4"
-            style="width: 330px; height: 175px;">
+        <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-4"
+            style="width: 330px; height: 175px;" @click="selectCategory('totalAssigned')">
             <v-card-item class="d-flex justify-center align-center">
                 <div class="tiles-text">
                     <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
@@ -15,9 +14,8 @@ elevation="4" color="white" variant="elevated" class="mx-auto my-4"
             </v-card-item>
         </v-card>
 
-        <v-card
-elevation="4" color="white" variant="elevated" class="mx-auto my-3"
-            style="width: 300px; height: 175px;">
+        <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3"
+            style="width: 300px; height: 175px;" @click="selectCategory('assignedButNeverUsed')">
             <v-card-item class="d-flex justify-center align-center">
                 <div class="tiles-text">
                     <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
@@ -29,7 +27,8 @@ elevation="4" color="white" variant="elevated" class="mx-auto my-3"
                 </div>
             </v-card-item>
         </v-card>
-        <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-4" style="width: 330px; height: 175px;">
+        <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-4"
+            style="width: 330px; height: 175px;" @click="selectCategory('noActivity7Days')">
             <v-card-item class="d-flex justify-center align-center">
                 <div class="tiles-text">
                     <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
@@ -41,7 +40,8 @@ elevation="4" color="white" variant="elevated" class="mx-auto my-3"
                 </div>
             </v-card-item>
         </v-card>
-        <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-4" style="width: 330px; height: 175px;">
+        <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-4"
+            style="width: 330px; height: 175px;" @click="selectCategory('noActivity30Days')">
             <v-card-item class="d-flex justify-center align-center">
                 <div class="tiles-text">
                     <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
@@ -53,6 +53,53 @@ elevation="4" color="white" variant="elevated" class="mx-auto my-3"
                 </div>
             </v-card-item>
         </v-card>
+        <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-4"
+            style="width: 330px; height: 175px;" @click="selectCategory('noActivity60Days')">
+            <v-card-item class="d-flex justify-center align-center">
+                <div class="tiles-text">
+                    <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
+                    <div class="text-h6 mb-1">No Activity in the Last 60 days </div>
+                    <div class="text-caption">
+                        No use in the last 60 days
+                    </div>
+                    <p class="text-h4">{{ unusedSeatsInSixtyDays }}</p>
+                </div>
+            </v-card-item>
+        </v-card>
+
+        <!-- comment the new card for 15 days and 10 days as it is not must now.-->
+        <!-- New card for 15 days inactive users -->
+         <!--
+        <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-4"
+            style="width: 330px; height: 175px;" @click="selectCategory('noActivity15Days')">
+            <v-card-item class="d-flex justify-center align-center">
+                <div class="tiles-text">
+                    <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
+                    <div class="text-h6 mb-1">No Activity in the Last 15 days </div>
+                    <div class="text-caption">
+                        No use in the last 15 days
+                    </div>
+                    <p class="text-h4">{{ unusedSeatsInFifteenDays }}</p>
+                </div>
+            </v-card-item>
+        </v-card>
+        -->
+        <!-- New card for 10 days inactive users -->
+        <!--
+        <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-4"
+            style="width: 330px; height: 175px;" @click="selectCategory('noActivity10Days')">
+            <v-card-item class="d-flex justify-center align-center">
+                <div class="tiles-text">
+                    <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
+                    <div class="text-h6 mb-1">No Activity in the Last 10 days </div>
+                    <div class="text-caption">
+                        No use in the last 10 days
+                    </div>
+                    <p class="text-h4">{{ unusedSeatsInTenDays }}</p>
+                </div>
+            </v-card-item>
+        </v-card>
+        -->
     </div>
     
     <div>
@@ -61,18 +108,18 @@ elevation="4" color="white" variant="elevated" class="mx-auto my-3"
                 <br>
                 <h2>All assigned seats </h2>
                 <br>
-            <v-data-table :headers="headers" :items="totalSeats" :items-per-page="10" class="elevation-2">
-                <template #item="{ item, index }">
-                    <tr>
-                        <td>{{ index + 1 }}</td>
-                        <td>{{ item.login }}</td>
-                        <td>{{ item.id }}</td>
-                        <td>{{ item.team }}</td>
-                        <td>{{ item.created_at }}</td>
-                        <td>{{ item.last_activity_at }}</td>
-                        <td>{{ item.last_activity_editor }}</td>
-                    </tr>
-                </template>
+                <v-data-table :headers="headers" :items="filteredSeats" :items-per-page="10" class="elevation-2">
+                    <template v-slot:item="{ item, index }">
+                        <tr>
+                            <td>{{ index + 1 }}</td>
+                            <td>{{ item.login }}</td>
+                            <td>{{ item.id }}</td>
+                            <td>{{ item.team }}</td>
+                            <td>{{ item.created_at }}</td>
+                            <td>{{ item.last_activity_at }}</td>
+                            <td>{{ item.last_activity_editor }}</td>
+                        </tr>
+                    </template>
                 </v-data-table>
             </v-container>
         </v-main>
@@ -116,15 +163,35 @@ props: {
             default: () => []  
         }
     },
-setup(props) {
-    const totalSeats = ref<Seat[]>([]);
+    data() {
+        return {
+            headers: [
+                { title: 'S.No', key: 'serialNumber' },
+                { title: 'Login', key: 'login' },
+                { title: 'GitHub ID', key: 'id' },
+                { title: 'Assigning team', key: 'team' },
+                { title: 'Assigned time', key: 'created_at' },
+                { title: 'Last Activity At', key: 'last_activity_at' },
+                { title: 'Last Activity Editor', key: 'last_activity_editor' },
+            ],
+            selectedCategory: 'totalAssigned' // Generated by Copilot: Add state to track selected category
+        };
+    },
+    setup(props) {
+        let totalSeats = ref<Seat[]>([]);
         const noshowSeats = ref<number>(0);
         const unusedSeatsInSevenDays = ref<number>(0);
         const unusedSeatsInThirtyDays = ref<number>(0);
+        const unusedSeatsInSixtyDays = ref<number>(0); // Add new ref
+        const unusedSeatsInTenDays = ref<number>(0); // Add new ref
+        const unusedSeatsInFifteenDays = ref<number>(0); // Add new ref
 
         let noshowCount = 0;
         let unusedIn7Count = 0;
         let unusedIn30Count = 0;
+        let unusedIn60Count = 0; // Add new counter
+        let unusedIn10Count = 0; // Add new counter
+        let unusedIn15Count = 0; // Add new counter
 
         watchEffect(() => {
             if (props.seats && Array.isArray(props.seats)) {
@@ -132,8 +199,14 @@ setup(props) {
 
                 const oneWeekAgo = new Date();
                 const thirtyDaysAgo = new Date();
+                const sixtyDaysAgo = new Date(); // Add new date
+                const tenDaysAgo = new Date(); // Add new date
+                const fifteenDaysAgo = new Date(); // Add new date
                 oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
                 thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
+                sixtyDaysAgo.setDate(sixtyDaysAgo.getDate() - 60); // Add new date calculation
+                tenDaysAgo.setDate(tenDaysAgo.getDate() - 10); // Add new date calculation
+                fifteenDaysAgo.setDate(fifteenDaysAgo.getDate() - 15); // Add new date calculation
 
                 props.seats.forEach(seat => {
                     if (seat.last_activity_at === null) {
@@ -146,6 +219,15 @@ setup(props) {
                         if (lastActivityDate < thirtyDaysAgo) {
                             unusedIn30Count++;
                         }
+                        if (lastActivityDate < sixtyDaysAgo) { // Add new condition
+                            unusedIn60Count++;
+                        }
+                        if (lastActivityDate < tenDaysAgo) { // Add new condition
+                            unusedIn10Count++;
+                        }
+                        if (lastActivityDate < fifteenDaysAgo) { // Add new condition
+                            unusedIn15Count++;
+                        }
                     }
                 });
 
@@ -168,27 +250,128 @@ setup(props) {
         noshowSeats.value = noshowCount;
         unusedSeatsInSevenDays.value = unusedIn7Count;
         unusedSeatsInThirtyDays.value = unusedIn30Count;
+        unusedSeatsInSixtyDays.value = unusedIn60Count; // Add new value assignment
+        unusedSeatsInTenDays.value = unusedIn10Count; // Add new value assignment
+        unusedSeatsInFifteenDays.value = unusedIn15Count; // Add new value assignment
 
         return {
             totalSeats,
             noshowSeats: noshowSeats,
             unusedSeatsInSevenDays: unusedSeatsInSevenDays,
-            unusedSeatsInThirtyDays: unusedSeatsInThirtyDays
+            unusedSeatsInThirtyDays: unusedSeatsInThirtyDays,
+            unusedSeatsInSixtyDays: unusedSeatsInSixtyDays,
+            unusedSeatsInTenDays: unusedSeatsInTenDays,
+            unusedSeatsInFifteenDays // Add to return object
         }
-},
-data() {
-    return {
-        headers: [
-            { title: 'S.No', key: 'serialNumber'},
-            { title: 'Login', key: 'login' },
-            { title: 'GitHub ID', key: 'id' },
-            { title: 'Assigning team', key: 'team' },
-            { title: 'Assigned time', key: 'created_at' },
-            { title: 'Last Activity At', key: 'last_activity_at' },
-            { title: 'Last Activity Editor', key: 'last_activity_editor' },
-        ],
-    };
-}   
-  
+    },
+    computed: {
+        filteredSeats() {
+            const oneWeekAgo = new Date();
+            oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
+            const thirtyDaysAgo = new Date();
+            thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
+            const sixtyDaysAgo = new Date();
+            sixtyDaysAgo.setDate(sixtyDaysAgo.getDate() - 60);
+            const tenDaysAgo = new Date();
+            tenDaysAgo.setDate(tenDaysAgo.getDate() - 10);
+            const fifteenDaysAgo = new Date();
+            fifteenDaysAgo.setDate(fifteenDaysAgo.getDate() - 15);
+
+            switch (this.selectedCategory) { // Generated by Copilot: Filter seats based on selected category
+                case 'assignedButNeverUsed':
+                    return this.totalSeats.filter(seat => seat.last_activity_at === null);
+                case 'noActivity7Days':
+                    return this.totalSeats.filter(seat => seat.last_activity_at && new Date(seat.last_activity_at) < oneWeekAgo);
+                case 'noActivity30Days':
+                    return this.totalSeats.filter(seat => seat.last_activity_at && new Date(seat.last_activity_at) < thirtyDaysAgo);
+                case 'noActivity60Days':
+                    return this.totalSeats.filter(seat => seat.last_activity_at && new Date(seat.last_activity_at) < sixtyDaysAgo);
+                case 'noActivity10Days':
+                    return this.totalSeats.filter(seat => seat.last_activity_at && new Date(seat.last_activity_at) < tenDaysAgo);
+                case 'noActivity15Days':
+                    return this.totalSeats.filter(seat => seat.last_activity_at && new Date(seat.last_activity_at) < fifteenDaysAgo);
+                default:
+                    return this.totalSeats;
+            }
+        }
+    },
+    methods: {
+        selectCategory(category: string) { // Generated by Copilot: Method to update selected category
+            this.selectedCategory = category;
+        }
+    }
 });
 </script>
+
+<style scoped>
+.v-toolbar-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.v-simple-table {
+    margin: 0 16px 20px 16px;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    width: calc(100% - 32px);
+}
+
+/* Table header styles */
+:deep(.v-simple-table > .v-table__wrapper > table > thead > tr > th) {
+    background: linear-gradient(to bottom, #f5f7ff, #e8eaf6);
+    color: #1a237e;
+    font-weight: 600;
+    padding: 12px 16px;
+    font-size: 0.875rem;
+    border-bottom: 2px solid #1a237e;
+    white-space: nowrap;
+}
+
+/* Table body styles */
+:deep(.v-simple-table > .v-table__wrapper > table > tbody > tr > td) {
+    padding: 12px 16px;
+    font-size: 0.875rem;
+    border-bottom: 1px solid #e8eaf6;
+}
+
+/* Zebra striping */
+:deep(.v-simple-table > .v-table__wrapper > table > tbody > tr:nth-child(even)) {
+    background-color: #fafafa;
+}
+
+/* Hover effect */
+:deep(.v-simple-table > .v-table__wrapper > table > tbody > tr:hover) {
+    background-color: rgba(26, 35, 126, 0.04);
+}
+
+/* Metrics container styles */
+.metrics-container {
+    padding: 16px;
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+}
+
+.metrics-title {
+    font-size: 1.1rem;
+    font-weight: 500;
+    color: #1a237e;
+    margin-bottom: 16px;
+    padding-left: 8px;
+    border-left: 4px solid #1a237e;
+}
+
+/* Select field styles */
+:deep(.v-select) {
+    margin-bottom: 16px;
+}
+
+:deep(.v-select__slot) {
+    border-color: #1a237e;
+}
+
+:deep(.v-select__selection) {
+    color: #1a237e;
+}
+</style>
diff --git a/app/model/Copilot_Metrics.ts b/app/model/Copilot_Metrics.ts
index 2619157f..14cdbf7b 100644
--- a/app/model/Copilot_Metrics.ts
+++ b/app/model/Copilot_Metrics.ts
@@ -1,4 +1,3 @@
-
 export class CopilotIdeCodeCompletionsEditorModelLanguage {
   name: string;
   total_engaged_users: number;
@@ -225,4 +224,11 @@ export class CopilotMetrics {
       : null;
   }
 
+}
+
+export function ensureCopilotMetrics(data: any): CopilotMetrics[] {
+  if (!Array.isArray(data)) {
+    return [new CopilotMetrics(data)];
+  }
+  return data.map(item => new CopilotMetrics(item));
 }
\ No newline at end of file
diff --git a/app/model/Metrics.ts b/app/model/Metrics.ts
index ca75eb01..26d9a598 100644
--- a/app/model/Metrics.ts
+++ b/app/model/Metrics.ts
@@ -52,4 +52,22 @@ export class BreakdownData {
       this.acceptance_rate_by_count = this.total_suggestions_count !== 0 ? (this.total_acceptances_count / this.total_suggestions_count) * 100 : 0;
       this.acceptance_rate_by_lines = this.total_lines_suggested !== 0 ? (this.total_lines_accepted / this.total_lines_suggested) * 100 : 0;
     }
-  }
\ No newline at end of file
+  }
+
+// Generated by Copilot: Define team interface for consistent team data structure
+export interface Team {
+  name: string;
+  slug: string;
+}
+
+// Generated by Copilot: Define team metrics data structure for API responses
+export interface TeamMetricData {
+  team: Team;
+  metrics: Metrics[];
+}
+
+// Generated by Copilot: Define extended metrics type that includes team information
+export interface TeamAwareMetrics extends Metrics {
+  team: string;     // Team name for display purposes
+  teamSlug: string; // Team slug for unique identification and filtering
+}
\ No newline at end of file
diff --git a/app/router.options.ts b/app/router.options.ts
index c74a5b34..d5c1cd72 100644
--- a/app/router.options.ts
+++ b/app/router.options.ts
@@ -11,7 +11,9 @@ export default {
         {
             name: 'org',
             path: '/orgs/:org',
-            component: () => import('~/pages/index.vue')
+            component: () => import('~/pages/index.vue'),
+            // Add alternative path for organization
+            alias: '/organization/:org'
         },
         {
             name: 'team',
@@ -21,7 +23,9 @@ export default {
         {
             name: 'ent',
             path: '/enterprises/:ent',
-            component: () => import('~/pages/index.vue')
+            component: () => import('~/pages/index.vue'),
+            // Add alternative path for enterprise
+            alias: '/enterprise/:ent'
         }
     ],
 } satisfies RouterConfig
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 3b920c8d..dcc06c8d 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -87,14 +87,13 @@ export default defineNuxtConfig({
       }
     },
     public: {
-      isDataMocked: false,  // can be overridden by NUXT_PUBLIC_IS_DATA_MOCKED environment variable
-      scope: 'organization',  // can be overridden by NUXT_PUBLIC_SCOPE environment variable
-      githubOrg: '',
-      githubEnt: '',
-      githubTeam: '',
-      usingGithubAuth: false,
-      version,
-      isPublicApp: false
+      isDataMocked: process.env.NUXT_PUBLIC_IS_DATA_MOCKED === 'true',
+      scope: process.env.NUXT_PUBLIC_SCOPE || 'organization',
+      githubOrg: process.env.NUXT_PUBLIC_GITHUB_ORG || '',
+      githubEnt: process.env.NUXT_PUBLIC_GITHUB_ENT || '',
+      githubTeam: process.env.NUXT_PUBLIC_GITHUB_TEAM || '',
+      usingGithubAuth: process.env.NUXT_PUBLIC_USING_GITHUB_AUTH === 'true',
+      version: process.env.npm_package_version || '0.0.0',
     }
   }
 })
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index aa02ce33..2f049a2d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
         "nuxt-auth-utils": "^0.5.7",
         "roboto-fontface": "^0.10.0",
         "undici": "^7.3.0",
-        "vue": "*",
+        "vue": "latest",
         "vue-chartjs": "^5.3.2",
         "vuetify": "^3.7.3",
         "webfontloader": "^1.6.28"
diff --git a/server/api/metrics.ts b/server/api/metrics.ts
index 98aedda4..739e01f4 100644
--- a/server/api/metrics.ts
+++ b/server/api/metrics.ts
@@ -1,7 +1,9 @@
 import type { CopilotMetrics } from "@/model/Copilot_Metrics";
 import { convertToMetrics } from '@/model/MetricsToUsageConverter';
+import { ensureCopilotMetrics } from '@/model/Copilot_Metrics'; // Import the ensureCopilotMetrics function from model
 import type { MetricsApiResponse } from "@/types/metricsApiResponse";
 import type FetchError from 'ofetch';
+import { getTeamSlugByName } from './teams'; // Import getTeamSlugByName function
 
 // TODO: use for storage https://unstorage.unjs.io/drivers/azure
 
@@ -17,7 +19,14 @@ export default defineEventHandler(async (event) => {
 
     switch (event.context.scope) {
         case 'team':
-            apiUrl = `https://api.github.com/orgs/${event.context.org}/team/${event.context.team}/copilot/metrics`;
+
+            // get team slug by name, then use it to get the metrics
+            const teamSlug = await getTeamSlugByName(event, event.context.team, event.context.org);
+            if (!teamSlug) {
+                logger.error(`Team slug not found for team: ${event.context.team}`);
+                return new Response(`Team slug not found for team: ${event.context.team}`, { status: 404 });
+            }
+            apiUrl = `https://api.github.com/orgs/${event.context.org}/team/${teamSlug}/copilot/metrics`;
             // no team test data available, using org data
             // '../../app/mock-data/organization_metrics_response_sample.json'
             mockedDataPath = resolve('public/mock-data/organization_metrics_response_sample.json');
@@ -60,28 +69,13 @@ export default defineEventHandler(async (event) => {
         }) as unknown[];
 
         // usage is the new API format
+        // Define a proper type for the response to maintain type safety
         const usageData = ensureCopilotMetrics(response as CopilotMetrics[]);
         // metrics is the old API format
         const metricsData = convertToMetrics(usageData);
         return { metrics: metricsData, usage: usageData } as MetricsApiResponse;
-    } catch (error: FetchError) {
+    } catch (error: any) {
         logger.error('Error fetching metrics data:', error);
         return new Response('Error fetching metrics data: ' + error, { status: error.statusCode || 500 });
     }
-})
-
-function ensureCopilotMetrics(data: CopilotMetrics[]): CopilotMetrics[] {
-    return data.map(item => {
-        if (!item.copilot_ide_code_completions) {
-            item.copilot_ide_code_completions = { editors: [], total_engaged_users: 0, languages: [] };
-        }
-        item.copilot_ide_code_completions.editors?.forEach((editor) => {
-            editor.models?.forEach((model) => {
-                if (!model.languages) {
-                    model.languages = [];
-                }
-            });
-        });
-        return item as CopilotMetrics;
-    });
-};
\ No newline at end of file
+})
\ No newline at end of file
diff --git a/server/api/teams-metrics.post.ts b/server/api/teams-metrics.post.ts
new file mode 100644
index 00000000..bbe9c930
--- /dev/null
+++ b/server/api/teams-metrics.post.ts
@@ -0,0 +1,107 @@
+// Generated by Copilot
+import { defineEventHandler, readBody } from 'h3';
+import type { CopilotMetrics } from "@/model/Copilot_Metrics";
+import { convertToMetrics } from '@/model/MetricsToUsageConverter';
+import { ensureCopilotMetrics } from '@/model/Copilot_Metrics';
+import type { MetricsApiResponse } from "@/types/metricsApiResponse";
+import { getTeams } from './teams';
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+
+/**
+ * Handler for multiple teams metrics API endpoint
+ * This endpoint processes metrics for multiple teams simultaneously
+ * 
+ * Generated by Copilot
+ */
+export default defineEventHandler(async (event) => {
+    const body = await readBody(event);
+    const config = useRuntimeConfig(event);
+    const logger = console;
+    
+    // Extract teams and organization from the request body or fetch them if not provided
+    let { teams = [] as { name: string; slug: string }[], organization } = body;
+    const orgName = organization || config.public.githubOrg;
+    
+    // If teams array is empty or not provided, fetch teams from the API
+    if (!teams || teams.length === 0) {
+        logger.info(`No teams provided in request body, fetching teams for organization: ${orgName}`);
+        try {
+            teams = await getTeams(event, orgName);
+        } catch (error) {
+            logger.error(`Failed to fetch teams for organization ${orgName}:`, error);
+            return new Response(`Failed to fetch teams for organization ${orgName}`, { status: 500 });
+        }
+    }
+    
+    if (!event.context.headers.has('Authorization')) {
+        return new Response('No Authentication provided', { status: 401 });
+    }
+
+    const allMetrics = [];
+    const teamMetrics = [];
+
+    // If mock mode is enabled
+    if (config.public.isDataMocked) {
+        const mockedDataPath = resolve('public/mock-data/organization_metrics_response_sample.json');
+        const data = readFileSync(mockedDataPath, 'utf8');
+        const dataJson = JSON.parse(data);
+        const usageData = ensureCopilotMetrics(dataJson);
+        const metricsData = convertToMetrics(usageData);
+
+        // Replicate mock data for each team
+        for (const team of teams) {
+            teamMetrics.push({ team: { name: team.name, slug: team.slug }, metrics: metricsData });
+            allMetrics.push(...metricsData.map(metric => ({
+                ...metric,
+                team: team.name,
+                teamSlug: team.slug
+            })));
+        }
+
+        return { metrics: allMetrics, teamMetrics };
+    }
+
+    // Handle real API calls
+    for (const team of teams) {
+        try {
+            const teamSlug = team.slug || team.name.toLowerCase().replace(/\s+/g, '-');
+            const apiUrl = `https://api.github.com/orgs/${orgName}/teams/${teamSlug}/copilot/metrics`;
+            
+            logger.info(`Fetching metrics for team ${team.name} (${teamSlug}) from ${apiUrl}`);
+            
+            const response = await $fetch(apiUrl, {
+                headers: event.context.headers
+            }) as unknown[];
+            
+            if (response) {
+                // Process the response data 
+                const usageData = ensureCopilotMetrics(response);
+                const metricsData = convertToMetrics(usageData);
+                
+                // Add team and metrics to teamMetrics
+                teamMetrics.push({ team: { name: team.name, slug: teamSlug }, metrics: metricsData });
+                
+                // Add team information to each metrics object
+                const metricsWithTeam = metricsData.map(metric => ({
+                    ...metric,
+                    team: team.name, // Add team name for display
+                    teamSlug: teamSlug // Add team slug for unique identification
+                }));
+                
+                // Add metrics with team info to allMetrics array
+                allMetrics.push(...metricsWithTeam);
+            }
+        } catch (error) {
+            logger.error(`Error fetching metrics for team ${team.name}:`, error);
+            // Continue with other teams rather than failing the whole request
+        }
+    }
+
+    // Sort teams by name for consistent display
+    teamMetrics.sort((a, b) => a.team.name.localeCompare(b.team.name));
+
+    logger.info(`Processed ${teamMetrics.length} teams with ${allMetrics.length} total metrics records`);
+    
+    return { metrics: allMetrics, teamMetrics };
+});
\ No newline at end of file
diff --git a/server/api/teams.ts b/server/api/teams.ts
new file mode 100644
index 00000000..dfa4690a
--- /dev/null
+++ b/server/api/teams.ts
@@ -0,0 +1,137 @@
+import { defineEventHandler, getQuery } from 'h3';
+import { useRuntimeConfig } from '#imports';
+
+/**
+ * Fetches a list of teams for a given organization.
+ *
+ * This function retrieves team information either from the runtime configuration
+ * or by making a request to the GitHub API. If a specific organization parameter
+ * is provided, it will use that; otherwise, it defaults to the organization
+ * specified in the runtime configuration.
+ *
+ * @param event - The event object containing context and headers.
+ * @param organizationParam - (Optional) The name of the organization to fetch teams for.
+ * @returns A promise that resolves to an array of team objects, each containing:
+ *          - `name`: The name of the team.
+ *          - `slug`: A URL-friendly slug for the team.
+ *
+ * @throws Will throw an error if the GitHub API response is invalid or if there is
+ *         an issue during the fetch process.
+ */
+export default defineEventHandler(async (event) => {
+    try {
+        // Extract organization from query parameters
+        const query = getQuery(event);
+        const organization = query.organization as string;
+        const teams = query.teams as string;
+       // console.log('query is ', query);
+        
+        // Pass organization and teams to getTeams function
+        const teamsData = await getTeams(event, organization, teams);
+
+        return teamsData;
+    } catch (error) {
+        console.error('Error in teams.get handler:', error);
+        throw error;
+    }
+});
+
+export const getTeams = async (event: any, organizationParam?: string, teams?: string): Promise<{ name: string; slug: string }[]> => {
+    const config = useRuntimeConfig(event);
+    // console.log('event is ', event);
+    // console.log('event.context is ', event.context);
+    // console.log('config public in teams is ', config.public);
+    // console.log('fetching teams for org...' + organizationParam);
+    // console.log('fetching teams for teams...' + teams);
+    //  Use provided organization parameter if available， otherwise fallback to config
+    const orgName = organizationParam || config.public.githubOrg;
+    //const teamNames = teams || config.public.githubTeam;
+    const teamNames = teams ?? config.public.githubTeam;
+
+    // console.log(`Getting teams for organization: ${orgName}`);
+    // console.log('team names are ', teamNames);
+
+
+    if (!teamNames) {
+        console.warn('No team names provided, fetching all teams for organization:', orgName);
+    }
+
+    // console.log('teams here is ', config.public.githubTeam);
+    // console.log('team from event is ', event.context.team);
+    
+    try {
+        // If teams are configured in config, use them directly
+        if (teamNames && teamNames.trim() !== '') {
+            return await Promise.all(teamNames.split(',').map(async team => ({
+                name: team.trim(),
+                slug: (await getTeamSlugByName(event, team.trim(), orgName)) || team.trim().toLowerCase().replace(/\s+/g, '-')
+            })));
+        }
+
+        // Fetch teams from GitHub API
+        const response = await $fetch(`https://api.github.com/orgs/${orgName}/teams`, {
+            headers: event.context.headers
+        }) as any[];
+
+        if (!Array.isArray(response)) {
+            throw new Error('Invalid response format from GitHub API');
+        }
+        
+        const teams = response.map((team: any) => ({
+            name: team.name || team.slug,
+            slug: team.slug || team.name?.toLowerCase().replace(/\s+/g, '-')
+        }));
+        // console.log("Teams fetched:", teams.map(team => `${team.name},${team.slug}`));
+       // console.log('teams got are ', teams);
+        return teams;
+    } catch (error: any) {
+        // console.error('Error fetching teams:', error.message);
+        throw error;
+    }
+};
+
+
+/**
+ * Retrieves the slug for a specified team within a GitHub organization.
+ *
+ * @param event - The event object containing the runtime context and headers.
+ * @param teamName - The name of the team to retrieve the slug for.
+ * @param organizationParam - (Optional) The name of the organization. If not provided, the default organization
+ *                             from the runtime configuration will be used.
+ * @returns A promise that resolves to the team's slug as a string, or `null` if the team is not found.
+ * @throws An error if the GitHub API response is invalid or if there is an issue during the fetch operation.
+ */
+export const getTeamSlugByName = async (event: any, teamName: string, organizationParam?: string): Promise<string | null> => {
+   const config = useRuntimeConfig(event);
+   const orgName = organizationParam || config.public.githubOrg;
+   
+  // console.log('team name in getTeamslugbyname is ', teamName);
+   // console.log(`Getting slug for team: ${teamName} in organization: ${orgName}`);
+    
+    try {
+        // Fetch teams from github API by specifying the organization name and team name    
+        const response = await $fetch(`https://api.github.com/orgs/${orgName}/teams`, {
+            headers: event.context.headers
+        }) as any[];
+
+        if (!Array.isArray(response)) {
+            throw new Error('Invalid response format from GitHub API');
+        }
+        // console.log('response in getTeamSlugByName is ', response);
+        // console.log('team name in getTeamslugbyname is ', teamName);
+        // Find team by name (case insensitive)
+        // Generated by Zhuang
+        const team = response.find((team: any) => team.name.toLowerCase() === teamName.toLowerCase());
+        if (team) {
+            // console.log(`Found team: ${team.name} with slug: ${team.slug}`);
+            // Return the slug or generate one from the name if slug is not available
+            return team.slug || team.name?.toLowerCase().replace(/\s+/g, '-');
+        } else {
+            // console.warn(`Team ${teamName} not found in organization ${orgName}`);
+            return null;
+        }
+    } catch (error: any) {
+        // console.error('Error fetching teams:', error.message);
+        throw error;
+    }
+};
\ No newline at end of file