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

feat: 재고 분석 페이지 - 재고 변화 추이 그래프 추가

Browse Source
This commit is contained in:
thug0bin
2026-03-13 08:02:44 +09:00
parent c9f89cb9b0
commit 2ca35cdc82
2 changed files with 443 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

271
backend/templates/admin_stock_analytics.html
View File

@@ -430,6 +430,138 @@
.toast.success { border-color: var(--accent-emerald); }
.toast.error { border-color: var(--accent-rose); }
/* ══════════════════ 예측 카드 ══════════════════ */
.forecast-card {
background: var(--bg-card);
border-radius: 14px;
padding: 20px;
border: 1px solid var(--border);
height: 100%;
}
.forecast-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.forecast-title {
font-size: 15px;
font-weight: 600;
}
.forecast-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
}
.forecast-label {
font-size: 13px;
color: var(--text-secondary);
}
.forecast-value {
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
font-weight: 600;
}
.forecast-divider {
border: none;
border-top: 1px dashed var(--border);
margin: 12px 0;
}
.forecast-highlight {
background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(124, 58, 237, 0.1));
border-radius: 10px;
padding: 14px;
margin: 12px 0;
}
.forecast-highlight-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.forecast-highlight-row:last-child {
margin-bottom: 0;
}
.forecast-highlight-icon {
font-size: 16px;
}
.forecast-highlight-label {
font-size: 12px;
color: var(--text-secondary);
flex: 1;
}
.forecast-highlight-value {
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
font-weight: 700;
color: var(--accent-purple);
}
.forecast-highlight-sub {
font-size: 11px;
color: var(--text-muted);
margin-left: 4px;
font-weight: 400;
}
.forecast-meta {
display: flex;
justify-content: space-between;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.forecast-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
}
.forecast-tag.trend-increasing {
background: rgba(239, 68, 68, 0.15);
color: #f87171;
}
.forecast-tag.trend-stable {
background: rgba(16, 185, 129, 0.15);
color: #34d399;
}
.forecast-tag.trend-decreasing {
background: rgba(59, 130, 246, 0.15);
color: #60a5fa;
}
.forecast-tag.trend-unknown {
background: rgba(100, 116, 139, 0.15);
color: #94a3b8;
}
.forecast-tag.confidence-high {
background: rgba(16, 185, 129, 0.15);
color: #34d399;
}
.forecast-tag.confidence-medium {
background: rgba(245, 158, 11, 0.15);
color: #fbbf24;
}
.forecast-tag.confidence-low {
background: rgba(239, 68, 68, 0.15);
color: #f87171;
}
.forecast-tag.confidence-none {
background: rgba(100, 116, 139, 0.15);
color: #94a3b8;
}
.forecast-empty {
text-align: center;
padding: 40px 20px;
color: var(--text-muted);
}
.forecast-empty-icon {
font-size: 36px;
margin-bottom: 12px;
}
/* ══════════════════ 반응형 ══════════════════ */
@media (max-width: 1200px) {
.chart-grid { grid-template-columns: 1fr; }
@@ -553,6 +685,16 @@
</div>
</div>
</div>
<!-- 재고 소진 예측 카드 -->
<div class="chart-card">
<div id="forecastContainer">
<div class="forecast-empty">
<div class="forecast-empty-icon">🔮</div>
<div>약품을 선택하면 소진 예측을 표시합니다</div>
</div>
</div>
</div>
</div>
<!-- TOP 10 테이블 -->
@@ -676,6 +818,8 @@
// 재고 변화 차트 로드
loadStockLevel();
// 재고 소진 예측 로드
loadForecast();
// 일별 추이도 해당 약품으로 갱신
loadDailyTrend();
}
@@ -692,6 +836,13 @@
<div>약품을 검색하여 선택하세요</div>
</div>`;
// 예측 카드 초기화
document.getElementById('forecastContainer').innerHTML = `
<div class="forecast-empty">
<div class="forecast-empty-icon">🔮</div>
<div>약품을 선택하면 소진 예측을 표시합니다</div>
</div>`;
if (stockLevelChart) {
stockLevelChart.destroy();
stockLevelChart = null;
@@ -783,6 +934,126 @@
}
}
// ══════════════════ 재고 소진 예측 ══════════════════
async function loadForecast() {
if (!selectedDrugCode) return;
const container = document.getElementById('forecastContainer');
container.innerHTML = `
<div class="forecast-empty">
<div class="loading-spinner"></div>
<div>예측 데이터 로딩 중...</div>
</div>`;
try {
const response = await fetch(`/api/stock-analytics/forecast?drug_code=${selectedDrugCode}`);
const data = await response.json();
if (data.success) {
renderForecastCard(data);
} else {
container.innerHTML = `
<div class="forecast-empty">
<div class="forecast-empty-icon">⚠️</div>
<div>${data.error || '예측 데이터를 불러올 수 없습니다'}</div>
</div>`;
}
} catch (err) {
console.error('예측 로드 실패:', err);
container.innerHTML = `
<div class="forecast-empty">
<div class="forecast-empty-icon">❌</div>
<div>예측 로드 실패</div>
</div>`;
}
}
function renderForecastCard(data) {
const container = document.getElementById('forecastContainer');
// 추세 표시
const trendMap = {
'increasing': { label: '증가 추세', icon: '📈', class: 'trend-increasing' },
'stable': { label: '안정적', icon: '➡️', class: 'trend-stable' },
'decreasing': { label: '감소 추세', icon: '📉', class: 'trend-decreasing' },
'unknown': { label: '분석 불가', icon: '❓', class: 'trend-unknown' }
};
const trend = trendMap[data.trend] || trendMap['unknown'];
// 신뢰도 표시
const confidenceMap = {
'high': { label: '높음', icon: '✅', class: 'confidence-high' },
'medium': { label: '보통', icon: '⚠️', class: 'confidence-medium' },
'low': { label: '낮음', icon: '❗', class: 'confidence-low' },
'none': { label: '없음', icon: '❌', class: 'confidence-none' }
};
const confidence = confidenceMap[data.confidence] || confidenceMap['none'];
// 데이터 없는 경우
if (data.confidence === 'none' || !data.days_until_empty) {
container.innerHTML = `
<div class="forecast-card">
<div class="forecast-header">
<span>🔮</span>
<span class="forecast-title">재고 소진 예측</span>
</div>
<div class="forecast-row">
<span class="forecast-label">현재 재고</span>
<span class="forecast-value" style="color: var(--accent-emerald);">${data.current_stock.toLocaleString()}개</span>
</div>
<hr class="forecast-divider">
<div class="forecast-empty" style="padding: 20px;">
<div class="forecast-empty-icon">📊</div>
<div>${data.message || '출고 데이터가 없어 예측할 수 없습니다'}</div>
</div>
</div>`;
return;
}
// 소진 예상일까지 남은 일수 색상
let daysColor = 'var(--accent-emerald)';
if (data.days_until_empty <= 7) {
daysColor = 'var(--accent-rose)';
} else if (data.days_until_empty <= 14) {
daysColor = 'var(--accent-amber)';
}
container.innerHTML = `
<div class="forecast-card">
<div class="forecast-header">
<span>🔮</span>
<span class="forecast-title">재고 소진 예측</span>
</div>
<div class="forecast-row">
<span class="forecast-label">현재 재고</span>
<span class="forecast-value" style="color: var(--accent-emerald);">${data.current_stock.toLocaleString()}개</span>
</div>
<div class="forecast-row">
<span class="forecast-label">평균 일일 출고</span>
<span class="forecast-value" style="color: var(--accent-blue);">${data.avg_daily_outbound}개</span>
</div>
<div class="forecast-highlight">
<div class="forecast-highlight-row">
<span class="forecast-highlight-icon">🗓️</span>
<span class="forecast-highlight-label">예상 소진일</span>
<span class="forecast-highlight-value">${data.estimated_empty_date}<span class="forecast-highlight-sub">(${data.days_until_empty}일 후)</span></span>
</div>
<div class="forecast-highlight-row">
<span class="forecast-highlight-icon">🛒</span>
<span class="forecast-highlight-label">발주 권장일</span>
<span class="forecast-highlight-value" style="color: ${daysColor};">${data.recommended_order_date}</span>
</div>
</div>
<div class="forecast-meta">
<span class="forecast-tag ${trend.class}">${trend.icon} ${trend.label}</span>
<span class="forecast-tag ${confidence.class}">${confidence.icon} 신뢰도: ${confidence.label}</span>
</div>
</div>`;
}
// ══════════════════ 차트 렌더링 ══════════════════
function renderDailyTrendChart(items) {
const ctx = document.getElementById('dailyTrendChart').getContext('2d');