all ui done

apps/Frontend/src/components/ui/stat-card.tsx

@@ -1,34 +1,37 @@
 import { LucideIcon } from "lucide-react";
 import { Card, CardContent } from "@/components/ui/card";
 
+type ColorKey = "primary" | "secondary" | "success" | "warning" | "blue" | "teal" | "green" | "orange" | "rose" | "violet";
+
 interface StatCardProps {
   title: string;
   value: number | string;
   icon: LucideIcon;
-  color: string;
+  color: ColorKey;
 }
 
+const colorMap: Record<ColorKey, { bg: string; text: string }> = {
+  primary: { bg: "bg-primary bg-opacity-10", text: "text-primary" },
+  secondary: { bg: "bg-teal-500 bg-opacity-10", text: "text-teal-500" },
+  success: { bg: "bg-green-500 bg-opacity-10", text: "text-green-500" },
+  warning: { bg: "bg-orange-500 bg-opacity-10", text: "text-orange-500" },
+  blue: { bg: "bg-blue-100", text: "text-blue-600" },
+  teal: { bg: "bg-teal-100", text: "text-teal-600" },
+  green: { bg: "bg-green-100", text: "text-green-600" },
+  orange: { bg: "bg-orange-100", text: "text-orange-600" },
+  rose: { bg: "bg-rose-100", text: "text-rose-600" },
+  violet: { bg: "bg-violet-100", text: "text-violet-600" },
+};
+
 export function StatCard({ title, value, icon: Icon, color }: StatCardProps) {
-  const getBackgroundColorClass = (color: string) => {
-    switch(color) {
-      case 'primary':
-        return 'bg-primary bg-opacity-10 text-primary';
-      case 'secondary':
-        return 'bg-teal-500 bg-opacity-10 text-teal-500';
-      case 'success':
-        return 'bg-green-500 bg-opacity-10 text-green-500';
-      case 'warning':
-        return 'bg-orange-500 bg-opacity-10 text-orange-500';
-      default:
-        return 'bg-primary bg-opacity-10 text-primary';
-    }
-  };
+  const { bg, text } = colorMap[color] ?? colorMap.primary;
 
   return (
     <Card className="shadow-sm hover:shadow transition-shadow duration-200">
       <CardContent className="p-4 flex items-center space-x-4">
-        <div className={`rounded-full ${getBackgroundColorClass(color)} p-3`}>
-          <Icon className="h-5 w-5" />
+        <div className={`rounded-full p-3 ${bg} ${text}`}>
+                    <Icon className="h-5 w-5" stroke="currentColor" />
+
         </div>
         <div>
           <p className="text-sm text-gray-600">{title}</p>