@devvistatech/devvista-kit 0.0.1

package/components/addOns/functional/galleries/constants/galleryComplex.ts

@@ -0,0 +1,105 @@
+// components/addOns/functional/galleries/constants/galleryComplex.ts
+// Constants for hardcoded text in GalleryComplex.tsx, organized by purpose
+
+export const GALLERY_COMPLEX = {
+  // UI Text for GalleryComplex
+  UI: {
+    // TabsTrigger value for photos tab (capitalized in UI)
+    PHOTOS_TAB: "Photos",
+    // TabsTrigger value for videos tab (capitalized in UI)
+    VIDEOS_TAB: "Videos",
+    // Sub-tab value for all images (capitalized in UI)
+    ALL_SUB_TAB: "All",
+    // Sub-tab value for indoor images (capitalized in UI)
+    INDOOR_SUB_TAB: "Indoor",
+    // Sub-tab value for outdoor images (capitalized in UI)
+    OUTDOOR_SUB_TAB: "Outdoor",
+    // Sub-tab value for commercial images (capitalized in UI)
+    COMMERCIAL_SUB_TAB: "Commercial",
+    // Text when no images exist
+    NO_IMAGES_MESSAGE: "No images available.",
+    // Text when loading
+    LOADING_MESSAGE: "Loading...",
+    // Text when admin is logged in
+    ADMIN_LOGGED_IN_MESSAGE: "You are logged in as an admin.",
+    // Default alt text for images
+    DEFAULT_IMAGE_ALT: "Gallery image",
+    // Delete confirmation modal heading
+    DELETE_MODAL_HEADING: "Confirm Deletion",
+    // Delete confirmation message
+    DELETE_CONFIRMATION_MESSAGE: "Are you sure you want to delete this image? This action cannot be undone.",
+    // Upload modal heading
+    UPLOAD_MODAL_HEADING: "Upload Image",
+    // Default text for file input label
+    CHOOSE_IMAGE_TEXT: "Choose an image",
+    // Placeholder for title input in edit/upload forms
+    TITLE_PLACEHOLDER: "Image title (optional)",
+    // Placeholder for description textarea in edit/upload forms
+    DESCRIPTION_PLACEHOLDER: "Image description (optional)",
+    // Category option for none
+    CATEGORY_NONE: "None",
+    // Category option for indoor
+    CATEGORY_INDOOR: "Indoor",
+    // Category option for outdoor
+    CATEGORY_OUTDOOR: "Outdoor",
+    // Category option for commercial
+    CATEGORY_COMMERCIAL: "Commercial",
+    // Edit modal heading
+    EDIT_MODAL_HEADING: "Edit Image",
+    // Video titles for video cards
+    VIDEO_TITLES: [
+      "Race for the Cure 2019",
+      "Race for the Cure 2017",
+      "Race for the Cure 2016",
+      "Race for the Cure 2015",
+      "Race for the Cure 2014",
+      "Race for the Cure 2013",
+      "Absolutely Abs, Part 1",
+      "Absolutely Abs, Part 2",
+      "Absolutely Abs, Part 3",
+      "Absolutely Abs, Part 4",
+      "Absolutely Abs, Part 5",
+      "Fitstop Introduction",
+      "Fitstop 2: Choosing a personal trainer",
+      "Fitstop 3: Help at the office for Trapezius Injuries",
+      "Race for the Cure warmup",
+      "Camp Caiello",
+    ],
+  },
+  // Button Text for GalleryComplex
+  BUTTONS: {
+    // ActionButton text for opening upload modal
+    UPLOAD_IMAGE_BUTTON: "Upload Image",
+    // ActionButton text for loading more images
+    LOAD_MORE_BUTTON: "Load More",
+    // DeleteButton text when loading
+    DELETING_BUTTON: "Deleting...",
+    // DeleteButton text
+    DELETE_BUTTON: "Delete",
+    // SubmitButton text when loading in upload form
+    UPLOADING_BUTTON: "Uploading...",
+    // SubmitButton text in upload form
+    UPLOAD_BUTTON: "Upload",
+    // SubmitButton text when loading in edit form
+    SAVING_BUTTON: "Saving...",
+    // SubmitButton text in edit form
+    SAVE_BUTTON: "Save",
+  },
+  // Error Messages for GalleryComplex
+  ERRORS: {
+    // Error when non-admin tries to delete
+    UNAUTHORIZED_DELETE: "Unauthorized: Only admins can delete images",
+    // Error when non-admin tries to edit
+    UNAUTHORIZED_EDIT: "Unauthorized: Only admins can edit images",
+    // Error when token is missing or invalid
+    AUTHENTICATION_ERROR: "Authentication error. Please log in again.",
+    // Error when edit fails with status code
+    EDIT_FAILED_STATUS: "Failed to update image: ${response.status}",
+    // Generic error when edit fails
+    EDIT_FAILED: "Failed to update image",
+    // Error when non-admin tries to upload
+    UNAUTHORIZED_UPLOAD: "Unauthorized: Only admins can upload images",
+    // Error when upload fails
+    UPLOAD_FAILED: "Failed to upload image",
+  },
+};

package/components/addOns/functional/galleries/constants/gallerySimple.ts

@@ -0,0 +1,75 @@
+// components/addOns/functional/galleries/constants/gallerySimple.ts
+// Constants for hardcoded text in GallerySimple.tsx, organized by purpose
+
+export const GALLERY_SIMPLE = {
+  // UI Text for GallerySimple
+  UI: {
+    // TabsTrigger text for photos tab
+    PHOTOS_TAB: "Photos",
+    // TabsTrigger text for videos tab
+    VIDEOS_TAB: "Videos",
+    // Text when no images exist
+    NO_IMAGES_MESSAGE: "No images available.",
+    // Text when loading
+    LOADING_MESSAGE: "Loading...",
+    // Text when admin is logged in
+    ADMIN_LOGGED_IN_MESSAGE: "You are logged in as an admin.",
+    // Default alt text for images
+    DEFAULT_IMAGE_ALT: "Gallery image",
+    // Delete confirmation modal heading
+    DELETE_MODAL_HEADING: "Confirm Deletion",
+    // Delete confirmation message
+    DELETE_CONFIRMATION_MESSAGE: "Are you sure you want to delete this image? This action cannot be undone.",
+    // Upload modal heading
+    UPLOAD_MODAL_HEADING: "Upload Image",
+    // Default text for file input label
+    CHOOSE_IMAGE_TEXT: "Choose an image",
+    // TrashIconButton aria-label template
+    DELETE_BUTTON_ARIA: "Delete image ${image.title || image.documentId}",
+    // Video titles for video cards
+    VIDEO_TITLES: [
+      "Race for the Cure 2019",
+      "Race for the Cure 2017",
+      "Race for the Cure 2016",
+      "Race for the Cure 2015",
+      "Race for the Cure 2014",
+      "Race for the Cure 2013",
+      "Absolutely Abs, Part 1",
+      "Absolutely Abs, Part 2",
+      "Absolutely Abs, Part 3",
+      "Absolutely Abs, Part 4",
+      "Absolutely Abs, Part 5",
+      "Fitstop Introduction",
+      "Fitstop 2: Choosing a personal trainer",
+      "Fitstop 3: Help at the office for Trapezius Injuries",
+      "Race for the Cure warmup",
+      "Camp Caiello",
+    ],
+  },
+  // Button Text for GallerySimple
+  BUTTONS: {
+    // ActionButton text for opening upload modal
+    UPLOAD_IMAGE_BUTTON: "Upload Image",
+    // ActionButton text for loading more images
+    LOAD_MORE_BUTTON: "Load More",
+    // DeleteButton text when loading
+    DELETING_BUTTON: "Deleting...",
+    // DeleteButton text
+    DELETE_BUTTON: "Delete",
+    // SubmitButton text when loading
+    UPLOADING_BUTTON: "Uploading...",
+    // SubmitButton text
+    UPLOAD_BUTTON: "Upload",
+  },
+  // Error Messages for GallerySimple
+  ERRORS: {
+    // Error when non-admin tries to delete
+    UNAUTHORIZED_DELETE: "Unauthorized: Only admins can delete images",
+    // Error when no file is selected
+    INVALID_FILE: "Please select a valid image file",
+    // Error when non-admin tries to upload
+    UNAUTHORIZED_UPLOAD: "Unauthorized: Only admins can upload images",
+    // Error when upload fails
+    UPLOAD_FAILED: "Failed to upload image",
+  },
+};

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

@@ -0,0 +1,263 @@
+// src/pages/ScheduleGridOne.tsx
+"use client";
+
+import React, { useState, useMemo } from "react";
+import { AddButton, SubmitButton, DeleteIconButton } from "@/components/other/button";
+import { ScheduleClass, WeeklySchedule } from "@/components/types";
+import { ClassPopup } from "../ClassPopup";
+import { SCHEDULE_GRID_ONE } from "./constants/scheduleGridOne";
+
+interface ScheduleGridProps {
+  schedule: WeeklySchedule;
+  isAdmin: boolean;
+  error: string | null;
+  openModal: (cls?: ScheduleClass, day?: string) => void;
+  openConfirmDelete: (id: number, documentId: string, day: string) => void;
+  formatTime: (time: string) => string;
+}
+
+const ScheduleGrid: React.FC<ScheduleGridProps> = ({
+  schedule,
+  isAdmin,
+  error,
+  openModal,
+  openConfirmDelete,
+  formatTime,
+}) => {
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const [timeFilter, setTimeFilter] = useState<string>("");
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+  const [selectedClass, setSelectedClass] = useState<{
+    id: string;
+    title: string;
+    time: string;
+    day: string;
+    ageGroup: string;
+  } | null>(null);
+
+  const daysOfWeek = SCHEDULE_GRID_ONE.UI.DAYS_OF_WEEK;
+
+  const timeRanges = [
+    SCHEDULE_GRID_ONE.UI.MORNING_OPTION,
+    SCHEDULE_GRID_ONE.UI.AFTERNOON_OPTION,
+    SCHEDULE_GRID_ONE.UI.EVENING_OPTION,
+  ];
+
+  const parseTimeTo24Hour = (time: string): number => {
+    try {
+      const [timePart, period] = time.split(" ");
+      let [hours, minutes] = timePart.split(":").map(Number);
+      if (period === "PM" && hours !== 12) hours += 12;
+      if (period === "AM" && hours === 12) hours = 0;
+      return hours + minutes / 60;
+    } catch {
+      return 0;
+    }
+  };
+
+  const filteredSchedule = useMemo(() => {
+    const filtered: WeeklySchedule = {};
+    Object.entries(schedule).forEach(([day, classes]) => {
+      filtered[day] = classes.filter((cls) => {
+        if (searchQuery && !cls.name.toLowerCase().includes(searchQuery.toLowerCase())) return false;
+        if (timeFilter) {
+          const 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]);
+
+  const resetFilters = () => {
+    setSearchQuery("");
+    setTimeFilter("");
+  };
+
+  const handleClassClick = (cls: ScheduleClass, day: string) => {
+    if (!isAdmin) {
+      setSelectedClass({
+        id: cls.documentId,
+        title: cls.name,
+        time: `${formatTime(cls.startTime)} - ${formatTime(cls.endTime)}`,
+        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>{`
+        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap");
+        * {
+          font-family: "Inter", system-ui, sans-serif;
+          box-sizing: border-box;
+        }
+      `}</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={(e) => 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={(e) => 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((time) => (
+                <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: `
+              -1px -1px 0 #000,
+              1px -1px 0 #000,
+              -1px 1px 0 #000,
+              1px 1px 0 #000,
+              0 2px 4px rgba(0, 0, 0, 0.4)
+            `,
+          }}
+        >
+          {SCHEDULE_GRID_ONE.UI.CLASS_SCHEDULE_HEADING}
+        </h2>
+        {isAdmin && (
+          <AddButton
+            onClick={() => 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((day, index) => {
+              const 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: `
+                        -1px -1px 0 #000,
+                        1px -1px 0 #000,
+                        -1px 1px 0 #000,
+                        1px 1px 0 #000,
+                        0 2px 4px rgba(0, 0, 0, 0.4)
+                      `,
+                    }}
+                  >
+                    {day}
+                  </h3>
+                  <ul className="space-y-3 font-medium flex-1">
+                    {classes.length > 0 ? (
+                      classes.map((cls) => (
+                        <li
+                          key={`${cls.startTime}-${cls.endTime}-${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={() => handleClassClick(cls, day)}
+                          role="button"
+                          tabIndex={0}
+                          onKeyDown={(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={(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:${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={() => {
+          setIsPopupOpen(false);
+          setSelectedClass(null);
+        }}
+        classDetails={selectedClass}
+      />
+    </div>
+  );
+};
+
+export default ScheduleGrid;