|
|
<!DOCTYPE html> |
|
|
<html lang="ko"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>CP 정산 마스터 대시보드</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> |
|
|
<style> |
|
|
.dashboard-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.dashboard-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
|
|
} |
|
|
.custom-scrollbar::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
height: 6px; |
|
|
} |
|
|
.custom-scrollbar::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
border-radius: 10px; |
|
|
} |
|
|
.custom-scrollbar::-webkit-scrollbar-thumb { |
|
|
background: #888; |
|
|
border-radius: 10px; |
|
|
} |
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover { |
|
|
background: #555; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50" id="vanta-bg"> |
|
|
<div class="min-h-screen"> |
|
|
|
|
|
<nav class="bg-blue-600 text-white shadow-lg"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16 items-center"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="dollar-sign" class="mr-2"></i> |
|
|
<span class="text-xl font-bold">CP 정산 마스터</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<i data-feather="bell" class="cursor-pointer"></i> |
|
|
<span class="absolute -top-1 -right-1 h-3 w-3 bg-red-500 rounded-full"></span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<img src="http://static.photos/people/200x200/1" class="h-8 w-8 rounded-full mr-2" alt="프로필"> |
|
|
<span class="text-sm">홍길동 담당자</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h1 class="text-3xl font-bold text-gray-800">정산 대시보드</h1> |
|
|
<p class="text-gray-600">최근 업데이트: <span id="current-date" class="font-medium"></span></p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"> |
|
|
|
|
|
<div class="dashboard-card bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">신규 계약 리스트</h2> |
|
|
<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">5건</span> |
|
|
</div> |
|
|
<div class="h-60 overflow-y-auto custom-scrollbar"> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-center justify-between p-2 hover:bg-gray-50 rounded"> |
|
|
<div> |
|
|
<p class="font-medium">(주)드라마월드</p> |
|
|
<p class="text-sm text-gray-500">드라마 10편 패키지</p> |
|
|
</div> |
|
|
<span class="text-sm text-green-600">+ 2,500,000원</span> |
|
|
</li> |
|
|
<li class="flex items-center justify-between p-2 hover:bg-gray-50 rounded"> |
|
|
<div> |
|
|
<p class="font-medium">영화사 예술의전당</p> |
|
|
<p class="text-sm text-gray-500">클래식 영화 5편</p> |
|
|
</div> |
|
|
<span class="text-sm text-green-600">+ 1,800,000원</span> |
|
|
</li> |
|
|
<li class="flex items-center justify-between p-2 hover:bg-gray-50 rounded"> |
|
|
<div> |
|
|
<p class="font-medium">(주)애니메이션랜드</p> |
|
|
<p class="text-sm text-gray-500">애니메이션 시즌2</p> |
|
|
</div> |
|
|
<span class="text-sm text-green-600">+ 3,200,000원</span> |
|
|
</li> |
|
|
<li class="flex items-center justify-between p-2 hover:bg-gray-50 rounded"> |
|
|
<div> |
|
|
<p class="font-medium">다큐프라임</p> |
|
|
<p class="text-sm text-gray-500">자연다큐 3편</p> |
|
|
</div> |
|
|
<span class="text-sm text-green-600">+ 950,000원</span> |
|
|
</li> |
|
|
<li class="flex items-center justify-between p-2 hover:bg-gray-50 rounded"> |
|
|
<div> |
|
|
<p class="font-medium">스포츠미디어</p> |
|
|
<p class="text-sm text-gray-500">실시간 중계권</p> |
|
|
</div> |
|
|
<span class="text-sm text-green-600">+ 4,500,000원</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="mt-4 text-right"> |
|
|
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center"> |
|
|
전체 보기 <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="dashboard-card bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">정산 프로세스 일정</h2> |
|
|
<span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded-full">진행중</span> |
|
|
</div> |
|
|
<div class="h-60 overflow-y-auto custom-scrollbar"> |
|
|
<div class="relative"> |
|
|
<div class="border-l-2 border-blue-200 pl-4 pb-4"> |
|
|
<div class="relative mb-6"> |
|
|
<div class="absolute -left-5 top-1 h-3 w-3 bg-green-500 rounded-full border-2 border-white"></div> |
|
|
<h3 class="text-sm font-medium text-gray-800">정산 데이터 수집 완료</h3> |
|
|
<p class="text-xs text-gray-500">2023.11.01</p> |
|
|
</div> |
|
|
<div class="relative mb-6"> |
|
|
<div class="absolute -left-5 top-1 h-3 w-3 bg-green-500 rounded-full border-2 border-white"></div> |
|
|
<h3 class="text-sm font-medium text-gray-800">CP별 정산 금액 검증</h3> |
|
|
<p class="text-xs text-gray-500">2023.11.03 ~ 2023.11.05</p> |
|
|
</div> |
|
|
<div class="relative mb-6"> |
|
|
<div class="absolute -left-5 top-1 h-3 w-3 bg-blue-500 rounded-full border-2 border-white"></div> |
|
|
<h3 class="text-sm font-medium text-gray-800">정산 내역 승인 요청</h3> |
|
|
<p class="text-xs text-gray-500">2023.11.10</p> |
|
|
</div> |
|
|
<div class="relative mb-6"> |
|
|
<div class="absolute -left-5 top-1 h-3 w-3 bg-gray-300 rounded-full border-2 border-white"></div> |
|
|
<h3 class="text-sm font-medium text-gray-800">정산 금액 지급</h3> |
|
|
<p class="text-xs text-gray-500">2023.11.25</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="bg-gray-100 rounded-full h-2"> |
|
|
<div class="bg-blue-600 h-2 rounded-full" style="width: 60%"></div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-600 mt-1">진행률: 60%</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="dashboard-card bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">콘텐츠 편성 스케줄</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="p-1 rounded bg-gray-100 hover:bg-gray-200"> |
|
|
<i data-feather="calendar" class="w-4 h-4 text-gray-600"></i> |
|
|
</button> |
|
|
<button class="p-1 rounded bg-gray-100 hover:bg-gray-200"> |
|
|
<i data-feather="filter" class="w-4 h-4 text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-60 overflow-y-auto custom-scrollbar"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">콘텐츠</th> |
|
|
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">편성일</th> |
|
|
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">단가</th> |
|
|
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tier</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-gray-900">신의 퀴즈 S5</td> |
|
|
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">매주 금요일</td> |
|
|
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">500,000원</td> |
|
|
<td class="px-3 py-2 whitespace-nowrap"> |
|
|
<span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">A</span> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-gray-900">미스터션샤인</td> |
|
|
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">매주 월요일</td> |
|
|
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">450,000원</td> |
|
|
<td class="px-3 py-2 whitespace-nowrap"> |
|
|
<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">B</span> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-gray-900">해피투게더</td> |
|
|
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">매주 목요일</td> |
|
|
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">300,000원</td> |
|
|
<td class="px-3 py-2 whitespace-nowrap"> |
|
|
<span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs font-medium rounded-full">C</span> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-gray-900">런닝맨</td> |
|
|
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">매주 일요일</td> |
|
|
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">600,000원</td> |
|
|
<td class="px-3 py-2 whitespace-nowrap"> |
|
|
<span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">A</span> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-gray-900">미운 우리 새끼</td> |
|
|
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">매주 토요일</td> |
|
|
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">400,000원</td> |
|
|
<td class="px-3 py-2 whitespace-nowrap"> |
|
|
<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">B</span> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="mt-4 text-right"> |
|
|
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center"> |
|
|
전체 보기 <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 mb-8"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-semibold text-gray-800">CP별 누적 정산 현황</h2> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<select class="border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option>최근 6개월</option> |
|
|
<option selected>최근 1년</option> |
|
|
<option>최근 2년</option> |
|
|
</select> |
|
|
<button class="p-1 rounded bg-gray-100 hover:bg-gray-200"> |
|
|
<i data-feather="refresh-cw" class="w-4 h-4 text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-80"> |
|
|
<canvas id="settlementChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
|
|
<button class="bg-white p-4 rounded-lg shadow-md hover:bg-blue-50 transition-colors flex flex-col items-center"> |
|
|
<div class="bg-blue-100 p-3 rounded-full mb-2"> |
|
|
<i data-feather="file-text" class="text-blue-600 w-5 h-5"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium text-gray-700">정산 신청</span> |
|
|
</button> |
|
|
<button class="bg-white p-4 rounded-lg shadow-md hover:bg-purple-50 transition-colors flex flex-col items-center"> |
|
|
<div class="bg-purple-100 p-3 rounded-full mb-2"> |
|
|
<i data-feather="trending-up" class="text-purple-600 w-5 h-5"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium text-gray-700">통계 분석</span> |
|
|
</button> |
|
|
<button class="bg-white p-4 rounded-lg shadow-md hover:bg-green-50 transition-colors flex flex-col items-center"> |
|
|
<div class="bg-green-100 p-3 rounded-full mb-2"> |
|
|
<i data-feather="dollar-sign" class="text-green-600 w-5 h-5"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium text-gray-700">예상 정산</span> |
|
|
</button> |
|
|
<button class="bg-white p-4 rounded-lg shadow-md hover:bg-yellow-50 transition-colors flex flex-col items-center"> |
|
|
<div class="bg-yellow-100 p-3 rounded-full mb-2"> |
|
|
<i data-feather="settings" class="text-yellow-600 w-5 h-5"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium text-gray-700">설정</span> |
|
|
</button> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const now = new Date(); |
|
|
const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' }; |
|
|
document.getElementById('current-date').textContent = now.toLocaleDateString('ko-KR', options); |
|
|
|
|
|
|
|
|
const ctx = document.getElementById('settlementChart').getContext('2d'); |
|
|
const settlementChart = new Chart(ctx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], |
|
|
datasets: [ |
|
|
{ |
|
|
label: '드라마월드', |
|
|
data: [1200000, 1900000, 1500000, 1800000, 2200000, 2100000, 2300000, 2500000, 2400000, 2600000, 2800000, 3000000], |
|
|
backgroundColor: 'rgba(79, 70, 229, 0.7)', |
|
|
borderColor: 'rgba(79, 70, 229, 1)', |
|
|
borderWidth: 1 |
|
|
}, |
|
|
{ |
|
|
label: '애니메이션랜드', |
|
|
data: [800000, 1200000, 1100000, 1400000, 1600000, 1500000, 1700000, 1900000, 2000000, 2100000, 2200000, 2300000], |
|
|
backgroundColor: 'rgba(99, 102, 241, 0.7)', |
|
|
borderColor: 'rgba(99, 102, 241, 1)', |
|
|
borderWidth: 1 |
|
|
}, |
|
|
{ |
|
|
label: '영화사 예술의전당', |
|
|
data: [500000, 700000, 600000, 800000, 900000, 1000000, 1200000, 1100000, 1300000, 1400000, 1500000, 1600000], |
|
|
backgroundColor: 'rgba(129, 140, 248, 0.7)', |
|
|
borderColor: 'rgba(129, 140, 248, 1)', |
|
|
borderWidth: 1 |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
ticks: { |
|
|
callback: function(value) { |
|
|
return value.toLocaleString() + '원'; |
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
plugins: { |
|
|
tooltip: { |
|
|
callbacks: { |
|
|
label: function(context) { |
|
|
let label = context.dataset.label || ''; |
|
|
if (label) { |
|
|
label += ': '; |
|
|
} |
|
|
label += context.parsed.y.toLocaleString() + '원'; |
|
|
return label; |
|
|
} |
|
|
} |
|
|
}, |
|
|
legend: { |
|
|
position: 'bottom', |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
VANTA.NET({ |
|
|
el: "#vanta-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x3b82f6, |
|
|
backgroundColor: 0xf8fafc, |
|
|
points: 10.00, |
|
|
maxDistance: 20.00, |
|
|
spacing: 15.00 |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
