@devvistatech/devvista-kit 0.0.10 → 0.0.13

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

@@ -1,263 +1,277 @@
-// 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>
-  );
-};
-
+"use client";
+
+import React, { useState, useMemo } from "react";
+import { AddButton, SubmitButton, DeleteIconButton } from "@/components/other/button";
+import { ScheduleClass, WeeklySchedule } from "@/lib/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 as (keyof WeeklySchedule)[];
+
+  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 = {
+      Monday: [],
+      Tuesday: [],
+      Wednesday: [],
+      Thursday: [],
+      Friday: [],
+      Saturday: [],
+      Sunday: [],
+    };
+    Object.entries(schedule).forEach(([day, classes]) => {
+      const dayKey = day as keyof WeeklySchedule;
+      filtered[dayKey] = classes.filter((cls: { name: string; startTime: string; }) => {
+        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 (!cls.documentId || !cls.id) {
+      console.error("Missing documentId or id for class:", cls);
+      return;
+    }
+    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: ScheduleClass[] = 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: ScheduleClass) => (
+                        <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();
+                                  if (cls.id && cls.documentId) {
+                                    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;