@devvistatech/devvista-kit 0.0.1

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

@@ -0,0 +1,429 @@
+// src/pages/Schedule.tsx
+"use client";
+
+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";
+
+interface ScheduleClass {
+  name: string;
+  startTime: string;
+  endTime: string;
+  id: number;
+  documentId: string;
+  daysOfWeek: number[];
+  classDescription?: string;
+}
+
+interface ScheduleProps {
+  isModalOpen: boolean;
+  setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  isConfirmDeleteOpen: boolean;
+  setIsConfirmDeleteOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  classToDelete: { id: number; documentId: string; day: string } | null;
+  setClassToDelete: React.Dispatch<
+    React.SetStateAction<{ id: number; documentId: string; day: string } | null>
+  >;
+  isLoading: boolean;
+  error: string | null;
+  formData: {
+    name: string;
+    startTime: string;
+    endTime: string;
+    daysOfWeek: number[];
+    classDescription: string;
+    id: number | null;
+    documentId: string | null;
+  };
+  setFormData: React.Dispatch<
+    React.SetStateAction<{
+      name: string;
+      startTime: string;
+      endTime: string;
+      daysOfWeek: number[];
+      classDescription: string;
+      id: number | null;
+      documentId: string | null;
+    }>
+  >;
+  isAdmin: boolean;
+  handleSubmit: (e: React.FormEvent) => Promise<void>;
+  handleConfirmDelete: () => Promise<void>;
+  handleCancelDelete: () => void;
+  roundToNearestFiveMinutes: (time: string) => string;
+  modalVariants: {
+    hidden: { opacity: number; y: string };
+    visible: { opacity: number; y: number; transition: { duration: number; ease: number[] } };
+    exit: { opacity: number; y: string; transition: { duration: number; ease: string } };
+  };
+}
+
+export default function Schedule({
+  isModalOpen,
+  setIsModalOpen,
+  isConfirmDeleteOpen,
+  setIsConfirmDeleteOpen,
+  classToDelete,
+  setClassToDelete,
+  isLoading,
+  error,
+  formData,
+  setFormData,
+  isAdmin,
+  handleSubmit,
+  handleConfirmDelete,
+  handleCancelDelete,
+  roundToNearestFiveMinutes,
+  modalVariants,
+}: ScheduleProps) {
+  const { getToken } = useAuth();
+
+  return (
+    <div>
+      <style jsx>{`
+        .modal-form input,
+        .modal-form select,
+        .modal-form textarea {
+          font-size: 0.875rem;
+          padding: 0.5rem;
+          border-radius: 0.375rem;
+          background: #374151;
+          color: #f3f4f6;
+          border: 1px solid #4b5563;
+        }
+
+        .modal-form input:focus,
+        .modal-form select:focus,
+        .modal-form textarea:focus {
+          outline: none;
+          ring: 2px solid #3b82f6;
+        }
+
+        .modal-form button {
+          padding: 0.5rem 1rem;
+          font-size: 0.875rem;
+          border-radius: 0.375rem;
+        }
+
+        .modal-form label {
+          font-size: 0.875rem;
+          color: #d1d5db;
+        }
+
+        @media (max-width: 640px) {
+          .modal-form input,
+          .modal-form select,
+          .modal-form textarea {
+            font-size: 0.875rem;
+            padding: 0.5rem;
+            border-radius: 0.375rem;
+          }
+
+          .modal-form button {
+            padding: 0.5rem 1rem;
+            font-size: 0.875rem;
+            border-radius: 0.375rem;
+          }
+
+          .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) {
+          .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>
+
+      {/* 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={() => 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={(e) => e.stopPropagation()}
+          >
+            <CloseButton
+              onClick={() => 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={(e) => setFormData({ ...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={(e) => {
+                      const hours = e.target.value;
+                      const minutes = formData.startTime ? formData.startTime.split(":")[1] : "00";
+                      const newTime = roundToNearestFiveMinutes(`${hours}:${minutes}`);
+                      setFormData({ ...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 }, (_, i) => i + 1).map((hour) => (
+                      <option key={hour} value={String(hour).padStart(2, "0")}>{hour}</option>
+                    ))}
+                  </select>
+                  <select
+                    value={formData.startTime ? formData.startTime.split(":")[1] : ""}
+                    onChange={(e) => {
+                      const minutes = e.target.value;
+                      const hours = formData.startTime ? formData.startTime.split(":")[0] : "12";
+                      const newTime = roundToNearestFiveMinutes(`${hours}:${minutes}`);
+                      setFormData({ ...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((minute) => (
+                      <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={(e) => {
+                      const period = e.target.value;
+                      let hours = formData.startTime ? Number(formData.startTime.split(":")[0]) : 12;
+                      const 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;
+                      const newTime = roundToNearestFiveMinutes(`${String(hours).padStart(2, "0")}:${minutes}`);
+                      setFormData({ ...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={(e) => {
+                      const hours = e.target.value;
+                      const minutes = formData.endTime ? formData.endTime.split(":")[1] : "00";
+                      const newTime = roundToNearestFiveMinutes(`${hours}:${minutes}`);
+                      setFormData({ ...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 }, (_, i) => i + 1).map((hour) => (
+                      <option key={hour} value={String(hour).padStart(2, "0")}>{hour}</option>
+                    ))}
+                  </select>
+                  <select
+                    value={formData.endTime ? formData.endTime.split(":")[1] : ""}
+                    onChange={(e) => {
+                      const minutes = e.target.value;
+                      const hours = formData.endTime ? formData.endTime.split(":")[0] : "12";
+                      const newTime = roundToNearestFiveMinutes(`${hours}:${minutes}`);
+                      setFormData({ ...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((minute) => (
+                      <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={(e) => {
+                      const period = e.target.value;
+                      let hours = formData.endTime ? Number(formData.endTime.split(":")[0]) : 12;
+                      const 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;
+                      const newTime = roundToNearestFiveMinutes(`${String(hours).padStart(2, "0")}:${minutes}`);
+                      setFormData({ ...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((day) => (
+                    <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={(e) => {
+                          const value = Number(e.target.value);
+                          setFormData({
+                            ...formData,
+                            daysOfWeek: e.target.checked
+                              ? [...formData.daysOfWeek, value].sort()
+                              : formData.daysOfWeek.filter((d) => 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={(e) => setFormData({ ...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={() => 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={(e) => 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/components/addOns/functional/schedules/constants/ScheduleGridTwo.ts

@@ -0,0 +1,41 @@
+// components/addOns/functional/schedules/constants/scheduleGridTwo.ts
+// Constants for hardcoded text in ScheduleGridTwo.tsx, organized by purpose
+
+export const 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
+  },
+};

package/components/addOns/functional/schedules/constants/ScheduleGridTwoBasic.ts

@@ -0,0 +1,41 @@
+// components/addOns/functional/schedules/constants/scheduleGridTwoBasic.ts
+// Constants for hardcoded text in ScheduleGridTwoBasic.tsx, organized by purpose
+
+export const SCHEDULE_GRID_TWO_BASIC = {
+  // UI Text for ScheduleGridTwoBasic
+  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 ScheduleGridTwoBasic
+  BUTTONS: {
+    // AddButton text for adding new class
+    ADD_NEW_CLASS_BUTTON: "Add New Class",
+  },
+  // Error Messages for ScheduleGridTwoBasic
+  ERRORS: {
+    // No hardcoded errors
+  },
+};

package/components/addOns/functional/schedules/constants/SchedulerForm.ts

@@ -0,0 +1,66 @@
+// components/addOns/functional/schedules/constants/schedulerForm.ts
+// Constants for hardcoded text in Schedule.tsx (SchedulerForm), organized by purpose
+
+export const SCHEDULER_FORM = {
+  // UI Text for SchedulerForm
+  UI: {
+    // Heading for edit class modal
+    EDIT_CLASS_HEADING: "Edit Class",
+    // Heading for add new class modal
+    ADD_NEW_CLASS_HEADING: "Add New Class",
+    // Label for class name input
+    CLASS_NAME_LABEL: "Class Name",
+    // Placeholder for class name input
+    CLASS_NAME_PLACEHOLDER: "Enter class name",
+    // Label for start time inputs
+    START_TIME_LABEL: "Start Time",
+    // Default option for hour select
+    HOUR_OPTION: "Hour",
+    // Default option for minute select
+    MINUTE_OPTION: "Minute",
+    // Options for period select
+    AM_OPTION: "AM",
+    PM_OPTION: "PM",
+    // Label for end time inputs
+    END_TIME_LABEL: "End Time",
+    // Label for days of week checkboxes
+    DAYS_OF_WEEK_LABEL: "Days of the Week",
+    // Checkbox labels for days of the week
+    DAYS_OF_WEEK: [
+      { value: 1, label: "Monday" },
+      { value: 2, label: "Tuesday" },
+      { value: 3, label: "Wednesday" },
+      { value: 4, label: "Thursday" },
+      { value: 5, label: "Friday" },
+      { value: 6, label: "Saturday" },
+      { value: 7, label: "Sunday" },
+    ],
+    // Label for class description textarea
+    CLASS_DESCRIPTION_LABEL: "Class Description (optional)",
+    // Placeholder for class description textarea
+    CLASS_DESCRIPTION_PLACEHOLDER: "Enter class description",
+    // Heading for delete confirmation modal
+    DELETE_CONFIRMATION_HEADING: "Confirm Deletion",
+    // Text in delete confirmation modal
+    DELETE_CONFIRMATION_MESSAGE: "Are you sure you want to delete this class? This action cannot be undone.",
+  },
+  // Button Text for SchedulerForm
+  BUTTONS: {
+    // AddButton text when loading
+    SAVING_BUTTON: "Saving...",
+    // AddButton text when editing a class
+    UPDATE_BUTTON: "Update",
+    // AddButton text when adding a new class
+    ADD_BUTTON: "Add",
+    // DeleteButton text when loading
+    DELETING_BUTTON: "Deleting...",
+    // DeleteButton text for delete confirmation
+    DELETE_BUTTON: "Delete",
+    // CancelButton text for both modals
+    CANCEL_BUTTON: "Cancel",
+  },
+  // Error Messages for SchedulerForm
+  ERRORS: {
+    // No hardcoded errors
+  },
+};

package/components/addOns/functional/schedules/constants/scheduleGridOne.ts

@@ -0,0 +1,55 @@
+// components/addOns/functional/schedules/constants/scheduleGridOne.ts
+// Constants for hardcoded text in ScheduleGridOne.tsx, organized by purpose
+
+export const SCHEDULE_GRID_ONE = {
+  // UI Text for ScheduleGridOne
+  UI: {
+    // Label for search input
+    SEARCH_LABEL: "Search by Class Name",
+    // Placeholder for search input
+    SEARCH_PLACEHOLDER: "Search classes...",
+    // Label for time filter select
+    TIME_FILTER_LABEL: "Time of Day",
+    // Default option for time filter select
+    ALL_TIMES_OPTION: "All Times",
+    // Time filter options
+    MORNING_OPTION: "Morning (Before 12:00 PM)",
+    AFTERNOON_OPTION: "Afternoon (12:00 PM - 5:00 PM)",
+    EVENING_OPTION: "Evening (After 5:00 PM)",
+    // 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 ScheduleGridOne
+  BUTTONS: {
+    // SubmitButton text for resetting filters
+    RESET_FILTERS_BUTTON: "Reset Filters",
+    // AddButton text for adding new class
+    ADD_NEW_CLASS_BUTTON: "Add New Class",
+  },
+  // Error Messages for ScheduleGridOne
+  ERRORS: {
+    // No hardcoded errors
+  },
+};

package/components/addOns/non-functional/AnnouncementBanner.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { X } from "lucide-react";
+import { useState } from "react";
+
+export default function AnnouncementBanner() {
+  const [isVisible, setIsVisible] = useState(true);
+
+  if (!isVisible) return null;
+
+  return (
+    <motion.div
+      className="fixed top-0 left-0 right-0 bg-blue-500/80 backdrop-blur-sm text-white py-3 sm:py-6 px-4 sm:px-6 z-50 shadow-md"
+      style={{
+        maskImage: "linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%)",
+        WebkitMaskImage: "linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%)",
+      }}
+      initial={{ y: -100, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      exit={{ y: -100, opacity: 0 }}
+      transition={{ duration: 0.5, ease: "easeOut" }}
+    >
+      <div className="max-w-7xl mx-auto flex items-center justify-between relative pr-10 sm:pr-14">
+        <p className="text-xs sm:text-sm md:text-base font-medium text-center flex-1">
+          We will be closed this Friday and Saturday (July 4–5) in observance of Independence Day.
+        </p>
+        <button
+          onClick={() => setIsVisible(false)}
+          className="absolute right-2 sm:right-4 bg-blue-600/50 hover:bg-blue-700/70 text-white rounded-full p-1.5 sm:p-2 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-colors"
+          aria-label="Close announcement"
+        >
+          <X className="w-5 h-5 sm:w-8 sm:h-8" />
+        </button>
+      </div>
+
+      <style jsx>{`
+        .gradient-text {
+          background: linear-gradient(45deg, #80ff80 25%, #80ff80 50%, #00b7eb 85%, #00b7eb 75%);
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+        }
+      `}</style>
+    </motion.div>
+  );
+}