thug0bin/pharmacy-pos-qr-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(재고): 약품 더블클릭 시 입고이력 모달 추가

Browse Source 
- 새 API: GET /api/drugs/<drug_code>/purchase-history
  - WH_sub + WH_main + PM_BASE.CD_custom 조인
  - 도매상명, 입고일, 수량, 단가, 전화번호 반환
- admin_products.html 업데이트:
  - tr ondblclick → openPurchaseModal()
  - 입고이력 모달 UI/스타일 추가
  - 도매상 전화번호 클릭 시 복사 기능
  - 결과 카운트 옆에 더블클릭 힌트 추가
- 기타 onclick에 event.stopPropagation() 추가 (충돌 방지)
This commit is contained in:
thug0bin
2026-03-08 10:33:21 +09:00
parent d6cf4c2cc1
commit 91f8dea5b4
31 changed files with 516 additions and 1036 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
backend/templates/admin_products.html
View File

@@ -590,6 +590,135 @@
.location-modal-btn.primary { background: #f59e0b; color: #fff; }
.location-modal-btn.primary:hover { background: #d97706; }
/* ── 입고이력 모달 ── */
.purchase-modal {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.6);
z-index: 2000;
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
}
.purchase-modal.show { display: flex; }
.purchase-modal-content {
background: #fff;
border-radius: 16px;
padding: 0;
max-width: 600px;
width: 95%;
max-height: 80vh;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: modalSlideIn 0.2s ease;
overflow: hidden;
display: flex;
flex-direction: column;
}
.purchase-modal-header {
padding: 20px 24px;
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: #fff;
}
.purchase-modal-header h3 {
margin: 0 0 6px 0;
font-size: 18px;
display: flex;
align-items: center;
gap: 8px;
}
.purchase-modal-header .drug-name {
font-size: 14px;
opacity: 0.9;
}
.purchase-modal-body {
padding: 16px 24px 24px;
overflow-y: auto;
flex: 1;
}
.purchase-history-table {
width: 100%;
border-collapse: collapse;
}
.purchase-history-table th {
background: #f8fafc;
padding: 12px 10px;
font-size: 12px;
font-weight: 600;
color: #64748b;
text-align: left;
border-bottom: 2px solid #e2e8f0;
position: sticky;
top: 0;
}
.purchase-history-table td {
padding: 14px 10px;
font-size: 14px;
border-bottom: 1px solid #f1f5f9;
}
.purchase-history-table tr:hover td {
background: #f8fafc;
}
.supplier-name {
font-weight: 600;
color: #1e293b;
}
.supplier-tel {
font-size: 12px;
color: #3b82f6;
cursor: pointer;
}
.supplier-tel:hover {
text-decoration: underline;
}
.purchase-date {
color: #64748b;
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
}
.purchase-qty {
font-weight: 600;
color: #10b981;
}
.purchase-price {
color: #6b7280;
}
.purchase-empty {
text-align: center;
padding: 40px 20px;
color: #94a3b8;
}
.purchase-empty .icon {
font-size: 40px;
margin-bottom: 12px;
}
.purchase-modal-footer {
padding: 16px 24px;
border-top: 1px solid #e2e8f0;
display: flex;
justify-content: flex-end;
}
.purchase-modal-btn {
padding: 10px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
font-size: 14px;
background: #f1f5f9;
color: #64748b;
transition: all 0.15s;
}
.purchase-modal-btn:hover {
background: #e2e8f0;
}
tbody tr {
cursor: pointer;
}
tbody tr:active {
background: #ede9fe;
}
/* ── 가격 ── */
.price {
font-weight: 600;
@@ -916,6 +1045,7 @@
<!-- 결과 -->
<div class="result-count" id="resultCount" style="display:none;">
검색 결과: <strong id="resultNum">0</strong>건
<span style="margin-left: 16px; color: #94a3b8; font-size: 12px;">💡 행 더블클릭 → 입고이력</span>
</div>
<div class="table-wrap">
@@ -993,6 +1123,34 @@
</div>
</div>
<!-- 입고이력 모달 -->
<div class="purchase-modal" id="purchaseModal" onclick="if(event.target===this)closePurchaseModal()">
<div class="purchase-modal-content">
<div class="purchase-modal-header">
<h3>📦 입고 이력</h3>
<div class="drug-name" id="purchaseDrugName">-</div>
</div>
<div class="purchase-modal-body">
<table class="purchase-history-table">
<thead>
<tr>
<th>도매상</th>
<th>입고일</th>
<th>수량</th>
<th>단가</th>
</tr>
</thead>
<tbody id="purchaseHistoryBody">
<tr><td colspan="4" class="purchase-empty"><div class="icon">📭</div><p>로딩 중...</p></td></tr>
</tbody>
</table>
</div>
<div class="purchase-modal-footer">
<button class="purchase-modal-btn" onclick="closePurchaseModal()">닫기</button>
</div>
</div>
</div>
<script>
let productsData = [];
let selectedItem = null;
@@ -1069,17 +1227,17 @@
: '';
return `
<tr>
<tr ondblclick="openPurchaseModal('${item.drug_code}', '${escapeHtml(item.product_name).replace(/'/g, "\\'")}')">
<td style="text-align:center;">
${item.thumbnail
? `<img src="data:image/jpeg;base64,${item.thumbnail}" class="product-thumb" onclick="openImageModal('${item.barcode || ''}', '${item.drug_code || ''}', '${escapeHtml(item.product_name)}')" alt="">`
: `<div class="product-thumb-placeholder" onclick="openImageModal('${item.barcode || ''}', '${item.drug_code || ''}', '${escapeHtml(item.product_name)}')"><svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-5-7l-3 3.72L9 13l-3 4h12l-4-5z"/></svg></div>`
? `<img src="data:image/jpeg;base64,${item.thumbnail}" class="product-thumb" onclick="event.stopPropagation();openImageModal('${item.barcode || ''}', '${item.drug_code || ''}', '${escapeHtml(item.product_name)}')" alt="">`
: `<div class="product-thumb-placeholder" onclick="event.stopPropagation();openImageModal('${item.barcode || ''}', '${item.drug_code || ''}', '${escapeHtml(item.product_name)}')"><svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-5-7l-3 3.72L9 13l-3 4h12l-4-5z"/></svg></div>`
}
</td>
<td>
<div class="product-name">
${escapeHtml(item.product_name)}
${item.is_animal_drug ? `<span class="animal-badge ${item.apc ? 'clickable' : ''}" ${item.apc ? `onclick="printAnimalDrugInfo('${item.apc}', '${escapeHtml(item.product_name)}')" title="클릭하면 약품 안내서 인쇄"` : 'title="APC 없음"'}>🐾 동물약</span>` : ''}
${item.is_animal_drug ? `<span class="animal-badge ${item.apc ? 'clickable' : ''}" ${item.apc ? `onclick="event.stopPropagation();printAnimalDrugInfo('${item.apc}', '${escapeHtml(item.product_name)}')" title="클릭하면 약품 안내서 인쇄"` : 'title="APC 없음"'}>🐾 동물약</span>` : ''}
${categoryBadge}
</div>
<div class="product-supplier ${item.is_set ? 'set' : ''}">${escapeHtml(item.supplier) || ''}</div>
@@ -1092,12 +1250,12 @@
<div style="margin-top:4px;">${item.apc ? `<span class="code code-apc">${item.apc}</span>` : `<span class="code code-apc-na">APC미지정</span>`}</div>`
: (item.barcode ? `<span class="code code-barcode">${item.barcode}</span>` : `<span class="code code-na">없음</span>`)}</td>
<td>${item.location
? `<span class="location-badge" onclick="openLocationModal('${item.drug_code}', '${escapeHtml(item.product_name)}', '${escapeHtml(item.location)}')">${escapeHtml(item.location)}</span>`
: `<span class="location-badge unset" onclick="openLocationModal('${item.drug_code}', '${escapeHtml(item.product_name)}', '')">미지정</span>`}</td>
? `<span class="location-badge" onclick="event.stopPropagation();openLocationModal('${item.drug_code}', '${escapeHtml(item.product_name)}', '${escapeHtml(item.location)}')">${escapeHtml(item.location)}</span>`
: `<span class="location-badge unset" onclick="event.stopPropagation();openLocationModal('${item.drug_code}', '${escapeHtml(item.product_name)}', '')">미지정</span>`}</td>
<td class="stock ${(item.stock || 0) > 0 ? 'in-stock' : 'out-stock'}">${item.stock || 0}${wsStock}</td>
<td class="price">${formatPrice(item.sale_price)}</td>
<td>
<button class="btn-qr" onclick="printQR(${idx})">🏷️ QR</button>
<button class="btn-qr" onclick="event.stopPropagation();printQR(${idx})">🏷️ QR</button>
</td>
</tr>
`}).join('');
@@ -1833,6 +1991,65 @@
document.getElementById('locationModal')?.addEventListener('click', e => {
if (e.target.id === 'locationModal') closeLocationModal();
});
// ══════════════════════════════════════════════════════════════════
// 입고이력 모달
// ══════════════════════════════════════════════════════════════════
async function openPurchaseModal(drugCode, drugName) {
const modal = document.getElementById('purchaseModal');
const nameEl = document.getElementById('purchaseDrugName');
const tbody = document.getElementById('purchaseHistoryBody');
nameEl.textContent = drugName || drugCode;
tbody.innerHTML = '<tr><td colspan="4" class="purchase-empty"><div class="icon">⏳</div><p>입고이력 조회 중...</p></td></tr>';
modal.classList.add('show');
try {
const res = await fetch(`/api/drugs/${drugCode}/purchase-history`);
const data = await res.json();
if (data.success) {
if (data.history.length === 0) {
tbody.innerHTML = '<tr><td colspan="4" class="purchase-empty"><div class="icon">📭</div><p>입고 이력이 없습니다</p></td></tr>';
} else {
tbody.innerHTML = data.history.map(h => `
<tr>
<td>
<div class="supplier-name">${escapeHtml(h.supplier)}</div>
${h.supplier_tel ? `<div class="supplier-tel" onclick="copyToClipboard('${h.supplier_tel}')" title="클릭하여 복사">📞 ${h.supplier_tel}</div>` : ''}
</td>
<td class="purchase-date">${h.date}</td>
<td class="purchase-qty">${h.quantity.toLocaleString()}</td>
<td class="purchase-price">${h.unit_price ? formatPrice(h.unit_price) : '-'}</td>
</tr>
`).join('');
}
} else {
tbody.innerHTML = `<tr><td colspan="4" class="purchase-empty"><div class="icon">⚠️</div><p>조회 실패: ${data.error}</p></td></tr>`;
}
} catch (err) {
tbody.innerHTML = `<tr><td colspan="4" class="purchase-empty"><div class="icon">❌</div><p>오류: ${err.message}</p></td></tr>`;
}
}
function closePurchaseModal() {
document.getElementById('purchaseModal').classList.remove('show');
}
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(() => {
showToast(`📋 ${text} 복사됨`, 'success');
}).catch(() => {
// fallback
const input = document.createElement('input');
input.value = text;
document.body.appendChild(input);
input.select();
document.execCommand('copy');
document.body.removeChild(input);
showToast(`📋 ${text} 복사됨`, 'success');
});
}
</script>
</body>
</html>

385
backend/templates/admin_return_management.html
View File

@@ -25,6 +25,7 @@
--accent-rose: #f43f5e;
--accent-orange: #f97316;
--accent-cyan: #06b6d4;
--accent-gold: #eab308;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
@@ -47,7 +48,7 @@
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.header-inner {
max-width: 1600px;
max-width: 1800px;
margin: 0 auto;
display: flex;
justify-content: space-between;
@@ -90,22 +91,25 @@
/* ══════════════════ 컨텐츠 ══════════════════ */
.content {
max-width: 1600px;
max-width: 1800px;
margin: 0 auto;
padding: 24px;
}
/* ══════════════════ 통계 카드 ══════════════════ */
.stats-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
/* ══════════════════ 통계 카드 (2줄) ══════════════════ */
.stats-row {
display: flex;
gap: 16px;
margin-bottom: 16px;
}
.stats-row.amount-row {
margin-bottom: 24px;
}
.stat-card {
flex: 1;
background: var(--bg-card);
border-radius: 14px;
padding: 20px;
padding: 18px 20px;
border: 1px solid var(--border);
position: relative;
overflow: hidden;
@@ -123,22 +127,27 @@
.stat-card.cyan::before { background: var(--accent-cyan); }
.stat-card.emerald::before { background: var(--accent-emerald); }
.stat-card.purple::before { background: var(--accent-purple); }
.stat-card.gold::before { background: var(--accent-gold); }
.stat-icon {
font-size: 24px;
margin-bottom: 12px;
font-size: 20px;
margin-bottom: 8px;
}
.stat-value {
font-size: 26px;
font-size: 24px;
font-weight: 700;
letter-spacing: -1px;
margin-bottom: 4px;
margin-bottom: 2px;
}
.stat-value.small {
font-size: 18px;
}
.stat-card.rose .stat-value { color: var(--accent-rose); }
.stat-card.amber .stat-value { color: var(--accent-amber); }
.stat-card.cyan .stat-value { color: var(--accent-cyan); }
.stat-card.emerald .stat-value { color: var(--accent-emerald); }
.stat-card.purple .stat-value { color: var(--accent-purple); }
.stat-card.gold .stat-value { color: var(--accent-gold); }
.stat-label {
font-size: 11px;
@@ -148,9 +157,9 @@
letter-spacing: 0.5px;
}
.stat-sub {
font-size: 11px;
font-size: 10px;
color: var(--text-muted);
margin-top: 4px;
margin-top: 2px;
}
/* ══════════════════ 필터 바 ══════════════════ */
@@ -259,7 +268,7 @@
border-collapse: collapse;
}
.data-table th {
padding: 14px 16px;
padding: 14px 12px;
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
@@ -270,11 +279,12 @@
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
white-space: nowrap;
}
.data-table th.center { text-align: center; }
.data-table th.right { text-align: right; }
.data-table td {
padding: 14px 16px;
padding: 12px;
font-size: 13px;
border-bottom: 1px solid rgba(255,255,255,0.05);
vertical-align: middle;
@@ -293,15 +303,16 @@
.drug-cell {
display: flex;
flex-direction: column;
gap: 4px;
gap: 2px;
}
.drug-name {
font-weight: 600;
color: var(--text-primary);
font-size: 12px;
}
.drug-code {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-size: 10px;
color: var(--text-muted);
}
@@ -310,9 +321,9 @@
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
padding: 4px 8px;
border-radius: 6px;
font-size: 11px;
font-size: 10px;
font-weight: 600;
}
.urgency-badge.critical {
@@ -336,49 +347,44 @@
font-size: 11px;
font-weight: 600;
}
.status-badge.pending {
background: rgba(249, 115, 22, 0.2);
color: var(--accent-orange);
}
.status-badge.reviewed {
background: rgba(59, 130, 246, 0.2);
color: var(--accent-blue);
}
.status-badge.returned {
background: rgba(16, 185, 129, 0.2);
color: var(--accent-emerald);
}
.status-badge.keep {
background: rgba(168, 85, 247, 0.2);
color: var(--accent-purple);
}
.status-badge.disposed {
background: rgba(244, 63, 94, 0.2);
color: var(--accent-rose);
}
.status-badge.resolved {
background: rgba(100, 116, 139, 0.2);
color: var(--text-muted);
}
.status-badge.pending { background: rgba(249, 115, 22, 0.2); color: var(--accent-orange); }
.status-badge.reviewed { background: rgba(59, 130, 246, 0.2); color: var(--accent-blue); }
.status-badge.returned { background: rgba(16, 185, 129, 0.2); color: var(--accent-emerald); }
.status-badge.keep { background: rgba(168, 85, 247, 0.2); color: var(--accent-purple); }
.status-badge.disposed { background: rgba(244, 63, 94, 0.2); color: var(--accent-rose); }
.status-badge.resolved { background: rgba(100, 116, 139, 0.2); color: var(--text-muted); }
/* 수량/날짜 셀 */
/* 수량/날짜/금액 셀 */
.qty-cell {
font-family: 'JetBrains Mono', monospace;
font-weight: 600;
text-align: center;
font-size: 12px;
}
.date-cell {
font-size: 12px;
font-size: 11px;
color: var(--text-secondary);
}
.months-cell {
font-family: 'JetBrains Mono', monospace;
font-weight: 700;
font-size: 12px;
}
.months-cell.critical { color: var(--accent-rose); }
.months-cell.warning { color: var(--accent-orange); }
.months-cell.normal { color: var(--text-muted); }
.amount-cell {
font-family: 'JetBrains Mono', monospace;
font-weight: 600;
text-align: right;
font-size: 12px;
color: var(--accent-gold);
}
.amount-cell.zero {
color: var(--text-muted);
}
/* 액션 버튼 */
.action-btn {
padding: 6px 12px;
@@ -397,14 +403,6 @@
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
}
.action-btn.secondary {
background: var(--bg-secondary);
border: 1px solid var(--border);
color: var(--text-secondary);
}
.action-btn.secondary:hover {
border-color: var(--text-muted);
}
/* ══════════════════ 페이지네이션 ══════════════════ */
.pagination {
@@ -425,23 +423,10 @@
cursor: pointer;
transition: all 0.2s;
}
.page-btn:hover {
border-color: var(--accent-orange);
color: var(--accent-orange);
}
.page-btn.active {
background: linear-gradient(135deg, var(--accent-orange), #ea580c);
border-color: transparent;
color: #fff;
}
.page-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.page-info {
color: var(--text-muted);
font-size: 13px;
}
.page-btn:hover { border-color: var(--accent-orange); color: var(--accent-orange); }
.page-btn.active { background: linear-gradient(135deg, var(--accent-orange), #ea580c); border-color: transparent; color: #fff; }
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.page-info { color: var(--text-muted); font-size: 13px; }
/* ══════════════════ 모달 ══════════════════ */
.modal-overlay {
@@ -453,9 +438,7 @@
justify-content: center;
z-index: 1000;
}
.modal-overlay.open {
display: flex;
}
.modal-overlay.open { display: flex; }
.modal {
background: var(--bg-card);
border-radius: 20px;
@@ -471,31 +454,12 @@
align-items: center;
margin-bottom: 24px;
}
.modal-title {
font-size: 18px;
font-weight: 700;
}
.modal-close {
background: none;
border: none;
color: var(--text-muted);
font-size: 24px;
cursor: pointer;
}
.modal-body {
margin-bottom: 24px;
}
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 8px;
}
.form-group select, .form-group input, .form-group textarea {
.modal-title { font-size: 18px; font-weight: 700; }
.modal-close { background: none; border: none; color: var(--text-muted); font-size: 24px; cursor: pointer; }
.modal-body { margin-bottom: 24px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.form-group select, .form-group textarea {
width: 100%;
padding: 12px 16px;
background: var(--bg-primary);
@@ -505,19 +469,9 @@
font-family: inherit;
color: var(--text-primary);
}
.form-group textarea {
min-height: 100px;
resize: vertical;
}
.form-group select:focus, .form-group input:focus, .form-group textarea:focus {
outline: none;
border-color: var(--accent-orange);
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
}
.form-group textarea { min-height: 100px; resize: vertical; }
.form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--accent-orange); }
.modal-footer { display: flex; justify-content: flex-end; gap: 12px; }
.modal-btn {
padding: 12px 24px;
border-radius: 10px;
@@ -526,73 +480,34 @@
cursor: pointer;
transition: all 0.2s;
}
.modal-btn.cancel {
background: var(--bg-secondary);
border: 1px solid var(--border);
color: var(--text-secondary);
}
.modal-btn.submit {
background: linear-gradient(135deg, var(--accent-orange), #ea580c);
border: none;
color: #fff;
}
.modal-btn.submit:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
}
.modal-btn.cancel { background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-secondary); }
.modal-btn.submit { background: linear-gradient(135deg, var(--accent-orange), #ea580c); border: none; color: #fff; }
.modal-btn.submit:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4); }
/* 약품 상세 정보 */
.drug-detail {
background: var(--bg-secondary);
border-radius: 12px;
padding: 16px;
margin-bottom: 20px;
}
.drug-detail-name {
font-size: 16px;
font-weight: 700;
margin-bottom: 8px;
}
.drug-detail-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
font-size: 13px;
}
.drug-detail-item {
display: flex;
justify-content: space-between;
}
.drug-detail-label {
color: var(--text-muted);
}
.drug-detail-value {
font-weight: 600;
font-family: 'JetBrains Mono', monospace;
}
.drug-detail-name { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.drug-detail-info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px; }
.drug-detail-item { display: flex; justify-content: space-between; }
.drug-detail-label { color: var(--text-muted); }
.drug-detail-value { font-weight: 600; font-family: 'JetBrains Mono', monospace; }
/* ══════════════════ 로딩/빈 상태 ══════════════════ */
.loading-state, .empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-muted);
}
.loading-state, .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.loading-spinner {
width: 40px;
height: 40px;
width: 40px; height: 40px;
border: 3px solid var(--border);
border-top-color: var(--accent-orange);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 16px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.empty-icon {
font-size: 48px;
margin-bottom: 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.empty-icon { font-size: 48px; margin-bottom: 16px; }
/* ══════════════════ 토스트 ══════════════════ */
.toast {
@@ -612,19 +527,17 @@
transition: all 0.3s;
z-index: 300;
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { border-color: var(--accent-emerald); }
.toast.error { border-color: var(--accent-rose); }
/* ══════════════════ 반응형 ══════════════════ */
@media (max-width: 1200px) {
.stats-grid { grid-template-columns: repeat(3, 1fr); }
.stats-row { flex-wrap: wrap; }
.stat-card { min-width: calc(33% - 12px); }
}
@media (max-width: 768px) {
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.stat-card { min-width: calc(50% - 8px); }
.header-nav { display: none; }
.filter-bar { flex-direction: column; }
.filter-group { width: 100%; }
@@ -649,8 +562,8 @@
</div>
<div class="content">
<!-- 통계 카드 -->
<div class="stats-grid">
<!-- 통계 카드 1줄: 건수 -->
<div class="stats-row">
<div class="stat-card rose">
<div class="stat-icon">🔴</div>
<div class="stat-value" id="statCritical">-</div>
@@ -673,7 +586,6 @@
<div class="stat-icon">✅</div>
<div class="stat-value" id="statProcessed">-</div>
<div class="stat-label">처리완료</div>
<div class="stat-sub">반품/보류/폐기</div>
</div>
<div class="stat-card purple">
<div class="stat-icon">📊</div>
@@ -682,6 +594,28 @@
</div>
</div>
<!-- 통계 카드 2줄: 회수가능 금액 -->
<div class="stats-row amount-row">
<div class="stat-card gold">
<div class="stat-icon">💰</div>
<div class="stat-value" id="statTotalAmount">-</div>
<div class="stat-label">총 회수가능 금액</div>
<div class="stat-sub">전체 반품 대상</div>
</div>
<div class="stat-card rose">
<div class="stat-icon">🔴💵</div>
<div class="stat-value small" id="statCriticalAmount">-</div>
<div class="stat-label">3년+ 금액</div>
<div class="stat-sub">긴급 회수 대상</div>
</div>
<div class="stat-card amber">
<div class="stat-icon">🟠💵</div>
<div class="stat-value small" id="statWarningAmount">-</div>
<div class="stat-label">2년+ 금액</div>
<div class="stat-sub">주의 대상</div>
</div>
</div>
<!-- 필터 바 -->
<div class="filter-bar">
<div class="filter-group">
@@ -743,19 +677,21 @@
<table class="data-table">
<thead>
<tr>
<th style="width:5%">긴급</th>
<th style="width:30%">약품</th>
<th class="center" style="width:8%">현재고</th>
<th class="center" style="width:12%">마지막 처방</th>
<th class="center" style="width:10%">미사용</th>
<th class="center" style="width:12%">마지막 입고</th>
<th class="center" style="width:8%">상태</th>
<th style="width:15%">액션</th>
<th style="width:4%">긴급</th>
<th style="width:24%">약품</th>
<th class="center" style="width:6%">현재고</th>
<th class="right" style="width:8%">단가</th>
<th class="right" style="width:10%">회수가능금액</th>
<th class="center" style="width:10%">마지막 처방</th>
<th class="center" style="width:8%">미사용</th>
<th class="center" style="width:10%">마지막 입고</th>
<th class="center" style="width:7%">상태</th>
<th style="width:10%">액션</th>
</tr>
</thead>
<tbody id="dataTableBody">
<tr>
<td colspan="8">
<td colspan="10">
<div class="loading-state">
<div class="loading-spinner"></div>
<div>데이터 로딩 중...</div>
@@ -812,26 +748,16 @@
const pageSize = 30;
let currentItemId = null;
// 초기 로드
document.addEventListener('DOMContentLoaded', function() {
loadData();
// 엔터키로 검색
document.getElementById('searchInput').addEventListener('keypress', function(e) {
if (e.key === 'Enter') loadData();
});
});
// 데이터 로드
async function loadData() {
const tbody = document.getElementById('dataTableBody');
tbody.innerHTML = `
<tr><td colspan="8">
<div class="loading-state">
<div class="loading-spinner"></div>
<div>데이터 로딩 중...</div>
</div>
</td></tr>`;
tbody.innerHTML = `<tr><td colspan="10"><div class="loading-state"><div class="loading-spinner"></div><div>데이터 로딩 중...</div></div></td></tr>`;
const status = document.getElementById('filterStatus').value;
const urgency = document.getElementById('filterUrgency').value;
@@ -855,35 +781,39 @@
currentPage = 1;
renderTable();
} else {
tbody.innerHTML = `
<tr><td colspan="8">
<div class="empty-state">
<div class="empty-icon">⚠️</div>
<div>오류: ${data.error}</div>
</div>
</td></tr>`;
tbody.innerHTML = `<tr><td colspan="10"><div class="empty-state"><div class="empty-icon">⚠️</div><div>오류: ${data.error}</div></div></td></tr>`;
}
} catch (err) {
tbody.innerHTML = `
<tr><td colspan="8">
<div class="empty-state">
<div class="empty-icon">❌</div>
<div>데이터 로드 실패</div>
</div>
</td></tr>`;
tbody.innerHTML = `<tr><td colspan="10"><div class="empty-state"><div class="empty-icon">❌</div><div>데이터 로드 실패</div></div></td></tr>`;
}
}
// 통계 업데이트
function updateStats(stats) {
document.getElementById('statCritical').textContent = stats.critical || 0;
document.getElementById('statWarning').textContent = stats.warning || 0;
document.getElementById('statPending').textContent = stats.pending || 0;
document.getElementById('statProcessed').textContent = stats.processed || 0;
document.getElementById('statTotal').textContent = stats.total || 0;
// 금액 표시
document.getElementById('statTotalAmount').textContent = formatAmount(stats.total_amount || 0);
document.getElementById('statCriticalAmount').textContent = formatAmount(stats.critical_amount || 0);
document.getElementById('statWarningAmount').textContent = formatAmount(stats.warning_amount || 0);
}
function formatAmount(amount) {
if (!amount || amount === 0) return '₩0';
if (amount >= 1000000) {
return '₩' + (amount / 10000).toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '만';
}
return '₩' + Math.round(amount).toLocaleString();
}
function formatPrice(price) {
if (!price || price === 0) return '-';
return '₩' + Math.round(price).toLocaleString();
}
// 탭 카운트 업데이트
function updateTabs() {
const counts = { all: allData.length, critical: 0, warning: 0, normal: 0 };
allData.forEach(item => {
@@ -897,7 +827,6 @@
document.getElementById('tabNormal').textContent = counts.normal;
}
// 긴급도 레벨 계산
function getUrgencyLevel(item) {
const months = Math.max(item.months_since_use || 0, item.months_since_purchase || 0);
if (months >= 36) return 'critical';
@@ -905,7 +834,6 @@
return 'normal';
}
// 긴급도 탭 클릭
function setUrgencyTab(urgency) {
document.querySelectorAll('.urgency-tab').forEach(tab => {
tab.classList.toggle('active', tab.dataset.urgency === urgency);
@@ -915,30 +843,21 @@
renderTable();
}
// 테이블 렌더링
function renderTable() {
const tbody = document.getElementById('dataTableBody');
const urgencyFilter = document.getElementById('filterUrgency').value;
// 필터링
let filteredData = allData;
if (urgencyFilter) {
filteredData = allData.filter(item => getUrgencyLevel(item) === urgencyFilter);
}
if (filteredData.length === 0) {
tbody.innerHTML = `
<tr><td colspan="8">
<div class="empty-state">
<div class="empty-icon">📦</div>
<div>해당 조건의 반품 후보가 없습니다</div>
</div>
</td></tr>`;
tbody.innerHTML = `<tr><td colspan="10"><div class="empty-state"><div class="empty-icon">📦</div><div>해당 조건의 반품 후보가 없습니다</div></div></td></tr>`;
document.getElementById('pagination').innerHTML = '';
return;
}
// 페이지네이션 계산
const totalPages = Math.ceil(filteredData.length / pageSize);
const start = (currentPage - 1) * pageSize;
const end = start + pageSize;
@@ -947,7 +866,7 @@
tbody.innerHTML = pageData.map(item => {
const urgency = getUrgencyLevel(item);
const urgencyClass = urgency === 'critical' ? 'urgent-critical' : urgency === 'warning' ? 'urgent-warning' : '';
const monthsMax = Math.max(item.months_since_use || 0, item.months_since_purchase || 0);
const hasAmount = item.recoverable_amount && item.recoverable_amount > 0;
return `
<tr class="${urgencyClass}">
@@ -963,6 +882,8 @@
</div>
</td>
<td class="qty-cell">${item.current_stock || 0}</td>
<td class="amount-cell ${item.unit_price ? '' : 'zero'}">${formatPrice(item.unit_price)}</td>
<td class="amount-cell ${hasAmount ? '' : 'zero'}">${hasAmount ? '₩' + Math.round(item.recoverable_amount).toLocaleString() : '-'}</td>
<td class="date-cell">${formatDate(item.last_prescription_date) || '-'}</td>
<td class="months-cell ${urgency}">
${item.months_since_use ? item.months_since_use + '개월' : '-'}
@@ -970,19 +891,15 @@
<td class="date-cell">${formatDate(item.last_purchase_date) || '-'}</td>
<td><span class="status-badge ${item.status}">${getStatusLabel(item.status)}</span></td>
<td>
<button class="action-btn primary" onclick="openStatusModal(${item.id})">
상태 변경
</button>
<button class="action-btn primary" onclick="openStatusModal(${item.id})">상태 변경</button>
</td>
</tr>
`;
}).join('');
// 페이지네이션 렌더링
renderPagination(totalPages, filteredData.length);
}
// 페이지네이션
function renderPagination(totalPages, totalItems) {
const pagination = document.getElementById('pagination');
@@ -997,10 +914,7 @@
const maxVisible = 5;
let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
let endPage = Math.min(totalPages, startPage + maxVisible - 1);
if (endPage - startPage < maxVisible - 1) {
startPage = Math.max(1, endPage - maxVisible + 1);
}
if (endPage - startPage < maxVisible - 1) startPage = Math.max(1, endPage - maxVisible + 1);
for (let i = startPage; i <= endPage; i++) {
html += `<button class="page-btn ${i === currentPage ? 'active' : ''}" onclick="goToPage(${i})">${i}</button>`;
@@ -1019,12 +933,12 @@
window.scrollTo({ top: 0, behavior: 'smooth' });
}
// 상태 변경 모달
function openStatusModal(itemId) {
currentItemId = itemId;
const item = allData.find(i => i.id === itemId);
if (!item) return;
const hasAmount = item.recoverable_amount && item.recoverable_amount > 0;
document.getElementById('modalDrugDetail').innerHTML = `
<div class="drug-detail-name">${escapeHtml(item.drug_name)}</div>
<div class="drug-detail-info">
@@ -1036,6 +950,14 @@
<span class="drug-detail-label">현재고</span>
<span class="drug-detail-value">${item.current_stock || 0}</span>
</div>
<div class="drug-detail-item">
<span class="drug-detail-label">단가</span>
<span class="drug-detail-value">${formatPrice(item.unit_price)}</span>
</div>
<div class="drug-detail-item">
<span class="drug-detail-label">회수가능금액</span>
<span class="drug-detail-value" style="color:var(--accent-gold)">${hasAmount ? '₩' + Math.round(item.recoverable_amount).toLocaleString() : '-'}</span>
</div>
<div class="drug-detail-item">
<span class="drug-detail-label">마지막 처방</span>
<span class="drug-detail-value">${formatDate(item.last_prescription_date) || '-'}</span>
@@ -1063,7 +985,6 @@
const status = document.getElementById('modalStatus').value;
const reason = document.getElementById('modalReason').value;
// 보류 선택 시 사유 필수
if (status === 'keep' && !reason.trim()) {
showToast('보류 상태에서는 사유 입력이 필수입니다', 'error');
return;
@@ -1090,7 +1011,6 @@
}
}
// 유틸리티 함수
function escapeHtml(text) {
if (!text) return '';
const div = document.createElement('div');
@@ -1100,7 +1020,6 @@
function formatDate(dateStr) {
if (!dateStr) return null;
// YYYYMMDD 형식 처리
if (dateStr.length === 8 && !dateStr.includes('-')) {
return `${dateStr.slice(0,4)}-${dateStr.slice(4,6)}-${dateStr.slice(6,8)}`;
}