Create a per-user admin page to inspect users

Add page to allow admins to inspect all of the details stored on the
server of a user account.  For now this is just the UserDetails, but
in the future this is planned to be expanded to also show sessions
and logs.

pages/admin/index.vue

@@ -0,0 +1,115 @@
+<!--
+	SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
+	SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<main>
+		<h1>Admin</h1>
+		<Tabs
+			:tabs
+			default="users"
+		>
+			<template #users>
+				<TableUsers />
+			</template>
+			<template #database>
+				<p>
+					To backup the database you can create and download a
+					database snapshot. This will export all schedule and user
+					data stored on the server into a single JSON file that can
+					then later be used to replace the exsting content of the
+					database to restore the system to the state it was in when
+					the snapshot was created.
+				</p>
+				<form
+					action="/api/admin/database-export"
+					method="post"
+				>
+					<p>
+						<button type="submit">
+							Download snapshot
+						</button>
+					</p>
+				</form>
+				<fieldset>
+					<legend>Restore Database</legend>
+					<p>
+						To restore the system to a previous state you can load a
+						database snapshot obtained from previously running the
+						database snapshot tool above. This will delete all
+						changes including new events, shifts, users and user
+						data that has created since the snapshot was created.
+					</p>
+					<form
+						action="/api/admin/database-import"
+						enctype="multipart/form-data"
+						method="post"
+					>
+						<p>
+							<label>
+								Database snapshot:
+								<input name="snapshot" type="file">
+							</label>
+						</p>
+						<p>
+							<button type="submit">
+								Restore database
+							</button>
+						</p>
+					</form>
+				</fieldset>
+				<fieldset>
+					<legend>Danger Zone</legend>
+					<p>
+						If you wish to start over with the schedule, you can use
+						this button to delete the current schedule.
+					</p>
+					<form
+						action="/api/admin/delete-schedule"
+						method="post"
+					>
+						<p>
+							<button type="submit">
+								Delete schedule
+							</button>
+						</p>
+					</form>
+					<p>
+						If you wish to see a demo of how the system can be used
+						you can replace the existing schedule with a generated
+						demo schedule that shows off all the features. <b>This
+						will delete all existing data including users!</b>
+					</p>
+					<form
+						action="/api/admin/database-import-demo"
+						method="post"
+					>
+						<p>
+							<button type="submit">
+								Replace with demo
+							</button>
+						</p>
+					</form>
+				</fieldset>
+			</template>
+		</Tabs>
+	</main>
+</template>
+
+<script lang="ts" setup>
+useHead({
+	title: "Admin",
+});
+
+const usersStore = useUsersStore();
+await usersStore.fetch();
+
+const tabs = [
+	{ id: "users", title: "Users" },
+	{ id: "database", title: "Database" },
+];
+</script>
+
+<style>
+
+</style>