Add @mui/x-data-grid and @prisma/client dependencies

package-lock.json

@@ -12,6 +12,8 @@
         "@emotion/styled": "^11.11.0",
         "@mui/icons-material": "^5.15.3",
         "@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",
         "prisma": "^5.7.1",
@@ -754,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",
@@ -947,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",
@@ -4000,6 +4044,11 @@
       "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",

package.json

@@ -3,7 +3,7 @@
   "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"
@@ -13,6 +13,8 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.3",
     "@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",
     "prisma": "^5.7.1",

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

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

src/app/dashboard.tsx

@@ -1,10 +0,0 @@
-import { Typography } from "@mui/material";
-
-export default function dashboard() {
-
-    return (
-        <Typography sx={{ fontSize: 50, fontWeight: "bold" }}>
-            Welcome to the Admin panel
-        </Typography>
-    )
-}

src/app/dashboard/page.tsx

@@ -0,0 +1,122 @@
+'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";
+
+// ...
+
+
+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 URL= "http://100.101.64.38:3000/api/hello";
+
+export default function Page() {
+
+
+
+    const [data, setData] = useState<any[]>([]);
+    useEffect(() => {
+      async function getData() {
+        const response = await fetch(URL);
+        const data = await response.json();
+        setData(data);
+      }
+      getData();
+    }, [])
+  
+
+    const rows = [
+        { id: "1", Vorname:{data}, Nachname: "test", Anstelldatum: "test", Geburtstag: "test" }
+    ];
+
+    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
+            </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",
+                }} 
+                initialState={{
+                    pagination: {
+                        paginationModel: {
+                            pageSize: 5,
+                        },
+                    },
+                }}
+                    checkboxSelection />
+
+
+
+            </Box>
+        </Box>
+    );
+}
+
+

src/app/page.tsx

@@ -77,7 +77,7 @@ export default function Home() {
             },
           }}
             onClick={() => {
-              useHref("/dashboard");
+              
             }}
           >
 

src/pages/api/hello.ts

@@ -0,0 +1,12 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+ 
+type ResponseData = {
+  message: string
+}
+ 
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<ResponseData>
+) {
+  res.status(200).send({ Vorname: 'test' })
+}

tsconfig.json

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