From 54eaa8692492014c8f4a7f4b5f592c6319ed14ab Mon Sep 17 00:00:00 2001 From: donpat1to Date: Wed, 8 Oct 2025 15:03:17 +0200 Subject: [PATCH] added website navigation structur --- frontend/src/App.tsx | 125 +++-- frontend/src/components/Layout/Footer.tsx | 98 ++++ frontend/src/components/Layout/Layout.tsx | 34 ++ frontend/src/components/Layout/Navigation.tsx | 189 +++++++ frontend/src/pages/Auth/Login.tsx | 2 +- frontend/src/pages/Dashboard/Dashboard.tsx | 499 +++++++++++++----- .../pages/Employees/EmployeeManagement.tsx | 28 + frontend/src/pages/Help/Help.tsx | 28 + frontend/src/pages/Settings/Settings.tsx | 28 + .../src/pages/ShiftPlans/ShiftPlanList.tsx | 46 ++ 10 files changed, 886 insertions(+), 191 deletions(-) create mode 100644 frontend/src/components/Layout/Footer.tsx create mode 100644 frontend/src/components/Layout/Layout.tsx create mode 100644 frontend/src/components/Layout/Navigation.tsx create mode 100644 frontend/src/pages/Employees/EmployeeManagement.tsx create mode 100644 frontend/src/pages/Help/Help.tsx create mode 100644 frontend/src/pages/Settings/Settings.tsx create mode 100644 frontend/src/pages/ShiftPlans/ShiftPlanList.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index cadd3a5..5bb390f 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,79 +1,90 @@ // frontend/src/App.tsx import React from 'react'; -import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'; +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import { AuthProvider, useAuth } from './contexts/AuthContext'; +import Layout from './components/Layout/Layout'; import Login from './pages/Auth/Login'; import Dashboard from './pages/Dashboard/Dashboard'; -import ShiftTemplateList from './pages/ShiftTemplates/ShiftTemplateList'; -import ShiftTemplateEditor from './pages/ShiftTemplates/ShiftTemplateEditor'; +import ShiftPlanList from './pages/ShiftPlans/ShiftPlanList'; +import ShiftPlanCreate from './pages/ShiftPlans/ShiftPlanCreate'; +import EmployeeManagement from './pages/Employees/EmployeeManagement'; +import Settings from './pages/Settings/Settings'; +import Help from './pages/Help/Help'; // Protected Route Component -const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => { - const { user, loading } = useAuth(); +const ProtectedRoute: React.FC<{ children: React.ReactNode; roles?: string[] }> = ({ + children, + roles = ['admin', 'instandhalter', 'user'] +}) => { + const { user, loading, hasRole } = useAuth(); if (loading) { - return
Lade...
; + return ( + +
+
⏳ Lade Anwendung...
+
+ + ); } - return user ? <>{children} : ; -}; - -const PublicRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => { - const { user, loading } = useAuth(); - - if (loading) { - return
Lade...
; + if (!user || !hasRole(roles)) { + return ; } - return !user ? <>{children} : ; + return {children}; }; -function AppRoutes() { - return ( - - {/* Public Route - nur für nicht eingeloggte User */} - - - - } /> - - {/* Protected Routes - nur für eingeloggte User */} - - - - } /> - - - - - } /> - - - - - } /> - - - - - } /> - - {/* Fallback Route */} - } /> - - ); -} - function App() { return ( - + + {/* Public Route */} + } /> + + {/* Protected Routes with Layout */} + + + + } /> + + + + + } /> + + + + + } /> + + + + + } /> + + + + + } /> + + + + + } /> + + {/* Legal Pages (ohne Layout für einfacheren Zugang) */} + Impressum Seite} /> + Datenschutz Seite} /> + AGB Seite} /> + ); diff --git a/frontend/src/components/Layout/Footer.tsx b/frontend/src/components/Layout/Footer.tsx new file mode 100644 index 0000000..612d1c9 --- /dev/null +++ b/frontend/src/components/Layout/Footer.tsx @@ -0,0 +1,98 @@ +// frontend/src/components/Layout/Footer.tsx +import React from 'react'; +import { Link } from 'react-router-dom'; + +const Footer: React.FC = () => { + return ( +
+
+ {/* App Info */} +
+

🗓️ SchichtPlaner

+

+ Einfache Schichtplanung für Ihr Team. + Optimierte Arbeitszeiten, transparente Planung. +

+
+ + {/* Quick Links */} +
+

Schnellzugriff

+
    +
  • + + 📖 Anleitung + +
    • +
  • + + ❓ Häufige Fragen + +
    • +
  • + + 💬 Support + +
    • +
+
+ + {/* Legal Links */} +
+

Rechtliches

+
    +
  • + + 📄 Impressum + +
    • +
  • + + 🔒 Datenschutz + +
    • +
  • + + 📝 AGB + +
    • +
+
+ + {/* Contact */} +
+

Kontakt

+
+

📧 support@schichtplaner.de

+

📞 +49 123 456 789

+

🕘 Mo-Fr: 9:00-17:00

+
+
+
+ +
+

© 2024 SchichtPlaner. Alle Rechte vorbehalten.

+
+
+ ); +}; + +export default Footer; \ No newline at end of file diff --git a/frontend/src/components/Layout/Layout.tsx b/frontend/src/components/Layout/Layout.tsx new file mode 100644 index 0000000..de23aac --- /dev/null +++ b/frontend/src/components/Layout/Layout.tsx @@ -0,0 +1,34 @@ +// frontend/src/components/Layout/Layout.tsx +import React from 'react'; +import Navigation from './Navigation'; +import Footer from './Footer'; + +interface LayoutProps { + children: React.ReactNode; +} + +const Layout: React.FC = ({ children }) => { + return ( +
+ + +
+ {children} +
+ +
+
+ ); +}; + +export default Layout; \ No newline at end of file diff --git a/frontend/src/components/Layout/Navigation.tsx b/frontend/src/components/Layout/Navigation.tsx new file mode 100644 index 0000000..83ebd7d --- /dev/null +++ b/frontend/src/components/Layout/Navigation.tsx @@ -0,0 +1,189 @@ +// frontend/src/components/Layout/Navigation.tsx +import React, { useState } from 'react'; +import { Link, useLocation } from 'react-router-dom'; +import { useAuth } from '../../contexts/AuthContext'; + +const Navigation: React.FC = () => { + const [mobileMenuOpen, setMobileMenuOpen] = useState(false); + const { user, logout, hasRole } = useAuth(); + const location = useLocation(); + + const isActive = (path: string) => location.pathname === path; + + const navigationItems = [ + { path: '/', label: '🏠 Dashboard', icon: '🏠', roles: ['admin', 'instandhalter', 'user'] }, + { path: '/shift-plans', label: '📅 Schichtpläne', icon: '📅', roles: ['admin', 'instandhalter', 'user'] }, + { path: '/employees', label: '👥 Mitarbeiter', icon: '👥', roles: ['admin', 'instandhalter'] }, + { path: '/settings', label: '⚙️ Einstellungen', icon: '⚙️', roles: ['admin'] }, + { path: '/help', label: '❓ Hilfe', icon: '❓', roles: ['admin', 'instandhalter', 'user'] }, + ]; + + const filteredNavigation = navigationItems.filter(item => + hasRole(item.roles) + ); + + return ( + <> + {/* Desktop Navigation */} + + + {/* Breadcrumbs */} +
+
+ {/* Breadcrumb wird dynamisch basierend auf der Route gefüllt */} + + 🏠 Dashboard {location.pathname !== '/' && '>'} + {location.pathname === '/shift-plans' && ' 📅 Schichtpläne'} + {location.pathname === '/employees' && ' 👥 Mitarbeiter'} + {location.pathname === '/settings' && ' ⚙️ Einstellungen'} + {location.pathname === '/help' && ' ❓ Hilfe'} + +
+
+ + ); +}; + +export default Navigation; \ No newline at end of file diff --git a/frontend/src/pages/Auth/Login.tsx b/frontend/src/pages/Auth/Login.tsx index 5611023..a1b0896 100644 --- a/frontend/src/pages/Auth/Login.tsx +++ b/frontend/src/pages/Auth/Login.tsx @@ -110,7 +110,7 @@ const Login: React.FC = () => { transition: 'background-color 0.2s' }} > - {loading ? '⏳ Anmeldung...' : '🔐 Anmelden'} + {loading ? '⏳ Anmeldung...' : 'Anmelden'} diff --git a/frontend/src/pages/Dashboard/Dashboard.tsx b/frontend/src/pages/Dashboard/Dashboard.tsx index 9c6f076..88bb4de 100644 --- a/frontend/src/pages/Dashboard/Dashboard.tsx +++ b/frontend/src/pages/Dashboard/Dashboard.tsx @@ -1,159 +1,392 @@ // frontend/src/pages/Dashboard/Dashboard.tsx -import React from 'react'; +import React, { useState, useEffect } from 'react'; import { Link } from 'react-router-dom'; import { useAuth } from '../../contexts/AuthContext'; +// Mock Data für die Demo +const mockData = { + currentShiftPlan: { + id: '1', + name: 'November Schichtplan 2024', + period: '01.11.2024 - 30.11.2024', + status: 'Aktiv', + shiftsCovered: 85, + totalShifts: 120 + }, + upcomingShifts: [ + { id: '1', date: 'Heute', time: '08:00 - 16:00', type: 'Frühschicht', assigned: true }, + { id: '2', date: 'Morgen', time: '14:00 - 22:00', type: 'Spätschicht', assigned: true }, + { id: '3', date: '15.11.2024', time: '08:00 - 16:00', type: 'Frühschicht', assigned: false } + ], + teamStats: { + totalEmployees: 24, + availableToday: 18, + onVacation: 3, + sickLeave: 2 + }, + recentActivities: [ + { id: '1', action: 'Schichtplan veröffentlicht', user: 'Max Mustermann', time: 'vor 2 Stunden' }, + { id: '2', action: 'Mitarbeiter hinzugefügt', user: 'Sarah Admin', time: 'vor 4 Stunden' }, + { id: '3', action: 'Verfügbarkeit geändert', user: 'Tom Bauer', time: 'vor 1 Tag' } + ] +}; + const Dashboard: React.FC = () => { - const { user, logout, hasRole } = useAuth(); + const { user, hasRole } = useAuth(); + const [loading, setLoading] = useState(true); + + useEffect(() => { + // Simuliere Daten laden + setTimeout(() => setLoading(false), 1000); + }, []); + + if (loading) { + return ( +
+
⏳ Lade Dashboard...
+
+ ); + } return ( -
-
-

Schichtplan Dashboard

-
- Eingeloggt als: {user?.name} ({user?.role}) - -
+
+ {/* Willkommens-Bereich */} +
+

+ Willkommen zurück, {user?.name}! 👋 +

+

+ {new Date().toLocaleDateString('de-DE', { + weekday: 'long', + year: 'numeric', + month: 'long', + day: 'numeric' + })} +

- {/* Admin/Instandhalter Funktionen */} + {/* Quick Actions - Nur für Admins/Instandhalter */} {hasRole(['admin', 'instandhalter']) && ( -
+
+

Schnellaktionen

-

Schichtplan erstellen

-

Neuen Schichtplan erstellen und verwalten

- - +
📅
+
Neuen Schichtplan
+
Erstellen
+
+ + + +
{ + e.currentTarget.style.transform = 'translateY(-2px)'; + }} onMouseLeave={(e) => { + e.currentTarget.style.transform = 'translateY(0)'; + }}> +
👥
+
Mitarbeiter
+
Verwalten
+
+ + + +
{ + e.currentTarget.style.transform = 'translateY(-2px)'; + }} onMouseLeave={(e) => { + e.currentTarget.style.transform = 'translateY(0)'; + }}> +
📋
+
Alle Pläne
+
Anzeigen
+
- -
-

Vorlagen verwalten

-

Schichtplan Vorlagen erstellen und bearbeiten

- - - -
- - {hasRole(['admin']) && ( -
-

Benutzer verwalten

-

Benutzerkonten erstellen und verwalten

- - - -
- )}
)} - {/* Aktuelle Schichtpläne */} + {/* Haupt-Grid mit Informationen */}
-

Aktuelle Schichtpläne

-
-

Noch keine Schichtpläne vorhanden.

- {hasRole(['admin', 'instandhalter']) && ( - - - - )} + {/* Aktueller Schichtplan */} +
+

📊 Aktueller Schichtplan

+
+
+ {mockData.currentShiftPlan.name} +
+
+ {mockData.currentShiftPlan.period} +
+
+ +
+
+ Fortschritt: + {mockData.currentShiftPlan.shiftsCovered}/{mockData.currentShiftPlan.totalShifts} Schichten +
+
+
+
+
+ +
+ {mockData.currentShiftPlan.status} +
+
+ + {/* Team-Statistiken */} +
+

👥 Team-Übersicht

+
+
+ Gesamt Mitarbeiter: + + {mockData.teamStats.totalEmployees} + +
+
+ Verfügbar heute: + + {mockData.teamStats.availableToday} + +
+
+ Im Urlaub: + + {mockData.teamStats.onVacation} + +
+
+ Krankgeschrieben: + + {mockData.teamStats.sickLeave} + +
+
- {/* Schnellzugriff für alle User */} -
-

Schnellzugriff

-
- - - - - {hasRole(['user']) && ( - - )} + {/* Unteres Grid */} +
+ {/* Meine nächsten Schichten (für normale User) */} + {hasRole(['user']) && ( +
+

⏰ Meine nächsten Schichten

+
+ {mockData.upcomingShifts.map(shift => ( +
+
+
{shift.date}
+
{shift.time}
+
{shift.type}
+
+
+ {shift.assigned ? 'Zugewiesen' : 'Noch offen'} +
+
+ ))} +
+
+ )} + + {/* Letzte Aktivitäten (für Admins/Instandhalter) */} + {hasRole(['admin', 'instandhalter']) && ( +
+

📝 Letzte Aktivitäten

+
+ {mockData.recentActivities.map(activity => ( +
+
+ {activity.action} +
+
+ von {activity.user} +
+
+ {activity.time} +
+
+ ))} +
+
+ )} + + {/* Schnelllinks */} +
+

🔗 Schnellzugriff

+
+ +
{ + e.currentTarget.style.backgroundColor = '#e9ecef'; + }} onMouseLeave={(e) => { + e.currentTarget.style.backgroundColor = '#f8f9fa'; + }}> + 📅 + Alle Schichtpläne anzeigen +
+ + + +
{ + e.currentTarget.style.backgroundColor = '#e9ecef'; + }} onMouseLeave={(e) => { + e.currentTarget.style.backgroundColor = '#f8f9fa'; + }}> + ❓ + Hilfe & Anleitung +
+ + + {hasRole(['user']) && ( +
{ + e.currentTarget.style.backgroundColor = '#e9ecef'; + }} onMouseLeave={(e) => { + e.currentTarget.style.backgroundColor = '#f8f9fa'; + }}> + 📝 + Meine Verfügbarkeit bearbeiten +
+ )} +
diff --git a/frontend/src/pages/Employees/EmployeeManagement.tsx b/frontend/src/pages/Employees/EmployeeManagement.tsx new file mode 100644 index 0000000..861a42b --- /dev/null +++ b/frontend/src/pages/Employees/EmployeeManagement.tsx @@ -0,0 +1,28 @@ +// frontend/src/pages/Employees/EmployeeManagement.tsx +import React from 'react'; + +const EmployeeManagement: React.FC = () => { + return ( +
+

👥 Mitarbeiter Verwaltung

+ +
+
👥
+

Mitarbeiter Übersicht

+

Hier können Sie Mitarbeiter verwalten und deren Verfügbarkeiten einsehen.

+

+ Diese Seite wird demnächst mit Funktionen gefüllt. +

+
+
+ ); +}; + +export default EmployeeManagement; \ No newline at end of file diff --git a/frontend/src/pages/Help/Help.tsx b/frontend/src/pages/Help/Help.tsx new file mode 100644 index 0000000..27d5e16 --- /dev/null +++ b/frontend/src/pages/Help/Help.tsx @@ -0,0 +1,28 @@ +// frontend/src/pages/Help/Help.tsx +import React from 'react'; + +const Help: React.FC = () => { + return ( +
+

❓ Hilfe & Support

+ +
+
📖
+

Hilfe Center

+

Hier finden Sie Anleitungen und Support für die Schichtplan-App.

+

+ Diese Seite wird demnächst mit Funktionen gefüllt. +

+
+
+ ); +}; + +export default Help; \ No newline at end of file diff --git a/frontend/src/pages/Settings/Settings.tsx b/frontend/src/pages/Settings/Settings.tsx new file mode 100644 index 0000000..a68403e --- /dev/null +++ b/frontend/src/pages/Settings/Settings.tsx @@ -0,0 +1,28 @@ +// frontend/src/pages/Settings/Settings.tsx +import React from 'react'; + +const Settings: React.FC = () => { + return ( +
+

⚙️ Einstellungen

+ +
+
⚙️
+

System Einstellungen

+

Hier können Sie Systemweite Einstellungen vornehmen.

+

+ Diese Seite wird demnächst mit Funktionen gefüllt. +

+
+
+ ); +}; + +export default Settings; \ No newline at end of file diff --git a/frontend/src/pages/ShiftPlans/ShiftPlanList.tsx b/frontend/src/pages/ShiftPlans/ShiftPlanList.tsx new file mode 100644 index 0000000..3a192a7 --- /dev/null +++ b/frontend/src/pages/ShiftPlans/ShiftPlanList.tsx @@ -0,0 +1,46 @@ +// frontend/src/pages/ShiftPlans/ShiftPlanList.tsx +import React from 'react'; +import { Link } from 'react-router-dom'; +import { useAuth } from '../../contexts/AuthContext'; + +const ShiftPlanList: React.FC = () => { + const { hasRole } = useAuth(); + + return ( +
+
+

📅 Schichtpläne

+ {hasRole(['admin', 'instandhalter']) && ( + + + + )} +
+ +
+
📋
+

Schichtpläne Übersicht

+

Hier werden alle Schichtpläne angezeigt.

+

+ Diese Seite wird demnächst mit Funktionen gefüllt. +

+
+
+ ); +}; + +export default ShiftPlanList; \ No newline at end of file