1a7b3cf9de
- index.blade.php에서 "수당 지급 일정 안내" 카드 제거 - 가이드북에 1차/2차 수당 분할 지급 상세 설명 추가 - 수당 상태 구분 (납입대기/지급예정/지급완료) 설명 추가 - 수당 지급 프로세스 플로우 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
170 lines
8.7 KiB
PHP
170 lines
8.7 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '영업관리 대시보드')
|
|
|
|
@push('styles')
|
|
<style>
|
|
.htmx-indicator {
|
|
display: none;
|
|
}
|
|
.htmx-request .htmx-indicator {
|
|
display: inline-flex;
|
|
}
|
|
.htmx-request.htmx-indicator {
|
|
display: inline-flex;
|
|
}
|
|
/* 새로고침 버튼 아이콘 상태 */
|
|
.refresh-btn [data-refresh-spin] {
|
|
display: none;
|
|
}
|
|
.refresh-btn [data-refresh-icon] {
|
|
display: inline-block;
|
|
}
|
|
/* 로딩 중: 스피너 표시, 아이콘 숨김 */
|
|
.refresh-btn.htmx-request [data-refresh-spin] {
|
|
display: inline-block;
|
|
}
|
|
.refresh-btn.htmx-request [data-refresh-icon] {
|
|
display: none;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="space-y-6" x-data="{ activeTab: 'my-activity' }">
|
|
<!-- 페이지 헤더 -->
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex items-center gap-3">
|
|
<h1 class="text-2xl font-bold text-gray-800">영업관리 대시보드</h1>
|
|
<button type="button"
|
|
hx-get="{{ route('sales.salesmanagement.dashboard.help') }}"
|
|
hx-target="#help-modal-container"
|
|
hx-swap="innerHTML"
|
|
class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 transition-colors"
|
|
title="도움말">
|
|
<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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 탭 네비게이션 -->
|
|
<div class="border-b border-gray-200">
|
|
<nav class="flex items-center justify-between" aria-label="Tabs">
|
|
<div class="flex gap-4">
|
|
<button type="button"
|
|
@click="activeTab = 'my-activity'"
|
|
:class="activeTab === 'my-activity'
|
|
? 'border-blue-500 text-blue-600'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
|
|
class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2">
|
|
<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 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>
|
|
내 활동
|
|
</button>
|
|
<button type="button"
|
|
@click="activeTab = 'partner-activity'"
|
|
hx-get="{{ route('sales.salesmanagement.dashboard.partner-activity') }}"
|
|
hx-target="#partner-activity-content"
|
|
hx-trigger="click once"
|
|
hx-swap="innerHTML"
|
|
:class="activeTab === 'partner-activity'
|
|
? 'border-blue-500 text-blue-600'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
|
|
class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2">
|
|
<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="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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
|
</svg>
|
|
유치 파트너 현황
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 새로고침 버튼 -->
|
|
<button type="button"
|
|
x-show="activeTab === 'my-activity'"
|
|
hx-get="{{ route('sales.salesmanagement.dashboard.refresh') }}"
|
|
hx-target="#dashboard-data"
|
|
hx-swap="innerHTML"
|
|
class="refresh-btn inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
|
|
title="새로고침">
|
|
<svg data-refresh-spin class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
<svg data-refresh-icon 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
<span class="hidden sm:inline">새로고침</span>
|
|
</button>
|
|
<button type="button"
|
|
x-show="activeTab === 'partner-activity'"
|
|
x-cloak
|
|
hx-get="{{ route('sales.salesmanagement.dashboard.partner-activity') }}"
|
|
hx-target="#partner-activity-content"
|
|
hx-swap="innerHTML"
|
|
class="refresh-btn inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
|
|
title="새로고침">
|
|
<svg data-refresh-spin class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
<svg data-refresh-icon 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
<span class="hidden sm:inline">새로고침</span>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- 탭 콘텐츠: 내 활동 -->
|
|
<div x-show="activeTab === 'my-activity'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
|
|
<div id="dashboard-data" class="space-y-6">
|
|
@include('sales.dashboard.partials.data-container')
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 탭 콘텐츠: 유치 파트너 현황 -->
|
|
<div x-show="activeTab === 'partner-activity'" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
|
|
<div id="partner-activity-content" class="space-y-6">
|
|
<!-- HTMX로 로드되는 콘텐츠 -->
|
|
<div class="flex items-center justify-center py-12">
|
|
<svg class="w-8 h-8 animate-spin text-blue-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="modal-portal"></div>
|
|
|
|
{{-- 도움말 모달용 컨테이너 --}}
|
|
<div id="help-modal-container"></div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
// Alpine.js x-collapse 플러그인이 없는 경우를 위한 폴백
|
|
if (typeof Alpine !== 'undefined' && !Alpine.directive('collapse')) {
|
|
Alpine.directive('collapse', (el, { expression }, { effect, evaluateLater }) => {
|
|
let isOpen = evaluateLater(expression);
|
|
|
|
effect(() => {
|
|
isOpen((value) => {
|
|
if (value) {
|
|
el.style.height = 'auto';
|
|
el.style.overflow = 'visible';
|
|
} else {
|
|
el.style.height = '0px';
|
|
el.style.overflow = 'hidden';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
}
|
|
</script>
|
|
@endpush
|