@devvistatech/devvista-kit 0.0.9 → 0.0.10

package/dist/components/addOns/functional/schedules/ScheduleGridOne.jsx

@@ -0,0 +1,167 @@
+// src/pages/ScheduleGridOne.tsx
+"use client";
+import React, { useState, useMemo } from "react";
+import { AddButton, SubmitButton, DeleteIconButton } from "@/components/other/button";
+import { ClassPopup } from "../ClassPopup";
+import { SCHEDULE_GRID_ONE } from "./constants/scheduleGridOne";
+var ScheduleGrid = function (_a) {
+    var schedule = _a.schedule, isAdmin = _a.isAdmin, error = _a.error, openModal = _a.openModal, openConfirmDelete = _a.openConfirmDelete, formatTime = _a.formatTime;
+    var _b = useState(""), searchQuery = _b[0], setSearchQuery = _b[1];
+    var _c = useState(""), timeFilter = _c[0], setTimeFilter = _c[1];
+    var _d = useState(false), isPopupOpen = _d[0], setIsPopupOpen = _d[1];
+    var _e = useState(null), selectedClass = _e[0], setSelectedClass = _e[1];
+    var daysOfWeek = SCHEDULE_GRID_ONE.UI.DAYS_OF_WEEK;
+    var timeRanges = [
+        SCHEDULE_GRID_ONE.UI.MORNING_OPTION,
+        SCHEDULE_GRID_ONE.UI.AFTERNOON_OPTION,
+        SCHEDULE_GRID_ONE.UI.EVENING_OPTION,
+    ];
+    var parseTimeTo24Hour = function (time) {
+        try {
+            var _a = time.split(" "), timePart = _a[0], period = _a[1];
+            var _b = timePart.split(":").map(Number), hours = _b[0], minutes = _b[1];
+            if (period === "PM" && hours !== 12)
+                hours += 12;
+            if (period === "AM" && hours === 12)
+                hours = 0;
+            return hours + minutes / 60;
+        }
+        catch (_c) {
+            return 0;
+        }
+    };
+    var filteredSchedule = useMemo(function () {
+        var filtered = {};
+        Object.entries(schedule).forEach(function (_a) {
+            var day = _a[0], classes = _a[1];
+            filtered[day] = classes.filter(function (cls) {
+                if (searchQuery && !cls.name.toLowerCase().includes(searchQuery.toLowerCase()))
+                    return false;
+                if (timeFilter) {
+                    var startHour = parseTimeTo24Hour(formatTime(cls.startTime));
+                    if (timeFilter === SCHEDULE_GRID_ONE.UI.MORNING_OPTION && startHour >= 12)
+                        return false;
+                    if (timeFilter === SCHEDULE_GRID_ONE.UI.AFTERNOON_OPTION && (startHour < 12 || startHour >= 17))
+                        return false;
+                    if (timeFilter === SCHEDULE_GRID_ONE.UI.EVENING_OPTION && startHour < 17)
+                        return false;
+                }
+                return true;
+            });
+        });
+        return filtered;
+    }, [schedule, searchQuery, timeFilter, formatTime]);
+    var resetFilters = function () {
+        setSearchQuery("");
+        setTimeFilter("");
+    };
+    var handleClassClick = function (cls, day) {
+        if (!isAdmin) {
+            setSelectedClass({
+                id: cls.documentId,
+                title: cls.name,
+                time: "".concat(formatTime(cls.startTime), " - ").concat(formatTime(cls.endTime)),
+                day: day,
+                ageGroup: SCHEDULE_GRID_ONE.UI.ALL_AGES_TEXT,
+            });
+            setIsPopupOpen(true);
+        }
+        else {
+            openModal(cls, day);
+        }
+    };
+    return (<div className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      <style jsx global>{"\n        @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap\");\n        * {\n          font-family: \"Inter\", system-ui, sans-serif;\n          box-sizing: border-box;\n        }\n      "}</style>
+
+      <div className="bg-white/10 backdrop-blur-lg border border-white/20 p-4 rounded-2xl mb-6 shadow-[0_8px_32px_rgba(0,0,0,0.2)]">
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div>
+            <label className="block text-md font-medium text-white mb-1">{SCHEDULE_GRID_ONE.UI.SEARCH_LABEL}</label>
+            <input type="text" value={searchQuery} onChange={function (e) { return setSearchQuery(e.target.value); }} placeholder={SCHEDULE_GRID_ONE.UI.SEARCH_PLACEHOLDER} className="w-full p-2 rounded bg-gray-400 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 placeholder-white"/>
+          </div>
+          <div>
+            <label className="block text-md font-medium text-white mb-1">{SCHEDULE_GRID_ONE.UI.TIME_FILTER_LABEL}</label>
+            <select value={timeFilter} onChange={function (e) { return setTimeFilter(e.target.value); }} className="w-full p-2 rounded bg-gray-400 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 placeholder-white">
+              <option value="">{SCHEDULE_GRID_ONE.UI.ALL_TIMES_OPTION}</option>
+              {timeRanges.map(function (time) { return (<option key={time} value={time}>
+                  {time}
+                </option>); })}
+            </select>
+          </div>
+        </div>
+        <SubmitButton onClick={resetFilters} className="mt-4">
+          {SCHEDULE_GRID_ONE.BUTTONS.RESET_FILTERS_BUTTON}
+        </SubmitButton>
+      </div>
+
+      <div className="flex justify-between items-center mb-6">
+        <h2 className="text-2xl sm:text-3xl lg:text-4xl text-white font-black tracking-wide drop-shadow-md" 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_GRID_ONE.UI.CLASS_SCHEDULE_HEADING}
+        </h2>
+        {isAdmin && (<AddButton onClick={function () { return openModal(); }}>
+            {SCHEDULE_GRID_ONE.BUTTONS.ADD_NEW_CLASS_BUTTON}
+          </AddButton>)}
+      </div>
+
+      {error ? (<div className="text-center text-red-400 text-xl sm:text-2xl font-bold">{error}</div>) : (<div className="bg-white/10 backdrop-blur-lg border border-white/20 rounded-2xl p-6 shadow-[0_8px_32px_rgba(0,0,0,0.2)]">
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {daysOfWeek.map(function (day, index) {
+                var classes = filteredSchedule[day] || [];
+                return (<div key={day} className="p-4 flex flex-col min-w-0">
+                  <h3 className="text-lg font-bold text-white mb-3 text-center p-2" 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                      ",
+                    }}>
+                    {day}
+                  </h3>
+                  <ul className="space-y-3 font-medium flex-1">
+                    {classes.length > 0 ? (classes.map(function (cls) { return (<li key={"".concat(cls.startTime, "-").concat(cls.endTime, "-").concat(cls.id)} className={"bg-white/12 backdrop-blur-lg border border-white/20 rounded-lg p-3 shadow-[0_4px_20px_rgba(0,0,0,0.15)] relative cursor-pointer hover:bg-blue-600/20"} onClick={function () { return handleClassClick(cls, day); }} role="button" tabIndex={0} onKeyDown={function (e) {
+                            if (e.key === "Enter" || e.key === " ") {
+                                e.preventDefault();
+                                handleClassClick(cls, day);
+                            }
+                        }}>
+                          <div className="flex flex-col space-y-1">
+                            <span className="font-bold text-2xl sm:text-xl md:text-lg lg:text-2xl text-[#FF69B4]">
+                              {cls.name}
+                            </span>
+                            <div className="flex flex-col text-white text-2xl sm:text-xl md:text-lg lg:text-2xl">
+                              <span>
+                                {formatTime(cls.startTime)} - {formatTime(cls.endTime)}
+                              </span>
+                            </div>
+                            {isAdmin && (<DeleteIconButton onClick={function (e) {
+                                e.stopPropagation();
+                                openConfirmDelete(cls.id, cls.documentId, day);
+                            }} aria-label={SCHEDULE_GRID_ONE.UI.DELETE_BUTTON_ARIA.replace("${cls.name}", cls.name)}/>)}
+                          </div>
+                        </li>); })) : (<li className="text-center text-2xl sm:text-xl md:text-lg lg:text-2xl">
+                        {SCHEDULE_GRID_ONE.UI.NO_CLASSES_MESSAGE}
+                      </li>)}
+                  </ul>
+                </div>);
+            })}
+          </div>
+        </div>)}
+
+      <div className="mt-6 text-center">
+        <p className="text-md">
+          {SCHEDULE_GRID_ONE.UI.COMPLIMENTARY_CLASS_TEXT}
+          <a href={"tel:".concat(SCHEDULE_GRID_ONE.UI.PHONE_NUMBER)} className="font-semibold">
+            {SCHEDULE_GRID_ONE.UI.PHONE_NUMBER}
+          </a>
+          .
+        </p>
+        <p className="mt-2 text-md italic">
+          {SCHEDULE_GRID_ONE.UI.SCHEDULE_DISCLAIMER}
+        </p>
+      </div>
+
+      <ClassPopup isOpen={isPopupOpen} onClose={function () {
+            setIsPopupOpen(false);
+            setSelectedClass(null);
+        }} classDetails={selectedClass}/>
+    </div>);
+};
+export default ScheduleGrid;

package/dist/components/addOns/functional/schedules/ScheduleGridTwo.jsx

@@ -0,0 +1,100 @@
+// src/pages/ScheduleGridTwo.tsx
+"use client";
+import React, { useState } from "react";
+import { AddButton, DeleteIconButton } from "@/components/other/button";
+import { ClassPopup } from "../ClassPopup";
+import { SCHEDULE_GRID_TWO } from "./constants/ScheduleGridTwo";
+import { useUser } from "@clerk/nextjs";
+var ScheduleGrid = function (_a) {
+    var schedule = _a.schedule, isAdmin = _a.isAdmin, error = _a.error, openModal = _a.openModal, openConfirmDelete = _a.openConfirmDelete, formatTime = _a.formatTime;
+    var _b = useState(false), isPopupOpen = _b[0], setIsPopupOpen = _b[1];
+    var _c = useState(null), selectedClass = _c[0], setSelectedClass = _c[1];
+    var isSignedIn = useUser().isSignedIn;
+    var daysOfWeek = SCHEDULE_GRID_TWO.UI.DAYS_OF_WEEK;
+    var handleClassClick = function (cls, day) {
+        if (!isAdmin) {
+            setSelectedClass({
+                id: cls.documentId,
+                title: cls.name,
+                time: "".concat(formatTime(cls.startTime), " - ").concat(formatTime(cls.endTime)),
+                day: day,
+                ageGroup: SCHEDULE_GRID_TWO.UI.ALL_AGES_TEXT,
+            });
+            setIsPopupOpen(true);
+        }
+        else {
+            openModal(cls, day);
+        }
+    };
+    return (<>
+      <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        .schedule-container {\n          background: rgba(255, 255, 255, 0.1);\n          backdrop-filter: blur(12px);\n          border: 1px solid rgba(255, 255, 255, 0.2);\n          border-radius: 2rem;\n          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n          min-width: 0;\n        }\n\n        .day-header {\n          background: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee));\n          color: white;\n          border-radius: 0.5rem;\n          padding: 0.5rem;\n          font-size: 1.8rem;\n          text-align: center;\n          font-weight: bold;\n          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n        }\n\n        .schedule-text {\n          font-size: 2rem;\n          text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,\n            0 2px 4px rgba(0, 0, 0, 0.4);\n          line-height: 1.4;\n          padding-bottom: 0.5rem;\n        }\n\n        .schedule-header {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          margin-left: auto;\n          margin-right: auto;\n          margin-bottom: 1.5rem;\n        }\n\n        .schedule-card {\n          background: rgba(255, 255, 255, 0.12);\n          backdrop-filter: blur(10px);\n          hanging-punctuation: 1px solid rgba(255, 255, 255, 0.2);\n          border-radius: 1rem;\n          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n          min-width: 0;\n        }\n\n        @media (max-width: 1024px) {\n          .schedule-text {\n            font-size: 1.25rem;\n          }\n\n          .schedule-container {\n            padding: 1rem;\n          }\n\n          .schedule-card {\n            padding: 0.75rem;\n          }\n        }\n\n        @media (max-width: 640px) {\n          .schedule-text {\n            font-size: 1.125rem;\n          }\n\n          .schedule-container {\n            padding: 0.5rem;\n          }\n\n          .schedule-card {\n            padding: 0.5rem;\n            border-radius: 0.75rem;\n          }\n\n          .day-header {\n            padding: 0.4rem;\n            font-size: 1rem;\n          }\n\n          .schedule-header {\n            flex-direction: column;\n            align-items: flex-start;\n            margin-bottom: 1rem;\n          }\n\n          .schedule-header h2 {\n            margin-bottom: 0.5rem;\n          }\n        }\n\n        @media (max-width: 320px) {\n          .schedule-text {\n            font-size: 1rem;\n          }\n        }\n      "}</style>
+
+      <div className="mb-16 pt-12">
+        <div className="schedule-header">
+          <h2 className="text-2xl sm:text-3xl lg:text-4xl text-white font-black 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_GRID_TWO.UI.CLASS_SCHEDULE_HEADING}
+          </h2>
+
+          {isAdmin && (<AddButton onClick={function () { return openModal(); }} className="mt-4">
+              {SCHEDULE_GRID_TWO.BUTTONS.ADD_NEW_CLASS_BUTTON}
+            </AddButton>)}
+        </div>
+        {error ? (<div className="text-center text-red-400 text-xl sm:text-2xl font-bold content-text">{error}</div>) : (<div className="schedule-container rounded-[2rem] overflow-hidden p-6">
+            <div className="grid grid-cols-1 gap-4">
+              {daysOfWeek.map(function (day, index) {
+                var classes = schedule[day] || [];
+                return (<div key={day} className="p-4 flex flex-col min-w-0">
+                    <h3 className="text-lg font-bold text-white mb-3 text-center day-header 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                        ",
+                    }}>
+                      {day}
+                    </h3>
+
+                    <ul className="space-y-3 font-medium flex-1">
+                      {classes.length > 0 ? (classes.map(function (cls) { return (<li key={"".concat(cls.startTime, "-").concat(cls.endTime, "-").concat(cls.id)} className={"schedule-card p-3 border-none relative ".concat(isAdmin ? "cursor-pointer hover:bg-blue-600/20" : "cursor-pointer hover:bg-blue-600/20")} onClick={function () { return handleClassClick(cls, day); }} role="button" tabIndex={0} onKeyDown={function (e) {
+                            if (e.key === "Enter" || e.key === " ") {
+                                e.preventDefault();
+                                handleClassClick(cls, day);
+                            }
+                        }}>
+                            <div className="flex flex-col space-y-1">
+                              <span className="font-semibold text-[#ff48bc] schedule-text">{cls.name}</span>
+                              <div className="flex flex-col text-white schedule-text">
+                                <span>
+                                  {formatTime(cls.startTime)} - {formatTime(cls.endTime)}
+                                </span>
+                              </div>
+                              {isAdmin && (<DeleteIconButton onClick={function (e) {
+                                e.stopPropagation();
+                                openConfirmDelete(cls.id, cls.documentId, day);
+                            }} aria-label={SCHEDULE_GRID_TWO.UI.DELETE_BUTTON_ARIA.replace("${cls.name}", cls.name)}/>)}
+                            </div>
+                          </li>); })) : (<li className="text-center text-white schedule-text">{SCHEDULE_GRID_TWO.UI.NO_CLASSES_MESSAGE}</li>)}
+                    </ul>
+                  </div>);
+            })}
+            </div>
+          </div>)}
+        <div className="mt-6 text-center">
+          <p className="text-md content-text">
+            {SCHEDULE_GRID_TWO.UI.COMPLIMENTARY_CLASS_TEXT}
+            <a href={"tel:".concat(SCHEDULE_GRID_TWO.UI.PHONE_NUMBER)} className="font-semibold">
+              {SCHEDULE_GRID_TWO.UI.PHONE_NUMBER}
+            </a>
+            .
+          </p>
+          <p className="mt-2 text-md italic content-text">
+            {SCHEDULE_GRID_TWO.UI.SCHEDULE_DISCLAIMER}
+          </p>
+        </div>
+
+        <ClassPopup isOpen={isPopupOpen} onClose={function () {
+            setIsPopupOpen(false);
+            setSelectedClass(null);
+        }} classDetails={selectedClass}/>
+      </div>
+    </>);
+};
+export default ScheduleGrid;

package/dist/components/addOns/functional/schedules/ScheduleGridTwoBasic.jsx

@@ -0,0 +1,97 @@
+// src/pages/ScheduleGridTwoBasic.tsx
+"use client";
+import React, { useState } from "react";
+import { AddButton, DeleteIconButton } from "@/components/other/button";
+import { useUser } from "@clerk/nextjs";
+import { SCHEDULE_GRID_TWO_BASIC } from "./constants/ScheduleGridTwoBasic";
+var ScheduleGrid = function (_a) {
+    var schedule = _a.schedule, isAdmin = _a.isAdmin, error = _a.error, openModal = _a.openModal, openConfirmDelete = _a.openConfirmDelete, formatTime = _a.formatTime;
+    var _b = useState(false), isPopupOpen = _b[0], setIsPopupOpen = _b[1];
+    var _c = useState(null), selectedClass = _c[0], setSelectedClass = _c[1];
+    var isSignedIn = useUser().isSignedIn;
+    var daysOfWeek = SCHEDULE_GRID_TWO_BASIC.UI.DAYS_OF_WEEK;
+    var handleClassClick = function (cls, day) {
+        if (!isAdmin) {
+            setSelectedClass({
+                id: cls.documentId,
+                title: cls.name,
+                time: "".concat(formatTime(cls.startTime), " - ").concat(formatTime(cls.endTime)),
+                day: day,
+                ageGroup: SCHEDULE_GRID_TWO_BASIC.UI.ALL_AGES_TEXT,
+            });
+            setIsPopupOpen(true);
+        }
+        else {
+            openModal(cls, day);
+        }
+    };
+    return (<>
+      <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        .schedule-container {\n          background: rgba(255, 255, 255, 0.1);\n          backdrop-filter: blur(12px);\n          border: 1px solid rgba(255, 255, 255, 0.2);\n          border-radius: 2rem;\n          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n          min-width: 0;\n        }\n\n        .day-header {\n          background: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee));\n          color: white;\n          border-radius: 0.5rem;\n          padding: 0.5rem;\n          font-size: 1.8rem;\n          text-align: center;\n          font-weight: bold;\n          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n        }\n\n        .schedule-text {\n          font-size: 2rem;\n          text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,\n            0 2px 4px rgba(0, 0, 0, 0.4);\n          line-height: 1.4;\n          padding-bottom: 0.5rem;\n        }\n\n        .schedule-header {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          margin-left: auto;\n          margin-right: auto;\n          margin-bottom: 1.5rem;\n        }\n\n        .schedule-card {\n          background: rgba(255, 255, 255, 0.12);\n          backdrop-filter: blur(10px);\n          hanging-punctuation: 1px solid rgba(255, 255, 255, 0.2);\n          border-radius: 1rem;\n          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n          min-width: 0;\n        }\n\n        .schedule-card:hover {\n          background: #f48fb1;\n        }\n\n        @media (max-width: 1024px) {\n          .schedule-text {\n            font-size: 1.25rem;\n          }\n\n          .schedule-container {\n            padding: 1rem;\n          }\n\n          .schedule-card {\n            padding: 0.75rem;\n          }\n        }\n\n        @media (max-width: 640px) {\n          .schedule-text {\n            font-size: 1.125rem;\n          }\n\n          .schedule-container {\n            padding: 0.5rem;\n          }\n\n          .schedule-card {\n            padding: 0.5rem;\n            border-radius: 0.75rem;\n          }\n\n          .day-header {\n            padding: 0.4rem;\n            font-size: 1rem;\n          }\n\n          .schedule-header {\n            flex-direction: column;\n            align-items: flex-start;\n            margin-bottom: 1rem;\n          }\n\n          .schedule-header h2 {\n            margin-bottom: 0.5rem;\n          }\n        }\n\n        @media (max-width: 320px) {\n          .schedule-text {\n            font-size: 1rem;\n          }\n        }\n      "}</style>
+
+      <div className="mb-16 pt-12">
+        <div className="schedule-header">
+          <h2 className="text-2xl sm:text-3xl lg:text-6xl text-white font-black 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_GRID_TWO_BASIC.UI.CLASS_SCHEDULE_HEADING}
+          </h2>
+
+          {isAdmin && (<AddButton onClick={function () { return openModal(); }} className="mt-4">
+              {SCHEDULE_GRID_TWO_BASIC.BUTTONS.ADD_NEW_CLASS_BUTTON}
+            </AddButton>)}
+        </div>
+        {error ? (<div className="text-center text-red-400 text-xl sm:text-2xl font-bold content-text">{error}</div>) : (<div className="schedule-container rounded-[2rem] overflow-hidden p-6">
+            <div className="grid grid-cols-1 gap-4">
+              {daysOfWeek.map(function (day, index) {
+                var classes = schedule[day] || [];
+                return (<div key={day} className="p-4 flex flex-col min-w-0">
+                    <h3 className="text-lg font-bold text-white mb-3 text-center day-header 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                        ",
+                    }}>
+                      {day}
+                    </h3>
+
+                    <ul className="space-y-3 font-medium flex-1">
+                      {classes.length > 0 ? (classes.map(function (cls) { return (<li key={"".concat(cls.startTime, "-").concat(cls.endTime, "-").concat(cls.id)} className={"schedule-card p-3 border-none relative ".concat(isAdmin ? "cursor-pointer hover:bg-blue-600/20" : "cursor-default")} onClick={function () {
+                            if (isAdmin)
+                                handleClassClick(cls, day);
+                        }} role={isAdmin ? "button" : undefined} tabIndex={isAdmin ? 0 : -1} onKeyDown={function (e) {
+                            if (isAdmin && (e.key === "Enter" || e.key === " ")) {
+                                e.preventDefault();
+                                handleClassClick(cls, day);
+                            }
+                        }}>
+                            <div className="flex flex-col space-y-1">
+                              <span className="font-semibold text-[#ff48bc] schedule-text">{cls.name}</span>
+                              <div className="flex flex-col text-white schedule-text">
+                                <span>
+                                  {formatTime(cls.startTime)} - {formatTime(cls.endTime)}
+                                </span>
+                              </div>
+                              {isAdmin && (<DeleteIconButton onClick={function (e) {
+                                e.stopPropagation();
+                                openConfirmDelete(cls.id, cls.documentId, day);
+                            }} aria-label={SCHEDULE_GRID_TWO_BASIC.UI.DELETE_BUTTON_ARIA.replace("${cls.name}", cls.name)}/>)}
+                            </div>
+                          </li>); })) : (<li className="text-center text-white schedule-text">{SCHEDULE_GRID_TWO_BASIC.UI.NO_CLASSES_MESSAGE}</li>)}
+                    </ul>
+                  </div>);
+            })}
+            </div>
+          </div>)}
+        <div className="mt-6 text-center">
+          <p className="text-md content-text">
+            {SCHEDULE_GRID_TWO_BASIC.UI.COMPLIMENTARY_CLASS_TEXT}
+            <a href={"tel:".concat(SCHEDULE_GRID_TWO_BASIC.UI.PHONE_NUMBER)} className="font-semibold">
+              {SCHEDULE_GRID_TWO_BASIC.UI.PHONE_NUMBER}
+            </a>
+            .
+          </p>
+          <p className="mt-2 text-md italic content-text">
+            {SCHEDULE_GRID_TWO_BASIC.UI.SCHEDULE_DISCLAIMER}
+          </p>
+        </div>
+      </div>
+    </>);
+};
+export default ScheduleGrid;

package/dist/components/addOns/functional/schedules/SchedulerForm.jsx

@@ -0,0 +1,188 @@
+// src/pages/Schedule.tsx
+"use client";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React from "react";
+import { AddButton, CancelButton, DeleteButton, CloseButton } from "@/components/other/button";
+import { motion } from "framer-motion";
+import { X } from "lucide-react";
+import { useAuth } from "@clerk/nextjs";
+import { SCHEDULER_FORM } from "./constants/SchedulerForm";
+export default function Schedule(_a) {
+    var isModalOpen = _a.isModalOpen, setIsModalOpen = _a.setIsModalOpen, isConfirmDeleteOpen = _a.isConfirmDeleteOpen, setIsConfirmDeleteOpen = _a.setIsConfirmDeleteOpen, classToDelete = _a.classToDelete, setClassToDelete = _a.setClassToDelete, isLoading = _a.isLoading, error = _a.error, formData = _a.formData, setFormData = _a.setFormData, isAdmin = _a.isAdmin, handleSubmit = _a.handleSubmit, handleConfirmDelete = _a.handleConfirmDelete, handleCancelDelete = _a.handleCancelDelete, roundToNearestFiveMinutes = _a.roundToNearestFiveMinutes, modalVariants = _a.modalVariants;
+    var getToken = useAuth().getToken;
+    return (<div>
+      <style jsx>{"\n        .modal-form input,\n        .modal-form select,\n        .modal-form textarea {\n          font-size: 0.875rem;\n          padding: 0.5rem;\n          border-radius: 0.375rem;\n          background: #374151;\n          color: #f3f4f6;\n          border: 1px solid #4b5563;\n        }\n\n        .modal-form input:focus,\n        .modal-form select:focus,\n        .modal-form textarea:focus {\n          outline: none;\n          ring: 2px solid #3b82f6;\n        }\n\n        .modal-form button {\n          padding: 0.5rem 1rem;\n          font-size: 0.875rem;\n          border-radius: 0.375rem;\n        }\n\n        .modal-form label {\n          font-size: 0.875rem;\n          color: #d1d5db;\n        }\n\n        @media (max-width: 640px) {\n          .modal-form input,\n          .modal-form select,\n          .modal-form textarea {\n            font-size: 0.875rem;\n            padding: 0.5rem;\n            border-radius: 0.375rem;\n          }\n\n          .modal-form button {\n            padding: 0.5rem 1rem;\n            font-size: 0.875rem;\n            border-radius: 0.375rem;\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          .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>
+
+      {/* Modal for Add/Edit */}
+      {isModalOpen && isAdmin && (<motion.div variants={modalVariants} initial="hidden" animate="visible" exit="exit" className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate" onClick={function () { return setIsModalOpen(false); }}>
+          <div className="relative max-w-5xl w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg max-h-[90vh] overflow-y-auto" onClick={function (e) { return e.stopPropagation(); }}>
+            <CloseButton onClick={function () { return setIsModalOpen(false); }}>
+              <X className="h-6 w-6 sm:h-8 sm:w-8"/>
+            </CloseButton>
+            <h3 className="text-xl font-bold text-white mb-4">
+              {formData.id ? SCHEDULER_FORM.UI.EDIT_CLASS_HEADING : SCHEDULER_FORM.UI.ADD_NEW_CLASS_HEADING}
+            </h3>
+            <form onSubmit={handleSubmit} className="space-y-4 modal-form">
+              <div>
+                <label htmlFor="className" className="block text-sm font-medium text-gray-300 mb-1">
+                  {SCHEDULER_FORM.UI.CLASS_NAME_LABEL}
+                </label>
+                <input id="className" type="text" placeholder={SCHEDULER_FORM.UI.CLASS_NAME_PLACEHOLDER} value={formData.name} onChange={function (e) { return setFormData(__assign(__assign({}, formData), { name: e.target.value })); }} className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm" required/>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-300 mb-1">{SCHEDULER_FORM.UI.START_TIME_LABEL}</label>
+                <div className="flex flex-col sm:flex-row sm:space-x-2 space-y-2 sm:space-y-0">
+                  <select value={formData.startTime ? formData.startTime.split(":")[0] : ""} onChange={function (e) {
+                var hours = e.target.value;
+                var minutes = formData.startTime ? formData.startTime.split(":")[1] : "00";
+                var newTime = roundToNearestFiveMinutes("".concat(hours, ":").concat(minutes));
+                setFormData(__assign(__assign({}, formData), { startTime: newTime }));
+            }} className="w-full sm:w-1/3 p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm" required>
+                    <option value="" disabled>{SCHEDULER_FORM.UI.HOUR_OPTION}</option>
+                    {Array.from({ length: 12 }, function (_, i) { return i + 1; }).map(function (hour) { return (<option key={hour} value={String(hour).padStart(2, "0")}>{hour}</option>); })}
+                  </select>
+                  <select value={formData.startTime ? formData.startTime.split(":")[1] : ""} onChange={function (e) {
+                var minutes = e.target.value;
+                var hours = formData.startTime ? formData.startTime.split(":")[0] : "12";
+                var newTime = roundToNearestFiveMinutes("".concat(hours, ":").concat(minutes));
+                setFormData(__assign(__assign({}, formData), { startTime: newTime }));
+            }} className="w-full sm:w-1/3 p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm" required>
+                    <option value="" disabled>{SCHEDULER_FORM.UI.MINUTE_OPTION}</option>
+                    {["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"].map(function (minute) { return (<option key={minute} value={minute}>{minute}</option>); })}
+                  </select>
+                  <select value={formData.startTime && Number(formData.startTime.split(":")[0]) >= 12 ? SCHEDULER_FORM.UI.PM_OPTION : SCHEDULER_FORM.UI.AM_OPTION} onChange={function (e) {
+                var period = e.target.value;
+                var hours = formData.startTime ? Number(formData.startTime.split(":")[0]) : 12;
+                var minutes = formData.startTime ? formData.startTime.split(":")[1] : "00";
+                if (period === SCHEDULER_FORM.UI.AM_OPTION && hours >= 12)
+                    hours -= 12;
+                else if (period === SCHEDULER_FORM.UI.PM_OPTION && hours < 12)
+                    hours += 12;
+                var newTime = roundToNearestFiveMinutes("".concat(String(hours).padStart(2, "0"), ":").concat(minutes));
+                setFormData(__assign(__assign({}, formData), { startTime: newTime }));
+            }} className="w-full sm:w-1/3 p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm" required>
+                    <option value={SCHEDULER_FORM.UI.AM_OPTION}>{SCHEDULER_FORM.UI.AM_OPTION}</option>
+                    <option value={SCHEDULER_FORM.UI.PM_OPTION}>{SCHEDULER_FORM.UI.PM_OPTION}</option>
+                  </select>
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-300 mb-1">{SCHEDULER_FORM.UI.END_TIME_LABEL}</label>
+                <div className="flex flex-col sm:flex-row sm:space-x-2 space-y-2 sm:space-y-0">
+                  <select value={formData.endTime ? formData.endTime.split(":")[0] : ""} onChange={function (e) {
+                var hours = e.target.value;
+                var minutes = formData.endTime ? formData.endTime.split(":")[1] : "00";
+                var newTime = roundToNearestFiveMinutes("".concat(hours, ":").concat(minutes));
+                setFormData(__assign(__assign({}, formData), { endTime: newTime }));
+            }} className="w-full sm:w-1/3 p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm" required>
+                    <option value="" disabled>{SCHEDULER_FORM.UI.HOUR_OPTION}</option>
+                    {Array.from({ length: 12 }, function (_, i) { return i + 1; }).map(function (hour) { return (<option key={hour} value={String(hour).padStart(2, "0")}>{hour}</option>); })}
+                  </select>
+                  <select value={formData.endTime ? formData.endTime.split(":")[1] : ""} onChange={function (e) {
+                var minutes = e.target.value;
+                var hours = formData.endTime ? formData.endTime.split(":")[0] : "12";
+                var newTime = roundToNearestFiveMinutes("".concat(hours, ":").concat(minutes));
+                setFormData(__assign(__assign({}, formData), { endTime: newTime }));
+            }} className="w-full sm:w-1/3 p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm" required>
+                    <option value="" disabled>{SCHEDULER_FORM.UI.MINUTE_OPTION}</option>
+                    {["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"].map(function (minute) { return (<option key={minute} value={minute}>{minute}</option>); })}
+                  </select>
+                  <select value={formData.endTime && Number(formData.endTime.split(":")[0]) >= 12 ? SCHEDULER_FORM.UI.PM_OPTION : SCHEDULER_FORM.UI.AM_OPTION} onChange={function (e) {
+                var period = e.target.value;
+                var hours = formData.endTime ? Number(formData.endTime.split(":")[0]) : 12;
+                var minutes = formData.endTime ? formData.endTime.split(":")[1] : "00";
+                if (period === SCHEDULER_FORM.UI.AM_OPTION && hours >= 12)
+                    hours -= 12;
+                else if (period === SCHEDULER_FORM.UI.PM_OPTION && hours < 12)
+                    hours += 12;
+                var newTime = roundToNearestFiveMinutes("".concat(String(hours).padStart(2, "0"), ":").concat(minutes));
+                setFormData(__assign(__assign({}, formData), { endTime: newTime }));
+            }} className="w-full sm:w-1/3 p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm" required>
+                    <option value={SCHEDULER_FORM.UI.AM_OPTION}>{SCHEDULER_FORM.UI.AM_OPTION}</option>
+                    <option value={SCHEDULER_FORM.UI.PM_OPTION}>{SCHEDULER_FORM.UI.PM_OPTION}</option>
+                  </select>
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-300 mb-1">{SCHEDULER_FORM.UI.DAYS_OF_WEEK_LABEL}</label>
+                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
+                  {SCHEDULER_FORM.UI.DAYS_OF_WEEK.map(function (day) { return (<label key={day.value} className="flex items-center space-x-2 cursor-pointer">
+                      <input type="checkbox" value={day.value} checked={formData.daysOfWeek.includes(day.value)} onChange={function (e) {
+                    var value = Number(e.target.value);
+                    setFormData(__assign(__assign({}, formData), { daysOfWeek: e.target.checked
+                            ? __spreadArray(__spreadArray([], formData.daysOfWeek, true), [value], false).sort()
+                            : formData.daysOfWeek.filter(function (d) { return d !== value; }) }));
+                }} className="h-5 w-5 text-blue-500 focus:ring-blue-500 border-gray-600 rounded bg-gray-700"/>
+                      <span className="text-gray-300 text-sm">{day.label}</span>
+                    </label>); })}
+                </div>
+              </div>
+
+              <div>
+                <label htmlFor="classDescription" className="block text-sm font-medium text-gray-300 mb-1">
+                  {SCHEDULER_FORM.UI.CLASS_DESCRIPTION_LABEL}
+                </label>
+                <textarea id="classDescription" placeholder={SCHEDULER_FORM.UI.CLASS_DESCRIPTION_PLACEHOLDER} value={formData.classDescription} onChange={function (e) { return setFormData(__assign(__assign({}, formData), { classDescription: e.target.value })); }} className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm min-h-[80px]"/>
+              </div>
+
+              <div className="flex space-x-3">
+                <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
+                  <AddButton type="submit" disabled={isLoading}>
+                    {isLoading
+                ? SCHEDULER_FORM.BUTTONS.SAVING_BUTTON
+                : formData.id
+                    ? SCHEDULER_FORM.BUTTONS.UPDATE_BUTTON
+                    : SCHEDULER_FORM.BUTTONS.ADD_BUTTON}
+                  </AddButton>
+                  <CancelButton type="button" onClick={function () { return setIsModalOpen(false); }}>
+                    {SCHEDULER_FORM.BUTTONS.CANCEL_BUTTON}
+                  </CancelButton>
+                </div>
+              </div>
+              {error && <p className="text-red-400 text-sm font-medium">{error}</p>}
+            </form>
+          </div>
+        </motion.div>)}
+
+      {/* Confirmation Popup for Delete */}
+      {isConfirmDeleteOpen && isAdmin && (<motion.div variants={modalVariants} initial="hidden" animate="visible" exit="exit" className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate" onClick={handleCancelDelete}>
+          <div className="relative max-w-5xl w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg" onClick={function (e) { return e.stopPropagation(); }}>
+            <CloseButton onClick={handleCancelDelete}>
+              <X className="h-6 w-6 sm:h-8 sm:w-8"/>
+            </CloseButton>
+            <h3 className="text-xl font-bold text-white mb-4">{SCHEDULER_FORM.UI.DELETE_CONFIRMATION_HEADING}</h3>
+            <p className="text-gray-300 text-sm mb-4">{SCHEDULER_FORM.UI.DELETE_CONFIRMATION_MESSAGE}</p>
+            <div className="flex space-x-3">
+              <DeleteButton onClick={handleConfirmDelete} disabled={isLoading}>
+                {isLoading ? SCHEDULER_FORM.BUTTONS.DELETING_BUTTON : SCHEDULER_FORM.BUTTONS.DELETE_BUTTON}
+              </DeleteButton>
+              <CancelButton onClick={handleCancelDelete}>
+                {SCHEDULER_FORM.BUTTONS.CANCEL_BUTTON}
+              </CancelButton>
+            </div>
+          </div>
+        </motion.div>)}
+    </div>);
+}

package/dist/components/addOns/functional/schedules/constants/ScheduleGridTwo.js

@@ -0,0 +1,40 @@
+// components/addOns/functional/schedules/constants/scheduleGridTwo.ts
+// Constants for hardcoded text in ScheduleGridTwo.tsx, organized by purpose
+export var SCHEDULE_GRID_TWO = {
+    // UI Text for ScheduleGridTwo
+    UI: {
+        // Heading for schedule section
+        CLASS_SCHEDULE_HEADING: "Class Schedule",
+        // Text when no classes exist for a day
+        NO_CLASSES_MESSAGE: "No classes",
+        // Footer text before phone number
+        COMPLIMENTARY_CLASS_TEXT: "Your first class is complimentary! Questions? Call ",
+        // Phone number in footer link
+        PHONE_NUMBER: "315-415-4043",
+        // Footer disclaimer
+        SCHEDULE_DISCLAIMER: "*Management reserves the right to cancel or alter class schedules based on attendance.",
+        // Days of the week for headers
+        DAYS_OF_WEEK: [
+            "Monday",
+            "Tuesday",
+            "Wednesday",
+            "Thursday",
+            "Friday",
+            "Saturday",
+            "Sunday",
+        ],
+        // Hardcoded age group for popup
+        ALL_AGES_TEXT: "All Ages",
+        // DeleteIconButton aria-label template
+        DELETE_BUTTON_ARIA: "Delete ${cls.name} class",
+    },
+    // Button Text for ScheduleGridTwo
+    BUTTONS: {
+        // AddButton text for adding new class
+        ADD_NEW_CLASS_BUTTON: "Add New Class",
+    },
+    // Error Messages for ScheduleGridTwo
+    ERRORS: {
+    // No hardcoded errors
+    },
+};