Files
TK-FB-Project/web-ui/pages.backup.20260202/.archived-management-dashboard.html
Hyungi Ahn 74d3a78aa3 feat: 페이지 구조 재구성 및 사이드바 네비게이션 구현
- 페이지 폴더 재구성: 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>
2026-02-02 14:27:22 +09:00

215 lines
8.0 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>