Refactor API and frontend components: update item state handling, adjust API key length, and improve table layout for MyLoansPage

Docs/backend_API_docs/README.md

@@ -49,9 +49,11 @@ Route handlers:
 ## Endpoints (Overview)
 
 1. **Public**
+
    - `GET /api/all-items` – List all items (no auth; from original docs)
 
 2. **Items (authenticated)**
+
    - `GET /api/items/:key` – List all items
    - `POST /api/change-state/:key/:itemId/:state` – Toggle item safe state
 
@@ -88,7 +90,7 @@ GET https://backend.insta.the1s.de/api/items/12345678
       "id": 1,
       "item_name": "DJI 1er Mikro",
       "can_borrow_role": 4,
-      "inSafe": 1,
+      "in_safe": 1,
       "safe_nr": "01",
       "entry_created_at": "2025-08-19T22:02:16.000Z",
       "entry_updated_at": "2025-08-19T22:02:16.000Z",
@@ -115,7 +117,7 @@ GET https://backend.insta.the1s.de/api/items/12345678
 
 ### 2.2 Toggle item safe state
 
-**POST** `/api/change-state/:key/:itemId/:state`
+**POST** `/api/change-state/:key/:itemId`
 
 > You do not need this endpoint to set the states of the items when the items are taken out or returned. When you take or return a loan, the item states are set automatically by the loan endpoints. This endpoint is only for manually toggling the `inSafe` state of an item.
 
@@ -123,21 +125,20 @@ Path parameters:
 
 - `:key` – API key (8 digits)
 - `:itemId` – numeric `id` of the item
-- `:state` – must be `"1"` or `"0"`
 
 Handler in `api.route.js` calls `changeInSafeStateV2(itemId)`, which executes:
 
 ```sql
-UPDATE items SET inSafe = NOT inSafe WHERE id = ?
+UPDATE items SET in_safe = NOT in_safe WHERE id = ?
 ```
 
 #### Example request
 
 ```http
-POST https://backend.insta.the1s.de/api/change-state/12345678/42/1
+POST https://backend.insta.the1s.de/api/change-state/12345678/42
 ```
 
-(Will toggle `inSafe` for item `42`, regardless of the final `1`.)
+(Will toggle `in_safe` for item `42`.)
 
 #### Successful response (current implementation)
 
@@ -301,13 +302,21 @@ POST https://backend.insta.the1s.de/api/set-return-date/12345678/646473
 **Success – list (authenticated items):**
 
 ```json
-{ "data": [ /* array of rows */ ] }
+{
+  "data": [
+    /* array of rows */
+  ]
+}
 ```
 
 **Success – single loan:**
 
 ```json
-{ "data": { /* selected loan fields */ } }
+{
+  "data": {
+    /* selected loan fields */
+  }
+}
 ```
 
 **Success – mutations (current code):**

FrontendV2/src/pages/MyLoansPage.tsx

@@ -13,6 +13,7 @@ import {
   Dialog,
   Portal,
   Code,
+  Box,
 } from "@chakra-ui/react";
 import { Header } from "@/components/Header";
 import { Trash2 } from "lucide-react";
@@ -129,10 +130,18 @@ export const MyLoansPage = () => {
           </VStack>
         )}
         {loans && (
+          <Box
+            overflowX="auto"
+            width="100%"
+            // Optional: add bottom padding to avoid scrollbar overlap
+            pb={2}
+          >
             <Table.Root
               size="sm"
               variant="outline"
-            style={{ tableLayout: "fixed", width: "100%" }}
+              // minWidth ensures we don't cram all columns on tiny screens;
+              // horizontal scrolling will appear instead.
+              style={{ tableLayout: "fixed", width: "100%", minWidth: "800px" }}
             >
               <Table.ColumnGroup>
                 {/* Ausleihcode */}
@@ -216,7 +225,9 @@ export const MyLoansPage = () => {
                               </Dialog.Body>
                               <Dialog.Footer>
                                 <Dialog.ActionTrigger asChild>
-                                <Button variant="outline">{t("cancel")}</Button>
+                                  <Button variant="outline">
+                                    {t("cancel")}
+                                  </Button>
                                 </Dialog.ActionTrigger>
                                 <Button
                                   colorPalette="red"
@@ -237,6 +248,7 @@ export const MyLoansPage = () => {
                 ))}
               </Table.Body>
             </Table.Root>
+          </Box>
         )}
       </Container>
     </>

admin/src/components/AddAPIKey.tsx

@@ -37,17 +37,17 @@ const AddAPIKey: React.FC<AddAPIKeyProps> = ({ onClose, alert }) => {
             <InputGroup
               endElement={
                 <Span color="fg.muted" textStyle="xs">
-                  {value.length} / {15}
+                  {value.length} / {8}
                 </Span>
               }
             >
               <Input
-                placeholder="Er muss 15 Zeichen lang sein"
+                placeholder="Er muss 8 zahlen lang sein"
                 value={value}
                 id="apiKey"
-                maxLength={15}
+                maxLength={8}
                 onChange={(e) => {
-                  setValue(e.currentTarget.value.slice(0, 15));
+                  setValue(e.currentTarget.value.slice(0, 8));
                 }}
               />
             </InputGroup>

backend/services/database.js

@@ -41,7 +41,7 @@ export const getLoanByCodeV2 = async (loan_code) => {
 
 export const changeInSafeStateV2 = async (itemId) => {
   const [result] = await pool.query(
-    "UPDATE items SET inSafe = NOT inSafe WHERE id = ?",
+    "UPDATE items SET in = NOT inSafe WHERE id = ?",
     [itemId]
   );
   if (result.affectedRows > 0) {

backendV2/routes/api/api.database.js

@@ -21,7 +21,7 @@ export const getItemsFromDatabaseV2 = async () => {
 
 export const getLoanByCodeV2 = async (loan_code) => {
   const [result] = await pool.query(
-    "SELECT first_name, returned_date, take_date, lockers FROM loans WHERE loan_code = ?;",
+    "SELECT username, returned_date, take_date, lockers FROM loans WHERE loan_code = ?;",
     [loan_code]
   );
   if (result.length > 0) {
@@ -32,7 +32,7 @@ export const getLoanByCodeV2 = async (loan_code) => {
 
 export const changeInSafeStateV2 = async (itemId) => {
   const [result] = await pool.query(
-    "UPDATE items SET inSafe = NOT inSafe WHERE id = ?",
+    "UPDATE items SET in_safe = NOT in_safe WHERE id = ?",
     [itemId]
   );
   if (result.affectedRows > 0) {
@@ -59,7 +59,7 @@ export const setReturnDateV2 = async (loanCode) => {
     : JSON.parse(items[0].loaned_items_id || "[]");
 
   const [setItemStates] = await pool.query(
-    "UPDATE items SET inSafe = 1, currently_borrowing = NULL, last_borrowed_person = (?) WHERE id IN (?)",
+    "UPDATE items SET in_safe = 1, currently_borrowing = NULL, last_borrowed_person = (?) WHERE id IN (?)",
     [owner[0].username, itemIds]
   );
 
@@ -92,7 +92,7 @@ export const setTakeDateV2 = async (loanCode) => {
     : JSON.parse(items[0].loaned_items_id || "[]");
 
   const [setItemStates] = await pool.query(
-    "UPDATE items SET inSafe = 0, currently_borrowing = (?) WHERE id IN (?)",
+    "UPDATE items SET in_safe = 0, currently_borrowing = (?) WHERE id IN (?)",
     [owner[0].username, itemIds]
   );
 

backendV2/routes/api/api.route.js

@@ -23,25 +23,16 @@ router.get("/items/:key", authenticate, async (req, res) => {
 });
 
 // Route for API to control the safe state of an item
-router.post(
-  "/change-state/:key/:itemId/:state",
-  authenticate,
-  async (req, res) => {
+router.post("/change-state/:key/:itemId", authenticate, async (req, res) => {
   const itemId = req.params.itemId;
-    const state = req.params.state;
 
-    if (state === "1" || state === "0") {
-      const result = await changeInSafeStateV2(itemId, state);
+  const result = await changeInSafeStateV2(itemId);
   if (result.success) {
     res.status(200).json({ data: result.data });
   } else {
     res.status(500).json({ message: "Failed to update item state" });
   }
-    } else {
-      res.status(400).json({ message: "Invalid state value" });
-    }
-  }
-);
+});
 
 // Route for API to get a loan by its code
 router.get(