fix: reactivity bug with ListReservationsPage

feat: add realtime updates of interval and reservation
feat: rudimentary realtime update of intervals
2024-06-21 23:44:34 -04:00 · 2024-06-21 23:13:30 -04:00 · 2024-06-20 23:36:05 -04:00 · 2024-06-20 23:14:20 -04:00 · 2024-06-20 21:52:00 -04:00 · 2024-06-19 23:02:01 -04:00
52 changed files with 5725 additions and 2294 deletions
--- a/.env.production
+++ b/.env.production
@@ -1,2 +0,0 @@
-APPWRITE_API_ENDPOINT='https://appwrite.oys.undock.ca/v1'
-APPWRITE_API_PROJECT='bab'
--- a/.gitea/workflows/build.yaml
+++ b/.gitea/workflows/build.yaml
@@ -3,7 +3,7 @@ run-name: ${{ gitea.actor }} is building a BAB App artifact 🚀
 on:
  push:
    branches:
-      - main
+      - devel

 jobs:
  build:
--- a/.gitignore
+++ b/.gitignore
@@ -34,4 +34,4 @@ yarn-error.log*
 *.sln

 # local .env files
-.env.local*
+.env*
--- a/README.md
+++ b/README.md
@@ -41,3 +41,7 @@ quasar build
 ### Customize the configuration

 See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-vite/quasar-config-js).
+
+### TODO
+
+https://github.com/semantic-release/semantic-release
--- a/nohup.out
+++ b/nohup.out
@@ -0,0 +1,36 @@
+2024-06-06 07:42:15,841 - vorta.i18n - DEBUG - Loading translation failed for ['en-CA', 'en-Latn-CA'].
+QObject::connect: No such signal QPlatformNativeInterface::systemTrayWindowChanged(QScreen*)
+2024-06-06 07:42:15,884 - root - DEBUG - Not a private SSH key file: authorized_keys
+2024-06-06 07:42:15,885 - root - DEBUG - Not a private SSH key file: github_rsa.pub_bak-github
+2024-06-06 07:42:15,886 - root - DEBUG - Not a private SSH key file: other_keys.seahorse
+2024-06-06 07:42:16,077 - root - INFO - Using NetworkManagerMonitor NetworkStatusMonitor implementation.
+Requested decoration  "adwaita"  not found, falling back to default
+qt.qpa.wayland: Wayland does not support QWindow::requestActivate()
+2024-06-06 07:42:16,209 - vorta.borg.jobs_manager - DEBUG - Add job for site default
+2024-06-06 07:42:16,210 - vorta.borg.jobs_manager - DEBUG - Start job on site: default
+2024-06-06 07:42:16,237 - vorta.borg.borg_job - INFO - Running command /usr/bin/borg --version
+2024-06-06 07:42:20,564 - vorta.borg.jobs_manager - DEBUG - Finish job for site: default
+2024-06-06 07:42:20,565 - vorta.borg.jobs_manager - DEBUG - No more jobs for site: default
+2024-06-06 07:42:20,566 - vorta.scheduler - DEBUG - Refreshing all scheduler timers
+2024-06-06 07:42:20,568 - vorta.scheduler - DEBUG - Nothing scheduled for profile 1 because of unset repo.
+qt.qpa.wayland: Wayland does not support QWindow::requestActivate()
+2024-06-06 07:42:23,190 - root - DEBUG - Not a private SSH key file: authorized_keys
+2024-06-06 07:42:23,191 - root - DEBUG - Not a private SSH key file: github_rsa.pub_bak-github
+2024-06-06 07:42:23,191 - root - DEBUG - Not a private SSH key file: other_keys.seahorse
+2024-06-06 07:42:23,204 - vorta.keyring.abc - DEBUG - Only available on macOS
+2024-06-06 07:42:23,244 - asyncio - DEBUG - Using selector: EpollSelector
+2024-06-06 07:42:23,245 - vorta.keyring.abc - DEBUG - Using VortaSecretStorageKeyring
+2024-06-06 07:49:53,786 - vorta.keyring.abc - DEBUG - Only available on macOS
+2024-06-06 07:49:53,788 - asyncio - DEBUG - Using selector: EpollSelector
+2024-06-06 07:49:53,788 - vorta.keyring.abc - DEBUG - Using VortaSecretStorageKeyring
+2024-06-06 07:49:53,789 - asyncio - DEBUG - Using selector: EpollSelector
+2024-06-06 07:49:53,790 - vorta.keyring.secretstorage - DEBUG - Found 0 passwords matching repo URL.
+qt.qpa.wayland: Wayland does not support QWindow::requestActivate()
+2024-06-06 07:50:10,009 - vorta.keyring.abc - DEBUG - Only available on macOS
+2024-06-06 07:50:10,011 - asyncio - DEBUG - Using selector: EpollSelector
+2024-06-06 07:50:10,012 - vorta.keyring.abc - DEBUG - Using VortaSecretStorageKeyring
+2024-06-06 07:50:10,012 - vorta.borg.borg_job - DEBUG - Using VortaSecretStorageKeyring keyring to store passwords.
+2024-06-06 07:50:10,013 - asyncio - DEBUG - Using selector: EpollSelector
+2024-06-06 07:50:10,013 - vorta.keyring.secretstorage - DEBUG - Found 0 passwords matching repo URL.
+2024-06-06 07:50:10,013 - vorta.borg.borg_job - DEBUG - Password not found in primary keyring. Falling back to VortaDBKeyring.
+2024-06-06 07:50:10,029 - vorta.borg.borg_job - INFO - Running command /usr/bin/borg info --info --json --log-json ssh://borg@borg.toal.ca:12022/./ptoal-linux
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "oys_bab",
-  "version": "0.0.2",
+  "version": "0.6.2",
  "description": "Manage a Borrow a Boat program for a Yacht Club",
  "productName": "OYS Borrow a Boat",
  "author": "Patrick Toal <ptoal@takeflight.ca>",
@@ -26,6 +26,9 @@
  },
  "devDependencies": {
    "@quasar/app-vite": "^1.9.1",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/github": "^10.0.6",
+    "@semantic-release/npm": "^12.0.1",
    "@types/node": "^12.20.21",
    "@typescript-eslint/eslint-plugin": "^5.10.0",
    "@typescript-eslint/parser": "^5.10.0",
@@ -34,8 +37,10 @@
    "eslint": "^8.10.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-vue": "^9.0.0",
+    "git-commit-info": "^2.0.2",
    "prettier": "^2.5.1",
    "quasar": "^2.16.0",
+    "semantic-release": "^24.0.0",
    "typescript": "~5.3.0",
    "vite-plugin-checker": "^0.6.4",
    "vue-tsc": "^1.8.22",
--- a/public/tmpimg/projectX.jpg
+++ b/public/tmpimg/projectX.jpg
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -9,8 +9,10 @@
 // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js

 const { configure } = require('quasar/wrappers');
+const packageJson = require('./package.json');
+const gitCommitInfo = require('git-commit-info');

-module.exports = configure(function (/* ctx */) {
+module.exports = configure(function ({ dev }) {
  return {
    eslint: {
      // fix: true,
@@ -48,7 +50,11 @@ module.exports = configure(function (/* ctx */) {

    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
    build: {
-      env: require('dotenv').config().parsed,
+      env: {
+        VUE_APP_VERSION: dev
+          ? 'dev-' + gitCommitInfo().shortHash
+          : packageJson.version,
+      },
      target: {
        browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
        node: 'node16',
@@ -102,12 +108,19 @@ module.exports = configure(function (/* ctx */) {
          secure: false,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
-        '/function': {
-          target: 'https://6640382951eacb568371.f.appwrite.toal.ca/',
+        '/api/v1/realtime': {
+          target: 'wss://apidev.bab.toal.ca',
          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, ''),
          secure: false,
-          rewrite: (path) => path.replace(/^\/function/, ''),
+          ws: true,
        },
+        // '/function': {
+        //   target: 'https://6640382951eacb568371.f.appwrite.toal.ca/',
+        //   changeOrigin: true,
+        //   secure: false,
+        //   rewrite: (path) => path.replace(/^\/function/, ''),
+        // },
      },
      // For reverse-proxying via haproxy
      // hmr: {
--- a/src-pwa/manifest.json
+++ b/src-pwa/manifest.json
@@ -1,5 +1,5 @@
 {
-  "orientation": "portrait",
+  "orientation": "natural",
  "background_color": "#ffffff",
  "theme_color": "#027be3",
  "icons": [
--- a/src-pwa/register-service-worker.ts
+++ b/src-pwa/register-service-worker.ts
@@ -9,33 +9,35 @@ register(process.env.SERVICE_WORKER_FILE, {
  // to ServiceWorkerContainer.register()
  // https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register#Parameter

-  // registrationOptions: { scope: './' },
+  registrationOptions: { scope: './' },

-  ready (/* registration */) {
-    // console.log('Service worker is active.')
+  ready(/* registration */) {
+    console.log('Service worker is active.');
  },

-  registered (/* registration */) {
-    // console.log('Service worker has been registered.')
+  registered(/* registration */) {
+    console.log('Service worker has been registered.');
  },

-  cached (/* registration */) {
-    // console.log('Content has been cached for offline use.')
+  cached(/* registration */) {
+    console.log('Content has been cached for offline use.');
  },

-  updatefound (/* registration */) {
-    // console.log('New content is downloading.')
+  updatefound(/* registration */) {
+    console.log('New content is downloading.');
  },

-  updated (/* registration */) {
-    // console.log('New content is available; please refresh.')
+  updated(/* registration */) {
+    console.log('New content is available; please refresh.');
  },

-  offline () {
-    // console.log('No internet connection found. App is running in offline mode.')
+  offline() {
+    console.log(
+      'No internet connection found. App is running in offline mode.'
+    );
  },

-  error (/* err */) {
-    // console.error('Error during service worker registration:', err)
+  error(err) {
+    console.error('Error during service worker registration:', err);
  },
 });
--- a/src/boot/appwrite.ts
+++ b/src/boot/appwrite.ts
@@ -14,56 +14,72 @@ import type { Router } from 'vue-router';

 const client = new Client();

-let APPWRITE_API_ENDPOINT, APPWRITE_API_PROJECT;
+const API_ENDPOINT = import.meta.env.VITE_APPWRITE_API_ENDPOINT;
+const API_PROJECT = import.meta.env.VITE_APPWRITE_API_PROJECT;

-// Private self-hosted appwrite
-if (process.env.APPWRITE_API_ENDPOINT && process.env.APPWRITE_API_PROJECT) {
-  APPWRITE_API_ENDPOINT = process.env.APPWRITE_API_ENDPOINT;
-  APPWRITE_API_PROJECT = process.env.APPWRITE_API_PROJECT;
-} else if (process.env.DEV) {
-  APPWRITE_API_ENDPOINT = 'http://localhost:4000/api/v1';
-  APPWRITE_API_PROJECT = '65ede55a213134f2b688';
+if (API_ENDPOINT && API_PROJECT) {
+  client.setEndpoint(API_ENDPOINT).setProject(API_PROJECT);
 } else {
-  APPWRITE_API_ENDPOINT = 'https://appwrite.oys.undock.ca/v1';
-  APPWRITE_API_PROJECT = 'bab';
+  console.error(
+    'Must configure VITE_APPWRITE_API_ENDPOINT and VITE_APPWRITE_API_PROJECT'
+  );
 }
-client.setEndpoint(APPWRITE_API_ENDPOINT).setProject(APPWRITE_API_PROJECT);

-const pwresetUrl = process.env.DEV
-  ? 'http://localhost:4000/pwreset'
-  : 'https://oys.undock.ca/pwreset';
+type AppwriteIDConfig = {
+  databaseId: string;
+  collection: {
+    boat: string;
+    reservation: string;
+    skillTags: string;
+    task: string;
+    taskTags: string;
+    interval: string;
+    intervalTemplate: string;
+  };
+  function: {
+    userinfo: string;
+  };
+};

-const AppwriteIds = process.env.DEV
-  ? {
-      databaseId: '65ee1cbf9c2493faf15f',
-      collection: {
-        boat: '66341910003e287cd71c',
-        reservation: '663f8847000b8f5e29bb',
-        skillTags: '66072582a74d94a4bd01',
-        task: '65ee1cd5b550023fae4f',
-        taskTags: '65ee21d72d5c8007c34c',
-        interval: '66361869002883fb4c4b',
-        intervalTemplate: '66361f480007fdd639af',
-      },
-      function: {
-        userinfo: 'userinfo',
-      },
-    }
-  : {
-      databaseId: 'bab_prod',
-      collection: {
-        boat: 'boat',
-        reservation: 'reservation',
-        skillTags: 'skillTags',
-        task: 'task',
-        taskTags: 'taskTags',
-        interval: 'interval',
-        intervalTemplate: 'intervalTemplate',
-      },
-      function: {
-        userinfo: '664038294b5473ef0c8d',
-      },
-    };
+let AppwriteIds = <AppwriteIDConfig>{};
+
+console.log(API_ENDPOINT);
+if (
+  API_ENDPOINT === 'https://apidev.bab.toal.ca/v1' ||
+  API_ENDPOINT === 'http://localhost:4000/api/v1'
+) {
+  AppwriteIds = {
+    databaseId: '65ee1cbf9c2493faf15f',
+    collection: {
+      boat: 'boat',
+      reservation: 'reservation',
+      skillTags: 'skillTags',
+      task: 'task',
+      taskTags: 'taskTags',
+      interval: 'interval',
+      intervalTemplate: 'intervalTemplate',
+    },
+    function: {
+      userinfo: 'userinfo',
+    },
+  };
+} else if (API_ENDPOINT === 'https://appwrite.oys.undock.ca/v1') {
+  AppwriteIds = {
+    databaseId: 'bab_prod',
+    collection: {
+      boat: 'boat',
+      reservation: 'reservation',
+      skillTags: 'skillTags',
+      task: 'task',
+      taskTags: 'taskTags',
+      interval: 'interval',
+      intervalTemplate: 'intervalTemplate',
+    },
+    function: {
+      userinfo: '664038294b5473ef0c8d',
+    },
+  };
+}

 const account = new Account(client);
 const databases = new Databases(client);
@@ -118,9 +134,9 @@ async function login(email: string, password: string) {
      spinner: false,
      icon: 'check_circle',
    });
-    console.log('Redirecting to index page');
    appRouter.replace({ name: 'index' });
  } catch (error: unknown) {
+    console.log(error);
    if (error instanceof AppwriteException) {
      if (error.type === 'user_session_already_exists') {
        appRouter.replace({ name: 'index' });
@@ -148,7 +164,7 @@ async function login(email: string, password: string) {
 }

 async function resetPassword(email: string) {
-  await account.createRecovery(email, pwresetUrl);
+  await account.createRecovery(email, window.location.origin + '/pwreset');
 }

 export {
--- a/src/components/BoatReservationComponent.vue
+++ b/src/components/BoatReservationComponent.vue
@@ -0,0 +1,285 @@
+<template>
+  <div class="q-pa-xs row q-gutter-xs">
+    <q-card
+      flat
+      class="col-lg-4 col-md-6 col-sm-8 col-xs-12">
+      <q-card-section>
+        <div class="text-h5 q-mt-none q-mb-xs">
+          {{ reservation ? 'Modify Booking' : 'New Booking' }}
+        </div>
+        <div class="text-caption text-grey-8">for: {{ bookingName }}</div>
+      </q-card-section>
+      <q-list class="q-px-xs">
+        <q-item
+          class="q-pa-none"
+          clickable
+          @click="boatSelect = true">
+          <q-card
+            v-if="boat"
+            class="col-12">
+            <q-card-section>
+              <q-img
+                :src="boat.imgSrc"
+                :fit="'scale-down'">
+                <div class="row absolute-top">
+                  <div class="col text-h7 text-left">
+                    {{ boat.name }}
+                  </div>
+                  <div class="col text-right text-caption">
+                    {{ boat.class }}
+                  </div>
+                </div>
+              </q-img>
+            </q-card-section>
+            <q-separator />
+            <q-card-section horizontal>
+              <q-card-section class="col-9">
+                <q-list
+                  dense
+                  class="row">
+                  <q-item class="q-ma-none col-12">
+                    <q-item-section avatar>
+                      <q-badge
+                        color="primary"
+                        label="Start" />
+                    </q-item-section>
+                    <q-item-section class="text-body2">
+                      {{ formatDate(bookingForm.interval?.start) }}
+                    </q-item-section>
+                  </q-item>
+                  <q-item class="q-ma-none col-12">
+                    <q-item-section avatar>
+                      <q-badge
+                        color="primary"
+                        label="End" />
+                    </q-item-section>
+                    <q-item-section
+                      class="text-body2"
+                      style="min-width: 150px">
+                      {{ formatDate(bookingForm.interval?.end) }}
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card-section>
+              <q-separator vertical />
+              <q-card-section class="col-3 flex flex-center bg-grey-4">
+                {{ bookingDuration.hours }} hours
+                <div v-if="bookingDuration.minutes">
+                  <q-separator />
+                  {{ bookingDuration.minutes }} mins
+                </div>
+              </q-card-section>
+            </q-card-section>
+          </q-card>
+          <div
+            v-else
+            class="col-12">
+            <q-field filled>Tap to Select a Boat / Time</q-field>
+          </div>
+        </q-item>
+        <q-item class="q-px-none">
+          <q-item-section>
+            <q-select
+              filled
+              v-model="bookingForm.reason"
+              :options="reason_options"
+              label="Reason for sail" />
+          </q-item-section>
+        </q-item>
+        <q-item class="q-px-none">
+          <q-item-section>
+            <q-input
+              v-model="bookingForm.comment"
+              clearable
+              autogrow
+              filled
+              label="Additional Comments (optional)" />
+          </q-item-section>
+        </q-item>
+      </q-list>
+      <q-card-actions align="right">
+        <q-btn
+          label="Delete"
+          color="negative"
+          size="lg"
+          v-if="reservation?.$id"
+          @click="onDelete" />
+        <q-btn
+          label="Reset"
+          @click="onReset"
+          size="lg"
+          color="secondary" />
+        <q-btn
+          label="Submit"
+          @click="onSubmit"
+          size="lg"
+          color="primary" />
+      </q-card-actions>
+    </q-card>
+    <q-dialog
+      v-model="boatSelect"
+      full-width>
+      <BoatScheduleTableComponent
+        :model-value="bookingForm.interval"
+        @update:model-value="updateInterval" />
+    </q-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useAuthStore } from 'src/stores/auth';
+import { Boat, useBoatStore } from 'src/stores/boat';
+import { Interval, Reservation } from 'src/stores/schedule.types';
+import BoatScheduleTableComponent from 'src/components/scheduling/boat/BoatScheduleTableComponent.vue';
+import { formatDate } from 'src/utils/schedule';
+import { useReservationStore } from 'src/stores/reservation';
+import { useQuasar } from 'quasar';
+import { useRouter } from 'vue-router';
+
+interface BookingForm {
+  $id?: string;
+  user?: string;
+  interval?: Interval | null;
+  reason?: string;
+  members?: string[];
+  guests?: string[];
+  comment?: string;
+}
+
+const reason_options = ['Open Sail', 'Private Sail', 'Racing', 'Other'];
+
+const boatStore = useBoatStore();
+const auth = useAuthStore();
+const newForm = {
+  user: auth.currentUser?.$id,
+  interval: {} as Interval,
+  reason: 'Open Sail',
+  members: [],
+  guests: [],
+  comment: '',
+};
+const reservation = defineModel<Reservation>();
+const reservationStore = useReservationStore();
+const boatSelect = ref(false);
+const bookingForm = ref<BookingForm>({ ...newForm });
+const $q = useQuasar();
+const $router = useRouter();
+
+watch(reservation, (newReservation) => {
+  if (!newReservation) {
+    bookingForm.value = newForm;
+  } else {
+    const updatedReservation = {
+      ...newReservation,
+      user: auth.currentUser?.$id,
+      interval: {
+        start: newReservation.start,
+        end: newReservation.end,
+        resource: newReservation.resource,
+      },
+    };
+    bookingForm.value = updatedReservation;
+  }
+});
+
+const updateInterval = (interval: Interval | null) => {
+  bookingForm.value.interval = interval;
+  boatSelect.value = false;
+};
+
+const bookingDuration = computed((): { hours: number; minutes: number } => {
+  if (bookingForm.value.interval?.start && bookingForm.value.interval?.end) {
+    const start = new Date(bookingForm.value.interval.start).getTime();
+    const end = new Date(bookingForm.value.interval.end).getTime();
+    const delta = Math.abs(end - start) / 1000;
+    const hours = Math.floor(delta / 3600) % 24;
+    const minutes = Math.floor(delta - hours * 3600) % 60;
+    return { hours: hours, minutes: minutes };
+  }
+  return { hours: 0, minutes: 0 };
+});
+
+const bookingName = computed(() =>
+  auth.getUserNameById(bookingForm.value?.user)
+);
+
+const boat = computed((): Boat | null => {
+  const boatId = bookingForm.value.interval?.resource;
+  return boatStore.getBoatById(boatId);
+});
+
+const onDelete = () => {
+  reservationStore.deleteReservation(reservation.value?.$id);
+  $router.go(-1);
+};
+
+const onReset = () => {
+  bookingForm.value.interval = null;
+  bookingForm.value = reservation.value
+    ? {
+        ...reservation.value,
+        interval: {
+          start: reservation.value.start,
+          end: reservation.value.end,
+          resource: reservation.value.resource,
+        },
+      }
+    : { ...newForm };
+};
+
+const onSubmit = async () => {
+  const booking = bookingForm.value;
+  if (
+    !(
+      booking.interval &&
+      booking.interval.resource &&
+      booking.interval.start &&
+      booking.interval.end &&
+      auth.currentUser
+    )
+  ) {
+    // TODO: Make a proper validator
+    return false;
+  }
+  const newReservation = <Reservation>{
+    resource: booking.interval.resource,
+    start: booking.interval.start,
+    end: booking.interval.end,
+    user: auth.currentUser.$id,
+    status: 'confirmed',
+    reason: booking.reason,
+    comment: booking.comment,
+    $id: reservation.value?.$id,
+  };
+  const status = $q.notify({
+    color: 'secondary',
+    textColor: 'white',
+    message: 'Submitting Reservation',
+    spinner: true,
+    closeBtn: 'Dismiss',
+    position: 'top',
+    timeout: 0,
+    group: false,
+  });
+  try {
+    const r = await reservationStore.createOrUpdateReservation(newReservation);
+    status({
+      color: 'positive',
+      icon: 'cloud_done',
+      message: `Booking ${newReservation.$id ? 'updated' : 'created'}: ${
+        boatStore.getBoatById(r.resource)?.name
+      } at ${formatDate(r.start)}`,
+      spinner: false,
+    });
+  } catch (e) {
+    status({
+      color: 'negative',
+      icon: 'error',
+      spinner: false,
+      message: 'Failed to book!' + e,
+    });
+  }
+  $router.go(-1);
+};
+</script>
--- a/src/components/DiscordOauthComponent.vue
+++ b/src/components/DiscordOauthComponent.vue
@@ -0,0 +1,19 @@
+<template>
+  <q-btn
+    @click="auth.discordLogin()"
+    style="width: 300px">
+    <q-avatar
+      left
+      size="sm"
+      class="q-ma-xs">
+      <img
+        src="https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/636e0a6a49cf127bf92de1e2_icon_clyde_blurple_RGB.png" />
+    </q-avatar>
+    Login with Discord
+  </q-btn>
+</template>
+
+<script setup lang="ts">
+import { useAuthStore } from 'src/stores/auth';
+const auth = useAuthStore();
+</script>
--- a/src/components/GoogleOauthComponent.vue
+++ b/src/components/GoogleOauthComponent.vue
@@ -1,5 +1,16 @@
 <template>
-  <div @click="auth.googleLogin()">Login with Google</div>
+  <q-btn
+    @click="auth.googleLogin()"
+    style="width: 300px">
+    <q-avatar
+      left
+      class="q-ma-xs"
+      size="sm">
+      <img
+        src="https://lh3.googleusercontent.com/COxitqgJr1sJnIDe8-jiKhxDx1FrYbtRHKJ9z_hELisAlapwE9LUPh6fcXIfb5vwpbMl4xl9H9TRFPc5NOO8Sb3VSgIBrfRYvW6cUA" />
+    </q-avatar>
+    <div>Login with Google</div>
+  </q-btn>
 </template>

 <script setup lang="ts">
--- a/src/components/LeftDrawer.vue
+++ b/src/components/LeftDrawer.vue
@@ -21,7 +21,11 @@
              <q-icon :name="link.icon" />
            </q-item-section>

-            <q-item-section>{{ link.name }}</q-item-section>
+            <q-item-section>
+              <span :class="link.color ? `text-${link.color}` : ''">
+                {{ link.name }}
+              </span>
+            </q-item-section>
          </q-item>
          <q-list v-if="link.sublinks">
            <div
@@ -36,7 +40,11 @@
                  <q-icon :name="sublink.icon" />
                </q-item-section>

-                <q-item-section>{{ sublink.name }}</q-item-section>
+                <q-item-section>
+                  <span :class="sublink.color ? `text-${sublink.color}` : ''">
+                    {{ sublink.name }}
+                  </span>
+                </q-item-section>
              </q-item>
            </div>
          </q-list>
--- a/src/components/NewPasswordComponent.vue
+++ b/src/components/NewPasswordComponent.vue
@@ -0,0 +1,62 @@
+<template>
+  <q-card-section class="q-ma-sm">
+    <q-input
+      v-model="password"
+      label="New Password"
+      type="password"
+      color="darkblue"
+      :rules="[validatePasswordStrength]"
+      lazy-rules
+      filled></q-input>
+    <q-input
+      v-model="confirmPassword"
+      label="Confirm New Password"
+      type="password"
+      color="darkblue"
+      :rules="[validatePasswordStrength]"
+      lazy-rules
+      filled></q-input>
+    <div class="text-caption q-py-md">Enter a new password.</div>
+  </q-card-section>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+const password = ref('');
+const confirmPassword = ref('');
+
+const newPassword = defineModel();
+
+const validatePasswordStrength = (val: string) => {
+  const hasUpperCase = /[A-Z]/.test(val);
+  const hasLowerCase = /[a-z]/.test(val);
+  const hasNumbers = /[0-9]/.test(val);
+  const hasNonAlphas = /[\W_]/.test(val);
+  const isValidLength = val.length >= 8;
+
+  return (
+    (hasUpperCase &&
+      hasLowerCase &&
+      hasNumbers &&
+      hasNonAlphas &&
+      isValidLength) ||
+    'Password must be at least 8 characters long and include uppercase, lowercase, number, and special character.'
+  );
+};
+
+const validatePasswordsMatch = (val: string) => {
+  return val === password.value || 'Passwords do not match.';
+};
+
+watch([password, confirmPassword], ([newpw, newpw1]) => {
+  if (
+    validatePasswordStrength(newpw) === true &&
+    validatePasswordsMatch(newpw1) === true
+  ) {
+    newPassword.value = newpw;
+  } else {
+    newPassword.value = '';
+  }
+});
+</script>
--- a/src/components/ResourceScheduleViewerComponent.vue
+++ b/src/components/ResourceScheduleViewerComponent.vue
@@ -12,21 +12,20 @@
          max-width: 350px;
          display: flex;
          justify-content: space-between;
-        "
-      >
+        ">
        <span
          class="q-button"
          style="cursor: pointer; user-select: none"
-          @click="onPrev"
-          >&lt;</span
-        >
+          @click="onPrev">
+          &lt;
+        </span>
        {{ formattedMonth }}
        <span
          class="q-button"
          style="cursor: pointer; user-select: none"
-          @click="onNext"
-          >&gt;</span
-        >
+          @click="onNext">
+          &gt;
+        </span>
      </div>
    </div>
    <div
@@ -35,8 +34,7 @@
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
-      "
-    >
+      ">
      <div style="display: flex; width: 100%">
        <q-calendar-month
          ref="calendar"
@@ -48,10 +46,10 @@
          date-type="rounded"
          @change="onChange"
          @moved="onMoved"
-          @click-date="onClickDate"
-        />
-      </div></div
-  ></q-card-section>
+          @click-date="onClickDate" />
+      </div>
+    </div>
+  </q-card-section>
  <q-calendar-resource
    v-model="selectedDate"
    :model-resources="boatStore.boats"
@@ -73,18 +71,25 @@
    @click-time="onClickTime"
    @click-resource="onClickResource"
    @click-head-resources="onClickHeadResources"
-    @click-interval="onClickInterval"
-  >
+    @click-interval="onClickInterval">
    <template #resource-intervals="{ scope }">
-      <template v-for="(event, index) in getEvents(scope)" :key="index">
-        <q-badge outline :label="event.title" :style="getStyle(event)" />
+      <template
+        v-for="(event, index) in getEvents(scope)"
+        :key="index">
+        <q-badge
+          outline
+          :label="event.title"
+          :style="getStyle(event)" />
      </template>
    </template>

    <template #resource-label="{ scope: { resource } }">
      <div class="col-12 .col-md-auto">
        {{ resource.displayName }}
-        <q-icon v-if="resource.defects" name="warning" color="warning" />
+        <q-icon
+          v-if="resource.defects"
+          name="warning"
+          color="warning" />
      </div>
    </template>
  </q-calendar-resource>
@@ -97,9 +102,10 @@
      dense
      @update:model-value="onUpdateDuration"
      label="Duration (hours)"
-      stack-label
-      ><template v-slot:append><q-icon name="timelapse" /></template></q-select
-  ></q-card-section>
+      stack-label>
+      <template v-slot:append><q-icon name="timelapse" /></template>
+    </q-select>
+  </q-card-section>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
@@ -117,6 +123,8 @@ import { useReservationStore } from 'src/stores/reservation';
 import { date } from 'quasar';
 import { computed } from 'vue';
 import type { StatusTypes } from 'src/stores/schedule.types';
+import { useIntervalStore } from 'src/stores/interval';
+import { storeToRefs } from 'pinia';

 interface EventData {
  event: object;
@@ -146,7 +154,7 @@ const statusLookup = {
 const calendar = ref();
 const boatStore = useBoatStore();
 const reservationStore = useReservationStore();
-const selectedDate = ref(today());
+const { selectedDate } = storeToRefs(useIntervalStore());
 const duration = ref(1);

 const formattedMonth = computed(() => {
@@ -176,7 +184,7 @@ function getEvents(scope: ResourceIntervalScope) {
    scope.resource.$id
  );

-  return resourceEvents.map((event) => {
+  return resourceEvents.value.map((event) => {
    return {
      left: scope.timeStartPosX(parsed(event.start)),
      width: scope.timeDurationWidth(
--- a/src/components/ToolbarComponent.vue
+++ b/src/components/ToolbarComponent.vue
@@ -7,22 +7,24 @@
        round
        icon="menu"
        aria-label="Menu"
-        @click="toggleLeftDrawer"
-      />
+        @click="toggleLeftDrawer" />

-      <q-toolbar-title> {{ pageTitle }} </q-toolbar-title>
-      <q-tabs shrink>
-        <q-tab> </q-tab>
-      </q-tabs>
+      <q-toolbar-title>{{ pageTitle }}</q-toolbar-title>
+      <q-space />
+      <div>v{{ VERSION }}</div>
    </q-toolbar>
  </q-header>
-  <LeftDrawer :drawer="leftDrawerOpen" @drawer-toggle="toggleLeftDrawer" />
+  <LeftDrawer
+    :drawer="leftDrawerOpen"
+    @drawer-toggle="toggleLeftDrawer" />
 </template>

 <script setup lang="ts">
 import { ref } from 'vue';
 import LeftDrawer from 'components/LeftDrawer.vue';

+const VERSION = process.env.VUE_APP_VERSION;
+
 const leftDrawerOpen = ref(false);
 function toggleLeftDrawer() {
  leftDrawerOpen.value = !leftDrawerOpen.value;
--- a/src/components/boat/BoatPreviewComponent.vue
+++ b/src/components/boat/BoatPreviewComponent.vue
@@ -3,7 +3,7 @@
    <q-card
      v-for="boat in boats"
      :key="boat.id"
-      class="mobile-card q-ma-sm">
+      class="q-ma-sm">
      <q-card-section>
        <q-img
          :src="boat.imgSrc"
--- a/src/components/scheduling/IntervalTemplateComponent.vue
+++ b/src/components/scheduling/IntervalTemplateComponent.vue
@@ -3,8 +3,7 @@
    expand-icon-toggle
    draggable="true"
    @dragstart="onDragStart($event, template)"
-    v-model="expanded"
-  >
+    v-model="expanded">
    <template v-slot:header>
      <q-item-section>
        <q-input
@@ -12,17 +11,21 @@
          :borderless="!edit"
          dense
          v-model="template.name"
-          v-if="edit"
-        /><q-item-label v-if="!edit" class="cursor-pointer">{{
-          template.name
-        }}</q-item-label></q-item-section
-      >
+          v-if="edit" />
+        <q-item-label
+          v-if="!edit"
+          class="cursor-pointer">
+          {{ template.name }}
+        </q-item-label>
+      </q-item-section>
    </template>
    <q-card flat>
      <q-card-section horizontal>
        <q-card-section class="q-pt-xs">
          <q-list dense>
-            <q-item v-for="(item, index) in template.timeTuples" :key="item[0]">
+            <q-item
+              v-for="(item, index) in template.timeTuples"
+              :key="item[0]">
              <q-input
                class="q-mx-sm"
                dense
@@ -38,8 +41,7 @@
                type="time"
                label="End"
                :borderless="!edit"
-                :readonly="!edit"
-              >
+                :readonly="!edit">
                <template v-slot:after>
                  <q-btn
                    v-if="edit"
@@ -47,46 +49,44 @@
                    dense
                    flat
                    icon="delete"
-                    @click="template.timeTuples.splice(index, 1)"
-                  /> </template></q-input></q-item
-          ></q-list>
+                    @click="template.timeTuples.splice(index, 1)" />
+                </template>
+              </q-input>
+            </q-item>
+          </q-list>
          <q-btn
            v-if="edit"
            dense
            color="primary"
            size="sm"
            label="Add interval"
-            @click="template.timeTuples.push(['00:00', '00:00'])"
-        /></q-card-section>
+            @click="template.timeTuples.push(['00:00', '00:00'])" />
+        </q-card-section>
        <q-card-actions vertical>
          <q-btn
            v-if="!edit"
            color="primary"
            icon="edit"
            label="Edit"
-            @click="toggleEdit"
-          />
+            @click="toggleEdit" />
          <q-btn
            v-if="edit"
            color="primary"
            icon="save"
            label="Save"
-            @click="saveTemplate($event, template)"
-          />
+            @click="saveTemplate($event, template)" />
          <q-btn
            v-if="edit"
            color="secondary"
            icon="cancel"
            label="Cancel"
-            @click="revert"
-          />
+            @click="revert" />
          <q-btn
            color="negative"
            icon="delete"
            label="Delete"
            v-if="template.$id !== ''"
-            @click="deleteTemplate($event, template)"
-          />
+            @click="deleteTemplate($event, template)" />
        </q-card-actions>
      </q-card-section>
    </q-card>
@@ -101,25 +101,29 @@
          square
          icon="schedule"
          v-for="item in overlapped"
-          :key="item.start"
-        >
-          {{ item.start }}-{{ item.end }}</q-chip
-        >
+          :key="item.start">
+          {{ item.start }}-{{ item.end }}
+        </q-chip>
      </q-card-section>
      <q-card-actions align="right">
-        <q-btn flat label="OK" color="primary" v-close-popup />
-      </q-card-actions> </q-card
-  ></q-dialog>
+        <q-btn
+          flat
+          label="OK"
+          color="primary"
+          v-close-popup />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>

 <script setup lang="ts">
-import { useScheduleStore } from 'src/stores/schedule';
+import { useIntervalTemplateStore } from 'src/stores/intervalTemplate';
 import { IntervalTemplate } from 'src/stores/schedule.types';
 import { copyIntervalTemplate, timeTuplesOverlapped } from 'src/utils/schedule';
 import { ref } from 'vue';
 const alert = ref(false);
 const overlapped = ref();
-const scheduleStore = useScheduleStore();
+const intervalTemplateStore = useIntervalTemplateStore();
 const props = defineProps<{ edit?: boolean; modelValue: IntervalTemplate }>();
 const edit = ref(props.edit);
 const expanded = ref(props.edit);
@@ -141,7 +145,7 @@ const deleteTemplate = (
  event: Event,
  template: IntervalTemplate | undefined
 ) => {
-  if (template?.$id) scheduleStore.deleteIntervalTemplate(template.$id);
+  if (template?.$id) intervalTemplateStore.deleteIntervalTemplate(template.$id);
 };

 function onDragStart(e: DragEvent, template: IntervalTemplate) {
@@ -159,9 +163,9 @@ const saveTemplate = (evt: Event, template: IntervalTemplate | undefined) => {
  } else {
    edit.value = false;
    if (template.$id && template.$id !== 'unsaved') {
-      scheduleStore.updateIntervalTemplate(template, template.$id);
+      intervalTemplateStore.updateIntervalTemplate(template, template.$id);
    } else {
-      scheduleStore.createIntervalTemplate(template);
+      intervalTemplateStore.createIntervalTemplate(template);
      emit('saved');
    }
  }
--- a/src/components/scheduling/ReservationCardComponent.vue
+++ b/src/components/scheduling/ReservationCardComponent.vue
@@ -0,0 +1,116 @@
+<template>
+  <q-card
+    bordered
+    :class="isPast(reservation.end) ? 'text-blue-grey-6' : ''"
+    class="q-ma-md">
+    <q-card-section>
+      <div class="row items-center no-wrap">
+        <div class="col">
+          <div class="text-h6">
+            {{ boatStore.getBoatById(reservation.resource)?.name }}
+          </div>
+          <div class="text-subtitle2">
+            <p>
+              Start: {{ formatDate(reservation.start) }}
+              <br />
+              End: {{ formatDate(reservation.end) }}
+              <br />
+              Type: {{ reservation.reason }}
+            </p>
+          </div>
+        </div>
+        <!-- <div class="col-auto">
+            <q-btn
+              color="grey-7"
+              round
+              flat
+              icon="more_vert">
+              <q-menu
+                cover
+                auto-close>
+                <q-list>
+                  <q-item clickable>
+                    <q-item-section>remove card</q-item-section>
+                  </q-item>
+                  <q-item clickable>
+                    <q-item-section>send feedback</q-item-section>
+                  </q-item>
+                  <q-item clickable>
+                    <q-item-section>share</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </div> -->
+      </div>
+    </q-card-section>
+
+    <!-- <q-card-section>Some more information here...</q-card-section> -->
+
+    <q-separator />
+
+    <q-card-actions v-if="!isPast(reservation.end)">
+      <q-btn
+        flat
+        size="lg"
+        :to="{ name: 'edit-reservation', params: { id: reservation.$id } }">
+        Modify
+      </q-btn>
+      <q-btn
+        flat
+        size="lg"
+        @click="cancelReservation()">
+        Delete
+      </q-btn>
+    </q-card-actions>
+  </q-card>
+  <q-dialog v-model="cancelDialog">
+    <q-card>
+      <q-card-section class="row items-center">
+        <q-avatar
+          icon="warning"
+          color="negative"
+          text-color="white" />
+        <span class="q-ml-md">Warning!</span>
+        <p class="q-pt-md">
+          This will delete your reservation for
+          {{ boatStore.getBoatById(reservation?.resource)?.name }} on
+          {{ formatDate(reservation?.start) }}
+        </p>
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn
+          flat
+          size="lg"
+          label="Cancel"
+          color="primary"
+          v-close-popup />
+        <q-btn
+          flat
+          size="lg"
+          label="Delete"
+          color="negative"
+          @click="reservationStore.deleteReservation(reservation)"
+          v-close-popup />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<script setup lang="ts">
+import { useBoatStore } from 'src/stores/boat';
+import { useReservationStore } from 'src/stores/reservation';
+import type { Reservation } from 'src/stores/schedule.types';
+import { formatDate, isPast } from 'src/utils/schedule';
+import { ref } from 'vue';
+
+const cancelDialog = ref(false);
+const boatStore = useBoatStore();
+const reservationStore = useReservationStore();
+
+const reservation = defineModel<Reservation>({ required: true });
+
+const cancelReservation = () => {
+  cancelDialog.value = true;
+};
+</script>
--- a/src/components/scheduling/boat/BoatScheduleTableComponent.vue
+++ b/src/components/scheduling/boat/BoatScheduleTableComponent.vue
@@ -35,10 +35,14 @@

          <template #day-body="{ scope }">
            <div
-              v-for="block in getBoatBlocks(scope)"
+              v-for="block in getAvailableIntervals(
+                scope.timestamp,
+                boats[scope.columnIndex]
+              ).value"
              :key="block.$id">
              <div
                class="timeblock"
+                :disabled="beforeNow(new Date(block.end))"
                :class="selectedBlock?.$id === block.$id ? 'selected' : ''"
                :style="
                  blockStyles(
@@ -48,8 +52,7 @@
                  )
                "
                :id="block.id"
-                @click="selectBlock($event, scope, block)"
-                v-close-popup>
+                @click="selectBlock($event, scope, block)">
                {{ boats[scope.columnIndex].name }}
                <br />
                {{
@@ -93,27 +96,35 @@ import {
 } from '@quasar/quasar-ui-qcalendar';
 import CalendarHeaderComponent from './CalendarHeaderComponent.vue';

-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useBoatStore } from 'src/stores/boat';
-import { useScheduleStore } from 'src/stores/schedule';
 import { useAuthStore } from 'src/stores/auth';
 import { Interval, Reservation } from 'src/stores/schedule.types';
 import { storeToRefs } from 'pinia';
 import { useReservationStore } from 'src/stores/reservation';
+import { useIntervalTemplateStore } from 'src/stores/intervalTemplate';
+import { useIntervalStore } from 'src/stores/interval';

-const scheduleStore = useScheduleStore();
+const intervalTemplateStore = useIntervalTemplateStore();
 const reservationStore = useReservationStore();
 const { boats } = storeToRefs(useBoatStore());
 const selectedBlock = defineModel<Interval | null>();
 const selectedDate = ref(today());
-
+const { getAvailableIntervals } = useIntervalStore();
 const calendar = ref<QCalendarDay | null>(null);
+const now = ref(new Date());
+let intervalId: string | number | NodeJS.Timeout | undefined;

 onMounted(async () => {
  await useBoatStore().fetchBoats();
-  await scheduleStore.fetchIntervalTemplates();
+  await intervalTemplateStore.fetchIntervalTemplates();
+  intervalId = setInterval(function () {
+    now.value = new Date();
+  }, 60000);
 });

+onUnmounted(() => clearInterval(intervalId));
+
 function handleSwipe({ ...event }) {
  event.direction === 'right' ? calendar.value?.prev() : calendar.value?.next();
 }
@@ -153,6 +164,10 @@ function getBoatDisplayName(scope: DayBodyScope) {
    : '';
 }

+function beforeNow(time: Date) {
+  return time < now.value || null;
+}
+
 function genericBlockStyle(
  start: Timestamp,
  end: Timestamp,
@@ -173,9 +188,6 @@ function genericBlockStyle(
      1 +
      'px';
  }
-  // if (selectedBlock.value?.id === block.id) {
-  //   s.opacity = '1.0';
-  // }
  return s;
 }

@@ -187,44 +199,20 @@ interface DayBodyScope {
 }

 function selectBlock(event: MouseEvent, scope: DayBodyScope, block: Interval) {
-  // TODO: Disable blocks before today with updateDisabled and/or comparison
-  if (scope.timestamp.disabled) return false;
-  selectedBlock.value === block
-    ? (selectedBlock.value = null)
-    : (selectedBlock.value = block);
+  if (scope.timestamp.disabled || new Date(block.end) < new Date())
+    return false;
+  selectedBlock.value = block;
 }

-const boatBlocks = computed((): Record<string, Interval[]> => {
-  return scheduleStore
-    .getIntervals(selectedDate.value)
-    .reduce((result, interval) => {
-      if (!result[interval.boatId]) result[interval.boatId] = [];
-      if (
-        !reservationStore.isResourceTimeOverlapped(
-          interval.boatId,
-          new Date(interval.start),
-          new Date(interval.end)
-        )
-      )
-        result[interval.boatId].push(interval);
-      return result;
-    }, <Record<string, Interval[]>>{});
-});
-
 const boatReservations = computed((): Record<string, Reservation[]> => {
  return reservationStore
    .getReservationsByDate(selectedDate.value)
-    .reduce((result, reservation) => {
+    .value.reduce((result, reservation) => {
      if (!result[reservation.resource]) result[reservation.resource] = [];
      result[reservation.resource].push(reservation);
      return result;
    }, <Record<string, Reservation[]>>{});
 });
-
-function getBoatBlocks(scope: DayBodyScope): Interval[] {
-  const boat = boats.value[scope.columnIndex];
-  return boat ? boatBlocks.value[boat.$id] : [];
-}
 function getBoatReservations(scope: DayBodyScope): Reservation[] {
  const boat = boats.value[scope.columnIndex];
  return boat ? boatReservations.value[boat.$id] : [];
--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@@ -14,7 +14,7 @@
              <div class="col text-h6">Log in</div>
            </div>
          </q-card-section>
-          <q-form>
+          <q-form @keydown.enter.prevent="doTokenLogin">
            <q-card-section class="q-gutter-md">
              <q-input
                v-model="email"
@@ -23,35 +23,37 @@
                color="darkblue"
                filled></q-input>
              <q-input
-                v-model="password"
-                label="Password"
-                type="password"
+                v-if="userId"
+                v-model="token"
+                label="6-digit code"
+                type="number"
                color="darkblue"
                filled></q-input>
-              <q-card-actions>
-                <q-btn
-                  type="button"
-                  @click="doLogin"
-                  label="Login"
-                  color="primary"></q-btn>
-                <q-space />
-                <q-btn
-                  flat
-                  color="secondary"
-                  to="/pwreset">
-                  Reset password
-                </q-btn>
-                <!-- <q-btn
-                type="button"
-                @click="register"
-                color="secondary"
-                label="Register"
-                flat
-              ></q-btn> -->
-              </q-card-actions>
            </q-card-section>
          </q-form>
-          <!-- <q-card-section><GoogleOauthComponent /></q-card-section> -->
+          <q-card-section class="q-pa-none">
+            <div class="row justify-center q-ma-sm">
+              <q-btn
+                type="button"
+                @click="doTokenLogin"
+                color="primary"
+                label="Login with E-mail"
+                style="width: 300px" />
+            </div>
+            <div class="row justify-center q-ma-sm">
+              <GoogleOauthComponent />
+            </div>
+            <div class="row justify-center q-ma-sm">
+              <DiscordOauthComponent />
+            </div>
+            <div class="row justify-center">
+              <q-btn
+                flat
+                color="secondary"
+                to="/pwreset"
+                label="Forgot Password?" />
+            </div>
+          </q-card-section>
        </q-card>
      </q-page>
    </q-page-container>
@@ -75,13 +77,76 @@

 <script setup lang="ts">
 import { ref } from 'vue';
-import { login } from 'boot/appwrite';
-// import GoogleOauthComponent from 'src/components/GoogleOauthComponent.vue';
+import GoogleOauthComponent from 'src/components/GoogleOauthComponent.vue';
+import DiscordOauthComponent from 'src/components/DiscordOauthComponent.vue';
+import { Dialog, Notify } from 'quasar';
+import { useAuthStore } from 'src/stores/auth';
+import { useRouter } from 'vue-router';
+import { AppwriteException } from 'appwrite';

 const email = ref('');
-const password = ref('');
+const token = ref('');
+const userId = ref();
+const router = useRouter();

-const doLogin = async () => {
-  login(email.value, password.value);
+console.log('version:' + process.env.VUE_APP_VERSION);
+
+const doTokenLogin = async () => {
+  const authStore = useAuthStore();
+  if (!userId.value) {
+    try {
+      const sessionToken = await authStore.createTokenSession(email.value);
+      userId.value = sessionToken.userId;
+      Dialog.create({ message: 'Check your e-mail for your login code.' });
+    } catch (e) {
+      Dialog.create({
+        message: 'An error occurred.  Please ask for help in Discord',
+      });
+    }
+  } else {
+    const notification = Notify.create({
+      type: 'primary',
+      position: 'top',
+      spinner: true,
+      message: 'Logging you in...',
+      timeout: 8000,
+      group: false,
+    });
+    try {
+      await authStore.tokenLogin(userId.value, token.value);
+      notification({
+        type: 'positive',
+        message: 'Logged in!',
+        timeout: 2000,
+        spinner: false,
+        icon: 'check_circle',
+      });
+      router.replace({ name: 'index' });
+    } catch (error: unknown) {
+      if (error instanceof AppwriteException) {
+        if (error.type === 'user_session_already_exists') {
+          useRouter().replace({ name: 'index' });
+          notification({
+            type: 'positive',
+            message: 'Already Logged in!',
+            timeout: 2000,
+            spinner: false,
+            icon: 'check_circle',
+          });
+          return;
+        }
+        Dialog.create({
+          title: 'Login Error!',
+          message: error.message,
+          persistent: true,
+        });
+      }
+      notification({
+        type: 'negative',
+        message: 'Login failed.',
+        timeout: 2000,
+      });
+    }
+  }
 };
 </script>
--- a/src/pages/PrivacyPolicyPage.vue
+++ b/src/pages/PrivacyPolicyPage.vue
@@ -1,163 +1,173 @@
 <template>
-  <q-page padding>
-    <h1>Privacy Policy for bab.toal.ca</h1>
+  <q-layout>
+    <q-page-container>
+      <q-page padding>
+        <h1>Privacy Policy for Undock.ca</h1>

-    <p>
-      At OYS BAB Test, accessible from https://bab.toal.ca, one of our main
-      priorities is the privacy of our visitors. This Privacy Policy document
-      contains types of information that is collected and recorded by OYS BAB
-      Test and how we use it.
-    </p>
+        <p>
+          At Undock, accessible from https://undock.ca, one of our main
+          priorities is the privacy of our visitors. This Privacy Policy
+          document contains types of information that is collected and recorded
+          by Undock and how we use it.
+        </p>

-    <p>
-      If you have additional questions or require more information about our
-      Privacy Policy, do not hesitate to contact us. Our Privacy Policy was
-      generated with the help of
-      <a href="https://www.gdprprivacypolicy.net/"
-        >GDPR Privacy Policy Generator</a
-      >
-    </p>
+        <p>
+          If you have additional questions or require more information about our
+          Privacy Policy, do not hesitate to contact us. Our Privacy Policy was
+          generated with the help of
+          <a href="https://www.gdprprivacypolicy.net/">
+            GDPR Privacy Policy Generator
+          </a>
+        </p>

-    <h2>General Data Protection Regulation (GDPR)</h2>
-    <p>We are a Data Controller of your information.</p>
+        <h2>General Data Protection Regulation (GDPR)</h2>
+        <p>We are a Data Controller of your information.</p>

-    <p>
-      bab.toal.ca legal basis for collecting and using the personal information
-      described in this Privacy Policy depends on the Personal Information we
-      collect and the specific context in which we collect the information:
-    </p>
-    <ul>
-      <li>bab.toal.ca needs to perform a contract with you</li>
-      <li>You have given bab.toal.ca permission to do so</li>
-      <li>
-        Processing your personal information is in bab.toal.ca legitimate
-        interests
-      </li>
-      <li>bab.toal.ca needs to comply with the law</li>
-    </ul>
+        <p>
+          Undock's legal basis for collecting and using the personal information
+          described in this Privacy Policy depends on the Personal Information
+          we collect and the specific context in which we collect the
+          information:
+        </p>
+        <ul>
+          <li>Undock needs to perform a contract with you</li>
+          <li>You have given Undock permission to do so</li>
+          <li>
+            Processing your personal information is in Undock legitimate
+            interests
+          </li>
+          <li>Undock needs to comply with the law</li>
+        </ul>

-    <p>
-      bab.toal.ca will retain your personal information only for as long as is
-      necessary for the purposes set out in this Privacy Policy. We will retain
-      and use your information to the extent necessary to comply with our legal
-      obligations, resolve disputes, and enforce our policies.
-    </p>
+        <p>
+          Undock will retain your personal information only for as long as is
+          necessary for the purposes set out in this Privacy Policy. We will
+          retain and use your information to the extent necessary to comply with
+          our legal obligations, resolve disputes, and enforce our policies.
+        </p>

-    <p>
-      If you are a resident of the European Economic Area (EEA), you have
-      certain data protection rights. If you wish to be informed what Personal
-      Information we hold about you and if you want it to be removed from our
-      systems, please contact us.
-    </p>
+        <p>
+          If you are a resident of the European Economic Area (EEA), you have
+          certain data protection rights. If you wish to be informed what
+          Personal Information we hold about you and if you want it to be
+          removed from our systems, please contact us.
+        </p>

-    <p>
-      In certain circumstances, you have the following data protection rights:
-    </p>
-    <ul>
-      <li>
-        The right to access, update or to delete the information we have on you.
-      </li>
-      <li>The right of rectification.</li>
-      <li>The right to object.</li>
-      <li>The right of restriction.</li>
-      <li>The right to data portability</li>
-      <li>The right to withdraw consent</li>
-    </ul>
+        <p>
+          In certain circumstances, you have the following data protection
+          rights:
+        </p>
+        <ul>
+          <li>
+            The right to access, update or to delete the information we have on
+            you.
+          </li>
+          <li>The right of rectification.</li>
+          <li>The right to object.</li>
+          <li>The right of restriction.</li>
+          <li>The right to data portability</li>
+          <li>The right to withdraw consent</li>
+        </ul>

-    <h2>Log Files</h2>
+        <h2>Log Files</h2>

-    <p>
-      OYS BAB Test follows a standard procedure of using log files. These files
-      log visitors when they visit websites. All hosting companies do this and a
-      part of hosting services' analytics. The information collected by log
-      files include internet protocol (IP) addresses, browser type, Internet
-      Service Provider (ISP), date and time stamp, referring/exit pages, and
-      possibly the number of clicks. These are not linked to any information
-      that is personally identifiable. The purpose of the information is for
-      analyzing trends, administering the site, tracking users' movement on the
-      website, and gathering demographic information.
-    </p>
+        <p>
+          Undock follows a standard procedure of using log files. These files
+          log visitors when they visit websites. All hosting companies do this
+          and a part of hosting services' analytics. The information collected
+          by log files include internet protocol (IP) addresses, browser type,
+          Internet Service Provider (ISP), date and time stamp, referring/exit
+          pages, and possibly the number of clicks. These are not linked to any
+          information that is personally identifiable. The purpose of the
+          information is for analyzing trends, administering the site, tracking
+          users' movement on the website, and gathering demographic information.
+        </p>

-    <h2>Cookies and Web Beacons</h2>
+        <h2>Cookies and Web Beacons</h2>

-    <p>
-      Like any other website, OYS BAB Test uses "cookies". These cookies are
-      used to store information including visitors' preferences, and the pages
-      on the website that the visitor accessed or visited. The information is
-      used to optimize the users' experience by customizing our web page content
-      based on visitors' browser type and/or other information.
-    </p>
+        <p>
+          Like any other website, Undock uses "cookies". These cookies are used
+          to store information including visitors' preferences, and the pages on
+          the website that the visitor accessed or visited. The information is
+          used to optimize the users' experience by customizing our web page
+          content based on visitors' browser type and/or other information.
+        </p>

-    <h2>Privacy Policies</h2>
+        <h2>Privacy Policies</h2>

-    <P
-      >You may consult this list to find the Privacy Policy for each of the
-      advertising partners of OYS BAB Test.</P
-    >
+        <P>
+          You may consult this list to find the Privacy Policy for each of the
+          advertising partners of Undock.
+        </P>

-    <p>
-      Third-party ad servers or ad networks uses technologies like cookies,
-      JavaScript, or Web Beacons that are used in their respective
-      advertisements and links that appear on OYS BAB Test, which are sent
-      directly to users' browser. They automatically receive your IP address
-      when this occurs. These technologies are used to measure the effectiveness
-      of their advertising campaigns and/or to personalize the advertising
-      content that you see on websites that you visit.
-    </p>
+        <p>
+          Third-party ad servers or ad networks uses technologies like cookies,
+          JavaScript, or Web Beacons that are used in their respective
+          advertisements and links that appear on Undock, which are sent
+          directly to users' browser. They automatically receive your IP address
+          when this occurs. These technologies are used to measure the
+          effectiveness of their advertising campaigns and/or to personalize the
+          advertising content that you see on websites that you visit.
+        </p>

-    <p>
-      Note that OYS BAB Test has no access to or control over these cookies that
-      are used by third-party advertisers.
-    </p>
+        <p>
+          Note that Undock has no access to or control over these cookies that
+          are used by third-party advertisers.
+        </p>

-    <h2>Third Party Privacy Policies</h2>
+        <h2>Third Party Privacy Policies</h2>

-    <p>
-      OYS BAB Test's Privacy Policy does not apply to other advertisers or
-      websites. Thus, we are advising you to consult the respective Privacy
-      Policies of these third-party ad servers for more detailed information. It
-      may include their practices and instructions about how to opt-out of
-      certain options.
-    </p>
+        <p>
+          Undock's Privacy Policy does not apply to other advertisers or
+          websites. Thus, we are advising you to consult the respective Privacy
+          Policies of these third-party ad servers for more detailed
+          information. It may include their practices and instructions about how
+          to opt-out of certain options.
+        </p>

-    <p>
-      You can choose to disable cookies through your individual browser options.
-      To know more detailed information about cookie management with specific
-      web browsers, it can be found at the browsers' respective websites.
-    </p>
+        <p>
+          You can choose to disable cookies through your individual browser
+          options. To know more detailed information about cookie management
+          with specific web browsers, it can be found at the browsers'
+          respective websites.
+        </p>

-    <h2>Children's Information</h2>
+        <h2>Children's Information</h2>

-    <p>
-      Another part of our priority is adding protection for children while using
-      the internet. We encourage parents and guardians to observe, participate
-      in, and/or monitor and guide their online activity.
-    </p>
+        <p>
+          Another part of our priority is adding protection for children while
+          using the internet. We encourage parents and guardians to observe,
+          participate in, and/or monitor and guide their online activity.
+        </p>

-    <p>
-      OYS BAB Test does not knowingly collect any Personal Identifiable
-      Information from children under the age of 13. If you think that your
-      child provided this kind of information on our website, we strongly
-      encourage you to contact us immediately and we will do our best efforts to
-      promptly remove such information from our records.
-    </p>
+        <p>
+          Undock does not knowingly collect any Personal Identifiable
+          Information from children under the age of 13. If you think that your
+          child provided this kind of information on our website, we strongly
+          encourage you to contact us immediately and we will do our best
+          efforts to promptly remove such information from our records.
+        </p>

-    <h2>Online Privacy Policy Only</h2>
+        <h2>Online Privacy Policy Only</h2>

-    <p>
-      Our Privacy Policy applies only to our online activities and is valid for
-      visitors to our website with regards to the information that they shared
-      and/or collect in OYS BAB Test. This policy is not applicable to any
-      information collected offline or via channels other than this website.
-    </p>
+        <p>
+          Our Privacy Policy applies only to our online activities and is valid
+          for visitors to our website with regards to the information that they
+          shared and/or collect in Undock. This policy is not applicable to any
+          information collected offline or via channels other than this website.
+        </p>

-    <h2>Consent</h2>
+        <h2>Consent</h2>

-    <p>
-      By using our website, you hereby consent to our Privacy Policy and agree
-      to its terms.
-    </p>
-  </q-page>
+        <p>
+          By using our website, you hereby consent to our Privacy Policy and
+          agree to its
+          <a href="/terms-of-service">terms</a>
+          .
+        </p>
+      </q-page>
+    </q-page-container>
+  </q-layout>
 </template>

 <script setup lang="ts"></script>
--- a/src/pages/ProfilePage.vue
+++ b/src/pages/ProfilePage.vue
@@ -1,15 +1,45 @@
 <template>
  <toolbar-component pageTitle="Member Profile" />
-  <q-page padding>
-    <q-list bordered>
+  <q-page
+    padding
+    class="row">
+    <q-list class="col-sm-4 col-12">
      <q-separator />
      <q-item>
        <q-item-section avatar>
          <q-avatar icon="person" />
        </q-item-section>
        <q-item-section>
-          {{ authStore.currentUser?.name }}
          <q-item-label caption>Name</q-item-label>
+          <q-input
+            filled
+            v-model="newName"
+            @keydown.enter.prevent="editName"
+            v-if="newName !== undefined" />
+          <div v-else>
+            {{ authStore.currentUser?.name }}
+          </div>
+        </q-item-section>
+        <q-item-section avatar>
+          <q-btn
+            square
+            @click="editName"
+            :icon="newName !== undefined ? 'check' : 'edit'" />
+          <q-btn
+            v-if="newName !== undefined"
+            square
+            color="negative"
+            @click="newName = undefined"
+            icon="cancel" />
+        </q-item-section>
+      </q-item>
+      <q-item>
+        <q-item-section avatar>
+          <q-avatar icon="email" />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label caption>E-mail</q-item-label>
+          {{ authStore.currentUser?.email }}
        </q-item-section>
      </q-item>
      <q-separator />
@@ -17,15 +47,27 @@
        <q-item-section>
          <q-item-label overline>Certifications</q-item-label>
          <div>
-            <q-chip square icon="verified" color="green" text-color="white"
-              >J/27</q-chip
-            >
-            <q-chip square icon="verified" color="blue" text-color="white"
-              >Capri25</q-chip
-            >
-            <q-chip square icon="verified" color="grey-9" text-color="white"
-              >Night</q-chip
-            >
+            <q-chip
+              square
+              icon="verified"
+              color="green"
+              text-color="white">
+              J/27
+            </q-chip>
+            <q-chip
+              square
+              icon="verified"
+              color="blue"
+              text-color="white">
+              Capri25
+            </q-chip>
+            <q-chip
+              square
+              icon="verified"
+              color="grey-9"
+              text-color="white">
+              Night
+            </q-chip>
          </div>
        </q-item-section>
      </q-item>
@@ -36,6 +78,21 @@
 <script setup lang="ts">
 import ToolbarComponent from 'src/components/ToolbarComponent.vue';
 import { useAuthStore } from 'src/stores/auth';
+import { ref } from 'vue';

 const authStore = useAuthStore();
+const newName = ref();
+
+const editName = async () => {
+  if (newName.value) {
+    try {
+      await authStore.updateName(newName.value);
+      newName.value = undefined;
+    } catch (e) {
+      console.log(e);
+    }
+  } else {
+    newName.value = authStore.currentUser?.name || '';
+  }
+};
 </script>
--- a/src/pages/ResetPassword.vue
+++ b/src/pages/ResetPassword.vue
@@ -34,58 +34,27 @@
                  @click="resetPw"
                  label="Send Reset Link"
                  color="primary"></q-btn>
-                <!-- <q-btn
-                type="button"
-                @click="register"
-                color="secondary"
-                label="Register"
-                flat
-              ></q-btn> -->
              </q-card-actions>
            </q-card-section>
          </q-form>
-          <q-form
-            @submit="submitNewPw"
-            v-else-if="validResetLink()">
-            <q-card-section class="q-ma-sm">
-              <q-input
-                v-model="password"
-                label="New Password"
-                type="password"
-                color="darkblue"
-                :rules="[validatePasswordStrength]"
-                lazy-rules
-                filled></q-input>
-              <q-input
-                v-model="confirmPassword"
-                label="Confirm New Password"
-                type="password"
-                color="darkblue"
-                :rules="[validatePasswordStrength]"
-                lazy-rules
-                filled></q-input>
-              <div class="text-caption q-py-md">Enter a new password.</div>
-            </q-card-section>
-            <q-card-actions>
-              <q-btn
-                type="submit"
-                label="Reset Password"
-                color="primary"></q-btn>
-              <!-- <q-btn
-                type="button"
-                @click="register"
-                color="secondary"
-                label="Register"
-                flat
-              ></q-btn> -->
-            </q-card-actions>
-          </q-form>
+          <div v-else-if="validResetLink()">
+            <q-form
+              @submit="submitNewPw"
+              @keydown.enter.prevent="resetPw">
+              <NewPasswordComponent v-model="newPassword" />
+              <q-card-actions>
+                <q-btn
+                  type="submit"
+                  label="Reset Password"
+                  color="primary"></q-btn>
+              </q-card-actions>
+            </q-form>
+          </div>
          <q-card
            v-else
            class="text-center">
            <span class="text-h5">Invalid reset link.</span>
          </q-card>
-          <!-- <q-card-section><GoogleOauthComponent /></q-card-section> -->
        </q-card>
      </q-page>
    </q-page-container>
@@ -112,38 +81,11 @@ import { ref } from 'vue';
 import { account, resetPassword } from 'boot/appwrite';
 import { useRouter } from 'vue-router';
 import { Dialog } from 'quasar';
-// import GoogleOauthComponent from 'src/components/GoogleOauthComponent.vue';
+import NewPasswordComponent from 'components/NewPasswordComponent.vue';

 const email = ref('');
 const router = useRouter();
-const password = ref('');
-const confirmPassword = ref('');
-
-const validatePasswordStrength = (val: string) => {
-  const hasUpperCase = /[A-Z]/.test(val);
-  const hasLowerCase = /[a-z]/.test(val);
-  const hasNumbers = /[0-9]/.test(val);
-  const hasNonAlphas = /[\W_]/.test(val);
-  const isValidLength = val.length >= 8;
-
-  return (
-    (hasUpperCase &&
-      hasLowerCase &&
-      hasNumbers &&
-      hasNonAlphas &&
-      isValidLength) ||
-    'Password must be at least 8 characters long and include uppercase, lowercase, number, and special character.'
-  );
-};
-
-const validatePasswordsMatch = (val: string) => {
-  return val === password.value || 'Passwords do not match.';
-};
-
-function isPasswordResetLink() {
-  const query = router.currentRoute.value.query;
-  return query && query.secret && query.userId && query.expire;
-}
+const newPassword = ref();

 function validResetLink(): boolean {
  const query = router.currentRoute.value.query;
@@ -153,27 +95,34 @@ function validResetLink(): boolean {
  );
 }

+function isPasswordResetLink() {
+  const query = router.currentRoute.value.query;
+  return query && query.secret && query.userId && query.expire;
+}
+
 function submitNewPw() {
  const query = router.currentRoute.value.query;
-  if (
-    validatePasswordStrength(password.value) === true &&
-    validatePasswordsMatch(confirmPassword.value) === true
-  ) {
+  if (newPassword.value) {
    account
      .updateRecovery(
        query.userId as string,
        query.secret as string,
-        password.value
+        newPassword.value
      )
      .then(() => {
-        Dialog.create({ message: 'Password Changed!' });
-        router.replace('/login');
+        Dialog.create({ message: 'Password Changed!' }).onOk(() =>
+          router.replace('/login')
+        );
      })
      .catch((e) =>
        Dialog.create({
          message: 'Password change failed!  Error: ' + e.message,
        })
      );
+  } else {
+    Dialog.create({
+      message: 'Invalid password.  Try again',
+    });
  }
 }

--- a/src/pages/SignupPage.vue
+++ b/src/pages/SignupPage.vue
@@ -0,0 +1,86 @@
+<template>
+  <q-layout>
+    <q-page-container>
+      <q-page class="flex bg-image flex-center">
+        <q-card
+          v-bind:style="$q.screen.lt.sm ? { width: '80%' } : { width: '30%' }">
+          <q-card-section>
+            <q-img
+              fit="scale-down"
+              src="~assets/oysqn_logo.png" />
+          </q-card-section>
+          <q-card-section>
+            <div class="text-center q-pt-sm">
+              <div class="col text-h6">Sign Up</div>
+            </div>
+          </q-card-section>
+          <q-form>
+            <q-card-section class="q-gutter-md">
+              <q-input
+                v-model="email"
+                label="E-Mail"
+                type="email"
+                color="darkblue"
+                :rules="['email']"
+                filled></q-input>
+              <NewPasswordComponent v-model="password" />
+              <q-card-actions>
+                <q-space />
+                <q-btn
+                  type="button"
+                  @click="doRegister"
+                  label="Sign Up"
+                  color="primary"></q-btn>
+              </q-card-actions>
+            </q-card-section>
+          </q-form>
+        </q-card>
+      </q-page>
+    </q-page-container>
+  </q-layout>
+</template>
+
+<style>
+.bg-image {
+  background-image: url('/src/assets/oys_lighthouse.jpg');
+  background-repeat: no-repeat;
+  background-position-x: center;
+  background-size: cover;
+  /* background-image: linear-gradient(
+    135deg,
+    #ed232a 0%,
+    #ffffff 75%,
+    #14539a 100%
+  ); */
+}
+</style>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useAuthStore } from 'src/stores/auth';
+import NewPasswordComponent from 'src/components/NewPasswordComponent.vue';
+import { Dialog } from 'quasar';
+import { useRouter } from 'vue-router';
+
+const email = ref('');
+const password = ref('');
+const router = useRouter();
+
+console.log('version:' + process.env.VUE_APP_VERSION);
+
+const doRegister = async () => {
+  if (email.value && password.value) {
+    try {
+      await useAuthStore().register(email.value, password.value);
+      Dialog.create({
+        message: 'Account Created!  Now log-in with your e-mail / password.',
+      }).onOk(() => router.replace('/login'));
+    } catch (e) {
+      console.log(e);
+      Dialog.create({
+        message: 'An error occurred.  Please ask for support in Discord',
+      });
+    }
+  }
+};
+</script>
--- a/src/pages/TermsOfServicePage.vue
+++ b/src/pages/TermsOfServicePage.vue
@@ -1,119 +1,128 @@
 <template>
-  <q-page padding>
-    <h1>Website Terms and Conditions of Use</h1>
+  <q-layout>
+    <q-page-container>
+      <q-page padding>
+        <h1>Website Terms and Conditions of Use</h1>

-    <h2>1. Terms</h2>
+        <h2>1. Terms</h2>

-    <p>
-      By accessing this Website, accessible from https://bab.toal.ca, you are
-      agreeing to be bound by these Website Terms and Conditions of Use and
-      agree that you are responsible for the agreement with any applicable local
-      laws. If you disagree with any of these terms, you are prohibited from
-      accessing this site. The materials contained in this Website are protected
-      by copyright and trade mark law.
-    </p>
+        <p>
+          By accessing this Website, accessible from https://undock.ca, you are
+          agreeing to be bound by these Website Terms and Conditions of Use and
+          agree that you are responsible for the agreement with any applicable
+          local laws. If you disagree with any of these terms, you are
+          prohibited from accessing this site. The materials contained in this
+          Website are protected by copyright and trade mark law.
+        </p>

-    <h2>2. Use License</h2>
+        <h2>2. Use License</h2>

-    <p>
-      Permission is granted to temporarily download one copy of the materials on
-      bab.toal.ca's Website for personal, non-commercial transitory viewing
-      only. This is the grant of a license, not a transfer of title, and under
-      this license you may not:
-    </p>
+        <p>
+          Permission is granted to temporarily download one copy of the
+          materials on undock.ca's Website for personal, non-commercial
+          transitory viewing only. This is the grant of a license, not a
+          transfer of title, and under this license you may not:
+        </p>

-    <ul>
-      <li>modify or copy the materials;</li>
-      <li>
-        use the materials for any commercial purpose or for any public display;
-      </li>
-      <li>
-        attempt to reverse engineer any software contained on bab.toal.ca's
-        Website;
-      </li>
-      <li>
-        remove any copyright or other proprietary notations from the materials;
-        or
-      </li>
-      <li>
-        transferring the materials to another person or "mirror" the materials
-        on any other server.
-      </li>
-    </ul>
+        <ul>
+          <li>modify or copy the materials;</li>
+          <li>
+            use the materials for any commercial purpose or for any public
+            display;
+          </li>
+          <li>
+            attempt to reverse engineer any software contained on undock.ca's
+            Website;
+          </li>
+          <li>
+            remove any copyright or other proprietary notations from the
+            materials; or
+          </li>
+          <li>
+            transferring the materials to another person or "mirror" the
+            materials on any other server.
+          </li>
+        </ul>

-    <p>
-      This will let bab.toal.ca to terminate upon violations of any of these
-      restrictions. Upon termination, your viewing right will also be terminated
-      and you should destroy any downloaded materials in your possession whether
-      it is printed or electronic format. These Terms of Service has been
-      created with the help of the
-      <a href="https://www.termsofservicegenerator.net"
-        >Terms Of Service Generator</a
-      >.
-    </p>
+        <p>
+          This will let undock.ca to terminate upon violations of any of these
+          restrictions. Upon termination, your viewing right will also be
+          terminated and you should destroy any downloaded materials in your
+          possession whether it is printed or electronic format. These Terms of
+          Service has been created with the help of the
+          <a href="https://www.termsofservicegenerator.net">
+            Terms Of Service Generator
+          </a>
+          .
+        </p>

-    <h2>3. Disclaimer</h2>
+        <h2>3. Disclaimer</h2>

-    <p>
-      All the materials on bab.toal.ca's Website are provided "as is".
-      bab.toal.ca makes no warranties, may it be expressed or implied, therefore
-      negates all other warranties. Furthermore, bab.toal.ca does not make any
-      representations concerning the accuracy or reliability of the use of the
-      materials on its Website or otherwise relating to such materials or any
-      sites linked to this Website.
-    </p>
+        <p>
+          All the materials on undock.ca's Website are provided "as is".
+          undock.ca makes no warranties, may it be expressed or implied,
+          therefore negates all other warranties. Furthermore, undock.ca does
+          not make any representations concerning the accuracy or reliability of
+          the use of the materials on its Website or otherwise relating to such
+          materials or any sites linked to this Website.
+        </p>

-    <h2>4. Limitations</h2>
+        <h2>4. Limitations</h2>

-    <p>
-      bab.toal.ca or its suppliers will not be hold accountable for any damages
-      that will arise with the use or inability to use the materials on
-      bab.toal.ca's Website, even if bab.toal.ca or an authorize representative
-      of this Website has been notified, orally or written, of the possibility
-      of such damage. Some jurisdiction does not allow limitations on implied
-      warranties or limitations of liability for incidental damages, these
-      limitations may not apply to you.
-    </p>
+        <p>
+          undock.ca or its suppliers will not be hold accountable for any
+          damages that will arise with the use or inability to use the materials
+          on undock.ca's Website, even if bab.toal.ca or an authorize
+          representative of this Website has been notified, orally or written,
+          of the possibility of such damage. Some jurisdiction does not allow
+          limitations on implied warranties or limitations of liability for
+          incidental damages, these limitations may not apply to you.
+        </p>

-    <h2>5. Revisions and Errata</h2>
+        <h2>5. Revisions and Errata</h2>

-    <p>
-      The materials appearing on bab.toal.ca's Website may include technical,
-      typographical, or photographic errors. bab.toal.ca will not promise that
-      any of the materials in this Website are accurate, complete, or current.
-      bab.toal.ca may change the materials contained on its Website at any time
-      without notice. bab.toal.ca does not make any commitment to update the
-      materials.
-    </p>
+        <p>
+          The materials appearing on undock.ca's Website may include technical,
+          typographical, or photographic errors. undock.ca will not promise that
+          any of the materials in this Website are accurate, complete, or
+          current. undock.ca may change the materials contained on its Website
+          at any time without notice. undock.ca does not make any commitment to
+          update the materials.
+        </p>

-    <h2>6. Links</h2>
+        <h2>6. Links</h2>

-    <p>
-      bab.toal.ca has not reviewed all of the sites linked to its Website and is
-      not responsible for the contents of any such linked site. The presence of
-      any link does not imply endorsement by bab.toal.ca of the site. The use of
-      any linked website is at the user's own risk.
-    </p>
+        <p>
+          undock.ca has not reviewed all of the sites linked to its Website and
+          is not responsible for the contents of any such linked site. The
+          presence of any link does not imply endorsement by undock.ca of the
+          site. The use of any linked website is at the user's own risk.
+        </p>

-    <h2>7. Site Terms of Use Modifications</h2>
+        <h2>7. Site Terms of Use Modifications</h2>

-    <p>
-      bab.toal.ca may revise these Terms of Use for its Website at any time
-      without prior notice. By using this Website, you are agreeing to be bound
-      by the current version of these Terms and Conditions of Use.
-    </p>
+        <p>
+          undock.ca may revise these Terms of Use for its Website at any time
+          without prior notice. By using this Website, you are agreeing to be
+          bound by the current version of these Terms and Conditions of Use.
+        </p>

-    <h2>8. Your Privacy</h2>
+        <h2>8. Your Privacy</h2>

-    <p>Please read our Privacy Policy.</p>
+        <p>
+          Please read our
+          <a href="/privacy-policy">Privacy Policy.</a>
+        </p>

-    <h2>9. Governing Law</h2>
+        <h2>9. Governing Law</h2>

-    <p>
-      Any claim related to bab.toal.ca's Website shall be governed by the laws
-      of ca without regards to its conflict of law provisions.
-    </p>
-  </q-page>
+        <p>
+          Any claim related to undock.ca's Website shall be governed by the laws
+          of ca without regards to its conflict of law provisions.
+        </p>
+      </q-page>
+    </q-page-container>
+  </q-layout>
 </template>

 <script setup lang="ts"></script>
--- a/src/pages/schedule/BoatReservationPage.vue
+++ b/src/pages/schedule/BoatReservationPage.vue
@@ -1,217 +1,27 @@
 <template>
-  <div class="q-pa-xs row q-gutter-xs">
-    <q-card
-      flat
-      class="col-lg-4 col-md-6 col-sm-8 col-xs-12">
-      <q-card-section>
-        <div class="text-h5 q-mt-none q-mb-xs">New Booking</div>
-        <div class="text-caption text-grey-8">for: {{ bookingForm.name }}</div>
-      </q-card-section>
-      <q-list class="q-px-xs">
-        <q-separator />
-        <q-item
-          class="q-px-none"
-          clickable
-          @click="boatSelect = true">
-          <q-item-section>
-            <q-card
-              v-if="bookingForm.boat"
-              flat>
-              <q-card-section>
-                <q-img
-                  :src="bookingForm.boat?.imgSrc"
-                  :fit="'scale-down'">
-                  <div class="row absolute-top">
-                    <div class="col text-h7 text-left">
-                      {{ bookingForm.boat?.name }}
-                    </div>
-                    <div class="col text-right text-caption">
-                      {{ bookingForm.boat?.class }}
-                    </div>
-                  </div>
-                </q-img>
-              </q-card-section>
-              <q-separator />
-              <q-card-section horizontal>
-                <q-card-section>
-                  <q-list
-                    dense
-                    class="row">
-                    <q-item>
-                      <q-item-section avatar>
-                        <q-badge
-                          color="primary"
-                          label="Start" />
-                      </q-item-section>
-                      <q-item-section class="text-body2">
-                        {{ formatDate(bookingForm.startDate) }}
-                      </q-item-section>
-                    </q-item>
-                    <q-item class="q-ma-none">
-                      <q-item-section avatar>
-                        <q-badge
-                          color="primary"
-                          label="End" />
-                      </q-item-section>
-                      <q-item-section class="text-body2">
-                        {{ formatDate(bookingForm.endDate) }}
-                      </q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-card-section>
-                <q-separator vertical />
-                <q-card-section class="col-3 flex flex-center bg-grey-4">
-                  {{ bookingDuration.hours }} hours
-                  <div v-if="bookingDuration.minutes">
-                    <q-separator />
-                    {{ bookingDuration.minutes }} mins
-                  </div>
-                </q-card-section>
-              </q-card-section>
-            </q-card>
-            <q-field
-              readonly
-              filled
-              v-else>
-              Tap to Select a Boat / Time
-            </q-field>
-          </q-item-section>
-        </q-item>
-        <q-item class="q-px-none">
-          <q-item-section>
-            <q-select
-              filled
-              v-model="bookingForm.reason"
-              :options="reason_options"
-              label="Reason for sail" />
-          </q-item-section>
-        </q-item>
-        <q-item class="q-px-none">
-          <q-item-section>
-            <q-input
-              v-model="bookingForm.comment"
-              clearable
-              autogrow
-              filled
-              label="Additional Comments (optional)" />
-          </q-item-section>
-        </q-item>
-      </q-list>
-      <q-card-actions align="right">
-        <q-btn
-          label="Reset"
-          @click="onReset"
-          color="secondary"
-          size="md" />
-        <q-btn
-          label="Submit"
-          @click="onSubmit"
-          color="primary" />
-      </q-card-actions>
-    </q-card>
-    <q-dialog
-      v-model="boatSelect"
-      full-width>
-      <BoatScheduleTableComponent v-model="interval" />
-    </q-dialog>
-  </div>
+  <BoatReservationComponent v-model="newReservation" />
 </template>

 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-import { useAuthStore } from 'src/stores/auth';
-import { Boat, useBoatStore } from 'src/stores/boat';
-import { useQuasar } from 'quasar';
+import BoatReservationComponent from 'src/components/BoatReservationComponent.vue';
+import { useIntervalStore } from 'src/stores/interval';
 import { Interval, Reservation } from 'src/stores/schedule.types';
-import BoatScheduleTableComponent from 'src/components/scheduling/boat/BoatScheduleTableComponent.vue';
-import { getNewId } from 'src/utils/misc';
-import { formatDate } from 'src/utils/schedule';
-import { useRouter } from 'vue-router';
-import { useReservationStore } from 'src/stores/reservation';
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';

-interface BookingForm {
-  bookingId: string;
-  name?: string;
-  boat?: Boat;
-  startDate?: string;
-  endDate?: string;
-  reason: string;
-  members: { name: string }[];
-  guests: { name: string }[];
-  comment?: string;
+const $route = useRoute();
+const newReservation = ref<Reservation>();
+
+if (typeof $route.query.interval === 'string') {
+  useIntervalStore()
+    .fetchInterval($route.query.interval)
+    .then(
+      (interval: Interval) =>
+        (newReservation.value = <Reservation>{
+          resource: interval.resource,
+          start: interval.start,
+          end: interval.end,
+        })
+    );
 }
-
-const reason_options = ['Open Sail', 'Private Sail', 'Racing', 'Other'];
-
-const auth = useAuthStore();
-const interval = ref<Interval>();
-const newForm = {
-  bookingId: getNewId(),
-  name: auth.currentUser?.name,
-  boat: <Boat | undefined>undefined,
-  startDate: '',
-  endDate: '',
-  reason: 'Open Sail',
-  members: [],
-  guests: [],
-  comment: '',
-};
-const bookingForm = ref<BookingForm>({ ...newForm });
-const router = useRouter();
-const reservationStore = useReservationStore();
-const $q = useQuasar();
-const boatSelect = ref(false);
-
-watch(interval, (new_interval) => {
-  bookingForm.value.boat = useBoatStore().boats.find(
-    (b) => b.$id === new_interval?.boatId
-  );
-  bookingForm.value.startDate = new_interval?.start;
-  bookingForm.value.endDate = new_interval?.end;
-});
-
-const bookingDuration = computed((): { hours: number; minutes: number } => {
-  if (bookingForm.value.startDate && bookingForm.value.endDate) {
-    const start = new Date(bookingForm.value.startDate).getTime();
-    const end = new Date(bookingForm.value.endDate).getTime();
-    const delta = Math.abs(end - start) / 1000;
-    const hours = Math.floor(delta / 3600) % 24;
-    const minutes = Math.floor(delta - hours * 3600) % 60;
-    return { hours: hours, minutes: minutes };
-  }
-  return { hours: 0, minutes: 0 };
-});
-
-const onReset = () => {
-  interval.value = undefined;
-  bookingForm.value = { ...newForm };
-};
-const onSubmit = () => {
-  const booking = bookingForm.value;
-  if (
-    !(booking.boat && booking.startDate && booking.endDate && auth.currentUser)
-  ) {
-    // TODO: Make a proper validator
-    return;
-  }
-  const reservation = <Reservation>{
-    resource: booking.boat.$id,
-    start: booking.startDate,
-    end: booking.endDate,
-    user: auth.currentUser.$id,
-    status: 'confirmed',
-    reason: booking.reason,
-    comment: booking.comment,
-  };
-  console.log(reservation);
-  // TODO: Fix this.  It will always look successful
-  reservationStore.createReservation(reservation); // Probably should pass the notify as a callback to the reservation creation.
-  $q.notify({
-    color: 'green-4',
-    textColor: 'white',
-    icon: 'cloud_done',
-    message: 'Submitted',
-  });
-  router.go(-1);
-};
 </script>
--- a/src/pages/schedule/BoatScheduleView.vue
+++ b/src/pages/schedule/BoatScheduleView.vue
@@ -1,10 +1,12 @@
 <template>
-  <q-page padding>
-    <q-card class="subcontent">
+  <q-page>
+    <div class="col">
      <navigation-bar
        @today="onToday"
        @prev="onPrev"
        @next="onNext" />
+    </div>
+    <div class="col q-ma-sm">
      <q-calendar-scheduler
        ref="calendar"
        v-model="selectedDate"
@@ -13,70 +15,86 @@
        resource-label="displayName"
        :weekdays="[1, 2, 3, 4, 5, 6, 0]"
        :view="$q.screen.gt.md ? 'week' : 'day'"
-        bordered
+        v-touch-swipe.mouse.left.right="handleSwipe"
+        :max-days="$q.screen.lt.sm ? 3 : 7"
        animated
-        day-min-height="50px"
-        @change="onChange"
-        @moved="onMoved"
-        @click-date="onClickDate"
-        @click-time="onClickTime"
-        @click-interval="onClickInterval"
-        @click-head-day="onClickHeadDay">
+        bordered
+        style="--calendar-resources-width: 40px">
        <template #day="{ scope }">
          <div
-            v-for="event in boatReservationEvents(scope)"
-            :key="event.id">
-            <div
-              v-if="event.start !== undefined"
-              class="booking-event">
-              <span class="title q-calendar__ellipsis">
-                {{ useAuthStore().getUserNameById(event.user) }} @
-                {{ renderTime(event.start) }}
-                <q-tooltip>
-                  {{ renderTime(event.start) + ' - ' + renderTime(event.end) }}
-                </q-tooltip>
-              </span>
-            </div>
+            v-for="interval in getSortedIntervals(
+              scope.timestamp,
+              scope.resource
+            )"
+            :key="interval.$id"
+            class="q-pb-xs row"
+            @click="createReservationFromInterval(interval)">
+            <q-badge
+              multi-line
+              :class="!interval.user ? 'cursor-pointer' : null"
+              class="col-12 q-pa-sm"
+              :transparent="interval.user != undefined"
+              :color="interval.user ? 'secondary' : 'primary'"
+              :outline="!interval.user"
+              :id="interval.id">
+              {{
+                interval.user
+                  ? useAuthStore().getUserNameById(interval.user)
+                  : 'Available'
+              }}
+              <br />
+              {{ formatTime(interval.start) }} to
+              <br />
+              {{ formatTime(interval.end) }}
+            </q-badge>
          </div>
        </template>
      </q-calendar-scheduler>
-    </q-card>
+    </div>
  </q-page>
 </template>

 <script setup lang="ts">
 import { useReservationStore } from 'src/stores/reservation';
-import { onMounted, ref } from 'vue';
+import { ref } from 'vue';
 import { useAuthStore } from 'src/stores/auth';

 const reservationStore = useReservationStore();
-import { getDate, today } from '@quasar/quasar-ui-qcalendar';
+import { getDate } from '@quasar/quasar-ui-qcalendar';
 import { QCalendarScheduler } from '@quasar/quasar-ui-qcalendar';
 import { Timestamp } from '@quasar/quasar-ui-qcalendar';
 import { Boat, useBoatStore } from 'src/stores/boat';
 import NavigationBar from 'src/components/scheduling/NavigationBar.vue';
 import { useQuasar } from 'quasar';
+import { formatTime } from 'src/utils/schedule';
+import { useIntervalStore } from 'src/stores/interval';
+import { Interval, Reservation } from 'src/stores/schedule.types';
+import { useRouter } from 'vue-router';
+import { storeToRefs } from 'pinia';

-const selectedDate = ref(today());
 const boatStore = useBoatStore();
 const calendar = ref();
 const $q = useQuasar();
+const $router = useRouter();
+const { getAvailableIntervals } = useIntervalStore();
+const { selectedDate } = storeToRefs(useIntervalStore());
+const currentUser = useAuthStore().currentUser;

-interface DayScope {
-  timestamp: Timestamp;
-  columnIndex: number;
-  resource: object;
-  resourceIndex: number;
-  indentLevel: number;
-  activeDate: boolean;
-  droppable: boolean;
-}
+// interface DayScope {
+//   timestamp: Timestamp;
+//   columnIndex: number;
+//   resource: object;
+//   resourceIndex: number;
+//   indentLevel: number;
+//   activeDate: boolean;
+//   droppable: boolean;
+// }

-const renderTime = (dateString: string) => {
-  const date = new Date(dateString);
-  return date.toLocaleTimeString();
+const getSortedIntervals = (timestamp: Timestamp, boat?: Boat): Interval[] => {
+  return getAvailableIntervals(timestamp, boat)
+    .value.concat(boatReservationEvents(timestamp, boat))
+    .sort((a, b) => Date.parse(a.start) - Date.parse(b.start));
 };
-onMounted(() => boatStore.fetchBoats());
 // Method declarations

 // function slotStyle(
@@ -98,30 +116,34 @@ onMounted(() => boatStore.fetchBoats());
 //   return s;
 // }

-function boatReservationEvents({ timestamp, resource }: DayScope) {
+const createReservationFromInterval = (interval: Interval | Reservation) => {
+  if (interval.user) {
+    if (interval.user === currentUser?.$id) {
+      $router.push({ name: 'edit-reservation', params: { id: interval.$id } });
+    } else {
+      return false;
+    }
+  } else {
+    $router.push({
+      name: 'reserve-boat',
+      query: { interval: interval.$id },
+    });
+  }
+};
+
+function handleSwipe({ ...event }) {
+  event.direction === 'right' ? calendar.value?.prev() : calendar.value?.next();
+}
+const boatReservationEvents = (
+  timestamp: Timestamp,
+  resource: Boat | undefined
+): Reservation[] => {
+  if (!resource) return [] as Reservation[];
  return reservationStore.getReservationsByDate(
    getDate(timestamp),
    (resource as Boat).$id
-  );
-}
-function onMoved(data: Event) {
-  console.log('onMoved', data);
-}
-function onChange(data: Event) {
-  console.log('onChange', data);
-}
-function onClickDate(data: Event) {
-  console.log('onClickDate', data);
-}
-function onClickTime(data: Event) {
-  console.log('onClickTime', data);
-}
-function onClickInterval(data: Event) {
-  console.log('onClickInterval', data);
-}
-function onClickHeadDay(data: Event) {
-  console.log('onClickHeadDay', data);
-}
+  ).value;
+};
 function onToday() {
  calendar.value.moveToToday();
 }
@@ -133,24 +155,9 @@ function onNext() {
 }
 </script>

-<style lang="sass" scoped>
-
-.booking-event
-  position: absolute
-  font-size: 12px
-  justify-content: space-evenly
-  margin: 0 1px
-  text-overflow: ellipsis
-  overflow: hidden
+<style lang="sass">
+.q-calendar-scheduler__resource
+  background-color: $primary
  color: white
-  max-width: 100%
-  background: #027BE3FF
-  cursor: pointer
-
-.title
-  position: relative
-  display: flex
-  justify-content: center
-  align-items: center
-  height: 100%
+  font-weight: bold
 </style>
--- a/src/pages/schedule/ListBookingsPage.vue
+++ b/src/pages/schedule/ListBookingsPage.vue
@@ -1,179 +0,0 @@
-<template>
-  <q-card
-    clas="q-ma-md"
-    bordered
-    v-if="!reservations">
-    <q-card-section>
-      <div class="text-h6">You don't have any bookings!</div>
-      <div class="text-h8">Why don't you go make one?</div>
-    </q-card-section>
-    <q-card-actions>
-      <q-btn
-        color="primary"
-        icon="event"
-        :size="`1.25em`"
-        label="Book Now"
-        rounded
-        class="full-width"
-        :align="'left'"
-        to="/schedule/book" />
-    </q-card-actions>
-  </q-card>
-  <template
-    v-else
-    v-for="(reservation, index) in sortedBookings"
-    :key="reservation.$id">
-    <q-toolbar
-      class="bg-secondary glossy text-white"
-      v-if="showMarker(index, sortedBookings)">
-      Past
-    </q-toolbar>
-    <q-card
-      bordered
-      :class="isPast(reservation.end) ? 'text-blue-grey-6' : ''"
-      class="q-ma-md">
-      <q-card-section>
-        <div class="row items-center no-wrap">
-          <div class="col">
-            <div class="text-h6">
-              {{ boatStore.getBoatById(reservation.resource)?.name }}
-            </div>
-            <div class="text-subtitle2">
-              <p>
-                Start: {{ formatDate(reservation.start) }}
-                <br />
-                End: {{ formatDate(reservation.end) }}
-              </p>
-            </div>
-          </div>
-          <!-- <div class="col-auto">
-            <q-btn
-              color="grey-7"
-              round
-              flat
-              icon="more_vert">
-              <q-menu
-                cover
-                auto-close>
-                <q-list>
-                  <q-item clickable>
-                    <q-item-section>remove card</q-item-section>
-                  </q-item>
-                  <q-item clickable>
-                    <q-item-section>send feedback</q-item-section>
-                  </q-item>
-                  <q-item clickable>
-                    <q-item-section>share</q-item-section>
-                  </q-item>
-                </q-list>
-              </q-menu>
-            </q-btn>
-          </div> -->
-        </div>
-      </q-card-section>
-
-      <!-- <q-card-section>Some more information here...</q-card-section> -->
-
-      <q-separator />
-
-      <q-card-actions v-if="!isPast(reservation.end)">
-        <q-btn
-          flat
-          @click="modifyReservation(reservation)">
-          Modify
-        </q-btn>
-        <q-btn
-          flat
-          @click="cancelReservation(reservation)">
-          Cancel
-        </q-btn>
-      </q-card-actions>
-    </q-card>
-  </template>
-  <q-dialog v-model="cancelDialog">
-    <q-card>
-      <q-card-section class="row items-center">
-        <q-avatar
-          icon="stop"
-          color="negative"
-          text-color="white" />
-        <span class="q-ml-sm">
-          This will delete your reservation for
-          {{ boatStore.getBoatById(currentReservation?.resource) }} on
-          {{ formatDate(currentReservation?.start) }}
-        </span>
-      </q-card-section>
-
-      <q-card-actions align="right">
-        <q-btn
-          flat
-          label="Cancel"
-          color="primary"
-          v-close-popup />
-        <q-btn
-          flat
-          label="Delete"
-          color="negative"
-          @click="reservationStore.deleteReservation(Reservation)"
-          v-close-popup />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
-<script setup lang="ts">
-import { useBoatStore } from 'src/stores/boat';
-import { useReservationStore } from 'src/stores/reservation';
-import { Reservation } from 'src/stores/schedule.types';
-import { formatDate } from 'src/utils/schedule';
-import { computed, onMounted, ref } from 'vue';
-
-const reservationStore = useReservationStore();
-const reservations = reservationStore.getUserReservations();
-const boatStore = useBoatStore();
-const currentReservation = ref<Reservation>();
-const cancelDialog = ref(false);
-
-const sortedBookings = computed(() =>
-  reservations.value
-    ?.slice()
-    .sort((a, b) => new Date(b.start).getTime() - new Date(a.start).getTime())
-);
-
-const isPast = (itemDate: Date | string): boolean => {
-  if (!(itemDate instanceof Date)) {
-    itemDate = new Date(itemDate);
-  }
-  console.log(itemDate);
-  const currentDate = new Date();
-  return itemDate < currentDate;
-};
-
-const showMarker = (
-  index: number,
-  items: Reservation[] | undefined
-): boolean => {
-  if (!items) return false;
-
-  const currentItemDate = new Date(items[index].start);
-  const nextItemDate = index > 0 ? new Date(items[index - 1].start) : null;
-
-  // Show marker if current item is past and the next item is future or vice versa
-  return (
-    isPast(currentItemDate) && (nextItemDate === null || !isPast(nextItemDate))
-  );
-};
-
-const cancelReservation = (reservation: Reservation) => {
-  currentReservation.value = reservation;
-  cancelDialog.value = true;
-};
-
-const modifyReservation = (reservation: Reservation) => {
-  return reservation;
-};
-
-onMounted(() => {
-  boatStore.fetchBoats();
-  reservationStore.fetchUserReservations();
-});
-</script>
--- a/src/pages/schedule/ListReservationsPage.vue
+++ b/src/pages/schedule/ListReservationsPage.vue
@@ -0,0 +1,86 @@
+<template>
+  <q-tabs
+    v-model="tab"
+    inline-label
+    class="text-primary">
+    <q-tab
+      name="upcoming"
+      icon="schedule"
+      label="Upcoming" />
+    <q-tab
+      name="past"
+      icon="history"
+      label="Past" />
+  </q-tabs>
+  <q-separator />
+
+  <q-tab-panels
+    v-model="tab"
+    animated>
+    <q-tab-panel
+      name="upcoming"
+      class="q-pa-none">
+      <q-card
+        clas="q-ma-md"
+        v-if="!reservationStore.futureUserReservations.length">
+        <q-card-section>
+          <div class="text-h6">You don't have any upcoming bookings!</div>
+          <div class="text-h8">Why don't you go make one?</div>
+        </q-card-section>
+        <q-card-actions>
+          <q-btn
+            color="primary"
+            icon="event"
+            :size="`1.25em`"
+            label="Book Now"
+            rounded
+            class="full-width"
+            :align="'left'"
+            to="/schedule/book" />
+        </q-card-actions>
+      </q-card>
+      <div v-else>
+        <div
+          v-for="reservation in reservationStore.futureUserReservations"
+          :key="reservation.$id">
+          <ReservationCardComponent :modelValue="reservation" />
+        </div>
+      </div>
+    </q-tab-panel>
+    <q-tab-panel
+      name="past"
+      class="q-pa-none">
+      <div
+        v-for="reservation in reservationStore.pastUserReservations"
+        :key="reservation.$id">
+        <ReservationCardComponent :modelValue="reservation" />
+      </div>
+    </q-tab-panel>
+  </q-tab-panels>
+</template>
+<script setup lang="ts">
+import { useReservationStore } from 'src/stores/reservation';
+import ReservationCardComponent from 'src/components/scheduling/ReservationCardComponent.vue';
+import { onMounted, ref } from 'vue';
+
+const reservationStore = useReservationStore();
+
+onMounted(() => useReservationStore().fetchUserReservations());
+
+const tab = ref('upcoming');
+
+// const showMarker = (
+//   index: number,
+//   items: Reservation[] | undefined
+// ): boolean => {
+//   if (!items) return false;
+
+//   const currentItemDate = new Date(items[index].start);
+//   const nextItemDate = index > 0 ? new Date(items[index - 1].start) : null;
+
+//   // Show marker if current item is past and the next item is future or vice versa
+//   return (
+//     isPast(currentItemDate) && (nextItemDate === null || !isPast(nextItemDate))
+//   );
+// };
+</script>
--- a/src/pages/schedule/ManageCalendar.vue
+++ b/src/pages/schedule/ManageCalendar.vue
@@ -1,8 +1,13 @@
 <template>
  <div class="fit row wrap justify-start items-start content-start">
    <div class="q-pa-md">
-      <div class="scheduler" style="max-width: 1200px">
-        <NavigationBar @next="onNext" @today="onToday" @prev="onPrev" />
+      <div
+        class="scheduler"
+        style="max-width: 1200px">
+        <NavigationBar
+          @next="onNext"
+          @today="onToday"
+          @prev="onPrev" />
        <q-calendar-scheduler
          ref="calendar"
          v-model="selectedDate"
@@ -18,26 +23,23 @@
          :drag-leave-func="onDragLeave"
          :drop-func="onDrop"
          day-min-height="50px"
-          cell-width="150px"
-        >
+          cell-width="150px">
          <template #day="{ scope }">
            <div
-              v-if="filteredIntervals(scope.timestamp, scope.resource).length"
+              v-if="
+                filteredIntervals(scope.timestamp, scope.resource).value.length
+              "
              style="
                display: flex;
                flex-wrap: wrap;
                justify-content: space-evenly;
                align-items: center;
                font-size: 12px;
-              "
-            >
+              ">
              <template
-                v-for="block in sortedIntervals(
-                  scope.timestamp,
-                  scope.resource
-                )"
-                :key="block.id"
-              >
+                v-for="block in sortedIntervals(scope.timestamp, scope.resource)
+                  .value"
+                :key="block.id">
                <q-chip class="cursor-pointer">
                  {{ date.formatDate(block.start, 'HH:mm') }} -
                  {{ date.formatDate(block.end, 'HH:mm') }}
@@ -77,46 +79,53 @@
                          ).toISOString())
                      "
                    />
-                  </q-popup-edit>--> </q-chip
-                ><q-btn
+                  </q-popup-edit>-->
+                </q-chip>
+                <q-btn
                  size="xs"
                  icon="delete"
                  round
-                  @click="deleteBlock(block)"
-                />
+                  @click="deleteBlock(block)" />
              </template>
            </div>
          </template>
        </q-calendar-scheduler>
      </div>
    </div>
-    <div class="q-pa-md" style="width: 400px">
-      <q-list padding bordered class="rounded-borders">
+    <div
+      class="q-pa-md"
+      style="width: 400px">
+      <q-list
+        padding
+        bordered
+        class="rounded-borders">
        <q-item>
          <q-item-section>
            <q-item-label overline>Availability Templates</q-item-label>
-            <q-item-label caption
-              >Drag and drop a template to a boat / date to create booking
-              availability</q-item-label
-            >
+            <q-item-label caption>
+              Drag and drop a template to a boat / date to create booking
+              availability
+            </q-item-label>
          </q-item-section>
        </q-item>
        <q-card-actions align="right">
-          <q-btn label="Add Template" color="primary" @click="createTemplate" />
+          <q-btn
+            label="Add Template"
+            color="primary"
+            @click="createTemplate" />
        </q-card-actions>
-        <q-item v-if="newTemplate.$id === 'unsaved'"
-          ><IntervalTemplateComponent
+        <q-item v-if="newTemplate.$id === 'unsaved'">
+          <IntervalTemplateComponent
            :model-value="newTemplate"
            :edit="true"
            @cancel="resetNewTemplate"
-            @saved="resetNewTemplate"
-        /></q-item>
+            @saved="resetNewTemplate" />
+        </q-item>
        <q-separator spaced />
        <IntervalTemplateComponent
          v-for="template in intervalTemplates"
          :key="template.$id"
-          :model-value="template"
-        />
+          :model-value="template" />
      </q-list>
    </div>
  </div>
@@ -127,16 +136,23 @@
      </q-card-section>
      <q-card-section class="q-pt-none">
        Conflicting times! Please delete overlapped items!
-        <q-chip v-for="item in overlapped" :key="item.index"
-          >{{ boats.find((b) => b.$id === item.boatId)?.name }}:
+        <q-chip
+          v-for="item in overlapped"
+          :key="item.index">
+          {{ boats.find((b) => b.$id === item.boatId)?.name }}:
          {{ date.formatDate(item.start, 'hh:mm') }} -
          {{ date.formatDate(item.end, 'hh:mm') }}
        </q-chip>
      </q-card-section>
      <q-card-actions align="right">
-        <q-btn flat label="OK" color="primary" v-close-popup />
-      </q-card-actions> </q-card
-  ></q-dialog>
+        <q-btn
+          flat
+          label="OK"
+          color="primary"
+          v-close-popup />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>

 <script setup lang="ts">
@@ -146,8 +162,8 @@ import {
  today,
 } from '@quasar/quasar-ui-qcalendar';
 import { Boat, useBoatStore } from 'src/stores/boat';
-import { useScheduleStore } from 'src/stores/schedule';
-import { onMounted, ref } from 'vue';
+import { useIntervalStore } from 'src/stores/interval';
+import { computed, onMounted, ref } from 'vue';
 import type {
  Interval,
  IntervalTemplate,
@@ -158,12 +174,14 @@ import IntervalTemplateComponent from 'src/components/scheduling/IntervalTemplat
 import NavigationBar from 'src/components/scheduling/NavigationBar.vue';
 import { storeToRefs } from 'pinia';
 import { buildInterval, intervalsOverlapped } from 'src/utils/schedule';
+import { useIntervalTemplateStore } from 'src/stores/intervalTemplate';

 const selectedDate = ref(today());
 const { fetchBoats } = useBoatStore();
-const scheduleStore = useScheduleStore();
+const intervalStore = useIntervalStore();
+const intervalTemplateStore = useIntervalTemplateStore();
 const { boats } = storeToRefs(useBoatStore());
-const intervalTemplates = scheduleStore.getIntervalTemplates();
+const intervalTemplates = intervalTemplateStore.getIntervalTemplates();
 const calendar = ref();
 const overlapped = ref();
 const alert = ref(false);
@@ -182,16 +200,18 @@ const newTemplate = ref<IntervalTemplate>({

 onMounted(async () => {
  await fetchBoats();
-  await scheduleStore.fetchIntervalTemplates();
+  await intervalTemplateStore.fetchIntervalTemplates();
 });

 const filteredIntervals = (date: Timestamp, boat: Boat) => {
-  return scheduleStore.getIntervals(date, boat);
+  return intervalStore.getIntervals(date, boat);
 };

 const sortedIntervals = (date: Timestamp, boat: Boat) => {
-  return filteredIntervals(date, boat).sort(
-    (a, b) => Date.parse(a.start) - Date.parse(b.start)
+  return computed(() =>
+    filteredIntervals(date, boat).value.sort(
+      (a, b) => Date.parse(a.start) - Date.parse(b.start)
+    )
  );
 };

@@ -207,11 +227,11 @@ function createTemplate() {
 }
 function createIntervals(boat: Boat, templateId: string, date: string) {
  const intervals = intervalsFromTemplate(boat, templateId, date);
-  intervals.forEach((interval) => scheduleStore.createInterval(interval));
+  intervals.forEach((interval) => intervalStore.createInterval(interval));
 }

 function getIntervals(date: Timestamp, boat: Boat) {
-  return scheduleStore.getIntervals(date, boat);
+  return intervalStore.getIntervals(date, boat);
 }

 function intervalsFromTemplate(
@@ -219,7 +239,7 @@ function intervalsFromTemplate(
  templateId: string,
  date: string
 ): Interval[] {
-  const template = scheduleStore
+  const template = intervalTemplateStore
    .getIntervalTemplates()
    .value.find((t) => t.$id === templateId);
  return template
@@ -231,18 +251,14 @@ function intervalsFromTemplate(

 function deleteBlock(block: Interval) {
  if (block.$id) {
-    scheduleStore.deleteInterval(block.$id);
+    intervalStore.deleteInterval(block.$id);
  }
 }

 function onDragEnter(e: DragEvent, type: string) {
  if (type === 'day' || type === 'head-day') {
    e.preventDefault();
-    if (
-      e.target instanceof HTMLDivElement &&
-      (e.target.classList.contains('q-calendar-scheduler__head--day') ||
-        e.target.classList.contains('q-calendar-scheduler__day'))
-    )
+    if (e.target instanceof HTMLDivElement)
      e.target.classList.add('bg-secondary');
  }
 }
@@ -256,11 +272,7 @@ function onDragOver(e: DragEvent, type: string) {
 function onDragLeave(e: DragEvent, type: string) {
  if (type === 'day' || type === 'head-day') {
    e.preventDefault();
-    if (
-      e.target instanceof HTMLDivElement &&
-      (e.target.classList.contains('q-calendar-scheduler__head--day') ||
-        e.target.classList.contains('q-calendar-scheduler__day'))
-    )
+    if (e.target instanceof HTMLDivElement)
      e.target.classList.remove('bg-secondary');
  }
 }
@@ -283,7 +295,7 @@ function onDrop(
    overlapped.value = boatsToApply
      .map((boat) =>
        intervalsOverlapped(
-          existingIntervals.concat(
+          existingIntervals.value.concat(
            intervalsFromTemplate(boat, templateId, date)
          )
        )
--- a/src/pages/schedule/ModifyBoatReservation.vue
+++ b/src/pages/schedule/ModifyBoatReservation.vue
@@ -0,0 +1,18 @@
+<template>
+  <BoatReservationComponent v-model="reservation" />
+</template>
+
+<script setup lang="ts">
+import BoatReservationComponent from 'src/components/BoatReservationComponent.vue';
+import { useReservationStore } from 'src/stores/reservation';
+import { Reservation } from 'src/stores/schedule.types';
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+const reservation = ref<Reservation>();
+
+onMounted(async () => {
+  const id = useRoute().params.id as string;
+  reservation.value = await useReservationStore().getReservationById(id);
+});
+</script>
--- a/src/pages/schedule/ScheduleIndexPage.vue
+++ b/src/pages/schedule/ScheduleIndexPage.vue
@@ -1,16 +1,17 @@
 <template>
  <q-page padding>
-    <q-item v-for="link in navlinks" :key="link.name">
+    <q-item
+      v-for="link in navlinks"
+      :key="link.name">
      <q-btn
        :icon="link.icon"
-        color="primary"
+        :color="link.color ? link.color : 'primary'"
        size="1.25em"
        :to="link.to"
        :label="link.name"
        rounded
        class="full-width"
-        align="left"
-      />
+        align="left" />
    </q-item>
  </q-page>
 </template>
--- a/src/pages/task/TaskEditPage.vue
+++ b/src/pages/task/TaskEditPage.vue
@@ -1,7 +1,9 @@
 <template>
  <ToolbarComponent pageTitle="Tasks" />
  <q-page padding>
-    <div class="q-pa-md" style="max-width: 400px">
+    <div
+      class="q-pa-md"
+      style="max-width: 400px">
      <TaskEditComponent :taskId="taskId" />
    </div>
  </q-page>
@@ -9,7 +11,6 @@

 <script setup lang="ts">
 const taskId = useRoute().params.id as string;
-console.log(taskId);
 import ToolbarComponent from 'src/components/ToolbarComponent.vue';
 import TaskEditComponent from 'src/components/task/TaskEditComponent.vue';
 import { useRoute } from 'vue-router';
--- a/src/privacypolicy.html
+++ b/src/privacypolicy.html
@@ -1,163 +1,173 @@
 <template>
-  <q-page padding>
-    <h1>Privacy Policy for bab.toal.ca</h1>
+  <q-layout>
+    <q-page-container>
+      <q-page padding>
+        <h1>Privacy Policy for Undock</h1>

-    <p>
-      At OYS BAB Test, accessible from https://bab.toal.ca, one of our main
-      priorities is the privacy of our visitors. This Privacy Policy document
-      contains types of information that is collected and recorded by OYS BAB
-      Test and how we use it.
-    </p>
+        <p>
+          At Undock, accessible from https://Undock, one of our main priorities
+          is the privacy of our visitors. This Privacy Policy document contains
+          types of information that is collected and recorded by OYS BAB Test
+          and how we use it.
+        </p>

-    <p>
-      If you have additional questions or require more information about our
-      Privacy Policy, do not hesitate to contact us. Our Privacy Policy was
-      generated with the help of
-      <a href="https://www.gdprprivacypolicy.net/"
-        >GDPR Privacy Policy Generator</a
-      >
-    </p>
+        <p>
+          If you have additional questions or require more information about our
+          Privacy Policy, do not hesitate to contact us. Our Privacy Policy was
+          generated with the help of
+          <a href="https://www.gdprprivacypolicy.net/">
+            GDPR Privacy Policy Generator
+          </a>
+        </p>

-    <h2>General Data Protection Regulation (GDPR)</h2>
-    <p>We are a Data Controller of your information.</p>
+        <h2>General Data Protection Regulation (GDPR)</h2>
+        <p>We are a Data Controller of your information.</p>

-    <p>
-      bab.toal.ca legal basis for collecting and using the personal information
-      described in this Privacy Policy depends on the Personal Information we
-      collect and the specific context in which we collect the information:
-    </p>
-    <ul>
-      <li>bab.toal.ca needs to perform a contract with you</li>
-      <li>You have given bab.toal.ca permission to do so</li>
-      <li>
-        Processing your personal information is in bab.toal.ca legitimate
-        interests
-      </li>
-      <li>bab.toal.ca needs to comply with the law</li>
-    </ul>
+        <p>
+          Undock legal basis for collecting and using the personal information
+          described in this Privacy Policy depends on the Personal Information
+          we collect and the specific context in which we collect the
+          information:
+        </p>
+        <ul>
+          <li>Undock needs to perform a contract with you</li>
+          <li>You have given Undock permission to do so</li>
+          <li>
+            Processing your personal information is in Undock legitimate
+            interests
+          </li>
+          <li>Undock needs to comply with the law</li>
+        </ul>

-    <p>
-      bab.toal.ca will retain your personal information only for as long as is
-      necessary for the purposes set out in this Privacy Policy. We will retain
-      and use your information to the extent necessary to comply with our legal
-      obligations, resolve disputes, and enforce our policies.
-    </p>
+        <p>
+          Undock will retain your personal information only for as long as is
+          necessary for the purposes set out in this Privacy Policy. We will
+          retain and use your information to the extent necessary to comply with
+          our legal obligations, resolve disputes, and enforce our policies.
+        </p>

-    <p>
-      If you are a resident of the European Economic Area (EEA), you have
-      certain data protection rights. If you wish to be informed what Personal
-      Information we hold about you and if you want it to be removed from our
-      systems, please contact us.
-    </p>
+        <p>
+          If you are a resident of the European Economic Area (EEA), you have
+          certain data protection rights. If you wish to be informed what
+          Personal Information we hold about you and if you want it to be
+          removed from our systems, please contact us.
+        </p>

-    <p>
-      In certain circumstances, you have the following data protection rights:
-    </p>
-    <ul>
-      <li>
-        The right to access, update or to delete the information we have on you.
-      </li>
-      <li>The right of rectification.</li>
-      <li>The right to object.</li>
-      <li>The right of restriction.</li>
-      <li>The right to data portability</li>
-      <li>The right to withdraw consent</li>
-    </ul>
+        <p>
+          In certain circumstances, you have the following data protection
+          rights:
+        </p>
+        <ul>
+          <li>
+            The right to access, update or to delete the information we have on
+            you.
+          </li>
+          <li>The right of rectification.</li>
+          <li>The right to object.</li>
+          <li>The right of restriction.</li>
+          <li>The right to data portability</li>
+          <li>The right to withdraw consent</li>
+        </ul>

-    <h2>Log Files</h2>
+        <h2>Log Files</h2>

-    <p>
-      OYS BAB Test follows a standard procedure of using log files. These files
-      log visitors when they visit websites. All hosting companies do this and a
-      part of hosting services' analytics. The information collected by log
-      files include internet protocol (IP) addresses, browser type, Internet
-      Service Provider (ISP), date and time stamp, referring/exit pages, and
-      possibly the number of clicks. These are not linked to any information
-      that is personally identifiable. The purpose of the information is for
-      analyzing trends, administering the site, tracking users' movement on the
-      website, and gathering demographic information.
-    </p>
+        <p>
+          Undock follows a standard procedure of using log files. These files
+          log visitors when they visit websites. All hosting companies do this
+          and a part of hosting services' analytics. The information collected
+          by log files include internet protocol (IP) addresses, browser type,
+          Internet Service Provider (ISP), date and time stamp, referring/exit
+          pages, and possibly the number of clicks. These are not linked to any
+          information that is personally identifiable. The purpose of the
+          information is for analyzing trends, administering the site, tracking
+          users' movement on the website, and gathering demographic information.
+        </p>

-    <h2>Cookies and Web Beacons</h2>
+        <h2>Cookies and Web Beacons</h2>

-    <p>
-      Like any other website, OYS BAB Test uses "cookies". These cookies are
-      used to store information including visitors' preferences, and the pages
-      on the website that the visitor accessed or visited. The information is
-      used to optimize the users' experience by customizing our web page content
-      based on visitors' browser type and/or other information.
-    </p>
+        <p>
+          Like any other website, Undock uses "cookies". These cookies are used
+          to store information including visitors' preferences, and the pages on
+          the website that the visitor accessed or visited. The information is
+          used to optimize the users' experience by customizing our web page
+          content based on visitors' browser type and/or other information.
+        </p>

-    <h2>Privacy Policies</h2>
+        <h2>Privacy Policies</h2>

-    <P
-      >You may consult this list to find the Privacy Policy for each of the
-      advertising partners of OYS BAB Test.</P
-    >
+        <p>
+          You may consult this list to find the Privacy Policy for each of the
+          advertising partners of Undock.
+        </p>

-    <p>
-      Third-party ad servers or ad networks uses technologies like cookies,
-      JavaScript, or Web Beacons that are used in their respective
-      advertisements and links that appear on OYS BAB Test, which are sent
-      directly to users' browser. They automatically receive your IP address
-      when this occurs. These technologies are used to measure the effectiveness
-      of their advertising campaigns and/or to personalize the advertising
-      content that you see on websites that you visit.
-    </p>
+        <p>
+          Third-party ad servers or ad networks uses technologies like cookies,
+          JavaScript, or Web Beacons that are used in their respective
+          advertisements and links that appear on Undock, which are sent
+          directly to users' browser. They automatically receive your IP address
+          when this occurs. These technologies are used to measure the
+          effectiveness of their advertising campaigns and/or to personalize the
+          advertising content that you see on websites that you visit.
+        </p>

-    <p>
-      Note that OYS BAB Test has no access to or control over these cookies that
-      are used by third-party advertisers.
-    </p>
+        <p>
+          Note that Undock has no access to or control over these cookies that
+          are used by third-party advertisers.
+        </p>

-    <h2>Third Party Privacy Policies</h2>
+        <h2>Third Party Privacy Policies</h2>

-    <p>
-      OYS BAB Test's Privacy Policy does not apply to other advertisers or
-      websites. Thus, we are advising you to consult the respective Privacy
-      Policies of these third-party ad servers for more detailed information. It
-      may include their practices and instructions about how to opt-out of
-      certain options.
-    </p>
+        <p>
+          Undock's Privacy Policy does not apply to other advertisers or
+          websites. Thus, we are advising you to consult the respective Privacy
+          Policies of these third-party ad servers for more detailed
+          information. It may include their practices and instructions about how
+          to opt-out of certain options.
+        </p>

-    <p>
-      You can choose to disable cookies through your individual browser options.
-      To know more detailed information about cookie management with specific
-      web browsers, it can be found at the browsers' respective websites.
-    </p>
+        <p>
+          You can choose to disable cookies through your individual browser
+          options. To know more detailed information about cookie management
+          with specific web browsers, it can be found at the browsers'
+          respective websites.
+        </p>

-    <h2>Children's Information</h2>
+        <h2>Children's Information</h2>

-    <p>
-      Another part of our priority is adding protection for children while using
-      the internet. We encourage parents and guardians to observe, participate
-      in, and/or monitor and guide their online activity.
-    </p>
+        <p>
+          Another part of our priority is adding protection for children while
+          using the internet. We encourage parents and guardians to observe,
+          participate in, and/or monitor and guide their online activity.
+        </p>

-    <p>
-      OYS BAB Test does not knowingly collect any Personal Identifiable
-      Information from children under the age of 13. If you think that your
-      child provided this kind of information on our website, we strongly
-      encourage you to contact us immediately and we will do our best efforts to
-      promptly remove such information from our records.
-    </p>
+        <p>
+          Undock does not knowingly collect any Personal Identifiable
+          Information from children under the age of 13. If you think that your
+          child provided this kind of information on our website, we strongly
+          encourage you to contact us immediately and we will do our best
+          efforts to promptly remove such information from our records.
+        </p>

-    <h2>Online Privacy Policy Only</h2>
+        <h2>Online Privacy Policy Only</h2>

-    <p>
-      Our Privacy Policy applies only to our online activities and is valid for
-      visitors to our website with regards to the information that they shared
-      and/or collect in OYS BAB Test. This policy is not applicable to any
-      information collected offline or via channels other than this website.
-    </p>
+        <p>
+          Our Privacy Policy applies only to our online activities and is valid
+          for visitors to our website with regards to the information that they
+          shared and/or collect in Undock. This policy is not applicable to any
+          information collected offline or via channels other than this website.
+        </p>

-    <h2>Consent</h2>
+        <h2>Consent</h2>

-    <p>
-      By using our website, you hereby consent to our Privacy Policy and agree
-      to its terms.
-    </p>
-  </q-page>
+        <p>
+          By using our website, you hereby consent to our Privacy Policy and
+          agree to its terms.
+        </p>
+      </q-page>
+    </q-page-container>
+  </q-layout>
 </template>

-<script setup lang="ts"></script>
+<script
+  setup
+  lang="ts"></script>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -49,6 +49,10 @@ export default route(function (/* { store, ssrContext } */) {
      return next('/login');
    }

+    if (to.name === 'login' && currentUser) {
+      return next('/');
+    }
+
    if (requiredRoles) {
      if (!currentUser) {
        return next('/login');
--- a/src/router/navlinks.ts
+++ b/src/router/navlinks.ts
@@ -1,6 +1,17 @@
 import { useAuthStore } from 'src/stores/auth';

-export const links = [
+export type Link = {
+  name: string;
+  to: string;
+  icon: string;
+  front_links?: boolean;
+  enabled?: boolean;
+  color?: string;
+  sublinks?: Link[];
+  requiredRoles?: string[];
+};
+
+export const links = <Link[]>[
  {
    name: 'Home',
    to: '/',
@@ -13,7 +24,7 @@ export const links = [
    to: '/profile',
    icon: 'account_circle',
    front_links: false,
-    enabled: false,
+    enabled: true,
  },
  {
    name: 'Boats',
@@ -30,7 +41,7 @@ export const links = [
    enabled: true,
    sublinks: [
      {
-        name: 'List',
+        name: 'My View',
        to: '/schedule/list',
        icon: 'list',
        front_links: false,
@@ -44,7 +55,7 @@ export const links = [
        enabled: true,
      },
      {
-        name: 'View',
+        name: 'Calendar',
        to: '/schedule/view',
        icon: 'calendar_month',
        front_links: false,
@@ -56,6 +67,7 @@ export const links = [
        icon: 'edit_calendar',
        front_links: false,
        enabled: true,
+        color: 'accent',
        requiredRoles: ['Schedule Admins'],
      },
    ],
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -42,8 +42,15 @@ const routes: RouteRecordRaw[] = [
          },
          {
            path: 'list',
-            component: () => import('src/pages/schedule/ListBookingsPage.vue'),
-            name: 'list-bookings',
+            component: () =>
+              import('src/pages/schedule/ListReservationsPage.vue'),
+            name: 'list-reservations',
+          },
+          {
+            path: 'edit/:id',
+            component: () =>
+              import('src/pages/schedule/ModifyBoatReservation.vue'),
+            name: 'edit-reservation',
          },
          {
            path: 'manage',
@@ -161,14 +168,14 @@ const routes: RouteRecordRaw[] = [
      publicRoute: true,
    },
  },
-  // {
-  //   path: '/register',
-  //   component: () => import('pages/RegisterPage.vue'),
-  //   name: 'register'
-  //   meta: {
-  //    accountRoute: true,
-  //   }
-  // },
+  {
+    path: '/signup',
+    component: () => import('pages/SignupPage.vue'),
+    name: 'signup',
+    meta: {
+      publicRoute: true,
+    },
+  },
  // Always leave this as last one,
  // but you can also remove it
  {
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -2,6 +2,8 @@ import { defineStore } from 'pinia';
 import { ID, account, functions, teams } from 'boot/appwrite';
 import { ExecutionMethod, OAuthProvider, type Models } from 'appwrite';
 import { computed, ref } from 'vue';
+import { useBoatStore } from './boat';
+import { useReservationStore } from './reservation';

 export const useAuthStore = defineStore('auth', () => {
  const currentUser = ref<Models.User<Models.Preferences> | null>(null);
@@ -14,6 +16,8 @@ export const useAuthStore = defineStore('auth', () => {
    try {
      currentUser.value = await account.get();
      currentUserTeams.value = await teams.list();
+      await useBoatStore().fetchBoats();
+      await useReservationStore().fetchUserReservations();
    } catch {
      currentUser.value = null;
      currentUserTeams.value = null;
@@ -41,19 +45,38 @@ export const useAuthStore = defineStore('auth', () => {
    await init();
  }

-  async function googleLogin() {
-    account.createOAuth2Session(
-      OAuthProvider.Google,
-      'https://bab.toal.ca/',
-      'https://bab.toal.ca/#/login'
-    );
-    currentUser.value = await account.get();
+  async function createTokenSession(email: string) {
+    return await account.createEmailToken(ID.unique(), email);
  }

-  function getUserNameById(id: string) {
+  async function googleLogin() {
+    await account.createOAuth2Session(
+      OAuthProvider.Google,
+      'https://oys.undock.ca',
+      'https://oys.undock.ca/login'
+    );
+    await init();
+  }
+
+  async function discordLogin() {
+    await account.createOAuth2Session(
+      OAuthProvider.Discord,
+      'https://oys.undock.ca',
+      'https://oys.undock.ca/login'
+    );
+    await init();
+  }
+
+  async function tokenLogin(userId: string, token: string) {
+    await account.createSession(userId, token);
+    await init();
+  }
+
+  function getUserNameById(id: string | undefined | null): string {
+    if (!id) return 'No User';
    try {
      if (!userNames.value[id]) {
-        userNames.value[id] = '';
+        userNames.value[id] = 'Loading...';
        functions
          .createExecution(
            'userinfo',
@@ -80,13 +103,22 @@ export const useAuthStore = defineStore('auth', () => {
    return account.deleteSession('current').then((currentUser.value = null));
  }

+  async function updateName(name: string) {
+    await account.updateName(name);
+    currentUser.value = await account.get();
+  }
+
  return {
    currentUser,
    getUserNameById,
    hasRequiredRole,
    register,
+    updateName,
    login,
    googleLogin,
+    discordLogin,
+    createTokenSession,
+    tokenLogin,
    logout,
    init,
  };
--- a/src/stores/interval.ts
+++ b/src/stores/interval.ts
@@ -0,0 +1,161 @@
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+import { Boat } from './boat';
+import { Timestamp, today } from '@quasar/quasar-ui-qcalendar';
+import { Interval } from './schedule.types';
+import { AppwriteIds, databases } from 'src/boot/appwrite';
+import { ID, Query } from 'appwrite';
+import { useReservationStore } from './reservation';
+import { LoadingTypes } from 'src/utils/misc';
+import { useRealtimeStore } from './realtime';
+
+export const useIntervalStore = defineStore('interval', () => {
+  const intervals = ref(new Map<string, Interval>()); // Intervals by DocID
+  const dateStatus = ref(new Map<string, LoadingTypes>()); // State of load by date
+
+  const selectedDate = ref<string>(today());
+
+  const reservationStore = useReservationStore();
+
+  const realtimeStore = useRealtimeStore();
+
+  realtimeStore.register(
+    `databases.${AppwriteIds.databaseId}.collections.${AppwriteIds.collection.interval}.documents`,
+    (response) => {
+      const payload = response.payload as Interval;
+      if (!payload.$id) return;
+      if (
+        response.events.includes('databases.*.collections.*.documents.*.delete')
+      ) {
+        intervals.value.delete(payload.$id);
+      } else {
+        intervals.value.set(payload.$id, payload);
+      }
+    }
+  );
+
+  const getIntervals = (date: Timestamp | string, boat?: Boat) => {
+    const searchDate = typeof date === 'string' ? date : date.date;
+    const dayStart = new Date(searchDate + 'T00:00');
+    const dayEnd = new Date(searchDate + 'T23:59');
+    if (dateStatus.value.get(searchDate) === undefined) {
+      dateStatus.value.set(searchDate, 'pending');
+      fetchIntervals(searchDate);
+    }
+    return computed(() => {
+      return Array.from(intervals.value.values()).filter((interval) => {
+        const intervalStart = new Date(interval.start);
+        const intervalEnd = new Date(interval.end);
+
+        const isWithinDay = intervalStart < dayEnd && intervalEnd > dayStart;
+        const matchesBoat = boat ? boat.$id === interval.resource : true;
+        return isWithinDay && matchesBoat;
+      });
+    });
+  };
+
+  const getAvailableIntervals = (date: Timestamp | string, boat?: Boat) => {
+    return computed(() =>
+      getIntervals(date, boat).value.filter((interval) => {
+        return !reservationStore.isResourceTimeOverlapped(
+          interval.resource,
+          new Date(interval.start),
+          new Date(interval.end)
+        );
+      })
+    );
+  };
+
+  async function fetchInterval(id: string): Promise<Interval> {
+    return (await databases.getDocument(
+      AppwriteIds.databaseId,
+      AppwriteIds.collection.interval,
+      id
+    )) as Interval;
+  }
+
+  async function fetchIntervals(dateString: string) {
+    try {
+      const response = await databases.listDocuments(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.interval,
+        [
+          Query.greaterThanEqual(
+            'end',
+            new Date(dateString + 'T00:00').toISOString()
+          ),
+          Query.lessThanEqual(
+            'start',
+            new Date(dateString + 'T23:59').toISOString()
+          ),
+          Query.limit(50), // We are asuming that we won't have more than 50 intervals per day.
+        ]
+      );
+      response.documents.forEach((d) =>
+        intervals.value.set(d.$id, d as Interval)
+      );
+      dateStatus.value.set(dateString, 'loaded');
+      console.info(`Loaded ${response.documents.length} intervals from server`);
+    } catch (error) {
+      console.error('Failed to fetch intervals', error);
+      dateStatus.value.set(dateString, 'error');
+    }
+  }
+
+  const createInterval = async (interval: Interval) => {
+    try {
+      const response = await databases.createDocument(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.interval,
+        ID.unique(),
+        interval
+      );
+      intervals.value.set(response.$id, response as Interval);
+    } catch (e) {
+      console.error('Error creating Interval: ' + e);
+    }
+  };
+  const updateInterval = async (interval: Interval) => {
+    try {
+      if (interval.$id) {
+        const response = await databases.updateDocument(
+          AppwriteIds.databaseId,
+          AppwriteIds.collection.interval,
+          interval.$id,
+          { ...interval, $id: undefined }
+        );
+        intervals.value.set(response.$id, response as Interval);
+        console.info(`Saved Interval: ${interval.$id}`);
+      } else {
+        console.error('Update interval called without an ID');
+      }
+    } catch (e) {
+      console.error('Error updating Interval: ' + e);
+    }
+  };
+  const deleteInterval = async (id: string) => {
+    try {
+      await databases.deleteDocument(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.interval,
+        id
+      );
+      intervals.value.delete(id);
+      console.info(`Deleted interval: ${id}`);
+    } catch (e) {
+      console.error('Error deleting Interval: ' + e);
+    }
+  };
+
+  return {
+    getIntervals,
+    getAvailableIntervals,
+    fetchIntervals,
+    fetchInterval,
+    createInterval,
+    updateInterval,
+    deleteInterval,
+    selectedDate,
+    intervals,
+  };
+});
--- a/src/stores/intervalTemplate.ts
+++ b/src/stores/intervalTemplate.ts
@@ -0,0 +1,97 @@
+import { Ref, ref } from 'vue';
+import { IntervalTemplate } from './schedule.types';
+import { defineStore } from 'pinia';
+import { AppwriteIds, databases } from 'src/boot/appwrite';
+import { ID, Models } from 'appwrite';
+import { arrayToTimeTuples } from 'src/utils/schedule';
+
+export const useIntervalTemplateStore = defineStore('intervalTemplate', () => {
+  const intervalTemplates = ref<IntervalTemplate[]>([]);
+
+  const getIntervalTemplates = (): Ref<IntervalTemplate[]> => {
+    // Should subscribe to get new intervaltemplates when they are created
+    if (!intervalTemplates.value) fetchIntervalTemplates();
+    return intervalTemplates;
+  };
+
+  async function fetchIntervalTemplates() {
+    try {
+      const response = await databases.listDocuments(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.intervalTemplate
+      );
+      intervalTemplates.value = response.documents.map(
+        (d: Models.Document): IntervalTemplate => {
+          return {
+            ...d,
+            timeTuples: arrayToTimeTuples(d.timeTuple),
+          } as IntervalTemplate;
+        }
+      );
+    } catch (error) {
+      console.error('Failed to fetch timeblock templates', error);
+    }
+  }
+
+  const createIntervalTemplate = async (template: IntervalTemplate) => {
+    try {
+      const response = await databases.createDocument(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.intervalTemplate,
+        ID.unique(),
+        { name: template.name, timeTuple: template.timeTuples.flat(2) }
+      );
+      intervalTemplates.value.push(response as IntervalTemplate);
+    } catch (e) {
+      console.error('Error updating IntervalTemplate: ' + e);
+    }
+  };
+  const deleteIntervalTemplate = async (id: string) => {
+    try {
+      await databases.deleteDocument(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.intervalTemplate,
+        id
+      );
+      intervalTemplates.value = intervalTemplates.value.filter(
+        (template) => template.$id !== id
+      );
+    } catch (e) {
+      console.error('Error deleting IntervalTemplate: ' + e);
+    }
+  };
+  const updateIntervalTemplate = async (
+    template: IntervalTemplate,
+    id: string
+  ) => {
+    try {
+      const response = await databases.updateDocument(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.intervalTemplate,
+        id,
+        {
+          name: template.name,
+          timeTuple: template.timeTuples.flat(2),
+        }
+      );
+      intervalTemplates.value = intervalTemplates.value.map((b) =>
+        b.$id !== id
+          ? b
+          : ({
+              ...response,
+              timeTuples: arrayToTimeTuples(response.timeTuple),
+            } as IntervalTemplate)
+      );
+    } catch (e) {
+      console.error('Error updating IntervalTemplate: ' + e);
+    }
+  };
+
+  return {
+    getIntervalTemplates,
+    fetchIntervalTemplates,
+    createIntervalTemplate,
+    deleteIntervalTemplate,
+    updateIntervalTemplate,
+  };
+});
--- a/src/stores/realtime.ts
+++ b/src/stores/realtime.ts
@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia';
+import { client } from 'src/boot/appwrite';
+import { Interval } from './schedule.types';
+import { ref } from 'vue';
+import { RealtimeResponseEvent } from 'appwrite';
+
+export const useRealtimeStore = defineStore('realtime', () => {
+  const subscriptions = ref<Map<string, () => void>>(new Map());
+
+  const register = (
+    channel: string,
+    fn: (response: RealtimeResponseEvent<Interval>) => void
+  ) => {
+    if (subscriptions.value.has(channel)) return; // Already subscribed.  But maybe different callback fn?
+    subscriptions.value.set(channel, client.subscribe(channel, fn));
+  };
+
+  return {
+    register,
+  };
+});
--- a/src/stores/reservation.ts
+++ b/src/stores/reservation.ts
@@ -1,19 +1,44 @@
 import { defineStore } from 'pinia';
 import type { Reservation } from './schedule.types';
-import { computed, ref } from 'vue';
+import { ComputedRef, computed, reactive } from 'vue';
 import { AppwriteIds, databases } from 'src/boot/appwrite';
 import { ID, Query } from 'appwrite';
-import { date } from 'quasar';
+import { date, useQuasar } from 'quasar';
 import { Timestamp, parseDate, today } from '@quasar/quasar-ui-qcalendar';
 import { LoadingTypes } from 'src/utils/misc';
 import { useAuthStore } from './auth';
+import { isPast } from 'src/utils/schedule';
+import { useRealtimeStore } from './realtime';

 export const useReservationStore = defineStore('reservation', () => {
-  const reservations = ref<Map<string, Reservation>>(new Map());
-  const datesLoaded = ref<Record<string, LoadingTypes>>({});
-  const userReservations = ref<Reservation[]>();
-  const authStore = useAuthStore();
+  const reservations = reactive<Map<string, Reservation>>(new Map());
+  const datesLoaded = reactive<Record<string, LoadingTypes>>({});
+  const userReservations = reactive<Map<string, Reservation>>(new Map());

+  const authStore = useAuthStore();
+  const $q = useQuasar();
+  const realtimeStore = useRealtimeStore();
+
+  realtimeStore.register(
+    `databases.${AppwriteIds.databaseId}.collections.${AppwriteIds.collection.reservation}.documents`,
+    (response) => {
+      const payload = response.payload as Reservation;
+      if (payload.$id) {
+        if (
+          response.events.includes(
+            'databases.*.collections.*.documents.*.delete'
+          )
+        ) {
+          reservations.delete(payload.$id);
+          userReservations.delete(payload.$id);
+        } else {
+          reservations.set(payload.$id, payload);
+          if (payload.user === authStore.currentUser?.$id)
+            userReservations.set(payload.$id, payload);
+        }
+      }
+    }
+  );
  // Fetch reservations for a specific date range
  const fetchReservationsForDateRange = async (
    start: string = today(),
@@ -37,7 +62,7 @@ export const useReservationStore = defineStore('reservation', () => {
      );

      response.documents.forEach((d) =>
-        reservations.value.set(d.$id, d as Reservation)
+        reservations.set(d.$id, d as Reservation)
      );
      setDateLoaded(startDate, endDate, 'loaded');
    } catch (error) {
@@ -45,18 +70,46 @@ export const useReservationStore = defineStore('reservation', () => {
      setDateLoaded(startDate, endDate, 'error');
    }
  };
-  const createReservation = async (reservation: Reservation) => {
+  const getReservationById = async (id: string) => {
    try {
-      const response = await databases.createDocument(
+      const response = await databases.getDocument(
        AppwriteIds.databaseId,
        AppwriteIds.collection.reservation,
-        ID.unique(),
-        reservation
+        id
      );
-      reservations.value.set(response.$id, response as Reservation);
+      return response as Reservation;
+    } catch (error) {
+      console.error('Failed to fetch reservation: ', error);
+    }
+  };
+
+  const createOrUpdateReservation = async (
+    reservation: Reservation
+  ): Promise<Reservation> => {
+    let response;
+    try {
+      if (reservation.$id) {
+        response = await databases.updateDocument(
+          AppwriteIds.databaseId,
+          AppwriteIds.collection.reservation,
+          reservation.$id,
+          reservation
+        );
+      } else {
+        response = await databases.createDocument(
+          AppwriteIds.databaseId,
+          AppwriteIds.collection.reservation,
+          ID.unique(),
+          reservation
+        );
+      }
+      reservations.set(response.$id, response as Reservation);
+      userReservations.set(response.$id, response as Reservation);
      console.info('Reservation booked: ', response);
+      return response as Reservation;
    } catch (e) {
      console.error('Error creating Reservation: ' + e);
+      throw e;
    }
  };

@@ -64,25 +117,43 @@ export const useReservationStore = defineStore('reservation', () => {
    reservation: string | Reservation | null | undefined
  ) => {
    if (!reservation) return false;
-    let id;
-    if (typeof reservation === 'string') {
-      id = reservation;
-    } else if ('$id' in reservation && typeof reservation.$id === 'string') {
-      id = reservation.$id;
-    } else {
-      return false;
-    }
+    const id = typeof reservation === 'string' ? reservation : reservation.$id;
+    if (!id) return false;

+    const status = $q.notify({
+      color: 'secondary',
+      textColor: 'white',
+      message: 'Deleting Reservation',
+      spinner: true,
+      closeBtn: 'Dismiss',
+      position: 'top',
+      timeout: 0,
+      group: false,
+    });
    try {
      await databases.deleteDocument(
        AppwriteIds.databaseId,
-        AppwriteIds.collection.interval,
+        AppwriteIds.collection.reservation,
        id
      );
-      reservations.value.delete(id);
+      reservations.delete(id);
+      userReservations.delete(id);
      console.info(`Deleted reservation: ${id}`);
+      status({
+        color: 'warning',
+        message: 'Reservation Deleted',
+        spinner: false,
+        icon: 'delete',
+        timeout: 4000,
+      });
    } catch (e) {
      console.error('Error deleting reservation: ' + e);
+      status({
+        color: 'negative',
+        message: 'Failed to Delete Reservation',
+        spinner: false,
+        icon: 'error',
+      });
    }
  };

@@ -91,7 +162,7 @@ export const useReservationStore = defineStore('reservation', () => {
    if (start > end) return [];
    let curDate = start;
    while (curDate < end) {
-      datesLoaded.value[(parseDate(curDate) as Timestamp).date] = state;
+      datesLoaded[(parseDate(curDate) as Timestamp).date] = state;
      curDate = date.addToDate(curDate, { days: 1 });
    }
  };
@@ -102,8 +173,7 @@ export const useReservationStore = defineStore('reservation', () => {
    const unloaded = [];
    while (curDate < end) {
      const parsedDate = (parseDate(curDate) as Timestamp).date;
-      if (datesLoaded.value[parsedDate] === undefined)
-        unloaded.push(parsedDate);
+      if (datesLoaded[parsedDate] === undefined) unloaded.push(parsedDate);
      curDate = date.addToDate(curDate, { days: 1 });
    }
    return unloaded;
@@ -113,15 +183,15 @@ export const useReservationStore = defineStore('reservation', () => {
  const getReservationsByDate = (
    searchDate: string,
    boat?: string
-  ): Reservation[] => {
-    if (!datesLoaded.value[searchDate]) {
+  ): ComputedRef<Reservation[]> => {
+    if (!datesLoaded[searchDate]) {
      fetchReservationsForDateRange(searchDate);
    }
    const dayStart = new Date(searchDate + 'T00:00');
    const dayEnd = new Date(searchDate + 'T23:59');

    return computed(() => {
-      return Array.from(reservations.value.values()).filter((reservation) => {
+      return Array.from(reservations.values()).filter((reservation) => {
        const reservationStart = new Date(reservation.start);
        const reservationEnd = new Date(reservation.end);

@@ -130,7 +200,7 @@ export const useReservationStore = defineStore('reservation', () => {
        const matchesBoat = boat ? boat === reservation.resource : true;
        return isWithinDay && matchesBoat;
      });
-    }).value;
+    });
  };

  // Get conflicting reservations for a resource within a time range
@@ -139,7 +209,7 @@ export const useReservationStore = defineStore('reservation', () => {
    start: Date,
    end: Date
  ): Reservation[] => {
-    return Array.from(reservations.value.values()).filter(
+    return Array.from(reservations.values()).filter(
      (entry) =>
        entry.resource === resource &&
        new Date(entry.start) < end &&
@@ -165,10 +235,6 @@ export const useReservationStore = defineStore('reservation', () => {
    );
  };

-  const getUserReservations = () => {
-    return userReservations;
-  };
-
  const fetchUserReservations = async () => {
    if (!authStore.currentUser) return;
    try {
@@ -177,21 +243,43 @@ export const useReservationStore = defineStore('reservation', () => {
        AppwriteIds.collection.reservation,
        [Query.equal('user', authStore.currentUser.$id)]
      );
-      userReservations.value = response.documents as Reservation[];
+      response.documents.forEach((d) =>
+        userReservations.set(d.$id, d as Reservation)
+      );
    } catch (error) {
      console.error('Failed to fetch reservations for user: ', error);
    }
  };

+  const sortedUserReservations = computed((): Reservation[] =>
+    [...userReservations.values()].sort(
+      (a, b) => new Date(b.start).getTime() - new Date(a.start).getTime()
+    )
+  );
+
+  const futureUserReservations = computed((): Reservation[] => {
+    if (!sortedUserReservations.value) return [];
+    return sortedUserReservations.value.filter((b) => !isPast(b.end));
+  });
+
+  const pastUserReservations = computed((): Reservation[] => {
+    if (!sortedUserReservations.value) return [];
+    return sortedUserReservations.value?.filter((b) => isPast(b.end));
+  });
+
  return {
    getReservationsByDate,
-    createReservation,
+    getReservationById,
+    createOrUpdateReservation,
    deleteReservation,
    fetchReservationsForDateRange,
    isReservationOverlapped,
    isResourceTimeOverlapped,
    getConflictingReservations,
    fetchUserReservations,
-    getUserReservations,
+    sortedUserReservations,
+    futureUserReservations,
+    pastUserReservations,
+    userReservations,
  };
 });
--- a/src/stores/sampledata/boat.ts
+++ b/src/stores/sampledata/boat.ts
@@ -5,7 +5,7 @@ export const getSampleData = () => [
    displayName: 'PX',
    class: 'J/27',
    year: 1981,
-    imgSrc: '/tmpimg/j27.png',
+    imgSrc: '/tmpimg/projectX.jpg',
    iconSrc: '/tmpimg/projectx_avatar256.png',
    bookingAvailable: true,
    maxPassengers: 8,
--- a/src/stores/sampledata/schedule.ts
+++ b/src/stores/sampledata/schedule.ts
@@ -50,7 +50,7 @@ export function getSampleIntervals(): Interval[] {
          return template.blocks.map((t: TimeTuple): Interval => {
            return {
              $id: 'id' + Math.random().toString(32).slice(2),
-              boatId: b.$id,
+              resource: b.$id,
              start: addToDate(tsToday, { day: i }).date + ' ' + t[0],
              end: addToDate(tsToday, { day: i }).date + ' ' + t[1],
            };
--- a/src/stores/schedule.ts
+++ b/src/stores/schedule.ts
@@ -1,200 +0,0 @@
-import { defineStore } from 'pinia';
-import { Ref, computed, ref } from 'vue';
-import { Boat } from './boat';
-import { Timestamp } from '@quasar/quasar-ui-qcalendar';
-
-import { IntervalTemplate, Interval, IntervalRecord } from './schedule.types';
-import { AppwriteIds, databases } from 'src/boot/appwrite';
-import { ID, Models, Query } from 'appwrite';
-import { arrayToTimeTuples } from 'src/utils/schedule';
-
-export const useScheduleStore = defineStore('schedule', () => {
-  // TODO: Implement functions to dynamically pull this data.
-  const intervals = ref<Map<string, Interval>>(new Map());
-  const intervalDates = ref<IntervalRecord>({});
-  const intervalTemplates = ref<IntervalTemplate[]>([]);
-
-  const getIntervals = (date: Timestamp | string, boat?: Boat): Interval[] => {
-    const searchDate = typeof date === 'string' ? date : date.date;
-    const dayStart = new Date(searchDate + 'T00:00');
-    const dayEnd = new Date(searchDate + 'T23:59');
-    if (!intervalDates.value[searchDate]) {
-      intervalDates.value[searchDate] = 'pending';
-      fetchIntervals(searchDate);
-    }
-    return computed(() => {
-      return Array.from(intervals.value.values()).filter((interval) => {
-        const intervalStart = new Date(interval.start);
-        const intervalEnd = new Date(interval.end);
-
-        const isWithinDay = intervalStart < dayEnd && intervalEnd > dayStart;
-        const matchesBoat = boat ? boat.$id === interval.boatId : true;
-        return isWithinDay && matchesBoat;
-      });
-    }).value;
-  };
-
-  async function fetchIntervals(dateString: string) {
-    try {
-      const response = await databases.listDocuments(
-        AppwriteIds.databaseId,
-        AppwriteIds.collection.interval,
-        [
-          Query.greaterThanEqual(
-            'end',
-            new Date(dateString + 'T00:00').toISOString()
-          ),
-          Query.lessThanEqual(
-            'start',
-            new Date(dateString + 'T23:59').toISOString()
-          ),
-          Query.limit(50), // We are asuming that we won't have more than 50 intervals per day.
-        ]
-      );
-      response.documents.forEach((d) =>
-        intervals.value.set(d.$id, d as Interval)
-      );
-      intervalDates.value[dateString] = 'loaded';
-      console.info(`Loaded ${response.documents.length} intervals from server`);
-    } catch (error) {
-      console.error('Failed to fetch intervals', error);
-      intervalDates.value[dateString] = 'error';
-    }
-  }
-
-  const getIntervalTemplates = (): Ref<IntervalTemplate[]> => {
-    // Should subscribe to get new intervaltemplates when they are created
-    if (!intervalTemplates.value) fetchIntervalTemplates();
-    return intervalTemplates;
-  };
-
-  async function fetchIntervalTemplates() {
-    try {
-      const response = await databases.listDocuments(
-        AppwriteIds.databaseId,
-        AppwriteIds.collection.intervalTemplate
-      );
-      intervalTemplates.value = response.documents.map(
-        (d: Models.Document): IntervalTemplate => {
-          return {
-            ...d,
-            timeTuples: arrayToTimeTuples(d.timeTuple),
-          } as IntervalTemplate;
-        }
-      );
-    } catch (error) {
-      console.error('Failed to fetch timeblock templates', error);
-    }
-  }
-
-  const createInterval = async (interval: Interval) => {
-    try {
-      const response = await databases.createDocument(
-        AppwriteIds.databaseId,
-        AppwriteIds.collection.interval,
-        ID.unique(),
-        interval
-      );
-      intervals.value.set(response.$id, response as Interval);
-    } catch (e) {
-      console.error('Error creating Interval: ' + e);
-    }
-  };
-  const updateInterval = async (interval: Interval) => {
-    try {
-      if (interval.$id) {
-        const response = await databases.updateDocument(
-          AppwriteIds.databaseId,
-          AppwriteIds.collection.interval,
-          interval.$id,
-          { ...interval, $id: undefined }
-        );
-        intervals.value.set(response.$id, response as Interval);
-        console.info(`Saved Interval: ${interval.$id}`);
-      } else {
-        console.error('Update interval called without an ID');
-      }
-    } catch (e) {
-      console.error('Error updating Interval: ' + e);
-    }
-  };
-  const deleteInterval = async (id: string) => {
-    try {
-      await databases.deleteDocument(
-        AppwriteIds.databaseId,
-        AppwriteIds.collection.interval,
-        id
-      );
-      intervals.value.delete(id);
-      console.info(`Deleted interval: ${id}`);
-    } catch (e) {
-      console.error('Error deleting Interval: ' + e);
-    }
-  };
-  const createIntervalTemplate = async (template: IntervalTemplate) => {
-    try {
-      const response = await databases.createDocument(
-        AppwriteIds.databaseId,
-        AppwriteIds.collection.intervalTemplate,
-        ID.unique(),
-        { name: template.name, timeTuple: template.timeTuples.flat(2) }
-      );
-      intervalTemplates.value.push(response as IntervalTemplate);
-    } catch (e) {
-      console.error('Error updating IntervalTemplate: ' + e);
-    }
-  };
-  const deleteIntervalTemplate = async (id: string) => {
-    try {
-      await databases.deleteDocument(
-        AppwriteIds.databaseId,
-        AppwriteIds.collection.intervalTemplate,
-        id
-      );
-      intervalTemplates.value = intervalTemplates.value.filter(
-        (template) => template.$id !== id
-      );
-    } catch (e) {
-      console.error('Error deleting IntervalTemplate: ' + e);
-    }
-  };
-  const updateIntervalTemplate = async (
-    template: IntervalTemplate,
-    id: string
-  ) => {
-    try {
-      const response = await databases.updateDocument(
-        AppwriteIds.databaseId,
-        AppwriteIds.collection.intervalTemplate,
-        id,
-        {
-          name: template.name,
-          timeTuple: template.timeTuples.flat(2),
-        }
-      );
-      intervalTemplates.value = intervalTemplates.value.map((b) =>
-        b.$id !== id
-          ? b
-          : ({
-              ...response,
-              timeTuples: arrayToTimeTuples(response.timeTuple),
-            } as IntervalTemplate)
-      );
-    } catch (e) {
-      console.error('Error updating IntervalTemplate: ' + e);
-    }
-  };
-
-  return {
-    getIntervals,
-    getIntervalTemplates,
-    fetchIntervals,
-    fetchIntervalTemplates,
-    createInterval,
-    updateInterval,
-    deleteInterval,
-    createIntervalTemplate,
-    deleteIntervalTemplate,
-    updateIntervalTemplate,
-  };
-});
--- a/src/stores/schedule.types.ts
+++ b/src/stores/schedule.types.ts
@@ -1,15 +1,13 @@
 import { Models } from 'appwrite';
-import { LoadingTypes } from 'src/utils/misc';

 export type StatusTypes = 'tentative' | 'confirmed' | 'pending' | undefined;
-export type Reservation = Partial<Models.Document> & {
+export type Reservation = Interval & {
  user: string;
-  start: string;
-  end: string;
-  resource: string; // Boat ID
  status?: StatusTypes;
  reason: string;
  comment: string;
+  members?: string[];
+  guests?: string[];
 };

 // 24 hrs in advance only 2 weekday, and 1 weekend slot
@@ -19,18 +17,14 @@ export type Reservation = Partial<Models.Document> & {
   objects in here? */

 export type TimeTuple = [start: string, end: string];
+
 export type Interval = Partial<Models.Document> & {
-  boatId: string;
+  resource: string;
  start: string;
  end: string;
-  selected?: false;
 };

 export type IntervalTemplate = Partial<Models.Document> & {
  name: string;
  timeTuples: TimeTuple[];
 };
-
-export interface IntervalRecord {
-  [key: string]: LoadingTypes;
-}
--- a/src/utils/schedule.ts
+++ b/src/utils/schedule.ts
@@ -18,7 +18,7 @@ export function timeTuplesOverlapped(tuples: TimeTuple[]): Interval[] {
  return intervalsOverlapped(
    tuples.map((tuples) => {
      return {
-        boatId: '',
+        resource: '',
        start: '01/01/2001 ' + tuples[0],
        end: '01/01/2001 ' + tuples[1],
      };
@@ -64,14 +64,27 @@ export function buildInterval(
  /* When the time zone offset is absent, date-only forms are interpreted
     as a UTC time and date-time forms are interpreted as local time. */
  const result = {
-    boatId: resource.$id,
+    resource: resource.$id,
    start: new Date(blockDate + 'T' + time[0]).toISOString(),
    end: new Date(blockDate + 'T' + time[1]).toISOString(),
  };
  return result;
 }

+export const isPast = (itemDate: Date | string): boolean => {
+  if (!(itemDate instanceof Date)) {
+    itemDate = new Date(itemDate);
+  }
+  const currentDate = new Date();
+  return itemDate < currentDate;
+};
+
 export function formatDate(inputDate: string | undefined): string {
  if (!inputDate) return '';
  return date.formatDate(new Date(inputDate), 'ddd MMM Do hh:mm A');
 }
+
+export function formatTime(inputDate: string | undefined): string {
+  if (!inputDate) return '';
+  return date.formatDate(new Date(inputDate), 'hh:mm A');
+}
--- a/0
+++ b/0
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Patrick Toal	a11b2a0568	fix: reactivity bug with ListReservationsPage All checks were successful Build BAB Application Deployment Artifact / build (push) Successful in 2m32s Details	2024-06-21 23:44:34 -04:00
Patrick Toal	ff8e54449a	feat: add realtime updates of interval and reservation	2024-06-21 23:13:30 -04:00
Patrick Toal	64a59e856f	feat: rudimentary realtime update of intervals	2024-06-20 23:36:05 -04:00
Patrick Toal	5e8c5a1631	feat: enable websocket proxy for dev	2024-06-20 23:14:20 -04:00
Patrick Toal	e97949cab3	fix: Improve reactivity in intervals	2024-06-20 21:52:00 -04:00
Patrick Toal	b7a3608e67	fix: dev targets	2024-06-19 23:02:01 -04:00
Patrick Toal	bbb544c029	chore: bump version All checks were successful Build BAB Application Deployment Artifact / build (push) Successful in 2m26s Details	2024-06-19 19:13:33 -04:00
Patrick Toal	da42f6ed22	chore: Update gitignore All checks were successful Build BAB Application Deployment Artifact / build (push) Successful in 2m8s Details	2024-06-17 16:31:29 -04:00
Patrick Toal	8016e20451	fix: remove dotenv files from repo	2024-06-17 16:30:59 -04:00
Patrick Toal	64ee8f4fea	chore: Change actions to only run on devel branch All checks were successful Build BAB Application Deployment Artifact / build (push) Successful in 2m13s Details	2024-06-17 16:25:44 -04:00
Patrick Toal	17e8d7dc37	chore: manually bump version	2024-06-17 16:20:20 -04:00
Patrick Toal	a409b0a5c7	refactor: Configuration improvement All checks were successful Build BAB Application Deployment Artifact / build (push) Successful in 2m13s Details	2024-06-17 15:37:45 -04:00
Patrick Toal	6ec4a1e025	feat: Re-enable profile page and allow editing name Some checks failed Build BAB Application Deployment Artifact / build (push) Failing after 4m48s Details	2024-06-15 10:28:38 -04:00
Patrick Toal	d063b0cf0d	fix: (auth) token login fix	2024-06-15 00:05:41 -04:00
Patrick Toal	643d74e29d	feat: (auth) switch to OTP code via e-mail All checks were successful Build BAB Application Deployment Artifact / build (push) Successful in 2m24s Details	2024-06-14 16:23:48 -04:00
Patrick Toal	1526a10630	feat: (auth) Add ability to signup with e-mail	2024-06-14 15:19:29 -04:00
Patrick Toal	fc035106d0	fix: trying to load resources before auth All checks were successful Build BAB Application Deployment Artifact / build (push) Successful in 2m29s Details	2024-06-13 23:46:43 -04:00
Patrick Toal	8ae855838b	feat: (auth) Add Google and DIscord Auth Some checks failed Build BAB Application Deployment Artifact / build (push) Failing after 2m0s Details	2024-06-13 23:38:03 -04:00
Patrick Toal	9bd10b56d9	Update TOS and Privacy Policy	2024-06-13 22:53:03 -04:00
Patrick Toal	1a78f82c5e	chore: update version strings	2024-06-13 20:35:13 -04:00
Patrick Toal	475ba45248	Fix imports All checks were successful Build BAB Application Deployment Artifact / build (push) Successful in 1m58s Details	2024-06-10 11:44:28 -04:00
Patrick Toal	2a949d771a	refactor: Redo env var names to work with vite. Add version All checks were successful Build BAB Application Deployment Artifact / build (push) Successful in 2m1s Details	2024-06-09 08:53:34 -04:00
Patrick Toal	7fc640d679	v0.6.1	2024-06-05 20:36:45 -04:00
Patrick Toal	91b54cf791	Bigger buttons	2024-06-04 16:41:43 -04:00
Patrick Toal	27b15a37f7	Bump version All checks were successful Build BAB Application Deployment Artifact / build (push) Successful in 2m18s Details	2024-06-04 16:35:42 -04:00
Patrick Toal	947b463fe2	Minor UI tweaks	2024-06-03 23:04:32 -04:00
Patrick Toal	c3098b073f	UI Enhancements	2024-06-03 12:01:38 -04:00
Patrick Toal	b2420b270c	Fix booking update and reactivity All checks were successful Build BAB Application Deployment Artifact / build (push) Successful in 2m28s Details	2024-06-02 10:08:57 -04:00
Patrick Toal	9104ccab0f	Many improvements. Still no reactivity on List	2024-06-02 08:48:14 -04:00
Patrick Toal	387af2e6ce	Sorted out a bunch of reactivity issues	2024-05-29 10:00:48 -04:00
Patrick Toal	6654132120	Add Delete Reservation function	2024-05-26 07:13:20 -04:00