project/frontend/package.json

@@ -25,7 +25,6 @@
 		"@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

@@ -0,0 +1,17 @@
+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

@@ -1,100 +0,0 @@
-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 theme = createTheme({
+const darkTheme = createTheme({
 	palette: {
-		mode: "light",
+		mode: "dark",
 	},
 });
 
@@ -53,7 +53,7 @@ if (rootElement && !rootElement.innerHTML) {
 	root.render(
 		<StrictMode>
 			<TanStackQueryProvider.Provider>
-				<ThemeProvider theme={theme}>
+				<ThemeProvider theme={darkTheme}>
 					<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 ConfigImport } from './routes/config'
+import { Route as DemoImport } from './routes/demo'
 import { Route as IndexImport } from './routes/index'
 
 // Create/Update Routes
 
-const ConfigRoute = ConfigImport.update({
+const DemoRoute = DemoImport.update({
-  id: '/config',
+  id: '/demo',
-  path: '/config',
+  path: '/demo',
   getParentRoute: () => rootRoute,
 } as any)
 
@@ -39,11 +39,11 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexImport
       parentRoute: typeof rootRoute
     }
-    '/config': {
+    '/demo': {
-      id: '/config'
+      id: '/demo'
-      path: '/config'
+      path: '/demo'
-      fullPath: '/config'
+      fullPath: '/demo'
-      preLoaderRoute: typeof ConfigImport
+      preLoaderRoute: typeof DemoImport
       parentRoute: typeof rootRoute
     }
   }
@@ -53,37 +53,37 @@ declare module '@tanstack/react-router' {
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
-  '/config': typeof ConfigRoute
+  '/demo': typeof DemoRoute
 }
 
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
-  '/config': typeof ConfigRoute
+  '/demo': typeof DemoRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
   '/': typeof IndexRoute
-  '/config': typeof ConfigRoute
+  '/demo': typeof DemoRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/config'
+  fullPaths: '/' | '/demo'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/config'
+  to: '/' | '/demo'
-  id: '__root__' | '/' | '/config'
+  id: '__root__' | '/' | '/demo'
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
-  ConfigRoute: typeof ConfigRoute
+  DemoRoute: typeof DemoRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
-  ConfigRoute: ConfigRoute,
+  DemoRoute: DemoRoute,
 }
 
 export const routeTree = rootRoute
@@ -97,14 +97,14 @@ export const routeTree = rootRoute
       "filePath": "__root.tsx",
       "children": [
         "/",
-        "/config"
+        "/demo"
       ]
     },
     "/": {
       "filePath": "index.tsx"
     },
-    "/config": {
+    "/demo": {
-      "filePath": "config.tsx"
+      "filePath": "demo.tsx"
     }
   }
 }

project/frontend/src/routes/config.tsx

@@ -1,66 +0,0 @@
-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

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