dashboard/requests is blank

This commit is contained in:
Indigo Tang 2025-06-09 03:46:09 +00:00
parent 88576a15a2
commit 7738ad28ae
3 changed files with 191 additions and 0 deletions

View File

@ -0,0 +1,161 @@
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { ListOrdered, Check, X } 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 { Badge } from "@/components/ui/badge";
import { getI18n } from "@/locales/server";
interface RentalRequest {
id: string;
toy: Toy;
requesterName: string;
requesterId: string;
requestedDates: string; // e.g., "Aug 5, 2024 - Aug 10, 2024"
status: 'pending' | 'approved' | 'declined';
message?: string;
dataAiHint?: string;
}
const rentalRequests: RentalRequest[] = [
{
id: 'req1',
toy: mockToys[0],
requesterName: 'Charlie Brown',
requesterId: 'user4',
requestedDates: 'August 10, 2024 - August 17, 2024',
status: 'pending',
message: 'My son would love to play with these for his birthday week!',
dataAiHint: mockToys[0]?.category.toLowerCase(),
},
{
id: 'req2',
toy: mockToys[3],
requesterName: 'Diana Prince',
requesterId: 'user5',
requestedDates: 'September 1, 2024 - September 5, 2024',
status: 'approved',
dataAiHint: mockToys[3]?.category.toLowerCase(),
},
{
id: 'req3',
toy: mockToys[0],
requesterName: 'Edward Nigma',
requesterId: 'user6',
requestedDates: 'July 20, 2024 - July 22, 2024',
status: 'declined',
message: 'Looking for a weekend rental.',
dataAiHint: mockToys[0]?.category.toLowerCase(),
},
];
const currentUserToyRequests = rentalRequests.filter(req => req.toy.ownerId === 'user1');
export default async function RentalRequestsPage() {
const t = await getI18n();
return (
<div className="space-y-8">
<div>
<h1 className="text-3xl font-bold font-headline text-primary">{t('dashboard.requests.title')}</h1>
<p className="text-muted-foreground">{t('dashboard.requests.description')}</p>
</div>
{currentUserToyRequests.length === 0 ? (
<Card className="text-center py-12 shadow-md">
<CardHeader>
<ListOrdered className="h-16 w-16 mx-auto text-muted-foreground mb-4" />
<CardTitle>{t('dashboard.requests.no_requests_title')}</CardTitle>
<CardDescription>{t('dashboard.requests.no_requests_description')}</CardDescription>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground">{t('dashboard.requests.no_requests_content')}</p>
</CardContent>
</Card>
) : (
<div className="space-y-6">
{currentUserToyRequests.map(request => (
<RequestItemCard key={request.id} request={request} t={t} />
))}
</div>
)}
</div>
);
}
interface RequestItemCardProps {
request: RentalRequest;
t: (key: string) => string;
}
function RequestItemCard({ request, t }: RequestItemCardProps) {
const placeholderHint = request.dataAiHint || request.toy.category.toLowerCase() || "toy";
const getStatusBadgeVariant = (status: RentalRequest['status']) => {
if (status === 'approved') return 'default';
if (status === 'declined') return 'destructive';
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');
}
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-auto">
<Image
src={request.toy.images[0] || 'https://placehold.co/200x150.png'}
alt={request.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">{request.toy.name}</CardTitle>
<Badge variant={getStatusBadgeVariant(request.status)}>{getStatusText(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>
</p>
<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>
)}
{request.status === 'pending' && (
<div className="mt-4 flex space-x-3">
<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>
<Button variant="destructive" size="sm">
<X className="mr-1 h-4 w-4" /> {t('dashboard.requests.decline_button')}
</Button>
<Button variant="outline" size="sm">{t('dashboard.requests.message_requester_button')}</Button>
</div>
)}
{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>
</Link>
</div>
)}
</div>
</div>
</Card>
);
}

View File

@ -129,4 +129,19 @@ export default {
'dashboard.rentals.rental_ends': 'Rental ends: {date}',
'dashboard.rentals.view_toy_details_button': 'View Toy Details',
'dashboard.rentals.contact_owner_button': 'Contact Owner',
'dashboard.requests.title': 'Rental Requests',
'dashboard.requests.description': 'Manage incoming rental requests for your toys.',
'dashboard.requests.no_requests_title': 'No Rental Requests',
'dashboard.requests.no_requests_description': 'You currently have no pending rental requests for your toys.',
'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.approve_button': 'Approve',
'dashboard.requests.decline_button': 'Decline',
'dashboard.requests.message_requester_button': 'Message Requester',
'dashboard.requests.view_toy_listing_button': 'View Toy Listing',
'dashboard.requests.status_pending': 'Pending',
'dashboard.requests.status_approved': 'Approved',
'dashboard.requests.status_declined': 'Declined',
} as const;

View File

@ -129,4 +129,19 @@ export default {
'dashboard.rentals.rental_ends': '租借結束於:{date}',
'dashboard.rentals.view_toy_details_button': '查看玩具詳情',
'dashboard.rentals.contact_owner_button': '聯絡擁有者',
'dashboard.requests.title': '租借請求',
'dashboard.requests.description': '管理您玩具的租借請求。',
'dashboard.requests.no_requests_title': '沒有租借請求',
'dashboard.requests.no_requests_description': '您目前沒有任何待處理的玩具租借請求。',
'dashboard.requests.no_requests_content': '當有人請求租借您的玩具時,請求將會出現在這裡。',
'dashboard.requests.requested_by': '請求者',
'dashboard.requests.dates': '日期',
'dashboard.requests.message': '訊息',
'dashboard.requests.approve_button': '批准',
'dashboard.requests.decline_button': '拒絕',
'dashboard.requests.message_requester_button': '傳訊息給請求者',
'dashboard.requests.view_toy_listing_button': '查看玩具列表',
'dashboard.requests.status_pending': '待處理',
'dashboard.requests.status_approved': '已批准',
'dashboard.requests.status_declined': '已拒絕',
} as const;