From 5ed34ca27bd96c57df13411e37b639ec0964ade6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Thu, 5 Mar 2026 17:46:11 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20[approval]=20=EA=B2=B0=EC=9E=AC?=
 =?UTF-8?q?=ED=95=A8/=EC=B0=B8=EC=A1=B0=ED=95=A8/=EC=99=84=EB=A3=8C?=
 =?UTF-8?q?=ED=95=A8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=82=AC=EC=9D=B4?=
 =?UTF-8?q?=EC=A6=88=20=EC=84=A0=ED=83=9D,=20=EC=B2=B4=ED=81=AC=EB=B0=95?=
 =?UTF-8?q?=EC=8A=A4=20=EC=84=A0=ED=83=9D=EC=82=AD=EC=A0=9C=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 기안함과 동일한 UI 패턴 적용
- 페이지당 표시 건수 선택 (15/50/100/200/500)
- 전체선택/개별선택 체크박스 + 선택삭제
- 슈퍼관리자 영구삭제 컬럼 추가
---
 resources/views/approvals/completed.blade.php |  99 ++++++++++++++-
 resources/views/approvals/pending.blade.php   | 100 ++++++++++++++-
 .../views/approvals/references.blade.php      | 119 +++++++++++++++---
 3 files changed, 299 insertions(+), 19 deletions(-)

diff --git a/resources/views/approvals/completed.blade.php b/resources/views/approvals/completed.blade.php
index 92881697..d94817ac 100644
--- a/resources/views/approvals/completed.blade.php
+++ b/resources/views/approvals/completed.blade.php
@@ -26,6 +26,26 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none foc
         </form>
     </x-filter-collapsible>
 
+    <!-- 테이블 상단 (선택삭제 + 페이지 사이즈) -->
+    <div class="flex items-center justify-between mb-2">
+        <div>
+            <button id="bulkDeleteBtn" onclick="bulkDelete()" class="hidden bg-red-500 hover:bg-red-600 text-white px-4 py-1.5 rounded-lg text-sm font-medium transition">
+                선택삭제 (<span id="selectedCount">0</span>건)
+            </button>
+        </div>
+        <div class="flex items-center gap-2 text-sm text-gray-600">
+            <span>페이지당</span>
+            <select id="perPageSelect" onchange="loadCompleted(1)" class="px-2 py-1 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
+                <option value="15" selected>15</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+                <option value="200">200</option>
+                <option value="500">500</option>
+            </select>
+            <span>건</span>
+        </div>
+    </div>
+
     <div id="approval-table" class="bg-white rounded-lg shadow-sm overflow-hidden">
         <div class="flex justify-center items-center p-12">
             <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
@@ -37,7 +57,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none foc
 
 @push('scripts')
 <script>
+const isSuperAdmin = @json(auth()->user()->isSuperAdmin());
 const currentUserId = {{ auth()->id() }};
+let selectedIds = new Set();
 
 document.addEventListener('DOMContentLoaded', function() {
     loadCompleted();
@@ -48,10 +70,13 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none foc
 });
 
 function loadCompleted(page = 1) {
+    selectedIds.clear();
+    updateBulkDeleteBtn();
+
     const form = document.getElementById('filterForm');
     const params = new URLSearchParams(new FormData(form));
     params.set('page', page);
-    params.set('per_page', 15);
+    params.set('per_page', document.getElementById('perPageSelect').value);
 
     fetch(`/api/admin/approvals/completed?${params}`, {
         headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
@@ -63,6 +88,56 @@ function loadCompleted(page = 1) {
     });
 }
 
+function toggleSelectAll(checkbox) {
+    const checkboxes = document.querySelectorAll('.row-checkbox');
+    checkboxes.forEach(cb => {
+        cb.checked = checkbox.checked;
+        const id = parseInt(cb.value);
+        if (checkbox.checked) selectedIds.add(id); else selectedIds.delete(id);
+    });
+    updateBulkDeleteBtn();
+}
+
+function toggleRowCheckbox(checkbox) {
+    const id = parseInt(checkbox.value);
+    if (checkbox.checked) selectedIds.add(id); else selectedIds.delete(id);
+    const allCb = document.getElementById('selectAllCheckbox');
+    const rowCbs = document.querySelectorAll('.row-checkbox');
+    if (allCb) allCb.checked = rowCbs.length > 0 && [...rowCbs].every(cb => cb.checked);
+    updateBulkDeleteBtn();
+}
+
+function updateBulkDeleteBtn() {
+    const btn = document.getElementById('bulkDeleteBtn');
+    const count = document.getElementById('selectedCount');
+    if (selectedIds.size > 0) { btn.classList.remove('hidden'); count.textContent = selectedIds.size; }
+    else { btn.classList.add('hidden'); }
+}
+
+function bulkDelete() {
+    if (selectedIds.size === 0) return;
+    if (!confirm(`선택한 ${selectedIds.size}건의 문서를 삭제하시겠습니까?`)) return;
+
+    fetch('/api/admin/approvals/bulk-delete', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
+        body: JSON.stringify({ ids: [...selectedIds] }),
+    })
+    .then(r => r.json())
+    .then(data => {
+        if (data.success) { if (typeof showToast === 'function') showToast(data.message, 'success'); loadCompleted(); }
+        else { if (typeof showToast === 'function') showToast(data.message || '삭제 실패', 'error'); }
+    })
+    .catch(() => { if (typeof showToast === 'function') showToast('삭제 중 오류가 발생했습니다.', 'error'); });
+}
+
+function escapeHtml(str) {
+    if (!str) return '';
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+}
+
 function renderTable(items, pagination) {
     const container = document.getElementById('approval-table');
 
@@ -102,6 +177,9 @@ function renderTable(items, pagination) {
         <table class="min-w-full divide-y divide-gray-200">
             <thead class="bg-gray-50">
                 <tr>
+                    <th class="px-2 py-3 text-center" style="width: 40px;">
+                        <input type="checkbox" id="selectAllCheckbox" onchange="toggleSelectAll(this)" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
+                    </th>
                     <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">문서번호</th>
                     <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">제목</th>
                     <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">기안자</th>
@@ -109,6 +187,7 @@ function renderTable(items, pagination) {
                     <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">구분</th>
                     <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">확인</th>
                     <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">완료일</th>
+                    ${isSuperAdmin ? '<th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">관리</th>' : ''}
                 </tr>
             </thead>
             <tbody class="bg-white divide-y divide-gray-200">`;
@@ -119,6 +198,9 @@ function renderTable(items, pagination) {
         const rowBg = isUnread ? 'bg-amber-50 hover:bg-amber-100' : 'hover:bg-gray-50';
 
         html += `<tr class="${rowBg} cursor-pointer" onclick="location.href='/approval-mgmt/${item.id}'">
+            <td class="px-2 py-3 text-center" onclick="event.stopPropagation();">
+                <input type="checkbox" class="row-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" value="${item.id}" onchange="toggleRowCheckbox(this)">
+            </td>
             <td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">${item.document_number || '-'}</td>
             <td class="px-4 py-3 text-sm text-gray-800 font-medium">${isUnread ? '<span class="font-bold">' + (item.title || '-') + '</span>' : (item.title || '-')}</td>
             <td class="px-4 py-3 text-sm text-gray-600">${item.drafter?.name || '-'}</td>
@@ -126,6 +208,7 @@ function renderTable(items, pagination) {
             <td class="px-4 py-3 text-center">${resubmitBadge(item)}</td>
             <td class="px-4 py-3 text-center">${confirmBadge(item)}</td>
             <td class="px-4 py-3 text-sm text-gray-500 whitespace-nowrap">${completedAt}</td>
+            ${isSuperAdmin ? `<td class="px-4 py-3 text-center"><button onclick="event.stopPropagation(); confirmForceDelete(${item.id}, '${escapeHtml(item.title)}')" class="text-xs text-red-500 hover:text-red-700 font-medium whitespace-nowrap">영구삭제</button></td>` : ''}
         </tr>`;
     });
 
@@ -142,5 +225,19 @@ function renderTable(items, pagination) {
     pHtml += '</div>';
     area.innerHTML = pHtml;
 }
+
+function confirmForceDelete(id, title) {
+    if (!confirm(`"${title}" 문서를 영구삭제하시겠습니까?\n\n이 작업은 되돌릴 수 없습니다.`)) return;
+
+    fetch(`/api/admin/approvals/${id}/force`, {
+        method: 'DELETE',
+        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' }
+    })
+    .then(r => r.json())
+    .then(data => {
+        if (data.success) { showToast(data.message, 'success'); loadCompleted(); }
+        else { showToast(data.message, 'error'); }
+    });
+}
 </script>
 @endpush
diff --git a/resources/views/approvals/pending.blade.php b/resources/views/approvals/pending.blade.php
index b18bfc07..a631ac86 100644
--- a/resources/views/approvals/pending.blade.php
+++ b/resources/views/approvals/pending.blade.php
@@ -19,6 +19,26 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none foc
         </form>
     </x-filter-collapsible>
 
+    <!-- 테이블 상단 (선택삭제 + 페이지 사이즈) -->
+    <div class="flex items-center justify-between mb-2">
+        <div>
+            <button id="bulkDeleteBtn" onclick="bulkDelete()" class="hidden bg-red-500 hover:bg-red-600 text-white px-4 py-1.5 rounded-lg text-sm font-medium transition">
+                선택삭제 (<span id="selectedCount">0</span>건)
+            </button>
+        </div>
+        <div class="flex items-center gap-2 text-sm text-gray-600">
+            <span>페이지당</span>
+            <select id="perPageSelect" onchange="loadPending(1)" class="px-2 py-1 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
+                <option value="15" selected>15</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+                <option value="200">200</option>
+                <option value="500">500</option>
+            </select>
+            <span>건</span>
+        </div>
+    </div>
+
     <div id="approval-table" class="bg-white rounded-lg shadow-sm overflow-hidden">
         <div class="flex justify-center items-center p-12">
             <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
@@ -30,6 +50,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none foc
 
 @push('scripts')
 <script>
+const isSuperAdmin = @json(auth()->user()->isSuperAdmin());
+let selectedIds = new Set();
+
 document.addEventListener('DOMContentLoaded', function() {
     loadPending();
     document.getElementById('filterForm').addEventListener('submit', function(e) {
@@ -39,10 +62,13 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none foc
 });
 
 function loadPending(page = 1) {
+    selectedIds.clear();
+    updateBulkDeleteBtn();
+
     const form = document.getElementById('filterForm');
     const params = new URLSearchParams(new FormData(form));
     params.set('page', page);
-    params.set('per_page', 15);
+    params.set('per_page', document.getElementById('perPageSelect').value);
 
     fetch(`/api/admin/approvals/pending?${params}`, {
         headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
@@ -54,6 +80,56 @@ function loadPending(page = 1) {
     });
 }
 
+function toggleSelectAll(checkbox) {
+    const checkboxes = document.querySelectorAll('.row-checkbox');
+    checkboxes.forEach(cb => {
+        cb.checked = checkbox.checked;
+        const id = parseInt(cb.value);
+        if (checkbox.checked) selectedIds.add(id); else selectedIds.delete(id);
+    });
+    updateBulkDeleteBtn();
+}
+
+function toggleRowCheckbox(checkbox) {
+    const id = parseInt(checkbox.value);
+    if (checkbox.checked) selectedIds.add(id); else selectedIds.delete(id);
+    const allCb = document.getElementById('selectAllCheckbox');
+    const rowCbs = document.querySelectorAll('.row-checkbox');
+    if (allCb) allCb.checked = rowCbs.length > 0 && [...rowCbs].every(cb => cb.checked);
+    updateBulkDeleteBtn();
+}
+
+function updateBulkDeleteBtn() {
+    const btn = document.getElementById('bulkDeleteBtn');
+    const count = document.getElementById('selectedCount');
+    if (selectedIds.size > 0) { btn.classList.remove('hidden'); count.textContent = selectedIds.size; }
+    else { btn.classList.add('hidden'); }
+}
+
+function bulkDelete() {
+    if (selectedIds.size === 0) return;
+    if (!confirm(`선택한 ${selectedIds.size}건의 문서를 삭제하시겠습니까?`)) return;
+
+    fetch('/api/admin/approvals/bulk-delete', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
+        body: JSON.stringify({ ids: [...selectedIds] }),
+    })
+    .then(r => r.json())
+    .then(data => {
+        if (data.success) { if (typeof showToast === 'function') showToast(data.message, 'success'); loadPending(); }
+        else { if (typeof showToast === 'function') showToast(data.message || '삭제 실패', 'error'); }
+    })
+    .catch(() => { if (typeof showToast === 'function') showToast('삭제 중 오류가 발생했습니다.', 'error'); });
+}
+
+function escapeHtml(str) {
+    if (!str) return '';
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+}
+
 function renderTable(items, pagination) {
     const container = document.getElementById('approval-table');
 
@@ -67,6 +143,9 @@ function renderTable(items, pagination) {
         <table class="min-w-full divide-y divide-gray-200">
             <thead class="bg-gray-50">
                 <tr>
+                    <th class="px-2 py-3 text-center" style="width: 40px;">
+                        <input type="checkbox" id="selectAllCheckbox" onchange="toggleSelectAll(this)" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
+                    </th>
                     <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">문서번호</th>
                     <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">제목</th>
                     <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">기안자</th>
@@ -74,6 +153,7 @@ function renderTable(items, pagination) {
                     <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">구분</th>
                     <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">긴급</th>
                     <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">기안일</th>
+                    ${isSuperAdmin ? '<th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">관리</th>' : ''}
                 </tr>
             </thead>
             <tbody class="bg-white divide-y divide-gray-200">`;
@@ -90,6 +170,9 @@ function renderTable(items, pagination) {
         const urgent = item.is_urgent ? '<span class="text-red-500 font-bold text-xs">긴급</span>' : '';
 
         html += `<tr class="hover:bg-gray-50 cursor-pointer" onclick="location.href='/approval-mgmt/${item.id}'">
+            <td class="px-2 py-3 text-center" onclick="event.stopPropagation();">
+                <input type="checkbox" class="row-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" value="${item.id}" onchange="toggleRowCheckbox(this)">
+            </td>
             <td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">${item.document_number || '-'}</td>
             <td class="px-4 py-3 text-sm text-gray-800 font-medium">${item.title || '-'}</td>
             <td class="px-4 py-3 text-sm text-gray-600">${item.drafter?.name || '-'}</td>
@@ -97,6 +180,7 @@ function renderTable(items, pagination) {
             <td class="px-4 py-3 text-center">${resubmitBadge(item)}</td>
             <td class="px-4 py-3 text-center">${urgent}</td>
             <td class="px-4 py-3 text-sm text-gray-500 whitespace-nowrap">${draftedAt}</td>
+            ${isSuperAdmin ? `<td class="px-4 py-3 text-center"><button onclick="event.stopPropagation(); confirmForceDelete(${item.id}, '${escapeHtml(item.title)}')" class="text-xs text-red-500 hover:text-red-700 font-medium whitespace-nowrap">영구삭제</button></td>` : ''}
         </tr>`;
     });
 
@@ -114,5 +198,19 @@ function renderTable(items, pagination) {
     pHtml += '</div>';
     area.innerHTML = pHtml;
 }
+
+function confirmForceDelete(id, title) {
+    if (!confirm(`"${title}" 문서를 영구삭제하시겠습니까?\n\n이 작업은 되돌릴 수 없습니다.`)) return;
+
+    fetch(`/api/admin/approvals/${id}/force`, {
+        method: 'DELETE',
+        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' }
+    })
+    .then(r => r.json())
+    .then(data => {
+        if (data.success) { showToast(data.message, 'success'); loadPending(); }
+        else { showToast(data.message, 'error'); }
+    });
+}
 </script>
 @endpush
diff --git a/resources/views/approvals/references.blade.php b/resources/views/approvals/references.blade.php
index 111b416a..13fe3579 100644
--- a/resources/views/approvals/references.blade.php
+++ b/resources/views/approvals/references.blade.php
@@ -37,6 +37,26 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none foc
         </form>
     </x-filter-collapsible>
 
+    <!-- 테이블 상단 (선택삭제 + 페이지 사이즈) -->
+    <div class="flex items-center justify-between mb-2">
+        <div>
+            <button id="bulkDeleteBtn" onclick="bulkDelete()" class="hidden bg-red-500 hover:bg-red-600 text-white px-4 py-1.5 rounded-lg text-sm font-medium transition">
+                선택삭제 (<span id="selectedCount">0</span>건)
+            </button>
+        </div>
+        <div class="flex items-center gap-2 text-sm text-gray-600">
+            <span>페이지당</span>
+            <select id="perPageSelect" onchange="loadReferences(1)" class="px-2 py-1 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
+                <option value="15" selected>15</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+                <option value="200">200</option>
+                <option value="500">500</option>
+            </select>
+            <span>건</span>
+        </div>
+    </div>
+
     <div id="approval-table" class="bg-white rounded-lg shadow-sm overflow-hidden">
         <div class="flex justify-center items-center p-12">
             <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
@@ -48,7 +68,10 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none foc
 
 @push('scripts')
 <script>
+const isSuperAdmin = @json(auth()->user()->isSuperAdmin());
+const userId = {{ auth()->id() }};
 let currentReadFilter = '';
+let selectedIds = new Set();
 
 document.addEventListener('DOMContentLoaded', function() {
     loadReferences();
@@ -63,7 +86,6 @@ function setReadFilter(value) {
     currentReadFilter = value;
     document.getElementById('is_read_filter').value = value;
 
-    // 탭 스타일 업데이트
     ['tab-all', 'tab-unread', 'tab-read'].forEach(id => {
         const el = document.getElementById(id);
         el.className = 'px-4 py-2 rounded-lg text-sm font-medium transition bg-gray-100 text-gray-700 hover:bg-gray-200';
@@ -82,19 +104,19 @@ function loadUnreadCount() {
     .then(data => {
         const count = data.data?.reference_unread || 0;
         const badge = document.getElementById('unread-badge');
-        if (count > 0) {
-            badge.textContent = count;
-            badge.style.display = 'inline-flex';
-        }
+        if (count > 0) { badge.textContent = count; badge.style.display = 'inline-flex'; }
     })
     .catch(() => {});
 }
 
 function loadReferences(page = 1) {
+    selectedIds.clear();
+    updateBulkDeleteBtn();
+
     const form = document.getElementById('filterForm');
     const params = new URLSearchParams(new FormData(form));
     params.set('page', page);
-    params.set('per_page', 15);
+    params.set('per_page', document.getElementById('perPageSelect').value);
 
     fetch(`/api/admin/approvals/references?${params}`, {
         headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
@@ -106,6 +128,56 @@ function loadReferences(page = 1) {
     });
 }
 
+function toggleSelectAll(checkbox) {
+    const checkboxes = document.querySelectorAll('.row-checkbox');
+    checkboxes.forEach(cb => {
+        cb.checked = checkbox.checked;
+        const id = parseInt(cb.value);
+        if (checkbox.checked) selectedIds.add(id); else selectedIds.delete(id);
+    });
+    updateBulkDeleteBtn();
+}
+
+function toggleRowCheckbox(checkbox) {
+    const id = parseInt(checkbox.value);
+    if (checkbox.checked) selectedIds.add(id); else selectedIds.delete(id);
+    const allCb = document.getElementById('selectAllCheckbox');
+    const rowCbs = document.querySelectorAll('.row-checkbox');
+    if (allCb) allCb.checked = rowCbs.length > 0 && [...rowCbs].every(cb => cb.checked);
+    updateBulkDeleteBtn();
+}
+
+function updateBulkDeleteBtn() {
+    const btn = document.getElementById('bulkDeleteBtn');
+    const count = document.getElementById('selectedCount');
+    if (selectedIds.size > 0) { btn.classList.remove('hidden'); count.textContent = selectedIds.size; }
+    else { btn.classList.add('hidden'); }
+}
+
+function bulkDelete() {
+    if (selectedIds.size === 0) return;
+    if (!confirm(`선택한 ${selectedIds.size}건의 문서를 삭제하시겠습니까?`)) return;
+
+    fetch('/api/admin/approvals/bulk-delete', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
+        body: JSON.stringify({ ids: [...selectedIds] }),
+    })
+    .then(r => r.json())
+    .then(data => {
+        if (data.success) { if (typeof showToast === 'function') showToast(data.message, 'success'); loadReferences(); }
+        else { if (typeof showToast === 'function') showToast(data.message || '삭제 실패', 'error'); }
+    })
+    .catch(() => { if (typeof showToast === 'function') showToast('삭제 중 오류가 발생했습니다.', 'error'); });
+}
+
+function escapeHtml(str) {
+    if (!str) return '';
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+}
+
 function renderTable(items, pagination) {
     const container = document.getElementById('approval-table');
 
@@ -127,18 +199,20 @@ function renderTable(items, pagination) {
         return map[status] || status;
     };
 
-    const userId = {{ auth()->id() }};
-
     let html = `<div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
             <thead class="bg-gray-50">
                 <tr>
+                    <th class="px-2 py-3 text-center" style="width: 40px;">
+                        <input type="checkbox" id="selectAllCheckbox" onchange="toggleSelectAll(this)" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
+                    </th>
                     <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">문서번호</th>
                     <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">제목</th>
                     <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">기안자</th>
                     <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">상태</th>
                     <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">열람</th>
                     <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">기안일</th>
+                    ${isSuperAdmin ? '<th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">관리</th>' : ''}
                 </tr>
             </thead>
             <tbody class="bg-white divide-y divide-gray-200">`;
@@ -146,7 +220,6 @@ function renderTable(items, pagination) {
     items.forEach(item => {
         const draftedAt = item.drafted_at ? new Date(item.drafted_at).toLocaleDateString('ko-KR') : (item.created_at ? new Date(item.created_at).toLocaleDateString('ko-KR') : '-');
 
-        // 참조 step에서 is_read 확인
         const refStep = (item.steps || []).find(s => s.step_type === 'reference' && s.approver_id === userId);
         const isRead = refStep?.is_read;
         const readBadge = isRead
@@ -155,12 +228,16 @@ function renderTable(items, pagination) {
         const rowBold = isRead ? '' : 'font-bold';
 
         html += `<tr class="hover:bg-gray-50 cursor-pointer ${rowBold}" onclick="goToApproval(${item.id})">
+            <td class="px-2 py-3 text-center" onclick="event.stopPropagation();">
+                <input type="checkbox" class="row-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" value="${item.id}" onchange="toggleRowCheckbox(this)">
+            </td>
             <td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">${item.document_number || '-'}</td>
             <td class="px-4 py-3 text-sm text-gray-800">${item.title || '-'}</td>
             <td class="px-4 py-3 text-sm text-gray-600">${item.drafter?.name || '-'}</td>
             <td class="px-4 py-3 text-center">${statusBadge(item.status)}</td>
             <td class="px-4 py-3 text-center">${readBadge}</td>
             <td class="px-4 py-3 text-sm text-gray-500 whitespace-nowrap">${draftedAt}</td>
+            ${isSuperAdmin ? `<td class="px-4 py-3 text-center"><button onclick="event.stopPropagation(); confirmForceDelete(${item.id}, '${escapeHtml(item.title)}')" class="text-xs text-red-500 hover:text-red-700 font-medium whitespace-nowrap">영구삭제</button></td>` : ''}
         </tr>`;
     });
 
@@ -179,19 +256,27 @@ function renderTable(items, pagination) {
 }
 
 async function goToApproval(id) {
-    // 열람 추적 API 호출 후 상세 페이지로 이동
     try {
         await fetch(`/api/admin/approvals/${id}/mark-read`, {
             method: 'POST',
-            headers: {
-                'X-CSRF-TOKEN': '{{ csrf_token() }}',
-                'Accept': 'application/json',
-            },
+            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
         });
-    } catch (e) {
-        // 열람 추적 실패해도 이동은 진행
-    }
+    } catch (e) {}
     location.href = '/approval-mgmt/' + id;
 }
+
+function confirmForceDelete(id, title) {
+    if (!confirm(`"${title}" 문서를 영구삭제하시겠습니까?\n\n이 작업은 되돌릴 수 없습니다.`)) return;
+
+    fetch(`/api/admin/approvals/${id}/force`, {
+        method: 'DELETE',
+        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' }
+    })
+    .then(r => r.json())
+    .then(data => {
+        if (data.success) { showToast(data.message, 'success'); loadReferences(); }
+        else { showToast(data.message, 'error'); }
+    });
+}
 </script>
 @endpush