\n {/* Header */}\n

\n \n

\n Calendário de Projetos\n

\n Junta de Freguesia de Alcofra\n

\n Promovendo a proximidade com a comunidade através da transparência e\n informação sobre os nossos projetos e iniciativas.\n

\n\n {/* Stats */}\n

{stats.total}

Total de Projetos

{stats.completed}

Concluídos

{stats.inProgress}

Em Curso

{stats.planned}

Planeados

\n {formatCurrency(stats.totalBudget)}\n

Investimento Total

\n\n {/* Filters */}\n

\n Categoria:\n

\n {categories.map((cat) => (\n setSelectedCategory(cat.id)}\n className={`px-3 py-1.5 rounded-full text-sm font-medium transition-all ${\n selectedCategory === cat.id\n ? `${cat.color} text-white shadow-md`\n : \"bg-gray-200 text-gray-700 hover:bg-gray-300\"\n }`}\n >\n {cat.name}\n \n ))}\n

\n Visualização:\n

\n setTimelineView(\"month\")}\n className={`px-4 py-1.5 rounded-lg text-sm font-medium transition-all ${\n timelineView === \"month\"\n ? \"bg-blue-800 text-white\"\n : \"bg-gray-200 text-gray-700 hover:bg-gray-300\"\n }`}\n >\n Mensal\n \n setTimelineView(\"quarter\")}\n className={`px-4 py-1.5 rounded-lg text-sm font-medium transition-all ${\n timelineView === \"quarter\"\n ? \"bg-blue-800 text-white\"\n : \"bg-gray-200 text-gray-700 hover:bg-gray-300\"\n }`}\n >\n Trimestral\n \n

\n\n {/* Timeline */}\n

\n Linha do Tempo - 2025\n

\n\n

\n {timeline.map((period, index) => (\n

\n {/* Period Header */}\n

\n {period.label}\n

\n {period.fullLabel}\n

\n\n {/* Tasks in Period */}\n {period.tasks.length === 0\n ? (\n

\n Nenhum projeto neste período\n

\n )\n : (\n

\n {period.tasks.map((task) => {\n const categoryColor = categories.find((c) =>\n c.id === task.category\n )?.color || \"bg-gray-600\";\n const StatusIcon = statusConfig[task.status].icon;\n\n return (\n setSelectedTask(task)}\n className=\"flex items-center gap-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer transition-all hover:shadow-md border-l-4\"\n style={{\n borderColor: categoryColor.replace(\"bg-\", \"#\"),\n }}\n >\n \n

\n {task.title}\n

\n {formatDate(task.startDate)} -{\" \"}\n {formatDate(task.endDate)}\n

\n \n \n {statusConfig[task.status].label}\n \n

\n );\n })}\n

\n )}\n

\n ))}\n

\n\n {/* Task Detail Modal */}\n {selectedTask && (\n setSelectedTask(null)}\n >\n e.stopPropagation()}\n >\n

\n {selectedTask.title}\n

\n setSelectedTask(null)}\n className=\"text-gray-500 hover:text-gray-700\"\n >\n \n \n

\n\n

\n c.id === selectedTask.category)\n ?.color\n } rounded mb-4`}\n >\n

\n\n

\n \n {React.createElement(\n statusConfig[selectedTask.status].icon,\n { className: \"w-4 h-4\" },\n )}\n {statusConfig[selectedTask.status].label}\n \n

\n\n

{selectedTask.description}

\n\n

\n \n

Período

\n {formatDate(selectedTask.startDate)} -{\" \"}\n {formatDate(selectedTask.endDate)}\n

\n \n

Responsável

\n {selectedTask.responsible}\n

\n \n

Localização

\n {selectedTask.location}\n

\n \n

Orçamento

\n {formatCurrency(selectedTask.budget)}\n

\n\n {/* Progress Bar */}\n

\n Progresso\n \n {selectedTask.progress}%\n \n

\n c.id === selectedTask.category)\n ?.color\n }`}\n style={{ width: `${selectedTask.progress}%` }}\n >\n

\n \n\n {/* Photos */}\n {selectedTask.photos > 0 && (\n

\n \n

\n )}\n\n {/* Comments Section */}\n

\n setShowComments(!showComments)}\n className=\"w-full flex items-center justify-between px-4 py-3 bg-blue-50 text-blue-700 rounded-lg hover:bg-blue-100 transition-colors mb-4\"\n >\n \n \n Comentários ({(comments[selectedTask.id] || []).length})\n \n \n\n {showComments && (\n

\n {(comments[selectedTask.id] || []).length === 0\n ? (\n

\n Ainda não há comentários. Seja o primeiro a\n comentar!\n

\n )\n : (\n (comments[selectedTask.id] || []).map((comment) => (\n \n

\n \n {comment.author}\n \n \n {formatDate(comment.date)}\n \n

\n {comment.text}\n

\n ))\n )}\n

\n\n {\n e.preventDefault();\n const input = e.target.elements.comment;\n handleAddComment(selectedTask.id, input.value);\n input.value = \"\";\n }}\n className=\"flex gap-2\"\n >\n \n \n Enviar\n \n \n

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

\n Mantenha-se informado!{\" \"}\n Este calendário é atualizado regularmente para manter a nossa\n comunidade conectada com os projetos em curso e futuros.\n

\n Questões ou sugestões? Contacte-nos através do nosso site oficial\n

\n \n www.jf-alcofra.pt\n \n

\n \n \n );\n};\n\nfunction App() {\n return (\n <>\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n Sample\n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}","deleted","label",[99],"permalink","https://www.val.town/x/nmsilva/campanhapsdalcofra/code/task-calendar.tsx","extension","actionData","errors"]