tk-factory-services/system1-factory/web/static/js/purchase-analysis.js

/* ===== 구매 분석 페이지 ===== */
const CAT_LABELS = { consumable: '소모품', safety: '안전용품', repair: '수선비', equipment: '설비' };
const CAT_ICONS = { consumable: 'fa-box', safety: 'fa-hard-hat', repair: 'fa-wrench', equipment: 'fa-cogs' };
const CAT_BG = { consumable: 'bg-blue-50 text-blue-700', safety: 'bg-green-50 text-green-700', repair: 'bg-amber-50 text-amber-700', equipment: 'bg-purple-50 text-purple-700' };

let currentYearMonth = '';

async function loadAnalysis() {
    currentYearMonth = document.getElementById('paMonth').value;
    if (!currentYearMonth) { showToast('월을 선택해주세요.', 'error'); return; }

    try {
        const [summaryRes, purchasesRes, priceChangesRes] = await Promise.all([
            api(`/settlements/summary?year_month=${currentYearMonth}`),
            api(`/settlements/purchases?year_month=${currentYearMonth}`),
            api(`/settlements/price-changes?year_month=${currentYearMonth}`)
        ]);

        renderCategorySummary(summaryRes.data?.categorySummary || []);
        renderVendorSummary(summaryRes.data?.vendorSummary || []);
        renderPurchaseList(purchasesRes.data || []);
        renderPriceChanges(priceChangesRes.data || []);
    } catch (e) {
        showToast('데이터 로드 실패: ' + e.message, 'error');
    }
}

function renderCategorySummary(data) {
    const el = document.getElementById('paCategorySummary');
    const allCategories = ['consumable', 'safety', 'repair', 'equipment'];
    const dataMap = {};
    data.forEach(d => { dataMap[d.category] = d; });

    const totalAmount = data.reduce((sum, d) => sum + Number(d.total_amount || 0), 0);

    el.innerHTML = allCategories.map(cat => {
        const d = dataMap[cat] || { count: 0, total_amount: 0 };
        const label = CAT_LABELS[cat];
        const icon = CAT_ICONS[cat];
        const bg = CAT_BG[cat];
        return `<div class="bg-white rounded-xl shadow-sm p-4">
            <div class="flex items-center gap-2 mb-2">
                <div class="w-8 h-8 rounded-lg ${bg} flex items-center justify-center"><i class="fas ${icon} text-sm"></i></div>
                <span class="text-sm font-medium text-gray-700">${label}</span>
            </div>
            <div class="text-xl font-bold text-gray-800">${Number(d.total_amount || 0).toLocaleString()}<span class="text-xs font-normal text-gray-400 ml-1">원</span></div>
            <div class="text-xs text-gray-500 mt-1">${d.count || 0}건</div>
        </div>`;
    }).join('') + `
        <div class="col-span-2 lg:col-span-4 bg-orange-50 rounded-xl p-3 text-center">
            <span class="text-sm text-orange-700 font-semibold">월 합계: ${totalAmount.toLocaleString()}원</span>
        </div>`;
}

function renderVendorSummary(data) {
    const tbody = document.getElementById('paVendorSummary');
    if (!data.length) {
        tbody.innerHTML = '<tr><td colspan="5" class="px-4 py-8 text-center text-gray-400">해당 월 구매 내역이 없습니다.</td></tr>';
        return;
    }
    tbody.innerHTML = data.map(v => {
        const isCompleted = v.settlement_status === 'completed';
        const statusBadge = isCompleted
            ? '<span class="badge badge-green">정산완료</span>'
            : '<span class="badge badge-gray">미정산</span>';
        const vendorName = v.vendor_name || '(업체 미지정)';
        const vendorId = v.vendor_id || 0;

        let actionBtn = '';
        if (vendorId > 0) {
            if (isCompleted) {
                actionBtn = `<button onclick="cancelSettlement(${vendorId})" class="px-3 py-1 border border-gray-300 rounded text-xs text-gray-600 hover:bg-gray-50">정산 취소</button>`;
            } else {
                actionBtn = `<button onclick="completeSettlement(${vendorId})" class="px-3 py-1 bg-green-500 text-white rounded text-xs hover:bg-green-600">정산완료</button>`;
            }
        }

        return `<tr class="hover:bg-gray-50">
            <td class="px-4 py-3 font-medium text-gray-800">${escapeHtml(vendorName)}</td>
            <td class="px-4 py-3 text-right">${v.count}건</td>
            <td class="px-4 py-3 text-right font-medium">${Number(v.total_amount || 0).toLocaleString()}원</td>
            <td class="px-4 py-3 text-center">${statusBadge}</td>
            <td class="px-4 py-3 text-center">${actionBtn}</td>
        </tr>`;
    }).join('');
}

function renderPurchaseList(data) {
    const tbody = document.getElementById('paPurchaseList');
    if (!data.length) {
        tbody.innerHTML = '<tr><td colspan="8" class="px-4 py-8 text-center text-gray-400">해당 월 구매 내역이 없습니다.</td></tr>';
        return;
    }
    tbody.innerHTML = data.map(p => {
        const catLabel = CAT_LABELS[p.category] || p.category;
        const catColor = CAT_BG[p.category] || '';
        const subtotal = (p.quantity || 0) * (p.unit_price || 0);
        const basePrice = Number(p.base_price || 0);
        const unitPrice = Number(p.unit_price || 0);
        const hasPriceDiff = basePrice > 0 && unitPrice > 0 && basePrice !== unitPrice;
        const priceDiffClass = hasPriceDiff ? (unitPrice > basePrice ? 'text-red-600 font-semibold' : 'text-blue-600 font-semibold') : '';

        return `<tr class="hover:bg-gray-50 ${hasPriceDiff ? 'bg-yellow-50' : ''}">
            <td class="px-4 py-3">
                <div class="font-medium text-gray-800">${escapeHtml(p.item_name)}${p.spec ? ' <span class="text-gray-400">[' + escapeHtml(p.spec) + ']</span>' : ''}</div>
                <div class="text-xs text-gray-500">${escapeHtml(p.maker || '')}</div>
            </td>
            <td class="px-4 py-3"><span class="px-1.5 py-0.5 rounded text-xs ${catColor}">${catLabel}</span></td>
            <td class="px-4 py-3 text-right">${p.quantity}</td>
            <td class="px-4 py-3 text-right ${priceDiffClass}">${unitPrice.toLocaleString()}원${hasPriceDiff ? `<div class="text-xs text-gray-400">(기준: ${basePrice.toLocaleString()})</div>` : ''}</td>
            <td class="px-4 py-3 text-right font-medium">${subtotal.toLocaleString()}원</td>
            <td class="px-4 py-3 text-gray-600">${escapeHtml(p.vendor_name || '-')}</td>
            <td class="px-4 py-3 text-gray-600">${formatDate(p.purchase_date)}</td>
            <td class="px-4 py-3 text-gray-500 text-xs">${escapeHtml(p.notes || '')}</td>
        </tr>`;
    }).join('');
}

function renderPriceChanges(data) {
    const el = document.getElementById('paPriceChanges');
    if (!data.length) {
        el.innerHTML = '<p class="text-gray-400 text-center py-4 text-sm">가격 변동 항목이 없습니다.</p>';
        return;
    }
    el.innerHTML = `<table class="w-full text-sm">
        <thead class="bg-gray-50 text-gray-600 text-xs uppercase">
            <tr>
                <th class="px-4 py-3 text-left">품목</th>
                <th class="px-4 py-3 text-right">기준가</th>
                <th class="px-4 py-3 text-right">실구매가</th>
                <th class="px-4 py-3 text-right">차이</th>
                <th class="px-4 py-3 text-left">업체</th>
                <th class="px-4 py-3 text-left">구매일</th>
            </tr>
        </thead>
        <tbody class="divide-y">${data.map(p => {
            const diff = Number(p.unit_price) - Number(p.base_price);
            const arrow = diff > 0 ? '&#9650;' : '&#9660;';
            const color = diff > 0 ? 'text-red-600' : 'text-blue-600';
            return `<tr class="hover:bg-gray-50">
                <td class="px-4 py-3">${escapeHtml(p.item_name)}${p.spec ? ' [' + escapeHtml(p.spec) + ']' : ''} ${p.maker ? '(' + escapeHtml(p.maker) + ')' : ''}</td>
                <td class="px-4 py-3 text-right">${Number(p.base_price).toLocaleString()}원</td>
                <td class="px-4 py-3 text-right font-medium ${color}">${Number(p.unit_price).toLocaleString()}원</td>
                <td class="px-4 py-3 text-right ${color}">${arrow} ${Math.abs(diff).toLocaleString()}원</td>
                <td class="px-4 py-3 text-gray-600">${escapeHtml(p.vendor_name || '-')}</td>
                <td class="px-4 py-3 text-gray-600">${formatDate(p.purchase_date)}</td>
            </tr>`;
        }).join('')}</tbody>
    </table>`;
}

/* ===== 정산 처리 ===== */
async function completeSettlement(vendorId) {
    if (!confirm('이 업체의 정산을 완료 처리하시겠습니까?')) return;
    try {
        await api('/settlements/complete', {
            method: 'POST',
            body: JSON.stringify({ year_month: currentYearMonth, vendor_id: vendorId })
        });
        showToast('정산 완료 처리되었습니다.');
        await loadAnalysis();
    } catch (e) { showToast(e.message, 'error'); }
}

async function cancelSettlement(vendorId) {
    if (!confirm('정산 완료를 취소하시겠습니까?')) return;
    try {
        await api('/settlements/cancel', {
            method: 'POST',
            body: JSON.stringify({ year_month: currentYearMonth, vendor_id: vendorId })
        });
        showToast('정산이 취소되었습니다.');
        await loadAnalysis();
    } catch (e) { showToast(e.message, 'error'); }
}

/* ===== Init ===== */
(async function() {
    if (!await initAuth()) return;
    // 기본값: 현재 월
    const now = new Date();
    document.getElementById('paMonth').value = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
})();