\n {/* Header */}\n

\n {task.frequency_per_week === 1 ? 'Complete Task' : 'Track Progress'}\n

\n \n \n \n

\n \n {/* Content */}\n

\n {/* Task Info */}\n

\n {task.color && (\n

\n )}\n

{task.name}

\n \n

\n Week of {weekLabel}\n

\n \n {task.description && (\n

{task.description}

\n )}\n \n {task.category && (\n \n {task.category}\n \n )}\n

\n \n {/* Progress Display */}\n

\n \n Progress: {completionCount} / {target}\n \n \n {Math.round((completionCount / target) * 100)}%\n \n

\n \n {/* Progress bar */}\n

\n \n {completionCount >= target && (\n

\n {isOverCompleted \n ? `🎉 Over-achieved! (+${completionCount - target} extra)`\n : '✓ Target completed!'\n }\n

\n )}\n

\n \n {/* Existing Completions */}\n {currentCompletions.length > 0 && (\n

\n Completed this week ({currentCompletions.length}):\n

\n {currentCompletions.map((completion, index) => {\n const completedDate = new Date(completion.completed_at);\n const dayName = completedDate.toLocaleDateString('en-US', { weekday: 'short' });\n const dateStr = completedDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });\n const timeStr = completedDate.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });\n \n const isEditing = editingCompletion?.id === completion.id;\n \n if (isEditing) {\n return (\n

\n \n Date & Time\n \n setEditDateTime(e.target.value)}\n className=\"w-full px-2 py-1 text-sm border border-gray-600 bg-gray-700 text-gray-100 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n \n Notes\n \n setEditNotes(e.target.value)}\n placeholder=\"Add notes about this completion...\"\n rows={2}\n className=\"w-full px-2 py-1 text-sm border border-gray-600 bg-gray-700 text-gray-100 placeholder-gray-400 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none\"\n />\n

\n \n Cancel\n \n \n Save\n \n

\n );\n }\n \n return (\n

\n \n #{index + 1} - {dayName} {dateStr} at {timeStr}\n \n {completion.notes && (\n

\n {completion.notes}\n

\n )}\n

\n {onUpdateCompletion && (\n handleEditCompletion(completion)}\n disabled={working}\n className=\"text-blue-500 hover:text-blue-700 text-xs px-1 disabled:opacity-50\"\n title=\"Edit completion\"\n >\n Edit\n \n )}\n {onRemoveCompletion && (\n handleRemoveCompletion(completion.id)}\n disabled={working}\n className=\"text-red-500 hover:text-red-700 text-xs px-1 disabled:opacity-50\"\n title=\"Remove completion\"\n >\n Remove\n \n )}\n

\n );\n })}\n

\n )}\n \n {/* Add New Completion */}\n

\n \n Add completion #{completionCount + 1}\n {isOverCompleted && (\n (over target!)\n )}\n \n setNotes(e.target.value)}\n placeholder=\"Add any notes about this completion...\"\n rows={2}\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none\"\n />\n

\n e.g., \"30 minute walk\", \"Read chapter 3\", \"Called mom\"\n

\n \n {/* Footer */}\n

\n \n Close\n \n \n \n {working ? (\n <>\n

\n Adding...\n \n ) : (\n <>\n \n Add Completion\n \n )}\n \n

\n );\n}\n","deleted","label",[168,169,149],"frontend","components","permalink","https://www.val.town/x/ryi/pathfinder__5712n7-bore/code/frontend/components/TaskCompletionModal.tsx","extension","actionData","errors"]