add: added projectsHEADmain

1 files changed, 403 insertions, 0 deletions

diff --git a/ping/frontend/src/routes/dashboard/messages/+page.svelte b/ping/frontend/src/routes/dashboard/messages/+page.svelte
new file mode 100644
index 0000000..52869e4
--- /dev/null
+++ b/ping/frontend/src/routes/dashboard/messages/+page.svelte
@@ -0,0 +1,403 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+	
+	let searchQuery = '';
+	let selectedMessage = null;
+	let newMessage = '';
+	let messages = [
+		{
+			id: 1,
+			sender: 'Équipe Ping',
+			subject: 'Nouvelle analyse de portefeuille disponible',
+			content: 'Votre analyse mensuelle de performance ESG est maintenant disponible. Consultez les dernières métriques de votre portefeuille.',
+			date: new Date('2024-06-28'),
+			unread: true
+		},
+		{
+			id: 2,
+			sender: 'Système',
+			subject: 'Alerte: Score ESG en baisse',
+			content: 'Le score ESG de votre portefeuille a diminué de 5% ce mois-ci. Nous recommandons de réviser vos investissements.',
+			date: new Date('2024-06-25'),
+			unread: true
+		},
+		{
+			id: 3,
+			sender: 'Support',
+			subject: 'Mise à jour des modèles prédictifs',
+			content: 'Nos modèles d\'analyse ont été mis à jour avec les dernières données du marché. Vos prédictions sont maintenant plus précises.',
+			date: new Date('2024-06-20'),
+			unread: false
+		}
+	];
+
+	function handleSearch() {
+		console.log('Searching messages:', searchQuery);
+	}
+
+	function selectMessage(message: any) {
+		selectedMessage = message;
+		if (message.unread) {
+			message.unread = false;
+			messages = [...messages];
+		}
+	}
+
+	function sendMessage() {
+		if (newMessage.trim()) {
+			console.log('Sending message:', newMessage);
+			newMessage = '';
+		}
+	}
+
+	function deleteMessage(messageId: number) {
+		messages = messages.filter(m => m.id !== messageId);
+		if (selectedMessage?.id === messageId) {
+			selectedMessage = null;
+		}
+	}
+</script>
+
+<section id="messages">
+	<div class="messages-container">
+		<!-- Header -->
+		<div class="messages-header">
+			<h1>Messages</h1>
+			<div class="search-bar">
+				<input 
+					type="text" 
+					placeholder="Rechercher dans les messages..." 
+					bind:value={searchQuery}
+					on:input={handleSearch}
+				/>
+				<button class="search-btn">🔍</button>
+			</div>
+		</div>
+
+		<div class="messages-layout">
+			<!-- Messages List -->
+			<div class="messages-list card">
+				<h2>Boîte de réception</h2>
+				<div class="message-items">
+					{#each messages as message}
+						<div 
+							class="message-item {message.unread ? 'unread' : ''} {selectedMessage?.id === message.id ? 'selected' : ''}"
+							on:click={() => selectMessage(message)}
+						>
+							<div class="message-header">
+								<span class="message-sender">{message.sender}</span>
+								<span class="message-date">{message.date.toLocaleDateString()}</span>
+							</div>
+							<div class="message-subject">{message.subject}</div>
+							<div class="message-preview">{message.content.substring(0, 80)}...</div>
+							{#if message.unread}
+								<div class="unread-indicator"></div>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			</div>
+
+			<!-- Message Detail -->
+			<div class="message-detail card">
+				{#if selectedMessage}
+					<div class="message-detail-header">
+						<h3>{selectedMessage.subject}</h3>
+						<div class="message-actions">
+							<button class="btn" on:click={() => deleteMessage(selectedMessage.id)}>
+								🗑️ Supprimer
+							</button>
+						</div>
+					</div>
+					<div class="message-meta">
+						<span>De: {selectedMessage.sender}</span>
+						<span>Date: {selectedMessage.date.toLocaleDateString()}</span>
+					</div>
+					<div class="message-content">
+						{selectedMessage.content}
+					</div>
+					
+					<!-- Reply Section -->
+					<div class="reply-section">
+						<h4>Répondre</h4>
+						<textarea 
+							bind:value={newMessage} 
+							placeholder="Tapez votre réponse..."
+							rows="4"
+						></textarea>
+						<button class="btn" on:click={sendMessage}>
+							📤 Envoyer
+						</button>
+					</div>
+				{:else}
+					<div class="no-message-selected">
+						<h3>Sélectionnez un message</h3>
+						<p>Choisissez un message dans la liste pour le lire</p>
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+</section>
+
+<style>
+	#messages {
+		padding: 16px;
+		background-color: var(--bg-secondary);
+		color: white;
+		min-height: calc(100vh - 72px);
+	}
+
+	.messages-container {
+		max-width: 1400px;
+	}
+
+	/* Header */
+	.messages-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 16px;
+	}
+
+	h1 {
+		color: var(--text-lime);
+		font-size: 32px;
+		margin: 0;
+		font-weight: 600;
+	}
+
+	h2 {
+		color: var(--text-lime);
+		font-size: 24px;
+		margin: 0 0 16px 0;
+		font-weight: 600;
+	}
+
+	.search-bar {
+		display: flex;
+		align-items: center;
+		background-color: var(--bg-primary);
+		border-radius: 8px;
+		padding: 4px;
+		gap: 8px;
+	}
+
+	.search-bar input {
+		background: transparent;
+		border: none;
+		color: white;
+		padding: 12px 16px;
+		font-size: 14px;
+		outline: none;
+		width: 300px;
+	}
+
+	.search-bar input::placeholder {
+		color: #888888;
+	}
+
+	.search-btn {
+		background: transparent;
+		border: none;
+		color: #888888;
+		padding: 8px;
+		cursor: pointer;
+		font-size: 16px;
+	}
+
+	/* Layout */
+	.messages-layout {
+		display: flex;
+		gap: 16px;
+		height: calc(100vh - 200px);
+	}
+
+	.card {
+		background-color: var(--bg-primary);
+		border-radius: 8px;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+		padding: 16px;
+		margin: 16px;
+		color: white;
+	}
+
+	/* Messages List */
+	.messages-list {
+		flex: 1;
+		max-width: 400px;
+	}
+
+	.message-items {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		max-height: calc(100vh - 300px);
+		overflow-y: auto;
+	}
+
+	.message-item {
+		padding: 12px;
+		border-radius: 8px;
+		background-color: var(--bg-secondary);
+		cursor: pointer;
+		transition-duration: 0.2s;
+		position: relative;
+		border-left: 3px solid transparent;
+	}
+
+	.message-item:hover {
+		background-color: var(--btn-primary);
+		transform: scale(1.02);
+	}
+
+	.message-item.selected {
+		border-left-color: var(--text-lime);
+		background-color: var(--btn-primary);
+	}
+
+	.message-item.unread {
+		background-color: rgba(0, 255, 119, 0.1);
+	}
+
+	.message-header {
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 4px;
+	}
+
+	.message-sender {
+		font-weight: 600;
+		color: var(--text-lime);
+	}
+
+	.message-date {
+		font-size: 12px;
+		color: #888888;
+	}
+
+	.message-subject {
+		font-weight: 500;
+		margin-bottom: 4px;
+		font-size: 14px;
+	}
+
+	.message-preview {
+		font-size: 13px;
+		color: #888888;
+	}
+
+	.unread-indicator {
+		position: absolute;
+		top: 8px;
+		right: 8px;
+		width: 8px;
+		height: 8px;
+		background-color: var(--text-lime);
+		border-radius: 50%;
+	}
+
+	/* Message Detail */
+	.message-detail {
+		flex: 2;
+	}
+
+	.message-detail-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 16px;
+		padding-bottom: 16px;
+		border-bottom: 1px solid var(--btn-primary);
+	}
+
+	.message-detail-header h3 {
+		margin: 0;
+		color: white;
+		font-size: 20px;
+	}
+
+	.message-actions {
+		display: flex;
+		gap: 8px;
+	}
+
+	.message-meta {
+		display: flex;
+		gap: 20px;
+		margin-bottom: 20px;
+		font-size: 14px;
+		color: #888888;
+	}
+
+	.message-content {
+		line-height: 1.6;
+		margin-bottom: 30px;
+		padding: 20px;
+		background-color: var(--bg-secondary);
+		border-radius: 8px;
+	}
+
+	.reply-section {
+		border-top: 1px solid var(--btn-primary);
+		padding-top: 20px;
+	}
+
+	.reply-section h4 {
+		margin: 0 0 12px 0;
+		color: var(--text-lime);
+	}
+
+	textarea {
+		width: 100%;
+		background-color: var(--bg-secondary);
+		border: none;
+		border-bottom: 2px solid var(--text-lime);
+		padding: 8px;
+		border-radius: 8px 8px 0 0;
+		color: white;
+		font-size: 14px;
+		resize: vertical;
+		box-sizing: border-box;
+		margin-bottom: 12px;
+	}
+
+	textarea::placeholder {
+		color: #888888;
+	}
+
+	textarea:focus {
+		outline: none;
+		border-bottom-color: var(--text-lime);
+	}
+
+	.no-message-selected {
+		text-align: center;
+		padding: 60px 20px;
+		color: #888888;
+	}
+
+	.no-message-selected h3 {
+		margin: 0 0 12px 0;
+		color: #888888;
+	}
+
+	.btn {
+		background-color: var(--btn-primary);
+		color: white;
+		border: none;
+		padding: 8px 16px;
+		border-radius: 4px;
+		cursor: pointer;
+		text-decoration: none;
+		transition-duration: 0.2s;
+		font-weight: 600;
+	}
+
+	.btn:hover {
+		background-color: var(--btn-primary-hover);
+		transform: scale(1.025);
+	}
+</style>