@devvistatech/devvista-kit 0.0.10 → 0.0.12

package/dist/app/schedule/page.jsx

@@ -1,500 +0,0 @@
-"use client";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-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 { useAuth, useUser } from "@clerk/nextjs";
-import { useStrapiAuth } from "@/lib/auth-context";
-import { SCHEDULE_PAGE } from "../../lib/constants/schedule";
-export default function SchedulePage() {
-    var _this = this;
-    var _a = useState({
-        Monday: [],
-        Tuesday: [],
-        Wednesday: [],
-        Thursday: [],
-        Friday: [],
-        Saturday: [],
-        Sunday: [],
-    }), schedule = _a[0], setSchedule = _a[1];
-    var _b = useState(false), isModalOpen = _b[0], setIsModalOpen = _b[1];
-    var _c = useState(false), isConfirmDeleteOpen = _c[0], setIsConfirmDeleteOpen = _c[1];
-    var _d = useState(null), classToDelete = _d[0], setClassToDelete = _d[1];
-    var _e = useState(false), isLoading = _e[0], setIsLoading = _e[1];
-    var _f = useState(null), error = _f[0], setError = _f[1];
-    var _g = useState({
-        name: "",
-        startTime: "",
-        endTime: "",
-        daysOfWeek: [],
-        classDescription: "",
-        id: null,
-        documentId: null,
-    }), formData = _g[0], setFormData = _g[1];
-    var _h = useStrapiAuth(), user = _h.user, authLoading = _h.authLoading, checkSession = _h.checkSession;
-    var getToken = useAuth().getToken;
-    var isSignedIn = useUser().isSignedIn;
-    var isAdmin = isSignedIn && !!(user === null || user === void 0 ? void 0 : user.businessAdminId) || false;
-    var numberToDayKey = {
-        1: "Monday",
-        2: "Tuesday",
-        3: "Wednesday",
-        4: "Thursday",
-        5: "Friday",
-        6: "Saturday",
-        7: "Sunday",
-    };
-    useEffect(function () {
-        window.scrollTo(0, 0);
-    }, []);
-    useEffect(function () {
-        var handleLogin = function () { return checkSession(); };
-        var handleLogout = function () { return checkSession(); };
-        window.addEventListener("user-login", handleLogin);
-        window.addEventListener("user-logout", handleLogout);
-        return function () {
-            window.removeEventListener("user-login", handleLogin);
-            window.removeEventListener("user-logout", handleLogout);
-        };
-    }, [checkSession]);
-    useEffect(function () {
-        var event = new CustomEvent("modalStateChange", {
-            detail: { isOpen: isModalOpen || isConfirmDeleteOpen },
-        });
-        window.dispatchEvent(event);
-    }, [isModalOpen, isConfirmDeleteOpen]);
-    useEffect(function () {
-        if (isModalOpen || isConfirmDeleteOpen) {
-            document.body.style.overflow = "hidden";
-        }
-        else {
-            document.body.style.overflow = "";
-        }
-        return function () {
-            document.body.style.overflow = "";
-        };
-    }, [isModalOpen, isConfirmDeleteOpen]);
-    var roundToNearestFiveMinutes = function (time) {
-        if (!time)
-            return "";
-        var _a = time.split(":").map(Number), hours = _a[0], minutes = _a[1];
-        var roundedMinutes = Math.round(minutes / 5) * 5;
-        var adjustedHours = hours + Math.floor(roundedMinutes / 60);
-        var finalMinutes = roundedMinutes % 60;
-        return "".concat(String(adjustedHours).padStart(2, "0"), ":").concat(String(finalMinutes).padStart(2, "0"));
-    };
-    var fetchEvents = function () { return __awaiter(_this, void 0, void 0, function () {
-        var response, errorData, result, fetchedClasses, updatedSchedule_1, err_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    _a.trys.push([0, 5, 6, 7]);
-                    setIsLoading(true);
-                    return [4 /*yield*/, fetch("/api/schedule", {
-                            headers: { "Content-Type": "application/json" },
-                            cache: "no-store",
-                        })];
-                case 1:
-                    response = _a.sent();
-                    if (!!response.ok) return [3 /*break*/, 3];
-                    return [4 /*yield*/, response.json()];
-                case 2:
-                    errorData = _a.sent();
-                    throw new Error(errorData.error || SCHEDULE_PAGE.ERRORS.FETCH_EVENTS_FAILED.replace("${response.status}", response.status.toString()));
-                case 3: return [4 /*yield*/, response.json()];
-                case 4:
-                    result = _a.sent();
-                    fetchedClasses = (result.data || []).map(function (event) { return ({
-                        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 || "",
-                    }); });
-                    updatedSchedule_1 = {
-                        Monday: [],
-                        Tuesday: [],
-                        Wednesday: [],
-                        Thursday: [],
-                        Friday: [],
-                        Saturday: [],
-                        Sunday: [],
-                    };
-                    fetchedClasses.forEach(function (cls) {
-                        cls.daysOfWeek.forEach(function (dayNum) {
-                            var dayKey = numberToDayKey[dayNum];
-                            if (dayKey && updatedSchedule_1[dayKey]) {
-                                updatedSchedule_1[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_1);
-                    return [3 /*break*/, 7];
-                case 5:
-                    err_1 = _a.sent();
-                    setError(err_1 instanceof Error ? err_1.message : SCHEDULE_PAGE.ERRORS.UNKNOWN_ERROR);
-                    return [3 /*break*/, 7];
-                case 6:
-                    setIsLoading(false);
-                    return [7 /*endfinally*/];
-                case 7: return [2 /*return*/];
-            }
-        });
-    }); };
-    useEffect(function () {
-        fetchEvents();
-    }, []);
-    var openModal = function (cls, day) {
-        if (!isAdmin)
-            return;
-        setFormData({
-            name: (cls === null || cls === void 0 ? void 0 : cls.name) || "",
-            startTime: (cls === null || cls === void 0 ? void 0 : cls.startTime) || "",
-            endTime: (cls === null || cls === void 0 ? void 0 : cls.endTime) || "",
-            daysOfWeek: cls ? cls.daysOfWeek : [],
-            classDescription: (cls === null || cls === void 0 ? void 0 : cls.classDescription) || "",
-            id: (cls === null || cls === void 0 ? void 0 : cls.id) || null,
-            documentId: (cls === null || cls === void 0 ? void 0 : cls.documentId) || null,
-        });
-        setIsModalOpen(true);
-    };
-    var handleSubmit = function (e) { return __awaiter(_this, void 0, void 0, function () {
-        var token, response, errorData, err_2;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    e.preventDefault();
-                    if (!isAdmin) {
-                        setError(SCHEDULE_PAGE.ERRORS.UNAUTHORIZED_MODIFY);
-                        return [2 /*return*/];
-                    }
-                    return [4 /*yield*/, getToken()];
-                case 1:
-                    token = _a.sent();
-                    if (!token) {
-                        setError(SCHEDULE_PAGE.ERRORS.NO_TOKEN_PROVIDED);
-                        return [2 /*return*/];
-                    }
-                    setIsLoading(true);
-                    _a.label = 2;
-                case 2:
-                    _a.trys.push([2, 7, 8, 9]);
-                    return [4 /*yield*/, fetch("/api/schedule", {
-                            method: formData.documentId ? "PUT" : "POST",
-                            headers: {
-                                "Content-Type": "application/json",
-                                Authorization: "Bearer ".concat(token),
-                            },
-                            body: JSON.stringify({
-                                documentId: formData.documentId,
-                                data: {
-                                    title: formData.name,
-                                    startTime: formData.startTime,
-                                    endTime: formData.endTime,
-                                    daysOfWeek: formData.daysOfWeek,
-                                    classDescription: formData.classDescription || null,
-                                },
-                            }),
-                        })];
-                case 3:
-                    response = _a.sent();
-                    if (!!response.ok) return [3 /*break*/, 5];
-                    return [4 /*yield*/, response.json()];
-                case 4:
-                    errorData = _a.sent();
-                    throw new Error(errorData.error || SCHEDULE_PAGE.ERRORS.SUBMIT_CLASS_FAILED.replace("${formData.documentId ? 'update' : 'create'}", formData.documentId ? "update" : "create"));
-                case 5: return [4 /*yield*/, fetchEvents()];
-                case 6:
-                    _a.sent();
-                    setIsModalOpen(false);
-                    setFormData({ name: "", startTime: "", endTime: "", daysOfWeek: [], classDescription: "", id: null, documentId: null });
-                    return [3 /*break*/, 9];
-                case 7:
-                    err_2 = _a.sent();
-                    setError(err_2 instanceof Error ? err_2.message : SCHEDULE_PAGE.ERRORS.UNKNOWN_ERROR);
-                    return [3 /*break*/, 9];
-                case 8:
-                    setIsLoading(false);
-                    return [7 /*endfinally*/];
-                case 9: return [2 /*return*/];
-            }
-        });
-    }); };
-    var deleteClass = function (id, documentId, day) { return __awaiter(_this, void 0, void 0, function () {
-        var token, response, errorData, err_3;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!isAdmin) {
-                        setError(SCHEDULE_PAGE.ERRORS.UNAUTHORIZED_DELETE);
-                        return [2 /*return*/];
-                    }
-                    return [4 /*yield*/, getToken()];
-                case 1:
-                    token = _a.sent();
-                    if (!token) {
-                        setError(SCHEDULE_PAGE.ERRORS.NO_TOKEN_PROVIDED);
-                        return [2 /*return*/];
-                    }
-                    _a.label = 2;
-                case 2:
-                    _a.trys.push([2, 7, 8, 9]);
-                    setIsLoading(true);
-                    return [4 /*yield*/, fetch("/api/schedule", {
-                            method: "DELETE",
-                            headers: {
-                                "Content-Type": "application/json",
-                                Authorization: "Bearer ".concat(token),
-                            },
-                            body: JSON.stringify({ documentId: documentId }),
-                        })];
-                case 3:
-                    response = _a.sent();
-                    if (!!response.ok) return [3 /*break*/, 5];
-                    return [4 /*yield*/, response.json()];
-                case 4:
-                    errorData = _a.sent();
-                    throw new Error(errorData.error || SCHEDULE_PAGE.ERRORS.DELETE_CLASS_FAILED.replace("${response.status}", response.status.toString()));
-                case 5: return [4 /*yield*/, fetchEvents()];
-                case 6:
-                    _a.sent();
-                    return [3 /*break*/, 9];
-                case 7:
-                    err_3 = _a.sent();
-                    setError(err_3 instanceof Error ? err_3.message : SCHEDULE_PAGE.ERRORS.UNKNOWN_ERROR);
-                    return [3 /*break*/, 9];
-                case 8:
-                    setIsLoading(false);
-                    return [7 /*endfinally*/];
-                case 9: return [2 /*return*/];
-            }
-        });
-    }); };
-    var openConfirmDelete = function (id, documentId, day) {
-        if (!isAdmin)
-            return;
-        setClassToDelete({ id: id, documentId: documentId, day: day });
-        setIsConfirmDeleteOpen(true);
-    };
-    var handleConfirmDelete = function () { return __awaiter(_this, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!classToDelete) return [3 /*break*/, 2];
-                    return [4 /*yield*/, deleteClass(classToDelete.id, classToDelete.documentId, classToDelete.day)];
-                case 1:
-                    _a.sent();
-                    setIsConfirmDeleteOpen(false);
-                    setClassToDelete(null);
-                    _a.label = 2;
-                case 2: return [2 /*return*/];
-            }
-        });
-    }); };
-    var handleCancelDelete = function () {
-        setIsConfirmDeleteOpen(false);
-        setClassToDelete(null);
-    };
-    var formatTime = function (time) {
-        if (!time)
-            return "";
-        return new Date("2023-01-01 ".concat(time)).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" });
-    };
-    var uniqueClassDescriptions = Array.from(new Map(Object.values(schedule)
-        .flat()
-        .filter(function (cls) { return cls.classDescription; })
-        .map(function (cls) { return [cls.name, { name: cls.name, desc: cls.classDescription }]; })).values());
-    var 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,
-            ],
-        },
-    ];
-    var 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>{"\n        @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap\");\n\n        :root {\n          --jubilee: #F47C7C;\n          --natural-white: #F7F7F7;\n          --caviar: #2D2D2D;\n          --storm-cloud: #4A636E;\n          --exuberant-blue: #C71585;\n          --modern-purple: #D946EF;\n        }\n\n        * {\n          font-family: \"Inter\", system-ui, sans-serif;\n          box-sizing: border-box;\n        }\n\n        .gradient-text {\n          background: linear-gradient(135deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple));\n          -webkit-background-clip: text;\n          background-clip: text;\n          color: transparent;\n          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n        }\n\n        @media (max-width: 1024px) {\n          .container-padding {\n            padding-left: 1.5rem;\n            padding-right: 1.5rem;\n            padding-top: 4rem;\n            padding-bottom: 4rem;\n          }\n\n          .main-heading {\n            font-size: 2.75rem;\n            margin-bottom: 2.5rem;\n          }\n\n          .content-text {\n            font-size: 1.125rem;\n          }\n        }\n\n        @media (max-width: 640px) {\n          .container-padding {\n            padding-left: 0.75rem;\n            padding-right: 0.75rem;\n            padding-top: 3rem;\n            padding-bottom: 3rem;\n          }\n\n          .main-heading {\n            font-size: 2rem;\n          }\n\n          .section-heading {\n            font-size: 1.75rem;\n          }\n\n          .content-text {\n            font-size: 1rem;\n          }\n\n          .modal-form input,\n          .modal-form select,\n          .modal-form textarea {\n            font-size: 0.875rem;\n            padding: 0.75rem;\n            border-radius: 0.5rem;\n          }\n\n          .modal-form button {\n            padding: 0.75rem 1rem;\n            font-size: 0.875rem;\n            border-radius: 0.5rem;\n          }\n\n          .modal-form label {\n            font-size: 0.875rem;\n          }\n\n          .modal-form .flex {\n            flex-direction: column;\n            gap: 0.5rem;\n          }\n\n          .modal-form select {\n            appearance: none;\n            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\");\n            background-repeat: no-repeat;\n            background-position: right 0.75rem center;\n            background-size: 1rem;\n          }\n\n          .modal-form input[type=\"checkbox\"] {\n            height: 1.25rem;\n            width: 1.25rem;\n          }\n\n          .modal-form textarea {\n            min-height: 80px;\n          }\n        }\n\n        @media (max-width: 320px) {\n          .container-padding {\n            padding-left: 0.5rem;\n            padding-right: 0.5rem;\n          }\n\n          .modal-form input,\n          .modal-form select,\n          .modal-form textarea {\n            font-size: 0.75rem;\n            padding: 0.5rem;\n          }\n\n          .modal-form button {\n            padding: 0.5rem 0.75rem;\n            font-size: 0.75rem;\n          }\n\n          .modal-form label {\n            font-size: 0.75rem;\n          }\n        }\n      "}</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: "\n                -1px -1px 0 #000,\n                1px -1px 0 #000,\n                -1px 1px 0 #000,\n                1px 1px 0 #000,\n                0 2px 4px rgba(0, 0, 0, 0.4)\n              ",
-        }}>
-            {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(function (plan) { return (<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: "\n                          -1px -1px 0 #000,\n                          1px -1px 0 #000,\n                          -1px 1px 0 #000,\n                          1px 1px 0 #000,\n                          0 2px 4px rgba(0, 0, 0, 0.4)\n                        ",
-            }}>
-                      {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(function (price, idx) { return (<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: "\n              -1px -1px 0 #000,\n              1px -1px 0 #000,\n              -1px 1px 0 #000,\n              1px 1px 0 #000,\n              0 2px 4px rgba(0, 0, 0, 0.4)\n            ",
-        }}>
-          {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(function (cls) { return (<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: "\n                          -1px -1px 0 #000,\n                          1px -1px 0 #000,\n                          -1px 1px 0 #000,\n                          1px 1px 0 #000,\n                          0 2px 4px rgba(0, 0, 0, 0.4)\n                        ",
-            }}>
-                      {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>);
-}