@devvistatech/devvista-kit 0.0.12 → 0.0.13

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useRef, useEffect, Dispatch, SetStateAction } from "react";
+import { useState, useRef, useEffect } from "react";
 import { Card } from "@/components/other/card";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/other/tabs";
 import { motion, useScroll, useTransform } from "framer-motion";
@@ -8,45 +8,10 @@ import Image from "next/image";
 import { ActionButton, TrashIconButton, CloseButton, SubmitButton, CancelButton, DeleteButton } from "@/components/other/button";
 import { Upload, X } from "lucide-react";
 import { useUser } from "@clerk/nextjs";
-import { useStrapiAuth } from "@/lib/auth-context";
+import { useStrapiAuth } from "@/lib/auth/auth-context";
+import { isAdminUser } from "@/lib/auth/auth-utils";
 import { GALLERY_SIMPLE } from "./constants/gallerySimple";
-
-interface StrapiUser {
-  id: number;
-  username: string;
-  email: string;
-  businessAdminId?: string;
-}
-
-interface UploadedImage {
-  id: number;
-  documentId: string;
-  title?: string;
-  description?: string;
-  url: string;
-  createdAt: string;
-  category?: "none" | "indoor" | "outdoor" | "commercial";
-}
-
-interface GallerySectionProps {
-  user: StrapiUser | null;
-  authLoading: boolean;
-  uploadedImages: UploadedImage[];
-  setUploadedImages: (images: UploadedImage[]) => void;
-  error: string | null;
-  setError: (error: string | null) => void;
-  isLoading: boolean;
-  setIsLoading: Dispatch<SetStateAction<boolean>>;
-  setUser: Dispatch<SetStateAction<StrapiUser | null>>;
-  handleImageUpload: (
-    e: React.FormEvent<HTMLFormElement>,
-    file: File | null,
-    title: string,
-    description: string,
-    category: "none" | "indoor" | "outdoor" | "commercial"
-  ) => Promise<void>;
-  handleDeleteImage: (documentId: string) => Promise<void>;
-}
+import { GallerySectionProps, UploadedImage, UploadFormState } from "@/lib/types";
 
 export function GallerySection({
   user,
@@ -63,7 +28,7 @@ export function GallerySection({
 }: GallerySectionProps) {
   const { isSignedIn } = useUser();
   const { checkSession } = useStrapiAuth();
-  const isAdmin = isSignedIn && !!user?.businessAdminId;
+  const [isAdmin, setIsAdmin] = useState(false);
   const [activeTab, setActiveTab] = useState("photos");
   const [selectedImage, setSelectedImage] = useState<{ url: string } | null>(null);
   const [isMobile, setIsMobile] = useState(false);
@@ -71,7 +36,17 @@ export function GallerySection({
   const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
   const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
   const [documentIdToDelete, setDocumentIdToDelete] = useState<string | null>(null);
-  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [uploadForm, setUploadForm] = useState<UploadFormState>({
+    file: null,
+    title: "",
+    description: "",
+    category: "none",
+    subCategory: "",
+    favorite: false,
+    banner: false,
+    startDate: "",
+    endDate: "",
+  });
   const fileInputRef = useRef<HTMLInputElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const { scrollYProgress } = useScroll({
@@ -80,6 +55,24 @@ 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 handleLogin = () => checkSession();
     const handleLogout = () => checkSession();
@@ -174,7 +167,17 @@ export function GallerySection({
 
   const handleCloseUploadModal = () => {
     setIsUploadModalOpen(false);
-    setSelectedFile(null);
+    setUploadForm({
+      file: null,
+      title: "",
+      description: "",
+      category: "none",
+      subCategory: "",
+      favorite: false,
+      banner: false,
+      startDate: "",
+      endDate: "",
+    });
     if (fileInputRef.current) {
       fileInputRef.current.value = "";
     }
@@ -185,25 +188,50 @@ export function GallerySection({
     if (!isAdmin) {
       console.error("GallerySimple: Unauthorized upload attempt", {
         isSignedIn,
+        authId: user?.authId,
         businessAdminId: user?.businessAdminId,
+        userRole: user?.userRole,
+        businessOwner: user?.businessOwner ?? null,
+        timestamp: new Date().toISOString(),
       });
       setError(GALLERY_SIMPLE.ERRORS.UNAUTHORIZED_UPLOAD);
       return;
     }
-    if (!selectedFile || selectedFile.size === 0) {
+    if (!uploadForm.file || uploadForm.file.size === 0) {
       setError(GALLERY_SIMPLE.ERRORS.INVALID_FILE);
       return;
     }
     setIsLoading(true);
     try {
-      await handleImageUpload(e, selectedFile, "", "", "none");
+      await handleImageUpload(
+        e,
+        uploadForm.file,
+        uploadForm.title,
+        uploadForm.description,
+        uploadForm.category,
+        uploadForm.subCategory || "",
+        uploadForm.favorite
+      );
+      setUploadForm({
+        file: null,
+        title: "",
+        description: "",
+        category: "none",
+        subCategory: "",
+        favorite: false,
+        banner: false,
+        startDate: "",
+        endDate: "",
+      });
+      setIsUploadModalOpen(false);
     } catch (err) {
-      console.error("GallerySimple: Upload Error", err);
+      console.error("GallerySimple: Upload Error", {
+        error: err instanceof Error ? err.message : "Unknown error",
+        timestamp: new Date().toISOString(),
+      });
       setError(err instanceof Error ? err.message : GALLERY_SIMPLE.ERRORS.UPLOAD_FAILED);
     } finally {
       setIsLoading(false);
-      setIsUploadModalOpen(false);
-      setSelectedFile(null);
       if (fileInputRef.current) {
         fileInputRef.current.value = "";
       }
@@ -476,7 +504,7 @@ export function GallerySection({
                   type="file"
                   accept="image/jpeg,image/png,image/gif"
                   onChange={(e) => {
-                    setSelectedFile(e.target.files?.[0] || null);
+                    setUploadForm({ ...uploadForm, file: e.target.files?.[0] || null });
                   }}
                   disabled={isLoading}
                   className="hidden"
@@ -485,7 +513,7 @@ export function GallerySection({
                 />
                 <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>{selectedFile ? selectedFile.name : GALLERY_SIMPLE.UI.CHOOSE_IMAGE_TEXT}</span>
+                    <span>{uploadForm.file ? uploadForm.file.name : GALLERY_SIMPLE.UI.CHOOSE_IMAGE_TEXT}</span>
                     <Upload className="h-4 w-4" />
                   </div>
                 </label>
@@ -493,7 +521,7 @@ export function GallerySection({
               <div className="flex space-x-3">
                 <SubmitButton
                   type="submit"
-                  disabled={isLoading || !selectedFile}
+                  disabled={isLoading || !uploadForm.file}
                 >
                   {isLoading ? GALLERY_SIMPLE.BUTTONS.UPLOADING_BUTTON : GALLERY_SIMPLE.BUTTONS.UPLOAD_BUTTON}
                 </SubmitButton>

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

@@ -0,0 +1,260 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import Image from "next/image";
+import { UploadedImage } from "@/lib/types";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { motion } from "framer-motion";
+
+interface ThreeSetGalleryProps {
+  columns?: "1" | "2" | "3" | "4";
+}
+
+const ThreeSetGallery = ({ columns = "3" }: ThreeSetGalleryProps) => {
+  const [uploadedImages, setUploadedImages] = useState<UploadedImage[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const slideshowRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const fetchImages = async () => {
+      setIsLoading(true);
+      try {
+        const response = await fetch(`/api/gallery-data?t=${Date.now()}`, {
+          headers: { "Content-Type": "application/json" },
+          cache: "no-store",
+        });
+        if (response.ok) {
+          const result = await response.json();
+          setUploadedImages(
+            result.data.map((image: any) => ({
+              id: image.id,
+              documentId: image.documentId,
+              title: image.title || "Untitled",
+              description: image.description || "",
+              url: image.url,
+              createdAt: image.createdAt,
+              category: image.category || "none",
+              favorite: image.favorite || false,
+            })) || []
+          );
+        } else {
+          console.error("ThreeSetGallery: Gallery API Error", {
+            status: response.status,
+            statusText: response.statusText,
+          });
+        }
+      } catch (err) {
+        console.error("ThreeSetGallery: Fetch Error", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchImages();
+  }, []);
+
+  // Filter favorite images
+  const favoriteImages = uploadedImages.filter((image) => image.favorite === true);
+
+  const truncateDescription = (description: string | undefined): string => {
+    if (!description) return "No description available".slice(0, 250) + "...";
+    return description.length > 250
+      ? description.slice(0, 250) + "..."
+      : description + "...";
+  };
+
+  const goToPrev = () => setCurrentSlide((prev) => (prev - 1 + (favoriteImages.length === 2 ? 1 : favoriteImages.length)) % (favoriteImages.length === 2 ? 1 : favoriteImages.length));
+  const goToNext = () => setCurrentSlide((prev) => (prev + 1) % (favoriteImages.length === 2 ? 1 : favoriteImages.length));
+
+  if (isLoading) {
+    return <Spinner />;
+  }
+
+  return (
+    <section className="w-full" data-testid="three-set-gallery">
+      <div className="w-full px-4 sm:px-6">
+        {favoriteImages.length === 0 ? (
+          <p className="text-center text-gray-700 font-medium text-base sm:text-lg mb-4">
+            No content available
+          </p>
+        ) : (
+          <>
+            {/* Desktop: Grid Layout */}
+            <div
+              className={`hidden md:grid grid-cols-${columns} gap-4 sm:gap-6`}
+              data-testid="desktop-grid"
+            >
+              {favoriteImages.map((image, index) => (
+                <div
+                  key={image.documentId || `image-${index}`}
+                  className="relative overflow-hidden group w-full aspect-[4/3] rounded-3xl bg-white/10 backdrop-blur-lg border-2 border-transparent shadow-xl"
+                  data-testid={`gallery-image-${index}`}
+                >
+                  <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
+                        : `Services Image ${index + 1}`
+                    }
+                    fill
+                    className="object-cover rounded-2xl transition-transform duration-700 group-hover:scale-110"
+                    quality={85}
+                    priority={index === 0}
+                    loading={index === 0 ? "eager" : "lazy"}
+                    sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                    onError={() => console.error(`ThreeSetGallery: Image failed to load: ${image.url}`)}
+                  />
+                  <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/50 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 p-4 sm:p-8">
+                    <h3 className="text-lg sm:text-xl font-bold">
+                      {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
+                        : `Image ${index + 1}`}
+                    </h3>
+                    <p className="text-sm sm:text-base">{truncateDescription(image.description)}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Mobile: Carousel Layout */}
+            <div
+              className={`md:hidden relative h-[40vh] min-h-[400px] sm:h-[50vh] rounded-3xl overflow-hidden bg-white/10 backdrop-blur-lg border-2 border-transparent shadow-xl w-full ${favoriteImages.length === 2 ? '' : 'mx-auto max-w-3xl'} supports-[not(backdrop-filter:blur(10px))]:bg-white/20`}
+              data-testid="mobile-carousel"
+              ref={slideshowRef}
+            >
+              {favoriteImages.length === 1 ? (
+                <div
+                  className="relative w-full h-full"
+                  data-testid="carousel-image-0"
+                >
+                  <Image
+                    src={favoriteImages[0].url}
+                    alt={
+                      favoriteImages[0].title?.trim() &&
+                      !favoriteImages[0].title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
+                        ? favoriteImages[0].title
+                        : "Services Image 1"
+                    }
+                    fill
+                    className="object-cover rounded-2xl transition-transform duration-700 hover:scale-110"
+                    quality={85}
+                    priority
+                    sizes="100vw"
+                    onError={() => console.error(`ThreeSetGallery: Image failed to load: ${favoriteImages[0].url}`)}
+                  />
+                  <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/50 text-white opacity-0 hover:opacity-100 transition-opacity duration-300 p-4">
+                    <h3 className="text-lg font-bold">
+                      {favoriteImages[0].title?.trim() &&
+                      !favoriteImages[0].title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
+                        ? favoriteImages[0].title
+                        : "Image 1"}
+                    </h3>
+                    <p className="text-sm">{truncateDescription(favoriteImages[0].description)}</p>
+                  </div>
+                </div>
+              ) : favoriteImages.length === 2 ? (
+                <div className="relative w-full h-full flex" data-testid="carousel-two-images">
+                  {favoriteImages.map((image, index) => (
+                    <div
+                      key={image.documentId || `image-${index}`}
+                      className="relative w-1/2 h-full"
+                      data-testid={`carousel-image-${index}`}
+                    >
+                      <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
+                            : `Services Image ${index + 1}`
+                        }
+                        fill
+                        className="object-cover rounded-2xl transition-transform duration-700 hover:scale-110"
+                        quality={85}
+                        priority={index === 0}
+                        sizes="50vw"
+                        onError={() => console.error(`ThreeSetGallery: Image failed to load: ${image.url}`)}
+                      />
+                      <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/50 text-white opacity-0 hover:opacity-100 transition-opacity duration-300 p-2">
+                        <h3 className="text-sm font-bold">
+                          {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
+                            : `Image ${index + 1}`}
+                        </h3>
+                        <p className="text-xs">{truncateDescription(image.description)}</p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <>
+                  <motion.div
+                    key={currentSlide}
+                    initial={{ opacity: 0, x: 50 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    exit={{ opacity: 0, x: -50 }}
+                    transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
+                    className="relative w-full h-full"
+                    data-testid={`carousel-image-${currentSlide}`}
+                  >
+                    <Image
+                      src={favoriteImages[currentSlide].url}
+                      alt={
+                        favoriteImages[currentSlide].title?.trim() &&
+                        !favoriteImages[currentSlide].title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
+                          ? favoriteImages[currentSlide].title
+                          : `Services Image ${currentSlide + 1}`
+                      }
+                      fill
+                      className="object-cover rounded-2xl transition-transform duration-700 hover:scale-110"
+                      quality={85}
+                      priority={currentSlide === 0}
+                      sizes="100vw"
+                      onError={() => console.error(`ThreeSetGallery: Image failed to load: ${favoriteImages[currentSlide].url}`)}
+                    />
+                    <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/50 text-white opacity-0 hover:opacity-100 transition-opacity duration-300 p-4">
+                      <h3 className="text-lg font-bold">
+                        {favoriteImages[currentSlide].title?.trim() &&
+                        !favoriteImages[currentSlide].title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
+                          ? favoriteImages[currentSlide].title
+                          : `Image ${currentSlide + 1}`}
+                      </h3>
+                      <p className="text-sm">{truncateDescription(favoriteImages[currentSlide].description)}</p>
+                    </div>
+                  </motion.div>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      goToPrev();
+                    }}
+                    className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-gray-800/60 hover:bg-gray-800/80 text-white p-2 rounded-full transition-colors duration-300"
+                    aria-label="Previous slide"
+                  >
+                    <ChevronLeft className="h-6 w-6" />
+                  </button>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      goToNext();
+                    }}
+                    className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gray-800/60 hover:bg-gray-800/80 text-white p-2 rounded-full transition-colors duration-300"
+                    aria-label="Next slide"
+                  >
+                    <ChevronRight className="h-6 w-6" />
+                  </button>
+                </>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default ThreeSetGallery;

package/components/addOns/functional/schedules/ScheduleGridOne.tsx

@@ -1,9 +1,8 @@
-// src/pages/ScheduleGridOne.tsx
 "use client";
 
 import React, { useState, useMemo } from "react";
 import { AddButton, SubmitButton, DeleteIconButton } from "@/components/other/button";
-import { ScheduleClass, WeeklySchedule } from "@/components/types";
+import { ScheduleClass, WeeklySchedule } from "@/lib/types";
 import { ClassPopup } from "../ClassPopup";
 import { SCHEDULE_GRID_ONE } from "./constants/scheduleGridOne";
 
@@ -35,7 +34,7 @@ const ScheduleGrid: React.FC<ScheduleGridProps> = ({
     ageGroup: string;
   } | null>(null);
 
-  const daysOfWeek = SCHEDULE_GRID_ONE.UI.DAYS_OF_WEEK;
+  const daysOfWeek = SCHEDULE_GRID_ONE.UI.DAYS_OF_WEEK as (keyof WeeklySchedule)[];
 
   const timeRanges = [
     SCHEDULE_GRID_ONE.UI.MORNING_OPTION,
@@ -56,9 +55,18 @@ const ScheduleGrid: React.FC<ScheduleGridProps> = ({
   };
 
   const filteredSchedule = useMemo(() => {
-    const filtered: WeeklySchedule = {};
+    const filtered: WeeklySchedule = {
+      Monday: [],
+      Tuesday: [],
+      Wednesday: [],
+      Thursday: [],
+      Friday: [],
+      Saturday: [],
+      Sunday: [],
+    };
     Object.entries(schedule).forEach(([day, classes]) => {
-      filtered[day] = classes.filter((cls) => {
+      const dayKey = day as keyof WeeklySchedule;
+      filtered[dayKey] = classes.filter((cls: { name: string; startTime: string; }) => {
         if (searchQuery && !cls.name.toLowerCase().includes(searchQuery.toLowerCase())) return false;
         if (timeFilter) {
           const startHour = parseTimeTo24Hour(formatTime(cls.startTime));
@@ -78,6 +86,10 @@ const ScheduleGrid: React.FC<ScheduleGridProps> = ({
   };
 
   const handleClassClick = (cls: ScheduleClass, day: string) => {
+    if (!cls.documentId || !cls.id) {
+      console.error("Missing documentId or id for class:", cls);
+      return;
+    }
     if (!isAdmin) {
       setSelectedClass({
         id: cls.documentId,
@@ -168,7 +180,7 @@ const ScheduleGrid: React.FC<ScheduleGridProps> = ({
         <div className="bg-white/10 backdrop-blur-lg border border-white/20 rounded-2xl p-6 shadow-[0_8px_32px_rgba(0,0,0,0.2)]">
           <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
             {daysOfWeek.map((day, index) => {
-              const classes = filteredSchedule[day] || [];
+              const classes: ScheduleClass[] = filteredSchedule[day] || [];
               return (
                 <div key={day} className="p-4 flex flex-col min-w-0">
                   <h3
@@ -187,7 +199,7 @@ const ScheduleGrid: React.FC<ScheduleGridProps> = ({
                   </h3>
                   <ul className="space-y-3 font-medium flex-1">
                     {classes.length > 0 ? (
-                      classes.map((cls) => (
+                      classes.map((cls: ScheduleClass) => (
                         <li
                           key={`${cls.startTime}-${cls.endTime}-${cls.id}`}
                           className={`bg-white/12 backdrop-blur-lg border border-white/20 rounded-lg p-3 shadow-[0_4px_20px_rgba(0,0,0,0.15)] relative cursor-pointer hover:bg-blue-600/20`}
@@ -214,7 +226,9 @@ const ScheduleGrid: React.FC<ScheduleGridProps> = ({
                               <DeleteIconButton
                                 onClick={(e) => {
                                   e.stopPropagation();
-                                  openConfirmDelete(cls.id, cls.documentId, day);
+                                  if (cls.id && cls.documentId) {
+                                    openConfirmDelete(cls.id, cls.documentId, day);
+                                  }
                                 }}
                                 aria-label={SCHEDULE_GRID_ONE.UI.DELETE_BUTTON_ARIA.replace("${cls.name}", cls.name)}
                               />

package/components/addOns/functional/schedules/ScheduleGridTwo.tsx

@@ -1,9 +1,8 @@
-// src/pages/ScheduleGridTwo.tsx
 "use client";
 
 import React, { useState } from "react";
 import { AddButton, DeleteIconButton } from "@/components/other/button";
-import { ScheduleClass, WeeklySchedule } from "@/components/types";
+import { ScheduleClass, WeeklySchedule } from "@/lib/types";
 import { ClassPopup } from "../ClassPopup";
 import { SCHEDULE_GRID_TWO } from "./constants/ScheduleGridTwo";
 import { useUser } from "@clerk/nextjs";
@@ -36,9 +35,13 @@ const ScheduleGrid: React.FC<ScheduleGridProps> = ({
 
   const { isSignedIn } = useUser();
 
-  const daysOfWeek = SCHEDULE_GRID_TWO.UI.DAYS_OF_WEEK;
+  const daysOfWeek = SCHEDULE_GRID_TWO.UI.DAYS_OF_WEEK as (keyof WeeklySchedule)[];
 
   const handleClassClick = (cls: ScheduleClass, day: string) => {
+    if (!cls.documentId || !cls.id) {
+      console.error("Missing documentId or id for class:", cls);
+      return;
+    }
     if (!isAdmin) {
       setSelectedClass({
         id: cls.documentId,
@@ -112,7 +115,7 @@ const ScheduleGrid: React.FC<ScheduleGridProps> = ({
         .schedule-card {
           background: rgba(255, 255, 255, 0.12);
           backdrop-filter: blur(10px);
-          hanging-punctuation: 1px solid rgba(255, 255, 255, 0.2);
+          border: 1px solid rgba(255, 255, 255, 0.2);
           border-radius: 1rem;
           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
           min-width: 0;
@@ -201,7 +204,7 @@ const ScheduleGrid: React.FC<ScheduleGridProps> = ({
           <div className="schedule-container rounded-[2rem] overflow-hidden p-6">
             <div className="grid grid-cols-1 gap-4">
               {daysOfWeek.map((day, index) => {
-                const classes = schedule[day] || [];
+                const classes: ScheduleClass[] = schedule[day] || [];
                 return (
                   <div key={day} className="p-4 flex flex-col min-w-0">
                     <h3
@@ -221,7 +224,7 @@ const ScheduleGrid: React.FC<ScheduleGridProps> = ({
 
                     <ul className="space-y-3 font-medium flex-1">
                       {classes.length > 0 ? (
-                        classes.map((cls) => (
+                        classes.map((cls: ScheduleClass) => (
                           <li
                             key={`${cls.startTime}-${cls.endTime}-${cls.id}`}
                             className={`schedule-card p-3 border-none relative ${
@@ -248,7 +251,9 @@ const ScheduleGrid: React.FC<ScheduleGridProps> = ({
                                 <DeleteIconButton
                                   onClick={(e) => {
                                     e.stopPropagation();
-                                    openConfirmDelete(cls.id, cls.documentId, day);
+                                    if (cls.id && cls.documentId) {
+                                      openConfirmDelete(cls.id, cls.documentId, day);
+                                    }
                                   }}
                                   aria-label={SCHEDULE_GRID_TWO.UI.DELETE_BUTTON_ARIA.replace("${cls.name}", cls.name)}
                                 />

package/components/addOns/functional/schedules/ScheduleGridTwoBasic.tsx

@@ -1,9 +1,8 @@
-// src/pages/ScheduleGridTwoBasic.tsx
 "use client";
 
 import React, { useState } from "react";
 import { AddButton, DeleteIconButton } from "@/components/other/button";
-import { ScheduleClass, WeeklySchedule } from "@/components/types";
+import { ScheduleClass, WeeklySchedule } from "@/lib/types";
 import { useUser } from "@clerk/nextjs";
 import { SCHEDULE_GRID_TWO_BASIC } from "./constants/ScheduleGridTwoBasic";
 
@@ -35,9 +34,13 @@ const ScheduleGrid: React.FC<ScheduleGridProps> = ({
 
   const { isSignedIn } = useUser();
 
-  const daysOfWeek = SCHEDULE_GRID_TWO_BASIC.UI.DAYS_OF_WEEK;
+  const daysOfWeek = SCHEDULE_GRID_TWO_BASIC.UI.DAYS_OF_WEEK as (keyof WeeklySchedule)[];
 
   const handleClassClick = (cls: ScheduleClass, day: string) => {
+    if (!cls.documentId || !cls.id) {
+      console.error("Missing documentId or id for class:", cls);
+      return;
+    }
     if (!isAdmin) {
       setSelectedClass({
         id: cls.documentId,
@@ -111,7 +114,7 @@ const ScheduleGrid: React.FC<ScheduleGridProps> = ({
         .schedule-card {
           background: rgba(255, 255, 255, 0.12);
           backdrop-filter: blur(10px);
-          hanging-punctuation: 1px solid rgba(255, 255, 255, 0.2);
+          border: 1px solid rgba(255, 255, 255, 0.2);
           border-radius: 1rem;
           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
           min-width: 0;
@@ -204,7 +207,7 @@ const ScheduleGrid: React.FC<ScheduleGridProps> = ({
           <div className="schedule-container rounded-[2rem] overflow-hidden p-6">
             <div className="grid grid-cols-1 gap-4">
               {daysOfWeek.map((day, index) => {
-                const classes = schedule[day] || [];
+                const classes: ScheduleClass[] = schedule[day] || [];
                 return (
                   <div key={day} className="p-4 flex flex-col min-w-0">
                     <h3
@@ -224,7 +227,7 @@ const ScheduleGrid: React.FC<ScheduleGridProps> = ({
 
                     <ul className="space-y-3 font-medium flex-1">
                       {classes.length > 0 ? (
-                        classes.map((cls) => (
+                        classes.map((cls: ScheduleClass) => (
                           <li
                             key={`${cls.startTime}-${cls.endTime}-${cls.id}`}
                             className={`schedule-card p-3 border-none relative ${isAdmin ? "cursor-pointer hover:bg-blue-600/20" : "cursor-default"}`}
@@ -251,7 +254,9 @@ const ScheduleGrid: React.FC<ScheduleGridProps> = ({
                                 <DeleteIconButton
                                   onClick={(e) => {
                                     e.stopPropagation();
-                                    openConfirmDelete(cls.id, cls.documentId, day);
+                                    if (cls.id && cls.documentId) {
+                                      openConfirmDelete(cls.id, cls.documentId, day);
+                                    }
                                   }}
                                   aria-label={SCHEDULE_GRID_TWO_BASIC.UI.DELETE_BUTTON_ARIA.replace("${cls.name}", cls.name)}
                                 />