feat: add TaskStatusChart component and integrate it into the home page

- Added recharts library to package.json for charting capabilities.
- Created TaskStatusChart component to visualize task statuses with a pie chart.
- Replaced the previous task status display with the new TaskStatusChart in the home page.

src/app/page.js

@@ -21,6 +21,7 @@ import {
 	format,
 } from "date-fns";
 import { formatDate } from "@/lib/utils";
+import TaskStatusChart from "@/components/ui/TaskStatusChart";
 
 export default function Home() {
 	const [stats, setStats] = useState({
@@ -527,32 +528,10 @@ export default function Home() {
 						</div>
 					</CardHeader>
 					<CardContent>
-						<div className="space-y-4">
-							{tasksByStatus.map((item) => (
-								<div
-									key={item.status}
-									className="flex items-center justify-between"
-								>
-									<div className="flex items-center gap-3">
-										<div className={`w-3 h-3 rounded-full ${item.color}`}></div>
-										<span className="text-sm font-medium text-gray-700 capitalize">
-											{item.status.replace("_", " ")}
-										</span>
-									</div>
-									<span className="text-sm font-bold text-gray-900">
-										{item.count}
-									</span>
-								</div>
-							))}
-						</div>
-						<div className="mt-4 pt-4 border-t border-gray-200">
-							<div className="flex items-center justify-between text-sm">
-								<span className="text-gray-600">Total Tasks</span>
-								<span className="font-bold text-gray-900">
-									{tasksByStatus.reduce((sum, item) => sum + item.count, 0)}
-								</span>
-							</div>
-						</div>
+						<TaskStatusChart
+							data={tasksByStatus}
+							completionRate={stats.completionRate}
+						/>
 					</CardContent>
 				</Card>