@mongoosejs/studio 0.0.58 → 0.0.60

package/frontend/public/app.js

@@ -1864,10 +1864,10 @@ module.exports = app => app.component('models', {
 
 const axios = __webpack_require__(/*! axios */ "./node_modules/axios/dist/browser/axios.cjs");
 const client = axios.create({
-  baseURL: ''
+  baseURL: 'http://localhost:8888/.netlify/functions'
 });
 
-client.hasAPIKey = !!'';
+client.hasAPIKey = !!'http://localhost:8888/.netlify/functions';
 
 client.interceptors.request.use(req => {
   const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
@@ -1882,12 +1882,20 @@ exports.githubLogin = function githubLogin() {
   return client.post('/githubLogin', { state: window.location.href }).then(res => res.data);
 };
 
+exports.getWorkspaceTeam = function getWorkspaceTeam() {
+  return client.post('/getWorkspaceTeam', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]},{"userId":"67a91f3e5db099be8bd0f5c5","roles":["member"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-09T21:35:14.905Z","__v":1,"name":"Zevo DEV","subscriptionTier":"pro"}._id }).then(res => res.data);
+};
+
+exports.inviteToWorkspace = function inviteToWorkspace(params) {
+  return client.post('/inviteToWorkspace', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]},{"userId":"67a91f3e5db099be8bd0f5c5","roles":["member"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-09T21:35:14.905Z","__v":1,"name":"Zevo DEV","subscriptionTier":"pro"}._id, ...params }).then(res => res.data);
+};
+
 exports.github = function github(code) {
-  return client.post('/github', { code, workspaceId: {}._id }).then(res => res.data);
+  return client.post('/github', { code, workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]},{"userId":"67a91f3e5db099be8bd0f5c5","roles":["member"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-09T21:35:14.905Z","__v":1,"name":"Zevo DEV","subscriptionTier":"pro"}._id }).then(res => res.data);
 };
 
 exports.me = function me() {
-  return client.post('/me', { workspaceId: {}._id }).then(res => res.data);
+  return client.post('/me', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]},{"userId":"67a91f3e5db099be8bd0f5c5","roles":["member"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-09T21:35:14.905Z","__v":1,"name":"Zevo DEV","subscriptionTier":"pro"}._id }).then(res => res.data);
 };
 
 exports.hasAPIKey = client.hasAPIKey;
@@ -1914,7 +1922,7 @@ appendCSS(__webpack_require__(/*! ./navbar.css */ "./frontend/src/navbar/navbar.
 
 module.exports = app => app.component('navbar', {
   template: template,
-  props: ['user'],
+  props: ['user', 'roles'],
   data: () => ({ nodeEnv: null, showFlyout: false }),
   computed: {
     routeName() {
@@ -1925,6 +1933,9 @@ module.exports = app => app.component('navbar', {
     },
     hasAPIKey() {
       return mothership.hasAPIKey;
+    },
+    canViewTeam() {
+      return this.roles?.includes('owner') || this.roles?.includes('admin');
     }
   },
   async mounted() {
@@ -2002,9 +2013,15 @@ module.exports = [
     path: '/dashboard/:dashboardId',
     name: 'dashboard',
     component: 'dashboard'
+  },
+  {
+    path: '/team',
+    name: 'team',
+    component: 'team'
   }
 ];
 
+
 /***/ }),
 
 /***/ "./frontend/src/splash/splash.js":
@@ -2025,7 +2042,7 @@ module.exports = app => app.component('splash', {
   data: () => ({ error: null }),
   computed: {
     workspaceName() {
-      return {}.name;
+      return {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]},{"userId":"67a91f3e5db099be8bd0f5c5","roles":["member"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-09T21:35:14.905Z","__v":1,"name":"Zevo DEV","subscriptionTier":"pro"}.name;
     }
   },
   async mounted() {
@@ -2050,6 +2067,74 @@ module.exports = app => app.component('splash', {
 });
 
 
+/***/ }),
+
+/***/ "./frontend/src/team/new-invitation/new-invitation.js":
+/*!************************************************************!*\
+  !*** ./frontend/src/team/new-invitation/new-invitation.js ***!
+  \************************************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+
+
+const mothership = __webpack_require__(/*! ../../mothership */ "./frontend/src/mothership.js");
+const template = __webpack_require__(/*! ./new-invitation.html */ "./frontend/src/team/new-invitation/new-invitation.html");
+
+module.exports = app => app.component('new-invitation', {
+  template,
+  emits: ['close', 'invitationCreated'],
+  data: () => ({
+    githubUsername: '',
+    email: '',
+    role: null
+  }),
+  methods: {
+    async inviteToWorkspace() {
+      const { invitation } = await mothership.inviteToWorkspace({ githubUsername: this.githubUsername, email: this.email, roles: [this.role] });
+      this.$emit('invitationCreated', { invitation });
+      this.$emit('close');
+    }
+  }
+});
+
+
+/***/ }),
+
+/***/ "./frontend/src/team/team.js":
+/*!***********************************!*\
+  !*** ./frontend/src/team/team.js ***!
+  \***********************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+
+
+const mothership = __webpack_require__(/*! ../mothership */ "./frontend/src/mothership.js");
+const template = __webpack_require__(/*! ./team.html */ "./frontend/src/team/team.html");
+
+module.exports = app => app.component('team', {
+  template,
+  data: () => ({
+    workspace: null,
+    users: null,
+    invitations: null,
+    showNewInvitationModal: false
+  }),
+  async mounted() {
+    const { workspace, users, invitations } = await mothership.getWorkspaceTeam();
+    this.workspace = workspace;
+    this.users = users;
+    this.invitations = invitations;
+  },
+  methods: {
+    getRolesForUser(user) {
+      return this.workspace.members.find(member => member.userId === user._id)?.roles ?? [];
+    }
+  }
+});
+
+
 /***/ }),
 
 /***/ "./node_modules/mpath/index.js":
@@ -3143,7 +3228,7 @@ module.exports = "<transition name=\"modal\">\n  <div class=\"modal-mask\">\n
 /***/ ((module) => {
 
 "use strict";
-module.exports = ".models {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  min-height: calc(100% - 56px);\n}\n\n.models button.gray {\n  color: black;\n  background-color: #eee;\n}\n\n.models .model-selector {\n  background-color: #eee;\n  flex-grow: 0;\n  padding: 15px;\n  padding-top: 0px;\n}\n\n.models h1 {\n  margin-top: 0px;\n}\n\n.models .documents {\n  flex-grow: 1;\n  overflow: scroll;\n  max-height: calc(100vh - 56px);\n}\n\n.models .documents table {\n  /* max-width: -moz-fit-content;\n  max-width: fit-content; */\n  width: 100%;\n  table-layout: auto;\n  font-size: small;\n  padding: 0;\n  margin-right: 1em;\n  white-space: nowrap;\n  z-index: -1;\n  border-collapse: collapse;\n  line-height: 1.5em;\n}\n\n.models .documents table th {\n  position: sticky;\n  top: 0px;\n  background-color: white;\n  z-index: 1;\n}\n\n.models .documents table th:after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  width: 100%;\n  bottom: -1px;\n  border-bottom: thin solid rgba(0, 0, 0, 0.12);\n}\n\n.models .documents table tr {\n  color: black;\n  border-spacing: 0px 0px;\n  background-color: white;\n  cursor: pointer;\n}\n\n.models .documents table tr:nth-child(even) {\n  background-color: #f5f5f5;\n}\n\n.models .documents table tr:hover {\n  background-color: #a7b9ff;\n}\n\n.models .documents table th,\ntd {\n  border-bottom: thin solid rgba(0, 0, 0, 0.12);\n  text-align: left;\n  padding: 0 16px;\n  height: 48px;\n}\n\n.models textarea {\n  font-size: 1.2em;\n}\n\n.models .path-type {\n  color: rgba(0, 0, 0, 0.36);\n  font-size: 0.8em;\n}\n\n.models .documents-menu {\n  display: flex;\n  margin: 0.25em;\n  width: calc(100vw - 220px);\n}\n\n.models .documents-menu .search-input {\n  flex-grow: 1;\n  align-items: center;\n}\n\n.models .search-input input {\n  padding: 0.25em 0.5em;\n  font-size: 1.1em;\n  border: 1px solid #ddd;\n  border-radius: 3px;\n  width: calc(100% - 1em);\n}\n\n.models .sort-arrow {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n\n.models .loader {\n  width: 100%;\n  text-align: center;\n}\n\n.models .loader img {\n  height: 4em;\n}\n\n.models .documents .buttons {\n  display: inline-flex;\n  justify-content: space-around;\n  align-items: center;\n}\n";
+module.exports = ".models {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  min-height: calc(100% - 56px);\n}\n\n.models button.gray {\n  color: black;\n  background-color: #eee;\n}\n\n.models .model-selector {\n  background-color: #eee;\n  flex-grow: 0;\n  padding: 15px;\n  padding-top: 0px;\n}\n\n.models h1 {\n  margin-top: 0px;\n}\n\n.models .documents {\n  flex-grow: 1;\n  overflow: scroll;\n  max-height: calc(100vh - 56px);\n}\n\n.models .documents table {\n  /* max-width: -moz-fit-content;\n  max-width: fit-content; */\n  width: 100%;\n  table-layout: auto;\n  font-size: small;\n  padding: 0;\n  margin-right: 1em;\n  white-space: nowrap;\n  z-index: -1;\n  border-collapse: collapse;\n  line-height: 1.5em;\n}\n\n.models .documents table th {\n  position: sticky;\n  top: 42px;\n  background-color: white;\n  z-index: 1;\n}\n\n.models .documents table th:after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  width: 100%;\n  bottom: -1px;\n  border-bottom: thin solid rgba(0, 0, 0, 0.12);\n}\n\n.models .documents table tr {\n  color: black;\n  border-spacing: 0px 0px;\n  background-color: white;\n  cursor: pointer;\n}\n\n.models .documents table tr:nth-child(even) {\n  background-color: #f5f5f5;\n}\n\n.models .documents table tr:hover {\n  background-color: #a7b9ff;\n}\n\n.models .documents table th,\ntd {\n  border-bottom: thin solid rgba(0, 0, 0, 0.12);\n  text-align: left;\n  padding: 0 16px;\n  height: 48px;\n}\n\n.models textarea {\n  font-size: 1.2em;\n}\n\n.models .path-type {\n  color: rgba(0, 0, 0, 0.36);\n  font-size: 0.8em;\n}\n\n.models .documents-menu {\n  position: fixed;\n  background-color: white;\n  z-index: 1;\n  padding: 4px;\n  display: flex;\n  width: calc(100vw - 12rem);\n}\n\n.models .documents-menu .search-input {\n  flex-grow: 1;\n  align-items: center;\n}\n\n.models .search-input input {\n  padding: 0.25em 0.5em;\n  font-size: 1.1em;\n  border: 1px solid #ddd;\n  border-radius: 3px;\n  width: calc(100% - 1em);\n}\n\n.models .sort-arrow {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n\n.models .loader {\n  width: 100%;\n  text-align: center;\n}\n\n.models .loader img {\n  height: 4em;\n}\n\n.models .documents .buttons {\n  display: inline-flex;\n  justify-content: space-around;\n  align-items: center;\n}\n";
 
 /***/ }),
 
@@ -3154,7 +3239,7 @@ module.exports = ".models {\n  position: relative;\n  display: flex;\n  flex-dir
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"models\">\n  <div>\n    <div class=\"flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-2 h-[calc(100vh-55px)]\">\n      <div class=\"flex font-bold font-xl mt-4 pl-2\">\n        Models\n      </div>\n      <nav class=\"flex flex-1 flex-col\">\n        <ul role=\"list\" class=\"flex flex-1 flex-col gap-y-7\">\n          <li>\n            <ul role=\"list\">\n              <li v-for=\"model in models\">\n                <router-link\n                  :to=\"'/model/' + model\"\n                  class=\"block rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700\"\n                  :class=\"model === currentModel ? 'bg-ultramarine-100 font-bold' : 'hover:bg-ultramarine-100'\">\n                  {{model}}\n                </router-link>\n              </li>\n            </ul>\n          </li>\n        </ul>\n      </nav>\n    </div>\n\n  </div>\n  <div class=\"documents\" ref=\"documentsList\">\n    <div>\n      <div class=\"documents-menu\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <form @submit.prevent=\"search\" class=\"flex-grow m-0\">\n            <input class=\"w-full rounded-md p-1 outline-gray-300 text-lg\" type=\"text\" placeholder=\"Filter or text\" v-model=\"searchText\" />\n          </form>\n          <div>\n            <span v-if=\"status === 'loading'\">Loading ...</span>\n            <span v-if=\"status === 'loaded'\">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>\n          </div>\n          <button\n            @click=\"shouldShowExportModal = true\"\n            type=\"button\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Export\n          </button>\n          <button\n            @click=\"shouldShowCreateModal = true;\"\n            type=\"button\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Create\n          </button>\n          <button\n            @click=\"shouldShowFieldModal = true\"\n            type=\"button\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Fields\n          </button>\n          <span class=\"isolate inline-flex rounded-md shadow-sm\">\n            <button\n              @click=\"outputType = 'table'\"\n              type=\"button\"\n              class=\"relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'table' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/table.svg\">\n            </button>\n            <button\n              @click=\"outputType = 'json'\"\n              type=\"button\"\n              class=\"relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'json' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/json.svg\">\n            </button>\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"documents-container\">\n      <table v-if=\"outputType === 'table'\">\n        <thead>\n          <th v-for=\"path in filteredPaths\">\n            {{path.path}}\n            <span class=\"path-type\">\n              ({{(path.instance || 'unknown')}})\n            </span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n          </th>\n        </thead>\n        <tbody>\n          <tr v-for=\"document in documents\" @click=\"$router.push('/model/' + currentModel + '/document/' + document._id)\" :key=\"document._id\">\n            <td v-for=\"schemaPath in filteredPaths\">\n              <component\n                :is=\"getComponentForPath(schemaPath)\"\n                :value=\"getValueForPath(document, schemaPath.path)\"\n                :allude=\"getReferenceModel(schemaPath)\">\n              </component>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-if=\"outputType === 'json'\">\n        <div v-for=\"document in documents\" @click=\"$router.push('/model/' + currentModel + '/document/' + document._id)\" :key=\"document._id\">\n          <list-json :value=\"filterDocument(document)\">\n          </list-json>\n        </div>\n      </div>\n      <div v-if=\"status === 'loading'\" class=\"loader\">\n        <img src=\"images/loader.gif\">\n      </div>\n    </div>\n    <modal v-if=\"shouldShowExportModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n        <export-query-results\n          :schemaPaths=\"schemaPaths\"\n          :filter=\"filter\"\n          :currentModel=\"currentModel\"\n          @done=\"shouldShowExportModal = false\">\n        </export-query-results>\n      </template>\n    </modal>\n    <modal v-if=\"shouldShowFieldModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">&times;</div>\n        <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" style=\"margin-bottom: 0.5em\">\n          <input type=\"checkbox\" :id=\"'path.path'+index\" @change=\"addOrRemove(path)\" :value=\"path.path\" :checked=\"isSelected(path.path)\" />\n          <label :for=\"'path' + index\">{{path.path}}</label>\n        </div>\n        <div style=\"margin-top: 1em\">\n          <button type=\"submit\" @click=\"filterDocuments()\" style=\"color: black;margin-right: 0.5em\">Filter Selection</button>\n          <button type=\"submit\" @click=\"deselectAll()\" class=\"gray\" style=\"margin-right: 0.5em\">Deselect All</button>\n          <button type=\"submit\" @click=\"resetDocuments()\" class=\"gray\">Cancel</button>\n\n        </div>\n      </template>\n    </modal>\n    <modal v-if=\"shouldShowCreateModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowCreateModal = false;\">&times;</div>\n        <create-document :currentModel=\"currentModel\" :paths=\"schemaPaths\" @close=\"closeCreationModal\"></create-document>\n      </template>\n    </modal>\n  </div>\n</div>\n";
+module.exports = "<div class=\"models\">\n  <div>\n    <div class=\"flex grow flex-col gap-y-5 overflow-auto border-r border-gray-200 bg-white px-2 h-[calc(100vh-55px)] w-48\">\n      <div class=\"flex font-bold font-xl mt-4 pl-2\">\n        Models\n      </div>\n      <nav class=\"flex flex-1 flex-col\">\n        <ul role=\"list\" class=\"flex flex-1 flex-col gap-y-7\">\n          <li>\n            <ul role=\"list\">\n              <li v-for=\"model in models\">\n                <router-link\n                  :to=\"'/model/' + model\"\n                  class=\"block truncate rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700\"\n                  :class=\"model === currentModel ? 'bg-ultramarine-100 font-bold' : 'hover:bg-ultramarine-100'\">\n                  {{model}}\n                </router-link>\n              </li>\n            </ul>\n          </li>\n        </ul>\n      </nav>\n    </div>\n\n  </div>\n  <div class=\"documents\" ref=\"documentsList\">\n    <div class=\"relative h-[42px]\">\n      <div class=\"documents-menu\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <form @submit.prevent=\"search\" class=\"flex-grow m-0\">\n            <input class=\"w-full rounded-md p-1 outline-gray-300 text-lg focus:ring-1 focus:ring-ultramarine-200 focus:ring-offset-0 focus:outline-none\" type=\"text\" placeholder=\"Filter or text\" v-model=\"searchText\" />\n          </form>\n          <div>\n            <span v-if=\"status === 'loading'\">Loading ...</span>\n            <span v-if=\"status === 'loaded'\">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>\n          </div>\n          <button\n            @click=\"shouldShowExportModal = true\"\n            type=\"button\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Export\n          </button>\n          <button\n            @click=\"shouldShowCreateModal = true;\"\n            type=\"button\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Create\n          </button>\n          <button\n            @click=\"shouldShowFieldModal = true\"\n            type=\"button\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Fields\n          </button>\n          <span class=\"isolate inline-flex rounded-md shadow-sm\">\n            <button\n              @click=\"outputType = 'table'\"\n              type=\"button\"\n              class=\"relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'table' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/table.svg\">\n            </button>\n            <button\n              @click=\"outputType = 'json'\"\n              type=\"button\"\n              class=\"relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'json' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/json.svg\">\n            </button>\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"documents-container relative\">\n      <table v-if=\"outputType === 'table'\">\n        <thead>\n          <th v-for=\"path in filteredPaths\">\n            {{path.path}}\n            <span class=\"path-type\">\n              ({{(path.instance || 'unknown')}})\n            </span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n          </th>\n        </thead>\n        <tbody>\n          <tr v-for=\"document in documents\" @click=\"$router.push('/model/' + currentModel + '/document/' + document._id)\" :key=\"document._id\">\n            <td v-for=\"schemaPath in filteredPaths\">\n              <component\n                :is=\"getComponentForPath(schemaPath)\"\n                :value=\"getValueForPath(document, schemaPath.path)\"\n                :allude=\"getReferenceModel(schemaPath)\">\n              </component>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-if=\"outputType === 'json'\">\n        <div v-for=\"document in documents\" @click=\"$router.push('/model/' + currentModel + '/document/' + document._id)\" :key=\"document._id\">\n          <list-json :value=\"filterDocument(document)\">\n          </list-json>\n        </div>\n      </div>\n      <div v-if=\"status === 'loading'\" class=\"loader\">\n        <img src=\"images/loader.gif\">\n      </div>\n    </div>\n    <modal v-if=\"shouldShowExportModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n        <export-query-results\n          :schemaPaths=\"schemaPaths\"\n          :filter=\"filter\"\n          :currentModel=\"currentModel\"\n          @done=\"shouldShowExportModal = false\">\n        </export-query-results>\n      </template>\n    </modal>\n    <modal v-if=\"shouldShowFieldModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">&times;</div>\n        <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" style=\"margin-bottom: 0.5em\">\n          <input type=\"checkbox\" :id=\"'path.path'+index\" @change=\"addOrRemove(path)\" :value=\"path.path\" :checked=\"isSelected(path.path)\" />\n          <label :for=\"'path' + index\">{{path.path}}</label>\n        </div>\n        <div style=\"margin-top: 1em\">\n          <button type=\"submit\" @click=\"filterDocuments()\" style=\"color: black;margin-right: 0.5em\">Filter Selection</button>\n          <button type=\"submit\" @click=\"deselectAll()\" class=\"gray\" style=\"margin-right: 0.5em\">Deselect All</button>\n          <button type=\"submit\" @click=\"resetDocuments()\" class=\"gray\">Cancel</button>\n\n        </div>\n      </template>\n    </modal>\n    <modal v-if=\"shouldShowCreateModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowCreateModal = false;\">&times;</div>\n        <create-document :currentModel=\"currentModel\" :paths=\"schemaPaths\" @close=\"closeCreationModal\"></create-document>\n      </template>\n    </modal>\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -3176,7 +3261,7 @@ module.exports = ".navbar {\n  width: 100%;\n  background-color: #eee;\n}\n\n.ac
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"navbar\">\n  <div class=\"nav-left flex items-center gap-4 h-full\">\n    <router-link to=\"/\">\n      <img src=\"images/logo.svg\" alt=\"Mongoose Studio Logo\" />\n    </router-link>\n    <div v-if=\"!!nodeEnv\" class=\"inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-900\" :class=\"warnEnv ? 'bg-red-300' : 'bg-yellow-300'\">\n      {{nodeEnv}}\n    </div>\n  </div>\n  <div class=\"nav-right h-full\">\n    <div class=\"sm:ml-6 sm:flex sm:space-x-8 h-full\">\n      <a\n        href=\"#/\"\n        class=\"inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium\"\n        :class=\"routeName === 'root' ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Documents</a>\n      <a\n        href=\"#/dashboards\"\n        class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium\"\n        :class=\"routeName === 'dashboards' ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Dashboards</a>\n\n      <div class=\"h-full flex items-center\" v-if=\"!user && hasAPIKey\">\n        <button\n          type=\"button\"\n          @click=\"loginWithGithub\"\n          class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Login\n        </button>\n      </div>\n      <div v-if=\"user && hasAPIKey\" class=\"h-full flex items-center relative\" v-clickOutside=\"hideFlyout\">\n        <div>\n          <button type=\"button\" @click=\"showFlyout = !showFlyout\" class=\"relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800\" id=\"user-menu-button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n            <span class=\"absolute -inset-1.5\"></span>\n            <span class=\"sr-only\">Open user menu</span>\n            <img class=\"size-8 rounded-full\" :src=\"user.picture\" alt=\"\">\n          </button>\n        </div>\n\n        <div v-if=\"showFlyout\" class=\"absolute right-0 z-10 top-[82%] w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"user-menu-button\" tabindex=\"-1\">\n          <!-- Active: \"bg-gray-100 outline-none\", Not Active: \"\" -->\n          <span @click=\"logout\" class=\"cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Sign out</span>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div style=\"clear: both\"></div>\n</div>\n";
+module.exports = "<div class=\"navbar\">\n  <div class=\"nav-left flex items-center gap-4 h-full\">\n    <router-link to=\"/\">\n      <img src=\"images/logo.svg\" alt=\"Mongoose Studio Logo\" />\n    </router-link>\n    <div v-if=\"!!nodeEnv\" class=\"inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-900\" :class=\"warnEnv ? 'bg-red-300' : 'bg-yellow-300'\">\n      {{nodeEnv}}\n    </div>\n  </div>\n  <div class=\"nav-right h-full\">\n    <div class=\"sm:ml-6 sm:flex sm:space-x-8 h-full\">\n      <a\n        href=\"#/\"\n        class=\"inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium\"\n        :class=\"routeName === 'root' ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Documents</a>\n      <a\n        href=\"#/dashboards\"\n        class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium\"\n        :class=\"routeName === 'dashboards' ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Dashboards</a>\n\n      <div class=\"h-full flex items-center\" v-if=\"!user && hasAPIKey\">\n        <button\n          type=\"button\"\n          @click=\"loginWithGithub\"\n          class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Login\n        </button>\n      </div>\n      <div v-if=\"user && hasAPIKey\" class=\"h-full flex items-center relative\" v-clickOutside=\"hideFlyout\">\n        <div>\n          <button type=\"button\" @click=\"showFlyout = !showFlyout\" class=\"relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800\" id=\"user-menu-button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n            <span class=\"absolute -inset-1.5\"></span>\n            <span class=\"sr-only\">Open user menu</span>\n            <img class=\"size-8 rounded-full\" :src=\"user.picture\" alt=\"\">\n          </button>\n        </div>\n\n        <div v-if=\"showFlyout\" class=\"absolute right-0 z-10 top-[90%] w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"user-menu-button\" tabindex=\"-1\">\n          <router-link to=\"team\" v-if=\"canViewTeam\" @click=\"showFlyout = false\" class=\"cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Team</router-link>\n          <span @click=\"logout\" class=\"cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Sign out</span>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div style=\"clear: both\"></div>\n</div>\n";
 
 /***/ }),
 
@@ -3191,6 +3276,28 @@ module.exports = "<div class=\"w-full h-full flex items-center justify-center\">
 
 /***/ }),
 
+/***/ "./frontend/src/team/new-invitation/new-invitation.html":
+/*!**************************************************************!*\
+  !*** ./frontend/src/team/new-invitation/new-invitation.html ***!
+  \**************************************************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = "<div class=\"p-1\">\n  <form class=\"space-y-4\">\n    <div class=\"text-lg font-bold\">\n      New Invitation\n    </div>\n\n    <div>\n      <label for=\"githubUsername\" class=\"block text-sm/6 font-medium text-gray-900\">GitHub Username</label>\n      <div class=\"mt-2\">\n        <input type=\"githubUsername\" name=\"githubUsername\" id=\"githubUsername\" v-model=\"githubUsername\" class=\"block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-ultramarine-600 sm:text-sm/6\" placeholder=\"johnsmith12\">\n      </div>\n    </div>\n\n    <div>\n      <label for=\"email\" class=\"block text-sm/6 font-medium text-gray-900\">Email (Optional)</label>\n      <div class=\"mt-2\">\n        <input type=\"email\" name=\"email\" id=\"email\" v-model=\"email\" class=\"block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-ultramarine-600 sm:text-sm/6\" placeholder=\"you@example.com\">\n      </div>\n    </div>\n\n    <div>\n      <label for=\"location\" class=\"block text-sm/6 font-medium text-gray-900\">Role</label>\n      <div class=\"mt-2 grid grid-cols-1\">\n        <select id=\"role\" name=\"role\" v-model=\"role\" class=\"col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6\">\n          <option value=\"admin\">Admin</option>\n          <option value=\"member\">Member</option>\n          <option value=\"readonly\">Read-only</option>\n        </select>\n        <svg class=\"pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n          <path fill-rule=\"evenodd\" d=\"M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z\" clip-rule=\"evenodd\" />\n        </svg>\n      </div>\n    </div>\n\n    <async-button\n      type=\"submit\"\n      @click=\"inviteToWorkspace\"\n      class=\"inline-flex justify-center rounded-md border border-transparent bg-forest-green-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-forest-green-500 focus:outline-none focus:ring-2 focus:ring-forest-green-500 focus:ring-offset-2\">\n      Submit\n    </async-button>\n  </form>\n</div>\n";
+
+/***/ }),
+
+/***/ "./frontend/src/team/team.html":
+/*!*************************************!*\
+  !*** ./frontend/src/team/team.html ***!
+  \*************************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = "<div class=\"mx-auto max-w-5xl py-6 px-2\">\n  <div class=\"text-xl font-bold\">\n    Current Members\n  </div>\n  <ul role=\"list\" class=\"divide-y divide-gray-100\">\n    <li class=\"flex justify-between gap-x-6 py-5\" v-for=\"user in users\">\n      <div class=\"flex min-w-0 gap-x-4\">\n        <img class=\"size-12 flex-none rounded-full bg-gray-50\" :src=\"user.picture ?? 'images/logo.svg'\" alt=\"\">\n        <div class=\"min-w-0 flex-auto\">\n          <p class=\"text-sm/6 font-semibold text-gray-900\">{{user.name}}</p>\n          <p class=\"mt-1 truncate text-xs/5 text-gray-500\">{{user.email}}</p>\n        </div>\n      </div>\n      <div class=\"hidden shrink-0 sm:flex sm:flex-col sm:items-end\">\n        <p class=\"text-sm/6 text-gray-900 capitalize\">{{getRolesForUser(user).join(', ')}}</p>\n        <p class=\"mt-1 text-xs/5 text-gray-500\">Last seen <time datetime=\"2023-01-23T13:23Z\">3h ago</time></p>\n      </div>\n    </li>\n  </ul>\n  <div class=\"mt-6\">\n    <div class=\"flex items-center justify-between\">\n      <div class=\"text-xl font-bold\">\n        Invitations\n      </div>\n      <div class=\"mt-4 sm:ml-16 sm:mt-0 sm:flex-none\">\n        <button\n          type=\"button\"\n          @click=\"showNewInvitationModal = true\"\n          class=\"block rounded-md bg-ultramarine-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n          New Invitation\n        </button>\n      </div>\n    </div>\n    <div class=\"mt-8 flow-root\" v-if=\"invitations?.length > 0\">\n      <div class=\"-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8\">\n        <div class=\"inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8\">\n          <table class=\"min-w-full divide-y divide-gray-300\">\n            <thead>\n              <tr>\n                <th scope=\"col\" class=\"py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0\">GitHub Username</th>\n                <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900\">Email</th>\n                <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900\">Status</th>\n                <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900\">Role</th>\n              </tr>\n            </thead>\n            <tbody class=\"divide-y divide-gray-200 bg-white\">\n              <tr v-for=\"invitation in invitations\">\n                <td class=\"whitespace-nowrap py-5 pl-4 pr-3 text-sm sm:pl-0\">\n                  {{invitation.githubUsername}}\n                </td>\n                <td class=\"whitespace-nowrap px-3 py-5 text-sm text-gray-500\">\n                  {{invitation.email}}\n                </td>\n                <td class=\"whitespace-nowrap px-3 py-5 text-sm text-gray-500\">\n                  <span class=\"inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-600/20\">\n                    Pending\n                  </span>\n                </td>\n                <td class=\"whitespace-nowrap px-3 py-5 text-sm text-gray-500\">\n                  {{invitation.roles.join(', ')}}\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n    </div>\n\n    <div v-if=\"invitations?.length === 0\" class=\"mt-4\">\n      <div class=\"text-center\">\n        <svg class=\"mx-auto size-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\n          <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\n        </svg>\n        <h3 class=\"mt-2 text-sm font-semibold text-gray-900\">No invitations</h3>\n        <p class=\"mt-1 text-sm text-gray-500\">You have no outstanding invitations</p>\n      </div>\n    </div>\n  </div>\n\n  <modal v-if=\"showNewInvitationModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"showNewInvitationModal = false\">&times;</div>\n      <new-invitation @close=\"showNewInvitationModal = false\" @invitationCreated=\"invitations.push($event.invitation)\"></new-invitation>\n    </template>\n  </modal>\n</div>\n";
+
+/***/ }),
+
 /***/ "./node_modules/axios/dist/browser/axios.cjs":
 /*!***************************************************!*\
   !*** ./node_modules/axios/dist/browser/axios.cjs ***!
@@ -11049,6 +11156,8 @@ __webpack_require__(/*! ./modal/modal */ "./frontend/src/modal/modal.js")(app);
 __webpack_require__(/*! ./models/models */ "./frontend/src/models/models.js")(app);
 __webpack_require__(/*! ./navbar/navbar */ "./frontend/src/navbar/navbar.js")(app);
 __webpack_require__(/*! ./splash/splash */ "./frontend/src/splash/splash.js")(app);
+__webpack_require__(/*! ./team/team */ "./frontend/src/team/team.js")(app);
+__webpack_require__(/*! ./team/new-invitation/new-invitation */ "./frontend/src/team/new-invitation/new-invitation.js")(app);
 
 app.component('app-component', {
   template: `
@@ -11057,7 +11166,7 @@ app.component('app-component', {
       <splash />
     </div>
     <div v-else-if="!hasAPIKey || user">
-      <navbar :user="user" />
+      <navbar :user="user" :roles="roles" />
       <div class="view">
         <router-view :key="$route.fullPath" />
       </div>
@@ -11083,14 +11192,17 @@ app.component('app-component', {
     if (mothership.hasAPIKey) {
       const token = window.localStorage.getItem('_mongooseStudioAccessToken');
       if (token) {
-        this.user = await mothership.me().then(res => res.user);
+        const { user, roles } = await mothership.me();
+        this.user = user;
+        this.roles = roles;
       }
     }
   },
   setup() {
     const user = Vue.ref(null);
+    const roles = Vue.ref(null);
 
-    const state = Vue.reactive({ user });
+    const state = Vue.reactive({ user, roles });
     Vue.provide('state', state);
 
     return state;

package/frontend/public/tw.css

@@ -590,6 +590,10 @@ video {
   border-width: 0;
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
 .fixed {
   position: fixed;
 }
@@ -614,8 +618,8 @@ video {
   right: 0px;
 }
 
-.top-\[82\%\] {
-  top: 82%;
+.top-\[90\%\] {
+  top: 90%;
 }
 
 .isolate {
@@ -626,6 +630,14 @@ video {
   z-index: 10;
 }
 
+.col-start-1 {
+  grid-column-start: 1;
+}
+
+.row-start-1 {
+  grid-row-start: 1;
+}
+
 .m-0 {
   margin: 0px;
 }
@@ -686,6 +698,10 @@ video {
   margin-right: 0.375rem;
 }
 
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -738,6 +754,19 @@ video {
   display: flow-root;
 }
 
+.grid {
+  display: grid;
+}
+
+.hidden {
+  display: none;
+}
+
+.size-12 {
+  width: 3rem;
+  height: 3rem;
+}
+
 .size-5 {
   width: 1.25rem;
   height: 1.25rem;
@@ -768,6 +797,10 @@ video {
   height: 300px;
 }
 
+.h-\[42px\] {
+  height: 42px;
+}
+
 .h-\[calc\(100vh-55px\)\] {
   height: calc(100vh - 55px);
 }
@@ -800,6 +833,14 @@ video {
   width: 100%;
 }
 
+.w-72 {
+  width: 18rem;
+}
+
+.min-w-0 {
+  min-width: 0px;
+}
+
 .min-w-full {
   min-width: 100%;
 }
@@ -812,6 +853,14 @@ video {
   flex: 1 1 0%;
 }
 
+.flex-auto {
+  flex: 1 1 auto;
+}
+
+.flex-none {
+  flex: none;
+}
+
 .flex-shrink-0 {
   flex-shrink: 0;
 }
@@ -844,6 +893,16 @@ video {
   list-style-type: disc;
 }
 
+.appearance-none {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -860,6 +919,10 @@ video {
   justify-content: center;
 }
 
+.justify-between {
+  justify-content: space-between;
+}
+
 .gap-1 {
   gap: 0.25rem;
 }
@@ -876,6 +939,16 @@ video {
   gap: 1rem;
 }
 
+.gap-x-4 {
+  -moz-column-gap: 1rem;
+       column-gap: 1rem;
+}
+
+.gap-x-6 {
+  -moz-column-gap: 1.5rem;
+       column-gap: 1.5rem;
+}
+
 .gap-y-5 {
   row-gap: 1.25rem;
 }
@@ -896,12 +969,23 @@ video {
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
 
+.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-divide-opacity));
+}
+
 .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-divide-opacity));
@@ -912,10 +996,18 @@ video {
   border-color: rgb(209 213 219 / var(--tw-divide-opacity));
 }
 
+.self-center {
+  align-self: center;
+}
+
 .self-stretch {
   align-self: stretch;
 }
 
+.justify-self-end {
+  justify-self: end;
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -1041,6 +1133,11 @@ video {
   background-color: rgb(156 163 175 / var(--tw-bg-opacity));
 }
 
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
 .bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@@ -1186,6 +1283,16 @@ video {
   padding-bottom: 1rem;
 }
 
+.py-5 {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -1222,6 +1329,10 @@ video {
   padding-right: 1rem;
 }
 
+.pr-8 {
+  padding-right: 2rem;
+}
+
 .pt-1 {
   padding-top: 0.25rem;
 }
@@ -1261,6 +1372,11 @@ video {
   line-height: 1.25rem;
 }
 
+.text-sm\/6 {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
@@ -1271,6 +1387,11 @@ video {
   line-height: 1rem;
 }
 
+.text-xs\/5 {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -1367,10 +1488,22 @@ video {
   outline-offset: 2px;
 }
 
+.outline {
+  outline-style: solid;
+}
+
 .outline-0 {
   outline-width: 0px;
 }
 
+.outline-1 {
+  outline-width: 1px;
+}
+
+.-outline-offset-1 {
+  outline-offset: -1px;
+}
+
 .outline-gray-300 {
   outline-color: #d1d5db;
 }
@@ -1394,6 +1527,10 @@ video {
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
 }
 
+.ring-gray-600\/20 {
+  --tw-ring-color: rgb(75 85 99 / 0.2);
+}
+
 .ring-gray-900\/5 {
   --tw-ring-color: rgb(17 24 39 / 0.05);
 }
@@ -1445,6 +1582,11 @@ video {
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-forest-green-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 242 58 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
@@ -1519,6 +1661,30 @@ video {
   outline-offset: 2px;
 }
 
+.focus\:outline:focus {
+  outline-style: solid;
+}
+
+.focus\:outline-2:focus {
+  outline-width: 2px;
+}
+
+.focus\:-outline-offset-2:focus {
+  outline-offset: -2px;
+}
+
+.focus\:outline-indigo-600:focus {
+  outline-color: #4f46e5;
+}
+
+.focus\:outline-ultramarine-600:focus {
+  outline-color: #1823ff;
+}
+
+.focus\:outline-ultramarine-50:focus {
+  outline-color: #f1f5ff;
+}
+
 .focus\:ring-0:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1531,11 +1697,22 @@ video {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus\:ring-1:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .focus\:ring-blue-500:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-forest-green-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(0 242 58 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-gray-500:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
@@ -1556,10 +1733,24 @@ video {
   --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-ultramarine-50:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(241 245 255 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-ultramarine-200:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(206 218 255 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-offset-2:focus {
   --tw-ring-offset-width: 2px;
 }
 
+.focus\:ring-offset-0:focus {
+  --tw-ring-offset-width: 0px;
+}
+
 .focus\:ring-offset-gray-800:focus {
   --tw-ring-offset-color: #1f2937;
 }
@@ -1622,6 +1813,11 @@ video {
     display: flex;
   }
 
+  .sm\:size-4 {
+    width: 1rem;
+    height: 1rem;
+  }
+
   .sm\:flex-auto {
     flex: 1 1 auto;
   }
@@ -1630,6 +1826,14 @@ video {
     flex: none;
   }
 
+  .sm\:flex-col {
+    flex-direction: column;
+  }
+
+  .sm\:items-end {
+    align-items: flex-end;
+  }
+
   .sm\:items-center {
     align-items: center;
   }
@@ -1649,6 +1853,10 @@ video {
     padding-right: 1.5rem;
   }
 
+  .sm\:pl-0 {
+    padding-left: 0px;
+  }
+
   .sm\:pl-6 {
     padding-left: 1.5rem;
   }
@@ -1662,6 +1870,11 @@ video {
     line-height: 1.25rem;
   }
 
+  .sm\:text-sm\/6 {
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+  }
+
   .sm\:leading-6 {
     line-height: 1.5rem;
   }

package/frontend/src/index.js

@@ -45,6 +45,8 @@ require('./modal/modal')(app);
 require('./models/models')(app);
 require('./navbar/navbar')(app);
 require('./splash/splash')(app);
+require('./team/team')(app);
+require('./team/new-invitation/new-invitation')(app);
 
 app.component('app-component', {
   template: `
@@ -53,7 +55,7 @@ app.component('app-component', {
       <splash />
     </div>
     <div v-else-if="!hasAPIKey || user">
-      <navbar :user="user" />
+      <navbar :user="user" :roles="roles" />
       <div class="view">
         <router-view :key="$route.fullPath" />
       </div>
@@ -79,14 +81,17 @@ app.component('app-component', {
     if (mothership.hasAPIKey) {
       const token = window.localStorage.getItem('_mongooseStudioAccessToken');
       if (token) {
-        this.user = await mothership.me().then(res => res.user);
+        const { user, roles } = await mothership.me();
+        this.user = user;
+        this.roles = roles;
       }
     }
   },
   setup() {
     const user = Vue.ref(null);
+    const roles = Vue.ref(null);
 
-    const state = Vue.reactive({ user });
+    const state = Vue.reactive({ user, roles });
     Vue.provide('state', state);
 
     return state;

package/frontend/src/models/models.css

@@ -43,7 +43,7 @@
 
 .models .documents table th {
   position: sticky;
-  top: 0px;
+  top: 42px;
   background-color: white;
   z-index: 1;
 }
@@ -90,9 +90,12 @@ td {
 }
 
 .models .documents-menu {
+  position: fixed;
+  background-color: white;
+  z-index: 1;
+  padding: 4px;
   display: flex;
-  margin: 0.25em;
-  width: calc(100vw - 220px);
+  width: calc(100vw - 12rem);
 }
 
 .models .documents-menu .search-input {

package/frontend/src/models/models.html

@@ -1,6 +1,6 @@
 <div class="models">
   <div>
-    <div class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-2 h-[calc(100vh-55px)]">
+    <div class="flex grow flex-col gap-y-5 overflow-auto border-r border-gray-200 bg-white px-2 h-[calc(100vh-55px)] w-48">
       <div class="flex font-bold font-xl mt-4 pl-2">
         Models
       </div>
@@ -11,7 +11,7 @@
               <li v-for="model in models">
                 <router-link
                   :to="'/model/' + model"
-                  class="block rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700"
+                  class="block truncate rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700"
                   :class="model === currentModel ? 'bg-ultramarine-100 font-bold' : 'hover:bg-ultramarine-100'">
                   {{model}}
                 </router-link>
@@ -24,11 +24,11 @@
 
   </div>
   <div class="documents" ref="documentsList">
-    <div>
+    <div class="relative h-[42px]">
       <div class="documents-menu">
         <div class="flex flex-row items-center w-full gap-2">
           <form @submit.prevent="search" class="flex-grow m-0">
-            <input class="w-full rounded-md p-1 outline-gray-300 text-lg" type="text" placeholder="Filter or text" v-model="searchText" />
+            <input class="w-full rounded-md p-1 outline-gray-300 text-lg focus:ring-1 focus:ring-ultramarine-200 focus:ring-offset-0 focus:outline-none" type="text" placeholder="Filter or text" v-model="searchText" />
           </form>
           <div>
             <span v-if="status === 'loading'">Loading ...</span>
@@ -71,7 +71,7 @@
         </div>
       </div>
     </div>
-    <div class="documents-container">
+    <div class="documents-container relative">
       <table v-if="outputType === 'table'">
         <thead>
           <th v-for="path in filteredPaths">
@@ -105,37 +105,38 @@
         <img src="images/loader.gif">
       </div>
     </div>
-    <modal v-if="shouldShowExportModal">
-      <template v-slot:body>
-        <div class="modal-exit" @click="shouldShowExportModal = false">&times;</div>
-        <export-query-results
-          :schemaPaths="schemaPaths"
-          :filter="filter"
-          :currentModel="currentModel"
-          @done="shouldShowExportModal = false">
-        </export-query-results>
-      </template>
-    </modal>
-    <modal v-if="shouldShowFieldModal">
-      <template v-slot:body>
-        <div class="modal-exit" @click="shouldShowFieldModal = false; selectedPaths = [...filteredPaths];">&times;</div>
-        <div v-for="(path, index) in schemaPaths" :key="index" style="margin-bottom: 0.5em">
-          <input type="checkbox" :id="'path.path'+index" @change="addOrRemove(path)" :value="path.path" :checked="isSelected(path.path)" />
-          <label :for="'path' + index">{{path.path}}</label>
-        </div>
-        <div style="margin-top: 1em">
-          <button type="submit" @click="filterDocuments()" style="color: black;margin-right: 0.5em">Filter Selection</button>
-          <button type="submit" @click="deselectAll()" class="gray" style="margin-right: 0.5em">Deselect All</button>
-          <button type="submit" @click="resetDocuments()" class="gray">Cancel</button>
-
-        </div>
-      </template>
-    </modal>
-    <modal v-if="shouldShowCreateModal">
-      <template v-slot:body>
-        <div class="modal-exit" @click="shouldShowCreateModal = false;">&times;</div>
-        <create-document :currentModel="currentModel" :paths="schemaPaths" @close="closeCreationModal"></create-document>
-      </template>
-    </modal>
   </div>
+
+  <modal v-if="shouldShowExportModal">
+    <template v-slot:body>
+      <div class="modal-exit" @click="shouldShowExportModal = false">&times;</div>
+      <export-query-results
+        :schemaPaths="schemaPaths"
+        :filter="filter"
+        :currentModel="currentModel"
+        @done="shouldShowExportModal = false">
+      </export-query-results>
+    </template>
+  </modal>
+  <modal v-if="shouldShowFieldModal">
+    <template v-slot:body>
+      <div class="modal-exit" @click="shouldShowFieldModal = false; selectedPaths = [...filteredPaths];">&times;</div>
+      <div v-for="(path, index) in schemaPaths" :key="index" style="margin-bottom: 0.5em">
+        <input type="checkbox" :id="'path.path'+index" @change="addOrRemove(path)" :value="path.path" :checked="isSelected(path.path)" />
+        <label :for="'path' + index">{{path.path}}</label>
+      </div>
+      <div style="margin-top: 1em">
+        <button type="submit" @click="filterDocuments()" style="color: black;margin-right: 0.5em">Filter Selection</button>
+        <button type="submit" @click="deselectAll()" class="gray" style="margin-right: 0.5em">Deselect All</button>
+        <button type="submit" @click="resetDocuments()" class="gray">Cancel</button>
+
+      </div>
+    </template>
+  </modal>
+  <modal v-if="shouldShowCreateModal">
+    <template v-slot:body>
+      <div class="modal-exit" @click="shouldShowCreateModal = false;">&times;</div>
+      <create-document :currentModel="currentModel" :paths="schemaPaths" @close="closeCreationModal"></create-document>
+    </template>
+  </modal>
 </div>

package/frontend/src/mothership.js

@@ -20,6 +20,14 @@ exports.githubLogin = function githubLogin() {
   return client.post('/githubLogin', { state: window.location.href }).then(res => res.data);
 };
 
+exports.getWorkspaceTeam = function getWorkspaceTeam() {
+  return client.post('/getWorkspaceTeam', { workspaceId: config__workspace._id }).then(res => res.data);
+};
+
+exports.inviteToWorkspace = function inviteToWorkspace(params) {
+  return client.post('/inviteToWorkspace', { workspaceId: config__workspace._id, ...params }).then(res => res.data);
+};
+
 exports.github = function github(code) {
   return client.post('/github', { code, workspaceId: config__workspace._id }).then(res => res.data);
 };

package/frontend/src/navbar/navbar.html

@@ -35,8 +35,8 @@
           </button>
         </div>
 
-        <div v-if="showFlyout" class="absolute right-0 z-10 top-[82%] w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
-          <!-- Active: "bg-gray-100 outline-none", Not Active: "" -->
+        <div v-if="showFlyout" class="absolute right-0 z-10 top-[90%] w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
+          <router-link to="team" v-if="canViewTeam" @click="showFlyout = false" class="cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200" role="menuitem" tabindex="-1" id="user-menu-item-2">Team</router-link>
           <span @click="logout" class="cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</span>
         </div>
       </div>

package/frontend/src/navbar/navbar.js

@@ -10,7 +10,7 @@ appendCSS(require('./navbar.css'));
 
 module.exports = app => app.component('navbar', {
   template: template,
-  props: ['user'],
+  props: ['user', 'roles'],
   data: () => ({ nodeEnv: null, showFlyout: false }),
   computed: {
     routeName() {
@@ -21,6 +21,9 @@ module.exports = app => app.component('navbar', {
     },
     hasAPIKey() {
       return mothership.hasAPIKey;
+    },
+    canViewTeam() {
+      return this.roles?.includes('owner') || this.roles?.includes('admin');
     }
   },
   async mounted() {

package/frontend/src/routes.js

@@ -25,5 +25,10 @@ module.exports = [
     path: '/dashboard/:dashboardId',
     name: 'dashboard',
     component: 'dashboard'
+  },
+  {
+    path: '/team',
+    name: 'team',
+    component: 'team'
   }
-];
+];

package/frontend/src/team/new-invitation/new-invitation.html

@@ -0,0 +1,42 @@
+<div class="p-1">
+  <form class="space-y-4">
+    <div class="text-lg font-bold">
+      New Invitation
+    </div>
+
+    <div>
+      <label for="githubUsername" class="block text-sm/6 font-medium text-gray-900">GitHub Username</label>
+      <div class="mt-2">
+        <input type="githubUsername" name="githubUsername" id="githubUsername" v-model="githubUsername" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-ultramarine-600 sm:text-sm/6" placeholder="johnsmith12">
+      </div>
+    </div>
+
+    <div>
+      <label for="email" class="block text-sm/6 font-medium text-gray-900">Email (Optional)</label>
+      <div class="mt-2">
+        <input type="email" name="email" id="email" v-model="email" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-ultramarine-600 sm:text-sm/6" placeholder="you@example.com">
+      </div>
+    </div>
+
+    <div>
+      <label for="location" class="block text-sm/6 font-medium text-gray-900">Role</label>
+      <div class="mt-2 grid grid-cols-1">
+        <select id="role" name="role" v-model="role" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
+          <option value="admin">Admin</option>
+          <option value="member">Member</option>
+          <option value="readonly">Read-only</option>
+        </select>
+        <svg class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+          <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+        </svg>
+      </div>
+    </div>
+
+    <async-button
+      type="submit"
+      @click="inviteToWorkspace"
+      class="inline-flex justify-center rounded-md border border-transparent bg-forest-green-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-forest-green-500 focus:outline-none focus:ring-2 focus:ring-forest-green-500 focus:ring-offset-2">
+      Submit
+    </async-button>
+  </form>
+</div>

package/frontend/src/team/new-invitation/new-invitation.js

@@ -0,0 +1,21 @@
+'use strict';
+
+const mothership = require('../../mothership');
+const template = require('./new-invitation.html');
+
+module.exports = app => app.component('new-invitation', {
+  template,
+  emits: ['close', 'invitationCreated'],
+  data: () => ({
+    githubUsername: '',
+    email: '',
+    role: null
+  }),
+  methods: {
+    async inviteToWorkspace() {
+      const { invitation } = await mothership.inviteToWorkspace({ githubUsername: this.githubUsername, email: this.email, roles: [this.role] });
+      this.$emit('invitationCreated', { invitation });
+      this.$emit('close');
+    }
+  }
+});

package/frontend/src/team/team.html

@@ -0,0 +1,86 @@
+<div class="mx-auto max-w-5xl py-6 px-2">
+  <div class="text-xl font-bold">
+    Current Members
+  </div>
+  <ul role="list" class="divide-y divide-gray-100">
+    <li class="flex justify-between gap-x-6 py-5" v-for="user in users">
+      <div class="flex min-w-0 gap-x-4">
+        <img class="size-12 flex-none rounded-full bg-gray-50" :src="user.picture ?? 'images/logo.svg'" alt="">
+        <div class="min-w-0 flex-auto">
+          <p class="text-sm/6 font-semibold text-gray-900">{{user.name}}</p>
+          <p class="mt-1 truncate text-xs/5 text-gray-500">{{user.email}}</p>
+        </div>
+      </div>
+      <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
+        <p class="text-sm/6 text-gray-900 capitalize">{{getRolesForUser(user).join(', ')}}</p>
+        <p class="mt-1 text-xs/5 text-gray-500">Last seen <time datetime="2023-01-23T13:23Z">3h ago</time></p>
+      </div>
+    </li>
+  </ul>
+  <div class="mt-6">
+    <div class="flex items-center justify-between">
+      <div class="text-xl font-bold">
+        Invitations
+      </div>
+      <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
+        <button
+          type="button"
+          @click="showNewInvitationModal = true"
+          class="block rounded-md bg-ultramarine-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">
+          New Invitation
+        </button>
+      </div>
+    </div>
+    <div class="mt-8 flow-root" v-if="invitations?.length > 0">
+      <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+        <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+          <table class="min-w-full divide-y divide-gray-300">
+            <thead>
+              <tr>
+                <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">GitHub Username</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Email</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Status</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Role</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200 bg-white">
+              <tr v-for="invitation in invitations">
+                <td class="whitespace-nowrap py-5 pl-4 pr-3 text-sm sm:pl-0">
+                  {{invitation.githubUsername}}
+                </td>
+                <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500">
+                  {{invitation.email}}
+                </td>
+                <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500">
+                  <span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-600/20">
+                    Pending
+                  </span>
+                </td>
+                <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500">
+                  {{invitation.roles.join(', ')}}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="invitations?.length === 0" class="mt-4">
+      <div class="text-center">
+        <svg class="mx-auto size-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+          <path vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
+        </svg>
+        <h3 class="mt-2 text-sm font-semibold text-gray-900">No invitations</h3>
+        <p class="mt-1 text-sm text-gray-500">You have no outstanding invitations</p>
+      </div>
+    </div>
+  </div>
+
+  <modal v-if="showNewInvitationModal">
+    <template v-slot:body>
+      <div class="modal-exit" @click="showNewInvitationModal = false">&times;</div>
+      <new-invitation @close="showNewInvitationModal = false" @invitationCreated="invitations.push($event.invitation)"></new-invitation>
+    </template>
+  </modal>
+</div>

package/frontend/src/team/team.js

@@ -0,0 +1,25 @@
+'use strict';
+
+const mothership = require('../mothership');
+const template = require('./team.html');
+
+module.exports = app => app.component('team', {
+  template,
+  data: () => ({
+    workspace: null,
+    users: null,
+    invitations: null,
+    showNewInvitationModal: false
+  }),
+  async mounted() {
+    const { workspace, users, invitations } = await mothership.getWorkspaceTeam();
+    this.workspace = workspace;
+    this.users = users;
+    this.invitations = invitations;
+  },
+  methods: {
+    getRolesForUser(user) {
+      return this.workspace.members.find(member => member.userId === user._id)?.roles ?? [];
+    }
+  }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.58",
+  "version": "0.0.60",
   "dependencies": {
     "archetype": "0.13.1",
     "csv-stringify": "6.3.0",

package/test.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fixed Navbars with Scrollable Table</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="h-screen flex flex-col">
+
+    <!-- Top-Level Navbar (Fixed) -->
+    <nav class="bg-blue-600 text-white p-4 fixed top-0 left-0 right-0 z-20">
+        Top-Level Navbar
+    </nav>
+
+    <!-- Side Navbar (Fixed) -->
+    <aside class="bg-gray-800 text-white w-64 p-4 fixed top-16 left-0 bottom-0 z-10">
+        Side Navbar
+    </aside>
+
+    <!-- Stacked Navigation Bar (Fixed Below Top Navbar) -->
+    <nav class="bg-gray-300 p-4 fixed top-16 left-64 right-0 z-20">
+        Stacked Navigation Bar
+    </nav>
+
+    <!-- Scrollable Table Container -->
+    <div class="flex-grow overflow-auto p-4 pl-64 pt-32 bg-gray-50" style="height: calc(100vh - 8rem);">
+        <div class="overflow-auto border border-gray-300" style="max-height: calc(100vh - 12rem);">
+            <table class="min-w-max border border-gray-300">
+                <thead class="bg-gray-300 sticky top-0 z-10">
+                    <tr>
+                        <!-- Generate many columns -->
+                        <script>
+                            for (let j = 0; j < 20; j++) {
+                                document.write(`<th class="border p-2 whitespace-nowrap">Header ${j + 1}</th>`);
+                            }
+                        </script>
+                    </tr>
+                </thead>
+                <tbody>
+                    <!-- Generate many rows -->
+                    <script>
+                        for (let i = 0; i < 100; i++) {
+                            document.write(`<tr class="border">`);
+                            for (let j = 0; j < 20; j++) {
+                                document.write(`<td class="border p-2 whitespace-nowrap">Row ${i + 1} Col ${j + 1}</td>`);
+                            }
+                            document.write(`</tr>`);
+                        }
+                    </script>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+</body>
+</html>