137 lines
4.6 KiB
TypeScript
137 lines
4.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { CheckCircleIcon, XMarkIcon } from '@heroicons/react/24/outline';
|
|
|
|
interface EnhancedCompletionModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onConfirm: (notes?: string) => void;
|
|
choreTitle: string;
|
|
userName: string;
|
|
}
|
|
|
|
const EnhancedCompletionModal: React.FC<EnhancedCompletionModalProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
onConfirm,
|
|
choreTitle,
|
|
userName,
|
|
}) => {
|
|
const [notes, setNotes] = useState('');
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
const handleConfirm = async () => {
|
|
setIsSubmitting(true);
|
|
try {
|
|
await onConfirm(notes.trim() || undefined);
|
|
setNotes('');
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setNotes('');
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 overflow-y-auto">
|
|
{/* Backdrop */}
|
|
<div
|
|
className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
|
|
onClick={handleClose}
|
|
></div>
|
|
|
|
{/* Modal */}
|
|
<div className="flex min-h-full items-center justify-center p-4">
|
|
<div className="relative bg-white rounded-2xl shadow-xl max-w-md w-full p-6 transform transition-all">
|
|
{/* Close button */}
|
|
<button
|
|
onClick={handleClose}
|
|
className="absolute top-4 right-4 text-gray-400 hover:text-gray-600"
|
|
>
|
|
<XMarkIcon className="h-6 w-6" />
|
|
</button>
|
|
|
|
{/* Icon */}
|
|
<div className="flex justify-center mb-4">
|
|
<div className="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center">
|
|
<CheckCircleIcon className="h-10 w-10 text-green-600" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h3 className="text-xl font-bold text-gray-900 text-center mb-2">
|
|
Complete Chore?
|
|
</h3>
|
|
|
|
{/* Chore Info */}
|
|
<div className="bg-gray-50 rounded-lg p-4 mb-4">
|
|
<p className="text-sm text-gray-600 text-center mb-1">Chore</p>
|
|
<p className="text-lg font-semibold text-gray-900 text-center">
|
|
{choreTitle}
|
|
</p>
|
|
<p className="text-sm text-gray-500 text-center mt-2">
|
|
Completed by: {userName}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Notes Field */}
|
|
<div className="mb-6">
|
|
<label
|
|
htmlFor="notes"
|
|
className="block text-sm font-medium text-gray-700 mb-2"
|
|
>
|
|
Add a note (optional)
|
|
</label>
|
|
<textarea
|
|
id="notes"
|
|
value={notes}
|
|
onChange={(e) => setNotes(e.target.value)}
|
|
placeholder="Any comments about this chore? (e.g., 'Kitchen was really messy today!')"
|
|
rows={3}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent resize-none"
|
|
maxLength={200}
|
|
/>
|
|
<p className="mt-1 text-xs text-gray-500 text-right">
|
|
{notes.length}/200 characters
|
|
</p>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex space-x-3">
|
|
<button
|
|
onClick={handleClose}
|
|
disabled={isSubmitting}
|
|
className="flex-1 px-4 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleConfirm}
|
|
disabled={isSubmitting}
|
|
className="flex-1 px-4 py-3 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
|
|
>
|
|
{isSubmitting ? (
|
|
<>
|
|
<svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" 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>
|
|
Saving...
|
|
</>
|
|
) : (
|
|
'Complete!'
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EnhancedCompletionModal;
|