First

frontend/src/routes/clinics/+page.js

@@ -0,0 +1,10 @@
+/** @type {import('./$types').PageLoad} */
+export async function load({ params, fetch }) {
+	let clinics = await (await fetch('/api/clinic/list')).json();
+	clinics.reduce((acc, item) => (acc[item.name] = item, acc), clinics);
+	let selection = await (await fetch('/api/config/user/clinics')).json();
+	selection.forEach(x => clinics[x] ? clinics[x].active = true : false);
+	return {
+		clinics
+	};
+}

frontend/src/routes/clinics/+page.svelte

@@ -0,0 +1,45 @@
+<script>
+	export let data;
+	let filter = '';
+
+	$: filter = filter.toUpperCase();
+	$: selection = data.clinics.filter(row => row.active);
+	$: {
+		fetch('/api/config/user/clinics', { method: 'PUT', headers: { 'Content-type': 'application/json' }, body: JSON.stringify(selection.map(row => row.name)) });
+	}
+</script>
+
+<svelte:head>
+	<title>Clinics</title>
+</svelte:head>
+
+<h1>Clinics</h1>
+<div class="card">
+	<div class="input-group">
+		<span class="input-group-text">🔎</span>
+		<input type="text" class="form-control" placeholder="Clinic" bind:value={filter} />
+	</div>
+	{#if filter.length > 0}
+		<ul class="list-group list-group-flush">
+			{#each data.clinics as row}{#if (row.name.charAt(0) != 'Z') && (row.name != 'DELETED CLINIC') && (row.name != 'CLINIC DELETED') && (row.name.startsWith(filter))}<li class="list-group-item" class:active={row.active} on:click={evt => row.active = !row.active}>{row.name}</li>{/if}{/each}
+		</ul>
+	{/if}
+	{#if selection.length > 0}
+		<div class="card-footer">
+			{#each selection as row}<span class="badge text-bg-primary">{row.name} <span on:click={evt => data.clinics[row.name].active = false}>❌</span></span>{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.list-group {
+		max-height: 50vh;
+		overflow-y: auto;
+	}
+	.list-group-item {
+		cursor: default;
+	}
+	.card-footer .badge:not(:last-child) {
+		margin-right: 0.25em;
+	}
+</style>