MINI

files >> C:/xampp/htdocs/reset/index - dasbord.php
 <?php
// dashboard_kartu.php
// Configurasi database
$host = 'localhost';
$dbname = 'bobby_koperasi';
$username = 'root';
$password = '';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // Hitung statistik
    $stats = $pdo->query("SELECT 
        SUM(is_aktif = 1) as total_aktif,
        SUM(is_aktif = 0) as total_nonaktif,
        SUM(is_keluar = 1) as total_keluar,
        SUM(is_keluar = 0) as total_masuk
        FROM data_card")->fetch(PDO::FETCH_ASSOC);

    // Query untuk kartu yang keluar
    $cards_keluar = $pdo->query("SELECT nomor_card, keterangan FROM data_card WHERE is_keluar = 1")->fetchAll(PDO::FETCH_ASSOC);

} catch (PDOException $e) {
    die("Koneksi database gagal: " . $e->getMessage());
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard Status Kartu</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <style>
        .dashboard-container {
            max-width: 1400px;
            margin: 20px auto;
            padding: 20px;
        }
        .stat-card {
            border-radius: 10px;
            transition: all 0.3s;
            height: 100%;
            border: none;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        }
        .card-aktif {
            background: linear-gradient(135deg, #28a745 0%, #5cb85c 100%);
            color: white;
        }
        .card-nonaktif {
            background: linear-gradient(135deg, #dc3545 0%, #d9534f 100%);
            color: white;
        }
        .card-masuk {
            background: linear-gradient(135deg, #17a2b8 0%, #5bc0de 100%);
            color: white;
        }
        .card-keluar {
            background: linear-gradient(135deg, #ffc107 0%, #f0ad4e 100%);
            color: #212529;
        }
        .icon-stat {
            font-size: 2.5rem;
            opacity: 0.8;
        }
        .keluar-badge {
            background-color: rgba(255,255,255,0.2);
            border-radius: 20px;
            padding: 5px 15px;
            font-weight: 600;
            display: inline-block;
        }
        .table-responsive {
            margin-top: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            border-radius: 10px;
            overflow: hidden;
        }
        .status-badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.85rem;
        }
        .badge-aktif {
            background-color: #28a745;
            color: white;
        }
        .badge-nonaktif {
            background-color: #dc3545;
            color: white;
        }
        .badge-keluar {
            background-color: #ffc107;
            color: #212529;
        }
        .badge-masuk {
            background-color: #17a2b8;
            color: white;
        }
        .table thead th {
            background-color: #343a40;
            color: white;
            position: sticky;
            top: 0;
        }
        .chart-container {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-top: 30px;
        }
        .table-keluar tr:hover {
            background-color: rgba(255,193,7,0.1);
        }
    </style>
</head>
<body>
    <div class="container-fluid dashboard-container">
        <h2 class="mb-4"><i class="bi bi-speedometer2 me-2"></i>Dashboard Status Kartu</h2>
        
        <!-- Statistik Utama -->
        <div class="row mb-4 g-4">
            <div class="col-md-3 col-6">
                <div class="stat-card card-aktif p-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="mb-0">Kartu Aktif</h5>
                            <h2 class="mb-0"><?php echo $stats['total_aktif']; ?></h2>
                        </div>
                        <i class="bi bi-check-circle icon-stat"></i>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3 col-6">
                <div class="stat-card card-nonaktif p-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="mb-0">Kartu Non-Aktif</h5>
                            <h2 class="mb-0"><?php echo $stats['total_nonaktif']; ?></h2>
                        </div>
                        <i class="bi bi-x-circle icon-stat"></i>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3 col-6">
                <div class="stat-card card-masuk p-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="mb-0">Kartu Masuk</h5>
                            <h2 class="mb-0"><?php echo $stats['total_masuk']; ?></h2>
                        </div>
                        <i class="bi bi-box-arrow-in-right icon-stat"></i>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3 col-6">
                <div class="stat-card card-keluar p-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="mb-0">Kartu Keluar</h5>
                            <h2 class="mb-0"><?php echo $stats['total_keluar']; ?></h2>
                        </div>
                        <i class="bi bi-box-arrow-right icon-stat"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Grafik -->
        <div class="row">
            <div class="col-md-6">
                <div class="chart-container">
                    <h5><i class="bi bi-pie-chart me-2"></i>Status Aktif Kartu</h5>
                    <div id="aktifChart" style="height: 300px;"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="chart-container">
                    <h5><i class="bi bi-pie-chart me-2"></i>Status Keluar/Masuk</h5>
                    <div id="keluarChart" style="height: 300px;"></div>
                </div>
            </div>
        </div>

        <!-- Daftar Kartu Keluar -->
        <div class="table-responsive mt-4">
            <h4 class="mb-3"><i class="bi bi-list-check me-2"></i>Daftar Kartu yang Keluar</h4>
            <table class="table table-hover table-keluar">
                <thead>
                    <tr>
                        <th>No. Kartu</th>
                        <th>Status</th>
                        <th>Keterangan</th>
                        <th>Waktu Keluar</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($cards_keluar as $card): ?>
                    <tr>
                        <td><?php echo htmlspecialchars($card['nomor_card']); ?></td>
                        <td><span class="status-badge badge-keluar">KELUAR</span></td>
                        <td><?php echo htmlspecialchars($card['keterangan'] ?? '-'); ?></td>
                        <td><?php echo date('d/m/Y H:i'); ?></td>
                    </tr>
                    <?php endforeach; ?>
                    <?php if (empty($cards_keluar)): ?>
                    <tr>
                        <td colspan="4" class="text-center">Tidak ada kartu yang keluar saat ini</td>
                    </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Grafik Status Aktif
        const aktifCtx = document.getElementById('aktifChart').getContext('2d');
        const aktifChart = new Chart(aktifCtx, {
            type: 'pie',
            data: {
                labels: ['Aktif', 'Non-Aktif'],
                datasets: [{
                    data: [<?php echo $stats['total_aktif']; ?>, <?php echo $stats['total_nonaktif']; ?>],
                    backgroundColor: ['#28a745', '#dc3545'],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'right',
                    }
                }
            }
        });

        // Grafik Status Keluar
        const keluarCtx = document.getElementById('keluarChart').getContext('2d');
        const keluarChart = new Chart(keluarCtx, {
            type: 'doughnut',
            data: {
                labels: ['Masuk', 'Keluar'],
                datasets: [{
                    data: [<?php echo $stats['total_masuk']; ?>, <?php echo $stats['total_keluar']; ?>],
                    backgroundColor: ['#17a2b8', '#ffc107'],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'right',
                    }
                }
            }
        });
    </script>
</body>
</html>