feat: 다수 기능 개선 - 순찰, 출근, 작업분석, 모바일 UI 등

- 순찰/점검 기능 개선 (zone-detail 페이지 추가) - 출근/근태 시스템 개선 (연차 조회, 근무현황) - 작업분석 대분류 그룹화 및 마이그레이션 스크립트 - 모바일 네비게이션 UI 추가 - NAS 배포 도구 및 문서 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-09 14:41:01 +09:00
parent 1548253f56
commit 2b1c7bfb88
633 changed files with 361224 additions and 1090 deletions
--- a/deploy/tkfb-package/web-ui/js/group-leader-dashboard.js
+++ b/deploy/tkfb-package/web-ui/js/group-leader-dashboard.js
@@ -0,0 +1,157 @@
+// /js/group-leader-dashboard.js
+// 그룹장 전용 대시보드 - 실시간 근태 및 작업 현황 (Real Data Version)
+import { apiCall } from './api-config.js';
+
+console.log('📊 그룹장 대시보드 스크립트 로딩 (Live Data)');
+
+// 상태별 스타일/텍스트 매핑
+const STATUS_MAP = {
+  'incomplete': { text: '미제출', class: 'status-incomplete', icon: '❌', color: '#ff5252' },
+  'partial': { text: '작성중', class: 'status-warning', icon: '📝', color: '#ff9800' },
+  'complete': { text: '제출완료', class: 'status-success', icon: '✅', color: '#4caf50' },
+  'overtime': { text: '초과근무', class: 'status-info', icon: '🌙', color: '#673ab7' },
+  'vacation': { text: '휴가', class: 'status-vacation', icon: '🏖️', color: '#2196f3' }
+};
+
+// 현재 선택된 날짜
+let currentSelectedDate = new Date().toISOString().split('T')[0];
+
+/**
+ * 📅 날짜 초기화 및 이벤트 리스너 등록
+ */
+function initDateSelector() {
+  const dateInput = document.getElementById('selectedDate');
+  const refreshBtn = document.getElementById('refreshBtn');
+
+  if (dateInput) {
+    dateInput.value = currentSelectedDate;
+    dateInput.addEventListener('change', (e) => {
+      currentSelectedDate = e.target.value;
+      loadDailyWorkStatus();
+    });
+  }
+
+  if (refreshBtn) {
+    refreshBtn.addEventListener('click', () => {
+      loadDailyWorkStatus();
+      showToast('데이터를 새로고침했습니다.', 'success');
+    });
+  }
+}
+
+/**
+ * 🔄 일일 근태 현황 로드 (API 호출)
+ */
+async function loadDailyWorkStatus() {
+  const container = document.getElementById('workStatusContainer');
+  if (!container) return;
+
+  // 로딩 표시
+  container.innerHTML = `
+    <div class="loading-state">
+      <div class="spinner"></div>
+      <p>작업 현황을 불러오는 중...</p>
+    </div>
+  `;
+
+  try {
+    const result = await apiCall(`/attendance/daily-status?date=${currentSelectedDate}`);
+    const workers = result.data || [];
+
+    renderWorkStatus(workers);
+    updateSummaryStats(workers);
+
+  } catch (error) {
+    console.error('현황 로드 오류:', error);
+    container.innerHTML = `
+      <div class="error-state">
+        <p>⚠️ 데이터를 불러오는데 실패했습니다.</p>
+        <button onclick="loadDailyWorkStatus()" class="btn btn-sm btn-outline">재시도</button>
+      </div>
+    `;
+  }
+}
+
+/**
+ * 📊 통계 요약 업데이트
+ */
+function updateSummaryStats(workers) {
+  // 요약 카드가 있다면 업데이트 (현재 HTML에는 없으므로 생략 가능하거나 동적으로 추가)
+  // 여기서는 콘솔에만 로그
+  const stats = workers.reduce((acc, w) => {
+    acc[w.status] = (acc[w.status] || 0) + 1;
+    return acc;
+  }, {});
+  console.log('Daily Stats:', stats);
+}
+
+/**
+ * 🎨 현황 리스트 렌더링
+ */
+function renderWorkStatus(workers) {
+  const container = document.getElementById('workStatusContainer');
+  if (!container) return;
+
+  if (workers.length === 0) {
+    container.innerHTML = '<div class="empty-state">등록된 작업자가 없습니다.</div>';
+    return;
+  }
+
+  // 상태 우선순위 정렬 (미제출 -> 작성중 -> 완료)
+  const sortOrder = ['incomplete', 'partial', 'vacation', 'complete', 'overtime'];
+  workers.sort((a, b) => {
+    return sortOrder.indexOf(a.status) - sortOrder.indexOf(b.status) || a.worker_name.localeCompare(b.worker_name);
+  });
+
+  const html = `
+    <div class="status-grid">
+      ${workers.map(worker => {
+    const statusInfo = STATUS_MAP[worker.status] || { text: worker.status, class: '', icon: '❓', color: '#999' };
+
+    return `
+          <div class="worker-card ${worker.status === 'incomplete' ? 'status-alert' : ''}" style="border-left: 4px solid ${statusInfo.color}">
+            <div class="worker-header">
+              <span class="worker-name">${worker.worker_name}</span>
+              <span class="worker-job">${worker.job_type || '-'}</span>
+            </div>
+            
+            <div class="worker-body">
+              <div class="status-badge" style="background-color: ${statusInfo.color}20; color: ${statusInfo.color}">
+                ${statusInfo.icon} ${statusInfo.text}
+              </div>
+              <div class="work-hours">
+                ${worker.total_work_hours > 0 ? worker.total_work_hours + '시간' : '-'}
+              </div>
+            </div>
+
+            ${worker.status === 'incomplete' ? `
+              <div class="worker-footer">
+                <span class="alert-text">⚠️ 보고서 미제출</span>
+              </div>
+            ` : ''}
+          </div>
+        `;
+  }).join('')}
+    </div>
+  `;
+
+  container.innerHTML = html;
+}
+
+// 🍞 토스트 메시지 (기존 modern-dashboard.js에 있다면 중복 주의, 없으면 사용)
+function showToast(message, type = 'info') {
+  if (window.showToast) {
+    window.showToast(message, type);
+  } else {
+    alert(message);
+  }
+}
+
+// 초기화
+document.addEventListener('DOMContentLoaded', () => {
+  initDateSelector();
+  loadDailyWorkStatus();
+});
+
+// 전역 노출 대신 모듈로 내보내기
+export { loadDailyWorkStatus as refreshTeamStatus };