add toy rental history in user dashboard

2025-06-09 04:38:59 +00:00
parent 9d8c9856e0
commit 8ba7f4cbed
6 changed files with 208 additions and 19 deletions
@@ -0,0 +1,115 @@
+
+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 = 'user1'; // 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>
+  );
+}
+