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

@@ -44,6 +44,7 @@
 						class="border-b border-slate-200 bg-slate-50 text-xs tracking-wide text-slate-500 uppercase dark:border-slate-800 dark:bg-slate-950 dark:text-slate-400"
 					>
 						<tr>
+							<th class="px-6 py-3 font-semibold">System Name</th>
 							<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>
@@ -53,6 +54,13 @@
 					<tbody class="divide-y divide-slate-100">
 						{#each data.licenseKeys as key (key.key)}
 							<tr class="hover:bg-slate-50 dark:hover:bg-slate-800">
+								<td class="px-6 py-4 text-slate-800 dark:text-slate-200">
+									{#if key.systemName}
+										{key.systemName}
+									{:else}
+										<span class="text-slate-400 dark:text-slate-500">Unnamed system</span>
+									{/if}
+								</td>
 								<td class="px-6 py-4 font-mono text-slate-800 dark:text-slate-200">{key.key}</td>
 								<td class="px-6 py-4">
 									{#if key.active}
@@ -104,6 +112,9 @@
 									{/if}
 								</span>
 							</div>
+							<span class="text-xs text-slate-500 dark:text-slate-400">
+								{key.systemName ?? 'Unnamed system'}
+							</span>
 							<span class="text-xs text-slate-500 dark:text-slate-400"
 								>Created {formatDate(key.createdAt)}</span
 							>

src/routes/(protected)/admin/license-keys/+page.svelte

@@ -14,6 +14,7 @@
 
 	const columns: DataTableColumn[] = [
 		{ label: 'Key', value: (r) => r.key },
+		{ label: 'System Name', value: (r) => (r.systemName as string | null) ?? 'Unnamed system' },
 		{
 			label: 'User',
 			value: (r) => (r.user as Record<string, unknown> | undefined)?.name ?? ''