first commit

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

@@ -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>
+  );
+};