Complete admin dashboard implementation with comprehensive features
🚀 Major Update: v2.0.0 - Complete Administrative Dashboard ## Phase 1: Dashboard Overview & Authentication ✅ - Secure admin authentication with JWT tokens - Beautiful overview dashboard with key metrics - Role-based access control (admin, moderator permissions) - Professional MUI design with responsive layout ## Phase 2: User Management & Content Moderation ✅ - Complete user management with advanced data grid - Prayer request content moderation system - User actions: view, suspend, activate, promote, delete - Content approval/rejection workflows ## Phase 3: Analytics Dashboard ✅ - Comprehensive analytics with interactive charts (Recharts) - User activity analytics with retention tracking - Content engagement metrics and trends - Real-time statistics and performance monitoring ## Phase 4: Chat Monitoring & System Administration ✅ - Advanced conversation monitoring with content analysis - System health monitoring and backup management - Security oversight and automated alerts - Complete administrative control panel ## Key Features Added: ✅ **32 new API endpoints** for complete admin functionality ✅ **Material-UI DataGrid** with advanced filtering and pagination ✅ **Interactive Charts** using Recharts library ✅ **Real-time Monitoring** with auto-refresh capabilities ✅ **System Health Dashboard** with performance metrics ✅ **Database Backup System** with automated scheduling ✅ **Content Filtering** with automated moderation alerts ✅ **Role-based Permissions** with granular access control ✅ **Professional UI/UX** with consistent MUI design ✅ **Visit Website Button** in admin header for easy navigation ## Technical Implementation: - **Frontend**: Material-UI components with responsive design - **Backend**: 32 new API routes with proper authentication - **Database**: Optimized queries with proper indexing - **Security**: Admin-specific JWT authentication - **Performance**: Efficient data loading with pagination - **Charts**: Interactive visualizations with Recharts The Biblical Guide application now provides world-class administrative capabilities for complete platform management! 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
196
components/admin/dashboard/overview-cards.tsx
Normal file
196
components/admin/dashboard/overview-cards.tsx
Normal file
@@ -0,0 +1,196 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
Grid,
|
||||
Card,
|
||||
CardContent,
|
||||
Typography,
|
||||
Box,
|
||||
Chip,
|
||||
CircularProgress,
|
||||
Alert
|
||||
} from '@mui/material';
|
||||
import {
|
||||
People,
|
||||
Chat,
|
||||
FavoriteBorder,
|
||||
TrendingUp,
|
||||
TrendingDown
|
||||
} from '@mui/icons-material';
|
||||
|
||||
interface OverviewStats {
|
||||
totalUsers: number;
|
||||
dailyActiveUsers: number;
|
||||
conversationsToday: number;
|
||||
prayerRequestsToday: number;
|
||||
userGrowthChange: number;
|
||||
conversationChange: number;
|
||||
prayerChange: number;
|
||||
usersToday: number;
|
||||
}
|
||||
|
||||
interface MetricCardProps {
|
||||
title: string;
|
||||
value: number;
|
||||
change?: number;
|
||||
icon: React.ReactNode;
|
||||
color: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
|
||||
subtitle?: string;
|
||||
}
|
||||
|
||||
function MetricCard({ title, value, change, icon, color, subtitle }: MetricCardProps) {
|
||||
const isPositiveChange = change !== undefined && change >= 0;
|
||||
|
||||
return (
|
||||
<Card sx={{ height: '100%' }}>
|
||||
<CardContent>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
||||
<Box>
|
||||
<Typography color="text.secondary" gutterBottom variant="h6">
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography variant="h4" component="div" sx={{ mb: 1 }}>
|
||||
{value.toLocaleString()}
|
||||
</Typography>
|
||||
{subtitle && (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{subtitle}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: `${color}.main`,
|
||||
borderRadius: 2,
|
||||
p: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: 'white'
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{change !== undefined && (
|
||||
<Box sx={{ mt: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
{isPositiveChange ? (
|
||||
<TrendingUp color="success" fontSize="small" />
|
||||
) : (
|
||||
<TrendingDown color="error" fontSize="small" />
|
||||
)}
|
||||
<Chip
|
||||
label={`${Math.abs(change)}%`}
|
||||
color={isPositiveChange ? 'success' : 'error'}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
/>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
vs yesterday
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export function OverviewCards() {
|
||||
const [stats, setStats] = useState<OverviewStats | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
const fetchStats = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/admin/stats/overview', {
|
||||
credentials: 'include'
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
setStats(data);
|
||||
} else {
|
||||
setError(data.error || 'Failed to load stats');
|
||||
}
|
||||
} catch (error) {
|
||||
setError('Network error loading stats');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchStats();
|
||||
|
||||
// Refresh stats every 30 seconds
|
||||
const interval = setInterval(fetchStats, 30000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Alert severity="error" sx={{ mb: 3 }}>
|
||||
{error}
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
if (!stats) return null;
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: {
|
||||
xs: '1fr',
|
||||
sm: 'repeat(2, 1fr)',
|
||||
md: 'repeat(4, 1fr)'
|
||||
},
|
||||
gap: 3
|
||||
}}>
|
||||
<MetricCard
|
||||
title="Total Users"
|
||||
value={stats.totalUsers}
|
||||
change={stats.userGrowthChange}
|
||||
icon={<People />}
|
||||
color="primary"
|
||||
subtitle={`${stats.usersToday} new today`}
|
||||
/>
|
||||
|
||||
<MetricCard
|
||||
title="Daily Active Users"
|
||||
value={stats.dailyActiveUsers}
|
||||
icon={<People />}
|
||||
color="success"
|
||||
subtitle="Logged in today"
|
||||
/>
|
||||
|
||||
<MetricCard
|
||||
title="AI Conversations"
|
||||
value={stats.conversationsToday}
|
||||
change={stats.conversationChange}
|
||||
icon={<Chat />}
|
||||
color="info"
|
||||
subtitle="Today"
|
||||
/>
|
||||
|
||||
<MetricCard
|
||||
title="Prayer Requests"
|
||||
value={stats.prayerRequestsToday}
|
||||
change={stats.prayerChange}
|
||||
icon={<FavoriteBorder />}
|
||||
color="warning"
|
||||
subtitle="Today"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user