RBAC, Permissions, and Export/Import

src/pages/admin/AdminDashboard.js

@@ -4,14 +4,15 @@ 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 } from 'lucide-react';
+import { Users, Calendar, Clock, CheckCircle, Mail, AlertCircle } from 'lucide-react';
 
 const AdminDashboard = () => {
   const [stats, setStats] = useState({
     totalMembers: 0,
-    pendingApprovals: 0,
+    pendingValidations: 0,
     activeMembers: 0
   });
+  const [usersNeedingAttention, setUsersNeedingAttention] = useState([]);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -25,11 +26,27 @@ const AdminDashboard = () => {
 
       setStats({
         totalMembers: users.filter(u => u.role === 'member').length,
-        pendingApprovals: users.filter(u =>
-          ['pending_email', 'pending_approval', 'pre_approved', 'payment_pending'].includes(u.status)
+        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 {
@@ -62,16 +79,16 @@ const AdminDashboard = () => {
             <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-approvals">
+          <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.pendingApprovals}
+              {loading ? '-' : stats.pendingValidations}
             </p>
-            <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Approvals</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">
@@ -89,42 +106,123 @@ const AdminDashboard = () => {
 
         {/* Quick Actions */}
         <div className="grid md:grid-cols-2 gap-8">
-          <Link to="/admin/users">
+          <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 Users
+                Manage Members
               </h3>
               <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                View and manage all registered users and their membership status.
+                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 Users
+                Go to Members
               </Button>
             </Card>
           </Link>
 
-          <Link to="/admin/approvals">
-            <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-approvals">
+          <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" }}>
-                Approval Queue
+                Validation Queue
               </h3>
               <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                Review and approve pending membership applications.
+                Review and validate pending membership applications.
               </p>
               <Button
                 className="mt-4 bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full"
-                data-testid="manage-approvals-button"
+                data-testid="manage-validations-button"
               >
-                View Approvals
+                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>
+        )}
     </>
   );
 };