please add owner message box which receive message from rental toy user

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>
   );
 }
+

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',

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': '傳訊息給請求者',