feat(purchase): 생산소모품 구매 관리 시스템 구현

tkuser: 업체(공급업체) CRUD + 소모품 마스터 CRUD (사진 업로드 포함)
tkfb: 구매신청 → 구매 처리 → 월간 분석/정산 전체 워크플로
설비(equipment) 분류 구매 시 자동 등록 + 실패 시 admin 알림

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

user-management/web/index.html

@@ -64,6 +64,12 @@
                 <button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" onclick="switchTab('partners')">
                     <i class="fas fa-truck mr-2"></i>협력업체
                 </button>
+                <button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" onclick="switchTab('vendors')">
+                    <i class="fas fa-store mr-2"></i>업체
+                </button>
+                <button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" onclick="switchTab('consumables')">
+                    <i class="fas fa-box-open mr-2"></i>소모품
+                </button>
                 <button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" onclick="switchTab('notificationRecipients')">
                     <i class="fas fa-bell mr-2"></i>알림 수신자
                 </button>
@@ -1482,6 +1488,70 @@
             </div>
         </div>
 
+        <!-- ============ 업체(공급업체) 탭 ============ -->
+        <div id="tab-vendors" class="hidden">
+            <div class="grid lg:grid-cols-5 gap-6">
+                <!-- 업체 목록 -->
+                <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <h2 class="text-base font-semibold text-gray-800"><i class="fas fa-store text-indigo-500 mr-2"></i>업체 (공급업체)</h2>
+                        <button id="btnAddVendorTkuser" onclick="openAddVendorTkuser()" class="hidden px-3 py-1.5 bg-slate-700 text-white rounded-lg text-xs hover:bg-slate-800">
+                            <i class="fas fa-plus mr-1"></i>업체 등록
+                        </button>
+                    </div>
+                    <div class="flex gap-2 mb-3">
+                        <input type="text" id="vendorSearchTkuser" class="input-field flex-1 px-3 py-1.5 rounded-lg text-sm" placeholder="업체명/사업자번호/담당자 검색">
+                        <select id="vendorFilterActiveTkuser" class="input-field px-2 py-1.5 rounded-lg text-sm">
+                            <option value="true">활성</option>
+                            <option value="">전체</option>
+                            <option value="false">비활성</option>
+                        </select>
+                    </div>
+                    <div id="vendorsListTkuser" class="space-y-2 max-h-[65vh] overflow-y-auto">
+                        <p class="text-gray-400 text-center py-4 text-sm">탭을 선택하면 데이터를 불러옵니다.</p>
+                    </div>
+                </div>
+                <!-- 업체 상세 -->
+                <div class="lg:col-span-3">
+                    <div id="vendorDetailTkuser" class="hidden"></div>
+                    <div id="vendorEmptyTkuser" class="text-center text-gray-400 py-16">
+                        <i class="fas fa-store text-4xl mb-3"></i>
+                        <p>업체를 선택하면 상세 정보를 볼 수 있습니다</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- ============ 소모품 탭 ============ -->
+        <div id="tab-consumables" class="hidden">
+            <div class="bg-white rounded-xl shadow-sm p-5">
+                <div class="flex items-center justify-between mb-4">
+                    <h2 class="text-base font-semibold text-gray-800"><i class="fas fa-box-open text-teal-500 mr-2"></i>소모품 마스터</h2>
+                    <button id="btnAddConsumableTkuser" onclick="openAddConsumableTkuser()" class="hidden px-3 py-1.5 bg-slate-700 text-white rounded-lg text-xs hover:bg-slate-800">
+                        <i class="fas fa-plus mr-1"></i>소모품 등록
+                    </button>
+                </div>
+                <div class="flex gap-2 mb-4 flex-wrap">
+                    <input type="text" id="consumableSearchTkuser" class="input-field flex-1 min-w-[160px] px-3 py-1.5 rounded-lg text-sm" placeholder="품명/메이커 검색">
+                    <select id="consumableFilterCategoryTkuser" class="input-field px-2 py-1.5 rounded-lg text-sm">
+                        <option value="">전체 분류</option>
+                        <option value="consumable">소모품</option>
+                        <option value="safety">안전용품</option>
+                        <option value="repair">수선비</option>
+                        <option value="equipment">설비</option>
+                    </select>
+                    <select id="consumableFilterActiveTkuser" class="input-field px-2 py-1.5 rounded-lg text-sm">
+                        <option value="true">활성</option>
+                        <option value="">전체</option>
+                        <option value="false">비활성</option>
+                    </select>
+                </div>
+                <div id="consumablesListTkuser">
+                    <p class="text-gray-400 text-center py-4 text-sm">탭을 선택하면 데이터를 불러옵니다.</p>
+                </div>
+            </div>
+        </div>
+
         <!-- ============ 알림 수신자 탭 ============ -->
         <div id="tab-notificationRecipients" class="hidden">
             <div class="mb-4">
@@ -1713,6 +1783,213 @@
         </div>
     </div>
 
+    <!-- 업체 등록 모달 -->
+    <div id="addVendorModalTkuser" class="hidden fixed inset-0 bg-black bg-opacity-40 z-50 flex items-center justify-center p-4" onclick="if(event.target===this)closeAddVendorTkuser()">
+        <div class="bg-white rounded-xl shadow-xl max-w-lg w-full p-6">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-semibold">업체 등록</h3>
+                <button onclick="closeAddVendorTkuser()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
+            </div>
+            <form id="addVendorFormTkuser">
+                <div class="grid grid-cols-2 gap-3">
+                    <div class="col-span-2">
+                        <label class="block text-xs font-medium text-gray-600 mb-1">업체명 <span class="text-red-400">*</span></label>
+                        <input type="text" id="newVendorNameTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">사업자번호</label>
+                        <input type="text" id="newVendorBizNumTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" placeholder="000-00-00000">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">대표자</label>
+                        <input type="text" id="newVendorRepTkuser" 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="newVendorContactNameTkuser" 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="newVendorContactPhoneTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                    <div class="col-span-2">
+                        <label class="block text-xs font-medium text-gray-600 mb-1">주소</label>
+                        <input type="text" id="newVendorAddressTkuser" 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="newVendorBankNameTkuser" 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="newVendorBankAccountTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                    <div class="col-span-2">
+                        <label class="block text-xs font-medium text-gray-600 mb-1">비고</label>
+                        <input type="text" id="newVendorNotesTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                </div>
+                <div class="flex justify-end mt-4 gap-2">
+                    <button type="button" onclick="closeAddVendorTkuser()" class="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50">취소</button>
+                    <button type="submit" class="px-4 py-2 bg-slate-700 text-white rounded-lg text-sm hover:bg-slate-800">등록</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- 업체 수정 모달 -->
+    <div id="editVendorModalTkuser" class="hidden fixed inset-0 bg-black bg-opacity-40 z-50 flex items-center justify-center p-4" onclick="if(event.target===this)closeEditVendorTkuser()">
+        <div class="bg-white rounded-xl shadow-xl max-w-lg w-full p-6">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-semibold">업체 수정</h3>
+                <button onclick="closeEditVendorTkuser()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
+            </div>
+            <form id="editVendorFormTkuser">
+                <input type="hidden" id="editVendorIdTkuser">
+                <div class="grid grid-cols-2 gap-3">
+                    <div class="col-span-2">
+                        <label class="block text-xs font-medium text-gray-600 mb-1">업체명 <span class="text-red-400">*</span></label>
+                        <input type="text" id="editVendorNameTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">사업자번호</label>
+                        <input type="text" id="editVendorBizNumTkuser" 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="editVendorRepTkuser" 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="editVendorContactNameTkuser" 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="editVendorContactPhoneTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                    <div class="col-span-2">
+                        <label class="block text-xs font-medium text-gray-600 mb-1">주소</label>
+                        <input type="text" id="editVendorAddressTkuser" 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="editVendorBankNameTkuser" 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="editVendorBankAccountTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                    <div class="col-span-2">
+                        <label class="block text-xs font-medium text-gray-600 mb-1">비고</label>
+                        <input type="text" id="editVendorNotesTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                </div>
+                <div class="flex justify-end mt-4 gap-2">
+                    <button type="button" onclick="closeEditVendorTkuser()" class="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50">취소</button>
+                    <button type="submit" class="px-4 py-2 bg-slate-700 text-white rounded-lg text-sm hover:bg-slate-800">저장</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- 소모품 등록 모달 -->
+    <div id="addConsumableModalTkuser" class="hidden fixed inset-0 bg-black bg-opacity-40 z-50 flex items-center justify-center p-4" onclick="if(event.target===this)closeAddConsumableTkuser()">
+        <div class="bg-white rounded-xl shadow-xl max-w-lg w-full p-6">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-semibold">소모품 등록</h3>
+                <button onclick="closeAddConsumableTkuser()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
+            </div>
+            <form id="addConsumableFormTkuser">
+                <div class="grid grid-cols-2 gap-3">
+                    <div class="col-span-2">
+                        <label class="block text-xs font-medium text-gray-600 mb-1">품명 <span class="text-red-400">*</span></label>
+                        <input type="text" id="newConsumableNameTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">메이커</label>
+                        <input type="text" id="newConsumableMakerTkuser" 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">분류 <span class="text-red-400">*</span></label>
+                        <select id="newConsumableCategoryTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
+                            <option value="">선택</option>
+                            <option value="consumable">소모품</option>
+                            <option value="safety">안전용품</option>
+                            <option value="repair">수선비</option>
+                            <option value="equipment">설비</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">기준가격</label>
+                        <input type="number" id="newConsumablePriceTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" min="0">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">단위</label>
+                        <input type="text" id="newConsumableUnitTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" value="EA">
+                    </div>
+                    <div class="col-span-2">
+                        <label class="block text-xs font-medium text-gray-600 mb-1">사진</label>
+                        <input type="file" id="newConsumablePhotoTkuser" accept="image/jpeg,image/png,image/webp" onchange="previewAddConsumablePhoto()" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                        <div id="addConsumablePhotoPreviewTkuser" class="mt-2"></div>
+                    </div>
+                </div>
+                <div class="flex justify-end mt-4 gap-2">
+                    <button type="button" onclick="closeAddConsumableTkuser()" class="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50">취소</button>
+                    <button type="submit" class="px-4 py-2 bg-slate-700 text-white rounded-lg text-sm hover:bg-slate-800">등록</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- 소모품 수정 모달 -->
+    <div id="editConsumableModalTkuser" class="hidden fixed inset-0 bg-black bg-opacity-40 z-50 flex items-center justify-center p-4" onclick="if(event.target===this)closeEditConsumableTkuser()">
+        <div class="bg-white rounded-xl shadow-xl max-w-lg w-full p-6">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-semibold">소모품 수정</h3>
+                <button onclick="closeEditConsumableTkuser()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
+            </div>
+            <form id="editConsumableFormTkuser">
+                <input type="hidden" id="editConsumableIdTkuser">
+                <div class="grid grid-cols-2 gap-3">
+                    <div class="col-span-2">
+                        <label class="block text-xs font-medium text-gray-600 mb-1">품명 <span class="text-red-400">*</span></label>
+                        <input type="text" id="editConsumableNameTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">메이커</label>
+                        <input type="text" id="editConsumableMakerTkuser" 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">분류 <span class="text-red-400">*</span></label>
+                        <select id="editConsumableCategoryTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
+                            <option value="consumable">소모품</option>
+                            <option value="safety">안전용품</option>
+                            <option value="repair">수선비</option>
+                            <option value="equipment">설비</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">기준가격</label>
+                        <input type="number" id="editConsumablePriceTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm" min="0">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">단위</label>
+                        <input type="text" id="editConsumableUnitTkuser" class="input-field w-full px-3 py-2 rounded-lg text-sm">
+                    </div>
+                    <div class="col-span-2">
+                        <label class="block text-xs font-medium text-gray-600 mb-1">사진</label>
+                        <input type="file" id="editConsumablePhotoTkuser" accept="image/jpeg,image/png,image/webp" onchange="previewEditConsumablePhoto()" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                        <div id="editConsumablePhotoPreviewTkuser" class="mt-2"></div>
+                    </div>
+                </div>
+                <div class="flex justify-end mt-4 gap-2">
+                    <button type="button" onclick="closeEditConsumableTkuser()" class="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50">취소</button>
+                    <button type="submit" class="px-4 py-2 bg-slate-700 text-white rounded-lg text-sm hover:bg-slate-800">저장</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
     <!-- 사진 확대 모달 -->
     <div id="photoViewModal" class="fixed inset-0 bg-black bg-opacity-80 hidden z-[60] flex items-center justify-center p-4 cursor-pointer" onclick="this.classList.add('hidden')">
         <img id="photoViewImage" class="max-w-full max-h-[90vh] rounded-lg shadow-2xl">
@@ -1732,6 +2009,8 @@
     <script src="/static/js/tkuser-vacations.js?v=20260224"></script>
     <script src="/static/js/tkuser-layout-map.js?v=20260305"></script>
     <script src="/static/js/tkuser-partners.js?v=20260312"></script>
+    <script src="/static/js/tkuser-vendors.js?v=20260313"></script>
+    <script src="/static/js/tkuser-consumables.js?v=20260313"></script>
     <script src="/static/js/tkuser-notificationRecipients.js?v=20260313b"></script>
     <!-- Boot -->
     <script>init();</script>

user-management/web/static/js/tkuser-consumables.js

@@ -0,0 +1,205 @@
+/* ===== tkuser 소모품 마스터 CRUD ===== */
+let consumablesLoaded = false;
+let consumablesList = [];
+
+const CONSUMABLE_CATEGORIES = {
+    consumable: '소모품',
+    safety: '안전용품',
+    repair: '수선비',
+    equipment: '설비'
+};
+const CONSUMABLE_CAT_COLORS = {
+    consumable: 'bg-blue-50 text-blue-600',
+    safety: 'bg-green-50 text-green-600',
+    repair: 'bg-amber-50 text-amber-600',
+    equipment: 'bg-purple-50 text-purple-600'
+};
+
+async function loadConsumablesTab() {
+    if (consumablesLoaded) return;
+    consumablesLoaded = true;
+    if (currentUser && ['admin', 'system'].includes(currentUser.role)) {
+        document.getElementById('btnAddConsumableTkuser')?.classList.remove('hidden');
+    }
+    await loadConsumablesList();
+}
+
+async function loadConsumablesList() {
+    try {
+        const category = document.getElementById('consumableFilterCategoryTkuser')?.value || '';
+        const isActive = document.getElementById('consumableFilterActiveTkuser')?.value;
+        const search = document.getElementById('consumableSearchTkuser')?.value?.trim() || '';
+        const params = new URLSearchParams();
+        if (category) params.set('category', category);
+        if (isActive !== '' && isActive !== undefined) params.set('is_active', isActive);
+        if (search) params.set('search', search);
+        const r = await api('/consumable-items?' + params.toString());
+        consumablesList = r.data || [];
+        renderConsumablesListTkuser();
+    } catch (e) {
+        document.getElementById('consumablesListTkuser').innerHTML = `<div class="text-red-500 text-center py-6"><i class="fas fa-exclamation-triangle text-xl"></i><p class="text-sm mt-2">${e.message}</p></div>`;
+    }
+}
+
+function renderConsumablesListTkuser() {
+    const c = document.getElementById('consumablesListTkuser');
+    if (!consumablesList.length) {
+        c.innerHTML = '<p class="text-gray-400 text-center py-4 text-sm">등록된 소모품이 없습니다.</p>';
+        return;
+    }
+    const isAdmin = currentUser && ['admin', 'system'].includes(currentUser.role);
+    c.innerHTML = `<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">` +
+        consumablesList.map(item => {
+            const catLabel = CONSUMABLE_CATEGORIES[item.category] || item.category;
+            const catColor = CONSUMABLE_CAT_COLORS[item.category] || 'bg-gray-50 text-gray-600';
+            const price = item.base_price ? Number(item.base_price).toLocaleString() + '원' : '-';
+            return `<div class="bg-white border rounded-lg p-3 hover:shadow-md transition-shadow">
+                <div class="flex gap-3">
+                    ${item.photo_path
+                        ? `<img src="${item.photo_path}" class="w-16 h-16 rounded object-cover flex-shrink-0 cursor-pointer" onclick="document.getElementById('photoViewImage').src=this.src; document.getElementById('photoViewModal').classList.remove('hidden');" onerror="this.style.display='none'">`
+                        : `<div class="w-16 h-16 rounded bg-gray-100 flex items-center justify-center flex-shrink-0"><i class="fas fa-box text-gray-300 text-xl"></i></div>`}
+                    <div class="flex-1 min-w-0">
+                        <div class="text-sm font-medium text-gray-800 truncate">${escHtml(item.item_name)}</div>
+                        <div class="text-xs text-gray-500 mt-0.5">${escHtml(item.maker) || '-'}</div>
+                        <div class="flex items-center gap-2 mt-1">
+                            <span class="px-1.5 py-0.5 rounded text-xs ${catColor}">${catLabel}</span>
+                            <span class="text-xs text-gray-600 font-medium">${price}</span>
+                            <span class="text-xs text-gray-400">${escHtml(item.unit) || 'EA'}</span>
+                        </div>
+                        ${!item.is_active ? '<span class="px-1.5 py-0.5 rounded text-xs bg-gray-100 text-gray-400 mt-1 inline-block">비활성</span>' : ''}
+                    </div>
+                </div>
+                ${isAdmin ? `<div class="flex justify-end gap-1 mt-2 pt-2 border-t">
+                    <button onclick="openEditConsumableTkuser(${item.item_id})" class="px-2 py-1 text-slate-500 hover:text-slate-700 hover:bg-slate-100 rounded text-xs"><i class="fas fa-pen mr-1"></i>수정</button>
+                    ${item.is_active ? `<button onclick="deactivateConsumableTkuser(${item.item_id}, '${escHtml(item.item_name).replace(/'/g, "\\'")}')" class="px-2 py-1 text-red-400 hover:text-red-600 hover:bg-red-50 rounded text-xs"><i class="fas fa-ban mr-1"></i>비활성화</button>` : ''}
+                </div>` : ''}
+            </div>`;
+        }).join('') + `</div>`;
+}
+
+/* ===== 소모품 등록 ===== */
+function openAddConsumableTkuser() {
+    document.getElementById('addConsumablePhotoPreviewTkuser').innerHTML = '';
+    document.getElementById('addConsumableModalTkuser').classList.remove('hidden');
+}
+function closeAddConsumableTkuser() { document.getElementById('addConsumableModalTkuser').classList.add('hidden'); document.getElementById('addConsumableFormTkuser').reset(); document.getElementById('addConsumablePhotoPreviewTkuser').innerHTML = ''; }
+
+function previewAddConsumablePhoto() {
+    const file = document.getElementById('newConsumablePhotoTkuser').files[0];
+    const preview = document.getElementById('addConsumablePhotoPreviewTkuser');
+    if (!file) { preview.innerHTML = ''; return; }
+    const reader = new FileReader();
+    reader.onload = e => { preview.innerHTML = `<img src="${e.target.result}" class="w-20 h-20 rounded object-cover">`; };
+    reader.readAsDataURL(file);
+}
+
+async function submitAddConsumableTkuser(e) {
+    e.preventDefault();
+    const itemName = document.getElementById('newConsumableNameTkuser').value.trim();
+    const category = document.getElementById('newConsumableCategoryTkuser').value;
+    if (!itemName) { showToast('품명은 필수입니다', 'error'); return; }
+    if (!category) { showToast('분류는 필수입니다', 'error'); return; }
+
+    const fd = new FormData();
+    fd.append('item_name', itemName);
+    fd.append('maker', document.getElementById('newConsumableMakerTkuser').value.trim());
+    fd.append('category', category);
+    fd.append('base_price', document.getElementById('newConsumablePriceTkuser').value || '0');
+    fd.append('unit', document.getElementById('newConsumableUnitTkuser').value.trim() || 'EA');
+    const photoFile = document.getElementById('newConsumablePhotoTkuser').files[0];
+    if (photoFile) fd.append('photo', photoFile);
+
+    try {
+        const token = getToken();
+        const res = await fetch('/api/consumable-items', {
+            method: 'POST',
+            headers: { 'Authorization': `Bearer ${token}` },
+            body: fd
+        });
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error || '등록 실패');
+        showToast('소모품이 등록되었습니다');
+        closeAddConsumableTkuser();
+        await loadConsumablesList();
+    } catch (e) { showToast(e.message, 'error'); }
+}
+
+/* ===== 소모품 수정 ===== */
+function openEditConsumableTkuser(id) {
+    const item = consumablesList.find(x => x.item_id === id);
+    if (!item) return;
+    document.getElementById('editConsumableIdTkuser').value = item.item_id;
+    document.getElementById('editConsumableNameTkuser').value = item.item_name;
+    document.getElementById('editConsumableMakerTkuser').value = item.maker || '';
+    document.getElementById('editConsumableCategoryTkuser').value = item.category;
+    document.getElementById('editConsumablePriceTkuser').value = item.base_price || '';
+    document.getElementById('editConsumableUnitTkuser').value = item.unit || 'EA';
+    const preview = document.getElementById('editConsumablePhotoPreviewTkuser');
+    preview.innerHTML = item.photo_path ? `<img src="${item.photo_path}" class="w-20 h-20 rounded object-cover">` : '';
+    document.getElementById('editConsumablePhotoTkuser').value = '';
+    document.getElementById('editConsumableModalTkuser').classList.remove('hidden');
+}
+function closeEditConsumableTkuser() { document.getElementById('editConsumableModalTkuser').classList.add('hidden'); }
+
+function previewEditConsumablePhoto() {
+    const file = document.getElementById('editConsumablePhotoTkuser').files[0];
+    const preview = document.getElementById('editConsumablePhotoPreviewTkuser');
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = e => { preview.innerHTML = `<img src="${e.target.result}" class="w-20 h-20 rounded object-cover">`; };
+    reader.readAsDataURL(file);
+}
+
+async function submitEditConsumableTkuser(e) {
+    e.preventDefault();
+    const id = document.getElementById('editConsumableIdTkuser').value;
+    const fd = new FormData();
+    fd.append('item_name', document.getElementById('editConsumableNameTkuser').value.trim());
+    fd.append('maker', document.getElementById('editConsumableMakerTkuser').value.trim());
+    fd.append('category', document.getElementById('editConsumableCategoryTkuser').value);
+    fd.append('base_price', document.getElementById('editConsumablePriceTkuser').value || '0');
+    fd.append('unit', document.getElementById('editConsumableUnitTkuser').value.trim() || 'EA');
+    const photoFile = document.getElementById('editConsumablePhotoTkuser').files[0];
+    if (photoFile) fd.append('photo', photoFile);
+
+    try {
+        const token = getToken();
+        const res = await fetch(`/api/consumable-items/${id}`, {
+            method: 'PUT',
+            headers: { 'Authorization': `Bearer ${token}` },
+            body: fd
+        });
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error || '수정 실패');
+        showToast('수정되었습니다');
+        closeEditConsumableTkuser();
+        await loadConsumablesList();
+    } catch (e) { showToast(e.message, 'error'); }
+}
+
+/* ===== 소모품 비활성화 ===== */
+async function deactivateConsumableTkuser(id, name) {
+    if (!confirm(`"${name}" 소모품을 비활성화하시겠습니까?`)) return;
+    try {
+        await api(`/consumable-items/${id}`, { method: 'DELETE' });
+        showToast('비활성화 완료');
+        await loadConsumablesList();
+    } catch (e) { showToast(e.message, 'error'); }
+}
+
+// 검색/필터 이벤트 + 모달 폼 이벤트
+document.addEventListener('DOMContentLoaded', () => {
+    let searchTimeout;
+    const searchEl = document.getElementById('consumableSearchTkuser');
+    if (searchEl) searchEl.addEventListener('input', () => {
+        clearTimeout(searchTimeout);
+        searchTimeout = setTimeout(loadConsumablesList, 300);
+    });
+    const filterCatEl = document.getElementById('consumableFilterCategoryTkuser');
+    if (filterCatEl) filterCatEl.addEventListener('change', loadConsumablesList);
+    const filterActiveEl = document.getElementById('consumableFilterActiveTkuser');
+    if (filterActiveEl) filterActiveEl.addEventListener('change', loadConsumablesList);
+
+    document.getElementById('addConsumableFormTkuser')?.addEventListener('submit', submitAddConsumableTkuser);
+    document.getElementById('editConsumableFormTkuser')?.addEventListener('submit', submitEditConsumableTkuser);
+});

user-management/web/static/js/tkuser-tabs.js

@@ -29,5 +29,7 @@ function switchTab(name) {
     if (name === 'issueTypes' && !issueTypesLoaded) loadIssueTypes();
     if (name === 'permissions' && !permissionsTabLoaded) loadPermissionsTab();
     if (name === 'partners' && !partnersLoaded) loadPartnersTab();
+    if (name === 'vendors' && !vendorsLoaded) loadVendorsTab();
+    if (name === 'consumables' && !consumablesLoaded) loadConsumablesTab();
     if (name === 'notificationRecipients' && !nrLoaded) loadNotificationRecipientsTab();
 }

user-management/web/static/js/tkuser-vacations.js

@@ -246,7 +246,23 @@ function openVacBalanceModal(editId) {
     // 작업자 셀렉트
     const wSel = document.getElementById('vbWorker');
     wSel.innerHTML = '<option value="">선택</option>';
-    vacWorkers.forEach(w => { wSel.innerHTML += `<option value="${w.worker_id}">${escapeHtml(w.worker_name)}</option>`; });
+    const byDept = {};
+    vacWorkers.forEach(w => {
+        const dept = w.department_name || '부서 미지정';
+        if (!byDept[dept]) byDept[dept] = [];
+        byDept[dept].push(w);
+    });
+    Object.keys(byDept).sort().forEach(dept => {
+        const group = document.createElement('optgroup');
+        group.label = dept;
+        byDept[dept].forEach(w => {
+            const o = document.createElement('option');
+            o.value = w.worker_id;
+            o.textContent = w.worker_name;
+            group.appendChild(o);
+        });
+        wSel.appendChild(group);
+    });
     // 유형 셀렉트
     const tSel = document.getElementById('vbType');
     tSel.innerHTML = '<option value="">선택</option>';

user-management/web/static/js/tkuser-vendors.js

@@ -0,0 +1,183 @@
+/* ===== tkuser 업체(공급업체) CRUD ===== */
+let vendorsLoaded = false;
+let vendorsList = [];
+let selectedVendorIdTkuser = null;
+
+async function loadVendorsTab() {
+    if (vendorsLoaded) return;
+    vendorsLoaded = true;
+    if (currentUser && ['admin', 'system'].includes(currentUser.role)) {
+        document.getElementById('btnAddVendorTkuser')?.classList.remove('hidden');
+    }
+    await loadVendorsList();
+}
+
+async function loadVendorsList() {
+    try {
+        const isActive = document.getElementById('vendorFilterActiveTkuser')?.value;
+        const search = document.getElementById('vendorSearchTkuser')?.value?.trim() || '';
+        const params = new URLSearchParams();
+        if (isActive !== '' && isActive !== undefined) params.set('is_active', isActive);
+        if (search) params.set('search', search);
+        const r = await api('/vendors?' + params.toString());
+        vendorsList = r.data || [];
+        renderVendorsListTkuser();
+    } catch (e) {
+        document.getElementById('vendorsListTkuser').innerHTML = `<div class="text-red-500 text-center py-6"><i class="fas fa-exclamation-triangle text-xl"></i><p class="text-sm mt-2">${e.message}</p></div>`;
+    }
+}
+
+function renderVendorsListTkuser() {
+    const c = document.getElementById('vendorsListTkuser');
+    if (!vendorsList.length) {
+        c.innerHTML = '<p class="text-gray-400 text-center py-4 text-sm">등록된 업체가 없습니다.</p>';
+        return;
+    }
+    const isAdmin = currentUser && ['admin', 'system'].includes(currentUser.role);
+    c.innerHTML = vendorsList.map(v => {
+        return `<div class="flex items-center justify-between p-2.5 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer ${selectedVendorIdTkuser === v.vendor_id ? 'ring-2 ring-indigo-400' : ''}" onclick="selectVendorTkuser(${v.vendor_id})">
+            <div class="flex-1 min-w-0">
+                <div class="text-sm font-medium text-gray-800 truncate">
+                    <i class="fas fa-store mr-1.5 text-gray-400 text-xs"></i>${escHtml(v.vendor_name)}
+                    ${!v.is_active ? '<span class="px-1.5 py-0.5 rounded text-xs bg-gray-100 text-gray-400 ml-1">비활성</span>' : ''}
+                </div>
+                <div class="text-xs text-gray-500 flex items-center gap-1.5 mt-0.5">
+                    ${v.business_number ? `<span>${escHtml(v.business_number)}</span>` : ''}
+                    ${v.contact_name ? `<span>${escHtml(v.contact_name)}</span>` : ''}
+                </div>
+            </div>
+            ${isAdmin ? `<div class="flex gap-1 ml-2 flex-shrink-0">
+                <button onclick="event.stopPropagation(); openEditVendorTkuser(${v.vendor_id})" class="p-1.5 text-slate-500 hover:text-slate-700 hover:bg-slate-200 rounded" title="수정"><i class="fas fa-pen text-xs"></i></button>
+                ${v.is_active ? `<button onclick="event.stopPropagation(); deactivateVendorTkuser(${v.vendor_id}, '${escHtml(v.vendor_name).replace(/'/g, "\\'")}')" class="p-1.5 text-red-400 hover:text-red-600 hover:bg-red-100 rounded" title="비활성화"><i class="fas fa-ban text-xs"></i></button>` : ''}
+            </div>` : ''}
+        </div>`;
+    }).join('');
+}
+
+async function selectVendorTkuser(id) {
+    selectedVendorIdTkuser = id;
+    renderVendorsListTkuser();
+    try {
+        const r = await api(`/vendors/${id}`);
+        const v = r.data;
+        renderVendorDetailTkuser(v);
+        document.getElementById('vendorDetailTkuser').classList.remove('hidden');
+        document.getElementById('vendorEmptyTkuser').classList.add('hidden');
+    } catch (e) {
+        showToast('상세 조회 실패: ' + e.message, 'error');
+    }
+}
+
+function renderVendorDetailTkuser(v) {
+    document.getElementById('vendorDetailTkuser').innerHTML = `
+        <div class="bg-white rounded-xl shadow-sm p-5">
+            <h3 class="text-lg font-semibold text-gray-800 mb-3">${escHtml(v.vendor_name)}</h3>
+            <div class="grid grid-cols-2 gap-3 text-sm">
+                <div><span class="text-gray-500">사업자번호:</span> <span class="font-medium">${escHtml(v.business_number) || '-'}</span></div>
+                <div><span class="text-gray-500">대표자:</span> <span class="font-medium">${escHtml(v.representative) || '-'}</span></div>
+                <div><span class="text-gray-500">담당자:</span> <span class="font-medium">${escHtml(v.contact_name) || '-'}</span></div>
+                <div><span class="text-gray-500">연락처:</span> <span class="font-medium">${escHtml(v.contact_phone) || '-'}</span></div>
+                <div class="col-span-2"><span class="text-gray-500">주소:</span> <span class="font-medium">${escHtml(v.address) || '-'}</span></div>
+                <div><span class="text-gray-500">은행:</span> <span class="font-medium">${escHtml(v.bank_name) || '-'}</span></div>
+                <div><span class="text-gray-500">계좌번호:</span> <span class="font-medium">${escHtml(v.bank_account) || '-'}</span></div>
+                ${v.notes ? `<div class="col-span-2"><span class="text-gray-500">비고:</span> ${escHtml(v.notes)}</div>` : ''}
+            </div>
+        </div>`;
+}
+
+/* ===== 업체 등록 ===== */
+function openAddVendorTkuser() { document.getElementById('addVendorModalTkuser').classList.remove('hidden'); }
+function closeAddVendorTkuser() { document.getElementById('addVendorModalTkuser').classList.add('hidden'); document.getElementById('addVendorFormTkuser').reset(); }
+
+async function submitAddVendorTkuser(e) {
+    e.preventDefault();
+    const data = {
+        vendor_name: document.getElementById('newVendorNameTkuser').value.trim(),
+        business_number: document.getElementById('newVendorBizNumTkuser').value.trim() || null,
+        representative: document.getElementById('newVendorRepTkuser').value.trim() || null,
+        contact_name: document.getElementById('newVendorContactNameTkuser').value.trim() || null,
+        contact_phone: document.getElementById('newVendorContactPhoneTkuser').value.trim() || null,
+        address: document.getElementById('newVendorAddressTkuser').value.trim() || null,
+        bank_name: document.getElementById('newVendorBankNameTkuser').value.trim() || null,
+        bank_account: document.getElementById('newVendorBankAccountTkuser').value.trim() || null,
+        notes: document.getElementById('newVendorNotesTkuser').value.trim() || null,
+    };
+    if (!data.vendor_name) { showToast('업체명은 필수입니다', 'error'); return; }
+    try {
+        await api('/vendors', { method: 'POST', body: JSON.stringify(data) });
+        showToast('업체가 등록되었습니다');
+        closeAddVendorTkuser();
+        await loadVendorsList();
+    } catch (e) { showToast(e.message, 'error'); }
+}
+
+/* ===== 업체 수정 ===== */
+function openEditVendorTkuser(id) {
+    const v = vendorsList.find(x => x.vendor_id === id);
+    if (!v) return;
+    document.getElementById('editVendorIdTkuser').value = v.vendor_id;
+    document.getElementById('editVendorNameTkuser').value = v.vendor_name;
+    document.getElementById('editVendorBizNumTkuser').value = v.business_number || '';
+    document.getElementById('editVendorRepTkuser').value = v.representative || '';
+    document.getElementById('editVendorContactNameTkuser').value = v.contact_name || '';
+    document.getElementById('editVendorContactPhoneTkuser').value = v.contact_phone || '';
+    document.getElementById('editVendorAddressTkuser').value = v.address || '';
+    document.getElementById('editVendorBankNameTkuser').value = v.bank_name || '';
+    document.getElementById('editVendorBankAccountTkuser').value = v.bank_account || '';
+    document.getElementById('editVendorNotesTkuser').value = v.notes || '';
+    document.getElementById('editVendorModalTkuser').classList.remove('hidden');
+}
+function closeEditVendorTkuser() { document.getElementById('editVendorModalTkuser').classList.add('hidden'); }
+
+async function submitEditVendorTkuser(e) {
+    e.preventDefault();
+    const id = document.getElementById('editVendorIdTkuser').value;
+    const data = {
+        vendor_name: document.getElementById('editVendorNameTkuser').value.trim(),
+        business_number: document.getElementById('editVendorBizNumTkuser').value.trim() || null,
+        representative: document.getElementById('editVendorRepTkuser').value.trim() || null,
+        contact_name: document.getElementById('editVendorContactNameTkuser').value.trim() || null,
+        contact_phone: document.getElementById('editVendorContactPhoneTkuser').value.trim() || null,
+        address: document.getElementById('editVendorAddressTkuser').value.trim() || null,
+        bank_name: document.getElementById('editVendorBankNameTkuser').value.trim() || null,
+        bank_account: document.getElementById('editVendorBankAccountTkuser').value.trim() || null,
+        notes: document.getElementById('editVendorNotesTkuser').value.trim() || null,
+    };
+    try {
+        await api(`/vendors/${id}`, { method: 'PUT', body: JSON.stringify(data) });
+        showToast('수정되었습니다');
+        closeEditVendorTkuser();
+        await loadVendorsList();
+        if (selectedVendorIdTkuser == id) selectVendorTkuser(id);
+    } catch (e) { showToast(e.message, 'error'); }
+}
+
+/* ===== 업체 비활성화 ===== */
+async function deactivateVendorTkuser(id, name) {
+    if (!confirm(`"${name}" 업체를 비활성화하시겠습니까?`)) return;
+    try {
+        await api(`/vendors/${id}`, { method: 'DELETE' });
+        showToast('비활성화 완료');
+        await loadVendorsList();
+        if (selectedVendorIdTkuser === id) {
+            document.getElementById('vendorDetailTkuser').classList.add('hidden');
+            document.getElementById('vendorEmptyTkuser').classList.remove('hidden');
+            selectedVendorIdTkuser = null;
+        }
+    } catch (e) { showToast(e.message, 'error'); }
+}
+
+// 검색/필터 이벤트 + 모달 폼 이벤트
+document.addEventListener('DOMContentLoaded', () => {
+    let searchTimeout;
+    const searchEl = document.getElementById('vendorSearchTkuser');
+    if (searchEl) searchEl.addEventListener('input', () => {
+        clearTimeout(searchTimeout);
+        searchTimeout = setTimeout(loadVendorsList, 300);
+    });
+    const filterEl = document.getElementById('vendorFilterActiveTkuser');
+    if (filterEl) filterEl.addEventListener('change', loadVendorsList);
+
+    document.getElementById('addVendorFormTkuser')?.addEventListener('submit', submitAddVendorTkuser);
+    document.getElementById('editVendorFormTkuser')?.addEventListener('submit', submitEditVendorTkuser);
+});