Hugging Face's logo

Spaces:
khlitos
/
undefined
Running

App Files Community
undefined / dashboard.html
khlitos's picture
khlitos
kan je mij project af maken Flowtrix – Complete Setup & Stappenplan
7173feb verified
Raw History Blame Contribute Delete
9.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flowtrix Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
.sidebar {
transition: all 0.3s ease;
}
.dashboard-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="bg-gray-50">
<div class="flex h-screen">
<!-- Sidebar -->
<div class="sidebar bg-indigo-700 text-white w-64 flex-shrink-0">
<div class="p-4 border-b border-indigo-600">
<h1 class="text-xl font-bold flex items-center">
<i data-feather="activity" class="mr-2"></i> Flowtrix
</h1>
</div>
<nav class="p-4">
<ul class="space-y-2">
<li>
<a href="#" class="flex items-center p-2 rounded-lg bg-indigo-800">
<i data-feather="home" class="mr-3"></i> Dashboard
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800">
<i data-feather="users" class="mr-3"></i> Customers
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800">
<i data-feather="cpu" class="mr-3"></i> Agents
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800">
<i data-feather="phone" class="mr-3"></i> Calls
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800">
<i data-feather="credit-card" class="mr-3"></i> Billing
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800">
<i data-feather="settings" class="mr-3"></i> Settings
</a>
</li>
</ul>
</nav>
</div>
<!-- Main Content -->
<div class="flex-1 overflow-auto">
<header class="bg-white shadow-sm p-4 flex justify-between items-center">
<h2 class="text-xl font-semibold">Dashboard Overview</h2>
<div class="flex items-center space-x-4">
<button class="p-2 rounded-full hover:bg-gray-100">
<i data-feather="bell"></i>
</button>
<div class="flex items-center">
<img src="http://static.photos/people/200x200/42" alt="User" class="w-8 h-8 rounded-full mr-2">
<span>Admin</span>
</div>
</div>
</header>
<main class="p-6">
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
<div class="dashboard-card bg-white p-6 rounded-lg shadow">
<div class="flex justify-between">
<div>
<p class="text-gray-500">Active Agents</p>
<h3 class="text-2xl font-bold">84</h3>
</div>
<div class="p-3 rounded-full bg-green-100 text-green-600">
<i data-feather="cpu"></i>
</div>
</div>
<p class="text-sm text-green-600 mt-2">+12% from last month</p>
</div>
<div class="dashboard-card bg-white p-6 rounded-lg shadow">
<div class="flex justify-between">
<div>
<p class="text-gray-500">Daily Calls</p>
<h3 class="text-2xl font-bold">327</h3>
</div>
<div class="p-3 rounded-full bg-blue-100 text-blue-600">
<i data-feather="phone"></i>
</div>
</div>
<p class="text-sm text-blue-600 mt-2">+8% from yesterday</p>
</div>
<div class="dashboard-card bg-white p-6 rounded-lg shadow">
<div class="flex justify-between">
<div>
<p class="text-gray-500">Active Customers</p>
<h3 class="text-2xl font-bold">42</h3>
</div>
<div class="p-3 rounded-full bg-purple-100 text-purple-600">
<i data-feather="users"></i>
</div>
</div>
<p class="text-sm text-purple-600 mt-2">+3 new this week</p>
</div>
<div class="dashboard-card bg-white p-6 rounded-lg shadow">
<div class="flex justify-between">
<div>
<p class="text-gray-500">Monthly Revenue</p>
<h3 class="text-2xl font-bold">€4,287</h3>
</div>
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
<i data-feather="dollar-sign"></i>
</div>
</div>
<p class="text-sm text-yellow-600 mt-2">15% recurring</p>
</div>
</div>
<!-- Recent Activity -->
<div class="bg-white rounded-lg shadow p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold">Recent Calls</h3>
<a href="#" class="text-sm text-indigo-600 hover:underline">View All</a>
</div>
<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">Customer</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Agent</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Intent</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap">Kapsalon de Vlinder</td>
<td class="px-6 py-4 whitespace-nowrap">Kappers NL</td>
<td class="px-6 py-4 whitespace-nowrap">1:42</td>
<td class="px-6 py-4 whitespace-nowrap">Appointment</td>
<td class="px-6 py-4 whitespace-nowrap">5 min ago</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">Restaurant de Molen</td>
<td class="px-6 py-4 whitespace-nowrap">Restaurant NL</td>
<td class="px-6 py-4 whitespace-nowrap">2:15</td>
<td class="px-6 py-4 whitespace-nowrap">Reservation</td>
<td class="px-6 py-4 whitespace-nowrap">12 min ago</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">Hotel Amstel</td>
<td class="px-6 py-4 whitespace-nowrap">Hotels NL</td>
<td class="px-6 py-4 whitespace-nowrap">3:28</td>
<td class="px-6 py-4 whitespace-nowrap">Check-in</td>
<td class="px-6 py-4 whitespace-nowrap">27 min ago</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
</div>
<script>
feather.replace();
</script>
</body>
</html>