253 lines
11 KiB
HTML
253 lines
11 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 Manager - 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">M</div>
|
|
<span id="userName">Manager</span>
|
|
<span class="user-role">Manager</span>
|
|
</div>
|
|
<button class="btn-logout" onclick="logout()">Logout</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
<div class="page-header">
|
|
<h1>Dashboard Manager</h1>
|
|
<p>Kelola barang temuan dan verifikasi klaim</p>
|
|
</div>
|
|
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<h3>Total Barang</h3>
|
|
<div class="stat-number" id="statTotalItems">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Pending Claim</h3>
|
|
<div class="stat-number stat-warning" id="statPendingClaims">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Verified</h3>
|
|
<div class="stat-number stat-success" id="statVerified">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Expired</h3>
|
|
<div class="stat-number stat-danger" id="statExpired">0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tabs">
|
|
<button class="tab-btn active" onclick="switchTab('items')">📦 Kelola Barang</button>
|
|
<button class="tab-btn" onclick="switchTab('claims')">🤝 Verifikasi Klaim</button>
|
|
<button class="tab-btn" onclick="switchTab('lost')">😢 Barang Hilang</button>
|
|
<button class="tab-btn" onclick="switchTab('archive')">📂 Arsip</button>
|
|
</div>
|
|
|
|
<!-- Tab: Kelola Barang -->
|
|
<div id="itemsTab" class="tab-content active">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">Daftar Barang Ditemukan</h2>
|
|
<button class="btn btn-primary" onclick="openReportFoundModal()">+ Tambah Barang</button>
|
|
</div>
|
|
|
|
<div class="search-box">
|
|
<input type="text" class="search-input" placeholder="Cari barang..." id="searchItems">
|
|
<select class="filter-select" id="categoryFilterItems">
|
|
<option value="">Semua Kategori</option>
|
|
<option value="pakaian">Pakaian</option>
|
|
<option value="alat_makan">Alat Makan</option>
|
|
<option value="aksesoris">Aksesoris</option>
|
|
<option value="elektronik">Elektronik</option>
|
|
<option value="alat_tulis">Alat Tulis</option>
|
|
<option value="lainnya">Lainnya</option>
|
|
</select>
|
|
<select class="filter-select" id="statusFilterItems">
|
|
<option value="">Semua Status</option>
|
|
<option value="unclaimed">Unclaimed</option>
|
|
<option value="pending_claim">Pending Claim</option>
|
|
<option value="verified">Verified</option>
|
|
<option value="case_closed">Case Closed</option>
|
|
</select>
|
|
<select class="filter-select" id="sortItems">
|
|
<option value="date_desc">Terbaru</option>
|
|
<option value="date_asc">Terlama</option>
|
|
<option value="name_asc">Nama A-Z</option>
|
|
<option value="name_desc">Nama Z-A</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="items-grid" id="itemsGrid"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab: Verifikasi Klaim -->
|
|
<div id="claimsTab" class="tab-content">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">Daftar Klaim</h2>
|
|
</div>
|
|
|
|
<div class="search-box">
|
|
<input type="text" class="search-input" placeholder="Cari klaim..." id="searchClaims">
|
|
<select class="filter-select" id="statusFilterClaims">
|
|
<option value="">Semua Status</option>
|
|
<option value="pending">Pending</option>
|
|
<option value="approved">Approved</option>
|
|
<option value="rejected">Rejected</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="claims-list" id="claimsList"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab: Barang Hilang -->
|
|
<div id="lostTab" class="tab-content">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">Barang Hilang</h2>
|
|
</div>
|
|
|
|
<div class="search-box">
|
|
<input type="text" class="search-input" placeholder="Cari barang hilang..." id="searchLost">
|
|
<select class="filter-select" id="categoryFilterLost">
|
|
<option value="">Semua Kategori</option>
|
|
<option value="pakaian">Pakaian</option>
|
|
<option value="alat_makan">Alat Makan</option>
|
|
<option value="aksesoris">Aksesoris</option>
|
|
<option value="elektronik">Elektronik</option>
|
|
<option value="alat_tulis">Alat Tulis</option>
|
|
<option value="lainnya">Lainnya</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="items-grid" id="lostItemsGrid"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab: Arsip -->
|
|
<div id="archiveTab" class="tab-content">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">Arsip Barang</h2>
|
|
</div>
|
|
|
|
<div class="search-box">
|
|
<input type="text" class="search-input" placeholder="Cari arsip..." id="searchArchive">
|
|
<select class="filter-select" id="categoryFilterArchive">
|
|
<option value="">Semua Kategori</option>
|
|
<option value="pakaian">Pakaian</option>
|
|
<option value="alat_makan">Alat Makan</option>
|
|
<option value="aksesoris">Aksesoris</option>
|
|
<option value="elektronik">Elektronik</option>
|
|
<option value="alat_tulis">Alat Tulis</option>
|
|
<option value="lainnya">Lainnya</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="items-grid" id="archiveGrid"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Report Found -->
|
|
<div id="reportFoundModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">Tambah Barang Ditemukan</h3>
|
|
<button class="close-btn" onclick="closeModal('reportFoundModal')">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="reportFoundForm">
|
|
<div class="form-group">
|
|
<label>Foto Barang *</label>
|
|
<input type="file" name="photo" accept="image/*" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Nama Barang *</label>
|
|
<input type="text" name="name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Kategori *</label>
|
|
<select name="category" required>
|
|
<option value="">Pilih Kategori</option>
|
|
<option value="pakaian">Pakaian</option>
|
|
<option value="alat_makan">Alat Makan</option>
|
|
<option value="aksesoris">Aksesoris</option>
|
|
<option value="elektronik">Elektronik</option>
|
|
<option value="alat_tulis">Alat Tulis</option>
|
|
<option value="lainnya">Lainnya</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Lokasi Ditemukan *</label>
|
|
<input type="text" name="location" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Deskripsi Keunikan (Rahasia) *</label>
|
|
<textarea name="description" required placeholder="Ciri khusus untuk verifikasi..."></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Nama Pelapor *</label>
|
|
<input type="text" name="reporter_name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Kontak Pelapor *</label>
|
|
<input type="text" name="reporter_contact" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Tanggal Ditemukan *</label>
|
|
<input type="date" name="date_found" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" style="width: 100%;">Submit</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Detail Item -->
|
|
<div id="itemDetailModal" class="modal">
|
|
<div class="modal-content modal-large">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">Detail Barang</h3>
|
|
<button class="close-btn" onclick="closeModal('itemDetailModal')">×</button>
|
|
</div>
|
|
<div class="modal-body" id="itemDetailContent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Verify Claim -->
|
|
<div id="verifyClaimModal" class="modal">
|
|
<div class="modal-content modal-large">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">Verifikasi Klaim</h3>
|
|
<button class="close-btn" onclick="closeModal('verifyClaimModal')">×</button>
|
|
</div>
|
|
<div class="modal-body" id="verifyClaimContent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Match Items -->
|
|
<div id="matchItemsModal" class="modal">
|
|
<div class="modal-content modal-large">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">Cari Barang yang Mirip</h3>
|
|
<button class="close-btn" onclick="closeModal('matchItemsModal')">×</button>
|
|
</div>
|
|
<div class="modal-body" id="matchItemsContent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/main.js"></script>
|
|
<script src="js/dashboard_manager.js"></script>
|
|
</body>
|
|
</html> |