pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-24 16:51:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Redesign admin panel

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-04 18:58:39 +00:00
parent 095907b3a5
commit 35f380bfb4
6 changed files with 250 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/components/moderation/ProfileManager.tsx
View File

@@ -264,32 +264,32 @@ export function ProfileManager() {
}
return (
<div className="space-y-6">
{/* Filters */}
<div className="flex flex-col sm:flex-row gap-4">
<div className="space-y-4">
{/* Filters - compact single row */}
<div className="flex flex-col sm:flex-row gap-3">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
<Input
placeholder="Search users..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-10"
className="pl-10 h-9"
/>
</div>
<Select value={statusFilter} onValueChange={(value: 'all' | 'active' | 'banned') => setStatusFilter(value)}>
<SelectTrigger className="w-full sm:w-[180px]">
<SelectTrigger className="w-full sm:w-[140px] h-9">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All Users</SelectItem>
<SelectItem value="all">All Status</SelectItem>
<SelectItem value="active">Active</SelectItem>
<SelectItem value="banned">Banned</SelectItem>
</SelectContent>
</Select>
<Select value={roleFilter} onValueChange={(value: 'all' | UserRole) => setRoleFilter(value)}>
<SelectTrigger className="w-full sm:w-[180px]">
<SelectTrigger className="w-full sm:w-[140px] h-9">
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -305,49 +305,51 @@ export function ProfileManager() {
{/* Users List */}
{loading ? (
<div className="flex items-center justify-center py-8">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
</div>
) : (
<div className="grid gap-4">
<div className="space-y-2">
{filteredProfiles.map((profile) => (
<Card key={profile.id}>
<CardContent className="p-6">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4">
<Avatar className="w-12 h-12">
<Card key={profile.id} className="border-border/50 hover:border-border transition-colors">
<CardContent className="p-4">
<div className="flex items-center justify-between gap-4">
<div className="flex items-center gap-3 min-w-0 flex-1">
<Avatar className="w-10 h-10 flex-shrink-0">
<AvatarImage src={profile.avatar_url} alt={profile.username} />
<AvatarFallback>
<AvatarFallback className="text-xs">
{profile.display_name?.[0] || profile.username[0]}
</AvatarFallback>
</Avatar>
<div>
<div className="flex items-center gap-2">
<h3 className="font-medium">{profile.display_name || profile.username}</h3>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2 flex-wrap">
<h3 className="font-medium text-sm truncate">{profile.display_name || profile.username}</h3>
{profile.banned && (
<Badge variant="destructive" className="text-xs">
<Badge variant="destructive" className="text-xs h-5">
<Ban className="w-3 h-3 mr-1" />
Banned
</Badge>
)}
</div>
<p className="text-sm text-muted-foreground">@{profile.username}</p>
<div className="flex gap-2 mt-1">
{profile.roles.length > 0 ? (
profile.roles.map((role) => (
<Badge key={role} variant="secondary" className="text-xs">
{role}
</Badge>
))
) : (
<Badge variant="outline" className="text-xs">User</Badge>
)}
<div className="flex items-center gap-2 mt-0.5 flex-wrap">
<p className="text-xs text-muted-foreground">@{profile.username}</p>
<div className="flex gap-1.5">
{profile.roles.length > 0 ? (
profile.roles.map((role) => (
<Badge key={role} variant="secondary" className="text-xs h-5">
{role}
</Badge>
))
) : (
<Badge variant="outline" className="text-xs h-5">User</Badge>
)}
</div>
</div>
</div>
</div>
{canManageUser(profile) && (
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 flex-shrink-0">
{/* Ban/Unban Button */}
{permissions.can_ban_any_user && (
<AlertDialog>
@@ -355,17 +357,18 @@ export function ProfileManager() {
<Button
variant={profile.banned ? "outline" : "destructive"}
size="sm"
className="h-8"
disabled={actionLoading === profile.user_id}
>
{profile.banned ? (
<>
<UserCheck className="w-4 h-4 mr-2" />
Unban
<UserCheck className="w-3 h-3 sm:mr-2" />
<span className="hidden sm:inline">Unban</span>
</>
) : (
<>
<UserX className="w-4 h-4 mr-2" />
Ban
<UserX className="w-3 h-3 sm:mr-2" />
<span className="hidden sm:inline">Ban</span>
</>
)}
</Button>
@@ -399,18 +402,18 @@ export function ProfileManager() {
onValueChange={(value) => handleRoleChange(profile.user_id, value as UserRole | 'remove', profile.roles)}
disabled={actionLoading === profile.user_id}
>
<SelectTrigger className="w-[140px]">
<SelectValue placeholder="Change Role" />
<SelectTrigger className="w-[100px] sm:w-[130px] h-8">
<SelectValue placeholder="Role" />
</SelectTrigger>
<SelectContent>
<SelectItem value="user">Make User</SelectItem>
<SelectItem value="user">User</SelectItem>
{permissions.can_manage_moderator_roles && (
<SelectItem value="moderator">Make Moderator</SelectItem>
<SelectItem value="moderator">Moderator</SelectItem>
)}
{permissions.can_manage_admin_roles && (
<SelectItem value="admin">Make Admin</SelectItem>
<SelectItem value="admin">Admin</SelectItem>
)}
<SelectItem value="remove">Remove Roles</SelectItem>
<SelectItem value="remove">Remove</SelectItem>
</SelectContent>
</Select>
)}
@@ -422,10 +425,10 @@ export function ProfileManager() {
))}
{filteredProfiles.length === 0 && (
<div className="text-center py-8">
<AlertTriangle className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
<h3 className="text-lg font-semibold mb-2">No Users Found</h3>
<p className="text-muted-foreground">
<div className="text-center py-12">
<AlertTriangle className="w-12 h-12 text-muted-foreground mx-auto mb-3" />
<h3 className="text-base font-semibold mb-1">No Users Found</h3>
<p className="text-sm text-muted-foreground">
No users match your current filters.
</p>
</div>