Initial commit: Complete NodeJS-native setup

- Migrated from Python pre-commit to NodeJS-native solution - Reorganized documentation structure - Set up Husky + lint-staged for efficient pre-commit hooks - Fixed Dockerfile healthcheck issue - Added comprehensive documentation index
2025-09-06 01:42:48 -07:00
commit e48adbcb00
159 changed files with 24405 additions and 0 deletions
--- a/components/modals/ManageRemindersModal.tsx
+++ b/components/modals/ManageRemindersModal.tsx
@@ -0,0 +1,127 @@
+import React from 'react';
+import { CustomReminder } from '../../types';
+import { TrashIcon, EditIcon, PlusIcon, getReminderIcon } from '../icons/Icons';
+
+interface ManageRemindersModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  reminders: CustomReminder[];
+  onAdd: () => void;
+  onDelete: (reminder: CustomReminder) => void;
+  onEdit: (reminder: CustomReminder) => void;
+}
+
+const ManageRemindersModal: React.FC<ManageRemindersModalProps> = ({
+  isOpen,
+  onClose,
+  reminders,
+  onAdd,
+  onDelete,
+  onEdit,
+}) => {
+  const handleDeleteConfirmation = (reminder: CustomReminder) => {
+    if (
+      window.confirm(
+        `Are you sure you want to delete the reminder "${reminder.title}"?`
+      )
+    ) {
+      onDelete(reminder);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className='fixed inset-0 bg-black bg-opacity-50 dark:bg-opacity-70 z-50 flex justify-center items-center p-4'
+      role='dialog'
+      aria-modal='true'
+      aria-labelledby='manage-rem-title'
+    >
+      <div className='bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full max-w-lg'>
+        <div className='p-6 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center'>
+          <h3
+            id='manage-rem-title'
+            className='text-xl font-semibold text-slate-800 dark:text-slate-100'
+          >
+            Manage Custom Reminders
+          </h3>
+          <button
+            onClick={onClose}
+            className='text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 text-3xl leading-none'
+            aria-label='Close'
+          >
+            &times;
+          </button>
+        </div>
+        <div className='p-6 max-h-[60vh] overflow-y-auto'>
+          {reminders.length > 0 ? (
+            <ul className='space-y-3'>
+              {reminders.map(rem => {
+                const ReminderIcon = getReminderIcon(rem.icon);
+                return (
+                  <li
+                    key={rem._id}
+                    className='p-3 bg-slate-50 dark:bg-slate-700/50 rounded-lg flex justify-between items-center'
+                  >
+                    <div className='flex items-center space-x-3'>
+                      <ReminderIcon className='w-6 h-6 text-sky-500 dark:text-sky-400 flex-shrink-0' />
+                      <div>
+                        <p className='font-semibold text-slate-800 dark:text-slate-100'>
+                          {rem.title}
+                        </p>
+                        <p className='text-sm text-slate-500 dark:text-slate-400'>
+                          Every {rem.frequencyMinutes} mins from {rem.startTime}{' '}
+                          to {rem.endTime}
+                        </p>
+                      </div>
+                    </div>
+                    <div className='flex items-center space-x-1'>
+                      <button
+                        onClick={() => onEdit(rem)}
+                        className='p-2 text-indigo-600 hover:bg-indigo-100 dark:text-indigo-400 dark:hover:bg-slate-700 rounded-full'
+                        aria-label={`Edit ${rem.title}`}
+                      >
+                        <EditIcon className='w-5 h-5' />
+                      </button>
+                      <button
+                        onClick={() => handleDeleteConfirmation(rem)}
+                        className='p-2 text-red-500 hover:bg-red-100 dark:text-red-400 dark:hover:bg-slate-700 rounded-full'
+                        aria-label={`Delete ${rem.title}`}
+                      >
+                        <TrashIcon className='w-5 h-5' />
+                      </button>
+                    </div>
+                  </li>
+                );
+              })}
+            </ul>
+          ) : (
+            <p className='text-center text-slate-500 dark:text-slate-400 py-8'>
+              No custom reminders have been added yet.
+            </p>
+          )}
+        </div>
+        <div className='px-6 py-4 bg-slate-50 dark:bg-slate-700/50 flex justify-between items-center rounded-b-lg border-t border-slate-200 dark:border-slate-700'>
+          <button
+            type='button'
+            onClick={onAdd}
+            className='inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-slate-900'
+          >
+            <PlusIcon className='-ml-1 mr-2 h-5 w-5' />
+            Add New Reminder
+          </button>
+          <button
+            type='button'
+            onClick={onClose}
+            className='px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-md shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-slate-700 dark:text-slate-200 dark:border-slate-600 dark:hover:bg-slate-600 dark:focus:ring-offset-slate-800'
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ManageRemindersModal;