202 lines
8.3 KiB
HTML
202 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Futuristisches CRM Dashboard</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<style>
|
|
.glassmorphism {
|
|
background: rgba(15, 23, 42, 0.7);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-900 text-white">
|
|
<div class="flex h-screen">
|
|
<!-- Seitenleiste -->
|
|
<nav class="w-64 bg-gray-800 p-6 glassmorphism">
|
|
<h1 class="text-2xl font-bold mb-8">CRM Dashboard</h1>
|
|
<ul>
|
|
<li class="mb-4"><a href="#" class="text-blue-400 hover:text-blue-300">Dashboard</a></li>
|
|
<li class="mb-4"><a href="#" class="text-blue-400 hover:text-blue-300">Kunden</a></li>
|
|
<li class="mb-4"><a href="#" class="text-blue-400 hover:text-blue-300">Verkäufe</a></li>
|
|
<li class="mb-4"><a href="#" class="text-blue-400 hover:text-blue-300">Marketing</a></li>
|
|
<li class="mb-4"><a href="#" class="text-blue-400 hover:text-blue-300">Berichte</a></li>
|
|
<li class="mb-4"><a href="#" class="text-blue-400 hover:text-blue-300">Einstellungen</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Hauptinhalt -->
|
|
<main class="flex-1 p-8 overflow-y-auto">
|
|
<div class="flex justify-between items-center mb-8">
|
|
<h2 class="text-3xl font-bold">Willkommen, {{ user.name }}!</h2>
|
|
<button id="darkModeToggle" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Dark Mode</button>
|
|
</div>
|
|
|
|
<!-- KPI-Karten -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
<div class="glassmorphism p-6">
|
|
<h3 class="text-xl mb-2">Gesamtumsatz</h3>
|
|
<p class="text-3xl font-bold text-blue-400">{{ '{:,.2f}'.format(total_revenue) }} €</p>
|
|
</div>
|
|
<div class="glassmorphism p-6">
|
|
<h3 class="text-xl mb-2">Neue Kunden</h3>
|
|
<p class="text-3xl font-bold text-blue-400">{{ new_customers }}</p>
|
|
</div>
|
|
<div class="glassmorphism p-6">
|
|
<h3 class="text-xl mb-2">Offene Tickets</h3>
|
|
<p class="text-3xl font-bold text-blue-400">{{ open_tickets }}</p>
|
|
</div>
|
|
<div class="glassmorphism p-6">
|
|
<h3 class="text-xl mb-2">Kundenzufriedenheit</h3>
|
|
<p class="text-3xl font-bold text-blue-400">{{ '{:.1f}'.format(customer_satisfaction) }}%</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Diagramme -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
|
|
<div class="glassmorphism p-6">
|
|
<h3 class="text-xl mb-4">Umsatz nach Monat</h3>
|
|
<canvas id="revenueChart"></canvas>
|
|
</div>
|
|
<div class="glassmorphism p-6">
|
|
<h3 class="text-xl mb-4">Top Produkte</h3>
|
|
<canvas id="productsChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Kundenübersicht -->
|
|
<div class="glassmorphism p-6 mb-8">
|
|
<h3 class="text-xl mb-4">Neueste Kunden</h3>
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr>
|
|
<th class="text-left">Name</th>
|
|
<th class="text-left">E-Mail</th>
|
|
<th class="text-left">Registriert am</th>
|
|
<th class="text-left">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for customer in latest_customers %}
|
|
<tr>
|
|
<td>{{ customer.name }}</td>
|
|
<td>{{ customer.email }}</td>
|
|
<td>{{ customer.registered_date.strftime('%d.%m.%Y') }}</td>
|
|
<td>
|
|
<span class="px-2 py-1 rounded {{ 'bg-green-500' if customer.status == 'Aktiv' else 'bg-red-500' }}">
|
|
{{ customer.status }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Aktivitätsfeed -->
|
|
<div class="glassmorphism p-6">
|
|
<h3 class="text-xl mb-4">Letzte Aktivitäten</h3>
|
|
<ul>
|
|
{% for activity in recent_activities %}
|
|
<li class="mb-4">
|
|
<div class="flex items-center">
|
|
<div class="w-2 h-2 bg-blue-400 rounded-full mr-2"></div>
|
|
<p>{{ activity.description }} - <span class="text-gray-400">{{ activity.timestamp.strftime('%d.%m.%Y %H:%M') }}</span></p>
|
|
</div>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
// Dark Mode Toggle
|
|
const darkModeToggle = document.getElementById('darkModeToggle');
|
|
darkModeToggle.addEventListener('click', () => {
|
|
document.body.classList.toggle('bg-white');
|
|
document.body.classList.toggle('text-gray-900');
|
|
document.body.classList.toggle('bg-gray-900');
|
|
document.body.classList.toggle('text-white');
|
|
});
|
|
|
|
// Umsatz-Diagramm
|
|
const revenueCtx = document.getElementById('revenueChart').getContext('2d');
|
|
new Chart(revenueCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
|
|
datasets: [{
|
|
label: 'Umsatz',
|
|
data: [12000, 19000, 15000, 22000, 18000, 25000, 30000, 28000, 32000, 35000, 40000, 45000],
|
|
borderColor: 'rgba(59, 130, 246, 1)',
|
|
backgroundColor: 'rgba(59, 130, 246, 0.2)',
|
|
tension: 0.4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: 'rgba(255, 255, 255, 0.1)'
|
|
},
|
|
ticks: {
|
|
color: 'rgba(255, 255, 255, 0.7)'
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
color: 'rgba(255, 255, 255, 0.1)'
|
|
},
|
|
ticks: {
|
|
color: 'rgba(255, 255, 255, 0.7)'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Produkte-Diagramm
|
|
const productsCtx = document.getElementById('productsChart').getContext('2d');
|
|
new Chart(productsCtx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['Produkt A', 'Produkt B', 'Produkt C', 'Produkt D', 'Produkt E'],
|
|
datasets: [{
|
|
data: [30, 25, 20, 15, 10],
|
|
backgroundColor: [
|
|
'rgba(59, 130, 246, 0.8)',
|
|
'rgba(16, 185, 129, 0.8)',
|
|
'rgba(251, 191, 36, 0.8)',
|
|
'rgba(236, 72, 153, 0.8)',
|
|
'rgba(124, 58, 237, 0.8)'
|
|
]
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
position: 'right',
|
|
labels: {
|
|
color: 'rgba(255, 255, 255, 0.7)'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |