tk-factory-services/tkpurchase/web/static/js/tkpurchase-workreport.js

/* tkpurchase-workreport.js - Work report monitoring */

let reportPage = 1;
const reportLimit = 20;

async function loadCompaniesForFilter() {
    try {
        const r = await api('/partners?limit=100');
        const list = r.data || [];
        const sel = document.getElementById('filterCompany');
        list.forEach(c => {
            const opt = document.createElement('option');
            opt.value = c.id;
            opt.textContent = c.company_name;
            sel.appendChild(opt);
        });
    } catch(e) { console.warn('Load companies error:', e); }
}

async function loadReports() {
    const companyId = document.getElementById('filterCompany').value;
    const dateFrom = document.getElementById('filterDateFrom').value;
    const dateTo = document.getElementById('filterDateTo').value;
    const confirmed = document.getElementById('filterConfirmed').value;

    let query = `?page=${reportPage}&limit=${reportLimit}`;
    if (companyId) query += '&company_id=' + companyId;
    if (dateFrom) query += '&date_from=' + dateFrom;
    if (dateTo) query += '&date_to=' + dateTo;
    if (confirmed) query += '&confirmed=' + confirmed;

    try {
        const r = await api('/work-reports' + query);
        renderReportTable(r.data || [], r.total || 0);
    } catch(e) {
        console.warn('Report load error:', e);
        document.getElementById('reportTableBody').innerHTML = '<tr><td colspan="9" class="text-center text-red-400 py-8">로딩 실패</td></tr>';
    }
}

function renderReportTable(list, total) {
    const tbody = document.getElementById('reportTableBody');
    if (!list.length) {
        tbody.innerHTML = '<tr><td colspan="9" class="text-center text-gray-400 py-8">업무현황이 없습니다</td></tr>';
        document.getElementById('reportPagination').innerHTML = '';
        return;
    }

    tbody.innerHTML = list.map((r, idx) => {
        const displaySeq = idx + 1;
        const progressColor = r.progress_rate >= 80 ? 'bg-emerald-500' : r.progress_rate >= 50 ? 'bg-blue-500' : r.progress_rate >= 20 ? 'bg-amber-500' : 'bg-red-500';
        const confirmedBadge = r.confirmed_at
            ? '<span class="badge badge-green">확인</span>'
            : r.rejected_by
              ? '<span class="badge badge-red">반려</span>'
              : '<button onclick="confirmReport(' + r.id + ')" class="badge badge-amber cursor-pointer hover:opacity-80">미확인</button>';

        return `<tr class="cursor-pointer hover:bg-gray-50" onclick="viewReportDetail(${r.id})">
            <td>${formatDate(r.report_date || r.created_at)}</td>
            <td class="text-center hide-mobile">${displaySeq}</td>
            <td class="font-medium">${escapeHtml(r.company_name || '')}</td>
            <td class="max-w-xs truncate">${escapeHtml(r.work_content || '')}</td>
            <td class="text-center">${r.actual_workers || 0}명</td>
            <td class="text-center">
                <div class="flex items-center gap-2">
                    <div class="flex-1 bg-gray-200 rounded-full h-2 min-w-[3rem]">
                        <div class="${progressColor} rounded-full h-2" style="width: ${r.progress_rate || 0}%"></div>
                    </div>
                    <span class="text-xs text-gray-500 whitespace-nowrap">${r.progress_rate || 0}%</span>
                </div>
            </td>
            <td class="hide-mobile max-w-[8rem] truncate text-xs">${escapeHtml(r.issues || '')}</td>
            <td class="text-center" onclick="event.stopPropagation()">${confirmedBadge}</td>
            <td class="text-right" onclick="event.stopPropagation()">
                <button onclick="viewReportDetail(${r.id})" class="text-blue-600 hover:text-blue-800 text-xs" title="상세보기"><i class="fas fa-eye"></i></button>
                <button onclick="openEditMode(${r.id})" class="text-amber-600 hover:text-amber-800 text-xs ml-1" title="수정"><i class="fas fa-edit"></i></button>
                <button onclick="deleteReport(${r.id})" class="text-red-600 hover:text-red-800 text-xs ml-1" title="삭제"><i class="fas fa-trash"></i></button>
            </td>
        </tr>`;
    }).join('');

    // Pagination
    const totalPages = Math.ceil(total / reportLimit);
    renderReportPagination(totalPages);
}

function renderReportPagination(totalPages) {
    const container = document.getElementById('reportPagination');
    if (totalPages <= 1) { container.innerHTML = ''; return; }

    let html = '';
    if (reportPage > 1) {
        html += `<button onclick="goToReportPage(${reportPage - 1})" class="px-3 py-1 border rounded text-sm hover:bg-gray-50">&laquo;</button>`;
    }
    for (let i = 1; i <= totalPages; i++) {
        if (i === reportPage) {
            html += `<button class="px-3 py-1 bg-emerald-600 text-white rounded text-sm">${i}</button>`;
        } else if (Math.abs(i - reportPage) <= 2 || i === 1 || i === totalPages) {
            html += `<button onclick="goToReportPage(${i})" class="px-3 py-1 border rounded text-sm hover:bg-gray-50">${i}</button>`;
        } else if (Math.abs(i - reportPage) === 3) {
            html += '<span class="text-gray-400">...</span>';
        }
    }
    if (reportPage < totalPages) {
        html += `<button onclick="goToReportPage(${reportPage + 1})" class="px-3 py-1 border rounded text-sm hover:bg-gray-50">&raquo;</button>`;
    }
    container.innerHTML = html;
}

function goToReportPage(p) {
    reportPage = p;
    loadReports();
}

async function confirmReport(id) {
    if (!confirm('이 업무현황을 확인 처리하시겠습니까?')) return;
    try {
        await api('/work-reports/' + id + '/confirm', { method: 'PUT' });
        showToast('확인 처리되었습니다');
        loadReports();
    } catch(e) {
        showToast(e.message || '확인 처리 실패', 'error');
    }
}

async function viewReportDetail(id) {
    try {
        const r = await api('/work-reports/' + id);
        const d = r.data || r;

        const progressColor = d.progress_rate >= 80 ? 'bg-emerald-500' : d.progress_rate >= 50 ? 'bg-blue-500' : d.progress_rate >= 20 ? 'bg-amber-500' : 'bg-red-500';

        // 작업자 목록 테이블
        let workersHtml = '';
        if (d.workers && d.workers.length > 0) {
            const totalHours = d.workers.reduce((sum, w) => sum + Number(w.hours_worked || 0), 0);
            workersHtml = `<div class="sm:col-span-2">
                <div class="text-xs text-gray-500 mb-1">작업자 목록</div>
                <div class="bg-gray-50 rounded-lg p-3">
                    <table class="w-full text-sm">
                        <thead><tr class="text-xs text-gray-500 border-b"><th class="text-left py-1">작업자</th><th class="text-left py-1">직위</th><th class="text-right py-1">투입시간</th></tr></thead>
                        <tbody>
                            ${d.workers.map(w => `<tr class="border-b border-gray-100"><td class="py-1">${escapeHtml(w.worker_name)}</td><td class="py-1 text-gray-500">${escapeHtml(w.position || '')}</td><td class="py-1 text-right">${w.hours_worked || 0}h</td></tr>`).join('')}
                        </tbody>
                        <tfoot><tr class="font-medium"><td colspan="2" class="py-1">합계 (${d.workers.length}명)</td><td class="py-1 text-right">${totalHours}h</td></tr></tfoot>
                    </table>
                </div>
            </div>`;
        }

        let confirmBtn;
        if (d.confirmed_at) {
            confirmBtn = `<button onclick="unconfirmReport(${d.id})" class="px-4 py-2 bg-amber-500 text-white rounded-lg text-sm hover:bg-amber-600"><i class="fas fa-undo mr-1"></i>확인 취소</button>`;
        } else if (d.rejected_by) {
            confirmBtn = `<span class="px-4 py-2 bg-red-100 text-red-600 rounded-lg text-sm">반려됨</span>`;
        } else {
            confirmBtn = `<button onclick="rejectReport(${d.id})" class="px-4 py-2 bg-red-600 text-white rounded-lg text-sm hover:bg-red-700"><i class="fas fa-ban mr-1"></i>반려</button>
                <button onclick="confirmReport(${d.id})" class="px-4 py-2 bg-emerald-600 text-white rounded-lg text-sm hover:bg-emerald-700"><i class="fas fa-check mr-1"></i>확인 처리</button>`;
        }

        const html = `
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <div class="text-xs text-gray-500 mb-1">업체</div>
                    <div class="text-sm font-medium">${escapeHtml(d.company_name || '')}</div>
                </div>
                <div>
                    <div class="text-xs text-gray-500 mb-1">보고일</div>
                    <div class="text-sm">${formatDateTime(d.report_date || d.created_at)}</div>
                </div>
                <div>
                    <div class="text-xs text-gray-500 mb-1">실투입 인원</div>
                    <div class="text-sm">${d.actual_workers || 0}명</div>
                </div>
                <div>
                    <div class="text-xs text-gray-500 mb-1">진행률</div>
                    <div class="flex items-center gap-2">
                        <div class="flex-1 bg-gray-200 rounded-full h-3">
                            <div class="${progressColor} rounded-full h-3" style="width: ${d.progress_rate || 0}%"></div>
                        </div>
                        <span class="text-sm font-medium">${d.progress_rate || 0}%</span>
                    </div>
                </div>
                ${workersHtml}
                <div class="sm:col-span-2">
                    <div class="text-xs text-gray-500 mb-1">작업내용</div>
                    <div class="text-sm whitespace-pre-wrap bg-gray-50 rounded-lg p-3">${escapeHtml(d.work_content || '-')}</div>
                </div>
                ${d.issues ? `<div class="sm:col-span-2">
                    <div class="text-xs text-gray-500 mb-1">이슈사항</div>
                    <div class="text-sm whitespace-pre-wrap bg-red-50 rounded-lg p-3 text-red-700">${escapeHtml(d.issues)}</div>
                </div>` : ''}
                ${d.next_plan ? `<div class="sm:col-span-2">
                    <div class="text-xs text-gray-500 mb-1">향후 계획</div>
                    <div class="text-sm whitespace-pre-wrap bg-blue-50 rounded-lg p-3 text-blue-700">${escapeHtml(d.next_plan)}</div>
                </div>` : ''}
                <div>
                    <div class="text-xs text-gray-500 mb-1">확인 상태</div>
                    <div class="text-sm">${d.confirmed_at ? '<span class="badge badge-green">확인완료</span> ' + formatDateTime(d.confirmed_at) : d.rejected_by ? '<span class="badge badge-red">반려</span> ' + formatDateTime(d.rejected_at) : '<span class="badge badge-amber">미확인</span>'}</div>
                </div>
                ${d.confirmed_by_name ? `<div>
                    <div class="text-xs text-gray-500 mb-1">확인자</div>
                    <div class="text-sm">${escapeHtml(d.confirmed_by_name)}</div>
                </div>` : ''}
                ${d.rejected_by ? `<div class="sm:col-span-2">
                    <div class="text-xs text-gray-500 mb-1">반려 정보</div>
                    <div class="text-sm bg-red-50 rounded-lg p-3">
                        <div class="text-red-700 font-medium mb-1">반려 사유: ${escapeHtml(d.rejection_reason || '')}</div>
                        <div class="text-xs text-red-500">반려자: ${escapeHtml(d.rejected_by_name || '')} · ${formatDateTime(d.rejected_at)}</div>
                    </div>
                </div>` : ''}
            </div>
            <div class="mt-4 flex justify-end gap-2">
                <button onclick="deleteReport(${d.id})" class="px-4 py-2 bg-red-600 text-white rounded-lg text-sm hover:bg-red-700"><i class="fas fa-trash mr-1"></i>삭제</button>
                <button onclick="openEditMode(${d.id})" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700"><i class="fas fa-edit mr-1"></i>수정</button>
                ${confirmBtn}
            </div>`;

        document.getElementById('reportDetailContent').innerHTML = html;
        document.getElementById('reportDetailPanel').classList.remove('hidden');
        document.getElementById('reportDetailPanel').scrollIntoView({ behavior: 'smooth', block: 'start' });
    } catch(e) {
        showToast('상세 정보를 불러올 수 없습니다', 'error');
    }
}

function closeReportDetail() {
    document.getElementById('reportDetailPanel').classList.add('hidden');
}

async function deleteReport(id) {
    if (!confirm('이 업무현황을 삭제하시겠습니까? 삭제 후 복구할 수 없습니다.')) return;
    try {
        await api('/work-reports/' + id, { method: 'DELETE' });
        showToast('삭제되었습니다');
        closeReportDetail();
        loadReports();
    } catch(e) {
        showToast(e.message || '삭제 실패', 'error');
    }
}

async function rejectReport(id) {
    const reason = prompt('반려 사유를 입력하세요:');
    if (!reason || !reason.trim()) return;
    try {
        await api('/work-reports/' + id + '/reject', {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ reason: reason.trim() })
        });
        showToast('반려 처리되었습니다');
        viewReportDetail(id);
        loadReports();
    } catch(e) {
        showToast(e.message || '반려 처리 실패', 'error');
    }
}

async function unconfirmReport(id) {
    if (!confirm('확인 처리를 취소하시겠습니까?')) return;
    try {
        await api('/work-reports/' + id + '/unconfirm', { method: 'PUT' });
        showToast('확인이 취소되었습니다');
        viewReportDetail(id);
        loadReports();
    } catch(e) {
        showToast(e.message || '확인 취소 실패', 'error');
    }
}

async function openEditMode(id) {
    try {
        const r = await api('/work-reports/' + id);
        const d = r.data || r;

        let workersRowsHtml = '';
        if (d.workers && d.workers.length > 0) {
            workersRowsHtml = d.workers.map((w, i) => editWorkerRowHtml(i, w)).join('');
        } else {
            workersRowsHtml = editWorkerRowHtml(0, {});
        }

        const html = `
            <form id="editReportForm" onsubmit="saveEditReport(event, ${d.id})">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="text-xs text-gray-500 mb-1 block">업체</label>
                        <div class="text-sm font-medium">${escapeHtml(d.company_name || '')}</div>
                    </div>
                    <div>
                        <label class="text-xs text-gray-500 mb-1 block">보고일</label>
                        <div class="text-sm">${formatDateTime(d.report_date || d.created_at)}</div>
                    </div>
                    <div>
                        <label class="text-xs text-gray-500 mb-1 block">실투입 인원</label>
                        <input type="number" name="actual_workers" value="${d.actual_workers || 0}" min="0" class="w-full border rounded px-2 py-1 text-sm">
                    </div>
                    <div>
                        <label class="text-xs text-gray-500 mb-1 block">진행률 (%)</label>
                        <input type="number" name="progress_rate" value="${d.progress_rate || 0}" min="0" max="100" class="w-full border rounded px-2 py-1 text-sm">
                    </div>
                    <div class="sm:col-span-2">
                        <label class="text-xs text-gray-500 mb-1 block">작업내용</label>
                        <textarea name="work_content" rows="3" class="w-full border rounded px-2 py-1 text-sm">${escapeHtml(d.work_content || '')}</textarea>
                    </div>
                    <div class="sm:col-span-2">
                        <label class="text-xs text-gray-500 mb-1 block">이슈사항</label>
                        <textarea name="issues" rows="2" class="w-full border rounded px-2 py-1 text-sm">${escapeHtml(d.issues || '')}</textarea>
                    </div>
                    <div class="sm:col-span-2">
                        <label class="text-xs text-gray-500 mb-1 block">향후 계획</label>
                        <textarea name="next_plan" rows="2" class="w-full border rounded px-2 py-1 text-sm">${escapeHtml(d.next_plan || '')}</textarea>
                    </div>
                    <div class="sm:col-span-2">
                        <div class="flex items-center justify-between mb-1">
                            <label class="text-xs text-gray-500">작업자 목록</label>
                            <button type="button" onclick="addEditWorkerRow()" class="text-xs text-blue-600 hover:text-blue-800"><i class="fas fa-plus mr-1"></i>추가</button>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-3">
                            <table class="w-full text-sm">
                                <thead><tr class="text-xs text-gray-500 border-b"><th class="text-left py-1">작업자명</th><th class="text-right py-1">투입시간</th><th class="w-8"></th></tr></thead>
                                <tbody id="editWorkersBody">${workersRowsHtml}</tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="mt-4 flex justify-end gap-2">
                    <button type="button" onclick="viewReportDetail(${d.id})" class="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50">취소</button>
                    <button type="submit" class="px-4 py-2 bg-emerald-600 text-white rounded-lg text-sm hover:bg-emerald-700"><i class="fas fa-save mr-1"></i>저장</button>
                </div>
            </form>`;

        document.getElementById('reportDetailContent').innerHTML = html;
        document.getElementById('reportDetailPanel').classList.remove('hidden');
    } catch(e) {
        showToast('보고 정보를 불러올 수 없습니다', 'error');
    }
}

function editWorkerRowHtml(idx, w) {
    return `<tr class="edit-worker-row border-b border-gray-100">
        <td class="py-1"><input type="text" name="worker_name_${idx}" value="${escapeHtml(w.worker_name || '')}" class="w-full border rounded px-2 py-1 text-sm" placeholder="작업자명" required></td>
        <td class="py-1 text-right"><input type="number" name="worker_hours_${idx}" value="${w.hours_worked || 8}" min="0" step="0.5" class="w-20 border rounded px-2 py-1 text-sm text-right"></td>
        <td class="py-1 text-center"><button type="button" onclick="removeEditWorkerRow(this)" class="text-red-400 hover:text-red-600 text-xs"><i class="fas fa-times"></i></button></td>
    </tr>`;
}

function addEditWorkerRow() {
    const tbody = document.getElementById('editWorkersBody');
    const idx = tbody.querySelectorAll('.edit-worker-row').length;
    tbody.insertAdjacentHTML('beforeend', editWorkerRowHtml(idx, {}));
}

function removeEditWorkerRow(btn) {
    const tbody = document.getElementById('editWorkersBody');
    if (tbody.querySelectorAll('.edit-worker-row').length <= 1) {
        showToast('작업자는 최소 1명 필요합니다', 'error');
        return;
    }
    btn.closest('tr').remove();
}

async function saveEditReport(e, id) {
    e.preventDefault();
    const form = document.getElementById('editReportForm');
    const data = {
        actual_workers: parseInt(form.querySelector('[name="actual_workers"]').value) || 0,
        progress_rate: parseInt(form.querySelector('[name="progress_rate"]').value) || 0,
        work_content: form.querySelector('[name="work_content"]').value,
        issues: form.querySelector('[name="issues"]').value,
        next_plan: form.querySelector('[name="next_plan"]').value,
        workers: []
    };

    const rows = document.querySelectorAll('#editWorkersBody .edit-worker-row');
    rows.forEach((row, i) => {
        const nameInput = row.querySelector('input[type="text"]');
        const hoursInput = row.querySelector('input[type="number"]');
        if (nameInput && nameInput.value.trim()) {
            data.workers.push({
                worker_name: nameInput.value.trim(),
                hours_worked: parseFloat(hoursInput.value) || 8
            });
        }
    });

    try {
        await api('/work-reports/' + id, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        });
        showToast('수정되었습니다');
        viewReportDetail(id);
        loadReports();
    } catch(e) {
        showToast(e.message || '수정 실패', 'error');
    }
}

function initWorkReportPage() {
    if (!initAuth()) return;
    // Set default date range to this month
    const now = new Date();
    const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
    document.getElementById('filterDateFrom').value = toLocalDate(firstDay);
    document.getElementById('filterDateTo').value = toLocalDate(now);

    loadCompaniesForFilter();
    loadReports();
}