"use client"; import { Folder, FolderOpen, Loader2, MoreVertical, Plus, Search, Settings, Trash2, } from "lucide-react"; import { useState } from "react"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, } from "@/components/ui/empty"; import { Field, FieldContent, FieldLabel } from "@/components/ui/field"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/components/ui/input-group"; import { Textarea } from "@/components/ui/textarea"; import { cn } from "@/lib/utils"; export interface TeamProject { id: string; name: string; description?: string; color?: string; icon?: string; members: { id: string; name: string; avatar?: string; }[]; defaultModel?: string; aiUsage?: { tokens: number; sessions: number; }; createdAt: Date; updatedAt: Date; } export interface TeamProjectsProps { projects?: TeamProject[]; currentUserId?: string; onCreate?: (data: { name: string; description?: string; color?: string; defaultModel?: string; }) => Promise; onUpdate?: (projectId: string, data: Partial) => Promise; onDelete?: (projectId: string) => Promise; onSelect?: (projectId: string) => void; className?: string; showSearch?: boolean; } function formatDate(date: Date): string { return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", }).format(date); } 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 getInitials(name: string): string { return name .split(" ") .map((n) => n[0]) .join("") .toUpperCase() .slice(0, 2); } export default function TeamProjects({ projects = [], currentUserId, onCreate, onUpdate, onDelete, onSelect, className, showSearch = true, }: TeamProjectsProps) { const [searchQuery, setSearchQuery] = useState(""); const [createDialogOpen, setCreateDialogOpen] = useState(false); const [isCreating, setIsCreating] = useState(false); const [actionLoading, setActionLoading] = useState(null); const [projectData, setProjectData] = useState({ name: "", description: "", color: "#3b82f6", defaultModel: "", }); const filteredProjects = projects.filter((project) => { if (!searchQuery.trim()) return true; const query = searchQuery.toLowerCase(); return ( project.name.toLowerCase().includes(query) || project.description?.toLowerCase().includes(query) ); }); const handleCreate = async () => { if (!(projectData.name.trim() && onCreate)) return; setIsCreating(true); try { await onCreate(projectData); setProjectData({ name: "", description: "", color: "#3b82f6", defaultModel: "", }); setCreateDialogOpen(false); } finally { setIsCreating(false); } }; const handleAction = async ( action: () => Promise, projectId: string ) => { setActionLoading(projectId); try { await action(); } finally { setActionLoading(null); } }; return (

Projects {projects.length} project{projects.length !== 1 ? "s" : ""} in your team

{onCreate && (

Website Redesign

Mobile App

Example Usage