feat:영업파트너 승인 페이지 2분할 레이아웃 개선

- 좌측: 승인 대기자 목록 (노란색 헤더)
- 우측: 승인 완료 목록 (초록색 헤더, 최근 승인 순)
- 각 패널에 건수 표시 및 독립적 페이지네이션
- 컴팩트한 테이블 디자인으로 더 많은 정보 표시

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
pro
2026-01-31 11:44:36 +09:00
parent 1e8474cd62
commit d6b3fa193a
2 changed files with 218 additions and 129 deletions

View File

@@ -347,15 +347,23 @@ public function approvals(Request $request): View|Response
return response('', 200)->header('HX-Redirect', route('sales.managers.approvals'));
}
$filters = [
'search' => $request->get('search'),
'approval_status' => 'pending', // 승인 대기
];
$search = $request->get('search');
// 승인 대기자 목록
$pendingPartners = $this->service->getSalesPartners([
'search' => $search,
'approval_status' => 'pending',
])->paginate(10, ['*'], 'pending_page');
// 승인된 파트너 목록 (최근 승인 순)
$approvedPartners = $this->service->getSalesPartners([
'search' => $search,
'approval_status' => 'approved',
])->reorder()->latest('approved_at')->paginate(10, ['*'], 'approved_page');
$partners = $this->service->getSalesPartners($filters)->paginate(20);
$stats = $this->service->getApprovalStats();
return view('sales.managers.approvals', compact('partners', 'stats'));
return view('sales.managers.approvals', compact('pendingPartners', 'approvedPartners', 'stats'));
}
/**

View File

@@ -5,7 +5,7 @@
@section('content')
<div class="flex flex-col h-full">
<!-- 페이지 헤더 -->
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-6 flex-shrink-0">
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4 flex-shrink-0">
<div>
<h1 class="text-2xl font-bold text-gray-800">영업파트너 승인</h1>
<p class="text-sm text-gray-500 mt-1">영업파트너 가입 신청을 검토하고 승인/반려합니다</p>
@@ -13,137 +13,227 @@
</div>
<!-- 통계 카드 -->
<div class="grid grid-cols-3 gap-4 mb-6 flex-shrink-0">
<div class="bg-yellow-50 rounded-lg shadow-sm p-4">
<div class="text-sm text-yellow-600">승인 대기</div>
<div class="text-2xl font-bold text-yellow-800">{{ number_format($stats['pending']) }}</div>
<div class="grid grid-cols-3 gap-4 mb-4 flex-shrink-0">
<div class="bg-yellow-50 rounded-lg shadow-sm p-3">
<div class="text-xs text-yellow-600">승인 대기</div>
<div class="text-xl font-bold text-yellow-800">{{ number_format($stats['pending']) }}</div>
</div>
<div class="bg-emerald-50 rounded-lg shadow-sm p-4">
<div class="text-sm text-emerald-600">오늘 승인</div>
<div class="text-2xl font-bold text-emerald-800">{{ number_format($stats['approved_today']) }}</div>
<div class="bg-emerald-50 rounded-lg shadow-sm p-3">
<div class="text-xs text-emerald-600">오늘 승인</div>
<div class="text-xl font-bold text-emerald-800">{{ number_format($stats['approved_today']) }}</div>
</div>
<div class="bg-red-50 rounded-lg shadow-sm p-4">
<div class="text-sm text-red-600">오늘 반려</div>
<div class="text-2xl font-bold text-red-800">{{ number_format($stats['rejected_today']) }}</div>
<div class="bg-red-50 rounded-lg shadow-sm p-3">
<div class="text-xs text-red-600">오늘 반려</div>
<div class="text-xl font-bold text-red-800">{{ number_format($stats['rejected_today']) }}</div>
</div>
</div>
<!-- 필터 영역 -->
<div class="flex-shrink-0 mb-4">
<form method="GET" class="flex flex-wrap gap-2 sm:gap-4 items-center bg-white p-4 rounded-lg shadow-sm">
<form method="GET" class="flex flex-wrap gap-2 sm:gap-4 items-center bg-white p-3 rounded-lg shadow-sm">
<div class="flex-1 min-w-0 w-full sm:w-auto">
<input type="text"
name="search"
value="{{ request('search') }}"
placeholder="이름, 아이디, 이메일, 전화번호로 검색..."
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
</div>
<button type="submit" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg transition w-full sm:w-auto">
<button type="submit" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg transition text-sm">
검색
</button>
</form>
</div>
<!-- 테이블 -->
<div class="bg-white rounded-lg shadow-sm overflow-hidden flex-1 flex flex-col min-h-0">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">신청자</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">아이디</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">역할</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">연락처</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">추천인(유치자)</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">신청일</th>
<th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">처리</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
@forelse($partners as $partner)
<tr class="hover:bg-gray-50" id="partner-row-{{ $partner->id }}">
<td class="px-6 py-4 whitespace-nowrap">
<div class="font-medium text-gray-900">{{ $partner->name }}</div>
@if($partner->email)
<div class="text-sm text-gray-500">{{ $partner->email }}</div>
@endif
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
{{ $partner->user_id ?? '-' }}
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex flex-wrap gap-1">
@foreach($partner->userRoles as $userRole)
@php
$roleColor = match($userRole->role->name ?? '') {
'sales' => 'bg-blue-100 text-blue-800',
'manager' => 'bg-purple-100 text-purple-800',
'recruiter' => 'bg-green-100 text-green-800',
default => 'bg-gray-100 text-gray-800',
};
$roleLabel = match($userRole->role->name ?? '') {
'sales' => '영업',
'manager' => '매니저',
'recruiter' => '유치담당',
default => $userRole->role->name ?? '-',
};
@endphp
<span class="px-2 py-1 text-xs font-medium rounded-full {{ $roleColor }}">
{{ $roleLabel }}
</span>
@endforeach
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{{ $partner->phone ?? '-' }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
@if($partner->parent)
<span class="text-blue-600">{{ $partner->parent->name }}</span>
@else
<span class="text-gray-400">-</span>
@endif
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{{ $partner->created_at->format('Y-m-d H:i') }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-center">
<div class="flex items-center justify-center gap-2">
<button type="button"
onclick="approvePartner({{ $partner->id }}, '{{ $partner->name }}')"
class="px-3 py-1.5 bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium rounded-lg transition">
승인
</button>
<button type="button"
onclick="openRejectModal({{ $partner->id }}, '{{ $partner->name }}')"
class="px-3 py-1.5 bg-red-500 hover:bg-red-600 text-white text-sm font-medium rounded-lg transition">
반려
</button>
<button type="button"
onclick="openDetailModal({{ $partner->id }})"
class="px-3 py-1.5 bg-gray-500 hover:bg-gray-600 text-white text-sm font-medium rounded-lg transition">
상세
</button>
</div>
</td>
</tr>
@empty
<tr>
<td colspan="7" class="px-6 py-12 text-center text-gray-500">
승인 대기 중인 영업파트너가 없습니다.
</td>
</tr>
@endforelse
</tbody>
</table>
<!-- 2분할 레이아웃 -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 flex-1 min-h-0">
<!-- 좌측: 승인 대기 -->
<div class="bg-white rounded-lg shadow-sm overflow-hidden flex flex-col min-h-0">
<div class="bg-yellow-500 text-white px-4 py-3 flex items-center gap-2 flex-shrink-0">
<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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="font-semibold">승인 대기</span>
<span class="ml-auto bg-yellow-600 px-2 py-0.5 rounded-full text-xs">{{ $pendingPartners->total() }}</span>
</div>
<div class="overflow-y-auto flex-1">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50 sticky top-0">
<tr>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">신청자</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">역할</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">유치자</th>
<th class="px-4 py-2 text-center text-xs font-medium text-gray-500 uppercase">처리</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200" id="pendingTable">
@forelse($pendingPartners as $partner)
<tr class="hover:bg-yellow-50" id="pending-row-{{ $partner->id }}">
<td class="px-4 py-3">
<div class="font-medium text-gray-900 text-sm">{{ $partner->name }}</div>
<div class="text-xs text-gray-500">{{ $partner->user_id ?? $partner->email }}</div>
<div class="text-xs text-gray-400">{{ $partner->created_at->format('m/d H:i') }}</div>
</td>
<td class="px-4 py-3">
<div class="flex flex-wrap gap-1">
@foreach($partner->userRoles as $userRole)
@php
$roleColor = match($userRole->role->name ?? '') {
'sales' => 'bg-blue-100 text-blue-800',
'manager' => 'bg-purple-100 text-purple-800',
'recruiter' => 'bg-green-100 text-green-800',
default => 'bg-gray-100 text-gray-800',
};
$roleLabel = match($userRole->role->name ?? '') {
'sales' => '영업',
'manager' => '매니저',
'recruiter' => '유치담당',
default => $userRole->role->name ?? '-',
};
@endphp
<span class="px-1.5 py-0.5 text-xs font-medium rounded {{ $roleColor }}">
{{ $roleLabel }}
</span>
@endforeach
</div>
</td>
<td class="px-4 py-3 text-xs text-gray-500">
@if($partner->parent)
<span class="text-blue-600">{{ $partner->parent->name }}</span>
@else
<span class="text-gray-400">-</span>
@endif
</td>
<td class="px-4 py-3 text-center">
<div class="flex items-center justify-center gap-1">
<button type="button"
onclick="approvePartner({{ $partner->id }}, '{{ $partner->name }}')"
class="px-2 py-1 bg-emerald-500 hover:bg-emerald-600 text-white text-xs font-medium rounded transition">
승인
</button>
<button type="button"
onclick="openRejectModal({{ $partner->id }}, '{{ $partner->name }}')"
class="px-2 py-1 bg-red-500 hover:bg-red-600 text-white text-xs font-medium rounded transition">
반려
</button>
<button type="button"
onclick="openDetailModal({{ $partner->id }})"
class="px-2 py-1 bg-gray-400 hover:bg-gray-500 text-white text-xs font-medium rounded transition">
상세
</button>
</div>
</td>
</tr>
@empty
<tr>
<td colspan="4" class="px-4 py-8 text-center text-gray-500 text-sm">
<svg class="w-12 h-12 mx-auto text-gray-300 mb-2" 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>
승인 대기 중인 파트너가 없습니다.
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
@if($pendingPartners->hasPages())
<div class="px-4 py-2 border-t border-gray-200 flex-shrink-0 bg-gray-50">
{{ $pendingPartners->withQueryString()->links() }}
</div>
@endif
</div>
<!-- 페이지네이션 -->
@if($partners->hasPages())
<div class="px-6 py-4 border-t border-gray-200">
{{ $partners->withQueryString()->links() }}
<!-- 우측: 승인 완료 -->
<div class="bg-white rounded-lg shadow-sm overflow-hidden flex flex-col min-h-0">
<div class="bg-emerald-500 text-white px-4 py-3 flex items-center gap-2 flex-shrink-0">
<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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="font-semibold">승인 완료</span>
<span class="ml-auto bg-emerald-600 px-2 py-0.5 rounded-full text-xs">{{ $approvedPartners->total() }}</span>
</div>
<div class="overflow-y-auto flex-1">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50 sticky top-0">
<tr>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">파트너</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">역할</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">유치자</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">승인일</th>
<th class="px-4 py-2 text-center text-xs font-medium text-gray-500 uppercase">상세</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200" id="approvedTable">
@forelse($approvedPartners as $partner)
<tr class="hover:bg-emerald-50" id="approved-row-{{ $partner->id }}">
<td class="px-4 py-3">
<div class="font-medium text-gray-900 text-sm">{{ $partner->name }}</div>
<div class="text-xs text-gray-500">{{ $partner->user_id ?? $partner->email }}</div>
</td>
<td class="px-4 py-3">
<div class="flex flex-wrap gap-1">
@foreach($partner->userRoles as $userRole)
@php
$roleColor = match($userRole->role->name ?? '') {
'sales' => 'bg-blue-100 text-blue-800',
'manager' => 'bg-purple-100 text-purple-800',
'recruiter' => 'bg-green-100 text-green-800',
default => 'bg-gray-100 text-gray-800',
};
$roleLabel = match($userRole->role->name ?? '') {
'sales' => '영업',
'manager' => '매니저',
'recruiter' => '유치담당',
default => $userRole->role->name ?? '-',
};
@endphp
<span class="px-1.5 py-0.5 text-xs font-medium rounded {{ $roleColor }}">
{{ $roleLabel }}
</span>
@endforeach
</div>
</td>
<td class="px-4 py-3 text-xs text-gray-500">
@if($partner->parent)
<span class="text-blue-600">{{ $partner->parent->name }}</span>
@else
<span class="text-gray-400">-</span>
@endif
</td>
<td class="px-4 py-3 text-xs text-gray-500">
@if($partner->approved_at)
{{ $partner->approved_at->format('m/d H:i') }}
@else
-
@endif
</td>
<td class="px-4 py-3 text-center">
<button type="button"
onclick="openDetailModal({{ $partner->id }})"
class="px-2 py-1 bg-gray-400 hover:bg-gray-500 text-white text-xs font-medium rounded transition">
상세
</button>
</td>
</tr>
@empty
<tr>
<td colspan="5" class="px-4 py-8 text-center text-gray-500 text-sm">
<svg class="w-12 h-12 mx-auto text-gray-300 mb-2" 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>
승인된 파트너가 없습니다.
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
@if($approvedPartners->hasPages())
<div class="px-4 py-2 border-t border-gray-200 flex-shrink-0 bg-gray-50">
{{ $approvedPartners->withQueryString()->links() }}
</div>
@endif
</div>
@endif
</div>
</div>
@@ -216,13 +306,8 @@ function approvePartner(id, name) {
.then(data => {
if (data.success) {
showToast(data.message, 'success');
// 테이블에서 해당 행 제거
document.getElementById(`partner-row-${id}`)?.remove();
// 테이블이 비었으면 새로고침
const tbody = document.querySelector('tbody');
if (tbody && tbody.children.length === 0) {
window.location.reload();
}
// 페이지 새로고침으로 양쪽 테이블 업데이트
window.location.reload();
} else {
showToast(data.message || '승인 처리에 실패했습니다.', 'error');
}
@@ -271,11 +356,7 @@ function submitReject(event) {
if (data.success) {
closeRejectModal();
showToast(data.message, 'success');
document.getElementById(`partner-row-${id}`)?.remove();
const tbody = document.querySelector('tbody');
if (tbody && tbody.children.length === 0) {
window.location.reload();
}
window.location.reload();
} else {
showToast(data.message || '반려 처리에 실패했습니다.', 'error');
}