first commit

2026-06-15 12:57:03 +05:30
commit b9ac5ae0b2
398 changed files with 49583 additions and 0 deletions
--- a/frontend/app/main/overview/dashboard/components/ProjectsbyStatusChart/page.tsx
+++ b/frontend/app/main/overview/dashboard/components/ProjectsbyStatusChart/page.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from "recharts";
+
+import { Card } from "ikoncomponents";
+
+import { getStatusWiseProjectCount } from "@/app/utils/api/productDashboardApi";
+import { StatusWiseProjectResponseData } from "@/app/utils/api/productDashboardApi/types";
+
+const COLORS = [
+  "#3b82f6",
+  "#f59e0b",
+  "#ef4444",
+  "#06b6d4",
+  "#a855f7",
+  "#10b981",
+  "#f97316",
+  "#14b8a6",
+];
+
+export const ProjectsByStatusChartPage = () => {
+  const [data, setData] = useState<
+    {
+      name: string;
+      value: number;
+      color: string;
+    }[]
+  >([]);
+
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchStatusData = async () => {
+      try {
+        const response = await getStatusWiseProjectCount();
+
+        const formattedData = response.map(
+          (item: StatusWiseProjectResponseData, index: number) => ({
+            name: item.status,
+            value: item.projectCount,
+            color: COLORS[index % COLORS.length],
+          }),
+        );
+
+        setData(formattedData);
+      } catch (error) {
+        console.error("Error fetching status wise project data:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchStatusData();
+  }, []);
+
+  if (loading) {
+    return (
+      <Card className="p-6 h-127 flex items-center justify-center">
+        <p className="text-muted-foreground">Loading chart...</p>
+      </Card>
+    );
+  }
+
+  if (!data.length) {
+    return (
+      <Card className="p-6 h-127 flex items-center justify-center">
+        <p className="text-muted-foreground">No data available</p>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="p-6 h-127 flex flex-col">
+      <h3 className="text-lg font-semibold mb-6">Projects by Status</h3>
+
+      {/* Chart */}
+      <div className="w-full h-100">
+        <ResponsiveContainer width="100%" height="100%">
+          <PieChart>
+            <Pie
+              data={data}
+              cx="50%"
+              cy="50%"
+              innerRadius={90}
+              outerRadius={140}
+              paddingAngle={4}
+              dataKey="value"
+            >
+              {data.map((entry, index) => (
+                <Cell key={index} fill={entry.color} stroke="none" />
+              ))}
+            </Pie>
+
+            <Tooltip
+              contentStyle={{
+                backgroundColor: "#1e293b",
+                border: "none",
+                borderRadius: "8px",
+                color: "#fff",
+              }}
+              itemStyle={{ color: "#fff" }}
+            />
+          </PieChart>
+        </ResponsiveContainer>
+      </div>
+
+      {/* Legend */}
+      <div className="flex flex-wrap items-center justify-center gap-3 mt-3">
+        {data.map((item, index) => (
+          <div
+            key={index}
+            className="flex items-center gap-2 px-3 py-1.5"
+          >
+            <div
+              className="w-2.5 h-2.5 rounded-full"
+              style={{
+                backgroundColor: item.color,
+              }}
+            />
+
+            <span className="text-sm text-muted-foreground">{item.name}</span>
+
+            <span className="text-sm font-semibold">{item.value}</span>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+};
+
+export default ProjectsByStatusChartPage;