{project.title}

{project.description}

\n \n

\n Status:\n

{project.status.replace('_', ' ')}

\n Priority:\n

{project.priority}

\n Progress:\n

{project.progress}%

\n Budget:\n

${project.budget.toLocaleString()}

\n\n {/* View Toggle */}\n

\n setActiveView('messages')}\n className={`flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors ${\n activeView === 'messages'\n ? 'bg-white text-gray-900 shadow-sm'\n : 'text-gray-600 hover:text-gray-900'\n }`}\n >\n Messages ({messages.length})\n \n setActiveView('updates')}\n className={`flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors ${\n activeView === 'updates'\n ? 'bg-white text-gray-900 shadow-sm'\n : 'text-gray-600 hover:text-gray-900'\n }`}\n >\n Project Updates ({projectUpdates.length})\n \n

\n\n {/* Messages View */}\n {activeView === 'messages' && (\n

\n {/* Messages Container */}\n

\n {messages.length === 0 ? (\n

No messages yet. Start the conversation!

\n ) : (\n messages.map((message) => (\n \n \n {message.message_type === 'system' ? (\n

\n {message.content}\n

\n ) : (\n <>\n

\n \n {message.sender?.name}\n \n \n {formatDateTime(message.created_at)}\n \n

{message.content}

\n {message.file_url && (\n

\n \n 📎 {message.file_name}\n \n

\n )}\n \n )}\n

\n ))\n )}\n

\n\n {/* Message Input */}\n

\n )}\n\n {/* Project Updates View */}\n {activeView === 'updates' && (\n

\n {/* Project Update Form (for customers to update description) */}\n {user.role === 'customer' && (\n

Update Project Details

\n )}\n\n {/* Agency Project Update Form */}\n {user.role === 'agency' && (\n

Update Project Status

\n \n Status\n \n setProjectForm({ ...projectForm, status: e.target.value as any })}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n >\n \n \n \n \n \n \n

\n \n

\n \n Progress (%)\n \n setProjectForm({ ...projectForm, progress: parseInt(e.target.value) || 0 })}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n />\n

\n \n

\n \n {updating ? 'Updating...' : 'Update'}\n \n

\n )}\n\n {/* Project Updates Timeline */}\n

Project Timeline

\n \n {projectUpdates.length === 0 ? (\n

No project updates yet.

\n ) : (\n

\n {projectUpdates.map((update) => (\n

\n \n

{update.title}

\n \n {update.update_type.replace('_', ' ')}\n \n

{update.description}

\n {update.user?.name}\n •\n {formatDateTime(update.created_at)}\n

\n ))}\n

\n )}\n

\n )}\n \n );\n}","deleted","label",[175,176,158],"frontend","components","permalink","https://www.val.town/x/Mouhak/my-first-val/code/frontend/components/MessageCenter.tsx","extension","actionData","errors"]