870 lines
32 KiB
HTML
870 lines
32 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>PAAI 어드민 - 청춘약국</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: 'Segoe UI', 'Malgun Gothic', sans-serif;
|
||
background: #f3f4f6;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* 헤더 */
|
||
.header {
|
||
background: linear-gradient(135deg, #10b981, #059669);
|
||
color: #fff;
|
||
padding: 20px 30px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
|
||
}
|
||
.header h1 {
|
||
font-size: 1.5rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.header .nav-links {
|
||
display: flex;
|
||
gap: 15px;
|
||
}
|
||
.header .nav-links a {
|
||
color: rgba(255,255,255,0.9);
|
||
text-decoration: none;
|
||
padding: 8px 16px;
|
||
border-radius: 8px;
|
||
transition: all 0.2s;
|
||
}
|
||
.header .nav-links a:hover,
|
||
.header .nav-links a.active {
|
||
background: rgba(255,255,255,0.2);
|
||
color: #fff;
|
||
}
|
||
|
||
/* 메인 컨테이너 */
|
||
.container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
/* 통계 카드 */
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
.stat-card {
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
}
|
||
.stat-card .icon {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.5rem;
|
||
}
|
||
.stat-card .icon.blue { background: #dbeafe; }
|
||
.stat-card .icon.green { background: #d1fae5; }
|
||
.stat-card .icon.yellow { background: #fef3c7; }
|
||
.stat-card .icon.red { background: #fee2e2; }
|
||
.stat-card .icon.purple { background: #ede9fe; }
|
||
.stat-card .info { flex: 1; }
|
||
.stat-card .value { font-size: 1.8rem; font-weight: 700; color: #1f2937; }
|
||
.stat-card .label { font-size: 0.85rem; color: #6b7280; }
|
||
|
||
/* 섹션 */
|
||
.section {
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||
margin-bottom: 20px;
|
||
overflow: hidden;
|
||
}
|
||
.section-header {
|
||
background: #f9fafb;
|
||
padding: 15px 20px;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.section-header h2 {
|
||
font-size: 1.1rem;
|
||
color: #374151;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.section-body {
|
||
padding: 20px;
|
||
}
|
||
|
||
/* 필터 */
|
||
.filters {
|
||
display: flex;
|
||
gap: 15px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 20px;
|
||
}
|
||
.filter-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.filter-group label {
|
||
font-size: 0.85rem;
|
||
color: #6b7280;
|
||
}
|
||
.filter-group input,
|
||
.filter-group select {
|
||
padding: 8px 12px;
|
||
border: 1px solid #d1d5db;
|
||
border-radius: 8px;
|
||
font-size: 0.9rem;
|
||
}
|
||
.filter-group input:focus,
|
||
.filter-group select:focus {
|
||
outline: none;
|
||
border-color: #10b981;
|
||
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
|
||
}
|
||
.btn {
|
||
padding: 8px 16px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 0.9rem;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
.btn-primary {
|
||
background: #10b981;
|
||
color: #fff;
|
||
}
|
||
.btn-primary:hover { background: #059669; }
|
||
.btn-secondary {
|
||
background: #e5e7eb;
|
||
color: #374151;
|
||
}
|
||
.btn-secondary:hover { background: #d1d5db; }
|
||
|
||
/* 로그 테이블 */
|
||
.log-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
.log-table th {
|
||
background: #f9fafb;
|
||
padding: 12px 15px;
|
||
text-align: left;
|
||
font-weight: 600;
|
||
color: #374151;
|
||
border-bottom: 2px solid #e5e7eb;
|
||
font-size: 0.85rem;
|
||
}
|
||
.log-table td {
|
||
padding: 12px 15px;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
font-size: 0.9rem;
|
||
color: #4b5563;
|
||
}
|
||
.log-table tr:hover { background: #f9fafb; }
|
||
.log-table .badge {
|
||
padding: 4px 10px;
|
||
border-radius: 20px;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
}
|
||
.badge-success { background: #d1fae5; color: #065f46; }
|
||
.badge-error { background: #fee2e2; color: #991b1b; }
|
||
.badge-pending { background: #fef3c7; color: #92400e; }
|
||
.badge-severe { background: #fee2e2; color: #dc2626; }
|
||
.badge-useful { background: #d1fae5; color: #065f46; }
|
||
.badge-not-useful { background: #fee2e2; color: #991b1b; }
|
||
.badge-no-feedback { background: #e5e7eb; color: #6b7280; }
|
||
|
||
.log-table .actions button {
|
||
padding: 6px 12px;
|
||
background: #ede9fe;
|
||
color: #7c3aed;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 0.8rem;
|
||
cursor: pointer;
|
||
}
|
||
.log-table .actions button:hover {
|
||
background: #ddd6fe;
|
||
}
|
||
|
||
/* 모달 */
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: rgba(0,0,0,0.5);
|
||
z-index: 1000;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
padding: 40px 20px;
|
||
overflow-y: auto;
|
||
}
|
||
.modal.show { display: flex; }
|
||
.modal-content {
|
||
background: #fff;
|
||
border-radius: 16px;
|
||
width: 100%;
|
||
max-width: 900px;
|
||
box-shadow: 0 25px 50px rgba(0,0,0,0.2);
|
||
}
|
||
.modal-header {
|
||
background: linear-gradient(135deg, #7c3aed, #a855f7);
|
||
color: #fff;
|
||
padding: 20px 25px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-radius: 16px 16px 0 0;
|
||
}
|
||
.modal-header h3 { font-size: 1.2rem; }
|
||
.modal-close {
|
||
background: rgba(255,255,255,0.2);
|
||
border: none;
|
||
color: #fff;
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
font-size: 1.5rem;
|
||
cursor: pointer;
|
||
}
|
||
.modal-close:hover { background: rgba(255,255,255,0.3); }
|
||
.modal-body {
|
||
padding: 25px;
|
||
max-height: 70vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* 상세 로그 섹션 */
|
||
.detail-section {
|
||
margin-bottom: 20px;
|
||
}
|
||
.detail-section-title {
|
||
font-size: 0.9rem;
|
||
font-weight: 700;
|
||
color: #374151;
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
cursor: pointer;
|
||
}
|
||
.detail-section-title:hover { color: #10b981; }
|
||
.detail-section-content {
|
||
background: #f9fafb;
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
font-size: 0.85rem;
|
||
line-height: 1.6;
|
||
}
|
||
.detail-section-content.collapsed {
|
||
display: none;
|
||
}
|
||
.detail-section-content pre {
|
||
background: #1f2937;
|
||
color: #e5e7eb;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
overflow-x: auto;
|
||
font-family: 'Consolas', 'Monaco', monospace;
|
||
font-size: 0.8rem;
|
||
line-height: 1.5;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
}
|
||
.detail-grid {
|
||
display: grid;
|
||
grid-template-columns: 120px 1fr;
|
||
gap: 8px 15px;
|
||
}
|
||
.detail-grid dt {
|
||
color: #6b7280;
|
||
font-weight: 500;
|
||
}
|
||
.detail-grid dd {
|
||
color: #1f2937;
|
||
}
|
||
|
||
/* 차트 영역 */
|
||
.chart-container {
|
||
height: 200px;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: 8px;
|
||
padding: 20px 0;
|
||
}
|
||
.chart-bar {
|
||
flex: 1;
|
||
background: linear-gradient(to top, #10b981, #34d399);
|
||
border-radius: 4px 4px 0 0;
|
||
min-height: 10px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
.chart-bar:hover {
|
||
transform: scaleY(1.05);
|
||
transform-origin: bottom;
|
||
}
|
||
.chart-bar .tooltip {
|
||
position: absolute;
|
||
bottom: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: #1f2937;
|
||
color: #fff;
|
||
padding: 8px 12px;
|
||
border-radius: 6px;
|
||
font-size: 0.75rem;
|
||
white-space: nowrap;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.2s;
|
||
}
|
||
.chart-bar:hover .tooltip { opacity: 1; }
|
||
.chart-labels {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
.chart-labels span {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 0.7rem;
|
||
color: #9ca3af;
|
||
}
|
||
|
||
/* 로딩 */
|
||
.loading {
|
||
text-align: center;
|
||
padding: 40px;
|
||
color: #9ca3af;
|
||
}
|
||
.spinner {
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 4px solid #e5e7eb;
|
||
border-top-color: #10b981;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
margin: 0 auto 15px;
|
||
}
|
||
@keyframes spin { to { transform: rotate(360deg); } }
|
||
|
||
/* 빈 상태 */
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 60px 20px;
|
||
color: #9ca3af;
|
||
}
|
||
.empty-state .icon { font-size: 3rem; margin-bottom: 15px; }
|
||
|
||
/* 반응형 */
|
||
@media (max-width: 768px) {
|
||
.stats-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
.filters {
|
||
flex-direction: column;
|
||
}
|
||
.log-table {
|
||
font-size: 0.8rem;
|
||
}
|
||
.log-table th, .log-table td {
|
||
padding: 8px 10px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 헤더 -->
|
||
<header class="header">
|
||
<h1>🤖 PAAI 어드민</h1>
|
||
<nav class="nav-links">
|
||
<a href="/pmr" class="active">← 조제관리</a>
|
||
<a href="#" onclick="refreshData()">🔄 새로고침</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<!-- 메인 -->
|
||
<div class="container">
|
||
<!-- 통계 카드 -->
|
||
<div class="stats-grid" id="statsGrid">
|
||
<div class="stat-card">
|
||
<div class="icon blue">📊</div>
|
||
<div class="info">
|
||
<div class="value" id="statTotal">-</div>
|
||
<div class="label">총 분석</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="icon green">📅</div>
|
||
<div class="info">
|
||
<div class="value" id="statToday">-</div>
|
||
<div class="label">오늘</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="icon purple">👍</div>
|
||
<div class="info">
|
||
<div class="value" id="statUseful">-</div>
|
||
<div class="label">유용 평가율</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="icon yellow">⚠️</div>
|
||
<div class="info">
|
||
<div class="value" id="statSevere">-</div>
|
||
<div class="label">KIMS 경고 (오늘)</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="icon blue">⏱️</div>
|
||
<div class="info">
|
||
<div class="value" id="statAvgTime">-</div>
|
||
<div class="label">평균 응답시간</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 일별 통계 차트 -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<h2>📈 일별 분석 추이 (최근 14일)</h2>
|
||
</div>
|
||
<div class="section-body">
|
||
<div class="chart-container" id="dailyChart"></div>
|
||
<div class="chart-labels" id="chartLabels"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 분석 이력 -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<h2>📋 분석 이력</h2>
|
||
</div>
|
||
<div class="section-body">
|
||
<!-- 필터 -->
|
||
<div class="filters">
|
||
<div class="filter-group">
|
||
<label>날짜:</label>
|
||
<input type="date" id="filterDate">
|
||
</div>
|
||
<div class="filter-group">
|
||
<label>환자명:</label>
|
||
<input type="text" id="filterPatient" placeholder="검색...">
|
||
</div>
|
||
<div class="filter-group">
|
||
<label>상태:</label>
|
||
<select id="filterStatus">
|
||
<option value="">전체</option>
|
||
<option value="success">성공</option>
|
||
<option value="error">에러</option>
|
||
<option value="pending">대기중</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-group">
|
||
<label>KIMS 경고:</label>
|
||
<select id="filterSevere">
|
||
<option value="">전체</option>
|
||
<option value="true">있음</option>
|
||
<option value="false">없음</option>
|
||
</select>
|
||
</div>
|
||
<button class="btn btn-primary" onclick="loadLogs()">검색</button>
|
||
<button class="btn btn-secondary" onclick="clearFilters()">초기화</button>
|
||
</div>
|
||
|
||
<!-- 테이블 -->
|
||
<div id="logsContainer">
|
||
<div class="loading">
|
||
<div class="spinner"></div>
|
||
<div>로딩 중...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 상세 모달 -->
|
||
<div class="modal" id="detailModal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3 id="modalTitle">📋 분석 상세</h3>
|
||
<button class="modal-close" onclick="closeModal()">×</button>
|
||
</div>
|
||
<div class="modal-body" id="modalBody">
|
||
<div class="loading">
|
||
<div class="spinner"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 초기화
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
loadStats();
|
||
loadDailyStats();
|
||
loadLogs();
|
||
});
|
||
|
||
// 통계 로드
|
||
async function loadStats() {
|
||
try {
|
||
const res = await fetch('/pmr/api/admin/stats');
|
||
const data = await res.json();
|
||
|
||
if (data.success) {
|
||
const s = data.stats;
|
||
document.getElementById('statTotal').textContent = s.total.toLocaleString();
|
||
document.getElementById('statToday').textContent = s.today;
|
||
document.getElementById('statSevere').textContent = s.severe_count;
|
||
document.getElementById('statAvgTime').textContent = (s.avg_response_time / 1000).toFixed(1) + '초';
|
||
|
||
if (s.feedback && s.feedback.total > 0) {
|
||
document.getElementById('statUseful').textContent = s.feedback.rate + '%';
|
||
} else {
|
||
document.getElementById('statUseful').textContent = '-';
|
||
}
|
||
}
|
||
} catch (err) {
|
||
console.error('Stats error:', err);
|
||
}
|
||
}
|
||
|
||
// 일별 통계 로드
|
||
async function loadDailyStats() {
|
||
try {
|
||
const res = await fetch('/pmr/api/admin/feedback-stats');
|
||
const data = await res.json();
|
||
|
||
if (data.success && data.stats.length > 0) {
|
||
renderChart(data.stats.slice(0, 14).reverse());
|
||
}
|
||
} catch (err) {
|
||
console.error('Daily stats error:', err);
|
||
}
|
||
}
|
||
|
||
// 차트 렌더링
|
||
function renderChart(stats) {
|
||
const container = document.getElementById('dailyChart');
|
||
const labels = document.getElementById('chartLabels');
|
||
|
||
const maxTotal = Math.max(...stats.map(s => s.total), 1);
|
||
|
||
container.innerHTML = stats.map(s => {
|
||
const height = Math.max((s.total / maxTotal) * 100, 5);
|
||
const usefulPct = s.total > 0 ? Math.round((s.useful / s.total) * 100) : 0;
|
||
return `
|
||
<div class="chart-bar" style="height: ${height}%">
|
||
<div class="tooltip">
|
||
${s.date.slice(5)}<br>
|
||
분석: ${s.total}건<br>
|
||
유용: ${usefulPct}%<br>
|
||
경고: ${s.severe}건
|
||
</div>
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
|
||
labels.innerHTML = stats.map(s => `<span>${s.date.slice(5)}</span>`).join('');
|
||
}
|
||
|
||
// 로그 로드
|
||
async function loadLogs() {
|
||
const container = document.getElementById('logsContainer');
|
||
container.innerHTML = '<div class="loading"><div class="spinner"></div><div>로딩 중...</div></div>';
|
||
|
||
try {
|
||
const params = new URLSearchParams();
|
||
|
||
const date = document.getElementById('filterDate').value;
|
||
const patient = document.getElementById('filterPatient').value;
|
||
const status = document.getElementById('filterStatus').value;
|
||
const severe = document.getElementById('filterSevere').value;
|
||
|
||
if (date) params.append('date', date);
|
||
if (patient) params.append('patient_name', patient);
|
||
if (status) params.append('status', status);
|
||
if (severe) params.append('has_severe', severe);
|
||
params.append('limit', '100');
|
||
|
||
const res = await fetch('/pmr/api/admin/logs?' + params.toString());
|
||
const data = await res.json();
|
||
|
||
if (data.success) {
|
||
renderLogs(data.logs);
|
||
} else {
|
||
container.innerHTML = '<div class="empty-state"><div class="icon">⚠️</div><div>로드 실패</div></div>';
|
||
}
|
||
} catch (err) {
|
||
console.error('Logs error:', err);
|
||
container.innerHTML = '<div class="empty-state"><div class="icon">⚠️</div><div>오류 발생</div></div>';
|
||
}
|
||
}
|
||
|
||
// 로그 테이블 렌더링
|
||
function renderLogs(logs) {
|
||
const container = document.getElementById('logsContainer');
|
||
|
||
if (logs.length === 0) {
|
||
container.innerHTML = '<div class="empty-state"><div class="icon">📭</div><div>분석 이력이 없습니다</div></div>';
|
||
return;
|
||
}
|
||
|
||
container.innerHTML = `
|
||
<table class="log-table">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>일시</th>
|
||
<th>환자</th>
|
||
<th>약품수</th>
|
||
<th>KIMS</th>
|
||
<th>상태</th>
|
||
<th>피드백</th>
|
||
<th>응답시간</th>
|
||
<th>상세</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
${logs.map(log => {
|
||
const date = new Date(log.created_at);
|
||
const dateStr = date.toLocaleString('ko-KR', {
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit'
|
||
});
|
||
|
||
const statusBadge = {
|
||
'success': '<span class="badge badge-success">성공</span>',
|
||
'error': '<span class="badge badge-error">에러</span>',
|
||
'pending': '<span class="badge badge-pending">대기</span>',
|
||
'kims_done': '<span class="badge badge-pending">AI 대기</span>'
|
||
}[log.status] || log.status;
|
||
|
||
let feedbackBadge = '<span class="badge badge-no-feedback">-</span>';
|
||
if (log.feedback_useful === 1) {
|
||
feedbackBadge = '<span class="badge badge-useful">👍</span>';
|
||
} else if (log.feedback_useful === 0) {
|
||
feedbackBadge = '<span class="badge badge-not-useful">👎</span>';
|
||
}
|
||
|
||
const kimsInfo = log.kims_has_severe
|
||
? `<span class="badge badge-severe">⚠️ ${log.kims_interaction_count}건</span>`
|
||
: (log.kims_interaction_count > 0 ? `${log.kims_interaction_count}건` : '-');
|
||
|
||
const responseTime = log.ai_response_time_ms
|
||
? (log.ai_response_time_ms / 1000).toFixed(1) + '초'
|
||
: '-';
|
||
|
||
return `
|
||
<tr>
|
||
<td>${log.id}</td>
|
||
<td>${dateStr}</td>
|
||
<td>${log.patient_name || '-'}</td>
|
||
<td>${log.current_med_count || 0}</td>
|
||
<td>${kimsInfo}</td>
|
||
<td>${statusBadge}</td>
|
||
<td>${feedbackBadge}</td>
|
||
<td>${responseTime}</td>
|
||
<td class="actions">
|
||
<button onclick="showDetail(${log.id})">상세</button>
|
||
</td>
|
||
</tr>
|
||
`;
|
||
}).join('')}
|
||
</tbody>
|
||
</table>
|
||
`;
|
||
}
|
||
|
||
// 필터 초기화
|
||
function clearFilters() {
|
||
document.getElementById('filterDate').value = '';
|
||
document.getElementById('filterPatient').value = '';
|
||
document.getElementById('filterStatus').value = '';
|
||
document.getElementById('filterSevere').value = '';
|
||
loadLogs();
|
||
}
|
||
|
||
// 상세 보기
|
||
async function showDetail(logId) {
|
||
const modal = document.getElementById('detailModal');
|
||
const body = document.getElementById('modalBody');
|
||
const title = document.getElementById('modalTitle');
|
||
|
||
modal.classList.add('show');
|
||
body.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
|
||
|
||
try {
|
||
const res = await fetch(`/pmr/api/admin/log/${logId}`);
|
||
const data = await res.json();
|
||
|
||
if (data.success) {
|
||
renderDetail(data.log);
|
||
} else {
|
||
body.innerHTML = '<div class="empty-state">로드 실패</div>';
|
||
}
|
||
} catch (err) {
|
||
console.error('Detail error:', err);
|
||
body.innerHTML = '<div class="empty-state">오류 발생</div>';
|
||
}
|
||
}
|
||
|
||
// 상세 렌더링
|
||
function renderDetail(log) {
|
||
const body = document.getElementById('modalBody');
|
||
const title = document.getElementById('modalTitle');
|
||
|
||
title.textContent = `📋 분석 상세 - ${log.patient_name || '환자'}님 (#${log.id})`;
|
||
|
||
// 약품 목록 포맷
|
||
let medsHtml = '-';
|
||
if (log.current_medications && log.current_medications.length > 0) {
|
||
medsHtml = log.current_medications.map(m =>
|
||
`${m.name || m.code} (${m.dosage || '-'} × ${m.frequency || '-'}회 × ${m.days || '-'}일)`
|
||
).join('<br>');
|
||
}
|
||
|
||
// 피드백 상태
|
||
let feedbackHtml = '<span class="badge badge-no-feedback">없음</span>';
|
||
if (log.feedback_useful === 1) {
|
||
feedbackHtml = '<span class="badge badge-useful">👍 유용해요</span>';
|
||
} else if (log.feedback_useful === 0) {
|
||
feedbackHtml = '<span class="badge badge-not-useful">👎 아니요</span>';
|
||
}
|
||
|
||
body.innerHTML = `
|
||
<!-- 기본 정보 -->
|
||
<div class="detail-section">
|
||
<div class="detail-section-title" onclick="toggleSection(this)">
|
||
▼ 환자/처방 정보
|
||
</div>
|
||
<div class="detail-section-content">
|
||
<dl class="detail-grid">
|
||
<dt>처방번호</dt><dd>${log.pre_serial || '-'}</dd>
|
||
<dt>환자코드</dt><dd>${log.patient_code || '-'}</dd>
|
||
<dt>환자명</dt><dd>${log.patient_name || '-'}</dd>
|
||
<dt>질병 1</dt><dd>[${log.disease_code_1 || '-'}] ${log.disease_name_1 || '-'}</dd>
|
||
<dt>질병 2</dt><dd>[${log.disease_code_2 || '-'}] ${log.disease_name_2 || '-'}</dd>
|
||
<dt>약품</dt><dd>${medsHtml}</dd>
|
||
<dt>분석일시</dt><dd>${log.created_at}</dd>
|
||
<dt>상태</dt><dd>${log.status}</dd>
|
||
<dt>피드백</dt><dd>${feedbackHtml}</dd>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KIMS 결과 -->
|
||
<div class="detail-section">
|
||
<div class="detail-section-title" onclick="toggleSection(this)">
|
||
▼ KIMS 상호작용 (${log.kims_response_time_ms || 0}ms)
|
||
</div>
|
||
<div class="detail-section-content">
|
||
<p><strong>조회 약품:</strong> ${(log.kims_drug_codes || []).join(', ') || '-'}</p>
|
||
<p><strong>상호작용:</strong> ${log.kims_interaction_count || 0}건 ${log.kims_has_severe ? '⚠️ 중증 포함' : ''}</p>
|
||
${log.kims_interactions && log.kims_interactions.length > 0 ? `
|
||
<pre>${JSON.stringify(log.kims_interactions, null, 2)}</pre>
|
||
` : ''}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI 프롬프트 -->
|
||
<div class="detail-section">
|
||
<div class="detail-section-title" onclick="toggleSection(this)">
|
||
▶ AI 프롬프트 (클릭하여 펼치기)
|
||
</div>
|
||
<div class="detail-section-content collapsed">
|
||
<pre>${escapeHtml(log.ai_prompt || '없음')}</pre>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI 응답 -->
|
||
<div class="detail-section">
|
||
<div class="detail-section-title" onclick="toggleSection(this)">
|
||
▼ AI 응답 (${log.ai_response_time_ms || 0}ms, ${log.ai_model || '-'})
|
||
</div>
|
||
<div class="detail-section-content">
|
||
<pre>${JSON.stringify(log.ai_response, null, 2) || '없음'}</pre>
|
||
</div>
|
||
</div>
|
||
|
||
${log.error_message ? `
|
||
<div class="detail-section">
|
||
<div class="detail-section-title" style="color: #dc2626;">
|
||
⚠️ 에러 메시지
|
||
</div>
|
||
<div class="detail-section-content" style="background: #fee2e2;">
|
||
${escapeHtml(log.error_message)}
|
||
</div>
|
||
</div>
|
||
` : ''}
|
||
`;
|
||
}
|
||
|
||
// 섹션 토글
|
||
function toggleSection(titleEl) {
|
||
const content = titleEl.nextElementSibling;
|
||
const isCollapsed = content.classList.contains('collapsed');
|
||
|
||
content.classList.toggle('collapsed');
|
||
titleEl.textContent = titleEl.textContent.replace(/^[▼▶]/, isCollapsed ? '▼' : '▶');
|
||
}
|
||
|
||
// 모달 닫기
|
||
function closeModal() {
|
||
document.getElementById('detailModal').classList.remove('show');
|
||
}
|
||
|
||
// 데이터 새로고침
|
||
function refreshData() {
|
||
loadStats();
|
||
loadDailyStats();
|
||
loadLogs();
|
||
}
|
||
|
||
// HTML 이스케이프
|
||
function escapeHtml(text) {
|
||
if (!text) return '';
|
||
const div = document.createElement('div');
|
||
div.textContent = text;
|
||
return div.innerHTML;
|
||
}
|
||
|
||
// 모달 외부 클릭 시 닫기
|
||
document.getElementById('detailModal').addEventListener('click', (e) => {
|
||
if (e.target === e.currentTarget) closeModal();
|
||
});
|
||
|
||
// ESC 키로 모달 닫기
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape') closeModal();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|