@devvistatech/devvista-kit 0.0.10 → 0.0.13

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

@@ -1,289 +1,294 @@
-// src/pages/ScheduleGridTwoBasic.tsx
-"use client";
-
-import React, { useState } from "react";
-import { AddButton, DeleteIconButton } from "@/components/other/button";
-import { ScheduleClass, WeeklySchedule } from "@/components/types";
-import { useUser } from "@clerk/nextjs";
-import { SCHEDULE_GRID_TWO_BASIC } from "./constants/ScheduleGridTwoBasic";
-
-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 [isPopupOpen, setIsPopupOpen] = useState(false);
-  const [selectedClass, setSelectedClass] = useState<{
-    id: string;
-    title: string;
-    time: string;
-    day: string;
-    ageGroup: string;
-  } | null>(null);
-
-  const { isSignedIn } = useUser();
-
-  const daysOfWeek = SCHEDULE_GRID_TWO_BASIC.UI.DAYS_OF_WEEK;
-
-  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_TWO_BASIC.UI.ALL_AGES_TEXT,
-      });
-      setIsPopupOpen(true);
-    } else {
-      openModal(cls, day);
-    }
-  };
-
-  return (
-    <>
-      <style jsx>{`
-        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap");
-
-        :root {
-          --jubilee: #f47c7c;
-          --natural-white: #f7f7f7;
-          --caviar: #2d2d2d;
-          --storm-cloud: #4a636e;
-          --exuberant-blue: #c71585;
-          --modern-purple: #d946ef;
-        }
-
-        * {
-          font-family: "Inter", system-ui, sans-serif;
-          box-sizing: border-box;
-        }
-
-        .schedule-container {
-          background: rgba(255, 255, 255, 0.1);
-          backdrop-filter: blur(12px);
-          border: 1px solid rgba(255, 255, 255, 0.2);
-          border-radius: 2rem;
-          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-          min-width: 0;
-        }
-
-        .day-header {
-          background: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee));
-          color: white;
-          border-radius: 0.5rem;
-          padding: 0.5rem;
-          font-size: 1.8rem;
-          text-align: center;
-          font-weight: bold;
-          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-        }
-
-        .schedule-text {
-          font-size: 2rem;
-          text-shadow: -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);
-          line-height: 1.4;
-          padding-bottom: 0.5rem;
-        }
-
-        .schedule-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-left: auto;
-          margin-right: auto;
-          margin-bottom: 1.5rem;
-        }
-
-        .schedule-card {
-          background: rgba(255, 255, 255, 0.12);
-          backdrop-filter: blur(10px);
-          hanging-punctuation: 1px solid rgba(255, 255, 255, 0.2);
-          border-radius: 1rem;
-          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-          min-width: 0;
-        }
-
-        .schedule-card:hover {
-          background: #f48fb1;
-        }
-
-        @media (max-width: 1024px) {
-          .schedule-text {
-            font-size: 1.25rem;
-          }
-
-          .schedule-container {
-            padding: 1rem;
-          }
-
-          .schedule-card {
-            padding: 0.75rem;
-          }
-        }
-
-        @media (max-width: 640px) {
-          .schedule-text {
-            font-size: 1.125rem;
-          }
-
-          .schedule-container {
-            padding: 0.5rem;
-          }
-
-          .schedule-card {
-            padding: 0.5rem;
-            border-radius: 0.75rem;
-          }
-
-          .day-header {
-            padding: 0.4rem;
-            font-size: 1rem;
-          }
-
-          .schedule-header {
-            flex-direction: column;
-            align-items: flex-start;
-            margin-bottom: 1rem;
-          }
-
-          .schedule-header h2 {
-            margin-bottom: 0.5rem;
-          }
-        }
-
-        @media (max-width: 320px) {
-          .schedule-text {
-            font-size: 1rem;
-          }
-        }
-      `}</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: `
-                -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_TWO_BASIC.UI.CLASS_SCHEDULE_HEADING}
-          </h2>
-
-          {isAdmin && (
-            <AddButton
-              onClick={() => 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((day, index) => {
-                const 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: `
-                          -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={`schedule-card p-3 border-none relative ${isAdmin ? "cursor-pointer hover:bg-blue-600/20" : "cursor-default"}`}
-                            onClick={() => {
-                              if (isAdmin) handleClassClick(cls, day);
-                            }}
-                            role={isAdmin ? "button" : undefined}
-                            tabIndex={isAdmin ? 0 : -1}
-                            onKeyDown={(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={(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:${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>
-    </>
-  );
-};
-
+"use client";
+
+import React, { useState } from "react";
+import { AddButton, DeleteIconButton } from "@/components/other/button";
+import { ScheduleClass, WeeklySchedule } from "@/lib/types";
+import { useUser } from "@clerk/nextjs";
+import { SCHEDULE_GRID_TWO_BASIC } from "./constants/ScheduleGridTwoBasic";
+
+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 [isPopupOpen, setIsPopupOpen] = useState(false);
+  const [selectedClass, setSelectedClass] = useState<{
+    id: string;
+    title: string;
+    time: string;
+    day: string;
+    ageGroup: string;
+  } | null>(null);
+
+  const { isSignedIn } = useUser();
+
+  const daysOfWeek = SCHEDULE_GRID_TWO_BASIC.UI.DAYS_OF_WEEK as (keyof WeeklySchedule)[];
+
+  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_TWO_BASIC.UI.ALL_AGES_TEXT,
+      });
+      setIsPopupOpen(true);
+    } else {
+      openModal(cls, day);
+    }
+  };
+
+  return (
+    <>
+      <style jsx>{`
+        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap");
+
+        :root {
+          --jubilee: #f47c7c;
+          --natural-white: #f7f7f7;
+          --caviar: #2d2d2d;
+          --storm-cloud: #4a636e;
+          --exuberant-blue: #c71585;
+          --modern-purple: #d946ef;
+        }
+
+        * {
+          font-family: "Inter", system-ui, sans-serif;
+          box-sizing: border-box;
+        }
+
+        .schedule-container {
+          background: rgba(255, 255, 255, 0.1);
+          backdrop-filter: blur(12px);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+          border-radius: 2rem;
+          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+          min-width: 0;
+        }
+
+        .day-header {
+          background: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee));
+          color: white;
+          border-radius: 0.5rem;
+          padding: 0.5rem;
+          font-size: 1.8rem;
+          text-align: center;
+          font-weight: bold;
+          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+        }
+
+        .schedule-text {
+          font-size: 2rem;
+          text-shadow: -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);
+          line-height: 1.4;
+          padding-bottom: 0.5rem;
+        }
+
+        .schedule-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-left: auto;
+          margin-right: auto;
+          margin-bottom: 1.5rem;
+        }
+
+        .schedule-card {
+          background: rgba(255, 255, 255, 0.12);
+          backdrop-filter: blur(10px);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+          border-radius: 1rem;
+          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+          min-width: 0;
+        }
+
+        .schedule-card:hover {
+          background: #f48fb1;
+        }
+
+        @media (max-width: 1024px) {
+          .schedule-text {
+            font-size: 1.25rem;
+          }
+
+          .schedule-container {
+            padding: 1rem;
+          }
+
+          .schedule-card {
+            padding: 0.75rem;
+          }
+        }
+
+        @media (max-width: 640px) {
+          .schedule-text {
+            font-size: 1.125rem;
+          }
+
+          .schedule-container {
+            padding: 0.5rem;
+          }
+
+          .schedule-card {
+            padding: 0.5rem;
+            border-radius: 0.75rem;
+          }
+
+          .day-header {
+            padding: 0.4rem;
+            font-size: 1rem;
+          }
+
+          .schedule-header {
+            flex-direction: column;
+            align-items: flex-start;
+            margin-bottom: 1rem;
+          }
+
+          .schedule-header h2 {
+            margin-bottom: 0.5rem;
+          }
+        }
+
+        @media (max-width: 320px) {
+          .schedule-text {
+            font-size: 1rem;
+          }
+        }
+      `}</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: `
+                -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_TWO_BASIC.UI.CLASS_SCHEDULE_HEADING}
+          </h2>
+
+          {isAdmin && (
+            <AddButton
+              onClick={() => 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((day, index) => {
+                const classes: ScheduleClass[] = 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: `
+                          -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={`schedule-card p-3 border-none relative ${isAdmin ? "cursor-pointer hover:bg-blue-600/20" : "cursor-default"}`}
+                            onClick={() => {
+                              if (isAdmin) handleClassClick(cls, day);
+                            }}
+                            role={isAdmin ? "button" : undefined}
+                            tabIndex={isAdmin ? 0 : -1}
+                            onKeyDown={(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={(e) => {
+                                    e.stopPropagation();
+                                    if (cls.id && cls.documentId) {
+                                      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:${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;