| <!DOCTYPE html> |
| <html lang="de"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Behältermanagement Dashboard</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <style> |
| .chart-container { |
| position: relative; |
| height: 400px; |
| width: 100%; |
| } |
| .custom-scrollbar::-webkit-scrollbar { |
| height: 8px; |
| } |
| .custom-scrollbar::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| border-radius: 10px; |
| } |
| .custom-scrollbar::-webkit-scrollbar-thumb { |
| background: #888; |
| border-radius: 10px; |
| } |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { |
| background: #555; |
| } |
| </style> |
| </head> |
| <body class="bg-gradient-to-br from-blue-50 to-indigo-50"> |
| <div class="min-h-screen"> |
| |
| <header class="bg-gradient-to-r from-blue-400 to-indigo-400 shadow-lg"> |
| <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center"> |
| <h1 class="text-2xl font-bold text-white">Behältermanagement Dashboard</h1> |
| <div class="flex items-center space-x-4 text-white"> |
| <div class="relative"> |
| <select id="timePeriod" class="appearance-none bg-white bg-opacity-20 backdrop-blur-sm border border-white border-opacity-30 rounded-md py-2 pl-3 pr-8 text-sm text-white focus:outline-none focus:ring-2 focus:ring-white"> |
| <option value="24h">Letzte 24 Stunden</option> |
| <option value="7d">Letzte 7 Tage</option> |
| <option value="30d">Letzte 30 Tage</option> |
| <option value="custom">Benutzerdefiniert</option> |
| </select> |
| <i data-feather="chevron-down" class="absolute right-3 top-2.5 text-white pointer-events-none"></i> |
| </div> |
| <button class="bg-white bg-opacity-20 hover:bg-opacity-30 text-white px-4 py-2 rounded-md text-sm font-medium transition-all backdrop-blur-sm border border-white border-opacity-20 hover:border-opacity-40"> |
| <i data-feather="refresh-cw" class="w-4 h-4 inline mr-1"></i> Aktualisieren |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8"> |
| |
| <div class="bg-white shadow-lg rounded-xl p-4 mb-6 border-l-8 border-blue-500 transform transition hover:-translate-y-1 hover:shadow-xl"> |
| <div class="flex flex-wrap items-center justify-between gap-4"> |
| <div> |
| <h2 class="text-lg font-medium text-gray-900">Filter</h2> |
| <p class="text-sm text-gray-500">Wählen Sie Behältertypen für die Anzeige</p> |
| </div> |
| <div class="flex flex-wrap gap-2"> |
| <div class="flex items-center"> |
| <input id="filter-type1" type="checkbox" checked class="h-4 w-4 text-indigo-400 focus:ring-indigo-300 border-gray-300 rounded"> |
| <label for="filter-type1" class="ml-2 text-sm font-medium text-gray-700">Typ A</label> |
| </div> |
| <div class="flex items-center"> |
| <input id="filter-type2" type="checkbox" checked class="h-4 w-4 text-blue-400 focus:ring-blue-300 border-gray-300 rounded"> |
| <label for="filter-type2" class="ml-2 text-sm font-medium text-gray-700">Typ B</label> |
| </div> |
| <div class="flex items-center"> |
| <input id="filter-type3" type="checkbox" checked class="h-4 w-4 text-green-400 focus:ring-green-300 border-gray-300 rounded"> |
| <label for="filter-type3" class="ml-2 text-sm font-medium text-gray-700">Typ C</label> |
| </div> |
| <div class="flex items-center"> |
| <input id="filter-type4" type="checkbox" checked class="h-4 w-4 text-yellow-400 focus:ring-yellow-300 border-gray-300 rounded"> |
| <label for="filter-type4" class="ml-2 text-sm font-medium text-gray-700">Typ D</label> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white shadow rounded-lg p-4 mb-6"> |
| <h2 class="text-lg font-medium text-gray-900 mb-4">Standortübersicht</h2> |
| <div class="chart-container bg-gradient-to-b from-white to-indigo-50 p-4 rounded-lg"> |
| <canvas id="locationChart"></canvas> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white shadow-lg rounded-xl p-4 overflow-x-auto custom-scrollbar border-l-8 border-indigo-400"> |
| <h2 class="text-lg font-medium text-gray-900 mb-4">Standortdetails</h2> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Standort</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Behältertyp</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IST (Min/Max)</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">SOLL (Min/Max)</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Durchschnitt (IST/SOLL)</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Varianz</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Aktionen</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Standort A</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Typ A, Typ B</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">80 / 210</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">100 / 200</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">145 / 150</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">±15%</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
| <button class="text-blue-600 hover:text-blue-900 mr-3 font-medium hover:underline">Bearbeiten</button> |
| <button class="text-green-600 hover:text-green-900 font-medium hover:underline">Details</button> |
| </td> |
| </tr> |
| |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Standort B</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Typ C</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">95 / 185</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">120 / 180</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">140 / 150</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">±10%</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Bearbeiten</button> |
| <button class="text-green-600 hover:text-green-900">Details</button> |
| </td> |
| </tr> |
| |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Standort C</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Typ A, Typ D</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">110 / 195</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">100 / 200</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">152 / 150</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">±5%</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Bearbeiten</button> |
| <button class="text-green-600 hover:text-green-900">Details</button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </main> |
| </div> |
|
|
| |
| <div id="editModal" class="fixed z-10 inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true"> |
| <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
| <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div> |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
| <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6"> |
| <div> |
| <div class="mt-3 text-center sm:mt-0 sm:text-left"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">SOLL-Werte bearbeiten</h3> |
| <div class="mt-4"> |
| <div class="mb-4"> |
| <label for="sollMin" class="block text-sm font-medium text-gray-700 mb-1">Minimaler SOLL-Wert</label> |
| <input type="number" id="sollMin" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md p-2 border" value="100"> |
| </div> |
| <div class="mb-4"> |
| <label for="sollMax" class="block text-sm font-medium text-gray-700 mb-1">Maximaler SOLL-Wert</label> |
| <input type="number" id="sollMax" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md p-2 border" value="200"> |
| </div> |
| <div class="mb-4"> |
| <label for="variance" class="block text-sm font-medium text-gray-700 mb-1">Geplante Varianz (%)</label> |
| <input type="number" id="variance" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md p-2 border" value="15"> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse"> |
| <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"> |
| Speichern |
| </button> |
| <button type="button" onclick="document.getElementById('editModal').classList.add('hidden')" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm"> |
| Abbrechen |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| feather.replace(); |
| |
| |
| AOS.init(); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const ctx = document.getElementById('locationChart').getContext('2d'); |
| const locationChart = new Chart(ctx, { |
| type: 'bar', |
| data: { |
| labels: ['Standort A', 'Standort B', 'Standort C', 'Standort D', 'Standort E'], |
| datasets: [ |
| { |
| label: 'IST Aktuell', |
| data: [145, 140, 152, 145, 140], |
| backgroundColor: 'rgba(255, 206, 86, 0.4)', |
| borderColor: 'rgba(255, 206, 86, 0.8)', |
| borderWidth: 1 |
| }, |
| { |
| label: 'IST Min', |
| data: [80, 95, 110, 70, 90], |
| backgroundColor: 'rgba(75, 192, 192, 0.4)', |
| borderColor: 'rgba(75, 192, 192, 0.8)', |
| borderWidth: 1 |
| }, |
| { |
| label: 'IST Max', |
| data: [210, 185, 195, 220, 190], |
| backgroundColor: 'rgba(54, 162, 235, 0.4)', |
| borderColor: 'rgba(54, 162, 235, 0.8)', |
| borderWidth: 1 |
| }, |
| { |
| label: 'SOLL Min', |
| data: [100, 120, 100, 100, 110], |
| backgroundColor: 'rgba(255, 99, 132, 0.4)', |
| borderColor: 'rgba(255, 99, 132, 0.8)', |
| borderWidth: 1, |
| type: 'line', |
| fill: false |
| }, |
| { |
| label: 'SOLL Max', |
| data: [200, 180, 200, 200, 190], |
| backgroundColor: 'rgba(153, 102, 255, 0.4)', |
| borderColor: 'rgba(153, 102, 255, 0.8)', |
| borderWidth: 1, |
| type: 'line', |
| fill: false |
| } |
| ] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| y: { |
| beginAtZero: true, |
| title: { |
| display: true, |
| text: 'Anzahl Behälter' |
| } |
| } |
| }, |
| plugins: { |
| tooltip: { |
| mode: 'index', |
| intersect: false, |
| }, |
| legend: { |
| position: 'top', |
| }, |
| title: { |
| display: true, |
| text: 'Behälteranzahl pro Standort (Min/Max)' |
| } |
| } |
| } |
| }); |
| |
| |
| document.querySelectorAll('button:contains("Bearbeiten")').forEach(button => { |
| button.addEventListener('click', function() { |
| document.getElementById('editModal').classList.remove('hidden'); |
| }); |
| }); |
| }); |
| |
| |
| document.getElementById('timePeriod').addEventListener('change', function() { |
| if(this.value === 'custom') { |
| |
| alert('Benutzerdefinierter Zeitraum ausgewählt - Implementierung für Datumsauswahl würde hier folgen'); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
