900 lines
52 KiB
HTML
900 lines
52 KiB
HTML
<!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</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>
|
||
|
|
</h1>
|
||
|
|
<p class="text-xs text-sky-200">Báo cáo Giao ban Ngoại trú & Nội trú hằng ngày - Phân tích đối chiếu đa chu kỳ</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 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>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<!-- 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">Từ ngày:</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-50 outline-none focus:ring-2 focus:ring-blue-500" value="2026-03-01">
|
||
|
|
</div>
|
||
|
|
<div class="w-1/2">
|
||
|
|
<label class="block text-xs font-semibold text-slate-600 mb-1">Đến ngày:</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-50 outline-none focus:ring-2 focus:ring-blue-500" value="2026-03-31">
|
||
|
|
</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 gap-4">
|
||
|
|
<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 (Ví dụ: Tháng 01/2026):
|
||
|
|
</span>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<label class="text-xs text-slate-600 font-medium">Từ:</label>
|
||
|
|
<input type="date" id="compareFrom" class="text-sm rounded border border-indigo-300 px-2 py-1 bg-white outline-none" value="2026-01-01">
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<label class="text-xs text-slate-600 font-medium">Đến:</label>
|
||
|
|
<input type="date" id="compareTo" class="text-sm rounded border border-indigo-300 px-2 py-1 bg-white outline-none" value="2026-01-31">
|
||
|
|
</div>
|
||
|
|
<span class="text-xs text-slate-500 italic">* Hệ thống sẽ đối chiếu song song và vẽ biểu đồ cột tăng giảm tự động.</span>
|
||
|
|
</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-issues">
|
||
|
|
<i class="fa-solid fa-clipboard-list text-rose-500"></i>
|
||
|
|
<span>3. Quản Lý Issue & 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 & 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 & 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">
|
||
|
|
<button class="chart-type-btn active px-2.5 py-1 rounded bg-blue-100 text-blue-700 font-semibold" data-chart="khoa">Theo Khoa</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 items-center justify-between border-b border-slate-100 pb-2 mb-3">
|
||
|
|
<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 Đồ Lưu Lượng Bệnh Nhân & So Sánh Đa Chu Kỳ</span>
|
||
|
|
</h2>
|
||
|
|
<span class="text-xs text-slate-500">So sánh số bệnh mới nhập viện giữa các khoa</span>
|
||
|
|
</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 & 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: 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 Đề & 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 & 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: ... - Số liệu hiển thị trên Web: ... - 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 & 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>
|
||
|
|
|
||
|
|
<!-- 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>
|