hyungi/M-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 현황판 통계 카드 개선 및 상태별 분류

Browse Source 
📊 통계 카드 재구성:
- 전체 진행 중: 모든 진행 중인 이슈 수
- 오늘 신규: 오늘 수신함에서 진행중으로 넘어온 이슈
- 완료 대기: 완료 신청된 이슈 (completion_requested_at 존재)
- 지연 중: 마감일이 지난 이슈

🎨 UI 개선:
- 완료 대기: 보라색 배경 + 모래시계 아이콘
- 지연 중: 빨간색 배경 + 시계 아이콘
- 각 카드별 애니메이션 점 효과 유지

🔧 로직 개선:
- reviewed_at 기준으로 오늘 신규 계산
- completion_requested_at 필드로 완료 대기 상태 판별
- expected_completion_date 기준으로 지연 상태 판별
- 실시간 통계 업데이트

💡 사용자 경험:
- 한눈에 파악 가능한 상태별 분류
- 색상 코딩으로 우선순위 구분
- 직관적인 아이콘 사용

Expected Result:
✅ 전체 진행 중 | 오늘 신규 | 완료 대기 | 지연 중
✅ 실시간 상태별 통계 표시
✅ 시각적으로 구분되는 색상 체계
✅ 관리자가 우선순위를 쉽게 파악
This commit is contained in:
Hyungi Ahn
2025-10-26 13:02:24 +09:00
parent 6e240f2296
commit 919bc82ca1
5 changed files with 43 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/issues-dashboard.html
View File

@@ -181,29 +181,29 @@
</div>
</div>
<div class="bg-gradient-to-br from-yellow-400 to-orange-500 text-white p-6 rounded-xl dashboard-card">
<div class="flex items-center justify-between">
<div>
<p class="text-yellow-100 text-sm flex items-center space-x-1">
<span>지연 위험</span>
<div class="w-1.5 h-1.5 bg-yellow-200 rounded-full animate-pulse"></div>
</p>
<p class="text-3xl font-bold" id="delayRisk">0</p>
</div>
<i class="fas fa-exclamation-triangle text-4xl text-yellow-200"></i>
</div>
</div>
<div class="bg-gradient-to-br from-purple-400 to-purple-600 text-white p-6 rounded-xl dashboard-card">
<div class="flex items-center justify-between">
<div>
<p class="text-purple-100 text-sm flex items-center space-x-1">
<span>활성 프로젝트</span>
<span>완료 대기</span>
<div class="w-1.5 h-1.5 bg-purple-200 rounded-full animate-pulse"></div>
</p>
<p class="text-3xl font-bold" id="activeProjects">0</p>
<p class="text-3xl font-bold" id="pendingCompletion">0</p>
</div>
<i class="fas fa-project-diagram text-4xl text-purple-200"></i>
<i class="fas fa-hourglass-half text-4xl text-purple-200"></i>
</div>
</div>
<div class="bg-gradient-to-br from-red-400 to-red-600 text-white p-6 rounded-xl dashboard-card">
<div class="flex items-center justify-between">
<div>
<p class="text-red-100 text-sm flex items-center space-x-1">
<span>지연 중</span>
<div class="w-1.5 h-1.5 bg-red-200 rounded-full animate-pulse"></div>
</p>
<p class="text-3xl font-bold" id="overdue">0</p>
</div>
<i class="fas fa-clock text-4xl text-red-200"></i>
</div>
</div>
</div>
@@ -385,26 +385,29 @@
// 통계 업데이트
function updateStatistics() {
const today = new Date().toDateString();
// 오늘 신규 (오늘 수신함에서 진행중으로 넘어온 것들)
const todayIssues = allIssues.filter(issue =>
new Date(issue.report_date).toDateString() === today
issue.reviewed_at && new Date(issue.reviewed_at).toDateString() === today
);
// 지연 위험 계산 (예상일이 지났거나 3일 이내)
const delayRiskIssues = allIssues.filter(issue => {
// 완료 대기 (완료 신청이 된 것들)
const pendingCompletionIssues = allIssues.filter(issue =>
issue.completion_requested_at && issue.review_status === 'in_progress'
);
// 지연 중 (마감일이 지난 것들)
const overdueIssues = allIssues.filter(issue => {
if (!issue.expected_completion_date) return false;
const expectedDate = new Date(issue.expected_completion_date);
const now = new Date();
const diffDays = (expectedDate - now) / (1000 * 60 * 60 * 24);
return diffDays <= 3; // 3일 이내 또는 지연
return expectedDate < now; // 마감일 지남
});
// 활성 프로젝트 (진행 중인 부적합이 있는 프로젝트)
const activeProjectIds = new Set(allIssues.map(issue => issue.project_id));
document.getElementById('totalInProgress').textContent = allIssues.length;
document.getElementById('todayNew').textContent = todayIssues.length;
document.getElementById('delayRisk').textContent = delayRiskIssues.length;
document.getElementById('activeProjects').textContent = activeProjectIds.size;
document.getElementById('pendingCompletion').textContent = pendingCompletionIssues.length;
document.getElementById('overdue').textContent = overdueIssues.length;
}
// 이슈 카드 업데이트 (관리함 스타일 - 날짜별 그룹화)