admin.html

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Admin Dashboard | RHF Store</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body class="bg-light">
  <div class="container mt-5">
    <!-- Login Section -->
    <div id="login-section" class="card mx-auto shadow" style="max-width: 450px;">
      <div class="card-body text-center p-5">
        <i class="fas fa-shield-alt fa-4x text-primary mb-4"></i>
        <h3 class="mb-4">Admin Login</h3>
        <form id="admin-login-form">
          <div class="mb-3">
            <input type="text" id="admin-username" class="form-control form-control-lg" placeholder="Username" value="admin" required>
          </div>
          <div class="mb-3">
            <input type="password" id="admin-password" class="form-control form-control-lg" placeholder="Password" required>
          </div>
          <button type="submit" class="btn btn-primary btn-lg w-100">Login</button>
          <p class="mt-3 text-muted small">Default password: rhfadmin2025</p>
        </form>
      </div>
    </div>

    <!-- Dashboard Section (Hidden Awalnya) -->
    <div id="dashboard-section" style="display: none;">
      <div class="d-flex">
        <div class="sidebar bg-dark text-white p-4" style="min-width: 250px;">
          <h4 class="text-center mb-5">RHF Admin Panel</h4>
          <a href="#produk" class="d-block text-white mb-3"><i class="fas fa-box"></i> Produk</a>
          <a href="#orders" class="d-block text-white mb-3"><i class="fas fa-shopping-cart"></i> Orders</a>
          <a href="#users" class="d-block text-white mb-3"><i class="fas fa-users"></i> Users</a>
          <button class="btn btn-danger w-100 mt-5" onclick="logoutAdmin()"><i class="fas fa-sign-out-alt"></i> Logout</button>
        </div>

        <div class="flex-grow-1 p-5">
          <h1 class="mb-5">Dashboard Admin</h1>

          <!-- Tambah Produk -->
          <div class="card mb-5 shadow">
            <div class="card-header bg-primary text-white">
              <h4><i class="fas fa-plus-circle"></i> Tambah Produk Baru</h4>
            </div>
            <div class="card-body">
              <form id="product-form" class="row g-3">
                <div class="col-md-6">
                  <input type="text" id="prod-name" class="form-control" placeholder="Nama Produk (misal: Diamond ML 86)" required>
                </div>
                <div class="col-md-6">
                  <input type="number" id="prod-price" class="form-control" placeholder="Harga (Rp)" required>
                </div>
                <div class="col-12">
                  <textarea id="prod-desc" class="form-control" rows="3" placeholder="Deskripsi produk"></textarea>
                </div>
                <div class="col-12">
                  <input type="url" id="prod-image" class="form-control" placeholder="URL Gambar (opsional)">
                </div>
                <div class="col-12">
                  <button type="submit" class="btn btn-success btn-lg">Tambah Produk</button>
                </div>
              </form>
            </div>
          </div>

          <!-- Table Produk -->
          <div class="card mb-5 shadow">
            <div class="card-header bg-primary text-white">
              <h4><i class="fas fa-list"></i> Daftar Produk</h4>
            </div>
            <div class="card-body">
              <div class="table-responsive">
                <table class="table table-striped table-hover" id="products-table">
                  <thead class="table-dark">
                    <tr>
                      <th>ID</th>
                      <th>Gambar</th>
                      <th>Nama</th>
                      <th>Harga</th>
                      <th>Deskripsi</th>
                      <th>Aksi</th>
                    </tr>
                  </thead>
                  <tbody>
                    <!-- Diisi JS -->
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <!-- Table Orders -->
          <div class="card mb-5 shadow">
            <div class="card-header bg-warning text-dark">
              <h4><i class="fas fa-receipt"></i> Daftar Orders / Pembeli</h4>
            </div>
            <div class="card-body">
              <div class="table-responsive">
                <table class="table table-striped" id="orders-table">
                  <thead class="table-warning">
                    <tr><th>ID Order</th><th>User</th><th>Produk</th><th>Waktu</th><th>Status</th></tr>
                  </thead>
                  <tbody></tbody>
                </table>
              </div>
            </div>
          </div>

          <!-- Table Users -->
          <div class="card shadow">
            <div class="card-header bg-info text-white">
              <h4><i class="fas fa-user-friends"></i> Daftar User yang Login</h4>
            </div>
            <div class="card-body">
              <div class="table-responsive">
                <table class="table table-striped" id="users-table">
                  <thead class="table-info">
                    <tr><th>ID</th><th>Email</th><th>Last Login</th></tr>
                  </thead>
                  <tbody></tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script type="module">
    import { fetchProducts, addProduct, deleteProduct, fetchOrders, fetchUsers, formatRupiah } from './utils.js';

    // Password Hash Benar untuk "rhfadmin2025"
    const ADMIN_USERNAME = 'admin';
    const ADMIN_PASSWORD_HASH = '96838f1ec895b1750fb6040b66e0a13acbc7037c6cba154f73e6141b3310eacc';

    async function hashPassword(password) {
      const encoder = new TextEncoder();
      const data = encoder.encode(password);
      const hash = await crypto.subtle.digest('SHA-256', data);
      return Array.from(new Uint8Array(hash)).map(b => b.toString(16).padStart(2, '0')).join('');
    }

    // Login Handler
    document.getElementById('admin-login-form').addEventListener('submit', async (e) => {
      e.preventDefault();
      const username = document.getElementById('admin-username').value.trim();
      const password = document.getElementById('admin-password').value;

      if (username !== ADMIN_USERNAME) return alert('Username salah!');

      const hashed = await hashPassword(password);
      if (hashed === ADMIN_PASSWORD_HASH) {
        document.getElementById('login-section').style.display = 'none';
        document.getElementById('dashboard-section').style.display = 'block';
        loadAdminData();
      } else {
        alert('Password salah! Coba lagi.');
      }
    });

    // Logout
    window.logoutAdmin = () => {
      document.getElementById('login-section').style.display = 'block';
      document.getElementById('dashboard-section').style.display = 'none';
    };

    // Load Semua Data
    async function loadAdminData() {
      try {
        // Produk
        let products = await fetchProducts();
        const prodBody = document.querySelector('#products-table tbody');
        prodBody.innerHTML = '';
        if (Object.keys(products).length === 0) {
          prodBody.innerHTML = '<tr><td colspan="6" class="text-center text-muted">Belum ada produk. Tambah di atas!</td></tr>';
        }
        for (let id in products) {
          const p = products[id];
          prodBody.innerHTML += `
            <tr>
              <td>${id.substring(0,10)}...</td>
              <td><img src="${p.image || 'https://via.placeholder.com/60'}" width="60" class="rounded"></td>
              <td>${p.name}</td>
              <td>${formatRupiah(p.price)}</td>
              <td>${p.description || '-'}</td>
              <td><button class="btn btn-danger btn-sm" onclick="deleteProd('${id}')"><i class="fas fa-trash"></i></button></td>
            </tr>`;
        }

        // Orders
        let orders = await fetchOrders();
        const orderBody = document.querySelector('#orders-table tbody');
        orderBody.innerHTML = '';
        if (Object.keys(orders).length === 0) {
          orderBody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">Belum ada order</td></tr>';
        }
        for (let id in orders) {
          const o = orders[id];
          orderBody.innerHTML += `<tr><td>\( {id.substring(0,10)}...</td><td> \){o.userId || 'Anonim'}</td><td>\( {o.productId}</td><td> \){o.timestamp || '-'}</td><td><span class="badge bg-success">Paid</span></td></tr>`;
        }

        // Users
        let users = await fetchUsers();
        const userBody = document.querySelector('#users-table tbody');
        userBody.innerHTML = '';
        if (Object.keys(users).length === 0) {
          userBody.innerHTML = '<tr><td colspan="3" class="text-center text-muted">Belum ada user login</td></tr>';
        }
        for (let id in users) {
          const u = users[id];
          userBody.innerHTML += `<tr><td>\( {id.substring(0,10)}...</td><td> \){u.email || '-'}</td><td>${u.lastLogin || '-'}</td></tr>`;
        }
      } catch (err) {
        alert('Gagal load data: ' + err.message);
        console.error(err);
      }
    }

    // Tambah Produk
    document.getElementById('product-form').addEventListener('submit', async (e) => {
      e.preventDefault();
      const product = {
        name: document.getElementById('prod-name').value.trim(),
        price: parseInt(document.getElementById('prod-price').value),
        description: document.getElementById('prod-desc').value.trim(),
        image: document.getElementById('prod-image').value.trim() || 'https://via.placeholder.com/400x300?text=Produk+Digital'
      };
      if (!product.name || !product.price) return alert('Nama & harga wajib!');
      try {
        await addProduct(product);
        alert('Produk berhasil ditambah!');
        document.getElementById('product-form').reset();
        loadAdminData();
      } catch (err) {
        alert('Gagal tambah: ' + err.message);
      }
    });

    // Hapus Produk
    window.deleteProd = async (id) => {
      if (confirm('Yakin hapus produk ini?')) {
        await deleteProduct(id);
        loadAdminData();
      }
    };
  </script>
</body>
</html>