feat:영업파트너 승인 페이지 2분할 레이아웃 개선
- 좌측: 승인 대기자 목록 (노란색 헤더) - 우측: 승인 완료 목록 (초록색 헤더, 최근 승인 순) - 각 패널에 건수 표시 및 독립적 페이지네이션 - 컴팩트한 테이블 디자인으로 더 많은 정보 표시 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -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'));
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -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');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user