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 {