Code edited in Lovable Code Editor

Edited UI in Lovable
This commit is contained in:
gpt-engineer-app[bot]
2025-12-19 10:58:15 +00:00
parent 3392932444
commit 604cece8b1

View File

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