From ab93c9959d03296dbe42286c517b47b2d105f289 Mon Sep 17 00:00:00 2001
From: Theis Gaedigk <theis.gaedigk@icloud.com>
Date: Sun, 21 Sep 2025 00:48:28 +0200
Subject: [PATCH] fullfilled landingpage

---
 admin/src/components/API/Landingpage.tsx | 204 ++++++++++++++++++++++-
 backend/routes/apiV2.js                  |   9 +
 backend/services/database.js             |  10 ++
 3 files changed, 222 insertions(+), 1 deletion(-)

diff --git a/admin/src/components/API/Landingpage.tsx b/admin/src/components/API/Landingpage.tsx
index c0eef14..a32d66e 100644
--- a/admin/src/components/API/Landingpage.tsx
+++ b/admin/src/components/API/Landingpage.tsx
@@ -1,9 +1,211 @@
 import React from "react";
+import { useEffect } from "react";
+import { useState } from "react";
+import { Spinner, Text, VStack, Box } from "@chakra-ui/react";
+import { Table, Heading } from "@chakra-ui/react";
+import { formatDateTime } from "@/utils/userFuncs";
 
 const Landingpage: React.FC = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [loans, setLoans] = useState<any[]>([]);
+
+  useEffect(() => {
+    setIsLoading(true);
+    fetch("http://localhost:8002/apiV2/allLoans")
+      .then((response) => response.json())
+      .then((data) => {
+        setLoans(data);
+        setIsLoading(false);
+      })
+      .catch((error) => {
+        console.error("Error fetching loans:", error);
+        setIsLoading(false);
+      });
+  }, []);
+
   return (
     <>
-      <h1>Übersicht über alle Gegenstände und Ausleihen</h1>
+      <Heading as="h1" size="lg" mb={4}>
+        Matthias-Claudius-Schule Technik
+      </Heading>
+      <Heading as="h2" size="md" mb={4}>
+        Alle Ausleihen
+      </Heading>
+      {isLoading && (
+        <VStack colorPalette="teal">
+          <Spinner color="colorPalette.600" />
+          <Text color="colorPalette.600">Loading...</Text>
+        </VStack>
+      )}
+      {!isLoading && (
+        <Box
+          borderWidth="1px"
+          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
+                    textTransform="uppercase"
+                    letterSpacing="wider"
+                    fontSize="xs"
+                    color="gray.600"
+                    _dark={{ color: "gray.200" }}
+                    py={3}
+                  >
+                    <strong>#</strong>
+                  </Table.ColumnHeader>
+                  <Table.ColumnHeader
+                    textTransform="uppercase"
+                    letterSpacing="wider"
+                    fontSize="xs"
+                    color="gray.600"
+                    _dark={{ color: "gray.200" }}
+                    py={3}
+                  >
+                    <strong>Username</strong>
+                  </Table.ColumnHeader>
+                  <Table.ColumnHeader
+                    textTransform="uppercase"
+                    letterSpacing="wider"
+                    fontSize="xs"
+                    color="gray.600"
+                    _dark={{ color: "gray.200" }}
+                    py={3}
+                  >
+                    <strong>Start Date</strong>
+                  </Table.ColumnHeader>
+                  <Table.ColumnHeader
+                    textTransform="uppercase"
+                    letterSpacing="wider"
+                    fontSize="xs"
+                    color="gray.600"
+                    _dark={{ color: "gray.200" }}
+                    py={3}
+                  >
+                    <strong>End Date</strong>
+                  </Table.ColumnHeader>
+                  <Table.ColumnHeader
+                    textTransform="uppercase"
+                    letterSpacing="wider"
+                    fontSize="xs"
+                    color="gray.600"
+                    _dark={{ color: "gray.200" }}
+                    py={3}
+                  >
+                    <strong>Loaned Items</strong>
+                  </Table.ColumnHeader>
+                  <Table.ColumnHeader
+                    textTransform="uppercase"
+                    letterSpacing="wider"
+                    fontSize="xs"
+                    color="gray.600"
+                    _dark={{ color: "gray.200" }}
+                    py={3}
+                  >
+                    <strong>Returned Date</strong>
+                  </Table.ColumnHeader>
+                  <Table.ColumnHeader
+                    textTransform="uppercase"
+                    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
+                    key={loan.id}
+                    _hover={{ bg: "gray.50", _dark: { bg: "whiteAlpha.100" } }}
+                    transition="background-color 120ms ease"
+                  >
+                    <Table.Cell py={3} fontWeight="semibold">
+                      {loan.id}
+                    </Table.Cell>
+                    <Table.Cell py={3}>{loan.username}</Table.Cell>
+                    <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.Row>
+                ))}
+              </Table.Body>
+            </Table.Root>
+          </Box>
+        </Box>
+      )}
     </>
   );
 };
diff --git a/backend/routes/apiV2.js b/backend/routes/apiV2.js
index faecec2..1cfb906 100644
--- a/backend/routes/apiV2.js
+++ b/backend/routes/apiV2.js
@@ -6,6 +6,7 @@ import {
   setReturnDateV2,
   setTakeDateV2,
   getLoanByCodeV2,
+  getAllLoansV2,
 } from "../services/database.js";
 
 dotenv.config();
@@ -90,4 +91,12 @@ router.post("/setTakeDate/:key/:loan_code", async (req, res) => {
   }
 });
 
+router.get("/allLoans", async (req, res) => {
+  const result = await getAllLoansV2();
+  if (result.success) {
+    return res.status(200).json(result.data);
+  }
+  return res.status(500).json({ message: "Failed to fetch loans" });
+});
+
 export default router;
diff --git a/backend/services/database.js b/backend/services/database.js
index 8a83a0e..4e1492a 100644
--- a/backend/services/database.js
+++ b/backend/services/database.js
@@ -447,3 +447,13 @@ export const updateItemByID = async (itemId, item_name, can_borrow_role) => {
   if (result.affectedRows > 0) return { success: true };
   return { success: false };
 };
+
+export const getAllLoansV2 = async () => {
+  const [rows] = await pool.query(
+    "SELECT id, username, start_date, end_date, loaned_items_name, returned_date, take_date FROM loans"
+  );
+  if (rows.length > 0) {
+    return { success: true, data: rows };
+  }
+  return { success: false };
+};