first commit
This commit is contained in:
Your NamebaishaliHolocron
@@ -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;
|
||||
@@ -0,0 +1,89 @@
|
||||
"use client";
|
||||
|
||||
import { getWidgetsData } from "@/app/utils/api/productDashboardApi";
|
||||
import { Card } from "ikoncomponents";
|
||||
import { FolderKanban, DollarSign, Clock } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export const DashBoardWidgetsPage = () => {
|
||||
const [widgetsData, setWidgetsData] = useState({
|
||||
totalProjects: 0,
|
||||
totalIssues: 0,
|
||||
totalRisksCount: 0,
|
||||
});
|
||||
useEffect(() => {
|
||||
const fetchWidgetsData = async () => {
|
||||
try {
|
||||
const response = await getWidgetsData();
|
||||
setWidgetsData(response);
|
||||
} catch (error) {
|
||||
console.error("Error fetching widgets data:", error);
|
||||
}
|
||||
};
|
||||
fetchWidgetsData();
|
||||
}, []);
|
||||
|
||||
// Each widget carries an explicit accent set (icon color, soft icon halo, the
|
||||
// accent-colored value and a left rail). Classes are full static strings so
|
||||
// Tailwind keeps them in the build, with light + dark variants for contrast.
|
||||
const widgets = [
|
||||
{
|
||||
title: "Total Projects",
|
||||
value: widgetsData.totalProjects,
|
||||
icon: FolderKanban,
|
||||
color: "text-blue-600 dark:text-blue-400",
|
||||
iconBg: "bg-blue-100 dark:bg-blue-500/15",
|
||||
rail: "bg-blue-500",
|
||||
},
|
||||
{
|
||||
title: "Total Issues",
|
||||
value: widgetsData.totalIssues,
|
||||
icon: DollarSign,
|
||||
color: "text-emerald-600 dark:text-emerald-400",
|
||||
iconBg: "bg-emerald-100 dark:bg-emerald-500/15",
|
||||
rail: "bg-emerald-500",
|
||||
},
|
||||
{
|
||||
title: "Total Risks Count",
|
||||
value: widgetsData.totalRisksCount,
|
||||
icon: Clock,
|
||||
color: "text-orange-600 dark:text-orange-400",
|
||||
iconBg: "bg-orange-100 dark:bg-orange-500/15",
|
||||
rail: "bg-orange-500",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{widgets.map((widget, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="group relative overflow-hidden rounded-2xl border p-5 pl-6 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
|
||||
>
|
||||
{/* Left accent rail */}
|
||||
<div
|
||||
className={`absolute inset-y-0 left-0 w-1.5 ${widget.rail}`}
|
||||
/>
|
||||
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
|
||||
{widget.title}
|
||||
</span>
|
||||
|
||||
<div
|
||||
className={`rounded-xl p-2.5 transition-transform duration-200 group-hover:scale-110 ${widget.iconBg}`}
|
||||
>
|
||||
<widget.icon size={20} className={widget.color} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3">
|
||||
<h3 className={`text-4xl font-bold leading-none tracking-tight ${widget.color}`}>
|
||||
{widget.value}
|
||||
</h3>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
"use client";
|
||||
|
||||
import { getAllSchedulesApi } from "@/app/utils/api/projectApi";
|
||||
import { Card } from "ikoncomponents";
|
||||
import { useEffect, useState, useMemo } from "react";
|
||||
|
||||
interface Task {
|
||||
id: number;
|
||||
taskName: string;
|
||||
taskDescription: string;
|
||||
taskStart: string;
|
||||
taskEnd: string;
|
||||
milestoneTask: boolean;
|
||||
}
|
||||
|
||||
export default function CurrentMonthMilestones() {
|
||||
const [apiTasks, setApiTasks] = useState<Task[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchScheduleData = async () => {
|
||||
try {
|
||||
const response = await getAllSchedulesApi();
|
||||
// Flatten all nested task arrays across every project in the response
|
||||
const allTasks = response.flatMap((project: any) => project.task || []);
|
||||
setApiTasks(allTasks);
|
||||
} catch (error) {
|
||||
console.error("Error fetching schedule data:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchScheduleData();
|
||||
}, []);
|
||||
|
||||
const visibleMilestones = useMemo(() => {
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
return (
|
||||
apiTasks
|
||||
.filter((task) => {
|
||||
// 1. Must be a milestone task
|
||||
const isMilestone = task.milestoneTask === true;
|
||||
|
||||
// 2. Must be today or a future date
|
||||
const taskStartDate = new Date(task.taskStart);
|
||||
taskStartDate.setHours(0, 0, 0, 0);
|
||||
const isTodayOrFuture = taskStartDate >= today;
|
||||
|
||||
return isMilestone && isTodayOrFuture;
|
||||
})
|
||||
// 3. Keep exactly the top 3 items
|
||||
.slice(0, 3)
|
||||
);
|
||||
}, [apiTasks]);
|
||||
|
||||
return (
|
||||
<Card className="p-4 h-127">
|
||||
<div className="max-w-3xl rounded-2xl p-3 shadow-sm h-full flex flex-col">
|
||||
<h1 className="mb-4 text-xl font-bold flex-shrink-0">
|
||||
Current Month Milestones
|
||||
</h1>
|
||||
|
||||
<div className="space-y-4 flex-grow flex flex-col justify-center items-center">
|
||||
{visibleMilestones.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground italic p-4 text-center">
|
||||
No milestone tasks scheduled for this period.
|
||||
</p>
|
||||
) : (
|
||||
<div className="w-full space-y-4 flex-grow justify-start">
|
||||
{visibleMilestones.map((task, index) => (
|
||||
<div
|
||||
key={task.id}
|
||||
className="rounded-xl border border-border bg-card p-4 shadow-sm"
|
||||
>
|
||||
{/* Index and Task Name */}
|
||||
<h2 className="text-lg font-semibold flex items-center gap-2">
|
||||
<span className="text-muted-foreground">{index + 1}.</span>
|
||||
{task.taskName}
|
||||
</h2>
|
||||
|
||||
{/* Description Block */}
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
{task.taskDescription || "No description provided."}
|
||||
</p>
|
||||
|
||||
{/* Dates in a Separate Line Below */}
|
||||
<div className="mt-3 pt-3 border-t border-border/50 flex items-center gap-6 text-xs text-muted-foreground">
|
||||
<div>
|
||||
<span className="font-medium text-foreground">
|
||||
Start:
|
||||
</span>{" "}
|
||||
{task.taskStart}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span className="font-medium text-foreground">End:</span>{" "}
|
||||
{task.taskEnd}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
7
frontend/app/main/overview/dashboard/layout.tsx
Normal file
7
frontend/app/main/overview/dashboard/layout.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
import React from "react";
|
||||
|
||||
function DashBoardOverviewLayout({ children }: { children: React.ReactNode }) {
|
||||
return <div>{children}</div>;
|
||||
}
|
||||
|
||||
export default DashBoardOverviewLayout;
|
||||
54
frontend/app/main/overview/dashboard/page.tsx
Normal file
54
frontend/app/main/overview/dashboard/page.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
"use client";
|
||||
import { DashBoardWidgetsPage } from "./components/Widgets";
|
||||
import ProjectsByStatusChartPage from "./components/ProjectsbyStatusChart/page";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { Button } from "ikoncomponents";
|
||||
import CurrentMonthMilestones from "./components/milestone/page";
|
||||
import ProjectTimelineChart from "./components/activeProjectTimeLine";
|
||||
import { useRouter } from "next/dist/client/components/navigation";
|
||||
|
||||
function DashboardPage() {
|
||||
const router = useRouter();
|
||||
|
||||
const handleRedirect = () => {
|
||||
router.push("/main/planning/projects");
|
||||
};
|
||||
return (
|
||||
<div className="h-full mt-2 space-y-4 overflow-y-auto">
|
||||
{/* Header */}
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Dashboard</h1>
|
||||
<p className="text-gray-500 text-sm">
|
||||
Consolidated project portfolio overview
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={"secondary"}
|
||||
className="flex items-center gap-2 px-3 py-1.5 rounded-md text-xs"
|
||||
onClick={handleRedirect}
|
||||
>
|
||||
View All Projects <ChevronRight size={14} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Widgets Row */}
|
||||
<DashBoardWidgetsPage />
|
||||
|
||||
{/* Main Content Grid */}
|
||||
<div className="grid gap-4 lg:grid-cols-2">
|
||||
<div className="h-full">
|
||||
<CurrentMonthMilestones />
|
||||
</div>
|
||||
|
||||
<div className="h-full">
|
||||
<ProjectsByStatusChartPage />
|
||||
</div>
|
||||
</div>
|
||||
<ProjectTimelineChart />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DashboardPage;
|
||||
7
frontend/app/main/overview/layout.tsx
Normal file
7
frontend/app/main/overview/layout.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
import React from "react";
|
||||
|
||||
function OverviewLayout({ children }: { children: React.ReactNode }) {
|
||||
return <div>{children}</div>;
|
||||
}
|
||||
|
||||
export default OverviewLayout;
|
||||
Reference in New Issue
Block a user