@devvistatech/devvista-kit 0.0.10 → 0.0.12

package/app/schedule/page.tsx

@@ -1,661 +1,661 @@
-"use client";
-
-import React, { useState, useEffect } from "react";
-import { Card } from "@/components/other/card";
-import Spinner from "@/components/addOns/non-functional/spinner";
-import { motion } from "framer-motion";
-import Schedule from "@/components/addOns/functional/schedules/SchedulerForm";
-import ScheduleGrid from "@/components/addOns/functional/schedules/ScheduleGridTwoBasic";
-import { ScheduleClass, WeeklySchedule } from "@/components/types";
-import { useAuth, useUser } from "@clerk/nextjs";
-import { useStrapiAuth } from "@/lib/auth-context";
-import { SCHEDULE_PAGE } from "../../lib/constants/schedule"; 
-
-export default function SchedulePage() {
-  const [schedule, setSchedule] = useState<WeeklySchedule>({
-    Monday: [],
-    Tuesday: [],
-    Wednesday: [],
-    Thursday: [],
-    Friday: [],
-    Saturday: [],
-    Sunday: [],
-  });
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
-  const [classToDelete, setClassToDelete] = useState<{
-    id: number;
-    documentId: string;
-    day: string;
-  } | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [formData, setFormData] = useState({
-    name: "",
-    startTime: "",
-    endTime: "",
-    daysOfWeek: [] as number[],
-    classDescription: "",
-    id: null as number | null,
-    documentId: null as string | null,
-  });
-
-  const { user, authLoading, checkSession } = useStrapiAuth();
-  const { getToken } = useAuth();
-  const { isSignedIn } = useUser();
-
-  const isAdmin = isSignedIn && !!user?.businessAdminId || false;
-
-  const numberToDayKey: { [key: number]: string } = {
-    1: "Monday",
-    2: "Tuesday",
-    3: "Wednesday",
-    4: "Thursday",
-    5: "Friday",
-    6: "Saturday",
-    7: "Sunday",
-  };
-
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, []);
-
-  useEffect(() => {
-    const handleLogin = () => checkSession();
-    const handleLogout = () => checkSession();
-    window.addEventListener("user-login", handleLogin);
-    window.addEventListener("user-logout", handleLogout);
-    return () => {
-      window.removeEventListener("user-login", handleLogin);
-      window.removeEventListener("user-logout", handleLogout);
-    };
-  }, [checkSession]);
-
-  useEffect(() => {
-    const event = new CustomEvent("modalStateChange", {
-      detail: { isOpen: isModalOpen || isConfirmDeleteOpen },
-    });
-    window.dispatchEvent(event);
-  }, [isModalOpen, isConfirmDeleteOpen]);
-
-  useEffect(() => {
-    if (isModalOpen || isConfirmDeleteOpen) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [isModalOpen, isConfirmDeleteOpen]);
-
-  const roundToNearestFiveMinutes = (time: string): string => {
-    if (!time) return "";
-    const [hours, minutes] = time.split(":").map(Number);
-    const roundedMinutes = Math.round(minutes / 5) * 5;
-    const adjustedHours = hours + Math.floor(roundedMinutes / 60);
-    const finalMinutes = roundedMinutes % 60;
-    return `${String(adjustedHours).padStart(2, "0")}:${String(finalMinutes).padStart(2, "0")}`;
-  };
-
-  const fetchEvents = async () => {
-    try {
-      setIsLoading(true);
-      const response = await fetch("/api/schedule", {
-        headers: { "Content-Type": "application/json" },
-        cache: "no-store",
-      });
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || SCHEDULE_PAGE.ERRORS.FETCH_EVENTS_FAILED.replace("${response.status}", response.status.toString()));
-      }
-
-      const result = await response.json();
-      const fetchedClasses = (result.data || []).map((event: any) => ({
-        id: event.id,
-        documentId: event.documentId,
-        name: event.title || "Untitled",
-        startTime: roundToNearestFiveMinutes(event.startTime || "00:00"),
-        endTime: roundToNearestFiveMinutes(event.endTime || "00:00"),
-        daysOfWeek: event.daysOfWeek || [],
-        classDescription: event.classDescription || "",
-      }));
-
-      const updatedSchedule: WeeklySchedule = {
-        Monday: [],
-        Tuesday: [],
-        Wednesday: [],
-        Thursday: [],
-        Friday: [],
-        Saturday: [],
-        Sunday: [],
-      };
-      fetchedClasses.forEach((cls: ScheduleClass) => {
-        cls.daysOfWeek.forEach((dayNum: number) => {
-          const dayKey = numberToDayKey[dayNum];
-          if (dayKey && updatedSchedule[dayKey]) {
-            updatedSchedule[dayKey].push({
-              name: cls.name,
-              startTime: cls.startTime,
-              endTime: cls.endTime,
-              id: cls.id,
-              documentId: cls.documentId,
-              daysOfWeek: cls.daysOfWeek,
-              classDescription: cls.classDescription,
-            });
-          }
-        });
-      });
-
-      setSchedule(updatedSchedule);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : SCHEDULE_PAGE.ERRORS.UNKNOWN_ERROR);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchEvents();
-  }, []);
-
-  const openModal = (cls?: ScheduleClass, day?: string) => {
-    if (!isAdmin) return;
-    setFormData({
-      name: cls?.name || "",
-      startTime: cls?.startTime || "",
-      endTime: cls?.endTime || "",
-      daysOfWeek: cls ? cls.daysOfWeek : [],
-      classDescription: cls?.classDescription || "",
-      id: cls?.id || null,
-      documentId: cls?.documentId || null,
-    });
-    setIsModalOpen(true);
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!isAdmin) {
-      setError(SCHEDULE_PAGE.ERRORS.UNAUTHORIZED_MODIFY);
-      return;
-    }
-
-    const token = await getToken();
-    if (!token) {
-      setError(SCHEDULE_PAGE.ERRORS.NO_TOKEN_PROVIDED);
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      const response = await fetch("/api/schedule", {
-        method: formData.documentId ? "PUT" : "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify({
-          documentId: formData.documentId,
-          data: {
-            title: formData.name,
-            startTime: formData.startTime,
-            endTime: formData.endTime,
-            daysOfWeek: formData.daysOfWeek,
-            classDescription: formData.classDescription || null,
-          },
-        }),
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || SCHEDULE_PAGE.ERRORS.SUBMIT_CLASS_FAILED.replace("${formData.documentId ? 'update' : 'create'}", formData.documentId ? "update" : "create"));
-      }
-
-      await fetchEvents();
-      setIsModalOpen(false);
-      setFormData({ name: "", startTime: "", endTime: "", daysOfWeek: [], classDescription: "", id: null, documentId: null });
-    } catch (err) {
-      setError(err instanceof Error ? err.message : SCHEDULE_PAGE.ERRORS.UNKNOWN_ERROR);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const deleteClass = async (id: number, documentId: string, day: string) => {
-    if (!isAdmin) {
-      setError(SCHEDULE_PAGE.ERRORS.UNAUTHORIZED_DELETE);
-      return;
-    }
-
-    const token = await getToken();
-    if (!token) {
-      setError(SCHEDULE_PAGE.ERRORS.NO_TOKEN_PROVIDED);
-      return;
-    }
-
-    try {
-      setIsLoading(true);
-      const response = await fetch("/api/schedule", {
-        method: "DELETE",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify({ documentId }),
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || SCHEDULE_PAGE.ERRORS.DELETE_CLASS_FAILED.replace("${response.status}", response.status.toString()));
-      }
-
-      await fetchEvents();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : SCHEDULE_PAGE.ERRORS.UNKNOWN_ERROR);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const openConfirmDelete = (id: number, documentId: string, day: string) => {
-    if (!isAdmin) return;
-    setClassToDelete({ id, documentId, day });
-    setIsConfirmDeleteOpen(true);
-  };
-
-  const handleConfirmDelete = async () => {
-    if (classToDelete) {
-      await deleteClass(classToDelete.id, classToDelete.documentId, classToDelete.day);
-      setIsConfirmDeleteOpen(false);
-      setClassToDelete(null);
-    }
-  };
-
-  const handleCancelDelete = () => {
-    setIsConfirmDeleteOpen(false);
-    setClassToDelete(null);
-  };
-
-  const formatTime = (time: string) => {
-    if (!time) return "";
-    return new Date(`2023-01-01 ${time}`).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" });
-  };
-
-  const uniqueClassDescriptions = Array.from(
-    new Map(
-      Object.values(schedule)
-        .flat()
-        .filter((cls) => cls.classDescription)
-        .map((cls) => [cls.name, { name: cls.name, desc: cls.classDescription }])
-    ).values()
-  );
-
-  const membershipPlans = [
-    {
-      name: SCHEDULE_PAGE.UI.MEMBERSHIP_1_NAME,
-      desc: SCHEDULE_PAGE.UI.MEMBERSHIP_1_DESC,
-      pricing: [
-        SCHEDULE_PAGE.UI.MEMBERSHIP_1_PRICING_1,
-        SCHEDULE_PAGE.UI.MEMBERSHIP_1_PRICING_2,
-        SCHEDULE_PAGE.UI.MEMBERSHIP_1_PRICING_3,
-      ],
-    },
-    {
-      name: SCHEDULE_PAGE.UI.MEMBERSHIP_2_NAME,
-      desc: SCHEDULE_PAGE.UI.MEMBERSHIP_2_DESC,
-      pricing: [
-        SCHEDULE_PAGE.UI.MEMBERSHIP_2_PRICING_1,
-        SCHEDULE_PAGE.UI.MEMBERSHIP_2_PRICING_2,
-        SCHEDULE_PAGE.UI.MEMBERSHIP_2_PRICING_3,
-      ],
-    },
-    {
-      name: SCHEDULE_PAGE.UI.MEMBERSHIP_3_NAME,
-      desc: SCHEDULE_PAGE.UI.MEMBERSHIP_3_DESC,
-      pricing: [
-        SCHEDULE_PAGE.UI.MEMBERSHIP_3_PRICING_1,
-      ],
-    },
-    {
-      name: SCHEDULE_PAGE.UI.MEMBERSHIP_4_NAME,
-      desc: SCHEDULE_PAGE.UI.MEMBERSHIP_4_DESC,
-      pricing: [
-        SCHEDULE_PAGE.UI.MEMBERSHIP_4_PRICING_1,
-        SCHEDULE_PAGE.UI.MEMBERSHIP_4_PRICING_2,
-        SCHEDULE_PAGE.UI.MEMBERSHIP_4_PRICING_3,
-      ],
-    },
-    {
-      name: SCHEDULE_PAGE.UI.MEMBERSHIP_5_NAME,
-      desc: SCHEDULE_PAGE.UI.MEMBERSHIP_5_DESC,
-      pricing: [
-        SCHEDULE_PAGE.UI.MEMBERSHIP_5_PRICING_1,
-        SCHEDULE_PAGE.UI.MEMBERSHIP_5_PRICING_2,
-        SCHEDULE_PAGE.UI.MEMBERSHIP_5_PRICING_3,
-      ],
-    },
-    {
-      name: SCHEDULE_PAGE.UI.MEMBERSHIP_6_NAME,
-      desc: SCHEDULE_PAGE.UI.MEMBERSHIP_6_DESC,
-      pricing: [
-        SCHEDULE_PAGE.UI.MEMBERSHIP_6_PRICING_1,
-        SCHEDULE_PAGE.UI.MEMBERSHIP_6_PRICING_2,
-        SCHEDULE_PAGE.UI.MEMBERSHIP_6_PRICING_3,
-      ],
-    },
-  ];
-
-  const modalVariants = {
-    hidden: { opacity: 0, y: "100vh" },
-    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] } },
-    exit: { opacity: 0, y: "100vh", transition: { duration: 0.3, ease: "easeIn" } },
-  };
-
-  if (authLoading || isLoading) {
-    return <Spinner />;
-  }
-
-  return (
-    <div className="min-h-screen w-full bg-[#F7F7F7] relative overflow-hidden flex flex-col">
-      <style jsx>{`
-        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap");
-
-        :root {
-          --jubilee: #F47C7C;
-          --natural-white: #F7F7F7;
-          --caviar: #2D2D2D;
-          --storm-cloud: #4A636E;
-          --exuberant-blue: #C71585;
-          --modern-purple: #D946EF;
-        }
-
-        * {
-          font-family: "Inter", system-ui, sans-serif;
-          box-sizing: border-box;
-        }
-
-        .gradient-text {
-          background: linear-gradient(135deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple));
-          -webkit-background-clip: text;
-          background-clip: text;
-          color: transparent;
-          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
-        }
-
-        @media (max-width: 1024px) {
-          .container-padding {
-            padding-left: 1.5rem;
-            padding-right: 1.5rem;
-            padding-top: 4rem;
-            padding-bottom: 4rem;
-          }
-
-          .main-heading {
-            font-size: 2.75rem;
-            margin-bottom: 2.5rem;
-          }
-
-          .content-text {
-            font-size: 1.125rem;
-          }
-        }
-
-        @media (max-width: 640px) {
-          .container-padding {
-            padding-left: 0.75rem;
-            padding-right: 0.75rem;
-            padding-top: 3rem;
-            padding-bottom: 3rem;
-          }
-
-          .main-heading {
-            font-size: 2rem;
-          }
-
-          .section-heading {
-            font-size: 1.75rem;
-          }
-
-          .content-text {
-            font-size: 1rem;
-          }
-
-          .modal-form input,
-          .modal-form select,
-          .modal-form textarea {
-            font-size: 0.875rem;
-            padding: 0.75rem;
-            border-radius: 0.5rem;
-          }
-
-          .modal-form button {
-            padding: 0.75rem 1rem;
-            font-size: 0.875rem;
-            border-radius: 0.5rem;
-          }
-
-          .modal-form label {
-            font-size: 0.875rem;
-          }
-
-          .modal-form .flex {
-            flex-direction: column;
-            gap: 0.5rem;
-          }
-
-          .modal-form select {
-            appearance: none;
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23A1A1AA'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
-            background-repeat: no-repeat;
-            background-position: right 0.75rem center;
-            background-size: 1rem;
-          }
-
-          .modal-form input[type="checkbox"] {
-            height: 1.25rem;
-            width: 1.25rem;
-          }
-
-          .modal-form textarea {
-            min-height: 80px;
-          }
-        }
-
-        @media (max-width: 320px) {
-          .container-padding {
-            padding-left: 0.5rem;
-            padding-right: 0.5rem;
-          }
-
-          .modal-form input,
-          .modal-form select,
-          .modal-form textarea {
-            font-size: 0.75rem;
-            padding: 0.5rem;
-          }
-
-          .modal-form button {
-            padding: 0.5rem 0.75rem;
-            font-size: 0.75rem;
-          }
-
-          .modal-form label {
-            font-size: 0.75rem;
-          }
-        }
-      `}</style>
-
-      <div
-        className="w-full px-6 py-20 lg:px-12 lg:py-40 flex-grow relative z-10 container-padding bg-[#8c94af]"
-      >
-        <motion.h1
-          initial={{ opacity: 0, y: -50 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-4xl sm:text-5xl lg:text-7xl font-black mb-20 lg:mb-20 gradient-text text-center uppercase drop-shadow-lg main-heading pt-36 sm:pt-32"
-        >
-          {SCHEDULE_PAGE.UI.MAIN_HEADING}
-        </motion.h1>
-
-        {/* Membership Rates */}
-        <div>
-          <h2
-            className="text-2xl sm:text-3xl lg:text-6xl text-white font-black mb-6 tracking-wide drop-shadow-md section-heading"
-            style={{
-              textShadow: `
-                -1px -1px 0 #000,
-                1px -1px 0 #000,
-                -1px 1px 0 #000,
-                1px 1px 0 #000,
-                0 2px 4px rgba(0, 0, 0, 0.4)
-              `,
-            }}
-          >
-            {SCHEDULE_PAGE.UI.MEMBERSHIP_HEADING}
-          </h2>
-
-          <div
-            className="mb-16 overflow-hidden p-6 bg-white-950/10 backdrop-blur-lg border border-white/10 shadow-lg rounded-2xl"
-            role="region"
-            aria-label="Membership plans"
-          >
-            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-              {membershipPlans.map((plan) => (
-                <div key={plan.name}>
-                  <Card className="bg-blue-100/20 backdrop-blur-lg border border-white/10 shadow-md rounded-2xl p-6 flex flex-col min-h-[12rem] sm:min-h-[12rem]">
-                    <h3
-                      className="text-xl sm:text-4xl font-bold mb-3 text-white drop-shadow-sm content-text"
-                      style={{
-                        textShadow: `
-                          -1px -1px 0 #000,
-                          1px -1px 0 #000,
-                          -1px 1px 0 #000,
-                          1px 1px 0 #000,
-                          0 2px 4px rgba(0, 0, 0, 0.4)
-                        `,
-                      }}
-                    >
-                      {plan.name}
-                    </h3>
-                    <p className="text-white font-medium mb-4 flex-shrink-0 content-text">{plan.desc}</p>
-                    <ul className="space-y-2 font-medium flex-1 overflow-auto text-white content-text">
-                      {plan.pricing.map((price, idx) => (
-                        <li key={idx} className="text-sm">{price}</li>
-                      ))}
-                    </ul>
-                  </Card>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Footer Text */}
-          <div className="mt-6 text-center">
-            <p className="text-md">
-              <strong>{SCHEDULE_PAGE.UI.FAMILY_RATES_BOLD}</strong> {SCHEDULE_PAGE.UI.FAMILY_RATES_TEXT}
-            </p>
-            <p className="mt-2 text-md italic">
-              <strong>{SCHEDULE_PAGE.UI.NOTE_BOLD}</strong> {SCHEDULE_PAGE.UI.NOTE_TEXT}
-            </p>
-          </div>
-        </div>
-
-        {/* Class Schedule */}
-        <ScheduleGrid
-          schedule={schedule}
-          isAdmin={isAdmin}
-          error={error}
-          openModal={openModal}
-          openConfirmDelete={openConfirmDelete}
-          formatTime={formatTime}
-        />
-
-        {/* Class Descriptions */}
-        <h2
-          className="text-2xl sm:text-3xl lg:text-6xl text-white font-black mb-6 tracking-wide drop-shadow-md section-heading"
-          style={{
-            textShadow: `
-              -1px -1px 0 #000,
-              1px -1px 0 #000,
-              -1px 1px 0 #000,
-              1px 1px 0 #000,
-              0 2px 4px rgba(0, 0, 0, 0.4)
-            `,
-          }}
-        >
-          {SCHEDULE_PAGE.UI.CLASSES_HEADING}
-        </h2>
-
-        <div
-          className="mb-16 overflow-hidden p-6 bg-white-950/10 backdrop-blur-lg border border-white/10 shadow-lg rounded-2xl"
-          role="region"
-          aria-label="Membership plans"
-        >
-          <div className="grid md:grid-cols-2 gap-6">
-            {uniqueClassDescriptions.length > 0 ? (
-              uniqueClassDescriptions.map((cls) => (
-                <div key={cls.name}>
-                  <Card className="bg-blue-100/20 backdrop-blur-lg border border-white/10 shadow-md rounded-2xl p-6 flex flex-col min-h-[12rem] sm:min-h-[12rem]">
-                    <h3
-                      className="text-xl sm:text-4xl font-bold mb-3 text-white drop-shadow-sm content-text"
-                      style={{
-                        textShadow: `
-                          -1px -1px 0 #000,
-                          1px -1px 0 #000,
-                          -1px 1px 0 #000,
-                          1px 1px 0 #000,
-                          0 2px 4px rgba(0, 0, 0, 0.4)
-                        `,
-                      }}
-                    >
-                      {cls.name}
-                    </h3>
-                    <p className="text-white font-medium flex-1 overflow-hidden text-ellipsis content-text">{cls.desc}</p>
-                  </Card>
-                </div>
-              ))
-            ) : (
-              <p className="text-center text-white text-lg content-text">{SCHEDULE_PAGE.UI.NO_CLASS_DESCRIPTIONS}</p>
-            )}
-          </div>
-        </div>
-
-        {/* Admin Status Feedback, matching AboutSection */}
-        <div className="mt-4 text-center">
-          {authLoading || isLoading ? (
-            <Spinner />
-          ) : isAdmin ? (
-            <p className="text-gray-600 text-sm font-medium">
-              {SCHEDULE_PAGE.UI.ADMIN_LOGGED_IN_MESSAGE}
-            </p>
-          ) : user ? (
-            <p className="text-gray-400 text-sm font-medium">
-            </p>
-          ) : (
-            <p className="text-gray-400 text-sm font-medium">
-            </p>
-          )}
-        </div>
-
-        {/* Render Schedule Modals */}
-        <Schedule
-          isModalOpen={isModalOpen}
-          setIsModalOpen={setIsModalOpen}
-          isConfirmDeleteOpen={isConfirmDeleteOpen}
-          setIsConfirmDeleteOpen={setIsConfirmDeleteOpen}
-          classToDelete={classToDelete}
-          setClassToDelete={setClassToDelete}
-          isLoading={isLoading}
-          error={error}
-          formData={formData}
-          setFormData={setFormData}
-          isAdmin={isAdmin}
-          handleSubmit={handleSubmit}
-          handleConfirmDelete={handleConfirmDelete}
-          handleCancelDelete={handleCancelDelete}
-          roundToNearestFiveMinutes={roundToNearestFiveMinutes}
-          modalVariants={modalVariants}
-        />
-      </div>
-    </div>
-  );
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Card } from "@/components/other/card";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import { motion } from "framer-motion";
+import Schedule from "@/components/addOns/functional/schedules/SchedulerForm";
+import ScheduleGrid from "@/components/addOns/functional/schedules/ScheduleGridTwoBasic";
+import { ScheduleClass, WeeklySchedule } from "@/components/types";
+import { useAuth, useUser } from "@clerk/nextjs";
+import { useStrapiAuth } from "@/lib/auth-context";
+import { SCHEDULE_PAGE } from "../../lib/constants/schedule"; 
+
+export default function SchedulePage() {
+  const [schedule, setSchedule] = useState<WeeklySchedule>({
+    Monday: [],
+    Tuesday: [],
+    Wednesday: [],
+    Thursday: [],
+    Friday: [],
+    Saturday: [],
+    Sunday: [],
+  });
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
+  const [classToDelete, setClassToDelete] = useState<{
+    id: number;
+    documentId: string;
+    day: string;
+  } | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [formData, setFormData] = useState({
+    name: "",
+    startTime: "",
+    endTime: "",
+    daysOfWeek: [] as number[],
+    classDescription: "",
+    id: null as number | null,
+    documentId: null as string | null,
+  });
+
+  const { user, authLoading, checkSession } = useStrapiAuth();
+  const { getToken } = useAuth();
+  const { isSignedIn } = useUser();
+
+  const isAdmin = isSignedIn && !!user?.businessAdminId || false;
+
+  const numberToDayKey: { [key: number]: string } = {
+    1: "Monday",
+    2: "Tuesday",
+    3: "Wednesday",
+    4: "Thursday",
+    5: "Friday",
+    6: "Saturday",
+    7: "Sunday",
+  };
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  useEffect(() => {
+    const handleLogin = () => checkSession();
+    const handleLogout = () => checkSession();
+    window.addEventListener("user-login", handleLogin);
+    window.addEventListener("user-logout", handleLogout);
+    return () => {
+      window.removeEventListener("user-login", handleLogin);
+      window.removeEventListener("user-logout", handleLogout);
+    };
+  }, [checkSession]);
+
+  useEffect(() => {
+    const event = new CustomEvent("modalStateChange", {
+      detail: { isOpen: isModalOpen || isConfirmDeleteOpen },
+    });
+    window.dispatchEvent(event);
+  }, [isModalOpen, isConfirmDeleteOpen]);
+
+  useEffect(() => {
+    if (isModalOpen || isConfirmDeleteOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isModalOpen, isConfirmDeleteOpen]);
+
+  const roundToNearestFiveMinutes = (time: string): string => {
+    if (!time) return "";
+    const [hours, minutes] = time.split(":").map(Number);
+    const roundedMinutes = Math.round(minutes / 5) * 5;
+    const adjustedHours = hours + Math.floor(roundedMinutes / 60);
+    const finalMinutes = roundedMinutes % 60;
+    return `${String(adjustedHours).padStart(2, "0")}:${String(finalMinutes).padStart(2, "0")}`;
+  };
+
+  const fetchEvents = async () => {
+    try {
+      setIsLoading(true);
+      const response = await fetch("/api/schedule", {
+        headers: { "Content-Type": "application/json" },
+        cache: "no-store",
+      });
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || SCHEDULE_PAGE.ERRORS.FETCH_EVENTS_FAILED.replace("${response.status}", response.status.toString()));
+      }
+
+      const result = await response.json();
+      const fetchedClasses = (result.data || []).map((event: any) => ({
+        id: event.id,
+        documentId: event.documentId,
+        name: event.title || "Untitled",
+        startTime: roundToNearestFiveMinutes(event.startTime || "00:00"),
+        endTime: roundToNearestFiveMinutes(event.endTime || "00:00"),
+        daysOfWeek: event.daysOfWeek || [],
+        classDescription: event.classDescription || "",
+      }));
+
+      const updatedSchedule: WeeklySchedule = {
+        Monday: [],
+        Tuesday: [],
+        Wednesday: [],
+        Thursday: [],
+        Friday: [],
+        Saturday: [],
+        Sunday: [],
+      };
+      fetchedClasses.forEach((cls: ScheduleClass) => {
+        cls.daysOfWeek.forEach((dayNum: number) => {
+          const dayKey = numberToDayKey[dayNum];
+          if (dayKey && updatedSchedule[dayKey]) {
+            updatedSchedule[dayKey].push({
+              name: cls.name,
+              startTime: cls.startTime,
+              endTime: cls.endTime,
+              id: cls.id,
+              documentId: cls.documentId,
+              daysOfWeek: cls.daysOfWeek,
+              classDescription: cls.classDescription,
+            });
+          }
+        });
+      });
+
+      setSchedule(updatedSchedule);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : SCHEDULE_PAGE.ERRORS.UNKNOWN_ERROR);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchEvents();
+  }, []);
+
+  const openModal = (cls?: ScheduleClass, day?: string) => {
+    if (!isAdmin) return;
+    setFormData({
+      name: cls?.name || "",
+      startTime: cls?.startTime || "",
+      endTime: cls?.endTime || "",
+      daysOfWeek: cls ? cls.daysOfWeek : [],
+      classDescription: cls?.classDescription || "",
+      id: cls?.id || null,
+      documentId: cls?.documentId || null,
+    });
+    setIsModalOpen(true);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!isAdmin) {
+      setError(SCHEDULE_PAGE.ERRORS.UNAUTHORIZED_MODIFY);
+      return;
+    }
+
+    const token = await getToken();
+    if (!token) {
+      setError(SCHEDULE_PAGE.ERRORS.NO_TOKEN_PROVIDED);
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const response = await fetch("/api/schedule", {
+        method: formData.documentId ? "PUT" : "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({
+          documentId: formData.documentId,
+          data: {
+            title: formData.name,
+            startTime: formData.startTime,
+            endTime: formData.endTime,
+            daysOfWeek: formData.daysOfWeek,
+            classDescription: formData.classDescription || null,
+          },
+        }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || SCHEDULE_PAGE.ERRORS.SUBMIT_CLASS_FAILED.replace("${formData.documentId ? 'update' : 'create'}", formData.documentId ? "update" : "create"));
+      }
+
+      await fetchEvents();
+      setIsModalOpen(false);
+      setFormData({ name: "", startTime: "", endTime: "", daysOfWeek: [], classDescription: "", id: null, documentId: null });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : SCHEDULE_PAGE.ERRORS.UNKNOWN_ERROR);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const deleteClass = async (id: number, documentId: string, day: string) => {
+    if (!isAdmin) {
+      setError(SCHEDULE_PAGE.ERRORS.UNAUTHORIZED_DELETE);
+      return;
+    }
+
+    const token = await getToken();
+    if (!token) {
+      setError(SCHEDULE_PAGE.ERRORS.NO_TOKEN_PROVIDED);
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      const response = await fetch("/api/schedule", {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ documentId }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || SCHEDULE_PAGE.ERRORS.DELETE_CLASS_FAILED.replace("${response.status}", response.status.toString()));
+      }
+
+      await fetchEvents();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : SCHEDULE_PAGE.ERRORS.UNKNOWN_ERROR);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const openConfirmDelete = (id: number, documentId: string, day: string) => {
+    if (!isAdmin) return;
+    setClassToDelete({ id, documentId, day });
+    setIsConfirmDeleteOpen(true);
+  };
+
+  const handleConfirmDelete = async () => {
+    if (classToDelete) {
+      await deleteClass(classToDelete.id, classToDelete.documentId, classToDelete.day);
+      setIsConfirmDeleteOpen(false);
+      setClassToDelete(null);
+    }
+  };
+
+  const handleCancelDelete = () => {
+    setIsConfirmDeleteOpen(false);
+    setClassToDelete(null);
+  };
+
+  const formatTime = (time: string) => {
+    if (!time) return "";
+    return new Date(`2023-01-01 ${time}`).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" });
+  };
+
+  const uniqueClassDescriptions = Array.from(
+    new Map(
+      Object.values(schedule)
+        .flat()
+        .filter((cls) => cls.classDescription)
+        .map((cls) => [cls.name, { name: cls.name, desc: cls.classDescription }])
+    ).values()
+  );
+
+  const membershipPlans = [
+    {
+      name: SCHEDULE_PAGE.UI.MEMBERSHIP_1_NAME,
+      desc: SCHEDULE_PAGE.UI.MEMBERSHIP_1_DESC,
+      pricing: [
+        SCHEDULE_PAGE.UI.MEMBERSHIP_1_PRICING_1,
+        SCHEDULE_PAGE.UI.MEMBERSHIP_1_PRICING_2,
+        SCHEDULE_PAGE.UI.MEMBERSHIP_1_PRICING_3,
+      ],
+    },
+    {
+      name: SCHEDULE_PAGE.UI.MEMBERSHIP_2_NAME,
+      desc: SCHEDULE_PAGE.UI.MEMBERSHIP_2_DESC,
+      pricing: [
+        SCHEDULE_PAGE.UI.MEMBERSHIP_2_PRICING_1,
+        SCHEDULE_PAGE.UI.MEMBERSHIP_2_PRICING_2,
+        SCHEDULE_PAGE.UI.MEMBERSHIP_2_PRICING_3,
+      ],
+    },
+    {
+      name: SCHEDULE_PAGE.UI.MEMBERSHIP_3_NAME,
+      desc: SCHEDULE_PAGE.UI.MEMBERSHIP_3_DESC,
+      pricing: [
+        SCHEDULE_PAGE.UI.MEMBERSHIP_3_PRICING_1,
+      ],
+    },
+    {
+      name: SCHEDULE_PAGE.UI.MEMBERSHIP_4_NAME,
+      desc: SCHEDULE_PAGE.UI.MEMBERSHIP_4_DESC,
+      pricing: [
+        SCHEDULE_PAGE.UI.MEMBERSHIP_4_PRICING_1,
+        SCHEDULE_PAGE.UI.MEMBERSHIP_4_PRICING_2,
+        SCHEDULE_PAGE.UI.MEMBERSHIP_4_PRICING_3,
+      ],
+    },
+    {
+      name: SCHEDULE_PAGE.UI.MEMBERSHIP_5_NAME,
+      desc: SCHEDULE_PAGE.UI.MEMBERSHIP_5_DESC,
+      pricing: [
+        SCHEDULE_PAGE.UI.MEMBERSHIP_5_PRICING_1,
+        SCHEDULE_PAGE.UI.MEMBERSHIP_5_PRICING_2,
+        SCHEDULE_PAGE.UI.MEMBERSHIP_5_PRICING_3,
+      ],
+    },
+    {
+      name: SCHEDULE_PAGE.UI.MEMBERSHIP_6_NAME,
+      desc: SCHEDULE_PAGE.UI.MEMBERSHIP_6_DESC,
+      pricing: [
+        SCHEDULE_PAGE.UI.MEMBERSHIP_6_PRICING_1,
+        SCHEDULE_PAGE.UI.MEMBERSHIP_6_PRICING_2,
+        SCHEDULE_PAGE.UI.MEMBERSHIP_6_PRICING_3,
+      ],
+    },
+  ];
+
+  const modalVariants = {
+    hidden: { opacity: 0, y: "100vh" },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] } },
+    exit: { opacity: 0, y: "100vh", transition: { duration: 0.3, ease: "easeIn" } },
+  };
+
+  if (authLoading || isLoading) {
+    return <Spinner />;
+  }
+
+  return (
+    <div className="min-h-screen w-full bg-[#F7F7F7] relative overflow-hidden flex flex-col">
+      <style jsx>{`
+        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap");
+
+        :root {
+          --jubilee: #F47C7C;
+          --natural-white: #F7F7F7;
+          --caviar: #2D2D2D;
+          --storm-cloud: #4A636E;
+          --exuberant-blue: #C71585;
+          --modern-purple: #D946EF;
+        }
+
+        * {
+          font-family: "Inter", system-ui, sans-serif;
+          box-sizing: border-box;
+        }
+
+        .gradient-text {
+          background: linear-gradient(135deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple));
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+        }
+
+        @media (max-width: 1024px) {
+          .container-padding {
+            padding-left: 1.5rem;
+            padding-right: 1.5rem;
+            padding-top: 4rem;
+            padding-bottom: 4rem;
+          }
+
+          .main-heading {
+            font-size: 2.75rem;
+            margin-bottom: 2.5rem;
+          }
+
+          .content-text {
+            font-size: 1.125rem;
+          }
+        }
+
+        @media (max-width: 640px) {
+          .container-padding {
+            padding-left: 0.75rem;
+            padding-right: 0.75rem;
+            padding-top: 3rem;
+            padding-bottom: 3rem;
+          }
+
+          .main-heading {
+            font-size: 2rem;
+          }
+
+          .section-heading {
+            font-size: 1.75rem;
+          }
+
+          .content-text {
+            font-size: 1rem;
+          }
+
+          .modal-form input,
+          .modal-form select,
+          .modal-form textarea {
+            font-size: 0.875rem;
+            padding: 0.75rem;
+            border-radius: 0.5rem;
+          }
+
+          .modal-form button {
+            padding: 0.75rem 1rem;
+            font-size: 0.875rem;
+            border-radius: 0.5rem;
+          }
+
+          .modal-form label {
+            font-size: 0.875rem;
+          }
+
+          .modal-form .flex {
+            flex-direction: column;
+            gap: 0.5rem;
+          }
+
+          .modal-form select {
+            appearance: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23A1A1AA'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 0.75rem center;
+            background-size: 1rem;
+          }
+
+          .modal-form input[type="checkbox"] {
+            height: 1.25rem;
+            width: 1.25rem;
+          }
+
+          .modal-form textarea {
+            min-height: 80px;
+          }
+        }
+
+        @media (max-width: 320px) {
+          .container-padding {
+            padding-left: 0.5rem;
+            padding-right: 0.5rem;
+          }
+
+          .modal-form input,
+          .modal-form select,
+          .modal-form textarea {
+            font-size: 0.75rem;
+            padding: 0.5rem;
+          }
+
+          .modal-form button {
+            padding: 0.5rem 0.75rem;
+            font-size: 0.75rem;
+          }
+
+          .modal-form label {
+            font-size: 0.75rem;
+          }
+        }
+      `}</style>
+
+      <div
+        className="w-full px-6 py-20 lg:px-12 lg:py-40 flex-grow relative z-10 container-padding bg-[#8c94af]"
+      >
+        <motion.h1
+          initial={{ opacity: 0, y: -50 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-4xl sm:text-5xl lg:text-7xl font-black mb-20 lg:mb-20 gradient-text text-center uppercase drop-shadow-lg main-heading pt-36 sm:pt-32"
+        >
+          {SCHEDULE_PAGE.UI.MAIN_HEADING}
+        </motion.h1>
+
+        {/* Membership Rates */}
+        <div>
+          <h2
+            className="text-2xl sm:text-3xl lg:text-6xl text-white font-black mb-6 tracking-wide drop-shadow-md section-heading"
+            style={{
+              textShadow: `
+                -1px -1px 0 #000,
+                1px -1px 0 #000,
+                -1px 1px 0 #000,
+                1px 1px 0 #000,
+                0 2px 4px rgba(0, 0, 0, 0.4)
+              `,
+            }}
+          >
+            {SCHEDULE_PAGE.UI.MEMBERSHIP_HEADING}
+          </h2>
+
+          <div
+            className="mb-16 overflow-hidden p-6 bg-white-950/10 backdrop-blur-lg border border-white/10 shadow-lg rounded-2xl"
+            role="region"
+            aria-label="Membership plans"
+          >
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {membershipPlans.map((plan) => (
+                <div key={plan.name}>
+                  <Card className="bg-blue-100/20 backdrop-blur-lg border border-white/10 shadow-md rounded-2xl p-6 flex flex-col min-h-[12rem] sm:min-h-[12rem]">
+                    <h3
+                      className="text-xl sm:text-4xl font-bold mb-3 text-white drop-shadow-sm content-text"
+                      style={{
+                        textShadow: `
+                          -1px -1px 0 #000,
+                          1px -1px 0 #000,
+                          -1px 1px 0 #000,
+                          1px 1px 0 #000,
+                          0 2px 4px rgba(0, 0, 0, 0.4)
+                        `,
+                      }}
+                    >
+                      {plan.name}
+                    </h3>
+                    <p className="text-white font-medium mb-4 flex-shrink-0 content-text">{plan.desc}</p>
+                    <ul className="space-y-2 font-medium flex-1 overflow-auto text-white content-text">
+                      {plan.pricing.map((price, idx) => (
+                        <li key={idx} className="text-sm">{price}</li>
+                      ))}
+                    </ul>
+                  </Card>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Footer Text */}
+          <div className="mt-6 text-center">
+            <p className="text-md">
+              <strong>{SCHEDULE_PAGE.UI.FAMILY_RATES_BOLD}</strong> {SCHEDULE_PAGE.UI.FAMILY_RATES_TEXT}
+            </p>
+            <p className="mt-2 text-md italic">
+              <strong>{SCHEDULE_PAGE.UI.NOTE_BOLD}</strong> {SCHEDULE_PAGE.UI.NOTE_TEXT}
+            </p>
+          </div>
+        </div>
+
+        {/* Class Schedule */}
+        <ScheduleGrid
+          schedule={schedule}
+          isAdmin={isAdmin}
+          error={error}
+          openModal={openModal}
+          openConfirmDelete={openConfirmDelete}
+          formatTime={formatTime}
+        />
+
+        {/* Class Descriptions */}
+        <h2
+          className="text-2xl sm:text-3xl lg:text-6xl text-white font-black mb-6 tracking-wide drop-shadow-md section-heading"
+          style={{
+            textShadow: `
+              -1px -1px 0 #000,
+              1px -1px 0 #000,
+              -1px 1px 0 #000,
+              1px 1px 0 #000,
+              0 2px 4px rgba(0, 0, 0, 0.4)
+            `,
+          }}
+        >
+          {SCHEDULE_PAGE.UI.CLASSES_HEADING}
+        </h2>
+
+        <div
+          className="mb-16 overflow-hidden p-6 bg-white-950/10 backdrop-blur-lg border border-white/10 shadow-lg rounded-2xl"
+          role="region"
+          aria-label="Membership plans"
+        >
+          <div className="grid md:grid-cols-2 gap-6">
+            {uniqueClassDescriptions.length > 0 ? (
+              uniqueClassDescriptions.map((cls) => (
+                <div key={cls.name}>
+                  <Card className="bg-blue-100/20 backdrop-blur-lg border border-white/10 shadow-md rounded-2xl p-6 flex flex-col min-h-[12rem] sm:min-h-[12rem]">
+                    <h3
+                      className="text-xl sm:text-4xl font-bold mb-3 text-white drop-shadow-sm content-text"
+                      style={{
+                        textShadow: `
+                          -1px -1px 0 #000,
+                          1px -1px 0 #000,
+                          -1px 1px 0 #000,
+                          1px 1px 0 #000,
+                          0 2px 4px rgba(0, 0, 0, 0.4)
+                        `,
+                      }}
+                    >
+                      {cls.name}
+                    </h3>
+                    <p className="text-white font-medium flex-1 overflow-hidden text-ellipsis content-text">{cls.desc}</p>
+                  </Card>
+                </div>
+              ))
+            ) : (
+              <p className="text-center text-white text-lg content-text">{SCHEDULE_PAGE.UI.NO_CLASS_DESCRIPTIONS}</p>
+            )}
+          </div>
+        </div>
+
+        {/* Admin Status Feedback, matching AboutSection */}
+        <div className="mt-4 text-center">
+          {authLoading || isLoading ? (
+            <Spinner />
+          ) : isAdmin ? (
+            <p className="text-gray-600 text-sm font-medium">
+              {SCHEDULE_PAGE.UI.ADMIN_LOGGED_IN_MESSAGE}
+            </p>
+          ) : user ? (
+            <p className="text-gray-400 text-sm font-medium">
+            </p>
+          ) : (
+            <p className="text-gray-400 text-sm font-medium">
+            </p>
+          )}
+        </div>
+
+        {/* Render Schedule Modals */}
+        <Schedule
+          isModalOpen={isModalOpen}
+          setIsModalOpen={setIsModalOpen}
+          isConfirmDeleteOpen={isConfirmDeleteOpen}
+          setIsConfirmDeleteOpen={setIsConfirmDeleteOpen}
+          classToDelete={classToDelete}
+          setClassToDelete={setClassToDelete}
+          isLoading={isLoading}
+          error={error}
+          formData={formData}
+          setFormData={setFormData}
+          isAdmin={isAdmin}
+          handleSubmit={handleSubmit}
+          handleConfirmDelete={handleConfirmDelete}
+          handleCancelDelete={handleCancelDelete}
+          roundToNearestFiveMinutes={roundToNearestFiveMinutes}
+          modalVariants={modalVariants}
+        />
+      </div>
+    </div>
+  );
 }