From 66c95fdffe59dcfaa3441d4334b2af456a262979 Mon Sep 17 00:00:00 2001
From: NotII <46204250+NotII@users.noreply.github.com>
Date: Wed, 15 Oct 2025 18:11:00 +0100
Subject: [PATCH] Update RecentOrdersCard.tsx

---
 components/admin/RecentOrdersCard.tsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/components/admin/RecentOrdersCard.tsx b/components/admin/RecentOrdersCard.tsx
index a55c316..6f4c5f6 100644
--- a/components/admin/RecentOrdersCard.tsx
+++ b/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>
                   )}