90d3e32992
- 일일순회점검 시스템 신규 구현 - DB 테이블: patrol_checklist_items, daily_patrol_sessions, patrol_check_records, workplace_items, item_types - API: /api/patrol/* 엔드포인트 - 프론트엔드: 지도 기반 작업장 점검 UI - 설비 관리 기능 개선 - 구매 관련 필드 추가 (구매일, 가격, 공급업체 등) - 설비 코드 자동 생성 (TKP-XXX 형식) - 작업장 관리 개선 - 레이아웃 이미지 업로드 기능 - 마커 위치 저장 기능 - 부서 관리 기능 추가 - 사이드바 네비게이션 카테고리 재구성 - 이미지 401 오류 수정 (정적 파일 경로 처리) 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 src="/js/api-base.js"></script>
|
|
<script src="/js/app-init.js?v=2" defer></script>
|
|
<script src="https://instant.page/5.2.0" type="module"></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>
|