From 8200bcde52a8f0ec412d2ee00b9df096173f1bfd Mon Sep 17 00:00:00 2001
From: Patrick Toal <ptoal@takeflight.ca>
Date: Fri, 24 Nov 2023 00:12:58 -0500
Subject: [PATCH] Basic calendar view

---
 package.json                                  |   1 +
 quasar.config.js                              |   2 +-
 quasar.extensions.json                        |   3 +
 src/components/BoatPreviewComponent.vue       |   8 +-
 src/components/BottomNavComponent.vue         |  26 +++
 src/components/LeftDrawer.vue                 |   2 +-
 src/components/ReferencePreviewComponent.vue  |   3 +-
 src/components/ToolbarComponent.vue           |   5 +-
 src/css/app.sass                              |   4 +
 src/css/app.scss                              |   1 -
 src/layouts/MainLayout.vue                    |   9 +-
 src/pages/BoatPage.vue                        |   4 +-
 src/pages/BookingPage.vue                     |   8 -
 src/pages/CertificationPage.vue               |   2 +
 src/pages/ChecklistPage.vue                   |  19 +-
 src/pages/IndexPage.vue                       |   2 +
 src/pages/ProfilePage.vue                     |   8 +-
 src/pages/TaskPage.vue                        |  20 ++-
 .../ReferenceIndexPage.vue}                   |   5 +-
 src/pages/reference/ReferenceItemPage.vue     |  12 ++
 src/pages/reference/ReferencePage.vue         |   8 +
 src/pages/schedule/BoatReservationPage.vue    | 165 ++++++++++++++++++
 src/pages/schedule/ScheduleIndexPage.vue      |   5 +
 src/pages/schedule/SchedulePageView.vue       |   8 +
 src/router/navlinks.ts                        |  16 +-
 src/router/routes.ts                          |  65 +++++--
 src/stores/boat.ts                            |   4 +-
 src/stores/memberProfile.ts                   |  33 ++++
 src/stores/schedule/schedule.ts               |   3 +-
 yarn.lock                                     |  12 ++
 30 files changed, 406 insertions(+), 57 deletions(-)
 create mode 100644 quasar.extensions.json
 create mode 100644 src/components/BottomNavComponent.vue
 create mode 100644 src/css/app.sass
 delete mode 100644 src/css/app.scss
 delete mode 100644 src/pages/BookingPage.vue
 rename src/pages/{ReferencePage.vue => reference/ReferenceIndexPage.vue} (71%)
 create mode 100644 src/pages/reference/ReferenceItemPage.vue
 create mode 100644 src/pages/reference/ReferencePage.vue
 create mode 100644 src/pages/schedule/BoatReservationPage.vue
 create mode 100644 src/pages/schedule/ScheduleIndexPage.vue
 create mode 100644 src/pages/schedule/SchedulePageView.vue
 create mode 100644 src/stores/memberProfile.ts

diff --git a/package.json b/package.json
index 6ec4356..a23e24c 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
   },
   "devDependencies": {
     "@quasar/app-vite": "^1.3.0",
+    "@quasar/quasar-app-extension-qcalendar": "^4.0.0-beta.15",
     "@types/node": "^12.20.21",
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",
diff --git a/quasar.config.js b/quasar.config.js
index d68af43..03742e9 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -30,7 +30,7 @@ module.exports = configure(function (/* ctx */) {
     boot: ['appwrite'],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
-    css: ['app.scss'],
+    css: ['app.sass'],
 
     // https://github.com/quasarframework/quasar/tree/dev/extras
     extras: [
diff --git a/quasar.extensions.json b/quasar.extensions.json
new file mode 100644
index 0000000..e239c30
--- /dev/null
+++ b/quasar.extensions.json
@@ -0,0 +1,3 @@
+{
+  "@quasar/qcalendar": {}
+}
\ No newline at end of file
diff --git a/src/components/BoatPreviewComponent.vue b/src/components/BoatPreviewComponent.vue
index c4c217f..3fba227 100644
--- a/src/components/BoatPreviewComponent.vue
+++ b/src/components/BoatPreviewComponent.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-card v-for="boat in boats" :key="boat.id" flat class="my-card">
+  <q-card v-for="boat in boats" :key="boat.id" flat class="mobile-card">
     <q-card-section>
       <q-img :src="boat.imgsrc" :fit="'scale-down'">
         <div class="row absolute-top">
@@ -27,9 +27,3 @@ defineProps({
   boats: Array<Boat>,
 });
 </script>
-
-<style lang="sass" scoped>
-.my-card
-  width: 100%
-  max-width: 400px
-</style>
diff --git a/src/components/BottomNavComponent.vue b/src/components/BottomNavComponent.vue
new file mode 100644
index 0000000..755b314
--- /dev/null
+++ b/src/components/BottomNavComponent.vue
@@ -0,0 +1,26 @@
+<template>
+  <q-tabs class="mobile-only">
+    <!-- <q-tab name="Home" icon="home" to="index"></q-tab> -->
+    <q-route-tab name="Boats" icon="sailing" to="/boat"></q-route-tab>
+    <q-route-tab
+      name="Schedule"
+      icon="calendar_month"
+      to="/schedule"
+    ></q-route-tab>
+    <q-route-tab
+      name="Checklists"
+      icon="checklist"
+      to="/checklist"
+    ></q-route-tab>
+    <q-route-tab
+      name="Reference"
+      icon="info_outline"
+      to="/reference"
+    ></q-route-tab>
+    <q-route-tab name="Tasks" icon="build" to="/task">
+      <q-badge color="red" floating> NEW </q-badge>
+    </q-route-tab>
+  </q-tabs>
+</template>
+
+<script setup lang="ts"></script>
diff --git a/src/components/LeftDrawer.vue b/src/components/LeftDrawer.vue
index 3104802..08669e7 100644
--- a/src/components/LeftDrawer.vue
+++ b/src/components/LeftDrawer.vue
@@ -3,7 +3,7 @@
     :model-value="drawer"
     show-if-above
     :width="200"
-    :breakpoint="500"
+    :breakpoint="1024"
     @update:model-value="$emit('drawer-toggle')"
   >
     <q-scroll-area class="fit">
diff --git a/src/components/ReferencePreviewComponent.vue b/src/components/ReferencePreviewComponent.vue
index f8c827a..bee11e4 100644
--- a/src/components/ReferencePreviewComponent.vue
+++ b/src/components/ReferencePreviewComponent.vue
@@ -3,7 +3,6 @@
     flat
     bordered
     class="my-card"
-    :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-2'"
     v-for="entry in entries"
     :key="entry.title"
   >
@@ -43,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { ReferenceEntry } from './models';
+import { ReferenceEntry } from 'src/stores/reference';
 
 defineProps({
   entries: Array<ReferenceEntry>,
diff --git a/src/components/ToolbarComponent.vue b/src/components/ToolbarComponent.vue
index 9574116..2c956fe 100644
--- a/src/components/ToolbarComponent.vue
+++ b/src/components/ToolbarComponent.vue
@@ -10,7 +10,7 @@
         @click="toggleLeftDrawer"
       />
 
-      <q-toolbar-title> OYS Borrow a Boat </q-toolbar-title>
+      <q-toolbar-title> {{ pageTitle }} </q-toolbar-title>
       <q-tabs shrink>
         <q-tab> </q-tab>
       </q-tabs>
@@ -27,4 +27,7 @@ const leftDrawerOpen = ref(false);
 function toggleLeftDrawer() {
   leftDrawerOpen.value = !leftDrawerOpen.value;
 }
+defineProps({
+  pageTitle: String,
+});
 </script>
diff --git a/src/css/app.sass b/src/css/app.sass
new file mode 100644
index 0000000..2774fa3
--- /dev/null
+++ b/src/css/app.sass
@@ -0,0 +1,4 @@
+// app global css in SASS form
+.mobile-card
+  width: 100%
+  max-width: 450px
diff --git a/src/css/app.scss b/src/css/app.scss
deleted file mode 100644
index ecac98f..0000000
--- a/src/css/app.scss
+++ /dev/null
@@ -1 +0,0 @@
-// app global css in SCSS form
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 51b6236..40bed5b 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,16 +1,17 @@
 <template>
-  <q-layout view="hHh Lpr lFf">
-    <ToolbarComponent />
-
+  <q-layout view="hHh Lpr fFf">
     <q-page-container>
       <router-view />
     </q-page-container>
+    <q-footer>
+      <BottomNavComponent />
+    </q-footer>
   </q-layout>
 </template>
 
 <script setup lang="ts">
 import { useQuasar } from 'quasar';
-import ToolbarComponent from 'components/ToolbarComponent.vue';
+import BottomNavComponent from 'src/components/BottomNavComponent.vue';
 
 const q = useQuasar();
 // q.fullscreen.request();
diff --git a/src/pages/BoatPage.vue b/src/pages/BoatPage.vue
index 7689ac2..13c4e38 100644
--- a/src/pages/BoatPage.vue
+++ b/src/pages/BoatPage.vue
@@ -1,5 +1,6 @@
 <template>
-  <q-page padding>
+  <toolbar-component pageTitle="Boats" />
+  <q-page>
     <boat-preview-component :boats="boats" />
   </q-page>
 </template>
@@ -8,6 +9,7 @@
 import BoatPreviewComponent from 'src/components/BoatPreviewComponent.vue';
 import { ref } from 'vue';
 import { useBoatStore } from 'src/stores/boat';
+import ToolbarComponent from 'src/components/ToolbarComponent.vue';
 
 const boats = ref(useBoatStore().boats);
 </script>
diff --git a/src/pages/BookingPage.vue b/src/pages/BookingPage.vue
deleted file mode 100644
index 1675e69..0000000
--- a/src/pages/BookingPage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <q-page padding>
-    <!-- content -->
-  </q-page>
-</template>
-
-<script setup lang="ts">
-</script>
diff --git a/src/pages/CertificationPage.vue b/src/pages/CertificationPage.vue
index d9d27cb..88860d4 100644
--- a/src/pages/CertificationPage.vue
+++ b/src/pages/CertificationPage.vue
@@ -1,4 +1,5 @@
 <template>
+  <toolbar-component pageTitle="Certification" />
   <q-page padding>
     <CertificationComponent />
   </q-page>
@@ -6,4 +7,5 @@
 
 <script setup lang="ts">
 import CertificationComponent from 'components/CertificationComponent.vue';
+import ToolbarComponent from 'src/components/ToolbarComponent.vue';
 </script>
diff --git a/src/pages/ChecklistPage.vue b/src/pages/ChecklistPage.vue
index 1675e69..d35150b 100644
--- a/src/pages/ChecklistPage.vue
+++ b/src/pages/ChecklistPage.vue
@@ -1,8 +1,25 @@
 <template>
+  <toolbar-component pageTitle="Checklists" />
   <q-page padding>
-    <!-- content -->
+    <q-card bordered separator style="max-width: 400px">
+      <q-card-section clickable v-ripple>
+        <div class="text-h6">Engine Starting</div>
+        <div class="text-subtitle2">
+          Proper procedures for starting an outboard engine.
+        </div>
+      </q-card-section>
+    </q-card>
+    <q-card bordered separator style="max-width: 400px">
+      <q-card-section clickable v-ripple>
+        <div class="text-h6">Pre-Sail Checklist J/27</div>
+        <div class="text-subtitle2">
+          Mandatory Safety and Equipment readiness check for J/27 class boats.
+        </div>
+      </q-card-section>
+    </q-card>
   </q-page>
 </template>
 
 <script setup lang="ts">
+import ToolbarComponent from 'src/components/ToolbarComponent.vue';
 </script>
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index 9f5a1fc..44b4bc9 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -1,4 +1,5 @@
 <template>
+  <ToolbarComponent />
   <q-page class="row justify-center">
     <q-img alt="OYS Logo" src="~assets/oysqn_logo.png" fit="scale-down" />
     <q-list class="full-width mobile-only">
@@ -25,6 +26,7 @@
 <script lang="ts" setup>
 import { links } from 'src/router/navlinks.js';
 import { useAuthStore } from 'stores/auth';
+import ToolbarComponent from 'components/ToolbarComponent.vue';
 
 const auth = useAuthStore();
 </script>
diff --git a/src/pages/ProfilePage.vue b/src/pages/ProfilePage.vue
index d5a027b..54425c8 100644
--- a/src/pages/ProfilePage.vue
+++ b/src/pages/ProfilePage.vue
@@ -1,9 +1,7 @@
 <template>
+  <toolbar-component pageTitle="Member Profile" />
   <q-page padding>
     <q-list bordered>
-      <q-toolbar class="bg-primary text-white shadow-3">
-        <q-toolbar-title> Member Profile </q-toolbar-title>
-      </q-toolbar>
       <q-separator />
       <q-item>
         <q-item-section avatar>
@@ -42,4 +40,6 @@
   </q-page>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import ToolbarComponent from 'src/components/ToolbarComponent.vue';
+</script>
diff --git a/src/pages/TaskPage.vue b/src/pages/TaskPage.vue
index 1675e69..a1ebe05 100644
--- a/src/pages/TaskPage.vue
+++ b/src/pages/TaskPage.vue
@@ -1,8 +1,26 @@
 <template>
+  <toolbar-component pageTitle="Tasks" />
   <q-page padding>
-    <!-- content -->
+    <q-card bordered separator class="mobile-card">
+      <q-card-section clickable v-ripple>
+        <div class="text-h6">Launch Prep</div>
+        <div class="text-subtitle2">Prepare for Launch</div>
+        <q-chip size="md" color="green" text-color="white" icon="alarm">
+          APR 1,2024
+        </q-chip>
+        <q-chip size="md" icon="build"> 24 tasks </q-chip>
+      </q-card-section>
+    </q-card>
+    <q-card bordered separator class="mobile-card">
+      <q-card-section clickable v-ripple>
+        <div class="text-h6">General Maintenance</div>
+        <div class="text-subtitle2">Day to day maintenance and upkeep</div>
+        <q-chip size="md" icon="build"> 4 tasks </q-chip>
+      </q-card-section>
+    </q-card>
   </q-page>
 </template>
 
 <script setup lang="ts">
+import ToolbarComponent from 'src/components/ToolbarComponent.vue';
 </script>
diff --git a/src/pages/ReferencePage.vue b/src/pages/reference/ReferenceIndexPage.vue
similarity index 71%
rename from src/pages/ReferencePage.vue
rename to src/pages/reference/ReferenceIndexPage.vue
index 029080a..99c65f6 100644
--- a/src/pages/ReferencePage.vue
+++ b/src/pages/reference/ReferenceIndexPage.vue
@@ -1,11 +1,12 @@
 <template>
-  <q-page padding> <ReferencePreviewComponent :entries="items" /> </q-page>
+  <q-page padding>
+    <q-page padding> <ReferencePreviewComponent :entries="items" /> </q-page>
+  </q-page>
 </template>
 
 <script setup lang="ts">
 import ReferencePreviewComponent from 'src/components/ReferencePreviewComponent.vue';
 import { ref } from 'vue';
 import { useReferenceStore } from 'src/stores/reference';
-
 const items = ref(useReferenceStore().allItems);
 </script>
diff --git a/src/pages/reference/ReferenceItemPage.vue b/src/pages/reference/ReferenceItemPage.vue
new file mode 100644
index 0000000..0871420
--- /dev/null
+++ b/src/pages/reference/ReferenceItemPage.vue
@@ -0,0 +1,12 @@
+<template>
+  <q-page padding>
+    <div class="text-h4">Engine Starting</div>
+    <q-video
+      title="Engine Starting"
+      :ratio="16 / 9"
+      src="https://www.youtube.com/embed/GMHMLDlkKcE"
+    ></q-video>
+  </q-page>
+</template>
+
+<script setup lang="ts"></script>
diff --git a/src/pages/reference/ReferencePage.vue b/src/pages/reference/ReferencePage.vue
new file mode 100644
index 0000000..35c8755
--- /dev/null
+++ b/src/pages/reference/ReferencePage.vue
@@ -0,0 +1,8 @@
+<template>
+  <toolbar-component pageTitle="Reference" />
+  <router-view />
+</template>
+
+<script setup lang="ts">
+import ToolbarComponent from 'src/components/ToolbarComponent.vue';
+</script>
diff --git a/src/pages/schedule/BoatReservationPage.vue b/src/pages/schedule/BoatReservationPage.vue
new file mode 100644
index 0000000..8ba731d
--- /dev/null
+++ b/src/pages/schedule/BoatReservationPage.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="row justify-center">
+    <q-btn-group rounded>
+      <q-btn
+        color="primary"
+        rounded
+        icon="keyboard_arrow_left"
+        label="Prev"
+        @click="onPrev"
+      />
+      <q-btn
+        color="primary"
+        rounded
+        icon="today"
+        label="Today"
+        @click="onToday"
+      />
+      <q-btn
+        color="primary"
+        rounded
+        icon-right="keyboard_arrow_right"
+        label="Next"
+        @click="onNext"
+      />
+    </q-btn-group>
+  </div>
+  <div class="row justify-center">
+    <div style="display: flex; max-width: 1024px; width: 100%">
+      <q-calendar-resource
+        ref="calendar"
+        v-model="selectedDate"
+        :model-resources="resources"
+        resource-key="id"
+        resource-label="name"
+        :interval-start="6"
+        :interval-count="12"
+        animated
+        bordered
+        @change="onChange"
+        @moved="onMoved"
+        @resource-expanded="onResourceExpanded"
+        @click-date="onClickDate"
+        @click-time="onClickTime"
+        @click-resource="onClickResource"
+        @click-head-resources="onClickHeadResources"
+        @click-interval="onClickInterval"
+      >
+        <template #resource-intervals="{ scope }">
+          <template v-for="(event, index) in getEvents(scope)" :key="index">
+            <q-badge
+              outline
+              color="primary"
+              :label="event.title"
+              :style="getStyle(event)"
+            />
+          </template>
+        </template>
+      </q-calendar-resource>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { QCalendarResource, today } from '@quasar/quasar-ui-qcalendar';
+
+const selectedDate = ref(today());
+type Resource = {
+  id: string;
+  name: string;
+  expanded?: boolean;
+  children?: Resource[];
+};
+
+type Event = {
+  start: string;
+  title: string;
+  duration: number;
+  left?: number;
+  width?: number;
+};
+
+type ResourceIntervalScope = {
+  resource: Resource;
+  intervals: [];
+  timeStartPosX(start: string): number;
+  timeDurationWidth(duration: number): number;
+};
+
+const calendar = ref(null);
+const resources = reactive<Resource[]>([
+  { id: '1', name: 'ProjectX' },
+  { id: '2', name: 'Take 5' },
+  { id: '3', name: 'WeeBeestie' },
+]);
+
+const events = reactive<{ [key: string]: Event[] }>({
+  1: [
+    { start: '06:00', title: 'John Smith', duration: 90 },
+    { start: '12:00', title: 'Bob Barker', duration: 60 },
+  ],
+  2: [
+    { start: '08:00', title: 'Peter Parker', duration: 120 },
+    { start: '11:00', title: 'Vince McMahon', duration: 240 },
+  ],
+  3: [
+    { start: '08:00', title: 'Heather Graham', duration: 240 },
+    { start: '14:00', title: 'Lawrence Fishburne', duration: 60 },
+  ],
+});
+
+function getEvents(scope: ResourceIntervalScope) {
+  const resourceEvents = events[scope.resource.id];
+  return resourceEvents.map((event) => ({
+    left: scope.timeStartPosX(event.start),
+    width: scope.timeDurationWidth(event.duration),
+    title: event.title,
+  }));
+}
+
+function getStyle(event: { left: number; width: number; title: string }) {
+  return {
+    position: 'absolute',
+    background: 'white',
+    left: `${event.left}px`,
+    width: `${event.width}px`,
+    height: '40px',
+    overflow: 'hidden',
+  };
+}
+
+function onToday() {
+  calendar.value.moveToToday();
+}
+function onPrev() {
+  calendar.value.prev();
+}
+function onNext() {
+  calendar.value.next();
+}
+function onMoved(data) {
+  console.log('onMoved', data);
+}
+function onChange(data) {
+  console.log('onChange', data);
+}
+function onResourceExpanded(data) {
+  console.log('onResourceExpanded', data);
+}
+function onClickDate(data) {
+  console.log('onClickDate', data);
+}
+function onClickTime(data) {
+  console.log('onClickTime', data);
+}
+function onClickResource(data) {
+  console.log('onClickResource', data);
+}
+function onClickHeadResources(data) {
+  console.log('onClickHeadResources', data);
+}
+function onClickInterval(data) {
+  console.log('onClickInterval', data);
+}
+</script>
diff --git a/src/pages/schedule/ScheduleIndexPage.vue b/src/pages/schedule/ScheduleIndexPage.vue
new file mode 100644
index 0000000..0d82cca
--- /dev/null
+++ b/src/pages/schedule/ScheduleIndexPage.vue
@@ -0,0 +1,5 @@
+<template>
+  <q-page padding> </q-page>
+</template>
+
+<script setup lang="ts"></script>
diff --git a/src/pages/schedule/SchedulePageView.vue b/src/pages/schedule/SchedulePageView.vue
new file mode 100644
index 0000000..168fe4f
--- /dev/null
+++ b/src/pages/schedule/SchedulePageView.vue
@@ -0,0 +1,8 @@
+<template>
+  <toolbar-component pageTitle="Schedule" />
+  <router-view />
+</template>
+
+<script setup lang="ts">
+import ToolbarComponent from 'src/components/ToolbarComponent.vue';
+</script>
diff --git a/src/router/navlinks.ts b/src/router/navlinks.ts
index 237b3c4..bf6abd4 100644
--- a/src/router/navlinks.ts
+++ b/src/router/navlinks.ts
@@ -7,43 +7,43 @@ export const links = [
   },
   {
     name: 'Profile',
-    to: 'profile',
+    to: '/profile',
     icon: 'account_circle',
     front_links: false,
   },
   {
     name: 'Boats',
-    to: 'boat',
+    to: '/boat',
     icon: 'sailing',
     front_links: true,
   },
   {
-    name: 'Booking',
-    to: 'booking',
+    name: 'Schedule',
+    to: '/schedule',
     icon: 'calendar_month',
     front_links: true,
   },
   {
     name: 'Certifications',
-    to: 'certification',
+    to: '/certification',
     icon: 'verified',
     front_links: true,
   },
   {
     name: 'Checklists',
-    to: 'checklist',
+    to: '/checklist',
     icon: 'checklist',
     front_links: true,
   },
   {
     name: 'Reference',
-    to: 'reference',
+    to: '/reference',
     icon: 'info_outline',
     front_links: true,
   },
   {
     name: 'Tasks',
-    to: 'task',
+    to: '/task',
     icon: 'build',
     front_links: true,
   },
diff --git a/src/router/routes.ts b/src/router/routes.ts
index e5ea754..ac73c46 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -1,49 +1,90 @@
+import ScheduleIndexPage from 'pages/schedule/ScheduleIndexPage.vue';
+import ChecklistPageVue from 'pages/ChecklistPage.vue';
+import LoginPageVue from 'pages/LoginPage.vue';
+import ReferencePageVue from 'src/pages/reference/ReferencePage.vue';
+import ReferenceIndexPageVue from 'src/pages/reference/ReferenceIndexPage.vue';
+import ReferenceItemPageVue from 'src/pages/reference/ReferenceItemPage.vue';
+import MainLayoutVue from 'src/layouts/MainLayout.vue';
+import BoatPageVue from 'src/pages/BoatPage.vue';
+import CertificationPageVue from 'src/pages/CertificationPage.vue';
+import IndexPageVue from 'src/pages/IndexPage.vue';
+import ProfilePageVue from 'src/pages/ProfilePage.vue';
+import TaskPageVue from 'src/pages/TaskPage.vue';
 import { RouteRecordRaw } from 'vue-router';
+import BoatReservationPageVue from 'src/pages/schedule/BoatReservationPage.vue';
+import SchedulePageView from 'pages/schedule/SchedulePageView.vue';
 
 const routes: RouteRecordRaw[] = [
   {
     path: '/',
-    component: () => import('layouts/MainLayout.vue'),
+    component: MainLayoutVue,
+    // If we get so big we need lazy loading, we can use imports again
+    // component: () => import('layouts/MainLayout.vue'),
     children: [
       {
         path: '',
-        component: () => import('pages/IndexPage.vue'),
+        // If we get so big we need lazy loading, we can use imports again
+        // component: () => import('pages/IndexPage.vue'),
+        component: IndexPageVue,
         name: 'index',
       },
       {
         path: '/boat',
-        component: () => import('pages/BoatPage.vue'),
+        component: BoatPageVue,
         name: 'boat',
       },
       {
-        path: '/booking',
-        component: () => import('pages/BookingPage.vue'),
-        name: 'booking',
+        path: '/schedule',
+        component: SchedulePageView,
+        name: 'schedule',
+        children: [
+          {
+            path: '',
+            component: ScheduleIndexPage,
+            name: 'schedule-index',
+          },
+          {
+            path: 'book',
+            component: BoatReservationPageVue,
+            name: 'reserve-boat',
+          },
+        ],
       },
       {
         path: '/certification',
-        component: () => import('pages/CertificationPage.vue'),
+        component: CertificationPageVue,
         name: 'certification',
       },
       {
         path: '/task',
-        component: () => import('pages/TaskPage.vue'),
+        component: TaskPageVue,
         name: 'task',
       },
       {
         path: '/checklist',
-        component: () => import('pages/ChecklistPage.vue'),
+        component: ChecklistPageVue,
         name: 'checklist',
       },
       {
         path: '/profile',
-        component: () => import('pages/ProfilePage.vue'),
+        component: ProfilePageVue,
         name: 'profile',
       },
       {
         path: '/reference',
-        component: () => import('pages/ReferencePage.vue'),
+        component: ReferencePageVue,
         name: 'reference',
+        children: [
+          {
+            path: '',
+            component: ReferenceIndexPageVue,
+            name: 'reference-index',
+          },
+          {
+            path: '/reference/:id/view',
+            component: ReferenceItemPageVue,
+          },
+        ],
       },
     ],
   },
@@ -65,7 +106,7 @@ const routes: RouteRecordRaw[] = [
   },
   {
     path: '/login',
-    component: () => import('pages/LoginPage.vue'),
+    component: LoginPageVue,
     name: 'login',
     meta: {
       publicRoute: true,
diff --git a/src/stores/boat.ts b/src/stores/boat.ts
index f189454..ce6404f 100644
--- a/src/stores/boat.ts
+++ b/src/stores/boat.ts
@@ -8,13 +8,13 @@ export interface Boat {
   class: string;
   year: number;
   imgsrc: string;
-  booking: {
+  booking?: {
     available: boolean;
     requiredCerts: string[];
     maxDuration: number;
     maxPassengers: number;
   };
-  defects: {
+  defects?: {
     type: string;
     severity: string;
     description: string;
diff --git a/src/stores/memberProfile.ts b/src/stores/memberProfile.ts
new file mode 100644
index 0000000..bd733ad
--- /dev/null
+++ b/src/stores/memberProfile.ts
@@ -0,0 +1,33 @@
+import { defineStore } from 'pinia';
+
+export interface MemberProfile {
+  firstName: string;
+  lastName: string;
+  certs: string[];
+  slackID: string;
+  userID: string;
+}
+
+const getSampleData = () => ({
+  firstName: 'Billy',
+  lastName: 'Crystal',
+  certs: ['j27', 'capri25'],
+});
+
+export const useMemberProfileStore = defineStore('memberProfile', {
+  state: () => ({
+    ...getSampleData(),
+  }),
+
+  // getters: {
+  //   doubleCount (state) {
+  //     return state.counter * 2;
+  //   }
+  // },
+
+  // actions: {
+  //   increment () {
+  //     this.counter++;
+  //   }
+  // }
+});
diff --git a/src/stores/schedule/schedule.ts b/src/stores/schedule/schedule.ts
index 7a1dc94..d0140bd 100644
--- a/src/stores/schedule/schedule.ts
+++ b/src/stores/schedule/schedule.ts
@@ -1,9 +1,10 @@
+import { defineStore } from 'pinia';
 export interface Reservation {
   user: string;
   startdate: Date;
   enddate: Date;
   resource: string;
-  bookingdate: Date;
+  reservationDate: Date;
 }
 
 export const useScheduleStore = defineStore('schedule', {
diff --git a/yarn.lock b/yarn.lock
index 9e0cadb..95cd136 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1110,6 +1110,18 @@
   resolved "https://registry.yarnpkg.com/@quasar/extras/-/extras-1.16.7.tgz#9416689f2e55f594f1135383c35b9ab03875c522"
   integrity sha512-nYF3gVE/si1YJ/D4qmAiHGwxoJIDCvTT8NI6ZmbTMPrur4J8xBKhfhfhyLoQ4k2jJZP6Rx0rUcB71FBNC2C8vQ==
 
+"@quasar/quasar-app-extension-qcalendar@^4.0.0-beta.15":
+  version "4.0.0-beta.15"
+  resolved "https://registry.yarnpkg.com/@quasar/quasar-app-extension-qcalendar/-/quasar-app-extension-qcalendar-4.0.0-beta.15.tgz#1e85626a104c3a33083b7237f50ccf5f9048926a"
+  integrity sha512-i6hQkcP70LXLfVMPZMKQjSg3681gjZmASV3vq6ULzc0LhtBiPneLdVNNtH2itkWxAmaUj+1heQDI5Pa0F7VKLQ==
+  dependencies:
+    "@quasar/quasar-ui-qcalendar" "^4.0.0-beta.15"
+
+"@quasar/quasar-ui-qcalendar@^4.0.0-beta.15":
+  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/render-ssr-error@^1.0.1":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@quasar/render-ssr-error/-/render-ssr-error-1.0.2.tgz#92abb0d61cfdfbf51c2ec3cc2e4aadbf1c79f04f"