128 lines
4.7 KiB
TypeScript
128 lines
4.7 KiB
TypeScript
import { useState } from 'react';
|
|
import { Header } from '@/components/Header';
|
|
import { Footer } from '@/components/Footer';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Shield, Users, BarChart3, FileText, ArrowLeft } from 'lucide-react';
|
|
import { AdminDashboard } from '@/components/admin/AdminDashboard';
|
|
import AnalyticsDashboard from '@/components/admin/AnalyticsDashboard';
|
|
import ScriptReviewDashboard from '@/components/admin/ScriptReviewDashboard';
|
|
import { CreateAdminForm } from '@/components/admin/CreateAdminForm';
|
|
import { AdminUsersList } from '@/components/admin/AdminUsersList';
|
|
import { useAuth } from '@/contexts/AuthContext';
|
|
|
|
type AdminView = 'dashboard' | 'create-user' | 'users' | 'scripts' | 'analytics';
|
|
|
|
export default function AdminPanel() {
|
|
const { user } = useAuth();
|
|
const [currentView, setCurrentView] = useState<AdminView>('dashboard');
|
|
|
|
// Check if user has admin access
|
|
if (!user?.isAdmin) {
|
|
return (
|
|
<div className="min-h-screen flex flex-col bg-gradient-to-br from-background via-background to-primary/5">
|
|
<Header onSearch={() => {}} />
|
|
|
|
<main className="flex-1 container mx-auto px-4 py-16">
|
|
<div className="max-w-2xl mx-auto text-center space-y-6">
|
|
<Shield className="h-16 w-16 text-muted-foreground mx-auto" />
|
|
<h1 className="text-4xl font-bold">Access Denied</h1>
|
|
<p className="text-xl text-muted-foreground">
|
|
You don't have permission to access the admin panel.
|
|
</p>
|
|
<Button onClick={() => window.history.back()}>
|
|
Go Back
|
|
</Button>
|
|
</div>
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const renderView = () => {
|
|
switch (currentView) {
|
|
case 'dashboard':
|
|
return (
|
|
<AdminDashboard
|
|
onCreateUser={() => setCurrentView('create-user')}
|
|
onViewScripts={() => setCurrentView('scripts')}
|
|
onViewAnalytics={() => setCurrentView('analytics')}
|
|
/>
|
|
);
|
|
case 'create-user':
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-4">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setCurrentView('dashboard')}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
Back to Dashboard
|
|
</Button>
|
|
</div>
|
|
<CreateAdminForm onSuccess={() => setCurrentView('users')} />
|
|
</div>
|
|
);
|
|
case 'users':
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setCurrentView('dashboard')}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
Back to Dashboard
|
|
</Button>
|
|
</div>
|
|
<Button onClick={() => setCurrentView('create-user')}>
|
|
<Users className="h-4 w-4 mr-2" />
|
|
Create Admin User
|
|
</Button>
|
|
</div>
|
|
<AdminUsersList />
|
|
</div>
|
|
);
|
|
case 'scripts':
|
|
return <ScriptReviewDashboard onBack={() => setCurrentView('dashboard')} />;
|
|
case 'analytics':
|
|
return <AnalyticsDashboard onBack={() => setCurrentView('dashboard')} />;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col bg-gradient-to-br from-background via-background to-primary/5">
|
|
<Header onSearch={() => {}} />
|
|
|
|
<main className="flex-1 container mx-auto px-4 py-16">
|
|
<div className="max-w-6xl mx-auto space-y-8">
|
|
<div className="text-center space-y-4">
|
|
<Shield className="h-16 w-16 text-primary mx-auto" />
|
|
<h1 className="text-4xl font-bold">Admin Panel</h1>
|
|
<p className="text-xl text-muted-foreground">
|
|
Manage the platform and moderate content.
|
|
</p>
|
|
{user.isSuperUser && (
|
|
<div className="inline-flex items-center gap-2 px-3 py-1 bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-200 rounded-full text-sm font-medium">
|
|
<Shield className="h-4 w-4" />
|
|
Super User Access
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{renderView()}
|
|
</div>
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|