101 lines
2.8 KiB
TypeScript
101 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useActivityFeed } from "@/hooks/use-activity-feed";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import {
|
|
CheckCircle2,
|
|
PlusCircle,
|
|
MessageSquare,
|
|
Clock,
|
|
} from "lucide-react";
|
|
import type { ActivityItem } from "@/lib/supabase/database.types";
|
|
|
|
interface ActivityStatsContentProps {
|
|
activities: ActivityItem[];
|
|
loading: boolean;
|
|
}
|
|
|
|
export function ActivityStatsContent({ activities, loading }: ActivityStatsContentProps) {
|
|
const stats = {
|
|
completed: activities.filter((a) => a.type === "task_completed").length,
|
|
created: activities.filter((a) => a.type === "task_created").length,
|
|
comments: activities.filter((a) => a.type === "comment_added").length,
|
|
total: activities.length,
|
|
};
|
|
|
|
const statItems = [
|
|
{
|
|
label: "Tasks Completed",
|
|
value: stats.completed,
|
|
icon: CheckCircle2,
|
|
color: "text-green-500",
|
|
bgColor: "bg-green-500/10",
|
|
},
|
|
{
|
|
label: "Tasks Created",
|
|
value: stats.created,
|
|
icon: PlusCircle,
|
|
color: "text-blue-500",
|
|
bgColor: "bg-blue-500/10",
|
|
},
|
|
{
|
|
label: "Comments",
|
|
value: stats.comments,
|
|
icon: MessageSquare,
|
|
color: "text-purple-500",
|
|
bgColor: "bg-purple-500/10",
|
|
},
|
|
{
|
|
label: "Total Activity",
|
|
value: stats.total,
|
|
icon: Clock,
|
|
color: "text-orange-500",
|
|
bgColor: "bg-orange-500/10",
|
|
},
|
|
];
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{Array.from({ length: 4 }).map((_, i) => (
|
|
<Card key={i}>
|
|
<CardContent className="p-6">
|
|
<Skeleton className="h-8 w-16 mb-2" />
|
|
<Skeleton className="h-4 w-24" />
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{statItems.map((stat) => {
|
|
const Icon = stat.icon;
|
|
return (
|
|
<Card key={stat.label}>
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-2xl font-bold">{stat.value}</p>
|
|
<p className="text-sm text-muted-foreground">{stat.label}</p>
|
|
</div>
|
|
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${stat.bgColor}`}>
|
|
<Icon className={`w-5 h-5 ${stat.color}`} />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ActivityStats() {
|
|
const { activities, loading } = useActivityFeed({ limit: 100 });
|
|
return <ActivityStatsContent activities={activities} loading={loading} />;
|
|
}
|