"use client"; import { Activity, Bot, FileText, MessageSquare, Search, UserPlus, Users, } from "lucide-react"; import { useMemo, 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 { Empty, EmptyHeader, EmptyMedia, EmptyTitle, } from "@/components/ui/empty"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/components/ui/input-group"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Separator } from "@/components/ui/separator"; import { cn } from "@/lib/utils"; export type ActivityType = | "member_joined" | "member_left" | "member_role_changed" | "ai_session_created" | "file_uploaded" | "file_deleted" | "note_created" | "note_updated" | "project_created" | "project_updated" | "chat_message" | "settings_updated"; export interface ActivityEntry { id: string; type: ActivityType; user: { id: string; name: string; avatar?: string; }; description: string; metadata?: Record; timestamp: Date; projectId?: string; projectName?: string; } export interface TeamActivityFeedProps { activities?: ActivityEntry[]; onFilterChange?: (filters: { type?: ActivityType; userId?: string; projectId?: string; }) => void; className?: string; showFilters?: boolean; showSearch?: boolean; itemsPerPage?: number; } function formatTime(date: Date): string { return new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit", }).format(date); } function formatDate(date: Date): string { const today = new Date(); const yesterday = new Date(today); yesterday.setDate(yesterday.getDate() - 1); if (date.toDateString() === today.toDateString()) { return "Today"; } if (date.toDateString() === yesterday.toDateString()) { return "Yesterday"; } return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", }).format(date); } function formatRelativeTime(date: Date): string { const now = Date.now(); const diff = now - date.getTime(); const minutes = Math.floor(diff / 60_000); const hours = Math.floor(minutes / 60); const days = Math.floor(hours / 24); if (minutes < 1) return "Just now"; if (minutes < 60) return `${minutes}m ago`; if (hours < 24) return `${hours}h ago`; if (days < 7) return `${days}d ago`; return formatDate(date); } function getActivityIcon(type: ActivityType) { switch (type) { case "member_joined": case "member_left": return UserPlus; case "member_role_changed": return Users; case "ai_session_created": return Bot; case "file_uploaded": case "file_deleted": return FileText; case "note_created": case "note_updated": return MessageSquare; case "chat_message": return MessageSquare; default: return Activity; } } function getActivityColor(type: ActivityType): string { switch (type) { case "member_joined": return "text-green-600"; case "member_left": return "text-red-600"; case "ai_session_created": return "text-primary"; default: return "text-muted-foreground"; } } function getInitials(name: string): string { return name .split(" ") .map((n) => n[0]) .join("") .toUpperCase() .slice(0, 2); } export default function TeamActivityFeed({ activities = [], onFilterChange, className, showFilters = true, showSearch = true, itemsPerPage = 20, }: TeamActivityFeedProps) { const [searchQuery, setSearchQuery] = useState(""); const [typeFilter, setTypeFilter] = useState("all"); const [displayedCount, setDisplayedCount] = useState(itemsPerPage); const filteredActivities = useMemo(() => { let filtered = activities; if (typeFilter !== "all") { filtered = filtered.filter((a) => a.type === typeFilter); } if (searchQuery.trim()) { const query = searchQuery.toLowerCase(); filtered = filtered.filter( (a) => a.description.toLowerCase().includes(query) || a.user.name.toLowerCase().includes(query) || a.projectName?.toLowerCase().includes(query) ); } return filtered; }, [activities, typeFilter, searchQuery]); const displayedActivities = filteredActivities.slice(0, displayedCount); const hasMore = displayedActivities.length < filteredActivities.length; const groupedActivities = displayedActivities.reduce( (groups, activity) => { const dateKey = formatDate(activity.timestamp); if (!groups[dateKey]) { groups[dateKey] = []; } groups[dateKey].push(activity); return groups; }, {} as Record ); return (

Activity Feed Recent team activity and updates

{showSearch && ( setSearchQuery(e.target.value)} placeholder="Search activities…" type="search" value={searchQuery} /> )} {showFilters && ( )}

{displayedActivities.length === 0 ? ( {searchQuery || typeFilter !== "all" ? "No activities found" : "No activities yet"} ) : (

{Object.entries(groupedActivities).map( ([dateKey, dateActivities]) => (

{dateKey}

{dateActivities.map((activity) => { const Icon = getActivityIcon(activity.type); return (

{getInitials(activity.user.name)}

{activity.user.name}

{activity.projectName && ( {activity.projectName} )}

{activity.description}

{formatRelativeTime(activity.timestamp)}

); })}

) )} {hasMore && ( )}

)} ); }

Example Usage