refactor: Update MetricCard component in Dashboard for improved layout and styling, enhancing visual hierarchy and responsiveness

frontend/src/Dashboard.jsx

@@ -37,20 +37,19 @@ function StatCard({ icon: Icon, color, value, title, subtitle, to }) {
 
 function MetricCard({ title, value, icon: Icon, color, description }) {
   return (
-    <div className="card">
+    <div className="card h-100 position-relative">
-      <div className="card-body">
+      <div className="card-body d-flex align-items-center">
-        <div className="d-flex align-items-center">
+        <span className={`avatar avatar-lg me-3 bg-${color}-lt text-${color} border-0`}>
-          <span className={`avatar avatar-sm me-3 bg-${color}-lt text-${color}`}>
+          <Icon size={32} />
-            <Icon size={20} />
+        </span>
-          </span>
+        <div className="flex-grow-1">
-          <div>
+          <div className="h3 mb-0 fw-bold">
-            <div className="h4 mb-1">{value}</div>
+            {value} <span className="fs-5 fw-normal">{title}</span>
-            <div className="text-muted small">{title}</div>
           </div>
+          {description && (
+            <div className="text-muted lh-1">{description}</div>
+          )}
         </div>
-        {description && (
-          <div className="mt-2 text-muted small">{description}</div>
-        )}
       </div>
     </div>
   );