495 lines
22 KiB
PHP
495 lines
22 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '정산관리')
|
|
|
|
@section('content')
|
|
<div class="px-4 py-6" x-data="{ activeTab: '{{ $initialTab }}', commissionSubTab: 'partner' }">
|
|
{{-- 페이지 헤더 --}}
|
|
<div class="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-4 mb-6">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-800">정산관리</h1>
|
|
<p class="text-sm text-gray-500 mt-1">통합 정산 현황</p>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<button type="button"
|
|
onclick="exportCurrentTable()"
|
|
class="inline-flex items-center gap-2 px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
|
</svg>
|
|
내보내기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 통합 통계 카드 --}}
|
|
@include('finance.settlement.partials.summary-stats', ['summaryStats' => $summaryStats])
|
|
|
|
{{-- 탭 네비게이션 --}}
|
|
<div class="border-b border-gray-200 mb-6">
|
|
<nav class="flex -mb-px space-x-1 overflow-x-auto">
|
|
<button @click="activeTab = 'commission'"
|
|
:class="activeTab === 'commission' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
|
|
class="border-b-2 py-3 px-4 text-sm font-medium whitespace-nowrap transition-colors">
|
|
수당 관리
|
|
</button>
|
|
<button @click="activeTab = 'customer'"
|
|
hx-get="{{ route('finance.settlement.customer') }}"
|
|
hx-target="#customer-content"
|
|
hx-trigger="click once"
|
|
hx-indicator="#customer-loading"
|
|
:class="activeTab === 'customer' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
|
|
class="border-b-2 py-3 px-4 text-sm font-medium whitespace-nowrap transition-colors">
|
|
고객사정산
|
|
</button>
|
|
<button @click="activeTab = 'subscription'"
|
|
hx-get="{{ route('finance.settlement.subscription') }}"
|
|
hx-target="#subscription-content"
|
|
hx-trigger="click once"
|
|
hx-indicator="#subscription-loading"
|
|
:class="activeTab === 'subscription' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
|
|
class="border-b-2 py-3 px-4 text-sm font-medium whitespace-nowrap transition-colors">
|
|
구독관리
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
{{-- 탭 1: 수당 관리 (즉시 렌더링) --}}
|
|
<div x-show="activeTab === 'commission'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
|
|
{{-- 통계 카드 --}}
|
|
<div id="commission-stats-container">
|
|
@include('finance.settlement.partials.commission.stats-cards', ['stats' => $stats, 'year' => $year, 'month' => $month])
|
|
</div>
|
|
|
|
{{-- 필터 --}}
|
|
@include('finance.settlement.partials.commission.filters', ['filters' => $filters, 'partners' => $partners, 'year' => $year, 'month' => $month])
|
|
|
|
{{-- 서브탭 --}}
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<div class="inline-flex rounded-lg bg-gray-100 p-1">
|
|
<button @click="commissionSubTab = 'partner'; window.clearAllCheckboxes()"
|
|
:class="commissionSubTab === 'partner' ? 'bg-white text-indigo-600 shadow-sm' : 'text-gray-500 hover:text-gray-700'"
|
|
class="px-4 py-1.5 text-sm font-medium rounded-md transition-all">
|
|
영업파트너 수당
|
|
</button>
|
|
<button @click="commissionSubTab = 'manager'; window.clearAllCheckboxes()"
|
|
:class="commissionSubTab === 'manager' ? 'bg-white text-indigo-600 shadow-sm' : 'text-gray-500 hover:text-gray-700'"
|
|
class="px-4 py-1.5 text-sm font-medium rounded-md transition-all">
|
|
매니저 수당
|
|
</button>
|
|
</div>
|
|
|
|
{{-- 일괄 처리 버튼 --}}
|
|
<div class="flex items-center gap-2 ml-auto" id="bulk-actions" style="display: none;">
|
|
<span class="text-sm text-gray-600"><span id="selected-count">0</span>건 선택</span>
|
|
<button type="button" onclick="bulkApprove()" class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-lg transition-colors">
|
|
일괄 승인
|
|
</button>
|
|
<button type="button" onclick="bulkMarkPaid()" class="px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-sm rounded-lg transition-colors">
|
|
일괄 지급완료
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 서브탭 1: 영업파트너 수당 테이블 --}}
|
|
<div x-show="commissionSubTab === 'partner'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
|
|
<div id="commission-table-container">
|
|
@include('finance.settlement.partials.commission.partner-commission-table', ['commissions' => $commissions])
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 서브탭 2: 매니저 수당 테이블 --}}
|
|
<div x-show="commissionSubTab === 'manager'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
|
|
<div id="manager-table-container">
|
|
@include('finance.settlement.partials.commission.manager-commission-table', ['commissions' => $commissions])
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 탭 2: 고객사정산 (HTMX lazy load) --}}
|
|
<div x-show="activeTab === 'customer'" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
|
|
<div id="customer-content">
|
|
<div id="customer-loading" class="flex items-center justify-center py-12">
|
|
<svg class="w-8 h-8 animate-spin text-indigo-600" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<span class="ml-3 text-gray-500">로딩 중...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 탭 3: 구독관리 (HTMX lazy load) --}}
|
|
<div x-show="activeTab === 'subscription'" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
|
|
<div id="subscription-content">
|
|
<div id="subscription-loading" class="flex items-center justify-center py-12">
|
|
<svg class="w-8 h-8 animate-spin text-indigo-600" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<span class="ml-3 text-gray-500">로딩 중...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 상세 모달 --}}
|
|
<div id="detail-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
|
|
<div class="bg-white rounded-lg shadow-xl max-w-3xl w-full mx-4 max-h-[90vh] overflow-y-auto">
|
|
<div id="detail-modal-content"></div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
let selectedIds = [];
|
|
|
|
function clearAllCheckboxes() {
|
|
document.querySelectorAll('.commission-checkbox').forEach(cb => { cb.checked = false; });
|
|
document.querySelectorAll('thead input[type="checkbox"]').forEach(cb => { cb.checked = false; });
|
|
selectedIds = [];
|
|
document.getElementById('bulk-actions').style.display = 'none';
|
|
}
|
|
|
|
function updateSelection() {
|
|
const container = document.querySelector('[x-show="commissionSubTab === \'partner\'"]')?.offsetParent !== null
|
|
? document.querySelector('[x-show="commissionSubTab === \'partner\'"]')
|
|
: document.querySelector('[x-show="commissionSubTab === \'manager\'"]');
|
|
selectedIds = container
|
|
? Array.from(container.querySelectorAll('.commission-checkbox:checked')).map(cb => parseInt(cb.value))
|
|
: [];
|
|
|
|
const bulkActions = document.getElementById('bulk-actions');
|
|
const selectedCount = document.getElementById('selected-count');
|
|
|
|
if (selectedIds.length > 0) {
|
|
bulkActions.style.display = 'flex';
|
|
selectedCount.textContent = selectedIds.length;
|
|
} else {
|
|
bulkActions.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function toggleSelectAll(checkbox) {
|
|
const container = checkbox.closest('.bg-white.rounded-lg');
|
|
container.querySelectorAll('.commission-checkbox').forEach(cb => { cb.checked = checkbox.checked; });
|
|
updateSelection();
|
|
}
|
|
|
|
function openDetailModal(commissionId) {
|
|
fetch('{{ url("finance/sales-commissions") }}/' + commissionId + '/detail')
|
|
.then(response => response.text())
|
|
.then(html => {
|
|
document.getElementById('detail-modal-content').innerHTML = html;
|
|
document.getElementById('detail-modal').classList.remove('hidden');
|
|
});
|
|
}
|
|
|
|
function closeDetailModal() {
|
|
document.getElementById('detail-modal').classList.add('hidden');
|
|
}
|
|
|
|
function approveCommission(id) {
|
|
if (!confirm('승인하시겠습니까?')) return;
|
|
|
|
fetch('{{ url("finance/sales-commissions") }}/' + id + '/approve', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json',
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
alert(data.message);
|
|
location.reload();
|
|
} else {
|
|
alert(data.message || '오류가 발생했습니다.');
|
|
}
|
|
});
|
|
}
|
|
|
|
function bulkApprove() {
|
|
if (selectedIds.length === 0) { alert('선택된 항목이 없습니다.'); return; }
|
|
if (!confirm(selectedIds.length + '건을 승인하시겠습니까?')) return;
|
|
|
|
fetch('{{ route("finance.sales-commissions.bulk-approve") }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ ids: selectedIds })
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) { alert(data.message); location.reload(); }
|
|
else { alert(data.message || '오류가 발생했습니다.'); }
|
|
});
|
|
}
|
|
|
|
function markPaidCommission(id) {
|
|
const bankReference = prompt('이체 참조번호를 입력하세요 (선택사항)');
|
|
if (bankReference === null) return;
|
|
|
|
fetch('{{ url("finance/sales-commissions") }}/' + id + '/mark-paid', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ bank_reference: bankReference })
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) { alert(data.message); location.reload(); }
|
|
else { alert(data.message || '오류가 발생했습니다.'); }
|
|
});
|
|
}
|
|
|
|
function bulkMarkPaid() {
|
|
if (selectedIds.length === 0) { alert('선택된 항목이 없습니다.'); return; }
|
|
const bankReference = prompt('이체 참조번호를 입력하세요 (선택사항)');
|
|
if (bankReference === null) return;
|
|
if (!confirm(selectedIds.length + '건을 지급완료 처리하시겠습니까?')) return;
|
|
|
|
fetch('{{ route("finance.sales-commissions.bulk-mark-paid") }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ ids: selectedIds, bank_reference: bankReference })
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) { alert(data.message); location.reload(); }
|
|
else { alert(data.message || '오류가 발생했습니다.'); }
|
|
});
|
|
}
|
|
|
|
function unapproveCommission(id) {
|
|
if (!confirm('승인을 취소하시겠습니까?')) return;
|
|
|
|
fetch('{{ url("finance/sales-commissions") }}/' + id + '/unapprove', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json',
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) { alert(data.message); location.reload(); }
|
|
else { alert(data.message || '오류가 발생했습니다.'); }
|
|
});
|
|
}
|
|
|
|
function cancelCommission(id) {
|
|
if (!confirm('취소하시겠습니까?')) return;
|
|
|
|
fetch('{{ url("finance/sales-commissions") }}/' + id + '/cancel', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json',
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) { alert(data.message); location.reload(); }
|
|
else { alert(data.message || '오류가 발생했습니다.'); }
|
|
});
|
|
}
|
|
|
|
function saveSettlementDate(commissionId, field, value) {
|
|
fetch(`{{ url('finance/sales-commissions') }}/${commissionId}/update-date`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json'
|
|
},
|
|
body: JSON.stringify({ field: field, value: value })
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (!data.success) {
|
|
alert(data.message || '저장에 실패했습니다.');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('저장 중 오류가 발생했습니다.');
|
|
});
|
|
}
|
|
|
|
function formatCommissionInput(el) {
|
|
const raw = el.value.replace(/,/g, '').replace(/[^0-9]/g, '');
|
|
el.value = raw ? Number(raw).toLocaleString() : '';
|
|
}
|
|
|
|
function exportCurrentTable() {
|
|
let table, filename;
|
|
const today = new Date().toISOString().slice(0, 10).replace(/-/g, '');
|
|
|
|
// 현재 보이는 탭의 테이블 감지 (display !== 'none'인 컨테이너)
|
|
const commissionPanel = document.querySelector('#commission-table-container');
|
|
const managerPanel = document.querySelector('#manager-table-container');
|
|
const customerPanel = document.querySelector('#customer-content');
|
|
const subscriptionPanel = document.querySelector('#subscription-content');
|
|
|
|
if (customerPanel && customerPanel.closest('[x-show]')?.style.display !== 'none' && customerPanel.querySelector('table')) {
|
|
table = customerPanel.querySelector('table');
|
|
filename = `고객사정산_${today}.csv`;
|
|
} else if (subscriptionPanel && subscriptionPanel.closest('[x-show]')?.style.display !== 'none' && subscriptionPanel.querySelector('table')) {
|
|
table = subscriptionPanel.querySelector('table');
|
|
filename = `구독관리_${today}.csv`;
|
|
} else if (managerPanel && managerPanel.closest('[x-show]')?.style.display !== 'none' && managerPanel.querySelector('table')) {
|
|
table = managerPanel.querySelector('table');
|
|
filename = `매니저수당_${today}.csv`;
|
|
} else if (commissionPanel && commissionPanel.querySelector('table')) {
|
|
table = commissionPanel.querySelector('table');
|
|
filename = `영업파트너수당_${today}.csv`;
|
|
}
|
|
|
|
if (!table) {
|
|
alert('내보낼 데이터가 없습니다.');
|
|
return;
|
|
}
|
|
|
|
// 제외할 컬럼 인덱스 파악 (체크박스, 액션)
|
|
const skipCols = new Set();
|
|
const ths = table.querySelectorAll('thead th');
|
|
ths.forEach((th, i) => {
|
|
const text = th.textContent.trim();
|
|
if (!text || text === '액션') skipCols.add(i);
|
|
});
|
|
|
|
// 헤더 추출
|
|
const rows = [];
|
|
const headerRow = [];
|
|
ths.forEach((th, i) => {
|
|
if (skipCols.has(i)) return;
|
|
headerRow.push(th.textContent.trim());
|
|
});
|
|
rows.push(headerRow);
|
|
const totalCols = headerRow.length;
|
|
|
|
// rowspan 추적용 배열: 각 논리 열에 대해 남은 rowspan과 값
|
|
const rowspanTracker = new Array(totalCols).fill(null);
|
|
|
|
// 본문 추출 (rowspan 처리)
|
|
const tbody = table.querySelector('tbody');
|
|
if (tbody) {
|
|
tbody.querySelectorAll('tr').forEach(tr => {
|
|
if (tr.querySelector('td[colspan]')) return;
|
|
|
|
const tds = tr.querySelectorAll('td');
|
|
const row = new Array(totalCols).fill('');
|
|
let tdIdx = 0; // 실제 DOM td 인덱스
|
|
let logicalIdx = 0; // 논리 열 인덱스 (skip 컬럼 포함)
|
|
let outIdx = 0; // 출력 열 인덱스
|
|
|
|
while (outIdx < totalCols && tdIdx <= tds.length) {
|
|
// 현재 논리 열이 skip 대상인지 확인
|
|
if (skipCols.has(logicalIdx)) {
|
|
// skip 컬럼의 td 소비 (rowspan이 아닌 경우)
|
|
if (!rowspanTracker[logicalIdx] || rowspanTracker[logicalIdx].remaining <= 0) {
|
|
if (tdIdx < tds.length) tdIdx++;
|
|
} else {
|
|
rowspanTracker[logicalIdx].remaining--;
|
|
}
|
|
logicalIdx++;
|
|
continue;
|
|
}
|
|
|
|
// rowspan이 남아 있으면 이전 값 사용
|
|
if (rowspanTracker[logicalIdx] && rowspanTracker[logicalIdx].remaining > 0) {
|
|
row[outIdx] = rowspanTracker[logicalIdx].value;
|
|
rowspanTracker[logicalIdx].remaining--;
|
|
outIdx++;
|
|
logicalIdx++;
|
|
continue;
|
|
}
|
|
|
|
// 현재 td에서 값 추출
|
|
if (tdIdx < tds.length) {
|
|
const td = tds[tdIdx];
|
|
const rs = parseInt(td.getAttribute('rowspan') || '1');
|
|
|
|
// 셀 값 추출
|
|
const dateInput = td.querySelector('input[type="date"]');
|
|
const textInput = td.querySelector('input[type="text"]');
|
|
let text;
|
|
if (dateInput) {
|
|
text = dateInput.value || '';
|
|
} else if (textInput) {
|
|
text = textInput.value || '';
|
|
} else {
|
|
text = td.textContent.replace(/\s+/g, ' ').trim();
|
|
}
|
|
|
|
row[outIdx] = text;
|
|
|
|
// rowspan 기록
|
|
if (rs > 1) {
|
|
rowspanTracker[logicalIdx] = { value: text, remaining: rs - 1 };
|
|
} else {
|
|
rowspanTracker[logicalIdx] = null;
|
|
}
|
|
|
|
tdIdx++;
|
|
}
|
|
|
|
outIdx++;
|
|
logicalIdx++;
|
|
}
|
|
|
|
if (row.some(c => c !== '')) {
|
|
rows.push(row);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (rows.length <= 1) {
|
|
alert('내보낼 데이터가 없습니다.');
|
|
return;
|
|
}
|
|
|
|
// CSV 생성 (UTF-8 BOM 포함)
|
|
const BOM = '\uFEFF';
|
|
const csvContent = BOM + rows.map(row =>
|
|
row.map(cell => {
|
|
const escaped = String(cell).replace(/"/g, '""');
|
|
return `"${escaped}"`;
|
|
}).join(',')
|
|
).join('\n');
|
|
|
|
// 다운로드
|
|
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
|
const link = document.createElement('a');
|
|
link.href = URL.createObjectURL(blob);
|
|
link.download = filename;
|
|
link.click();
|
|
URL.revokeObjectURL(link.href);
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const initialTab = '{{ $initialTab }}';
|
|
const tabRoutes = {
|
|
'customer': '{{ route("finance.settlement.customer") }}',
|
|
'subscription': '{{ route("finance.settlement.subscription") }}',
|
|
};
|
|
if (tabRoutes[initialTab]) {
|
|
htmx.ajax('GET', tabRoutes[initialTab], {target: '#' + initialTab + '-content'});
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|