- 페이지 폴더 재구성: 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>
215 lines
8.0 KiB
HTML
215 lines
8.0 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/main-layout.css">
|
||
<link rel="stylesheet" href="/css/management-dashboard.css">
|
||
<link rel="icon" type="image/png" href="/img/favicon.png">
|
||
<script type="module" src="/js/auth-check.js" defer></script>
|
||
</head>
|
||
<body>
|
||
<div class="main-layout-with-navbar">
|
||
<!-- 네비게이션 바 -->
|
||
<div id="navbar-container"></div>
|
||
|
||
<div class="content-wrapper">
|
||
<div class="dashboard-container">
|
||
<!-- 뒤로가기 버튼 -->
|
||
<a href="javascript:history.back()" class="back-btn">
|
||
← 뒤로가기
|
||
</a>
|
||
|
||
<!-- 페이지 헤더 -->
|
||
<div class="page-header">
|
||
<h1>📊 관리자 대시보드</h1>
|
||
<p class="subtitle">팀 전체의 일일 작업 입력 현황을 한눈에 확인하세요</p>
|
||
</div>
|
||
|
||
<!-- 권한 체크 메시지 -->
|
||
<div id="permission-check-message" class="message warning" style="display: none;">
|
||
⚠️ 권한을 확인하는 중입니다...
|
||
</div>
|
||
|
||
<!-- 메시지 영역 -->
|
||
<div id="message-container"></div>
|
||
|
||
<!-- 날짜 선택 섹션 -->
|
||
<div class="date-selection-card">
|
||
<div class="date-selection-header">
|
||
<h3>📅 조회 날짜 선택</h3>
|
||
<button class="refresh-btn" id="refreshBtn">
|
||
🔄 새로고침
|
||
</button>
|
||
</div>
|
||
<div class="date-selection-body">
|
||
<input type="date" id="selectedDate" class="date-input">
|
||
<button class="btn btn-primary" id="loadDataBtn">📊 현황 조회</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 요약 대시보드 -->
|
||
<div id="summarySection" class="summary-section" style="display: none;">
|
||
<h3>📈 전체 현황 요약</h3>
|
||
<div class="summary-grid">
|
||
<div class="summary-card total-workers">
|
||
<div class="summary-icon">👥</div>
|
||
<div class="summary-content">
|
||
<div class="summary-number" id="totalWorkers">0</div>
|
||
<div class="summary-label">전체 작업자</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="summary-card completed-workers">
|
||
<div class="summary-icon">✅</div>
|
||
<div class="summary-content">
|
||
<div class="summary-number" id="completedWorkers">0</div>
|
||
<div class="summary-label">입력 완료</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="summary-card missing-workers">
|
||
<div class="summary-icon">❌</div>
|
||
<div class="summary-content">
|
||
<div class="summary-number" id="missingWorkers">0</div>
|
||
<div class="summary-label">입력 미완료</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="summary-card total-hours">
|
||
<div class="summary-icon">⏰</div>
|
||
<div class="summary-content">
|
||
<div class="summary-number" id="totalHours">0</div>
|
||
<div class="summary-label">총 작업시간</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="summary-card total-entries">
|
||
<div class="summary-icon">📝</div>
|
||
<div class="summary-content">
|
||
<div class="summary-number" id="totalEntries">0</div>
|
||
<div class="summary-label">총 작업항목</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="summary-card error-count">
|
||
<div class="summary-icon">⚠️</div>
|
||
<div class="summary-content">
|
||
<div class="summary-number" id="errorCount">0</div>
|
||
<div class="summary-label">에러 발생</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 필터 및 액션 바 -->
|
||
<div id="actionBar" class="action-bar" style="display: none;">
|
||
<div class="filter-section">
|
||
<label class="filter-checkbox">
|
||
<input type="checkbox" id="showOnlyMissing">
|
||
<span class="checkmark"></span>
|
||
미입력자만 보기
|
||
</label>
|
||
</div>
|
||
<div class="action-section">
|
||
<button class="btn btn-secondary" id="exportBtn">
|
||
📥 엑셀 다운로드
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 작업자 현황 테이블 -->
|
||
<div id="workersSection" class="workers-section" style="display: none;">
|
||
<div class="section-header">
|
||
<h3>👥 작업자별 입력 현황</h3>
|
||
<div class="legend">
|
||
<span class="legend-item completed">✅ 입력완료</span>
|
||
<span class="legend-item missing">❌ 미입력</span>
|
||
<span class="legend-item partial">⚠️ 부분입력</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="table-container">
|
||
<table class="workers-table" id="workersTable">
|
||
<thead>
|
||
<tr>
|
||
<th>작업자</th>
|
||
<th>상태</th>
|
||
<th>총시간</th>
|
||
<th>항목수</th>
|
||
<th>작업유형</th>
|
||
<th>프로젝트</th>
|
||
<th>기여자</th>
|
||
<th>최근업데이트</th>
|
||
<th>상세</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="workersTableBody">
|
||
<!-- 작업자 데이터가 여기에 동적으로 추가됩니다 -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 로딩 스피너 -->
|
||
<div id="loadingSpinner" class="loading-spinner" style="display: none;">
|
||
<div class="spinner"></div>
|
||
<p>데이터를 불러오는 중...</p>
|
||
</div>
|
||
|
||
<!-- 데이터 없음 메시지 -->
|
||
<div id="noDataMessage" class="no-data-message" style="display: none;">
|
||
<div class="no-data-icon">📭</div>
|
||
<h3>표시할 데이터가 없습니다</h3>
|
||
<p>선택한 날짜에 입력된 작업 데이터가 없거나<br>조회 권한이 없습니다.</p>
|
||
</div>
|
||
|
||
<!-- 사용법 안내 -->
|
||
<div class="guide-section">
|
||
<h3>📖 사용 가이드</h3>
|
||
<div class="guide-grid">
|
||
<div class="guide-item">
|
||
<div class="guide-icon">📅</div>
|
||
<strong>날짜 선택</strong><br>
|
||
확인하고 싶은 날짜를 선택하세요
|
||
</div>
|
||
<div class="guide-item">
|
||
<div class="guide-icon">📊</div>
|
||
<strong>현황 확인</strong><br>
|
||
팀 전체의 입력 현황을 확인하세요
|
||
</div>
|
||
<div class="guide-item">
|
||
<div class="guide-icon">🔍</div>
|
||
<strong>필터링</strong><br>
|
||
미입력자만 따로 확인할 수 있습니다
|
||
</div>
|
||
<div class="guide-item">
|
||
<div class="guide-icon">📥</div>
|
||
<strong>내보내기</strong><br>
|
||
엑셀로 데이터를 다운로드하세요
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 작업자 상세 모달 -->
|
||
<div id="workerDetailModal" class="worker-detail-modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3 id="modalWorkerName">작업자 상세</h3>
|
||
<button class="close-modal-btn" onclick="closeWorkerDetailModal()">×</button>
|
||
</div>
|
||
<div class="modal-body" id="modalWorkerDetails">
|
||
<!-- 작업자 상세 정보가 여기에 표시됩니다 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 스크립트 -->
|
||
<script type="module" src="/js/load-navbar.js"></script>
|
||
<script type="module" src="/js/management-dashboard.js"></script>
|
||
</body>
|
||
</html> |