103 lines
3.4 KiB
TypeScript
103 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
import { AusgabenEntry } from '@/types/ausgaben';
|
|
|
|
interface AusgabenListProps {
|
|
entries: AusgabenEntry[];
|
|
onDelete: (id: number) => void;
|
|
onEdit: (entry: AusgabenEntry) => void;
|
|
}
|
|
|
|
export default function AusgabenList({ entries, onDelete, onEdit }: AusgabenListProps) {
|
|
const handleDelete = async (id: number) => {
|
|
if (!confirm('Wirklich löschen?')) return;
|
|
|
|
try {
|
|
const response = await fetch(`/api/ausgaben/${id}`, {
|
|
method: 'DELETE',
|
|
});
|
|
|
|
if (response.ok) {
|
|
onDelete(id);
|
|
} else {
|
|
alert('Fehler beim Löschen!');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
alert('Fehler beim Löschen!');
|
|
}
|
|
};
|
|
|
|
const formatDate = (dateStr: string) => {
|
|
const date = new Date(dateStr);
|
|
return date.toLocaleDateString('de-DE', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
});
|
|
};
|
|
|
|
const formatAmount = (amount: number) => {
|
|
return new Intl.NumberFormat('de-DE', {
|
|
style: 'currency',
|
|
currency: 'EUR',
|
|
}).format(amount);
|
|
};
|
|
|
|
return (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="bg-[#CCCCFF]">
|
|
<th className="border-b-2 border-black p-2 w-32">Datum</th>
|
|
<th className="border-b-2 border-black p-2 w-12">Tag</th>
|
|
<th className="border-b-2 border-black p-2 w-36">Wo</th>
|
|
<th className="border-b-2 border-black p-2 w-48">Was</th>
|
|
<th className="border-b-2 border-black p-2 w-8">Betrag</th>
|
|
<th className="border-b-2 border-black p-2 w-16">Wie</th>
|
|
<th className="border-b-2 border-black p-2 w-38">Aktion</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{entries.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={7} className="text-center p-4 text-gray-500">
|
|
Keine Einträge vorhanden
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
entries.map((entry, index) => (
|
|
<tr key={entry.ID} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-100'}>
|
|
<td className="border-y border-black p-2 text-center">
|
|
{formatDate(entry.Datum)}
|
|
</td>
|
|
<td className="border-y border-black p-2 text-center">{entry.WochTag.slice(0, 2)}</td>
|
|
<td className="border-y border-black p-2">{entry.Wo}</td>
|
|
<td className="border-y border-black p-2">{entry.Was}</td>
|
|
<td className="border-y border-black p-2 text-right">
|
|
{formatAmount(entry.Wieviel)}
|
|
</td>
|
|
<td className="border-y border-black p-2 text-center">{entry.Wie}</td>
|
|
<td className="border-y border-black p-2 text-center">
|
|
<button
|
|
onClick={() => onEdit(entry)}
|
|
className="text-blue-600 hover:text-blue-800 px-3 py-1 rounded text-sm mr-2"
|
|
>
|
|
Bearbeiten
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(entry.ID)}
|
|
className="text-red-600 hover:text-red-800 px-3 py-1 rounded text-sm"
|
|
>
|
|
Löschen
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|