dwindown/meet-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make all status badges pill-shaped and standardize pending color

Browse Source 
- 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>
This commit is contained in:
dwindown
2025-12-25 21:23:56 +07:00
parent 24826a3ea4
commit 466cca5cb4
8 changed files with 27 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/reviews/ConsultingHistory.tsx
View File

@@ -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>;
}
};

8
src/pages/Dashboard.tsx
View File

@@ -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>

9
src/pages/admin/AdminDashboard.tsx
View File

@@ -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>
))}

8
src/pages/admin/AdminOrders.tsx
View File

@@ -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>;
}
};

2
src/pages/member/MemberAccess.tsx
View File

@@ -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>

2
src/pages/member/MemberDashboard.tsx
View File

@@ -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>

8
src/pages/member/MemberOrders.tsx
View File

@@ -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>

8
src/pages/member/OrderDetail.tsx
View File

@@ -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>