Theis Gaedigk
a8b4ac3d60
- Updated LoanTable component to fetch loan data from new API endpoint and display notes. - Enhanced UserTable component to include additional user fields (first name, last name, email, admin status) and updated input handling. - Modified fetcher utility to use new user data API endpoint. - Adjusted login functionality to point to the new admin login endpoint and handle unauthorized access. - Refactored user actions utility to align with updated API endpoints for user management. - Updated backend routes for user and loan data management to reflect new structure and naming conventions. - Revised SQL schema and mock data to accommodate new fields and constraints. - Changed Docker configuration to use the new database name.
123 lines
3.0 KiB
TypeScript
123 lines
3.0 KiB
TypeScript
import React from "react";
|
||
import { useEffect, useState } from "react";
|
||
import { Box, Flex, VStack, Heading, Text, Link } from "@chakra-ui/react";
|
||
import { API_BASE } from "@/config/api.config";
|
||
|
||
type SidebarProps = {
|
||
viewAusleihen: () => void;
|
||
viewGegenstaende: () => void;
|
||
viewSchliessfaecher: () => void;
|
||
viewUser: () => void;
|
||
viewAPI: () => void;
|
||
};
|
||
|
||
const Sidebar: React.FC<SidebarProps> = ({
|
||
viewAusleihen,
|
||
viewGegenstaende,
|
||
viewUser,
|
||
viewAPI,
|
||
}) => {
|
||
const [info, setInfo] = useState<any>(null);
|
||
|
||
const fetchInfo = async () => {
|
||
const response = await fetch(`${API_BASE}/`);
|
||
const data = await response.json();
|
||
setInfo(data);
|
||
};
|
||
|
||
useEffect(() => {
|
||
fetchInfo();
|
||
}, []);
|
||
|
||
return (
|
||
<Box
|
||
as="aside"
|
||
w="180px"
|
||
minH="100vh"
|
||
bg="gray.800"
|
||
color="gray.100"
|
||
px={6}
|
||
py={8}
|
||
borderRight="1px solid"
|
||
borderColor="gray.700"
|
||
>
|
||
<Flex direction="column" h="full">
|
||
<Heading size="md" mb={8} letterSpacing="wide">
|
||
Borrow System
|
||
</Heading>
|
||
|
||
<VStack align="stretch" gap={4} fontSize="sm">
|
||
<Link
|
||
px={3}
|
||
py={2}
|
||
rounded="md"
|
||
_hover={{ bg: "gray.700", textDecoration: "none" }}
|
||
onClick={viewUser}
|
||
>
|
||
Benutzer
|
||
</Link>
|
||
<Link
|
||
px={3}
|
||
py={2}
|
||
rounded="md"
|
||
_hover={{ bg: "gray.700", textDecoration: "none" }}
|
||
onClick={viewAusleihen}
|
||
>
|
||
Ausleihen
|
||
</Link>
|
||
<Link
|
||
px={3}
|
||
py={2}
|
||
rounded="md"
|
||
_hover={{ bg: "gray.700", textDecoration: "none" }}
|
||
onClick={viewGegenstaende}
|
||
>
|
||
Gegenstände
|
||
</Link>
|
||
<Link
|
||
px={3}
|
||
py={2}
|
||
rounded="md"
|
||
_hover={{ bg: "gray.700", textDecoration: "none" }}
|
||
onClick={viewAPI}
|
||
>
|
||
API Keys
|
||
</Link>
|
||
</VStack>
|
||
|
||
<Box mt="auto" pt={8} fontSize="xs" color="gray.500">
|
||
<Text mb={2}>© Made with ❤️ by Theis Gaedigk</Text>
|
||
{info ? (
|
||
<Flex gap={2} wrap="wrap">
|
||
<Box
|
||
as="span"
|
||
px={2}
|
||
py={0.5}
|
||
rounded="full"
|
||
bg="gray.700"
|
||
color="gray.200"
|
||
>
|
||
Panel {info?.["admin-panel-info"]?.version ?? "—"}
|
||
</Box>
|
||
<Box
|
||
as="span"
|
||
px={2}
|
||
py={0.5}
|
||
rounded="full"
|
||
bg="gray.700"
|
||
color="gray.200"
|
||
>
|
||
Backend {info?.["backend-info"]?.version ?? "—"}
|
||
</Box>
|
||
</Flex>
|
||
) : (
|
||
<Text color="gray.600">Lade Versionsinfos…</Text>
|
||
)}
|
||
</Box>
|
||
</Flex>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default Sidebar;
|