Team Dashboard

1"use client";
2 
3import {
4  Activity,
5  Bot,
6  FileText,
7  MessageSquare,
8  Plus,
9  Settings,
10  TrendingUp,
11  Users,
12} from "lucide-react";
13import Link from "next/link";
14import { cn } from "@/lib/utils";
15import {
16  Avatar,
17  AvatarFallback,
18  AvatarImage,
19} from "@/registry/new-york/ui/avatar";
20import { Badge } from "@/registry/new-york/ui/badge";
21import { Button } from "@/registry/new-york/ui/button";
22import {
23  Card,
24  CardContent,
25  CardDescription,
26  CardHeader,
27  CardTitle,
28} from "@/registry/new-york/ui/card";
29import { Progress } from "@/registry/new-york/ui/progress";
30import { Separator } from "@/registry/new-york/ui/separator";
31 
32export interface TeamMember {
33  id: string;
34  name: string;
35  avatar?: string;
36  role: "owner" | "admin" | "member" | "viewer";
37  status: "active" | "away" | "offline";
38}
39 
40export interface TeamActivity {
41  id: string;
42  type: "member_joined" | "ai_session" | "file_uploaded" | "note_created";
43  user: {
44    name: string;
45    avatar?: string;
46  };
47  description: string;
48  timestamp: Date;
49}
50 
51export interface TeamUsage {
52  aiTokens: {
53    used: number;
54    limit: number;
55  };
56  storage: {
57    used: number;
58    limit: number;
59  };
60  members: {
61    current: number;
62    limit: number;
63  };
64}
65 
66export interface TeamDashboardProps {
67  teamName: string;
68  teamAvatar?: string;
69  plan?: "free" | "pro" | "enterprise";
70  members?: TeamMember[];
71  recentActivities?: TeamActivity[];
72  usage?: TeamUsage;
73  onInviteMember?: () => void;
74  onManageSettings?: () => void;
75  className?: string;
76}
77 
78function formatBytes(bytes: number): string {
79  if (bytes === 0) return "0 Bytes";
80  const k = 1024;
81  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
82  const i = Math.floor(Math.log(bytes) / Math.log(k));
83  return `${Math.round((bytes / k ** i) * 100) / 100} ${sizes[i]}`;
84}
85 
86function formatNumber(num: number): string {
87  if (num >= 1_000_000) {
88    return `${(num / 1_000_000).toFixed(1)}M`;
89  }
90  if (num >= 1000) {
91    return `${(num / 1000).toFixed(1)}K`;
92  }
93  return num.toString();
94}
95 
96function formatTimeAgo(date: Date): string {
97  const now = Date.now();
98  const diff = now - date.getTime();
99  const minutes = Math.floor(diff / 60_000);
100  const hours = Math.floor(minutes / 60);
101  const days = Math.floor(hours / 24);
102 
103  if (minutes < 1) return "Just now";
104  if (minutes < 60) return `${minutes}m ago`;
105  if (hours < 24) return `${hours}h ago`;
106  if (days < 7) return `${days}d ago`;
107  return new Intl.DateTimeFormat("en-US", {
108    month: "short",
109// … truncated