Merge fix

src/assets/staticData/maritalStatus.js

+const items = ['ICOP (In Community of Property)', 'OCOP (Out of Community of Property)', 'Other',
+  'Traditional Wedding', 'Single', 'Divorced', 'Widow', 'Committed Relationship', 'Partner',
+];
+export default items;

src/components/misc/address.vue

 <template>
   <!-- eslint-disable max-len -->
-  <div class="reg-page">
+  <div>
+    <br />
     <div class="col-md-12" style="text-align:centre">
       <h4>Address</h4>
       <div class="form-group row"></div>

src/components/shared/bankAccount.vue

 <template>
   <!-- eslint-disable max-len -->
-  <div class="reg-page">
+  <div>
+    <br />
     <div class="col-md-12" style="text-align:centre">
       <h4>Banking Details</h4>
       <div class="form-group row"></div>

src/components/shared/test.vue

-<template>
-  <div>Sataliet!!!!!!!!!!!!!</div>
-</template>
-
-<script>
-export default {
-  name: 'nasa',
-};
-</script>

src/components/timeshare/resort/resortPage.vue

               accept-charset="UTF-8"
               enctype="multipart/form-data"
             >
-              <div class="form-group">
-                <select class="form-control" name="region" id="region">
-                  <option value>Region</option>
-                </select>
-              </div>
-              <div class="form-group">
-                <select class="form-control" id="resort" name="resort">
-                  <option value>Resort</option>
-                </select>
-              </div>
               <div class="form-group">
                 <select class="form-control" name="season">
                   <option value>
 
               <button class="btn btn-b-n" type="submit">Search</button>
             </form>
-            <div class="col-md-12 blue-bg p-2 p-md-4">
-              <h3>Facilities</h3>
-              <ul>
-                <li v-for="(item, i) in resort.prUnitFacilities.split('\n')" :key="i">{{item}}</li>
-              </ul>
-            </div>
           </div>
           <div class="col-md-9">
             <WeekList :resortCode="resortCode" />
               </div>
             </div>
             <div class="row">
-              <div class="col-md-12 mb-4">
+              <div class="col-md-10 mb-4">
                 <ul class="nav nav-tabs" id="myTab" role="tablist">
                   <li class="nav-item">
                     <a

src/components/timeshare/resort/unitPage.vue

     <section class="intro-single">
       <div class="container">
         <div class="row">
+          <div class="row mb-4">
+            <div class="col-md-4">
+              <img class="img-fluid" :src="image1" alt="Resort Image" />
+            </div>
+            <div class="col-md-4">
+              <img class="img-fluid" :src="image2" alt="Resort Image" />
+            </div>
+            <div class="col-md-4">
+              <img class="img-fluid" :src="image3" alt="Resort Image" />
+            </div>
+          </div>
           <div class="col-md-12 col-lg-8">
             <div class="title-single-box">
               <h1 class="title-single" style="text-align:left;">{{resort.prName}}</h1>
         </div>
       </div>
     </section>
-    <div class="container">
+    <div class="container" style="text-align:left;">
       <div class="row mb-4">
         <div class="col-md-6">
           <p>{{description}}</p>
+          <div>
+            <h5>Facilities</h5>
+            <ul>
+              <li v-for="(item, i) in resort.prUnitFacilities.split('\n')" :key="i">{{item}}</li>
+            </ul>
+          </div>
         </div>
         <div class="col-md-6">
           <form
             enctype="multipart/form-data"
           >
             <div class="form-row">
-              <div class="col-md-6">
+              <div class="col-md-3">
                 <label for="resortunit">Unit</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  id="resort"
-                  name="resortunit"
-                  :value="week.unit"
-                  disabled
-                />
+                <div class="input-group mb-3">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text" style="color: #60CBEB">
+                      <b>U#</b>
+                    </span>
+                  </div>
+                  <input
+                    class="form-control"
+                    type="text"
+                    id="resort"
+                    name="resortunit"
+                    :value="week.unit"
+                    disabled
+                  />
+                </div>
               </div>
-              <div class="col-md-6">
+              <div class="col-md-3">
                 <label for="resortWeek">Week</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  id="week"
-                  name="resortWeek"
-                  :value="week.week"
-                  disabled
-                />
+                <div class="input-group mb-3">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text" style="color: #60CBEB">
+                      <b>W#</b>
+                    </span>
+                  </div>
+                  <input
+                    class="form-control"
+                    type="text"
+                    id="week"
+                    name="resortWeek"
+                    :value="week.week"
+                    disabled
+                  />
+                </div>
               </div>
-            </div>
-            <br />
-            <div class="form-row">
-              <div class="col-md-6">
-                <label for="resortModule">Module</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  id="module"
-                  name="resortModule"
-                  :value="week.module"
-                  disabled
-                />
+
+              <div class="form-row">
+                <div class="col-md-9">
+                  <label for="resortModule">Module</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>M</b>
+                      </span>
+                    </div>
+                    <input
+                      class="form-control"
+                      type="text"
+                      id="module"
+                      name="resortModule"
+                      :value="week.module"
+                      disabled
+                    />
+                  </div>
+                </div>
               </div>
-              <div class="col-md-6">
+              <div class="col-md-5">
                 <label for="price">Price</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="price"
-                  id="price"
-                  :value="'R ' + week.price"
-                  disabled
-                />
-              </div>
-            </div>
-            <br />
-            <div class="form-row">
-              <div class="col-md-6">
-                <label for="resortModule">Current Year Levy</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  id="levy"
-                  name="levy"
-                  :value="'R ' + week.currentLevy"
-                  disabled
-                />
-              </div>
-            </div>
-            <br />
-            <div class="form-row">
-              <div class="col-md-12">
-                <input class="form-control" type="text" name="name" placeholder="Name" />
+                <div class="input-group mb-3">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text" style="color: #60CBEB">
+                      <b>R</b>
+                    </span>
+                  </div>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="price"
+                    id="price"
+                    :value="week.price"
+                    disabled
+                  />
+                </div>
               </div>
-            </div>
-            <br />
-            <div class="form-row">
-              <div class="col-md-12">
-                <input
-                  class="form-control"
-                  type="number"
-                  name="mobile"
-                  placeholder="Contact Number"
-                />
+              <div class="col-md-5">
+                <label for="resortModule">Current Levy</label>
+                <div class="input-group mb-3">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text" style="color: #60CBEB">
+                      <b>R</b>
+                    </span>
+                  </div>
+                  <input
+                    class="form-control"
+                    type="text"
+                    id="levy"
+                    name="levy"
+                    :value="week.currentLevy"
+                    disabled
+                  />
+                </div>
               </div>
             </div>
             <br />
             <div class="form-row">
-              <div class="col-md-12">
-                <input class="form-control" type="email" name="email" placeholder="Email" />
+              <div>
+                <div class="input-group mb-3">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text">
+                      <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
+                    </span>
+                    <input class="form-control" type="text" name="name" placeholder="Name" />
+                  </div>
+                </div>
+                <div class="input-group mb-3">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text">
+                      <eva-icon name="phone-outline" fill="#60CBEB"></eva-icon>
+                    </span>
+                    <input
+                      class="form-control"
+                      type="number"
+                      name="mobile"
+                      placeholder="Contact Number"
+                    />
+                  </div>
+                </div>
+                <div class="input-group mb-3">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text">
+                      <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
+                    </span>
+                    <input class="form-control" type="email" name="email" placeholder="Email" />
+                  </div>
+                </div>
               </div>
             </div>
-            <br />
+          </form>
+          <br />
 
-            <button class="btn btn-b-c even-width mr-auto" type="submit">Enquire Now</button>
+          <button class="btn btn-b-c even-width mr-auto" type="submit">Enquire Now</button>
 
-            <!-- <a
+          <!-- <a
               class="btn btn-b-n even-width mr-auto"
               href="/share-transfer-initiation-for-purchaser/"
-            >Make an Offer</a>-->
-            <button
-              type="button"
-              class="btn btn-b-n even-width mr-auto"
-              data-toggle="modal"
-              data-target="#myModal"
-            >Make an Offer</button>
-            <div id="myModal" class="modal fade" role="dialog">
-              <div class="modal-dialog modal-lg">
-                <!-- Modal content-->
-                <div class="modal-content">
-                  <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal">&times;</button>
-                  </div>
-                  <div padding-left="20px">
-                    <makeOffer
-                      name="MakeOffer"
-                      :isMakeOffer="true"
-                      :isProperty="false"
-                      :item="{resort: resort.prName, unit: week.unit, week: week.week, module: week.module, price: week.price}"
-                    />
-                  </div>
+          >Make an Offer</a>-->
+          <button
+            type="button"
+            class="btn btn-b-n even-width mr-auto"
+            data-toggle="modal"
+            data-target="#myModal"
+          >Make an Offer</button>
+          <div id="myModal" class="modal fade" role="dialog">
+            <div class="modal-dialog modal-lg">
+              <!-- Modal content-->
+              <div class="modal-content">
+                <div class="modal-header">
+                  <button type="button" class="close" data-dismiss="modal">&times;</button>
+                </div>
+                <div padding-left="20px">
+                  <makeOffer
+                    name="MakeOffer"
+                    :isMakeOffer="true"
+                    :isProperty="false"
+                    :item="{resort: resort.prName, unit: week.unit, week: week.week, module: week.module, price: week.price}"
+                  />
                 </div>
               </div>
             </div>
+          </div>
 
-            <a class="btn btn-b-c even-width mr-auto" href="javascript:history.back()">Back</a>
-          </form>
-        </div>
-      </div>
-      <div class="row mb-4">
-        <div class="col-md-4">
-          <img class="img-fluid" :src="image1" alt="Resort Image" />
-        </div>
-        <div class="col-md-4">
-          <img class="img-fluid" :src="image2" alt="Resort Image" />
-        </div>
-        <div class="col-md-4">
-          <img class="img-fluid" :src="image3" alt="Resort Image" />
+          <a class="btn btn-b-c even-width mr-auto" href="javascript:history.back()">Back</a>
         </div>
       </div>
     </div>

src/components/user/timeshareIndividual.vue

 <template>
   <!-- eslint-disable max-len -->
-  <div class="reg-page">
+  <div>
     <hr />
-    <div class="form-group row"></div>
+    <br />
     <div class="col-md-12" style="text-align:centre">
       <h4>Detailed Individual Information</h4>
       <div class="form-group row"></div>
             <span class="input-group-text">
               <eva-icon name="people-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input
-              class="form-control"
-              type="text"
-              name="maritalstatus"
-              v-model="owner.maritalstatus"
-            />
+            <select class="form-control" name="maritalstatus" v-model="owner.maritalstatus">
+              <option v-for="(item, i) in maritalStatus" :key="i">{{item}}</option>
+            </select>
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 export default {
   component: {},
   props: {
     owner: {},
   },
+  computed: {
+    ...mapState('timeshare', ['maritalStatus']),
+  },
 };
 </script>
 

src/store/modules/timeshare/timeshare.js

 /* eslint-disable no-restricted-syntax */
 import axios from 'axios';
 import MyData from '../../../assets/myData';
+import MaritalStatus from '../../../assets/staticData/maritalStatus';
 
 export default {
   namespaced: true,
     bankedEntities: [],
     agencies: [],
     agents: [],
+    maritalStatus: MaritalStatus,
     sellItem: {
       referedByAgent: false,
       agent: undefined,

vue.config.js

   devServer: {
     proxy: {
       '/api': {
-        target: 'http://localhost:57260',
+        target: 'http://192.168.6.188:5000',
         changeOrigin: true,
       },
     },