Phase 3.1: Enhanced Chore Logging and Reporting System

2026-02-05 12:33:51 +11:00
commit e3cae7bfbb
178 changed files with 30105 additions and 0 deletions
--- a/frontend/src/components/EnhancedCompletionModal.tsx
+++ b/frontend/src/components/EnhancedCompletionModal.tsx
@@ -0,0 +1,136 @@
+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;