Compact preview list below form on desktop; Beginn/Ende/Besucher in one row
- Eingabe tab shows last 5 entries below form on lg+ screens (compact mode hides Objekte and Bemerkungen columns); Liste tab shows full 20 entries - Beginn, Ende, Besucher fields moved into a single flex row - LogbuchList accepts limit and compact props Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -29,12 +29,12 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
|
||||
function handleSaved() {
|
||||
setRefreshKey((k) => k + 1);
|
||||
setEditEntry(null);
|
||||
if (editEntry) setActiveTab('liste');
|
||||
}
|
||||
|
||||
function handleEdit(entry: LogbuchEintrag) {
|
||||
setEditEntry(entry);
|
||||
setActiveTab('eingabe');
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
async function handleLogout() {
|
||||
@@ -84,11 +84,11 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
|
||||
</div>
|
||||
|
||||
{/* Eingabe/Liste-Tabs */}
|
||||
<div className="flex gap-1 mb-5 border-b border-gray-200">
|
||||
<div className="flex gap-1 mb-4 border-b border-gray-200">
|
||||
{(['eingabe', 'liste'] as const).map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => { setActiveTab(tab); if (tab === 'eingabe' && editEntry) setEditEntry(null); }}
|
||||
onClick={() => { setActiveTab(tab); if (tab === 'eingabe') setEditEntry(null); }}
|
||||
className={`px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px ${
|
||||
activeTab === tab
|
||||
? 'border-[#85B7D7] text-gray-900'
|
||||
@@ -100,10 +100,11 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Eingabe-Tab: Formular + kompakte Vorschau-Liste (nur Desktop) */}
|
||||
{activeTab === 'eingabe' && (
|
||||
<div>
|
||||
<>
|
||||
{editEntry && (
|
||||
<div className="mb-4 text-sm text-amber-700 bg-amber-50 border border-amber-300 rounded-lg px-3 py-2">
|
||||
<div className="mb-3 text-sm text-amber-700 bg-amber-50 border border-amber-300 rounded-lg px-3 py-2">
|
||||
Eintrag bearbeiten (ID {editEntry.ID})
|
||||
</div>
|
||||
)}
|
||||
@@ -114,18 +115,40 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
|
||||
editEntry={editEntry}
|
||||
onSaved={handleSaved}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Kompakte Liste — nur auf Desktop sichtbar */}
|
||||
<div className="hidden lg:block mt-5 border-t-2 border-gray-300 pt-4">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h2 className="text-sm font-semibold text-gray-600">Letzte Einträge</h2>
|
||||
<button
|
||||
onClick={() => setActiveTab('liste')}
|
||||
className="text-xs text-blue-600 hover:underline"
|
||||
>
|
||||
Alle anzeigen →
|
||||
</button>
|
||||
</div>
|
||||
<LogbuchList
|
||||
kuppel={activeKuppel}
|
||||
refreshKey={refreshKey}
|
||||
onEdit={handleEdit}
|
||||
limit={5}
|
||||
compact
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Liste-Tab: vollständige Liste */}
|
||||
{activeTab === 'liste' && (
|
||||
<LogbuchList
|
||||
kuppel={activeKuppel}
|
||||
refreshKey={refreshKey}
|
||||
onEdit={handleEdit}
|
||||
limit={20}
|
||||
/>
|
||||
)}
|
||||
|
||||
<footer className="mt-8 flex justify-between items-center text-xs sm:text-sm text-gray-600 px-1 sm:px-4">
|
||||
<footer className="mt-6 flex justify-between items-center text-xs sm:text-sm text-gray-600 px-1 sm:px-4">
|
||||
<div>
|
||||
<a href="mailto:rxf@gmx.de" className="text-blue-600 hover:underline">
|
||||
rxf@gmx.de
|
||||
|
||||
Reference in New Issue
Block a user