dashboard/rentals page is blank

src/app/[locale]/dashboard/rentals/page.tsx

@@ -0,0 +1,91 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { ShoppingBag, ToyBrick } from "lucide-react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import type { Toy } from "@/types";
+import { mockToys } from "@/lib/mockData";
+import { getI18n } from "@/locales/server";
+
+const rentedToys: (Toy & { rentalEndDate?: string, dataAiHint?: string })[] = [
+  { ...mockToys[1], rentalEndDate: "2024-08-15", dataAiHint: mockToys[1]?.category.toLowerCase() },
+  { ...mockToys[4], rentalEndDate: "2024-09-01", dataAiHint: mockToys[4]?.category.toLowerCase() },
+];
+
+export default async function MyRentalsPage() {
+  const t = await getI18n();
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h1 className="text-3xl font-bold font-headline text-primary">{t('dashboard.rentals.title')}</h1>
+        <p className="text-muted-foreground">{t('dashboard.rentals.description')}</p>
+      </div>
+
+      {rentedToys.length === 0 ? (
+        <Card className="text-center py-12 shadow-md">
+          <CardHeader>
+            <ShoppingBag className="h-16 w-16 mx-auto text-muted-foreground mb-4" />
+            <CardTitle>{t('dashboard.rentals.no_rentals_title')}</CardTitle>
+            <CardDescription>{t('dashboard.rentals.no_rentals_description')}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Link href="/" passHref>
+              <Button size="lg">
+                <ToyBrick className="mr-2 h-5 w-5" />
+                {t('dashboard.rentals.browse_toys_button')}
+              </Button>
+            </Link>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="space-y-6">
+          {rentedToys.map(toy => (
+            <RentalItemCard key={toy.id} toy={toy} t={t} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface RentalItemCardProps {
+  toy: Toy & { rentalEndDate?: string, dataAiHint?: string };
+  t: (key: string, params?: Record<string, string | number>) => string;
+}
+
+function RentalItemCard({ toy, t }: RentalItemCardProps) {
+  const placeholderHint = toy.dataAiHint || toy.category.toLowerCase() || "toy";
+  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/3 lg:w-1/4 relative aspect-video md:aspect-auto">
+          <Image
+            src={toy.images[0] || 'https://placehold.co/300x200.png'}
+            alt={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">
+          <CardTitle className="text-2xl font-headline mb-1">{toy.name}</CardTitle>
+          <p className="text-sm text-muted-foreground mb-2">{t('dashboard.rentals.rented_from', { ownerName: toy.ownerName })}</p>
+          {toy.rentalEndDate && (
+            <p className="text-sm font-semibold text-primary mb-3">
+              {t('dashboard.rentals.rental_ends', { date: new Date(toy.rentalEndDate).toLocaleDateString() })}
+            </p>
+          )}
+          <p className="text-muted-foreground text-sm line-clamp-2 mb-4">{toy.description}</p>
+          <div className="flex space-x-2">
+            <Link href={`/toys/${toy.id}`} passHref>
+              <Button variant="outline" size="sm">{t('dashboard.rentals.view_toy_details_button')}</Button>
+            </Link>
+            <Button variant="default" size="sm">{t('dashboard.rentals.contact_owner_button')}</Button>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}

src/locales/en.ts

@@ -120,4 +120,13 @@ export default {
   'add_toy_form.list_button': 'List My Toy',
   'add_toy_form.saving_button': 'Saving Changes...',
   'add_toy_form.listing_button': 'Listing Toy...',
+  'dashboard.rentals.title': 'My Rentals',
+  'dashboard.rentals.description': 'Toys you are currently renting from others.',
+  'dashboard.rentals.no_rentals_title': 'No Active Rentals',
+  'dashboard.rentals.no_rentals_description': "You haven't rented any toys yet. Explore available toys and find your next adventure!",
+  'dashboard.rentals.browse_toys_button': 'Browse Toys',
+  'dashboard.rentals.rented_from': 'Rented from: {ownerName}',
+  'dashboard.rentals.rental_ends': 'Rental ends: {date}',
+  'dashboard.rentals.view_toy_details_button': 'View Toy Details',
+  'dashboard.rentals.contact_owner_button': 'Contact Owner',
 } as const;

src/locales/zh-TW.ts

@@ -120,4 +120,13 @@ export default {
   'add_toy_form.list_button': '列出我的玩具',
   'add_toy_form.saving_button': '儲存變更中...',
   'add_toy_form.listing_button': '列出玩具中...',
+  'dashboard.rentals.title': '我的租借',
+  'dashboard.rentals.description': '您目前正在向他人租借的玩具。',
+  'dashboard.rentals.no_rentals_title': '沒有進行中的租借',
+  'dashboard.rentals.no_rentals_description': '您尚未租借任何玩具。探索可用玩具，尋找您的下一次冒險！',
+  'dashboard.rentals.browse_toys_button': '瀏覽玩具',
+  'dashboard.rentals.rented_from': '租借自：{ownerName}',
+  'dashboard.rentals.rental_ends': '租借結束於：{date}',
+  'dashboard.rentals.view_toy_details_button': '查看玩具詳情',
+  'dashboard.rentals.contact_owner_button': '聯絡擁有者',
 } as const;