feat: enhance token handling in removeSelection and saveRow functions

backend/server.js

@@ -8,6 +8,8 @@ import {
   createEntry,
   removeEntries,
   saveRow,
+  resetData,
+  getVitals,
 } from "./services/database.js";
 import { generateToken, authenticate } from "./services/tokenService.js";
 env.config();
@@ -37,8 +39,10 @@ app.post("/lose", async (req, res) => {
 
 app.get("/table-data", authenticate, async (req, res) => {
   const result = await getTableData();
-  if (result.success) {
+  if (result.success && result.data) {
     res.status(200).json(result.data);
+  } else if (result.success && !result.data) {
+    res.status(204).json({ success: true });
   } else {
     res.status(500).json({ success: false });
   }
@@ -87,6 +91,15 @@ app.post("/login", async (req, res) => {
   }
 });
 
+app.delete("/reset-data", authenticate, async (req, res) => {
+  const result = await resetData();
+  if (result.success) {
+    res.status(200).json({ success: true });
+  } else {
+    res.status(400).json({ success: false });
+  }
+});
+
 app.listen(port, () => {
   console.log(`Server is running on port: ${port}`);
 });

backend/services/database.js

@@ -47,8 +47,11 @@ export async function getTableData() {
 
   if (result.length > 0) {
     return { success: true, data: result };
+  } else if (result.entries.length === 0) {
+    return { success: true };
+  } else {
+    return { success: false };
   }
-  return { success: false };
 }
 
 export async function createEntry(data) {
@@ -114,3 +117,12 @@ export async function saveRow(payload) {
     return { success: false };
   }
 }
+
+export async function resetData() {
+  const [result] = await pool.query("DELETE FROM lose");
+  if (result.affectedRows > 0) {
+    return { success: true };
+  } else {
+    return { success: false };
+  }
+}

frontend/src/components/DangerZone.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { CircleX } from "lucide-react";
+import Cookies from "js-cookie";
+import { resetData } from "../utils/tableActions";
+
+type DangerZoneProps = {
+  onClose: () => void;
+};
+
+const DangerZone: React.FC<DangerZoneProps> = ({ onClose }) => {
+  return (
+    <>
+      <div className="fixed inset-0 z-50 flex items-start justify-center pt-24">
+        {/* Backdrop */}
+        <div className="absolute inset-0 bg-gradient-to-br from-black/60 via-black/40 to-rose-900/30 backdrop-blur-md" />
+
+        {/* Dialog Panel */}
+        <div className="relative z-10 w-11/12 max-w-lg rounded-3xl border border-rose-400/30 bg-white/95 p-8 shadow-2xl ring-2 ring-rose-400/20">
+          <div className="flex items-start justify-between gap-4 pb-4 border-b border-zinc-200">
+            <div>
+              <h2 className="text-2xl font-extrabold tracking-tight text-rose-700 mb-1">
+                Datenbank Einstellungen und Vitalwerte
+              </h2>
+              <p className="text-sm text-zinc-500 font-medium">
+                Doppelklick um Befehl auszuführen
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={onClose}
+              className="group rounded-full p-2 text-rose-500 transition hover:bg-rose-100 hover:text-rose-700 active:scale-95 border border-rose-200 shadow-sm"
+              aria-label="Schließen"
+            >
+              <CircleX className="h-7 w-7" strokeWidth={2.5} />
+            </button>
+          </div>
+          <div className="flex flex-col items-center gap-6 pt-8">
+            <button
+              type="button"
+              onDoubleClick={() => {
+                resetData(Cookies.get("token") || "");
+                onClose();
+              }}
+              className="inline-flex items-center gap-2 justify-center rounded-xl bg-rose-800 px-6 py-4 text-base font-bold text-white shadow-lg transition hover:bg-rose-700 active:bg-rose-900 border-2 border-rose-800 focus:outline-none focus:ring-2 focus:ring-rose-500"
+            >
+              <span className="animate-pulse">⚠️</span> Alle Einträge der
+              Tabelle löschen
+            </button>
+            <div className="w-full text-center">
+              <span className="text-xs text-zinc-400">
+                Diese Aktion kann nicht rückgängig gemacht werden.
+              </span>
+            </div>
+          </div>
+          {/* Actions */}
+          {/*   
+          <div className="mt-8 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
+            <button
+              type="button"
+              className="inline-flex justify-center rounded-xl bg-zinc-300 px-5 py-3 text-sm font-bold text-zinc-800 shadow transition hover:bg-zinc-400 active:bg-zinc-500"
+            >
+              Einstellungen Speichern
+            </button>
+          </div>
+          */}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DangerZone;

frontend/src/components/ImportGUI.tsx

@@ -78,6 +78,7 @@ const ImportGUI: React.FC<ImportGUIProps> = ({ onClose, setFiles, files }) => {
               if (files && files.length) {
                 postCSV(files[0]);
               }
+              onClose();
             }}
           >
             Importieren

frontend/src/components/SubHeaderAdmin.tsx

@@ -1,8 +1,10 @@
 import React from "react";
-import { Sheet, WholeWord, Search } from "lucide-react";
+import { Sheet, WholeWord, Search, DatabaseZap } from "lucide-react";
 import { useState } from "react";
 import ImportGUI from "./ImportGUI";
+import Cookies from "js-cookie";
 import { removeSelection } from "../utils/tableActions";
+import DangerZone from "./DangerZone";
 
 type SubHeaderAdminProps = {
   setFiles: (files: File[]) => void;
@@ -19,6 +21,7 @@ const SubHeaderAdmin: React.FC<SubHeaderAdminProps> = ({
   setSearch,
 }) => {
   const [showImport, setShowImport] = useState(false);
+  const [showDanger, setShowDanger] = useState(false);
 
   return (
     <>
@@ -61,7 +64,7 @@ const SubHeaderAdmin: React.FC<SubHeaderAdminProps> = ({
             </button>
             <button
               onClick={() => {
-                removeSelection();
+                removeSelection(Cookies.get("token") || "");
               }}
               type="button"
               className="group inline-flex items-center gap-2 rounded-md bg-rose-600 px-3.5 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-rose-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-500/60 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60"
@@ -72,6 +75,19 @@ const SubHeaderAdmin: React.FC<SubHeaderAdminProps> = ({
               />
               <span className="whitespace-nowrap">Auswahl löschen</span>
             </button>
+            <button
+              onClick={() => {
+                setShowDanger(true);
+              }}
+              type="button"
+              className="group inline-flex items-center gap-2 rounded-md bg-rose-800 px-3.5 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-rose-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-500/60 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60"
+            >
+              <DatabaseZap
+                className="h-4 w-4 shrink-0 text-white/90 transition group-hover:text-white"
+                strokeWidth={1.75}
+              />
+              <span className="whitespace-nowrap">Datenbank Einstellungen</span>
+            </button>
           </div>
         </div>
       </header>
@@ -82,6 +98,10 @@ const SubHeaderAdmin: React.FC<SubHeaderAdminProps> = ({
           files={files}
         />
       )}
+
+      {showDanger && (
+        <DangerZone onClose={() => setShowDanger(false)} />
+      )}
     </>
   );
 };

frontend/src/components/Table.tsx

@@ -76,6 +76,7 @@ const Table: React.FC = () => {
     enabled: !!token,
     queryFn: async () => {
       const data = await getTableData(token);
+
       if (data === null) throw new Error("Fehler beim Laden der Daten.");
       return data as unknown as DataPackage[] | DataPackage; // server may send single object
     },
@@ -401,7 +402,7 @@ const Table: React.FC = () => {
                     />
                   </td>
                   <td className="px-4 py-2 w-12 min-w-[3rem]">
-                    <button onClick={() => saveRow(row)}>
+                    <button onClick={() => saveRow(row, token)}>
                       <Save />
                     </button>
                   </td>

frontend/src/utils/tableActions.ts

@@ -20,19 +20,19 @@ export const rmFromRemove = (losnummer: string) => {
   rawCookies.set("removeArr", JSON.stringify(removeArr));
 };
 
-const token = Cookies.get("token");
+function createHeaders(token: string) {
+  return {
+    "Content-Type": "application/json",
+    Authorization: `Bearer ${token}`,
+  };
+}
 
-const headers = {
+export const removeSelection = (token: string) => {
-  "Content-Type": "application/json",
-  Authorization: `Bearer ${token}`,
-};
-
-export const removeSelection = () => {
   const selection = Cookies.get("removeArr");
   if (selection && selection !== "[]") {
     fetch("http://localhost:8002/remove-entries", {
       method: "DELETE",
-      headers: headers,
+      headers: createHeaders(token),
       body: `{
       "losnummern": ${selection}
       }`,
@@ -49,10 +49,10 @@ export const removeSelection = () => {
   }
 };
 
-export const saveRow = (data: any) => {
+export const saveRow = (data: any, token: string) => {
   fetch("http://localhost:8002/save-row", {
     method: "PUT",
-    headers: headers,
+    headers: createHeaders(token),
     body: JSON.stringify(data),
   }).then((response) => {
     if (response.ok) {
@@ -62,3 +62,18 @@ export const saveRow = (data: any) => {
     }
   });
 };
+
+export const resetData = (token: string) => {
+  fetch("http://localhost:8002/reset-data", {
+    method: "DELETE",
+    headers: createHeaders(token),
+  }).then((response) => {
+    if (response.ok) {
+      myToast("Daten erfolgreich zurückgesetzt.", "success");
+      localStorage.removeItem("tableData");
+      queryClient.invalidateQueries({ queryKey: ["table-data"] });
+    } else {
+      myToast("Fehler beim Zurücksetzen der Daten.", "error");
+    }
+  });
+};

frontend/src/utils/userHandler.ts

@@ -7,7 +7,6 @@ export const logoutAdmin = () => {
   myToast("Logged out successfully!", "success");
 };
 
-
 // Fetch table data and store it in localStorage. Returns the parsed data or null on failure.
 export const getTableData = async (token: string) => {
   try {
@@ -21,13 +20,17 @@ export const getTableData = async (token: string) => {
     if (response.status === 401) {
       myToast("Session expired. Please log in again.", "error");
       logoutAdmin();
-      return null;
+      return [];
     }
 
     if (!response.ok) {
       const text = await response.text().catch(() => "");
       myToast(`Error fetching table data! ${text}`, "error");
-      return null;
+      return [];
+    }
+
+    if (response.status === 204) {
+      return [];
     }
 
     // Ensure we parse JSON