Add gift registry page

frontend/src/app/(main)/dashboard/events/[slug]/gifts/page.tsx

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