@devvistatech/devvista-kit 0.0.12 → 0.0.13

package/components/addOns/functional/galleries/GalleryComplex.tsx

@@ -6,18 +6,23 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/other/tab
 import { motion, useScroll, useTransform } from "framer-motion";
 import Image from "next/image";
 import { ActionButton, EditIconButton, TrashIconButton, CloseButton, SubmitButton, CancelButton, FilterButton, DeleteButton } from "@/components/other/button";
-import { Upload, X } from "lucide-react";
-import { useUser, useAuth } from "@clerk/nextjs";
-import { useStrapiAuth } from "@/lib/auth-context";
+import { Upload, X, Star } from "lucide-react";
+import { useAuth } from "@clerk/nextjs";
+import { useStrapiAuth } from "@/lib/auth/auth-context";
+import { isAdminUser } from "@/lib/auth/auth-utils";
 import { GALLERY_COMPLEX } from "./constants/galleryComplex";
-import { StrapiUser, UploadedImage, EditFormState, Category } from "@/components/types";
+import { compressImage } from "@/lib/utils/compressImage";
+import { StrapiUser, UploadedImage, Category, EditFormState, UploadFormState } from "@/lib/types";
+
+const PRODUCT_CATEGORIES: Category[] = ["indoor", "outdoor", "commercial"];
+const VISIBLE_FILTER_CATEGORIES: Category[] = ["indoor", "outdoor", "commercial"];
 
 interface GallerySectionProps {
   user: StrapiUser | null;
   setUser: (user: StrapiUser | null) => void;
   authLoading: boolean;
   uploadedImages: UploadedImage[];
-  setUploadedImages: (images: UploadedImage[]) => void;
+  setUploadedImages: React.Dispatch<React.SetStateAction<UploadedImage[]>>;
   error: string | null;
   setError: (error: string | null) => void;
   isLoading: boolean;
@@ -27,11 +32,23 @@ interface GallerySectionProps {
     file: File | null,
     title: string,
     description: string,
-    category: Category
+    category: Category,
+    subCategory: string,
+    favorite: boolean
   ) => Promise<void>;
   handleDeleteImage: (documentId: string) => Promise<void>;
 }
 
+const FavoriteIconButton = ({ isFavorite, onClick }: { isFavorite: boolean; onClick: (e: React.MouseEvent) => void }) => (
+  <button
+    onClick={onClick}
+    className="p-2 rounded-full transition-colors bg-yellow-500 text-white"
+    aria-label="Remove from favorites"
+  >
+    <Star className="h-5 w-5 fill-current" />
+  </button>
+);
+
 export function GallerySection({
   user,
   setUser,
@@ -45,10 +62,9 @@ export function GallerySection({
   handleImageUpload,
   handleDeleteImage,
 }: GallerySectionProps) {
-  const { isSignedIn } = useUser();
-  const { getToken } = useAuth();
+  const { getToken, isSignedIn } = useAuth();
   const { checkSession } = useStrapiAuth();
-  const isAdmin = isSignedIn && !!user?.businessAdminId || false;
+  const [isAdmin, setIsAdmin] = useState(false);
   const [activeTab, setActiveTab] = useState("photos");
   const [activeSubTab, setActiveSubTab] = useState("all");
   const [selectedImage, setSelectedImage] = useState<UploadedImage | null>(null);
@@ -64,14 +80,25 @@ export function GallerySection({
     title: "",
     description: "",
     category: "none",
+    subCategory: "",
     file: null,
+    favorite: false,
+    banner: false,
+    startDate: "",
+    endDate: "",
+  });
+  const [uploadForm, setUploadForm] = useState<UploadFormState>({
+    file: null,
+    title: "",
+    description: "",
+    category: "none",
+    subCategory: "",
+    favorite: false,
+    banner: false,
+    startDate: "",
+    endDate: "",
   });
-  const [uploadForm, setUploadForm] = useState<{
-    file: File | null;
-    title: string;
-    description: string;
-    category: Category;
-  }>({ file: null, title: "", description: "", category: "none" });
+  const [subCategories, setSubCategories] = useState<string[]>([]);
   const containerRef = useRef<HTMLDivElement>(null);
   const { scrollYProgress } = useScroll({
     target: containerRef,
@@ -79,6 +106,32 @@ export function GallerySection({
   });
   const parallaxY = useTransform(scrollYProgress, [0, 1], [0, -50]);
 
+  useEffect(() => {
+    let isMounted = true;
+    const checkAdmin = async () => {
+      if (!isSignedIn || !user?.authId) {
+        if (isMounted) setIsAdmin(false);
+        return;
+      }
+      const adminStatus = await isAdminUser(isSignedIn, user);
+      if (isMounted) setIsAdmin(adminStatus);
+    };
+    checkAdmin();
+    return () => {
+      isMounted = false;
+    };
+  }, [isSignedIn, user]);
+
+  useEffect(() => {
+    const subCats = uploadedImages
+      .filter((img) => img.category === activeSubTab && typeof img.subCategory === "string" && img.subCategory !== "")
+      .reduce<string[]>((acc, img) => {
+        const subCategory = img.subCategory as string;
+        return acc.includes(subCategory) ? acc : [...acc, subCategory];
+      }, []);
+    setSubCategories(subCats);
+  }, [uploadedImages, activeSubTab]);
+
   const filteredImages = activeTab === "photos"
     ? activeSubTab === "all"
       ? uploadedImages
@@ -89,7 +142,7 @@ export function GallerySection({
     const handleLogin = () => checkSession();
     const handleLogout = () => checkSession();
     window.addEventListener("user-login", handleLogin);
-    window.removeEventListener("user-logout", handleLogout);
+    window.addEventListener("user-logout", handleLogout);
     return () => {
       window.removeEventListener("user-login", handleLogin);
       window.removeEventListener("user-logout", handleLogout);
@@ -124,15 +177,10 @@ export function GallerySection({
   useEffect(() => {
     const handleEsc = (e: KeyboardEvent) => {
       if (e.key === "Escape") {
-        if (isConfirmDeleteOpen) {
-          handleCancelDelete();
-        } else if (selectedImage) {
-          handleCloseModal();
-        } else if (isEditModalOpen) {
-          handleCloseEditModal();
-        } else if (isUploadModalOpen) {
-          handleCloseUploadModal();
-        }
+        if (isConfirmDeleteOpen) handleCancelDelete();
+        else if (selectedImage) handleCloseModal();
+        else if (isEditModalOpen) handleCloseEditModal();
+        else if (isUploadModalOpen) handleCloseUploadModal();
       }
     };
     window.addEventListener("keydown", handleEsc);
@@ -172,7 +220,7 @@ export function GallerySection({
   };
 
   const handleImageClick = (image: UploadedImage) => {
-    setSelectedImage(image);
+    if (image.url) setSelectedImage(image);
   };
 
   const handleCloseModal = () => {
@@ -190,19 +238,75 @@ export function GallerySection({
       title: image.title?.trim() && !image.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) ? image.title : "",
       description: image.description || "",
       category: image.category || "none",
+      subCategory: image.subCategory || "",
       file: null,
+      favorite: image.favorite,
+      banner: image.banner,
+      startDate: image.startDate || "",
+      endDate: image.endDate || "",
     });
     setIsEditModalOpen(true);
   };
 
   const handleCloseEditModal = () => {
     setIsEditModalOpen(false);
-    setEditForm({ id: 0, documentId: "", title: "", description: "", category: "none", file: null });
+    setEditForm({ id: 0, documentId: "", title: "", description: "", category: "none", subCategory: "", file: null, favorite: false, banner: false, startDate: "", endDate: "" });
   };
 
   const handleCloseUploadModal = () => {
     setIsUploadModalOpen(false);
-    setUploadForm({ file: null, title: "", description: "", category: "none" });
+    setUploadForm({ file: null, title: "", description: "", category: "none", subCategory: "", favorite: false, banner: false, startDate: "", endDate: "" });
+  };
+
+  const handleToggleFavorite = async (image: UploadedImage, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!isSignedIn) {
+      setError(GALLERY_COMPLEX.ERRORS.AUTHENTICATION_ERROR);
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const token = await getToken();
+      if (!token) {
+        console.error("GallerySection: No authentication token available", { timestamp: new Date().toISOString() });
+        setError(GALLERY_COMPLEX.ERRORS.AUTHENTICATION_ERROR);
+        setUser(null);
+        return;
+      }
+
+      const formData = new FormData();
+      formData.append("documentId", image.documentId);
+      formData.append("favorite", (!image.favorite).toString());
+
+      const response = await fetch("/api/gallery-data", {
+        method: "PUT",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        body: formData,
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        console.error("GallerySection: Toggle favorite failed", { status: response.status, errorData, timestamp: new Date().toISOString() });
+        if (response.status === 401) {
+          setError(GALLERY_COMPLEX.ERRORS.AUTHENTICATION_ERROR);
+          setUser(null);
+          return;
+        }
+        throw new Error(errorData.error || GALLERY_COMPLEX.ERRORS.EDIT_FAILED_STATUS.replace("${response.status}", response.status.toString()));
+      }
+
+      const { data } = await response.json();
+      setUploadedImages(data || []);
+      setError(null);
+    } catch (err) {
+      console.error("GallerySection: Toggle Favorite Error", { error: err instanceof Error ? err.message : "Unknown error", timestamp: new Date().toISOString() });
+      setError(err instanceof Error ? err.message : GALLERY_COMPLEX.ERRORS.EDIT_FAILED);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   const handleEditImage = async (e: React.FormEvent<HTMLFormElement>) => {
@@ -210,7 +314,11 @@ export function GallerySection({
     if (!isAdmin) {
       console.error("GallerySection: Unauthorized edit attempt", {
         isSignedIn,
+        authId: user?.authId,
         businessAdminId: user?.businessAdminId,
+        userRole: user?.userRole,
+        businessOwner: user?.businessOwner ?? null,
+        timestamp: new Date().toISOString(),
       });
       setError(GALLERY_COMPLEX.ERRORS.UNAUTHORIZED_EDIT);
       return;
@@ -220,7 +328,9 @@ export function GallerySection({
       setIsLoading(true);
       const token = await getToken();
       if (!token) {
-        console.error("GallerySection: No authentication token available");
+        console.error("GallerySection: No authentication token available", {
+          timestamp: new Date().toISOString(),
+        });
         setError(GALLERY_COMPLEX.ERRORS.AUTHENTICATION_ERROR);
         setUser(null);
         return;
@@ -231,8 +341,11 @@ export function GallerySection({
       formData.append("title", editForm.title || `Image ${new Date().toISOString()}`);
       formData.append("description", editForm.description || "");
       formData.append("category", editForm.category || "none");
+      formData.append("subCategory", editForm.subCategory || "");
+      formData.append("favorite", editForm.favorite.toString());
       if (editForm.file) {
-        formData.append("file", editForm.file);
+        const compressedImage = await compressImage(editForm.file);
+        formData.append("file", compressedImage);
       }
 
       const response = await fetch("/api/gallery-data", {
@@ -245,7 +358,7 @@ export function GallerySection({
 
       if (!response.ok) {
         const errorData = await response.json();
-        console.error("GallerySection: Edit failed", { status: response.status, errorData });
+        console.error("GallerySection: Edit failed", { status: response.status, errorData, timestamp: new Date().toISOString() });
         if (response.status === 401) {
           setError(GALLERY_COMPLEX.ERRORS.AUTHENTICATION_ERROR);
           setUser(null);
@@ -258,9 +371,9 @@ export function GallerySection({
       setUploadedImages(data || []);
       setError(null);
       setIsEditModalOpen(false);
-      setEditForm({ id: 0, documentId: "", title: "", description: "", category: "none", file: null });
+      setEditForm({ id: 0, documentId: "", title: "", description: "", category: "none", subCategory: "", file: null, favorite: false, banner: false, startDate: "", endDate: "" });
     } catch (err) {
-      console.error("GallerySection: Edit Error", err);
+      console.error("GallerySection: Edit Error", { error: err instanceof Error ? err.message : "Unknown error", timestamp: new Date().toISOString() });
       setError(err instanceof Error ? err.message : GALLERY_COMPLEX.ERRORS.EDIT_FAILED);
     } finally {
       setIsLoading(false);
@@ -272,24 +385,34 @@ export function GallerySection({
     if (!isAdmin) {
       console.error("GallerySection: Unauthorized upload attempt", {
         isSignedIn,
+        authId: user?.authId,
         businessAdminId: user?.businessAdminId,
+        userRole: user?.userRole,
+        businessOwner: user?.businessOwner ?? null,
+        timestamp: new Date().toISOString(),
       });
       setError(GALLERY_COMPLEX.ERRORS.UNAUTHORIZED_UPLOAD);
       return;
     }
     setIsLoading(true);
     try {
+      let compressedFile: File | null = null;
+      if (uploadForm.file) {
+        compressedFile = await compressImage(uploadForm.file);
+      }
       await handleImageUpload(
         e,
-        uploadForm.file,
+        compressedFile,
         uploadForm.title,
         uploadForm.description,
-        uploadForm.category || "none"
+        uploadForm.category || "none",
+        uploadForm.subCategory || "",
+        uploadForm.favorite
       );
-      setUploadForm({ file: null, title: "", description: "", category: "none" });
+      setUploadForm({ file: null, title: "", description: "", category: "none", subCategory: "", favorite: false, banner: false, startDate: "", endDate: "" });
       setIsUploadModalOpen(false);
     } catch (err) {
-      console.error("GallerySection: Upload Error", err);
+      console.error("GallerySection: Upload Error", { error: err instanceof Error ? err.message : "Unknown error", timestamp: new Date().toISOString() });
       setError(err instanceof Error ? err.message : GALLERY_COMPLEX.ERRORS.UPLOAD_FAILED);
     } finally {
       setIsLoading(false);
@@ -324,7 +447,96 @@ export function GallerySection({
   };
 
   return (
-    <div className="w-full font-inter">
+    <div className="w-full">
+      <style jsx>{`
+        :root {
+          --jubilee: #F47C7C;
+          --exuberant-blue: #FF69B4;
+          --modern-purple: #D946EF;
+          --primary-color: #2563eb;
+          --background-color: #ffffff;
+          --text-color: #374151;
+          --border-color: #e5e7eb;
+        }
+
+        .glassmorphism {
+          background: rgba(255, 255, 255, 0.08);
+          backdrop-filter: blur(10px);
+          -webkit-backdrop-filter: blur(10px);
+          border: 2px solid transparent;
+          border-image: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple)) 1;
+          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
+        }
+
+        .modal-glassmorphism {
+          background: rgba(255, 255, 255, 0.08);
+          backdrop-filter: blur(10px);
+          -webkit-backdrop-filter: blur(10px);
+          border: 2px solid transparent;
+          border-image: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple)) 1;
+          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
+          border-radius: 2rem;
+          max-height: 90vh;
+          overflow: hidden;
+        }
+
+        @supports not (backdrop-filter: blur(10px)) {
+          .glassmorphism {
+            background: rgba(255, 255, 255, 0.2);
+          }
+          .modal-glassmorphism {
+            background: rgba(255, 255, 255, 0.2);
+          }
+        }
+
+        @media (max-width: 768px) {
+          .glassmorphism {
+            backdrop-filter: none;
+            background: rgba(255, 255, 255, 0.2);
+          }
+          .modal-glassmorphism {
+            padding: 1rem;
+            max-height: 85vh;
+          }
+        }
+
+        .motion-card {
+          will-change: transform, opacity;
+        }
+
+        .tabs-list {
+          background: var(--background-color);
+          border: 1px solid var(--border-color);
+          border-radius: 0.5rem;
+          padding: 0.5rem;
+          height: auto;
+        }
+
+        .tabs-trigger {
+          color: var(--text-color);
+          font-weight: 500;
+          font-size: 1rem;
+          border-radius: 0.25rem;
+          padding: 0.5rem 1rem;
+          transition: all 0.2s ease-in-out;
+        }
+
+        .tabs-trigger[data-state="active"] {
+          background: var(--primary-color);
+          color: #ffffff;
+        }
+
+        @media (max-width: 768px) {
+          .tabs-list {
+            padding: 0.25rem;
+          }
+
+          .tabs-trigger {
+            font-size: 0.875rem;
+            padding: 0.5rem;
+          }
+        }
+      `}</style>
       <motion.div
         variants={sectionVariants}
         initial="hidden"
@@ -334,13 +546,9 @@ export function GallerySection({
         ref={containerRef}
       >
         <Tabs defaultValue="photos" className="w-full" onValueChange={(value) => setActiveTab(value)}>
-          <TabsList className="grid w-full md:w-3/4 mx-auto grid-cols-2 mb-12 bg-white/10 backdrop-blur-lg border-2 border-transparent shadow-xl rounded-[2rem] p-4 h-24 supports-[not(backdrop-filter:blur(10px))]:bg-white/20">
+          <TabsList className="grid w-full md:w-3/4 mx-auto grid-cols-2 mb-12 tabs-list">
             {["photos", "videos"].map((tab) => (
-              <TabsTrigger
-                key={tab}
-                value={tab}
-                className="rounded-[1.5rem] text-xl sm:text-2xl font-bold text-gray-700 data-[state=active]:text-white data-[state=active]:bg-blue-600 h-full flex items-center justify-center transition-all duration-300"
-              >
+              <TabsTrigger key={tab} value={tab} className="tabs-trigger">
                 {tab === "photos" ? GALLERY_COMPLEX.UI.PHOTOS_TAB : GALLERY_COMPLEX.UI.VIDEOS_TAB}
               </TabsTrigger>
             ))}
@@ -354,19 +562,19 @@ export function GallerySection({
                     onChange={(e) => setActiveSubTab(e.target.value)}
                     className="px-4 py-2 text-base font-medium text-gray-600 bg-white rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full max-w-xs"
                   >
-                    {["all", "indoor", "outdoor", "commercial"].map((subTab) => (
+                    {["all", ...VISIBLE_FILTER_CATEGORIES].map((subTab) => (
                       <option key={subTab} value={subTab}>
                         {subTab === "all" ? GALLERY_COMPLEX.UI.ALL_SUB_TAB :
-                          subTab === "indoor" ? GALLERY_COMPLEX.UI.INDOOR_SUB_TAB :
-                            subTab === "outdoor" ? GALLERY_COMPLEX.UI.OUTDOOR_SUB_TAB :
-                              GALLERY_COMPLEX.UI.COMMERCIAL_SUB_TAB}
+                         subTab === "indoor" ? GALLERY_COMPLEX.UI.CATEGORY_INDOOR :
+                         subTab === "outdoor" ? GALLERY_COMPLEX.UI.CATEGORY_OUTDOOR :
+                         GALLERY_COMPLEX.UI.CATEGORY_COMMERCIAL}
                       </option>
                     ))}
                   </select>
                 </div>
               ) : (
-                <div className="flex justify-center gap-4 mb-12 max-w-2xl mx-auto">
-                  {["all", "indoor", "outdoor", "commercial"].map((subTab) => (
+                <div className="flex flex-wrap justify-center gap-4 mb-12 max-w-4xl mx-auto">
+                  {["all", ...VISIBLE_FILTER_CATEGORIES].map((subTab) => (
                     <FilterButton
                       key={subTab}
                       isActive={activeSubTab === subTab}
@@ -374,15 +582,15 @@ export function GallerySection({
                       onClick={() => setActiveSubTab(subTab)}
                     >
                       {subTab === "all" ? GALLERY_COMPLEX.UI.ALL_SUB_TAB :
-                        subTab === "indoor" ? GALLERY_COMPLEX.UI.INDOOR_SUB_TAB :
-                          subTab === "outdoor" ? GALLERY_COMPLEX.UI.OUTDOOR_SUB_TAB :
-                            GALLERY_COMPLEX.UI.COMMERCIAL_SUB_TAB}
+                       subTab === "indoor" ? GALLERY_COMPLEX.UI.CATEGORY_INDOOR :
+                       subTab === "outdoor" ? GALLERY_COMPLEX.UI.CATEGORY_OUTDOOR :
+                       GALLERY_COMPLEX.UI.CATEGORY_COMMERCIAL}
                     </FilterButton>
                   ))}
                 </div>
               )}
 
-              {["all", "indoor", "outdoor", "commercial"].map((subTab) => (
+              {["all", ...VISIBLE_FILTER_CATEGORIES].map((subTab) => (
                 <TabsContent key={subTab} value={subTab}>
                   <div className="space-y-6">
                     {error && (
@@ -407,71 +615,76 @@ export function GallerySection({
                           style={{ y: isMobile ? 0 : parallaxY }}
                         >
                           {filteredImages.slice(0, visiblePhotos).map((image, index) => (
-                            <motion.div
-                              key={image.documentId}
-                              variants={cardVariants}
-                              initial="hidden"
-                              whileInView="visible"
-                              viewport={{ once: true, amount: 0.2 }}
-                              onClick={() => handleImageClick(image)}
-                              className="cursor-pointer will-change-transform will-change-opacity"
-                            >
-                              <Card className="overflow-hidden bg-white/10 backdrop-blur-lg border-2 border-transparent shadow-xl rounded-[1.5rem] p-2 sm:p-4 relative supports-[not(backdrop-filter:blur(10px))]:bg-white/20">
+                              <motion.div
+                                key={image.documentId}
+                                variants={cardVariants}
+                                initial="hidden"
+                                whileInView="visible"
+                                viewport={{ once: true, amount: 0.2 }}
+                                onClick={() => handleImageClick(image)}
+                                className="cursor-pointer motion-card"
+                              >
+                              <Card className="overflow-hidden glassmorphism rounded-[1.5rem] shadow-4xl p-2 sm:p-4 relative">
                                 <div className="relative w-full aspect-[3/2]">
-                                  <Image
-                                    src={image.url}
-                                    alt={
-                                      image.title?.trim() &&
+                                    <Image
+                                      src={image.url}
+                                      alt={
+                                        image.title?.trim() &&
                                         !image.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
-                                        ? image.title
-                                        : GALLERY_COMPLEX.UI.DEFAULT_IMAGE_ALT
-                                    }
-                                    fill
-                                    className="object-cover object-center rounded-[1rem] transition-all duration-300"
-                                    priority={index === 0}
-                                    loading={index === 0 ? "eager" : "lazy"}
-                                    quality={85}
-                                  />
-                                </div>
-                                {isAdmin && (
-                                  <div className="absolute top-2 right-2 flex space-x-2">
-                                    <EditIconButton
-                                      onClick={(e) => {
-                                        e.stopPropagation();
-                                        openEditModal(image);
-                                      }}
-                                    />
-                                    <TrashIconButton
-                                      onClick={(e) => {
-                                        e.stopPropagation();
-                                        openConfirmDelete(image.documentId);
-                                      }}
+                                          ? image.title
+                                          : GALLERY_COMPLEX.UI.DEFAULT_IMAGE_ALT
+                                      }
+                                      fill
+                                      className="object-cover object-center rounded-[1rem] transition-all duration-300"
+                                      priority={index === 0}
+                                      loading={index === 0 ? "eager" : "lazy"}
+                                      quality={85}
                                     />
                                   </div>
-                                )}
-                                {(image.title?.trim() &&
-                                  !image.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) ||
-                                  image.description?.trim()) && (
-                                    <div className="p-4">
-                                      {image.title?.trim() &&
-                                        !image.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) && (
-                                          <h3 className="text-lg font-semibold text-gray-700">{image.title}</h3>
-                                        )}
-                                      {image.description?.trim() && (
-                                        <p className="text-sm text-gray-600 line-clamp-2">{image.description}</p>
-                                      )}
+                                  {isSignedIn && image.favorite && (
+                                    <div className="absolute top-2 left-2">
+                                      <FavoriteIconButton
+                                        isFavorite={image.favorite}
+                                        onClick={(e) => handleToggleFavorite(image, e)}
+                                      />
                                     </div>
                                   )}
-                              </Card>
-                            </motion.div>
+                                  {isAdmin && (
+                                    <div className="absolute top-2 right-2 flex space-x-2">
+                                      <EditIconButton
+                                        onClick={(e) => {
+                                          e.stopPropagation();
+                                          openEditModal(image);
+                                        }}
+                                      />
+                                      <TrashIconButton
+                                        onClick={(e) => {
+                                          e.stopPropagation();
+                                          openConfirmDelete(image.documentId);
+                                        }}
+                                      />
+                                    </div>
+                                  )}
+                                  {(image.title?.trim() &&
+                                    !image.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) ||
+                                    image.description?.trim()) && (
+                                      <div className="p-4">
+                                        {image.title?.trim() &&
+                                          !image.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) && (
+                                            <h3 className="text-lg font-semibold text-gray-700">{image.title}</h3>
+                                          )}
+                                        {image.description?.trim() && (
+                                          <p className="text-sm text-gray-600 line-clamp-2">{image.description}</p>
+                                        )}
+                                      </div>
+                                    )}
+                                </Card>
+                              </motion.div>
                           ))}
                         </motion.div>
                         {visiblePhotos < filteredImages.length && (
                           <div className="mt-8 text-center">
-                            <ActionButton
-                              onClick={loadMore}
-                              className="flex items-center gap-2"
-                            >
+                            <ActionButton onClick={loadMore} className="flex items-center gap-2">
                               {GALLERY_COMPLEX.BUTTONS.LOAD_MORE_BUTTON}
                             </ActionButton>
                           </div>
@@ -489,11 +702,9 @@ export function GallerySection({
           </TabsContent>
 
           <TabsContent value="videos">
-            <div className="space-y-6">
-              <p className="text-center text-gray-700 font-bold text-base sm:text-lg md:text-xl">
-                {GALLERY_COMPLEX.UI.NO_VIDEOS_MESSAGE || "No videos are available"}
-              </p>
-            </div>
+            <p className="text-center text-gray-700 font-bold text-base sm:text-lg md:text-xl">
+              There are no videos at this time.
+            </p>
           </TabsContent>
         </Tabs>
         <div className="mt-4 text-center">
@@ -521,13 +732,10 @@ export function GallerySection({
           aria-labelledby="modal-image"
         >
           <div
-            className="relative max-w-5xl w-full mx-2 sm:mx-4 max-h-[90vh] bg-gray-800/50 border border-gray-700/50 rounded-2xl shadow-lg overflow-hidden max-[768px]:p-4 max-[768px]:max-h-[85vh]"
+            className="relative max-w-5xl w-full mx-2 sm:mx-4 max-h-[90vh] bg-gray-800/50 border border-gray-700/50 rounded-2xl shadow-lg overflow-hidden"
             onClick={(e) => e.stopPropagation()}
           >
-            <CloseButton
-              variant="close-form"
-              onClick={handleCloseModal}
-            >
+            <CloseButton variant="close-form" onClick={handleCloseModal}>
               <X className="h-6 w-6 sm:h-8 sm:w-8" />
             </CloseButton>
             <div className="relative w-full h-[70vh] sm:h-[80vh]">
@@ -535,7 +743,7 @@ export function GallerySection({
                 src={selectedImage.url}
                 alt={
                   selectedImage.title?.trim() &&
-                    !selectedImage.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
+                  !selectedImage.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
                     ? selectedImage.title
                     : GALLERY_COMPLEX.UI.DEFAULT_IMAGE_ALT
                 }
@@ -545,7 +753,8 @@ export function GallerySection({
               />
               {(selectedImage.title?.trim() &&
                 !selectedImage.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) ||
-                selectedImage.description?.trim()) && (
+                selectedImage.description?.trim() ||
+                (isSignedIn && selectedImage.favorite)) && (
                   <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-3 sm:p-4">
                     {selectedImage.title?.trim() &&
                       !selectedImage.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) && (
@@ -558,6 +767,14 @@ export function GallerySection({
                         {selectedImage.description}
                       </p>
                     )}
+                    {isSignedIn && selectedImage.favorite && (
+                      <div className="mt-2">
+                        <FavoriteIconButton
+                          isFavorite={selectedImage.favorite}
+                          onClick={(e) => handleToggleFavorite(selectedImage, e)}
+                        />
+                      </div>
+                    )}
                   </div>
                 )}
             </div>
@@ -578,12 +795,10 @@ export function GallerySection({
           aria-labelledby="modal-title"
         >
           <div
-            className="relative max-w-md w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg max-[768px]:p-4 max-[768px]:max-h-[85vh]"
+            className="relative max-w-md w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg"
             onClick={(e) => e.stopPropagation()}
           >
-            <CloseButton
-              onClick={handleCancelDelete}
-            >
+            <CloseButton onClick={handleCancelDelete}>
               <X className="h-6 w-6 sm:h-8 sm:w-8" />
             </CloseButton>
             <h3 id="modal-title" className="text-xl font-bold text-white mb-4">
@@ -593,15 +808,10 @@ export function GallerySection({
               {GALLERY_COMPLEX.UI.DELETE_CONFIRMATION_MESSAGE}
             </p>
             <div className="flex space-x-3">
-              <DeleteButton
-                onClick={handleConfirmDelete}
-                disabled={isLoading}
-              >
+              <DeleteButton onClick={handleConfirmDelete} disabled={isLoading}>
                 {isLoading ? GALLERY_COMPLEX.BUTTONS.DELETING_BUTTON : GALLERY_COMPLEX.BUTTONS.DELETE_BUTTON}
               </DeleteButton>
-              <CancelButton
-                onClick={handleCancelDelete}
-              />
+              <CancelButton onClick={handleCancelDelete} />
             </div>
           </div>
         </motion.div>
@@ -620,12 +830,10 @@ export function GallerySection({
           aria-labelledby="edit-modal-title"
         >
           <div
-            className="relative max-w-md w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg max-[768px]:p-4 max-[768px]:max-h-[85vh]"
+            className="relative max-w-md w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg"
             onClick={(e) => e.stopPropagation()}
           >
-            <CloseButton
-              onClick={handleCloseEditModal}
-            >
+            <CloseButton onClick={handleCloseEditModal}>
               <X className="h-6 w-6 sm:h-8 sm:w-8" />
             </CloseButton>
             <h3 id="edit-modal-title" className="text-xl font-bold text-white mb-4">
@@ -641,71 +849,72 @@ export function GallerySection({
                   type="file"
                   accept="image/jpeg,image/png,image/gif"
                   onChange={(e) => setEditForm({ ...editForm, file: e.target.files?.[0] || null })}
-                  className="p-2 bg-gray-700 text-white rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="p-2 bg-gray-700 text-white rounded-lg w-full"
                   disabled={isLoading}
                 />
                 {editForm.file && (
                   <p className="mt-2 text-gray-300 text-sm">Selected: {editForm.file.name}</p>
                 )}
               </div>
-              <div>
-                <label htmlFor="edit-title" className="block text-sm font-medium text-gray-300 mb-1">
-                  Image Title (optional)
-                </label>
+              <input
+                value={editForm.title}
+                onChange={(e) => setEditForm({ ...editForm, title: e.target.value })}
+                placeholder={GALLERY_COMPLEX.UI.TITLE_PLACEHOLDER}
+                className="p-2 bg-gray-700 text-white rounded-lg"
+                disabled={isLoading}
+              />
+              <textarea
+                value={editForm.description}
+                onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}
+                placeholder={GALLERY_COMPLEX.UI.DESCRIPTION_PLACEHOLDER}
+                className="p-2 bg-gray-700 text-white rounded-lg h-24"
+                disabled={isLoading}
+              />
+              <select
+                value={editForm.category || "none"}
+                onChange={(e) =>
+                  setEditForm({
+                    ...editForm,
+                    category: e.target.value as Category,
+                  })
+                }
+                className="p-2 bg-gray-700 text-white rounded-lg"
+                disabled={isLoading}
+              >
+                <option value="none">{GALLERY_COMPLEX.UI.CATEGORY_NONE}</option>
+                {PRODUCT_CATEGORIES.map((category) => (
+                  <option key={category} value={category}>
+                    {category === "indoor" ? GALLERY_COMPLEX.UI.CATEGORY_INDOOR :
+                     category === "outdoor" ? GALLERY_COMPLEX.UI.CATEGORY_OUTDOOR :
+                     GALLERY_COMPLEX.UI.CATEGORY_COMMERCIAL}
+                  </option>
+                ))}
+              </select>
+              <input
+                value={editForm.subCategory}
+                onChange={(e) => setEditForm({ ...editForm, subCategory: e.target.value })}
+                placeholder="Subcategory (e.g., play-sand)"
+                className="p-2 bg-gray-700 text-white rounded-lg"
+                disabled={isLoading}
+              />
+              <div className="flex items-center space-x-2">
                 <input
-                  id="edit-title"
-                  value={editForm.title}
-                  onChange={(e) => setEditForm({ ...editForm, title: e.target.value })}
-                  placeholder={GALLERY_COMPLEX.UI.TITLE_PLACEHOLDER}
-                  className="p-2 bg-gray-700 text-white rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  type="checkbox"
+                  id="edit-favorite"
+                  checked={editForm.favorite}
+                  onChange={(e) => setEditForm({ ...editForm, favorite: e.target.checked })}
+                  className="h-4 w-4 text-blue-600 rounded"
                   disabled={isLoading}
                 />
-              </div>
-              <div>
-                <label htmlFor="edit-description" className="block text-sm font-medium text-gray-300 mb-1">
-                  Image Description (optional)
+                <label htmlFor="edit-favorite" className="text-sm font-medium text-gray-300">
+                  Mark as Favorite
                 </label>
-                <textarea
-                  id="edit-description"
-                  value={editForm.description}
-                  onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}
-                  placeholder={GALLERY_COMPLEX.UI.DESCRIPTION_PLACEHOLDER}
-                  className="p-2 bg-gray-700 text-white rounded-lg w-full h-24 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  disabled={isLoading}
-                />
-              </div>
-              <div>
-                <label htmlFor="edit-category" className="block text-sm font-medium text-gray-300 mb-1">
-                  Category
-                </label>
-                <select
-                  id="edit-category"
-                  value={editForm.category || "none"}
-                  onChange={(e) =>
-                    setEditForm({
-                      ...editForm,
-                      category: e.target.value as Category,
-                    })
-                  }
-                  className="p-2 bg-gray-700 text-white rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  disabled={isLoading}
-                >
-                  <option value="none">{GALLERY_COMPLEX.UI.CATEGORY_NONE}</option>
-                  <option value="indoor">{GALLERY_COMPLEX.UI.CATEGORY_INDOOR}</option>
-                  <option value="outdoor">{GALLERY_COMPLEX.UI.CATEGORY_OUTDOOR}</option>
-                  <option value="commercial">{GALLERY_COMPLEX.UI.CATEGORY_COMMERCIAL}</option>
-                </select>
               </div>
               <div className="flex space-x-3">
-                <SubmitButton
-                  type="submit"
-                  disabled={isLoading}
-                >
+                <SubmitButton type="submit" disabled={isLoading}>
                   {isLoading ? GALLERY_COMPLEX.BUTTONS.SAVING_BUTTON : GALLERY_COMPLEX.BUTTONS.SAVE_BUTTON}
                 </SubmitButton>
-                <CancelButton
-                  onClick={handleCloseEditModal}
-                />
+                <CancelButton onClick={handleCloseEditModal} />
               </div>
             </form>
           </div>
@@ -725,101 +934,93 @@ export function GallerySection({
           aria-labelledby="upload-modal-title"
         >
           <div
-            className="relative max-w-md w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg max-[768px]:p-4 max-[768px]:max-h-[85vh]"
+            className="relative max-w-md w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg"
             onClick={(e) => e.stopPropagation()}
           >
-            <CloseButton
-              onClick={handleCloseUploadModal}
-            >
+            <CloseButton onClick={handleCloseUploadModal}>
               <X className="h-6 w-6 sm:h-8 sm:w-8" />
             </CloseButton>
             <h3 id="upload-modal-title" className="text-xl font-bold text-white mb-4">
               {GALLERY_COMPLEX.UI.UPLOAD_MODAL_HEADING}
             </h3>
-            <form
-              onSubmit={handleUploadSubmit}
-              className="flex flex-col space-y-4"
-            >
-              <div>
-                <label htmlFor="image-upload" className="block text-sm font-medium text-gray-300 mb-1">
-                  Choose Image
-                </label>
-                <input
-                  type="file"
-                  accept="image/jpeg,image/png,image/gif"
-                  onChange={(e) => {
-                    const file = e.target.files?.[0] || null;
-                    setUploadForm({ ...uploadForm, file });
-                  }}
-                  disabled={isLoading}
-                  className="hidden"
-                  id="image-upload"
-                />
-                <label htmlFor="image-upload" className="cursor-pointer">
-                  <div className="flex items-center justify-between bg-gray-700 text-white px-4 py-2 rounded-lg">
-                    <span>{uploadForm.file ? uploadForm.file.name : GALLERY_COMPLEX.UI.CHOOSE_IMAGE_TEXT}</span>
-                    <Upload className="h-4 w-4" />
-                  </div>
-                </label>
-              </div>
-              <div>
-                <label htmlFor="upload-title" className="block text-sm font-medium text-gray-300 mb-1">
-                  Image Title (optional)
-                </label>
+            <form onSubmit={handleUploadSubmit} className="flex flex-col space-y-4">
+              <input
+                type="file"
+                accept="image/jpeg,image/png,image/gif"
+                onChange={(e) => {
+                  const file = e.target.files?.[0] || null;
+                  setUploadForm({ ...uploadForm, file });
+                }}
+                disabled={isLoading}
+                className="hidden"
+                id="image-upload"
+              />
+              <label htmlFor="image-upload" className="cursor-pointer">
+                <div className="flex items-center justify-between bg-gray-700 text-white px-4 py-2 rounded-lg">
+                  <span>{uploadForm.file ? uploadForm.file.name : GALLERY_COMPLEX.UI.CHOOSE_IMAGE_TEXT}</span>
+                  <Upload className="h-4 w-4" />
+                </div>
+              </label>
+              <input
+                value={uploadForm.title}
+                onChange={(e) => setUploadForm({ ...uploadForm, title: e.target.value })}
+                placeholder={GALLERY_COMPLEX.UI.TITLE_PLACEHOLDER}
+                className="p-2 bg-gray-700 text-white rounded-lg"
+                disabled={isLoading}
+              />
+              <textarea
+                value={uploadForm.description}
+                onChange={(e) => setUploadForm({ ...uploadForm, description: e.target.value })}
+                placeholder={GALLERY_COMPLEX.UI.DESCRIPTION_PLACEHOLDER}
+                className="p-2 bg-gray-700 text-white rounded-lg h-24"
+                disabled={isLoading}
+              />
+              <select
+                value={uploadForm.category || "none"}
+                onChange={(e) =>
+                  setUploadForm({
+                    ...uploadForm,
+                    category: e.target.value as Category,
+                  })
+                }
+                className="p-2 bg-gray-700 text-white rounded-lg"
+                disabled={isLoading}
+              >
+                <option value="none">{GALLERY_COMPLEX.UI.CATEGORY_NONE}</option>
+                {PRODUCT_CATEGORIES.map((category) => (
+                  <option key={category} value={category}>
+                    {category === "indoor" ? GALLERY_COMPLEX.UI.CATEGORY_INDOOR :
+                     category === "outdoor" ? GALLERY_COMPLEX.UI.CATEGORY_OUTDOOR :
+                     GALLERY_COMPLEX.UI.CATEGORY_COMMERCIAL}
+                  </option>
+                ))}
+              </select>
+              <input
+                value={uploadForm.subCategory}
+                onChange={(e) => setUploadForm({ ...uploadForm, subCategory: e.target.value })}
+                placeholder="Subcategory (e.g., play-sand)"
+                className="p-2 bg-gray-700 text-white rounded-lg"
+                disabled={isLoading}
+                autoComplete="off"
+              />
+              <div className="flex items-center space-x-2">
                 <input
-                  id="upload-title"
-                  value={uploadForm.title}
-                  onChange={(e) => setUploadForm({ ...uploadForm, title: e.target.value })}
-                  placeholder={GALLERY_COMPLEX.UI.TITLE_PLACEHOLDER}
-                  className="p-2 bg-gray-700 text-white rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  type="checkbox"
+                  id="upload-favorite"
+                  checked={uploadForm.favorite}
+                  onChange={(e) => setUploadForm({ ...uploadForm, favorite: e.target.checked })}
+                  className="h-4 w-4 text-blue-600 rounded"
                   disabled={isLoading}
                 />
-              </div>
-              <div>
-                <label htmlFor="upload-description" className="block text-sm font-medium text-gray-300 mb-1">
-                  Image Description (optional)
+                <label htmlFor="upload-favorite" className="text-sm font-medium text-gray-300">
+                  Mark as Favorite
                 </label>
-                <textarea
-                  id="upload-description"
-                  value={uploadForm.description}
-                  onChange={(e) => setUploadForm({ ...uploadForm, description: e.target.value })}
-                  placeholder={GALLERY_COMPLEX.UI.DESCRIPTION_PLACEHOLDER}
-                  className="p-2 bg-gray-700 text-white rounded-lg w-full h-24 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  disabled={isLoading}
-                />
-              </div>
-              <div>
-                <label htmlFor="upload-category" className="block text-sm font-medium text-gray-300 mb-1">
-                  Category
-                </label>
-                <select
-                  id="upload-category"
-                  value={uploadForm.category || "none"}
-                  onChange={(e) =>
-                    setUploadForm({
-                      ...uploadForm,
-                      category: e.target.value as Category,
-                    })
-                  }
-                  className="p-2 bg-gray-700 text-white rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  disabled={isLoading}
-                >
-                  <option value="none">{GALLERY_COMPLEX.UI.CATEGORY_NONE}</option>
-                  <option value="indoor">{GALLERY_COMPLEX.UI.CATEGORY_INDOOR}</option>
-                  <option value="outdoor">{GALLERY_COMPLEX.UI.CATEGORY_OUTDOOR}</option>
-                  <option value="commercial">{GALLERY_COMPLEX.UI.CATEGORY_COMMERCIAL}</option>
-                </select>
               </div>
               <div className="flex space-x-3">
-                <SubmitButton
-                  type="submit"
-                  disabled={isLoading || !uploadForm.file}
-                >
+                <SubmitButton type="submit" disabled={isLoading || !uploadForm.file}>
                   {isLoading ? GALLERY_COMPLEX.BUTTONS.UPLOADING_BUTTON : GALLERY_COMPLEX.BUTTONS.UPLOAD_BUTTON}
                 </SubmitButton>
-                <CancelButton
-                  onClick={handleCloseUploadModal}
-                />
+                <CancelButton onClick={handleCloseUploadModal} />
               </div>
             </form>
           </div>