From a230be21c30187563971fd90a709e1fc1772307a Mon Sep 17 00:00:00 2001
From: Liam Keegan <liam@keegan.ch>
Date: Thu, 26 Sep 2024 09:31:51 +0200
Subject: [PATCH] Add initial support for user questions

- backend
  - add models/questions with UserQuestion and UserQuestionText
  - add /user-questions endpoint to get list of questions
  - add /admin/user-questions endpoints to create, update and delete questions
- admin frontend
  - add UserQuestions component to edit list of questions
  - only support text and select inputs for now
  - refactor admin frontend
---
 frontend/src/lib/admin.ts                     |  99 ++++++++++++-
 .../src/lib/components/Admin/AddButton.svelte |  12 ++
 .../lib/components/Admin/DeleteButton.svelte  |  11 ++
 ...neGroupModal.svelte => DeleteModal.svelte} |  18 +--
 .../lib/components/Admin/EditButton.svelte    |  11 ++
 .../Admin/EditMilestoneGroupModal.svelte      |   2 +-
 .../Admin/EditUserQuestionModal.svelte        | 139 ++++++++++++++++++
 .../lib/components/Admin/InputPreview.svelte  |  30 ++++
 .../src/lib/components/Admin/Languages.svelte |  38 +++--
 .../components/Admin/MilestoneGroups.svelte   |  47 +++---
 .../lib/components/Admin/UserQuestions.svelte | 100 +++++++++++++
 frontend/src/lib/stores/adminStore.ts         |   2 +
 frontend/src/locales/de.json                  |   9 +-
 frontend/src/locales/en.json                  |   9 +-
 frontend/src/routes/admin/+page.svelte        |  44 +++++-
 mondey_backend/src/mondey_backend/main.py     |   2 +
 .../src/mondey_backend/models/milestones.py   |   2 -
 .../src/mondey_backend/models/questions.py    |  54 +++++++
 .../src/mondey_backend/routers/admin.py       |  48 +++++-
 .../src/mondey_backend/routers/questions.py   |  24 +++
 .../src/mondey_backend/routers/users.py       |   1 +
 .../src/mondey_backend/routers/utils.py       |  11 +-
 mondey_backend/src/mondey_backend/settings.py |   2 +-
 23 files changed, 647 insertions(+), 68 deletions(-)
 create mode 100644 frontend/src/lib/components/Admin/AddButton.svelte
 create mode 100644 frontend/src/lib/components/Admin/DeleteButton.svelte
 rename frontend/src/lib/components/Admin/{DeleteMilestoneGroupModal.svelte => DeleteModal.svelte} (57%)
 create mode 100644 frontend/src/lib/components/Admin/EditButton.svelte
 create mode 100644 frontend/src/lib/components/Admin/EditUserQuestionModal.svelte
 create mode 100644 frontend/src/lib/components/Admin/InputPreview.svelte
 create mode 100644 frontend/src/lib/components/Admin/UserQuestions.svelte
 create mode 100644 mondey_backend/src/mondey_backend/models/questions.py
 create mode 100644 mondey_backend/src/mondey_backend/routers/questions.py

diff --git a/frontend/src/lib/admin.ts b/frontend/src/lib/admin.ts
index 1877456b..dd32d488 100644
--- a/frontend/src/lib/admin.ts
+++ b/frontend/src/lib/admin.ts
@@ -1,4 +1,4 @@
-import { milestoneGroups } from '$lib/stores/adminStore';
+import { milestoneGroups, userQuestions } from '$lib/stores/adminStore';
 
 export async function refreshMilestoneGroups() {
 	console.log('refreshMilestoneGroups...');
@@ -54,7 +54,7 @@ export async function updateMilestoneGroup(milestoneGroup) {
 	console.log('updateMilestoneGroup...');
 	console.log(milestoneGroup);
 	try {
-		const res = await fetch(`${import.meta.env.VITE_MONDEY_API_URL}/admin/milestone-groups`, {
+		const res = await fetch(`${import.meta.env.VITE_MONDEY_API_URL}/admin/milestone-groups/`, {
 			method: 'PUT',
 			credentials: 'include',
 			headers: {
@@ -125,3 +125,98 @@ export async function deleteMilestoneGroup(milestoneGroupId: number | null) {
 export function milestoneGroupImageUrl(id: number) {
 	return `${import.meta.env.VITE_MONDEY_API_URL}/static/mg${id}.jpg`;
 }
+
+export async function refreshUserQuestions() {
+	console.log('refreshQuestions...');
+	try {
+		const res = await fetch(`${import.meta.env.VITE_MONDEY_API_URL}/admin/user-questions/`, {
+			method: 'GET',
+			credentials: 'include',
+			headers: {
+				'Content-Type': 'application/json',
+				Accept: 'application/json'
+			}
+		});
+		const json = await res.json();
+		console.log(json);
+		if (res.status === 200) {
+			userQuestions.set(json);
+		} else {
+			console.log('Failed to get UserQuestions');
+			userQuestions.set([]);
+		}
+	} catch (e) {
+		console.error(e);
+		userQuestions.set([]);
+	}
+}
+
+export async function newUserQuestion() {
+	try {
+		const res = await fetch(`${import.meta.env.VITE_MONDEY_API_URL}/admin/user-questions/`, {
+			method: 'POST',
+			credentials: 'include',
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		});
+		if (res.status === 200) {
+			const newUserQuestion = await res.json();
+			console.log(newUserQuestion);
+			await refreshUserQuestions();
+			return newUserQuestion;
+		} else {
+			console.log('Failed to create new Question');
+		}
+	} catch (e) {
+		console.error(e);
+	}
+}
+
+export async function updateUserQuestion(userQuestion) {
+	console.log('updateUserQuestion...');
+	console.log(userQuestion);
+	try {
+		const res = await fetch(`${import.meta.env.VITE_MONDEY_API_URL}/admin/user-questions/`, {
+			method: 'PUT',
+			credentials: 'include',
+			headers: {
+				'Content-Type': 'application/json',
+				Accept: 'application/json'
+			},
+			body: JSON.stringify(userQuestion)
+		});
+		if (res.status === 200) {
+			const updatedUserQuestion = await res.json();
+			console.log(updatedUserQuestion);
+			await refreshUserQuestions();
+			return updatedUserQuestion;
+		} else {
+			console.log('Failed to create new UserQuestion');
+		}
+	} catch (e) {
+		console.error(e);
+	}
+	return null;
+}
+
+export async function deleteUserQuestion(id: number) {
+	try {
+		const res = await fetch(`${import.meta.env.VITE_MONDEY_API_URL}/admin/user-questions/${id}`, {
+			method: 'DELETE',
+			credentials: 'include',
+			headers: {
+				'Content-Type': 'application/json',
+				Accept: 'application/json'
+			}
+		});
+		if (res.status === 200) {
+			await refreshUserQuestions();
+		} else {
+			console.log('Failed to delete Question');
+		}
+	} catch (e) {
+		console.error(e);
+	}
+	return null;
+}
diff --git a/frontend/src/lib/components/Admin/AddButton.svelte b/frontend/src/lib/components/Admin/AddButton.svelte
new file mode 100644
index 00000000..4047d2d9
--- /dev/null
+++ b/frontend/src/lib/components/Admin/AddButton.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Button } from 'flowbite-svelte';
+	import { PlusOutline } from 'flowbite-svelte-icons';
+	import { _ } from 'svelte-i18n';
+
+	export let onClick: () => void;
+	export let disabled: boolean = false;
+</script>
+
+<Button color="blue" {disabled} on:click={onClick}
+	><PlusOutline class="me-2 h-5 w-5" /> {$_('admin.add')}</Button
+>
diff --git a/frontend/src/lib/components/Admin/DeleteButton.svelte b/frontend/src/lib/components/Admin/DeleteButton.svelte
new file mode 100644
index 00000000..ed5fdc43
--- /dev/null
+++ b/frontend/src/lib/components/Admin/DeleteButton.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Button } from 'flowbite-svelte';
+	import { TrashBinOutline } from 'flowbite-svelte-icons';
+	import { _ } from 'svelte-i18n';
+
+	export let onClick: () => void;
+</script>
+
+<Button color="red" on:click={onClick}
+	><TrashBinOutline class="me-2 h-5 w-5" /> {$_('admin.delete')}</Button
+>
diff --git a/frontend/src/lib/components/Admin/DeleteMilestoneGroupModal.svelte b/frontend/src/lib/components/Admin/DeleteModal.svelte
similarity index 57%
rename from frontend/src/lib/components/Admin/DeleteMilestoneGroupModal.svelte
rename to frontend/src/lib/components/Admin/DeleteModal.svelte
index f678fa84..0da3ba1d 100644
--- a/frontend/src/lib/components/Admin/DeleteMilestoneGroupModal.svelte
+++ b/frontend/src/lib/components/Admin/DeleteModal.svelte
@@ -1,25 +1,21 @@
 <script lang="ts">
 	import { Button, Modal } from 'flowbite-svelte';
 	import { ExclamationCircleOutline } from 'flowbite-svelte-icons';
-	import { deleteMilestoneGroup } from '$lib/admin';
+	import { _ } from 'svelte-i18n';
 
 	export let open: boolean;
-	export let groupId: number | null;
+	export let onClick: () => void;
 </script>
 
 <Modal bind:open size="xs" autoclose>
 	<div class="text-center">
 		<ExclamationCircleOutline class="mx-auto mb-4 h-12 w-12 text-gray-400 dark:text-gray-200" />
 		<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
-			Are you sure you want to delete this MilestoneGroup?
+			{$_('admin.delete-are-you-sure')}
 		</h3>
-		<Button
-			color="red"
-			class="me-2"
-			on:click={() => {
-				deleteMilestoneGroup(groupId);
-			}}>Yes, I'm sure</Button
-		>
-		<Button color="alternative">No, cancel</Button>
+		<Button color="red" class="me-2" on:click={onClick}>
+			{$_('admin.yes-sure')}
+		</Button>
+		<Button color="alternative">{$_('admin.no-cancel')}</Button>
 	</div>
 </Modal>
diff --git a/frontend/src/lib/components/Admin/EditButton.svelte b/frontend/src/lib/components/Admin/EditButton.svelte
new file mode 100644
index 00000000..899133fa
--- /dev/null
+++ b/frontend/src/lib/components/Admin/EditButton.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Button } from 'flowbite-svelte';
+	import { EditOutline } from 'flowbite-svelte-icons';
+	import { _ } from 'svelte-i18n';
+
+	export let onClick: () => void;
+</script>
+
+<Button color="yellow" on:click={onClick}
+	><EditOutline class="me-2 h-5 w-5" /> {$_('admin.edit')}</Button
+>
diff --git a/frontend/src/lib/components/Admin/EditMilestoneGroupModal.svelte b/frontend/src/lib/components/Admin/EditMilestoneGroupModal.svelte
index b9cfa6f6..166db5ce 100644
--- a/frontend/src/lib/components/Admin/EditMilestoneGroupModal.svelte
+++ b/frontend/src/lib/components/Admin/EditMilestoneGroupModal.svelte
@@ -9,7 +9,7 @@
 		Fileupload,
 		Modal
 	} from 'flowbite-svelte';
-	import { lang_id, languages } from '$lib/stores/adminStore';
+	import { languages } from '$lib/stores/adminStore';
 	import {
 		updateMilestoneGroup,
 		uploadMilestoneGroupImage,
diff --git a/frontend/src/lib/components/Admin/EditUserQuestionModal.svelte b/frontend/src/lib/components/Admin/EditUserQuestionModal.svelte
new file mode 100644
index 00000000..82af7f3f
--- /dev/null
+++ b/frontend/src/lib/components/Admin/EditUserQuestionModal.svelte
@@ -0,0 +1,139 @@
+<script lang="ts">
+	import {
+		Button,
+		Badge,
+		Card,
+		InputAddon,
+		Textarea,
+		Input,
+		Label,
+		ButtonGroup,
+		Modal,
+		Select,
+		type SelectOptionType
+	} from 'flowbite-svelte';
+	import { lang_id, languages } from '$lib/stores/adminStore';
+	import { updateUserQuestion } from '$lib/admin';
+	import InputPreview from '$lib/components/Admin/InputPreview.svelte';
+
+	export let open: boolean = false;
+	export let userQuestion: object | null = null;
+
+	let preview_lang_id = '1';
+	let preview_answer = '';
+
+	const inputTypes: SelectOptionType<string>[] = [
+		{ value: 'text', name: 'text' },
+		{ value: 'select', name: 'select' }
+	];
+
+	function updateOptionsJson() {
+		const values = userQuestion.options.split(';');
+		for (const lid in $languages) {
+			const items = userQuestion.text[lid].options.split(';');
+			userQuestion.text[lid].options_json = JSON.stringify(
+				values.map(function (value, index) {
+					return { value: value, name: items[index] };
+				})
+			);
+		}
+	}
+
+	export async function saveChanges() {
+		try {
+			await updateUserQuestion(userQuestion);
+		} catch (e) {
+			console.error(e);
+		}
+	}
+</script>
+
+<Modal title="Edit user question" bind:open autoclose size="xl">
+	{#if userQuestion}
+		<div class="flex flex-row items-center">
+			<div class="mr-5 grow">
+				<div class="mb-5">
+					<Label class="mb-2">Question</Label>
+					{#each Object.values(userQuestion.text) as text}
+						<div class="mb-1">
+							<ButtonGroup class="w-full">
+								<InputAddon>{$languages[text.lang_id]}</InputAddon>
+								<Input
+									bind:value={text.question}
+									on:input={() => {
+										userQuestion = userQuestion;
+									}}
+									placeholder="Question"
+								/>
+							</ButtonGroup>
+						</div>
+					{/each}
+				</div>
+				<div class="mb-5">
+					<Label class="mb-2">Input type</Label>
+					<Select class="mt-2" items={inputTypes} bind:value={userQuestion.input} placeholder="" />
+				</div>
+				{#if userQuestion.input === 'select'}
+					<div class="mb-5">
+						<Label class="mb-2">Options</Label>
+						<div class="mb-1">
+							<ButtonGroup class="w-full">
+								<InputAddon>name</InputAddon>
+								<Textarea
+									bind:value={userQuestion.options}
+									on:input={updateOptionsJson}
+									placeholder="Option names"
+								/>
+							</ButtonGroup>
+						</div>
+						{#each Object.values(userQuestion.text) as text}
+							<div class="mb-1">
+								<ButtonGroup class="w-full">
+									<InputAddon>{$languages[text.lang_id]}</InputAddon>
+									<Textarea
+										bind:value={text.options}
+										on:input={updateOptionsJson}
+										placeholder="Options"
+									/>
+								</ButtonGroup>
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+			<div>
+				<Card>
+					<div class="mb-5">
+						<Label class="mb-2">Preview</Label>
+						<div class="flex flex-row">
+							<ButtonGroup class="mb-2 mr-2">
+								{#each Object.entries($languages) as [lid, lang]}
+									<Button
+										checked={preview_lang_id === lid}
+										on:click={(e) => {
+											e.stopPropagation();
+											preview_lang_id = lid;
+										}}>{lang}</Button
+									>
+								{/each}
+							</ButtonGroup>
+						</div>
+						<Card class="mb-4 bg-blue-300">
+							<InputPreview
+								data={userQuestion}
+								lang_id={preview_lang_id}
+								bind:answer={preview_answer}
+							/>
+						</Card>
+						<Label class="mb-2">Generated answer:</Label>
+						<Badge large border color="dark">{preview_answer}</Badge>
+					</div>
+				</Card>
+			</div>
+		</div>
+	{/if}
+	<svelte:fragment slot="footer">
+		<Button color="green" on:click={saveChanges}>Save changes</Button>
+		<Button color="alternative">Cancel</Button>
+	</svelte:fragment>
+</Modal>
diff --git a/frontend/src/lib/components/Admin/InputPreview.svelte b/frontend/src/lib/components/Admin/InputPreview.svelte
new file mode 100644
index 00000000..ff44fb70
--- /dev/null
+++ b/frontend/src/lib/components/Admin/InputPreview.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { Input, Select, Label } from 'flowbite-svelte';
+	export let data;
+	export let lang_id;
+	export let answer = '';
+
+	function parse_options_json(options_json) {
+		try {
+			return JSON.parse(data.text[lang_id].options_json);
+		} catch (e) {
+			console.log("Couldn't parse options_json");
+			console.log(e);
+		}
+		return [];
+	}
+
+	$: items = parse_options_json(data.text[lang_id].options_json);
+</script>
+
+<div class="mb-5">
+	<Label class="font-semibold text-gray-700 dark:text-gray-400">{data.text[lang_id].question}</Label
+	>
+</div>
+<div class="mb-5">
+	{#if data.input === 'select'}
+		<Select {items} bind:value={answer} placeholder="" />
+	{:else}
+		<Input type="text" bind:value={answer} />
+	{/if}
+</div>
diff --git a/frontend/src/lib/components/Admin/Languages.svelte b/frontend/src/lib/components/Admin/Languages.svelte
index 56c4c37c..514f179a 100644
--- a/frontend/src/lib/components/Admin/Languages.svelte
+++ b/frontend/src/lib/components/Admin/Languages.svelte
@@ -7,23 +7,26 @@
 		TableHead,
 		TableHeadCell,
 		Card,
-		Button,
 		Select
 	} from 'flowbite-svelte';
-	import { PlusOutline } from 'flowbite-svelte-icons';
 	import ISO6391 from 'iso-639-1';
 	import { _ } from 'svelte-i18n';
 	import type { SelectOptionType } from 'flowbite-svelte';
 	import { updateLanguages } from '$lib/i18n';
 	import { languages } from '$lib/stores/adminStore';
+	import DeleteModal from '$lib/components/Admin/DeleteModal.svelte';
+	import AddButton from '$lib/components/Admin/AddButton.svelte';
+	import DeleteButton from '$lib/components/Admin/DeleteButton.svelte';
 
 	const langCodes = ISO6391.getAllCodes();
 	const langNames = ISO6391.getAllNativeNames();
-	const langItems = langCodes.reduce(
-		(acc, k, i) => [...acc, { value: k, name: langNames[i] }],
-		[] as SelectOptionType<string>[]
-	);
+	const langItems = langCodes.map((k, i) => {
+		return { value: k, name: langNames[i] };
+	}) as SelectOptionType<string>[];
+
 	let selectedLang: string = '';
+	let currentLanguageId: string = '';
+	let showDeleteModal: boolean = false;
 
 	async function newLanguage() {
 		try {
@@ -85,12 +88,12 @@
 						{ISO6391.getNativeName(lang)}
 					</TableBodyCell>
 					<TableBodyCell>
-						<Button
-							color="red"
-							on:click={() => {
-								deleteLanguage(id);
-							}}>Delete</Button
-						>
+						<DeleteButton
+							onClick={() => {
+								currentLanguageId = id;
+								showDeleteModal = true;
+							}}
+						/>
 					</TableBodyCell>
 				</TableBodyRow>
 			{/each}
@@ -105,11 +108,16 @@
 					/>
 				</TableBodyCell>
 				<TableBodyCell>
-					<Button color="blue" on:click={newLanguage} disabled={selectedLang === ''}
-						><PlusOutline class="mr-2"></PlusOutline>Add language</Button
-					>
+					<AddButton onClick={newLanguage} disabled={selectedLang === ''} />
 				</TableBodyCell>
 			</TableBodyRow>
 		</TableBody>
 	</Table>
 </Card>
+
+<DeleteModal
+	bind:open={showDeleteModal}
+	onClick={() => {
+		deleteLanguage(currentLanguageId);
+	}}
+></DeleteModal>
diff --git a/frontend/src/lib/components/Admin/MilestoneGroups.svelte b/frontend/src/lib/components/Admin/MilestoneGroups.svelte
index 69e83907..934fa251 100644
--- a/frontend/src/lib/components/Admin/MilestoneGroups.svelte
+++ b/frontend/src/lib/components/Admin/MilestoneGroups.svelte
@@ -6,22 +6,25 @@
 		TableBodyRow,
 		TableHead,
 		TableHeadCell,
-		Card,
-		Button
+		Card
 	} from 'flowbite-svelte';
 	import { _ } from 'svelte-i18n';
-	import { ChevronUpOutline, ChevronDownOutline, PlusOutline } from 'flowbite-svelte-icons';
+	import { ChevronUpOutline, ChevronDownOutline } from 'flowbite-svelte-icons';
 	import EditMilestoneGroupModal from '$lib/components/Admin/EditMilestoneGroupModal.svelte';
-	import DeleteMilestoneGroupModal from '$lib/components/Admin/DeleteMilestoneGroupModal.svelte';
+	import DeleteModal from '$lib/components/Admin/DeleteModal.svelte';
+	import AddButton from '$lib/components/Admin/AddButton.svelte';
+	import EditButton from '$lib/components/Admin/EditButton.svelte';
+	import DeleteButton from '$lib/components/Admin/DeleteButton.svelte';
 	import { lang_id, milestoneGroups } from '$lib/stores/adminStore';
 	import { refreshMilestoneGroups, newMilestoneGroup, milestoneGroupImageUrl } from '$lib/admin';
 	import { onMount } from 'svelte';
+	import { deleteMilestoneGroup } from '$lib/admin.js';
 
 	let currentGroup: object | null = null;
 	let openGroupIndex: number | null = null;
 	let currentGroupId: number | null = null;
 	let showEditGroupModal: boolean = false;
-	let showDeleteGroupModal: boolean = false;
+	let showDeleteModal: boolean = false;
 
 	function toggleOpenGroupIndex(index: number) {
 		if (openGroupIndex == index) {
@@ -47,7 +50,7 @@
 
 <Card size="xl" class="m-5">
 	<h3 class="mb-3 text-xl font-medium text-gray-900 dark:text-white">
-		{$_('admin.milestonegroups')}
+		{$_('admin.milestone-groups')}
 	</h3>
 	{#if milestoneGroups}
 		<Table>
@@ -88,20 +91,18 @@
 							{title}
 						</TableBodyCell>
 						<TableBodyCell>
-							<Button
-								color="yellow"
-								on:click={() => {
+							<EditButton
+								onClick={() => {
 									currentGroup = $milestoneGroups[groupIndex];
 									showEditGroupModal = true;
-								}}>Edit</Button
-							>
-							<Button
-								color="red"
-								on:click={() => {
+								}}
+							/>
+							<DeleteButton
+								onClick={() => {
 									currentGroupId = milestoneGroup.id;
-									showDeleteGroupModal = true;
-								}}>Delete</Button
-							>
+									showDeleteModal = true;
+								}}
+							/>
 						</TableBodyCell>
 					</TableBodyRow>
 				{/each}
@@ -110,9 +111,7 @@
 					<TableBodyCell></TableBodyCell>
 					<TableBodyCell></TableBodyCell>
 					<TableBodyCell>
-						<Button color="blue" on:click={addMilestoneGroup}
-							><PlusOutline class="mr-2"></PlusOutline>Add milestone group</Button
-						>
+						<AddButton onClick={addMilestoneGroup} />
 					</TableBodyCell>
 				</TableBodyRow>
 			</TableBody>
@@ -124,5 +123,9 @@
 	<EditMilestoneGroupModal bind:open={showEditGroupModal} milestoneGroup={currentGroup}
 	></EditMilestoneGroupModal>
 {/key}
-<DeleteMilestoneGroupModal bind:open={showDeleteGroupModal} groupId={currentGroupId}
-></DeleteMilestoneGroupModal>
+<DeleteModal
+	bind:open={showDeleteModal}
+	onClick={() => {
+		deleteMilestoneGroup(currentGroupId);
+	}}
+></DeleteModal>
diff --git a/frontend/src/lib/components/Admin/UserQuestions.svelte b/frontend/src/lib/components/Admin/UserQuestions.svelte
new file mode 100644
index 00000000..37632203
--- /dev/null
+++ b/frontend/src/lib/components/Admin/UserQuestions.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+	import {
+		Table,
+		TableBody,
+		TableBodyCell,
+		TableBodyRow,
+		TableHead,
+		TableHeadCell,
+		Card
+	} from 'flowbite-svelte';
+
+	import { _ } from 'svelte-i18n';
+	import { lang_id, userQuestions } from '$lib/stores/adminStore';
+	import { onMount } from 'svelte';
+	import { deleteUserQuestion, newUserQuestion, refreshUserQuestions } from '$lib/admin';
+	import EditUserQuestionModal from '$lib/components/Admin/EditUserQuestionModal.svelte';
+	import DeleteModal from '$lib/components/Admin/DeleteModal.svelte';
+	import AddButton from '$lib/components/Admin/AddButton.svelte';
+	import EditButton from '$lib/components/Admin/EditButton.svelte';
+	import DeleteButton from '$lib/components/Admin/DeleteButton.svelte';
+
+	let currentUserQuestion = null;
+	let currentUserQuestionId = null;
+	let showEditUserQuestionModal: boolean = false;
+	let showDeleteModal: boolean = false;
+
+	async function addUserQuestion() {
+		currentUserQuestion = await newUserQuestion();
+		if (currentUserQuestion === null) {
+			return;
+		}
+		showEditUserQuestionModal = true;
+	}
+
+	onMount(async () => {
+		await refreshUserQuestions();
+	});
+</script>
+
+<Card size="xl" class="m-5">
+	<h3 class="mb-3 text-xl font-medium text-gray-900 dark:text-white">
+		{$_('admin.user-questions')}
+	</h3>
+	<Table>
+		<TableHead>
+			<TableHeadCell>Question</TableHeadCell>
+			<TableHeadCell>Input type</TableHeadCell>
+			<TableHeadCell>Options</TableHeadCell>
+			<TableHeadCell>Actions</TableHeadCell>
+		</TableHead>
+		<TableBody>
+			{#each $userQuestions as userQuestion, groupIndex (userQuestion.id)}
+				<TableBodyRow>
+					<TableBodyCell>
+						{userQuestion?.text[$lang_id]?.question}
+					</TableBodyCell>
+					<TableBodyCell>
+						{userQuestion?.input}
+					</TableBodyCell>
+					<TableBodyCell>
+						{userQuestion?.text[$lang_id]?.options}
+					</TableBodyCell>
+					<TableBodyCell>
+						<EditButton
+							onClick={() => {
+								currentUserQuestion = $userQuestions[groupIndex];
+								showEditUserQuestionModal = true;
+							}}
+						/>
+						<DeleteButton
+							onClick={() => {
+								currentUserQuestionId = userQuestion.id;
+								showDeleteModal = true;
+							}}
+						/>
+					</TableBodyCell>
+				</TableBodyRow>
+			{/each}
+			<TableBodyRow>
+				<TableBodyCell></TableBodyCell>
+				<TableBodyCell></TableBodyCell>
+				<TableBodyCell></TableBodyCell>
+				<TableBodyCell>
+					<AddButton onClick={addUserQuestion} />
+				</TableBodyCell>
+			</TableBodyRow>
+		</TableBody>
+	</Table>
+</Card>
+
+{#key showEditUserQuestionModal}
+	<EditUserQuestionModal bind:open={showEditUserQuestionModal} userQuestion={currentUserQuestion}
+	></EditUserQuestionModal>
+{/key}
+<DeleteModal
+	bind:open={showDeleteModal}
+	onClick={() => {
+		deleteUserQuestion(currentUserQuestionId);
+	}}
+></DeleteModal>
diff --git a/frontend/src/lib/stores/adminStore.ts b/frontend/src/lib/stores/adminStore.ts
index 1e37628b..dc540e32 100644
--- a/frontend/src/lib/stores/adminStore.ts
+++ b/frontend/src/lib/stores/adminStore.ts
@@ -4,6 +4,8 @@ export const isLoggedIn = writable(false);
 
 export const milestoneGroups = writable([]);
 
+export const userQuestions = writable([]);
+
 export const languages: Writable<Record<string, string>> = writable({});
 
 export const lang_id = writable('1');
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index dd518629..076e1493 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -25,6 +25,13 @@
 	},
 	"admin": {
 		"languages": "Sprachen",
-		"milestonegroups": "Meilensteingruppen"
+		"milestone-groups": "Meilensteingruppen",
+		"user-questions": "Benutzerfragen",
+		"add": "Hinzufügen",
+		"edit": "Bearbeiten",
+		"delete": "Löschen",
+		"delete-are-you-sure": "Möchten Sie dies wirklich löschen?",
+		"yes-sure": "Ja, ich bin sicher",
+		"no-cancel": "Nein, abbrechen"
 	}
 }
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 4bda8d69..4c85ca10 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -25,6 +25,13 @@
 	},
 	"admin": {
 		"languages": "Languages",
-		"milestonegroups": "Milestone groups"
+		"milestone-groups": "Milestone groups",
+		"user-questions": "User Questions",
+		"add": "Add",
+		"edit": "Edit",
+		"delete": "Delete",
+		"delete-are-you-sure": "Are you sure you want to delete this?",
+		"yes-sure": "Yes, I'm sure",
+		"no-cancel": "No, cancel"
 	}
 }
diff --git a/frontend/src/routes/admin/+page.svelte b/frontend/src/routes/admin/+page.svelte
index a13edad1..2c0516e9 100644
--- a/frontend/src/routes/admin/+page.svelte
+++ b/frontend/src/routes/admin/+page.svelte
@@ -3,8 +3,12 @@
 	import { updateLanguages } from '$lib/i18n';
 	import Languages from '$lib/components/Admin/Languages.svelte';
 	import MilestoneGroups from '$lib/components/Admin/MilestoneGroups.svelte';
+	import Questions from '$lib/components/Admin/UserQuestions.svelte';
 	import Login from '$lib/components/Admin/Login.svelte';
+	import { _ } from 'svelte-i18n';
 	import { onMount } from 'svelte';
+	import { Tabs, TabItem } from 'flowbite-svelte';
+	import { LanguageOutline, BadgeCheckOutline, ClipboardListOutline } from 'flowbite-svelte-icons';
 
 	async function updateIsLoggedIn() {
 		const res = await fetch(`${import.meta.env.VITE_MONDEY_API_URL}/users/me`, {
@@ -12,7 +16,10 @@
 			credentials: 'include'
 		});
 		if (res.status === 200) {
-			isLoggedIn.set(true);
+			const user = await res.json();
+			if (user.is_superuser) {
+				isLoggedIn.set(true);
+			}
 		}
 	}
 
@@ -23,11 +30,32 @@
 	});
 </script>
 
-<div class="flex w-full flex-col items-center justify-center">
-	{#if !$isLoggedIn}
+{#if !$isLoggedIn}
+	<div class="flex w-full flex-col items-center justify-center">
 		<Login />
-	{:else}
-		<Languages />
-		<MilestoneGroups />
-	{/if}
-</div>
+	</div>
+{:else}
+	<Tabs tabStyle="underline">
+		<TabItem open>
+			<div slot="title" class="flex items-center gap-2">
+				<BadgeCheckOutline size="md" />
+				{$_('admin.milestone-groups')}
+			</div>
+			<MilestoneGroups />
+		</TabItem>
+		<TabItem>
+			<div slot="title" class="flex items-center gap-2">
+				<ClipboardListOutline size="md" />
+				{$_('admin.user-questions')}
+			</div>
+			<Questions />
+		</TabItem>
+		<TabItem>
+			<div slot="title" class="flex items-center gap-2">
+				<LanguageOutline size="md" />
+				{$_('admin.languages')}
+			</div>
+			<Languages />
+		</TabItem>
+	</Tabs>
+{/if}
diff --git a/mondey_backend/src/mondey_backend/main.py b/mondey_backend/src/mondey_backend/main.py
index ea93808b..25d36bf7 100644
--- a/mondey_backend/src/mondey_backend/main.py
+++ b/mondey_backend/src/mondey_backend/main.py
@@ -15,6 +15,7 @@
 from .routers import auth
 from .routers import milestones
 from .routers import research
+from .routers import questions
 from .routers import users
 from .settings import app_settings
 
@@ -31,6 +32,7 @@ def create_app() -> FastAPI:
     pathlib.Path(app_settings.STATIC_FILES_PATH).mkdir(parents=True, exist_ok=True)
     app = FastAPI(lifespan=lifespan, title="MONDEY API", root_path="/api")
     app.include_router(milestones.create_router())
+    app.include_router(questions.create_router())
     app.include_router(admin.create_router())
     app.include_router(users.create_router())
     app.include_router(auth.create_router())
diff --git a/mondey_backend/src/mondey_backend/models/milestones.py b/mondey_backend/src/mondey_backend/models/milestones.py
index f9e597ae..bd15e5ce 100644
--- a/mondey_backend/src/mondey_backend/models/milestones.py
+++ b/mondey_backend/src/mondey_backend/models/milestones.py
@@ -147,8 +147,6 @@ class MilestoneImagePublic(SQLModel):
     approved: bool
 
 
-Text = MilestoneText | MilestoneGroupText
-
 ## MilestoneAnswer
 
 
diff --git a/mondey_backend/src/mondey_backend/models/questions.py b/mondey_backend/src/mondey_backend/models/questions.py
new file mode 100644
index 00000000..e9706b00
--- /dev/null
+++ b/mondey_backend/src/mondey_backend/models/questions.py
@@ -0,0 +1,54 @@
+from __future__ import annotations
+
+from sqlalchemy.orm import Mapped
+from sqlalchemy.orm import attribute_keyed_dict
+from sqlalchemy.orm import relationship
+from sqlmodel import Field
+from sqlmodel import Relationship
+from sqlmodel import SQLModel
+
+
+class UserQuestionTextBase(SQLModel):
+    question: str = ""
+    options_json: str = ""
+
+
+class UserQuestionText(UserQuestionTextBase, table=True):
+    user_question_id: int | None = Field(
+        default=None, foreign_key="userquestion.id", primary_key=True
+    )
+    lang_id: int | None = Field(
+        default=None, foreign_key="language.id", primary_key=True
+    )
+    options: str = ""
+
+
+class UserQuestionTextPublic(UserQuestionTextBase):
+    pass
+
+
+class UserQuestion(SQLModel, table=True):
+    id: int | None = Field(default=None, primary_key=True)
+    order: int = 0
+    input: str = "text"
+    options: str = ""
+    text: Mapped[dict[int, UserQuestionText]] = Relationship(
+        sa_relationship=relationship(
+            collection_class=attribute_keyed_dict("lang_id"),
+            cascade="all, delete-orphan",
+        )
+    )
+
+
+class UserQuestionPublic(SQLModel):
+    id: int
+    input: str
+    text: dict[int, UserQuestionTextPublic] = {}
+
+
+class UserQuestionAdmin(SQLModel):
+    id: int
+    order: int
+    input: str
+    options: str
+    text: dict[int, UserQuestionText] = {}
diff --git a/mondey_backend/src/mondey_backend/routers/admin.py b/mondey_backend/src/mondey_backend/routers/admin.py
index 77b091db..5b6e3cd7 100644
--- a/mondey_backend/src/mondey_backend/routers/admin.py
+++ b/mondey_backend/src/mondey_backend/routers/admin.py
@@ -16,11 +16,15 @@
 from ..models.milestones import MilestoneGroupText
 from ..models.milestones import MilestoneImage
 from ..models.milestones import MilestoneText
+from ..models.questions import UserQuestion
+from ..models.questions import UserQuestionAdmin
+from ..models.questions import UserQuestionText
 from ..settings import app_settings
 from .utils import add
 from .utils import get
 from .utils import update_milestone_group_text
 from .utils import update_milestone_text
+from .utils import update_user_question_text
 from .utils import write_file
 
 
@@ -33,7 +37,7 @@ def create_language(session: SessionDep, language: LanguageCreate):
         add(session, db_language)
         return db_language
 
-    @router.delete("/languages/{language_id}", response_model=Language)
+    @router.delete("/languages/{language_id}")
     def delete_language(session: SessionDep, language_id: int):
         language = get(session, Language, language_id)
         session.delete(language)
@@ -59,7 +63,7 @@ def create_milestone_group(session: SessionDep):
         session.refresh(db_milestone_group)
         return db_milestone_group
 
-    @router.put("/milestone-groups", response_model=MilestoneGroupAdmin)
+    @router.put("/milestone-groups/", response_model=MilestoneGroupAdmin)
     def update_milestone_group(
         session: SessionDep,
         milestone_group: MilestoneGroupAdmin,
@@ -101,7 +105,7 @@ def create_milestone(session: SessionDep, milestone_group_id: int):
         session.refresh(db_milestone)
         return db_milestone
 
-    @router.put("/milestones", response_model=MilestoneAdmin)
+    @router.put("/milestones/", response_model=MilestoneAdmin)
     def update_milestone(
         session: SessionDep,
         milestone: MilestoneAdmin,
@@ -134,4 +138,42 @@ async def upload_milestone_image(
         session.refresh(milestone_image)
         return milestone_image
 
+    @router.get("/user-questions/", response_model=list[UserQuestionAdmin])
+    def get_user_questions(session: SessionDep):
+        user_questions = session.exec(
+            select(UserQuestion).order_by(col(UserQuestion.order))
+        ).all()
+        return user_questions
+
+    @router.post("/user-questions/", response_model=UserQuestionAdmin)
+    def create_user_question(session: SessionDep):
+        user_question = UserQuestion()
+        add(session, user_question)
+        for language in session.exec(select(Language)).all():
+            session.add(
+                UserQuestionText(user_question_id=user_question.id, lang_id=language.id)
+            )
+        session.commit()
+        session.refresh(user_question)
+        return user_question
+
+    @router.put("/user-questions/", response_model=UserQuestionAdmin)
+    def update_user_question(
+        session: SessionDep,
+        user_question: UserQuestionAdmin,
+    ):
+        db_user_question = get(session, UserQuestion, user_question.id)
+        for key, value in user_question.model_dump(exclude={"text"}).items():
+            setattr(db_user_question, key, value)
+        update_user_question_text(session, user_question)
+        add(session, db_user_question)
+        return db_user_question
+
+    @router.delete("/user-questions/{user_question_id}")
+    def delete_question(session: SessionDep, user_question_id: int):
+        question = get(session, UserQuestion, user_question_id)
+        session.delete(question)
+        session.commit()
+        return {"ok": True}
+
     return router
diff --git a/mondey_backend/src/mondey_backend/routers/questions.py b/mondey_backend/src/mondey_backend/routers/questions.py
new file mode 100644
index 00000000..73f9fd91
--- /dev/null
+++ b/mondey_backend/src/mondey_backend/routers/questions.py
@@ -0,0 +1,24 @@
+from __future__ import annotations
+
+from fastapi import APIRouter
+from sqlmodel import col
+from sqlmodel import select
+
+from ..dependencies import SessionDep
+from ..models.questions import UserQuestion
+from ..models.questions import UserQuestionPublic
+
+
+def create_router() -> APIRouter:
+    router = APIRouter(tags=["questions"])
+
+    @router.get("/user-questions/", response_model=list[UserQuestionPublic])
+    def get_user_questions(
+        session: SessionDep,
+    ):
+        user_questions = session.exec(
+            select(UserQuestion).order_by(col(UserQuestion.order))
+        ).all()
+        return user_questions
+
+    return router
diff --git a/mondey_backend/src/mondey_backend/routers/users.py b/mondey_backend/src/mondey_backend/routers/users.py
index e0df7fd6..e04bcf23 100644
--- a/mondey_backend/src/mondey_backend/routers/users.py
+++ b/mondey_backend/src/mondey_backend/routers/users.py
@@ -10,4 +10,5 @@
 def create_router() -> APIRouter:
     router = APIRouter(prefix="/users", tags=["users"])
     router.include_router(fastapi_users.get_users_router(UserRead, UserUpdate))
+
     return router
diff --git a/mondey_backend/src/mondey_backend/routers/utils.py b/mondey_backend/src/mondey_backend/routers/utils.py
index 81359328..1c5aee79 100644
--- a/mondey_backend/src/mondey_backend/routers/utils.py
+++ b/mondey_backend/src/mondey_backend/routers/utils.py
@@ -12,7 +12,10 @@
 from ..models.milestones import MilestoneGroupAdmin
 from ..models.milestones import MilestoneGroupText
 from ..models.milestones import MilestoneText
-from ..models.milestones import Text
+from ..models.questions import UserQuestionAdmin
+from ..models.questions import UserQuestionText
+
+Text = MilestoneText | MilestoneGroupText | UserQuestionText
 
 
 def write_file(file: UploadFile, filename: str):
@@ -66,3 +69,9 @@ def update_milestone_group_text(
     _update_text(
         session, MilestoneGroupText, milestone_group.text.values(), milestone_group.id
     )
+
+
+def update_user_question_text(session: SessionDep, user_question: UserQuestionAdmin):
+    _update_text(
+        session, UserQuestionText, user_question.text.values(), user_question.id
+    )
diff --git a/mondey_backend/src/mondey_backend/settings.py b/mondey_backend/src/mondey_backend/settings.py
index aa9f1537..5db58b6d 100644
--- a/mondey_backend/src/mondey_backend/settings.py
+++ b/mondey_backend/src/mondey_backend/settings.py
@@ -17,7 +17,7 @@ class AppSettings(BaseSettings):
     HOST: str = "localhost"
     PORT: int = 8000
     RELOAD: bool = True
-    LOG_LEVEL: str = "info"
+    LOG_LEVEL: str = "debug"
     COOKIE_SECURE: bool = False