89 lines
2.8 KiB
TypeScript
89 lines
2.8 KiB
TypeScript
"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>
|
|
);
|
|
}; |