v0.6.1

Bigger buttons
Bump version
2024-06-05 20:36:45 -04:00 · 2024-06-04 16:41:43 -04:00 · 2024-06-04 16:35:42 -04:00 · 2024-06-03 23:04:32 -04:00 · 2024-06-03 12:01:38 -04:00 · 2024-06-02 10:08:57 -04:00
46 changed files with 2586 additions and 1113 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,9 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true
--- a/.env.production
+++ b/.env.production
@@ -0,0 +1,2 @@
+APPWRITE_API_ENDPOINT='https://appwrite.oys.undock.ca/v1'
+APPWRITE_API_PROJECT='bab'
--- a/.gitea/workflows/build.yaml
+++ b/.gitea/workflows/build.yaml
@@ -21,6 +21,8 @@ jobs:
        run: yarn install
      - name: Install Quasar CLI
        run: yarn global add @quasar/cli
+      - name: Temporary - Invoke custom qcalendar build
+        run: quasar ext invoke @quasar/qcalendar
      - name: Create env file
        run: |
          echo "${{ vars.ENV_FILE }}" > .env.local
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +0,0 @@
-{
-  "singleQuote": true,
-  "semi": true
-}
--- a/docs/time.md
+++ b/docs/time.md
@@ -0,0 +1,20 @@
+# Dealing with Time
+
+Dealing with time sucks, okay? We have three different formats we need to deal with:
+
+1. ES Date - The native ECMAScript Date object. This is saddled with all the legacy of the decades. Hopefully, we will be able to retire this one day... Ref: https://tc39.es/proposal-temporal/docs/index.html
+2. ISO 8601 Date - Used by Appwrite backend. This is just a string, but can represent any date, with or without a timezone.
+3. Timestamp - Used internally by QCalendar.
+
+We can't just use one format. We need ISO8601 format for Appwrite, and we get passed Timestamp objects by QCalendar. In the middle of that, we need ES Date objects to do some underlying math.
+
+Componentization:
+In order to make things clean and modular, we will rely on Timestamp as the main format in a component.
+
+In data that comes from, or goes to the backend, we will store absolute dates in ISO format.
+
+For any user-facing dates / times, the data will be rendered in the users local time.
+
+For time-only data (as used in Intervals, eg: '09:00'), the template will be stored as a string of 'hh:mm', and represent the users local time. We may want to change this in the future, as this could prove a problem when a user is travelling, but wants to apply a template to their home location.
+
+For now, we'll use the Timestamp object provided by QCalendar. We might need to refactor this in the future.
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "oys_bab",
-  "version": "0.0.2",
+  "version": "0.6.1",
  "description": "Manage a Borrow a Boat program for a Yacht Club",
  "productName": "OYS Borrow a Boat",
  "author": "Patrick Toal <ptoal@takeflight.ca>",
@@ -14,14 +14,18 @@
  },
  "dependencies": {
    "@quasar/extras": "^1.16.11",
+    "@quasar/quasar-app-extension-qcalendar": "https://github.com/ptoal/quasar-ui-qcalendar/releases/download/v4.0.0-beta.19/app-extension.tgz",
+    "@quasar/quasar-ui-qcalendar": "https://github.com/ptoal/quasar-ui-qcalendar/releases/download/v4.0.0-beta.19/qcalendar-ui.tgz",
    "appwrite": "^14.0.1",
+    "axios": "^1.6.8",
+    "file": "^0.2.2",
    "pinia": "^2.1.7",
    "vue": "3",
-    "vue-router": "4"
+    "vue-router": "4",
+    "vue3-google-login": "^2.0.26"
  },
  "devDependencies": {
    "@quasar/app-vite": "^1.9.1",
-    "@quasar/quasar-app-extension-qcalendar": "^4.0.0-beta.16",
    "@types/node": "^12.20.21",
    "@typescript-eslint/eslint-plugin": "^5.10.0",
    "@typescript-eslint/parser": "^5.10.0",
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -48,12 +48,12 @@ 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({ path: '.env.local' }).parsed,
+      env: require('dotenv').config().parsed,
      target: {
        browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
        node: 'node16',
      },
-      vueRouterMode: 'hash', // available values: 'hash', 'history'
+      vueRouterMode: 'history', // available values: 'hash', 'history'
      // vueRouterBase,
      // vueDevtools,
      // vueOptionsAPI: false,
@@ -102,6 +102,12 @@ module.exports = configure(function (/* ctx */) {
          secure: false,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
+        '/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/App.vue
+++ b/src/App.vue
@@ -4,9 +4,9 @@

 <script setup lang="ts">
 import { defineComponent, onMounted } from 'vue';
-import { useScheduleStore } from './stores/schedule';
-import { useBoatStore } from './stores/boat';
 import { useAuthStore } from './stores/auth';
+import { useBoatStore } from './stores/boat';
+import { useReservationStore } from './stores/reservation';

 defineComponent({
  name: 'OYS Borrow-a-Boat',
@@ -14,8 +14,7 @@ defineComponent({

 onMounted(async () => {
  await useAuthStore().init();
-  await useScheduleStore().fetchTimeBlockTemplates();
-  await useScheduleStore().fetchTimeBlocks();
  await useBoatStore().fetchBoats();
+  await useReservationStore().fetchUserReservations();
 });
 </script>
--- a/src/boot/appwrite.ts
+++ b/src/boot/appwrite.ts
@@ -1,38 +1,75 @@
 import { boot } from 'quasar/wrappers';
-import { Client, Account, Databases, ID } from 'appwrite';
+import {
+  Client,
+  Account,
+  Databases,
+  Functions,
+  ID,
+  AppwriteException,
+  Teams,
+} from 'appwrite';
 import { useAuthStore } from 'src/stores/auth';
 import { Dialog, Notify } from 'quasar';
 import type { Router } from 'vue-router';

 const client = new Client();

-// appwrite.io SaaS
-// client
-//   .setEndpoint('https://api.bab.toal.ca/v1')
-//   .setProject('653ef6f76baf06d68034');
-// const appDatabaseId = '654ac5044d1c446feb71';
+let APPWRITE_API_ENDPOINT, APPWRITE_API_PROJECT;

 // Private self-hosted appwrite
-if (process.env.APPWRITE_API_ENDPOINT && process.env.APPWRITE_API_PROJECT)
-  client
-    .setEndpoint(process.env.APPWRITE_API_ENDPOINT)
-    .setProject(process.env.APPWRITE_API_PROJECT);
+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';
+} else {
+  APPWRITE_API_ENDPOINT = 'https://appwrite.oys.undock.ca/v1';
+  APPWRITE_API_PROJECT = 'bab';
+}
+client.setEndpoint(APPWRITE_API_ENDPOINT).setProject(APPWRITE_API_PROJECT);

-//TODO move this to config file
-const AppwriteIds = {
-  databaseId: '65ee1cbf9c2493faf15f',
-  collection: {
-    task: '65ee1cd5b550023fae4f',
-    taskTags: '65ee21d72d5c8007c34c',
-    skillTags: '66072582a74d94a4bd01',
-    boat: '66341910003e287cd71c',
-    timeBlock: '66361869002883fb4c4b',
-    timeBlockTemplate: '66361f480007fdd639af',
-  },
-};
+const pwresetUrl = process.env.DEV
+  ? 'http://localhost:4000/pwreset'
+  : 'https://oys.undock.ca/pwreset';
+
+const AppwriteIds = process.env.DEV
+  ? {
+      databaseId: '65ee1cbf9c2493faf15f',
+      collection: {
+        boat: 'boat',
+        reservation: 'reservation',
+        skillTags: 'skillTags',
+        task: 'task',
+        taskTags: 'taskTags',
+        interval: 'interval',
+        intervalTemplate: 'intervalTemplate',
+      },
+      function: {
+        userinfo: 'userinfo',
+      },
+    }
+  : {
+      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);
+const functions = new Functions(client);
+const teams = new Teams(client);
+
 let appRouter: Router;

 export default boot(async ({ router }) => {
@@ -62,7 +99,7 @@ async function logout() {
  });
 }

-function login(email: string, password: string) {
+async function login(email: string, password: string) {
  const notification = Notify.create({
    type: 'primary',
    position: 'top',
@@ -72,30 +109,56 @@ function login(email: string, password: string) {
    group: false,
  });
  const authStore = useAuthStore();
-  authStore
-    .login(email, password)
-    .then(() => {
-      notification({
-        type: 'positive',
-        message: 'Logged in!',
-        timeout: 2000,
-        spinner: false,
-        icon: 'check_circle',
-      });
-      console.log('Redirecting to index page');
-      appRouter.replace({ name: 'index' });
-    })
-    .catch(function (reason: Error) {
-      notification({
-        type: 'negative',
-        message: 'Login failed.',
-        timeout: 1,
-      });
+  try {
+    await authStore.login(email, password);
+    notification({
+      type: 'positive',
+      message: 'Logged in!',
+      timeout: 2000,
+      spinner: false,
+      icon: 'check_circle',
+    });
+    appRouter.replace({ name: 'index' });
+  } catch (error: unknown) {
+    if (error instanceof AppwriteException) {
+      if (error.type === 'user_session_already_exists') {
+        appRouter.replace({ name: 'index' });
+        notification({
+          type: 'positive',
+          message: 'Already Logged in!',
+          timeout: 2000,
+          spinner: false,
+          icon: 'check_circle',
+        });
+        return;
+      }
      Dialog.create({
        title: 'Login Error!',
-        message: reason.message,
+        message: error.message,
        persistent: true,
      });
+    }
+    notification({
+      type: 'negative',
+      message: 'Login failed.',
+      timeout: 2000,
    });
+  }
 }
-export { client, account, databases, ID, AppwriteIds, login, logout };
+
+async function resetPassword(email: string) {
+  await account.createRecovery(email, pwresetUrl);
+}
+
+export {
+  client,
+  account,
+  teams,
+  databases,
+  functions,
+  ID,
+  AppwriteIds,
+  login,
+  logout,
+  resetPassword,
+};
--- a/src/components/BoatReservationComponent.vue
+++ b/src/components/BoatReservationComponent.vue
@@ -0,0 +1,284 @@
+<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) => {
+  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);
+};
+
+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/BottomNavComponent.vue
+++ b/src/components/BottomNavComponent.vue
@@ -7,7 +7,7 @@
      icon="calendar_month"
      to="/schedule"
    ></q-route-tab>
-    <q-route-tab
+    <!-- <q-route-tab
      name="Checklists"
      icon="checklist"
      to="/checklist"
@@ -19,7 +19,7 @@
    ></q-route-tab>
    <q-route-tab name="Tasks" icon="build" to="/task">
      <q-badge color="red" floating> NEW </q-badge>
-    </q-route-tab>
+    </q-route-tab> -->
  </q-tabs>
 </template>

--- a/src/components/LeftDrawer.vue
+++ b/src/components/LeftDrawer.vue
@@ -4,22 +4,57 @@
    show-if-above
    :width="200"
    :breakpoint="1024"
-    @update:model-value="$emit('drawer-toggle')"
-  >
+    @update:model-value="$emit('drawer-toggle')">
    <q-scroll-area class="fit">
-      <q-list padding class="menu-list">
-        <template v-for="link in links" :key="link.name">
-          <q-item clickable v-ripple :to="link.to">
+      <q-list
+        padding
+        class="menu-list">
+        <template
+          v-for="link in enabledLinks"
+          :key="link.name">
+          <!-- TODO: Template this to be DRY -->
+          <q-item
+            clickable
+            v-ripple
+            :to="link.to">
            <q-item-section avatar>
              <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
+              v-for="sublink in link.sublinks"
+              :key="sublink.name">
+              <q-item
+                clickable
+                v-ripple
+                :to="sublink.to"
+                class="q-ml-md">
+                <q-item-section avatar>
+                  <q-icon :name="sublink.icon" />
+                </q-item-section>
+
+                <q-item-section>
+                  <span :class="sublink.color ? `text-${sublink.color}` : ''">
+                    {{ sublink.name }}
+                  </span>
+                </q-item-section>
+              </q-item>
+            </div>
+          </q-list>
        </template>
-        <q-item clickable v-ripple @click="logout()">
-          <q-item-section avatar><q-icon name="logout" /></q-item-section
-          ><q-item-section>Logout</q-item-section>
+        <q-item
+          clickable
+          v-ripple
+          @click="logout()">
+          <q-item-section avatar><q-icon name="logout" /></q-item-section>
+          <q-item-section>Logout</q-item-section>
        </q-item>
      </q-list>
    </q-scroll-area>
@@ -28,7 +63,7 @@

 <script lang="ts" setup>
 import { defineComponent } from 'vue';
-import { links } from 'src/router/navlinks.js';
+import { enabledLinks } from 'src/router/navlinks.js';
 import { logout } from 'boot/appwrite';

 defineProps(['drawer']);
--- 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';
@@ -107,16 +113,18 @@ import {
  QCalendarResource,
  TimestampOrNull,
  today,
-  parseDate,
  parseTimestamp,
  addToDate,
  Timestamp,
+  parsed,
 } from '@quasar/quasar-ui-qcalendar';
 import { Boat, useBoatStore } from 'src/stores/boat';
-import { useScheduleStore } from 'src/stores/schedule';
+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;
@@ -145,8 +153,8 @@ const statusLookup = {

 const calendar = ref();
 const boatStore = useBoatStore();
-const scheduleStore = useScheduleStore();
-const selectedDate = ref(today());
+const reservationStore = useReservationStore();
+const { selectedDate } = storeToRefs(useIntervalStore());
 const duration = ref(1);

 const formattedMonth = computed(() => {
@@ -171,14 +179,14 @@ function monthFormatter() {
 }

 function getEvents(scope: ResourceIntervalScope) {
-  const resourceEvents = scheduleStore.getBoatReservations(
-    parseDate(date.extractDate(selectedDate.value, 'YYYY-MM-DD')) as Timestamp,
+  const resourceEvents = reservationStore.getReservationsByDate(
+    selectedDate.value,
    scope.resource.$id
  );

  return resourceEvents.map((event) => {
    return {
-      left: scope.timeStartPosX(parseDate(event.start)),
+      left: scope.timeStartPosX(parsed(event.start)),
      width: scope.timeDurationWidth(
        date.getDateDiff(event.end, event.start, 'minutes')
      ),
--- a/src/components/ToolbarComponent.vue
+++ b/src/components/ToolbarComponent.vue
@@ -7,16 +7,16 @@
        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>v2024.6.4.2</div>
    </q-toolbar>
  </q-header>
-  <LeftDrawer :drawer="leftDrawerOpen" @drawer-toggle="toggleLeftDrawer" />
+  <LeftDrawer
+    :drawer="leftDrawerOpen"
+    @drawer-toggle="toggleLeftDrawer" />
 </template>

 <script setup lang="ts">
--- a/src/components/boat/BoatPreviewComponent.vue
+++ b/src/components/boat/BoatPreviewComponent.vue
@@ -1,8 +1,13 @@
 <template>
  <div v-if="boats">
-    <q-card v-for="boat in boats" :key="boat.id" flat class="mobile-card">
+    <q-card
+      v-for="boat in boats"
+      :key="boat.id"
+      class="mobile-card q-ma-sm">
      <q-card-section>
-        <q-img :src="boat.imgSrc" :fit="'scale-down'">
+        <q-img
+          :src="boat.imgSrc"
+          :fit="'scale-down'">
          <div class="row absolute-top">
            <div class="col text-h6 text-left">{{ boat.name }}</div>
            <div class="col text-right">{{ boat.class }}</div>
@@ -12,12 +17,12 @@

      <q-separator />

-      <q-card-actions align="evenly">
+      <!-- <q-card-actions align="evenly">
        <q-btn flat>Info</q-btn>
        <q-btn flat>Book</q-btn>
        <q-btn flat>Check-Out</q-btn>
        <q-btn flat>Check-In</q-btn>
-      </q-card-actions>
+      </q-card-actions> -->
    </q-card>
  </div>
  <div v-else><q-card>Sorry, no boats to show you!</q-card></div>
--- a/src/components/scheduling/IntervalTemplateComponent.vue
+++ b/src/components/scheduling/IntervalTemplateComponent.vue
@@ -0,0 +1,173 @@
+<template>
+  <q-expansion-item
+    expand-icon-toggle
+    draggable="true"
+    @dragstart="onDragStart($event, template)"
+    v-model="expanded">
+    <template v-slot:header>
+      <q-item-section>
+        <q-input
+          label="Template name"
+          :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>
+    </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-input
+                class="q-mx-sm"
+                dense
+                v-model="item[0]"
+                type="time"
+                label="Start"
+                :borderless="!edit"
+                :readonly="!edit" />
+              <q-input
+                class="q-mx-sm"
+                dense
+                v-model="item[1]"
+                type="time"
+                label="End"
+                :borderless="!edit"
+                :readonly="!edit">
+                <template v-slot:after>
+                  <q-btn
+                    v-if="edit"
+                    round
+                    dense
+                    flat
+                    icon="delete"
+                    @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>
+        <q-card-actions vertical>
+          <q-btn
+            v-if="!edit"
+            color="primary"
+            icon="edit"
+            label="Edit"
+            @click="toggleEdit" />
+          <q-btn
+            v-if="edit"
+            color="primary"
+            icon="save"
+            label="Save"
+            @click="saveTemplate($event, template)" />
+          <q-btn
+            v-if="edit"
+            color="secondary"
+            icon="cancel"
+            label="Cancel"
+            @click="revert" />
+          <q-btn
+            color="negative"
+            icon="delete"
+            label="Delete"
+            v-if="template.$id !== ''"
+            @click="deleteTemplate($event, template)" />
+        </q-card-actions>
+      </q-card-section>
+    </q-card>
+  </q-expansion-item>
+  <q-dialog v-model="alert">
+    <q-card>
+      <q-card-section>
+        <div class="text-h6">Overlapped blocks!</div>
+      </q-card-section>
+      <q-card-section class="q-pt-none">
+        <q-chip
+          square
+          icon="schedule"
+          v-for="item in overlapped"
+          :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>
+</template>
+
+<script setup lang="ts">
+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 intervalTemplateStore = useIntervalTemplateStore();
+const props = defineProps<{ edit?: boolean; modelValue: IntervalTemplate }>();
+const edit = ref(props.edit);
+const expanded = ref(props.edit);
+const template = ref(copyIntervalTemplate(props.modelValue));
+
+const emit = defineEmits<{ (e: 'cancel'): void; (e: 'saved'): void }>();
+
+const revert = () => {
+  template.value = copyIntervalTemplate(props.modelValue);
+  edit.value = false;
+  emit('cancel');
+};
+
+const toggleEdit = () => {
+  edit.value = !edit.value;
+};
+
+const deleteTemplate = (
+  event: Event,
+  template: IntervalTemplate | undefined
+) => {
+  if (template?.$id) intervalTemplateStore.deleteIntervalTemplate(template.$id);
+};
+
+function onDragStart(e: DragEvent, template: IntervalTemplate) {
+  if (e.dataTransfer) {
+    e.dataTransfer.dropEffect = 'copy';
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('ID', template.$id || '');
+  }
+}
+const saveTemplate = (evt: Event, template: IntervalTemplate | undefined) => {
+  if (!template) return false;
+  overlapped.value = timeTuplesOverlapped(template.timeTuples);
+  if (overlapped.value.length > 0) {
+    alert.value = true;
+  } else {
+    edit.value = false;
+    if (template.$id && template.$id !== 'unsaved') {
+      intervalTemplateStore.updateIntervalTemplate(template, template.$id);
+    } else {
+      intervalTemplateStore.createIntervalTemplate(template);
+      emit('saved');
+    }
+  }
+};
+</script>
--- 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/TimeBlockTemplateComponent.vue
+++ b/src/components/scheduling/TimeBlockTemplateComponent.vue
@@ -1,129 +0,0 @@
-<template>
-  <q-card>
-    <q-card-section horizontal>
-      <div>
-        <q-input
-          label="Template name"
-          filled
-          dense
-          v-model="template.name"
-          v-if="editable"
-        />
-        <q-list dense>
-          <q-item v-for="item in template.timeTuples" :key="item[0]">
-            <q-input
-              dense
-              :filled="editable"
-              v-model="item[0]"
-              type="time"
-              label="Start"
-              :readonly="!editable"
-            />
-            <q-input
-              :filled="editable"
-              dense
-              v-model="item[1]"
-              type="time"
-              label="End"
-              :readonly="!editable"
-            /> </q-item></q-list
-        ><q-btn
-          v-if="editable"
-          dense
-          color="primary"
-          size="sm"
-          label="Add interval"
-          @click="template.timeTuples.push(['00:00', '00:00'])"
-        />
-      </div>
-      <q-card-actions align="right" vertical>
-        <q-btn
-          v-if="!editable"
-          color="primary"
-          icon="edit"
-          label="Edit"
-          @click="editable = !editable"
-        />
-        <q-btn
-          v-if="editable"
-          color="primary"
-          icon="save"
-          label="Save"
-          @click="saveTemplate($event, template)"
-        />
-        <q-btn
-          v-if="editable"
-          color="secondary"
-          icon="cancel"
-          label="Cancel"
-          @click="revert"
-        />
-        <q-btn
-          color="negative"
-          icon="delete"
-          label="Delete"
-          @click="deleteTemplate($event, template)"
-        />
-      </q-card-actions>
-    </q-card-section>
-  </q-card>
-  <q-dialog v-model="alert">
-    <q-card>
-      <q-card-section>
-        <div class="text-h6">Overlapped blocks!</div>
-      </q-card-section>
-      <q-card-section class="q-pt-none">
-        <q-chip
-          square
-          icon="schedule"
-          v-for="item in overlapped"
-          :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>
-</template>
-
-<script setup lang="ts">
-import { timeTuplesOverlapped, useScheduleStore } from 'src/stores/schedule';
-import { TimeBlockTemplate } from 'src/stores/schedule.types';
-import { ref } from 'vue';
-const editable = ref(false);
-const alert = ref(false);
-const overlapped = ref();
-const scheduleStore = useScheduleStore();
-const template = defineModel<TimeBlockTemplate>({ required: true });
-
-const revert = () => {
-  editable.value = false;
-};
-
-const deleteTemplate = (
-  event: Event,
-  template: TimeBlockTemplate | undefined
-) => {
-  if (template?.$id) scheduleStore.deleteTimeBlockTemplate(template.$id);
-};
-// const edit = () => {
-//   // TODO: Make it so that editing the template does not affect the store.  Need to be able to "cancel" editing, and revert to original data
-// };
-const saveTemplate = (evt: Event, template: TimeBlockTemplate | undefined) => {
-  if (!template) return false;
-  overlapped.value = timeTuplesOverlapped(template.timeTuples);
-  if (overlapped.value.length > 0) {
-    alert.value = true;
-  } else {
-    if (template.$id) {
-      console.log(template.$id);
-      scheduleStore.updateTimeBlockTemplate(template, template.$id);
-    } else {
-      scheduleStore.createTimeBlockTemplate(template);
-    }
-    editable.value = false;
-  }
-};
-</script>
--- a/src/components/scheduling/boat/BoatScheduleTableComponent.vue
+++ b/src/components/scheduling/boat/BoatScheduleTableComponent.vue
@@ -1,63 +1,86 @@
 <template>
  <div>
-    <CalendarHeaderComponent v-model="selectedDate" />
-    <div class="boat-schedule-table-component">
-      <QCalendarDay
-        ref="calendar"
-        class="q-pa-xs"
-        flat
-        animated
-        dense
-        :disabled-before="disabledBefore"
-        interval-height="24"
-        interval-count="18"
-        interval-start="06:00"
-        :short-interval-label="true"
-        v-model="selectedDate"
-        :column-count="boats.length"
-        v-touch-swipe.left.right="handleSwipe"
-      >
-        <template #head-day="{ scope }">
-          <div style="text-align: center; font-weight: 800">
-            {{ getBoatDisplayName(scope) }}
-          </div>
-        </template>
+    <q-card>
+      <q-toolbar>
+        <q-toolbar-title>Select a Boat and Time</q-toolbar-title>
+        <q-btn
+          icon="close"
+          flat
+          round
+          dense
+          v-close-popup />
+      </q-toolbar>
+      <q-separator />
+      <CalendarHeaderComponent v-model="selectedDate" />
+      <div class="boat-schedule-table-component">
+        <QCalendarDay
+          ref="calendar"
+          class="q-pa-xs"
+          flat
+          animated
+          dense
+          :disabled-before="disabledBefore"
+          interval-height="24"
+          interval-count="18"
+          interval-start="06:00"
+          :short-interval-label="true"
+          v-model="selectedDate"
+          :column-count="boats.length"
+          v-touch-swipe.left.right="handleSwipe">
+          <template #head-day="{ scope }">
+            <div style="text-align: center; font-weight: 800">
+              {{ getBoatDisplayName(scope) }}
+            </div>
+          </template>

-        <template #day-body="{ scope }">
-          <div v-for="block in getBoatBlocks(scope)" :key="block.$id">
+          <template #day-body="{ scope }">
            <div
-              class="timeblock"
-              :class="selectedBlock?.$id === block.$id ? 'selected' : ''"
-              :style="
-                blockStyles(block, scope.timeStartPos, scope.timeDurationHeight)
-              "
-              :id="block.id"
-              @click="selectBlock($event, scope, block)"
-            >
-              {{ boats[scope.columnIndex].name }}<br />
-              {{ selectedBlock?.$id === block.$id ? 'Selected' : 'Available' }}
+              v-for="block in getAvailableIntervals(
+                scope.timestamp,
+                boats[scope.columnIndex]
+              )"
+              :key="block.$id">
+              <div
+                class="timeblock"
+                :disabled="beforeNow(new Date(block.end))"
+                :class="selectedBlock?.$id === block.$id ? 'selected' : ''"
+                :style="
+                  blockStyles(
+                    block,
+                    scope.timeStartPos,
+                    scope.timeDurationHeight
+                  )
+                "
+                :id="block.id"
+                @click="selectBlock($event, scope, block)">
+                {{ boats[scope.columnIndex].name }}
+                <br />
+                {{
+                  selectedBlock?.$id === block.$id ? 'Selected' : 'Available'
+                }}
+              </div>
            </div>
-          </div>
-          <!-- <div
-            v-for="r in boats[scope.columnIndex].reservations"
-            :key="r.id"
-          >
            <div
-              class="reservation"
-              :style="
-                reservationStyles(
-                  r,
-                  scope.timeStartPos,
-                  scope.timeDurationHeight
-                )
-              "
-            >
-              {{ r.user }}
+              v-for="reservation in getBoatReservations(scope)"
+              :key="reservation.$id">
+              <div
+                class="reservation column"
+                :style="
+                  reservationStyles(
+                    reservation,
+                    scope.timeStartPos,
+                    scope.timeDurationHeight
+                  )
+                ">
+                {{ getUserName(reservation.user) || 'loading...' }}
+                <br />
+                <q-chip class="gt-md">{{ reservation.reason }}</q-chip>
+              </div>
            </div>
-          </div> -->
-        </template>
-      </QCalendarDay>
-    </div>
+          </template>
+        </QCalendarDay>
+      </div>
+    </q-card>
  </div>
 </template>

@@ -73,37 +96,57 @@ import {
 } from '@quasar/quasar-ui-qcalendar';
 import CalendarHeaderComponent from './CalendarHeaderComponent.vue';

-import { ref, computed } from 'vue';
+import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useBoatStore } from 'src/stores/boat';
-import { useScheduleStore } from 'src/stores/schedule';
-import { TimeBlock } from 'src/stores/schedule.types';
+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<TimeBlock | null>();
+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 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();
 }
-// function reservationStyles(
-//   reservation: Reservation,
-//   timeStartPos: (t: string) => string,
-//   timeDurationHeight: (d: number) => string
-// ) {
-//   return genericBlockStyle(
-//     parseDate(reservation.start) as Timestamp,
-//     parseDate(reservation.end) as Timestamp,
-//     timeStartPos,
-//     timeDurationHeight
-//   );
-// }
+function reservationStyles(
+  reservation: Reservation,
+  timeStartPos: (t: string) => string,
+  timeDurationHeight: (d: number) => string
+) {
+  return genericBlockStyle(
+    parseDate(new Date(reservation.start)) as Timestamp,
+    parseDate(new Date(reservation.end)) as Timestamp,
+    timeStartPos,
+    timeDurationHeight
+  );
+}
+
+function getUserName(userid: string) {
+  return useAuthStore().getUserNameById(userid);
+}

 function blockStyles(
-  block: TimeBlock,
+  block: Interval,
  timeStartPos: (t: string) => string,
  timeDurationHeight: (d: number) => string
 ) {
@@ -121,6 +164,10 @@ function getBoatDisplayName(scope: DayBodyScope) {
    : '';
 }

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

@@ -154,61 +198,26 @@ interface DayBodyScope {
  timestamp: Timestamp;
 }

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

-interface BoatBlocks {
-  [key: string]: TimeBlock[];
-}
-
-const boatBlocks = computed((): BoatBlocks => {
-  return scheduleStore
-    .getTimeBlocksForDate(selectedDate.value)
-    .reduce((result, tb) => {
-      if (!result[tb.boatId]) result[tb.boatId] = [];
-      result[tb.boatId].push(tb);
+const boatReservations = computed((): Record<string, Reservation[]> => {
+  return reservationStore
+    .getReservationsByDate(selectedDate.value)
+    .reduce((result, reservation) => {
+      if (!result[reservation.resource]) result[reservation.resource] = [];
+      result[reservation.resource].push(reservation);
      return result;
-    }, <BoatBlocks>{});
+    }, <Record<string, Reservation[]>>{});
 });
-
-function getBoatBlocks(scope: DayBodyScope): TimeBlock[] {
-  return boats.value[scope.columnIndex]
-    ? boatBlocks.value[boats.value[scope.columnIndex].$id]
-    : [];
+function getBoatReservations(scope: DayBodyScope): Reservation[] {
+  const boat = boats.value[scope.columnIndex];
+  return boat ? boatReservations.value[boat.$id] : [];
 }

-// function changeEvent({ start }: { start: string }) {
-// const newBlocks = scheduleStore.getTimeBlocksForDate(start);
-// const reservations = scheduleStore.getBoatReservations(
-//   parsed(start) as Timestamp
-// );
-// boats.value.map((boat) => {
-//   boat.reservations = reservations.filter(
-//     (reservation) => reservation.resource === boat
-//   );
-//   boat.blocks = newBlocks.filter(
-//     (block) =>
-//       block.boatId === boat.$id &&
-//       boat.reservations?.filter(
-//         (r: Reservation) =>
-//           r.start <
-//             date.addToDate(makeDateTime(parsed(block.end) as Timestamp), {
-//               hours: 4,
-//             }) &&
-//           r.end >
-//             date.addToDate(makeDateTime(parsed(block.start) as Timestamp), {
-//               hours: 4,
-//             })
-//       ).length == 0
-//   );
-// });
-// setTimeout(() => calendar.value?.scrollToTime('09:00'), 100); // Should figure out why we need this setTimeout...
-// }
-
 const disabledBefore = computed(() => {
  const todayTs = parseTimestamp(today()) as Timestamp;
  return addToDate(todayTs, { day: -1 }).date;
@@ -256,4 +265,7 @@ const disabledBefore = computed(() => {
  font-size: 0.8em
 .q-calendar-day__day.q-current-day
  padding: 1px
+.q-calendar-day__head--days__column
+  background: $primary
+  color: white
 </style>
--- a/src/components/task/TaskEditComponent.vue
+++ b/src/components/task/TaskEditComponent.vue
@@ -252,14 +252,11 @@ const dateRule = (val: string) => {
 const router = useRouter();

 async function onSubmit() {
-  //console.log(modifiedTask);
  try {
    if (modifiedTask.$id) {
      await taskStore.updateTask(modifiedTask);
-      console.log('Updated Task: ' + modifiedTask.$id);
    } else {
      await taskStore.addTask(modifiedTask);
-      console.log('Created Task');
    }
    router.go(-1);
  } catch (error) {
--- a/src/pages/BoatPage.vue
+++ b/src/pages/BoatPage.vue
@@ -7,11 +7,13 @@

 <script lang="ts" setup>
 import BoatPreviewComponent from 'src/components/boat/BoatPreviewComponent.vue';
-import { ref } from 'vue';
+import { onMounted } from 'vue';
 import { useBoatStore } from 'src/stores/boat';
 import ToolbarComponent from 'src/components/ToolbarComponent.vue';
+import { storeToRefs } from 'pinia';

 const boatStore = useBoatStore();
-boatStore.fetchBoats();
-const boats = ref(useBoatStore().boats);
+const { boats } = storeToRefs(boatStore);
+
+onMounted(() => boatStore.fetchBoats());
 </script>
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -4,7 +4,7 @@
    <q-img alt="OYS Logo" src="~assets/oysqn_logo.png" fit="scale-down" />
    <q-list class="full-width mobile-only">
      <q-item
-        v-for="link in links.filter((x) => x.front_links)"
+        v-for="link in enabledLinks.filter((x) => x.front_links)"
        :key="link.name"
      >
        <q-btn
@@ -23,6 +23,6 @@
 </template>

 <script lang="ts" setup>
-import { links } from 'src/router/navlinks.js';
+import { enabledLinks } from 'src/router/navlinks.js';
 import ToolbarComponent from 'components/ToolbarComponent.vue';
 </script>
--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@@ -3,48 +3,55 @@
    <q-page-container>
      <q-page class="flex bg-image flex-center">
        <q-card
-          v-bind:style="$q.screen.lt.sm ? { width: '80%' } : { width: '30%' }"
-        >
+          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-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">Log in</div>
            </div>
          </q-card-section>
-          <q-card-section>
-            <q-form class="q-gutter-md">
+          <q-form>
+            <q-card-section class="q-gutter-md">
              <q-input
                v-model="email"
                label="E-Mail"
                type="email"
                color="darkblue"
-                filled
-              ></q-input>
+                filled></q-input>
              <q-input
                v-model="password"
                label="Password"
                type="password"
                color="darkblue"
-                filled
-              ></q-input>
-              <q-btn
-                type="submit"
-                @click="login(email, password)"
-                label="Login"
-                color="primary"
-              ></q-btn>
-              <!-- <q-btn
+                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-form>
-          </q-card-section>
-          <q-card-section><GoogleOauthComponent /></q-card-section>
+              </q-card-actions>
+            </q-card-section>
+          </q-form>
+          <!-- <q-card-section><GoogleOauthComponent /></q-card-section> -->
        </q-card>
      </q-page>
    </q-page-container>
@@ -69,8 +76,12 @@
 <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';

 const email = ref('');
 const password = ref('');
+
+const doLogin = async () => {
+  login(email.value, password.value);
+};
 </script>
--- a/src/pages/ResetPassword.vue
+++ b/src/pages/ResetPassword.vue
@@ -0,0 +1,190 @@
+<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">Reset Password</div>
+            </div>
+          </q-card-section>
+          <q-form v-if="!isPasswordResetLink()">
+            <q-card-section class="q-ma-sm">
+              <q-input
+                v-model="email"
+                label="E-Mail"
+                type="email"
+                color="darkblue"
+                @keydown.enter.prevent="resetPw"
+                filled></q-input>
+              <div class="text-caption q-py-md">
+                Enter your e-mail address. If we have an account with that
+                address on file, you will be e-mailed a link to reset your
+                password.
+              </div>
+              <q-card-actions>
+                <q-btn
+                  type="button"
+                  @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>
+          <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>
+  </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 { account, resetPassword } from 'boot/appwrite';
+import { useRouter } from 'vue-router';
+import { Dialog } from 'quasar';
+// import GoogleOauthComponent from 'src/components/GoogleOauthComponent.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;
+}
+
+function validResetLink(): boolean {
+  const query = router.currentRoute.value.query;
+  const expire = query.expire ? new Date(query.expire + 'Z') : null;
+  return Boolean(
+    query && expire && query.secret && query.userId && new Date() < expire
+  );
+}
+
+function submitNewPw() {
+  const query = router.currentRoute.value.query;
+  if (
+    validatePasswordStrength(password.value) === true &&
+    validatePasswordsMatch(confirmPassword.value) === true
+  ) {
+    account
+      .updateRecovery(
+        query.userId as string,
+        query.secret as string,
+        password.value
+      )
+      .then(() => {
+        Dialog.create({ message: 'Password Changed!' });
+        router.replace('/login');
+      })
+      .catch((e) =>
+        Dialog.create({
+          message: 'Password change failed!  Error: ' + e.message,
+        })
+      );
+  }
+}
+
+function resetPw() {
+  resetPassword(email.value)
+    .then(() => router.replace('/login'))
+    .finally(() =>
+      Dialog.create({
+        message:
+          'If your address is in our system, you should receive an e-mail shortly.',
+      })
+    );
+}
+</script>
--- a/src/pages/schedule/BoatReservationPage.vue
+++ b/src/pages/schedule/BoatReservationPage.vue
@@ -1,178 +1,27 @@
 <template>
-  <q-page>
-    <q-list>
-      <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-sm">
-        <q-item>
-          <q-item-section :avatar="true">
-            <q-icon name="person"
-          /></q-item-section>
-          <q-item-section>
-            <q-item-label> Name: {{ bookingForm.name }} </q-item-label>
-          </q-item-section>
-        </q-item>
-        <q-expansion-item
-          expand-separator
-          v-model="resourceView"
-          icon="calendar_month"
-          label="Boat and Time"
-          default-opened
-          class="q-mt-none"
-          :caption="bookingSummary"
-        >
-          <q-separator />
-          <q-banner :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-3'">
-            Use the calendar to pick a date. Select an available boat and
-            timeslot below.
-          </q-banner>
-          <BoatScheduleTableComponent v-model="timeblock" />
-
-          <q-banner
-            rounded
-            class="bg-warning text-grey-10"
-            style="max-width: 95vw; margin: auto"
-            v-if="bookingForm.boat && bookingForm.boat.defects.length > 0"
-          >
-            <template v-slot:avatar>
-              <q-icon name="warning" color="grey-10" />
-            </template>
-            {{ bookingForm.boat.name }} currently has the following notices:
-            <ol>
-              <li
-                v-for="defect in bookingForm.boat.defects"
-                :key="defect.description"
-              >
-                {{ defect.description }}
-              </li>
-            </ol>
-          </q-banner>
-          <q-card-section>
-            <q-btn
-              color="primary"
-              class="full-width"
-              icon="keyboard_arrow_down"
-              icon-right="keyboard_arrow_down"
-              label="Next: Crew & Passengers"
-              @click="resourceView = false"
-          /></q-card-section>
-        </q-expansion-item>
-        <q-expansion-item
-          expand-separator
-          icon="people"
-          label="Crew and Passengers"
-          default-opened
-          ><q-banner v-if="bookingForm.boat"
-            >Passengers:
-            {{ bookingForm.members.length + bookingForm.guests.length }} /
-            {{ bookingForm.boat.maxPassengers }}</q-banner
-          >
-          <q-item
-            class="q-my-sm"
-            v-for="passenger in [...bookingForm.members, ...bookingForm.guests]"
-            :key="passenger.name"
-          >
-            <q-item-section avatar>
-              <q-avatar color="primary" text-color="white" size="sm">
-                {{
-                  passenger.name
-                    .split(' ')
-                    .map((i) => i.charAt(0))
-                    .join('')
-                    .toUpperCase()
-                }}
-              </q-avatar>
-            </q-item-section>
-            <q-item-section>{{ passenger.name }}</q-item-section>
-            <q-item-section side>
-              <q-btn color="negative" flat dense round icon="cancel" />
-            </q-item-section>
-          </q-item>
-          <q-separator />
-        </q-expansion-item>
-
-        <q-item-section>
-          <q-btn label="Submit" type="submit" color="primary" />
-        </q-item-section> </q-form
-    ></q-list>
-  </q-page>
+  <BoatReservationComponent v-model="newReservation" />
 </template>

 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
-import { useAuthStore } from 'src/stores/auth';
-import { Boat, useBoatStore } from 'src/stores/boat';
-import { date } from 'quasar';
-import { useScheduleStore } from 'src/stores/schedule';
-import { TimeBlock } from 'src/stores/schedule.types';
-import BoatScheduleTableComponent from 'src/components/scheduling/boat/BoatScheduleTableComponent.vue';
+import BoatReservationComponent from 'src/components/BoatReservationComponent.vue';
+import { useIntervalStore } from 'src/stores/interval';
+import { Interval, Reservation } from 'src/stores/schedule.types';
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';

-interface BookingForm {
-  bookingId: string;
-  name?: string;
-  boat?: Boat;
-  startDate?: string;
-  endDate?: string;
-  members: { name: string }[];
-  guests: { name: string }[];
-}
+const $route = useRoute();
+const newReservation = ref<Reservation>();

-const auth = useAuthStore();
-const dateFormat = 'MMM D, YYYY h:mm A';
-const resourceView = ref(true);
-const scheduleStore = useScheduleStore();
-const timeblock = ref<TimeBlock>();
-const bookingForm = ref<BookingForm>({
-  bookingId: scheduleStore.getNewId(),
-  name: auth.currentUser?.name,
-  boat: <Boat | undefined>undefined,
-  startDate: date.formatDate(new Date(), dateFormat),
-  endDate: date.formatDate(new Date(), dateFormat),
-  members: [{ name: 'Karen Henrikso' }, { name: "Rich O'hare" }],
-  guests: [{ name: 'Bob Barker' }, { name: 'Taylor Swift' }],
-});
-
-watch(timeblock, (tb_new) => {
-  bookingForm.value.boat = useBoatStore().boats.find(
-    (b) => b.$id === tb_new?.boatId
-  );
-  bookingForm.value.startDate = date.formatDate(tb_new?.start, dateFormat);
-  bookingForm.value.endDate = date.formatDate(tb_new?.end, dateFormat);
-  console.log(tb_new);
-});
-
-// //TODO: Turn this into a validator.
-// scheduleStore.isReservationOverlapped(newRes)
-//   ? Dialog.create({ message: 'This booking overlaps another!' })
-//   : scheduleStore.addOrCreateReservation(newRes);
-
-const onReset = () => {
-  // TODO
-};
-
-const onSubmit = () => {
-  // TODO
-};
-
-const bookingDuration = computed(() => {
-  if (bookingForm.value.endDate && bookingForm.value.startDate) {
-    const diff = date.getDateDiff(
-      bookingForm.value.endDate,
-      bookingForm.value.startDate,
-      'minutes'
+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,
+        })
    );
-    return diff <= 0
-      ? 'Invalid'
-      : (diff > 60 ? Math.trunc(diff / 60) + ' hours' : '') +
-          (diff % 60 > 0 ? ' ' + (diff % 60) + ' minutes' : '');
-  } else {
-    return 0;
-  }
-});
-
-const bookingSummary = computed(() => {
-  return bookingForm.value.boat &&
-    bookingForm.value.startDate &&
-    bookingForm.value.endDate
-    ? `${bookingForm.value.boat.name} @ ${bookingForm.value.startDate} for ${bookingDuration.value}`
-    : '';
-});
+}
 </script>
--- a/src/pages/schedule/BoatScheduleView.vue
+++ b/src/pages/schedule/BoatScheduleView.vue
@@ -1,128 +1,163 @@
 <template>
-  <q-page padding>
-    <div class="subcontent">
-      <!-- <navigation-bar @today="onToday" @prev="onPrev" @next="onNext" /> -->
-
-      <div class="row justify-center">
-        <q-calendar-day
-          ref="calendar"
-          v-model="selectedDate"
-          view="day"
-          :max-days="3"
-          bordered
-          animated
-          transition-next="slide-left"
-          transition-prev="slide-right"
-          @change="onChange"
-          @moved="onMoved"
-          @click-date="onClickDate"
-          @click-time="onClickTime"
-          @click-interval="onClickInterval"
-          @click-head-day="onClickHeadDay"
-        >
-          <template
-            #day-body="{
-              scope: { timestamp, timeStartPos, timeDurationHeight },
-            }"
-          >
-            <template
-              v-for="event in reservationEvents(timestamp)"
-              :key="event.id"
-            >
-              <div
-                v-if="event.start !== undefined"
-                class="booking-event"
-                :style="slotStyle(event, timeStartPos, timeDurationHeight)"
-              >
-                <span class="title q-calendar__ellipsis">
-                  {{ event.user }}
-                  <q-tooltip>{{
-                    event.start + ' - ' + event.resource.name
-                  }}</q-tooltip>
-                </span>
-              </div>
-            </template>
-          </template>
-        </q-calendar-day>
-      </div>
+  <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"
+        v-model:model-resources="boatStore.boats"
+        resource-key="$id"
+        resource-label="displayName"
+        :weekdays="[1, 2, 3, 4, 5, 6, 0]"
+        :view="$q.screen.gt.md ? 'week' : 'day'"
+        v-touch-swipe.mouse.left.right="handleSwipe"
+        :max-days="$q.screen.lt.sm ? 3 : 7"
+        animated
+        bordered
+        style="--calendar-resources-width: 40px">
+        <template #day="{ scope }">
+          <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>
    </div>
  </q-page>
 </template>

 <script setup lang="ts">
-import { useScheduleStore } from 'src/stores/schedule';
-import { Reservation } from 'src/stores/schedule.types';
+import { useReservationStore } from 'src/stores/reservation';
 import { ref } from 'vue';
-const scheduleStore = useScheduleStore();
-import { TimestampOrNull, parseDate, today } from '@quasar/quasar-ui-qcalendar';
-import { QCalendarDay } from '@quasar/quasar-ui-qcalendar';
-import { date } from 'quasar';
+import { useAuthStore } from 'src/stores/auth';
+
+const reservationStore = useReservationStore();
+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;
+// }
+
+const getSortedIntervals = (timestamp: Timestamp, boat?: Boat): Interval[] => {
+  return getAvailableIntervals(timestamp, boat)
+    .concat(boatReservationEvents(timestamp, boat))
+    .sort((a, b) => Date.parse(a.start) - Date.parse(b.start));
+};
 // Method declarations

-function slotStyle(
-  event: Reservation,
-  timeStartPos: (time: TimestampOrNull) => string,
-  timeDurationHeight: (minutes: number) => string
-) {
-  const s = {
-    top: '',
-    height: '',
-    'align-items': 'flex-start',
-  };
-  if (timeStartPos && timeDurationHeight) {
-    s.top = timeStartPos(parseDate(event.start)) + 'px';
-    s.height =
-      timeDurationHeight(date.getDateDiff(event.end, event.start, 'minutes')) +
-      'px';
-  }
-  return s;
-}
+// function slotStyle(
+//   event: Reservation,
+//   timeStartPos: (time: TimestampOrNull) => string,
+//   timeDurationHeight: (minutes: number) => string
+// ) {
+//   const s = {
+//     top: '',
+//     height: '',
+//     'align-items': 'flex-start',
+//   };
+//   if (timeStartPos && timeDurationHeight) {
+//     s.top = timeStartPos(parsed(event.start)) + 'px';
+//     s.height =
+//       timeDurationHeight(date.getDateDiff(event.end, event.start, 'minutes')) +
+//       'px';
+//   }
+//   return s;
+// }

-function reservationEvents(timestamp: Timestamp) {
-  return scheduleStore.getBoatReservations(timestamp);
+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();
 }
-function onMoved(data: Event) {
-  console.log('onMoved', data);
+function boatReservationEvents(
+  timestamp: Timestamp,
+  resource: Boat | undefined
+) {
+  if (!resource) return [];
+  return reservationStore.getReservationsByDate(
+    getDate(timestamp),
+    (resource as Boat).$id
+  );
 }
-function onChange(data: Event) {
-  console.log('onChange', data);
+function onToday() {
+  calendar.value.moveToToday();
 }
-function onClickDate(data: Event) {
-  console.log('onClickDate', data);
+function onPrev() {
+  calendar.value.prev();
 }
-function onClickTime(data: Event) {
-  console.log('onClickTime', data);
-}
-function onClickInterval(data: Event) {
-  console.log('onClickInterval', data);
-}
-function onClickHeadDay(data: Event) {
-  console.log('onClickHeadDay', data);
+function onNext() {
+  calendar.value.next();
 }
 </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/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="!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 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 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 { futureUserReservations, pastUserReservations } = 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="col-9 q-pa-md">
-      <div class="scheduler">
-        <NavigationBar @next="onNext" @today="onToday" @prev="onPrev" />
+    <div class="q-pa-md">
+      <div
+        class="scheduler"
+        style="max-width: 1200px">
+        <NavigationBar
+          @next="onNext"
+          @today="onToday"
+          @prev="onPrev" />
        <q-calendar-scheduler
          ref="calendar"
          v-model="selectedDate"
@@ -11,74 +16,143 @@
          resource-label="name"
          view="week"
          :weekdays="[1, 2, 3, 4, 5, 6, 0]"
-          hoverable
          animated
          bordered
          :drag-enter-func="onDragEnter"
          :drag-over-func="onDragOver"
          :drag-leave-func="onDragLeave"
          :drop-func="onDrop"
-          :day-min-height="50"
-          :day-height="0"
-        >
+          day-min-height="50px"
+          cell-width="150px">
          <template #day="{ scope }">
            <div
-              v-if="getTimeBlocks(scope.timestamp, scope.resource)"
+              v-if="filteredIntervals(scope.timestamp, scope.resource).length"
              style="
                display: flex;
-                flex: 1 0 auto;
                flex-wrap: wrap;
                justify-content: space-evenly;
                align-items: center;
                font-size: 12px;
-              "
-            >
+              ">
              <template
-                v-for="event in getTimeBlocks(scope.timestamp, scope.resource)"
-                :key="event.id"
-              >
-                <q-chip clickable square icon="schedule">
-                  {{ date.formatDate(event.start, 'HH:mm') }} -
-                  {{ date.formatDate(event.end, 'HH:mm') }}</q-chip
-                >
+                v-for="block in sortedIntervals(
+                  scope.timestamp,
+                  scope.resource
+                )"
+                :key="block.id">
+                <q-chip class="cursor-pointer">
+                  {{ date.formatDate(block.start, 'HH:mm') }} -
+                  {{ date.formatDate(block.end, 'HH:mm') }}
+                  <!-- <q-popup-edit
+                    :model-value="block"
+                    v-slot="scope"
+                    buttons
+                    @save="saveInterval"
+                  >
+                    TODO: Why isn't this saving?
+                    <q-input
+                      :model-value="date.formatDate(scope.value.start, 'HH:mm')"
+                      dense
+                      autofocus
+                      type="time"
+                      label="start"
+                      @keyup.enter="scope.set"
+                      @update:model-value="
+                        (t) => {
+                          block.start = new Date(
+                            scope.value.start.split('T')[0] + 'T' + t
+                          ).toISOString();
+                        }
+                      "
+                    />
+                    TODO: Clean this up
+                    <q-input
+                      :model-value="date.formatDate(scope.value.end, 'HH:mm')"
+                      dense
+                      type="time"
+                      label="end"
+                      @keyup.enter="scope.set"
+                      @update:model-value="
+                        (t) =>
+                          (block.end = new Date(
+                            scope.value.end.split('T')[0] + 'T' + t
+                          ).toISOString())
+                      "
+                    />
+                  </q-popup-edit>-->
+                </q-chip>
+                <q-btn
+                  size="xs"
+                  icon="delete"
+                  round
+                  @click="deleteBlock(block)" />
              </template>
            </div>
          </template>
        </q-calendar-scheduler>
      </div>
    </div>
-    <div class="col-3 q-pa-md">
-      <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="addTemplate" />
+          <q-btn
+            label="Add Template"
+            color="primary"
+            @click="createTemplate" />
        </q-card-actions>
+        <q-item v-if="newTemplate.$id === 'unsaved'">
+          <IntervalTemplateComponent
+            :model-value="newTemplate"
+            :edit="true"
+            @cancel="resetNewTemplate"
+            @saved="resetNewTemplate" />
+        </q-item>
        <q-separator spaced />
-        <q-expansion-item
-          v-for="template in timeblockTemplates"
+        <IntervalTemplateComponent
+          v-for="template in intervalTemplates"
          :key="template.$id"
-          dense
-          dense-toggle
-          expand-separator
-          :label="template.name"
-          style="font-size: 0.8em"
-          draggable="true"
-          @dragstart="onDragStart($event, template)"
-        >
-          <TimeBlockTemplateComponent
-            :model-value="template"
-          /> </q-expansion-item
-      ></q-list>
+          :model-value="template" />
+      </q-list>
    </div>
  </div>
+  <q-dialog v-model="alert">
+    <q-card>
+      <q-card-section>
+        <div class="text-h6">Warning!</div>
+      </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 }}:
+          {{ 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>
 </template>

 <script setup lang="ts">
@@ -88,48 +162,98 @@ import {
  today,
 } from '@quasar/quasar-ui-qcalendar';
 import { Boat, useBoatStore } from 'src/stores/boat';
-import { buildTimeBlock, useScheduleStore } from 'src/stores/schedule';
+import { useIntervalStore } from 'src/stores/interval';
 import { onMounted, ref } from 'vue';
-import type { TimeBlockTemplate, TimeTuple } from 'src/stores/schedule.types';
+import type {
+  Interval,
+  IntervalTemplate,
+  TimeTuple,
+} from 'src/stores/schedule.types';
 import { date } from 'quasar';
-import TimeBlockTemplateComponent from 'src/components/scheduling/TimeBlockTemplateComponent.vue';
+import IntervalTemplateComponent from 'src/components/scheduling/IntervalTemplateComponent.vue';
 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 { getTimeBlocks, fetchTimeBlocks, fetchTimeBlockTemplates } =
-  useScheduleStore();
+const intervalStore = useIntervalStore();
+const intervalTemplateStore = useIntervalTemplateStore();
 const { boats } = storeToRefs(useBoatStore());
-const { timeblockTemplates } = storeToRefs(useScheduleStore());
+const intervalTemplates = intervalTemplateStore.getIntervalTemplates();
 const calendar = ref();
+const overlapped = ref();
+const alert = ref(false);
+const newTemplate = ref<IntervalTemplate>({
+  $id: '',
+  name: 'NewTemplate',
+  timeTuples: [['09:00', '12:00']],
+});
+
+/* TODOS:
+ * Need more validation:
+   - Interval start < end
+   - Intervals don't overlap
+ * Need to handle case of overnight blocks.
+*/

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

-function addTemplate() {
-  timeblockTemplates.value.push({ name: 'New Template', timeTuples: [] });
-}
-function createTimeBlock(boat: Boat, templateId: string, date: string) {
-  const timeBlock = timeblockTemplates.value.find((t) => t.$id === templateId);
-  timeBlock?.timeTuples.map((tb: TimeTuple) =>
-    useScheduleStore().createTimeBlock(buildTimeBlock(boat, tb, date))
+const filteredIntervals = (date: Timestamp, boat: 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)
  );
+};
+
+function resetNewTemplate() {
+  newTemplate.value = {
+    $id: 'unsaved',
+    name: 'NewTemplate',
+    timeTuples: [['09:00', '12:00']],
+  };
+}
+function createTemplate() {
+  newTemplate.value.$id = 'unsaved';
+}
+function createIntervals(boat: Boat, templateId: string, date: string) {
+  const intervals = intervalsFromTemplate(boat, templateId, date);
+  intervals.forEach((interval) => intervalStore.createInterval(interval));
 }

-function onDragStart(e: DragEvent, template: TimeBlockTemplate) {
-  if (e.dataTransfer) {
-    console.log('Drag start: ', e);
-    e.dataTransfer.dropEffect = 'copy';
-    e.dataTransfer.effectAllowed = 'move';
-    e.dataTransfer.setData('ID', template.$id || '');
+function getIntervals(date: Timestamp, boat: Boat) {
+  return intervalStore.getIntervals(date, boat);
+}
+
+function intervalsFromTemplate(
+  boat: Boat,
+  templateId: string,
+  date: string
+): Interval[] {
+  const template = intervalTemplateStore
+    .getIntervalTemplates()
+    .value.find((t) => t.$id === templateId);
+  return template
+    ? template.timeTuples.map((timeTuple: TimeTuple) =>
+        buildInterval(boat, timeTuple, date)
+      )
+    : [];
+}
+
+function deleteBlock(block: Interval) {
+  if (block.$id) {
+    intervalStore.deleteInterval(block.$id);
  }
 }
+
 function onDragEnter(e: DragEvent, type: string) {
-  console.log('onDragEnter', e, type);
  if (type === 'day' || type === 'head-day') {
    e.preventDefault();
    if (e.target instanceof HTMLDivElement)
@@ -138,37 +262,47 @@ function onDragEnter(e: DragEvent, type: string) {
 }

 function onDragOver(e: DragEvent, type: string) {
-  console.log('onDragOver');
  if (type === 'day' || type === 'head-day') {
    e.preventDefault();
-    return true;
  }
 }

 function onDragLeave(e: DragEvent, type: string) {
-  console.log('onDragLeave');
  if (type === 'day' || type === 'head-day') {
    e.preventDefault();
    if (e.target instanceof HTMLDivElement)
      e.target.classList.remove('bg-secondary');
-    console.log(e.target);
-    return false;
  }
 }

 function onDrop(
+  //TODO: Move all overlap checking to the store.  This is too messy right now.
  e: DragEvent,
  type: string,
  scope: { resource: Boat; timestamp: Timestamp }
 ) {
-  console.log('onDrop', e, type, scope);
+  if (e.target instanceof HTMLDivElement)
+    e.target.classList.remove('bg-secondary');
+
  if ((type === 'day' || type === 'head-day') && e.dataTransfer) {
    const templateId = e.dataTransfer.getData('ID');
    const date = scope.timestamp.date;
-    if (type === 'head-day') {
-      boats.value.map((r) => createTimeBlock(r, templateId, date));
+    const resource = scope.resource;
+    const existingIntervals = getIntervals(scope.timestamp, resource);
+    const boatsToApply = type === 'head-day' ? boats.value : [resource];
+    overlapped.value = boatsToApply
+      .map((boat) =>
+        intervalsOverlapped(
+          existingIntervals.concat(
+            intervalsFromTemplate(boat, templateId, date)
+          )
+        )
+      )
+      .flat(1);
+    if (overlapped.value.length === 0) {
+      boatsToApply.map((b) => createIntervals(b, templateId, date));
    } else {
-      createTimeBlock(scope.resource, templateId, date);
+      alert.value = true;
    }
  }
  if (e.target instanceof HTMLDivElement)
--- 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,39 +1,25 @@
 <template>
  <q-page padding>
-    <q-item v-for="link in navlinks" :key="link.label">
+    <q-item
+      v-for="link in navlinks"
+      :key="link.name">
      <q-btn
        :icon="link.icon"
-        :color="link.color"
+        :color="link.color ? link.color : 'primary'"
        size="1.25em"
        :to="link.to"
-        :label="link.label"
+        :label="link.name"
        rounded
        class="full-width"
-        align="left"
-      />
+        align="left" />
    </q-item>
  </q-page>
 </template>

 <script setup lang="ts">
-const navlinks = [
-  {
-    icon: 'more_time',
-    to: '/schedule/book',
-    label: 'Create a Reservation',
-    color: 'primary',
-  },
-  {
-    icon: 'calendar_month',
-    to: '/schedule/view',
-    label: 'View Schedule',
-    color: 'primary',
-  },
-  {
-    icon: 'edit_calendar',
-    to: '/schedule/manage',
-    label: 'Manage Calendar',
-    color: 'accent',
-  },
-];
+import { enabledLinks } from 'src/router/navlinks';
+
+const navlinks = enabledLinks.find(
+  (link) => link.name === 'Schedule'
+)?.sublinks;
 </script>
--- 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/router/index.ts
+++ b/src/router/index.ts
@@ -9,6 +9,10 @@ import {
 import routes from './routes';
 import { useAuthStore } from 'src/stores/auth';

+const publicRoutes = routes
+  .filter((route) => route.meta?.publicRoute)
+  .map((r) => r.path);
+
 /*
 * If not building with SSR mode, you can
 * directly export the Router instantiation;
@@ -35,14 +39,33 @@ export default route(function (/* { store, ssrContext } */) {
    history: createHistory(process.env.VUE_ROUTER_BASE),
  });

-  Router.beforeEach((to) => {
-    const auth = useAuthStore();
+  Router.beforeEach(async (to, from, next) => {
+    const authStore = useAuthStore();
+    const currentUser = authStore.currentUser;
+    const authRequired = !publicRoutes.includes(to.path);
+    const requiredRoles = to.meta?.requiredRoles as string[];

-    if (auth.currentUser) {
-      return to.meta.accountRoute ? { name: 'index' } : true;
-    } else {
-      return to.name == 'login' ? true : { name: 'login' };
+    if (authRequired && !currentUser) {
+      return next('/login');
    }
+
+    if (requiredRoles) {
+      if (!currentUser) {
+        return next('/login');
+      }
+
+      try {
+        const hasRole = authStore.hasRequiredRole(requiredRoles);
+        if (!hasRole) {
+          return next(from);
+        }
+      } catch (error) {
+        console.error('Failed to fetch user teams:', error);
+        return next('/error'); // Redirect to an error page or handle it as needed
+      }
+    }
+
+    next();
  });

  return Router;
--- a/src/router/navlinks.ts
+++ b/src/router/navlinks.ts
@@ -1,50 +1,121 @@
-export const links = [
+import { useAuthStore } from 'src/stores/auth';
+
+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: '/',
    icon: 'home',
    front_links: false,
+    enabled: true,
  },
  {
    name: 'Profile',
    to: '/profile',
    icon: 'account_circle',
    front_links: false,
+    enabled: false,
  },
  {
    name: 'Boats',
    to: '/boat',
    icon: 'sailing',
    front_links: true,
+    enabled: true,
  },
  {
    name: 'Schedule',
    to: '/schedule',
    icon: 'calendar_month',
    front_links: true,
+    enabled: true,
+    sublinks: [
+      {
+        name: 'My View',
+        to: '/schedule/list',
+        icon: 'list',
+        front_links: false,
+        enabled: true,
+      },
+      {
+        name: 'Book',
+        to: '/schedule/book',
+        icon: 'more_time',
+        front_links: false,
+        enabled: true,
+      },
+      {
+        name: 'Calendar',
+        to: '/schedule/view',
+        icon: 'calendar_month',
+        front_links: false,
+        enabled: true,
+      },
+      {
+        name: 'Manage',
+        to: '/schedule/manage',
+        icon: 'edit_calendar',
+        front_links: false,
+        enabled: true,
+        color: 'accent',
+        requiredRoles: ['Schedule Admins'],
+      },
+    ],
  },
  {
    name: 'Certifications',
    to: '/certification',
    icon: 'verified',
    front_links: true,
+    enabled: false,
  },
  {
    name: 'Checklists',
    to: '/checklist',
    icon: 'checklist',
    front_links: true,
+    enabled: false,
  },
  {
    name: 'Reference',
    to: '/reference',
    icon: 'info_outline',
    front_links: true,
+    enabled: false,
  },
  {
    name: 'Tasks',
    to: '/task',
    icon: 'build',
    front_links: true,
+    enabled: false,
  },
 ];
+
+const authStore = useAuthStore();
+
+function hasRole(roles: string[] | undefined) {
+  if (roles === undefined) return true;
+  const hasRole = authStore.hasRequiredRole(roles);
+  return hasRole;
+}
+export const enabledLinks = links
+  .filter((link) => link.enabled)
+  .map((link) => {
+    if (link.sublinks) {
+      link.sublinks = link.sublinks.filter(
+        (sublink) => sublink.enabled && hasRole(sublink.requiredRoles)
+      );
+    }
+    return link;
+  });
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -40,11 +40,23 @@ const routes: RouteRecordRaw[] = [
            component: () => import('src/pages/schedule/BoatScheduleView.vue'),
            name: 'boat-schedule',
          },
+          {
+            path: 'list',
+            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',
            component: () => import('src/pages/schedule/ManageCalendar.vue'),
            name: 'manage-schedule',
-            meta: { requiresScheduleAdmin: true },
+            meta: { requiredRoles: ['Schedule Admins'] },
          },
        ],
      },
@@ -102,7 +114,7 @@ const routes: RouteRecordRaw[] = [
  {
    path: '/admin',
    component: () => import('layouts/AdminLayout.vue'),
-    meta: { requiresAdmin: true },
+    meta: { requiredRoles: ['admin'] },
    children: [
      {
        path: '/user',
@@ -124,6 +136,22 @@ const routes: RouteRecordRaw[] = [
      publicRoute: true,
    },
  },
+  {
+    path: '/pwreset',
+    component: () => import('pages/ResetPassword.vue'),
+    name: 'pwreset',
+    meta: {
+      publicRoute: true,
+    },
+  },
+  {
+    path: '/login',
+    component: () => import('pages/LoginPage.vue'),
+    name: 'login',
+    meta: {
+      publicRoute: true,
+    },
+  },
  {
    path: '/terms-of-service',
    component: () => import('pages/TermsOfServicePage.vue'),
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -1,27 +1,46 @@
 import { defineStore } from 'pinia';
-import { ID, account } from 'boot/appwrite';
-import { OAuthProvider, type Models } from 'appwrite';
-import { ref } from 'vue';
+import { ID, account, functions, teams } from 'boot/appwrite';
+import { ExecutionMethod, OAuthProvider, type Models } from 'appwrite';
+import { computed, ref } from 'vue';

 export const useAuthStore = defineStore('auth', () => {
  const currentUser = ref<Models.User<Models.Preferences> | null>(null);
+  const currentUserTeams = ref<Models.TeamList<Models.Preferences> | null>(
+    null
+  );
+  const userNames = ref<Record<string, string>>({});

  async function init() {
    try {
      currentUser.value = await account.get();
+      currentUserTeams.value = await teams.list();
    } catch {
      currentUser.value = null;
+      currentUserTeams.value = null;
    }
  }

+  const currentUserTeamNames = computed(() =>
+    currentUserTeams.value
+      ? currentUserTeams.value.teams.map((team) => team.name)
+      : []
+  );
+
+  const hasRequiredRole = (requiredRoles: string[]): boolean => {
+    return requiredRoles.some((role) =>
+      currentUserTeamNames.value.includes(role)
+    );
+  };
+
  async function register(email: string, password: string) {
    await account.create(ID.unique(), email, password);
    return await login(email, password);
  }
  async function login(email: string, password: string) {
    await account.createEmailPasswordSession(email, password);
-    currentUser.value = await account.get();
+    await init();
  }
+
  async function googleLogin() {
    account.createOAuth2Session(
      OAuthProvider.Google,
@@ -31,9 +50,45 @@ export const useAuthStore = defineStore('auth', () => {
    currentUser.value = await account.get();
  }

+  function getUserNameById(id: string | undefined | null): string {
+    if (!id) return 'No User';
+    try {
+      if (!userNames.value[id]) {
+        userNames.value[id] = 'Loading...';
+        functions
+          .createExecution(
+            'userinfo',
+            '',
+            false,
+            '/userinfo/' + id,
+            ExecutionMethod.GET
+          )
+          .then((res) => {
+            if (res.responseBody) {
+              userNames.value[id] = JSON.parse(res.responseBody).name;
+            } else {
+              console.error(res, id);
+            }
+          });
+      }
+    } catch (e) {
+      console.error('Failed to get username. Error: ' + e);
+    }
+    return userNames.value[id];
+  }
+
  function logout() {
    return account.deleteSession('current').then((currentUser.value = null));
  }

-  return { currentUser, register, login, googleLogin, logout, init };
+  return {
+    currentUser,
+    getUserNameById,
+    hasRequiredRole,
+    register,
+    login,
+    googleLogin,
+    logout,
+    init,
+  };
 });
--- a/src/stores/boat.ts
+++ b/src/stores/boat.ts
@@ -39,5 +39,10 @@ export const useBoatStore = defineStore('boat', () => {
    }
  }

-  return { boats, fetchBoats };
+  const getBoatById = (id: string | null | undefined): Boat | null => {
+    if (!id) return null;
+    return boats.value?.find((b) => b.$id === id) || null;
+  };
+
+  return { boats, fetchBoats, getBoatById };
 });
--- a/src/stores/interval.ts
+++ b/src/stores/interval.ts
@@ -0,0 +1,144 @@
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+import { Boat } from './boat';
+import { Timestamp, today } from '@quasar/quasar-ui-qcalendar';
+
+import { Interval, IntervalRecord } from './schedule.types';
+import { AppwriteIds, databases } from 'src/boot/appwrite';
+import { ID, Query } from 'appwrite';
+import { useReservationStore } from './reservation';
+
+export const useIntervalStore = defineStore('interval', () => {
+  // TODO: Implement functions to dynamically pull this data.
+  const intervals = ref<Map<string, Interval>>(new Map());
+  const intervalDates = ref<IntervalRecord>({});
+  const reservationStore = useReservationStore();
+  const selectedDate = ref<string>(today());
+
+  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.resource : true;
+        return isWithinDay && matchesBoat;
+      });
+    }).value;
+  };
+
+  const getAvailableIntervals = (
+    date: Timestamp | string,
+    boat?: Boat
+  ): Interval[] => {
+    return computed(() => {
+      return getIntervals(date, boat).filter((interval) => {
+        return !reservationStore.isResourceTimeOverlapped(
+          interval.resource,
+          new Date(interval.start),
+          new Date(interval.end)
+        );
+      });
+    }).value;
+  };
+
+  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)
+      );
+      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 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,
+  };
+});
--- 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/reservation.ts
+++ b/src/stores/reservation.ts
@@ -0,0 +1,291 @@
+import { defineStore } from 'pinia';
+import type { Reservation } from './schedule.types';
+import { computed, ref, watch } from 'vue';
+import { AppwriteIds, databases } from 'src/boot/appwrite';
+import { ID, Query } from 'appwrite';
+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';
+
+export const useReservationStore = defineStore('reservation', () => {
+  const reservations = ref<Map<string, Reservation>>(new Map());
+  const datesLoaded = ref<Record<string, LoadingTypes>>({});
+  const userReservations = ref<Map<string, Reservation>>(new Map());
+  // TODO: Come up with a better way of storing reservations by date & reservations for user
+  const authStore = useAuthStore();
+  const $q = useQuasar();
+
+  // Fetch reservations for a specific date range
+  const fetchReservationsForDateRange = async (
+    start: string = today(),
+    end: string = start
+  ) => {
+    const startDate = new Date(start < end ? start : end + 'T00:00');
+    const endDate = new Date(start < end ? end : start + 'T23:59');
+
+    if (getUnloadedDates(startDate, endDate).length === 0) return;
+
+    setDateLoaded(startDate, endDate, 'pending');
+
+    try {
+      const response = await databases.listDocuments(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.reservation,
+        [
+          Query.greaterThanEqual('end', startDate.toISOString()),
+          Query.lessThanEqual('start', endDate.toISOString()),
+        ]
+      );
+
+      response.documents.forEach((d) =>
+        reservations.value.set(d.$id, d as Reservation)
+      );
+      setDateLoaded(startDate, endDate, 'loaded');
+    } catch (error) {
+      console.error('Failed to fetch reservations', error);
+      setDateLoaded(startDate, endDate, 'error');
+    }
+  };
+  const getReservationById = async (id: string) => {
+    try {
+      const response = await databases.getDocument(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.reservation,
+        id
+      );
+      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.value.set(response.$id, response as Reservation);
+      userReservations.value.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;
+    }
+  };
+
+  const deleteReservation = async (
+    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 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.reservation,
+        id
+      );
+      reservations.value.delete(id);
+      userReservations.value.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',
+      });
+    }
+  };
+
+  // Set the loading state for dates
+  const setDateLoaded = (start: Date, end: Date, state: LoadingTypes) => {
+    if (start > end) return [];
+    let curDate = start;
+    while (curDate < end) {
+      datesLoaded.value[(parseDate(curDate) as Timestamp).date] = state;
+      curDate = date.addToDate(curDate, { days: 1 });
+    }
+  };
+
+  const getUnloadedDates = (start: Date, end: Date): string[] => {
+    if (start > end) return [];
+    let curDate = start;
+    const unloaded = [];
+    while (curDate < end) {
+      const parsedDate = (parseDate(curDate) as Timestamp).date;
+      if (datesLoaded.value[parsedDate] === undefined)
+        unloaded.push(parsedDate);
+      curDate = date.addToDate(curDate, { days: 1 });
+    }
+    return unloaded;
+  };
+
+  // Get reservations by date and optionally filter by boat
+  const getReservationsByDate = (
+    searchDate: string,
+    boat?: string
+  ): Reservation[] => {
+    if (!datesLoaded.value[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) => {
+        const reservationStart = new Date(reservation.start);
+        const reservationEnd = new Date(reservation.end);
+
+        const isWithinDay =
+          reservationStart < dayEnd && reservationEnd > dayStart;
+        const matchesBoat = boat ? boat === reservation.resource : true;
+        return isWithinDay && matchesBoat;
+      });
+    }).value;
+  };
+
+  // Get conflicting reservations for a resource within a time range
+  const getConflictingReservations = (
+    resource: string,
+    start: Date,
+    end: Date
+  ): Reservation[] => {
+    return Array.from(reservations.value.values()).filter(
+      (entry) =>
+        entry.resource === resource &&
+        new Date(entry.start) < end &&
+        new Date(entry.end) > start
+    );
+  };
+
+  // Check if a resource has time overlap
+  const isResourceTimeOverlapped = (
+    resource: string,
+    start: Date,
+    end: Date
+  ): boolean => {
+    return getConflictingReservations(resource, start, end).length > 0;
+  };
+
+  // Check if a reservation overlaps with existing reservations
+  const isReservationOverlapped = (res: Reservation): boolean => {
+    return isResourceTimeOverlapped(
+      res.resource,
+      new Date(res.start),
+      new Date(res.end)
+    );
+  };
+
+  const fetchUserReservations = async () => {
+    if (!authStore.currentUser) return;
+    try {
+      const response = await databases.listDocuments(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.reservation,
+        [Query.equal('user', authStore.currentUser.$id)]
+      );
+      response.documents.forEach((d) =>
+        userReservations.value.set(d.$id, d as Reservation)
+      );
+    } catch (error) {
+      console.error('Failed to fetch reservations for user: ', error);
+    }
+  };
+
+  const sortedUserReservations = computed((): Reservation[] =>
+    [...userReservations.value?.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));
+  });
+
+  // Ensure reactivity for computed properties when Map is modified
+  watch(
+    reservations,
+    () => {
+      sortedUserReservations.value;
+      futureUserReservations.value;
+      pastUserReservations.value;
+    },
+    { deep: true }
+  );
+
+  watch(
+    userReservations,
+    () => {
+      sortedUserReservations.value;
+      futureUserReservations.value;
+      pastUserReservations.value;
+    },
+    { deep: true }
+  );
+
+  return {
+    getReservationsByDate,
+    getReservationById,
+    createOrUpdateReservation,
+    deleteReservation,
+    fetchReservationsForDateRange,
+    isReservationOverlapped,
+    isResourceTimeOverlapped,
+    getConflictingReservations,
+    fetchUserReservations,
+    sortedUserReservations,
+    futureUserReservations,
+    pastUserReservations,
+    userReservations,
+  };
+});
--- a/src/stores/sampledata/schedule.ts
+++ b/src/stores/sampledata/schedule.ts
@@ -10,12 +10,12 @@ import {
 import type {
  StatusTypes,
  Reservation,
-  TimeBlockTemplate,
-  TimeBlock,
+  IntervalTemplate,
+  Interval,
  TimeTuple,
 } from '../schedule.types';

-export const templateA: TimeBlockTemplate = {
+export const templateA: IntervalTemplate = {
  id: '1',
  name: 'WeekdayBlocks',
  timeTuples: [
@@ -25,7 +25,7 @@ export const templateA: TimeBlockTemplate = {
  ],
 };

-export const templateB: TimeBlockTemplate = {
+export const templateB: IntervalTemplate = {
  id: '2',
  name: 'WeekendBlocks',
  timeTuples: [
@@ -36,21 +36,21 @@ export const templateB: TimeBlockTemplate = {
  ],
 };

-export function getSampleTimeBlocks(): TimeBlock[] {
+export function getSampleIntervals(): Interval[] {
  // Hard-code 30 days worth of blocks, for now.  Make them random templates
  const boats = useBoatStore().boats;
-  const result: TimeBlock[] = [];
+  const result: Interval[] = [];
  const tsToday: Timestamp = parseTimestamp(today()) as Timestamp;

  for (let i = 0; i <= 30; i++) {
    const template = templateB;
    result.push(
      ...boats
-        .map((b): TimeBlock[] => {
-          return template.blocks.map((t: TimeTuple): TimeBlock => {
+        .map((b): 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],
            };
@@ -69,47 +69,53 @@ export function getSampleReservations(): Reservation[] {
      user: 'John Smith',
      start: '7:00',
      end: '10:00',
-      boat: '1',
+      boat: '66359729003825946ae1',
      status: 'confirmed',
+      reason: 'Open Sail',
    },
    {
      id: '2',
      user: 'Bob Barker',
      start: '16:00',
      end: '19:00',
-      boat: '1',
+      boat: '66359729003825946ae1',
      status: 'confirmed',
+      reason: 'Open Sail',
    },
    {
      id: '3',
      user: 'Peter Parker',
      start: '7:00',
      end: '13:00',
-      boat: '4',
+      boat: '663597030029b71c7a9b',
      status: 'tentative',
+      reason: 'Open Sail',
    },
    {
      id: '4',
      user: 'Vince McMahon',
      start: '10:00',
      end: '13:00',
-      boat: '2',
+      boat: '663597030029b71c7a9b',
      status: 'pending',
+      reason: 'Open Sail',
    },
    {
      id: '5',
      user: 'Heather Graham',
      start: '13:00',
      end: '19:00',
-      boat: '4',
+      boat: '663596b9000235ffea55',
      status: 'confirmed',
+      reason: 'Private Sail',
    },
    {
      id: '6',
      user: 'Lawrence Fishburne',
      start: '13:00',
      end: '16:00',
-      boat: '3',
+      boat: '663596b9000235ffea55',
+      reason: 'Open Sail',
    },
  ];
  const boatStore = useBoatStore();
@@ -131,11 +137,15 @@ export function getSampleReservations(): Reservation[] {
    return {
      id: entry.id,
      user: entry.user,
-      start: date.adjustDate(now, makeOpts(splitTime(entry.start))),
-      end: date.adjustDate(now, makeOpts(splitTime(entry.end))),
-      resource: boat,
+      start: date
+        .adjustDate(now, makeOpts(splitTime(entry.start)))
+        .toISOString(),
+      end: date.adjustDate(now, makeOpts(splitTime(entry.end))).toISOString(),
+      resource: boat.$id,
      reservationDate: now,
+      reason: entry.reason,
      status: entry.status as StatusTypes,
+      comment: '',
    };
  });
 }
--- a/src/stores/schedule.ts
+++ b/src/stores/schedule.ts
@@ -1,285 +0,0 @@
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
-import { Boat } from './boat';
-import {
-  Timestamp,
-  parseDate,
-  parsed,
-  compareDate,
-} from '@quasar/quasar-ui-qcalendar';
-
-import {
-  Reservation,
-  TimeBlockTemplate,
-  TimeTuple,
-  TimeBlock,
-} from './schedule.types';
-import { AppwriteIds, databases } from 'src/boot/appwrite';
-import { ID, Models } from 'appwrite';
-
-export type Interval = {
-  start: string;
-  end: string;
-};
-
-export function arrayToTimeTuples(arr: string[]) {
-  const timeTuples: TimeTuple[] = [];
-  for (let i = 0; i < arr.length; i += 2) {
-    timeTuples.push([arr[i], arr[i + 1]]);
-  }
-  return timeTuples;
-}
-
-export function timeTuplesOverlapped(tuples: TimeTuple[]): Interval[] {
-  return blocksOverlapped(
-    tuples.map((tuples) => {
-      return {
-        start: '01/01/2001 ' + tuples[0],
-        end: '01/01/2001 ' + tuples[1],
-      };
-    })
-  ).map((t) => {
-    return { start: t.start.split(' ')[1], end: t.end.split(' ')[1] };
-  });
-}
-
-export function blocksOverlapped(blocks: TimeBlock[] | Interval[]): Interval[] {
-  return Array.from(
-    new Set(
-      blocks
-        .sort((a, b) => Date.parse(a.start) - Date.parse(b.start))
-        .reduce((acc: Interval[], block, i, arr) => {
-          if (i > 0 && block.start < arr[i - 1].end)
-            acc.push(arr[i - 1], block);
-          return acc;
-        }, [])
-    )
-  );
-}
-
-export function buildTimeBlock(
-  resource: Boat,
-  time: TimeTuple,
-  blockDate: string
-): TimeBlock {
-  /* 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,
-    start: new Date(blockDate + 'T' + time[0]).toISOString(),
-    end: new Date(blockDate + 'T' + time[1]).toISOString(),
-  };
-  return result;
-}
-
-export const useScheduleStore = defineStore('schedule', () => {
-  // TODO: Implement functions to dynamically pull this data.
-  const reservations = ref<Reservation[]>([]);
-  const timeblocks = ref<TimeBlock[]>([]);
-  const timeblockTemplates = ref<TimeBlockTemplate[]>([]);
-
-  const getTimeBlocks = (date: Timestamp, boat: Boat): TimeBlock[] => {
-    return timeblocks.value.filter((block) => {
-      return (
-        compareDate(parseDate(new Date(block.start)) as Timestamp, date) &&
-        block.boatId === boat.$id
-      );
-    });
-  };
-  const getTimeBlocksForDate = (date: string): TimeBlock[] => {
-    // TODO: This needs to actually make sure we have the dates we need, stay in sync, etc.
-    return timeblocks.value.filter((b) => {
-      return compareDate(
-        parseDate(new Date(b.start)) as Timestamp,
-        parsed(date) as Timestamp
-      );
-    });
-  };
-
-  const getBoatReservations = (
-    searchDate: Timestamp,
-    boat?: string
-  ): Reservation[] => {
-    return reservations.value.filter((x) => {
-      return (
-        ((parseDate(x.start)?.date == searchDate.date ||
-          parseDate(x.end)?.date == searchDate.date) && // Part of reservation falls on day
-          x.resource != undefined && // A boat is defined
-          !boat) ||
-        x.resource.$id == boat // A specific boat has been passed, and matches
-      );
-    });
-  };
-
-  async function fetchTimeBlocks() {
-    try {
-      const response = await databases.listDocuments(
-        AppwriteIds.databaseId,
-        AppwriteIds.collection.timeBlock
-      );
-      timeblocks.value = response.documents as TimeBlock[];
-    } catch (error) {
-      console.error('Failed to fetch timeblocks', error);
-    }
-  }
-
-  async function fetchTimeBlockTemplates() {
-    try {
-      const response = await databases.listDocuments(
-        AppwriteIds.databaseId,
-        AppwriteIds.collection.timeBlockTemplate
-      );
-      timeblockTemplates.value = response.documents.map(
-        (d: Models.Document): TimeBlockTemplate => {
-          return {
-            ...d,
-            timeTuples: arrayToTimeTuples(d.timeTuple),
-          } as TimeBlockTemplate;
-        }
-      );
-    } catch (error) {
-      console.error('Failed to fetch timeblock templates', error);
-    }
-  }
-  // const getConflicts = (timeblock: TimeBlock, boat: Boat) => {
-  //   const start = date.buildDate({
-  //     hour: timeblock.start.hour,
-  //     minute: timeblock.start.minute,
-  //     second: 0,
-  //     millisecond: 0,
-  //   });
-  //   const end = date.buildDate({
-  //     hour: timeblock.end.hour,
-  //     minute: timeblock.end.minute,
-  //     second: 0,
-  //     millisecond: 0,
-  //   });
-  //   return scheduleStore.getConflictingReservations(boat, start, end);
-  // };
-
-  const getConflictingReservations = (
-    resource: Boat,
-    start: Date,
-    end: Date
-  ): Reservation[] => {
-    const overlapped = reservations.value.filter(
-      (entry: Reservation) =>
-        entry.resource.$id == resource.$id &&
-        entry.start < end &&
-        entry.end > start
-    );
-    return overlapped;
-  };
-
-  const isResourceTimeOverlapped = (
-    resource: Boat,
-    start: Date,
-    end: Date
-  ): boolean => {
-    return getConflictingReservations(resource, start, end).length > 0;
-  };
-
-  const isReservationOverlapped = (res: Reservation): boolean => {
-    return isResourceTimeOverlapped(res.resource, res.start, res.end);
-  };
-
-  const getNewId = (): string => {
-    return [...Array(20)]
-      .map(() => Math.floor(Math.random() * 16).toString(16))
-      .join('');
-    // Trivial placeholder
-    //return Math.max(...reservations.value.map((item) => item.id)) + 1;
-  };
-
-  const addOrCreateReservation = (reservation: Reservation) => {
-    const index = reservations.value.findIndex(
-      (res) => res.id == reservation.id
-    );
-    index != -1
-      ? (reservations.value[index] = reservation)
-      : reservations.value.push(reservation);
-  };
-
-  const createTimeBlock = async (block: TimeBlock) => {
-    try {
-      const response = await databases.createDocument(
-        AppwriteIds.databaseId,
-        AppwriteIds.collection.timeBlock,
-        ID.unique(),
-        block
-      );
-      timeblocks.value.push(response as TimeBlock);
-    } catch (e) {
-      console.error('Error creating TimeBlock: ' + e);
-    }
-  };
-
-  const createTimeBlockTemplate = async (template: TimeBlockTemplate) => {
-    try {
-      const response = await databases.createDocument(
-        AppwriteIds.databaseId,
-        AppwriteIds.collection.timeBlockTemplate,
-        ID.unique(),
-        { name: template.name, timeTuple: template.timeTuples.flat(2) }
-      );
-      timeblockTemplates.value.push(response as TimeBlockTemplate);
-    } catch (e) {
-      console.error('Error updating TimeBlockTemplate: ' + e);
-    }
-  };
-  const deleteTimeBlockTemplate = async (id: string) => {
-    try {
-      await databases.deleteDocument(
-        AppwriteIds.databaseId,
-        AppwriteIds.collection.timeBlockTemplate,
-        id
-      );
-      timeblockTemplates.value = timeblockTemplates.value.filter(
-        (template) => template.$id !== id
-      );
-    } catch (e) {
-      console.error('Error deleting TimeBlockTemplate: ' + e);
-    }
-  };
-  const updateTimeBlockTemplate = async (
-    template: TimeBlockTemplate,
-    id: string
-  ) => {
-    try {
-      const response = await databases.updateDocument(
-        AppwriteIds.databaseId,
-        AppwriteIds.collection.timeBlockTemplate,
-        id,
-        {
-          name: template.name,
-          timeTuple: template.timeTuples.flat(2),
-        }
-      );
-      timeblockTemplates.value = timeblockTemplates.value.map((b) =>
-        b.$id !== id ? b : (response as TimeBlockTemplate)
-      );
-    } catch (e) {
-      console.error('Error updating TimeBlockTemplate: ' + e);
-    }
-  };
-
-  return {
-    reservations,
-    timeblocks,
-    timeblockTemplates,
-    getBoatReservations,
-    getConflictingReservations,
-    getTimeBlocksForDate,
-    getTimeBlocks,
-    fetchTimeBlocks,
-    fetchTimeBlockTemplates,
-    getNewId,
-    addOrCreateReservation,
-    createTimeBlock,
-    createTimeBlockTemplate,
-    deleteTimeBlockTemplate,
-    updateTimeBlockTemplate,
-    isReservationOverlapped,
-    isResourceTimeOverlapped,
-  };
-});
--- a/src/stores/schedule.types.ts
+++ b/src/stores/schedule.types.ts
@@ -1,16 +1,16 @@
 import { Models } from 'appwrite';
-import type { Boat } from './boat';
+import { LoadingTypes } from 'src/utils/misc';

 export type StatusTypes = 'tentative' | 'confirmed' | 'pending' | undefined;
-export interface Reservation {
-  id: string;
+export type Reservation = Interval & {
  user: string;
-  start: Date;
-  end: Date;
-  resource: Boat;
-  reservationDate: Date;
  status?: StatusTypes;
-}
+  reason: string;
+  comment: string;
+  members?: string[];
+  guests?: string[];
+};
+
 // 24 hrs in advance only 2 weekday, and 1 weekend slot
 // Within 24 hrs, any available slot
 /* TODO: Figure out how best to separate out where qcalendar bits should be.
@@ -18,14 +18,18 @@ export interface Reservation {
   objects in here? */

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

-export type TimeBlockTemplate = Partial<Models.Document> & {
+export type IntervalTemplate = Partial<Models.Document> & {
  name: string;
  timeTuples: TimeTuple[];
 };
+
+export interface IntervalRecord {
+  [key: string]: LoadingTypes;
+}
--- a/src/stores/task.ts
+++ b/src/stores/task.ts
@@ -151,7 +151,6 @@ export const useTaskStore = defineStore('tasks', {
      const result = state.tasks.filter((task) =>
        task.title.toLowerCase().includes(searchQuery.toLowerCase())
      );
-      console.log(result);
      return result;
    },
  },
--- a/src/utils/misc.ts
+++ b/src/utils/misc.ts
@@ -0,0 +1,9 @@
+export function getNewId(): string {
+  return [...Array(20)]
+    .map(() => Math.floor(Math.random() * 16).toString(16))
+    .join('');
+  // Trivial placeholder
+  //return Math.max(...reservations.value.map((item) => item.id)) + 1;
+}
+
+export type LoadingTypes = 'loaded' | 'pending' | 'error' | undefined;
--- a/src/utils/schedule.ts
+++ b/src/utils/schedule.ts
@@ -0,0 +1,90 @@
+import { date } from 'quasar';
+import { Boat } from 'src/stores/boat';
+import {
+  Interval,
+  IntervalTemplate,
+  TimeTuple,
+} from 'src/stores/schedule.types';
+
+export function arrayToTimeTuples(arr: string[]) {
+  const timeTuples: TimeTuple[] = [];
+  for (let i = 0; i < arr.length; i += 2) {
+    timeTuples.push([arr[i], arr[i + 1]]);
+  }
+  return timeTuples;
+}
+
+export function timeTuplesOverlapped(tuples: TimeTuple[]): Interval[] {
+  return intervalsOverlapped(
+    tuples.map((tuples) => {
+      return {
+        resource: '',
+        start: '01/01/2001 ' + tuples[0],
+        end: '01/01/2001 ' + tuples[1],
+      };
+    })
+  ).map((t) => {
+    return { ...t, start: t.start.split(' ')[1], end: t.end.split(' ')[1] };
+  });
+}
+
+export function intervalsOverlapped(
+  blocks: Interval[] | Interval[]
+): Interval[] {
+  return Array.from(
+    new Set(
+      blocks
+        .sort((a, b) => Date.parse(a.start) - Date.parse(b.start))
+        .reduce((acc: Interval[], block, i, arr) => {
+          if (i > 0 && block.start < arr[i - 1].end)
+            acc.push(arr[i - 1], block);
+          return acc;
+        }, [])
+    )
+  );
+}
+
+export function copyTimeTuples(tuples: TimeTuple[]): TimeTuple[] {
+  return tuples.map((t) => Object.assign([], t));
+}
+export function copyIntervalTemplate(
+  template: IntervalTemplate
+): IntervalTemplate {
+  return {
+    ...template,
+    timeTuples: copyTimeTuples(template.timeTuples || []),
+  };
+}
+
+export function buildInterval(
+  resource: Boat,
+  time: TimeTuple,
+  blockDate: string
+): Interval {
+  /* 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 = {
+    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/yarn.lock
+++ b/yarn.lock
@@ -1122,17 +1122,15 @@
  resolved "https://registry.yarnpkg.com/@quasar/extras/-/extras-1.16.11.tgz#84b1efb9097a6e58c3ebfdd5da83ac658056a35c"
  integrity sha512-sbTBHOA+Hi7ah0P6qSm+xfRXqwJ94ct3NKA3Lkq3iNPYuHD7VXbSWtP2eA7Cu9Fd0WjVoPbngf6yFGg46U3IfQ==

-"@quasar/quasar-app-extension-qcalendar@^4.0.0-beta.16":
-  version "4.0.0-beta.16"
-  resolved "https://registry.yarnpkg.com/@quasar/quasar-app-extension-qcalendar/-/quasar-app-extension-qcalendar-4.0.0-beta.16.tgz#5b0bdfb04db59cf6017892ff91563dd9759c7bb5"
-  integrity sha512-Rj3KKjPFrE13cswlZAPcqdqi1YH9CeHMpWIw8xsNqdLhCoaRhMGbRas9fvHFLJOXpnsDaVwWINNgN/bBUyn99w==
+"@quasar/quasar-app-extension-qcalendar@https://github.com/ptoal/quasar-ui-qcalendar/releases/download/v4.0.0-beta.19/app-extension.tgz":
+  version "4.0.0-beta.19"
+  resolved "https://github.com/ptoal/quasar-ui-qcalendar/releases/download/v4.0.0-beta.19/app-extension.tgz#cbda0579275d0af1b0d3e6536bedef845d511ec2"
  dependencies:
-    "@quasar/quasar-ui-qcalendar" "^4.0.0-beta.16"
+    "@quasar/quasar-ui-qcalendar" "^4.0.0-beta.19"

-"@quasar/quasar-ui-qcalendar@^4.0.0-beta.16":
-  version "4.0.0-beta.16"
-  resolved "https://registry.yarnpkg.com/@quasar/quasar-ui-qcalendar/-/quasar-ui-qcalendar-4.0.0-beta.16.tgz#90dca0962f1fe1068361f387893df6c5da7522e2"
-  integrity sha512-KVbFJD1HQp91tiklv+6XsG7bq8FKK6mhhnoVzmjgoyhUAEb9csfbDPbpegy1/FzXy3o0wITe6mmRZ8nbaiMEZg==
+"@quasar/quasar-ui-qcalendar@^4.0.0-beta.19", "@quasar/quasar-ui-qcalendar@https://github.com/ptoal/quasar-ui-qcalendar/releases/download/v4.0.0-beta.19/qcalendar-ui.tgz":
+  version "4.0.0-beta.19"
+  resolved "https://github.com/ptoal/quasar-ui-qcalendar/releases/download/v4.0.0-beta.19/qcalendar-ui.tgz#633c1bbceaa7d669cf27f851c2594b0e1bb36a97"

 "@quasar/render-ssr-error@^1.0.3":
  version "1.0.3"
@@ -1810,6 +1808,15 @@ available-typed-arrays@^1.0.7:
  dependencies:
    possible-typed-array-names "^1.0.0"

+axios@^1.6.8:
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.8.tgz#66d294951f5d988a00e87a0ffb955316a619ea66"
+  integrity sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 babel-plugin-polyfill-corejs2@^0.4.10:
  version "0.4.11"
  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz#30320dfe3ffe1a336c15afdcdafd6fd615b25e33"
@@ -2088,7 +2095,7 @@ color-name@~1.1.4:
  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==

-combined-stream@^1.0.6:
+combined-stream@^1.0.6, combined-stream@^1.0.8:
  version "1.0.8"
  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
@@ -3022,6 +3029,11 @@ file-entry-cache@^6.0.1:
  dependencies:
    flat-cache "^3.0.4"

+file@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/file/-/file-0.2.2.tgz#c3dfd8f8cf3535ae455c2b423c2e52635d76b4d3"
+  integrity sha512-gwabMtChzdnpDJdPEpz8Vr/PX0pU85KailuPV71Zw/un5yJVKvzukhB3qf6O3lnTwIe5CxlMYLh3jOK3w5xrLA==
+
 filelist@^1.0.4:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.4.tgz#f78978a1e944775ff9e62e744424f215e58352b5"
@@ -3076,6 +3088,11 @@ flatted@^3.2.9:
  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
  integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==

+follow-redirects@^1.15.6:
+  version "1.15.6"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
+  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
+
 for-each@^0.3.3:
  version "0.3.3"
  resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
@@ -3092,6 +3109,15 @@ form-data@^2.3.2:
    combined-stream "^1.0.6"
    mime-types "^2.1.12"

+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 forwarded@0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -4279,6 +4305,11 @@ proxy-addr@~2.0.7:
    forwarded "0.2.0"
    ipaddr.js "1.9.1"

+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 punycode@^2.1.0:
  version "2.3.1"
  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
@@ -5247,6 +5278,11 @@ vue-tsc@^1.8.22:
    "@vue/language-core" "1.8.27"
    semver "^7.5.4"

+vue3-google-login@^2.0.26:
+  version "2.0.26"
+  resolved "https://registry.yarnpkg.com/vue3-google-login/-/vue3-google-login-2.0.26.tgz#0e55dbb3c6cbb78872dee0de800624c749d07882"
+  integrity sha512-BuTSIeSjINNHNPs+BDF4COnjWvff27IfCBDxK6JPRqvm57lF8iK4B3+zcG8ud6BXfZdyuiDlxletbEDgg4/RFA==
+
 vue@3:
  version "3.4.25"
  resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.25.tgz#e59d4ed36389647b52ff2fd7aa84bb6691f4205b"
Author	SHA1	Message	Date
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
Patrick Toal	59d2729719	Fix bug Some checks failed Build BAB Application Deployment Artifact / build (push) Failing after 2m6s Details	2024-05-25 08:34:25 -04:00
Patrick Toal	9f398e5509	Add List View	2024-05-24 20:45:04 -04:00
Patrick Toal	2fb236cf97	Style edits	2024-05-24 08:36:28 -04:00
Patrick Toal	7bc0573455	Add minutes to booking duration	2024-05-24 08:24:46 -04:00
Patrick Toal	68a2b8ffff	Visual improvements	2024-05-24 08:11:47 -04:00
Patrick Toal	ce696a5a04	Small tweak to boat cards	2024-05-23 10:02:37 -04:00
Patrick Toal	b0d6ec877b	More auth / role checks for navlinks	2024-05-23 09:55:02 -04:00
Patrick Toal	c03ad48615	Team based role auth for routes	2024-05-23 09:32:22 -04:00
Patrick Toal	55bc1acbb3	Many esthetic changes	2024-05-22 17:18:02 -04:00
Patrick Toal	cd692a6f3b	Fix login bug. Improve reservations	2024-05-21 16:32:31 -04:00
Patrick Toal	737de91bbc	Update naming	2024-05-20 21:53:09 -04:00
Patrick Toal	a6e357f973	Disable click on disabled slots	2024-05-19 07:18:13 -04:00
Patrick Toal	76b0498a18	Booking All checks were successful Build BAB Application Deployment Artifact / build (push) Successful in 1m57s Details	2024-05-18 10:07:09 -04:00
Patrick Toal	d6339815aa	Navigation Tweaks	2024-05-18 08:49:56 -04:00
Patrick Toal	97481a5d2e	Disable not ready stuff All checks were successful Build BAB Application Deployment Artifact / build (push) Successful in 1m58s Details	2024-05-17 21:50:38 -04:00
Patrick Toal	369bbc4960	Remove conflicting blocks	2024-05-17 21:41:11 -04:00
Patrick Toal	c3ee739366	Small tweak to handle swapped dates	2024-05-17 20:56:18 -04:00
Patrick Toal	adc34a116b	Tracked down a date bug. Also tried to optimize, but not sure it's necessary. All checks were successful Build BAB Application Deployment Artifact / build (push) Successful in 2m2s Details	2024-05-17 20:41:26 -04:00
Patrick Toal	b506ab7ca9	Many changes to try to improve reliability	2024-05-17 18:17:25 -04:00
Patrick Toal	dd631b71bb	Refactor Reservations into new store All checks were successful Build BAB Application Deployment Artifact / build (push) Successful in 2m2s Details	2024-05-13 12:42:10 -04:00
Patrick Toal	b0921ccf32	refactor utils	2024-05-13 12:31:27 -04:00
Patrick Toal	78211a33ae	Added reservation and username lookup All checks were successful Build BAB Application Deployment Artifact / build (push) Successful in 2m13s Details	2024-05-13 10:49:03 -04:00
Patrick Toal	4a273ccb2f	Temporary fix for https://github.com/quasarframework/quasar-ui-qcalendar/issues/439 All checks were successful Build BAB Application Deployment Artifact / build (push) Successful in 1m57s Details	2024-05-11 09:11:17 -04:00
Patrick Toal	3a67f2fbb1	Rename TimeBlock to Interva. More Interval functionality. Some checks failed Build BAB Application Deployment Artifact / build (push) Failing after 1m40s Details	2024-05-10 09:50:04 -04:00
Patrick Toal	77619b0741	Edits to usability	2024-05-09 12:57:21 -04:00