Show active check and last verified date on dashboard license table

src/routes/(protected)/(user)/dashboard/+page.svelte

@@ -41,6 +41,7 @@
 							<th class="px-6 py-3 font-semibold">Key</th>
 							<th class="px-6 py-3 font-semibold">Status</th>
 							<th class="px-6 py-3 font-semibold">Created</th>
+							<th class="px-6 py-3 font-semibold">Last verified</th>
 						</tr>
 					</thead>
 					<tbody class="divide-y divide-slate-100">
@@ -48,15 +49,18 @@
 							<tr class="hover:bg-slate-50">
 								<td class="px-6 py-4 font-mono text-slate-800">{key.key}</td>
 								<td class="px-6 py-4">
-									<span
+									{#if key.active}
-										class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {key.active
+										<span class="text-lg text-green-600" title="Active" aria-label="Active">☑</span>
-											? 'bg-green-100 text-green-700'
+									{:else}
-											: 'bg-slate-100 text-slate-600'}"
+										<span class="text-lg text-slate-300" title="Inactive" aria-label="Inactive"
+											>☐</span
 										>
-										{key.active ? 'Active' : 'Inactive'}
+									{/if}
-									</span>
 								</td>
 								<td class="px-6 py-4 text-slate-600">{formatDate(key.createdAt)}</td>
+								<td class="px-6 py-4 text-slate-600">
+									{key.lastValidatedAt ? formatDate(key.lastValidatedAt) : 'Never'}
+								</td>
 							</tr>
 						{/each}
 					</tbody>
@@ -68,15 +72,20 @@
 						<li class="flex flex-col gap-2 px-4 py-4">
 							<div class="flex items-center justify-between gap-4">
 								<span class="min-w-0 font-mono text-sm break-all text-slate-800">{key.key}</span>
-								<span
+								<span class="shrink-0">
-									class="shrink-0 rounded-full px-2.5 py-0.5 text-xs font-medium {key.active
+									{#if key.active}
-										? 'bg-green-100 text-green-700'
+										<span class="text-lg text-green-600" title="Active" aria-label="Active">☑</span>
-										: 'bg-slate-100 text-slate-600'}"
+									{:else}
+										<span class="text-lg text-slate-300" title="Inactive" aria-label="Inactive"
+											>☐</span
 										>
-									{key.active ? 'Active' : 'Inactive'}
+									{/if}
 								</span>
 							</div>
 							<span class="text-xs text-slate-500">Created {formatDate(key.createdAt)}</span>
+							<span class="text-xs text-slate-500">
+								Last verified {key.lastValidatedAt ? formatDate(key.lastValidatedAt) : 'Never'}
+							</span>
 						</li>
 					{/each}
 				</ul>