From e4238d9fdb40f744fbc3d65a191ef49182cfe9e1 Mon Sep 17 00:00:00 2001
From: Kobe <kobeamerijckx@outlook.com>
Date: Fri, 6 Jun 2025 09:53:50 +0200
Subject: [PATCH] Better dashboard cards

---
 .../components/notification_overview.html     | 116 ++++++++----------
 templates/components/recent_activity.html     |  14 +--
 2 files changed, 61 insertions(+), 69 deletions(-)

diff --git a/templates/components/notification_overview.html b/templates/components/notification_overview.html
index 5713cce..af0744f 100644
--- a/templates/components/notification_overview.html
+++ b/templates/components/notification_overview.html
@@ -3,88 +3,80 @@
   <div class="card shadow-sm">
     <div class="card-body">
       <div class="d-flex justify-content-between align-items-center mb-3">
-        <h5 class="card-title mb-0"><i class="fas fa-bell me-2"></i>Notifications</h5>
+        <h5 class="card-title mb-0">
+          <i class="fas fa-bell me-2"></i>
+          Notifications
+        </h5>
         <a href="{{ url_for('main.notifications') }}" class="btn btn-primary btn-sm">View All</a>
       </div>
-      <div class="d-flex flex-column">
-        <div class="d-flex justify-content-between align-items-center mb-3">
-          <div class="d-flex align-items-center">
-            <i class="fas fa-envelope me-2 icon-primary"></i>
-            <span class="text-muted">Unread:</span>
-          </div>
-          <div class="fw-bold text-primary">{{ unread_count }}</div>
-        </div>
-      </div>
-
+      
       {% if recent_notifications %}
-      <hr class="my-3">
-      <div class="d-flex justify-content-between align-items-center mb-2">
-        <h6 class="mb-0 text-muted">Recent Notifications</h6>
-      </div>
       <div class="list-group list-group-flush">
         {% for notification in recent_notifications %}
-        <div class="list-group-item list-group-item-action px-0">
+        <div class="list-group-item px-0">
           <div class="d-flex justify-content-between align-items-center">
-            <div>
-              {% if notification.notif_type == 'account_created' %}
-                <div class="fw-bold {% if not notification.read %}text-primary{% endif %}">
-                  <i class="fas fa-user-plus me-1"></i>Account Created
-                </div>
-                <small class="text-muted">
-                  Welcome to DocuPulse! Your account has been created successfully.
-                </small>
-              {% elif notification.notif_type == 'room_invite' %}
-                <div class="fw-bold {% if not notification.read %}text-primary{% endif %}">
-                  <i class="fas fa-door-open me-1"></i>Room Invitation
-                </div>
-                <small class="text-muted">
-                  {% if notification.sender %}
-                    {{ notification.sender.username }} invited you to join room "{{ notification.details.room_name }}"
+            <div class="d-flex align-items-center">
+              <div>
+                <div class="fw-bold text-primary">
+                  {% if notification.notif_type == 'account_created' %}
+                    <i class="fas fa-user-plus me-1"></i>Account Created
+                  {% elif notification.notif_type == 'room_invite' %}
+                    <i class="fas fa-door-open me-1"></i>Room Invitation
+                  {% elif notification.notif_type == 'room_invite_removed' %}
+                    <i class="fas fa-door-closed me-1"></i>Room Invitation Removed
+                  {% elif notification.notif_type == 'conversation_invite' %}
+                    <i class="fas fa-comments me-1"></i>Conversation Invitation
+                  {% elif notification.notif_type == 'conversation_invite_removed' %}
+                    <i class="fas fa-comment-slash me-1"></i>Conversation Invitation Removed
+                  {% elif notification.notif_type == 'conversation_message' %}
+                    <i class="fas fa-comment me-1"></i>New Message
+                  {% else %}
+                    {{ notification.notif_type|replace('_', ' ')|title }}
                   {% endif %}
-                </small>
-              {% elif notification.notif_type == 'conversation_invite' %}
-                <div class="fw-bold {% if not notification.read %}text-primary{% endif %}">
-                  <i class="fas fa-comments me-1"></i>Conversation Invitation
                 </div>
                 <small class="text-muted">
-                  {% if notification.sender %}
-                    {{ notification.sender.username }} invited you to a conversation
-                  {% endif %}
-                </small>
-              {% elif notification.notif_type == 'conversation_message' %}
-                <div class="fw-bold {% if not notification.read %}text-primary{% endif %}">
-                  <i class="fas fa-comment me-1"></i>New Message
-                </div>
-                <small class="text-muted">
-                  {% if notification.sender %}
-                    {{ notification.sender.username }} sent a message in "{{ notification.details.conversation_name }}"
-                  {% endif %}
-                </small>
-              {% else %}
-                <div class="fw-bold {% if not notification.read %}text-primary{% endif %}">
-                  {{ notification.notif_type|replace('_', ' ')|title }}
-                </div>
-                <small class="text-muted">
-                  {% if notification.details and notification.details.message %}
+                  {% if notification.notif_type == 'account_created' %}
+                    Welcome to DocuPulse! Your account has been created successfully.
+                  {% elif notification.notif_type == 'room_invite' and notification.sender and notification.details %}
+                    {{ notification.sender.username }} {{ notification.sender.last_name }} invited you to join room "{{ notification.details.room_name }}"
+                  {% elif notification.notif_type == 'room_invite_removed' and notification.sender and notification.details %}
+                    {{ notification.sender.username }} {{ notification.sender.last_name }} removed your invitation to room "{{ notification.details.room_name }}"
+                  {% elif notification.notif_type == 'conversation_invite' and notification.sender and notification.details %}
+                    {{ notification.sender.username }} {{ notification.sender.last_name }} invited you to conversation "{{ notification.details.conversation_name }}"
+                  {% elif notification.notif_type == 'conversation_invite_removed' and notification.sender and notification.details %}
+                    {{ notification.sender.username }} {{ notification.sender.last_name }} removed your invitation to conversation "{{ notification.details.conversation_name }}"
+                  {% elif notification.notif_type == 'conversation_message' and notification.sender and notification.details %}
+                    {{ notification.sender.username }} {{ notification.sender.last_name }} sent a message in conversation "{{ notification.details.conversation_name }}"
+                  {% elif notification.details and notification.details.message %}
                     {{ notification.details.message }}
                   {% endif %}
                 </small>
-              {% endif %}
-              <div class="mt-1">
-                <small class="text-muted">
-                  {{ notification.timestamp.strftime('%Y-%m-%d %H:%M') }}
-                </small>
+                <div class="mt-1">
+                  <small class="text-muted">
+                    {{ notification.timestamp.strftime('%Y-%m-%d %H:%M') }}
+                  </small>
+                </div>
               </div>
             </div>
-            {% if not notification.read %}
-            <span class="badge bg-primary rounded-pill">New</span>
+            
+            {% if notification.notif_type in ['room_invite', 'room_invite_removed'] and notification.details and notification.details.room_id %}
+            <a href="{{ url_for('rooms.room', room_id=notification.details.room_id) }}" class="btn btn-sm btn-outline-primary" style="background-color: white; border: 1px solid var(--primary-color); color: var(--primary-color);" onmouseover="this.style.backgroundColor='var(--primary-color)'; this.querySelector('i').style.color='white'" onmouseout="this.style.backgroundColor='white'; this.querySelector('i').style.color='var(--primary-color)'">
+              <i class="fas fa-external-link-alt"></i>
+            </a>
+            {% elif notification.notif_type in ['conversation_invite', 'conversation_invite_removed', 'conversation_message'] and notification.details and notification.details.conversation_id %}
+            <a href="{{ url_for('conversations.conversation', conversation_id=notification.details.conversation_id) }}" class="btn btn-sm btn-outline-primary" style="background-color: white; border: 1px solid var(--primary-color); color: var(--primary-color);" onmouseover="this.style.backgroundColor='var(--primary-color)'; this.querySelector('i').style.color='white'" onmouseout="this.style.backgroundColor='white'; this.querySelector('i').style.color='var(--primary-color)'">
+              <i class="fas fa-external-link-alt"></i>
+            </a>
             {% endif %}
           </div>
         </div>
         {% endfor %}
       </div>
       {% else %}
-      <div class="text-muted small text-center mt-3">No recent notifications</div>
+      <div class="text-center text-muted py-3">
+        <i class="fas fa-info-circle mb-2"></i>
+        <p class="mb-0">No recent notifications</p>
+      </div>
       {% endif %}
     </div>
   </div>
diff --git a/templates/components/recent_activity.html b/templates/components/recent_activity.html
index cef594d..ac6afc0 100644
--- a/templates/components/recent_activity.html
+++ b/templates/components/recent_activity.html
@@ -39,9 +39,9 @@
                   {% elif event.event_type == 'room_update' %}
                     Updated room "{{ event.details.get('room_name', 'a room') }}"
                   {% elif event.event_type == 'room_member_add' %}
-                    Added {{ event.details.get('added_user_name', 'a user') }} to room "{{ event.details.get('room_name', 'a room') }}"
+                    Added {{ event.details.get('added_user_name', 'a user') }} {{ event.details.get('added_user_last_name', '') }} to room "{{ event.details.get('room_name', 'a room') }}"
                   {% elif event.event_type == 'room_member_remove' %}
-                    Removed {{ event.details.get('removed_user_name', 'a user') }} from room "{{ event.details.get('room_name', 'a room') }}"
+                    Removed {{ event.details.get('removed_user_name', 'a user') }} {{ event.details.get('removed_user_last_name', '') }} from room "{{ event.details.get('room_name', 'a room') }}"
                   {% elif event.event_type == 'conversation_create' %}
                     Started conversation "{{ event.details.get('name', 'a conversation') }}"
                   {% elif event.event_type == 'conversation_open' %}
@@ -49,22 +49,22 @@
                   {% elif event.event_type == 'conversation_update' %}
                     Updated conversation "{{ event.details.get('conversation_name', 'a conversation') }}"
                   {% elif event.event_type == 'conversation_member_add' %}
-                    Added {{ event.details.get('added_user_name', 'a user') }} to conversation "{{ event.details.get('conversation_name', 'a conversation') }}"
+                    Added {{ event.details.get('added_user_name', 'a user') }} {{ event.details.get('added_user_last_name', '') }} to conversation "{{ event.details.get('conversation_name', 'a conversation') }}"
                   {% elif event.event_type == 'conversation_member_remove' %}
-                    Removed {{ event.details.get('removed_user_name', 'a user') }} from conversation "{{ event.details.get('conversation_name', 'a conversation') }}"
+                    Removed {{ event.details.get('removed_user_name', 'a user') }} {{ event.details.get('removed_user_last_name', '') }} from conversation "{{ event.details.get('conversation_name', 'a conversation') }}"
                   {% elif event.event_type == 'message_create' %}
                     Sent a message in "{{ event.details.get('conversation_name', 'a conversation') }}"
                   {% elif event.event_type == 'user_create' %}
-                    Created user account for {{ event.details.get('user_name', 'a user') }}
+                    Created user account for {{ event.details.get('user_name', 'a user') }} {{ event.details.get('user_last_name', '') }}
                   {% elif event.event_type == 'user_update' %}
-                    Updated user account for {{ event.details.get('user_name', 'a user') }}
+                    Updated user account for {{ event.details.get('user_name', 'a user') }} {{ event.details.get('user_last_name', '') }}
                   {% else %}
                     {{ event.event_type|replace('_', ' ')|title }}
                   {% endif %}
                 </div>
                 <small class="text-muted">
                   {% if is_admin %}
-                    by {{ event.user.username }}
+                    by {{ event.user.username }} {{ event.user.last_name }}
                   {% endif %}
                   {{ event.timestamp.strftime('%Y-%m-%d %H:%M') }}
                 </small>