Restructure route organization

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

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { PageProps } from './$types';
+
+	let { data }: PageProps = $props();
+</script>
+
+<div class="flex h-full min-h-0 flex-col gap-6 p-6">
+	<h1 class="text-2xl font-semibold text-gray-900">License Keys</h1>
+
+	{#if data.licenseKeys.length > 0}
+		<div class="overflow-x-auto rounded-lg border border-gray-200">
+			<table class="min-w-full divide-y divide-gray-200">
+				<thead class="bg-gray-50">
+					<tr>
+						<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+							Key
+						</th>
+						<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+							Level
+						</th>
+						<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+							Status
+						</th>
+					</tr>
+				</thead>
+				<tbody class="divide-y divide-gray-200 bg-white">
+					{#each data.licenseKeys as key}
+						<tr>
+							<td class="whitespace-nowrap px-6 py-4 font-mono text-sm text-gray-900">
+								{key.key}
+							</td>
+							<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+								{key.level}
+							</td>
+							<td class="whitespace-nowrap px-6 py-4 text-sm">
+								<span
+									class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 {key.active
+										? 'bg-green-100 text-green-800'
+										: 'bg-red-100 text-red-800'}"
+								>
+									{key.active ? 'Active' : 'Inactive'}
+								</span>
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{:else}
+		<div class="flex flex-1 items-center justify-center">
+			<p class="text-lg text-gray-500">You don't have any license keys yet.</p>
+		</div>
+	{/if}
+</div>