v0.5

Author: agairola

app/analytics/page.tsx

@@ -7,13 +7,12 @@ import {
   SecurityPanel,
   LoadingSkeleton,
   DashboardHeader,
-  StatusBadge,
   OAuthOverview,
   OAuthSecurityPanel,
   OAuthClientActivity,
   TokenExpiration,
-  GrantTypeDistribution,
-  ToolUsagePanel
+  ToolUsagePanel,
+  GrantTypeChart
 } from "@/components/analytics"
 import {
   BarChart3,
@@ -31,21 +30,25 @@ export default function AnalyticsPage() {
       errorRate: number
     }
     oauth?: {
+      totalUsers: number
+      activeUsers: number
       totalClients: number
+      activeClients: number
       activeTokens: number
+      recentAuthorizations: number
       tokenRefreshRate: number
       pkceAdoption: number
-      clientGrowth?: string
-      tokenGrowth?: string
-      refreshGrowth?: string
-      pkceGrowth?: string
+      userActivity?: string
+      clientActivity?: string
       clients?: {
         name: string
         clientId: string
-        tokenCount: number
+        uniqueUsers: number
+        activeTokens: number
+        recentRequests: number
         lastActivity: string
-        grantType: string
-        pkceEnabled: boolean
+        userNames: string
+        status: string
       }[]
       expiringTokens?: {
         clientName: string
@@ -125,9 +128,12 @@ export default function AnalyticsPage() {
   const fetchAnalytics = useCallback(async () => {
     try {
       setLoading(true)
-      const response = await fetch(`/api/analytics?hours=${timeRange}`)
+      const response = await fetch(`/api/analytics?hours=${timeRange}`, {
+        credentials: 'include'
+      })
       if (!response.ok) {
-        throw new Error("Failed to fetch analytics")
+        const errorData = await response.json()
+        throw new Error(errorData.error || "Failed to fetch analytics")
       }
       const analyticsData = await response.json()
       setData(analyticsData)
@@ -237,7 +243,6 @@ export default function AnalyticsPage() {
         serverName={data.enterprise?.usersByMCPServer?.[0]?.mcpServerName}
         serverUrl={data.enterprise?.usersByMCPServer?.[0]?.mcpServerIdentifier}
       >
-        <StatusBadge status={healthStatus.status as "healthy" | "warning" | "critical"} />
         <label htmlFor="time-range-select" className="sr-only">
           Time Range
         </label>
@@ -273,14 +278,15 @@ export default function AnalyticsPage() {
         {/* OAuth Overview */}
         {data.oauth && (
           <OAuthOverview
+            totalUsers={data.oauth.totalUsers}
+            activeUsers={data.oauth.activeUsers}
             totalClients={data.oauth.totalClients}
             activeTokens={data.oauth.activeTokens}
+            recentAuthorizations={data.oauth.recentAuthorizations}
             tokenRefreshRate={data.oauth.tokenRefreshRate}
             pkceAdoption={data.oauth.pkceAdoption}
-            clientGrowth={data.oauth.clientGrowth}
-            tokenGrowth={data.oauth.tokenGrowth}
-            refreshGrowth={data.oauth.refreshGrowth}
-            pkceGrowth={data.oauth.pkceGrowth}
+            userActivity={data.oauth.userActivity}
+            clientActivity={data.oauth.clientActivity}
           />
         )}
 
@@ -292,7 +298,7 @@ export default function AnalyticsPage() {
             {data.oauth?.clients && data.oauth.clients.length > 0 && (
               <OAuthClientActivity 
                 clients={data.oauth.clients}
-                title="Active OAuth Clients"
+                title="Client-User Relationships"
                 maxItems={6}
               />
             )}
@@ -302,9 +308,9 @@ export default function AnalyticsPage() {
               <TokenExpiration expiringTokens={data.oauth.expiringTokens} />
             )}
 
-            {/* Grant Type Distribution */}
+            {/* Grant Type Distribution - Pie Chart */}
             {data.oauth?.grantTypes && data.oauth.grantTypes.length > 0 && (
-              <GrantTypeDistribution grantTypes={data.oauth.grantTypes} />
+              <GrantTypeChart grantTypes={data.oauth.grantTypes} />
             )}
           </div>
 

app/api/analytics/route.ts

@@ -4,6 +4,7 @@ import { auth } from '@/app/auth';
 
 export async function GET(request: NextRequest) {
   try {
+    // console.log('Request:', request);
     // Authentication check
     const session = await auth();
     if (!session) {
@@ -14,7 +15,7 @@ export async function GET(request: NextRequest) {
     const { searchParams } = new URL(request.url);
     const hours = parseInt(searchParams.get('hours') || '24');
 
-    return getEnhancedAnalytics(hours);
+    return await getEnhancedAnalytics(hours);
   } catch (error) {
     console.error('Analytics API error:', error);
     return NextResponse.json(
@@ -41,7 +42,13 @@ async function getEnhancedAnalytics(hours = 24) {
       usersByMCP, 
       securityByOrg, 
       privilegeEscalations, 
-      toolUsage
+      toolUsage,
+      toolGeography,
+      oauthMetrics,
+      oauthClientActivity,
+      expiringTokens,
+      grantTypeDistribution,
+      oauthSecurityEvents
     ] = await Promise.all([
       analyticsDB.getPerformanceMetrics(hours),
       analyticsDB.getTopEndpoints(hours, 10),
@@ -50,13 +57,32 @@ async function getEnhancedAnalytics(hours = 24) {
       analyticsDB.getUsersByMCPServer(hours),
       analyticsDB.getSecurityEventsByOrganization(hours),
       analyticsDB.getUserPrivilegeEscalations(168), // Last 7 days
-      analyticsDB.getMCPToolUsage(hours)
+      analyticsDB.getMCPToolUsage(hours),
+      analyticsDB.getToolGeographyStats(hours),
+      analyticsDB.getOAuthMetrics(hours),
+      analyticsDB.getOAuthClientActivity(hours, 6),
+      analyticsDB.getExpiringTokens(24),
+      analyticsDB.getGrantTypeDistribution(hours),
+      analyticsDB.getOAuthSecurityEvents(hours)
     ]);
 
     const data = {
       performance,
       topEndpoints: endpoints,
       geography,
+      oauth: {
+        ...oauthMetrics,
+        clients: oauthClientActivity,
+        expiringTokens,
+        grantTypes: grantTypeDistribution
+      },
+      oauthSecurity: oauthSecurityEvents,
+      toolUsage: {
+        tools: toolUsage,
+        geographic: toolGeography,
+        totalCalls: toolUsage.reduce((sum, tool) => sum + tool.usageCount, 0),
+        activeUsers: toolUsage.reduce((sum, tool) => sum + tool.uniqueUsers, 0)
+      },
       security: {
         events: securityEvents,
         eventCount: securityEvents.length,

app/mcp/[transport]/route.ts

@@ -180,6 +180,7 @@ async function logEnhancedAnalytics(
           toolName = params.name;
         }
       }
+      console.log('[MCP Analytics] Extracted:', { mcpMethod, toolName, hasParams: !!requestBody.params });
     }
 
     // Get or create MCP server registration
@@ -255,8 +256,8 @@ async function logEnhancedAnalytics(
         'Content-Type': 'application/json',
       },
       body: JSON.stringify(analyticsData)
-    }).catch(() => {
-      // Silent fail - analytics shouldn't break MCP requests
+    }).catch((error) => {
+      console.warn('Analytics collection failed:', error, 'Data:', analyticsData);
     });
 
   } catch (error) {

app/oauth/authorize/page.tsx

@@ -162,42 +162,43 @@ export default async function AuthorizePage({
   }
 
   return (
-    <main className="flex items-center justify-center h-screen bg-gray-50">
-      <div className="bg-white p-8 rounded-lg shadow-md max-w-sm w-full">
-        <h1 className="text-xl font-semibold mb-4 text-center">
-          Authorize Application
-        </h1>
-        <div className="text-center">
-          <p className="mb-2">
-            The application{' '}
-            <strong className="font-medium">{client.name}</strong> is
-            requesting access to your account.
-          </p>
-          <p className="text-sm text-gray-600">
-            Do you want to grant access?
-          </p>
-        </div>
-        <form action={handleConsent} className="mt-6">
-          <div className="flex justify-center gap-4">
+    <div className="min-h-screen bg-gradient-to-br from-base-50 via-primary-100 to-secondary-300 dark:from-base-950 dark:via-base-800 dark:to-base-800 flex items-center justify-center">
+      <div className="w-full max-w-md">
+        <div className="bg-background border border-border rounded-xl shadow-lg p-8 space-y-6">
+          <div className="text-center">
+            <h1 className="text-2xl font-bold text-foreground mb-2">
+              Authorize Application
+            </h1>
+            <p className="text-muted-foreground mb-4">
+              The application{' '}
+              <strong className="font-medium text-foreground">{client.name}</strong> is
+              requesting access to your account.
+            </p>
+            <p className="text-sm text-muted-foreground">
+              Do you want to grant access?
+            </p>
+          </div>
+          
+          <form action={handleConsent} className="space-y-4">
             <button
               type="submit"
               name="consent"
               value="allow"
-              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
+              className="w-full bg-primary hover:bg-primary-800 text-primary-foreground px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50 transition-colors"
             >
               Allow
             </button>
             <button
               type="submit"
               name="consent"
               value="deny"
-              className="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50"
+              className="w-full border border-border text-foreground hover:bg-muted px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-border focus:ring-opacity-50 transition-colors"
             >
               Deny
             </button>
-          </div>
-        </form>
+          </form>
+        </div>
       </div>
-    </main>
+    </div>
   );
 } 

components/analytics/analytics-pie-chart.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import { Pie, PieChart, Cell, ResponsiveContainer } from "recharts"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+} from "@/components/ui/chart"
+
+interface PieChartData {
+  name: string
+  value: number
+  percentage?: number
+  fill?: string
+}
+
+interface AnalyticsPieChartProps {
+  title: string
+  description?: string
+  data: PieChartData[]
+  dataKey?: string
+  nameKey?: string
+  className?: string
+  config?: ChartConfig
+}
+
+// Default color palette using your globals.css colors
+const defaultColors = [
+  "var(--primary-600)",     // Main primary color
+  "var(--secondary-600)",   // Secondary color  
+  "var(--primary-300)",     // Lighter primary
+  "var(--secondary-300)",   // Lighter secondary
+  "var(--primary-800)",     // Darker primary
+  "var(--secondary-800)",   // Darker secondary
+  "var(--base-600)",        // Neutral
+  "var(--base-400)"         // Light neutral
+]
+
+export function AnalyticsPieChart({
+  title,
+  description,
+  data,
+  dataKey = "value",
+  nameKey = "name",
+  className,
+  config
+}: AnalyticsPieChartProps) {
+  
+  // Add colors to data if not provided
+  const chartData = data.map((item, index) => ({
+    ...item,
+    fill: item.fill || defaultColors[index % defaultColors.length]
+  }))
+
+  // Generate config if not provided
+  const chartConfig = config || chartData.reduce((acc, item, index) => {
+    const key = item.name.toLowerCase().replace(/[^a-z0-9]/g, '')
+    acc[key] = {
+      label: item.name,
+      color: item.fill || defaultColors[index % defaultColors.length]
+    }
+    return acc
+  }, {} as ChartConfig)
+
+  return (
+    <Card className={`flex flex-col ${className}`}>
+      <CardHeader className="items-center pb-0">
+        <CardTitle>{title}</CardTitle>
+        {description && (
+          <CardDescription>{description}</CardDescription>
+        )}
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[300px]"
+        >
+          <PieChart>
+            <Pie 
+              data={chartData} 
+              dataKey={dataKey}
+              nameKey={nameKey}
+              cx="50%" 
+              cy="50%" 
+              outerRadius={80}
+            >
+              {chartData.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={entry.fill} />
+              ))}
+            </Pie>
+            <ChartLegend
+              content={<ChartLegendContent nameKey={nameKey} />}
+              className="-translate-y-2 flex-wrap gap-2 *:basis-1/4 *:justify-center"
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}