Added Config add page.

project/frontend/src/components/KPIForm.tsx

@@ -0,0 +1,252 @@
+import { Box, Typography, Button, Paper, TextField, FormControlLabel,
+    Checkbox, Select, MenuItem, FormControl, InputLabel, Divider, CircularProgress } from "@mui/material";
+import { useState, useEffect } from "react";
+import type { Kennzahl } from "../types/kpi";
+import { typeDisplayMapping } from "../types/kpi";
+
+interface KPIFormProps {
+    mode: 'add' | 'edit';
+    initialData?: Kennzahl | null;
+    onSave: (data: Partial<Kennzahl>) => Promise<void>;
+    onCancel: () => void;
+    loading?: boolean;
+}
+
+const emptyKPI: Partial<Kennzahl> = {
+    name: '',
+    description: '',
+    mandatory: false,
+    type: 'string',
+    translation: '',
+    example: '',
+    active: true
+};
+
+export function KPIForm({ mode, initialData, onSave, onCancel, loading = false }: KPIFormProps) {
+    const [formData, setFormData] = useState<Partial<Kennzahl>>(emptyKPI);
+    const [isSaving, setIsSaving] = useState(false);
+
+    useEffect(() => {
+        if (mode === 'edit' && initialData) {
+            setFormData(initialData);
+        } else {
+            setFormData(emptyKPI);
+        }
+    }, [mode, initialData]);
+
+    const handleSave = async () => {
+        if (!formData.name?.trim()) {
+            alert('Name ist erforderlich');
+            return;
+        }
+
+        setIsSaving(true);
+        try {
+            await onSave(formData);
+        } catch (error) {
+            console.error('Error saving KPI:', error);
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    const handleCancel = () => {
+        if (mode === 'edit' && initialData) {
+            setFormData(initialData);
+        } else {
+            setFormData(emptyKPI);
+        }
+        onCancel();
+    };
+
+    const updateField = (field: keyof Kennzahl, value: any) => {
+        setFormData(prev => ({ ...prev, [field]: value }));
+    };
+
+    if (loading) {
+        return (
+            <Box
+                display="flex"
+                justifyContent="center"
+                alignItems="center"
+                minHeight="400px"
+                flexDirection="column"
+            >
+                <CircularProgress sx={{ color: '#383838', mb: 2 }} />
+                <Typography>
+                    {mode === 'edit' ? 'Lade KPI Details...' : 'Laden...'}
+                </Typography>
+            </Box>
+        );
+    }
+
+    return (
+        <Paper
+            elevation={2}
+            sx={{
+                width: "90%",
+                maxWidth: 800,
+                p: 4,
+                borderRadius: 2,
+                backgroundColor: "white"
+            }}
+        >
+            <Box mb={4}>
+                <Typography variant="h6" fontWeight="bold" mb={2}>
+                    Kennzahl
+                </Typography>
+                <TextField
+                    fullWidth
+                    label="Name *"
+                    value={formData.name || ''}
+                    onChange={(e) => updateField('name', e.target.value)}
+                    sx={{ mb: 2 }}
+                    required
+                    error={!formData.name?.trim()}
+                    helperText={!formData.name?.trim() ? 'Name ist erforderlich' : ''}
+                />
+            </Box>
+
+            <Divider sx={{ my: 3 }} />
+
+            <Box mb={4}>
+                <Typography variant="h6" fontWeight="bold" mb={2}>
+                    Beschreibung
+                </Typography>
+                <TextField
+                    fullWidth
+                    multiline
+                    rows={3}
+                    label="Beschreibung"
+                    value={formData.description || ''}
+                    onChange={(e) => updateField('description', e.target.value)}
+                    helperText="Beschreibung der Kennzahl"
+                />
+
+                <Box mt={3}>
+                    <FormControlLabel
+                        control={
+                            <Checkbox
+                                checked={formData.mandatory || false}
+                                onChange={(e) => updateField('mandatory', e.target.checked)}
+                                sx={{ color: '#383838' }}
+                            />
+                        }
+                        label="Erforderlich"
+                    />
+                    <Typography variant="body2" color="text.secondary" ml={4}>
+                        Die Kennzahl erlaubt keine leeren Werte
+                    </Typography>
+                </Box>
+            </Box>
+
+            <Divider sx={{ my: 3 }} />
+
+            <Box mb={4}>
+                <Typography variant="h6" fontWeight="bold" mb={2}>
+                    Format: {typeDisplayMapping[formData.type as keyof typeof typeDisplayMapping] || formData.type}
+                </Typography>
+                <FormControl fullWidth sx={{ mb: 2 }}>
+                    <InputLabel>Typ</InputLabel>
+                    <Select
+                        value={formData.type || 'string'}
+                        label="Typ"
+                        onChange={(e) => updateField('type', e.target.value)}
+                    >
+                        <MenuItem value="string">Text</MenuItem>
+                        <MenuItem value="number">Zahl</MenuItem>
+                        <MenuItem value="date">Datum</MenuItem>
+                        <MenuItem value="boolean">Ja/Nein</MenuItem>
+                        <MenuItem value="array">Liste (mehrfach)</MenuItem>
+                    </Select>
+                </FormControl>
+            </Box>
+
+            <Divider sx={{ my: 3 }} />
+
+            <Box mb={4}>
+                <Typography variant="h6" fontWeight="bold" mb={2}>
+                    Synonyme & Übersetzungen
+                </Typography>
+                <TextField
+                    fullWidth
+                    label="Übersetzung"
+                    value={formData.translation || ''}
+                    onChange={(e) => updateField('translation', e.target.value)}
+                    helperText="z.B. Englische Übersetzung der Kennzahl"
+                />
+            </Box>
+
+            <Divider sx={{ my: 3 }} />
+
+            <Box mb={4}>
+                <Typography variant="h6" fontWeight="bold" mb={2}>
+                    Beispiele von Kennzahl
+                </Typography>
+                <TextField
+                    fullWidth
+                    multiline
+                    rows={2}
+                    label="Beispiel"
+                    value={formData.example || ''}
+                    onChange={(e) => updateField('example', e.target.value)}
+                    helperText="Beispielwerte für diese Kennzahl"
+                />
+            </Box>
+
+            {mode === 'add' && (
+                <>
+                    <Divider sx={{ my: 3 }} />
+                    <Box mb={4}>
+                        <FormControlLabel
+                            control={
+                                <Checkbox
+                                    checked={formData.active !== false}
+                                    onChange={(e) => updateField('active', e.target.checked)}
+                                    sx={{ color: '#383838' }}
+                                />
+                            }
+                            label="Aktiv"
+                        />
+                        <Typography variant="body2" color="text.secondary" ml={4}>
+                            Die Kennzahl ist aktiv und wird angezeigt
+                        </Typography>
+                    </Box>
+                </>
+            )}
+
+            <Box display="flex" justifyContent="flex-end" gap={2} mt={4}>
+                <Button
+                    variant="outlined"
+                    onClick={handleCancel}
+                    disabled={isSaving}
+                    sx={{
+                        borderColor: "#383838",
+                        color: "#383838",
+                        "&:hover": { borderColor: "#2e2e2e", backgroundColor: "#f5f5f5" }
+                    }}
+                >
+                    Abbrechen
+                </Button>
+                <Button
+                    variant="contained"
+                    onClick={handleSave}
+                    disabled={isSaving || !formData.name?.trim()}
+                    sx={{
+                        backgroundColor: "#383838",
+                        "&:hover": { backgroundColor: "#2e2e2e" },
+                    }}
+                >
+                    {isSaving ? (
+                        <>
+                            <CircularProgress size={16} sx={{ mr: 1, color: 'white' }} />
+                            {mode === 'add' ? 'Hinzufügen...' : 'Speichern...'}
+                        </>
+                    ) : (
+                        mode === 'add' ? 'Hinzufügen' : 'Speichern'
+                    )}
+                </Button>
+            </Box>
+        </Paper>
+    );
+}

project/frontend/src/routeTree.gen.ts

@@ -11,6 +11,7 @@
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
+import { Route as ConfigAddImport } from './routes/config-add'
 import { Route as ConfigImport } from './routes/config'
 import { Route as IndexImport } from './routes/index'
 import { Route as ExtractedResultPitchBookImport } from './routes/extractedResult.$pitchBook'
@@ -18,6 +19,12 @@ import { Route as ConfigDetailKpiIdImport } from './routes/config-detail.$kpiId'
 
 // Create/Update Routes
 
+const ConfigAddRoute = ConfigAddImport.update({
+  id: '/config-add',
+  path: '/config-add',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const ConfigRoute = ConfigImport.update({
   id: '/config',
   path: '/config',
@@ -60,6 +67,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ConfigImport
       parentRoute: typeof rootRoute
     }
+    '/config-add': {
+      id: '/config-add'
+      path: '/config-add'
+      fullPath: '/config-add'
+      preLoaderRoute: typeof ConfigAddImport
+      parentRoute: typeof rootRoute
+    }
     '/config-detail/$kpiId': {
       id: '/config-detail/$kpiId'
       path: '/config-detail/$kpiId'
@@ -82,6 +96,7 @@ declare module '@tanstack/react-router' {
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/config': typeof ConfigRoute
+  '/config-add': typeof ConfigAddRoute
   '/config-detail/$kpiId': typeof ConfigDetailKpiIdRoute
   '/extractedResult/$pitchBook': typeof ExtractedResultPitchBookRoute
 }
@@ -89,6 +104,7 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/config': typeof ConfigRoute
+  '/config-add': typeof ConfigAddRoute
   '/config-detail/$kpiId': typeof ConfigDetailKpiIdRoute
   '/extractedResult/$pitchBook': typeof ExtractedResultPitchBookRoute
 }
@@ -97,6 +113,7 @@ export interface FileRoutesById {
   __root__: typeof rootRoute
   '/': typeof IndexRoute
   '/config': typeof ConfigRoute
+  '/config-add': typeof ConfigAddRoute
   '/config-detail/$kpiId': typeof ConfigDetailKpiIdRoute
   '/extractedResult/$pitchBook': typeof ExtractedResultPitchBookRoute
 }
@@ -106,14 +123,21 @@ export interface FileRouteTypes {
   fullPaths:
     | '/'
     | '/config'
+    | '/config-add'
     | '/config-detail/$kpiId'
     | '/extractedResult/$pitchBook'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/config' | '/config-detail/$kpiId' | '/extractedResult/$pitchBook'
+  to:
+    | '/'
+    | '/config'
+    | '/config-add'
+    | '/config-detail/$kpiId'
+    | '/extractedResult/$pitchBook'
   id:
     | '__root__'
     | '/'
     | '/config'
+    | '/config-add'
     | '/config-detail/$kpiId'
     | '/extractedResult/$pitchBook'
   fileRoutesById: FileRoutesById
@@ -122,6 +146,7 @@ export interface FileRouteTypes {
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   ConfigRoute: typeof ConfigRoute
+  ConfigAddRoute: typeof ConfigAddRoute
   ConfigDetailKpiIdRoute: typeof ConfigDetailKpiIdRoute
   ExtractedResultPitchBookRoute: typeof ExtractedResultPitchBookRoute
 }
@@ -129,6 +154,7 @@ export interface RootRouteChildren {
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   ConfigRoute: ConfigRoute,
+  ConfigAddRoute: ConfigAddRoute,
   ConfigDetailKpiIdRoute: ConfigDetailKpiIdRoute,
   ExtractedResultPitchBookRoute: ExtractedResultPitchBookRoute,
 }
@@ -145,6 +171,7 @@ export const routeTree = rootRoute
       "children": [
         "/",
         "/config",
+        "/config-add",
         "/config-detail/$kpiId",
         "/extractedResult/$pitchBook"
       ]
@@ -155,6 +182,9 @@ export const routeTree = rootRoute
     "/config": {
       "filePath": "config.tsx"
     },
+    "/config-add": {
+      "filePath": "config-add.tsx"
+    },
     "/config-detail/$kpiId": {
       "filePath": "config-detail.$kpiId.tsx"
     },

project/frontend/src/routes/config-add.tsx

@@ -0,0 +1,87 @@
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { Box, Typography, IconButton } from "@mui/material";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import { KPIForm } from "../components/KPIForm";
+import type { Kennzahl } from "../types/kpi";
+
+export const Route = createFileRoute("/config-add")({
+    component: ConfigAddPage,
+});
+
+function ConfigAddPage() {
+    const navigate = useNavigate();
+
+    const handleSave = async (formData: Partial<Kennzahl>) => {
+        try {
+            const existingKPIsResponse = await fetch('http://localhost:5050/api/kpi_setting/');
+            const existingKPIs = await existingKPIsResponse.json();
+            const maxPosition = existingKPIs.length > 0
+                ? Math.max(...existingKPIs.map((kpi: Kennzahl) => kpi.position))
+                : 0;
+
+            const kpiData = {
+                ...formData,
+                position: maxPosition + 1,
+                active: formData.active !== false
+            };
+
+            const response = await fetch('http://localhost:5050/api/kpi_setting/', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(kpiData),
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            navigate({ to: "/config" });
+        } catch (error) {
+            console.error('Error creating KPI:', error);
+            throw error;
+        }
+    };
+
+    const handleCancel = () => {
+        navigate({ to: "/config" });
+    };
+
+    return (
+        <Box
+            minHeight="100vh"
+            width="100vw"
+            bgcolor="#f5f5f5"
+            display="flex"
+            flexDirection="column"
+            alignItems="center"
+            pt={3}
+            pb={4}
+        >
+            <Box
+                width="100%"
+                display="flex"
+                justifyContent="flex-start"
+                alignItems="center"
+                px={4}
+                mb={4}
+            >
+                <Box display="flex" alignItems="center">
+                    <IconButton onClick={() => navigate({ to: "/config" })}>
+                        <ArrowBackIcon fontSize="large" sx={{ color: '#383838' }}/>
+                    </IconButton>
+                    <Typography variant="h5" fontWeight="bold" ml={3}>
+                        Neue Kennzahl hinzufügen
+                    </Typography>
+                </Box>
+            </Box>
+
+            <KPIForm
+                mode="add"
+                onSave={handleSave}
+                onCancel={handleCancel}
+            />
+        </Box>
+    );
+}

project/frontend/src/routes/config-detail.$kpiId.tsx

@@ -1,23 +1,10 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import {
+import { Box, Typography, IconButton, Button, CircularProgress, Paper, Divider
-    Box,
-    Typography,
-    IconButton,
-    Button,
-    Paper,
-    TextField,
-    FormControlLabel,
-    Checkbox,
-    Select,
-    MenuItem,
-    FormControl,
-    InputLabel,
-    Divider,
-    CircularProgress
 } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { useEffect, useState } from "react";
 import type { Kennzahl } from "../types/kpi";
+import { KPIForm } from "../components/KPIForm";
 import { typeDisplayMapping } from "../types/kpi";
 
 export const Route = createFileRoute("/config-detail/$kpiId")({
@@ -29,7 +16,6 @@ function KPIDetailPage() {
     const navigate = useNavigate();
     const [kennzahl, setKennzahl] = useState<Kennzahl | null>(null);
     const [isEditing, setIsEditing] = useState(false);
-    const [editedKennzahl, setEditedKennzahl] = useState<Kennzahl | null>(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
 
@@ -47,7 +33,6 @@ function KPIDetailPage() {
                 }
                 const data = await response.json();
                 setKennzahl(data);
-                setEditedKennzahl(data);
                 setError(null);
             } catch (err) {
                 console.error('Error fetching KPI:', err);
@@ -60,16 +45,14 @@ function KPIDetailPage() {
         fetchKennzahl();
     }, [kpiId]);
 
-    const handleSave = async () => {
+    const handleSave = async (formData: Partial<Kennzahl>) => {
-        if (!editedKennzahl) return;
-
         try {
             const response = await fetch(`http://localhost:5050/api/kpi_setting/${kpiId}`, {
                 method: 'PUT',
                 headers: {
                     'Content-Type': 'application/json',
                 },
-                body: JSON.stringify(editedKennzahl),
+                body: JSON.stringify(formData),
             });
 
             if (!response.ok) {
@@ -78,15 +61,14 @@ function KPIDetailPage() {
 
             const updatedKennzahl = await response.json();
             setKennzahl(updatedKennzahl);
-            setEditedKennzahl(updatedKennzahl);
             setIsEditing(false);
-        } catch (err) {
+        } catch (error) {
-            console.error('Error saving KPI:', err);
+            console.error('Error saving KPI:', error);
+            throw error;
         }
     };
 
     const handleCancel = () => {
-        setEditedKennzahl(kennzahl);
         setIsEditing(false);
     };
 
@@ -118,7 +100,7 @@ function KPIDetailPage() {
                 alignItems="center"
                 flexDirection="column"
             >
-                <Typography variant="h6" color="error" mb={2}>
+                <Typography variant="h6" mb={2}>
                     {error || 'KPI nicht gefunden'}
                 </Typography>
                 <Button
@@ -135,7 +117,117 @@ function KPIDetailPage() {
         );
     }
 
-    const currentKennzahl = isEditing ? editedKennzahl! : kennzahl;
+    if (!isEditing) {
+        return (
+            <Box
+                minHeight="100vh"
+                width="100vw"
+                bgcolor="#f5f5f5"
+                display="flex"
+                flexDirection="column"
+                alignItems="center"
+                pt={3}
+                pb={4}
+            >
+                <Box
+                    width="100%"
+                    display="flex"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    px={4}
+                    mb={4}
+                >
+                    <Box display="flex" alignItems="center">
+                        <IconButton onClick={() => navigate({ to: "/config" })}>
+                            <ArrowBackIcon fontSize="large" sx={{ color: '#383838' }}/>
+                        </IconButton>
+                        <Typography variant="h5" fontWeight="bold" ml={3}>
+                            Detailansicht
+                        </Typography>
+                    </Box>
+                    <Button
+                        variant="contained"
+                        sx={{
+                            backgroundColor: "#383838",
+                            "&:hover": { backgroundColor: "#2e2e2e" },
+                        }}
+                        onClick={() => setIsEditing(true)}
+                    >
+                        Bearbeiten
+                    </Button>
+                </Box>
+                <Paper
+                    elevation={2}
+                    sx={{
+                        width: "90%",
+                        maxWidth: 800,
+                        p: 4,
+                        borderRadius: 2,
+                        backgroundColor: "white"
+                    }}
+                >
+                    <Box mb={4}>
+                        <Typography variant="h6" fontWeight="bold" mb={2}>
+                            Kennzahl
+                        </Typography>
+                        <Typography variant="body1" sx={{ mb: 2, fontSize: 16 }}>
+                            {kennzahl.name}
+                        </Typography>
+                    </Box>
+
+                    <Divider sx={{ my: 3 }} />
+
+                    <Box mb={4}>
+                        <Typography variant="h6" fontWeight="bold" mb={2}>
+                            Beschreibung
+                        </Typography>
+                        <Typography variant="body1" color="text.secondary">
+                            {kennzahl.description || "Zurzeit ist die Beschreibung der Kennzahl leer. Klicken Sie auf den Bearbeiten-Button, um die Beschreibung zu ergänzen."}
+                        </Typography>
+
+                        <Box mt={2}>
+                            <Typography variant="body2" color="text.secondary">
+                                <strong>Erforderlich:</strong> {kennzahl.mandatory ? 'Ja' : 'Nein'}
+                            </Typography>
+                        </Box>
+                    </Box>
+
+                    <Divider sx={{ my: 3 }} />
+
+                    <Box mb={4}>
+                        <Typography variant="h6" fontWeight="bold" mb={2}>
+                            Format
+                        </Typography>
+                        <Typography variant="body1" color="text.secondary">
+                            {typeDisplayMapping[kennzahl.type] || kennzahl.type}
+                        </Typography>
+                    </Box>
+
+                    <Divider sx={{ my: 3 }} />
+
+                    <Box mb={4}>
+                        <Typography variant="h6" fontWeight="bold" mb={2}>
+                            Synonyme & Übersetzungen
+                        </Typography>
+                        <Typography variant="body1" color="text.secondary">
+                            {kennzahl.translation || "Zurzeit gibt es keine Einträge für Synonyme und Übersetzungen der Kennzahl. Klicken Sie auf den Bearbeiten-Button, um die Liste zu ergänzen."}
+                        </Typography>
+                    </Box>
+
+                    <Divider sx={{ my: 3 }} />
+
+                    <Box mb={4}>
+                        <Typography variant="h6" fontWeight="bold" mb={2}>
+                            Beispiele von Kennzahl
+                        </Typography>
+                        <Typography variant="body1" color="text.secondary">
+                            {kennzahl.example || "Zurzeit gibt es keine Beispiele der Kennzahl. Klicken Sie auf den Bearbeiten-Button, um die Liste zu ergänzen."}
+                        </Typography>
+                    </Box>
+                </Paper>
+            </Box>
+        );
+    }
 
     return (
         <Box
@@ -151,7 +243,7 @@ function KPIDetailPage() {
             <Box
                 width="100%"
                 display="flex"
-                justifyContent="space-between"
+                justifyContent="flex-start"
                 alignItems="center"
                 px={4}
                 mb={4}
@@ -161,185 +253,17 @@ function KPIDetailPage() {
                         <ArrowBackIcon fontSize="large" sx={{ color: '#383838' }}/>
                     </IconButton>
                     <Typography variant="h5" fontWeight="bold" ml={3}>
-                        Detailansicht
+                        Kennzahl bearbeiten
                     </Typography>
                 </Box>
-                <Button
-                    variant="contained"
-                    sx={{
-                        backgroundColor: "#383838",
-                        "&:hover": { backgroundColor: "#2e2e2e" },
-                    }}
-                    onClick={isEditing ? undefined : () => setIsEditing(true)}
-                    disabled={isEditing}
-                >
-                    Bearbeiten
-                </Button>
             </Box>
-            <Paper
-                elevation={2}
-                sx={{
-                    width: "90%",
-                    maxWidth: 800,
-                    p: 4,
-                    borderRadius: 2,
-                    backgroundColor: "white"
-                }}
-            >
-                <Box mb={4}>
-                    <Typography variant="h6" fontWeight="bold" mb={2}>
-                        Kennzahl
-                    </Typography>
 
-                    {isEditing ? (
+            <KPIForm
-                        <TextField
+                mode="edit"
-                            fullWidth
+                initialData={kennzahl}
-                            label="Name"
+                onSave={handleSave}
-                            value={currentKennzahl.name}
+                onCancel={handleCancel}
-                            onChange={(e) => setEditedKennzahl(prev => prev ? {...prev, name: e.target.value} : null)}
+            />
-                            sx={{ mb: 2 }}
-                        />
-                    ) : (
-                        <Typography variant="body1" sx={{ mb: 2, fontSize: 16 }}>
-                            {currentKennzahl.name}
-                        </Typography>
-                    )}
-                </Box>
-
-                <Divider sx={{ my: 3 }} />
-                <Box mb={4}>
-                    <Typography variant="h6" fontWeight="bold" mb={2}>
-                        Beschreibung
-                    </Typography>
-
-                    {isEditing ? (
-                        <TextField
-                            fullWidth
-                            multiline
-                            rows={3}
-                            label="Beschreibung"
-                            value={currentKennzahl.description}
-                            onChange={(e) => setEditedKennzahl(prev => prev ? {...prev, description: e.target.value} : null)}
-                            helperText="Beschreibung der Kennzahl"
-                        />
-                    ) : (
-                        <Typography variant="body1" color="text.secondary">
-                            {currentKennzahl.description || "Zurzeit ist die Beschreibung der Kennzahl leer. Klicken Sie auf den Bearbeiten-Button, um die Beschreibung zu ergänzen."}
-                        </Typography>
-                    )}
-
-                    <Box mt={3}>
-                        <FormControlLabel
-                            control={
-                                <Checkbox
-                                    checked={currentKennzahl.mandatory}
-                                    onChange={(e) => isEditing && setEditedKennzahl(prev => prev ? {...prev, mandatory: e.target.checked} : null)}
-                                    disabled={!isEditing}
-                                    sx={{ color: '#383838' }}
-                                />
-                            }
-                            label="Erforderlich"
-                        />
-                        <Typography variant="body2" color="text.secondary" ml={4}>
-                            Die Kennzahl erlaubt keine leeren Werte
-                        </Typography>
-                    </Box>
-                </Box>
-
-                <Divider sx={{ my: 3 }} />
-
-                <Box mb={4}>
-                    <Typography variant="h6" fontWeight="bold" mb={2}>
-                        Format: {typeDisplayMapping[currentKennzahl.type] || currentKennzahl.type}
-                    </Typography>
-
-                    {isEditing ? (
-                        <FormControl fullWidth sx={{ mb: 2 }}>
-                            <InputLabel>Typ</InputLabel>
-                            <Select
-                                value={currentKennzahl.type}
-                                label="Typ"
-                                onChange={(e) => setEditedKennzahl(prev => prev ? {...prev, type: e.target.value} : null)}
-                            >
-                                <MenuItem value="string">Text</MenuItem>
-                                <MenuItem value="number">Zahl</MenuItem>
-                                <MenuItem value="date">Datum</MenuItem>
-                                <MenuItem value="boolean">Ja/Nein</MenuItem>
-                                <MenuItem value="array">Liste (mehrfach)</MenuItem>
-                            </Select>
-                        </FormControl>
-                    ) : null}
-                </Box>
-
-                <Divider sx={{ my: 3 }} />
-                <Box mb={4}>
-                    <Typography variant="h6" fontWeight="bold" mb={2}>
-                        Synonyme & Übersetzungen
-                    </Typography>
-
-                    {isEditing ? (
-                        <TextField
-                            fullWidth
-                            label="Übersetzung"
-                            value={currentKennzahl.translation}
-                            onChange={(e) => setEditedKennzahl(prev => prev ? {...prev, translation: e.target.value} : null)}
-                            helperText="z.B. Englische Übersetzung der Kennzahl"
-                        />
-                    ) : (
-                        <Typography variant="body1" color="text.secondary">
-                            {currentKennzahl.translation || "Zurzeit gibt es keine Einträge für Synonyme und Übersetzungen der Kennzahl. Klicken Sie auf den Bearbeiten-Button, um die Liste zu ergänzen."}
-                        </Typography>
-                    )}
-                </Box>
-
-                <Divider sx={{ my: 3 }} />
-                <Box mb={4}>
-                    <Typography variant="h6" fontWeight="bold" mb={2}>
-                        Beispiele von Kennzahl
-                    </Typography>
-
-                    {isEditing ? (
-                        <TextField
-                            fullWidth
-                            multiline
-                            rows={2}
-                            label="Beispiel"
-                            value={currentKennzahl.example}
-                            onChange={(e) => setEditedKennzahl(prev => prev ? {...prev, example: e.target.value} : null)}
-                            helperText="Beispielwerte für diese Kennzahl"
-                        />
-                    ) : (
-                        <Typography variant="body1" color="text.secondary">
-                            {currentKennzahl.example || "Zurzeit gibt es keine Beispiele der Kennzahl. Klicken Sie auf den Bearbeiten-Button, um die Liste zu ergänzen."}
-                        </Typography>
-                    )}
-                </Box>
-                {isEditing && (
-                    <Box display="flex" justifyContent="flex-end" gap={2} mt={4}>
-                        <Button
-                            variant="outlined"
-                            onClick={handleCancel}
-                            sx={{
-                                borderColor: "#383838",
-                                color: "#383838",
-                                "&:hover": { borderColor: "#2e2e2e", backgroundColor: "#f5f5f5" }
-                            }}
-                        >
-                            Abbrechen
-                        </Button>
-                        <Button
-                            variant="contained"
-                            onClick={handleSave}
-                            sx={{
-                                backgroundColor: "#383838",
-                                "&:hover": { backgroundColor: "#2e2e2e" },
-                            }}
-                        >
-                            Speichern
-                        </Button>
-                    </Box>
-                )}
-            </Paper>
         </Box>
     );
 }

project/frontend/src/routes/config.tsx

@@ -8,10 +8,13 @@ export const Route = createFileRoute("/config")({
     component: ConfigPage,
 });
 
-
 function ConfigPage() {
     const navigate = useNavigate();
 
+    const handleAddNewKPI = () => {
+        navigate({ to: "/config-add" });
+    };
+
     return (
         <Box
             minHeight="100vh"
@@ -40,6 +43,7 @@ function ConfigPage() {
                 </Box>
                 <Button
                     variant="contained"
+                    onClick={handleAddNewKPI}
                     sx={{
                         backgroundColor: "#383838",
                         "&:hover": { backgroundColor: "#2e2e2e" },