Added Upload UI to the frontend. Upload per drag drop and file select possible. Only one file max. and only pdf allowed. When choosing a new file, old is overwritten. Added navigation to config page.

project/frontend/package.json

@@ -25,6 +25,7 @@
 		"@tanstack/router-plugin": "^1.114.3",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
+		"react-material-file-upload": "^0.0.4",
 		"react-pdf": "^9.2.1"
 	},
 	"devDependencies": {

project/frontend/src/components/Header.tsx

@@ -1,17 +0,0 @@
-import { Link } from "@tanstack/react-router";
-
-export default function Header() {
-	return (
-		<header className="p-2 flex gap-2 bg-white text-black justify-between">
-			<nav className="flex flex-row">
-				<div className="px-2 font-bold">
-					<Link to="/">Home</Link>
-				</div>
-
-				<div className="px-2 font-bold">
-					<Link to="/demo/tanstack-query">TanStack Query</Link>
-				</div>
-			</nav>
-		</header>
-	);
-}

project/frontend/src/components/UploadPage.tsx

@@ -0,0 +1,100 @@
+import { useState } from 'react'
+import FileUpload from 'react-material-file-upload'
+import {Box, Button, IconButton, Paper} from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
+import SettingsIcon from '@mui/icons-material/Settings';
+
+export default function UploadPage() {
+    const [files, setFiles] = useState<File[]>([])
+    const fileTypes = ["pdf"];
+    const navigate = useNavigate()
+
+    return (
+        <Box
+            display="flex"
+            flexDirection="column"
+            alignItems="center"
+            justifyContent="center"
+            height="100vh"
+            bgcolor="white"
+        >
+            <Box
+                width="100%"
+                maxWidth="1300px"
+                display="flex"
+                justifyContent="flex-end"
+                px={2}
+            >
+                <IconButton onClick={() => navigate({ to: '/config' })}>
+                    <SettingsIcon fontSize="large" />
+                </IconButton>
+            </Box>
+            <Paper
+                elevation={3}
+                sx={{
+                    width: 900,
+                    height: 500,
+                    backgroundColor: '#eeeeee',
+                    borderRadius: 4,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                }}
+            >
+                <Box sx={{
+                    height: '100%',
+                    width: '100%',
+                    maxWidth: '100%',
+                    margin: '0px',
+                    padding: '0px',
+                    '& .MuiBox-root': {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        border: 'none',
+                        textAlign: 'center',
+                    },
+                }}>
+                <FileUpload
+                    value={files}
+                    onChange={setFiles}
+                    accept={`.${fileTypes.join(', .')}`}
+                    title="Hier Dokument hinziehen"
+                    buttonText="Datei auswählen"
+                    sx={{
+                        height: '100%',
+                        width: '100%',
+                        padding: '0px',
+                        '& svg': {
+                            color: '#9e9e9e',
+                        },
+                        '& .MuiOutlinedInput-notchedOutline': {
+                            border: 'none',
+                        },
+                        '& .MuiButton-root': {
+                            backgroundColor: '#9e9e9e',
+                        },
+                        '& .MuiTypography-root': {
+                            fontSize: '1.25rem',
+                            fontWeight: 500,
+                            marginBottom: 1,
+                        },
+                    }}
+                />
+                </Box>
+            </Paper>
+            <Button
+                variant="contained"
+                sx={{
+                    mt: 4,
+                    backgroundColor: '#383838',
+                }}
+                disabled={files.length === 0}
+                onClick={() => alert('Kein Backend, aber Button klickbar')}
+            >
+                Kennzahlen extrahieren
+            </Button>
+        </Box>
+    )
+}

project/frontend/src/main.tsx

@@ -40,9 +40,9 @@ pdfjs.GlobalWorkerOptions.workerSrc = new URL(
 	import.meta.url,
 ).toString();
 
-const darkTheme = createTheme({
+const theme = createTheme({
 	palette: {
-		mode: "dark",
+		mode: "light",
 	},
 });
 
@@ -53,7 +53,7 @@ if (rootElement && !rootElement.innerHTML) {
 	root.render(
 		<StrictMode>
 			<TanStackQueryProvider.Provider>
-				<ThemeProvider theme={darkTheme}>
+				<ThemeProvider theme={theme}>
 					<CssBaseline />
 					<RouterProvider router={router} />
 				</ThemeProvider>

project/frontend/src/routeTree.gen.ts

@@ -11,14 +11,14 @@
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
-import { Route as DemoImport } from './routes/demo'
+import { Route as ConfigImport } from './routes/config'
 import { Route as IndexImport } from './routes/index'
 
 // Create/Update Routes
 
-const DemoRoute = DemoImport.update({
+const ConfigRoute = ConfigImport.update({
-  id: '/demo',
+  id: '/config',
-  path: '/demo',
+  path: '/config',
   getParentRoute: () => rootRoute,
 } as any)
 
@@ -39,11 +39,11 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexImport
       parentRoute: typeof rootRoute
     }
-    '/demo': {
+    '/config': {
-      id: '/demo'
+      id: '/config'
-      path: '/demo'
+      path: '/config'
-      fullPath: '/demo'
+      fullPath: '/config'
-      preLoaderRoute: typeof DemoImport
+      preLoaderRoute: typeof ConfigImport
       parentRoute: typeof rootRoute
     }
   }
@@ -53,37 +53,37 @@ declare module '@tanstack/react-router' {
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
-  '/demo': typeof DemoRoute
+  '/config': typeof ConfigRoute
 }
 
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
-  '/demo': typeof DemoRoute
+  '/config': typeof ConfigRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
   '/': typeof IndexRoute
-  '/demo': typeof DemoRoute
+  '/config': typeof ConfigRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/demo'
+  fullPaths: '/' | '/config'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/demo'
+  to: '/' | '/config'
-  id: '__root__' | '/' | '/demo'
+  id: '__root__' | '/' | '/config'
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
-  DemoRoute: typeof DemoRoute
+  ConfigRoute: typeof ConfigRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
-  DemoRoute: DemoRoute,
+  ConfigRoute: ConfigRoute,
 }
 
 export const routeTree = rootRoute
@@ -97,14 +97,14 @@ export const routeTree = rootRoute
       "filePath": "__root.tsx",
       "children": [
         "/",
-        "/demo"
+        "/config"
       ]
     },
     "/": {
       "filePath": "index.tsx"
     },
-    "/demo": {
+    "/config": {
-      "filePath": "demo.tsx"
+      "filePath": "config.tsx"
     }
   }
 }

project/frontend/src/routes/config.tsx

@@ -0,0 +1,66 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Box, Button, IconButton, Paper, Typography } from "@mui/material";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import { useNavigate } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/config")({
+    component: ConfigPage,
+});
+
+function ConfigPage() {
+    const navigate = useNavigate();
+
+    return (
+        <Box
+            height="100vh"
+            width="100vw"
+            bgcolor="white"
+            display="flex"
+            flexDirection="column"
+            alignItems="center"
+            pt={3}
+        >
+            <Box
+                width="100%"
+                display="flex"
+                justifyContent="space-between"
+                alignItems="center"
+                px={4}
+            >
+                <Box display="flex" alignItems="center">
+                    <IconButton onClick={() => navigate({ to: "/" })}>
+                        <ArrowBackIcon fontSize="large" sx={{ color: '#383838' }}/>
+                    </IconButton>
+                    <Typography variant="h5" fontWeight="bold" ml={3}>
+                        Konfiguration der Kennzahlen
+                    </Typography>
+                </Box>
+                <Button
+                    variant="contained"
+                    sx={{
+                        backgroundColor: "#383838",
+                        "&:hover": { backgroundColor: "#2e2e2e" },
+                    }}
+                >
+                    Neue Kennzahl hinzufügen
+                </Button>
+            </Box>
+            <Paper
+                elevation={2}
+                sx={{
+                    width: "90%",
+                    maxWidth: 1100,
+                    height: 400,
+                    mt: 4,
+                    borderRadius: 2,
+                    backgroundColor: "#eeeeee",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                }}
+            >
+                <Typography color="textSecondary">To-do: Table hierhin</Typography>
+            </Paper>
+        </Box>
+    );
+}

project/frontend/src/routes/demo.tsx

@@ -1,26 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/demo")({
-  component: TanStackQueryDemo,
-});
-
-function TanStackQueryDemo() {
-  const { data } = useQuery({
-    queryKey: ["people"],
-    queryFn: () =>
-      Promise.resolve([{ name: "John Doe" }, { name: "Jane Doe" }]),
-    initialData: [],
-  });
-
-  return (
-    <div className="p-4">
-      <h1 className="text-2xl mb-4">People list</h1>
-      <ul>
-        {data.map((person) => (
-          <li key={person.name}>{person.name}</li>
-        ))}
-      </ul>
-    </div>
-  );
-}

project/frontend/src/routes/index.tsx

@@ -1,9 +1,11 @@
 import { createFileRoute } from "@tanstack/react-router";
+import UploadPage from "../components/UploadPage";
+
 
 export const Route = createFileRoute("/")({
 	component: App,
 });
 
 function App() {
-	return <>Test</>;
+	return <UploadPage/>;
 }