Update RecentOrdersCard.tsx

components/admin/RecentOrdersCard.tsx

@@ -21,6 +21,25 @@ export default function RecentOrdersCard() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
+  function statusBadgeClass(status: string) {
+    switch (status) {
+      case 'unpaid':
+      case 'confirming':
+        return 'bg-amber-500/15 text-amber-400';
+      case 'paid':
+      case 'acknowledged':
+        return 'bg-sky-500/15 text-sky-400';
+      case 'shipped':
+        return 'bg-purple-500/15 text-purple-400';
+      case 'completed':
+        return 'bg-emerald-500/15 text-emerald-400';
+      case 'cancelled':
+        return 'bg-rose-500/15 text-rose-400';
+      default:
+        return 'bg-muted text-foreground/70';
+    }
+  }
+
   useEffect(() => {
     let mounted = true;
     (async () => {
@@ -54,7 +73,7 @@ export default function RecentOrdersCard() {
                 <div className="font-medium">Order #{o.orderId}</div>
                 <div className="flex items-center gap-2">
                   {o.status && (
-                    <span className="text-xs px-2 py-0.5 rounded bg-muted">
+                    <span className={`text-xs px-2 py-0.5 rounded ${statusBadgeClass(o.status)}`}>
                       {o.status}
                     </span>
                   )}