Project structure changes ad new files added in dashboard folders

components/common/dashStatCard.tsx

@@ -0,0 +1,66 @@
+import { StatCardProps } from "@/types/types";
+import { colorMap } from "@/constants/constant";
+
+export default function StatCard({
+  title,
+  value,
+  variant = "progress",
+  subtitle,
+  progress,
+  color = "teal",
+  icon: Icon,
+  badgeText,
+  badgeClassName = "text-slate-500 font-mono uppercase",
+  iconContainerClassName = "bg-[#11233a] border-[#1b2c3f]/50 text-cyan-400",
+  isActiveCard = false,
+}: StatCardProps) {
+  
+  // Base structural classes matched exactly to your dark UI design
+  const cardBorder = isActiveCard ? "border-[#0d9488]" : "border-[#142538]";
+  
+  return (
+    <div className={`relative rounded-2xl border ${cardBorder} bg-[#091624] p-5 flex flex-col justify-between min-h-[142px] w-full transition-all duration-300`}>
+      
+      {/* --- TOP HEADER SECTION --- */}
+      <div className="flex items-center justify-between w-full">
+        {variant === "icon" && Icon ? (
+          <div className={`flex h-9 w-9 items-center justify-center rounded-lg border ${iconContainerClassName}`}>
+            <Icon size={18} />
+          </div>
+        ) : (
+          <span className="text-xs font-bold uppercase tracking-wider text-slate-400/80">
+            {title}
+          </span>
+        )}
+
+        {badgeText && (
+          <span className={`text-[10px] font-semibold tracking-wider ${badgeClassName}`}>
+            {badgeText}
+          </span>
+        )}
+      </div>
+
+      {/* --- BODY STATS SECTION --- */}
+      <div className="mt-4 flex-grow flex flex-col justify-end">
+        <div className="text-3xl font-extrabold text-white tracking-tight leading-none">
+          {value}
+        </div>
+        
+        {/* Subtitle / Bottom Label text arrangement layout swap */}
+        <p className="text-xs font-semibold text-slate-400/70 mt-2">
+          {variant === "icon" ? title : subtitle}
+        </p>
+      </div>
+
+      {/* --- PROGRESS LAYER (Only renders if variant="progress") --- */}
+      {variant === "progress" && progress !== undefined && (
+        <div className="w-full bg-[#162a45] h-1.5 rounded-full mt-3 overflow-hidden">
+          <div
+            className={`h-1.5 rounded-full ${colorMap[color] || 'bg-teal-500'} transition-all duration-500`}
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}