feat(tkpurchase): 협력업체 포탈 3→2단계 흐름 단순화 + 작업 이력 페이지

- 체크아웃 시 work_report 자동 생성 (checkout-with-report 통합 엔드포인트)
- 업무현황 입력 단계 제거, 작업자+시간만 입력하면 체크아웃 완료
- 협력업체 작업 이력 조회 페이지 신규 추가 (partner-history)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-03-13 13:50:07 +09:00
parent e2def8ab14
commit 6e5c1554d0
9 changed files with 433 additions and 211 deletions

View File

@@ -132,7 +132,7 @@ function initAuth() {
department_id: decoded.department_id || null
};
// 협력업체 계정 → partner-portal로 분기
if (currentUser.partner_company_id && !location.pathname.includes('partner-portal')) {
if (currentUser.partner_company_id && !location.pathname.includes('partner-portal') && !location.pathname.includes('partner-history')) {
location.href = '/partner-portal.html';
return false;
}

View File

@@ -0,0 +1,136 @@
/* tkpurchase-partner-history.js - Partner work history */
let historyPage = 1;
const historyLimit = 20;
function initPartnerHistory() {
if (!initAuth()) return;
const token = getToken();
const decoded = decodeToken(token);
if (!decoded || !decoded.partner_company_id) {
location.href = '/';
return;
}
// 기본 날짜: 최근 30일
const today = new Date();
const thirtyDaysAgo = new Date(today);
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
document.getElementById('filterDateTo').value = today.toISOString().substring(0, 10);
document.getElementById('filterDateFrom').value = thirtyDaysAgo.toISOString().substring(0, 10);
loadHistory();
}
async function loadHistory(page) {
historyPage = page || 1;
const dateFrom = document.getElementById('filterDateFrom').value;
const dateTo = document.getElementById('filterDateTo').value;
const params = new URLSearchParams();
if (dateFrom) params.set('date_from', dateFrom);
if (dateTo) params.set('date_to', dateTo);
params.set('page', historyPage);
params.set('limit', historyLimit);
const container = document.getElementById('historyList');
container.innerHTML = '<p class="text-gray-400 text-center py-8 text-sm">로딩 중...</p>';
try {
const r = await api('/checkins/my-history?' + params.toString());
const checkins = r.data || [];
const total = r.total || 0;
renderHistoryList(checkins);
renderPagination(total);
} catch(e) {
container.innerHTML = '<p class="text-red-400 text-center py-8 text-sm">데이터를 불러올 수 없습니다.</p>';
}
}
function renderHistoryList(checkins) {
const container = document.getElementById('historyList');
if (!checkins.length) {
container.innerHTML = `<div class="bg-white rounded-xl shadow-sm p-8 text-center">
<i class="fas fa-inbox text-gray-300 text-3xl mb-3"></i>
<p class="text-gray-500 text-sm">조회 기간에 작업 이력이 없습니다.</p>
</div>`;
return;
}
container.innerHTML = checkins.map(c => {
const checkinDate = formatDate(c.check_in_time);
const checkinTime = formatTime(c.check_in_time);
const checkoutTime = c.check_out_time ? formatTime(c.check_out_time) : null;
const reports = c.reports || [];
// 상태 배지
let statusHtml = '';
if (!c.check_out_time) {
statusHtml = '<span class="text-xs px-2 py-0.5 rounded-full bg-amber-100 text-amber-700">진행중</span>';
} else {
statusHtml = '<span class="text-xs px-2 py-0.5 rounded-full bg-blue-100 text-blue-700">완료</span>';
}
// 보고 정보
let reportHtml = '';
if (reports.length > 0) {
reportHtml = reports.map(r => {
const rWorkers = r.workers || [];
const totalHours = rWorkers.reduce((sum, w) => sum + Number(w.hours_worked || 0), 0);
const isConfirmed = !!r.confirmed_by;
const isRejected = !!r.rejected_by;
const rStatus = isConfirmed
? '<span class="text-xs text-emerald-600"><i class="fas fa-check-circle"></i> 확인완료</span>'
: isRejected
? '<span class="text-xs text-red-600"><i class="fas fa-times-circle"></i> 반려</span>'
: '<span class="text-xs text-amber-500">미확인</span>';
const workersDetail = rWorkers.length > 0
? `<div class="mt-1 text-xs text-gray-500">${rWorkers.map(w => escapeHtml(w.worker_name) + ' ' + w.hours_worked + 'h').join(', ')}</div>`
: '';
return `<div class="p-2 bg-gray-50 rounded text-sm">
<div class="flex items-center justify-between">
<span class="text-gray-700">${escapeHtml((r.work_content || '').substring(0, 60))}${(r.work_content || '').length > 60 ? '...' : ''}</span>
${rStatus}
</div>
<div class="text-xs text-gray-400 mt-1">${rWorkers.length}명 · ${totalHours}h</div>
${workersDetail}
</div>`;
}).join('');
}
return `<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<div class="p-4">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-2">
<span class="text-sm font-semibold text-gray-800">${checkinDate}</span>
${statusHtml}
</div>
<span class="text-xs text-gray-500">${escapeHtml(c.workplace_name || '')}</span>
</div>
${c.work_description ? `<p class="text-sm text-gray-600 mb-2">${escapeHtml(c.work_description)}</p>` : ''}
<div class="flex gap-4 text-xs text-gray-500 mb-2">
<span><i class="fas fa-clock mr-1"></i>${checkinTime}${checkoutTime ? ' ~ ' + checkoutTime : ' ~'}</span>
<span><i class="fas fa-users mr-1"></i>${c.actual_worker_count || 0}명</span>
</div>
${reportHtml ? `<div class="space-y-2 mt-3 border-t pt-3">${reportHtml}</div>` : ''}
</div>
</div>`;
}).join('');
}
function renderPagination(total) {
const container = document.getElementById('historyPagination');
const totalPages = Math.ceil(total / historyLimit);
if (totalPages <= 1) { container.innerHTML = ''; return; }
let html = '';
for (let i = 1; i <= totalPages; i++) {
const active = i === historyPage;
html += `<button onclick="loadHistory(${i})" class="px-3 py-1 rounded text-sm ${active ? 'bg-emerald-600 text-white' : 'bg-white text-gray-600 border hover:bg-gray-50'}">${i}</button>`;
}
container.innerHTML = html;
}

View File

@@ -1,10 +1,9 @@
/* tkpurchase-partner-portal.js - Partner portal logic */
/* tkpurchase-partner-portal.js - Partner portal logic (2-step flow) */
let portalSchedules = [];
let portalCheckins = {};
let partnerCompanyId = null;
let companyWorkersCache = null; // 작업자 목록 캐시
let editingReportId = null; // 수정 모드일 때 보고 ID
let companyWorkersCache = null;
async function loadMySchedules() {
try {
@@ -61,12 +60,10 @@ async function renderScheduleCards() {
const checkin = portalCheckins[s.id];
const isCheckedIn = checkin && !checkin.check_out_time;
const isCheckedOut = checkin && checkin.check_out_time;
const reportCount = checkin ? (parseInt(checkin.work_report_count) || 0) : 0;
// Step indicators
// 2-step indicators
const step1Class = checkin ? 'text-emerald-600' : 'text-gray-400';
const step2Class = isCheckedIn || isCheckedOut ? 'text-emerald-600' : 'text-gray-400';
const step3Class = isCheckedOut ? 'text-emerald-600' : 'text-gray-400';
const step2Class = isCheckedOut ? 'text-emerald-600' : 'text-gray-400';
return `<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<!-- 일정 정보 -->
@@ -82,7 +79,7 @@ async function renderScheduleCards() {
</div>
</div>
<!-- 3-step 진행 표시 -->
<!-- 2-step 진행 표시 -->
<div class="px-5 py-3 bg-gray-50 border-b">
<div class="flex items-center justify-between text-xs">
<div class="flex items-center gap-1 ${step1Class}">
@@ -91,13 +88,8 @@ async function renderScheduleCards() {
</div>
<div class="flex-1 border-t border-gray-300 mx-2"></div>
<div class="flex items-center gap-1 ${step2Class}">
<i class="fas ${(isCheckedIn || isCheckedOut) ? 'fa-check-circle' : 'fa-circle'}"></i>
<span>2. 업무현황${reportCount > 0 ? ' (' + reportCount + '건)' : ''}</span>
</div>
<div class="flex-1 border-t border-gray-300 mx-2"></div>
<div class="flex items-center gap-1 ${step3Class}">
<i class="fas ${isCheckedOut ? 'fa-check-circle' : 'fa-circle'}"></i>
<span>3. 작업 종료</span>
<span>2. 작업 종료</span>
</div>
</div>
</div>
@@ -129,28 +121,15 @@ async function renderScheduleCards() {
`}
</div>
<!-- Step 2: 업무현황 (체크인 후 표시) -->
<!-- Step 2: 작업 종료 (체크아웃 폼) -->
${isCheckedIn ? `
<div class="p-5 border-t">
<h4 class="text-sm font-semibold text-gray-700 mb-3"><i class="fas fa-clipboard-list text-blue-500 mr-1"></i>업무현황</h4>
<!-- 제출된 보고 목록 -->
<div id="reportsList_${checkin.id}" class="mb-3"></div>
<!-- 추가/수정 폼 토글 버튼 -->
<div id="reportFormToggle_${checkin.id}">
<button onclick="showReportForm(${checkin.id}, ${s.id})" class="px-4 py-2 bg-blue-50 text-blue-600 rounded-lg text-sm hover:bg-blue-100 border border-blue-200">
<i class="fas fa-plus mr-1"></i>업무현황 추가
<div id="checkoutFormToggle_${checkin.id}">
<button onclick="showCheckoutForm(${checkin.id}, ${s.id})" class="w-full px-4 py-3 bg-gray-800 text-white rounded-lg text-sm hover:bg-gray-900 font-medium">
<i class="fas fa-stop-circle mr-1"></i>작업 종료
</button>
</div>
<!-- 입력 폼 (숨김) -->
<div id="reportForm_${checkin.id}" class="hidden mt-3"></div>
</div>
<!-- Step 3: 작업 종료 -->
<div class="p-5 border-t">
<button onclick="doCheckOut(${checkin.id})" class="w-full px-4 py-3 bg-gray-800 text-white rounded-lg text-sm hover:bg-gray-900 font-medium">
<i class="fas fa-stop-circle mr-1"></i>작업 종료 (체크아웃)
</button>
<p class="text-xs text-gray-400 text-center mt-2">업무현황을 먼저 저장한 후 작업을 종료하세요.</p>
<div id="checkoutForm_${checkin.id}" class="hidden mt-3"></div>
</div>
` : ''}
@@ -159,94 +138,25 @@ async function renderScheduleCards() {
<div class="text-sm text-blue-600">
<i class="fas fa-check-double mr-1"></i>작업 종료 완료 (${formatTime(checkin.check_out_time)})
</div>
${reportCount > 0 ? '<div class="text-xs text-emerald-600 mt-1"><i class="fas fa-clipboard-check mr-1"></i>업무현황 ' + reportCount + '건 제출 완료</div>' : ''}
</div>
` : ''}
</div>`;
}).join('');
// 체크인된 카드의 보고 목록 로드 + 보고 0건이면 폼 자동 표시
for (const s of portalSchedules) {
const checkin = portalCheckins[s.id];
if (checkin && !checkin.check_out_time) {
const reportCount = parseInt(checkin.work_report_count) || 0;
loadReportsList(checkin.id, s.id);
if (reportCount === 0) {
showReportForm(checkin.id, s.id);
}
}
}
}
async function loadReportsList(checkinId, scheduleId) {
const container = document.getElementById('reportsList_' + checkinId);
if (!container) return;
try {
const r = await api('/work-reports?checkin_id=' + checkinId + '&limit=50');
const reports = (r.data || []).filter(rr => rr.checkin_id === checkinId);
renderReportsList(checkinId, scheduleId, reports);
} catch(e) {
container.innerHTML = '';
}
}
function renderReportsList(checkinId, scheduleId, reports) {
const container = document.getElementById('reportsList_' + checkinId);
if (!container) return;
if (!reports.length) {
container.innerHTML = '<p class="text-xs text-gray-400 mb-2">아직 등록된 업무현황이 없습니다.</p>';
return;
}
container.innerHTML = reports.map(r => {
const workerCount = r.workers ? r.workers.length : 0;
const totalHours = r.workers ? r.workers.reduce((sum, w) => sum + Number(w.hours_worked || 0), 0) : 0;
const isConfirmed = !!r.confirmed_by;
const isRejected = !!r.rejected_by;
const statusBadge = isConfirmed
? '<span class="text-xs text-emerald-600"><i class="fas fa-check-circle"></i> 확인완료</span>'
: isRejected
? '<span class="text-xs text-red-600"><i class="fas fa-times-circle"></i> 반려</span>'
: '<span class="text-xs text-amber-500">미확인</span>';
const canEdit = !isConfirmed;
return `<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg mb-2 text-sm">
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2 mb-1">
<span class="font-medium text-gray-700">보고 #${r.report_seq || 1}</span>
${statusBadge}
</div>
<div class="text-xs text-gray-500 truncate">${escapeHtml((r.work_content || '').substring(0, 50))}${(r.work_content || '').length > 50 ? '...' : ''}</div>
<div class="text-xs text-gray-400 mt-1">${workerCount}명 · ${totalHours}h · 진행률 ${r.progress_rate || 0}%</div>
${isRejected && r.rejection_reason ? `<div class="text-xs text-red-600 mt-1"><i class="fas fa-exclamation-circle mr-1"></i>${escapeHtml(r.rejection_reason)}</div>` : ''}
</div>
${canEdit ? `<button onclick="openEditReport(${r.id}, ${checkinId}, ${scheduleId})" class="ml-2 px-3 py-1 text-xs bg-white border border-gray-300 text-gray-600 rounded hover:bg-gray-100 flex-shrink-0">
<i class="fas fa-edit mr-1"></i>${isRejected ? '수정 재제출' : '수정'}
</button>` : ''}
</div>`;
}).join('');
}
async function showReportForm(checkinId, scheduleId, editReport) {
editingReportId = editReport ? editReport.id : null;
const formContainer = document.getElementById('reportForm_' + checkinId);
const toggleBtn = document.getElementById('reportFormToggle_' + checkinId);
async function showCheckoutForm(checkinId, scheduleId) {
const formContainer = document.getElementById('checkoutForm_' + checkinId);
const toggleBtn = document.getElementById('checkoutFormToggle_' + checkinId);
if (!formContainer) return;
// 작업자 목록 로드
const workers = await loadCompanyWorkers();
const datalistHtml = workers.map(w => `<option value="${escapeHtml(w.worker_name)}">`).join('');
// 첫 보고 여부 판단
// 체크인 시 입력한 작업자 명단으로 pre-populate
const checkin = Object.values(portalCheckins).find(c => c.id === checkinId);
const isFirstReport = !editReport && checkin && parseInt(checkin.work_report_count) === 0;
// 기본 작업자 행: 체크인 시 입력한 작업자 명단으로 pre-populate
let existingWorkers = [];
if (editReport && editReport.workers) {
existingWorkers = editReport.workers;
} else if (isFirstReport && checkin) {
if (checkin) {
let workerNames = [];
if (checkin.worker_names) {
let parsed = checkin.worker_names;
@@ -265,13 +175,12 @@ async function showReportForm(checkinId, scheduleId, editReport) {
}
formContainer.innerHTML = `
<div class="space-y-3 border border-blue-200 rounded-lg p-4 bg-blue-50/30">
<div class="space-y-3 border border-gray-200 rounded-lg p-4 bg-gray-50/30">
<div class="flex items-center justify-between mb-1">
<h5 class="text-sm font-semibold text-gray-700">${editReport ? '보고 #' + (editReport.report_seq || 1) + ' 수정' : '새 업무현황'}</h5>
<button onclick="hideReportForm(${checkinId})" class="text-gray-400 hover:text-gray-600 text-xs"><i class="fas fa-times"></i> 취소</button>
<h5 class="text-sm font-semibold text-gray-700"><i class="fas fa-stop-circle text-gray-600 mr-1"></i>작업 종료</h5>
<button onclick="hideCheckoutForm(${checkinId})" class="text-gray-400 hover:text-gray-600 text-xs"><i class="fas fa-times"></i> 취소</button>
</div>
<datalist id="workerDatalist_${checkinId}">${datalistHtml}</datalist>
<!-- 작업자 목록 -->
<div>
<label class="block text-xs font-medium text-gray-600 mb-1">작업자 및 투입시간</label>
<div id="workerRows_${checkinId}" class="space-y-2">
@@ -279,40 +188,43 @@ async function showReportForm(checkinId, scheduleId, editReport) {
</div>
<button onclick="addWorkerRow(${checkinId})" class="mt-2 text-xs text-blue-600 hover:text-blue-800"><i class="fas fa-plus mr-1"></i>작업자 추가</button>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div>
<label class="block text-xs font-medium text-gray-600 mb-1">실투입 인원</label>
<input type="number" id="reportWorkers_${checkinId}" min="0" value="${editReport ? (editReport.actual_workers || 0) : (checkin ? checkin.actual_worker_count || 0 : 0)}" class="input-field w-full px-3 py-2 rounded-lg text-sm">
</div>
<div>
<label class="block text-xs font-medium text-gray-600 mb-1">진행률 (%)</label>
<input type="number" id="reportProgress_${checkinId}" min="0" max="100" value="${editReport ? (editReport.progress_rate || 0) : 0}" class="input-field w-full px-3 py-2 rounded-lg text-sm">
</div>
</div>
<div>
<label class="block text-xs font-medium text-gray-600 mb-1">작업내용 <span class="text-red-400">*</span></label>
<textarea id="reportContent_${checkinId}" rows="3" class="input-field w-full px-3 py-2 rounded-lg text-sm" placeholder="오늘 수행한 작업 내용">${editReport ? escapeHtml(editReport.work_content || '') : ''}</textarea>
</div>
<div>
<label class="block text-xs font-medium text-gray-600 mb-1">이슈사항</label>
<textarea id="reportIssues_${checkinId}" rows="2" class="input-field w-full px-3 py-2 rounded-lg text-sm" placeholder="문제점이나 특이사항">${editReport ? escapeHtml(editReport.issues || '') : ''}</textarea>
</div>
<div>
<label class="block text-xs font-medium text-gray-600 mb-1">향후 계획</label>
<textarea id="reportNextPlan_${checkinId}" rows="2" class="input-field w-full px-3 py-2 rounded-lg text-sm" placeholder="다음 작업 계획">${editReport ? escapeHtml(editReport.next_plan || '') : ''}</textarea>
</div>
<div class="flex gap-2">
<button onclick="submitWorkReport(${checkinId}, ${scheduleId})" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">
<i class="fas fa-save mr-1"></i>${editReport ? '수정 저장' : '업무현황 저장'}
</button>
<button onclick="hideReportForm(${checkinId})" class="px-4 py-2 bg-gray-100 text-gray-600 rounded-lg text-sm hover:bg-gray-200">취소</button>
</div>
<button onclick="submitCheckout(${checkinId})" class="w-full px-4 py-3 bg-red-600 text-white rounded-lg text-sm hover:bg-red-700 font-medium">
<i class="fas fa-stop-circle mr-1"></i>작업 종료 확인
</button>
</div>`;
formContainer.classList.remove('hidden');
if (toggleBtn) toggleBtn.classList.add('hidden');
}
function hideCheckoutForm(checkinId) {
const formContainer = document.getElementById('checkoutForm_' + checkinId);
const toggleBtn = document.getElementById('checkoutFormToggle_' + checkinId);
if (formContainer) formContainer.classList.add('hidden');
if (toggleBtn) toggleBtn.classList.remove('hidden');
}
async function submitCheckout(checkinId) {
if (!confirm('작업을 종료하시겠습니까?')) return;
const workers = collectWorkers(checkinId);
if (workers.length === 0) {
showToast('작업자를 1명 이상 입력하세요', 'error');
return;
}
try {
await api('/checkins/' + checkinId + '/checkout-with-report', {
method: 'PUT',
body: JSON.stringify({ workers })
});
showToast('작업 종료 완료');
renderScheduleCards();
} catch(e) {
showToast(e.message || '체크아웃 실패', 'error');
}
}
let workerRowCounter = 100;
function workerRowHtml(checkinId, idx, worker) {
@@ -338,7 +250,6 @@ function removeWorkerRow(rowId, checkinId) {
const row = document.getElementById(rowId);
if (!row) return;
const container = document.getElementById('workerRows_' + checkinId);
// 최소 1행 유지
if (container && container.querySelectorAll('.worker-row').length <= 1) return;
row.remove();
}
@@ -353,7 +264,6 @@ function collectWorkers(checkinId) {
const hoursInput = row.querySelector('.worker-hours');
const name = nameInput ? nameInput.value.trim() : '';
if (!name) return;
// partner_worker_id 매칭
let pwId = nameInput.dataset.pwId ? parseInt(nameInput.dataset.pwId) : null;
if (companyWorkersCache) {
const match = companyWorkersCache.find(w => w.worker_name === name);
@@ -368,57 +278,6 @@ function collectWorkers(checkinId) {
return workers;
}
function hideReportForm(checkinId) {
editingReportId = null;
const formContainer = document.getElementById('reportForm_' + checkinId);
const toggleBtn = document.getElementById('reportFormToggle_' + checkinId);
if (formContainer) formContainer.classList.add('hidden');
if (toggleBtn) toggleBtn.classList.remove('hidden');
}
async function submitWorkReport(checkinId, scheduleId) {
const workContent = document.getElementById('reportContent_' + checkinId).value.trim();
if (!workContent) { showToast('작업내용을 입력하세요', 'error'); return; }
const workers = collectWorkers(checkinId);
const body = {
checkin_id: checkinId,
schedule_id: scheduleId,
report_date: new Date().toISOString().substring(0, 10),
actual_workers: parseInt(document.getElementById('reportWorkers_' + checkinId).value) || 0,
work_content: workContent,
progress_rate: parseInt(document.getElementById('reportProgress_' + checkinId).value) || 0,
issues: document.getElementById('reportIssues_' + checkinId).value.trim() || null,
next_plan: document.getElementById('reportNextPlan_' + checkinId).value.trim() || null,
workers: workers
};
try {
if (editingReportId) {
await api('/work-reports/' + editingReportId, { method: 'PUT', body: JSON.stringify(body) });
showToast('업무현황이 수정되었습니다');
} else {
await api('/work-reports', { method: 'POST', body: JSON.stringify(body) });
showToast('업무현황이 저장되었습니다');
}
editingReportId = null;
renderScheduleCards();
} catch(e) {
showToast(e.message || '저장 실패', 'error');
}
}
async function openEditReport(reportId, checkinId, scheduleId) {
try {
const r = await api('/work-reports/' + reportId);
const report = r.data || r;
showReportForm(checkinId, scheduleId, report);
} catch(e) {
showToast('보고 정보를 불러올 수 없습니다', 'error');
}
}
async function doCheckIn(scheduleId) {
const workerCount = parseInt(document.getElementById('checkinWorkers_' + scheduleId).value) || 1;
const rawNames = document.getElementById('checkinNames_' + scheduleId).value.trim();
@@ -441,21 +300,9 @@ async function doCheckIn(scheduleId) {
}
}
async function doCheckOut(checkinId) {
if (!confirm('작업을 종료하시겠습니까? 업무현황을 먼저 저장했는지 확인하세요.')) return;
try {
await api('/checkins/' + checkinId + '/checkout', { method: 'PUT' });
showToast('작업 종료 (체크아웃) 완료');
renderScheduleCards();
} catch(e) {
showToast(e.message || '체크아웃 실패', 'error');
}
}
function initPartnerPortal() {
if (!initAuth()) return;
// Check if partner account
const token = getToken();
const decoded = decodeToken(token);
if (!decoded || !decoded.partner_company_id) {