From 466cca5cb435df9048f5ac828019eaaffce48b23 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 25 Dec 2025 21:23:56 +0700
Subject: [PATCH] Make all status badges pill-shaped and standardize pending
 color
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add rounded-full to all status badges across admin and member pages
- Change Pending badge color from bg-secondary to bg-amber-500 text-white
- Update AdminDashboard to use Badge component instead of inline span
- Standardize badge colors everywhere:
  - Paid (Lunas): bg-brand-accent text-white
  - Pending: bg-amber-500 text-white
  - Cancelled: bg-destructive text-white

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/reviews/ConsultingHistory.tsx | 10 +++++-----
 src/pages/Dashboard.tsx                      |  8 ++++----
 src/pages/admin/AdminDashboard.tsx           |  9 ++++-----
 src/pages/admin/AdminOrders.tsx              |  8 ++++----
 src/pages/member/MemberAccess.tsx            |  2 +-
 src/pages/member/MemberDashboard.tsx         |  2 +-
 src/pages/member/MemberOrders.tsx            |  8 ++++----
 src/pages/member/OrderDetail.tsx             |  8 ++++----
 8 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/src/components/reviews/ConsultingHistory.tsx b/src/components/reviews/ConsultingHistory.tsx
index 7122467..39d0906 100644
--- a/src/components/reviews/ConsultingHistory.tsx
+++ b/src/components/reviews/ConsultingHistory.tsx
@@ -84,15 +84,15 @@ export function ConsultingHistory({ userId }: ConsultingHistoryProps) {
   const getStatusBadge = (status: string) => {
     switch (status) {
       case 'done':
-        return <Badge className="bg-brand-accent text-white">Selesai</Badge>;
+        return <Badge className="bg-brand-accent text-white rounded-full">Selesai</Badge>;
       case 'confirmed':
-        return <Badge className="bg-primary">Terkonfirmasi</Badge>;
+        return <Badge className="bg-brand-accent text-white rounded-full">Terkonfirmasi</Badge>;
       case 'pending_payment':
-        return <Badge className="bg-secondary">Pending</Badge>;
+        return <Badge className="bg-amber-500 text-white rounded-full">Pending</Badge>;
       case 'cancelled':
-        return <Badge variant="destructive">Dibatalkan</Badge>;
+        return <Badge className="bg-destructive text-white rounded-full">Dibatalkan</Badge>;
       default:
-        return <Badge variant="outline">{status}</Badge>;
+        return <Badge className="bg-secondary rounded-full">{status}</Badge>;
     }
   };
 
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index fa5b6cd..6e71973 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -59,8 +59,8 @@ export default function Dashboard() {
   const getStatusColor = (status: string) => {
     switch (status) {
       case 'paid': return 'bg-brand-accent text-white';
-      case 'pending': return 'bg-secondary';
-      case 'cancelled': return 'bg-destructive';
+      case 'pending': return 'bg-amber-500 text-white';
+      case 'cancelled': return 'bg-destructive text-white';
       default: return 'bg-secondary';
     }
   };
@@ -164,7 +164,7 @@ export default function Dashboard() {
                           <CardTitle>{item.product.title}</CardTitle>
                           <CardDescription className="capitalize">{item.product.type}</CardDescription>
                         </div>
-                        <Badge className="bg-accent">Aktif</Badge>
+                        <Badge className="bg-brand-accent text-white rounded-full">Aktif</Badge>
                       </div>
                     </CardHeader>
                     <CardContent>
@@ -195,7 +195,7 @@ export default function Dashboard() {
                           <p className="text-sm text-muted-foreground">{formatDate(order.created_at)}</p>
                         </div>
                         <div className="flex items-center gap-4">
-                          <Badge className={getStatusColor(order.payment_status || order.status)}>
+                          <Badge className={`${getStatusColor(order.payment_status || order.status)} rounded-full`}>
                             {getPaymentStatusLabel(order.payment_status || order.status)}
                           </Badge>
                           <span className="font-bold">{formatIDR(order.total_amount)}</span>
diff --git a/src/pages/admin/AdminDashboard.tsx b/src/pages/admin/AdminDashboard.tsx
index d199047..5a18652 100644
--- a/src/pages/admin/AdminDashboard.tsx
+++ b/src/pages/admin/AdminDashboard.tsx
@@ -4,6 +4,7 @@ import { supabase } from "@/integrations/supabase/client";
 import { useAuth } from "@/hooks/useAuth";
 import { AppLayout } from "@/components/AppLayout";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
 import { Skeleton } from "@/components/ui/skeleton";
 import { formatIDR } from "@/lib/format";
 import { Package, Users, Receipt, TrendingUp, BookOpen, Calendar } from "lucide-react";
@@ -124,12 +125,10 @@ export default function AdminDashboard() {
                       </p>
                     </div>
                     <div className="text-right">
-                      <p className="font-bold">{formatIDR(order.total_amount)}</p>
-                      <span
-                        className={`text-xs px-2 py-0.5 ${order.payment_status === "paid" ? "bg-brand-accent text-white" : "bg-muted text-muted-foreground"}`}
-                      >
+                      <Badge className={order.payment_status === "paid" ? "bg-brand-accent text-white" : "bg-amber-500 text-white"} rounded-full>
                         {order.payment_status === "paid" ? "Lunas" : "Pending"}
-                      </span>
+                      </Badge>
+                      <p className="font-bold mt-1">{formatIDR(order.total_amount)}</p>
                     </div>
                   </div>
                 ))}
diff --git a/src/pages/admin/AdminOrders.tsx b/src/pages/admin/AdminOrders.tsx
index 20a3855..e2d0e37 100644
--- a/src/pages/admin/AdminOrders.tsx
+++ b/src/pages/admin/AdminOrders.tsx
@@ -149,13 +149,13 @@ export default function AdminOrders() {
   const getStatusBadge = (status: string | null) => {
     switch (status) {
       case "paid":
-        return <Badge className="bg-brand-accent text-white">Lunas</Badge>;
+        return <Badge className="bg-brand-accent text-white rounded-full">Lunas</Badge>;
       case "pending":
-        return <Badge className="bg-secondary text-primary">Pending</Badge>;
+        return <Badge className="bg-amber-500 text-white rounded-full">Pending</Badge>;
       case "cancelled":
-        return <Badge className="bg-destructive">Dibatalkan</Badge>;
+        return <Badge className="bg-destructive text-white rounded-full">Dibatalkan</Badge>;
       default:
-        return <Badge className="bg-muted">{status}</Badge>;
+        return <Badge className="bg-muted rounded-full">{status}</Badge>;
     }
   };
 
diff --git a/src/pages/member/MemberAccess.tsx b/src/pages/member/MemberAccess.tsx
index 9c37100..2655297 100644
--- a/src/pages/member/MemberAccess.tsx
+++ b/src/pages/member/MemberAccess.tsx
@@ -164,7 +164,7 @@ export default function MemberAccess() {
                       <CardTitle>{item.product.title}</CardTitle>
                       <CardDescription className="capitalize">{item.product.type}</CardDescription>
                     </div>
-                    <Badge className="bg-brand-accent text-white border-2">Aktif</Badge>
+                    <Badge className="bg-brand-accent text-white rounded-full">Aktif</Badge>
                   </div>
                 </CardHeader>
                 <CardContent>
diff --git a/src/pages/member/MemberDashboard.tsx b/src/pages/member/MemberDashboard.tsx
index 1339a0c..147612d 100644
--- a/src/pages/member/MemberDashboard.tsx
+++ b/src/pages/member/MemberDashboard.tsx
@@ -298,7 +298,7 @@ export default function MemberDashboard() {
                       </p>
                     </div>
                     <div className="flex items-center gap-4">
-                      <Badge className={order.payment_status === "paid" ? "bg-brand-accent text-white border-2" : "bg-amber-500 text-white border-2 border-amber-600"}>
+                      <Badge className={order.payment_status === "paid" ? "bg-brand-accent text-white" : "bg-amber-500 text-white"} rounded-full>
                         {order.payment_status === "paid" ? "Lunas" : "Pending"}
                       </Badge>
                       <span className="font-bold">{formatIDR(order.total_amount)}</span>
diff --git a/src/pages/member/MemberOrders.tsx b/src/pages/member/MemberOrders.tsx
index 9daa0bb..efc0f39 100644
--- a/src/pages/member/MemberOrders.tsx
+++ b/src/pages/member/MemberOrders.tsx
@@ -44,11 +44,11 @@ export default function MemberOrders() {
       case "paid":
         return "bg-brand-accent text-white";
       case "pending":
-        return "bg-secondary text-primary";
+        return "bg-amber-500 text-white";
       case "cancelled":
-        return "bg-destructive";
+        return "bg-destructive text-white";
       default:
-        return "bg-secondary text-primary";
+        return "bg-secondary";
     }
   };
 
@@ -112,7 +112,7 @@ export default function MemberOrders() {
                       )}
                     </div>
                     <div className="flex items-center gap-4">
-                      <Badge className={getStatusColor(order.payment_status || order.status)}>
+                      <Badge className={`${getStatusColor(order.payment_status || order.status)} rounded-full`}>
                         {getPaymentStatusLabel(order.payment_status || order.status)}
                       </Badge>
                       <span className="font-bold">{formatIDR(order.total_amount)}</span>
diff --git a/src/pages/member/OrderDetail.tsx b/src/pages/member/OrderDetail.tsx
index 882b1cf..eb35c4c 100644
--- a/src/pages/member/OrderDetail.tsx
+++ b/src/pages/member/OrderDetail.tsx
@@ -208,12 +208,12 @@ export default function OrderDetail() {
       case "paid":
         return "bg-brand-accent text-white";
       case "pending":
-        return "bg-secondary text-primary";
+        return "bg-amber-500 text-white";
       case "cancelled":
       case "failed":
-        return "bg-destructive";
+        return "bg-destructive text-white";
       default:
-        return "bg-secondary text-primary";
+        return "bg-secondary";
     }
   };
 
@@ -337,7 +337,7 @@ export default function OrderDetail() {
             <h1 className="text-3xl font-bold">Detail Order</h1>
             <p className="text-muted-foreground font-mono">#{order.id.slice(0, 8)}</p>
           </div>
-          <Badge className={getStatusColor(order.payment_status || order.status)}>
+          <Badge className={`${getStatusColor(order.payment_status || order.status)} rounded-full`}>
             {getStatusLabel(order.payment_status || order.status)}
           </Badge>
         </div>