feat: add user groups

frontend/src/lib/components/advanced-table.svelte

@@ -0,0 +1,154 @@
+<script lang="ts" generics="T extends {id:string}">
+	import Checkbox from '$lib/components/ui/checkbox/checkbox.svelte';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import * as Pagination from '$lib/components/ui/pagination';
+	import * as Select from '$lib/components/ui/select';
+	import * as Table from '$lib/components/ui/table/index.js';
+	import type { Paginated } from '$lib/types/pagination.type';
+	import { debounced } from '$lib/utils/debounce-util';
+	import type { Snippet } from 'svelte';
+
+	let {
+		items,
+		selectedIds = $bindable(),
+		fetchItems,
+		columns,
+		rows
+	}: {
+		items: Paginated<T>;
+		selectedIds?: string[];
+		fetchItems: (search: string, page: number, limit: number) => Promise<Paginated<T>>;
+		columns: (string | { label: string; hidden?: boolean })[];
+		rows: Snippet<[{ item: T }]>;
+	} = $props();
+
+	let availablePageSizes: number[] = [10, 20, 50, 100];
+
+	let allChecked = $derived.by(() => {
+		if (!selectedIds || items.data.length === 0) return false;
+		for (const item of items.data) {
+			if (!selectedIds.includes(item.id)) {
+				return false;
+			}
+		}
+		return true;
+	});
+
+	const onSearch = debounced(async (searchValue: string) => {
+		items = await fetchItems(searchValue, 1, items.pagination.itemsPerPage);
+	}, 300);
+
+	async function onAllCheck(checked: boolean) {
+		if (checked) {
+			selectedIds = items.data.map((item) => item.id);
+		} else {
+			selectedIds = [];
+		}
+	}
+
+	async function onCheck(checked: boolean, id: string) {
+		if (!selectedIds) return;
+		if (checked) {
+			selectedIds = [...selectedIds, id];
+		} else {
+			selectedIds = selectedIds.filter((selectedId) => selectedId !== id);
+		}
+	}
+
+	async function onPageChange(page: number) {
+		items = await fetchItems('', page, items.pagination.itemsPerPage);
+	}
+
+	async function onPageSizeChange(size: number) {
+		items = await fetchItems('', 1, size);
+	}
+</script>
+
+<div class="w-full">
+	<Input
+		class="mb-4 max-w-sm"
+		placeholder={'Search...'}
+		type="text"
+		oninput={(e) => onSearch((e.target as HTMLInputElement).value)}
+	/>
+	<Table.Root>
+		<Table.Header>
+			<Table.Row>
+				{#if selectedIds}
+					<Table.Head>
+						<Checkbox checked={allChecked} onCheckedChange={(c) => onAllCheck(c as boolean)} />
+					</Table.Head>
+				{/if}
+				{#each columns as column}
+					{#if typeof column === 'string'}
+						<Table.Head>{column}</Table.Head>
+					{:else}
+						<Table.Head class={column.hidden ? 'sr-only' : ''}>{column.label}</Table.Head>
+					{/if}
+				{/each}
+			</Table.Row>
+		</Table.Header>
+		<Table.Body>
+			{#each items.data as item}
+				<Table.Row class={selectedIds?.includes(item.id) ? 'bg-muted/20' : ''}>
+					{#if selectedIds}
+						<Table.Cell>
+							<Checkbox
+								checked={selectedIds.includes(item.id)}
+								onCheckedChange={(c) => onCheck(c as boolean, item.id)}
+							/>
+						</Table.Cell>
+					{/if}
+					{@render rows({ item })}
+				</Table.Row>
+			{/each}
+		</Table.Body>
+	</Table.Root>
+	<div class="mt-5 flex items-center justify-between space-x-2">
+		<div class="flex items-center space-x-2">
+			<p class="text-sm font-medium">Items per page</p>
+			<Select.Root
+				selected={{
+					label: items.pagination.itemsPerPage.toString(),
+					value: items.pagination.itemsPerPage
+				}}
+				onSelectedChange={(v) => onPageSizeChange(v?.value as number)}
+			>
+				<Select.Trigger class="h-9 w-[80px]">
+					<Select.Value>{items.pagination.itemsPerPage}</Select.Value>
+				</Select.Trigger>
+				<Select.Content>
+					{#each availablePageSizes as size}
+						<Select.Item value={size}>{size}</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+		</div>
+		<Pagination.Root
+			class="mx-0 w-auto"
+			count={items.pagination.totalItems}
+			perPage={items.pagination.itemsPerPage}
+			{onPageChange}
+			page={items.pagination.currentPage}
+			let:pages
+		>
+			<Pagination.Content class="flex justify-end">
+				<Pagination.Item>
+					<Pagination.PrevButton />
+				</Pagination.Item>
+				{#each pages as page (page.key)}
+					{#if page.type !== 'ellipsis'}
+						<Pagination.Item>
+							<Pagination.Link {page} isActive={items.pagination.currentPage === page.value}>
+								{page.value}
+							</Pagination.Link>
+						</Pagination.Item>
+					{/if}
+				{/each}
+				<Pagination.Item>
+					<Pagination.NextButton />
+				</Pagination.Item>
+			</Pagination.Content>
+		</Pagination.Root>
+	</div>
+</div>

frontend/src/lib/components/form-input.svelte

@@ -3,7 +3,7 @@
 	import type { FormInput } from '$lib/utils/form-util';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { Input } from './ui/input';
+	import { Input, type FormInputEvent } from './ui/input';
 
 	let {
 		input = $bindable(),
@@ -12,6 +12,7 @@
 		disabled = false,
 		type = 'text',
 		children,
+		onInput,
 		...restProps
 	}: HTMLAttributes<HTMLDivElement> & {
 		input?: FormInput<string | boolean | number>;
@@ -19,6 +20,7 @@
 		description?: string;
 		disabled?: boolean;
 		type?: 'text' | 'password' | 'email' | 'number' | 'checkbox';
+		onInput?: (e: FormInputEvent) => void;
 		children?: Snippet;
 	} = $props();
 
@@ -34,7 +36,7 @@
 		{#if children}
 			{@render children()}
 		{:else if input}
-			<Input {id} {type} bind:value={input.value} {disabled} />
+			<Input {id} {type} bind:value={input.value} {disabled} on:input={(e) => onInput?.(e)} />
 		{/if}
 		{#if input?.error}
 			<p class="mt-1 text-sm text-red-500">{input.error}</p>

frontend/src/lib/components/ui/select/index.ts

@@ -0,0 +1,34 @@
+import { Select as SelectPrimitive } from "bits-ui";
+
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+
+const Root = SelectPrimitive.Root;
+const Group = SelectPrimitive.Group;
+const Input = SelectPrimitive.Input;
+const Value = SelectPrimitive.Value;
+
+export {
+	Root,
+	Group,
+	Input,
+	Label,
+	Item,
+	Value,
+	Content,
+	Trigger,
+	Separator,
+	//
+	Root as Select,
+	Group as SelectGroup,
+	Input as SelectInput,
+	Label as SelectLabel,
+	Item as SelectItem,
+	Value as SelectValue,
+	Content as SelectContent,
+	Trigger as SelectTrigger,
+	Separator as SelectSeparator,
+};

frontend/src/lib/components/ui/select/select-content.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { scale } from "svelte/transition";
+	import { cn, flyAndScale } from "$lib/utils/style.js";
+
+	type $$Props = SelectPrimitive.ContentProps;
+	type $$Events = SelectPrimitive.ContentEvents;
+
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let inTransition: $$Props["inTransition"] = flyAndScale;
+	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
+	export let outTransition: $$Props["outTransition"] = scale;
+	export let outTransitionConfig: $$Props["outTransitionConfig"] = {
+		start: 0.95,
+		opacity: 0,
+		duration: 50,
+	};
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Content
+	{inTransition}
+	{inTransitionConfig}
+	{outTransition}
+	{outTransitionConfig}
+	{sideOffset}
+	class={cn(
+		"bg-popover text-popover-foreground relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+>
+	<div class="w-full p-1">
+		<slot />
+	</div>
+</SelectPrimitive.Content>

frontend/src/lib/components/ui/select/select-item.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import Check from "lucide-svelte/icons/check";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = SelectPrimitive.ItemProps;
+	type $$Events = SelectPrimitive.ItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"];
+	export let label: $$Props["label"] = undefined;
+	export let disabled: $$Props["disabled"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Item
+	{value}
+	{disabled}
+	{label}
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<SelectPrimitive.ItemIndicator>
+			<Check class="h-4 w-4" />
+		</SelectPrimitive.ItemIndicator>
+	</span>
+	<slot>
+		{label || value}
+	</slot>
+</SelectPrimitive.Item>

frontend/src/lib/components/ui/select/select-label.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = SelectPrimitive.LabelProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Label
+	class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+	{...$$restProps}
+>
+	<slot />
+</SelectPrimitive.Label>

frontend/src/lib/components/ui/select/select-separator.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = SelectPrimitive.SeparatorProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Separator class={cn("bg-muted -mx-1 my-1 h-px", className)} {...$$restProps} />

frontend/src/lib/components/ui/select/select-trigger.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = SelectPrimitive.TriggerProps;
+	type $$Events = SelectPrimitive.TriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Trigger
+	class={cn(
+		"border-input bg-background ring-offset-background focus-visible:ring-ring aria-[invalid]:border-destructive data-[placeholder]:[&>span]:text-muted-foreground flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+		className
+	)}
+	{...$$restProps}
+	let:builder
+	on:click
+	on:keydown
+>
+	<slot {builder} />
+	<div>
+		<ChevronDown class="h-4 w-4 opacity-50" />
+	</div>
+</SelectPrimitive.Trigger>

frontend/src/lib/services/api-service.ts

@@ -13,7 +13,7 @@ abstract class APIService {
 		if (browser) {
 			this.api.defaults.baseURL = '/api';
 		} else {
-			this.api.defaults.baseURL = process?.env?.INTERNAL_BACKEND_URL + '/api';
+			this.api.defaults.baseURL = process!.env!.INTERNAL_BACKEND_URL + '/api';
 		}
 	}
 }

frontend/src/lib/services/audit-log-service.ts

@@ -4,14 +4,8 @@ import APIService from './api-service';
 
 class AuditLogService extends APIService {
 	async list(pagination?: PaginationRequest) {
-		const page = pagination?.page || 1;
-		const limit = pagination?.limit || 10;
-
 		const res = await this.api.get('/audit-logs', {
-			params: {
-				page,
-				limit
-			}
+			params: pagination
 		});
 		return res.data as Paginated<AuditLog>;
 	}

frontend/src/lib/services/oidc-service.ts

@@ -3,7 +3,7 @@ import type { Paginated, PaginationRequest } from '$lib/types/pagination.type';
 import APIService from './api-service';
 
 class OidcService extends APIService {
-	async authorize(clientId: string, scope: string, callbackURL : string, nonce?: string) {
+	async authorize(clientId: string, scope: string, callbackURL: string, nonce?: string) {
 		const res = await this.api.post('/oidc/authorize', {
 			scope,
 			nonce,
@@ -26,14 +26,10 @@ class OidcService extends APIService {
 	}
 
 	async listClients(search?: string, pagination?: PaginationRequest) {
-		const page = pagination?.page || 1;
-		const limit = pagination?.limit || 10;
-
 		const res = await this.api.get('/oidc/clients', {
 			params: {
 				search,
-				page,
-				limit
+				...pagination
 			}
 		});
 		return res.data as Paginated<OidcClient>;

frontend/src/lib/services/user-group-service.ts

@@ -0,0 +1,43 @@
+import type { Paginated, PaginationRequest } from '$lib/types/pagination.type';
+import type {
+	UserGroupCreate,
+	UserGroupWithUserCount,
+	UserGroupWithUsers
+} from '$lib/types/user-group.type';
+import APIService from './api-service';
+
+export default class UserGroupService extends APIService {
+	async list(search?: string, pagination?: PaginationRequest) {
+		const res = await this.api.get('/user-groups', {
+			params: {
+				search,
+				...pagination
+			}
+		});
+		return res.data as Paginated<UserGroupWithUserCount>;
+	}
+
+	async get(id: string) {
+		const res = await this.api.get(`/user-groups/${id}`);
+		return res.data as UserGroupWithUsers;
+	}
+
+	async create(user: UserGroupCreate) {
+		const res = await this.api.post('/user-groups', user);
+		return res.data as UserGroupWithUsers;
+	}
+
+	async update(id: string, user: UserGroupCreate) {
+		const res = await this.api.put(`/user-groups/${id}`, user);
+		return res.data as UserGroupWithUsers;
+	}
+
+	async remove(id: string) {
+		await this.api.delete(`/user-groups/${id}`);
+	}
+
+	async updateUsers(id: string, userIds: string[]) {
+		const res = await this.api.put(`/user-groups/${id}/users`, { userIds });
+		return res.data as UserGroupWithUsers;
+	}
+}

frontend/src/lib/services/user-service.ts

@@ -4,14 +4,10 @@ import APIService from './api-service';
 
 export default class UserService extends APIService {
 	async list(search?: string, pagination?: PaginationRequest) {
-		const page = pagination?.page || 1;
-		const limit = pagination?.limit || 10;
-
 		const res = await this.api.get('/users', {
 			params: {
 				search,
-				page,
-				limit
+				...pagination
 			}
 		});
 		return res.data as Paginated<User>;

frontend/src/lib/types/pagination.type.ts

@@ -7,6 +7,7 @@ export type PaginationResponse = {
 	totalPages: number;
 	totalItems: number;
 	currentPage: number;
+	itemsPerPage: number;
 };
 
 export type Paginated<T> = {

frontend/src/lib/types/user-group.type.ts

@@ -0,0 +1,18 @@
+import type { User } from './user.type';
+
+export type UserGroup = {
+	id: string;
+	friendlyName: string;
+	name: string;
+	createdAt: string;
+};
+
+export type UserGroupWithUsers = UserGroup & {
+	users: User[];
+};
+
+export type UserGroupWithUserCount = UserGroup & {
+	userCount: number;
+};
+
+export type UserGroupCreate = Pick<UserGroup, 'friendlyName' | 'name'>;

frontend/src/routes/settings/+layout.svelte

@@ -18,6 +18,7 @@
 		links = [
 			...links,
 			{ href: '/settings/admin/users', label: 'Users' },
+			{ href: '/settings/admin/user-groups', label: 'User Groups' },
 			{ href: '/settings/admin/oidc-clients', label: 'OIDC Clients' },
 			{ href: '/settings/admin/application-configuration', label: 'Application Configuration' }
 		];

frontend/src/routes/settings/admin/application-configuration/application-image.svelte

@@ -8,7 +8,7 @@
 		id,
 		imageClass,
 		label,
-		image = $bindable<File | null>(null),
+		image = $bindable(),
 		imageURL,
 		accept = 'image/png, image/jpeg, image/svg+xml',
 		...restProps

frontend/src/routes/settings/admin/user-groups/+page.server.ts

@@ -0,0 +1,8 @@
+import UserGroupService from '$lib/services/user-group-service';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ cookies }) => {
+	const userGroupService = new UserGroupService(cookies.get('access_token'));
+	const userGroups = await userGroupService.list();
+	return userGroups;
+};

frontend/src/routes/settings/admin/user-groups/+page.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { Button } from '$lib/components/ui/button';
+	import * as Card from '$lib/components/ui/card';
+	import UserGroupService from '$lib/services/user-group-service';
+	import type { Paginated } from '$lib/types/pagination.type';
+	import type { UserGroupCreate, UserGroupWithUserCount } from '$lib/types/user-group.type';
+	import { axiosErrorToast } from '$lib/utils/error-util';
+	import { LucideMinus } from 'lucide-svelte';
+	import { toast } from 'svelte-sonner';
+	import { slide } from 'svelte/transition';
+	import UserGroupForm from './user-group-form.svelte';
+	import UserGroupList from './user-group-list.svelte';
+
+	let { data } = $props();
+	let userGroups: Paginated<UserGroupWithUserCount> = $state(data);
+	let expandAddUserGroup = $state(false);
+
+	const userGroupService = new UserGroupService();
+
+	async function createUserGroup(userGroup: UserGroupCreate) {
+		let success = true;
+		await userGroupService
+			.create(userGroup)
+			.then((createdUserGroup) => {
+				toast.success('User group created successfully');
+				goto(`/settings/admin/user-groups/${createdUserGroup.id}`);
+			})
+			.catch((e) => {
+				axiosErrorToast(e);
+				success = false;
+			});
+		return success;
+	}
+</script>
+
+<svelte:head>
+	<title>User Groups</title>
+</svelte:head>
+
+<Card.Root>
+	<Card.Header>
+		<div class="flex items-center justify-between">
+			<div>
+				<Card.Title>Create User Group</Card.Title>
+				<Card.Description>Create a new group that can be assigned to users.</Card.Description>
+			</div>
+			{#if !expandAddUserGroup}
+				<Button on:click={() => (expandAddUserGroup = true)}>Add Group</Button>
+			{:else}
+				<Button class="h-8 p-3" variant="ghost" on:click={() => (expandAddUserGroup = false)}>
+					<LucideMinus class="h-5 w-5" />
+				</Button>
+			{/if}
+		</div>
+	</Card.Header>
+	{#if expandAddUserGroup}
+		<div transition:slide>
+			<Card.Content>
+				<UserGroupForm callback={createUserGroup} />
+			</Card.Content>
+		</div>
+	{/if}
+</Card.Root>
+
+<Card.Root>
+	<Card.Header>
+		<Card.Title>Manage User Groups</Card.Title>
+	</Card.Header>
+	<Card.Content>
+		<UserGroupList {userGroups} />
+	</Card.Content>
+</Card.Root>

frontend/src/routes/settings/admin/user-groups/[id]/+page.server.ts

@@ -0,0 +1,9 @@
+import UserGroupService from '$lib/services/user-group-service';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params, cookies }) => {
+	const userGroupService = new UserGroupService(cookies.get('access_token'));
+	const userGroup = await userGroupService.get(params.id);
+
+	return { userGroup };
+};

frontend/src/routes/settings/admin/user-groups/[id]/+page.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import * as Card from '$lib/components/ui/card';
+	import UserGroupService from '$lib/services/user-group-service';
+	import UserService from '$lib/services/user-service';
+	import type { UserGroupCreate } from '$lib/types/user-group.type';
+	import { axiosErrorToast } from '$lib/utils/error-util';
+	import { LucideChevronLeft } from 'lucide-svelte';
+	import { toast } from 'svelte-sonner';
+	import UserGroupForm from '../user-group-form.svelte';
+	import UserSelection from '../user-selection.svelte';
+
+	let { data } = $props();
+	let userGroup = $state({
+		...data.userGroup,
+		userIds: data.userGroup.users.map((u) => u.id)
+	});
+
+	const userGroupService = new UserGroupService();
+	const userService = new UserService();
+
+	async function updateUserGroup(updatedUserGroup: UserGroupCreate) {
+		let success = true;
+		await userGroupService
+			.update(userGroup.id, updatedUserGroup)
+			.then(() => toast.success('User Group updated successfully'))
+			.catch((e) => {
+				axiosErrorToast(e);
+				success = false;
+			});
+
+		return success;
+	}
+
+	async function updateUserGroupUsers(userIds: string[]) {
+		await userGroupService
+			.updateUsers(userGroup.id, userIds)
+			.then(() => toast.success('Users updated successfully'))
+			.catch((e) => {
+				axiosErrorToast(e);
+			});
+	}
+</script>
+
+<svelte:head>
+	<title>User Group Details {userGroup.name}</title>
+</svelte:head>
+
+<div>
+	<a class="text-muted-foreground flex text-sm" href="/settings/admin/user-groups"
+		><LucideChevronLeft class="h-5 w-5" /> Back</a
+	>
+</div>
+<Card.Root>
+	<Card.Header>
+		<Card.Title>Meta data</Card.Title>
+	</Card.Header>
+
+	<Card.Content>
+		<UserGroupForm existingUserGroup={userGroup} callback={updateUserGroup} />
+	</Card.Content>
+</Card.Root>
+
+<Card.Root>
+	<Card.Header>
+		<Card.Title>Users</Card.Title>
+		<Card.Description>Assign users to this group.</Card.Description>
+	</Card.Header>
+
+	<Card.Content>
+		{#await userService.list() then users}
+			<UserSelection {users} bind:selectedUserIds={userGroup.userIds} />
+		{/await}
+		<div class="mt-5 flex justify-end">
+			<Button on:click={() => updateUserGroupUsers(userGroup.userIds)}>Save</Button>
+		</div>
+	</Card.Content>
+</Card.Root>

frontend/src/routes/settings/admin/user-groups/user-group-form.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import FormInput from '$lib/components/form-input.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import type { UserGroupCreate } from '$lib/types/user-group.type';
+	import { createForm } from '$lib/utils/form-util';
+	import { z } from 'zod';
+
+	let {
+		callback,
+		existingUserGroup
+	}: {
+		existingUserGroup?: UserGroupCreate;
+		callback: (userGroup: UserGroupCreate) => Promise<boolean>;
+	} = $props();
+
+	let isLoading = $state(false);
+	let hasManualNameEdit = $state(!!existingUserGroup?.friendlyName);
+
+	const userGroup = {
+		name: existingUserGroup?.name || '',
+		friendlyName: existingUserGroup?.friendlyName || ''
+	};
+
+	const formSchema = z.object({
+		friendlyName: z.string().min(2).max(30),
+		name: z
+			.string()
+			.min(2)
+			.max(30)
+			.regex(/^[a-z0-9_]+$/, 'Name can only contain lowercase letters, numbers, and underscores')
+	});
+	type FormSchema = typeof formSchema;
+
+	const { inputs, ...form } = createForm<FormSchema>(formSchema, userGroup);
+
+	function onFriendlyNameInput(e: any) {
+		if (!hasManualNameEdit) {
+			$inputs.name.value = e.target!.value.toLowerCase().replace(/[^a-z0-9_]/g, '_');
+		}
+	}
+
+	function onNameInput(_: Event) {
+		hasManualNameEdit = true;
+	}
+
+	async function onSubmit() {
+		const data = form.validate();
+		if (!data) return;
+		isLoading = true;
+		const success = await callback(data);
+		// Reset form if user group was successfully created
+		if (success && !existingUserGroup) {
+			form.reset();
+			hasManualNameEdit = false;
+		}
+		isLoading = false;
+	}
+</script>
+
+<form onsubmit={onSubmit}>
+	<div class="flex flex-col gap-3 sm:flex-row">
+		<div class="w-full">
+			<FormInput
+				label="Friendly Name"
+				description="Name that will be displayed in the UI"
+				bind:input={$inputs.friendlyName}
+				onInput={onFriendlyNameInput}
+			/>
+		</div>
+		<div class="w-full">
+			<FormInput
+				label="Name"
+				description={`Name that will be in the "userGroup" claim`}
+				bind:input={$inputs.name}
+				onInput={onNameInput}
+			/>
+		</div>
+	</div>
+	<div class="mt-5 flex justify-end">
+		<Button {isLoading} type="submit">Save</Button>
+	</div>
+</form>

frontend/src/routes/settings/admin/user-groups/user-group-list.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import AdvancedTable from '$lib/components/advanced-table.svelte';
+	import { openConfirmDialog } from '$lib/components/confirm-dialog/';
+	import { Button } from '$lib/components/ui/button';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import * as Table from '$lib/components/ui/table';
+	import UserGroupService from '$lib/services/user-group-service';
+	import type { Paginated } from '$lib/types/pagination.type';
+	import type { UserGroup, UserGroupWithUserCount } from '$lib/types/user-group.type';
+	import { axiosErrorToast } from '$lib/utils/error-util';
+	import { LucidePencil, LucideTrash } from 'lucide-svelte';
+	import Ellipsis from 'lucide-svelte/icons/ellipsis';
+	import { toast } from 'svelte-sonner';
+
+	let { userGroups: initialUserGroups }: { userGroups: Paginated<UserGroupWithUserCount> } =
+		$props();
+
+	let userGroups = $state<Paginated<UserGroupWithUserCount>>(initialUserGroups);
+
+	const userGroupService = new UserGroupService();
+
+	async function deleteUserGroup(userGroup: UserGroup) {
+		openConfirmDialog({
+			title: `Delete ${userGroup.name}`,
+			message: 'Are you sure you want to delete this user group?',
+			confirm: {
+				label: 'Delete',
+				destructive: true,
+				action: async () => {
+					try {
+						await userGroupService.remove(userGroup.id);
+						userGroups = await userGroupService.list();
+					} catch (e) {
+						axiosErrorToast(e);
+					}
+					toast.success('User group deleted successfully');
+				}
+			}
+		});
+	}
+
+	async function fetchItems(search: string, page: number, limit: number) {
+		return userGroupService.list(search, { page, limit });
+	}
+</script>
+
+<AdvancedTable items={userGroups} {fetchItems} columns={['Friendly Name', 'Name', 'User Count', {label: "Actions", hidden: true}]}>
+	{#snippet rows({ item })}
+		<Table.Cell>{item.friendlyName}</Table.Cell>
+		<Table.Cell>{item.name}</Table.Cell>
+		<Table.Cell>{item.userCount}</Table.Cell>
+		<Table.Cell class="flex justify-end">
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger asChild let:builder>
+					<Button aria-haspopup="true" size="icon" variant="ghost" builders={[builder]}>
+						<Ellipsis class="h-4 w-4" />
+						<span class="sr-only">Toggle menu</span>
+					</Button>
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content align="end">
+					<DropdownMenu.Item href="/settings/admin/user-groups/{item.id}"
+						><LucidePencil class="mr-2 h-4 w-4" /> Edit</DropdownMenu.Item
+					>
+					<DropdownMenu.Item
+						class="text-red-500 focus:!text-red-700"
+						on:click={() => deleteUserGroup(item)}
+						><LucideTrash class="mr-2 h-4 w-4" />Delete</DropdownMenu.Item
+					>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		</Table.Cell>
+	{/snippet}
+</AdvancedTable>

frontend/src/routes/settings/admin/user-groups/user-selection.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import AdvancedTable from '$lib/components/advanced-table.svelte';
+	import * as Table from '$lib/components/ui/table';
+	import UserService from '$lib/services/user-service';
+	import type { Paginated } from '$lib/types/pagination.type';
+	import type { User } from '$lib/types/user.type';
+
+	let {
+		users: initialUsers,
+		selectedUserIds = $bindable()
+	}: { users: Paginated<User>; selectedUserIds: string[] } = $props();
+
+	const userService = new UserService();
+
+	let users = $state(initialUsers);
+
+	function fetchItems(search: string, page: number, limit: number) {
+		return userService.list(search, { page, limit });
+	}
+</script>
+
+<AdvancedTable
+	items={users}
+	{fetchItems}
+	columns={['Name', 'Email']}
+	bind:selectedIds={selectedUserIds}
+>
+	{#snippet rows({ item })}
+		<Table.Cell>{item.firstName} {item.lastName}</Table.Cell>
+		<Table.Cell>{item.email}</Table.Cell>
+	{/snippet}
+</AdvancedTable>

frontend/src/routes/settings/admin/users/+page.svelte

@@ -9,7 +9,7 @@
 	import { LucideMinus } from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
 	import { slide } from 'svelte/transition';
-	import CreateUser from './user-form.svelte';
+	import UserForm from './user-form.svelte';
 	import UserList from './user-list.svelte';
 
 	let { data } = $props();
@@ -56,7 +56,7 @@
 	{#if expandAddUser}
 		<div transition:slide>
 			<Card.Content>
-				<CreateUser callback={createUser} />
+				<UserForm callback={createUser} />
 			</Card.Content>
 		</div>
 	{/if}