add programminfo.tsx and program-info.json for

information and display of program details
add simple logout-page

dashboard/src/App.tsx

@@ -1,11 +1,5 @@
 import React, { useState } from 'react';
-import {
-  BrowserRouter as Router,
-  Routes,
-  Route,
-  Link,
-  Outlet,
-} from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route, Link, Outlet } from 'react-router-dom';
 import logo from './assets/logo.png';
 import './App.css';
 
@@ -21,6 +15,7 @@ import {
   MonitorDotIcon,
   LogOut,
   Wrench,
+  Info,
 } from 'lucide-react';
 import { ToastProvider } from './components/ToastProvider';
 
@@ -34,6 +29,7 @@ const sidebarItems = [
   { name: 'Medien', path: '/medien', icon: Image },
   { name: 'Benutzer', path: '/benutzer', icon: User },
   { name: 'Einstellungen', path: '/einstellungen', icon: Settings },
+  { name: 'Programminfo', path: '/programminfo', icon: Info },
 ];
 
 // Dummy Components (können in eigene Dateien ausgelagert werden)
@@ -46,18 +42,28 @@ import Media from './media';
 import Benutzer from './benutzer';
 import Einstellungen from './einstellungen';
 import SetupMode from './SetupMode';
+import Programminfo from './programminfo';
+import Logout from './logout';
 
 // ENV aus .env holen (Platzhalter, im echten Projekt über process.env oder API)
 // const ENV = import.meta.env.VITE_ENV || 'development';
 
 const Layout: React.FC = () => {
   const [collapsed, setCollapsed] = useState(false);
+  const [version, setVersion] = useState('');
+
+  React.useEffect(() => {
+    fetch('/program-info.json')
+      .then(res => res.json())
+      .then(data => setVersion(data.version))
+      .catch(err => console.error('Failed to load version info:', err));
+  }, []);
 
   return (
     <div className="layout-container">
       {/* Sidebar */}
       <aside
-        className={`sidebar-theme flex flex-col transition-all duration-300 ${collapsed ? 'w-20' : 'w-30'}`}
+        className={`sidebar-theme flex flex-col transition-all duration-300 ${collapsed ? 'w-20' : 'w-64'}`}
       >
         <div
           className="h-20 flex items-center justify-center border-b"
@@ -94,20 +100,19 @@ const Layout: React.FC = () => {
             );
           })}
         </nav>
-        {/* Abmelden-Button immer ganz unten */}
-        <div className="mb-4 mt-auto">
-          <button
+        {/* Abmelden-Button und Version immer ganz unten */}
+        <div className="mt-auto mb-2">
+          <Link
+            to="/logout"
             className="sidebar-logout flex items-center gap-3 px-6 py-3 w-full transition-colors no-underline"
             title={collapsed ? 'Abmelden' : undefined}
-            onClick={() => {
-              // Hier ggf. Logout-Logik einfügen
-              window.location.href = '/logout';
-            }}
-            type="button"
           >
             <LogOut size={22} />
             {!collapsed && 'Abmelden'}
-          </button>
+          </Link>
+          {!collapsed && version && (
+            <div className="px-6 pt-2 text-xs text-center opacity-70">Version {version}</div>
+          )}
         </div>
       </aside>
       {/* Main Content */}
@@ -143,9 +148,7 @@ const Layout: React.FC = () => {
   );
 };
 
-
 const App: React.FC = () => {
-
   // Automatische Navigation zu /clients bei leerer Beschreibung entfernt
 
   return (
@@ -161,7 +164,9 @@ const App: React.FC = () => {
           <Route path="einstellungen" element={<Einstellungen />} />
           <Route path="clients" element={<Infoscreens />} />
           <Route path="setup" element={<SetupMode />} />
+          <Route path="programminfo" element={<Programminfo />} />
         </Route>
+        <Route path="/logout" element={<Logout />} />
       </Routes>
     </ToastProvider>
   );