Repository: chaoss/grimoirelab-sortinghat (language: python)

Issue:
Improve UX when loading big/complex profiles
When loading big or complex profiles this is the output while it loads:

![imagen](https://github.com/chaoss/grimoirelab-sortinghat/assets/36269471/24e1841a-859d-4257-9e32-38ccdb4a7db9)

Just changing `no name` with `Loading this profile...` would do a lot for the UX.


Discussion / hints:

Fix patch:
diff --git a/releases/unreleased/add-missing-loading-and-error-indicators.yml b/releases/unreleased/add-missing-loading-and-error-indicators.yml
new file mode 100644
index 00000000..06a90977
--- /dev/null
+++ b/releases/unreleased/add-missing-loading-and-error-indicators.yml
@@ -0,0 +1,9 @@
+---
+title: Improve loading and error indicators
+category: added
+author: Eva Millán <evamillan@bitergia.com>
+issue: 866
+notes: >
+  Added error and loading messages to improve the user experience
+  when the data takes time to load.
+  
diff --git a/ui/src/apollo/queries.js b/ui/src/apollo/queries.js
index 38ec2241..54963179 100644
--- a/ui/src/apollo/queries.js
+++ b/ui/src/apollo/queries.js
@@ -494,4 +494,6 @@ export {
   getOrganization,
   getScheduledTasks,
   findOrganization,
+  GET_INDIVIDUAL_BYUUID,
+  GET_ORGANIZATION,
 };
diff --git a/ui/src/components/IndividualsTable.stories.js b/ui/src/components/IndividualsTable.stories.js
index d70458fc..aad7c8fe 100644
--- a/ui/src/components/IndividualsTable.stories.js
+++ b/ui/src/components/IndividualsTable.stories.js
@@ -590,3 +590,50 @@ export const HiddenHeader = () => ({
     isExpandable: false,
   }),
 });
+
+export const OnError = () => ({
+  components: { IndividualsTable },
+  template: IndividualsTableTemplate,
+  methods: {
+    queryIndividuals() {
+      throw new Error("Test error message");
+    },
+    deleteIndividual() {
+      return true;
+    },
+    getCountries() {
+      return true;
+    },
+    recommendMatches() {
+      return {
+        data: {
+          recommendMatches: {
+            jobId: "b65d2170-a560-4b20-954e-fc8c9f5afdd4",
+          },
+        },
+      };
+    },
+  },
+  provide: () => ({
+    getRecommendations: () => {},
+    getRecommendationsCount: () => {
+      return {
+        data: {
+          recommendedMerge: {
+            pageInfo: {
+              totalResults: 0,
+            },
+          },
+        },
+      };
+    },
+    manageRecommendation: () => {},
+  }),
+  data: () => ({
+    query: query,
+    hideHeader: false,
+    outlined: true,
+    isExpandable: false,
+  }),
+});
+
diff --git a/ui/src/components/IndividualsTable.vue b/ui/src/components/IndividualsTable.vue
index 123235fa..d28692fa 100644
--- a/ui/src/components/IndividualsTable.vue
+++ b/ui/src/components/IndividualsTable.vue
@@ -204,6 +204,15 @@
           </v-col>
         </div>
       </template>
+      <template v-slot:no-data>
+        <v-alert v-if="error" class="text-left" density="compact" type="error">
+          {{ error }}
+        </v-alert>
+        <p v-else-if="Object.keys(filters).length > 0">
+          No results matched your search.
+        </p>
+        <p v-else>No data available</p>
+      </template>
     </v-data-table-server>
 
     <v-dialog v-model="dialog.open" max-width="500px">
@@ -447,6 +456,7 @@ export default {
         uuid: "",
       },
       selected: [],
+      error: null,
     };
   },
   computed: {
@@ -472,24 +482,30 @@ export default {
     ) {
       if (this.disabledSearch) return;
       this.loading = true;
-      let response = await this.fetchPage(
-        page,
-        this.itemsPerPage,
-        filters,
-        orderBy
-      );
-      if (response) {
-        this.individuals = formatIndividuals(
-          response.data.individuals.entities
+      this.error = null;
+      try {
+        let response = await this.fetchPage(
+          page,
+          this.itemsPerPage,
+          filters,
+          orderBy
         );
-        this.pageCount = response.data.individuals.pageInfo.numPages;
-        this.page = response.data.individuals.pageInfo.page;
-        this.totalResults = response.data.individuals.pageInfo.totalResults;
-        this.allSelected = false;
-        this.$emit("updateIndividuals", this.individuals);
+        if (response) {
+          this.individuals = formatIndividuals(
+            response.data.individuals.entities
+          );
+          this.pageCount = response.data.individuals.pageInfo.numPages;
+          this.page = response.data.individuals.pageInfo.page;
+          this.totalResults = response.data.individuals.pageInfo.totalResults;
+          this.allSelected = false;
+          this.$emit("updateIndividuals", this.individuals);
+        }
+      } catch (error) {
+        this.error = this.$getErrorMessage(error);
+      } finally {
+        this.loading = false;
+        this.selected = [];
       }
-      this.loading = false;
-      this.selected = [];
     },
     startDrag(item, isSelected, toggleSelect, event) {
       if (!isSelected(item)) {
diff --git a/ui/src/components/JobsTable.stories.js b/ui/src/components/JobsTable.stories.js
index 91715d4d..fe14d127 100644
--- a/ui/src/components/JobsTable.stories.js
+++ b/ui/src/components/JobsTable.stories.js
@@ -117,3 +117,27 @@ export const Empty = () => ({
     },
   }),
 });
+
+export const OnError = () => ({
+  components: { JobsTable },
+  template: JobsTableTemplate,
+  methods: {
+    getJobs() {
+      throw new Error("Test error message")
+    },
+  },
+  data: () => ({
+    query: {
+      data: {
+        jobs: {
+          entities: [],
+          pageInfo: {
+            page: 1,
+            numPages: 1,
+            totalResults: 0,
+          },
+        },
+      },
+    },
+  }),
+});
diff --git a/ui/src/components/JobsTable.vue b/ui/src/components/JobsTable.vue
index 7ab55a24..6060d6cb 100644
--- a/ui/src/components/JobsTable.vue
+++ b/ui/src/components/JobsTable.vue
@@ -15,7 +15,9 @@
         Add
       </v-btn>
     </header>
-    <v-table v-if="jobs.length > 0">
+    <v-alert v-if="error" :text="error" density="compact" type="error" />
+    <v-progress-linear v-if="isLoading" color="primary" indeterminate />
+    <v-table v-else-if="jobs.length > 0">
       <template v-slot:default>
         <thead>
           <tr>
@@ -89,6 +91,8 @@ export default {
       pageSize: 10,
       pageCount: 1,
       openModal: false,
+      error: null,
+      isLoading: false,
     };
   },
   created() {
@@ -96,11 +100,22 @@ export default {
   },
   methods: {
     async getPaginatedJobs(page = this.page, pageSize = this.pageSize) {
-      let response = await this.getJobs(page, pageSize);
-      if (response) {
-        this.jobs = response.data.jobs.entities;
-        this.pageCount = response.data.jobs.pageInfo.numPages;
-        this.page = response.data.jobs.pageInfo.page;
+      this.isLoading = true;
+      try {
+        let response = await this.getJobs(page, pageSize);
+        if (response.data.jobs.entities) {
+          this.jobs = response.data.jobs.entities;
+          this.pageCount = response.data.jobs.pageInfo.numPages;
+          this.page = response.data.jobs.pageInfo.page;
+        } else if (response.errors) {
+          this.error = `Error fetching data: ${this.$getErrorMessage(
+            response.errors
+          )}`;
+        }
+      } catch (error) {
+        this.error = `Error fetching data: ${this.$getErrorMessage(error)}`;
+      } finally {
+        this.isLoading = false;
       }
     },
     getColor(status) {
diff --git a/ui/src/components/LoadingSpinner.stories.js b/ui/src/components/LoadingSpinner.stories.js
new file mode 100644
index 00000000..d18a78cd
--- /dev/null
+++ b/ui/src/components/LoadingSpinner.stories.js
@@ -0,0 +1,24 @@
+import LoadingSpinner from "./LoadingSpinner.vue";
+
+export default {
+  title: "LoadingSpinner",
+  excludeStories: /.*Data$/,
+};
+
+const template = `<loading-spinner :label="label"/>`;
+
+export const Default = () => ({
+  components: { LoadingSpinner },
+  template: template,
+  data: () => ({
+    label: null,
+  }),
+});
+
+export const Label = () => ({
+  components: { LoadingSpinner },
+  template: template,
+  data: () => ({
+    label: "Loading...",
+  }),
+});
diff --git a/ui/src/components/LoadingSpinner.vue b/ui/src/components/LoadingSpinner.vue
new file mode 100644
index 00000000..a803e11c
--- /dev/null
+++ b/ui/src/components/LoadingSpinner.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="d-flex flex-column justify-center align-center pa-4 h-100">
+    <v-progress-circular :size="size" color="primary" indeterminate />
+    <p v-if="label" class="subtitle-1 text-medium-emphasis mt-4">{{ label }}</p>
+  </div>
+</template>
+<script>
+export default {
+  name: "LoadingSpinner",
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    size: {
+      type: [String, Number],
+      required: false,
+      default: 48,
+    },
+  },
+};
+</script>
diff --git a/ui/src/components/OrganizationsTable.stories.js b/ui/src/components/OrganizationsTable.stories.js
index 63deed82..74ac7e30 100644
--- a/ui/src/components/OrganizationsTable.stories.js
+++ b/ui/src/components/OrganizationsTable.stories.js
@@ -301,3 +301,41 @@ export const Groups = () => ({
     name: "Groups",
   }),
 });
+
+export const OnError = () => ({
+  components: { OrganizationsTable },
+  template: OrganizationsTableTemplate,
+  methods: {
+    getOrganizations(page, items, filters) {
+      throw new Error("Test error message");
+    },
+    enroll() {
+      return true;
+    },
+    addOrganization() {
+      return;
+    },
+    addDomain() {
+      return;
+    },
+    deleteDomain() {
+      return;
+    },
+    deleteOrganization() {
+      return;
+    },
+    addTeam() {
+      return;
+    },
+    deleteTeam() {
+      return;
+    },
+    fetchTeams() {
+      return;
+    },
+  },
+  data: () => ({
+    isGroup: false,
+    name: "Organizations",
+  }),
+});
diff --git a/ui/src/components/OrganizationsTable.vue b/ui/src/components/OrganizationsTable.vue
index 23015d44..8b01fe91 100644
--- a/ui/src/components/OrganizationsTable.vue
+++ b/ui/src/components/OrganizationsTable.vue
@@ -98,6 +98,15 @@
           ></v-text-field>
         </div>
       </template>
+      <template v-slot:no-data>
+        <v-alert v-if="error" class="text-left" density="compact" type="error">
+          {{ error }}
+        </v-alert>
+        <p v-else-if="Object.keys(filters).length > 0">
+          No results matched your search.
+        </p>
+        <p v-else>No data available</p>
+      </template>
     </v-data-table-server>
 
     <organization-modal
@@ -267,6 +276,7 @@ export default {
         teamName: "",
       },
       loading: false,
+      error: null,
     };
   },
   created() {
@@ -275,14 +285,20 @@ export default {
   methods: {
     async getTableItems(page = this.page, filters = this.filters) {
       this.loading = true;
-      let response = await this.fetchPage(page, this.itemsPerPage, filters);
-      if (response) {
-        this.items = response.entities;
-        this.pageCount = response.pageInfo.numPages;
-        this.page = response.pageInfo.page;
-        this.totalResults = response.pageInfo.totalResults;
+      this.error = null;
+      try {
+        let response = await this.fetchPage(page, this.itemsPerPage, filters);
+        if (response) {
+          this.items = response.entities;
+          this.pageCount = response.pageInfo.numPages;
+          this.page = response.pageInfo.page;
+          this.totalResults = response.pageInfo.totalResults;
+        }
+      } catch (error) {
+        this.error = this.$getErrorMessage(error);
+      } finally {
+        this.loading = false;
       }
-      this.loading = false;
     },
     confirmEnroll(event) {
       Object.assign(this.dialog, {
diff --git a/ui/src/views/Individual.vue b/ui/src/views/Individual.vue
index 71f94500..71d72739 100644
--- a/ui/src/views/Individual.vue
+++ b/ui/src/views/Individual.vue
@@ -1,6 +1,7 @@
 <template>
   <v-main>
-    <v-container v-if="individual" class="ml-auto mr-auto mb-8">
+    <loading-spinner v-if="$apollo.loading" label="Loading" />
+    <v-container v-else-if="individual" class="mx-auto mb-8">
       <v-row>
         <v-col
           :cols="showRecommendations ? 8 : 12"
@@ -305,8 +306,8 @@
       </v-row>
     </v-container>
 
-    <v-container v-else>
-      <v-alert dense text type="error"> Individual {{ mk }} not found </v-alert>
+    <v-container v-if="error">
+      <v-alert dense text type="error"> Individual {{ error }} </v-alert>
       <v-btn to="/" color="primary" depressed>
         <v-icon left dark>mdi-arrow-left</v-icon>
         Go to dashboard
@@ -400,8 +401,8 @@
 <script>
 import {
   getCountries,
-  getIndividualByUuid,
   findOrganization,
+  GET_INDIVIDUAL_BYUUID,
 } from "../apollo/queries";
 import {
   addLinkedinProfile,
@@ -426,6 +427,7 @@ import EnrollModal from "../components/EnrollModal.vue";
 import TeamEnrollModal from "../components/TeamEnrollModal.vue";
 import MatchesModal from "../components/MatchesModal.vue";
 import EditDialog from "../components/EditDialog.vue";
+import LoadingSpinner from "../components/LoadingSpinner.vue";
 
 export default {
   name: "Individual",
@@ -438,11 +440,29 @@ export default {
     TeamEnrollModal,
     MatchesModal,
     EditDialog,
+    LoadingSpinner,
   },
   mixins: [enrollMixin],
+  apollo: {
+    individuals() {
+      return {
+        query: GET_INDIVIDUAL_BYUUID,
+        variables: { uuid: this.mk },
+        result(result) {
+          if (result.data.individuals.entities.length === 1) {
+            this.updateIndividual(result.data.individuals.entities);
+          } else if (result.errors) {
+            this.error = this.$getErrorMessage(result.errors[0]);
+          } else {
+            this.error = `Individual ${this.mk} not found`;
+          }
+        },
+      };
+    },
+  },
   data() {
     return {
-      individual: {},
+      individual: null,
       dialog: {
         open: false,
         title: "",
@@ -464,12 +484,11 @@ export default {
       },
       countries: [],
       socialProfiles: [],
+      mk: this.$route.params.mk,
+      error: null,
     };
   },
   computed: {
-    mk() {
-      return this.$route.params.mk;
-    },
     showRecommendations() {
       return (
         this.individual.matchRecommendations &&
@@ -487,31 +506,6 @@ export default {
     },
   },
   methods: {
-    async fetchIndividual() {
-      try {
-        const response = await getIndividualByUuid(this.$apollo, this.mk);
-
-        if (response.data.individuals.entities.length === 0) {
-          this.individual = false;
-          return;
-        }
-
-        this.updateIndividual(response.data.individuals.entities);
-
-        Object.assign(this.form, {
-          name: this.individual.name,
-          email: this.individual.email,
-          country: this.individual.country,
-          gender: this.individual.gender,
-        });
-
-        document.title = `${
-          this.individual.name || "Individual"
-        } - Sorting Hat`;
-      } catch (error) {
-        this.$logger.error(`Error fetching individual ${this.mk}: ${error}`);
-      }
-    },
     async updateProfile(data) {
       try {
         const response = await updateProfile(this.$apollo, data, this.mk);
@@ -682,6 +676,15 @@ export default {
 
       this.individual = formatIndividual(newData[0]);
       this.socialProfiles = this.getSocialProfiles(newData[0]);
+
+      Object.assign(this.form, {
+        name: this.individual.name,
+        email: this.individual.email,
+        country: this.individual.country,
+        gender: this.individual.gender,
+      });
+
+      document.title = `${this.individual.name || "Individual"} - Sorting Hat`;
     },
     async fetchOrganizations(page, items, filters) {
       const response = await findOrganization(
@@ -695,7 +698,7 @@ export default {
     async applyRecommendation(id, apply) {
       try {
         await manageMergeRecommendation(this.$apollo, id, apply);
-        this.fetchIndividual();
+        this.$apollo.queries.individuals.refetch();
         this.$logger.debug(`Applied recommendation ${id}`);
       } catch (error) {
         this.dialog = {
@@ -784,9 +787,6 @@ export default {
       };
     },
   },
-  mounted() {
-    this.fetchIndividual();
-  },
 };
 </script>
 
diff --git a/ui/src/views/Organization.vue b/ui/src/views/Organization.vue
index f2f2e8c4..e14868a5 100644
--- a/ui/src/views/Organization.vue
+++ b/ui/src/views/Organization.vue
@@ -1,9 +1,10 @@
 <template>
   <v-main class="mt-md-3">
-    <v-overlay :value="isLoading">
-      <v-progress-circular indeterminate size="64"></v-progress-circular>
-    </v-overlay>
-    <v-container v-if="organization">
+    <loading-spinner
+      v-if="$apollo.queries.organizations.loading"
+      label="Loading"
+    />
+    <v-container v-else-if="organization">
       <div class="section d-flex flex-column">
         <h1 class="header font-weight-medium text-h6 pa-8">
           {{ organization.name }}
@@ -354,8 +355,8 @@
       </div>
     </v-container>
 
-    <v-container v-else-if="!isLoading">
-      <v-alert text type="error">Organization {{ name }} not found </v-alert>
+    <v-container v-if="error">
+      <v-alert text type="error">{{ error }} </v-alert>
       <v-btn to="/" color="primary" depressed>
         <v-icon left dark>mdi-arrow-left</v-icon>
         Go to dashboard
@@ -388,9 +389,9 @@
 </template>
 <script>
 import {
-  getOrganization,
   getTeams,
   getPaginatedIndividuals,
+  GET_ORGANIZATION,
 } from "../apollo/queries";
 import {
   deleteIdentity,
@@ -408,13 +409,39 @@ import {
 } from "../apollo/mutations";
 import IndividualsTable from "../components/IndividualsTable.vue";
 import EditDialog from "../components/EditDialog.vue";
+import LoadingSpinner from "../components/LoadingSpinner.vue";
 
 export default {
   name: "Organization",
-  components: { IndividualsTable, EditDialog },
+  components: { IndividualsTable, EditDialog, LoadingSpinner },
+  apollo: {
+    organizations() {
+      return {
+        query: GET_ORGANIZATION,
+        variables: {
+          filters: {
+            name: this.name,
+          },
+        },
+        async result(result) {
+          if (result.data?.organizations.entities.length === 1) {
+            this.organization = Object.assign(
+              {},
+              result.data.organizations.entities[0]
+            );
+            this.teams.items = await this.fetchTeams();
+          } else if (result.errors) {
+            this.error = this.$getErrorMessage(result.errors[0]);
+          } else {
+            this.error = `Organization ${this.name} not found`;
+          }
+        },
+      };
+    },
+  },
   data() {
     return {
-      organization: {},
+      organization: null,
       isLoading: true,
       teams: {
         items: [],
@@ -438,6 +465,7 @@ export default {
       filters: null,
       tab: null,
       menu: false,
+      error: null,
     };
   },
   computed: {
@@ -446,19 +474,6 @@ export default {
     },
   },
   methods: {
-    async fetchOrganization(name) {
-      try {
-        const response = await getOrganization(this.$apollo, name);
-        if (response.data.organizations.entities.length > 0) {
-          Object.assign(
-            this.organization,
-            response.data.organizations.entities[0]
-          );
-        }
-      } catch (error) {
-        this.$logger.error(error);
-      }
-    },
     confirmDelete(action, id) {
       Object.assign(this.dialog, {
         isOpen: true,
@@ -668,11 +683,6 @@ export default {
       }
     },
   },
-  async mounted() {
-    await this.fetchOrganization(this.name);
-    this.teams.items = await this.fetchTeams();
-    this.isLoading = false;
-  },
 };
 </script>
 


Test patch:
diff --git a/ui/tests/unit/__snapshots__/storybook.spec.js.snap b/ui/tests/unit/__snapshots__/storybook.spec.js.snap
index e3e66b2b..8344ad59 100644
--- a/ui/tests/unit/__snapshots__/storybook.spec.js.snap
+++ b/ui/tests/unit/__snapshots__/storybook.spec.js.snap
@@ -23248,7 +23248,7 @@ exports[`Storybook Tests IndividualsTable HiddenHeader 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests IndividualsTable Outlined 1`] = `
+exports[`Storybook Tests IndividualsTable OnError 1`] = `
 <div>
   <section
     class="section"
@@ -23282,7 +23282,7 @@ exports[`Storybook Tests IndividualsTable Outlined 1`] = `
             data-no-activator=""
           >
             
-            7
+            0
             
           </div>
           <!---->
@@ -23994,439 +23994,2050 @@ exports[`Storybook Tests IndividualsTable Outlined 1`] = `
             role="rowgroup"
           >
             <!---->
-            
-            
-            
-            
             <tr
-              aria-selected="false"
-              class=""
-              draggable="false"
+              class="v-data-table-rows-no-data"
             >
-              <!--v-if-->
-              <td>
+              <td
+                colspan="5"
+              >
+                
                 <div
-                  class="v-list-item v-theme--light v-list-item--density-default v-list-item--variant-text"
+                  class="v-alert v-theme--light text-error v-alert--density-compact v-alert--variant-tonal text-left"
+                  role="alert"
                 >
                   
                   <!---->
                   <span
-                    class="v-list-item__underlay"
+                    class="v-alert__underlay"
                   />
                   
+                  <!---->
                   <div
-                    class="v-list-item__prepend"
+                    class="v-alert__prepend"
                   >
-                    
-                    
-                    <div
-                      class="v-avatar v-theme--light v-avatar--density-default v-avatar--variant-flat"
-                      style="background-color: rgb(245, 142, 12); color: rgb(255, 255, 255); caret-color: #fff; width: 40px; height: 40px;"
-                    >
-                      
-                      
-                      <img
-                        aria-hidden="true"
-                        src="https://www.gravatar.com/avatar/7de6f21c7c424087449be402ae2f2159.jpg?d=blank&s=40"
-                        style="width: 42px; height: 42px;"
-                      />
-                      <span
-                        class="text-white"
-                      >
-                        TR
-                      </span>
-                      
-                      
-                      
-                      <!---->
-                      <span
-                        class="v-avatar__underlay"
-                      />
-                      
-                    </div>
-                    
-                    
-                    <div
-                      class="v-list-item__spacer"
+                    <i
+                      aria-hidden="true"
+                      class="mdi-close-circle mdi v-icon notranslate v-theme--light"
+                      density="compact"
+                      style="font-size: 28px; height: 28px; width: 28px;"
                     />
                   </div>
                   <div
-                    class="v-list-item__content"
-                    data-no-activator=""
+                    class="v-alert__content"
                   >
                     <!---->
                     <!---->
                     
-                    <div
-                      class="v-list-item-title"
-                    >
-                      <router-link-stub
-                        class="link--underline"
-                        target="_blank"
-                        to="[object Object]"
-                      />
-                      
-                      
-                      <i
-                        aria-describedby="v-tooltip-22"
-                        aria-hidden="false"
-                        class="mdi-robot mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end icon--hidden"
-                        role="button"
-                        targetref="[object Object]"
-                      />
-                      <!--v-if-->
-                      
-                      <!--teleport start-->
-                      <!--teleport end-->
-                      
-                      
-                      
-                      
-                      <i
-                        aria-describedby="v-tooltip-23"
-                        aria-hidden="false"
-                        class="mdi-lock mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end icon--hidden"
-                        role="button"
-                        targetref="[object Object]"
-                      />
-                      
-                      
-                      <!--teleport start-->
-                      <!--teleport end-->
-                      
-                    </div>
-                    <div
-                      class="v-list-item-subtitle"
-                    >
-                      Hogwarts School of Witchcraft and Wizardry
-                    </div>
+                    Test error message
                     
                   </div>
                   <!---->
+                  <!---->
                 </div>
+                
               </td>
-              <td
-                class="text-center"
-              >
-                <span>
-                  triddle@example.com
-                </span>
-              </td>
-              <td
-                class="text-right"
+            </tr>
+            <!---->
+          </tbody>
+          <!---->
+          <!---->
+          
+          
+        </table>
+      </div>
+      
+      <div
+        class="d-flex align-center text-center pt-2"
+      >
+        <div
+          class="v-col v-col-8 ml-auto"
+        >
+          <nav
+            aria-label="Pagination Navigation"
+            class="v-pagination v-theme--light"
+            data-test="v-pagination-root"
+            role="navigation"
+          >
+            <ul
+              class="v-pagination__list"
+            >
+              <!---->
+              <li
+                class="v-pagination__prev"
+                data-test="v-pagination-prev"
               >
-                
-                
-                
-                <span
-                  aria-describedby="v-tooltip-24"
-                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
-                  draggable="false"
-                  style="color: rgb(54, 60, 66); caret-color: #363c42;"
-                  targetref="[object Object]"
+                <button
+                  aria-disabled="true"
+                  aria-label="Previous page"
+                  class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-text"
+                  disabled=""
+                  type="button"
                 >
                   
-                  <!---->
                   <span
-                    class="v-chip__underlay"
+                    class="v-btn__overlay"
                   />
-                  
-                  <!---->
-                  <!---->
-                  <div
-                    class="v-chip__content"
-                    data-no-activator=""
-                  >
-                    
-                    <i
-                      aria-hidden="true"
-                      class="mdi-git mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--start"
-                    />
-                     2
-                    
-                  </div>
-                  <!---->
-                  <!---->
-                </span>
-                
-                <!--teleport start-->
-                <!--teleport end-->
-                
-                
-                
-                <span
-                  aria-describedby="v-tooltip-26"
-                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
-                  draggable="false"
-                  style="color: rgb(54, 60, 66); caret-color: #363c42;"
-                  targetref="[object Object]"
-                >
-                  
-                  <!---->
                   <span
-                    class="v-chip__underlay"
+                    class="v-btn__underlay"
                   />
                   
                   <!---->
-                  <!---->
-                  <div
-                    class="v-chip__content"
+                  <span
+                    class="v-btn__content"
                     data-no-activator=""
                   >
-                    
                     <i
                       aria-hidden="true"
-                      class="mdi-github mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--start"
+                      class="mdi-chevron-left mdi v-icon notranslate v-theme--light v-icon--size-default"
                     />
-                     1
-                    
-                  </div>
+                  </span>
                   <!---->
                   <!---->
-                </span>
-                
-                <!--teleport start-->
-                <!--teleport end-->
-                
-                
-                
-                <span
-                  aria-describedby="v-tooltip-28"
-                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
-                  draggable="false"
-                  style="color: rgb(54, 60, 66); caret-color: #363c42;"
-                  targetref="[object Object]"
+                </button>
+              </li>
+              
+              
+              <li
+                class="v-pagination__next"
+                data-test="v-pagination-next"
+              >
+                <button
+                  aria-disabled="true"
+                  aria-label="Next page"
+                  class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-text"
+                  disabled=""
+                  type="button"
                 >
                   
-                  <!---->
                   <span
-                    class="v-chip__underlay"
+                    class="v-btn__overlay"
+                  />
+                  <span
+                    class="v-btn__underlay"
                   />
                   
                   <!---->
-                  <!---->
-                  <div
-                    class="v-chip__content"
+                  <span
+                    class="v-btn__content"
                     data-no-activator=""
                   >
-                    
                     <i
                       aria-hidden="true"
-                      class="mdi-gitlab mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--start"
+                      class="mdi-chevron-right mdi v-icon notranslate v-theme--light v-icon--size-default"
                     />
-                     1
-                    
-                  </div>
+                  </span>
                   <!---->
                   <!---->
-                </span>
-                
-                <!--teleport start-->
-                <!--teleport end-->
-                
-                
-              </td>
-              <!--v-if-->
-            </tr>
-            
+                </button>
+              </li>
+              <!---->
+            </ul>
+          </nav>
+        </div>
+        <div
+          class="v-col v-col-2"
+        >
+          <div
+            class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-locale--is-ltr v-input--dirty v-text-field mr-3"
+          >
             <!---->
-            
-            
-            
-            <tr
-              aria-selected="false"
-              class=""
-              draggable="false"
+            <div
+              class="v-input__control"
             >
-              <!--v-if-->
-              <td>
+              
+              <div
+                class="v-field v-field--active v-field--center-affix v-field--dirty v-field--variant-outlined v-theme--light v-locale--is-ltr"
+              >
                 <div
-                  class="v-list-item v-theme--light v-list-item--density-default v-list-item--variant-text"
+                  class="v-field__overlay"
+                />
+                <div
+                  class="v-field__loader"
                 >
-                  
-                  <!---->
-                  <span
-                    class="v-list-item__underlay"
-                  />
-                  
                   <div
-                    class="v-list-item__prepend"
+                    aria-hidden="true"
+                    aria-valuemax="100"
+                    aria-valuemin="0"
+                    class="v-progress-linear v-theme--light v-locale--is-ltr"
+                    role="progressbar"
+                    style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);"
                   >
-                    
-                    
+                    <!---->
                     <div
-                      class="v-avatar v-theme--light v-avatar--density-default v-avatar--variant-flat"
-                      style="background-color: rgb(244, 25, 0); color: rgb(255, 255, 255); caret-color: #fff; width: 40px; height: 40px;"
+                      class="v-progress-linear__background"
+                      style="width: 100%;"
+                    />
+                    <transition-stub
+                      appear="false"
+                      css="true"
+                      name="fade-transition"
+                      persisted="false"
                     >
-                      
-                      
-                      <img
-                        aria-hidden="true"
-                        src="https://www.gravatar.com/avatar/176607552753021f97aa6620cbae9795.jpg?d=blank&s=40"
-                        style="width: 42px; height: 42px;"
-                      />
-                      <span
-                        class="text-white"
+                      <div
+                        class="v-progress-linear__indeterminate"
                       >
-                        HP
-                      </span>
-                      
-                      
-                      
-                      <!---->
-                      <span
-                        class="v-avatar__underlay"
-                      />
-                      
-                    </div>
-                    
-                    
-                    <div
-                      class="v-list-item__spacer"
-                    />
-                  </div>
-                  <div
-                    class="v-list-item__content"
-                    data-no-activator=""
-                  >
-                    <!---->
+                        
+                        <div
+                          class="v-progress-linear__indeterminate long"
+                        />
+                        <div
+                          class="v-progress-linear__indeterminate short"
+                        />
+                        
+                      </div>
+                    </transition-stub>
                     <!---->
-                    
-                    <div
-                      class="v-list-item-title"
-                    >
-                      <router-link-stub
-                        class="link--underline"
-                        target="_blank"
-                        to="[object Object]"
-                      />
-                      
-                      
-                      <i
-                        aria-describedby="v-tooltip-31"
-                        aria-hidden="false"
-                        class="mdi-robot mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end icon--hidden"
-                        role="button"
-                        targetref="[object Object]"
-                      />
-                      <!--v-if-->
-                      
-                      <!--teleport start-->
-                      <!--teleport end-->
-                      
-                      
-                      
-                      
-                      <i
-                        aria-describedby="v-tooltip-32"
-                        aria-hidden="false"
-                        class="mdi-lock mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end icon--hidden"
-                        role="button"
-                        targetref="[object Object]"
-                      />
-                      
-                      
-                      <!--teleport start-->
-                      <!--teleport end-->
-                      
-                    </div>
-                    <div
-                      class="v-list-item-subtitle"
-                    >
-                      Hogwarts School of Witchcraft and Wizardry
-                    </div>
-                    
                   </div>
-                  <!---->
                 </div>
-              </td>
-              <td
-                class="text-center"
-              >
-                <span>
-                  hpotter@example.com
-                </span>
-              </td>
-              <td
-                class="text-right"
-              >
-                
-                
-                
-                <span
-                  aria-describedby="v-tooltip-33"
-                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
-                  draggable="false"
-                  style="color: rgb(54, 60, 66); caret-color: #363c42;"
-                  targetref="[object Object]"
+                <!---->
+                <div
+                  class="v-field__field"
+                  data-no-activator=""
                 >
-                  
-                  <!---->
-                  <span
-                    class="v-chip__underlay"
-                  />
-                  
-                  <!---->
                   <!---->
-                  <div
-                    class="v-chip__content"
-                    data-no-activator=""
+                  <label
+                    class="v-label v-field-label"
+                    for="input-19"
                   >
+                    <!---->
                     
-                    <i
-                      aria-hidden="true"
-                      class="mdi-git mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--start"
-                    />
-                     1
+                    Items per page
                     
-                  </div>
+                  </label>
+                  
+                  
                   <!---->
+                  <input
+                    aria-describedby="input-19-messages"
+                    class="v-field__input"
+                    id="input-19"
+                    max="0"
+                    min="1"
+                    size="1"
+                    type="number"
+                  />
                   <!---->
-                </span>
-                
-                <!--teleport start-->
-                <!--teleport end-->
-                
-                
-                
-                <span
-                  aria-describedby="v-tooltip-35"
-                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
-                  draggable="false"
-                  style="color: rgb(54, 60, 66); caret-color: #363c42;"
-                  targetref="[object Object]"
+                  
+                  
+                </div>
+                <!---->
+                <!---->
+                <div
+                  class="v-field__outline"
                 >
                   
-                  <!---->
-                  <span
-                    class="v-chip__underlay"
+                  <div
+                    class="v-field__outline__start"
                   />
-                  
-                  <!---->
-                  <!---->
                   <div
-                    class="v-chip__content"
-                    data-no-activator=""
+                    class="v-field__outline__notch"
                   >
-                    
-                    <i
+                    <label
                       aria-hidden="true"
-                      class="mdi-github mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--start"
-                    />
-                     1
-                    
+                      class="v-label v-field-label v-field-label--floating"
+                      for="input-19"
+                    >
+                      <!---->
+                      
+                      Items per page
+                      
+                    </label>
                   </div>
+                  <div
+                    class="v-field__outline__end"
+                  />
+                  
                   <!---->
-                  <!---->
-                </span>
-                
+                </div>
+              </div>
+              
+            </div>
+            <!---->
+            <!---->
+          </div>
+        </div>
+      </div>
+      
+    </div>
+    
+    <!---->
+    <!---->
+    
+    
+    <!---->
+    <!---->
+    
+    
+    <!---->
+    <!---->
+    
+    <!--v-if-->
+    <!--v-if-->
+    <div
+      class="v-card v-theme--light bg-primary v-card--density-default v-card--variant-elevated dragged-item pa-2"
+    >
+      <!---->
+      <div
+        class="v-card__loader"
+      >
+        <div
+          aria-hidden="true"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          class="v-progress-linear v-theme--light v-locale--is-ltr"
+          role="progressbar"
+          style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);"
+        >
+          <!---->
+          <div
+            class="v-progress-linear__background"
+            style="width: 100%;"
+          />
+          <transition-stub
+            appear="false"
+            css="true"
+            name="fade-transition"
+            persisted="false"
+          >
+            <div
+              class="v-progress-linear__indeterminate"
+            >
+              
+              <div
+                class="v-progress-linear__indeterminate long"
+              />
+              <div
+                class="v-progress-linear__indeterminate short"
+              />
+              
+            </div>
+          </transition-stub>
+          <!---->
+        </div>
+      </div>
+      <!---->
+      <!---->
+      
+      <div
+        class="v-card-item"
+      >
+        <!---->
+        <div
+          class="v-card-item__content"
+        >
+          <!---->
+          <!---->
+          
+           Moving 0 individual
+          
+        </div>
+        <!---->
+      </div>
+      
+      <!---->
+      
+      <!---->
+      <span
+        class="v-card__underlay"
+      />
+      
+    </div>
+  </section>
+</div>
+`;
+
+exports[`Storybook Tests IndividualsTable Outlined 1`] = `
+<div>
+  <section
+    class="section"
+  >
+    <div
+      class="v-row header justify-space-between"
+    >
+      <h3
+        class="title"
+      >
+        <i
+          aria-hidden="true"
+          class="mdi-account mdi v-icon notranslate v-theme--light v-icon--size-small text-black v-icon--start"
+        />
+         Individuals 
+        <span
+          class="v-chip v-chip--pill v-theme--light v-chip--density-comfortable v-chip--size-default v-chip--variant-tonal ml-2"
+          data-cy="individual-counter"
+          draggable="false"
+        >
+          
+          <!---->
+          <span
+            class="v-chip__underlay"
+          />
+          
+          <!---->
+          <!---->
+          <div
+            class="v-chip__content"
+            data-no-activator=""
+          >
+            
+            7
+            
+          </div>
+          <!---->
+          <!---->
+        </span>
+      </h3>
+      <div>
+        
+        
+        <button
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          class="v-btn v-theme--light v-btn--density-default v-btn--size-small v-btn--variant-outlined mr-4"
+          style="height: 34px; display: none;"
+          targetref="[object Object]"
+          type="button"
+        >
+          
+          <span
+            class="v-btn__overlay"
+          />
+          <span
+            class="v-btn__underlay"
+          />
+          
+          <!---->
+          <span
+            class="v-btn__content"
+            data-no-activator=""
+          >
+            
+            
+            <i
+              aria-hidden="true"
+              class="mdi-lightbulb-on-outline mdi v-icon notranslate v-theme--light v-icon--size-small v-icon--start"
+            />
+             0 recommendation
+            
+            
+          </span>
+          <!---->
+          <!---->
+        </button>
+        
+        <!---->
+        
+        <button
+          class="v-btn v-theme--light bg-secondary v-btn--density-default v-btn--size-small v-btn--variant-flat black--text"
+          data-cy="individual-add"
+          style="height: 34px;"
+          type="button"
+        >
+          
+          <span
+            class="v-btn__overlay"
+          />
+          <span
+            class="v-btn__underlay"
+          />
+          
+          <!---->
+          <span
+            class="v-btn__content"
+            data-no-activator=""
+          >
+            
+            
+             Add 
+            
+            
+          </span>
+          <!---->
+          <!---->
+        </button>
+      </div>
+    </div>
+    <div
+      class="v-row actions"
+    >
+      <div
+        class="d-flex search-box pa-0 flex-grow-1"
+      >
+        <div
+          class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-locale--is-ltr v-text-field search pa-0 flex-grow-0"
+        >
+          <div
+            class="v-input__prepend"
+          >
+            
+            
+            
+            <button
+              aria-expanded="false"
+              aria-haspopup="menu"
+              aria-owns="v-menu-4"
+              class="v-btn v-theme--light v-btn--density-default v-btn--size-small v-btn--variant-outlined text-body-1"
+              style="height: 32px;"
+              targetref="[object Object]"
+              type="button"
+            >
+              
+              <span
+                class="v-btn__overlay"
+              />
+              <span
+                class="v-btn__underlay"
+              />
+              
+              <!---->
+              <span
+                class="v-btn__content"
+                data-no-activator=""
+              >
+                
+                
+                 Filters 
+                <i
+                  aria-hidden="true"
+                  class="mdi-menu-down mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  right=""
+                  small=""
+                />
+                
+                
+              </span>
+              <!---->
+              <!---->
+            </button>
+            
+            <!---->
+            
+            
+            <!---->
+          </div>
+          <div
+            class="v-input__control"
+          >
+            
+            <div
+              class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--single-line v-field--variant-outlined v-theme--light v-locale--is-ltr"
+            >
+              <div
+                class="v-field__overlay"
+              />
+              <div
+                class="v-field__loader"
+              >
+                <div
+                  aria-hidden="true"
+                  aria-valuemax="100"
+                  aria-valuemin="0"
+                  class="v-progress-linear v-theme--light v-locale--is-ltr"
+                  role="progressbar"
+                  style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);"
+                >
+                  <!---->
+                  <div
+                    class="v-progress-linear__background"
+                    style="width: 100%;"
+                  />
+                  <transition-stub
+                    appear="false"
+                    css="true"
+                    name="fade-transition"
+                    persisted="false"
+                  >
+                    <div
+                      class="v-progress-linear__indeterminate"
+                    >
+                      
+                      <div
+                        class="v-progress-linear__indeterminate long"
+                      />
+                      <div
+                        class="v-progress-linear__indeterminate short"
+                      />
+                      
+                    </div>
+                  </transition-stub>
+                  <!---->
+                </div>
+              </div>
+              <div
+                class="v-field__prepend-inner"
+              >
+                <i
+                  aria-hidden="false"
+                  aria-label="Search prepended action"
+                  class="mdi-magnify mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
+                  role="button"
+                />
+                <!---->
+              </div>
+              <div
+                class="v-field__field"
+                data-no-activator=""
+              >
+                <!---->
+                <label
+                  class="v-label v-field-label"
+                  for="input-3"
+                >
+                  <!---->
+                  
+                  Search
+                  
+                </label>
+                
+                
+                <!---->
+                <input
+                  aria-describedby="input-3-messages"
+                  class="v-field__input"
+                  id="input-3"
+                  outlined=""
+                  size="1"
+                  type="text"
+                />
+                <!---->
+                
+                
+              </div>
+              <transition-stub
+                appear="false"
+                css="true"
+                name="expand-x-transition"
+                persisted="false"
+              >
+                <div
+                  class="v-field__clearable"
+                  style="display: none;"
+                >
+                  <i
+                    aria-hidden="false"
+                    aria-label="Clear Search"
+                    class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
+                    role="button"
+                  />
+                </div>
+              </transition-stub>
+              <div
+                class="v-field__append-inner"
+              >
+                <!---->
+                <!---->
+              </div>
+              <div
+                class="v-field__outline"
+              >
+                
+                <div
+                  class="v-field__outline__start"
+                />
+                <!---->
+                <div
+                  class="v-field__outline__end"
+                />
+                
+                <!---->
+              </div>
+            </div>
+            
+          </div>
+          <!---->
+          <div
+            class="v-input__details"
+          >
+            <transition-group-stub
+              appear="false"
+              aria-live="polite"
+              class="v-messages"
+              css="true"
+              id="input-3-messages"
+              name="slide-y-transition"
+              persisted="false"
+              role="alert"
+              tag="div"
+            >
+              
+              <div
+                class="v-messages__message"
+              >
+                 
+              </div>
+              
+            </transition-group-stub>
+            <!---->
+          </div>
+        </div>
+        <div
+          class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-locale--is-ltr v-text-field v-select v-select--single select"
+        >
+          <div
+            class="v-input__prepend"
+          >
+            
+            
+            
+            <button
+              aria-describedby="v-tooltip-8"
+              class="v-btn v-theme--light v-btn--density-default v-btn--size-small v-btn--variant-outlined text-body-1"
+              depressed=""
+              style="height: 32px;"
+              targetref="[object Object]"
+              type="button"
+            >
+              
+              <span
+                class="v-btn__overlay"
+              />
+              <span
+                class="v-btn__underlay"
+              />
+              
+              <!---->
+              <span
+                class="v-btn__content"
+                data-no-activator=""
+              >
+                
+                
+                <i
+                  aria-hidden="true"
+                  class="mdi-sort-descending mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  small=""
+                />
+                
+                
+              </span>
+              <!---->
+              <!---->
+            </button>
+            
+            <!--teleport start-->
+            <!--teleport end-->
+            
+            
+            <!---->
+          </div>
+          <div
+            class="v-input__control"
+          >
+            
+            <div
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="v-menu-11"
+              class="v-field v-field--appended v-field--center-affix v-field--single-line v-field--variant-outlined v-theme--light v-locale--is-ltr"
+              role="combobox"
+            >
+              <div
+                class="v-field__overlay"
+              />
+              <div
+                class="v-field__loader"
+              >
+                <div
+                  aria-hidden="true"
+                  aria-valuemax="100"
+                  aria-valuemin="0"
+                  class="v-progress-linear v-theme--light v-locale--is-ltr"
+                  role="progressbar"
+                  style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);"
+                >
+                  <!---->
+                  <div
+                    class="v-progress-linear__background"
+                    style="width: 100%;"
+                  />
+                  <transition-stub
+                    appear="false"
+                    css="true"
+                    name="fade-transition"
+                    persisted="false"
+                  >
+                    <div
+                      class="v-progress-linear__indeterminate"
+                    >
+                      
+                      <div
+                        class="v-progress-linear__indeterminate long"
+                      />
+                      <div
+                        class="v-progress-linear__indeterminate short"
+                      />
+                      
+                    </div>
+                  </transition-stub>
+                  <!---->
+                </div>
+              </div>
+              <!---->
+              <div
+                class="v-field__field"
+                data-no-activator=""
+              >
+                <!---->
+                <label
+                  class="v-label v-field-label"
+                  for="input-7"
+                >
+                  <!---->
+                  
+                  Order by
+                  
+                </label>
+                
+                
+                <!---->
+                <div
+                  class="v-field__input"
+                  data-no-activator=""
+                >
+                  
+                  
+                  
+                  <!---->
+                  <!---->
+                  
+                  
+                  
+                  
+                  
+                  <input
+                    aria-describedby="input-7-messages"
+                    aria-label="Open"
+                    attach=""
+                    id="input-7"
+                    inputmode="none"
+                    outlined=""
+                    size="1"
+                    title="Open"
+                    type="text"
+                  />
+                </div>
+                <!---->
+                
+                
+              </div>
+              <!---->
+              <div
+                class="v-field__append-inner"
+              >
+                
+                
+                <!---->
+                <i
+                  aria-hidden="true"
+                  class="mdi-menu-down mdi v-icon notranslate v-theme--light v-icon--size-default v-select__menu-icon"
+                />
+                
+                
+                <!---->
+              </div>
+              <div
+                class="v-field__outline"
+              >
+                
+                <div
+                  class="v-field__outline__start"
+                />
+                <!---->
+                <div
+                  class="v-field__outline__end"
+                />
+                
+                <!---->
+              </div>
+            </div>
+            
+          </div>
+          <!---->
+          <div
+            class="v-input__details"
+          >
+            <transition-group-stub
+              appear="false"
+              aria-live="polite"
+              class="v-messages"
+              css="true"
+              id="input-7-messages"
+              name="slide-y-transition"
+              persisted="false"
+              role="alert"
+              tag="div"
+            >
+              <!---->
+            </transition-group-stub>
+            <!---->
+          </div>
+        </div>
+      </div>
+      
+      
+      <button
+        aria-describedby="v-tooltip-12"
+        class="v-btn v-btn--disabled v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-outlined mr-4 ml-4 order-2"
+        data-cy="merge-button"
+        disabled=""
+        style="height: 34px;"
+        targetref="[object Object]"
+        type="button"
+      >
+        
+        <span
+          class="v-btn__overlay"
+        />
+        <span
+          class="v-btn__underlay"
+        />
+        
+        <!---->
+        <span
+          class="v-btn__content"
+          data-no-activator=""
+        >
+          
+          
+          <i
+            aria-hidden="true"
+            class="mdi-call-merge mdi v-icon notranslate v-theme--light v-icon--size-small v-icon--start"
+          />
+           Merge 
+          
+          
+        </span>
+        <!---->
+        <!---->
+      </button>
+      
+      <!--teleport start-->
+      <!--teleport end-->
+      
+      
+      
+      <button
+        aria-describedby="v-tooltip-14"
+        class="v-btn v-btn--disabled v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-outlined order-3"
+        data-cy="delete-button"
+        disabled=""
+        style="height: 34px;"
+        targetref="[object Object]"
+        type="button"
+      >
+        
+        <span
+          class="v-btn__overlay"
+        />
+        <span
+          class="v-btn__underlay"
+        />
+        
+        <!---->
+        <span
+          class="v-btn__content"
+          data-no-activator=""
+        >
+          
+          
+          <i
+            aria-hidden="true"
+            class="mdi-delete mdi v-icon notranslate v-theme--light v-icon--size-small v-icon--start"
+          />
+           Delete 
+          
+          
+        </span>
+        <!---->
+        <!---->
+      </button>
+      
+      <!--teleport start-->
+      <!--teleport end-->
+      
+    </div>
+    <div
+      class="v-table v-table--has-top v-table--has-bottom v-table--hover v-theme--light v-table--density-default v-data-table"
+    >
+      
+      <!---->
+      
+      <div
+        class="v-table__wrapper"
+      >
+        <table>
+          
+          
+          <!---->
+          <thead
+            class="v-data-table__thead"
+            role="rowgroup"
+          >
+            
+            
+            <tr>
+              
+              <th
+                class="v-data-table__td v-data-table-column--no-padding v-data-table-column--align-start v-data-table__th"
+                colspan="1"
+                rowspan="1"
+                style="width: 48px;"
+              >
+                
+                <div
+                  class="v-selection-control v-selection-control--density-default v-checkbox-btn"
+                >
+                  <div
+                    class="v-selection-control__wrapper"
+                  >
+                    <!---->
+                    <div
+                      class="v-selection-control__input"
+                    >
+                      
+                      <i
+                        aria-hidden="true"
+                        class="mdi-checkbox-blank-outline mdi v-icon notranslate v-theme--light v-icon--size-default"
+                      />
+                      <input
+                        aria-disabled="false"
+                        id="input-16"
+                        type="checkbox"
+                        value="true"
+                      />
+                      
+                    </div>
+                  </div>
+                  <!---->
+                </div>
+                
+              </th>
+              <th
+                class="v-data-table__td v-data-table-column--align-start v-data-table__th"
+                colspan="1"
+                rowspan="1"
+              >
+                
+                <div
+                  class="v-data-table-header__content"
+                >
+                  <span>
+                    Individual
+                  </span>
+                  <!---->
+                  <!---->
+                </div>
+                
+              </th>
+              <th
+                class="v-data-table__td v-data-table-column--align-center v-data-table__th"
+                colspan="1"
+                rowspan="1"
+              >
+                
+                <div
+                  class="v-data-table-header__content"
+                >
+                  <span>
+                    Email
+                  </span>
+                  <!---->
+                  <!---->
+                </div>
+                
+              </th>
+              <th
+                class="v-data-table__td v-data-table-column--align-end v-data-table__th"
+                colspan="1"
+                rowspan="1"
+              >
+                
+                <div
+                  class="v-data-table-header__content"
+                >
+                  <span>
+                    Data sources
+                  </span>
+                  <!---->
+                  <!---->
+                </div>
+                
+              </th>
+              <th
+                class="v-data-table__td v-data-table-column--align-start v-data-table__th"
+                colspan="1"
+                rowspan="1"
+              >
+                
+                <div
+                  class="v-data-table-header__content"
+                >
+                  <span>
+                    <!---->
+                  </span>
+                  <!---->
+                  <!---->
+                </div>
+                
+              </th>
+              
+            </tr>
+            
+            <!---->
+            
+          </thead>
+          <!---->
+          <tbody
+            class="v-data-table__tbody"
+            role="rowgroup"
+          >
+            <!---->
+            
+            
+            
+            
+            <tr
+              aria-selected="false"
+              class=""
+              draggable="false"
+            >
+              <!--v-if-->
+              <td>
+                <div
+                  class="v-list-item v-theme--light v-list-item--density-default v-list-item--variant-text"
+                >
+                  
+                  <!---->
+                  <span
+                    class="v-list-item__underlay"
+                  />
+                  
+                  <div
+                    class="v-list-item__prepend"
+                  >
+                    
+                    
+                    <div
+                      class="v-avatar v-theme--light v-avatar--density-default v-avatar--variant-flat"
+                      style="background-color: rgb(245, 142, 12); color: rgb(255, 255, 255); caret-color: #fff; width: 40px; height: 40px;"
+                    >
+                      
+                      
+                      <img
+                        aria-hidden="true"
+                        src="https://www.gravatar.com/avatar/7de6f21c7c424087449be402ae2f2159.jpg?d=blank&s=40"
+                        style="width: 42px; height: 42px;"
+                      />
+                      <span
+                        class="text-white"
+                      >
+                        TR
+                      </span>
+                      
+                      
+                      
+                      <!---->
+                      <span
+                        class="v-avatar__underlay"
+                      />
+                      
+                    </div>
+                    
+                    
+                    <div
+                      class="v-list-item__spacer"
+                    />
+                  </div>
+                  <div
+                    class="v-list-item__content"
+                    data-no-activator=""
+                  >
+                    <!---->
+                    <!---->
+                    
+                    <div
+                      class="v-list-item-title"
+                    >
+                      <router-link-stub
+                        class="link--underline"
+                        target="_blank"
+                        to="[object Object]"
+                      />
+                      
+                      
+                      <i
+                        aria-describedby="v-tooltip-22"
+                        aria-hidden="false"
+                        class="mdi-robot mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end icon--hidden"
+                        role="button"
+                        targetref="[object Object]"
+                      />
+                      <!--v-if-->
+                      
+                      <!--teleport start-->
+                      <!--teleport end-->
+                      
+                      
+                      
+                      
+                      <i
+                        aria-describedby="v-tooltip-23"
+                        aria-hidden="false"
+                        class="mdi-lock mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end icon--hidden"
+                        role="button"
+                        targetref="[object Object]"
+                      />
+                      
+                      
+                      <!--teleport start-->
+                      <!--teleport end-->
+                      
+                    </div>
+                    <div
+                      class="v-list-item-subtitle"
+                    >
+                      Hogwarts School of Witchcraft and Wizardry
+                    </div>
+                    
+                  </div>
+                  <!---->
+                </div>
+              </td>
+              <td
+                class="text-center"
+              >
+                <span>
+                  triddle@example.com
+                </span>
+              </td>
+              <td
+                class="text-right"
+              >
+                
+                
+                
+                <span
+                  aria-describedby="v-tooltip-24"
+                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
+                  draggable="false"
+                  style="color: rgb(54, 60, 66); caret-color: #363c42;"
+                  targetref="[object Object]"
+                >
+                  
+                  <!---->
+                  <span
+                    class="v-chip__underlay"
+                  />
+                  
+                  <!---->
+                  <!---->
+                  <div
+                    class="v-chip__content"
+                    data-no-activator=""
+                  >
+                    
+                    <i
+                      aria-hidden="true"
+                      class="mdi-git mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--start"
+                    />
+                     2
+                    
+                  </div>
+                  <!---->
+                  <!---->
+                </span>
+                
+                <!--teleport start-->
+                <!--teleport end-->
+                
+                
+                
+                <span
+                  aria-describedby="v-tooltip-26"
+                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
+                  draggable="false"
+                  style="color: rgb(54, 60, 66); caret-color: #363c42;"
+                  targetref="[object Object]"
+                >
+                  
+                  <!---->
+                  <span
+                    class="v-chip__underlay"
+                  />
+                  
+                  <!---->
+                  <!---->
+                  <div
+                    class="v-chip__content"
+                    data-no-activator=""
+                  >
+                    
+                    <i
+                      aria-hidden="true"
+                      class="mdi-github mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--start"
+                    />
+                     1
+                    
+                  </div>
+                  <!---->
+                  <!---->
+                </span>
+                
+                <!--teleport start-->
+                <!--teleport end-->
+                
+                
+                
+                <span
+                  aria-describedby="v-tooltip-28"
+                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
+                  draggable="false"
+                  style="color: rgb(54, 60, 66); caret-color: #363c42;"
+                  targetref="[object Object]"
+                >
+                  
+                  <!---->
+                  <span
+                    class="v-chip__underlay"
+                  />
+                  
+                  <!---->
+                  <!---->
+                  <div
+                    class="v-chip__content"
+                    data-no-activator=""
+                  >
+                    
+                    <i
+                      aria-hidden="true"
+                      class="mdi-gitlab mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--start"
+                    />
+                     1
+                    
+                  </div>
+                  <!---->
+                  <!---->
+                </span>
+                
+                <!--teleport start-->
+                <!--teleport end-->
+                
+                
+              </td>
+              <!--v-if-->
+            </tr>
+            
+            <!---->
+            
+            
+            
+            <tr
+              aria-selected="false"
+              class=""
+              draggable="false"
+            >
+              <!--v-if-->
+              <td>
+                <div
+                  class="v-list-item v-theme--light v-list-item--density-default v-list-item--variant-text"
+                >
+                  
+                  <!---->
+                  <span
+                    class="v-list-item__underlay"
+                  />
+                  
+                  <div
+                    class="v-list-item__prepend"
+                  >
+                    
+                    
+                    <div
+                      class="v-avatar v-theme--light v-avatar--density-default v-avatar--variant-flat"
+                      style="background-color: rgb(244, 25, 0); color: rgb(255, 255, 255); caret-color: #fff; width: 40px; height: 40px;"
+                    >
+                      
+                      
+                      <img
+                        aria-hidden="true"
+                        src="https://www.gravatar.com/avatar/176607552753021f97aa6620cbae9795.jpg?d=blank&s=40"
+                        style="width: 42px; height: 42px;"
+                      />
+                      <span
+                        class="text-white"
+                      >
+                        HP
+                      </span>
+                      
+                      
+                      
+                      <!---->
+                      <span
+                        class="v-avatar__underlay"
+                      />
+                      
+                    </div>
+                    
+                    
+                    <div
+                      class="v-list-item__spacer"
+                    />
+                  </div>
+                  <div
+                    class="v-list-item__content"
+                    data-no-activator=""
+                  >
+                    <!---->
+                    <!---->
+                    
+                    <div
+                      class="v-list-item-title"
+                    >
+                      <router-link-stub
+                        class="link--underline"
+                        target="_blank"
+                        to="[object Object]"
+                      />
+                      
+                      
+                      <i
+                        aria-describedby="v-tooltip-31"
+                        aria-hidden="false"
+                        class="mdi-robot mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end icon--hidden"
+                        role="button"
+                        targetref="[object Object]"
+                      />
+                      <!--v-if-->
+                      
+                      <!--teleport start-->
+                      <!--teleport end-->
+                      
+                      
+                      
+                      
+                      <i
+                        aria-describedby="v-tooltip-32"
+                        aria-hidden="false"
+                        class="mdi-lock mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end icon--hidden"
+                        role="button"
+                        targetref="[object Object]"
+                      />
+                      
+                      
+                      <!--teleport start-->
+                      <!--teleport end-->
+                      
+                    </div>
+                    <div
+                      class="v-list-item-subtitle"
+                    >
+                      Hogwarts School of Witchcraft and Wizardry
+                    </div>
+                    
+                  </div>
+                  <!---->
+                </div>
+              </td>
+              <td
+                class="text-center"
+              >
+                <span>
+                  hpotter@example.com
+                </span>
+              </td>
+              <td
+                class="text-right"
+              >
+                
+                
+                
+                <span
+                  aria-describedby="v-tooltip-33"
+                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
+                  draggable="false"
+                  style="color: rgb(54, 60, 66); caret-color: #363c42;"
+                  targetref="[object Object]"
+                >
+                  
+                  <!---->
+                  <span
+                    class="v-chip__underlay"
+                  />
+                  
+                  <!---->
+                  <!---->
+                  <div
+                    class="v-chip__content"
+                    data-no-activator=""
+                  >
+                    
+                    <i
+                      aria-hidden="true"
+                      class="mdi-git mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--start"
+                    />
+                     1
+                    
+                  </div>
+                  <!---->
+                  <!---->
+                </span>
+                
+                <!--teleport start-->
+                <!--teleport end-->
+                
+                
+                
+                <span
+                  aria-describedby="v-tooltip-35"
+                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
+                  draggable="false"
+                  style="color: rgb(54, 60, 66); caret-color: #363c42;"
+                  targetref="[object Object]"
+                >
+                  
+                  <!---->
+                  <span
+                    class="v-chip__underlay"
+                  />
+                  
+                  <!---->
+                  <!---->
+                  <div
+                    class="v-chip__content"
+                    data-no-activator=""
+                  >
+                    
+                    <i
+                      aria-hidden="true"
+                      class="mdi-github mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--start"
+                    />
+                     1
+                    
+                  </div>
+                  <!---->
+                  <!---->
+                </span>
+                
+                <!--teleport start-->
+                <!--teleport end-->
+                
+                
+                
+                <span
+                  aria-describedby="v-tooltip-37"
+                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
+                  draggable="false"
+                  style="color: rgb(54, 60, 66); caret-color: #363c42;"
+                  targetref="[object Object]"
+                >
+                  
+                  <!---->
+                  <span
+                    class="v-chip__underlay"
+                  />
+                  
+                  <!---->
+                  <!---->
+                  <div
+                    class="v-chip__content"
+                    data-no-activator=""
+                  >
+                    
+                    <i
+                      aria-hidden="true"
+                      class="mdi-account-multiple mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--start"
+                    />
+                     1
+                    
+                  </div>
+                  <!---->
+                  <!---->
+                </span>
+                
+                <!--teleport start-->
+                <!--teleport end-->
+                
+                
+              </td>
+              <!--v-if-->
+            </tr>
+            
+            <!---->
+            
+            
+            
+            <tr
+              aria-selected="false"
+              class=""
+              draggable="false"
+            >
+              <!--v-if-->
+              <td>
+                <div
+                  class="v-list-item v-theme--light v-list-item--density-default v-list-item--variant-text"
+                >
+                  
+                  <!---->
+                  <span
+                    class="v-list-item__underlay"
+                  />
+                  
+                  <div
+                    class="v-list-item__prepend"
+                  >
+                    
+                    
+                    <div
+                      class="v-avatar v-theme--light v-avatar--density-default v-avatar--variant-flat"
+                      style="background-color: rgb(0, 161, 86); color: rgb(255, 255, 255); caret-color: #fff; width: 40px; height: 40px;"
+                    >
+                      
+                      
+                      <!--v-if-->
+                      <span
+                        class="text-white"
+                      >
+                        V
+                      </span>
+                      
+                      
+                      
+                      <!---->
+                      <span
+                        class="v-avatar__underlay"
+                      />
+                      
+                    </div>
+                    
+                    
+                    <div
+                      class="v-list-item__spacer"
+                    />
+                  </div>
+                  <div
+                    class="v-list-item__content"
+                    data-no-activator=""
+                  >
+                    <!---->
+                    <!---->
+                    
+                    <div
+                      class="v-list-item-title"
+                    >
+                      <router-link-stub
+                        class="link--underline"
+                        target="_blank"
+                        to="[object Object]"
+                      />
+                      
+                      
+                      <!--v-if-->
+                      <!--v-if-->
+                      
+                      <!--teleport start-->
+                      <!--teleport end-->
+                      
+                      
+                      
+                      
+                      <i
+                        aria-describedby="v-tooltip-41"
+                        aria-hidden="false"
+                        class="mdi-lock mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end"
+                        role="button"
+                        targetref="[object Object]"
+                      />
+                      
+                      
+                      <!--teleport start-->
+                      <!--teleport end-->
+                      
+                    </div>
+                    <div
+                      class="v-list-item-subtitle"
+                    >
+                      Death Eaters
+                    </div>
+                    
+                  </div>
+                  <!---->
+                </div>
+              </td>
+              <td
+                class="text-center"
+              >
+                <span />
+              </td>
+              <td
+                class="text-right"
+              >
+                
+                
+                
+                <span
+                  aria-describedby="v-tooltip-42"
+                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
+                  draggable="false"
+                  style="color: rgb(54, 60, 66); caret-color: #363c42;"
+                  targetref="[object Object]"
+                >
+                  
+                  <!---->
+                  <span
+                    class="v-chip__underlay"
+                  />
+                  
+                  <!---->
+                  <!---->
+                  <div
+                    class="v-chip__content"
+                    data-no-activator=""
+                  >
+                    
+                    <i
+                      aria-hidden="true"
+                      class="mdi-jira mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--start"
+                    />
+                     1
+                    
+                  </div>
+                  <!---->
+                  <!---->
+                </span>
+                
+                <!--teleport start-->
+                <!--teleport end-->
+                
+                
+              </td>
+              <!--v-if-->
+            </tr>
+            
+            <!---->
+            
+            
+            
+            <tr
+              aria-selected="false"
+              class=""
+              draggable="false"
+            >
+              <!--v-if-->
+              <td>
+                <div
+                  class="v-list-item v-theme--light v-list-item--density-default v-list-item--variant-text"
+                >
+                  
+                  <!---->
+                  <span
+                    class="v-list-item__underlay"
+                  />
+                  
+                  <div
+                    class="v-list-item__prepend"
+                  >
+                    
+                    
+                    <div
+                      class="v-avatar v-theme--light v-avatar--density-default v-avatar--variant-flat"
+                      style="background-color: rgb(245, 37, 55); color: rgb(255, 255, 255); caret-color: #fff; width: 40px; height: 40px;"
+                    >
+                      
+                      
+                      <img
+                        aria-hidden="true"
+                        src="https://www.gravatar.com/avatar/5e6c6b8023bcecf58d02138251b511d5.jpg?d=blank&s=40"
+                        style="width: 42px; height: 42px;"
+                      />
+                      <span
+                        class="text-white"
+                      >
+                        RW
+                      </span>
+                      
+                      
+                      
+                      <!---->
+                      <span
+                        class="v-avatar__underlay"
+                      />
+                      
+                    </div>
+                    
+                    
+                    <div
+                      class="v-list-item__spacer"
+                    />
+                  </div>
+                  <div
+                    class="v-list-item__content"
+                    data-no-activator=""
+                  >
+                    <!---->
+                    <!---->
+                    
+                    <div
+                      class="v-list-item-title"
+                    >
+                      <router-link-stub
+                        class="link--underline"
+                        target="_blank"
+                        to="[object Object]"
+                      />
+                      
+                      
+                      <i
+                        aria-describedby="v-tooltip-45"
+                        aria-hidden="false"
+                        class="mdi-robot mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end icon--hidden"
+                        role="button"
+                        targetref="[object Object]"
+                      />
+                      <!--v-if-->
+                      
+                      <!--teleport start-->
+                      <!--teleport end-->
+                      
+                      
+                      
+                      
+                      <i
+                        aria-describedby="v-tooltip-46"
+                        aria-hidden="false"
+                        class="mdi-lock mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end icon--hidden"
+                        role="button"
+                        targetref="[object Object]"
+                      />
+                      
+                      
+                      <!--teleport start-->
+                      <!--teleport end-->
+                      
+                    </div>
+                    <div
+                      class="v-list-item-subtitle"
+                    >
+                      Hogwarts School of Witchcraft and Wizardry
+                    </div>
+                    
+                  </div>
+                  <!---->
+                </div>
+              </td>
+              <td
+                class="text-center"
+              >
+                <span>
+                  rweasley@example.com
+                </span>
+              </td>
+              <td
+                class="text-right"
+              >
+                
+                
+                
+                <span
+                  aria-describedby="v-tooltip-47"
+                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
+                  draggable="false"
+                  style="color: rgb(54, 60, 66); caret-color: #363c42;"
+                  targetref="[object Object]"
+                >
+                  
+                  <!---->
+                  <span
+                    class="v-chip__underlay"
+                  />
+                  
+                  <!---->
+                  <!---->
+                  <div
+                    class="v-chip__content"
+                    data-no-activator=""
+                  >
+                    
+                    <i
+                      aria-hidden="true"
+                      class="mdi-git mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--start"
+                    />
+                     2
+                    
+                  </div>
+                  <!---->
+                  <!---->
+                </span>
+                
+                <!--teleport start-->
+                <!--teleport end-->
+                
+                
+              </td>
+              <!--v-if-->
+            </tr>
+            
+            <!---->
+            
+            
+            
+            <tr
+              aria-selected="false"
+              class=""
+              draggable="false"
+            >
+              <!--v-if-->
+              <td>
+                <div
+                  class="v-list-item v-theme--light v-list-item--density-default v-list-item--variant-text"
+                >
+                  
+                  <!---->
+                  <span
+                    class="v-list-item__underlay"
+                  />
+                  
+                  <div
+                    class="v-list-item__prepend"
+                  >
+                    
+                    
+                    <div
+                      class="v-avatar v-theme--light v-avatar--density-default v-avatar--variant-flat"
+                      style="background-color: rgb(0, 55, 86); color: rgb(255, 255, 255); caret-color: #fff; width: 40px; height: 40px;"
+                    >
+                      
+                      
+                      <img
+                        aria-hidden="true"
+                        src="https://www.gravatar.com/avatar/6a90038d4a9178b1a9ceddd9a170a665.jpg?d=blank&s=40"
+                        style="width: 42px; height: 42px;"
+                      />
+                      <span
+                        class="text-white"
+                      >
+                        HG
+                      </span>
+                      
+                      
+                      
+                      <!---->
+                      <span
+                        class="v-avatar__underlay"
+                      />
+                      
+                    </div>
+                    
+                    
+                    <div
+                      class="v-list-item__spacer"
+                    />
+                  </div>
+                  <div
+                    class="v-list-item__content"
+                    data-no-activator=""
+                  >
+                    <!---->
+                    <!---->
+                    
+                    <div
+                      class="v-list-item-title"
+                    >
+                      <router-link-stub
+                        class="link--underline"
+                        target="_blank"
+                        to="[object Object]"
+                      />
+                      
+                      
+                      <i
+                        aria-describedby="v-tooltip-50"
+                        aria-hidden="false"
+                        class="mdi-robot mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end"
+                        role="button"
+                        targetref="[object Object]"
+                      />
+                      <!--v-if-->
+                      
+                      <!--teleport start-->
+                      <!--teleport end-->
+                      
+                      
+                      
+                      
+                      <i
+                        aria-describedby="v-tooltip-51"
+                        aria-hidden="false"
+                        class="mdi-lock mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end icon--hidden"
+                        role="button"
+                        targetref="[object Object]"
+                      />
+                      
+                      
+                      <!--teleport start-->
+                      <!--teleport end-->
+                      
+                    </div>
+                    <div
+                      class="v-list-item-subtitle"
+                    >
+                      Hogwarts School of Witchcraft and Wizardry
+                    </div>
+                    
+                  </div>
+                  <!---->
+                </div>
+              </td>
+              <td
+                class="text-center"
+              >
+                <span>
+                  hgranger@example.com
+                </span>
+              </td>
+              <td
+                class="text-right"
+              >
+                
+                
+                
+                <span
+                  aria-describedby="v-tooltip-52"
+                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
+                  draggable="false"
+                  style="color: rgb(54, 60, 66); caret-color: #363c42;"
+                  targetref="[object Object]"
+                >
+                  
+                  <!---->
+                  <span
+                    class="v-chip__underlay"
+                  />
+                  
+                  <!---->
+                  <!---->
+                  <div
+                    class="v-chip__content"
+                    data-no-activator=""
+                  >
+                    
+                    <i
+                      aria-hidden="true"
+                      class="mdi-gitlab mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--start"
+                    />
+                     1
+                    
+                  </div>
+                  <!---->
+                  <!---->
+                </span>
+                
                 <!--teleport start-->
                 <!--teleport end-->
                 
                 
                 
                 <span
-                  aria-describedby="v-tooltip-37"
+                  aria-describedby="v-tooltip-54"
                   class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
                   draggable="false"
                   style="color: rgb(54, 60, 66); caret-color: #363c42;"
@@ -24468,120 +26079,512 @@ exports[`Storybook Tests IndividualsTable Outlined 1`] = `
             
             
             
-            <tr
-              aria-selected="false"
-              class=""
-              draggable="false"
+            <!---->
+          </tbody>
+          <!---->
+          <!---->
+          
+          
+        </table>
+      </div>
+      
+      <div
+        class="d-flex align-center text-center pt-2"
+      >
+        <div
+          class="v-col v-col-8 ml-auto"
+        >
+          <nav
+            aria-label="Pagination Navigation"
+            class="v-pagination v-theme--light"
+            data-test="v-pagination-root"
+            role="navigation"
+          >
+            <ul
+              class="v-pagination__list"
             >
-              <!--v-if-->
-              <td>
+              <!---->
+              <li
+                class="v-pagination__prev"
+                data-test="v-pagination-prev"
+              >
+                <button
+                  aria-disabled="true"
+                  aria-label="Previous page"
+                  class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-text"
+                  disabled=""
+                  type="button"
+                >
+                  
+                  <span
+                    class="v-btn__overlay"
+                  />
+                  <span
+                    class="v-btn__underlay"
+                  />
+                  
+                  <!---->
+                  <span
+                    class="v-btn__content"
+                    data-no-activator=""
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="mdi-chevron-left mdi v-icon notranslate v-theme--light v-icon--size-default"
+                    />
+                  </span>
+                  <!---->
+                  <!---->
+                </button>
+              </li>
+              
+              <li
+                class="v-pagination__item v-pagination__item--is-active"
+                data-test="v-pagination-item"
+              >
+                <button
+                  aria-current="true"
+                  aria-label="Page 1, Current page"
+                  class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-text"
+                  ellipsis="false"
+                  type="button"
+                >
+                  
+                  <span
+                    class="v-btn__overlay"
+                  />
+                  <span
+                    class="v-btn__underlay"
+                  />
+                  
+                  <!---->
+                  <span
+                    class="v-btn__content"
+                    data-no-activator=""
+                  >
+                    
+                    
+                    1
+                    
+                    
+                  </span>
+                  <!---->
+                  <!---->
+                </button>
+              </li>
+              <li
+                class="v-pagination__item"
+                data-test="v-pagination-item"
+              >
+                <button
+                  aria-current="false"
+                  aria-label="Go to page 2"
+                  class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-text"
+                  ellipsis="false"
+                  type="button"
+                >
+                  
+                  <span
+                    class="v-btn__overlay"
+                  />
+                  <span
+                    class="v-btn__underlay"
+                  />
+                  
+                  <!---->
+                  <span
+                    class="v-btn__content"
+                    data-no-activator=""
+                  >
+                    
+                    
+                    2
+                    
+                    
+                  </span>
+                  <!---->
+                  <!---->
+                </button>
+              </li>
+              
+              <li
+                class="v-pagination__next"
+                data-test="v-pagination-next"
+              >
+                <button
+                  aria-disabled="false"
+                  aria-label="Next page"
+                  class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-text"
+                  type="button"
+                >
+                  
+                  <span
+                    class="v-btn__overlay"
+                  />
+                  <span
+                    class="v-btn__underlay"
+                  />
+                  
+                  <!---->
+                  <span
+                    class="v-btn__content"
+                    data-no-activator=""
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="mdi-chevron-right mdi v-icon notranslate v-theme--light v-icon--size-default"
+                    />
+                  </span>
+                  <!---->
+                  <!---->
+                </button>
+              </li>
+              <!---->
+            </ul>
+          </nav>
+        </div>
+        <div
+          class="v-col v-col-2"
+        >
+          <div
+            class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-locale--is-ltr v-input--dirty v-text-field mr-3"
+          >
+            <!---->
+            <div
+              class="v-input__control"
+            >
+              
+              <div
+                class="v-field v-field--active v-field--center-affix v-field--dirty v-field--variant-outlined v-theme--light v-locale--is-ltr"
+              >
                 <div
-                  class="v-list-item v-theme--light v-list-item--density-default v-list-item--variant-text"
+                  class="v-field__overlay"
+                />
+                <div
+                  class="v-field__loader"
+                >
+                  <div
+                    aria-hidden="true"
+                    aria-valuemax="100"
+                    aria-valuemin="0"
+                    class="v-progress-linear v-theme--light v-locale--is-ltr"
+                    role="progressbar"
+                    style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);"
+                  >
+                    <!---->
+                    <div
+                      class="v-progress-linear__background"
+                      style="width: 100%;"
+                    />
+                    <transition-stub
+                      appear="false"
+                      css="true"
+                      name="fade-transition"
+                      persisted="false"
+                    >
+                      <div
+                        class="v-progress-linear__indeterminate"
+                      >
+                        
+                        <div
+                          class="v-progress-linear__indeterminate long"
+                        />
+                        <div
+                          class="v-progress-linear__indeterminate short"
+                        />
+                        
+                      </div>
+                    </transition-stub>
+                    <!---->
+                  </div>
+                </div>
+                <!---->
+                <div
+                  class="v-field__field"
+                  data-no-activator=""
                 >
+                  <!---->
+                  <label
+                    class="v-label v-field-label"
+                    for="input-19"
+                  >
+                    <!---->
+                    
+                    Items per page
+                    
+                  </label>
+                  
                   
                   <!---->
-                  <span
-                    class="v-list-item__underlay"
+                  <input
+                    aria-describedby="input-19-messages"
+                    class="v-field__input"
+                    id="input-19"
+                    max="7"
+                    min="1"
+                    size="1"
+                    type="number"
                   />
+                  <!---->
+                  
+                  
+                </div>
+                <!---->
+                <!---->
+                <div
+                  class="v-field__outline"
+                >
                   
                   <div
-                    class="v-list-item__prepend"
-                  >
-                    
-                    
-                    <div
-                      class="v-avatar v-theme--light v-avatar--density-default v-avatar--variant-flat"
-                      style="background-color: rgb(0, 161, 86); color: rgb(255, 255, 255); caret-color: #fff; width: 40px; height: 40px;"
-                    >
-                      
-                      
-                      <!--v-if-->
-                      <span
-                        class="text-white"
-                      >
-                        V
-                      </span>
-                      
-                      
-                      
-                      <!---->
-                      <span
-                        class="v-avatar__underlay"
-                      />
-                      
-                    </div>
-                    
-                    
-                    <div
-                      class="v-list-item__spacer"
-                    />
-                  </div>
+                    class="v-field__outline__start"
+                  />
                   <div
-                    class="v-list-item__content"
-                    data-no-activator=""
+                    class="v-field__outline__notch"
                   >
-                    <!---->
-                    <!---->
-                    
-                    <div
-                      class="v-list-item-title"
+                    <label
+                      aria-hidden="true"
+                      class="v-label v-field-label v-field-label--floating"
+                      for="input-19"
                     >
-                      <router-link-stub
-                        class="link--underline"
-                        target="_blank"
-                        to="[object Object]"
-                      />
-                      
-                      
-                      <!--v-if-->
-                      <!--v-if-->
-                      
-                      <!--teleport start-->
-                      <!--teleport end-->
-                      
-                      
-                      
-                      
-                      <i
-                        aria-describedby="v-tooltip-41"
-                        aria-hidden="false"
-                        class="mdi-lock mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end"
-                        role="button"
-                        targetref="[object Object]"
-                      />
-                      
+                      <!---->
                       
-                      <!--teleport start-->
-                      <!--teleport end-->
+                      Items per page
                       
-                    </div>
-                    <div
-                      class="v-list-item-subtitle"
-                    >
-                      Death Eaters
-                    </div>
-                    
+                    </label>
                   </div>
+                  <div
+                    class="v-field__outline__end"
+                  />
+                  
                   <!---->
                 </div>
-              </td>
-              <td
-                class="text-center"
+              </div>
+              
+            </div>
+            <!---->
+            <!---->
+          </div>
+        </div>
+      </div>
+      
+    </div>
+    
+    <!---->
+    <!---->
+    
+    
+    <!---->
+    <!---->
+    
+    
+    <!---->
+    <!---->
+    
+    <!--v-if-->
+    <!--v-if-->
+    <div
+      class="v-card v-theme--light bg-primary v-card--density-default v-card--variant-elevated dragged-item pa-2"
+    >
+      <!---->
+      <div
+        class="v-card__loader"
+      >
+        <div
+          aria-hidden="true"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          class="v-progress-linear v-theme--light v-locale--is-ltr"
+          role="progressbar"
+          style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);"
+        >
+          <!---->
+          <div
+            class="v-progress-linear__background"
+            style="width: 100%;"
+          />
+          <transition-stub
+            appear="false"
+            css="true"
+            name="fade-transition"
+            persisted="false"
+          >
+            <div
+              class="v-progress-linear__indeterminate"
+            >
+              
+              <div
+                class="v-progress-linear__indeterminate long"
+              />
+              <div
+                class="v-progress-linear__indeterminate short"
+              />
+              
+            </div>
+          </transition-stub>
+          <!---->
+        </div>
+      </div>
+      <!---->
+      <!---->
+      
+      <div
+        class="v-card-item"
+      >
+        <!---->
+        <div
+          class="v-card-item__content"
+        >
+          <!---->
+          <!---->
+          
+           Moving 0 individual
+          
+        </div>
+        <!---->
+      </div>
+      
+      <!---->
+      
+      <!---->
+      <span
+        class="v-card__underlay"
+      />
+      
+    </div>
+  </section>
+</div>
+`;
+
+exports[`Storybook Tests JobModal Default 1`] = `
+<div>
+  <div
+    class="ma-auto"
+  >
+    <button
+      class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-small v-btn--variant-outlined"
+      dark=""
+      type="button"
+    >
+      
+      <span
+        class="v-btn__overlay"
+      />
+      <span
+        class="v-btn__underlay"
+      />
+      
+      <!---->
+      <span
+        class="v-btn__content"
+        data-no-activator=""
+      >
+        
+        
+         Open Dialog 
+        
+        
+      </span>
+      <!---->
+      <!---->
+    </button>
+    
+    <!---->
+    <!---->
+    
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests JobsTable Default 1`] = `
+<div>
+  <div
+    class="v-container v-locale--is-ltr jobs section mb-5 pa-0"
+  >
+    <header
+      class="header"
+    >
+      <h4
+        class="title"
+      >
+        <i
+          aria-hidden="true"
+          class="mdi-tray-full mdi v-icon notranslate v-theme--light v-icon--size-small text-black v-icon--start"
+        />
+         Jobs 
+      </h4>
+      <button
+        class="v-btn v-theme--light bg-secondary v-btn--density-default v-btn--size-small v-btn--variant-flat black--text"
+        type="button"
+      >
+        
+        <span
+          class="v-btn__overlay"
+        />
+        <span
+          class="v-btn__underlay"
+        />
+        
+        <!---->
+        <span
+          class="v-btn__content"
+          data-no-activator=""
+        >
+          
+          
+           Add 
+          
+          
+        </span>
+        <!---->
+        <!---->
+      </button>
+    </header>
+    <!--v-if-->
+    <div
+      class="v-table v-theme--light v-table--density-default"
+    >
+      <!---->
+      <div
+        class="v-table__wrapper"
+      >
+        <table>
+          
+          <thead>
+            <tr>
+              <th
+                class="text-left"
               >
-                <span />
-              </td>
-              <td
-                class="text-right"
+                Job ID
+              </th>
+              <th
+                class="text-left"
               >
-                
+                Type
+              </th>
+              <th
+                class="text-left"
+              >
+                Date
+              </th>
+              <th
+                class="text-center"
+              >
+                Status
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            
+            <tr>
+              <td>
                 
                 
                 <span
-                  aria-describedby="v-tooltip-42"
-                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
+                  aria-describedby="v-tooltip-5"
+                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined text-center clip"
                   draggable="false"
-                  style="color: rgb(54, 60, 66); caret-color: #363c42;"
                   targetref="[object Object]"
+                  tile=""
                 >
                   
                   <!---->
@@ -24596,11 +26599,7 @@ exports[`Storybook Tests IndividualsTable Outlined 1`] = `
                     data-no-activator=""
                   >
                     
-                    <i
-                      aria-hidden="true"
-                      class="mdi-jira mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--start"
-                    />
-                     1
+                    a60346ea-6fbe-4501-896b-c8433a6b958f
                     
                   </div>
                   <!---->
@@ -24610,141 +26609,23 @@ exports[`Storybook Tests IndividualsTable Outlined 1`] = `
                 <!--teleport start-->
                 <!--teleport end-->
                 
-                
-              </td>
-              <!--v-if-->
-            </tr>
-            
-            <!---->
-            
-            
-            
-            <tr
-              aria-selected="false"
-              class=""
-              draggable="false"
-            >
-              <!--v-if-->
-              <td>
-                <div
-                  class="v-list-item v-theme--light v-list-item--density-default v-list-item--variant-text"
-                >
-                  
-                  <!---->
-                  <span
-                    class="v-list-item__underlay"
-                  />
-                  
-                  <div
-                    class="v-list-item__prepend"
-                  >
-                    
-                    
-                    <div
-                      class="v-avatar v-theme--light v-avatar--density-default v-avatar--variant-flat"
-                      style="background-color: rgb(245, 37, 55); color: rgb(255, 255, 255); caret-color: #fff; width: 40px; height: 40px;"
-                    >
-                      
-                      
-                      <img
-                        aria-hidden="true"
-                        src="https://www.gravatar.com/avatar/5e6c6b8023bcecf58d02138251b511d5.jpg?d=blank&s=40"
-                        style="width: 42px; height: 42px;"
-                      />
-                      <span
-                        class="text-white"
-                      >
-                        RW
-                      </span>
-                      
-                      
-                      
-                      <!---->
-                      <span
-                        class="v-avatar__underlay"
-                      />
-                      
-                    </div>
-                    
-                    
-                    <div
-                      class="v-list-item__spacer"
-                    />
-                  </div>
-                  <div
-                    class="v-list-item__content"
-                    data-no-activator=""
-                  >
-                    <!---->
-                    <!---->
-                    
-                    <div
-                      class="v-list-item-title"
-                    >
-                      <router-link-stub
-                        class="link--underline"
-                        target="_blank"
-                        to="[object Object]"
-                      />
-                      
-                      
-                      <i
-                        aria-describedby="v-tooltip-45"
-                        aria-hidden="false"
-                        class="mdi-robot mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end icon--hidden"
-                        role="button"
-                        targetref="[object Object]"
-                      />
-                      <!--v-if-->
-                      
-                      <!--teleport start-->
-                      <!--teleport end-->
-                      
-                      
-                      
-                      
-                      <i
-                        aria-describedby="v-tooltip-46"
-                        aria-hidden="false"
-                        class="mdi-lock mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end icon--hidden"
-                        role="button"
-                        targetref="[object Object]"
-                      />
-                      
-                      
-                      <!--teleport start-->
-                      <!--teleport end-->
-                      
-                    </div>
-                    <div
-                      class="v-list-item-subtitle"
-                    >
-                      Hogwarts School of Witchcraft and Wizardry
-                    </div>
-                    
-                  </div>
-                  <!---->
-                </div>
               </td>
               <td
-                class="text-center"
+                class="capitalize"
               >
-                <span>
-                  rweasley@example.com
-                </span>
+                recommend affiliations
+              </td>
+              <td>
+                2021-02-19 12:09 PM
               </td>
               <td
-                class="text-right"
+                class="text-center"
               >
-                
-                
-                
                 <span
-                  aria-describedby="v-tooltip-47"
-                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
+                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-tonal ma-2"
                   draggable="false"
-                  style="color: rgb(54, 60, 66); caret-color: #363c42;"
-                  targetref="[object Object]"
+                  style="color: rgb(63, 165, 0); caret-color: #3fa500;"
+                  text-color="white"
                 >
                   
                   <!---->
@@ -24759,155 +26640,65 @@ exports[`Storybook Tests IndividualsTable Outlined 1`] = `
                     data-no-activator=""
                   >
                     
-                    <i
-                      aria-hidden="true"
-                      class="mdi-git mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--start"
-                    />
-                     2
+                    finished
                     
                   </div>
                   <!---->
                   <!---->
                 </span>
-                
-                <!--teleport start-->
-                <!--teleport end-->
-                
-                
               </td>
-              <!--v-if-->
             </tr>
-            
-            <!---->
-            
-            
-            
-            <tr
-              aria-selected="false"
-              class=""
-              draggable="false"
-            >
-              <!--v-if-->
+            <tr>
               <td>
-                <div
-                  class="v-list-item v-theme--light v-list-item--density-default v-list-item--variant-text"
+                
+                
+                <span
+                  aria-describedby="v-tooltip-8"
+                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined text-center clip"
+                  draggable="false"
+                  targetref="[object Object]"
+                  tile=""
                 >
                   
                   <!---->
                   <span
-                    class="v-list-item__underlay"
+                    class="v-chip__underlay"
                   />
                   
+                  <!---->
+                  <!---->
                   <div
-                    class="v-list-item__prepend"
-                  >
-                    
-                    
-                    <div
-                      class="v-avatar v-theme--light v-avatar--density-default v-avatar--variant-flat"
-                      style="background-color: rgb(0, 55, 86); color: rgb(255, 255, 255); caret-color: #fff; width: 40px; height: 40px;"
-                    >
-                      
-                      
-                      <img
-                        aria-hidden="true"
-                        src="https://www.gravatar.com/avatar/6a90038d4a9178b1a9ceddd9a170a665.jpg?d=blank&s=40"
-                        style="width: 42px; height: 42px;"
-                      />
-                      <span
-                        class="text-white"
-                      >
-                        HG
-                      </span>
-                      
-                      
-                      
-                      <!---->
-                      <span
-                        class="v-avatar__underlay"
-                      />
-                      
-                    </div>
-                    
-                    
-                    <div
-                      class="v-list-item__spacer"
-                    />
-                  </div>
-                  <div
-                    class="v-list-item__content"
+                    class="v-chip__content"
                     data-no-activator=""
                   >
-                    <!---->
-                    <!---->
                     
-                    <div
-                      class="v-list-item-title"
-                    >
-                      <router-link-stub
-                        class="link--underline"
-                        target="_blank"
-                        to="[object Object]"
-                      />
-                      
-                      
-                      <i
-                        aria-describedby="v-tooltip-50"
-                        aria-hidden="false"
-                        class="mdi-robot mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end"
-                        role="button"
-                        targetref="[object Object]"
-                      />
-                      <!--v-if-->
-                      
-                      <!--teleport start-->
-                      <!--teleport end-->
-                      
-                      
-                      
-                      
-                      <i
-                        aria-describedby="v-tooltip-51"
-                        aria-hidden="false"
-                        class="mdi-lock mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end icon--hidden"
-                        role="button"
-                        targetref="[object Object]"
-                      />
-                      
-                      
-                      <!--teleport start-->
-                      <!--teleport end-->
-                      
-                    </div>
-                    <div
-                      class="v-list-item-subtitle"
-                    >
-                      Hogwarts School of Witchcraft and Wizardry
-                    </div>
+                    7fb401f4-6fbe-4501-896b-c8433a6b958f
                     
                   </div>
                   <!---->
-                </div>
+                  <!---->
+                </span>
+                
+                <!--teleport start-->
+                <!--teleport end-->
+                
               </td>
               <td
-                class="text-center"
+                class="capitalize"
               >
-                <span>
-                  hgranger@example.com
-                </span>
+                recommend affiliations
+              </td>
+              <td>
+                2021-02-19 02:12 PM
               </td>
               <td
-                class="text-right"
+                class="text-center"
               >
-                
-                
-                
                 <span
-                  aria-describedby="v-tooltip-52"
-                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
+                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-tonal ma-2"
                   draggable="false"
-                  style="color: rgb(54, 60, 66); caret-color: #363c42;"
-                  targetref="[object Object]"
+                  style="color: rgb(63, 165, 0); caret-color: #3fa500;"
+                  text-color="white"
                 >
                   
                   <!---->
@@ -24922,28 +26713,24 @@ exports[`Storybook Tests IndividualsTable Outlined 1`] = `
                     data-no-activator=""
                   >
                     
-                    <i
-                      aria-hidden="true"
-                      class="mdi-gitlab mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--start"
-                    />
-                     1
+                    finished
                     
                   </div>
                   <!---->
                   <!---->
                 </span>
-                
-                <!--teleport start-->
-                <!--teleport end-->
-                
+              </td>
+            </tr>
+            <tr>
+              <td>
                 
                 
                 <span
-                  aria-describedby="v-tooltip-54"
-                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
+                  aria-describedby="v-tooltip-11"
+                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined text-center clip"
                   draggable="false"
-                  style="color: rgb(54, 60, 66); caret-color: #363c42;"
                   targetref="[object Object]"
+                  tile=""
                 >
                   
                   <!---->
@@ -24958,11 +26745,7 @@ exports[`Storybook Tests IndividualsTable Outlined 1`] = `
                     data-no-activator=""
                   >
                     
-                    <i
-                      aria-hidden="true"
-                      class="mdi-account-multiple mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--start"
-                    />
-                     1
+                    c7dac2c6-b0c5-4898-b92a-dc149fa5f175
                     
                   </div>
                   <!---->
@@ -24972,423 +26755,408 @@ exports[`Storybook Tests IndividualsTable Outlined 1`] = `
                 <!--teleport start-->
                 <!--teleport end-->
                 
-                
               </td>
-              <!--v-if-->
-            </tr>
-            
-            <!---->
-            
-            
-            
-            <!---->
-          </tbody>
-          <!---->
-          <!---->
-          
-          
-        </table>
-      </div>
-      
-      <div
-        class="d-flex align-center text-center pt-2"
-      >
-        <div
-          class="v-col v-col-8 ml-auto"
-        >
-          <nav
-            aria-label="Pagination Navigation"
-            class="v-pagination v-theme--light"
-            data-test="v-pagination-root"
-            role="navigation"
-          >
-            <ul
-              class="v-pagination__list"
-            >
-              <!---->
-              <li
-                class="v-pagination__prev"
-                data-test="v-pagination-prev"
+              <td
+                class="capitalize"
               >
-                <button
-                  aria-disabled="true"
-                  aria-label="Previous page"
-                  class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-text"
-                  disabled=""
-                  type="button"
+                affiliate
+              </td>
+              <td>
+                2021-02-19 02:22 PM
+              </td>
+              <td
+                class="text-center"
+              >
+                <span
+                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-tonal ma-2"
+                  draggable="false"
+                  style="color: rgba(0, 0, 0, 0.42); caret-color: rgba(0, 0, 0, 0.42);"
+                  text-color="white"
                 >
                   
+                  <!---->
                   <span
-                    class="v-btn__overlay"
-                  />
-                  <span
-                    class="v-btn__underlay"
+                    class="v-chip__underlay"
                   />
                   
                   <!---->
-                  <span
-                    class="v-btn__content"
+                  <!---->
+                  <div
+                    class="v-chip__content"
                     data-no-activator=""
                   >
-                    <i
-                      aria-hidden="true"
-                      class="mdi-chevron-left mdi v-icon notranslate v-theme--light v-icon--size-default"
-                    />
-                  </span>
+                    
+                    scheduled
+                    
+                  </div>
                   <!---->
                   <!---->
-                </button>
-              </li>
-              
-              <li
-                class="v-pagination__item v-pagination__item--is-active"
-                data-test="v-pagination-item"
-              >
-                <button
-                  aria-current="true"
-                  aria-label="Page 1, Current page"
-                  class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-text"
-                  ellipsis="false"
-                  type="button"
+                </span>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                
+                
+                <span
+                  aria-describedby="v-tooltip-14"
+                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined text-center clip"
+                  draggable="false"
+                  targetref="[object Object]"
+                  tile=""
                 >
                   
+                  <!---->
                   <span
-                    class="v-btn__overlay"
-                  />
-                  <span
-                    class="v-btn__underlay"
+                    class="v-chip__underlay"
                   />
                   
                   <!---->
-                  <span
-                    class="v-btn__content"
+                  <!---->
+                  <div
+                    class="v-chip__content"
                     data-no-activator=""
                   >
                     
+                    8a1aeaff-8f8f-4e3f-912b-04775c83f4c1
                     
-                    1
-                    
-                    
-                  </span>
+                  </div>
                   <!---->
                   <!---->
-                </button>
-              </li>
-              <li
-                class="v-pagination__item"
-                data-test="v-pagination-item"
+                </span>
+                
+                <!--teleport start-->
+                <!--teleport end-->
+                
+              </td>
+              <td
+                class="capitalize"
               >
-                <button
-                  aria-current="false"
-                  aria-label="Go to page 2"
-                  class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-text"
-                  ellipsis="false"
-                  type="button"
+                recommend affiliations
+              </td>
+              <td>
+                2021-02-20 08:01 AM
+              </td>
+              <td
+                class="text-center"
+              >
+                <span
+                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-tonal ma-2"
+                  draggable="false"
+                  style="color: rgb(244, 25, 0); caret-color: #f41900;"
+                  text-color="white"
                 >
                   
+                  <!---->
                   <span
-                    class="v-btn__overlay"
-                  />
-                  <span
-                    class="v-btn__underlay"
+                    class="v-chip__underlay"
                   />
                   
                   <!---->
-                  <span
-                    class="v-btn__content"
+                  <!---->
+                  <div
+                    class="v-chip__content"
                     data-no-activator=""
                   >
                     
+                    failed
                     
-                    2
-                    
-                    
-                  </span>
+                  </div>
                   <!---->
                   <!---->
-                </button>
-              </li>
-              
-              <li
-                class="v-pagination__next"
-                data-test="v-pagination-next"
-              >
-                <button
-                  aria-disabled="false"
-                  aria-label="Next page"
-                  class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-text"
-                  type="button"
+                </span>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                
+                
+                <span
+                  aria-describedby="v-tooltip-17"
+                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined text-center clip"
+                  draggable="false"
+                  targetref="[object Object]"
+                  tile=""
                 >
                   
+                  <!---->
                   <span
-                    class="v-btn__overlay"
-                  />
-                  <span
-                    class="v-btn__underlay"
+                    class="v-chip__underlay"
                   />
                   
-                  <!---->
-                  <span
-                    class="v-btn__content"
-                    data-no-activator=""
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="mdi-chevron-right mdi v-icon notranslate v-theme--light v-icon--size-default"
-                    />
-                  </span>
                   <!---->
                   <!---->
-                </button>
-              </li>
-              <!---->
-            </ul>
-          </nav>
-        </div>
-        <div
-          class="v-col v-col-2"
-        >
-          <div
-            class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-locale--is-ltr v-input--dirty v-text-field mr-3"
-          >
-            <!---->
-            <div
-              class="v-input__control"
-            >
-              
-              <div
-                class="v-field v-field--active v-field--center-affix v-field--dirty v-field--variant-outlined v-theme--light v-locale--is-ltr"
-              >
-                <div
-                  class="v-field__overlay"
-                />
-                <div
-                  class="v-field__loader"
-                >
                   <div
-                    aria-hidden="true"
-                    aria-valuemax="100"
-                    aria-valuemin="0"
-                    class="v-progress-linear v-theme--light v-locale--is-ltr"
-                    role="progressbar"
-                    style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);"
-                  >
-                    <!---->
-                    <div
-                      class="v-progress-linear__background"
-                      style="width: 100%;"
-                    />
-                    <transition-stub
-                      appear="false"
-                      css="true"
-                      name="fade-transition"
-                      persisted="false"
-                    >
-                      <div
-                        class="v-progress-linear__indeterminate"
-                      >
-                        
-                        <div
-                          class="v-progress-linear__indeterminate long"
-                        />
-                        <div
-                          class="v-progress-linear__indeterminate short"
-                        />
-                        
-                      </div>
-                    </transition-stub>
-                    <!---->
-                  </div>
-                </div>
-                <!---->
-                <div
-                  class="v-field__field"
-                  data-no-activator=""
-                >
-                  <!---->
-                  <label
-                    class="v-label v-field-label"
-                    for="input-19"
+                    class="v-chip__content"
+                    data-no-activator=""
                   >
-                    <!---->
                     
-                    Items per page
+                    bc904fc6-c8a3-4271-a0eb-223c6524ea71
                     
-                  </label>
-                  
-                  
+                  </div>
                   <!---->
-                  <input
-                    aria-describedby="input-19-messages"
-                    class="v-field__input"
-                    id="input-19"
-                    max="7"
-                    min="1"
-                    size="1"
-                    type="number"
-                  />
                   <!---->
-                  
-                  
-                </div>
-                <!---->
-                <!---->
-                <div
-                  class="v-field__outline"
+                </span>
+                
+                <!--teleport start-->
+                <!--teleport end-->
+                
+              </td>
+              <td
+                class="capitalize"
+              >
+                affiliate
+              </td>
+              <td>
+                2021-02-20 10:45 AM
+              </td>
+              <td
+                class="text-center"
+              >
+                <span
+                  class="v-chip v-theme--light text-primary v-chip--density-default v-chip--size-default v-chip--variant-tonal ma-2"
+                  draggable="false"
+                  text-color="white"
                 >
                   
-                  <div
-                    class="v-field__outline__start"
+                  <!---->
+                  <span
+                    class="v-chip__underlay"
                   />
+                  
+                  <!---->
+                  <!---->
                   <div
-                    class="v-field__outline__notch"
+                    class="v-chip__content"
+                    data-no-activator=""
                   >
-                    <label
-                      aria-hidden="true"
-                      class="v-label v-field-label v-field-label--floating"
-                      for="input-19"
-                    >
-                      <!---->
-                      
-                      Items per page
-                      
-                    </label>
+                    
+                    started
+                    
                   </div>
-                  <div
-                    class="v-field__outline__end"
-                  />
-                  
                   <!---->
-                </div>
-              </div>
-              
-            </div>
-            <!---->
-            <!---->
-          </div>
-        </div>
+                  <!---->
+                </span>
+              </td>
+            </tr>
+            
+          </tbody>
+          
+        </table>
       </div>
-      
+      <!---->
     </div>
-    
-    <!---->
-    <!---->
-    
-    
-    <!---->
-    <!---->
-    
-    
-    <!---->
-    <!---->
-    
-    <!--v-if-->
-    <!--v-if-->
     <div
-      class="v-card v-theme--light bg-primary v-card--density-default v-card--variant-elevated dragged-item pa-2"
+      class="text-center pa-4"
     >
-      <!---->
-      <div
-        class="v-card__loader"
+      <nav
+        aria-label="Pagination Navigation"
+        class="v-pagination v-theme--light"
+        data-test="v-pagination-root"
+        role="navigation"
       >
-        <div
-          aria-hidden="true"
-          aria-valuemax="100"
-          aria-valuemin="0"
-          class="v-progress-linear v-theme--light v-locale--is-ltr"
-          role="progressbar"
-          style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);"
+        <ul
+          class="v-pagination__list"
         >
           <!---->
-          <div
-            class="v-progress-linear__background"
-            style="width: 100%;"
-          />
-          <transition-stub
-            appear="false"
-            css="true"
-            name="fade-transition"
-            persisted="false"
+          <li
+            class="v-pagination__prev"
+            data-test="v-pagination-prev"
           >
-            <div
-              class="v-progress-linear__indeterminate"
+            <button
+              aria-disabled="true"
+              aria-label="Previous page"
+              class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text"
+              disabled=""
+              type="button"
             >
               
-              <div
-                class="v-progress-linear__indeterminate long"
+              <span
+                class="v-btn__overlay"
               />
-              <div
-                class="v-progress-linear__indeterminate short"
+              <span
+                class="v-btn__underlay"
               />
               
-            </div>
-          </transition-stub>
-          <!---->
-        </div>
-      </div>
-      <!---->
-      <!---->
-      
-      <div
-        class="v-card-item"
-      >
-        <!---->
-        <div
-          class="v-card-item__content"
-        >
-          <!---->
-          <!---->
+              <!---->
+              <span
+                class="v-btn__content"
+                data-no-activator=""
+              >
+                <i
+                  aria-hidden="true"
+                  class="mdi-chevron-left mdi v-icon notranslate v-theme--light v-icon--size-default"
+                />
+              </span>
+              <!---->
+              <!---->
+            </button>
+          </li>
           
-           Moving 0 individual
+          <li
+            class="v-pagination__item v-pagination__item--is-active"
+            data-test="v-pagination-item"
+          >
+            <button
+              aria-current="true"
+              aria-label="Page 1, Current page"
+              class="v-btn v-btn--icon v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text"
+              ellipsis="false"
+              type="button"
+            >
+              
+              <span
+                class="v-btn__overlay"
+              />
+              <span
+                class="v-btn__underlay"
+              />
+              
+              <!---->
+              <span
+                class="v-btn__content"
+                data-no-activator=""
+              >
+                
+                
+                1
+                
+                
+              </span>
+              <!---->
+              <!---->
+            </button>
+          </li>
+          <li
+            class="v-pagination__item"
+            data-test="v-pagination-item"
+          >
+            <button
+              aria-current="false"
+              aria-label="Go to page 2"
+              class="v-btn v-btn--icon v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text"
+              ellipsis="false"
+              type="button"
+            >
+              
+              <span
+                class="v-btn__overlay"
+              />
+              <span
+                class="v-btn__underlay"
+              />
+              
+              <!---->
+              <span
+                class="v-btn__content"
+                data-no-activator=""
+              >
+                
+                
+                2
+                
+                
+              </span>
+              <!---->
+              <!---->
+            </button>
+          </li>
           
-        </div>
-        <!---->
-      </div>
-      
-      <!---->
-      
-      <!---->
-      <span
-        class="v-card__underlay"
-      />
-      
+          <li
+            class="v-pagination__next"
+            data-test="v-pagination-next"
+          >
+            <button
+              aria-disabled="false"
+              aria-label="Next page"
+              class="v-btn v-btn--icon v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text"
+              type="button"
+            >
+              
+              <span
+                class="v-btn__overlay"
+              />
+              <span
+                class="v-btn__underlay"
+              />
+              
+              <!---->
+              <span
+                class="v-btn__content"
+                data-no-activator=""
+              >
+                <i
+                  aria-hidden="true"
+                  class="mdi-chevron-right mdi v-icon notranslate v-theme--light v-icon--size-default"
+                />
+              </span>
+              <!---->
+              <!---->
+            </button>
+          </li>
+          <!---->
+        </ul>
+      </nav>
     </div>
-  </section>
+    
+    <!---->
+    <!---->
+    
+  </div>
 </div>
 `;
 
-exports[`Storybook Tests JobModal Default 1`] = `
+exports[`Storybook Tests JobsTable Empty 1`] = `
 <div>
   <div
-    class="ma-auto"
+    class="v-container v-locale--is-ltr jobs section mb-5 pa-0"
   >
-    <button
-      class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-small v-btn--variant-outlined"
-      dark=""
-      type="button"
+    <header
+      class="header"
     >
-      
-      <span
-        class="v-btn__overlay"
-      />
-      <span
-        class="v-btn__underlay"
-      />
-      
-      <!---->
-      <span
-        class="v-btn__content"
-        data-no-activator=""
+      <h4
+        class="title"
+      >
+        <i
+          aria-hidden="true"
+          class="mdi-tray-full mdi v-icon notranslate v-theme--light v-icon--size-small text-black v-icon--start"
+        />
+         Jobs 
+      </h4>
+      <button
+        class="v-btn v-theme--light bg-secondary v-btn--density-default v-btn--size-small v-btn--variant-flat black--text"
+        type="button"
       >
         
+        <span
+          class="v-btn__overlay"
+        />
+        <span
+          class="v-btn__underlay"
+        />
         
-         Open Dialog 
-        
-        
-      </span>
-      <!---->
-      <!---->
-    </button>
+        <!---->
+        <span
+          class="v-btn__content"
+          data-no-activator=""
+        >
+          
+          
+           Add 
+          
+          
+        </span>
+        <!---->
+        <!---->
+      </button>
+    </header>
+    <!--v-if-->
+    <!--v-if-->
+    <p
+      class="text-subtitle-1 pa-7"
+    >
+      There are no jobs in the queue.
+    </p>
     
     <!---->
     <!---->
@@ -25397,7 +27165,7 @@ exports[`Storybook Tests JobModal Default 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests JobsTable Default 1`] = `
+exports[`Storybook Tests JobsTable OnError 1`] = `
 <div>
   <div
     class="v-container v-locale--is-ltr jobs section mb-5 pa-0"
@@ -25442,712 +27210,756 @@ exports[`Storybook Tests JobsTable Default 1`] = `
       </button>
     </header>
     <div
-      class="v-table v-theme--light v-table--density-default"
+      class="v-alert v-theme--light text-error v-alert--density-compact v-alert--variant-tonal"
+      role="alert"
     >
+      
+      <!---->
+      <span
+        class="v-alert__underlay"
+      />
+      
       <!---->
       <div
-        class="v-table__wrapper"
+        class="v-alert__prepend"
       >
-        <table>
-          
-          <thead>
-            <tr>
-              <th
-                class="text-left"
-              >
-                Job ID
-              </th>
-              <th
-                class="text-left"
-              >
-                Type
-              </th>
-              <th
-                class="text-left"
-              >
-                Date
-              </th>
-              <th
-                class="text-center"
-              >
-                Status
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            
-            <tr>
-              <td>
-                
-                
-                <span
-                  aria-describedby="v-tooltip-5"
-                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined text-center clip"
-                  draggable="false"
-                  targetref="[object Object]"
-                  tile=""
-                >
-                  
-                  <!---->
-                  <span
-                    class="v-chip__underlay"
-                  />
-                  
-                  <!---->
-                  <!---->
-                  <div
-                    class="v-chip__content"
-                    data-no-activator=""
-                  >
-                    
-                    a60346ea-6fbe-4501-896b-c8433a6b958f
-                    
-                  </div>
-                  <!---->
-                  <!---->
-                </span>
-                
-                <!--teleport start-->
-                <!--teleport end-->
-                
-              </td>
-              <td
-                class="capitalize"
-              >
-                recommend affiliations
-              </td>
-              <td>
-                2021-02-19 12:09 PM
-              </td>
-              <td
-                class="text-center"
-              >
-                <span
-                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-tonal ma-2"
-                  draggable="false"
-                  style="color: rgb(63, 165, 0); caret-color: #3fa500;"
-                  text-color="white"
-                >
-                  
-                  <!---->
-                  <span
-                    class="v-chip__underlay"
-                  />
-                  
-                  <!---->
-                  <!---->
-                  <div
-                    class="v-chip__content"
-                    data-no-activator=""
-                  >
-                    
-                    finished
-                    
-                  </div>
-                  <!---->
-                  <!---->
-                </span>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                
-                
-                <span
-                  aria-describedby="v-tooltip-8"
-                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined text-center clip"
-                  draggable="false"
-                  targetref="[object Object]"
-                  tile=""
-                >
-                  
-                  <!---->
-                  <span
-                    class="v-chip__underlay"
-                  />
-                  
-                  <!---->
-                  <!---->
-                  <div
-                    class="v-chip__content"
-                    data-no-activator=""
-                  >
-                    
-                    7fb401f4-6fbe-4501-896b-c8433a6b958f
-                    
-                  </div>
-                  <!---->
-                  <!---->
-                </span>
-                
-                <!--teleport start-->
-                <!--teleport end-->
-                
-              </td>
-              <td
-                class="capitalize"
-              >
-                recommend affiliations
-              </td>
-              <td>
-                2021-02-19 02:12 PM
-              </td>
-              <td
-                class="text-center"
+        <i
+          aria-hidden="true"
+          class="mdi-close-circle mdi v-icon notranslate v-theme--light"
+          density="compact"
+          style="font-size: 28px; height: 28px; width: 28px;"
+        />
+      </div>
+      <div
+        class="v-alert__content"
+      >
+        <!---->
+        Error fetching data: Test error message
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <!--v-if-->
+    <p
+      class="text-subtitle-1 pa-7"
+    >
+      There are no jobs in the queue.
+    </p>
+    
+    <!---->
+    <!---->
+    
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests LoadingSpinner Default 1`] = `
+<div>
+  <div
+    class="d-flex flex-column justify-center align-center pa-4 h-100"
+  >
+    <div
+      aria-valuemax="100"
+      aria-valuemin="0"
+      class="v-progress-circular v-progress-circular--indeterminate v-theme--light text-primary"
+      role="progressbar"
+      style="width: 48px; height: 48px;"
+    >
+      <svg
+        style="transform: rotate(calc(-90deg + 0deg));"
+        viewBox="0 0 43.63636363636364 43.63636363636364"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          class="v-progress-circular__underlay"
+          cx="50%"
+          cy="50%"
+          fill="transparent"
+          r="20"
+          stroke-dasharray="125.66370614359172"
+          stroke-dashoffset="0"
+          stroke-width="3.6363636363636367"
+        />
+        <circle
+          class="v-progress-circular__overlay"
+          cx="50%"
+          cy="50%"
+          fill="transparent"
+          r="20"
+          stroke-dasharray="125.66370614359172"
+          stroke-dashoffset="125.66370614359172px"
+          stroke-width="3.6363636363636367"
+        />
+      </svg>
+      <!---->
+    </div>
+    <!--v-if-->
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests LoadingSpinner Label 1`] = `
+<div>
+  <div
+    class="d-flex flex-column justify-center align-center pa-4 h-100"
+  >
+    <div
+      aria-valuemax="100"
+      aria-valuemin="0"
+      class="v-progress-circular v-progress-circular--indeterminate v-theme--light text-primary"
+      role="progressbar"
+      style="width: 48px; height: 48px;"
+    >
+      <svg
+        style="transform: rotate(calc(-90deg + 0deg));"
+        viewBox="0 0 43.63636363636364 43.63636363636364"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          class="v-progress-circular__underlay"
+          cx="50%"
+          cy="50%"
+          fill="transparent"
+          r="20"
+          stroke-dasharray="125.66370614359172"
+          stroke-dashoffset="0"
+          stroke-width="3.6363636363636367"
+        />
+        <circle
+          class="v-progress-circular__overlay"
+          cx="50%"
+          cy="50%"
+          fill="transparent"
+          r="20"
+          stroke-dasharray="125.66370614359172"
+          stroke-dashoffset="125.66370614359172px"
+          stroke-width="3.6363636363636367"
+        />
+      </svg>
+      <!---->
+    </div>
+    <p
+      class="subtitle-1 text-medium-emphasis mt-4"
+    >
+      Loading...
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests MatchesModal Default 1`] = `
+<div>
+  <div
+    class="ma-auto"
+    data-app="true"
+  >
+    <button
+      class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-small v-btn--variant-outlined"
+      dark=""
+      type="button"
+    >
+      
+      <span
+        class="v-btn__overlay"
+      />
+      <span
+        class="v-btn__underlay"
+      />
+      
+      <!---->
+      <span
+        class="v-btn__content"
+        data-no-activator=""
+      >
+        
+        
+         Open modal 
+        
+        
+      </span>
+      <!---->
+      <!---->
+    </button>
+    
+    <!---->
+    <!---->
+    
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests MatchesModal Error 1`] = `
+<div>
+  <div
+    class="ma-auto"
+    data-app="true"
+  >
+    <button
+      class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-small v-btn--variant-outlined"
+      dark=""
+      type="button"
+    >
+      
+      <span
+        class="v-btn__overlay"
+      />
+      <span
+        class="v-btn__underlay"
+      />
+      
+      <!---->
+      <span
+        class="v-btn__content"
+        data-no-activator=""
+      >
+        
+        
+         Open modal 
+        
+        
+      </span>
+      <!---->
+      <!---->
+    </button>
+    
+    <!---->
+    <!---->
+    
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests OrganizationEntry Default 1`] = `
+<div>
+  <div
+    class="v-table v-table--has-top v-table--has-bottom v-theme--light v-table--density-default v-data-table"
+    hide-default-footer=""
+    hide-default-header=""
+    item-key="name"
+  >
+    
+    <!---->
+    
+    <div
+      class="v-table__wrapper"
+    >
+      <table>
+        
+        
+        <!---->
+        <thead>
+          
+          
+          <tr>
+            
+            <th
+              class="v-data-table__td v-data-table-column--align-start v-data-table__th"
+              colspan="1"
+              rowspan="1"
+            >
+              
+              <div
+                class="v-data-table-header__content"
               >
-                <span
-                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-tonal ma-2"
-                  draggable="false"
-                  style="color: rgb(63, 165, 0); caret-color: #3fa500;"
-                  text-color="white"
-                >
-                  
-                  <!---->
-                  <span
-                    class="v-chip__underlay"
-                  />
-                  
-                  <!---->
-                  <!---->
-                  <div
-                    class="v-chip__content"
-                    data-no-activator=""
-                  >
-                    
-                    finished
-                    
-                  </div>
-                  <!---->
-                  <!---->
-                </span>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                
-                
-                <span
-                  aria-describedby="v-tooltip-11"
-                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined text-center clip"
-                  draggable="false"
-                  targetref="[object Object]"
-                  tile=""
-                >
-                  
-                  <!---->
-                  <span
-                    class="v-chip__underlay"
-                  />
-                  
-                  <!---->
-                  <!---->
-                  <div
-                    class="v-chip__content"
-                    data-no-activator=""
-                  >
-                    
-                    c7dac2c6-b0c5-4898-b92a-dc149fa5f175
-                    
-                  </div>
-                  <!---->
+                <span>
                   <!---->
                 </span>
-                
-                <!--teleport start-->
-                <!--teleport end-->
-                
-              </td>
-              <td
-                class="capitalize"
-              >
-                affiliate
-              </td>
-              <td>
-                2021-02-19 02:22 PM
-              </td>
-              <td
-                class="text-center"
+                <!---->
+                <!---->
+              </div>
+              
+            </th>
+            <th
+              class="v-data-table__td v-data-table-column--align-start v-data-table__th"
+              colspan="1"
+              rowspan="1"
+            >
+              
+              <div
+                class="v-data-table-header__content"
               >
-                <span
-                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-tonal ma-2"
-                  draggable="false"
-                  style="color: rgba(0, 0, 0, 0.42); caret-color: rgba(0, 0, 0, 0.42);"
-                  text-color="white"
-                >
-                  
-                  <!---->
-                  <span
-                    class="v-chip__underlay"
-                  />
-                  
-                  <!---->
-                  <!---->
-                  <div
-                    class="v-chip__content"
-                    data-no-activator=""
-                  >
-                    
-                    scheduled
-                    
-                  </div>
-                  <!---->
+                <span>
                   <!---->
                 </span>
-              </td>
-            </tr>
-            <tr>
-              <td>
+                <!---->
+                <!---->
+              </div>
+              
+            </th>
+            
+          </tr>
+          
+          <!---->
+          
+        </thead>
+        <!---->
+        <tbody>
+          <!---->
+          
+          
+          
+          
+          <tr
+            class=""
+          >
+            <td
+              class="font-weight-medium pl-8"
+            >
+              <router-link-stub
+                class="link--underline"
+                target="_blank"
+                to="[object Object]"
+              />
+            </td>
+            <td
+              class="text-right text--secondary"
+            >
+              
+              
+              <button
+                aria-describedby="v-tooltip-0"
+                class="v-btn v-theme--light bg-transparent v-btn--density-default v-btn--size-default v-btn--variant-flat"
+                targetref="[object Object]"
+                type="button"
+              >
                 
+                <span
+                  class="v-btn__overlay"
+                />
+                <span
+                  class="v-btn__underlay"
+                />
                 
+                <!---->
                 <span
-                  aria-describedby="v-tooltip-14"
-                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined text-center clip"
-                  draggable="false"
-                  targetref="[object Object]"
-                  tile=""
+                  class="v-btn__content"
+                  data-no-activator=""
                 >
                   
-                  <!---->
-                  <span
-                    class="v-chip__underlay"
+                  
+                  280 
+                  <i
+                    aria-hidden="true"
+                    class="mdi-account-multiple mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--end"
                   />
                   
-                  <!---->
-                  <!---->
-                  <div
-                    class="v-chip__content"
-                    data-no-activator=""
-                  >
-                    
-                    8a1aeaff-8f8f-4e3f-912b-04775c83f4c1
-                    
-                  </div>
-                  <!---->
-                  <!---->
+                  
                 </span>
+                <!---->
+                <!---->
+              </button>
+              
+              <!--teleport start-->
+              <!--teleport end-->
+              
+            </td>
+            <td
+              class="text-right"
+            >
+              
+              
+              <button
+                aria-expanded="false"
+                aria-haspopup="menu"
+                aria-owns="v-menu-2"
+                class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-small v-btn--variant-text"
+                targetref="[object Object]"
+                type="button"
+              >
                 
-                <!--teleport start-->
-                <!--teleport end-->
+                <span
+                  class="v-btn__overlay"
+                />
+                <span
+                  class="v-btn__underlay"
+                />
                 
-              </td>
-              <td
-                class="capitalize"
-              >
-                recommend affiliations
-              </td>
-              <td>
-                2021-02-20 08:01 AM
-              </td>
-              <td
-                class="text-center"
-              >
+                <!---->
                 <span
-                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-tonal ma-2"
-                  draggable="false"
-                  style="color: rgb(244, 25, 0); caret-color: #f41900;"
-                  text-color="white"
+                  class="v-btn__content"
+                  data-no-activator=""
                 >
-                  
-                  <!---->
-                  <span
-                    class="v-chip__underlay"
+                  <i
+                    aria-hidden="true"
+                    class="mdi-dots-vertical mdi v-icon notranslate v-theme--light v-icon--size-default"
                   />
-                  
-                  <!---->
-                  <!---->
-                  <div
-                    class="v-chip__content"
-                    data-no-activator=""
-                  >
-                    
-                    failed
-                    
-                  </div>
-                  <!---->
-                  <!---->
                 </span>
-              </td>
-            </tr>
-            <tr>
-              <td>
+                <!---->
+                <!---->
+              </button>
+              
+              <!---->
+              
+              <button
+                class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-small v-btn--variant-text"
+                type="button"
+              >
                 
+                <span
+                  class="v-btn__overlay"
+                />
+                <span
+                  class="v-btn__underlay"
+                />
                 
+                <!---->
                 <span
-                  aria-describedby="v-tooltip-17"
-                  class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined text-center clip"
-                  draggable="false"
-                  targetref="[object Object]"
-                  tile=""
+                  class="v-btn__content"
+                  data-no-activator=""
                 >
-                  
-                  <!---->
-                  <span
-                    class="v-chip__underlay"
+                  <i
+                    aria-hidden="true"
+                    class="mdi-chevron-down mdi v-icon notranslate v-theme--light v-icon--size-default"
                   />
-                  
-                  <!---->
+                </span>
+                <!---->
+                <!---->
+              </button>
+            </td>
+          </tr>
+          
+          <!---->
+          
+          
+          
+          <!---->
+        </tbody>
+        <!---->
+        <!---->
+        
+        
+      </table>
+    </div>
+    
+    
+    <hr
+      aria-orientation="horizontal"
+      class="v-divider v-theme--light"
+      role="separator"
+    />
+    <div
+      class="v-data-table-footer"
+    >
+      <!---->
+      <div
+        class="v-data-table-footer__items-per-page"
+      >
+        <span>
+          Items per page:
+        </span>
+        <div
+          class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-locale--is-ltr v-input--dirty v-text-field v-select v-select--single v-select--selected"
+        >
+          <!---->
+          <div
+            class="v-input__control"
+          >
+            
+            <div
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="v-menu-7"
+              class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-outlined v-theme--light v-locale--is-ltr"
+              role="combobox"
+            >
+              <div
+                class="v-field__overlay"
+              />
+              <div
+                class="v-field__loader"
+              >
+                <div
+                  aria-hidden="true"
+                  aria-valuemax="100"
+                  aria-valuemin="0"
+                  class="v-progress-linear v-theme--light v-locale--is-ltr"
+                  role="progressbar"
+                  style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);"
+                >
                   <!---->
                   <div
-                    class="v-chip__content"
-                    data-no-activator=""
+                    class="v-progress-linear__background"
+                    style="width: 100%;"
+                  />
+                  <transition-stub
+                    appear="false"
+                    css="true"
+                    name="fade-transition"
+                    persisted="false"
                   >
-                    
-                    bc904fc6-c8a3-4271-a0eb-223c6524ea71
-                    
-                  </div>
-                  <!---->
+                    <div
+                      class="v-progress-linear__indeterminate"
+                    >
+                      
+                      <div
+                        class="v-progress-linear__indeterminate long"
+                      />
+                      <div
+                        class="v-progress-linear__indeterminate short"
+                      />
+                      
+                    </div>
+                  </transition-stub>
                   <!---->
-                </span>
-                
-                <!--teleport start-->
-                <!--teleport end-->
-                
-              </td>
-              <td
-                class="capitalize"
-              >
-                affiliate
-              </td>
-              <td>
-                2021-02-20 10:45 AM
-              </td>
-              <td
-                class="text-center"
+                </div>
+              </div>
+              <!---->
+              <div
+                class="v-field__field"
+                data-no-activator=""
               >
-                <span
-                  class="v-chip v-theme--light text-primary v-chip--density-default v-chip--size-default v-chip--variant-tonal ma-2"
-                  draggable="false"
-                  text-color="white"
+                <!---->
+                <label
+                  class="v-label v-field-label"
+                  for="input-5"
                 >
+                  <!---->
                   
                   <!---->
-                  <span
-                    class="v-chip__underlay"
-                  />
+                  
+                </label>
+                
+                
+                <!---->
+                <div
+                  class="v-field__input"
+                  data-no-activator=""
+                >
+                  
+                  
                   
                   <!---->
                   <!---->
+                  
+                  
                   <div
-                    class="v-chip__content"
-                    data-no-activator=""
+                    class="v-select__selection"
                   >
-                    
-                    started
-                    
+                    <span
+                      class="v-select__selection-text"
+                    >
+                      10
+                      <!---->
+                    </span>
                   </div>
-                  <!---->
-                  <!---->
-                </span>
-              </td>
-            </tr>
-            
-          </tbody>
-          
-        </table>
-      </div>
-      <!---->
-    </div>
-    <div
-      class="text-center pa-4"
-    >
-      <nav
-        aria-label="Pagination Navigation"
-        class="v-pagination v-theme--light"
-        data-test="v-pagination-root"
-        role="navigation"
-      >
-        <ul
-          class="v-pagination__list"
-        >
-          <!---->
-          <li
-            class="v-pagination__prev"
-            data-test="v-pagination-prev"
-          >
-            <button
-              aria-disabled="true"
-              aria-label="Previous page"
-              class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text"
-              disabled=""
-              type="button"
-            >
-              
-              <span
-                class="v-btn__overlay"
-              />
-              <span
-                class="v-btn__underlay"
-              />
-              
+                  
+                  
+                  
+                  <input
+                    aria-describedby="input-5-messages"
+                    aria-label="Open"
+                    id="input-5"
+                    inputmode="none"
+                    size="1"
+                    title="Open"
+                    type="text"
+                  />
+                </div>
+                <!---->
+                
+                
+              </div>
               <!---->
-              <span
-                class="v-btn__content"
-                data-no-activator=""
+              <div
+                class="v-field__append-inner"
               >
+                
+                
+                <!---->
                 <i
                   aria-hidden="true"
-                  class="mdi-chevron-left mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  class="mdi-menu-down mdi v-icon notranslate v-theme--light v-icon--size-default v-select__menu-icon"
                 />
-              </span>
-              <!---->
-              <!---->
-            </button>
-          </li>
-          
-          <li
-            class="v-pagination__item v-pagination__item--is-active"
-            data-test="v-pagination-item"
+                
+                
+                <!---->
+              </div>
+              <div
+                class="v-field__outline"
+              >
+                
+                <div
+                  class="v-field__outline__start"
+                />
+                <!---->
+                <div
+                  class="v-field__outline__end"
+                />
+                
+                <!---->
+              </div>
+            </div>
+            
+          </div>
+          <!---->
+          <!---->
+        </div>
+      </div>
+      <div
+        class="v-data-table-footer__info"
+      >
+        <div>
+          1-1 of 1
+        </div>
+      </div>
+      <div
+        class="v-data-table-footer__pagination"
+      >
+        <nav
+          aria-label="Pagination Navigation"
+          class="v-pagination v-theme--light"
+          data-test="v-pagination-root"
+          role="navigation"
+        >
+          <ul
+            class="v-pagination__list"
           >
-            <button
-              aria-current="true"
-              aria-label="Page 1, Current page"
-              class="v-btn v-btn--icon v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text"
-              ellipsis="false"
-              type="button"
+            <li
+              class="v-pagination__first"
+              data-test="v-pagination-first"
             >
-              
-              <span
-                class="v-btn__overlay"
-              />
-              <span
-                class="v-btn__underlay"
-              />
-              
-              <!---->
-              <span
-                class="v-btn__content"
-                data-no-activator=""
+              <button
+                aria-disabled="true"
+                aria-label="First page"
+                class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain"
+                disabled=""
+                type="button"
               >
                 
+                <span
+                  class="v-btn__overlay"
+                />
+                <span
+                  class="v-btn__underlay"
+                />
                 
-                1
+                <!---->
+                <span
+                  class="v-btn__content"
+                  data-no-activator=""
+                >
+                  <i
+                    aria-hidden="true"
+                    class="mdi-page-first mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  />
+                </span>
+                <!---->
+                <!---->
+              </button>
+            </li>
+            <li
+              class="v-pagination__prev"
+              data-test="v-pagination-prev"
+            >
+              <button
+                aria-disabled="true"
+                aria-label="Previous page"
+                class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain"
+                disabled=""
+                type="button"
+              >
                 
+                <span
+                  class="v-btn__overlay"
+                />
+                <span
+                  class="v-btn__underlay"
+                />
                 
-              </span>
-              <!---->
-              <!---->
-            </button>
-          </li>
-          <li
-            class="v-pagination__item"
-            data-test="v-pagination-item"
-          >
-            <button
-              aria-current="false"
-              aria-label="Go to page 2"
-              class="v-btn v-btn--icon v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text"
-              ellipsis="false"
-              type="button"
+                <!---->
+                <span
+                  class="v-btn__content"
+                  data-no-activator=""
+                >
+                  <i
+                    aria-hidden="true"
+                    class="mdi-chevron-left mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  />
+                </span>
+                <!---->
+                <!---->
+              </button>
+            </li>
+            
+            
+            <li
+              class="v-pagination__next"
+              data-test="v-pagination-next"
             >
-              
-              <span
-                class="v-btn__overlay"
-              />
-              <span
-                class="v-btn__underlay"
-              />
-              
-              <!---->
-              <span
-                class="v-btn__content"
-                data-no-activator=""
+              <button
+                aria-disabled="true"
+                aria-label="Next page"
+                class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain"
+                disabled=""
+                type="button"
               >
                 
+                <span
+                  class="v-btn__overlay"
+                />
+                <span
+                  class="v-btn__underlay"
+                />
                 
-                2
-                
-                
-              </span>
-              <!---->
-              <!---->
-            </button>
-          </li>
-          
-          <li
-            class="v-pagination__next"
-            data-test="v-pagination-next"
-          >
-            <button
-              aria-disabled="false"
-              aria-label="Next page"
-              class="v-btn v-btn--icon v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text"
-              type="button"
+                <!---->
+                <span
+                  class="v-btn__content"
+                  data-no-activator=""
+                >
+                  <i
+                    aria-hidden="true"
+                    class="mdi-chevron-right mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  />
+                </span>
+                <!---->
+                <!---->
+              </button>
+            </li>
+            <li
+              class="v-pagination__last"
+              data-test="v-pagination-last"
             >
-              
-              <span
-                class="v-btn__overlay"
-              />
-              <span
-                class="v-btn__underlay"
-              />
-              
-              <!---->
-              <span
-                class="v-btn__content"
-                data-no-activator=""
+              <button
+                aria-disabled="true"
+                aria-label="Last page"
+                class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain"
+                disabled=""
+                type="button"
               >
-                <i
-                  aria-hidden="true"
-                  class="mdi-chevron-right mdi v-icon notranslate v-theme--light v-icon--size-default"
+                
+                <span
+                  class="v-btn__overlay"
                 />
-              </span>
-              <!---->
-              <!---->
-            </button>
-          </li>
-          <!---->
-        </ul>
-      </nav>
-    </div>
-    
-    <!---->
-    <!---->
-    
-  </div>
-</div>
-`;
-
-exports[`Storybook Tests JobsTable Empty 1`] = `
-<div>
-  <div
-    class="v-container v-locale--is-ltr jobs section mb-5 pa-0"
-  >
-    <header
-      class="header"
-    >
-      <h4
-        class="title"
-      >
-        <i
-          aria-hidden="true"
-          class="mdi-tray-full mdi v-icon notranslate v-theme--light v-icon--size-small text-black v-icon--start"
-        />
-         Jobs 
-      </h4>
-      <button
-        class="v-btn v-theme--light bg-secondary v-btn--density-default v-btn--size-small v-btn--variant-flat black--text"
-        type="button"
-      >
-        
-        <span
-          class="v-btn__overlay"
-        />
-        <span
-          class="v-btn__underlay"
-        />
-        
-        <!---->
-        <span
-          class="v-btn__content"
-          data-no-activator=""
-        >
-          
-          
-           Add 
-          
-          
-        </span>
-        <!---->
-        <!---->
-      </button>
-    </header>
-    <!--v-if-->
-    <p
-      class="text-subtitle-1 pa-7"
-    >
-      There are no jobs in the queue.
-    </p>
-    
-    <!---->
-    <!---->
-    
-  </div>
-</div>
-`;
-
-exports[`Storybook Tests MatchesModal Default 1`] = `
-<div>
-  <div
-    class="ma-auto"
-    data-app="true"
-  >
-    <button
-      class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-small v-btn--variant-outlined"
-      dark=""
-      type="button"
-    >
-      
-      <span
-        class="v-btn__overlay"
-      />
-      <span
-        class="v-btn__underlay"
-      />
-      
-      <!---->
-      <span
-        class="v-btn__content"
-        data-no-activator=""
-      >
-        
-        
-         Open modal 
-        
-        
-      </span>
-      <!---->
-      <!---->
-    </button>
-    
-    <!---->
-    <!---->
-    
-  </div>
-</div>
-`;
-
-exports[`Storybook Tests MatchesModal Error 1`] = `
-<div>
-  <div
-    class="ma-auto"
-    data-app="true"
-  >
-    <button
-      class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-small v-btn--variant-outlined"
-      dark=""
-      type="button"
-    >
-      
-      <span
-        class="v-btn__overlay"
-      />
-      <span
-        class="v-btn__underlay"
-      />
-      
-      <!---->
-      <span
-        class="v-btn__content"
-        data-no-activator=""
-      >
-        
-        
-         Open modal 
-        
-        
-      </span>
-      <!---->
-      <!---->
-    </button>
+                <span
+                  class="v-btn__underlay"
+                />
+                
+                <!---->
+                <span
+                  class="v-btn__content"
+                  data-no-activator=""
+                >
+                  <i
+                    aria-hidden="true"
+                    class="mdi-page-last mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  />
+                </span>
+                <!---->
+                <!---->
+              </button>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
     
-    <!---->
-    <!---->
     
   </div>
 </div>
 `;
 
-exports[`Storybook Tests OrganizationEntry Default 1`] = `
+exports[`Storybook Tests OrganizationEntry NotEditable 1`] = `
 <div>
   <div
     class="v-table v-table--has-top v-table--has-bottom v-theme--light v-table--density-default v-data-table"
@@ -26532,370 +28344,712 @@ exports[`Storybook Tests OrganizationEntry Default 1`] = `
           <ul
             class="v-pagination__list"
           >
-            <li
-              class="v-pagination__first"
-              data-test="v-pagination-first"
+            <li
+              class="v-pagination__first"
+              data-test="v-pagination-first"
+            >
+              <button
+                aria-disabled="true"
+                aria-label="First page"
+                class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain"
+                disabled=""
+                type="button"
+              >
+                
+                <span
+                  class="v-btn__overlay"
+                />
+                <span
+                  class="v-btn__underlay"
+                />
+                
+                <!---->
+                <span
+                  class="v-btn__content"
+                  data-no-activator=""
+                >
+                  <i
+                    aria-hidden="true"
+                    class="mdi-page-first mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  />
+                </span>
+                <!---->
+                <!---->
+              </button>
+            </li>
+            <li
+              class="v-pagination__prev"
+              data-test="v-pagination-prev"
+            >
+              <button
+                aria-disabled="true"
+                aria-label="Previous page"
+                class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain"
+                disabled=""
+                type="button"
+              >
+                
+                <span
+                  class="v-btn__overlay"
+                />
+                <span
+                  class="v-btn__underlay"
+                />
+                
+                <!---->
+                <span
+                  class="v-btn__content"
+                  data-no-activator=""
+                >
+                  <i
+                    aria-hidden="true"
+                    class="mdi-chevron-left mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  />
+                </span>
+                <!---->
+                <!---->
+              </button>
+            </li>
+            
+            
+            <li
+              class="v-pagination__next"
+              data-test="v-pagination-next"
+            >
+              <button
+                aria-disabled="true"
+                aria-label="Next page"
+                class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain"
+                disabled=""
+                type="button"
+              >
+                
+                <span
+                  class="v-btn__overlay"
+                />
+                <span
+                  class="v-btn__underlay"
+                />
+                
+                <!---->
+                <span
+                  class="v-btn__content"
+                  data-no-activator=""
+                >
+                  <i
+                    aria-hidden="true"
+                    class="mdi-chevron-right mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  />
+                </span>
+                <!---->
+                <!---->
+              </button>
+            </li>
+            <li
+              class="v-pagination__last"
+              data-test="v-pagination-last"
+            >
+              <button
+                aria-disabled="true"
+                aria-label="Last page"
+                class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain"
+                disabled=""
+                type="button"
+              >
+                
+                <span
+                  class="v-btn__overlay"
+                />
+                <span
+                  class="v-btn__underlay"
+                />
+                
+                <!---->
+                <span
+                  class="v-btn__content"
+                  data-no-activator=""
+                >
+                  <i
+                    aria-hidden="true"
+                    class="mdi-page-last mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  />
+                </span>
+                <!---->
+                <!---->
+              </button>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    
+    
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests OrganizationModal Default 1`] = `
+<div>
+  <div
+    class="ma-auto"
+  >
+    <button
+      class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-small v-btn--variant-outlined"
+      dark=""
+      type="button"
+    >
+      
+      <span
+        class="v-btn__overlay"
+      />
+      <span
+        class="v-btn__underlay"
+      />
+      
+      <!---->
+      <span
+        class="v-btn__content"
+        data-no-activator=""
+      >
+        
+        
+         Open Dialog 
+        
+        
+      </span>
+      <!---->
+      <!---->
+    </button>
+    
+    <!---->
+    <!---->
+    
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests OrganizationModal ErrorOnSave 1`] = `
+<div>
+  <div
+    class="ma-auto"
+  >
+    <button
+      class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-small v-btn--variant-outlined"
+      dark=""
+      type="button"
+    >
+      
+      <span
+        class="v-btn__overlay"
+      />
+      <span
+        class="v-btn__underlay"
+      />
+      
+      <!---->
+      <span
+        class="v-btn__content"
+        data-no-activator=""
+      >
+        
+        
+         Open Dialog 
+        
+        
+      </span>
+      <!---->
+      <!---->
+    </button>
+    
+    <!---->
+    <!---->
+    
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests OrganizationSelector Default 1`] = `
+<div>
+  <div
+    class="ma-5 col-3"
+  >
+    <div
+      class="v-input v-input--horizontal v-input--center-affix v-input--density-comfortable v-locale--is-ltr v-text-field v-autocomplete v-autocomplete--single"
+    >
+      <!---->
+      <div
+        class="v-input__control"
+      >
+        
+        <div
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-owns="v-menu-2"
+          class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--variant-outlined v-theme--light v-locale--is-ltr"
+          role="combobox"
+        >
+          <div
+            class="v-field__overlay"
+          />
+          <div
+            class="v-field__loader"
+          >
+            <div
+              aria-hidden="true"
+              aria-valuemax="100"
+              aria-valuemin="0"
+              class="v-progress-linear v-theme--light v-locale--is-ltr"
+              role="progressbar"
+              style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);"
             >
-              <button
-                aria-disabled="true"
-                aria-label="First page"
-                class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain"
-                disabled=""
-                type="button"
+              <!---->
+              <div
+                class="v-progress-linear__background"
+                style="width: 100%;"
+              />
+              <transition-stub
+                appear="false"
+                css="true"
+                name="fade-transition"
+                persisted="false"
               >
-                
-                <span
-                  class="v-btn__overlay"
-                />
-                <span
-                  class="v-btn__underlay"
-                />
-                
-                <!---->
-                <span
-                  class="v-btn__content"
-                  data-no-activator=""
+                <div
+                  class="v-progress-linear__indeterminate"
                 >
-                  <i
-                    aria-hidden="true"
-                    class="mdi-page-first mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  
+                  <div
+                    class="v-progress-linear__indeterminate long"
                   />
-                </span>
-                <!---->
-                <!---->
-              </button>
-            </li>
-            <li
-              class="v-pagination__prev"
-              data-test="v-pagination-prev"
-            >
-              <button
-                aria-disabled="true"
-                aria-label="Previous page"
-                class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain"
-                disabled=""
-                type="button"
-              >
-                
-                <span
-                  class="v-btn__overlay"
-                />
-                <span
-                  class="v-btn__underlay"
-                />
-                
-                <!---->
-                <span
-                  class="v-btn__content"
-                  data-no-activator=""
-                >
-                  <i
-                    aria-hidden="true"
-                    class="mdi-chevron-left mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  <div
+                    class="v-progress-linear__indeterminate short"
                   />
-                </span>
-                <!---->
-                <!---->
-              </button>
-            </li>
+                  
+                </div>
+              </transition-stub>
+              <!---->
+            </div>
+          </div>
+          <!---->
+          <div
+            class="v-field__field"
+            data-no-activator=""
+          >
+            <!---->
+            <label
+              class="v-label v-field-label"
+              for="input-0"
+            >
+              <!---->
+              
+              Organization
+              
+            </label>
             
             
-            <li
-              class="v-pagination__next"
-              data-test="v-pagination-next"
+            <!---->
+            <div
+              class="v-field__input"
+              data-no-activator=""
             >
-              <button
-                aria-disabled="true"
-                aria-label="Next page"
-                class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain"
-                disabled=""
-                type="button"
+              
+              
+              
+              <!---->
+              <!---->
+              
+              
+              <div
+                class="v-autocomplete__selection"
               >
-                
-                <span
-                  class="v-btn__overlay"
-                />
                 <span
-                  class="v-btn__underlay"
-                />
-                
-                <!---->
-                <span
-                  class="v-btn__content"
-                  data-no-activator=""
+                  class="v-autocomplete__selection-text"
                 >
-                  <i
-                    aria-hidden="true"
-                    class="mdi-chevron-right mdi v-icon notranslate v-theme--light v-icon--size-default"
-                  />
+                  
+                  <!---->
                 </span>
-                <!---->
-                <!---->
-              </button>
-            </li>
-            <li
-              class="v-pagination__last"
-              data-test="v-pagination-last"
+              </div>
+              
+              
+              
+              <input
+                aria-describedby="input-0-messages"
+                filter="function () { [native code] }"
+                id="input-0"
+                size="1"
+                type="text"
+              />
+            </div>
+            <!---->
+            
+            
+          </div>
+          <transition-stub
+            appear="false"
+            css="true"
+            name="expand-x-transition"
+            persisted="false"
+          >
+            <div
+              class="v-field__clearable"
             >
-              <button
-                aria-disabled="true"
-                aria-label="Last page"
-                class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain"
-                disabled=""
-                type="button"
+              <i
+                aria-hidden="false"
+                aria-label="Clear Organization"
+                class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
+                role="button"
+              />
+            </div>
+          </transition-stub>
+          <div
+            class="v-field__append-inner"
+          >
+            
+            
+            <!---->
+            <i
+              aria-hidden="false"
+              aria-label="Open"
+              class="mdi-menu-down mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable v-autocomplete__menu-icon"
+              role="button"
+              title="Open"
+            />
+            
+            
+            <!---->
+          </div>
+          <div
+            class="v-field__outline"
+          >
+            
+            <div
+              class="v-field__outline__start"
+            />
+            <div
+              class="v-field__outline__notch"
+            >
+              <label
+                aria-hidden="true"
+                class="v-label v-field-label v-field-label--floating"
+                for="input-0"
               >
+                <!---->
                 
-                <span
-                  class="v-btn__overlay"
-                />
-                <span
-                  class="v-btn__underlay"
-                />
+                Organization
                 
-                <!---->
-                <span
-                  class="v-btn__content"
-                  data-no-activator=""
-                >
-                  <i
-                    aria-hidden="true"
-                    class="mdi-page-last mdi v-icon notranslate v-theme--light v-icon--size-default"
-                  />
-                </span>
-                <!---->
-                <!---->
-              </button>
-            </li>
-          </ul>
-        </nav>
+              </label>
+            </div>
+            <div
+              class="v-field__outline__end"
+            />
+            
+            <!---->
+          </div>
+        </div>
+        
+      </div>
+      <!---->
+      <div
+        class="v-input__details"
+      >
+        <transition-group-stub
+          appear="false"
+          aria-live="polite"
+          class="v-messages"
+          css="true"
+          id="input-0-messages"
+          name="slide-y-transition"
+          persisted="false"
+          role="alert"
+          tag="div"
+        >
+          <!---->
+        </transition-group-stub>
+        <!---->
       </div>
     </div>
-    
-    
   </div>
 </div>
 `;
 
-exports[`Storybook Tests OrganizationEntry NotEditable 1`] = `
+exports[`Storybook Tests OrganizationSelector SelectedOrganization 1`] = `
 <div>
   <div
-    class="v-table v-table--has-top v-table--has-bottom v-theme--light v-table--density-default v-data-table"
-    hide-default-footer=""
-    hide-default-header=""
-    item-key="name"
+    class="ma-5 col-3"
   >
-    
-    <!---->
-    
     <div
-      class="v-table__wrapper"
+      class="v-input v-input--horizontal v-input--center-affix v-input--density-comfortable v-locale--is-ltr v-input--dirty v-text-field v-autocomplete v-autocomplete--single"
     >
-      <table>
-        
+      <!---->
+      <div
+        class="v-input__control"
+      >
         
-        <!---->
-        <thead>
-          
-          
-          <tr>
-            
-            <th
-              class="v-data-table__td v-data-table-column--align-start v-data-table__th"
-              colspan="1"
-              rowspan="1"
+        <div
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-owns="v-menu-2"
+          class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--variant-outlined v-theme--light v-locale--is-ltr"
+          role="combobox"
+        >
+          <div
+            class="v-field__overlay"
+          />
+          <div
+            class="v-field__loader"
+          >
+            <div
+              aria-hidden="true"
+              aria-valuemax="100"
+              aria-valuemin="0"
+              class="v-progress-linear v-theme--light v-locale--is-ltr"
+              role="progressbar"
+              style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);"
             >
-              
+              <!---->
               <div
-                class="v-data-table-header__content"
+                class="v-progress-linear__background"
+                style="width: 100%;"
+              />
+              <transition-stub
+                appear="false"
+                css="true"
+                name="fade-transition"
+                persisted="false"
               >
-                <span>
-                  <!---->
-                </span>
-                <!---->
-                <!---->
-              </div>
-              
-            </th>
-            <th
-              class="v-data-table__td v-data-table-column--align-start v-data-table__th"
-              colspan="1"
-              rowspan="1"
+                <div
+                  class="v-progress-linear__indeterminate"
+                >
+                  
+                  <div
+                    class="v-progress-linear__indeterminate long"
+                  />
+                  <div
+                    class="v-progress-linear__indeterminate short"
+                  />
+                  
+                </div>
+              </transition-stub>
+              <!---->
+            </div>
+          </div>
+          <!---->
+          <div
+            class="v-field__field"
+            data-no-activator=""
+          >
+            <!---->
+            <label
+              class="v-label v-field-label"
+              for="input-0"
             >
+              <!---->
               
-              <div
-                class="v-data-table-header__content"
-              >
-                <span>
-                  <!---->
-                </span>
-                <!---->
-                <!---->
-              </div>
+              Organization
               
-            </th>
+            </label>
             
-          </tr>
-          
-          <!---->
-          
-        </thead>
-        <!---->
-        <tbody>
-          <!---->
-          
-          
-          
-          
-          <tr
-            class=""
-          >
-            <td
-              class="font-weight-medium pl-8"
-            >
-              <router-link-stub
-                class="link--underline"
-                target="_blank"
-                to="[object Object]"
-              />
-            </td>
-            <td
-              class="text-right text--secondary"
+            
+            <!---->
+            <div
+              class="v-field__input"
+              data-no-activator=""
             >
               
               
-              <button
-                aria-describedby="v-tooltip-0"
-                class="v-btn v-theme--light bg-transparent v-btn--density-default v-btn--size-default v-btn--variant-flat"
-                targetref="[object Object]"
-                type="button"
+              
+              <!---->
+              <!---->
+              
+              
+              <div
+                class="v-autocomplete__selection"
               >
-                
-                <span
-                  class="v-btn__overlay"
-                />
-                <span
-                  class="v-btn__underlay"
-                />
-                
-                <!---->
                 <span
-                  class="v-btn__content"
-                  data-no-activator=""
+                  class="v-autocomplete__selection-text"
                 >
-                  
-                  
-                  280 
-                  <i
-                    aria-hidden="true"
-                    class="mdi-account-multiple mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--end"
-                  />
-                  
-                  
+                  Institute of Muggle Studies
+                  <!---->
                 </span>
-                <!---->
-                <!---->
-              </button>
+              </div>
               
-              <!--teleport start-->
-              <!--teleport end-->
               
-            </td>
-            <td
-              class="text-right"
+              
+              <input
+                aria-describedby="input-0-messages"
+                filter="function () { [native code] }"
+                id="input-0"
+                size="1"
+                type="text"
+              />
+            </div>
+            <!---->
+            
+            
+          </div>
+          <transition-stub
+            appear="false"
+            css="true"
+            name="expand-x-transition"
+            persisted="false"
+          >
+            <div
+              class="v-field__clearable"
+            >
+              <i
+                aria-hidden="false"
+                aria-label="Clear Organization"
+                class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
+                role="button"
+              />
+            </div>
+          </transition-stub>
+          <div
+            class="v-field__append-inner"
+          >
+            
+            
+            <!---->
+            <i
+              aria-hidden="false"
+              aria-label="Open"
+              class="mdi-menu-down mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable v-autocomplete__menu-icon"
+              role="button"
+              title="Open"
+            />
+            
+            
+            <!---->
+          </div>
+          <div
+            class="v-field__outline"
+          >
+            
+            <div
+              class="v-field__outline__start"
+            />
+            <div
+              class="v-field__outline__notch"
             >
-              
-              
-              <button
-                aria-expanded="false"
-                aria-haspopup="menu"
-                aria-owns="v-menu-2"
-                class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-small v-btn--variant-text"
-                targetref="[object Object]"
-                type="button"
+              <label
+                aria-hidden="true"
+                class="v-label v-field-label v-field-label--floating"
+                for="input-0"
               >
-                
-                <span
-                  class="v-btn__overlay"
-                />
-                <span
-                  class="v-btn__underlay"
-                />
-                
-                <!---->
-                <span
-                  class="v-btn__content"
-                  data-no-activator=""
-                >
-                  <i
-                    aria-hidden="true"
-                    class="mdi-dots-vertical mdi v-icon notranslate v-theme--light v-icon--size-default"
-                  />
-                </span>
                 <!---->
-                <!---->
-              </button>
-              
-              <!---->
-              
-              <button
-                class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-small v-btn--variant-text"
-                type="button"
-              >
                 
-                <span
-                  class="v-btn__overlay"
-                />
-                <span
-                  class="v-btn__underlay"
-                />
+                Organization
                 
-                <!---->
-                <span
-                  class="v-btn__content"
-                  data-no-activator=""
-                >
-                  <i
-                    aria-hidden="true"
-                    class="mdi-chevron-down mdi v-icon notranslate v-theme--light v-icon--size-default"
-                  />
-                </span>
-                <!---->
-                <!---->
-              </button>
-            </td>
-          </tr>
+              </label>
+            </div>
+            <div
+              class="v-field__outline__end"
+            />
+            
+            <!---->
+          </div>
+        </div>
+        
+      </div>
+      <!---->
+      <div
+        class="v-input__details"
+      >
+        <transition-group-stub
+          appear="false"
+          aria-live="polite"
+          class="v-messages"
+          css="true"
+          id="input-0-messages"
+          name="slide-y-transition"
+          persisted="false"
+          role="alert"
+          tag="div"
+        >
+          <!---->
+        </transition-group-stub>
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests OrganizationsTable Groups 1`] = `
+<div>
+  <section
+    class="section"
+  >
+    <div
+      class="v-row header"
+    >
+      <h4
+        class="title"
+      >
+        <i
+          aria-hidden="true"
+          class="mdi-account-group mdi v-icon notranslate v-theme--light v-icon--size-small text-black v-icon--start"
+        />
+         Groups 
+        <span
+          class="v-chip v-chip--pill v-theme--light v-chip--density-comfortable v-chip--size-default v-chip--variant-tonal ml-2"
+          draggable="false"
+        >
+          
+          <!---->
+          <span
+            class="v-chip__underlay"
+          />
           
           <!---->
+          <!---->
+          <div
+            class="v-chip__content"
+            data-no-activator=""
+          >
+            
+            5
+            
+          </div>
+          <!---->
+          <!---->
+        </span>
+      </h4>
+      <button
+        class="v-btn v-theme--light bg-secondary v-btn--density-default v-btn--size-small v-btn--variant-flat black--text"
+        style="height: 34px;"
+        type="button"
+      >
+        
+        <span
+          class="v-btn__overlay"
+        />
+        <span
+          class="v-btn__underlay"
+        />
+        
+        <!---->
+        <span
+          class="v-btn__content"
+          data-no-activator=""
+        >
           
           
+           Add 
           
-          <!---->
-        </tbody>
+          
+        </span>
         <!---->
         <!---->
-        
-        
-      </table>
+      </button>
     </div>
-    
-    
-    <hr
-      aria-orientation="horizontal"
-      class="v-divider v-theme--light"
-      role="separator"
-    />
     <div
-      class="v-data-table-footer"
+      class="v-row actions"
     >
-      <!---->
       <div
-        class="v-data-table-footer__items-per-page"
+        class="d-flex pa-0 flex-grow-1"
       >
-        <span>
-          Items per page:
-        </span>
         <div
-          class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-locale--is-ltr v-input--dirty v-text-field v-select v-select--single v-select--selected"
+          class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-locale--is-ltr v-text-field search pa-0 flex-grow-0"
         >
           <!---->
           <div
@@ -26903,11 +29057,7 @@ exports[`Storybook Tests OrganizationEntry NotEditable 1`] = `
           >
             
             <div
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="v-menu-7"
-              class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-outlined v-theme--light v-locale--is-ltr"
-              role="combobox"
+              class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--single-line v-field--variant-outlined v-theme--light v-locale--is-ltr"
             >
               <div
                 class="v-field__overlay"
@@ -26950,7 +29100,17 @@ exports[`Storybook Tests OrganizationEntry NotEditable 1`] = `
                   <!---->
                 </div>
               </div>
-              <!---->
+              <div
+                class="v-field__prepend-inner"
+              >
+                <i
+                  aria-hidden="false"
+                  aria-label="Search prepended action"
+                  class="mdi-magnify mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
+                  role="button"
+                />
+                <!---->
+              </div>
               <div
                 class="v-field__field"
                 data-no-activator=""
@@ -26958,67 +29118,50 @@ exports[`Storybook Tests OrganizationEntry NotEditable 1`] = `
                 <!---->
                 <label
                   class="v-label v-field-label"
-                  for="input-5"
+                  for="input-2"
                 >
                   <!---->
                   
-                  <!---->
+                  Search
                   
                 </label>
                 
                 
                 <!---->
-                <div
+                <input
+                  aria-describedby="input-2-messages"
                   class="v-field__input"
-                  data-no-activator=""
-                >
-                  
-                  
-                  
-                  <!---->
-                  <!---->
-                  
-                  
-                  <div
-                    class="v-select__selection"
-                  >
-                    <span
-                      class="v-select__selection-text"
-                    >
-                      10
-                      <!---->
-                    </span>
-                  </div>
-                  
-                  
-                  
-                  <input
-                    aria-describedby="input-5-messages"
-                    aria-label="Open"
-                    id="input-5"
-                    inputmode="none"
-                    size="1"
-                    title="Open"
-                    type="text"
+                  id="input-2"
+                  outlined=""
+                  size="1"
+                  type="text"
+                />
+                <!---->
+                
+                
+              </div>
+              <transition-stub
+                appear="false"
+                css="true"
+                name="expand-x-transition"
+                persisted="false"
+              >
+                <div
+                  class="v-field__clearable"
+                  style="display: none;"
+                >
+                  <i
+                    aria-hidden="false"
+                    aria-label="Clear Search"
+                    class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
+                    role="button"
                   />
                 </div>
-                <!---->
-                
-                
-              </div>
-              <!---->
+              </transition-stub>
               <div
                 class="v-field__append-inner"
               >
-                
-                
                 <!---->
-                <i
-                  aria-hidden="true"
-                  class="mdi-menu-down mdi v-icon notranslate v-theme--light v-icon--size-default v-select__menu-icon"
-                />
-                
-                
                 <!---->
               </div>
               <div
@@ -27039,659 +29182,789 @@ exports[`Storybook Tests OrganizationEntry NotEditable 1`] = `
             
           </div>
           <!---->
-          <!---->
-        </div>
-      </div>
-      <div
-        class="v-data-table-footer__info"
-      >
-        <div>
-          1-1 of 1
+          <div
+            class="v-input__details"
+          >
+            <transition-group-stub
+              appear="false"
+              aria-live="polite"
+              class="v-messages"
+              css="true"
+              id="input-2-messages"
+              name="slide-y-transition"
+              persisted="false"
+              role="alert"
+              tag="div"
+            >
+              
+              <div
+                class="v-messages__message"
+              >
+                 
+              </div>
+              
+            </transition-group-stub>
+            <!---->
+          </div>
         </div>
+        <!--v-if-->
       </div>
+    </div>
+    <div
+      class="v-table v-table--has-top v-table--has-bottom v-table--hover v-theme--light v-table--density-default v-data-table"
+      item-key="id"
+    >
+      
+      <!---->
+      
       <div
-        class="v-data-table-footer__pagination"
+        class="v-table__wrapper"
       >
-        <nav
-          aria-label="Pagination Navigation"
-          class="v-pagination v-theme--light"
-          data-test="v-pagination-root"
-          role="navigation"
-        >
-          <ul
-            class="v-pagination__list"
+        <table>
+          
+          
+          <!---->
+          <thead
+            class="v-data-table__thead"
+            role="rowgroup"
           >
-            <li
-              class="v-pagination__first"
-              data-test="v-pagination-first"
+            
+            
+            <tr>
+              
+              <th
+                class="v-data-table__td v-data-table-column--align-start v-data-table__th"
+                colspan="1"
+                rowspan="1"
+              >
+                
+                <div
+                  class="v-data-table-header__content"
+                >
+                  <span>
+                    Name
+                  </span>
+                  <!---->
+                  <!---->
+                </div>
+                
+              </th>
+              <th
+                class="v-data-table__td v-data-table-column--align-end v-data-table__th"
+                colspan="1"
+                rowspan="1"
+              >
+                
+                <div
+                  class="v-data-table-header__content"
+                >
+                  <span>
+                    Enrollments
+                  </span>
+                  <!---->
+                  <!---->
+                </div>
+                
+              </th>
+              <th
+                class="v-data-table__td v-data-table-column--align-start v-data-table__th"
+                colspan="1"
+                rowspan="1"
+              >
+                
+                <div
+                  class="v-data-table-header__content"
+                >
+                  <span>
+                    <!---->
+                  </span>
+                  <!---->
+                  <!---->
+                </div>
+                
+              </th>
+              
+            </tr>
+            
+            <!---->
+            
+          </thead>
+          <!---->
+          <tbody
+            class="v-data-table__tbody"
+            role="rowgroup"
+          >
+            <!---->
+            
+            
+            
+            
+            <tr
+              class=""
+              draggable="true"
+            >
+              <td
+                class="font-weight-medium pl-8"
+              >
+                <router-link-stub
+                  class="link--underline"
+                  target="_blank"
+                  to="[object Object]"
+                />
+              </td>
+              <td
+                class="text-right text--secondary"
+              >
+                
+                
+                <button
+                  aria-describedby="v-tooltip-8"
+                  class="v-btn v-theme--light bg-transparent v-btn--density-default v-btn--size-default v-btn--variant-flat"
+                  targetref="[object Object]"
+                  type="button"
+                >
+                  
+                  <span
+                    class="v-btn__overlay"
+                  />
+                  <span
+                    class="v-btn__underlay"
+                  />
+                  
+                  <!---->
+                  <span
+                    class="v-btn__content"
+                    data-no-activator=""
+                  >
+                    
+                    
+                    5 
+                    <i
+                      aria-hidden="true"
+                      class="mdi-account-multiple mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--end"
+                    />
+                    
+                    
+                  </span>
+                  <!---->
+                  <!---->
+                </button>
+                
+                <!--teleport start-->
+                <!--teleport end-->
+                
+              </td>
+              <td
+                class="text-right"
+              >
+                
+                
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="menu"
+                  aria-owns="v-menu-10"
+                  class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-small v-btn--variant-text"
+                  targetref="[object Object]"
+                  type="button"
+                >
+                  
+                  <span
+                    class="v-btn__overlay"
+                  />
+                  <span
+                    class="v-btn__underlay"
+                  />
+                  
+                  <!---->
+                  <span
+                    class="v-btn__content"
+                    data-no-activator=""
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="mdi-dots-vertical mdi v-icon notranslate v-theme--light v-icon--size-default"
+                    />
+                  </span>
+                  <!---->
+                  <!---->
+                </button>
+                
+                <!---->
+                
+                <button
+                  class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-small v-btn--variant-text"
+                  type="button"
+                >
+                  
+                  <span
+                    class="v-btn__overlay"
+                  />
+                  <span
+                    class="v-btn__underlay"
+                  />
+                  
+                  <!---->
+                  <span
+                    class="v-btn__content"
+                    data-no-activator=""
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="mdi-chevron-down mdi v-icon notranslate v-theme--light v-icon--size-default"
+                    />
+                  </span>
+                  <!---->
+                  <!---->
+                </button>
+              </td>
+            </tr>
+            
+            <!---->
+            
+            
+            
+            <tr
+              class=""
+              draggable="true"
             >
-              <button
-                aria-disabled="true"
-                aria-label="First page"
-                class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain"
-                disabled=""
-                type="button"
+              <td
+                class="font-weight-medium pl-8"
               >
-                
-                <span
-                  class="v-btn__overlay"
-                />
-                <span
-                  class="v-btn__underlay"
+                <router-link-stub
+                  class="link--underline"
+                  target="_blank"
+                  to="[object Object]"
                 />
+              </td>
+              <td
+                class="text-right text--secondary"
+              >
                 
-                <!---->
-                <span
-                  class="v-btn__content"
-                  data-no-activator=""
+                
+                <button
+                  aria-describedby="v-tooltip-13"
+                  class="v-btn v-theme--light bg-transparent v-btn--density-default v-btn--size-default v-btn--variant-flat"
+                  targetref="[object Object]"
+                  type="button"
                 >
-                  <i
-                    aria-hidden="true"
-                    class="mdi-page-first mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  
+                  <span
+                    class="v-btn__overlay"
                   />
-                </span>
-                <!---->
-                <!---->
-              </button>
-            </li>
-            <li
-              class="v-pagination__prev"
-              data-test="v-pagination-prev"
-            >
-              <button
-                aria-disabled="true"
-                aria-label="Previous page"
-                class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain"
-                disabled=""
-                type="button"
+                  <span
+                    class="v-btn__underlay"
+                  />
+                  
+                  <!---->
+                  <span
+                    class="v-btn__content"
+                    data-no-activator=""
+                  >
+                    
+                    
+                    2 
+                    <i
+                      aria-hidden="true"
+                      class="mdi-account-multiple mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--end"
+                    />
+                    
+                    
+                  </span>
+                  <!---->
+                  <!---->
+                </button>
+                
+                <!--teleport start-->
+                <!--teleport end-->
+                
+              </td>
+              <td
+                class="text-right"
               >
                 
-                <span
-                  class="v-btn__overlay"
-                />
-                <span
-                  class="v-btn__underlay"
-                />
                 
-                <!---->
-                <span
-                  class="v-btn__content"
-                  data-no-activator=""
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="menu"
+                  aria-owns="v-menu-15"
+                  class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-small v-btn--variant-text"
+                  targetref="[object Object]"
+                  type="button"
                 >
-                  <i
-                    aria-hidden="true"
-                    class="mdi-chevron-left mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  
+                  <span
+                    class="v-btn__overlay"
                   />
-                </span>
-                <!---->
+                  <span
+                    class="v-btn__underlay"
+                  />
+                  
+                  <!---->
+                  <span
+                    class="v-btn__content"
+                    data-no-activator=""
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="mdi-dots-vertical mdi v-icon notranslate v-theme--light v-icon--size-default"
+                    />
+                  </span>
+                  <!---->
+                  <!---->
+                </button>
+                
                 <!---->
-              </button>
-            </li>
+                
+                <button
+                  class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-small v-btn--variant-text"
+                  type="button"
+                >
+                  
+                  <span
+                    class="v-btn__overlay"
+                  />
+                  <span
+                    class="v-btn__underlay"
+                  />
+                  
+                  <!---->
+                  <span
+                    class="v-btn__content"
+                    data-no-activator=""
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="mdi-chevron-down mdi v-icon notranslate v-theme--light v-icon--size-default"
+                    />
+                  </span>
+                  <!---->
+                  <!---->
+                </button>
+              </td>
+            </tr>
+            
+            <!---->
             
             
-            <li
-              class="v-pagination__next"
-              data-test="v-pagination-next"
+            
+            <tr
+              class=""
+              draggable="true"
             >
-              <button
-                aria-disabled="true"
-                aria-label="Next page"
-                class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain"
-                disabled=""
-                type="button"
+              <td
+                class="font-weight-medium pl-8"
               >
-                
-                <span
-                  class="v-btn__overlay"
-                />
-                <span
-                  class="v-btn__underlay"
+                <router-link-stub
+                  class="link--underline"
+                  target="_blank"
+                  to="[object Object]"
                 />
+              </td>
+              <td
+                class="text-right text--secondary"
+              >
                 
-                <!---->
-                <span
-                  class="v-btn__content"
-                  data-no-activator=""
+                
+                <button
+                  aria-describedby="v-tooltip-18"
+                  class="v-btn v-theme--light bg-transparent v-btn--density-default v-btn--size-default v-btn--variant-flat"
+                  targetref="[object Object]"
+                  type="button"
                 >
-                  <i
-                    aria-hidden="true"
-                    class="mdi-chevron-right mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  
+                  <span
+                    class="v-btn__overlay"
                   />
-                </span>
-                <!---->
-                <!---->
-              </button>
-            </li>
-            <li
-              class="v-pagination__last"
-              data-test="v-pagination-last"
-            >
-              <button
-                aria-disabled="true"
-                aria-label="Last page"
-                class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain"
-                disabled=""
-                type="button"
+                  <span
+                    class="v-btn__underlay"
+                  />
+                  
+                  <!---->
+                  <span
+                    class="v-btn__content"
+                    data-no-activator=""
+                  >
+                    
+                    
+                    3 
+                    <i
+                      aria-hidden="true"
+                      class="mdi-account-multiple mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--end"
+                    />
+                    
+                    
+                  </span>
+                  <!---->
+                  <!---->
+                </button>
+                
+                <!--teleport start-->
+                <!--teleport end-->
+                
+              </td>
+              <td
+                class="text-right"
               >
                 
-                <span
-                  class="v-btn__overlay"
-                />
-                <span
-                  class="v-btn__underlay"
-                />
                 
-                <!---->
-                <span
-                  class="v-btn__content"
-                  data-no-activator=""
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="menu"
+                  aria-owns="v-menu-20"
+                  class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-small v-btn--variant-text"
+                  targetref="[object Object]"
+                  type="button"
                 >
-                  <i
-                    aria-hidden="true"
-                    class="mdi-page-last mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  
+                  <span
+                    class="v-btn__overlay"
                   />
-                </span>
-                <!---->
+                  <span
+                    class="v-btn__underlay"
+                  />
+                  
+                  <!---->
+                  <span
+                    class="v-btn__content"
+                    data-no-activator=""
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="mdi-dots-vertical mdi v-icon notranslate v-theme--light v-icon--size-default"
+                    />
+                  </span>
+                  <!---->
+                  <!---->
+                </button>
+                
                 <!---->
-              </button>
-            </li>
-          </ul>
-        </nav>
-      </div>
-    </div>
-    
-    
-  </div>
-</div>
-`;
-
-exports[`Storybook Tests OrganizationModal Default 1`] = `
-<div>
-  <div
-    class="ma-auto"
-  >
-    <button
-      class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-small v-btn--variant-outlined"
-      dark=""
-      type="button"
-    >
-      
-      <span
-        class="v-btn__overlay"
-      />
-      <span
-        class="v-btn__underlay"
-      />
-      
-      <!---->
-      <span
-        class="v-btn__content"
-        data-no-activator=""
-      >
-        
-        
-         Open Dialog 
-        
-        
-      </span>
-      <!---->
-      <!---->
-    </button>
-    
-    <!---->
-    <!---->
-    
-  </div>
-</div>
-`;
-
-exports[`Storybook Tests OrganizationModal ErrorOnSave 1`] = `
-<div>
-  <div
-    class="ma-auto"
-  >
-    <button
-      class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-small v-btn--variant-outlined"
-      dark=""
-      type="button"
-    >
-      
-      <span
-        class="v-btn__overlay"
-      />
-      <span
-        class="v-btn__underlay"
-      />
-      
-      <!---->
-      <span
-        class="v-btn__content"
-        data-no-activator=""
-      >
-        
-        
-         Open Dialog 
-        
-        
-      </span>
-      <!---->
-      <!---->
-    </button>
-    
-    <!---->
-    <!---->
-    
-  </div>
-</div>
-`;
-
-exports[`Storybook Tests OrganizationSelector Default 1`] = `
-<div>
-  <div
-    class="ma-5 col-3"
-  >
-    <div
-      class="v-input v-input--horizontal v-input--center-affix v-input--density-comfortable v-locale--is-ltr v-text-field v-autocomplete v-autocomplete--single"
-    >
-      <!---->
-      <div
-        class="v-input__control"
-      >
-        
-        <div
-          aria-expanded="false"
-          aria-haspopup="menu"
-          aria-owns="v-menu-2"
-          class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--variant-outlined v-theme--light v-locale--is-ltr"
-          role="combobox"
-        >
-          <div
-            class="v-field__overlay"
-          />
-          <div
-            class="v-field__loader"
-          >
-            <div
-              aria-hidden="true"
-              aria-valuemax="100"
-              aria-valuemin="0"
-              class="v-progress-linear v-theme--light v-locale--is-ltr"
-              role="progressbar"
-              style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);"
-            >
-              <!---->
-              <div
-                class="v-progress-linear__background"
-                style="width: 100%;"
-              />
-              <transition-stub
-                appear="false"
-                css="true"
-                name="fade-transition"
-                persisted="false"
-              >
-                <div
-                  class="v-progress-linear__indeterminate"
+                
+                <button
+                  class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-small v-btn--variant-text"
+                  type="button"
                 >
                   
-                  <div
-                    class="v-progress-linear__indeterminate long"
+                  <span
+                    class="v-btn__overlay"
                   />
-                  <div
-                    class="v-progress-linear__indeterminate short"
+                  <span
+                    class="v-btn__underlay"
                   />
                   
-                </div>
-              </transition-stub>
-              <!---->
-            </div>
-          </div>
+                  <!---->
+                  <span
+                    class="v-btn__content"
+                    data-no-activator=""
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="mdi-chevron-down mdi v-icon notranslate v-theme--light v-icon--size-default"
+                    />
+                  </span>
+                  <!---->
+                  <!---->
+                </button>
+              </td>
+            </tr>
+            
+            <!---->
+            
+            
+            
+            <!---->
+          </tbody>
           <!---->
-          <div
-            class="v-field__field"
-            data-no-activator=""
+          <!---->
+          
+          
+        </table>
+      </div>
+      
+      <div
+        class="pagination text-center pa-3"
+      >
+        <div
+          aria-hidden="true"
+        />
+        <nav
+          aria-label="Pagination Navigation"
+          class="v-pagination v-theme--light"
+          data-test="v-pagination-root"
+          role="navigation"
+        >
+          <ul
+            class="v-pagination__list"
           >
             <!---->
-            <label
-              class="v-label v-field-label"
-              for="input-0"
+            <li
+              class="v-pagination__prev"
+              data-test="v-pagination-prev"
             >
-              <!---->
-              
-              Organization
-              
-            </label>
-            
+              <button
+                aria-disabled="true"
+                aria-label="Previous page"
+                class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-compact v-btn--size-default v-btn--variant-text"
+                disabled=""
+                type="button"
+              >
+                
+                <span
+                  class="v-btn__overlay"
+                />
+                <span
+                  class="v-btn__underlay"
+                />
+                
+                <!---->
+                <span
+                  class="v-btn__content"
+                  data-no-activator=""
+                >
+                  <i
+                    aria-hidden="true"
+                    class="mdi-chevron-left mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  />
+                </span>
+                <!---->
+                <!---->
+              </button>
+            </li>
             
-            <!---->
-            <div
-              class="v-field__input"
-              data-no-activator=""
+            <li
+              class="v-pagination__item v-pagination__item--is-active"
+              data-test="v-pagination-item"
             >
-              
-              
-              
-              <!---->
-              <!---->
-              
-              
-              <div
-                class="v-autocomplete__selection"
+              <button
+                aria-current="true"
+                aria-label="Page 1, Current page"
+                class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-default v-btn--variant-text"
+                ellipsis="false"
+                type="button"
               >
+                
                 <span
-                  class="v-autocomplete__selection-text"
+                  class="v-btn__overlay"
+                />
+                <span
+                  class="v-btn__underlay"
+                />
+                
+                <!---->
+                <span
+                  class="v-btn__content"
+                  data-no-activator=""
                 >
                   
-                  <!---->
+                  
+                  1
+                  
+                  
                 </span>
-              </div>
-              
-              
-              
-              <input
-                aria-describedby="input-0-messages"
-                filter="function () { [native code] }"
-                id="input-0"
-                size="1"
-                type="text"
-              />
-            </div>
-            <!---->
-            
-            
-          </div>
-          <transition-stub
-            appear="false"
-            css="true"
-            name="expand-x-transition"
-            persisted="false"
-          >
-            <div
-              class="v-field__clearable"
+                <!---->
+                <!---->
+              </button>
+            </li>
+            <li
+              class="v-pagination__item"
+              data-test="v-pagination-item"
             >
-              <i
-                aria-hidden="false"
-                aria-label="Clear Organization"
-                class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
-                role="button"
-              />
-            </div>
-          </transition-stub>
-          <div
-            class="v-field__append-inner"
-          >
-            
-            
-            <!---->
-            <i
-              aria-hidden="false"
-              aria-label="Open"
-              class="mdi-menu-down mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable v-autocomplete__menu-icon"
-              role="button"
-              title="Open"
-            />
-            
-            
-            <!---->
-          </div>
-          <div
-            class="v-field__outline"
-          >
+              <button
+                aria-current="false"
+                aria-label="Go to page 2"
+                class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-default v-btn--variant-text"
+                ellipsis="false"
+                type="button"
+              >
+                
+                <span
+                  class="v-btn__overlay"
+                />
+                <span
+                  class="v-btn__underlay"
+                />
+                
+                <!---->
+                <span
+                  class="v-btn__content"
+                  data-no-activator=""
+                >
+                  
+                  
+                  2
+                  
+                  
+                </span>
+                <!---->
+                <!---->
+              </button>
+            </li>
             
-            <div
-              class="v-field__outline__start"
-            />
-            <div
-              class="v-field__outline__notch"
+            <li
+              class="v-pagination__next"
+              data-test="v-pagination-next"
             >
-              <label
-                aria-hidden="true"
-                class="v-label v-field-label v-field-label--floating"
-                for="input-0"
+              <button
+                aria-disabled="false"
+                aria-label="Next page"
+                class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-default v-btn--variant-text"
+                type="button"
               >
-                <!---->
                 
-                Organization
+                <span
+                  class="v-btn__overlay"
+                />
+                <span
+                  class="v-btn__underlay"
+                />
                 
-              </label>
-            </div>
-            <div
-              class="v-field__outline__end"
-            />
-            
-            <!---->
-          </div>
-        </div>
-        
-      </div>
-      <!---->
-      <div
-        class="v-input__details"
-      >
-        <transition-group-stub
-          appear="false"
-          aria-live="polite"
-          class="v-messages"
-          css="true"
-          id="input-0-messages"
-          name="slide-y-transition"
-          persisted="false"
-          role="alert"
-          tag="div"
-        >
-          <!---->
-        </transition-group-stub>
-        <!---->
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storybook Tests OrganizationSelector SelectedOrganization 1`] = `
-<div>
-  <div
-    class="ma-5 col-3"
-  >
-    <div
-      class="v-input v-input--horizontal v-input--center-affix v-input--density-comfortable v-locale--is-ltr v-input--dirty v-text-field v-autocomplete v-autocomplete--single"
-    >
-      <!---->
-      <div
-        class="v-input__control"
-      >
-        
+                <!---->
+                <span
+                  class="v-btn__content"
+                  data-no-activator=""
+                >
+                  <i
+                    aria-hidden="true"
+                    class="mdi-chevron-right mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  />
+                </span>
+                <!---->
+                <!---->
+              </button>
+            </li>
+            <!---->
+          </ul>
+        </nav>
         <div
-          aria-expanded="false"
-          aria-haspopup="menu"
-          aria-owns="v-menu-2"
-          class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--variant-outlined v-theme--light v-locale--is-ltr"
-          role="combobox"
+          class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-locale--is-ltr v-input--dirty v-text-field mr-3"
         >
+          <!---->
           <div
-            class="v-field__overlay"
-          />
-          <div
-            class="v-field__loader"
+            class="v-input__control"
           >
+            
             <div
-              aria-hidden="true"
-              aria-valuemax="100"
-              aria-valuemin="0"
-              class="v-progress-linear v-theme--light v-locale--is-ltr"
-              role="progressbar"
-              style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);"
+              class="v-field v-field--active v-field--center-affix v-field--dirty v-field--variant-outlined v-theme--light v-locale--is-ltr"
             >
-              <!---->
               <div
-                class="v-progress-linear__background"
-                style="width: 100%;"
+                class="v-field__overlay"
               />
-              <transition-stub
-                appear="false"
-                css="true"
-                name="fade-transition"
-                persisted="false"
+              <div
+                class="v-field__loader"
               >
                 <div
-                  class="v-progress-linear__indeterminate"
+                  aria-hidden="true"
+                  aria-valuemax="100"
+                  aria-valuemin="0"
+                  class="v-progress-linear v-theme--light v-locale--is-ltr"
+                  role="progressbar"
+                  style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);"
                 >
-                  
-                  <div
-                    class="v-progress-linear__indeterminate long"
-                  />
+                  <!---->
                   <div
-                    class="v-progress-linear__indeterminate short"
+                    class="v-progress-linear__background"
+                    style="width: 100%;"
                   />
-                  
+                  <transition-stub
+                    appear="false"
+                    css="true"
+                    name="fade-transition"
+                    persisted="false"
+                  >
+                    <div
+                      class="v-progress-linear__indeterminate"
+                    >
+                      
+                      <div
+                        class="v-progress-linear__indeterminate long"
+                      />
+                      <div
+                        class="v-progress-linear__indeterminate short"
+                      />
+                      
+                    </div>
+                  </transition-stub>
+                  <!---->
                 </div>
-              </transition-stub>
-              <!---->
-            </div>
-          </div>
-          <!---->
-          <div
-            class="v-field__field"
-            data-no-activator=""
-          >
-            <!---->
-            <label
-              class="v-label v-field-label"
-              for="input-0"
-            >
-              <!---->
-              
-              Organization
-              
-            </label>
-            
-            
-            <!---->
-            <div
-              class="v-field__input"
-              data-no-activator=""
-            >
-              
-              
-              
-              <!---->
+              </div>
               <!---->
-              
-              
               <div
-                class="v-autocomplete__selection"
+                class="v-field__field"
+                data-no-activator=""
               >
-                <span
-                  class="v-autocomplete__selection-text"
+                <!---->
+                <label
+                  class="v-label v-field-label"
+                  for="input-6"
                 >
-                  Institute of Muggle Studies
                   <!---->
-                </span>
+                  
+                  Items per page
+                  
+                </label>
+                
+                
+                <!---->
+                <input
+                  aria-describedby="input-6-messages"
+                  class="v-field__input"
+                  id="input-6"
+                  max="5"
+                  min="1"
+                  size="1"
+                  type="number"
+                />
+                <!---->
+                
+                
               </div>
-              
-              
-              
-              <input
-                aria-describedby="input-0-messages"
-                filter="function () { [native code] }"
-                id="input-0"
-                size="1"
-                type="text"
-              />
-            </div>
-            <!---->
-            
-            
-          </div>
-          <transition-stub
-            appear="false"
-            css="true"
-            name="expand-x-transition"
-            persisted="false"
-          >
-            <div
-              class="v-field__clearable"
-            >
-              <i
-                aria-hidden="false"
-                aria-label="Clear Organization"
-                class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
-                role="button"
-              />
-            </div>
-          </transition-stub>
-          <div
-            class="v-field__append-inner"
-          >
-            
-            
-            <!---->
-            <i
-              aria-hidden="false"
-              aria-label="Open"
-              class="mdi-menu-down mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable v-autocomplete__menu-icon"
-              role="button"
-              title="Open"
-            />
-            
-            
-            <!---->
-          </div>
-          <div
-            class="v-field__outline"
-          >
-            
-            <div
-              class="v-field__outline__start"
-            />
-            <div
-              class="v-field__outline__notch"
-            >
-              <label
-                aria-hidden="true"
-                class="v-label v-field-label v-field-label--floating"
-                for="input-0"
+              <!---->
+              <!---->
+              <div
+                class="v-field__outline"
               >
-                <!---->
                 
-                Organization
+                <div
+                  class="v-field__outline__start"
+                />
+                <div
+                  class="v-field__outline__notch"
+                >
+                  <label
+                    aria-hidden="true"
+                    class="v-label v-field-label v-field-label--floating"
+                    for="input-6"
+                  >
+                    <!---->
+                    
+                    Items per page
+                    
+                  </label>
+                </div>
+                <div
+                  class="v-field__outline__end"
+                />
                 
-              </label>
-            </div>
-            <div
-              class="v-field__outline__end"
-            />
-            
-            <!---->
-          </div>
-        </div>
-        
-      </div>
-      <!---->
-      <div
-        class="v-input__details"
-      >
-        <transition-group-stub
-          appear="false"
-          aria-live="polite"
-          class="v-messages"
-          css="true"
-          id="input-0-messages"
-          name="slide-y-transition"
-          persisted="false"
-          role="alert"
-          tag="div"
-        >
+                <!---->
+              </div>
+            </div>
+            
+          </div>
           <!---->
-        </transition-group-stub>
-        <!---->
+          <!---->
+        </div>
       </div>
+      
     </div>
-  </div>
+    <!--v-if-->
+    
+    <!---->
+    <!---->
+    
+  </section>
 </div>
 `;
 
-exports[`Storybook Tests OrganizationsTable Groups 1`] = `
+exports[`Storybook Tests OrganizationsTable OnError 1`] = `
 <div>
   <section
     class="section"
@@ -27704,9 +29977,9 @@ exports[`Storybook Tests OrganizationsTable Groups 1`] = `
       >
         <i
           aria-hidden="true"
-          class="mdi-account-group mdi v-icon notranslate v-theme--light v-icon--size-small text-black v-icon--start"
+          class="mdi-sitemap mdi v-icon notranslate v-theme--light v-icon--size-small text-black v-icon--start"
         />
-         Groups 
+         Organizations 
         <span
           class="v-chip v-chip--pill v-theme--light v-chip--density-comfortable v-chip--size-default v-chip--variant-tonal ml-2"
           draggable="false"
@@ -27724,7 +29997,7 @@ exports[`Storybook Tests OrganizationsTable Groups 1`] = `
             data-no-activator=""
           >
             
-            5
+            0
             
           </div>
           <!---->
@@ -27829,565 +30102,232 @@ exports[`Storybook Tests OrganizationsTable Groups 1`] = `
                 <!---->
               </div>
               <div
-                class="v-field__field"
-                data-no-activator=""
-              >
-                <!---->
-                <label
-                  class="v-label v-field-label"
-                  for="input-2"
-                >
-                  <!---->
-                  
-                  Search
-                  
-                </label>
-                
-                
-                <!---->
-                <input
-                  aria-describedby="input-2-messages"
-                  class="v-field__input"
-                  id="input-2"
-                  outlined=""
-                  size="1"
-                  type="text"
-                />
-                <!---->
-                
-                
-              </div>
-              <transition-stub
-                appear="false"
-                css="true"
-                name="expand-x-transition"
-                persisted="false"
-              >
-                <div
-                  class="v-field__clearable"
-                  style="display: none;"
-                >
-                  <i
-                    aria-hidden="false"
-                    aria-label="Clear Search"
-                    class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
-                    role="button"
-                  />
-                </div>
-              </transition-stub>
-              <div
-                class="v-field__append-inner"
-              >
-                <!---->
-                <!---->
-              </div>
-              <div
-                class="v-field__outline"
-              >
-                
-                <div
-                  class="v-field__outline__start"
-                />
-                <!---->
-                <div
-                  class="v-field__outline__end"
-                />
-                
-                <!---->
-              </div>
-            </div>
-            
-          </div>
-          <!---->
-          <div
-            class="v-input__details"
-          >
-            <transition-group-stub
-              appear="false"
-              aria-live="polite"
-              class="v-messages"
-              css="true"
-              id="input-2-messages"
-              name="slide-y-transition"
-              persisted="false"
-              role="alert"
-              tag="div"
-            >
-              
-              <div
-                class="v-messages__message"
-              >
-                 
-              </div>
-              
-            </transition-group-stub>
-            <!---->
-          </div>
-        </div>
-        <!--v-if-->
-      </div>
-    </div>
-    <div
-      class="v-table v-table--has-top v-table--has-bottom v-table--hover v-theme--light v-table--density-default v-data-table"
-      item-key="id"
-    >
-      
-      <!---->
-      
-      <div
-        class="v-table__wrapper"
-      >
-        <table>
-          
-          
-          <!---->
-          <thead
-            class="v-data-table__thead"
-            role="rowgroup"
-          >
-            
-            
-            <tr>
-              
-              <th
-                class="v-data-table__td v-data-table-column--align-start v-data-table__th"
-                colspan="1"
-                rowspan="1"
-              >
-                
-                <div
-                  class="v-data-table-header__content"
-                >
-                  <span>
-                    Name
-                  </span>
-                  <!---->
-                  <!---->
-                </div>
-                
-              </th>
-              <th
-                class="v-data-table__td v-data-table-column--align-end v-data-table__th"
-                colspan="1"
-                rowspan="1"
-              >
-                
-                <div
-                  class="v-data-table-header__content"
-                >
-                  <span>
-                    Enrollments
-                  </span>
-                  <!---->
-                  <!---->
-                </div>
-                
-              </th>
-              <th
-                class="v-data-table__td v-data-table-column--align-start v-data-table__th"
-                colspan="1"
-                rowspan="1"
-              >
-                
-                <div
-                  class="v-data-table-header__content"
-                >
-                  <span>
-                    <!---->
-                  </span>
-                  <!---->
-                  <!---->
-                </div>
-                
-              </th>
-              
-            </tr>
-            
-            <!---->
-            
-          </thead>
-          <!---->
-          <tbody
-            class="v-data-table__tbody"
-            role="rowgroup"
-          >
-            <!---->
-            
-            
-            
-            
-            <tr
-              class=""
-              draggable="true"
-            >
-              <td
-                class="font-weight-medium pl-8"
-              >
-                <router-link-stub
-                  class="link--underline"
-                  target="_blank"
-                  to="[object Object]"
-                />
-              </td>
-              <td
-                class="text-right text--secondary"
-              >
-                
-                
-                <button
-                  aria-describedby="v-tooltip-8"
-                  class="v-btn v-theme--light bg-transparent v-btn--density-default v-btn--size-default v-btn--variant-flat"
-                  targetref="[object Object]"
-                  type="button"
-                >
-                  
-                  <span
-                    class="v-btn__overlay"
-                  />
-                  <span
-                    class="v-btn__underlay"
-                  />
-                  
-                  <!---->
-                  <span
-                    class="v-btn__content"
-                    data-no-activator=""
-                  >
-                    
-                    
-                    5 
-                    <i
-                      aria-hidden="true"
-                      class="mdi-account-multiple mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--end"
-                    />
-                    
-                    
-                  </span>
-                  <!---->
+                class="v-field__field"
+                data-no-activator=""
+              >
+                <!---->
+                <label
+                  class="v-label v-field-label"
+                  for="input-2"
+                >
                   <!---->
-                </button>
+                  
+                  Search
+                  
+                </label>
                 
-                <!--teleport start-->
-                <!--teleport end-->
                 
-              </td>
-              <td
-                class="text-right"
-              >
+                <!---->
+                <input
+                  aria-describedby="input-2-messages"
+                  class="v-field__input"
+                  id="input-2"
+                  outlined=""
+                  size="1"
+                  type="text"
+                />
+                <!---->
                 
                 
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="menu"
-                  aria-owns="v-menu-10"
-                  class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-small v-btn--variant-text"
-                  targetref="[object Object]"
-                  type="button"
+              </div>
+              <transition-stub
+                appear="false"
+                css="true"
+                name="expand-x-transition"
+                persisted="false"
+              >
+                <div
+                  class="v-field__clearable"
+                  style="display: none;"
                 >
-                  
-                  <span
-                    class="v-btn__overlay"
-                  />
-                  <span
-                    class="v-btn__underlay"
+                  <i
+                    aria-hidden="false"
+                    aria-label="Clear Search"
+                    class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
+                    role="button"
                   />
-                  
-                  <!---->
-                  <span
-                    class="v-btn__content"
-                    data-no-activator=""
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="mdi-dots-vertical mdi v-icon notranslate v-theme--light v-icon--size-default"
-                    />
-                  </span>
-                  <!---->
-                  <!---->
-                </button>
+                </div>
+              </transition-stub>
+              <div
+                class="v-field__append-inner"
+              >
+                <!---->
+                <!---->
+              </div>
+              <div
+                class="v-field__outline"
+              >
                 
+                <div
+                  class="v-field__outline__start"
+                />
                 <!---->
+                <div
+                  class="v-field__outline__end"
+                />
                 
-                <button
-                  class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-small v-btn--variant-text"
-                  type="button"
-                >
-                  
-                  <span
-                    class="v-btn__overlay"
-                  />
-                  <span
-                    class="v-btn__underlay"
-                  />
-                  
-                  <!---->
-                  <span
-                    class="v-btn__content"
-                    data-no-activator=""
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="mdi-chevron-down mdi v-icon notranslate v-theme--light v-icon--size-default"
-                    />
-                  </span>
-                  <!---->
-                  <!---->
-                </button>
-              </td>
-            </tr>
+                <!---->
+              </div>
+            </div>
             
+          </div>
+          <!---->
+          <div
+            class="v-input__details"
+          >
+            <transition-group-stub
+              appear="false"
+              aria-live="polite"
+              class="v-messages"
+              css="true"
+              id="input-2-messages"
+              name="slide-y-transition"
+              persisted="false"
+              role="alert"
+              tag="div"
+            >
+              
+              <div
+                class="v-messages__message"
+              >
+                 
+              </div>
+              
+            </transition-group-stub>
             <!---->
+          </div>
+        </div>
+        <!--v-if-->
+      </div>
+    </div>
+    <div
+      class="v-table v-table--has-top v-table--has-bottom v-table--hover v-theme--light v-table--density-default v-data-table"
+      item-key="id"
+    >
+      
+      <!---->
+      
+      <div
+        class="v-table__wrapper"
+      >
+        <table>
+          
+          
+          <!---->
+          <thead
+            class="v-data-table__thead"
+            role="rowgroup"
+          >
             
             
-            
-            <tr
-              class=""
-              draggable="true"
-            >
-              <td
-                class="font-weight-medium pl-8"
-              >
-                <router-link-stub
-                  class="link--underline"
-                  target="_blank"
-                  to="[object Object]"
-                />
-              </td>
-              <td
-                class="text-right text--secondary"
-              >
-                
-                
-                <button
-                  aria-describedby="v-tooltip-13"
-                  class="v-btn v-theme--light bg-transparent v-btn--density-default v-btn--size-default v-btn--variant-flat"
-                  targetref="[object Object]"
-                  type="button"
-                >
-                  
-                  <span
-                    class="v-btn__overlay"
-                  />
-                  <span
-                    class="v-btn__underlay"
-                  />
-                  
-                  <!---->
-                  <span
-                    class="v-btn__content"
-                    data-no-activator=""
-                  >
-                    
-                    
-                    2 
-                    <i
-                      aria-hidden="true"
-                      class="mdi-account-multiple mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--end"
-                    />
-                    
-                    
-                  </span>
-                  <!---->
-                  <!---->
-                </button>
-                
-                <!--teleport start-->
-                <!--teleport end-->
-                
-              </td>
-              <td
-                class="text-right"
+            <tr>
+              
+              <th
+                class="v-data-table__td v-data-table-column--align-start v-data-table__th"
+                colspan="1"
+                rowspan="1"
               >
                 
-                
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="menu"
-                  aria-owns="v-menu-15"
-                  class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-small v-btn--variant-text"
-                  targetref="[object Object]"
-                  type="button"
+                <div
+                  class="v-data-table-header__content"
                 >
-                  
-                  <span
-                    class="v-btn__overlay"
-                  />
-                  <span
-                    class="v-btn__underlay"
-                  />
-                  
-                  <!---->
-                  <span
-                    class="v-btn__content"
-                    data-no-activator=""
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="mdi-dots-vertical mdi v-icon notranslate v-theme--light v-icon--size-default"
-                    />
+                  <span>
+                    Name
                   </span>
                   <!---->
                   <!---->
-                </button>
+                </div>
                 
-                <!---->
+              </th>
+              <th
+                class="v-data-table__td v-data-table-column--align-end v-data-table__th"
+                colspan="1"
+                rowspan="1"
+              >
                 
-                <button
-                  class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-small v-btn--variant-text"
-                  type="button"
+                <div
+                  class="v-data-table-header__content"
                 >
-                  
-                  <span
-                    class="v-btn__overlay"
-                  />
-                  <span
-                    class="v-btn__underlay"
-                  />
-                  
+                  <span>
+                    Enrollments
+                  </span>
                   <!---->
-                  <span
-                    class="v-btn__content"
-                    data-no-activator=""
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="mdi-chevron-down mdi v-icon notranslate v-theme--light v-icon--size-default"
-                    />
+                  <!---->
+                </div>
+                
+              </th>
+              <th
+                class="v-data-table__td v-data-table-column--align-start v-data-table__th"
+                colspan="1"
+                rowspan="1"
+              >
+                
+                <div
+                  class="v-data-table-header__content"
+                >
+                  <span>
+                    <!---->
                   </span>
                   <!---->
                   <!---->
-                </button>
-              </td>
+                </div>
+                
+              </th>
+              
             </tr>
             
             <!---->
             
-            
-            
+          </thead>
+          <!---->
+          <tbody
+            class="v-data-table__tbody"
+            role="rowgroup"
+          >
+            <!---->
             <tr
-              class=""
-              draggable="true"
+              class="v-data-table-rows-no-data"
             >
               <td
-                class="font-weight-medium pl-8"
-              >
-                <router-link-stub
-                  class="link--underline"
-                  target="_blank"
-                  to="[object Object]"
-                />
-              </td>
-              <td
-                class="text-right text--secondary"
+                colspan="3"
               >
                 
-                
-                <button
-                  aria-describedby="v-tooltip-18"
-                  class="v-btn v-theme--light bg-transparent v-btn--density-default v-btn--size-default v-btn--variant-flat"
-                  targetref="[object Object]"
-                  type="button"
+                <div
+                  class="v-alert v-theme--light text-error v-alert--density-compact v-alert--variant-tonal text-left"
+                  role="alert"
                 >
                   
+                  <!---->
                   <span
-                    class="v-btn__overlay"
-                  />
-                  <span
-                    class="v-btn__underlay"
+                    class="v-alert__underlay"
                   />
                   
                   <!---->
-                  <span
-                    class="v-btn__content"
-                    data-no-activator=""
+                  <div
+                    class="v-alert__prepend"
                   >
-                    
-                    
-                    3 
                     <i
                       aria-hidden="true"
-                      class="mdi-account-multiple mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--end"
+                      class="mdi-close-circle mdi v-icon notranslate v-theme--light"
+                      density="compact"
+                      style="font-size: 28px; height: 28px; width: 28px;"
                     />
+                  </div>
+                  <div
+                    class="v-alert__content"
+                  >
+                    <!---->
+                    <!---->
                     
+                    Test error message
                     
-                  </span>
-                  <!---->
-                  <!---->
-                </button>
-                
-                <!--teleport start-->
-                <!--teleport end-->
-                
-              </td>
-              <td
-                class="text-right"
-              >
-                
-                
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="menu"
-                  aria-owns="v-menu-20"
-                  class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-small v-btn--variant-text"
-                  targetref="[object Object]"
-                  type="button"
-                >
-                  
-                  <span
-                    class="v-btn__overlay"
-                  />
-                  <span
-                    class="v-btn__underlay"
-                  />
-                  
-                  <!---->
-                  <span
-                    class="v-btn__content"
-                    data-no-activator=""
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="mdi-dots-vertical mdi v-icon notranslate v-theme--light v-icon--size-default"
-                    />
-                  </span>
+                  </div>
                   <!---->
                   <!---->
-                </button>
-                
-                <!---->
+                </div>
                 
-                <button
-                  class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-small v-btn--variant-text"
-                  type="button"
-                >
-                  
-                  <span
-                    class="v-btn__overlay"
-                  />
-                  <span
-                    class="v-btn__underlay"
-                  />
-                  
-                  <!---->
-                  <span
-                    class="v-btn__content"
-                    data-no-activator=""
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="mdi-chevron-down mdi v-icon notranslate v-theme--light v-icon--size-default"
-                    />
-                  </span>
-                  <!---->
-                  <!---->
-                </button>
               </td>
             </tr>
-            
-            <!---->
-            
-            
-            
             <!---->
           </tbody>
           <!---->
@@ -28447,83 +30387,16 @@ exports[`Storybook Tests OrganizationsTable Groups 1`] = `
               </button>
             </li>
             
-            <li
-              class="v-pagination__item v-pagination__item--is-active"
-              data-test="v-pagination-item"
-            >
-              <button
-                aria-current="true"
-                aria-label="Page 1, Current page"
-                class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-default v-btn--variant-text"
-                ellipsis="false"
-                type="button"
-              >
-                
-                <span
-                  class="v-btn__overlay"
-                />
-                <span
-                  class="v-btn__underlay"
-                />
-                
-                <!---->
-                <span
-                  class="v-btn__content"
-                  data-no-activator=""
-                >
-                  
-                  
-                  1
-                  
-                  
-                </span>
-                <!---->
-                <!---->
-              </button>
-            </li>
-            <li
-              class="v-pagination__item"
-              data-test="v-pagination-item"
-            >
-              <button
-                aria-current="false"
-                aria-label="Go to page 2"
-                class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-default v-btn--variant-text"
-                ellipsis="false"
-                type="button"
-              >
-                
-                <span
-                  class="v-btn__overlay"
-                />
-                <span
-                  class="v-btn__underlay"
-                />
-                
-                <!---->
-                <span
-                  class="v-btn__content"
-                  data-no-activator=""
-                >
-                  
-                  
-                  2
-                  
-                  
-                </span>
-                <!---->
-                <!---->
-              </button>
-            </li>
             
             <li
               class="v-pagination__next"
               data-test="v-pagination-next"
             >
               <button
-                aria-disabled="false"
+                aria-disabled="true"
                 aria-label="Next page"
-                class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-default v-btn--variant-text"
+                class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-compact v-btn--size-default v-btn--variant-text"
+                disabled=""
                 type="button"
               >
                 
@@ -28625,7 +30498,7 @@ exports[`Storybook Tests OrganizationsTable Groups 1`] = `
                   aria-describedby="input-6-messages"
                   class="v-field__input"
                   id="input-6"
-                  max="5"
+                  max="0"
                   min="1"
                   size="1"
                   type="number"
@@ -28672,7 +30545,10 @@ exports[`Storybook Tests OrganizationsTable Groups 1`] = `
       </div>
       
     </div>
-    <!--v-if-->
+    
+    <!---->
+    <!---->
+    
     
     <!---->
     <!---->