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
This commit is contained in:
William Valentin
@@ -0,0 +1,269 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Medication, Frequency } from '../../types';
|
||||
import { medicationIcons } from '../icons/Icons';
|
||||
|
||||
interface AddMedicationModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onAdd: (medication: Omit<Medication, '_id' | '_rev'>) => Promise<void>;
|
||||
}
|
||||
|
||||
const AddMedicationModal: React.FC<AddMedicationModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
onAdd,
|
||||
}) => {
|
||||
const [name, setName] = useState('');
|
||||
const [dosage, setDosage] = useState('');
|
||||
const [frequency, setFrequency] = useState<Frequency>(Frequency.Daily);
|
||||
const [hoursBetween, setHoursBetween] = useState(8);
|
||||
const [startTime, setStartTime] = useState('09:00');
|
||||
const [notes, setNotes] = useState('');
|
||||
const [icon, setIcon] = useState('pill');
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
const nameInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setName('');
|
||||
setDosage('');
|
||||
setFrequency(Frequency.Daily);
|
||||
setHoursBetween(8);
|
||||
setStartTime('09:00');
|
||||
setNotes('');
|
||||
setIcon('pill');
|
||||
setIsSaving(false);
|
||||
setTimeout(() => nameInputRef.current?.focus(), 100);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape' && !isSaving) onClose();
|
||||
};
|
||||
if (isOpen) {
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
}
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [isOpen, onClose, isSaving]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!name || !dosage || !startTime || isSaving) {
|
||||
return;
|
||||
}
|
||||
setIsSaving(true);
|
||||
try {
|
||||
await onAdd({
|
||||
name,
|
||||
dosage,
|
||||
frequency,
|
||||
hoursBetween:
|
||||
frequency === Frequency.EveryXHours ? hoursBetween : undefined,
|
||||
startTime,
|
||||
notes,
|
||||
icon,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to add medication', error);
|
||||
alert('There was an error saving your medication. Please try again.');
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
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='add-med-title'
|
||||
>
|
||||
<div
|
||||
className='bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full max-w-md'
|
||||
ref={modalRef}
|
||||
>
|
||||
<div className='p-6 border-b border-slate-200 dark:border-slate-700'>
|
||||
<h3
|
||||
id='add-med-title'
|
||||
className='text-xl font-semibold text-slate-800 dark:text-slate-100'
|
||||
>
|
||||
Add New Medication
|
||||
</h3>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className='p-6 space-y-4 max-h-[70vh] overflow-y-auto'>
|
||||
<div>
|
||||
<label
|
||||
htmlFor='name'
|
||||
className='block text-sm font-medium text-slate-700 dark:text-slate-300'
|
||||
>
|
||||
Medication Name
|
||||
</label>
|
||||
<input
|
||||
type='text'
|
||||
id='name'
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
required
|
||||
ref={nameInputRef}
|
||||
className='mt-1 block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-slate-700 dark:border-slate-600 dark:placeholder-slate-400 dark:text-white'
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor='dosage'
|
||||
className='block text-sm font-medium text-slate-700 dark:text-slate-300'
|
||||
>
|
||||
Dosage (e.g., "1 tablet", "500mg")
|
||||
</label>
|
||||
<input
|
||||
type='text'
|
||||
id='dosage'
|
||||
value={dosage}
|
||||
onChange={e => setDosage(e.target.value)}
|
||||
required
|
||||
className='mt-1 block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-slate-700 dark:border-slate-600 dark:placeholder-slate-400 dark:text-white'
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor='frequency'
|
||||
className='block text-sm font-medium text-slate-700 dark:text-slate-300'
|
||||
>
|
||||
Frequency
|
||||
</label>
|
||||
<select
|
||||
id='frequency'
|
||||
value={frequency}
|
||||
onChange={e => setFrequency(e.target.value as Frequency)}
|
||||
className='mt-1 block w-full px-3 py-2 border border-slate-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-slate-700 dark:border-slate-600 dark:text-white'
|
||||
>
|
||||
{Object.values(Frequency).map(f => (
|
||||
<option key={f} value={f}>
|
||||
{f}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{frequency === Frequency.EveryXHours && (
|
||||
<div>
|
||||
<label
|
||||
htmlFor='hoursBetween'
|
||||
className='block text-sm font-medium text-slate-700 dark:text-slate-300'
|
||||
>
|
||||
Hours Between Doses
|
||||
</label>
|
||||
<input
|
||||
type='number'
|
||||
id='hoursBetween'
|
||||
value={hoursBetween}
|
||||
onChange={e => setHoursBetween(parseInt(e.target.value, 10))}
|
||||
min='1'
|
||||
max='23'
|
||||
className='mt-1 block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-slate-700 dark:border-slate-600 dark:placeholder-slate-400 dark:text-white'
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<label
|
||||
htmlFor='startTime'
|
||||
className='block text-sm font-medium text-slate-700 dark:text-slate-300'
|
||||
>
|
||||
First Dose Time
|
||||
</label>
|
||||
<input
|
||||
type='time'
|
||||
id='startTime'
|
||||
value={startTime}
|
||||
onChange={e => setStartTime(e.target.value)}
|
||||
required
|
||||
className='mt-1 block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-slate-700 dark:border-slate-600 dark:placeholder-slate-400 dark:text-white'
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-slate-700 dark:text-slate-300'>
|
||||
Icon
|
||||
</label>
|
||||
<div className='mt-2 flex flex-wrap gap-2'>
|
||||
{Object.entries(medicationIcons).map(([key, IconComponent]) => (
|
||||
<button
|
||||
key={key}
|
||||
type='button'
|
||||
onClick={() => setIcon(key)}
|
||||
className={`p-2 rounded-full transition-colors ${icon === key ? 'bg-indigo-600 text-white ring-2 ring-offset-2 ring-indigo-500 ring-offset-white dark:ring-offset-slate-800' : 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-slate-600'}`}
|
||||
aria-label={`Select ${key} icon`}
|
||||
>
|
||||
<IconComponent className='w-6 h-6' />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor='notes'
|
||||
className='block text-sm font-medium text-slate-700 dark:text-slate-300'
|
||||
>
|
||||
Notes (optional)
|
||||
</label>
|
||||
<textarea
|
||||
id='notes'
|
||||
value={notes}
|
||||
onChange={e => setNotes(e.target.value)}
|
||||
rows={3}
|
||||
className='mt-1 block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-slate-700 dark:border-slate-600 dark:placeholder-slate-400 dark:text-white'
|
||||
placeholder='e.g., take with food'
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div className='px-6 py-4 bg-slate-50 dark:bg-slate-700/50 flex justify-end space-x-3 rounded-b-lg border-t border-slate-200 dark:border-slate-700'>
|
||||
<button
|
||||
type='button'
|
||||
onClick={onClose}
|
||||
disabled={isSaving}
|
||||
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 disabled:opacity-50'
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type='submit'
|
||||
disabled={isSaving}
|
||||
className='px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-slate-800 disabled:opacity-50 disabled:cursor-not-allowed flex items-center'
|
||||
>
|
||||
{isSaving && <Spinner />}
|
||||
{isSaving ? 'Adding...' : 'Add Medication'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Spinner = () => (
|
||||
<svg
|
||||
className='animate-spin -ml-1 mr-3 h-5 w-5 text-white'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
fill='none'
|
||||
viewBox='0 0 24 24'
|
||||
>
|
||||
<circle
|
||||
className='opacity-25'
|
||||
cx='12'
|
||||
cy='12'
|
||||
r='10'
|
||||
stroke='currentColor'
|
||||
strokeWidth='4'
|
||||
></circle>
|
||||
<path
|
||||
className='opacity-75'
|
||||
fill='currentColor'
|
||||
d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default AddMedicationModal;
|
||||
@@ -0,0 +1,158 @@
|
||||
import React from 'react';
|
||||
import { Medication, Dose, DoseStatus } from '../../types';
|
||||
import {
|
||||
ClockIcon,
|
||||
CheckCircleIcon,
|
||||
XCircleIcon,
|
||||
InfoIcon,
|
||||
getMedicationIcon,
|
||||
ZzzIcon,
|
||||
} from '../icons/Icons';
|
||||
|
||||
interface DoseCardProps {
|
||||
dose: Dose & { takenAt?: string };
|
||||
medication: Medication;
|
||||
status: DoseStatus;
|
||||
onToggleDose: (doseId: string) => void;
|
||||
onSnooze: (doseId: string) => void;
|
||||
snoozedUntil?: Date;
|
||||
}
|
||||
|
||||
const statusStyles = {
|
||||
[DoseStatus.UPCOMING]: {
|
||||
bg: 'bg-white dark:bg-slate-800',
|
||||
icon: <ClockIcon className='w-6 h-6 text-slate-400 dark:text-slate-500' />,
|
||||
text: 'text-slate-500 dark:text-slate-400',
|
||||
button:
|
||||
'border-indigo-600 text-indigo-600 hover:bg-indigo-600 hover:text-white dark:text-indigo-400 dark:border-indigo-400 dark:hover:bg-indigo-400 dark:hover:text-white',
|
||||
buttonText: 'Take',
|
||||
ring: 'hover:ring-indigo-300 dark:hover:ring-indigo-500',
|
||||
},
|
||||
[DoseStatus.TAKEN]: {
|
||||
bg: 'bg-green-50 dark:bg-green-900/20',
|
||||
icon: (
|
||||
<CheckCircleIcon className='w-6 h-6 text-green-500 dark:text-green-400' />
|
||||
),
|
||||
text: 'text-green-700 dark:text-green-400',
|
||||
button:
|
||||
'border-green-500 text-green-500 hover:bg-green-500 hover:text-white dark:text-green-400 dark:border-green-400 dark:hover:bg-green-400 dark:hover:text-slate-900',
|
||||
buttonText: 'Untake',
|
||||
ring: '',
|
||||
},
|
||||
[DoseStatus.MISSED]: {
|
||||
bg: 'bg-red-50 dark:bg-red-900/20',
|
||||
icon: <XCircleIcon className='w-6 h-6 text-red-500 dark:text-red-400' />,
|
||||
text: 'text-red-700 dark:text-red-400',
|
||||
button:
|
||||
'border-red-500 text-red-500 hover:bg-red-500 hover:text-white dark:text-red-400 dark:border-red-400 dark:hover:bg-red-400 dark:hover:text-slate-900',
|
||||
buttonText: 'Take Now',
|
||||
ring: '',
|
||||
},
|
||||
[DoseStatus.SNOOZED]: {
|
||||
bg: 'bg-amber-50 dark:bg-amber-900/20',
|
||||
icon: <ZzzIcon className='w-6 h-6 text-amber-500 dark:text-amber-400' />,
|
||||
text: 'text-amber-700 dark:text-amber-400',
|
||||
button:
|
||||
'border-indigo-600 text-indigo-600 hover:bg-indigo-600 hover:text-white dark:text-indigo-400 dark:border-indigo-400 dark:hover:bg-indigo-400 dark:hover:text-white',
|
||||
buttonText: 'Take',
|
||||
ring: '',
|
||||
},
|
||||
};
|
||||
|
||||
const DoseCard: React.FC<DoseCardProps> = ({
|
||||
dose,
|
||||
medication,
|
||||
status,
|
||||
onToggleDose,
|
||||
onSnooze,
|
||||
snoozedUntil,
|
||||
}) => {
|
||||
const styles = statusStyles[status];
|
||||
const timeString = dose.scheduledTime.toLocaleTimeString([], {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
const takenTimeString = dose.takenAt
|
||||
? new Date(dose.takenAt).toLocaleTimeString([], {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
: '';
|
||||
const snoozedTimeString = snoozedUntil
|
||||
? snoozedUntil.toLocaleTimeString([], {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
: '';
|
||||
const MedicationIcon = getMedicationIcon(medication.icon);
|
||||
|
||||
return (
|
||||
<li
|
||||
className={`shadow-md rounded-lg p-4 flex flex-col justify-between transition-all duration-300 ${styles.bg} ${styles.ring} ring-4 ring-transparent border border-slate-200 dark:border-slate-700`}
|
||||
>
|
||||
<div>
|
||||
<div className='flex justify-between items-start'>
|
||||
<div className='flex items-center space-x-3'>
|
||||
<MedicationIcon className='w-7 h-7 text-indigo-500 dark:text-indigo-400 flex-shrink-0' />
|
||||
<div>
|
||||
<h4 className='font-bold text-lg text-slate-800 dark:text-slate-100'>
|
||||
{medication.name}
|
||||
</h4>
|
||||
<p className='text-slate-600 dark:text-slate-300'>
|
||||
{medication.dosage}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{styles.icon}
|
||||
</div>
|
||||
<div
|
||||
className={`flex items-center space-x-2 mt-4 font-semibold text-lg ${styles.text}`}
|
||||
>
|
||||
<ClockIcon className='w-5 h-5' />
|
||||
<span>{timeString}</span>
|
||||
</div>
|
||||
|
||||
{status === DoseStatus.SNOOZED && (
|
||||
<p className='text-sm text-amber-600 dark:text-amber-500 mt-1'>
|
||||
Snoozed until {snoozedTimeString}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{status === DoseStatus.TAKEN && (
|
||||
<p className='text-sm text-green-600 dark:text-green-500 mt-1'>
|
||||
Taken at {takenTimeString}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{medication.notes && (
|
||||
<div className='mt-3 p-2 bg-indigo-50 dark:bg-indigo-900/30 rounded-lg flex items-start space-x-2'>
|
||||
<InfoIcon className='w-4 h-4 text-indigo-500 dark:text-indigo-400 mt-0.5 flex-shrink-0' />
|
||||
<p className='text-sm text-indigo-800 dark:text-indigo-200'>
|
||||
{medication.notes}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='mt-4 flex items-center space-x-2'>
|
||||
{status === DoseStatus.UPCOMING && (
|
||||
<button
|
||||
onClick={() => onSnooze(dose.id)}
|
||||
className='w-1/3 py-2 px-2 rounded-lg font-semibold border-2 transition-colors duration-200 border-slate-300 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:text-slate-400 dark:hover:bg-slate-700'
|
||||
aria-label={`Snooze ${medication.name} for 5 minutes`}
|
||||
>
|
||||
<ZzzIcon className='w-5 h-5 mx-auto' />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => onToggleDose(dose.id)}
|
||||
className={`w-full py-2 px-4 rounded-lg font-semibold border-2 transition-colors duration-200 ${styles.button}`}
|
||||
aria-label={`${styles.buttonText} ${medication.name} at ${timeString}`}
|
||||
>
|
||||
{styles.buttonText}
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
export default DoseCard;
|
||||
@@ -0,0 +1,274 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Medication, Frequency } from '../../types';
|
||||
import { medicationIcons } from '../icons/Icons';
|
||||
|
||||
interface EditMedicationModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
medication: Medication | null;
|
||||
onUpdate: (medication: Medication) => Promise<void>;
|
||||
}
|
||||
|
||||
const EditMedicationModal: React.FC<EditMedicationModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
medication,
|
||||
onUpdate,
|
||||
}) => {
|
||||
const [name, setName] = useState('');
|
||||
const [dosage, setDosage] = useState('');
|
||||
const [frequency, setFrequency] = useState<Frequency>(Frequency.Daily);
|
||||
const [hoursBetween, setHoursBetween] = useState(8);
|
||||
const [startTime, setStartTime] = useState('09:00');
|
||||
const [notes, setNotes] = useState('');
|
||||
const [icon, setIcon] = useState('pill');
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
const nameInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (medication) {
|
||||
setName(medication.name);
|
||||
setDosage(medication.dosage);
|
||||
setFrequency(medication.frequency);
|
||||
setHoursBetween(medication.hoursBetween || 8);
|
||||
setStartTime(medication.startTime);
|
||||
setNotes(medication.notes || '');
|
||||
setIcon(medication.icon || 'pill');
|
||||
setIsSaving(false);
|
||||
}
|
||||
if (isOpen) {
|
||||
setTimeout(() => nameInputRef.current?.focus(), 100);
|
||||
}
|
||||
}, [medication, isOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape' && !isSaving) onClose();
|
||||
};
|
||||
if (isOpen) {
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
}
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [isOpen, onClose, isSaving]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!medication || !name || !dosage || !startTime || isSaving) {
|
||||
return;
|
||||
}
|
||||
setIsSaving(true);
|
||||
try {
|
||||
await onUpdate({
|
||||
...medication,
|
||||
name,
|
||||
dosage,
|
||||
frequency,
|
||||
hoursBetween:
|
||||
frequency === Frequency.EveryXHours ? hoursBetween : undefined,
|
||||
startTime,
|
||||
notes,
|
||||
icon,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to update medication', error);
|
||||
alert('There was an error updating your medication. Please try again.');
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
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='edit-med-title'
|
||||
>
|
||||
<div
|
||||
className='bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full max-w-md'
|
||||
ref={modalRef}
|
||||
>
|
||||
<div className='p-6 border-b border-slate-200 dark:border-slate-700'>
|
||||
<h3
|
||||
id='edit-med-title'
|
||||
className='text-xl font-semibold text-slate-800 dark:text-slate-100'
|
||||
>
|
||||
Edit Medication
|
||||
</h3>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className='p-6 space-y-4 max-h-[70vh] overflow-y-auto'>
|
||||
<div>
|
||||
<label
|
||||
htmlFor='edit-name'
|
||||
className='block text-sm font-medium text-slate-700 dark:text-slate-300'
|
||||
>
|
||||
Medication Name
|
||||
</label>
|
||||
<input
|
||||
type='text'
|
||||
id='edit-name'
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
required
|
||||
ref={nameInputRef}
|
||||
className='mt-1 block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-slate-700 dark:border-slate-600 dark:placeholder-slate-400 dark:text-white'
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor='edit-dosage'
|
||||
className='block text-sm font-medium text-slate-700 dark:text-slate-300'
|
||||
>
|
||||
Dosage (e.g., "1 tablet", "500mg")
|
||||
</label>
|
||||
<input
|
||||
type='text'
|
||||
id='edit-dosage'
|
||||
value={dosage}
|
||||
onChange={e => setDosage(e.target.value)}
|
||||
required
|
||||
className='mt-1 block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-slate-700 dark:border-slate-600 dark:placeholder-slate-400 dark:text-white'
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor='edit-frequency'
|
||||
className='block text-sm font-medium text-slate-700 dark:text-slate-300'
|
||||
>
|
||||
Frequency
|
||||
</label>
|
||||
<select
|
||||
id='edit-frequency'
|
||||
value={frequency}
|
||||
onChange={e => setFrequency(e.target.value as Frequency)}
|
||||
className='mt-1 block w-full px-3 py-2 border border-slate-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-slate-700 dark:border-slate-600 dark:text-white'
|
||||
>
|
||||
{Object.values(Frequency).map(f => (
|
||||
<option key={f} value={f}>
|
||||
{f}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{frequency === Frequency.EveryXHours && (
|
||||
<div>
|
||||
<label
|
||||
htmlFor='edit-hoursBetween'
|
||||
className='block text-sm font-medium text-slate-700 dark:text-slate-300'
|
||||
>
|
||||
Hours Between Doses
|
||||
</label>
|
||||
<input
|
||||
type='number'
|
||||
id='edit-hoursBetween'
|
||||
value={hoursBetween}
|
||||
onChange={e => setHoursBetween(parseInt(e.target.value, 10))}
|
||||
min='1'
|
||||
max='23'
|
||||
className='mt-1 block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-slate-700 dark:border-slate-600 dark:placeholder-slate-400 dark:text-white'
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<label
|
||||
htmlFor='edit-startTime'
|
||||
className='block text-sm font-medium text-slate-700 dark:text-slate-300'
|
||||
>
|
||||
First Dose Time
|
||||
</label>
|
||||
<input
|
||||
type='time'
|
||||
id='edit-startTime'
|
||||
value={startTime}
|
||||
onChange={e => setStartTime(e.target.value)}
|
||||
required
|
||||
className='mt-1 block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-slate-700 dark:border-slate-600 dark:placeholder-slate-400 dark:text-white'
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-slate-700 dark:text-slate-300'>
|
||||
Icon
|
||||
</label>
|
||||
<div className='mt-2 flex flex-wrap gap-2'>
|
||||
{Object.entries(medicationIcons).map(([key, IconComponent]) => (
|
||||
<button
|
||||
key={key}
|
||||
type='button'
|
||||
onClick={() => setIcon(key)}
|
||||
className={`p-2 rounded-full transition-colors ${icon === key ? 'bg-indigo-600 text-white ring-2 ring-offset-2 ring-indigo-500 ring-offset-white dark:ring-offset-slate-800' : 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-slate-600'}`}
|
||||
aria-label={`Select ${key} icon`}
|
||||
>
|
||||
<IconComponent className='w-6 h-6' />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor='edit-notes'
|
||||
className='block text-sm font-medium text-slate-700 dark:text-slate-300'
|
||||
>
|
||||
Notes (optional)
|
||||
</label>
|
||||
<textarea
|
||||
id='edit-notes'
|
||||
value={notes}
|
||||
onChange={e => setNotes(e.target.value)}
|
||||
rows={3}
|
||||
className='mt-1 block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-slate-700 dark:border-slate-600 dark:placeholder-slate-400 dark:text-white'
|
||||
placeholder='e.g., take with food'
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div className='px-6 py-4 bg-slate-50 dark:bg-slate-700/50 flex justify-end space-x-3 rounded-b-lg border-t border-slate-200 dark:border-slate-700'>
|
||||
<button
|
||||
type='button'
|
||||
onClick={onClose}
|
||||
disabled={isSaving}
|
||||
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 disabled:opacity-50'
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type='submit'
|
||||
disabled={isSaving}
|
||||
className='px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-slate-800 disabled:opacity-50 disabled:cursor-not-allowed flex items-center'
|
||||
>
|
||||
{isSaving && <Spinner />}
|
||||
{isSaving ? 'Saving...' : 'Save Changes'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Spinner = () => (
|
||||
<svg
|
||||
className='animate-spin -ml-1 mr-3 h-5 w-5 text-white'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
fill='none'
|
||||
viewBox='0 0 24 24'
|
||||
>
|
||||
<circle
|
||||
className='opacity-25'
|
||||
cx='12'
|
||||
cy='12'
|
||||
r='10'
|
||||
stroke='currentColor'
|
||||
strokeWidth='4'
|
||||
></circle>
|
||||
<path
|
||||
className='opacity-75'
|
||||
fill='currentColor'
|
||||
d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default EditMedicationModal;
|
||||
@@ -0,0 +1,177 @@
|
||||
import React, { useMemo, useEffect, useRef } from 'react';
|
||||
import { Medication } from '../../types';
|
||||
import { TrashIcon, EditIcon, getMedicationIcon } from '../icons/Icons';
|
||||
|
||||
interface ManageMedicationsModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
medications: Medication[];
|
||||
// FIX: Changed onDelete to expect the full medication object to match the parent's handler.
|
||||
onDelete: (medication: Medication) => void;
|
||||
onEdit: (medication: Medication) => void;
|
||||
}
|
||||
|
||||
const ManageMedicationsModal: React.FC<ManageMedicationsModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
medications,
|
||||
onDelete,
|
||||
onEdit,
|
||||
}) => {
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
const closeButtonRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setTimeout(() => closeButtonRef.current?.focus(), 100);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') onClose();
|
||||
};
|
||||
if (isOpen) {
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
}
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [isOpen, onClose]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen || !modalRef.current) return;
|
||||
const focusableElements = modalRef.current.querySelectorAll(
|
||||
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
||||
);
|
||||
const firstElement = focusableElements[0] as HTMLElement;
|
||||
const lastElement = focusableElements[
|
||||
focusableElements.length - 1
|
||||
] as HTMLElement;
|
||||
|
||||
const handleTabKey = (e: KeyboardEvent) => {
|
||||
if (e.key !== 'Tab') return;
|
||||
if (e.shiftKey) {
|
||||
if (document.activeElement === firstElement) {
|
||||
lastElement.focus();
|
||||
e.preventDefault();
|
||||
}
|
||||
} else {
|
||||
if (document.activeElement === lastElement) {
|
||||
firstElement.focus();
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleTabKey);
|
||||
return () => document.removeEventListener('keydown', handleTabKey);
|
||||
}, [isOpen]);
|
||||
|
||||
const sortedMedications = useMemo(
|
||||
() => [...medications].sort((a, b) => a.name.localeCompare(b.name)),
|
||||
[medications]
|
||||
);
|
||||
|
||||
const handleDeleteConfirmation = (medication: Medication) => {
|
||||
if (window.confirm(`Are you sure you want to delete ${medication.name}?`)) {
|
||||
// FIX: Pass the whole medication object to the onDelete handler.
|
||||
onDelete(medication);
|
||||
}
|
||||
};
|
||||
|
||||
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-med-title'
|
||||
>
|
||||
<div
|
||||
className='bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full max-w-lg'
|
||||
ref={modalRef}
|
||||
>
|
||||
<div className='p-6 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center'>
|
||||
<h3
|
||||
id='manage-med-title'
|
||||
className='text-xl font-semibold text-slate-800 dark:text-slate-100'
|
||||
>
|
||||
Manage Medications
|
||||
</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
ref={closeButtonRef}
|
||||
className='text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 text-3xl leading-none'
|
||||
aria-label='Close'
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div className='p-6 max-h-[60vh] overflow-y-auto'>
|
||||
{sortedMedications.length > 0 ? (
|
||||
<ul className='space-y-3'>
|
||||
{sortedMedications.map(med => {
|
||||
const MedicationIcon = getMedicationIcon(med.icon);
|
||||
return (
|
||||
// FIX: The Medication type has `_id`, not `id`. Used for the key.
|
||||
<li
|
||||
key={med._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'>
|
||||
<MedicationIcon className='w-6 h-6 text-indigo-500 dark:text-indigo-400 flex-shrink-0' />
|
||||
<div>
|
||||
<p className='font-semibold text-slate-800 dark:text-slate-100'>
|
||||
{med.name}
|
||||
</p>
|
||||
<p className='text-sm text-slate-500 dark:text-slate-400'>
|
||||
{med.dosage} • {med.frequency}
|
||||
</p>
|
||||
{med.notes && (
|
||||
<p className='text-xs text-slate-400 dark:text-slate-500 mt-1 italic'>
|
||||
Note: "{med.notes}"
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-center space-x-1'>
|
||||
<button
|
||||
onClick={() => onEdit(med)}
|
||||
className='p-2 text-indigo-600 hover:bg-indigo-100 dark:text-indigo-400 dark:hover:bg-slate-700 rounded-full'
|
||||
aria-label={`Edit ${med.name}`}
|
||||
>
|
||||
<EditIcon className='w-5 h-5' />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteConfirmation(med)}
|
||||
className='p-2 text-red-500 hover:bg-red-100 dark:text-red-400 dark:hover:bg-slate-700 rounded-full'
|
||||
aria-label={`Delete ${med.name}`}
|
||||
>
|
||||
<TrashIcon className='w-5 h-5' />
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
) : (
|
||||
<p className='text-center text-slate-500 dark:text-slate-400 py-8'>
|
||||
No medications have been added yet.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className='px-6 py-4 bg-slate-50 dark:bg-slate-700/50 flex justify-end rounded-b-lg border-t border-slate-200 dark:border-slate-700'>
|
||||
<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 ManageMedicationsModal;
|
||||
@@ -0,0 +1,5 @@
|
||||
// Medication Components
|
||||
export { default as AddMedicationModal } from './AddMedicationModal';
|
||||
export { default as EditMedicationModal } from './EditMedicationModal';
|
||||
export { default as ManageMedicationsModal } from './ManageMedicationsModal';
|
||||
export { default as DoseCard } from './DoseCard';
|
||||
Reference in New Issue
Block a user