feat: Implement daily attendance tracking system
- Backend: Auto-sync work reports with attendance records - Backend: Lazy initialization of daily active worker records - Frontend: Real-time attendance status on Group Leader Dashboard
This commit is contained in:
Hyungi Ahn
@@ -1896,3 +1896,99 @@
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 근태 현황 그리드 (Added dynamically) ========== */
|
||||
.status-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.worker-card {
|
||||
background: white;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
border: 1px solid #e2e8f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.worker-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.worker-card.status-alert {
|
||||
background-color: #fef2f2;
|
||||
}
|
||||
|
||||
.worker-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.worker-name {
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.worker-job {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
background: #f3f4f6;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.worker-body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
font-size: 0.8rem;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.work-hours {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.worker-footer {
|
||||
margin-top: auto;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px dashed #e5e7eb;
|
||||
}
|
||||
|
||||
.alert-text {
|
||||
color: #ef4444;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #6b7280;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -1,103 +1,174 @@
|
||||
// /js/group-leader-dashboard.js
|
||||
// 그룹장 전용 대시보드 기능
|
||||
// 그룹장 전용 대시보드 - 실시간 근태 및 작업 현황 (Real Data Version)
|
||||
|
||||
console.log('📊 그룹장 대시보드 스크립트 로딩');
|
||||
console.log('📊 그룹장 대시보드 스크립트 로딩 (Live Data)');
|
||||
|
||||
// 상태별 스타일/텍스트 매핑
|
||||
const STATUS_MAP = {
|
||||
'incomplete': { text: '미제출', class: 'status-incomplete', icon: '❌', color: '#ff5252' },
|
||||
'partial': { text: '작성중', class: 'status-warning', icon: '📝', color: '#ff9800' },
|
||||
'complete': { text: '제출완료', class: 'status-success', icon: '✅', color: '#4caf50' },
|
||||
'overtime': { text: '초과근무', class: 'status-info', icon: '🌙', color: '#673ab7' },
|
||||
'vacation': { text: '휴가', class: 'status-vacation', icon: '🏖️', color: '#2196f3' }
|
||||
};
|
||||
|
||||
// 현재 선택된 날짜
|
||||
let currentSelectedDate = new Date().toISOString().split('T')[0];
|
||||
|
||||
/**
|
||||
* 📅 날짜 초기화 및 이벤트 리스너 등록
|
||||
*/
|
||||
function initDateSelector() {
|
||||
const dateInput = document.getElementById('selectedDate');
|
||||
const refreshBtn = document.getElementById('refreshBtn');
|
||||
|
||||
if (dateInput) {
|
||||
dateInput.value = currentSelectedDate;
|
||||
dateInput.addEventListener('change', (e) => {
|
||||
currentSelectedDate = e.target.value;
|
||||
loadDailyWorkStatus();
|
||||
});
|
||||
}
|
||||
|
||||
if (refreshBtn) {
|
||||
refreshBtn.addEventListener('click', () => {
|
||||
loadDailyWorkStatus();
|
||||
showToast('데이터를 새로고침했습니다.', 'success');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 🔄 일일 근태 현황 로드 (API 호출)
|
||||
*/
|
||||
async function loadDailyWorkStatus() {
|
||||
const container = document.getElementById('workStatusContainer');
|
||||
if (!container) return;
|
||||
|
||||
// 로딩 표시
|
||||
container.innerHTML = `
|
||||
<div class="loading-state">
|
||||
<div class="spinner"></div>
|
||||
<p>작업 현황을 불러오는 중...</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 팀 현황 새로고침
|
||||
async function refreshTeamStatus() {
|
||||
console.log('🔄 팀 현황 새로고침 시작');
|
||||
|
||||
try {
|
||||
// 로딩 상태 표시
|
||||
const teamList = document.getElementById('team-list');
|
||||
if (teamList) {
|
||||
teamList.innerHTML = '<div style="text-align: center; padding: 20px;">⏳ 로딩 중...</div>';
|
||||
}
|
||||
|
||||
// 실제로는 API 호출
|
||||
// const response = await fetch('/api/team-status', { headers: getAuthHeaders() });
|
||||
// const data = await response.json();
|
||||
|
||||
// 임시 데이터로 업데이트 (실제 API 연동 시 교체)
|
||||
setTimeout(() => {
|
||||
updateTeamStatusUI();
|
||||
}, 1000);
|
||||
|
||||
const response = await fetch(`${window.API_BASE_URL}/attendance/daily-status?date=${currentSelectedDate}`, {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('데이터 로드 실패');
|
||||
|
||||
const result = await response.json();
|
||||
const workers = result.data || [];
|
||||
|
||||
renderWorkStatus(workers);
|
||||
updateSummaryStats(workers);
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 팀 현황 로딩 실패:', error);
|
||||
const teamList = document.getElementById('team-list');
|
||||
if (teamList) {
|
||||
teamList.innerHTML = '<div style="text-align: center; padding: 20px; color: #f44336;">❌ 로딩 실패</div>';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 팀 현황 UI 업데이트 (임시 데이터)
|
||||
function updateTeamStatusUI() {
|
||||
const teamData = [
|
||||
{ name: '김작업', status: 'present', statusText: '출근' },
|
||||
{ name: '이현장', status: 'present', statusText: '출근' },
|
||||
{ name: '박휴가', status: 'absent', statusText: '휴가' },
|
||||
{ name: '최작업', status: 'present', statusText: '출근' },
|
||||
{ name: '정현장', status: 'present', statusText: '출근' }
|
||||
];
|
||||
|
||||
const teamList = document.getElementById('team-list');
|
||||
if (teamList) {
|
||||
teamList.innerHTML = teamData.map(member => `
|
||||
<div class="team-member ${member.status}">
|
||||
<span class="member-name">${member.name}</span>
|
||||
<span class="member-status">${member.statusText}</span>
|
||||
console.error('현황 로드 오류:', error);
|
||||
container.innerHTML = `
|
||||
<div class="error-state">
|
||||
<p>⚠️ 데이터를 불러오는데 실패했습니다.</p>
|
||||
<button onclick="loadDailyWorkStatus()" class="btn btn-sm btn-outline">재시도</button>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// 통계 업데이트
|
||||
const presentCount = teamData.filter(m => m.status === 'present').length;
|
||||
const absentCount = teamData.filter(m => m.status === 'absent').length;
|
||||
|
||||
const totalEl = document.getElementById('team-total');
|
||||
const presentEl = document.getElementById('team-present');
|
||||
const absentEl = document.getElementById('team-absent');
|
||||
|
||||
if (totalEl) totalEl.textContent = teamData.length;
|
||||
if (presentEl) presentEl.textContent = presentCount;
|
||||
if (absentEl) absentEl.textContent = absentCount;
|
||||
|
||||
console.log('✅ 팀 현황 업데이트 완료');
|
||||
}
|
||||
|
||||
// 환영 메시지 개인화
|
||||
function personalizeWelcome() {
|
||||
const user = JSON.parse(localStorage.getItem('user') || '{}');
|
||||
const welcomeMsg = document.getElementById('welcome-message');
|
||||
|
||||
if (user && user.name && welcomeMsg) {
|
||||
welcomeMsg.textContent = `${user.name}님의 실시간 팀 현황 및 작업 모니터링`;
|
||||
console.log('✅ 환영 메시지 개인화 완료');
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// 페이지 초기화
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('🚀 그룹장 대시보드 초기화 시작');
|
||||
|
||||
// 사용자 정보 확인
|
||||
const user = JSON.parse(localStorage.getItem('user') || '{}');
|
||||
console.log('👤 현재 사용자:', user);
|
||||
|
||||
// 권한 확인
|
||||
if (user.access_level !== 'group_leader') {
|
||||
console.warn('⚠️ 그룹장 권한 없음:', user.access_level);
|
||||
// 필요시 다른 페이지로 리다이렉트
|
||||
/**
|
||||
* 📊 통계 요약 업데이트
|
||||
*/
|
||||
function updateSummaryStats(workers) {
|
||||
// 요약 카드가 있다면 업데이트 (현재 HTML에는 없으므로 생략 가능하거나 동적으로 추가)
|
||||
// 여기서는 콘솔에만 로그
|
||||
const stats = workers.reduce((acc, w) => {
|
||||
acc[w.status] = (acc[w.status] || 0) + 1;
|
||||
return acc;
|
||||
}, {});
|
||||
console.log('Daily Stats:', stats);
|
||||
}
|
||||
|
||||
/**
|
||||
* 🎨 현황 리스트 렌더링
|
||||
*/
|
||||
function renderWorkStatus(workers) {
|
||||
const container = document.getElementById('workStatusContainer');
|
||||
if (!container) return;
|
||||
|
||||
if (workers.length === 0) {
|
||||
container.innerHTML = '<div class="empty-state">등록된 작업자가 없습니다.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
// 초기화 작업
|
||||
personalizeWelcome();
|
||||
updateTeamStatusUI();
|
||||
|
||||
console.log('✅ 그룹장 대시보드 초기화 완료');
|
||||
|
||||
// 상태 우선순위 정렬 (미제출 -> 작성중 -> 완료)
|
||||
const sortOrder = ['incomplete', 'partial', 'vacation', 'complete', 'overtime'];
|
||||
workers.sort((a, b) => {
|
||||
return sortOrder.indexOf(a.status) - sortOrder.indexOf(b.status) || a.worker_name.localeCompare(b.worker_name);
|
||||
});
|
||||
|
||||
const html = `
|
||||
<div class="status-grid">
|
||||
${workers.map(worker => {
|
||||
const statusInfo = STATUS_MAP[worker.status] || { text: worker.status, class: '', icon: '❓', color: '#999' };
|
||||
|
||||
return `
|
||||
<div class="worker-card ${worker.status === 'incomplete' ? 'status-alert' : ''}" style="border-left: 4px solid ${statusInfo.color}">
|
||||
<div class="worker-header">
|
||||
<span class="worker-name">${worker.worker_name}</span>
|
||||
<span class="worker-job">${worker.job_type || '-'}</span>
|
||||
</div>
|
||||
|
||||
<div class="worker-body">
|
||||
<div class="status-badge" style="background-color: ${statusInfo.color}20; color: ${statusInfo.color}">
|
||||
${statusInfo.icon} ${statusInfo.text}
|
||||
</div>
|
||||
<div class="work-hours">
|
||||
${worker.total_work_hours > 0 ? worker.total_work_hours + '시간' : '-'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${worker.status === 'incomplete' ? `
|
||||
<div class="worker-footer">
|
||||
<span class="alert-text">⚠️ 보고서 미제출</span>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
}).join('')}
|
||||
</div>
|
||||
`;
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
// 🔐 인증 헤더 헬퍼
|
||||
function getAuthHeaders() {
|
||||
const token = localStorage.getItem('token');
|
||||
return {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
};
|
||||
}
|
||||
|
||||
// 🍞 토스트 메시지 (기존 modern-dashboard.js에 있다면 중복 주의, 없으면 사용)
|
||||
function showToast(message, type = 'info') {
|
||||
if (window.showToast) {
|
||||
window.showToast(message, type);
|
||||
} else {
|
||||
alert(message);
|
||||
}
|
||||
}
|
||||
|
||||
// 초기화
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// API_BASE_URL 설정 (없으면 기본값)
|
||||
if (!window.API_BASE_URL) window.API_BASE_URL = '/api';
|
||||
|
||||
initDateSelector();
|
||||
loadDailyWorkStatus();
|
||||
});
|
||||
|
||||
// 전역 함수로 내보내기 (HTML에서 사용)
|
||||
window.refreshTeamStatus = refreshTeamStatus;
|
||||
// 전역 노출
|
||||
window.refreshTeamStatus = loadDailyWorkStatus;
|
||||
@@ -1,24 +1,27 @@
|
||||
<!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/modern-dashboard.css?v=2">
|
||||
<link rel="icon" type="image/png" href="/img/favicon.png">
|
||||
|
||||
|
||||
<!-- 스크립트 (순서 중요: api-config.js가 먼저 로드되어야 함) -->
|
||||
<script src="/js/api-config.js"></script>
|
||||
<script src="/js/auth-check.js" defer></script>
|
||||
<script src="/js/modern-dashboard.js?v=10" defer></script>
|
||||
<script src="/js/group-leader-dashboard.js?v=1" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 메인 컨테이너 -->
|
||||
<div class="dashboard-container">
|
||||
|
||||
|
||||
<!-- 헤더 -->
|
||||
<header class="dashboard-header">
|
||||
<div class="header-content">
|
||||
@@ -31,14 +34,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="header-center">
|
||||
<div class="current-time" id="currentTime">
|
||||
<span class="time-label">현재 시각</span>
|
||||
<span class="time-value" id="timeValue">--:--:--</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="header-right">
|
||||
<div class="user-profile" id="userProfile">
|
||||
<div class="user-avatar">
|
||||
@@ -73,7 +76,7 @@
|
||||
|
||||
<!-- 메인 콘텐츠 -->
|
||||
<main class="dashboard-main">
|
||||
|
||||
|
||||
<!-- 빠른 작업 섹션 -->
|
||||
<section class="quick-actions-section">
|
||||
<div class="card">
|
||||
@@ -90,7 +93,7 @@
|
||||
</div>
|
||||
<div class="action-arrow">→</div>
|
||||
</a>
|
||||
|
||||
|
||||
<a href="/pages/common/daily-work-report-viewer.html" class="quick-action-card">
|
||||
<div class="action-icon-large">📋</div>
|
||||
<div class="action-content">
|
||||
@@ -99,7 +102,7 @@
|
||||
</div>
|
||||
<div class="action-arrow">→</div>
|
||||
</a>
|
||||
|
||||
|
||||
<a href="/pages/analysis/work-analysis.html" class="quick-action-card admin-only">
|
||||
<div class="action-icon-large">📈</div>
|
||||
<div class="action-content">
|
||||
@@ -108,7 +111,7 @@
|
||||
</div>
|
||||
<div class="action-arrow">→</div>
|
||||
</a>
|
||||
|
||||
|
||||
<a href="/pages/management/work-management.html" class="quick-action-card admin-only">
|
||||
<div class="action-icon-large">🔧</div>
|
||||
<div class="action-content">
|
||||
@@ -171,4 +174,5 @@
|
||||
<div class="toast-container" id="toastContainer"></div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user