231 lines
11 KiB
JavaScript
231 lines
11 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import api from '../../utils/api';
|
|
import { Card } from '../../components/ui/card';
|
|
import { Button } from '../../components/ui/button';
|
|
import { Badge } from '../../components/ui/badge';
|
|
import { Users, Calendar, Clock, CheckCircle, Mail, AlertCircle } from 'lucide-react';
|
|
|
|
const AdminDashboard = () => {
|
|
const [stats, setStats] = useState({
|
|
totalMembers: 0,
|
|
pendingValidations: 0,
|
|
activeMembers: 0
|
|
});
|
|
const [usersNeedingAttention, setUsersNeedingAttention] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
fetchDashboardStats();
|
|
}, []);
|
|
|
|
const fetchDashboardStats = async () => {
|
|
try {
|
|
const usersResponse = await api.get('/admin/users');
|
|
const users = usersResponse.data;
|
|
|
|
setStats({
|
|
totalMembers: users.filter(u => u.role === 'member').length,
|
|
pendingValidations: users.filter(u =>
|
|
['pending_email', 'pending_validation', 'pre_validated', 'payment_pending'].includes(u.status)
|
|
).length,
|
|
activeMembers: users.filter(u => u.status === 'active' && u.role === 'member').length
|
|
});
|
|
|
|
// Find users who have received 3+ reminders (may need personal outreach)
|
|
const needingAttention = users.filter(u => {
|
|
const emailReminders = u.email_verification_reminders_sent || 0;
|
|
const eventReminders = u.event_attendance_reminders_sent || 0;
|
|
const paymentReminders = u.payment_reminders_sent || 0;
|
|
const totalReminders = emailReminders + eventReminders + paymentReminders;
|
|
return totalReminders >= 3;
|
|
}).map(u => ({
|
|
...u,
|
|
totalReminders: (u.email_verification_reminders_sent || 0) +
|
|
(u.event_attendance_reminders_sent || 0) +
|
|
(u.payment_reminders_sent || 0)
|
|
})).sort((a, b) => b.totalReminders - a.totalReminders).slice(0, 5); // Top 5
|
|
|
|
setUsersNeedingAttention(needingAttention);
|
|
} catch (error) {
|
|
console.error('Failed to fetch stats:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="mb-8">
|
|
<h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Admin Dashboard
|
|
</h1>
|
|
<p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Manage users, events, and membership applications.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Stats Grid */}
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
|
|
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]" data-testid="stat-total-users">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="bg-[#DDD8EB]/20 p-3 rounded-lg">
|
|
<Users className="h-6 w-6 text-[#664fa3]" />
|
|
</div>
|
|
</div>
|
|
<p className="text-3xl font-semibold text-[#422268] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
{loading ? '-' : stats.totalMembers}
|
|
</p>
|
|
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
|
|
</Card>
|
|
|
|
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]" data-testid="stat-pending-validations">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="bg-orange-100 p-3 rounded-lg">
|
|
<Clock className="h-6 w-6 text-orange-600" />
|
|
</div>
|
|
</div>
|
|
<p className="text-3xl font-semibold text-[#422268] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
{loading ? '-' : stats.pendingValidations}
|
|
</p>
|
|
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validations</p>
|
|
</Card>
|
|
|
|
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]" data-testid="stat-active-members">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="bg-[#81B29A]/20 p-3 rounded-lg">
|
|
<CheckCircle className="h-6 w-6 text-[#81B29A]" />
|
|
</div>
|
|
</div>
|
|
<p className="text-3xl font-semibold text-[#422268] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
{loading ? '-' : stats.activeMembers}
|
|
</p>
|
|
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Members</p>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Quick Actions */}
|
|
<div className="grid md:grid-cols-2 gap-8">
|
|
<Link to="/admin/members">
|
|
<Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-users">
|
|
<Users className="h-12 w-12 text-[#664fa3] mb-4" />
|
|
<h3 className="text-xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Manage Members
|
|
</h3>
|
|
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
View and manage paying members and their subscription status.
|
|
</p>
|
|
<Button
|
|
className="mt-4 bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full"
|
|
data-testid="manage-users-button"
|
|
>
|
|
Go to Members
|
|
</Button>
|
|
</Card>
|
|
</Link>
|
|
|
|
<Link to="/admin/validations">
|
|
<Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-validations">
|
|
<Clock className="h-12 w-12 text-orange-600 mb-4" />
|
|
<h3 className="text-xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Validation Queue
|
|
</h3>
|
|
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Review and validate pending membership applications.
|
|
</p>
|
|
<Button
|
|
className="mt-4 bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full"
|
|
data-testid="manage-validations-button"
|
|
>
|
|
View Validations
|
|
</Button>
|
|
</Card>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Users Needing Attention Widget */}
|
|
{usersNeedingAttention.length > 0 && (
|
|
<div className="mt-12">
|
|
<Card className="p-8 bg-white rounded-2xl border-2 border-[#ff9e77] shadow-lg">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="bg-[#ff9e77]/20 p-3 rounded-lg">
|
|
<AlertCircle className="h-6 w-6 text-[#ff9e77]" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Members Needing Personal Outreach
|
|
</h3>
|
|
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
These members have received multiple reminder emails. Consider calling them directly.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{usersNeedingAttention.map(user => (
|
|
<Link key={user.id} to={`/admin/users/${user.id}`}>
|
|
<div className="p-4 bg-[#F8F7FB] rounded-xl border border-[#ddd8eb] hover:border-[#ff9e77] hover:shadow-md transition-all cursor-pointer">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<h4 className="font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
{user.first_name} {user.last_name}
|
|
</h4>
|
|
<Badge className="bg-[#ff9e77] text-white px-3 py-1 rounded-full text-xs">
|
|
{user.totalReminders} reminder{user.totalReminders !== 1 ? 's' : ''}
|
|
</Badge>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
<p>Email: {user.email}</p>
|
|
<p>Phone: {user.phone || 'N/A'}</p>
|
|
<p className="capitalize">Status: {user.status.replace('_', ' ')}</p>
|
|
{user.email_verification_reminders_sent > 0 && (
|
|
<p>
|
|
<Mail className="inline h-3 w-3 mr-1" />
|
|
{user.email_verification_reminders_sent} email verification reminder{user.email_verification_reminders_sent !== 1 ? 's' : ''}
|
|
</p>
|
|
)}
|
|
{user.event_attendance_reminders_sent > 0 && (
|
|
<p>
|
|
<Calendar className="inline h-3 w-3 mr-1" />
|
|
{user.event_attendance_reminders_sent} event reminder{user.event_attendance_reminders_sent !== 1 ? 's' : ''}
|
|
</p>
|
|
)}
|
|
{user.payment_reminders_sent > 0 && (
|
|
<p>
|
|
<Clock className="inline h-3 w-3 mr-1" />
|
|
{user.payment_reminders_sent} payment reminder{user.payment_reminders_sent !== 1 ? 's' : ''}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full text-sm"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
window.location.href = `tel:${user.phone}`;
|
|
}}
|
|
>
|
|
Call Member
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-6 p-4 bg-[#DDD8EB]/20 rounded-lg border border-[#ddd8eb]">
|
|
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
<strong>💡 Tip for helping older members:</strong> Many of our members are older ladies who may struggle with email.
|
|
A friendly phone call can help them complete the registration process and feel more welcomed to the community.
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AdminDashboard;
|