added esbuild

.github/workflows/docker.yml

@@ -16,12 +16,22 @@ jobs:
     runs-on: ubuntu-latest
     outputs:
       tag_name: ${{ steps.set_tag.outputs.tag_name }}
+      is_main_branch: ${{ steps.branch_check.outputs.is_main }}
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
         with:
           fetch-depth: 0  # Fetch all history for tags
 
+      - name: Check if main branch
+        id: branch_check
+        run: |
+          if [[ "${GITHUB_REF}" == "refs/heads/main" || "${GITHUB_REF}" == "refs/heads/master" ]]; then
+            echo "is_main_branch=true" >> $GITHUB_OUTPUT
+          else
+            echo "is_main_branch=false" >> $GITHUB_OUTPUT
+          fi
+
       - name: Determine next semantic version tag
         id: set_tag
         run: |
@@ -65,14 +75,10 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: '20'
-          cache: 'npm'
-          cache-dependency-path: backend/package-lock.json
 
       - name: Install backend dependencies
         working-directory: ./backend
-        run: |
-          # Try npm ci first, if it fails use npm install
-          npm ci || (echo "package-lock.json out of sync, using npm install..." && npm install)
+        run: npm install
 
       - name: Run TypeScript check
         working-directory: ./backend
@@ -139,6 +145,8 @@ jobs:
             type=sha
             # Add the dynamically generated semantic version
             ${{ needs.set-tag.outputs.tag_name }}
+            # Add latest tag for main branch
+            ${{ needs.set-tag.outputs.is_main_branch == 'true' && 'latest' }}
 
       - name: Build and push Docker image
         uses: docker/build-push-action@v5
@@ -168,3 +176,4 @@ jobs:
           echo "- Image: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}"
           echo "- Tags: ${{ steps.meta.outputs.tags }}"
           echo "- New version: ${{ needs.set-tag.outputs.tag_name }}"
+          echo "- Is main branch: ${{ needs.set-tag.outputs.is_main_branch }}"

.gitignore

@@ -110,3 +110,29 @@ Thumbs.db
 
 # Optional eslint cache
 .eslintcache
+
+# Ignore contents of premium folder in public repo
+premium/*
+!premium/README-PREMIUM.md
+!premium/.gitkeep
+
+.git
+.gitignore
+node_modules
+npm-debug.log
+README.md
+.env
+.nyc_output
+coverage
+.cache
+dist
+build
+logs
+*.tsbuildinfo
+
+# Frontend specific
+frontend/dist
+frontend/.vite
+
+# Backend specific  
+backend/dist

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "premium"]
+	path = premium
+	url = https://github.com/donpat1to/Schichtenplaner-Pro.git

Dockerfile

@@ -1,7 +1,7 @@
-# Multi-stage build for combined frontend + backend
-FROM node:20-bullseye AS backend-builder
+# Single stage build for workspaces
+FROM node:20-bullseye AS builder
 
-WORKDIR /app/backend
+WORKDIR /app
 
 # Install Python + OR-Tools
 RUN apt-get update && apt-get install -y python3 python3-pip build-essential \
@@ -10,78 +10,58 @@ RUN apt-get update && apt-get install -y python3 python3-pip build-essential \
 # Create symlink so python3 is callable as python
 RUN ln -sf /usr/bin/python3 /usr/bin/python
 
-# Copy backend files
-COPY backend/package*.json ./
-COPY backend/tsconfig.json ./
+# Copy root package files first
+COPY package*.json ./
+COPY tsconfig.base.json ./
+COPY ecosystem.config.cjs ./
 
-# Install backend dependencies
-RUN npm ci
+# Install root dependencies
+RUN npm install --only=production
 
-# Copy backend source
-COPY backend/src/ ./src/
+# Copy workspace files
+COPY backend/ ./backend/
+COPY frontend/ ./frontend/
 
-# Build backend
-RUN npm run build
+# Install workspace dependencies individually
+RUN npm install --workspace=backend
+RUN npm install --workspace=frontend
 
-# Copy database files manually
-RUN cp -r src/database/ dist/database/
+# Build backend first
+RUN npm run build --only=production --workspace=backend
+
+# Build frontend
+RUN npm run build --only=production --workspace=frontend
 
 # Verify Python and OR-Tools installation
 RUN python -c "from ortools.sat.python import cp_model; print('OR-Tools installed successfully')"
 
-# Frontend build stage
-FROM node:20-bullseye AS frontend-builder
-
-WORKDIR /app/frontend
-
-# Copy frontend files
-COPY frontend/package*.json ./
-COPY frontend/tsconfig.json ./
-
-# Install frontend dependencies
-RUN npm ci
-
-# Copy frontend source
-COPY frontend/src/ ./src/
-COPY frontend/public/ ./public/
-
-# Build frontend
-RUN npm run build
-
-# Production stage
+# Production stage (same as above)
 FROM node:20-bookworm
 
 WORKDIR /app
 
-# Install PM2 for process management
 RUN npm install -g pm2
-
-# Create data directory for SQLite database with proper permissions
 RUN mkdir -p /app/data
 
-# Copy backend built files
-COPY --from=backend-builder /app/backend/package*.json ./
-COPY --from=backend-builder /app/backend/dist/ ./dist/
-COPY --from=backend-builder /app/backend/node_modules/ ./node_modules/
+COPY --from=builder /app/backend/dist/ ./dist/
+COPY --from=builder /app/backend/package*.json ./
 
-# Copy frontend built files  
-COPY --from=frontend-builder /app/frontend/build/ ./frontend-build/
+COPY --from=builder /app/node_modules/ ./node_modules/
+COPY --from=builder /app/frontend/dist/ ./frontend-build/
 
-# Copy PM2 configuration
-COPY ecosystem.config.cjs ./
+COPY --from=builder /app/ecosystem.config.cjs ./
+
+COPY --from=builder /app/backend/src/database/ ./dist/database/
+COPY --from=builder /app/backend/src/database/ ./database/
 
-# Create a non-root user and group - DEBIAN STYLE
 RUN groupadd -g 1001 nodejs && \
     useradd -m -u 1001 -s /bin/bash -g nodejs schichtplan && \
     chown -R schichtplan:nodejs /app && \
     chmod 755 /app && \
     chmod 775 /app/data
 
-# Set PM2 to use app directory instead of home directory
 ENV PM2_HOME=/app/.pm2
-
 USER schichtplan
-
 EXPOSE 3002
 
 HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \

backend/src/server.ts

@@ -40,7 +40,7 @@ app.get('/api/health', (req: any, res: any) => {
 });
 
 // 🆕 STATIC FILE SERVING FÜR FRONTEND
-const frontendBuildPath = path.join(__dirname, '../frontend-build');
+const frontendBuildPath = process.env.FRONTEND_BUILD_PATH || '../frontend-build';
 console.log('📁 Frontend build path:', frontendBuildPath);
 
 // Überprüfe ob das Verzeichnis existiert

backend/tsconfig.json

@@ -1,19 +1,22 @@
-// backend/tsconfig.json
 {
   "compilerOptions": {
     "target": "ES2022",
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "allowJs": true,
     "outDir": "./dist",
     "rootDir": "./src",
     "strict": true,
+    "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
 }

ecosystem.config.cjs

@@ -1,18 +1,17 @@
 // ecosystem.config.cjs
 module.exports = {
-  apps: [
-    {
-      name: 'schichtplaner',
-      script: './dist/server.js',
-      instances: 1,
-      exec_mode: 'fork',
-      env: {
-        NODE_ENV: 'production',
-        PORT: 3002
-      },
-      error_file: './logs/app-err.log',
-      out_file: './logs/app-out.log',
-      time: true
-    }
-  ]
+  apps: [{
+    name: 'schichtplan-app',
+    script: './dist/server.js',
+    instances: 1,
+    env: {
+      NODE_ENV: 'production',
+      PORT: 3002,
+      FRONTEND_BUILD_PATH: './frontend-build'
+    },
+    error_file: './logs/err.log',
+    out_file: './logs/out.log',
+    log_file: './logs/combined.log',
+    time: true
+  }]
 };

frontend/.env.development

@@ -1,4 +0,0 @@
-# frontend/.env.development
-BROWSER=none
-FAST_REFRESH=true
-DANGEROUSLY_DISABLE_HOST_CHECK=true

frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Shift Planning App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -2,49 +2,25 @@
   "name": "frontend",
   "version": "0.1.0",
   "private": true,
-  "proxy": "http://localhost:3002",
+  "type": "module",
   "dependencies": {
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.126",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.1",
-    "@types/react-router-dom": "^5.3.3",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-router-dom": "^7.9.3",
-    "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^6.28.0"
   },
   "devDependencies": {
-    "http-proxy-middleware": "^3.0.5",
-    "react-scripts": "^5.0.1"
+    "@types/node": "20.19.23",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/react-router-dom": "^5.3.3",
+    "@vitejs/plugin-react": "^4.3.3",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.7",
+    "esbuild": "^0.21.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
   }
 }

frontend/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "SP",
+  "name": "schichtenplaner",
   "icons": [
     {
       "src": "favicon.ico",

frontend/src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-// frontend/src/App.tsx - KORRIGIERT MIT LAYOUT
+// src/App.tsx - UPDATED FOR VITE
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { AuthProvider, useAuth } from './contexts/AuthContext';
@@ -16,6 +16,38 @@ import Settings from './pages/Settings/Settings';
 import Help from './pages/Help/Help';
 import Setup from './pages/Setup/Setup';
 
+// Free Footer Link Pages (always available)
+import FAQ from './components/Layout/FooterLinks/FAQ/FAQ';
+import About from './components/Layout/FooterLinks/About/About';
+import Features from './components/Layout/FooterLinks/Features/Features';
+import { CommunityContact, CommunityLegalPage } from './components/Layout/FooterLinks/CommunityLinks/communityLinks';
+
+// Vite environment variables (use import.meta.env instead of process.env)
+const ENABLE_PRO = import.meta.env.ENABLE_PRO === 'true';
+
+// Conditional Premium Components
+let PremiumContact: React.FC = CommunityContact;
+let PremiumPrivacy: React.FC = () => <CommunityLegalPage title="Datenschutz" />;
+let PremiumImprint: React.FC = () => <CommunityLegalPage title="Impressum" />;
+let PremiumTerms: React.FC = () => <CommunityLegalPage title="AGB" />;
+
+// Load premium components only when ENABLE_PRO is true
+if (ENABLE_PRO) {
+  try {
+    // Use require with type assertions to avoid dynamic import issues
+    const premiumModule = require('@premium-frontend/components/FooterLinks');
+
+    if (premiumModule.Contact) PremiumContact = premiumModule.Contact;
+    if (premiumModule.Privacy) PremiumPrivacy = premiumModule.Privacy;
+    if (premiumModule.Imprint) PremiumImprint = premiumModule.Imprint;
+    if (premiumModule.Terms) PremiumTerms = premiumModule.Terms;
+    
+    console.log('✅ Premium components loaded successfully');
+  } catch (error) {
+    console.warn('⚠️ Premium components not available, using community fallbacks:', error);
+  }
+}
+
 // Protected Route Component
 const ProtectedRoute: React.FC<{ children: React.ReactNode; roles?: string[] }> = ({ 
   children, 
@@ -49,11 +81,27 @@ const ProtectedRoute: React.FC<{ children: React.ReactNode; roles?: string[] }>
   return <Layout>{children}</Layout>;
 };
 
+// Public Route Component (without Layout for footer pages)
+const PublicRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { user, loading } = useAuth();
+
+  if (loading) {
+    return (
+      <div style={{ textAlign: 'center', padding: '40px' }}>
+        <div>⏳ Lade Anwendung...</div>
+      </div>
+    );
+  }
+
+  return user ? <Layout>{children}</Layout> : <>{children}</>;
+};
+
 // Main App Content
 const AppContent: React.FC = () => {
   const { loading, needsSetup, user } = useAuth();
 
   console.log('🏠 AppContent rendering - loading:', loading, 'needsSetup:', needsSetup, 'user:', user);
+  console.log('🎯 Premium features enabled:', ENABLE_PRO);
 
   // Während des Ladens
   if (loading) {
@@ -80,52 +128,32 @@ const AppContent: React.FC = () => {
   console.log('✅ Showing protected routes for user:', user.email);
   return (
     <Routes>
-      <Route path="/" element={
-        <ProtectedRoute>
-          <Dashboard />
-        </ProtectedRoute>
-      } />
-      <Route path="/shift-plans" element={
-        <ProtectedRoute>
-          <ShiftPlanList />
-        </ProtectedRoute>
-      } />
-      <Route path="/shift-plans/new" element={
-        <ProtectedRoute roles={['admin', 'maintenance']}>
-          <ShiftPlanCreate />
-        </ProtectedRoute>
-      } />
-      <Route path="/shift-plans/:id/edit" element={
-        <ProtectedRoute roles={['admin', 'maintenance']}>
-          <ShiftPlanEdit />
-        </ProtectedRoute>
-      } />
-      <Route path="/shift-plans/:id" element={
-        <ProtectedRoute>
-          <ShiftPlanView />
-        </ProtectedRoute>
-      } />
-      <Route path="/employees" element={
-        <ProtectedRoute roles={['admin', 'maintenance']}>
-          <EmployeeManagement />
-        </ProtectedRoute>
-      } />
-      <Route path="/settings" element={
-        <ProtectedRoute>
-          <Settings />
-        </ProtectedRoute>
-      } />
-      <Route path="/help" element={
-        <ProtectedRoute>
-          <Help />
-        </ProtectedRoute>
-      } />
+      {/* Protected Routes (require login) */}
+      <Route path="/" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
+      <Route path="/shift-plans" element={<ProtectedRoute><ShiftPlanList /></ProtectedRoute>} />
+      <Route path="/shift-plans/new" element={<ProtectedRoute roles={['admin', 'maintenance']}><ShiftPlanCreate /></ProtectedRoute>} />
+      <Route path="/shift-plans/:id/edit" element={<ProtectedRoute roles={['admin', 'maintenance']}><ShiftPlanEdit /></ProtectedRoute>} />
+      <Route path="/shift-plans/:id" element={<ProtectedRoute><ShiftPlanView /></ProtectedRoute>} />
+      <Route path="/employees" element={<ProtectedRoute roles={['admin', 'maintenance']}><EmployeeManagement /></ProtectedRoute>} />
+      <Route path="/settings" element={<ProtectedRoute><Settings /></ProtectedRoute>} />
+      <Route path="/help" element={<ProtectedRoute><Help /></ProtectedRoute>} />
+
+      {/* Public Footer Link Pages (always available) */}
+      <Route path="/faq" element={<PublicRoute><FAQ /></PublicRoute>} />
+      <Route path="/about" element={<PublicRoute><About /></PublicRoute>} />
+      <Route path="/features" element={<PublicRoute><Features /></PublicRoute>} />
+
+      {/* PREMIUM Footer Link Pages (conditionally available) */}
+      <Route path="/contact" element={<PublicRoute><PremiumContact /></PublicRoute>} />
+      <Route path="/privacy" element={<PublicRoute><PremiumPrivacy /></PublicRoute>} />
+      <Route path="/imprint" element={<PublicRoute><PremiumImprint /></PublicRoute>} />
+      <Route path="/terms" element={<PublicRoute><PremiumTerms /></PublicRoute>} />
+
+      {/* Auth Routes */}
       <Route path="/login" element={<Login />} />
-      <Route path="*" element={
-        <ProtectedRoute>
-          <Dashboard />
-        </ProtectedRoute>
-      } />
+      
+      {/* Catch-all Route */}
+      <Route path="*" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
     </Routes>
   );
 };

frontend/src/components/Layout/Footer.tsx

@@ -182,20 +182,6 @@ const Footer: React.FC = () => {
           >
             Funktionen
           </a>
-          <a 
-            href="/pricing" 
-            style={styles.footerLink}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.color = '#FBFAF6';
-              e.currentTarget.style.transform = 'translateX(4px)';
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.color = 'rgba(251, 250, 246, 0.7)';
-              e.currentTarget.style.transform = 'translateX(0)';
-            }}
-          >
-            Preise
-          </a>
         </div>
       </div>
       

frontend/src/components/Layout/FooterLinks/About/About.tsx

@@ -0,0 +1,76 @@
+// frontend/src/pages/About/About.tsx
+import React from 'react';
+
+const About: React.FC = () => {
+  return (
+    <div style={{ padding: '40px 20px', maxWidth: '800px', margin: '0 auto' }}>
+      <h1>👨‍💻 Über uns</h1>
+      
+      <div style={{ 
+        backgroundColor: 'white', 
+        borderRadius: '12px', 
+        padding: '30px', 
+        marginTop: '20px',
+        boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
+        border: '1px solid #e0e0e0',
+        lineHeight: 1.6
+      }}>
+        <h2 style={{ color: '#2c3e50' }}>Unser Team</h2>
+        
+        <div style={{ display: 'flex', alignItems: 'center', marginTop: '20px', padding: '20px', backgroundColor: '#f8f9fa', borderRadius: '8px' }}>
+          <div style={{ marginRight: '20px' }}>
+            <div style={{ 
+              width: '80px', 
+              height: '80px', 
+              backgroundColor: '#3498db', 
+              borderRadius: '50%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: 'white',
+              fontSize: '2rem',
+              fontWeight: 'bold'
+            }}>
+              P
+            </div>
+          </div>
+          <div>
+            <h3 style={{ color: '#2c3e50', margin: '0 0 5px 0' }}>Patrick</h3>
+            <p style={{ color: '#6c757d', margin: '0 0 10px 0' }}>
+              Full-Stack Developer & Projektleiter
+            </p>
+            <p style={{ margin: 0, fontSize: '0.9rem' }}>
+              GitHub: <a href="https://github.com/donpat1to" style={{ color: '#3498db' }}>donpat1to</a><br/>
+              E-Mail: <a href="mailto:dev.patrick@inca-vikingo.de" style={{ color: '#3498db' }}>dev.patrick@inca-vikingo.de</a>
+            </p>
+          </div>
+        </div>
+        
+        <h3 style={{ color: '#3498db', marginTop: '30px' }}>🚀 Unsere Mission</h3>
+        <p>
+          Wir entwickeln intelligente Lösungen für die Personalplanung, 
+          die Zeit sparen und faire Schichtverteilung gewährleisten.
+        </p>
+        
+        <h3 style={{ color: '#3498db', marginTop: '25px' }}>💻 Technologie</h3>
+        <p>
+          Unser Stack umfasst moderne Technologien:
+        </p>
+        <ul>
+          <li>Frontend: React, TypeScript</li>
+          <li>Backend: Node.js, Express</li>
+          <li>Optimierung: Google OR-Tools CP-SAT</li>
+          <li>Datenbank: SQLite/PostgreSQL</li>
+        </ul>
+        
+        <h3 style={{ color: '#3498db', marginTop: '25px' }}>📈 Entwicklung</h3>
+        <p>
+          Schichtenplaner wird kontinuierlich weiterentwickelt und 
+          basiert auf Feedback unserer Nutzer.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default About;

frontend/src/components/Layout/FooterLinks/CommunityLinks/communityLinks.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+export const CommunityContact: React.FC = () => (
+  <div style={{ padding: '40px 20px', maxWidth: '800px', margin: '0 auto' }}>
+    <h1>📞 Kontakt</h1>
+    <div style={{ backgroundColor: 'white', borderRadius: '12px', padding: '30px', marginTop: '20px' }}>
+      <h2 style={{ color: '#2c3e50' }}>Community Edition</h2>
+      <p>Kontaktfunktionen sind in der Premium Edition verfügbar.</p>
+      <p>
+        <a href="/features" style={{ color: '#3498db' }}>
+          ➡️ Zu den Features
+        </a>
+      </p>
+    </div>
+  </div>
+);
+
+export const CommunityLegalPage: React.FC<{ title: string }> = ({ title }) => (
+  <div style={{ padding: '40px 20px', maxWidth: '800px', margin: '0 auto' }}>
+    <h1>📄 {title}</h1>
+    <div style={{ backgroundColor: 'white', borderRadius: '12px', padding: '30px', marginTop: '20px' }}>
+      <h2 style={{ color: '#2c3e50' }}>Community Edition</h2>
+      <p>Rechtliche Dokumentation ist in der Premium Edition verfügbar.</p>
+      <p>
+        <a href="/features" style={{ color: '#3498db' }}>
+          ➡️ Erfahren Sie mehr über Premium
+        </a>
+      </p>
+    </div>
+  </div>
+);
+
+// Optional: Barrel export für einfachere Imports
+export default {
+  CommunityContact,
+  CommunityLegalPage
+};

frontend/src/components/Layout/FooterLinks/FAQ/FAQ.tsx

@@ -0,0 +1,103 @@
+// frontend/src/pages/FAQ/FAQ.tsx
+import React, { useState } from 'react';
+
+const FAQ: React.FC = () => {
+  const [openItems, setOpenItems] = useState<number[]>([]);
+
+  const toggleItem = (index: number) => {
+    setOpenItems(prev => 
+      prev.includes(index) 
+        ? prev.filter(i => i !== index)
+        : [...prev, index]
+    );
+  };
+
+  const faqItems = [
+    {
+      question: "Wie funktioniert der Scheduling-Algorithmus?",
+      answer: "Unser System verwendet Google's OR-Tools CP-SAT Solver, um optimale Schichtzuweisungen basierend auf Verfügbarkeiten, Vertragstypen und Geschäftsregeln zu berechnen."
+    },
+    {
+      question: "Was bedeuten die Verfügbarkeits-Level 1, 2 und 3?",
+      answer: "Level 1: Bevorzugt (Mitarbeiter möchte diese Schicht), Level 2: Verfügbar (kann arbeiten), Level 3: Nicht verfügbar (kann nicht arbeiten)."
+    },
+    {
+      question: "Wie werden Vertragstypen berücksichtigt?",
+      answer: "Kleine Verträge: 1 Schicht pro Woche, Große Verträge: 2 Schichten pro Woche. Das System weist genau diese Anzahl zu."
+    },
+    {
+      question: "Kann ich manuelle Anpassungen vornehmen?",
+      answer: "Ja, nach dem automatischen Scheduling können Sie Zuordnungen manuell anpassen und optimieren."
+    },
+    {
+      question: "Was passiert bei unterbesetzten Schichten?",
+      answer: "Das System zeigt eine Warnung an und versucht, alternative Lösungen zu finden. In kritischen Fällen müssen manuelle Anpassungen vorgenommen werden."
+    },
+    {
+      question: "Wie lange dauert die Planungserstellung?",
+      answer: "Typischerweise 30-105 Sekunden, abhängig von der Anzahl der Mitarbeiter und Schichten."
+    }
+  ];
+
+  return (
+    <div style={{ padding: '40px 20px', maxWidth: '800px', margin: '0 auto' }}>
+      <h1>❓ Häufige Fragen (FAQ)</h1>
+      
+      <div style={{ 
+        backgroundColor: 'white', 
+        borderRadius: '12px', 
+        marginTop: '20px',
+        boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
+        border: '1px solid #e0e0e0'
+      }}>
+        {faqItems.map((item, index) => (
+          <div key={index} style={{ 
+            borderBottom: index < faqItems.length - 1 ? '1px solid #e0e0e0' : 'none',
+            padding: '20px 30px'
+          }}>
+            <div
+              onClick={() => toggleItem(index)}
+              style={{
+                cursor: 'pointer',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center'
+              }}
+            >
+              <h3 style={{ 
+                color: '#2c3e50', 
+                margin: 0,
+                fontSize: '1.1rem'
+              }}>
+                {item.question}
+              </h3>
+              <span style={{ 
+                fontSize: '1.5rem',
+                color: '#3498db',
+                transform: openItems.includes(index) ? 'rotate(45deg)' : 'rotate(0)',
+                transition: 'transform 0.2s ease'
+              }}>
+                +
+              </span>
+            </div>
+            
+            {openItems.includes(index) && (
+              <div style={{ 
+                marginTop: '15px',
+                padding: '15px',
+                backgroundColor: '#f8f9fa',
+                borderRadius: '8px',
+                color: '#6c757d',
+                lineHeight: 1.6
+              }}>
+                {item.answer}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default FAQ;

frontend/src/components/Layout/FooterLinks/Features/Features.tsx

@@ -0,0 +1,111 @@
+// frontend/src/pages/Features/Features.tsx
+import React from 'react';
+
+const Features: React.FC = () => {
+  const features = [
+    {
+      icon: "🤖",
+      title: "Automatisches Scheduling",
+      description: "Intelligenter Algorithmus erstellt optimale Schichtpläne basierend auf Verfügbarkeiten und Regeln"
+    },
+    {
+      icon: "⚡",
+      title: "Schnelle Berechnung",
+      description: "Google OR-Tools CP-SAT Solver findet Lösungen in 30-105 Sekunden"
+    },
+    {
+      icon: "👥",
+      title: "Flexible Regelkonfiguration",
+      description: "Anpassbare Geschäftsregeln für Trainee-Betreuung, Alleinarbeit, Vertragstypen"
+    },
+    {
+      icon: "📊",
+      title: "Echtzeit-Validierung",
+      description: "Automatische Erkennung von Regelverletzungen und Konflikten"
+    },
+    {
+      icon: "🔒",
+      title: "Lokale Datenspeicherung",
+      description: "Alle Daten bleiben in Ihrer Infrastruktur - volle Kontrolle und Datenschutz"
+    },
+    {
+      icon: "🎯",
+      title: "Präferenz-basiert",
+      description: "Berücksichtigt Mitarbeiterwünsche für höhere Zufriedenheit"
+    }
+  ];
+
+  return (
+    <div style={{ padding: '40px 20px', maxWidth: '1000px', margin: '0 auto' }}>
+      <h1>✨ Funktionen</h1>
+      
+      <div style={{ 
+        backgroundColor: 'white', 
+        borderRadius: '12px', 
+        padding: '30px', 
+        marginTop: '20px',
+        boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
+        border: '1px solid #e0e0e0'
+      }}>
+        <h2 style={{ color: '#2c3e50', textAlign: 'center', marginBottom: '40px' }}>
+          Alles, was Sie für die perfekte Schichtplanung benötigen
+        </h2>
+        
+        <div style={{ 
+          display: 'grid', 
+          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', 
+          gap: '30px' 
+        }}>
+          {features.map((feature, index) => (
+            <div key={index} style={{
+              padding: '25px',
+              backgroundColor: '#f8f9fa',
+              borderRadius: '12px',
+              border: '2px solid #e9ecef',
+              textAlign: 'center',
+              transition: 'transform 0.2s ease, box-shadow 0.2s ease'
+            }}>
+              <div style={{ 
+                fontSize: '3rem',
+                marginBottom: '15px'
+              }}>
+                {feature.icon}
+              </div>
+              <h3 style={{ 
+                color: '#2c3e50',
+                margin: '0 0 15px 0'
+              }}>
+                {feature.title}
+              </h3>
+              <p style={{ 
+                color: '#6c757d',
+                margin: 0,
+                lineHeight: 1.5
+              }}>
+                {feature.description}
+              </p>
+            </div>
+          ))}
+        </div>
+        
+        <div style={{ 
+          marginTop: '40px',
+          padding: '25px',
+          backgroundColor: '#e8f4fd',
+          borderRadius: '12px',
+          border: '2px solid #b8d4f0',
+          textAlign: 'center'
+        }}>
+          <h3 style={{ color: '#2980b9', margin: '0 0 15px 0' }}>
+            🚀 Starter Sie durch
+          </h3>
+          <p style={{ color: '#2c3e50', margin: 0 }}>
+            Erstellen Sie Ihren ersten optimierten Schichtplan in wenigen Minuten.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Features;

frontend/src/index.css

@@ -1,3 +1,14 @@
+/* Reset and base styles */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+#root {
+  min-height: 100vh;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

frontend/src/index.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

frontend/src/pages/Auth/Login.tsx

@@ -129,7 +129,7 @@ const Login: React.FC = () => {
             onChange={(e) => setEmail(e.target.value)}
             required
             style={{
-              width: '94.5%',
+              width: '100%',
               padding: '10px',
               border: '1px solid #ddd',
               borderRadius: '4px',
@@ -151,7 +151,7 @@ const Login: React.FC = () => {
               onChange={(e) => setPassword(e.target.value)}
               required
               style={{
-                width: '94.5%',
+                width: '100%',
                 padding: '10px',
                 paddingRight: '10px',
                 border: '1px solid #ddd',

frontend/src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

frontend/src/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

frontend/src/setupTests.ts

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

frontend/src/vite-env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+// Define types for environment variables
+interface ImportMetaEnv {
+  readonly VITE_APP_TITLE: string
+  readonly ENABLE_PRO: string
+  // more env variables...
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

frontend/tsconfig.json

@@ -1,27 +1,38 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    //"ignoreDeprecations": "6.0",
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "ignoreDeprecations": "6.0",
     "jsx": "react-jsx",
-    "downlevelIteration": true
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path mapping (modern approach) */
+    "paths": {
+      "@/*": ["./src/*"],
+      "@/components/*": ["./src/components/*"],
+      "@/pages/*": ["./src/pages/*"],
+      "@/contexts/*": ["./src/contexts/*"],
+      "@/utils/*": ["./src/utils/*"],
+      "@/services/*": ["./src/services/*"],
+      "@/models/*": ["./src/models/*"],
+      "@/design/*": ["./src/design/*"]
+    }
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

frontend/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

frontend/vite.config.ts

@@ -0,0 +1,45 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { resolve } from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3003,
+    host: true,
+    open: true,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3002',
+        changeOrigin: true,
+        secure: false,
+      }
+    }
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html')
+      }
+    }
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+      '@/components': resolve(__dirname, './src/components'),
+      '@/pages': resolve(__dirname, './src/pages'),
+      '@/contexts': resolve(__dirname, './src/contexts'),
+      '@/models': resolve(__dirname, './src/models'),
+      '@/utils': resolve(__dirname, './src/utils'),
+      '@/services': resolve(__dirname, './src/services'),
+      '@/design': resolve(__dirname, './src/design')
+    }
+  },
+  // Define environment variables
+  define: {
+    'process.env': process.env
+  }
+})

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "schichtenplaner-monorepo",
+  "private": true,
+  "workspaces": [
+    "frontend",
+    "backend", 
+    "premium"
+  ],
+  "scripts": {
+    "docker:build": "docker build -t schichtplan-app .",
+    "docker:run": "docker run -p 3002:3002 schichtplan-app",
+    "build:all": "npm run build --workspace=backend && npm run build --workspace=frontend"
+  },
+  "devDependencies": {
+    "typescript": "^5.3.3"
+  }
+}

tsconfig.base.json

@@ -0,0 +1,52 @@
+{
+  "compilerOptions": {
+    /* LANGUAGE AND ENVIRONMENT */
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    
+    /* MODULES */
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    
+    /* TYPE CHECKING */
+    "strict": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "exactOptionalPropertyTypes": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    
+    /* EMIT */
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "removeComments": false,
+    
+    /* INTEROP CONSTRAINTS */
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    
+    /* COMPATIBILITY */
+    "isolatedModules": true,
+
+    "types": ["vite/client", "node"]
+  },
+  "include": [
+    "/premium/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "build",
+    "coverage",
+    "*.test.*",
+    "*.spec.*"
+  ]
+}