More page mockups

src/pages/ProfilePage.vue

@@ -1,8 +1,45 @@
 <template>
   <q-page padding>
-    <!-- content -->
+    <q-list bordered>
+      <q-toolbar class="bg-primary text-white shadow-3">
+        <q-toolbar-title> Member Profile </q-toolbar-title>
+      </q-toolbar>
+      <q-separator />
+      <q-item>
+        <q-item-section avatar>
+          <q-avatar icon="person" />
+        </q-item-section>
+        <q-item-section>
+          Ricky Gervais
+          <q-item-label caption>Name</q-item-label>
+        </q-item-section>
+      </q-item>
+      <q-item>
+        <q-item-section avatar>
+          <q-avatar icon="numbers" />
+        </q-item-section>
+        <q-item-section>
+          12345
+          <q-item-label caption>Member ID</q-item-label>
+        </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
+          >
+        </q-item-section>
+      </q-item>
+    </q-list>
   </q-page>
 </template>
 
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>

src/stores/boat.ts

@@ -8,6 +8,18 @@ export interface Boat {
   class: string;
   year: number;
   imgsrc: string;
+  booking: {
+    available: boolean;
+    requiredCerts: string[];
+    maxDuration: number;
+    maxPassengers: number;
+  };
+  defects: {
+    type: string;
+    severity: string;
+    description: string;
+    detail: string;
+  }[];
 }
 
 const getSampleData = () => [