weeklyreport/frontend/index.vue

<template>
  <div>
    <AppHeader />
    
    <div class="container-fluid py-4">
      <!-- 헤더 -->
      <div class="row mb-4">
        <div class="col">
          <div class="d-flex justify-content-between align-items-center">
            <h4 class="mb-0">
              <i class="bi bi-speedometer2 me-2"></i>대시보드
            </h4>
            <div class="d-flex align-items-center gap-2">
              <button class="btn btn-outline-secondary btn-sm" @click="changeWeek(-1)" title="이전 주차">
                <i class="bi bi-chevron-left"></i>
              </button>
              <select class="form-select form-select-sm" style="width: 100px;" v-model="selectedYear" @change="onYearChange">
                <option v-for="y in yearOptions" :key="y" :value="y">{{ y }}년</option>
              </select>
              <select class="form-select form-select-sm" style="width: auto;" v-model="selectedWeek" @change="loadStats">
                <option v-for="opt in weekOptionsWithDates" :key="opt.week" :value="opt.week">
                  {{ opt.label }}
                </option>
              </select>
              <button class="btn btn-outline-secondary btn-sm" @click="changeWeek(1)" title="다음 주차" :disabled="isCurrentWeek">
                <i class="bi bi-chevron-right"></i>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 요약 카드 -->
      <div class="row g-3 mb-4">
        <div class="col-md-2">
          <div class="card h-100 border-primary">
            <div class="card-body text-center">
              <div class="text-muted small">제출현황</div>
              <h3 class="mb-0">
                <span class="text-primary">{{ stats.summary.submittedCount }}</span>
                <span class="text-muted">/{{ stats.summary.activeEmployees }}</span>
              </h3>
              <div class="small" :class="stats.summary.notSubmittedCount > 0 ? 'text-danger' : 'text-success'">
                {{ stats.summary.notSubmittedCount > 0 ? `${stats.summary.notSubmittedCount}명 미제출` : '전원 제출' }}
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-2">
          <div class="card h-100 border-success">
            <div class="card-body text-center">
              <div class="text-muted small">금주 실적</div>
              <h3 class="mb-0 text-success">{{ formatHours(stats.summary.totalWorkHours) }}</h3>
              <div class="small text-muted">{{ stats.summary.projectCount }}개 프로젝트</div>
            </div>
          </div>
        </div>
        <div class="col-md-2">
          <div class="card h-100 border-info">
            <div class="card-body text-center">
              <div class="text-muted small">차주 계획</div>
              <h3 class="mb-0 text-info">{{ formatHours(stats.summary.totalPlanHours) }}</h3>
              <div class="small text-muted">예정 업무량</div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card h-100">
            <div class="card-body text-center">
              <div class="text-muted small">평균 업무시간</div>
              <h3 class="mb-0">{{ formatHours(avgWorkHours) }}</h3>
              <div class="small text-muted">인당 (40h 기준)</div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card h-100">
            <div class="card-body text-center">
              <div class="text-muted small">업무 부하</div>
              <div class="d-flex justify-content-around mt-1">
                <div>
                  <span class="badge bg-success">{{ resourceStatus.available }}</span>
                  <div class="small text-muted">여유</div>
                </div>
                <div>
                  <span class="badge bg-primary">{{ resourceStatus.normal }}</span>
                  <div class="small text-muted">정상</div>
                </div>
                <div>
                  <span class="badge bg-danger">{{ resourceStatus.overload }}</span>
                  <div class="small text-muted">과부하</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row g-4">
        <!-- 인원별 현황 -->
        <div class="col-lg-6">
          <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
              <span><i class="bi bi-people me-2"></i>인원별 업무 현황</span>
              <div class="small text-muted">
                <span class="badge bg-success me-1">~32h</span>
                <span class="badge bg-primary me-1">32~48h</span>
                <span class="badge bg-danger">48h~</span>
              </div>
            </div>
            <div class="card-body p-0">
              <table class="table table-sm table-hover mb-0">
                <thead class="table-light sticky-top">
                  <tr>
                    <th>이름</th>
                    <th class="text-center" style="width: 80px;">금주실적</th>
                    <th class="text-center" style="width: 80px;">차주계획</th>
                    <th class="text-center" style="width: 60px;">상태</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="emp in stats.employees" :key="emp.employeeId"
                      :class="{ 'table-light text-muted': !emp.reportId }">
                    <td>
                      <div class="d-flex align-items-center">
                        <span :class="getWorkloadBadge(emp.workHours)" class="me-2" style="width: 8px; height: 8px; border-radius: 50%; display: inline-block;"></span>
                        <div>
                          <div>{{ emp.employeeName }}</div>
                          <div class="small text-muted">{{ emp.company || '' }}</div>
                        </div>
                      </div>
                    </td>
                    <td class="text-center">
                      <span v-if="emp.reportId" :class="getWorkloadClass(emp.workHours)">
                        {{ emp.workHours }}h
                      </span>
                      <span v-else class="text-muted">-</span>
                    </td>
                    <td class="text-center">
                      <span v-if="emp.reportId" :class="getWorkloadClass(emp.planHours)">
                        {{ emp.planHours }}h
                      </span>
                      <span v-else class="text-muted">-</span>
                    </td>
                    <td class="text-center">
                      <span v-if="emp.reportStatus === 'SUBMITTED' || emp.reportStatus === 'AGGREGATED'" class="badge bg-success">제출</span>
                      <span v-else-if="emp.reportStatus === 'DRAFT'" class="badge bg-warning">작성중</span>
                      <span v-else class="badge bg-secondary">미제출</span>
                    </td>
                  </tr>
                  <tr v-if="stats.employees.length === 0">
                    <td colspan="4" class="text-center py-4 text-muted">데이터가 없습니다.</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- 프로젝트별 현황 -->
        <div class="col-lg-6">
          <div class="card h-100">
            <div class="card-header">
              <i class="bi bi-briefcase me-2"></i>프로젝트별 투입 현황
            </div>
            <div class="card-body p-0">
              <table class="table table-sm table-hover mb-0">
                <thead class="table-light sticky-top">
                  <tr>
                    <th>프로젝트</th>
                    <th class="text-center" style="width: 60px;">인원</th>
                    <th class="text-center" style="width: 80px;">금주실적</th>
                    <th class="text-center" style="width: 80px;">차주계획</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="proj in stats.projects" :key="proj.projectId">
                    <td>
                      <div>{{ proj.projectName }}</div>
                      <div class="small text-muted">{{ proj.members.slice(0, 3).join(', ') }}{{ proj.members.length > 3 ? ` 외 ${proj.members.length - 3}명` : '' }}</div>
                    </td>
                    <td class="text-center">
                      <span class="badge bg-primary">{{ proj.memberCount }}명</span>
                    </td>
                    <td class="text-center">
                      <strong>{{ proj.workHours }}h</strong>
                    </td>
                    <td class="text-center text-info">
                      {{ proj.planHours }}h
                    </td>
                  </tr>
                  <tr v-if="stats.projects.length === 0">
                    <td colspan="4" class="text-center py-4 text-muted">데이터가 없습니다.</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const { currentUser, fetchCurrentUser } = useAuth()
const { getCurrentWeekInfo, getActualCurrentWeekInfo, getWeekDates, getWeeksInYear, changeWeek: calcChangeWeek } = useWeekCalc()
const router = useRouter()

const currentWeek = getCurrentWeekInfo()
const actualCurrentWeek = getActualCurrentWeekInfo() // 실제 현재 주차
const isAdmin = ref(false)

const currentYear = new Date().getFullYear()
const yearOptions = [currentYear, currentYear - 1]

const selectedYear = ref(currentWeek.year)
const selectedWeek = ref(currentWeek.week)

// 현재 주차인지 확인 (다음 버튼 비활성화용)
const isCurrentWeek = computed(() => 
  selectedYear.value === actualCurrentWeek.year && selectedWeek.value === actualCurrentWeek.week
)

// 미래 주차인지 확인
const isFutureWeek = computed(() => {
  if (selectedYear.value > actualCurrentWeek.year) return true
  if (selectedYear.value === actualCurrentWeek.year && selectedWeek.value > actualCurrentWeek.week) return true
  return false
})

// 주차 옵션 (날짜 포함, 현재 주차까지만)
const weekOptionsWithDates = computed(() => {
  const weeksInYear = getWeeksInYear(selectedYear.value)
  // 현재 연도면 현재 주차까지만, 과거 연도면 전체
  const maxWeek = selectedYear.value === actualCurrentWeek.year 
    ? actualCurrentWeek.week 
    : weeksInYear
  
  return Array.from({ length: maxWeek }, (_, i) => {
    const week = i + 1
    const weekInfo = getWeekDates(selectedYear.value, week)
    const startMD = weekInfo.startDateStr.slice(5).replace('-', '/') // MM/DD
    const endMD = weekInfo.endDateStr.slice(5).replace('-', '/')     // MM/DD
    return {
      week,
      label: `${week}주차 (${startMD}~${endMD})`
    }
  })
})

// 주차 변경
function changeWeek(delta: number) {
  const result = calcChangeWeek(selectedYear.value, selectedWeek.value, delta)
  
  // 미래 주차로 이동 방지
  if (result.year > actualCurrentWeek.year) return
  if (result.year === actualCurrentWeek.year && result.week > actualCurrentWeek.week) return
  
  selectedYear.value = result.year
  selectedWeek.value = result.week
  loadStats()
}

// 연도 변경 시 주차 범위 조정
function onYearChange() {
  const maxWeek = getWeeksInYear(selectedYear.value)
  if (selectedWeek.value > maxWeek) {
    selectedWeek.value = maxWeek
  }
  loadStats()
}

const stats = ref<any>({
  summary: {
    activeEmployees: 0,
    submittedCount: 0,
    notSubmittedCount: 0,
    totalWorkHours: 0,
    totalPlanHours: 0,
    projectCount: 0
  },
  employees: [],
  projects: []
})

// 평균 업무시간 (제출자 기준)
const avgWorkHours = computed(() => {
  const submitted = stats.value.employees.filter((e: any) => e.isSubmitted)
  if (submitted.length === 0) return 0
  const total = submitted.reduce((sum: number, e: any) => sum + e.workHours, 0)
  return Math.round(total / submitted.length)
})

// 리소스 현황 (여유/정상/과부하)
const resourceStatus = computed(() => {
  const submitted = stats.value.employees.filter((e: any) => e.isSubmitted)
  return {
    available: submitted.filter((e: any) => e.workHours < 32).length,
    normal: submitted.filter((e: any) => e.workHours >= 32 && e.workHours <= 48).length,
    overload: submitted.filter((e: any) => e.workHours > 48).length
  }
})

onMounted(async () => {
  const user = await fetchCurrentUser()
  if (!user) {
    router.push('/login')
    return
  }
  
  isAdmin.value = user.employeeEmail === 'coziny@gmail.com'
  await loadStats()
})

async function loadStats() {
  try {
    const res = await $fetch<any>('/api/dashboard/stats', {
      query: { year: selectedYear.value, week: selectedWeek.value }
    })
    stats.value = res
  } catch (e) {
    console.error('Dashboard stats error:', e)
  }
}

function formatHours(hours: number): string {
  if (!hours || hours <= 0) return '0h'
  const days = Math.floor(hours / 8)
  const remain = hours % 8
  if (days === 0) return `${hours}h`
  if (remain === 0) return `${days}일`
  return `${days}일 ${remain}h`
}

function getWorkloadBadge(hours: number): string {
  if (hours < 32) return 'bg-success'
  if (hours <= 48) return 'bg-primary'
  return 'bg-danger'
}

function getWorkloadClass(hours: number): string {
  if (hours < 32) return 'text-success'
  if (hours <= 48) return ''
  return 'text-danger fw-bold'
}
</script>

<style scoped>
.card {
  border-radius: 0.5rem;
}
.card-header {
  background-color: #f8f9fa;
  font-weight: 500;
}
.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1;
}
a.card:hover {
  background-color: #f8f9fa;
}
</style>