diff options
Diffstat (limited to 'ping/frontend/src/routes/dashboard/messages')
| -rw-r--r-- | ping/frontend/src/routes/dashboard/messages/+page.svelte | 403 |
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> |