Files

1144 lines
71 KiB
HTML
Raw Permalink Normal View History

<!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 Lý Giao Ban Hằng Ngày</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Tailwind CSS via CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Chart.js via CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Font Awesome -->
<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">
<!-- TOP HEADER -->
<header class="bg-gradient-to-r from-blue-700 via-sky-700 to-indigo-800 text-white shadow-lg sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 py-3 flex flex-wrap items-center justify-between gap-3">
<div class="flex items-center gap-3">
<div class="bg-white/10 p-2 rounded-lg backdrop-blur-sm border border-white/20">
<i class="fa-solid fa-hospital-user text-2xl text-cyan-300"></i>
</div>
<div>
<h1 class="text-xl font-bold tracking-tight uppercase flex items-center gap-2 flex-wrap">
Phần Mềm Quản Lý Giao Ban Bệnh Viện
<span class="text-xs bg-cyan-500/30 text-cyan-200 border border-cyan-400/40 px-2 py-0.5 rounded-full font-normal">DH-HIS Web (Go)</span>
<span id="currentDbBadge" class="text-xs bg-emerald-500/20 text-emerald-300 border border-emerald-400/30 px-2.5 py-0.5 rounded-full font-medium flex items-center gap-1.5">
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span> BVĐK Ô Môn
</span>
<span id="headerLicenseBadge" class="text-[11px] px-2 py-0.5 rounded-full font-bold bg-amber-500/30 text-amber-200 border border-amber-400/30 hidden">
<i class="fa-solid fa-shield-halved"></i> <span id="headerLicenseText">Kiểm tra bản quyền</span>
</span>
</h1>
<p class="text-xs text-sky-200">Báo cáo Giao ban Ngoại trú &amp; Nội trú hằng ngày - Phân tích đối chiếu đa chu kỳ</p>
</div>
</div>
<div class="flex items-center gap-2">
<!-- Database Selector -->
<div class="flex items-center gap-2 text-xs bg-slate-900/40 px-3 py-1.5 rounded-lg border border-white/10">
<label for="selectDb" class="text-sky-200 font-medium flex items-center gap-1 whitespace-nowrap">
<i class="fa-solid fa-database text-amber-400"></i> CSDL:
</label>
<select id="selectDb" class="bg-slate-800 text-white rounded px-2 py-1 outline-none border border-slate-600 focus:border-cyan-400 text-xs font-medium cursor-pointer">
<option value="an_omon_full_04052026">BVĐK Ô Môn - Cần Thơ (33 GB - Chuẩn khoa phòng)</option>
<option value="tuan_dbgovap_full">BVĐK Gò Vấp - TP.HCM (65 GB - Dữ liệu lớn)</option>
<option value="binh_bvq12_062026052026042026032026022026">BV Quận 12 - TP.HCM (21 GB)</option>
<option value="bvq12_697">BV Quận 12 - Bản 697 (17 GB)</option>
<option value="an_dalieu_full_05082026">BV Da Liễu (31 GB)</option>
</select>
</div>
<!-- Admin Config Link -->
<a href="admin.html?v=1.0.2" class="text-xs bg-slate-900/40 hover:bg-slate-800 text-sky-200 hover:text-white px-2.5 py-2 rounded-lg border border-white/10 flex items-center gap-1.5 transition-all" title="Quản trị &amp; Cấu hình hệ thống">
<i class="fa-solid fa-sliders text-cyan-300"></i>
<span class="hidden sm:inline">Quản Trị</span>
</a>
</div>
</div>
</header>
<!-- LICENSE WARNING BANNER -->
<div id="licenseBanner" class="hidden bg-gradient-to-r from-amber-600 to-rose-600 text-white shadow-md">
<div class="max-w-7xl mx-auto px-4 sm:px-6 py-2.5 flex flex-wrap items-center justify-between gap-3 text-xs">
<div class="flex items-center gap-2">
<i class="fa-solid fa-triangle-exclamation text-amber-200 text-base"></i>
<span id="licenseBannerText" class="font-bold">Hệ thống chưa cập nhật key bản quyền tính năng Web Giao Ban</span>
</div>
<a href="admin.html#tab-license" class="bg-white text-rose-700 font-bold px-3 py-1 rounded-lg shadow-sm hover:bg-rose-50 transition-all flex items-center gap-1.5">
<i class="fa-solid fa-key"></i> Kích Hoạt Bản Quyền Ngay
</a>
</div>
</div>
<!-- CONTROL PANEL / FILTER TOOLBAR -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 mt-4">
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-4 transition-all">
<div class="grid grid-cols-1 md:grid-cols-12 gap-3 items-end">
<!-- Mốc thời gian chọn nhanh -->
<div class="md:col-span-3">
<label class="block text-xs font-semibold text-slate-600 mb-1">
<i class="fa-solid fa-calendar-check text-blue-600"></i> Chọn nhanh mốc thời gian:
</label>
<select id="quickPreset" class="w-full text-sm rounded-lg border border-slate-300 bg-slate-50 px-3 py-2 outline-none focus:ring-2 focus:ring-blue-500 font-medium">
<option value="month-03-2026" selected>Tháng 03/2026 (Dữ liệu đầy đủ đối chiếu)</option>
<option value="month-04-2026">Tháng 04/2026</option>
<option value="month-01-2026">Tháng 01/2026</option>
<option value="month-02-2026">Tháng 02/2026</option>
<option value="today">Hôm nay</option>
<option value="yesterday">Hôm qua</option>
<option value="this-month">Tháng hiện tại</option>
<option value="quarter-1">Quý I/2026</option>
<option value="year-2026">Cả năm 2026</option>
<option value="custom">Tùy chọn khoảng ngày...</option>
</select>
</div>
<!-- Kỳ chính: Từ ngày - Đến ngày -->
<div class="md:col-span-4 flex items-center gap-2">
<div class="w-1/2">
<label class="block text-xs font-semibold text-slate-600 mb-1 flex items-center justify-between">
<span>Từ ngày:</span>
<span id="lockStatusFrom" class="text-[10px] text-slate-400 font-normal"><i class="fa-solid fa-lock text-[10px]"></i> Cố định</span>
</label>
<input type="date" id="dateFrom" class="w-full text-sm rounded-lg border border-slate-300 px-2.5 py-1.5 bg-slate-100 text-slate-500 cursor-not-allowed outline-none font-medium" value="2026-03-01" readonly>
</div>
<div class="w-1/2">
<label class="block text-xs font-semibold text-slate-600 mb-1 flex items-center justify-between">
<span>Đến ngày:</span>
<span id="lockStatusTo" class="text-[10px] text-slate-400 font-normal"><i class="fa-solid fa-lock text-[10px]"></i> Cố định</span>
</label>
<input type="date" id="dateTo" class="w-full text-sm rounded-lg border border-slate-300 px-2.5 py-1.5 bg-slate-100 text-slate-500 cursor-not-allowed outline-none font-medium" value="2026-03-31" readonly>
</div>
</div>
<!-- Checkbox so sánh -->
<div class="md:col-span-2 flex flex-col justify-end pb-1.5">
<label class="inline-flex items-center gap-2 cursor-pointer select-none text-xs font-semibold text-indigo-700 bg-indigo-50 border border-indigo-200 px-3 py-2 rounded-lg hover:bg-indigo-100 transition-colors">
<input type="checkbox" id="enableCompare" class="rounded text-indigo-600 focus:ring-indigo-500 h-4 w-4">
<span>So sánh 2 kỳ</span>
</label>
</div>
<!-- Action Buttons -->
<div class="md:col-span-3 flex items-center gap-2">
<button id="btnFilter" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold py-2 px-3 rounded-lg shadow-sm flex items-center justify-center gap-1.5 transition-all">
<i class="fa-solid fa-magnifying-glass"></i>
<span>Xem Báo Cáo</span>
</button>
<button id="btnOpenIssueModal" class="bg-rose-600 hover:bg-rose-700 text-white text-sm font-semibold py-2 px-3 rounded-lg shadow-sm flex items-center gap-1.5 transition-all" title="Báo cáo lỗi / Góp ý">
<i class="fa-solid fa-bug"></i>
<span class="hidden sm:inline">Báo Lỗi</span>
</button>
<button id="btnPrint" class="bg-slate-100 hover:bg-slate-200 text-slate-700 text-sm font-semibold py-2 px-2.5 rounded-lg border border-slate-300" title="In báo cáo">
<i class="fa-solid fa-print"></i>
</button>
<button id="btnExport" class="bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold py-2 px-2.5 rounded-lg shadow-sm" title="Xuất dữ liệu Excel">
<i class="fa-solid fa-file-excel"></i>
</button>
</div>
</div>
<!-- KỲ SO SÁNH (Hiển thị khi bật enableCompare) -->
<div id="compareContainer" class="hidden mt-3 pt-3 border-t border-dashed border-indigo-200 bg-indigo-50/50 p-3 rounded-lg">
<div class="flex flex-wrap items-center justify-between gap-3">
<div class="flex flex-wrap items-center gap-3">
<span class="text-xs font-bold text-indigo-900 flex items-center gap-1.5">
<i class="fa-solid fa-code-compare text-indigo-600"></i> Kỳ so sánh 2:
</span>
<!-- Chọn nhanh mốc so sánh (ISS-20261027-003) -->
<select id="quickComparePreset" class="text-xs rounded-lg border border-indigo-300 px-2.5 py-1.5 bg-white outline-none font-medium text-slate-700">
<option value="month-01-2026" selected>Tháng 01/2026 (Mặc định)</option>
<option value="month-02-2026">Tháng 02/2026</option>
<option value="prev-period">Kỳ liền trước (khoảng thời gian tương đương)</option>
<option value="prev-month">Cùng kỳ tháng trước</option>
<option value="prev-year">Cùng kỳ năm trước</option>
<option value="custom">Tùy chọn khoảng ngày...</option>
</select>
<div class="flex items-center gap-1.5 text-xs">
<label class="text-slate-600 font-medium">Từ:</label>
<input type="date" id="compareFrom" class="text-xs rounded border border-indigo-300 px-2 py-1 bg-slate-100 text-slate-500 cursor-not-allowed outline-none font-medium" value="2026-01-01" readonly>
</div>
<div class="flex items-center gap-1.5 text-xs">
<label class="text-slate-600 font-medium">Đến:</label>
<input type="date" id="compareTo" class="text-xs rounded border border-indigo-300 px-2 py-1 bg-slate-100 text-slate-500 cursor-not-allowed outline-none font-medium" value="2026-01-31" readonly>
</div>
</div>
<!-- Tùy chọn ẩn dòng = 0 (ISS-20261027-004) -->
<label class="inline-flex items-center gap-1.5 text-xs font-semibold text-indigo-900 cursor-pointer bg-white border border-indigo-200 px-2.5 py-1 rounded-lg hover:bg-indigo-50 transition-colors shadow-2xs">
<input type="checkbox" id="chkHideZeroRows" class="rounded text-indigo-600 focus:ring-indigo-500">
<span>Ẩn dòng không có dữ liệu (2 kỳ = 0)</span>
</label>
</div>
</div>
</div>
</section>
<!-- NAVIGATION TABS -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 mt-4">
<div class="flex border-b border-slate-200 gap-2 flex-wrap">
<button class="tab-btn active px-4 py-2.5 text-sm font-bold border-b-2 border-blue-600 text-blue-600 flex items-center gap-2 transition-all" data-tab="tab-ngoaitru">
<i class="fa-solid fa-user-doctor"></i>
<span>1. Báo Cáo Giao Ban Ngoại Trú</span>
</button>
<button class="tab-btn px-4 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-noitru">
<i class="fa-solid fa-bed-pulse"></i>
<span>2. Báo Cáo Giao Ban Nội Trú</span>
</button>
<button class="tab-btn px-4 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-bienban">
<i class="fa-solid fa-file-signature text-indigo-600"></i>
<span>3. Biên Bản Giao Ban</span>
</button>
<button class="tab-btn px-4 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-issues">
<i class="fa-solid fa-clipboard-list text-rose-500"></i>
<span>4. Quản Lý Issue &amp; Báo Lỗi</span>
<span id="badgeIssueCount" class="ml-1 px-1.5 py-0.2 text-[10px] font-bold rounded-full bg-rose-100 text-rose-700 border border-rose-300">0</span>
</button>
</div>
</section>
<!-- MAIN CONTENT CONTAINER -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 py-4">
<!-- ========================================== -->
<!-- TAB 1: BÁO CÁO GIAO BAN NGOẠI TRÚ -->
<!-- ========================================== -->
<div id="tab-ngoaitru" class="tab-content space-y-4">
<!-- KPI METRIC CARDS -->
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
<div class="bg-white p-3.5 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
<div class="flex items-center justify-between text-slate-500">
<span class="text-xs font-semibold">Tổng Khám</span>
<i class="fa-solid fa-stethoscope text-blue-500"></i>
</div>
<div class="mt-2 text-2xl font-extrabold text-blue-700" id="kpiTongKham">0</div>
<div class="text-[11px] text-slate-400 mt-1">Lượt khám hoàn tất</div>
</div>
<div class="bg-white p-3.5 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
<div class="flex items-center justify-between text-slate-500">
<span class="text-xs font-semibold">Khám BHYT</span>
<i class="fa-solid fa-id-card text-emerald-500"></i>
</div>
<div class="mt-2 text-2xl font-extrabold text-emerald-600" id="kpiBhyt">0</div>
<div class="text-[11px] text-emerald-600/80 font-medium mt-1" id="kpiBhytPct">0% tổng lượt</div>
</div>
<div class="bg-white p-3.5 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
<div class="flex items-center justify-between text-slate-500">
<span class="text-xs font-semibold">Khám Thu Phí</span>
<i class="fa-solid fa-receipt text-amber-500"></i>
</div>
<div class="mt-2 text-2xl font-extrabold text-amber-600" id="kpiThuPhi">0</div>
<div class="text-[11px] text-amber-600/80 font-medium mt-1" id="kpiThuPhiPct">0% tổng lượt</div>
</div>
<div class="bg-white p-3.5 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
<div class="flex items-center justify-between text-slate-500">
<span class="text-xs font-semibold">Chuyển Viện</span>
<i class="fa-solid fa-truck-medical text-rose-500"></i>
</div>
<div class="mt-2 text-2xl font-extrabold text-rose-600" id="kpiChuyenVien">0</div>
<div class="text-[11px] text-rose-600/80 font-medium mt-1">Tuyến trên &amp; ngang</div>
</div>
<div class="bg-white p-3.5 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
<div class="flex items-center justify-between text-slate-500">
<span class="text-xs font-semibold">Tiêm Ngừa</span>
<i class="fa-solid fa-syringe text-purple-500"></i>
</div>
<div class="mt-2 text-2xl font-extrabold text-purple-600" id="kpiTiemNgua">0</div>
<div class="text-[11px] text-slate-400 mt-1">Lượt tiêm chủng</div>
</div>
<div class="bg-white p-3.5 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
<div class="flex items-center justify-between text-slate-500">
<span class="text-xs font-semibold">Bệnh Án Ngoại Trú</span>
<i class="fa-solid fa-folder-open text-sky-500"></i>
</div>
<div class="mt-2 text-2xl font-extrabold text-sky-700" id="kpiBantTong">0</div>
<div class="text-[11px] text-slate-500 mt-1 flex justify-between">
<span>Mới: <b class="text-sky-600" id="kpiBantMoi">0</b></span>
<span>Tái khám: <b class="text-sky-600" id="kpiBantTk">0</b></span>
</div>
</div>
</div>
<!-- ROW 1: BẢNG KHÁM THEO KHOA & SỐ LIỆU CHUYÊN KHOA YDCT -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
<!-- Bảng khám chữa bệnh theo Khoa -->
<div class="lg:col-span-8 bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<div class="px-4 py-3 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-table-list text-blue-600"></i>
<span>1.1. Số Liệu Khám Chữa Bệnh Theo Các Khoa</span>
</h2>
<span class="text-xs text-slate-500" id="subKhoaKcb">Khám bệnh, Nội, Ngoại, CSSKSS, Nhi, YDCT</span>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left text-sm border-collapse" id="tableKhoaKcb">
<thead class="bg-slate-100 text-slate-700 font-semibold text-xs uppercase tracking-wider border-b border-slate-200">
<tr>
<th class="py-2.5 px-3">Mã</th>
<th class="py-2.5 px-3">Khoa Khám Bệnh</th>
<th class="py-2.5 px-3 text-right">BHYT</th>
<th class="py-2.5 px-3 text-right">Thu Phí</th>
<th class="py-2.5 px-3 text-right">Chuyển Viện</th>
<th class="py-2.5 px-3 text-right">Tổng Khám</th>
<!-- Cột so sánh nếu bật -->
<th class="py-2.5 px-3 text-right th-compare hidden">Kỳ So Sánh</th>
<th class="py-2.5 px-3 text-right th-compare hidden">Chênh Lệch</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-200 font-normal text-slate-800" id="bodyKhoaKcb">
<tr><td colspan="6" class="text-center py-6 text-slate-400">Đang tải dữ liệu...</td></tr>
</tbody>
<tfoot class="bg-slate-100 font-bold text-slate-800 text-xs border-t-2 border-slate-300" id="footKhoaKcb">
</tfoot>
</table>
</div>
</div>
<!-- Chuyên khoa YDCT & Bệnh án ngoại trú Card -->
<div class="lg:col-span-4 space-y-4">
<!-- Card YDCT -->
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<div class="px-4 py-3 bg-amber-50/70 border-b border-amber-200 flex items-center justify-between">
<h2 class="text-sm font-bold text-amber-900 flex items-center gap-2">
<i class="fa-solid fa-leaf text-amber-600"></i>
<span>1.2. Chuyên Khoa Y Dược Cổ Truyền</span>
</h2>
<span class="text-xs bg-amber-200/60 text-amber-800 px-2 py-0.5 rounded font-semibold">YDCT</span>
</div>
<div class="p-4 space-y-3">
<div class="flex items-center justify-between border-b border-slate-100 pb-2">
<span class="text-sm text-slate-600 font-medium flex items-center gap-2">
<i class="fa-solid fa-bolt text-amber-500"></i> Điện châm
</span>
<span class="text-base font-bold text-slate-800" id="ydctDienCham">0</span>
</div>
<div class="flex items-center justify-between border-b border-slate-100 pb-2">
<span class="text-sm text-slate-600 font-medium flex items-center gap-2">
<i class="fa-solid fa-person-walking text-blue-500"></i> Vật lý trị liệu (VLTL)
</span>
<span class="text-base font-bold text-slate-800" id="ydctVltl">0</span>
</div>
<div class="flex items-center justify-between border-b border-slate-100 pb-2">
<span class="text-sm text-slate-600 font-medium flex items-center gap-2">
<i class="fa-solid fa-mug-hot text-emerald-500"></i> Sắc thuốc thang
</span>
<span class="text-base font-bold text-slate-800" id="ydctSacThuoc">0</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-slate-600 font-medium flex items-center gap-2">
<i class="fa-solid fa-certificate text-purple-500"></i> Cấy chỉ (Chôn chỉ)
</span>
<span class="text-base font-bold text-slate-800" id="ydctCayChi">0</span>
</div>
</div>
</div>
<!-- Top 10 Bệnh Ngoại Trú -->
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<div class="px-4 py-3 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-ranking-star text-rose-500"></i>
<span>Top 10 Chẩn Đoán Ngoại Trú</span>
</h2>
</div>
<div class="p-2 overflow-y-auto max-h-72">
<table class="w-full text-left text-xs border-collapse">
<tbody class="divide-y divide-slate-100 font-medium" id="bodyTop10">
<tr><td class="text-center py-4 text-slate-400">Đang tải dữ liệu...</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- ROW 2: TỔNG HỢP CẬN LÂM SÀNG & BIỂU ĐỒ CỘT SO SÁNH -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
<!-- Bảng Cận Lâm Sàng -->
<div class="lg:col-span-6 bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<div class="px-4 py-3 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-flask-vial text-cyan-600"></i>
<span>1.3. Tổng Hợp Số Liệu Cận Lâm Sàng</span>
</h2>
<span class="text-xs text-slate-500">Xét nghiệm &amp; CĐHA</span>
</div>
<div class="overflow-x-auto max-h-96">
<table class="w-full text-left text-xs border-collapse">
<thead class="bg-slate-100 text-slate-700 font-semibold uppercase border-b border-slate-200 sticky top-0">
<tr>
<th class="py-2 px-3">Phân nhóm</th>
<th class="py-2 px-3">Loại Kỹ Thuật</th>
<th class="py-2 px-3 text-right">Số Bệnh Nhân</th>
<th class="py-2 px-3 text-right">Số Lượt Thực Hiện</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100" id="bodyCls">
<tr><td colspan="4" class="text-center py-4 text-slate-400">Đang tải dữ liệu...</td></tr>
</tbody>
</table>
</div>
</div>
<!-- Biểu đồ cột so sánh -->
<div class="lg:col-span-6 bg-white rounded-xl shadow-sm border border-slate-200 p-4 flex flex-col justify-between">
<div class="flex items-center justify-between border-b border-slate-100 pb-2 mb-2">
<h2 class="text-sm font-bold text-slate-800 flex items-center gap-2">
<i class="fa-solid fa-chart-column text-indigo-600"></i>
<span>Biểu Đồ Cột So Sánh Số Liệu</span>
</h2>
<div class="flex gap-1 text-xs flex-wrap">
<button class="chart-type-btn active px-2.5 py-1 rounded bg-blue-100 text-blue-700 font-semibold" data-chart="khoa">Cột Khoa</button>
<button class="chart-type-btn px-2.5 py-1 rounded bg-slate-100 text-slate-600 font-medium" data-chart="khoa-pie"><i class="fa-solid fa-chart-pie mr-1"></i>% Tròn Khoa</button>
<button class="chart-type-btn px-2.5 py-1 rounded bg-slate-100 text-slate-600 font-medium" data-chart="bhyt-group"><i class="fa-solid fa-chart-bar mr-1"></i>BHYT / Thu phí</button>
<button class="chart-type-btn px-2.5 py-1 rounded bg-slate-100 text-slate-600 font-medium" data-chart="cls">Theo CLS</button>
</div>
</div>
<div class="relative w-full h-80">
<canvas id="chartNgoaiTru"></canvas>
</div>
</div>
</div>
</div>
<!-- ========================================== -->
<!-- TAB 2: BÁO CÁO GIAO BAN NỘI TRÚ -->
<!-- ========================================== -->
<div id="tab-noitru" class="tab-content hidden space-y-4">
<!-- KPI METRICS NỘI TRÚ -->
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
<div class="bg-white p-3.5 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
<div class="flex items-center justify-between text-slate-500">
<span class="text-xs font-semibold">Bệnh Cũ (Tồn Đầu)</span>
<i class="fa-solid fa-clock-rotate-left text-slate-500"></i>
</div>
<div class="mt-2 text-2xl font-extrabold text-slate-700" id="kpiNtBenhCu">0</div>
<div class="text-[11px] text-slate-400 mt-1">Chuyển từ kỳ trước</div>
</div>
<div class="bg-white p-3.5 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
<div class="flex items-center justify-between text-slate-500">
<span class="text-xs font-semibold">Bệnh Mới (Vào Viện)</span>
<i class="fa-solid fa-user-plus text-blue-500"></i>
</div>
<div class="mt-2 text-2xl font-extrabold text-blue-600" id="kpiNtBenhMoi">0</div>
<div class="text-[11px] text-blue-600/80 font-medium mt-1">Nhập viện trong kỳ</div>
</div>
<div class="bg-white p-3.5 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
<div class="flex items-center justify-between text-slate-500">
<span class="text-xs font-semibold">Tổng Xuất Viện</span>
<i class="fa-solid fa-person-walking-arrow-right text-emerald-500"></i>
</div>
<div class="mt-2 text-2xl font-extrabold text-emerald-600" id="kpiNtXuatVien">0</div>
<div class="text-[11px] text-emerald-600/80 font-medium mt-1" id="kpiNtOnPct">Ổn về: 0 ca</div>
</div>
<div class="bg-white p-3.5 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
<div class="flex items-center justify-between text-slate-500">
<span class="text-xs font-semibold">Bệnh Hiện Còn</span>
<i class="fa-solid fa-bed text-indigo-500"></i>
</div>
<div class="mt-2 text-2xl font-extrabold text-indigo-700" id="kpiNtHienCon">0</div>
<div class="text-[11px] text-indigo-700/80 font-medium mt-1">Đang nằm điều trị</div>
</div>
<div class="bg-white p-3.5 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
<div class="flex items-center justify-between text-slate-500">
<span class="text-xs font-semibold">Bệnh Theo Dõi</span>
<i class="fa-solid fa-heart-pulse text-rose-500"></i>
</div>
<div class="mt-2 text-2xl font-extrabold text-rose-600" id="kpiNtTheoDoi">0</div>
<div class="text-[11px] text-rose-600/80 font-medium mt-1">Bệnh nhân nặng</div>
</div>
<div class="bg-white p-3.5 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
<div class="flex items-center justify-between text-slate-500">
<span class="text-xs font-semibold">Chăm Sóc Cấp I</span>
<i class="fa-solid fa-hand-holding-medical text-amber-500"></i>
</div>
<div class="mt-2 text-2xl font-extrabold text-amber-600" id="kpiNtCsCap1">0</div>
<div class="text-[11px] text-amber-600/80 font-medium mt-1">Chế độ chăm sóc I</div>
</div>
</div>
<!-- BẢNG 1: LƯU LƯỢNG BỆNH NHÂN THEO CÁC KHOA -->
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<div class="px-4 py-3 bg-slate-50 border-b border-slate-200 flex flex-wrap items-center justify-between gap-2">
<div>
<h2 class="text-sm font-bold text-slate-800 flex items-center gap-2">
<i class="fa-solid fa-hospital text-blue-600"></i>
<span>2.1. Tổng Hợp Lưu Lượng Bệnh Nhân Theo Các Khoa Nội Trú</span>
</h2>
<p class="text-xs text-slate-500">Cấp cứu HS, Nội, Nhi, Ngoại TH, CSSKSS, YDCT,... (Khớp công thức: Tồn đầu + Vào viện - Ra viện = Hiện còn)</p>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left text-xs border-collapse" id="tableNoiTru">
<thead class="bg-slate-100 text-slate-700 font-semibold uppercase tracking-wider border-b border-slate-200">
<tr>
<th class="py-2.5 px-3">Mã</th>
<th class="py-2.5 px-3">Khoa Điều Trị</th>
<th class="py-2.5 px-3 text-right">Bệnh Cũ</th>
<th class="py-2.5 px-3 text-right">Bệnh Mới</th>
<th class="py-2.5 px-3 text-right text-emerald-700">Ổn xin về</th>
<th class="py-2.5 px-3 text-right text-amber-700">Nặng về</th>
<th class="py-2.5 px-3 text-right text-slate-600">Trốn</th>
<th class="py-2.5 px-3 text-right text-rose-700">Chuyển viện</th>
<th class="py-2.5 px-3 text-right text-rose-900">Tử vong</th>
<th class="py-2.5 px-3 text-right font-bold text-blue-700 bg-blue-50/50">Hiện Còn</th>
<th class="py-2.5 px-3 text-right">Bệnh Theo Dõi</th>
<th class="py-2.5 px-3 text-right">CS Cấp I</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-200 font-normal text-slate-800" id="bodyNoiTru">
<tr><td colspan="12" class="text-center py-6 text-slate-400">Đang tải dữ liệu...</td></tr>
</tbody>
<tfoot class="bg-slate-100 font-bold text-slate-800 text-xs border-t-2 border-slate-300" id="footNoiTru">
</tfoot>
</table>
</div>
</div>
<!-- BIỂU ĐỒ CỘT SO SÁNH NỘI TRÚ -->
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-4">
<div class="flex flex-wrap items-center justify-between border-b border-slate-100 pb-2 mb-3 gap-2">
<div>
<h2 class="text-sm font-bold text-slate-800 flex items-center gap-2">
<i class="fa-solid fa-chart-column text-indigo-600"></i>
<span>Biểu Đồ Phân Tích Bệnh Nhân Nội Trú</span>
</h2>
<span class="text-xs text-slate-500" id="subTitleChartNoiTru">Phân bố lưu lượng và cơ cấu bệnh nhân điều trị</span>
</div>
<div class="flex gap-1 text-xs flex-wrap">
<button class="chart-nt-btn active px-2.5 py-1 rounded bg-blue-100 text-blue-700 font-semibold" data-ntchart="noitru-col">Cột Vào Viện</button>
<button class="chart-nt-btn px-2.5 py-1 rounded bg-slate-100 text-slate-600 font-medium" data-ntchart="noitru-pie-tong"><i class="fa-solid fa-chart-pie mr-1"></i>% Tròn 4 Tiêu Chí</button>
<button class="chart-nt-btn px-2.5 py-1 rounded bg-slate-100 text-slate-600 font-medium" data-ntchart="noitru-pie-khoa"><i class="fa-solid fa-chart-pie mr-1"></i>% Hiện Còn Theo Khoa</button>
<button class="chart-nt-btn px-2.5 py-1 rounded bg-slate-100 text-slate-600 font-medium" data-ntchart="noitru-group">Cột Nhóm Tổng Hợp</button>
</div>
</div>
<div class="relative w-full h-80">
<canvas id="chartNoiTru"></canvas>
</div>
</div>
<!-- BẢNG 3: DANH SÁCH BỆNH NHÂN CHUYỂN VIỆN -->
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<div class="px-4 py-3 bg-rose-50/80 border-b border-rose-200 flex flex-wrap items-center justify-between gap-3">
<div>
<h2 class="text-sm font-bold text-rose-900 flex items-center gap-2">
<i class="fa-solid fa-ambulance text-rose-600"></i>
<span>BẢNG 3: Danh Sách Bệnh Nhân Chuyển Viện</span>
</h2>
<p class="text-xs text-rose-700/80">Cho phép các khoa tự nhập liệu trực tiếp vào cột Ghi chú trên lưới trước giờ họp giao ban</p>
</div>
<div class="flex items-center gap-2 text-xs">
<span class="text-slate-600 font-medium">Khoa:</span>
<select id="filterKhoaCv" class="rounded border border-slate-300 px-2 py-1 bg-white outline-none">
<option value="ALL">Tất cả khoa</option>
</select>
<span class="bg-rose-200 text-rose-800 px-2 py-0.5 rounded-full font-bold text-[11px]" id="countBang3">0 ca</span>
</div>
</div>
<div class="overflow-x-auto max-h-[500px]">
<table class="w-full text-left text-xs border-collapse">
<thead class="bg-slate-100 text-slate-700 font-semibold uppercase sticky top-0 border-b border-slate-200 z-10">
<tr>
<th class="py-2.5 px-2.5 w-10 text-center">STT</th>
<th class="py-2.5 px-2.5 w-24">Mã BN / BA</th>
<th class="py-2.5 px-3 w-40">Họ và Tên</th>
<th class="py-2.5 px-3 w-48">Địa Chỉ</th>
<th class="py-2.5 px-3 w-32">Ngày Vào / Ra</th>
<th class="py-2.5 px-3 w-32">Khoa Chuyển</th>
<th class="py-2.5 px-3 w-56">Chẩn Đoán (Chính/Phụ)</th>
<th class="py-2.5 px-3 w-64">Kết Quả CLS Tóm Tắt</th>
<th class="py-2.5 px-3 w-64 bg-amber-50 text-amber-900 font-bold border-l border-amber-200">
<i class="fa-solid fa-pen-to-square"></i> Ghi Chú (Khoa tự nhập)
</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-200" id="bodyBang3">
<tr><td colspan="9" class="text-center py-6 text-slate-400">Đang tải danh sách chuyển viện...</td></tr>
</tbody>
</table>
</div>
</div>
<!-- BẢNG 4: DANH SÁCH BỆNH NHÂN THEO DÕI & CHĂM SÓC CẤP I -->
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<div class="px-4 py-3 bg-amber-50/80 border-b border-amber-200 flex flex-wrap items-center justify-between gap-3">
<div>
<h2 class="text-sm font-bold text-amber-900 flex items-center gap-2">
<i class="fa-solid fa-eye text-amber-600"></i>
<span>BẢNG 4: Danh Sách Bệnh Nhân Theo Dõi &amp; Chăm Sóc Cấp I</span>
</h2>
<p class="text-xs text-amber-700/80">Theo dõi diễn biến nặng, can thiệp đặc biệt và chỉ định chăm sóc cấp I</p>
</div>
<div class="flex items-center gap-2 text-xs">
<span class="text-slate-600 font-medium">Khoa:</span>
<select id="filterKhoaTd" class="rounded border border-slate-300 px-2 py-1 bg-white outline-none">
<option value="ALL">Tất cả khoa</option>
</select>
<span class="bg-amber-200 text-amber-800 px-2 py-0.5 rounded-full font-bold text-[11px]" id="countBang4">0 ca</span>
</div>
</div>
<div class="overflow-x-auto max-h-[500px]">
<table class="w-full text-left text-xs border-collapse">
<thead class="bg-slate-100 text-slate-700 font-semibold uppercase sticky top-0 border-b border-slate-200 z-10">
<tr>
<th class="py-2.5 px-2.5 w-10 text-center">STT</th>
<th class="py-2.5 px-2.5 w-24">Mã BN / BA</th>
<th class="py-2.5 px-3 w-40">Họ và Tên</th>
<th class="py-2.5 px-3 w-48">Địa Chỉ</th>
<th class="py-2.5 px-3 w-32">Ngày Vào Viện</th>
<th class="py-2.5 px-3 w-32">Khoa Điều Trị</th>
<th class="py-2.5 px-3 w-56">Chẩn Đoán (Chính/Phụ)</th>
<th class="py-2.5 px-3 w-64">Kết Quả CLS Tóm Tắt</th>
<th class="py-2.5 px-3 w-64 bg-amber-50 text-amber-900 font-bold border-l border-amber-200">
<i class="fa-solid fa-pen-to-square"></i> Ghi Chú (Khoa tự nhập)
</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-200" id="bodyBang4">
<tr><td colspan="9" class="text-center py-6 text-slate-400">Đang tải danh sách theo dõi...</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- ========================================== -->
<!-- TAB 3: BIÊN BẢN GIAO BAN (MẪU A4 & PHÂN QUYỀN 3 CẤP) -->
<!-- ========================================== -->
<div id="tab-bienban" class="tab-content hidden space-y-4">
<!-- Top Action Toolbar -->
<div class="bg-white p-3.5 rounded-xl border border-slate-200 shadow-sm flex flex-wrap items-center justify-between gap-3 print:hidden">
<!-- Role Switcher -->
<div class="flex items-center gap-2">
<span class="text-xs font-bold text-slate-700 flex items-center gap-1.5">
<i class="fa-solid fa-user-shield text-indigo-600"></i> Vai trò đăng nhập:
</span>
<select id="selectBienBanRole" class="text-xs font-bold rounded-lg border border-indigo-300 px-3 py-1.5 bg-indigo-50 text-indigo-900 outline-none">
<option value="cap1">Cấp 1: Bác sĩ / Nhân viên (Chỉ xem)</option>
<option value="cap2" selected>Cấp 2: Thư ký giao ban / Trưởng khoa (Ghi chép)</option>
<option value="cap3">Cấp 3: Chủ trì / Ban Giám đốc (Kết luận &amp; Khóa)</option>
</select>
<span id="badgeLockStatus" class="text-xs px-2.5 py-1 rounded-full font-bold bg-emerald-100 text-emerald-800 border border-emerald-300 flex items-center gap-1">
<i class="fa-solid fa-lock-open text-emerald-600"></i> Đang mở soạn thảo
</span>
</div>
<!-- Action Buttons -->
<div class="flex items-center gap-2 flex-wrap">
<button id="btnSync24hData" class="bg-blue-50 hover:bg-blue-100 text-blue-700 border border-blue-300 text-xs font-semibold px-3 py-1.5 rounded-lg flex items-center gap-1.5 transition-all" title="Lấy nhanh số liệu KCB 24h điền vào biên bản">
<i class="fa-solid fa-arrows-rotate text-blue-600"></i> Đồng bộ số liệu 24h
</button>
<button id="btnSaveBienBan" class="bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold px-3 py-1.5 rounded-lg shadow-sm flex items-center gap-1.5 transition-all">
<i class="fa-solid fa-floppy-disk"></i> Lưu biên bản
</button>
<button id="btnToggleLockBienBan" class="bg-amber-600 hover:bg-amber-700 text-white text-xs font-semibold px-3 py-1.5 rounded-lg shadow-sm flex items-center gap-1.5 transition-all">
<i class="fa-solid fa-lock"></i> Khóa biên bản
</button>
<button id="btnPrintBienBan" class="bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-semibold px-3.5 py-1.5 rounded-lg shadow-sm flex items-center gap-1.5 transition-all">
<i class="fa-solid fa-print"></i> In Biên Bản A4
</button>
</div>
</div>
<!-- Printable A4 Paper Document Container -->
<div id="bienBanA4Sheet" class="bg-white rounded-xl shadow-lg border border-slate-300 max-w-4xl mx-auto p-8 sm:p-12 text-slate-900 font-serif leading-relaxed print:shadow-none print:border-none print:p-0 print:max-w-none">
<!-- Header Quốc Hiệu & Đơn Vị -->
<div class="grid grid-cols-1 sm:grid-cols-12 gap-4 pb-4 border-b-2 border-slate-900 items-start">
<div class="sm:col-span-5 text-center">
<p class="text-xs uppercase font-bold tracking-wider text-slate-800" id="bbTenSoYTe">SỞ Y TẾ THÀNH PHỐ</p>
<input type="text" id="bbTenBenhVien" class="text-sm uppercase font-black text-center w-full outline-none border-b border-transparent hover:border-slate-300 focus:border-indigo-500 bg-transparent" value="BỆNH VIỆN ĐA KHOA Ô MÔN">
<p class="text-[11px] italic text-slate-600">Số: <input type="text" id="bbSoBienBan" class="w-24 text-center font-mono border-b border-dotted border-slate-400 bg-transparent outline-none" value=".../BB-GB"></p>
</div>
<div class="sm:col-span-7 text-center">
<p class="text-xs uppercase font-bold tracking-wider">CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM</p>
<p class="text-xs font-bold underline underline-offset-4 tracking-normal pb-1">Độc lập - Tự do - Hạnh phúc</p>
<p class="text-xs italic text-slate-600 mt-2">
<input type="text" id="bbNgayThangNam" class="text-center w-64 border-b border-dotted border-slate-400 bg-transparent outline-none italic" value="..., ngày ... tháng ... năm 2026">
</p>
</div>
</div>
<!-- Document Title -->
<div class="text-center my-6">
<h1 class="text-xl font-black uppercase tracking-wide text-slate-900">BIÊN BẢN HỌP GIAO BAN BỆNH VIỆN</h1>
<p class="text-xs italic text-slate-600 mt-1">(V/v Đánh giá công tác khám chữa bệnh 24h &amp; Triển khai nhiệm vụ trọng tâm)</p>
</div>
<!-- Metadata Section -->
<div class="space-y-2 text-xs text-slate-800 bg-slate-50 p-4 rounded-lg border border-slate-200 mb-6 font-sans">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div>
<span class="font-bold">1. Thời gian bắt đầu:</span>
<input type="text" id="bbThoiGian" class="border-b border-slate-300 bg-transparent px-1 font-medium outline-none w-48" value="07 giờ 30 phút">
</div>
<div>
<span class="font-bold">2. Địa điểm:</span>
<input type="text" id="bbDiaDiem" class="border-b border-slate-300 bg-transparent px-1 font-medium outline-none w-48" value="Hội trường giao ban">
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div>
<span class="font-bold">3. Chủ trì cuộc họp:</span>
<input type="text" id="bbChuTri" class="border-b border-slate-300 bg-transparent px-1 font-bold text-indigo-900 outline-none w-48" value="BS.CKII - Giám đốc trực">
</div>
<div>
<span class="font-bold">4. Thư ký ghi biên bản:</span>
<input type="text" id="bbThuKy" class="border-b border-slate-300 bg-transparent px-1 font-medium outline-none w-48" value="BS. Trực tổng hợp">
</div>
</div>
<div>
<span class="font-bold">5. Thành phần tham dự:</span>
<input type="text" id="bbThanhPhan" class="w-full border-b border-slate-300 bg-transparent px-1 font-medium outline-none mt-1" value="Ban Giám đốc, Trưởng/Phó các khoa lâm sàng & cận lâm sàng, Phòng Kế hoạch tổng hợp, Điều dưỡng trưởng bệnh viện và các Bác sĩ trực.">
</div>
</div>
<!-- Section 1: Tình hình khám chữa bệnh 24h qua -->
<div class="space-y-3 mb-6">
<h2 class="text-sm font-bold uppercase tracking-wider text-slate-900 flex items-center justify-between border-b border-slate-300 pb-1">
<span>I. TÌNH HÌNH HOẠT ĐỘNG KHÁM CHỮA BỆNH 24 GIỜ QUA</span>
</h2>
<textarea id="bbNoiDungKcb" rows="5" class="w-full p-3 rounded-lg border border-slate-300 font-sans text-xs outline-none focus:ring-1 focus:ring-indigo-500 leading-relaxed bg-white" placeholder="Bấm nút 'Đồng bộ số liệu 24h' để nạp tự động hoặc nhập tóm tắt số liệu khám ngoại trú, nội trú hiện còn, nhập viện mới, chuyển viện..."></textarea>
</div>
<!-- Section 2: Báo cáo công tác trực & Chuyên môn khoa phòng -->
<div class="space-y-3 mb-6">
<h2 class="text-sm font-bold uppercase tracking-wider text-slate-900 border-b border-slate-300 pb-1">
II. BÁO CÁO CÔNG TÁC TRỰC &amp; DIỄN BIẾN CHUYÊN MÔN
</h2>
<textarea id="bbNoiDungChuyenMon" rows="5" class="w-full p-3 rounded-lg border border-slate-300 font-sans text-xs outline-none focus:ring-1 focus:ring-indigo-500 leading-relaxed bg-white" placeholder="- Tình hình cấp cứu, phẫu thuật cấp cứu trong ca trực.&#10;- Bệnh nhân nặng, theo dõi đặc biệt (chăm sóc cấp I).&#10;- Các trường hợp chuyển viện an toàn, tai biến y khoa (nếu có): Không có diễn biến bất thường."></textarea>
</div>
<!-- Section 3: Công tác Dược, Vật tư & Trang thiết bị y tế -->
<div class="space-y-3 mb-6">
<h2 class="text-sm font-bold uppercase tracking-wider text-slate-900 border-b border-slate-300 pb-1">
III. CÔNG TÁC DƯỢC, VẬT TƯ &amp; TRANG THIẾT BỊ Y TẾ
</h2>
<textarea id="bbNoiDungDuocTrangThietBi" rows="4" class="w-full p-3 rounded-lg border border-slate-300 font-sans text-xs outline-none focus:ring-1 focus:ring-indigo-500 leading-relaxed bg-white" placeholder="- Cung ứng thuốc thang, dịch truyền, hóa chất xét nghiệm đầy đủ cho các khoa.&#10;- Trang thiết bị chẩn đoán hình ảnh (X-quang, Siêu âm, CT) và máy xét nghiệm hoạt động ổn định."></textarea>
</div>
<!-- Section 4: Ý kiến thảo luận & Kiến nghị khoa phòng -->
<div class="space-y-3 mb-6">
<h2 class="text-sm font-bold uppercase tracking-wider text-slate-900 border-b border-slate-300 pb-1">
IV. Ý KIẾN THẢO LUẬN &amp; KIẾN NGHỊ CỦA CÁC KHOA PHÒNG
</h2>
<textarea id="bbNoiDungYkienKhoa" rows="4" class="w-full p-3 rounded-lg border border-slate-300 font-sans text-xs outline-none focus:ring-1 focus:ring-indigo-500 leading-relaxed bg-white" placeholder="- Khoa Khám bệnh: Đề xuất tăng cường bàn khám vào khung giờ cao điểm 7h30 - 9h00.&#10;- Khoa Hồi sức cấp cứu: Đề nghị bảo dưỡng định kỳ hệ thống khí y tế trung tâm."></textarea>
</div>
<!-- Section 5: Kết luận & Chỉ đạo của Ban Giám Đốc -->
<div class="space-y-3 mb-8 bg-amber-50/50 p-4 rounded-xl border border-amber-200">
<h2 class="text-sm font-bold uppercase tracking-wider text-indigo-950 border-b border-amber-300 pb-1 flex items-center justify-between">
<span>V. KẾT LUẬN &amp; CHỈ ĐẠO CỦA BAN GIÁM ĐỐC (CHỦ TRÌ GIAO BAN)</span>
<span class="text-[10px] font-sans bg-amber-200/80 text-amber-900 px-2 py-0.5 rounded font-bold">Phân quyền Cấp 3</span>
</h2>
<textarea id="bbNoiDungKetLuan" rows="5" class="w-full p-3 rounded-lg border border-amber-300 font-sans text-xs outline-none focus:ring-1 focus:ring-amber-500 leading-relaxed bg-white font-medium" placeholder="Chỉ đạo của Ban Giám đốc:&#10;1. Các khoa lâm sàng tiếp tục theo dõi sát người bệnh nặng, hội chẩn kịp thời.&#10;2. Đảm bảo quy chế kê đơn, bảng kê chi phí BHYT và hồ sơ bệnh án chuẩn hóa.&#10;3. Phòng KHTH phối hợp tổ CNTT duy trì ổn định hệ thống phần mềm và cập nhật số liệu."></textarea>
</div>
<!-- Footer Chữ Ký A4 -->
<div class="grid grid-cols-2 gap-8 text-center pt-4 font-sans text-xs">
<div>
<p class="font-bold uppercase tracking-wider text-slate-800">THƯ KÝ GHI BIÊN BẢN</p>
<p class="text-[11px] italic text-slate-500 mb-16">(Ký và ghi rõ họ tên)</p>
<p id="bbSignThuKy" class="font-bold text-slate-900">BS. Trực tổng hợp</p>
</div>
<div>
<p class="font-bold uppercase tracking-wider text-slate-800">CHỦ TRÌ GIAO BAN</p>
<p class="text-[11px] italic text-slate-500 mb-16">(Ký duyệt và ghi rõ họ tên)</p>
<p id="bbSignChuTri" class="font-bold text-indigo-950">BS.CKII - Ban Giám Đốc</p>
</div>
</div>
</div>
</div>
<!-- ========================================== -->
<!-- TAB 4: QUẢN LÝ ISSUE & BÁO LỖI -->
<!-- ========================================== -->
<div id="tab-issues" class="tab-content hidden space-y-4">
<!-- KPI METRIC CARDS CHO ISSUE -->
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
<div class="bg-white p-3.5 rounded-xl border border-slate-200 shadow-sm flex items-center justify-between">
<div>
<div class="text-xs font-semibold text-slate-500">Tổng Số Báo Lỗi</div>
<div class="mt-1 text-2xl font-black text-slate-800" id="issueKpiTotal">0</div>
</div>
<div class="w-10 h-10 rounded-lg bg-slate-100 flex items-center justify-center text-slate-600">
<i class="fa-solid fa-list-check text-lg"></i>
</div>
</div>
<div class="bg-white p-3.5 rounded-xl border border-amber-200 shadow-sm flex items-center justify-between bg-amber-50/40">
<div>
<div class="text-xs font-semibold text-amber-700">Chờ Xử Lý</div>
<div class="mt-1 text-2xl font-black text-amber-600" id="issueKpiPending">0</div>
</div>
<div class="w-10 h-10 rounded-lg bg-amber-100 flex items-center justify-center text-amber-600">
<i class="fa-solid fa-clock text-lg"></i>
</div>
</div>
<div class="bg-white p-3.5 rounded-xl border border-blue-200 shadow-sm flex items-center justify-between bg-blue-50/40">
<div>
<div class="text-xs font-semibold text-blue-700">Đang Xử Lý</div>
<div class="mt-1 text-2xl font-black text-blue-600" id="issueKpiProcessing">0</div>
</div>
<div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-blue-600">
<i class="fa-solid fa-screwdriver-wrench text-lg"></i>
</div>
</div>
<div class="bg-white p-3.5 rounded-xl border border-emerald-200 shadow-sm flex items-center justify-between bg-emerald-50/40">
<div>
<div class="text-xs font-semibold text-emerald-700">Đã Giải Quyết</div>
<div class="mt-1 text-2xl font-black text-emerald-600" id="issueKpiResolved">0</div>
</div>
<div class="w-10 h-10 rounded-lg bg-emerald-100 flex items-center justify-center text-emerald-600">
<i class="fa-solid fa-circle-check text-lg"></i>
</div>
</div>
</div>
<!-- FILTER & ACTION TOOLBAR -->
<div class="bg-white p-3 rounded-xl border border-slate-200 shadow-sm flex flex-wrap items-center justify-between gap-3">
<div class="flex flex-wrap items-center gap-2 text-xs">
<span class="font-bold text-slate-700 flex items-center gap-1">
<i class="fa-solid fa-filter text-blue-600"></i> Bộ lọc:
</span>
<select id="filterIssueStatus" class="rounded-lg border border-slate-300 px-2.5 py-1.5 bg-slate-50 outline-none">
<option value="ALL">Tất cả trạng thái</option>
<option value="CHO_XU_LY">Chờ xử lý</option>
<option value="DANG_XU_LY">Đang xử lý</option>
<option value="DA_XU_LY">Đã xử lý</option>
<option value="DONG">Đã đóng</option>
</select>
<select id="filterIssueCategory" class="rounded-lg border border-slate-300 px-2.5 py-1.5 bg-slate-50 outline-none">
<option value="ALL">Tất cả phân loại</option>
<option value="SAI_LECH_SO_LIEU">Sai lệch số liệu</option>
<option value="LOI_GIAO_DIEN">Lỗi giao diện / chức năng</option>
<option value="LOI_KET_NOI">Lỗi kết nối / timeout</option>
<option value="DE_XUAT_CAI_TIEN">Đề xuất cải tiến</option>
<option value="YEU_CAU_MOI">Yêu cầu mới</option>
<option value="KHAC">Khác</option>
</select>
<input type="text" id="filterIssueKeyword" placeholder="Tìm theo mã, tiêu đề, người báo..." class="rounded-lg border border-slate-300 px-2.5 py-1.5 bg-slate-50 outline-none w-56">
</div>
<div class="flex items-center gap-2">
<button id="btnExportIssuesExcel" class="bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-semibold py-1.5 px-3 rounded-lg shadow-sm flex items-center gap-1.5 transition-all">
<i class="fa-solid fa-file-excel"></i>
<span>Xuất Excel Tổng Hợp</span>
</button>
<button id="btnOpenIssueModal2" class="bg-rose-600 hover:bg-rose-700 text-white text-xs font-semibold py-1.5 px-3 rounded-lg shadow-sm flex items-center gap-1.5 transition-all">
<i class="fa-solid fa-plus"></i>
<span>Tạo Báo Lỗi Mới</span>
</button>
</div>
</div>
<!-- BẢNG TỔNG HỢP ISSUE -->
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full text-left text-xs border-collapse" id="tableIssues">
<thead class="bg-slate-100 text-slate-700 font-semibold uppercase border-b border-slate-200">
<tr>
<th class="py-2.5 px-3 w-28">Mã Issue</th>
<th class="py-2.5 px-3">Tiêu Đề &amp; Chi Tiết Sai Lệch</th>
<th class="py-2.5 px-3 w-32">Phân Loại / Mức Độ</th>
<th class="py-2.5 px-3 w-44">CSDL &amp; Kỳ Xem</th>
<th class="py-2.5 px-3 w-32">Người Báo</th>
<th class="py-2.5 px-3 w-24 text-center">Tệp Đính Kèm</th>
<th class="py-2.5 px-3 w-32 text-center">Trạng Thái</th>
<th class="py-2.5 px-3 w-28 text-center">Thao Tác</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-200" id="bodyIssuesList">
<tr><td colspan="8" class="text-center py-8 text-slate-400">Đang tải danh sách issue...</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
<!-- ======================================================== -->
<!-- MODAL 1: TẠO BÁO LỖI / ISSUE MỚI -->
<!-- ======================================================== -->
<div id="modalIssue" class="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4 hidden">
<div class="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[92vh] flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-150">
<!-- Modal Header -->
<div class="px-6 py-4 bg-gradient-to-r from-rose-600 to-pink-600 text-white flex items-center justify-between">
<div class="flex items-center gap-2.5">
<div class="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center">
<i class="fa-solid fa-bug text-lg"></i>
</div>
<div>
<h3 class="text-base font-bold">Gửi Báo Lỗi / Sự Cố Hệ Thống</h3>
<p class="text-xs text-rose-100">Dữ liệu và file đính kèm sẽ được lưu lại để kỹ thuật tổng hợp xử lý</p>
</div>
</div>
<button id="btnCloseIssueModal" class="text-white/80 hover:text-white p-1 rounded-lg hover:bg-white/10 text-lg transition-colors">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<!-- Modal Form Body -->
<form id="formCreateIssue" class="p-6 overflow-y-auto space-y-4 flex-1 text-xs">
<!-- Tiêu đề -->
<div>
<label class="block font-bold text-slate-700 mb-1">
Tiêu đề vấn đề / lỗi <span class="text-rose-500">*</span>:
</label>
<input type="text" id="issueTitle" required placeholder="Ví dụ: Sai lệch số lượt khám BHYT Khoa Khám Bệnh so với HIS gốc" class="w-full text-sm rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 outline-none focus:ring-2 focus:ring-rose-500 font-medium">
</div>
<!-- Phân loại & Phân hệ & Mức độ -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
<div>
<label class="block font-semibold text-slate-700 mb-1">Phân loại sự cố:</label>
<select id="issueCategory" class="w-full rounded-lg border border-slate-300 px-2.5 py-2 bg-slate-50 outline-none focus:ring-2 focus:ring-rose-500">
<option value="SAI_LECH_SO_LIEU">Sai lệch số liệu</option>
<option value="LOI_GIAO_DIEN">Lỗi giao diện / chức năng</option>
<option value="LOI_KET_NOI">Lỗi kết nối CSDL / timeout</option>
<option value="DE_XUAT_CAI_TIEN">Đề xuất cải tiến</option>
<option value="YEU_CAU_MOI">Yêu cầu báo cáo mới</option>
<option value="KHAC">Khác</option>
</select>
</div>
<div>
<label class="block font-semibold text-slate-700 mb-1">Phân hệ liên quan:</label>
<select id="issueModule" class="w-full rounded-lg border border-slate-300 px-2.5 py-2 bg-slate-50 outline-none focus:ring-2 focus:ring-rose-500">
<option value="NGOAI_TRU">1. Báo cáo Ngoại trú</option>
<option value="NOI_TRU">2. Báo cáo Nội trú</option>
<option value="CHUYEN_VIEN">Bảng 3. Chuyển viện</option>
<option value="THEO_DOI">Bảng 4. BN Theo dõi</option>
<option value="CHUNG">Chung / Toàn hệ thống</option>
</select>
</div>
<div>
<label class="block font-semibold text-slate-700 mb-1">Mức độ ưu tiên:</label>
<select id="issuePriority" class="w-full rounded-lg border border-slate-300 px-2.5 py-2 bg-slate-50 outline-none focus:ring-2 focus:ring-rose-500 font-bold text-amber-700">
<option value="BINH_THUONG" class="text-slate-700">Bình thường</option>
<option value="CAO" class="text-amber-700">Cao</option>
<option value="KHAN_CAP" class="text-rose-700">Khẩn cấp (Họp giao ban gấp)</option>
<option value="THAP" class="text-slate-500">Thấp</option>
</select>
</div>
</div>
<!-- CSDL & Mốc thời gian tự động -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 bg-slate-50 p-2.5 rounded-lg border border-slate-200">
<div>
<label class="block text-slate-500 mb-0.5">CSDL đang xem:</label>
<input type="text" id="issueDatabase" readonly class="w-full rounded border border-slate-300 px-2 py-1 bg-white text-slate-700 font-mono text-[11px]">
</div>
<div>
<label class="block text-slate-500 mb-0.5">Khoảng ngày đang xem:</label>
<input type="text" id="issuePeriod" readonly class="w-full rounded border border-slate-300 px-2 py-1 bg-white text-slate-700 font-mono text-[11px]">
</div>
</div>
<!-- Người báo & Khoa phòng -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div>
<label class="block font-semibold text-slate-700 mb-1">Người báo cáo:</label>
<input type="text" id="issueReporter" placeholder="Ví dụ: BS. Nguyễn Văn A" class="w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 outline-none focus:ring-2 focus:ring-rose-500 font-medium">
</div>
<div>
<label class="block font-semibold text-slate-700 mb-1">Khoa / Phòng ban:</label>
<input type="text" id="issueDepartment" placeholder="Ví dụ: Khoa Khám Bệnh / KHTH" class="w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 outline-none focus:ring-2 focus:ring-rose-500 font-medium">
</div>
</div>
<!-- Nội dung mô tả chi tiết -->
<div>
<label class="block font-bold text-slate-700 mb-1">
Mô tả chi tiết sai lệch / lỗi <span class="text-rose-500">*</span>:
</label>
<textarea id="issueDescription" rows="4" required placeholder="- Số liệu kỳ vọng trên HIS gốc: ...&#10;- Số liệu hiển thị trên Web: ...&#10;- Thao tác thực hiện / lỗi xuất hiện:" class="w-full rounded-lg border border-slate-300 p-2.5 bg-slate-50 outline-none focus:ring-2 focus:ring-rose-500 text-xs leading-relaxed font-sans"></textarea>
</div>
<!-- Đính kèm file / Ảnh chụp màn hình -->
<div>
<label class="block font-bold text-slate-700 mb-1 flex items-center justify-between">
<span>Đính kèm tệp / Ảnh chụp màn hình:</span>
<span class="text-slate-400 font-normal">Hỗ trợ PNG, JPG, PDF, XLSX, Log (Tối đa 25MB)</span>
</label>
<div id="issuePasteZone" class="border-2 border-dashed border-slate-300 hover:border-rose-400 rounded-xl p-3 text-center bg-slate-50/50 hover:bg-rose-50/20 transition-all cursor-pointer">
<input type="file" id="issueFileInput" class="hidden" accept="image/*,.pdf,.xlsx,.xls,.doc,.docx,.txt,.csv">
<div id="pasteZonePrompt" class="flex flex-col items-center justify-center gap-1 text-slate-500">
<i class="fa-solid fa-cloud-arrow-up text-2xl text-rose-500 mb-1"></i>
<div class="text-xs font-semibold text-slate-700">Nhấp để chọn tệp hoặc <span class="text-rose-600 underline">dán ảnh chụp màn hình (Ctrl+V)</span></div>
<div class="text-[11px] text-slate-400">Có thể dán trực tiếp ảnh từ phím tắt PrintScreen / Snipping Tool</div>
</div>
<!-- File Preview Area -->
<div id="issuePreviewArea" class="hidden mt-2 flex items-center justify-between bg-white p-2.5 rounded-lg border border-slate-200">
<div class="flex items-center gap-2 overflow-hidden">
<img id="issueImgPreview" src="" class="hidden w-12 h-12 object-cover rounded border border-slate-200">
<i id="issueFileIcon" class="fa-solid fa-file text-2xl text-slate-400 hidden"></i>
<div class="text-left truncate">
<div id="issueFileName" class="font-bold text-slate-800 text-xs truncate">ten_file.png</div>
<div id="issueFileSize" class="text-[10px] text-slate-400">0 KB</div>
</div>
</div>
<button type="button" id="btnRemoveFile" class="text-rose-500 hover:text-rose-700 text-sm p-1.5 rounded hover:bg-rose-50">
<i class="fa-solid fa-trash-can"></i>
</button>
</div>
</div>
</div>
<!-- Action buttons -->
<div class="pt-2 flex items-center justify-end gap-2 border-t border-slate-200">
<button type="button" id="btnCancelIssue" class="px-4 py-2 text-xs font-semibold text-slate-600 hover:bg-slate-100 rounded-lg transition-colors">
Hủy bỏ
</button>
<button type="submit" id="btnSubmitIssue" class="bg-gradient-to-r from-rose-600 to-pink-600 hover:from-rose-700 hover:to-pink-700 text-white px-5 py-2 rounded-lg font-bold shadow-md flex items-center gap-2 transition-all">
<i class="fa-solid fa-paper-plane"></i>
<span>Gửi Báo Lỗi &amp; Lưu File</span>
</button>
</div>
</form>
</div>
</div>
<!-- ======================================================== -->
<!-- MODAL 2: CẬP NHẬT TRẠNG THÁI & XỬ LÝ ISSUE -->
<!-- ======================================================== -->
<div id="modalUpdateIssue" class="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4 hidden">
<div class="bg-white rounded-2xl shadow-2xl max-w-lg w-full flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-150">
<div class="px-5 py-3.5 bg-slate-800 text-white flex items-center justify-between">
<h3 class="text-sm font-bold flex items-center gap-2">
<i class="fa-solid fa-pen-nib text-amber-400"></i>
<span>Cập Nhật Xử Lý Issue: <span id="updateModalIssueId" class="font-mono text-cyan-300"></span></span>
</h3>
<button id="btnCloseUpdateModal" class="text-white/80 hover:text-white p-1 rounded-lg hover:bg-white/10 text-base">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<form id="formUpdateIssue" class="p-5 space-y-3.5 text-xs">
<div>
<label class="block font-semibold text-slate-700 mb-1">Trạng thái xử lý:</label>
<select id="updateStatus" class="w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 outline-none font-bold">
<option value="CHO_XU_LY" class="text-amber-700 font-bold">Chờ xử lý (Mới tiếp nhận)</option>
<option value="DANG_XU_LY" class="text-blue-700 font-bold">Đang xử lý (Đội ngũ kỹ thuật đang sửa)</option>
<option value="DA_XU_LY" class="text-emerald-700 font-bold">Đã xử lý (Đã fix lỗi / cập nhật số liệu)</option>
<option value="DONG" class="text-slate-500 font-bold">Đóng issue (Không phải lỗi / Đã xong)</option>
</select>
</div>
<div>
<label class="block font-semibold text-slate-700 mb-1">Cán bộ / Kỹ thuật xử lý:</label>
<input type="text" id="updateResolvedBy" placeholder="Ví dụ: Dev IT / Othau" class="w-full rounded-lg border border-slate-300 px-3 py-2 bg-slate-50 outline-none font-medium">
</div>
<div>
<label class="block font-semibold text-slate-700 mb-1">Ghi chú giải pháp / Phản hồi xử lý:</label>
<textarea id="updateHandlerNotes" rows="3" placeholder="Ví dụ: Đã bổ sung điều kiện lọc theo mã đơn vị, số liệu đã khớp 100% với report HIS gốc." class="w-full rounded-lg border border-slate-300 p-2.5 bg-slate-50 outline-none leading-relaxed"></textarea>
</div>
<div class="pt-2 flex items-center justify-end gap-2 border-t border-slate-200">
<button type="button" id="btnCancelUpdate" class="px-4 py-2 font-semibold text-slate-600 hover:bg-slate-100 rounded-lg">
Đóng
</button>
<button type="submit" id="btnSaveUpdateIssue" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-bold shadow flex items-center gap-1.5">
<i class="fa-solid fa-floppy-disk"></i>
<span>Lưu Cập Nhật</span>
</button>
</div>
</form>
</div>
</div>
<!-- ======================================================== -->
<!-- MODAL 3: XEM ẢNH PHÓNG TO (LIGHTBOX) -->
<!-- ======================================================== -->
<div id="modalImagePreview" class="fixed inset-0 z-50 bg-slate-950/80 backdrop-blur-md flex items-center justify-center p-4 hidden">
<div class="relative max-w-4xl max-h-[90vh] flex flex-col items-center">
<button id="btnCloseLightbox" class="absolute -top-10 right-0 text-white/90 hover:text-white text-2xl p-1">
<i class="fa-solid fa-xmark"></i>
</button>
<img id="lightboxImg" src="" class="max-w-full max-h-[85vh] rounded-lg shadow-2xl object-contain border border-white/20">
<div id="lightboxCaption" class="mt-2 text-xs text-white/80 font-medium"></div>
</div>
</div>
<!-- ======================================================== -->
<!-- MODAL 4: CẢNH BÁO CHƯA KÍCH HOẠT BẢN QUYỀN -->
<!-- ======================================================== -->
<div id="modalLicenseBlock" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4 hidden">
<div class="bg-white rounded-2xl shadow-2xl max-w-md w-full overflow-hidden border border-rose-200">
<div class="bg-gradient-to-r from-rose-600 to-amber-600 p-5 text-white flex items-center gap-3">
<div class="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center text-2xl">
<i class="fa-solid fa-shield-halved"></i>
</div>
<div>
<h3 class="font-bold text-base uppercase">Yêu Cầu Bản Quyền Tính Năng</h3>
<p class="text-xs text-rose-100">Hệ thống DH-HIS Web Giao Ban</p>
</div>
</div>
<div class="p-6 space-y-4 text-xs leading-relaxed text-slate-700">
<div class="p-3 bg-rose-50 border border-rose-200 rounded-xl text-rose-800 font-medium" id="modalLicenseBlockMsg">
Chưa cập nhật key bản quyền hoặc key đã hết hạn sử dụng. Vui lòng liên hệ bộ phận hỗ trợ kỹ thuật để được cấp mã kích hoạt.
</div>
<p>Để tiếp tục trích xuất số liệu và sử dụng các phân hệ báo cáo giao ban, vui lòng mở trang Quản Trị và dán chuỗi key bản quyền (phần DECODE token do DH cấp).</p>
<div class="flex items-center justify-end gap-2 pt-2 border-t border-slate-200">
<button type="button" id="btnCloseLicenseModal" class="px-3 py-2 font-semibold text-slate-600 hover:bg-slate-100 rounded-lg">
Đóng
</button>
<a href="admin.html#tab-license" class="bg-gradient-to-r from-indigo-600 to-blue-600 hover:from-indigo-700 hover:to-blue-700 text-white px-4 py-2 rounded-lg font-bold shadow flex items-center gap-1.5 transition-all">
<i class="fa-solid fa-key"></i>
<span>Mở Quản Trị Nhập Key</span>
</a>
</div>
</div>
</div>
</div>
<!-- NOTIFICATION 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="app.js"></script>
</body>
</html>