TK-FB-Project/web-ui/js/user-dashboard.js

// /js/user-dashboard.js
import { getUser } from './auth.js';
import { apiGet } from './api-helper.js'; // 개선된 api-helper를 사용합니다.

/**
 * API를 호출하여 오늘의 작업 일정을 불러와 화면에 표시합니다.
 */
async function loadTodaySchedule() {
  const scheduleContainer = document.getElementById('today-schedule');
  scheduleContainer.innerHTML = '<p>📅 오늘의 작업 일정을 불러오는 중...</p>';

  try {
    // 예시: /api/dashboard/today-schedule 엔드포인트에서 데이터를 가져옵니다.
    // 실제 엔드포인트는 백엔드 구현에 따라 달라질 수 있습니다.
    const scheduleData = await apiGet('/dashboard/today-schedule');
    
    if (scheduleData && scheduleData.length > 0) {
      const scheduleHtml = scheduleData.map(item => `
        <div class="schedule-item">
          <span class="time">${item.time}</span>
          <span class="task">${item.task_name}</span>
          <span class="status ${item.status}">${item.status_kor}</span>
        </div>
      `).join('');
      scheduleContainer.innerHTML = scheduleHtml;
    } else {
      scheduleContainer.innerHTML = '<p>오늘 예정된 작업이 없습니다.</p>';
    }
  } catch (error) {
    console.error('오늘의 작업 일정 로드 실패:', error);
    scheduleContainer.innerHTML = '<p class="error">일정 정보를 불러오는 데 실패했습니다.</p>';
  }
}

/**
 * API를 호출하여 현재 사용자의 작업 통계를 불러와 화면에 표시합니다.
 */
async function loadWorkStats() {
  const statsContainer = document.getElementById('work-stats');
  statsContainer.innerHTML = '<p>📈 내 작업 현황을 불러오는 중...</p>';
  
  try {
    // 예시: /api/dashboard/my-stats 엔드포인트에서 데이터를 가져옵니다.
    const statsData = await apiGet('/dashboard/my-stats');

    if (statsData) {
      const statsHtml = `
        <div class="stat-item">
          <span>이번 주 작업 시간:</span>
          <strong>${statsData.weekly_hours || 0} 시간</strong>
        </div>
        <div class="stat-item">
          <span>이번 달 작업 시간:</span>
          <strong>${statsData.monthly_hours || 0} 시간</strong>
        </div>
        <div class="stat-item">
          <span>완료한 작업 수:</span>
          <strong>${statsData.completed_tasks || 0} 건</strong>
        </div>
      `;
      statsContainer.innerHTML = statsHtml;
    } else {
      statsContainer.innerHTML = '<p>표시할 통계 정보가 없습니다.</p>';
    }
  } catch (error) {
    console.error('작업 통계 로드 실패:', error);
    statsContainer.innerHTML = '<p class="error">통계 정보를 불러오는 데 실패했습니다.</p>';
  }
}

/**
 * 환영 메시지를 사용자 이름으로 개인화합니다.
 */
function personalizeWelcome() {
  // 전역 변수 대신 auth.js 모듈을 통해 사용자 정보를 가져옵니다.
  const user = getUser();
  if (user) {
    const welcomeEl = document.getElementById('welcome-message');
    if (welcomeEl) {
      welcomeEl.textContent = `${user.name || user.username}님, 환영합니다! 오늘 하루도 안전하게 작업하세요.`;
    }
  }
}

// 페이지 초기화 함수
function initializeDashboard() {
  personalizeWelcome();
  loadTodaySchedule();
  loadWorkStats();
}

// DOM이 로드되면 대시보드 초기화를 시작합니다.
document.addEventListener('DOMContentLoaded', initializeDashboard);