Refactor data fields in dashboard page

IT WORKS

package-lock.json

@@ -8,15 +8,19 @@
       "name": "testapp",
       "version": "0.1.0",
       "dependencies": {
-        "@emotion/react": "^11.11.1",
+        "@emotion/react": "^11.11.3",
         "@emotion/styled": "^11.11.0",
-        "@mui/icons-material": "^5.14.19",
+        "@mui/icons-material": "^5.15.3",
-        "@mui/material": "^5.14.20",
+        "@mui/material": "^5.15.3",
+        "@mui/x-data-grid": "^6.18.7",
+        "@prisma/client": "^5.7.1",
         "axios": "^1.6.2",
-        "next": "14.0.4",
+        "next": "^14.0.4",
         "prisma": "^5.7.1",
-        "react": "^18",
+        "react": "^18.2.0",
-        "react-dom": "^18",
+        "react-dom": "^18.2.0",
+        "react-query": "^3.39.3",
+        "react-router-dom": "^6.21.1",
         "zustand": "^4.4.7"
       },
       "devDependencies": {
@@ -290,14 +294,14 @@
       "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
     },
     "node_modules/@emotion/react": {
-      "version": "11.11.1",
+      "version": "11.11.3",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.3.tgz",
-      "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==",
+      "integrity": "sha512-Cnn0kuq4DoONOMcnoVsTOR8E+AdnKFf//6kUWc4LCdnxj31pZWn7rIULd6Y7/Js1PiPHzn7SKCM9vB/jBni8eA==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.11.0",
         "@emotion/cache": "^11.11.0",
-        "@emotion/serialize": "^1.1.2",
+        "@emotion/serialize": "^1.1.3",
         "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
         "@emotion/utils": "^1.2.1",
         "@emotion/weak-memoize": "^0.3.1",
@@ -313,9 +317,9 @@
       }
     },
     "node_modules/@emotion/serialize": {
-      "version": "1.1.2",
+      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.3.tgz",
-      "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==",
+      "integrity": "sha512-iD4D6QVZFDhcbH0RAG1uVu1CwVLMWUkCvAqqlewO/rxf8+87yIBAlt4+AxMiiKPLs5hFc0owNk/sLLAOROw3cA==",
       "dependencies": {
         "@emotion/hash": "^0.9.1",
         "@emotion/memoize": "^0.8.1",
@@ -431,28 +435,28 @@
       }
     },
     "node_modules/@floating-ui/core": {
-      "version": "1.5.2",
+      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.3.tgz",
-      "integrity": "sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==",
+      "integrity": "sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==",
       "dependencies": {
-        "@floating-ui/utils": "^0.1.3"
+        "@floating-ui/utils": "^0.2.0"
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.5.3",
+      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz",
-      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==",
       "dependencies": {
-        "@floating-ui/core": "^1.4.2",
+        "@floating-ui/core": "^1.5.3",
-        "@floating-ui/utils": "^0.1.3"
+        "@floating-ui/utils": "^0.2.0"
       }
     },
     "node_modules/@floating-ui/react-dom": {
-      "version": "2.0.4",
+      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.5.tgz",
-      "integrity": "sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==",
+      "integrity": "sha512-UsBK30Bg+s6+nsgblXtZmwHhgS2vmbuQK22qgt2pTQM6M3X6H1+cQcLXqgRY3ihVLcZJE6IvqDQozhsnIVqK/Q==",
       "dependencies": {
-        "@floating-ui/dom": "^1.5.1"
+        "@floating-ui/dom": "^1.5.4"
       },
       "peerDependencies": {
         "react": ">=16.8.0",
@@ -460,9 +464,9 @@
       }
     },
     "node_modules/@floating-ui/utils": {
-      "version": "0.1.6",
+      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
-      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+      "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
     },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.13",
@@ -498,14 +502,14 @@
       "dev": true
     },
     "node_modules/@mui/base": {
-      "version": "5.0.0-beta.26",
+      "version": "5.0.0-beta.30",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.26.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.30.tgz",
-      "integrity": "sha512-gPMRKC84VRw+tjqYoyBzyrBUqHQucMXdlBpYazHa5rCXrb91fYEQk5SqQ2U5kjxx9QxZxTBvWAmZ6DblIgaGhQ==",
+      "integrity": "sha512-dc38W4W3K42atE9nSaOeoJ7/x9wGIfawdwC/UmMxMLlZ1iSsITQ8dQJaTATCbn98YvYPINK/EH541YA5enQIPQ==",
       "dependencies": {
-        "@babel/runtime": "^7.23.4",
+        "@babel/runtime": "^7.23.6",
         "@floating-ui/react-dom": "^2.0.4",
-        "@mui/types": "^7.2.10",
+        "@mui/types": "^7.2.12",
-        "@mui/utils": "^5.14.20",
+        "@mui/utils": "^5.15.3",
         "@popperjs/core": "^2.11.8",
         "clsx": "^2.0.0",
         "prop-types": "^15.8.1"
@@ -529,20 +533,20 @@
       }
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.14.20",
+      "version": "5.15.3",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.20.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.3.tgz",
-      "integrity": "sha512-fXoGe8VOrIYajqALysFuyal1q1YmBARqJ3tmnWYDVl0scu8f6h6tZQbS2K8BY28QwkWNGyv4WRfuUkzN5HR3Ow==",
+      "integrity": "sha512-sWeihiVyxdJjpLkp8SHkTy9kt2M/o11M60G1MzwljGL2BXdM3Ktzqv5QaQHdi00y7Y1ulvtI3GOSxP2xU8mQJw==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui-org"
       }
     },
     "node_modules/@mui/icons-material": {
-      "version": "5.14.19",
+      "version": "5.15.3",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.19.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.3.tgz",
-      "integrity": "sha512-yjP8nluXxZGe3Y7pS+yxBV+hWZSsSBampCxkZwaw+1l+feL+rfP74vbEFbMrX/Kil9I/Y1tWfy5bs/eNvwNpWw==",
+      "integrity": "sha512-7LEs8AnO2Se/XYH+CcJndRsGAE+M8KAExiiQHf0V11poqmPVGcbbY82Ry2IUYf9+rOilCVnWI18ErghZ625BPQ==",
       "dependencies": {
-        "@babel/runtime": "^7.23.4"
+        "@babel/runtime": "^7.23.6"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -563,17 +567,17 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "5.14.20",
+      "version": "5.15.3",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.20.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.3.tgz",
-      "integrity": "sha512-SUcPZnN6e0h1AtrDktEl76Dsyo/7pyEUQ+SAVe9XhHg/iliA0b4Vo+Eg4HbNkELsMbpDsUF4WHp7rgflPG7qYQ==",
+      "integrity": "sha512-DODBBMouyq1B5f3YkEWL9vO8pGCxuEGqtfpltF6peMJzz/78tJFyLQsDas9MNLC/8AdFu2BQdkK7wox5UBPTAA==",
       "dependencies": {
-        "@babel/runtime": "^7.23.4",
+        "@babel/runtime": "^7.23.6",
-        "@mui/base": "5.0.0-beta.26",
+        "@mui/base": "5.0.0-beta.30",
-        "@mui/core-downloads-tracker": "^5.14.20",
+        "@mui/core-downloads-tracker": "^5.15.3",
-        "@mui/system": "^5.14.20",
+        "@mui/system": "^5.15.3",
-        "@mui/types": "^7.2.10",
+        "@mui/types": "^7.2.12",
-        "@mui/utils": "^5.14.20",
+        "@mui/utils": "^5.15.3",
-        "@types/react-transition-group": "^4.4.9",
+        "@types/react-transition-group": "^4.4.10",
         "clsx": "^2.0.0",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1",
@@ -612,12 +616,12 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/@mui/private-theming": {
-      "version": "5.14.20",
+      "version": "5.15.3",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.20.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.3.tgz",
-      "integrity": "sha512-WV560e1vhs2IHCh0pgUaWHznrcrVoW9+cDCahU1VTkuwPokWVvb71ccWQ1f8Y3tRBPPcNkU2dChkkRJChLmQlQ==",
+      "integrity": "sha512-Q79MhVMmywC1l5bMsMZq5PsIudr1MNPJnx9/EqdMP0vpz5iNvFpnLmxsD7d8/hqTWgFAljI+LH3jX8MxlZH9Gw==",
       "dependencies": {
-        "@babel/runtime": "^7.23.4",
+        "@babel/runtime": "^7.23.6",
-        "@mui/utils": "^5.14.20",
+        "@mui/utils": "^5.15.3",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -638,11 +642,11 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "5.14.20",
+      "version": "5.15.3",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.20.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.3.tgz",
-      "integrity": "sha512-Vs4nGptd9wRslo9zeRkuWcZeIEp+oYbODy+fiZKqqr4CH1Gfi9fdP0Q1tGYk8OiJ2EPB/tZSAyOy62Hyp/iP7g==",
+      "integrity": "sha512-+d5XZCTeemOO/vBfWGEeHgTm8fjU1Psdgm+xAw+uegycO2EnoA/EfGSaG5UwZ6g3b66y48Mkxi35AggShMr88w==",
       "dependencies": {
-        "@babel/runtime": "^7.23.4",
+        "@babel/runtime": "^7.23.6",
         "@emotion/cache": "^11.11.0",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1"
@@ -669,15 +673,15 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "5.14.20",
+      "version": "5.15.3",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.20.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.3.tgz",
-      "integrity": "sha512-jKOGtK4VfYZG5kdaryUHss4X6hzcfh0AihT8gmnkfqRtWP7xjY+vPaUhhuSeibE5sqA5wCtdY75z6ep9pxFnIg==",
+      "integrity": "sha512-ewVU4eRgo4VfNMGpO61cKlfWmH7l9s6rA8EknRzuMX3DbSLfmtW2WJJg6qPwragvpPIir0Pp/AdWVSDhyNy5Tw==",
       "dependencies": {
-        "@babel/runtime": "^7.23.4",
+        "@babel/runtime": "^7.23.6",
-        "@mui/private-theming": "^5.14.20",
+        "@mui/private-theming": "^5.15.3",
-        "@mui/styled-engine": "^5.14.19",
+        "@mui/styled-engine": "^5.15.3",
-        "@mui/types": "^7.2.10",
+        "@mui/types": "^7.2.12",
-        "@mui/utils": "^5.14.20",
+        "@mui/utils": "^5.15.3",
         "clsx": "^2.0.0",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1"
@@ -708,9 +712,9 @@
       }
     },
     "node_modules/@mui/types": {
-      "version": "7.2.10",
+      "version": "7.2.12",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.10.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.12.tgz",
-      "integrity": "sha512-wX1vbDC+lzF7FlhT6A3ffRZgEoKWPF8VqRoTu4lZwouFX2t90KyCMsgepMw5DxLak1BSp/KP86CmtZttikb/gQ==",
+      "integrity": "sha512-3kaHiNm9khCAo0pVe0RenketDSFoZGAlVZ4zDjB/QNZV0XiCj+sh1zkX0VVhQPgYJDlBEzAag+MHJ1tU3vf0Zw==",
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0"
       },
@@ -721,11 +725,11 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.14.20",
+      "version": "5.15.3",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.20.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.3.tgz",
-      "integrity": "sha512-Y6yL5MoFmtQml20DZnaaK1znrCEwG6/vRSzW8PKOTrzhyqKIql0FazZRUR7sA5EPASgiyKZfq0FPwISRXm5NdA==",
+      "integrity": "sha512-mT3LiSt9tZWCdx1pl7q4Q5tNo6gdZbvJel286ZHGuj6LQQXjWNAh8qiF9d+LogvNUI+D7eLkTnj605d1zoazfg==",
       "dependencies": {
-        "@babel/runtime": "^7.23.4",
+        "@babel/runtime": "^7.23.6",
         "@types/prop-types": "^15.7.11",
         "prop-types": "^15.8.1",
         "react-is": "^18.2.0"
@@ -752,6 +756,31 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
+    "node_modules/@mui/x-data-grid": {
+      "version": "6.18.7",
+      "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-6.18.7.tgz",
+      "integrity": "sha512-K1A3pMUPxI4/Mt5A4vrK45fBBQK5rZvBVqRMrB5n8zX++Bj+WLWKvLTtfCmlriUtzuadr/Hl7Z+FDRXUJAx6qg==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@mui/utils": "^5.14.16",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1",
+        "reselect": "^4.1.8"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.4.1",
+        "@mui/system": "^5.4.1",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@next/env": {
       "version": "14.0.4",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-14.0.4.tgz",
@@ -945,6 +974,23 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@prisma/client": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/@prisma/client/-/client-5.7.1.tgz",
+      "integrity": "sha512-TUSa4nUcC4nf/e7X3jyO1pEd6XcI/TLRCA0KjkA46RDIpxUaRsBYEOqITwXRW2c0bMFyKcCRXrH4f7h4q9oOlg==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=16.13"
+      },
+      "peerDependencies": {
+        "prisma": "*"
+      },
+      "peerDependenciesMeta": {
+        "prisma": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@prisma/debug": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-5.7.1.tgz",
@@ -985,6 +1031,14 @@
         "@prisma/debug": "5.7.1"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.1.tgz",
+      "integrity": "sha512-Qg4DMQsfPNAs88rb2xkdk03N3bjK4jgX5fR24eHCTR9q6PrhZQZ4UJBPzCHJkIpTRN1UKxx2DzjZmnC+7Lj0Ow==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.6.0.tgz",
@@ -1447,14 +1501,20 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
-      "dev": true
+    },
+    "node_modules/big-integer": {
+      "version": "1.6.52",
+      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz",
+      "integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==",
+      "engines": {
+        "node": ">=0.6"
+      }
     },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -1472,6 +1532,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/broadcast-channel": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz",
+      "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "detect-node": "^2.1.0",
+        "js-sha3": "0.8.0",
+        "microseconds": "0.2.0",
+        "nano-time": "1.0.0",
+        "oblivious-set": "1.0.0",
+        "rimraf": "3.0.2",
+        "unload": "2.2.0"
+      }
+    },
     "node_modules/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -1546,9 +1621,9 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
     "node_modules/clsx": {
-      "version": "2.0.0",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
-      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
       "engines": {
         "node": ">=6"
       }
@@ -1585,8 +1660,7 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
-      "dev": true
     },
     "node_modules/convert-source-map": {
       "version": "1.9.0",
@@ -1704,6 +1778,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -2421,9 +2500,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.3",
+      "version": "1.15.4",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
-      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
       "funding": [
         {
           "type": "individual",
@@ -2464,8 +2543,7 @@
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
-      "dev": true
     },
     "node_modules/function-bind": {
       "version": "1.1.2",
@@ -2549,7 +2627,6 @@
       "version": "7.1.7",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
       "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
-      "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -2780,7 +2857,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "dev": true,
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -2789,8 +2865,7 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
-      "dev": true
     },
     "node_modules/internal-slot": {
       "version": "1.0.6",
@@ -3149,6 +3224,11 @@
         "set-function-name": "^2.0.1"
       }
     },
+    "node_modules/js-sha3": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
+      "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3305,6 +3385,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/match-sorter": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.1.tgz",
+      "integrity": "sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "remove-accents": "0.4.2"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3327,6 +3416,11 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/microseconds": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz",
+      "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA=="
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -3350,7 +3444,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -3373,6 +3466,14 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "node_modules/nano-time": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz",
+      "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==",
+      "dependencies": {
+        "big-integer": "^1.6.16"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -3559,11 +3660,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/oblivious-set": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz",
+      "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw=="
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -3656,7 +3761,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3823,6 +3927,61 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-query": {
+      "version": "3.39.3",
+      "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
+      "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "broadcast-channel": "^3.4.1",
+        "match-sorter": "^6.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router": {
+      "version": "6.21.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.1.tgz",
+      "integrity": "sha512-W0l13YlMTm1YrpVIOpjCADJqEUpz1vm+CMo47RuFX4Ftegwm6KOYsL5G3eiE52jnJpKvzm6uB/vTKTPKM8dmkA==",
+      "dependencies": {
+        "@remix-run/router": "1.14.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.21.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.1.tgz",
+      "integrity": "sha512-QCNrtjtDPwHDO+AO21MJd7yIcr41UetYt5jzaB9Y1UYaPTCnVuJq6S748g1dE11OQlCFIQg+RtAA1SEZIyiBeA==",
+      "dependencies": {
+        "@remix-run/router": "1.14.1",
+        "react-router": "6.21.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -3880,6 +4039,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/remove-accents": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
+      "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
+    },
+    "node_modules/reselect": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
+      "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -3927,7 +4096,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "dev": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -4448,6 +4616,15 @@
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
       "dev": true
     },
+    "node_modules/unload": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz",
+      "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.2",
+        "detect-node": "^2.0.4"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -4571,8 +4748,7 @@
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
-      "dev": true
     },
     "node_modules/yallist": {
       "version": "4.0.0",

package.json

@@ -3,21 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -H 100.101.64.38",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.19",
+    "@mui/icons-material": "^5.15.3",
-    "@mui/material": "^5.14.20",
+    "@mui/material": "^5.15.3",
+    "@mui/x-data-grid": "^6.18.7",
+    "@prisma/client": "^5.7.1",
     "axios": "^1.6.2",
-    "next": "14.0.4",
+    "next": "^14.0.4",
     "prisma": "^5.7.1",
-    "react": "^18",
+    "react": "^18.2.0",
-    "react-dom": "^18",
+    "react-dom": "^18.2.0",
+    "react-query": "^3.39.3",
+    "react-router-dom": "^6.21.1",
     "zustand": "^4.4.7"
   },
   "devDependencies": {

prisma/schema.prisma

@@ -1,6 +1,3 @@
-// This is your Prisma schema file,
-// learn more about it in the docs: https://pris.ly/d/prisma-schema
-
 generator client {
   provider = "prisma-client-js"
 }
@@ -9,3 +6,11 @@ datasource db {
   provider = "postgresql"
   url      = env("DATABASE_URL")
 }
+
+model Mitarbeiter {
+  ID           String   @id @default(dbgenerated("uuid_generate_v4()")) @db.Uuid
+  Vorname      String
+  Nachname     String
+  Anstelldatum DateTime @db.Date
+  Geburtstag   DateTime @db.Date
+}

src/app/app.tsx

@@ -0,0 +1,15 @@
+import { Routes, Route } from "react-router-dom";
+
+// @Pages
+import Dashboard from "./dashboard/page";
+
+function App() {
+  return (
+    <Routes>
+      <Route path="/dashboard" element={<Dashboard/>} />
+
+    </Routes>
+  );
+}
+
+export default App;

src/app/dashboard/page.tsx

@@ -0,0 +1,127 @@
+'use client'
+import { Box, Button, Typography, } from "@mui/material";
+import { DataGrid, GridColDef } from '@mui/x-data-grid';
+import { PrismaClient } from "@prisma/client";
+import axios from "axios";
+
+
+import { useEffect, useState } from "react";
+
+// ...3
+
+
+
+
+
+const URL = "http://100.101.64.38:3000/api/hello";
+
+export default function Page() {
+  const [data, setData] = useState<any>({ message: "" });
+
+  useEffect(() => {
+    async function getData() {
+      try {
+        const response = await fetch(URL);
+        const jsonData = await response.json();
+        setData(jsonData);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    }
+
+    getData();
+  }, []);
+  
+  const columns: GridColDef[] = [
+    {
+        field: 'Vorname',
+        headerName: 'Vorname',
+        width: 150,
+    },
+    {
+        field: 'Nachname',
+        headerName: 'Nachname',
+        width: 150,
+    },
+    {
+        field: 'Anstelldatum',
+        headerName: 'Anstelldatum',
+        width: 110,
+    },
+    {
+        field: 'Geburtstag',
+        headerName: 'Geburtstag',
+        description: 'This column has a value getter and is not sortable.',
+        sortable: false,
+        width: 160,
+    },
+];
+
+    const rows = [
+        { id: "1", Vorname:data.vorname, Nachname: data.nachname, Anstelldatum: data.anstellungsdatum, Geburtstag: data.geburtsdatum }
+    ];
+
+    return (
+        <Box
+            sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                height: "100vh",
+                background: "linear-gradient(45deg, #003263 15%, #9bc9e5 90%)",
+            }}
+        >
+            <Typography sx={{ fontSize: 50, fontWeight: "bold", color: "white" }}>
+                Welcome to the Admin panel bv g
+            </Typography>
+
+            <Box
+                sx={{
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "top",
+                    height: "90%",
+                    background: "white",
+                    width: "90%",
+                    borderRadius: "20px",
+                }}
+            >
+                <Button
+                    variant="contained"
+                    sx={{
+                        width: "6rem",
+                        height: "3rem",
+                        marginLeft: "1rem",
+                        marginTop: "1rem",
+
+                    }}
+                    onClick={() => {
+
+                    }}
+                >
+                    CSV Datei auswählen
+                </Button>
+                <DataGrid rows={rows} columns={columns} 
+                sx={{
+                    marginTop: "1rem",
+                    borderRadius: "20px",
+                    width: "auto",
+                }} 
+                initialState={{
+                    pagination: {
+                        paginationModel: {
+                            pageSize: 5,
+                        },
+                    },
+                }}
+                    checkboxSelection />
+
+
+
+            </Box>
+        </Box>
+    );
+}
+
+

src/app/globals.css

@@ -1,2 +1,10 @@
 :root {
 }
+
+body {
+    margin: 0;
+    padding: 0;
+    width: 100vw;
+    height: auto;
+;
+}

src/app/index.tsx

@@ -0,0 +1,46 @@
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./app";
+import { createTheme, ThemeProvider, CssBaseline } from "@mui/material";
+import { BrowserRouter } from "react-router-dom";
+
+// fonts
+import '@fontsource-variable/overpass';
+import '@fontsource-variable/lexend';
+
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: "#f7a7ff",
+    },
+    secondary: {
+      main: "#4b49ff",
+    },
+  },
+  // make the buttons not rounded
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 0,
+          fontFamily: "Lexend Variable",
+        },
+      },
+    },
+  },
+});
+
+export { theme };
+
+const root = ReactDOM.createRoot(
+  document.getElementById("root") as HTMLElement
+);
+root.render(
+  <ThemeProvider theme={theme}>
+    <CssBaseline />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </ThemeProvider>
+);

src/app/page.tsx

@@ -1,7 +1,101 @@
-import Image from 'next/image'
+'use client'
+
+import Image from "next/image";
+import { Box, Button, TextField, Typography } from "@mui/material";
+import { AccountCircle, Key, Login } from "@mui/icons-material";
+import { useHref } from "react-router-dom";
 
 export default function Home() {
-  return (
+  return(
-    <h1>Test</h1>
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "top",
+        height: "100vh",
+        background: "linear-gradient(45deg, #003263 15%, #9bc9e5 90%)",
+      }}
+    >
+      <Image
+        src="/DWLLogo.png"
+        alt="DWLDash Logo"
+        width={500}
+        height={500}
+        style={{ width: "10%", height: "auto" }}
+      />
+
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "flex",
+        }}
+      >
+        <Typography sx={{ fontSize: 50, fontWeight: "bold" }}>
+          Welcome to the Admin panel
+        </Typography>
+      </Box>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "auto",
+          backgroundColor: "white",
+          padding: "5%",
+          margin: "10%",
+          borderRadius: "5%",
+          boxShadow: "0 0 100px 5px rgba(0, 0, 0, 0.5)",
+        }}
+      >
+        <Box sx={{ display: "flex", alignItems: "flex-end" }}>
+          <AccountCircle sx={{ color: 'action.active', mr: 1, my: 5 }} />
+          <TextField
+            variant="outlined"
+            label="Username"
+            sx={{ width: "100%", marginBottom: "10%" }}
+            required
+          />
+        </Box>
+        <Box sx={{ alignItems: "flex-end" }}>
+          <Key sx={{ color: 'action.active', mr: 1, marginTop: "15px" }} />
+          <TextField
+            variant="outlined"
+            label="Password"
+            sx={{ marginBottom: "25%" }}
+            required
+          />
+        </Box>
+        <Button  variant = "contained" startIcon = {< Login />} 
+          sx={{
+            ':hover': {
+              bgcolor: 'red',
+              color: 'black',
+            },
+          }}
+            onClick={() => {
+              
+            }}
+          >
+
+          <Typography
+            sx={{
+              fontSize: 20,
+              fontWeight: "bold",
+            }}
+          >
+            Login
+          </Typography>
+        </Button>
+      </Box>
+    </Box >
   )
 }
+
+
+
+
+

src/pages/api/hello.ts

@@ -0,0 +1,39 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+import { PrismaClient } from '@prisma/client'
+ 
+const prisma = new PrismaClient()
+
+type ResponseData = {
+  vorname: string
+  nachname: string
+  geburtsdatum: string
+  anstellungsdatum: string
+
+}
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<ResponseData>
+) {
+  const result = await prisma.mitarbeiter.findFirst({
+    select: { Vorname: true },
+    orderBy: { ID:  'asc' },
+  });
+  const result2 = await prisma.mitarbeiter.findFirst({
+    select: { Nachname: true },
+    orderBy: { ID: 'asc' },
+  });
+  const result3 = await prisma.mitarbeiter.findFirst({
+    select: { Geburtstag: true },
+    orderBy: { ID: 'asc' },
+  });
+  const result4 = await prisma.mitarbeiter.findFirst({
+    select: { Anstelldatum: true },
+    orderBy: { ID: 'asc' },
+  });
+  const firstname = result?.Vorname ?? '';
+  const lastname = result2?.Nachname ?? '';
+  const birthday = result3?.Geburtstag ?? '';
+  const hiredate = result4?.Anstelldatum ?? '';
+  res.status(200).send({ vorname: firstname, nachname: lastname, geburtsdatum: birthday as string, anstellungsdatum: hiredate as string });
+}

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2017",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,