mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-23 08:31:12 -05:00
feat: Implement admin panel redesign plan
This commit is contained in:
gpt-engineer-app[bot]
44
src/components/layout/AdminLayout.tsx
Normal file
44
src/components/layout/AdminLayout.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import { ReactNode } from 'react';
|
||||
import { SidebarProvider } from '@/components/ui/sidebar';
|
||||
import { AdminSidebar } from './AdminSidebar';
|
||||
import { AdminTopBar } from './AdminTopBar';
|
||||
|
||||
interface AdminLayoutProps {
|
||||
children: ReactNode;
|
||||
onRefresh?: () => void;
|
||||
refreshMode?: 'auto' | 'manual';
|
||||
pollInterval?: number;
|
||||
lastUpdated?: Date;
|
||||
isRefreshing?: boolean;
|
||||
}
|
||||
|
||||
export function AdminLayout({
|
||||
children,
|
||||
onRefresh,
|
||||
refreshMode,
|
||||
pollInterval,
|
||||
lastUpdated,
|
||||
isRefreshing
|
||||
}: AdminLayoutProps) {
|
||||
return (
|
||||
<SidebarProvider defaultOpen={true}>
|
||||
<div className="flex min-h-screen w-full">
|
||||
<AdminSidebar />
|
||||
<main className="flex-1 flex flex-col overflow-hidden">
|
||||
<AdminTopBar
|
||||
onRefresh={onRefresh}
|
||||
refreshMode={refreshMode}
|
||||
pollInterval={pollInterval}
|
||||
lastUpdated={lastUpdated}
|
||||
isRefreshing={isRefreshing}
|
||||
/>
|
||||
<div className="flex-1 overflow-auto bg-muted/30">
|
||||
<div className="container mx-auto px-6 py-8 max-w-7xl">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</SidebarProvider>
|
||||
);
|
||||
}
|
||||
115
src/components/layout/AdminSidebar.tsx
Normal file
115
src/components/layout/AdminSidebar.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
import { LayoutDashboard, FileText, Flag, Users, Settings, ArrowLeft } from 'lucide-react';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { useUserRole } from '@/hooks/useUserRole';
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
useSidebar,
|
||||
} from '@/components/ui/sidebar';
|
||||
|
||||
export function AdminSidebar() {
|
||||
const { state } = useSidebar();
|
||||
const { permissions } = useUserRole();
|
||||
const isSuperuser = permissions?.role_level === 'superuser';
|
||||
const collapsed = state === 'collapsed';
|
||||
|
||||
const navItems = [
|
||||
{
|
||||
title: 'Dashboard',
|
||||
url: '/admin',
|
||||
icon: LayoutDashboard,
|
||||
},
|
||||
{
|
||||
title: 'Moderation',
|
||||
url: '/admin/moderation',
|
||||
icon: FileText,
|
||||
},
|
||||
{
|
||||
title: 'Reports',
|
||||
url: '/admin/reports',
|
||||
icon: Flag,
|
||||
},
|
||||
{
|
||||
title: 'Users',
|
||||
url: '/admin/users',
|
||||
icon: Users,
|
||||
},
|
||||
...(isSuperuser ? [{
|
||||
title: 'Settings',
|
||||
url: '/admin/settings',
|
||||
icon: Settings,
|
||||
}] : []),
|
||||
];
|
||||
|
||||
return (
|
||||
<Sidebar collapsible="icon">
|
||||
<SidebarHeader className="border-b border-border/40 px-4 py-4">
|
||||
{!collapsed && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<span className="text-lg">🎢</span>
|
||||
</div>
|
||||
<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>
|
||||
)}
|
||||
{collapsed && (
|
||||
<div className="flex items-center justify-center">
|
||||
<span className="text-lg">🎢</span>
|
||||
</div>
|
||||
)}
|
||||
</SidebarHeader>
|
||||
|
||||
<SidebarContent>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>Navigation</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{navItems.map((item) => (
|
||||
<SidebarMenuItem key={item.url}>
|
||||
<SidebarMenuButton asChild tooltip={collapsed ? item.title : undefined}>
|
||||
<NavLink
|
||||
to={item.url}
|
||||
end={item.url === '/admin'}
|
||||
className={({ isActive }) =>
|
||||
isActive
|
||||
? 'bg-accent text-accent-foreground font-medium'
|
||||
: 'hover:bg-accent/50'
|
||||
}
|
||||
>
|
||||
<item.icon className="w-4 h-4" />
|
||||
{!collapsed && <span>{item.title}</span>}
|
||||
</NavLink>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
|
||||
<SidebarFooter className="border-t border-border/40">
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton asChild tooltip={collapsed ? 'Back to ThrillWiki' : undefined}>
|
||||
<NavLink to="/" className="hover:bg-accent/50">
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
{!collapsed && <span>Back to ThrillWiki</span>}
|
||||
</NavLink>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarFooter>
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
71
src/components/layout/AdminTopBar.tsx
Normal file
71
src/components/layout/AdminTopBar.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import { RefreshCw } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ThemeToggle } from '@/components/theme/ThemeToggle';
|
||||
import { AuthButtons } from '@/components/auth/AuthButtons';
|
||||
import { NotificationCenter } from '@/components/notifications/NotificationCenter';
|
||||
import { SidebarTrigger } from '@/components/ui/sidebar';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
|
||||
interface AdminTopBarProps {
|
||||
onRefresh?: () => void;
|
||||
refreshMode?: 'auto' | 'manual';
|
||||
pollInterval?: number;
|
||||
lastUpdated?: Date;
|
||||
isRefreshing?: boolean;
|
||||
}
|
||||
|
||||
export function AdminTopBar({
|
||||
onRefresh,
|
||||
refreshMode,
|
||||
pollInterval,
|
||||
lastUpdated,
|
||||
isRefreshing
|
||||
}: AdminTopBarProps) {
|
||||
const { user } = useAuth();
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-40 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div className="flex h-14 items-center justify-between px-4 gap-4">
|
||||
{/* Left Section */}
|
||||
<div className="flex items-center gap-3">
|
||||
<SidebarTrigger className="-ml-1" />
|
||||
|
||||
{refreshMode && (
|
||||
<div className="hidden sm:flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<RefreshCw className="w-3 h-3" />
|
||||
{refreshMode === 'auto' ? (
|
||||
<span>Auto: {pollInterval ? pollInterval / 1000 : 30}s</span>
|
||||
) : (
|
||||
<span>Manual</span>
|
||||
)}
|
||||
{lastUpdated && (
|
||||
<span className="hidden md:inline">
|
||||
• {lastUpdated.toLocaleTimeString()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right Section */}
|
||||
<div className="flex items-center gap-2">
|
||||
{onRefresh && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onRefresh}
|
||||
disabled={isRefreshing}
|
||||
title="Refresh data"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`} />
|
||||
<span className="hidden sm:ml-2 sm:inline">Refresh</span>
|
||||
</Button>
|
||||
)}
|
||||
<ThemeToggle />
|
||||
{user && <NotificationCenter />}
|
||||
<AuthButtons />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user