307 lines
13 KiB
HTML
307 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html class="light" lang="en">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Robot Manager Account - Hệ thống quản lý</title>
|
|
<!-- Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"/>
|
|
<!-- Material Symbols -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap" rel="stylesheet"/>
|
|
<link rel="stylesheet" href="../css/main.css" />
|
|
<!-- Notiflix Notify -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notiflix@3.2.7/dist/notiflix-3.2.7.min.css" />
|
|
<script src="https://cdn.jsdelivr.net/npm/notiflix@3.2.7/dist/notiflix-aio-3.2.7.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-family: 'Material Symbols Outlined';
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
|
|
font-size: 1.25rem;
|
|
line-height: 1;
|
|
letter-spacing: normal;
|
|
text-transform: none;
|
|
display: inline-flex;
|
|
white-space: nowrap;
|
|
word-wrap: normal;
|
|
direction: ltr;
|
|
}
|
|
body { font-family: 'Inter', sans-serif; height: 100vh; overflow: hidden; }
|
|
h1, h2, h3, .brand-logo { font-family: 'Manrope', sans-serif; }
|
|
.modal-backdrop {
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease-in-out;
|
|
pointer-events: none;
|
|
}
|
|
.modal-backdrop.open {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
.modal-content {
|
|
transform: scale(0.95);
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
.modal-backdrop.open .modal-content {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.tree-label {
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
color: #64748b;
|
|
padding: 0 0.75rem;
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
|
|
.tree-branch {
|
|
margin-left: 0.75rem;
|
|
border-left: 1px dashed rgba(100, 116, 139, 0.5);
|
|
padding-left: 0.6rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
body.app-shell {
|
|
overflow: hidden;
|
|
}
|
|
|
|
#mobileMenuBtn,
|
|
#sidebarBackdrop {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
body.app-shell {
|
|
width: 100%;
|
|
min-height: 100dvh;
|
|
height: 100dvh;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
#mobileMenuBtn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#sidebarBackdrop {
|
|
display: block;
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 70;
|
|
background: rgba(15, 23, 42, 0.45);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.2s ease-in-out;
|
|
}
|
|
|
|
#appSidebar {
|
|
position: fixed;
|
|
inset: 0 auto 0 0;
|
|
height: 100dvh;
|
|
width: min(82vw, 16rem);
|
|
z-index: 80;
|
|
transform: translateX(-100%);
|
|
transition: transform 0.2s ease-in-out;
|
|
box-shadow: 0 20px 45px rgba(15, 23, 42, 0.35);
|
|
}
|
|
|
|
body.mobile-nav-open #sidebarBackdrop {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
body.mobile-nav-open #appSidebar {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
#appMain {
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: 100dvh;
|
|
}
|
|
|
|
#appMain > header {
|
|
padding-left: 0.75rem;
|
|
padding-right: 0.75rem;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.topbar-actions {
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
#profileBtn {
|
|
padding: 0.4rem 0.55rem;
|
|
}
|
|
|
|
#profileBtn .profile-meta {
|
|
display: none;
|
|
}
|
|
|
|
.dashboard-header,
|
|
.page-header,
|
|
.page-filters,
|
|
.users-controls {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.page-filters > div,
|
|
.users-controls > div,
|
|
.users-controls select {
|
|
width: 100%;
|
|
}
|
|
|
|
.dashboard-actions,
|
|
.page-header button,
|
|
.page-header > button {
|
|
width: 100%;
|
|
}
|
|
|
|
.dashboard-stats,
|
|
.apps-stats {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.table-wrap {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.table-wrap table {
|
|
min-width: 700px;
|
|
}
|
|
|
|
.page-pager {
|
|
gap: 0.5rem;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.modal-backdrop {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.modal-backdrop .modal-content {
|
|
width: calc(100% - 1rem);
|
|
max-height: min(88dvh, 700px);
|
|
margin: 0.5rem;
|
|
overflow-y: auto;
|
|
border-radius: 0.9rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.dashboard-stats,
|
|
.apps-stats {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="app-shell bg-background text-on-surface antialiased flex h-screen w-screen">
|
|
<!-- SideNavBar -->
|
|
<aside id="appSidebar" class="h-screen w-56 flex flex-col bg-slate-100 dark:bg-slate-900 font-manrope text-sm font-medium border-r border-outline-variant/10 shrink-0">
|
|
<div class="flex flex-col h-full py-6">
|
|
<!-- Header -->
|
|
<div class="px-6 mb-8">
|
|
<div class="text-lg font-black text-slate-900 dark:text-slate-50 tracking-tight leading-none">Robot Account</div>
|
|
<div class="text-[10px] uppercase tracking-widest text-on-surface-variant mt-1.5 font-bold">Admin Console</div>
|
|
</div>
|
|
<!-- Primary Nav -->
|
|
<nav class="flex-1 px-3 space-y-4">
|
|
<div>
|
|
<div class="tree-label">Tài khoản</div>
|
|
<div class="tree-branch">
|
|
<a href="#dashboard" data-nav="dashboard" class="flex items-center gap-3 px-3 py-2 border-l-4 border-blue-600 bg-slate-200/80 dark:bg-slate-800 text-slate-900 dark:text-slate-50 font-bold group transition-all cursor-pointer rounded-r-lg">
|
|
<span class="material-symbols-outlined">dashboard</span>
|
|
<span>Tổng quan</span>
|
|
</a>
|
|
<a href="#applications" data-nav="applications" class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 hover:bg-slate-200/50 transition-all group cursor-pointer rounded-r-lg">
|
|
<span class="material-symbols-outlined">apps</span>
|
|
<span>Ứng dụng</span>
|
|
</a>
|
|
<a href="#accounts" data-nav="accounts" class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 hover:bg-slate-200/50 transition-all group cursor-pointer rounded-r-lg">
|
|
<span class="material-symbols-outlined">manage_accounts</span>
|
|
<span>Tài khoản</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="tree-label">Quản lý tài sản</div>
|
|
<div class="tree-branch">
|
|
<a href="#assets" data-nav="assets" class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 hover:bg-slate-200/50 transition-all group cursor-pointer rounded-r-lg">
|
|
<span class="material-symbols-outlined">inventory_2</span>
|
|
<span>Tài sản</span>
|
|
</a>
|
|
<a href="#asset-borrows" data-nav="asset-borrows" class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 hover:bg-slate-200/50 transition-all group cursor-pointer rounded-r-lg">
|
|
<span class="material-symbols-outlined">assignment_returned</span>
|
|
<span>Mượn/Trả tài sản</span>
|
|
</a>
|
|
<a href="#asset-departments" data-nav="asset-departments" class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 hover:bg-slate-200/50 transition-all group cursor-pointer rounded-r-lg">
|
|
<span class="material-symbols-outlined">apartment</span>
|
|
<span> Phòng Ban</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="usersSection" class="pt-2 border-t border-outline-variant/10" style="display: none;">
|
|
<a id="usersNav" href="#users" data-nav="users" class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 hover:bg-slate-200/50 transition-all group cursor-pointer rounded-lg" style="display: none;">
|
|
<span class="material-symbols-outlined">people</span>
|
|
<span>Người dùng (Quản trị)</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
<!-- Footer -->
|
|
<div class="px-6 pt-4 border-t border-outline-variant/10">
|
|
<div class="text-[10px] font-bold text-on-surface-variant/40 uppercase tracking-widest">v1.0.0</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<button id="sidebarBackdrop" type="button" aria-label="Đóng menu điều hướng"></button>
|
|
|
|
<!-- Main Content -->
|
|
<main id="appMain" class="flex-1 flex flex-col h-screen min-w-0">
|
|
<!-- TopAppBar -->
|
|
<header class="h-14 flex items-center justify-between px-6 bg-slate-50/80 dark:bg-slate-950/80 backdrop-blur-xl border-b border-outline-variant/10 shrink-0">
|
|
<div class="flex items-center gap-4 flex-1">
|
|
<button id="mobileMenuBtn" type="button" class="p-2 rounded-lg text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" aria-label="Mở menu điều hướng" aria-controls="appSidebar" aria-expanded="false">
|
|
<span class="material-symbols-outlined">menu</span>
|
|
</button>
|
|
</div>
|
|
<div class="topbar-actions flex items-center gap-4">
|
|
<button id="pendingAssetRequestsBtn" type="button" class="hidden relative flex items-center gap-2 px-3 py-2 rounded-lg border border-amber-200 bg-amber-50 hover:bg-amber-100 text-amber-800 transition-colors" title="Đơn chờ xử lý">
|
|
<span class="material-symbols-outlined text-base">notifications_active</span>
|
|
<span class="text-xs font-bold">Đơn chờ</span>
|
|
<span id="pendingAssetRequestsBadge" class="hidden absolute -top-2.5 -right-2.5 min-w-[22px] h-[22px] px-1.5 rounded-full bg-red-600 text-white text-xs font-extrabold leading-[22px] text-center ring-2 ring-white">0</span>
|
|
</button>
|
|
<button id="profileBtn" type="button" class="profile-btn flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors" title="Sửa hồ sơ">
|
|
<span class="material-symbols-outlined text-slate-600 dark:text-slate-400">account_circle</span>
|
|
<div class="profile-meta flex flex-col">
|
|
<span id="accountUsername" class="text-xs font-semibold text-slate-900 dark:text-slate-50">Tài khoản người dùng</span>
|
|
<span id="accountRole" class="text-[10px] text-slate-500 dark:text-slate-400">Quản trị viên</span>
|
|
</div>
|
|
</button>
|
|
<button id="logoutBtn" class="p-2 rounded-lg text-slate-600 dark:text-slate-300 hover:bg-red-100 dark:hover:bg-red-950 hover:text-red-700 dark:hover:text-red-300 transition-colors" title="Đăng xuất">
|
|
<span class="material-symbols-outlined">logout</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content Area -->
|
|
<div id="mainContent" class="flex-1 overflow-hidden">
|
|
<!-- Content will be rendered here by JavaScript -->
|
|
</div>
|
|
</main>
|
|
|
|
<script src="../js/app.js?v=20260424-1"></script>
|
|
</body>
|
|
</html>
|