first commit

resources/js/pages/dashboard.tsx

@@ -6,6 +6,7 @@ import {
     Clock3,
     PackageCheck,
     Plus,
+    TrendingUp,
 } from 'lucide-react';
 import { PageHeading } from '@/components/page-heading';
 import { ReservationStatus } from '@/components/reservation-status';
@@ -206,23 +207,42 @@ function SummaryCard({
     tone: 'amber' | 'emerald' | 'blue';
 }) {
     const colors = {
-        amber: 'bg-amber-50 text-amber-700',
-        emerald: 'bg-emerald-50 text-emerald-700',
-        blue: 'bg-blue-50 text-blue-700',
+        amber: {
+            bg: 'bg-amber-50 dark:bg-amber-950/30',
+            text: 'text-amber-700 dark:text-amber-400',
+            icon: 'bg-amber-100 dark:bg-amber-900/50',
+        },
+        emerald: {
+            bg: 'bg-emerald-50 dark:bg-emerald-950/30',
+            text: 'text-emerald-700 dark:text-emerald-400',
+            icon: 'bg-emerald-100 dark:bg-emerald-900/50',
+        },
+        blue: {
+            bg: 'bg-blue-50 dark:bg-blue-950/30',
+            text: 'text-blue-700 dark:text-blue-400',
+            icon: 'bg-blue-100 dark:bg-blue-900/50',
+        },
     };
 
     return (
-        <Card className="gap-3 border-slate-200 py-5 shadow-none dark:border-slate-800">
-            <CardContent className="flex items-center gap-4">
+        <Card className="group overflow-hidden border-slate-200 py-0 shadow-none transition-all hover:shadow-md dark:border-slate-800">
+            <CardContent className="flex items-center gap-4 p-5">
                 <span
-                    className={`flex size-11 items-center justify-center rounded-xl ${colors[tone]}`}
+                    className={`flex size-12 items-center justify-center rounded-2xl ${colors[tone].icon} transition-transform group-hover:scale-110`}
                 >
-                    <Icon className="size-5" />
+                    <Icon className={`size-6 ${colors[tone].text}`} />
                 </span>
-                <div>
-                    <p className="text-2xl font-semibold">{value}</p>
-                    <p className="text-sm text-muted-foreground">{label}</p>
+                <div className="flex-1">
+                    <p className="text-3xl font-bold tracking-tight">{value}</p>
+                    <p className="mt-1 text-sm text-muted-foreground">
+                        {label}
+                    </p>
                 </div>
+                {value > 0 && (
+                    <TrendingUp
+                        className={`size-4 ${colors[tone].text} opacity-50`}
+                    />
+                )}
             </CardContent>
         </Card>
     );