Matthias-Claudius-Schule/borrow-system
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update UI components and styles for improved user experience

Browse Source 
- Removed obsolete PDF file from the mock directory.
- Updated index.html to change the favicon and title for the application.
- Deleted unused vite.svg file and replaced it with shapes.svg.
- Enhanced App component layout and styling.
- Refined Form1 component with better spacing and updated styles.
- Improved Form2 component to enhance item selection UI and responsiveness.
- Updated Form4 component to improve loan display and interaction.
- Enhanced Header component styling for better visibility.
- Refined LoginForm component for a more modern look.
- Updated Object component styles for better text visibility.
- Improved Sidebar component layout and item display.
- Updated global CSS for better touch target improvements.
- Enhanced Layout component for better responsiveness and structure.
- Updated main.tsx to change toast notification theme.
- Updated tailwind.config.js to include index.html for Tailwind CSS processing.
This commit is contained in:
Theis Gaedigk
2025-08-19 23:32:14 +02:00
parent 64bfbecd84
commit 2480bfab89
16 changed files with 285 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
Mock/Frames.pdf
View File

Binary file not shown.

6
frontend/index.html
View File

@@ -1,10 +1,10 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/shapes.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<title>Ausleihsystem</title>
</head>
<body>
<div id="root"></div>

1
frontend/public/shapes.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shapes-icon lucide-shapes"><path d="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z"/><rect x="3" y="14" width="7" height="7" rx="1"/><circle cx="17.5" cy="17.5" r="3.5"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 420 B

1
frontend/public/vite.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

8
frontend/src/App.tsx
View File

@@ -22,14 +22,12 @@ function App() {
localStorage.setItem("borrowableItems", JSON.stringify([]));
}, []);
// Mock flow without real logic: show the three sections stacked for design preview
const handleLogout = () => {
Cookies.remove("token");
localStorage.removeItem("allItems");
localStorage.removeItem("allLoans");
localStorage.removeItem("userLoans");
localStorage.removeItem("borrowableItems");
// Let listeners refresh from empty state
window.dispatchEvent(new Event(ALL_ITEMS_UPDATED_EVENT));
myToast("Logged out successfully!", "success");
setIsLoggedIn(false);
@@ -37,11 +35,11 @@ function App() {
return isLoggedIn ? (
<Layout onLogout={handleLogout}>
<div className="space-y-10">
<div className="space-y-6">
<Form1 />
<div className="h-px bg-blue-100" />
<div className="h-px bg-slate-200" />
<Form2 />
<div className="h-px bg-blue-100" />
<div className="h-px bg-slate-200" />
<Form4 />
</div>
</Layout>

67
frontend/src/components/Form1.tsx
View File

@@ -4,10 +4,12 @@ import { getBorrowableItems } from "../utils/fetchData";
const Form1: React.FC = () => {
return (
<div className="space-y-6">
<h2 className="text-xl font-bold text-blue-700">1. Zeitraum wählen</h2>
<div className="space-y-4">
<h2 className="text-lg sm:text-xl font-bold text-slate-900">
1. Zeitraum wählen
</h2>
<form
className="space-y-4"
className="space-y-3"
onSubmit={(e) => {
e.preventDefault();
const form = e.currentTarget as HTMLFormElement;
@@ -17,40 +19,41 @@ const Form1: React.FC = () => {
Cookies.set("startDate", start);
Cookies.set("endDate", end);
getBorrowableItems();
console.log("Zeitraum erfolgreich gesetzt!");
}}
>
<div>
<label
htmlFor="startDate"
className="block text-sm font-medium text-blue-800 mb-1"
>
Start
</label>
<input
type="datetime-local"
id="startDate"
name="startDate"
className="w-full border border-blue-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:outline-none bg-white/70"
/>
</div>
<div>
<label
htmlFor="endDate"
className="block text-sm font-medium text-blue-800 mb-1"
>
Ende
</label>
<input
type="datetime-local"
id="endDate"
name="endDate"
className="w-full border border-blue-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:outline-none bg-white/70"
/>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div>
<label
htmlFor="startDate"
className="block text-sm font-medium text-slate-700 mb-1"
>
Start
</label>
<input
type="datetime-local"
id="startDate"
name="startDate"
className="w-full border border-slate-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-indigo-500 focus:outline-none bg-white"
/>
</div>
<div>
<label
htmlFor="endDate"
className="block text-sm font-medium text-slate-700 mb-1"
>
Ende
</label>
<input
type="datetime-local"
id="endDate"
name="endDate"
className="w-full border border-slate-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-indigo-500 focus:outline-none bg-white"
/>
</div>
</div>
<button
type="submit"
className="w-full bg-gradient-to-r from-blue-600 to-blue-400 hover:from-blue-700 hover:to-blue-500 text-white font-bold py-2 px-4 rounded-xl shadow transition"
className="w-full bg-indigo-600 text-white font-bold py-2.5 px-4 rounded-lg shadow hover:bg-indigo-700 transition"
>
Verfügbare Gegenstände anzeigen
</button>

117
frontend/src/components/Form2.tsx
View File

@@ -1,7 +1,6 @@
import React from "react";
import Cookies from "js-cookie";
import { createLoan } from "../utils/userHandler";
import { addToRemove, rmFromRemove } from "../utils/userHandler";
import { createLoan, addToRemove, rmFromRemove } from "../utils/userHandler";
import { BORROWABLE_ITEMS_UPDATED_EVENT } from "../utils/fetchData";
interface BorrowItem {
@@ -59,16 +58,13 @@ function useBorrowableItems() {
}, []);
React.useEffect(() => {
// Initial read
readFromStorage();
// Cross-tab updates
const onStorage = (e: StorageEvent) => {
if (e.key === LOCAL_STORAGE_KEY) readFromStorage();
};
window.addEventListener("storage", onStorage);
// Same-tab updates via Custom Event
const onBorrowableUpdated = () => readFromStorage();
window.addEventListener(
BORROWABLE_ITEMS_UPDATED_EVENT,
@@ -91,58 +87,85 @@ const Form2: React.FC = () => {
const items = useBorrowableItems();
return (
<div className="space-y-6">
<h2 className="text-xl font-bold text-blue-700">
<div className="space-y-4">
<h2 className="text-lg sm:text-xl font-bold text-slate-900">
2. Gegenstand auswählen
</h2>
{items.length === 0 ? (
<div className="text-red-600 font-medium text-center bg-red-50 border border-red-200 rounded-xl p-4">
<div className="text-slate-700 text-center bg-slate-100 border border-slate-200 rounded-xl p-4">
Keine Gegenstände verfügbar für diesen Zeitraum.
</div>
) : (
<div className="overflow-x-auto rounded-xl border border-blue-100 shadow-sm bg-white/80">
<table className="min-w-full divide-y divide-blue-100">
<thead className="bg-blue-50/60">
<tr>
<th className="px-4 py-2 text-left text-xs font-semibold text-blue-700">
Gegenstand
</th>
<th className="px-4 py-2 text-left text-xs font-semibold text-blue-700">
<input type="checkbox" className="invisible" />
</th>
</tr>
</thead>
<tbody className="divide-y divide-blue-50">
{items.map((item) => (
<tr
key={item.id}
className="hover:bg-blue-50/40 transition-colors"
>
<td className="px-4 py-2 text-sm font-medium text-blue-900">
<>
{/* Mobile: card list */}
<div className="sm:hidden space-y-2">
{items.map((item) => (
<label
key={item.id}
htmlFor={`item-${item.id}`}
className="flex items-center justify-between gap-3 p-3 rounded-lg border border-slate-200 bg-white shadow-sm"
>
<div className="min-w-0">
<div className="text-sm font-medium text-slate-900 truncate">
{item.item_name}
</td>
<td className="px-4 py-2 text-sm text-blue-700">
<input
type="checkbox"
onChange={(e) => {
if (e.target.checked) {
addToRemove(item.id);
} else {
rmFromRemove(item.id);
}
}}
id={`item-${item.id}`}
/>
</td>
</div>
<div className="text-xs text-slate-500">
{item.inSafe ? "Verfügbar" : "Nicht im Schließfach"}
</div>
</div>
<input
type="checkbox"
id={`item-${item.id}`}
onChange={(e) => {
if (e.target.checked) addToRemove(item.id);
else rmFromRemove(item.id);
}}
className="h-5 w-5 accent-indigo-600"
/>
</label>
))}
</div>
{/* Desktop: table */}
<div className="hidden sm:block overflow-x-auto rounded-xl border border-slate-200 shadow-sm bg-white">
<table className="min-w-full divide-y divide-slate-200">
<thead className="bg-slate-50">
<tr>
<th className="px-4 py-2 text-left text-xs font-semibold text-slate-700">
Gegenstand
</th>
<th className="px-4 py-2 text-left text-xs font-semibold text-slate-700">
<input type="checkbox" className="invisible" />
</th>
</tr>
))}
</tbody>
</table>
</div>
</thead>
<tbody className="divide-y divide-slate-100">
{items.map((item) => (
<tr key={item.id} className="hover:bg-slate-50">
<td className="px-4 py-2 text-sm font-medium text-slate-900">
{item.item_name}
</td>
<td className="px-4 py-2 text-sm text-slate-700 text-right">
<input
type="checkbox"
onChange={(e) => {
if (e.target.checked) addToRemove(item.id);
else rmFromRemove(item.id);
}}
id={`item-${item.id}`}
className="h-4 w-4 accent-indigo-600"
/>
</td>
</tr>
))}
</tbody>
</table>
</div>
</>
)}
<div className="flex flex-col sm:flex-row gap-3 pt-2">
<div className="flex flex-col sm:flex-row gap-3 pt-1">
<button
onClick={() => {
createLoan(
@@ -151,7 +174,7 @@ const Form2: React.FC = () => {
);
}}
type="button"
className="flex-1 sm:flex-none sm:w-40 bg-gradient-to-r from-blue-600 to-blue-400 hover:from-blue-700 hover:to-blue-500 text-white font-bold py-2 px-4 rounded-xl shadow transition"
className="w-full sm:w-44 bg-indigo-600 text-white font-bold py-2.5 px-4 rounded-lg shadow hover:bg-indigo-700 transition"
>
Ausleihen
</button>

134
frontend/src/components/Form4.tsx
View File

@@ -1,5 +1,4 @@
import React, { useEffect, useState } from "react";
import { Trash, ArrowLeftRight } from "lucide-react";
import { handleDeleteLoan } from "../utils/userHandler";
type Loan = {
@@ -33,12 +32,27 @@ const readUserLoansFromStorage = (): Loan[] => {
}
};
const TrashIcon = (props: React.SVGProps<SVGSVGElement>) => (
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
{...props}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6 7h12M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2m1 0v12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V7m3 4v6m4-6v6"
/>
</svg>
);
const Form4: React.FC = () => {
const [userLoans, setUserLoans] = useState<Loan[]>(() =>
readUserLoansFromStorage()
);
// Keep in sync if localStorage changes (e.g., other tabs or parts of the app)
useEffect(() => {
const onStorage = (e: StorageEvent) => {
if (e.key === "userLoans") {
@@ -60,7 +74,7 @@ const Form4: React.FC = () => {
if (userLoans.length === 0) {
return (
<div className="rounded-xl border border-gray-200 bg-white p-6 text-center text-gray-600 shadow-sm">
<div className="rounded-xl border border-slate-200 bg-white p-6 text-center text-slate-600 shadow-sm">
<p>Keine Ausleihen gefunden.</p>
</div>
);
@@ -68,71 +82,117 @@ const Form4: React.FC = () => {
return (
<div className="space-y-3">
<p className="text-lg font-semibold tracking-tight text-gray-900">
<p className="text-lg font-semibold tracking-tight text-slate-900">
Meine Ausleihen
</p>
<p className="text-sm text-gray-600">
Wenn du eine Ausleihe ändern oder löschen möchtest, klicke auf das
Papierkorb-Symbol.
<p className="text-sm text-slate-600">
Tippe auf das Papierkorb-Symbol, um eine Ausleihe zu löschen.
</p>
<div className="rounded-xl border border-gray-200 bg-white shadow-sm">
{/* Mobile: cards */}
<div className="space-y-2 sm:hidden">
{userLoans.map((loan) => (
<div
key={loan.id}
className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm"
>
<div className="flex items-start justify-between gap-3">
<div className="min-w-0">
<div className="text-sm font-semibold text-slate-900">
Leihcode: <span className="font-mono">{loan.loan_code}</span>
</div>
<div className="mt-1 grid grid-cols-2 gap-x-4 gap-y-1 text-xs text-slate-700">
<div>
<span className="text-slate-500">Start:</span>{" "}
{formatDate(loan.start_date)}
</div>
<div>
<span className="text-slate-500">Ende:</span>{" "}
{formatDate(loan.end_date)}
</div>
<div>
<span className="text-slate-500">Abgeholt:</span>{" "}
{formatDate(loan.take_date)}
</div>
<div>
<span className="text-slate-500">Zurück:</span>{" "}
{formatDate(loan.returned_date)}
</div>
</div>
<div className="mt-2 text-xs text-slate-700">
<span className="text-slate-500">Gegenstände:</span>{" "}
{Array.isArray(loan.loaned_items_name)
? loan.loaned_items_name.join(", ")
: "-"}
</div>
</div>
<button
onClick={() => onDelete(loan.id)}
aria-label="Ausleihe löschen"
className="flex items-center justify-center rounded-md p-2 text-slate-600 hover:bg-red-50 hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-red-500/30"
>
<TrashIcon className="h-5 w-5" />
</button>
</div>
</div>
))}
</div>
{/* Desktop: table */}
<div className="hidden sm:block rounded-xl border border-slate-200 bg-white shadow-sm">
<div className="overflow-x-auto">
<table className="table-auto min-w-full text-sm text-gray-700">
<thead className="sticky top-0 z-10 bg-gray-50">
<tr className="border-b border-gray-200">
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600">
<table className="table-auto min-w-full text-sm text-slate-700">
<thead className="sticky top-0 z-10 bg-slate-50">
<tr className="border-b border-slate-200">
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
Leihcode
</th>
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600">
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
Start
</th>
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600">
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
Ende
</th>
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600">
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
Abgeholt
</th>
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600">
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
Zurückgegeben
</th>
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600">
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
Erstellt
</th>
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600">
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
Gegenstände
</th>
<th className="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-gray-600">
<th className="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-600">
Aktionen
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-100">
<tbody className="divide-y divide-slate-100">
{userLoans.map((loan) => (
<tr
key={loan.id}
className="odd:bg-white even:bg-gray-50 hover:bg-gray-100/60 transition-colors"
>
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-gray-900">
<tr key={loan.id} className="odd:bg-white even:bg-slate-50">
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
{loan.loan_code}
</td>
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-gray-900">
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
{formatDate(loan.start_date)}
</td>
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-gray-900">
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
{formatDate(loan.end_date)}
</td>
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-gray-900">
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
{formatDate(loan.take_date)}
</td>
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-gray-900">
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
{formatDate(loan.returned_date)}
</td>
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-gray-900">
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
{formatDate(loan.created_at)}
</td>
<td className="px-4 py-3 whitespace-nowrap">
<div className="text-gray-900 whitespace-nowrap max-w-none">
<div className="text-slate-900">
{Array.isArray(loan.loaned_items_name)
? loan.loaned_items_name.join(", ")
: "-"}
@@ -142,9 +202,9 @@ const Form4: React.FC = () => {
<button
onClick={() => onDelete(loan.id)}
aria-label="Ausleihe löschen"
className="inline-flex items-center rounded-md p-2 text-gray-500 hover:bg-red-50 hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-red-500/30"
className="inline-flex items-center rounded-md p-2 text-slate-600 hover:bg-red-50 hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-red-500/30"
>
<Trash className="h-4 w-4" />
<TrashIcon className="h-4 w-4" />
</button>
</td>
</tr>
@@ -152,14 +212,6 @@ const Form4: React.FC = () => {
</tbody>
</table>
</div>
{/* Scroll hint */}
<div className="border-t border-gray-100 px-4 py-2">
<div className="flex items-center gap-2 text-xs text-gray-500">
<ArrowLeftRight className="h-4 w-4 text-gray-400" />
<span>Hinweis: Horizontal scrollen, um alle Spalten zu sehen.</span>
</div>
</div>
</div>
</div>
);

32
frontend/src/components/Header.tsx
View File

@@ -6,20 +6,24 @@ type HeaderProps = {
const Header: React.FC<HeaderProps> = ({ onLogout }) => {
return (
<header className="mb-6 md:mb-10">
<h1 className="text-3xl md:text-4xl font-extrabold text-blue-800 tracking-tight drop-shadow-sm">
Gegenstand ausleihen
</h1>
<p className="text-blue-500 mt-1 md:mt-2 text-base md:text-lg font-medium">
Schnell und unkompliziert Equipment reservieren
</p>
<button
type="button"
onClick={onLogout}
className="text-blue-500 hover:underline"
>
Logout
</button>
<header className="mb-4 sm:mb-6">
<div className="flex items-start justify-between gap-3">
<div className="min-w-0">
<h1 className="text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight">
Gegenstand ausleihen
</h1>
<p className="text-slate-600 mt-1 text-sm sm:text-base">
Schnell und unkompliziert Equipment reservieren
</p>
</div>
<button
type="button"
onClick={onLogout}
className="h-9 px-3 rounded-md border border-slate-300 text-slate-700 hover:bg-slate-100 transition"
>
Logout
</button>
</div>
</header>
);
};

18
frontend/src/components/LoginForm.tsx
View File

@@ -22,16 +22,16 @@ const LoginForm: React.FC<LoginFormProps> = ({ onLogin }) => {
};
return (
<div className="bg-blue-950 min-h-screen">
<div className="max-w-sm mx-auto mt-20 bg-white rounded-xl shadow-lg p-8 border border-blue-100">
<h2 className="text-2xl font-bold text-blue-700 mb-6 text-center">
<div className="min-h-screen flex items-center justify-center bg-slate-100 p-4">
<div className="w-full max-w-sm bg-white rounded-2xl shadow-md p-6 sm:p-8 border border-slate-200">
<h2 className="text-2xl font-bold text-slate-900 mb-6 text-center">
Login
</h2>
<form onSubmit={handleSubmit} className="space-y-5">
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label
htmlFor="username"
className="block text-sm font-medium text-gray-700 mb-1"
className="block text-sm font-medium text-slate-700 mb-1"
>
Username
</label>
@@ -39,14 +39,14 @@ const LoginForm: React.FC<LoginFormProps> = ({ onLogin }) => {
type="text"
onChange={(e) => setUsername(e.target.value)}
id="username"
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 px-3 py-2"
className="mt-1 block w-full border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2.5 bg-white"
required
/>
</div>
<div>
<label
htmlFor="password"
className="block text-sm font-medium text-gray-700 mb-1"
className="block text-sm font-medium text-slate-700 mb-1"
>
Password
</label>
@@ -54,13 +54,13 @@ const LoginForm: React.FC<LoginFormProps> = ({ onLogin }) => {
onChange={(e) => setPassword(e.target.value)}
type="password"
id="password"
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 px-3 py-2"
className="mt-1 block w-full border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2.5 bg-white"
required
/>
</div>
<button
type="submit"
className="w-full bg-blue-600 text-white font-bold py-2 px-4 rounded-md shadow hover:bg-blue-700 transition"
className="w-full bg-indigo-600 text-white font-bold py-2.5 px-4 rounded-md shadow hover:bg-indigo-700 transition"
>
Login
</button>

6
frontend/src/components/Object.tsx
View File

@@ -7,9 +7,9 @@ type ObjectProps = {
const Object: React.FC<ObjectProps> = ({ title, description }) => {
return (
<div>
<h3 className="text-sm font-semibold text-blue-800">{title}</h3>
<p className="text-xs text-blue-500/80 line-clamp-2">{description}</p>
<div className="min-w-0">
<h3 className="text-sm font-semibold text-slate-900 truncate">{title}</h3>
<p className="text-xs text-slate-600 line-clamp-2">{description}</p>
</div>
);
};

31
frontend/src/components/Sidebar.tsx
View File

@@ -12,25 +12,25 @@ const Sidebar: React.FC = () => {
const next = JSON.parse(localStorage.getItem("allItems") || "[]");
setItems(next);
};
// Update immediately in case data changed before this mounted
handler();
window.addEventListener(ALL_ITEMS_UPDATED_EVENT, handler);
return () => window.removeEventListener(ALL_ITEMS_UPDATED_EVENT, handler);
}, []);
const outCount = items.reduce((n, it) => n + (it.inSafe ? 0 : 1), 0);
const sorted = [...items].sort((a, b) => Number(a.inSafe) - Number(b.inSafe)); // außerhalb zuerst
const sorted = [...items].sort((a, b) => Number(a.inSafe) - Number(b.inSafe));
return (
<aside className="w-full md:w-80 md:h-screen md:sticky md:top-0 overflow-y-auto bg-white/90 backdrop-blur md:border-r border-blue-100 shadow-xl flex flex-col p-6">
<h2 className="text-2xl font-extrabold mb-4 text-blue-700 tracking-tight flex items-center justify-between">
<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-6 h-6 text-blue-500"
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"
@@ -41,28 +41,29 @@ const Sidebar: React.FC = () => {
Geräte Übersicht
</span>
{outCount > 0 && (
<span className="text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-700">
<span className="text-[10px] sm:text-xs px-2 py-0.5 rounded-full bg-amber-100 text-amber-700">
{outCount} außerhalb
</span>
)}
</h2>
<div className="space-y-4 flex-1 pr-1">
{/* 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/80 rounded-xl p-4 shadow hover:shadow-md transition ${
item.inSafe ? "" : "ring-1 ring-red-200"
}`}
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-1 inline-flex" aria-hidden="true">
<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>
)}
<span
className={`inline-block w-3 h-3 rounded-full ${
item.inSafe ? "bg-green-400" : "bg-red-500"
item.inSafe ? "bg-emerald-500" : "bg-red-500"
}`}
title={
item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
@@ -83,10 +84,10 @@ const Sidebar: React.FC = () => {
))}
</div>
<div className="mt-6 text-xs text-gray-400 flex items-center gap-4">
<span className="inline-block w-3 h-3 bg-green-400 rounded-full"></span>
<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-400 rounded-full"></span>
<span className="inline-block w-3 h-3 bg-red-500 rounded-full"></span>
Außerhalb des Schließfachs
</div>
</aside>

11
frontend/src/index.css
View File

@@ -1 +1,12 @@
/* Tailwind (v4) */
@import "tailwindcss";
/* Small touch target improvements */
@layer base {
html:focus-within {
scroll-behavior: smooth;
}
:root {
color-scheme: light;
}
}

39
frontend/src/layout/Layout.tsx
View File

@@ -10,28 +10,29 @@ type LayoutProps = {
const Layout: React.FC<LayoutProps> = ({ children, onLogout }) => {
return (
<div className="min-h-screen flex bg-gradient-to-r from-blue-50 via-white to-blue-100">
{/* Sidebar */}
<div className="hidden md:block">
<Sidebar />
</div>
<div className="min-h-screen flex bg-slate-50 text-slate-800">
{/* Main */}
<main className="flex-1 flex flex-col items-center py-10 px-4 md:py-14">
<div className="w-full max-w-3xl">
<Header onLogout={onLogout} />
</div>
<div className="w-full max-w-3xl bg-white/90 shadow-2xl rounded-3xl p-6 md:p-10 ring-1 ring-blue-100">
{children}
<main className="flex-1 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">
<Sidebar />
</div>
<div className="hidden md:block md:shrink-0 md:w-72">
<Sidebar />
</div>
<div className="flex-1 min-w-0">
<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">
{children}
</div>
</div>
</div>
</main>
{/* Mobile sidebar at bottom */}
<div className="fixed bottom-4 left-4 right-4 md:hidden z-10">
<div className="bg-white/95 backdrop-blur rounded-2xl shadow-xl ring-1 ring-blue-100 p-4">
<Sidebar />
</div>
</div>
</div>
);
};

2
frontend/src/main.tsx
View File

@@ -18,7 +18,7 @@ createRoot(document.getElementById("root")!).render(
pauseOnFocusLoss={false}
draggable
pauseOnHover
theme="light"
theme="colored"
style={{ zIndex: 9999 }}
/>
</StrictMode>

1
frontend/tailwind.config.js
View File

@@ -1,5 +1,6 @@
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,jsx,ts,tsx}",
// add other paths if needed
],