2026-10-26 00:10:07 -07:00
<!DOCTYPE html>
< html lang = "vi" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > DH-HIS | Quản Trị & Cấu Hình Hệ Thống Giao Ban</ title >
< link rel = "icon" type = "image/x-icon" href = "favicon.ico" >
< script src = "https://cdn.tailwindcss.com" ></ script >
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" >
< link rel = "stylesheet" href = "styles.css" >
</ head >
< body class = "bg-slate-100 text-slate-800 font-sans antialiased min-h-screen flex flex-col" >
<!-- TOP HEADER -->
< header class = "bg-gradient-to-r from-slate-900 via-indigo-950 to-slate-900 text-white shadow-lg sticky top-0 z-50" >
< div class = "max-w-7xl mx-auto px-4 sm:px-6 py-3.5 flex flex-wrap items-center justify-between gap-3" >
< div class = "flex items-center gap-3" >
< div class = "bg-indigo-600/30 p-2 rounded-xl border border-indigo-400/30 text-cyan-300" >
< i class = "fa-solid fa-sliders text-2xl" ></ i >
</ div >
< div >
< h1 class = "text-lg font-bold tracking-tight uppercase flex items-center gap-2" >
DH-HIS Giao Ban | Quản Trị Hệ Thống
< span class = "text-xs bg-indigo-500/30 text-indigo-200 border border-indigo-400/30 px-2 py-0.5 rounded-full font-mono" id = "appVersionBadge" > v1.0.0</ span >
</ h1 >
< p class = "text-xs text-slate-400" > Thiết lập kết nối CSDL, bảo mật mã hóa, kiểm tra cập nhật & theo dõi nhật ký</ p >
</ div >
</ div >
< div class = "flex items-center gap-2" >
< a href = "index.html?v=1.0.1" class = "bg-blue-600 hover:bg-blue-700 text-white text-xs font-semibold px-3 py-2 rounded-lg shadow-sm flex items-center gap-1.5 transition-all" >
< i class = "fa-solid fa-hospital-user" ></ i >
< span > Mở Báo Cáo Giao Ban</ span >
</ a >
</ div >
</ div >
</ header >
<!-- NAVIGATION TABS -->
< section class = "max-w-7xl mx-auto px-4 sm:px-6 mt-4 w-full" >
< div class = "flex border-b border-slate-200 gap-2 flex-wrap" >
< button class = "admin-tab active px-5 py-2.5 text-sm font-bold border-b-2 border-indigo-600 text-indigo-600 flex items-center gap-2 transition-all" data-tab = "tab-config" >
< i class = "fa-solid fa-database" ></ i >
< span > 1. Cấu Hình Kết Nối & CSDL</ span >
</ button >
< button class = "admin-tab px-5 py-2.5 text-sm font-bold border-b-2 border-transparent text-slate-500 hover:text-slate-800 flex items-center gap-2 transition-all" data-tab = "tab-update" >
< i class = "fa-solid fa-cloud-arrow-down" ></ i >
< span > 2. Cập Nhật Phiên Bản (Gitea)</ span >
</ button >
< button class = "admin-tab px-5 py-2.5 text-sm font-bold border-b-2 border-transparent text-slate-500 hover:text-slate-800 flex items-center gap-2 transition-all" data-tab = "tab-logs" >
< i class = "fa-solid fa-terminal" ></ i >
< span > 3. Nhật Ký Hoạt Động (Live Logs)</ span >
</ button >
</ div >
</ section >
<!-- MAIN CONTAINER -->
< main class = "max-w-7xl mx-auto px-4 sm:px-6 py-6 flex-1 w-full" >
<!-- ========================================== -->
<!-- TAB 1: CẤU HÌNH KẾT NỐI -->
<!-- ========================================== -->
< div id = "tab-config" class = "admin-content space-y-6" >
< div class = "grid grid-cols-1 lg:grid-cols-12 gap-6" >
<!-- Server & PostgreSQL Config Form -->
< div class = "lg:col-span-6 bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden" >
< div class = "px-5 py-4 bg-slate-50 border-b border-slate-200 flex items-center justify-between" >
< h2 class = "text-sm font-bold text-slate-800 flex items-center gap-2" >
< i class = "fa-solid fa-server text-indigo-600" ></ i >
< span > Cấu Hình Web Server & CSDL PostgreSQL</ span >
</ h2 >
< span class = "text-[11px] bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded font-bold" > Mã hóa AES-256</ span >
</ div >
< form id = "formConfig" class = "p-5 space-y-4 text-xs" >
<!-- Server Settings -->
< div class = "grid grid-cols-2 gap-3" >
< div >
< label class = "block font-semibold text-slate-700 mb-1" > Cổng Web (Port):</ label >
< input type = "number" id = "cfgPort" class = "w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 font-mono outline-none focus:ring-2 focus:ring-indigo-500 font-bold" value = "3000" >
</ div >
< div >
< label class = "block font-semibold text-slate-700 mb-1" > Đường dẫn quản trị:</ label >
< input type = "text" id = "cfgAdminPath" class = "w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 font-mono outline-none focus:ring-2 focus:ring-indigo-500" value = "/admin" >
</ div >
</ div >
<!-- PostgreSQL Settings -->
< div class = "border-t border-slate-200 pt-3 space-y-3" >
< div class = "font-bold text-slate-800 text-xs flex items-center gap-1.5" >
< i class = "fa-solid fa-database text-blue-600" ></ i > Thông tin máy chủ PostgreSQL:
</ div >
< div class = "grid grid-cols-3 gap-3" >
< div class = "col-span-2" >
< label class = "block font-medium text-slate-600 mb-1" > Địa chỉ IP / Host:</ label >
< input type = "text" id = "cfgDbHost" class = "w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 font-mono outline-none focus:ring-2 focus:ring-indigo-500 font-medium" value = "192.168.50.79" >
</ div >
< div >
< label class = "block font-medium text-slate-600 mb-1" > Port:</ label >
< input type = "number" id = "cfgDbPort" class = "w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 font-mono outline-none focus:ring-2 focus:ring-indigo-500 font-medium" value = "5437" >
</ div >
</ div >
< div class = "grid grid-cols-2 gap-3" >
< div >
< label class = "block font-medium text-slate-600 mb-1" > Người dùng (User):</ label >
< input type = "text" id = "cfgDbUser" class = "w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 font-mono outline-none focus:ring-2 focus:ring-indigo-500 font-medium" value = "postgres" >
</ div >
< div >
< label class = "block font-medium text-slate-600 mb-1 flex items-center justify-between" >
< span > Mật khẩu:</ span >
< button type = "button" id = "btnToggleDbPass" class = "text-[10px] text-indigo-600 hover:underline" > Hiện</ button >
</ label >
< input type = "password" id = "cfgDbPassword" placeholder = "•••••••• (Giữ nguyên hoặc nhập mới)" class = "w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 font-mono outline-none focus:ring-2 focus:ring-indigo-500 font-medium" >
</ div >
</ div >
< div >
< label class = "block font-medium text-slate-600 mb-1" > CSDL mặc định (Default DB):</ label >
< input type = "text" id = "cfgDbDefault" class = "w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 font-mono outline-none focus:ring-2 focus:ring-indigo-500 font-medium" value = "an_omon_full_04052026" >
</ div >
</ div >
<!-- Test Connection Button -->
< div class = "pt-2 flex items-center justify-between" >
< button type = "button" id = "btnTestConnection" class = "bg-slate-800 hover:bg-slate-900 text-white font-semibold py-2 px-3.5 rounded-lg flex items-center gap-1.5 transition-all" >
< i class = "fa-solid fa-bolt text-amber-400" ></ i >
< span > Thử Kết Nối (Test Connection)</ span >
</ button >
< div id = "testConnResult" class = "text-xs font-semibold" ></ div >
</ div >
<!-- Save Button -->
< div class = "pt-4 border-t border-slate-200 flex justify-end" >
< button type = "submit" id = "btnSaveConfig" class = "bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2.5 px-6 rounded-lg shadow-md flex items-center gap-2 transition-all text-xs" >
< i class = "fa-solid fa-floppy-disk" ></ i >
< span > Lưu Cấu Hình & Mã Hóa</ span >
</ button >
</ div >
</ form >
</ div >
<!-- Databases List Management -->
< div class = "lg:col-span-6 bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden flex flex-col" >
< div class = "px-5 py-4 bg-slate-50 border-b border-slate-200 flex items-center justify-between" >
< h2 class = "text-sm font-bold text-slate-800 flex items-center gap-2" >
< i class = "fa-solid fa-list text-blue-600" ></ i >
< span > Danh Sách CSDL Bệnh Viện (Dropdown)</ span >
</ h2 >
< button id = "btnAddDbRow" class = "bg-blue-50 text-blue-700 hover:bg-blue-100 border border-blue-200 px-2.5 py-1 rounded-lg text-xs font-bold flex items-center gap-1" >
< i class = "fa-solid fa-plus" ></ i > Thêm CSDL
</ button >
</ div >
< div class = "p-4 flex-1 overflow-y-auto" >
< table class = "w-full text-left text-xs border-collapse" >
< thead class = "bg-slate-100 text-slate-700 font-semibold border-b border-slate-200" >
< tr >
< th class = "py-2 px-2.5 w-44" > Tên CSDL (DB Name)</ th >
< th class = "py-2 px-2.5" > Tên Hiển Thị (Label)</ th >
< th class = "py-2 px-2 w-16 text-center" > Xóa</ th >
</ tr >
</ thead >
< tbody id = "bodyDbList" class = "divide-y divide-slate-200" >
<!-- Dynamically loaded -->
</ tbody >
</ table >
</ div >
< div class = "p-3 bg-amber-50/70 border-t border-amber-200 text-amber-800 text-[11px] leading-relaxed" >
< i class = "fa-solid fa-circle-info mr-1" ></ i > Các CSDL này sẽ hiển thị trong dropdown chọn CSDL ngoài trang báo cáo giao ban để người dùng chuyển đổi linh hoạt.
</ div >
</ div >
</ div >
</ div >
<!-- ========================================== -->
<!-- TAB 2: CẬP NHẬT PHIÊN BẢN (GITEA) -->
<!-- ========================================== -->
< div id = "tab-update" class = "admin-content hidden space-y-6" >
< div class = "grid grid-cols-1 lg:grid-cols-12 gap-6" >
<!-- Gitea Config -->
< div class = "lg:col-span-5 bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden" >
< div class = "px-5 py-4 bg-slate-50 border-b border-slate-200 flex items-center justify-between" >
< h2 class = "text-sm font-bold text-slate-800 flex items-center gap-2" >
< i class = "fa-solid fa-gear text-indigo-600" ></ i >
< span > Thiết Lập Gitea Package / Release</ span >
</ h2 >
</ div >
< form id = "formGiteaConfig" class = "p-5 space-y-3.5 text-xs" >
< div >
< label class = "block font-semibold text-slate-700 mb-1" > Gitea URL:</ label >
< input type = "text" id = "cfgGiteaUrl" class = "w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 font-mono outline-none focus:ring-2 focus:ring-indigo-500 font-medium" value = "https://i.dh-his.com" >
</ div >
< div class = "grid grid-cols-2 gap-3" >
< div >
< label class = "block font-semibold text-slate-700 mb-1" > Tổ chức / Owner:</ label >
2026-10-26 00:16:27 -07:00
< input type = "text" id = "cfgGiteaOwner" class = "w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 font-mono outline-none focus:ring-2 focus:ring-indigo-500" value = "ongtrieuhau" >
2026-10-26 00:10:07 -07:00
</ div >
< div >
< label class = "block font-semibold text-slate-700 mb-1" > Repository:</ label >
2026-10-26 00:16:27 -07:00
< input type = "text" id = "cfgGiteaRepo" class = "w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 font-mono outline-none focus:ring-2 focus:ring-indigo-500" value = "web-giao-ban" >
2026-10-26 00:10:07 -07:00
</ div >
</ div >
< div >
< label class = "block font-semibold text-slate-700 mb-1 flex items-center justify-between" >
< span > Personal Access Token (Để tải bản private):</ span >
< button type = "button" id = "btnToggleToken" class = "text-[10px] text-indigo-600 hover:underline" > Hiện</ button >
</ label >
< input type = "password" id = "cfgGiteaToken" placeholder = "•••••••• (Giữ nguyên hoặc nhập token mới)" class = "w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 font-mono outline-none focus:ring-2 focus:ring-indigo-500" >
</ div >
< div class = "pt-2 flex justify-end" >
< button type = "submit" class = "bg-slate-800 hover:bg-slate-900 text-white font-bold py-2 px-4 rounded-lg flex items-center gap-1.5 transition-all" >
< i class = "fa-solid fa-check" ></ i >
< span > Lưu Cấu Hình Gitea</ span >
</ button >
</ div >
</ form >
</ div >
<!-- Release Status & Action -->
< div class = "lg:col-span-7 bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden flex flex-col" >
< div class = "px-5 py-4 bg-slate-50 border-b border-slate-200 flex items-center justify-between" >
< h2 class = "text-sm font-bold text-slate-800 flex items-center gap-2" >
< i class = "fa-solid fa-code-compare text-blue-600" ></ i >
< span > Trạng Thái Phiên Bản & Tự Động Cập Nhật</ span >
</ h2 >
< button id = "btnCheckUpdate" class = "bg-indigo-600 hover:bg-indigo-700 text-white px-3.5 py-1.5 rounded-lg text-xs font-bold shadow-sm flex items-center gap-1.5 transition-all" >
< i class = "fa-solid fa-arrows-rotate" ></ i >
< span > Kiểm Tra Cập Nhật</ span >
</ button >
</ div >
< div class = "p-6 flex-1 space-y-4" >
< div class = "grid grid-cols-2 gap-4" >
< div class = "p-4 rounded-xl border border-slate-200 bg-slate-50" >
< div class = "text-xs text-slate-500 font-semibold" > Phiên Bản Đang Chạy:</ div >
< div class = "mt-1 text-2xl font-black text-slate-800" id = "currentVerDisplay" > v1.0.0</ div >
</ div >
< div class = "p-4 rounded-xl border border-indigo-200 bg-indigo-50/40" >
< div class = "text-xs text-indigo-700 font-semibold" > Phiên Bản Mới Nhất Trên Gitea:</ div >
< div class = "mt-1 text-2xl font-black text-indigo-700" id = "latestVerDisplay" > Đang kiểm tra...</ div >
</ div >
</ div >
< div id = "updateStatusBox" class = "p-4 rounded-xl border border-slate-200 bg-white" >
< div class = "font-bold text-xs text-slate-700 mb-1" id = "updateStatusTitle" > Nội dung phiên bản:</ div >
< div class = "text-xs text-slate-600 whitespace-pre-wrap leading-relaxed max-h-48 overflow-y-auto" id = "updateReleaseNotes" >
Bấm nút "Kiểm Tra Cập Nhật" để truy vấn phiên bản mới nhất từ Gitea.
</ div >
</ div >
<!-- Action Button Apply Update -->
< div id = "applyUpdateArea" class = "hidden p-4 rounded-xl bg-emerald-50 border border-emerald-200 flex items-center justify-between gap-3" >
< div >
< div class = "font-bold text-xs text-emerald-900" > Phát hiện bản cập nhật mới!</ div >
< div class = "text-[11px] text-emerald-700" id = "updateAssetInfo" > File: ...</ div >
</ div >
< button id = "btnApplyUpdate" class = "bg-emerald-600 hover:bg-emerald-700 text-white px-5 py-2.5 rounded-lg font-bold text-xs shadow-md flex items-center gap-2 transition-all" >
< i class = "fa-solid fa-download" ></ i >
< span > Tải & Cập Nhật Tự Động</ span >
</ button >
</ div >
</ div >
</ div >
</ div >
</ div >
<!-- ========================================== -->
<!-- TAB 3: NHẬT KÝ HOẠT ĐỘNG (LIVE LOGS) -->
<!-- ========================================== -->
< div id = "tab-logs" class = "admin-content hidden space-y-4" >
<!-- Toolbar Logs -->
< div class = "bg-white p-3.5 rounded-2xl shadow-sm border border-slate-200 flex flex-wrap items-center justify-between gap-3" >
< div class = "flex items-center gap-3 text-xs" >
< span class = "font-bold text-slate-700 flex items-center gap-1.5" >
< i class = "fa-solid fa-filter text-indigo-600" ></ i > Cấp độ log:
</ span >
< select id = "selectLogLevel" class = "rounded-lg border border-slate-300 px-3 py-1.5 bg-slate-50 outline-none font-medium" >
< option value = "ALL" > Tất cả (ALL)</ option >
< option value = "INFO" > Thông tin (INFO)</ option >
< option value = "WARN" > Cảnh báo (WARN)</ option >
< option value = "ERROR" > Lỗi (ERROR)</ option >
< option value = "SQL" > Truy vấn (SQL)</ option >
</ select >
< label class = "inline-flex items-center gap-1.5 cursor-pointer text-slate-600 font-medium" >
< input type = "checkbox" id = "chkAutoRefresh" class = "rounded text-indigo-600" checked >
< span > Tự động cập nhật (3s)</ span >
</ label >
</ div >
< div class = "flex items-center gap-2" >
< button id = "btnRefreshLogs" class = "bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-semibold px-3 py-1.5 rounded-lg border border-slate-300 flex items-center gap-1" >
< i class = "fa-solid fa-rotate-right" ></ i > Làm mới
</ button >
< button id = "btnClearLogs" class = "bg-rose-50 hover:bg-rose-100 text-rose-700 border border-rose-200 text-xs font-semibold px-3 py-1.5 rounded-lg flex items-center gap-1" >
< i class = "fa-solid fa-trash-can" ></ i > Xóa log
</ button >
</ div >
</ div >
<!-- Log Terminal Box -->
< div class = "bg-slate-950 rounded-2xl p-4 shadow-xl border border-slate-800 font-mono text-xs overflow-hidden flex flex-col h-[600px]" >
< div class = "flex items-center justify-between pb-2 border-b border-slate-800 text-slate-500 text-[11px]" >
< span > TERMINAL LOG STREAM (Ring buffer 500 dòng)</ span >
< span id = "logCountBadge" class = "text-slate-400" > 0 dòng</ span >
</ div >
< div id = "logTerminal" class = "flex-1 overflow-y-auto space-y-1 mt-2 text-slate-300 leading-relaxed pr-2" >
< div class = "text-slate-500 italic" > Đang tải nhật ký...</ div >
</ div >
</ div >
</ div >
</ main >
<!-- TOAST -->
< div id = "toast" class = "fixed bottom-4 right-4 z-50 bg-slate-900 text-white text-xs px-4 py-2.5 rounded-lg shadow-xl flex items-center gap-2 transform translate-y-20 opacity-0 transition-all duration-300" >
< i class = "fa-solid fa-circle-check text-emerald-400" ></ i >
< span id = "toastMsg" > Thông báo</ span >
</ div >
< script src = "admin.js" ></ script >
</ body >
</ html >
