feat: 구매/안전 시스템 전면 개편 — tkpurchase 개편 + tksafety 신규 + 권한 보강

Phase 1: tkuser 협력업체 CRUD 이관 (읽기전용 → 전체 CRUD)
Phase 2: tkpurchase 개편 — 일용공 신청/확정, 작업일정, 업무현황, 계정관리, 협력업체 포털
Phase 3: tksafety 신규 시스템 — 방문관리 + 안전교육 신고
Phase 4: SSO 인증 보강 (partner_company_id JWT, 만료일 체크), 권한 테이블 기반 접근 제어

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

tkpurchase/web/static/js/tkpurchase-accounts.js

@@ -0,0 +1,184 @@
+/* tkpurchase-accounts.js - Partner account management */
+
+let allCompanies = [];
+let selectedCompanyId = null;
+
+async function loadCompaniesForAccounts() {
+    try {
+        const r = await api('/partners?limit=200');
+        allCompanies = r.data || [];
+        renderCompanyList(allCompanies);
+    } catch(e) {
+        console.warn('Load companies error:', e);
+        document.getElementById('companyList').innerHTML = '<p class="text-red-400 text-center text-sm py-4">로딩 실패</p>';
+    }
+}
+
+function renderCompanyList(list) {
+    const container = document.getElementById('companyList');
+    if (!list.length) {
+        container.innerHTML = '<p class="text-gray-400 text-center text-sm py-4">등록된 업체가 없습니다</p>';
+        return;
+    }
+    container.innerHTML = list.map(c => {
+        const active = c.id === selectedCompanyId;
+        return `<button onclick="selectCompanyForAccounts(${c.id})" class="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${active ? 'bg-emerald-50 text-emerald-700 font-medium' : 'text-gray-700 hover:bg-gray-50'}">
+            <i class="fas fa-building mr-2 ${active ? 'text-emerald-500' : 'text-gray-400'}"></i>${escapeHtml(c.name)}
+        </button>`;
+    }).join('');
+}
+
+function filterCompanyList() {
+    const q = document.getElementById('companyFilter').value.trim().toLowerCase();
+    const filtered = q ? allCompanies.filter(c => (c.name || '').toLowerCase().includes(q)) : allCompanies;
+    renderCompanyList(filtered);
+}
+
+async function selectCompanyForAccounts(id) {
+    selectedCompanyId = id;
+    const company = allCompanies.find(c => c.id === id);
+    document.getElementById('selectedCompanyName').textContent = company ? company.name + ' - 계정 목록' : '계정 목록';
+    document.getElementById('addAccountBtn').classList.remove('hidden');
+
+    // Re-render company list to highlight selection
+    filterCompanyList();
+
+    // Load accounts
+    try {
+        const r = await api('/partners/' + id + '/accounts');
+        renderAccountList(r.data || []);
+    } catch(e) {
+        console.warn('Load accounts error:', e);
+        document.getElementById('accountList').innerHTML = '<p class="text-red-400 text-center py-4 text-sm">계정 로딩 실패</p>';
+    }
+}
+
+function renderAccountList(list) {
+    const container = document.getElementById('accountList');
+    if (!list.length) {
+        container.innerHTML = '<p class="text-gray-400 text-center py-8 text-sm">등록된 계정이 없습니다</p>';
+        return;
+    }
+
+    container.innerHTML = `<div class="space-y-3">${list.map(a => {
+        const isExpired = a.account_expires_at && new Date(a.account_expires_at) < new Date();
+        const statusBadge = !a.is_active
+            ? '<span class="badge badge-gray">비활성</span>'
+            : isExpired
+                ? '<span class="badge badge-red">만료</span>'
+                : '<span class="badge badge-green">활성</span>';
+
+        return `<div class="border rounded-lg p-4 ${!a.is_active ? 'bg-gray-50 opacity-60' : ''}">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 bg-emerald-100 rounded-full flex items-center justify-center text-emerald-700 font-semibold">
+                        ${(a.name || a.username || '?').charAt(0).toUpperCase()}
+                    </div>
+                    <div>
+                        <div class="text-sm font-medium text-gray-800">${escapeHtml(a.name || '')}</div>
+                        <div class="text-xs text-gray-500">${escapeHtml(a.username || '')}</div>
+                    </div>
+                </div>
+                <div class="flex items-center gap-2">
+                    ${statusBadge}
+                    <button onclick="openEditAccount(${a.id}, '${escapeHtml(a.name || '')}', '${a.account_expires_at ? formatDate(a.account_expires_at) : ''}')" class="text-blue-600 hover:text-blue-800 text-xs p-1" title="수정">
+                        <i class="fas fa-edit"></i>
+                    </button>
+                    ${a.is_active ? `<button onclick="deactivateAccount(${a.id})" class="text-red-500 hover:text-red-700 text-xs p-1" title="비활성화">
+                        <i class="fas fa-user-slash"></i>
+                    </button>` : ''}
+                </div>
+            </div>
+            <div class="mt-2 flex gap-4 text-xs text-gray-500">
+                <span><i class="fas fa-calendar mr-1"></i>만료: ${a.account_expires_at ? formatDate(a.account_expires_at) : '무기한'}</span>
+                ${a.last_login_at ? `<span><i class="fas fa-sign-in-alt mr-1"></i>최근 로그인: ${formatDateTime(a.last_login_at)}</span>` : ''}
+            </div>
+        </div>`;
+    }).join('')}</div>`;
+}
+
+/* ===== Add Account ===== */
+function openAddAccount() {
+    if (!selectedCompanyId) { showToast('업체를 먼저 선택하세요', 'error'); return; }
+    document.getElementById('addAccountForm').reset();
+    // Default expiration: 1 year from now
+    const oneYear = new Date();
+    oneYear.setFullYear(oneYear.getFullYear() + 1);
+    document.getElementById('addExpiresAt').value = oneYear.toISOString().substring(0, 10);
+    document.getElementById('addAccountModal').classList.remove('hidden');
+}
+
+function closeAddAccount() {
+    document.getElementById('addAccountModal').classList.add('hidden');
+}
+
+async function submitAddAccount(e) {
+    e.preventDefault();
+    const body = {
+        username: document.getElementById('addUsername').value.trim(),
+        password: document.getElementById('addPassword').value,
+        name: document.getElementById('addName').value.trim(),
+        account_expires_at: document.getElementById('addExpiresAt').value || null
+    };
+    if (!body.username || !body.password || !body.name) {
+        showToast('필수 항목을 입력하세요', 'error');
+        return;
+    }
+
+    try {
+        await api('/partners/' + selectedCompanyId + '/accounts', { method: 'POST', body: JSON.stringify(body) });
+        showToast('계정이 추가되었습니다');
+        closeAddAccount();
+        selectCompanyForAccounts(selectedCompanyId);
+    } catch(e) {
+        showToast(e.message || '계정 추가 실패', 'error');
+    }
+}
+
+/* ===== Edit Account ===== */
+function openEditAccount(id, name, expiresAt) {
+    document.getElementById('editAccountId').value = id;
+    document.getElementById('editName').value = name;
+    document.getElementById('editExpiresAt').value = expiresAt;
+    document.getElementById('editAccountModal').classList.remove('hidden');
+}
+
+function closeEditAccount() {
+    document.getElementById('editAccountModal').classList.add('hidden');
+}
+
+async function submitEditAccount(e) {
+    e.preventDefault();
+    const id = document.getElementById('editAccountId').value;
+    const body = {
+        name: document.getElementById('editName').value.trim(),
+        account_expires_at: document.getElementById('editExpiresAt').value || null
+    };
+
+    try {
+        await api('/partners/' + selectedCompanyId + '/accounts/' + id, { method: 'PUT', body: JSON.stringify(body) });
+        showToast('계정이 수정되었습니다');
+        closeEditAccount();
+        selectCompanyForAccounts(selectedCompanyId);
+    } catch(e) {
+        showToast(e.message || '수정 실패', 'error');
+    }
+}
+
+/* ===== Deactivate Account ===== */
+async function deactivateAccount(id) {
+    if (!confirm('이 계정을 비활성화하시겠습니까?')) return;
+    try {
+        await api('/partners/' + selectedCompanyId + '/accounts/' + id + '/deactivate', { method: 'PUT' });
+        showToast('계정이 비활성화되었습니다');
+        selectCompanyForAccounts(selectedCompanyId);
+    } catch(e) {
+        showToast(e.message || '비활성화 실패', 'error');
+    }
+}
+
+/* ===== Init ===== */
+function initAccountsPage() {
+    if (!initAuth()) return;
+    loadCompaniesForAccounts();
+}

tkpurchase/web/static/js/tkpurchase-core.js

@@ -70,6 +70,9 @@ function statusBadge(s) {
     const [cls, label] = m[s] || ['badge-gray', s];
     return `<span class="badge ${cls}">${label}</span>`;
 }
+function debounce(fn, ms) {
+    let t; return function(...args) { clearTimeout(t); t = setTimeout(() => fn.apply(this, args), ms); };
+}
 
 /* ===== Logout ===== */
 function doLogout() {
@@ -83,8 +86,11 @@ function doLogout() {
 function renderNavbar() {
     const currentPage = location.pathname.replace(/\//g, '') || 'index.html';
     const links = [
-        { href: '/', icon: 'fa-door-open', label: '방문 관리', match: ['', 'index.html'] },
-        { href: '/partner.html', icon: 'fa-building', label: '협력업체', match: ['partner.html'] },
+        { href: '/', icon: 'fa-chart-line', label: '대시보드', match: ['', 'index.html'] },
+        { href: '/daylabor.html', icon: 'fa-hard-hat', label: '일용공 신청', match: ['daylabor.html'] },
+        { href: '/schedule.html', icon: 'fa-calendar-alt', label: '작업일정', match: ['schedule.html'] },
+        { href: '/workreport.html', icon: 'fa-clipboard-list', label: '업무현황', match: ['workreport.html'] },
+        { href: '/accounts.html', icon: 'fa-user-shield', label: '계정 관리', match: ['accounts.html'] },
     ];
     const nav = document.getElementById('sideNav');
     if (!nav) return;
@@ -110,8 +116,16 @@ function initAuth() {
         id: decoded.user_id || decoded.id,
         username: decoded.username || decoded.sub,
         name: decoded.name || decoded.full_name,
-        role: (decoded.role || decoded.access_level || '').toLowerCase()
+        role: (decoded.role || decoded.access_level || '').toLowerCase(),
+        partner_company_id: decoded.partner_company_id || null,
+        department_id: decoded.department_id || null
     };
+    // 협력업체 계정 → partner-portal로 분기
+    if (currentUser.partner_company_id && !location.pathname.includes('partner-portal')) {
+        location.href = '/partner-portal.html';
+        return false;
+    }
+
     const dn = currentUser.name || currentUser.username;
     const nameEl = document.getElementById('headerUserName');
     const avatarEl = document.getElementById('headerUserAvatar');

tkpurchase/web/static/js/tkpurchase-dashboard.js

@@ -0,0 +1,81 @@
+/* tkpurchase-dashboard.js - Dashboard logic */
+
+async function loadDashboardStats() {
+    try {
+        const [dlStats, schedules, reports] = await Promise.all([
+            api('/day-labor/stats'),
+            api('/schedules?date_from=' + todayStr() + '&date_to=' + todayStr()),
+            api('/work-reports?confirmed=false&page=1&limit=5')
+        ]);
+        // Update stat cards
+        const pending = (dlStats.data || []).find(s => s.status === 'pending');
+        document.getElementById('statPending').textContent = pending ? pending.cnt : 0;
+        document.getElementById('statSchedules').textContent = (schedules.data || []).length;
+        document.getElementById('statUnconfirmed').textContent = (reports.data || []).length;
+    } catch(e) { console.warn('Dashboard stats error:', e); }
+
+    // Load active checkins count separately
+    try {
+        const checkins = await api('/checkins?status=checked_in&page=1&limit=1');
+        document.getElementById('statCheckins').textContent = checkins.total || 0;
+    } catch(e) { console.warn('Checkins stat error:', e); }
+}
+
+async function loadRecentDayLabor() {
+    try {
+        const r = await api('/day-labor?page=1&limit=5');
+        const list = r.data || [];
+        const c = document.getElementById('recentDayLabor');
+        if (!list.length) { c.innerHTML = '<p class="text-gray-400 text-center py-4 text-sm">신청 내역이 없습니다</p>'; return; }
+        const statusMap = { pending: ['bg-amber-50 text-amber-600', '대기'], approved: ['bg-emerald-50 text-emerald-600', '승인'], rejected: ['bg-red-50 text-red-600', '거절'], completed: ['bg-gray-100 text-gray-500', '완료'] };
+        c.innerHTML = list.map(d => {
+            const [cls, label] = statusMap[d.status] || ['bg-gray-100 text-gray-500', d.status];
+            return `<div class="p-3 bg-gray-50 rounded-lg">
+                <div class="flex items-center justify-between">
+                    <span class="text-sm font-medium">${formatDate(d.work_date)}</span>
+                    <span class="px-2 py-0.5 rounded text-xs ${cls}">${label}</span>
+                </div>
+                <div class="text-xs text-gray-500 mt-1">${escapeHtml(d.requester_name || '')} · ${d.worker_count}명 · ${escapeHtml(d.workplace_name || '')}</div>
+                ${d.work_description ? `<div class="text-xs text-gray-400 mt-0.5 truncate">${escapeHtml(d.work_description)}</div>` : ''}
+            </div>`;
+        }).join('');
+    } catch(e) { console.warn(e); }
+}
+
+async function loadTodaySchedules() {
+    try {
+        const today = todayStr();
+        const r = await api('/schedules?date_from=' + today + '&date_to=' + today);
+        const list = r.data || [];
+        const c = document.getElementById('todaySchedules');
+        if (!list.length) { c.innerHTML = '<p class="text-gray-400 text-center py-4 text-sm">오늘 일정이 없습니다</p>'; return; }
+        const statusMap = { scheduled: ['badge-amber', '예정'], in_progress: ['badge-green', '진행중'], completed: ['badge-blue', '완료'], cancelled: ['badge-gray', '취소'] };
+        c.innerHTML = list.map(s => {
+            const [cls, label] = statusMap[s.status] || ['badge-gray', s.status];
+            return `<div class="p-3 bg-gray-50 rounded-lg">
+                <div class="flex items-center justify-between">
+                    <span class="text-sm font-medium">${escapeHtml(s.company_name || '')}</span>
+                    <span class="badge ${cls}">${label}</span>
+                </div>
+                <div class="text-xs text-gray-500 mt-1">${escapeHtml(s.workplace_name || '')} · ${s.expected_workers || 0}명</div>
+                ${s.work_description ? `<div class="text-xs text-gray-400 mt-0.5 truncate">${escapeHtml(s.work_description)}</div>` : ''}
+            </div>`;
+        }).join('');
+    } catch(e) { console.warn(e); }
+}
+
+function todayStr() { return new Date().toISOString().substring(0, 10); }
+
+function initDashboard() {
+    if (!initAuth()) return;
+    // If partner account, redirect to portal
+    const token = getToken();
+    const decoded = decodeToken(token);
+    if (decoded && decoded.partner_company_id) {
+        location.href = '/partner-portal.html';
+        return;
+    }
+    loadDashboardStats();
+    loadRecentDayLabor();
+    loadTodaySchedules();
+}

tkpurchase/web/static/js/tkpurchase-daylabor.js

@@ -0,0 +1,173 @@
+/* tkpurchase-daylabor.js - Day labor management */
+
+let dayLaborPage = 1;
+const dayLaborLimit = 20;
+
+async function loadDayLabor() {
+    const dateFrom = document.getElementById('filterDateFrom').value;
+    const dateTo = document.getElementById('filterDateTo').value;
+    const status = document.getElementById('filterStatus').value;
+    const department = document.getElementById('filterDepartment').value;
+
+    let query = `?page=${dayLaborPage}&limit=${dayLaborLimit}`;
+    if (dateFrom) query += '&date_from=' + dateFrom;
+    if (dateTo) query += '&date_to=' + dateTo;
+    if (status) query += '&status=' + status;
+    if (department) query += '&department=' + encodeURIComponent(department);
+
+    try {
+        const r = await api('/day-labor' + query);
+        renderDayLaborTable(r.data || [], r.total || 0);
+    } catch(e) {
+        console.warn('Day labor load error:', e);
+        document.getElementById('dayLaborTableBody').innerHTML = '<tr><td colspan="8" class="text-center text-red-400 py-8">로딩 실패</td></tr>';
+    }
+}
+
+function renderDayLaborTable(list, total) {
+    const tbody = document.getElementById('dayLaborTableBody');
+    if (!list.length) {
+        tbody.innerHTML = '<tr><td colspan="8" class="text-center text-gray-400 py-8">신청 내역이 없습니다</td></tr>';
+        document.getElementById('dayLaborPagination').innerHTML = '';
+        return;
+    }
+
+    const statusMap = {
+        pending: ['badge-amber', '대기'],
+        approved: ['badge-green', '승인'],
+        rejected: ['badge-red', '거절'],
+        completed: ['badge-gray', '완료']
+    };
+
+    tbody.innerHTML = list.map(d => {
+        const [cls, label] = statusMap[d.status] || ['badge-gray', d.status];
+        let actions = '';
+        if (d.status === 'pending') {
+            actions = `
+                <button onclick="approveDayLabor(${d.id})" class="text-emerald-600 hover:text-emerald-800 text-xs mr-1" title="승인"><i class="fas fa-check"></i></button>
+                <button onclick="rejectDayLabor(${d.id})" class="text-red-500 hover:text-red-700 text-xs" title="거절"><i class="fas fa-times"></i></button>`;
+        } else if (d.status === 'approved') {
+            actions = `<button onclick="completeDayLabor(${d.id})" class="text-blue-600 hover:text-blue-800 text-xs" title="완료"><i class="fas fa-check-double"></i></button>`;
+        }
+        return `<tr>
+            <td>${formatDate(d.created_at)}</td>
+            <td class="font-medium">${formatDate(d.work_date)}</td>
+            <td>${escapeHtml(d.requester_name || '')}</td>
+            <td class="hide-mobile">${escapeHtml(d.department || '')}</td>
+            <td class="text-center">${d.worker_count || 0}명</td>
+            <td>${escapeHtml(d.workplace_name || '')}</td>
+            <td><span class="badge ${cls}">${label}</span></td>
+            <td class="text-right">${actions}</td>
+        </tr>`;
+    }).join('');
+
+    // Pagination
+    const totalPages = Math.ceil(total / dayLaborLimit);
+    renderDayLaborPagination(totalPages);
+}
+
+function renderDayLaborPagination(totalPages) {
+    const container = document.getElementById('dayLaborPagination');
+    if (totalPages <= 1) { container.innerHTML = ''; return; }
+
+    let html = '';
+    if (dayLaborPage > 1) {
+        html += `<button onclick="goToDayLaborPage(${dayLaborPage - 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 === dayLaborPage) {
+            html += `<button class="px-3 py-1 bg-emerald-600 text-white rounded text-sm">${i}</button>`;
+        } else if (Math.abs(i - dayLaborPage) <= 2 || i === 1 || i === totalPages) {
+            html += `<button onclick="goToDayLaborPage(${i})" class="px-3 py-1 border rounded text-sm hover:bg-gray-50">${i}</button>`;
+        } else if (Math.abs(i - dayLaborPage) === 3) {
+            html += '<span class="text-gray-400">...</span>';
+        }
+    }
+    if (dayLaborPage < totalPages) {
+        html += `<button onclick="goToDayLaborPage(${dayLaborPage + 1})" class="px-3 py-1 border rounded text-sm hover:bg-gray-50">&raquo;</button>`;
+    }
+    container.innerHTML = html;
+}
+
+function goToDayLaborPage(p) {
+    dayLaborPage = p;
+    loadDayLabor();
+}
+
+function openAddDayLabor() {
+    document.getElementById('addDayLaborForm').reset();
+    // Default to tomorrow
+    const tomorrow = new Date();
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    document.getElementById('addWorkDate').value = tomorrow.toISOString().substring(0, 10);
+    document.getElementById('addDayLaborModal').classList.remove('hidden');
+}
+
+function closeAddDayLabor() {
+    document.getElementById('addDayLaborModal').classList.add('hidden');
+}
+
+async function submitAddDayLabor(e) {
+    e.preventDefault();
+    const body = {
+        work_date: document.getElementById('addWorkDate').value,
+        worker_count: parseInt(document.getElementById('addWorkerCount').value) || 1,
+        work_description: document.getElementById('addWorkDescription').value.trim(),
+        workplace_name: document.getElementById('addWorkplaceName').value.trim(),
+        notes: document.getElementById('addNotes').value.trim()
+    };
+    if (!body.work_date) { showToast('작업일을 선택하세요', 'error'); return; }
+
+    try {
+        await api('/day-labor', { method: 'POST', body: JSON.stringify(body) });
+        showToast('일용공 신청이 등록되었습니다');
+        closeAddDayLabor();
+        loadDayLabor();
+    } catch(e) {
+        showToast(e.message || '등록 실패', 'error');
+    }
+}
+
+async function approveDayLabor(id) {
+    if (!confirm('이 신청을 승인하시겠습니까?')) return;
+    try {
+        await api('/day-labor/' + id + '/approve', { method: 'PUT' });
+        showToast('승인되었습니다');
+        loadDayLabor();
+    } catch(e) {
+        showToast(e.message || '승인 실패', 'error');
+    }
+}
+
+async function rejectDayLabor(id) {
+    const reason = prompt('거절 사유를 입력하세요:');
+    if (reason === null) return;
+    try {
+        await api('/day-labor/' + id + '/reject', { method: 'PUT', body: JSON.stringify({ reason }) });
+        showToast('거절되었습니다');
+        loadDayLabor();
+    } catch(e) {
+        showToast(e.message || '거절 실패', 'error');
+    }
+}
+
+async function completeDayLabor(id) {
+    if (!confirm('이 신청을 완료 처리하시겠습니까?')) return;
+    try {
+        await api('/day-labor/' + id + '/complete', { method: 'PUT' });
+        showToast('완료 처리되었습니다');
+        loadDayLabor();
+    } catch(e) {
+        showToast(e.message || '완료 처리 실패', 'error');
+    }
+}
+
+function initDayLaborPage() {
+    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 = firstDay.toISOString().substring(0, 10);
+    document.getElementById('filterDateTo').value = now.toISOString().substring(0, 10);
+    loadDayLabor();
+}

tkpurchase/web/static/js/tkpurchase-partner-portal.js

@@ -0,0 +1,241 @@
+/* tkpurchase-partner-portal.js - Partner portal logic */
+
+let portalSchedules = [];
+let portalCheckins = {};
+let partnerCompanyId = null;
+
+async function loadMySchedules() {
+    try {
+        const r = await api('/schedules/my');
+        portalSchedules = r.data || [];
+    } catch(e) {
+        console.warn('Load schedules error:', e);
+        portalSchedules = [];
+    }
+}
+
+async function loadMyCheckins() {
+    try {
+        const r = await api('/checkins/my');
+        const list = r.data || [];
+        portalCheckins = {};
+        list.forEach(c => {
+            if (c.schedule_id) portalCheckins[c.schedule_id] = c;
+        });
+    } catch(e) {
+        console.warn('Load checkins error:', e);
+        portalCheckins = {};
+    }
+}
+
+async function renderScheduleCards() {
+    await Promise.all([loadMySchedules(), loadMyCheckins()]);
+
+    const container = document.getElementById('scheduleCards');
+    const noMsg = document.getElementById('noScheduleMessage');
+
+    if (!portalSchedules.length) {
+        container.innerHTML = '';
+        noMsg.classList.remove('hidden');
+        return;
+    }
+
+    noMsg.classList.add('hidden');
+
+    container.innerHTML = portalSchedules.map(s => {
+        const checkin = portalCheckins[s.id];
+        const isCheckedIn = checkin && !checkin.check_out_at;
+        const isCheckedOut = checkin && checkin.check_out_at;
+        const hasReport = checkin && checkin.has_work_report;
+
+        // 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';
+
+        return `<div class="bg-white rounded-xl shadow-sm overflow-hidden">
+            <!-- 일정 정보 -->
+            <div class="p-5 border-b">
+                <div class="flex items-center justify-between mb-2">
+                    <h3 class="text-base font-semibold text-gray-800">${escapeHtml(s.workplace_name || '작업장 미지정')}</h3>
+                    <span class="text-xs text-gray-500">${formatDate(s.work_date)}</span>
+                </div>
+                ${s.work_description ? `<p class="text-sm text-gray-600 mb-2">${escapeHtml(s.work_description)}</p>` : ''}
+                <div class="flex gap-4 text-xs text-gray-500">
+                    <span><i class="fas fa-users mr-1"></i>예상 ${s.expected_workers || 0}명</span>
+                    ${s.notes ? `<span><i class="fas fa-sticky-note mr-1"></i>${escapeHtml(s.notes)}</span>` : ''}
+                </div>
+            </div>
+
+            <!-- 3-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}">
+                        <i class="fas ${checkin ? 'fa-check-circle' : 'fa-circle'}"></i>
+                        <span>1. 작업 시작</span>
+                    </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. 업무현황</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>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Step 1: 작업 시작 (체크인) -->
+            <div class="p-5 ${checkin ? 'bg-gray-50' : ''}">
+                ${!checkin ? `
+                <div id="checkinForm_${s.id}">
+                    <h4 class="text-sm font-semibold text-gray-700 mb-3"><i class="fas fa-play-circle text-emerald-500 mr-1"></i>작업 시작</h4>
+                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-3">
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 mb-1">실투입 인원 <span class="text-red-400">*</span></label>
+                            <input type="number" id="checkinWorkers_${s.id}" min="1" value="${s.expected_workers || 1}" 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="text" id="checkinNames_${s.id}" class="input-field w-full px-3 py-2 rounded-lg text-sm" placeholder="홍길동, 김철수">
+                        </div>
+                    </div>
+                    <button onclick="doCheckIn(${s.id})" class="px-4 py-2 bg-emerald-600 text-white rounded-lg text-sm hover:bg-emerald-700">
+                        <i class="fas fa-play mr-1"></i>작업 시작
+                    </button>
+                </div>
+                ` : `
+                <div class="text-sm text-emerald-600 mb-1">
+                    <i class="fas fa-check-circle mr-1"></i>체크인 완료 (${formatTime(checkin.check_in_at)})
+                    · ${checkin.actual_worker_count || 0}명
+                </div>
+                `}
+            </div>
+
+            <!-- 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 class="space-y-3">
+                    <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_${checkin.id}" min="0" value="${checkin.actual_worker_count || 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_${checkin.id}" min="0" max="100" value="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_${checkin.id}" rows="3" class="input-field w-full px-3 py-2 rounded-lg text-sm" placeholder="오늘 수행한 작업 내용"></textarea>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">이슈사항</label>
+                        <textarea id="reportIssues_${checkin.id}" rows="2" class="input-field w-full px-3 py-2 rounded-lg text-sm" placeholder="문제점이나 특이사항"></textarea>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">향후 계획</label>
+                        <textarea id="reportNextPlan_${checkin.id}" rows="2" class="input-field w-full px-3 py-2 rounded-lg text-sm" placeholder="다음 작업 계획"></textarea>
+                    </div>
+                    <div class="flex gap-2">
+                        <button onclick="submitWorkReport(${checkin.id}, ${s.id})" 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>업무현황 저장
+                        </button>
+                    </div>
+                </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>
+            ` : ''}
+
+            ${isCheckedOut ? `
+            <div class="p-5 border-t bg-gray-50">
+                <div class="text-sm text-blue-600">
+                    <i class="fas fa-check-double mr-1"></i>작업 종료 완료 (${formatTime(checkin.check_out_at)})
+                </div>
+                ${hasReport ? '<div class="text-xs text-emerald-600 mt-1"><i class="fas fa-clipboard-check mr-1"></i>업무현황 제출 완료</div>' : ''}
+            </div>
+            ` : ''}
+        </div>`;
+    }).join('');
+}
+
+async function doCheckIn(scheduleId) {
+    const workerCount = parseInt(document.getElementById('checkinWorkers_' + scheduleId).value) || 1;
+    const workerNames = document.getElementById('checkinNames_' + scheduleId).value.trim();
+
+    const body = {
+        schedule_id: scheduleId,
+        actual_worker_count: workerCount,
+        worker_names: workerNames || null
+    };
+
+    try {
+        await api('/checkins', { method: 'POST', body: JSON.stringify(body) });
+        showToast('체크인 완료');
+        renderScheduleCards();
+    } catch(e) {
+        showToast(e.message || '체크인 실패', 'error');
+    }
+}
+
+async function submitWorkReport(checkinId, scheduleId) {
+    const workContent = document.getElementById('reportContent_' + checkinId).value.trim();
+    if (!workContent) { showToast('작업내용을 입력하세요', 'error'); return; }
+
+    const body = {
+        checkin_id: checkinId,
+        schedule_id: scheduleId,
+        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
+    };
+
+    try {
+        await api('/work-reports', { method: 'POST', body: JSON.stringify(body) });
+        showToast('업무현황이 저장되었습니다');
+        renderScheduleCards();
+    } catch(e) {
+        showToast(e.message || '저장 실패', 'error');
+    }
+}
+
+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) {
+        location.href = '/';
+        return;
+    }
+
+    partnerCompanyId = decoded.partner_company_id;
+    document.getElementById('welcomeCompanyName').textContent = decoded.partner_company_name || decoded.name || '협력업체';
+
+    renderScheduleCards();
+}

tkpurchase/web/static/js/tkpurchase-schedule.js

@@ -0,0 +1,250 @@
+/* tkpurchase-schedule.js - Schedule management */
+
+let schedulePage = 1;
+const scheduleLimit = 20;
+let companySearchTimer = null;
+
+async function loadSchedules() {
+    const company = document.getElementById('filterCompany').value.trim();
+    const dateFrom = document.getElementById('filterDateFrom').value;
+    const dateTo = document.getElementById('filterDateTo').value;
+    const status = document.getElementById('filterStatus').value;
+
+    let query = `?page=${schedulePage}&limit=${scheduleLimit}`;
+    if (company) query += '&company=' + encodeURIComponent(company);
+    if (dateFrom) query += '&date_from=' + dateFrom;
+    if (dateTo) query += '&date_to=' + dateTo;
+    if (status) query += '&status=' + status;
+
+    try {
+        const r = await api('/schedules' + query);
+        renderScheduleTable(r.data || [], r.total || 0);
+    } catch(e) {
+        console.warn('Schedule load error:', e);
+        document.getElementById('scheduleTableBody').innerHTML = '<tr><td colspan="7" class="text-center text-red-400 py-8">로딩 실패</td></tr>';
+    }
+}
+
+function renderScheduleTable(list, total) {
+    const tbody = document.getElementById('scheduleTableBody');
+    if (!list.length) {
+        tbody.innerHTML = '<tr><td colspan="7" class="text-center text-gray-400 py-8">일정이 없습니다</td></tr>';
+        document.getElementById('schedulePagination').innerHTML = '';
+        return;
+    }
+
+    const statusMap = {
+        scheduled: ['badge-amber', '예정'],
+        in_progress: ['badge-green', '진행중'],
+        completed: ['badge-blue', '완료'],
+        cancelled: ['badge-gray', '취소']
+    };
+
+    tbody.innerHTML = list.map(s => {
+        const [cls, label] = statusMap[s.status] || ['badge-gray', s.status];
+        const canEdit = s.status === 'scheduled';
+        return `<tr>
+            <td class="font-medium">${escapeHtml(s.company_name || '')}</td>
+            <td>${formatDate(s.work_date)}</td>
+            <td class="max-w-xs truncate">${escapeHtml(s.work_description || '')}</td>
+            <td class="hide-mobile">${escapeHtml(s.workplace_name || '')}</td>
+            <td class="text-center">${s.expected_workers || 0}명</td>
+            <td><span class="badge ${cls}">${label}</span></td>
+            <td class="text-right">
+                ${canEdit ? `<button onclick="openEditSchedule(${s.id})" class="text-blue-600 hover:text-blue-800 text-xs mr-1" title="수정"><i class="fas fa-edit"></i></button>
+                <button onclick="deleteSchedule(${s.id})" class="text-red-500 hover:text-red-700 text-xs" title="삭제"><i class="fas fa-trash"></i></button>` : ''}
+            </td>
+        </tr>`;
+    }).join('');
+
+    // Pagination
+    const totalPages = Math.ceil(total / scheduleLimit);
+    renderSchedulePagination(totalPages);
+}
+
+function renderSchedulePagination(totalPages) {
+    const container = document.getElementById('schedulePagination');
+    if (totalPages <= 1) { container.innerHTML = ''; return; }
+
+    let html = '';
+    if (schedulePage > 1) {
+        html += `<button onclick="goToSchedulePage(${schedulePage - 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 === schedulePage) {
+            html += `<button class="px-3 py-1 bg-emerald-600 text-white rounded text-sm">${i}</button>`;
+        } else if (Math.abs(i - schedulePage) <= 2 || i === 1 || i === totalPages) {
+            html += `<button onclick="goToSchedulePage(${i})" class="px-3 py-1 border rounded text-sm hover:bg-gray-50">${i}</button>`;
+        } else if (Math.abs(i - schedulePage) === 3) {
+            html += '<span class="text-gray-400">...</span>';
+        }
+    }
+    if (schedulePage < totalPages) {
+        html += `<button onclick="goToSchedulePage(${schedulePage + 1})" class="px-3 py-1 border rounded text-sm hover:bg-gray-50">&raquo;</button>`;
+    }
+    container.innerHTML = html;
+}
+
+function goToSchedulePage(p) {
+    schedulePage = p;
+    loadSchedules();
+}
+
+/* ===== Company Autocomplete ===== */
+function setupCompanyAutocomplete(inputId, dropdownId, hiddenId) {
+    const input = document.getElementById(inputId);
+    const dropdown = document.getElementById(dropdownId);
+    const hidden = document.getElementById(hiddenId);
+
+    input.addEventListener('input', function() {
+        hidden.value = '';
+        clearTimeout(companySearchTimer);
+        const q = this.value.trim();
+        if (q.length < 1) { dropdown.classList.add('hidden'); return; }
+        companySearchTimer = setTimeout(async () => {
+            try {
+                const r = await api('/partners/search?q=' + encodeURIComponent(q));
+                const list = r.data || [];
+                if (!list.length) {
+                    dropdown.innerHTML = '<div class="px-3 py-2 text-sm text-gray-400">결과 없음</div>';
+                } else {
+                    dropdown.innerHTML = list.map(c =>
+                        `<div class="px-3 py-2 text-sm hover:bg-emerald-50 cursor-pointer" onclick="selectCompany('${inputId}','${hiddenId}','${dropdownId}',${c.id},'${escapeHtml(c.name)}')">${escapeHtml(c.name)}</div>`
+                    ).join('');
+                }
+                dropdown.classList.remove('hidden');
+            } catch(e) {
+                dropdown.classList.add('hidden');
+            }
+        }, 300);
+    });
+
+    input.addEventListener('blur', function() {
+        setTimeout(() => dropdown.classList.add('hidden'), 200);
+    });
+}
+
+function selectCompany(inputId, hiddenId, dropdownId, id, name) {
+    document.getElementById(inputId).value = name;
+    document.getElementById(hiddenId).value = id;
+    document.getElementById(dropdownId).classList.add('hidden');
+}
+
+/* ===== Add Schedule ===== */
+function openAddSchedule() {
+    document.getElementById('addScheduleForm').reset();
+    document.getElementById('addCompanyId').value = '';
+    const tomorrow = new Date();
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    document.getElementById('addWorkDate').value = tomorrow.toISOString().substring(0, 10);
+    document.getElementById('addScheduleModal').classList.remove('hidden');
+}
+
+function closeAddSchedule() {
+    document.getElementById('addScheduleModal').classList.add('hidden');
+}
+
+async function submitAddSchedule(e) {
+    e.preventDefault();
+    const companyId = document.getElementById('addCompanyId').value;
+    if (!companyId) { showToast('업체를 선택하세요', 'error'); return; }
+
+    const body = {
+        partner_company_id: parseInt(companyId),
+        work_date: document.getElementById('addWorkDate').value,
+        work_description: document.getElementById('addWorkDescription').value.trim(),
+        workplace_name: document.getElementById('addWorkplaceName').value.trim(),
+        expected_workers: parseInt(document.getElementById('addExpectedWorkers').value) || 0,
+        notes: document.getElementById('addNotes').value.trim()
+    };
+
+    try {
+        await api('/schedules', { method: 'POST', body: JSON.stringify(body) });
+        showToast('일정이 등록되었습니다');
+        closeAddSchedule();
+        loadSchedules();
+    } catch(e) {
+        showToast(e.message || '등록 실패', 'error');
+    }
+}
+
+/* ===== Edit Schedule ===== */
+let scheduleCache = {};
+
+async function openEditSchedule(id) {
+    try {
+        const r = await api('/schedules/' + id);
+        const s = r.data || r;
+        scheduleCache[id] = s;
+
+        document.getElementById('editScheduleId').value = id;
+        document.getElementById('editCompanySearch').value = s.company_name || '';
+        document.getElementById('editCompanyId').value = s.partner_company_id || '';
+        document.getElementById('editWorkDate').value = formatDate(s.work_date);
+        document.getElementById('editWorkDescription').value = s.work_description || '';
+        document.getElementById('editWorkplaceName').value = s.workplace_name || '';
+        document.getElementById('editExpectedWorkers').value = s.expected_workers || 0;
+        document.getElementById('editNotes').value = s.notes || '';
+        document.getElementById('editScheduleModal').classList.remove('hidden');
+    } catch(e) {
+        showToast('일정 정보를 불러올 수 없습니다', 'error');
+    }
+}
+
+function closeEditSchedule() {
+    document.getElementById('editScheduleModal').classList.add('hidden');
+}
+
+async function submitEditSchedule(e) {
+    e.preventDefault();
+    const id = document.getElementById('editScheduleId').value;
+    const companyId = document.getElementById('editCompanyId').value;
+    if (!companyId) { showToast('업체를 선택하세요', 'error'); return; }
+
+    const body = {
+        partner_company_id: parseInt(companyId),
+        work_date: document.getElementById('editWorkDate').value,
+        work_description: document.getElementById('editWorkDescription').value.trim(),
+        workplace_name: document.getElementById('editWorkplaceName').value.trim(),
+        expected_workers: parseInt(document.getElementById('editExpectedWorkers').value) || 0,
+        notes: document.getElementById('editNotes').value.trim()
+    };
+
+    try {
+        await api('/schedules/' + id, { method: 'PUT', body: JSON.stringify(body) });
+        showToast('일정이 수정되었습니다');
+        closeEditSchedule();
+        loadSchedules();
+    } catch(e) {
+        showToast(e.message || '수정 실패', 'error');
+    }
+}
+
+/* ===== Delete Schedule ===== */
+async function deleteSchedule(id) {
+    if (!confirm('이 일정을 삭제하시겠습니까?')) return;
+    try {
+        await api('/schedules/' + id, { method: 'DELETE' });
+        showToast('일정이 삭제되었습니다');
+        loadSchedules();
+    } catch(e) {
+        showToast(e.message || '삭제 실패', 'error');
+    }
+}
+
+/* ===== Init ===== */
+function initSchedulePage() {
+    if (!initAuth()) return;
+    // Set default date range
+    const now = new Date();
+    const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
+    const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+    document.getElementById('filterDateFrom').value = firstDay.toISOString().substring(0, 10);
+    document.getElementById('filterDateTo').value = lastDay.toISOString().substring(0, 10);
+
+    // Setup autocomplete for both modals
+    setupCompanyAutocomplete('addCompanySearch', 'addCompanyDropdown', 'addCompanyId');
+    setupCompanyAutocomplete('editCompanySearch', 'editCompanyDropdown', 'editCompanyId');
+
+    loadSchedules();
+}

tkpurchase/web/static/js/tkpurchase-workreport.js

@@ -0,0 +1,199 @@
+/* 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.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="8" 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="8" class="text-center text-gray-400 py-8">업무현황이 없습니다</td></tr>';
+        document.getElementById('reportPagination').innerHTML = '';
+        return;
+    }
+
+    tbody.innerHTML = list.map(r => {
+        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>'
+            : '<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="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>
+            </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';
+
+        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>
+                <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) : '<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>` : ''}
+            </div>
+            ${!d.confirmed_at ? `<div class="mt-4 flex justify-end">
+                <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>
+            </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');
+}
+
+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 = firstDay.toISOString().substring(0, 10);
+    document.getElementById('filterDateTo').value = now.toISOString().substring(0, 10);
+
+    loadCompaniesForFilter();
+    loadReports();
+}