fix(ui): hidden components on hard reload

fix: claude fixes to various errors

.claude/commands/handoff.md

@@ -0,0 +1,8 @@
+Write a session handoff file for the current session.
+
+Steps:
+1. Read `templates/claude-templates.md` and find the Session Handoff template (Template 4). Use the Light Handoff if this is a small project (under 5 sessions), Full Handoff otherwise.
+2. Fill in every field based on what was accomplished in this session. Be specific — include exact file paths for every output, exact numbers discovered, and conditional logic established.
+3. Write the handoff to `./docs/summaries/handoff-[today's date]-[topic].md`.
+4. If a previous handoff file exists in `./docs/summaries/`, move it to `./docs/archive/handoffs/`.
+5. Tell me the file path of the new handoff and summarize what it contains.

.claude/commands/process-doc.md

@@ -0,0 +1,13 @@
+Process an input document into a structured source summary.
+
+Steps:
+1. Read `templates/claude-templates.md` and find the Source Document Summary template (Template 1). Use the Light Source Summary if this is a small project (under 5 sessions), Full Source Summary otherwise.
+2. Read the document at: $ARGUMENTS
+3. Extract all information into the template format. Pay special attention to:
+   - EXACT numbers — do not round or paraphrase
+   - Requirements in IF/THEN/BUT/EXCEPT format
+   - Decisions with rationale and rejected alternatives
+   - Open questions marked as OPEN, ASSUMED, or MISSING
+4. Write the summary to `./docs/summaries/source-[filename].md`.
+5. Move the original document to `./docs/archive/`.
+6. Tell me: what was extracted, what's unclear, and what needs follow-up.

.claude/commands/status.md

@@ -0,0 +1,13 @@
+Report on the current project state.
+
+Steps:
+1. Read `./docs/summaries/00-project-brief.md` for project context.
+2. Find and read the latest `handoff-*.md` file in `./docs/summaries/` for current state.
+3. List all files in `./docs/summaries/` to understand what's been processed.
+4. Report:
+   - **Project:** name and type from the project brief
+   - **Current phase:** based on the project phase tracker
+   - **Last session:** what was accomplished (from the latest handoff)
+   - **Next steps:** what the next session should do (from the latest handoff)
+   - **Open questions:** anything unresolved
+   - **Summary file count:** how many files in docs/summaries/ (warn if approaching 15)

.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

.eslintignore

@@ -1,8 +0,0 @@
-/dist
-/src-capacitor
-/src-cordova
-/.quasar
-/node_modules
-.eslintrc.js
-/src-ssr
-/quasar.config.*.temporary.compiled*

.eslintrc.cjs

@@ -1,90 +0,0 @@
-module.exports = {
-  // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
-  // This option interrupts the configuration hierarchy at this file
-  // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
-  root: true,
-
-  // https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
-  // Must use parserOptions instead of "parser" to allow vue-eslint-parser to keep working
-  // `parser: 'vue-eslint-parser'` is already included with any 'plugin:vue/**' config and should be omitted
-  parserOptions: {
-    parser: require.resolve('@typescript-eslint/parser'),
-    extraFileExtensions: [ '.vue' ]
-  },
-
-  env: {
-    browser: true,
-    es2021: true,
-    node: true,
-    'vue/setup-compiler-macros': true
-  },
-
-  // Rules order is important, please avoid shuffling them
-  extends: [
-    // Base ESLint recommended rules
-    // 'eslint:recommended',
-
-    // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#usage
-    // ESLint typescript rules
-    'plugin:@typescript-eslint/recommended',
-
-    // Uncomment any of the lines below to choose desired strictness,
-    // but leave only one uncommented!
-    // See https://eslint.vuejs.org/rules/#available-rules
-    'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
-    // 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
-    // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
-
-    // https://github.com/prettier/eslint-config-prettier#installation
-    // usage with Prettier, provided by 'eslint-config-prettier'.
-    'prettier'
-  ],
-
-  plugins: [
-    // required to apply rules which need type information
-    '@typescript-eslint',
-
-    // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
-    // required to lint *.vue files
-    'vue'
-    
-    // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
-    // Prettier has not been included as plugin to avoid performance impact
-    // add it as an extension for your IDE
-    
-  ],
-
-  globals: {
-    ga: 'readonly', // Google Analytics
-    cordova: 'readonly',
-    __statics: 'readonly',
-    __QUASAR_SSR__: 'readonly',
-    __QUASAR_SSR_SERVER__: 'readonly',
-    __QUASAR_SSR_CLIENT__: 'readonly',
-    __QUASAR_SSR_PWA__: 'readonly',
-    process: 'readonly',
-    Capacitor: 'readonly',
-    chrome: 'readonly'
-  },
-
-  // add your custom rules here
-  rules: {
-    
-    'prefer-promise-reject-errors': 'off',
-
-    quotes: ['warn', 'single', { avoidEscape: true }],
-
-    // this rule, if on, would require explicit return type on the `render` function
-    '@typescript-eslint/explicit-function-return-type': 'off',
-
-    // in plain CommonJS modules, you can't use `import foo = require('foo')` to pass this rule, so it has to be disabled
-    '@typescript-eslint/no-var-requires': 'off',
-
-    // The core 'no-unused-vars' rules (in the eslint:recommended ruleset)
-    // does not work with type definitions
-    'no-unused-vars': 'off',
-
-    // allow debugger during development only
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  }
-}

.gitea/workflows/build.yaml

@@ -0,0 +1,50 @@
+name: Build BAB Application Deployment Artifact
+run-name: ${{ gitea.actor }} is building a BAB App artifact 🚀
+on:
+  push:
+    branches:
+      - main
+      - alpha
+      - devel
+
+jobs:
+  build:
+    env:
+      RUNNER_TOOL_CACHE: /toolcache
+    runs-on: ubuntu-18.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: "20.x"
+      - name: Install yarn
+        run: npm install --global yarn
+      - name: Install yarn dependencies
+        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
+      - name: Show env file
+        run: |
+          /bin/cat .env.local
+      - name: Build and Release
+        id: build
+        run: |
+          npx semantic-release
+        env:
+          GITEA_TOKEN: ${{ secrets.GT_TOKEN }}
+          GITEA_URL: ${{ vars.GT_URL }}
+      - name: Trigger Ansible Deploy Playbook
+        uses: https://github.com/distributhor/workflow-webhook@v3
+        with:
+          webhook_url: ${{ vars.WEBHOOK_URL }}
+          webhook_auth_type: "bearer"
+          webhook_auth: "Token:${{ secrets.WEBHOOK_SECRET }}"
+          verbose: true
+          data: '{ "artifact_url": "${{ gitea.server_url }}/${{ gitea.repository }}/releases/download/v${{ steps.build.outputs.VERSION }}/release-${{ steps.build.outputs.VERSION }}.tar.gz" }'

.gitignore

@@ -21,6 +21,12 @@ node_modules
 /src-bex/www
 /src-bex/js/core
 
+# Yarn 4
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+
 # Log files
 npm-debug.log*
 yarn-debug.log*
@@ -34,4 +40,13 @@ yarn-error.log*
 *.sln
 
 # local .env files
-.env.local*
+.env*
+
+# version file
+src/version.ts
+VERSION
+release-*.gz
+CHANGELOG.md
+
+# Quasar cruft
+/quasar.config.*.temporary.compiled*

.prettierrc

@@ -1,4 +0,0 @@
-{
-  "singleQuote": true,
-  "semi": true
-}

.releaserc.json

@@ -0,0 +1,27 @@
+{
+  "branches": [
+    "main",
+    "next",
+    { "name": "beta", "prerelease": true },
+    { "name": "devel", "prerelease": true },
+    { "name": "alpha", "prerelease": true }
+  ],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/changelog",
+    [
+      "@semantic-release/exec",
+      {
+        "prepareCmd": "npm run generate-version '${nextRelease.version}' && quasar build -m pwa",
+        "publishCmd": "tar -czvf release-${nextRelease.version}.tar.gz -C dist/pwa . && echo '::set-output name=VERSION::${nextRelease.version}'"
+      }
+    ],
+    [
+      "@saithodev/semantic-release-gitea",
+      {
+        "assets": ["release-${nextRelease.version}.tar.gz"]
+      }
+    ]
+  ]
+}

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.13.0.cjs

CLAUDE.md

@@ -0,0 +1,51 @@
+# CLAUDE.md
+
+## Session Start
+
+Read the latest handoff in docs/summaries/ if one exists. Load only the files that handoff references — not all summaries. If no handoff exists, ask: what is the project, what type of work, what is the target deliverable.
+
+Before starting work, state: what you understand the project state to be, what you plan to do this session, and any open questions.
+
+## Identity
+
+You work with Patrick, a Solutions Architect, on the OYS Borrow a Boat (bab-app) project — a Quasar/Vue 3 app for managing a Borrow a Boat program for a Yacht Club. Backend is Appwrite.
+
+## Project Overview
+
+- **App**: OYS Borrow a Boat (oys_bab)
+- **Stack**: Quasar (Vue 3), TypeScript, Appwrite (BaaS)
+- **Purpose**: Manage a Borrow a Boat program for a Yacht Club
+- **Docs**: docs/planning/ contains personas, user/role/permission model, and time-based logic
+
+## Rules
+
+1. Do not mix unrelated project contexts in one session.
+2. Write state to disk, not conversation. After completing meaningful work, write a summary to docs/summaries/ using templates from templates/claude-templates.md. Include: decisions with rationale, exact numbers, file paths, open items.
+3. Before compaction or session end, write to disk: every number, every decision with rationale, every open question, every file path, exact next action.
+4. When switching work types (research → writing → review), write a handoff to docs/summaries/handoff-[date]-[topic].md and suggest a new session.
+5. Do not silently resolve open questions. Mark them OPEN or ASSUMED.
+6. Do not bulk-read documents. Process one at a time: read, summarize to disk, release from context before reading next. For the detailed protocol, read docs/context/processing-protocol.md.
+7. Sub-agent returns must be structured, not free-form prose. Use output contracts from templates/claude-templates.md.
+
+## Where Things Live
+
+- templates/claude-templates.md — summary, handoff, decision, analysis, task, output contract templates (read on demand)
+- docs/summaries/ — active session state (latest handoff + project brief + decision records + source summaries)
+- docs/context/ — reusable domain knowledge, loaded only when relevant to the current task
+  - processing-protocol.md — full document processing steps
+  - archive-rules.md — summary lifecycle and file archival rules
+  - subagent-rules.md — rules for structured sub-agent outputs
+- docs/planning/ — original planning documents (personas, roles/permissions, time logic)
+- docs/archive/ — processed raw files. Do not read unless explicitly told.
+- output/deliverables/ — final outputs
+- src/ — Quasar/Vue app source
+- src-pwa/ — PWA config
+- appwrite.json — Appwrite project config
+
+## Error Recovery
+
+If context degrades or auto-compact fires unexpectedly: write current state to docs/summaries/recovery-[date].md, tell the user what may have been lost, suggest a fresh session.
+
+## Before Delivering Output
+
+Verify: exact numbers preserved, open questions marked OPEN, output matches what was requested (not assumed), claims backed by specific data, output consistent with stored decisions in docs/context/, summary written to disk for this session's work.

README.md

@@ -41,3 +41,7 @@ quasar build
 ### Customize the configuration
 
 See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-vite/quasar-config-js).
+
+### TODO
+
+https://github.com/semantic-release/semantic-release

VERSION

@@ -0,0 +1 @@
+0.0.0

appwrite.json

@@ -0,0 +1,4 @@
+{
+    "projectId": "65ede55a213134f2b688",
+    "projectName": ""
+}

backup/.env

@@ -0,0 +1,3 @@
+APPWRITE_ENDPOINT=https://apidev.bab.toal.ca/v1
+APPWRITE_PROJECT_ID=65ede55a213134f2b688
+APPWRITE_API_KEY=71f7f899ca605b39a3f24a80a23b34f580fd7e735316152bc0d5ed042bd452e7116c4d0a7f3c77d343690d6cce229020c76de1733c754a402f15bbe9b2cab5a6cd7b3a7c1c0d66cede4f6aee99cdfac14898b7a2006a5eaae24529bbcb19b4c2f6563adff5688dda9c15357c9e98b449e50b6794dfb8cc6ab61e9f073b08a11e

backup/appwrite.json

@@ -0,0 +1,4 @@
+{
+    "projectId": "65ede55a213134f2b688",
+    "projectName": ""
+}

docs/archive/handoffs/handoff-2026-03-15-auth-magic-link.md

@@ -0,0 +1,88 @@
+# Session Handoff: Auth Refactor — Magic Link & Cleanup
+**Date:** 2026-03-15
+**Session Duration:** ~1 hour
+**Session Focus:** Remove Google/Discord OAuth, add magic link login, add About dialog
+**Context Usage at Handoff:** ~30%
+
+## What Was Accomplished
+
+1. Analyzed full auth flow (store, boot, login page, router guard) → no output file, inline analysis
+2. Removed Google OAuth → deleted `src/components/GoogleOauthComponent.vue`
+3. Removed Discord OAuth → deleted `src/components/DiscordOauthComponent.vue`
+4. Removed `googleLogin`, `discordLogin` from auth store → `src/stores/auth.ts`
+5. Removed `OAuthProvider` import from auth store → `src/stores/auth.ts`
+6. Added `createMagicURLSession()` to auth store (calls `account.createMagicURLToken`) → `src/stores/auth.ts`
+7. Added `magicURLLogin()` to auth store (calls `account.updateMagicURLSession`) → `src/stores/auth.ts`
+8. Updated `LoginPage.vue` — removed OAuth component imports/usage, added "Send Magic Link" button, added `onMounted` handler to detect magic link callback params and call `magicURLLogin` → `src/pages/LoginPage.vue`
+9. Added "About" item to left drawer → `src/components/LeftDrawer.vue` — opens a Quasar Dialog with app name, version, description
+10. Converted `src/version.js` → `src/version.ts` to eliminate TS hint
+11. Updated `generate-version.js` to write to `src/version.ts` → `generate-version.js`
+12. Fixed stale import in `SignupPage.vue` (`src/version.js` → `src/version`) → `src/pages/SignupPage.vue`
+13. Fixed `LeftDrawer.vue` import path `boot/appwrite` → `src/boot/appwrite` (was a TS module resolution error)
+
+## Exact State of Work in Progress
+
+- `.env.local` not being picked up by `quasar dev`: user interrupted the fix (was about to add `require('dotenv').config(...)` to `quasar.config.js`). **Status: UNRESOLVED.** User stopped this change — may prefer a different approach or wants to investigate themselves.
+
+## Decisions Made This Session
+
+- Use `account.updateMagicURLSession(userId, secret)` (not `createSession`) for magic link completion — BECAUSE Appwrite SDK v14 uses a separate method for magic URL vs OTP token sessions. `createSession` is for OTP only.
+- Magic link callback URL = `window.location.origin + '/login'` — Appwrite appends `?userId=xxx&secret=xxx` and the `onMounted` handler in LoginPage detects and consumes these.
+- Keep OTP code flow alongside magic link — user did not ask to remove it; both are available.
+- About dialog placed in LeftDrawer (not a separate page) — appropriate pattern for simple info display in a mobile app.
+
+## Key Numbers Generated or Discovered This Session
+
+- Appwrite SDK version: `^14.0.1`
+- `@quasar/app-vite` version: `^1.9.1`
+- App version string source: `src/version.ts`, written by `generate-version.js` (takes version as CLI arg)
+- Dev server port: `4000` (set in `quasar.config.js` `devServer.strictport`)
+
+## Conditional Logic Established
+
+- IF magic link callback detected (`query.userId && query.secret` in route on LoginPage mount) THEN call `magicURLLogin(userId, secret)` BECAUSE this uses `updateMagicURLSession` which is the correct Appwrite v14 API.
+- IF user enters email and clicks "Send Code" THEN OTP flow runs (6-digit code emailed, entered in second input field).
+- IF user enters email and clicks "Send Magic Link" THEN magic link email sent; user clicks link; page reloads at `/login?userId=xxx&secret=xxx`; `onMounted` auto-completes login.
+
+## Files Created or Modified
+
+| File Path | Action | Description |
+|-----------|--------|-------------|
+| `src/stores/auth.ts` | Modified | Removed `googleLogin`, `discordLogin`, `OAuthProvider` import; added `createMagicURLSession`, `magicURLLogin` |
+| `src/pages/LoginPage.vue` | Modified | Removed OAuth components; added magic link button and `onMounted` callback handler |
+| `src/components/LeftDrawer.vue` | Modified | Added "About" menu item that opens info dialog with version; fixed boot import path |
+| `src/components/GoogleOauthComponent.vue` | Deleted | No longer used |
+| `src/components/DiscordOauthComponent.vue` | Deleted | No longer used |
+| `src/version.ts` | Renamed (was `.js`) | Eliminates TypeScript implicit-any hint |
+| `src/pages/SignupPage.vue` | Modified | Updated `version.js` import to `version` |
+| `generate-version.js` | Modified | Now writes to `src/version.ts` instead of `src/version.js` |
+
+## What the NEXT Session Should Do
+
+1. **First**: Verify magic link flow end-to-end in dev environment (send link, click it, confirm auto-login works)
+2. **Then**: Resolve `.env.local` not being picked up — options are: (a) add `require('dotenv').config({ path: '.env.local' })` to top of `quasar.config.js`, or (b) use `.env` instead of `.env.local`, or (c) investigate if `@quasar/app-vite` 1.9.x has a bug
+3. **Then**: Check if `SignupPage.vue` / `register()` flow is still intended — it creates email+password accounts but the login page only offers passwordless flows; this is an inconsistency
+
+## Open Questions Requiring User Input
+
+- [ ] Should the OTP (6-digit code) flow be kept, or replaced entirely by magic link? — impacts LoginPage UX
+- [ ] Should the SignupPage (email+password registration) be removed in favour of magic link only? — impacts `src/pages/SignupPage.vue`, `src/stores/auth.ts` `register()`, router `/signup` route
+- [ ] Should "Forgot Password?" link be removed from LoginPage now that magic link is the primary flow? — it was already removed from LoginPage in this session (not present in current code)
+- [ ] `.env.local` fix approach — user stopped the `dotenv` approach; confirm preferred method
+
+## Assumptions That Need Validation
+
+- ASSUMED: `window.location.origin` is correct for magic link callback URL in all deployment environments — validate that prod URL matches what Appwrite Console has whitelisted as a redirect domain
+- ASSUMED: Appwrite project has magic URL tokens enabled — validate in Appwrite Console → Auth settings
+
+## What NOT to Re-Read
+
+- `src/components/GoogleOauthComponent.vue` — deleted
+- `src/components/DiscordOauthComponent.vue` — deleted
+
+## Files to Load Next Session
+
+- `src/stores/auth.ts` — primary auth logic, fully refactored this session
+- `src/pages/LoginPage.vue` — magic link + OTP UI, modified this session
+- `src/boot/appwrite.ts` — contains duplicate `login()` function (email/password) that may be dead code post-refactor
+- `quasar.config.js` — if resolving `.env.local` issue

docs/archive/handoffs/handoff-2026-03-15-dependency-updates.md

@@ -0,0 +1,114 @@
+# Session Handoff: Dependency Updates & ESLint Cleanup
+**Date:** 2026-03-15
+**Session Focus:** Complete Quasar v1→v2 migration, Appwrite SDK v14→v23 update, ESLint flat config cleanup
+**Status:** BUILD PASSING — 0 errors, 0 warnings
+
+## What Was Accomplished
+
+### From prior sessions (captured in archived handoffs):
+1. Auth flow refactored to passwordless (magic link + OTP), OAuth removed
+2. Google/Discord OAuth components deleted
+3. About dialog with version info added → `src/components/LeftDrawer.vue`
+4. `quasar.config.js` → `quasar.config.ts` (ESM TypeScript)
+5. `"type": "module"` added to `package.json`
+6. Yarn 1.x → Yarn 4.13.0
+7. ESLint legacy `.eslintrc.cjs` → flat config `eslint.config.js`
+8. QCalendar app extension removed → direct npm package import
+9. Boot/router/store wrappers updated to `#q-app/wrappers` imports
+10. Appwrite SDK updated v14.0.1 → v23.0.0
+11. `globals` package installed; browser + ES2021 globals added to ESLint config
+
+### This session (build cleanup — all 30 TS errors + 12 ESLint issues resolved):
+
+**TypeScript `as unknown as` casts** (Appwrite v23 `DefaultDocument` no longer overlaps domain types):
+- `src/stores/boat.ts:36` — `as unknown as Boat[]`
+- `src/stores/interval.ts:95,113,127` — `as unknown as Interval`
+- `src/stores/intervalTemplate.ts` — map callback cast + `as unknown as IntervalTemplate` (3 places)
+- `src/stores/reservation.ts:65,80,247` — `as unknown as Reservation`
+- `src/stores/task.ts:53,65,77,109,132` — `as unknown as Task[]`, `TaskTag[]`, `SkillTag[]`, `Task`
+
+**`.id` → `.$id` fixes** (Appwrite uses `$id`, not `id`):
+- `src/components/boat/BoatPreviewComponent.vue:7`
+- `src/components/scheduling/boat/BoatScheduleTableComponent.vue:54`
+- `src/components/task/TaskListComponent.vue:4`
+- `src/pages/schedule/ManageCalendar.vue:40`
+- `src/stores/sampledata/schedule.ts:19,29,138` — also `id:` → `$id:` in object literals
+
+**`defineProps` import conflict** (auto-imported in `<script setup>`, cannot also be explicitly imported):
+- `src/components/task/TaskCardComponent.vue:20` — removed import; also removed `subtasks` template refs (not in Task type)
+- `src/components/task/TaskTableComponent.vue:215` — removed `defineProps` from import
+
+**ESLint fixes:**
+- `eslint.config.js:52` — `process.env.NODE_ENV === 'production' ? 'error' : 'off'` → `'off'` (process not defined in .js ESLint globals)
+- `src/components/ResourceScheduleViewerComponent.vue:173` — removed `|| undefined` (always truthy)
+- `src/components/ResourceScheduleViewerComponent.vue:177` — `catch (e)` → `catch { }` (unused binding)
+- `src/components/ResourceScheduleViewerComponent.vue:237-247` — removed unused `eslint-disable-next-line` comments
+- `src/components/scheduling/boat/BoatScheduleTableComponent.vue:116` — `NodeJS.Timeout` → `ReturnType<typeof setInterval>`
+- `src/components/scheduling/boat/BoatScheduleTableComponent.vue:129` — ternary as statement → `if/else`; also destructured `{ direction }` to fix unused `event` hint
+- `src/pages/LoginPage.vue:131` — `catch (e)` → `catch { }`
+
+**Other fixes:**
+- `src-pwa/register-service-worker.ts` — installed `register-service-worker` package (was missing from package.json)
+- `src/stores/sampledata/schedule.ts:50` — `template.blocks` → `template.timeTuples` (property was renamed)
+- `src/stores/sampledata/schedule.ts:145` — removed `reservationDate` (not in Reservation type)
+- `src/stores/intervalTemplate.ts:27` — `d.timeTuple` cast via `as unknown as { timeTuple: string[] }`
+- `src/stores/intervalTemplate.ts:82` — `response.timeTuple` cast via `as unknown as { timeTuple: string[] }`
+- `src/components/scheduling/boat/CalendarHeaderComponent.vue` — removed `getWeekdaySkips` (removed from qcalendar API); `createDayList` now takes `weekdays` directly as 4th arg; removed `weekdaySkips` computed
+
+## Decisions Made
+
+- **`as unknown as Type` pattern** — correct approach for Appwrite v23 `DefaultDocument` casts; v23 made `DefaultDocument` strict, no longer assignable to domain types without double-cast — STATUS: CONFIRMED
+- **`getWeekdaySkips` removed from qcalendar** — `createDayList` now accepts `weekdays` array directly as 4th param — STATUS: CONFIRMED (verified from ESM source)
+- **`subtasks` removed from TaskCardComponent template** — `Task` type has no `subtasks` field; feature was dead code — STATUS: ASSUMED safe (see open question)
+- **`no-debugger: 'off'`** — hardcoded instead of `process.env.NODE_ENV` conditional because `process` is not in ESLint globals for `.js` files — STATUS: CONFIRMED
+
+## Key Numbers
+
+- TS errors at session start: 30 (in 14 files)
+- ESLint errors at session start: 12 (6 errors, 6 warnings)
+- TS errors at session end: 0
+- ESLint errors at session end: 0
+- Packages added: `register-service-worker`
+
+## Files Modified This Session
+
+| File | Change |
+|------|--------|
+| `eslint.config.js` | `no-debugger` rule hardcoded to `'off'` |
+| `src/components/ResourceScheduleViewerComponent.vue` | 3 ESLint fixes |
+| `src/components/scheduling/boat/BoatScheduleTableComponent.vue` | `.id`→`.$id`, NodeJS.Timeout, if/else |
+| `src/components/scheduling/boat/CalendarHeaderComponent.vue` | Removed `getWeekdaySkips`; updated `createDayList` call |
+| `src/pages/LoginPage.vue` | `catch { }` |
+| `src/components/boat/BoatPreviewComponent.vue` | `.id`→`.$id` |
+| `src/components/task/TaskCardComponent.vue` | Removed `defineProps` import + subtasks refs |
+| `src/components/task/TaskListComponent.vue` | `.id`→`.$id` |
+| `src/components/task/TaskTableComponent.vue` | Removed `defineProps` from import |
+| `src/pages/schedule/ManageCalendar.vue` | `.id`→`.$id` |
+| `src/stores/boat.ts` | `as unknown as Boat[]` |
+| `src/stores/interval.ts` | `as unknown as Interval` (3 places) |
+| `src/stores/intervalTemplate.ts` | Multiple cast fixes + `timeTuple` access |
+| `src/stores/reservation.ts` | `as unknown as Reservation` (multiple) |
+| `src/stores/sampledata/schedule.ts` | `id`→`$id`, `blocks`→`timeTuples`, removed `reservationDate` |
+| `src/stores/task.ts` | `as unknown as` for Task/TaskTag/SkillTag |
+| `package.json` / `yarn.lock` | Added `register-service-worker` |
+
+## Open Questions
+
+- [ ] `src/components/task/TaskCardComponent.vue` — `subtasks` removed from template. Should `subtasks?: Task[]` be added to the `Task` interface in `task.ts` for future use? OPEN
+- [ ] Appwrite v23 deprecated positional-param overloads (hints in every store). Should stores be migrated to new object-param style? Low priority — code still works. OPEN
+
+## Assumptions
+
+- ASSUMED: `subtasks` feature in TaskCardComponent was dead/future code — safe to remove template refs
+- ASSUMED: `no-debugger: 'off'` is fine for devel branch
+
+## What NOT to Re-Read
+
+- `docs/archive/handoffs/handoff-2026-03-15-auth-magic-link.md` — archived
+
+## Next Session
+
+- Commit all dependency update + build fix changes
+- Test the app against the dev Appwrite backend (validate v23 API calls work at runtime)
+- Consider migrating Appwrite calls from deprecated positional-param to object-param style (optional)
+- Consider adding `subtasks?: Task[]` to `Task` interface if the feature is planned

docs/context/archive-rules.md

@@ -0,0 +1,16 @@
+# Archive Rules
+
+## Raw File Archival
+
+After creating a Source Document Summary for any raw file:
+1. Move the raw file to `docs/archive/`
+2. Record the move in the source summary's header: `Archived From: [original path]`
+3. Do not read from `docs/archive/` unless the user explicitly says "go back to the original [filename]"
+
+## Summary Lifecycle Rules
+
+1. **Session handoffs expire**: After a new handoff is written, the previous handoff moves to `docs/archive/handoffs/`. Only the latest handoff stays in `docs/summaries/`.
+2. **Decision records persist**: Decision records (DR-*) stay in `docs/summaries/` permanently — they are institutional memory.
+3. **Source summaries persist**: Source document summaries stay until the project ends — they replace raw documents.
+4. **Analysis summaries**: Keep only the latest version. If re-run, the new one replaces the old (archive the old one).
+5. **Maximum active summaries**: If `docs/summaries/` exceeds 15 files, consolidate older source summaries into a single `project-digest.md` and archive the originals.

docs/context/processing-protocol.md

@@ -0,0 +1,23 @@
+# Document Processing Protocol
+
+Use this whenever you need to process multiple documents or large files.
+
+## For 1-3 Short Documents (< 2K words each)
+
+Read sequentially. After each document, write a Source Document Summary (Template 1 from `templates/claude-templates.md`) to disk. Then proceed with work using summaries only.
+
+## For 4+ Documents OR Any Document > 2K Words
+
+**Step 1:** List all documents with file sizes. Present to user for prioritization.
+
+**Step 2:** Process each document individually:
+- Read one document
+- Extract into Source Document Summary format
+- Write to `./docs/summaries/source-[filename].md`
+- Release the document from active consideration before reading the next
+
+**Step 3:** After all documents are processed, read only the summaries to form your working context.
+
+**Step 4:** Cross-reference summaries for contradictions or dependencies. Note these explicitly.
+
+**Step 5:** Proceed with the actual task using summaries as your reference.

docs/context/subagent-rules.md

@@ -0,0 +1,18 @@
+# Subagent Deployment Rules
+
+## When to Use Subagent vs. Main Agent
+
+| Situation | Approach | Why |
+|-----------|----------|-----|
+| Reading/analyzing documents | Subagent | Keeps source content out of main context |
+| Research and competitive analysis | Subagent | Heavy reading, return summary only |
+| Writing deliverables | Main agent | Needs full decision-making context |
+| Schema/architecture design | Main agent | Needs holistic project understanding |
+| Code generation | Subagent | Isolated implementation, return result |
+| Review and QA | Subagent | Fresh perspective, no bias from writing |
+
+## Output Requirements
+
+Subagent output must conform to the Output Contracts in `templates/claude-templates.md`. No free-form prose returns.
+
+Optimal subagent return size: 1,000-2,000 tokens of structured summary. Longer returns consume main agent context without proportional benefit.

docs/planning/personas.md

@@ -0,0 +1,8 @@
+# Personas
+
+- BAB Member
+- Certified Skipper
+- Program Administrator
+- Boatswain
+- Volunteer
+- Instructor

docs/summaries/handoff-2026-03-15-build-fixes.md

@@ -0,0 +1,101 @@
+# Session Handoff: Build Fixes & Dev Environment
+**Date:** 2026-03-15
+**Session Duration:** ~2 hours
+**Session Focus:** Resolve all TypeScript/ESLint build errors from dependency updates; fix dev server startup
+**Context Usage at Handoff:** Medium
+
+## What Was Accomplished
+
+1. Fixed 30 TypeScript errors (14 files) → build now passes with 0 errors
+2. Fixed 12 ESLint problems (6 errors, 6 warnings) → 0 remaining
+3. Fixed `quasar dev` startup error (`FlatESLint is not a constructor`) → downgraded ESLint v10→v9
+4. Fixed missing Appwrite env vars in `.env.local` → app connects to backend on dev
+
+## Exact State of Work in Progress
+
+- **Build**: CLEAN — `yarn quasar build` exits 0, no TS or ESLint errors
+- **Dev server**: FUNCTIONAL — `quasar dev` starts without errors; ESLint inline checking via `vite-plugin-checker` is restored
+- **Runtime**: UNTESTED this session — app has not been manually tested against the dev Appwrite backend
+
+## Decisions Made This Session
+
+- **`as unknown as Type` for all Appwrite store casts** — CONFIRMED: Appwrite v23 made `DefaultDocument` strict; it no longer overlaps domain types, so the double-cast is required. Applied to: `boat.ts`, `interval.ts`, `intervalTemplate.ts`, `reservation.ts`, `task.ts`
+- **ESLint downgraded v10.0.3 → v9.39.4** — CONFIRMED: `vite-plugin-checker` v0.12.0 calls `FlatESLint` which was merged back into `ESLint` in v10; v9 preserves the API. Also downgraded `@eslint/js` (v10→v9) and `eslint-plugin-vue` (v10→v9)
+- **`getWeekdaySkips` removed** — CONFIRMED: removed from `@quasar/quasar-ui-qcalendar` API; `createDayList` now takes `weekdays` array directly as 4th param (previously took `weekdaySkips` computed value)
+- **`subtasks` removed from TaskCardComponent template** — ASSUMED SAFE: `Task` type has no `subtasks` field; template refs were dead code. See open question.
+- **`no-debugger: 'off'`** — CONFIRMED: hardcoded because `process` is not available in ESLint globals when linting `.js` files (config file context)
+- **`.env.local` variable names corrected** — CONFIRMED: file had `VITE_APPWRITE_ENDPOINT` / `VITE_APPWRITE_PROJECT`; `appwrite.ts` reads `VITE_APPWRITE_API_ENDPOINT` / `VITE_APPWRITE_API_PROJECT`
+
+## Key Numbers Generated or Discovered This Session
+
+- TypeScript errors at session start: 30 (across 14 files)
+- ESLint problems at session start: 12 (6 errors, 6 warnings)
+- TypeScript errors at session end: 0
+- ESLint problems at session end: 0
+- ESLint: v10.0.3 → v9.39.4
+- `@eslint/js`: v10 → v9
+- `eslint-plugin-vue`: v10 → v9
+- `register-service-worker`: newly added (was missing from package.json)
+
+## Conditional Logic Established
+
+- IF Appwrite SDK returns `DefaultDocument` THEN cast via `as unknown as DomainType` BECAUSE v23 `DefaultDocument` is strict and no longer assignable to domain types that extend `Partial<Models.Document>`
+- IF `vite-plugin-checker` is v0.12.x THEN ESLint must be v9.x BECAUSE v0.12.x uses `FlatESLint` constructor removed in ESLint v10
+- IF `createDayList` is called from qcalendar THEN pass `weekdays` array as 4th arg directly BECAUSE `getWeekdaySkips` was removed from the qcalendar public API
+- IF `.env.local` is updated THEN variable names must match `import.meta.env.VITE_APPWRITE_API_ENDPOINT` / `VITE_APPWRITE_API_PROJECT` as read in `src/boot/appwrite.ts`
+
+## Files Created or Modified
+
+| File Path | Action | Description |
+|-----------|--------|-------------|
+| `src/stores/boat.ts` | Modified | `as unknown as Boat[]` |
+| `src/stores/interval.ts` | Modified | `as unknown as Interval` (3 places) |
+| `src/stores/intervalTemplate.ts` | Modified | Map callback cast + `as unknown as IntervalTemplate` (3 places); `timeTuple` cast |
+| `src/stores/reservation.ts` | Modified | `as unknown as Reservation` (5 places) |
+| `src/stores/task.ts` | Modified | `as unknown as Task[]`, `TaskTag[]`, `SkillTag[]`, `Task` (5 places) |
+| `src/stores/sampledata/schedule.ts` | Modified | `id`→`$id`, `blocks`→`timeTuples`, removed `reservationDate` |
+| `src/components/boat/BoatPreviewComponent.vue` | Modified | `boat.id` → `boat.$id` |
+| `src/components/scheduling/boat/BoatScheduleTableComponent.vue` | Modified | `block.id`→`block.$id`; `NodeJS.Timeout`→`ReturnType<typeof setInterval>`; ternary→if/else |
+| `src/components/scheduling/boat/CalendarHeaderComponent.vue` | Modified | Removed `getWeekdaySkips` import+computed; `createDayList` now passes `weekdays` directly |
+| `src/components/task/TaskCardComponent.vue` | Modified | Removed `defineProps` explicit import; removed `subtasks` template refs |
+| `src/components/task/TaskListComponent.vue` | Modified | `task.id` → `task.$id` |
+| `src/components/task/TaskTableComponent.vue` | Modified | Removed `defineProps` from explicit import |
+| `src/components/ResourceScheduleViewerComponent.vue` | Modified | Removed `|| undefined`; `catch { }`; removed stale eslint-disable comments |
+| `src/pages/LoginPage.vue` | Modified | `catch { }` |
+| `src/pages/schedule/ManageCalendar.vue` | Modified | `block.id` → `block.$id` |
+| `src/boot/appwrite.ts` | Modified | Removed stale `console.log(API_ENDPOINT)` |
+| `eslint.config.js` | Modified | `no-debugger` hardcoded to `'off'` |
+| `quasar.config.ts` | Modified | ESLint checker restored (had been temporarily removed) |
+| `package.json` / `yarn.lock` | Modified | ESLint v10→v9; `@eslint/js` v10→v9; `eslint-plugin-vue` v10→v9; added `register-service-worker` |
+| `.env.local` | Modified | Variable names corrected: `VITE_APPWRITE_ENDPOINT`→`VITE_APPWRITE_API_ENDPOINT`, `VITE_APPWRITE_PROJECT`→`VITE_APPWRITE_API_PROJECT`; endpoint URL updated to include `/v1` |
+| `docs/summaries/handoff-2026-03-15-build-fixes.md` | Created | This file |
+| `docs/archive/handoffs/handoff-2026-03-15-dependency-updates.md` | Archived | Superseded by this handoff |
+
+## What the NEXT Session Should Do
+
+1. **First**: Run `quasar dev` and manually test the login flow against the dev Appwrite backend to validate v23 API calls work at runtime
+2. **Validate**: Boat listing, reservation creation/cancellation, interval loading — confirm no runtime errors from the v23 positional-param deprecations
+3. **Commit**: Stage all modified files and commit as `"fix: Resolve build errors from dependency updates"` (single clean commit covering all TS/ESLint/qcalendar/env fixes)
+4. **Optional**: Migrate Appwrite calls from deprecated positional-param style to object-param style (affects all stores — low priority, they still work)
+5. **Optional**: Add `subtasks?: Task[]` to `Task` interface in `src/stores/task.ts` if that feature is planned
+
+## Open Questions Requiring User Input
+
+- [ ] `task.subtasks` removed from `TaskCardComponent` template — should `subtasks?: Task[]` be added to the `Task` interface for future use, or is subtask support not planned?
+- [ ] Appwrite v23 deprecated positional-param overloads (hints in every store call). Migrate now or leave for later?
+
+## Assumptions That Need Validation
+
+- ASSUMED: Appwrite v23 positional-param API calls behave identically at runtime to v14 — validate by doing a full login + reservation flow against the dev backend
+- ASSUMED: `subtasks` in `TaskCardComponent` was dead/future code — no user confirmed this
+
+## What NOT to Re-Read
+
+- `docs/archive/handoffs/handoff-2026-03-15-dependency-updates.md` — archived; superseded by this file
+- `docs/archive/handoffs/handoff-2026-03-15-auth-magic-link.md` — archived; auth work complete
+
+## Files to Load Next Session
+
+- `src/stores/task.ts` — if adding `subtasks` to Task interface
+- `src/boot/appwrite.ts` — if migrating to Appwrite v23 object-param style
+- Any store file (`boat.ts`, `interval.ts`, `reservation.ts`, etc.) — if migrating Appwrite calls

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.

docs/users_roles_permissions.md

@@ -0,0 +1,40 @@
+# Users, Roles and Permissions
+
+This is the design document for https://gitea.toal.ca/oys/bab-app/issues/11
+
+## Backend Concepts
+
+Utilizing the AppWrite backend provides us with some basic concepts we can use:
+
+### Users, Groups, and Labels
+
+#### Teams
+
+Teams are AppWrite groups of users. Teams can be assigned roles, which can be assigned permissions. Teams "contain" users. A team has more permissions to manage it's members than labels, which are assigned / removed, rather than 'invited / left'.
+
+#### Labels
+
+Labels are AppWrite tags for users. Users have Labels as attributes. Like teams, labels can be used for Role / Permission mapping.
+
+### Permissions
+
+https://appwrite.io/docs/advanced/platform/permissions
+
+Permissions are fine-grained access control for users and objects. They follow standard "CRUD" patterns.
+
+## BAB Concepts
+
+For teams, there will, to start, be the following:
+
+- `staff` : Individuals with authority / responsibilities
+  - `maintenance` : Staff responsible for maintenance (eg: Boatswain)
+  - `admin`: Administrators of the program / application
+- `school` : Members of the Sailing School (Instructors & Students)
+  - `student` role : A student in the school
+  - `instructor` role: An instructor in the school
+- `bab` : Members of the BAB program
+  - `skipper` role: A member who has passed skipper certification
+
+The following are the initial labels:
+
+- TBD

eslint.config.js

@@ -0,0 +1,56 @@
+import js from '@eslint/js';
+import pluginVue from 'eslint-plugin-vue';
+import tseslint from 'typescript-eslint';
+import prettier from 'eslint-config-prettier';
+import globals from 'globals';
+
+export default tseslint.config(
+  {
+    ignores: [
+      'dist/**',
+      '.quasar/**',
+      'node_modules/**',
+      'src-capacitor/**',
+      'src-cordova/**',
+      'quasar.config.*.temporary.compiled*',
+      'generate-version.cjs',
+      'src-pwa/.eslintrc.js',
+      '**/*.d.ts',
+    ],
+  },
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...pluginVue.configs['flat/essential'],
+  {
+    files: ['**/*.ts', '**/*.vue'],
+    languageOptions: {
+      parserOptions: {
+        parser: tseslint.parser,
+        extraFileExtensions: ['.vue'],
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.es2021,
+        ga: 'readonly',
+        cordova: 'readonly',
+        __statics: 'readonly',
+        __QUASAR_SSR__: 'readonly',
+        __QUASAR_SSR_SERVER__: 'readonly',
+        __QUASAR_SSR_CLIENT__: 'readonly',
+        __QUASAR_SSR_PWA__: 'readonly',
+        process: 'readonly',
+        Capacitor: 'readonly',
+        chrome: 'readonly',
+      },
+    },
+    rules: {
+      'prefer-promise-reject-errors': 'off',
+      quotes: ['warn', 'single', { avoidEscape: true }],
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/no-var-requires': 'off',
+      'no-unused-vars': 'off',
+      'no-debugger': 'off',
+    },
+  },
+  prettier,
+);

generate-version.cjs

@@ -0,0 +1,22 @@
+const fs = require('fs');
+const path = require('path');
+
+try {
+  const version = process.argv[2];
+
+  if (!version) throw Error('Must pass version on command line');
+
+  // Create version content
+  const versionContent = `export const APP_VERSION = '${version}';\n`;
+  const versionTxtFilePath = path.resolve(__dirname, './VERSION');
+  const versionFilePath = path.resolve(__dirname, 'src/version.ts');
+
+  // Write version to TXT file
+  fs.writeFileSync(versionTxtFilePath, version, 'utf8');
+  // Write version to js file
+  fs.writeFileSync(versionFilePath, versionContent, 'utf8');
+  console.log(`Version file generated with version: ${version}`);
+} catch (error) {
+  console.error('Error generating version file:', error);
+  process.exit(1);
+}

nohup.out

@@ -0,0 +1,36 @@
+2024-06-06 07:42:15,841 - vorta.i18n - DEBUG - Loading translation failed for ['en-CA', 'en-Latn-CA'].
+QObject::connect: No such signal QPlatformNativeInterface::systemTrayWindowChanged(QScreen*)
+2024-06-06 07:42:15,884 - root - DEBUG - Not a private SSH key file: authorized_keys
+2024-06-06 07:42:15,885 - root - DEBUG - Not a private SSH key file: github_rsa.pub_bak-github
+2024-06-06 07:42:15,886 - root - DEBUG - Not a private SSH key file: other_keys.seahorse
+2024-06-06 07:42:16,077 - root - INFO - Using NetworkManagerMonitor NetworkStatusMonitor implementation.
+Requested decoration  "adwaita"  not found, falling back to default
+qt.qpa.wayland: Wayland does not support QWindow::requestActivate()
+2024-06-06 07:42:16,209 - vorta.borg.jobs_manager - DEBUG - Add job for site default
+2024-06-06 07:42:16,210 - vorta.borg.jobs_manager - DEBUG - Start job on site: default
+2024-06-06 07:42:16,237 - vorta.borg.borg_job - INFO - Running command /usr/bin/borg --version
+2024-06-06 07:42:20,564 - vorta.borg.jobs_manager - DEBUG - Finish job for site: default
+2024-06-06 07:42:20,565 - vorta.borg.jobs_manager - DEBUG - No more jobs for site: default
+2024-06-06 07:42:20,566 - vorta.scheduler - DEBUG - Refreshing all scheduler timers
+2024-06-06 07:42:20,568 - vorta.scheduler - DEBUG - Nothing scheduled for profile 1 because of unset repo.
+qt.qpa.wayland: Wayland does not support QWindow::requestActivate()
+2024-06-06 07:42:23,190 - root - DEBUG - Not a private SSH key file: authorized_keys
+2024-06-06 07:42:23,191 - root - DEBUG - Not a private SSH key file: github_rsa.pub_bak-github
+2024-06-06 07:42:23,191 - root - DEBUG - Not a private SSH key file: other_keys.seahorse
+2024-06-06 07:42:23,204 - vorta.keyring.abc - DEBUG - Only available on macOS
+2024-06-06 07:42:23,244 - asyncio - DEBUG - Using selector: EpollSelector
+2024-06-06 07:42:23,245 - vorta.keyring.abc - DEBUG - Using VortaSecretStorageKeyring
+2024-06-06 07:49:53,786 - vorta.keyring.abc - DEBUG - Only available on macOS
+2024-06-06 07:49:53,788 - asyncio - DEBUG - Using selector: EpollSelector
+2024-06-06 07:49:53,788 - vorta.keyring.abc - DEBUG - Using VortaSecretStorageKeyring
+2024-06-06 07:49:53,789 - asyncio - DEBUG - Using selector: EpollSelector
+2024-06-06 07:49:53,790 - vorta.keyring.secretstorage - DEBUG - Found 0 passwords matching repo URL.
+qt.qpa.wayland: Wayland does not support QWindow::requestActivate()
+2024-06-06 07:50:10,009 - vorta.keyring.abc - DEBUG - Only available on macOS
+2024-06-06 07:50:10,011 - asyncio - DEBUG - Using selector: EpollSelector
+2024-06-06 07:50:10,012 - vorta.keyring.abc - DEBUG - Using VortaSecretStorageKeyring
+2024-06-06 07:50:10,012 - vorta.borg.borg_job - DEBUG - Using VortaSecretStorageKeyring keyring to store passwords.
+2024-06-06 07:50:10,013 - asyncio - DEBUG - Using selector: EpollSelector
+2024-06-06 07:50:10,013 - vorta.keyring.secretstorage - DEBUG - Found 0 passwords matching repo URL.
+2024-06-06 07:50:10,013 - vorta.borg.borg_job - DEBUG - Password not found in primary keyring. Falling back to VortaDBKeyring.
+2024-06-06 07:50:10,029 - vorta.borg.borg_job - INFO - Running command /usr/bin/borg info --info --json --log-json ssh://borg@borg.toal.ca:12022/./ptoal-linux

package.json

@@ -1,48 +1,68 @@
 {
   "name": "oys_bab",
-  "version": "0.0.1",
+  "version": "0.0.0",
   "description": "Manage a Borrow a Boat program for a Yacht Club",
   "productName": "OYS Borrow a Boat",
   "author": "Patrick Toal <ptoal@takeflight.ca>",
   "private": true,
+  "type": "module",
   "scripts": {
-    "lint": "eslint --ext .js,.ts,.vue ./",
+    "generate-version": "node generate-version.cjs",
+    "lint": "eslint .",
     "format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
     "test": "echo \"No test specified\" && exit 0",
-    "dev": "quasar dev",
-    "build": "quasar build"
+    "dev": "yarn generate-version && quasar dev -m pwa",
+    "build": "yarn generate-version && quasar build -m pwa"
   },
   "dependencies": {
-    "@quasar/extras": "^1.16.4",
-    "appwrite": "^13.0.0",
+    "@quasar/extras": "^1.17.0",
+    "@quasar/quasar-ui-qcalendar": "^4.1.2",
+    "appwrite": "^23.0.0",
+    "axios": "^1.13.6",
+    "file": "^0.2.2",
     "pinia": "^2.1.7",
-    "quasar": "^2.6.0",
-    "vue": "^3.0.0",
-    "vue-router": "^4.0.0"
+    "register-service-worker": "^1.7.2",
+    "vue": "3",
+    "vue-router": "4",
+    "vue3-google-login": "^2.0.37"
   },
   "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",
-    "autoprefixer": "^10.4.2",
-    "eslint": "^8.10.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-vue": "^9.0.0",
-    "prettier": "^2.5.1",
-    "typescript": "^4.5.4",
-    "workbox-build": "^7.0.0",
-    "workbox-cacheable-response": "^7.0.0",
-    "workbox-core": "^7.0.0",
-    "workbox-expiration": "^7.0.0",
-    "workbox-precaching": "^7.0.0",
-    "workbox-routing": "^7.0.0",
-    "workbox-strategies": "^7.0.0"
+    "@eslint/js": "^9",
+    "@quasar/app-vite": "^2.4.1",
+    "@saithodev/semantic-release-gitea": "^2.1.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/exec": "^7.1.0",
+    "@semantic-release/github": "^12.0.6",
+    "@semantic-release/npm": "^13.1.5",
+    "@types/node": "^25.5.0",
+    "autoprefixer": "^10.4.27",
+    "dotenv": "^17.3.1",
+    "eslint": "^9",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-vue": "^9",
+    "git-commit-info": "^2.0.2",
+    "globals": "^17.4.0",
+    "prettier": "^3.8.1",
+    "quasar": "^2.18.6",
+    "semantic-release": "^25.0.3",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.57.0",
+    "vite-plugin-checker": "^0.12.0",
+    "vue-eslint-parser": "^10.4.0",
+    "vue-tsc": "^3.2.5",
+    "workbox-build": "^7.4.0",
+    "workbox-cacheable-response": "^7.4.0",
+    "workbox-core": "^7.4.0",
+    "workbox-expiration": "^7.4.0",
+    "workbox-precaching": "^7.4.0",
+    "workbox-routing": "^7.4.0",
+    "workbox-strategies": "^7.4.0",
+    "yarn": "^1.22.21"
   },
   "engines": {
-    "node": "^18 || ^16 || ^14.19",
+    "node": "^20 || ^18 || ^16 || ^14.19",
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
-  }
+  },
+  "packageManager": "yarn@4.13.0"
 }

quasar.config.ts

@@ -1,26 +1,10 @@
-/* eslint-env node */
-
-/*
- * This file runs in a Node context (it's NOT transpiled by Babel), so use only
- * the ES6 features that are supported by your Node version. https://node.green/
- */
-
 // Configuration for your app
 // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
 
-const { configure } = require('quasar/wrappers');
+import { defineConfig } from '#q-app/wrappers';
 
-module.exports = configure(function (/* ctx */) {
+export default defineConfig(function () {
   return {
-    eslint: {
-      // fix: true,
-      // include: [],
-      // exclude: [],
-      // rawOptions: {},
-      warnings: true,
-      errors: true,
-    },
-
     // https://v2.quasar.dev/quasar-cli-vite/prefetch-feature
     // preFetch: true,
 
@@ -52,8 +36,7 @@ module.exports = configure(function (/* ctx */) {
         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,
@@ -72,9 +55,21 @@ module.exports = configure(function (/* ctx */) {
       // extendViteConf (viteConf) {},
       // viteVuePluginOptions: {},
 
-      // vitePlugins: [
-      //   [ 'package-name', { ..options.. } ]
-      // ]
+      vitePlugins: [
+        [
+          'vite-plugin-checker',
+          {
+            vueTsc: {
+              tsconfigPath: 'tsconfig.vue-tsc.json',
+            },
+            eslint: {
+              lintCommand: 'eslint .',
+              useFlatConfig: true,
+            },
+          },
+          { server: false },
+        ],
+      ],
     },
 
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
@@ -83,6 +78,28 @@ module.exports = configure(function (/* ctx */) {
       // open: true, // opens browser window automatically
       port: 4000,
       strictport: true,
+      // This works around CORS problems when developing locally, using the Appwrite backend
+      proxy: {
+        '/api': {
+          target: 'https://appwrite.toal.ca/',
+          changeOrigin: true,
+          secure: false,
+          rewrite: (path) => path.replace(/^\/api/, ''),
+        },
+        '/api/v1/realtime': {
+          target: 'wss://appwrite.toal.ca',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, ''),
+          secure: false,
+          ws: true,
+        },
+        // '/function': {
+        //   target: 'https://6640382951eacb568371.f.appwrite.toal.ca/',
+        //   changeOrigin: true,
+        //   secure: false,
+        //   rewrite: (path) => path.replace(/^\/function/, ''),
+        // },
+      },
       // For reverse-proxying via haproxy
       // hmr: {
       //   clientPort: 443,
@@ -155,7 +172,7 @@ module.exports = configure(function (/* ctx */) {
 
     // https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa
     pwa: {
-      workboxMode: 'generateSW', // or 'injectManifest'
+      workboxMode: 'GenerateSW', // or 'InjectManifest'
       injectPwaMetaTags: true,
       swFilename: 'sw.js',
       manifestFilename: 'manifest.json',
@@ -206,8 +223,6 @@ module.exports = configure(function (/* ctx */) {
 
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex
     bex: {
-      contentScripts: ['my-content-script'],
-
       // extendBexScriptsConf (esbuildConf) {}
       // extendBexManifestJson (json) {}
     },

quasar.extensions.json

@@ -1,3 +1 @@
-{
-  "@quasar/qcalendar": {}
-}
+{}

src-pwa/manifest.json

@@ -1,5 +1,5 @@
 {
-  "orientation": "portrait",
+  "orientation": "natural",
   "background_color": "#ffffff",
   "theme_color": "#027be3",
   "icons": [

src-pwa/register-service-worker.ts

@@ -9,33 +9,35 @@ register(process.env.SERVICE_WORKER_FILE, {
   // to ServiceWorkerContainer.register()
   // https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register#Parameter
 
-  // registrationOptions: { scope: './' },
+  registrationOptions: { scope: './' },
 
-  ready (/* registration */) {
-    // console.log('Service worker is active.')
+  ready(/* registration */) {
+    console.log('Service worker is active.');
   },
 
-  registered (/* registration */) {
-    // console.log('Service worker has been registered.')
+  registered(/* registration */) {
+    console.log('Service worker has been registered.');
   },
 
-  cached (/* registration */) {
-    // console.log('Content has been cached for offline use.')
+  cached(/* registration */) {
+    console.log('Content has been cached for offline use.');
   },
 
-  updatefound (/* registration */) {
-    // console.log('New content is downloading.')
+  updatefound(/* registration */) {
+    console.log('New content is downloading.');
   },
 
-  updated (/* registration */) {
-    // console.log('New content is available; please refresh.')
+  updated(/* registration */) {
+    console.log('New content is available; please refresh.');
   },
 
-  offline () {
-    // console.log('No internet connection found. App is running in offline mode.')
+  offline() {
+    console.log(
+      'No internet connection found. App is running in offline mode.'
+    );
   },
 
-  error (/* err */) {
-    // console.error('Error during service worker registration:', err)
+  error(err) {
+    console.error('Error during service worker registration:', err);
   },
 });

src/App.vue

@@ -2,10 +2,15 @@
   <router-view />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { defineComponent, onMounted } from 'vue';
+import { useAuthStore } from './stores/auth';
 
-export default defineComponent({
+defineComponent({
   name: 'OYS Borrow-a-Boat',
 });
+
+onMounted(async () => {
+  await useAuthStore().init();
+});
 </script>

src/boot/appwrite.ts

@@ -1,29 +1,72 @@
-import { boot } from 'quasar/wrappers';
-import { Client, Account, Databases, ID } from 'appwrite';
+import { defineBoot } from '#q-app/wrappers';
+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';
+const API_ENDPOINT = import.meta.env.VITE_APPWRITE_API_ENDPOINT;
+const API_PROJECT = import.meta.env.VITE_APPWRITE_API_PROJECT;
 
-// Private self-hosted appwrite
-client
-  .setEndpoint('https://apidev.bab.toal.ca/v1')
-  .setProject('655a7116479b4d5a815f');
-//TODO
-const appDatabaseId = '';
+if (API_ENDPOINT && API_PROJECT) {
+  client.setEndpoint(API_ENDPOINT).setProject(API_PROJECT);
+} else {
+  console.error(
+    'Must configure VITE_APPWRITE_API_ENDPOINT and VITE_APPWRITE_API_PROJECT',
+  );
+}
+
+type AppwriteIDConfig = {
+  databaseId: string;
+  collection: {
+    boat: string;
+    reservation: string;
+    skillTags: string;
+    task: string;
+    taskTags: string;
+    interval: string;
+    intervalTemplate: string;
+  };
+  function: {
+    userinfo: string;
+  };
+};
+
+let AppwriteIds = <AppwriteIDConfig>{};
+
+AppwriteIds = {
+  databaseId: 'bab_prod',
+  collection: {
+    boat: 'boat',
+    reservation: 'reservation',
+    skillTags: 'skillTags',
+    task: 'task',
+    taskTags: 'taskTags',
+    interval: 'interval',
+    intervalTemplate: 'intervalTemplate',
+  },
+  function: {
+    userinfo: 'userinfo',
+  },
+};
 
 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 }) => {
+export default defineBoot(async ({ router }) => {
   // Initialize store
   const authStore = useAuthStore();
   await authStore.init();
@@ -50,7 +93,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',
@@ -60,30 +103,57 @@ 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) {
+    console.log(error);
+    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, appDatabaseId, login, logout };
+
+async function resetPassword(email: string) {
+  await account.createRecovery(email, window.location.origin + '/pwreset');
+}
+
+export {
+  client,
+  account,
+  teams,
+  databases,
+  functions,
+  ID,
+  AppwriteIds,
+  login,
+  logout,
+  resetPassword,
+};

src/components/BoatReservationComponent.vue

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

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>
 

src/components/ExampleComponent.vue

@@ -1,64 +0,0 @@
-<template>
-  <div>
-    <p>{{ title }}</p>
-    <ul>
-      <li v-for="todo in todos" :key="todo.id" @click="increment">
-        {{ todo.id }} - {{ todo.content }}
-      </li>
-    </ul>
-    <p>Count: {{ todoCount }} / {{ meta.totalCount }}</p>
-    <p>Active: {{ active ? 'yes' : 'no' }}</p>
-    <p>Clicks on todos: {{ clickCount }}</p>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  PropType,
-  computed,
-  ref,
-  toRef,
-  Ref,
-} from 'vue';
-import { Todo, Meta } from './models';
-
-function useClickCount() {
-  const clickCount = ref(0);
-  function increment() {
-    clickCount.value += 1
-    return clickCount.value;
-  }
-
-  return { clickCount, increment };
-}
-
-function useDisplayTodo(todos: Ref<Todo[]>) {
-  const todoCount = computed(() => todos.value.length);
-  return { todoCount };
-}
-
-export default defineComponent({
-  name: 'ExampleComponent',
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    todos: {
-      type: Array as PropType<Todo[]>,
-      default: () => []
-    },
-    meta: {
-      type: Object as PropType<Meta>,
-      required: true
-    },
-    active: {
-      type: Boolean
-    }
-  },
-  setup (props) {
-    return { ...useClickCount(), ...useDisplayTodo(toRef(props, 'todos')) };
-  },
-});
-</script>

src/components/GoogleOauthComponent.vue

@@ -1,8 +0,0 @@
-<template>
-  <div @click="auth.googleLogin()">Login with Google</div>
-</template>
-
-<script setup lang="ts">
-import { useAuthStore } from 'src/stores/auth';
-const auth = useAuthStore();
-</script>

src/components/LeftDrawer.vue

@@ -4,22 +4,64 @@
     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="showAbout()">
+          <q-item-section avatar><q-icon name="info" /></q-item-section>
+          <q-item-section>About</q-item-section>
+        </q-item>
+        <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,8 +70,18 @@
 
 <script lang="ts" setup>
 import { defineComponent } from 'vue';
-import { links } from 'src/router/navlinks.js';
-import { logout } from 'boot/appwrite';
+import { Dialog } from 'quasar';
+import { enabledLinks } from 'src/router/navlinks.js';
+import { logout } from 'src/boot/appwrite';
+import { APP_VERSION } from 'src/version';
+
+function showAbout() {
+  Dialog.create({
+    title: 'OYS Borrow a Boat',
+    message: `Version ${APP_VERSION}<br>Manage a Borrow a Boat program for a Yacht Club.<br><br>© Oakville Yacht Squadron`,
+    html: true,
+  });
+}
 
 defineProps(['drawer']);
 defineEmits(['drawer-toggle']);

src/components/NewPasswordComponent.vue

@@ -0,0 +1,62 @@
+<template>
+  <q-card-section class="q-ma-sm">
+    <q-input
+      v-model="password"
+      label="New Password"
+      type="password"
+      color="darkblue"
+      :rules="[validatePasswordStrength]"
+      lazy-rules
+      filled></q-input>
+    <q-input
+      v-model="confirmPassword"
+      label="Confirm New Password"
+      type="password"
+      color="darkblue"
+      :rules="[validatePasswordStrength]"
+      lazy-rules
+      filled></q-input>
+    <div class="text-caption q-py-md">Enter a new password.</div>
+  </q-card-section>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+const password = ref('');
+const confirmPassword = ref('');
+
+const newPassword = defineModel();
+
+const validatePasswordStrength = (val: string) => {
+  const hasUpperCase = /[A-Z]/.test(val);
+  const hasLowerCase = /[a-z]/.test(val);
+  const hasNumbers = /[0-9]/.test(val);
+  const hasNonAlphas = /[\W_]/.test(val);
+  const isValidLength = val.length >= 8;
+
+  return (
+    (hasUpperCase &&
+      hasLowerCase &&
+      hasNumbers &&
+      hasNonAlphas &&
+      isValidLength) ||
+    'Password must be at least 8 characters long and include uppercase, lowercase, number, and special character.'
+  );
+};
+
+const validatePasswordsMatch = (val: string) => {
+  return val === password.value || 'Passwords do not match.';
+};
+
+watch([password, confirmPassword], ([newpw, newpw1]) => {
+  if (
+    validatePasswordStrength(newpw) === true &&
+    validatePasswordsMatch(newpw1) === true
+  ) {
+    newPassword.value = newpw;
+  } else {
+    newPassword.value = '';
+  }
+});
+</script>

src/components/ResourceScheduleViewerComponent.vue

@@ -1,3 +1,4 @@
+<!-- This has been abandoned for now.  Going to block-based booking.  Will probably need the schedule viewer functionality at some point in the future, though -->
 <template>
   <q-card-section>
     <div class="text-caption text-justify">
@@ -11,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
@@ -34,8 +34,7 @@
         justify-content: center;
         align-items: center;
         flex-wrap: nowrap;
-      "
-    >
+      ">
       <div style="display: flex; width: 100%">
         <q-calendar-month
           ref="calendar"
@@ -47,19 +46,21 @@
           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"
     resource-key="id"
-    resource-label="name"
-    :interval-start="12"
-    :interval-count="36"
-    :interval-minutes="30"
+    resource-label="displayName"
+    resource-width="32"
+    :interval-start="6"
+    :interval-count="18"
+    :interval-minutes="60"
     cell-width="48"
+    style="--calendar-resources-width: 48px"
     resource-min-height="40"
     animated
     bordered
@@ -70,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">
-        {{ resource.name }}
-        <q-icon v-if="resource.defects" name="warning" color="warning" />
+      <div class="col-12 .col-md-auto">
+        {{ resource.displayName }}
+        <q-icon
+          v-if="resource.defects"
+          name="warning"
+          color="warning" />
       </div>
     </template>
   </q-calendar-resource>
@@ -94,35 +102,49 @@
       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';
 import {
   QCalendarResource,
+  QCalendarMonth,
   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;
+  scope: {
+    timestamp: object;
+    columnindex: number;
+    activeDate: boolean;
+    droppable: boolean;
+  };
+}
 
 const durations = [1, 1.5, 2, 2.5, 3, 3.5, 4];
 
-type ResourceIntervalScope = {
+interface ResourceIntervalScope {
   resource: Boat;
   intervals: [];
   timeStartPosX(start: TimestampOrNull): number;
   timeDurationWidth(duration: number): number;
-};
+}
 
 const statusLookup = {
   confirmed: ['#14539a', 'white'],
@@ -132,8 +154,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(() => {
@@ -148,24 +170,24 @@ const disabledBefore = computed(() => {
 
 function monthFormatter() {
   try {
-    return new Intl.DateTimeFormat('en-CA' || undefined, {
+    return new Intl.DateTimeFormat('en-CA', {
       month: 'long',
       timeZone: 'UTC',
     });
-  } catch (e) {
+  } catch {
     //
   }
 }
 
 function getEvents(scope: ResourceIntervalScope) {
-  const resourceEvents = scheduleStore.getBoatReservations(
-    scope.resource.id,
-    date.extractDate(selectedDate.value, 'YYYY-MM-DD')
+  const resourceEvents = reservationStore.getReservationsByDate(
+    selectedDate.value,
+    scope.resource.$id
   );
 
-  return resourceEvents.map((event) => {
+  return resourceEvents.value.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')
       ),
@@ -179,7 +201,7 @@ function getStyle(event: {
   left: number;
   width: number;
   title: string;
-  status: 'tentative' | 'confirmed' | 'pending';
+  status: StatusTypes;
 }) {
   return {
     position: 'absolute',
@@ -200,26 +222,22 @@ function onPrev() {
 function onNext() {
   calendar.value.next();
 }
-function onClickDate(data) {
-  return;
+
+function onClickDate(data: EventData) {
+  return data;
 }
-function onClickTime(data) {
+
+function onClickTime(data: EventData) {
   // TODO: Add a duration picker, here.
   emit('onClickTime', data);
 }
-function onUpdateDuration(value) {
+function onUpdateDuration(value: EventData) {
   emit('onUpdateDuration', value);
 }
-// eslint-disable-next-line @typescript-eslint/no-empty-function
 const onClickInterval = () => {};
-// eslint-disable-next-line @typescript-eslint/no-empty-function
 const onClickHeadResources = () => {};
-// eslint-disable-next-line @typescript-eslint/no-empty-function
 const onClickResource = () => {};
-// eslint-disable-next-line @typescript-eslint/no-empty-function
 const onResourceExpanded = () => {};
-// eslint-disable-next-line @typescript-eslint/no-empty-function
 const onMoved = () => {};
-// eslint-disable-next-line @typescript-eslint/no-empty-function
 const onChange = () => {};
 </script>

src/components/ToolbarComponent.vue

@@ -7,27 +7,20 @@
         round
         icon="menu"
         aria-label="Menu"
-        @click="toggleLeftDrawer"
-      />
+        @click="$emit('drawer-toggle')" />
 
-      <q-toolbar-title> {{ pageTitle }} </q-toolbar-title>
-      <q-tabs shrink>
-        <q-tab> </q-tab>
-      </q-tabs>
+      <q-toolbar-title>{{ pageTitle }}</q-toolbar-title>
+      <q-space />
+      <div>v{{ APP_VERSION }}</div>
     </q-toolbar>
   </q-header>
-  <LeftDrawer :drawer="leftDrawerOpen" @drawer-toggle="toggleLeftDrawer" />
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import LeftDrawer from 'components/LeftDrawer.vue';
+import { APP_VERSION } from 'src/version';
 
-const leftDrawerOpen = ref(false);
-function toggleLeftDrawer() {
-  leftDrawerOpen.value = !leftDrawerOpen.value;
-}
 defineProps({
   pageTitle: String,
 });
+defineEmits(['drawer-toggle']);
 </script>

src/components/boat/BoatPickerComponent.vue

@@ -8,7 +8,7 @@
   >
     <template v-slot:prepend>
       <q-item-section avatar>
-        <q-img v-if="boat?.iconsrc" :src="boat?.iconsrc" />
+        <q-img v-if="boat?.iconSrc" :src="boat?.iconSrc" />
         <q-icon v-else name="sailing" />
       </q-item-section>
     </template>

src/components/boat/BoatPreviewComponent.vue

@@ -1,23 +1,33 @@
 <template>
-  <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">
-          <div class="col text-h5 text-left">{{ boat.name }}</div>
-          <div class="col text-right">{{ boat.class }}</div>
-        </div>
-      </q-img>
-    </q-card-section>
+  <div
+    v-if="boats"
+    class="row">
+    <q-card
+      v-for="boat in boats"
+      :key="boat.$id"
+      class="q-ma-sm col-xs-12 col-sm-6 col-xl-3">
+      <q-card-section>
+        <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>
+          </div>
+        </q-img>
+      </q-card-section>
 
-    <q-separator />
+      <q-separator />
 
-    <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>
+      <!-- <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>
+  </div>
+  <div v-else><q-card>Sorry, no boats to show you!</q-card></div>
 </template>
 
 <script setup lang="ts">

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>

src/components/scheduling/NavigationBar.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="row justify-center">
+    <div class="q-pa-md q-gutter-sm row">
+      <q-btn no-caps class="button" style="margin: 2px" @click="$emit('today')">
+        Today
+      </q-btn>
+      <q-btn no-caps class="button" style="margin: 2px" @click="$emit('prev')">
+        &lt; Prev
+      </q-btn>
+      <q-btn no-caps class="button" style="margin: 2px" @click="$emit('next')">
+        Next &gt;
+      </q-btn>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineEmits(['today', 'prev', 'next']);
+</script>

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>

src/components/scheduling/boat/BoatScheduleTableComponent.vue

@@ -0,0 +1,275 @@
+<template>
+  <div>
+    <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 getAvailableIntervals(
+                scope.timestamp,
+                boats[scope.columnIndex]
+              ).value"
+              :key="block.$id">
+              <div
+                class="timeblock"
+                :disabled="beforeNow(new Date(block.end))"
+                :class="selectedBlock?.$id === block.$id ? 'selected' : ''"
+                :style="
+                  blockStyles(
+                    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
+              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>
+          </template>
+        </QCalendarDay>
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  QCalendarDay,
+  Timestamp,
+  diffTimestamp,
+  today,
+  parseTimestamp,
+  parseDate,
+  addToDate,
+} from '@quasar/quasar-ui-qcalendar';
+import CalendarHeaderComponent from './CalendarHeaderComponent.vue';
+
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useBoatStore } from 'src/stores/boat';
+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 intervalTemplateStore = useIntervalTemplateStore();
+const reservationStore = useReservationStore();
+const { boats } = storeToRefs(useBoatStore());
+const selectedBlock = defineModel<Interval | null>();
+const selectedDate = ref(today());
+const { getAvailableIntervals } = useIntervalStore();
+const calendar = ref<QCalendarDay | null>(null);
+const now = ref(new Date());
+let intervalId: ReturnType<typeof setInterval> | undefined;
+
+onMounted(async () => {
+  await useBoatStore().fetchBoats();
+  await intervalTemplateStore.fetchIntervalTemplates();
+  intervalId = setInterval(function () {
+    now.value = new Date();
+  }, 60000);
+});
+
+onUnmounted(() => clearInterval(intervalId));
+
+function handleSwipe({ direction }: { direction: string }) {
+  if (direction === 'right') {
+    calendar.value?.prev();
+  } else {
+    calendar.value?.next();
+  }
+}
+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: Interval,
+  timeStartPos: (t: string) => string,
+  timeDurationHeight: (d: number) => string
+) {
+  return genericBlockStyle(
+    parseDate(new Date(block.start)) as Timestamp,
+    parseDate(new Date(block.end)) as Timestamp,
+    timeStartPos,
+    timeDurationHeight
+  );
+}
+
+function getBoatDisplayName(scope: DayBodyScope) {
+  return boats && boats.value[scope.columnIndex]
+    ? boats.value[scope.columnIndex].displayName
+    : '';
+}
+
+function beforeNow(time: Date) {
+  return time < now.value || null;
+}
+
+function genericBlockStyle(
+  start: Timestamp,
+  end: Timestamp,
+  timeStartPos: (t: string) => string,
+  timeDurationHeight: (d: number) => string
+) {
+  const s = {
+    top: '',
+    height: '',
+    opacity: '',
+  };
+  if (timeStartPos && timeDurationHeight) {
+    s.top = timeStartPos(start.time) + 'px';
+    s.height =
+      parseInt(
+        timeDurationHeight(diffTimestamp(start, end, false) / 1000 / 60)
+      ) -
+      1 +
+      'px';
+  }
+  return s;
+}
+
+interface DayBodyScope {
+  columnIndex: number;
+  timeDurationHeight: string;
+  timeStartPos: (time: string, clamp: boolean) => string;
+  timestamp: Timestamp;
+}
+
+function selectBlock(event: MouseEvent, scope: DayBodyScope, block: Interval) {
+  if (scope.timestamp.disabled || new Date(block.end) < new Date())
+    return false;
+  selectedBlock.value = block;
+}
+
+const boatReservations = computed((): Record<string, Reservation[]> => {
+  return reservationStore
+    .getReservationsByDate(selectedDate.value)
+    .value.reduce((result, reservation) => {
+      if (!result[reservation.resource]) result[reservation.resource] = [];
+      result[reservation.resource].push(reservation);
+      return result;
+    }, <Record<string, Reservation[]>>{});
+});
+function getBoatReservations(scope: DayBodyScope): Reservation[] {
+  const boat = boats.value[scope.columnIndex];
+  return boat ? boatReservations.value[boat.$id] : [];
+}
+
+const disabledBefore = computed(() => {
+  const todayTs = parseTimestamp(today()) as Timestamp;
+  return addToDate(todayTs, { day: -1 }).date;
+});
+</script>
+
+<style lang="sass">
+.boat-schedule-table-component
+  display: flex
+  max-height: 60vh
+  max-width: 98vw
+.reservation
+  display: flex
+  position: absolute
+  justify-content: center
+  align-items: center
+  text-align: center
+  width: 100%
+  opacity: 1
+  margin: 0px
+  text-overflow: ellipsis
+  font-size: 0.8em
+  cursor: pointer
+  background: $accent
+  color: white
+  border: 1px solid black
+.timeblock
+  display: flex
+  position: absolute
+  justify-content: center
+  text-align: center
+  align-items: center
+  width: 100%
+  opacity: 0.5
+  margin: 0px
+  text-overflow: ellipsis
+  font-size: 0.8em
+  cursor: pointer
+  background: $primary
+  color: white
+  border: 1px solid black
+.selected
+  opacity: 1 !important
+.q-calendar-day__interval--text
+  font-size: 0.8em
+.q-calendar-day__day.q-current-day
+  padding: 1px
+.q-calendar-day__head--days__column
+  background: $primary
+  color: white
+</style>

src/components/scheduling/boat/CalendarHeaderComponent.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="title-bar" style="display: flex">
+    <button
+      tabindex="0"
+      class="date-button direction-button direction-button__left"
+      @click="onPrev"
+    >
+      <span class="q-calendar__focus-helper" tabindex="-1" />
+    </button>
+    <div class="dates-holder">
+      <div :key="parsedStart?.date" class="internal-dates-holder">
+        <div v-for="day in days" :key="day.date" :style="dayStyle">
+          <button
+            tabindex="0"
+            style="width: 100%"
+            :class="dayClass(day)"
+            @click="selectedDate = day.date"
+          >
+            <span class="q-calendar__focus-helper" tabindex="-1" />
+            <div style="width: 100%; font-size: 0.9em">
+              {{ monthFormatter(day, true) }}
+            </div>
+            <div style="width: 100%; font-size: 1.2em; font-weight: 700">
+              {{ dayFormatter(day, false) }}
+            </div>
+            <div style="width: 100%; font-size: 1em">
+              {{ weekdayFormatter(day, true) }}
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+    <button
+      tabindex="0"
+      class="date-button direction-button direction-button__right"
+      @click="onNext"
+    >
+      <span class="q-calendar__focus-helper" tabindex="-1" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  Timestamp,
+  addToDate,
+  createDayList,
+  createNativeLocaleFormatter,
+  getEndOfWeek,
+  getStartOfWeek,
+  parseTimestamp,
+  today,
+} from '@quasar/quasar-ui-qcalendar';
+
+import { ref, reactive, computed } from 'vue';
+
+const selectedDate = defineModel<string>();
+
+const weekdays = reactive([1, 2, 3, 4, 5, 6, 0]),
+  locale = ref('en-CA'),
+  monthFormatter = monthFormatterFunc(),
+  dayFormatter = dayFormatterFunc(),
+  weekdayFormatter = weekdayFormatterFunc();
+
+const parsedStart = computed(() =>
+  getStartOfWeek(
+    parseTimestamp(selectedDate.value || today()) as Timestamp,
+    weekdays,
+    today2.value as Timestamp
+  )
+);
+
+const parsedEnd = computed(() =>
+  getEndOfWeek(
+    parseTimestamp(selectedDate.value || today()) as Timestamp,
+    weekdays,
+    today2.value as Timestamp
+  )
+);
+
+const today2 = computed(() => {
+  return parseTimestamp(today());
+});
+
+const days = computed(() => {
+  if (parsedStart.value && parsedEnd.value) {
+    return createDayList(
+      parsedStart.value,
+      parsedEnd.value,
+      today2.value as Timestamp,
+      weekdays
+    );
+  }
+  return [];
+});
+
+const dayStyle = computed(() => {
+  const width = 100 / weekdays.length + '%';
+  return {
+    width,
+  };
+});
+
+function onPrev() {
+  const ts = addToDate(parsedStart.value, { day: -7 });
+  selectedDate.value = ts.date;
+}
+
+function onNext() {
+  const ts = addToDate(parsedStart.value, { day: 7 });
+  selectedDate.value = ts.date;
+}
+
+function dayClass(day: Timestamp) {
+  return {
+    'date-button': true,
+    'selected-date-button': selectedDate.value === day.date,
+  };
+}
+
+function monthFormatterFunc() {
+  const longOptions: Intl.DateTimeFormatOptions = {
+    timeZone: 'UTC',
+    month: 'long',
+  };
+  const shortOptions: Intl.DateTimeFormatOptions = {
+    timeZone: 'UTC',
+    month: 'short',
+  };
+
+  return createNativeLocaleFormatter(locale.value, (_tms, short) =>
+    short ? shortOptions : longOptions
+  );
+}
+
+function weekdayFormatterFunc() {
+  const longOptions: Intl.DateTimeFormatOptions = {
+    timeZone: 'UTC',
+    weekday: 'long',
+  };
+  const shortOptions: Intl.DateTimeFormatOptions = {
+    timeZone: 'UTC',
+    weekday: 'short',
+  };
+  return createNativeLocaleFormatter(locale.value, (_tms, short) =>
+    short ? shortOptions : longOptions
+  );
+}
+
+function dayFormatterFunc() {
+  const longOptions: Intl.DateTimeFormatOptions = {
+    timeZone: 'UTC',
+    day: '2-digit',
+  };
+  const shortOptions: Intl.DateTimeFormatOptions = {
+    timeZone: 'UTC',
+    day: 'numeric',
+  };
+
+  return createNativeLocaleFormatter(locale.value, (_tms, short) =>
+    short ? shortOptions : longOptions
+  );
+}
+</script>
+<style lang="sass">
+.title-bar
+  position: relative
+  width: 100%
+  height: 70px
+  background: white
+   display: flex
+   flex-direction: row
+   flex: 1 0 100%
+   justify-content: space-between
+   align-items: center
+  overflow: hidden
+  border-radius: 3px
+  user-select: none
+  margin: 2px 0px 2px
+
+.dates-holder
+  position: relative
+  width: 100%
+  align-items: center
+  display: flex
+  justify-content: space-between
+  color: #fff
+  overflow: hidden
+  user-select: none
+
+.internal-dates-holder
+  position: relative
+  width: 100%
+  display: inline-flex
+  flex: 1 1 100%
+  flex-direction: row
+  justify-content: space-between
+  overflow: hidden
+  user-select: none
+
+.direction-button
+  background: white
+  color: $primary
+  width: 40px
+  max-width: 50px !important
+
+.direction-button__left
+  &:before
+    content: '<'
+    display: inline-flex
+    flex-direction: column
+    justify-content: center
+    height: 100%
+    font-weight: 900
+    font-size: 3em
+
+.direction-button__right
+  &:before
+    content: '>'
+    display: inline-flex
+    flex-direction: column
+    justify-content: center
+    height: 100%
+    font-weight: 900
+    font-size: 3em
+
+.date-button
+  color: $primary
+  background: white
+  z-index: 2
+  height: 100%
+  outline: 0
+  cursor: pointer
+  border-radius: 3px
+  display: inline-flex
+  flex: 1 0 auto
+  flex-direction: column
+  align-items: stretch
+  position: relative
+  border: 0
+  vertical-align: middle
+  padding: 0
+  font-size: 14px
+  line-height: 1.715em
+  text-decoration: none
+  font-weight: 500
+  text-transform: uppercase
+  text-align: center
+  user-select: none
+
+.selected-date-button
+  color: white !important
+  background: $primary !important
+</style>

src/components/task/TaskCardComponent.vue

@@ -0,0 +1,15 @@
+<template>
+  <q-card>
+    <q-item-section>
+      <q-item-label overline>{{ task.title }}</q-item-label>
+      <q-item-label caption lines="2">{{ task.description }} </q-item-label>
+      <q-item-label caption>Due: {{ task.due_date }}</q-item-label>
+    </q-item-section>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import type { Task } from 'src/stores/task';
+
+defineProps<{ task: Task }>();
+</script>

src/components/task/TaskEditComponent.vue

@@ -0,0 +1,266 @@
+<template>
+  <q-form @submit="onSubmit" class="q-gutter-md">
+    <q-input
+      filled
+      v-model="modifiedTask.title"
+      label="Task Title"
+      hint="A short description of the task"
+      lazy-rules
+      :rules="[
+            (val: string | any[]) =>
+              (val && val.length > 0) || 'Please enter a title for the task',
+          ]"
+    />
+    <q-editor
+      filled
+      v-model="modifiedTask.description"
+      label="Detailed Description"
+      hint="A detailed description of the task"
+      lazy-rules
+      placeholder="Enter a detailed description..."
+    />
+
+    <q-input
+      filled
+      v-model="modifiedTask.due_date"
+      mask="date"
+      :rules="[dateRule]"
+      hint="Enter the due date"
+      lazy-rules
+    >
+      <template v-slot:append>
+        <q-icon name="event" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-date
+              v-model="modifiedTask.due_date"
+              @input="updateDateISO"
+              today-btn
+            >
+              <div class="row items-center justify-end">
+                <q-btn v-close-popup label="Close" color="primary" flat />
+              </div>
+            </q-date>
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+    <div>
+      <q-select
+        label="Skills Required"
+        hint="Add a list of required skills, to help people find things in their ability"
+        v-model="modifiedTask.required_skills"
+        use-input
+        use-chips
+        multiple
+        clearable
+        emit-value
+        map-options
+        input-debounce="250"
+        :options="skillTagOptions"
+        option-label="name"
+        option-value="$id"
+        @filter="filterSkillTags"
+      >
+      </q-select>
+    </div>
+    <div>
+      <q-select
+        label="Tags"
+        hint="Add Tags to help with searching"
+        v-model="modifiedTask.tags"
+        use-input
+        use-chips
+        multiple
+        clearable
+        emit-value
+        map-options
+        input-debounce="250"
+        :options="taskTagOptions"
+        option-label="name"
+        option-value="$id"
+        @filter="filterTaskTags"
+      >
+      </q-select>
+    </div>
+    <q-input
+      label="Estimated Duration"
+      v-model.number="modifiedTask.duration"
+      type="number"
+      filled
+      suffix="hrs"
+      style="max-width: 200px"
+    />
+    <q-input
+      label="Number of Required Volunteers"
+      v-model.number="modifiedTask.volunteers_required"
+      type="number"
+      filled
+      style="max-width: 200px"
+    />
+    <q-select
+      label="Status of Task"
+      v-model="modifiedTask.status"
+      :options="TASKSTATUS"
+    >
+    </q-select>
+    <div>
+      <q-select
+        label="Dependencies"
+        hint="Add a list of tasks that need to be complete before this one"
+        v-model="modifiedTask.depends_on"
+        use-input
+        multiple
+        clearable
+        emit-value
+        map-options
+        input-debounce="250"
+        :options="tasks"
+        option-label="title"
+        option-value="$id"
+        @filter="filterTasks"
+      >
+      </q-select>
+    </div>
+    <div>
+      <q-select
+        label="Boat"
+        hint="Add a boat, if applicable"
+        v-model="modifiedTask.boat"
+        use-input
+        clearable
+        emit-value
+        map-options
+        input-debounce="250"
+        :options="boatList"
+        option-label="name"
+        option-value="$id"
+      >
+      </q-select>
+    </div>
+    <div>
+      <q-btn
+        label="Submit"
+        type="submit"
+        color="primary"
+        flat
+        class="q-ml-sm"
+      />
+      <q-btn
+        label="Cancel"
+        color="secondary"
+        flat
+        class="q-ml-sm"
+        @click="$router.go(-1)"
+      />
+    </div>
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref, Ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useTaskStore, TASKSTATUS } from 'src/stores/task';
+import type { TaskTag, SkillTag, Task } from 'src/stores/task';
+import { date } from 'quasar';
+import { useBoatStore } from 'src/stores/boat';
+
+const props = defineProps<{ taskId?: string }>();
+const taskStore = useTaskStore();
+
+const defaultTask = <Task>{
+  description: '',
+  due_date: date.formatDate(Date.now(), 'YYYY-MM-DD'),
+  required_skills: [],
+  title: '',
+  tags: [],
+  duration: 0,
+  volunteers: [],
+  volunteers_required: 0,
+  status: 'ready',
+  depends_on: [],
+};
+
+taskStore.fetchTasks();
+
+const { taskId } = props;
+const targetTask = taskId && taskStore.tasks.find((t) => t.$id === taskId);
+const modifiedTask = reactive(targetTask ? targetTask : defaultTask);
+
+let tasks = taskStore.tasks;
+const boatList = useBoatStore().boats;
+
+const skillTagOptions = ref<SkillTag[]>(taskStore.skillTags);
+const taskTagOptions = ref<TaskTag[]>(taskStore.taskTags);
+
+const filterSkillTags = computed(
+  () =>
+    (val: string, update: (cb: () => void) => void): void => {
+      return filterTags(skillTagOptions, taskStore.skillTags, val, update);
+    }
+);
+const filterTaskTags = computed(
+  () =>
+    (val: string, update: (cb: () => void) => void): void => {
+      return filterTags(taskTagOptions, taskStore.taskTags, val, update);
+    }
+);
+const filterTasks = computed(
+  () =>
+    (val: string, update: (cb: () => void) => void): void => {
+      if (val === '') {
+        update(() => {
+          tasks = taskStore.tasks;
+        });
+        return;
+      }
+
+      update(() => {
+        tasks = taskStore.filterTasksByTitle(val);
+      });
+    }
+);
+
+function filterTags(
+  optionVar: Ref<(SkillTag | TaskTag)[] | undefined>,
+  optionSrc: SkillTag[] | TaskTag[],
+  val: string,
+  update: (cb: () => void) => void
+): void {
+  if (val === '') {
+    update(() => {
+      optionVar.value = optionSrc;
+    });
+    return;
+  }
+
+  update(() => {
+    optionVar.value = optionSrc.filter((v) =>
+      v.name.toLowerCase().includes(val.toLowerCase())
+    );
+  });
+}
+
+// Method to update the model in ISO 8601 format
+const updateDateISO = (value: string) => {
+  modifiedTask.due_date = date.formatDate(value, 'YYYY-MM-DD');
+};
+const dateRule = (val: string) => {
+  // Check if the date is valid using Quasar's date utils if needed
+  // For simplicity, we are directly checking the date string validity
+  return (val && !isNaN(Date.parse(val))) || 'Please enter a valid date';
+};
+const router = useRouter();
+
+async function onSubmit() {
+  try {
+    if (modifiedTask.$id) {
+      await taskStore.updateTask(modifiedTask);
+    } else {
+      await taskStore.addTask(modifiedTask);
+    }
+    router.go(-1);
+  } catch (error) {
+    console.error('Failed to create new Task: ', error);
+  }
+}
+</script>

src/components/task/TaskListComponent.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="q-pa-md" style="max-width: 350px">
+    <q-list>
+      <div v-for="task in tasks" :key="task.$id">
+        <TaskCardComponent :task="task" />
+      </div>
+    </q-list>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Task } from 'src/stores/task';
+import TaskCardComponent from './TaskCardComponent.vue';
+
+defineProps<{ tasks: Task[] }>();
+</script>

src/components/task/TaskTableComponent.vue

@@ -0,0 +1,367 @@
+<template>
+  <div class="q-pa-sm">
+    <q-table
+      :rows="tasks"
+      :columns="columns"
+      :grid="$q.screen.xs"
+      dense
+      row-key="$id"
+      flatten
+      no-data-label="I didn't find anything for you"
+      no-results-label="The filter didn't uncover any results"
+      selection="multiple"
+      v-model:selected="selected"
+      :filter="searchFilter"
+      :filter-method="filterRows"
+    >
+      <template v-slot:top>
+        <q-select
+          style="width: 250px"
+          multiple
+          use-chips
+          clearable
+          label="Skills Filter"
+          input-debounce="250"
+          :options="skillTagOptions"
+          v-model="searchFilter.skillTags"
+          option-label="name"
+          option-value="$id"
+        >
+        </q-select>
+        <q-select
+          style="width: 250px"
+          multiple
+          use-chips
+          clearable
+          label="Tag Filter"
+          input-debounce="250"
+          :options="taskTagOptions"
+          v-model="searchFilter.taskTags"
+          option-label="name"
+          option-value="$id"
+        >
+          <template v-slot: prepend>
+            <q-icon name="wrench"></q-icon>
+          </template>
+        </q-select>
+        <q-space />
+        <q-input
+          flatten
+          debounce="300"
+          color="primary"
+          clearable
+          v-model="searchFilter.title"
+        >
+          <template v-slot:append>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </template>
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th key="desc" auto-width>
+            <q-checkbox dense v-model="props.selected"></q-checkbox>
+          </q-th>
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            {{ col.label }}
+          </q-th>
+        </q-tr>
+      </template>
+
+      <template v-slot:body-cell-skills="props">
+        <q-td :props="props" class="q-gutter-sm">
+          <q-badge
+            v-for="skill in props.value"
+            :key="skill"
+            :color="skill.tagColour"
+            text-color="white"
+            :label="skill.name"
+          />
+        </q-td>
+      </template>
+
+      <template v-slot:body-cell-tags="props">
+        <q-td :props="props" class="q-gutter-sm">
+          <q-badge
+            v-for="tag in props.value"
+            :key="tag"
+            :color="tag.colour"
+            text-color="white"
+            :label="tag.name"
+          />
+        </q-td>
+      </template>
+      <template v-slot:body-cell-actions="props">
+        <q-td :props="props" class="q-gutter-sm">
+          <q-btn
+            label="Sign Up"
+            size="sm"
+            color="primary"
+            :to="{ name: 'signup-task', params: { id: props.value } }"
+          />
+          <q-btn
+            label="Edit"
+            size="sm"
+            color="primary"
+            :to="{ name: 'edit-task', params: { id: props.value } }"
+          />
+        </q-td>
+      </template>
+      <template v-slot:item="props">
+        <div
+          class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+          :style="props.selected ? 'transform: scale(0.95);' : ''"
+        >
+          <q-card
+            bordered
+            flat
+            :class="
+              props.selected
+                ? $q.dark.isActive
+                  ? 'bg-grey-9'
+                  : 'bg-grey-2'
+                : ''
+            "
+          >
+            <q-card-section>
+              <q-checkbox
+                dense
+                v-model="props.selected"
+                :label="props.row.name"
+              />
+            </q-card-section>
+            <q-separator />
+            <q-list dense>
+              <q-item
+                v-for="col in props.cols.filter((col:Boat) => col.name !== 'desc')"
+                :key="col.name"
+              >
+                <q-item-section>
+                  <q-item-label>{{ col.label }}</q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <q-item-label caption v-if="col.name === 'skills'">
+                    <q-chip
+                      size="sm"
+                      v-for="skill in col.value"
+                      outline
+                      color="primary"
+                      :key="skill.$id"
+                      >{{ skill.name }}</q-chip
+                    ></q-item-label
+                  >
+                  <q-item-label caption v-else-if="col.name === 'tags'">
+                    <q-chip
+                      size="sm"
+                      v-for="tag in col.value"
+                      outline
+                      color="primary"
+                      :key="tag.$id"
+                      >{{ tag.name }}</q-chip
+                    ></q-item-label
+                  >
+                  <q-item-label caption v-else-if="col.name === 'actions'">
+                    <q-btn
+                      label="Sign Up"
+                      size="sm"
+                      color="primary"
+                      :to="{ name: 'signup-task', params: { id: col.value } }"
+                    />
+                    <q-btn
+                      label="Edit"
+                      size="sm"
+                      color="primary"
+                      :to="{ name: 'edit-task', params: { id: col.value } }"
+                    />
+                  </q-item-label>
+                  <q-item-label v-else caption>{{ col.value }}</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </template>
+    </q-table>
+    <q-page-sticky position="bottom-right" :offset="[18, 18]">
+      <q-fab
+        v-model="fabShow"
+        vertical-actions-align="right"
+        color="primary"
+        glossy
+        icon="keyboard_arrow_up"
+        direction="up"
+      >
+        <q-fab-action
+          color="primary"
+          :disable="loading"
+          label="New Task"
+          to="/task/edit"
+          icon="add"
+        />
+        <q-fab-action
+          v-if="tasks.length !== 0"
+          class="q-ml-sm"
+          color="primary"
+          :disable="loading"
+          label="Delete task(s)"
+          @click="deleteTasks"
+          icon="delete"
+        /> </q-fab
+    ></q-page-sticky>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useTaskStore, Task, SkillTag, TaskTag } from 'src/stores/task';
+import { QTableProps, date, useQuasar } from 'quasar';
+import { Boat, useBoatStore } from 'src/stores/boat';
+
+const selected = ref([]);
+const loading = ref(false); // Placeholder
+const fabShow = ref(false);
+const columns = <QTableProps['columns']>[
+  {
+    name: 'title',
+    required: true,
+    label: 'Title',
+    align: 'left',
+    field: 'title',
+    sortable: true,
+  },
+  {
+    name: 'due_date',
+    align: 'left',
+    label: 'Due Date',
+    field: 'due_date',
+    format: (val) => date.formatDate(val, 'MMM DD, YYYY'),
+    sortable: true,
+  },
+  {
+    name: 'status',
+    align: 'left',
+    label: 'Status',
+    field: 'status',
+    sortable: true,
+  },
+  {
+    name: 'skills',
+    align: 'left',
+    label: 'Skills',
+    field: (row) =>
+      row.required_skills.map((s: string) => taskStore.getSkillById(s)),
+    sortable: false,
+  },
+  {
+    name: 'tags',
+    align: 'left',
+    label: 'Tags',
+    field: (row) => row.tags.map((s: string) => taskStore.getTaskTagById(s)),
+    sortable: false,
+  },
+  {
+    name: 'boat',
+    align: 'left',
+    label: 'Boat',
+    field: (row) =>
+      useBoatStore().boats.find((boat) => boat.$id === row.boat)?.name,
+    sortable: true,
+  },
+  {
+    name: 'volunteers',
+    align: 'left',
+    label: "People Req'd",
+    field: 'volunteers_required',
+    sortable: false,
+  },
+  {
+    name: 'signedup',
+    align: 'left',
+    label: 'Signed Up',
+    field: (row) => row.volunteers.length,
+    sortable: false,
+  },
+  {
+    name: 'depends',
+    align: 'left',
+    label: 'Dependent Tasks',
+    field: 'depends_on',
+    format: (val) => {
+      return (
+        val
+          .map((t: string) => taskStore.getTaskById(t))
+          .filter((t: Task) => t)
+          .map((t: Task) => t.title)
+          .join(', ') || null
+      );
+    },
+  },
+  { name: 'actions', align: 'center', label: 'Actions', field: '$id' },
+];
+
+defineProps<{ tasks: Task[] }>();
+const taskStore = useTaskStore();
+const $q = useQuasar();
+
+interface SearchObject {
+  title: string;
+  skillTags: SkillTag[];
+  taskTags: TaskTag[];
+}
+
+const searchFilter = ref<SearchObject>({
+  title: '',
+  skillTags: [],
+  taskTags: [],
+});
+
+const skillTagOptions = ref<SkillTag[]>(taskStore.skillTags);
+const taskTagOptions = ref<TaskTag[]>(taskStore.taskTags);
+
+// function onRowClick(evt: Event, row: Task) {
+//   router.push({ name: 'edit-task', params: { id: row.$id } });
+// }
+// TODO: Implement server side search
+const filterRows = computed(
+  () => (rows: readonly Task[], terms: SearchObject) => {
+    return rows
+      .filter((row) =>
+        terms.title
+          ? row.title.toLowerCase().includes(terms.title.toLowerCase())
+          : true
+      )
+      .filter((row) =>
+        terms.skillTags && terms.skillTags.length > 0
+          ? row.required_skills.some((req_skill) =>
+              terms.skillTags.map((t) => t.$id).includes(req_skill)
+            )
+          : true
+      )
+      .filter((row) =>
+        terms.taskTags && terms.taskTags.length > 0
+          ? row.tags.some((tag) =>
+              terms.taskTags.map((t) => t.$id).includes(tag)
+            )
+          : true
+      );
+  }
+);
+
+function deleteTasks() {
+  confirmDelete(selected.value);
+}
+function confirmDelete(tasks: Task[]) {
+  $q.dialog({
+    title: 'Confirm',
+    message:
+      'You are about to delete ' + tasks.length + ' tasks.  Are you sure?',
+    cancel: true,
+    persistent: true,
+  }).onOk(() => {
+    selected.value.map((task: Task) => {
+      taskStore.deleteTask(task);
+      return;
+    });
+  });
+}
+</script>

src/css/app.sass

@@ -1,4 +1,5 @@
 // app global css in SASS form
+@import '@quasar/quasar-ui-qcalendar/dist/index.css'
 .mobile-card
   width: 100%
   max-width: 450px

src/layouts/MainLayout.vue

@@ -1,5 +1,22 @@
 <template>
   <q-layout view="hHh Lpr fFf">
+    <q-header elevated>
+      <q-toolbar>
+        <q-btn
+          flat
+          dense
+          round
+          icon="menu"
+          aria-label="Menu"
+          @click="toggleLeftDrawer" />
+        <q-toolbar-title>{{ route.meta.title as string }}</q-toolbar-title>
+        <q-space />
+        <div>v{{ APP_VERSION }}</div>
+      </q-toolbar>
+    </q-header>
+    <LeftDrawer
+      :drawer="leftDrawerOpen"
+      @drawer-toggle="toggleLeftDrawer" />
     <q-page-container>
       <router-view />
     </q-page-container>
@@ -10,10 +27,19 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
 import { useQuasar } from 'quasar';
+import { useRoute } from 'vue-router';
 import BottomNavComponent from 'src/components/BottomNavComponent.vue';
+import LeftDrawer from 'src/components/LeftDrawer.vue';
+import { APP_VERSION } from 'src/version';
 
 const q = useQuasar();
+const route = useRoute();
+const leftDrawerOpen = ref(false);
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+}
 // q.fullscreen.request();
 q.addressbarColor.set('#14539a');
 </script>

src/pages/BoatPage.vue

@@ -7,9 +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 boats = ref(useBoatStore().boats);
+const boatStore = useBoatStore();
+const { boats } = storeToRefs(boatStore);
+
+onMounted(() => boatStore.fetchBoats());
 </script>

src/pages/IndexPage.vue

@@ -1,10 +1,9 @@
 <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">
       <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 +22,5 @@
 </template>
 
 <script lang="ts" setup>
-import { links } from 'src/router/navlinks.js';
-import ToolbarComponent from 'components/ToolbarComponent.vue';
+import { enabledLinks } from 'src/router/navlinks.js';
 </script>

src/pages/LoginPage.vue

@@ -3,48 +3,53 @@
     <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 @keydown.enter.prevent="doTokenLogin">
+            <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"
+                v-if="userId"
+                v-model="token"
+                label="6-digit code"
+                type="number"
                 color="darkblue"
-                filled
-              ></q-input>
+                filled></q-input>
+            </q-card-section>
+          </q-form>
+          <q-card-section class="q-pa-none">
+            <div class="row justify-center q-ma-sm">
               <q-btn
-                type="submit"
-                @click="login(email, password)"
-                label="Login"
-                color="primary"
-              ></q-btn>
-              <!-- <q-btn
+                v-if="!userId"
                 type="button"
-                @click="register"
+                @click="sendMagicLink"
                 color="secondary"
-                label="Register"
-                flat
-              ></q-btn> -->
-            </q-form>
+                label="Send Magic Link"
+                style="width: 300px" />
+            </div>
+            <div class="row justify-center q-ma-sm">
+              <q-btn
+                type="button"
+                @click="doTokenLogin"
+                color="primary"
+                :label="userId ? 'Login' : 'Send Code'"
+                style="width: 300px" />
+            </div>
           </q-card-section>
-          <q-card-section><GoogleOauthComponent /></q-card-section>
         </q-card>
       </q-page>
     </q-page-container>
@@ -67,10 +72,111 @@
 </style>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { login } from 'boot/appwrite';
-import GoogleOauthComponent from 'src/components/GoogleOauthComponent.vue';
+import { ref, onMounted } from 'vue';
+import { Dialog, Notify } from 'quasar';
+import { useAuthStore } from 'src/stores/auth';
+import { useRouter } from 'vue-router';
+import { AppwriteException } from 'appwrite';
 
 const email = ref('');
-const password = ref('');
+const token = ref('');
+const userId = ref();
+const router = useRouter();
+const authStore = useAuthStore();
+
+onMounted(async () => {
+  const query = router.currentRoute.value.query;
+  if (query.userId && query.secret) {
+    const notification = Notify.create({
+      type: 'primary',
+      position: 'top',
+      spinner: true,
+      message: 'Logging you in...',
+      timeout: 8000,
+      group: false,
+    });
+    try {
+      await authStore.magicURLLogin(query.userId as string, query.secret as string);
+      notification({ type: 'positive', message: 'Logged in!', timeout: 2000, spinner: false, icon: 'check_circle' });
+      router.replace({ name: 'index' });
+    } catch (error: unknown) {
+      notification({ type: 'negative', message: 'Magic link login failed.', timeout: 3000, spinner: false });
+      if (error instanceof AppwriteException) {
+        Dialog.create({ title: 'Login Error', message: error.message, persistent: true });
+      }
+    }
+  }
+});
+
+const sendMagicLink = async () => {
+  if (!email.value) {
+    Dialog.create({ message: 'Please enter your e-mail address.' });
+    return;
+  }
+  try {
+    await authStore.createMagicURLSession(email.value);
+    Dialog.create({ message: 'Check your e-mail for a magic login link.' });
+  } catch {
+    Dialog.create({ message: 'An error occurred. Please ask for help in Discord.' });
+  }
+};
+
+const doTokenLogin = async () => {
+  const authStore = useAuthStore();
+  if (!userId.value) {
+    try {
+      const sessionToken = await authStore.createTokenSession(email.value);
+      userId.value = sessionToken.userId;
+      Dialog.create({ message: 'Check your e-mail for your login code.' });
+    } catch {
+      Dialog.create({
+        message: 'An error occurred.  Please ask for help in Discord',
+      });
+    }
+  } else {
+    const notification = Notify.create({
+      type: 'primary',
+      position: 'top',
+      spinner: true,
+      message: 'Logging you in...',
+      timeout: 8000,
+      group: false,
+    });
+    try {
+      await authStore.tokenLogin(userId.value, token.value);
+      notification({
+        type: 'positive',
+        message: 'Logged in!',
+        timeout: 2000,
+        spinner: false,
+        icon: 'check_circle',
+      });
+      router.replace({ name: 'index' });
+    } catch (error: unknown) {
+      if (error instanceof AppwriteException) {
+        if (error.type === 'user_session_already_exists') {
+          useRouter().replace({ name: 'index' });
+          notification({
+            type: 'positive',
+            message: 'Already Logged in!',
+            timeout: 2000,
+            spinner: false,
+            icon: 'check_circle',
+          });
+          return;
+        }
+        Dialog.create({
+          title: 'Login Error!',
+          message: error.message,
+          persistent: true,
+        });
+      }
+      notification({
+        type: 'negative',
+        message: 'Login failed.',
+        timeout: 2000,
+      });
+    }
+  }
+};
 </script>

src/pages/PrivacyPolicyPage.vue

@@ -1,163 +1,173 @@
 <template>
-  <q-page padding>
-    <h1>Privacy Policy for bab.toal.ca</h1>
+  <q-layout>
+    <q-page-container>
+      <q-page padding>
+        <h1>Privacy Policy for Undock.ca</h1>
 
-    <p>
-      At OYS BAB Test, accessible from https://bab.toal.ca, one of our main
-      priorities is the privacy of our visitors. This Privacy Policy document
-      contains types of information that is collected and recorded by OYS BAB
-      Test and how we use it.
-    </p>
+        <p>
+          At Undock, accessible from https://undock.ca, one of our main
+          priorities is the privacy of our visitors. This Privacy Policy
+          document contains types of information that is collected and recorded
+          by Undock and how we use it.
+        </p>
 
-    <p>
-      If you have additional questions or require more information about our
-      Privacy Policy, do not hesitate to contact us. Our Privacy Policy was
-      generated with the help of
-      <a href="https://www.gdprprivacypolicy.net/"
-        >GDPR Privacy Policy Generator</a
-      >
-    </p>
+        <p>
+          If you have additional questions or require more information about our
+          Privacy Policy, do not hesitate to contact us. Our Privacy Policy was
+          generated with the help of
+          <a href="https://www.gdprprivacypolicy.net/">
+            GDPR Privacy Policy Generator
+          </a>
+        </p>
 
-    <h2>General Data Protection Regulation (GDPR)</h2>
-    <p>We are a Data Controller of your information.</p>
+        <h2>General Data Protection Regulation (GDPR)</h2>
+        <p>We are a Data Controller of your information.</p>
 
-    <p>
-      bab.toal.ca legal basis for collecting and using the personal information
-      described in this Privacy Policy depends on the Personal Information we
-      collect and the specific context in which we collect the information:
-    </p>
-    <ul>
-      <li>bab.toal.ca needs to perform a contract with you</li>
-      <li>You have given bab.toal.ca permission to do so</li>
-      <li>
-        Processing your personal information is in bab.toal.ca legitimate
-        interests
-      </li>
-      <li>bab.toal.ca needs to comply with the law</li>
-    </ul>
+        <p>
+          Undock's legal basis for collecting and using the personal information
+          described in this Privacy Policy depends on the Personal Information
+          we collect and the specific context in which we collect the
+          information:
+        </p>
+        <ul>
+          <li>Undock needs to perform a contract with you</li>
+          <li>You have given Undock permission to do so</li>
+          <li>
+            Processing your personal information is in Undock legitimate
+            interests
+          </li>
+          <li>Undock needs to comply with the law</li>
+        </ul>
 
-    <p>
-      bab.toal.ca will retain your personal information only for as long as is
-      necessary for the purposes set out in this Privacy Policy. We will retain
-      and use your information to the extent necessary to comply with our legal
-      obligations, resolve disputes, and enforce our policies.
-    </p>
+        <p>
+          Undock will retain your personal information only for as long as is
+          necessary for the purposes set out in this Privacy Policy. We will
+          retain and use your information to the extent necessary to comply with
+          our legal obligations, resolve disputes, and enforce our policies.
+        </p>
 
-    <p>
-      If you are a resident of the European Economic Area (EEA), you have
-      certain data protection rights. If you wish to be informed what Personal
-      Information we hold about you and if you want it to be removed from our
-      systems, please contact us.
-    </p>
+        <p>
+          If you are a resident of the European Economic Area (EEA), you have
+          certain data protection rights. If you wish to be informed what
+          Personal Information we hold about you and if you want it to be
+          removed from our systems, please contact us.
+        </p>
 
-    <p>
-      In certain circumstances, you have the following data protection rights:
-    </p>
-    <ul>
-      <li>
-        The right to access, update or to delete the information we have on you.
-      </li>
-      <li>The right of rectification.</li>
-      <li>The right to object.</li>
-      <li>The right of restriction.</li>
-      <li>The right to data portability</li>
-      <li>The right to withdraw consent</li>
-    </ul>
+        <p>
+          In certain circumstances, you have the following data protection
+          rights:
+        </p>
+        <ul>
+          <li>
+            The right to access, update or to delete the information we have on
+            you.
+          </li>
+          <li>The right of rectification.</li>
+          <li>The right to object.</li>
+          <li>The right of restriction.</li>
+          <li>The right to data portability</li>
+          <li>The right to withdraw consent</li>
+        </ul>
 
-    <h2>Log Files</h2>
+        <h2>Log Files</h2>
 
-    <p>
-      OYS BAB Test follows a standard procedure of using log files. These files
-      log visitors when they visit websites. All hosting companies do this and a
-      part of hosting services' analytics. The information collected by log
-      files include internet protocol (IP) addresses, browser type, Internet
-      Service Provider (ISP), date and time stamp, referring/exit pages, and
-      possibly the number of clicks. These are not linked to any information
-      that is personally identifiable. The purpose of the information is for
-      analyzing trends, administering the site, tracking users' movement on the
-      website, and gathering demographic information.
-    </p>
+        <p>
+          Undock follows a standard procedure of using log files. These files
+          log visitors when they visit websites. All hosting companies do this
+          and a part of hosting services' analytics. The information collected
+          by log files include internet protocol (IP) addresses, browser type,
+          Internet Service Provider (ISP), date and time stamp, referring/exit
+          pages, and possibly the number of clicks. These are not linked to any
+          information that is personally identifiable. The purpose of the
+          information is for analyzing trends, administering the site, tracking
+          users' movement on the website, and gathering demographic information.
+        </p>
 
-    <h2>Cookies and Web Beacons</h2>
+        <h2>Cookies and Web Beacons</h2>
 
-    <p>
-      Like any other website, OYS BAB Test uses "cookies". These cookies are
-      used to store information including visitors' preferences, and the pages
-      on the website that the visitor accessed or visited. The information is
-      used to optimize the users' experience by customizing our web page content
-      based on visitors' browser type and/or other information.
-    </p>
+        <p>
+          Like any other website, Undock uses "cookies". These cookies are used
+          to store information including visitors' preferences, and the pages on
+          the website that the visitor accessed or visited. The information is
+          used to optimize the users' experience by customizing our web page
+          content based on visitors' browser type and/or other information.
+        </p>
 
-    <h2>Privacy Policies</h2>
+        <h2>Privacy Policies</h2>
 
-    <P
-      >You may consult this list to find the Privacy Policy for each of the
-      advertising partners of OYS BAB Test.</P
-    >
+        <P>
+          You may consult this list to find the Privacy Policy for each of the
+          advertising partners of Undock.
+        </P>
 
-    <p>
-      Third-party ad servers or ad networks uses technologies like cookies,
-      JavaScript, or Web Beacons that are used in their respective
-      advertisements and links that appear on OYS BAB Test, which are sent
-      directly to users' browser. They automatically receive your IP address
-      when this occurs. These technologies are used to measure the effectiveness
-      of their advertising campaigns and/or to personalize the advertising
-      content that you see on websites that you visit.
-    </p>
+        <p>
+          Third-party ad servers or ad networks uses technologies like cookies,
+          JavaScript, or Web Beacons that are used in their respective
+          advertisements and links that appear on Undock, which are sent
+          directly to users' browser. They automatically receive your IP address
+          when this occurs. These technologies are used to measure the
+          effectiveness of their advertising campaigns and/or to personalize the
+          advertising content that you see on websites that you visit.
+        </p>
 
-    <p>
-      Note that OYS BAB Test has no access to or control over these cookies that
-      are used by third-party advertisers.
-    </p>
+        <p>
+          Note that Undock has no access to or control over these cookies that
+          are used by third-party advertisers.
+        </p>
 
-    <h2>Third Party Privacy Policies</h2>
+        <h2>Third Party Privacy Policies</h2>
 
-    <p>
-      OYS BAB Test's Privacy Policy does not apply to other advertisers or
-      websites. Thus, we are advising you to consult the respective Privacy
-      Policies of these third-party ad servers for more detailed information. It
-      may include their practices and instructions about how to opt-out of
-      certain options.
-    </p>
+        <p>
+          Undock's Privacy Policy does not apply to other advertisers or
+          websites. Thus, we are advising you to consult the respective Privacy
+          Policies of these third-party ad servers for more detailed
+          information. It may include their practices and instructions about how
+          to opt-out of certain options.
+        </p>
 
-    <p>
-      You can choose to disable cookies through your individual browser options.
-      To know more detailed information about cookie management with specific
-      web browsers, it can be found at the browsers' respective websites.
-    </p>
+        <p>
+          You can choose to disable cookies through your individual browser
+          options. To know more detailed information about cookie management
+          with specific web browsers, it can be found at the browsers'
+          respective websites.
+        </p>
 
-    <h2>Children's Information</h2>
+        <h2>Children's Information</h2>
 
-    <p>
-      Another part of our priority is adding protection for children while using
-      the internet. We encourage parents and guardians to observe, participate
-      in, and/or monitor and guide their online activity.
-    </p>
+        <p>
+          Another part of our priority is adding protection for children while
+          using the internet. We encourage parents and guardians to observe,
+          participate in, and/or monitor and guide their online activity.
+        </p>
 
-    <p>
-      OYS BAB Test does not knowingly collect any Personal Identifiable
-      Information from children under the age of 13. If you think that your
-      child provided this kind of information on our website, we strongly
-      encourage you to contact us immediately and we will do our best efforts to
-      promptly remove such information from our records.
-    </p>
+        <p>
+          Undock does not knowingly collect any Personal Identifiable
+          Information from children under the age of 13. If you think that your
+          child provided this kind of information on our website, we strongly
+          encourage you to contact us immediately and we will do our best
+          efforts to promptly remove such information from our records.
+        </p>
 
-    <h2>Online Privacy Policy Only</h2>
+        <h2>Online Privacy Policy Only</h2>
 
-    <p>
-      Our Privacy Policy applies only to our online activities and is valid for
-      visitors to our website with regards to the information that they shared
-      and/or collect in OYS BAB Test. This policy is not applicable to any
-      information collected offline or via channels other than this website.
-    </p>
+        <p>
+          Our Privacy Policy applies only to our online activities and is valid
+          for visitors to our website with regards to the information that they
+          shared and/or collect in Undock. This policy is not applicable to any
+          information collected offline or via channels other than this website.
+        </p>
 
-    <h2>Consent</h2>
+        <h2>Consent</h2>
 
-    <p>
-      By using our website, you hereby consent to our Privacy Policy and agree
-      to its terms.
-    </p>
-  </q-page>
+        <p>
+          By using our website, you hereby consent to our Privacy Policy and
+          agree to its
+          <a href="/terms-of-service">terms</a>
+          .
+        </p>
+      </q-page>
+    </q-page-container>
+  </q-layout>
 </template>
 
 <script setup lang="ts"></script>

src/pages/ProfilePage.vue

@@ -1,39 +1,73 @@
 <template>
-  <toolbar-component pageTitle="Member Profile" />
-  <q-page padding>
-    <q-list bordered>
+  <q-page
+    padding
+    class="row">
+    <q-list class="col-sm-4 col-12">
       <q-separator />
       <q-item>
         <q-item-section avatar>
           <q-avatar icon="person" />
         </q-item-section>
         <q-item-section>
-          Ricky Gervais
           <q-item-label caption>Name</q-item-label>
+          <q-input
+            filled
+            v-model="newName"
+            @keydown.enter.prevent="editName"
+            v-if="newName !== undefined" />
+          <div v-else>
+            {{ authStore.currentUser?.name }}
+          </div>
+        </q-item-section>
+        <q-item-section avatar>
+          <q-btn
+            square
+            @click="editName"
+            :icon="newName !== undefined ? 'check' : 'edit'" />
+          <q-btn
+            v-if="newName !== undefined"
+            square
+            color="negative"
+            @click="newName = undefined"
+            icon="cancel" />
         </q-item-section>
       </q-item>
       <q-item>
         <q-item-section avatar>
-          <q-avatar icon="numbers" />
+          <q-avatar icon="email" />
         </q-item-section>
         <q-item-section>
-          12345
-          <q-item-label caption>Member ID</q-item-label>
+          <q-item-label caption>E-mail</q-item-label>
+          {{ authStore.currentUser?.email }}
         </q-item-section>
       </q-item>
       <q-separator />
       <q-item>
         <q-item-section>
           <q-item-label overline>Certifications</q-item-label>
-          <q-chip square icon="verified" color="primary" text-color="white"
-            >J/27</q-chip
-          >
-          <q-chip square icon="verified" color="green" text-color="white"
-            >Capri25</q-chip
-          >
-          <q-chip square icon="verified" color="grey-8" text-color="white"
-            >Night</q-chip
-          >
+          <div>
+            <q-chip
+              square
+              icon="verified"
+              color="green"
+              text-color="white">
+              J/27
+            </q-chip>
+            <q-chip
+              square
+              icon="verified"
+              color="blue"
+              text-color="white">
+              Capri25
+            </q-chip>
+            <q-chip
+              square
+              icon="verified"
+              color="grey-9"
+              text-color="white">
+              Night
+            </q-chip>
+          </div>
         </q-item-section>
       </q-item>
     </q-list>
@@ -41,5 +75,22 @@
 </template>
 
 <script setup lang="ts">
-import ToolbarComponent from 'src/components/ToolbarComponent.vue';
+import { useAuthStore } from 'src/stores/auth';
+import { ref } from 'vue';
+
+const authStore = useAuthStore();
+const newName = ref();
+
+const editName = async () => {
+  if (newName.value) {
+    try {
+      await authStore.updateName(newName.value);
+      newName.value = undefined;
+    } catch (e) {
+      console.log(e);
+    }
+  } else {
+    newName.value = authStore.currentUser?.name || '';
+  }
+};
 </script>

src/pages/ResetPassword.vue

@@ -0,0 +1,139 @@
+<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-card-actions>
+            </q-card-section>
+          </q-form>
+          <div v-else-if="validResetLink()">
+            <q-form
+              @submit="submitNewPw"
+              @keydown.enter.prevent="resetPw">
+              <NewPasswordComponent v-model="newPassword" />
+              <q-card-actions>
+                <q-btn
+                  type="submit"
+                  label="Reset Password"
+                  color="primary"></q-btn>
+              </q-card-actions>
+            </q-form>
+          </div>
+          <q-card
+            v-else
+            class="text-center">
+            <span class="text-h5">Invalid reset link.</span>
+          </q-card>
+        </q-card>
+      </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 NewPasswordComponent from 'components/NewPasswordComponent.vue';
+
+const email = ref('');
+const router = useRouter();
+const newPassword = ref();
+
+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 isPasswordResetLink() {
+  const query = router.currentRoute.value.query;
+  return query && query.secret && query.userId && query.expire;
+}
+
+function submitNewPw() {
+  const query = router.currentRoute.value.query;
+  if (newPassword.value) {
+    account
+      .updateRecovery(
+        query.userId as string,
+        query.secret as string,
+        newPassword.value
+      )
+      .then(() => {
+        Dialog.create({ message: 'Password Changed!' }).onOk(() =>
+          router.replace('/login')
+        );
+      })
+      .catch((e) =>
+        Dialog.create({
+          message: 'Password change failed!  Error: ' + e.message,
+        })
+      );
+  } else {
+    Dialog.create({
+      message: 'Invalid password.  Try again',
+    });
+  }
+}
+
+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>

src/pages/SignupPage.vue

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

src/pages/TaskPage.vue

@@ -1,26 +0,0 @@
-<template>
-  <toolbar-component pageTitle="Tasks" />
-  <q-page padding>
-    <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>

src/pages/TermsOfServicePage.vue

@@ -1,119 +1,128 @@
 <template>
-  <q-page padding>
-    <h1>Website Terms and Conditions of Use</h1>
+  <q-layout>
+    <q-page-container>
+      <q-page padding>
+        <h1>Website Terms and Conditions of Use</h1>
 
-    <h2>1. Terms</h2>
+        <h2>1. Terms</h2>
 
-    <p>
-      By accessing this Website, accessible from https://bab.toal.ca, you are
-      agreeing to be bound by these Website Terms and Conditions of Use and
-      agree that you are responsible for the agreement with any applicable local
-      laws. If you disagree with any of these terms, you are prohibited from
-      accessing this site. The materials contained in this Website are protected
-      by copyright and trade mark law.
-    </p>
+        <p>
+          By accessing this Website, accessible from https://undock.ca, you are
+          agreeing to be bound by these Website Terms and Conditions of Use and
+          agree that you are responsible for the agreement with any applicable
+          local laws. If you disagree with any of these terms, you are
+          prohibited from accessing this site. The materials contained in this
+          Website are protected by copyright and trade mark law.
+        </p>
 
-    <h2>2. Use License</h2>
+        <h2>2. Use License</h2>
 
-    <p>
-      Permission is granted to temporarily download one copy of the materials on
-      bab.toal.ca's Website for personal, non-commercial transitory viewing
-      only. This is the grant of a license, not a transfer of title, and under
-      this license you may not:
-    </p>
+        <p>
+          Permission is granted to temporarily download one copy of the
+          materials on undock.ca's Website for personal, non-commercial
+          transitory viewing only. This is the grant of a license, not a
+          transfer of title, and under this license you may not:
+        </p>
 
-    <ul>
-      <li>modify or copy the materials;</li>
-      <li>
-        use the materials for any commercial purpose or for any public display;
-      </li>
-      <li>
-        attempt to reverse engineer any software contained on bab.toal.ca's
-        Website;
-      </li>
-      <li>
-        remove any copyright or other proprietary notations from the materials;
-        or
-      </li>
-      <li>
-        transferring the materials to another person or "mirror" the materials
-        on any other server.
-      </li>
-    </ul>
+        <ul>
+          <li>modify or copy the materials;</li>
+          <li>
+            use the materials for any commercial purpose or for any public
+            display;
+          </li>
+          <li>
+            attempt to reverse engineer any software contained on undock.ca's
+            Website;
+          </li>
+          <li>
+            remove any copyright or other proprietary notations from the
+            materials; or
+          </li>
+          <li>
+            transferring the materials to another person or "mirror" the
+            materials on any other server.
+          </li>
+        </ul>
 
-    <p>
-      This will let bab.toal.ca to terminate upon violations of any of these
-      restrictions. Upon termination, your viewing right will also be terminated
-      and you should destroy any downloaded materials in your possession whether
-      it is printed or electronic format. These Terms of Service has been
-      created with the help of the
-      <a href="https://www.termsofservicegenerator.net"
-        >Terms Of Service Generator</a
-      >.
-    </p>
+        <p>
+          This will let undock.ca to terminate upon violations of any of these
+          restrictions. Upon termination, your viewing right will also be
+          terminated and you should destroy any downloaded materials in your
+          possession whether it is printed or electronic format. These Terms of
+          Service has been created with the help of the
+          <a href="https://www.termsofservicegenerator.net">
+            Terms Of Service Generator
+          </a>
+          .
+        </p>
 
-    <h2>3. Disclaimer</h2>
+        <h2>3. Disclaimer</h2>
 
-    <p>
-      All the materials on bab.toal.ca's Website are provided "as is".
-      bab.toal.ca makes no warranties, may it be expressed or implied, therefore
-      negates all other warranties. Furthermore, bab.toal.ca does not make any
-      representations concerning the accuracy or reliability of the use of the
-      materials on its Website or otherwise relating to such materials or any
-      sites linked to this Website.
-    </p>
+        <p>
+          All the materials on undock.ca's Website are provided "as is".
+          undock.ca makes no warranties, may it be expressed or implied,
+          therefore negates all other warranties. Furthermore, undock.ca does
+          not make any representations concerning the accuracy or reliability of
+          the use of the materials on its Website or otherwise relating to such
+          materials or any sites linked to this Website.
+        </p>
 
-    <h2>4. Limitations</h2>
+        <h2>4. Limitations</h2>
 
-    <p>
-      bab.toal.ca or its suppliers will not be hold accountable for any damages
-      that will arise with the use or inability to use the materials on
-      bab.toal.ca's Website, even if bab.toal.ca or an authorize representative
-      of this Website has been notified, orally or written, of the possibility
-      of such damage. Some jurisdiction does not allow limitations on implied
-      warranties or limitations of liability for incidental damages, these
-      limitations may not apply to you.
-    </p>
+        <p>
+          undock.ca or its suppliers will not be hold accountable for any
+          damages that will arise with the use or inability to use the materials
+          on undock.ca's Website, even if bab.toal.ca or an authorize
+          representative of this Website has been notified, orally or written,
+          of the possibility of such damage. Some jurisdiction does not allow
+          limitations on implied warranties or limitations of liability for
+          incidental damages, these limitations may not apply to you.
+        </p>
 
-    <h2>5. Revisions and Errata</h2>
+        <h2>5. Revisions and Errata</h2>
 
-    <p>
-      The materials appearing on bab.toal.ca's Website may include technical,
-      typographical, or photographic errors. bab.toal.ca will not promise that
-      any of the materials in this Website are accurate, complete, or current.
-      bab.toal.ca may change the materials contained on its Website at any time
-      without notice. bab.toal.ca does not make any commitment to update the
-      materials.
-    </p>
+        <p>
+          The materials appearing on undock.ca's Website may include technical,
+          typographical, or photographic errors. undock.ca will not promise that
+          any of the materials in this Website are accurate, complete, or
+          current. undock.ca may change the materials contained on its Website
+          at any time without notice. undock.ca does not make any commitment to
+          update the materials.
+        </p>
 
-    <h2>6. Links</h2>
+        <h2>6. Links</h2>
 
-    <p>
-      bab.toal.ca has not reviewed all of the sites linked to its Website and is
-      not responsible for the contents of any such linked site. The presence of
-      any link does not imply endorsement by bab.toal.ca of the site. The use of
-      any linked website is at the user's own risk.
-    </p>
+        <p>
+          undock.ca has not reviewed all of the sites linked to its Website and
+          is not responsible for the contents of any such linked site. The
+          presence of any link does not imply endorsement by undock.ca of the
+          site. The use of any linked website is at the user's own risk.
+        </p>
 
-    <h2>7. Site Terms of Use Modifications</h2>
+        <h2>7. Site Terms of Use Modifications</h2>
 
-    <p>
-      bab.toal.ca may revise these Terms of Use for its Website at any time
-      without prior notice. By using this Website, you are agreeing to be bound
-      by the current version of these Terms and Conditions of Use.
-    </p>
+        <p>
+          undock.ca may revise these Terms of Use for its Website at any time
+          without prior notice. By using this Website, you are agreeing to be
+          bound by the current version of these Terms and Conditions of Use.
+        </p>
 
-    <h2>8. Your Privacy</h2>
+        <h2>8. Your Privacy</h2>
 
-    <p>Please read our Privacy Policy.</p>
+        <p>
+          Please read our
+          <a href="/privacy-policy">Privacy Policy.</a>
+        </p>
 
-    <h2>9. Governing Law</h2>
+        <h2>9. Governing Law</h2>
 
-    <p>
-      Any claim related to bab.toal.ca's Website shall be governed by the laws
-      of ca without regards to its conflict of law provisions.
-    </p>
-  </q-page>
+        <p>
+          Any claim related to undock.ca's Website shall be governed by the laws
+          of ca without regards to its conflict of law provisions.
+        </p>
+      </q-page>
+    </q-page-container>
+  </q-layout>
 </template>
 
 <script setup lang="ts"></script>

src/pages/admin/TaskAdminPage.vue

@@ -0,0 +1,8 @@
+<template>
+  <q-page padding>
+    <!-- content -->
+  </q-page>
+</template>
+
+<script setup lang="ts">
+</script>

src/pages/schedule/BoatReservationPage.vue

@@ -1,163 +1,29 @@
 <template>
-  <q-page padding>
-    <q-list>
-      <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
-        <q-input
-          bottom-slots
-          v-model="bookingForm.name"
-          label="Creating reservation for"
-          readonly
-        >
-          <template v-slot:prepend>
-            <q-icon name="person" />
-          </template>
-        </q-input>
-        <q-expansion-item
-          expand-separator
-          v-model="resourceView"
-          icon="calendar_month"
-          label="Boat and Time"
-          default-opened
-          :caption="bookingSummary"
-        >
-          <q-separator />
-          <resource-schedule-viewer-component
-            @on-click-time="onClickTime"
-            @on-update-duration="
-              (value) => {
-                bookingForm.duration = value;
-              }
-            "
-          />
-          <q-banner
-            rounded
-            class="bg-warning text-grey-10"
-            v-if="bookingForm.boat?.defects"
-          >
-            <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-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" />
   </q-page>
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, computed, watch } from 'vue';
-import { useAuthStore } from 'src/stores/auth';
-import { Boat, useBoatStore } from 'src/stores/boat';
-import { Dialog, date } from 'quasar';
-import ResourceScheduleViewerComponent from 'src/components/ResourceScheduleViewerComponent.vue';
-import { makeDateTime } from '@quasar/quasar-ui-qcalendar';
-import { useScheduleStore, Reservation } from 'src/stores/schedule';
+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';
 
-const auth = useAuthStore();
-const dateFormat = 'ddd MMM D, YYYY h:mm A';
-const resourceView = ref(true);
-const scheduleStore = useScheduleStore();
-const bookingForm = reactive({
-  bookingId: scheduleStore.getNewId(),
-  name: auth.currentUser?.name,
-  boat: <Boat | undefined>undefined,
-  startDate: date.formatDate(new Date(), dateFormat),
-  endDate: computed(() =>
-    date.formatDate(
-      date.addToDate(bookingForm.startDate, {
-        hours: bookingForm.duration,
-      }),
-      dateFormat
-    )
-  ),
-  duration: 1,
-});
+const $route = useRoute();
+const newReservation = ref<Reservation>();
 
-watch(bookingForm, (b, a) => {
-  const newRes = <Reservation>{
-    id: b.bookingId,
-    user: b.name,
-    resource: b.boat,
-    start: date.extractDate(b.startDate, dateFormat),
-    end: date.extractDate(b.endDate, dateFormat),
-    reservationDate: new Date(),
-    status: 'tentative',
-  };
-  //TODO: Turn this into a validator.
-  scheduleStore.isOverlapped(newRes)
-    ? Dialog.create({ message: 'This booking overlaps another!' })
-    : scheduleStore.addOrCreateReservation(newRes);
-});
-
-const onReset = () => {
-  // TODO
-};
-
-const onSubmit = () => {
-  // TODO
-};
-
-const onClickTime = (data) => {
-  bookingForm.boat = data.scope.resource;
-  bookingForm.startDate = date.formatDate(
-    date.addToDate(makeDateTime(data.scope.timestamp), { hours: 5 }), // A terrible hack to convert back to EST.  TODO: FIX!!!!
-    dateFormat
-  );
-  console.log(bookingForm.startDate);
-};
-const bookingDuration = computed(() => {
-  const diff = date.getDateDiff(
-    bookingForm.endDate,
-    bookingForm.startDate,
-    'minutes'
-  );
-  return diff <= 0
-    ? 'Invalid'
-    : (diff > 60 ? Math.trunc(diff / 60) + ' hours' : '') +
-        (diff % 60 > 0 ? ' ' + (diff % 60) + ' minutes' : '');
-});
-
-const bookingSummary = computed(() => {
-  return bookingForm.boat && bookingForm.startDate && bookingForm.endDate
-    ? `${bookingForm.boat.name} @ ${bookingForm.startDate} for ${bookingDuration.value}`
-    : '';
-});
-
-const limitDate = (startDate: string) => {
-  return date.isBetweenDates(
-    startDate,
-    new Date(),
-    date.addToDate(new Date(), { days: 21 }),
-    { inclusiveFrom: true, inclusiveTo: true, onlyDate: true }
-  );
-};
+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,
+        })
+    );
+}
 </script>

src/pages/schedule/BoatScheduleView.vue

@@ -1,12 +1,167 @@
 <template>
-  <q-page padding>
-    <!-- content -->
+  <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 { useReservationStore } from 'src/stores/reservation';
+import { ref } from 'vue';
+import { useAuthStore } from 'src/stores/auth';
 
-const scheduleStore = useScheduleStore();
-scheduleStore.loadSampleData();
+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 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)
+    .value.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(parsed(event.start)) + 'px';
+//     s.height =
+//       timeDurationHeight(date.getDateDiff(event.end, event.start, 'minutes')) +
+//       'px';
+//   }
+//   return s;
+// }
+
+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 }) {
+  if (event.direction === 'right') {
+    calendar.value?.prev();
+  } else {
+    calendar.value?.next();
+  }
+}
+const boatReservationEvents = (
+  timestamp: Timestamp,
+  resource: Boat | undefined
+): Reservation[] => {
+  if (!resource) return [] as Reservation[];
+  return reservationStore.getReservationsByDate(
+    getDate(timestamp),
+    (resource as Boat).$id
+  ).value;
+};
+function onToday() {
+  calendar.value.moveToToday();
+}
+function onPrev() {
+  calendar.value.prev();
+}
+function onNext() {
+  calendar.value.next();
+}
 </script>
+
+<style lang="sass">
+.q-calendar-scheduler__resource
+  background-color: $primary
+  color: white
+  font-weight: bold
+</style>

src/pages/schedule/ListReservationsPage.vue

@@ -0,0 +1,88 @@
+<template>
+  <q-page>
+  <q-tabs
+    v-model="tab"
+    inline-label
+    class="text-primary">
+    <q-tab
+      name="upcoming"
+      icon="schedule"
+      label="Upcoming" />
+    <q-tab
+      name="past"
+      icon="history"
+      label="Past" />
+  </q-tabs>
+  <q-separator />
+
+  <q-tab-panels
+    v-model="tab"
+    animated>
+    <q-tab-panel
+      name="upcoming"
+      class="q-pa-none">
+      <q-card
+        clas="q-ma-md"
+        v-if="!reservationStore.futureUserReservations.length">
+        <q-card-section>
+          <div class="text-h6">You don't have any upcoming bookings!</div>
+          <div class="text-h8">Why don't you go make one?</div>
+        </q-card-section>
+        <q-card-actions>
+          <q-btn
+            color="primary"
+            icon="event"
+            :size="`1.25em`"
+            label="Book Now"
+            rounded
+            class="full-width"
+            :align="'left'"
+            to="/schedule/book" />
+        </q-card-actions>
+      </q-card>
+      <div v-else>
+        <div
+          v-for="reservation in reservationStore.futureUserReservations"
+          :key="reservation.$id">
+          <ReservationCardComponent :modelValue="reservation" />
+        </div>
+      </div>
+    </q-tab-panel>
+    <q-tab-panel
+      name="past"
+      class="q-pa-none">
+      <div
+        v-for="reservation in reservationStore.pastUserReservations"
+        :key="reservation.$id">
+        <ReservationCardComponent :modelValue="reservation" />
+      </div>
+    </q-tab-panel>
+  </q-tab-panels>
+  </q-page>
+</template>
+<script setup lang="ts">
+import { useReservationStore } from 'src/stores/reservation';
+import ReservationCardComponent from 'src/components/scheduling/ReservationCardComponent.vue';
+import { onMounted, ref } from 'vue';
+
+const reservationStore = useReservationStore();
+
+onMounted(() => useReservationStore().fetchUserReservations());
+
+const tab = ref('upcoming');
+
+// const showMarker = (
+//   index: number,
+//   items: Reservation[] | undefined
+// ): boolean => {
+//   if (!items) return false;
+
+//   const currentItemDate = new Date(items[index].start);
+//   const nextItemDate = index > 0 ? new Date(items[index - 1].start) : null;
+
+//   // Show marker if current item is past and the next item is future or vice versa
+//   return (
+//     isPast(currentItemDate) && (nextItemDate === null || !isPast(nextItemDate))
+//   );
+// };
+</script>

src/pages/schedule/ManageCalendar.vue

@@ -0,0 +1,322 @@
+<template>
+  <div class="fit row">
+    <div class="q-pa-md">
+      <div class="scheduler col-12">
+        <NavigationBar
+          @next="onNext"
+          @today="onToday"
+          @prev="onPrev" />
+        <q-calendar-scheduler
+          ref="calendar"
+          v-model="selectedDate"
+          v-model:model-resources="boats"
+          resource-key="$id"
+          resource-label="name"
+          view="week"
+          :weekdays="[1, 2, 3, 4, 5, 6, 0]"
+          animated
+          bordered
+          :drag-enter-func="onDragEnter"
+          :drag-over-func="onDragOver"
+          :drag-leave-func="onDragLeave"
+          :drop-func="onDrop"
+          day-min-height="50px"
+          cell-width="150px">
+          <template #day="{ scope }">
+            <div
+              v-if="
+                filteredIntervals(scope.timestamp, scope.resource).value.length
+              "
+              style="
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-evenly;
+                align-items: center;
+                font-size: 12px;
+              ">
+              <template
+                v-for="block in sortedIntervals(scope.timestamp, scope.resource)
+                  .value"
+                :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="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-section>
+        </q-item>
+        <q-card-actions align="right">
+          <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 />
+        <IntervalTemplateComponent
+          v-for="template in intervalTemplates"
+          :key="template.$id"
+          :model-value="template" />
+      </q-list>
+    </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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  QCalendarScheduler,
+  Timestamp,
+  today,
+} from '@quasar/quasar-ui-qcalendar';
+import { Boat, useBoatStore } from 'src/stores/boat';
+import { useIntervalStore } from 'src/stores/interval';
+import { computed, onMounted, ref } from 'vue';
+import type {
+  Interval,
+  IntervalTemplate,
+  TimeTuple,
+} from 'src/stores/schedule.types';
+import { date } from 'quasar';
+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 intervalStore = useIntervalStore();
+const intervalTemplateStore = useIntervalTemplateStore();
+const { boats } = storeToRefs(useBoatStore());
+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 intervalTemplateStore.fetchIntervalTemplates();
+});
+
+const filteredIntervals = (date: Timestamp, boat: Boat) => {
+  return intervalStore.getIntervals(date, boat);
+};
+
+const sortedIntervals = (date: Timestamp, boat: Boat) => {
+  return computed(() =>
+    filteredIntervals(date, boat).value.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 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) {
+  if (type === 'day' || type === 'head-day') {
+    e.preventDefault();
+    if (e.target instanceof HTMLDivElement)
+      e.target.classList.add('bg-secondary');
+  }
+}
+
+function onDragOver(e: DragEvent, type: string) {
+  if (type === 'day' || type === 'head-day') {
+    e.preventDefault();
+  }
+}
+
+function onDragLeave(e: DragEvent, type: string) {
+  if (type === 'day' || type === 'head-day') {
+    e.preventDefault();
+    if (e.target instanceof HTMLDivElement)
+      e.target.classList.remove('bg-secondary');
+  }
+}
+
+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 },
+) {
+  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;
+    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.value.concat(
+            intervalsFromTemplate(boat, templateId, date),
+          ),
+        ),
+      )
+      .flat(1);
+    if (overlapped.value.length === 0) {
+      boatsToApply.map((b) => createIntervals(b, templateId, date));
+    } else {
+      alert.value = true;
+    }
+  }
+  if (e.target instanceof HTMLDivElement)
+    e.target.classList.remove('bg-secondary');
+  return false;
+}
+
+function onToday() {
+  calendar.value.moveToToday();
+}
+function onPrev() {
+  calendar.value.prev();
+}
+function onNext() {
+  calendar.value.next();
+}
+</script>

src/pages/schedule/ModifyBoatReservation.vue

@@ -0,0 +1,20 @@
+<template>
+  <q-page>
+    <BoatReservationComponent v-model="reservation" />
+  </q-page>
+</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>

src/pages/schedule/ScheduleIndexPage.vue

@@ -1,27 +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="primary"
+        :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',
-  },
-  { icon: 'calendar_month', to: '/schedule/view', label: 'View Schedule' },
-];
+import { enabledLinks } from 'src/router/navlinks';
+
+const navlinks = enabledLinks.find(
+  (link) => link.name === 'Schedule'
+)?.sublinks;
 </script>

src/pages/schedule/SchedulePageView.vue

@@ -1,8 +1,6 @@
 <template>
-  <toolbar-component pageTitle="Schedule" />
   <router-view />
 </template>
 
 <script setup lang="ts">
-import ToolbarComponent from 'src/components/ToolbarComponent.vue';
 </script>

src/pages/task/TaskEditPage.vue

@@ -0,0 +1,17 @@
+<template>
+  <ToolbarComponent pageTitle="Tasks" />
+  <q-page padding>
+    <div
+      class="q-pa-md"
+      style="max-width: 400px">
+      <TaskEditComponent :taskId="taskId" />
+    </div>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+const taskId = useRoute().params.id as string;
+import ToolbarComponent from 'src/components/ToolbarComponent.vue';
+import TaskEditComponent from 'src/components/task/TaskEditComponent.vue';
+import { useRoute } from 'vue-router';
+</script>

src/pages/task/TaskPage.vue

@@ -0,0 +1,16 @@
+<template>
+  <toolbar-component pageTitle="Tasks" />
+  <q-page padding>
+    <TaskTableComponent :tasks="taskStore.tasks" />
+  </q-page>
+</template>
+
+<script setup lang="ts">
+import { useTaskStore } from 'stores/task';
+import ToolbarComponent from 'src/components/ToolbarComponent.vue';
+import TaskTableComponent from 'src/components/task/TaskTableComponent.vue';
+
+const taskStore = useTaskStore();
+
+taskStore.fetchTasks(); // Fetch on mount
+</script>

src/privacypolicy.html

@@ -1,163 +1,173 @@
 <template>
-  <q-page padding>
-    <h1>Privacy Policy for bab.toal.ca</h1>
+  <q-layout>
+    <q-page-container>
+      <q-page padding>
+        <h1>Privacy Policy for Undock</h1>
 
-    <p>
-      At OYS BAB Test, accessible from https://bab.toal.ca, one of our main
-      priorities is the privacy of our visitors. This Privacy Policy document
-      contains types of information that is collected and recorded by OYS BAB
-      Test and how we use it.
-    </p>
+        <p>
+          At Undock, accessible from https://Undock, one of our main priorities
+          is the privacy of our visitors. This Privacy Policy document contains
+          types of information that is collected and recorded by OYS BAB Test
+          and how we use it.
+        </p>
 
-    <p>
-      If you have additional questions or require more information about our
-      Privacy Policy, do not hesitate to contact us. Our Privacy Policy was
-      generated with the help of
-      <a href="https://www.gdprprivacypolicy.net/"
-        >GDPR Privacy Policy Generator</a
-      >
-    </p>
+        <p>
+          If you have additional questions or require more information about our
+          Privacy Policy, do not hesitate to contact us. Our Privacy Policy was
+          generated with the help of
+          <a href="https://www.gdprprivacypolicy.net/">
+            GDPR Privacy Policy Generator
+          </a>
+        </p>
 
-    <h2>General Data Protection Regulation (GDPR)</h2>
-    <p>We are a Data Controller of your information.</p>
+        <h2>General Data Protection Regulation (GDPR)</h2>
+        <p>We are a Data Controller of your information.</p>
 
-    <p>
-      bab.toal.ca legal basis for collecting and using the personal information
-      described in this Privacy Policy depends on the Personal Information we
-      collect and the specific context in which we collect the information:
-    </p>
-    <ul>
-      <li>bab.toal.ca needs to perform a contract with you</li>
-      <li>You have given bab.toal.ca permission to do so</li>
-      <li>
-        Processing your personal information is in bab.toal.ca legitimate
-        interests
-      </li>
-      <li>bab.toal.ca needs to comply with the law</li>
-    </ul>
+        <p>
+          Undock legal basis for collecting and using the personal information
+          described in this Privacy Policy depends on the Personal Information
+          we collect and the specific context in which we collect the
+          information:
+        </p>
+        <ul>
+          <li>Undock needs to perform a contract with you</li>
+          <li>You have given Undock permission to do so</li>
+          <li>
+            Processing your personal information is in Undock legitimate
+            interests
+          </li>
+          <li>Undock needs to comply with the law</li>
+        </ul>
 
-    <p>
-      bab.toal.ca will retain your personal information only for as long as is
-      necessary for the purposes set out in this Privacy Policy. We will retain
-      and use your information to the extent necessary to comply with our legal
-      obligations, resolve disputes, and enforce our policies.
-    </p>
+        <p>
+          Undock will retain your personal information only for as long as is
+          necessary for the purposes set out in this Privacy Policy. We will
+          retain and use your information to the extent necessary to comply with
+          our legal obligations, resolve disputes, and enforce our policies.
+        </p>
 
-    <p>
-      If you are a resident of the European Economic Area (EEA), you have
-      certain data protection rights. If you wish to be informed what Personal
-      Information we hold about you and if you want it to be removed from our
-      systems, please contact us.
-    </p>
+        <p>
+          If you are a resident of the European Economic Area (EEA), you have
+          certain data protection rights. If you wish to be informed what
+          Personal Information we hold about you and if you want it to be
+          removed from our systems, please contact us.
+        </p>
 
-    <p>
-      In certain circumstances, you have the following data protection rights:
-    </p>
-    <ul>
-      <li>
-        The right to access, update or to delete the information we have on you.
-      </li>
-      <li>The right of rectification.</li>
-      <li>The right to object.</li>
-      <li>The right of restriction.</li>
-      <li>The right to data portability</li>
-      <li>The right to withdraw consent</li>
-    </ul>
+        <p>
+          In certain circumstances, you have the following data protection
+          rights:
+        </p>
+        <ul>
+          <li>
+            The right to access, update or to delete the information we have on
+            you.
+          </li>
+          <li>The right of rectification.</li>
+          <li>The right to object.</li>
+          <li>The right of restriction.</li>
+          <li>The right to data portability</li>
+          <li>The right to withdraw consent</li>
+        </ul>
 
-    <h2>Log Files</h2>
+        <h2>Log Files</h2>
 
-    <p>
-      OYS BAB Test follows a standard procedure of using log files. These files
-      log visitors when they visit websites. All hosting companies do this and a
-      part of hosting services' analytics. The information collected by log
-      files include internet protocol (IP) addresses, browser type, Internet
-      Service Provider (ISP), date and time stamp, referring/exit pages, and
-      possibly the number of clicks. These are not linked to any information
-      that is personally identifiable. The purpose of the information is for
-      analyzing trends, administering the site, tracking users' movement on the
-      website, and gathering demographic information.
-    </p>
+        <p>
+          Undock follows a standard procedure of using log files. These files
+          log visitors when they visit websites. All hosting companies do this
+          and a part of hosting services' analytics. The information collected
+          by log files include internet protocol (IP) addresses, browser type,
+          Internet Service Provider (ISP), date and time stamp, referring/exit
+          pages, and possibly the number of clicks. These are not linked to any
+          information that is personally identifiable. The purpose of the
+          information is for analyzing trends, administering the site, tracking
+          users' movement on the website, and gathering demographic information.
+        </p>
 
-    <h2>Cookies and Web Beacons</h2>
+        <h2>Cookies and Web Beacons</h2>
 
-    <p>
-      Like any other website, OYS BAB Test uses "cookies". These cookies are
-      used to store information including visitors' preferences, and the pages
-      on the website that the visitor accessed or visited. The information is
-      used to optimize the users' experience by customizing our web page content
-      based on visitors' browser type and/or other information.
-    </p>
+        <p>
+          Like any other website, Undock uses "cookies". These cookies are used
+          to store information including visitors' preferences, and the pages on
+          the website that the visitor accessed or visited. The information is
+          used to optimize the users' experience by customizing our web page
+          content based on visitors' browser type and/or other information.
+        </p>
 
-    <h2>Privacy Policies</h2>
+        <h2>Privacy Policies</h2>
 
-    <P
-      >You may consult this list to find the Privacy Policy for each of the
-      advertising partners of OYS BAB Test.</P
-    >
+        <p>
+          You may consult this list to find the Privacy Policy for each of the
+          advertising partners of Undock.
+        </p>
 
-    <p>
-      Third-party ad servers or ad networks uses technologies like cookies,
-      JavaScript, or Web Beacons that are used in their respective
-      advertisements and links that appear on OYS BAB Test, which are sent
-      directly to users' browser. They automatically receive your IP address
-      when this occurs. These technologies are used to measure the effectiveness
-      of their advertising campaigns and/or to personalize the advertising
-      content that you see on websites that you visit.
-    </p>
+        <p>
+          Third-party ad servers or ad networks uses technologies like cookies,
+          JavaScript, or Web Beacons that are used in their respective
+          advertisements and links that appear on Undock, which are sent
+          directly to users' browser. They automatically receive your IP address
+          when this occurs. These technologies are used to measure the
+          effectiveness of their advertising campaigns and/or to personalize the
+          advertising content that you see on websites that you visit.
+        </p>
 
-    <p>
-      Note that OYS BAB Test has no access to or control over these cookies that
-      are used by third-party advertisers.
-    </p>
+        <p>
+          Note that Undock has no access to or control over these cookies that
+          are used by third-party advertisers.
+        </p>
 
-    <h2>Third Party Privacy Policies</h2>
+        <h2>Third Party Privacy Policies</h2>
 
-    <p>
-      OYS BAB Test's Privacy Policy does not apply to other advertisers or
-      websites. Thus, we are advising you to consult the respective Privacy
-      Policies of these third-party ad servers for more detailed information. It
-      may include their practices and instructions about how to opt-out of
-      certain options.
-    </p>
+        <p>
+          Undock's Privacy Policy does not apply to other advertisers or
+          websites. Thus, we are advising you to consult the respective Privacy
+          Policies of these third-party ad servers for more detailed
+          information. It may include their practices and instructions about how
+          to opt-out of certain options.
+        </p>
 
-    <p>
-      You can choose to disable cookies through your individual browser options.
-      To know more detailed information about cookie management with specific
-      web browsers, it can be found at the browsers' respective websites.
-    </p>
+        <p>
+          You can choose to disable cookies through your individual browser
+          options. To know more detailed information about cookie management
+          with specific web browsers, it can be found at the browsers'
+          respective websites.
+        </p>
 
-    <h2>Children's Information</h2>
+        <h2>Children's Information</h2>
 
-    <p>
-      Another part of our priority is adding protection for children while using
-      the internet. We encourage parents and guardians to observe, participate
-      in, and/or monitor and guide their online activity.
-    </p>
+        <p>
+          Another part of our priority is adding protection for children while
+          using the internet. We encourage parents and guardians to observe,
+          participate in, and/or monitor and guide their online activity.
+        </p>
 
-    <p>
-      OYS BAB Test does not knowingly collect any Personal Identifiable
-      Information from children under the age of 13. If you think that your
-      child provided this kind of information on our website, we strongly
-      encourage you to contact us immediately and we will do our best efforts to
-      promptly remove such information from our records.
-    </p>
+        <p>
+          Undock does not knowingly collect any Personal Identifiable
+          Information from children under the age of 13. If you think that your
+          child provided this kind of information on our website, we strongly
+          encourage you to contact us immediately and we will do our best
+          efforts to promptly remove such information from our records.
+        </p>
 
-    <h2>Online Privacy Policy Only</h2>
+        <h2>Online Privacy Policy Only</h2>
 
-    <p>
-      Our Privacy Policy applies only to our online activities and is valid for
-      visitors to our website with regards to the information that they shared
-      and/or collect in OYS BAB Test. This policy is not applicable to any
-      information collected offline or via channels other than this website.
-    </p>
+        <p>
+          Our Privacy Policy applies only to our online activities and is valid
+          for visitors to our website with regards to the information that they
+          shared and/or collect in Undock. This policy is not applicable to any
+          information collected offline or via channels other than this website.
+        </p>
 
-    <h2>Consent</h2>
+        <h2>Consent</h2>
 
-    <p>
-      By using our website, you hereby consent to our Privacy Policy and agree
-      to its terms.
-    </p>
-  </q-page>
+        <p>
+          By using our website, you hereby consent to our Privacy Policy and
+          agree to its terms.
+        </p>
+      </q-page>
+    </q-page-container>
+  </q-layout>
 </template>
 
-<script setup lang="ts"></script>
+<script
+  setup
+  lang="ts"></script>

src/quasar.d.ts

@@ -1,5 +1,3 @@
-/* eslint-disable */
-
 // Forces TS to apply `@quasar/app-vite` augmentations of `quasar` package
 // Removing this would break `quasar/wrappers` imports as those typings are declared
 //  into `@quasar/app-vite`

src/router/index.ts

@@ -1,4 +1,4 @@
-import { route } from 'quasar/wrappers';
+import { defineRouter } from '#q-app/wrappers';
 import {
   createMemoryHistory,
   createRouter,
@@ -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;
@@ -18,7 +22,7 @@ import { useAuthStore } from 'src/stores/auth';
  * with the Router instance.
  */
 
-export default route(function (/* { store, ssrContext } */) {
+export default defineRouter(function (/* { store, ssrContext } */) {
   const createHistory = process.env.SERVER
     ? createMemoryHistory
     : process.env.VUE_ROUTER_MODE === 'history'
@@ -35,17 +39,37 @@ 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.ready) {
-      return false;
+    if (authRequired && !currentUser) {
+      return next('/login');
     }
-    if (auth.currentUser) {
-      return to.meta.accountRoute ? { name: 'index' } : true;
-    } else {
-      return to.name == 'login' ? true : { name: 'login' };
+
+    if (to.name === 'login' && currentUser) {
+      return next('/');
     }
+
+    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;

src/router/navlinks.ts

@@ -1,50 +1,130 @@
-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: true,
   },
   {
     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: '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,
+  },
+  {
+    name: 'Manage',
+    icon: 'tune',
+    enabled: true,
+    requiredRoles: ['Schedule Admins'],
+    color: 'negative',
+    sublinks: [
+      {
+        name: 'Schedule',
+        to: '/schedule/manage',
+        icon: 'edit_calendar',
+        front_links: false,
+        enabled: true,
+        color: 'accent',
+        requiredRoles: ['Schedule Admins'],
+      },
+    ],
   },
 ];
+
+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;
+  });

src/router/routes.ts

@@ -1,24 +1,9 @@
-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 SchedulePageView from 'pages/schedule/SchedulePageView.vue';
-import BoatReservationPageVue from 'src/pages/schedule/BoatReservationPage.vue';
-import BoatScheduleViewVue from 'src/pages/schedule/BoatScheduleView.vue';
 
 const routes: RouteRecordRaw[] = [
   {
     path: '/',
-    component: MainLayoutVue,
+    component: () => import('src/layouts/MainLayout.vue'),
     // If we get so big we need lazy loading, we can use imports again
     // component: () => import('layouts/MainLayout.vue'),
     children: [
@@ -26,69 +11,109 @@ const routes: RouteRecordRaw[] = [
         path: '',
         // If we get so big we need lazy loading, we can use imports again
         // component: () => import('pages/IndexPage.vue'),
-        component: IndexPageVue,
+        component: () => import('src/pages/IndexPage.vue'),
         name: 'index',
+        meta: { title: 'OYS Borrow a Boat' },
       },
       {
         path: '/boat',
-        component: BoatPageVue,
+        component: () => import('src/pages/BoatPage.vue'),
         name: 'boat',
+        meta: { title: 'Boats' },
       },
       {
         path: '/schedule',
-        component: SchedulePageView,
+        component: () => import('pages/schedule/SchedulePageView.vue'),
         name: 'schedule',
+        meta: { title: 'Schedule' },
         children: [
           {
             path: '',
-            component: ScheduleIndexPage,
+            component: () => import('pages/schedule/ScheduleIndexPage.vue'),
             name: 'schedule-index',
           },
           {
             path: 'book',
-            component: BoatReservationPageVue,
+            component: () =>
+              import('src/pages/schedule/BoatReservationPage.vue'),
             name: 'reserve-boat',
           },
           {
             path: 'view',
-            component: BoatScheduleViewVue,
+            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: { requiredRoles: ['Schedule Admins'] },
+          },
         ],
       },
       {
         path: '/certification',
-        component: CertificationPageVue,
+        component: () => import('src/pages/CertificationPage.vue'),
         name: 'certification',
+        meta: { title: 'Certifications' },
       },
       {
         path: '/task',
-        component: TaskPageVue,
         name: 'task',
-      },
-      {
-        path: '/checklist',
-        component: ChecklistPageVue,
-        name: 'checklist',
-      },
-      {
-        path: '/profile',
-        component: ProfilePageVue,
-        name: 'profile',
-      },
-      {
-        path: '/reference',
-        component: ReferencePageVue,
-        name: 'reference',
+        meta: { title: 'Tasks' },
         children: [
           {
             path: '',
-            component: ReferenceIndexPageVue,
+            component: () => import('src/pages/task/TaskPage.vue'),
+            name: 'task-index',
+          },
+          {
+            path: '/:id/edit',
+            component: () => import('pages/task/TaskEditPage.vue'),
+            name: 'edit-task',
+          },
+        ],
+      },
+      {
+        path: '/checklist',
+        component: () => import('pages/ChecklistPage.vue'),
+        name: 'checklist',
+        meta: { title: 'Checklist' },
+      },
+      {
+        path: '/profile',
+        component: () => import('src/pages/ProfilePage.vue'),
+        name: 'profile',
+        meta: { title: 'Member Profile' },
+      },
+      {
+        path: '/reference',
+        component: () => import('src/pages/reference/ReferencePage.vue'),
+        name: 'reference',
+        meta: { title: 'Reference' },
+        children: [
+          {
+            path: '',
+            component: () =>
+              import('src/pages/reference/ReferenceIndexPage.vue'),
             name: 'reference-index',
           },
           {
-            path: '/reference/:id/view',
-            component: ReferenceItemPageVue,
+            path: 'reference/:id/view',
+            component: () =>
+              import('src/pages/reference/ReferenceItemPage.vue'),
           },
         ],
       },
@@ -97,14 +122,15 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/admin',
     component: () => import('layouts/AdminLayout.vue'),
+    meta: { requiredRoles: ['admin'] },
     children: [
       {
-        path: '/user',
+        path: 'user',
         component: () => import('pages/admin/UserAdminPage.vue'),
         name: 'useradmin',
       },
       {
-        path: '/boat',
+        path: 'boat',
         component: () => import('pages/admin/BoatAdminPage.vue'),
         name: 'boatadmin',
       },
@@ -112,12 +138,20 @@ const routes: RouteRecordRaw[] = [
   },
   {
     path: '/login',
-    component: LoginPageVue,
+    component: () => import('pages/LoginPage.vue'),
     name: 'login',
     meta: {
       publicRoute: true,
     },
   },
+  {
+    path: '/pwreset',
+    component: () => import('pages/ResetPassword.vue'),
+    name: 'pwreset',
+    meta: {
+      publicRoute: true,
+    },
+  },
   {
     path: '/terms-of-service',
     component: () => import('pages/TermsOfServicePage.vue'),
@@ -134,14 +168,14 @@ const routes: RouteRecordRaw[] = [
       publicRoute: true,
     },
   },
-  // {
-  //   path: '/register',
-  //   component: () => import('pages/RegisterPage.vue'),
-  //   name: 'register'
-  //   meta: {
-  //    accountRoute: true,
-  //   }
-  // },
+  {
+    path: '/signup',
+    component: () => import('pages/SignupPage.vue'),
+    name: 'signup',
+    meta: {
+      publicRoute: true,
+    },
+  },
   // Always leave this as last one,
   // but you can also remove it
   {

src/stores/auth.ts

@@ -1,41 +1,120 @@
 import { defineStore } from 'pinia';
-import { ID, account } from 'boot/appwrite';
-import type { Models } from 'appwrite';
-import { ref } from 'vue';
+import { ID, account, functions, teams } from 'boot/appwrite';
+import { ExecutionMethod, type Models } from 'appwrite';
+import { computed, ref } from 'vue';
+import { useBoatStore } from './boat';
+import { useReservationStore } from './reservation';
 
 export const useAuthStore = defineStore('auth', () => {
   const currentUser = ref<Models.User<Models.Preferences> | null>(null);
-  const ready = ref(false);
+  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();
+      await useBoatStore().fetchBoats();
+      await useReservationStore().fetchUserReservations();
     } catch {
       currentUser.value = null;
+      currentUserTeams.value = null;
     }
-    ready.value = true;
   }
 
+  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.createEmailSession(email, password);
-    currentUser.value = await account.get();
+    await account.createEmailPasswordSession(email, password);
+    await init();
   }
-  async function googleLogin() {
-    account.createOAuth2Session(
-      'google',
-      'https://bab.toal.ca/',
-      'https://bab.toal.ca/#/login'
+
+  async function createTokenSession(email: string) {
+    return await account.createEmailToken(ID.unique(), email);
+  }
+
+  async function createMagicURLSession(email: string) {
+    return await account.createMagicURLToken(
+      ID.unique(),
+      email,
+      window.location.origin + '/login'
     );
-    currentUser.value = await account.get();
+  }
+
+  async function tokenLogin(userId: string, token: string) {
+    await account.createSession(userId, token);
+    await init();
+  }
+
+  async function magicURLLogin(userId: string, secret: string) {
+    await account.updateMagicURLSession(userId, secret);
+    await init();
+  }
+
+  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 account.deleteSession('current').then(() => { currentUser.value = null; });
   }
 
-  return { currentUser, register, login, googleLogin, logout, init, ready };
+  async function updateName(name: string) {
+    await account.updateName(name);
+    currentUser.value = await account.get();
+  }
+
+  return {
+    currentUser,
+    getUserNameById,
+    hasRequiredRole,
+    register,
+    updateName,
+    login,
+    createTokenSession,
+    createMagicURLSession,
+    tokenLogin,
+    magicURLLogin,
+    logout,
+    init,
+  };
 });

src/stores/boat.ts

@@ -1,21 +1,22 @@
+import { Models } from 'appwrite';
 import { defineStore } from 'pinia';
+import { AppwriteIds, databases } from 'src/boot/appwrite';
+import { ref } from 'vue';
 
 // const boatSource = null;
 
-export interface Boat {
-  id: number;
+export interface Boat extends Models.Document {
+  $id: string;
   name: string;
+  displayName?: string;
   class?: string;
   year?: number;
-  imgsrc?: string;
-  iconsrc?: string;
-  booking?: {
-    available: boolean;
-    requiredCerts: string[];
-    maxDuration: number;
-    maxPassengers: number;
-  };
-  defects?: {
+  imgSrc?: string;
+  iconSrc?: string;
+  bookingAvailable: boolean;
+  requiredCerts: string[];
+  maxPassengers: number;
+  defects: {
     type: string;
     severity: string;
     description: string;
@@ -23,58 +24,25 @@ export interface Boat {
   }[];
 }
 
-const getSampleData = () => [
-  {
-    id: 1,
-    name: 'ProjectX',
-    class: 'J/27',
-    year: 1981,
-    imgsrc: '/tmpimg/j27.png',
-    iconsrc: '/tmpimg/projectx_avatar256.png',
-    defects: [
-      {
-        type: 'engine',
-        severity: 'moderate',
-        description: 'Fuel line leaks at engine fitting.',
-        detail: `The gasket in the end of the fuel hose is damaged, and does not properly seal.
-This will cause fuel to leak, and will allow air into the fuel chamber, causing a lean mixture,
-and rough engine performance.`,
-      },
-      {
-        type: 'rigging',
-        severity: 'moderate',
-        description: 'Tiller extension is broken.',
-        detail:
-          'The tiller extension swivel is broken, and will not attach to the tiller.',
-      },
-    ],
-  },
-  {
-    id: 2,
-    name: 'Take5',
-    class: 'J/27',
-    year: 1985,
-    imgsrc: '/tmpimg/j27.png',
-    iconsrc: '/tmpimg/take5_avatar32.png',
-  },
-  {
-    id: 3,
-    name: 'WeeBeestie',
-    class: 'Capri 25',
-    year: 1989,
-    imgsrc: '/tmpimg/capri25.png',
-  },
-];
+export const useBoatStore = defineStore('boat', () => {
+  const boats = ref<Boat[]>([]);
 
-export const useBoatStore = defineStore('boat', {
-  state: () => ({
-    boats: getSampleData(),
-  }),
+  async function fetchBoats() {
+    try {
+      const response = await databases.listDocuments(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.boat
+      );
+      boats.value = response.documents as unknown as Boat[];
+    } catch (error) {
+      console.error('Failed to fetch boats', error);
+    }
+  }
 
-  getters: {},
+  const getBoatById = (id: string | null | undefined): Boat | null => {
+    if (!id) return null;
+    return boats.value?.find((b) => b.$id === id) || null;
+  };
 
-  actions: {
-    // update () {
-    // }
-  },
+  return { boats, fetchBoats, getBoatById };
 });

src/stores/index.ts

@@ -1,18 +1,5 @@
-import { store } from 'quasar/wrappers';
+import { defineStore } from '#q-app/wrappers';
 import { createPinia } from 'pinia';
-import { Router } from 'vue-router';
-
-/*
- * When adding new properties to stores, you should also
- * extend the `PiniaCustomProperties` interface.
- * @see https://pinia.vuejs.org/core-concepts/plugins.html#typing-new-store-properties
- */
-declare module 'pinia' {
-  export interface PiniaCustomProperties {
-    readonly router: Router;
-  }
-}
-
 /*
  * If not building with SSR mode, you can
  * directly export the Store instantiation;
@@ -22,7 +9,7 @@ declare module 'pinia' {
  * with the Store instance.
  */
 
-export default store((/* { ssrContext } */) => {
+export default defineStore((/* { ssrContext } */) => {
   const pinia = createPinia();
 
   // You can add Pinia plugins here

src/stores/interval.ts

@@ -0,0 +1,161 @@
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+import { Boat } from './boat';
+import { Timestamp, today } from '@quasar/quasar-ui-qcalendar';
+import { Interval } from './schedule.types';
+import { AppwriteIds, databases } from 'src/boot/appwrite';
+import { ID, Query } from 'appwrite';
+import { useReservationStore } from './reservation';
+import { LoadingTypes } from 'src/utils/misc';
+import { useRealtimeStore } from './realtime';
+
+export const useIntervalStore = defineStore('interval', () => {
+  const intervals = ref(new Map<string, Interval>()); // Intervals by DocID
+  const dateStatus = ref(new Map<string, LoadingTypes>()); // State of load by date
+
+  const selectedDate = ref<string>(today());
+
+  const reservationStore = useReservationStore();
+
+  const realtimeStore = useRealtimeStore();
+
+  realtimeStore.register(
+    `databases.${AppwriteIds.databaseId}.collections.${AppwriteIds.collection.interval}.documents`,
+    (response) => {
+      const payload = response.payload as unknown as Interval;
+      if (!payload.$id) return;
+      if (
+        response.events.includes('databases.*.collections.*.documents.*.delete')
+      ) {
+        intervals.value.delete(payload.$id);
+      } else {
+        intervals.value.set(payload.$id, payload);
+      }
+    }
+  );
+
+  const getIntervals = (date: Timestamp | string, boat?: Boat) => {
+    const searchDate = typeof date === 'string' ? date : date.date;
+    const dayStart = new Date(searchDate + 'T00:00');
+    const dayEnd = new Date(searchDate + 'T23:59');
+    if (dateStatus.value.get(searchDate) === undefined) {
+      dateStatus.value.set(searchDate, 'pending');
+      fetchIntervals(searchDate);
+    }
+    return computed(() => {
+      return Array.from(intervals.value.values()).filter((interval) => {
+        const intervalStart = new Date(interval.start);
+        const intervalEnd = new Date(interval.end);
+
+        const isWithinDay = intervalStart < dayEnd && intervalEnd > dayStart;
+        const matchesBoat = boat ? boat.$id === interval.resource : true;
+        return isWithinDay && matchesBoat;
+      });
+    });
+  };
+
+  const getAvailableIntervals = (date: Timestamp | string, boat?: Boat) => {
+    return computed(() =>
+      getIntervals(date, boat).value.filter((interval) => {
+        return !reservationStore.isResourceTimeOverlapped(
+          interval.resource,
+          new Date(interval.start),
+          new Date(interval.end)
+        );
+      })
+    );
+  };
+
+  async function fetchInterval(id: string): Promise<Interval> {
+    return (await databases.getDocument(
+      AppwriteIds.databaseId,
+      AppwriteIds.collection.interval,
+      id
+    )) as Interval;
+  }
+
+  async function fetchIntervals(dateString: string) {
+    try {
+      const response = await databases.listDocuments(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.interval,
+        [
+          Query.greaterThanEqual(
+            'end',
+            new Date(dateString + 'T00:00').toISOString()
+          ),
+          Query.lessThanEqual(
+            'start',
+            new Date(dateString + 'T23:59').toISOString()
+          ),
+          Query.limit(50), // We are asuming that we won't have more than 50 intervals per day.
+        ]
+      );
+      response.documents.forEach((d) =>
+        intervals.value.set(d.$id, d as unknown as Interval)
+      );
+      dateStatus.value.set(dateString, 'loaded');
+      console.info(`Loaded ${response.documents.length} intervals from server`);
+    } catch (error) {
+      console.error('Failed to fetch intervals', error);
+      dateStatus.value.set(dateString, 'error');
+    }
+  }
+
+  const createInterval = async (interval: Interval) => {
+    try {
+      const response = await databases.createDocument(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.interval,
+        ID.unique(),
+        interval
+      );
+      intervals.value.set(response.$id, response as unknown 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 unknown as Interval);
+        console.info(`Saved Interval: ${interval.$id}`);
+      } else {
+        console.error('Update interval called without an ID');
+      }
+    } catch (e) {
+      console.error('Error updating Interval: ' + e);
+    }
+  };
+  const deleteInterval = async (id: string) => {
+    try {
+      await databases.deleteDocument(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.interval,
+        id
+      );
+      intervals.value.delete(id);
+      console.info(`Deleted interval: ${id}`);
+    } catch (e) {
+      console.error('Error deleting Interval: ' + e);
+    }
+  };
+
+  return {
+    getIntervals,
+    getAvailableIntervals,
+    fetchIntervals,
+    fetchInterval,
+    createInterval,
+    updateInterval,
+    deleteInterval,
+    selectedDate,
+    intervals,
+  };
+});

src/stores/intervalTemplate.ts

@@ -0,0 +1,98 @@
+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): IntervalTemplate => {
+        const doc = d as unknown as { timeTuple: string[] } & Models.Document;
+        return {
+          ...doc,
+          timeTuples: arrayToTimeTuples(doc.timeTuple),
+        } as unknown 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 unknown 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 as unknown as { timeTuple: string[] }).timeTuple
+              ),
+            } as unknown as IntervalTemplate)
+      );
+    } catch (e) {
+      console.error('Error updating IntervalTemplate: ' + e);
+    }
+  };
+
+  return {
+    getIntervalTemplates,
+    fetchIntervalTemplates,
+    createIntervalTemplate,
+    deleteIntervalTemplate,
+    updateIntervalTemplate,
+  };
+});

src/stores/realtime.ts

@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia';
+import { client } from 'src/boot/appwrite';
+import { Interval } from './schedule.types';
+import { ref } from 'vue';
+import { RealtimeResponseEvent } from 'appwrite';
+
+export const useRealtimeStore = defineStore('realtime', () => {
+  const subscriptions = ref<Map<string, () => void>>(new Map());
+
+  const register = (
+    channel: string,
+    fn: (response: RealtimeResponseEvent<Interval>) => void
+  ) => {
+    if (subscriptions.value.has(channel)) return; // Already subscribed.  But maybe different callback fn?
+    subscriptions.value.set(channel, client.subscribe(channel, fn));
+  };
+
+  return {
+    register,
+  };
+});

src/stores/reference.ts

@@ -20,33 +20,33 @@ function getSampleData(): ReferenceEntry[] {
       content: `Its hard to imagine that a modern 27 foot sailboat with a classic look, superb
       stability, and easy to manage rig is such a fast boat. 123-126 PHRF. No longer do you
       have to substitute speed for comfort, or own separate boats for racing and cruising. The
-      8\’ long cockpit seats 4 to 5 comfortably. Below deck you can sleep 5. And with head and
+      8’ long cockpit seats 4 to 5 comfortably. Below deck you can sleep 5. And with head and
       stove, the J/27 is the perfect weekend cruiser.
 
-      Fun and Fast. There are some impressive victories to back this up, but that doesn\’t
+      Fun and Fast. There are some impressive victories to back this up, but that doesn’t
       tell the whole story. The J/27 is fun and responsive. Nothing is more exhilarating than
-      popping the J/27\’s kite in a good breeze for a downhill sleigh ride. 15+ knots planing
-      off the wave-tops is easy. And most importantly, this off-wind speed doesn\’t sacrifice
+      popping the J/27’s kite in a good breeze for a downhill sleigh ride. 15+ knots planing
+      off the wave-tops is easy. And most importantly, this off-wind speed doesn’t sacrifice
       upwind performance. Going to windward in the J/27 is a dream, it has the solid, balanced
       "feel" of a traditional keelboat. The J/27 points higher and goes faster than many 30-35
       footers!
 
       One-Design Racing. Even more fun is sailing a one-design race around the buoys. The
-      J/27\’s close-windedness makes it very tactical, as even 5 degree wind shifts bring
-      significant gains. Then off wind, you quickly learn to play gibe angles as the boat\’s
+      J/27’s close-windedness makes it very tactical, as even 5 degree wind shifts bring
+      significant gains. Then off wind, you quickly learn to play gibe angles as the boat’s
       acceleration gains you valuable ground on the competition. The J/27 is remarkably agile
       and responsive in lighter winds, which is unusual for a boat that feels so solid.
 
-      All-Day Comfort. Sailing past larger boats is always satisfying... especially when it\’s
-      effortless and you can\’t be written off as being wet and uncomfortable. Design is the
-      difference. It\’s all done from a cockpit which holds several people more than is possible
+      All-Day Comfort. Sailing past larger boats is always satisfying... especially when it’s
+      effortless and you can’t be written off as being wet and uncomfortable. Design is the
+      difference. It’s all done from a cockpit which holds several people more than is possible
       on other 27-footers. Correctly angled backrests and decks at elbow level provide restful
       and secure seating. Harken mainsheet, vang, traveler, and backstay systems; four Barient
       winches; a beautiful double spreader, tapered, fractional rig spar by Hall . . . make
       control and adjustment easy for crew members no matter what the wind.
 
       Get-away Weekend Cruiser. Take a break from the pace of life on land and spend time with
-      family and friends sailing the J/27. It's a fun boat to sail, so everyone becomes involved.
+      family and friends sailing the J/27. It’s a fun boat to sail, so everyone becomes involved.
 
       The visibility, when steering with a responsive tiller gives the inexperienced that sense
       of control not found when spinning a tiny wheel on small cruisers with large trunk cabins.
@@ -57,14 +57,14 @@ function getSampleData(): ReferenceEntry[] {
       starboard is a comfortable quarter berth. Enough room below for a family of four or a
       couple for a nice weekend romp to your favorite sailing anchorage.
 
-      Durable and Stable. The J/27\’s secure big boat feel is created by concentrating 1530
+      Durable and Stable. The J/27’s secure big boat feel is created by concentrating 1530
       pounds of lead very low in the keel while using high strength to eight ratio laminates
       in the hull. Unidirectional E-glass on either side of pre-sealed Baltek CK57 aircraft
-      grade, Lloyd\’s approved, end grain balsa sandwich construction means superior torsion and
+      grade, Lloyd’s approved, end grain balsa sandwich construction means superior torsion and
       impact resistance. Light ends, low freeboard, and the low center of gravity of a lead keel
       coupled with low wetted surface and a generous sailplan of 362 sq. ft. achieves exceptional
       sail area and stability relative to displacement. Hence, sparkling performance in both
-      light and heavy air...something that doesn\’t happen with iron keels and box-like hulls.
+      light and heavy air...something that doesn’t happen with iron keels and box-like hulls.
 
       Strong Class Strict Rules. The J/27 Class Association, owner driven and over 190 boats
       strong, sail in North American, Midwinter, and Regional championships. A superb J/27 Class
@@ -113,7 +113,7 @@ export const useReferenceStore = defineStore('reference', {
 
   getters: {
     getCategory(state) {
-      (category: string) => {
+      return (category: string) => {
         return state.allItems.filter((c) => c.category === category);
       };
     },

src/stores/reservation.ts

@@ -0,0 +1,285 @@
+import { defineStore } from 'pinia';
+import type { Reservation } from './schedule.types';
+import { ComputedRef, computed, reactive } 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';
+import { useRealtimeStore } from './realtime';
+
+export const useReservationStore = defineStore('reservation', () => {
+  const reservations = reactive<Map<string, Reservation>>(new Map());
+  const datesLoaded = reactive<Record<string, LoadingTypes>>({});
+  const userReservations = reactive<Map<string, Reservation>>(new Map());
+
+  const authStore = useAuthStore();
+  const $q = useQuasar();
+  const realtimeStore = useRealtimeStore();
+
+  realtimeStore.register(
+    `databases.${AppwriteIds.databaseId}.collections.${AppwriteIds.collection.reservation}.documents`,
+    (response) => {
+      const payload = response.payload as unknown as Reservation;
+      if (payload.$id) {
+        if (
+          response.events.includes(
+            'databases.*.collections.*.documents.*.delete'
+          )
+        ) {
+          reservations.delete(payload.$id);
+          userReservations.delete(payload.$id);
+        } else {
+          reservations.set(payload.$id, payload);
+          if (payload.user === authStore.currentUser?.$id)
+            userReservations.set(payload.$id, payload);
+        }
+      }
+    }
+  );
+  // Fetch reservations for a specific date range
+  const fetchReservationsForDateRange = async (
+    start: string = today(),
+    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.set(d.$id, d as unknown 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 unknown as Reservation;
+    } catch (error) {
+      console.error('Failed to fetch reservation: ', error);
+    }
+  };
+
+  const createOrUpdateReservation = async (
+    reservation: Reservation
+  ): Promise<Reservation> => {
+    let response;
+    try {
+      if (reservation.$id) {
+        response = await databases.updateDocument(
+          AppwriteIds.databaseId,
+          AppwriteIds.collection.reservation,
+          reservation.$id,
+          reservation
+        );
+      } else {
+        response = await databases.createDocument(
+          AppwriteIds.databaseId,
+          AppwriteIds.collection.reservation,
+          ID.unique(),
+          reservation
+        );
+      }
+      reservations.set(response.$id, response as unknown as Reservation);
+      userReservations.set(response.$id, response as unknown as Reservation);
+      console.info('Reservation booked: ', response);
+      return response as unknown as Reservation;
+    } catch (e) {
+      console.error('Error creating Reservation: ' + e);
+      throw e;
+    }
+  };
+
+  const deleteReservation = async (
+    reservation: string | Reservation | null | undefined
+  ) => {
+    if (!reservation) return false;
+    const id = typeof reservation === 'string' ? reservation : reservation.$id;
+    if (!id) return false;
+
+    const status = $q.notify({
+      color: 'secondary',
+      textColor: 'white',
+      message: 'Deleting Reservation',
+      spinner: true,
+      closeBtn: 'Dismiss',
+      position: 'top',
+      timeout: 0,
+      group: false,
+    });
+    try {
+      await databases.deleteDocument(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.reservation,
+        id
+      );
+      reservations.delete(id);
+      userReservations.delete(id);
+      console.info(`Deleted reservation: ${id}`);
+      status({
+        color: 'warning',
+        message: 'Reservation Deleted',
+        spinner: false,
+        icon: 'delete',
+        timeout: 4000,
+      });
+    } catch (e) {
+      console.error('Error deleting reservation: ' + e);
+      status({
+        color: 'negative',
+        message: 'Failed to Delete Reservation',
+        spinner: false,
+        icon: 'error',
+      });
+    }
+  };
+
+  // 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[(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[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
+  ): ComputedRef<Reservation[]> => {
+    if (!datesLoaded[searchDate]) {
+      fetchReservationsForDateRange(searchDate);
+    }
+    const dayStart = new Date(searchDate + 'T00:00');
+    const dayEnd = new Date(searchDate + 'T23:59');
+
+    return computed(() => {
+      return Array.from(reservations.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;
+      });
+    });
+  };
+
+  // Get conflicting reservations for a resource within a time range
+  const getConflictingReservations = (
+    resource: string,
+    start: Date,
+    end: Date
+  ): Reservation[] => {
+    return Array.from(reservations.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.set(d.$id, d as unknown as Reservation)
+      );
+    } catch (error) {
+      console.error('Failed to fetch reservations for user: ', error);
+    }
+  };
+
+  const sortedUserReservations = computed((): Reservation[] =>
+    [...userReservations.values()].sort(
+      (a, b) => new Date(b.start).getTime() - new Date(a.start).getTime()
+    )
+  );
+
+  const futureUserReservations = computed((): Reservation[] => {
+    if (!sortedUserReservations.value) return [];
+    return sortedUserReservations.value.filter((b) => !isPast(b.end));
+  });
+
+  const pastUserReservations = computed((): Reservation[] => {
+    if (!sortedUserReservations.value) return [];
+    return sortedUserReservations.value?.filter((b) => isPast(b.end));
+  });
+
+  return {
+    getReservationsByDate,
+    getReservationById,
+    createOrUpdateReservation,
+    deleteReservation,
+    fetchReservationsForDateRange,
+    isReservationOverlapped,
+    isResourceTimeOverlapped,
+    getConflictingReservations,
+    fetchUserReservations,
+    sortedUserReservations,
+    futureUserReservations,
+    pastUserReservations,
+    userReservations,
+  };
+});

src/stores/sampledata/boat.ts

@@ -0,0 +1,65 @@
+export const getSampleData = () => [
+  {
+    $id: '1',
+    name: 'ProjectX',
+    displayName: 'PX',
+    class: 'J/27',
+    year: 1981,
+    imgSrc: '/tmpimg/projectX.jpg',
+    iconSrc: '/tmpimg/projectx_avatar256.png',
+    bookingAvailable: true,
+    maxPassengers: 8,
+    requiredCerts: [],
+    defects: [
+      {
+        type: 'engine',
+        severity: 'moderate',
+        description: 'Fuel line leaks at engine fitting.',
+        detail: `The gasket in the end of the fuel hose is damaged, and does not properly seal.
+This will cause fuel to leak, and will allow air into the fuel chamber, causing a lean mixture,
+and rough engine performance.`,
+      },
+      {
+        type: 'rigging',
+        severity: 'moderate',
+        description: 'Tiller extension is broken.',
+        detail:
+          'The tiller extension swivel is broken, and will not attach to the tiller.',
+      },
+    ],
+  },
+  {
+    $id: '2',
+    name: 'Take5',
+    displayName: 'T5',
+    class: 'J/27',
+    year: 1985,
+    imgSrc: '/tmpimg/j27.png',
+    iconsrc: '/tmpimg/take5_avatar32.png',
+    bookingAvailable: true,
+    maxPassengers: 8,
+    requiredCerts: [],
+  },
+  {
+    $id: '3',
+    name: 'WeeBeestie',
+    displayName: 'WB',
+    class: 'Capri 25',
+    year: 1989,
+    imgSrc: '/tmpimg/capri25.png',
+    bookingAvailable: true,
+    maxPassengers: 6,
+    requiredCerts: [],
+  },
+  {
+    $id: '4',
+    name: 'Just My Imagination',
+    displayName: 'JMI',
+    class: 'Sirius 28',
+    year: 1989,
+    imgSrc: '/tmpimg/JMI.jpg',
+    bookingAvailable: true,
+    maxPassengers: 8,
+    requiredCerts: [],
+  },
+];

src/stores/sampledata/schedule.ts

@@ -0,0 +1,150 @@
+import { DateOptions, date } from 'quasar';
+import { Boat, useBoatStore } from '../boat';
+import {
+  parseTimestamp,
+  today,
+  Timestamp,
+  addToDate,
+} from '@quasar/quasar-ui-qcalendar';
+
+import type {
+  StatusTypes,
+  Reservation,
+  IntervalTemplate,
+  Interval,
+  TimeTuple,
+} from '../schedule.types';
+
+export const templateA: IntervalTemplate = {
+  $id: '1',
+  name: 'WeekdayBlocks',
+  timeTuples: [
+    ['08:00', '12:00'],
+    ['12:00', '16:00'],
+    ['17:00', '21:00'],
+  ],
+};
+
+export const templateB: IntervalTemplate = {
+  $id: '2',
+  name: 'WeekendBlocks',
+  timeTuples: [
+    ['07:00', '10:00'],
+    ['10:00', '13:00'],
+    ['13:00', '16:00'],
+    ['16:00', '19:00'],
+  ],
+};
+
+export function getSampleIntervals(): Interval[] {
+  // Hard-code 30 days worth of blocks, for now.  Make them random templates
+  const boats = useBoatStore().boats;
+  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): Interval[] => {
+          return template.timeTuples.map((t: TimeTuple): Interval => {
+            return {
+              $id: 'id' + Math.random().toString(32).slice(2),
+              resource: b.$id,
+              start: addToDate(tsToday, { day: i }).date + ' ' + t[0],
+              end: addToDate(tsToday, { day: i }).date + ' ' + t[1],
+            };
+          });
+        })
+        .flat(2)
+    );
+  }
+  return result;
+}
+
+export function getSampleReservations(): Reservation[] {
+  const sampleData = [
+    {
+      id: '1',
+      user: 'John Smith',
+      start: '7:00',
+      end: '10:00',
+      boat: '66359729003825946ae1',
+      status: 'confirmed',
+      reason: 'Open Sail',
+    },
+    {
+      id: '2',
+      user: 'Bob Barker',
+      start: '16:00',
+      end: '19:00',
+      boat: '66359729003825946ae1',
+      status: 'confirmed',
+      reason: 'Open Sail',
+    },
+    {
+      id: '3',
+      user: 'Peter Parker',
+      start: '7:00',
+      end: '13:00',
+      boat: '663597030029b71c7a9b',
+      status: 'tentative',
+      reason: 'Open Sail',
+    },
+    {
+      id: '4',
+      user: 'Vince McMahon',
+      start: '10:00',
+      end: '13:00',
+      boat: '663597030029b71c7a9b',
+      status: 'pending',
+      reason: 'Open Sail',
+    },
+    {
+      id: '5',
+      user: 'Heather Graham',
+      start: '13:00',
+      end: '19:00',
+      boat: '663596b9000235ffea55',
+      status: 'confirmed',
+      reason: 'Private Sail',
+    },
+    {
+      id: '6',
+      user: 'Lawrence Fishburne',
+      start: '13:00',
+      end: '16:00',
+      boat: '663596b9000235ffea55',
+      reason: 'Open Sail',
+    },
+  ];
+  const boatStore = useBoatStore();
+  const now = new Date();
+  const splitTime = (x: string): string[] => {
+    return x.split(':');
+  };
+  const makeOpts = (x: string[]): DateOptions => {
+    return {
+      hour: parseInt(x[0]),
+      minute: parseInt(x[1]),
+      seconds: 0,
+      milliseconds: 0,
+    };
+  };
+
+  return sampleData.map((entry): Reservation => {
+    const boat = <Boat>boatStore.boats.find((b) => b.$id == entry.boat);
+    return {
+      $id: entry.id,
+      user: entry.user,
+      start: date
+        .adjustDate(now, makeOpts(splitTime(entry.start)))
+        .toISOString(),
+      end: date.adjustDate(now, makeOpts(splitTime(entry.end))).toISOString(),
+      resource: boat.$id,
+      reason: entry.reason,
+      status: entry.status as StatusTypes,
+      comment: '',
+    };
+  });
+}

src/stores/schedule.ts

@@ -1,140 +0,0 @@
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
-import { Boat, useBoatStore } from './boat';
-import { date } from 'quasar';
-import { DateOptions } from 'quasar';
-
-export interface Reservation {
-  id: number;
-  user: string;
-  start: Date;
-  end: Date;
-  resource: Boat;
-  reservationDate: Date;
-  status?: string;
-}
-
-function getSampleData(): Reservation[] {
-  const sampleData = [
-    {
-      id: 1,
-      user: 'John Smith',
-      start: '12:00',
-      end: '14:00',
-      boat: 1,
-      status: 'confirmed',
-    },
-    {
-      id: 2,
-      user: 'Bob Barker',
-      start: '18:00',
-      end: '20:00',
-      boat: 1,
-      status: 'confirmed',
-    },
-    {
-      id: 3,
-      user: 'Peter Parker',
-      start: '8:00',
-      end: '10:00',
-      boat: 2,
-      status: 'tentative',
-    },
-    {
-      id: 4,
-      user: 'Vince McMahon',
-      start: '13:00',
-      end: '17:00',
-      boat: 2,
-      status: 'pending',
-    },
-    {
-      id: 5,
-      user: 'Heather Graham',
-      start: '06:00',
-      end: '09:00',
-      boat: 3,
-      status: 'confirmed',
-    },
-    {
-      id: 6,
-      user: 'Lawrence Fishburne',
-      start: '18:00',
-      end: '20:00',
-      boat: 3,
-    },
-  ];
-  const boatStore = useBoatStore();
-  const now = new Date();
-  const splitTime = (x: string): string[] => {
-    return x.split(':');
-  };
-  const makeOpts = (x: string[]): DateOptions => {
-    return { hour: parseInt(x[0]), minute: parseInt(x[1]) };
-  };
-
-  return sampleData.map((entry): Reservation => {
-    const boat = <Boat>boatStore.boats.find((b) => b.id == entry.boat);
-    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,
-      reservationDate: now,
-      status: entry.status,
-    };
-  });
-}
-
-export const useScheduleStore = defineStore('schedule', () => {
-  const reservations = ref<Reservation[]>(getSampleData());
-  const getBoatReservations = (
-    boat: number | string,
-    curDate: Date
-  ): Reservation[] => {
-    return reservations.value.filter((x) => {
-      return (
-        (x.start.getDate() == curDate.getDate() ||
-          x.end.getDate() == curDate.getDate()) &&
-        x.resource != undefined &&
-        (typeof boat == 'number'
-          ? x.resource.id == boat
-          : x.resource.name == boat)
-      );
-    });
-  };
-
-  const isOverlapped = (res: Reservation) => {
-    const lapped = reservations.value.filter(
-      (entry: Reservation) =>
-        entry.id != res.id &&
-        entry.resource == res.resource &&
-        ((entry.start <= res.start && entry.end > res.start) ||
-          (entry.end >= res.end && entry.start <= res.end))
-    );
-    return lapped.length > 0;
-  };
-
-  const getNewId = () => {
-    // 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);
-  };
-
-  return {
-    reservations,
-    getBoatReservations,
-    getNewId,
-    addOrCreateReservation,
-    isOverlapped,
-  };
-});

src/stores/schedule.types.ts

@@ -0,0 +1,31 @@
+import { Models } from 'appwrite';
+
+export type StatusTypes = 'tentative' | 'confirmed' | 'pending' | undefined;
+export type Reservation = Interval & {
+  user: string;
+  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.
+   e.g.: Should there be any qcalendar stuff in this store?  Or should we have just JS Date
+   objects in here? */
+
+export type TimeTuple = [start: string, end: string];
+
+export type Interval = Partial<Models.Document> & {
+  resource: string;
+  start: string;
+  end: string;
+  user?: string;
+};
+
+export type IntervalTemplate = Partial<Models.Document> & {
+  name: string;
+  timeTuples: TimeTuple[];
+};

src/stores/store-flag.d.ts

@@ -1,10 +0,0 @@
-/* eslint-disable */
-// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
-//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
-import "quasar/dist/types/feature-flag";
-
-declare module "quasar/dist/types/feature-flag" {
-  interface QuasarFeatureFlags {
-    store: true;
-  }
-}