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

frontend/src/components/gifts/category-modal.tsx

@@ -0,0 +1,205 @@
+// components/gifts/category-modal.tsx
+
+import React, { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { useGifts } from "@/context/gift-context";
+import {
+  GiftCategory,
+  GiftCategoryCreate,
+  GiftCategoryUpdate,
+} from "@/client/types.gen";
+import { Loader2 } from "lucide-react";
+import { useAuth } from "@/context/auth-context";
+
+interface CategoryModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  categoryId?: string;
+  eventId: string;
+}
+
+export function CategoryModal({
+  isOpen,
+  onClose,
+  categoryId,
+  eventId,
+}: CategoryModalProps) {
+  const {
+    category,
+    createCategory,
+    updateCategory,
+    fetchCategoryById,
+    isLoadingCategory,
+  } = useGifts();
+
+  const { user } = useAuth();
+  const isEditMode = Boolean(categoryId);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<GiftCategoryCreate | GiftCategoryUpdate>();
+
+  // Load category data when editing
+  useEffect(() => {
+    if (isEditMode && categoryId) {
+      fetchCategoryById(categoryId, eventId);
+    }
+  }, [isEditMode, categoryId, eventId, fetchCategoryById]);
+
+  // Reset form when modal opens or category changes
+  useEffect(() => {
+    if (isOpen) {
+      if (isEditMode && category) {
+        reset({
+          name: category.name,
+          description: category.description,
+          icon: category.icon,
+          color: category.color,
+        });
+      } else {
+        reset({
+          name: "",
+          description: "",
+          icon: "",
+          color: "#4f46e5", // Default color
+        });
+      }
+    }
+  }, [isOpen, category, isEditMode, reset]);
+
+  const onSubmit = async (data: GiftCategoryCreate | GiftCategoryUpdate) => {
+    try {
+      if (isEditMode && categoryId) {
+        await updateCategory(categoryId, data as GiftCategoryUpdate, eventId);
+      } else {
+        const createData = {
+          ...data,
+          created_by: user?.id, // This should be replaced with the actual user ID
+        } as GiftCategoryCreate;
+
+        await createCategory(createData);
+      }
+      onClose();
+    } catch (error) {
+      console.error("Error saving category:", error);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>
+            {isEditMode ? "Edit Category" : "Add Category"}
+          </DialogTitle>
+        </DialogHeader>
+
+        {isLoadingCategory && isEditMode ? (
+          <div className="flex justify-center items-center py-8">
+            <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <div className="grid gap-4 py-4">
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="name" className="text-right col-span-1">
+                  Name
+                </Label>
+                <div className="col-span-3">
+                  <Input
+                    id="name"
+                    placeholder="Category name"
+                    {...register("name", { required: "Name is required" })}
+                    className={errors.name ? "border-red-500" : ""}
+                  />
+                  {errors.name && (
+                    <p className="text-red-500 text-sm mt-1">
+                      {errors.name.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="description" className="text-right col-span-1">
+                  Description
+                </Label>
+                <div className="col-span-3">
+                  <Textarea
+                    id="description"
+                    placeholder="Optional description"
+                    {...register("description")}
+                    className="min-h-[80px]"
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="icon" className="text-right col-span-1">
+                  Icon
+                </Label>
+                <div className="col-span-3">
+                  <Input
+                    id="icon"
+                    placeholder="Icon name or URL"
+                    {...register("icon")}
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="color" className="text-right col-span-1">
+                  Color
+                </Label>
+                <div className="col-span-3 flex gap-2 items-center">
+                  <Input
+                    id="color"
+                    type="color"
+                    className="w-12 h-8 p-0"
+                    {...register("color")}
+                  />
+                  <Input
+                    type="text"
+                    placeholder="#RRGGBB"
+                    className="flex-1"
+                    {...register("color")}
+                  />
+                </div>
+              </div>
+            </div>
+
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={onClose}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isSubmitting}>
+                {isSubmitting ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Saving...
+                  </>
+                ) : (
+                  <>{isEditMode ? "Update" : "Create"}</>
+                )}
+              </Button>
+            </DialogFooter>
+          </form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}