340 lines
16 KiB
PHP
340 lines
16 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Dashboard - Sistem Biometric Door">
|
|
<title>Dashboard - Sistem</title>
|
|
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
|
|
<link rel="stylesheet" href="{{ asset('css/dashboard.css') }}">
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
|
rel="stylesheet">
|
|
<script>if(localStorage.getItem('theme')==='light')document.documentElement.classList.add('light');</script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
@if(session('success'))
|
|
<div class="toast success show">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if($errors->any())
|
|
<div class="toast error show">
|
|
{{ $errors->first() }}
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Mobile Top Bar -->
|
|
<div class="mobile-topbar">
|
|
<div class="mobile-topbar-logo">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
|
|
</svg>
|
|
</div>
|
|
<span class="mobile-topbar-title">DASHBOARD</span>
|
|
<span class="mobile-topbar-page">Data Pengguna</span>
|
|
<button class="mobile-theme-btn" id="mobileThemeBtn" title="Ganti Tema">
|
|
<svg id="mobileThemeIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="5"/>
|
|
<line x1="12" y1="1" x2="12" y2="3"/>
|
|
<line x1="12" y1="21" x2="12" y2="23"/>
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
|
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
|
|
<line x1="1" y1="12" x2="3" y2="12"/>
|
|
<line x1="21" y1="12" x2="23" y2="12"/>
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
|
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mobile Bottom Navigation -->
|
|
<nav class="mobile-bottom-nav">
|
|
<a href="{{ route('dashboard') }}" class="mobile-nav-item active">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
|
|
<polyline points="9 22 9 12 15 12 15 22" />
|
|
</svg>
|
|
Dashboard
|
|
</a>
|
|
<a href="{{ route('input-data') }}" class="mobile-nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" />
|
|
<line x1="9" y1="3" x2="9" y2="21" />
|
|
</svg>
|
|
Input Data
|
|
</a>
|
|
<a href="{{ route('histori') }}" class="mobile-nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" />
|
|
<line x1="8" y1="9" x2="16" y2="9" />
|
|
<line x1="8" y1="13" x2="14" y2="13" />
|
|
<line x1="8" y1="17" x2="12" y2="17" />
|
|
</svg>
|
|
Histori
|
|
</a>
|
|
<form method="POST" action="{{ route('logout') }}" style="flex:1;display:contents">
|
|
@csrf
|
|
<button type="submit" class="mobile-nav-item logout-nav">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4" />
|
|
<polyline points="16 17 21 12 16 7" />
|
|
<line x1="21" y1="12" x2="9" y2="12" />
|
|
</svg>
|
|
Logout
|
|
</button>
|
|
</form>
|
|
</nav>
|
|
|
|
<div class="dashboard-layout">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="sidebar-logo">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
|
|
</svg>
|
|
</div>
|
|
<span class="sidebar-title">DASHBOARD</span>
|
|
</div>
|
|
|
|
<nav class="sidebar-nav">
|
|
<a href="{{ route('dashboard') }}" class="nav-item active">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
|
|
<polyline points="9 22 9 12 15 12 15 22" />
|
|
</svg>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
<a href="{{ route('input-data') }}" class="nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" />
|
|
<line x1="9" y1="3" x2="9" y2="21" />
|
|
</svg>
|
|
<span>Input Data</span>
|
|
</a>
|
|
<a href="{{ route('histori') }}" class="nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" />
|
|
<line x1="8" y1="9" x2="16" y2="9" />
|
|
<line x1="8" y1="13" x2="14" y2="13" />
|
|
<line x1="8" y1="17" x2="12" y2="17" />
|
|
</svg>
|
|
<span>Histori</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
<button class="theme-toggle-btn" id="themeToggleBtn" title="Ganti Tema">
|
|
<svg id="themeIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="5"/>
|
|
<line x1="12" y1="1" x2="12" y2="3"/>
|
|
<line x1="12" y1="21" x2="12" y2="23"/>
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
|
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
|
|
<line x1="1" y1="12" x2="3" y2="12"/>
|
|
<line x1="21" y1="12" x2="23" y2="12"/>
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
|
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
|
|
</svg>
|
|
<span id="themeLabel">Mode Terang</span>
|
|
<div class="theme-pill"></div>
|
|
</button>
|
|
<form method="POST" action="{{ route('logout') }}">
|
|
@csrf
|
|
<button type="submit" class="nav-item logout" style="background:none;border:none;width:100%;text-align:left;">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<polyline points="12 6 12 12 16 14" />
|
|
</svg>
|
|
<span>Logout</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<div class="content-wrapper">
|
|
<div class="page-header">
|
|
<h1 class="page-title">DASHBOARD</h1>
|
|
<p class="page-subtitle">Daftar pengguna yang telah terdaftar</p>
|
|
</div>
|
|
|
|
<div class="log-card">
|
|
<div class="log-card-header">Data Pengguna</div>
|
|
<div class="table-scroll-wrapper">
|
|
<table class="log-table" id="userTable">
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Nama</th>
|
|
<th>Email</th>
|
|
<th>Jenis Kelamin</th>
|
|
<th>Tanggal Lahir</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($users ?? [] as $user)
|
|
<tr>
|
|
<td>{{ $loop->iteration }}</td>
|
|
<td>{{ $user->name }}</td>
|
|
<td>{{ $user->email }}</td>
|
|
<td>{{ $user->gender }}</td>
|
|
<td>{{ $user->birth_date }}</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="5">Belum ada data pengguna</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="empty-state" id="emptyState" style="display:none;">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="48"
|
|
height="48">
|
|
<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
|
|
<circle cx="9" cy="7" r="4" />
|
|
<path d="M23 21v-2a4 4 0 00-3-3.87" />
|
|
<path d="M16 3.13a4 4 0 010 7.75" />
|
|
</svg>
|
|
<p>Belum ada data pengguna</p>
|
|
<a href="{{ route('input-data') }}" class="btn-submit"
|
|
style="margin-top:16px; font-size:0.82rem; padding:10px 28px;">+ Tambah Data</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Edit Modal -->
|
|
<div class="modal-overlay" id="editModal" style="display:none;">
|
|
<div class="modal-card">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title">Edit Data Pengguna</h2>
|
|
<button class="modal-close" onclick="closeEditModal()">×</button>
|
|
</div>
|
|
<form id="editForm" onsubmit="handleEditSave(event)">
|
|
<input type="hidden" id="editId">
|
|
<div class="form-group">
|
|
<label class="form-label">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
|
|
<circle cx="12" cy="7" r="4" />
|
|
</svg>
|
|
Nama
|
|
</label>
|
|
<input type="text" class="form-input" id="editNama" placeholder="Nama" required
|
|
style="max-width:100%">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="2" y="4" width="20" height="16" rx="2" />
|
|
<path d="M22 4L12 13L2 4" />
|
|
</svg>
|
|
Email
|
|
</label>
|
|
<input type="email" class="form-input" id="editEmail" placeholder="Email" required
|
|
style="max-width:100%">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Jenis Kelamin</label>
|
|
<select class="form-select" id="editGender" required style="max-width:100%">
|
|
<option value="" disabled>Pilih Jenis Kelamin</option>
|
|
<option value="laki-laki">Laki-laki</option>
|
|
<option value="perempuan">Perempuan</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Tanggal Lahir</label>
|
|
<div class="date-row" style="max-width:100%">
|
|
<select class="form-select" id="editDay" required></select>
|
|
<select class="form-select" id="editMonth" required>
|
|
<option value="" disabled>Bulan</option>
|
|
<option value="1">Januari</option>
|
|
<option value="2">Februari</option>
|
|
<option value="3">Maret</option>
|
|
<option value="4">April</option>
|
|
<option value="5">Mei</option>
|
|
<option value="6">Juni</option>
|
|
<option value="7">Juli</option>
|
|
<option value="8">Agustus</option>
|
|
<option value="9">September</option>
|
|
<option value="10">Oktober</option>
|
|
<option value="11">November</option>
|
|
<option value="12">Desember</option>
|
|
</select>
|
|
<select class="form-select" id="editYear" required></select>
|
|
</div>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn-cancel" onclick="closeEditModal()">Batal</button>
|
|
<button type="submit" class="btn-submit" style="margin:0;">SIMPAN</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Confirmation Modal -->
|
|
<div class="modal-overlay" id="deleteModal" style="display:none;">
|
|
<div class="modal-card modal-card-sm">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title">Hapus Data</h2>
|
|
<button class="modal-close" onclick="closeDeleteModal()">×</button>
|
|
</div>
|
|
<p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 24px;">
|
|
Apakah Anda yakin ingin menghapus data pengguna <strong id="deleteUserName"
|
|
style="color:var(--text-primary)"></strong>?
|
|
</p>
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn-cancel" onclick="closeDeleteModal()">Batal</button>
|
|
<button type="button" class="btn-danger" id="confirmDeleteBtn">HAPUS</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{{ asset('js/dashboard.js') }}" defer></script>
|
|
<script>
|
|
// ===== THEME TOGGLE =====
|
|
(function() {
|
|
const saved = localStorage.getItem('theme');
|
|
if (saved === 'light') document.documentElement.classList.add('light');
|
|
})();
|
|
|
|
function updateThemeUI() {
|
|
const isLight = document.documentElement.classList.contains('light');
|
|
const moonSvg = `<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>`;
|
|
const sunSvg = `<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>`;
|
|
const icon = document.getElementById('themeIcon');
|
|
const label = document.getElementById('themeLabel');
|
|
const mobileIcon = document.getElementById('mobileThemeIcon');
|
|
if (icon) icon.innerHTML = isLight ? moonSvg : sunSvg;
|
|
if (mobileIcon) mobileIcon.innerHTML = isLight ? moonSvg : sunSvg;
|
|
if (label) label.textContent = isLight ? 'Mode Gelap' : 'Mode Terang';
|
|
}
|
|
|
|
function toggleTheme() {
|
|
const html = document.documentElement;
|
|
html.classList.toggle('light');
|
|
localStorage.setItem('theme', html.classList.contains('light') ? 'light' : 'dark');
|
|
updateThemeUI();
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
updateThemeUI();
|
|
const btn = document.getElementById('themeToggleBtn');
|
|
const mobileBtn = document.getElementById('mobileThemeBtn');
|
|
if (btn) btn.addEventListener('click', toggleTheme);
|
|
if (mobileBtn) mobileBtn.addEventListener('click', toggleTheme);
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |