admin/ausgaben-next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Formular und Liste responsiv gestaltet

Browse Source 
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Reinhard X. Fürst
2026-08-23 18:41:32 +02:00
parent 4acb1a5eca
commit cd96bdfc6a
5 changed files with 174 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/AusgabenList.tsx
+43 -3
View File
@@ -7,9 +7,10 @@ interface AusgabenListProps {
entries: AusgabenEntry[];
onDelete: (id: number) => void;
onEdit: (entry: AusgabenEntry) => void;
mobileLimit?: number;
}
export default function AusgabenList({ entries, onDelete, onEdit }: AusgabenListProps) {
export default function AusgabenList({ entries, onDelete, onEdit, mobileLimit }: AusgabenListProps) {
const [confirmId, setConfirmId] = useState<number | null>(null);
const handleDeleteConfirmed = async (id: number) => {
@@ -39,7 +40,8 @@ export default function AusgabenList({ entries, onDelete, onEdit }: AusgabenList
};
return (
<div className="overflow-x-auto">
<div>
<div className="hidden md:block overflow-x-auto">
<table className="w-full">
<thead>
<tr className="bg-[#CCCCFF]">
@@ -93,11 +95,49 @@ export default function AusgabenList({ entries, onDelete, onEdit }: AusgabenList
)}
</tbody>
</table>
</div>
<div className="md:hidden flex flex-col gap-2">
{entries.length === 0 ? (
<div className="text-center py-4 text-gray-500">Keine Einträge vorhanden</div>
) : (
(mobileLimit ? entries.slice(0, mobileLimit) : entries).map((entry, index) => (
<div
key={entry.ID || `entry-idx-${index}`}
className={`border border-gray-300 rounded-lg p-2 ${index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}`}
>
<div className="flex justify-between items-center text-sm font-medium">
<span>{formatDate(entry.Datum)} ({entry.WochTag.slice(0, 2)}) · {formatAmount(entry.Wieviel)}</span>
<div className="flex gap-2">
<button
onClick={() => onEdit(entry)}
className="text-blue-600 hover:text-blue-800 text-xs"
>
Editieren
</button>
<button
onClick={() => setConfirmId(entry.ID)}
className="text-red-600 hover:text-red-800 text-xs"
>
Löschen
</button>
</div>
</div>
<div className="flex flex-wrap gap-x-3 gap-y-0.5 text-xs text-gray-700 mt-1">
<span>Wo: {entry.Wo}</span>
<span>Was: {entry.Was}</span>
<span>Kat: {entry.Kat}</span>
<span>Wie: {entry.Wie}</span>
</div>
</div>
))
)}
</div>
{/* Bestätigungs-Modal */}
{confirmId !== null && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
<div className="bg-white border-2 border-black rounded-lg shadow-xl p-6 w-80">
<div className="bg-white border-2 border-black rounded-lg shadow-xl p-6 w-80 max-w-[calc(100vw-2rem)] mx-4">
<p className="text-lg font-semibold mb-6 text-center">Eintrag wirklich löschen?</p>
<div className="flex justify-center gap-4">
<button