diff --git a/tailbone/templates/members/configure.mako b/tailbone/templates/members/configure.mako
index c0e0355d..465bf611 100644
--- a/tailbone/templates/members/configure.mako
+++ b/tailbone/templates/members/configure.mako
@@ -36,6 +36,20 @@
     </b-field>
 
   </div>
+
+  <h3 class="block is-size-3">Relationships</h3>
+  <div class="block" style="padding-left: 2rem;">
+
+    <b-field message="By default a Person may have multiple Member accounts.">
+      <b-checkbox name="rattail.members.max_one_per_person"
+                  v-model="simpleSettings['rattail.members.max_one_per_person']"
+                  native-value="true"
+                  @input="settingsNeedSaved = true">
+        Limit one (1) Member account per Person
+      </b-checkbox>
+    </b-field>
+
+  </div>
 </%def>
 
 <%def name="modify_this_page_vars()">
diff --git a/tailbone/templates/page.mako b/tailbone/templates/page.mako
index b5ac8773..bf799440 100644
--- a/tailbone/templates/page.mako
+++ b/tailbone/templates/page.mako
@@ -38,7 +38,12 @@
         },
         computed: {},
         watch: {},
-        methods: {},
+        methods: {
+
+            changeContentTitle(newTitle) {
+                this.$emit('change-content-title', newTitle)
+            },
+        },
     }
 
     let ThisPageData = {
diff --git a/tailbone/templates/people/view_profile_buefy.mako b/tailbone/templates/people/view_profile_buefy.mako
index e1da8661..5574088e 100644
--- a/tailbone/templates/people/view_profile_buefy.mako
+++ b/tailbone/templates/people/view_profile_buefy.mako
@@ -119,17 +119,17 @@
 
                   <section class="modal-card-body">
                     <b-field label="First Name">
-                      <b-input v-model.trim="personFirstName"
+                      <b-input v-model.trim="editNameFirst"
                                :maxlength="maxLengths.person_first_name || null">
                       </b-input>
                     </b-field>
                     <b-field label="Middle Name">
-                      <b-input v-model.trim="personMiddleName"
+                      <b-input v-model.trim="editNameMiddle"
                                :maxlength="maxLengths.person_middle_name || null">
                       </b-input>
                     </b-field>
                     <b-field label="Last Name">
-                      <b-input v-model.trim="personLastName"
+                      <b-input v-model.trim="editNameLast"
                                :maxlength="maxLengths.person_last_name || null">
                       </b-input>
                     </b-field>
@@ -210,38 +210,38 @@
                   <section class="modal-card-body">
 
                     <b-field label="Street 1" expanded>
-                      <b-input v-model.trim="personStreet1"
+                      <b-input v-model.trim="editAddressStreet1"
                                :maxlength="maxLengths.address_street || null">
                       </b-input>
                     </b-field>
 
                     <b-field label="Street 2" expanded>
-                      <b-input v-model.trim="personStreet2"
+                      <b-input v-model.trim="editAddressStreet2"
                                :maxlength="maxLengths.address_street2 || null">
                       </b-input>
                     </b-field>
 
                     <b-field label="Zipcode">
-                      <b-input v-model.trim="personZipcode"
+                      <b-input v-model.trim="editAddressZipcode"
                                :maxlength="maxLengths.address_zipcode || null">
                       </b-input>
                     </b-field>
 
                     <b-field grouped>
                       <b-field label="City">
-                        <b-input v-model.trim="personCity"
+                        <b-input v-model.trim="editAddressCity"
                                  :maxlength="maxLengths.address_city || null">
                         </b-input>
                       </b-field>
                       <b-field label="State">
-                        <b-input v-model.trim="personState"
+                        <b-input v-model.trim="editAddressState"
                                  :maxlength="maxLengths.address_state || null">
                         </b-input>
                       </b-field>
                     </b-field>
 
                     <b-field label="Invalid">
-                      <b-checkbox v-model="personInvalidAddress"
+                      <b-checkbox v-model="editAddressInvalid"
                                   type="is-danger">
                       </b-checkbox>
                     </b-field>
@@ -298,7 +298,7 @@
 
                 <header class="modal-card-head">
                   <p class="modal-card-title">
-                    {{ phoneUUID ? "Edit Phone" : "Add Phone" }}
+                    {{ editPhoneUUID ? "Edit" : "Add" }} Phone
                   </p>
                 </header>
 
@@ -306,7 +306,7 @@
                   <b-field grouped>
 
                     <b-field label="Type" expanded>
-                      <b-select v-model="phoneType" expanded>
+                      <b-select v-model="editPhoneType" expanded>
                         <option v-for="option in phoneTypeOptions"
                                 :key="option.value"
                                 :value="option.value">
@@ -316,14 +316,14 @@
                     </b-field>
 
                     <b-field label="Number" expanded>
-                      <b-input v-model.trim="phoneNumber"
+                      <b-input v-model.trim="editPhoneNumber"
                                ref="editPhoneInput">
                       </b-input>
                     </b-field>
                   </b-field>
 
                   <b-field label="Preferred?">
-                    <b-checkbox v-model="phonePreferred">
+                    <b-checkbox v-model="editPhonePreferred">
                     </b-checkbox>
                   </b-field>
 
@@ -335,7 +335,7 @@
                             :disabled="editPhoneSaveDisabled"
                             icon-pack="fas"
                             icon-left="save">
-                    {{ editPhoneSaveText }}
+                    {{ editPhoneSaving ? "Working..." : "Save" }}
                   </b-button>
                   <b-button @click="editPhoneShowDialog = false">
                     Cancel
@@ -372,12 +372,12 @@
               <i class="fas fa-edit"></i>
               Edit
             </a>
-            <a href="#" @click.prevent="deletePhone(props.row)"
+            <a href="#" @click.prevent="deletePhoneInit(props.row)"
                class="has-text-danger">
               <i class="fas fa-trash"></i>
               Delete
             </a>
-            <a href="#" @click.prevent="setPreferredPhone(props.row)"
+            <a href="#" @click.prevent="preferPhoneInit(props.row)"
                v-if="!props.row.preferred">
               <i class="fas fa-star"></i>
               Set Preferred
@@ -415,7 +415,7 @@
 
                 <header class="modal-card-head">
                   <p class="modal-card-title">
-                    {{ emailUUID ? "Edit Email" : "Add Email" }}
+                    {{ editEmailUUID ? "Edit" : "Add" }} Email
                   </p>
                 </header>
 
@@ -423,7 +423,7 @@
                   <b-field grouped>
 
                     <b-field label="Type" expanded>
-                      <b-select v-model="emailType" expanded>
+                      <b-select v-model="editEmailType" expanded>
                         <option v-for="option in emailTypeOptions"
                                 :key="option.value"
                                 :value="option.value">
@@ -433,23 +433,23 @@
                     </b-field>
 
                     <b-field label="Address" expanded>
-                      <b-input v-model.trim="emailAddress"
+                      <b-input v-model.trim="editEmailAddress"
                                ref="editEmailInput">
                       </b-input>
                     </b-field>
 
                   </b-field>
 
-                  <b-field v-if="!emailUUID"
+                  <b-field v-if="!editEmailUUID"
                            label="Preferred?">
-                    <b-checkbox v-model="emailPreferred">
+                    <b-checkbox v-model="editEmailPreferred">
                     </b-checkbox>
                   </b-field>
 
-                  <b-field v-if="emailUUID"
+                  <b-field v-if="editEmailUUID"
                            label="Invalid?">
-                    <b-checkbox v-model="emailInvalid"
-                                :type="emailInvalid ? 'is-danger': null">
+                    <b-checkbox v-model="editEmailInvalid"
+                                :type="editEmailInvalid ? 'is-danger': null">
                     </b-checkbox>
                   </b-field>
 
@@ -461,7 +461,7 @@
                             :disabled="editEmailSaveDisabled"
                             icon-pack="fas"
                             icon-left="save">
-                    {{ editEmailSaveText }}
+                    {{ editEmailSaving ? "Working, please wait..." : "Save" }}
                   </b-button>
                   <b-button @click="editEmailShowDialog = false">
                     Cancel
@@ -504,12 +504,12 @@
                   <i class="fas fa-edit"></i>
                   Edit
                 </a>
-                <a href="#" @click.prevent="deleteEmail(props.row)"
+                <a href="#" @click.prevent="deleteEmailInit(props.row)"
                    class="has-text-danger">
                   <i class="fas fa-trash"></i>
                   Delete
                 </a>
-                <a href="#" @click.prevent="setPreferredEmail(props.row)"
+                <a href="#" @click.prevent="preferEmailInit(props.row)"
                    v-if="!props.row.preferred">
                   <i class="fas fa-star"></i>
                   Set Preferred
@@ -541,10 +541,12 @@
 
       <div>
         % if request.has_perm('people.view'):
-            ${h.link_to("View Person", url('people.view', uuid=person.uuid), class_='button')}
+            <b-button tag="a" :href="person.view_url">
+              View Person
+            </b-button>
         % endif
       </div>
-
+      <b-loading :active.sync="refreshingTab" :is-full-page="false"></b-loading>
     </div>
   </script>
 </%def>
@@ -553,294 +555,336 @@
   <b-tab-item label="Personal"
               value="personal"
               icon-pack="fas"
-              icon="check">
-    <personal-tab :person="person"
-                  :member="member"
-                  :max-lengths="maxLengths"
+              :icon="tabchecks.personal ? 'check' : null">
+    <personal-tab ref="tab_personal"
+                  :person="person"
+                  @profile-changed="profileChanged"
                   :phone-type-options="phoneTypeOptions"
                   :email-type-options="emailTypeOptions"
-                  @person-updated="personUpdated"
-                  @change-content-title="changeContentTitle">
+                  :max-lengths="maxLengths">
     </personal-tab>
   </b-tab-item>
 </%def>
 
+<%def name="render_member_tab_template()">
+  <script type="text/x-template" id="member-tab-template">
+    <div>
+      % if max_one_member:
+          <p class="block">
+            TODO: UI not yet implemented for "max one member per person"
+          </p
+
+      % else:
+          ## nb. multiple members allowed per person
+          <div v-if="members.length">
+
+            <div style="display: flex; justify-content: space-between;">
+              <p>{{ person.display_name }} has <strong>{{ members.length }}</strong> member account{{ members.length == 1 ? '' : 's' }}</p>
+            </div>
+
+            <br />
+            <b-collapse v-for="member in members"
+                        :key="member.uuid"
+                        class="panel"
+                        :open="members.length == 1">
+
+              <div slot="trigger"
+                   slot-scope="props"
+                   class="panel-heading"
+                   role="button">
+                <b-icon pack="fas"
+                        icon="caret-right">
+                </b-icon>
+                <strong>{{ member._key }} - {{ member.display }}</strong>
+              </div>
+
+              <div class="panel-block">
+                <div style="display: flex; justify-content: space-between; width: 100%;">
+                  <div style="flex-grow: 1;">
+
+                    <b-field horizontal label="${member_key_label}">
+                      {{ member._key }}
+                    </b-field>
+
+                    <b-field horizontal label="Account Holder">
+                      <a v-if="member.person_uuid != person.uuid"
+                         :href="member.view_profile_url">
+                        {{ member.person_display_name }}
+                      </a>
+                      <span v-if="member.person_uuid == person.uuid">
+                        {{ member.person_display_name }}
+                      </span>
+                    </b-field>
+
+                    <b-field horizontal label="Membership Type">
+                      <a v-if="member.view_membership_type_url"
+                         :href="member.view_membership_type_url">
+                        {{ member.membership_type_name }}
+                      </a>
+                      <span v-if="!member.view_membership_type_url">
+                        {{ member.membership_type_name }}
+                      </span>
+                    </b-field>
+
+                    <b-field horizontal label="Active">
+                      {{ member.active ? "Yes" : "No" }}
+                    </b-field>
+
+                    <b-field horizontal label="Joined">
+                      {{ member.joined }}
+                    </b-field>
+
+                    <b-field horizontal label="Withdrew"
+                             v-if="member.withdrew">
+                      {{ member.withdrew }}
+                    </b-field>
+
+                    <b-field horizontal label="Equity Total">
+                      {{ member.equity_total_display }}
+                    </b-field>
+
+                  </div>
+                  <div class="buttons" style="align-items: start;">
+
+                    <b-button v-for="link in member.external_links"
+                              :key="link.url"
+                              type="is-primary"
+                              tag="a" :href="link.url" target="_blank"
+                              icon-pack="fas"
+                              icon-left="external-link-alt">
+                      {{ link.label }}
+                    </b-button>
+
+                    % if request.has_perm('members.view'):
+                        <b-button tag="a" :href="member.view_url">
+                          View Member
+                        </b-button>
+                    % endif
+
+                  </div>
+                </div>
+              </div>
+            </b-collapse>
+          </div>
+
+          <div v-if="!members.length">
+            <p>{{ person.display_name }} does not have a member account.</p>
+          </div>
+      % endif
+
+    <b-loading :active.sync="refreshingTab" :is-full-page="false"></b-loading>
+    </div>
+  </script>
+</%def>
+
 <%def name="render_member_tab()">
   <b-tab-item label="Member"
               value="member"
               icon-pack="fas"
-              :icon="members.length ? 'check' : null">
-
-    <div v-if="members.length">
-
-      <div style="display: flex; justify-content: space-between;">
-        <p>{{ person.display_name }} has <strong>{{ members.length }}</strong> member account{{ members.length == 1 ? '' : 's' }}</p>
-      </div>
-
-      <br />
-      <b-collapse v-for="member in members"
-                  :key="member.uuid"
-                  class="panel"
-                  :open="members.length == 1">
-
-        <div slot="trigger"
-             slot-scope="props"
-             class="panel-heading"
-             role="button">
-          <b-icon pack="fas"
-                  icon="caret-right">
-          </b-icon>
-          <strong>{{ member._key }} - {{ member.display }}</strong>
-        </div>
-
-        <div class="panel-block">
-          <div style="display: flex; justify-content: space-between; width: 100%;">
-            <div style="flex-grow: 1;">
-
-              <b-field horizontal label="${member_key_label}">
-                {{ member._key }}
-              </b-field>
-
-              <b-field horizontal label="Account Holder">
-                <a v-if="member.person_uuid != person.uuid"
-                   :href="member.view_profile_url">
-                  {{ member.person_display_name }}
-                </a>
-                <span v-if="member.person_uuid == person.uuid">
-                  {{ member.person_display_name }}
-                </span>
-              </b-field>
-
-              <b-field horizontal label="Membership Type">
-                <a v-if="member.view_membership_type_url"
-                   :href="member.view_membership_type_url">
-                  {{ member.membership_type_name }}
-                </a>
-                <span v-if="!member.view_membership_type_url">
-                  {{ member.membership_type_name }}
-                </span>
-              </b-field>
-
-              <b-field horizontal label="Active">
-                {{ member.active ? "Yes" : "No" }}
-              </b-field>
-
-              <b-field horizontal label="Joined">
-                {{ member.joined }}
-              </b-field>
-
-              <b-field horizontal label="Withdrew"
-                       v-if="member.withdrew">
-                {{ member.withdrew }}
-              </b-field>
-
-              <b-field horizontal label="Equity Total">
-                {{ member.equity_total_display }}
-              </b-field>
-
-            </div>
-            <div class="buttons" style="align-items: start;">
-              ${self.render_member_panel_buttons(member)}
-            </div>
-          </div>
-        </div>
-      </b-collapse>
-    </div>
-
-    <div v-if="!members.length">
-      <p>{{ person.display_name }} does not have a member account.</p>
-    </div>
-
+              :icon="tabchecks.member ? 'check' : null">
+    <member-tab ref="tab_member"
+                :person="person"
+                @profile-changed="profileChanged"
+                :phone-type-options="phoneTypeOptions">
+    </member-tab>
   </b-tab-item>
 </%def>
 
-<%def name="render_member_panel_buttons(member)">
-  % for button in member_xref_buttons:
-      ${button}
-  % endfor
-  % if request.has_perm('members.view'):
-      <b-button tag="a" :href="member.view_url">
-        View Member
-      </b-button>
-  % endif
+<%def name="render_customer_tab_template()">
+  <script type="text/x-template" id="customer-tab-template">
+    <div>
+      <div v-if="customers.length">
+
+        <div style="display: flex; justify-content: space-between;">
+          <p>{{ person.display_name }} has <strong>{{ customers.length }}</strong> customer account{{ customers.length == 1 ? '' : 's' }}</p>
+        </div>
+
+        <br />
+        <b-collapse v-for="customer in customers"
+                    :key="customer.uuid"
+                    class="panel"
+                    :open="customers.length == 1">
+
+          <div slot="trigger"
+               slot-scope="props"
+               class="panel-heading"
+               role="button">
+            <b-icon pack="fas"
+                    icon="caret-right">
+            </b-icon>
+            <strong>{{ customer._key }} - {{ customer.name }}</strong>
+          </div>
+
+          <div class="panel-block">
+            <div style="display: flex; justify-content: space-between; width: 100%;">
+              <div style="flex-grow: 1;">
+
+                <b-field horizontal label="${customer_key_label}">
+                  {{ customer._key }}
+                </b-field>
+
+                <b-field horizontal label="Account Name">
+                  {{ customer.name }}
+                </b-field>
+
+                % if expose_customer_shoppers:
+                    <b-field horizontal label="Shoppers">
+                      <ul>
+                        <li v-for="shopper in customer.shoppers"
+                            :key="shopper.uuid">
+                          <a v-if="shopper.person_uuid != person.uuid"
+                             :href="shopper.view_profile_url">
+                            {{ shopper.display_name }}
+                          </a>
+                          <span v-if="shopper.person_uuid == person.uuid">
+                            {{ shopper.display_name }}
+                          </span>
+                        </li>
+                      </ul>
+                    </b-field>
+                % endif
+
+                % if expose_customer_people:
+                    <b-field horizontal label="People">
+                      <ul>
+                        <li v-for="p in customer.people"
+                            :key="p.uuid">
+                          <a v-if="p.uuid != person.uuid"
+                             :href="p.view_profile_url">
+                            {{ p.display_name }}
+                          </a>
+                          <span v-if="p.uuid == person.uuid">
+                            {{ p.display_name }}
+                          </span>
+                        </li>
+                      </ul>
+                    </b-field>
+                % endif
+
+                <b-field horizontal label="Address"
+                         v-for="address in customer.addresses"
+                         :key="address.uuid">
+                  {{ address.display }}
+                </b-field>
+
+              </div>
+              <div class="buttons" style="align-items: start;">
+
+                <b-button v-for="link in customer.external_links"
+                          :key="link.url"
+                          type="is-primary"
+                          tag="a" :href="link.url" target="_blank"
+                          icon-pack="fas"
+                          icon-left="external-link-alt">
+                  {{ link.label }}
+                </b-button>
+
+                % if request.has_perm('customers.view'):
+                    <b-button tag="a" :href="customer.view_url">
+                      View Customer
+                    </b-button>
+                % endif
+
+              </div>
+            </div>
+          </div>
+        </b-collapse>
+      </div>
+
+      <div v-if="!customers.length">
+        <p>{{ person.display_name }} does not have a customer account.</p>
+      </div>
+      <b-loading :active.sync="refreshingTab" :is-full-page="false"></b-loading>
+    </div>
+  </script>
 </%def>
 
 <%def name="render_customer_tab()">
   <b-tab-item label="Customer"
               value="customer"
               icon-pack="fas"
-              :icon="customers.length ? 'check' : null">
-
-    <div v-if="customers.length">
-
-      <div style="display: flex; justify-content: space-between;">
-        <p>{{ person.display_name }} has <strong>{{ customers.length }}</strong> customer account{{ customers.length == 1 ? '' : 's' }}</p>
-      </div>
-
-      <br />
-      <b-collapse v-for="customer in customers"
-                  :key="customer.uuid"
-                  class="panel"
-                  :open="customers.length == 1">
-
-        <div slot="trigger"
-             slot-scope="props"
-             class="panel-heading"
-             role="button">
-          <b-icon pack="fas"
-                  icon="caret-right">
-          </b-icon>
-          <strong>{{ customer._key }} - {{ customer.name }}</strong>
-        </div>
-
-        <div class="panel-block">
-          <div style="display: flex; justify-content: space-between; width: 100%;">
-            <div style="flex-grow: 1;">
-
-              <b-field horizontal label="${customer_key_label}">
-                {{ customer._key }}
-              </b-field>
-
-              <b-field horizontal label="Account Name">
-                {{ customer.name }}
-              </b-field>
-
-              % if expose_customer_shoppers:
-                  <b-field horizontal label="Shoppers">
-                    <ul>
-                      <li v-for="shopper in customer.shoppers"
-                          :key="shopper.uuid">
-                        <a v-if="shopper.person_uuid != person.uuid"
-                           :href="shopper.view_profile_url">
-                          {{ shopper.display_name }}
-                        </a>
-                        <span v-if="shopper.person_uuid == person.uuid">
-                          {{ shopper.display_name }}
-                        </span>
-                      </li>
-                    </ul>
-                  </b-field>
-              % endif
-
-              % if expose_customer_people:
-                  <b-field horizontal label="People">
-                    <ul>
-                      <li v-for="p in customer.people"
-                          :key="p.uuid">
-                        <a v-if="p.uuid != person.uuid"
-                           :href="p.view_profile_url">
-                          {{ p.display_name }}
-                        </a>
-                        <span v-if="p.uuid == person.uuid">
-                          {{ p.display_name }}
-                        </span>
-                      </li>
-                    </ul>
-                  </b-field>
-              % endif
-
-              <b-field horizontal label="Address"
-                       v-for="address in customer.addresses"
-                       :key="address.uuid">
-                {{ address.display }}
-              </b-field>
-
-            </div>
-            <div class="buttons" style="align-items: start;">
-              ${self.render_customer_panel_buttons(customer)}
-            </div>
-          </div>
-        </div>
-      </b-collapse>
-    </div>
-
-    <div v-if="!customers.length">
-      <p>{{ person.display_name }} does not have a customer account.</p>
-    </div>
-
-  </b-tab-item> <!-- Customer -->
+              :icon="tabchecks.customer ? 'check' : null">
+    <customer-tab ref="tab_customer"
+                  :person="person"
+                  @profile-changed="profileChanged">
+    </customer-tab>
+  </b-tab-item>
 </%def>
 
-<%def name="render_customer_panel_buttons(customer)">
-  <b-button v-for="link in customer.external_links"
-            :key="link.url"
-            type="is-primary"
-            tag="a" :href="link.url" target="_blank"
-            icon-pack="fas"
-            icon-left="external-link-alt">
-    {{ link.label }}
-  </b-button>
-  % if request.has_perm('customers.view'):
-      <b-button tag="a" :href="customer.view_url">
-        View Customer
-      </b-button>
-  % endif
+<%def name="render_shopper_tab_template()">
+  <script type="text/x-template" id="shopper-tab-template">
+    <div>
+      <div v-if="shoppers.length">
+
+        <div style="display: flex; justify-content: space-between;">
+          <p>{{ person.display_name }} is shopper for <strong>{{ shoppers.length }}</strong> customer account{{ shoppers.length == 1 ? '' : 's' }}</p>
+        </div>
+
+        <br />
+        <b-collapse v-for="shopper in shoppers"
+                    :key="shopper.uuid"
+                    class="panel"
+                    :open="shoppers.length == 1">
+
+          <div slot="trigger"
+               slot-scope="props"
+               class="panel-heading"
+               role="button">
+            <b-icon pack="fas"
+                    icon="caret-right">
+            </b-icon>
+            <strong>{{ shopper.customer_key }} - {{ shopper.customer_name }}</strong>
+          </div>
+
+          <div class="panel-block">
+            <div style="display: flex; justify-content: space-between; width: 100%;">
+              <div style="flex-grow: 1;">
+
+                <b-field horizontal label="${customer_key_label}">
+                  {{ shopper.customer_key }}
+                </b-field>
+
+                <b-field horizontal label="Account Name">
+                  {{ shopper.customer_name }}
+                </b-field>
+
+                <b-field horizontal label="Account Holder">
+                  <span v-if="!shopper.account_holder_view_profile_url">
+                    {{ shopper.account_holder_name }}
+                  </span>
+                  <a v-if="shopper.account_holder_view_profile_url"
+                     :href="shopper.account_holder_view_profile_url">
+                    {{ shopper.account_holder_name }}
+                  </a>
+                </b-field>
+
+              </div>
+  ##             <div class="buttons" style="align-items: start;">
+  ##               ${self.render_shopper_panel_buttons(shopper)}
+  ##             </div>
+            </div>
+          </div>
+        </b-collapse>
+      </div>
+
+      <div v-if="!shoppers.length">
+        <p>{{ person.display_name }} is not a shopper.</p>
+      </div>
+      <b-loading :active.sync="refreshingTab" :is-full-page="false"></b-loading>
+    </div>
+  </script>
 </%def>
 
 <%def name="render_shopper_tab()">
   <b-tab-item label="Shopper"
               value="shopper"
               icon-pack="fas"
-              :icon="shoppers.length ? 'check' : null">
-
-    <div v-if="shoppers.length">
-
-      <div style="display: flex; justify-content: space-between;">
-        <p>{{ person.display_name }} is shopper for <strong>{{ shoppers.length }}</strong> customer account{{ shoppers.length == 1 ? '' : 's' }}</p>
-      </div>
-
-      <br />
-      <b-collapse v-for="shopper in shoppers"
-                  :key="shopper.uuid"
-                  class="panel"
-                  :open="shoppers.length == 1">
-
-        <div slot="trigger"
-             slot-scope="props"
-             class="panel-heading"
-             role="button">
-          <b-icon pack="fas"
-                  icon="caret-right">
-          </b-icon>
-          <strong>{{ shopper.customer_key }} - {{ shopper.customer_name }}</strong>
-        </div>
-
-        <div class="panel-block">
-          <div style="display: flex; justify-content: space-between; width: 100%;">
-            <div style="flex-grow: 1;">
-
-              <b-field horizontal label="${customer_key_label}">
-                {{ shopper.customer_key }}
-              </b-field>
-
-              <b-field horizontal label="Account Name">
-                {{ shopper.customer_name }}
-              </b-field>
-
-              <b-field horizontal label="Account Holder">
-                <span v-if="!shopper.account_holder_view_profile_url">
-                  {{ shopper.account_holder_name }}
-                </span>
-                <a v-if="shopper.account_holder_view_profile_url"
-                   :href="shopper.account_holder_view_profile_url">
-                  {{ shopper.account_holder_name }}
-                </a>
-              </b-field>
-
-            </div>
-##             <div class="buttons" style="align-items: start;">
-##               ${self.render_shopper_panel_buttons(shopper)}
-##             </div>
-          </div>
-        </div>
-      </b-collapse>
-    </div>
-
-    <div v-if="!shoppers.length">
-      <p>{{ person.display_name }} is not a shopper.</p>
-    </div>
-
-  </b-tab-item> <!-- Shopper -->
+              :icon="tabchecks.shopper ? 'check' : null">
+    <shopper-tab ref="tab_shopper"
+                 :person="person"
+                 @profile-changed="profileChanged">
+    </shopper-tab>
+  </b-tab-item>
 </%def>
 
 <%def name="render_employee_tab_template()">
@@ -863,11 +907,11 @@
                         <b-button type="is-primary"
                                   icon-pack="fas"
                                   icon-left="edit"
-                                  @click="initEditEmployeeID()">
+                                  @click="editEmployeeIdInit()">
                           Edit ID
                         </b-button>
                         <b-modal has-modal-card
-                                 :active.sync="showEditEmployeeIDDialog">
+                                 :active.sync="editEmployeeIdShowDialog">
                           <div class="modal-card">
 
                             <header class="modal-card-head">
@@ -876,20 +920,20 @@
 
                             <section class="modal-card-body">
                               <b-field label="Employee ID">
-                                <b-input v-model="newEmployeeID"></b-input>
+                                <b-input v-model="editEmployeeIdValue"></b-input>
                               </b-field>
                             </section>
 
                             <footer class="modal-card-foot">
-                              <b-button @click="showEditEmployeeIDDialog = false">
+                              <b-button @click="editEmployeeIdShowDialog = false">
                                 Cancel
                               </b-button>
                               <b-button type="is-primary"
                                         icon-pack="fas"
                                         icon-left="save"
-                                        :disabled="updatingEmployeeID"
-                                        @click="updateEmployeeID()">
-                                {{ editEmployeeIDSaveButtonText }}
+                                        :disabled="editEmployeeIdSaving"
+                                        @click="editEmployeeIdSave()">
+                                {{ editEmployeeIdSaving ? "Working, please wait..." : "Save" }}
                               </b-button>
                             </footer>
                           </div>
@@ -934,7 +978,7 @@
                   <b-table-column field="actions"
                                   label="Actions"
                                   v-slot="props">
-                    <a href="#" @click.prevent="editEmployeeHistory(props.row)">
+                    <a href="#" @click.prevent="editEmployeeHistoryInit(props.row)">
                       <i class="fas fa-edit"></i>
                       Edit
                     </a>
@@ -964,7 +1008,7 @@
 
                 <b-button v-if="employee.current"
                           type="is-primary"
-                          @click="showStopEmployeeDialog = true">
+                          @click="stopEmployeeInit()">
                   ${person} is no longer an Employee
                 </b-button>
 
@@ -978,10 +1022,10 @@
 
                     <section class="modal-card-body">
                       <b-field label="Employee Number">
-                        <b-input v-model="employeeID"></b-input>
+                        <b-input v-model="startEmployeeID"></b-input>
                       </b-field>
                       <b-field label="Start Date">
-                        <tailbone-datepicker v-model="employeeStartDate"></tailbone-datepicker>
+                        <tailbone-datepicker v-model="startEmployeeStartDate"></tailbone-datepicker>
                       </b-field>
                     </section>
 
@@ -990,8 +1034,8 @@
                         Cancel
                       </b-button>
                       <once-button type="is-primary"
-                                   @click="startEmployee()"
-                                   :disabled="!employeeStartDate"
+                                   @click="startEmployeeSave()"
+                                   :disabled="!startEmployeeStartDate"
                                    text="Save">
                       </once-button>
                     </footer>
@@ -999,7 +1043,7 @@
                 </b-modal>
 
                 <b-modal has-modal-card
-                         :active.sync="showStopEmployeeDialog">
+                         :active.sync="stopEmployeeShowDialog">
                   <div class="modal-card">
 
                     <header class="modal-card-head">
@@ -1008,22 +1052,22 @@
 
                     <section class="modal-card-body">
                       <b-field label="End Date"
-                               :type="employeeEndDate ? null : 'is-danger'">
-                        <tailbone-datepicker v-model="employeeEndDate"></tailbone-datepicker>
+                               :type="stopEmployeeEndDate ? null : 'is-danger'">
+                        <tailbone-datepicker v-model="stopEmployeeEndDate"></tailbone-datepicker>
                       </b-field>
                       <b-field label="Revoke Internal App Access">
-                        <b-checkbox v-model="employeeRevokeAccess">
+                        <b-checkbox v-model="stopEmployeeRevokeAccess">
                         </b-checkbox>
                       </b-field>
                     </section>
 
                     <footer class="modal-card-foot">
-                      <b-button @click="showStopEmployeeDialog = false">
+                      <b-button @click="stopEmployeeShowDialog = false">
                         Cancel
                       </b-button>
                       <once-button type="is-primary"
-                                   @click="endEmployee()"
-                                   :disabled="!employeeEndDate"
+                                   @click="stopEmployeeSave()"
+                                   :disabled="!stopEmployeeEndDate"
                                    text="Save">
                       </once-button>
                     </footer>
@@ -1033,7 +1077,7 @@
 
             % if request.has_perm('people_profile.edit_employee_history'):
                 <b-modal has-modal-card
-                         :active.sync="showEditEmployeeHistoryDialog">
+                         :active.sync="editEmployeeHistoryShowDialog">
                   <div class="modal-card">
 
                     <header class="modal-card-head">
@@ -1042,22 +1086,22 @@
 
                     <section class="modal-card-body">
                       <b-field label="Start Date">
-                        <tailbone-datepicker v-model="employeeHistoryStartDate"></tailbone-datepicker>
+                        <tailbone-datepicker v-model="editEmployeeHistoryStartDate"></tailbone-datepicker>
                       </b-field>
                       <b-field label="End Date">
-                        <tailbone-datepicker v-model="employeeHistoryEndDate"
-                                             :disabled="!employeeHistoryEndDateRequired">
+                        <tailbone-datepicker v-model="editEmployeeHistoryEndDate"
+                                             :disabled="!editEmployeeHistoryEndDateRequired">
                         </tailbone-datepicker>
                       </b-field>
                     </section>
 
                     <footer class="modal-card-foot">
-                      <b-button @click="showEditEmployeeHistoryDialog = false">
+                      <b-button @click="editEmployeeHistoryShowDialog = false">
                         Cancel
                       </b-button>
                       <once-button type="is-primary"
-                                   @click="saveEmployeeHistory()"
-                                   :disabled="!employeeHistoryStartDate || (employeeHistoryEndDateRequired && !employeeHistoryEndDate)"
+                                   @click="editEmployeeHistorySave()"
+                                   :disabled="!editEmployeeHistoryStartDate || (editEmployeeHistoryEndDateRequired && !editEmployeeHistoryEndDate)"
                                    text="Save">
                       </once-button>
                     </footer>
@@ -1076,6 +1120,7 @@
         </div>
 
       </div>
+      <b-loading :active.sync="refreshingTab" :is-full-page="false"></b-loading>
     </div>
   </script>
 </%def>
@@ -1084,12 +1129,10 @@
   <b-tab-item label="Employee"
               value="employee"
               icon-pack="fas"
-              :icon="employee.current ? 'check' : null">
-    <employee-tab :employee="employee"
-                  :employee-history="employeeHistory"
-                  @employee-updated="employeeUpdated"
-                  @employee-history-updated="employeeHistoryUpdated"
-                  @change-content-title="changeContentTitle">
+              :icon="tabchecks.employee ? 'check' : null">
+    <employee-tab ref="tab_employee"
+                  :person="person"
+                  @profile-changed="profileChanged">
     </employee-tab>
   </b-tab-item>
 </%def>
@@ -1101,7 +1144,7 @@
       % if request.has_perm('people_profile.add_note'):
           <b-button type="is-primary"
                     class="control"
-                    @click="noteNew()"
+                    @click="addNoteInit()"
                     icon-pack="fas"
                     icon-left="plus">
             Add Note
@@ -1144,13 +1187,13 @@
             <b-table-column label="Actions"
                             v-slot="props">
               % if request.has_perm('people_profile.edit_note'):
-                  <a href="#" @click.prevent="noteEdit(props.row)">
+                  <a href="#" @click.prevent="editNoteInit(props.row)">
                     <i class="fas fa-edit"></i>
                     Edit
                   </a>
               % endif
               % if request.has_perm('people_profile.delete_note'):
-                  <a href="#" @click.prevent="noteDelete(props.row)"
+                  <a href="#" @click.prevent="deleteNoteInit(props.row)"
                      class="has-text-danger">
                     <i class="fas fa-trash"></i>
                     Delete
@@ -1161,68 +1204,71 @@
 
       </b-table>
 
-      <b-modal :active.sync="noteShowDialog"
-               has-modal-card>
+      % if request.has_any_perm('people_profile.add_note', 'people_profile.edit_note', 'people_profile.delete_note'):
+          <b-modal :active.sync="editNoteShowDialog"
+                   has-modal-card>
 
-        <div class="modal-card">
+            <div class="modal-card">
 
-          <header class="modal-card-head">
-            <p class="modal-card-title">
-              {{ noteDialogTitle }}
-            </p>
-          </header>
+              <header class="modal-card-head">
+                <p class="modal-card-title">
+                  {{ editNoteUUID ? (editNoteDelete ? "Delete" : "Edit") : "New" }} Note
+                </p>
+              </header>
 
-          <section class="modal-card-body">
+              <section class="modal-card-body">
 
-            <b-field label="Type"
-                     :type="!noteDeleting && !noteType ? 'is-danger' : null">
-              <b-select v-model="noteType"
-                        :disabled="noteUUID">
-                <option v-for="option in noteTypeOptions"
-                        :key="option.value"
-                        :value="option.value">
-                  {{ option.label }}
-                </option>
-              </b-select>
-            </b-field>
+                <b-field label="Type"
+                         :type="!editNoteDelete && !editNoteType ? 'is-danger' : null">
+                  <b-select v-model="editNoteType"
+                            :disabled="editNoteUUID">
+                    <option v-for="option in noteTypeOptions"
+                            :key="option.value"
+                            :value="option.value">
+                      {{ option.label }}
+                    </option>
+                  </b-select>
+                </b-field>
 
-            <b-field label="Subject">
-              <b-input v-model.trim="noteSubject"
-                       :disabled="noteDeleting">
-              </b-input>
-            </b-field>
+                <b-field label="Subject">
+                  <b-input v-model.trim="editNoteSubject"
+                           :disabled="editNoteDelete">
+                  </b-input>
+                </b-field>
 
-            <b-field label="Text">
-              <b-input v-model.trim="noteText"
-                       type="textarea"
-                       :disabled="noteDeleting">
-              </b-input>
-            </b-field>
+                <b-field label="Text">
+                  <b-input v-model.trim="editNoteText"
+                           type="textarea"
+                           :disabled="editNoteDelete">
+                  </b-input>
+                </b-field>
 
-            <b-notification v-if="noteDeleting"
-                            type="is-danger"
-                            :closable="false">
-              Are you sure you wish to delete this note?
-            </b-notification>
+                <b-notification v-if="editNoteDelete"
+                                type="is-danger"
+                                :closable="false">
+                  Are you sure you wish to delete this note?
+                </b-notification>
 
-          </section>
+              </section>
 
-          <footer class="modal-card-foot">
-            <b-button :type="noteDeleting ? 'is-danger' : 'is-primary'"
-                      @click="noteSave()"
-                      :disabled="noteSaving || (!noteDeleting && !noteType)"
-                      icon-pack="fas"
-                      icon-left="save">
-              {{ noteSaving ? "Working, please wait..." : noteSaveText }}
-            </b-button>
-            <b-button @click="noteShowDialog = false">
-              Cancel
-            </b-button>
-          </footer>
+              <footer class="modal-card-foot">
+                <b-button :type="editNoteDelete ? 'is-danger' : 'is-primary'"
+                          @click="editNoteSave()"
+                          :disabled="editNoteSaving || (!editNoteDelete && !editNoteType)"
+                          icon-pack="fas"
+                          icon-left="save">
+                  {{ editNoteSaving ? "Working..." : (editNoteDelete ? "Delete" : "Save") }}
+                </b-button>
+                <b-button @click="editNoteShowDialog = false">
+                  Cancel
+                </b-button>
+              </footer>
 
-        </div>
-      </b-modal>
+            </div>
+          </b-modal>
+      % endif
 
+      <b-loading :active.sync="refreshingTab" :is-full-page="false"></b-loading>
     </div>
   </script>
 </%def>
@@ -1231,70 +1277,79 @@
   <b-tab-item label="Notes"
               value="notes"
               icon-pack="fas"
-              :icon="notes.length ? 'check' : null">
-
-    <notes-tab :notes="notes"
-               :note-type-options="noteTypeOptions"
-               @new-notes-data="newNotesData">
+              :icon="tabchecks.notes ? 'check' : null">
+    <notes-tab ref="tab_notes"
+               :person="person"
+               @profile-changed="profileChanged">
     </notes-tab>
-
   </b-tab-item>
 </%def>
 
+<%def name="render_user_tab_template()">
+  <script type="text/x-template" id="user-tab-template">
+    <div>
+      <div v-if="users.length">
+
+        <p>{{ person.display_name }} has <strong>{{ users.length }}</strong> user account{{ users.length == 1 ? '' : 's' }}</p>
+        <br />
+        <div id="users-accordion">
+
+          <b-collapse class="panel"
+                      v-for="user in users"
+                      :key="user.uuid">
+
+            <div slot="trigger"
+                 class="panel-heading"
+                 role="button">
+              <strong>{{ user.username }}</strong>
+            </div>
+
+            <div class="panel-block">
+              <div style="display: flex; justify-content: space-between; width: 100%;">
+
+                <div>
+                  <div class="field-wrapper id">
+                    <div class="field-row">
+                      <label>Username</label>
+                      <div class="field">
+                        {{ user.username }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div>
+                  % if request.has_perm('users.view'):
+                      <b-button tag="a" :href="user.view_url">
+                        View User
+                      </b-button>
+                  % endif
+                </div>
+
+              </div>
+            </div>
+          </b-collapse>
+        </div>
+      </div>
+
+      <div v-if="!users.length">
+        <p>{{ person.display_name }} does not have a user account.</p>
+      </div>
+      <b-loading :active.sync="refreshingTab" :is-full-page="false"></b-loading>
+    </div>
+  </script>
+</%def>
+
 <%def name="render_user_tab()">
   <b-tab-item label="User"
               value="user"
               icon-pack="fas"
-              :icon="users.length ? 'check' : null">
-
-    <div v-if="users.length">
-
-      <p>{{ person.display_name }} has <strong>{{ users.length }}</strong> user account{{ users.length == 1 ? '' : 's' }}</p>
-      <br />
-      <div id="users-accordion">
-
-        <b-collapse class="panel"
-                    v-for="user in users"
-                    :key="user.uuid">
-
-          <div slot="trigger"
-               class="panel-heading"
-               role="button">
-            <strong>{{ user.username }}</strong>
-          </div>
-
-          <div class="panel-block">
-            <div style="display: flex; justify-content: space-between; width: 100%;">
-
-              <div>
-                <div class="field-wrapper id">
-                  <div class="field-row">
-                    <label>Username</label>
-                    <div class="field">
-                      {{ user.username }}
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div>
-                % if request.has_perm('users.view'):
-                    <b-button tag="a" :href="user.view_url">
-                      View User
-                    </b-button>
-                % endif
-              </div>
-
-            </div>
-          </div>
-        </b-collapse>
-      </div>
-    </div>
-
-    <div v-if="!users.length">
-      <p>{{ person.display_name }} does not have a user account.</p>
-    </div>
-  </b-tab-item><!-- User -->
+              :icon="tabchecks.user ? 'check' : null">
+    <user-tab ref="tab_user"
+              :person="person"
+              @profile-changed="profileChanged">
+    </user-tab>
+  </b-tab-item>
 </%def>
 
 <%def name="render_profile_tabs()">
@@ -1302,7 +1357,7 @@
   ${self.render_member_tab()}
   ${self.render_customer_tab()}
   % if expose_customer_shoppers:
-  ${self.render_shopper_tab()}
+      ${self.render_shopper_tab()}
   % endif
   ${self.render_employee_tab()}
   ${self.render_notes_tab()}
@@ -1422,8 +1477,14 @@
 <%def name="render_this_page_template()">
   ${parent.render_this_page_template()}
   ${self.render_personal_tab_template()}
+  ${self.render_member_tab_template()}
+  ${self.render_customer_tab_template()}
+  % if expose_customer_shoppers:
+      ${self.render_shopper_tab_template()}
+  % endif
   ${self.render_employee_tab_template()}
   ${self.render_notes_tab_template()}
+  ${self.render_user_tab_template()}
   ${self.render_profile_info_template()}
 </%def>
 
@@ -1431,127 +1492,95 @@
   <script type="text/javascript">
 
     let PersonalTabData = {
+        refreshTabURL: '${url('people.profile_tab_personal', uuid=person.uuid)}',
 
-        editNameShowDialog: false,
-        personFirstName: null,
-        personMiddleName: null,
-        personLastName: null,
+        % if request.has_perm('people_profile.edit_person'):
+            editNameShowDialog: false,
+            editNameFirst: null,
+            editNameMiddle: null,
+            editNameLast: null,
 
-        editAddressShowDialog: false,
-        personStreet1: null,
-        personStreet2: null,
-        personCity: null,
-        personState: null,
-        personZipcode: null,
-        personInvalidAddress: false,
+            editAddressShowDialog: false,
+            editAddressStreet1: null,
+            editAddressStreet2: null,
+            editAddressCity: null,
+            editAddressState: null,
+            editAddressZipcode: null,
+            editAddressInvalid: false,
 
-        editPhoneShowDialog: false,
-        phoneUUID: null,
-        phoneType: null,
-        phoneNumber: null,
-        phonePreferred: false,
-        savingPhone: false,
+            editPhoneShowDialog: false,
+            editPhoneUUID: null,
+            editPhoneType: null,
+            editPhoneNumber: null,
+            editPhonePreferred: false,
+            editPhoneSaving: false,
 
-        editEmailShowDialog: false,
-        emailUUID: null,
-        emailType: null,
-        emailAddress: null,
-        emailPreferred: null,
-        emailInvalid: false,
-        editEmailSaving: false,
+            editEmailShowDialog: false,
+            editEmailUUID: null,
+            editEmailType: null,
+            editEmailAddress: null,
+            editEmailPreferred: null,
+            editEmailInvalid: false,
+            editEmailSaving: false,
+        % endif
     }
 
     let PersonalTab = {
         template: '#personal-tab-template',
-        mixins: [SubmitMixin],
+        mixins: [TabMixin, SimpleRequestMixin],
         props: {
             person: Object,
-            member: Object,
             phoneTypeOptions: Array,
             emailTypeOptions: Array,
             maxLengths: Object,
         },
         computed: {
-            % if request.has_perm('people_profile.edit_person'):
-                editNameSaveDisabled: function() {
 
-                    // first and last name are required
-                    if (!this.personFirstName || !this.personLastName) {
+            % if request.has_perm('people_profile.edit_person'):
+
+                editNameSaveDisabled: function() {
+                    if (!this.editNameFirst || !this.editNameLast) {
                         return true
                     }
-
-                    // otherwise don't disable; let user save
                     return false
                 },
 
                 editAddressSaveDisabled: function() {
-
                     // TODO: should require anything here?
-
-                    // otherwise don't disable; let user save
                     return false
                 },
 
-                editPhoneSaveText() {
-                    if (this.savingPhone) {
-                        return "Working..."
-                    }
-                    return "Save"
-                },
-
                 editPhoneSaveDisabled: function() {
-                    if (this.savingPhone) {
+                    if (this.editPhoneSaving) {
                         return true
                     }
-
-                    // phone type is required
-                    if (!this.phoneType) {
+                    if (!this.editPhoneType) {
                         return true
                     }
-
-                    // phone number is required
-                    if (!this.phoneNumber) {
+                    if (!this.editPhoneNumber) {
                         return true
                     }
-
-                    // otherwise don't disable; let user save
                     return false
                 },
 
-                editEmailSaveText() {
-                    if (this.editEmailSaving) {
-                        return "Working, please wait..."
-                    }
-                    return "Save"
-                },
-
                 editEmailSaveDisabled: function() {
-
-                    // disable if currently submitting form
                     if (this.editEmailSaving) {
                         return true
                     }
-
-                    // email type is required
-                    if (!this.emailType) {
+                    if (!this.editEmailType) {
                         return true
                     }
-
-                    // email address is required
-                    if (!this.emailAddress) {
+                    if (!this.editEmailAddress) {
                         return true
                     }
-
-                    // otherwise don't disable; let user save
                     return false
                 },
+
             % endif
         },
         methods: {
 
-            changeContentTitle(newTitle) {
-                this.$emit('change-content-title', newTitle)
-            },
+            // refreshTabSuccess(response) {},
 
             % if request.has_perm('people_profile.edit_person'):
 
@@ -1560,59 +1589,53 @@
                 },
 
                 editNameInit() {
-                    this.personFirstName = this.person.first_name
-                    this.personMiddleName = this.person.middle_name
-                    this.personLastName = this.person.last_name
+                    this.editNameFirst = this.person.first_name
+                    this.editNameMiddle = this.person.middle_name
+                    this.editNameLast = this.person.last_name
                     this.editNameShowDialog = true
                 },
 
                 editNameSave() {
                     let url = '${url('people.profile_edit_name', uuid=person.uuid)}'
-
                     let params = {
-                        first_name: this.personFirstName,
-                        middle_name: this.personMiddleName,
-                        last_name: this.personLastName,
+                        first_name: this.editNameFirst,
+                        middle_name: this.editNameMiddle,
+                        last_name: this.editNameLast,
                     }
 
-                    let that = this
-                    this.submitData(url, params, function(response) {
-                        that.$emit('person-updated', response.data.person)
-                        that.editNameShowDialog = false
-                        // TODO: not sure this is standard upstream, or just in bespoke?
-                        if (response.data.dynamic_content_title) {
-                            that.$emit('change-content-title', response.data.dynamic_content_title)
-                        }
+                    this.simplePOST(url, params, response => {
+                        this.$emit('profile-changed', response.data)
+                        this.editNameShowDialog = false
+                        this.refreshTab()
                     })
                 },
 
                 editAddressInit() {
                     let address = this.person.address
-                    this.personStreet1 = address ? address.street : null
-                    this.personStreet2 = address ? address.street2 : null
-                    this.personCity = address ? address.city : null
-                    this.personState = address ? address.state : null
-                    this.personZipcode = address ? address.zipcode : null
-                    this.personInvalidAddress = address ? address.invalid : false
+                    this.editAddressStreet1 = address ? address.street : null
+                    this.editAddressStreet2 = address ? address.street2 : null
+                    this.editAddressCity = address ? address.city : null
+                    this.editAddressState = address ? address.state : null
+                    this.editAddressZipcode = address ? address.zipcode : null
+                    this.editAddressInvalid = address ? address.invalid : false
                     this.editAddressShowDialog = true
                 },
 
                 editAddressSave() {
                     let url = '${url('people.profile_edit_address', uuid=person.uuid)}'
-
                     let params = {
-                        street: this.personStreet1,
-                        street2: this.personStreet2,
-                        city: this.personCity,
-                        state: this.personState,
-                        zipcode: this.personZipcode,
-                        invalid: this.personInvalidAddress,
+                        street: this.editAddressStreet1,
+                        street2: this.editAddressStreet2,
+                        city: this.editAddressCity,
+                        state: this.editAddressState,
+                        zipcode: this.editAddressZipcode,
+                        invalid: this.editAddressInvalid,
                     }
 
-                    let that = this
-                    this.submitData(url, params, function(response) {
-                        that.$emit('person-updated', response.data.person)
-                        that.editAddressShowDialog = false
+                    this.simplePOST(url, params, response => {
+                        this.$emit('profile-changed', response.data)
+                        this.editAddressShowDialog = false
+                        this.refreshTab()
                     })
                 },
 
@@ -1626,10 +1649,10 @@
                 },
 
                 editPhoneInit(phone) {
-                    this.phoneUUID = phone.uuid
-                    this.phoneType = phone.type
-                    this.phoneNumber = phone.number
-                    this.phonePreferred = phone.preferred
+                    this.editPhoneUUID = phone.uuid
+                    this.editPhoneType = phone.type
+                    this.editPhoneNumber = phone.number
+                    this.editPhonePreferred = phone.preferred
                     this.editPhoneShowDialog = true
                     this.$nextTick(function() {
                         this.$refs.editPhoneInput.focus()
@@ -1637,63 +1660,54 @@
                 },
 
                 editPhoneSave() {
-                    this.savingPhone = true
+                    this.editPhoneSaving = true
 
                     let url
                     let params = {
-                        phone_number: this.phoneNumber,
-                        phone_type: this.phoneType,
-                        phone_preferred: this.phonePreferred,
+                        phone_number: this.editPhoneNumber,
+                        phone_type: this.editPhoneType,
+                        phone_preferred: this.editPhonePreferred,
                     }
 
-                    if (this.phoneUUID) {
+                    // nb. create or update
+                    if (this.editPhoneUUID) {
                         url = '${url('people.profile_update_phone', uuid=person.uuid)}'
-                        params.phone_uuid = this.phoneUUID
+                        params.phone_uuid = this.editPhoneUUID
                     } else {
                         url = '${url('people.profile_add_phone', uuid=person.uuid)}'
                     }
 
-                    let that = this
-                    this.submitData(url, params, function(response) {
-                        that.$emit('person-updated', response.data.person)
-                        that.editPhoneShowDialog = false
-                        that.savingPhone = false
+                    this.simplePOST(url, params, response => {
+                        this.$emit('profile-changed', response.data)
+                        this.editPhoneShowDialog = false
+                        this.editPhoneSaving = false
+                        this.refreshTab()
+                    }, response => {
+                        this.editPhoneSaving = false
                     })
                 },
 
-                deletePhone(phone) {
+                deletePhoneInit(phone) {
                     let url = '${url('people.profile_delete_phone', uuid=person.uuid)}'
-
                     let params = {
                         phone_uuid: phone.uuid,
                     }
 
-                    let that = this
-                    this.submitData(url, params, function(response) {
-                        that.$emit('person-updated', response.data.person)
-                        that.$buefy.toast.open({
-                            message: "Phone number was deleted.",
-                            type: 'is-info',
-                            duration: 3000, // 3 seconds
-                        })
+                    this.simplePOST(url, params, response => {
+                        this.$emit('profile-changed', response.data)
+                        this.refreshTab()
                     })
                 },
 
-                setPreferredPhone(phone) {
+                preferPhoneInit(phone) {
                     let url = '${url('people.profile_set_preferred_phone', uuid=person.uuid)}'
-
                     let params = {
                         phone_uuid: phone.uuid,
                     }
 
-                    let that = this
-                    this.submitData(url, params, function(response) {
-                        that.$emit('person-updated', response.data.person)
-                        that.$buefy.toast.open({
-                            message: "Phone preference updated!",
-                            type: 'is-info',
-                            duration: 3000, // 3 seconds
-                        })
+                    this.simplePOST(url, params, response => {
+                        this.$emit('profile-changed', response.data)
+                        this.refreshTab()
                     })
                 },
 
@@ -1708,11 +1722,11 @@
                 },
 
                 editEmailInit(email) {
-                    this.emailUUID = email.uuid
-                    this.emailType = email.type
-                    this.emailAddress = email.address
-                    this.emailInvalid = email.invalid
-                    this.emailPreferred = email.preferred
+                    this.editEmailUUID = email.uuid
+                    this.editEmailType = email.type
+                    this.editEmailAddress = email.address
+                    this.editEmailInvalid = email.invalid
+                    this.editEmailPreferred = email.preferred
                     this.editEmailShowDialog = true
                     this.$nextTick(function() {
                         this.$refs.editEmailInput.focus()
@@ -1724,62 +1738,50 @@
 
                     let url = null
                     let params = {
-                        email_address: this.emailAddress,
-                        email_type: this.emailType,
+                        email_address: this.editEmailAddress,
+                        email_type: this.editEmailType,
                     }
 
-                    if (this.emailUUID) {
+                    if (this.editEmailUUID) {
                         url = '${url('people.profile_update_email', uuid=person.uuid)}'
-                        params.email_uuid = this.emailUUID
-                        params.email_invalid = this.emailInvalid
+                        params.email_uuid = this.editEmailUUID
+                        params.email_invalid = this.editEmailInvalid
                     } else {
                         url = '${url('people.profile_add_email', uuid=person.uuid)}'
-                        params.email_preferred = this.emailPreferred
+                        params.email_preferred = this.editEmailPreferred
                     }
 
-                    let that = this
-                    this.submitData(url, params, function(response) {
-                        that.$emit('person-updated', response.data.person)
-                        that.editEmailShowDialog = false
-                        that.editEmailSaving = false
-                    }, function(error) {
-                        that.editEmailSaving = false
+                    this.simplePOST(url, params, response => {
+                        this.$emit('profile-changed', response.data)
+                        this.editEmailShowDialog = false
+                        this.editEmailSaving = false
+                        this.refreshTab()
+                    }, response => {
+                        this.editEmailSaving = false
                     })
                 },
 
-                deleteEmail(email) {
+                deleteEmailInit(email) {
                     let url = '${url('people.profile_delete_email', uuid=person.uuid)}'
-
                     let params = {
                         email_uuid: email.uuid,
                     }
 
-                    let that = this
-                    this.submitData(url, params, function(response) {
-                        that.$emit('person-updated', response.data.person)
-                        that.$buefy.toast.open({
-                            message: "Email address was deleted.",
-                            type: 'is-info',
-                            duration: 3000, // 3 seconds
-                        })
+                    this.simplePOST(url, params, response => {
+                        this.$emit('profile-changed', response.data)
+                        this.refreshTab()
                     })
                 },
 
-                setPreferredEmail(email) {
+                preferEmailInit(email) {
                     let url = '${url('people.profile_set_preferred_email', uuid=person.uuid)}'
-
                     let params = {
                         email_uuid: email.uuid,
                     }
 
-                    let that = this
-                    this.submitData(url, params, function(response) {
-                        that.$emit('person-updated', response.data.person)
-                        that.$buefy.toast.open({
-                            message: "Email preference updated!",
-                            type: 'is-info',
-                            duration: 3000, // 3 seconds
-                        })
+                    this.simplePOST(url, params, response => {
+                        this.$emit('profile-changed', response.data)
+                        this.refreshTab()
                     })
                 },
 
@@ -1800,80 +1802,190 @@
   </script>
 </%def>
 
+<%def name="declare_member_tab_vars()">
+  <script type="text/javascript">
+
+    let MemberTabData = {
+        refreshTabURL: '${url('people.profile_tab_member', uuid=person.uuid)}',
+        % if max_one_member:
+            member: {},
+        % else:
+            members: [],
+        % endif
+    }
+
+    let MemberTab = {
+        template: '#member-tab-template',
+        mixins: [TabMixin, SimpleRequestMixin],
+        props: {
+            person: Object,
+            phoneTypeOptions: Array,
+        },
+        computed: {},
+        methods: {
+
+            refreshTabSuccess(response) {
+                % if max_one_member:
+                    this.member = response.data.member
+                % else:
+                    this.members = response.data.members
+                % endif
+            },
+        },
+    }
+
+  </script>
+</%def>
+
+<%def name="make_member_tab_component()">
+  ${self.declare_member_tab_vars()}
+  <script type="text/javascript">
+
+    MemberTab.data = function() { return MemberTabData }
+    Vue.component('member-tab', MemberTab)
+
+  </script>
+</%def>
+
+<%def name="declare_customer_tab_vars()">
+  <script type="text/javascript">
+
+    let CustomerTabData = {
+        refreshTabURL: '${url('people.profile_tab_customer', uuid=person.uuid)}',
+        customers: [],
+    }
+
+    let CustomerTab = {
+        template: '#customer-tab-template',
+        mixins: [TabMixin, SimpleRequestMixin],
+        props: {
+            person: Object,
+        },
+        computed: {},
+        methods: {
+
+            refreshTabSuccess(response) {
+                this.customers = response.data.customers
+            },
+        },
+    }
+
+  </script>
+</%def>
+
+<%def name="make_customer_tab_component()">
+  ${self.declare_customer_tab_vars()}
+  <script type="text/javascript">
+
+    CustomerTab.data = function() { return CustomerTabData }
+    Vue.component('customer-tab', CustomerTab)
+
+  </script>
+</%def>
+
+<%def name="declare_shopper_tab_vars()">
+  <script type="text/javascript">
+
+    let ShopperTabData = {
+        refreshTabURL: '${url('people.profile_tab_shopper', uuid=person.uuid)}',
+        shoppers: [],
+    }
+
+    let ShopperTab = {
+        template: '#shopper-tab-template',
+        mixins: [TabMixin, SimpleRequestMixin],
+        props: {
+            person: Object,
+        },
+        computed: {},
+        methods: {
+
+            refreshTabSuccess(response) {
+                this.shoppers = response.data.shoppers
+            },
+        },
+    }
+
+  </script>
+</%def>
+
+<%def name="make_shopper_tab_component()">
+  ${self.declare_shopper_tab_vars()}
+  <script type="text/javascript">
+
+    ShopperTab.data = function() { return ShopperTabData }
+    Vue.component('shopper-tab', ShopperTab)
+
+  </script>
+</%def>
+
 <%def name="declare_employee_tab_vars()">
   <script type="text/javascript">
 
     let EmployeeTabData = {
-
-        startEmployeeShowDialog: false,
-        employeeID: null,
-        employeeStartDate: null,
-        showStopEmployeeDialog: false,
-        employeeEndDate: null,
-        employeeRevokeAccess: false,
-        showEditEmployeeHistoryDialog: false,
-        employeeHistoryUUID: null,
-        employeeHistoryStartDate: null,
-        employeeHistoryEndDate: null,
-        employeeHistoryEndDateRequired: false,
+        refreshTabURL: '${url('people.profile_tab_employee', uuid=person.uuid)}',
+        employee: {},
+        employeeHistory: [],
 
         % if request.has_perm('employees.edit'):
-        showEditEmployeeIDDialog: false,
-        newEmployeeID: null,
-        updatingEmployeeID: false,
+            editEmployeeIdShowDialog: false,
+            editEmployeeIdValue: null,
+            editEmployeeIdSaving: false,
+        % endif
+
+        % if request.has_perm('people_profile.toggle_employee'):
+            startEmployeeShowDialog: false,
+            startEmployeeID: null,
+            startEmployeeStartDate: null,
+
+            stopEmployeeShowDialog: false,
+            stopEmployeeEndDate: null,
+            stopEmployeeRevokeAccess: false,
+        % endif
+
+        % if request.has_perm('people_profile.edit_employee_history'):
+            editEmployeeHistoryShowDialog: false,
+            editEmployeeHistoryUUID: null,
+            editEmployeeHistoryStartDate: null,
+            editEmployeeHistoryEndDate: null,
+            editEmployeeHistoryEndDateRequired: false,
         % endif
     }
 
     let EmployeeTab = {
         template: '#employee-tab-template',
-        mixins: [SubmitMixin],
+        mixins: [TabMixin, SimpleRequestMixin],
         props: {
-            employee: Object,
-            employeeHistory: Array,
+            person: Object,
         },
-
-        computed: {
-
-            % if request.has_perm('employees.edit'):
-
-                editEmployeeIDSaveButtonText() {
-                    if (this.updatingEmployeeID) {
-                        return "Working, please wait..."
-                    }
-                    return "Save"
-                },
-
-            % endif
-        },
-
+        computed: {},
         methods: {
 
-            changeContentTitle(newTitle) {
-                this.$emit('change-content-title', newTitle)
+            refreshTabSuccess(response) {
+                this.employee = response.data.employee
+                this.employeeHistory = response.data.employee_history
             },
 
             % if request.has_perm('employees.edit'):
 
-                initEditEmployeeID() {
-                    this.newEmployeeID = this.employee.id
-                    this.updatingEmployeeID = false
-                    this.showEditEmployeeIDDialog = true
+                editEmployeeIdInit() {
+                    this.editEmployeeIdValue = this.employee.id
+                    this.editEmployeeIdShowDialog = true
                 },
 
-                updateEmployeeID() {
-                    this.updatingEmployeeID = true
-
+                editEmployeeIdSave() {
+                    this.editEmployeeIdSaving = true
                     let url = '${url('people.profile_update_employee_id', uuid=instance.uuid)}'
-
                     let params = {
-                        'employee_id': this.newEmployeeID,
+                        'employee_id': this.editEmployeeIdValue,
                     }
-
-                    let that = this
-                    this.submitData(url, params, function(response) {
-                        that.$emit('employee-updated', response.data.employee)
-                        that.showEditEmployeeIDDialog = false
-                        that.updatingEmployeeID = false
+                    this.simplePOST(url, params, response => {
+                        this.$emit('profile-changed', response.data)
+                        this.editEmployeeIdShowDialog = false
+                        this.editEmployeeIdSaving = false
+                        this.refreshTab()
+                    }, response => {
+                        this.editEmployeeIdSaving = false
                     })
                 },
 
@@ -1882,90 +1994,67 @@
             % if request.has_perm('people_profile.toggle_employee'):
 
                 startEmployeeInit() {
-                    this.employeeID = this.employee.id || null
+                    this.startEmployeeID = this.employee.id || null
+                    this.startEmployeeStartDate = null
                     this.startEmployeeShowDialog = true
                 },
 
-                startEmployee() {
+                startEmployeeSave() {
                     let url = '${url('people.profile_start_employee', uuid=person.uuid)}'
-
                     let params = {
-                        id: this.employeeID,
-                        start_date: this.employeeStartDate,
+                        id: this.startEmployeeID,
+                        start_date: this.startEmployeeStartDate,
                     }
 
-                    let that = this
-                    this.submitData(url, params, function(response) {
-                        that.startEmployeeSuccess(response.data)
+                    this.simplePOST(url, params, response => {
+                        this.$emit('profile-changed', response.data)
+                        this.startEmployeeShowDialog = false
+                        this.refreshTab()
                     })
                 },
 
-                startEmployeeSuccess(data) {
-                    this.$emit('employee-updated', data.employee)
-                    this.$emit('employee-history-updated', data.employee_history_data)
-                    this.$emit('change-content-title', data.dynamic_content_title)
-
-                    // let derived component do more here if needed
-                    this.startEmployeeSuccessExtra(data)
-
-                    this.startEmployeeShowDialog = false
+                stopEmployeeInit() {
+                    this.stopEmployeeShowDialog = true
                 },
 
-                startEmployeeSuccessExtra(data) {},
-
-                endEmployee() {
+                stopEmployeeSave() {
                     let url = '${url('people.profile_end_employee', uuid=person.uuid)}'
-
                     let params = {
-                        end_date: this.employeeEndDate,
-                        revoke_access: this.employeeRevokeAccess,
+                        end_date: this.stopEmployeeEndDate,
+                        revoke_access: this.stopEmployeeRevokeAccess,
                     }
 
-                    let that = this
-                    this.submitData(url, params, function(response) {
-                        that.endEmployeeSuccess(response.data)
+                    this.simplePOST(url, params, response => {
+                        this.$emit('profile-changed', response.data)
+                        this.stopEmployeeShowDialog = false
+                        this.refreshTab()
                     })
                 },
 
-                endEmployeeSuccess(data) {
-                    this.$emit('employee-updated', data.employee)
-                    this.$emit('employee-history-updated', data.employee_history_data)
-                    this.$emit('change-content-title', data.dynamic_content_title)
-
-                    // let derived component do more here if needed
-                    this.startEmployeeSuccessExtra(data)
-
-                    this.showStopEmployeeDialog = false
-                },
-
-                endEmployeeSuccessExtra(data) {},
-
             % endif
 
             % if request.has_perm('people_profile.edit_employee_history'):
 
-                editEmployeeHistory(row) {
-                    this.employeeHistoryUUID = row.uuid
-                    this.employeeHistoryStartDate = row.start_date
-                    this.employeeHistoryEndDate = row.end_date
-                    this.employeeHistoryEndDateRequired = !!row.end_date
-                    this.showEditEmployeeHistoryDialog = true
+                editEmployeeHistoryInit(row) {
+                    this.editEmployeeHistoryUUID = row.uuid
+                    this.editEmployeeHistoryStartDate = row.start_date
+                    this.editEmployeeHistoryEndDate = row.end_date
+                    this.editEmployeeHistoryEndDateRequired = !!row.end_date
+                    this.editEmployeeHistoryShowDialog = true
                 },
 
-                saveEmployeeHistory() {
+                editEmployeeHistorySave() {
                     let url = '${url('people.profile_edit_employee_history', uuid=person.uuid)}'
-
                     let params = {
-                        uuid: this.employeeHistoryUUID,
-                        start_date: this.employeeHistoryStartDate,
-                        end_date: this.employeeHistoryEndDate,
+                        uuid: this.editEmployeeHistoryUUID,
+                        start_date: this.editEmployeeHistoryStartDate,
+                        end_date: this.editEmployeeHistoryEndDate,
                     }
 
-                    let that = this
-                    this.submitData(url, params, function(response) {
-                        that.$emit('employee-updated', response.data.employee)
-                        that.$emit('employee-history-updated', response.data.employee_history_data)
-                        that.showEditEmployeeHistoryDialog = false
+                    this.simplePOST(url, params, response => {
+                        this.$emit('profile-changed', response.data)
+                        this.editEmployeeHistoryShowDialog = false
+                        this.refreshTab()
                     })
                 },
 
@@ -1990,112 +2079,102 @@
   <script type="text/javascript">
 
     let NotesTabData = {
-        noteShowDialog: false,
-        noteUUID: null,
-        noteType: null,
-        noteSubject: null,
-        noteText: null,
-        noteDeleting: false,
-        noteSaving: false,
+        refreshTabURL: '${url('people.profile_tab_notes', uuid=person.uuid)}',
+        notes: [],
+        noteTypeOptions: [],
+
+        % if request.has_any_perm('people_profile.add_note', 'people_profile.edit_note', 'people_profile.delete_note'):
+            editNoteShowDialog: false,
+            editNoteUUID: null,
+            editNoteDelete: false,
+            editNoteType: null,
+            editNoteSubject: null,
+            editNoteText: null,
+            editNoteSaving: false,
+        % endif
     }
 
     let NotesTab = {
         template: '#notes-tab-template',
-        mixins: [SimpleRequestMixin],
+        mixins: [TabMixin, SimpleRequestMixin],
         props: {
-            notes: Array,
-            noteTypeOptions: Array,
+            person: Object,
         },
-
-        computed: {
-
-            noteDialogTitle() {
-                if (this.noteUUID) {
-                    if (this.noteDeleting) {
-                        return "Delete Note"
-                    }
-                    return "Edit Note"
-                }
-                return "New Note"
-            },
-
-            noteSaveText() {
-                if (this.noteDeleting) {
-                    return "Delete Note"
-                }
-                return "Save Note"
-            },
-
-        },
-
+        computed: {},
         methods: {
 
+            refreshTabSuccess(response) {
+                this.notes = response.data.notes
+                this.noteTypeOptions = response.data.note_types
+            },
+
             % if request.has_perm('people_profile.add_note'):
 
-                noteNew() {
-                    this.noteUUID = null
-                    this.noteType = null
-                    this.noteSubject = null
-                    this.noteText = null
-                    this.noteDeleting = false
-                    this.noteShowDialog = true
+                addNoteInit() {
+                    this.editNoteUUID = null
+                    this.editNoteType = null
+                    this.editNoteSubject = null
+                    this.editNoteText = null
+                    this.editNoteDelete = false
+                    this.editNoteShowDialog = true
                 },
 
             % endif
 
             % if request.has_perm('people_profile.edit_note'):
 
-                noteEdit(note) {
-                    this.noteUUID = note.uuid
-                    this.noteType = note.note_type
-                    this.noteSubject = note.subject
-                    this.noteText = note.text
-                    this.noteDeleting = false
-                    this.noteShowDialog = true
+                editNoteInit(note) {
+                    this.editNoteUUID = note.uuid
+                    this.editNoteType = note.note_type
+                    this.editNoteSubject = note.subject
+                    this.editNoteText = note.text
+                    this.editNoteDelete = false
+                    this.editNoteShowDialog = true
                 },
 
             % endif
 
             % if request.has_perm('people_profile.delete_note'):
 
-                noteDelete(note) {
-                    this.noteUUID = note.uuid
-                    this.noteType = note.note_type
-                    this.noteSubject = note.subject
-                    this.noteText = note.text
-                    this.noteDeleting = true
-                    this.noteShowDialog = true
+                deleteNoteInit(note) {
+                    this.editNoteUUID = note.uuid
+                    this.editNoteType = note.note_type
+                    this.editNoteSubject = note.subject
+                    this.editNoteText = note.text
+                    this.editNoteDelete = true
+                    this.editNoteShowDialog = true
                 },
 
             % endif
 
             % if request.has_any_perm('people_profile.add_note', 'people_profile.edit_note', 'people_profile.delete_note'):
 
-                noteSave() {
-                    this.noteSaving = true
+                editNoteSave() {
+                    this.editNoteSaving = true
 
                     let url = null
-                    if (!this.noteUUID) {
+                    if (!this.editNoteUUID) {
                         url = '${master.get_action_url('profile_add_note', instance)}'
-                    } else if (this.noteDeleting) {
+                    } else if (this.editNoteDelete) {
                         url = '${master.get_action_url('profile_delete_note', instance)}'
                     } else {
                         url = '${master.get_action_url('profile_edit_note', instance)}'
                     }
 
                     let params = {
-                        uuid: this.noteUUID,
-                        note_type: this.noteType,
-                        note_subject: this.noteSubject,
-                        note_text: this.noteText,
+                        uuid: this.editNoteUUID,
+                        note_type: this.editNoteType,
+                        note_subject: this.editNoteSubject,
+                        note_text: this.editNoteText,
                     }
 
                     this.simplePOST(url, params, response => {
-                        this.$emit('new-notes-data', response.data.notes)
-                        this.noteSaving = false
-                        this.noteShowDialog = false
+                        this.$emit('profile-changed', response.data)
+                        this.editNoteSaving = false
+                        this.editNoteShowDialog = false
+                        this.refreshTab()
                     }, response => {
-                        this.notesSaving = false
+                        this.editNoteSaving = false
                     })
                 },
 
@@ -2116,76 +2195,106 @@
   </script>
 </%def>
 
+<%def name="declare_user_tab_vars()">
+  <script type="text/javascript">
+
+    let UserTabData = {
+        refreshTabURL: '${url('people.profile_tab_user', uuid=person.uuid)}',
+        users: [],
+    }
+
+    let UserTab = {
+        template: '#user-tab-template',
+        mixins: [TabMixin, SimpleRequestMixin],
+        props: {
+            person: Object,
+        },
+        computed: {},
+        methods: {
+
+            refreshTabSuccess(response) {
+                this.users = response.data.users
+            },
+        },
+    }
+
+  </script>
+</%def>
+
+<%def name="make_user_tab_component()">
+  ${self.declare_user_tab_vars()}
+  <script type="text/javascript">
+
+    UserTab.data = function() { return UserTabData }
+    Vue.component('user-tab', UserTab)
+
+  </script>
+</%def>
+
 <%def name="declare_profile_info_vars()">
   <script type="text/javascript">
 
     let ProfileInfoData = {
         activeTab: location.hash ? location.hash.substring(1) : undefined,
+        tabchecks: ${json.dumps(tabchecks)|n},
+        today: '${rattail_app.today()}',
+        profileLastChanged: Date.now(),
         person: ${json.dumps(person_data)|n},
-        customers: ${json.dumps(customers_data)|n},
-        % if expose_customer_shoppers:
-        shoppers: ${json.dumps(shoppers_data)|n},
-        % endif
-        member: null,           // TODO
-        members: ${json.dumps(members_data)|n},
-        employee: ${json.dumps(employee_data)|n},
-        employeeHistory: ${json.dumps(employee_history_data)|n},
-        notes: ${json.dumps(notes_data)|n},
-        noteTypeOptions: ${json.dumps(note_type_options)|n},
-        users: ${json.dumps(users_data)|n},
         phoneTypeOptions: ${json.dumps(phone_type_options)|n},
         emailTypeOptions: ${json.dumps(email_type_options)|n},
         maxLengths: ${json.dumps(max_lengths)|n},
 
         % if request.has_perm('people_profile.view_versions'):
-        loadingRevisions: false,
-        showingRevisionDialog: false,
-        revision: {},
-        revisionShowAllFields: false,
+            loadingRevisions: false,
+            showingRevisionDialog: false,
+            revision: {},
+            revisionShowAllFields: false,
         % endif
     }
 
     let ProfileInfo = {
         template: '#profile-info-template',
-        mixins: [FormPosterMixin],
-
-        % if request.has_perm('people_profile.view_versions'):
         props: {
-            viewingHistory: Boolean,
-            gettingRevisions: Boolean,
-            revisions: Array,
-            revisionVersionMap: null,
+            % if request.has_perm('people_profile.view_versions'):
+                viewingHistory: Boolean,
+                gettingRevisions: Boolean,
+                revisions: Array,
+                revisionVersionMap: null,
+            % endif
         },
-        % endif
-
         computed: {},
+        mounted() {
+
+            // auto-refresh whichever tab is shown first
+            ## TODO: how to not assume 'personal' is the default tab?
+            let tab = this.$refs['tab_' + (this.activeTab || 'personal')]
+            if (tab && tab.refreshTab) {
+                tab.refreshTab()
+            }
+        },
         methods: {
 
-            newNotesData(notes) {
-                this.notes = notes
-            },
-
-            personUpdated(person) {
-                this.person = person
-            },
-
-            employeeUpdated(employee) {
-                this.employee = employee
-            },
-
-            employeeHistoryUpdated(employeeHistory) {
-                this.employeeHistory = employeeHistory
-            },
-
-            changeContentTitle(newTitle) {
-                this.$emit('change-content-title', newTitle)
+            profileChanged(data) {
+                this.$emit('change-content-title', data.person.dynamic_content_title)
+                this.person = data.person
+                this.tabchecks = data.tabchecks
+                this.profileLastChanged = Date.now()
             },
 
             activeTabChanged(value) {
                 location.hash = value
+                this.refreshTabIfNeeded(value)
                 this.activeTabChangedExtra(value)
             },
 
+            refreshTabIfNeeded(key) {
+                // TODO: this is *always* refreshing, should be more selective (?)
+                let tab = this.$refs['tab_' + key]
+                if (tab && tab.refreshIfNeeded) {
+                    tab.refreshIfNeeded(this.profileLastChanged)
+                }
+            },
+
             activeTabChangedExtra(value) {},
 
             % if request.has_perm('people_profile.view_versions'):
@@ -2221,7 +2330,6 @@
   <script type="text/javascript">
 
     ProfileInfo.data = function() { return ProfileInfoData }
-
     Vue.component('profile-info', ProfileInfo)
 
   </script>
@@ -2232,54 +2340,48 @@
   <script type="text/javascript">
 
     % if request.has_perm('people_profile.view_versions'):
-    ThisPage.props.viewingHistory = Boolean
-    ThisPage.props.gettingRevisions = Boolean
-    ThisPage.props.revisions = Array
-    ThisPage.props.revisionVersionMap = null
+        ThisPage.props.viewingHistory = Boolean
+        ThisPage.props.gettingRevisions = Boolean
+        ThisPage.props.revisions = Array
+        ThisPage.props.revisionVersionMap = null
     % endif
 
-    ThisPage.methods.changeContentTitle = function(newTitle) {
-        this.$emit('change-content-title', newTitle)
-    }
+    let TabMixin = {
 
-    var SubmitMixin = {
         data() {
             return {
-                csrftoken: ${json.dumps(request.session.get_csrf_token() or request.session.new_csrf_token())|n},
+                refreshed: null,
+                refreshTabURL: null,
+                refreshingTab: false,
             }
         },
-
         methods: {
-            submitData(url, params, success, failure) {
-                let headers = {
-                    'X-CSRF-TOKEN': this.csrftoken,
+
+            refreshIfNeeded(time) {
+                if (this.refreshed && time && this.refreshed > time) {
+                    return
                 }
-                this.$http.post(url, params, {headers: headers}).then((response) => {
-                    if (response.data.success) {
-                        if (success) {
-                            success(response)
-                        }
-                    } else {
-                        this.$buefy.toast.open({
-                            message: "Save failed:  " + (response.data.error || "(unknown error)"),
-                            type: 'is-danger',
-                            duration: 4000, // 4 seconds
-                        })
-                        if (failure) {
-                            failure()
-                        }
-                    }
-                }).catch((error) => {
-                    this.$buefy.toast.open({
-                        message: "Save failed:  (unknown error)",
-                        type: 'is-danger',
-                        duration: 4000, // 4 seconds
-                    })
-                    if (failure) {
-                        failure()
-                    }
-                })
+                this.refreshTab()
             },
+
+            refreshTab() {
+
+                if (this.refreshTabURL) {
+                    this.refreshingTab = true
+                    this.simpleGET(this.refreshTabURL, {}, response => {
+                        this.refreshTabSuccess(response)
+                        this.refreshTabSuccessExtra(response)
+                        this.refreshed = Date.now()
+                        this.refreshingTab = false
+                    })
+                }
+            },
+
+            // nb. subclass must define this as needed
+            refreshTabSuccess(response) {},
+
+            // nb. subclass may define this if needed
+            refreshTabSuccessExtra(response) {},
         },
     }
 
@@ -2289,8 +2391,14 @@
 <%def name="make_this_page_component()">
   ${parent.make_this_page_component()}
   ${self.make_personal_tab_component()}
+  ${self.make_member_tab_component()}
+  ${self.make_customer_tab_component()}
+  % if expose_customer_shoppers:
+      ${self.make_shopper_tab_component()}
+  % endif
   ${self.make_employee_tab_component()}
   ${self.make_notes_tab_component()}
+  ${self.make_user_tab_component()}
   ${self.make_profile_info_component()}
 </%def>
 
diff --git a/tailbone/views/members.py b/tailbone/views/members.py
index 197efa41..a004b5a3 100644
--- a/tailbone/views/members.py
+++ b/tailbone/views/members.py
@@ -390,6 +390,11 @@ class MemberView(MasterView):
             {'section': 'rattail',
              'option': 'members.straight_to_profile',
              'type': bool},
+
+            # Relationships
+            {'section': 'rattail',
+             'option': 'members.max_one_per_person',
+             'type': bool},
         ]
 
 
diff --git a/tailbone/views/people.py b/tailbone/views/people.py
index d7f84849..0aaf4c26 100644
--- a/tailbone/views/people.py
+++ b/tailbone/views/people.py
@@ -455,63 +455,81 @@ class PersonView(MasterView):
         self.viewing = True
         app = self.get_rattail_app()
         person = self.get_instance()
-        employee = app.get_employee(person)
+
         context = {
             'person': person,
             'instance': person,
             'instance_title': self.get_instance_title(person),
-            'today': localtime(self.rattail_config).date(),
+            'dynamic_content_title': self.get_context_content_title(person),
+            'tabchecks': self.get_context_tabchecks(person),
             'person_data': self.get_context_person(person),
             'phone_type_options': self.get_phone_type_options(),
             'email_type_options': self.get_email_type_options(),
             'max_lengths': self.get_max_lengths(),
-            'customers_data': self.get_context_customers(person),
-            # TODO: deprecate / remove this
-            'customer_xref_buttons': self.get_customer_xref_buttons(person),
             'expose_customer_people': self.customers_should_expose_people(),
             'expose_customer_shoppers': self.customers_should_expose_shoppers(),
-            'members_data': self.get_context_members(person),
-            'member_xref_buttons': self.get_member_xref_buttons(person),
-            'employee': employee,
-            'employee_data': self.get_context_employee(employee) if employee else {},
-            'employee_view_url': self.request.route_url('employees.view', uuid=employee.uuid) if employee else None,
-            'employee_history': employee.get_current_history() if employee else None,
-            'employee_history_data': self.get_context_employee_history(employee),
-            'notes_data': self.get_context_notes(person),
-            'note_type_options': self.get_note_type_options(),
-            'users_data': self.get_context_users(person),
-            'dynamic_content_title': self.get_context_content_title(person),
+            'max_one_member': app.get_membership_handler().max_one_per_person(),
         }
 
-        if context['expose_customer_shoppers']:
-            shoppers = person.customer_shoppers
-            # TODO: what a hack! surely this belongs in handler at least..?
-            shoppers = [shopper for shopper in shoppers
-                        if shopper.shopper_number != 1]
-            context['shoppers_data'] = self.get_context_shoppers(shoppers)
-
         if self.request.has_perm('people_profile.view_versions'):
             context['revisions_grid'] = self.profile_revisions_grid(person)
 
-        template = 'view_profile_buefy'
-        return self.render_to_response(template, context)
+        return self.render_to_response('view_profile_buefy', context)
 
-    # TODO: deprecate / remove this
-    def get_customer_xref_buttons(self, person):
-        buttons = []
-        for supp in self.iter_view_supplements():
-            if hasattr(supp, 'get_customer_xref_buttons'):
-                buttons.extend(supp.get_customer_xref_buttons(person) or [])
-        buttons = self.normalize_xref_buttons(buttons)
-        return buttons
+    def get_context_tabchecks(self, person):
+        app = self.get_rattail_app()
+        membership = app.get_membership_handler()
+        clientele = app.get_clientele_handler()
+        tabchecks = {}
 
-    def get_member_xref_buttons(self, person):
-        buttons = []
-        for supp in self.iter_view_supplements():
-            if hasattr(supp, 'get_member_xref_buttons'):
-                buttons.extend(supp.get_member_xref_buttons(person) or [])
-        buttons = self.normalize_xref_buttons(buttons)
-        return buttons
+        # TODO: for efficiency, should only calculate checks for tabs
+        # actually in use by app..(how) should that be configurable?
+
+        # personal
+        tabchecks['personal'] = True
+
+        # member
+        if membership.max_one_per_person():
+            member = app.get_member(person)
+            tabchecks['member'] = bool(member and member.active)
+        else:
+            members = membership.get_members_for_account_holder(person)
+            tabchecks['member'] = any([m.active for m in members])
+
+        # customer
+        customers = clientele.get_customers_for_account_holder(person)
+        tabchecks['customer'] = bool(customers)
+
+        # shopper
+        # TODO: what a hack! surely some of this belongs in handler
+        shoppers = person.customer_shoppers
+        shoppers = [shopper for shopper in shoppers
+                    if shopper.shopper_number != 1]
+        tabchecks['shopper'] = bool(shoppers)
+
+        # employee
+        employee = app.get_employee(person)
+        tabchecks['employee'] = bool(employee and employee.status == self.enum.EMPLOYEE_STATUS_CURRENT)
+
+        # notes
+        tabchecks['notes'] = bool(person.notes)
+
+        # user
+        tabchecks['user'] = bool(person.users)
+
+        return tabchecks
+
+    def profile_changed_response(self, person):
+        """
+        Return common context result for all AJAX views which may
+        change the profile details.  This is enough to update the
+        page-wide things, and let other tabs know they should be
+        refreshed when next displayed.
+        """
+        return {
+            'person': self.get_context_person(person),
+            'tabchecks': self.get_context_tabchecks(person),
+        }
 
     def template_kwargs_view_profile(self, **kwargs):
         """
@@ -716,10 +734,12 @@ class PersonView(MasterView):
 
     def get_context_member(self, member):
         app = self.get_rattail_app()
+        person = app.get_person(member)
+
         profile_url = None
-        if member.person:
+        if person:
             profile_url = self.request.route_url('people.view_profile',
-                                                 uuid=member.person_uuid)
+                                                 uuid=person.uuid)
 
         key = self.get_member_key_field()
         equity_total = sum([payment.amount for payment in member.equity_payments])
@@ -739,6 +759,7 @@ class PersonView(MasterView):
             'view_url': self.request.route_url('members.view', uuid=member.uuid),
             'view_profile_url': profile_url,
             'equity_total_display': app.render_currency(equity_total),
+            'external_links': [],
         }
 
         membership_type = member.membership_type
@@ -825,6 +846,19 @@ class PersonView(MasterView):
         customer = handler.ensure_customer(person)
         return customer
 
+    def profile_tab_personal(self):
+        """
+        Fetch personal tab data for profile view.
+        """
+        # TODO: no need to return primary person data, since that
+        # always comes back via normal profile_changed_response()
+        # ..so for now this is a no-op..
+
+        # person = self.get_instance()
+        return {
+            # 'person': self.get_context_person(person),
+        }
+
     def profile_edit_name(self):
         """
         View which allows a person's name to be updated.
@@ -838,11 +872,7 @@ class PersonView(MasterView):
                                   last=data['last_name'])
 
         self.Session.flush()
-        return {
-            'success': True,
-            'person': self.get_context_person(person),
-            'dynamic_content_title': self.get_context_content_title(person),
-        }
+        return self.profile_changed_response(person)
 
     def get_context_phones(self, person):
         data = []
@@ -872,10 +902,7 @@ class PersonView(MasterView):
             return {'error': simple_error(error)}
 
         self.Session.flush()
-        return {
-            'success': True,
-            'person': self.get_context_person(person),
-        }
+        return self.profile_changed_response(person)
 
     def profile_update_phone(self):
         """
@@ -902,10 +929,7 @@ class PersonView(MasterView):
             return {'error': simple_error(error)}
 
         self.Session.flush()
-        return {
-            'success': True,
-            'person': self.get_context_person(person),
-        }
+        return self.profile_changed_response(person)
 
     def profile_delete_phone(self):
         """
@@ -925,10 +949,7 @@ class PersonView(MasterView):
         person.remove_phone(phone)
 
         self.Session.flush()
-        return {
-            'success': True,
-            'person': self.get_context_person(person),
-        }
+        return self.profile_changed_response(person)
 
     def profile_set_preferred_phone(self):
         """
@@ -948,10 +969,7 @@ class PersonView(MasterView):
         person.set_primary_phone(phone)
 
         self.Session.flush()
-        return {
-            'success': True,
-            'person': self.get_context_person(person),
-        }
+        return self.profile_changed_response(person)
 
     def get_context_emails(self, person):
         data = []
@@ -987,10 +1005,7 @@ class PersonView(MasterView):
             return {'error': simple_error(error)}
 
         self.Session.flush()
-        return {
-            'success': True,
-            'person': self.get_context_person(person),
-        }
+        return self.profile_changed_response(person)
 
     def profile_update_email(self):
         """
@@ -1013,10 +1028,7 @@ class PersonView(MasterView):
             return {'error': simple_error(error)}
 
         self.Session.flush()
-        return {
-            'success': True,
-            'person': self.get_context_person(person),
-        }
+        return self.profile_changed_response(person)
 
     def profile_delete_email(self):
         """
@@ -1036,11 +1048,7 @@ class PersonView(MasterView):
         person.remove_email(email)
 
         self.Session.flush()
-
-        return {
-            'success': True,
-            'person': self.get_context_person(person),
-        }
+        return self.profile_changed_response(person)
 
     def profile_set_preferred_email(self):
         """
@@ -1060,10 +1068,7 @@ class PersonView(MasterView):
         person.set_primary_email(email)
 
         self.Session.flush()
-        return {
-            'success': True,
-            'person': self.get_context_person(person),
-        }
+        return self.profile_changed_response(person)
 
     def profile_edit_address(self):
         """
@@ -1077,9 +1082,66 @@ class PersonView(MasterView):
         self.people_handler.update_address(person, address, **data)
 
         self.Session.flush()
+        return self.profile_changed_response(person)
+
+    def profile_tab_member(self):
+        """
+        Fetch member tab data for profile view.
+        """
+        app = self.get_rattail_app()
+        membership = app.get_membership_handler()
+        person = self.get_instance()
+
+        max_one_member = membership.max_one_per_person()
+
+        context = {
+            'max_one_member': max_one_member,
+        }
+
+        if max_one_member:
+            member = app.get_member(person)
+            context['member'] = {'exists': bool(member)}
+            if member:
+                context['member'].update(self.get_context_member(member))
+        else:
+            context['members'] = self.get_context_members(person)
+
+        return context
+
+    def profile_tab_customer(self):
+        """
+        Fetch customer tab data for profile view.
+        """
+        person = self.get_instance()
         return {
-            'success': True,
-            'person': self.get_context_person(person),
+            'customers': self.get_context_customers(person),
+        }
+
+    def profile_tab_shopper(self):
+        """
+        Fetch shopper tab data for profile view.
+        """
+        person = self.get_instance()
+
+        # TODO: what a hack! surely some of this belongs in handler
+        shoppers = person.customer_shoppers
+        shoppers = [shopper for shopper in shoppers
+                    if shopper.shopper_number != 1]
+
+        return {
+            'shoppers': self.get_context_shoppers(shoppers),
+        }
+
+    def profile_tab_employee(self):
+        """
+        Fetch employee tab data for profile view.
+        """
+        app = self.get_rattail_app()
+        person = self.get_instance()
+        employee = app.get_employee(person)
+        return {
+            'employee': self.get_context_employee(employee) if employee else {},
+            'employee_history': self.get_context_employee_history(employee),
         }
 
     def profile_start_employee(self):
@@ -1099,18 +1161,7 @@ class PersonView(MasterView):
         employee = handler.begin_employment(person, start_date,
                                             employee_id=data['id'])
         self.Session.flush()
-        return self.profile_start_employee_result(employee, start_date)
-
-    def profile_start_employee_result(self, employee, start_date):
-        person = employee.person
-        return {
-            'success': True,
-            'employee': self.get_context_employee(employee),
-            'employee_view_url': self.request.route_url('employees.view', uuid=employee.uuid),
-            'start_date': str(start_date),
-            'employee_history_data': self.get_context_employee_history(employee),
-            'dynamic_content_title': self.get_context_content_title(person),
-        }
+        return self.profile_changed_response(person)
 
     def profile_end_employee(self):
         """
@@ -1130,18 +1181,7 @@ class PersonView(MasterView):
         handler.end_employment(employee, end_date,
                                revoke_access=data.get('revoke_access'))
         self.Session.flush()
-        return self.profile_end_employee_result(employee, end_date)
-
-    def profile_end_employee_result(self, employee, end_date):
-        person = employee.person
-        return {
-            'success': True,
-            'employee': self.get_context_employee(employee),
-            'employee_view_url': self.request.route_url('employees.view', uuid=employee.uuid),
-            'end_date': str(end_date),
-            'employee_history_data': self.get_context_employee_history(employee),
-            'dynamic_content_title': self.get_context_content_title(person),
-        }
+        return self.profile_changed_response(person)
 
     def profile_edit_employee_history(self):
         """
@@ -1167,14 +1207,7 @@ class PersonView(MasterView):
             history.end_date = end_date
 
         self.Session.flush()
-        current_history = employee.get_current_history()
-        return {
-            'success': True,
-            'employee': self.get_context_employee(employee),
-            'start_date': str(current_history.start_date),
-            'end_date': str(current_history.end_date or ''),
-            'employee_history_data': self.get_context_employee_history(employee),
-        }
+        return self.profile_changed_response(person)
 
     def profile_update_employee_id(self):
         """
@@ -1188,11 +1221,27 @@ class PersonView(MasterView):
 
         data = self.request.json_body
         employee.id = data['employee_id']
-        self.Session.flush()
 
+        self.Session.flush()
+        return self.profile_changed_response(person)
+
+    def profile_tab_notes(self):
+        """
+        Fetch notes tab data for profile view.
+        """
+        person = self.get_instance()
         return {
-            'success': True,
-            'employee': self.get_context_employee(employee),
+            'notes': self.get_context_notes(person),
+            'note_types': self.get_note_type_options(),
+        }
+
+    def profile_tab_user(self):
+        """
+        Fetch user tab data for profile view.
+        """
+        person = self.get_instance()
+        return {
+            'users': self.get_context_users(person),
         }
 
     def profile_revisions_grid(self, person):
@@ -1413,12 +1462,12 @@ class PersonView(MasterView):
     def profile_add_note(self):
         person = self.get_instance()
         form = self.make_note_form('create', person)
-        if form.validate():
-            note = self.create_note(person, form)
-            self.Session.flush()
-            return self.profile_add_note_success(note)
-        else:
-            return self.profile_add_note_failure(person, form)
+        if not form.validate():
+            return {'error': str(form.make_deform_form().error)}
+
+        note = self.create_note(person, form)
+        self.Session.flush()
+        return self.profile_changed_response(person)
 
     def create_note(self, person, form):
         note = model.PersonNote()
@@ -1429,25 +1478,15 @@ class PersonView(MasterView):
         person.notes.append(note)
         return note
 
-    def profile_add_note_success(self, note, person=None):
-        return {
-            'notes': self.get_context_notes(person or note.person),
-        }
-
-    def profile_add_note_failure(self, person, form):
-        return {
-            'error': str(form.make_deform_form().error),
-        }
-
     def profile_edit_note(self):
         person = self.get_instance()
         form = self.make_note_form('edit', person)
-        if form.validate():
-            note = self.update_note(person, form)
-            self.Session.flush()
-            return self.profile_edit_note_success(note)
-        else:
-            return self.profile_edit_note_failure(person, form)
+        if not form.validate():
+            return {'error': str(form.make_deform_form().error)}
+
+        note = self.update_note(person, form)
+        self.Session.flush()
+        return self.profile_changed_response(person)
 
     def update_note(self, person, form):
         note = self.Session.get(model.PersonNote, form.validated['uuid'])
@@ -1455,32 +1494,20 @@ class PersonView(MasterView):
         note.text = form.validated['note_text']
         return note
 
-    def profile_edit_note_success(self, note):
-        return self.profile_add_note_success(note)
-
-    def profile_edit_note_failure(self, person, form):
-        return self.profile_add_note_failure(person, form)
-
     def profile_delete_note(self):
         person = self.get_instance()
         form = self.make_note_form('delete', person)
-        if form.validate():
-            self.delete_note(person, form)
-            self.Session.flush()
-            return self.profile_delete_note_success(person)
-        else:
-            return self.profile_delete_note_failure(person, form)
+        if not form.validate():
+            return {'error': str(form.make_deform_form().error)}
+
+        self.delete_note(person, form)
+        self.Session.flush()
+        return self.profile_changed_response(person)
 
     def delete_note(self, person, form):
         note = self.Session.get(model.PersonNote, form.validated['uuid'])
         self.Session.delete(note)
 
-    def profile_delete_note_success(self, person):
-        return self.profile_add_note_success(None, person=person)
-
-    def profile_delete_note_failure(self, person, form):
-        return self.profile_add_note_failure(person, form)
-
     def make_user(self):
         uuid = self.request.POST['person_uuid']
         person = self.Session.get(model.Person, uuid)
@@ -1553,6 +1580,14 @@ class PersonView(MasterView):
         config.add_view(cls, attr='view_profile', route_name='{}.view_profile'.format(route_prefix),
                         permission='{}.view_profile'.format(permission_prefix))
 
+        # profile - refresh personal tab
+        config.add_route(f'{route_prefix}.profile_tab_personal',
+                         f'{instance_url_prefix}/profile/tab-personal',
+                         request_method='GET')
+        config.add_view(cls, attr='profile_tab_personal',
+                        route_name=f'{route_prefix}.profile_tab_personal',
+                        renderer='json')
+
         # profile - edit personal details
         config.add_tailbone_permission('people_profile',
                                        'people_profile.edit_person',
@@ -1648,6 +1683,38 @@ class PersonView(MasterView):
                         renderer='json',
                         permission='people_profile.edit_person')
 
+        # profile - refresh member tab
+        config.add_route(f'{route_prefix}.profile_tab_member',
+                         f'{instance_url_prefix}/profile/tab-member',
+                         request_method='GET')
+        config.add_view(cls, attr='profile_tab_member',
+                        route_name=f'{route_prefix}.profile_tab_member',
+                        renderer='json')
+
+        # profile - refresh customer tab
+        config.add_route(f'{route_prefix}.profile_tab_customer',
+                         f'{instance_url_prefix}/profile/tab-customer',
+                         request_method='GET')
+        config.add_view(cls, attr='profile_tab_customer',
+                        route_name=f'{route_prefix}.profile_tab_customer',
+                        renderer='json')
+
+        # profile - refresh shopper tab
+        config.add_route(f'{route_prefix}.profile_tab_shopper',
+                         f'{instance_url_prefix}/profile/tab-shopper',
+                         request_method='GET')
+        config.add_view(cls, attr='profile_tab_shopper',
+                        route_name=f'{route_prefix}.profile_tab_shopper',
+                        renderer='json')
+
+        # profile - refresh employee tab
+        config.add_route(f'{route_prefix}.profile_tab_employee',
+                         f'{instance_url_prefix}/profile/tab-employee',
+                         request_method='GET')
+        config.add_view(cls, attr='profile_tab_employee',
+                        route_name=f'{route_prefix}.profile_tab_employee',
+                        renderer='json')
+
         # profile - start employee
         config.add_route('{}.profile_start_employee'.format(route_prefix), '{}/profile/start-employee'.format(instance_url_prefix),
                          request_method='POST')
@@ -1675,6 +1742,22 @@ class PersonView(MasterView):
                         renderer='json',
                         permission='employees.edit')
 
+        # profile - refresh notes tab
+        config.add_route(f'{route_prefix}.profile_tab_notes',
+                         f'{instance_url_prefix}/profile/tab-notes',
+                         request_method='GET')
+        config.add_view(cls, attr='profile_tab_notes',
+                        route_name=f'{route_prefix}.profile_tab_notes',
+                        renderer='json')
+
+        # profile - refresh user tab
+        config.add_route(f'{route_prefix}.profile_tab_user',
+                         f'{instance_url_prefix}/profile/tab-user',
+                         request_method='GET')
+        config.add_view(cls, attr='profile_tab_user',
+                        route_name=f'{route_prefix}.profile_tab_user',
+                        renderer='json')
+
         # profile - revisions data
         config.add_tailbone_permission('people_profile',
                                        'people_profile.view_versions',