Add category-modal.tsx to gifts page

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

@@ -1,3 +1,5 @@
+// Updated page.tsx with gift categories and summary sections
+
 "use client";
 
 import React, { useEffect, useState } from "react";
@@ -13,6 +15,7 @@ import {
   Edit,
   Trash,
   MoreHorizontal,
+  Settings,
 } from "lucide-react";
 import { useEvents } from "@/context/event-context";
 import { useGifts } from "@/context/gift-context";
@@ -43,6 +46,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { GiftStatus, GiftPriority } from "@/client/types.gen";
+import { CategoryModal } from "@/components/gifts/category-modal";
 
 export default function GiftRegistryPage() {
   const { slug } = useParams<{ slug: string }>();
@@ -59,6 +63,16 @@ export default function GiftRegistryPage() {
     setCurrentEventId,
   } = useGifts();
 
+  // State for modals
+  const [isAddGiftModalOpen, setIsAddGiftModalOpen] = useState(false);
+  const [isEditGiftModalOpen, setIsEditGiftModalOpen] = useState(false);
+  const [isAddCategoryModalOpen, setIsAddCategoryModalOpen] = useState(false);
+  const [isEditCategoryModalOpen, setIsEditCategoryModalOpen] = useState(false);
+  const [selectedGiftId, setSelectedGiftId] = useState<string | null>(null);
+  const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(
+    null,
+  );
+
   // State for filtering and searching
   const [searchQuery, setSearchQuery] = useState("");
   const [categoryFilter, setCategoryFilter] = useState<string>("all");
@@ -168,6 +182,25 @@ export default function GiftRegistryPage() {
         .reduce((acc, item) => acc + (item.quantity_requested || 1), 0) || 0,
   };
 
+  // Functions to handle modal actions
+  const handleAddGift = () => {
+    setIsAddGiftModalOpen(true);
+  };
+
+  const handleEditGift = (giftId: string) => {
+    setSelectedGiftId(giftId);
+    setIsEditGiftModalOpen(true);
+  };
+
+  const handleAddCategory = () => {
+    setIsAddCategoryModalOpen(true);
+  };
+
+  const handleEditCategory = (categoryId: string) => {
+    setSelectedCategoryId(categoryId);
+    setIsEditCategoryModalOpen(true);
+  };
+
   // Load event and gift data
   useEffect(() => {
     fetchEventBySlug(slug);
@@ -227,18 +260,47 @@ export default function GiftRegistryPage() {
       {/* Header */}
       <header className="mb-8 flex justify-between items-start">
         <div>
-          <h1 className="text-4xl font-bold tracking-tight">EVENTSPACE</h1>
+          {/*<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 Navigation */}
+      <div className="flex items-center text-sm text-gray-500 dark:text-gray-400">
+        <Link
+          href="/dashboard"
+          className="hover:text-gray-700 dark:hover:text-gray-300"
+        >
+          Dashboard
+        </Link>
+        <ChevronRight className="mx-1 h-4 w-4" />
+        <Link
+          href="/dashboard/events"
+          className="hover:text-gray-700 dark:hover:text-gray-300"
+        >
+          Events
+        </Link>
+        <ChevronRight className="mx-1 h-4 w-4" />
+        <Link
+          href={`/dashboard/events/${slug}`}
+          className="hover:text-gray-700 dark:hover:text-gray-300"
+        >
+          {event.title}
+        </Link>
+        <ChevronRight className="mx-1 h-4 w-4" />
+        <span className="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">
+          <Button
+            className="bg-blue-600 hover:bg-blue-700"
+            onClick={handleAddGift}
+          >
             <Plus className="mr-2 h-4 w-4" /> Add Gift
           </Button>
         </div>
@@ -343,7 +405,9 @@ export default function GiftRegistryPage() {
                               </Button>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
-                              <DropdownMenuItem>
+                              <DropdownMenuItem
+                                onClick={() => handleEditGift(item.id)}
+                              >
                                 <Edit className="h-4 w-4 mr-2" /> Edit
                               </DropdownMenuItem>
                               <DropdownMenuSeparator />
@@ -387,7 +451,157 @@ export default function GiftRegistryPage() {
             </TableBody>
           </Table>
         </div>
+
+        {/* Categories Section */}
+        <div className="mt-8">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-xl font-bold">CATEGORIES</h3>
+            <Button
+              variant="outline"
+              className="text-blue-600 border-blue-600"
+              onClick={handleAddCategory}
+            >
+              <Plus className="mr-2 h-4 w-4" /> Add Category
+            </Button>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            {categories && categories.length > 0 ? (
+              categories.map((category) => {
+                const categoryItems =
+                  items?.filter((item) => item.category_id === category.id) ||
+                  [];
+
+                return (
+                  <Card
+                    key={category.id}
+                    className="border border-gray-200 dark:border-gray-700"
+                  >
+                    <CardHeader className="pb-2">
+                      <div className="flex justify-between items-start">
+                        <CardTitle className="text-base font-medium">
+                          {category.name}
+                        </CardTitle>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="h-7 w-7"
+                            >
+                              <MoreHorizontal className="h-4 w-4" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuItem
+                              onClick={() => handleEditCategory(category.id)}
+                            >
+                              <Edit className="h-4 w-4 mr-2" /> Edit
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="text-red-600">
+                              <Trash className="h-4 w-4 mr-2" /> Delete
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </div>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="text-sm text-gray-500">
+                        {categoryItems.length} item
+                        {categoryItems.length !== 1 && "s"}
+                      </div>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="mt-2 text-blue-600 hover:text-blue-800 hover:bg-blue-50 p-0"
+                        onClick={() => handleEditCategory(category.id)}
+                      >
+                        Manage
+                      </Button>
+                    </CardContent>
+                  </Card>
+                );
+              })
+            ) : (
+              <Card className="border border-dashed border-gray-300 dark:border-gray-700 col-span-full">
+                <CardContent className="flex flex-col items-center justify-center py-6">
+                  <p className="text-center text-gray-500 mb-4">
+                    No categories found. Create your first category!
+                  </p>
+                  <Button
+                    variant="outline"
+                    onClick={handleAddCategory}
+                    className="border-blue-600 text-blue-600"
+                  >
+                    <Plus className="mr-2 h-4 w-4" /> Add Category
+                  </Button>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+        </div>
+
+        {/* Summary Section */}
+        <div className="mt-8 bg-gray-50 dark:bg-gray-800 rounded-lg p-6">
+          <h3 className="text-xl font-bold mb-4">SUMMARY</h3>
+          <ul className="space-y-2">
+            <li className="text-gray-700 dark:text-gray-300">
+              • {summaryStats.totalItems} total gift item
+              {summaryStats.totalItems !== 1 ? "s" : ""} across{" "}
+              {summaryStats.totalCategories} categor
+              {summaryStats.totalCategories !== 1 ? "ies" : "y"}
+            </li>
+            <li className="text-gray-700 dark:text-gray-300">
+              • {summaryStats.availableItems} gift
+              {summaryStats.availableItems !== 1 ? "s are" : " is"} available (
+              {summaryStats.availableQuantity} item
+              {summaryStats.availableQuantity !== 1 ? "s" : ""})
+            </li>
+            <li className="text-gray-700 dark:text-gray-300">
+              • {summaryStats.reservedItems} gift
+              {summaryStats.reservedItems !== 1 ? "s are" : " is"} reserved (
+              {summaryStats.reservedQuantity} item
+              {summaryStats.reservedQuantity !== 1 ? "s" : ""})
+            </li>
+            <li className="text-gray-700 dark:text-gray-300">
+              • {summaryStats.purchasedItems} gift
+              {summaryStats.purchasedItems !== 1 ? "s have" : " has"} been
+              purchased ({summaryStats.purchasedQuantity} item
+              {summaryStats.purchasedQuantity !== 1 ? "s" : ""})
+            </li>
+            <li className="text-gray-700 dark:text-gray-300">
+              • {summaryStats.receivedItems} gift
+              {summaryStats.receivedItems !== 1 ? "s have" : " has"} been fully
+              received ({summaryStats.receivedQuantity} item
+              {summaryStats.receivedQuantity !== 1 ? "s" : ""})
+            </li>
+          </ul>
+        </div>
       </div>
+
+      {/* Category Modals */}
+      {isAddCategoryModalOpen && (
+        <CategoryModal
+          isOpen={isAddCategoryModalOpen}
+          onClose={() => setIsAddCategoryModalOpen(false)}
+          eventId={event.id}
+        />
+      )}
+
+      {isEditCategoryModalOpen && selectedCategoryId && (
+        <CategoryModal
+          isOpen={isEditCategoryModalOpen}
+          onClose={() => {
+            setIsEditCategoryModalOpen(false);
+            setSelectedCategoryId(null);
+          }}
+          categoryId={selectedCategoryId}
+          eventId={event.id}
+        />
+      )}
+
+      {/* Modal placeholders - will be implemented later */}
+      {/* These would render the appropriate modals when isAddGiftModalOpen, etc. are true */}
     </div>
   );
 }