316 lines
14 KiB
HTML
316 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard Admin - Lost & Found</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<nav class="navbar">
|
|
<div class="navbar-brand">🔍 Lost & Found</div>
|
|
<div class="navbar-menu">
|
|
<div class="user-info">
|
|
<div class="user-avatar" id="userAvatar">A</div>
|
|
<span id="userName">Admin</span>
|
|
<span class="user-role badge-danger">Admin</span>
|
|
</div>
|
|
<button class="btn-logout" onclick="logout()">Logout</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
<div class="page-header">
|
|
<h1>Dashboard Admin</h1>
|
|
<p>Kelola sistem Lost & Found</p>
|
|
</div>
|
|
|
|
<div class="stats-grid stats-grid-4">
|
|
<div class="stat-card">
|
|
<h3>Total User</h3>
|
|
<div class="stat-number" id="statTotalUsers">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Total Barang</h3>
|
|
<div class="stat-number" id="statTotalItems">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Total Klaim</h3>
|
|
<div class="stat-number" id="statTotalClaims">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Di Arsip</h3>
|
|
<div class="stat-number" id="statTotalArchive">0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tabs">
|
|
<button class="tab-btn active" onclick="switchTab('users')">👥 Kelola User</button>
|
|
<button class="tab-btn" onclick="switchTab('categories')">🏷️ Kategori</button>
|
|
<button class="tab-btn" onclick="switchTab('reports')">📊 Laporan</button>
|
|
<button class="tab-btn" onclick="switchTab('audit')">🔍 Audit Log</button>
|
|
</div>
|
|
|
|
<!-- Tab: Kelola User -->
|
|
<div id="usersTab" class="tab-content active">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">Daftar User</h2>
|
|
<button class="btn btn-primary" onclick="openAddUserModal()">+ Tambah User</button>
|
|
</div>
|
|
|
|
<div class="search-box">
|
|
<input type="text" class="search-input" placeholder="Cari user..." id="searchUsers">
|
|
<select class="filter-select" id="roleFilter">
|
|
<option value="">Semua Role</option>
|
|
<option value="user">User</option>
|
|
<option value="manager">Manager</option>
|
|
<option value="admin">Admin</option>
|
|
</select>
|
|
<select class="filter-select" id="statusFilter">
|
|
<option value="">Semua Status</option>
|
|
<option value="active">Active</option>
|
|
<option value="blocked">Blocked</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="table-container">
|
|
<table class="data-table" id="usersTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Nama</th>
|
|
<th>Email</th>
|
|
<th>NRP</th>
|
|
<th>Role</th>
|
|
<th>Status</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="usersTableBody"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab: Kategori -->
|
|
<div id="categoriesTab" class="tab-content">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">Kelola Kategori</h2>
|
|
<button class="btn btn-primary" onclick="openAddCategoryModal()">+ Tambah Kategori</button>
|
|
</div>
|
|
|
|
<div class="categories-grid" id="categoriesGrid"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab: Laporan -->
|
|
<div id="reportsTab" class="tab-content">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">Export Laporan</h2>
|
|
</div>
|
|
|
|
<div class="report-section">
|
|
<div class="report-filters">
|
|
<h3>Filter Laporan</h3>
|
|
<div class="form-group">
|
|
<label>Periode</label>
|
|
<select id="reportPeriod">
|
|
<option value="month">Bulan Ini</option>
|
|
<option value="semester">Semester Ini</option>
|
|
<option value="year">Tahun Ini</option>
|
|
<option value="custom">Custom Range</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group" id="customDateRange" style="display: none;">
|
|
<label>Tanggal Mulai</label>
|
|
<input type="date" id="reportStartDate">
|
|
<label>Tanggal Akhir</label>
|
|
<input type="date" id="reportEndDate">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Tipe Laporan</label>
|
|
<select id="reportType">
|
|
<option value="all">Semua Data</option>
|
|
<option value="items">Barang Ditemukan</option>
|
|
<option value="lost">Barang Hilang</option>
|
|
<option value="claims">Klaim</option>
|
|
<option value="archive">Arsip</option>
|
|
</select>
|
|
</div>
|
|
<div class="report-actions">
|
|
<button class="btn btn-success" onclick="exportReport('pdf')">📄 Export PDF</button>
|
|
<button class="btn btn-success" onclick="exportReport('excel')">📊 Export Excel</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="report-preview" id="reportPreview">
|
|
<h3>Preview Laporan</h3>
|
|
<div class="report-stats">
|
|
<div class="report-stat-item">
|
|
<strong>Total Barang:</strong>
|
|
<span id="previewTotalItems">-</span>
|
|
</div>
|
|
<div class="report-stat-item">
|
|
<strong>Diklaim:</strong>
|
|
<span id="previewClaimed">-</span>
|
|
</div>
|
|
<div class="report-stat-item">
|
|
<strong>Expired:</strong>
|
|
<span id="previewExpired">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab: Audit Log -->
|
|
<div id="auditTab" class="tab-content">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">Audit Log</h2>
|
|
</div>
|
|
|
|
<div class="search-box">
|
|
<input type="text" class="search-input" placeholder="Cari log..." id="searchAudit">
|
|
<select class="filter-select" id="actionFilter">
|
|
<option value="">Semua Aksi</option>
|
|
<option value="create">Create</option>
|
|
<option value="update">Update</option>
|
|
<option value="delete">Delete</option>
|
|
<option value="verify">Verify</option>
|
|
</select>
|
|
<input type="date" class="filter-select" id="dateFilter">
|
|
</div>
|
|
|
|
<div class="table-container">
|
|
<table class="data-table" id="auditTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Waktu</th>
|
|
<th>User</th>
|
|
<th>Aksi</th>
|
|
<th>Detail</th>
|
|
<th>IP Address</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="auditTableBody"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Add User -->
|
|
<div id="addUserModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">Tambah User</h3>
|
|
<button class="close-btn" onclick="closeModal('addUserModal')">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="addUserForm">
|
|
<div class="form-group">
|
|
<label>Nama Lengkap *</label>
|
|
<input type="text" name="name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Email *</label>
|
|
<input type="email" name="email" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>NRP *</label>
|
|
<input type="text" name="nrp" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>No. Telepon *</label>
|
|
<input type="tel" name="phone" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Role *</label>
|
|
<select name="role" required>
|
|
<option value="user">User</option>
|
|
<option value="manager">Manager</option>
|
|
<option value="admin">Admin</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Password *</label>
|
|
<input type="password" name="password" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" style="width: 100%;">Tambah User</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Edit User -->
|
|
<div id="editUserModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">Edit User</h3>
|
|
<button class="close-btn" onclick="closeModal('editUserModal')">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="editUserForm">
|
|
<input type="hidden" name="user_id">
|
|
<div class="form-group">
|
|
<label>Nama Lengkap *</label>
|
|
<input type="text" name="name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Email *</label>
|
|
<input type="email" name="email" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>NRP *</label>
|
|
<input type="text" name="nrp" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>No. Telepon *</label>
|
|
<input type="tel" name="phone" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Role *</label>
|
|
<select name="role" required>
|
|
<option value="user">User</option>
|
|
<option value="manager">Manager</option>
|
|
<option value="admin">Admin</option>
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" style="width: 100%;">Update User</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Add Category -->
|
|
<div id="addCategoryModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">Tambah Kategori</h3>
|
|
<button class="close-btn" onclick="closeModal('addCategoryModal')">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="addCategoryForm">
|
|
<div class="form-group">
|
|
<label>Nama Kategori *</label>
|
|
<input type="text" name="name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Deskripsi</label>
|
|
<textarea name="description"></textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" style="width: 100%;">Tambah Kategori</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- REFACTORED: Update script references -->
|
|
<script src="js/main.js"></script>
|
|
<script src="js/admin.js"></script>
|
|
</body>
|
|
</html> |