170adcc149
- codes.html, code-management.js 삭제 (tasks.html에서 동일 기능 제공) - 사이드바에서 코드 관리 링크 제거 - daily-work-report, tbm, workplace-management JS 모듈 분리 - common/security.js 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
540 lines
17 KiB
HTML
540 lines
17 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/design-system.css">
|
|
<link rel="stylesheet" href="/css/admin-pages.css?v=7">
|
|
<link rel="icon" type="image/png" href="/img/favicon.png">
|
|
<script src="/js/api-base.js"></script>
|
|
<script src="/js/app-init.js?v=2" defer></script>
|
|
<style>
|
|
.page-wrapper {
|
|
padding: 1.5rem;
|
|
max-width: 1400px;
|
|
}
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.page-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
.controls {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
.controls input[type="date"] {
|
|
padding: 0.4rem 0.5rem;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
.btn {
|
|
padding: 0.4rem 0.75rem;
|
|
border: none;
|
|
border-radius: 0.25rem;
|
|
cursor: pointer;
|
|
font-size: 0.8rem;
|
|
}
|
|
.btn-primary { background: #3b82f6; color: white; }
|
|
.btn-outline { background: white; border: 1px solid #d1d5db; }
|
|
.btn-success { background: #10b981; color: white; }
|
|
|
|
/* 요약 */
|
|
.summary-row {
|
|
display: flex;
|
|
gap: 1rem;
|
|
padding: 0.5rem 0;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 0.8rem;
|
|
color: #6b7280;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
.summary-row span { display: flex; align-items: center; gap: 0.25rem; }
|
|
.summary-row .dot {
|
|
width: 8px; height: 8px; border-radius: 50%;
|
|
}
|
|
.dot-normal { background: #10b981; }
|
|
.dot-annual { background: #3b82f6; }
|
|
.dot-half { background: #22c55e; }
|
|
.dot-quarter { background: #eab308; }
|
|
.dot-early { background: #ef4444; }
|
|
.dot-overtime { background: #f97316; }
|
|
|
|
/* 테이블 */
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.85rem;
|
|
background: white;
|
|
border: 1px solid #e5e7eb;
|
|
}
|
|
.data-table th, .data-table td {
|
|
padding: 0.5rem 0.75rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
.data-table th {
|
|
background: #f9fafb;
|
|
font-weight: 500;
|
|
color: #374151;
|
|
font-size: 0.8rem;
|
|
}
|
|
.data-table tr:hover {
|
|
background: #f9fafb;
|
|
}
|
|
.data-table tr.saved {
|
|
background: #f0fdf4;
|
|
}
|
|
.data-table tr.absent {
|
|
background: #fef2f2;
|
|
}
|
|
.worker-name {
|
|
font-weight: 500;
|
|
}
|
|
.saved-tag {
|
|
font-size: 0.65rem;
|
|
color: #10b981;
|
|
background: #dcfce7;
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 0.25rem;
|
|
margin-left: 0.5rem;
|
|
}
|
|
.type-select {
|
|
padding: 0.25rem 0.5rem;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.8rem;
|
|
min-width: 100px;
|
|
}
|
|
.overtime-input {
|
|
width: 50px;
|
|
padding: 0.25rem;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 0.25rem;
|
|
text-align: center;
|
|
font-size: 0.8rem;
|
|
}
|
|
.hours-cell {
|
|
text-align: center;
|
|
min-width: 60px;
|
|
}
|
|
.status-present { color: #10b981; }
|
|
.status-absent { color: #ef4444; }
|
|
|
|
/* 저장 영역 */
|
|
.save-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 1rem;
|
|
padding: 0.75rem 1rem;
|
|
background: #f9fafb;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 0.25rem;
|
|
}
|
|
.save-status {
|
|
font-size: 0.8rem;
|
|
color: #6b7280;
|
|
}
|
|
.save-status.saved { color: #10b981; }
|
|
.save-status.unsaved { color: #f59e0b; }
|
|
.btn-save {
|
|
padding: 0.5rem 1.5rem;
|
|
font-size: 0.875rem;
|
|
background: #3b82f6;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 0.25rem;
|
|
cursor: pointer;
|
|
}
|
|
.btn-save:hover { background: #2563eb; }
|
|
.btn-save:disabled { background: #9ca3af; cursor: not-allowed; }
|
|
|
|
.warning-box {
|
|
background: #fef3c7;
|
|
border: 1px solid #fcd34d;
|
|
color: #92400e;
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: 0.25rem;
|
|
margin-bottom: 0.75rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
.warning-box a { color: #92400e; font-weight: 500; }
|
|
</style>
|
|
</head>
|
|
<body class="has-sidebar">
|
|
<div id="navbar-container"></div>
|
|
<div id="sidebar-container"></div>
|
|
|
|
<main class="main-content">
|
|
<div class="page-wrapper">
|
|
<div class="page-header">
|
|
<h1 class="page-title">근무 현황</h1>
|
|
<div class="controls">
|
|
<input type="date" id="selectedDate">
|
|
<button class="btn btn-primary" onclick="loadWorkStatus()">조회</button>
|
|
<button class="btn btn-outline" onclick="setAllNormal()">전체 정시근무</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="noCheckinWarning" class="warning-box" style="display:none;">
|
|
출근 체크가 완료되지 않았습니다. 먼저 <a href="/pages/attendance/checkin.html">출근 체크</a>를 진행해주세요.
|
|
</div>
|
|
|
|
<div class="summary-row">
|
|
<span><span class="dot dot-normal"></span> 정시 <strong id="normalCount">0</strong></span>
|
|
<span><span class="dot dot-annual"></span> 연차 <strong id="annualCount">0</strong></span>
|
|
<span><span class="dot dot-half"></span> 반차 <strong id="halfCount">0</strong></span>
|
|
<span><span class="dot dot-quarter"></span> 반반차 <strong id="quarterCount">0</strong></span>
|
|
<span><span class="dot dot-early"></span> 조퇴 <strong id="earlyCount">0</strong></span>
|
|
<span><span class="dot dot-overtime"></span> 연장 <strong id="overtimeCount">0</strong></span>
|
|
</div>
|
|
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:30px">#</th>
|
|
<th>이름</th>
|
|
<th>출근</th>
|
|
<th>근태구분</th>
|
|
<th class="hours-cell">기본</th>
|
|
<th class="hours-cell">연장</th>
|
|
<th class="hours-cell">합계</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="workerTableBody">
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="save-bar">
|
|
<span id="saveStatus" class="save-status"></span>
|
|
<button id="saveBtn" class="btn-save" onclick="saveWorkStatus()">저장</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
<script>
|
|
(function() {
|
|
const checkApiConfig = setInterval(() => {
|
|
if (window.API_BASE_URL) {
|
|
clearInterval(checkApiConfig);
|
|
axios.defaults.baseURL = window.API_BASE_URL;
|
|
const token = localStorage.getItem('token');
|
|
if (token) {
|
|
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
|
|
}
|
|
}
|
|
}, 50);
|
|
})();
|
|
|
|
let workers = [];
|
|
let workStatus = {};
|
|
let hasCheckinData = false;
|
|
let isAlreadySaved = false;
|
|
let isSaving = false;
|
|
|
|
const attendanceTypes = [
|
|
{ value: 'normal', label: '정시근무', hours: 8 },
|
|
{ value: 'annual', label: '연차', hours: 0 },
|
|
{ value: 'half', label: '반차', hours: 4 },
|
|
{ value: 'quarter', label: '반반차', hours: 6 },
|
|
{ value: 'early', label: '조퇴', hours: 2 },
|
|
{ value: 'overtime', label: '연장근로', hours: 8 }
|
|
];
|
|
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
await waitForAxiosConfig();
|
|
document.getElementById('selectedDate').value = new Date().toISOString().split('T')[0];
|
|
loadWorkStatus();
|
|
});
|
|
|
|
function waitForAxiosConfig() {
|
|
return new Promise((resolve) => {
|
|
const check = setInterval(() => {
|
|
if (axios.defaults.baseURL) {
|
|
clearInterval(check);
|
|
resolve();
|
|
}
|
|
}, 50);
|
|
setTimeout(() => { clearInterval(check); resolve(); }, 5000);
|
|
});
|
|
}
|
|
|
|
async function loadWorkStatus() {
|
|
const selectedDate = document.getElementById('selectedDate').value;
|
|
if (!selectedDate) return alert('날짜를 선택해주세요.');
|
|
|
|
try {
|
|
const [workersRes, recordsRes] = await Promise.all([
|
|
axios.get('/workers?limit=100'),
|
|
axios.get(`/attendance/daily-records?date=${selectedDate}`).catch(() => ({ data: { data: [] } }))
|
|
]);
|
|
|
|
workers = (workersRes.data.data || []).filter(w => w.status === 'active' && (!w.employment_status || w.employment_status === 'employed'));
|
|
const records = recordsRes.data.data || [];
|
|
|
|
hasCheckinData = records.length > 0;
|
|
isAlreadySaved = records.some(r => r.attendance_type_id || r.total_work_hours > 0);
|
|
document.getElementById('noCheckinWarning').style.display = hasCheckinData ? 'none' : 'block';
|
|
|
|
workStatus = {};
|
|
workers.forEach(w => {
|
|
const record = records.find(r => r.worker_id === w.worker_id);
|
|
|
|
if (record) {
|
|
let type = 'normal';
|
|
let overtimeHours = 0;
|
|
|
|
if (record.is_present === 0) {
|
|
type = 'annual';
|
|
} else {
|
|
if (record.attendance_type_code) {
|
|
const codeMap = {
|
|
'REGULAR': 'normal',
|
|
'VACATION': 'annual',
|
|
'HALF_LEAVE': 'half',
|
|
'QUARTER_LEAVE': 'quarter',
|
|
'PARTIAL': 'early',
|
|
'OVERTIME': 'overtime'
|
|
};
|
|
type = codeMap[record.attendance_type_code] || 'normal';
|
|
}
|
|
if (record.total_work_hours > 8) {
|
|
type = 'overtime';
|
|
overtimeHours = record.total_work_hours - 8;
|
|
}
|
|
}
|
|
|
|
workStatus[w.worker_id] = {
|
|
isPresent: record.is_present === 1,
|
|
type: type,
|
|
hours: attendanceTypes.find(t => t.value === type)?.hours || 8,
|
|
overtimeHours: overtimeHours,
|
|
isSaved: record.attendance_type_id != null || record.total_work_hours > 0
|
|
};
|
|
} else {
|
|
workStatus[w.worker_id] = {
|
|
isPresent: true,
|
|
type: 'normal',
|
|
hours: 8,
|
|
overtimeHours: 0,
|
|
isSaved: false
|
|
};
|
|
}
|
|
});
|
|
|
|
render();
|
|
updateSummary();
|
|
updateSaveStatus();
|
|
} catch (e) {
|
|
console.error(e);
|
|
alert('데이터 로드 실패');
|
|
}
|
|
}
|
|
|
|
function render() {
|
|
const tbody = document.getElementById('workerTableBody');
|
|
|
|
if (workers.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="7" style="text-align:center;color:#6b7280;padding:2rem;">작업자가 없습니다</td></tr>';
|
|
return;
|
|
}
|
|
|
|
tbody.innerHTML = workers.map((w, idx) => {
|
|
const s = workStatus[w.worker_id];
|
|
const showOvertimeInput = s.type === 'overtime';
|
|
const baseHours = s.hours;
|
|
const totalHours = s.type === 'overtime' ? baseHours + s.overtimeHours : baseHours;
|
|
const rowClass = s.isSaved ? 'saved' : (!s.isPresent ? 'absent' : '');
|
|
|
|
return `
|
|
<tr class="${rowClass}">
|
|
<td>${idx + 1}</td>
|
|
<td>
|
|
<span class="worker-name">${w.worker_name}</span>
|
|
${s.isSaved ? '<span class="saved-tag">저장됨</span>' : ''}
|
|
</td>
|
|
<td class="${s.isPresent ? 'status-present' : 'status-absent'}">
|
|
${s.isPresent ? '출근' : '결근'}
|
|
</td>
|
|
<td>
|
|
<select class="type-select" onchange="updateType(${w.worker_id}, this.value)">
|
|
${attendanceTypes.map(t => `
|
|
<option value="${t.value}" ${s.type === t.value ? 'selected' : ''}>${t.label}</option>
|
|
`).join('')}
|
|
</select>
|
|
</td>
|
|
<td class="hours-cell">${baseHours}h</td>
|
|
<td class="hours-cell">
|
|
${showOvertimeInput ? `
|
|
<input type="number" class="overtime-input" value="${s.overtimeHours}" min="0" max="8" step="0.5"
|
|
onchange="updateOvertime(${w.worker_id}, this.value)">
|
|
` : '-'}
|
|
</td>
|
|
<td class="hours-cell"><strong>${totalHours}h</strong></td>
|
|
</tr>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
function updateType(workerId, value) {
|
|
const type = attendanceTypes.find(t => t.value === value);
|
|
workStatus[workerId].type = value;
|
|
workStatus[workerId].hours = type ? type.hours : 8;
|
|
|
|
if (value === 'overtime') {
|
|
workStatus[workerId].overtimeHours = workStatus[workerId].overtimeHours || 2;
|
|
} else {
|
|
workStatus[workerId].overtimeHours = 0;
|
|
}
|
|
|
|
render();
|
|
updateSummary();
|
|
}
|
|
|
|
function updateOvertime(workerId, value) {
|
|
workStatus[workerId].overtimeHours = parseFloat(value) || 0;
|
|
render();
|
|
updateSummary();
|
|
}
|
|
|
|
function setAllNormal() {
|
|
workers.forEach(w => {
|
|
workStatus[w.worker_id].type = 'normal';
|
|
workStatus[w.worker_id].hours = 8;
|
|
workStatus[w.worker_id].overtimeHours = 0;
|
|
});
|
|
render();
|
|
updateSummary();
|
|
}
|
|
|
|
function updateSummary() {
|
|
let normal = 0, annual = 0, half = 0, quarter = 0, early = 0, overtime = 0;
|
|
|
|
Object.values(workStatus).forEach(s => {
|
|
switch (s.type) {
|
|
case 'normal': normal++; break;
|
|
case 'annual': annual++; break;
|
|
case 'half': half++; break;
|
|
case 'quarter': quarter++; break;
|
|
case 'early': early++; break;
|
|
case 'overtime': overtime++; break;
|
|
}
|
|
});
|
|
|
|
document.getElementById('normalCount').textContent = normal;
|
|
document.getElementById('annualCount').textContent = annual;
|
|
document.getElementById('halfCount').textContent = half;
|
|
document.getElementById('quarterCount').textContent = quarter;
|
|
document.getElementById('earlyCount').textContent = early;
|
|
document.getElementById('overtimeCount').textContent = overtime;
|
|
}
|
|
|
|
function updateSaveStatus() {
|
|
const statusEl = document.getElementById('saveStatus');
|
|
const saveBtn = document.getElementById('saveBtn');
|
|
|
|
if (isAlreadySaved) {
|
|
statusEl.innerHTML = '이 날짜의 근무 현황이 저장되어 있습니다';
|
|
statusEl.className = 'save-status saved';
|
|
saveBtn.textContent = '수정 저장';
|
|
} else {
|
|
statusEl.innerHTML = '아직 저장되지 않았습니다';
|
|
statusEl.className = 'save-status unsaved';
|
|
saveBtn.textContent = '저장';
|
|
}
|
|
}
|
|
|
|
async function saveWorkStatus() {
|
|
const date = document.getElementById('selectedDate').value;
|
|
if (!date) return alert('날짜를 선택해주세요.');
|
|
|
|
if (isSaving) return;
|
|
|
|
const saveBtn = document.getElementById('saveBtn');
|
|
|
|
// work_attendance_types: 1=REGULAR, 2=OVERTIME, 3=PARTIAL, 4=VACATION
|
|
const typeIdMap = {
|
|
'normal': 1,
|
|
'annual': 4,
|
|
'half': 4,
|
|
'quarter': 4,
|
|
'early': 3,
|
|
'overtime': 2
|
|
};
|
|
|
|
// vacation_types: 1=ANNUAL_FULL, 2=ANNUAL_HALF, 3=ANNUAL_QUARTER
|
|
const vacationTypeIdMap = {
|
|
'annual': 1,
|
|
'half': 2,
|
|
'quarter': 3,
|
|
};
|
|
|
|
const recordsToSave = workers.map(w => {
|
|
const s = workStatus[w.worker_id];
|
|
const totalHours = s.type === 'overtime' ? s.hours + s.overtimeHours : s.hours;
|
|
|
|
return {
|
|
record_date: date,
|
|
worker_id: w.worker_id,
|
|
attendance_type_id: typeIdMap[s.type] || 1,
|
|
vacation_type_id: vacationTypeIdMap[s.type] || null,
|
|
total_work_hours: totalHours,
|
|
overtime_approved: s.type === 'overtime',
|
|
notes: s.type === 'overtime' ? `연장근로 ${s.overtimeHours}시간` : null
|
|
};
|
|
});
|
|
|
|
isSaving = true;
|
|
saveBtn.disabled = true;
|
|
saveBtn.textContent = '저장 중...';
|
|
|
|
try {
|
|
let ok = 0, fail = 0;
|
|
for (const r of recordsToSave) {
|
|
try {
|
|
await axios.post('/attendance/records', r);
|
|
ok++;
|
|
} catch (e) {
|
|
console.error('저장 실패:', e);
|
|
fail++;
|
|
}
|
|
}
|
|
|
|
if (fail === 0) {
|
|
alert(`${ok}명 저장 완료`);
|
|
isAlreadySaved = true;
|
|
workers.forEach(w => {
|
|
if (workStatus[w.worker_id]) {
|
|
workStatus[w.worker_id].isSaved = true;
|
|
}
|
|
});
|
|
render();
|
|
updateSaveStatus();
|
|
} else if (ok > 0) {
|
|
alert(`${ok}명 성공, ${fail}명 실패`);
|
|
} else {
|
|
alert('저장에 실패했습니다');
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
alert('저장 중 오류가 발생했습니다');
|
|
} finally {
|
|
isSaving = false;
|
|
saveBtn.disabled = false;
|
|
updateSaveStatus();
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|