implement admin panel with login functionality and dashboard layout

This commit is contained in:
2025-08-31 18:07:49 +02:00
parent 8fb70ccccd
commit 217803ba8f
16 changed files with 409 additions and 2 deletions

View File

@@ -0,0 +1,60 @@
import React from "react";
import { useState } from "react";
import { Box, Heading, Text, Flex, Button } from "@chakra-ui/react";
import Sidebar from "./Sidebar";
import UserTable from "../components/UserTable";
import ItemTable from "../components/ItemTable";
import LockerTable from "../components/LockerTable";
import LoanTable from "../components/LoanTable";
type DashboardProps = {
onLogout?: () => void;
};
const Dashboard: React.FC<DashboardProps> = ({ onLogout }) => {
const userName = localStorage.getItem("userName") || "Admin";
const [activeView, setActiveView] = useState("");
return (
<Flex h="100vh">
<Sidebar
viewAusleihen={() => setActiveView("Ausleihen")}
viewGegenstaende={() => setActiveView("Gegenstände")}
viewSchliessfaecher={() => setActiveView("Schließfächer")}
viewUser={() => setActiveView("User")}
/>
<Box flex="1" display="flex" flexDirection="column">
<Flex
as="header"
align="center"
justify="space-between"
px={6}
py={4}
borderBottom="1px"
borderColor="gray.200"
bg="gray.900"
>
<Heading size="md">Dashboard</Heading>
<Flex align="center" gap={6}>
<Text fontSize="sm" color="white">
Willkommen {userName}, im Admin-Dashboard!
</Text>
<Button variant="solid" onClick={onLogout}>
Logout
</Button>
</Flex>
</Flex>
<Box as="main" flex="1" p={6}>
{activeView === "" && <Text>Bitte wählen Sie eine Ansicht aus.</Text>}
{activeView === "User" && <UserTable />}
{activeView === "Ausleihen" && <LoanTable />}
{activeView === "Gegenstände" && <ItemTable />}
{activeView === "Schließfächer" && <LockerTable />}
</Box>
</Box>
</Flex>
);
};
export default Dashboard;