Stub out passenger info

src/pages/schedule/BoatReservationPage.vue

@@ -60,7 +60,32 @@
           icon="people"
           label="Crew and Passengers"
           default-opened
-        >
+          ><q-banner v-if="bookingForm.boat"
+            >Passengers:
+            {{ bookingForm.members.length + bookingForm.guests.length }} /
+            {{ bookingForm.boat.booking?.maxPassengers }}</q-banner
+          >
+          <q-item
+            class="q-my-sm"
+            v-for="passenger in [...bookingForm.members, ...bookingForm.guests]"
+            :key="passenger.name"
+          >
+            <q-item-section avatar>
+              <q-avatar color="primary" text-color="white" size="sm">
+                {{
+                  passenger.name
+                    .split(' ')
+                    .map((i) => i.charAt(0))
+                    .join('')
+                    .toUpperCase()
+                }}
+              </q-avatar>
+            </q-item-section>
+            <q-item-section>{{ passenger.name }}</q-item-section>
+            <q-item-section side>
+              <q-btn color="negative" flat dense round icon="cancel" />
+            </q-item-section>
+          </q-item>
           <q-separator />
         </q-expansion-item>
 
@@ -72,7 +97,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, computed, watch } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useAuthStore } from 'src/stores/auth';
 import { Boat, useBoatStore } from 'src/stores/boat';
 import { Dialog, date } from 'quasar';
@@ -86,6 +111,8 @@ interface BookingForm {
   boat?: Boat;
   startDate?: string;
   endDate?: string;
+  members: { name: string }[];
+  guests: { name: string }[];
 }
 
 const auth = useAuthStore();
@@ -99,6 +126,8 @@ const bookingForm = ref<BookingForm>({
   boat: <Boat | undefined>undefined,
   startDate: date.formatDate(new Date(), dateFormat),
   endDate: date.formatDate(new Date(), dateFormat),
+  members: [{ name: 'Karen Henrikso' }, { name: "Rich O'hare" }],
+  guests: [{ name: 'Bob Barker' }, { name: 'Taylor Swift' }],
 });
 
 watch(timeblock, (tb_new) => {