@mongoosejs/studio 0.0.59 → 0.0.61

package/frontend/public/app.js

@@ -1794,8 +1794,25 @@ module.exports = app => app.component('models', {
         }).map(key => this.selectedPaths[key]);
       }
     },
+    openFieldSelection() {
+      if (this.$route.query?.fields) {
+        this.selectedPaths.length = 0;
+        console.log('there are fields in play', this.$route.query.fields)
+        const fields = this.$route.query.fields.split(',');
+        for (let i = 0; i < fields.length; i++) {
+          this.selectedPaths.push({ path: fields[i] });
+        }
+      } else {
+        this.selectedPaths = [{ path: '_id' }];
+      }
+      this.shouldShowFieldModal = true;
+    },
     filterDocuments() {
-      this.filteredPaths = [...this.selectedPaths];
+      if (this.selectedPaths.length > 0) {
+        this.filteredPaths = [...this.selectedPaths];
+      } else {
+        this.filteredPaths.length = 0;
+      }
       this.shouldShowFieldModal = false;
       const selectedParams = this.filteredPaths.map(x => x.path).join(',');
       this.query.fields = selectedParams;
@@ -1864,10 +1881,10 @@ module.exports = app => app.component('models', {
 
 const axios = __webpack_require__(/*! axios */ "./node_modules/axios/dist/browser/axios.cjs");
 const client = axios.create({
-  baseURL: 'http://localhost:8888/.netlify/functions'
+  baseURL: 'https://mongoose-js.netlify.app/.netlify/functions'
 });
 
-client.hasAPIKey = !!'http://localhost:8888/.netlify/functions';
+client.hasAPIKey = !!'https://mongoose-js.netlify.app/.netlify/functions';
 
 client.interceptors.request.use(req => {
   const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
@@ -1883,19 +1900,27 @@ exports.githubLogin = function githubLogin() {
 };
 
 exports.getWorkspaceTeam = function getWorkspaceTeam() {
-  return client.post('/getWorkspaceTeam', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-06T22:24:05.260Z","__v":0,"name":"Zevo DEV"}._id }).then(res => res.data);
+  return client.post('/getWorkspaceTeam', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-17T21:53:20.548Z","__v":2,"name":"Zevo DEV","subscriptionTier":"pro","stripeCustomerId":"cus_RnCdSdRYLJQl4Z","stripeSubscriptionId":"sub_1QtcEgIIV4Jx8vgxY7z8cKeC"}._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"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-06T22:24:05.260Z","__v":0,"name":"Zevo DEV"}._id, ...params }).then(res => res.data);
+exports.getWorkspaceCustomerPortalLink = function getWorkspaceCustomerPortalLink(params) {
+  return client.post('/getWorkspaceCustomerPortalLink', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-17T21:53:20.548Z","__v":2,"name":"Zevo DEV","subscriptionTier":"pro","stripeCustomerId":"cus_RnCdSdRYLJQl4Z","stripeSubscriptionId":"sub_1QtcEgIIV4Jx8vgxY7z8cKeC"}._id, ...params }).then(res => res.data);
 };
 
 exports.github = function github(code) {
-  return client.post('/github', { code, workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-06T22:24:05.260Z","__v":0,"name":"Zevo DEV"}._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"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-17T21:53:20.548Z","__v":2,"name":"Zevo DEV","subscriptionTier":"pro","stripeCustomerId":"cus_RnCdSdRYLJQl4Z","stripeSubscriptionId":"sub_1QtcEgIIV4Jx8vgxY7z8cKeC"}._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"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-17T21:53:20.548Z","__v":2,"name":"Zevo DEV","subscriptionTier":"pro","stripeCustomerId":"cus_RnCdSdRYLJQl4Z","stripeSubscriptionId":"sub_1QtcEgIIV4Jx8vgxY7z8cKeC"}._id, ...params }).then(res => res.data);
 };
 
 exports.me = function me() {
-  return client.post('/me', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-06T22:24:05.260Z","__v":0,"name":"Zevo DEV"}._id }).then(res => res.data);
+  return client.post('/me', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-17T21:53:20.548Z","__v":2,"name":"Zevo DEV","subscriptionTier":"pro","stripeCustomerId":"cus_RnCdSdRYLJQl4Z","stripeSubscriptionId":"sub_1QtcEgIIV4Jx8vgxY7z8cKeC"}._id }).then(res => res.data);
+};
+
+exports.removeFromWorkspace = function removeFromWorkspace(params) {
+  return client.post('/removeFromWorkspace', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-17T21:53:20.548Z","__v":2,"name":"Zevo DEV","subscriptionTier":"pro","stripeCustomerId":"cus_RnCdSdRYLJQl4Z","stripeSubscriptionId":"sub_1QtcEgIIV4Jx8vgxY7z8cKeC"}._id, ...params }).then(res => res.data);
 };
 
 exports.hasAPIKey = client.hasAPIKey;
@@ -2042,7 +2067,7 @@ module.exports = app => app.component('splash', {
   data: () => ({ error: null }),
   computed: {
     workspaceName() {
-      return {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-06T22:24:05.260Z","__v":0,"name":"Zevo DEV"}.name;
+      return {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-17T21:53:20.548Z","__v":2,"name":"Zevo DEV","subscriptionTier":"pro","stripeCustomerId":"cus_RnCdSdRYLJQl4Z","stripeSubscriptionId":"sub_1QtcEgIIV4Jx8vgxY7z8cKeC"}.name;
     }
   },
   async mounted() {
@@ -2119,7 +2144,8 @@ module.exports = app => app.component('team', {
     workspace: null,
     users: null,
     invitations: null,
-    showNewInvitationModal: false
+    showNewInvitationModal: false,
+    showRemoveModal: null
   }),
   async mounted() {
     const { workspace, users, invitations } = await mothership.getWorkspaceTeam();
@@ -2127,9 +2153,32 @@ module.exports = app => app.component('team', {
     this.users = users;
     this.invitations = invitations;
   },
+  computed: {
+    paymentLink() {
+      return 'https://buy.stripe.com/test_eVaeYa2jC7565Lq7ss?client_reference_id=' + this.workspace?._id;
+    }
+  },
   methods: {
     getRolesForUser(user) {
       return this.workspace.members.find(member => member.userId === user._id)?.roles ?? [];
+    },
+    async removeFromWorkspace() {
+      const { workspace, users } = await mothership.removeFromWorkspace({ userId: this.showRemoveModal._id });
+      this.workspace = workspace;
+      this.users = users;
+      this.showRemoveModal = false;
+    },
+    async getWorkspaceCustomerPortalLink() {
+      const { url } = await mothership.getWorkspaceCustomerPortalLink();
+      window.open(url, '_blank');
+
+      const interval = setInterval(async () => {
+        const { workspace } = await mothership.getWorkspaceTeam();
+        if (workspace.subscriptionTier) {
+          this.workspace = workspace;
+          clearInterval(interval);
+        }
+      }, 15000);
     }
   }
 });
@@ -3206,7 +3255,7 @@ module.exports = "<div class=\"list-subdocument tooltip\">\n  <pre>\n    <code r
 /***/ ((module) => {
 
 "use strict";
-module.exports = "/** Vue modal */\n\n.modal-mask {\n  position: fixed;\n  z-index: 9998;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: table;\n  transition: opacity 0.3s ease;\n}\n\n.modal-wrapper {\n  display: table-cell;\n  vertical-align: middle;\n}\n\n.modal-container {\n  width: 600px;\n  margin: 0px auto;\n  padding: 20px 30px;\n  padding-bottom: 40px;\n  background-color: #fff;\n  border-radius: 2px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);\n  transition: all 0.3s ease;\n  font-family: Helvetica, Arial, sans-serif;\n  position: relative;\n}\n\n.modal-header {\n  margin-top: 0;\n  font-size: 18px;\n  font-weight: bold;\n}\n\n.modal-header-success {\n  color: #42b983;\n}\n\n.modal-header-error {\n  color: #ff0000;\n}\n\n.modal-body {\n  margin: 20px 0;\n  max-height: calc(100vh - 40px - 60px - 10px);\n  overflow: auto;\n}\n\n.modal__button--default {\n  float: right;\n}\n\n/*\n * The following styles are auto-applied to elements with\n * transition=\"modal\" when their visibility is toggled\n * by Vue.js.\n *\n * You can easily play with the modal transition by editing\n * these styles.\n */\n\n.modal-enter {\n  opacity: 0;\n}\n\n.modal-leave-active {\n  opacity: 0;\n}\n\n.modal-enter .modal-container,\n.modal-leave-active .modal-container {\n  -webkit-transform: scale(1.1);\n  transform: scale(1.1);\n}\n\n.modal-container .modal-exit {\n  position: absolute;\n  right: 0.25em;\n  top: 0.25em;\n  cursor: pointer;\n  font-size: 1.25em;\n  height: 1.25em;\n  width: 1.25em;\n  border-radius: 100%;\n  border: 1px solid #ddd;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-bottom: 0.25em;\n}\n";
+module.exports = "/** Vue modal */\n\n.modal-mask {\n  position: fixed;\n  z-index: 9998;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: table;\n  transition: opacity 0.3s ease;\n}\n\n.modal-wrapper {\n  display: table-cell;\n  vertical-align: middle;\n}\n\n.modal-container {\n  width: 600px;\n  margin: 0px auto;\n  padding: 20px 30px;\n  padding-bottom: 40px;\n  background-color: #fff;\n  border-radius: 2px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);\n  transition: all 0.3s ease;\n  font-family: Helvetica, Arial, sans-serif;\n  position: relative;\n}\n\n.modal-header {\n  margin-top: 0;\n  font-size: 18px;\n  font-weight: bold;\n}\n\n.modal-header-success {\n  color: #42b983;\n}\n\n.modal-header-error {\n  color: #ff0000;\n}\n\n.modal-body {\n  margin: 20px 0;\n  max-height: calc(100vh - 40px - 60px - 10px);\n  overflow: auto;\n}\n\n.modal__button--default {\n  float: right;\n}\n\n/*\n * The following styles are auto-applied to elements with\n * transition=\"modal\" when their visibility is toggled\n * by Vue.js.\n *\n * You can easily play with the modal transition by editing\n * these styles.\n */\n\n.modal-enter {\n  opacity: 0;\n}\n\n.modal-leave-active {\n  opacity: 0;\n}\n\n.modal-enter .modal-container,\n.modal-leave-active .modal-container {\n  -webkit-transform: scale(1.1);\n  transform: scale(1.1);\n}\n\n.modal-container .modal-exit {\n  position: absolute;\n  right: 0.25em;\n  top: 0.25em;\n  cursor: pointer;\n  font-size: 1.25em;\n  height: 1.25em;\n  width: 1.25em;\n  border-radius: 100%;\n  border: 1px solid #ddd;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-bottom: 0.25em;\n}\n\n.modal-container .modal-exit:hover {\n  background-color: #f1f5ff;\n}\n";
 
 /***/ }),
 
@@ -3228,7 +3277,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";
 
 /***/ }),
 
@@ -3239,7 +3288,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 border border-gray-300 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=\"openFieldSelection\"\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  </div>\n\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\" class=\"w-5 flex items-center\">\n        <input  class=\"mt-0 h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600 accent-sky-600\" type=\"checkbox\" :id=\"'path.path'+index\" @change=\"addOrRemove(path)\" :value=\"path.path\" :checked=\"isSelected(path.path)\" />\n        <div class=\"ml-2 text-gray-700 grow shrink text-left\">\n          <label :for=\"'path' + index\">{{path.path}}</label>\n        </div>\n      </div>\n      <div class=\"mt-4 flex gap-2\">\n        <button type=\"submit\" @click=\"filterDocuments()\" class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 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-teal-600\">Filter Selection</button>\n        <button type=\"submit\" @click=\"deselectAll()\" class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">Deselect All</button>\n        <button type=\"submit\" @click=\"resetDocuments()\" class=\"rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\" >Cancel</button>\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";
 
 /***/ }),
 
@@ -3261,7 +3310,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-[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";
+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";
 
 /***/ }),
 
@@ -3294,7 +3343,7 @@ module.exports = "<div class=\"p-1\">\n  <form class=\"space-y-4\">\n    <div cl
 /***/ ((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";
+module.exports = "<div class=\"mx-auto max-w-5xl py-6 px-2 flex flex-col gap-8\">\n  <div>\n    <div class=\"text-xl font-bold\">\n      Subscription Details\n    </div>\n    <div v-if=\"workspace && workspace.subscriptionTier\" class=\"mt-4 flex justify-between items-center\">\n      <div>\n        <span class=\"font-bold\">Tier:</span> {{workspace.subscriptionTier ?? 'No subscription'}}\n      </div>\n      <div>\n        <async-button\n          type=\"submit\"\n          @click=\"getWorkspaceCustomerPortalLink\"\n          class=\"inline-flex items-center justify-center rounded-md border border-transparent bg-ultramarine-600 py-1 px-2 text-sm font-medium text-white shadow-sm hover:bg-ultramarine-500 focus:outline-none focus:ring-2 focus:ring-forest-green-500 focus:ring-offset-2\">\n          View in Stripe\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-4 h-4 ml-1\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25\" />\n          </svg>\n        </async-button>\n      </div>\n    </div>\n    <div v-if=\"workspace && !workspace.subscriptionTier\" class=\"mt-4 flex justify-between items-center\">\n      <div>\n        <span class=\"font-bold\">No active subscription</span>\n        <div class=\"text-sm text-gray-700\">\n          You won't be able to invite your team until you activate a subscription\n        </div>\n      </div>\n      <div>\n        <a\n          :href=\"paymentLink\"\n          target=\"_blank\"\n          class=\"inline-flex items-center justify-center rounded-md border border-transparent bg-ultramarine-600 py-1 px-2 text-sm font-medium text-white shadow-sm hover:bg-ultramarine-500 focus:outline-none focus:ring-2 focus:ring-ultramarine-500 focus:ring-offset-2\">\n          Subscribe With Stripe\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-4 h-4 ml-1\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25\" />\n          </svg>\n        </a>\n      </div>\n    </div>\n  </div>\n  <div>\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\">\n              {{user.name}}\n              <span v-if=\"user.isFreeUser\" class=\"inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20\">Free</span>\n            </p>\n            <p class=\"mt-1 truncate text-xs/5 text-gray-500\">{{user.email ?? 'No 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          <div class=\"flex gap-3\">\n            <p class=\"mt-1 text-xs/5 text-gray-500 cursor-pointer\">\n              Edit\n            </p>\n            <p class=\"mt-1 text-xs/5 text-valencia-500 cursor-pointer\" @click=\"showRemoveModal = user\">\n              Remove\n            </p>\n          </div>\n        </div>\n      </li>\n    </ul>\n  </div>\n  <div>\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          :disabled=\"workspace && !workspace.subscriptionTier\"\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 disabled:bg-gray-500 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n          New Invitation\n          <svg class=\"inline w-4 h-4 ml-1\" v-if=\"workspace && !workspace.subscriptionTier\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path fill-rule=\"evenodd\" d=\"M12 1.5a5.25 5.25 0 00-5.25 5.25v3a3 3 0 00-3 3v6.75a3 3 0 003 3h10.5a3 3 0 003-3v-6.75a3 3 0 00-3-3v-3c0-2.9-2.35-5.25-5.25-5.25zm3.75 8.25v-3a3.75 3.75 0 10-7.5 0v3h7.5z\" clip-rule=\"evenodd\" />\n          </svg>\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\n  <modal v-if=\"showRemoveModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"showRemoveModal = false\">&times;</div>\n      <div>\n        Are you sure you want to remove user <span class=\"font-bold\">{{showRemoveModal.githubUsername}}</span> from this workspace?\n      </div>\n      <div class=\"mt-6 grid grid-cols-2 gap-4\">\n        <async-button\n          @click=\"removeFromWorkspace(showConfirmDeleteModal)\"\n          class=\"border-0 mt-0 flex w-full items-center justify-center gap-3 rounded-md bg-valencia-500 hover:bg-valencia-400 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-400\">\n          <span class=\"text-sm font-semibold leading-6\">Yes, Remove</span>\n        </async-button>\n\n        <span @click=\"showRemoveModal = null\" class=\"cursor-pointer flex w-full items-center justify-center gap-3 rounded-md bg-slate-500 hover:bg-slate-400 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-400\">\n          <span class=\"text-sm font-semibold leading-6\">Cancel</span>\n        </span>\n      </div>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ }),
 

package/frontend/public/style.css

@@ -14,10 +14,6 @@ a {
   font-weight: bold !important;
 }
 
-input {
-  outline: #666 solid 1px;
-}
-
 .tooltip {
   position: relative;
   display: inline-block;

package/frontend/public/tw.css

@@ -686,6 +686,14 @@ video {
   margin-bottom: 1rem;
 }
 
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
 .ml-3 {
   margin-left: 0.75rem;
 }
@@ -702,6 +710,10 @@ video {
   margin-right: 0.5rem;
 }
 
+.mt-0 {
+  margin-top: 0px;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -777,6 +789,10 @@ video {
   height: 2rem;
 }
 
+.h-4 {
+  height: 1rem;
+}
+
 .h-48 {
   height: 12rem;
 }
@@ -797,6 +813,10 @@ video {
   height: 300px;
 }
 
+.h-\[42px\] {
+  height: 42px;
+}
+
 .h-\[calc\(100vh-55px\)\] {
   height: calc(100vh - 55px);
 }
@@ -809,6 +829,10 @@ video {
   max-height: 50vh;
 }
 
+.w-4 {
+  width: 1rem;
+}
+
 .w-48 {
   width: 12rem;
 }
@@ -895,6 +919,10 @@ video {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -927,10 +955,18 @@ video {
   gap: 0.5rem;
 }
 
+.gap-3 {
+  gap: 0.75rem;
+}
+
 .gap-4 {
   gap: 1rem;
 }
 
+.gap-8 {
+  gap: 2rem;
+}
+
 .gap-x-4 {
   -moz-column-gap: 1rem;
        column-gap: 1rem;
@@ -1008,10 +1044,6 @@ video {
   overflow-x: auto;
 }
 
-.overflow-y-auto {
-  overflow-y: auto;
-}
-
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1135,6 +1167,11 @@ video {
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
 }
 
+.bg-gray-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
+
 .bg-gray-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
@@ -1170,6 +1207,11 @@ video {
   background-color: rgb(241 245 249 / var(--tw-bg-opacity));
 }
 
+.bg-slate-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(100 116 139 / var(--tw-bg-opacity));
+}
+
 .bg-slate-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(71 85 105 / var(--tw-bg-opacity));
@@ -1194,6 +1236,11 @@ video {
   background-color: rgb(24 35 255 / var(--tw-bg-opacity));
 }
 
+.bg-valencia-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 73 73 / var(--tw-bg-opacity));
+}
+
 .bg-valencia-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(202 56 56 / var(--tw-bg-opacity));
@@ -1458,6 +1505,11 @@ video {
   color: rgb(153 27 27 / var(--tw-text-opacity));
 }
 
+.text-sky-600 {
+  --tw-text-opacity: 1;
+  color: rgb(2 132 199 / var(--tw-text-opacity));
+}
+
 .text-sky-800 {
   --tw-text-opacity: 1;
   color: rgb(7 89 133 / var(--tw-text-opacity));
@@ -1468,11 +1520,20 @@ video {
   color: rgb(0 168 165 / var(--tw-text-opacity));
 }
 
+.text-valencia-500 {
+  --tw-text-opacity: 1;
+  color: rgb(220 73 73 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.accent-sky-600 {
+  accent-color: #0284c7;
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -1529,6 +1590,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);
 }
@@ -1537,10 +1602,6 @@ video {
   --tw-ring-color: rgb(22 163 74 / 0.2);
 }
 
-.ring-gray-600\/20 {
-  --tw-ring-color: rgb(75 85 99 / 0.2);
-}
-
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1603,6 +1664,11 @@ video {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
@@ -1618,6 +1684,11 @@ video {
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-slate-400:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(148 163 184 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-slate-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(100 116 139 / var(--tw-bg-opacity));
@@ -1643,6 +1714,11 @@ video {
   background-color: rgb(63 83 255 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-valencia-400:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(235 126 126 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-valencia-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(220 73 73 / var(--tw-bg-opacity));
@@ -1693,6 +1769,12 @@ 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-2: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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1724,11 +1806,30 @@ video {
   --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-sky-600:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(2 132 199 / 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-ultramarine-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(63 83 255 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-white:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-offset-0:focus {
+  --tw-ring-offset-width: 0px;
+}
+
 .focus\:ring-offset-2:focus {
   --tw-ring-offset-width: 2px;
 }
@@ -1757,10 +1858,18 @@ video {
   outline-color: #16a34a;
 }
 
+.focus-visible\:outline-orange-400:focus-visible {
+  outline-color: #fb923c;
+}
+
 .focus-visible\:outline-red-600:focus-visible {
   outline-color: #dc2626;
 }
 
+.focus-visible\:outline-slate-400:focus-visible {
+  outline-color: #94a3b8;
+}
+
 .focus-visible\:outline-slate-600:focus-visible {
   outline-color: #475569;
 }
@@ -1773,6 +1882,15 @@ video {
   outline-color: #1823ff;
 }
 
+.disabled\:cursor-not-allowed:disabled {
+  cursor: not-allowed;
+}
+
+.disabled\:bg-gray-500:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+}
+
 @media (min-width: 640px) {
   .sm\:-mx-6 {
     margin-left: -1.5rem;

package/frontend/src/modal/modal.css

@@ -92,3 +92,7 @@
   justify-content: center;
   padding-bottom: 0.25em;
 }
+
+.modal-container .modal-exit:hover {
+  background-color: #f1f5ff;
+}

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 border border-gray-300 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>
@@ -47,7 +47,7 @@
             Create
           </button>
           <button
-            @click="shouldShowFieldModal = true"
+            @click="openFieldSelection"
             type="button"
             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">
             Fields
@@ -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,39 @@
         <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>
 
+  <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" class="w-5 flex items-center">
+        <input  class="mt-0 h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600 accent-sky-600" type="checkbox" :id="'path.path'+index" @change="addOrRemove(path)" :value="path.path" :checked="isSelected(path.path)" />
+        <div class="ml-2 text-gray-700 grow shrink text-left">
+          <label :for="'path' + index">{{path.path}}</label>
         </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>
+      </div>
+      <div class="mt-4 flex gap-2">
+        <button type="submit" @click="filterDocuments()" class="rounded-md bg-ultramarine-600 px-2.5 py-1.5 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-teal-600">Filter Selection</button>
+        <button type="submit" @click="deselectAll()" class="rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">Deselect All</button>
+        <button type="submit" @click="resetDocuments()" class="rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600" >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/models/models.js

@@ -211,8 +211,25 @@ module.exports = app => app.component('models', {
         }).map(key => this.selectedPaths[key]);
       }
     },
+    openFieldSelection() {
+      if (this.$route.query?.fields) {
+        this.selectedPaths.length = 0;
+        console.log('there are fields in play', this.$route.query.fields)
+        const fields = this.$route.query.fields.split(',');
+        for (let i = 0; i < fields.length; i++) {
+          this.selectedPaths.push({ path: fields[i] });
+        }
+      } else {
+        this.selectedPaths = [{ path: '_id' }];
+      }
+      this.shouldShowFieldModal = true;
+    },
     filterDocuments() {
-      this.filteredPaths = [...this.selectedPaths];
+      if (this.selectedPaths.length > 0) {
+        this.filteredPaths = [...this.selectedPaths];
+      } else {
+        this.filteredPaths.length = 0;
+      }
       this.shouldShowFieldModal = false;
       const selectedParams = this.filteredPaths.map(x => x.path).join(',');
       this.query.fields = selectedParams;

package/frontend/src/mothership.js

@@ -24,16 +24,24 @@ 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.getWorkspaceCustomerPortalLink = function getWorkspaceCustomerPortalLink(params) {
+  return client.post('/getWorkspaceCustomerPortalLink', { 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);
 };
 
+exports.inviteToWorkspace = function inviteToWorkspace(params) {
+  return client.post('/inviteToWorkspace', { workspaceId: config__workspace._id, ...params }).then(res => res.data);
+};
+
 exports.me = function me() {
   return client.post('/me', { workspaceId: config__workspace._id }).then(res => res.data);
 };
 
+exports.removeFromWorkspace = function removeFromWorkspace(params) {
+  return client.post('/removeFromWorkspace', { workspaceId: config__workspace._id, ...params }).then(res => res.data);
+};
+
 exports.hasAPIKey = client.hasAPIKey;

package/frontend/src/navbar/navbar.html

@@ -36,7 +36,7 @@
         </div>
 
         <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>
+          <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/team/team.html

@@ -1,23 +1,75 @@
-<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 class="mx-auto max-w-5xl py-6 px-2 flex flex-col gap-8">
+  <div>
+    <div class="text-xl font-bold">
+      Subscription Details
+    </div>
+    <div v-if="workspace && workspace.subscriptionTier" class="mt-4 flex justify-between items-center">
+      <div>
+        <span class="font-bold">Tier:</span> {{workspace.subscriptionTier ?? 'No subscription'}}
+      </div>
+      <div>
+        <async-button
+          type="submit"
+          @click="getWorkspaceCustomerPortalLink"
+          class="inline-flex items-center justify-center rounded-md border border-transparent bg-ultramarine-600 py-1 px-2 text-sm font-medium text-white shadow-sm hover:bg-ultramarine-500 focus:outline-none focus:ring-2 focus:ring-forest-green-500 focus:ring-offset-2">
+          View in Stripe
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 ml-1">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+          </svg>
+        </async-button>
+      </div>
+    </div>
+    <div v-if="workspace && !workspace.subscriptionTier" class="mt-4 flex justify-between items-center">
+      <div>
+        <span class="font-bold">No active subscription</span>
+        <div class="text-sm text-gray-700">
+          You won't be able to invite your team until you activate a subscription
         </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>
+        <a
+          :href="paymentLink"
+          target="_blank"
+          class="inline-flex items-center justify-center rounded-md border border-transparent bg-ultramarine-600 py-1 px-2 text-sm font-medium text-white shadow-sm hover:bg-ultramarine-500 focus:outline-none focus:ring-2 focus:ring-ultramarine-500 focus:ring-offset-2">
+          Subscribe With Stripe
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 ml-1">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+          </svg>
+        </a>
       </div>
-    </li>
-  </ul>
-  <div class="mt-6">
+    </div>
+  </div>
+  <div>
+    <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}}
+              <span v-if="user.isFreeUser" class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">Free</span>
+            </p>
+            <p class="mt-1 truncate text-xs/5 text-gray-500">{{user.email ?? 'No 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>
+          <div class="flex gap-3">
+            <p class="mt-1 text-xs/5 text-gray-500 cursor-pointer">
+              Edit
+            </p>
+            <p class="mt-1 text-xs/5 text-valencia-500 cursor-pointer" @click="showRemoveModal = user">
+              Remove
+            </p>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <div>
     <div class="flex items-center justify-between">
       <div class="text-xl font-bold">
         Invitations
@@ -26,8 +78,12 @@
         <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">
+          :disabled="workspace && !workspace.subscriptionTier"
+          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 disabled:bg-gray-500 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">
           New Invitation
+          <svg class="inline w-4 h-4 ml-1" v-if="workspace && !workspace.subscriptionTier" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+            <path fill-rule="evenodd" d="M12 1.5a5.25 5.25 0 00-5.25 5.25v3a3 3 0 00-3 3v6.75a3 3 0 003 3h10.5a3 3 0 003-3v-6.75a3 3 0 00-3-3v-3c0-2.9-2.35-5.25-5.25-5.25zm3.75 8.25v-3a3.75 3.75 0 10-7.5 0v3h7.5z" clip-rule="evenodd" />
+          </svg>
         </button>
       </div>
     </div>
@@ -83,4 +139,24 @@
       <new-invitation @close="showNewInvitationModal = false" @invitationCreated="invitations.push($event.invitation)"></new-invitation>
     </template>
   </modal>
+
+  <modal v-if="showRemoveModal">
+    <template v-slot:body>
+      <div class="modal-exit" @click="showRemoveModal = false">&times;</div>
+      <div>
+        Are you sure you want to remove user <span class="font-bold">{{showRemoveModal.githubUsername}}</span> from this workspace?
+      </div>
+      <div class="mt-6 grid grid-cols-2 gap-4">
+        <async-button
+          @click="removeFromWorkspace(showConfirmDeleteModal)"
+          class="border-0 mt-0 flex w-full items-center justify-center gap-3 rounded-md bg-valencia-500 hover:bg-valencia-400 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-400">
+          <span class="text-sm font-semibold leading-6">Yes, Remove</span>
+        </async-button>
+
+        <span @click="showRemoveModal = null" class="cursor-pointer flex w-full items-center justify-center gap-3 rounded-md bg-slate-500 hover:bg-slate-400 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-400">
+          <span class="text-sm font-semibold leading-6">Cancel</span>
+        </span>
+      </div>
+    </template>
+  </modal>
 </div>

package/frontend/src/team/team.js

@@ -9,7 +9,8 @@ module.exports = app => app.component('team', {
     workspace: null,
     users: null,
     invitations: null,
-    showNewInvitationModal: false
+    showNewInvitationModal: false,
+    showRemoveModal: null
   }),
   async mounted() {
     const { workspace, users, invitations } = await mothership.getWorkspaceTeam();
@@ -17,9 +18,24 @@ module.exports = app => app.component('team', {
     this.users = users;
     this.invitations = invitations;
   },
+  computed: {
+    paymentLink() {
+      return 'https://buy.stripe.com/test_eVaeYa2jC7565Lq7ss?client_reference_id=' + this.workspace?._id;
+    }
+  },
   methods: {
     getRolesForUser(user) {
       return this.workspace.members.find(member => member.userId === user._id)?.roles ?? [];
+    },
+    async removeFromWorkspace() {
+      const { workspace, users } = await mothership.removeFromWorkspace({ userId: this.showRemoveModal._id });
+      this.workspace = workspace;
+      this.users = users;
+      this.showRemoveModal = false;
+    },
+    async getWorkspaceCustomerPortalLink() {
+      const { url } = await mothership.getWorkspaceCustomerPortalLink();
+      window.open(url, '_self');
     }
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.59",
+  "version": "0.0.61",
   "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>