"use client"; import { ArrowDown, ArrowUp, TrendingUp } from "lucide-react"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Badge } from "@/components/ui/badge"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Progress } from "@/components/ui/progress"; import { Separator } from "@/components/ui/separator"; import { cn } from "@/lib/utils"; export interface AnalyticsDataPoint { date: Date; value: number; category?: string; } export interface MemberUsage { id: string; name: string; avatar?: string; tokens: number; sessions: number; files: number; } export interface TeamAnalyticsProps { period?: "7d" | "30d" | "90d" | "all"; tokenUsage?: { current: number; previous: number; dataPoints?: AnalyticsDataPoint[]; }; sessionCount?: { current: number; previous: number; dataPoints?: AnalyticsDataPoint[]; }; memberUsage?: MemberUsage[]; topProjects?: { id: string; name: string; usage: number; }[]; className?: string; } function formatNumber(num: number): string { if (num >= 1_000_000) { return `${(num / 1_000_000).toFixed(1)}M`; } if (num >= 1000) { return `${(num / 1000).toFixed(1)}K`; } return num.toString(); } function calculateChange( current: number, previous: number ): { percentage: number; isIncrease: boolean; } { if (previous === 0) { return { percentage: current > 0 ? 100 : 0, isIncrease: current > 0 }; } const change = ((current - previous) / previous) * 100; return { percentage: Math.abs(change), isIncrease: change > 0, }; } function getInitials(name: string): string { return name .split(" ") .map((n) => n[0]) .join("") .toUpperCase() .slice(0, 2); } export default function TeamAnalytics({ period = "30d", tokenUsage, sessionCount, memberUsage = [], topProjects = [], className, }: TeamAnalyticsProps) { const tokenChange = tokenUsage ? calculateChange(tokenUsage.current, tokenUsage.previous) : null; const sessionChange = sessionCount ? calculateChange(sessionCount.current, sessionCount.previous) : null; const sortedMemberUsage = [...memberUsage] .sort((a, b) => b.tokens - a.tokens) .slice(0, 5); const sortedProjects = [...topProjects] .sort((a, b) => b.usage - a.usage) .slice(0, 5); const maxMemberTokens = Math.max(...memberUsage.map((m) => m.tokens), 1); return (

{/* Overview Cards */}

{tokenUsage && ( AI Tokens Total AI tokens used

{formatNumber(tokenUsage.current)} {tokenChange && (

{tokenChange.isIncrease ? ( ) : ( )} {tokenChange.percentage.toFixed(1)}%

)}

vs previous period

)} {sessionCount && ( AI Sessions Total AI sessions used

{sessionCount.current} {sessionChange && (

{sessionChange.isIncrease ? ( ) : ( )} {sessionChange.percentage.toFixed(1)}%

)}

vs previous period

)} Active Members Total active members

{memberUsage.length}

Members with activity

Projects Total projects

{topProjects.length}

Active projects

{/* Top Members */} {sortedMemberUsage.length > 0 && ( Top Members by Usage Most active team members

{sortedMemberUsage.map((member) => { const percentage = (member.tokens / maxMemberTokens) * 100; return (

{getInitials(member.name)}

{member.name} {member.sessions} session {member.sessions !== 1 ? "s" : ""}

{formatNumber(member.tokens)} tokens

); })}

)} {/* Top Projects */} {sortedProjects.length > 0 && ( Top Projects Most active projects

{sortedProjects.map((project, idx) => { const maxUsage = Math.max( ...sortedProjects.map((p) => p.usage), 1 ); const percentage = (project.usage / maxUsage) * 100; return (

{project.name}

{formatNumber(project.usage)} tokens

{idx < sortedProjects.length - 1 && ( )}

); })}

)}

); }

Example Usage