981c3c68d4
- 정산관리에 수당 지급 탭 추가 (파트너별 그룹핑 지급 대기 목록) - 파트너별 상세 건 목록 HTMX 확장 기능 - 수당지급현황통계 페이지 (Chart.js 4개 차트 + 월별 요약 테이블) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
303 lines
18 KiB
PHP
303 lines
18 KiB
PHP
{{-- 수당 지급 탭: 통계카드 + 파트너별 지급 대기 목록 --}}
|
|
<div id="payment-tab-container">
|
|
{{-- 통계 카드 --}}
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
|
<div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-orange-500">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm text-gray-500">지급 대기</p>
|
|
<p class="text-xl font-bold text-orange-600">{{ number_format($paymentStats['waiting_amount']) }}원</p>
|
|
</div>
|
|
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-gray-400 mt-1">{{ $paymentStats['waiting_count'] }}건 승인 완료</p>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-green-500">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm text-gray-500">이번달 지급완료</p>
|
|
<p class="text-xl font-bold text-green-600">{{ number_format($paymentStats['this_month_paid_amount']) }}원</p>
|
|
</div>
|
|
<div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-gray-400 mt-1">{{ $paymentStats['this_month_paid_count'] }}건 완료</p>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-indigo-500">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm text-gray-500">파트너 수당</p>
|
|
<p class="text-xl font-bold text-indigo-600">{{ number_format($paymentStats['partner_total']) }}원</p>
|
|
</div>
|
|
<div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-gray-400 mt-1">지급 대기 파트너 수당 합계</p>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-purple-500">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm text-gray-500">매니저+유치 수당</p>
|
|
<p class="text-xl font-bold text-purple-600">{{ number_format($paymentStats['manager_referrer_total']) }}원</p>
|
|
</div>
|
|
<div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-gray-400 mt-1">지급 대기 매니저+유치 합계</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 상단 액션 바 --}}
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center gap-2" id="payment-bulk-actions" style="display: none;">
|
|
<span class="text-sm text-gray-600"><span id="payment-selected-count">0</span>건 선택</span>
|
|
<button type="button" onclick="paymentBulkMarkPaid()"
|
|
class="px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-sm rounded-lg transition-colors">
|
|
선택 지급완료
|
|
</button>
|
|
</div>
|
|
<a href="{{ route('finance.settlement.payment-stats') }}"
|
|
hx-get="{{ route('finance.settlement.payment-stats') }}"
|
|
class="inline-flex items-center gap-1 text-sm text-indigo-600 hover:text-indigo-800">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
|
</svg>
|
|
지급현황통계
|
|
</a>
|
|
</div>
|
|
|
|
{{-- 파트너별 지급 대기 테이블 --}}
|
|
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left">
|
|
<input type="checkbox" onchange="paymentToggleSelectAll(this)" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-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-right text-xs font-medium text-gray-500 uppercase">파트너수당</th>
|
|
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">매니저수당</th>
|
|
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">유치수당</th>
|
|
<th class="px-4 py-3 text-right 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>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200">
|
|
@forelse ($partnerPayments as $pp)
|
|
@php
|
|
$partner = $partners->get($pp->partner_id);
|
|
$totalAmount = $pp->partner_total + $pp->manager_total + $pp->referrer_total;
|
|
@endphp
|
|
@if ($partner)
|
|
<tr class="hover:bg-gray-50 cursor-pointer payment-partner-row"
|
|
data-partner-id="{{ $pp->partner_id }}"
|
|
data-ids="{{ $pp->commission_ids }}">
|
|
<td class="px-4 py-3" onclick="event.stopPropagation()">
|
|
<input type="checkbox"
|
|
class="payment-checkbox rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
|
|
value="{{ $pp->commission_ids }}"
|
|
onchange="paymentUpdateSelection()">
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
<button type="button"
|
|
class="text-left hover:text-indigo-600"
|
|
hx-get="{{ route('finance.settlement.payment-partner-detail', $pp->partner_id) }}"
|
|
hx-target="#partner-detail-{{ $pp->partner_id }}"
|
|
hx-trigger="click once"
|
|
hx-swap="innerHTML">
|
|
<div class="font-medium text-gray-900">
|
|
{{ $partner->user?->name ?? '-' }}
|
|
<span class="text-xs text-gray-400">({{ $partner->partner_code }})</span>
|
|
</div>
|
|
<div class="text-xs text-gray-500">
|
|
@if ($partner->partner_type === 'corporate')
|
|
{{ $partner->company_name }}
|
|
@endif
|
|
</div>
|
|
</button>
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
@if ($partner->partner_type === 'corporate')
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">단체</span>
|
|
@else
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">개인</span>
|
|
@endif
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-gray-600">
|
|
@if ($partner->bank_name && $partner->account_number)
|
|
{{ $partner->bank_name }} {{ $partner->account_number }}
|
|
<div class="text-xs text-gray-400">{{ $partner->account_holder }}</div>
|
|
@else
|
|
<span class="text-xs text-red-500">계좌 미등록</span>
|
|
@endif
|
|
</td>
|
|
<td class="px-4 py-3 text-center text-sm font-medium text-gray-900">{{ $pp->count }}건</td>
|
|
<td class="px-4 py-3 text-right text-sm text-gray-900">{{ number_format($pp->partner_total) }}원</td>
|
|
<td class="px-4 py-3 text-right text-sm text-gray-900">{{ number_format($pp->manager_total) }}원</td>
|
|
<td class="px-4 py-3 text-right text-sm text-gray-900">{{ number_format($pp->referrer_total) }}원</td>
|
|
<td class="px-4 py-3 text-right text-sm font-bold text-gray-900">{{ number_format($totalAmount) }}원</td>
|
|
<td class="px-4 py-3 text-center" onclick="event.stopPropagation()">
|
|
<button type="button"
|
|
onclick="paymentMarkPaidPartner('{{ $pp->commission_ids }}')"
|
|
class="px-2 py-1 bg-green-600 hover:bg-green-700 text-white text-xs rounded transition-colors">
|
|
지급완료
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{{-- 확장 영역: 파트너별 상세 건 목록 --}}
|
|
<tr class="bg-gray-50">
|
|
<td colspan="10" class="px-0 py-0">
|
|
<div id="partner-detail-{{ $pp->partner_id }}"></div>
|
|
</td>
|
|
</tr>
|
|
@endif
|
|
@empty
|
|
<tr>
|
|
<td colspan="10" class="px-4 py-12 text-center text-gray-500">
|
|
<svg class="w-12 h-12 mx-auto text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<p class="text-lg font-medium">지급 대기 건이 없습니다</p>
|
|
<p class="text-sm mt-1">모든 승인된 수당이 지급 처리되었습니다.</p>
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 지급완료 모달 --}}
|
|
<div id="payment-mark-paid-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-md w-full mx-4">
|
|
<div class="p-6 border-b border-gray-200">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="text-lg font-semibold text-gray-800">지급완료 처리</h3>
|
|
<button type="button" onclick="closePaymentMarkPaidModal()" class="text-gray-400 hover:text-gray-600">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">이체 참조번호</label>
|
|
<input type="text" id="payment-bank-reference"
|
|
class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
|
|
placeholder="이체 참조번호 입력 (선택사항)">
|
|
</div>
|
|
<p class="text-sm text-gray-500 mb-4">
|
|
<span id="payment-modal-count">0</span>건의 수당을 지급완료 처리합니다.
|
|
</p>
|
|
<div class="flex justify-end gap-2">
|
|
<button type="button" onclick="closePaymentMarkPaidModal()"
|
|
class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
|
|
취소
|
|
</button>
|
|
<button type="button" onclick="confirmPaymentMarkPaid()"
|
|
class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors">
|
|
지급완료 확인
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let paymentSelectedIds = [];
|
|
let paymentPendingIds = [];
|
|
|
|
function paymentUpdateSelection() {
|
|
paymentSelectedIds = [];
|
|
document.querySelectorAll('.payment-checkbox:checked').forEach(cb => {
|
|
cb.value.split(',').forEach(id => paymentSelectedIds.push(parseInt(id)));
|
|
});
|
|
|
|
const bulkActions = document.getElementById('payment-bulk-actions');
|
|
const selectedCount = document.getElementById('payment-selected-count');
|
|
|
|
if (paymentSelectedIds.length > 0) {
|
|
bulkActions.style.display = 'flex';
|
|
selectedCount.textContent = paymentSelectedIds.length;
|
|
} else {
|
|
bulkActions.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function paymentToggleSelectAll(checkbox) {
|
|
document.querySelectorAll('.payment-checkbox').forEach(cb => { cb.checked = checkbox.checked; });
|
|
paymentUpdateSelection();
|
|
}
|
|
|
|
function paymentMarkPaidPartner(commissionIds) {
|
|
paymentPendingIds = commissionIds.split(',').map(Number);
|
|
document.getElementById('payment-modal-count').textContent = paymentPendingIds.length;
|
|
document.getElementById('payment-bank-reference').value = '';
|
|
document.getElementById('payment-mark-paid-modal').classList.remove('hidden');
|
|
}
|
|
|
|
function paymentBulkMarkPaid() {
|
|
if (paymentSelectedIds.length === 0) { alert('선택된 항목이 없습니다.'); return; }
|
|
paymentPendingIds = [...paymentSelectedIds];
|
|
document.getElementById('payment-modal-count').textContent = paymentPendingIds.length;
|
|
document.getElementById('payment-bank-reference').value = '';
|
|
document.getElementById('payment-mark-paid-modal').classList.remove('hidden');
|
|
}
|
|
|
|
function closePaymentMarkPaidModal() {
|
|
document.getElementById('payment-mark-paid-modal').classList.add('hidden');
|
|
paymentPendingIds = [];
|
|
}
|
|
|
|
function confirmPaymentMarkPaid() {
|
|
const bankReference = document.getElementById('payment-bank-reference').value;
|
|
|
|
fetch('{{ route("finance.sales-commissions.bulk-mark-paid") }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ ids: paymentPendingIds, bank_reference: bankReference })
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
alert(data.message);
|
|
closePaymentMarkPaidModal();
|
|
// 수당 지급 탭 새로고침
|
|
htmx.ajax('GET', '{{ route("finance.settlement.payment") }}', { target: '#payment-content' });
|
|
} else {
|
|
alert(data.message || '오류가 발생했습니다.');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('오류가 발생했습니다.');
|
|
});
|
|
}
|
|
</script>
|