From 96ce402f9f0a75ada1a0a95a5218685b78b4f3dc Mon Sep 17 00:00:00 2001
From: Allan Eising <allan@eising.dk>
Date: Wed, 14 May 2025 17:22:27 +0200
Subject: [PATCH] Update dashboard and audit view

---
 .../frontend/templates/audit/inner.html.j2    |  60 +++-
 .../frontend/templates/dashboard.html         | 306 ++++++++++++------
 .../src/sshecret_admin/static/css/main.css    |  24 ++
 .../src/sshecret_backend/audit.py             |   2 +-
 4 files changed, 298 insertions(+), 94 deletions(-)

diff --git a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/audit/inner.html.j2 b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/audit/inner.html.j2
index 2c1848f..ca353b5 100644
--- a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/audit/inner.html.j2
+++ b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/audit/inner.html.j2
@@ -79,7 +79,65 @@
                   >
 
                   <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
-                    {{ entry.timestamp }}
+                    <p>{{ entry.timestamp }}<button data-popover-target="popover-audit-entry-{{ entry.id }}" data-popover-placement="bottom-end" type="button"><svg class="w-4 h-4 ms-2 text-gray-400 hover:text-gray-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg><span class="sr-only">Show information</span></button></p>
+
+                <div data-popover id="popover-audit-entry-{{entry.id}}" role="tooltip" class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 w-80 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
+                        <dl class="max-w-md text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 px-2 py-2">
+                          <div class="flex flex-col pb-3">
+                            <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">ID</dt>
+                            <dd class="text-xs font-semibold">{{ entry.id }}</dd>
+                          </div>
+                          <div class="flex flex-col pb-3">
+                            <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Subsystem</dt>
+                            <dd class="text-xs font-semibold">{{ entry.subsystem }}</dd>
+                          </div>
+
+                          <div class="flex flex-col pb-3">
+                            <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Timestamp</dt>
+                            <dd class="text-xs font-semibold">{{ entry.timestamp }}</dd>
+                          </div>
+                          <div class="flex flex-col pb-3">
+                            <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Operation</dt>
+                            <dd class="text-xs font-semibold">{{ entry.operation }}</dd>
+                          </div>
+                          <div class="flex flex-col pb-3">
+                            <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Client ID</dt>
+                            <dd class="text-xs font-semibold">{{ entry.client_id }}</dd>
+                          </div>
+                          <div class="flex flex-col pb-3">
+                            <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Client Name</dt>
+                            <dd class="text-xs font-semibold">{{ entry.client_name }}</dd>
+                          </div>
+                          <div class="flex flex-col pb-3">
+                            <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret ID</dt>
+                            <dd class="text-xs font-semibold">{{ entry.secret_id }}</dd>
+                          </div>
+                          <div class="flex flex-col pb-3">
+                            <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret Name</dt>
+                            <dd class="text-xs font-semibold">{{ entry.secret_name }}</dd>
+                          </div>
+                          <div class="flex flex-col pb-3">
+                            <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Message</dt>
+                            <dd class="text-xs font-semibold">{{ entry.message }}</dd>
+                          </div>
+                          <div class="flex flex-col pb-3">
+                            <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Origin</dt>
+                            <dd class="text-xs font-semibold">{{ entry.origin }}</dd>
+                          </div>
+                          {% if entry.data %}
+                            {% for key, value in entry.data.items() %}
+                              <div class="flex flex-col pb-3">
+                                <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">{{ key | capitalize }}</dt>
+                                <dd class="text-xs font-semibold">{{ value }}</dd>
+                              </div>
+                            {% endfor %}
+                          {% endif %}
+
+                        </dl>
+                </div>
+
+
+
                   </td>
 
                   <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
diff --git a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/dashboard.html b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/dashboard.html
index 740f740..8c717eb 100644
--- a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/dashboard.html
+++ b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/dashboard.html
@@ -1,133 +1,255 @@
 {% extends "/dashboard/_base.html" %} {% block content %}
 
-<div
-  class="p-4 bg-white block sm:flex items-center justify-between border-b border-gray-200 lg:mt-1.5 dark:bg-gray-800 dark:border-gray-700"
-  >
+<div class="px-4 pt-6">
+<div class="py-8 px-4 mt-4 mx-auto max-w-screen-xl text-center lg:py-16">
+
   <h1 class="mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white">Welcome to Sshecret</h1>
 
+  <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0">
+    <button id="createClientButton" class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-3 py-2.5 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800" type="button" data-drawer-target="drawer-create-client-default" data-drawer-show="drawer-create-client-default" aria-controls="drawer-create-client-default" data-drawer-placement="right">
+      Add new client
+    </button>
+    <button id="createSecretButton" class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-3 py-2.5 ms-2 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800" type="button" data-drawer-target="drawer-create-secret-default" data-drawer-show="drawer-create-secret-default" aria-controls="drawer-create-secret-default" data-drawer-placement="right">
+      Add new secret
+    </button>
+  </div>
+
 </div>
 
+
 <div class="grid w-full grid-cols-1 gap-4 mt-4 xl:grid-cols-2 2xl:grid-cols-3">
   <div class="items-center justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:border-gray-700 sm:p-6 dark:bg-gray-800">
     <div class="w-full">
-      <h3 class="text-xl font-bold text-gray-500 dark:text-gray-400">Stats</h3>
+      <h3 class="text-base text-gray-500 dark:text-gray-400">Stats</h3>
       <dl class="max-w-md text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700">
         <div class="flex flex-col pb-3">
-          <dt class="mb-1 text-gray-500 md:text-lg dark:text-gray-400">Clients</dt>
+          <dt class="mb-1 text-gray-500 text-xs dark:text-gray-400">Clients</dt>
           <dd class="text-lg font-semibold">{{ stats.clients }}</dd>
         </div>
         <div class="flex flex-col py-3">
-          <dt class="mb-1 text-gray-500 md:text-lg dark:text-gray-400">Secrets</dt>
+          <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secrets</dt>
           <dd class="text-lg font-semibold">{{ stats.secrets }}</dd>
         </div>
         <div class="flex flex-col py-3">
-          <dt class="mb-1 text-gray-500 md:text-lg dark:text-gray-400">Audit Events</dt>
+          <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Audit Events</dt>
           <dd class="text-lg font-semibold">{{ stats.audit_events }}</dd>
         </div>
       </dl>
-    <div class="flex mt-4 md:mt-6">
-      <button id="createClientButton" class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-3 py-2.5 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800" type="button" data-drawer-target="drawer-create-client-default" data-drawer-show="drawer-create-client-default" aria-controls="drawer-create-client-default" data-drawer-placement="right">
-        Add new client
-      </button>
-      <button id="createSecretButton" class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-3 py-2.5 ms-2 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800" type="button" data-drawer-target="drawer-create-secret-default" data-drawer-show="drawer-create-secret-default" aria-controls="drawer-create-secret-default" data-drawer-placement="right">
-        Add new secret
-      </button>
-    </div>
     </div>
   </div>
   <div class="items-center 2xl: col-span-2 xl:col-span-2 justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:border-gray-700 sm:p-6 dark:bg-gray-800">
     <div class="w-full">
       <h3 class="text-base font-normal text-gray-500 dark:text-gray-400">Last Login Events</h3>
       {% if last_login_events.total > 0 %}
-      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
-        <thead class="bg-gray-50 dark:bg-gray-700">
-          <tr>
-            <th scope="col" class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white">Timestamp</th>
-            <th scope="col" class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white">Subsystem</th>
-            <th scope="col" class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white">Client/Username</th>
-            <th scope="col" class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white">Origin</th>
-          </tr>
-        </thead>
-        <tbody class="bg-white dark:bg-gray-800">
-          {% for entry in last_login_events.results | list %}
-            <tr
-              class="{{ loop.cycle('', 'bg-gray-50 dark:bg-gray-700 ') }}hover:bg-gray-100 dark:hover:bg-gray-700"
-              id="login-entry-{{ entry.id }}"
-              >
-              <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
-                {{ entry.timestamp }}
-              </td>
-
-              <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
-                {{ entry.subsystem }}
-              </td>
-
-              <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
-                {% if entry.client_name %}
-                  {{ entry.client_name }}
-                {% elif entry.data.username %}
-                  {{ entry.data.username }}
-                {% endif %}
-
-              </td>
-
-              <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
-                {{ entry.origin }}
-              </td>
+        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
+          <thead class="bg-gray-50 dark:bg-gray-700">
+            <tr>
+              <th scope="col" class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white">Timestamp</th>
+              <th scope="col" class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white">Subsystem</th>
+              <th scope="col" class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white">Client/Username</th>
+              <th scope="col" class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white">Origin</th>
             </tr>
-          {% endfor %}
-        </tbody>
-      </table>
-    {% else %}
-      <p class="text-sm italic">No entries</p>
-    {% endif %}
+          </thead>
+          <tbody class="bg-white dark:bg-gray-800">
+            {% for entry in last_login_events.results | list %}
+              <tr
+                class="{{ loop.cycle('', 'bg-gray-50 dark:bg-gray-700 ') }}hover:bg-gray-100 dark:hover:bg-gray-700"
+                id="login-entry-{{ entry.id }}"
+                >
+                <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
+                  <p>{{ entry.timestamp }}<button data-popover-target="popover-login-entry-{{ entry.id }}" data-popover-placement="bottom-end" type="button"><svg class="w-4 h-4 ms-2 text-gray-400 hover:text-gray-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg><span class="sr-only">Show information</span></button>
+                  </p>
+
+                  <div data-popover id="popover-login-entry-{{entry.id}}" role="tooltip" class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 w-80 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
+                    <dl class="max-w-md text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 px-2 py-2">
+                      <div class="flex flex-col pb-3">
+                        <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">ID</dt>
+                        <dd class="text-xs font-semibold">{{ entry.id }}</dd>
+                      </div>
+                      <div class="flex flex-col pb-3">
+                        <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Subsystem</dt>
+                        <dd class="text-xs font-semibold">{{ entry.subsystem }}</dd>
+                      </div>
+
+                      <div class="flex flex-col pb-3">
+                        <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Timestamp</dt>
+                        <dd class="text-xs font-semibold">{{ entry.timestamp }}</dd>
+                      </div>
+                      <div class="flex flex-col pb-3">
+                        <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Operation</dt>
+                        <dd class="text-xs font-semibold">{{ entry.operation }}</dd>
+                      </div>
+                      <div class="flex flex-col pb-3">
+                        <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Client ID</dt>
+                        <dd class="text-xs font-semibold">{{ entry.client_id }}</dd>
+                      </div>
+                      <div class="flex flex-col pb-3">
+                        <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Client Name</dt>
+                        <dd class="text-xs font-semibold">{{ entry.client_name }}</dd>
+                      </div>
+                      <div class="flex flex-col pb-3">
+                        <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret ID</dt>
+                        <dd class="text-xs font-semibold">{{ entry.secret_id }}</dd>
+                      </div>
+                      <div class="flex flex-col pb-3">
+                        <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret Name</dt>
+                        <dd class="text-xs font-semibold">{{ entry.secret_name }}</dd>
+                      </div>
+                      <div class="flex flex-col pb-3">
+                        <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Message</dt>
+                        <dd class="text-xs font-semibold">{{ entry.message }}</dd>
+                      </div>
+                      <div class="flex flex-col pb-3">
+                        <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Origin</dt>
+                        <dd class="text-xs font-semibold">{{ entry.origin }}</dd>
+                      </div>
+                      {% if entry.data %}
+                        {% for key, value in entry.data.items() %}
+                          <div class="flex flex-col pb-3">
+                            <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">{{ key | capitalize }}</dt>
+                            <dd class="text-xs font-semibold">{{ value }}</dd>
+                          </div>
+                        {% endfor %}
+                      {% endif %}
+
+                    </dl>
+                  </div>
+
+
+
+                </td>
+
+                <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
+                  {{ entry.subsystem }}
+                </td>
+
+                <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
+                  {% if entry.client_name %}
+                    {{ entry.client_name }}
+                  {% elif entry.data.username %}
+                    {{ entry.data.username }}
+                  {% endif %}
+
+                </td>
+
+                <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
+                  {{ entry.origin }}
+                </td>
+              </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      {% else %}
+        <p class="text-sm italic">No entries</p>
+      {% endif %}
     </div>
   </div>
   <div class="items-center 2xl:col-span-3 xl:col-span-3 justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:border-gray-700 sm:p-6 dark:bg-gray-800">
     <div class="w-full">
       <h3 class="text-base font-normal text-gray-500 dark:text-gray-400">Last Audit Events</h3>
       {% if last_audit_events.total > 0 %}
-      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
-        <thead class="bg-gray-50 dark:bg-gray-700">
-          <tr>
-            <th scope="col" class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white">Timestamp</th>
-            <th scope="col" class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white">Subsystem</th>
-            <th scope="col" class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white">Message</th>
-            <th scope="col" class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white">Origin</th>
-          </tr>
-        </thead>
-        <tbody class="bg-white dark:bg-gray-800">
-          {% for entry in last_audit_events.results | list %}
-            <tr
-              class="{{ loop.cycle('', 'bg-gray-50 dark:bg-gray-700 ') }}hover:bg-gray-100 dark:hover:bg-gray-700"
-              id="login-entry-{{ entry.id }}"
-              >
-              <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
-                {{ entry.timestamp }}
-              </td>
-
-              <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
-                {{ entry.subsystem }}
-              </td>
-
-              <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
-                {{ entry.message }}
-              </td>
-
-              <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
-                {{ entry.origin }}
-              </td>
+        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
+          <thead class="bg-gray-50 dark:bg-gray-700">
+            <tr>
+              <th scope="col" class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white">Timestamp</th>
+              <th scope="col" class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white">Subsystem</th>
+              <th scope="col" class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white">Message</th>
+              <th scope="col" class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white">Origin</th>
             </tr>
-          {% endfor %}
-        </tbody>
-      </table>
-    {% else %}
-      <p class="text-sm italic">No entries</p>
-    {% endif %}
+          </thead>
+          <tbody class="bg-white dark:bg-gray-800">
+            {% for entry in last_audit_events.results | list %}
+              <tr
+                class="{{ loop.cycle('', 'bg-gray-50 dark:bg-gray-700 ') }}hover:bg-gray-100 dark:hover:bg-gray-700"
+                id="login-entry-{{ entry.id }}"
+                >
+                <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
+                  <p>{{ entry.timestamp }}<button data-popover-target="popover-audit-entry-{{ entry.id }}" data-popover-placement="bottom-end" type="button"><svg class="w-4 h-4 ms-2 text-gray-400 hover:text-gray-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg><span class="sr-only">Show information</span></button></p>
+
+                  <div data-popover id="popover-audit-entry-{{entry.id}}" role="tooltip" class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 w-80 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
+                    <dl class="max-w-md text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 px-2 py-2">
+                      <div class="flex flex-col pb-3">
+                        <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">ID</dt>
+                        <dd class="text-xs font-semibold">{{ entry.id }}</dd>
+                      </div>
+                      <div class="flex flex-col pb-3">
+                        <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Subsystem</dt>
+                        <dd class="text-xs font-semibold">{{ entry.subsystem }}</dd>
+                      </div>
+
+                      <div class="flex flex-col pb-3">
+                        <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Timestamp</dt>
+                        <dd class="text-xs font-semibold">{{ entry.timestamp }}</dd>
+                      </div>
+                      <div class="flex flex-col pb-3">
+                        <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Operation</dt>
+                        <dd class="text-xs font-semibold">{{ entry.operation }}</dd>
+                      </div>
+                      <div class="flex flex-col pb-3">
+                        <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Client ID</dt>
+                        <dd class="text-xs font-semibold">{{ entry.client_id }}</dd>
+                      </div>
+                      <div class="flex flex-col pb-3">
+                        <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Client Name</dt>
+                        <dd class="text-xs font-semibold">{{ entry.client_name }}</dd>
+                      </div>
+                      <div class="flex flex-col pb-3">
+                        <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret ID</dt>
+                        <dd class="text-xs font-semibold">{{ entry.secret_id }}</dd>
+                      </div>
+                      <div class="flex flex-col pb-3">
+                        <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret Name</dt>
+                        <dd class="text-xs font-semibold">{{ entry.secret_name }}</dd>
+                      </div>
+                      <div class="flex flex-col pb-3">
+                        <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Message</dt>
+                        <dd class="text-xs font-semibold">{{ entry.message }}</dd>
+                      </div>
+                      <div class="flex flex-col pb-3">
+                        <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Origin</dt>
+                        <dd class="text-xs font-semibold">{{ entry.origin }}</dd>
+                      </div>
+                      {% if entry.data %}
+                        {% for key, value in entry.data.items() %}
+                          <div class="flex flex-col pb-3">
+                            <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">{{ key | capitalize }}</dt>
+                            <dd class="text-xs font-semibold">{{ value }}</dd>
+                          </div>
+                        {% endfor %}
+                      {% endif %}
+
+                    </dl>
+                  </div>
+
+
+
+
+                </td>
+
+                <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
+                  {{ entry.subsystem }}
+                </td>
+
+                <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
+                  {{ entry.message }}
+                </td>
+
+                <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
+                  {{ entry.origin }}
+                </td>
+              </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      {% else %}
+        <p class="text-sm italic">No entries</p>
+      {% endif %}
     </div>
   </div>
 </div>
 
+
 {% include '/clients/drawer_client_create.html.j2' %}
 {% include '/secrets/drawer_secret_create.html.j2' %}
+</div>
 {% endblock %}
diff --git a/packages/sshecret-admin/src/sshecret_admin/static/css/main.css b/packages/sshecret-admin/src/sshecret_admin/static/css/main.css
index fc00079..352298d 100644
--- a/packages/sshecret-admin/src/sshecret_admin/static/css/main.css
+++ b/packages/sshecret-admin/src/sshecret_admin/static/css/main.css
@@ -1465,6 +1465,9 @@
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
@@ -1804,6 +1807,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-xs {
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-black {
     --tw-shadow-color: #000;
     @supports (color: color-mix(in lab, red, red)) {
@@ -2832,6 +2839,18 @@
       line-height: var(--tw-leading, var(--text-lg--line-height));
     }
   }
+  .md\:text-sm {
+    @media (width >= 48rem) {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
+  .md\:text-xs {
+    @media (width >= 48rem) {
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+    }
+  }
   .md\:hover\:bg-transparent {
     @media (width >= 48rem) {
       &:hover {
@@ -2980,6 +2999,11 @@
       padding-block: calc(var(--spacing) * 0);
     }
   }
+  .lg\:py-16 {
+    @media (width >= 64rem) {
+      padding-block: calc(var(--spacing) * 16);
+    }
+  }
   .lg\:pr-3 {
     @media (width >= 64rem) {
       padding-right: calc(var(--spacing) * 3);
diff --git a/packages/sshecret-backend/src/sshecret_backend/audit.py b/packages/sshecret-backend/src/sshecret_backend/audit.py
index 3f0b0be..6593143 100644
--- a/packages/sshecret-backend/src/sshecret_backend/audit.py
+++ b/packages/sshecret-backend/src/sshecret_backend/audit.py
@@ -177,7 +177,7 @@ def audit_delete_secret(
         secret_id=secret.id,
         client_name=client.name,
         client_id=client.id,
-        message="Deleted secret.",
+        message="Secret removed from client",
     )
     _write_audit_log(session, request, entry, commit)