74d3a78aa3
- 페이지 폴더 재구성: safety/, attendance/ 폴더 신규 생성 - work/ → safety/: 이슈 신고, 출입 신청 관련 페이지 이동 - common/ → attendance/: 근태/휴가 관련 페이지 이동 - admin/ 정리: safety-* 파일들을 safety/로 이동 - 사이드바 네비게이션 메뉴 구현 - 카테고리별 메뉴: 작업관리, 안전관리, 근태관리, 시스템관리 - 접기/펼치기 기능 및 상태 저장 - 관리자 전용 메뉴 자동 표시/숨김 - 날씨 API 연동 (기상청 단기예보) - TBM 및 navbar에 현재 날씨 표시 - weatherService.js 추가 - 안전 체크리스트 확장 - 기본/날씨별/작업별 체크 유형 추가 - checklist-manage.html 페이지 추가 - 이슈 신고 시스템 구현 - workIssueController, workIssueModel, workIssueRoutes 추가 - DB 마이그레이션 파일 추가 (실행 대기) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
144 lines
4.9 KiB
HTML
144 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>연간 연차 현황 | 테크니컬코리아</title>
|
|
|
|
<!-- 모던 디자인 시스템 적용 -->
|
|
<link rel="stylesheet" href="/css/design-system.css">
|
|
<link rel="stylesheet" href="/css/annual-vacation-overview.css">
|
|
<link rel="icon" type="image/png" href="/img/favicon.png">
|
|
|
|
<!-- 스크립트 -->
|
|
<script type="module" src="/js/api-config.js"></script>
|
|
<script type="module" src="/js/auth-check.js" defer></script>
|
|
<script type="module" src="/js/load-navbar.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0"></script>
|
|
<script type="module" src="/js/annual-vacation-overview.js" defer></script>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- 메인 컨테이너 -->
|
|
<div class="page-container">
|
|
|
|
<!-- 네비게이션 헤더 -->
|
|
<div id="navbar-container"></div>
|
|
|
|
<!-- 메인 콘텐츠 -->
|
|
<main class="main-content">
|
|
<div class="content-wrapper">
|
|
|
|
<!-- 페이지 헤더 -->
|
|
<div class="page-header">
|
|
<h1 class="page-title">📊 연간 연차 현황</h1>
|
|
<p class="page-description">모든 작업자의 연간 휴가 현황을 차트로 확인합니다</p>
|
|
</div>
|
|
|
|
<!-- 필터 섹션 -->
|
|
<section class="filter-section">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="filter-controls">
|
|
<div class="form-group">
|
|
<label for="yearSelect">조회 연도</label>
|
|
<select id="yearSelect" class="form-select">
|
|
<!-- JavaScript로 동적 생성 -->
|
|
</select>
|
|
</div>
|
|
<button id="refreshBtn" class="btn btn-primary">
|
|
조회
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 탭 네비게이션 -->
|
|
<section class="tabs-section">
|
|
<div class="tabs-nav">
|
|
<button class="tab-btn active" data-tab="annualUsage">연간 사용 기록</button>
|
|
<button class="tab-btn" data-tab="monthlyDetails">월별 상세 기록</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 탭 1: 연간 사용 기록 -->
|
|
<section id="annualUsageTab" class="tab-content active">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">월별 휴가 사용 현황</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart-container">
|
|
<canvas id="annualUsageChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 탭 2: 월별 상세 기록 -->
|
|
<section id="monthlyDetailsTab" class="tab-content">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">월별 상세 기록</h2>
|
|
<div class="month-controls">
|
|
<select id="monthSelect" class="form-select">
|
|
<option value="1">1월</option>
|
|
<option value="2">2월</option>
|
|
<option value="3">3월</option>
|
|
<option value="4">4월</option>
|
|
<option value="5">5월</option>
|
|
<option value="6">6월</option>
|
|
<option value="7">7월</option>
|
|
<option value="8">8월</option>
|
|
<option value="9">9월</option>
|
|
<option value="10">10월</option>
|
|
<option value="11">11월</option>
|
|
<option value="12">12월</option>
|
|
</select>
|
|
<button id="exportExcelBtn" class="btn btn-sm btn-secondary">
|
|
📥 엑셀 다운로드
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>작업자명</th>
|
|
<th>휴가 유형</th>
|
|
<th>시작일</th>
|
|
<th>종료일</th>
|
|
<th>사용 일수</th>
|
|
<th>사유</th>
|
|
<th>상태</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="monthlyTableBody">
|
|
<tr>
|
|
<td colspan="7" class="loading-state">
|
|
<div class="spinner"></div>
|
|
<p>데이터를 불러오는 중...</p>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
</div>
|
|
|
|
<!-- 알림 토스트 -->
|
|
<div class="toast-container" id="toastContainer"></div>
|
|
|
|
</body>
|
|
|
|
</html>
|