From 3cf8899f3e0bb20c104fcabd8b567f7e6397ea11 Mon Sep 17 00:00:00 2001
From: Till Tomczak <till.tmk@gmail.com>
Date: Thu, 29 May 2025 17:13:04 +0200
Subject: [PATCH] "Refactor admin templates for improved UI consistency"

---
 backend/app/templates/admin.html          |   3 +-
 backend/app/templates/admin_add_user.html |  10 +-
 backend/app/templates/base.html           |  38 ----
 backend/app/templates/calendar.html       | 262 ++++++++++++++++++++++
 4 files changed, 268 insertions(+), 45 deletions(-)

diff --git a/backend/app/templates/admin.html b/backend/app/templates/admin.html
index f73ba606e..b31e54273 100644
--- a/backend/app/templates/admin.html
+++ b/backend/app/templates/admin.html
@@ -284,7 +284,7 @@
                         <thead class="bg-slate-50 dark:bg-slate-900/50">
                             <tr>
                                 <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Benutzer</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">E-Mail</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Benutzername</th>
                                 <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Rolle</th>
                                 <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Status</th>
                                 <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Letzte Aktivität</th>
@@ -307,7 +307,6 @@
                                         </div>
                                     </div>
                                 </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-900 dark:text-white">{{ user.email }}</td>
                                 <td class="px-6 py-4 whitespace-nowrap">
                                     <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full {{ 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200' if user.is_admin else 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' }}">
                                         {{ 'Administrator' if user.is_admin else 'Benutzer' }}
diff --git a/backend/app/templates/admin_add_user.html b/backend/app/templates/admin_add_user.html
index d1ce20eaa..74d462e75 100644
--- a/backend/app/templates/admin_add_user.html
+++ b/backend/app/templates/admin_add_user.html
@@ -32,14 +32,14 @@
             <form method="POST" action="{{ url_for('admin_create_user_form') }}" class="space-y-6">
                 <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                 
-                <!-- E-Mail -->
+                <!-- Benutzername -->
                 <div>
-                    <label for="email" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
-                        E-Mail-Adresse
+                    <label for="username" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+                        Benutzername <span class="text-red-500">*</span>
                     </label>
-                    <input type="email" name="email" id="email" required
+                    <input type="text" name="username" id="username" required
                            class="w-full px-4 py-3 border border-slate-300 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-slate-700 dark:text-white"
-                           placeholder="benutzer@mercedes-benz.com">
+                           placeholder="max.mustermann">
                 </div>
 
                 <!-- Name -->
diff --git a/backend/app/templates/base.html b/backend/app/templates/base.html
index 7699c9de9..16e5c49d9 100644
--- a/backend/app/templates/base.html
+++ b/backend/app/templates/base.html
@@ -266,41 +266,6 @@
                         </div>
                     </div>
                     {% if current_user.is_authenticated %}
-                    <!-- Benachrichtigungen - kompakteres Design -->
-                    <div class="relative">
-                        <button 
-                            id="notificationToggle" 
-                            class="relative p-1.5 rounded-full text-slate-700 dark:text-slate-300 hover:bg-slate-100/80 dark:hover:bg-slate-800/50 transition-all duration-200"
-                            aria-label="Benachrichtigungen anzeigen"
-                            title="Benachrichtigungen"
-                        >
-                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
-                            </svg>
-                            <!-- Badge für ungelesene Benachrichtigungen -->
-                            <span id="notificationBadge" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center font-medium hidden">
-                                0
-                            </span>
-                        </button>
-                        
-                        <!-- Benachrichtigungs-Dropdown -->
-                        <div id="notificationDropdown" class="absolute right-0 mt-2 w-72 sm:w-80 bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-slate-200 dark:border-slate-600 z-50 hidden">
-                            <div class="p-3 border-b border-slate-200 dark:border-slate-600">
-                                <h3 class="text-base font-semibold text-slate-900 dark:text-white">Benachrichtigungen</h3>
-                            </div>
-                            <div id="notificationList" class="max-h-80 overflow-y-auto">
-                                <div class="p-3 text-center text-slate-500 dark:text-slate-400 text-sm">
-                                    Keine neuen Benachrichtigungen
-                                </div>
-                            </div>
-                            <div class="p-2 border-t border-slate-200 dark:border-slate-600">
-                                <button id="markAllRead" class="w-full text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors">
-                                    Alle als gelesen markieren
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                    
                     <!-- User Profile Dropdown - kompakteres Design -->
                     <div class="relative" id="user-menu-container">
                         <button 
@@ -579,9 +544,6 @@
     <!-- JavaScript -->
     <script src="{{ url_for('static', filename='js/ui-components.js') }}"></script>
     <script src="{{ url_for('static', filename='js/dark-mode-fix.js') }}"></script>
-    {% if current_user.is_authenticated %}
-    <script src="{{ url_for('static', filename='js/notifications.js') }}"></script>
-    {% endif %}
     
     <!-- Additional JavaScript Functions -->
     <script>
diff --git a/backend/app/templates/calendar.html b/backend/app/templates/calendar.html
index 60aad27ac..4264135f0 100644
--- a/backend/app/templates/calendar.html
+++ b/backend/app/templates/calendar.html
@@ -9,6 +9,268 @@
 <link href="{{ url_for('static', filename='js/fullcalendar/main.min.css') }}" rel="stylesheet">
 {% endblock %}
 
+{% block extra_css %}
+<style>
+    /* Mercedes-Benz Corporate Design */
+    .text-mercedes-black { color: #000000; }
+    .text-mercedes-gray { color: #6b7280; }
+    .text-mercedes-silver { color: #9ca3af; }
+    .text-mercedes-blue { color: #0073ce; }
+    .text-mercedes-green { color: #008c32; }
+    .text-mercedes-red { color: #dc2626; }
+    
+    .bg-mercedes-black { background-color: #000000; }
+    .bg-mercedes-silver { background-color: #e5e7eb; }
+    .bg-mercedes-blue { background-color: #0073ce; }
+    .bg-mercedes-green { background-color: #008c32; }
+    
+    .border-mercedes-silver { border-color: #d1d5db; }
+    .border-mercedes-blue { border-color: #0073ce; }
+    
+    /* Enhanced Calendar Styling */
+    .fc {
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    }
+    
+    .fc-header-toolbar {
+        margin-bottom: 1.5rem !important;
+        padding: 1rem;
+        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+        border: 1px solid #e2e8f0;
+        border-radius: 12px;
+    }
+    
+    .dark .fc-header-toolbar {
+        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+        border-color: #334155;
+    }
+    
+    .fc-button {
+        background: #0073ce !important;
+        border: none !important;
+        border-radius: 8px !important;
+        padding: 0.5rem 1rem !important;
+        font-weight: 500 !important;
+        transition: all 0.2s ease !important;
+    }
+    
+    .fc-button:hover {
+        background: #005ba3 !important;
+        transform: translateY(-1px) !important;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
+    }
+    
+    .fc-button:focus {
+        box-shadow: 0 0 0 3px rgba(0, 115, 206, 0.3) !important;
+    }
+    
+    .fc-button-active {
+        background: #003d82 !important;
+    }
+    
+    .fc-today-button {
+        background: #16a34a !important;
+    }
+    
+    .fc-today-button:hover {
+        background: #15803d !important;
+    }
+    
+    .fc-toolbar-title {
+        color: #000000 !important;
+        font-size: 1.5rem !important;
+        font-weight: 700 !important;
+    }
+    
+    .dark .fc-toolbar-title {
+        color: #ffffff !important;
+    }
+    
+    .fc-col-header {
+        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
+        border: 1px solid #e2e8f0 !important;
+    }
+    
+    .dark .fc-col-header {
+        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
+        border-color: #334155 !important;
+    }
+    
+    .fc-col-header-cell {
+        padding: 1rem !important;
+        font-weight: 600 !important;
+        color: #000000 !important;
+    }
+    
+    .dark .fc-col-header-cell {
+        color: #ffffff !important;
+    }
+    
+    .fc-daygrid-day, .fc-timegrid-slot {
+        border-color: #e2e8f0 !important;
+    }
+    
+    .dark .fc-daygrid-day, .dark .fc-timegrid-slot {
+        border-color: #334155 !important;
+    }
+    
+    .fc-day-today {
+        background: rgba(0, 115, 206, 0.05) !important;
+    }
+    
+    .dark .fc-day-today {
+        background: rgba(0, 115, 206, 0.1) !important;
+    }
+    
+    /* Enhanced Event Styling */
+    .fc-event {
+        border-radius: 8px !important;
+        border: none !important;
+        padding: 0.25rem 0.5rem !important;
+        margin: 2px !important;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+        transition: all 0.2s ease !important;
+    }
+    
+    .fc-event:hover {
+        transform: translateY(-1px) !important;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
+    }
+    
+    .fc-event-title {
+        font-weight: 600 !important;
+        font-size: 0.875rem !important;
+    }
+    
+    .fc-event-time {
+        font-size: 0.75rem !important;
+        opacity: 0.9 !important;
+    }
+    
+    /* Job Status Colors */
+    .fc-event.event-running {
+        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
+        color: white !important;
+    }
+    
+    .fc-event.event-queued {
+        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
+        color: white !important;
+    }
+    
+    .fc-event.event-completed {
+        background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
+        color: white !important;
+    }
+    
+    .fc-event.event-cancelled {
+        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
+        color: white !important;
+    }
+    
+    .fc-event.event-maintenance {
+        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
+        color: white !important;
+    }
+    
+    .fc-event.event-high-priority {
+        box-shadow: 0 0 0 2px #f59e0b !important;
+    }
+    
+    .fc-event.event-urgent {
+        box-shadow: 0 0 0 2px #ef4444 !important;
+        animation: urgent-pulse 2s infinite;
+    }
+    
+    @keyframes urgent-pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.8; }
+    }
+    
+    /* Enhanced Form Elements */
+    .mercedes-form-input {
+        transition: all 0.2s ease;
+        border: 1px solid #d1d5db;
+        background: rgba(255, 255, 255, 0.9);
+        backdrop-filter: blur(10px);
+    }
+    
+    .mercedes-form-input:focus {
+        border-color: #0073ce;
+        box-shadow: 
+            0 0 0 3px rgba(0, 115, 206, 0.1),
+            0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        transform: translateY(-1px);
+        background: rgba(255, 255, 255, 1);
+    }
+    
+    .dark .mercedes-form-input {
+        background: rgba(30, 41, 59, 0.8);
+        border-color: #475569;
+        color: #f8fafc;
+    }
+    
+    .dark .mercedes-form-input:focus {
+        border-color: #0ea5e9;
+        box-shadow: 
+            0 0 0 3px rgba(14, 165, 233, 0.1),
+            0 4px 6px -1px rgba(0, 0, 0, 0.3);
+        background: rgba(30, 41, 59, 1);
+    }
+    
+    /* Enhanced Statistics Cards */
+    .stat-card {
+        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+        border: 1px solid #e2e8f0;
+        border-radius: 12px;
+        transition: all 0.3s ease;
+        position: relative;
+        overflow: hidden;
+    }
+    
+    .dark .stat-card {
+        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+        border-color: #334155;
+    }
+    
+    .stat-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    }
+    
+    .stat-card.active {
+        border-left: 4px solid #10b981;
+    }
+    
+    .stat-card.queued {
+        border-left: 4px solid #3b82f6;
+    }
+    
+    .stat-card.time {
+        border-left: 4px solid #f59e0b;
+    }
+    
+    /* Enhanced Modals */
+    .mercedes-modal {
+        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+        border: 1px solid #e2e8f0;
+        box-shadow: 
+            0 25px 50px -12px rgba(0, 0, 0, 0.25),
+            0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        border-radius: 16px;
+        backdrop-filter: blur(10px);
+    }
+    
+    .dark .mercedes-modal {
+        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+        border-color: #334155;
+        box-shadow: 
+            0 25px 50px -12px rgba(0, 0, 0, 0.5),
+            0 4px 6px -1px rgba(0, 0, 0, 0.3);
+    }
+</style>
+{% endblock %}
+
 {% block content %}
 <div class="space-y-8">
     <!-- Page Header -->