From b06f361475eb9a8e036d0aac7d6938348f2eaac8 Mon Sep 17 00:00:00 2001
From: Indigo Tang <indigoo@gmail.com>
Date: Mon, 9 Jun 2025 04:42:00 +0000
Subject: [PATCH] integrate rental history into my toys pages

---
 src/app/[locale]/dashboard/my-toys/page.tsx | 42 ++++++++++++++++-----
 src/locales/en.ts                           |  2 +
 src/locales/zh-TW.ts                        |  2 +
 3 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/src/app/[locale]/dashboard/my-toys/page.tsx b/src/app/[locale]/dashboard/my-toys/page.tsx
index 339ff4a..86f4575 100644
--- a/src/app/[locale]/dashboard/my-toys/page.tsx
+++ b/src/app/[locale]/dashboard/my-toys/page.tsx
@@ -1,9 +1,10 @@
+
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import ToyCard from "@/components/toys/ToyCard"; // This component would also need translation if it has text
-import { mockToys } from "@/lib/mockData"; 
+import { mockToys, mockRentalHistory } from "@/lib/mockData"; 
 import Link from "next/link";
-import { PlusCircle, Edit3, Trash2, Eye, ToyBrick as ToyBrickIcon } from "lucide-react"; // Renamed ToyBrick to avoid conflict
+import { PlusCircle, Edit3, Trash2, Eye, ToyBrick as ToyBrickIcon, BarChartHorizontalBig } from "lucide-react"; // Renamed ToyBrick to avoid conflict
 import Image from "next/image";
 import type { Toy } from "@/types";
 import { Badge } from "@/components/ui/badge";
@@ -14,6 +15,16 @@ const userToys = mockToys.filter(toy => toy.ownerId === currentUserId);
 
 export default async function MyToysPage() {
   const t = await getI18n();
+
+  const getRentalCountForToy = (toyId: string): number => {
+    return mockRentalHistory.filter(entry => entry.toy.id === toyId && entry.toy.ownerId === currentUserId).length;
+  };
+
+  const userToysWithRentalCount = userToys.map(toy => ({
+    ...toy,
+    rentalCount: getRentalCountForToy(toy.id),
+  }));
+
   return (
     <div className="space-y-8">
       <div className="flex justify-between items-center">
@@ -29,7 +40,7 @@ export default async function MyToysPage() {
         </Link>
       </div>
 
-      {userToys.length === 0 ? (
+      {userToysWithRentalCount.length === 0 ? (
         <Card className="text-center py-12 shadow-md">
           <CardHeader>
             <ToyBrickIcon className="h-16 w-16 mx-auto text-muted-foreground mb-4" />
@@ -47,8 +58,8 @@ export default async function MyToysPage() {
         </Card>
       ) : (
         <div className="space-y-6">
-          {userToys.map(toy => (
-            <ListedToyItem key={toy.id} toy={toy} t={t} />
+          {userToysWithRentalCount.map(toy => (
+            <ListedToyItem key={toy.id} toy={toy} t={t} rentalCount={toy.rentalCount} />
           ))}
         </div>
       )}
@@ -58,10 +69,11 @@ export default async function MyToysPage() {
 
 interface ListedToyItemProps {
   toy: Toy & {dataAiHint?: string};
-  t: (key: string, params?: Record<string, string | number>) => string; // Pass t function for client components or sub-server components
+  t: (key: string, params?: Record<string, string | number>) => string;
+  rentalCount: number;
 }
 
-function ListedToyItem({ toy, t }: ListedToyItemProps) {
+function ListedToyItem({ toy, t, rentalCount }: ListedToyItemProps) {
   const placeholderHint = toy.dataAiHint || toy.category.toLowerCase() || "toy";
   return (
     <Card className="overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
@@ -99,9 +111,19 @@ function ListedToyItem({ toy, t }: ListedToyItemProps) {
             </div>
           </div>
           <p className="text-muted-foreground mt-2 text-sm line-clamp-2">{toy.description}</p>
-          <div className="mt-4 text-sm">
-            <span className="font-semibold">{t('toy_details.price')}: </span>
-            {toy.pricePerDay !== undefined ? (toy.pricePerDay > 0 ? `$${toy.pricePerDay}${t('toy_details.price_per_day')}` : t('toy_details.price_free')) : 'Not set'}
+          <div className="mt-4 text-sm space-y-1">
+            <div>
+              <span className="font-semibold">{t('toy_details.price')}: </span>
+              {toy.pricePerDay !== undefined ? (toy.pricePerDay > 0 ? `$${toy.pricePerDay}${t('toy_details.price_per_day')}` : t('toy_details.price_free')) : 'Not set'}
+            </div>
+            {rentalCount > 0 && (
+              <div className="flex items-center text-accent">
+                <BarChartHorizontalBig className="mr-1.5 h-4 w-4" />
+                {rentalCount === 1
+                  ? t('dashboard.my_toys.rental_count_one')
+                  : t('dashboard.my_toys.rental_count_many', { count: rentalCount })}
+              </div>
+            )}
           </div>
         </div>
       </div>
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 24f5721..f473557 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -82,6 +82,8 @@ export default {
   'dashboard.my_toys.view_toy_action': 'View Toy',
   'dashboard.my_toys.edit_toy_action': 'Edit Toy',
   'dashboard.my_toys.delete_toy_action': 'Delete Toy',
+  'dashboard.my_toys.rental_count_one': 'Rented 1 time',
+  'dashboard.my_toys.rental_count_many': 'Rented {count} times',
   'dashboard.profile.title': 'Profile Settings',
   'dashboard.profile.description': 'Manage your personal information and account settings.',
   'dashboard.profile.personal_info_title': 'Personal Information',
diff --git a/src/locales/zh-TW.ts b/src/locales/zh-TW.ts
index abb187b..3956a3f 100644
--- a/src/locales/zh-TW.ts
+++ b/src/locales/zh-TW.ts
@@ -82,6 +82,8 @@ export default {
   'dashboard.my_toys.view_toy_action': '查看玩具',
   'dashboard.my_toys.edit_toy_action': '編輯玩具',
   'dashboard.my_toys.delete_toy_action': '刪除玩具',
+  'dashboard.my_toys.rental_count_one': '已租借 1 次',
+  'dashboard.my_toys.rental_count_many': '已租借 {count} 次',
   'dashboard.profile.title': '個人資料設定',
   'dashboard.profile.description': '管理您的個人資訊和帳戶設定。',
   'dashboard.profile.personal_info_title': '個人資訊',