PNG IHDR x sBIT|d pHYs + tEXtSoftware www.inkscape.org< ,tEXtComment
<?php
session_start();
require '../db.php'; // Connect to database
// 1. Security Check: specific admin session must be true
if (!isset($_SESSION['admin_logged_in']) || $_SESSION['admin_logged_in'] !== true) {
header('Location: login.php');
exit;
}
// 2. Fetch Stats
// Total Raised (Only completed/approved)
$stmt = $pdo->query("SELECT SUM(total_amount) as total FROM donations WHERE payment_status = 'completed'");
$totalRaised = $stmt->fetch()['total'] ?? 0.00;
// Pending Count
$stmt = $pdo->query("SELECT COUNT(*) as count FROM donations WHERE payment_status = 'pending'");
$pendingCount = $stmt->fetch()['count'];
// 3. Fetch Recent Donations (Newest first)
$stmt = $pdo->query("SELECT * FROM donations ORDER BY created_at DESC LIMIT 50");
$donations = $stmt->fetchAll();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - Global Relief Bridge</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-green: #8ac926;
--dark-green: #070767;
--primary-purple: #9b5de5;
--bg-light: #f4f7f6;
--text-dark: #333;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
body { background-color: var(--bg-light); display: flex; min-height: 100vh; }
/* --- SIDEBAR --- */
.sidebar {
width: 260px; background: var(--dark-green); color: white;
display: flex; flex-direction: column; padding: 30px 20px;
position: fixed; height: 100%; top: 0; left: 0;
}
.brand { font-size: 1.5rem; font-weight: 800; margin-bottom: 50px; color: white; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.brand i { color: var(--primary-green); }
.nav-link {
color: rgba(255,255,255,0.7); text-decoration: none;
padding: 15px; border-radius: 15px; margin-bottom: 10px;
transition: 0.3s; display: flex; align-items: center; gap: 15px; font-weight: 500;
}
.nav-link:hover, .nav-link.active { background: rgba(255,255,255,0.1); color: white; transform: translateX(5px); }
.nav-link i { width: 20px; text-align: center; }
.logout { margin-top: auto; color: #ff6b6b; }
.logout:hover { background: rgba(255, 107, 107, 0.1); color: #ff8787; }
/* --- MAIN CONTENT --- */
.main-content { margin-left: 260px; padding: 40px; width: 100%; }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.header h2 { color: var(--text-dark); margin: 0; }
.admin-badge { background: white; padding: 8px 15px; border-radius: 30px; font-size: 0.9rem; font-weight: bold; color: var(--dark-green); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
/* --- STAT CARDS --- */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 40px; }
.stat-card {
background: white; padding: 30px; border-radius: 25px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05); display: flex; align-items: center; gap: 25px;
transition: 0.3s;
}
.stat-card:hover { transform: translateY(-5px); }
.icon-box {
width: 70px; height: 70px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1.8rem;
}
.stat-info h3 { font-size: 2rem; margin-bottom: 5px; color: var(--dark-green); }
.stat-info p { color: #888; font-size: 0.95rem; font-weight: 600; }
/* --- TABLE --- */
.table-container { background: white; border-radius: 25px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.table-header { margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
table { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
th { text-align: left; color: #888; font-weight: 600; padding: 15px; font-size: 0.9rem; }
td { padding: 15px; background: #fff; color: var(--text-dark); border-top: 1px solid #f4f7f6; border-bottom: 1px solid #f4f7f6; }
td:first-child { border-top-left-radius: 15px; border-bottom-left-radius: 15px; border-left: 1px solid #f4f7f6; }
td:last-child { border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-right: 1px solid #f4f7f6; }
tr:hover td { background: #fafafa; }
.status-badge { padding: 6px 15px; border-radius: 30px; font-size: 0.8rem; font-weight: bold; }
.status-completed { background: #d4edda; color: #155724; }
.status-pending { background: #fff3cd; color: #856404; }
.status-failed { background: #f8d7da; color: #721c24; }
.btn-view {
padding: 8px 15px; background: var(--primary-purple); color: white;
border-radius: 30px; text-decoration: none; font-size: 0.8rem; font-weight: bold;
display: inline-flex; align-items: center; gap: 5px; transition: 0.2s;
}
.btn-view:hover { background: #864dd4; }
.btn-approve { background: var(--primary-green); margin-left: 5px; }
.btn-approve:hover { background: #76b020; }
/* --- MODAL FOR IMAGE PREVIEW --- */
.modal {
display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%;
background-color: rgba(0,0,0,0.8); align-items: center; justify-content: center;
}
.modal-content { max-width: 80%; max-height: 80%; border-radius: 10px; box-shadow: 0 0 50px rgba(0,0,0,0.5); }
.close-modal { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; cursor: pointer; }
</style>
</head>
<body>
<?php include 'side.php'; ?>
<div class="main-content">
<div class="header">
<div>
<h2>Dashboard</h2>
<p style="color: #888;">Welcome back, Admin</p>
</div>
<div class="admin-badge"><i class="fas fa-user-shield"></i> Super Admin</div>
</div>
<div class="stats-grid">
<div class="stat-card">
<div class="icon-box" style="background: #e0f7fa; color: #00bcd4;">
<i class="fas fa-pound-sign"></i>
</div>
<div class="stat-info">
<h3>£<?php echo number_format($totalRaised, 2); ?></h3>
<p>Total Raised</p>
</div>
</div>
<div class="stat-card">
<div class="icon-box" style="background: #fff3cd; color: #ffc107;">
<i class="fas fa-hourglass-half"></i>
</div>
<div class="stat-info">
<h3><?php echo $pendingCount; ?></h3>
<p>Pending Reviews</p>
</div>
</div>
<div class="stat-card">
<div class="icon-box" style="background: #f3e5f5; color: var(--primary-purple);">
<i class="fas fa-users"></i>
</div>
<div class="stat-info">
<h3><?php echo count($donations); ?></h3>
<p>Total Donations</p>
</div>
</div>
</div>
<div class="table-container">
<div class="table-header">
<h3>Recent Transactions</h3>
<button class="btn-view" style="background: var(--dark-green);">Export CSV</button>
</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>Donor</th>
<th>Amount</th>
<th>Method</th>
<th>Date</th>
<th>Status</th>
<th>Proof</th>
</tr>
</thead>
<tbody>
<?php foreach ($donations as $d): ?>
<tr>
<td style="font-family: monospace; font-size: 0.9rem; color:#888;">
#<?php echo substr($d['transaction_ref'], -6); ?>
</td>
<td>
<div style="font-weight: bold;"><?php echo htmlspecialchars($d['donor_name']); ?></div>
<div style="font-size: 0.8rem; color:#999;"><?php echo htmlspecialchars($d['donor_email']); ?></div>
</td>
<td style="font-weight: 800; color: var(--dark-green);">
<?php echo $d['currency'] . ' ' . number_format($d['total_amount'], 2); ?>
</td>
<td>
<?php
$method = strtoupper($d['payment_method']);
if($method == 'BANK') echo '<span style="color:#007BFF"><i class="fas fa-university"></i> Bank</span>';
elseif($method == 'USDT') echo '<span style="color:#28a745"><i class="fas fa-coins"></i> Crypto</span>';
else echo $method;
?>
</td>
<td><?php echo date('M d', strtotime($d['created_at'])); ?></td>
<td>
<span class="status-badge status-<?php echo strtolower($d['payment_status']); ?>">
<?php echo ucfirst($d['payment_status']); ?>
</span>
</td>
<td>
<?php
// Extract proof path from message
$parts = explode('| Proof File: ', $d['message']);
$proof = isset($parts[1]) ? trim($parts[1]) : 'None';
if ($proof !== 'None' && $proof !== ''):
?>
<button onclick="showImage('../<?php echo $proof; ?>')" class="btn-view">
<i class="fas fa-eye"></i> View
</button>
<?php else: ?>
<span style="color:#ccc; font-size:0.8rem;">No File</span>
<?php endif; ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
<div id="imgModal" class="modal" onclick="this.style.display='none'">
<span class="close-modal">×</span>
<img class="modal-content" id="modalImg">
</div>
<script>
function showImage(src) {
document.getElementById('modalImg').src = src;
document.getElementById('imgModal').style.display = 'flex';
}
</script>
</body>
</html>
b IDATxytVսϓ22 A@IR:hCiZ[v*E:WũZA ^dQeQ @ !jZ'>gsV仿$|?g)&x-E