add user management features: implement user creation, editing, and deletion; enhance dashboard with user selection prompt; improve token verification and alert handling

admin/src/Layout/Dashboard.tsx

@@ -6,6 +6,7 @@ import UserTable from "../components/UserTable";
 import ItemTable from "../components/ItemTable";
 import LockerTable from "../components/LockerTable";
 import LoanTable from "../components/LoanTable";
+import { MoveLeft } from "lucide-react";
 
 type DashboardProps = {
   onLogout?: () => void;
@@ -46,7 +47,23 @@ const Dashboard: React.FC<DashboardProps> = ({ onLogout }) => {
           </Flex>
         </Flex>
         <Box as="main" flex="1" p={6}>
-          {activeView === "" && <Text>Bitte wählen Sie eine Ansicht aus.</Text>}
+          {activeView === "" && (
+            <Flex
+              align="center"
+              gap={3}
+              p={4}
+              border="1px dashed"
+              borderColor="gray.300"
+              borderRadius="md"
+              bg="gray.50"
+              color="gray.700"
+              fontSize="lg"
+              fontWeight="semibold"
+            >
+              <MoveLeft size={20} />
+              Bitte wählen Sie eine Ansicht aus.
+            </Flex>
+          )}
           {activeView === "User" && <UserTable />}
           {activeView === "Ausleihen" && <LoanTable />}
           {activeView === "Gegenstände" && <ItemTable />}

admin/src/Layout/Layout.tsx

@@ -13,7 +13,22 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
 
   useEffect(() => {
     if (Cookies.get("token")) {
-      setIsLoggedIn(true);
+      const verifyToken = async () => {
+        const response = await fetch("http://localhost:8002/api/verifyToken", {
+          method: "GET",
+          headers: {
+            Authorization: `Bearer ${Cookies.get("token")}`,
+          },
+        });
+        if (response.ok) {
+          setIsLoggedIn(true);
+        } else {
+          Cookies.remove("token");
+          setIsLoggedIn(false);
+          window.location.reload();
+        }
+      };
+      verifyToken();
     }
   }, []);
 

admin/src/Layout/Login.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useState } from "react";
 import { loginFunc } from "@/utils/loginUser";
-import MyAlert from "@/components/myChakra/MyAlert";
+import MyAlert from "../components/myChakra/MyAlert";
 import { Button, Card, Field, Input, Stack } from "@chakra-ui/react";
 
 const Login: React.FC<{ onSuccess: () => void }> = ({ onSuccess }) => {
@@ -50,7 +50,7 @@ const Login: React.FC<{ onSuccess: () => void }> = ({ onSuccess }) => {
         </Stack>
       </Card.Body>
       <Card.Footer justifyContent="flex-end">
-        {isError && <MyAlert title={errorMsg} description={errorDsc} />}
+        {isError && <MyAlert status="error" title={errorMsg} description={errorDsc} />}
         <Button onClick={() => handleLogin()} variant="solid">
           Login
         </Button>