From 0778eec2881864b29eb483a065070f128d9bbbea Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 19 Dec 2025 11:01:34 +0000
Subject: [PATCH] Code edited in Lovable Code Editor

Edited UI in Lovable
---
 src/pages/admin/AdminOrders.tsx | 116 ++++++++++++++++++--------------
 1 file changed, 66 insertions(+), 50 deletions(-)

diff --git a/src/pages/admin/AdminOrders.tsx b/src/pages/admin/AdminOrders.tsx
index 3718738..8dbef02 100644
--- a/src/pages/admin/AdminOrders.tsx
+++ b/src/pages/admin/AdminOrders.tsx
@@ -1,17 +1,17 @@
-import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import { Skeleton } from '@/components/ui/skeleton';
-import { formatIDR, formatDateTime } from '@/lib/format';
-import { Eye, CheckCircle, XCircle } from 'lucide-react';
-import { toast } from '@/hooks/use-toast';
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Skeleton } from "@/components/ui/skeleton";
+import { formatIDR, formatDateTime } from "@/lib/format";
+import { Eye, CheckCircle, XCircle } from "lucide-react";
+import { toast } from "@/hooks/use-toast";
 
 interface Order {
   id: string;
@@ -43,51 +43,51 @@ export default function AdminOrders() {
 
   useEffect(() => {
     if (!authLoading) {
-      if (!user) navigate('/auth');
-      else if (!isAdmin) navigate('/dashboard');
+      if (!user) navigate("/auth");
+      else if (!isAdmin) navigate("/dashboard");
       else fetchOrders();
     }
   }, [user, isAdmin, authLoading]);
 
   const fetchOrders = async () => {
     const { data, error } = await supabase
-      .from('orders')
-      .select('*, profile:profiles(email)')
-      .order('created_at', { ascending: false });
+      .from("orders")
+      .select("*, profile:profiles(email)")
+      .order("created_at", { ascending: false });
     if (!error && data) setOrders(data as unknown as Order[]);
     setLoading(false);
   };
 
   const viewOrderDetails = async (order: Order) => {
     setSelectedOrder(order);
-    const { data } = await supabase
-      .from('order_items')
-      .select('*, product:products(title)')
-      .eq('order_id', order.id);
-    setOrderItems(data as unknown as OrderItem[] || []);
+    const { data } = await supabase.from("order_items").select("*, product:products(title)").eq("order_id", order.id);
+    setOrderItems((data as unknown as OrderItem[]) || []);
     setDialogOpen(true);
   };
 
-  const updateOrderStatus = async (orderId: string, status: 'paid' | 'cancelled') => {
-    const { error } = await supabase.from('orders').update({ payment_status: status }).eq('id', orderId);
+  const updateOrderStatus = async (orderId: string, status: "paid" | "cancelled") => {
+    const { error } = await supabase.from("orders").update({ payment_status: status }).eq("id", orderId);
     if (error) {
-      toast({ title: 'Error', description: 'Gagal update status', variant: 'destructive' });
+      toast({ title: "Error", description: "Gagal update status", variant: "destructive" });
     } else {
-      if (status === 'paid') {
+      if (status === "paid") {
         // Grant access for each order item
-        const { data: items } = await supabase.from('order_items').select('product_id').eq('order_id', orderId);
-        const order = orders.find(o => o.id === orderId);
+        const { data: items } = await supabase.from("order_items").select("product_id").eq("order_id", orderId);
+        const order = orders.find((o) => o.id === orderId);
         if (items && order) {
           for (const item of items) {
-            await supabase.from('user_access').upsert({
-              user_id: order.user_id,
-              product_id: item.product_id,
-              granted_at: new Date().toISOString(),
-            }, { onConflict: 'user_id,product_id' });
+            await supabase.from("user_access").upsert(
+              {
+                user_id: order.user_id,
+                product_id: item.product_id,
+                granted_at: new Date().toISOString(),
+              },
+              { onConflict: "user_id,product_id" },
+            );
           }
         }
       }
-      toast({ title: 'Berhasil', description: `Status diubah ke ${status}` });
+      toast({ title: "Berhasil", description: `Status diubah ke ${status}` });
       fetchOrders();
       setDialogOpen(false);
     }
@@ -95,10 +95,14 @@ export default function AdminOrders() {
 
   const getStatusBadge = (status: string | null) => {
     switch (status) {
-      case 'paid': return <Badge className="bg-accent">Lunas</Badge>;
-      case 'pending': return <Badge className="bg-secondary">Pending</Badge>;
-      case 'cancelled': return <Badge className="bg-destructive">Dibatalkan</Badge>;
-      default: return <Badge className="bg-muted">{status}</Badge>;
+      case "paid":
+        return <Badge className="bg-accent">Lunas</Badge>;
+      case "pending":
+        return <Badge className="bg-secondary text-primary-foreground">Pending</Badge>;
+      case "cancelled":
+        return <Badge className="bg-destructive">Dibatalkan</Badge>;
+      default:
+        return <Badge className="bg-muted">{status}</Badge>;
     }
   };
 
@@ -137,9 +141,9 @@ export default function AdminOrders() {
                 {orders.map((order) => (
                   <TableRow key={order.id}>
                     <TableCell className="font-mono text-sm">{order.id.slice(0, 8)}</TableCell>
-                    <TableCell>{order.profile?.email || '-'}</TableCell>
+                    <TableCell>{order.profile?.email || "-"}</TableCell>
                     <TableCell className="font-bold">{formatIDR(order.total_amount)}</TableCell>
-                    <TableCell className="uppercase text-sm">{order.payment_method || '-'}</TableCell>
+                    <TableCell className="uppercase text-sm">{order.payment_method || "-"}</TableCell>
                     <TableCell>{getStatusBadge(order.payment_status)}</TableCell>
                     <TableCell>{formatDateTime(order.created_at)}</TableCell>
                     <TableCell className="text-right">
@@ -169,10 +173,18 @@ export default function AdminOrders() {
             {selectedOrder && (
               <div className="space-y-4">
                 <div className="grid grid-cols-2 gap-2 text-sm">
-                  <div><span className="text-muted-foreground">ID:</span> {selectedOrder.id.slice(0, 8)}</div>
-                  <div><span className="text-muted-foreground">Referensi:</span> {selectedOrder.payment_reference || '-'}</div>
-                  <div><span className="text-muted-foreground">Email:</span> {selectedOrder.profile?.email}</div>
-                  <div><span className="text-muted-foreground">Metode:</span> {selectedOrder.payment_method || '-'}</div>
+                  <div>
+                    <span className="text-muted-foreground">ID:</span> {selectedOrder.id.slice(0, 8)}
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground">Referensi:</span> {selectedOrder.payment_reference || "-"}
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground">Email:</span> {selectedOrder.profile?.email}
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground">Metode:</span> {selectedOrder.payment_method || "-"}
+                  </div>
                 </div>
                 <div className="border-t border-border pt-4">
                   <p className="font-medium mb-2">Item:</p>
@@ -188,14 +200,18 @@ export default function AdminOrders() {
                   </div>
                 </div>
                 <div className="flex gap-2 pt-4">
-                  {selectedOrder.payment_status !== 'paid' && (
-                    <Button onClick={() => updateOrderStatus(selectedOrder.id, 'paid')} className="flex-1">
+                  {selectedOrder.payment_status !== "paid" && (
+                    <Button onClick={() => updateOrderStatus(selectedOrder.id, "paid")} className="flex-1">
                       <CheckCircle className="w-4 h-4 mr-2" />
                       Tandai Lunas
                     </Button>
                   )}
-                  {selectedOrder.payment_status !== 'cancelled' && (
-                    <Button variant="outline" onClick={() => updateOrderStatus(selectedOrder.id, 'cancelled')} className="flex-1 border-2">
+                  {selectedOrder.payment_status !== "cancelled" && (
+                    <Button
+                      variant="outline"
+                      onClick={() => updateOrderStatus(selectedOrder.id, "cancelled")}
+                      className="flex-1 border-2"
+                    >
                       <XCircle className="w-4 h-4 mr-2" />
                       Batalkan
                     </Button>