Updated app

2025-06-09 02:49:59 +00:00
parent 7d3cda96fb
commit 3db4ec2066
26 changed files with 1953 additions and 74 deletions
@@ -0,0 +1,153 @@
+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";
+
+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;
+}
+
+// Mock data: rental requests for the current user's toys
+const rentalRequests: RentalRequest[] = [
+  {
+    id: 'req1',
+    toy: mockToys[0], // Colorful Building Blocks Set (owned by user1)
+    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], // Plush Teddy Bear (owned by user1)
+    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(),
+  },
+];
+
+// Assuming current user is user1 for whom these requests are relevant
+const currentUserToyRequests = rentalRequests.filter(req => req.toy.ownerId === 'user1');
+
+
+export default function RentalRequestsPage() {
+  return (
+    <div className="space-y-8">
+      <div>
+        <h1 className="text-3xl font-bold font-headline text-primary">Rental Requests</h1>
+        <p className="text-muted-foreground">Manage incoming rental requests for your toys.</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>No Rental Requests</CardTitle>
+            <CardDescription>You currently have no pending rental requests for your toys.</CardDescription>
+          </CardHeader>
+          <CardContent>
+             <p className="text-sm text-muted-foreground">When someone requests to rent one of your toys, it will appear here.</p>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="space-y-6">
+          {currentUserToyRequests.map(request => (
+            <RequestItemCard key={request.id} request={request} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface RequestItemCardProps {
+  request: RentalRequest;
+}
+
+function RequestItemCard({ request }: RequestItemCardProps) {
+  const placeholderHint = request.dataAiHint || request.toy.category.toLowerCase() || "toy";
+  
+  const getStatusBadgeVariant = (status: RentalRequest['status']) => {
+    if (status === 'approved') return 'default'; // default is primary
+    if (status === 'declined') return 'destructive';
+    return 'secondary'; // 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)} className="capitalize">{request.status}</Badge>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            Requested by: <span className="font-medium text-foreground">{request.requesterName}</span>
+          </p>
+          <p className="text-sm text-muted-foreground">
+            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">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" /> Approve
+              </Button>
+              <Button variant="destructive" size="sm">
+                <X className="mr-1 h-4 w-4" /> Decline
+              </Button>
+              <Button variant="outline" size="sm">Message Requester</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">View Toy Listing</Button>
+              </Link>
+            </div>
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+}