From bb450fd5830de8772cce8a80eb3f62b5b51ba6ea Mon Sep 17 00:00:00 2001
From: Hornwitser <code@hornwitser.no>
Date: Sat, 14 Jun 2025 19:22:53 +0200
Subject: [PATCH] Refactor to use ClientSchedule on client

Use the ClientSchedule data structure for deserialising and tracking
edit state on the client instead of trying to directly deal with the
ApiSchedule type which is not build for ease of edits or rendering.
---
 components/AssignedCrew.vue       |  10 +-
 components/EventCard.vue          |  22 +-
 components/EventsTable.vue        | 147 +++-------
 components/LocationsTable.vue     | 143 +++-------
 components/RolesTable.vue         | 145 +++-------
 components/ScheduleTable.vue      | 435 ++++++-----------------------
 components/ShiftScheduleTable.vue | 440 +++++++-----------------------
 components/ShiftsTable.vue        | 173 +++---------
 components/Timetable.vue          | 153 +++++------
 pages/edit.vue                    |  41 ++-
 pages/schedule.vue                |  28 +-
 shared/utils/functions.ts         |   4 +-
 shared/utils/luxon.ts             |   4 +-
 stores/schedules.ts               |  31 +--
 utils/client-schedule.ts          |   9 +
 15 files changed, 488 insertions(+), 1297 deletions(-)

diff --git a/components/AssignedCrew.vue b/components/AssignedCrew.vue
index 3d7fc0d..c276009 100644
--- a/components/AssignedCrew.vue
+++ b/components/AssignedCrew.vue
@@ -5,7 +5,7 @@
 			<button
 				v-if="edit"
 				type="button"
-				@click="assignedIds = assignedIds.filter(id => id !== account.id)"
+				@click="assignedIds = new Set([...assignedIds].filter(id => id !== account.id))"
 			>
 				x
 			</button>
@@ -26,9 +26,9 @@ defineProps<{
 }>();
 const { data: accounts } = useAccounts();
 const accountsById = computed(() => new Map(accounts.value?.map?.(a => [a.id, a])));
-const assignedIds = defineModel<number[]>({ required: true });
+const assignedIds = defineModel<Set<number>>({ required: true });
 const assigned = computed(
-	() => assignedIds.value.map(
+	() => [...assignedIds.value].map(
 		id => accountsById.value.get(id) ?? { id, name: String(id) }
 	)
 );
@@ -43,8 +43,8 @@ function addCrew() {
 		return;
 	const account = crewByName.value.get(addName.value);
 	if (account) {
-		if (!assignedIds.value.some(id => id === account.id)) {
-			assignedIds.value = [...assignedIds.value, account.id];
+		if (!assignedIds.value.has(account.id)) {
+			assignedIds.value = new Set([...assignedIds.value, account.id]);
 		} else {
 			alert(`${addName.value} has already been added`);
 		}
diff --git a/components/EventCard.vue b/components/EventCard.vue
index b0345e7..875abab 100644
--- a/components/EventCard.vue
+++ b/components/EventCard.vue
@@ -1,10 +1,5 @@
 <template>
-	<section class="event" v-if="event.deleted">
-		<p>
-			Error: Unexpected deleted event.
-		</p>
-	</section>
-	<section class="event" v-else>
+	<section class="event">
 		<h3>{{ event.name }}</h3>
 		<p>{{ event.description ?? "No description provided" }}</p>
 		<p v-if="event.interested">
@@ -14,7 +9,7 @@
 			<button
 				class="interested"
 				:class="{ active: accountStore.interestedEventIds.has(event.id) }"
-				@click="toggle('event', event.id, event.slots.map(slot => slot.id))"
+				@click="toggle('event', event.id, [...event.slots.keys()])"
 			>
 				{{ accountStore.interestedEventIds.has(event.id) ? "✔ interested" : "🔔 interested?" }}
 			</button>
@@ -22,10 +17,10 @@
 
 		<h4>Timeslots</h4>
 		<ul>
-			<li v-for="slot in event.slots" :key="slot.id">
+			<li v-for="slot in event.slots.values()" :key="slot.id">
 				{{ formatTime(slot.start) }} - {{ formatTime(slot.end) }}
 				<button
-					v-if="accountStore.valid && event.slots.length > 1"
+					v-if="accountStore.valid && event.slots.size > 1"
 					class="interested"
 					:disabled="accountStore.interestedEventIds.has(event.id)"
 					:class="{ active: accountStore.interestedEventIds.has(event.id) || accountStore.interestedEventSlotIds.has(slot.id) }"
@@ -38,7 +33,7 @@
 				</template>
 				<p v-if="slot.assigned">
 					Crew:
-					{{ slot.assigned.map(id => idToAccount.get(id)?.name).join(", ") }}
+					{{ [...slot.assigned].map(id => idToAccount.get(id)?.name).join(", ") }}
 				</p>
 			</li>
 		</ul>
@@ -47,18 +42,17 @@
 
 <script lang="ts" setup>
 import { DateTime } from 'luxon';
-import type { ApiScheduleEvent } from '~/shared/types/api';
 
 defineProps<{
-	event: ApiScheduleEvent
+	event: ClientScheduleEvent
 }>()
 
 const accountStore = useAccountStore();
 const { data: accounts } = await useAccounts();
 const idToAccount = computed(() => new Map(accounts.value?.map(a => [a.id, a])));
 
-function formatTime(time: string) {
-	return DateTime.fromISO(time, { zone: accountStore.activeTimezone, locale: "en-US" }).toFormat("yyyy-LL-dd HH:mm");
+function formatTime(time: DateTime) {
+	return time.toFormat("yyyy-LL-dd HH:mm");
 }
 
 async function toggle(type: "event" | "slot", id: number, slotIds?: number[]) {
diff --git a/components/EventsTable.vue b/components/EventsTable.vue
index bd7d347..746e39b 100644
--- a/components/EventsTable.vue
+++ b/components/EventsTable.vue
@@ -1,8 +1,5 @@
 <template>
-	<div v-if="schedule.deleted">
-		Error: Unexpected deleted schedule.
-	</div>
-	<div v-else>
+	<div>
 		<table>
 			<thead>
 				<tr>
@@ -17,9 +14,9 @@
 			<tbody>
 				<template v-if="edit">
 					<tr
-						v-for="event in events.filter(e => !e.deleted)"
+						v-for="event in schedule.events.values()"
 						:key="event.id"
-						:class="{ removed: removed.has(event.id) }"
+						:class="{ removed: event.deleted }"
 					>
 						<td>{{ event.id }}</td>
 						<td>
@@ -47,22 +44,22 @@
 								@change="editEvent(event, { crew: !($event as any).target.value })"
 							>
 						</td>
-						<td>{{ event.slots.length ? event.slots.length : "" }}</td>
+						<td>{{ event.slots.size ? event.slots.size : "" }}</td>
 						<td>
 							<button
 								type="button"
-								:disabled="!canEdit(event) || removed.has(event.id)"
-								@click="delEvent(event.id)"
+								:disabled="!canEdit(event) || event.deleted"
+								@click="editEvent(event, { deleted: true })"
 							>Delete</button>
 							<button
-								v-if="changes.some(c => c.id === event.id)"
+								v-if="schedule.isModifiedEvent(event.id)"
 								type="button"
 								@click="revertEvent(event.id)"
 							>Revert</button>
 						</td>
 					</tr>
 					<tr>
-						<td>{{ toId(newEventName) }}</td>
+						<td>{{ schedule.nextClientId }}</td>
 						<td>
 							<input
 								type="text"
@@ -98,40 +95,25 @@
 				</template>
 				<template v-else>
 					<tr
-						v-for="event in events.filter(e => !e.deleted)"
+						v-for="event in schedule.events.values()"
 						:key="event.id"
 					>
 						<td>{{ event.id }}</td>
 						<td>{{ event.name }}</td>
 						<td>{{ event.description }}</td>
 						<td>{{ event.crew ? "" : "Yes"}}</td>
-						<td>{{ event.slots.length ? event.slots.length : "" }}</td>
+						<td>{{ event.slots.size ? event.slots.size : "" }}</td>
 					</tr>
 				</template>
 			</tbody>
 		</table>
-		<p v-if="changes.length">
-			Changes are not saved yet.
-			<button
-				type="button"
-				@click="saveEvents"
-			>Save Changes</button>
-		</p>
-		<details>
-			<summary>Debug</summary>
-			<ol>
-				<li v-for="change in changes">
-					{{ JSON.stringify(change) }}
-				</li>
-			</ol>
-		</details>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import type { ApiSchedule, ApiScheduleEvent } from '~/shared/types/api';
+import type { Id } from '~/shared/types/common';
+import { DateTime } from '~/shared/utils/luxon';
 import { toId } from '~/shared/utils/functions';
-import { applyUpdatesToArray } from '~/shared/utils/update';
 
 defineProps<{
 	edit?: boolean,
@@ -140,64 +122,26 @@ defineProps<{
 const schedule = await useSchedule();
 const accountStore = useAccountStore();
 
-function canEdit(event: ApiScheduleEvent) {
-	return !event.deleted && (event.crew || accountStore.canEditPublic);
-}
-
-const changes = ref<ApiScheduleEvent[]>([]);
-const removed = computed(() => new Set(changes.value.filter(c => c.deleted).map(c => c.id)));
-function replaceChange(
-	change: ApiScheduleEvent,
-	changes: ApiScheduleEvent[],
-) {
-	const index = changes.findIndex(item => (
-		item.deleted === change.deleted && item.id === change.id
-	));
-	const copy = [...changes];
-	if (index !== -1)
-		copy.splice(index, 1, change);
-	else
-		copy.push(change);
-	return copy;
-}
-function revertChange(id: number, changes: ApiScheduleEvent[]) {
-	return changes.filter(change => change.id !== id);
+function canEdit(event: ClientScheduleEvent) {
+	return event.crew || accountStore.canEditPublic;
 }
 
 const newEventName = ref("");
 const newEventDescription = ref("");
 const newEventPublic = ref(false);
 function editEvent(
-	event: Extract<ApiScheduleEvent, { deleted?: false }>,
-	edits: { name?: string, description?: string, crew?: boolean }
+	event: ClientScheduleEvent,
+	edits: Parameters<ClientSchedule["editEvent"]>[1],
 ) {
-	const copy = { ...event };
-	if (edits.name !== undefined) {
-		copy.name = edits.name;
-	}
-	if (edits.description !== undefined) {
-		copy.description = edits.description || undefined;
-	}
-	if (edits.crew !== undefined) {
-		copy.crew = edits.crew || undefined;
-	}
-	changes.value = replaceChange(copy, changes.value);
+	schedule.value.editEvent(event, edits);
 }
-function delEvent(id: number) {
-	const change = { id, updatedAt: "", deleted: true as const };
-	changes.value = replaceChange(change, changes.value);
-}
-function revertEvent(id: number) {
-	changes.value = revertChange(id, changes.value);
+function revertEvent(id: Id) {
+	schedule.value.restoreEvent(id);
 }
 function eventExists(name: string) {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
 	name = toId(name);
 	return (
-		schedule.value.events?.some(e => !e.deleted && toId(e.name) === name)
-		|| changes.value.some(c => !c.deleted && c.name === name)
+		[...schedule.value.events.values()].some(e => !e.deleted && toId(e.name) === name)
 	);
 }
 function newEvent() {
@@ -205,48 +149,23 @@ function newEvent() {
 		alert(`Event ${newEventName.value} already exists`);
 		return;
 	}
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
-	const id = Math.max(1, ...schedule.value.events?.map(e => e.id) ?? []) + 1;
-	const change = {
-		id,
-		updatedAt: "",
-		name: newEventName.value,
-		description: newEventDescription.value || undefined,
-		crew: !newEventPublic.value || undefined,
-		slots: [],
-	};
-	changes.value = replaceChange(change, changes.value);
+	const event = new ClientScheduleEvent(
+		schedule.value.nextClientId--,
+		DateTime.now(),
+		false,
+		newEventName.value,
+		!newEventPublic.value,
+		"",
+		false,
+		newEventDescription.value,
+		0,
+		new Map(),
+	);
+	schedule.value.setEvent(event);
 	newEventName.value = "";
 	newEventDescription.value = "";
 	newEventPublic.value = false;
 }
-async function saveEvents() {
-	try {
-		await $fetch("/api/schedule", {
-			method: "PATCH",
-			body: {
-				id: 111,
-				updatedAt: "",
-				events: changes.value,
-			} satisfies ApiSchedule,
-		});
-		changes.value = [];
-	} catch (err: any) {
-		console.error(err);
-		alert(err?.data?.message ?? err.message);
-	}
-}
-
-const events = computed(() => {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
-	const data = [...schedule.value.events ?? []];
-	applyUpdatesToArray(changes.value.filter(change => !change.deleted), data);
-	return data;
-});
 </script>
 
 <style scoped>
diff --git a/components/LocationsTable.vue b/components/LocationsTable.vue
index 44e9c1a..e8ff362 100644
--- a/components/LocationsTable.vue
+++ b/components/LocationsTable.vue
@@ -11,9 +11,9 @@
 			</thead>
 			<tbody>
 				<tr
-					v-for="location in locations.filter(l => !l.deleted)"
+					v-for="location in schedule.locations.values()"
 					:key="location.id"
-					:class="{ removed: removed.has(location.id) }"
+					:class="{ removed: location.deleted }"
 				>
 					<template v-if='edit'>
 						<td>{{ location.id }}</td>
@@ -21,24 +21,24 @@
 							<input
 								type="text"
 								:value="location.name"
-								@input="setLocation({ ...location, name: ($event as any).target.value })"
+								@input="editLocation(location, { name: ($event as any).target.value })"
 							>
 						</td>
 						<td>
 							<input
 								type="text"
 								:value="location.description"
-								@input="setLocation({ ...location, description: ($event as any).target.value || undefined })"
+								@input="editLocation(location, { description: ($event as any).target.value })"
 							>
 						</td>
 						<td>
 							<button
-								:disabled="removed.has(location.id)"
+								:disabled="location.deleted"
 								type="button"
-								@click="delLocation(location.id)"
+								@click="editLocation(location, { deleted: true })"
 							>Remove</button>
 							<button
-								v-if="changes.some(c => c.id === location.id)"
+								v-if="schedule.isModifiedLocation(location.id)"
 								type="button"
 								@click="revertLocation(location.id)"
 							>Revert</button>
@@ -52,7 +52,7 @@
 				</tr>
 				<tr v-if='edit'>
 					<td>
-						{{ newLocationId }}
+						{{ schedule.nextClientId }}
 					</td>
 					<td>
 							<input
@@ -60,37 +60,27 @@
 								v-model="newLocationName"
 							>
 					</td>
-					<td colspan="2">
+					<td>
+						<input
+							type="text"
+							v-model="newLocationDescription"
+						>
+					</td>
+					<td colspan="1">
 						<button
 							type="button"
-							@click="newLocation(newLocationName); newLocationName = ''"
+							@click="newLocation()"
 						>Add Location</button>
 					</td>
 				</tr>
 			</tbody>
 		</table>
-		<p v-if="changes.length">
-			Changes are not save yet.
-			<button
-				type="button"
-				@click="saveLocations"
-			>Save Changes</button>
-		</p>
-		<details>
-			<summary>Debug</summary>
-			<ol>
-				<li v-for="change in changes">
-					{{ JSON.stringify(change) }}
-				</li>
-			</ol>
-		</details>
 	</figure>
 </template>
 
 <script lang="ts" setup>
-import type { ApiSchedule, ApiScheduleLocation } from '~/shared/types/api';
-import { toId } from '~/shared/utils/functions';
-import { applyUpdatesToArray } from '~/shared/utils/update';
+import { DateTime } from '~/shared/utils/luxon';
+import type { Id } from '~/shared/types/common';
 
 defineProps<{
 	edit?: boolean
@@ -98,81 +88,34 @@ defineProps<{
 
 const schedule = await useSchedule();
 
-const changes = ref<ApiScheduleLocation[]>([]);
-const removed = computed(() => new Set(changes.value.filter(c => c.deleted).map(c => c.id)));
-
-function replaceChange(
-	change: ApiScheduleLocation,
-	changes: ApiScheduleLocation[],
-) {
-	const index = changes.findIndex(item => (
-		item.deleted === change.deleted && item.id === change.id
-	));
-	const copy = [...changes];
-	if (index !== -1)
-		copy.splice(index, 1, change);
-	else
-		copy.push(change);
-	return copy;
-}
-function revertChange(id: number, changes: ApiScheduleLocation[]) {
-	return changes.filter(change => change.id !== id);
-}
-
 const newLocationName = ref("");
-const newLocationId = computed(() => {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
-	return Math.max(
-		1,
-		...schedule.value.locations?.map(l => l.id) ?? [],
-		...changes.value.map(c => c.id)
-	) + 1;
-});
-function setLocation(location: ApiScheduleLocation) {
-	changes.value = replaceChange(location, changes.value);
-}
-function delLocation(id: number) {
-	const change = { id, updatedAt: "", deleted: true as const };
-	changes.value = replaceChange(change, changes.value);
-}
-function revertLocation(id: number) {
-	changes.value = revertChange(id, changes.value);
-}
-function newLocation(name: string) {
-	const change = {
-		id: newLocationId.value,
-		updatedAt: "",
-		name,
-	};
-	changes.value = replaceChange(change, changes.value);
-}
-async function saveLocations() {
-	try {
-		await $fetch("/api/schedule", {
-			method: "PATCH",
-			body: {
-				id: 111,
-				updatedAt: "",
-				locations: changes.value
-			} satisfies ApiSchedule,
-		});
-		changes.value = [];
-	} catch (err: any) {
-		console.error(err);
-		alert(err?.data?.message ?? err.message);
-	}
-}
+const newLocationDescription = ref("");
 
-const locations = computed(() => {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
+function editLocation(
+	location: ClientScheduleLocation,
+	edits: Parameters<ClientSchedule["editLocation"]>[1],
+) {
+	try {
+		schedule.value.editLocation(location, edits);
+	} catch (err: any) {
+		alert(err.message);
 	}
-	const data = [...schedule.value.locations ?? []];
-	applyUpdatesToArray(changes.value.filter(change => !change.deleted), data);
-	return data;
-});
+}
+function revertLocation(id: Id) {
+	schedule.value.restoreLocation(id);
+}
+function newLocation() {
+	const location = new ClientScheduleLocation(
+		schedule.value.nextClientId--,
+		DateTime.now(),
+		false,
+		newLocationName.value,
+		newLocationDescription.value,
+	);
+	schedule.value.setLocation(location);
+	newLocationName.value = "";
+	newLocationDescription.value = "";
+}
 </script>
 
 <style scoped>
diff --git a/components/RolesTable.vue b/components/RolesTable.vue
index 60cbe82..f02786e 100644
--- a/components/RolesTable.vue
+++ b/components/RolesTable.vue
@@ -1,8 +1,5 @@
 <template>
-	<div v-if="schedule.deleted">
-		Error: Unexpected deleted schedule.
-	</div>
-	<div v-else>
+	<div>
 		<table>
 			<thead>
 				<tr>
@@ -15,9 +12,9 @@
 			<tbody>
 				<template v-if="edit">
 					<tr
-						v-for="role in roles.filter(r => !r.deleted)"
+						v-for="role in schedule.roles.values()"
 						:key="role.id"
-						:class="{ removed: removed.has(role.id) }"
+						:class="{ removed: role.deleted }"
 					>
 						<td>{{ role.id }}</td>
 						<td>
@@ -37,18 +34,18 @@
 						<td>
 							<button
 								type="button"
-								:disabled="removed.has(role.id)"
-								@click="delRole(role.id)"
+								:disabled="role.deleted"
+								@click="editRole(role, { deleted: true })"
 							>Delete</button>
 							<button
-								v-if="changes.some(c => c.id === role.id)"
+								v-if="schedule.isModifiedRole(role.id)"
 								type="button"
 								@click="revertRole(role.id)"
 							>Revert</button>
 						</td>
 					</tr>
 					<tr>
-						<td>{{ newRoleId }}</td>
+						<td>{{ schedule.nextClientId }}</td>
 						<td>
 							<input
 								type="text"
@@ -76,7 +73,7 @@
 				</template>
 				<template v-else>
 					<tr
-						v-for="role in roles.filter(r => !r.deleted)"
+						v-for="role in schedule.roles.values()"
 						:key="role.id"
 					>
 						<td>{{ role.id }}</td>
@@ -86,28 +83,13 @@
 				</template>
 			</tbody>
 		</table>
-		<p v-if="changes.length">
-			Changes are not saved yet.
-			<button
-				type="button"
-				@click="saveRoles"
-			>Save Changes</button>
-		</p>
-		<details>
-			<summary>Debug</summary>
-			<ol>
-				<li v-for="change in changes">
-					{{ JSON.stringify(change) }}
-				</li>
-			</ol>
-		</details>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import type { ApiSchedule, ApiScheduleRole } from '~/shared/types/api';
-import { applyUpdatesToArray } from '~/shared/utils/update';
+import { DateTime } from '~/shared/utils/luxon';
 import { toId } from '~/shared/utils/functions';
+import type { Id } from '~/shared/types/common';
 
 defineProps<{
 	edit?: boolean,
@@ -115,66 +97,30 @@ defineProps<{
 
 const schedule = await useSchedule();
 
-const changes = ref<ApiScheduleRole[]>([]);
-const removed = computed(() => new Set(changes.value.filter(c => c.deleted).map(c => c.id)));
-function replaceChange(
-	change: ApiScheduleRole,
-	changes: ApiScheduleRole[],
-) {
-	const index = changes.findIndex(item => (
-		item.deleted === change.deleted && item.id === change.id
-	));
-	const copy = [...changes];
-	if (index !== -1)
-		copy.splice(index, 1, change);
-	else
-		copy.push(change);
-	return copy;
-}
-function revertChange(id: number, changes: ApiScheduleRole[]) {
-	return changes.filter(change => change.id !== id);
-}
-
 const newRoleName = ref("");
-const newRoleId = computed(() => {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
-	return Math.max(
-		1,
-		...schedule.value.roles?.map(r => r.id) ?? [],
-		...changes.value.map(c => c.id)
-	) + 1;
-});
 const newRoleDescription = ref("");
+
 function editRole(
-	role: Extract<ApiScheduleRole, { deleted?: false }>,
-	edits: { name?: string, description?: string }
+	role: ClientScheduleRole,
+	edits: { deleted?: boolean, name?: string, description?: string }
 ) {
-	const copy = { ...role };
-	if (edits.name !== undefined) {
-		copy.name = edits.name;
+	const copy = role.clone();
+	if (edits.deleted !== undefined) copy.deleted = edits.deleted;
+	if (edits.name !== undefined) copy.name = edits.name;
+	if (edits.description !== undefined) copy.description = edits.description;
+	try {
+		schedule.value.setRole(copy);
+	} catch (err: any) {
+		alert(err.message);
 	}
-	if (edits.description !== undefined) {
-		copy.description = edits.description || undefined;
-	}
-	changes.value = replaceChange(copy, changes.value);
 }
-function delRole(id: number) {
-	const change = { id, updatedAt: "", deleted: true as const };
-	changes.value = replaceChange(change, changes.value);
-}
-function revertRole(id: number) {
-	changes.value = revertChange(id, changes.value);
+function revertRole(id: Id) {
+	schedule.value.restoreRole(id);
 }
 function roleExists(name: string) {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
 	name = toId(name);
 	return (
-		schedule.value.roles?.some(r => !r.deleted && toId(r.name) === name)
-		|| changes.value.some(c => !c.deleted && c.name === name)
+		[...schedule.value.roles.values()].some(r => !r.deleted && toId(r.name) === name)
 	);
 }
 function newRole() {
@@ -182,45 +128,18 @@ function newRole() {
 		alert(`Role ${newRoleName.value} already exists`);
 		return;
 	}
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
-	const change = {
-		id: newRoleId.value,
-		updatedAt: "",
-		name: newRoleName.value,
-		description: newRoleDescription.value || undefined,
-		slots: [],
-	};
-	changes.value = replaceChange(change, changes.value);
+	const role = new ClientScheduleRole(
+		schedule.value.nextClientId--,
+		DateTime.now(),
+		false,
+		newRoleName.value,
+		newRoleDescription.value,
+	);
+	schedule.value.setRole(role);
 	newRoleName.value = "";
 	newRoleDescription.value = "";
 }
-async function saveRoles() {
-	try {
-		await $fetch("/api/schedule", {
-			method: "PATCH",
-			body: {
-				id: 111,
-				updatedAt: "",
-				roles: changes.value
-			} satisfies ApiSchedule,
-		});
-		changes.value = [];
-	} catch (err: any) {
-		console.error(err);
-		alert(err?.data?.message ?? err.message);
-	}
-}
 
-const roles = computed(() => {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
-	const data = [...schedule.value.roles ?? []];
-	applyUpdatesToArray(changes.value.filter(change => !change.deleted), data);
-	return data;
-});
 </script>
 
 <style scoped>
diff --git a/components/ScheduleTable.vue b/components/ScheduleTable.vue
index 410c123..5fd0935 100644
--- a/components/ScheduleTable.vue
+++ b/components/ScheduleTable.vue
@@ -1,9 +1,6 @@
 <template>
-	<div v-if="schedule.deleted">
-		Error: Unexpected deleted schedule.
-	</div>
-	<div v-else>
-		<Timetable :schedule="schedulePreview" :eventSlotFilter :shiftSlotFilter />
+	<div>
+		<Timetable :schedule :eventSlotFilter :shiftSlotFilter />
 		<table>
 			<thead>
 				<tr>
@@ -23,7 +20,7 @@
 						v-for="es in eventSlots"
 						:key='es.slot?.id ?? es.start.toMillis()'
 						:class='{
-							removed: es.type === "slot" && removed.has(es.id),
+							removed: es.type === "slot" && es.deleted,
 							gap: es.type === "gap",
 						}'
 					>
@@ -50,7 +47,7 @@
 									v-model="newEventLocation"
 								>
 									<option
-										v-for="location in schedule.locations?.filter(l => !l.deleted)"
+										v-for="location in schedule.locations.values()"
 										:key="location.id"
 										:value="location.id"
 										:selected="location.id === newEventLocation"
@@ -96,20 +93,20 @@
 								<input
 									type="text"
 									:value="es.name"
-									@input="editEventSlot(es, { name: ($event as any).target.value })"
+									@input="editEvent(es, { name: ($event as any).target.value })"
 								>
 							</td>
 							<td>{{ status(es) }}</td>
 							<td>
 								<select
-									:value="es.locationId"
+									:value="es.location.id"
 									@change="editEventSlot(es, { locationId: parseInt(($event as any).target.value) })"
 								>
 									<option
-										v-for="location in schedule.locations?.filter(l => !l.deleted)"
+										v-for="location in schedule.locations.values()"
 										:key="location.id"
 										:value="location.id"
-										:selected="location.id === es.locationId"
+										:selected="location.id === es.location.id"
 									>{{ location.name }}</option>
 								</select>
 							</td>
@@ -122,12 +119,12 @@
 							</td>
 							<td>
 								<button
-									:disabled="removed.has(es.id)"
+									:disabled="es.deleted"
 									type="button"
-									@click="delEventSlot(es)"
+									@click="editEventSlot(es, { deleted: true })"
 								>Remove</button>
 								<button
-									v-if="changes.some(c => c.id === es.id)"
+									v-if="schedule.isModifiedEventSlot(es.id)"
 									type="button"
 									@click="revertEventSlot(es.id)"
 								>Revert</button>
@@ -189,63 +186,37 @@
 							<td>{{ es.end.diff(es.start).toFormat('hh:mm') }}</td>
 							<td>{{ es.name }}</td>
 							<td>{{ status(es) }}</td>
-							<td>{{ es.locationId }}</td>
+							<td>{{ es.location.id }}</td>
 							<td><AssignedCrew :modelValue="es.assigned" :edit="false" /></td>
 						</template>
 					</tr>
 				</template>
 			</tbody>
 		</table>
-		<p v-if="changes.length">
-			Changes are not save yet.
-			<button
-				type="button"
-				@click="saveEventSlots"
-			>Save Changes</button>
-		</p>
-		<details>
-			<summary>Debug</summary>
-			<b>EventSlot changes</b>
-			<ol>
-				<li v-for="change in changes">
-					<pre><code>{{ JSON.stringify((({ event, slot, ...data }) => data)(change as any), undefined, "  ") }}</code></pre>
-				</li>
-			</ol>
-			<b>ScheduleEvent changes</b>
-			<ol>
-				<li v-for="change in scheduleChanges">
-					<pre><code>{{ JSON.stringify((({ event, slot, ...data }) => data)(change as any), undefined, "  ") }}</code></pre>
-				</li>
-			</ol>
-		</details>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { DateTime, Duration } from 'luxon';
-import type { ApiSchedule, ApiScheduleEvent, ApiScheduleEventSlot, ApiScheduleShift, ApiScheduleShiftSlot } from '~/shared/types/api';
-import type { Entity } from '~/shared/types/common';
-import { enumerate, pairs } from '~/shared/utils/functions';
-import { applyUpdatesToArray } from '~/shared/utils/update';
+import type { Id } from '~/shared/types/common';
+import { enumerate, pairs, toId } from '~/shared/utils/functions';
 
 const props = defineProps<{
 	edit?: boolean,
 	locationId?: number,
-	eventSlotFilter?: (slot: ApiScheduleEventSlot) => boolean,
-	shiftSlotFilter?: (slot: ApiScheduleShiftSlot) => boolean,
+	eventSlotFilter?: (slot: ClientScheduleEventSlot) => boolean,
+	shiftSlotFilter?: (slot: ClientScheduleShiftSlot) => boolean,
 }>();
 
 interface EventSlot {
 	type: "slot",
-	id: number,
-	updatedAt: string,
+	id: Id,
 	deleted?: boolean,
-	event?: Extract<ApiScheduleEvent, { deleted?: false }>,
-	slot?: ApiScheduleEventSlot,
-	origLocation: number,
+	event: ClientScheduleEvent,
+	slot: ClientScheduleEventSlot,
 	name: string,
-	locationId: number,
-	assigned: number[],
+	location: ClientScheduleLocation,
+	assigned: Set<Id>,
 	start: DateTime,
 	end: DateTime,
 }
@@ -262,218 +233,19 @@ interface Gap {
 }
 
 function status(eventSlot: EventSlot) {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
 	if (
 		!eventSlot.event
 		|| eventSlot.event.name !== eventSlot.name
 	) {
-		const event = schedule.value.events?.find(event => !event.deleted && event.name === eventSlot.name);
+		const event = [...schedule.value.events.values()].find(event => event.name === eventSlot.name);
 		return event ? "L" : "N";
 	}
-	return eventSlot.event.slots.length === 1 ? "" : eventSlot.event.slots.length;
-}
-
-// Filter out set records where a del record exists for the same id.
-function filterSetOps<T extends Entity>(changes: T[]) {
-	const deleteIds = new Set(changes.filter(c => c.deleted).map(c => c.id));
-	return changes.filter(c => c.deleted || !deleteIds.has(c.id));
-}
-
-function findEvent(
-	eventSlot: EventSlot,
-	changes: ApiScheduleEvent[],
-	schedule: ApiSchedule,
-) {
-	if (schedule.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
-	let setEvent = changes.filter(
-		c => !c.deleted
-	).find(
-		c => c.name === eventSlot.name
-	);
-	if (!setEvent && eventSlot.event && eventSlot.event.name === eventSlot.name) {
-		setEvent = eventSlot.event;
-	}
-	if (!setEvent) {
-		setEvent = schedule.events?.filter(e => !e.deleted).find(e => e.name === eventSlot.name);
-	}
-	let delEvent;
-	if (eventSlot.event) {
-		delEvent = changes.filter(c => !c.deleted).find(
-			c => c.name === eventSlot.event!.name
-		);
-		if (!delEvent) {
-			delEvent = schedule.events?.filter(e => !e.deleted).find(e => e.name === eventSlot.event!.name);
-		}
-	}
-	return { setEvent, delEvent };
-}
-
-function removeSlotLocation(
-	event: Extract<ApiScheduleEvent, { deleted?: false }>,
-	oldSlot: ApiScheduleEventSlot,
-	locationId: number
-) {
-	// If location is an exact match remove the whole slot
-	if (oldSlot.locationIds.length === 1 && oldSlot.locationIds[0] === locationId) {
-		return {
-			...event,
-			slots: event.slots.filter(s => s.id !== oldSlot.id),
-		};
-	}
-	// Otherwise filter out location
-	return {
-		...event,
-		slots: event.slots.map(
-			s => s.id !== oldSlot.id ? s : {
-				...s,
-				locationIds: s.locationIds.filter(id => id !== locationId)
-			}
-		),
-	};
-}
-
-function mergeSlot(
-	event: Extract<ApiScheduleEvent, { deleted?: false }>,
-	eventSlot: EventSlot,
-): Extract<ApiScheduleEvent, { deleted?: false }> {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
-	const oldSlot = event.slots.find(s => s.id === eventSlot.id);
-	const nextId = Math.max(0, ...schedule.value.events?.filter(e => !e.deleted).flatMap(e => e.slots.map(slot => slot.id)) ?? []) + 1;
-	const start = eventSlot.start.toUTC().toISO({ suppressSeconds: true })!;
-	const end = eventSlot.end.toUTC().toISO({ suppressSeconds: true })!;
-
-	// Edit slot in-place if possible
-	if (
-		oldSlot
-		&& oldSlot.id === eventSlot.id
-		&& (
-			oldSlot.locationIds.length <= 1
-			|| oldSlot.start === start && oldSlot.end === end
-		)
-	) {
-		return {
-			...event,
-			slots: event.slots.map(s => {
-				if (s.id !== oldSlot.id)
-					return s;
-				const locationIds = new Set(s.locationIds);
-				locationIds.delete(eventSlot.origLocation)
-				locationIds.add(eventSlot.locationId);
-				return {
-					...s,
-					locationIds: [...locationIds],
-					assigned: eventSlot.assigned.length ? eventSlot.assigned : undefined,
-					start,
-					end,
-				};
-			}),
-		};
-	}
-
-	// Else remove old slot if it exist and insert a new one
-	if (oldSlot) {
-		event = removeSlotLocation(event, oldSlot, eventSlot.origLocation);
-	}
-
-	return {
-		...event,
-		slots: [...event.slots, {
-			id: oldSlot ? oldSlot.id : nextId,
-			locationIds: [eventSlot.locationId],
-			assigned: eventSlot.assigned.length ? eventSlot.assigned : undefined,
-			start,
-			end,
-		}],
-	};
-}
-
-const scheduleChanges = computed(() => {
-	let eventChanges: Extract<ApiScheduleEvent, { deleted?: false}>[] = [];
-	for (const change of filterSetOps(changes.value)) {
-		if (!change.deleted) {
-			let { setEvent, delEvent } = findEvent(change, eventChanges, schedule.value);
-			if (delEvent && delEvent !== setEvent) {
-				eventChanges = removeSlot(eventChanges, delEvent, change);
-			}
-			if (!setEvent) {
-				setEvent = {
-					id: Math.floor(Math.random() * -1000), // XXX This wont work.
-					updatedAt: "",
-					name: change.name,
-					crew: true,
-					slots: [],
-				};
-			}
-
-			eventChanges = replaceChange(mergeSlot(setEvent, change), eventChanges);
-
-		} else if (change.deleted) {
-			let { delEvent } = findEvent(change, eventChanges, schedule.value);
-			if (delEvent) {
-				eventChanges = removeSlot(eventChanges, delEvent, change);
-			}
-		}
-	}
-	return eventChanges;
-});
-
-const schedulePreview = computed(() => {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
-	const events = [...schedule.value.events ?? []]
-	applyUpdatesToArray(scheduleChanges.value, events);
-	return {
-		...schedule.value,
-		events,
-	};
-});
-
-function removeSlot(
-	eventChanges: Extract<ApiScheduleEvent, { deleted?: false }>[],
-	event: Extract<ApiScheduleEvent, { deleted?: false }>,
-	eventSlot: EventSlot,
-) {
-	let oldSlot = event.slots.find(s => s.id === eventSlot.id);
-	if (oldSlot) {
-		eventChanges = replaceChange(
-			removeSlotLocation(event, oldSlot, eventSlot.origLocation),
-			eventChanges,
-		);
-	}
-	return eventChanges;
+	return eventSlot.event.slots.size === 1 ? "" : eventSlot.event.slots.size;
 }
 
 const accountStore = useAccountStore();
 const schedule = await useSchedule();
 
-const changes = ref<EventSlot[]>([]);
-const removed = computed(() => new Set(changes.value.filter(c => c.deleted).map(c => c.id)));
-
-function replaceChange<T extends Entity>(
-	change: T,
-	changes: T[],
-) {
-	const index = changes.findIndex(item => (
-		item.deleted === change.deleted && item.id === change.id
-	));
-	const copy = [...changes];
-	if (index !== -1)
-		copy.splice(index, 1, change);
-	else
-		copy.push(change);
-	return copy;
-}
-function revertChange<T extends Entity>(id: number, changes: T[]) {
-	return changes.filter(change => change.id !== id);
-}
-
 const oneDayMs = 24 * 60 * 60 * 1000;
 function dropDay(diff: Duration) {
 	if (diff.toMillis() >= oneDayMs) {
@@ -485,13 +257,17 @@ function dropDay(diff: Duration) {
 const newEventStart = ref("");
 const newEventDuration = ref("01:00");
 const newEventEnd = computed({
-	get: () => (
-		DateTime.fromISO(newEventStart.value, { zone: accountStore.activeTimezone, locale: "en-US" })
-			.plus(Duration.fromISOTime(newEventDuration.value, { locale: "en-US" }))
-			.toFormat("HH:mm")
-	),
+	get: () => {
+		try {
+			return DateTime.fromISO(newEventStart.value, { zone: accountStore.activeTimezone, locale: accountStore.activeLocale })
+				.plus(Duration.fromISOTime(newEventDuration.value, { locale: accountStore.activeLocale }))
+				.toFormat("HH:mm")
+		} catch (err) {
+			return "";
+		}
+	},
 	set: (value: string) => {
-		const start = DateTime.fromISO(newEventStart.value, { zone: accountStore.activeTimezone, locale: "en-US" });
+		const start = DateTime.fromISO(newEventStart.value, { zone: accountStore.activeTimezone, locale: accountStore.activeLocale });
 		const end = endFromTime(start, value);
 		newEventDuration.value = dropDay(end.diff(start)).toFormat("hh:mm");
 	},
@@ -502,85 +278,73 @@ watch(() => props.locationId, () => {
 });
 
 function endFromTime(start: DateTime, time: string) {
-	let end = start.startOf("day").plus(Duration.fromISOTime(time, { locale: "en-US" }));
+	let end = start.startOf("day").plus(Duration.fromISOTime(time, { locale: accountStore.activeLocale }));
 	if (end.toMillis() <= start.toMillis()) {
 		end = end.plus({ days: 1 });
 	}
 	return end;
 }
 function durationFromTime(time: string) {
-	let duration = Duration.fromISOTime(time, { locale: "en-US" });
+	let duration = Duration.fromISOTime(time, { locale: accountStore.activeLocale });
 	if (duration.toMillis() === 0) {
-		duration = Duration.fromMillis(oneDayMs, { locale: "en-US" });
+		duration = Duration.fromMillis(oneDayMs, { locale: accountStore.activeLocale });
 	}
 	return duration;
 }
 const newEventName = ref("");
+function editEvent(
+	eventSlot: EventSlot,
+	edits: Parameters<ClientSchedule["editEvent"]>[1],
+) {
+	schedule.value.editEvent(eventSlot.event, edits);
+}
+
 function editEventSlot(
 	eventSlot: EventSlot,
 	edits: {
+		deleted?: boolean,
 		start?: string,
 		end?: string,
 		duration?: string,
-		name?: string,
-		locationId?: number,
-		assigned?: number[],
+		locationId?: Id,
+		assigned?: Set<Id>,
 	}
 ) {
+	const computedEdits: Parameters<ClientSchedule["editEventSlot"]>[1] = {
+		deleted: edits.deleted,
+		assigned: edits.assigned,
+	};
 	if (edits.start) {
-		const start = DateTime.fromISO(edits.start, { zone: accountStore.activeTimezone, locale: "en-US" });
-		eventSlot = {
-			...eventSlot,
-			start,
-			end: start.plus(eventSlot.end.diff(eventSlot.start)),
-		};
+		const start = DateTime.fromISO(edits.start, { zone: accountStore.activeTimezone, locale: accountStore.activeLocale });
+		computedEdits.start = start;
+		computedEdits.end = start.plus(eventSlot.end.diff(eventSlot.start));
 	}
 	if (edits.end !== undefined) {
-		eventSlot = {
-			...eventSlot,
-			end: endFromTime(eventSlot.start, edits.end),
-		};
+		computedEdits.end = endFromTime(eventSlot.start, edits.end);
 	}
 	if (edits.duration !== undefined) {
-		eventSlot = {
-			...eventSlot,
-			end: eventSlot.start.plus(durationFromTime(edits.duration)),
-		};
-	}
-	if (edits.name !== undefined) {
-		eventSlot = {
-			...eventSlot,
-			name: edits.name,
-		};
+		computedEdits.end = eventSlot.start.plus(durationFromTime(edits.duration));
 	}
 	if (edits.locationId !== undefined) {
-		eventSlot = {
-			...eventSlot,
-			locationId: edits.locationId,
-		};
+		const location = schedule.value.locations.get(edits.locationId);
+		if (location)
+			computedEdits.locations = [location];
 	}
-	if (edits.assigned !== undefined) {
-		eventSlot = {
-			...eventSlot,
-			assigned: edits.assigned,
-		};
-	}
-	changes.value = replaceChange(eventSlot, changes.value);
+	schedule.value.editEventSlot(eventSlot.slot, computedEdits);
 }
-function delEventSlot(eventSlot: EventSlot) {
-	const change = {
-		...eventSlot,
-		deleted: true,
-	};
-	changes.value = replaceChange(change, changes.value);
-}
-function revertEventSlot(id: number) {
-	changes.value = revertChange(id, changes.value);
+function revertEventSlot(id: Id) {
+	schedule.value.restoreEventSlot(id);
 }
 function newEventSlot(options: { start?: DateTime, end?: DateTime } = {}) {
 	const name = newEventName.value;
-	const locationId = newEventLocation.value;
-	if (!locationId) {
+	const nameId = toId(name);
+	const event = [...schedule.value.events.values()].find(event => toId(event.name) === nameId);
+	if (!event) {
+		alert("Invalid event");
+		return;
+	}
+	const location = schedule.value.locations.get(newEventLocation.value!);
+	if (!location) {
 		alert("Invalid location");
 		return;
 	}
@@ -598,43 +362,25 @@ function newEventSlot(options: { start?: DateTime, end?: DateTime } = {}) {
 		end = options.end;
 		start = options.end.minus(duration);
 	} else {
-		start = DateTime.fromISO(newEventStart.value, { zone: accountStore.activeTimezone, locale: "en-US" });
+		start = DateTime.fromISO(newEventStart.value, { zone: accountStore.activeTimezone, locale: accountStore.activeLocale });
 		end = endFromTime(start, newEventEnd.value);
 	}
 	if (!start.isValid || !end.isValid) {
 		alert("Invalid start and/or end time");
 		return;
 	}
-	const change: EventSlot = {
-		type: "slot",
-		updatedAt: "",
-		id: Math.floor(Math.random() * -1000), // XXX this wont work.
-		name,
-		origLocation: locationId,
-		locationId,
-		assigned: [],
+	const slot = new ClientScheduleEventSlot(
+		schedule.value.nextClientId--,
+		false,
+		event.id,
 		start,
 		end,
-	};
+		[location],
+		new Set(),
+		0,
+	);
 	newEventName.value = "";
-	changes.value = replaceChange(change, changes.value);
-}
-
-async function saveEventSlots() {
-	try {
-		await $fetch("/api/schedule", {
-			method: "PATCH",
-			body: {
-				id: 111,
-				updatedAt: "",
-				events: scheduleChanges.value,
-			} satisfies ApiSchedule,
-		});
-		changes.value = [];
-	} catch (err: any) {
-		console.error(err);
-		alert(err?.data?.message ?? err.message);
-	}
+	schedule.value.setEventSlot(slot);
 }
 
 const oneHourMs = 60 * 60 * 1000;
@@ -648,36 +394,31 @@ function gapFormat(gap: Gap) {
 }
 
 const eventSlots = computed(() => {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
 	const data: (EventSlot | Gap)[] = [];
-	for (const event of schedule.value.events ?? []) {
+	for (const event of schedule.value.events.values()) {
 		if (event.deleted)
 			continue;
-		for (const slot of event.slots) {
+		for (const slot of event.slots.values()) {
 			if (props.eventSlotFilter && !props.eventSlotFilter(slot))
 				continue;
-			for (const locationId of slot.locationIds) {
-				if (props.locationId !== undefined && locationId !== props.locationId)
+			for (const location of slot.locations) {
+				if (props.locationId !== undefined && location.id !== props.locationId)
 					continue;
 				data.push({
 					type: "slot",
 					id: slot.id,
-					updatedAt: "",
+					deleted: slot.deleted || event.deleted,
 					event,
 					slot,
 					name: event.name,
-					locationId,
+					location,
 					assigned: slot.assigned ?? [],
-					origLocation: locationId,
-					start: DateTime.fromISO(slot.start, { zone: accountStore.activeTimezone, locale: "en-US" }),
-					end: DateTime.fromISO(slot.end, { zone: accountStore.activeTimezone, locale: "en-US" }),
+					start: slot.start,
+					end: slot.end,
 				});
 			}
 		}
 	}
-	applyUpdatesToArray(changes.value.filter(c => !c.deleted), data as EventSlot[]);
 	data.sort((a, b) => a.start.toMillis() - b.start.toMillis() || a.end.toMillis() - b.end.toMillis());
 
 	// Insert gaps
@@ -689,7 +430,7 @@ const eventSlots = computed(() => {
 			gaps.push([index, {
 				type: "gap",
 				locationId: props.locationId,
-				start: DateTime.fromMillis(maxEnd, { locale: "en-US" }),
+				start: DateTime.fromMillis(maxEnd, { locale: accountStore.activeLocale }),
 				end: second.start,
 			}]);
 		}
diff --git a/components/ShiftScheduleTable.vue b/components/ShiftScheduleTable.vue
index 45f224a..f0088de 100644
--- a/components/ShiftScheduleTable.vue
+++ b/components/ShiftScheduleTable.vue
@@ -1,9 +1,6 @@
 <template>
-	<div v-if="schedule.deleted">
-		Error: Unexpected deleted schedule.
-	</div>
-	<div v-else>
-		<Timetable :schedule="schedulePreview" :eventSlotFilter :shiftSlotFilter />
+	<div>
+		<Timetable :schedule :eventSlotFilter :shiftSlotFilter />
 		<table>
 			<thead>
 				<tr>
@@ -23,7 +20,7 @@
 						v-for="ss in shiftSlots"
 						:key='ss.slot?.id ?? ss.start.toMillis()'
 						:class='{
-							removed: ss.type === "slot" && removed.has(ss.id),
+							removed: ss.slot?.deleted || ss.shift?.deleted,
 							gap: ss.type === "gap",
 						}'
 					>
@@ -39,21 +36,22 @@
 								>
 							</td>
 							<td>
-									<input
-										type="text"
-										v-model="newShiftName"
-									>
+								<input
+									type="text"
+									v-model="newShiftName"
+								>
 							</td>
 							<td></td>
 							<td>
 								<select
-									v-model="newShiftRole"
+									v-model="newShiftRoleId"
 								>
 									<option
-										v-for="role in schedule.roles?.filter(r => !r.deleted)"
+										v-for="role in schedule.roles.values()"
 										:key="role.id"
 										:value="role.id"
-										:selected="role.id === newShiftRole"
+										:disabled="role.deleted"
+										:selected="role.id === newShiftRoleId"
 									>{{ role.name }}</option>
 								</select>
 							</td>
@@ -96,20 +94,21 @@
 								<input
 									type="text"
 									:value="ss.name"
-									@input="editShiftSlot(ss, { name: ($event as any).target.value })"
+									@input="editShift(ss, { name: ($event as any).target.value })"
 								>
 							</td>
 							<td>{{ status(ss) }}</td>
 							<td>
 								<select
-									:value="ss.roleId"
-									@change="editShiftSlot(ss, { roleId: parseInt(($event as any).target.value) })"
+									:value="ss.role.id"
+									@change="editShift(ss, { role: schedule.roles.get(parseInt(($event as any).target.value)) })"
 								>
 									<option
-										v-for="role in schedule.roles?.filter(r => !r.deleted)"
+										v-for="role in schedule.roles.values()"
 										:key="role.id"
 										:value="role.id"
-										:selected="role.id === ss.roleId"
+										:disabled="role.deleted"
+										:selected="role.id === ss.role.id"
 									>{{ role.name }}</option>
 								</select>
 							</td>
@@ -122,12 +121,12 @@
 							</td>
 							<td>
 								<button
-									:disabled="removed.has(ss.id)"
+									:disabled="ss.deleted"
 									type="button"
-									@click="delShiftSlot(ss)"
+									@click="editShiftSlot(ss, { deleted: true })"
 								>Remove</button>
 								<button
-									v-if="changes.some(c => c.id === ss.id)"
+									v-if="schedule.isModifiedShiftSlot(ss.slot.id)"
 									type="button"
 									@click="revertShiftSlot(ss.id)"
 								>Revert</button>
@@ -187,63 +186,37 @@
 							<td>{{ ss.end.diff(ss.start).toFormat('hh:mm') }}</td>
 							<td>{{ ss.name }}</td>
 							<td>{{ status(ss) }}</td>
-							<td>{{ ss.roleId }}</td>
+							<td>{{ ss.role.id }}</td>
 							<td><AssignedCrew :modelValue="ss.assigned" :edit="false" /></td>
 						</template>
 					</tr>
 				</template>
 			</tbody>
 		</table>
-		<p v-if="changes.length">
-			Changes are not save yet.
-			<button
-				type="button"
-				@click="saveShiftSlots"
-			>Save Changes</button>
-		</p>
-		<details>
-			<summary>Debug</summary>
-			<b>ShiftSlot changes</b>
-			<ol>
-				<li v-for="change in changes">
-					<pre><code>{{ JSON.stringify((({ shift, slot, ...data }) => data)(change as any), undefined, "  ") }}</code></pre>
-				</li>
-			</ol>
-			<b>Shift changes</b>
-			<ol>
-				<li v-for="change in shiftChanges">
-					<pre><code>{{ JSON.stringify((({ shift, slot, ...data }) => data)(change as any), undefined, "  ") }}</code></pre>
-				</li>
-			</ol>
-		</details>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { DateTime, Duration } from 'luxon';
-import type { ApiSchedule, ApiScheduleEventSlot, ApiScheduleShift, ApiScheduleShiftSlot } from '~/shared/types/api';
-import { applyUpdatesToArray } from '~/shared/utils/update';
-import { enumerate, pairs } from '~/shared/utils/functions';
-import type { Entity } from '~/shared/types/common';
+import { DateTime, Duration } from '~/shared/utils/luxon';
+import { enumerate, pairs, toId } from '~/shared/utils/functions';
+import type { Id } from '~/shared/types/common';
 
 const props = defineProps<{
 	edit?: boolean,
-	roleId?: number,
-	eventSlotFilter?: (slot: ApiScheduleEventSlot) => boolean,
-	shiftSlotFilter?: (slot: ApiScheduleShiftSlot) => boolean,
+	roleId?: Id,
+	eventSlotFilter?: (slot: ClientScheduleEventSlot) => boolean,
+	shiftSlotFilter?: (slot: ClientScheduleShiftSlot) => boolean,
 }>();
 
 interface ShiftSlot {
 	type: "slot",
-	id: number,
-	updatedAt: string,
-	deleted?: boolean,
-	shift?: Extract<ApiScheduleShift, { deleted?: false }>,
-	slot?: ApiScheduleShiftSlot,
-	origRole: number,
+	id: Id,
+	deleted: boolean,
+	shift: ClientScheduleShift,
+	slot: ClientScheduleShiftSlot,
 	name: string,
-	roleId: number,
-	assigned: number[],
+	role: ClientScheduleRole,
+	assigned: Set<Id>,
 	start: DateTime,
 	end: DateTime,
 }
@@ -254,191 +227,25 @@ interface Gap {
 	shift?: undefined,
 	slot?: undefined,
 	name?: undefined,
-	roleId?: number,
+	role?: undefined,
 	start: DateTime,
 	end: DateTime,
 }
 
 function status(shiftSlot: ShiftSlot) {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
 	if (
 		!shiftSlot.shift
 		|| shiftSlot.shift.name !== shiftSlot.name
 	) {
-		const shift = schedule.value.shifts?.find(shift => !shift.deleted && shift.name === shiftSlot.name);
+		const shift = [...schedule.value.shifts.values()].find(shift => !shift.deleted && shift.name === shiftSlot.name);
 		return shift ? "L" : "N";
 	}
-	return shiftSlot.shift.slots.length === 1 ? "" : shiftSlot.shift.slots.length;
-}
-
-// Filter out set records where a del record exists for the same id.
-function filterSetOps<T extends Entity>(changes: T[]) {
-	const deleteIds = new Set(changes.filter(c => c.deleted).map(c => c.id));
-	return changes.filter(c => c.deleted || !deleteIds.has(c.id));
-}
-
-function findShift(
-	shiftSlot: ShiftSlot,
-	changes: ApiScheduleShift[],
-	schedule: ApiSchedule,
-) {
-	if (schedule.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
-	let setShift = changes.filter(
-		c => !c.deleted,
-	).find(
-		c => (
-			c.name === shiftSlot.name
-			&& c.roleId === shiftSlot.roleId
-		)
-	);
-	if (
-		!setShift
-		&& shiftSlot.shift
-		&& shiftSlot.shift.name === shiftSlot.name
-	) {
-		setShift = shiftSlot.shift;
-	}
-	if (!setShift) {
-		setShift = schedule.shifts?.filter(s => !s.deleted).find(s => s.name === shiftSlot.name);
-	}
-	let delShift;
-	if (shiftSlot.shift) {
-		delShift = changes.filter(c => !c.deleted).find(
-			c => c.name === shiftSlot.shift!.name
-		);
-		if (!delShift) {
-			delShift = schedule.shifts?.filter(s => !s.deleted).find(s => s.name === shiftSlot.shift!.name);
-		}
-	}
-	return { setShift, delShift };
-}
-
-function mergeSlot(
-	shift: Extract<ApiScheduleShift, { deleted?: false }>,
-	shiftSlot: ShiftSlot,
-): Extract<ApiScheduleShift, { deleted?: false }> {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
-	const oldSlot = shift.slots.find(s => s.id === shiftSlot.id);
-	const nextId = Math.max(0, ...schedule.value.shifts?.filter(s => !s.deleted).flatMap(s => s.slots.map(slot => slot.id)) ?? []) + 1;
-	const start = shiftSlot.start.toUTC().toISO({ suppressSeconds: true })!;
-	const end = shiftSlot.end.toUTC().toISO({ suppressSeconds: true })!;
-	const assigned = shiftSlot.assigned.length ? shiftSlot.assigned : undefined;
-
-	if (shift.roleId !== shiftSlot.roleId) {
-		console.warn(`Attempt to add slot id=${shiftSlot.id} roleId=${shiftSlot.roleId} to shift id=${shift.id} roleId=${shift.roleId}`);
-	}
-
-	// Edit slot in-place if possible
-	if (oldSlot && oldSlot.id === shiftSlot.id) {
-		return {
-			...shift,
-			slots: shift.slots.map(s => s.id !== oldSlot.id ? s : { ...s, assigned, start, end, }),
-		};
-	}
-
-	// Else remove old slot if it exist and insert a new one
-	return {
-		...shift,
-		slots: [...(oldSlot ? shift.slots.filter(s => s.id !== oldSlot.id) : shift.slots), {
-			id: oldSlot ? oldSlot.id : nextId,
-			assigned,
-			start,
-			end,
-		}],
-	};
-}
-
-const shiftChanges = computed(() => {
-	let eventChanges: Extract<ApiScheduleShift, { deleted?: false }>[] = [];
-	for (const change of filterSetOps(changes.value)) {
-		if (!change.deleted) {
-			let { setShift, delShift } = findShift(change, eventChanges, schedule.value);
-			if (delShift && delShift !== setShift) {
-				eventChanges = removeSlot(eventChanges, delShift, change);
-			}
-			if (!setShift) {
-				setShift = {
-					id: Math.floor(Math.random() * -1000), // XXX This wont work.
-					updatedAt: "",
-					name: change.name,
-					roleId: change.roleId,
-					slots: [],
-				};
-			}
-			setShift = {
-				...setShift,
-				roleId: change.roleId,
-			}
-
-			eventChanges = replaceChange(mergeSlot(setShift, change), eventChanges);
-
-		} else if (change.deleted) {
-			let { delShift } = findShift(change, eventChanges, schedule.value);
-			if (delShift) {
-				eventChanges = removeSlot(eventChanges, delShift, change);
-			}
-		}
-	}
-	return eventChanges;
-});
-
-const schedulePreview = computed(() => {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
-	const shifts = [...schedule.value.shifts ?? []]
-	applyUpdatesToArray(shiftChanges.value, shifts);
-	return {
-		...schedule.value,
-		shifts,
-	};
-});
-
-function removeSlot(
-	eventChanges: Extract<ApiScheduleShift, { deleted?: false }>[],
-	shift: Extract<ApiScheduleShift, { deleted?: false }>,
-	shiftSlot: ShiftSlot,
-) {
-	let oldSlot = shift.slots.find(s => s.id === shiftSlot.id);
-	if (oldSlot) {
-		eventChanges = replaceChange({
-			...shift,
-			slots: shift.slots.filter(s => s.id !== oldSlot.id)
-		}, eventChanges);
-	}
-	return eventChanges;
+	return shiftSlot.shift.slots.size === 1 ? "" : shiftSlot.shift.slots.size;
 }
 
 const accountStore = useAccountStore();
 const schedule = await useSchedule();
 
-const changes = ref<ShiftSlot[]>([]);
-const removed = computed(() => new Set(changes.value.filter(c => c.deleted).map(c => c.id)));
-
-function replaceChange<T extends Entity>(
-	change: T,
-	changes: T[],
-) {
-	const index = changes.findIndex(item => (
-		item.deleted === change.deleted && item.id === change.id
-	));
-	const copy = [...changes];
-	if (index !== -1)
-		copy.splice(index, 1, change);
-	else
-		copy.push(change);
-	return copy;
-}
-function revertChange<T extends Entity>(id: number, changes: T[]) {
-	return changes.filter(change => change.id !== id);
-}
-
 const oneDayMs = 24 * 60 * 60 * 1000;
 function dropDay(diff: Duration) {
 	if (diff.toMillis() >= oneDayMs) {
@@ -450,113 +257,88 @@ function dropDay(diff: Duration) {
 const newShiftStart = ref("");
 const newShiftDuration = ref("01:00");
 const newShiftEnd = computed({
-	get: () => (
-		DateTime.fromISO(newShiftStart.value, { zone: accountStore.activeTimezone, locale: "en-US" })
-			.plus(Duration.fromISOTime(newShiftDuration.value, { locale: "en-US" }))
-			.toFormat("HH:mm")
-	),
+	get: () => {
+		try {
+			return DateTime.fromISO(newShiftStart.value, { zone: accountStore.activeTimezone, locale: accountStore.activeLocale })
+				.plus(Duration.fromISOTime(newShiftDuration.value, { locale: accountStore.activeLocale }))
+				.toFormat("HH:mm")
+		} catch (err) {
+			return "";
+		}
+	},
 	set: (value: string) => {
-		const start = DateTime.fromISO(newShiftStart.value, { zone: accountStore.activeTimezone, locale: "en-US" });
+		const start = DateTime.fromISO(newShiftStart.value, { zone: accountStore.activeTimezone, locale: accountStore.activeLocale });
 		const end = endFromTime(start, value);
 		newShiftDuration.value = dropDay(end.diff(start)).toFormat("hh:mm");
 	},
 });
-const newShiftRole = ref(props.roleId);
+const newShiftRoleId = ref(props.roleId);
 watch(() => props.roleId, () => {
-	newShiftRole.value = props.roleId;
+	newShiftRoleId.value = props.roleId;
 });
 
 function endFromTime(start: DateTime, time: string) {
-	let end = start.startOf("day").plus(Duration.fromISOTime(time, { locale: "en-US" }));
+	let end = start.startOf("day").plus(Duration.fromISOTime(time, { locale: accountStore.activeLocale }));
 	if (end.toMillis() <= start.toMillis()) {
 		end = end.plus({ days: 1 });
 	}
 	return end;
 }
 function durationFromTime(time: string) {
-	let duration = Duration.fromISOTime(time, { locale: "en-US" });
+	let duration = Duration.fromISOTime(time, { locale: accountStore.activeLocale });
 	if (duration.toMillis() === 0) {
-		duration = Duration.fromMillis(oneDayMs, { locale: "en-US" });
+		duration = Duration.fromMillis(oneDayMs, { locale: accountStore.activeLocale });
 	}
 	return duration;
 }
 const newShiftName = ref("");
+function editShift(
+	shiftSlot: ShiftSlot,
+	edits: Parameters<ClientSchedule["editShift"]>[1],
+) {
+	schedule.value.editShift(shiftSlot.shift, edits);
+}
+
 function editShiftSlot(
 	shiftSlot: ShiftSlot,
 	edits: {
+		deleted?: boolean,
 		start?: string,
 		end?: string,
 		duration?: string,
-		name?: string,
-		roleId?: number,
-		assigned?: number[],
+		assigned?: Set<Id>,
 	}
 ) {
+	const computedEdits: Parameters<ClientSchedule["editShiftSlot"]>[1] = {
+		deleted: edits.deleted,
+		assigned: edits.assigned,
+	};
 	if (edits.start) {
-		const start = DateTime.fromISO(edits.start, { zone: accountStore.activeTimezone, locale: "en-US" });
-		shiftSlot = {
-			...shiftSlot,
-			start,
-			end: start.plus(shiftSlot.end.diff(shiftSlot.start)),
-		};
+		const start = DateTime.fromISO(edits.start, { zone: accountStore.activeTimezone, locale: accountStore.activeLocale });
+		computedEdits.start = start;
+		computedEdits.end = start.plus(shiftSlot.slot.end.diff(shiftSlot.slot.start));
 	}
 	if (edits.end !== undefined) {
-		shiftSlot = {
-			...shiftSlot,
-			end: endFromTime(shiftSlot.start, edits.end),
-		};
+		computedEdits.end = endFromTime(shiftSlot.start, edits.end);
 	}
 	if (edits.duration !== undefined) {
-		shiftSlot = {
-			...shiftSlot,
-			end: shiftSlot.start.plus(durationFromTime(edits.duration)),
-		};
+		computedEdits.end = shiftSlot.start.plus(durationFromTime(edits.duration));
 	}
-	if (edits.name !== undefined) {
-		shiftSlot = {
-			...shiftSlot,
-			name: edits.name,
-		};
-	}
-	if (edits.roleId !== undefined) {
-		let changesCopy = changes.value;
-		for (const slot of shiftSlots.value) {
-			if (slot.type === "slot" && slot.shift?.name === shiftSlot.name) {
-				changesCopy = replaceChange({
-					...slot,
-					roleId: edits.roleId,
-				}, changesCopy);
-			}
-		}
-		changesCopy = replaceChange({
-			...shiftSlot,
-			roleId: edits.roleId,
-		}, changesCopy);
-		changes.value = changesCopy;
-		return;
-	}
-	if (edits.assigned !== undefined) {
-		shiftSlot = {
-			...shiftSlot,
-			assigned: edits.assigned,
-		};
-	}
-	changes.value = replaceChange(shiftSlot, changes.value);
+	schedule.value.editShiftSlot(shiftSlot.slot, computedEdits);
 }
-function delShiftSlot(shiftSlot: ShiftSlot) {
-	const change = {
-		...shiftSlot,
-		deleted: true,
-	};
-	changes.value = replaceChange(change, changes.value);
-}
-function revertShiftSlot(id: number) {
-	changes.value = revertChange(id, changes.value);
+function revertShiftSlot(id: Id) {
+	schedule.value.restoreShiftSlot(id);
 }
 function newShiftSlot(options: { start?: DateTime, end?: DateTime } = {}) {
 	const name = newShiftName.value;
-	const roleId = newShiftRole.value;
-	if (!roleId) {
+	const nameId = toId(name);
+	const shift = [...schedule.value.shifts.values()].find(shift => toId(shift.name) === nameId);
+	if (!shift) {
+		alert("Invalid shift");
+		return;
+	}
+	const role = schedule.value.roles.get(newShiftRoleId.value!);
+	if (!role) {
 		alert("Invalid role");
 		return;
 	}
@@ -574,42 +356,23 @@ function newShiftSlot(options: { start?: DateTime, end?: DateTime } = {}) {
 		end = options.end;
 		start = options.end.minus(duration);
 	} else {
-		start = DateTime.fromISO(newShiftStart.value, { zone: accountStore.activeTimezone, locale: "en-US" });
+		start = DateTime.fromISO(newShiftStart.value, { zone: accountStore.activeTimezone, locale: accountStore.activeLocale });
 		end = endFromTime(start, newShiftEnd.value);
 	}
 	if (!start.isValid || !end.isValid) {
 		alert("Invalid start and/or end time");
 		return;
 	}
-	const change: ShiftSlot = {
-		type: "slot",
-		updatedAt: "",
-		id: Math.floor(Math.random() * -1000), // XXX this wont work.
-		name,
-		origRole: roleId,
-		roleId,
-		assigned: [],
+	const slot = new ClientScheduleShiftSlot(
+		schedule.value.nextClientId--,
+		false,
+		shift.id,
 		start,
 		end,
-	};
+		new Set(),
+	);
+	schedule.value.setShiftSlot(slot);
 	newShiftName.value = "";
-	changes.value = replaceChange(change, changes.value);
-}
-async function saveShiftSlots() {
-	try {
-		await $fetch("/api/schedule", {
-			method: "PATCH",
-			body: {
-				id: 111,
-				updatedAt: "",
-				shifts: shiftChanges.value
-			} satisfies ApiSchedule,
-		});
-		changes.value = [];
-	} catch (err: any) {
-		console.error(err);
-		alert(err?.data?.message ?? err.message);
-	}
 }
 
 const oneHourMs = 60 * 60 * 1000;
@@ -623,33 +386,29 @@ function gapFormat(gap: Gap) {
 }
 
 const shiftSlots = computed(() => {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
 	const data: (ShiftSlot | Gap)[] = [];
-	for (const shift of schedule.value.shifts ?? []) {
-		if (shift.deleted || props.roleId !== undefined && shift.roleId !== props.roleId)
+	for (const shift of schedule.value.shifts.values()) {
+		if (props.roleId !== undefined && shift.role.id !== props.roleId)
 			continue;
-		for (const slot of shift.slots) {
+		for (const slot of shift.slots.values()) {
 			if (props.shiftSlotFilter && !props.shiftSlotFilter(slot))
 				continue;
 			data.push({
 				type: "slot",
 				id: slot.id,
-				updatedAt: "",
+				deleted: slot.deleted || shift.deleted,
 				shift,
 				slot,
 				name: shift.name,
-				roleId: shift.roleId,
-				assigned: slot.assigned ?? [],
-				origRole: shift.roleId,
-				start: DateTime.fromISO(slot.start, { zone: accountStore.activeTimezone, locale: "en-US" }),
-				end: DateTime.fromISO(slot.end, { zone: accountStore.activeTimezone, locale: "en-US" }),
+				role: shift.role,
+				assigned: slot.assigned,
+				start: slot.start,
+				end: slot.end,
 			});
 		}
 	}
-	applyUpdatesToArray(changes.value.filter(c => !c.deleted), data as ShiftSlot[]);
-	data.sort((a, b) => a.start.toMillis() - b.start.toMillis() || a.end.toMillis() - b.end.toMillis());
+	const byTime = (a: DateTime, b: DateTime) => a.toMillis() - b.toMillis();
+	data.sort((a, b) => byTime(a.start, b.start) || byTime(a.end, b.end));
 
 	// Insert gaps
 	let maxEnd = 0;
@@ -659,8 +418,7 @@ const shiftSlots = computed(() => {
 		if (maxEnd < second.start.toMillis()) {
 			gaps.push([index, {
 				type: "gap",
-				roleId: props.roleId,
-				start: DateTime.fromMillis(maxEnd, { locale: "en-US" }),
+				start: DateTime.fromMillis(maxEnd, { locale: accountStore.activeLocale }),
 				end: second.start,
 			}]);
 		}
diff --git a/components/ShiftsTable.vue b/components/ShiftsTable.vue
index 3cd468a..6aafeaa 100644
--- a/components/ShiftsTable.vue
+++ b/components/ShiftsTable.vue
@@ -1,8 +1,5 @@
 <template>
-	<div v-if="schedule.deleted">
-		Error: Unexpected deleted schedule.
-	</div>
-	<div v-else>
+	<div>
 		<table>
 			<thead>
 				<tr>
@@ -17,9 +14,9 @@
 			<tbody>
 				<template v-if="edit">
 					<tr
-						v-for="shift in shifts?.filter(s => !s.deleted)"
+						v-for="shift in schedule.shifts.values()"
 						:key="shift.id"
-						:class="{ removed: removed.has(shift.id) }"
+						:class="{ removed: shift.deleted }"
 					>
 						<td>{{ shift.id }}</td>
 						<td>
@@ -31,18 +28,19 @@
 						</td>
 						<td>
 							<select
-								:value="shift.roleId"
-								@change="editShift(shift, { roleId: ($event as any).target.value })"
+								:value="shift.role.id"
+								@change="editShift(shift, { role: schedule.roles.get(parseInt(($event as any).target.value, 10)) })"
 							>
 								<option
-									v-for="role in schedule.roles?.filter(r => !r.deleted)"
+									v-for="role in schedule.roles.values()"
 									:key="role.id"
 									:value="role.id"
-									:selected="shift.roleId === role.id"
+									:disabled="shift.deleted"
+									:selected="shift.role.id === role.id"
 								>{{ role.name }}</option>
 							</select>
 						</td>
-						<td>{{ shift.slots.length ? shift.slots.length : "" }}</td>
+						<td>{{ shift.slots.size ? shift.slots.size : "" }}</td>
 						<td>
 							<input
 								type="text"
@@ -53,18 +51,18 @@
 						<td>
 							<button
 								type="button"
-								:disabled="removed.has(shift.id)"
-								@click="delShift(shift.id)"
+								:disabled="shift.deleted"
+								@click="editShift(shift, { deleted: true })"
 							>Delete</button>
 							<button
-								v-if="changes.some(c => c.id === shift.id)"
+								v-if="schedule.isModifiedShift(shift.id)"
 								type="button"
 								@click="revertShift(shift.id)"
 							>Revert</button>
 						</td>
 					</tr>
 					<tr>
-						<td>{{ newShiftId }}</td>
+						<td>{{ schedule.nextClientId }}</td>
 						<td>
 							<input
 								type="text"
@@ -72,12 +70,13 @@
 							>
 						</td>
 						<td>
-							<select v-model="newShiftRole">
+							<select v-model="newShiftRoleId">
 								<option
-									v-for="role in schedule.roles?.filter(r => !r.deleted)"
+									v-for="role in schedule.roles.values()"
 									:key="role.id"
 									:value="role.id"
-									:selected="role.id === newShiftRole"
+									:disabled="role.deleted"
+									:selected="role.id === newShiftRoleId"
 								>{{ role.name }}</option>
 							</select>
 						</td>
@@ -103,40 +102,26 @@
 				</template>
 				<template v-else>
 					<tr
-						v-for="shift in shifts?.filter(s => !s.deleted)"
+						v-for="shift in schedule.shifts.values()"
 						:key="shift.id"
 					>
 						<td>{{ shift.id }}</td>
 						<td>{{ shift.name }}</td>
-						<td>{{ shift.roleId }}</td>
-						<td>{{ shift.slots.length ? shift.slots.length : "" }}</td>
+						<td>{{ shift.role.id }}</td>
+						<td>{{ shift.slots.size ? shift.slots.size : "" }}</td>
 						<td>{{ shift.description }}</td>
 					</tr>
 				</template>
 			</tbody>
 		</table>
-		<p v-if="changes.length">
-			Changes are not saved yet.
-			<button
-				type="button"
-				@click="saveShifts"
-			>Save Changes</button>
-		</p>
-		<details>
-			<summary>Debug</summary>
-			<ol>
-				<li v-for="change in changes">
-					<pre><code>{{ JSON.stringify(change, undefined, 2) }}</code></pre>
-				</li>
-			</ol>
-		</details>
 	</div>
 </template>
 
 <script lang="ts" setup>
+import { DateTime } from 'luxon';
 import type { ApiSchedule, ApiScheduleShift } from '~/shared/types/api';
+import type { Id } from '~/shared/types/common';
 import { toId } from '~/shared/utils/functions';
-import { applyUpdatesToArray } from '~/shared/utils/update';
 
 const props = defineProps<{
 	edit?: boolean,
@@ -145,73 +130,25 @@ const props = defineProps<{
 
 const schedule = await useSchedule();
 
-const changes = ref<ApiScheduleShift[]>([]);
-const removed = computed(() => new Set(changes.value.filter(c => c.deleted).map(c => c.id)));
-function replaceChange(
-	change: ApiScheduleShift,
-	changes: ApiScheduleShift[],
-) {
-	const index = changes.findIndex(item => (
-		item.deleted === change.deleted && item.id === change.id
-	));
-	const copy = [...changes];
-	if (index !== -1)
-		copy.splice(index, 1, change);
-	else
-		copy.push(change);
-	return copy;
-}
-function revertChange(id: number, changes: ApiScheduleShift[]) {
-	return changes.filter(change => change.id !== id);
-}
-
 const newShiftName = ref("");
-const newShiftId = computed(() => {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
-	return Math.max(
-		1,
-		...schedule.value.shifts?.map(r => r.id) ?? [],
-		...changes.value.map(c => c.id)
-	) + 1;
-});
-const newShiftRole = ref(props.roleId);
+const newShiftRoleId = ref(props.roleId);
 watch(() => props.roleId, () => {
-	newShiftRole.value = props.roleId;
+	newShiftRoleId.value = props.roleId;
 });
 const newShiftDescription = ref("");
 function editShift(
-	shift: Extract<ApiScheduleShift, { deleted?: false }>,
-	edits: { name?: string, description?: string, roleId?: number }
+	shift: ClientScheduleShift,
+	edits: Parameters<ClientSchedule["editShift"]>[1],
 ) {
-	const copy = { ...shift };
-	if (edits.name !== undefined) {
-		copy.name = edits.name;
-	}
-	if (edits.description !== undefined) {
-		copy.description = edits.description || undefined;
-	}
-	if (edits.roleId !== undefined) {
-		copy.roleId = edits.roleId;
-	}
-	changes.value = replaceChange(copy, changes.value);
+	schedule.value.editShift(shift, edits);
 }
-function delShift(id: number) {
-	const change = { id, updatedAt: "", deleted: true as const };
-	changes.value = replaceChange(change, changes.value);
-}
-function revertShift(id: number) {
-	changes.value = revertChange(id, changes.value);
+function revertShift(id: Id) {
+	schedule.value.restoreShift(id);
 }
 function shiftExists(name: string) {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
 	name = toId(name);
 	return (
-		schedule.value.shifts?.some(s => !s.deleted && toId(s.name) === name)
-		|| changes.value.some(c => !c.deleted && c.name === name)
+		[...schedule.value.shifts.values()].some(s => !s.deleted && toId(s.name) === name)
 	);
 }
 function newShift() {
@@ -219,50 +156,24 @@ function newShift() {
 		alert(`Shift ${newShiftName.value} already exists`);
 		return;
 	}
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
-	if (!newShiftRole.value) {
+	const role = schedule.value.roles.get(newShiftRoleId.value!);
+	if (!role) {
 		alert(`Invalid role`);
 		return;
 	}
-	const change = {
-		id: newShiftId.value,
-		updatedAt: "",
-		name: newShiftName.value,
-		roleId: newShiftRole.value,
-		description: newShiftDescription.value || undefined,
-		slots: [],
-	};
-	changes.value = replaceChange(change, changes.value);
+	const shift = new ClientScheduleShift(
+		schedule.value.nextClientId--,
+		DateTime.now(),
+		false,
+		role,
+		newShiftName.value,
+		newShiftDescription.value,
+		new Map(),
+	);
+	schedule.value.setShift(shift);
 	newShiftName.value = "";
 	newShiftDescription.value = "";
 }
-async function saveShifts() {
-	try {
-		await $fetch("/api/schedule", {
-			method: "PATCH",
-			body: {
-				id: 111,
-				updatedAt: "",
-				shifts: changes.value
-			} satisfies ApiSchedule,
-		});
-		changes.value = [];
-	} catch (err: any) {
-		console.error(err);
-		alert(err?.data?.message ?? err.message);
-	}
-}
-
-const shifts = computed(() => {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
-	const data = [...schedule.value.shifts ?? []].filter(shift => !shift.deleted && (!props.roleId || shift.roleId === props.roleId));
-	applyUpdatesToArray(changes.value.filter(change => !change.deleted), data);
-	return data;
-});
 </script>
 
 <style scoped>
diff --git a/components/Timetable.vue b/components/Timetable.vue
index c6bfd89..45d57fd 100644
--- a/components/Timetable.vue
+++ b/components/Timetable.vue
@@ -1,10 +1,5 @@
 <template>
-	<figure class="timetable" v-if="schedule.deleted">
-		<p>
-			Error: Schedule is deleted.
-		</p>
-	</figure>
-	<figure class="timetable" v-else>
+	<figure class="timetable">
 		<details>
 			<summary>Debug</summary>
 			<details>
@@ -61,7 +56,7 @@
 				</tr>
 			</thead>
 			<tbody>
-				<template v-for="location in schedule.locations?.filter(l => !l.deleted)" :key="location.id">
+				<template v-for="location in schedule.locations.values()" :key="location.id">
 					<tr v-if="locationRows.has(location.id)">
 						<th>{{ location.name }}</th>
 						<td
@@ -75,12 +70,12 @@
 						</td>
 					</tr>
 				</template>
-				<template v-if="schedule.roles">
+				<template v-if="schedule.roles.size">
 					<tr>
 						<th>Shifts</th>
 						<td :colSpan="totalColumns"></td>
 					</tr>
-					<template v-for="role in schedule.roles?.filter(r => !r.deleted)" :key="role.id">
+					<template v-for="role in schedule.roles.values()" :key="role.id">
 						<tr v-if="roleRows.has(role.id)">
 							<th>{{ role.name }}</th>
 							<td
@@ -102,7 +97,6 @@
 
 <script setup lang="ts">
 import { DateTime } from "luxon";
-import type { ApiSchedule, ApiScheduleEvent, ApiScheduleEventSlot, ApiScheduleLocation, ApiScheduleRole, ApiScheduleShift, ApiScheduleShiftSlot } from "~/shared/types/api";
 import type { Id } from "~/shared/types/common";
 import { pairs, setEquals } from "~/shared/utils/functions";
 
@@ -113,8 +107,8 @@ const oneMinMs = 60 * 1000;
 
 /** Point in time where a time slots starts or ends. */
 type Edge =
-	| { type: "start" | "end", source: "event", slot: ApiScheduleEventSlot }
-	| { type: "start" | "end", source: "shift", roleId: Id, slot: ApiScheduleShiftSlot }
+	| { type: "start" | "end", source: "event", slot: ClientScheduleEventSlot }
+	| { type: "start" | "end", source: "shift", roleId: Id, slot: ClientScheduleShiftSlot }
 ;
 
 /** Point in time where multiple edges meet. */
@@ -124,8 +118,8 @@ type Junction = { ts: number, edges: Edge[] };
 type Span = {
 	start: Junction;
 	end: Junction,
-	locations: Map<number, Set<ApiScheduleEventSlot>>,
-	roles: Map<number, Set<ApiScheduleShiftSlot>>,
+	locations: Map<number, Set<ClientScheduleEventSlot>>,
+	roles: Map<number, Set<ClientScheduleShiftSlot>>,
 };
 
 /**
@@ -140,11 +134,15 @@ type Stretch = {
 }
 
 function* edgesFromEvents(
-	events: Iterable<Extract<ApiScheduleEvent, { deleted?: false }>>,
-	filter = (slot: ApiScheduleEventSlot) => true,
+	events: Iterable<ClientScheduleEvent>,
+	filter = (slot: ClientScheduleEventSlot) => true,
 ): Generator<Edge> {
 	for (const event of events) {
-		for (const slot of event.slots.filter(filter)) {
+		if (event.deleted)
+			continue;
+		for (const slot of event.slots.values()) {
+			if (!filter(slot) || slot.deleted)
+				continue;
 			if (slot.start > slot.end) {
 				throw new Error(`Slot ${slot.id} ends before it starts.`);
 			}
@@ -155,16 +153,20 @@ function* edgesFromEvents(
 }
 
 function* edgesFromShifts(
-	shifts: Iterable<Extract<ApiScheduleShift, { deleted?: false }>>,
-	filter = (slot: ApiScheduleShiftSlot) => true,
+	shifts: Iterable<ClientScheduleShift>,
+	filter = (slot: ClientScheduleShiftSlot) => true,
 ): Generator<Edge> {
 	for (const shift of shifts) {
-		for (const slot of shift.slots.filter(filter)) {
+		if (shift.deleted)
+			continue;
+		for (const slot of shift.slots.values()) {
+			if (!filter(slot) || slot.deleted)
+				continue;
 			if (slot.start > slot.end) {
 				throw new Error(`Slot ${slot.id} ends before it starts.`);
 			}
-			yield { type: "start", source: "shift", roleId: shift.roleId, slot };
-			yield { type: "end", source: "shift", roleId: shift.roleId, slot };
+			yield { type: "start", source: "shift", roleId: shift.role.id, slot };
+			yield { type: "end", source: "shift", roleId: shift.role.id, slot };
 		}
 	}
 }
@@ -172,7 +174,7 @@ function* edgesFromShifts(
 function junctionsFromEdges(edges: Iterable<Edge>) {
 	const junctions = new Map<number, Junction>();
 	for (const edge of edges) {
-		const ts = Date.parse(edge.slot[edge.type]);
+		const ts = edge.slot[edge.type].toMillis();
 		const junction = junctions.get(ts);
 		if (junction) {
 			junction.edges.push(edge);
@@ -186,21 +188,21 @@ function junctionsFromEdges(edges: Iterable<Edge>) {
 
 function* spansFromJunctions(
 	junctions: Iterable<Junction>,
-	locations: Extract<ApiScheduleLocation, { deleted?: false }>[],
-	roles: Extract<ApiScheduleRole, { deleted?: false }>[],
+	locations: Map<Id, ClientScheduleLocation>,
+	roles: Map<Id, ClientScheduleRole>,
 ): Generator<Span> {
 	const activeLocations = new Map(
-		locations.map(location => [location.id, new Set<ApiScheduleEventSlot>()])
+		[...locations.keys()].map(id => [id, new Set<ClientScheduleEventSlot>()])
 	);
 	const activeRoles = new Map(
-		roles?.map(role => [role.id, new Set<ApiScheduleShiftSlot>()])
+		[...roles.keys()].map(id => [id, new Set<ClientScheduleShiftSlot>()])
 	);
 	for (const [start, end] of pairs(junctions)) {
 		for (const edge of start.edges) {
 			if (edge.type === "start") {
 				if (edge.source === "event") {
-					for (const id of edge.slot.locationIds) {
-						activeLocations.get(id)?.add(edge.slot)
+					for (const location of edge.slot.locations) {
+						activeLocations.get(location.id)?.add(edge.slot)
 					}
 				} else if (edge.source === "shift") {
 					activeRoles.get(edge.roleId)?.add(edge.slot)
@@ -224,8 +226,8 @@ function* spansFromJunctions(
 		for (const edge of end.edges) {
 			if (edge.type === "end") {
 				if (edge.source === "event") {
-					for (const id of edge.slot.locationIds) {
-						activeLocations.get(id)?.delete(edge.slot)
+					for (const location of edge.slot.locations) {
+						activeLocations.get(location.id)?.delete(edge.slot)
 					}
 				} else if (edge.source === "shift") {
 					activeRoles.get(edge.roleId)?.delete(edge.slot);
@@ -265,7 +267,7 @@ function* stretchesFromSpans(spans: Iterable<Span>, minSeparation: number): Gene
 
 /** Cuts up a span by whole hours that crosses it */
 function* cutSpansByHours(span: Span, timezone: string): Generator<Span> {
-	const startHour = DateTime.fromMillis(span.start.ts, { zone: timezone, locale: "en-US" })
+	const startHour = DateTime.fromMillis(span.start.ts, { zone: timezone, locale: accountStore.activeLocale })
 		.startOf("hour")
 	;
 	const end = span.end.ts;
@@ -308,11 +310,11 @@ function* cutSpansByHours(span: Span, timezone: string): Generator<Span> {
 
 function padStretch(stretch: Stretch, timezone: string): Stretch {
 	// Pad by one hour and extend it to the nearest whole hour.
-	let start = DateTime.fromMillis(stretch.start, { zone: timezone, locale: "en-US" })
+	let start = DateTime.fromMillis(stretch.start, { zone: timezone, locale: accountStore.activeLocale })
 		.minus(oneHourMs)
 		.startOf("hour")
 	;
-	let end = DateTime.fromMillis(stretch.end, { zone: timezone, locale: "en-US" })
+	let end = DateTime.fromMillis(stretch.end, { zone: timezone, locale: accountStore.activeLocale })
 		.plus(2 * oneHourMs - 1)
 		.startOf("hour")
 	;
@@ -339,24 +341,24 @@ function padStretch(stretch: Stretch, timezone: string): Stretch {
 
 function tableElementsFromStretches(
 	stretches: Iterable<Stretch>,
-	events: Extract<ApiScheduleEvent, { deleted?: false }>[],
-	locations: Extract<ApiScheduleLocation, { deleted?: false }>[],
-	shifts: Extract<ApiScheduleShift, { deleted?: false }>[],
-	roles: Extract<ApiScheduleRole, { deleted?: false }>[],
+	events: Map<Id, ClientScheduleEvent>,
+	locations: Map<Id, ClientScheduleLocation>,
+	shifts: Map<Id, ClientScheduleShift>,
+	roles: Map<Id, ClientScheduleRole>,
 	timezone: string,
 ) {
 	type Col = { minutes?: number };
 	type DayHead = { span: number, content?: string }
 	type HourHead = { span: number, content?: string }
-	type LocationCell = { span: number, slots: Set<ApiScheduleEventSlot>, title: string, crew?: boolean }
-	type RoleCell = { span: number, slots: Set<ApiScheduleShiftSlot>, title: string };
+	type LocationCell = { span: number, slots: Set<ClientScheduleEventSlot>, title: string, crew?: boolean }
+	type RoleCell = { span: number, slots: Set<ClientScheduleShiftSlot>, title: string };
 	const columnGroups: { className?: string, cols: Col[] }[] = [];
 	const dayHeaders: DayHead[] = [];
 	const hourHeaders: HourHead[]= [];
-	const locationRows = new Map<number, LocationCell[]>(locations.map(location => [location.id, []]));
-	const roleRows = new Map<number, RoleCell[]>(roles.map(role => [role.id, []]));
-	const eventBySlotId = new Map(events.flatMap(event => event.slots.map(slot => [slot.id, event])));
-	const shiftBySlotId = new Map(shifts?.flatMap?.(shift => shift.slots.map(slot =>[slot.id, shift])))
+	const locationRows = new Map<number, LocationCell[]>([...locations.keys()].map(id => [id, []]));
+	const roleRows = new Map<number, RoleCell[]>([...roles.keys()].map(id => [id, []]));
+	const eventBySlotId = new Map([...events.values()].flatMap(event => [...event.slots.values()].map(slot => [slot.id, event])));
+	const shiftBySlotId = new Map([...shifts.values()].flatMap?.(shift => [...shift.slots.values()].map(slot =>[slot.id, shift])));
 	let totalColumns = 0;
 
 	function startColumnGroup(className?: string) {
@@ -368,7 +370,7 @@ function tableElementsFromStretches(
 	function startHour(content?: string) {
 		hourHeaders.push({ span: 0, content })
 	}
-	function startLocation(id: number, slots = new Set<ApiScheduleEventSlot>()) {
+	function startLocation(id: number, slots = new Set<ClientScheduleEventSlot>()) {
 		const rows = locationRows.get(id)!;
 		if (rows.length) {
 			const row = rows[rows.length - 1];
@@ -377,7 +379,7 @@ function tableElementsFromStretches(
 		}
 		rows.push({ span: 0, slots, title: "" });
 	}
-	function startRole(id: number, slots = new Set<ApiScheduleShiftSlot>()) {
+	function startRole(id: number, slots = new Set<ClientScheduleShiftSlot>()) {
 		const rows = roleRows.get(id)!;
 		if (rows.length) {
 			const row = rows[rows.length - 1];
@@ -390,11 +392,11 @@ function tableElementsFromStretches(
 		columnGroups[columnGroups.length - 1].cols.push({ minutes })
 		dayHeaders[dayHeaders.length - 1].span += 1;
 		hourHeaders[hourHeaders.length - 1].span += 1;
-		for(const location of locations) {
+		for(const location of locations.values()) {
 			const row = locationRows.get(location.id)!;
 			row[row.length - 1].span += 1;
 		}
-		for(const role of roles ?? []) {
+		for(const role of roles.values()) {
 			const row = roleRows.get(role.id)!;
 			row[row.length - 1].span += 1;
 		}
@@ -403,16 +405,16 @@ function tableElementsFromStretches(
 	let first = true;
 	for (let stretch of stretches) {
 		stretch = padStretch(stretch, timezone);
-		const startDate = DateTime.fromMillis(stretch.start, { zone: timezone, locale: "en-US" });
+		const startDate = DateTime.fromMillis(stretch.start, { zone: timezone, locale: accountStore.activeLocale });
 		if (first) {
 			first = false;
 			startColumnGroup();
 			startDay(startDate.toFormat("yyyy-LL-dd"));
 			startHour(startDate.toFormat("HH:mm"));
-			for(const location of locations) {
+			for(const location of locations.values()) {
 				startLocation(location.id);
 			}
-			for(const role of roles ?? []) {
+			for(const role of roles.values()) {
 				startRole(role.id);
 			}
 		} else {
@@ -423,10 +425,10 @@ function tableElementsFromStretches(
 			if (!sameDay)
 				startDay();
 			startHour("break");
-			for(const location of locations) {
+			for(const location of locations.values()) {
 				startLocation(location.id);
 			}
-			for(const role of roles ?? []) {
+			for(const role of roles.values()) {
 				startRole(role.id);
 			}
 			pushColumn();
@@ -435,10 +437,10 @@ function tableElementsFromStretches(
 			if (!sameDay)
 				startDay(dayName);
 			startHour(startDate.toFormat("HH:mm"));
-			for(const location of locations) {
+			for(const location of locations.values()) {
 				startLocation(location.id);
 			}
-			for(const role of roles ?? []) {
+			for(const role of roles.values()) {
 				startRole(role.id);
 			}
 		}
@@ -448,7 +450,7 @@ function tableElementsFromStretches(
 				const end = cutSpan.end.ts;
 				const durationMs = end - cutSpan.start.ts;
 
-				for (const location of locations) {
+				for (const location of locations.values()) {
 					const rows = locationRows.get(location.id)!;
 					const row = rows[rows.length - 1];
 					const slots = cutSpan.locations.get(location.id) ?? new Set();
@@ -456,7 +458,7 @@ function tableElementsFromStretches(
 						startLocation(location.id, slots);
 					}
 				}
-				for (const role of roles ?? []) {
+				for (const role of roles.values()) {
 					const rows = roleRows.get(role.id)!;
 					const row = rows[rows.length - 1];
 					const slots = cutSpan.roles.get(role.id) ?? new Set();
@@ -466,16 +468,16 @@ function tableElementsFromStretches(
 				}
 
 				pushColumn(durationMs / oneMinMs);
-				const endDate = DateTime.fromMillis(end, { zone: timezone, locale: "en-US" });
+				const endDate = DateTime.fromMillis(end, { zone: timezone, locale: accountStore.activeLocale });
 				if (end === endDate.startOf("day").toMillis()) {
 					startDay(
-						DateTime.fromMillis(cutSpan.end.ts, { zone: timezone, locale: "en-US" })
+						DateTime.fromMillis(cutSpan.end.ts, { zone: timezone, locale: accountStore.activeLocale })
 							.toFormat("yyyy-LL-dd")
 					);
 				}
 				if (end === endDate.startOf("hour").toMillis()) {
 					startHour(
-						DateTime.fromMillis(cutSpan.end.ts, { zone: timezone, locale: "en-US" })
+						DateTime.fromMillis(cutSpan.end.ts, { zone: timezone, locale: accountStore.activeLocale })
 							.toFormat("HH:mm")
 					);
 				}
@@ -501,30 +503,24 @@ function tableElementsFromStretches(
 }
 
 const props = defineProps<{
-	schedule: ApiSchedule,
-	eventSlotFilter?: (slot: ApiScheduleEventSlot) => boolean,
-	shiftSlotFilter?: (slot: ApiScheduleShiftSlot) => boolean,
+	schedule: ClientSchedule,
+	eventSlotFilter?: (slot: ClientScheduleEventSlot) => boolean,
+	shiftSlotFilter?: (slot: ClientScheduleShiftSlot) => boolean,
 }>();
 const schedule = computed(() => props.schedule);
 const junctions = computed(() => {
-	if (schedule.value.deleted) {
-		throw Error("Unhandled deleted schedule");
-	}
 	return junctionsFromEdges([
-		...edgesFromEvents(schedule.value.events?.filter(e => !e.deleted) ?? [], props.eventSlotFilter),
-		...edgesFromShifts(schedule.value.shifts?.filter(s => !s.deleted) ?? [], props.shiftSlotFilter),
+		...edgesFromEvents(schedule.value.events.values(), props.eventSlotFilter),
+		...edgesFromShifts(schedule.value.shifts.values(), props.shiftSlotFilter),
 	])
 });
 const stretches = computed(() => {
-	if (schedule.value.deleted) {
-		throw Error("Unhandled deleted schedule");
-	}
 	return [
 		...stretchesFromSpans(
 			spansFromJunctions(
 				junctions.value,
-				schedule.value.locations?.filter(l => !l.deleted) ?? [],
-				schedule.value.roles?.filter(r => !r.deleted) ?? [],
+				schedule.value.locations,
+				schedule.value.roles,
 			),
 			oneHourMs * 5
 		)
@@ -538,15 +534,12 @@ const timezone = computed({
 });
 
 const elements = computed(() => {
-	if (schedule.value.deleted) {
-		throw Error("Unhandled deleted schedule");
-	}
 	return tableElementsFromStretches(
 		stretches.value,
-		schedule.value.events?.filter(e => !e.deleted) ?? [],
-		schedule.value.locations?.filter(l => !l.deleted) ?? [],
-		schedule.value.shifts?.filter(s => !s.deleted) ?? [],
-		schedule.value.roles?.filter(r => !r.deleted) ?? [],
+		schedule.value.events,
+		schedule.value.locations,
+		schedule.value.shifts,
+		schedule.value.roles,
 		accountStore.activeTimezone
 	);
 });
diff --git a/pages/edit.vue b/pages/edit.vue
index 3c81a19..f32b9d4 100644
--- a/pages/edit.vue
+++ b/pages/edit.vue
@@ -1,11 +1,5 @@
 <template>
-	<main v-if="schedule.deleted">
-		<h1>Error</h1>
-		<p>
-			Schedule has been deleted.
-		</p>
-	</main>
-	<main v-else>
+	<main>
 		<h1>Edit</h1>
 		<label>
 			Crew Filter:
@@ -37,14 +31,15 @@
 					:selected="locationFilter === undefined"
 				>&lt;All locations&gt;</option>
 				<option
-					v-for="location in schedule.locations?.filter(l => !l.deleted)"
+					v-for="location in schedule.locations.values()"
 					:key="location.id"
 					:value="location.id"
+					:disabled="location.deleted"
 					:selected="locationFilter === location.id"
 				>{{ location.name }}</option>
 			</select>
 		</label>
-		<ScheduleTable :edit="true" :location="locationFilter" :eventSlotFilter :shiftSlotFilter />
+		<ScheduleTable :edit="true" :locationId="locationFilter" :eventSlotFilter :shiftSlotFilter />
 		<h2>Events</h2>
 		<EventsTable :edit="true" />
 		<h2>Roles</h2>
@@ -60,9 +55,10 @@
 					:selected="roleFilter === undefined"
 				>&lt;All roles&gt;</option>
 				<option
-					v-for="role in schedule.roles?.filter(r => !r.deleted)"
+					v-for="role in schedule.roles.values()"
 					:key="role.id"
 					:value="role.id"
+					:disabled="role.deleted"
 					:selected="roleFilter === role.id"
 				>{{ role.name }}</option>
 			</select>
@@ -70,12 +66,17 @@
 		<ShiftScheduleTable :edit="true" :roleId="roleFilter" :eventSlotFilter :shiftSlotFilter />
 		<h2>Shifts</h2>
 		<ShiftsTable :edit="true" :roleId="roleFilter" />
+		<p v-if="schedule.modified">
+			Changes are not saved yet.
+			<button
+				type="button"
+				@click="saveChanges"
+			>Save Changes</button>
+		</p>
 	</main>
 </template>
 
 <script lang="ts" setup>
-import type { ApiScheduleEventSlot, ApiScheduleShiftSlot } from '~/shared/types/api';
-
 definePageMeta({
 	middleware: ["authenticated"],
 	allowedAccountTypes: ["crew", "admin"],
@@ -101,14 +102,14 @@ const eventSlotFilter = computed(() => {
 		return () => true;
 	}
 	const cid = parseInt(crewFilter.value);
-	return (slot: ApiScheduleEventSlot) => slot.assigned?.some(id => id === cid) || false;
+	return (slot: ClientScheduleEventSlot) => slot.assigned.has(cid);
 });
 const shiftSlotFilter = computed(() => {
 	if (crewFilter.value === undefined || !accountStore.valid) {
 		return () => true;
 	}
 	const cid = parseInt(crewFilter.value);
-	return (slot: ApiScheduleShiftSlot) => slot.assigned?.some(id => id === cid) || false;
+	return (slot: ClientScheduleShiftSlot) => slot.assigned.has(cid);
 });
 
 const locationFilter = computed({
@@ -132,4 +133,16 @@ const roleFilter = computed({
 		},
 	}),
 });
+
+async function saveChanges() {
+	try {
+		await $fetch("/api/schedule", {
+			method: "PATCH",
+			body: schedule.value.toApi(true),
+		});
+	} catch (err: any) {
+		console.error(err);
+		alert(err?.data?.message ?? err.message);
+	}
+}
 </script>
diff --git a/pages/schedule.vue b/pages/schedule.vue
index 843ceb7..f2ffae8 100644
--- a/pages/schedule.vue
+++ b/pages/schedule.vue
@@ -1,11 +1,5 @@
 <template>
-	<main v-if="schedule.deleted">
-		<h1>Error</h1>
-		<p>
-			Schedule has been deleted.
-		</p>
-	</main>
-	<main v-else>
+	<main>
 		<h1>Schedule & Events</h1>
 		<p>
 			Study carefully, we only hold these events once a year.
@@ -48,10 +42,10 @@
 		</label>
 		<Timetable :schedule :eventSlotFilter :shiftSlotFilter />
 		<h2>Events</h2>
-		<EventCard v-for="event in schedule.events?.filter(e => !e.deleted && e.slots.some(eventSlotFilter))" :event/>
+		<EventCard v-for="event in [...schedule.events.values()].filter(e => !e.deleted && [...e.slots.values()].some(eventSlotFilter))" :event/>
 		<h2>Locations</h2>
 		<ul>
-			<li v-for="location in schedule.locations?.filter(l => !l.deleted)" :key="location.id">
+			<li v-for="location in schedule.locations.values()" :key="location.id">
 				<h3>{{ location.name }}</h3>
 				{{ location.description ?? "No description provided" }}
 			</li>
@@ -60,8 +54,6 @@
 </template>
 
 <script setup lang="ts">
-import type { ApiScheduleShiftSlot, ApiScheduleEventSlot } from '~/shared/types/api';
-
 const accountStore = useAccountStore();
 const { data: accounts } = await useAccounts();
 const schedule = await useSchedule();
@@ -85,21 +77,21 @@ const eventSlotFilter = computed(() => {
 	const aid = accountStore.id;
 	if (filter.value === "my-schedule") {
 		const slotIds = new Set(accountStore.interestedEventSlotIds);
-		for (const event of schedule.value.events ?? []) {
+		for (const event of schedule.value.events.values()) {
 			if (!event.deleted && accountStore.interestedEventIds.has(event.id)) {
-				for (const slot of event.slots) {
+				for (const slot of event.slots.values()) {
 					slotIds.add(slot.id);
 				}
 			}
 		}
-		return (slot: ApiScheduleEventSlot) => slotIds.has(slot.id) || slot.assigned?.some(id => id === aid) || false;
+		return (slot: ClientScheduleEventSlot) => slotIds.has(slot.id) || slot.assigned.has(aid!) || false;
 	}
 	if (filter.value === "assigned") {
-		return (slot: ApiScheduleEventSlot) => slot.assigned?.some(id => id === aid) || false;
+		return (slot: ClientScheduleEventSlot) => slot.assigned.has(aid!) || false;
 	}
 	if (filter.value.startsWith("crew-")) {
 		const cid = parseInt(filter.value.slice(5));
-		return (slot: ApiScheduleEventSlot) => slot.assigned?.some(id => id === cid) || false;
+		return (slot: ClientScheduleEventSlot) => slot.assigned.has(cid) || false;
 	}
 	return () => false;
 });
@@ -109,11 +101,11 @@ const shiftSlotFilter = computed(() => {
 	}
 	if (filter.value === "my-schedule" || filter.value === "assigned") {
 		const aid = accountStore.id;
-		return (slot: ApiScheduleShiftSlot) => slot.assigned?.some(id => id === aid) || false;
+		return (slot: ClientScheduleShiftSlot) => slot.assigned.has(aid!) || false;
 	}
 	if (filter.value.startsWith("crew-")) {
 		const cid = parseInt(filter.value.slice(5));
-		return (slot: ApiScheduleShiftSlot) => slot.assigned?.some(id => id === cid) || false;
+		return (slot: ClientScheduleShiftSlot) => slot.assigned.has(cid) || false;
 	}
 	return () => false;
 });
diff --git a/shared/utils/functions.ts b/shared/utils/functions.ts
index 6aa726b..c4bc847 100644
--- a/shared/utils/functions.ts
+++ b/shared/utils/functions.ts
@@ -7,7 +7,9 @@ export function* enumerate<T>(iterable: Iterable<T>) {
 }
 
 /** Filters an iterable based on the passed predicate function */
-export function* filter<T, S extends T>(it: Iterable<T>, predicate: (value: T) => value is S) {
+export function filter<T, S extends T>(it: Iterable<T>, predicate: (value: T) => value is S): Generator<S, void, unknown>;
+export function filter<T>(it: Iterable<T>, predicate: (value: T) => unknown): Generator<T, void, unknown>;
+export function* filter(it: Iterable<unknown>, predicate: (value: unknown) => unknown): Generator<unknown, void, unknown> {
 	for (const value of it) {
 		if (predicate(value)) {
 			yield value;
diff --git a/shared/utils/luxon.ts b/shared/utils/luxon.ts
index 2c18696..84b875c 100644
--- a/shared/utils/luxon.ts
+++ b/shared/utils/luxon.ts
@@ -1,5 +1,5 @@
 // Wrapper around Luxon to make sure the throwOnInvalid option is set
-import { DateTime, FixedOffsetZone, Info, Settings, Zone } from "luxon";
+import { DateTime, Duration, FixedOffsetZone, Info, Settings, Zone } from "luxon";
 
 Settings.throwOnInvalid = true;
 declare module 'luxon' {
@@ -8,4 +8,4 @@ declare module 'luxon' {
 	}
 }
 
-export { DateTime, FixedOffsetZone, Info, Zone }
+export { DateTime, Duration, FixedOffsetZone, Info, Zone }
diff --git a/stores/schedules.ts b/stores/schedules.ts
index a29cd2d..0270050 100644
--- a/stores/schedules.ts
+++ b/stores/schedules.ts
@@ -1,17 +1,17 @@
-import type { ApiSchedule } from "~/shared/types/api";
-import { applyUpdatesToArray } from "~/shared/utils/update";
+import { Info } from "~/shared/utils/luxon";
 
 interface SyncOperation {
 	controller: AbortController,
-	promise: Promise<Ref<ApiSchedule>>,
+	promise: Promise<Ref<ClientSchedule>>,
 }
 
 export const useSchedulesStore = defineStore("schedules", () => {
 	const sessionStore = useSessionStore();
+	const accountStore = useAccountStore();
 
 	const state = {
 		activeScheduleId: ref<number | undefined>(111),
-		schedules: ref<Map<number, Ref<ApiSchedule>>>(new Map()),
+		schedules: ref<Map<number, Ref<ClientSchedule>>>(new Map()),
 		pendingSyncs: ref<Map<number, SyncOperation>>(new Map()),
 	};
 
@@ -44,9 +44,15 @@ export const useSchedulesStore = defineStore("schedules", () => {
 			console.log("return new fetch");
 			const requestFetch = useRequestFetch();
 			const controller = new AbortController();
+			const zone = Info.normalizeZone(accountStore.activeTimezone);
+			const locale = accountStore.activeLocale;
 			const promise = (async () => {
 				try {
-					const schedule = ref(await requestFetch("/api/schedule", { signal: controller.signal }));
+					const apiSchedule = await requestFetch("/api/schedule", { signal: controller.signal });
+					if (apiSchedule.deleted) {
+						throw new Error("Unexpecetd deleted schedule");
+					}
+					const schedule = ref(ClientSchedule.fromApi(apiSchedule, { zone, locale })) as Ref<ClientSchedule>;
 					state.schedules.value.set(id, schedule);
 					state.pendingSyncs.value.delete(id);
 					return schedule;
@@ -90,18 +96,9 @@ export const useSchedulesStore = defineStore("schedules", () => {
 		const update = event.data.data;
 		// XXX validate updatedFrom/updatedAt here
 		if (schedule && !schedule.value.deleted && !update.deleted) {
-			if (update.locations) {
-				applyUpdatesToArray(update.locations, schedule.value.locations = schedule.value.locations ?? []);
-			}
-			if (update.events) {
-				applyUpdatesToArray(update.events, schedule.value.events = schedule.value.events ?? []);
-			}
-			if (update.roles) {
-				applyUpdatesToArray(update.roles, schedule.value.roles = schedule.value.roles ?? []);
-			}
-			if (update.shifts) {
-				applyUpdatesToArray(update.shifts, schedule.value.shifts = schedule.value.shifts ?? []);
-			}
+			const zone = Info.normalizeZone(accountStore.activeTimezone);
+			const locale = accountStore.activeLocale;
+			schedule.value.applyUpdate(update, { zone, locale })
 		}
 	});
 
diff --git a/utils/client-schedule.ts b/utils/client-schedule.ts
index 5dac816..34d30e5 100644
--- a/utils/client-schedule.ts
+++ b/utils/client-schedule.ts
@@ -457,6 +457,7 @@ export class ClientSchedule extends ClientEntity {
 	shiftSlots: Map<Id, ClientScheduleShiftSlot>;
 	eventSlots: Map<Id, ClientScheduleEventSlot>;
 	modified: boolean;
+	nextClientId = -1;
 
 	constructor(
 		id: 111,
@@ -478,6 +479,14 @@ export class ClientSchedule extends ClientEntity {
 		this.shiftSlots = idMap([...shifts.values()].flatMap(shift => [...shift.slots.values()]));
 		this.originalShiftSlots = new Map(this.shiftSlots);
 		this.modified = false;
+		// XXX For now the prototype server is assigning client ids instead of remapping them.
+		this.nextClientId = Math.min(
+			0,
+			...locations.keys(),
+			...events.keys(),
+			...roles.keys(),
+			...shifts.keys(),
+		) - 1;
 	}
 
 	equals(other: ClientSchedule): boolean {