Added CustomerAccount view

src/App.vue

@@ -3,5 +3,6 @@
   <router-link to="/about">About</router-link>
   <router-link to="/referenceId">Reference ID Tracker</router-link>
   <router-link to="/interactionsFlow">Interactions Flow</router-link>
+  <router-link to="/customerAccount">Customer Account</router-link>
   <router-view></router-view>
 </template>

src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import ReferenSearchByReferenceViewceID from "../views/SearchByReferenceView.vue";
 import InteractionsFlowView from "../views/InteractionsFlowView.vue";
+import CustomerAccountView from "../views/CustomerAccountView.vue";
 
 const routes = [
   {
@@ -28,6 +29,12 @@ const routes = [
     name: "interactionsFlow",
     component: InteractionsFlowView,
   },
+  {
+    path: "/customerAccount/:accountNumber",
+    name: "customerAccount",
+    component: CustomerAccountView,
+    props: true,
+  },
 ];
 
 const router = createRouter({

src/views/CustomerAccountView.vue

@@ -0,0 +1,82 @@
+<script setup>
+defineProps({ accountNumber: { type: String, default: "" } });
+</script>
+<template>
+  <div class="customerAccount">
+    <label for="accountNumber">Account Number:</label>
+    <input
+      id="accountNumber"
+      :value="accountNumber"
+      type="text"
+      name="accountNumber"
+      readonly
+    />
+    <br class="clear" />
+    <label for="planType">Plan Type:</label>
+    <input id="planType" value="Plan 1" type="text" name="planType" readonly />
+    <br class="clear" />
+    <label for="customerName">Customer Name:</label>
+    <input
+      id="customerName"
+      value="Joe Bloggs"
+      type="text"
+      name="customerName"
+      readonly
+    />
+    <br class="clear" />
+    <label for="addressLineOne">Address Line 1:</label>
+    <input
+      id="addressLineOne"
+      value="1 Bloggs Avenue"
+      type="text"
+      name="addressLineOne"
+      readonly
+    />
+    <br class="clear" />
+    <label for="addressLineTwo">Address Line 2:</label>
+    <input
+      id="addressLineTwo"
+      value=""
+      type="text"
+      name="addressLineTwo"
+      readonly
+    />
+    <br class="clear" />
+    <label for="postCode">Postcode:</label>
+    <input id="postCode" value="JB1 1D3" type="text" name="postCode" readonly />
+    <br class="clear" />
+    <label for="city">City:</label>
+    <input id="city" value="Glasgow" type="text" name="city" readonly />
+    <br class="clear" />
+
+    <div class="buttons">
+      <button @click="editAccount">Edit Account</button>
+      <button @click="newAccount">New Account</button>
+    </div>
+  </div>
+</template>
+<style scoped>
+label,
+input,
+select,
+textarea {
+  display: block;
+  width: 200px;
+  float: left;
+  margin-bottom: 1em;
+}
+
+select {
+  width: 205px;
+}
+
+label {
+  text-align: right;
+  width: 100px;
+  padding-right: 2em;
+}
+
+.clear {
+  clear: both;
+}
+</style>