TK-FB-Project/web-ui/js/group-leader-dashboard.js

// /js/group-leader-dashboard.js
// 그룹장 전용 대시보드 - 실시간 근태 및 작업 현황 (Real Data Version)

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 response = await fetch(`${window.API_BASE_URL}/attendance/daily-status?date=${currentSelectedDate}`, {
      headers: getAuthHeaders()
    });

    if (!response.ok) throw new Error('데이터 로드 실패');

    const result = await response.json();
    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;
}

// 🔐 인증 헤더 헬퍼
function getAuthHeaders() {
  const token = localStorage.getItem('token');
  return {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json'
  };
}

// 🍞 토스트 메시지 (기존 modern-dashboard.js에 있다면 중복 주의, 없으면 사용)
function showToast(message, type = 'info') {
  if (window.showToast) {
    window.showToast(message, type);
  } else {
    alert(message);
  }
}

// 초기화
document.addEventListener('DOMContentLoaded', () => {
  // API_BASE_URL 설정 (없으면 기본값)
  if (!window.API_BASE_URL) window.API_BASE_URL = '/api';

  initDateSelector();
  loadDailyWorkStatus();
});

// 전역 노출
window.refreshTeamStatus = loadDailyWorkStatus;