Merge branch 'dev' into debian12

2025-08-20 13:18:01 +02:00
parent 3ee2f6b670 c33f3e1101
commit d5296bd3fa
10 changed files with 156 additions and 128 deletions
--- a/Docs/backend_API_docs/README.md
+++ b/Docs/backend_API_docs/README.md
@@ -24,6 +24,16 @@ Example: `/apiV2/items/{ADMIN_ID}`

 ---

+## URL
+
+- The frontend is currently running on `https://insta.the1s.de`.
+
+- The backend is currently running on `https://backend.insta.the1s.de`.
+
+You can see the status of this and all my other services at `https://status.the1s.de`.
+
+---
+
 ## Current endpoints

 ### 1. Get All Items
@@ -81,9 +91,9 @@ POST /apiV2/controlInSafe/your_admin_key/5/0
 {}
 ```

-*An empty object means, that the operation was successful and no further information is returned.*
+_An empty object means, that the operation was successful and no further information is returned._

-*You also get an http 2xx status code.*
+_You also get an http 2xx status code._

 ---

@@ -107,9 +117,9 @@ POST /apiV2/setReturnDate/your_admin_key/123456
 {}
 ```

-*An empty object means, that the operation was successful and no further information is returned.*
+_An empty object means, that the operation was successful and no further information is returned._

-*You also get an http 2xx status code.*
+_You also get an http 2xx status code._

 ---

@@ -133,9 +143,9 @@ POST /apiV2/setTakeDate/your_admin_key/123456
 {}
 ```

-*An empty object means, that the operation was successful and no further information is returned.*
+_An empty object means, that the operation was successful and no further information is returned._

-*You also get an http 2xx status code.*
+_You also get an http 2xx status code._

 ---

--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,7 +9,7 @@
      "version": "0.0.0",
      "dependencies": {
        "@tailwindcss/vite": "^4.1.11",
-        "@tanstack/react-query": "^5.85.0",
+        "@tanstack/react-query": "^5.85.5",
        "js-cookie": "^3.0.5",
        "lucide-react": "^0.539.0",
        "primeicons": "^7.0.0",
@@ -1836,9 +1836,9 @@
      }
    },
    "node_modules/@tanstack/query-core": {
-      "version": "5.85.3",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.85.3.tgz",
-      "integrity": "sha512-9Ne4USX83nHmRuEYs78LW+3lFEEO2hBDHu7mrdIgAFx5Zcrs7ker3n/i8p4kf6OgKExmaDN5oR0efRD7i2J0DQ==",
+      "version": "5.85.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.85.5.tgz",
+      "integrity": "sha512-KO0WTob4JEApv69iYp1eGvfMSUkgw//IpMnq+//cORBzXf0smyRwPLrUvEe5qtAEGjwZTXrjxg+oJNP/C00t6w==",
      "license": "MIT",
      "funding": {
        "type": "github",
@@ -1846,12 +1846,12 @@
      }
    },
    "node_modules/@tanstack/react-query": {
-      "version": "5.85.3",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.85.3.tgz",
-      "integrity": "sha512-AqU8TvNh5GVIE8I+TUU0noryBRy7gOY0XhSayVXmOPll4UkZeLWKDwi0rtWOZbwLRCbyxorfJ5DIjDqE7GXpcQ==",
+      "version": "5.85.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.85.5.tgz",
+      "integrity": "sha512-/X4EFNcnPiSs8wM2v+b6DqS5mmGeuJQvxBglmDxl6ZQb5V26ouD2SJYAcC3VjbNwqhY2zjxVD15rDA5nGbMn3A==",
      "license": "MIT",
      "dependencies": {
-        "@tanstack/query-core": "5.85.3"
+        "@tanstack/query-core": "5.85.5"
      },
      "funding": {
        "type": "github",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,7 +11,7 @@
  },
  "dependencies": {
    "@tailwindcss/vite": "^4.1.11",
-    "@tanstack/react-query": "^5.85.0",
+    "@tanstack/react-query": "^5.85.5",
    "js-cookie": "^3.0.5",
    "lucide-react": "^0.539.0",
    "primeicons": "^7.0.0",
--- a/frontend/src/components/Form4.tsx
+++ b/frontend/src/components/Form4.tsx
@@ -1,6 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { Trash, ArrowLeftRight } from "lucide-react";
 import { handleDeleteLoan } from "../utils/userHandler";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import Cookies from "js-cookie";
+import { queryClient } from "../utils/queryClient";

 type Loan = {
  id: number;
@@ -22,40 +25,39 @@ const formatDate = (iso: string | null) => {
  return d.toLocaleString("de-DE", { dateStyle: "short", timeStyle: "short" });
 };

-const readUserLoansFromStorage = (): Loan[] => {
-  const raw = localStorage.getItem("userLoans");
-  if (!raw || raw === '"No loans found for this user"') return [];
-  try {
-    const parsed = JSON.parse(raw);
-    return Array.isArray(parsed) ? (parsed as Loan[]) : [];
-  } catch {
-    return [];
-  }
-};
+async function fetchUserLoans(): Promise<Loan[]> {
+  const res = await fetch("http://localhost:8002/api/userLoans", {
+    method: "GET",
+    headers: { Authorization: `Bearer ${Cookies.get("token") || ""}` },
+  });
+  if (!res.ok) throw new Error("Failed to fetch user loans");
+  const data = await res.json();
+  if (data === "No loans found for this user") return [];
+  return Array.isArray(data) ? (data as Loan[]) : [];
+}

 const Form4: React.FC = () => {
-  const [userLoans, setUserLoans] = useState<Loan[]>(() =>
-    readUserLoansFromStorage()
-  );
+  const { data: userLoans = [], isFetching } = useQuery({
+    queryKey: ["userLoans"],
+    queryFn: fetchUserLoans,
+  });

-  useEffect(() => {
-    const onStorage = (e: StorageEvent) => {
-      if (e.key === "userLoans") {
-        setUserLoans(readUserLoansFromStorage());
-      }
-    };
-    window.addEventListener("storage", onStorage);
-    return () => window.removeEventListener("storage", onStorage);
-  }, []);
+  const deleteMutation = useMutation({
+    mutationFn: (loanID: number) => handleDeleteLoan(loanID),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["userLoans"] });
+    },
+  });

-  const onDelete = async (loanID: number) => {
-    const ok = await handleDeleteLoan(loanID);
-    if (ok) {
-      setUserLoans((prev) =>
-        prev.filter((l) => Number(l.id) !== Number(loanID))
-      );
-    }
-  };
+  const onDelete = (loanID: number) => deleteMutation.mutate(loanID);
+
+  if (isFetching) {
+    return (
+      <div className="rounded-xl border border-slate-200 bg-white p-6 text-center text-slate-600 shadow-sm">
+        <p>Lade Ausleihen…</p>
+      </div>
+    );
+  }

  if (userLoans.length === 0) {
    return (
--- a/frontend/src/components/Object.tsx
+++ b/frontend/src/components/Object.tsx
@@ -8,7 +8,7 @@ type ObjectProps = {
 const Object: React.FC<ObjectProps> = ({ title, description }) => {
  return (
    <div className="min-w-0">
-      <h3 className="text-sm font-semibold text-slate-900 truncate">{title}</h3>
+      <h3 className="text-sm font-semibold text-slate-900">{title}</h3>
      <p className="text-xs text-slate-600 line-clamp-2">{description}</p>
    </div>
  );
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Object from "./Object";
+import { MonitorSmartphone } from "lucide-react";
 import { ALL_ITEMS_UPDATED_EVENT } from "../utils/fetchData";

 const Sidebar: React.FC = () => {
@@ -21,74 +22,72 @@ const Sidebar: React.FC = () => {
  const sorted = [...items].sort((a, b) => Number(a.inSafe) - Number(b.inSafe));

  return (
-    <aside className="w-full md:w-72 md:h-[calc(100vh-2rem)] md:sticky md:top-4 overflow-y-auto bg-white rounded-2xl p-3 sm:p-4 ring-1 ring-slate-200 shadow-sm">
-      <h2 className="text-lg sm:text-xl font-bold mb-3 text-slate-900 tracking-tight flex items-center justify-between">
-        <span className="flex items-center gap-2">
-          <svg
-            className="w-5 h-5 text-slate-700"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth={2}
-            viewBox="0 0 24 24"
-            aria-hidden="true"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M16.5 7.5V4.75A2.25 2.25 0 0 0 14.25 2.5h-4.5A2.25 2.25 0 0 0 7.5 4.75V7.5m9 0h-9m9 0v11.75A2.25 2.25 0 0 1 14.25 21.5h-4.5A2.25 2.25 0 0 1 7.5 19.25V7.5m9 0h-9"
-            />
-          </svg>
-          Geräte Übersicht
+    <aside className="w-full md:w-72 md:h-full flex flex-col rounded-2xl pt-0 px-3 pb-3 sm:pt-0 sm:px-4 sm:pb-4 bg-gradient-to-b from-white to-slate-50 ring-1 ring-slate-200/70 shadow-md overflow-hidden">
+      <div className="sticky top-0 z-10 -mx-3 sm:-mx-4 px-3 sm:px-4 py-2.5 bg-white/85 backdrop-blur supports-[backdrop-filter]:backdrop-blur border-b border-slate-200/70 text-lg sm:text-xl font-bold mb-3 text-slate-900 tracking-tight flex items-center justify-between gap-2 rounded-t-2xl">
+        <span className="flex items-center gap-2 min-w-0 flex-1 truncate">
+          <MonitorSmartphone className="w-5 h-5 text-slate-700 shrink-0" />
+          <span className="truncate">Geräte</span>
        </span>
        {outCount > 0 && (
-          <span className="text-[10px] sm:text-xs px-2 py-0.5 rounded-full bg-amber-100 text-amber-700">
+          <span className="inline-flex items-center gap-1 whitespace-nowrap tabular-nums text-[10px] sm:text-xs px-2.5 py-1 rounded-full bg-amber-50 text-amber-700 ring-1 ring-amber-200/70 shadow-sm font-medium">
            {outCount} außerhalb
          </span>
        )}
-      </h2>
+      </div>

-      {/* Mobile: horizontal scroll, Desktop: vertical list */}
-      <div className="flex gap-3 overflow-x-auto snap-x snap-mandatory pb-1 -mr-1 pr-2 md:block md:space-y-3 md:pr-1">
-        {sorted.map((item: any) => (
-          <div
-            key={item.item_name}
-            className={`bg-white rounded-xl p-3 sm:p-4 ring-1 ring-slate-200 hover:ring-slate-300 transition ${
-              item.inSafe ? "" : "ring-red-200"
-            } shrink-0 snap-start min-w-[240px] md:min-w-0`}
-          >
-            <div className="flex items-start gap-3">
-              <span className="relative mt-0.5 inline-flex" aria-hidden="true">
-                {!item.inSafe && (
-                  <span className="absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75 animate-ping"></span>
-                )}
+      {/* Scroll area */}
+      <div className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden">
+        <div className="flex flex-col gap-3 md:space-y-3">
+          {sorted.map((item: any) => (
+            <div
+              key={item.item_name}
+              className={`group relative w-full bg-white rounded-xl p-3 sm:p-4 ring-1 ring-slate-200/70 duration-200 hover:shadow-md focus-within:ring-slate-300 ${
+                item.inSafe
+                  ? "border-l-4 border-emerald-400"
+                  : "border-l-4 border-red-400 ring-red-200/60 bg-red-50/40"
+              }`}
+            >
+              <div className="flex items-start gap-3">
                <span
-                  className={`inline-block w-3 h-3 rounded-full ${
-                    item.inSafe ? "bg-emerald-500" : "bg-red-500"
-                  }`}
-                  title={
-                    item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
-                  }
-                  aria-label={
+                  className="relative mt-0.5 inline-flex"
+                  aria-hidden="true"
+                >
+                  {!item.inSafe && (
+                    <span className="absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75 animate-ping"></span>
+                  )}
+                  <span
+                    className={`inline-block w-3 h-3 rounded-full ring-2 ring-white ${
+                      item.inSafe ? "bg-emerald-500" : "bg-red-500"
+                    }`}
+                    title={
+                      item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
+                    }
+                    aria-label={
+                      item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
+                    }
+                  />
+                </span>
+                <Object
+                  title={item.item_name}
+                  description={
                    item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
                  }
                />
-              </span>
-              <Object
-                title={item.item_name}
-                description={
-                  item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
-                }
-              />
+              </div>
            </div>
-          </div>
-        ))}
-      </div>
+          ))}
+        </div>

-      <div className="mt-3 text-[10px] sm:text-xs text-slate-500 items-center gap-4 hidden md:flex">
-        <span className="inline-block w-3 h-3 bg-emerald-500 rounded-full"></span>
-        Verfügbar
-        <span className="inline-block w-3 h-3 bg-red-500 rounded-full"></span>
-        Außerhalb des Schließfachs
+        <div className="mt-4 pt-3 border-t border-slate-200/70 text-[10px] sm:text-xs text-slate-500 items-center gap-4 hidden md:flex">
+          <span className="inline-flex items-center gap-1">
+            <span className="inline-block w-3 h-3 bg-emerald-500 rounded-full ring-2 ring-white shadow-sm"></span>
+            Verfügbar
+          </span>
+          <span className="inline-flex items-center gap-1">
+            <span className="inline-block w-3 h-3 bg-red-500 rounded-full ring-2 ring-white shadow-sm"></span>
+            Außerhalb des Schließfachs
+          </span>
+        </div>
      </div>
    </aside>
  );
--- a/frontend/src/layout/Layout.tsx
+++ b/frontend/src/layout/Layout.tsx
@@ -10,24 +10,20 @@ type LayoutProps = {

 const Layout: React.FC<LayoutProps> = ({ children, onLogout }) => {
  return (
-    <div className="min-h-screen flex bg-slate-50 text-slate-800">
+    <div className="h-screen overflow-hidden flex bg-slate-50 text-slate-800">
      {/* Main */}
-      <main className="flex-1 flex flex-col items-center px-3 sm:px-5 py-4 sm:py-8">
+      <main className="flex-1 min-h-0 overflow-hidden flex flex-col items-center px-3 sm:px-5 py-4 sm:py-8">
        {/* Sidebar on mobile appears inline on top; on desktop it's a sticky column */}
-        <div className="w-full max-w-5xl md:flex md:gap-6">
-          <div className="block md:hidden mb-3">
+        <div className="w-full max-w-5xl flex flex-col gap-3 md:flex-row md:gap-6 md:items-stretch min-h-0 h-full">
+          <div className="hidden md:flex md:flex-col md:shrink-0 md:w-72 md:min-h-0 md:h-full">
            <Sidebar />
          </div>

-          <div className="hidden md:block md:shrink-0 md:w-72">
-            <Sidebar />
-          </div>
-
-          <div className="flex-1 min-w-0">
+          <div className="flex-1 min-w-0 min-h-0 h-full flex flex-col overflow-hidden">
            <div className="w-full">
              <Header onLogout={onLogout} />
            </div>
-            <div className="w-full bg-white shadow-md md:shadow-lg rounded-2xl p-4 sm:p-6 ring-1 ring-slate-200">
+            <div className="w-full bg-white shadow-md md:shadow-lg rounded-2xl p-4 sm:p-6 ring-1 ring-slate-200 flex-1 min-h-0 overflow-y-auto">
              {children}
            </div>
          </div>
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -4,22 +4,26 @@ import "./index.css";
 import App from "./App.tsx";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { queryClient } from "./utils/queryClient";

 createRoot(document.getElementById("root")!).render(
  <StrictMode>
-    <App />
-    <ToastContainer
-      position="top-right"
-      autoClose={3000}
-      hideProgressBar={false}
-      newestOnTop
-      closeOnClick
-      rtl={false}
-      pauseOnFocusLoss={false}
-      draggable
-      pauseOnHover
-      theme="colored"
-      style={{ zIndex: 9999 }}
-    />
+    <QueryClientProvider client={queryClient}>
+      <App />
+      <ToastContainer
+        position="top-right"
+        autoClose={3000}
+        hideProgressBar={false}
+        newestOnTop
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss={false}
+        draggable
+        pauseOnHover
+        theme="colored"
+        style={{ zIndex: 9999 }}
+      />
+    </QueryClientProvider>
  </StrictMode>
 );
--- a/frontend/src/utils/queryClient.ts
+++ b/frontend/src/utils/queryClient.ts
@@ -0,0 +1,11 @@
+import { QueryClient } from "@tanstack/react-query";
+
+// Central QueryClient instance so utilities (e.g. file upload) can invalidate queries.
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 1,
+    },
+  },
+});
--- a/frontend/src/utils/userHandler.ts
+++ b/frontend/src/utils/userHandler.ts
@@ -1,5 +1,6 @@
 import { myToast } from "./toastify";
 import Cookies from "js-cookie";
+import { queryClient } from "./queryClient";

 export const handleDeleteLoan = async (loanID: number): Promise<boolean> => {
  try {
@@ -92,5 +93,10 @@ export const createLoan = async (startDate: string, endDate: string) => {
  removeArr = [];
  Cookies.set("removeArr", "[]");
  myToast("Ausleihe erfolgreich erstellt!", "success");
+
+  queryClient.invalidateQueries({ queryKey: ["userLoans"] });
+  queryClient.invalidateQueries({ queryKey: ["allLoans"] });
+  queryClient.invalidateQueries({ queryKey: ["borrowableItems"] });
+
  return true;
 };