mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-21 13:11:12 -05:00
Refactor: Redesign admin panel
This commit is contained in:
gpt-engineer-app[bot]
@@ -4,9 +4,7 @@ import { ProfileManager } from '@/components/moderation/ProfileManager';
|
||||
import { UserRoleManager } from '@/components/moderation/UserRoleManager';
|
||||
import { Users, Shield, UserCheck, UserX } from 'lucide-react';
|
||||
export function UserManagement() {
|
||||
return <div className="space-y-6">
|
||||
|
||||
|
||||
return (
|
||||
<Tabs defaultValue="profiles" className="space-y-4">
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="profiles" className="flex items-center gap-2">
|
||||
@@ -19,23 +17,13 @@ export function UserManagement() {
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="profiles">
|
||||
<Card>
|
||||
|
||||
<CardContent>
|
||||
<TabsContent value="profiles" className="mt-4">
|
||||
<ProfileManager />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="roles">
|
||||
<Card>
|
||||
|
||||
<CardContent>
|
||||
<TabsContent value="roles" className="mt-4">
|
||||
<UserRoleManager />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>;
|
||||
);
|
||||
}
|
||||
@@ -27,27 +27,24 @@ export function AdminHeader({ onRefresh }: { onRefresh?: () => void }) {
|
||||
const pageTitle = isSettingsPage ? 'Admin Settings' : 'Admin Dashboard';
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div className="container flex h-16 items-center justify-between px-4">
|
||||
<header className="sticky top-0 z-50 w-full border-b border-border/50 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div className="container flex h-14 items-center justify-between px-4 max-w-7xl">
|
||||
{/* Left Section - Navigation */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="ghost" size="sm" asChild>
|
||||
<Link to={backLink} className="flex items-center gap-2">
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">{backText}</span>
|
||||
<span className="hidden sm:inline text-sm">{backText}</span>
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<div className="h-6 w-px bg-border hidden sm:block" />
|
||||
<div className="h-4 w-px bg-border/50 hidden sm:block" />
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="w-6 h-6 text-primary" />
|
||||
<h1 className="text-lg font-semibold">
|
||||
<h1 className="text-base font-semibold">
|
||||
<span className="sm:hidden">Admin</span>
|
||||
<span className="hidden sm:inline">{pageTitle}</span>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Section - Admin actions */}
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -94,16 +91,16 @@ export function AdminHeader({ onRefresh }: { onRefresh?: () => void }) {
|
||||
size="sm"
|
||||
onClick={onRefresh}
|
||||
title="Refresh admin data"
|
||||
className="hidden md:flex"
|
||||
className="hidden md:flex gap-2"
|
||||
>
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
<span className="hidden sm:ml-2 sm:inline">Refresh</span>
|
||||
<span className="text-sm">Refresh</span>
|
||||
</Button>
|
||||
{permissions?.role_level === 'superuser' && !isSettingsPage && (
|
||||
<Button variant="ghost" size="sm" asChild className="hidden md:flex">
|
||||
<Button variant="ghost" size="sm" asChild className="hidden md:flex gap-2">
|
||||
<Link to="/admin/settings">
|
||||
<Settings className="w-4 h-4" />
|
||||
<span className="hidden sm:ml-2 sm:inline">Settings</span>
|
||||
<span className="text-sm">Settings</span>
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@@ -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">
|
||||
<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">
|
||||
<Badge key={role} variant="secondary" className="text-xs h-5">
|
||||
{role}
|
||||
</Badge>
|
||||
))
|
||||
) : (
|
||||
<Badge variant="outline" className="text-xs">User</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>
|
||||
|
||||
@@ -212,47 +212,44 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
{reports.map((report) => (
|
||||
<Card key={report.id} className="border-l-4 border-l-red-500">
|
||||
<CardHeader className="pb-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge variant="destructive">
|
||||
<Card key={report.id} className="border-border/50 relative before:absolute before:left-0 before:top-0 before:bottom-0 before:w-1 before:bg-red-500/50 before:rounded-l">
|
||||
<CardHeader className="pb-3 pt-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Badge variant="destructive" className="text-xs">
|
||||
<Flag className="w-3 h-3 mr-1" />
|
||||
{REPORT_TYPE_LABELS[report.report_type as keyof typeof REPORT_TYPE_LABELS]}
|
||||
</Badge>
|
||||
<Badge variant="outline">
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{report.reported_entity_type}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Calendar className="w-4 h-4" />
|
||||
{format(new Date(report.created_at), 'MMM d, yyyy HH:mm')}
|
||||
<div className="flex items-center gap-1.5 text-xs text-muted-foreground whitespace-nowrap">
|
||||
<Calendar className="w-3 h-3" />
|
||||
{format(new Date(report.created_at), 'MMM d, HH:mm')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{report.reporter_profile && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<User className="w-4 h-4 text-muted-foreground" />
|
||||
<span>Reported by:</span>
|
||||
<span className="font-medium">
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground mt-2">
|
||||
<User className="w-3 h-3" />
|
||||
<span className="font-medium text-foreground">
|
||||
{report.reporter_profile.display_name || report.reporter_profile.username}
|
||||
</span>
|
||||
{report.reporter_profile.display_name && (
|
||||
<span className="text-muted-foreground">
|
||||
@{report.reporter_profile.username}
|
||||
</span>
|
||||
<span>@{report.reporter_profile.username}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-4">
|
||||
<CardContent className="space-y-3 pt-0">
|
||||
{report.reason && (
|
||||
<div>
|
||||
<Label>Report Reason:</Label>
|
||||
<p className="text-sm bg-muted/50 p-3 rounded-lg mt-1">
|
||||
<Label className="text-xs text-muted-foreground">Reason</Label>
|
||||
<p className="text-sm bg-muted/30 p-2.5 rounded-lg mt-1">
|
||||
{report.reason}
|
||||
</p>
|
||||
</div>
|
||||
@@ -260,17 +257,17 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
|
||||
|
||||
{report.reported_content && (
|
||||
<div>
|
||||
<Label>Reported Content:</Label>
|
||||
<div className="bg-destructive/5 border border-destructive/20 p-4 rounded-lg mt-1">
|
||||
<Label className="text-xs text-muted-foreground">Reported Content</Label>
|
||||
<div className="bg-muted/30 border border-border/50 p-3 rounded-lg mt-1">
|
||||
{report.reported_entity_type === 'review' && (
|
||||
<div>
|
||||
{report.reported_content.title && (
|
||||
<h4 className="font-semibold mb-2">{report.reported_content.title}</h4>
|
||||
<h4 className="font-medium text-sm mb-1.5">{report.reported_content.title}</h4>
|
||||
)}
|
||||
{report.reported_content.content && (
|
||||
<p className="text-sm mb-2">{report.reported_content.content}</p>
|
||||
<p className="text-sm text-muted-foreground mb-2">{report.reported_content.content}</p>
|
||||
)}
|
||||
<div className="text-sm text-muted-foreground">
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Rating: {report.reported_content.rating}/5
|
||||
</div>
|
||||
</div>
|
||||
@@ -279,10 +276,11 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2 pt-2">
|
||||
<div className="flex gap-2 pt-1">
|
||||
<Button
|
||||
onClick={() => handleReportAction(report.id, 'reviewed')}
|
||||
disabled={actionLoading === report.id}
|
||||
size="sm"
|
||||
className="flex-1"
|
||||
>
|
||||
<CheckCircle className="w-4 h-4 mr-2" />
|
||||
@@ -290,6 +288,7 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleReportAction(report.id, 'dismissed')}
|
||||
disabled={actionLoading === report.id}
|
||||
className="flex-1"
|
||||
|
||||
@@ -179,28 +179,30 @@ export function UserRoleManager() {
|
||||
</div>;
|
||||
}
|
||||
const filteredRoles = userRoles.filter(role => role.profiles?.username?.toLowerCase().includes(searchTerm.toLowerCase()) || role.profiles?.display_name?.toLowerCase().includes(searchTerm.toLowerCase()) || role.role.toLowerCase().includes(searchTerm.toLowerCase()));
|
||||
return <div className="space-y-6">
|
||||
return <div className="space-y-4">
|
||||
{/* Add new role */}
|
||||
<Card>
|
||||
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Card className="border-border/50">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base">Grant Role</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<Label htmlFor="user-search">Search Users</Label>
|
||||
<Label htmlFor="user-search" className="text-sm">Search Users</Label>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-3 w-4 h-4 text-muted-foreground" />
|
||||
<Input id="user-search" placeholder="Search by username or display name..." value={newUserSearch} onChange={e => setNewUserSearch(e.target.value)} className="pl-10" />
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input id="user-search" placeholder="Search by username..." value={newUserSearch} onChange={e => setNewUserSearch(e.target.value)} className="pl-10 h-9 mt-1" />
|
||||
</div>
|
||||
|
||||
{searchResults.length > 0 && <div className="mt-2 border rounded-lg bg-background">
|
||||
{searchResults.map(profile => <div key={profile.user_id} className="p-3 hover:bg-muted/50 cursor-pointer border-b last:border-b-0" onClick={() => {
|
||||
{searchResults.length > 0 && <div className="mt-2 border border-border/50 rounded-lg bg-background max-h-[200px] overflow-y-auto">
|
||||
{searchResults.map(profile => <div key={profile.user_id} className="p-2.5 hover:bg-muted/50 cursor-pointer border-b border-border/50 last:border-b-0 text-sm" onClick={() => {
|
||||
setNewUserSearch(profile.display_name || profile.username);
|
||||
setSearchResults([profile]);
|
||||
}}>
|
||||
<div className="font-medium">
|
||||
{profile.display_name || profile.username}
|
||||
</div>
|
||||
{profile.display_name && <div className="text-sm text-muted-foreground">
|
||||
{profile.display_name && <div className="text-xs text-muted-foreground">
|
||||
@{profile.username}
|
||||
</div>}
|
||||
</div>)}
|
||||
@@ -208,10 +210,10 @@ export function UserRoleManager() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="role-select">Role</Label>
|
||||
<Label htmlFor="role-select" className="text-sm">Role</Label>
|
||||
<Select value={newRole} onValueChange={setNewRole}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a role" />
|
||||
<SelectTrigger className="h-9 mt-1">
|
||||
<SelectValue placeholder="Select role" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="moderator">Moderator</SelectItem>
|
||||
@@ -226,7 +228,7 @@ export function UserRoleManager() {
|
||||
if (selectedUser && newRole) {
|
||||
grantRole(selectedUser.user_id, newRole as 'admin' | 'moderator' | 'user');
|
||||
}
|
||||
}} disabled={!newRole || !searchResults.find(p => (p.display_name || p.username) === newUserSearch) || actionLoading === 'grant'} className="w-full md:w-auto">
|
||||
}} disabled={!newRole || !searchResults.find(p => (p.display_name || p.username) === newUserSearch) || actionLoading === 'grant'} size="sm" className="w-full md:w-auto">
|
||||
{actionLoading === 'grant' ? 'Granting...' : 'Grant Role'}
|
||||
</Button>
|
||||
</CardContent>
|
||||
@@ -234,39 +236,39 @@ export function UserRoleManager() {
|
||||
|
||||
{/* Search existing roles */}
|
||||
<div>
|
||||
<Label htmlFor="role-search">Search Existing Roles</Label>
|
||||
<Label htmlFor="role-search" className="text-sm">Search Existing Roles</Label>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-3 w-4 h-4 text-muted-foreground" />
|
||||
<Input id="role-search" placeholder="Search users with roles..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="pl-10" />
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input id="role-search" placeholder="Search users with roles..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="pl-10 h-9 mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* User roles list */}
|
||||
<div className="space-y-3">
|
||||
{filteredRoles.length === 0 ? <div className="text-center py-8">
|
||||
<Shield className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
|
||||
<h3 className="text-lg font-semibold mb-2">No roles found</h3>
|
||||
<p className="text-muted-foreground">
|
||||
{searchTerm ? 'No users match your search criteria.' : 'No user roles have been granted yet.'}
|
||||
<div className="space-y-2">
|
||||
{filteredRoles.length === 0 ? <div className="text-center py-12">
|
||||
<Shield className="w-12 h-12 text-muted-foreground mx-auto mb-3" />
|
||||
<h3 className="text-base font-semibold mb-1">No roles found</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{searchTerm ? 'No users match your search.' : 'No user roles granted yet.'}
|
||||
</p>
|
||||
</div> : filteredRoles.map(userRole => <Card key={userRole.id}>
|
||||
<CardContent className="flex items-center justify-between p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div>
|
||||
<div className="font-medium">
|
||||
</div> : filteredRoles.map(userRole => <Card key={userRole.id} className="border-border/50">
|
||||
<CardContent className="flex items-center justify-between p-3">
|
||||
<div className="flex items-center gap-3 min-w-0 flex-1">
|
||||
<div className="min-w-0">
|
||||
<div className="font-medium text-sm truncate">
|
||||
{userRole.profiles?.display_name || userRole.profiles?.username}
|
||||
</div>
|
||||
{userRole.profiles?.display_name && <div className="text-sm text-muted-foreground">
|
||||
{userRole.profiles?.display_name && <div className="text-xs text-muted-foreground">
|
||||
@{userRole.profiles.username}
|
||||
</div>}
|
||||
</div>
|
||||
<Badge variant={userRole.role === 'admin' ? 'default' : 'secondary'}>
|
||||
<Badge variant={userRole.role === 'admin' ? 'default' : 'secondary'} className="text-xs h-5">
|
||||
{userRole.role}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Only show revoke button if current user can manage this role */}
|
||||
{(isSuperuser() || isAdmin() && !['admin', 'superuser'].includes(userRole.role)) && <Button variant="outline" size="sm" onClick={() => revokeRole(userRole.id)} disabled={actionLoading === userRole.id}>
|
||||
{(isSuperuser() || isAdmin() && !['admin', 'superuser'].includes(userRole.role)) && <Button variant="outline" size="sm" onClick={() => revokeRole(userRole.id)} disabled={actionLoading === userRole.id} className="h-8 w-8 p-0 flex-shrink-0">
|
||||
<X className="w-4 h-4" />
|
||||
</Button>}
|
||||
</CardContent>
|
||||
|
||||
@@ -79,75 +79,88 @@ export default function Admin() {
|
||||
return (
|
||||
<>
|
||||
<AdminHeader onRefresh={handleRefresh} />
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="space-y-4 mb-8">
|
||||
{/* Refresh status indicator */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
<div className="container mx-auto px-4 py-8 max-w-7xl">
|
||||
{/* Refresh status indicator - subtle */}
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground mb-6">
|
||||
<RefreshCw className="w-3 h-3" />
|
||||
{refreshMode === 'auto' ? (
|
||||
<span>Auto-refresh: every {pollInterval / 1000}s</span>
|
||||
) : (
|
||||
<span>Manual refresh only</span>
|
||||
<span>Manual refresh</span>
|
||||
)}
|
||||
{lastUpdated && (
|
||||
<span className="text-xs">
|
||||
• Last updated: {lastUpdated.toLocaleTimeString()}
|
||||
</span>
|
||||
<span>• {lastUpdated.toLocaleTimeString()}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats cards */}
|
||||
<div className="grid grid-cols-3 gap-3 md:gap-6">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-col items-center justify-center space-y-0 pb-2 text-center">
|
||||
<FileText className="h-4 w-4 text-muted-foreground mb-2" />
|
||||
<CardTitle className="text-sm font-medium">Pending Submissions</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-center">
|
||||
<div className="text-2xl font-bold">
|
||||
{/* Stats cards - horizontal layout */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-12">
|
||||
<Card className="border-border/50 hover:border-border/80 transition-colors">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-amber-500/10">
|
||||
<FileText className="h-5 w-5 text-amber-700 dark:text-amber-300" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">Pending</p>
|
||||
<p className="text-xs text-muted-foreground/80">Submissions</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-4xl font-bold text-amber-700 dark:text-amber-300">
|
||||
{stats.pendingSubmissions}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-col items-center justify-center space-y-0 pb-2 text-center">
|
||||
<Flag className="h-4 w-4 text-muted-foreground mb-2" />
|
||||
<CardTitle className="text-sm font-medium">Open Reports</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-center">
|
||||
<div className="text-2xl font-bold">
|
||||
<Card className="border-border/50 hover:border-border/80 transition-colors">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-red-500/10">
|
||||
<Flag className="h-5 w-5 text-red-700 dark:text-red-300" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">Open</p>
|
||||
<p className="text-xs text-muted-foreground/80">Reports</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-4xl font-bold text-red-700 dark:text-red-300">
|
||||
{stats.openReports}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-col items-center justify-center space-y-0 pb-2 text-center">
|
||||
<AlertCircle className="h-4 w-4 text-muted-foreground mb-2" />
|
||||
<CardTitle className="text-sm font-medium">Flagged Content</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-center">
|
||||
<div className="text-2xl font-bold">
|
||||
<Card className="border-border/50 hover:border-border/80 transition-colors">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-orange-500/10">
|
||||
<AlertCircle className="h-5 w-5 text-orange-700 dark:text-orange-300" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">Flagged</p>
|
||||
<p className="text-xs text-muted-foreground/80">Content</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-4xl font-bold text-orange-700 dark:text-orange-300">
|
||||
{stats.flaggedContent}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Moderation Section */}
|
||||
<Card className="mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
{/* Content Moderation Section - flatter design */}
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<Shield className="w-5 h-5" />
|
||||
Moderation Queue
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Tabs defaultValue="queue" className="space-y-6">
|
||||
</h2>
|
||||
<Tabs defaultValue="queue" className="space-y-4">
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="queue" className="flex items-center gap-2">
|
||||
<FileText className="w-4 h-4" />
|
||||
@@ -159,29 +172,25 @@ export default function Admin() {
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="queue">
|
||||
<TabsContent value="queue" className="mt-4">
|
||||
<ModerationQueue ref={moderationQueueRef} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="reports">
|
||||
<TabsContent value="reports" className="mt-4">
|
||||
<ReportsQueue ref={reportsQueueRef} />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* User Management Section */}
|
||||
<Card className="mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
{/* User Management Section - flatter design */}
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<Users className="w-5 h-5" />
|
||||
User Management
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
</h2>
|
||||
<UserManagement />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user