diff --git a/src/pages/admin/AdminMembers.tsx b/src/pages/admin/AdminMembers.tsx
index 126de0d..d9254d0 100644
--- a/src/pages/admin/AdminMembers.tsx
+++ b/src/pages/admin/AdminMembers.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 } 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 { formatDateTime } from '@/lib/format';
-import { Eye, Shield, ShieldOff } 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 } 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 { formatDateTime } from "@/lib/format";
+import { Eye, Shield, ShieldOff } from "lucide-react";
+import { toast } from "@/hooks/use-toast";
 
 interface Member {
   id: string;
@@ -39,46 +39,49 @@ export default function AdminMembers() {
 
   useEffect(() => {
     if (!authLoading) {
-      if (!user) navigate('/auth');
-      else if (!isAdmin) navigate('/dashboard');
+      if (!user) navigate("/auth");
+      else if (!isAdmin) navigate("/dashboard");
       else fetchMembers();
     }
   }, [user, isAdmin, authLoading]);
 
   const fetchMembers = async () => {
     const [profilesRes, rolesRes] = await Promise.all([
-      supabase.from('profiles').select('*').order('created_at', { ascending: false }),
-      supabase.from('user_roles').select('user_id').eq('role', 'admin'),
+      supabase.from("profiles").select("*").order("created_at", { ascending: false }),
+      supabase.from("user_roles").select("user_id").eq("role", "admin"),
     ]);
 
-    const admins = new Set((rolesRes.data || []).map(r => r.user_id));
+    const admins = new Set((rolesRes.data || []).map((r) => r.user_id));
     setAdminIds(admins);
 
     if (profilesRes.data) {
-      setMembers(profilesRes.data.map(p => ({ ...p, isAdmin: admins.has(p.id) })));
+      setMembers(profilesRes.data.map((p) => ({ ...p, isAdmin: admins.has(p.id) })));
     }
     setLoading(false);
   };
 
   const viewMemberDetails = async (member: Member) => {
     setSelectedMember(member);
-    const { data } = await supabase
-      .from('user_access')
-      .select('*, product:products(title)')
-      .eq('user_id', member.id);
-    setMemberAccess(data as unknown as UserAccess[] || []);
+    const { data } = await supabase.from("user_access").select("*, product:products(title)").eq("user_id", member.id);
+    setMemberAccess((data as unknown as UserAccess[]) || []);
     setDialogOpen(true);
   };
 
   const toggleAdminRole = async (memberId: string, currentlyAdmin: boolean) => {
     if (currentlyAdmin) {
-      const { error } = await supabase.from('user_roles').delete().eq('user_id', memberId).eq('role', 'admin');
-      if (error) toast({ title: 'Error', description: 'Gagal menghapus role admin', variant: 'destructive' });
-      else { toast({ title: 'Berhasil', description: 'Role admin dihapus' }); fetchMembers(); }
+      const { error } = await supabase.from("user_roles").delete().eq("user_id", memberId).eq("role", "admin");
+      if (error) toast({ title: "Error", description: "Gagal menghapus role admin", variant: "destructive" });
+      else {
+        toast({ title: "Berhasil", description: "Role admin dihapus" });
+        fetchMembers();
+      }
     } else {
-      const { error } = await supabase.from('user_roles').insert({ user_id: memberId, role: 'admin' });
-      if (error) toast({ title: 'Error', description: error.message, variant: 'destructive' });
-      else { toast({ title: 'Berhasil', description: 'Role admin ditambahkan' }); fetchMembers(); }
+      const { error } = await supabase.from("user_roles").insert({ user_id: memberId, role: "admin" });
+      if (error) toast({ title: "Error", description: error.message, variant: "destructive" });
+      else {
+        toast({ title: "Berhasil", description: "Role admin ditambahkan" });
+        fetchMembers();
+      }
     }
   };
 
@@ -114,13 +117,13 @@ export default function AdminMembers() {
               <TableBody>
                 {members.map((member) => (
                   <TableRow key={member.id}>
-                    <TableCell>{member.email || '-'}</TableCell>
-                    <TableCell>{member.full_name || '-'}</TableCell>
+                    <TableCell>{member.email || "-"}</TableCell>
+                    <TableCell>{member.full_name || "-"}</TableCell>
                     <TableCell>
                       {adminIds.has(member.id) ? (
                         <Badge className="bg-primary">Admin</Badge>
                       ) : (
-                        <Badge className="bg-secondary">Member</Badge>
+                        <Badge className="bg-secondary text-primary">Member</Badge>
                       )}
                     </TableCell>
                     <TableCell>{formatDateTime(member.created_at)}</TableCell>
@@ -159,9 +162,15 @@ export default function AdminMembers() {
             {selectedMember && (
               <div className="space-y-4">
                 <div className="text-sm space-y-1">
-                  <p><span className="text-muted-foreground">Email:</span> {selectedMember.email}</p>
-                  <p><span className="text-muted-foreground">Nama:</span> {selectedMember.full_name || '-'}</p>
-                  <p><span className="text-muted-foreground">ID:</span> {selectedMember.id}</p>
+                  <p>
+                    <span className="text-muted-foreground">Email:</span> {selectedMember.email}
+                  </p>
+                  <p>
+                    <span className="text-muted-foreground">Nama:</span> {selectedMember.full_name || "-"}
+                  </p>
+                  <p>
+                    <span className="text-muted-foreground">ID:</span> {selectedMember.id}
+                  </p>
                 </div>
                 <div className="border-t border-border pt-4">
                   <p className="font-medium mb-2">Akses Produk:</p>