Add gift registry page
This commit is contained in:
421
frontend/src/app/(main)/dashboard/events/[slug]/gifts/page.tsx
Normal file
421
frontend/src/app/(main)/dashboard/events/[slug]/gifts/page.tsx
Normal file
@@ -0,0 +1,421 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { useParams } from "next/navigation";
|
||||||
|
import Link from "next/link";
|
||||||
|
import {
|
||||||
|
ChevronRight,
|
||||||
|
Loader2,
|
||||||
|
AlertTriangle,
|
||||||
|
Plus,
|
||||||
|
Search,
|
||||||
|
Filter,
|
||||||
|
Edit,
|
||||||
|
Trash,
|
||||||
|
MoreHorizontal,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { useEvents } from "@/context/event-context";
|
||||||
|
import { useGifts } from "@/context/gift-context";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "@/components/ui/table";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { GiftStatus, GiftPriority } from "@/client/types.gen";
|
||||||
|
|
||||||
|
export default function GiftRegistryPage() {
|
||||||
|
const { slug } = useParams<{ slug: string }>();
|
||||||
|
const { event, fetchEventBySlug, isLoadingEvent, eventError } = useEvents();
|
||||||
|
const {
|
||||||
|
categories,
|
||||||
|
items,
|
||||||
|
isLoadingCategories,
|
||||||
|
isLoadingItems,
|
||||||
|
error,
|
||||||
|
refetchCategories,
|
||||||
|
refetchItems,
|
||||||
|
currentEventId,
|
||||||
|
setCurrentEventId,
|
||||||
|
} = useGifts();
|
||||||
|
|
||||||
|
// State for filtering and searching
|
||||||
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
|
const [categoryFilter, setCategoryFilter] = useState<string>("all");
|
||||||
|
const [statusFilter, setStatusFilter] = useState<string>("all");
|
||||||
|
|
||||||
|
// Filter items based on search query and filters
|
||||||
|
const filteredItems = items
|
||||||
|
? items.filter((item) => {
|
||||||
|
// Filter by search query
|
||||||
|
const matchesSearch =
|
||||||
|
searchQuery === "" ||
|
||||||
|
item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
item.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
item.store_name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
item.brand?.toLowerCase().includes(searchQuery.toLowerCase());
|
||||||
|
|
||||||
|
// Filter by category
|
||||||
|
const matchesCategory =
|
||||||
|
categoryFilter === "all" || item.category_id === categoryFilter;
|
||||||
|
|
||||||
|
// Filter by status
|
||||||
|
const matchesStatus =
|
||||||
|
statusFilter === "all" || item.status === statusFilter;
|
||||||
|
|
||||||
|
return matchesSearch && matchesCategory && matchesStatus;
|
||||||
|
})
|
||||||
|
: [];
|
||||||
|
|
||||||
|
// Helper to get status badge with color
|
||||||
|
const getStatusBadge = (status: GiftStatus | null | undefined) => {
|
||||||
|
if (!status) return null;
|
||||||
|
|
||||||
|
const statusStyles: Record<GiftStatus, string> = {
|
||||||
|
available:
|
||||||
|
"bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
|
||||||
|
reserved:
|
||||||
|
"bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300",
|
||||||
|
purchased:
|
||||||
|
"bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
|
||||||
|
received:
|
||||||
|
"bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300",
|
||||||
|
removed: "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300",
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="h-2 w-2 rounded-full bg-current"></div>
|
||||||
|
<Badge variant="outline" className={statusStyles[status]}>
|
||||||
|
{status.toUpperCase()}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Helper to get priority badge with color
|
||||||
|
const getPriorityBadge = (priority: GiftPriority | null | undefined) => {
|
||||||
|
if (!priority) return null;
|
||||||
|
|
||||||
|
const priorityStyles: Record<GiftPriority, string> = {
|
||||||
|
low: "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300",
|
||||||
|
medium: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
|
||||||
|
high: "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300",
|
||||||
|
must_have: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
|
||||||
|
};
|
||||||
|
|
||||||
|
const priorityLabels: Record<GiftPriority, string> = {
|
||||||
|
low: "LOW",
|
||||||
|
medium: "MEDIUM",
|
||||||
|
high: "HIGH",
|
||||||
|
must_have: "MUST-HAVE",
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Badge variant="outline" className={priorityStyles[priority]}>
|
||||||
|
{priorityLabels[priority]}
|
||||||
|
</Badge>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Calculate summary statistics
|
||||||
|
const summaryStats = {
|
||||||
|
totalItems: items?.length || 0,
|
||||||
|
totalCategories: categories?.length || 0,
|
||||||
|
availableItems:
|
||||||
|
items?.filter((item) => item.status === GiftStatus.AVAILABLE).length || 0,
|
||||||
|
availableQuantity:
|
||||||
|
items
|
||||||
|
?.filter((item) => item.status === GiftStatus.AVAILABLE)
|
||||||
|
.reduce((acc, item) => acc + (item.quantity_requested || 1), 0) || 0,
|
||||||
|
reservedItems:
|
||||||
|
items?.filter((item) => item.status === GiftStatus.RESERVED).length || 0,
|
||||||
|
reservedQuantity:
|
||||||
|
items
|
||||||
|
?.filter((item) => item.status === GiftStatus.RESERVED)
|
||||||
|
.reduce((acc, item) => acc + (item.quantity_requested || 1), 0) || 0,
|
||||||
|
purchasedItems:
|
||||||
|
items?.filter((item) => item.status === GiftStatus.PURCHASED).length || 0,
|
||||||
|
purchasedQuantity:
|
||||||
|
items
|
||||||
|
?.filter((item) => item.status === GiftStatus.PURCHASED)
|
||||||
|
.reduce((acc, item) => acc + (item.quantity_requested || 1), 0) || 0,
|
||||||
|
receivedItems:
|
||||||
|
items?.filter((item) => item.status === GiftStatus.RECEIVED).length || 0,
|
||||||
|
receivedQuantity:
|
||||||
|
items
|
||||||
|
?.filter((item) => item.status === GiftStatus.RECEIVED)
|
||||||
|
.reduce((acc, item) => acc + (item.quantity_requested || 1), 0) || 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Load event and gift data
|
||||||
|
useEffect(() => {
|
||||||
|
fetchEventBySlug(slug);
|
||||||
|
}, [slug, fetchEventBySlug]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (event?.id) {
|
||||||
|
setCurrentEventId(event.id);
|
||||||
|
refetchCategories(event.id);
|
||||||
|
refetchItems(undefined, event.id);
|
||||||
|
}
|
||||||
|
}, [event, setCurrentEventId, refetchCategories, refetchItems]);
|
||||||
|
|
||||||
|
// Loading state
|
||||||
|
if (isLoadingEvent || isLoadingCategories || isLoadingItems) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center min-h-[50vh]">
|
||||||
|
<Loader2 className="h-8 w-8 animate-spin text-blue-500" />
|
||||||
|
<span className="ml-2">Loading gift registry...</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Error state
|
||||||
|
if (eventError || error) {
|
||||||
|
return (
|
||||||
|
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative flex items-center">
|
||||||
|
<AlertTriangle className="h-5 w-5 mr-2" />
|
||||||
|
<span>
|
||||||
|
Error loading gift registry: {(eventError || error)?.message}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Not found state
|
||||||
|
if (!event) {
|
||||||
|
return (
|
||||||
|
<Card className="max-w-3xl mx-auto">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Event Not Found</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p>
|
||||||
|
The event you're looking for doesn't exist or may have been removed.
|
||||||
|
</p>
|
||||||
|
<Button asChild className="mt-4">
|
||||||
|
<Link href="/dashboard">Return to Dashboard</Link>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-8">
|
||||||
|
{/* Header */}
|
||||||
|
<header className="mb-8 flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-4xl font-bold tracking-tight">EVENTSPACE</h1>
|
||||||
|
<div className="mt-2 text-gray-500 dark:text-gray-400">
|
||||||
|
Admin • {event.title}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Breadcrumb */}
|
||||||
|
<div className="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-6">
|
||||||
|
<Link
|
||||||
|
href="/dashboard"
|
||||||
|
className="hover:text-blue-600 dark:hover:text-blue-400"
|
||||||
|
>
|
||||||
|
Dashboard
|
||||||
|
</Link>
|
||||||
|
<ChevronRight className="h-4 w-4 mx-1" />
|
||||||
|
<Link
|
||||||
|
href="/dashboard/events"
|
||||||
|
className="hover:text-blue-600 dark:hover:text-blue-400"
|
||||||
|
>
|
||||||
|
Events
|
||||||
|
</Link>
|
||||||
|
<ChevronRight className="h-4 w-4 mx-1" />
|
||||||
|
<Link
|
||||||
|
href={`/dashboard/events/${event.slug}`}
|
||||||
|
className="hover:text-blue-600 dark:hover:text-blue-400"
|
||||||
|
>
|
||||||
|
{event.title}
|
||||||
|
</Link>
|
||||||
|
<ChevronRight className="h-4 w-4 mx-1" />
|
||||||
|
<span className="font-medium text-gray-900 dark:text-gray-100">
|
||||||
|
Gift Registry
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Gift Registry Content */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h2 className="text-2xl font-bold">GIFT REGISTRY MANAGEMENT</h2>
|
||||||
|
<Button className="bg-blue-600 hover:bg-blue-700">
|
||||||
|
<Plus className="mr-2 h-4 w-4" /> Add Gift
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filters and Search */}
|
||||||
|
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm">Filter by:</span>
|
||||||
|
<Select value={categoryFilter} onValueChange={setCategoryFilter}>
|
||||||
|
<SelectTrigger className="w-[150px]">
|
||||||
|
<SelectValue placeholder="Category" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">All Categories</SelectItem>
|
||||||
|
{categories?.map((category) => (
|
||||||
|
<SelectItem key={category.id} value={category.id}>
|
||||||
|
{category.name}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||||
|
<SelectTrigger className="w-[150px]">
|
||||||
|
<SelectValue placeholder="Status" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">All Statuses</SelectItem>
|
||||||
|
<SelectItem value={GiftStatus.AVAILABLE}>
|
||||||
|
Available
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value={GiftStatus.RESERVED}>Reserved</SelectItem>
|
||||||
|
<SelectItem value={GiftStatus.PURCHASED}>
|
||||||
|
Purchased
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value={GiftStatus.RECEIVED}>Received</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="relative w-full sm:w-64">
|
||||||
|
<Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-500" />
|
||||||
|
<Input
|
||||||
|
placeholder="Search gifts..."
|
||||||
|
className="pl-8"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Gift Items Table */}
|
||||||
|
<div className="rounded-md border overflow-x-auto">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Category</TableHead>
|
||||||
|
<TableHead>Name</TableHead>
|
||||||
|
<TableHead>Qty</TableHead>
|
||||||
|
<TableHead>Price</TableHead>
|
||||||
|
<TableHead>Priority</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead className="text-right">Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{filteredItems.length === 0 ? (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={7} className="text-center py-8">
|
||||||
|
No gifts found. Add your first gift!
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
) : (
|
||||||
|
filteredItems.map((item) => {
|
||||||
|
const category = categories?.find(
|
||||||
|
(c) => c.id === item.category_id,
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<React.Fragment key={item.id}>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell>
|
||||||
|
{category?.name || "Uncategorized"}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="font-medium">
|
||||||
|
{item.name}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{item.quantity_requested || 1}</TableCell>
|
||||||
|
<TableCell>{item.formatted_price || "-"}</TableCell>
|
||||||
|
<TableCell>{getPriorityBadge(item.priority)}</TableCell>
|
||||||
|
<TableCell>{getStatusBadge(item.status)}</TableCell>
|
||||||
|
<TableCell className="text-right">
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="h-8 w-8"
|
||||||
|
>
|
||||||
|
<MoreHorizontal className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<Edit className="h-4 w-4 mr-2" /> Edit
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem className="text-red-600">
|
||||||
|
<Trash className="h-4 w-4 mr-2" /> Delete
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell
|
||||||
|
colSpan={7}
|
||||||
|
className="py-1 px-4 border-t-0 bg-gray-50 dark:bg-gray-800/50 text-sm text-gray-500 dark:text-gray-400"
|
||||||
|
>
|
||||||
|
{item.status === GiftStatus.AVAILABLE && (
|
||||||
|
<>
|
||||||
|
Store: {item.store_name || "N/A"} •{" "}
|
||||||
|
{item.purchase_url
|
||||||
|
? `URL: ${item.purchase_url}`
|
||||||
|
: `Brand: ${item.brand || "N/A"}`}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{item.status === GiftStatus.RESERVED && (
|
||||||
|
<>Reserved by: John Smith on April 12, 2025</>
|
||||||
|
)}
|
||||||
|
{item.status === GiftStatus.PURCHASED && (
|
||||||
|
<>Purchased by: Maria Lopez on April 10, 2025</>
|
||||||
|
)}
|
||||||
|
{item.status === GiftStatus.RECEIVED && (
|
||||||
|
<>
|
||||||
|
Received: Complete! • Brand: {item.brand || "N/A"}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</React.Fragment>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user