@devvistatech/devvista-kit 0.0.12 → 0.0.13

package/components/addOns/functional/{ImageDescCarousel.tsx → carousels/ImageDescCarousel.tsx}

@@ -1,4 +1,3 @@
-// src/components/addOns/functional/ImageDescCarousel.tsx
 "use client";
 
 import { useState, useEffect, useRef } from "react";
@@ -19,25 +18,8 @@ import Image from "next/image";
 import { Upload, ChevronRight, X, ChevronLeft } from "lucide-react";
 import { motion, useScroll, useTransform } from "framer-motion";
 import { useAuth, useUser } from "@clerk/nextjs";
-import { StrapiUser, UploadedImage, Category } from "@/components/types";
-
-interface ImageDescCarouselProps {
-  user: StrapiUser | null;
-  uploadedImages: UploadedImage[];
-  setUploadedImages: (images: UploadedImage[]) => void;
-  error: string | null;
-  setError: (error: string | null) => void;
-  isLoading: boolean;
-  setIsLoading: (isLoading: boolean) => void;
-  handleImageUpload: (
-    e: React.FormEvent<HTMLFormElement>,
-    file: File | null,
-    title: string,
-    description: string,
-    category: Category
-  ) => Promise<void>;
-  handleDeleteImage: (documentId: string) => Promise<void>;
-}
+import { isAdminUser } from "@/lib/auth/auth-utils";
+import { StrapiUser, UploadedImage, Category, ImageDescCarouselProps, UploadFormState, EditFormState } from "@/lib/types";
 
 const Slideshow = ({
   images,
@@ -98,7 +80,7 @@ const Slideshow = ({
           quality={85}
         />
         {isAdmin && (
-          <div className="absolute top-2 right-2 flex space-x-2 opacity-0 hover:opacity-100 transition-opacity duration-500">
+          <div className="absolute top-2 right-2 flex space-x-2 opacity-100">
             <EditIconButton
               onClick={(e) => {
                 e.stopPropagation();
@@ -147,6 +129,7 @@ export function ImageDescCarousel({
 }: ImageDescCarouselProps) {
   const { isSignedIn } = useUser();
   const { getToken } = useAuth();
+  const [isAdmin, setIsAdmin] = useState(false);
   const [activeTab, setActiveTab] = useState<Category>("indoor");
   const [currentSlide, setCurrentSlide] = useState(0);
   const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
@@ -154,20 +137,30 @@ export function ImageDescCarousel({
   const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
   const [documentIdToDelete, setDocumentIdToDelete] = useState<string | null>(null);
   const [selectedImage, setSelectedImage] = useState<UploadedImage | null>(null);
-  const [uploadForm, setUploadForm] = useState<{
-    file: File | null;
-    title: string;
-    description: string;
-    category: Category;
-  }>({ file: null, title: "", description: "", category: "indoor" });
-  const [editForm, setEditForm] = useState<{
-    id: number;
-    documentId: string;
-    title: string;
-    description: string;
-    category: Category;
-    file: File | null;
-  }>({ id: 0, documentId: "", title: "", description: "", category: "indoor", file: null });
+  const [uploadForm, setUploadForm] = useState<UploadFormState>({
+    file: null,
+    title: "",
+    description: "",
+    category: "indoor",
+    subCategory: "",
+    favorite: false,
+    banner: false,
+    startDate: "",
+    endDate: "",
+  });
+  const [editForm, setEditForm] = useState<EditFormState>({
+    id: 0,
+    documentId: "",
+    file: null,
+    title: "",
+    description: "",
+    category: "indoor",
+    subCategory: "",
+    favorite: false,
+    banner: false,
+    startDate: "",
+    endDate: "",
+  });
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const containerRef = useRef<HTMLDivElement>(null);
@@ -177,7 +170,23 @@ export function ImageDescCarousel({
   });
   const parallaxY = useTransform(scrollYProgress, [0, 1], [0, -50]);
 
-  const isAdmin = isSignedIn && !!user?.businessAdminId || false;
+  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 isAnyModalOpen = isUploadModalOpen || isEditModalOpen || isConfirmDeleteOpen || !!selectedImage;
@@ -215,22 +224,49 @@ export function ImageDescCarousel({
     setEditForm({
       id: image.id,
       documentId: image.documentId,
+      file: null,
       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 && image.category !== "none" ? image.category : "indoor",
-      file: null,
+      subCategory: image.subCategory || "",
+      favorite: image.favorite || false,
+      banner: image.banner || false,
+      startDate: image.startDate || "",
+      endDate: image.endDate || "",
     });
     setIsEditModalOpen(true);
   };
 
   const handleCloseEditModal = () => {
     setIsEditModalOpen(false);
-    setEditForm({ id: 0, documentId: "", title: "", description: "", category: "indoor", file: null });
+    setEditForm({
+      id: 0,
+      documentId: "",
+      file: null,
+      title: "",
+      description: "",
+      category: "indoor",
+      subCategory: "",
+      favorite: false,
+      banner: false,
+      startDate: "",
+      endDate: "",
+    });
   };
 
   const handleCloseUploadModal = () => {
     setIsUploadModalOpen(false);
-    setUploadForm({ file: null, title: "", description: "", category: "indoor" });
+    setUploadForm({
+      file: null,
+      title: "",
+      description: "",
+      category: "indoor",
+      subCategory: "",
+      favorite: false,
+      banner: false,
+      startDate: "",
+      endDate: "",
+    });
   };
 
   const openConfirmDelete = (documentId: string) => {
@@ -270,7 +306,11 @@ export function ImageDescCarousel({
     if (!isAdmin) {
       console.error("ImageDescCarousel: Unauthorized edit attempt", {
         isSignedIn,
+        authId: user?.authId,
         businessAdminId: user?.businessAdminId,
+        userRole: user?.userRole,
+        businessOwner: user?.businessOwner ?? null,
+        timestamp: new Date().toISOString(),
       });
       setError("Unauthorized: Only admins can edit images");
       return;
@@ -281,7 +321,9 @@ export function ImageDescCarousel({
       setIsSubmitting(true);
       const token = await getToken();
       if (!token) {
-        console.error("ImageDescCarousel: No authentication token available");
+        console.error("ImageDescCarousel: No authentication token available", {
+          timestamp: new Date().toISOString(),
+        });
         setError("Authentication error: Please log in again");
         return;
       }
@@ -291,6 +333,11 @@ export function ImageDescCarousel({
       formData.append("title", editForm.title || `Image ${new Date().toISOString()}`);
       formData.append("description", editForm.description || "");
       formData.append("category", editForm.category);
+      formData.append("subCategory", editForm.subCategory || "");
+      formData.append("favorite", String(editForm.favorite));
+      formData.append("banner", String(editForm.banner));
+      formData.append("startDate", editForm.startDate || "");
+      formData.append("endDate", editForm.endDate || "");
       if (editForm.file) {
         formData.append("file", editForm.file);
       }
@@ -305,7 +352,11 @@ export function ImageDescCarousel({
 
       if (!response.ok) {
         const errorData = await response.json();
-        console.error("ImageDescCarousel: Edit failed", { status: response.status, errorData });
+        console.error("ImageDescCarousel: Edit failed", {
+          status: response.status,
+          errorData,
+          timestamp: new Date().toISOString(),
+        });
         if (response.status === 401) {
           setError("Authentication error: Please log in again");
           return;
@@ -317,9 +368,24 @@ export function ImageDescCarousel({
       setUploadedImages(data || []);
       setError(null);
       setIsEditModalOpen(false);
-      setEditForm({ id: 0, documentId: "", title: "", description: "", category: "indoor", file: null });
+      setEditForm({
+        id: 0,
+        documentId: "",
+        file: null,
+        title: "",
+        description: "",
+        category: "indoor",
+        subCategory: "",
+        favorite: false,
+        banner: false,
+        startDate: "",
+        endDate: "",
+      });
     } catch (err) {
-      console.error("ImageDescCarousel: Edit Error", err);
+      console.error("ImageDescCarousel: Edit Error", {
+        error: err instanceof Error ? err.message : "Unknown error",
+        timestamp: new Date().toISOString(),
+      });
       setError(err instanceof Error ? err.message : "Failed to edit image");
     } finally {
       setIsLoading(false);
@@ -327,6 +393,61 @@ export function ImageDescCarousel({
     }
   };
 
+  const handleUploadSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!isAdmin) {
+      console.error("ImageDescCarousel: Unauthorized upload attempt", {
+        isSignedIn,
+        authId: user?.authId,
+        businessAdminId: user?.businessAdminId,
+        userRole: user?.userRole,
+        businessOwner: user?.businessOwner ?? null,
+        timestamp: new Date().toISOString(),
+      });
+      setError("Unauthorized: Only admins can upload images");
+      return;
+    }
+    if (!uploadForm.file || uploadForm.file.size === 0) {
+      setError("Please select a valid image file");
+      return;
+    }
+    setIsLoading(true);
+    setIsSubmitting(true);
+    try {
+      await handleImageUpload(
+        e,
+        uploadForm.file,
+        uploadForm.title,
+        uploadForm.description,
+        uploadForm.category,
+        uploadForm.subCategory || "",
+        uploadForm.favorite
+      );
+      setError(null);
+      setIsUploadModalOpen(false);
+      setUploadForm({
+        file: null,
+        title: "",
+        description: "",
+        category: "indoor",
+        subCategory: "",
+        favorite: false,
+        banner: false,
+        startDate: "",
+        endDate: "",
+      });
+    } catch (err) {
+      console.error("ImageDescCarousel: Upload Error", {
+        error: err instanceof Error ? err.message : "Unknown error",
+        timestamp: new Date().toISOString(),
+      });
+      setError(err instanceof Error ? err.message : "Failed to upload image");
+    } finally {
+      setIsLoading(false);
+      setIsSubmitting(false);
+    }
+  };
+
   const sectionVariants = {
     hidden: { opacity: 0 },
     visible: {
@@ -446,17 +567,11 @@ export function ImageDescCarousel({
             </CloseButton>
             <h3 className="text-xl font-bold text-white mb-4">Upload Image</h3>
             <form
-              onSubmit={(e) => {
-                setIsSubmitting(true);
-                handleImageUpload(e, uploadForm.file, uploadForm.title, uploadForm.description, uploadForm.category).then(() => {
-                  handleCloseUploadModal();
-                  setIsSubmitting(false);
-                });
-              }}
+              onSubmit={handleUploadSubmit}
               className="space-y-4"
             >
               <div>
-                <label htmlFor="image-upload" className="block text-sm font-medium text-gray-300 mb-1">
+                <label htmlFor="image-upload" className="block text-sm font-medium text-gray-300 mb-1 max-[320px]:text-xs">
                   Choose Image
                 </label>
                 <input
@@ -516,9 +631,6 @@ export function ImageDescCarousel({
                   <option value="indoor">Indoor</option>
                   <option value="outdoor">Outdoor</option>
                   <option value="commercial">Commercial</option>
-                  {/* Add project-specific categories, e.g.:
-                  <option value="landscape-boulders">Landscape Boulders</option>
-                  */}
                 </select>
               </div>
               <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
@@ -618,9 +730,6 @@ export function ImageDescCarousel({
                   <option value="indoor">Indoor</option>
                   <option value="outdoor">Outdoor</option>
                   <option value="commercial">Commercial</option>
-                  {/* Add project-specific categories, e.g.:
-                  <option value="landscape-boulders">Landscape Boulders</option>
-                  */}
                 </select>
               </div>
               <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">