대시보드와 주간보고 기능 업데이트

frontend/index.vue

@@ -7,22 +7,24 @@
       <div class="row mb-4">
         <div class="col">
           <div class="d-flex justify-content-between align-items-center">
-            <div>
-              <h4 class="mb-1">
-                <i class="bi bi-speedometer2 me-2"></i>리소스 현황
-              </h4>
-              <p class="text-muted mb-0">
-                {{ currentWeek.year }}년 {{ currentWeek.week }}주차 
-                ({{ currentWeek.startDateStr }} ~ {{ currentWeek.endDateStr }})
-              </p>
-            </div>
-            <div class="d-flex gap-2">
-              <select class="form-select form-select-sm" style="width: 100px;" v-model="selectedYear" @change="loadStats">
+            <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: 90px;" v-model="selectedWeek" @change="loadStats">
-                <option v-for="w in weekOptions" :key="w" :value="w">{{ w }}주</option>
+              <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>
@@ -74,7 +76,7 @@
         <div class="col-md-3">
           <div class="card h-100">
             <div class="card-body text-center">
-              <div class="text-muted small">리소스 현황</div>
+              <div class="text-muted small">업무 부하</div>
               <div class="d-flex justify-content-around mt-1">
                 <div>
                   <span class="badge bg-success">{{ resourceStatus.available }}</span>
@@ -106,7 +108,7 @@
                 <span class="badge bg-danger">48h~</span>
               </div>
             </div>
-            <div class="card-body p-0" style="max-height: 500px; overflow-y: auto;">
+            <div class="card-body p-0">
               <table class="table table-sm table-hover mb-0">
                 <thead class="table-light sticky-top">
                   <tr>
@@ -118,7 +120,7 @@
                 </thead>
                 <tbody>
                   <tr v-for="emp in stats.employees" :key="emp.employeeId"
-                      :class="{ 'table-light text-muted': !emp.isSubmitted }">
+                      :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>
@@ -129,19 +131,20 @@
                       </div>
                     </td>
                     <td class="text-center">
-                      <span v-if="emp.isSubmitted" :class="getWorkloadClass(emp.workHours)">
+                      <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.isSubmitted" :class="getWorkloadClass(emp.planHours)">
+                      <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.isSubmitted" class="badge bg-success">제출</span>
+                      <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>
@@ -160,7 +163,7 @@
             <div class="card-header">
               <i class="bi bi-briefcase me-2"></i>프로젝트별 투입 현황
             </div>
-            <div class="card-body p-0" style="max-height: 500px; overflow-y: auto;">
+            <div class="card-body p-0">
               <table class="table table-sm table-hover mb-0">
                 <thead class="table-light sticky-top">
                   <tr>
@@ -195,61 +198,79 @@
           </div>
         </div>
       </div>
-
-      <!-- 하단: 빠른 링크 -->
-      <div class="row g-3 mt-3">
-        <div class="col-md-3">
-          <NuxtLink to="/report/weekly/write" class="card text-decoration-none h-100">
-            <div class="card-body text-center py-3">
-              <i class="bi bi-plus-circle display-6 text-primary"></i>
-              <div class="mt-2">주간보고 작성</div>
-            </div>
-          </NuxtLink>
-        </div>
-        <div class="col-md-3">
-          <NuxtLink to="/report/weekly" class="card text-decoration-none h-100">
-            <div class="card-body text-center py-3">
-              <i class="bi bi-journal-text display-6 text-success"></i>
-              <div class="mt-2">주간보고 목록</div>
-            </div>
-          </NuxtLink>
-        </div>
-        <div class="col-md-3" v-if="isAdmin">
-          <NuxtLink to="/report/summary" class="card text-decoration-none h-100">
-            <div class="card-body text-center py-3">
-              <i class="bi bi-collection display-6 text-info"></i>
-              <div class="mt-2">취합 보고서</div>
-            </div>
-          </NuxtLink>
-        </div>
-        <div class="col-md-3">
-          <NuxtLink to="/project" class="card text-decoration-none h-100">
-            <div class="card-body text-center py-3">
-              <i class="bi bi-briefcase display-6 text-warning"></i>
-              <div class="mt-2">프로젝트 관리</div>
-            </div>
-          </NuxtLink>
-        </div>
-      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 const { currentUser, fetchCurrentUser } = useAuth()
-const { getCurrentWeekInfo } = useWeekCalc()
+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 weekOptions = Array.from({ length: 53 }, (_, i) => i + 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,