From 888355d0cb47c4f4cf38e7648538774811646d33 Mon Sep 17 00:00:00 2001
From: Indigo Tang <indigoo@gmail.com>
Date: Tue, 10 Jun 2025 05:57:18 +0000
Subject: [PATCH] please add owner message box which receive message from
 rental toy user

---
 src/app/[locale]/dashboard/requests/page.tsx | 35 ++++++++++++--------
 src/locales/en.ts                            |  2 +-
 src/locales/zh-TW.ts                         |  2 +-
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/app/[locale]/dashboard/requests/page.tsx b/src/app/[locale]/dashboard/requests/page.tsx
index cce916b..4c676ef 100644
--- a/src/app/[locale]/dashboard/requests/page.tsx
+++ b/src/app/[locale]/dashboard/requests/page.tsx
@@ -1,5 +1,6 @@
+
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { ListOrdered, Check, X } from "lucide-react";
+import { ListOrdered, Check, X, MessageSquareText } from "lucide-react";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import Image from "next/image";
@@ -27,7 +28,7 @@ const rentalRequests: RentalRequest[] = [
     requesterId: 'user4',
     requestedDates: 'August 10, 2024 - August 17, 2024',
     status: 'pending',
-    message: 'My son would love to play with these for his birthday week!',
+    message: 'My son would love to play with these for his birthday week! We are very careful with toys and will ensure it is returned in perfect condition. Could we possibly pick it up on the 9th evening?',
     dataAiHint: mockToys[0]?.category.toLowerCase(),
   },
   {
@@ -88,7 +89,7 @@ export default async function RentalRequestsPage() {
 
 interface RequestItemCardProps {
   request: RentalRequest;
-  t: (key: string) => string;
+  t: (key: string, params?: Record<string, string | number>) => string;
 }
 
 function RequestItemCard({ request, t }: RequestItemCardProps) {
@@ -100,10 +101,10 @@ function RequestItemCard({ request, t }: RequestItemCardProps) {
     return 'secondary';
   };
 
-  const getStatusText = (status: RentalRequest['status']) => {
-    if (status === 'approved') return t('dashboard.requests.status_approved');
-    if (status === 'declined') return t('dashboard.requests.status_declined');
-    return t('dashboard.requests.status_pending');
+  const getStatusTextKey = (status: RentalRequest['status']): string => {
+    if (status === 'approved') return 'dashboard.requests.status_approved';
+    if (status === 'declined') return 'dashboard.requests.status_declined';
+    return 'dashboard.requests.status_pending';
   }
 
   return (
@@ -122,7 +123,7 @@ function RequestItemCard({ request, t }: RequestItemCardProps) {
         <div className="flex-1 p-6">
           <div className="flex justify-between items-start mb-2">
             <CardTitle className="text-xl font-headline">{request.toy.name}</CardTitle>
-            <Badge variant={getStatusBadgeVariant(request.status)}>{getStatusText(request.status)}</Badge>
+            <Badge variant={getStatusBadgeVariant(request.status)}>{t(getStatusTextKey(request.status))}</Badge>
           </div>
           <p className="text-sm text-muted-foreground">
             {t('dashboard.requests.requested_by')}: <span className="font-medium text-foreground">{request.requesterName}</span>
@@ -130,14 +131,19 @@ function RequestItemCard({ request, t }: RequestItemCardProps) {
           <p className="text-sm text-muted-foreground">
             {t('dashboard.requests.dates')}: <span className="font-medium text-foreground">{request.requestedDates}</span>
           </p>
+
           {request.message && (
-            <p className="text-sm text-muted-foreground mt-2 bg-muted/50 p-2 rounded-md">
-              <span className="font-medium text-foreground">{t('dashboard.requests.message')}:</span> "{request.message}"
-            </p>
+            <div className="mt-3 p-3 border border-border bg-muted/30 rounded-lg shadow-sm">
+              <div className="flex items-center mb-1.5">
+                <MessageSquareText className="h-4 w-4 mr-2 text-primary" />
+                <h4 className="text-sm font-semibold text-primary">{t('dashboard.requests.message_label')}</h4>
+              </div>
+              <p className="text-sm text-foreground/90 whitespace-pre-line">{request.message}</p>
+            </div>
           )}
           
           {request.status === 'pending' && (
-            <div className="mt-4 flex space-x-3">
+            <div className="mt-4 flex flex-wrap gap-2">
               <Button size="sm" className="bg-green-600 hover:bg-green-700">
                 <Check className="mr-1 h-4 w-4" /> {t('dashboard.requests.approve_button')}
               </Button>
@@ -150,7 +156,9 @@ function RequestItemCard({ request, t }: RequestItemCardProps) {
           {request.status !== 'pending' && (
              <div className="mt-4">
               <Link href={`/dashboard/my-toys/edit/${request.toy.id}`} passHref>
-                <Button variant="link" size="sm" className="p-0 h-auto">{t('dashboard.requests.view_toy_listing_button')}</Button>
+                <Button variant="link" size="sm" className="p-0 h-auto text-primary hover:underline">
+                  {t('dashboard.requests.view_toy_listing_button')}
+                </Button>
               </Link>
             </div>
           )}
@@ -159,3 +167,4 @@ function RequestItemCard({ request, t }: RequestItemCardProps) {
     </Card>
   );
 }
+
diff --git a/src/locales/en.ts b/src/locales/en.ts
index bbf2eb1..b039d2a 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -154,7 +154,7 @@ export default {
   'dashboard.requests.no_requests_content': 'When someone requests to rent one of your toys, it will appear here.',
   'dashboard.requests.requested_by': 'Requested by',
   'dashboard.requests.dates': 'Dates',
-  'dashboard.requests.message': 'Message',
+  'dashboard.requests.message_label': 'Message from Requester',
   'dashboard.requests.approve_button': 'Approve',
   'dashboard.requests.decline_button': 'Decline',
   'dashboard.requests.message_requester_button': 'Message Requester',
diff --git a/src/locales/zh-TW.ts b/src/locales/zh-TW.ts
index 2aaa443..43afa26 100644
--- a/src/locales/zh-TW.ts
+++ b/src/locales/zh-TW.ts
@@ -154,7 +154,7 @@ export default {
   'dashboard.requests.no_requests_content': '当有人请求租用您的玩具时，它会显示在此处。',
   'dashboard.requests.requested_by': '請求者',
   'dashboard.requests.dates': '日期',
-  'dashboard.requests.message': '訊息',
+  'dashboard.requests.message_label': '請求者訊息',
   'dashboard.requests.approve_button': '批准',
   'dashboard.requests.decline_button': '拒絕',
   'dashboard.requests.message_requester_button': '傳訊息給請求者',