115 lines
4.8 KiB
TypeScript
115 lines
4.8 KiB
TypeScript
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { History, ToyBrick } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { Button } from "@/components/ui/button";
|
|
import Image from "next/image";
|
|
import type { RentalHistoryEntry } from "@/types";
|
|
import { mockRentalHistory } from "@/lib/mockData";
|
|
import { getI18n } from "@/locales/server";
|
|
import type { Locale } from "@/locales/server";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { format } from 'date-fns';
|
|
|
|
const currentUserId = 1; // Assume this is the logged-in user's ID
|
|
|
|
export default async function RentalHistoryPage({ params }: { params: { locale: Locale } }) {
|
|
const t = await getI18n();
|
|
const locale = params.locale;
|
|
|
|
// Filter rental history for the current user
|
|
const userRentalHistory = mockRentalHistory.filter(entry => entry.userId === currentUserId);
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<div>
|
|
<h1 className="text-3xl font-bold font-headline text-primary">{t('dashboard.rental_history.title')}</h1>
|
|
<p className="text-muted-foreground">{t('dashboard.rental_history.description')}</p>
|
|
</div>
|
|
|
|
{userRentalHistory.length === 0 ? (
|
|
<Card className="text-center py-12 shadow-md">
|
|
<CardHeader>
|
|
<History className="h-16 w-16 mx-auto text-muted-foreground mb-4" />
|
|
<CardTitle>{t('dashboard.rental_history.no_history_title')}</CardTitle>
|
|
<CardDescription>{t('dashboard.rental_history.no_history_description')}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Link href={`/${locale}/`} passHref>
|
|
<Button size="lg">
|
|
<ToyBrick className="mr-2 h-5 w-5" />
|
|
{t('dashboard.rental_history.browse_toys_button')}
|
|
</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<div className="space-y-6">
|
|
{userRentalHistory.map(entry => (
|
|
<RentalHistoryItemCard key={entry.id} item={entry} t={t} locale={locale} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface RentalHistoryItemCardProps {
|
|
item: RentalHistoryEntry;
|
|
t: (key: string, params?: Record<string, string | number | Date>) => string;
|
|
locale: Locale;
|
|
}
|
|
|
|
function RentalHistoryItemCard({ item, t, locale }: RentalHistoryItemCardProps) {
|
|
const placeholderHint = item.dataAiHint || item.toy.category.toLowerCase() || "toy";
|
|
const formattedStartDate = format(new Date(item.rentalStartDate), 'PP');
|
|
const formattedEndDate = format(new Date(item.rentalEndDate), 'PP');
|
|
|
|
const getStatusTextKey = (status: RentalHistoryEntry['status']) => {
|
|
if (status === 'Completed') return 'rental_history_card.status_completed';
|
|
if (status === 'Returned') return 'rental_history_card.status_returned';
|
|
return '';
|
|
}
|
|
|
|
return (
|
|
<Card className="overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
|
|
<div className="flex flex-col md:flex-row">
|
|
<div className="md:w-1/4 lg:w-1/5 relative aspect-video md:aspect-[4/3]">
|
|
<Image
|
|
src={item.toy.images[0] || 'https://placehold.co/200x150.png'}
|
|
alt={item.toy.name}
|
|
layout="fill"
|
|
objectFit="cover"
|
|
data-ai-hint={placeholderHint}
|
|
className="md:rounded-l-lg md:rounded-tr-none rounded-t-lg"
|
|
/>
|
|
</div>
|
|
<div className="flex-1 p-6">
|
|
<div className="flex justify-between items-start mb-2">
|
|
<CardTitle className="text-xl font-headline">{item.toy.name}</CardTitle>
|
|
<Badge variant={item.status === 'Completed' ? 'default' : 'secondary'}>{t(getStatusTextKey(item.status))}</Badge>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
{t('rental_history_card.rented_from')}: <span className="font-medium text-foreground">{item.toy.ownerName}</span>
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{t('rental_history_card.rental_period')}: <span className="font-medium text-foreground">{formattedStartDate} - {formattedEndDate}</span>
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{t('rental_history_card.cost')}: <span className="font-medium text-foreground">${item.totalCost.toFixed(2)}</span>
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{t('rental_history_card.status')}: <span className="font-medium text-foreground">{t(getStatusTextKey(item.status))}</span>
|
|
</p>
|
|
|
|
<div className="mt-4">
|
|
<Link href={`/${locale}/toys/${item.toy.id}`} passHref>
|
|
<Button variant="outline" size="sm">{t('rental_history_card.view_toy_button')}</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|