From f8e29dca10c6770820ef9a4cfb3d5af3e35d15ed Mon Sep 17 00:00:00 2001 From: Theis Gaedigk Date: Sun, 26 Apr 2026 22:21:00 +0200 Subject: [PATCH] improved loan tabel on admin panel --- admin/src/Layout/Dashboard.tsx | 4 +- admin/src/components/ItemTable.tsx | 412 ++++++++++++++++------------- admin/src/components/LoanTable.tsx | 208 +++++++++------ 3 files changed, 357 insertions(+), 267 deletions(-) diff --git a/admin/src/Layout/Dashboard.tsx b/admin/src/Layout/Dashboard.tsx index b0f830d..352b645 100644 --- a/admin/src/Layout/Dashboard.tsx +++ b/admin/src/Layout/Dashboard.tsx @@ -47,7 +47,7 @@ const Dashboard: React.FC = ({ onLogout }) => { viewAPI={() => setActiveView("API")} viewConfig={() => setActiveView("Server Konfiguration")} /> - + = ({ onLogout }) => { - + {activeView === "" && ( { const handleItemNameChange = (id: number, value: string) => { setItems((prev) => - prev.map((it) => (it.id === id ? { ...it, item_name: value } : it)) + prev.map((it) => (it.id === id ? { ...it, item_name: value } : it)), ); }; const handleCanBorrowRoleChange = (id: number, value: string) => { setItems((prev) => - prev.map((it) => (it.id === id ? { ...it, can_borrow_role: value } : it)) + prev.map((it) => (it.id === id ? { ...it, can_borrow_role: value } : it)), ); }; const handleLockerNumberChange = (id: number, value: string) => { setItems((prev) => - prev.map((it) => (it.id === id ? { ...it, safe_nr: value } : it)) + prev.map((it) => (it.id === id ? { ...it, safe_nr: value } : it)), ); }; const handleDoorKeyChange = (id: number, value: string) => { setItems((prev) => - prev.map((it) => (it.id === id ? { ...it, door_key: value } : it)) + prev.map((it) => (it.id === id ? { ...it, door_key: value } : it)), ); }; const setError = ( status: "error" | "success", message: string, - description: string + description: string, ) => { setIsError(false); setErrorStatus(status); @@ -102,7 +102,7 @@ const ItemTable: React.FC = () => { headers: { Authorization: `Bearer ${Cookies.get("token")}`, }, - } + }, ); const data = await response.json(); return data; @@ -193,185 +193,229 @@ const ItemTable: React.FC = () => { {/* make table fill available width, like UserTable */} {!isLoading && ( - - - - - # - - - Gegenstand - - - Ausleih Berechtigung - - - Im Schließfach - - - Schließfachnummer - - - Schlüssel - - - Eintrag erstellt am - - - Eintrag aktualisiert am - - - LaP * - - - Dav ** - - - Aktionen - - - - - {items.map((item) => ( - - {item.id} - - - handleItemNameChange(item.id, e.target.value) - } - value={item.item_name} - /> - - - - handleCanBorrowRoleChange(item.id, e.target.value) - } - value={item.can_borrow_role} - /> - - - - - - - handleLockerNumberChange(item.id, e.target.value) - } - value={item.safe_nr} - /> - - - - handleDoorKeyChange(item.id, e.target.value) - } - value={item.door_key} - /> - - {formatDateTime(item.entry_created_at)} - {formatDateTime(item.entry_updated_at)} - {item.last_borrowed_person} - {item.currently_borrowing} - - - - + + + + + + # + + + Gegenstand + + + Ausleih Berechtigung + + + Im Schließfach + + + Schließfachnummer + + + Schlüssel + + + Eintrag erstellt am + + + Eintrag aktualisiert am + + + LaP * + + + Dav ** + + + Aktionen + - ))} - - + + + {items.map((item) => ( + + {item.id} + + + handleItemNameChange(item.id, e.target.value) + } + value={item.item_name} + /> + + + + handleCanBorrowRoleChange(item.id, e.target.value) + } + value={item.can_borrow_role} + /> + + + + + + + handleLockerNumberChange(item.id, e.target.value) + } + value={item.safe_nr} + /> + + + + handleDoorKeyChange(item.id, e.target.value) + } + value={item.door_key} + /> + + + {formatDateTime(item.entry_created_at)} + + + {formatDateTime(item.entry_updated_at)} + + {item.last_borrowed_person} + {item.currently_borrowing} + + + + + + ))} + + + )} * LaP = Letzte ausleihende Person ** Dav = Derzeit ausgeliehen von diff --git a/admin/src/components/LoanTable.tsx b/admin/src/components/LoanTable.tsx index db7a735..3c6e51a 100644 --- a/admin/src/components/LoanTable.tsx +++ b/admin/src/components/LoanTable.tsx @@ -1,5 +1,6 @@ import React from "react"; import { + Box, Table, Spinner, Text, @@ -31,7 +32,7 @@ const LoanTable: React.FC = () => { const setError = ( status: "error" | "success", message: string, - description: string + description: string, ) => { setIsError(false); setErrorStatus(status); @@ -65,7 +66,7 @@ const LoanTable: React.FC = () => { headers: { Authorization: `Bearer ${Cookies.get("token")}`, }, - } + }, ); const data = await response.json(); return data; @@ -83,7 +84,7 @@ const LoanTable: React.FC = () => { }, [reload]); return ( - <> + {/* Action toolbar */} { )} {!isLoading && ( - - - - - # - - - Besitzer - - - Ausleih code - - - Startdatum - - - Enddatum - - - Ausleihdatum - - - Rückgabedatum - - - Erstellt am - - - Ausgeliehene Artikel - - - Notiz - - - Aktionen - - - - - {items.map((item) => ( - - {item.id} - {item.username} - - {item.loan_code} - - {formatDateTime(item.start_date)} - {formatDateTime(item.end_date)} - {formatDateTime(item.take_date)} - {formatDateTime(item.returned_date)} - {formatDateTime(item.created_at)} - {item.loaned_items_name.join(", ")} - {item.note} - - - + + + + + + # + + + Besitzer + + + Ausleihcode + + + Startdatum + + + Enddatum + + + Ausleihdatum + + + Rückgabedatum + + + Erstellt am + + + Ausgeliehene Artikel + + + Notiz + + + Aktionen + - ))} - - + + + {items.map((item) => ( + + {item.id} + {item.username} + + {item.loan_code} + + {formatDateTime(item.start_date)} + {formatDateTime(item.end_date)} + {formatDateTime(item.take_date)} + {formatDateTime(item.returned_date)} + {formatDateTime(item.created_at)} + {item.loaned_items_name.join(", ")} + {item.note} + + + + + ))} + + + )} - + ); };