feat(monthly-comparison): detail 페이지 수정요청 내역 표시 + 승인/거부 UI

관리자가 개인 작업자 detail 페이지에서 수정요청(change_request) 내역을 확인하고 승인/거부할 수 있도록 UI 추가. admin 리스트에도 수정 내역 요약 표시. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-01 10:21:50 +09:00
parent 5832755475
commit 766cb90e8f
4 changed files with 199 additions and 8 deletions
--- a/system1-factory/api/controllers/monthlyComparisonController.js
+++ b/system1-factory/api/controllers/monthlyComparisonController.js
@@ -121,8 +121,10 @@ async function buildComparisonData(userId, year, month) {
      status: confirmation.status,
      confirmed_at: confirmation.confirmed_at,
      rejected_at: confirmation.rejected_at,
-      reject_reason: confirmation.reject_reason
-    } : { status: 'pending', confirmed_at: null, reject_reason: null },
+      reject_reason: confirmation.reject_reason,
+      change_details: confirmation.change_details || null,
+      admin_checked: confirmation.admin_checked || 0
+    } : { status: 'pending', confirmed_at: null, reject_reason: null, change_details: null, admin_checked: 0 },
    daily_records: dailyRecords
  };
 }
--- a/system1-factory/web/css/monthly-comparison.css
+++ b/system1-factory/web/css/monthly-comparison.css
@@ -54,6 +54,9 @@
 .mc-status-badge.pending { background: #fef3c7; color: #92400e; }
 .mc-status-badge.confirmed { background: #dcfce7; color: #166534; }
 .mc-status-badge.rejected { background: #fef2f2; color: #991b1b; }
+.mc-status-badge.change_request { background: #fff7ed; color: #c2410c; }
+.mc-status-badge.review_sent { background: #dbeafe; color: #1e40af; }
+.mc-status-badge.admin_checked { background: #dcfce7; color: #166534; }

 /* Summary Cards */
 .mc-summary-cards {
@@ -305,6 +308,61 @@
 .ds-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 16px; color: #9ca3af; font-size: 0.875rem; }
 .ds-link { color: #2563eb; font-size: 0.8rem; text-decoration: underline; }

+/* Change Request Panel (detail mode) */
+.mc-change-panel {
+    background: #fff7ed;
+    border: 1px solid #fed7aa;
+    border-radius: 10px;
+    padding: 14px;
+    margin-bottom: 12px;
+}
+.mc-change-header {
+    font-size: 0.85rem; font-weight: 700; color: #c2410c;
+    margin-bottom: 8px;
+    display: flex; align-items: center; gap: 6px;
+}
+.mc-change-list { margin-bottom: 10px; }
+.mc-change-item {
+    font-size: 0.8rem; color: #374151;
+    padding: 4px 0;
+    border-bottom: 1px solid #fde6d0;
+}
+.mc-change-item:last-child { border-bottom: none; }
+.mc-change-from { color: #9ca3af; text-decoration: line-through; }
+.mc-change-to { color: #c2410c; font-weight: 600; }
+.mc-change-desc {
+    font-size: 0.8rem; color: #374151;
+    margin-bottom: 10px;
+    white-space: pre-wrap;
+}
+.mc-change-actions {
+    display: flex; gap: 8px;
+}
+.mc-change-approve {
+    flex: 1; padding: 10px;
+    background: #2563eb; color: white;
+    font-size: 0.8rem; font-weight: 600;
+    border: none; border-radius: 8px; cursor: pointer;
+}
+.mc-change-approve:hover { background: #1d4ed8; }
+.mc-change-reject {
+    flex: 1; padding: 10px;
+    background: white; color: #ef4444;
+    font-size: 0.8rem; font-weight: 600;
+    border: 2px solid #fecaca; border-radius: 8px; cursor: pointer;
+}
+.mc-change-reject:hover { background: #fef2f2; }
+
+/* Worker card change summary */
+.mc-worker-change-summary {
+    font-size: 0.7rem; color: #c2410c;
+    margin-top: 4px; padding-left: 8px;
+    border-left: 2px solid #fed7aa;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
@media (max-width: 480px) { body { max-width: 480px; margin: 0 auto; } }

 /* Inline Edit */
--- a/system1-factory/web/js/monthly-comparison.js
+++ b/system1-factory/web/js/monthly-comparison.js
@@ -323,7 +323,11 @@ function renderConfirmationStatus(conf) {
        document.getElementById('confirmedText').textContent = '반려: ' + (conf.reject_reason || '-');
    } else if (conf.status === 'change_request') {
        statusEl.classList.remove('hidden');
-        document.getElementById('confirmedText').textContent = '수정요청 접수됨';
+        document.getElementById('confirmedText').innerHTML = '수정요청 접수됨';
+        // detail 모드: 수정 내역 + 승인/거부 버튼 표시
+        if (currentMode === 'detail') {
+            renderChangeRequestPanel(conf);
+        }
    } else {
        statusEl.classList.add('hidden');
    }
@@ -384,6 +388,8 @@ function renderWorkerList(workers) {
            ? `<span class="mc-worker-mismatch">⚠️ 불일치${w.mismatch_count}</span>` : '';
        const rejectReason = w.status === 'rejected' && w.reject_reason
            ? `<div class="mc-worker-reject-reason">사유: ${escHtml(w.reject_reason)}</div>` : '';
+        const changeSummary = w.status === 'change_request' && w.change_details
+            ? `<div class="mc-worker-change-summary"><i class="fas fa-edit" style="font-size:10px"></i> ${escHtml(formatChangeDetailsSummary(w.change_details))}</div>` : '';
        const confirmedAt = w.confirmed_at ? `(${new Date(w.confirmed_at).toLocaleDateString('ko')})` : '';

        return `
@@ -399,7 +405,7 @@ function renderWorkerList(workers) {
            <div class="mc-worker-status">
                ${statusBadge} <span style="font-size:0.7rem;color:#9ca3af">${confirmedAt}</span>
            </div>
-            ${rejectReason}
+            ${rejectReason}${changeSummary}
        </div>`;
    }).join('');
 }
@@ -511,9 +517,14 @@ async function downloadExcel() {
            return;
        }
        const token = (window.getSSOToken && window.getSSOToken()) || '';
-        const response = await fetch(`${window.API_BASE_URL}/monthly-comparison/export?year=${currentYear}&month=${currentMonth}`, {
+        const response = await fetch(`/api/monthly-comparison/export?year=${currentYear}&month=${currentMonth}`, {
            headers: { 'Authorization': `Bearer ${token}` }
        });
+        if (response.status === 401) {
+            if (typeof _safeRedirect === 'function') _safeRedirect();
+            else location.href = '/pages/login.html';
+            return;
+        }
        if (!response.ok) throw new Error('다운로드 실패');
        const blob = await response.blob();
        const url = window.URL.createObjectURL(blob);
@@ -696,7 +707,127 @@ async function saveAttendance(date) {
    }
 }

+// ===== Change Request Panel (detail mode) =====
+function renderChangeRequestPanel(conf) {
+    var panel = document.getElementById('changeRequestPanel');
+    if (!panel) {
+        // 동적 생성: mismatchAlert 뒤에 삽입
+        panel = document.createElement('div');
+        panel.id = 'changeRequestPanel';
+        var anchor = document.getElementById('mismatchAlert');
+        anchor.parentNode.insertBefore(panel, anchor.nextSibling);
+    }
+
+    var details = null;
+    if (conf.change_details) {
+        try { details = typeof conf.change_details === 'string' ? JSON.parse(conf.change_details) : conf.change_details; }
+        catch (e) { details = null; }
+    }
+
+    var html = '<div class="mc-change-panel">';
+    html += '<div class="mc-change-header"><i class="fas fa-edit text-orange-500"></i> 수정요청 내역</div>';
+
+    if (details && details.changes && details.changes.length) {
+        html += '<div class="mc-change-list">';
+        details.changes.forEach(function(c) {
+            var dateLabel = c.date ? c.date.substring(5).replace('-', '/') : '';
+            html += '<div class="mc-change-item">' + escHtml(dateLabel) + ': ' +
+                '<span class="mc-change-from">' + escHtml(c.from) + '</span>' +
+                ' <i class="fas fa-arrow-right" style="font-size:10px;color:#9ca3af"></i> ' +
+                '<span class="mc-change-to">' + escHtml(c.to) + '</span></div>';
+        });
+        html += '</div>';
+    } else if (details && details.description) {
+        html += '<div class="mc-change-desc">' + escHtml(details.description) + '</div>';
+    } else {
+        html += '<div class="mc-change-desc" style="color:#9ca3af">상세 내역 없음</div>';
+    }
+
+    html += '<div class="mc-change-actions">';
+    html += '<button type="button" class="mc-change-approve" onclick="approveChangeRequest()"><i class="fas fa-check"></i> 승인 (재확인 요청)</button>';
+    html += '<button type="button" class="mc-change-reject" onclick="openRejectChangeModal()"><i class="fas fa-times"></i> 거부</button>';
+    html += '</div>';
+    html += '</div>';
+
+    panel.innerHTML = html;
+}
+
+async function approveChangeRequest() {
+    if (!currentUserId || isProcessing) return;
+    if (!confirm('수정요청을 승인하시겠습니까? 작업자에게 재확인 요청이 발송됩니다.')) return;
+    isProcessing = true;
+    try {
+        var res = await window.apiCall('/monthly-comparison/review-respond', 'POST', {
+            user_id: currentUserId, year: currentYear, month: currentMonth, action: 'approve'
+        });
+        if (res && res.success) {
+            showToast(res.message || '승인 완료', 'success');
+            loadData();
+        } else {
+            showToast(res?.message || '처리 실패', 'error');
+        }
+    } catch (e) { showToast('네트워크 오류', 'error'); }
+    finally { isProcessing = false; }
+}
+
+function openRejectChangeModal() {
+    document.getElementById('rejectReason').value = '';
+    // 모달 텍스트를 수정요청 거부용으로 변경
+    var headerSpan = document.querySelector('#rejectModal .mc-modal-header span');
+    if (headerSpan) headerSpan.innerHTML = '<i class="fas fa-times-circle text-red-500 mr-2"></i>수정요청 거부';
+    var desc = document.querySelector('#rejectModal .mc-modal-desc');
+    if (desc) desc.textContent = '거부 사유를 입력해주세요:';
+    var submitBtn = document.getElementById('rejectSubmitBtn');
+    if (submitBtn) {
+        submitBtn.textContent = '거부 제출';
+        submitBtn.onclick = submitRejectChange;
+    }
+    document.getElementById('rejectModal').classList.remove('hidden');
+}
+
+async function submitRejectChange() {
+    if (!currentUserId || isProcessing) return;
+    var reason = document.getElementById('rejectReason').value.trim();
+    if (!reason) { showToast('거부 사유를 입력해주세요', 'error'); return; }
+    isProcessing = true;
+    try {
+        var res = await window.apiCall('/monthly-comparison/review-respond', 'POST', {
+            user_id: currentUserId, year: currentYear, month: currentMonth,
+            action: 'reject', reject_reason: reason
+        });
+        if (res && res.success) {
+            showToast(res.message || '거부 완료', 'success');
+            closeRejectModal();
+            loadData();
+        } else {
+            showToast(res?.message || '처리 실패', 'error');
+        }
+    } catch (e) { showToast('네트워크 오류', 'error'); }
+    finally { isProcessing = false; }
+}
+
+function formatChangeDetailsSummary(changeDetails) {
+    var details = null;
+    if (!changeDetails) return '';
+    try { details = typeof changeDetails === 'string' ? JSON.parse(changeDetails) : changeDetails; }
+    catch (e) { return ''; }
+
+    if (details.changes && details.changes.length) {
+        var items = details.changes.map(function(c) {
+            var d = c.date ? c.date.substring(5).replace('-', '/') : '';
+            return d + ' ' + (c.from || '') + '\u2192' + (c.to || '');
+        });
+        return items.join(', ');
+    }
+    if (details.description) return details.description;
+    return '';
+}
+
 // ESC로 모달 닫기
-document.addEventListener('keydown', e => {
+function handleEscKey(e) {
    if (e.key === 'Escape') closeRejectModal();
+}
+document.addEventListener('keydown', handleEscKey);
+window.addEventListener('beforeunload', function() {
+    document.removeEventListener('keydown', handleEscKey);
 });
--- a/system1-factory/web/pages/attendance/monthly-comparison.html
+++ b/system1-factory/web/pages/attendance/monthly-comparison.html
@@ -8,7 +8,7 @@
    <script>tailwind.config = { corePlugins: { preflight: false } }</script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="/static/css/tkfb.css?v=2026033108">
-    <link rel="stylesheet" href="/css/monthly-comparison.css?v=2026040106">
+    <link rel="stylesheet" href="/css/monthly-comparison.css?v=2026040107">
 </head>
 <body class="bg-gray-50">
    <header class="bg-orange-700 text-white sticky top-0 z-50">
@@ -164,7 +164,7 @@

    <script src="/static/js/tkfb-core.js?v=2026033108"></script>
    <script src="/js/api-base.js?v=2026031701"></script>
-    <script src="/js/monthly-comparison.js?v=2026040108"></script>
+    <script src="/js/monthly-comparison.js?v=2026040109"></script>
    <script>initAuth();</script>
 </body>
 </html>