@devvistatech/devvista-kit 0.0.10 → 0.0.13

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

@@ -1,429 +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>
-  );
+// 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>
+  );
 }