Change interval to 1h. Create StatusTypes

src/components/ResourceScheduleViewerComponent.vue

@@ -57,9 +57,9 @@
     resource-key="id"
     resource-label="displayName"
     resource-width="32"
-    :interval-start="12"
-    :interval-count="36"
-    :interval-minutes="30"
+    :interval-start="6"
+    :interval-count="18"
+    :interval-minutes="60"
     cell-width="48"
     style="--calendar-resources-width: 48px"
     resource-min-height="40"
@@ -115,6 +115,7 @@ import { Boat, useBoatStore } from 'src/stores/boat';
 import { useScheduleStore } from 'src/stores/schedule';
 import { date } from 'quasar';
 import { computed } from 'vue';
+import type { StatusTypes } from 'src/stores/schedule';
 
 const durations = [1, 1.5, 2, 2.5, 3, 3.5, 4];
 
@@ -180,7 +181,7 @@ function getStyle(event: {
   left: number;
   width: number;
   title: string;
-  status: 'tentative' | 'confirmed' | 'pending';
+  status: StatusTypes;
 }) {
   return {
     position: 'absolute',

src/stores/schedule.ts

@@ -4,6 +4,7 @@ import { Boat, useBoatStore } from './boat';
 import { date } from 'quasar';
 import { DateOptions } from 'quasar';
 
+export type StatusTypes = 'tentative' | 'confirmed' | 'pending' | undefined;
 export interface Reservation {
   id: number;
   user: string;
@@ -11,7 +12,7 @@ export interface Reservation {
   end: Date;
   resource: Boat;
   reservationDate: Date;
-  status?: string;
+  status?: StatusTypes;
 }
 
 function getSampleData(): Reservation[] {