@devvistatech/devvista-kit 0.0.1

package/app/schedule/page.tsx

@@ -0,0 +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 "../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>
+  );
+}