update dashboard ux

apps/dashboard/src/components/ui/StatCard.tsx

@@ -9,6 +9,14 @@ interface StatCardProps {
   icon: LucideIcon
   iconColor?: string
   iconBg?: string
+  /** Optional target value to show a progress bar beneath the value */
+  target?: number
+  /** Current progress (0–100) when target is set */
+  progressPercent?: number
+  /** Show a subtle pulse/glow animation on the card */
+  pulse?: boolean
+  /** Apply a gradient to the value text */
+  valueGradient?: boolean
 }
 
 export default function StatCard({
@@ -19,16 +27,42 @@ export default function StatCard({
   icon: Icon,
   iconColor = 'text-orange-700 dark:text-orange-300',
   iconBg = 'bg-orange-50 dark:bg-orange-950/30',
+  target,
+  progressPercent,
+  pulse,
+  valueGradient,
 }: StatCardProps) {
   const isPositive = change !== undefined && change >= 0
   const isNegative = change !== undefined && change < 0
 
   return (
-    <div className="card p-6">
+    <div className={`card p-6 ${pulse ? 'pulse-glow' : ''}`}>
       <div className="flex items-start justify-between">
-        <div>
+        <div className="min-w-0 flex-1">
           <p className="text-sm font-medium text-stone-500 dark:text-stone-400">{title}</p>
-          <p className="mt-1 text-2xl font-bold text-blue-950 dark:text-stone-50">{value}</p>
+          <p
+            className={[
+              'mt-1 text-2xl font-bold',
+              valueGradient
+                ? 'bg-gradient-to-r from-blue-600 to-orange-500 bg-clip-text text-transparent dark:from-blue-400 dark:to-orange-300'
+                : 'text-blue-950 dark:text-stone-50',
+            ].join(' ')}
+          >
+            {value}
+          </p>
+          {target !== undefined && progressPercent !== undefined && (
+            <div className="mt-2 flex items-center gap-2">
+              <div className="progress-bar flex-1">
+                <div
+                  className="progress-fill orange"
+                  style={{ width: `${Math.min(progressPercent, 100)}%` }}
+                />
+              </div>
+              <span className="text-xs font-mono text-stone-500 dark:text-stone-400">
+                {Math.round(progressPercent)}%
+              </span>
+            </div>
+          )}
           {change !== undefined && (
             <div className="mt-2 flex items-center gap-1">
               <span