added a bit documentation to the api file

admin/src/components/API/Landingpage.tsx

@@ -1,210 +1,178 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
-import { useEffect } from "react";
+import {
-import { useState } from "react";
+  Spinner,
-import { Spinner, Text, VStack, Box } from "@chakra-ui/react";
+  Text,
-import { Table, Heading } from "@chakra-ui/react";
+  VStack,
+  Table,
+  Heading,
+  HStack,
+  IconButton,
+} from "@chakra-ui/react";
+import { Tooltip } from "@/components/ui/tooltip";
+import { RefreshCcwDot } from "lucide-react";
+import MyAlert from "../myChakra/MyAlert";
 import { formatDateTime } from "@/utils/userFuncs";
 
+type Loan = {
+  id: number;
+  username: string;
+  start_date: string;
+  end_date: string;
+  returned_date: string | null;
+  take_date: string | null;
+  loaned_items_name: string[] | string;
+};
+
 const Landingpage: React.FC = () => {
   const [isLoading, setIsLoading] = useState(false);
-  const [loans, setLoans] = useState<any[]>([]);
+  const [loans, setLoans] = useState<Loan[]>([]);
+  const [isError, setIsError] = useState(false);
+  const [errorStatus, setErrorStatus] = useState<"error" | "success">("error");
+  const [errorMessage, setErrorMessage] = useState("");
+  const [errorDsc, setErrorDsc] = useState("");
+  const [reload, setReload] = useState(false);
+
+  const setError = (
+    status: "error" | "success",
+    message: string,
+    description: string
+  ) => {
+    setIsError(false);
+    setErrorStatus(status);
+    setErrorMessage(message);
+    setErrorDsc(description);
+    setIsError(true);
+  };
 
   useEffect(() => {
+    const fetchLoans = async () => {
       setIsLoading(true);
-    fetch("http://localhost:8002/apiV2/allLoans")
+      try {
-      .then((response) => response.json())
+        const res = await fetch("http://localhost:8002/apiV2/allLoans");
-      .then((data) => {
+        const data = await res.json();
+        if (Array.isArray(data)) {
           setLoans(data);
+        } else {
+          setError(
+            "error",
+            "Fehler beim Laden",
+            "Unerwartetes Datenformat erhalten."
+          );
+        }
+      } catch (e) {
+        setError(
+          "error",
+          "Fehler beim Laden",
+          "Die Ausleihen konnten nicht geladen werden."
+        );
+      } finally {
         setIsLoading(false);
-      })
+      }
-      .catch((error) => {
+    };
-        console.error("Error fetching loans:", error);
+    fetchLoans();
-        setIsLoading(false);
+  }, [reload]);
-      });
-  }, []);
 
   return (
     <>
-      <Heading as="h1" size="lg" mb={4}>
+      <Heading as="h1" size="lg" mb={2}>
         Matthias-Claudius-Schule Technik
       </Heading>
+
+      {/* Action toolbar */}
+      <HStack
+        mb={4}
+        gap={3}
+        justify="flex-start"
+        align="center"
+        flexWrap="wrap"
+      >
+        <Tooltip content="Ausleihen neu laden" openDelay={300}>
+          <IconButton
+            aria-label="Refresh loans"
+            size="sm"
+            variant="outline"
+            rounded="md"
+            shadow="sm"
+            _hover={{ shadow: "md", transform: "translateY(-2px)" }}
+            _active={{ transform: "translateY(0)" }}
+            onClick={() => setReload(!reload)}
+          >
+            <RefreshCcwDot size={18} />
+          </IconButton>
+        </Tooltip>
+      </HStack>
+      {/* End action toolbar */}
+
       <Heading as="h2" size="md" mb={4}>
         Alle Ausleihen
       </Heading>
+
+      {isError && (
+        <MyAlert
+          status={errorStatus}
+          description={errorDsc}
+          title={errorMessage}
+        />
+      )}
+
       {isLoading && (
         <VStack colorPalette="teal">
           <Spinner color="colorPalette.600" />
           <Text color="colorPalette.600">Loading...</Text>
         </VStack>
       )}
+
       {!isLoading && (
-        <Box
+        <Table.Root size="sm" striped>
-          borderWidth="1px"
+          <Table.Header>
-          borderRadius="lg"
-          overflow="hidden"
-          boxShadow="sm"
-          bg="white"
-          _dark={{ bg: "gray.800", borderColor: "gray.700" }}
-        >
-          <Box maxH="70vh" overflow="auto">
-            <Table.Root
-              size="md"
-              variant="outline"
-              colorPalette="teal"
-              w="full"
-              minW="900px"
-            >
-              <Table.ColumnGroup>
-                <Table.Column htmlWidth="50%" />
-                <Table.Column htmlWidth="40%" />
-                <Table.Column />
-              </Table.ColumnGroup>
-              <Table.Header
-                position="sticky"
-                top={0}
-                zIndex={1}
-                bg="gray.50"
-                _dark={{ bg: "gray.700" }}
-              >
             <Table.Row>
-                  <Table.ColumnHeader
+              <Table.ColumnHeader>
-                    textTransform="uppercase"
-                    letterSpacing="wider"
-                    fontSize="xs"
-                    color="gray.600"
-                    _dark={{ color: "gray.200" }}
-                    py={3}
-                  >
                 <strong>#</strong>
               </Table.ColumnHeader>
-                  <Table.ColumnHeader
+              <Table.ColumnHeader>
-                    textTransform="uppercase"
+                <strong>Benutzername</strong>
-                    letterSpacing="wider"
-                    fontSize="xs"
-                    color="gray.600"
-                    _dark={{ color: "gray.200" }}
-                    py={3}
-                  >
-                    <strong>Username</strong>
               </Table.ColumnHeader>
-                  <Table.ColumnHeader
+              <Table.ColumnHeader>
-                    textTransform="uppercase"
+                <strong>Startdatum</strong>
-                    letterSpacing="wider"
-                    fontSize="xs"
-                    color="gray.600"
-                    _dark={{ color: "gray.200" }}
-                    py={3}
-                  >
-                    <strong>Start Date</strong>
               </Table.ColumnHeader>
-                  <Table.ColumnHeader
+              <Table.ColumnHeader>
-                    textTransform="uppercase"
+                <strong>Enddatum</strong>
-                    letterSpacing="wider"
-                    fontSize="xs"
-                    color="gray.600"
-                    _dark={{ color: "gray.200" }}
-                    py={3}
-                  >
-                    <strong>End Date</strong>
               </Table.ColumnHeader>
-                  <Table.ColumnHeader
+              <Table.ColumnHeader>
-                    textTransform="uppercase"
+                <strong>Ausgeliehene Artikel</strong>
-                    letterSpacing="wider"
-                    fontSize="xs"
-                    color="gray.600"
-                    _dark={{ color: "gray.200" }}
-                    py={3}
-                  >
-                    <strong>Loaned Items</strong>
               </Table.ColumnHeader>
-                  <Table.ColumnHeader
+              <Table.ColumnHeader>
-                    textTransform="uppercase"
+                <strong>Rückgabedatum</strong>
-                    letterSpacing="wider"
-                    fontSize="xs"
-                    color="gray.600"
-                    _dark={{ color: "gray.200" }}
-                    py={3}
-                  >
-                    <strong>Returned Date</strong>
               </Table.ColumnHeader>
-                  <Table.ColumnHeader
+              <Table.ColumnHeader>
-                    textTransform="uppercase"
+                <strong>Ausleihdatum</strong>
-                    letterSpacing="wider"
-                    fontSize="xs"
-                    color="gray.600"
-                    _dark={{ color: "gray.200" }}
-                    py={3}
-                  >
-                    <strong>Take Date</strong>
               </Table.ColumnHeader>
             </Table.Row>
           </Table.Header>
           <Table.Body>
             {loans.map((loan) => (
-                  <Table.Row
+              <Table.Row key={loan.id}>
-                    key={loan.id}
+                <Table.Cell>{loan.id}</Table.Cell>
-                    _hover={{ bg: "gray.50", _dark: { bg: "whiteAlpha.100" } }}
+                <Table.Cell>{loan.username}</Table.Cell>
-                    transition="background-color 120ms ease"
+                <Table.Cell>{formatDateTime(loan.start_date)}</Table.Cell>
-                  >
+                <Table.Cell>{formatDateTime(loan.end_date)}</Table.Cell>
-                    <Table.Cell py={3} fontWeight="semibold">
+                <Table.Cell>
-                      {loan.id}
+                  {Array.isArray(loan.loaned_items_name)
-                    </Table.Cell>
+                    ? loan.loaned_items_name.join(", ")
-                    <Table.Cell py={3}>{loan.username}</Table.Cell>
+                    : loan.loaned_items_name}
-                    <Table.Cell
-                      py={3}
-                      whiteSpace="nowrap"
-                      fontFamily="mono"
-                      fontSize="sm"
-                      color="gray.600"
-                      _dark={{ color: "gray.300" }}
-                    >
-                      {formatDateTime(loan.start_date)}
-                    </Table.Cell>
-                    <Table.Cell
-                      py={3}
-                      whiteSpace="nowrap"
-                      fontFamily="mono"
-                      fontSize="sm"
-                      color="gray.600"
-                      _dark={{ color: "gray.300" }}
-                    >
-                      {formatDateTime(loan.end_date)}
-                    </Table.Cell>
-                    <Table.Cell
-                      py={3}
-                      maxW="40ch"
-                      overflow="hidden"
-                      textOverflow="ellipsis"
-                      whiteSpace="nowrap"
-                    >
-                      {loan.loaned_items_name}
-                    </Table.Cell>
-                    <Table.Cell
-                      py={3}
-                      whiteSpace="nowrap"
-                      fontFamily="mono"
-                      fontSize="sm"
-                      color="gray.600"
-                      _dark={{ color: "gray.300" }}
-                    >
-                      {formatDateTime(loan.returned_date)}
-                    </Table.Cell>
-                    <Table.Cell
-                      py={3}
-                      whiteSpace="nowrap"
-                      fontFamily="mono"
-                      fontSize="sm"
-                      color="gray.600"
-                      _dark={{ color: "gray.300" }}
-                    >
-                      {formatDateTime(loan.take_date)}
                 </Table.Cell>
+                <Table.Cell>{formatDateTime(loan.returned_date)}</Table.Cell>
+                <Table.Cell>{formatDateTime(loan.take_date)}</Table.Cell>
               </Table.Row>
             ))}
           </Table.Body>
         </Table.Root>
-          </Box>
+      )}
-        </Box>
+
+      {!isLoading && loans.length === 0 && !isError && (
+        <Text color="gray.500" mt={2}>
+          Keine Ausleihen vorhanden.
+        </Text>
       )}
     </>
   );

backend/routes/apiV2.js

@@ -46,6 +46,7 @@ router.post("/controlInSafe/:key/:itemId/:state", async (req, res) => {
   }
 });
 
+// Route for API to get a loan by its code
 router.get("/getLoanByCode/:key/:loan_code", async (req, res) => {
   if (req.params.key === process.env.ADMIN_ID) {
     const loan_code = req.params.loan_code;
@@ -59,7 +60,7 @@ router.get("/getLoanByCode/:key/:loan_code", async (req, res) => {
   }
 });
 
-// Route for API to set the return date
+// Route for API to set the return date by the loan code
 router.post("/setReturnDate/:key/:loan_code", async (req, res) => {
   if (req.params.key === process.env.ADMIN_ID) {
     const loanCode = req.params.loan_code;
@@ -75,7 +76,7 @@ router.post("/setReturnDate/:key/:loan_code", async (req, res) => {
   }
 });
 
-// Route for API to set the take away date
+// Route for API to set the take away date by the loan code
 router.post("/setTakeDate/:key/:loan_code", async (req, res) => {
   if (req.params.key === process.env.ADMIN_ID) {
     const loanCode = req.params.loan_code;
@@ -91,6 +92,7 @@ router.post("/setTakeDate/:key/:loan_code", async (req, res) => {
   }
 });
 
+// Route for API to get ALL loans from the database without sensitive info
 router.get("/allLoans", async (req, res) => {
   const result = await getAllLoansV2();
   if (result.success) {