From 724ab4619d132e29739f4677169d654e68644531 Mon Sep 17 00:00:00 2001
From: "Gard.Kalland" <github.blunderer148@passmail.net>
Date: Sun, 4 May 2025 17:48:08 +0200
Subject: [PATCH 01/42] table Veiw

---
 .../lib/components/portal/EventTable.svelte   | 316 ++++++++++++++++++
 apps/www/src/lib/services/event.service.ts    |  40 +++
 .../lib/states/create-event-state.svelte.ts   |   1 +
 .../portal/arrangementer/+page.server.ts      |  19 +-
 .../routes/portal/arrangementer/+page.svelte  |  61 +---
 .../portal/arrangementer/[id]/+page.server.ts |   5 -
 .../portal/arrangementer/[id]/+page.svelte    |   9 -
 .../arrangementer/[id]/edit/+page.server.ts   |  72 ++++
 .../arrangementer/[id]/edit/+page.svelte      | 200 +++++++++++
 9 files changed, 645 insertions(+), 78 deletions(-)
 create mode 100644 apps/www/src/lib/components/portal/EventTable.svelte
 create mode 100644 apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
 create mode 100644 apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte

diff --git a/apps/www/src/lib/components/portal/EventTable.svelte b/apps/www/src/lib/components/portal/EventTable.svelte
new file mode 100644
index 00000000..7a88df20
--- /dev/null
+++ b/apps/www/src/lib/components/portal/EventTable.svelte
@@ -0,0 +1,316 @@
+<script lang="ts">
+	import { formatDate } from '$lib/date';
+	import { goto } from '$app/navigation';
+	import { SquarePen } from '@lucide/svelte';
+	import { getUser } from '$lib/context/user.context';
+
+  
+	type Event = {
+		id: string;
+		name: string;
+		date: Date;
+		shifts: {
+			id: string;
+			startAt: Date;
+			endAt: Date;
+			members: any[];
+		}[];
+	};
+
+	const { events, outdated } = $props();
+
+
+  let search = $state('');
+	let activeTab = $state('upcoming');
+  let user = getUser();
+
+	function hasActiveShifts(event: Event) {
+		const now = new Date();
+		return event.shifts.some((shift) => {
+			const startTime = new Date(shift.startAt);
+			const endTime = new Date(shift.endAt);
+			return startTime <= now && now < endTime;
+		});
+	}
+
+
+	function hasUpcomingShifts(event: Event) {
+		const now = new Date();
+		const hasActive = hasActiveShifts(event);
+		if (hasActive) return false;
+
+		return event.shifts.some((shift) => {
+			const startTime = new Date(shift.startAt);
+			return now < startTime;
+		});
+	}
+
+	function hasActiveOrUpcoming(event: Event) {
+		return hasActiveShifts(event) || hasUpcomingShifts(event);
+	}
+
+	const upcomingEvents = $derived([
+		...events,
+		...outdated.filter((event: Event) => hasActiveOrUpcoming(event))
+	]);
+
+	const pastEvnts = $derived(
+		outdated.filter((event: Event) => !hasActiveOrUpcoming(event))
+	);
+  
+	const activeEvnts = $derived(activeTab === 'upcoming' ? upcomingEvents : pastEvnts);
+  
+	let filteredEvents = $derived(
+		activeEvnts.filter((event: Event) => 
+			event.name.toLowerCase().includes(search.toLowerCase())
+		)
+	);
+
+	function countShifts(event: Event) {
+		return event.shifts.length;
+	}
+
+
+	function getEventStatus(event: Event) {
+		if (hasActiveShifts(event)) {
+			return 'Aktiv';
+		} else if (hasUpcomingShifts(event)) {
+			return 'Kommende';
+		} else {
+			return 'Ferdig';
+		}
+	}
+
+	function getStatusClass(status: string) {
+		switch (status) {
+			case 'Kommende':
+				return 'text-blue-500';
+			case 'Aktiv':
+				return 'text-green-500';
+			case 'Ferdig':
+				return 'text-gray-500';
+			default:
+				return '';
+		}
+	}
+</script>
+
+<div class="event-table">
+	<div class="tabs">
+		<button
+			class={activeTab === 'upcoming' ? 'active' : ''}
+			onclick={() => (activeTab = 'upcoming')}
+		>
+			Arrangementer
+		</button>
+		<button class={activeTab === 'past' ? 'active' : ''} onclick={() => (activeTab = 'past')}>
+			Tidligere arrangementer
+		</button>
+	</div>
+  <div class="search-container">
+    <input 
+      type="text"
+      placeholder="Søk etter arrangementer..."
+      bind:value={search}
+      class="search-input"
+    />
+
+	{#if filteredEvents.length === 0}
+		<div class="empty-state">
+			Ingen {activeTab === 'upcoming' ? 'kommende' : 'tidligere'} arrangementer å vise.
+		</div>
+	{:else}
+		<div class="table-container">
+			<table>
+				<thead>
+					<tr>
+						<th>Arrangement</th>
+						<th>Dato</th>
+						<th>Antall vakter</th>
+						<th>Status</th>
+						<th aria-label="Handlinger"></th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each filteredEvents as event (event.id)}
+						{@const status = getEventStatus(event)}
+						<tr class="event.row" onclick={() => goto(`arrangementer/${event.id}`)}>
+							<td>{event.name}</td>
+							<td>{formatDate(event.date)}</td>
+							<td>{countShifts(event)}</td>
+							<td class={getStatusClass(status)}>{status}</td>
+							<td class="action-column">
+                {#if $user?.role === 'board'}
+								<a
+									href="arrangementer/{event.id}/edit"
+									class="edit-icon"
+									aria-label="Rediger arrangement"
+								>
+									<SquarePen size={18} />
+								</a>
+              {/if}
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{/if}
+  </div>
+</div>
+
+<style>
+	.event-table {
+		border-radius: 16px;
+		overflow: hidden;
+		box-shadow:
+			0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 4px 6px -2px rgba(0, 0, 0, 0.05);
+		background-color: var(--background-color);
+		border: 1px solid #f0f0f0;
+	}
+
+	.tabs {
+		display: flex;
+		background-color: backround-color;
+		padding: 0.5rem;
+		gap: 0.5rem;
+		flex-wrap: wrap;
+	}
+
+	.tabs button {
+		padding: 0.75rem 1.5rem;
+		font-weight: 500;
+		border-radius: 8px;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		color: #6b7280;
+		flex: 1; /* Flexible width */
+		min-width: 150px;
+	}
+
+	.tabs button:hover {
+		background-color: #f3f4f6;
+		color: #3b82f6;
+	}
+
+	.tabs button.active {
+		background-color: #eff6ff;
+		color: #2563eb;
+		font-weight: 600;
+	}
+
+	.table-container {
+		overflow-x: auto;
+		padding: 0.5rem;
+	}
+
+	table {
+		width: 100%;
+		min-width: 600px;
+	}
+
+	th,
+	td {
+		padding: 1rem;
+		text-align: left;
+	}
+
+	@media (max-width: 768px) {
+		th,
+		td {
+			padding: 0.75rem 0.5rem;
+		}
+	}
+
+	th {
+		border-bottom: 2px solid #e5e7eb;
+	}
+
+	td {
+		border-bottom: 1px solid #f3f4f6;
+		word-break: break-word;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		max-width: 200px; 
+	}
+
+	tr:last-child td {
+		border-bottom: none;
+	}
+
+	tr:hover td {
+		background-color: #f9fafb;
+	}
+
+	.empty-state {
+		padding: 3rem 2rem;
+		text-align: center;
+		color: #6b7280;
+		font-weight: 500;
+		margin: 1rem;
+	}
+
+	.text-blue-500 {
+		color: #3b82f6;
+		font-weight: 500;
+	}
+
+	.text-green-500 {
+		color: #10b981;
+		font-weight: 500;
+	}
+
+	.text-gray-500 {
+		color: #6b7280;
+		font-weight: 500;
+	}
+
+	.edit-icon {
+		display: inline-flex;
+		opacity: 0.7;
+		transition: all 0.2s ease;
+		color: #9ca3af;
+	}
+
+	.edit-icon:hover {
+		color: #3b82f6; 
+		opacity: 1;
+	}
+	@media (max-width: 480px) {
+		.event-table {
+			border-radius: 8px;
+		}
+
+		.empty-state {
+			padding: 2rem 1rem;
+		}
+	}
+.search-container {
+	padding: 1rem;
+	background-color: background-color;
+	border-bottom: 1px solid #f0f0f0;
+}
+
+.search-input {
+	width: 100%;
+	padding: 0.75rem 1rem;
+	border-radius: 8px;
+	border: 1px solid #e5e7eb;
+	background-color: #f9fafb;
+	font-size: 1rem;
+	transition: all 0.2s ease;
+}
+
+.search-input:focus {
+	outline: none;
+	border-color: #3b82f6;
+	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+	background-color: background-color;
+}
+
+.search-input::placeholder {
+	color: #9ca3af;
+}
+</style>
diff --git a/apps/www/src/lib/services/event.service.ts b/apps/www/src/lib/services/event.service.ts
index 426ffb03..5ad50887 100644
--- a/apps/www/src/lib/services/event.service.ts
+++ b/apps/www/src/lib/services/event.service.ts
@@ -67,6 +67,46 @@ export class EventService {
 		return event;
 	}
 
+	async findUpcomingEvents() {
+		const event = await this.#db.query.events.findMany({
+			orderBy: (row, { asc }) => [asc(row.date)],
+			with: {
+				shifts: {
+					with: {
+						members: {
+							with: {
+								user: true
+							}
+						}
+					}
+				}
+			},
+			where: (events, { gte }) => gte(events.date, new Date())
+		});
+
+		return event;
+	}
+
+	async findPastEvents() {
+		const event = await this.#db.query.events.findMany({
+			orderBy: (row, { desc }) => [desc(row.date)],
+			with: {
+				shifts: {
+					with: {
+						members: {
+							with: {
+								user: true
+							}
+						}
+					}
+				}
+			},
+			where: (events, { lt }) => lt(events.date, new Date())
+		});
+
+		return event;
+	}
+
 	async delete(id: string) {
 		await this.#db.delete(events).where(eq(events.id, id));
 	}
diff --git a/apps/www/src/lib/states/create-event-state.svelte.ts b/apps/www/src/lib/states/create-event-state.svelte.ts
index bc187026..b26f0070 100644
--- a/apps/www/src/lib/states/create-event-state.svelte.ts
+++ b/apps/www/src/lib/states/create-event-state.svelte.ts
@@ -34,6 +34,7 @@ export class CreateEventState {
 			name: ''
 		});
 	}
+  
 
 	deleteUserFromShift(shiftIndex: number, userId: string) {
 		const arr = this.shifts[shiftIndex].users.filter((user) => user.id !== userId);
diff --git a/apps/www/src/routes/portal/arrangementer/+page.server.ts b/apps/www/src/routes/portal/arrangementer/+page.server.ts
index 4e3773aa..23692af8 100644
--- a/apps/www/src/routes/portal/arrangementer/+page.server.ts
+++ b/apps/www/src/routes/portal/arrangementer/+page.server.ts
@@ -1,21 +1,10 @@
 import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ locals }) => {
-	const events = await locals.db.query.events.findMany({
-		orderBy: (row, { asc }) => [asc(row.date)],
-		with: {
-			shifts: true
-		},
-		where: (events, { gte }) => gte(events.date, new Date())
-	});
-
-	const outdatedEvents = await locals.db.query.events.findMany({
-		orderBy: (row, { desc }) => [desc(row.date)],
-		with: {
-			shifts: true
-		},
-		where: (events, { lt }) => lt(events.date, new Date())
-	});
+	const [events, outdatedEvents] = await Promise.all([
+		locals.eventService.findUpcomingEvents(),
+		locals.eventService.findPastEvents()
+	]);
 
 	return {
 		events,
diff --git a/apps/www/src/routes/portal/arrangementer/+page.svelte b/apps/www/src/routes/portal/arrangementer/+page.svelte
index 8536884e..c5d6be89 100644
--- a/apps/www/src/routes/portal/arrangementer/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/+page.svelte
@@ -1,59 +1,22 @@
 <script lang="ts">
-	import EventPreview from '$lib/components/portal/EventPreview.svelte';
-	import Heading from '$lib/components/ui/Heading.svelte';
-	import { getUser } from '$lib/context/user.context.js';
-	let { data } = $props();
-	let user = getUser();
-	let showOutdatedEvents = $state(false);
+	import EventsTable from '$lib/components/portal/EventTable.svelte';
 
-	function toggleOutdatedEvents() {
-		showOutdatedEvents = !showOutdatedEvents;
-	}
+	const { data } = $props();
 </script>
 
 <svelte:head>
 	<title>Arrangementer</title>
 </svelte:head>
 
-<Heading>Arrangementer</Heading>
-{#if $user?.role == 'board'}
-	<p class="mt-4">
-		<a href="/portal/arrangementer/ny" class="text-blue-500 hover:underline">Nytt arrangement</a>
-	</p>
-{/if}
-
-<ul class="mt-4 flex flex-col gap-4">
-	{#each data.events as event}
-		<li>
-			<EventPreview {event} />
-		</li>
-	{:else}
-		<p>Ingen arrangementer</p>
-	{/each}
-</ul>
-
-<div class="mt-8">
-	<button
-		class="flex items-center rounded-md bg-gray-100 py-6 text-left hover:bg-gray-200 focus:outline-none"
-		onclick={toggleOutdatedEvents}
-		aria-expanded={showOutdatedEvents}
-	>
-		<h3 class="m0 text-lg font-medium">
-			{showOutdatedEvents ? 'Skjul tidligere arrangementer' : 'Vis tidligere arrangementer'}
-		</h3>
-	</button>
+<div class="container">
+	<EventsTable events={data.events} outdated={data.outdatedEvents} />
 </div>
 
-{#if showOutdatedEvents}
-	<div class="mt-4">
-		<ul class="mt-4 flex flex-col gap-4">
-			{#each data.outdatedEvents as event}
-				<li>
-					<EventPreview {event} />
-				</li>
-			{:else}
-				<p>Ingen tidligere arrangementer</p>
-			{/each}
-		</ul>
-	</div>
-{/if}
+<style>
+	.container {
+		width: 100%;
+		max-width: 1200px;
+		margin: 0 auto;
+		padding: 1rem;
+	}
+</style>
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/+page.server.ts b/apps/www/src/routes/portal/arrangementer/[id]/+page.server.ts
index 6d024e44..3ab65789 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/+page.server.ts
+++ b/apps/www/src/routes/portal/arrangementer/[id]/+page.server.ts
@@ -62,11 +62,6 @@ export const actions: Actions = {
 			});
 		}
 
-		await locals.eventService.deleteUserShift({
-			shiftId,
-			userId: locals.user.id
-		});
-
 		return { success: true };
 	}
 };
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
index 6ed2cba1..cec44e30 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import Heading from '$lib/components/ui/Heading.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
 	import { subHours } from 'date-fns';
 	import { formatDate, time } from '$lib/date';
 	import { capitalize } from '$lib/utils';
@@ -45,11 +44,3 @@
 	</ul>
 </section>
 
-<section class="mt-8">
-	{#if data.user?.role === 'board'}
-		<Heading level={2}>Farlig</Heading>
-		<form action="?/delete" method="post" use:enhance>
-			<Button intent="danger" class="mt-4">Slett arrangement</Button>
-		</form>
-	{/if}
-</section>
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
new file mode 100644
index 00000000..6d024e44
--- /dev/null
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
@@ -0,0 +1,72 @@
+import { error, fail, redirect } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ locals, params }) => {
+	const event = await locals.eventService.findFullEventById(params.id);
+
+	if (!event) {
+		throw error(404, 'Event not found');
+	}
+
+	return {
+		event
+	};
+};
+
+export const actions: Actions = {
+	delete: async ({ params, locals }) => {
+		if (locals.user?.role === 'board') {
+			await locals.eventService.delete(params.id);
+			throw redirect(303, '/portal/arrangementer');
+		}
+
+		return fail(401, {
+			message: 'Unauthorized'
+		});
+	},
+	join: async ({ request, locals }) => {
+		if (!locals.user) {
+			return fail(401, {
+				message: 'Not logged in'
+			});
+		}
+
+		const formData = await request.formData();
+		const shiftId = formData.get('shiftId');
+		if (!shiftId || typeof shiftId !== 'string') {
+			return fail(400, {
+				message: 'Missing shiftId'
+			});
+		}
+
+		await locals.eventService.createUserShift({
+			shiftId,
+			userId: locals.user.id,
+			status: 'accepted'
+		});
+
+		return { success: true };
+	},
+	leave: async ({ request, locals }) => {
+		if (!locals.user) {
+			return fail(401, {
+				message: 'Not logged in'
+			});
+		}
+
+		const formData = await request.formData();
+		const shiftId = formData.get('shiftId');
+		if (!shiftId || typeof shiftId !== 'string') {
+			return fail(400, {
+				message: 'Missing shiftId'
+			});
+		}
+
+		await locals.eventService.deleteUserShift({
+			shiftId,
+			userId: locals.user.id
+		});
+
+		return { success: true };
+	}
+};
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
new file mode 100644
index 00000000..5397f772
--- /dev/null
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
@@ -0,0 +1,200 @@
+<script lang="ts">
+	import Heading from '$lib/components/ui/Heading.svelte';
+	import Button from '$lib/components/ui/Button.svelte';
+	import { subHours } from 'date-fns';
+	import { formatDate, time } from '$lib/date';
+	import { capitalize } from '$lib/utils';
+	import { enhance } from '$app/forms';
+	import { getUser } from '$lib/context/user.context.js';
+	import type { EventHandler } from 'svelte/elements';
+	import { X } from '@lucide/svelte';
+	import FormInput from '$lib/components/ui/form/FormInput.svelte';
+	import Combobox from '$lib/components/ui/Combobox.svelte';
+	import { CreateEventState } from '$lib/states/create-event-state.svelte';
+	import { differenceInHours } from 'date-fns';
+
+
+	let user = getUser();
+	let { data } = $props();
+	let error = $state('');
+	let successMessage = $state('');
+	let isSubmitting = $state(false);
+	let createEventState = new CreateEventState();
+
+	const handleSubmit: EventHandler<SubmitEvent, HTMLFormElement> = async (e) => {
+		e.preventDefault();
+		if (!createEventState.isValid()) {
+			error = 'Vennligst fyll ut alle feltene';
+			console.log(createEventState.json());
+			return;
+		}
+
+		isSubmitting = true;
+		error = '';
+		successMessage = '';
+
+		try {
+			const response = await fetch('/api/events', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(createEventState.json())
+			});
+
+			if (response.status === 201) {
+				successMessage = 'Arrangement opprettet! E-post er sendt.';
+				createEventState.reset();
+			} else {
+				error = 'Noe gikk galt ved oppretting av arrangement';
+			}
+		} catch (err) {
+			error = 'Server error';
+			console.error(err);
+		} finally {
+			isSubmitting = false;
+		}
+	};
+</script>
+
+<svelte:head>
+	<title>{`Endre: ${data.event.name}`}</title>
+</svelte:head>
+
+<Heading>{`${data.event.name}`}</Heading>
+
+<section class="mt-8">
+	<Heading level={2}>Vakt {data.event.shifts.length}</Heading>
+
+	<ul class="mt-2 flex flex-col gap-4">
+		{#each data.event.shifts as shift}
+			{@const isInShift = shift.members.some((member) => member.userId === $user?.id)}
+			<li class="block rounded-lg border bg-white p-4">
+				<p>{capitalize(formatDate(shift.startAt))}</p>
+				<p>{time(subHours(shift.startAt, 2))} - {time(subHours(shift.endAt, 2))}</p>
+				<p><b>Ansvarlige</b>: {shift.members.map((member) => member.user.name).join(', ')}</p>
+
+				{#if !isInShift}
+					<form class="mt-4" action="?/join" method="post" use:enhance>
+						<input type="hidden" name="shiftId" value={shift.id} />
+						<button class="text-blue-500 hover:underline">Bli med på vakten &rarr;</button>
+					</form>
+				{:else}
+					<form class="mt-4" action="?/leave" method="post" use:enhance>
+						<input type="hidden" name="shiftId" value={shift.id} />
+						<button class="text-red-500 hover:underline">Forlat vakten &rarr;</button>
+					</form>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+</section>
+
+<section class="mt-8">
+	{#if data.user?.role === 'board'}
+		<Heading level={2}>Farlig</Heading>
+		<form action="?/delete" method="post" use:enhance>
+			<Button intent="danger" class="mt-4">Slett arrangement</Button>
+		</form>
+	{/if}
+</section>
+
+
+<Heading class="mb-4">Nytt arrangement</Heading>
+
+{#if error}
+	<div class="mb-4 rounded-md bg-red-50 p-4 text-red-700">
+		<p>{error}</p>
+	</div>
+{/if}
+
+{#if successMessage}
+	<div class="mb-4 rounded-md bg-green-50 p-4 text-green-700">
+		<p>{successMessage}</p>
+	</div>
+{/if}
+
+<form onsubmit={handleSubmit} class="space-y-2">
+	<FormInput
+		label="Navn"
+		description="Navnet på arrangementet"
+		placeholder="Fest med Foobar"
+		bind:value={createEventState.name}
+		required
+	/>
+	<FormInput
+		label="Dato"
+		description="Start datoen på arrangementet"
+		bind:value={createEventState.date}
+		type="datetime-local"
+		required
+	/>
+	{#each createEventState.shifts as shift, i}
+		{@const shiftLength = differenceInHours(shift.endAt, shift.startAt)}
+		<div class="relative flex flex-col space-y-2 rounded-lg border border-border p-4">
+			<button
+				type="button"
+				class="absolute right-4 top-4 text-red-400 transition-colors hover:text-red-600"
+				onclick={() => createEventState.deleteShift(i)}
+			>
+				<X class="h-4 w-4" />
+			</button>
+			<h2 class="text-lg font-semibold">Vakt {i + 1}</h2>
+			<FormInput
+				label="Start"
+				description="Start tidspunkt for vakten"
+				bind:value={shift.startAt}
+				type="datetime-local"
+				required
+			/>
+			<FormInput
+				label="Slutt"
+				description="Slutt tidspunkt for vakten"
+				bind:value={shift.endAt}
+				type="datetime-local"
+				required
+			/>
+			{#if shiftLength >= 4}
+				<span class="text-sm font-medium text-orange-500">NB: Vakten er lengre enn 4 timer!</span>
+			{/if}
+			<span class="mt-8 text-sm font-medium">Ansvarlige</span>
+			<div class="text-xs text-gray-500">
+				Alle ansvarlige vil få en e-post med kalenderinvitasjon når arrangementet opprettes.
+			</div>
+			{#each createEventState.shifts[i].users as user, j (user)}
+				<div class="flex items-center gap-2">
+					<Combobox
+						name="user"
+						class="flex-1"
+						bind:value={createEventState.shifts[i].users[j].name}
+						disabledOptions={createEventState.shifts[i].users.map((user) => user.id)}
+						onchange={(option) => {
+							const id = option?.value;
+							if (id) {
+								createEventState.shifts[i].users[j].id = id;
+							}
+						}}
+						options={data.users}
+						placeholder="Velg en bruker"
+					/>
+					<button
+						type="button"
+						class="flex h-10 w-10 items-center justify-center rounded-lg border border-border bg-white transition-colors hover:text-red-500"
+						onclick={() => createEventState.deleteUserFromShift(i, user.id)}
+					>
+						<X class="size-4" />
+					</button>
+				</div>
+			{:else}
+				<p class="text-sm text-gray-600">Ingen ansvarlige. Husk å legge til.</p>
+			{/each}
+			<Button type="button" onclick={() => createEventState.addUserToShift(i)}
+				>Legg til bruker</Button
+			>
+		</div>
+	{/each}
+	<Button type="button" onclick={() => createEventState.addShift()}>Legg til vakt</Button>
+	<Button type="submit" disabled={isSubmitting}>
+		{isSubmitting ? 'Lagrer...' : 'Lagre'}
+	</Button>
+</form>

From 046f5ab9799f629e0aac376ba88012dd8840ddce Mon Sep 17 00:00:00 2001
From: "Gard.Kalland" <github.blunderer148@passmail.net>
Date: Sun, 4 May 2025 17:51:44 +0200
Subject: [PATCH 02/42] added back delete

---
 .../lib/components/portal/EventTable.svelte   | 19 ++++++++++---------
 .../portal/arrangementer/[id]/+page.server.ts |  5 +++++
 .../portal/arrangementer/[id]/+page.svelte    |  9 +++++++++
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/apps/www/src/lib/components/portal/EventTable.svelte b/apps/www/src/lib/components/portal/EventTable.svelte
index 7a88df20..a01ea017 100644
--- a/apps/www/src/lib/components/portal/EventTable.svelte
+++ b/apps/www/src/lib/components/portal/EventTable.svelte
@@ -140,15 +140,16 @@
 							<td>{countShifts(event)}</td>
 							<td class={getStatusClass(status)}>{status}</td>
 							<td class="action-column">
-                {#if $user?.role === 'board'}
-								<a
-									href="arrangementer/{event.id}/edit"
-									class="edit-icon"
-									aria-label="Rediger arrangement"
-								>
-									<SquarePen size={18} />
-								</a>
-              {/if}
+              <!-- Dette kommer når eg har edit side -->
+								<!--         {#if $user?.role === 'board'} -->
+								<!-- <a -->
+								<!-- 	href="arrangementer/{event.id}/edit" -->
+								<!-- 	class="edit-icon" -->
+								<!-- 	aria-label="Rediger arrangement" -->
+								<!-- > -->
+								<!-- 	<SquarePen size={18} /> -->
+								<!-- </a> -->
+              <!-- {/if} -->
 							</td>
 						</tr>
 					{/each}
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/+page.server.ts b/apps/www/src/routes/portal/arrangementer/[id]/+page.server.ts
index 3ab65789..6d024e44 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/+page.server.ts
+++ b/apps/www/src/routes/portal/arrangementer/[id]/+page.server.ts
@@ -62,6 +62,11 @@ export const actions: Actions = {
 			});
 		}
 
+		await locals.eventService.deleteUserShift({
+			shiftId,
+			userId: locals.user.id
+		});
+
 		return { success: true };
 	}
 };
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
index cec44e30..6ed2cba1 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Heading from '$lib/components/ui/Heading.svelte';
+	import Button from '$lib/components/ui/Button.svelte';
 	import { subHours } from 'date-fns';
 	import { formatDate, time } from '$lib/date';
 	import { capitalize } from '$lib/utils';
@@ -44,3 +45,11 @@
 	</ul>
 </section>
 
+<section class="mt-8">
+	{#if data.user?.role === 'board'}
+		<Heading level={2}>Farlig</Heading>
+		<form action="?/delete" method="post" use:enhance>
+			<Button intent="danger" class="mt-4">Slett arrangement</Button>
+		</form>
+	{/if}
+</section>

From 1c4f84890e0904021f65914af240114318e678cf Mon Sep 17 00:00:00 2001
From: "Gard.Kalland" <github.blunderer148@passmail.net>
Date: Sun, 4 May 2025 17:54:13 +0200
Subject: [PATCH 03/42] format

---
 .../lib/components/portal/EventTable.svelte   | 176 +++++++++---------
 .../lib/states/create-event-state.svelte.ts   |   1 -
 .../arrangementer/[id]/edit/+page.svelte      |   2 -
 3 files changed, 84 insertions(+), 95 deletions(-)

diff --git a/apps/www/src/lib/components/portal/EventTable.svelte b/apps/www/src/lib/components/portal/EventTable.svelte
index a01ea017..6e6f2508 100644
--- a/apps/www/src/lib/components/portal/EventTable.svelte
+++ b/apps/www/src/lib/components/portal/EventTable.svelte
@@ -4,7 +4,6 @@
 	import { SquarePen } from '@lucide/svelte';
 	import { getUser } from '$lib/context/user.context';
 
-  
 	type Event = {
 		id: string;
 		name: string;
@@ -19,10 +18,9 @@
 
 	const { events, outdated } = $props();
 
-
-  let search = $state('');
+	let search = $state('');
 	let activeTab = $state('upcoming');
-  let user = getUser();
+	let user = getUser();
 
 	function hasActiveShifts(event: Event) {
 		const now = new Date();
@@ -33,7 +31,6 @@
 		});
 	}
 
-
 	function hasUpcomingShifts(event: Event) {
 		const now = new Date();
 		const hasActive = hasActiveShifts(event);
@@ -54,23 +51,18 @@
 		...outdated.filter((event: Event) => hasActiveOrUpcoming(event))
 	]);
 
-	const pastEvnts = $derived(
-		outdated.filter((event: Event) => !hasActiveOrUpcoming(event))
-	);
-  
+	const pastEvnts = $derived(outdated.filter((event: Event) => !hasActiveOrUpcoming(event)));
+
 	const activeEvnts = $derived(activeTab === 'upcoming' ? upcomingEvents : pastEvnts);
-  
+
 	let filteredEvents = $derived(
-		activeEvnts.filter((event: Event) => 
-			event.name.toLowerCase().includes(search.toLowerCase())
-		)
+		activeEvnts.filter((event: Event) => event.name.toLowerCase().includes(search.toLowerCase()))
 	);
 
 	function countShifts(event: Event) {
 		return event.shifts.length;
 	}
 
-
 	function getEventStatus(event: Event) {
 		if (hasActiveShifts(event)) {
 			return 'Aktiv';
@@ -107,57 +99,57 @@
 			Tidligere arrangementer
 		</button>
 	</div>
-  <div class="search-container">
-    <input 
-      type="text"
-      placeholder="Søk etter arrangementer..."
-      bind:value={search}
-      class="search-input"
-    />
-
-	{#if filteredEvents.length === 0}
-		<div class="empty-state">
-			Ingen {activeTab === 'upcoming' ? 'kommende' : 'tidligere'} arrangementer å vise.
-		</div>
-	{:else}
-		<div class="table-container">
-			<table>
-				<thead>
-					<tr>
-						<th>Arrangement</th>
-						<th>Dato</th>
-						<th>Antall vakter</th>
-						<th>Status</th>
-						<th aria-label="Handlinger"></th>
-					</tr>
-				</thead>
-				<tbody>
-					{#each filteredEvents as event (event.id)}
-						{@const status = getEventStatus(event)}
-						<tr class="event.row" onclick={() => goto(`arrangementer/${event.id}`)}>
-							<td>{event.name}</td>
-							<td>{formatDate(event.date)}</td>
-							<td>{countShifts(event)}</td>
-							<td class={getStatusClass(status)}>{status}</td>
-							<td class="action-column">
-              <!-- Dette kommer når eg har edit side -->
-								<!--         {#if $user?.role === 'board'} -->
-								<!-- <a -->
-								<!-- 	href="arrangementer/{event.id}/edit" -->
-								<!-- 	class="edit-icon" -->
-								<!-- 	aria-label="Rediger arrangement" -->
-								<!-- > -->
-								<!-- 	<SquarePen size={18} /> -->
-								<!-- </a> -->
-              <!-- {/if} -->
-							</td>
+	<div class="search-container">
+		<input
+			type="text"
+			placeholder="Søk etter arrangementer..."
+			bind:value={search}
+			class="search-input"
+		/>
+
+		{#if filteredEvents.length === 0}
+			<div class="empty-state">
+				Ingen {activeTab === 'upcoming' ? 'kommende' : 'tidligere'} arrangementer å vise.
+			</div>
+		{:else}
+			<div class="table-container">
+				<table>
+					<thead>
+						<tr>
+							<th>Arrangement</th>
+							<th>Dato</th>
+							<th>Antall vakter</th>
+							<th>Status</th>
+							<th aria-label="Handlinger"></th>
 						</tr>
-					{/each}
-				</tbody>
-			</table>
-		</div>
-	{/if}
-  </div>
+					</thead>
+					<tbody>
+						{#each filteredEvents as event (event.id)}
+							{@const status = getEventStatus(event)}
+							<tr class="event.row" onclick={() => goto(`arrangementer/${event.id}`)}>
+								<td>{event.name}</td>
+								<td>{formatDate(event.date)}</td>
+								<td>{countShifts(event)}</td>
+								<td class={getStatusClass(status)}>{status}</td>
+								<td class="action-column">
+									<!-- Dette kommer når eg har edit side -->
+									<!--         {#if $user?.role === 'board'} -->
+									<!-- <a -->
+									<!-- 	href="arrangementer/{event.id}/edit" -->
+									<!-- 	class="edit-icon" -->
+									<!-- 	aria-label="Rediger arrangement" -->
+									<!-- > -->
+									<!-- 	<SquarePen size={18} /> -->
+									<!-- </a> -->
+									<!-- {/if} -->
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		{/if}
+	</div>
 </div>
 
 <style>
@@ -234,7 +226,7 @@
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		max-width: 200px; 
+		max-width: 200px;
 	}
 
 	tr:last-child td {
@@ -276,7 +268,7 @@
 	}
 
 	.edit-icon:hover {
-		color: #3b82f6; 
+		color: #3b82f6;
 		opacity: 1;
 	}
 	@media (max-width: 480px) {
@@ -288,30 +280,30 @@
 			padding: 2rem 1rem;
 		}
 	}
-.search-container {
-	padding: 1rem;
-	background-color: background-color;
-	border-bottom: 1px solid #f0f0f0;
-}
-
-.search-input {
-	width: 100%;
-	padding: 0.75rem 1rem;
-	border-radius: 8px;
-	border: 1px solid #e5e7eb;
-	background-color: #f9fafb;
-	font-size: 1rem;
-	transition: all 0.2s ease;
-}
-
-.search-input:focus {
-	outline: none;
-	border-color: #3b82f6;
-	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
-	background-color: background-color;
-}
-
-.search-input::placeholder {
-	color: #9ca3af;
-}
+	.search-container {
+		padding: 1rem;
+		background-color: background-color;
+		border-bottom: 1px solid #f0f0f0;
+	}
+
+	.search-input {
+		width: 100%;
+		padding: 0.75rem 1rem;
+		border-radius: 8px;
+		border: 1px solid #e5e7eb;
+		background-color: #f9fafb;
+		font-size: 1rem;
+		transition: all 0.2s ease;
+	}
+
+	.search-input:focus {
+		outline: none;
+		border-color: #3b82f6;
+		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+		background-color: background-color;
+	}
+
+	.search-input::placeholder {
+		color: #9ca3af;
+	}
 </style>
diff --git a/apps/www/src/lib/states/create-event-state.svelte.ts b/apps/www/src/lib/states/create-event-state.svelte.ts
index b26f0070..bc187026 100644
--- a/apps/www/src/lib/states/create-event-state.svelte.ts
+++ b/apps/www/src/lib/states/create-event-state.svelte.ts
@@ -34,7 +34,6 @@ export class CreateEventState {
 			name: ''
 		});
 	}
-  
 
 	deleteUserFromShift(shiftIndex: number, userId: string) {
 		const arr = this.shifts[shiftIndex].users.filter((user) => user.id !== userId);
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
index 5397f772..469bf71a 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
@@ -13,7 +13,6 @@
 	import { CreateEventState } from '$lib/states/create-event-state.svelte';
 	import { differenceInHours } from 'date-fns';
 
-
 	let user = getUser();
 	let { data } = $props();
 	let error = $state('');
@@ -99,7 +98,6 @@
 	{/if}
 </section>
 
-
 <Heading class="mb-4">Nytt arrangement</Heading>
 
 {#if error}

From 5e2f924535f5fa65ed3d9ae65310beffc1da4efd Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Sun, 4 May 2025 22:57:38 +0200
Subject: [PATCH 04/42] event button

---
 .../lib/components/portal/EventTable.svelte   | 56 +++++++++++--------
 1 file changed, 33 insertions(+), 23 deletions(-)

diff --git a/apps/www/src/lib/components/portal/EventTable.svelte b/apps/www/src/lib/components/portal/EventTable.svelte
index 6e6f2508..727219ec 100644
--- a/apps/www/src/lib/components/portal/EventTable.svelte
+++ b/apps/www/src/lib/components/portal/EventTable.svelte
@@ -3,6 +3,7 @@
 	import { goto } from '$app/navigation';
 	import { SquarePen } from '@lucide/svelte';
 	import { getUser } from '$lib/context/user.context';
+  import Button from '../ui/Button.svelte';
 
 	type Event = {
 		id: string;
@@ -107,6 +108,13 @@
 			class="search-input"
 		/>
 
+    {#if $user?.role === 'board'}
+    <div class="button-wrapper">
+    <Button onclick={() => goto(`arrangementer/ny`)}>Nytt arrangement</Button>
+    </div>
+    {/if}
+
+  </div> 
 		{#if filteredEvents.length === 0}
 			<div class="empty-state">
 				Ingen {activeTab === 'upcoming' ? 'kommende' : 'tidligere'} arrangementer å vise.
@@ -133,15 +141,15 @@
 								<td class={getStatusClass(status)}>{status}</td>
 								<td class="action-column">
 									<!-- Dette kommer når eg har edit side -->
-									<!--         {#if $user?.role === 'board'} -->
-									<!-- <a -->
-									<!-- 	href="arrangementer/{event.id}/edit" -->
-									<!-- 	class="edit-icon" -->
-									<!-- 	aria-label="Rediger arrangement" -->
-									<!-- > -->
-									<!-- 	<SquarePen size={18} /> -->
-									<!-- </a> -->
-									<!-- {/if} -->
+                  {#if $user?.role === 'board'}
+                  <a
+										href="arrangementer/{event.id}/edit"
+										class="edit-icon"
+										aria-label="Rediger arrangement"
+									>
+										<SquarePen size={18} />
+									</a>
+									{/if}
 								</td>
 							</tr>
 						{/each}
@@ -149,7 +157,6 @@
 				</table>
 			</div>
 		{/if}
-	</div>
 </div>
 
 <style>
@@ -179,7 +186,7 @@
 		transition: all 0.2s ease;
 		color: #6b7280;
 		flex: 1; /* Flexible width */
-		min-width: 150px;
+		min-width: 150px
 	}
 
 	.tabs button:hover {
@@ -281,27 +288,30 @@
 		}
 	}
 	.search-container {
-		padding: 1rem;
-		background-color: background-color;
-		border-bottom: 1px solid #f0f0f0;
+    position: relative;
+    width: 100%;
+  
 	}
 
 	.search-input {
-		width: 100%;
-		padding: 0.75rem 1rem;
-		border-radius: 8px;
-		border: 1px solid #e5e7eb;
-		background-color: #f9fafb;
-		font-size: 1rem;
-		transition: all 0.2s ease;
-	}
-
+    width: 100%;
+    padding: 0.75rem 8rem 0.75rem 1rem; 
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    font-size: 1rem;
+  }
 	.search-input:focus {
 		outline: none;
 		border-color: #3b82f6;
 		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
 		background-color: background-color;
 	}
+  .button-wrapper {
+    position: absolute;
+    top: 50%;
+    right: 0.5rem;
+    transform: translateY(-50%);
+  }
 
 	.search-input::placeholder {
 		color: #9ca3af;

From 82f98241793beebb2b0be20024bcfc1a0b153fd1 Mon Sep 17 00:00:00 2001
From: "Gard.Kalland" <github.blunderer148@passmail.net>
Date: Thu, 8 May 2025 13:38:44 +0200
Subject: [PATCH 05/42] =?UTF-8?q?changed=20styling=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/components/portal/EventTable.svelte   | 286 +++++-------------
 1 file changed, 69 insertions(+), 217 deletions(-)

diff --git a/apps/www/src/lib/components/portal/EventTable.svelte b/apps/www/src/lib/components/portal/EventTable.svelte
index 727219ec..536566a2 100644
--- a/apps/www/src/lib/components/portal/EventTable.svelte
+++ b/apps/www/src/lib/components/portal/EventTable.svelte
@@ -3,7 +3,7 @@
 	import { goto } from '$app/navigation';
 	import { SquarePen } from '@lucide/svelte';
 	import { getUser } from '$lib/context/user.context';
-  import Button from '../ui/Button.svelte';
+	import Button from '../ui/Button.svelte';
 
 	type Event = {
 		id: string;
@@ -77,243 +77,95 @@
 	function getStatusClass(status: string) {
 		switch (status) {
 			case 'Kommende':
-				return 'text-blue-500';
+				return 'text-blue-500 font-medium';
 			case 'Aktiv':
-				return 'text-green-500';
+				return 'text-green-500 font-medium';
 			case 'Ferdig':
-				return 'text-gray-500';
+				return 'text-gray-500 font-medium';
 			default:
 				return '';
 		}
 	}
 </script>
 
-<div class="event-table">
-	<div class="tabs">
+<div class="rounded-2xl overflow-hidden shadow-lg bg-white border border-gray-100">
+	<div class="flex bg-white p-2 gap-2 flex-wrap">
 		<button
-			class={activeTab === 'upcoming' ? 'active' : ''}
+			class={`py-3 px-6 font-medium rounded-lg cursor-pointer transition-all duration-200 ease-in-out text-gray-500 flex-1 min-w-[150px] ${activeTab === 'upcoming' ? 'bg-blue-100 text-blue-600 font-semibold' : 'hover:bg-gray-100 hover:text-blue-500'}`}
 			onclick={() => (activeTab = 'upcoming')}
 		>
 			Arrangementer
 		</button>
-		<button class={activeTab === 'past' ? 'active' : ''} onclick={() => (activeTab = 'past')}>
+		<button 
+			class={`py-3 px-6 font-medium rounded-lg cursor-pointer transition-all duration-200 ease-in-out text-gray-500 flex-1 min-w-[150px] ${activeTab === 'past' ? 'bg-blue-100 text-blue-600 font-semibold' : 'hover:bg-gray-100 hover:text-blue-500'}`}
+			onclick={() => (activeTab = 'past')}
+		>
 			Tidligere arrangementer
 		</button>
 	</div>
-	<div class="search-container">
+	<div class="relative w-full px-2">
 		<input
 			type="text"
 			placeholder="Søk etter arrangementer..."
 			bind:value={search}
-			class="search-input"
-		/>
+			class="w-full py-3 pr-32 pl-4 border border-gray-300 rounded-lg text-base focus:outline-none focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
 
-    {#if $user?.role === 'board'}
-    <div class="button-wrapper">
-    <Button onclick={() => goto(`arrangementer/ny`)}>Nytt arrangement</Button>
-    </div>
-    {/if}
+		/>
 
-  </div> 
-		{#if filteredEvents.length === 0}
-			<div class="empty-state">
-				Ingen {activeTab === 'upcoming' ? 'kommende' : 'tidligere'} arrangementer å vise.
-			</div>
-		{:else}
-			<div class="table-container">
-				<table>
-					<thead>
-						<tr>
-							<th>Arrangement</th>
-							<th>Dato</th>
-							<th>Antall vakter</th>
-							<th>Status</th>
-							<th aria-label="Handlinger"></th>
-						</tr>
-					</thead>
-					<tbody>
-						{#each filteredEvents as event (event.id)}
-							{@const status = getEventStatus(event)}
-							<tr class="event.row" onclick={() => goto(`arrangementer/${event.id}`)}>
-								<td>{event.name}</td>
-								<td>{formatDate(event.date)}</td>
-								<td>{countShifts(event)}</td>
-								<td class={getStatusClass(status)}>{status}</td>
-								<td class="action-column">
-									<!-- Dette kommer når eg har edit side -->
-                  {#if $user?.role === 'board'}
-                  <a
-										href="arrangementer/{event.id}/edit"
-										class="edit-icon"
-										aria-label="Rediger arrangement"
-									>
-										<SquarePen size={18} />
-									</a>
-									{/if}
-								</td>
-							</tr>
-						{/each}
-					</tbody>
-				</table>
-			</div>
+		{#if $user?.role === 'board'}
+		<div class="absolute top-1/2 right-3 transform -translate-y-1/2">
+			<Button onclick={() => goto(`arrangementer/ny`)}>Nytt arrangement</Button>
+		</div>
 		{/if}
+	</div> 
+	
+	{#if filteredEvents.length === 0}
+		<div class="py-12 px-8 text-center text-gray-500 font-medium mx-4 my-4">
+			Ingen {activeTab === 'upcoming' ? 'kommende' : 'tidligere'} arrangementer å vise.
+		</div>
+	{:else}
+		<div class="overflow-x-auto p-2">
+			<table class="w-full min-w-[600px]">
+				<thead>
+					<tr>
+						<th class="p-4 text-left border-b-2 border-gray-200">Arrangement</th>
+						<th class="p-4 text-left border-b-2 border-gray-200">Dato</th>
+						<th class="p-4 text-left border-b-2 border-gray-200">Antall vakter</th>
+						<th class="p-4 text-left border-b-2 border-gray-200">Status</th>
+						<th class="p-4 text-left border-b-2 border-gray-200" aria-label="Handlinger"></th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each filteredEvents as event (event.id)}
+						{@const status = getEventStatus(event)}
+						<tr class="cursor-pointer hover:bg-gray-50" onclick={() => goto(`arrangementer/${event.id}`)}>
+							<td class="p-4 border-b border-gray-100 break-words whitespace-nowrap overflow-hidden overflow-ellipsis max-w-[200px]">
+								{event.name}
+							</td>
+							<td class="p-4 border-b border-gray-100 break-words whitespace-nowrap overflow-hidden overflow-ellipsis max-w-[200px]">
+								{formatDate(event.date)}
+							</td>
+							<td class="p-4 border-b border-gray-100 break-words whitespace-nowrap overflow-hidden overflow-ellipsis max-w-[200px]">
+								{countShifts(event)}
+							</td>
+							<td class={`p-4 border-b border-gray-100 break-words whitespace-nowrap overflow-hidden overflow-ellipsis max-w-[200px] ${getStatusClass(status)}`}>
+								{status}
+							</td>
+							<td class="p-4 border-b border-gray-100">
+								{#if $user?.role === 'board'}
+								<a
+									href="arrangementer/{event.id}/edit"
+									class="inline-flex opacity-70 transition-all duration-200 ease-in-out text-gray-400 hover:text-blue-500 hover:opacity-100"
+									aria-label="Rediger arrangement"
+								>
+									<SquarePen size={18} />
+								</a>
+								{/if}
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{/if}
 </div>
-
-<style>
-	.event-table {
-		border-radius: 16px;
-		overflow: hidden;
-		box-shadow:
-			0 10px 15px -3px rgba(0, 0, 0, 0.1),
-			0 4px 6px -2px rgba(0, 0, 0, 0.05);
-		background-color: var(--background-color);
-		border: 1px solid #f0f0f0;
-	}
-
-	.tabs {
-		display: flex;
-		background-color: backround-color;
-		padding: 0.5rem;
-		gap: 0.5rem;
-		flex-wrap: wrap;
-	}
-
-	.tabs button {
-		padding: 0.75rem 1.5rem;
-		font-weight: 500;
-		border-radius: 8px;
-		cursor: pointer;
-		transition: all 0.2s ease;
-		color: #6b7280;
-		flex: 1; /* Flexible width */
-		min-width: 150px
-	}
-
-	.tabs button:hover {
-		background-color: #f3f4f6;
-		color: #3b82f6;
-	}
-
-	.tabs button.active {
-		background-color: #eff6ff;
-		color: #2563eb;
-		font-weight: 600;
-	}
-
-	.table-container {
-		overflow-x: auto;
-		padding: 0.5rem;
-	}
-
-	table {
-		width: 100%;
-		min-width: 600px;
-	}
-
-	th,
-	td {
-		padding: 1rem;
-		text-align: left;
-	}
-
-	@media (max-width: 768px) {
-		th,
-		td {
-			padding: 0.75rem 0.5rem;
-		}
-	}
-
-	th {
-		border-bottom: 2px solid #e5e7eb;
-	}
-
-	td {
-		border-bottom: 1px solid #f3f4f6;
-		word-break: break-word;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		max-width: 200px;
-	}
-
-	tr:last-child td {
-		border-bottom: none;
-	}
-
-	tr:hover td {
-		background-color: #f9fafb;
-	}
-
-	.empty-state {
-		padding: 3rem 2rem;
-		text-align: center;
-		color: #6b7280;
-		font-weight: 500;
-		margin: 1rem;
-	}
-
-	.text-blue-500 {
-		color: #3b82f6;
-		font-weight: 500;
-	}
-
-	.text-green-500 {
-		color: #10b981;
-		font-weight: 500;
-	}
-
-	.text-gray-500 {
-		color: #6b7280;
-		font-weight: 500;
-	}
-
-	.edit-icon {
-		display: inline-flex;
-		opacity: 0.7;
-		transition: all 0.2s ease;
-		color: #9ca3af;
-	}
-
-	.edit-icon:hover {
-		color: #3b82f6;
-		opacity: 1;
-	}
-	@media (max-width: 480px) {
-		.event-table {
-			border-radius: 8px;
-		}
-
-		.empty-state {
-			padding: 2rem 1rem;
-		}
-	}
-	.search-container {
-    position: relative;
-    width: 100%;
-  
-	}
-
-	.search-input {
-    width: 100%;
-    padding: 0.75rem 8rem 0.75rem 1rem; 
-    border: 1px solid #ccc;
-    border-radius: 8px;
-    font-size: 1rem;
-  }
-	.search-input:focus {
-		outline: none;
-		border-color: #3b82f6;
-		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
-		background-color: background-color;
-	}
-  .button-wrapper {
-    position: absolute;
-    top: 50%;
-    right: 0.5rem;
-    transform: translateY(-50%);
-  }
-
-	.search-input::placeholder {
-		color: #9ca3af;
-	}
-</style>

From bb11759e98724b94039f45b247c745a3ed6d1493 Mon Sep 17 00:00:00 2001
From: "Gard.Kalland" <github.blunderer148@passmail.net>
Date: Thu, 8 May 2025 16:52:37 +0200
Subject: [PATCH 06/42] sort Active shift

---
 apps/www/src/lib/components/portal/EventTable.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/www/src/lib/components/portal/EventTable.svelte b/apps/www/src/lib/components/portal/EventTable.svelte
index 536566a2..e63a80b6 100644
--- a/apps/www/src/lib/components/portal/EventTable.svelte
+++ b/apps/www/src/lib/components/portal/EventTable.svelte
@@ -50,7 +50,11 @@
 	const upcomingEvents = $derived([
 		...events,
 		...outdated.filter((event: Event) => hasActiveOrUpcoming(event))
-	]);
+	].sort((a, b) => {
+    if(hasActiveShifts(a)) return -1;
+    if(hasActiveShifts(b)) return 1;
+    return 0;
+  }));
 
 	const pastEvnts = $derived(outdated.filter((event: Event) => !hasActiveOrUpcoming(event)));
 

From 65a2dc155eafd443bc3617c807422c980c40b65a Mon Sep 17 00:00:00 2001
From: "Gard.Kalland" <github.blunderer148@passmail.net>
Date: Thu, 8 May 2025 22:54:01 +0200
Subject: [PATCH 07/42] =?UTF-8?q?New=20UI=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../portal/arrangementer/[id]/+page.svelte    | 154 ++++++++++++++----
 1 file changed, 118 insertions(+), 36 deletions(-)

diff --git a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
index 6ed2cba1..2067f900 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
@@ -1,55 +1,137 @@
 <script lang="ts">
-	import Heading from '$lib/components/ui/Heading.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
 	import { subHours } from 'date-fns';
 	import { formatDate, time } from '$lib/date';
 	import { capitalize } from '$lib/utils';
 	import { enhance } from '$app/forms';
 	import { getUser } from '$lib/context/user.context.js';
+	import { X, Plus, Calendar, Clock, Users } from '@lucide/svelte';
 
 	let { data } = $props();
-
 	let user = getUser();
+	let activeTab = $state('details');
+
 </script>
 
 <svelte:head>
 	<title>{data.event.name}</title>
 </svelte:head>
 
-<Heading>{data.event.name}</Heading>
-
 <section class="mt-8">
-	<Heading level={2}>Vakter</Heading>
 
-	<ul class="mt-2 flex flex-col gap-4">
-		{#each data.event.shifts as shift}
-			{@const isInShift = shift.members.some((member) => member.userId === $user?.id)}
-			<li class="block rounded-lg border bg-white p-4">
-				<p>{capitalize(formatDate(shift.startAt))}</p>
-				<p>{time(subHours(shift.startAt, 2))} - {time(subHours(shift.endAt, 2))}</p>
-				<p><b>Ansvarlige</b>: {shift.members.map((member) => member.user.name).join(', ')}</p>
 
-				{#if !isInShift}
-					<form class="mt-4" action="?/join" method="post" use:enhance>
-						<input type="hidden" name="shiftId" value={shift.id} />
-						<button class="text-blue-500 hover:underline">Bli med på vakten &rarr;</button>
-					</form>
-				{:else}
-					<form class="mt-4" action="?/leave" method="post" use:enhance>
-						<input type="hidden" name="shiftId" value={shift.id} />
-						<button class="text-red-500 hover:underline">Forlat vakten &rarr;</button>
-					</form>
-				{/if}
-			</li>
-		{/each}
-	</ul>
-</section>
-
-<section class="mt-8">
-	{#if data.user?.role === 'board'}
-		<Heading level={2}>Farlig</Heading>
-		<form action="?/delete" method="post" use:enhance>
-			<Button intent="danger" class="mt-4">Slett arrangement</Button>
-		</form>
-	{/if}
+<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+	<div class="bg-gray-50 px-6 py-4 border-b border-gray-100 flex justify-between items-center">
+		<div>
+			<h1 class="text-xl font-semibold text-gray-800">{data.event.name}</h1>
+			<p class="text-sm text-gray-500">{formatDate(data.event.date)}</p>
+		</div>
+	</div>
+	
+		<div class="px-6 pt-4 border-b border-gray-100">
+			<div class="flex gap-2">
+				<button
+					class={`px-4 py-2 font-medium rounded-t-lg transition-colors ${activeTab === 'details' ? 'text-blue-600 border-b-2 border-blue-500' : 'text-gray-500 hover:text-gray-700'}`}
+					onclick={() => (activeTab = 'details')}
+				>
+					Detaljer
+				</button>
+				<button
+					class={`px-4 py-2 font-medium rounded-t-lg transition-colors ${activeTab === 'shifts' ? 'text-blue-600 border-b-2 border-blue-500' : 'text-gray-500 hover:text-gray-700'}`}
+					onclick={() => (activeTab = 'shifts')}
+				>
+					Vakter
+				</button>
+			</div>
+		</div>
+	
+		<div class="p-6">
+			{#if activeTab === 'details'}
+				<div class="space-y-4">
+					<div class="flex gap-2 items-start">
+						<div class="bg-blue-50 p-2 rounded-lg">
+							<Calendar size={20} class="text-blue-500" />
+						</div>
+						<div>
+							<h3 class="font-medium">Dato</h3>
+							<p>{formatDate(data.event.date)}</p>
+						</div>
+					</div>
+					
+					<div class="flex gap-2 items-start">
+						<div class="bg-blue-50 p-2 rounded-lg">
+							<Clock size={20} class="text-blue-500" />
+						</div>
+						<div>
+							<h3 class="font-medium">Antall vakter</h3>
+							<p>
+								{data.event.shifts.length} {data.event.shifts.length === 1 ? 'vakt' : 'vakter'}
+							</p>
+						</div>
+					</div>
+					
+					<div class="flex gap-2 items-start">
+						<div class="bg-blue-50 p-2 rounded-lg">
+							<Users size={20} class="text-blue-500" />
+						</div>
+						<div>
+							<h3 class="font-medium">Ansvarlige</h3>
+							<ul class="text-sm">
+								{#each data.event.shifts as shift, i}
+									<li>
+										<strong>Vakt {i + 1}:</strong> {shift.members.map((member) => member.user.name).join(', ') || 'Ingen ansvarlige'}
+									</li>
+								{/each}
+							</ul>
+						</div>
+					</div>
+				</div>
+			{:else if activeTab === 'shifts'}
+				<div class="space-y-4">
+					{#each data.event.shifts as shift, i}
+						{@const isInShift = shift.members.some((member) => member.userId === $user?.id)}
+						<div class="rounded-lg border border-gray-200 overflow-hidden">
+							<div class="bg-gray-50 px-4 py-2 border-b border-gray-200">
+								<h3 class="font-medium">Vakt {i + 1}</h3>
+							</div>
+							<div class="p-4 space-y-2">
+								<div class="grid grid-cols-2 gap-2">
+									<div>
+										<p class="text-sm text-gray-500">Dato</p>
+										<p class="font-medium">{capitalize(formatDate(shift.startAt))}</p>
+									</div>
+									<div>
+										<p class="text-sm text-gray-500">Tid</p>
+										<p class="font-medium">{time(subHours(shift.startAt, 2))} - {time(subHours(shift.endAt, 2))}</p>
+									</div>
+								</div>
+								
+								<div>
+									<p class="text-sm text-gray-500">Ansvarlige</p>
+									<p class="font-medium">{shift.members.map((member) => member.user.name).join(', ') || 'Ingen ansvarlige'}</p>
+								</div>
+								
+								{#if !isInShift}
+									<form action="?/join" method="post" use:enhance>
+										<input type="hidden" name="shiftId" value={shift.id} />
+										<button class="inline-flex items-center text-blue-500 hover:text-blue-700 font-medium text-sm">
+											<Plus size={16} />
+											Bli med på vakten
+										</button>
+									</form>
+								{:else}
+									<form action="?/leave" method="post" use:enhance>
+										<input type="hidden" name="shiftId" value={shift.id} />
+										<button class="inline-flex items-center text-red-500 hover:text-red-700 font-medium text-sm">
+											<X size={16} />
+											Forlat vakten
+										</button>
+									</form>
+								{/if}
+							</div>
+						</div>
+					{/each}
+				</div>
+			{/if}
+				</div>
+			</div>
 </section>

From 2e2bf434431d47000f24c188dbbd2e947fb1a2ad Mon Sep 17 00:00:00 2001
From: "Gard.Kalland" <github.blunderer148@passmail.net>
Date: Tue, 13 May 2025 13:25:47 +0200
Subject: [PATCH 08/42] =?UTF-8?q?New=20UI=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../portal/arrangementer/ny/+page.svelte      | 249 +++++++++++-------
 1 file changed, 156 insertions(+), 93 deletions(-)

diff --git a/apps/www/src/routes/portal/arrangementer/ny/+page.svelte b/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
index 51cbb19d..fd73f5b6 100644
--- a/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { EventHandler } from 'svelte/elements';
-	import { X } from '@lucide/svelte';
+	import { X, Plus, Save, Clock } from '@lucide/svelte';
 	import Heading from '$lib/components/ui/Heading.svelte';
 	import FormInput from '$lib/components/ui/form/FormInput.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
@@ -56,99 +56,162 @@
 
 <Heading class="mb-4">Nytt arrangement</Heading>
 
-{#if error}
-	<div class="mb-4 rounded-md bg-red-50 p-4 text-red-700">
-		<p>{error}</p>
-	</div>
-{/if}
+<div class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-gray-100 bg-white shadow-sm">
+	<div
+		class="flex items-center justify-between border-b border-gray-100 bg-gray-50 px-6 py-4"
+	></div>
+	<div class="p-6">
+		{#if error}
+			<div class="mb-4 rounded-md bg-red-50 p-4 text-red-700">
+				<p>{error}</p>
+			</div>
+		{/if}
 
-{#if successMessage}
-	<div class="mb-4 rounded-md bg-green-50 p-4 text-green-700">
-		<p>{successMessage}</p>
-	</div>
-{/if}
-
-<form onsubmit={handleSubmit} class="space-y-2">
-	<FormInput
-		label="Navn"
-		description="Navnet på arrangementet"
-		placeholder="Fest med Foobar"
-		bind:value={createEventState.name}
-		required
-	/>
-	<FormInput
-		label="Dato"
-		description="Start datoen på arrangementet"
-		bind:value={createEventState.date}
-		type="datetime-local"
-		required
-	/>
-	{#each createEventState.shifts as shift, i}
-		{@const shiftLength = differenceInHours(shift.endAt, shift.startAt)}
-		<div class="relative flex flex-col space-y-2 rounded-lg border border-border p-4">
-			<button
-				type="button"
-				class="absolute right-4 top-4 text-red-400 transition-colors hover:text-red-600"
-				onclick={() => createEventState.deleteShift(i)}
-			>
-				<X class="h-4 w-4" />
-			</button>
-			<h2 class="text-lg font-semibold">Vakt {i + 1}</h2>
-			<FormInput
-				label="Start"
-				description="Start tidspunkt for vakten"
-				bind:value={shift.startAt}
-				type="datetime-local"
-				required
-			/>
-			<FormInput
-				label="Slutt"
-				description="Slutt tidspunkt for vakten"
-				bind:value={shift.endAt}
-				type="datetime-local"
-				required
-			/>
-			{#if shiftLength >= 4}
-				<span class="text-sm font-medium text-orange-500">NB: Vakten er lengre enn 4 timer!</span>
-			{/if}
-			<span class="mt-8 text-sm font-medium">Ansvarlige</span>
-			<div class="text-xs text-gray-500">
-				Alle ansvarlige vil få en e-post med kalenderinvitasjon når arrangementet opprettes.
+		{#if successMessage}
+			<div class="mb-4 rounded-md bg-green-50 p-4 text-green-700">
+				<p>{successMessage}</p>
 			</div>
-			{#each createEventState.shifts[i].users as user, j (user)}
-				<div class="flex items-center gap-2">
-					<Combobox
-						name="user"
-						class="flex-1"
-						bind:value={createEventState.shifts[i].users[j].name}
-						disabledOptions={createEventState.shifts[i].users.map((user) => user.id)}
-						onchange={(option) => {
-							const id = option?.value;
-							if (id) {
-								createEventState.shifts[i].users[j].id = id;
-							}
-						}}
-						options={data.users}
-						placeholder="Velg en bruker"
+		{/if}
+
+		<form onsubmit={handleSubmit} class="space-y-6">
+			<div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
+				<div class="space-y-4">
+					<FormInput
+						label="Navn"
+						description="Navn på arrangement"
+						placeholder="Fest med Foobar"
+						bind:value={createEventState.name}
+						required
+					/>
+					<FormInput
+						label="Dato"
+						description="Start datoen på arrangementet"
+						bind:value={createEventState.date}
+						type="datetime-local"
+						required
 					/>
-					<button
-						type="button"
-						class="flex h-10 w-10 items-center justify-center rounded-lg border border-border bg-white transition-colors hover:text-red-500"
-						onclick={() => createEventState.deleteUserFromShift(i, user.id)}
-					>
-						<X class="size-4" />
-					</button>
 				</div>
-			{:else}
-				<p class="text-sm text-gray-600">Ingen ansvarlige. Husk å legge til.</p>
-			{/each}
-			<Button type="button" onclick={() => createEventState.addUserToShift(i)}
-				>Legg til bruker</Button
-			>
-		</div>
-	{/each}
-	<Button type="button" onclick={() => createEventState.addShift()}>Legg til vakt</Button>
-	<Button type="submit" disabled={isSubmitting}>
-		{isSubmitting ? 'Lagrer...' : 'Lagre'}
-	</Button>
-</form>
+			</div>
+
+			<div>
+				<h2 class="mb-4 text-lg font-medium">Vakter</h2>
+				{#each createEventState.shifts as shift, i}
+					{@const startDate = shift.startAt ? new Date(shift.startAt) : new Date()}
+					{@const endDate = shift.endAt ? new Date(shift.endAt) : new Date()}
+					{@const shiftLength = differenceInHours(endDate, startDate)}
+					<div
+						class="relative mb-4 flex flex-col space-y-4 rounded-lg border border-gray-200 bg-white p-4"
+					>
+						<div class="flex items-center justify-between">
+							<h3 class="text-base font-medium">Vakt {i + 1}</h3>
+							<button
+								type="button"
+								class="rounded-full p-1 text-red-400 transition-colors hover:bg-red-50 hover:text-red-600"
+								onclick={() => createEventState.deleteShift(i)}
+							>
+								<X class="h-4 w-4" />
+							</button>
+						</div>
+
+						<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+							<FormInput
+								label="Start"
+								description="Start tidspunkt for vakten"
+								bind:value={shift.startAt}
+								type="datetime-local"
+								required
+							/>
+							<FormInput
+								label="Slutt"
+								description="Slutt tidspunkt for vakten"
+								bind:value={shift.endAt}
+								type="datetime-local"
+								required
+							/>
+						</div>
+
+						{#if shiftLength >= 4}
+							<div class="flex items-center gap-2 rounded bg-orange-50 p-2 text-sm text-orange-700">
+								<Clock size={16} />
+								<span>NB: Vakten er lengre enn 4 timer!</span>
+							</div>
+						{/if}
+
+						<div class="mt-2 border-t border-gray-100 pt-4">
+							<div class="mb-2 flex items-center justify-between">
+								<h4 class="font-medium">Ansvarlige</h4>
+								<Button
+									type="button"
+									onclick={() => createEventState.addUserToShift(i)}
+									class="h-auto px-3 py-1 text-sm"
+								>
+									<Plus size={14} class="mr-1" />
+									Legg til
+								</Button>
+							</div>
+							<p class="mb-3 text-xs text-gray-500">
+								Alle ansvarlige vil få en e-post med kalenderinvitasjon når arrangementet
+								oppdateres.
+							</p>
+
+							<div class="space-y-2">
+								{#each createEventState.shifts[i].users as user, j (user)}
+									<div class="flex items-center gap-2">
+										<Combobox
+											name="user"
+											class="flex-1"
+											bind:value={createEventState.shifts[i].users[j].name}
+											disabledOptions={createEventState.shifts[i].users.map((user) => user.id)}
+											onchange={(option) => {
+												const id = option?.value;
+												if (id) {
+													createEventState.shifts[i].users[j].id = id;
+												}
+											}}
+											options={data.users}
+											placeholder="Velg en bruker"
+										/>
+										<button
+											type="button"
+											class="flex h-10 w-10 items-center justify-center rounded-lg border border-gray-200 bg-white transition-colors hover:text-red-500"
+											onclick={() => createEventState.deleteUserFromShift(i, user.id)}
+										>
+											<X class="size-4" />
+										</button>
+									</div>
+								{:else}
+									<p class="text-sm text-gray-500 italic py-2">
+										Ingen ansvarlige. Husk å legge til.
+									</p>
+								{/each}
+							</div>
+						</div>
+					</div>
+				{/each}
+
+				<Button
+					type="button"
+					intent="primary"
+					class="mb-6 w-full justify-center"
+					onclick={() => createEventState.addShift()}
+				>
+					<Plus size={16} class="mr-1" />
+					Legg til ny vakt
+				</Button>
+			</div>
+
+			<div class="flex justify-end gap-4 border-t border-gray-100 pt-6">
+				<!-- <Button type="button" intent="warning" onclick= () => {`${goto(/arrangementer)}`}>Avbryt</Button> -->
+				<Button
+					type="submit"
+					intent="primary"
+					disabled={isSubmitting}
+					class="flex items-center gap-2"
+				>
+					<Save size={16} />
+					{isSubmitting ? 'Lagrer...' : 'Lagre endringer'}
+				</Button>
+			</div>
+		</form>
+	</div>
+</div>

From 073e4bc806320c815c90d838eec0a9567c958636 Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Wed, 14 May 2025 10:49:55 +0200
Subject: [PATCH 09/42] format

---
 .../lib/components/portal/EventTable.svelte   |  87 ++--
 apps/www/src/lib/services/event.service.ts    |  42 ++
 .../portal/arrangementer/[id]/+page.svelte    |  81 ++--
 .../arrangementer/[id]/edit/+page.server.ts   |  97 +++--
 .../arrangementer/[id]/edit/+page.svelte      | 395 ++++++++++--------
 5 files changed, 414 insertions(+), 288 deletions(-)

diff --git a/apps/www/src/lib/components/portal/EventTable.svelte b/apps/www/src/lib/components/portal/EventTable.svelte
index e63a80b6..02dd545e 100644
--- a/apps/www/src/lib/components/portal/EventTable.svelte
+++ b/apps/www/src/lib/components/portal/EventTable.svelte
@@ -47,14 +47,13 @@
 		return hasActiveShifts(event) || hasUpcomingShifts(event);
 	}
 
-	const upcomingEvents = $derived([
-		...events,
-		...outdated.filter((event: Event) => hasActiveOrUpcoming(event))
-	].sort((a, b) => {
-    if(hasActiveShifts(a)) return -1;
-    if(hasActiveShifts(b)) return 1;
-    return 0;
-  }));
+	const upcomingEvents = $derived(
+		[...events, ...outdated.filter((event: Event) => hasActiveOrUpcoming(event))].sort((a, b) => {
+			if (hasActiveShifts(a)) return -1;
+			if (hasActiveShifts(b)) return 1;
+			return 0;
+		})
+	);
 
 	const pastEvnts = $derived(outdated.filter((event: Event) => !hasActiveOrUpcoming(event)));
 
@@ -92,16 +91,16 @@
 	}
 </script>
 
-<div class="rounded-2xl overflow-hidden shadow-lg bg-white border border-gray-100">
-	<div class="flex bg-white p-2 gap-2 flex-wrap">
+<div class="overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-lg">
+	<div class="flex flex-wrap gap-2 bg-white p-2">
 		<button
-			class={`py-3 px-6 font-medium rounded-lg cursor-pointer transition-all duration-200 ease-in-out text-gray-500 flex-1 min-w-[150px] ${activeTab === 'upcoming' ? 'bg-blue-100 text-blue-600 font-semibold' : 'hover:bg-gray-100 hover:text-blue-500'}`}
+			class={`min-w-[150px] flex-1 cursor-pointer rounded-lg px-6 py-3 font-medium text-gray-500 transition-all duration-200 ease-in-out ${activeTab === 'upcoming' ? 'bg-blue-100 font-semibold text-blue-600' : 'hover:bg-gray-100 hover:text-blue-500'}`}
 			onclick={() => (activeTab = 'upcoming')}
 		>
 			Arrangementer
 		</button>
-		<button 
-			class={`py-3 px-6 font-medium rounded-lg cursor-pointer transition-all duration-200 ease-in-out text-gray-500 flex-1 min-w-[150px] ${activeTab === 'past' ? 'bg-blue-100 text-blue-600 font-semibold' : 'hover:bg-gray-100 hover:text-blue-500'}`}
+		<button
+			class={`min-w-[150px] flex-1 cursor-pointer rounded-lg px-6 py-3 font-medium text-gray-500 transition-all duration-200 ease-in-out ${activeTab === 'past' ? 'bg-blue-100 font-semibold text-blue-600' : 'hover:bg-gray-100 hover:text-blue-500'}`}
 			onclick={() => (activeTab = 'past')}
 		>
 			Tidligere arrangementer
@@ -112,19 +111,18 @@
 			type="text"
 			placeholder="Søk etter arrangementer..."
 			bind:value={search}
-			class="w-full py-3 pr-32 pl-4 border border-gray-300 rounded-lg text-base focus:outline-none focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
-
+			class="w-full rounded-lg border border-gray-300 py-3 pl-4 pr-32 text-base focus:border-blue-500 focus:outline-none focus:ring focus:ring-blue-200 focus:ring-opacity-50"
 		/>
 
 		{#if $user?.role === 'board'}
-		<div class="absolute top-1/2 right-3 transform -translate-y-1/2">
-			<Button onclick={() => goto(`arrangementer/ny`)}>Nytt arrangement</Button>
-		</div>
+			<div class="absolute right-3 top-1/2 -translate-y-1/2 transform">
+				<Button onclick={() => goto(`arrangementer/ny`)}>Nytt arrangement</Button>
+			</div>
 		{/if}
-	</div> 
-	
+	</div>
+
 	{#if filteredEvents.length === 0}
-		<div class="py-12 px-8 text-center text-gray-500 font-medium mx-4 my-4">
+		<div class="mx-4 my-4 px-8 py-12 text-center font-medium text-gray-500">
 			Ingen {activeTab === 'upcoming' ? 'kommende' : 'tidligere'} arrangementer å vise.
 		</div>
 	{:else}
@@ -132,38 +130,49 @@
 			<table class="w-full min-w-[600px]">
 				<thead>
 					<tr>
-						<th class="p-4 text-left border-b-2 border-gray-200">Arrangement</th>
-						<th class="p-4 text-left border-b-2 border-gray-200">Dato</th>
-						<th class="p-4 text-left border-b-2 border-gray-200">Antall vakter</th>
-						<th class="p-4 text-left border-b-2 border-gray-200">Status</th>
-						<th class="p-4 text-left border-b-2 border-gray-200" aria-label="Handlinger"></th>
+						<th class="border-b-2 border-gray-200 p-4 text-left">Arrangement</th>
+						<th class="border-b-2 border-gray-200 p-4 text-left">Dato</th>
+						<th class="border-b-2 border-gray-200 p-4 text-left">Antall vakter</th>
+						<th class="border-b-2 border-gray-200 p-4 text-left">Status</th>
+						<th class="border-b-2 border-gray-200 p-4 text-left" aria-label="Handlinger"></th>
 					</tr>
 				</thead>
 				<tbody>
 					{#each filteredEvents as event (event.id)}
 						{@const status = getEventStatus(event)}
-						<tr class="cursor-pointer hover:bg-gray-50" onclick={() => goto(`arrangementer/${event.id}`)}>
-							<td class="p-4 border-b border-gray-100 break-words whitespace-nowrap overflow-hidden overflow-ellipsis max-w-[200px]">
+						<tr
+							class="cursor-pointer hover:bg-gray-50"
+							onclick={() => goto(`arrangementer/${event.id}`)}
+						>
+							<td
+								class="max-w-[200px] overflow-hidden overflow-ellipsis whitespace-nowrap break-words border-b border-gray-100 p-4"
+							>
 								{event.name}
 							</td>
-							<td class="p-4 border-b border-gray-100 break-words whitespace-nowrap overflow-hidden overflow-ellipsis max-w-[200px]">
+							<td
+								class="max-w-[200px] overflow-hidden overflow-ellipsis whitespace-nowrap break-words border-b border-gray-100 p-4"
+							>
 								{formatDate(event.date)}
 							</td>
-							<td class="p-4 border-b border-gray-100 break-words whitespace-nowrap overflow-hidden overflow-ellipsis max-w-[200px]">
+							<td
+								class="max-w-[200px] overflow-hidden overflow-ellipsis whitespace-nowrap break-words border-b border-gray-100 p-4"
+							>
 								{countShifts(event)}
 							</td>
-							<td class={`p-4 border-b border-gray-100 break-words whitespace-nowrap overflow-hidden overflow-ellipsis max-w-[200px] ${getStatusClass(status)}`}>
+							<td
+								class={`max-w-[200px] overflow-hidden overflow-ellipsis whitespace-nowrap break-words border-b border-gray-100 p-4 ${getStatusClass(status)}`}
+							>
 								{status}
 							</td>
-							<td class="p-4 border-b border-gray-100">
+							<td class="border-b border-gray-100 p-4">
 								{#if $user?.role === 'board'}
-								<a
-									href="arrangementer/{event.id}/edit"
-									class="inline-flex opacity-70 transition-all duration-200 ease-in-out text-gray-400 hover:text-blue-500 hover:opacity-100"
-									aria-label="Rediger arrangement"
-								>
-									<SquarePen size={18} />
-								</a>
+									<a
+										href="arrangementer/{event.id}/edit"
+										class="inline-flex text-gray-400 opacity-70 transition-all duration-200 ease-in-out hover:text-blue-500 hover:opacity-100"
+										aria-label="Rediger arrangement"
+									>
+										<SquarePen size={18} />
+									</a>
 								{/if}
 							</td>
 						</tr>
diff --git a/apps/www/src/lib/services/event.service.ts b/apps/www/src/lib/services/event.service.ts
index 5ad50887..3464574c 100644
--- a/apps/www/src/lib/services/event.service.ts
+++ b/apps/www/src/lib/services/event.service.ts
@@ -67,6 +67,42 @@ export class EventService {
 		return event;
 	}
 
+	async updateEvent(id: string, eventData: Partial<{ name: string; date: Date }>) {
+		const event = await this.#db
+			.insert(events)
+			.values({
+				id,
+				...eventData
+			})
+			.onConflictDoUpdate({
+				target: events.id,
+				set: eventData
+			})
+			.returning()
+			.then((rows) => rows[0]);
+
+		return event;
+	}
+
+	async updateShift(
+		id: string,
+		shiftData: Partial<{ eventId: string; startAt: Date; endAt: Date }>
+	) {
+		const shift = await this.#db
+			.insert(shifts)
+			.values({
+				id,
+				...shiftData
+			})
+			.onConflictDoUpdate({
+				target: shifts.id,
+				set: shiftData
+			})
+			.returning()
+			.then((rows) => rows[0]);
+		return shift;
+	}
+
 	async findUpcomingEvents() {
 		const event = await this.#db.query.events.findMany({
 			orderBy: (row, { asc }) => [asc(row.date)],
@@ -110,4 +146,10 @@ export class EventService {
 	async delete(id: string) {
 		await this.#db.delete(events).where(eq(events.id, id));
 	}
+
+	// This deletes the shift and its user_shifts
+	async deleteShift(id: string) {
+		await this.#db.delete(userShifts).where(eq(userShifts.shiftId, id));
+		await this.#db.delete(shifts).where(eq(shifts.id, id));
+	}
 }
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
index 2067f900..1b098ceb 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
@@ -9,7 +9,6 @@
 	let { data } = $props();
 	let user = getUser();
 	let activeTab = $state('details');
-
 </script>
 
 <svelte:head>
@@ -17,38 +16,38 @@
 </svelte:head>
 
 <section class="mt-8">
-
-
-<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
-	<div class="bg-gray-50 px-6 py-4 border-b border-gray-100 flex justify-between items-center">
-		<div>
-			<h1 class="text-xl font-semibold text-gray-800">{data.event.name}</h1>
-			<p class="text-sm text-gray-500">{formatDate(data.event.date)}</p>
+	<div
+		class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-gray-100 bg-white shadow-sm"
+	>
+		<div class="flex items-center justify-between border-b border-gray-100 bg-gray-50 px-6 py-4">
+			<div>
+				<h1 class="text-xl font-semibold text-gray-800">{data.event.name}</h1>
+				<p class="text-sm text-gray-500">{formatDate(data.event.date)}</p>
+			</div>
 		</div>
-	</div>
-	
-		<div class="px-6 pt-4 border-b border-gray-100">
+
+		<div class="border-b border-gray-100 px-6 pt-4">
 			<div class="flex gap-2">
 				<button
-					class={`px-4 py-2 font-medium rounded-t-lg transition-colors ${activeTab === 'details' ? 'text-blue-600 border-b-2 border-blue-500' : 'text-gray-500 hover:text-gray-700'}`}
+					class={`rounded-t-lg px-4 py-2 font-medium transition-colors ${activeTab === 'details' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
 					onclick={() => (activeTab = 'details')}
 				>
 					Detaljer
 				</button>
 				<button
-					class={`px-4 py-2 font-medium rounded-t-lg transition-colors ${activeTab === 'shifts' ? 'text-blue-600 border-b-2 border-blue-500' : 'text-gray-500 hover:text-gray-700'}`}
+					class={`rounded-t-lg px-4 py-2 font-medium transition-colors ${activeTab === 'shifts' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
 					onclick={() => (activeTab = 'shifts')}
 				>
 					Vakter
 				</button>
 			</div>
 		</div>
-	
+
 		<div class="p-6">
 			{#if activeTab === 'details'}
 				<div class="space-y-4">
-					<div class="flex gap-2 items-start">
-						<div class="bg-blue-50 p-2 rounded-lg">
+					<div class="flex items-start gap-2">
+						<div class="rounded-lg bg-blue-50 p-2">
 							<Calendar size={20} class="text-blue-500" />
 						</div>
 						<div>
@@ -56,21 +55,22 @@
 							<p>{formatDate(data.event.date)}</p>
 						</div>
 					</div>
-					
-					<div class="flex gap-2 items-start">
-						<div class="bg-blue-50 p-2 rounded-lg">
+
+					<div class="flex items-start gap-2">
+						<div class="rounded-lg bg-blue-50 p-2">
 							<Clock size={20} class="text-blue-500" />
 						</div>
 						<div>
 							<h3 class="font-medium">Antall vakter</h3>
 							<p>
-								{data.event.shifts.length} {data.event.shifts.length === 1 ? 'vakt' : 'vakter'}
+								{data.event.shifts.length}
+								{data.event.shifts.length === 1 ? 'vakt' : 'vakter'}
 							</p>
 						</div>
 					</div>
-					
-					<div class="flex gap-2 items-start">
-						<div class="bg-blue-50 p-2 rounded-lg">
+
+					<div class="flex items-start gap-2">
+						<div class="rounded-lg bg-blue-50 p-2">
 							<Users size={20} class="text-blue-500" />
 						</div>
 						<div>
@@ -78,7 +78,9 @@
 							<ul class="text-sm">
 								{#each data.event.shifts as shift, i}
 									<li>
-										<strong>Vakt {i + 1}:</strong> {shift.members.map((member) => member.user.name).join(', ') || 'Ingen ansvarlige'}
+										<strong>Vakt {i + 1}:</strong>
+										{shift.members.map((member) => member.user.name).join(', ') ||
+											'Ingen ansvarlige'}
 									</li>
 								{/each}
 							</ul>
@@ -89,11 +91,11 @@
 				<div class="space-y-4">
 					{#each data.event.shifts as shift, i}
 						{@const isInShift = shift.members.some((member) => member.userId === $user?.id)}
-						<div class="rounded-lg border border-gray-200 overflow-hidden">
-							<div class="bg-gray-50 px-4 py-2 border-b border-gray-200">
+						<div class="overflow-hidden rounded-lg border border-gray-200">
+							<div class="border-b border-gray-200 bg-gray-50 px-4 py-2">
 								<h3 class="font-medium">Vakt {i + 1}</h3>
 							</div>
-							<div class="p-4 space-y-2">
+							<div class="space-y-2 p-4">
 								<div class="grid grid-cols-2 gap-2">
 									<div>
 										<p class="text-sm text-gray-500">Dato</p>
@@ -101,19 +103,26 @@
 									</div>
 									<div>
 										<p class="text-sm text-gray-500">Tid</p>
-										<p class="font-medium">{time(subHours(shift.startAt, 2))} - {time(subHours(shift.endAt, 2))}</p>
+										<p class="font-medium">
+											{time(subHours(shift.startAt, 2))} - {time(subHours(shift.endAt, 2))}
+										</p>
 									</div>
 								</div>
-								
+
 								<div>
 									<p class="text-sm text-gray-500">Ansvarlige</p>
-									<p class="font-medium">{shift.members.map((member) => member.user.name).join(', ') || 'Ingen ansvarlige'}</p>
+									<p class="font-medium">
+										{shift.members.map((member) => member.user.name).join(', ') ||
+											'Ingen ansvarlige'}
+									</p>
 								</div>
-								
+
 								{#if !isInShift}
 									<form action="?/join" method="post" use:enhance>
 										<input type="hidden" name="shiftId" value={shift.id} />
-										<button class="inline-flex items-center text-blue-500 hover:text-blue-700 font-medium text-sm">
+										<button
+											class="inline-flex items-center text-sm font-medium text-blue-500 hover:text-blue-700"
+										>
 											<Plus size={16} />
 											Bli med på vakten
 										</button>
@@ -121,7 +130,9 @@
 								{:else}
 									<form action="?/leave" method="post" use:enhance>
 										<input type="hidden" name="shiftId" value={shift.id} />
-										<button class="inline-flex items-center text-red-500 hover:text-red-700 font-medium text-sm">
+										<button
+											class="inline-flex items-center text-sm font-medium text-red-500 hover:text-red-700"
+										>
 											<X size={16} />
 											Forlat vakten
 										</button>
@@ -132,6 +143,6 @@
 					{/each}
 				</div>
 			{/if}
-				</div>
-			</div>
+		</div>
+	</div>
 </section>
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
index 6d024e44..7d081cc0 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
@@ -3,13 +3,20 @@ import type { Actions, PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ locals, params }) => {
 	const event = await locals.eventService.findFullEventById(params.id);
-
 	if (!event) {
 		throw error(404, 'Event not found');
 	}
 
+	const users = await locals.userService.findAll().then((users) =>
+		users.map((user) => ({
+			label: user.name,
+			value: user.id
+		}))
+	);
+
 	return {
-		event
+		event,
+		users
 	};
 };
 
@@ -19,54 +26,72 @@ export const actions: Actions = {
 			await locals.eventService.delete(params.id);
 			throw redirect(303, '/portal/arrangementer');
 		}
-
 		return fail(401, {
 			message: 'Unauthorized'
 		});
 	},
-	join: async ({ request, locals }) => {
-		if (!locals.user) {
-			return fail(401, {
-				message: 'Not logged in'
-			});
+
+	save: async ({ request, params, locals }) => {
+		if (locals.user?.role !== 'board') {
+			return fail(401, { message: 'Unauthorized' });
 		}
 
 		const formData = await request.formData();
-		const shiftId = formData.get('shiftId');
-		if (!shiftId || typeof shiftId !== 'string') {
-			return fail(400, {
-				message: 'Missing shiftId'
-			});
-		}
 
-		await locals.eventService.createUserShift({
-			shiftId,
-			userId: locals.user.id,
-			status: 'accepted'
+		await locals.eventService.updateEvent(params.id, {
+			name: formData.get('name') as string,
+			date: new Date(formData.get('date') as string)
 		});
 
-		return { success: true };
-	},
-	leave: async ({ request, locals }) => {
-		if (!locals.user) {
-			return fail(401, {
-				message: 'Not logged in'
-			});
+		for (const id of formData.getAll('deletedShiftIds')) {
+			await locals.eventService.deleteShift(id.toString());
 		}
 
-		const formData = await request.formData();
-		const shiftId = formData.get('shiftId');
-		if (!shiftId || typeof shiftId !== 'string') {
-			return fail(400, {
-				message: 'Missing shiftId'
+		const existingEvent = await locals.eventService.findFullEventById(params.id);
+
+		const shiftsCount = parseInt(formData.get('shiftsCount')?.toString() || '0', 10);
+
+		for (let i = 0; i < shiftsCount; i++) {
+			const shiftId = formData.get(`shift[${i}].id`)?.toString();
+			if (!shiftId) continue;
+
+			await locals.eventService.updateShift(shiftId, {
+				eventId: params.id,
+				startAt: new Date(formData.get(`shift[${i}].startAt`) as string),
+				endAt: new Date(formData.get(`shift[${i}].endAt`) as string)
 			});
-		}
 
-		await locals.eventService.deleteUserShift({
-			shiftId,
-			userId: locals.user.id
-		});
+			const userCount = parseInt(formData.get(`shift[${i}].userCount`)?.toString() || '0', 10);
+			const currentUserIds = [];
+
+			for (let j = 0; j < userCount; j++) {
+				const userId = formData.get(`shift[${i}].user[${j}].id`)?.toString();
+				if (userId?.trim()) currentUserIds.push(userId);
+			}
+
+			const existingShift = existingEvent.shifts.find((s) => s.id === shiftId);
+			const existingUserIds = existingShift?.members.map((m) => m.user.id) || [];
+
+			for (const userId of currentUserIds) {
+				if (!existingUserIds.includes(userId)) {
+					await locals.eventService.createUserShift({
+						shiftId,
+						userId,
+						status: 'accepted'
+					});
+				}
+			}
+
+			for (const existingId of existingUserIds) {
+				if (!currentUserIds.includes(existingId)) {
+					await locals.eventService.deleteUserShift({
+						shiftId,
+						userId: existingId
+					});
+				}
+			}
+		}
 
-		return { success: true };
+		return { success: true, message: 'Arrangementet ble oppdatert' };
 	}
 };
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
index 469bf71a..fbb5d542 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
@@ -1,198 +1,237 @@
 <script lang="ts">
+	import { X, Plus, Save, ArrowLeft, Trash2 } from '@lucide/svelte'; // Add Trash2 icon
 	import Heading from '$lib/components/ui/Heading.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
-	import { subHours } from 'date-fns';
-	import { formatDate, time } from '$lib/date';
-	import { capitalize } from '$lib/utils';
-	import { enhance } from '$app/forms';
-	import { getUser } from '$lib/context/user.context.js';
-	import type { EventHandler } from 'svelte/elements';
-	import { X } from '@lucide/svelte';
 	import FormInput from '$lib/components/ui/form/FormInput.svelte';
 	import Combobox from '$lib/components/ui/Combobox.svelte';
-	import { CreateEventState } from '$lib/states/create-event-state.svelte';
-	import { differenceInHours } from 'date-fns';
-
-	let user = getUser();
-	let { data } = $props();
-	let error = $state('');
-	let successMessage = $state('');
-	let isSubmitting = $state(false);
-	let createEventState = new CreateEventState();
-
-	const handleSubmit: EventHandler<SubmitEvent, HTMLFormElement> = async (e) => {
-		e.preventDefault();
-		if (!createEventState.isValid()) {
-			error = 'Vennligst fyll ut alle feltene';
-			console.log(createEventState.json());
-			return;
-		}
-
-		isSubmitting = true;
-		error = '';
-		successMessage = '';
-
-		try {
-			const response = await fetch('/api/events', {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json'
-				},
-				body: JSON.stringify(createEventState.json())
-			});
-
-			if (response.status === 201) {
-				successMessage = 'Arrangement opprettet! E-post er sendt.';
-				createEventState.reset();
-			} else {
-				error = 'Noe gikk galt ved oppretting av arrangement';
-			}
-		} catch (err) {
-			error = 'Server error';
-			console.error(err);
-		} finally {
-			isSubmitting = false;
-		}
-	};
+	import { enhance } from '$app/forms';
+
+	let { data, form } = $props();
+
+	let eventName = $state(data.event.name);
+	let eventDate = $state(
+		data.event.date ? new Date(data.event.date).toISOString().slice(0, 16) : ''
+	);
+	let shifts = $state(
+		data.event.shifts.map((shift) => ({
+			id: shift.id,
+			startAt: new Date(shift.startAt).toISOString().slice(0, 16),
+			endAt: new Date(shift.endAt).toISOString().slice(0, 16),
+			users: shift.members.map((member) => ({
+				id: member.user.id,
+				name: member.user.name
+			}))
+		}))
+	);
+	let deletedShiftIds = $state([]);
+	let removedUserShifts = $state([]);
+
+	// Add state to track if delete confirmation dialog is open
+	let showDeleteConfirm = $state(false);
 </script>
 
 <svelte:head>
-	<title>{`Endre: ${data.event.name}`}</title>
+	<title>Rediger arrangement: {eventName}</title>
 </svelte:head>
 
-<Heading>{`${data.event.name}`}</Heading>
-
-<section class="mt-8">
-	<Heading level={2}>Vakt {data.event.shifts.length}</Heading>
-
-	<ul class="mt-2 flex flex-col gap-4">
-		{#each data.event.shifts as shift}
-			{@const isInShift = shift.members.some((member) => member.userId === $user?.id)}
-			<li class="block rounded-lg border bg-white p-4">
-				<p>{capitalize(formatDate(shift.startAt))}</p>
-				<p>{time(subHours(shift.startAt, 2))} - {time(subHours(shift.endAt, 2))}</p>
-				<p><b>Ansvarlige</b>: {shift.members.map((member) => member.user.name).join(', ')}</p>
-
-				{#if !isInShift}
-					<form class="mt-4" action="?/join" method="post" use:enhance>
-						<input type="hidden" name="shiftId" value={shift.id} />
-						<button class="text-blue-500 hover:underline">Bli med på vakten &rarr;</button>
-					</form>
-				{:else}
-					<form class="mt-4" action="?/leave" method="post" use:enhance>
-						<input type="hidden" name="shiftId" value={shift.id} />
-						<button class="text-red-500 hover:underline">Forlat vakten &rarr;</button>
-					</form>
-				{/if}
-			</li>
-		{/each}
-	</ul>
-</section>
-
-<section class="mt-8">
-	{#if data.user?.role === 'board'}
-		<Heading level={2}>Farlig</Heading>
-		<form action="?/delete" method="post" use:enhance>
-			<Button intent="danger" class="mt-4">Slett arrangement</Button>
-		</form>
-	{/if}
-</section>
+<div class="mb-6">
+	<a
+		href={`/portal/arrangementer/${data.event.id}`}
+		class="flex items-center text-blue-500 hover:underline"
+	>
+		<ArrowLeft class="mr-1 h-4 w-4" />
+		Tilbake
+	</a>
+</div>
 
-<Heading class="mb-4">Nytt arrangement</Heading>
+<div class="mb-4 flex items-center justify-between">
+	<Heading>Rediger arrangement</Heading>
 
-{#if error}
-	<div class="mb-4 rounded-md bg-red-50 p-4 text-red-700">
-		<p>{error}</p>
-	</div>
-{/if}
+	<!-- Delete button in the header -->
+	<form method="POST" action="?/delete" use:enhance>
+		<Button
+			type="submit"
+			intent="danger"
+			onclick={(e) => {
+				if (!showDeleteConfirm) {
+					e.preventDefault();
+					showDeleteConfirm = true;
+				}
+			}}
+		>
+			<Trash2 class="mr-1 h-4 w-4" />
+			{showDeleteConfirm ? 'Er du sikker?' : 'Slett arrangement'}
+		</Button>
+	</form>
+</div>
 
-{#if successMessage}
-	<div class="mb-4 rounded-md bg-green-50 p-4 text-green-700">
-		<p>{successMessage}</p>
+<div class="rounded-xl border bg-white shadow-sm">
+	<div class="border-b bg-gray-50 px-6 py-4">
+		<h2 class="text-lg font-medium">Arrangement detaljer</h2>
 	</div>
-{/if}
-
-<form onsubmit={handleSubmit} class="space-y-2">
-	<FormInput
-		label="Navn"
-		description="Navnet på arrangementet"
-		placeholder="Fest med Foobar"
-		bind:value={createEventState.name}
-		required
-	/>
-	<FormInput
-		label="Dato"
-		description="Start datoen på arrangementet"
-		bind:value={createEventState.date}
-		type="datetime-local"
-		required
-	/>
-	{#each createEventState.shifts as shift, i}
-		{@const shiftLength = differenceInHours(shift.endAt, shift.startAt)}
-		<div class="relative flex flex-col space-y-2 rounded-lg border border-border p-4">
-			<button
-				type="button"
-				class="absolute right-4 top-4 text-red-400 transition-colors hover:text-red-600"
-				onclick={() => createEventState.deleteShift(i)}
+
+	<div class="p-6">
+		{#if form?.message}
+			<div
+				class="mb-4 rounded-md p-4 {form.success
+					? 'bg-green-50 text-green-700'
+					: 'bg-red-50 text-red-700'}"
 			>
-				<X class="h-4 w-4" />
-			</button>
-			<h2 class="text-lg font-semibold">Vakt {i + 1}</h2>
-			<FormInput
-				label="Start"
-				description="Start tidspunkt for vakten"
-				bind:value={shift.startAt}
-				type="datetime-local"
-				required
-			/>
-			<FormInput
-				label="Slutt"
-				description="Slutt tidspunkt for vakten"
-				bind:value={shift.endAt}
-				type="datetime-local"
-				required
-			/>
-			{#if shiftLength >= 4}
-				<span class="text-sm font-medium text-orange-500">NB: Vakten er lengre enn 4 timer!</span>
-			{/if}
-			<span class="mt-8 text-sm font-medium">Ansvarlige</span>
-			<div class="text-xs text-gray-500">
-				Alle ansvarlige vil få en e-post med kalenderinvitasjon når arrangementet opprettes.
+				<p>{form.message}</p>
 			</div>
-			{#each createEventState.shifts[i].users as user, j (user)}
-				<div class="flex items-center gap-2">
-					<Combobox
-						name="user"
-						class="flex-1"
-						bind:value={createEventState.shifts[i].users[j].name}
-						disabledOptions={createEventState.shifts[i].users.map((user) => user.id)}
-						onchange={(option) => {
-							const id = option?.value;
-							if (id) {
-								createEventState.shifts[i].users[j].id = id;
-							}
-						}}
-						options={data.users}
-						placeholder="Velg en bruker"
+		{/if}
+
+		<form method="POST" action="?/save" use:enhance>
+			<!-- Hidden fields for tracking state -->
+			<input type="hidden" name="shiftsCount" value={shifts.length} />
+			{#each deletedShiftIds as id}
+				<input type="hidden" name="deletedShiftIds" value={id} />
+			{/each}
+			{#each removedUserShifts as keyValue}
+				<input type="hidden" name="removedUserShifts" value={keyValue} />
+			{/each}
+
+			<!-- Event details -->
+			<div class="mb-6 rounded-lg border bg-gray-50 p-4">
+				<div class="space-y-4">
+					<FormInput label="Navn" name="name" bind:value={eventName} required />
+					<FormInput
+						label="Dato"
+						name="date"
+						bind:value={eventDate}
+						type="datetime-local"
+						required
 					/>
-					<button
+				</div>
+			</div>
+
+			<!-- Shifts -->
+			<div class="mb-6">
+				<div class="mb-4 flex items-center justify-between">
+					<h2 class="text-lg font-medium">Vakter</h2>
+					<Button
 						type="button"
-						class="flex h-10 w-10 items-center justify-center rounded-lg border border-border bg-white transition-colors hover:text-red-500"
-						onclick={() => createEventState.deleteUserFromShift(i, user.id)}
+						intent="primary"
+						class="text-sm"
+						onclick={() =>
+							(shifts = [
+								...shifts,
+								{
+									id: crypto.randomUUID(),
+									startAt: '',
+									endAt: '',
+									users: []
+								}
+							])}
 					>
-						<X class="size-4" />
-					</button>
+						<Plus class="mr-1 h-4 w-4" />
+						Legg til vakt
+					</Button>
 				</div>
-			{:else}
-				<p class="text-sm text-gray-600">Ingen ansvarlige. Husk å legge til.</p>
-			{/each}
-			<Button type="button" onclick={() => createEventState.addUserToShift(i)}
-				>Legg til bruker</Button
-			>
-		</div>
-	{/each}
-	<Button type="button" onclick={() => createEventState.addShift()}>Legg til vakt</Button>
-	<Button type="submit" disabled={isSubmitting}>
-		{isSubmitting ? 'Lagrer...' : 'Lagre'}
-	</Button>
-</form>
+
+				{#each shifts as shift, i}
+					<div class="mb-4 rounded-lg border bg-white p-4">
+						<div class="flex items-center justify-between">
+							<h3 class="font-medium">Vakt {i + 1}</h3>
+							<button
+								type="button"
+								class="rounded-full p-1 text-red-400 hover:text-red-600"
+								onclick={() => {
+									if (shift.id) deletedShiftIds = [...deletedShiftIds, shift.id];
+									shifts = shifts.filter((s) => s !== shift);
+								}}
+							>
+								<X class="h-4 w-4" />
+							</button>
+						</div>
+
+						<input type="hidden" name={`shift[${i}].id`} value={shift.id} />
+
+						<div class="mt-4 grid gap-4 md:grid-cols-2">
+							<FormInput
+								label="Start"
+								name={`shift[${i}].startAt`}
+								bind:value={shift.startAt}
+								type="datetime-local"
+								required
+							/>
+							<FormInput
+								label="Slutt"
+								name={`shift[${i}].endAt`}
+								bind:value={shift.endAt}
+								type="datetime-local"
+								required
+							/>
+						</div>
+
+						<div class="mt-4 border-t pt-4">
+							<div class="mb-2 flex items-center justify-between">
+								<h4 class="font-medium">Ansvarlige</h4>
+								<Button
+									type="button"
+									class="text-sm"
+									onclick={() => (shift.users = [...shift.users, { id: '', name: '' }])}
+								>
+									<Plus class="mr-1 h-4 w-4" />
+									Legg til
+								</Button>
+							</div>
+
+							<input type="hidden" name={`shift[${i}].userCount`} value={shift.users.length} />
+
+							{#if shift.users.length === 0}
+								<p class="py-2 text-sm italic text-gray-500">Ingen ansvarlige</p>
+							{:else}
+								<div class="space-y-2">
+									{#each shift.users as user, j}
+										<div class="flex items-center gap-2">
+											<Combobox
+												name={`shift[${i}].user[${j}].name`}
+												class="flex-1"
+												bind:value={user.name}
+												options={data.users}
+												onchange={(option) => {
+													if (option?.value) {
+														user.id = option.value;
+														user.name = option.label;
+													}
+												}}
+												placeholder="Velg en bruker"
+											/>
+											<input type="hidden" name={`shift[${i}].user[${j}].id`} value={user.id} />
+											<button
+												type="button"
+												class="flex h-10 w-10 items-center justify-center rounded-lg border hover:text-red-500"
+												onclick={() => {
+													if (user.id && shift.id) {
+														removedUserShifts = [...removedUserShifts, `${shift.id}|${user.id}`];
+													}
+													shift.users = shift.users.filter((u) => u !== user);
+												}}
+											>
+												<X class="h-4 w-4" />
+											</button>
+										</div>
+									{/each}
+								</div>
+							{/if}
+						</div>
+					</div>
+				{/each}
+			</div>
+
+			<div class="flex justify-between gap-4 border-t pt-6">
+				<div></div>
+				<div class="flex gap-2">
+					<a href={`/portal/arrangementer/${data.event.id}`}>
+						<Button type="button" intent="outline">Avbryt</Button>
+					</a>
+					<Button type="submit" intent="primary">
+						<Save class="mr-1 h-4 w-4" />
+						Lagre endringer
+					</Button>
+				</div>
+			</div>
+		</form>
+	</div>
+</div>

From 5f97f022c51c77d24f7f6e6b4994d8d1566eac41 Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Mon, 19 May 2025 17:51:28 +0200
Subject: [PATCH 10/42] format

---
 apps/www/src/lib/services/event.service.ts    |  8 +--
 .../arrangementer/[id]/edit/+page.server.ts   | 53 +++++++++++++------
 .../arrangementer/[id]/edit/+page.svelte      | 10 ++--
 3 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/apps/www/src/lib/services/event.service.ts b/apps/www/src/lib/services/event.service.ts
index 3464574c..1bd7eb64 100644
--- a/apps/www/src/lib/services/event.service.ts
+++ b/apps/www/src/lib/services/event.service.ts
@@ -67,7 +67,7 @@ export class EventService {
 		return event;
 	}
 
-	async updateEvent(id: string, eventData: Partial<{ name: string; date: Date }>) {
+	async updateEvent(id: string, eventData: { name: string; date: Date }) {
 		const event = await this.#db
 			.insert(events)
 			.values({
@@ -84,10 +84,7 @@ export class EventService {
 		return event;
 	}
 
-	async updateShift(
-		id: string,
-		shiftData: Partial<{ eventId: string; startAt: Date; endAt: Date }>
-	) {
+	async updateShift(id: string, shiftData: { eventId: string; startAt: Date; endAt: Date }) {
 		const shift = await this.#db
 			.insert(shifts)
 			.values({
@@ -147,7 +144,6 @@ export class EventService {
 		await this.#db.delete(events).where(eq(events.id, id));
 	}
 
-	// This deletes the shift and its user_shifts
 	async deleteShift(id: string) {
 		await this.#db.delete(userShifts).where(eq(userShifts.shiftId, id));
 		await this.#db.delete(shifts).where(eq(shifts.id, id));
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
index 7d081cc0..cbb5e362 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
@@ -37,31 +37,44 @@ export const actions: Actions = {
 		}
 
 		const formData = await request.formData();
+		const eventId = params.id;
 
-		await locals.eventService.updateEvent(params.id, {
-			name: formData.get('name') as string,
-			date: new Date(formData.get('date') as string)
+		const updatedEvent = await locals.eventService.updateEvent(eventId, {
+			name: String(formData.get('name') || ''),
+			date: new Date(String(formData.get('date') || ''))
 		});
 
-		for (const id of formData.getAll('deletedShiftIds')) {
-			await locals.eventService.deleteShift(id.toString());
+		if (!updatedEvent) {
+			return fail(500, { message: 'Kunne ikkje oppdatere arrangementet' });
 		}
 
-		const existingEvent = await locals.eventService.findFullEventById(params.id);
+		const deletedShiftIds = formData.getAll('deletedShiftIds').map((id) => String(id));
+		for (const shiftId of deletedShiftIds) {
+			await locals.eventService.deleteShift(shiftId);
+		}
+
+		const existingEvent = await locals.eventService.findFullEventById(eventId);
+		if (!existingEvent) {
+			return fail(404, { message: 'Kunne ikkje finne arrangementet' });
+		}
 
-		const shiftsCount = parseInt(formData.get('shiftsCount')?.toString() || '0', 10);
+		const shiftsCount = parseInt(String(formData.get('shiftsCount') || '0'), 10);
 
 		for (let i = 0; i < shiftsCount; i++) {
 			const shiftId = formData.get(`shift[${i}].id`)?.toString();
 			if (!shiftId) continue;
 
-			await locals.eventService.updateShift(shiftId, {
-				eventId: params.id,
-				startAt: new Date(formData.get(`shift[${i}].startAt`) as string),
-				endAt: new Date(formData.get(`shift[${i}].endAt`) as string)
+			const updatedShift = await locals.eventService.updateShift(shiftId, {
+				eventId,
+				startAt: new Date(String(formData.get(`shift[${i}].startAt`))),
+				endAt: new Date(String(formData.get(`shift[${i}].endAt`)))
 			});
 
-			const userCount = parseInt(formData.get(`shift[${i}].userCount`)?.toString() || '0', 10);
+			if (!updatedShift) {
+				return fail(500, { message: `Kunne ikkje oppdatere vakten: ${shiftId}` });
+			}
+
+			const userCount = parseInt(String(formData.get(`shift[${i}].userCount`) || '0'), 10);
 			const currentUserIds = [];
 
 			for (let j = 0; j < userCount; j++) {
@@ -74,19 +87,25 @@ export const actions: Actions = {
 
 			for (const userId of currentUserIds) {
 				if (!existingUserIds.includes(userId)) {
-					await locals.eventService.createUserShift({
+					const result = await locals.eventService.createUserShift({
 						shiftId,
 						userId,
 						status: 'accepted'
 					});
+
+					if (!result) {
+						return fail(500, {
+							message: `Kunne ikkje legge til bruker ${userId} til vakten ${shiftId}`
+						});
+					}
 				}
 			}
 
-			for (const existingId of existingUserIds) {
-				if (!currentUserIds.includes(existingId)) {
-					await locals.eventService.deleteUserShift({
+			for (const userId of existingUserIds) {
+				if (!currentUserIds.includes(userId)) {
+					const result = await locals.eventService.deleteUserShift({
 						shiftId,
-						userId: existingId
+						userId
 					});
 				}
 			}
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
index fbb5d542..51320bca 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { X, Plus, Save, ArrowLeft, Trash2 } from '@lucide/svelte'; // Add Trash2 icon
+	import { X, Plus, Save, ArrowLeft, Trash2 } from '@lucide/svelte';
 	import Heading from '$lib/components/ui/Heading.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
 	import FormInput from '$lib/components/ui/form/FormInput.svelte';
@@ -23,10 +23,9 @@
 			}))
 		}))
 	);
-	let deletedShiftIds = $state([]);
-	let removedUserShifts = $state([]);
+	let deletedShiftIds = $state([] as string[]);
+	let removedUserShifts = $state([] as string[]);
 
-	// Add state to track if delete confirmation dialog is open
 	let showDeleteConfirm = $state(false);
 </script>
 
@@ -47,7 +46,6 @@
 <div class="mb-4 flex items-center justify-between">
 	<Heading>Rediger arrangement</Heading>
 
-	<!-- Delete button in the header -->
 	<form method="POST" action="?/delete" use:enhance>
 		<Button
 			type="submit"
@@ -193,7 +191,7 @@
 												onchange={(option) => {
 													if (option?.value) {
 														user.id = option.value;
-														user.name = option.label;
+														user.name = option.label || '';
 													}
 												}}
 												placeholder="Velg en bruker"

From 989af399d060f9334e3355b880fe252a4baf11a5 Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Mon, 19 May 2025 19:13:51 +0200
Subject: [PATCH 11/42] fixed UI

---
 .../arrangementer/[id]/edit/+page.svelte      | 81 +++++++++----------
 .../portal/arrangementer/ny/+page.svelte      |  3 +-
 2 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
index 51320bca..80fc3457 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
@@ -5,42 +5,43 @@
 	import FormInput from '$lib/components/ui/form/FormInput.svelte';
 	import Combobox from '$lib/components/ui/Combobox.svelte';
 	import { enhance } from '$app/forms';
+	import { CreateEventState } from '$lib/states/create-event-state.svelte';
 
 	let { data, form } = $props();
-
-	let eventName = $state(data.event.name);
-	let eventDate = $state(
-		data.event.date ? new Date(data.event.date).toISOString().slice(0, 16) : ''
-	);
-	let shifts = $state(
-		data.event.shifts.map((shift) => ({
-			id: shift.id,
+	let showDeleteConfirm = $state(false);
+	
+	const eventState = new CreateEventState();
+	
+	eventState.name = data.event.name;
+	eventState.date = data.event.date ? new Date(data.event.date).toISOString().slice(0, 16) : '';
+	
+	data.event.shifts.forEach(shift => {
+		eventState.shifts.push({
 			startAt: new Date(shift.startAt).toISOString().slice(0, 16),
 			endAt: new Date(shift.endAt).toISOString().slice(0, 16),
-			users: shift.members.map((member) => ({
+			users: shift.members.map(member => ({
 				id: member.user.id,
 				name: member.user.name
 			}))
-		}))
-	);
+		});
+	});
+	
+	let originalShifts = $state(data.event.shifts.map(shift => ({ id: shift.id })));
 	let deletedShiftIds = $state([] as string[]);
 	let removedUserShifts = $state([] as string[]);
-
-	let showDeleteConfirm = $state(false);
 </script>
 
 <svelte:head>
-	<title>Rediger arrangement: {eventName}</title>
+	<title>Rediger arrangement: {eventState.name}</title>
 </svelte:head>
 
 <div class="mb-6">
-	<a
+  <a
 		href={`/portal/arrangementer/${data.event.id}`}
 		class="flex items-center text-blue-500 hover:underline"
 	>
 		<ArrowLeft class="mr-1 h-4 w-4" />
 		Tilbake
-	</a>
 </div>
 
 <div class="mb-4 flex items-center justify-between">
@@ -64,7 +65,7 @@
 </div>
 
 <div class="rounded-xl border bg-white shadow-sm">
-	<div class="border-b bg-gray-50 px-6 py-4">
+	<div class="rounded-xl border-b bg-gray-50 px-6 py-4">
 		<h2 class="text-lg font-medium">Arrangement detaljer</h2>
 	</div>
 
@@ -80,8 +81,7 @@
 		{/if}
 
 		<form method="POST" action="?/save" use:enhance>
-			<!-- Hidden fields for tracking state -->
-			<input type="hidden" name="shiftsCount" value={shifts.length} />
+			<input type="hidden" name="shiftsCount" value={eventState.shifts.length} />
 			{#each deletedShiftIds as id}
 				<input type="hidden" name="deletedShiftIds" value={id} />
 			{/each}
@@ -89,21 +89,19 @@
 				<input type="hidden" name="removedUserShifts" value={keyValue} />
 			{/each}
 
-			<!-- Event details -->
 			<div class="mb-6 rounded-lg border bg-gray-50 p-4">
 				<div class="space-y-4">
-					<FormInput label="Navn" name="name" bind:value={eventName} required />
+					<FormInput label="Navn" name="name" bind:value={eventState.name} required />
 					<FormInput
 						label="Dato"
 						name="date"
-						bind:value={eventDate}
+						bind:value={eventState.date}
 						type="datetime-local"
 						required
 					/>
 				</div>
 			</div>
 
-			<!-- Shifts -->
 			<div class="mb-6">
 				<div class="mb-4 flex items-center justify-between">
 					<h2 class="text-lg font-medium">Vakter</h2>
@@ -111,23 +109,14 @@
 						type="button"
 						intent="primary"
 						class="text-sm"
-						onclick={() =>
-							(shifts = [
-								...shifts,
-								{
-									id: crypto.randomUUID(),
-									startAt: '',
-									endAt: '',
-									users: []
-								}
-							])}
+						onclick={() => eventState.addShift()}
 					>
 						<Plus class="mr-1 h-4 w-4" />
 						Legg til vakt
 					</Button>
 				</div>
 
-				{#each shifts as shift, i}
+				{#each eventState.shifts as shift, i}
 					<div class="mb-4 rounded-lg border bg-white p-4">
 						<div class="flex items-center justify-between">
 							<h3 class="font-medium">Vakt {i + 1}</h3>
@@ -135,15 +124,20 @@
 								type="button"
 								class="rounded-full p-1 text-red-400 hover:text-red-600"
 								onclick={() => {
-									if (shift.id) deletedShiftIds = [...deletedShiftIds, shift.id];
-									shifts = shifts.filter((s) => s !== shift);
+									// For existing shifts, track deletion
+									if (i < originalShifts.length) {
+										deletedShiftIds = [...deletedShiftIds, originalShifts[i].id];
+									}
+									eventState.deleteShift(i);
 								}}
 							>
 								<X class="h-4 w-4" />
 							</button>
 						</div>
 
-						<input type="hidden" name={`shift[${i}].id`} value={shift.id} />
+						{#if i < originalShifts.length}
+							<input type="hidden" name={`shift[${i}].id`} value={originalShifts[i].id} />
+						{/if}
 
 						<div class="mt-4 grid gap-4 md:grid-cols-2">
 							<FormInput
@@ -168,7 +162,7 @@
 								<Button
 									type="button"
 									class="text-sm"
-									onclick={() => (shift.users = [...shift.users, { id: '', name: '' }])}
+									onclick={() => eventState.addUserToShift(i)}
 								>
 									<Plus class="mr-1 h-4 w-4" />
 									Legg til
@@ -188,6 +182,9 @@
 												class="flex-1"
 												bind:value={user.name}
 												options={data.users}
+                        disabledOptions={eventState.shifts[i].users
+                        .filter(u => u.id && u.id !== user.id)
+                        .map(u => u.id)}
 												onchange={(option) => {
 													if (option?.value) {
 														user.id = option.value;
@@ -201,10 +198,10 @@
 												type="button"
 												class="flex h-10 w-10 items-center justify-center rounded-lg border hover:text-red-500"
 												onclick={() => {
-													if (user.id && shift.id) {
-														removedUserShifts = [...removedUserShifts, `${shift.id}|${user.id}`];
+													if (i < originalShifts.length && user.id) {
+														removedUserShifts = [...removedUserShifts, `${originalShifts[i].id}|${user.id}`];
 													}
-													shift.users = shift.users.filter((u) => u !== user);
+													eventState.deleteUserFromShift(i, user.id);
 												}}
 											>
 												<X class="h-4 w-4" />
@@ -224,7 +221,7 @@
 					<a href={`/portal/arrangementer/${data.event.id}`}>
 						<Button type="button" intent="outline">Avbryt</Button>
 					</a>
-					<Button type="submit" intent="primary">
+					<Button type="submit" intent="primary" disabled={!eventState.isValid()}>
 						<Save class="mr-1 h-4 w-4" />
 						Lagre endringer
 					</Button>
diff --git a/apps/www/src/routes/portal/arrangementer/ny/+page.svelte b/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
index fd73f5b6..b423e751 100644
--- a/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
@@ -7,6 +7,7 @@
 	import Combobox from '$lib/components/ui/Combobox.svelte';
 	import { CreateEventState } from '$lib/states/create-event-state.svelte';
 	import { differenceInHours } from 'date-fns';
+  import { goto } from '$app/navigation';
 
 	let { data } = $props();
 	let error = $state('');
@@ -201,7 +202,7 @@
 			</div>
 
 			<div class="flex justify-end gap-4 border-t border-gray-100 pt-6">
-				<!-- <Button type="button" intent="warning" onclick= () => {`${goto(/arrangementer)}`}>Avbryt</Button> -->
+				<Button type="button" intent="warning" onclick={() => goto(`/portal/arrangementer`)}>Avbryt</Button>
 				<Button
 					type="submit"
 					intent="primary"

From 668918ad3e0fb81d30ace63d25dc61d51202b4e2 Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Tue, 20 May 2025 13:07:51 +0200
Subject: [PATCH 12/42] fixed new event

---
 .../arrangementer/[id]/edit/+page.server.ts   |  24 +++--
 .../arrangementer/[id]/edit/+page.svelte      | 101 ++++++++----------
 .../portal/arrangementer/ny/+page.svelte      |  17 +--
 3 files changed, 68 insertions(+), 74 deletions(-)

diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
index cbb5e362..f87267e2 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
@@ -45,7 +45,9 @@ export const actions: Actions = {
 		});
 
 		if (!updatedEvent) {
-			return fail(500, { message: 'Kunne ikkje oppdatere arrangementet' });
+			return fail(500, { 
+        message: 'Failed to update event' 
+      });
 		}
 
 		const deletedShiftIds = formData.getAll('deletedShiftIds').map((id) => String(id));
@@ -54,9 +56,12 @@ export const actions: Actions = {
 		}
 
 		const existingEvent = await locals.eventService.findFullEventById(eventId);
-		if (!existingEvent) {
-			return fail(404, { message: 'Kunne ikkje finne arrangementet' });
-		}
+    if(!existingEvent) {
+      return fail(404, {
+        message: "Event not found"
+      })
+    }
+
 
 		const shiftsCount = parseInt(String(formData.get('shiftsCount') || '0'), 10);
 
@@ -64,15 +69,12 @@ export const actions: Actions = {
 			const shiftId = formData.get(`shift[${i}].id`)?.toString();
 			if (!shiftId) continue;
 
-			const updatedShift = await locals.eventService.updateShift(shiftId, {
-				eventId,
+			await locals.eventService.updateShift(shiftId, {
+				eventId: params.id,
 				startAt: new Date(String(formData.get(`shift[${i}].startAt`))),
 				endAt: new Date(String(formData.get(`shift[${i}].endAt`)))
 			});
 
-			if (!updatedShift) {
-				return fail(500, { message: `Kunne ikkje oppdatere vakten: ${shiftId}` });
-			}
 
 			const userCount = parseInt(String(formData.get(`shift[${i}].userCount`) || '0'), 10);
 			const currentUserIds = [];
@@ -95,7 +97,7 @@ export const actions: Actions = {
 
 					if (!result) {
 						return fail(500, {
-							message: `Kunne ikkje legge til bruker ${userId} til vakten ${shiftId}`
+							message: `Failed to add user to event`
 						});
 					}
 				}
@@ -111,6 +113,6 @@ export const actions: Actions = {
 			}
 		}
 
-		return { success: true, message: 'Arrangementet ble oppdatert' };
+		return { success: true, message: 'Event has been updated' };
 	}
 };
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
index 80fc3457..c6103d9d 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { X, Plus, Save, ArrowLeft, Trash2 } from '@lucide/svelte';
-	import Heading from '$lib/components/ui/Heading.svelte';
+	import { X, Plus, Save, Trash2 } from '@lucide/svelte';
 	import Button from '$lib/components/ui/Button.svelte';
 	import FormInput from '$lib/components/ui/form/FormInput.svelte';
 	import Combobox from '$lib/components/ui/Combobox.svelte';
@@ -8,65 +7,54 @@
 	import { CreateEventState } from '$lib/states/create-event-state.svelte';
 
 	let { data, form } = $props();
+
 	let showDeleteConfirm = $state(false);
-	
+
 	const eventState = new CreateEventState();
-	
+
 	eventState.name = data.event.name;
 	eventState.date = data.event.date ? new Date(data.event.date).toISOString().slice(0, 16) : '';
-	
-	data.event.shifts.forEach(shift => {
+
+	data.event.shifts.forEach((shift) => {
 		eventState.shifts.push({
 			startAt: new Date(shift.startAt).toISOString().slice(0, 16),
 			endAt: new Date(shift.endAt).toISOString().slice(0, 16),
-			users: shift.members.map(member => ({
+			users: shift.members.map((member) => ({
 				id: member.user.id,
 				name: member.user.name
 			}))
 		});
 	});
-	
-	let originalShifts = $state(data.event.shifts.map(shift => ({ id: shift.id })));
+
+	let originalShifts = $state(data.event.shifts.map((shift) => ({ id: shift.id })));
 	let deletedShiftIds = $state([] as string[]);
 	let removedUserShifts = $state([] as string[]);
+
 </script>
 
 <svelte:head>
 	<title>Rediger arrangement: {eventState.name}</title>
 </svelte:head>
 
-<div class="mb-6">
-  <a
-		href={`/portal/arrangementer/${data.event.id}`}
-		class="flex items-center text-blue-500 hover:underline"
-	>
-		<ArrowLeft class="mr-1 h-4 w-4" />
-		Tilbake
-</div>
-
-<div class="mb-4 flex items-center justify-between">
-	<Heading>Rediger arrangement</Heading>
-
-	<form method="POST" action="?/delete" use:enhance>
-		<Button
-			type="submit"
-			intent="danger"
-			onclick={(e) => {
-				if (!showDeleteConfirm) {
-					e.preventDefault();
-					showDeleteConfirm = true;
-				}
-			}}
-		>
-			<Trash2 class="mr-1 h-4 w-4" />
-			{showDeleteConfirm ? 'Er du sikker?' : 'Slett arrangement'}
-		</Button>
-	</form>
-</div>
 
-<div class="rounded-xl border bg-white shadow-sm">
-	<div class="rounded-xl border-b bg-gray-50 px-6 py-4">
+<div class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
+	<div class="border-b border-gray-300 bg-gray-50 px-6 py-4 flex items-centter justify-between">
 		<h2 class="text-lg font-medium">Arrangement detaljer</h2>
+    <form method="POST" action="?/delete" use:enhance>
+      <Button
+        type="submit"
+        intent="danger"
+        onclick={(e) => {
+        if (!showDeleteConfirm) {
+        e.preventDefault();
+        showDeleteConfirm = true;
+        }
+        }}
+      >
+        <Trash2 class="mr-1 h-4 w-4" />
+        {showDeleteConfirm ? 'Er du sikker?' : 'Slett arrangement'}
+      </Button>
+    </form>
 	</div>
 
 	<div class="p-6">
@@ -89,9 +77,14 @@
 				<input type="hidden" name="removedUserShifts" value={keyValue} />
 			{/each}
 
-			<div class="mb-6 rounded-lg border bg-gray-50 p-4">
+			<div class="mb-6 rounded-lg border border-gray-200 bg-gray-50 p-4">
 				<div class="space-y-4">
-					<FormInput label="Navn" name="name" bind:value={eventState.name} required />
+					<FormInput 
+            label="Navn"
+            name="name"
+            bind:value={eventState.name} 
+            required
+          />
 					<FormInput
 						label="Dato"
 						name="date"
@@ -117,14 +110,13 @@
 				</div>
 
 				{#each eventState.shifts as shift, i}
-					<div class="mb-4 rounded-lg border bg-white p-4">
+					<div class="mb-4 rounded-lg border border-gray-200 bg-gray-50 p-4">
 						<div class="flex items-center justify-between">
 							<h3 class="font-medium">Vakt {i + 1}</h3>
 							<button
 								type="button"
 								class="rounded-full p-1 text-red-400 hover:text-red-600"
 								onclick={() => {
-									// For existing shifts, track deletion
 									if (i < originalShifts.length) {
 										deletedShiftIds = [...deletedShiftIds, originalShifts[i].id];
 									}
@@ -156,14 +148,10 @@
 							/>
 						</div>
 
-						<div class="mt-4 border-t pt-4">
+						<div class="mt-4 border-t border-gray-300 pt-4">
 							<div class="mb-2 flex items-center justify-between">
 								<h4 class="font-medium">Ansvarlige</h4>
-								<Button
-									type="button"
-									class="text-sm"
-									onclick={() => eventState.addUserToShift(i)}
-								>
+								<Button type="button" class="text-sm" onclick={() => eventState.addUserToShift(i)}>
 									<Plus class="mr-1 h-4 w-4" />
 									Legg til
 								</Button>
@@ -182,9 +170,9 @@
 												class="flex-1"
 												bind:value={user.name}
 												options={data.users}
-                        disabledOptions={eventState.shifts[i].users
-                        .filter(u => u.id && u.id !== user.id)
-                        .map(u => u.id)}
+												disabledOptions={eventState.shifts[i].users
+													.filter((u) => u.id && u.id !== user.id)
+													.map((u) => u.id)}
 												onchange={(option) => {
 													if (option?.value) {
 														user.id = option.value;
@@ -196,10 +184,13 @@
 											<input type="hidden" name={`shift[${i}].user[${j}].id`} value={user.id} />
 											<button
 												type="button"
-												class="flex h-10 w-10 items-center justify-center rounded-lg border hover:text-red-500"
+												class="flex h-10 w-10 items-center justify-center rounded-lg border border-gray-300 hover:text-red-500"
 												onclick={() => {
 													if (i < originalShifts.length && user.id) {
-														removedUserShifts = [...removedUserShifts, `${originalShifts[i].id}|${user.id}`];
+														removedUserShifts = [
+															...removedUserShifts,
+															`${originalShifts[i].id}|${user.id}`
+														];
 													}
 													eventState.deleteUserFromShift(i, user.id);
 												}}
@@ -215,7 +206,7 @@
 				{/each}
 			</div>
 
-			<div class="flex justify-between gap-4 border-t pt-6">
+			<div class="flex justify-between gap-4 border-t border-gray-100 pt-6">
 				<div></div>
 				<div class="flex gap-2">
 					<a href={`/portal/arrangementer/${data.event.id}`}>
diff --git a/apps/www/src/routes/portal/arrangementer/ny/+page.svelte b/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
index b423e751..12c6b9bb 100644
--- a/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
@@ -7,7 +7,7 @@
 	import Combobox from '$lib/components/ui/Combobox.svelte';
 	import { CreateEventState } from '$lib/states/create-event-state.svelte';
 	import { differenceInHours } from 'date-fns';
-  import { goto } from '$app/navigation';
+	import { goto } from '$app/navigation';
 
 	let { data } = $props();
 	let error = $state('');
@@ -55,12 +55,11 @@
 	<title>Nytt arrangement</title>
 </svelte:head>
 
-<Heading class="mb-4">Nytt arrangement</Heading>
 
-<div class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-gray-100 bg-white shadow-sm">
-	<div
-		class="flex items-center justify-between border-b border-gray-100 bg-gray-50 px-6 py-4"
-	></div>
+<div class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
+	<div class="border-b border-gray-300 bg-gray-50 px-6 py-4">
+		<h2 class="text-lg font-medium">Nytt arrangement</h2>
+</div>
 	<div class="p-6">
 		{#if error}
 			<div class="mb-4 rounded-md bg-red-50 p-4 text-red-700">
@@ -101,7 +100,7 @@
 					{@const endDate = shift.endAt ? new Date(shift.endAt) : new Date()}
 					{@const shiftLength = differenceInHours(endDate, startDate)}
 					<div
-						class="relative mb-4 flex flex-col space-y-4 rounded-lg border border-gray-200 bg-white p-4"
+						class="relative mb-4 flex flex-col space-y-4 rounded-lg border border-gray-200 bg-gray-50 p-4"
 					>
 						<div class="flex items-center justify-between">
 							<h3 class="text-base font-medium">Vakt {i + 1}</h3>
@@ -202,7 +201,9 @@
 			</div>
 
 			<div class="flex justify-end gap-4 border-t border-gray-100 pt-6">
-				<Button type="button" intent="warning" onclick={() => goto(`/portal/arrangementer`)}>Avbryt</Button>
+				<Button type="button" intent="warning" onclick={() => goto(`/portal/arrangementer`)}
+					>Avbryt</Button
+				>
 				<Button
 					type="submit"
 					intent="primary"

From b8246c661c61a3d03b2d132478a4a5e63fc39d4b Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Tue, 20 May 2025 14:52:11 +0200
Subject: [PATCH 13/42] =?UTF-8?q?=F0=9F=A7=B9Cleaning?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../portal/arrangementer/[id]/+page.svelte    |  6 ++---
 .../arrangementer/[id]/edit/+page.svelte      | 25 +++++++++----------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
index 1b098ceb..9ad7eb11 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
@@ -16,10 +16,8 @@
 </svelte:head>
 
 <section class="mt-8">
-	<div
-		class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-gray-100 bg-white shadow-sm"
-	>
-		<div class="flex items-center justify-between border-b border-gray-100 bg-gray-50 px-6 py-4">
+	<div class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
+		<div class="border-b border-gray-300 bg-gray-50 px-6 py-4">
 			<div>
 				<h1 class="text-xl font-semibold text-gray-800">{data.event.name}</h1>
 				<p class="text-sm text-gray-500">{formatDate(data.event.date)}</p>
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
index c6103d9d..3cfed55b 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
@@ -13,12 +13,12 @@
 	const eventState = new CreateEventState();
 
 	eventState.name = data.event.name;
-	eventState.date = data.event.date ? new Date(data.event.date).toISOString().slice(0, 16) : '';
+	eventState.date = data.event.date.toISOString().slice(0, 16); 
 
 	data.event.shifts.forEach((shift) => {
 		eventState.shifts.push({
-			startAt: new Date(shift.startAt).toISOString().slice(0, 16),
-			endAt: new Date(shift.endAt).toISOString().slice(0, 16),
+			startAt: shift.startAt.toISOString().slice(0, 16),
+			endAt: shift.endAt.toISOString().slice(0, 16),
 			users: shift.members.map((member) => ({
 				id: member.user.id,
 				name: member.user.name
@@ -58,16 +58,15 @@
 	</div>
 
 	<div class="p-6">
-		{#if form?.message}
-			<div
-				class="mb-4 rounded-md p-4 {form.success
-					? 'bg-green-50 text-green-700'
-					: 'bg-red-50 text-red-700'}"
-			>
-				<p>{form.message}</p>
-			</div>
-		{/if}
-
+    {#if form?.message}
+      <div
+        class="mb-4 rounded-md p-4 {form.success
+        ? 'bg-green-50 text-green-700'
+        : 'bg-red-50 text-red-700'}"
+      >
+        <p>{form.message}</p>
+      </div>
+    {/if}
 		<form method="POST" action="?/save" use:enhance>
 			<input type="hidden" name="shiftsCount" value={eventState.shifts.length} />
 			{#each deletedShiftIds as id}

From 8d7d7bb5b2c35f0e039ef8d00fae1e3fc6154a94 Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Tue, 20 May 2025 15:23:53 +0200
Subject: [PATCH 14/42] =?UTF-8?q?=F0=9F=A7=B9Cleaning?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/www/src/lib/date.ts                      |  4 ++
 .../portal/arrangementer/[id]/+page.svelte    |  4 +-
 .../arrangementer/[id]/edit/+page.server.ts   | 18 +++--
 .../arrangementer/[id]/edit/+page.svelte      | 66 +++++++++----------
 .../portal/arrangementer/ny/+page.svelte      |  3 +-
 5 files changed, 46 insertions(+), 49 deletions(-)

diff --git a/apps/www/src/lib/date.ts b/apps/www/src/lib/date.ts
index 3c3eda95..11bf2215 100644
--- a/apps/www/src/lib/date.ts
+++ b/apps/www/src/lib/date.ts
@@ -18,3 +18,7 @@ export const time = (date: Dateish) => {
 export const normalDate = (date: Dateish) => {
 	return format(new Date(date), 'dd.MM.yyyy HH:mm');
 };
+
+export const ISOStandard = (date: Dateish) => {
+	return format(new Date(date), "yyyy-MM-dd'T'HH:mm");
+};
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
index 9ad7eb11..c0f7edd2 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
@@ -16,7 +16,9 @@
 </svelte:head>
 
 <section class="mt-8">
-	<div class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
+	<div
+		class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm"
+	>
 		<div class="border-b border-gray-300 bg-gray-50 px-6 py-4">
 			<div>
 				<h1 class="text-xl font-semibold text-gray-800">{data.event.name}</h1>
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
index f87267e2..15010b89 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
@@ -45,9 +45,9 @@ export const actions: Actions = {
 		});
 
 		if (!updatedEvent) {
-			return fail(500, { 
-        message: 'Failed to update event' 
-      });
+			return fail(500, {
+				message: 'Failed to update event'
+			});
 		}
 
 		const deletedShiftIds = formData.getAll('deletedShiftIds').map((id) => String(id));
@@ -56,12 +56,11 @@ export const actions: Actions = {
 		}
 
 		const existingEvent = await locals.eventService.findFullEventById(eventId);
-    if(!existingEvent) {
-      return fail(404, {
-        message: "Event not found"
-      })
-    }
-
+		if (!existingEvent) {
+			return fail(404, {
+				message: 'Event not found'
+			});
+		}
 
 		const shiftsCount = parseInt(String(formData.get('shiftsCount') || '0'), 10);
 
@@ -75,7 +74,6 @@ export const actions: Actions = {
 				endAt: new Date(String(formData.get(`shift[${i}].endAt`)))
 			});
 
-
 			const userCount = parseInt(String(formData.get(`shift[${i}].userCount`) || '0'), 10);
 			const currentUserIds = [];
 
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
index 3cfed55b..81b54665 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
@@ -5,6 +5,7 @@
 	import Combobox from '$lib/components/ui/Combobox.svelte';
 	import { enhance } from '$app/forms';
 	import { CreateEventState } from '$lib/states/create-event-state.svelte';
+	import { ISOStandard } from '$lib/date';
 
 	let { data, form } = $props();
 
@@ -13,12 +14,12 @@
 	const eventState = new CreateEventState();
 
 	eventState.name = data.event.name;
-	eventState.date = data.event.date.toISOString().slice(0, 16); 
+	eventState.date = ISOStandard(data.event.date);
 
 	data.event.shifts.forEach((shift) => {
 		eventState.shifts.push({
-			startAt: shift.startAt.toISOString().slice(0, 16),
-			endAt: shift.endAt.toISOString().slice(0, 16),
+			startAt: ISOStandard(shift.startAt),
+			endAt: ISOStandard(shift.endAt),
 			users: shift.members.map((member) => ({
 				id: member.user.id,
 				name: member.user.name
@@ -29,44 +30,42 @@
 	let originalShifts = $state(data.event.shifts.map((shift) => ({ id: shift.id })));
 	let deletedShiftIds = $state([] as string[]);
 	let removedUserShifts = $state([] as string[]);
-
 </script>
 
 <svelte:head>
 	<title>Rediger arrangement: {eventState.name}</title>
 </svelte:head>
 
-
 <div class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
-	<div class="border-b border-gray-300 bg-gray-50 px-6 py-4 flex items-centter justify-between">
+	<div class="items-centter flex justify-between border-b border-gray-300 bg-gray-50 px-6 py-4">
 		<h2 class="text-lg font-medium">Arrangement detaljer</h2>
-    <form method="POST" action="?/delete" use:enhance>
-      <Button
-        type="submit"
-        intent="danger"
-        onclick={(e) => {
-        if (!showDeleteConfirm) {
-        e.preventDefault();
-        showDeleteConfirm = true;
-        }
-        }}
-      >
-        <Trash2 class="mr-1 h-4 w-4" />
-        {showDeleteConfirm ? 'Er du sikker?' : 'Slett arrangement'}
-      </Button>
-    </form>
+		<form method="POST" action="?/delete" use:enhance>
+			<Button
+				type="submit"
+				intent="danger"
+				onclick={(e) => {
+					if (!showDeleteConfirm) {
+						e.preventDefault();
+						showDeleteConfirm = true;
+					}
+				}}
+			>
+				<Trash2 class="mr-1 h-4 w-4" />
+				{showDeleteConfirm ? 'Er du sikker?' : 'Slett arrangement'}
+			</Button>
+		</form>
 	</div>
 
 	<div class="p-6">
-    {#if form?.message}
-      <div
-        class="mb-4 rounded-md p-4 {form.success
-        ? 'bg-green-50 text-green-700'
-        : 'bg-red-50 text-red-700'}"
-      >
-        <p>{form.message}</p>
-      </div>
-    {/if}
+		{#if form?.message}
+			<div
+				class="mb-4 rounded-md p-4 {form.success
+					? 'bg-green-50 text-green-700'
+					: 'bg-red-50 text-red-700'}"
+			>
+				<p>{form.message}</p>
+			</div>
+		{/if}
 		<form method="POST" action="?/save" use:enhance>
 			<input type="hidden" name="shiftsCount" value={eventState.shifts.length} />
 			{#each deletedShiftIds as id}
@@ -78,12 +77,7 @@
 
 			<div class="mb-6 rounded-lg border border-gray-200 bg-gray-50 p-4">
 				<div class="space-y-4">
-					<FormInput 
-            label="Navn"
-            name="name"
-            bind:value={eventState.name} 
-            required
-          />
+					<FormInput label="Navn" name="name" bind:value={eventState.name} required />
 					<FormInput
 						label="Dato"
 						name="date"
diff --git a/apps/www/src/routes/portal/arrangementer/ny/+page.svelte b/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
index 12c6b9bb..90f02ed2 100644
--- a/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
@@ -55,11 +55,10 @@
 	<title>Nytt arrangement</title>
 </svelte:head>
 
-
 <div class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
 	<div class="border-b border-gray-300 bg-gray-50 px-6 py-4">
 		<h2 class="text-lg font-medium">Nytt arrangement</h2>
-</div>
+	</div>
 	<div class="p-6">
 		{#if error}
 			<div class="mb-4 rounded-md bg-red-50 p-4 text-red-700">

From 1ac803ebb97263fab204d3ad5ce81f4d37c3b339 Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Mon, 26 May 2025 15:07:44 +0200
Subject: [PATCH 15/42] added unsaved message

---
 .../arrangementer/[id]/edit/+page.server.ts   | 201 ++++++++++--------
 .../arrangementer/[id]/edit/+page.svelte      |  61 +++++-
 2 files changed, 165 insertions(+), 97 deletions(-)

diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
index 15010b89..8cd65006 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
@@ -21,96 +21,113 @@ export const load: PageServerLoad = async ({ locals, params }) => {
 };
 
 export const actions: Actions = {
-	delete: async ({ params, locals }) => {
-		if (locals.user?.role === 'board') {
-			await locals.eventService.delete(params.id);
-			throw redirect(303, '/portal/arrangementer');
-		}
-		return fail(401, {
-			message: 'Unauthorized'
-		});
-	},
-
-	save: async ({ request, params, locals }) => {
-		if (locals.user?.role !== 'board') {
-			return fail(401, { message: 'Unauthorized' });
-		}
-
-		const formData = await request.formData();
-		const eventId = params.id;
-
-		const updatedEvent = await locals.eventService.updateEvent(eventId, {
-			name: String(formData.get('name') || ''),
-			date: new Date(String(formData.get('date') || ''))
-		});
-
-		if (!updatedEvent) {
-			return fail(500, {
-				message: 'Failed to update event'
-			});
-		}
-
-		const deletedShiftIds = formData.getAll('deletedShiftIds').map((id) => String(id));
-		for (const shiftId of deletedShiftIds) {
-			await locals.eventService.deleteShift(shiftId);
-		}
-
-		const existingEvent = await locals.eventService.findFullEventById(eventId);
-		if (!existingEvent) {
-			return fail(404, {
-				message: 'Event not found'
-			});
-		}
-
-		const shiftsCount = parseInt(String(formData.get('shiftsCount') || '0'), 10);
-
-		for (let i = 0; i < shiftsCount; i++) {
-			const shiftId = formData.get(`shift[${i}].id`)?.toString();
-			if (!shiftId) continue;
-
-			await locals.eventService.updateShift(shiftId, {
-				eventId: params.id,
-				startAt: new Date(String(formData.get(`shift[${i}].startAt`))),
-				endAt: new Date(String(formData.get(`shift[${i}].endAt`)))
-			});
-
-			const userCount = parseInt(String(formData.get(`shift[${i}].userCount`) || '0'), 10);
-			const currentUserIds = [];
-
-			for (let j = 0; j < userCount; j++) {
-				const userId = formData.get(`shift[${i}].user[${j}].id`)?.toString();
-				if (userId?.trim()) currentUserIds.push(userId);
-			}
-
-			const existingShift = existingEvent.shifts.find((s) => s.id === shiftId);
-			const existingUserIds = existingShift?.members.map((m) => m.user.id) || [];
-
-			for (const userId of currentUserIds) {
-				if (!existingUserIds.includes(userId)) {
-					const result = await locals.eventService.createUserShift({
-						shiftId,
-						userId,
-						status: 'accepted'
-					});
-
-					if (!result) {
-						return fail(500, {
-							message: `Failed to add user to event`
-						});
-					}
-				}
-			}
-
-			for (const userId of existingUserIds) {
-				if (!currentUserIds.includes(userId)) {
-					const result = await locals.eventService.deleteUserShift({
-						shiftId,
-						userId
-					});
-				}
-			}
-		}
-
-		return { success: true, message: 'Event has been updated' };
-	}
+  delete: async ({ params, locals }) => {
+    if (locals.user?.role !== 'board') {
+      return fail(401, { message: 'Unauthorized' });
+    }
+    
+    await locals.eventService.delete(params.id);
+    throw redirect(303, '/portal/arrangementer');
+  },
+
+
+  save: async ({ request, params, locals }) => {
+    if (locals.user?.role !== 'board') {
+      return fail(401, { message: 'Unauthorized' });
+    }
+
+    const formData = await request.formData();
+    const eventId = params.id;
+
+    const updated = await locals.eventService.updateEvent(params.id, {
+      name: String(formData.get('name') || ''),
+      date: new Date(String(formData.get('date') || ''))
+    });
+
+    const deletedShiftIds = formData.getAll('deletedShiftIds').map(id => String(id));
+    for (const shiftId of deletedShiftIds) {
+      await locals.eventService.deleteShift(shiftId);
+    }
+
+    const removedUserShifts = formData.getAll('removedUserShifts').map(kv => String(kv));
+    for (const userShift of removedUserShifts) {
+      const [shiftId, userId] = userShift.split('|');
+      if (shiftId && userId) {
+        await locals.eventService.deleteUserShift({ shiftId, userId });
+      }
+    }
+
+    const existingEvent = await locals.eventService.findFullEventById(eventId);
+    if (!existingEvent) {
+      return fail(404, { message: 'Event not found' });
+    }
+
+    const shiftsCount = parseInt(String(formData.get('shiftsCount') || '0'), 10);
+    const processedShifts = [];
+
+    for (let i = 0; i < shiftsCount; i++) {
+      const shiftId = formData.get(`shift[${i}].id`)?.toString();
+      const startAt = new Date(String(formData.get(`shift[${i}].startAt`)));
+      const endAt = new Date(String(formData.get(`shift[${i}].endAt`)));
+
+      let shift;
+
+      if (shiftId) {
+        shift = await locals.eventService.updateShift(shiftId, {
+          eventId,
+          startAt,
+          endAt
+        });
+      } else {
+        const shifts = await locals.eventService.createShifts([{
+          eventId,
+          startAt,
+          endAt
+        }]);
+        shift = shifts?.[0];
+      }
+
+      if (!shift) {
+        return fail(500, { message: 'Failed to create/update shift' });
+      }
+
+      processedShifts.push({
+        shiftId: shift.id,
+        index: i
+      });
+    }
+
+    for (const { shiftId, index } of processedShifts) {
+      const userCount = parseInt(String(formData.get(`shift[${index}].userCount`) || '0'), 10);
+
+      const existingShift = existingEvent.shifts.find(s => s.id === shiftId);
+      const existingUserIds = existingShift?.members.map(m => m.user.id) || [];
+
+      const newUserIds = [];
+      for (let j = 0; j < userCount; j++) {
+        const userId = formData.get(`shift[${index}].user[${j}].id`)?.toString();
+        if (userId?.trim()) {
+          newUserIds.push(userId);
+        }
+      }
+
+      const usersToAdd = newUserIds.filter(userId => !existingUserIds.includes(userId));
+
+      const usersToRemove = existingUserIds.filter(userId => !newUserIds.includes(userId));
+
+      if (usersToAdd.length > 0) {
+        const userShiftsToCreate = usersToAdd.map(userId => ({
+          shiftId,
+          userId
+        }));
+        await locals.eventService.createUserShifts(userShiftsToCreate);
+      }
+
+      for (const userId of usersToRemove) {
+        await locals.eventService.deleteUserShift({ shiftId, userId });
+      }
+    }
+
+    return { success: true, message: 'Vakten har blitt oppdatert' };
+  }
 };
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
index 81b54665..cb905399 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
@@ -6,10 +6,12 @@
 	import { enhance } from '$app/forms';
 	import { CreateEventState } from '$lib/states/create-event-state.svelte';
 	import { ISOStandard } from '$lib/date';
+	import { beforeNavigate } from '$app/navigation';
 
 	let { data, form } = $props();
 
 	let showDeleteConfirm = $state(false);
+  let deletedShifts = $state([''])
 
 	const eventState = new CreateEventState();
 
@@ -30,6 +32,14 @@
 	let originalShifts = $state(data.event.shifts.map((shift) => ({ id: shift.id })));
 	let deletedShiftIds = $state([] as string[]);
 	let removedUserShifts = $state([] as string[]);
+
+	beforeNavigate(({ cancel }) => {
+		if (deletedShiftIds.length > 0 || removedUserShifts.length > 0) {
+			if (!confirm('Du har ulagrede endringer. Er du sikker på at du vil forlate siden?')) {
+				cancel();
+			}
+		}
+	});
 </script>
 
 <svelte:head>
@@ -66,7 +76,32 @@
 				<p>{form.message}</p>
 			</div>
 		{/if}
-		<form method="POST" action="?/save" use:enhance>
+
+		{#if deletedShiftIds.length > 0 || removedUserShifts.length > 0}
+			<div class="mb-4 rounded-md bg-yellow-50 p-4 text-yellow-700">
+				<p class="font-medium">Ulagrede endringer:</p>
+				<ul class="mt-1 text-sm">
+					{#if deletedShiftIds.length > 0}
+						<li>• {deletedShiftIds.length} vakt{deletedShiftIds.length > 1 ? 'er' : ''} vil bli slettet</li>
+					{/if}
+					{#if removedUserShifts.length > 0}
+						<li>• {removedUserShifts.length} bruker{removedUserShifts.length > 1 ? 'e' : ''} vil bli fjernet</li>
+					{/if}
+				</ul>
+			</div>
+		{/if}
+
+
+
+		<form method="POST" action="?/save" use:enhance={() => {
+			return async ({ result, update }) => {
+				if (result.type === 'success') {
+					deletedShiftIds = [];
+					removedUserShifts = [];
+				}
+				await update();
+			};
+		}}>
 			<input type="hidden" name="shiftsCount" value={eventState.shifts.length} />
 			{#each deletedShiftIds as id}
 				<input type="hidden" name="deletedShiftIds" value={id} />
@@ -103,16 +138,22 @@
 				</div>
 
 				{#each eventState.shifts as shift, i}
-					<div class="mb-4 rounded-lg border border-gray-200 bg-gray-50 p-4">
+					<div class="mb-4 rounded-lg border border-gray-200 bg-gray-50 p-4 transition-opacity">
 						<div class="flex items-center justify-between">
 							<h3 class="font-medium">Vakt {i + 1}</h3>
 							<button
 								type="button"
 								class="rounded-full p-1 text-red-400 hover:text-red-600"
 								onclick={() => {
+                  
 									if (i < originalShifts.length) {
-										deletedShiftIds = [...deletedShiftIds, originalShifts[i].id];
+										deletedShiftIds = [...deletedShiftIds, `${originalShifts[i].id}`];
 									}
+                  
+                  deletedShifts.push();
+                  {console.log(deletedShifts)}
+
+                  
 									eventState.deleteShift(i);
 								}}
 							>
@@ -144,7 +185,11 @@
 						<div class="mt-4 border-t border-gray-300 pt-4">
 							<div class="mb-2 flex items-center justify-between">
 								<h4 class="font-medium">Ansvarlige</h4>
-								<Button type="button" class="text-sm" onclick={() => eventState.addUserToShift(i)}>
+								<Button 
+									type="button" 
+									class="text-sm" 
+									onclick={() => eventState.addUserToShift(i)}
+								>
 									<Plus class="mr-1 h-4 w-4" />
 									Legg til
 								</Button>
@@ -200,7 +245,13 @@
 			</div>
 
 			<div class="flex justify-between gap-4 border-t border-gray-100 pt-6">
-				<div></div>
+				<div class="text-sm text-gray-500">
+					{#if deletedShiftIds.length > 0 || removedUserShifts.length > 0}
+						<span class="text-yellow-600 font-medium">
+							{deletedShiftIds.length + removedUserShifts.length} ulagrede endringer
+						</span>
+					{/if}
+				</div>
 				<div class="flex gap-2">
 					<a href={`/portal/arrangementer/${data.event.id}`}>
 						<Button type="button" intent="outline">Avbryt</Button>

From 82778843788c580e61eb33f1490649f066c76ca3 Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Mon, 26 May 2025 16:09:49 +0200
Subject: [PATCH 16/42] styling

---
 .../src/routes/portal/arrangementer/[id]/edit/+page.server.ts  | 3 +--
 .../www/src/routes/portal/arrangementer/[id]/edit/+page.svelte | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
index 8cd65006..a27d4f12 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
@@ -103,7 +103,7 @@ export const actions: Actions = {
       const existingShift = existingEvent.shifts.find(s => s.id === shiftId);
       const existingUserIds = existingShift?.members.map(m => m.user.id) || [];
 
-      const newUserIds = [];
+      const newUserIds: string[] = [];
       for (let j = 0; j < userCount; j++) {
         const userId = formData.get(`shift[${index}].user[${j}].id`)?.toString();
         if (userId?.trim()) {
@@ -112,7 +112,6 @@ export const actions: Actions = {
       }
 
       const usersToAdd = newUserIds.filter(userId => !existingUserIds.includes(userId));
-
       const usersToRemove = existingUserIds.filter(userId => !newUserIds.includes(userId));
 
       if (usersToAdd.length > 0) {
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
index cb905399..c9f06bb2 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
@@ -32,6 +32,7 @@
 	let originalShifts = $state(data.event.shifts.map((shift) => ({ id: shift.id })));
 	let deletedShiftIds = $state([] as string[]);
 	let removedUserShifts = $state([] as string[]);
+  
 
 	beforeNavigate(({ cancel }) => {
 		if (deletedShiftIds.length > 0 || removedUserShifts.length > 0) {

From 02ae704ef3ea3624de16bcc03fdf2884519a3055 Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Wed, 28 May 2025 19:54:47 +0200
Subject: [PATCH 17/42] removing multiple shift

---
 .../arrangementer/[id]/edit/+page.svelte      | 31 +++++++------------
 1 file changed, 11 insertions(+), 20 deletions(-)

diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
index c9f06bb2..b0686ac4 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
@@ -11,7 +11,6 @@
 	let { data, form } = $props();
 
 	let showDeleteConfirm = $state(false);
-  let deletedShifts = $state([''])
 
 	const eventState = new CreateEventState();
 
@@ -32,7 +31,7 @@
 	let originalShifts = $state(data.event.shifts.map((shift) => ({ id: shift.id })));
 	let deletedShiftIds = $state([] as string[]);
 	let removedUserShifts = $state([] as string[]);
-  
+
 
 	beforeNavigate(({ cancel }) => {
 		if (deletedShiftIds.length > 0 || removedUserShifts.length > 0) {
@@ -41,6 +40,7 @@
 			}
 		}
 	});
+
 </script>
 
 <svelte:head>
@@ -146,18 +146,16 @@
 								type="button"
 								class="rounded-full p-1 text-red-400 hover:text-red-600"
 								onclick={() => {
-                  
-									if (i < originalShifts.length) {
-										deletedShiftIds = [...deletedShiftIds, `${originalShifts[i].id}`];
-									}
-                  
-                  deletedShifts.push();
-                  {console.log(deletedShifts)}
+                  if (i < originalShifts.length) {
+                    deletedShiftIds.push(originalShifts[i].id);
+                  } 
+                  eventState.deleteShift(i);
 
-                  
-									eventState.deleteShift(i);
-								}}
-							>
+                  if (i < originalShifts.length) {
+                    originalShifts.splice(i, 1);
+                }
+                }}
+              >
 								<X class="h-4 w-4" />
 							</button>
 						</div>
@@ -246,13 +244,6 @@
 			</div>
 
 			<div class="flex justify-between gap-4 border-t border-gray-100 pt-6">
-				<div class="text-sm text-gray-500">
-					{#if deletedShiftIds.length > 0 || removedUserShifts.length > 0}
-						<span class="text-yellow-600 font-medium">
-							{deletedShiftIds.length + removedUserShifts.length} ulagrede endringer
-						</span>
-					{/if}
-				</div>
 				<div class="flex gap-2">
 					<a href={`/portal/arrangementer/${data.event.id}`}>
 						<Button type="button" intent="outline">Avbryt</Button>

From f7902c35ca19211f39c9fb484a4804a2784135a0 Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Wed, 28 May 2025 19:55:21 +0200
Subject: [PATCH 18/42] UI fix

---
 apps/www/src/routes/portal/arrangementer/+page.svelte | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/apps/www/src/routes/portal/arrangementer/+page.svelte b/apps/www/src/routes/portal/arrangementer/+page.svelte
index c5d6be89..f3afd13f 100644
--- a/apps/www/src/routes/portal/arrangementer/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/+page.svelte
@@ -8,15 +8,6 @@
 	<title>Arrangementer</title>
 </svelte:head>
 
-<div class="container">
+<div class="mx-auto max-w-4xl mx-auto p-4">
 	<EventsTable events={data.events} outdated={data.outdatedEvents} />
 </div>
-
-<style>
-	.container {
-		width: 100%;
-		max-width: 1200px;
-		margin: 0 auto;
-		padding: 1rem;
-	}
-</style>

From 76b5af1f2a7893fa83085f33760264b778c367cc Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Wed, 28 May 2025 21:47:54 +0200
Subject: [PATCH 19/42] Cant join past events

---
 .../portal/arrangementer/[id]/+page.svelte    | 53 +++++++++++--------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
index c0f7edd2..73487d65 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
@@ -9,6 +9,14 @@
 	let { data } = $props();
 	let user = getUser();
 	let activeTab = $state('details');
+  let isPastEvent = $state(false)
+  $effect(() => {
+    const today = formatDate(new Date());
+    const eventDate = formatDate(data.event.date);
+    isPastEvent = eventDate < today;
+  });
+
+
 </script>
 
 <svelte:head>
@@ -25,7 +33,6 @@
 				<p class="text-sm text-gray-500">{formatDate(data.event.date)}</p>
 			</div>
 		</div>
-
 		<div class="border-b border-gray-100 px-6 pt-4">
 			<div class="flex gap-2">
 				<button
@@ -108,7 +115,6 @@
 										</p>
 									</div>
 								</div>
-
 								<div>
 									<p class="text-sm text-gray-500">Ansvarlige</p>
 									<p class="font-medium">
@@ -116,27 +122,28 @@
 											'Ingen ansvarlige'}
 									</p>
 								</div>
-
-								{#if !isInShift}
-									<form action="?/join" method="post" use:enhance>
-										<input type="hidden" name="shiftId" value={shift.id} />
-										<button
-											class="inline-flex items-center text-sm font-medium text-blue-500 hover:text-blue-700"
-										>
-											<Plus size={16} />
-											Bli med på vakten
-										</button>
-									</form>
-								{:else}
-									<form action="?/leave" method="post" use:enhance>
-										<input type="hidden" name="shiftId" value={shift.id} />
-										<button
-											class="inline-flex items-center text-sm font-medium text-red-500 hover:text-red-700"
-										>
-											<X size={16} />
-											Forlat vakten
-										</button>
-									</form>
+                {#if !isPastEvent}
+                  {#if !isInShift}
+                    <form action="?/join" method="post" use:enhance>
+                      <input type="hidden" name="shiftId" value={shift.id} />
+                      <button
+                        class="inline-flex items-center text-sm font-medium text-blue-500 hover:text-blue-700"
+                      >
+                        <Plus size={16} />
+                        Bli med på vakten
+                      </button>
+                    </form>
+                  {:else}
+                    <form action="?/leave" method="post" use:enhance>
+                      <input type="hidden" name="shiftId" value={shift.id} />
+                      <button
+                        class="inline-flex items-center text-sm font-medium text-red-500 hover:text-red-700"
+                      >
+                        <X size={16} />
+                        Forlat vakten
+                      </button>
+                    </form>
+                  {/if}
 								{/if}
 							</div>
 						</div>

From 5cef44ab7f642db59a69deaa29a49deee91ea64b Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Wed, 28 May 2025 23:06:02 +0200
Subject: [PATCH 20/42] Mobile layout

---
 .../lib/components/portal/EventTable.svelte   | 49 ++++++++++++++++---
 1 file changed, 43 insertions(+), 6 deletions(-)

diff --git a/apps/www/src/lib/components/portal/EventTable.svelte b/apps/www/src/lib/components/portal/EventTable.svelte
index 02dd545e..f27e2af5 100644
--- a/apps/www/src/lib/components/portal/EventTable.svelte
+++ b/apps/www/src/lib/components/portal/EventTable.svelte
@@ -89,32 +89,69 @@
 				return '';
 		}
 	}
+
+
+let isMobile = $state(false);
+
+$effect(() => {
+  const updateLayout = () => {
+    isMobile = window.innerWidth < 768; 
+  };
+  
+  updateLayout(); 
+  window.addEventListener('resize', updateLayout);
+  
+  return () => {
+    window.removeEventListener('resize', updateLayout);
+  };
+});
 </script>
 
 <div class="overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-lg">
-	<div class="flex flex-wrap gap-2 bg-white p-2">
+	<div class="flex bg-white p-2 flex-wrap gap-2">
 		<button
-			class={`min-w-[150px] flex-1 cursor-pointer rounded-lg px-6 py-3 font-medium text-gray-500 transition-all duration-200 ease-in-out ${activeTab === 'upcoming' ? 'bg-blue-100 font-semibold text-blue-600' : 'hover:bg-gray-100 hover:text-blue-500'}`}
+			class={`min-w-[200px] flex-1 cursor-pointer rounded-lg px-6 py-3 font-medium text-gray-500 transition-all duration-200 ease-in-out ${
+				activeTab === 'upcoming' 
+					? 'bg-blue-100 font-semibold text-blue-600' 
+					: 'hover:bg-gray-100 hover:text-blue-500'
+			}`}
 			onclick={() => (activeTab = 'upcoming')}
 		>
 			Arrangementer
 		</button>
+		
 		<button
-			class={`min-w-[150px] flex-1 cursor-pointer rounded-lg px-6 py-3 font-medium text-gray-500 transition-all duration-200 ease-in-out ${activeTab === 'past' ? 'bg-blue-100 font-semibold text-blue-600' : 'hover:bg-gray-100 hover:text-blue-500'}`}
+			class={`min-w-[200px] flex-1 cursor-pointer rounded-lg px-6 py-3 font-medium text-gray-500 transition-all duration-200 ease-in-out ${
+				activeTab === 'past' 
+					? 'bg-blue-100 font-semibold text-blue-600' 
+					: 'hover:bg-gray-100 hover:text-blue-500'
+			}`}
 			onclick={() => (activeTab = 'past')}
 		>
 			Tidligere arrangementer
 		</button>
+		
+		{#if isMobile && $user?.role === 'board'}
+			<button
+				class="w-full cursor-pointer rounded-lg px-6 py-3 font-medium bg-blue-50 font-semibold text-blue-600 transition-all duration-200 ease-in-out hover:bg-blue-100"
+				onclick={() => goto(`arrangementer/ny`)}
+			>
+				Nytt Arrangement
+			</button>
+		{/if}
 	</div>
+
 	<div class="relative w-full px-2">
 		<input
 			type="text"
 			placeholder="Søk etter arrangementer..."
 			bind:value={search}
-			class="w-full rounded-lg border border-gray-300 py-3 pl-4 pr-32 text-base focus:border-blue-500 focus:outline-none focus:ring focus:ring-blue-200 focus:ring-opacity-50"
+			class={`w-full rounded-lg border border-gray-300 py-3 pl-4 text-base focus:border-blue-500 focus:outline-none focus:ring focus:ring-blue-200 focus:ring-opacity-50 ${
+				isMobile || !($user?.role === 'board') ? 'pr-4' : 'pr-32'
+			}`}
 		/>
-
-		{#if $user?.role === 'board'}
+		
+		{#if !isMobile && $user?.role === 'board'}
 			<div class="absolute right-3 top-1/2 -translate-y-1/2 transform">
 				<Button onclick={() => goto(`arrangementer/ny`)}>Nytt arrangement</Button>
 			</div>

From 9e112201175b84f7df92529e765eac248cd57f65 Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Wed, 28 May 2025 23:07:03 +0200
Subject: [PATCH 21/42] Diff redir

---
 .../portal/arrangementer/[id]/edit/+page.svelte      | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
index b0686ac4..6a815195 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
@@ -94,15 +94,7 @@
 
 
 
-		<form method="POST" action="?/save" use:enhance={() => {
-			return async ({ result, update }) => {
-				if (result.type === 'success') {
-					deletedShiftIds = [];
-					removedUserShifts = [];
-				}
-				await update();
-			};
-		}}>
+		<form method="POST" action="?/save" use:enhance>
 			<input type="hidden" name="shiftsCount" value={eventState.shifts.length} />
 			{#each deletedShiftIds as id}
 				<input type="hidden" name="deletedShiftIds" value={id} />
@@ -245,7 +237,7 @@
 
 			<div class="flex justify-between gap-4 border-t border-gray-100 pt-6">
 				<div class="flex gap-2">
-					<a href={`/portal/arrangementer/${data.event.id}`}>
+					<a href={`/portal/arrangementer/`}>
 						<Button type="button" intent="outline">Avbryt</Button>
 					</a>
 					<Button type="submit" intent="primary" disabled={!eventState.isValid()}>

From d4b8b47eef8d15d4495584508d2c64815b31bc55 Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Wed, 28 May 2025 23:46:10 +0200
Subject: [PATCH 22/42] format

---
 .../lib/components/portal/EventTable.svelte   | 28 +++++++++----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/apps/www/src/lib/components/portal/EventTable.svelte b/apps/www/src/lib/components/portal/EventTable.svelte
index f27e2af5..a245ba58 100644
--- a/apps/www/src/lib/components/portal/EventTable.svelte
+++ b/apps/www/src/lib/components/portal/EventTable.svelte
@@ -4,7 +4,8 @@
 	import { SquarePen } from '@lucide/svelte';
 	import { getUser } from '$lib/context/user.context';
 	import Button from '../ui/Button.svelte';
-
+	import Input from '$lib/components/ui/Input.svelte';
+  
 	type Event = {
 		id: string;
 		name: string;
@@ -95,7 +96,7 @@ let isMobile = $state(false);
 
 $effect(() => {
   const updateLayout = () => {
-    isMobile = window.innerWidth < 768; 
+    isMobile = window.innerWidth < 546; 
   };
   
   updateLayout(); 
@@ -110,22 +111,22 @@ $effect(() => {
 <div class="overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-lg">
 	<div class="flex bg-white p-2 flex-wrap gap-2">
 		<button
-			class={`min-w-[200px] flex-1 cursor-pointer rounded-lg px-6 py-3 font-medium text-gray-500 transition-all duration-200 ease-in-out ${
+			class="min-w-[200px] flex-1 cursor-pointer rounded-lg px-6 py-3 font-medium text-gray-500 transition-all duration-200 ease-in-out {
 				activeTab === 'upcoming' 
 					? 'bg-blue-100 font-semibold text-blue-600' 
 					: 'hover:bg-gray-100 hover:text-blue-500'
-			}`}
+			}}"
 			onclick={() => (activeTab = 'upcoming')}
 		>
 			Arrangementer
 		</button>
 		
 		<button
-			class={`min-w-[200px] flex-1 cursor-pointer rounded-lg px-6 py-3 font-medium text-gray-500 transition-all duration-200 ease-in-out ${
+			class="min-w-[200px] flex-1 cursor-pointer rounded-lg px-6 py-3 font-medium text-gray-500 transition-all duration-200 ease-in-out {
 				activeTab === 'past' 
 					? 'bg-blue-100 font-semibold text-blue-600' 
 					: 'hover:bg-gray-100 hover:text-blue-500'
-			}`}
+			}"
 			onclick={() => (activeTab = 'past')}
 		>
 			Tidligere arrangementer
@@ -141,20 +142,17 @@ $effect(() => {
 		{/if}
 	</div>
 
-	<div class="relative w-full px-2">
-		<input
-			type="text"
+	<div class="flex items-center gap-2 px-2">
+		<Input
+			type="search"
 			placeholder="Søk etter arrangementer..."
 			bind:value={search}
-			class={`w-full rounded-lg border border-gray-300 py-3 pl-4 text-base focus:border-blue-500 focus:outline-none focus:ring focus:ring-blue-200 focus:ring-opacity-50 ${
+			class="w-full flex-1 {
 				isMobile || !($user?.role === 'board') ? 'pr-4' : 'pr-32'
-			}`}
+			}"
 		/>
-		
 		{#if !isMobile && $user?.role === 'board'}
-			<div class="absolute right-3 top-1/2 -translate-y-1/2 transform">
 				<Button onclick={() => goto(`arrangementer/ny`)}>Nytt arrangement</Button>
-			</div>
 		{/if}
 	</div>
 
@@ -197,7 +195,7 @@ $effect(() => {
 								{countShifts(event)}
 							</td>
 							<td
-								class={`max-w-[200px] overflow-hidden overflow-ellipsis whitespace-nowrap break-words border-b border-gray-100 p-4 ${getStatusClass(status)}`}
+								class="max-w-[200px] overflow-hidden overflow-ellipsis whitespace-nowrap break-words border-b border-gray-100 p-4 {getStatusClass(status)}"
 							>
 								{status}
 							</td>

From 16f535fc3e3ae62be9b469fe82b53b67f2c17aa1 Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Wed, 28 May 2025 23:46:34 +0200
Subject: [PATCH 23/42] format

---
 .../lib/components/portal/EventTable.svelte   |  65 +++---
 .../routes/portal/arrangementer/+page.svelte  |   2 +-
 .../portal/arrangementer/[id]/+page.svelte    |  58 +++--
 .../arrangementer/[id]/edit/+page.server.ts   | 217 +++++++++---------
 .../arrangementer/[id]/edit/+page.svelte      |  38 ++-
 5 files changed, 186 insertions(+), 194 deletions(-)

diff --git a/apps/www/src/lib/components/portal/EventTable.svelte b/apps/www/src/lib/components/portal/EventTable.svelte
index a245ba58..0f05cbae 100644
--- a/apps/www/src/lib/components/portal/EventTable.svelte
+++ b/apps/www/src/lib/components/portal/EventTable.svelte
@@ -5,7 +5,7 @@
 	import { getUser } from '$lib/context/user.context';
 	import Button from '../ui/Button.svelte';
 	import Input from '$lib/components/ui/Input.svelte';
-  
+
 	type Event = {
 		id: string;
 		name: string;
@@ -91,50 +91,47 @@
 		}
 	}
 
+	let isMobile = $state(false);
+
+	$effect(() => {
+		const updateLayout = () => {
+			isMobile = window.innerWidth < 546;
+		};
+
+		updateLayout();
+		window.addEventListener('resize', updateLayout);
 
-let isMobile = $state(false);
-
-$effect(() => {
-  const updateLayout = () => {
-    isMobile = window.innerWidth < 546; 
-  };
-  
-  updateLayout(); 
-  window.addEventListener('resize', updateLayout);
-  
-  return () => {
-    window.removeEventListener('resize', updateLayout);
-  };
-});
+		return () => {
+			window.removeEventListener('resize', updateLayout);
+		};
+	});
 </script>
 
 <div class="overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-lg">
-	<div class="flex bg-white p-2 flex-wrap gap-2">
+	<div class="flex flex-wrap gap-2 bg-white p-2">
 		<button
-			class="min-w-[200px] flex-1 cursor-pointer rounded-lg px-6 py-3 font-medium text-gray-500 transition-all duration-200 ease-in-out {
-				activeTab === 'upcoming' 
-					? 'bg-blue-100 font-semibold text-blue-600' 
-					: 'hover:bg-gray-100 hover:text-blue-500'
-			}}"
+			class="min-w-[200px] flex-1 cursor-pointer rounded-lg px-6 py-3 font-medium text-gray-500 transition-all duration-200 ease-in-out {activeTab ===
+			'upcoming'
+				? 'bg-blue-100 font-semibold text-blue-600'
+				: 'hover:bg-gray-100 hover:text-blue-500'}}"
 			onclick={() => (activeTab = 'upcoming')}
 		>
 			Arrangementer
 		</button>
-		
+
 		<button
-			class="min-w-[200px] flex-1 cursor-pointer rounded-lg px-6 py-3 font-medium text-gray-500 transition-all duration-200 ease-in-out {
-				activeTab === 'past' 
-					? 'bg-blue-100 font-semibold text-blue-600' 
-					: 'hover:bg-gray-100 hover:text-blue-500'
-			}"
+			class="min-w-[200px] flex-1 cursor-pointer rounded-lg px-6 py-3 font-medium text-gray-500 transition-all duration-200 ease-in-out {activeTab ===
+			'past'
+				? 'bg-blue-100 font-semibold text-blue-600'
+				: 'hover:bg-gray-100 hover:text-blue-500'}"
 			onclick={() => (activeTab = 'past')}
 		>
 			Tidligere arrangementer
 		</button>
-		
+
 		{#if isMobile && $user?.role === 'board'}
 			<button
-				class="w-full cursor-pointer rounded-lg px-6 py-3 font-medium bg-blue-50 font-semibold text-blue-600 transition-all duration-200 ease-in-out hover:bg-blue-100"
+				class="w-full cursor-pointer rounded-lg bg-blue-50 px-6 py-3 font-medium font-semibold text-blue-600 transition-all duration-200 ease-in-out hover:bg-blue-100"
 				onclick={() => goto(`arrangementer/ny`)}
 			>
 				Nytt Arrangement
@@ -147,12 +144,10 @@ $effect(() => {
 			type="search"
 			placeholder="Søk etter arrangementer..."
 			bind:value={search}
-			class="w-full flex-1 {
-				isMobile || !($user?.role === 'board') ? 'pr-4' : 'pr-32'
-			}"
+			class="w-full flex-1 {isMobile || !($user?.role === 'board') ? 'pr-4' : 'pr-32'}"
 		/>
 		{#if !isMobile && $user?.role === 'board'}
-				<Button onclick={() => goto(`arrangementer/ny`)}>Nytt arrangement</Button>
+			<Button onclick={() => goto(`arrangementer/ny`)}>Nytt arrangement</Button>
 		{/if}
 	</div>
 
@@ -195,7 +190,9 @@ $effect(() => {
 								{countShifts(event)}
 							</td>
 							<td
-								class="max-w-[200px] overflow-hidden overflow-ellipsis whitespace-nowrap break-words border-b border-gray-100 p-4 {getStatusClass(status)}"
+								class="max-w-[200px] overflow-hidden overflow-ellipsis whitespace-nowrap break-words border-b border-gray-100 p-4 {getStatusClass(
+									status
+								)}"
 							>
 								{status}
 							</td>
diff --git a/apps/www/src/routes/portal/arrangementer/+page.svelte b/apps/www/src/routes/portal/arrangementer/+page.svelte
index f3afd13f..6eacb672 100644
--- a/apps/www/src/routes/portal/arrangementer/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/+page.svelte
@@ -8,6 +8,6 @@
 	<title>Arrangementer</title>
 </svelte:head>
 
-<div class="mx-auto max-w-4xl mx-auto p-4">
+<div class="mx-auto mx-auto max-w-4xl p-4">
 	<EventsTable events={data.events} outdated={data.outdatedEvents} />
 </div>
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
index 73487d65..1964298c 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
@@ -9,14 +9,12 @@
 	let { data } = $props();
 	let user = getUser();
 	let activeTab = $state('details');
-  let isPastEvent = $state(false)
-  $effect(() => {
-    const today = formatDate(new Date());
-    const eventDate = formatDate(data.event.date);
-    isPastEvent = eventDate < today;
-  });
-
-
+	let isPastEvent = $state(false);
+	$effect(() => {
+		const today = formatDate(new Date());
+		const eventDate = formatDate(data.event.date);
+		isPastEvent = eventDate < today;
+	});
 </script>
 
 <svelte:head>
@@ -122,28 +120,28 @@
 											'Ingen ansvarlige'}
 									</p>
 								</div>
-                {#if !isPastEvent}
-                  {#if !isInShift}
-                    <form action="?/join" method="post" use:enhance>
-                      <input type="hidden" name="shiftId" value={shift.id} />
-                      <button
-                        class="inline-flex items-center text-sm font-medium text-blue-500 hover:text-blue-700"
-                      >
-                        <Plus size={16} />
-                        Bli med på vakten
-                      </button>
-                    </form>
-                  {:else}
-                    <form action="?/leave" method="post" use:enhance>
-                      <input type="hidden" name="shiftId" value={shift.id} />
-                      <button
-                        class="inline-flex items-center text-sm font-medium text-red-500 hover:text-red-700"
-                      >
-                        <X size={16} />
-                        Forlat vakten
-                      </button>
-                    </form>
-                  {/if}
+								{#if !isPastEvent}
+									{#if !isInShift}
+										<form action="?/join" method="post" use:enhance>
+											<input type="hidden" name="shiftId" value={shift.id} />
+											<button
+												class="inline-flex items-center text-sm font-medium text-blue-500 hover:text-blue-700"
+											>
+												<Plus size={16} />
+												Bli med på vakten
+											</button>
+										</form>
+									{:else}
+										<form action="?/leave" method="post" use:enhance>
+											<input type="hidden" name="shiftId" value={shift.id} />
+											<button
+												class="inline-flex items-center text-sm font-medium text-red-500 hover:text-red-700"
+											>
+												<X size={16} />
+												Forlat vakten
+											</button>
+										</form>
+									{/if}
 								{/if}
 							</div>
 						</div>
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
index a27d4f12..ac8231ca 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
@@ -21,112 +21,113 @@ export const load: PageServerLoad = async ({ locals, params }) => {
 };
 
 export const actions: Actions = {
-  delete: async ({ params, locals }) => {
-    if (locals.user?.role !== 'board') {
-      return fail(401, { message: 'Unauthorized' });
-    }
-    
-    await locals.eventService.delete(params.id);
-    throw redirect(303, '/portal/arrangementer');
-  },
-
-
-  save: async ({ request, params, locals }) => {
-    if (locals.user?.role !== 'board') {
-      return fail(401, { message: 'Unauthorized' });
-    }
-
-    const formData = await request.formData();
-    const eventId = params.id;
-
-    const updated = await locals.eventService.updateEvent(params.id, {
-      name: String(formData.get('name') || ''),
-      date: new Date(String(formData.get('date') || ''))
-    });
-
-    const deletedShiftIds = formData.getAll('deletedShiftIds').map(id => String(id));
-    for (const shiftId of deletedShiftIds) {
-      await locals.eventService.deleteShift(shiftId);
-    }
-
-    const removedUserShifts = formData.getAll('removedUserShifts').map(kv => String(kv));
-    for (const userShift of removedUserShifts) {
-      const [shiftId, userId] = userShift.split('|');
-      if (shiftId && userId) {
-        await locals.eventService.deleteUserShift({ shiftId, userId });
-      }
-    }
-
-    const existingEvent = await locals.eventService.findFullEventById(eventId);
-    if (!existingEvent) {
-      return fail(404, { message: 'Event not found' });
-    }
-
-    const shiftsCount = parseInt(String(formData.get('shiftsCount') || '0'), 10);
-    const processedShifts = [];
-
-    for (let i = 0; i < shiftsCount; i++) {
-      const shiftId = formData.get(`shift[${i}].id`)?.toString();
-      const startAt = new Date(String(formData.get(`shift[${i}].startAt`)));
-      const endAt = new Date(String(formData.get(`shift[${i}].endAt`)));
-
-      let shift;
-
-      if (shiftId) {
-        shift = await locals.eventService.updateShift(shiftId, {
-          eventId,
-          startAt,
-          endAt
-        });
-      } else {
-        const shifts = await locals.eventService.createShifts([{
-          eventId,
-          startAt,
-          endAt
-        }]);
-        shift = shifts?.[0];
-      }
-
-      if (!shift) {
-        return fail(500, { message: 'Failed to create/update shift' });
-      }
-
-      processedShifts.push({
-        shiftId: shift.id,
-        index: i
-      });
-    }
-
-    for (const { shiftId, index } of processedShifts) {
-      const userCount = parseInt(String(formData.get(`shift[${index}].userCount`) || '0'), 10);
-
-      const existingShift = existingEvent.shifts.find(s => s.id === shiftId);
-      const existingUserIds = existingShift?.members.map(m => m.user.id) || [];
-
-      const newUserIds: string[] = [];
-      for (let j = 0; j < userCount; j++) {
-        const userId = formData.get(`shift[${index}].user[${j}].id`)?.toString();
-        if (userId?.trim()) {
-          newUserIds.push(userId);
-        }
-      }
-
-      const usersToAdd = newUserIds.filter(userId => !existingUserIds.includes(userId));
-      const usersToRemove = existingUserIds.filter(userId => !newUserIds.includes(userId));
-
-      if (usersToAdd.length > 0) {
-        const userShiftsToCreate = usersToAdd.map(userId => ({
-          shiftId,
-          userId
-        }));
-        await locals.eventService.createUserShifts(userShiftsToCreate);
-      }
-
-      for (const userId of usersToRemove) {
-        await locals.eventService.deleteUserShift({ shiftId, userId });
-      }
-    }
-
-    return { success: true, message: 'Vakten har blitt oppdatert' };
-  }
+	delete: async ({ params, locals }) => {
+		if (locals.user?.role !== 'board') {
+			return fail(401, { message: 'Unauthorized' });
+		}
+
+		await locals.eventService.delete(params.id);
+		throw redirect(303, '/portal/arrangementer');
+	},
+
+	save: async ({ request, params, locals }) => {
+		if (locals.user?.role !== 'board') {
+			return fail(401, { message: 'Unauthorized' });
+		}
+
+		const formData = await request.formData();
+		const eventId = params.id;
+
+		const updated = await locals.eventService.updateEvent(params.id, {
+			name: String(formData.get('name') || ''),
+			date: new Date(String(formData.get('date') || ''))
+		});
+
+		const deletedShiftIds = formData.getAll('deletedShiftIds').map((id) => String(id));
+		for (const shiftId of deletedShiftIds) {
+			await locals.eventService.deleteShift(shiftId);
+		}
+
+		const removedUserShifts = formData.getAll('removedUserShifts').map((kv) => String(kv));
+		for (const userShift of removedUserShifts) {
+			const [shiftId, userId] = userShift.split('|');
+			if (shiftId && userId) {
+				await locals.eventService.deleteUserShift({ shiftId, userId });
+			}
+		}
+
+		const existingEvent = await locals.eventService.findFullEventById(eventId);
+		if (!existingEvent) {
+			return fail(404, { message: 'Event not found' });
+		}
+
+		const shiftsCount = parseInt(String(formData.get('shiftsCount') || '0'), 10);
+		const processedShifts = [];
+
+		for (let i = 0; i < shiftsCount; i++) {
+			const shiftId = formData.get(`shift[${i}].id`)?.toString();
+			const startAt = new Date(String(formData.get(`shift[${i}].startAt`)));
+			const endAt = new Date(String(formData.get(`shift[${i}].endAt`)));
+
+			let shift;
+
+			if (shiftId) {
+				shift = await locals.eventService.updateShift(shiftId, {
+					eventId,
+					startAt,
+					endAt
+				});
+			} else {
+				const shifts = await locals.eventService.createShifts([
+					{
+						eventId,
+						startAt,
+						endAt
+					}
+				]);
+				shift = shifts?.[0];
+			}
+
+			if (!shift) {
+				return fail(500, { message: 'Failed to create/update shift' });
+			}
+
+			processedShifts.push({
+				shiftId: shift.id,
+				index: i
+			});
+		}
+
+		for (const { shiftId, index } of processedShifts) {
+			const userCount = parseInt(String(formData.get(`shift[${index}].userCount`) || '0'), 10);
+
+			const existingShift = existingEvent.shifts.find((s) => s.id === shiftId);
+			const existingUserIds = existingShift?.members.map((m) => m.user.id) || [];
+
+			const newUserIds: string[] = [];
+			for (let j = 0; j < userCount; j++) {
+				const userId = formData.get(`shift[${index}].user[${j}].id`)?.toString();
+				if (userId?.trim()) {
+					newUserIds.push(userId);
+				}
+			}
+
+			const usersToAdd = newUserIds.filter((userId) => !existingUserIds.includes(userId));
+			const usersToRemove = existingUserIds.filter((userId) => !newUserIds.includes(userId));
+
+			if (usersToAdd.length > 0) {
+				const userShiftsToCreate = usersToAdd.map((userId) => ({
+					shiftId,
+					userId
+				}));
+				await locals.eventService.createUserShifts(userShiftsToCreate);
+			}
+
+			for (const userId of usersToRemove) {
+				await locals.eventService.deleteUserShift({ shiftId, userId });
+			}
+		}
+
+		return { success: true, message: 'Vakten har blitt oppdatert' };
+	}
 };
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
index 6a815195..b1b06af2 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
@@ -32,7 +32,6 @@
 	let deletedShiftIds = $state([] as string[]);
 	let removedUserShifts = $state([] as string[]);
 
-
 	beforeNavigate(({ cancel }) => {
 		if (deletedShiftIds.length > 0 || removedUserShifts.length > 0) {
 			if (!confirm('Du har ulagrede endringer. Er du sikker på at du vil forlate siden?')) {
@@ -40,7 +39,6 @@
 			}
 		}
 	});
-
 </script>
 
 <svelte:head>
@@ -83,17 +81,19 @@
 				<p class="font-medium">Ulagrede endringer:</p>
 				<ul class="mt-1 text-sm">
 					{#if deletedShiftIds.length > 0}
-						<li>• {deletedShiftIds.length} vakt{deletedShiftIds.length > 1 ? 'er' : ''} vil bli slettet</li>
+						<li>
+							• {deletedShiftIds.length} vakt{deletedShiftIds.length > 1 ? 'er' : ''} vil bli slettet
+						</li>
 					{/if}
 					{#if removedUserShifts.length > 0}
-						<li>• {removedUserShifts.length} bruker{removedUserShifts.length > 1 ? 'e' : ''} vil bli fjernet</li>
+						<li>
+							• {removedUserShifts.length} bruker{removedUserShifts.length > 1 ? 'e' : ''} vil bli fjernet
+						</li>
 					{/if}
 				</ul>
 			</div>
 		{/if}
 
-
-
 		<form method="POST" action="?/save" use:enhance>
 			<input type="hidden" name="shiftsCount" value={eventState.shifts.length} />
 			{#each deletedShiftIds as id}
@@ -138,16 +138,16 @@
 								type="button"
 								class="rounded-full p-1 text-red-400 hover:text-red-600"
 								onclick={() => {
-                  if (i < originalShifts.length) {
-                    deletedShiftIds.push(originalShifts[i].id);
-                  } 
-                  eventState.deleteShift(i);
-
-                  if (i < originalShifts.length) {
-                    originalShifts.splice(i, 1);
-                }
-                }}
-              >
+									if (i < originalShifts.length) {
+										deletedShiftIds.push(originalShifts[i].id);
+									}
+									eventState.deleteShift(i);
+
+									if (i < originalShifts.length) {
+										originalShifts.splice(i, 1);
+									}
+								}}
+							>
 								<X class="h-4 w-4" />
 							</button>
 						</div>
@@ -176,11 +176,7 @@
 						<div class="mt-4 border-t border-gray-300 pt-4">
 							<div class="mb-2 flex items-center justify-between">
 								<h4 class="font-medium">Ansvarlige</h4>
-								<Button 
-									type="button" 
-									class="text-sm" 
-									onclick={() => eventState.addUserToShift(i)}
-								>
+								<Button type="button" class="text-sm" onclick={() => eventState.addUserToShift(i)}>
 									<Plus class="mr-1 h-4 w-4" />
 									Legg til
 								</Button>

From 51fbbc1a9d13d21449ab55dea625b1c5c9712071 Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Fri, 30 May 2025 14:51:57 +0200
Subject: [PATCH 24/42] sort users by name

---
 apps/www/src/routes/portal/admin/+page.svelte   | 4 +++-
 apps/www/src/routes/portal/brukere/+page.svelte | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/www/src/routes/portal/admin/+page.svelte b/apps/www/src/routes/portal/admin/+page.svelte
index 5c1ab9ea..5779a000 100644
--- a/apps/www/src/routes/portal/admin/+page.svelte
+++ b/apps/www/src/routes/portal/admin/+page.svelte
@@ -15,12 +15,14 @@
 		data.users.filter((user: User) => {
 			return user.role === 'board' && user.name.toLowerCase().includes(search.toLowerCase());
 		})
+    .sort((a, b) => a.name.localeCompare(b.name))
 	);
 
 	let normalMembers = $derived.by(() =>
 		data.users.filter((user: User) => {
 			return user.role === 'normal' && user.name.toLowerCase().includes(search.toLowerCase());
-		})
+		}) 
+    .sort((a, b) => a.name.localeCompare(b.name))
 	);
 
 	function closeModal() {
diff --git a/apps/www/src/routes/portal/brukere/+page.svelte b/apps/www/src/routes/portal/brukere/+page.svelte
index af75a7a5..d9150ac7 100644
--- a/apps/www/src/routes/portal/brukere/+page.svelte
+++ b/apps/www/src/routes/portal/brukere/+page.svelte
@@ -16,6 +16,7 @@
 		data.users.filter((user) => {
 			return user.name.toLowerCase().includes(search.toLowerCase());
 		})
+    .sort((a, b) => a.name.localeCompare(b.name))
 	);
 </script>
 

From 97b3c8e247213925322fe30ef29242c432e684cc Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Fri, 30 May 2025 14:57:20 +0200
Subject: [PATCH 25/42] format' '

---
 apps/www/src/routes/portal/admin/+page.svelte  | 18 ++++++++++--------
 .../routes/portal/arrangementer/+page.svelte   |  2 +-
 .../www/src/routes/portal/brukere/+page.svelte |  9 +++++----
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/apps/www/src/routes/portal/admin/+page.svelte b/apps/www/src/routes/portal/admin/+page.svelte
index 5779a000..93d3984b 100644
--- a/apps/www/src/routes/portal/admin/+page.svelte
+++ b/apps/www/src/routes/portal/admin/+page.svelte
@@ -12,17 +12,19 @@
 	let isModalOpen = $state(false);
 
 	let boardMembers = $derived.by(() =>
-		data.users.filter((user: User) => {
-			return user.role === 'board' && user.name.toLowerCase().includes(search.toLowerCase());
-		})
-    .sort((a, b) => a.name.localeCompare(b.name))
+		data.users
+			.filter((user: User) => {
+				return user.role === 'board' && user.name.toLowerCase().includes(search.toLowerCase());
+			})
+			.sort((a, b) => a.name.localeCompare(b.name))
 	);
 
 	let normalMembers = $derived.by(() =>
-		data.users.filter((user: User) => {
-			return user.role === 'normal' && user.name.toLowerCase().includes(search.toLowerCase());
-		}) 
-    .sort((a, b) => a.name.localeCompare(b.name))
+		data.users
+			.filter((user: User) => {
+				return user.role === 'normal' && user.name.toLowerCase().includes(search.toLowerCase());
+			})
+			.sort((a, b) => a.name.localeCompare(b.name))
 	);
 
 	function closeModal() {
diff --git a/apps/www/src/routes/portal/arrangementer/+page.svelte b/apps/www/src/routes/portal/arrangementer/+page.svelte
index 6eacb672..8e6ba441 100644
--- a/apps/www/src/routes/portal/arrangementer/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/+page.svelte
@@ -8,6 +8,6 @@
 	<title>Arrangementer</title>
 </svelte:head>
 
-<div class="mx-auto mx-auto max-w-4xl p-4">
+<div class="mx-auto max-w-4xl p-4">
 	<EventsTable events={data.events} outdated={data.outdatedEvents} />
 </div>
diff --git a/apps/www/src/routes/portal/brukere/+page.svelte b/apps/www/src/routes/portal/brukere/+page.svelte
index d9150ac7..8771fb08 100644
--- a/apps/www/src/routes/portal/brukere/+page.svelte
+++ b/apps/www/src/routes/portal/brukere/+page.svelte
@@ -13,10 +13,11 @@
 	let search = $state('');
 
 	let filteredUsers = $derived.by(() =>
-		data.users.filter((user) => {
-			return user.name.toLowerCase().includes(search.toLowerCase());
-		})
-    .sort((a, b) => a.name.localeCompare(b.name))
+		data.users
+			.filter((user) => {
+				return user.name.toLowerCase().includes(search.toLowerCase());
+			})
+			.sort((a, b) => a.name.localeCompare(b.name))
 	);
 </script>
 

From 8bb9ac00f611cc91c6ad0d575b87a90c794d13da Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Fri, 30 May 2025 15:47:49 +0200
Subject: [PATCH 26/42] fixed colu

mn
---
 .../lib/components/portal/EventTable.svelte   | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/apps/www/src/lib/components/portal/EventTable.svelte b/apps/www/src/lib/components/portal/EventTable.svelte
index 0f05cbae..2fce8c39 100644
--- a/apps/www/src/lib/components/portal/EventTable.svelte
+++ b/apps/www/src/lib/components/portal/EventTable.svelte
@@ -157,14 +157,19 @@
 		</div>
 	{:else}
 		<div class="overflow-x-auto p-2">
-			<table class="w-full min-w-[600px]">
+			<table class="w-full table-fixed">
+				<colgroup>
+					<col class="w-[35%]" />
+					<col class="w-[20%]" />
+					<col class="w-[20%]" />
+					<col class="w-[15%]" />
+				</colgroup>
 				<thead>
-					<tr>
-						<th class="border-b-2 border-gray-200 p-4 text-left">Arrangement</th>
-						<th class="border-b-2 border-gray-200 p-4 text-left">Dato</th>
-						<th class="border-b-2 border-gray-200 p-4 text-left">Antall vakter</th>
-						<th class="border-b-2 border-gray-200 p-4 text-left">Status</th>
-						<th class="border-b-2 border-gray-200 p-4 text-left" aria-label="Handlinger"></th>
+					<tr class="border-b-2 border-gray-200">
+						<th class="p-4 text-left">Arrangement</th>
+						<th class="p-4 text-left">Dato</th>
+						<th class="p-4 text-left">Antall vakter</th>
+						<th class="p-4 text-left">Status</th>
 					</tr>
 				</thead>
 				<tbody>
@@ -175,22 +180,22 @@
 							onclick={() => goto(`arrangementer/${event.id}`)}
 						>
 							<td
-								class="max-w-[200px] overflow-hidden overflow-ellipsis whitespace-nowrap break-words border-b border-gray-100 p-4"
+								class="overflow-hidden overflow-ellipsis whitespace-nowrap break-words border-b border-gray-100 p-4"
 							>
 								{event.name}
 							</td>
 							<td
-								class="max-w-[200px] overflow-hidden overflow-ellipsis whitespace-nowrap break-words border-b border-gray-100 p-4"
+								class="overflow-hidden overflow-ellipsis whitespace-nowrap break-words border-b border-gray-100 p-4"
 							>
 								{formatDate(event.date)}
 							</td>
 							<td
-								class="max-w-[200px] overflow-hidden overflow-ellipsis whitespace-nowrap break-words border-b border-gray-100 p-4"
+								class="verflow-hidden overflow-ellipsis whitespace-nowrap break-words border-b border-gray-100 p-4"
 							>
 								{countShifts(event)}
 							</td>
 							<td
-								class="max-w-[200px] overflow-hidden overflow-ellipsis whitespace-nowrap break-words border-b border-gray-100 p-4 {getStatusClass(
+								class="overflow-hidden overflow-ellipsis whitespace-nowrap break-words border-b border-gray-100 p-4 {getStatusClass(
 									status
 								)}"
 							>

From 181ccf8f7add251f83d3d65b2678430d6ac9ecd7 Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Fri, 30 May 2025 15:48:50 +0200
Subject: [PATCH 27/42] format

---
 apps/www/src/routes/portal/arrangementer/ny/+page.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/www/src/routes/portal/arrangementer/ny/+page.svelte b/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
index 90f02ed2..6217d6af 100644
--- a/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { EventHandler } from 'svelte/elements';
 	import { X, Plus, Save, Clock } from '@lucide/svelte';
-	import Heading from '$lib/components/ui/Heading.svelte';
 	import FormInput from '$lib/components/ui/form/FormInput.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
 	import Combobox from '$lib/components/ui/Combobox.svelte';

From 607b17a10103beaccb5ae292cb2e14a8b392c71c Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Fri, 30 May 2025 16:26:25 +0200
Subject: [PATCH 28/42] diff mobile veiw

---
 .../lib/components/portal/EventTable.svelte   | 103 +++++++++++-------
 1 file changed, 64 insertions(+), 39 deletions(-)

diff --git a/apps/www/src/lib/components/portal/EventTable.svelte b/apps/www/src/lib/components/portal/EventTable.svelte
index 2fce8c39..62cce8d5 100644
--- a/apps/www/src/lib/components/portal/EventTable.svelte
+++ b/apps/www/src/lib/components/portal/EventTable.svelte
@@ -158,21 +158,33 @@
 	{:else}
 		<div class="overflow-x-auto p-2">
 			<table class="w-full table-fixed">
-				<colgroup>
-					<col class="w-[35%]" />
-					<col class="w-[20%]" />
-					<col class="w-[20%]" />
-					<col class="w-[15%]" />
-				</colgroup>
+        {#if isMobile}
+          <colgroup>
+            <col class="w-[60%]" />
+            <col class="w-[40%]" />
+          </colgroup>
+        {:else}  
+          <colgroup>
+            <col class="w-[35%]" />
+            <col class="w-[20%]" />
+            <col class="w-[20%]" />
+            <col class="w-[15%]" />
+          </colgroup>
+        {/if}
 				<thead>
-					<tr class="border-b-2 border-gray-200">
+          <tr class="border-b-2 border-gray-200">
 						<th class="p-4 text-left">Arrangement</th>
-						<th class="p-4 text-left">Dato</th>
-						<th class="p-4 text-left">Antall vakter</th>
-						<th class="p-4 text-left">Status</th>
+						{#if isMobile}
+							<th class="p-4 text-left">Status</th>
+						{:else}
+							<th class="p-4 text-left">Dato</th>
+							<th class="p-4 text-left">Antall vakter</th>
+							<th class="p-4 text-left">Status</th>
+							<th class="p-4 text-left" aria-label="Handlinger"></th>
+						{/if}
 					</tr>
 				</thead>
-				<tbody>
+				<tbody class="border-b border-gray-100 whitespace-nowrap break-words">
 					{#each filteredEvents as event (event.id)}
 						{@const status = getEventStatus(event)}
 						<tr
@@ -180,38 +192,51 @@
 							onclick={() => goto(`arrangementer/${event.id}`)}
 						>
 							<td
-								class="overflow-hidden overflow-ellipsis whitespace-nowrap break-words border-b border-gray-100 p-4"
+								class="overflow-hidden overflow-ellipsis p-4"
 							>
 								{event.name}
 							</td>
-							<td
-								class="overflow-hidden overflow-ellipsis whitespace-nowrap break-words border-b border-gray-100 p-4"
-							>
-								{formatDate(event.date)}
-							</td>
-							<td
-								class="verflow-hidden overflow-ellipsis whitespace-nowrap break-words border-b border-gray-100 p-4"
-							>
-								{countShifts(event)}
-							</td>
-							<td
-								class="overflow-hidden overflow-ellipsis whitespace-nowrap break-words border-b border-gray-100 p-4 {getStatusClass(
-									status
-								)}"
-							>
-								{status}
-							</td>
-							<td class="border-b border-gray-100 p-4">
-								{#if $user?.role === 'board'}
-									<a
-										href="arrangementer/{event.id}/edit"
-										class="inline-flex text-gray-400 opacity-70 transition-all duration-200 ease-in-out hover:text-blue-500 hover:opacity-100"
-										aria-label="Rediger arrangement"
-									>
-										<SquarePen size={18} />
-									</a>
-								{/if}
+              {#if isMobile}
+                <td
+                  class="overflow-hidden overflow-ellipsis p-4 {getStatusClass(
+                    status
+                  )}"
+                >
+                  {status}
+                </td>
+              {:else}
+                <td
+                  class="overflow-hidden overflow-ellipsis p-4"
+                >
+                  {formatDate(event.date)}
+                </td>
+                <td
+                  class="overflow-hidden overflow-ellipsis p-4"
+                >
+                  {countShifts(event)}
+                </td>
+                <td
+                  class="overflow-hidden overflow-ellipsis p-4 {getStatusClass(
+                    status
+                  )}"
+                >
+                  {status}
+                </td>
+                {#if !isMobile}
+                <td 
+                  class="p-4">
+                  {#if $user?.role === 'board'}
+                    <a
+                      href="arrangementer/{event.id}/edit"
+                      class="inline-flex text-gray-400 opacity-70 transition-all duration-200 ease-in-out hover:text-blue-500 hover:opacity-100"
+                      aria-label="Rediger arrangement"
+                    >
+                      <SquarePen size={18} />
+                    </a>
+                  {/if}
 							</td>
+							{/if}
+							{/if}
 						</tr>
 					{/each}
 				</tbody>

From 5aa63e6329122c8336808d6c61176e2d4730cac3 Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Fri, 30 May 2025 16:27:09 +0200
Subject: [PATCH 29/42] removed date

---
 apps/www/src/routes/portal/arrangementer/[id]/+page.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
index 1964298c..beccbfdb 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
@@ -27,8 +27,7 @@
 	>
 		<div class="border-b border-gray-300 bg-gray-50 px-6 py-4">
 			<div>
-				<h1 class="text-xl font-semibold text-gray-800">{data.event.name}</h1>
-				<p class="text-sm text-gray-500">{formatDate(data.event.date)}</p>
+				<h1 class="text-xl font-semibold text-gray-800 break-words">{data.event.name}</h1>
 			</div>
 		</div>
 		<div class="border-b border-gray-100 px-6 pt-4">

From 950dff18919ac7196c14fa3c1191ddd3b2d2779a Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Fri, 30 May 2025 16:27:59 +0200
Subject: [PATCH 30/42] format

---
 .../lib/components/portal/EventTable.svelte   | 101 ++++++++----------
 .../portal/arrangementer/[id]/+page.svelte    |   2 +-
 2 files changed, 44 insertions(+), 59 deletions(-)

diff --git a/apps/www/src/lib/components/portal/EventTable.svelte b/apps/www/src/lib/components/portal/EventTable.svelte
index 62cce8d5..2a5e1c38 100644
--- a/apps/www/src/lib/components/portal/EventTable.svelte
+++ b/apps/www/src/lib/components/portal/EventTable.svelte
@@ -158,21 +158,21 @@
 	{:else}
 		<div class="overflow-x-auto p-2">
 			<table class="w-full table-fixed">
-        {#if isMobile}
-          <colgroup>
-            <col class="w-[60%]" />
-            <col class="w-[40%]" />
-          </colgroup>
-        {:else}  
-          <colgroup>
-            <col class="w-[35%]" />
-            <col class="w-[20%]" />
-            <col class="w-[20%]" />
-            <col class="w-[15%]" />
-          </colgroup>
-        {/if}
+				{#if isMobile}
+					<colgroup>
+						<col class="w-[60%]" />
+						<col class="w-[40%]" />
+					</colgroup>
+				{:else}
+					<colgroup>
+						<col class="w-[35%]" />
+						<col class="w-[20%]" />
+						<col class="w-[20%]" />
+						<col class="w-[15%]" />
+					</colgroup>
+				{/if}
 				<thead>
-          <tr class="border-b-2 border-gray-200">
+					<tr class="border-b-2 border-gray-200">
 						<th class="p-4 text-left">Arrangement</th>
 						{#if isMobile}
 							<th class="p-4 text-left">Status</th>
@@ -184,58 +184,43 @@
 						{/if}
 					</tr>
 				</thead>
-				<tbody class="border-b border-gray-100 whitespace-nowrap break-words">
+				<tbody class="whitespace-nowrap break-words border-b border-gray-100">
 					{#each filteredEvents as event (event.id)}
 						{@const status = getEventStatus(event)}
 						<tr
 							class="cursor-pointer hover:bg-gray-50"
 							onclick={() => goto(`arrangementer/${event.id}`)}
 						>
-							<td
-								class="overflow-hidden overflow-ellipsis p-4"
-							>
+							<td class="overflow-hidden overflow-ellipsis p-4">
 								{event.name}
 							</td>
-              {#if isMobile}
-                <td
-                  class="overflow-hidden overflow-ellipsis p-4 {getStatusClass(
-                    status
-                  )}"
-                >
-                  {status}
-                </td>
-              {:else}
-                <td
-                  class="overflow-hidden overflow-ellipsis p-4"
-                >
-                  {formatDate(event.date)}
-                </td>
-                <td
-                  class="overflow-hidden overflow-ellipsis p-4"
-                >
-                  {countShifts(event)}
-                </td>
-                <td
-                  class="overflow-hidden overflow-ellipsis p-4 {getStatusClass(
-                    status
-                  )}"
-                >
-                  {status}
-                </td>
-                {#if !isMobile}
-                <td 
-                  class="p-4">
-                  {#if $user?.role === 'board'}
-                    <a
-                      href="arrangementer/{event.id}/edit"
-                      class="inline-flex text-gray-400 opacity-70 transition-all duration-200 ease-in-out hover:text-blue-500 hover:opacity-100"
-                      aria-label="Rediger arrangement"
-                    >
-                      <SquarePen size={18} />
-                    </a>
-                  {/if}
-							</td>
-							{/if}
+							{#if isMobile}
+								<td class="overflow-hidden overflow-ellipsis p-4 {getStatusClass(status)}">
+									{status}
+								</td>
+							{:else}
+								<td class="overflow-hidden overflow-ellipsis p-4">
+									{formatDate(event.date)}
+								</td>
+								<td class="overflow-hidden overflow-ellipsis p-4">
+									{countShifts(event)}
+								</td>
+								<td class="overflow-hidden overflow-ellipsis p-4 {getStatusClass(status)}">
+									{status}
+								</td>
+								{#if !isMobile}
+									<td class="p-4">
+										{#if $user?.role === 'board'}
+											<a
+												href="arrangementer/{event.id}/edit"
+												class="inline-flex text-gray-400 opacity-70 transition-all duration-200 ease-in-out hover:text-blue-500 hover:opacity-100"
+												aria-label="Rediger arrangement"
+											>
+												<SquarePen size={18} />
+											</a>
+										{/if}
+									</td>
+								{/if}
 							{/if}
 						</tr>
 					{/each}
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
index beccbfdb..55633033 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
@@ -27,7 +27,7 @@
 	>
 		<div class="border-b border-gray-300 bg-gray-50 px-6 py-4">
 			<div>
-				<h1 class="text-xl font-semibold text-gray-800 break-words">{data.event.name}</h1>
+				<h1 class="break-words text-xl font-semibold text-gray-800">{data.event.name}</h1>
 			</div>
 		</div>
 		<div class="border-b border-gray-100 px-6 pt-4">

From 33f0ce1b734bf4c8bbb6c4b7868224e28cfb3fd3 Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Fri, 30 May 2025 17:32:15 +0200
Subject: [PATCH 31/42] format

---
 ;                                             | 220 ++++++++++++++++++
 .../lib/components/portal/EventTable.svelte   |  53 ++---
 .../portal/arrangementer/[id]/+page.svelte    |  12 +-
 .../arrangementer/[id]/edit/+page.svelte      |   2 +-
 .../portal/arrangementer/ny/+page.svelte      |   7 +-
 5 files changed, 255 insertions(+), 39 deletions(-)
 create mode 100644 ;

diff --git a/; b/;
new file mode 100644
index 00000000..b4a4108b
--- /dev/null
+++ b/;
@@ -0,0 +1,220 @@
+<script lang="ts">
+	import type { EventHandler } from 'svelte/elements';
+	import { X, Plus, Save, Clock } from '@lucide/svelte';
+	import FormInput from '$lib/components/ui/form/FormInput.svelte';
+	import Button from '$lib/components/ui/Button.svelte';
+	import Combobox from '$lib/components/ui/Combobox.svelte';
+	import { CreateEventState } from '$lib/states/create-event-state.svelte';
+	import { differenceInHours } from 'date-fns';
+	import { goto } from '$app/navigation';
+
+	let { data } = $props();
+	let error = $state('');
+	let successMessage = $state('');
+	let isSubmitting = $state(false);
+	let createEventState = new CreateEventState();
+
+	const handleSubmit: EventHandler<SubmitEvent, HTMLFormElement> = async (e) => {
+		e.preventDefault();
+		if (!createEventState.isValid()) {
+			error = 'Vennligst fyll ut alle feltene';
+			console.log(createEventState.json());
+			return;
+		}
+
+		isSubmitting = true;
+		error = '';
+		successMessage = '';
+
+		try {
+			const response = await fetch('/api/events', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(createEventState.json())
+			});
+
+			if (response.status === 201) {
+				successMessage = 'Arrangement opprettet! E-post er sendt.';
+				createEventState.reset();
+			} else {
+				error = 'Noe gikk galt ved oppretting av arrangement';
+			}
+		} catch (err) {
+			error = 'Server error';
+			console.error(err);
+		} finally {
+			isSubmitting = false;
+		}
+	};
+</script>
+
+<svelte:head>
+	<title>Nytt arrangement</title>
+</svelte:head>
+
+<div class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
+	<div class="border-b border-gray-300 bg-gray-50 px-6 py-4">
+		<h2 class="text-lg font-medium">Nytt arrangement</h2>
+	</div>
+	<div class="p-6">
+		{#if error}
+			<div class="mb-4 rounded-md bg-red-50 p-4 text-red-700">
+				<p>{error}</p>
+			</div>
+		{/if}
+
+		{#if successMessage}
+			<div class="mb-4 rounded-md bg-green-50 p-4 text-green-700">
+				<p>{successMessage}</p>
+			</div>
+		{/if}
+
+		<form onsubmit={handleSubmit} class="space-y-6">
+			<div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
+				<div class="space-y-4">
+					<FormInput
+						label="Navn"
+						description="Navn på arrangement"
+						placeholder="Fest med Foobar"
+						bind:value={createEventState.name}
+						required
+					/>
+					<FormInput
+						label="Dato"
+						description="Start datoen på arrangementet"
+						bind:value={createEventState.date}
+						type="datetime-local"
+						required
+					/>
+				</div>
+			</div>
+
+			<div>
+				<h2 class="mb-4 text-lg font-medium">Vakter</h2>
+				{#each createEventState.shifts as shift, i}
+					{@const startDate = shift.startAt ? new Date(shift.startAt) : new Date()}
+					{@const endDate = shift.endAt ? new Date(shift.endAt) : new Date()}
+					{@const shiftLength = differenceInHours(endDate, startDate)}
+					<div
+						class="relative mb-4 flex flex-col space-y-4 rounded-lg border border-gray-200 bg-gray-50 p-4"
+					>
+						<div class="flex items-center justify-between">
+							<h3 class="text-base font-medium">Vakt {i + 1}</h3>
+							<button
+								type="button"
+								class="rounded-full p-1 text-red-400 transition-colors hover:bg-red-50 hover:text-red-600"
+								onclick={() => createEventState.deleteShift(i)}
+							>
+								<X class="h-4 w-4" />
+							</button>
+						</div>
+
+						<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+							<FormInput
+								label="Start"
+								description="Start tidspunkt for vakten"
+								bind:value={shift.startAt}
+								type="datetime-local"
+								required
+							/>
+							<FormInput
+								label="Slutt"
+								description="Slutt tidspunkt for vakten"
+								bind:value={shift.endAt}
+								type="datetime-local"
+								required
+							/>
+						</div>
+
+						{#if shiftLength >= 4}
+							<div class="flex items-center gap-2 rounded bg-orange-50 p-2 text-sm text-orange-700">
+								<Clock size={16} />
+								<span>NB: Vakten er lengre enn 4 timer!</span>
+							</div>
+						{/if}
+
+						<div class="mt-2 border-t border-gray-100 pt-4">
+							<div class="mb-2 flex items-center justify-between">
+								<h4 class="font-medium">Ansvarlige</h4>
+								<Button
+									type="button"
+									onclick={() => createEventState.addUserToShift(i)}
+									class="h-auto px-3 py-1 text-sm"
+								>
+									<Plus size={14} class="mr-1" />
+									Legg til
+								</Button>
+							</div>
+							<p class="mb-3 text-xs text-gray-500">
+								Alle ansvarlige vil få en e-post med kalenderinvitasjon når arrangementet
+								oppdateres.
+							</p>
+
+							<div class="space-y-2">
+								{#each createEventState.shifts[i].users as user, j (user)}
+									<div class="flex items-center gap-2">
+										<Combobox
+											name="user"
+											class="flex-1"
+											bind:value={createEventState.shifts[i].users[j].name}
+											disabledOptions={createEventState.shifts[i].users.map((user) => user.id)}
+											onchange={(option) => {
+												const id = option?.value;
+												if (id) {
+													createEventState.shifts[i].users[j].id = id;
+												}
+											}}
+											options={data.users}
+											placeholder="Velg en bruker"
+										/>
+										<button
+											type="button"
+											class="flex h-10 w-10 items-center justify-center rounded-lg border border-gray-200 bg-white transition-colors hover:text-red-500"
+											onclick={() => createEventState.deleteUserFromShift(i, user.id)}
+										>
+											<X class="size-4" />
+										</button>
+									</div>
+								{:else}
+									<p class="text-sm text-gray-500 italic py-2">
+										Ingen ansvarlige. Husk å legge til.
+									</p>
+								{/each}
+							</div>
+						</div>
+					</div>
+				{/each}
+
+				<Button
+					type="button"
+					intent="primary"
+					class="mb-6 w-full justify-center"
+					onclick={() => createEventState.addShift()}
+				>
+					<Plus size={16} class="mr-1" />
+					Legg til ny vakt
+				</Button>
+			</div>
+
+			<div class="flex justify-end gap-4 border-t border-gray-100 pt-6">
+					<a href={`/portal/arrangementer/`}>
+						<Button type="button" intent="outline">Avbryt</Button>
+					</a>
+        <a href="/portal/arrangementer/">
+				<Button type="button" intent="warning">Avbryt</Button>
+        </a>
+				<Button
+					type="submit"
+					intent="primary"
+					disabled={isSubmitting}
+					class="flex items-center gap-2"
+				>
+					<Save size={16} />
+					{isSubmitting ? 'Lagrer...' : 'Lagre endringer'}
+				</Button>
+			</div>
+		</form>
+	</div>
+</div>
diff --git a/apps/www/src/lib/components/portal/EventTable.svelte b/apps/www/src/lib/components/portal/EventTable.svelte
index 2a5e1c38..98a0a9e7 100644
--- a/apps/www/src/lib/components/portal/EventTable.svelte
+++ b/apps/www/src/lib/components/portal/EventTable.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { formatDate } from '$lib/date';
-	import { goto } from '$app/navigation';
 	import { SquarePen } from '@lucide/svelte';
 	import { getUser } from '$lib/context/user.context';
 	import Button from '../ui/Button.svelte';
@@ -19,7 +18,6 @@
 	};
 
 	const { events, outdated } = $props();
-
 	let search = $state('');
 	let activeTab = $state('upcoming');
 	let user = getUser();
@@ -37,7 +35,6 @@
 		const now = new Date();
 		const hasActive = hasActiveShifts(event);
 		if (hasActive) return false;
-
 		return event.shifts.some((shift) => {
 			const startTime = new Date(shift.startAt);
 			return now < startTime;
@@ -57,7 +54,6 @@
 	);
 
 	const pastEvnts = $derived(outdated.filter((event: Event) => !hasActiveOrUpcoming(event)));
-
 	const activeEvnts = $derived(activeTab === 'upcoming' ? upcomingEvents : pastEvnts);
 
 	let filteredEvents = $derived(
@@ -97,10 +93,8 @@
 		const updateLayout = () => {
 			isMobile = window.innerWidth < 546;
 		};
-
 		updateLayout();
 		window.addEventListener('resize', updateLayout);
-
 		return () => {
 			window.removeEventListener('resize', updateLayout);
 		};
@@ -118,7 +112,6 @@
 		>
 			Arrangementer
 		</button>
-
 		<button
 			class="min-w-[200px] flex-1 cursor-pointer rounded-lg px-6 py-3 font-medium text-gray-500 transition-all duration-200 ease-in-out {activeTab ===
 			'past'
@@ -128,17 +121,15 @@
 		>
 			Tidligere arrangementer
 		</button>
-
 		{#if isMobile && $user?.role === 'board'}
-			<button
-				class="w-full cursor-pointer rounded-lg bg-blue-50 px-6 py-3 font-medium font-semibold text-blue-600 transition-all duration-200 ease-in-out hover:bg-blue-100"
-				onclick={() => goto(`arrangementer/ny`)}
+			<a
+				href="arrangementer/ny"
+				class="w-full cursor-pointer rounded-lg bg-blue-50 px-6 py-3 text-center font-medium font-semibold text-blue-600 transition-all duration-200 ease-in-out hover:bg-blue-100"
 			>
 				Nytt Arrangement
-			</button>
+			</a>
 		{/if}
 	</div>
-
 	<div class="flex items-center gap-2 px-2">
 		<Input
 			type="search"
@@ -147,10 +138,9 @@
 			class="w-full flex-1 {isMobile || !($user?.role === 'board') ? 'pr-4' : 'pr-32'}"
 		/>
 		{#if !isMobile && $user?.role === 'board'}
-			<Button onclick={() => goto(`arrangementer/ny`)}>Nytt arrangement</Button>
+			<Button href="arrangementer/ny">Nytt arrangement</Button>
 		{/if}
 	</div>
-
 	{#if filteredEvents.length === 0}
 		<div class="mx-4 my-4 px-8 py-12 text-center font-medium text-gray-500">
 			Ingen {activeTab === 'upcoming' ? 'kommende' : 'tidligere'} arrangementer å vise.
@@ -184,14 +174,13 @@
 						{/if}
 					</tr>
 				</thead>
-				<tbody class="whitespace-nowrap break-words border-b border-gray-100">
+				<tbody>
 					{#each filteredEvents as event (event.id)}
 						{@const status = getEventStatus(event)}
-						<tr
-							class="cursor-pointer hover:bg-gray-50"
-							onclick={() => goto(`arrangementer/${event.id}`)}
-						>
+						<tr class="relative hover:bg-gray-50">
 							<td class="overflow-hidden overflow-ellipsis p-4">
+								<a href="arrangementer/{event.id}" class="absolute inset-0" aria-label={event.name}>
+								</a>
 								{event.name}
 							</td>
 							{#if isMobile}
@@ -208,19 +197,17 @@
 								<td class="overflow-hidden overflow-ellipsis p-4 {getStatusClass(status)}">
 									{status}
 								</td>
-								{#if !isMobile}
-									<td class="p-4">
-										{#if $user?.role === 'board'}
-											<a
-												href="arrangementer/{event.id}/edit"
-												class="inline-flex text-gray-400 opacity-70 transition-all duration-200 ease-in-out hover:text-blue-500 hover:opacity-100"
-												aria-label="Rediger arrangement"
-											>
-												<SquarePen size={18} />
-											</a>
-										{/if}
-									</td>
-								{/if}
+								<td class="p-4">
+									{#if $user?.role === 'board'}
+										<a
+											href="arrangementer/{event.id}/edit"
+											class="relative z-10 inline-flex text-gray-400 opacity-70 transition-all duration-200 ease-in-out hover:text-blue-500 hover:opacity-100"
+											aria-label="Rediger {event.name}"
+										>
+											<SquarePen size={18} />
+										</a>
+									{/if}
+								</td>
 							{/if}
 						</tr>
 					{/each}
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
index 55633033..4f4f1863 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
@@ -4,7 +4,7 @@
 	import { capitalize } from '$lib/utils';
 	import { enhance } from '$app/forms';
 	import { getUser } from '$lib/context/user.context.js';
-	import { X, Plus, Calendar, Clock, Users } from '@lucide/svelte';
+	import { X, Plus, Calendar, Clock, Users, ArrowLeft } from '@lucide/svelte';
 
 	let { data } = $props();
 	let user = getUser();
@@ -21,6 +21,16 @@
 	<title>{data.event.name}</title>
 </svelte:head>
 
+<section>
+	<a
+		href="/portal/arrangementer/"
+		class="inline-flex items-center text-sm font-medium text-blue-500 hover:text-blue-600"
+	>
+		<ArrowLeft size={16} />
+		Tilbake
+	</a>
+</section>
+
 <section class="mt-8">
 	<div
 		class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm"
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
index b1b06af2..988f0d41 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
@@ -233,7 +233,7 @@
 
 			<div class="flex justify-between gap-4 border-t border-gray-100 pt-6">
 				<div class="flex gap-2">
-					<a href={`/portal/arrangementer/`}>
+					<a href="/portal/arrangementer/">
 						<Button type="button" intent="outline">Avbryt</Button>
 					</a>
 					<Button type="submit" intent="primary" disabled={!eventState.isValid()}>
diff --git a/apps/www/src/routes/portal/arrangementer/ny/+page.svelte b/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
index 6217d6af..8817244b 100644
--- a/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
@@ -6,7 +6,6 @@
 	import Combobox from '$lib/components/ui/Combobox.svelte';
 	import { CreateEventState } from '$lib/states/create-event-state.svelte';
 	import { differenceInHours } from 'date-fns';
-	import { goto } from '$app/navigation';
 
 	let { data } = $props();
 	let error = $state('');
@@ -199,9 +198,9 @@
 			</div>
 
 			<div class="flex justify-end gap-4 border-t border-gray-100 pt-6">
-				<Button type="button" intent="warning" onclick={() => goto(`/portal/arrangementer`)}
-					>Avbryt</Button
-				>
+				<a href="/portal/arrangementer/">
+					<Button type="button" intent="warning">Avbryt</Button>
+				</a>
 				<Button
 					type="submit"
 					intent="primary"

From 0f841458a95639d921f37141c09d6a85f65b89d1 Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Sat, 31 May 2025 14:55:37 +0200
Subject: [PATCH 32/42] format

---
 .../lib/components/portal/EventTable.svelte   | 56 ++++++++++++-------
 1 file changed, 35 insertions(+), 21 deletions(-)

diff --git a/apps/www/src/lib/components/portal/EventTable.svelte b/apps/www/src/lib/components/portal/EventTable.svelte
index 98a0a9e7..dd1bfdb6 100644
--- a/apps/www/src/lib/components/portal/EventTable.svelte
+++ b/apps/www/src/lib/components/portal/EventTable.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { formatDate } from '$lib/date';
+	import { goto } from '$app/navigation';
 	import { SquarePen } from '@lucide/svelte';
 	import { getUser } from '$lib/context/user.context';
 	import Button from '../ui/Button.svelte';
@@ -18,6 +19,7 @@
 	};
 
 	const { events, outdated } = $props();
+
 	let search = $state('');
 	let activeTab = $state('upcoming');
 	let user = getUser();
@@ -35,6 +37,7 @@
 		const now = new Date();
 		const hasActive = hasActiveShifts(event);
 		if (hasActive) return false;
+
 		return event.shifts.some((shift) => {
 			const startTime = new Date(shift.startAt);
 			return now < startTime;
@@ -54,6 +57,7 @@
 	);
 
 	const pastEvnts = $derived(outdated.filter((event: Event) => !hasActiveOrUpcoming(event)));
+
 	const activeEvnts = $derived(activeTab === 'upcoming' ? upcomingEvents : pastEvnts);
 
 	let filteredEvents = $derived(
@@ -93,8 +97,10 @@
 		const updateLayout = () => {
 			isMobile = window.innerWidth < 546;
 		};
+
 		updateLayout();
 		window.addEventListener('resize', updateLayout);
+
 		return () => {
 			window.removeEventListener('resize', updateLayout);
 		};
@@ -112,6 +118,7 @@
 		>
 			Arrangementer
 		</button>
+
 		<button
 			class="min-w-[200px] flex-1 cursor-pointer rounded-lg px-6 py-3 font-medium text-gray-500 transition-all duration-200 ease-in-out {activeTab ===
 			'past'
@@ -121,15 +128,16 @@
 		>
 			Tidligere arrangementer
 		</button>
+
 		{#if isMobile && $user?.role === 'board'}
-			<a
-				href="arrangementer/ny"
-				class="w-full cursor-pointer rounded-lg bg-blue-50 px-6 py-3 text-center font-medium font-semibold text-blue-600 transition-all duration-200 ease-in-out hover:bg-blue-100"
-			>
+      <a href="arrangementer/ny" class="w-full cursor-pointer rounded-lg bg-blue-50 px-6 py-3 font-medium font-semibold text-blue-600">
+			<button class="text-center">
 				Nytt Arrangement
-			</a>
+			</button>
+      </a>
 		{/if}
 	</div>
+
 	<div class="flex items-center gap-2 px-2">
 		<Input
 			type="search"
@@ -138,9 +146,12 @@
 			class="w-full flex-1 {isMobile || !($user?.role === 'board') ? 'pr-4' : 'pr-32'}"
 		/>
 		{#if !isMobile && $user?.role === 'board'}
-			<Button href="arrangementer/ny">Nytt arrangement</Button>
+      <a href="arrangementer/ny">
+        <Button type="button" intent="primary">Nytt arrangement</Button>
+      </a>
 		{/if}
 	</div>
+
 	{#if filteredEvents.length === 0}
 		<div class="mx-4 my-4 px-8 py-12 text-center font-medium text-gray-500">
 			Ingen {activeTab === 'upcoming' ? 'kommende' : 'tidligere'} arrangementer å vise.
@@ -174,13 +185,14 @@
 						{/if}
 					</tr>
 				</thead>
-				<tbody>
+				<tbody class="whitespace-nowrap break-words border-b border-gray-100">
 					{#each filteredEvents as event (event.id)}
 						{@const status = getEventStatus(event)}
-						<tr class="relative hover:bg-gray-50">
+						<tr
+							class="cursor-pointer hover:bg-gray-50"
+							onclick={() => goto(`arrangementer/${event.id}`)}
+						>
 							<td class="overflow-hidden overflow-ellipsis p-4">
-								<a href="arrangementer/{event.id}" class="absolute inset-0" aria-label={event.name}>
-								</a>
 								{event.name}
 							</td>
 							{#if isMobile}
@@ -197,17 +209,19 @@
 								<td class="overflow-hidden overflow-ellipsis p-4 {getStatusClass(status)}">
 									{status}
 								</td>
-								<td class="p-4">
-									{#if $user?.role === 'board'}
-										<a
-											href="arrangementer/{event.id}/edit"
-											class="relative z-10 inline-flex text-gray-400 opacity-70 transition-all duration-200 ease-in-out hover:text-blue-500 hover:opacity-100"
-											aria-label="Rediger {event.name}"
-										>
-											<SquarePen size={18} />
-										</a>
-									{/if}
-								</td>
+								{#if !isMobile}
+									<td class="p-4">
+										{#if $user?.role === 'board'}
+											<a
+												href="arrangementer/{event.id}/edit"
+												class="inline-flex text-gray-400 opacity-70 transition-all duration-200 ease-in-out hover:text-blue-500 hover:opacity-100"
+												aria-label="Rediger arrangement"
+											>
+												<SquarePen size={18} />
+											</a>
+										{/if}
+									</td>
+								{/if}
 							{/if}
 						</tr>
 					{/each}

From 5c79350d41b060108f29e7bf9cf31b27320ba4cf Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Sat, 31 May 2025 15:01:48 +0200
Subject: [PATCH 33/42] lint fix

---
 .../src/lib/components/portal/EventTable.svelte | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/apps/www/src/lib/components/portal/EventTable.svelte b/apps/www/src/lib/components/portal/EventTable.svelte
index dd1bfdb6..bd491f92 100644
--- a/apps/www/src/lib/components/portal/EventTable.svelte
+++ b/apps/www/src/lib/components/portal/EventTable.svelte
@@ -130,11 +130,12 @@
 		</button>
 
 		{#if isMobile && $user?.role === 'board'}
-      <a href="arrangementer/ny" class="w-full cursor-pointer rounded-lg bg-blue-50 px-6 py-3 font-medium font-semibold text-blue-600">
-			<button class="text-center">
-				Nytt Arrangement
-			</button>
-      </a>
+			<a
+				href="arrangementer/ny"
+				class="w-full cursor-pointer rounded-lg bg-blue-50 px-6 py-3 font-medium font-semibold text-blue-600"
+			>
+				<button class="text-center"> Nytt Arrangement </button>
+			</a>
 		{/if}
 	</div>
 
@@ -146,9 +147,9 @@
 			class="w-full flex-1 {isMobile || !($user?.role === 'board') ? 'pr-4' : 'pr-32'}"
 		/>
 		{#if !isMobile && $user?.role === 'board'}
-      <a href="arrangementer/ny">
-        <Button type="button" intent="primary">Nytt arrangement</Button>
-      </a>
+			<a href="arrangementer/ny">
+				<Button type="button" intent="primary">Nytt arrangement</Button>
+			</a>
 		{/if}
 	</div>
 

From d988aedfe6beba9d262786966ebfcd8620518a81 Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Sat, 31 May 2025 15:37:41 +0200
Subject: [PATCH 34/42] format

---
 apps/www/src/lib/components/portal/EventTable.svelte            | 2 +-
 .../src/routes/portal/arrangementer/[id]/edit/+page.server.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/www/src/lib/components/portal/EventTable.svelte b/apps/www/src/lib/components/portal/EventTable.svelte
index bd491f92..ab5c6277 100644
--- a/apps/www/src/lib/components/portal/EventTable.svelte
+++ b/apps/www/src/lib/components/portal/EventTable.svelte
@@ -14,7 +14,7 @@
 			id: string;
 			startAt: Date;
 			endAt: Date;
-			members: any[];
+			members: [''];
 		}[];
 	};
 
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
index ac8231ca..37178573 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.server.ts
@@ -38,7 +38,7 @@ export const actions: Actions = {
 		const formData = await request.formData();
 		const eventId = params.id;
 
-		const updated = await locals.eventService.updateEvent(params.id, {
+		await locals.eventService.updateEvent(params.id, {
 			name: String(formData.get('name') || ''),
 			date: new Date(String(formData.get('date') || ''))
 		});

From 4b0fe343ae8aaaa62f64356f926fe526f771b31a Mon Sep 17 00:00:00 2001
From: Gard <128602894+GardKalland@users.noreply.github.com>
Date: Sat, 31 May 2025 17:16:53 +0200
Subject: [PATCH 35/42] Deleted file

---
 ; | 220 --------------------------------------------------------------
 1 file changed, 220 deletions(-)
 delete mode 100644 ;

diff --git a/; b/;
deleted file mode 100644
index b4a4108b..00000000
--- a/;
+++ /dev/null
@@ -1,220 +0,0 @@
-<script lang="ts">
-	import type { EventHandler } from 'svelte/elements';
-	import { X, Plus, Save, Clock } from '@lucide/svelte';
-	import FormInput from '$lib/components/ui/form/FormInput.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import Combobox from '$lib/components/ui/Combobox.svelte';
-	import { CreateEventState } from '$lib/states/create-event-state.svelte';
-	import { differenceInHours } from 'date-fns';
-	import { goto } from '$app/navigation';
-
-	let { data } = $props();
-	let error = $state('');
-	let successMessage = $state('');
-	let isSubmitting = $state(false);
-	let createEventState = new CreateEventState();
-
-	const handleSubmit: EventHandler<SubmitEvent, HTMLFormElement> = async (e) => {
-		e.preventDefault();
-		if (!createEventState.isValid()) {
-			error = 'Vennligst fyll ut alle feltene';
-			console.log(createEventState.json());
-			return;
-		}
-
-		isSubmitting = true;
-		error = '';
-		successMessage = '';
-
-		try {
-			const response = await fetch('/api/events', {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json'
-				},
-				body: JSON.stringify(createEventState.json())
-			});
-
-			if (response.status === 201) {
-				successMessage = 'Arrangement opprettet! E-post er sendt.';
-				createEventState.reset();
-			} else {
-				error = 'Noe gikk galt ved oppretting av arrangement';
-			}
-		} catch (err) {
-			error = 'Server error';
-			console.error(err);
-		} finally {
-			isSubmitting = false;
-		}
-	};
-</script>
-
-<svelte:head>
-	<title>Nytt arrangement</title>
-</svelte:head>
-
-<div class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
-	<div class="border-b border-gray-300 bg-gray-50 px-6 py-4">
-		<h2 class="text-lg font-medium">Nytt arrangement</h2>
-	</div>
-	<div class="p-6">
-		{#if error}
-			<div class="mb-4 rounded-md bg-red-50 p-4 text-red-700">
-				<p>{error}</p>
-			</div>
-		{/if}
-
-		{#if successMessage}
-			<div class="mb-4 rounded-md bg-green-50 p-4 text-green-700">
-				<p>{successMessage}</p>
-			</div>
-		{/if}
-
-		<form onsubmit={handleSubmit} class="space-y-6">
-			<div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
-				<div class="space-y-4">
-					<FormInput
-						label="Navn"
-						description="Navn på arrangement"
-						placeholder="Fest med Foobar"
-						bind:value={createEventState.name}
-						required
-					/>
-					<FormInput
-						label="Dato"
-						description="Start datoen på arrangementet"
-						bind:value={createEventState.date}
-						type="datetime-local"
-						required
-					/>
-				</div>
-			</div>
-
-			<div>
-				<h2 class="mb-4 text-lg font-medium">Vakter</h2>
-				{#each createEventState.shifts as shift, i}
-					{@const startDate = shift.startAt ? new Date(shift.startAt) : new Date()}
-					{@const endDate = shift.endAt ? new Date(shift.endAt) : new Date()}
-					{@const shiftLength = differenceInHours(endDate, startDate)}
-					<div
-						class="relative mb-4 flex flex-col space-y-4 rounded-lg border border-gray-200 bg-gray-50 p-4"
-					>
-						<div class="flex items-center justify-between">
-							<h3 class="text-base font-medium">Vakt {i + 1}</h3>
-							<button
-								type="button"
-								class="rounded-full p-1 text-red-400 transition-colors hover:bg-red-50 hover:text-red-600"
-								onclick={() => createEventState.deleteShift(i)}
-							>
-								<X class="h-4 w-4" />
-							</button>
-						</div>
-
-						<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-							<FormInput
-								label="Start"
-								description="Start tidspunkt for vakten"
-								bind:value={shift.startAt}
-								type="datetime-local"
-								required
-							/>
-							<FormInput
-								label="Slutt"
-								description="Slutt tidspunkt for vakten"
-								bind:value={shift.endAt}
-								type="datetime-local"
-								required
-							/>
-						</div>
-
-						{#if shiftLength >= 4}
-							<div class="flex items-center gap-2 rounded bg-orange-50 p-2 text-sm text-orange-700">
-								<Clock size={16} />
-								<span>NB: Vakten er lengre enn 4 timer!</span>
-							</div>
-						{/if}
-
-						<div class="mt-2 border-t border-gray-100 pt-4">
-							<div class="mb-2 flex items-center justify-between">
-								<h4 class="font-medium">Ansvarlige</h4>
-								<Button
-									type="button"
-									onclick={() => createEventState.addUserToShift(i)}
-									class="h-auto px-3 py-1 text-sm"
-								>
-									<Plus size={14} class="mr-1" />
-									Legg til
-								</Button>
-							</div>
-							<p class="mb-3 text-xs text-gray-500">
-								Alle ansvarlige vil få en e-post med kalenderinvitasjon når arrangementet
-								oppdateres.
-							</p>
-
-							<div class="space-y-2">
-								{#each createEventState.shifts[i].users as user, j (user)}
-									<div class="flex items-center gap-2">
-										<Combobox
-											name="user"
-											class="flex-1"
-											bind:value={createEventState.shifts[i].users[j].name}
-											disabledOptions={createEventState.shifts[i].users.map((user) => user.id)}
-											onchange={(option) => {
-												const id = option?.value;
-												if (id) {
-													createEventState.shifts[i].users[j].id = id;
-												}
-											}}
-											options={data.users}
-											placeholder="Velg en bruker"
-										/>
-										<button
-											type="button"
-											class="flex h-10 w-10 items-center justify-center rounded-lg border border-gray-200 bg-white transition-colors hover:text-red-500"
-											onclick={() => createEventState.deleteUserFromShift(i, user.id)}
-										>
-											<X class="size-4" />
-										</button>
-									</div>
-								{:else}
-									<p class="text-sm text-gray-500 italic py-2">
-										Ingen ansvarlige. Husk å legge til.
-									</p>
-								{/each}
-							</div>
-						</div>
-					</div>
-				{/each}
-
-				<Button
-					type="button"
-					intent="primary"
-					class="mb-6 w-full justify-center"
-					onclick={() => createEventState.addShift()}
-				>
-					<Plus size={16} class="mr-1" />
-					Legg til ny vakt
-				</Button>
-			</div>
-
-			<div class="flex justify-end gap-4 border-t border-gray-100 pt-6">
-					<a href={`/portal/arrangementer/`}>
-						<Button type="button" intent="outline">Avbryt</Button>
-					</a>
-        <a href="/portal/arrangementer/">
-				<Button type="button" intent="warning">Avbryt</Button>
-        </a>
-				<Button
-					type="submit"
-					intent="primary"
-					disabled={isSubmitting}
-					class="flex items-center gap-2"
-				>
-					<Save size={16} />
-					{isSubmitting ? 'Lagrer...' : 'Lagre endringer'}
-				</Button>
-			</div>
-		</form>
-	</div>
-</div>

From 99e20d1cba6338af313915a9b9e5e70409c1d45a Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Sat, 31 May 2025 17:39:57 +0200
Subject: [PATCH 36/42] styling

---
 apps/www/src/routes/portal/arrangementer/[id]/+page.svelte    | 2 +-
 .../src/routes/portal/arrangementer/[id]/edit/+page.svelte    | 4 ++--
 apps/www/src/routes/portal/arrangementer/ny/+page.svelte      | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
index 4f4f1863..9d3b9f5c 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
@@ -33,7 +33,7 @@
 
 <section class="mt-8">
 	<div
-		class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm"
+		class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg"
 	>
 		<div class="border-b border-gray-300 bg-gray-50 px-6 py-4">
 			<div>
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
index 988f0d41..2e6bb06b 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
@@ -45,7 +45,7 @@
 	<title>Rediger arrangement: {eventState.name}</title>
 </svelte:head>
 
-<div class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
+<div class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg">
 	<div class="items-centter flex justify-between border-b border-gray-300 bg-gray-50 px-6 py-4">
 		<h2 class="text-lg font-medium">Arrangement detaljer</h2>
 		<form method="POST" action="?/delete" use:enhance>
@@ -234,7 +234,7 @@
 			<div class="flex justify-between gap-4 border-t border-gray-100 pt-6">
 				<div class="flex gap-2">
 					<a href="/portal/arrangementer/">
-						<Button type="button" intent="outline">Avbryt</Button>
+						<Button type="button" intent="warning">Avbryt</Button>
 					</a>
 					<Button type="submit" intent="primary" disabled={!eventState.isValid()}>
 						<Save class="mr-1 h-4 w-4" />
diff --git a/apps/www/src/routes/portal/arrangementer/ny/+page.svelte b/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
index 8817244b..22835726 100644
--- a/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
@@ -53,7 +53,7 @@
 	<title>Nytt arrangement</title>
 </svelte:head>
 
-<div class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
+<div class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg">
 	<div class="border-b border-gray-300 bg-gray-50 px-6 py-4">
 		<h2 class="text-lg font-medium">Nytt arrangement</h2>
 	</div>

From 77b4a523673c32e38693b734d46f9c86b45a6edb Mon Sep 17 00:00:00 2001
From: GardKalland <github.blunderer148@passmail.net>
Date: Sat, 31 May 2025 23:57:03 +0200
Subject: [PATCH 37/42] styling

---
 .../lib/components/portal/EventTable.svelte    | 18 +++++++++---------
 .../portal/arrangementer/[id]/+page.svelte     | 14 ++++++--------
 .../arrangementer/[id]/edit/+page.svelte       | 16 ++++++++--------
 .../portal/arrangementer/ny/+page.svelte       | 14 ++++++--------
 4 files changed, 29 insertions(+), 33 deletions(-)

diff --git a/apps/www/src/lib/components/portal/EventTable.svelte b/apps/www/src/lib/components/portal/EventTable.svelte
index ab5c6277..9b2e1b80 100644
--- a/apps/www/src/lib/components/portal/EventTable.svelte
+++ b/apps/www/src/lib/components/portal/EventTable.svelte
@@ -107,13 +107,13 @@
 	});
 </script>
 
-<div class="overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-lg">
-	<div class="flex flex-wrap gap-2 bg-white p-2">
+<div class="border-gray overflow-hidden rounded-2xl border-2 bg-background shadow-lg">
+	<div class="flex flex-wrap gap-2 border-b-2 bg-gray-200 p-2">
 		<button
 			class="min-w-[200px] flex-1 cursor-pointer rounded-lg px-6 py-3 font-medium text-gray-500 transition-all duration-200 ease-in-out {activeTab ===
 			'upcoming'
-				? 'bg-blue-100 font-semibold text-blue-600'
-				: 'hover:bg-gray-100 hover:text-blue-500'}}"
+				? 'bg-gray-300 font-semibold'
+				: 'hover:bg-gray-250 hover:text-blue-500'}"
 			onclick={() => (activeTab = 'upcoming')}
 		>
 			Arrangementer
@@ -122,8 +122,8 @@
 		<button
 			class="min-w-[200px] flex-1 cursor-pointer rounded-lg px-6 py-3 font-medium text-gray-500 transition-all duration-200 ease-in-out {activeTab ===
 			'past'
-				? 'bg-blue-100 font-semibold text-blue-600'
-				: 'hover:bg-gray-100 hover:text-blue-500'}"
+				? 'bg-gray-300 font-semibold'
+				: 'hover:bg-gray-250 hover:text-blue-500'}"
 			onclick={() => (activeTab = 'past')}
 		>
 			Tidligere arrangementer
@@ -132,19 +132,19 @@
 		{#if isMobile && $user?.role === 'board'}
 			<a
 				href="arrangementer/ny"
-				class="w-full cursor-pointer rounded-lg bg-blue-50 px-6 py-3 font-medium font-semibold text-blue-600"
+				class="w-full cursor-pointer rounded-lg bg-blue-50 px-6 py-3 font-semibold text-blue-600"
 			>
 				<button class="text-center"> Nytt Arrangement </button>
 			</a>
 		{/if}
 	</div>
 
-	<div class="flex items-center gap-2 px-2">
+	<div class="flex items-center gap-2 p-2">
 		<Input
 			type="search"
 			placeholder="Søk etter arrangementer..."
 			bind:value={search}
-			class="w-full flex-1 {isMobile || !($user?.role === 'board') ? 'pr-4' : 'pr-32'}"
+			class="w-full flex-1 border-2 {isMobile || !($user?.role === 'board') ? 'pr-4' : 'pr-32'}"
 		/>
 		{#if !isMobile && $user?.role === 'board'}
 			<a href="arrangementer/ny">
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
index 9d3b9f5c..8e18c57e 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
@@ -32,15 +32,13 @@
 </section>
 
 <section class="mt-8">
-	<div
-		class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg"
-	>
-		<div class="border-b border-gray-300 bg-gray-50 px-6 py-4">
+	<div class="mx-auto max-w-4xl overflow-hidden rounded-xl border-2 bg-background shadow-lg">
+		<div class="border-b-2 bg-gray-200 px-6 py-4">
 			<div>
-				<h1 class="break-words text-xl font-semibold text-gray-800">{data.event.name}</h1>
+				<h1 class="break-words text-xl font-semibold">{data.event.name}</h1>
 			</div>
 		</div>
-		<div class="border-b border-gray-100 px-6 pt-4">
+		<div class="border-b px-6 pt-4">
 			<div class="flex gap-2">
 				<button
 					class={`rounded-t-lg px-4 py-2 font-medium transition-colors ${activeTab === 'details' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
@@ -105,8 +103,8 @@
 				<div class="space-y-4">
 					{#each data.event.shifts as shift, i}
 						{@const isInShift = shift.members.some((member) => member.userId === $user?.id)}
-						<div class="overflow-hidden rounded-lg border border-gray-200">
-							<div class="border-b border-gray-200 bg-gray-50 px-4 py-2">
+						<div class="overflow-hidden rounded-lg border">
+							<div class="border-b bg-gray-200 px-4 py-2">
 								<h3 class="font-medium">Vakt {i + 1}</h3>
 							</div>
 							<div class="space-y-2 p-4">
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
index 2e6bb06b..8cc8a388 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/edit/+page.svelte
@@ -45,9 +45,9 @@
 	<title>Rediger arrangement: {eventState.name}</title>
 </svelte:head>
 
-<div class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg">
-	<div class="items-centter flex justify-between border-b border-gray-300 bg-gray-50 px-6 py-4">
-		<h2 class="text-lg font-medium">Arrangement detaljer</h2>
+<div class="mx-auto max-w-4xl overflow-hidden rounded-xl border-2 bg-background shadow-lg">
+	<div class="items-centter flex justify-between border-b-2 bg-gray-200 px-6 py-4">
+		<h2 class="text-lg font-semibold">Arrangement detaljer</h2>
 		<form method="POST" action="?/delete" use:enhance>
 			<Button
 				type="submit"
@@ -103,7 +103,7 @@
 				<input type="hidden" name="removedUserShifts" value={keyValue} />
 			{/each}
 
-			<div class="mb-6 rounded-lg border border-gray-200 bg-gray-50 p-4">
+			<div class="mb-6 rounded-lg border-2 bg-background p-4 shadow-lg">
 				<div class="space-y-4">
 					<FormInput label="Navn" name="name" bind:value={eventState.name} required />
 					<FormInput
@@ -131,7 +131,7 @@
 				</div>
 
 				{#each eventState.shifts as shift, i}
-					<div class="mb-4 rounded-lg border border-gray-200 bg-gray-50 p-4 transition-opacity">
+					<div class="mb-4 rounded-lg border-2 bg-background p-4 shadow-lg transition-opacity">
 						<div class="flex items-center justify-between">
 							<h3 class="font-medium">Vakt {i + 1}</h3>
 							<button
@@ -173,7 +173,7 @@
 							/>
 						</div>
 
-						<div class="mt-4 border-t border-gray-300 pt-4">
+						<div class="mt-4 border-t pt-4">
 							<div class="mb-2 flex items-center justify-between">
 								<h4 class="font-medium">Ansvarlige</h4>
 								<Button type="button" class="text-sm" onclick={() => eventState.addUserToShift(i)}>
@@ -209,7 +209,7 @@
 											<input type="hidden" name={`shift[${i}].user[${j}].id`} value={user.id} />
 											<button
 												type="button"
-												class="flex h-10 w-10 items-center justify-center rounded-lg border border-gray-300 hover:text-red-500"
+												class="flex h-10 w-10 items-center justify-center rounded-lg border hover:text-red-500"
 												onclick={() => {
 													if (i < originalShifts.length && user.id) {
 														removedUserShifts = [
@@ -231,7 +231,7 @@
 				{/each}
 			</div>
 
-			<div class="flex justify-between gap-4 border-t border-gray-100 pt-6">
+			<div class="flex justify-end gap-4 border-t pt-6">
 				<div class="flex gap-2">
 					<a href="/portal/arrangementer/">
 						<Button type="button" intent="warning">Avbryt</Button>
diff --git a/apps/www/src/routes/portal/arrangementer/ny/+page.svelte b/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
index 22835726..345b03d7 100644
--- a/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
@@ -53,8 +53,8 @@
 	<title>Nytt arrangement</title>
 </svelte:head>
 
-<div class="mx-auto max-w-4xl overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg">
-	<div class="border-b border-gray-300 bg-gray-50 px-6 py-4">
+<div class="mx-auto max-w-4xl overflow-hidden rounded-xl border-2 bg-background shadow-lg">
+	<div class="border-b-2 bg-gray-200 px-6 py-4">
 		<h2 class="text-lg font-medium">Nytt arrangement</h2>
 	</div>
 	<div class="p-6">
@@ -71,7 +71,7 @@
 		{/if}
 
 		<form onsubmit={handleSubmit} class="space-y-6">
-			<div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
+			<div class="rounded-lg border-2 bg-background p-4">
 				<div class="space-y-4">
 					<FormInput
 						label="Navn"
@@ -96,11 +96,9 @@
 					{@const startDate = shift.startAt ? new Date(shift.startAt) : new Date()}
 					{@const endDate = shift.endAt ? new Date(shift.endAt) : new Date()}
 					{@const shiftLength = differenceInHours(endDate, startDate)}
-					<div
-						class="relative mb-4 flex flex-col space-y-4 rounded-lg border border-gray-200 bg-gray-50 p-4"
-					>
+					<div class="relative mb-4 flex flex-col space-y-4 rounded-lg border-2 bg-background p-4">
 						<div class="flex items-center justify-between">
-							<h3 class="text-base font-medium">Vakt {i + 1}</h3>
+							<h3 class="font-medium">Vakt {i + 1}</h3>
 							<button
 								type="button"
 								class="rounded-full p-1 text-red-400 transition-colors hover:bg-red-50 hover:text-red-600"
@@ -197,7 +195,7 @@
 				</Button>
 			</div>
 
-			<div class="flex justify-end gap-4 border-t border-gray-100 pt-6">
+			<div class="flex justify-end gap-4 border-t pt-6">
 				<a href="/portal/arrangementer/">
 					<Button type="button" intent="warning">Avbryt</Button>
 				</a>

From 14cadb49ce744271e7bc40c573173e228fd10499 Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Sun, 1 Jun 2025 00:48:05 +0200
Subject: [PATCH 38/42] fixed time check

---
 apps/www/src/routes/portal/arrangementer/[id]/+page.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
index 8e18c57e..bb779545 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
@@ -11,9 +11,9 @@
 	let activeTab = $state('details');
 	let isPastEvent = $state(false);
 	$effect(() => {
-		const today = formatDate(new Date());
-		const eventDate = formatDate(data.event.date);
-		isPastEvent = eventDate < today;
+		const today = new Date();
+		const eventDate = new Date(data.event.date);
+		isPastEvent = today > eventDate;
 	});
 </script>
 

From 0eb0cd639359b6fa8b5b5e81a636b99645320322 Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Sun, 1 Jun 2025 00:51:56 +0200
Subject: [PATCH 39/42] styling

---
 apps/www/src/routes/portal/arrangementer/ny/+page.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/www/src/routes/portal/arrangementer/ny/+page.svelte b/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
index 345b03d7..50a3ce68 100644
--- a/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
@@ -71,7 +71,7 @@
 		{/if}
 
 		<form onsubmit={handleSubmit} class="space-y-6">
-			<div class="rounded-lg border-2 bg-background p-4">
+			<div class="rounded-lg border-2 bg-background p-4 shadow-lg">
 				<div class="space-y-4">
 					<FormInput
 						label="Navn"
@@ -96,7 +96,7 @@
 					{@const startDate = shift.startAt ? new Date(shift.startAt) : new Date()}
 					{@const endDate = shift.endAt ? new Date(shift.endAt) : new Date()}
 					{@const shiftLength = differenceInHours(endDate, startDate)}
-					<div class="relative mb-4 flex flex-col space-y-4 rounded-lg border-2 bg-background p-4">
+					<div class="relative mb-4 flex flex-col space-y-4 rounded-lg border-2 bg-background p-4 shadow-lg">
 						<div class="flex items-center justify-between">
 							<h3 class="font-medium">Vakt {i + 1}</h3>
 							<button

From 28843e24c7443feaf8473d79a7353bc7bc279a33 Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Sun, 1 Jun 2025 00:55:03 +0200
Subject: [PATCH 40/42] format

---
 apps/www/src/routes/portal/arrangementer/ny/+page.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/www/src/routes/portal/arrangementer/ny/+page.svelte b/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
index 50a3ce68..fe128b46 100644
--- a/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/ny/+page.svelte
@@ -96,7 +96,9 @@
 					{@const startDate = shift.startAt ? new Date(shift.startAt) : new Date()}
 					{@const endDate = shift.endAt ? new Date(shift.endAt) : new Date()}
 					{@const shiftLength = differenceInHours(endDate, startDate)}
-					<div class="relative mb-4 flex flex-col space-y-4 rounded-lg border-2 bg-background p-4 shadow-lg">
+					<div
+						class="relative mb-4 flex flex-col space-y-4 rounded-lg border-2 bg-background p-4 shadow-lg"
+					>
 						<div class="flex items-center justify-between">
 							<h3 class="font-medium">Vakt {i + 1}</h3>
 							<button

From ace195d8c0ce725e0a8cf73e1ecc5d63791400eb Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Wed, 4 Jun 2025 14:53:13 +0200
Subject: [PATCH 41/42] fixed feedback

---
 .../lib/components/portal/EventTable.svelte   | 49 +++++++------------
 1 file changed, 19 insertions(+), 30 deletions(-)

diff --git a/apps/www/src/lib/components/portal/EventTable.svelte b/apps/www/src/lib/components/portal/EventTable.svelte
index 9b2e1b80..aa5ff3bb 100644
--- a/apps/www/src/lib/components/portal/EventTable.svelte
+++ b/apps/www/src/lib/components/portal/EventTable.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { formatDate } from '$lib/date';
-	import { goto } from '$app/navigation';
 	import { SquarePen } from '@lucide/svelte';
 	import { getUser } from '$lib/context/user.context';
 	import Button from '../ui/Button.svelte';
@@ -93,20 +92,16 @@
 
 	let isMobile = $state(false);
 
-	$effect(() => {
-		const updateLayout = () => {
-			isMobile = window.innerWidth < 546;
-		};
-
-		updateLayout();
-		window.addEventListener('resize', updateLayout);
+	const handleResize = () => {
+		isMobile = window.innerWidth < 568;
+	};
 
-		return () => {
-			window.removeEventListener('resize', updateLayout);
-		};
+	$effect(() => {
+		handleResize();
 	});
 </script>
 
+<svelte:window onresize={handleResize} />
 <div class="border-gray overflow-hidden rounded-2xl border-2 bg-background shadow-lg">
 	<div class="flex flex-wrap gap-2 border-b-2 bg-gray-200 p-2">
 		<button
@@ -128,29 +123,24 @@
 		>
 			Tidligere arrangementer
 		</button>
+	</div>
 
-		{#if isMobile && $user?.role === 'board'}
-			<a
-				href="arrangementer/ny"
-				class="w-full cursor-pointer rounded-lg bg-blue-50 px-6 py-3 font-semibold text-blue-600"
-			>
-				<button class="text-center"> Nytt Arrangement </button>
+	<div class="flex {isMobile ? 'flex-col' : 'flex-row items-center'} gap-2 p-2">
+		{#if $user?.role === 'board'}
+			<a href="arrangementer/ny" class={isMobile ? 'order-first w-full' : 'order-last'}>
+				<Button type="button" intent="primary" class={isMobile ? 'w-full' : ''}>
+					Nytt arrangement
+				</Button>
 			</a>
 		{/if}
-	</div>
 
-	<div class="flex items-center gap-2 p-2">
 		<Input
 			type="search"
 			placeholder="Søk etter arrangementer..."
 			bind:value={search}
-			class="w-full flex-1 border-2 {isMobile || !($user?.role === 'board') ? 'pr-4' : 'pr-32'}"
+			class="w-full flex-1 border-2
+      {isMobile || !($user?.role === 'board') ? 'pr-4' : 'pr-32'}"
 		/>
-		{#if !isMobile && $user?.role === 'board'}
-			<a href="arrangementer/ny">
-				<Button type="button" intent="primary">Nytt arrangement</Button>
-			</a>
-		{/if}
 	</div>
 
 	{#if filteredEvents.length === 0}
@@ -189,11 +179,10 @@
 				<tbody class="whitespace-nowrap break-words border-b border-gray-100">
 					{#each filteredEvents as event (event.id)}
 						{@const status = getEventStatus(event)}
-						<tr
-							class="cursor-pointer hover:bg-gray-50"
-							onclick={() => goto(`arrangementer/${event.id}`)}
-						>
+						<tr class="relative cursor-pointer hover:bg-gray-50">
 							<td class="overflow-hidden overflow-ellipsis p-4">
+								<a href="arrangementer/{event.id}" class="absolute inset-0 z-0" aria-hidden="true">
+								</a>
 								{event.name}
 							</td>
 							{#if isMobile}
@@ -215,7 +204,7 @@
 										{#if $user?.role === 'board'}
 											<a
 												href="arrangementer/{event.id}/edit"
-												class="inline-flex text-gray-400 opacity-70 transition-all duration-200 ease-in-out hover:text-blue-500 hover:opacity-100"
+												class="relative z-10 inline-flex text-gray-400 opacity-70 transition-all duration-200 ease-in-out hover:text-blue-500 hover:opacity-100"
 												aria-label="Rediger arrangement"
 											>
 												<SquarePen size={18} />

From 71d2cd80db29747a2633da739be5d6b786b1564b Mon Sep 17 00:00:00 2001
From: Gard <github.blunderer148@passmail.net>
Date: Wed, 4 Jun 2025 14:58:20 +0200
Subject: [PATCH 42/42] effect to derived

---
 apps/www/src/routes/portal/arrangementer/[id]/+page.svelte | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
index bb779545..fd0036ef 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
@@ -9,12 +9,7 @@
 	let { data } = $props();
 	let user = getUser();
 	let activeTab = $state('details');
-	let isPastEvent = $state(false);
-	$effect(() => {
-		const today = new Date();
-		const eventDate = new Date(data.event.date);
-		isPastEvent = today > eventDate;
-	});
+	let isPastEvent = $derived(new Date() > new Date(data.event.date));
 </script>
 
 <svelte:head>