first commit

frontend/app/main/overview/dashboard/components/activeProjectTimeLine/index.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { getAllActiveProjectsTimelineApi } from "@/app/utils/api/projectApi";
+import { Card } from "ikoncomponents";
+import { useEffect, useMemo, useState } from "react";
+import {
+  ResponsiveContainer,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+  Tooltip,
+  BarChart,
+  Bar,
+  Cell,
+  ReferenceLine,
+} from "recharts";
+
+const months = [
+  "Jan", "Feb", "Mar", "Apr", "May", "Jun", 
+  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
+];
+
+const colors = [
+  "#62D6B0",
+  "#7C6AE6",
+  "#F09B7E",
+  "#4DA3FF",
+  "#FFB84D",
+  "#FF6B81",
+];
+
+export default function ProjectTimelineChart() {
+  const [projects, setProjects] = useState<any[]>([]);
+
+  useEffect(() => {
+    const fetchTimelineData = async () => {
+      try {
+        const response = await getAllActiveProjectsTimelineApi();
+
+        const formattedProjects = response.map((project: any, index: number) => ({
+          ...project,
+          color: colors[index % colors.length],
+        }));
+
+        setProjects(formattedProjects);
+      } catch (error) {
+        console.error("Error fetching timeline data:", error);
+      }
+    };
+
+    fetchTimelineData();
+  }, []);
+
+  // 1. Process your raw api dates into startOffsets and visual durations
+  const chartData = useMemo(() => {
+    return projects.map((project) => {
+      const startDate = new Date(project.startDate);
+      const endDate = new Date(project.endDate);
+
+      const startMonth = startDate.getMonth();
+      const endMonth = endDate.getMonth();
+      
+      // Calculate continuous month count width span
+      const duration = Math.max(1, endMonth - startMonth + 1);
+
+      return {
+        projectName: project.projectName,
+        startOffset: startMonth,
+        duration: duration,
+        color: project.color,
+        rawStartDate: project.startDate,
+        rawEndDate: project.endDate,
+      };
+    });
+  }, [projects]);
+
+  // 2. Dynamic Year calculations pulled safely from the project timeline data
+  const currentYear = useMemo(() => {
+    if (projects.length === 0) return new Date().getFullYear();
+    return new Date(projects[0].startDate).getFullYear();
+  }, [projects]);
+
+  const currentMonth = new Date().getMonth();
+
+  // Custom tooltips configuration mapping to raw date text strings
+  const CustomTooltip = ({ active, payload }: any) => {
+    if (active && payload && payload.length) {
+      const data = payload[0].payload;
+      return (
+        <div className="bg-background border border-border p-3 rounded-xl shadow-md text-xs">
+          <p className="font-bold mb-1 text-foreground">{data.projectName}</p>
+          <p className="text-muted-foreground">
+            {data.rawStartDate} → {data.rawEndDate}
+          </p>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <Card className="w-full rounded-2xl p-4">
+      {/* Chart Header & Dynamic Legends */}
+      <div className="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <h2 className="text-xl font-semibold">
+          Project Timeline — {currentYear}
+        </h2>
+
+        <div className="flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
+          {projects.map((project) => (
+            <div
+              key={project.projectIdentifier}
+              className="flex items-center gap-2"
+            >
+              <div
+                className="h-3 w-3 rounded-sm"
+                style={{ backgroundColor: project.color }}
+              />
+              <span className="text-foreground">{project.projectName}</span>
+            </div>
+          ))}
+
+          <div className="flex items-center gap-2">
+            <div className="h-4 w-0.5 bg-red-500" />
+            <span className="text-foreground">Today</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Chart Canvas Wrap */}
+      <div className="h-80">
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart
+            data={chartData}
+            layout="vertical"
+            stackOffset="none"
+            margin={{ top: 5, right: 10, left: -10, bottom: 5 }}
+            barCategoryGap="30%"
+          >
+            <CartesianGrid
+              stroke="#E5E7EB"
+              vertical={true}
+              horizontal={true}
+            />
+
+            <XAxis
+              type="number"
+              domain={[0, 11]}
+              ticks={[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]}
+              tickFormatter={(value) => months[value]}
+              tickLine={false}
+              axisLine={false}
+              orientation="top"
+              className="text-xs font-medium text-muted-foreground"
+            />
+
+            <YAxis
+              type="category"
+              dataKey="projectName"
+              tickLine={false}
+              axisLine={false}
+              width={120}
+              className="text-sm font-semibold text-foreground"
+            />
+
+            <Tooltip content={<CustomTooltip />} />
+
+            {/* "Today" Reference Line indicator */}
+            <ReferenceLine
+              x={currentMonth}
+              stroke="red"
+              strokeDasharray="5 5"
+              strokeWidth={1.5}
+            />
+
+            {/* Invisible offset pushing real data blocks forward to match target calendar periods */}
+            <Bar
+              dataKey="startOffset"
+              stackId="timeline"
+              fill="transparent"
+              legendType="none"
+            />
+
+            {/* Rendered Colored Blocks */}
+            <Bar dataKey="duration" stackId="timeline" radius={6}>
+              {chartData.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={entry.color} />
+              ))}
+            </Bar>
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </Card>
+  );
+}