Hugging Face's logo

Spaces:
kms7530
/
callvista-dashboard
Running

App Files Community
callvista-dashboard / index.html
kms7530's picture
kms7530
Change to green button
e54d32a verified
raw
history blame contribute delete
23.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Salescall Dashboard</title>
 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://unpkg.com/feather-icons"></script>
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <style>
 .gradient-bg {
 background: linear-gradient(135deg, #1F88E9 0%, #0D5BFF 100%);
 position: relative;
 overflow: hidden;
 }
.sound-waves {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 overflow: hidden;
 z-index: 0;
 }
 .wave {
 position: absolute;
 bottom: 0;
 width: 200%;
 height: 70px;
 background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="rgba(255,255,255,0.1)" opacity=".25"/></svg>') repeat-x;
animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
 transform: translate3d(0, 0, 0);
 }
 .wave:nth-of-type(2) {
 bottom: 10px;
 opacity: 0.5;
 animation: wave 10s cubic-bezier(0.36, 0.45, 0.63, 0.53) -.125s infinite;
 }
 .wave:nth-of-type(3) {
 bottom: 15px;
 opacity: 0.2;
 animation: wave 12s cubic-bezier(0.36, 0.45, 0.63, 0.53) -.25s infinite;
 }
 @keyframes wave {
 0% { transform: translateX(0); }
 100% { transform: translateX(-50%); }
 }
 .card-hover:hover {
 border-left-color: transparent;
transform: translateY(-5px);
 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 .relative {
 position: relative;
 }
 .z-10 {
 z-index: 10;
 }
.pulse-animation {
 animation: pulse 2s infinite;
 }
 @keyframes pulse {
 0% { box-shadow: 0 0 0 0 rgba(31, 136, 233, 0.7); }
 70% { box-shadow: 0 0 0 10px rgba(31, 136, 233, 0); }
 100% { box-shadow: 0 0 0 0 rgba(31, 136, 233, 0); }
}
 </style>
</head>
<body class="bg-gray-50 font-sans">
 <div class="min-h-screen flex flex-col">
 <!-- Header -->
 <header class="gradient-bg text-white shadow-lg">
 <div class="sound-waves">
 <div class="wave"></div>
 <div class="wave"></div>
 <div class="wave"></div>
 </div>
 <div class="container mx-auto px-4 py-6 relative z-10">
<div class="flex justify-between items-center">
 <div class="flex items-center space-x-4">
 <i data-feather="phone-call" class="w-8 h-8"></i>
 <h1 class="text-2xl font-bold">Salescall</h1>
</div>
 <div class="flex items-center space-x-4">
 <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-medium transition flex items-center">
 <i data-feather="plus" class="w-4 h-4 mr-2"></i>
 DB
 </button>
<button class="bg-white text-blue-600 px-4 py-2 rounded-lg font-medium hover:bg-blue-50 transition">
 <i data-feather="user" class="inline mr-2"></i>
 Admin
 </button>
</div>
 </div>
 </div>
 </header>
<!-- Main Content -->
 <main class="flex-grow container mx-auto px-4 py-8">
 <!-- Summary Card -->
 <div class="bg-white rounded-xl shadow-md p-6 mb-8 card-hover transition">
 <div class="grid grid-cols-2 md:grid-cols-4 gap-6 divide-x divide-gray-200">
<!-- Call Volume -->
 <div class="flex justify-between items-start">
 <div>
 <p class="text-gray-500">전체 톡화</p>
 <h2 class="text-3xl font-bold mt-2">248</h2>
 <p class="text-green-500 flex items-center mt-2">
 <i data-feather="arrow-up" class="w-4 h-4 mr-1"></i>
 μ§€λ‚œμ£Ό λŒ€λΉ„ 12%
 </p>
</div>
 <div class="bg-[#E1F0FF] p-3 rounded-lg">
 <i data-feather="phone-incoming" class="text-[#1F88E9] w-6 h-6"></i>
</div>
 </div>
 <!-- Response Rate -->
 <div class="flex justify-between items-start pl-4">
<div>
 <p class="text-gray-500">응닡λ₯ </p>
 <h2 class="text-3xl font-bold mt-2">78%</h2>
 <p class="text-green-500 flex items-center mt-2">
 <i data-feather="arrow-up" class="w-4 h-4 mr-1"></i>
 μ§€λ‚œμ£Ό λŒ€λΉ„ 5%
 </p>
</div>
 <div class="bg-green-100 p-3 rounded-lg">
 <i data-feather="thumbs-up" class="text-green-600 w-6 h-6"></i>
 </div>
 </div>
 <!-- Conversion Rate -->
 <div class="flex justify-between items-start pl-4">
<div>
 <p class="text-gray-500">μ „ν™˜μœ¨</p>
 <h2 class="text-3xl font-bold mt-2">42%</h2>
 <p class="text-green-500 flex items-center mt-2">
 <i data-feather="arrow-up" class="w-4 h-4 mr-1"></i>
 μ§€λ‚œμ£Ό λŒ€λΉ„ 12%
 </p>
</div>
 <div class="bg-purple-100 p-3 rounded-lg">
 <i data-feather="trending-up" class="text-purple-600 w-6 h-6"></i>
 </div>
 </div>
 <!-- Avg. Duration -->
 <div class="flex justify-between items-start pl-4">
<div>
 <p class="text-gray-500">평균 톡화 μ‹œκ°„</p>
 <h2 class="text-3xl font-bold mt-2">4:32</h2>
 <p class="text-red-500 flex items-center mt-2">
 <i data-feather="arrow-down" class="w-4 h-4 mr-1"></i>
 μ§€λ‚œμ£Ό λŒ€λΉ„ 3%
 </p>
</div>
 <div class="bg-yellow-100 p-3 rounded-lg">
 <i data-feather="watch" class="text-yellow-600 w-6 h-6"></i>
 </div>
 </div>
 </div>
 </div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
 <!-- Call Chart -->
 <div class="bg-white rounded-xl shadow-md p-6 lg:col-span-2 card-hover transition">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-xl font-bold">톡화 ν™œλ™</h2>
 <select class="bg-gray-100 border-0 rounded-lg px-3 py-2 text-sm">
 <option>졜근 7일</option>
 <option selected>졜근 30일</option>
 <option>졜근 90일</option>
 </select>
</div>
 <canvas id="callChart" height="250"></canvas>
 </div>
<!-- Customer Engagement -->
 <div class="bg-white rounded-xl shadow-md p-6 card-hover transition">
 <h2 class="text-xl font-bold mb-6">고객 참여도</h2>
<div class="space-y-6">
 <div>
 <div class="flex justify-between mb-2">
 <p class="text-gray-600">μž¬ν†΅ν™” μš”μ²­</p>
<p class="font-medium">24</p>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2">
 <div class="bg-blue-600 h-2 rounded-full" style="width: 65%"></div>
 </div>
 </div>
 <div>
 <div class="flex justify-between mb-2">
 <p class="text-gray-600">긍정적 응닡</p>
<p class="font-medium">78%</p>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2">
 <div class="bg-green-500 h-2 rounded-full" style="width: 78%"></div>
 </div>
 </div>
 <div>
 <div class="flex justify-between mb-2">
 <p class="text-gray-600">반볡 μ°Έμ—¬</p>
<p class="font-medium">42%</p>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2">
 <div class="bg-purple-500 h-2 rounded-full" style="width: 42%"></div>
 </div>
 </div>
 <div>
 <div class="flex justify-between mb-2">
 <p class="text-gray-600">평균 λ§Œμ‘±λ„</p>
<p class="font-medium">4.2/5</p>
 </div>
 <div class="flex space-x-1">
 <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
 <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
 <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
 <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
 <i data-feather="star" class="w-4 h-4 text-gray-300 fill-current"></i>
 </div>
 </div>
 </div>
<div class="mt-8">
 <h3 class="font-medium mb-4">μ£Όμš” 톡화 κ²°κ³Ό</h3>
<canvas id="outcomeChart" height="200"></canvas>
 </div>
 </div>
 </div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
 <!-- Recent Calls -->
 <div class="bg-white rounded-xl shadow-md p-6 lg:col-span-2 card-hover transition">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-xl font-bold">졜근 톡화 기둝</h2>
 <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-medium transition flex items-center">
<i data-feather="file-text" class="w-4 h-4 mr-2"></i>
기둝 보기
 </button>
</div>
 <div class="overflow-x-auto">
 <table class="w-full">
 <thead>
 <tr class="text-left text-gray-500 text-sm border-b">
 <th class="pb-3">μ—°λ½μ²˜</th>
 <th class="pb-3">λ‚ μ§œ</th>
 <th class="pb-3">톡화 μ‹œκ°„</th>
 <th class="pb-3">μƒνƒœ</th>
<th class="pb-3"></th>
 </tr>
 </thead>
 <tbody class="divide-y">
 <tr class="hover:bg-gray-50 transition">
 <td class="py-4">
 <div class="flex items-center">
 <div class="bg-[#E1F0FF] text-[#1F88E9] rounded-full w-8 h-8 flex items-center justify-center mr-3">
<i data-feather="user" class="w-4 h-4"></i>
 </div>
 <div>
 <p class="font-medium">μ „μ§€μˆ˜</p>
 <p class="text-xs text-gray-500">Acme Corporation</p>
 </div>
 </div>
 </td>
 <td class="py-4">였늘, 10:30 AM</td>
 <td class="py-4">5:42</td>
 <td class="py-4">
 <span class="bg-green-100 text-green-600 px-2 py-1 rounded-full text-xs">μ˜ˆμ•½</span>
</td>
 <td class="py-4 text-right">
 <button class="text-gray-400 hover:text-gray-600">
 <i data-feather="more-vertical" class="w-4 h-4"></i>
 </button>
 </td>
 </tr>
 <tr class="hover:bg-gray-50 transition">
 <td class="py-4">
 <div class="flex items-center">
 <div class="bg-purple-100 text-purple-600 rounded-full w-8 h-8 flex items-center justify-center mr-3">
 <i data-feather="user" class="w-4 h-4"></i>
 </div>
 <div>
 <p class="font-medium">λ°•μ„Έν˜„</p>
 <p class="text-xs text-gray-500">TechSolutions</p>
 </div>
 </div>
 </td>
 <td class="py-4">μ–΄μ œ, 3:15 PM</td>
 <td class="py-4">4:18</td>
 <td class="py-4">
 <span class="bg-[#E1F0FF] text-[#1F88E9] px-2 py-1 rounded-full text-xs">ν›„μ†μ‘°μΉ˜</span>
</td>
 <td class="py-4 text-right">
 <button class="text-gray-400 hover:text-gray-600">
 <i data-feather="more-vertical" class="w-4 h-4"></i>
 </button>
 </td>
 </tr>
 <tr class="hover:bg-gray-50 transition">
 <td class="py-4">
 <div class="flex items-center">
 <div class="bg-yellow-100 text-yellow-600 rounded-full w-8 h-8 flex items-center justify-center mr-3">
 <i data-feather="user" class="w-4 h-4"></i>
 </div>
 <div>
 <p class="font-medium">ν—ˆμœ μ€€</p>
 <p class="text-xs text-gray-500">Global Inc.</p>
 </div>
 </div>
 </td>
 <td class="py-4">Jun 10, 9:45 AM</td>
 <td class="py-4">6:30</td>
 <td class="py-4">
 <span class="bg-green-100 text-green-600 px-2 py-1 rounded-full text-xs">μ˜ˆμ•½</span>
 </td>
 <td class="py-4 text-right">
 <button class="text-gray-400 hover:text-gray-600">
 <i data-feather="more-vertical" class="w-4 h-4"></i>
 </button>
 </td>
 </tr>
 <tr class="hover:bg-gray-50 transition">
 <td class="py-4">
 <div class="flex items-center">
 <div class="bg-red-100 text-red-600 rounded-full w-8 h-8 flex items-center justify-center mr-3">
 <i data-feather="user" class="w-4 h-4"></i>
 </div>
 <div>
 <p class="font-medium">μ‘°μœ€μ„œ</p>
 <p class="text-xs text-gray-500">Innovate Corp</p>
 </div>
 </div>
 </td>
 <td class="py-4">Jun 8, 2:00 PM</td>
 <td class="py-4">3:15</td>
 <td class="py-4">
 <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-xs">쑰치 μ—†μŒ</span>
</td>
 <td class="py-4 text-right">
 <button class="text-gray-400 hover:text-gray-600">
 <i data-feather="more-vertical" class="w-4 h-4"></i>
 </button>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 <button class="mt-4 w-full py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium transition">
 전체 톡화 보기
 </button>
</div>
<!-- Recent Schedules -->
 <div class="bg-white rounded-xl shadow-md p-6 card-hover transition">
 <h2 class="text-xl font-bold mb-6">μ˜ˆμ•½λœ 상담</h2>
<div class="space-y-4">
 <div class="flex items-start p-3 bg-blue-50 rounded-lg">
 <div class="bg-blue-100 p-2 rounded-lg mr-4">
 <i data-feather="calendar" class="text-blue-600 w-5 h-5"></i>
 </div>
 <div>
 <h3 class="font-medium">상담 μ˜ˆμ•½</h3>
 <p class="text-sm text-gray-500">였늘, μ˜€ν›„ 2:30 - μ˜€ν›„ 3:00</p>
 <p class="text-xs mt-1">μ „μ§€μˆ˜ (Acme Corp)</p>
</div>
 </div>
 <div class="flex items-start p-3 bg-blue-50 rounded-lg">
 <div class="bg-blue-100 p-2 rounded-lg mr-4">
 <i data-feather="calendar" class="text-purple-600 w-5 h-5"></i>
 </div>
 <div>
 <h3 class="font-medium">상담 μ˜ˆμ•½</h3>
 <p class="text-sm text-gray-500">내일, μ˜€μ „ 11:00 - μ˜€μ „ 11:30</p>
 <p class="text-xs mt-1">λ°•μ„Έν˜„ (TechSolutions)</p>
</div>
 </div>
 <div class="flex items-start p-3 bg-blue-50 rounded-lg">
 <div class="bg-blue-100 p-2 rounded-lg mr-4">
 <i data-feather="calendar" class="text-green-600 w-5 h-5"></i>
 </div>
 <div>
 <h3 class="font-medium">상담 μ˜ˆμ•½</h3>
 <p class="text-sm text-gray-500">6μ›” 15일, μ˜€μ „ 9:30 - μ˜€μ „ 10:15</p>
 <p class="text-xs mt-1">ν—ˆμœ μ€€ (Global Inc.)</p>
</div>
 </div>
 </div>
 <button class="mt-4 w-full py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium transition">
 전체 일정 보기
 </button>
</div>
 </div>
 </main>
<!-- Footer -->
 <footer class="bg-gray-100 border-t py-6">
 <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
 <p>Β© 2025 Salescall. λͺ¨λ“  ꢌ리 보유.</p>
</div>
 </footer>
 </div>
<script>
 feather.replace();
 // Call Activity Chart
 const callCtx = document.getElementById('callChart').getContext('2d');
 const callChart = new Chart(callCtx, {
 type: 'line',
 data: {
 labels: ['Jun 1', 'Jun 5', 'Jun 10', 'Jun 15', 'Jun 20', 'Jun 25', 'Today'],
 datasets: [
 {
 label: 'μ‹œλ„ν•œ 톡화',
data: [25, 30, 28, 35, 32, 27, 34],
 borderColor: '#1F88E9',
 backgroundColor: 'rgba(31, 136, 233, 0.1)',
tension: 0.4,
 fill: true
 },
 {
 label: 'μ‘λ‹΅ν•œ 톡화',
data: [18, 22, 20, 25, 23, 19, 24],
 borderColor: '#00D1FF',
 backgroundColor: 'rgba(0, 209, 255, 0.1)',
 tension: 0.4,
 fill: true
 },
 {
 label: 'μ˜ˆμ•½λœ 톡화',
data: [8, 10, 12, 15, 14, 11, 13],
 borderColor: '#00FFD1',
 backgroundColor: 'rgba(0, 255, 209, 0.1)',
 tension: 0.4,
 fill: true
 }
 ]
 },
 options: {
 responsive: true,
 plugins: {
 legend: {
 position: 'top',
 }
 },
 scales: {
 y: {
 beginAtZero: true
 }
 }
 }
 });
// Outcome Chart
 const outcomeCtx = document.getElementById('outcomeChart').getContext('2d');
 const outcomeChart = new Chart(outcomeCtx, {
 type: 'doughnut',
 data: {
 labels: ['μ˜ˆμ•½', 'ν›„μ†μ‘°μΉ˜', 'μ •λ³΄μ œκ³΅', '쑰치 μ—†μŒ'],
datasets: [{
 data: [42, 28, 18, 12],
 backgroundColor: [
 '#6B73FF',
 '#00D1FF',
 '#00FFD1',
 '#E2E8F0'
 ],
 borderWidth: 0
 }]
 },
 options: {
 responsive: true,
 cutout: '70%',
 plugins: {
 legend: {
 position: 'bottom',
 }
 }
 }
 });
 </script>
</body>
</html>