f58dd115c9
- 백엔드: type_code ANNUAL 매칭 실패 → 전체 합산으로 수정 details에 balance_type, expires_at 포함 - 프론트: 2열 카드 → 통합 리스트 (연차 탭 + 연장근로 행) - 연차 행 클릭 → 상세 모달 (이월/정기/장기/경조사 breakdown) 이월 소진/만료 isExpired() 적용 - 내 메뉴에서 "내 연차 정보" 자동 제거 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
243 lines
10 KiB
JavaScript
243 lines
10 KiB
JavaScript
/**
|
|
* 생산팀 대시보드 — Sprint 003
|
|
*/
|
|
|
|
const PAGE_ICONS = {
|
|
'dashboard': 'fa-home',
|
|
'work.tbm': 'fa-clipboard-list',
|
|
'work.report_create': 'fa-file-alt',
|
|
'work.analysis': 'fa-chart-bar',
|
|
'work.nonconformity': 'fa-exclamation-triangle',
|
|
'work.schedule': 'fa-calendar-alt',
|
|
'work.meetings': 'fa-users',
|
|
'work.daily_status': 'fa-chart-bar',
|
|
'work.proxy_input': 'fa-user-edit',
|
|
'factory.repair_management': 'fa-tools',
|
|
'inspection.daily_patrol': 'fa-route',
|
|
'inspection.checkin': 'fa-user-check',
|
|
'inspection.work_status': 'fa-briefcase',
|
|
'purchase.request': 'fa-shopping-cart',
|
|
'purchase.analysis': 'fa-chart-line',
|
|
'attendance.monthly': 'fa-calendar',
|
|
'attendance.vacation_request': 'fa-paper-plane',
|
|
'attendance.vacation_management': 'fa-cog',
|
|
'attendance.vacation_allocation': 'fa-plus-circle',
|
|
'attendance.annual_overview': 'fa-chart-pie',
|
|
'admin.user_management': 'fa-users-cog',
|
|
'admin.projects': 'fa-project-diagram',
|
|
'admin.tasks': 'fa-tasks',
|
|
'admin.workplaces': 'fa-building',
|
|
'admin.equipments': 'fa-cogs',
|
|
'admin.departments': 'fa-sitemap',
|
|
'admin.notifications': 'fa-bell',
|
|
'admin.attendance_report': 'fa-clipboard-check',
|
|
};
|
|
|
|
// 내 메뉴에서 제외 (대시보드에서 직접 확인)
|
|
const HIDDEN_PAGES = ['dashboard', 'attendance.my_vacation_info'];
|
|
|
|
const CATEGORY_COLORS = {
|
|
'작업 관리': '#3b82f6',
|
|
'공장 관리': '#f59e0b',
|
|
'소모품 관리': '#10b981',
|
|
'근태 관리': '#8b5cf6',
|
|
'시스템 관리': '#6b7280',
|
|
};
|
|
const DEFAULT_COLOR = '#06b6d4';
|
|
|
|
function isExpired(expiresAt) {
|
|
if (!expiresAt) return false;
|
|
const today = new Date(); today.setHours(0,0,0,0);
|
|
const exp = new Date(expiresAt); exp.setHours(0,0,0,0);
|
|
return today > exp;
|
|
}
|
|
|
|
function escHtml(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
|
|
function fmtDays(n) { return n % 1 === 0 ? n.toString() : n.toFixed(1); }
|
|
|
|
let _dashboardData = null;
|
|
|
|
async function initDashboard() {
|
|
showSkeleton();
|
|
try {
|
|
const result = await api('/dashboard/my-summary');
|
|
if (!result.success) throw new Error(result.message || '데이터 로드 실패');
|
|
_dashboardData = result.data;
|
|
renderDashboard(result.data);
|
|
} catch (err) {
|
|
showError(err.message);
|
|
}
|
|
}
|
|
|
|
function renderDashboard(data) {
|
|
const { user, vacation, overtime, quick_access } = data;
|
|
|
|
const card = document.getElementById('profileCard');
|
|
const initial = (user.worker_name || user.name || '?').charAt(0);
|
|
const vacRemaining = vacation.remaining_days;
|
|
const vacTotal = vacation.total_days;
|
|
const vacUsed = vacation.used_days;
|
|
const vacPct = vacTotal > 0 ? Math.round((vacUsed / Math.max(vacTotal, 1)) * 100) : 0;
|
|
const vacColor = vacRemaining >= 5 ? 'green' : vacRemaining >= 3 ? 'yellow' : 'red';
|
|
|
|
const otHours = overtime.total_overtime_hours;
|
|
const otDays = overtime.overtime_days;
|
|
|
|
card.innerHTML = `
|
|
<button onclick="doLogout()" class="pd-logout-btn" title="로그아웃">
|
|
<i class="fas fa-sign-out-alt"></i>
|
|
</button>
|
|
<div class="pd-profile-header">
|
|
<div class="pd-avatar">${escHtml(initial)}</div>
|
|
<div>
|
|
<div class="pd-profile-name">${escHtml(user.worker_name || user.name)}</div>
|
|
<div class="pd-profile-sub">${escHtml(user.job_type || '')}${user.job_type ? ' · ' : ''}${escHtml(user.department_name)}</div>
|
|
</div>
|
|
</div>
|
|
<div class="pd-info-list">
|
|
<div class="pd-info-row" onclick="openVacDetailModal()">
|
|
<div class="pd-info-left">
|
|
<i class="fas fa-umbrella-beach pd-info-icon"></i>
|
|
<span class="pd-info-label">연차</span>
|
|
</div>
|
|
${vacTotal > 0 ? `
|
|
<div class="pd-info-right">
|
|
<span class="pd-info-value">잔여 <strong>${fmtDays(vacRemaining)}일</strong></span>
|
|
<span class="pd-info-sub">/ ${fmtDays(vacTotal)}일</span>
|
|
<i class="fas fa-chevron-right pd-info-arrow"></i>
|
|
</div>
|
|
` : `
|
|
<div class="pd-info-right">
|
|
<span class="pd-info-sub">미등록</span>
|
|
<i class="fas fa-chevron-right pd-info-arrow"></i>
|
|
</div>
|
|
`}
|
|
</div>
|
|
${vacTotal > 0 ? `<div class="pd-progress-bar" style="margin:0 12px 8px"><div class="pd-progress-fill pd-progress-${vacColor}" style="width:${Math.min(vacPct, 100)}%"></div></div>` : ''}
|
|
<div class="pd-info-row">
|
|
<div class="pd-info-left">
|
|
<i class="fas fa-clock pd-info-icon"></i>
|
|
<span class="pd-info-label">연장근로</span>
|
|
</div>
|
|
<div class="pd-info-right">
|
|
<span class="pd-info-value"><strong>${otHours.toFixed(1)}h</strong></span>
|
|
<span class="pd-info-sub">이번달 ${otDays}일</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
renderGrid('deptPagesGrid', 'deptPagesSection', quick_access.department_pages);
|
|
renderGrid('personalPagesGrid', 'personalPagesSection', quick_access.personal_pages);
|
|
renderGrid('adminPagesGrid', 'adminPagesSection', quick_access.admin_pages);
|
|
}
|
|
|
|
function openVacDetailModal() {
|
|
if (!_dashboardData) return;
|
|
const { vacation } = _dashboardData;
|
|
const details = vacation.details || [];
|
|
|
|
const groups = {};
|
|
details.forEach(d => {
|
|
const bt = d.balance_type || 'AUTO';
|
|
if (!groups[bt]) groups[bt] = { total: 0, used: 0, remaining: 0, expires_at: d.expires_at, items: [] };
|
|
groups[bt].total += d.total;
|
|
groups[bt].used += d.used;
|
|
groups[bt].remaining += d.remaining;
|
|
if (d.expires_at) groups[bt].expires_at = d.expires_at;
|
|
groups[bt].items.push(d);
|
|
});
|
|
|
|
const LABELS = { CARRY_OVER: '이월연차', AUTO: '정기연차', MANUAL: '추가부여', LONG_SERVICE: '장기근속', COMPANY_GRANT: '경조사/특별' };
|
|
const ORDER = ['CARRY_OVER', 'AUTO', 'MANUAL', 'LONG_SERVICE', 'COMPANY_GRANT'];
|
|
|
|
let html = '';
|
|
ORDER.forEach(bt => {
|
|
const g = groups[bt];
|
|
if (!g || (g.total === 0 && g.used === 0)) return;
|
|
const label = LABELS[bt] || bt;
|
|
const expired = bt === 'CARRY_OVER' && isExpired(g.expires_at);
|
|
const lapsed = expired ? Math.max(0, g.total - g.used) : 0;
|
|
|
|
html += `<div class="pd-detail-row">
|
|
<span class="pd-detail-label">${label}</span>
|
|
<span class="pd-detail-value">
|
|
${g.total !== 0 ? `배정 ${fmtDays(g.total)}` : ''}
|
|
${g.used > 0 ? ` · 사용 ${fmtDays(g.used)}` : ''}
|
|
${expired && lapsed > 0 ? ` · <span style="color:#9ca3af;text-decoration:line-through">만료 ${fmtDays(lapsed)}</span>` : ''}
|
|
${!expired && g.remaining !== 0 ? ` · 잔여 <strong>${fmtDays(g.remaining)}</strong>` : ''}
|
|
</span>
|
|
</div>`;
|
|
});
|
|
|
|
if (!html) html = '<div style="text-align:center;padding:20px;color:rgba(255,255,255,0.6)">연차 정보가 없습니다</div>';
|
|
|
|
html += `<div class="pd-detail-total">
|
|
<span>합계</span>
|
|
<span>배정 ${fmtDays(vacation.total_days)} · 사용 ${fmtDays(vacation.used_days)} · 잔여 <strong>${fmtDays(vacation.remaining_days)}</strong></span>
|
|
</div>`;
|
|
|
|
document.getElementById('vacDetailContent').innerHTML = html;
|
|
document.getElementById('vacDetailModal').classList.add('active');
|
|
}
|
|
|
|
function closeVacDetail() {
|
|
document.getElementById('vacDetailModal').classList.remove('active');
|
|
}
|
|
|
|
function renderGrid(gridId, sectionId, pages) {
|
|
const grid = document.getElementById(gridId);
|
|
const section = document.getElementById(sectionId);
|
|
if (!pages || pages.length === 0) { section.classList.add('hidden'); return; }
|
|
section.classList.remove('hidden');
|
|
|
|
const filtered = pages.filter(p => !HIDDEN_PAGES.includes(p.page_key));
|
|
if (filtered.length === 0) { section.classList.add('hidden'); return; }
|
|
|
|
grid.innerHTML = filtered.map(p => {
|
|
const icon = PAGE_ICONS[p.page_key] || p.icon || 'fa-circle';
|
|
const color = CATEGORY_COLORS[p.category] || DEFAULT_COLOR;
|
|
return `<a href="${escHtml(p.page_path)}" class="pd-grid-item">
|
|
<div class="pd-grid-icon" style="background:${color}">
|
|
<i class="fas ${icon}"></i>
|
|
</div>
|
|
<span class="pd-grid-label">${escHtml(p.page_name)}</span>
|
|
</a>`;
|
|
}).join('');
|
|
}
|
|
|
|
function showSkeleton() {
|
|
const card = document.getElementById('profileCard');
|
|
card.innerHTML = `
|
|
<div class="pd-profile-header">
|
|
<div class="pd-skeleton" style="width:48px;height:48px;border-radius:50%"></div>
|
|
<div style="flex:1">
|
|
<div class="pd-skeleton" style="width:100px;height:18px;margin-bottom:6px"></div>
|
|
<div class="pd-skeleton" style="width:140px;height:14px"></div>
|
|
</div>
|
|
</div>
|
|
<div class="pd-skeleton" style="height:50px;margin-top:12px"></div>
|
|
<div class="pd-skeleton" style="height:50px;margin-top:6px"></div>
|
|
`;
|
|
['deptPagesGrid'].forEach(id => {
|
|
const g = document.getElementById(id);
|
|
if (g) g.innerHTML = Array(8).fill('<div style="display:flex;flex-direction:column;align-items:center;gap:6px"><div class="pd-skeleton" style="width:52px;height:52px;border-radius:14px"></div><div class="pd-skeleton" style="width:40px;height:12px"></div></div>').join('');
|
|
});
|
|
}
|
|
|
|
function showError(msg) {
|
|
document.getElementById('profileCard').innerHTML = `
|
|
<div class="pd-error">
|
|
<i class="fas fa-exclamation-circle"></i>
|
|
<p>${escHtml(msg || '정보를 불러올 수 없습니다.')}</p>
|
|
<button class="pd-error-btn" onclick="initDashboard()"><i class="fas fa-redo mr-1"></i>새로고침</button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', () => setTimeout(initDashboard, 300));
|
|
} else {
|
|
setTimeout(initDashboard, 300);
|
|
}
|