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

Reverted to commit 095907b3a5

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-04 19:16:36 +00:00
parent 58c28a37eb
commit 065b1b4be5
15 changed files with 257 additions and 680 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.tsx
View File

@@ -33,10 +33,7 @@ import NotFound from "./pages/NotFound";
import Terms from "./pages/Terms"; import Terms from "./pages/Terms";
import Privacy from "./pages/Privacy"; import Privacy from "./pages/Privacy";
import SubmissionGuidelines from "./pages/SubmissionGuidelines"; import SubmissionGuidelines from "./pages/SubmissionGuidelines";
import AdminDashboard from "./pages/AdminDashboard"; import Admin from "./pages/Admin";
import AdminModeration from "./pages/AdminModeration";
import AdminReports from "./pages/AdminReports";
import AdminUsers from "./pages/AdminUsers";
import AdminSettings from "./pages/AdminSettings"; import AdminSettings from "./pages/AdminSettings";
const queryClient = new QueryClient(); const queryClient = new QueryClient();
@@ -74,10 +71,7 @@ function AppContent() {
<Route path="/profile" element={<Profile />} /> <Route path="/profile" element={<Profile />} />
<Route path="/profile/:username" element={<Profile />} /> <Route path="/profile/:username" element={<Profile />} />
<Route path="/settings" element={<UserSettings />} /> <Route path="/settings" element={<UserSettings />} />
<Route path="/admin" element={<AdminDashboard />} /> <Route path="/admin" element={<Admin />} />
<Route path="/admin/moderation" element={<AdminModeration />} />
<Route path="/admin/reports" element={<AdminReports />} />
<Route path="/admin/users" element={<AdminUsers />} />
<Route path="/admin/settings" element={<AdminSettings />} /> <Route path="/admin/settings" element={<AdminSettings />} />
<Route path="/terms" element={<Terms />} /> <Route path="/terms" element={<Terms />} />
<Route path="/privacy" element={<Privacy />} /> <Route path="/privacy" element={<Privacy />} />

20
src/components/admin/UserManagement.tsx
View File

@@ -4,7 +4,9 @@ import { ProfileManager } from '@/components/moderation/ProfileManager';
import { UserRoleManager } from '@/components/moderation/UserRoleManager'; import { UserRoleManager } from '@/components/moderation/UserRoleManager';
import { Users, Shield, UserCheck, UserX } from 'lucide-react'; import { Users, Shield, UserCheck, UserX } from 'lucide-react';
export function UserManagement() { export function UserManagement() {
return ( return <div className="space-y-6">
<Tabs defaultValue="profiles" className="space-y-4"> <Tabs defaultValue="profiles" className="space-y-4">
<TabsList className="grid w-full grid-cols-2"> <TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="profiles" className="flex items-center gap-2"> <TabsTrigger value="profiles" className="flex items-center gap-2">
@@ -17,13 +19,23 @@ export function UserManagement() {
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
<TabsContent value="profiles" className="mt-4"> <TabsContent value="profiles">
<Card>
<CardContent>
<ProfileManager /> <ProfileManager />
</CardContent>
</Card>
</TabsContent> </TabsContent>
<TabsContent value="roles" className="mt-4"> <TabsContent value="roles">
<Card>
<CardContent>
<UserRoleManager /> <UserRoleManager />
</CardContent>
</Card>
</TabsContent> </TabsContent>
</Tabs> </Tabs>
); </div>;
} }

23
src/components/layout/AdminHeader.tsx
View File

@@ -27,24 +27,27 @@ export function AdminHeader({ onRefresh }: { onRefresh?: () => void }) {
const pageTitle = isSettingsPage ? 'Admin Settings' : 'Admin Dashboard'; const pageTitle = isSettingsPage ? 'Admin Settings' : 'Admin Dashboard';
return ( return (
<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"> <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-14 items-center justify-between px-4 max-w-7xl"> <div className="container flex h-16 items-center justify-between px-4">
{/* Left Section - Navigation */} {/* Left Section - Navigation */}
<div className="flex items-center gap-3"> <div className="flex items-center gap-4">
<Button variant="ghost" size="sm" asChild> <Button variant="ghost" size="sm" asChild>
<Link to={backLink} className="flex items-center gap-2"> <Link to={backLink} className="flex items-center gap-2">
<ArrowLeft className="w-4 h-4" /> <ArrowLeft className="w-4 h-4" />
<span className="hidden sm:inline text-sm">{backText}</span> <span className="hidden sm:inline">{backText}</span>
</Link> </Link>
</Button> </Button>
<div className="h-4 w-px bg-border/50 hidden sm:block" /> <div className="h-6 w-px bg-border hidden sm:block" />
<h1 className="text-base font-semibold"> <div className="flex items-center gap-2">
<Shield className="w-6 h-6 text-primary" />
<h1 className="text-lg font-semibold">
<span className="sm:hidden">Admin</span> <span className="sm:hidden">Admin</span>
<span className="hidden sm:inline">{pageTitle}</span> <span className="hidden sm:inline">{pageTitle}</span>
</h1> </h1>
</div> </div>
</div>
{/* Right Section - Admin actions */} {/* Right Section - Admin actions */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -91,16 +94,16 @@ export function AdminHeader({ onRefresh }: { onRefresh?: () => void }) {
size="sm" size="sm"
onClick={onRefresh} onClick={onRefresh}
title="Refresh admin data" title="Refresh admin data"
className="hidden md:flex gap-2" className="hidden md:flex"
> >
<RefreshCw className="w-4 h-4" /> <RefreshCw className="w-4 h-4" />
<span className="text-sm">Refresh</span> <span className="hidden sm:ml-2 sm:inline">Refresh</span>
</Button> </Button>
{permissions?.role_level === 'superuser' && !isSettingsPage && ( {permissions?.role_level === 'superuser' && !isSettingsPage && (
<Button variant="ghost" size="sm" asChild className="hidden md:flex gap-2"> <Button variant="ghost" size="sm" asChild className="hidden md:flex">
<Link to="/admin/settings"> <Link to="/admin/settings">
<Settings className="w-4 h-4" /> <Settings className="w-4 h-4" />
<span className="text-sm">Settings</span> <span className="hidden sm:ml-2 sm:inline">Settings</span>
</Link> </Link>
</Button> </Button>
)} )}

62
src/components/layout/AdminLayout.tsx
View File

@@ -1,62 +0,0 @@
import { ReactNode, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { SidebarProvider } from '@/components/ui/sidebar';
import { AdminSidebar } from './AdminSidebar';
import { AdminTopBar } from './AdminTopBar';
import { useAuth } from '@/hooks/useAuth';
import { useUserRole } from '@/hooks/useUserRole';
interface AdminLayoutProps {
children: ReactNode;
onRefresh?: () => void;
isRefreshing?: boolean;
}
export function AdminLayout({ children, onRefresh, isRefreshing }: AdminLayoutProps) {
const { user, loading: authLoading } = useAuth();
const { isModerator, loading: roleLoading } = useUserRole();
const navigate = useNavigate();
useEffect(() => {
if (!authLoading && !roleLoading) {
if (!user) {
navigate('/auth');
return;
}
if (!isModerator()) {
navigate('/');
return;
}
}
}, [user, authLoading, roleLoading, navigate, isModerator]);
if (authLoading || roleLoading) {
return (
<div className="flex items-center justify-center min-h-screen">
<div className="text-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
<p className="text-muted-foreground">Loading admin panel...</p>
</div>
</div>
);
}
if (!user || !isModerator()) {
return null;
}
return (
<SidebarProvider defaultOpen={true}>
<div className="flex min-h-screen w-full">
<AdminSidebar />
<main className="flex-1 flex flex-col">
<AdminTopBar onRefresh={onRefresh} isRefreshing={isRefreshing} />
<div className="flex-1 overflow-auto">
{children}
</div>
</main>
</div>
</SidebarProvider>
);
}

148
src/components/layout/AdminSidebar.tsx
View File

@@ -1,148 +0,0 @@
import { LayoutDashboard, FileText, Flag, Users, Settings, ArrowLeft } from 'lucide-react';
import { NavLink, useLocation } from 'react-router-dom';
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarFooter,
SidebarHeader,
useSidebar,
} from '@/components/ui/sidebar';
import { cn } from '@/lib/utils';
import { useUserRole } from '@/hooks/useUserRole';
const navigationItems = [
{
title: 'Dashboard',
url: '/admin',
icon: LayoutDashboard,
},
{
title: 'Moderation Queue',
url: '/admin/moderation',
icon: FileText,
},
{
title: 'Reports',
url: '/admin/reports',
icon: Flag,
},
{
title: 'User Management',
url: '/admin/users',
icon: Users,
},
];
export function AdminSidebar() {
const location = useLocation();
const { state } = useSidebar();
const { isSuperuser } = useUserRole();
const isCollapsed = state === 'collapsed';
const isActive = (path: string) => {
if (path === '/admin') {
return location.pathname === '/admin';
}
return location.pathname.startsWith(path);
};
return (
<Sidebar collapsible="icon" className="border-r">
<SidebarHeader className="border-b px-4 py-3">
<div className="flex items-center gap-2">
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
<span className="text-sm font-bold">TW</span>
</div>
{!isCollapsed && (
<div className="flex flex-col">
<span className="text-sm font-semibold">ThrillWiki</span>
<span className="text-xs text-muted-foreground">Admin Panel</span>
</div>
)}
</div>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Navigation</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{navigationItems.map((item) => (
<SidebarMenuItem key={item.url}>
<SidebarMenuButton
asChild
isActive={isActive(item.url)}
tooltip={isCollapsed ? item.title : undefined}
>
<NavLink
to={item.url}
end={item.url === '/admin'}
className={({ isActive }) =>
cn(
'flex items-center gap-3 rounded-md transition-colors',
isActive
? 'bg-primary/10 text-primary font-medium'
: 'hover:bg-muted/50'
)
}
>
<item.icon className="h-5 w-5" />
{!isCollapsed && <span>{item.title}</span>}
</NavLink>
</SidebarMenuButton>
</SidebarMenuItem>
))}
{isSuperuser() && (
<SidebarMenuItem>
<SidebarMenuButton
asChild
isActive={isActive('/admin/settings')}
tooltip={isCollapsed ? 'Settings' : undefined}
>
<NavLink
to="/admin/settings"
className={({ isActive }) =>
cn(
'flex items-center gap-3 rounded-md transition-colors',
isActive
? 'bg-primary/10 text-primary font-medium'
: 'hover:bg-muted/50'
)
}
>
<Settings className="h-5 w-5" />
{!isCollapsed && <span>Settings</span>}
</NavLink>
</SidebarMenuButton>
</SidebarMenuItem>
)}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarFooter className="border-t p-2">
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton asChild tooltip={isCollapsed ? 'Back to ThrillWiki' : undefined}>
<NavLink
to="/"
className="flex items-center gap-3 text-muted-foreground hover:text-foreground transition-colors"
>
<ArrowLeft className="h-5 w-5" />
{!isCollapsed && <span>Back to ThrillWiki</span>}
</NavLink>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarFooter>
</Sidebar>
);
}

38
src/components/layout/AdminTopBar.tsx
View File

@@ -1,38 +0,0 @@
import { RefreshCw } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { SidebarTrigger } from '@/components/ui/sidebar';
import { ThemeToggle } from '@/components/theme/ThemeToggle';
import { NotificationCenter } from '@/components/notifications/NotificationCenter';
import { AuthButtons } from '@/components/auth/AuthButtons';
interface AdminTopBarProps {
onRefresh?: () => void;
isRefreshing?: boolean;
}
export function AdminTopBar({ onRefresh, isRefreshing }: AdminTopBarProps) {
return (
<header className="sticky top-0 z-10 flex h-14 items-center gap-4 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-4">
<SidebarTrigger className="-ml-1" />
{onRefresh && (
<Button
variant="ghost"
size="sm"
onClick={onRefresh}
disabled={isRefreshing}
className="gap-2"
>
<RefreshCw className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`} />
<span className="hidden sm:inline">Refresh</span>
</Button>
)}
<div className="ml-auto flex items-center gap-2">
<NotificationCenter />
<ThemeToggle />
<AuthButtons />
</div>
</header>
);
}

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

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

51
src/components/moderation/ReportsQueue.tsx
View File

@@ -212,44 +212,47 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
} }
return ( return (
<div className="space-y-4"> <div className="space-y-6">
{reports.map((report) => ( {reports.map((report) => (
<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"> <Card key={report.id} className="border-l-4 border-l-red-500">
<CardHeader className="pb-3 pt-4"> <CardHeader className="pb-4">
<div className="flex items-start justify-between gap-4"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2 flex-wrap"> <div className="flex items-center gap-3">
<Badge variant="destructive" className="text-xs"> <Badge variant="destructive">
<Flag className="w-3 h-3 mr-1" /> <Flag className="w-3 h-3 mr-1" />
{REPORT_TYPE_LABELS[report.report_type as keyof typeof REPORT_TYPE_LABELS]} {REPORT_TYPE_LABELS[report.report_type as keyof typeof REPORT_TYPE_LABELS]}
</Badge> </Badge>
<Badge variant="outline" className="text-xs"> <Badge variant="outline">
{report.reported_entity_type} {report.reported_entity_type}
</Badge> </Badge>
</div> </div>
<div className="flex items-center gap-1.5 text-xs text-muted-foreground whitespace-nowrap"> <div className="flex items-center gap-2 text-sm text-muted-foreground">
<Calendar className="w-3 h-3" /> <Calendar className="w-4 h-4" />
{format(new Date(report.created_at), 'MMM d, HH:mm')} {format(new Date(report.created_at), 'MMM d, yyyy HH:mm')}
</div> </div>
</div> </div>
{report.reporter_profile && ( {report.reporter_profile && (
<div className="flex items-center gap-2 text-xs text-muted-foreground mt-2"> <div className="flex items-center gap-2 text-sm">
<User className="w-3 h-3" /> <User className="w-4 h-4 text-muted-foreground" />
<span className="font-medium text-foreground"> <span>Reported by:</span>
<span className="font-medium">
{report.reporter_profile.display_name || report.reporter_profile.username} {report.reporter_profile.display_name || report.reporter_profile.username}
</span> </span>
{report.reporter_profile.display_name && ( {report.reporter_profile.display_name && (
<span>@{report.reporter_profile.username}</span> <span className="text-muted-foreground">
@{report.reporter_profile.username}
</span>
)} )}
</div> </div>
)} )}
</CardHeader> </CardHeader>
<CardContent className="space-y-3 pt-0"> <CardContent className="space-y-4">
{report.reason && ( {report.reason && (
<div> <div>
<Label className="text-xs text-muted-foreground">Reason</Label> <Label>Report Reason:</Label>
<p className="text-sm bg-muted/30 p-2.5 rounded-lg mt-1"> <p className="text-sm bg-muted/50 p-3 rounded-lg mt-1">
{report.reason} {report.reason}
</p> </p>
</div> </div>
@@ -257,17 +260,17 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
{report.reported_content && ( {report.reported_content && (
<div> <div>
<Label className="text-xs text-muted-foreground">Reported Content</Label> <Label>Reported Content:</Label>
<div className="bg-muted/30 border border-border/50 p-3 rounded-lg mt-1"> <div className="bg-destructive/5 border border-destructive/20 p-4 rounded-lg mt-1">
{report.reported_entity_type === 'review' && ( {report.reported_entity_type === 'review' && (
<div> <div>
{report.reported_content.title && ( {report.reported_content.title && (
<h4 className="font-medium text-sm mb-1.5">{report.reported_content.title}</h4> <h4 className="font-semibold mb-2">{report.reported_content.title}</h4>
)} )}
{report.reported_content.content && ( {report.reported_content.content && (
<p className="text-sm text-muted-foreground mb-2">{report.reported_content.content}</p> <p className="text-sm mb-2">{report.reported_content.content}</p>
)} )}
<div className="text-xs text-muted-foreground"> <div className="text-sm text-muted-foreground">
Rating: {report.reported_content.rating}/5 Rating: {report.reported_content.rating}/5
</div> </div>
</div> </div>
@@ -276,11 +279,10 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
</div> </div>
)} )}
<div className="flex gap-2 pt-1"> <div className="flex gap-2 pt-2">
<Button <Button
onClick={() => handleReportAction(report.id, 'reviewed')} onClick={() => handleReportAction(report.id, 'reviewed')}
disabled={actionLoading === report.id} disabled={actionLoading === report.id}
size="sm"
className="flex-1" className="flex-1"
> >
<CheckCircle className="w-4 h-4 mr-2" /> <CheckCircle className="w-4 h-4 mr-2" />
@@ -288,7 +290,6 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
size="sm"
onClick={() => handleReportAction(report.id, 'dismissed')} onClick={() => handleReportAction(report.id, 'dismissed')}
disabled={actionLoading === report.id} disabled={actionLoading === report.id}
className="flex-1" className="flex-1"

66
src/components/moderation/UserRoleManager.tsx
View File

@@ -179,30 +179,28 @@ export function UserRoleManager() {
</div>; </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())); 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-4"> return <div className="space-y-6">
{/* Add new role */} {/* Add new role */}
<Card className="border-border/50"> <Card>
<CardHeader className="pb-3">
<CardTitle className="text-base">Grant Role</CardTitle> <CardContent className="space-y-4">
</CardHeader> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<CardContent className="space-y-3">
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div> <div>
<Label htmlFor="user-search" className="text-sm">Search Users</Label> <Label htmlFor="user-search">Search Users</Label>
<div className="relative"> <div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" /> <Search className="absolute left-3 top-3 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" /> <Input id="user-search" placeholder="Search by username or display name..." value={newUserSearch} onChange={e => setNewUserSearch(e.target.value)} className="pl-10" />
</div> </div>
{searchResults.length > 0 && <div className="mt-2 border border-border/50 rounded-lg bg-background max-h-[200px] overflow-y-auto"> {searchResults.length > 0 && <div className="mt-2 border rounded-lg bg-background">
{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={() => { {searchResults.map(profile => <div key={profile.user_id} className="p-3 hover:bg-muted/50 cursor-pointer border-b last:border-b-0" onClick={() => {
setNewUserSearch(profile.display_name || profile.username); setNewUserSearch(profile.display_name || profile.username);
setSearchResults([profile]); setSearchResults([profile]);
}}> }}>
<div className="font-medium"> <div className="font-medium">
{profile.display_name || profile.username} {profile.display_name || profile.username}
</div> </div>
{profile.display_name && <div className="text-xs text-muted-foreground"> {profile.display_name && <div className="text-sm text-muted-foreground">
@{profile.username} @{profile.username}
</div>} </div>}
</div>)} </div>)}
@@ -210,10 +208,10 @@ export function UserRoleManager() {
</div> </div>
<div> <div>
<Label htmlFor="role-select" className="text-sm">Role</Label> <Label htmlFor="role-select">Role</Label>
<Select value={newRole} onValueChange={setNewRole}> <Select value={newRole} onValueChange={setNewRole}>
<SelectTrigger className="h-9 mt-1"> <SelectTrigger>
<SelectValue placeholder="Select role" /> <SelectValue placeholder="Select a role" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="moderator">Moderator</SelectItem> <SelectItem value="moderator">Moderator</SelectItem>
@@ -228,7 +226,7 @@ export function UserRoleManager() {
if (selectedUser && newRole) { if (selectedUser && newRole) {
grantRole(selectedUser.user_id, newRole as 'admin' | 'moderator' | 'user'); grantRole(selectedUser.user_id, newRole as 'admin' | 'moderator' | 'user');
} }
}} disabled={!newRole || !searchResults.find(p => (p.display_name || p.username) === newUserSearch) || actionLoading === 'grant'} size="sm" className="w-full md:w-auto"> }} disabled={!newRole || !searchResults.find(p => (p.display_name || p.username) === newUserSearch) || actionLoading === 'grant'} className="w-full md:w-auto">
{actionLoading === 'grant' ? 'Granting...' : 'Grant Role'} {actionLoading === 'grant' ? 'Granting...' : 'Grant Role'}
</Button> </Button>
</CardContent> </CardContent>
@@ -236,39 +234,39 @@ export function UserRoleManager() {
{/* Search existing roles */} {/* Search existing roles */}
<div> <div>
<Label htmlFor="role-search" className="text-sm">Search Existing Roles</Label> <Label htmlFor="role-search">Search Existing Roles</Label>
<div className="relative"> <div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" /> <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 h-9 mt-1" /> <Input id="role-search" placeholder="Search users with roles..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="pl-10" />
</div> </div>
</div> </div>
{/* User roles list */} {/* User roles list */}
<div className="space-y-2"> <div className="space-y-3">
{filteredRoles.length === 0 ? <div className="text-center py-12"> {filteredRoles.length === 0 ? <div className="text-center py-8">
<Shield className="w-12 h-12 text-muted-foreground mx-auto mb-3" /> <Shield className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
<h3 className="text-base font-semibold mb-1">No roles found</h3> <h3 className="text-lg font-semibold mb-2">No roles found</h3>
<p className="text-sm text-muted-foreground"> <p className="text-muted-foreground">
{searchTerm ? 'No users match your search.' : 'No user roles granted yet.'} {searchTerm ? 'No users match your search criteria.' : 'No user roles have been granted yet.'}
</p> </p>
</div> : filteredRoles.map(userRole => <Card key={userRole.id} className="border-border/50"> </div> : filteredRoles.map(userRole => <Card key={userRole.id}>
<CardContent className="flex items-center justify-between p-3"> <CardContent className="flex items-center justify-between p-4">
<div className="flex items-center gap-3 min-w-0 flex-1"> <div className="flex items-center gap-3">
<div className="min-w-0"> <div>
<div className="font-medium text-sm truncate"> <div className="font-medium">
{userRole.profiles?.display_name || userRole.profiles?.username} {userRole.profiles?.display_name || userRole.profiles?.username}
</div> </div>
{userRole.profiles?.display_name && <div className="text-xs text-muted-foreground"> {userRole.profiles?.display_name && <div className="text-sm text-muted-foreground">
@{userRole.profiles.username} @{userRole.profiles.username}
</div>} </div>}
</div> </div>
<Badge variant={userRole.role === 'admin' ? 'default' : 'secondary'} className="text-xs h-5"> <Badge variant={userRole.role === 'admin' ? 'default' : 'secondary'}>
{userRole.role} {userRole.role}
</Badge> </Badge>
</div> </div>
{/* Only show revoke button if current user can manage this role */} {/* 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} className="h-8 w-8 p-0 flex-shrink-0"> {(isSuperuser() || isAdmin() && !['admin', 'superuser'].includes(userRole.role)) && <Button variant="outline" size="sm" onClick={() => revokeRole(userRole.id)} disabled={actionLoading === userRole.id}>
<X className="w-4 h-4" /> <X className="w-4 h-4" />
</Button>} </Button>}
</CardContent> </CardContent>

121
src/pages/Admin.tsx
View File

@@ -79,88 +79,75 @@ export default function Admin() {
return ( return (
<> <>
<AdminHeader onRefresh={handleRefresh} /> <AdminHeader onRefresh={handleRefresh} />
<div className="container mx-auto px-4 py-8 max-w-7xl"> <div className="container mx-auto px-4 py-8">
{/* Refresh status indicator - subtle */} <div className="space-y-4 mb-8">
<div className="flex items-center gap-2 text-xs text-muted-foreground mb-6"> {/* Refresh status indicator */}
<RefreshCw className="w-3 h-3" /> <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" />
{refreshMode === 'auto' ? ( {refreshMode === 'auto' ? (
<span>Auto-refresh: every {pollInterval / 1000}s</span> <span>Auto-refresh: every {pollInterval / 1000}s</span>
) : ( ) : (
<span>Manual refresh</span> <span>Manual refresh only</span>
)} )}
{lastUpdated && ( {lastUpdated && (
<span>• {lastUpdated.toLocaleTimeString()}</span> <span className="text-xs">
• Last updated: {lastUpdated.toLocaleTimeString()}
</span>
)} )}
</div> </div>
</div>
{/* Stats cards - horizontal layout */} {/* Stats cards */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-12"> <div className="grid grid-cols-3 gap-3 md:gap-6">
<Card className="border-border/50 hover:border-border/80 transition-colors"> <Card>
<CardContent className="p-4"> <CardHeader className="flex flex-col items-center justify-center space-y-0 pb-2 text-center">
<div className="flex items-center justify-between"> <FileText className="h-4 w-4 text-muted-foreground mb-2" />
<div className="flex items-center gap-3"> <CardTitle className="text-sm font-medium">Pending Submissions</CardTitle>
<div className="p-2 rounded-lg bg-amber-500/10"> </CardHeader>
<FileText className="h-5 w-5 text-amber-700 dark:text-amber-300" /> <CardContent className="text-center">
</div> <div className="text-2xl font-bold">
<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} {stats.pendingSubmissions}
</div> </div>
</div>
</CardContent> </CardContent>
</Card> </Card>
<Card className="border-border/50 hover:border-border/80 transition-colors"> <Card>
<CardContent className="p-4"> <CardHeader className="flex flex-col items-center justify-center space-y-0 pb-2 text-center">
<div className="flex items-center justify-between"> <Flag className="h-4 w-4 text-muted-foreground mb-2" />
<div className="flex items-center gap-3"> <CardTitle className="text-sm font-medium">Open Reports</CardTitle>
<div className="p-2 rounded-lg bg-red-500/10"> </CardHeader>
<Flag className="h-5 w-5 text-red-700 dark:text-red-300" /> <CardContent className="text-center">
</div> <div className="text-2xl font-bold">
<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} {stats.openReports}
</div> </div>
</div>
</CardContent> </CardContent>
</Card> </Card>
<Card className="border-border/50 hover:border-border/80 transition-colors"> <Card>
<CardContent className="p-4"> <CardHeader className="flex flex-col items-center justify-center space-y-0 pb-2 text-center">
<div className="flex items-center justify-between"> <AlertCircle className="h-4 w-4 text-muted-foreground mb-2" />
<div className="flex items-center gap-3"> <CardTitle className="text-sm font-medium">Flagged Content</CardTitle>
<div className="p-2 rounded-lg bg-orange-500/10"> </CardHeader>
<AlertCircle className="h-5 w-5 text-orange-700 dark:text-orange-300" /> <CardContent className="text-center">
</div> <div className="text-2xl font-bold">
<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} {stats.flaggedContent}
</div> </div>
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
</div>
{/* Content Moderation Section - flatter design */} {/* Content Moderation Section */}
<div className="space-y-8"> <Card className="mb-8">
<div> <CardHeader>
<h2 className="text-lg font-semibold mb-4 flex items-center gap-2"> <CardTitle className="flex items-center gap-2">
<Shield className="w-5 h-5" /> <Shield className="w-5 h-5" />
Moderation Queue Moderation Queue
</h2> </CardTitle>
<Tabs defaultValue="queue" className="space-y-4"> </CardHeader>
<CardContent>
<Tabs defaultValue="queue" className="space-y-6">
<TabsList className="grid w-full grid-cols-2"> <TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="queue" className="flex items-center gap-2"> <TabsTrigger value="queue" className="flex items-center gap-2">
<FileText className="w-4 h-4" /> <FileText className="w-4 h-4" />
@@ -172,25 +159,29 @@ export default function Admin() {
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
<TabsContent value="queue" className="mt-4"> <TabsContent value="queue">
<ModerationQueue ref={moderationQueueRef} /> <ModerationQueue ref={moderationQueueRef} />
</TabsContent> </TabsContent>
<TabsContent value="reports" className="mt-4"> <TabsContent value="reports">
<ReportsQueue ref={reportsQueueRef} /> <ReportsQueue ref={reportsQueueRef} />
</TabsContent> </TabsContent>
</Tabs> </Tabs>
</div> </CardContent>
</Card>
{/* User Management Section - flatter design */} {/* User Management Section */}
<div> <Card className="mb-8">
<h2 className="text-lg font-semibold mb-4 flex items-center gap-2"> <CardHeader>
<CardTitle className="flex items-center gap-2">
<Users className="w-5 h-5" /> <Users className="w-5 h-5" />
User Management User Management
</h2> </CardTitle>
</CardHeader>
<CardContent>
<UserManagement /> <UserManagement />
</div> </CardContent>
</div> </Card>
</div> </div>
</> </>
); );

116
src/pages/AdminDashboard.tsx
View File

@@ -1,116 +0,0 @@
import { useRef, useCallback } from 'react';
import { RefreshCw, FileText, Flag, AlertCircle } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { AdminLayout } from '@/components/layout/AdminLayout';
import { useModerationStats } from '@/hooks/useModerationStats';
import { useAdminSettings } from '@/hooks/useAdminSettings';
import { useAuth } from '@/hooks/useAuth';
import { useUserRole } from '@/hooks/useUserRole';
export default function AdminDashboard() {
const { user, loading: authLoading } = useAuth();
const { isModerator, loading: roleLoading } = useUserRole();
// Get admin settings for polling configuration
const {
getAdminPanelRefreshMode,
getAdminPanelPollInterval,
} = useAdminSettings();
const refreshMode = getAdminPanelRefreshMode();
const pollInterval = getAdminPanelPollInterval();
// Use stats hook with configurable polling
const { stats, refresh: refreshStats, lastUpdated } = useModerationStats({
enabled: !!user && !authLoading && !roleLoading && isModerator(),
pollingEnabled: refreshMode === 'auto',
pollingInterval: pollInterval,
});
const handleRefresh = useCallback(() => {
refreshStats();
}, [refreshStats]);
return (
<AdminLayout onRefresh={handleRefresh}>
<div className="container mx-auto px-6 py-8 max-w-7xl">
{/* Refresh status indicator */}
<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</span>
)}
{lastUpdated && (
<span>• {lastUpdated.toLocaleTimeString()}</span>
)}
</div>
{/* Stats Overview */}
<div>
<h1 className="text-2xl font-bold mb-6">Dashboard Overview</h1>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<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 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 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>
</div>
</AdminLayout>
);
}

22
src/pages/AdminModeration.tsx
View File

@@ -1,22 +0,0 @@
import { useRef, useCallback } from 'react';
import { AdminLayout } from '@/components/layout/AdminLayout';
import { ModerationQueue, ModerationQueueRef } from '@/components/moderation/ModerationQueue';
export default function AdminModeration() {
const moderationQueueRef = useRef<ModerationQueueRef>(null);
const handleRefresh = useCallback(() => {
moderationQueueRef.current?.refresh();
}, []);
return (
<AdminLayout onRefresh={handleRefresh}>
<div className="container mx-auto px-6 py-8 max-w-7xl">
<div>
<h1 className="text-2xl font-bold mb-6">Moderation Queue</h1>
<ModerationQueue ref={moderationQueueRef} />
</div>
</div>
</AdminLayout>
);
}

22
src/pages/AdminReports.tsx
View File

@@ -1,22 +0,0 @@
import { useRef, useCallback } from 'react';
import { AdminLayout } from '@/components/layout/AdminLayout';
import { ReportsQueue, ReportsQueueRef } from '@/components/moderation/ReportsQueue';
export default function AdminReports() {
const reportsQueueRef = useRef<ReportsQueueRef>(null);
const handleRefresh = useCallback(() => {
reportsQueueRef.current?.refresh();
}, []);
return (
<AdminLayout onRefresh={handleRefresh}>
<div className="container mx-auto px-6 py-8 max-w-7xl">
<div>
<h1 className="text-2xl font-bold mb-6">Reports Queue</h1>
<ReportsQueue ref={reportsQueueRef} />
</div>
</div>
</AdminLayout>
);
}

30
src/pages/AdminSettings.tsx
View File

@@ -7,7 +7,7 @@ import { Switch } from '@/components/ui/switch';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { AdminLayout } from '@/components/layout/AdminLayout'; import { AdminHeader } from '@/components/layout/AdminHeader';
import { useAuth } from '@/hooks/useAuth'; import { useAuth } from '@/hooks/useAuth';
import { useUserRole } from '@/hooks/useUserRole'; import { useUserRole } from '@/hooks/useUserRole';
import { useAdminSettings } from '@/hooks/useAdminSettings'; import { useAdminSettings } from '@/hooks/useAdminSettings';
@@ -28,18 +28,20 @@ export default function AdminSettings() {
if (roleLoading || isLoading) { if (roleLoading || isLoading) {
return ( return (
<AdminLayout> <>
<AdminHeader />
<div className="flex items-center justify-center min-h-screen"> <div className="flex items-center justify-center min-h-screen">
<Loader2 className="w-8 h-8 animate-spin" /> <Loader2 className="w-8 h-8 animate-spin" />
</div> </div>
</AdminLayout> </>
); );
} }
if (!user || !isSuperuser()) { if (!user || !isSuperuser()) {
return ( return (
<AdminLayout> <>
<div className="container mx-auto px-6 py-8"> <AdminHeader />
<div className="container mx-auto px-4 py-8">
<div className="text-center space-y-4"> <div className="text-center space-y-4">
<h1 className="text-2xl font-bold mb-4">Access Denied</h1> <h1 className="text-2xl font-bold mb-4">Access Denied</h1>
<p className="text-muted-foreground">You don't have permission to access admin settings.</p> <p className="text-muted-foreground">You don't have permission to access admin settings.</p>
@@ -50,14 +52,15 @@ export default function AdminSettings() {
)} )}
</div> </div>
</div> </div>
</AdminLayout> </>
); );
} }
if (!settings || settings.length === 0) { if (!settings || settings.length === 0) {
return ( return (
<AdminLayout> <>
<div className="container mx-auto px-6 py-8"> <AdminHeader />
<div className="container mx-auto px-4 py-8">
<div className="text-center space-y-4"> <div className="text-center space-y-4">
<h1 className="text-2xl font-bold mb-4">No Settings Found</h1> <h1 className="text-2xl font-bold mb-4">No Settings Found</h1>
<p className="text-muted-foreground"> <p className="text-muted-foreground">
@@ -70,7 +73,7 @@ export default function AdminSettings() {
)} )}
</div> </div>
</div> </div>
</AdminLayout> </>
); );
} }
@@ -428,10 +431,11 @@ export default function AdminSettings() {
}; };
return ( return (
<AdminLayout> <>
<div className="container mx-auto px-6 py-8 max-w-6xl"> <AdminHeader />
<div className="container mx-auto px-4 py-8 max-w-4xl">
<div className="mb-8"> <div className="mb-8">
<h1 className="text-2xl font-bold mb-2">Admin Settings</h1> <h1 className="text-3xl font-bold mb-2">Admin Settings</h1>
<p className="text-muted-foreground"> <p className="text-muted-foreground">
Configure system-wide settings and preferences with easy-to-use controls Configure system-wide settings and preferences with easy-to-use controls
</p> </p>
@@ -594,6 +598,6 @@ export default function AdminSettings() {
</TabsContent> </TabsContent>
</Tabs> </Tabs>
</div> </div>
</AdminLayout> </>
); );
} }

15
src/pages/AdminUsers.tsx
View File

@@ -1,15 +0,0 @@
import { AdminLayout } from '@/components/layout/AdminLayout';
import { UserManagement } from '@/components/admin/UserManagement';
export default function AdminUsers() {
return (
<AdminLayout>
<div className="container mx-auto px-6 py-8 max-w-7xl">
<div>
<h1 className="text-2xl font-bold mb-6">User Management</h1>
<UserManagement />
</div>
</div>
</AdminLayout>
);
}