🚧 Fix dashboard view

frontend/src/views/Dashboard.vue

@@ -3,6 +3,7 @@ import { onMounted, ref } from 'vue'
 import { Cpu, Inbox, MessageSquareText } from 'lucide-vue-next'
 import { api } from '../api'
 import type { Device, MessagePage } from '../api'
+import { formatTime } from '../format'
 import { showError } from '../store'
 
 const messageCount = ref<number | null>(null)
@@ -60,17 +61,32 @@ onMounted(async () => {
         <tr>
           <th>Received</th>
           <th>Device</th>
-          <th>Payload</th>
+          <th>Payload + attributes</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="m in latest" :key="m.id">
-          <td class="mono">{{ new Date(m.received_at).toLocaleString() }}</td>
+          <td class="mono">{{ formatTime(m.received_at) }}</td>
           <td>
             <router-link :to="`/devices/${m.imei}`">{{ m.device }}</router-link>
           </td>
           <td>
-            <pre class="json">{{ JSON.stringify(m.payload) }}</pre>
+            <details>
+              <summary class="muted">payload</summary>
+              <pre class="json">{{ JSON.stringify(m.payload, null, 2) }}</pre>
+              <p
+                v-if="m.attributes && Object.keys(m.attributes).length"
+                class="muted"
+                style="margin-bottom: 0.25rem"
+              >
+                attributes resolved as of the message's device time (apply offsets to
+                payload values yourself):
+              </p>
+              <pre
+                v-if="m.attributes && Object.keys(m.attributes).length"
+                class="json"
+              >{{ JSON.stringify(m.attributes, null, 2) }}</pre>
+            </details>
           </td>
         </tr>
       </tbody>