first kanban-view integration for client groups

dashboard/src/App.tsx

@@ -12,7 +12,8 @@ import {
   User,
   Settings,
   Monitor,
-  MonitorDotIcon
+  MonitorDotIcon,
+  LogOut,
 } from 'lucide-react';
 
 const sidebarItems = [
@@ -20,7 +21,7 @@ const sidebarItems = [
   { name: 'Termine', path: '/termine', icon: Calendar },
   { name: 'Ressourcen', path: '/ressourcen', icon: Boxes },
   { name: 'Infoscreens', path: '/Infoscreens', icon: Monitor },
-  { name: 'Gruppen', path: '/gruppen', icon: MonitorDotIcon },
+  { name: 'Gruppen', path: '/infoscr_groups', icon: MonitorDotIcon },
   { name: 'Medien', path: '/medien', icon: Image },
   { name: 'Benutzer', path: '/benutzer', icon: User },
   { name: 'Einstellungen', path: '/einstellungen', icon: Settings },
@@ -54,9 +55,21 @@ const Layout: React.FC = () => {
           />
         </div>
         <button
-          className="p-2 focus:outline-none hover:bg-[#d6c3a6] transition-colors"
+          className="p-2 focus:outline-none transition-colors"
+          style={{
+            backgroundColor: '#e5d8c7',
+            color: '#78591c',
+          }}
           onClick={() => setCollapsed(!collapsed)}
           aria-label={collapsed ? 'Sidebar ausklappen' : 'Sidebar einklappen'}
+          onMouseEnter={e => {
+            e.currentTarget.style.backgroundColor = '#78591c';
+            e.currentTarget.style.color = '#e5d8c7';
+          }}
+          onMouseLeave={e => {
+            e.currentTarget.style.backgroundColor = '#e5d8c7';
+            e.currentTarget.style.color = '#78591c';
+          }}
         >
           <span style={{ fontSize: 20 }}>{collapsed ? '▶' : '◀'}</span>
         </button>
@@ -92,6 +105,38 @@ const Layout: React.FC = () => {
             );
           })}
         </nav>
+        {/* Abmelden-Button immer ganz unten */}
+        <div className="mb-4 mt-auto">
+          <button
+            className="flex items-center gap-3 px-6 py-3 w-full transition-colors no-underline"
+            style={{
+              color: '#78591c',
+              backgroundColor: '#e5d8c7',
+              border: 'none',
+              fontWeight: 500,
+              cursor: 'pointer',
+              textAlign: 'left',
+              fontSize: '1.15rem',
+              width: '100%',
+            }}
+            title={collapsed ? 'Abmelden' : undefined}
+            onClick={() => {
+              // Hier ggf. Logout-Logik einfügen
+              window.location.href = '/logout';
+            }}
+            onMouseEnter={e => {
+              e.currentTarget.style.backgroundColor = '#78591c';
+              e.currentTarget.style.color = '#e5d8c7';
+            }}
+            onMouseLeave={e => {
+              e.currentTarget.style.backgroundColor = '#e5d8c7';
+              e.currentTarget.style.color = '#78591c';
+            }}
+          >
+            <LogOut size={22} />
+            {!collapsed && 'Abmelden'}
+          </button>
+        </div>
       </aside>
       {/* Main Content */}
       <div className="flex-1 flex flex-col">
@@ -134,7 +179,7 @@ const App: React.FC = () => (
         <Route path="termine" element={<Appointments />} />
         <Route path="ressourcen" element={<Ressourcen />} />
         <Route path="Infoscreens" element={<Infoscreens />} />
-        <Route path="gruppen" element={<Gruppen />} />
+        <Route path="infoscr_groups" element={<Infoscreen_groups />} />
         <Route path="medien" element={<Medien />} />
         <Route path="benutzer" element={<Benutzer />} />
         <Route path="einstellungen" element={<Einstellungen />} />
@@ -150,7 +195,7 @@ import Dashboard from './dashboard';
 import Appointments from './appointments';
 import Ressourcen from './ressourcen';
 import Infoscreens from './clients';
-import Gruppen from './gruppen';
+import Infoscreen_groups from './infoscreen_groups';
 import Medien from './medien';
 import Benutzer from './benutzer';
 import Einstellungen from './einstellungen';