Sindbad~EG File Manager

Current Path : /home/copmadinaarea/thecopmadinaarea.org/conference/admin/
Upload File :
Current File : /home/copmadinaarea/thecopmadinaarea.org/conference/admin/members.php

<?php
require_once '../includes/functions.php';

// Check if user is logged in and has admin privileges
if (!isLoggedIn()) {
    header('Location: ' . BASE_URL . 'login.php');
    exit();
}

$user = getCurrentUser();
if (!in_array($user['role'], ['superuser', 'area_admin', 'district_admin', 'assembly_admin'])) {
    header('Location: ' . BASE_URL . 'dashboard.php');
    exit();
}

$db = new CopMadinaDB();
$conn = $db->getConnection();

// Handle form submissions
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $action = $_POST['action'] ?? '';
    
    if ($action === 'update_status') {
        $id = $_POST['id'];
        $status = $_POST['status'];
        
        $stmt = executeQuery("UPDATE members SET membership_status = ? WHERE id = ?", [$status, $id]);
        
        if ($stmt) {
            logAudit('update', 'members', $id);
            addNotification($_SESSION['user_id'], 'Member Status Updated', "Member status changed to {$status}", 'success');
        }
    } elseif ($action === 'delete') {
        $id = $_POST['id'];
        
        $stmt = executeQuery("DELETE FROM members WHERE id = ?", [$id]);
        
        if ($stmt) {
            logAudit('delete', 'members', $id);
            addNotification($_SESSION['user_id'], 'Member Deleted', 'Member has been removed from the system', 'info');
        }
    }
    
    header('Location: members.php');
    exit();
}

// Get members based on role
$members_query = "SELECT m.*, a.name as area_name, d.name as district_name, ass.name as assembly_name 
                  FROM members m 
                  LEFT JOIN areas a ON m.area_id = a.id 
                  LEFT JOIN districts d ON m.district_id = d.id 
                  LEFT JOIN assemblies ass ON m.assembly_id = ass.id";
$params = [];

if ($user['role'] === 'area_admin') {
    $members_query .= " WHERE m.area_id = ?";
    $params = [$user['area_id']];
} elseif ($user['role'] === 'district_admin') {
    $members_query .= " WHERE m.district_id = ?";
    $params = [$user['district_id']];
} elseif ($user['role'] === 'assembly_admin') {
    $members_query .= " WHERE m.assembly_id = ?";
    $params = [$user['assembly_id']];
}

$members_query .= " ORDER BY m.created_at DESC";
$stmt = executeQuery($members_query, $params);
$members = $stmt ? $stmt->fetchAll() : [];

// Get statistics
$stats = [
    'total' => count($members),
    'active' => count(array_filter($members, fn($m) => $m['membership_status'] === 'active')),
    'new_this_month' => count(array_filter($members, fn($m) => date('Y-m', strtotime($m['created_at'])) === date('Y-m')))
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Members Management - COP Madina Conference</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body class="bg-gradient-to-br from-slate-50 to-blue-50 min-h-screen">
    <div id="app" class="flex h-screen">
        <!-- Sidebar -->
        <?php include 'includes/admin_sidebar.php'; ?>
        
        <!-- Main Content -->
        <div class="flex-1 flex flex-col overflow-hidden ml-72">
            <!-- Header -->
            <header class="bg-white/80 backdrop-blur-sm shadow-lg border-b border-slate-200/50">
                <div class="flex items-center justify-between px-8 py-6">
                    <div>
                        <h1 class="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent flex items-center">
                            <div class="p-2 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 mr-3">
                                <i class="fas fa-users text-white"></i>
                            </div>
                            Members Management
                        </h1>
                        <p class="text-slate-600 mt-1">Manage church members and membership records</p>
                    </div>
                    
                    <a href="<?php echo BASE_URL; ?>join.php" target="_blank"
                       class="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-medium rounded-xl transition-all duration-200 flex items-center space-x-2 shadow-lg">
                        <i class="fas fa-external-link-alt"></i>
                        <span>Join Page</span>
                    </a>
                </div>
            </header>

            <!-- Content -->
            <main class="flex-1 overflow-y-auto p-8">
                <!-- Statistics Cards -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                    <div class="bg-white/70 backdrop-blur-sm rounded-2xl shadow-lg border border-slate-200/50 p-6">
                        <div class="flex items-center">
                            <div class="p-3 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 mr-4">
                                <i class="fas fa-users text-white text-xl"></i>
                            </div>
                            <div>
                                <p class="text-sm font-medium text-slate-600">Total Members</p>
                                <p class="text-2xl font-bold text-slate-800"><?php echo $stats['total']; ?></p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white/70 backdrop-blur-sm rounded-2xl shadow-lg border border-slate-200/50 p-6">
                        <div class="flex items-center">
                            <div class="p-3 rounded-xl bg-gradient-to-br from-green-500 to-green-600 mr-4">
                                <i class="fas fa-user-check text-white text-xl"></i>
                            </div>
                            <div>
                                <p class="text-sm font-medium text-slate-600">Active Members</p>
                                <p class="text-2xl font-bold text-slate-800"><?php echo $stats['active']; ?></p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white/70 backdrop-blur-sm rounded-2xl shadow-lg border border-slate-200/50 p-6">
                        <div class="flex items-center">
                            <div class="p-3 rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 mr-4">
                                <i class="fas fa-user-plus text-white text-xl"></i>
                            </div>
                            <div>
                                <p class="text-sm font-medium text-slate-600">New This Month</p>
                                <p class="text-2xl font-bold text-slate-800"><?php echo $stats['new_this_month']; ?></p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Members Table -->
                <div class="bg-white/70 backdrop-blur-sm rounded-2xl shadow-lg border border-slate-200/50">
                    <div class="p-6 border-b border-slate-200/50">
                        <div class="flex items-center justify-between">
                            <h2 class="text-xl font-semibold text-slate-800">Church Members</h2>
                            <div class="flex items-center space-x-4">
                                <div class="relative">
                                    <input type="text" v-model="searchTerm" placeholder="Search members..."
                                           class="pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead class="bg-slate-50/50 border-b border-slate-200/50">
                                <tr>
                                    <th class="px-6 py-4 text-left text-sm font-semibold text-slate-700">Member</th>
                                    <th class="px-6 py-4 text-left text-sm font-semibold text-slate-700">Contact</th>
                                    <th class="px-6 py-4 text-left text-sm font-semibold text-slate-700">Church Assignment</th>
                                    <th class="px-6 py-4 text-left text-sm font-semibold text-slate-700">Membership</th>
                                    <th class="px-6 py-4 text-left text-sm font-semibold text-slate-700">Join Date</th>
                                    <th class="px-6 py-4 text-center text-sm font-semibold text-slate-700">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-200/50">
                                <?php foreach ($members as $member): ?>
                                <tr class="hover:bg-slate-50/50 transition-colors">
                                    <td class="px-6 py-4">
                                        <div class="flex items-center">
                                            <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center mr-3">
                                                <span class="text-white font-semibold text-sm">
                                                    <?php echo strtoupper(substr($member['first_name'], 0, 1) . substr($member['last_name'], 0, 1)); ?>
                                                </span>
                                            </div>
                                            <div>
                                                <div class="font-semibold text-slate-800"><?php echo htmlspecialchars($member['first_name'] . ' ' . $member['last_name']); ?></div>
                                                <div class="text-sm text-slate-600">ID: <?php echo htmlspecialchars($member['member_id']); ?></div>
                                                <div class="text-xs text-slate-500"><?php echo ucfirst($member['gender']); ?> • <?php echo ucfirst(str_replace('_', ' ', $member['marital_status'] ?? 'N/A')); ?></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="text-sm">
                                            <div class="text-slate-800"><?php echo htmlspecialchars($member['email']); ?></div>
                                            <?php if ($member['phone']): ?>
                                            <div class="text-slate-600"><?php echo htmlspecialchars($member['phone']); ?></div>
                                            <?php endif; ?>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 text-sm text-slate-600">
                                        <?php 
                                        $org_parts = [];
                                        if ($member['area_name']) $org_parts[] = $member['area_name'];
                                        if ($member['district_name']) $org_parts[] = $member['district_name'];
                                        if ($member['assembly_name']) $org_parts[] = $member['assembly_name'];
                                        echo htmlspecialchars(implode(' > ', $org_parts));
                                        ?>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div>
                                            <span class="px-3 py-1 text-xs font-semibold rounded-full <?php 
                                                echo $member['membership_status'] === 'active' ? 'bg-green-100 text-green-800' : 
                                                    ($member['membership_status'] === 'inactive' ? 'bg-gray-100 text-gray-800' : 
                                                    ($member['membership_status'] === 'suspended' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800')); 
                                            ?>">
                                                <?php echo ucfirst($member['membership_status']); ?>
                                            </span>
                                            <div class="text-xs text-slate-500 mt-1"><?php echo ucfirst(str_replace('_', ' ', $member['membership_type'])); ?></div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 text-sm text-slate-600">
                                        <?php echo date('M j, Y', strtotime($member['join_date'])); ?>
                                    </td>
                                    <td class="px-6 py-4 text-center">
                                        <div class="flex justify-center space-x-2">
                                            <button @click="viewMember(<?php echo htmlspecialchars(json_encode($member)); ?>)"
                                                    class="px-3 py-1 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg text-sm transition-colors">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <button @click="updateStatus(<?php echo $member['id']; ?>, '<?php echo $member['membership_status']; ?>')"
                                                    class="px-3 py-1 bg-yellow-100 hover:bg-yellow-200 text-yellow-700 rounded-lg text-sm transition-colors">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button @click="confirmDelete(<?php echo $member['id']; ?>, '<?php echo htmlspecialchars($member['first_name'] . ' ' . $member['last_name']); ?>')"
                                                    class="px-3 py-1 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg text-sm transition-colors">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Empty State -->
                <?php if (empty($members)): ?>
                <div class="text-center py-16">
                    <div class="mx-auto w-24 h-24 bg-slate-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-users text-3xl text-slate-400"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-slate-700 mb-2">No Members Found</h3>
                    <p class="text-slate-500 mb-6">Members will appear here once they register through the join page.</p>
                    <a href="<?php echo BASE_URL; ?>join.php" target="_blank"
                       class="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-medium rounded-xl transition-all duration-200">
                        <i class="fas fa-external-link-alt mr-2"></i>
                        Open Join Page
                    </a>
                </div>
                <?php endif; ?>
            </main>
        </div>

        <!-- Member Details Modal -->
        <div v-if="showMemberModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
            <div class="bg-white/95 backdrop-blur-sm rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto border border-slate-200/50">
                <div class="sticky top-0 bg-white/95 backdrop-blur-sm border-b border-slate-200/50 px-6 py-4 rounded-t-2xl">
                    <div class="flex items-center justify-between">
                        <h3 class="text-xl font-bold text-slate-800">Member Details</h3>
                        <button @click="showMemberModal = false" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                            <i class="fas fa-times text-slate-500"></i>
                        </button>
                    </div>
                </div>
                
                <div class="p-6" v-if="selectedMember">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <h4 class="font-semibold text-slate-800 mb-3">Personal Information</h4>
                            <div class="space-y-2 text-sm">
                                <div><span class="font-medium">Name:</span> {{ selectedMember.first_name }} {{ selectedMember.last_name }}</div>
                                <div><span class="font-medium">Member ID:</span> {{ selectedMember.member_id }}</div>
                                <div><span class="font-medium">Email:</span> {{ selectedMember.email }}</div>
                                <div v-if="selectedMember.phone"><span class="font-medium">Phone:</span> {{ selectedMember.phone }}</div>
                                <div v-if="selectedMember.date_of_birth"><span class="font-medium">Date of Birth:</span> {{ selectedMember.date_of_birth }}</div>
                                <div><span class="font-medium">Gender:</span> {{ selectedMember.gender }}</div>
                                <div v-if="selectedMember.marital_status"><span class="font-medium">Marital Status:</span> {{ selectedMember.marital_status.replace('_', ' ') }}</div>
                                <div v-if="selectedMember.occupation"><span class="font-medium">Occupation:</span> {{ selectedMember.occupation }}</div>
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="font-semibold text-slate-800 mb-3">Church Information</h4>
                            <div class="space-y-2 text-sm">
                                <div v-if="selectedMember.area_name"><span class="font-medium">Area:</span> {{ selectedMember.area_name }}</div>
                                <div v-if="selectedMember.district_name"><span class="font-medium">District:</span> {{ selectedMember.district_name }}</div>
                                <div v-if="selectedMember.assembly_name"><span class="font-medium">Assembly:</span> {{ selectedMember.assembly_name }}</div>
                                <div><span class="font-medium">Membership Type:</span> {{ selectedMember.membership_type.replace('_', ' ') }}</div>
                                <div><span class="font-medium">Status:</span> {{ selectedMember.membership_status }}</div>
                                <div><span class="font-medium">Join Date:</span> {{ selectedMember.join_date }}</div>
                                <div v-if="selectedMember.baptism_date"><span class="font-medium">Baptism Date:</span> {{ selectedMember.baptism_date }}</div>
                            </div>
                        </div>
                    </div>
                    
                    <div v-if="selectedMember.address" class="mt-6">
                        <h4 class="font-semibold text-slate-800 mb-3">Address</h4>
                        <p class="text-sm text-slate-600">{{ selectedMember.address }}</p>
                        <p class="text-sm text-slate-600">{{ selectedMember.city }}, {{ selectedMember.state }} {{ selectedMember.postal_code }}</p>
                        <p class="text-sm text-slate-600">{{ selectedMember.country }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Status Update Modal -->
        <div v-if="showStatusModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
            <div class="bg-white/95 backdrop-blur-sm rounded-2xl shadow-2xl w-full max-w-md border border-slate-200/50">
                <div class="p-6">
                    <h3 class="text-lg font-bold text-slate-800 mb-4">Update Membership Status</h3>
                    <form method="POST">
                        <input type="hidden" name="action" value="update_status">
                        <input type="hidden" name="id" :value="statusMemberId">
                        
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-slate-700 mb-2">Status</label>
                            <select name="status" v-model="newStatus" required
                                    class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                                <option value="suspended">Suspended</option>
                                <option value="transferred">Transferred</option>
                            </select>
                        </div>
                        
                        <div class="flex justify-end space-x-3">
                            <button type="button" @click="showStatusModal = false" 
                                    class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg transition-colors">
                                Cancel
                            </button>
                            <button type="submit" 
                                    class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors">
                                Update Status
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;
        
        createApp({
            data() {
                return {
                    searchTerm: '',
                    showMemberModal: false,
                    showStatusModal: false,
                    selectedMember: null,
                    statusMemberId: null,
                    newStatus: ''
                }
            },
            methods: {
                viewMember(member) {
                    this.selectedMember = member;
                    this.showMemberModal = true;
                },
                updateStatus(id, currentStatus) {
                    this.statusMemberId = id;
                    this.newStatus = currentStatus;
                    this.showStatusModal = true;
                },
                confirmDelete(id, name) {
                    if (confirm(`Are you sure you want to delete member "${name}"? This action cannot be undone.`)) {
                        const form = document.createElement('form');
                        form.method = 'POST';
                        form.innerHTML = `
                            <input type="hidden" name="action" value="delete">
                            <input type="hidden" name="id" value="${id}">
                        `;
                        document.body.appendChild(form);
                        form.submit();
                    }
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists