name : kvk.php
<?php
$rows = [];
if (isset($_FILES['csv_file'])) {
    $file = $_FILES['csv_file']['tmp_name'];
    if (($handle = fopen($file, "r")) !== FALSE) {
        $header = fgetcsv($handle, 0, "\t");
        while (($data = fgetcsv($handle, 0, "\t")) !== FALSE) {
            $rows[] = [
                "Goal%"      => $data[0] ?? "",
                "Name"       => $data[1] ?? "",
                "GovernorId" => $data[2] ?? "",
                "Killpoints" => $data[3] ?? "",
                "Deads"      => $data[4] ?? "",
                "Kills_t5"   => $data[5] ?? "",
                "Kills_t4"   => $data[6] ?? "",
            ];
        }
        fclose($handle);
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>KvK Dashboard Tool</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>
<body class="bg-gray-900 text-white min-h-screen flex">

<!-- Sidebar -->
<aside class="hidden md:flex flex-col w-64 bg-gray-800 border-r border-gray-700 p-6">
  <h1 class="text-2xl font-bold mb-6 text-indigo-400 flex items-center gap-2">
    <i class="fa-solid fa-chart-line"></i> KvK Tool
  </h1>
  <nav class="mt-8 space-y-2">
    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-700 flex items-center gap-2">
      <i class="fa-solid fa-house"></i> Dashboard
    </a>
    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-700 flex items-center gap-2">
      <i class="fa-solid fa-chart-pie"></i> Charts
    </a>
    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-700 flex items-center gap-2">
      <i class="fa-solid fa-gear"></i> Settings
    </a>
  </nav>
</aside>

<!-- Main -->
<main class="flex-1 p-6 overflow-x-auto">
  <div class="max-w-5xl mx-auto flex flex-col gap-8">

    <!-- Form Upload (Center) -->
    <div class="bg-gray-800/80 backdrop-blur-lg border border-gray-700 rounded-2xl shadow-xl p-6">
      <h2 class="text-xl font-bold text-indigo-300 mb-4 text-center flex items-center justify-center gap-2">
        <i class="fa-solid fa-file-csv"></i> Upload CSV
      </h2>
      <form method="post" enctype="multipart/form-data" class="flex flex-col md:flex-row gap-4 justify-center items-center">
        <label class="flex items-center gap-2 bg-gray-700 text-white px-4 py-2 rounded-lg cursor-pointer hover:bg-gray-600">
          <i class="fa-solid fa-upload"></i>
          <span>Pilih File</span>
          <input type="file" name="csv_file" class="hidden" onchange="this.form.submit()">
        </label>
        <button type="submit" class="btn btn-primary rounded-xl px-6 py-2 flex items-center gap-2">
          <i class="fa-solid fa-cloud-arrow-up"></i> Upload
        </button>
      </form>
    </div>

    <?php if (empty($rows)) : ?>
      <div class="text-center text-gray-400 mt-20">
        <h2 class="text-3xl font-semibold"><i class="fa-solid fa-circle-info"></i> Upload CSV untuk memulai</h2>
      </div>
    <?php else : ?>

      <!-- Table -->
      <div class="bg-gray-800/80 backdrop-blur-lg border border-gray-700 rounded-2xl shadow-xl p-6">
        <h2 class="text-2xl font-bold text-indigo-300 mb-4 flex items-center gap-2">
          <i class="fa-solid fa-table"></i> Data Preview
        </h2>
        <div class="overflow-x-auto">
          <table class="table-auto w-full text-sm text-left border-collapse">
            <thead class="bg-gray-700 text-indigo-200 uppercase">
              <tr>
                <th class="px-4 py-2">Goal%</th>
                <th class="px-4 py-2">Name</th>
                <th class="px-4 py-2">GovernorId</th>
                <th class="px-4 py-2">Killpoints</th>
                <th class="px-4 py-2">Deads</th>
                <th class="px-4 py-2">Kills T5</th>
                <th class="px-4 py-2">Kills T4</th>
              </tr>
            </thead>
            <tbody>
              <?php foreach ($rows as $r) : ?>
                <tr class="border-b border-gray-700 hover:bg-gray-700/50">
                  <td class="px-4 py-2"><?= htmlspecialchars($r["Goal%"]) ?></td>
                  <td class="px-4 py-2 font-semibold text-indigo-400"><?= htmlspecialchars($r["Name"]) ?></td>
                  <td class="px-4 py-2"><?= htmlspecialchars($r["GovernorId"]) ?></td>
                  <td class="px-4 py-2"><?= htmlspecialchars($r["Killpoints"]) ?></td>
                  <td class="px-4 py-2"><?= htmlspecialchars($r["Deads"]) ?></td>
                  <td class="px-4 py-2"><?= htmlspecialchars($r["Kills_t5"]) ?></td>
                  <td class="px-4 py-2"><?= htmlspecialchars($r["Kills_t4"]) ?></td>
                </tr>
              <?php endforeach; ?>
            </tbody>
          </table>
        </div>
      </div>

      <!-- Doughnut Chart (Inti Bumi) -->
      <div class="bg-gray-800/80 backdrop-blur-lg border border-gray-700 rounded-2xl shadow-xl p-6">
        <h2 class="text-2xl font-bold text-indigo-300 mb-4 text-center flex items-center justify-center gap-2">
          <i class="fa-solid fa-globe"></i> Killpoints (Core Style)
        </h2>
        <canvas id="kvkChart" height="250"></canvas>
      </div>

      <script>
        const ctx = document.getElementById('kvkChart').getContext('2d');
        const gradientCore = ctx.createRadialGradient(150, 125, 20, 150, 125, 150);
        gradientCore.addColorStop(0, 'rgba(255, 99, 71, 1)');
        gradientCore.addColorStop(0.4, 'rgba(255, 165, 0, 0.9)');
        gradientCore.addColorStop(1, 'rgba(255, 215, 0, 0.8)');

        new Chart(ctx, {
          type: 'doughnut',
          data: {
            labels: <?= json_encode(array_column($rows, "Name")) ?>,
            datasets: [{
              label: 'Killpoints',
              data: <?= json_encode(array_map(fn($v)=>floatval(str_replace([",","m","M","k","K"],"", $v)), array_column($rows,"Killpoints"))) ?>,
              backgroundColor: Array(<?= count($rows) ?>).fill(gradientCore),
              borderWidth: 2,
              borderColor: '#1f2937'
            }]
          },
          options: {
            responsive: true,
            cutout: '40%',
            plugins: {
              legend: { labels: { color: '#fff', font: { size: 14 } } }
            }
          }
        });
      </script>

    <?php endif; ?>
  </div>
</main>
</body>
</html>

© 2025