awc_chms/dashboard.php at main · KojoShaddy/awc_chms · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<?php
// dashboard.php - Main overview for Destiny Chapel ChMS
session_start();
require_once 'db_connect.php';

if (!isset($_SESSION['admin_id'])) {
    header('Location: login.php');
    exit;
}

// Fetch Human-Centric Stats
$memberCount = $pdo->query("SELECT COUNT(*) FROM members")->fetchColumn();
$upcomingEvents = $pdo->query("SELECT COUNT(*) FROM events WHERE start_date >= CURDATE()")->fetchColumn();
$deptCount = $pdo->query("SELECT COUNT(*) FROM departments")->fetchColumn();

// Membership Growth (Last 12 Months)
$membershipTrends = $pdo->query("
    SELECT DATE_FORMAT(created_at, '%Y-%m') as month, COUNT(*) as count
    FROM members
    GROUP BY month
    ORDER BY month DESC
    LIMIT 12
")->fetchAll();
$membershipTrends = array_reverse($membershipTrends);

// Gender Distribution
$genderDist = $pdo->query("SELECT gender, COUNT(*) as count FROM members GROUP BY gender")->fetchAll();

// Departmental Distribution
$deptDist = $pdo->query("
    SELECT d.name, COUNT(md.member_id) as count
    FROM departments d
    LEFT JOIN member_departments md ON d.id = md.department_id
    GROUP BY d.id
")->fetchAll();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard | Destiny Chapel ChMS</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <style>body { font-family: 'Inter', sans-serif; }</style>
</head>
<body class="bg-gray-50 text-slate-900 font-sans flex h-screen overflow-hidden">
    <!-- Sidebar -->
    <aside class="bg-slate-900 text-white w-64 flex flex-col shrink-0">
        <div class="p-6 flex items-center gap-3 border-b border-slate-800">
            <div class="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center font-bold text-xl">D</div>
            <span class="font-bold text-lg tracking-tight">Destiny Chapel</span>
        </div>
        <nav class="flex-1 p-4 space-y-2">
            <a href="dashboard.php" class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-indigo-600 text-white font-medium">Dashboard</a>
            <a href="members.php" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800 hover:text-white font-medium">Members</a>
            <a href="attendance_report.php" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800 hover:text-white font-medium">Attendance</a>
            <a href="finance.php" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800 hover:text-white font-medium">Finance</a>
            <a href="events.php" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800 hover:text-white font-medium">Events</a>
            <a href="departments.php" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800 hover:text-white font-medium">Departments</a>
            <a href="committees.php" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800 hover:text-white font-medium">Committees</a>
            <div class="pt-4 mt-4 border-t border-slate-800">
                <a href="profile.php" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800 hover:text-white font-medium">My Profile</a>
                <?php if (isset($_SESSION['admin_role']) && $_SESSION['admin_role'] == 'Super Admin'): ?>
                    <a href="admins.php" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800 hover:text-white font-medium">Administrators</a>
                <?php endif; ?>
            </div>
        </nav>
        <a href="logout.php" class="p-4 hover:bg-slate-800 border-t border-slate-800 text-center text-sm text-slate-400">Logout</a>
    </aside>

    <!-- Main Content -->
    <main class="flex-1 flex flex-col overflow-hidden">
        <header class="bg-white border-b border-gray-200 h-16 flex items-center justify-between px-8 shrink-0">
            <h1 class="text-xl font-semibold">Dashboard Overview</h1>
            <div className="flex items-center gap-4">
                <span class="text-sm font-medium text-slate-600"><?php echo $_SESSION['admin_name']; ?> (Admin)</span>
            </div>
        </header>

        <div class="flex-1 overflow-y-auto p-8 space-y-8">
            <!-- Stats Grid -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
                    <div class="text-slate-500 font-medium mb-1">Total Members</div>
                    <div class="text-3xl font-bold"><?php echo $memberCount; ?></div>
                </div>
                <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
                    <div class="text-slate-500 font-medium mb-1">Departments</div>
                    <div class="text-3xl font-bold"><?php echo $deptCount; ?></div>
                </div>
                <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
                    <div class="text-slate-500 font-medium mb-1">Upcoming Events</div>
                    <div class="text-3xl font-bold"><?php echo $upcomingEvents; ?></div>
                </div>
            </div>

            <!-- Charts Section -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Membership Growth Chart -->
                <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
                    <h3 class="font-bold text-lg mb-6">Membership Growth</h3>
                    <div class="h-64">
                        <canvas id="growthChart"></canvas>
                    </div>
                </div>

                <!-- Gender Distribution Chart -->
                <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
                    <h3 class="font-bold text-lg mb-6">Gender Demographics</h3>
                    <div class="h-64 flex items-center justify-center">
                        <canvas id="genderChart"></canvas>
                    </div>
                </div>

                <!-- Departmental Distribution Chart -->
                <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm lg:col-span-2">
                    <h3 class="font-bold text-lg mb-6">Members by Department</h3>
                    <div class="h-64">
                        <canvas id="deptChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Static Horizontal Footer -->
        <footer class="bg-white border-t border-gray-200 py-4 px-8 shrink-0 flex flex-col md:flex-row justify-between items-center text-slate-500 text-sm">
            <p>&copy; <?php echo date('Y'); ?> AWC-Destiny Chapel. All rights reserved.</p>
            <p class="mt-2 md:mt-0">Made with <span class="text-red-500">❤</span> by <a href="https://kojoshaddy.pages.dev" target="_blank" class="text-indigo-600 hover:text-indigo-800 transition-colors duration-300 font-medium">Shadrack Inusah</a></p>
        </footer>
    </main>

    <script>
        // Membership Growth Chart
        new Chart(document.getElementById('growthChart'), {
            type: 'line',
            data: {
                labels: <?php echo json_encode(array_column($membershipTrends, 'month')); ?>,
                datasets: [{
                    label: 'New Members',
                    data: <?php echo json_encode(array_column($membershipTrends, 'count')); ?>,
                    borderColor: '#4f46e5',
                    backgroundColor: 'rgba(79, 70, 229, 0.1)',
                    fill: true,
                    tension: 0.4,
                    pointRadius: 4,
                    pointBackgroundColor: '#4f46e5'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: { beginAtZero: true, grid: { borderDash: [5, 5] } },
                    x: { grid: { display: false } }
                }
            }
        });

        // Gender Distribution Chart
        new Chart(document.getElementById('genderChart'), {
            type: 'doughnut',
            data: {
                labels: <?php echo json_encode(array_column($genderDist, 'gender')); ?>,
                datasets: [{
                    data: <?php echo json_encode(array_column($genderDist, 'count')); ?>,
                    backgroundColor: ['#4f46e5', '#ec4899', '#94a3b8'],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'bottom' }
                },
                cutout: '70%'
            }
        });

        // Departmental Distribution Chart
        new Chart(document.getElementById('deptChart'), {
            type: 'bar',
            data: {
                labels: <?php echo json_encode(array_column($deptDist, 'name')); ?>,
                datasets: [{
                    label: 'Member Count',
                    data: <?php echo json_encode(array_column($deptDist, 'count')); ?>,
                    backgroundColor: '#6366f1',
                    borderRadius: 6
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: { beginAtZero: true, grid: { borderDash: [5, 5] } },
                    x: { grid: { display: false } }
                }
            }
        });
    </script>
</body>
</html>