jasonhirsch/dev-manufaktur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initialisierung Start

Browse Source
This commit is contained in:
Jason Hirsch
2024-11-08 23:04:20 +01:00
parent 2eeb0e0852
commit 835de6fbf9
6938 changed files with 1514408 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
CRM/templates/dashboard.html Normal file
View File

@@ -0,0 +1,202 @@
<!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>