dashboard.html

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Dasbor Admin — Perpustakaan Nusantara</title>
  <link rel="stylesheet" href="style.css" />
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet" />
</head>
<body class="dashboard-page">

  <!-- Sidebar -->
  <aside class="sidebar">
    <div class="sidebar-brand">
      <span class="logo-icon">📚</span>
      <span class="logo-text">Nusantara</span>
    </div>
    <nav class="sidebar-nav">
      <div class="nav-group-label">Peminjaman</div>
      <a href="#" class="nav-item active" data-section="semua" data-page="peminjaman">
        <span class="nav-icon">📋</span> Semua Data
      </a>
      <a href="#" class="nav-item" data-section="menunggu" data-page="peminjaman">
        <span class="nav-icon">⏳</span> Menunggu
      </a>
      <a href="#" class="nav-item" data-section="dipinjam" data-page="peminjaman">
        <span class="nav-icon">📖</span> Dipinjam
      </a>
      <a href="#" class="nav-item" data-section="dikembalikan" data-page="peminjaman">
        <span class="nav-icon">✅</span> Dikembalikan
      </a>
      <div class="nav-group-label" style="margin-top:16px">Absensi</div>
      <a href="#" class="nav-item" data-section="absensi-hari-ini" data-page="absensi">
        <span class="nav-icon">🪪</span> Hari Ini
      </a>
      <a href="#" class="nav-item" data-section="absensi-semua" data-page="absensi">
        <span class="nav-icon">📅</span> Semua Absensi
      </a>
    </nav>
    <div class="sidebar-bottom">
      <button class="btn-logout" id="logoutBtn">⏻ Logout</button>
    </div>
  </aside>

  <!-- Main -->
  <div class="dash-main">

    <!-- Top bar -->
    <header class="dash-header">
      <div class="dash-header-left">
        <button class="sidebar-toggle" id="sidebarToggle">☰</button>
        <div>
          <h2 class="dash-title" id="sectionTitle">Semua Data Peminjaman</h2>
          <p class="dash-sub">Kelola seluruh pengajuan peminjaman buku</p>
        </div>
      </div>
      <div class="dash-header-right">
        <div class="search-wrap">
          <span class="search-icon">🔍</span>
          <input type="text" id="searchInput" placeholder="Cari nama / judul buku..." />
        </div>
        <div class="admin-badge">
          <span class="admin-avatar">A</span>
          <span>Admin</span>
        </div>
        <button class="btn-header-logout" id="logoutBtnHeader">⏻ Logout</button>
      </div>
    </header>

    <!-- Stats -->
    <section class="stats-row">
      <div class="stat-card" data-filter="semua">
        <div class="stat-num" id="statTotal">0</div>
        <div class="stat-label">Total Pengajuan</div>
        <div class="stat-bar" style="background:var(--accent)"></div>
      </div>
      <div class="stat-card" data-filter="menunggu">
        <div class="stat-num" id="statMenunggu">0</div>
        <div class="stat-label">Menunggu</div>
        <div class="stat-bar" style="background:#f59e0b"></div>
      </div>
      <div class="stat-card" data-filter="dipinjam">
        <div class="stat-num" id="statDipinjam">0</div>
        <div class="stat-label">Dipinjam</div>
        <div class="stat-bar" style="background:#3b82f6"></div>
      </div>
      <div class="stat-card" data-filter="dikembalikan">
        <div class="stat-num" id="statDikembalikan">0</div>
        <div class="stat-label">Dikembalikan</div>
        <div class="stat-bar" style="background:#10b981"></div>
      </div>
    </section>

    <!-- Table area -->
    <section class="table-section">
      <div class="table-toolbar">
        <span class="table-count" id="tableCount">0 data</span>
        <button class="btn-export" id="exportBtn">⬇ Ekspor CSV</button>
      </div>

      <div class="table-wrap">
        <table class="data-table" id="dataTable">
          <thead>
            <tr>
              <th>#</th>
              <th>Nama</th>
              <th>Kelas</th>
              <th>ID Buku</th>
              <th>Kategori</th>
              <th>Tgl Pinjam</th>
              <th>Tgl Kembali</th>
              <th>Status</th>
              <th>Aksi</th>
            </tr>
          </thead>
          <tbody id="tableBody">
          </tbody>
        </table>
        <div class="empty-state" id="emptyState">
          <div class="empty-icon">📭</div>
          <p>Belum ada data pengajuan.</p>
        </div>
      </div>
    </section>

    <!-- ═══ ABSENSI SECTION ═══ -->
    <section class="table-section abs-section" id="absensiSection">
      <div class="abs-stats-row">
        <div class="abs-stat">
          <span class="abs-stat-num" id="absTotalHariIni">0</span>
          <span class="abs-stat-label">Pengunjung Hari Ini</span>
        </div>
        <div class="abs-stat">
          <span class="abs-stat-num" id="absTotalAll">0</span>
          <span class="abs-stat-label">Total Keseluruhan</span>
        </div>
        <div class="abs-stat">
          <span class="abs-stat-num" id="absTotalSiswa">0</span>
          <span class="abs-stat-label">Siswa (Hari Ini)</span>
        </div>
        <div class="abs-stat">
          <span class="abs-stat-num" id="absTotalGuru">0</span>
          <span class="abs-stat-label">Guru/Staff (Hari Ini)</span>
        </div>
      </div>

      <div class="table-toolbar" style="margin-top:20px">
        <div style="display:flex;gap:10px;align-items:center">
          <span class="table-count" id="absTableCount">0 data</span>
          <input type="date" id="absFilterDate" class="abs-date-filter" title="Filter tanggal" />
          <button class="btn-export" id="absFilterClear" style="display:none">✕ Reset</button>
        </div>
        <button class="btn-export" id="exportAbsBtn">⬇ Ekspor CSV</button>
      </div>

      <div class="table-wrap">
        <table class="data-table" id="absTable">
          <thead>
            <tr>
              <th>#</th>
              <th>Nama</th>
              <th>Tujuan</th>
              <th>Tanggal</th>
              <th>Jam Masuk</th>
              <th>Jam Keluar</th>
              <th>Aksi</th>
            </tr>
          </thead>
          <tbody id="absTableBody"></tbody>
        </table>
        <div class="empty-state" id="absEmptyState">
          <div class="empty-icon">🪪</div>
          <p>Belum ada data absensi.</p>
        </div>
      </div>
    </section>
  </div>

  <!-- Edit Absensi Modal -->
  <div class="modal-overlay" id="absEditOverlay">
    <div class="modal-card">
      <div class="modal-header">
        <h3>Edit Data Absensi</h3>
        <button class="modal-close" id="absEditClose">✕</button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="absEditId" />
        <div class="field-row">
          <div class="field-group">
            <label>Nama Lengkap</label>
            <input type="text" id="absEditNama" />
          </div>
          <div class="field-group">
            <label>NIS / NIP</label>
            <input type="text" id="absEditNis" />
          </div>
        </div>
        <div class="field-row">
          <div class="field-group">
            <label>Kelas / Jabatan</label>
            <input type="text" id="absEditKelas" />
          </div>
          <div class="field-group">
            <label>Kategori</label>
            <select id="absEditKategori">
              <option>Siswa</option><option>Guru</option>
              <option>Staff</option><option>Umum</option>
            </select>
          </div>
        </div>
        <div class="field-row">
          <div class="field-group">
            <label>Tujuan Kunjungan</label>
            <select id="absEditTujuan">
              <option>Baca Buku</option><option>Pinjam Buku</option>
              <option>Belajar</option><option>Internet</option><option>Lainnya</option>
            </select>
          </div>
          <div class="field-group">
            <label>Tanggal</label>
            <input type="date" id="absEditTgl" />
          </div>
        </div>
        <div class="field-row">
          <div class="field-group">
            <label>Jam Masuk</label>
            <input type="time" id="absEditJamMasuk" />
          </div>
          <div class="field-group">
            <label>Jam Keluar</label>
            <input type="time" id="absEditJamKeluar" />
          </div>
        </div>
        <div class="field-group">
          <label>Catatan</label>
          <textarea id="absEditCatatan" rows="2"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn-cancel" id="absEditCancel">Batal</button>
        <button class="btn-submit" id="absEditSave">Simpan →</button>
      </div>
    </div>
  </div>

  <!-- Delete Absensi Confirm -->
  <div class="modal-overlay" id="absDeleteOverlay">
    <div class="modal-card small">
      <div class="modal-header">
        <h3>Hapus Absensi</h3>
        <button class="modal-close" id="absDeleteClose">✕</button>
      </div>
      <div class="modal-body center">
        <div class="delete-icon">🗑️</div>
        <p>Hapus data absensi atas nama<br><strong id="absDeleteNama"></strong>?</p>
      </div>
      <div class="modal-footer">
        <button class="btn-cancel" id="absDeleteCancel">Batal</button>
        <button class="btn-danger" id="absDeleteConfirm">Ya, Hapus</button>
      </div>
    </div>
  </div>
  <div class="modal-overlay" id="modalOverlay">
    <div class="modal-card">
      <div class="modal-header">
        <h3>Edit Data Peminjaman</h3>
        <button class="modal-close" id="modalClose">✕</button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="editId" />

        <div class="field-row">
          <div class="field-group">
            <label>Nama Peminjam</label>
            <input type="text" id="editNama" />
          </div>
          <div class="field-group">
            <label>Kelas / Instansi</label>
            <input type="text" id="editKelas" />
          </div>
        </div>

        <div class="field-group">
          <label>ID Buku</label>
          <input type="text" id="editIdBuku" placeholder="Contoh: BK-0042" />
        </div>

        <div class="field-group">
          <label>Kategori</label>
            <select id="editKategori">
              <option>Fiksi</option>
              <option>Non-Fiksi</option>
              <option>Ilmu Pengetahuan</option>
              <option>Sejarah</option>
              <option>Teknologi</option>
              <option>Seni & Budaya</option>
              <option>Lainnya</option>
            </select>
          </div>
        </div>

        <div class="field-row">
          <div class="field-group">
            <label>Tanggal Pinjam</label>
            <input type="date" id="editTglPinjam" />
          </div>
          <div class="field-group">
            <label>Tanggal Kembali</label>
            <input type="date" id="editTglKembali" />
          </div>
        </div>

        <div class="field-group">
          <label>Status</label>
          <select id="editStatus">
            <option value="menunggu">⏳ Menunggu</option>
            <option value="dipinjam">📖 Dipinjam</option>
            <option value="dikembalikan">✅ Dikembalikan</option>
          </select>
        </div>

        <div class="field-group">
          <label>Catatan</label>
          <textarea id="editCatatan" rows="2"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn-cancel" id="cancelEdit">Batal</button>
        <button class="btn-submit" id="saveEdit">Simpan Perubahan →</button>
      </div>
    </div>
  </div>

  <!-- Delete Confirm -->
  <div class="modal-overlay" id="deleteOverlay">
    <div class="modal-card small">
      <div class="modal-header">
        <h3>Hapus Data</h3>
        <button class="modal-close" id="deleteClose">✕</button>
      </div>
      <div class="modal-body center">
        <div class="delete-icon">🗑️</div>
        <p>Yakin ingin menghapus data peminjaman ini?<br><strong id="deleteNama"></strong></p>
      </div>
      <div class="modal-footer">
        <button class="btn-cancel" id="cancelDelete">Batal</button>
        <button class="btn-danger" id="confirmDelete">Ya, Hapus</button>
      </div>
    </div>
  </div>

  <!-- Toast -->
  <div class="toast" id="dashToast">
    <span class="toast-icon" id="dashToastIcon">✓</span>
    <span class="toast-msg" id="dashToastMsg">Berhasil!</span>
  </div>

  <script src="script.js"></script>
</body>
</html>