Update all pages to use centralized status helpers

Changes:
- Update MemberOrders to use getPaymentStatusLabel and getPaymentStatusColor
- Update OrderDetail to use centralized helpers
- Remove duplicate getStatusColor and getStatusLabel functions
- Dashboard.tsx already using imported helpers

Benefits:
- DRY principle - single source of truth
- Consistent Indonesian labels everywhere
- Easy to update status styling in one place

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/pages/Dashboard.tsx

@@ -10,6 +10,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { formatIDR, formatDate } from '@/lib/format';
 import { Video, Calendar, BookOpen, ArrowRight } from 'lucide-react';
+import { getPaymentStatusLabel, getPaymentStatusColor } from '@/lib/statusHelpers';
 
 interface UserAccess {
   id: string;
@@ -56,24 +57,6 @@ export default function Dashboard() {
     setLoading(false);
   };
 
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case 'paid': return 'bg-brand-accent text-white';
-      case 'pending': return 'bg-amber-500 text-white';
-      case 'cancelled': return 'bg-destructive text-white';
-      default: return 'bg-secondary';
-    }
-  };
-
-  const getPaymentStatusLabel = (status: string | null) => {
-    switch (status) {
-      case 'paid': return 'Lunas';
-      case 'pending': return 'Pending';
-      case 'failed': return 'Gagal';
-      default: return status || 'Pending';
-    }
-  };
-
   const renderAccessActions = (item: UserAccess) => {
     switch (item.product.type) {
       case 'consulting':

src/pages/member/MemberOrders.tsx

@@ -9,6 +9,7 @@ import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { formatIDR, formatDate } from "@/lib/format";
 import { ChevronRight, X } from "lucide-react";
+import { getPaymentStatusLabel, getPaymentStatusColor } from "@/lib/statusHelpers";
 
 interface Order {
   id: string;
@@ -41,21 +42,6 @@ export default function MemberOrders() {
     setLoading(false);
   };
 
-  const getStatusLabel = (status: string | null) => {
-    switch (status) {
-      case "paid":
-        return "Lunas";
-      case "pending":
-        return "Pending";
-      case "failed":
-        return "Gagal";
-      case "cancelled":
-        return "Dibatalkan";
-      default:
-        return status || "Pending";
-    }
-  };
-
   // Filter orders based on status
   const filteredOrders = orders.filter((order) => {
     const status = order.payment_status || order.status;
@@ -76,19 +62,6 @@ export default function MemberOrders() {
     setSelectedStatus('all');
   };
 
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case "paid":
-        return "bg-brand-accent text-white";
-      case "pending":
-        return "bg-amber-500 text-white";
-      case "cancelled":
-        return "bg-destructive text-white";
-      default:
-        return "bg-secondary";
-    }
-  };
-
   if (authLoading || loading) {
     return (
       <AppLayout>
@@ -125,7 +98,7 @@ export default function MemberOrders() {
                     onClick={() => setSelectedStatus(status)}
                     className={selectedStatus === status ? 'shadow-sm' : 'border-2'}
                   >
-                    {getStatusLabel(status)}
+                    {getPaymentStatusLabel(status)}
                     <span className="ml-1 text-xs opacity-70">({count})</span>
                   </Button>
                 );
@@ -184,8 +157,8 @@ export default function MemberOrders() {
                       )}
                     </div>
                     <div className="flex items-center gap-4">
-                      <Badge className={`${getStatusColor(order.payment_status || order.status)} rounded-full`}>
-                        {getStatusLabel(order.payment_status || order.status)}
+                      <Badge className={`${getPaymentStatusColor(order.payment_status || order.status)} rounded-full`}>
+                        {getPaymentStatusLabel(order.payment_status || order.status)}
                       </Badge>
                       <span className="font-bold">{formatIDR(order.total_amount)}</span>
                       <ChevronRight className="w-5 h-5 text-muted-foreground" />

src/pages/member/OrderDetail.tsx

@@ -12,6 +12,7 @@ import { Alert, AlertDescription } from "@/components/ui/alert";
 import { formatIDR, formatDate } from "@/lib/format";
 import { ArrowLeft, Package, CreditCard, Calendar, AlertCircle, Video, Clock, RefreshCw } from "lucide-react";
 import { QRCodeSVG } from "qrcode.react";
+import { getPaymentStatusLabel, getPaymentStatusColor, getProductTypeLabel } from "@/lib/statusHelpers";
 
 interface OrderItem {
   id: string;
@@ -203,35 +204,6 @@ export default function OrderDetail() {
     return () => clearInterval(timer);
   }, [order?.qr_expires_at]);
 
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case "paid":
-        return "bg-brand-accent text-white";
-      case "pending":
-        return "bg-amber-500 text-white";
-      case "cancelled":
-      case "failed":
-        return "bg-destructive text-white";
-      default:
-        return "bg-secondary";
-    }
-  };
-
-  const getStatusLabel = (status: string | null) => {
-    switch (status) {
-      case "paid":
-        return "Lunas";
-      case "pending":
-        return "Pending";
-      case "failed":
-        return "Gagal";
-      case "cancelled":
-        return "Dibatalkan";
-      default:
-        return status || "Pending";
-    }
-  };
-
   const getTypeLabel = (type: string) => {
     switch (type) {
       case "consulting":
@@ -337,8 +309,8 @@ 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)} rounded-full`}>
-            {getStatusLabel(order.payment_status || order.status)}
+          <Badge className={`${getPaymentStatusColor(order.payment_status || order.status)} rounded-full`}>
+            {getPaymentStatusLabel(order.payment_status || order.status)}
           </Badge>
         </div>