fix:수당지급현황통계 필터 UI 개선 - 기간설정 체크박스, 파트너/매니저 드롭박스 제거, 높이 수정

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
김보곤
2026-02-20 14:18:07 +09:00
parent 8a397b1bc6
commit 44f443966a
2 changed files with 106 additions and 70 deletions

View File

@@ -398,10 +398,24 @@ public function paymentStats(Request $request): View|Response
// 필터 파라미터
$now = now();
$startYear = (int) $request->input('start_year', $now->year);
$startMonth = (int) $request->input('start_month', 1);
$endYear = (int) $request->input('end_year', $now->year);
$endMonth = (int) $request->input('end_month', $now->month);
$dateRange = $request->boolean('date_range');
if ($dateRange) {
// 기간 범위 모드
$startYear = (int) $request->input('start_year', $now->year);
$startMonth = (int) $request->input('start_month', 1);
$endYear = (int) $request->input('end_year', $now->year);
$endMonth = (int) $request->input('end_month', $now->month);
} else {
// 단일 월 모드 (기본)
$singleYear = (int) $request->input('year', $now->year);
$singleMonth = (int) $request->input('month', $now->month);
$startYear = $singleYear;
$startMonth = $singleMonth;
$endYear = $singleYear;
$endMonth = $singleMonth;
}
$status = $request->input('status');
$paymentType = $request->input('payment_type');
$partnerId = $request->input('partner_id');

View File

@@ -5,12 +5,16 @@
@section('content')
<div class="px-4 py-6" x-data="{ activeTab: 'monthly' }">
{{-- 페이지 헤더 + 필터 통합 --}}
<div class="bg-white rounded-lg shadow-sm px-4 pt-4 pb-3 mb-4">
<div class="bg-white rounded-lg shadow-sm px-5 pt-4 pb-4 mb-4">
<div class="flex items-center justify-between mb-3">
<div>
<h1 class="text-lg font-bold text-gray-800">수당지급현황통계</h1>
<p class="text-xs text-gray-400">
{{ $filters['startYear'] }} {{ $filters['startMonth'] }} ~ {{ $filters['endYear'] }} {{ $filters['endMonth'] }}
<p class="text-xs text-gray-400 mt-0.5">
@if($filters['startYear'] == $filters['endYear'] && $filters['startMonth'] == $filters['endMonth'])
{{ $filters['startYear'] }} {{ $filters['startMonth'] }} 수당 종합 통계
@else
{{ $filters['startYear'] }} {{ $filters['startMonth'] }} ~ {{ $filters['endYear'] }} {{ $filters['endMonth'] }} 수당 종합 통계
@endif
</p>
</div>
<a href="{{ route('finance.settlement', ['tab' => 'payment']) }}"
@@ -23,48 +27,78 @@ class="inline-flex items-center gap-1 px-3 py-1.5 text-gray-500 hover:text-gray-
</div>
<form method="GET" action="{{ route('finance.settlement.payment-stats') }}">
<div class="flex flex-wrap items-end gap-x-3 gap-y-2">
{{-- 시작 기간 --}}
<div class="flex items-end gap-1">
<div>
<label class="block text-[11px] text-gray-400 mb-0.5">시작</label>
<select name="start_year" class="h-8 rounded border-gray-300 text-sm pl-2 pr-7 focus:border-indigo-500 focus:ring-indigo-500">
@for ($y = now()->year; $y >= now()->year - 3; $y--)
<option value="{{ $y }}" {{ $filters['startYear'] == $y ? 'selected' : '' }}>{{ $y }}</option>
@endfor
</select>
</div>
<select name="start_month" class="h-8 rounded border-gray-300 text-sm pl-2 pr-7 focus:border-indigo-500 focus:ring-indigo-500">
@for ($m = 1; $m <= 12; $m++)
<option value="{{ $m }}" {{ $filters['startMonth'] == $m ? 'selected' : '' }}>{{ $m }}</option>
@endfor
</select>
{{-- 기간설정 체크박스 --}}
<div class="flex items-center self-end pb-1.5">
<label class="flex items-center gap-1.5 cursor-pointer select-none">
<input type="checkbox" name="date_range" value="1"
{{ ($filters['startYear'] != $filters['endYear'] || $filters['startMonth'] != $filters['endMonth']) ? 'checked' : '' }}
onchange="togglePaymentDateRange(this.checked)"
class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
<span class="text-xs font-medium text-gray-600 whitespace-nowrap">기간설정</span>
</label>
</div>
<span class="text-gray-300 pb-1 text-sm">~</span>
{{-- 종료 기간 --}}
<div class="flex items-end gap-1">
{{-- 단일 / (기본) --}}
<div id="ps-single-date" class="{{ ($filters['startYear'] != $filters['endYear'] || $filters['startMonth'] != $filters['endMonth']) ? 'hidden' : '' }} flex items-end gap-2">
<div>
<label class="block text-[11px] text-gray-400 mb-0.5">종료</label>
<select name="end_year" class="h-8 rounded border-gray-300 text-sm pl-2 pr-7 focus:border-indigo-500 focus:ring-indigo-500">
<label class="block text-xs font-medium text-gray-500 mb-1">년도</label>
<select name="year" class="rounded-lg border-gray-300 text-sm py-2 pl-3 pr-8 focus:border-indigo-500 focus:ring-indigo-500">
@for ($y = now()->year; $y >= now()->year - 3; $y--)
<option value="{{ $y }}" {{ $filters['endYear'] == $y ? 'selected' : '' }}>{{ $y }}</option>
@endfor
</select>
</div>
<select name="end_month" class="h-8 rounded border-gray-300 text-sm pl-2 pr-7 focus:border-indigo-500 focus:ring-indigo-500">
@for ($m = 1; $m <= 12; $m++)
<option value="{{ $m }}" {{ $filters['endMonth'] == $m ? 'selected' : '' }}>{{ $m }}</option>
@endfor
</select>
<div>
<label class="block text-xs font-medium text-gray-500 mb-1"></label>
<select name="month" class="rounded-lg border-gray-300 text-sm py-2 pl-3 pr-8 focus:border-indigo-500 focus:ring-indigo-500">
@for ($m = 1; $m <= 12; $m++)
<option value="{{ $m }}" {{ $filters['endMonth'] == $m ? 'selected' : '' }}>{{ $m }}</option>
@endfor
</select>
</div>
</div>
<div class="w-px h-6 bg-gray-200 self-end mb-1"></div>
{{-- 기간 범위 (체크 표시) --}}
<div id="ps-range-date" class="{{ ($filters['startYear'] != $filters['endYear'] || $filters['startMonth'] != $filters['endMonth']) ? '' : 'hidden' }} flex items-end gap-2">
<div>
<label class="block text-xs font-medium text-gray-500 mb-1">시작</label>
<select name="start_year" class="rounded-lg border-gray-300 text-sm py-2 pl-3 pr-8 focus:border-indigo-500 focus:ring-indigo-500">
@for ($y = now()->year; $y >= now()->year - 3; $y--)
<option value="{{ $y }}" {{ $filters['startYear'] == $y ? 'selected' : '' }}>{{ $y }}</option>
@endfor
</select>
</div>
<div>
<label class="block text-xs font-medium text-gray-500 mb-1">&nbsp;</label>
<select name="start_month" class="rounded-lg border-gray-300 text-sm py-2 pl-3 pr-8 focus:border-indigo-500 focus:ring-indigo-500">
@for ($m = 1; $m <= 12; $m++)
<option value="{{ $m }}" {{ $filters['startMonth'] == $m ? 'selected' : '' }}>{{ $m }}</option>
@endfor
</select>
</div>
<span class="text-gray-400 pb-2">~</span>
<div>
<label class="block text-xs font-medium text-gray-500 mb-1">종료</label>
<select name="end_year" class="rounded-lg border-gray-300 text-sm py-2 pl-3 pr-8 focus:border-indigo-500 focus:ring-indigo-500">
@for ($y = now()->year; $y >= now()->year - 3; $y--)
<option value="{{ $y }}" {{ $filters['endYear'] == $y ? 'selected' : '' }}>{{ $y }}</option>
@endfor
</select>
</div>
<div>
<label class="block text-xs font-medium text-gray-500 mb-1">&nbsp;</label>
<select name="end_month" class="rounded-lg border-gray-300 text-sm py-2 pl-3 pr-8 focus:border-indigo-500 focus:ring-indigo-500">
@for ($m = 1; $m <= 12; $m++)
<option value="{{ $m }}" {{ $filters['endMonth'] == $m ? 'selected' : '' }}>{{ $m }}</option>
@endfor
</select>
</div>
</div>
{{-- 상태 --}}
<div>
<label class="block text-[11px] text-gray-400 mb-0.5">상태</label>
<select name="status" class="h-8 rounded border-gray-300 text-sm pl-2 pr-7 focus:border-indigo-500 focus:ring-indigo-500">
<label class="block text-xs font-medium text-gray-500 mb-1">상태</label>
<select name="status" class="rounded-lg border-gray-300 text-sm py-2 pl-3 pr-8 focus:border-indigo-500 focus:ring-indigo-500">
<option value="">전체</option>
<option value="pending" {{ $filters['status'] === 'pending' ? 'selected' : '' }}>대기</option>
<option value="approved" {{ $filters['status'] === 'approved' ? 'selected' : '' }}>승인</option>
@@ -75,55 +109,29 @@ class="inline-flex items-center gap-1 px-3 py-1.5 text-gray-500 hover:text-gray-
{{-- 지급유형 --}}
<div>
<label class="block text-[11px] text-gray-400 mb-0.5">유형</label>
<select name="payment_type" class="h-8 rounded border-gray-300 text-sm pl-2 pr-7 focus:border-indigo-500 focus:ring-indigo-500">
<label class="block text-xs font-medium text-gray-500 mb-1">유형</label>
<select name="payment_type" class="rounded-lg border-gray-300 text-sm py-2 pl-3 pr-8 focus:border-indigo-500 focus:ring-indigo-500">
<option value="">전체</option>
<option value="deposit" {{ $filters['paymentType'] === 'deposit' ? 'selected' : '' }}>1</option>
<option value="balance" {{ $filters['paymentType'] === 'balance' ? 'selected' : '' }}>2</option>
</select>
</div>
{{-- 파트너 --}}
<div>
<label class="block text-[11px] text-gray-400 mb-0.5">파트너</label>
<select name="partner_id" class="h-8 rounded border-gray-300 text-sm pl-2 pr-7 focus:border-indigo-500 focus:ring-indigo-500">
<option value="">전체</option>
@foreach ($partners as $partner)
<option value="{{ $partner->id }}" {{ $filters['partnerId'] == $partner->id ? 'selected' : '' }}>
{{ $partner->user?->name ?? $partner->partner_code }}
</option>
@endforeach
</select>
</div>
{{-- 매니저 --}}
<div>
<label class="block text-[11px] text-gray-400 mb-0.5">매니저</label>
<select name="manager_user_id" class="h-8 rounded border-gray-300 text-sm pl-2 pr-7 focus:border-indigo-500 focus:ring-indigo-500">
<option value="">전체</option>
@foreach ($managers as $manager)
<option value="{{ $manager->id }}" {{ $filters['managerUserId'] == $manager->id ? 'selected' : '' }}>
{{ $manager->name }}
</option>
@endforeach
</select>
</div>
{{-- 검색어 --}}
<div>
<label class="block text-[11px] text-gray-400 mb-0.5">검색</label>
<input type="text" name="search" value="{{ $filters['search'] }}" placeholder="파트너, 고객사..."
class="h-8 w-36 rounded border-gray-300 text-sm pl-2 pr-2 focus:border-indigo-500 focus:ring-indigo-500">
<label class="block text-xs font-medium text-gray-500 mb-1">검색</label>
<input type="text" name="search" value="{{ $filters['search'] }}" placeholder="파트너명, 매니저, 고객사..."
class="rounded-lg border-gray-300 text-sm py-2 pl-3 pr-3 w-44 focus:border-indigo-500 focus:ring-indigo-500">
</div>
{{-- 조회 / 초기화 --}}
<div class="flex items-end gap-1 ml-auto">
<div class="flex items-end gap-1.5">
<button type="submit"
class="h-8 px-5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm rounded transition-colors">
class="px-5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm rounded-lg transition-colors">
조회
</button>
<a href="{{ route('finance.settlement.payment-stats') }}"
class="h-8 px-3 inline-flex items-center bg-gray-100 hover:bg-gray-200 text-gray-600 text-sm rounded transition-colors">
class="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-600 text-sm rounded-lg transition-colors">
초기화
</a>
</div>
@@ -131,6 +139,20 @@ class="h-8 px-3 inline-flex items-center bg-gray-100 hover:bg-gray-200 text-gray
</form>
</div>
<script>
function togglePaymentDateRange(checked) {
document.getElementById('ps-single-date').classList.toggle('hidden', checked);
document.getElementById('ps-range-date').classList.toggle('hidden', !checked);
document.querySelectorAll('#ps-single-date select').forEach(s => s.disabled = checked);
document.querySelectorAll('#ps-range-date select').forEach(s => s.disabled = !checked);
}
document.addEventListener('DOMContentLoaded', function() {
const checked = document.querySelector('input[name="date_range"]')?.checked || false;
document.querySelectorAll('#ps-single-date select').forEach(s => s.disabled = checked);
document.querySelectorAll('#ps-range-date select').forEach(s => s.disabled = !checked);
});
</script>
{{-- 통계 카드 8 --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
{{-- 1. 수당 발생액 --}}