79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
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 LoanTable from "../components/LoanTable";
|
|
import APIKeyTable from "@/components/APIKeyTable";
|
|
import { MoveLeft } from "lucide-react";
|
|
|
|
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")}
|
|
viewAPI={() => setActiveView("API")}
|
|
/>
|
|
<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="xl">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 === "" && (
|
|
<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 />}
|
|
{activeView === "API" && <APIKeyTable />}
|
|
</Box>
|
|
</Box>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default Dashboard;
|