63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { usePage } from '@inertiajs/react';
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { format } from 'date-fns';
|
|
|
|
interface Purchase {
|
|
id: number;
|
|
created_at: string;
|
|
package: {
|
|
name: string;
|
|
price: number;
|
|
};
|
|
status: string;
|
|
}
|
|
|
|
const ProfileOrders = () => {
|
|
const page = usePage<{ purchases?: Purchase[] }>();
|
|
const purchases = page.props.purchases ?? [];
|
|
|
|
return (
|
|
<div className="container mx-auto py-8">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Bestellungen</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Paket</TableHead>
|
|
<TableHead>Preis</TableHead>
|
|
<TableHead>Datum</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{purchases.map((purchase) => (
|
|
<TableRow key={purchase.id}>
|
|
<TableCell>{purchase.package.name}</TableCell>
|
|
<TableCell>{purchase.package.price} €</TableCell>
|
|
<TableCell>{format(new Date(purchase.created_at), 'dd.MM.yyyy')}</TableCell>
|
|
<TableCell>
|
|
<Badge variant={purchase.status === 'completed' ? 'default' : 'secondary'}>
|
|
{purchase.status}
|
|
</Badge>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
{purchases.length === 0 && (
|
|
<p className="text-center text-muted-foreground py-8">Keine Bestellungen gefunden.</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProfileOrders;
|