feat: 초기 프로젝트 설정 및 룰.md 파일 추가
This commit is contained in:
181
web-ui/pages/admin/attendance-validation.html
Normal file
181
web-ui/pages/admin/attendance-validation.html
Normal file
@@ -0,0 +1,181 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>근태 검증 관리 시스템 | (주)테크니컬코리아</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="/css/attendance-validation.css">
|
||||
<link rel="icon" type="image/png" href="/img/favicon.png">
|
||||
<script src="/js/auth-check.js" defer></script>
|
||||
</head>
|
||||
<body class="bg-gray-50 min-h-screen">
|
||||
<!-- 네비게이션 바 -->
|
||||
<div id="navbar-container"></div>
|
||||
|
||||
<div class="max-w-7xl mx-auto p-6">
|
||||
<!-- 뒤로가기 버튼 -->
|
||||
<a href="javascript:history.back()" class="back-btn">
|
||||
← 뒤로가기
|
||||
</a>
|
||||
|
||||
<!-- 헤더 -->
|
||||
<div class="page-header">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-3">
|
||||
<span class="text-4xl">👥</span>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-white">근태 검증 관리</h1>
|
||||
<p class="text-lg text-white/90 mt-2">작업자별 근무시간을 검증하고 관리합니다</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm text-white/80 bg-white/20 px-4 py-2 rounded-lg">
|
||||
🔒 Admin 전용
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 메시지 영역 -->
|
||||
<div id="message-container"></div>
|
||||
|
||||
<!-- 로딩 화면 -->
|
||||
<div id="loadingScreen" class="hidden">
|
||||
<div class="loading-card">
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="loading-spinner"></div>
|
||||
<span class="ml-3 text-gray-600">데이터를 불러오는 중...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 메인 콘텐츠 -->
|
||||
<div id="mainContent">
|
||||
<!-- 캘린더 섹션 -->
|
||||
<div class="main-card">
|
||||
<!-- 캘린더 헤더 -->
|
||||
<div class="calendar-header">
|
||||
<button id="prevMonth" class="nav-btn">
|
||||
<span class="text-xl">◀</span>
|
||||
</button>
|
||||
<h2 id="currentMonthYear" class="text-2xl font-bold text-gray-800">
|
||||
2025년 6월
|
||||
</h2>
|
||||
<button id="nextMonth" class="nav-btn">
|
||||
<span class="text-xl">▶</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 월간 요약 정보 -->
|
||||
<div class="summary-section">
|
||||
<h3 class="summary-title">이번 달 요약</h3>
|
||||
<div class="summary-grid">
|
||||
<div class="summary-card normal">
|
||||
<div id="normalCount" class="summary-number">0</div>
|
||||
<div class="summary-label">✅ 정상</div>
|
||||
</div>
|
||||
<div class="summary-card warning">
|
||||
<div id="reviewCount" class="summary-number">0</div>
|
||||
<div class="summary-label">⚠️ 검토필요</div>
|
||||
</div>
|
||||
<div class="summary-card error">
|
||||
<div id="missingCount" class="summary-number">0</div>
|
||||
<div class="summary-label">❌ 미입력</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 요일 헤더 -->
|
||||
<div class="weekday-header">
|
||||
<div class="weekday sunday">일</div>
|
||||
<div class="weekday">월</div>
|
||||
<div class="weekday">화</div>
|
||||
<div class="weekday">수</div>
|
||||
<div class="weekday">목</div>
|
||||
<div class="weekday">금</div>
|
||||
<div class="weekday saturday">토</div>
|
||||
</div>
|
||||
|
||||
<!-- 캘린더 본체 -->
|
||||
<div id="calendarGrid" class="calendar-grid">
|
||||
<!-- 동적으로 생성됨 -->
|
||||
</div>
|
||||
|
||||
<!-- 범례 -->
|
||||
<div class="legend">
|
||||
<div class="legend-item">
|
||||
<div class="legend-dot normal"></div>
|
||||
<span>정상</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-dot warning"></div>
|
||||
<span>검토필요</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-dot error"></div>
|
||||
<span>미입력</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 성능 상태 표시 (개발용) -->
|
||||
<div id="performanceStatus" class="text-xs text-gray-500 text-center mt-4 hidden">
|
||||
<div class="bg-gray-100 rounded-lg p-2">
|
||||
🔄 순차 호출: <span id="activeReq">0</span>개 처리 중 |
|
||||
📦 캐시: <span id="cacheCount">0</span>개 저장됨 |
|
||||
⏳ 대기: <span id="queueCount">0</span>개 |
|
||||
🚫 429 에러 방지 (2초 딜레이)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 작업자 리스트 섹션 -->
|
||||
<div id="workersList" class="main-card">
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">🔄</div>
|
||||
<h3 class="empty-title">날짜를 클릭해주세요</h3>
|
||||
<p class="empty-description">
|
||||
캘린더에서 날짜를 클릭하면 해당 날짜의 작업자 검증 내역을 확인할 수 있습니다.<br>
|
||||
<strong>순차 호출 방식</strong>으로 안정적이지만 약 5초의 로딩 시간이 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 수정 모달 -->
|
||||
<div id="editModal" class="modal hidden">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>✏️ 근무시간 수정</h3>
|
||||
<button class="close-btn" onclick="closeEditModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>👤 작업자</label>
|
||||
<input type="text" id="editWorkerName" class="form-input" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>📊 현재 상태</label>
|
||||
<input type="text" id="editWorkerStatus" class="form-input" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>⏰ 근무시간 (시간)</label>
|
||||
<input type="number" id="editWorkHours" class="form-input"
|
||||
min="0" max="24" step="0.5" placeholder="근무시간을 입력하세요">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>📝 수정 사유</label>
|
||||
<textarea id="editReason" class="form-textarea"
|
||||
placeholder="수정 사유를 입력하세요 (선택사항)"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn-secondary" onclick="closeEditModal()">취소</button>
|
||||
<button class="btn-primary" onclick="saveEditedWork()">💾 저장</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="/js/load-navbar.js"></script>
|
||||
<script src="/js/attendance-validation.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user