"use client"; import { CheckCircle2, Target, TrendingUp } from "lucide-react"; import { useMemo } from "react"; import { cn } from "@/lib/utils"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { Progress } from "@/registry/new-york/ui/progress"; import type { Task } from "./task-list"; export interface TaskProgressProps { tasks?: Task[]; goal?: number; period?: "day" | "week" | "month" | "all"; className?: string; showBreakdown?: boolean; showTrend?: boolean; } export default function TaskProgress({ tasks = [], goal, period = "all", className, showBreakdown = true, showTrend = true, }: TaskProgressProps) { const stats = useMemo(() => { const total = tasks.length; const completed = tasks.filter((t) => t.status === "done").length; const inProgress = tasks.filter((t) => t.status === "in_progress").length; const todo = tasks.filter((t) => t.status === "todo").length; const cancelled = tasks.filter((t) => t.status === "cancelled").length; const completionRate = total > 0 ? (completed / total) * 100 : 0; return { total, completed, inProgress, todo, cancelled, completionRate, }; }, [tasks]); const progressPercentage = goal ? Math.min((stats.completed / goal) * 100, 100) : stats.completionRate; return (

Progress Overview {stats.completed} of {stats.total} tasks completed {goal && ` (Goal: ${goal})`}

Overall Progress {Math.round(progressPercentage)}%

{goal && (

{stats.completed} / {goal} completed {stats.completed >= goal && (

Goal achieved!

)}

{showBreakdown && (

Completed

{stats.completed} ({Math.round((stats.completed / stats.total) * 100) || 0}%)

In Progress

{stats.inProgress} ({Math.round((stats.inProgress / stats.total) * 100) || 0}%)

To Do

{stats.todo} ({Math.round((stats.todo / stats.total) * 100) || 0}%)

Total

{stats.total} tasks

)}

); }

Example Usage