Release 0.101.49

bump version
update lint
2024-10-23 02:08:56 +00:00 · 2024-10-23 02:08:33 +00:00 · 2024-10-23 01:16:18 +00:00 · 2024-10-23 01:14:36 +00:00 · 2024-10-22 07:05:43 +00:00 · 2024-10-21 21:03:12 +00:00
143 changed files with 15635 additions and 11364 deletions
--- a/.devcontainer/docker-compose.yml
+++ b/.devcontainer/docker-compose.yml
@@ -1,12 +1,11 @@
-version: '3.4'
+version: '3.7'
 services:
  app-dev:
    container_name: trmm-app-dev
-    image: node:16-alpine
+    image: node:20-alpine
    restart: always
-    command: /bin/sh -c "npm install --cache ~/.npm && npm run serve"
+    command: /bin/sh -c "npm install --cache ~/.npm && npm i -g @quasar/cli && npm run serve"
    user: 1000:1000
    working_dir: /workspace/web
    volumes:
      - ..:/workspace:cached
--- a/.github/workflows/build-release.yml
+++ b/.github/workflows/build-release.yml
@@ -11,11 +11,11 @@ jobs:
    name: Build web
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
        with:
-          node-version: 16
+          node-version: "20.18.0"
      - run: touch env-config.js
@@ -29,7 +29,6 @@ jobs:
        run: tar -czvf trmm-web-${{github.ref_name}}.tar.gz dist/
      - name: Release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v2
        with:
          files: trmm-web-${{github.ref_name}}.tar.gz
--- a/.github/workflows/frontend-linting.yml
+++ b/.github/workflows/frontend-linting.yml
@@ -9,11 +9,11 @@ jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
        with:
-          node-version: 16
+          node-version: "20.18.0"
      - run: npm install
      - name: Run Prettier formatting
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -5,7 +5,7 @@
    "esbenp.prettier-vscode",
    "editorconfig.editorconfig",
    "vue.volar",
-    "wayou.vscode-todo-highlight",
+    "wayou.vscode-todo-highlight"
  ],
  "unwantedRecommendations": [
    "octref.vetur",
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,18 +4,17 @@
  "editor.formatOnSave": true,
  "[vue][javascript][typescript][javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.codeActionsOnSave": ["source.fixAll.eslint"],
+    "editor.codeActionsOnSave": ["source.fixAll.eslint"]
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
  "typescript.tsdk": "node_modules/typescript/lib",
  "files.watcherExclude": {
    "files.watcherExclude": {
      "**/.git/objects/**": true,
      "**/.git/subtree-cache/**": true,
      "**/node_modules/": true,
      "/node_modules/**": true,
      "**/env/": true,
-      "/env/**": true,
+      "/env/**": true
-    }
+  },
-  }
+  "prettier.prettierPath": "./node_modules/prettier"
 }
--- a/index.html
+++ b/index.html
@@ -1,24 +1,22 @@
 <!DOCTYPE html>
 <html>
  <head>
    <title><%= productName %></title>
-<head>
+    <meta charset="utf-8" />
-  <title>
+    <meta name="robots" content="noindex" />
-    <%= productName %>
+    <meta name="description" content="<%= productDescription %>" />
-  </title>
+    <meta name="format-detection" content="telephone=no" />
-
+    <meta name="msapplication-tap-highlight" content="no" />
-  <meta charset="utf-8" />
+    <meta
-  <meta name="robots" content="noindex" />
+      name="viewport"
-  <meta name="description" content="<%= productDescription %>" />
+      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
-  <meta name="format-detection" content="telephone=no" />
+    />
-  <meta name="msapplication-tap-highlight" content="no" />
+    <link rel="icon" type="image/ico" href="favicon.ico" />
-  <meta name="viewport"
+    <script src="/env-config.js"></script>
-    content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>" />
+  </head>
  <link rel="icon" type="image/ico" href="favicon.ico" />
  <script src="/env-config.js"></script>
 </head>
 <body>
  <!-- quasar:entry-point -->
 </body>
  <body>
    <!-- quasar:entry-point -->
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "web",
-  "version": "0.100.9-dev",
+  "version": "0.101.49",
  "private": true,
  "productName": "Tactical RMM",
  "scripts": {
@@ -10,31 +10,38 @@
    "format": "prettier --write \"**/*.{js,ts,vue,,html,md,json}\" --ignore-path .gitignore"
  },
  "dependencies": {
-    "@quasar/extras": "1.15.1",
+    "@quasar/extras": "1.16.12",
-    "apexcharts": "3.35.4",
+    "@vueuse/core": "11.1.0",
-    "axios": "0.27.2",
+    "@vueuse/integrations": "11.1.0",
-    "dotenv": "16.0.1",
+    "@vueuse/shared": "11.1.0",
-    "qrcode.vue": "3.3.3",
+    "apexcharts": "3.54.1",
-    "quasar": "2.7.7",
+    "axios": "1.7.7",
-    "vue": "3.2.37",
+    "dotenv": "16.4.5",
-    "vue3-ace-editor": "2.2.2",
+    "monaco-editor": "0.50.0",
-    "vue3-apexcharts": "1.4.1",
+    "pinia": "2.2.4",
    "qrcode": "1.5.4",
    "quasar": "2.17.1",
    "vue": "3.5.12",
    "vue-router": "4.4.5",
    "vue3-apexcharts": "1.7.0",
    "vuedraggable": "4.1.0",
-    "vue-router": "4.1.3",
+    "vuex": "4.1.0",
-    "vuex": "4.0.2"
+    "@xterm/xterm": "5.5.0",
    "@xterm/addon-fit": "0.10.0",
    "yaml": "2.6.0"
  },
  "devDependencies": {
-    "@quasar/cli": "^1.3.2",
+    "@intlify/unplugin-vue-i18n": "4.0.0",
-    "@intlify/vite-plugin-vue-i18n": "^6.0.0",
+    "@quasar/app-vite": "1.10.2",
-    "@quasar/app-vite": "^1.0.6",
+    "@quasar/cli": "2.4.1",
-    "@types/node": "^18.6.5",
+    "@types/node": "22.7.5",
-    "@typescript-eslint/eslint-plugin": "^5.33.0",
+    "@typescript-eslint/eslint-plugin": "7.16.0",
-    "@typescript-eslint/parser": "^5.33.0",
+    "@typescript-eslint/parser": "7.16.0",
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "10.4.20",
-    "eslint": "^8.21.0",
+    "eslint": "8.57.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-vue": "^8.5.0",
+    "eslint-plugin-vue": "8.7.1",
-    "prettier": "^2.7.1",
+    "prettier": "3.3.3",
-    "typescript": "^4.7.4"
+    "typescript": "5.6.2"
  }
-}
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -4,18 +4,18 @@
 module.exports = {
  plugins: [
    // https://github.com/postcss/autoprefixer
-    require('autoprefixer')({
+    require("autoprefixer")({
      overrideBrowserslist: [
-        'last 4 Chrome versions',
+        "last 4 Chrome versions",
-        'last 4 Firefox versions',
+        "last 4 Firefox versions",
-        'last 4 Edge versions',
+        "last 4 Edge versions",
-        'last 4 Safari versions',
+        "last 4 Safari versions",
-        'last 4 Android versions',
+        "last 4 Android versions",
-        'last 4 ChromeAndroid versions',
+        "last 4 ChromeAndroid versions",
-        'last 4 FirefoxAndroid versions',
+        "last 4 FirefoxAndroid versions",
-        'last 4 iOS versions'
+        "last 4 iOS versions",
-      ]
+      ],
-    })
+    }),
    // https://github.com/elchininet/postcss-rtlcss
    // If you want to support RTL css, then
@@ -23,5 +23,5 @@ module.exports = {
    // 2. optionally set quasar.config.js > framework > lang to an RTL language
    // 3. uncomment the following line:
    // require('postcss-rtlcss')
-  ]
+  ],
-}
+};
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -29,15 +29,15 @@ module.exports = configure(function (/* ctx */) {
    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    // https://v2.quasar.dev/quasar-cli-vite/boot-files
-    boot: ["axios"],
+    boot: ["pinia", "axios", "monaco", "integrations"],
    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
    css: ["app.sass"],
    // https://github.com/quasarframework/quasar/tree/dev/extras
    extras: [
-      // 'ionicons-v4',
+      "ionicons-v4",
-      "mdi-v5",
+      "mdi-v7",
      "fontawesome-v6",
      // 'eva-icons',
      // 'themify',
@@ -51,8 +51,8 @@ module.exports = configure(function (/* ctx */) {
    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
    build: {
      target: {
-        browser: ["es2021"],
+        browser: ["es2022"],
-        node: "node16",
+        node: "node20",
      },
      vueRouterMode: "history", // available values: 'hash', 'history'
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,6 +12,9 @@ export default {
 body
  overflow-y: hidden
 a
  color: #1976D2
 .tbl-sticky
  thead tr th
    position: sticky
--- a/src/api/accounts.js
+++ b/src/api/accounts.js
@@ -12,6 +12,25 @@ export async function fetchUsers(params = {}) {
  }
 }
 export async function resetPass(pass) {
  const payload = { password: pass };
  try {
    const { data } = await axios.put(`${baseUrl}/resetpw/`, payload);
    return data;
  } catch (e) {
    console.error(e);
  }
 }
 export async function resetTwoFactor() {
  try {
    const { data } = await axios.put(`${baseUrl}/reset2fa/`);
    return data;
  } catch (e) {
    console.error(e);
  }
 }
 // role api function
 export async function fetchRoles(params = {}) {
  try {
--- a/src/api/agents.js
+++ b/src/api/agents.js
@@ -34,7 +34,7 @@ export function openAgentWindow(agent_id) {
 export function runRemoteBackground(agent_id, agentPlatform) {
  const url = router.resolve(
-    `/remotebackground/${agent_id}?agentPlatform=${agentPlatform}`
+    `/remotebackground/${agent_id}?agentPlatform=${agentPlatform}`,
  ).href;
  openURL(url, null, {
    popup: true,
@@ -129,7 +129,7 @@ export async function refreshAgentWMI(agent_id) {
 export async function runScript(agent_id, payload) {
  const { data } = await axios.post(
    `${baseUrl}/${agent_id}/runscript/`,
-    payload
+    payload,
  );
  return data;
 }
@@ -153,7 +153,7 @@ export async function fetchAgentProcesses(agent_id, params = {}) {
 export async function killAgentProcess(agent_id, pid, params = {}) {
  const { data } = await axios.delete(
    `${baseUrl}/${agent_id}/processes/${pid}/`,
-    { params: params }
+    { params: params },
  );
  return data;
 }
@@ -162,7 +162,7 @@ export async function fetchAgentEventLog(agent_id, logType, days, params = {}) {
  try {
    const { data } = await axios.get(
      `${baseUrl}/${agent_id}/eventlog/${logType}/${days}/`,
-      { params: params }
+      { params: params },
    );
    return data;
  } catch (e) {
@@ -191,10 +191,15 @@ export async function agentRebootNow(agent_id) {
  return data;
 }
 export async function agentShutdown(agent_id) {
  const { data } = await axios.post(`${baseUrl}/${agent_id}/shutdown/`);
  return data;
 }
 export async function sendAgentRecoverMesh(agent_id, params = {}) {
  const { data } = await axios.post(
    `${baseUrl}/${agent_id}/meshcentral/recover/`,
-    { params: params }
+    { params: params },
  );
  return data;
 }
@@ -232,3 +237,8 @@ export async function removeAgentNote(pk) {
  const { data } = await axios.delete(`${baseUrl}/notes/${pk}/`);
  return data;
 }
 export async function wakeUpWOL(agent_id) {
  const { data } = await axios.post(`${baseUrl}/${agent_id}/wol/`);
  return data;
 }
--- a/src/api/alerts.ts
+++ b/src/api/alerts.ts
@@ -0,0 +1,13 @@
 import axios from "axios";
 import type { AlertTemplate } from "@/types/alerts";
 export async function saveAlertTemplate(id: number, payload: AlertTemplate) {
  const { data } = await axios.put(`alerts/templates/${id}/`, payload);
  return data;
 }
 export async function addAlertTemplate(payload: AlertTemplate) {
  const { data } = await axios.post("alerts/templates/", payload);
  return data;
 }
--- a/src/api/checks.js
+++ b/src/api/checks.js
@@ -31,6 +31,11 @@ export async function resetCheck(id) {
  return data;
 }
 export async function resetAllChecksStatus(agent_id) {
  const { data } = await axios.post(`${baseUrl}/${agent_id}/resetall/`);
  return data;
 }
 export async function runAgentChecks(agent_id) {
  const { data } = await axios.post(`${baseUrl}/${agent_id}/run/`);
  return data;
--- a/src/api/core.js
+++ b/src/api/core.js
@@ -1,40 +0,0 @@
 import axios from "axios";
 import { openURL } from "quasar";
 const baseUrl = "/core";
 export async function fetchCustomFields(params = {}) {
  try {
    const { data } = await axios.get(`${baseUrl}/customfields/`, {
      params: params,
    });
    return data;
  } catch (e) {
    console.error(e);
  }
 }
 export async function fetchDashboardInfo(params = {}) {
  const { data } = await axios.get(`${baseUrl}/dashinfo/`, { params: params });
  return data;
 }
 export async function fetchURLActions(params = {}) {
  try {
    const { data } = await axios.get(`${baseUrl}/urlaction/`, {
      params: params,
    });
    return data;
  } catch (e) {
    console.error(e);
  }
 }
 export async function runURLAction(payload) {
  try {
    const { data } = await axios.patch(`${baseUrl}/urlaction/run/`, payload);
    openURL(data);
  } catch (e) {
    console.error(e);
  }
 }
--- a/src/api/core.ts
+++ b/src/api/core.ts
@@ -0,0 +1,97 @@
 import axios from "axios";
 import { openURL } from "quasar";
 import { router } from "@/router";
 import type {
  URLAction,
  TestRunURLActionRequest,
  TestRunURLActionResponse,
 } from "@/types/core/urlactions";
 const baseUrl = "/core";
 export async function fetchDashboardInfo(params = {}) {
  const { data } = await axios.get(`${baseUrl}/dashinfo/`, { params: params });
  return data;
 }
 export async function fetchCustomFields(params = {}) {
  try {
    const { data } = await axios.get(`${baseUrl}/customfields/`, {
      params: params,
    });
    return data;
  } catch (e) {
    console.error(e);
  }
 }
 export async function fetchURLActions(params = {}): Promise<URLAction[]> {
  const { data } = await axios.get(`${baseUrl}/urlaction/`, {
    params: params,
  });
  return data;
 }
 export async function saveURLAction(action: URLAction) {
  const { data } = await axios.post(`${baseUrl}/urlaction/`, action);
  return data;
 }
 export async function editURLAction(id: number, action: URLAction) {
  const { data } = await axios.put(`${baseUrl}/urlaction/${id}/`, action);
  return data;
 }
 export async function removeURLAction(id: number) {
  const { data } = await axios.delete(`${baseUrl}/urlaction/${id}/`);
  return data;
 }
 interface RunURLActionRequest {
  agent_id?: string;
  client?: number;
  site?: number;
  action: number;
 }
 export async function runURLAction(payload: RunURLActionRequest) {
  const { data } = await axios.patch(`${baseUrl}/urlaction/run/`, payload);
  openURL(data);
 }
 export async function runTestURLAction(
  payload: TestRunURLActionRequest,
 ): Promise<TestRunURLActionResponse> {
  const { data } = await axios.post(`${baseUrl}/urlaction/run/test/`, payload);
  return data;
 }
 export async function checkWebTermPerms(): Promise<{
  message: string;
  status: number;
 }> {
  const ret = await axios.post(`${baseUrl}/webtermperms/`);
  return { message: ret.data, status: ret.status };
 }
 export function openWebTerminal(): void {
  const url: string = router.resolve("/webterm").href;
  openURL(url, undefined, {
    popup: true,
    scrollbars: false,
    location: false,
    status: false,
    toolbar: false,
    menubar: false,
    width: 1280,
    height: 720,
  });
 }
 // TODO: Build out type for openai payload
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export async function generateScript(payload: any) {
  const { data } = await axios.post(`${baseUrl}/openai/generate/`, payload);
  return data;
 }
--- a/src/api/scripts.js
+++ b/src/api/scripts.js
@@ -13,6 +13,11 @@ export async function testScript(agent_id, payload) {
  return data;
 }
 export async function testScriptOnServer(payload) {
  const { data } = await axios.post("core/serverscript/test/", payload);
  return data;
 }
 export async function saveScript(payload) {
  const { data } = await axios.post(`${baseUrl}/`, payload);
  return data;
@@ -56,7 +61,7 @@ export async function fetchScriptSnippet(id, params = {}) {
 export async function editScriptSnippet(payload) {
  const { data } = await axios.put(
    `${baseUrl}/snippets/${payload.id}/`,
-    payload
+    payload,
  );
  return data;
 }
--- a/src/assets/trmm_256.png
+++ b/src/assets/trmm_256.png
--- a/src/boot/axios.js
+++ b/src/boot/axios.js
@@ -1,4 +1,5 @@
 import axios from "axios";
 import { useAuthStore } from "@/stores/auth";
 import { Notify } from "quasar";
 export const getBaseUrl = () => {
@@ -9,13 +10,23 @@ export const getBaseUrl = () => {
  }
 };
-export default function ({ app, router, store }) {
+export function setErrorMessage(data, message) {
  console.log(data);
  return [
    () => {
      message;
    },
  ];
 }
 export default function ({ app, router }) {
  app.config.globalProperties.$axios = axios;
  axios.interceptors.request.use(
    function (config) {
      const auth = useAuthStore();
      config.baseURL = getBaseUrl();
-      const token = store.state.token;
+      const token = auth.token;
      if (token != null) {
        config.headers.Authorization = `Token ${token}`;
      }
@@ -23,7 +34,7 @@ export default function ({ app, router, store }) {
    },
    function (err) {
      return Promise.reject(err);
-    }
+    },
  );
  axios.interceptors.response.use(
@@ -86,6 +97,6 @@ export default function ({ app, router, store }) {
      }
      return Promise.reject({ ...error });
-    }
+    },
  );
 }
--- a/src/boot/integrations.ts
+++ b/src/boot/integrations.ts
@@ -0,0 +1,10 @@
 import { boot } from "quasar/wrappers";
 export default boot(({ app }) => {
  app.config.globalProperties.$integrations = {
    fileBarIntegrations: [],
    clientMenuIntegrations: [],
    siteMenuIntegrations: [],
    agentMenuIntegrations: [],
  };
 });
--- a/src/boot/monaco.ts
+++ b/src/boot/monaco.ts
@@ -0,0 +1,23 @@
 import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
 import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
 import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
 import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
 import { boot } from "quasar/wrappers";
 export default boot(() => {
  self.MonacoEnvironment = {
    getWorker(_: unknown, label: string) {
      if (label === "json") {
        return new jsonWorker();
      }
      if (label === "css" || label === "scss" || label === "less") {
        return new cssWorker();
      }
      if (label === "html" || label === "handlebars" || label === "razor") {
        return new htmlWorker();
      }
      return new editorWorker();
    },
  };
 });
--- a/src/boot/pinia.ts
+++ b/src/boot/pinia.ts
@@ -0,0 +1,11 @@
 import { boot } from "quasar/wrappers";
 import { createPinia } from "pinia";
 export default boot(({ app }) => {
  const pinia = createPinia();
  app.use(pinia);
  // You can add Pinia plugins here
  // pinia.use(SomePiniaPlugin)
 });
--- a/src/components/AdminManager.vue
+++ b/src/components/AdminManager.vue
@@ -149,7 +149,9 @@
 <script>
 import mixins from "@/mixins/mixins";
 import { computed } from "vue";
-import { mapState, useStore } from "vuex";
+import { useStore } from "vuex";
 import { mapState as piniaMapState } from "pinia";
 import { useAuthStore } from "@/stores/auth";
 import UserForm from "@/components/modals/admin/UserForm.vue";
 import UserResetPasswordForm from "@/components/modals/admin/UserResetPasswordForm.vue";
@@ -316,7 +318,7 @@ export default {
    },
  },
  computed: {
-    ...mapState({
+    ...piniaMapState(useAuthStore, {
      logged_in_user: (state) => state.username,
    }),
  },
--- a/src/components/AgentTable.vue
+++ b/src/components/AgentTable.vue
@@ -46,6 +46,9 @@
      <template v-slot:header-cell-plat="props">
        <q-th auto-width :props="props"></q-th>
      </template>
      <template v-slot:header-cell-mon-type="props">
        <q-th auto-width :props="props"></q-th>
      </template>
      <template v-slot:header-cell-checks-status="props">
        <q-th :props="props">
          <q-icon name="fas fa-check-double" size="1.2em">
@@ -170,7 +173,7 @@
                overdueAlert(
                  'dashboard',
                  props.row,
-                  props.row.overdue_dashboard_alert
+                  props.row.overdue_dashboard_alert,
                )
              "
              v-model="props.row.overdue_dashboard_alert"
@@ -196,6 +199,28 @@
            >
              <q-tooltip>Linux</q-tooltip>
            </q-icon>
            <q-icon
              v-else-if="props.row.plat === 'darwin'"
              name="mdi-apple"
              size="sm"
              color="primary"
            >
              <q-tooltip>macOS</q-tooltip>
            </q-icon>
          </q-td>
          <q-td key="mon-type" :props="props">
            <q-icon
              v-if="props.row.monitoring_type === 'server'"
              name="dns"
              size="sm"
              color="primary"
            >
              <q-tooltip>Server</q-tooltip>
            </q-icon>
            <q-icon v-else name="computer" size="sm" color="primary">
              <q-tooltip>Workstation</q-tooltip>
            </q-icon>
          </q-td>
          <q-td key="checks-status" :props="props">
@@ -203,7 +228,7 @@
              v-if="props.row.maintenance_mode"
              name="construction"
              size="1.2em"
-              color="green"
+              :color="dash_positive_color"
            >
              <q-tooltip>Maintenance Mode Enabled</q-tooltip>
            </q-icon>
@@ -211,7 +236,7 @@
              v-else-if="props.row.checks.failing > 0"
              name="fas fa-check-double"
              size="1.2em"
-              color="negative"
+              :color="dash_negative_color"
            >
              <q-tooltip>Checks failing</q-tooltip>
            </q-icon>
@@ -219,7 +244,7 @@
              v-else-if="props.row.checks.warning > 0"
              name="fas fa-check-double"
              size="1.2em"
-              color="warning"
+              :color="dash_warning_color"
            >
              <q-tooltip>Checks warning</q-tooltip>
            </q-icon>
@@ -227,7 +252,7 @@
              v-else-if="props.row.checks.info > 0"
              name="fas fa-check-double"
              size="1.2em"
-              color="info"
+              :color="dash_info_color"
            >
              <q-tooltip>Checks info</q-tooltip>
            </q-icon>
@@ -235,7 +260,7 @@
              v-else
              name="fas fa-check-double"
              size="1.2em"
-              color="positive"
+              :color="dash_positive_color"
            >
              <q-tooltip>Checks passing</q-tooltip>
            </q-icon>
@@ -271,7 +296,7 @@
              @click="showPendingActionsModal(props.row)"
              name="far fa-clock"
              size="1.4em"
-              color="warning"
+              :color="dash_warning_color"
              class="cursor-pointer"
            >
              <q-tooltip
@@ -295,7 +320,7 @@
              v-if="props.row.status === 'overdue'"
              name="fas fa-signal"
              size="1.2em"
-              color="negative"
+              :color="dash_negative_color"
            >
              <q-tooltip>Agent overdue</q-tooltip>
            </q-icon>
@@ -303,11 +328,16 @@
              v-else-if="props.row.status === 'offline'"
              name="fas fa-signal"
              size="1.2em"
-              color="warning"
+              :color="dash_warning_color"
            >
              <q-tooltip>Agent offline</q-tooltip>
            </q-icon>
-            <q-icon v-else name="fas fa-signal" size="1.2em" color="positive">
+            <q-icon
              v-else
              name="fas fa-signal"
              size="1.2em"
              :color="dash_positive_color"
            >
              <q-tooltip>Agent online</q-tooltip>
            </q-icon>
          </q-td>
@@ -365,17 +395,13 @@ export default {
        "local_ips",
        "make_model",
        "physical_disks",
        "custom_fields",
        "serial_number",
      ];
      // quasar filter only does visible columns so this is a hack to add hidden columns we want to filter
-      for (const elem of hiddenFields) {
+      // originally I was modifying cols directly but this led to phantom colum so doing it this way now
-        if (!cols.find((o) => o.name === elem)) {
+      // https://github.com/amidaware/tacticalrmm/issues/1264
-          cols.push({
+      const allColumns = [...cols, ...hiddenFields.map((field) => ({ field }))];
            name: elem,
            field: elem,
          });
        }
      }
      const lowerTerms = terms ? terms.toLowerCase() : "";
      let advancedFilter = false;
@@ -422,15 +448,19 @@ export default {
            return false;
          else if (availability === "expired") {
            let now = new Date();
-            let lastSeen = date.extractDate(row.last_seen, "MM DD YYYY HH:mm");
+            let last_seen = new Date(row.last_seen);
-            let diff = date.getDateDiff(now, lastSeen, "days");
+            let diff = date.getDateDiff(now, last_seen, "days");
            if (diff < 30) return false;
          }
        }
        // Normal text filter
-        return cols.some((col) => {
+        return allColumns.some((col) => {
-          const val = cellValue(col, row) + "";
+          let valObj = cellValue(col, row);
          if (Array.isArray(valObj)) {
            valObj = valObj.map((item) => (item.value ? item.value : item));
          }
          const val = valObj + "";
          const haystack =
            val === "undefined" || val === "null" ? "" : val.toLowerCase();
          return haystack.indexOf(search) !== -1;
@@ -481,7 +511,9 @@ export default {
      const data = {
        [db_field]: !alert_action,
      };
-      const alertColor = !alert_action ? "positive" : "info";
+      const alertColor = !alert_action
        ? this.dash_positive_color
        : this.dash_info_color;
      this.$axios.put(`/agents/${agent.agent_id}/`, data).then(() => {
        this.$q.notify({
          color: alertColor,
@@ -525,7 +557,13 @@ export default {
    },
  },
  computed: {
-    ...mapState(["tableHeight"]),
+    ...mapState([
      "tableHeight",
      "dash_info_color",
      "dash_positive_color",
      "dash_negative_color",
      "dash_warning_color",
    ]),
    agentDblClickAction() {
      return this.$store.state.agentDblClickAction;
    },
--- a/src/components/AlertsIcon.vue
+++ b/src/components/AlertsIcon.vue
@@ -3,7 +3,7 @@
    <q-badge v-if="alertsCount > 0" :color="badgeColor" floating transparent>{{
      alertsCountText()
    }}</q-badge>
-    <q-menu style="max-height: 30vh">
+    <q-menu :style="{ 'max-height': `${$q.screen.height - 100}px` }">
      <q-list separator>
        <q-item v-if="alertsCount === 0">No New Alerts</q-item>
        <q-item v-for="alert in topAlerts" :key="alert.id">
@@ -59,6 +59,7 @@
 </template>
 <script>
 import { mapState } from "vuex";
 import mixins from "@/mixins/mixins";
 import AlertsOverview from "@/components/modals/alerts/AlertsOverview.vue";
 import { getTimeLapse } from "@/utils/format";
@@ -75,19 +76,21 @@ export default {
    return {
      alertsCount: 0,
      topAlerts: [],
      errorColor: "red",
      warningColor: "orange",
      infoColor: "blue",
      poll: null,
    };
  },
  computed: {
    ...mapState([
      "dash_info_color",
      "dash_warning_color",
      "dash_negative_color",
    ]),
    badgeColor() {
      const severities = this.topAlerts.map((alert) => alert.severity);
-      if (severities.includes("error")) return this.errorColor;
+      if (severities.includes("error")) return this.dash_negative_color;
-      else if (severities.includes("warning")) return this.warningColor;
+      else if (severities.includes("warning")) return this.dash_warning_color;
-      else return this.infoColor;
+      else return this.dash_info_color;
    },
  },
  methods: {
@@ -159,9 +162,9 @@ export default {
        });
    },
    alertIconColor(severity) {
-      if (severity === "error") return this.errorColor;
+      if (severity === "error") return this.dash_negative_color;
-      else if (severity === "warning") return this.warningColor;
+      else if (severity === "warning") return this.dash_warning_color;
-      else return this.infoColor;
+      else return this.dash_info_color;
    },
    alertsCountText() {
      if (this.alertsCount > 99) return "99+";
--- a/src/components/AlertsManager.vue
+++ b/src/components/AlertsManager.vue
@@ -278,7 +278,7 @@ export default {
        },
        {
          name: "resolved_action_name",
-          label: "Resolve Action",
+          label: "Resolved Action",
          field: "resolved_action_name",
          align: "left",
        },
@@ -326,7 +326,7 @@ export default {
              this.refresh();
              this.$q.loading.hide();
              this.notifySuccess(
-                `Alert template ${template.name} was deleted!`
+                `Alert template ${template.name} was deleted!`,
              );
            })
            .catch(() => {
--- a/src/components/FileBar.vue
+++ b/src/components/FileBar.vue
@@ -149,6 +149,49 @@
            </q-list>
          </q-menu>
        </q-btn>
        <!-- integrations -->
        <q-btn size="md" dense no-caps flat label="Reporting">
          <q-menu auto-close>
            <q-list
              v-if="
                $integrations &&
                $integrations.fileBarIntegrations &&
                $integrations.fileBarIntegrations.length > 0
              "
              dense
              style="min-width: 100px"
            >
              <q-item
                v-for="integration in $integrations.fileBarIntegrations"
                :key="integration.name"
                @click="
                  integration.type === 'dialog'
                    ? $q.dialog({ component: integration.component })
                    : undefined
                "
                :to="integration.type === 'route' ? integration.uri : undefined"
                clickable
                v-close-popup
              >
                <q-item-section>{{ integration.name }}</q-item-section>
              </q-item>
            </q-list>
            <q-list v-else dense style="min-width: 100px">
              <q-item
                clickable
                v-close-popup
                @click="
                  notifyWarning(
                    'Reporting feature requires a valid code signing token. Please check the docs for more info.',
                    10000,
                  )
                "
              >
                <q-item-section>Reporting Manager</q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
        <!-- help -->
        <q-btn v-if="!hosted" size="md" dense no-caps flat label="Help">
          <q-menu auto-close>
@@ -234,6 +277,9 @@ import ServerMaintenance from "@/components/modals/core/ServerMaintenance.vue";
 import CodeSign from "@/components/modals/coresettings/CodeSign.vue";
 import PermissionsManager from "@/components/accounts/PermissionsManager.vue";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { notifyWarning } from "@/utils/notify";
 export default {
  name: "FileBar",
  mixins: [mixins],
@@ -396,6 +442,11 @@ export default {
        component: DeploymentTable,
      });
    },
    showReportsManager() {
      this.$q.dialog({
        component: ReportsManager,
      });
    },
  },
 };
 </script>
--- a/src/components/FileBrowser.vue
+++ b/src/components/FileBrowser.vue
@@ -0,0 +1,287 @@
 <template>
  <div>
    <q-splitter v-model="splitter" :style="{ height: height }">
      <!-- folder view -->
      <template #before>
        <q-tree
          ref="folderTree"
          v-model:selected="selectedTreeNode"
          node-key="id"
          filter="filter"
          no-selection-unset
          selected-color="primary"
          :filter-method="(node: QTreeFileNode/*,  filter */) => node.type === 'folder'"
          :nodes="nodes"
          @update:selected="onFolderSelection"
          @lazy-load="loadNodeChildren"
        />
      </template>
      <!-- file/folder list -->
      <template #after>
        <q-table
          ref="tableRef"
          v-model:selected="selectedTableNodes"
          :rows="tableRows"
          :columns="tableColumns"
          :loading="loading"
          dense
          no-data-label="Folder is Empty"
          binary-state-sort
          virtual-scroll
          selection="multiple"
          row-key="id"
          :pagination="{ sortBy: 'type', descending: true }"
          :rows-per-page-options="[0]"
          :table-class="{
            'table-bgcolor': !$q.dark.isActive,
            'table-bgcolor-dark': $q.dark.isActive,
          }"
          :style="{ 'max-height': height }"
          class="tbl-sticky"
        >
          <template #top>
            <slot
              name="action-bar"
              v-bind="{ selectedTreeNode: folderTree?.getNodeByKey(selectedTreeNode) as QTreeFileNode, selectedTableNodes: selectedTableNodes as FileSystemNodeTable[]}"
            ></slot>
          </template>
          <template #body="slotProps">
            <q-tr
              class="cursor-pointer"
              @dblclick.prevent="doubleClickTableRow(slotProps.row)"
            >
              <!-- Context Menu -->
              <slot
                name="table-menu"
                v-bind="{ item: slotProps.row as FileSystemNodeTable, selectedTreeNode: folderTree?.getNodeByKey(selectedTreeNode) as QTreeFileNode }"
              ></slot>
              <!-- rows -->
              <q-td>
                <q-checkbox v-model="slotProps.selected" dense />
              </q-td>
              <q-td>
                <q-icon
                  class="q-mr-sm"
                  :color="
                    slotProps.row.type === 'folder' ? 'yellow-9' : 'primary'
                  "
                  size="sm"
                  :name="
                    slotProps.row.type === 'folder' ? 'folder' : 'description'
                  "
                />{{ slotProps.row.name }}
              </q-td>
              <q-td>{{ slotProps.row.type }}</q-td>
              <q-td>{{ slotProps.row.size }}</q-td>
            </q-tr>
          </template>
        </q-table>
      </template>
    </q-splitter>
  </div>
 </template>
 <script lang="ts" setup>
 // composition imports
 import { ref, toRef, onMounted } from "vue";
 import { isDefined } from "@vueuse/core";
 // type imports
 import type { QTableColumn, QTreeLazyLoadParams, QTree, QTable } from "quasar";
 import type {
  LazyLoadCallbackParams,
  FileSystemNodeTable,
  QTreeFileNode,
 } from "../types/filebrowser";
 // emits
 const emit = defineEmits<{
  (event: "lazy-load", callback: LazyLoadCallbackParams): void;
 }>();
 // props
 const props = withDefaults(
  defineProps<{
    nodes: QTreeFileNode[];
    loading?: boolean;
    separator?: "windows" | "unix";
    height?: string;
  }>(),
  {
    separator: "unix",
    loading: false,
    height: "200px",
  }
 );
 // expose public methods
 defineExpose({
  getNodeByKey: (nodeKey: string): QTreeFileNode =>
    folderTree.value?.getNodeByKey(nodeKey),
  reloadTable: reloadTable,
 });
 const fileSeparator = props.separator === "unix" ? "/" : "\\";
 const folderTree = ref<InstanceType<typeof QTree> | null>(null);
 const tableRef = ref<InstanceType<typeof QTable> | null>(null);
 const selectedTreeNode = ref(fileSeparator);
 const selectedTableNodes = ref([] as FileSystemNodeTable[]);
 const splitter = ref(25);
 const nodes = toRef(props, "nodes");
 const tableRows = ref([] as FileSystemNodeTable[]);
 const tableColumns: QTableColumn[] = [
  {
    name: "name",
    label: "Name",
    field: "name",
    align: "left",
    sortable: true,
  },
  {
    name: "type",
    label: "Type",
    field: "type",
    align: "left",
    sortable: true,
  },
  {
    name: "size",
    label: "Size",
    field: "size",
    align: "left",
    sortable: true,
  },
 ];
 function doubleClickTableRow(file: FileSystemNodeTable) {
  if (file.type == "file") return;
  selectedTreeNode.value = file.id;
  onFolderSelection(file.id);
 }
 function reloadTable(parentNodeKey: string = selectedTreeNode.value) {
  tableRows.value = [];
  selectedTableNodes.value = [];
  const node: QTreeFileNode = folderTree.value?.getNodeByKey(parentNodeKey);
  if (isDefined(node.children)) {
    tableRows.value = parseNodeChildrenIntoTable(node);
  }
 }
 function onFolderSelection(nodeKey: string) {
  !folderTree.value?.isExpanded(nodeKey)
    ? folderTree.value?.setExpanded(nodeKey, true)
    : undefined;
  reloadTable(nodeKey);
 }
 function loadNodeChildren({ node, key, done, fail }: QTreeLazyLoadParams) {
  const isDone = (loadedChildren: QTreeFileNode[]) => {
    done(loadedChildren);
    reloadTable(key);
  };
  const isFail = () => {
    fail();
  };
  // re-emit lazy load event so parent can call api
  emit("lazy-load", {
    isDone,
    isFail,
    path: node.path,
  });
 }
 // parses children of node into table rows
 function parseNodeChildrenIntoTable(
  node: QTreeFileNode
 ): FileSystemNodeTable[] {
  if (isDefined(node.children)) {
    return node.children.map((childNode) => ({
      id: childNode.id,
      name: childNode.label as string,
      path: childNode.path,
      type: childNode.type,
      size: childNode.size,
    }));
  } else {
    return [];
  }
 }
 // TODO: figure this shit out multiple selection with shift-click
 // let storedSelectedRow: FileSystemNodeTable;
 // function onSelection({
 //   rows,
 //   added,
 //   evt,
 // }: {
 //   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 //   rows: readonly unknown[];
 //   added: boolean;
 //   evt: Event;
 // }) {
 //   // ignore selection change from header of not from a direct click event
 //   if (!isDefined(tableRef.value) || rows.length !== 1 || !isDefined(evt)) {
 //     return;
 //   }
 //   const oldSelectedRow = storedSelectedRow;
 //   const newSelectedRow = rows[0] as FileSystemNodeTable;
 //   const { ctrlKey, shiftKey } = evt as KeyboardEvent;
 //   if (!shiftKey) {
 //     storedSelectedRow = newSelectedRow;
 //   }
 //   // wait for the default selection to be performed
 //   nextTick(() => {
 //     if (!isDefined(tableRef.value)) return;
 //     if (shiftKey === true) {
 //       const tableRows = tableRef.value.filteredSortedRows;
 //       let firstIndex = tableRows.indexOf(oldSelectedRow);
 //       let lastIndex = tableRows.indexOf(newSelectedRow);
 //       if (firstIndex < 0) {
 //         firstIndex = 0;
 //       }
 //       if (firstIndex > lastIndex) {
 //         [firstIndex, lastIndex] = [lastIndex, firstIndex];
 //       }
 //       const rangeRows = tableRows.slice(
 //         firstIndex,
 //         lastIndex + 1
 //       ) as FileSystemNodeTable[];
 //       // we need the original row object so we can match them against the rows in range
 //       const selectedRows = selectedTableNodes.value.map(
 //         toRaw(storedSelectedRow)
 //       ) as FileSystemNodeTable[];
 //       selectedTableNodes.value = added
 //         ? selectedRows.concat(
 //             rangeRows.filter((row) => selectedRows.includes(row) === false)
 //           )
 //         : selectedRows.filter((row) => rangeRows.includes(row) === false);
 //     } else if (ctrlKey !== true && added === true) {
 //       selectedTableNodes.value = [newSelectedRow];
 //     }
 //   });
 // }
 onMounted(() => {
  // make sure the table on the right is always populated and selected node is expanded
  selectedTreeNode.value = nodes.value[0].id;
  folderTree.value?.setExpanded(selectedTreeNode.value, true);
 });
 </script>
--- a/src/components/accounts/ResetPass.vue
+++ b/src/components/accounts/ResetPass.vue
@@ -0,0 +1,75 @@
 <template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin" style="width: 60vw">
      <q-card-section class="row">
        <div class="col-3">New password:</div>
        <div class="col-9">
          <q-input
            outlined
            dense
            v-model="pass"
            :type="isPwd ? 'password' : 'text'"
            :rules="[(val) => !!val || '*Required']"
          >
            <template v-slot:append>
              <q-icon
                :name="isPwd ? 'visibility_off' : 'visibility'"
                class="cursor-pointer"
                @click="isPwd = !isPwd"
              />
            </template>
          </q-input>
        </div>
        <div class="col-3">Confirm password:</div>
        <div class="col-9">
          <q-input
            outlined
            dense
            v-model="pass2"
            :type="isPwd ? 'password' : 'text'"
            :rules="[(val) => val === pass || 'Passwords do not match']"
          >
            <template v-slot:append>
              <q-icon
                :name="isPwd ? 'visibility_off' : 'visibility'"
                class="cursor-pointer"
                @click="isPwd = !isPwd"
              />
            </template>
          </q-input>
        </div>
      </q-card-section>
      <q-card-actions align="right">
        <q-btn
          color="primary"
          label="Reset"
          @click="onOKClick"
          :disable="!pass || pass !== pass2"
        />
        <q-btn color="negative" label="Cancel" @click="onDialogCancel" />
      </q-card-actions>
    </q-card>
  </q-dialog>
 </template>
 <script setup>
 import { ref } from "vue";
 import { useDialogPluginComponent } from "quasar";
 import { resetPass } from "@/api/accounts";
 import { notifySuccess } from "@/utils/notify";
 const pass = ref("");
 const pass2 = ref("");
 const isPwd = ref(true);
 defineEmits([...useDialogPluginComponent.emits]);
 const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
  useDialogPluginComponent();
 async function onOKClick() {
  const ret = await resetPass(pass.value);
  notifySuccess(ret);
  onDialogOK();
 }
 </script>
--- a/src/components/accounts/RolesForm.vue
+++ b/src/components/accounts/RolesForm.vue
@@ -27,6 +27,21 @@
            </div>
          </q-card-section>
          <div class="text-subtitle2">Reporting</div>
          <q-separator />
          <q-card-section class="row">
            <div class="q-gutter-sm">
              <q-checkbox
                v-model="localRole.can_view_reports"
                label="Reporting Viewer"
              />
              <q-checkbox
                v-model="localRole.can_manage_reports"
                label="Reporting Manager"
              />
            </div>
          </q-card-section>
          <div class="text-subtitle2">Accounts</div>
          <q-separator />
          <q-card-section class="row">
@@ -70,10 +85,6 @@
                v-model="localRole.can_uninstall_agents"
                label="Uninstall Agents"
              />
              <q-checkbox
                v-model="localRole.can_ping_agents"
                label="Ping Agents"
              />
              <q-checkbox
                v-model="localRole.can_update_agents"
                label="Update Agents"
@@ -96,7 +107,11 @@
              />
              <q-checkbox
                v-model="localRole.can_reboot_agents"
-                label="Reboot Agents"
+                label="Shutdown / Reboot Agents"
              />
              <q-checkbox
                v-model="localRole.can_send_wol"
                label="Wake-Up (WoL) Agents"
              />
              <q-checkbox
                v-model="localRole.can_install_agents"
@@ -136,6 +151,14 @@
                v-model="localRole.can_edit_core_settings"
                label="Edit Global Settings"
              />
              <q-checkbox
                v-model="localRole.can_view_global_keystore"
                label="View Global Key Store"
              />
              <q-checkbox
                v-model="localRole.can_edit_global_keystore"
                label="Edit Global Key Store"
              />
              <q-checkbox
                v-model="localRole.can_do_server_maint"
                label="Do Server Maintenance"
@@ -164,6 +187,11 @@
                v-model="localRole.can_manage_customfields"
                label="Edit Custom Fields"
              />
              <q-checkbox
                v-if="!hosted"
                v-model="localRole.can_use_webterm"
                label="Use TRMM Server Web Terminal"
              />
            </div>
          </q-card-section>
@@ -313,6 +341,11 @@
                v-model="localRole.can_manage_scripts"
                label="Manage Scripts"
              />
              <q-checkbox
                v-if="!hosted"
                v-model="localRole.can_run_server_scripts"
                label="Run Scripts on TRMM Server"
              />
            </div>
          </q-card-section>
@@ -394,7 +427,8 @@
 <script>
 // composition imports
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { useStore } from "vuex";
 import { useDialogPluginComponent } from "quasar";
 import { saveRole, editRole } from "@/api/accounts";
 import { useClientDropdown, useSiteDropdown } from "@/composables/clients";
@@ -412,6 +446,10 @@ export default {
    // quasar setup
    const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
    // store
    const store = useStore();
    const hosted = computed(() => store.state.hosted);
    // dropdown setup
    const { clientOptions } = useClientDropdown(true);
    const { siteOptions } = useSiteDropdown(true);
@@ -428,7 +466,6 @@ export default {
          can_uninstall_agents: false,
          can_update_agents: false,
          can_edit_agent: false,
          can_ping_agents: false,
          can_manage_procs: false,
          can_view_eventlogs: false,
          can_send_cmd: false,
@@ -437,8 +474,8 @@ export default {
          can_run_scripts: false,
          can_run_bulk: false,
          can_manage_winsvcs: false,
          can_recover_agents: false,
          can_list_agent_history: false,
          can_send_wol: false,
          // software perms
          can_list_software: false,
          can_manage_software: false,
@@ -448,6 +485,8 @@ export default {
          // settings perms
          can_view_core_settings: false,
          can_edit_core_settings: false,
          can_view_global_keystore: false,
          can_edit_global_keystore: false,
          can_do_server_maint: false,
          can_code_sign: false,
          can_run_urlactions: false,
@@ -497,6 +536,12 @@ export default {
          can_manage_roles: false,
          can_view_clients: [],
          can_view_sites: [],
          // server scripts and web terminal
          can_run_server_scripts: false,
          can_use_webterm: false,
          // reporting perms
          can_view_reports: false,
          can_manage_reports: false,
        });
    const loading = ref(false);
@@ -524,7 +569,7 @@ export default {
            role.value[key] = newValue;
          }
        });
-      }
+      },
    );
    return {
@@ -533,6 +578,7 @@ export default {
      loading,
      clientOptions,
      siteOptions,
      hosted,
      onSubmit,
--- a/src/components/agents/AgentActionMenu.vue
+++ b/src/components/agents/AgentActionMenu.vue
@@ -146,6 +146,13 @@
      <q-item-section>Run Checks</q-item-section>
    </q-item>
    <q-item clickable v-close-popup @click="wakeUp(agent)">
      <q-item-section side>
        <q-icon size="xs" name="offline_bolt" />
      </q-item-section>
      <q-item-section>Wake-Up (WoL)</q-item-section>
    </q-item>
    <q-item clickable>
      <q-item-section side>
        <q-icon size="xs" name="power_settings_new" />
@@ -169,6 +176,13 @@
      </q-menu>
    </q-item>
    <q-item clickable v-close-popup @click="shutdown(agent)">
      <q-item-section side>
        <q-icon size="xs" name="power" />
      </q-item-section>
      <q-item-section>Shutdown</q-item-section>
    </q-item>
    <q-item clickable v-close-popup @click="showPolicyAdd(agent)">
      <q-item-section side>
        <q-icon size="xs" name="policy" />
@@ -176,6 +190,24 @@
      <q-item-section>Assign Automation Policy</q-item-section>
    </q-item>
    <q-item
      clickable
      v-if="
        $integrations &&
        $integrations.agentMenuIntegrations &&
        $integrations.agentMenuIntegrations.length > 0
      "
    >
      <q-item-section side>
        <q-icon size="xs" name="analytics" />
      </q-item-section>
      <q-item-section>Reporting</q-item-section>
      <q-item-section side>
        <q-icon name="keyboard_arrow_right" />
      </q-item-section>
      <integrations-context-menu type="agent" :id="agent.agent_id" />
    </q-item>
    <q-item clickable v-close-popup @click="showAgentRecovery(agent)">
      <q-item-section side>
        <q-icon size="xs" name="fas fa-first-aid" />
@@ -206,10 +238,12 @@ import { fetchURLActions, runURLAction } from "@/api/core";
 import {
  editAgent,
  agentRebootNow,
  agentShutdown,
  sendAgentPing,
  removeAgent,
  runRemoteBackground,
  runTakeControl,
  wakeUpWOL,
 } from "@/api/agents";
 import { runAgentUpdateScan, runAgentUpdateInstall } from "@/api/winupdates";
 import { runAgentChecks } from "@/api/checks";
@@ -224,9 +258,13 @@ import RebootLater from "@/components/modals/agents/RebootLater.vue";
 import EditAgent from "@/components/modals/agents/EditAgent.vue";
 import SendCommand from "@/components/modals/agents/SendCommand.vue";
 import RunScript from "@/components/modals/agents/RunScript.vue";
 import IntegrationsContextMenu from "@/components/ui/IntegrationsContextMenu.vue";
 export default {
  name: "AgentActionMenu",
  components: {
    IntegrationsContextMenu,
  },
  props: {
    agent: !Object,
  },
@@ -264,16 +302,21 @@ export default {
    async function getURLActions() {
      menuLoading.value = true;
      try {
-        urlActions.value = await fetchURLActions();
+        urlActions.value = (await fetchURLActions())
          .filter((action) => action.action_type === "web")
          .sort((a, b) => a.name.localeCompare(b.name));
        if (urlActions.value.length === 0) {
          notifyWarning(
-            "No URL Actions configured. Go to Settings > Global Settings > URL Actions"
+            "No URL Actions configured. Go to Settings > Global Settings > URL Actions",
          );
          return;
        }
-      } catch (e) {}
+      } catch (e) {
-      menuLoading.value = true;
+        console.error(e);
      } finally {
        menuLoading.value = false;
      }
    }
    function showSendCommand(agent) {
@@ -334,7 +377,7 @@ export default {
        notifySuccess(
          `Maintenance mode was ${
            agent.maintenance_mode ? "disabled" : "enabled"
-          } on ${agent.hostname}`
+          } on ${agent.hostname}`,
        );
        store.commit("setRefreshSummaryTab", true);
        refreshDashboard();
@@ -370,6 +413,15 @@ export default {
      }
    }
    async function wakeUp(agent) {
      try {
        const data = await wakeUpWOL(agent.agent_id);
        notifySuccess(data);
      } catch (e) {
        console.error(e);
      }
    }
    function showRebootLaterModal(agent) {
      $q.dialog({
        component: RebootLater,
@@ -398,6 +450,32 @@ export default {
      });
    }
    function shutdown(agent) {
      $q.dialog({
        title:
          'Please type <code style="color:red">yes</code> in the box below to confirm shutdown.',
        prompt: {
          model: "",
          type: "text",
          isValid: (val) => val === "yes",
        },
        cancel: true,
        ok: { label: "Shutdown", color: "negative" },
        persistent: true,
        html: true,
      }).onOk(async () => {
        $q.loading.show();
        try {
          await agentShutdown(agent.agent_id);
          notifySuccess(`${agent.hostname} will now be shutdown`);
          $q.loading.hide();
        } catch (e) {
          $q.loading.hide();
          console.error(e);
        }
      });
    }
    function showPolicyAdd(agent) {
      $q.dialog({
        component: PolicyAdd,
@@ -466,7 +544,7 @@ export default {
          notifySuccess(data);
          refreshDashboard(
            false /* clearTreeSelected */,
-            true /* clearSubTable */
+            true /* clearSubTable */,
          );
        } catch (e) {
          console.error(e);
@@ -495,9 +573,11 @@ export default {
      runChecks,
      showRebootLaterModal,
      rebootNow,
      shutdown,
      showPolicyAdd,
      showAgentRecovery,
      pingAgent,
      wakeUp,
    };
  },
 };
--- a/src/components/agents/AutomatedTasksTab.vue
+++ b/src/components/agents/AutomatedTasksTab.vue
@@ -261,7 +261,7 @@
          <q-td v-else-if="props.row.task_result.status === 'passing'">
            <q-icon
              style="font-size: 1.3rem"
-              color="positive"
+              :color="dash_positive_color"
              name="check_circle"
            >
              <q-tooltip>Passing</q-tooltip>
@@ -271,7 +271,7 @@
            <q-icon
              v-if="props.row.alert_severity === 'info'"
              style="font-size: 1.3rem"
-              color="info"
+              :color="dash_info_color"
              name="info"
            >
              <q-tooltip>Informational</q-tooltip>
@@ -279,7 +279,7 @@
            <q-icon
              v-else-if="props.row.alert_severity === 'warning'"
              style="font-size: 1.3rem"
-              color="warning"
+              :color="dash_warning_color"
              name="warning"
            >
              <q-tooltip>Warning</q-tooltip>
@@ -287,7 +287,7 @@
            <q-icon
              v-else
              style="font-size: 1.3rem"
-              color="negative"
+              :color="dash_negative_color"
              name="error"
            >
              <q-tooltip>Error</q-tooltip>
@@ -295,7 +295,12 @@
          </q-td>
          <q-td v-else></q-td>
          <!-- name -->
-          <q-td>{{ props.row.name }}</q-td>
+          <q-td
            >{{ props.row.name
            }}<q-tooltip v-if="props.row?.win_task_name" :delay="700">{{
              props.row.win_task_name
            }}</q-tooltip></q-td
          >
          <!-- sync status -->
          <q-td v-if="props.row.task_result.sync_status === 'notsynced'"
            >Will sync on next agent checkin</q-td
@@ -418,6 +423,10 @@ export default {
    const tabHeight = computed(() => store.state.tabHeight);
    const agentPlatform = computed(() => store.state.agentPlatform);
    const formatDate = computed(() => store.getters.formatDate);
    const dash_info_color = computed(() => store.state.dash_info_color);
    const dash_positive_color = computed(() => store.state.dash_positive_color);
    const dash_negative_color = computed(() => store.state.dash_negative_color);
    const dash_warning_color = computed(() => store.state.dash_warning_color);
    // setup quasar
    const $q = useQuasar();
@@ -437,7 +446,7 @@ export default {
      try {
        const result = await fetchAgentTasks(selectedAgent.value);
        tasks.value = result.filter(
-          (task) => task.sync_status !== "pendingdeletion"
+          (task) => task.sync_status !== "pendingdeletion",
        );
      } catch (e) {
        console.error(e);
@@ -491,7 +500,7 @@ export default {
      try {
        const result = await runTask(
          task.id,
-          task.policy ? { agent_id: selectedAgent.value } : {}
+          task.policy ? { agent_id: selectedAgent.value } : {},
        );
        notifySuccess(result);
      } catch (e) {
@@ -552,6 +561,10 @@ export default {
      selectedAgent,
      tabHeight,
      agentPlatform,
      dash_info_color,
      dash_positive_color,
      dash_warning_color,
      dash_negative_color,
      // non-reactive data
      columns,
--- a/src/components/agents/ChecksTab.vue
+++ b/src/components/agents/ChecksTab.vue
@@ -119,6 +119,16 @@
          no-caps
          icon="play_arrow"
          @click="runChecks"
          class="q-mr-md"
        />
        <q-btn
          label="Reset All Checks Status"
          dense
          flat
          push
          no-caps
          icon="restart_alt"
          @click="resetAllChecks"
        />
      </template>
@@ -301,7 +311,7 @@
          <q-td v-else-if="props.row.check_result.status === 'passing'">
            <q-icon
              style="font-size: 1.3rem"
-              color="positive"
+              :color="dash_positive_color"
              name="check_circle"
            >
              <q-tooltip>Passing</q-tooltip>
@@ -311,7 +321,7 @@
            <q-icon
              v-if="getAlertSeverity(props.row) === 'info'"
              style="font-size: 1.3rem"
-              color="info"
+              :color="dash_info_color"
              name="info"
            >
              <q-tooltip>Informational</q-tooltip>
@@ -319,7 +329,7 @@
            <q-icon
              v-else-if="getAlertSeverity(props.row) === 'warning'"
              style="font-size: 1.3rem"
-              color="warning"
+              :color="dash_warning_color"
              name="warning"
            >
              <q-tooltip>Warning</q-tooltip>
@@ -327,7 +337,7 @@
            <q-icon
              v-else
              style="font-size: 1.3rem"
-              color="negative"
+              :color="dash_negative_color"
              name="error"
            >
              <q-tooltip>Error</q-tooltip>
@@ -360,7 +370,13 @@
              style="cursor: pointer; text-decoration: underline"
              class="text-primary"
              @click="showPingInfo(props.row)"
-              >Last Output</span
+              >{{
                grep(props.row.check_result.more_info, [
                  "transmitted",
                  "received",
                  "packet loss",
                ])
              }}</span
            >
            <span
              v-else-if="
@@ -369,7 +385,7 @@
              style="cursor: pointer; text-decoration: underline"
              class="text-primary"
              @click="showScriptOutput(props.row.check_result)"
-              >Last Output</span
+              >{{ processOutput(props.row.check_result) }}</span
            >
            <span
              v-else-if="
@@ -382,7 +398,9 @@
            >
            <span
              v-else-if="
-                props.row.check_type === 'diskspace' ||
+                ['diskspace', 'cpuload', 'memory'].includes(
                  props.row.check_type,
                ) ||
                (props.row.check_type === 'winsvc' && props.row.check_result.id)
              "
              >{{ props.row.check_result.more_info }}</span
@@ -415,6 +433,7 @@ import {
  updateCheck,
  removeCheck,
  resetCheck,
  resetAllChecksStatus,
  runAgentChecks,
 } from "@/api/checks";
 import { fetchAgentChecks } from "@/api/agents";
@@ -479,6 +498,10 @@ export default {
    const tabHeight = computed(() => store.state.tabHeight);
    const agentPlatform = computed(() => store.state.agentPlatform);
    const formatDate = computed(() => store.getters.formatDate);
    const dash_info_color = computed(() => store.state.dash_info_color);
    const dash_positive_color = computed(() => store.state.dash_positive_color);
    const dash_negative_color = computed(() => store.state.dash_negative_color);
    const dash_warning_color = computed(() => store.state.dash_warning_color);
    // setup quasar
    const $q = useQuasar();
@@ -495,6 +518,40 @@ export default {
      descending: false,
    });
    // TODO this will break when we add translations
    function grep(text, stringsToMatch) {
      try {
        const lines = text.split("\n");
        const matched = [];
        for (const line of lines) {
          if (stringsToMatch.every((str) => line.includes(str))) {
            matched.push(line);
          }
        }
        return matched.length > 0 ? matched.join("\n") : "Last Output";
      } catch (e) {
        console.error(e);
        return "Last Output";
      }
    }
    function processOutput(result) {
      try {
        if (result.stdout && result.stdout.trim() !== "") {
          return result.stdout.substring(0, 60);
        } else if (result.stderr && result.stderr.trim() !== "") {
          return result.stderr.substring(0, 60);
        } else {
          return "Last Output";
        }
      } catch (e) {
        console.error(e);
        return "Last Output";
      }
    }
    function getAlertSeverity(check) {
      if (check.check_result.alert_severity) {
        return check.check_result.alert_severity;
@@ -568,7 +625,7 @@ export default {
        notifySuccess(result);
        refreshDashboard(
          false /* clearTreeSelected */,
-          false /* clearSubTable */
+          false /* clearSubTable */,
        );
      } catch (e) {
        console.error(e);
@@ -576,6 +633,26 @@ export default {
      loading.value = false;
    }
    function resetAllChecks() {
      $q.dialog({
        title: "Are you sure?",
        message: "Reset all checks status",
        cancel: true,
        ok: { label: "Reset", color: "negative" },
        persistent: true,
      }).onOk(async () => {
        loading.value = true;
        try {
          const result = await resetAllChecksStatus(selectedAgent.value);
          await getChecks();
          notifySuccess(result);
        } catch (e) {
          console.error(e);
        }
        loading.value = false;
      });
    }
    function showEventInfo(data) {
      $q.dialog({
        component: EventLogCheckOutput,
@@ -631,6 +708,7 @@ export default {
        componentProps: {
          check: check,
          parent: !check ? { agent: selectedAgent.value } : undefined,
          plat: type === "script" ? agentPlatform.value : undefined,
        },
      }).onOk(getChecks);
    }
@@ -653,6 +731,10 @@ export default {
      tabHeight,
      selectedAgent,
      agentPlatform,
      dash_info_color,
      dash_positive_color,
      dash_warning_color,
      dash_negative_color,
      // non-reactive data
      columns,
@@ -666,6 +748,9 @@ export default {
      formatDate,
      getAlertSeverity,
      runChecks,
      resetAllChecks,
      grep,
      processOutput,
      // dialogs
      showScriptOutput,
--- a/src/components/agents/NotesTab.vue
+++ b/src/components/agents/NotesTab.vue
@@ -166,7 +166,7 @@ export default {
          type: "textarea",
          isValid: (val) => !!val,
        },
-        style: "width: 30vw; max-width: 50vw;",
+        style: "width: 90vw; max-width: 90vw",
        ok: { label: "Add" },
        cancel: true,
      }).onOk(async () => {
@@ -193,7 +193,7 @@ export default {
          type: "textarea",
          isValid: (val) => !!val,
        },
-        style: "width: 30vw; max-width: 50vw;",
+        style: "width: 90vw; max-width: 90vw",
        ok: { label: "Save" },
        cancel: true,
      }).onOk(async (data) => {
--- a/src/components/agents/SummaryTab.vue
+++ b/src/components/agents/SummaryTab.vue
@@ -18,6 +18,33 @@
        icon="refresh"
        @click="refreshSummary"
      />
      <q-icon
        v-if="summary.status === 'overdue'"
        name="fas fa-signal"
        size="1.2em"
        :color="dash_negative_color"
        class="q-mr-sm"
      >
        <q-tooltip>Agent overdue</q-tooltip>
      </q-icon>
      <q-icon
        v-else-if="summary.status === 'offline'"
        name="fas fa-signal"
        size="1.2em"
        :color="dash_warning_color"
        class="q-mr-sm"
      >
        <q-tooltip>{{ store.getters.formatDate(summary.last_seen) }}</q-tooltip>
      </q-icon>
      <q-icon
        v-else
        name="fas fa-signal"
        size="1.2em"
        :color="dash_positive_color"
        class="q-mr-sm"
      >
        <q-tooltip>{{ store.getters.formatDate(summary.last_seen) }}</q-tooltip>
      </q-icon>
      <b>{{ summary.hostname }}</b>
      <span v-if="summary.maintenance_mode">
        &bull; <q-badge color="green"> Maintenance Mode </q-badge>
@@ -60,7 +87,7 @@
            </q-item-section>
            <q-item-section>{{ summary.make_model }}</q-item-section>
          </q-item>
-          <q-item v-for="(cpu, i) in summary.cpu_model" :key="cpu + i">
+          <q-item>
            <q-item-section avatar>
              <q-icon name="fas fa-microchip" />
            </q-item-section>
@@ -87,6 +114,13 @@
            </q-item-section>
            <q-item-section>{{ summary.graphics }}</q-item-section>
          </q-item>
          <!-- serial -->
          <q-item v-if="serial_number">
            <q-item-section avatar>
              <q-icon name="fa-solid fa-barcode" />
            </q-item-section>
            <q-item-section>{{ serial_number }}</q-item-section>
          </q-item>
          <q-item>
            <q-item-section avatar>
              <q-icon name="fas fa-globe-americas" />
@@ -110,7 +144,7 @@
              size="lg"
              square
              icon="done"
-              color="green"
+              :color="dash_positive_color"
              text-color="white"
            />
            <small>{{ summary.checks.passing }} checks passing</small>
@@ -120,7 +154,7 @@
              size="lg"
              square
              icon="cancel"
-              color="red"
+              :color="dash_negative_color"
              text-color="white"
            />
            <small>{{ summary.checks.failing }} checks failing</small>
@@ -130,7 +164,7 @@
              size="lg"
              square
              icon="warning"
-              color="warning"
+              :color="dash_warning_color"
              text-color="white"
            />
            <small>{{ summary.checks.warning }} checks warning</small>
@@ -140,7 +174,7 @@
              size="lg"
              square
              icon="info"
-              color="info"
+              :color="dash_info_color"
              text-color="white"
            />
            <small>{{ summary.checks.info }} checks info</small>
@@ -158,6 +192,20 @@
          >
        </div>
        <div v-else>No checks</div>
        <span
          v-if="customFields.length > 0"
          class="text-subtitle2 text-bold block q-mt-xl"
          >Custom Fields</span
        >
        <q-list dense>
          <q-item v-for="(field, i) in customFields" :key="field + i">
            <q-item-section thumbnail>
              <q-icon name="fas fa-user" size="xs" />
            </q-item-section>
            <q-item-section>{{ field.name }}: {{ field.value }}</q-item-section>
          </q-item>
        </q-list>
      </div>
      <div class="col-1"></div>
      <!-- right -->
@@ -193,6 +241,7 @@ import {
  openAgentWindow,
 } from "@/api/agents";
 import { notifySuccess } from "@/utils/notify";
 import { fetchCustomFields } from "@/api/core";
 // ui imports
 import AgentActionMenu from "@/components/agents/AgentActionMenu.vue";
@@ -207,18 +256,38 @@ export default {
    const store = useStore();
    const selectedAgent = computed(() => store.state.selectedRow);
    const refreshSummaryTab = computed(() => store.state.refreshSummaryTab);
    const dash_info_color = computed(() => store.state.dash_info_color);
    const dash_positive_color = computed(() => store.state.dash_positive_color);
    const dash_negative_color = computed(() => store.state.dash_negative_color);
    const dash_warning_color = computed(() => store.state.dash_warning_color);
    // summary tab logic
    const summary = ref(null);
    const customFieldsDefinitions = ref(null);
    const loading = ref(false);
    const serial_number = computed(() => {
      if (summary.value.plat === "windows") {
        return summary.value.wmi_detail.bios?.[0]?.[0]?.SerialNumber;
      } else {
        return summary.value.wmi_detail.serialnumber;
      }
    });
    const cpu = computed(() => {
      if (summary.value.cpu_model?.length > 1) {
        return `${summary.value.cpu_model.length}x ${summary.value.cpu_model[0]}`;
      }
      return summary.value.cpu_model[0];
    });
    function diskBarColor(percent) {
      if (percent < 80) {
-        return "positive";
+        return dash_positive_color.value;
-      } else if (percent > 80 && percent < 95) {
+      } else if (percent >= 80 && percent < 95) {
-        return "warning";
+        return dash_warning_color.value;
      } else {
-        return "negative";
+        return dash_negative_color.value;
      }
    }
@@ -236,9 +305,37 @@ export default {
      return ret;
    });
    const customFields = computed(() => {
      if (!summary.value.custom_fields) {
        return [];
      }
      if (!customFieldsDefinitions.value) {
        return [];
      }
      const ret = [];
      for (const customField of summary.value.custom_fields) {
        const definition = customFieldsDefinitions.value.find(
          (def) => def.id === customField.field,
        );
        if (
          definition &&
          !definition.hide_in_summary &&
          customField.value?.length > 0
        ) {
          ret.push({
            name: definition.name,
            value: customField.value,
          });
        }
      }
      return ret;
    });
    async function getSummary() {
      loading.value = true;
      summary.value = await fetchAgent(selectedAgent.value);
      customFieldsDefinitions.value = await fetchCustomFields();
      store.commit("setRefreshSummaryTab", false);
      store.commit("setAgentPlatform", summary.value.plat);
      loading.value = false;
@@ -246,6 +343,7 @@ export default {
    async function refreshSummary() {
      loading.value = true;
      summary.value = await fetchAgent(selectedAgent.value);
      try {
        const result = await refreshAgentWMI(selectedAgent.value);
        await getSummary();
@@ -277,9 +375,17 @@ export default {
    return {
      // reactive data
      summary,
      customFields,
      loading,
      selectedAgent,
      disks,
      dash_info_color,
      dash_positive_color,
      dash_warning_color,
      dash_negative_color,
      serial_number,
      cpu,
      store,
      // methods
      getSummary,
--- a/src/components/agents/WinUpdateTab.vue
+++ b/src/components/agents/WinUpdateTab.vue
@@ -128,7 +128,7 @@
            <q-icon
              v-else-if="props.row.action === 'ignore'"
              name="fas fa-check"
-              color="negative"
+              :color="dash_negative_color"
            >
              <q-tooltip>Ignore</q-tooltip>
            </q-icon>
@@ -144,7 +144,7 @@
            <q-icon
              v-if="props.row.installed"
              name="fas fa-check"
-              color="positive"
+              :color="dash_positive_color"
            >
              <q-tooltip>Installed</q-tooltip>
            </q-icon>
@@ -158,11 +158,15 @@
            <q-icon
              v-else-if="props.row.action == 'ignore'"
              name="fas fa-ban"
-              color="negative"
+              :color="dash_negative_color"
            >
              <q-tooltip>Ignored</q-tooltip>
            </q-icon>
-            <q-icon v-else name="fas fa-exclamation" color="warning">
+            <q-icon
              v-else
              name="fas fa-exclamation"
              :color="dash_warning_color"
            >
              <q-tooltip>Missing</q-tooltip>
            </q-icon>
          </q-td>
@@ -251,6 +255,9 @@ export default {
    const tabHeight = computed(() => store.state.tabHeight);
    const agentPlatform = computed(() => store.state.agentPlatform);
    const formatDate = computed(() => store.getters.formatDate);
    const dash_positive_color = computed(() => store.state.dash_positive_color);
    const dash_negative_color = computed(() => store.state.dash_negative_color);
    const dash_warning_color = computed(() => store.state.dash_warning_color);
    // setup quasar
    const $q = useQuasar();
@@ -310,9 +317,10 @@ export default {
    }
    function showUpdateDetails(update) {
      const color = $q.dark.isActive ? "white" : "";
      let support_urls = "";
      update.more_info_urls.forEach((u) => {
-        support_urls += `<a href='${u}' target='_blank'>${u}</a><br/>`;
+        support_urls += `<a style='color: ${color}' href='${u}' target='_blank'>${u}</a><br/>`;
      });
      let cats = update.categories.join(", ");
      $q.dialog({
@@ -347,6 +355,9 @@ export default {
      selectedAgent,
      tabHeight,
      agentPlatform,
      dash_positive_color,
      dash_warning_color,
      dash_negative_color,
      // non-reactive data
      columns,
--- a/src/components/agents/WmiDetail.vue
+++ b/src/components/agents/WmiDetail.vue
@@ -8,16 +8,16 @@
            v
          }}</q-badge>
          <q-btn
-              v-if="!!v"
+            v-if="!!v"
-              size="sm"
+            size="sm"
-              class="q-ml-xs"
+            class="q-ml-xs"
-              flat
+            flat
-              round
+            round
-              icon="content_copy"
+            icon="content_copy"
-              @click="copyValueToClip(v)"
+            @click="copyValueToClip(v)"
-            >
+          >
-              <q-tooltip>Copy to Clipboard</q-tooltip>
+            <q-tooltip>Copy to Clipboard</q-tooltip>
-            </q-btn>
+          </q-btn>
        </div>
      </div>
      <q-separator v-if="info.length > 1" />
@@ -42,10 +42,9 @@ export default {
    const tabHeight = computed(() => store.state.tabHeight);
    function copyValueToClip(val) {
-      copyToClipboard(val)
+      copyToClipboard(val).then(() => {
-        .then(() => {
+        notifySuccess("Copied to clipboard");
-          notifySuccess("Copied to clipboard");
+      });
        })
    }
    return {
--- a/src/components/agents/remotebg/ProcessManager.vue
+++ b/src/components/agents/remotebg/ProcessManager.vue
@@ -17,70 +17,85 @@
    :loading="loading"
  >
    <template v-slot:top>
-      <q-btn
+      <div class="q-gutter-md flex flex-center items-center">
        v-if="isPolling"
        dense
        flat
        push
        @click="stopPoll"
        icon="stop"
        label="Stop Live Refresh"
      />
      <q-btn
        v-else
        dense
        flat
        push
        @click="startPoll"
        icon="play_arrow"
        label="Resume Live Refresh"
      />
      <q-space />
      <div class="q-pa-md q-gutter-sm">
        <q-btn
-          :disable="pollInterval === 1"
+          v-if="isPolling"
          dense
-          @click="pollIntervalChanged('subtract')"
+          flat
          push
-          icon="remove"
+          @click="stopPoll"
-          size="sm"
+          icon="stop"
-          color="grey"
+          label="Stop Live Refresh"
        />
        <q-btn
          v-else
          dense
          flat
          push
-          icon="add"
+          @click="startPoll"
-          size="sm"
+          icon="play_arrow"
-          color="grey"
+          label="Resume Live Refresh"
          @click="pollIntervalChanged('add')"
        />
      </div>
      <div class="text-overline">
        <q-badge
          align="middle"
          size="sm"
          class="text-h6"
          color="blue"
          :label="pollInterval"
        />
        Refresh interval (seconds)
      </div>
-      <q-space />
+        <div class="flex flex-center q-ml-md">
-      <q-input v-model="filter" outlined label="Search" dense clearable>
+          <q-icon name="fas fa-microchip" class="q-mr-xs" />
-        <template v-slot:prepend>
+          <div class="text-caption q-mr-sm">
-          <q-icon name="search" />
+            CPU Usage:
-        </template>
+            <span class="text-body1 text-weight-medium"
-      </q-input>
+              >{{ totalCpuUsage }}%</span
-      <!-- file download doesn't work so disabling -->
+            >
-      <export-table-btn
+          </div>
-        v-show="false"
+
-        class="q-ml-sm"
+          <q-icon name="fas fa-memory" class="q-mr-xs" />
-        :columns="columns"
+          <div class="text-caption">
-        :data="processes"
+            RAM Usage:
-      />
+            <span class="text-body1 text-weight-medium"
              >{{ bytes2Human(totalRamUsage) }}/{{ total_ram }} GB</span
            >
          </div>
        </div>
        <q-space />
        <div class="q-pa-md q-gutter-sm">
          <q-btn
            :disable="pollInterval === 1"
            dense
            @click="pollIntervalChanged('subtract')"
            push
            icon="remove"
            size="sm"
            color="grey"
          />
          <q-btn
            dense
            push
            icon="add"
            size="sm"
            color="grey"
            @click="pollIntervalChanged('add')"
          />
        </div>
        <div class="text-overline">
          <q-badge
            align="middle"
            size="sm"
            class="text-h6"
            color="blue"
            :label="pollInterval"
          />
          Refresh interval (seconds)
        </div>
        <q-space />
        <q-input v-model="filter" outlined label="Search" dense clearable>
          <template v-slot:prepend>
            <q-icon name="search" />
          </template>
        </q-input>
      </div>
    </template>
    <template v-slot:body="props">
      <q-tr :props="props" class="cursor-pointer">
@@ -121,9 +136,6 @@ import {
 import { bytes2Human } from "@/utils/format";
 import { notifySuccess } from "@/utils/notify";
 // ui imports
 import ExportTableBtn from "@/components/ui/ExportTableBtn.vue";
 const columns = [
  {
    name: "name",
@@ -164,7 +176,6 @@ const columns = [
 ];
 export default {
  components: { ExportTableBtn },
  name: "ProcessManager",
  props: {
    agent_id: !String,
@@ -175,52 +186,71 @@ export default {
    const poll = ref(null);
    const isPolling = computed(() => !!poll.value);
-    async function startPoll() {
+    function startPoll() {
-      await getProcesses();
+      stopPoll();
-      if (processes.value.length > 0) {
+      getProcesses();
-        refreshProcesses();
+      poll.value = setInterval(() => {
-      }
+        getProcesses();
      }, pollInterval.value * 1000);
    }
    function stopPoll() {
-      clearInterval(poll.value);
+      if (poll.value) {
-      poll.value = null;
+        clearInterval(poll.value);
        poll.value = null;
      }
    }
    function pollIntervalChanged(action) {
      if (action === "subtract" && pollInterval.value <= 1) {
        stopPoll();
        startPoll();
        return;
      }
      if (action === "add") {
        pollInterval.value++;
-      } else {
+      } else if (action === "subtract" && pollInterval.value > 1) {
        pollInterval.value--;
      }
-      stopPoll();
+      if (isPolling.value) {
-      startPoll();
+        startPoll();
      }
    }
    // process manager logic
    const processes = ref([]);
    const filter = ref("");
-    const memory = ref(null);
+    const total_ram = ref(0);
    const loading = ref(false);
    const totalCpuUsage = computed(() => {
      if (!Array.isArray(processes.value) || processes.value.length === 0) {
        return "0.00";
      }
      const total = processes.value.reduce((acc, proc) => {
        const cpuPercent = parseFloat(proc.cpu_percent);
        if (isNaN(cpuPercent)) {
          return acc;
        }
        return acc + cpuPercent;
      }, 0);
      return total.toFixed(2);
    });
    const totalRamUsage = computed(() => {
      return processes.value.reduce((acc, proc) => acc + proc.membytes, 0);
    });
    async function getProcesses() {
      loading.value = true;
-      processes.value = await fetchAgentProcesses(props.agent_id);
+      try {
        processes.value = await fetchAgentProcesses(props.agent_id);
      } catch (error) {
        console.error(error);
      }
      loading.value = false;
    }
    function refreshProcesses() {
      poll.value = setInterval(() => {
        getProcesses(props.agent_id);
      }, pollInterval.value * 1000);
    }
    async function killProcess(pid) {
      loading.value = true;
      let result = "";
@@ -235,11 +265,8 @@ export default {
    // lifecycle hooks
    onMounted(async () => {
-      memory.value = await fetchAgent(props.agent_id).total_ram;
+      total_ram.value = (await fetchAgent(props.agent_id)).total_ram;
-      await getProcesses();
+      startPoll();
      if (processes.value.length > 0) {
        refreshProcesses();
      }
    });
    onBeforeUnmount(() => clearInterval(poll.value));
@@ -248,10 +275,12 @@ export default {
      // reactive data
      processes,
      filter,
-      memory,
+      total_ram,
      isPolling,
      pollInterval,
      loading,
      totalCpuUsage,
      totalRamUsage,
      // non-reactive data
      columns,
--- a/src/components/automation/PolicyAutomatedTasksTab.vue
+++ b/src/components/automation/PolicyAutomatedTasksTab.vue
@@ -254,7 +254,7 @@ export default {
      pagination: {
        rowsPerPage: 0,
        sortBy: "name",
-        descending: true,
+        descending: false,
      },
    };
  },
@@ -321,7 +321,7 @@ export default {
    runTask(task) {
      if (!task.enabled) {
        this.notifyError(
-          "Task cannot be run when it's disabled. Enable it first."
+          "Task cannot be run when it's disabled. Enable it first.",
        );
        return;
      }
--- a/src/components/automation/PolicyChecksTab.vue
+++ b/src/components/automation/PolicyChecksTab.vue
@@ -217,6 +217,7 @@
 </template>
 <script>
 import { mapState } from "vuex";
 import mixins from "@/mixins/mixins";
 import PolicyStatus from "@/components/automation/modals/PolicyStatus.vue";
 import DiskSpaceCheck from "@/components/checks/DiskSpaceCheck.vue";
@@ -268,6 +269,9 @@ export default {
      if (newValue !== oldValue) this.getChecks();
    },
  },
  computed: {
    ...mapState(["dash_positive_color", "dash_warning_color"]),
  },
  methods: {
    getChecks() {
      this.$q.loading.show();
@@ -295,7 +299,9 @@ export default {
      data.check_alert = true;
      const act = !action ? "enabled" : "disabled";
-      const color = !action ? "positive" : "warning";
+      const color = !action
        ? this.dash_positive_color
        : this.dash_warning_color;
      this.$axios
        .put(`/checks/${id}/`, data)
        .then(() => {
--- a/src/components/automation/modals/PolicyStatus.vue
+++ b/src/components/automation/modals/PolicyStatus.vue
@@ -1,7 +1,16 @@
 <template>
  <q-dialog ref="dialog" @hide="onHide">
-    <q-card class="q-dialog-plugin" style="width: 90vw">
+    <q-card class="q-dialog-plugin" style="min-width: 70vw">
      <q-bar>
        <q-btn
          ref="refresh"
          @click="refresh"
          class="q-mr-sm"
          dense
          flat
          push
          icon="refresh"
        />
        {{ title.slice(0, 27) }}
        <q-space />
        <q-btn dense flat icon="close" v-close-popup>
@@ -41,7 +50,7 @@
              <q-td v-if="props.row.status === 'passing'">
                <q-icon
                  style="font-size: 1.3rem"
-                  color="positive"
+                  :color="dash_positive_color"
                  name="check_circle"
                >
                  <q-tooltip>Passing</q-tooltip>
@@ -51,7 +60,7 @@
                <q-icon
                  v-if="props.row.alert_severity === 'info'"
                  style="font-size: 1.3rem"
-                  color="info"
+                  :color="dash_info_color"
                  name="info"
                >
                  <q-tooltip>Informational</q-tooltip>
@@ -59,7 +68,7 @@
                <q-icon
                  v-else-if="props.row.alert_severity === 'warning'"
                  style="font-size: 1.3rem"
-                  color="warning"
+                  :color="dash_warning_color"
                  name="warning"
                >
                  <q-tooltip>Warning</q-tooltip>
@@ -67,7 +76,7 @@
                <q-icon
                  v-else
                  style="font-size: 1.3rem"
-                  color="negative"
+                  :color="dash_negative_color"
                  name="error"
                >
                  <q-tooltip>Error</q-tooltip>
@@ -148,7 +157,7 @@
 <script>
 import { computed } from "vue";
-import { useStore } from "vuex";
+import { useStore, mapState } from "vuex";
 import ScriptOutput from "@/components/checks/ScriptOutput.vue";
 import EventLogCheckOutput from "@/components/checks/EventLogCheckOutput.vue";
@@ -220,6 +229,12 @@ export default {
    };
  },
  computed: {
    ...mapState([
      "dash_info_color",
      "dash_positive_color",
      "dash_negative_color",
      "dash_warning_color",
    ]),
    title() {
      return !!this.item.readable_desc
        ? this.item.readable_desc + " Status"
@@ -275,6 +290,13 @@ export default {
        },
      });
    },
    refresh() {
      if (this.type === "task") {
        this.getTaskData();
      } else {
        this.getCheckData();
      }
    },
    show() {
      this.$refs.dialog.show();
    },
--- a/src/components/checks/ScriptCheck.vue
+++ b/src/components/checks/ScriptCheck.vue
@@ -8,7 +8,7 @@
          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
        </q-btn>
      </q-bar>
-      <q-card-section v-if="scriptOptions.length === 0">
+      <q-card-section v-if="filterByPlatformOptions.length === 0">
        <p>You need to upload a script first</p>
        <p>Settings -> Script Manager</p>
      </q-card-section>
@@ -19,7 +19,7 @@
            :rules="[(val) => !!val || '*Required']"
            outlined
            v-model="state.script"
-            :options="scriptOptions"
+            :options="filterByPlatformOptions"
            label="Select script"
            mapOptions
            :disable="!!check"
@@ -39,6 +39,19 @@
            new-value-mode="add"
          />
        </q-card-section>
        <q-card-section>
          <q-select
            dense
            :label="envVarsLabel"
            filled
            v-model="state.env_vars"
            use-input
            use-chips
            multiple
            hide-dropdown-icon
            new-value-mode="add"
          />
        </q-card-section>
        <q-card-section>
          <tactical-dropdown
            label="Informational return codes (press Enter after typing each code)"
@@ -115,6 +128,7 @@ import { useDialogPluginComponent } from "quasar";
 import { useCheckModal } from "@/composables/checks";
 import { useScriptDropdown } from "@/composables/scripts";
 import { validateRetcode } from "@/utils/validation";
 import { envVarsLabel } from "@/constants/constants";
 // ui imports
 import TacticalDropdown from "@/components/ui/TacticalDropdown.vue";
@@ -126,16 +140,24 @@ export default {
  props: {
    check: Object,
    parent: Object, // {agent: agent.agent_id} or {policy: policy.id}
    plat: String,
  },
  setup(props) {
    // setup quasar dialog
    const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
    // setup script dropdown
-    const { script, scriptOptions, defaultTimeout, defaultArgs } =
+    const {
-      useScriptDropdown(props.check ? props.check.script : undefined, {
+      script,
-        onMount: true,
+      filterByPlatformOptions,
-      });
+      defaultTimeout,
      defaultArgs,
      defaultEnvVars,
    } = useScriptDropdown({
      script: props.check ? props.check.script : undefined,
      plat: props.plat,
      onMount: true,
    });
    // check logic
    const { state, loading, submit, failOptions, severityOptions } =
@@ -145,6 +167,7 @@ export default {
          ...props.parent,
          script,
          script_args: defaultArgs,
          env_vars: defaultEnvVars,
          timeout: defaultTimeout,
          check_type: "script",
          fails_b4_alert: 1,
@@ -161,8 +184,9 @@ export default {
      // non-reactive data
      failOptions,
-      scriptOptions,
+      filterByPlatformOptions,
      severityOptions,
      envVarsLabel,
      // methods
      submit,
--- a/src/components/checks/ScriptOutput.vue
+++ b/src/components/checks/ScriptOutput.vue
@@ -20,12 +20,18 @@
        </div>
        <br />
        <div v-if="scriptInfo.stdout">
-          Standard Output
+          <script-output-copy-clip
            label="Standard Output"
            :data="scriptInfo.stdout"
          />
          <q-separator />
          <pre>{{ scriptInfo.stdout }}</pre>
        </div>
        <div v-if="scriptInfo.stderr">
-          Standard Error
+          <script-output-copy-clip
            label="Standard Error"
            :data="scriptInfo.stderr"
          />
          <q-separator />
          <pre>{{ scriptInfo.stderr }}</pre>
        </div>
@@ -43,8 +49,13 @@ import { computed } from "vue";
 import { useStore } from "vuex";
 import { useDialogPluginComponent } from "quasar";
 import ScriptOutputCopyClip from "@/components/scripts/ScriptOutputCopyClip.vue";
 export default {
  name: "ScriptOutput",
  components: {
    ScriptOutputCopyClip,
  },
  emits: [...useDialogPluginComponent.emits],
  props: { scriptInfo: !Object },
  setup() {
--- a/src/components/core/APIKeysForm.vue
+++ b/src/components/core/APIKeysForm.vue
@@ -122,7 +122,7 @@ export default {
      try {
        const result = props.APIKey
-          ? await editAPIKey(data)
+          ? await editAPIKey(data.id, data)
          : await saveAPIKey(data);
        onDialogOK();
        notifySuccess(result);
--- a/src/components/core/APIKeysTable.vue
+++ b/src/components/core/APIKeysTable.vue
@@ -208,7 +208,7 @@ export default {
    }
    // component lifecycle hooks
-    onMounted(getAPIKeys());
+    onMounted(getAPIKeys);
    return {
      // reactive data
      keys,
--- a/src/components/logs/AuditManager.vue
+++ b/src/components/logs/AuditManager.vue
@@ -304,6 +304,9 @@ export default {
    // setup vuex
    const store = useStore();
    const formatDate = computed(() => store.getters.formatDate);
    const dash_positive_color = computed(() => store.state.dash_positive_color);
    const dash_negative_color = computed(() => store.state.dash_negative_color);
    const dash_warning_color = computed(() => store.state.dash_warning_color);
    // setup dropdowns
    const { clientOptions, getClientOptions } = useClientDropdown();
@@ -381,12 +384,18 @@ export default {
    }
    function formatActionColor(action) {
-      if (action === "add") return "success";
+      switch (action.toLowerCase()) {
-      else if (action === "agent_install") return "success";
+        case "modify":
-      else if (action === "modify") return "warning";
+          return dash_warning_color.value;
-      else if (action === "delete") return "negative";
+        case "add":
-      else if (action === "failed_login") return "negative";
+        case "agent_install":
-      else return "primary";
+          return dash_positive_color.value;
        case "delete":
        case "failed_login":
          return dash_negative_color.value;
        default:
          return "primary";
      }
    }
    // watchers
--- a/src/components/logs/DebugLog.vue
+++ b/src/components/logs/DebugLog.vue
@@ -68,25 +68,25 @@
        />
        <q-radio
          v-model="logLevelFilter"
-          color="cyan"
+          :color="dash_info_color"
          val="info"
          label="Info"
        />
        <q-radio
          v-model="logLevelFilter"
-          color="red"
+          :color="dash_negative_color"
          val="critical"
          label="Critical"
        />
        <q-radio
          v-model="logLevelFilter"
-          color="red"
+          :color="dash_negative_color"
          val="error"
          label="Error"
        />
        <q-radio
          v-model="logLevelFilter"
-          color="yellow"
+          :color="dash_warning_color"
          val="warning"
          label="Warning"
        />
@@ -109,7 +109,7 @@
      <template v-slot:top-row>
        <q-tr v-if="Array.isArray(debugLog) && debugLog.length === 1000">
          <q-td colspan="100%">
-            <q-icon name="warning" color="warning" />
+            <q-icon name="warning" :color="dash_warning_color" />
            Results are limited to 1000 rows.
          </q-td>
        </q-tr>
@@ -203,6 +203,10 @@ export default {
    const store = useStore();
    const formatDate = computed(() => store.getters.formatDate);
    const dash_info_color = computed(() => store.state.dash_info_color);
    const dash_positive_color = computed(() => store.state.dash_positive_color);
    const dash_negative_color = computed(() => store.state.dash_negative_color);
    const dash_warning_color = computed(() => store.state.dash_warning_color);
    // setup dropdowns
    const { agentOptions, getAgentOptions } = useAgentDropdown();
@@ -261,6 +265,10 @@ export default {
      agentOptions,
      loading,
      filter,
      dash_info_color,
      dash_positive_color,
      dash_warning_color,
      dash_negative_color,
      // non-reactive data
      columns,
--- a/src/components/modals/admin/UserForm.vue
+++ b/src/components/modals/admin/UserForm.vue
@@ -116,7 +116,8 @@
 </template>
 <script>
-import { mapState } from "vuex";
+import { mapState as piniaMapState } from "pinia";
 import { useAuthStore } from "@/stores/auth";
 import mixins from "@/mixins/mixins";
 export default {
@@ -145,7 +146,7 @@ export default {
    title() {
      return this.user ? "Edit User" : "Add User";
    },
-    ...mapState({
+    ...piniaMapState(useAuthStore, {
      logged_in_user: (state) => state.username,
    }),
  },
--- a/src/components/modals/agents/AgentDownload.vue
+++ b/src/components/modals/agents/AgentDownload.vue
@@ -10,10 +10,13 @@
      </q-card-actions>
    </q-card-section>
    <q-card-section>
-      <p class="text-subtitle1">
+      <p v-if="info.plat === 'windows'" class="text-subtitle1">
        Download the agent then run the following command from an elevated
        command prompt on the device you want to add.
      </p>
      <p v-else-if="info.plat === 'darwin'" class="text-subtitle1">
        Run the following command from a terminal
      </p>
      <p>
        <q-field outlined :color="$q.dark.isActive ? 'white' : 'black'">
          <code>{{ info.data.cmd }}</code>
@@ -37,7 +40,7 @@
          </q-badge>
          <span>Do not popup any message boxes during install</span>
        </div>
-        <div class="q-pa-xs q-gutter-xs">
+        <div v-if="info.plat === 'windows'" class="q-pa-xs q-gutter-xs">
          <q-badge class="text-caption q-mr-xs" color="grey" text-color="black">
            <code
              >-local-mesh "C:\\&lt;some folder or
@@ -46,7 +49,7 @@
          </q-badge>
          <span> To skip downloading the Mesh Agent during the install.</span>
        </div>
-        <div class="q-pa-xs q-gutter-xs">
+        <div v-if="info.plat === 'windows'" class="q-pa-xs q-gutter-xs">
          <q-badge class="text-caption q-mr-xs" color="grey" text-color="black">
            <code
              >-meshdir "C:\Program Files\Your Company Name\Mesh Agent"</code
@@ -63,7 +66,7 @@
          </q-badge>
          <span>Don't install the mesh agent</span>
        </div>
-        <div class="q-pa-xs q-gutter-xs">
+        <div v-if="info.plat === 'windows'" class="q-pa-xs q-gutter-xs">
          <q-badge class="text-caption q-mr-xs" color="grey" text-color="black">
            <code>-cert "C:\\&lt;some folder or path&gt;\\ca.pem"</code>
          </q-badge>
@@ -87,11 +90,12 @@
        Note: the auth token above will be valid for {{ info.expires }} hours.
      </p>
      <q-btn
        v-if="info.plat === 'windows'"
        type="a"
        :href="info.data.url"
        color="primary"
        label="Download Agent"
-      />
+      ></q-btn>
    </q-card-section>
  </q-card>
 </template>
--- a/src/components/modals/agents/BulkAction.vue
+++ b/src/components/modals/agents/BulkAction.vue
@@ -83,12 +83,29 @@
          <tactical-dropdown
            :rules="[(val) => !!val || '*Required']"
            v-model="state.script"
-            :options="filteredScriptOptions"
+            :options="filterByPlatformOptions"
            label="Select Script"
            outlined
            mapOptions
            filterable
-          />
+          >
            <template v-slot:after>
              <q-btn
                size="sm"
                round
                dense
                flat
                icon="info"
                @click="openScriptURL"
              >
                <q-tooltip
                  v-if="syntax"
                  class="bg-white text-primary text-body1"
                  v-html="formatScriptSyntax(syntax)"
                />
              </q-btn>
            </template>
          </tactical-dropdown>
        </q-card-section>
        <q-card-section v-if="mode === 'script'" class="q-pt-none">
          <tactical-dropdown
@@ -102,6 +119,18 @@
            new-value-mode="add"
          />
        </q-card-section>
        <q-card-section v-if="mode === 'script'" class="q-pt-none">
          <tactical-dropdown
            v-model="state.env_vars"
            :label="envVarsLabel"
            filled
            use-input
            multiple
            hide-dropdown-icon
            input-debounce="0"
            new-value-mode="add"
          />
        </q-card-section>
        <q-card-section v-if="mode === 'command'">
          <p>Shell</p>
@@ -141,6 +170,39 @@
          </q-checkbox>
        </q-card-section>
        <q-card-section v-if="mode === 'script'" class="q-pt-none">
          <div class="q-gutter-sm">
            <q-checkbox
              label="Save results to Custom Field"
              v-model="collector"
              @update:model-value="
                state.custom_field = null;
                state.collector_all_output = false;
              "
            />
            <q-checkbox
              v-model="state.save_to_agent_note"
              label="Save results to Agent Note"
            />
          </div>
        </q-card-section>
        <q-card-section v-if="mode === 'script' && collector">
          <tactical-dropdown
            :rules="[(val) => !!val || '*Required']"
            outlined
            v-model="state.custom_field"
            :options="customFieldOptions"
            label="Select custom field"
            mapOptions
            filterable
          />
          <q-checkbox
            v-model="state.collector_all_output"
            label="Save all output"
          />
        </q-card-section>
        <q-card-section v-if="mode === 'script' || mode === 'command'">
          <q-input
            v-model.number="state.timeout"
@@ -198,17 +260,24 @@
 <script>
 // composition imports
-import { ref, computed, watch, onMounted } from "vue";
+import {
-import { useStore } from "vuex";
+  ref,
-import { useDialogPluginComponent } from "quasar";
+  reactive,
  computed,
  watch,
  onMounted,
  defineComponent,
 } from "vue";
 import { useDialogPluginComponent, openURL } from "quasar";
 import { useScriptDropdown } from "@/composables/scripts";
 import { useAgentDropdown } from "@/composables/agents";
 import { useClientDropdown, useSiteDropdown } from "@/composables/clients";
 import { useCustomFieldDropdown } from "@/composables/core";
 import { runBulkAction } from "@/api/agents";
 import { notifySuccess } from "@/utils/notify";
 import { formatScriptSyntax } from "@/utils/format";
 import { cmdPlaceholder } from "@/composables/agents";
-import { removeExtraOptionCategories } from "@/utils/format";
+import { envVarsLabel, runAsUserToolTip } from "@/constants/constants";
 import { runAsUserToolTip } from "@/constants/constants";
 // ui imports
 import TacticalDropdown from "@/components/ui/TacticalDropdown.vue";
@@ -223,6 +292,7 @@ const monTypeOptions = [
 const osTypeOptions = [
  { label: "Windows", value: "windows" },
  { label: "Linux", value: "linux" },
  { label: "macOS", value: "darwin" },
  { label: "All", value: "all" },
 ];
@@ -238,7 +308,7 @@ const patchModeOptions = [
  { label: "Install", value: "install" },
 ];
-export default {
+export default defineComponent({
  name: "BulkAction",
  components: { TacticalDropdown },
  emits: [...useDialogPluginComponent.emits],
@@ -246,14 +316,8 @@ export default {
    mode: !String,
  },
  setup(props) {
    // setup vuex store
    const store = useStore();
    const showCommunityScripts = computed(
      () => store.state.showCommunityScripts
    );
    const shellOptions = computed(() => {
-      if (state.value.osType === "windows") {
+      if (state.osType === "windows") {
        return [
          { label: "CMD", value: "cmd" },
          { label: "Powershell", value: "powershell" },
@@ -280,17 +344,26 @@ export default {
    // dropdown setup
    const {
      script,
-      scriptOptions,
+      plat,
      filterByPlatformOptions,
      defaultTimeout,
      defaultArgs,
      defaultEnvVars,
      syntax,
      link,
      getScriptOptions,
    } = useScriptDropdown();
    const { agents, agentOptions, getAgentOptions } = useAgentDropdown();
    const { site, siteOptions, getSiteOptions } = useSiteDropdown();
    const { client, clientOptions, getClientOptions } = useClientDropdown();
    const { customFieldOptions } = useCustomFieldDropdown({ onMount: true });
    function openScriptURL() {
      link.value ? openURL(link.value) : null;
    }
    // bulk action logic
-    const state = ref({
+    const state = reactive({
      mode: props.mode,
      target: "client",
      monType: "all",
@@ -298,6 +371,9 @@ export default {
      cmd: "",
      shell: "cmd",
      custom_shell: null,
      custom_field: null,
      collector_all_output: false,
      save_to_agent_note: false,
      patchMode: "scan",
      offlineAgents: false,
      client,
@@ -306,38 +382,46 @@ export default {
      script,
      timeout: defaultTimeout,
      args: defaultArgs,
      env_vars: defaultEnvVars,
      run_as_user: false,
    });
    const loading = ref(false);
    const collector = ref(false);
    watch(
-      () => state.value.target,
+      () => state.target,
      () => {
        client.value = null;
        site.value = null;
        agents.value = [];
-      }
+      },
    );
    plat.value = state.osType;
    watch(
-      () => state.value.osType,
+      () => state.osType,
      (newValue) => {
-        state.value.custom_shell = null;
+        state.custom_shell = null;
-        state.value.run_as_user = false;
+        state.run_as_user = false;
        if (newValue === "windows") {
-          state.value.shell = "cmd";
+          state.shell = "cmd";
        } else {
-          state.value.shell = "/bin/bash";
+          state.shell = "/bin/bash";
        }
-      }
+
        // set plat to filter script options
        if (newValue === "all") plat.value = undefined;
        else plat.value = newValue;
      },
    );
    async function submit() {
      loading.value = true;
      try {
-        const data = await runBulkAction(state.value);
+        const data = await runBulkAction(state);
        notifySuccess(data);
        onDialogHide();
      } catch (e) {}
@@ -347,9 +431,7 @@ export default {
    const supportsRunAsUser = () => {
      const modes = ["script", "command"];
-      return (
+      return state.osType === "windows" && modes.includes(state.mode);
        state.value.osType === "windows" && modes.includes(state.value.mode)
      );
    };
    // set modal title and caption
@@ -357,25 +439,10 @@ export default {
      return props.mode === "command"
        ? "Run Bulk Command"
        : props.mode === "script"
-        ? "Run Bulk Script"
+          ? "Run Bulk Script"
-        : props.mode === "patch"
+          : props.mode === "patch"
-        ? "Bulk Patch Management"
+            ? "Bulk Patch Management"
-        : "";
+            : "";
    });
    const filteredScriptOptions = computed(() => {
      if (props.mode !== "script") return [];
      if (state.value.osType === "all") return scriptOptions.value;
      return removeExtraOptionCategories(
        scriptOptions.value.filter(
          (script) =>
            script.category ||
            !script.supported_platforms ||
            script.supported_platforms.length === 0 ||
            script.supported_platforms.includes(state.value.osType)
        )
      );
    });
    // component lifecycle hooks
@@ -383,7 +450,7 @@ export default {
      getAgentOptions();
      getSiteOptions();
      getClientOptions();
-      if (props.mode === "script") getScriptOptions(showCommunityScripts.value);
+      if (props.mode === "script") getScriptOptions();
    });
    return {
@@ -391,8 +458,10 @@ export default {
      state,
      agentOptions,
      clientOptions,
      collector,
      customFieldOptions,
      siteOptions,
-      filteredScriptOptions,
+      filterByPlatformOptions,
      loading,
      shellOptions,
      filteredOsTypeOptions,
@@ -403,6 +472,8 @@ export default {
      targetOptions,
      patchModeOptions,
      runAsUserToolTip,
      envVarsLabel,
      syntax,
      //computed
      modalTitle,
@@ -411,11 +482,13 @@ export default {
      submit,
      cmdPlaceholder,
      supportsRunAsUser,
      openScriptURL,
      formatScriptSyntax,
      // quasar dialog plugin
      dialogRef,
      onDialogHide,
    };
  },
-};
+});
 </script>
--- a/src/components/modals/agents/EditAgent.vue
+++ b/src/components/modals/agents/EditAgent.vue
@@ -94,7 +94,7 @@
                        class="q-pr-sm"
                        name="fas fa-signal"
                        size="1.2em"
-                        color="warning"
+                        :color="dash_warning_color"
                      />
                      Mark an agent as
                      <span class="text-weight-bold">offline</span> if it has
@@ -120,7 +120,7 @@
                        class="q-pr-sm"
                        name="fas fa-signal"
                        size="1.2em"
-                        color="negative"
+                        :color="dash_negative_color"
                      />
                      Mark an agent as
                      <span class="text-weight-bold">overdue</span> if it has
@@ -373,6 +373,7 @@
 </template>
 <script>
 import { mapState } from "vuex";
 import { useDialogPluginComponent } from "quasar";
 import mixins from "@/mixins/mixins";
 import PatchPolicyForm from "@/components/modals/agents/PatchPolicyForm.vue";
@@ -549,6 +550,9 @@ export default {
      return result.trimEnd(",");
    },
  },
  computed: {
    ...mapState(["dash_warning_color", "dash_negative_color"]),
  },
  mounted() {
    // Get custom fields
    this.getCustomFields("agent").then((r) => {
--- a/src/components/modals/agents/InstallAgent.vue
+++ b/src/components/modals/agents/InstallAgent.vue
@@ -52,6 +52,15 @@
                goarch = GOARCH_AMD64;
              "
            />
            <q-radio
              v-model="agentOS"
              val="darwin"
              label="macOS"
              @update:model-value="
                installMethod = 'mac';
                goarch = GOARCH_AMD64;
              "
            />
          </div>
        </q-card-section>
        <q-card-section>
@@ -105,37 +114,37 @@
              v-model="goarch"
              :val="GOARCH_AMD64"
              label="64 bit"
-              v-show="agentOS === 'windows'"
+              v-show="agentOS === 'windows' || agentOS === 'linux'"
            />
            <q-radio
              v-model="goarch"
              :val="GOARCH_i386"
              label="32 bit"
              v-show="agentOS === 'windows'"
            />
            <q-radio
              v-model="goarch"
              :val="GOARCH_AMD64"
-              label="64 bit"
+              label="Intel 64 bit"
-              v-show="agentOS !== 'windows'"
+              v-show="agentOS === 'darwin'"
            />
            <q-radio
              v-model="goarch"
              :val="GOARCH_i386"
              label="32 bit"
-              v-show="agentOS !== 'windows'"
+              v-show="agentOS !== 'darwin'"
            />
            <q-radio
              v-model="goarch"
              :val="GOARCH_ARM64"
              label="ARM 64 bit"
-              v-show="agentOS !== 'windows'"
+              v-show="agentOS === 'linux'"
            />
            <q-radio
              v-model="goarch"
              :val="GOARCH_ARM64"
              label="Apple Silicon (M-Series)"
              v-show="agentOS === 'darwin'"
            />
            <q-radio
              v-model="goarch"
              :val="GOARCH_ARM32"
              label="ARM 32 bit (Rasp Pi)"
-              v-show="agentOS !== 'windows'"
+              v-show="agentOS === 'linux'"
            />
          </div>
        </q-card-section>
@@ -266,12 +275,13 @@ export default {
        plat: this.agentOS,
      };
-      if (this.installMethod === "manual") {
+      if (this.installMethod === "manual" || this.installMethod === "mac") {
        this.$axios.post("/agents/installer/", data).then((r) => {
          this.info = {
            expires: this.expires,
            data: r.data,
            goarch: this.goarch,
            plat: this.agentOS,
          };
          this.showAgentDownload = true;
        });
@@ -343,6 +353,9 @@ export default {
        case "bash":
          text = "Download linux install script";
          break;
        case "mac":
          text = "Show installation instructions";
          break;
      }
      return text;
--- a/src/components/modals/agents/RunScript.vue
+++ b/src/components/modals/agents/RunScript.vue
@@ -39,9 +39,9 @@
      <q-form @submit.prevent="sendScript">
        <q-card-section>
          <tactical-dropdown
-            :rules="[(val) => !!val || '*Required']"
+            :rules="[(val: number) => !!val || '*Required']"
            v-model="state.script"
-            :options="filteredScriptOptions"
+            :options="filterByPlatformOptions"
            label="Select script"
            outlined
            mapOptions
@@ -78,6 +78,18 @@
          />
        </q-card-section>
        <q-card-section>
          <tactical-dropdown
            v-model="state.env_vars"
            :label="envVarsLabel"
            filled
            use-input
            multiple
            hide-dropdown-icon
            input-debounce="0"
            new-value-mode="add"
          />
        </q-card-section>
        <q-card-section v-if="!state.run_on_server">
          <q-option-group
            v-model="state.output"
            :options="outputOptions"
@@ -118,7 +130,7 @@
        </q-card-section>
        <q-card-section v-if="state.output === 'collector'">
          <tactical-dropdown
-            :rules="[(val) => !!val || '*Required']"
+            :rules="[(val: number) => !!val || '*Required']"
            outlined
            v-model="state.custom_field"
            :options="customFieldOptions"
@@ -129,9 +141,29 @@
          <q-checkbox v-model="state.save_all_output" label="Save all output" />
        </q-card-section>
        <q-card-section v-if="agent.plat === 'windows'">
-          <q-checkbox v-model="state.run_as_user" label="Run As User">
+          <q-checkbox
            v-if="!state.run_on_server"
            v-model="state.run_as_user"
            label="Run As User"
          >
            <q-tooltip>{{ runAsUserToolTip }}</q-tooltip>
          </q-checkbox>
          <q-checkbox
            v-if="!hosted"
            :disable="!server_scripts_enabled"
            v-model="state.run_on_server"
            label="Run On Server"
            @update:model-value="ret = null"
          >
            <q-tooltip v-if="!server_scripts_enabled"
              >Enable server side scripts globally to activate this
              feature.</q-tooltip
            >
            <q-tooltip v-else
              >Run the script on the Tactical RMM server in the context of this
              agent.</q-tooltip
            >
          </q-checkbox>
        </q-card-section>
        <q-card-section>
          <q-input
@@ -163,29 +195,70 @@
          class="q-pl-md q-pr-md q-pt-none q-ma-none scroll"
          style="max-height: 50vh"
        >
-          <pre>{{ ret }}</pre>
+          <script-output-copy-clip
            v-if="!state.run_on_server"
            label="Output"
            :data="ret"
          />
          <q-separator />
          <pre v-if="!state.run_on_server">{{ ret }}</pre>
          <q-card-section v-if="state.run_on_server" class="scroll">
            <div>
              Run Time:
              <code>{{ ret.execution_time }} seconds</code>
              <br />Return Code:
              <code>{{ ret.retcode }}</code>
              <br />
            </div>
            <br />
            <div v-if="ret.stdout">
              <script-output-copy-clip
                label="Standard Output"
                :data="ret.stdout"
              />
              <q-separator />
              <pre>{{ ret.stdout }}</pre>
            </div>
            <div v-if="ret.stderr">
              <script-output-copy-clip
                label="Standard Error"
                :data="ret.stderr"
              />
              <q-separator />
              <pre>{{ ret.stderr }}</pre>
            </div>
          </q-card-section>
        </q-card-section>
      </q-form>
    </q-card>
  </q-dialog>
 </template>
-<script>
+<script setup lang="ts">
 // composition imports
-import { ref, watch, computed } from "vue";
+import { computed, ref, watch } from "vue";
 import { useStore } from "vuex";
 import { useDialogPluginComponent, openURL } from "quasar";
 import { useScriptDropdown } from "@/composables/scripts";
 import { useCustomFieldDropdown } from "@/composables/core";
 import { runScript } from "@/api/agents";
 import { notifySuccess } from "@/utils/notify";
-import { runAsUserToolTip } from "@/constants/constants";
+import { envVarsLabel, runAsUserToolTip } from "@/constants/constants";
-import {
+import { formatScriptSyntax } from "@/utils/format";
  formatScriptSyntax,
  removeExtraOptionCategories,
 } from "@/utils/format";
 //ui imports
 import TacticalDropdown from "@/components/ui/TacticalDropdown.vue";
 import ScriptOutputCopyClip from "@/components/scripts/ScriptOutputCopyClip.vue";
 // types
 import type { Agent } from "@/types/agents";
 // store
 const store = useStore();
 const hosted = computed(() => store.state.hosted);
 const server_scripts_enabled = computed(
  () => store.state.server_scripts_enabled,
 );
 // static data
 const outputOptions = [
@@ -196,101 +269,72 @@ const outputOptions = [
  { label: "Save results to Agent Notes", value: "note" },
 ];
-export default {
+// emits
-  name: "RunScript",
+defineEmits([...useDialogPluginComponent.emits]);
  emits: [...useDialogPluginComponent.emits],
  components: { TacticalDropdown },
  props: {
    agent: !Object,
    script: Number,
  },
  setup(props) {
    // setup quasar dialog plugin
    const { dialogRef, onDialogHide } = useDialogPluginComponent();
-    // setup dropdowns
+// props
-    const { script, scriptOptions, defaultTimeout, defaultArgs, syntax, link } =
+const props = defineProps<{
-      useScriptDropdown(props.script, {
+  agent: Agent;
-        onMount: true,
+  script?: number;
-        filterByPlatform: props.agent.plat,
+}>();
      });
    const { customFieldOptions } = useCustomFieldDropdown({ onMount: true });
-    // main run script functionaity
+// setup quasar dialog plugin
-    const state = ref({
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
      output: "wait",
      emails: [],
      emailMode: "default",
      custom_field: null,
      save_all_output: false,
      script,
      args: defaultArgs,
      timeout: defaultTimeout,
      run_as_user: false,
    });
-    const ret = ref(null);
+// setup dropdowns
-    const loading = ref(false);
+const {
-    const maximized = ref(false);
+  script,
  filterByPlatformOptions,
  defaultTimeout,
  defaultArgs,
  defaultEnvVars,
  syntax,
  link,
 } = useScriptDropdown({
  script: props.script,
  plat: props.agent.plat,
  onMount: true,
 });
 const { customFieldOptions } = useCustomFieldDropdown({ onMount: true });
-    async function sendScript() {
+// main run script functionaity
-      ret.value = null;
+const state = ref({
-      loading.value = true;
+  output: "wait",
  emails: [],
  emailMode: "default",
  custom_field: null,
  save_all_output: false,
  script,
  args: defaultArgs,
  env_vars: defaultEnvVars,
  timeout: defaultTimeout,
  run_as_user: false,
  run_on_server: false,
 });
-      ret.value = await runScript(props.agent.agent_id, state.value);
+const ret = ref(null);
-      loading.value = false;
+const loading = ref(false);
-      if (state.value.output === "forget") {
+const maximized = ref(false);
        onDialogHide();
        notifySuccess(ret.value);
      }
    }
-    function openScriptURL() {
+async function sendScript() {
-      link.value ? openURL(link.value) : null;
+  ret.value = null;
-    }
+  loading.value = true;
-    const filteredScriptOptions = computed(() => {
+  ret.value = await runScript(props.agent.agent_id, state.value);
-      return removeExtraOptionCategories(
+  loading.value = false;
-        scriptOptions.value.filter(
+  if (state.value.output === "forget") {
-          (script) =>
+    onDialogHide();
-            script.category ||
+    if (ret.value) notifySuccess(ret.value);
-            !script.supported_platforms ||
+  }
-            script.supported_platforms.length === 0 ||
+}
            script.supported_platforms.includes(props.agent.plat)
        )
      );
    });
-    // watchers
+function openScriptURL() {
-    watch(
+  link.value ? openURL(link.value) : null;
-      [() => state.value.output, () => state.value.emailMode],
+}
      () => (state.value.emails = [])
    );
-    return {
+// watchers
-      // reactive data
+watch(
-      state,
+  [() => state.value.output, () => state.value.emailMode],
-      loading,
+  () => (state.value.emails = []),
-      filteredScriptOptions,
+);
      link,
      syntax,
      ret,
      maximized,
      customFieldOptions,
      // non-reactive data
      outputOptions,
      runAsUserToolTip,
      //methods
      formatScriptSyntax,
      sendScript,
      openScriptURL,
      // quasar dialog plugin
      dialogRef,
      onDialogHide,
    };
  },
 };
 </script>
--- a/src/components/modals/agents/SendCommand.vue
+++ b/src/components/modals/agents/SendCommand.vue
@@ -104,6 +104,9 @@
            type="submit"
          />
        </q-card-actions>
        <q-card-section v-if="ret !== null"
          ><script-output-copy-clip label="Output" :data="ret" /> <q-separator
        /></q-card-section>
        <q-card-section
          v-if="ret !== null"
          class="q-pl-md q-pr-md q-pt-none q-ma-none scroll"
@@ -124,8 +127,13 @@ import { sendAgentCommand } from "@/api/agents";
 import { cmdPlaceholder } from "@/composables/agents";
 import { runAsUserToolTip } from "@/constants/constants";
 import ScriptOutputCopyClip from "@/components/scripts/ScriptOutputCopyClip.vue";
 export default {
  name: "SendCommand",
  components: {
    ScriptOutputCopyClip,
  },
  emits: [...useDialogPluginComponent.emits],
  props: {
    agent: !Object,
--- a/src/components/modals/alerts/AlertTemplateForm.vue
+++ b/src/components/modals/alerts/AlertTemplateForm.vue
@@ -1,8 +1,8 @@
 <template>
-  <q-dialog ref="dialog" @hide="onHide">
+  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card style="width: 90vw; max-width: 90vw">
      <q-bar>
-        {{ title }}
+        {{ alertTemplate ? "Edit Alert Template" : "Add Alert Template" }}
        <q-space />
        <q-btn dense flat icon="close" v-close-popup>
          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
@@ -150,50 +150,62 @@
              <span style="text-decoration: underline; cursor: help"
                >Alert Failure Settings
                <q-tooltip>
-                  The selected script will run when an alert is triggered. This
+                  The selected action will run when an alert is triggered.
                  script will run on any online agent.
                </q-tooltip>
              </span>
            </div>
            <q-card-section>
-              <q-select
+              <q-option-group
-                class="q-mb-sm"
+                v-model="template.action_type"
-                label="Failure action"
+                class="q-pb-sm"
                :options="actionTypeOptions"
                dense
-                options-dense
+                inline
              />
              <tactical-dropdown
                v-if="template.action_type == 'script'"
                class="q-mb-sm"
                label="Failure script"
                outlined
                clearable
                v-model="template.action"
                :options="scriptOptions"
-                map-options
+                mapOptions
-                emit-value
+                filterable
-                @update:model-value="setScriptDefaults('failure')"
+                :rules="[(val) => !!val || '*Required']"
-              >
+              />
-                <template v-slot:option="scope">
+
-                  <q-item
+              <tactical-dropdown
-                    v-if="!scope.opt.category"
+                v-else-if="template.action_type == 'server'"
-                    v-bind="scope.itemProps"
+                class="q-mb-sm"
-                    class="q-pl-lg"
+                label="Failure script"
-                  >
+                outlined
-                    <q-item-section>
+                clearable
-                      <q-item-label v-html="scope.opt.label"></q-item-label>
+                v-model="template.action"
-                    </q-item-section>
+                :options="serverScriptOptions"
-                  </q-item>
+                mapOptions
-                  <q-item-label
+                filterable
-                    v-if="scope.opt.category"
+              />
-                    v-bind="scope.itemProps"
+
-                    header
+              <tactical-dropdown
-                    class="q-pa-sm"
+                v-else
-                    >{{ scope.opt.category }}</q-item-label
+                class="q-mb-sm"
-                  >
+                label="Failure Web Hook"
-                </template>
+                outlined
-              </q-select>
+                clearable
                v-model="template.action_rest"
                :options="restActionOptions"
                mapOptions
                filterable
              />
              <q-select
                v-if="template.action_type !== 'rest'"
                class="q-mb-sm"
                dense
-                label="Failure action arguments (press Enter after typing each argument)"
+                label="Failure script arguments (press Enter after typing each argument)"
                filled
                v-model="template.action_args"
                use-input
@@ -204,17 +216,31 @@
                new-value-mode="add"
              />
-              <q-input
+              <q-select
                v-if="template.action_type !== 'rest'"
                class="q-mb-sm"
-                label="Failure action timeout (seconds)"
+                dense
                label="Failure script environment vars (press Enter after typing each key=value pair)"
                filled
                v-model="template.action_env_vars"
                use-input
                use-chips
                multiple
                hide-dropdown-icon
                input-debounce="0"
                new-value-mode="add"
              />
              <q-input
                v-if="template.action_type !== 'rest'"
                class="q-mb-sm"
                label="Failure script timeout (seconds)"
                outlined
                type="number"
                v-model.number="template.action_timeout"
                dense
                :rules="[
-                  (val) => !!val || 'Failure action timeout is required',
+                  (val) => !!val || 'Failure script timeout is required',
                  (val) => val > 0 || 'Timeout must be greater than 0',
                  (val) => val <= 60 || 'Timeout must be 60 or less',
                ]"
              />
            </q-card-section>
@@ -223,50 +249,61 @@
              <span style="text-decoration: underline; cursor: help"
                >Alert Resolved Settings
                <q-tooltip>
-                  The selected script will run when an alert is resolved. This
+                  The selected action will run when an alert is resolved.
                  script will run on any online agent.
                </q-tooltip>
              </span>
            </div>
            <q-card-section>
-              <q-select
+              <q-option-group
-                class="q-mb-sm"
+                v-model="template.resolved_action_type"
-                label="Resolved Action"
+                class="q-pb-sm"
                :options="actionTypeOptions"
                dense
-                options-dense
+                inline
              />
              <tactical-dropdown
                v-if="template.resolved_action_type === 'script'"
                class="q-mb-sm"
                label="Resolved Script"
                outlined
                clearable
                v-model="template.resolved_action"
                :options="scriptOptions"
-                map-options
+                mapOptions
-                emit-value
+                filterable
-                @update:model-value="setScriptDefaults('resolved')"
+              />
-              >
+
-                <template v-slot:option="scope">
+              <tactical-dropdown
-                  <q-item
+                v-else-if="template.resolved_action_type === 'server'"
-                    v-if="!scope.opt.category"
+                class="q-mb-sm"
-                    v-bind="scope.itemProps"
+                label="Resolved Script"
-                    class="q-pl-lg"
+                outlined
-                  >
+                clearable
-                    <q-item-section>
+                v-model="template.resolved_action"
-                      <q-item-label v-html="scope.opt.label"></q-item-label>
+                :options="serverScriptOptions"
-                    </q-item-section>
+                mapOptions
-                  </q-item>
+                filterable
-                  <q-item-label
+              />
-                    v-if="scope.opt.category"
+
-                    v-bind="scope.itemProps"
+              <tactical-dropdown
-                    header
+                v-else
-                    class="q-pa-sm"
+                class="q-mb-sm"
-                    >{{ scope.opt.category }}</q-item-label
+                label="Resolved Web Hook"
-                  >
+                outlined
-                </template>
+                clearable
-              </q-select>
+                v-model="template.resolved_action_rest"
                :options="restActionOptions"
                mapOptions
                filterable
              />
              <q-select
                v-if="template.resolved_action_type !== 'rest'"
                class="q-mb-sm"
                dense
-                label="Resolved action arguments (press Enter after typing each argument)"
+                label="Resolved script arguments (press Enter after typing each argument)"
                filled
                v-model="template.resolved_action_args"
                use-input
@@ -277,17 +314,31 @@
                new-value-mode="add"
              />
-              <q-input
+              <q-select
                v-if="template.resolved_action_type !== 'rest'"
                class="q-mb-sm"
-                label="Resolved action timeout (seconds)"
+                dense
                label="Resolved action environment vars (press Enter after typing each key=value pair)"
                filled
                v-model="template.resolved_action_env_vars"
                use-input
                use-chips
                multiple
                hide-dropdown-icon
                input-debounce="0"
                new-value-mode="add"
              />
              <q-input
                v-if="template.resolved_action_type !== 'rest'"
                class="q-mb-sm"
                label="Resolved script timeout (seconds)"
                outlined
                type="number"
                v-model.number="template.resolved_action_timeout"
                dense
                :rules="[
-                  (val) => !!val || 'Resolved action timeout is required',
+                  (val) => !!val || 'Resolved script timeout is required',
                  (val) => val > 0 || 'Timeout must be greater than 0',
                  (val) => val <= 60 || 'Timeout must be 60 or less',
                ]"
              />
            </q-card-section>
@@ -296,7 +347,7 @@
              <span style="text-decoration: underline; cursor: help"
                >Run actions only on
                <q-tooltip>
-                  The selected script will only run on the following types of
+                  The selected action will only run on the following types of
                  alerts
                </q-tooltip>
              </span>
@@ -646,7 +697,7 @@
                left-label
              />
              <q-toggle
-                v-model="template.check_text_on_resolved"
+                v-model="template.task_text_on_resolved"
                label="Text"
                color="green"
                left-label
@@ -660,18 +711,23 @@
              v-if="step > 1"
              flat
              color="primary"
-              @click="$refs.stepper.previous()"
+              @click="stepper?.previous()"
              label="Back"
              class="q-mr-xs"
            />
            <q-btn
              v-if="step < 5"
-              @click="$refs.stepper.next()"
+              @click="stepper?.next()"
              color="primary"
              label="Next"
            />
            <q-space />
-            <q-btn @click="onSubmit" color="primary" label="Submit" />
+            <q-btn
              @click="onSubmit"
              color="primary"
              label="Submit"
              :loading="loading"
            />
          </q-stepper-navigation>
        </template>
      </q-stepper>
@@ -679,191 +735,279 @@
  </q-dialog>
 </template>
-<script>
+<script setup lang="ts">
-import mixins from "@/mixins/mixins";
+import { computed, ref, reactive, watch, nextTick } from "vue";
-import { mapGetters } from "vuex";
+import { useStore } from "vuex";
 import { useQuasar, useDialogPluginComponent, type QStepper } from "quasar";
 import { useScriptDropdown } from "@/composables/scripts";
 import { useURLActionDropdown } from "@/composables/core";
 import { notifyError, notifySuccess } from "@/utils/notify";
 import { addAlertTemplate, saveAlertTemplate } from "@/api/alerts";
 import { isValidEmail } from "@/utils/validation";
-export default {
+// components
-  name: "AlertTemplateForm",
+import TacticalDropdown from "@/components/ui/TacticalDropdown.vue";
-  emits: ["hide", "ok", "cancel"],
+
-  mixins: [mixins],
+// types
-  props: { alertTemplate: Object },
+import type { AlertTemplate, AlertSeverity } from "@/types/alerts";
-  data() {
+
-    return {
+// store
-      step: 1,
+const store = useStore();
-      template: {
+const hosted = computed(() => store.state.hosted);
-        name: "",
+const server_scripts_enabled = computed(
-        is_active: true,
+  () => store.state.server_scripts_enabled,
-        action: null,
+);
-        action_args: [],
+
-        action_timeout: 15,
+// props
-        resolved_action: null,
+const props = defineProps<{
-        resolved_action_args: [],
+  alertTemplate?: AlertTemplate;
-        resolved_action_timeout: 15,
+}>();
-        email_recipients: [],
+
-        email_from: "",
+// emits
-        text_recipients: [],
+defineEmits([...useDialogPluginComponent.emits]);
-        agent_email_on_resolved: false,
+
-        agent_text_on_resolved: false,
+// setup quasar plugins
-        agent_always_email: null,
+const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
-        agent_always_text: null,
+const $q = useQuasar();
-        agent_always_alert: null,
+
-        agent_periodic_alert_days: 0,
+const step = ref(1);
-        agent_script_actions: true,
+
-        check_email_alert_severity: [],
+// setup script dropdowns
-        check_text_alert_severity: [],
+const {
-        check_dashboard_alert_severity: [],
+  script: failureAction,
-        check_email_on_resolved: false,
+  defaultArgs: failureArgs,
-        check_text_on_resolved: false,
+  defaultEnvVars: failureEnvVars,
-        check_always_email: null,
+  defaultTimeout: failureTimeout,
-        check_always_text: null,
+  serverScriptOptions,
-        check_always_alert: null,
+  scriptOptions,
-        check_periodic_alert_days: 0,
+} = useScriptDropdown({ script: props.alertTemplate?.action, onMount: true });
-        check_script_actions: true,
+
-        task_email_alert_severity: [],
+const {
-        task_text_alert_severity: [],
+  script: resolvedAction,
-        task_dashboard_alert_severity: [],
+  defaultArgs: resolvedArgs,
-        task_email_on_resolved: false,
+  defaultEnvVars: resolvedEnvVars,
-        task_text_on_resolved: false,
+  defaultTimeout: resolvedTimeout,
-        task_always_email: null,
+} = useScriptDropdown({
-        task_always_text: null,
+  script: props.alertTemplate?.resolved_action,
-        task_always_alert: null,
+  onMount: true,
-        task_periodic_alert_days: 0,
+});
-        task_script_actions: true,
+
-      },
+// setup custom field dropdown
-      scriptOptions: [],
+const { restActionOptions } = useURLActionDropdown({ onMount: true });
-      severityOptions: [
+
-        { label: "Error", value: "error" },
+// alert template form logic
-        { label: "Warning", value: "warning" },
+const template: AlertTemplate = props.alertTemplate
-        { label: "Informational", value: "info" },
+  ? reactive(Object.assign({}, { ...props.alertTemplate }))
-      ],
+  : reactive({
-      thumbStyle: {
+      id: 0,
-        right: "2px",
+      name: "",
-        borderRadius: "5px",
+      is_active: true,
-        backgroundColor: "#027be3",
+      action_type: "script",
-        width: "5px",
+      action: failureAction,
-        opacity: 0.75,
+      action_rest: undefined,
-      },
+      action_args: failureArgs,
-    };
+      action_env_vars: failureEnvVars,
      action_timeout: failureTimeout,
      resolved_action_type: "script",
      resolved_action: resolvedAction,
      resolved_action_rest: undefined,
      resolved_action_args: resolvedArgs,
      resolved_action_env_vars: resolvedEnvVars,
      resolved_action_timeout: resolvedTimeout,
      email_recipients: [] as string[],
      email_from: "",
      text_recipients: [] as string[],
      agent_email_on_resolved: false,
      agent_text_on_resolved: false,
      agent_always_email: null,
      agent_always_text: null,
      agent_always_alert: null,
      agent_periodic_alert_days: 0,
      agent_script_actions: true,
      check_email_alert_severity: [] as AlertSeverity[],
      check_text_alert_severity: [] as AlertSeverity[],
      check_dashboard_alert_severity: [] as AlertSeverity[],
      check_email_on_resolved: false,
      check_text_on_resolved: false,
      check_always_email: null,
      check_always_text: null,
      check_always_alert: null,
      check_periodic_alert_days: 0,
      check_script_actions: true,
      task_email_alert_severity: [] as AlertSeverity[],
      task_text_alert_severity: [] as AlertSeverity[],
      task_dashboard_alert_severity: [] as AlertSeverity[],
      task_email_on_resolved: false,
      task_text_on_resolved: false,
      task_always_email: null,
      task_always_text: null,
      task_always_alert: null,
      task_periodic_alert_days: 0,
      task_script_actions: true,
    });
 // reset selected script if action type is changed
 watch(
  () => template.action_type,
  () => {
    template.action_rest = undefined;
    template.action = undefined;
    template.action_args = [];
    template.action_env_vars = [];
    template.action_timeout = 30;
  },
-  computed: {
+);
-    ...mapGetters(["showCommunityScripts"]),
+
-    title() {
+watch(
-      return this.editing ? "Edit Alert Template" : "Add Alert Template";
+  () => template.resolved_action_type,
-    },
+  () => {
-    editing() {
+    template.resolved_action_rest = undefined;
-      return !!this.alertTemplate;
+    template.resolved_action = undefined;
-    },
+    template.resolved_action_args = [];
    template.resolved_action_env_vars = [];
    template.resolved_action_timeout = 30;
  },
-  methods: {
+);
-    setScriptDefaults(type) {
+
-      if (type === "failure") {
+// sync selected script to scriptdropdown
-        const script = this.scriptOptions.find(
+// only add watchers if editting template
-          (i) => i.value === this.template.action
+if (props.alertTemplate) {
-        );
+  watch(
-        this.template.action_args = script.args;
+    () => template.action,
-      } else if (type === "resolved") {
+    (newValue) => {
-        const script = this.scriptOptions.find(
+      if (newValue) {
-          (i) => i.value === this.template.resolved_action
+        failureAction.value = newValue;
-        );
+
-        this.template.resolved_action_args = script.args;
+        // wait for the script change to happen
-      }
+        nextTick(() => {
-    },
+          template.action_args = failureArgs.value;
-    toggleAddEmail() {
+          template.action_env_vars = failureEnvVars.value;
-      this.$q
+          template.action_timeout = failureTimeout.value;
        .dialog({
          title: "Add email",
          prompt: {
            model: "",
            isValid: (val) => this.isValidEmail(val),
            type: "email",
          },
          cancel: true,
          ok: { label: "Add", color: "primary" },
          persistent: false,
        })
        .onOk((data) => {
          this.template.email_recipients.push(data);
        });
      }
    },
-    toggleAddSMSNumber() {
+  );
-      this.$q
+
-        .dialog({
+  watch(
-          title: "Add number",
+    () => template.resolved_action,
-          message:
+    (newValue) => {
-            "Use E.164 format: must have the <b>+</b> symbol and <span class='text-red'>country code</span>, followed by the <span class='text-green'>phone number</span> e.g. <b>+<span class='text-red'>1</span><span class='text-green'>2131231234</span></b>",
+      if (newValue) {
-          prompt: {
+        resolvedAction.value = newValue;
-            model: "",
+
-          },
+        // wait for the script change to happen
-          html: true,
+        nextTick(() => {
-          cancel: true,
+          template.resolved_action_args = resolvedArgs.value;
-          ok: { label: "Add", color: "primary" },
+          template.resolved_action_env_vars = resolvedEnvVars.value;
-          persistent: false,
+          template.resolved_action_timeout = resolvedTimeout.value;
        })
        .onOk((data) => {
          this.template.text_recipients.push(data);
        });
    },
    removeEmail(email) {
      const removed = this.template.email_recipients.filter((k) => k !== email);
      this.template.email_recipients = removed;
    },
    removeSMSNumber(num) {
      const removed = this.template.text_recipients.filter((k) => k !== num);
      this.template.text_recipients = removed;
    },
    onSubmit() {
      if (!this.template.name) {
        this.notifyError("Name needs to be set");
        return;
      }
      this.$q.loading.show();
      if (this.editing) {
        this.$axios
          .put(`alerts/templates/${this.template.id}/`, this.template)
          .then(() => {
            this.$q.loading.hide();
            this.onOk();
            this.notifySuccess("Alert Template edited!");
          })
          .catch(() => {
            this.$q.loading.hide();
          });
      } else {
        this.$axios
          .post("alerts/templates/", this.template)
          .then(() => {
            this.$q.loading.hide();
            this.onOk();
            this.notifySuccess("Alert Template was added!");
          })
          .catch(() => {
            this.$q.loading.hide();
          });
      }
    },
-    show() {
+  );
-      this.$refs.dialog.show();
+}
-    },
+
-    hide() {
+const severityOptions = [
-      this.$refs.dialog.hide();
+  { label: "Error", value: "error" },
-    },
+  { label: "Warning", value: "warning" },
-    onHide() {
+  { label: "Informational", value: "info" },
-      this.$emit("hide");
+];
-    },
+
-    onOk() {
+const staticActionTypeOptions = [
-      this.$emit("ok");
+  { label: "Send a Web Hook", value: "rest" },
-      this.hide();
+  { label: "Run script on Agent", value: "script" },
-    },
+  { label: "Run script on TRMM Server", value: "server" },
-  },
+];
-  mounted() {
+
-    this.getScriptOptions(this.showCommunityScripts).then(
+const actionTypeOptions = computed(() => {
-      (options) => (this.scriptOptions = Object.freeze(options))
+  // don't show for hosted at all
  if (hosted.value) {
    return staticActionTypeOptions.filter(
      (option) => option.value !== "server",
    );
-    // Copy alertTemplate prop locally
+  }
-    if (this.editing) Object.assign(this.template, this.alertTemplate);
+  // disable the server script radio button if feature is disabled globally
-  },
+  const modifiedOptions = staticActionTypeOptions.map((option) => {
-};
+    if (!server_scripts_enabled.value && option.value === "server") {
      return { ...option, disable: true };
    }
    return option;
  });
  return modifiedOptions;
 });
 const stepper = ref<QStepper | null>(null);
 function toggleAddEmail() {
  $q.dialog({
    title: "Add email",
    prompt: {
      model: "",
      isValid: (val) => isValidEmail(val),
      type: "email",
    },
    cancel: true,
    ok: { label: "Add", color: "primary" },
    persistent: false,
  }).onOk((data) => {
    template.email_recipients.push(data);
  });
 }
 function toggleAddSMSNumber() {
  $q.dialog({
    title: "Add number",
    message:
      "Use E.164 format: must have the <b>+</b> symbol and <span class='text-red'>country code</span>, followed by the <span class='text-green'>phone number</span> e.g. <b>+<span class='text-red'>1</span><span class='text-green'>2131231234</span></b>",
    prompt: {
      model: "",
    },
    html: true,
    cancel: true,
    ok: { label: "Add", color: "primary" },
    persistent: false,
  }).onOk((data: string) => {
    template.text_recipients.push(data);
  });
 }
 function removeEmail(email: string) {
  const removed = template.email_recipients.filter((k) => k !== email);
  template.email_recipients = removed;
 }
 function removeSMSNumber(num: string) {
  const removed = template.text_recipients.filter((k) => k !== num);
  template.text_recipients = removed;
 }
 const loading = ref(false);
 async function onSubmit() {
  // TODO rework this ghetto form validation
  if (!template.name) {
    notifyError("Name needs to be set");
    return;
  }
  loading.value = true;
  if (props.alertTemplate) {
    try {
      await saveAlertTemplate(template.id, template);
      notifySuccess("Alert Template edited!");
      onDialogOK();
    } catch {
    } finally {
      loading.value = false;
    }
  } else {
    try {
      await addAlertTemplate(template);
      notifySuccess("Alert Template edited!");
      onDialogOK();
    } catch {
    } finally {
      loading.value = false;
    }
  }
 }
 </script>
--- a/src/components/modals/alerts/AlertsOverview.vue
+++ b/src/components/modals/alerts/AlertsOverview.vue
@@ -191,24 +191,6 @@
              }}</q-badge>
            </q-td>
          </template>
          <template v-slot:body-cell-alert_time="props">
            <q-td :props="props">
              {{ formatDate(props.value) }}
            </q-td>
          </template>
          <template v-slot:body-cell-resolve_on="props">
            <q-td :props="props">
              {{ formatDate(props.value) }}
            </q-td>
          </template>
          <template v-slot:body-cell-snoozed_until="props">
            <q-td :props="props">
              {{ formatDate(props.value) }}
            </q-td>
          </template>
        </q-table>
      </q-card-section>
    </q-card>
@@ -265,6 +247,7 @@ export default {
          field: "alert_time",
          align: "left",
          sortable: true,
          format: (a) => this.formatDate(a),
        },
        {
          name: "hostname",
@@ -296,11 +279,12 @@ export default {
          sortable: true,
        },
        {
-          name: "resolve_on",
+          name: "resolved_on",
          label: "Resolved On",
-          field: "resolve_on",
+          field: "resolved_on",
          align: "left",
          sortable: true,
          format: (a) => this.formatDate(a),
        },
        {
          name: "snoozed_until",
@@ -308,6 +292,7 @@ export default {
          field: "snoozed_until",
          align: "left",
          sortable: true,
          format: (a) => this.formatDate(a),
        },
        { name: "actions", label: "Actions", align: "left" },
      ],
@@ -328,7 +313,7 @@ export default {
      return this.columns.map((column) => {
        if (column.name === "snoozed_until") {
          if (this.includeSnoozed) return column.name;
-        } else if (column.name === "resolve_on") {
+        } else if (column.name === "resolved_on") {
          if (this.includeResolved) return column.name;
        } else {
          return column.name;
@@ -340,7 +325,7 @@ export default {
    getClients() {
      this.$axios.get("/clients/").then((r) => {
        this.clientsOptions = Object.freeze(
-          r.data.map((client) => ({ label: client.name, value: client.id }))
+          r.data.map((client) => ({ label: client.name, value: client.id })),
        );
      });
    },
--- a/src/components/modals/coresettings/CustomFieldsForm.vue
+++ b/src/components/modals/coresettings/CustomFieldsForm.vue
@@ -142,6 +142,11 @@
            v-model="localField.hide_in_ui"
            color="green"
          />
          <q-toggle
            label="Hide in Summary Tab"
            v-model="localField.hide_in_summary"
            color="green"
          />
        </q-card-section>
        <q-card-actions align="right">
          <q-btn flat label="Cancel" v-close-popup />
@@ -172,6 +177,7 @@ export default {
        default_value_bool: false,
        default_values_multiple: [],
        hide_in_ui: false,
        hide_in_summary: false,
      },
      modelOptions: [
        { label: "Client", value: "client" },
--- a/src/components/modals/coresettings/CustomFieldsTable.vue
+++ b/src/components/modals/coresettings/CustomFieldsTable.vue
@@ -48,6 +48,7 @@
        <!-- name -->
        <q-td>
          {{ props.row.name }}
          <q-tooltip :delay="600">ID: {{ props.row.id }}</q-tooltip>
        </q-td>
        <!-- type -->
        <q-td>
@@ -57,6 +58,10 @@
        <q-td>
          <q-icon v-if="props.row.hide_in_ui" name="check" />
        </q-td>
        <!-- hide in summary tab -->
        <q-td>
          <q-icon v-if="props.row.hide_in_summary" name="check" />
        </q-td>
        <!-- default value -->
        <q-td v-if="props.row.type === 'checkbox'">
          {{ props.row.default_value_bool }}
@@ -123,6 +128,13 @@ export default {
          align: "left",
          sortable: true,
        },
        {
          name: "hide_in_summary",
          label: "Hide in Summary Tab",
          field: "hide_in_summary",
          align: "left",
          sortable: true,
        },
        {
          name: "default_value",
          label: "Default Value",
--- a/src/components/modals/coresettings/EditCoreSettings.vue
+++ b/src/components/modals/coresettings/EditCoreSettings.vue
@@ -10,8 +10,10 @@
          <q-tab name="customfields" label="Custom Fields" />
          <q-tab name="keystore" label="Key Store" />
          <q-tab name="urlactions" label="URL Actions" />
          <q-tab name="webhooks" label="Web Hooks" />
          <q-tab name="retention" label="Retention" />
          <q-tab name="apikeys" label="API Keys" />
          <!-- <q-tab name="openai" label="Open AI" /> -->
        </q-tabs>
      </template>
      <template v-slot:after>
@@ -40,6 +42,51 @@
                    <q-tooltip> Runs at 35mins past every hour </q-tooltip>
                  </q-checkbox>
                </q-card-section>
                <q-card-section v-if="!hosted" class="row">
                  <q-checkbox
                    v-model="settings.enable_server_scripts"
                    label="Enable server side scripts"
                  >
                    <q-tooltip
                      >Allow running scripts on TRMM server for alert
                      failure/resolve actions</q-tooltip
                    >
                  </q-checkbox>
                  <q-btn
                    size="sm"
                    round
                    dense
                    flat
                    icon="warning"
                    @click="
                      openURL(
                        'https://docs.tacticalrmm.com/functions/permissions/#permissions-with-extra-security-implications',
                      )
                    "
                  >
                  </q-btn>
                </q-card-section>
                <q-card-section v-if="!hosted" class="row">
                  <q-checkbox
                    v-model="settings.enable_server_webterminal"
                    label="Enable web terminal"
                  >
                    <q-tooltip>Enable the web terminal</q-tooltip>
                  </q-checkbox>
                  <q-btn
                    size="sm"
                    roundenable_server_webterminal
                    dense
                    flat
                    icon="warning"
                    @click="
                      openURL(
                        'https://docs.tacticalrmm.com/functions/permissions/#permissions-with-extra-security-implications',
                      )
                    "
                  >
                  </q-btn>
                </q-card-section>
                <q-card-section class="row">
                  <div class="col-4">Default agent timezone:</div>
                  <div class="col-2"></div>
@@ -70,7 +117,7 @@
                        icon="info"
                        @click="
                          openURL(
-                            'https://quasar.dev/quasar-utils/date-utils#format-for-display'
+                            'https://quasar.dev/quasar-utils/date-utils#format-for-display',
                          )
                        "
                      >
@@ -124,6 +171,24 @@
                    class="col-6"
                  />
                </q-card-section>
                <q-card-section class="row">
                  <div class="col-4 flex items-center">
                    Receive notifications on:
                  </div>
                  <div class="col-2"></div>
                  <q-checkbox
                    dense
                    v-model="settings.notify_on_info_alerts"
                    class="col-3"
                    label="Informational Alerts"
                  />
                  <q-checkbox
                    dense
                    v-model="settings.notify_on_warning_alerts"
                    class="col-3"
                    label="Warning Alerts"
                  />
                </q-card-section>
                <q-card-section class="row">
                  <div class="col-4">Agent Debug Level:</div>
                  <div class="col-2"></div>
@@ -215,7 +280,7 @@
                <div class="text-subtitle2">SMTP Settings</div>
                <q-separator />
                <q-card-section class="row">
-                  <div class="col-2">From:</div>
+                  <div class="col-2">From email:</div>
                  <div class="col-4"></div>
                  <q-input
                    outlined
@@ -225,6 +290,16 @@
                    :rules="[(val) => isValidEmail(val) || 'Invalid email']"
                  />
                </q-card-section>
                <q-card-section class="row">
                  <div class="col-2">From name:</div>
                  <div class="col-4"></div>
                  <q-input
                    outlined
                    dense
                    v-model="settings.smtp_from_name"
                    class="col-6 q-pa-none"
                  />
                </q-card-section>
                <q-card-section class="row">
                  <div class="col-2">Host:</div>
                  <div class="col-4"></div>
@@ -378,7 +453,7 @@
              <q-tab-panel name="meshcentral">
                <div class="text-subtitle2">MeshCentral Settings</div>
                <q-separator />
-                <q-card-section class="row">
+                <q-card-section class="row" v-if="!hosted">
                  <div class="col-4">Username:</div>
                  <div class="col-2"></div>
                  <q-input
@@ -394,7 +469,7 @@
                    ]"
                  />
                </q-card-section>
-                <q-card-section class="row">
+                <q-card-section class="row" v-if="!hosted">
                  <div class="col-4">Mesh Site:</div>
                  <div class="col-2"></div>
                  <q-input
@@ -404,7 +479,7 @@
                    class="col-6"
                  />
                </q-card-section>
-                <q-card-section class="row">
+                <q-card-section class="row" v-if="!hosted">
                  <div class="col-4">Mesh Token:</div>
                  <div class="col-2"></div>
                  <q-input
@@ -414,7 +489,7 @@
                    class="col-6"
                  />
                </q-card-section>
-                <q-card-section class="row">
+                <q-card-section class="row" v-if="!hosted">
                  <div class="col-4">Mesh Device Group Name:</div>
                  <div class="col-2"></div>
                  <q-input
@@ -424,29 +499,81 @@
                    class="col-6"
                  />
                </q-card-section>
-                <q-card-section class="row">
+                <q-card-section class="row" v-if="!hosted">
-                  <div class="col-4">
+                  <div class="col-4 flex items-center">
-                    Disable Auto Login for Remote Control and Remote background:
+                    Sync Mesh Perms with TRMM:
                    <q-icon
                      right
                      name="ion-information-circle-outline"
                      size="sm"
                      class="cursor-pointer"
                    >
                      <q-tooltip class="text-caption">
                        It is recommended to keep this option enabled;
                        otherwise, all TRMM users will have full permissions in
                        MeshCentral regardless of their permissions in TRMM.
                      </q-tooltip>
                    </q-icon>
                  </div>
                  <div class="col-2"></div>
                  <q-checkbox
                    dense
-                    v-model="settings.mesh_disable_auto_login"
+                    :model-value="settings.sync_mesh_with_trmm"
                    @update:model-value="confirmSyncChange"
                    class="col-6"
                  />
                </q-card-section>
                <q-card-section class="row items-center">
                  <div class="col-4 flex items-center">
                    Company Name:
                    <q-icon
                      name="ion-information-circle-outline"
                      size="sm"
                      class="q-ml-sm cursor-pointer"
                    >
                      <q-tooltip class="text-caption">
                        Adding your company name here will append it to the
                        user's full name that appears when doing a remote
                        control session, for example: 'John Doe - Amidaware
                        Inc.'
                      </q-tooltip>
                    </q-icon>
                  </div>
                  <div class="col-2"></div>
                  <q-input
                    dense
                    outlined
                    v-model="settings.mesh_company_name"
                    class="col-6"
                  >
                  </q-input>
                </q-card-section>
              </q-tab-panel>
              <!-- custom fields -->
              <q-tab-panel name="customfields">
                <CustomFields />
              </q-tab-panel>
              <!-- key store -->
              <q-tab-panel name="keystore">
                <KeyStoreTable />
              </q-tab-panel>
              <!-- url actions -->
              <q-tab-panel name="urlactions">
-                <URLActionsTable />
+                <URLActionsTable type="web" />
              </q-tab-panel>
              <!-- web hooks -->
              <q-tab-panel name="webhooks">
                <URLActionsTable type="rest" />
              </q-tab-panel>
              <!-- retention -->
              <q-tab-panel name="retention">
                <q-card-section class="row">
                  <div class="col-4">Check History (days):</div>
@@ -508,6 +635,49 @@
              <q-tab-panel name="apikeys">
                <APIKeysTable />
              </q-tab-panel>
              <!-- Open AI -->
              <!-- <q-tab-panel name="openai">
                <div class="text-subtitle2">Open AI</div>
                <q-separator />
                <q-card-section class="row">
                  <div class="col-4">API Key:</div>
                  <div class="col-2"></div>
                  <q-input
                    dense
                    outlined
                    v-model="settings.open_ai_token"
                    class="col-6"
                  />
                </q-card-section>
                <q-card-section class="row">
                  <div class="col-4">Open AI Model:</div>
                  <div class="col-2"></div>
                  <q-input
                    dense
                    outlined
                    v-model="settings.open_ai_model"
                    class="col-6"
                  >
                    <template v-slot:after>
                      <q-btn
                        round
                        dense
                        flat
                        icon="info"
                        size="sm"
                        @click="
                          openURL(
                            'https://platform.openai.com/docs/models/overview'
                          )
                        "
                      >
                        <q-tooltip>Click to see available options</q-tooltip>
                      </q-btn>
                    </template>
                  </q-input>
                </q-card-section>
              </q-tab-panel> -->
            </q-tab-panels>
          </q-scroll-area>
          <q-card-section class="row items-center">
@@ -561,6 +731,7 @@ export default {
    KeyStoreTable,
    URLActionsTable,
    APIKeysTable,
    // ServerTasksTable,
  },
  mixins: [mixins],
  data() {
@@ -591,6 +762,11 @@ export default {
      ],
    };
  },
  computed: {
    hosted() {
      return this.$store.state.hosted;
    },
  },
  methods: {
    openURL(url) {
      openURL(url);
@@ -625,6 +801,19 @@ export default {
        }));
      });
    },
    confirmSyncChange(newValue) {
      this.$q
        .dialog({
          title: "Are you sure?",
          message:
            "This operation may take several minutes to complete in the background and can be very CPU/disk intensive, depending on your hardware and number of agents. Please allow time for the sync to fully complete.",
          ok: { label: "Yes", color: "primary" },
          cancel: { label: "No", color: "negative" },
        })
        .onOk(() => {
          this.settings.sync_mesh_with_trmm = newValue;
        });
    },
    showResetPatchPolicy() {
      this.$q.dialog({
        component: ResetPatchPolicy,
@@ -667,13 +856,13 @@ export default {
    },
    removeEmail(email) {
      const removed = this.settings.email_alert_recipients.filter(
-        (k) => k !== email
+        (k) => k !== email,
      );
      this.settings.email_alert_recipients = removed;
    },
    removeSMSNumber(num) {
      const removed = this.settings.sms_alert_recipients.filter(
-        (k) => k !== num
+        (k) => k !== num,
      );
      this.settings.sms_alert_recipients = removed;
    },
@@ -714,6 +903,7 @@ export default {
              });
          } else {
            this.$emit("close");
            this.$store.dispatch("getDashInfo", false);
            this.notifySuccess("Settings were edited!");
          }
        })
--- a/src/components/modals/coresettings/KeyStoreForm.vue
+++ b/src/components/modals/coresettings/KeyStoreForm.vue
@@ -27,8 +27,16 @@
            outlined
            dense
            v-model="localKey.value"
            :type="isPwd ? 'password' : 'text'"
            :rules="[(val) => !!val || '*Required']"
-          />
+            ><template v-slot:append>
              <q-icon
                :name="isPwd ? 'visibility_off' : 'visibility'"
                class="cursor-pointer"
                @click="isPwd = !isPwd"
              />
            </template>
          </q-input>
        </q-card-section>
        <q-card-actions align="right">
@@ -50,6 +58,7 @@ export default {
  props: { globalKey: Object },
  data() {
    return {
      isPwd: true,
      localKey: {
        name: "",
        value: "",
--- a/src/components/modals/coresettings/KeyStoreTable.vue
+++ b/src/components/modals/coresettings/KeyStoreTable.vue
@@ -3,6 +3,15 @@
    <div class="row">
      <div class="text-subtitle2">Global Key Store</div>
      <q-space />
      <q-btn
        size="sm"
        color="grey-5"
        text-color="black"
        class="q-mr-sm"
        :label="isPwd ? 'Show values' : 'Hide values'"
        :icon="isPwd ? 'visibility_off' : 'visibility'"
        @click="isPwd = !isPwd"
      />
      <q-btn
        size="sm"
        color="grey-5"
@@ -61,7 +70,7 @@
          </q-td>
          <!-- value -->
          <q-td>
-            {{ props.row.value }}
+            {{ isPwd ? "****" : props.row.value }}
          </q-td>
        </q-tr>
      </template>
@@ -79,6 +88,7 @@ export default {
  data() {
    return {
      keystore: [],
      isPwd: true,
      pagination: {
        rowsPerPage: 0,
        sortBy: "name",
--- a/src/components/modals/coresettings/TestURLAction.vue
+++ b/src/components/modals/coresettings/TestURLAction.vue
@@ -0,0 +1,160 @@
 <template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin" style="width: 80vw">
      <q-bar>
        Testing {{ urlAction.name }}
        <q-space />
        <q-btn dense flat icon="close" v-close-popup>
          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
        </q-btn>
      </q-bar>
      <q-card-section>
        <q-option-group
          v-model="runAgainst"
          :options="runAgainstOptions"
          inline
          dense
        />
      </q-card-section>
      <q-card-section v-if="runAgainst === 'agent'">
        <tactical-dropdown
          v-model="agent"
          :options="agentOptions"
          label="Agents"
          mapOptions
          filterable
          dense
          filled
        />
      </q-card-section>
      <q-card-section v-else-if="runAgainst === 'site'">
        <tactical-dropdown
          v-model="site"
          :options="siteOptions"
          label="Sites"
          mapOptions
          filterable
          dense
          filled
        />
      </q-card-section>
      <q-card-section v-else-if="runAgainst === 'client'">
        <tactical-dropdown
          v-model="client"
          :options="clientOptions"
          label="Client"
          mapOptions
          filterable
          dense
          filled
        />
      </q-card-section>
      <q-card-section style="height: 60vh" class="scroll">
        <div>
          URL:
          <code>{{ return_url }}</code>
        </div>
        <br />
        <div>
          Body
          <q-separator />
          <code>{{ return_request }}</code>
        </div>
        <br />
        <div>
          Response
          <q-separator />
          <code>{{ return_result }}</code>
        </div>
      </q-card-section>
      <q-card-actions align="right">
        <q-btn flat label="Close" v-close-popup />
        <q-btn
          :loading="loading"
          flat
          label="Run"
          color="primary"
          @click="submit"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
 </template>
 <script setup lang="ts">
 // composition imports
 import { ref, reactive, computed } from "vue";
 import { useDialogPluginComponent } from "quasar";
 import { useAgentDropdown } from "@/composables/agents";
 import { useSiteDropdown, useClientDropdown } from "@/composables/clients";
 import { runTestURLAction } from "@/api/core";
 import { URLAction } from "@/types/core/urlactions";
 // ui imports
 import TacticalDropdown from "@/components/ui/TacticalDropdown.vue";
 // define emits
 defineEmits([...useDialogPluginComponent.emits]);
 // define props
 const props = defineProps<{ urlAction: URLAction }>();
 // setup quasar
 const { dialogRef, onDialogHide } = useDialogPluginComponent();
 // setup dropdowns
 const { agent, agentOptions } = useAgentDropdown({ onMount: true });
 const { client, clientOptions } = useClientDropdown(true);
 const { site, siteOptions } = useSiteDropdown(true);
 const runAgainst = ref<"agent" | "site" | "client" | "none">("none");
 const runAgainstOptions = [
  { label: "Agent", value: "agent" },
  { label: "Site", value: "site" },
  { label: "Client", value: "client" },
  { label: "None", value: "none" },
 ];
 const loading = ref(false);
 const runAgainstID = computed(() => {
  if (runAgainst.value === "agent") return agent.value;
  else if (runAgainst.value === "site") return site.value;
  else if (runAgainst.value === "client") return client.value;
  else return 0;
 });
 const state = reactive({
  pattern: props.urlAction.pattern,
  rest_body: props.urlAction.rest_body,
  rest_headers: props.urlAction.rest_headers,
  rest_method: props.urlAction.rest_method,
  run_instance_type: runAgainst,
  run_instance_id: runAgainstID,
 });
 const return_url = ref("");
 const return_result = ref("");
 const return_request = ref("");
 async function submit() {
  loading.value = true;
  try {
    const { url, result, body } = await runTestURLAction(state);
    return_result.value = result;
    return_url.value = url;
    return_request.value = body;
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
 }
 </script>
--- a/src/components/modals/coresettings/URLActionsForm.vue
+++ b/src/components/modals/coresettings/URLActionsForm.vue
@@ -1,14 +1,31 @@
 <template>
-  <q-dialog ref="dialog" @hide="onHide">
+  <q-dialog
-    <q-card class="q-dialog-plugin" style="width: 60vw">
+    ref="dialogRef"
    @hide="onDialogHide"
    @show="loadEditor"
    @before-hide="cleanupEditors"
  >
    <q-card
      class="q-dialog-plugin"
      :style="`width: ${props.type === 'web' ? 50 : 60}vw; max-width: ${props.type === 'web' ? 60 : 70}vw`"
    >
      <q-bar>
-        {{ title }}
+        {{
          props.action
            ? props.type === "web"
              ? "Edit URL Action"
              : "Edit Web Hook"
            : props.type === "web"
              ? "Add URL Action"
              : "Add Web Hook"
        }}
        <q-space />
        <q-btn dense flat icon="close" v-close-popup>
          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
        </q-btn>
      </q-bar>
-      <q-form @submit="submit">
+
      <div style="max-height: 80vh" class="scroll">
        <!-- name -->
        <q-card-section>
          <q-input
@@ -26,6 +43,8 @@
            label="Description"
            outlined
            dense
            type="textarea"
            rows="2"
            v-model="localAction.desc"
          />
        </q-card-section>
@@ -41,89 +60,186 @@
          />
        </q-card-section>
-        <q-card-actions align="right">
+        <q-card-section v-if="type === 'rest'">
-          <q-btn flat label="Cancel" v-close-popup />
+          <q-select
-          <q-btn flat label="Submit" color="primary" type="submit" />
+            v-model="localAction.rest_method"
-        </q-card-actions>
+            label="Method"
-      </q-form>
+            :options="URLActionMethods"
            outlined
            dense
            map-options
            emit-value
          />
        </q-card-section>
        <q-card-section v-show="type === 'rest'">
          <q-toolbar>
            <q-tabs v-model="tab" dense shrink>
              <q-tab
                name="body"
                label="Request Body"
                :ripple="false"
                :disable="disableBodyTab"
              />
              <q-tab name="headers" label="Request Headers" :ripple="false" />
            </q-tabs>
          </q-toolbar>
          <div ref="editorDiv" :style="{ height: '30vh' }"></div>
        </q-card-section>
      </div>
      <q-card-actions align="right">
        <q-btn
          v-if="type === 'rest'"
          flat
          label="Test"
          color="primary"
          @click="testWebHook"
        />
        <q-btn flat label="Cancel" v-close-popup />
        <q-btn flat label="Submit" color="primary" @click="submit" />
      </q-card-actions>
    </q-card>
  </q-dialog>
 </template>
-<script>
+<script setup lang="ts">
-import mixins from "@/mixins/mixins";
+// composition imports
 import { ref, computed, reactive, watch } from "vue";
 import { useDialogPluginComponent, useQuasar, extend } from "quasar";
 import { editURLAction, saveURLAction } from "@/api/core";
 import { notifySuccess } from "@/utils/notify";
 import { URLAction, URLActionType } from "@/types/core/urlactions";
-export default {
+// ui imports
-  name: "URLActionsForm",
+import TestURLAction from "@/components/modals/coresettings/TestURLAction.vue";
  emits: ["hide", "ok", "cancel"],
  mixins: [mixins],
  props: { action: Object },
  data() {
    return {
      localAction: {
        name: "",
        desc: "",
        pattern: "",
      },
    };
  },
  computed: {
    title() {
      return this.editing ? "Edit URL Action" : "Add URL Action";
    },
    editing() {
      return !!this.action;
    },
  },
  methods: {
    submit() {
      this.$q.loading.show();
-      let data = {
+import * as monaco from "monaco-editor";
        ...this.localAction,
      };
-      if (this.editing) {
+// define emits
-        this.$axios
+defineEmits([...useDialogPluginComponent.emits]);
-          .put(`/core/urlaction/${data.id}/`, data)
+
-          .then(() => {
+// define props
-            this.$q.loading.hide();
+const props = defineProps<{ type: URLActionType; action?: URLAction }>();
-            this.onOk();
+
-            this.notifySuccess("Url Action was edited!");
+// setup quasar
-          })
+const $q = useQuasar();
-          .catch(() => {
+const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
-            this.$q.loading.hide();
+
-          });
+// static data
-      } else {
+const URLActionMethods = [
-        this.$axios
+  { value: "get", label: "GET" },
-          .post("/core/urlaction/", data)
+  { value: "post", label: "POST" },
-          .then(() => {
+  { value: "put", label: "PUT" },
-            this.$q.loading.hide();
+  { value: "delete", label: "DELETE" },
-            this.onOk();
+  { value: "patch", label: "PATCH" },
-            this.notifySuccess("URL Action was added!");
+];
-          })
+
-          .catch(() => {
+const localAction: URLAction = props.action
-            this.$q.loading.hide();
+  ? reactive(extend({}, props.action))
-          });
+  : reactive({
-      }
+      name: "",
-    },
+      desc: "",
-    show() {
+      pattern: "",
-      this.$refs.dialog.show();
+      action_type: props.type,
-    },
+      rest_body: "{\n    \n}",
-    hide() {
+      rest_method: "post",
-      this.$refs.dialog.hide();
+      rest_headers: `{\n  "Content-Type": "application/json"\n}`, // eslint-disable-line
-    },
+    } as URLAction);
-    onHide() {
+
-      this.$emit("hide");
+const disableBodyTab = computed(() =>
-    },
+  ["get", "delete"].includes(localAction.rest_method),
-    onOk() {
+);
-      this.$emit("ok");
+const tab = ref(disableBodyTab.value ? "headers" : "body");
-      this.hide();
+
-    },
+watch(
  () => localAction.rest_method,
  () => {
    disableBodyTab.value ? (tab.value = "headers") : undefined;
  },
-  mounted() {
+);
-    // If pk prop is set that means we are editing
+
-    if (this.action) Object.assign(this.localAction, this.action);
+async function submit() {
-  },
+  $q.loading.show();
-};
+
  try {
    props.action
      ? await editURLAction(localAction.id, localAction)
      : await saveURLAction(localAction);
    onDialogOK();
    notifySuccess("Url Action was edited!");
  } catch (e) {}
  $q.loading.hide();
 }
 const editorDiv = ref<HTMLElement | null>(null);
 let editor: monaco.editor.IStandaloneCodeEditor;
 var modelBodyUri = monaco.Uri.parse("model://body"); // a made up unique URI for our model
 var modelHeadersUri = monaco.Uri.parse("model://headers"); // a made up unique URI for our model
 var modelBody = monaco.editor.createModel(
  localAction.rest_body,
  "json",
  modelBodyUri,
 );
 var modelHeaders = monaco.editor.createModel(
  localAction.rest_headers,
  "json",
  modelHeadersUri,
 );
 function testWebHook() {
  $q.dialog({
    component: TestURLAction,
    componentProps: {
      urlAction: localAction,
    },
  });
 }
 // watch tab change and change model
 watch(tab, (newValue, oldValue) => {
  if (oldValue === "body") {
    localAction.rest_body = editor.getValue();
  } else if (oldValue === "headers") {
    localAction.rest_headers = editor.getValue();
  }
  if (newValue === "body") {
    editor.setModel(modelBody);
    editor.setValue(localAction.rest_body);
  } else if (newValue === "headers") {
    editor.setModel(modelHeaders);
    editor.setValue(localAction.rest_headers);
  }
 });
 function loadEditor() {
  const theme = $q.dark.isActive ? "vs-dark" : "vs-light";
  if (!editorDiv.value) return;
  editor = monaco.editor.create(editorDiv.value, {
    model: tab.value === "body" ? modelBody : modelHeaders,
    theme: theme,
    automaticLayout: true,
    minimap: { enabled: false },
    quickSuggestions: false,
  });
  editor.onDidChangeModelContent(() => {
    if (tab.value === "body") {
      localAction.rest_body = editor.getValue();
    } else if (tab.value === "headers") {
      localAction.rest_headers = editor.getValue();
    }
  });
 }
 function cleanupEditors() {
  modelBody.dispose();
  modelHeaders.dispose();
  editor.dispose();
 }
 </script>
--- a/src/components/modals/coresettings/URLActionsTable.vue
+++ b/src/components/modals/coresettings/URLActionsTable.vue
@@ -1,15 +1,21 @@
 <template>
  <div>
    <div class="row">
-      <div class="text-subtitle2">URL Actions</div>
+      <div class="text-subtitle2">
        {{
          props.type === "web"
            ? "URL Actions"
            : "Web Hooks for Alert Failure/Resolved Actions"
        }}
      </div>
      <q-space />
      <q-btn
        size="sm"
        color="grey-5"
        icon="fas fa-plus"
        text-color="black"
-        label="Add URL Action"
+        :label="`Add ${props.type === 'web' ? 'URL Action' : 'Web Hook'}`"
-        @click="addAction"
+        @click="addURLAction"
      />
    </div>
    <q-separator />
@@ -17,31 +23,36 @@
      dense
      :rows="actions"
      :columns="columns"
-      v-model:pagination="pagination"
+      :pagination="{ rowsPerPage: 0, sortBy: 'name', descending: true }"
      row-key="id"
      binary-state-sort
      hide-pagination
      virtual-scroll
      :rows-per-page-options="[0]"
-      no-data-label="No URL Actions added yet"
+      :no-data-label="`No ${props.type === 'web' ? 'URL Actions' : 'Web Hooks'} added yet`"
      :loading="loading"
    >
      <!-- body slots -->
      <template v-slot:body="props">
        <q-tr
          :props="props"
          class="cursor-pointer"
-          @dblclick="editAction(props.row)"
+          @dblclick="editURLAction(props.row)"
        >
          <!-- context menu -->
          <q-menu context-menu>
            <q-list dense style="min-width: 200px">
-              <q-item clickable v-close-popup @click="editAction(props.row)">
+              <q-item clickable v-close-popup @click="editURLAction(props.row)">
                <q-item-section side>
                  <q-icon name="edit" />
                </q-item-section>
                <q-item-section>Edit</q-item-section>
              </q-item>
-              <q-item clickable v-close-popup @click="deleteAction(props.row)">
+              <q-item
                clickable
                v-close-popup
                @click="deleteURLAction(props.row)"
              >
                <q-item-section side>
                  <q-icon name="delete" />
                </q-item-section>
@@ -57,15 +68,15 @@
          </q-menu>
          <!-- name -->
          <q-td>
-            {{ props.row.name }}
+            {{ truncateText(props.row.name, 30) }}
          </q-td>
          <!-- desc -->
          <q-td>
-            {{ props.row.desc }}
+            {{ truncateText(props.row.desc, 20) }}
          </q-td>
          <!-- pattern -->
          <q-td>
-            {{ props.row.pattern }}
+            {{ truncateText(props.row.pattern, 20) }}
          </q-td>
        </q-tr>
      </template>
@@ -73,105 +84,103 @@
  </div>
 </template>
-<script>
+<script setup lang="ts">
 // composition imports
 import { ref, onMounted } from "vue";
 import { QTableColumn, useQuasar } from "quasar";
 import { fetchURLActions, removeURLAction } from "@/api/core";
 import { notifySuccess } from "@/utils/notify";
 import { truncateText } from "@/utils/format";
 // ui imports
 import URLActionsForm from "@/components/modals/coresettings/URLActionsForm.vue";
 import mixins from "@/mixins/mixins";
-export default {
+// types
-  name: "URLActionTable",
+import { type URLActionType, type URLAction } from "@/types/core/urlactions";
  mixins: [mixins],
  data() {
    return {
      actions: [],
      pagination: {
        rowsPerPage: 0,
        sortBy: "name",
        descending: true,
      },
      columns: [
        {
          name: "name",
          label: "Name",
          field: "name",
          align: "left",
          sortable: true,
        },
        {
          name: "desc",
          label: "Description",
          field: "desc",
          align: "left",
          sortable: true,
        },
        {
          name: "pattern",
          label: "Pattern",
          field: "pattern",
          align: "left",
          sortable: true,
        },
      ],
    };
  },
  methods: {
    getURLActions() {
      this.$q.loading.show();
-      this.$axios
+// define props
-        .get("/core/urlaction/")
+const props = defineProps<{ type: URLActionType }>();
-        .then((r) => {
+
-          this.$q.loading.hide();
+// setup quasar
-          this.actions = r.data;
+const $q = useQuasar();
-        })
+
-        .catch(() => {
+const loading = ref(false);
-          this.$q.loading.hide();
+
-        });
+const actions = ref([] as URLAction[]);
-    },
+
-    addAction() {
+const columns: QTableColumn[] = [
-      this.$q
+  {
-        .dialog({
+    name: "name",
-          component: URLActionsForm,
+    label: "Name",
-        })
+    field: "name",
-        .onOk(() => {
+    align: "left",
-          this.getURLActions();
+    sortable: true,
        });
    },
    editAction(action) {
      this.$q
        .dialog({
          component: URLActionsForm,
          componentProps: {
            action: action,
          },
        })
        .onOk(() => {
          this.getURLActions();
        });
    },
    deleteAction(action) {
      this.$q
        .dialog({
          title: `Delete URL Action: ${action.name}?`,
          cancel: true,
          ok: { label: "Delete", color: "negative" },
        })
        .onOk(() => {
          this.$q.loading.show();
          this.$axios
            .delete(`/core/urlaction/${action.id}/`)
            .then(() => {
              this.getURLActions();
              this.$q.loading.hide();
              this.notifySuccess(`URL Action: ${action.name} was deleted!`);
            })
            .catch(() => {
              this.$q.loading.hide();
            });
        });
    },
  },
-  mounted() {
+  {
-    this.getURLActions();
+    name: "desc",
    label: "Description",
    field: "desc",
    align: "left",
    sortable: true,
  },
-};
+  {
    name: "pattern",
    label: "URL Pattern",
    field: "pattern",
    align: "left",
    sortable: true,
  },
 ];
 async function getURLActions() {
  $q.loading.show();
  try {
    const result = await fetchURLActions();
    actions.value = result.filter(
      (action) => action.action_type === props.type,
    );
  } catch (e) {
    console.error(e);
  }
  $q.loading.hide();
 }
 function addURLAction() {
  $q.dialog({
    component: URLActionsForm,
    componentProps: {
      type: props.type,
    },
  }).onOk(getURLActions);
 }
 function editURLAction(action: URLAction) {
  $q.dialog({
    component: URLActionsForm,
    componentProps: {
      type: props.type,
      action: action,
    },
  }).onOk(getURLActions);
 }
 function deleteURLAction(action: URLAction) {
  $q.dialog({
    title: `Delete URL Action: ${action.name}?`,
    cancel: true,
    ok: { label: "Delete", color: "negative" },
  }).onOk(async () => {
    loading.value = true;
    try {
      await removeURLAction(action.id);
      await getURLActions();
      notifySuccess(`URL Action: ${action.name} was deleted!`);
    } catch (e) {
      console.error(e);
    }
    loading.value = false;
  });
 }
 onMounted(getURLActions);
 </script>
--- a/src/components/modals/coresettings/UserPreferences.vue
+++ b/src/components/modals/coresettings/UserPreferences.vue
@@ -1,6 +1,6 @@
 <template>
  <q-dialog ref="dialog" @hide="onHide">
-    <q-card class="q-dialog-plugin" style="min-width: 85vh">
+    <q-card class="q-dialog-plugin" style="min-width: 60vw">
      <q-splitter v-model="splitterModel">
        <template v-slot:before>
          <q-tabs dense v-model="tab" vertical class="text-primary">
@@ -82,6 +82,98 @@
                    class="col-4"
                  />
                </q-card-section>
                <q-card-section class="row">
                  <div class="col-2">Dashboard Info Color:</div>
                  <div class="col-2"></div>
                  <q-input
                    outlined
                    dense
                    v-model="dash_info_color"
                    class="col-8"
                  >
                    <template v-slot:after>
                      <q-btn
                        round
                        dense
                        flat
                        size="sm"
                        icon="info"
                        @click="openURL(quasar_color_url)"
                      >
                        <q-tooltip>Click to see color options</q-tooltip>
                      </q-btn>
                    </template>
                  </q-input>
                </q-card-section>
                <q-card-section class="row">
                  <div class="col-2">Dashboard Positive Color:</div>
                  <div class="col-2"></div>
                  <q-input
                    outlined
                    dense
                    v-model="dash_positive_color"
                    class="col-8"
                  >
                    <template v-slot:after>
                      <q-btn
                        round
                        dense
                        flat
                        size="sm"
                        icon="info"
                        @click="openURL(quasar_color_url)"
                      >
                        <q-tooltip>Click to see color options</q-tooltip>
                      </q-btn>
                    </template>
                  </q-input>
                </q-card-section>
                <q-card-section class="row">
                  <div class="col-2">Dashboard Negative Color:</div>
                  <div class="col-2"></div>
                  <q-input
                    outlined
                    dense
                    v-model="dash_negative_color"
                    class="col-8"
                  >
                    <template v-slot:after>
                      <q-btn
                        round
                        dense
                        flat
                        size="sm"
                        icon="info"
                        @click="openURL(quasar_color_url)"
                      >
                        <q-tooltip>Click to see color options</q-tooltip>
                      </q-btn>
                    </template>
                  </q-input>
                </q-card-section>
                <q-card-section class="row">
                  <div class="col-2">Dashboard Warning Color:</div>
                  <div class="col-2"></div>
                  <q-input
                    outlined
                    dense
                    v-model="dash_warning_color"
                    class="col-8"
                  >
                    <template v-slot:after>
                      <q-btn
                        round
                        dense
                        flat
                        size="sm"
                        icon="info"
                        @click="openURL(quasar_color_url)"
                      >
                        <q-tooltip>Click to see color options</q-tooltip>
                      </q-btn>
                    </template>
                  </q-input>
                </q-card-section>
                <q-card-section class="row">
                  <div class="col-2">Client Sort:</div>
                  <div class="col-2"></div>
@@ -109,7 +201,7 @@
                        icon="info"
                        @click="
                          openURL(
-                            'https://quasar.dev/quasar-utils/date-utils#format-for-display'
+                            'https://quasar.dev/quasar-utils/date-utils#format-for-display',
                          )
                        "
                      >
@@ -156,9 +248,14 @@ export default {
      tab: "ui",
      splitterModel: 20,
      loading_bar_color: "",
      dash_info_color: "",
      dash_positive_color: "",
      dash_negative_color: "",
      dash_warning_color: "",
      urlActions: [],
      clear_search_when_switching: true,
      date_format: "",
      quasar_color_url: "https://quasar.dev/style/color-palette",
      clientTreeSortOptions: [
        {
          label: "Sort alphabetically, moving failing clients to the top",
@@ -216,16 +313,19 @@ export default {
    },
    getURLActions() {
      this.$axios.get("/core/urlaction/").then((r) => {
-        if (r.data.length === 0) {
+        this.urlActions = r.data
          .filter((action) => action.action_type === "web")
          .sort((a, b) => a.name.localeCompare(b.name))
          .map((action) => ({
            label: action.name,
            value: action.id,
          }));
        if (this.urlActions.length === 0) {
          this.notifyWarning(
-            "No URL Actions configured. Go to Settings > Global Settings > URL Actions"
+            "No URL Actions configured. Go to Settings > Global Settings > URL Actions",
          );
          return;
        }
        this.urlActions = r.data.map((action) => ({
          label: action.name,
          value: action.id,
        }));
      });
    },
    getUserPrefs() {
@@ -235,6 +335,10 @@ export default {
        this.defaultAgentTblTab = r.data.default_agent_tbl_tab;
        this.clientTreeSort = r.data.client_tree_sort;
        this.loading_bar_color = r.data.loading_bar_color;
        this.dash_info_color = r.data.dash_info_color;
        this.dash_positive_color = r.data.dash_positive_color;
        this.dash_negative_color = r.data.dash_negative_color;
        this.dash_warning_color = r.data.dash_warning_color;
        this.clear_search_when_switching = r.data.clear_search_when_switching;
        this.date_format = r.data.date_format;
      });
@@ -253,6 +357,10 @@ export default {
        default_agent_tbl_tab: this.defaultAgentTblTab,
        client_tree_sort: this.clientTreeSort,
        loading_bar_color: this.loading_bar_color,
        dash_info_color: this.dash_info_color,
        dash_positive_color: this.dash_positive_color,
        dash_negative_color: this.dash_negative_color,
        dash_warning_color: this.dash_warning_color,
        clear_search_when_switching: this.clear_search_when_switching,
        date_format: this.date_format,
      };
--- a/src/components/scripts/ScriptFormModal.vue
+++ b/src/components/scripts/ScriptFormModal.vue
@@ -1,68 +1,66 @@
 <template>
  <q-dialog
    ref="dialogRef"
    maximized
    no-esc-dismiss
    @hide="onDialogHide"
-    persistent
+    @show="loadEditor"
-    @keydown.esc="onDialogHide"
+    @before-hide="unloadEditor"
-    :maximized="maximized"
+    @keydown.esc.stop="closeEditor"
  >
-    <q-card
+    <q-card class="q-dialog-plugin">
      class="q-dialog-plugin"
      :style="maximized ? '' : 'width: 90vw; max-width: 90vw'"
    >
      <q-bar>
-        {{ title }}
+        <span class="q-pr-sm">{{ title }}</span>
        <q-btn
          v-if="!script && openAIEnabled"
          size="xs"
          :disable="loading"
          dense
          label="Generate Script"
          color="primary"
          no-caps
          @click="generateScriptOpenAI"
        />
        <q-space />
-        <q-btn
+        <q-btn dense flat icon="close" @click="closeEditor">
          dense
          flat
          icon="minimize"
          @click="maximized = false"
          :disable="!maximized"
        >
          <q-tooltip v-if="maximized" class="bg-white text-primary"
            >Minimize</q-tooltip
          >
        </q-btn>
        <q-btn
          dense
          flat
          icon="crop_square"
          @click="maximized = true"
          :disable="maximized"
        >
          <q-tooltip v-if="!maximized" class="bg-white text-primary"
            >Maximize</q-tooltip
          >
        </q-btn>
        <q-btn dense flat icon="close" v-close-popup>
          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
        </q-btn>
      </q-bar>
-      <q-form @submit="submitForm">
+      <q-banner
-        <q-banner
+        v-if="script.script_body && missingShebang"
-          v-if="missingShebang"
+        dense
-          dense
+        inline-actions
-          inline-actions
+        class="text-black bg-warning"
-          class="text-black bg-warning"
+      >
        <template v-slot:avatar>
          <q-icon class="text-center" name="warning" color="black" /> </template
        >Shell/Python scripts on Linux/Mac need a shebang at the top of the
        script e.g. <code>#!/bin/bash</code> or <code>#!/usr/bin/python3</code
        ><br />Add one to get rid of this warning. Ignore if windows.
      </q-banner>
      <div class="row q-pa-sm">
        <q-scroll-area
          :thumb-style="{
            right: '4px',
            borderRadius: '5px',
            width: '5px',
            opacity: '0.75',
          }"
          :bar-style="{
            right: '2px',
            borderRadius: '9px',
            width: '9px',
            opacity: '0.2',
          }"
          class="col-4 q-mb-none q-pb-none"
          :style="{ height: `${$q.screen.height - 106}px` }"
        >
-          <template v-slot:avatar>
+          <div class="q-gutter-sm q-pr-sm">
            <q-icon
              class="text-center"
              name="warning"
              color="black"
            /> </template
          >Shell/Python scripts on Linux/Mac need a shebang at the top of the
          script e.g. <code>#!/bin/bash</code> or <code>#!/usr/bin/python3</code
          ><br />Add one to get rid of this warning. Ignore if windows.
        </q-banner>
        <div class="row q-pa-sm">
          <div class="col-4 q-gutter-sm q-pr-sm">
            <q-input
              filled
              dense
              :readonly="readonly"
-              v-model="formScript.name"
+              v-model="script.name"
              label="Name"
              :rules="[(val) => !!val || '*Required']"
              hide-bottom-space
@@ -71,22 +69,24 @@
              filled
              dense
              :readonly="readonly"
-              v-model="formScript.description"
+              v-model="script.description"
              label="Description"
              type="textarea"
              rows="2"
            />
            <q-select
              :readonly="readonly"
              options-dense
              filled
              dense
-              v-model="formScript.shell"
+              v-model="script.shell"
              :options="shellOptions"
              emit-value
              map-options
              label="Shell Type"
            />
            <tactical-dropdown
-              v-model="formScript.supported_platforms"
+              v-model="script.supported_platforms"
              :options="agentPlatformOptions"
              label="Supported Platforms (All supported if blank)"
              clearable
@@ -97,7 +97,7 @@
            />
            <tactical-dropdown
              filled
-              v-model="formScript.category"
+              v-model="script.category"
              :options="categories"
              use-input
              clearable
@@ -108,7 +108,7 @@
              hide-bottom-space
            />
            <tactical-dropdown
-              v-model="formScript.args"
+              v-model="script.args"
              label="Script Arguments (press Enter after typing each argument)"
              filled
              use-input
@@ -118,263 +118,381 @@
              new-value-mode="add"
              :readonly="readonly"
            />
            <tactical-dropdown
              v-model="script.env_vars"
              :label="envVarsLabel"
              filled
              use-input
              multiple
              hide-dropdown-icon
              input-debounce="0"
              new-value-mode="add"
              :readonly="readonly"
            />
            <q-input
              type="number"
              filled
              dense
              :readonly="readonly"
-              v-model.number="formScript.default_timeout"
+              v-model.number="script.default_timeout"
              label="Timeout (seconds)"
              :rules="[(val) => val >= 5 || 'Minimum is 5']"
              hide-bottom-space
            />
            <q-checkbox
-              v-model="formScript.run_as_user"
+              v-model="script.run_as_user"
              label="Run As User (Windows only)"
            >
              <q-tooltip
                >Setting this value on the script model will always override any
                'Run As User' checkboxes in the UI and force this script to
                always be run in the context of the logged in user. If no user
-                is logged in, the script will not run and an error will be
+                is logged in, the script will run as SYSTEM.
                returned. Not supported on Windows Server.
              </q-tooltip>
            </q-checkbox>
            <q-input
              label="Syntax"
              type="textarea"
              style="height: 150px; overflow-y: auto; resize: none"
-              v-model="formScript.syntax"
+              v-model="script.syntax"
              dense
              filled
              :readonly="readonly"
            />
          </div>
-          <v-ace-editor
+        </q-scroll-area>
-            v-model:value="formScript.script_body"
+        <div
-            class="col-8"
+          ref="scriptEditor"
-            :lang="lang"
+          class="col-8 q-mb-none q-pb-none"
-            :theme="$q.dark.isActive ? 'tomorrow_night_eighties' : 'tomorrow'"
+          :style="{ height: `${$q.screen.height - 106}px` }"
-            :style="{ height: `${maximized ? '87vh' : '64vh'}` }"
+        ></div>
-            wrap
+      </div>
-            :printMargin="false"
+      <q-card-actions>
-            :options="{ fontSize: '14px' }"
+        <tactical-dropdown
-          />
+          style="width: 450px"
-        </div>
+          dense
-        <q-card-actions>
+          :loading="agentLoading"
-          <tactical-dropdown
+          filled
-            style="width: 350px"
+          v-model="agent"
-            dense
+          :options="agentOptions"
-            :loading="agentLoading"
+          label="Agent to run test script on"
-            filled
+          mapOptions
-            v-model="agent"
+          filterable
-            :options="agentOptions"
+        >
-            label="Agent to run test script on"
+          <template v-slot:after>
-            mapOptions
+            <q-btn
-            filterable
+              size="md"
-          >
+              color="primary"
-            <template v-slot:after>
+              dense
-              <q-btn
+              flat
-                size="md"
+              label="Test Script"
-                color="primary"
+              :disable="
-                dense
+                !agent || !script.script_body || !script.default_timeout
-                flat
+              "
-                label="Test Script"
+              @click="openTestScriptModal('agent')"
-                :disable="
+            />
-                  !agent ||
+            <q-btn
-                  !formScript.script_body ||
+              v-if="!hosted"
-                  !formScript.default_timeout
+              size="md"
-                "
+              color="secondary"
-                @click="openTestScriptModal"
+              dense
-              />
+              flat
-            </template>
+              label="Test on Server"
-          </tactical-dropdown>
+              :disable="
-          <q-space />
+                !script.script_body ||
-          <q-btn dense flat label="Cancel" v-close-popup />
+                !script.default_timeout ||
-          <q-btn
+                !server_scripts_enabled
-            v-if="!readonly"
+              "
-            :loading="loading"
+              @click="openTestScriptModal('server')"
-            dense
+            />
-            flat
+          </template>
-            label="Save"
+        </tactical-dropdown>
-            color="primary"
+        <q-space />
-            type="submit"
+        <q-btn dense flat label="Cancel" @click="closeEditor" />
-          />
+        <q-btn
-        </q-card-actions>
+          v-if="!readonly"
-      </q-form>
+          :loading="loading"
          dense
          flat
          label="Save"
          color="primary"
          @click="submit"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
 </template>
-<script>
+<script setup lang="ts">
 // composable imports
-import { ref, computed, onMounted } from "vue";
+import { ref, reactive, watch, computed, onMounted } from "vue";
 import { useStore } from "vuex";
 import { useQuasar, useDialogPluginComponent } from "quasar";
 import { saveScript, editScript, downloadScript } from "@/api/scripts";
 import { useAgentDropdown, agentPlatformOptions } from "@/composables/agents";
-import { notifySuccess } from "@/utils/notify";
+import { generateScript } from "@/api/core";
 import { notifyError, notifySuccess } from "@/utils/notify";
 // ui imports
 import TestScriptModal from "@/components/scripts/TestScriptModal.vue";
 import TacticalDropdown from "@/components/ui/TacticalDropdown.vue";
-import { VAceEditor } from "vue3-ace-editor";
+import * as monaco from "monaco-editor";
-// imports for ace editor
+import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
-import "ace-builds/src-noconflict/mode-powershell";
+import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
-import "ace-builds/src-noconflict/mode-python";
+import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
-import "ace-builds/src-noconflict/mode-batchfile";
+import jsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
-import "ace-builds/src-noconflict/mode-sh";
+import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
-import "ace-builds/src-noconflict/theme-tomorrow_night_eighties";
+
-import "ace-builds/src-noconflict/theme-tomorrow";
+// https://github.com/microsoft/monaco-editor/issues/4045#issuecomment-1723787448
 self.MonacoEnvironment = {
  getWorker: function (workerId, label) {
    switch (label) {
      case "json":
        return new jsonWorker();
      case "css":
      case "scss":
      case "less":
        return new cssWorker();
      case "html":
      case "handlebars":
      case "razor":
        return new htmlWorker();
      case "typescript":
      case "javascript":
        return new jsWorker();
      default:
        return new editorWorker();
    }
  },
 };
 // types
 import type { Script } from "@/types/scripts";
 // static data
 import { shellOptions } from "@/composables/scripts";
 import { envVarsLabel } from "@/constants/constants";
-export default {
+// props
-  name: "ScriptFormModal",
+const props = withDefaults(
-  emits: [...useDialogPluginComponent.emits],
+  defineProps<{
-  components: {
+    script?: Script;
-    TacticalDropdown,
+    categories?: string[];
-    VAceEditor,
+    readonly: boolean;
    clone?: boolean;
  }>(),
  {
    clone: false,
    readonly: false,
  },
-  props: {
+);
    script: Object,
    categories: !Array,
    readonly: {
      type: Boolean,
      default: false,
    },
    clone: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    // setup quasar plugins
    const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
    const $q = useQuasar();
-    // setup agent dropdown
+// emits
-    const { agent, agentOptions, getAgentOptions } = useAgentDropdown();
+defineEmits([...useDialogPluginComponent.emits]);
-    // script form logic
+// setup quasar plugins
-    const script = props.script
+const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
-      ? ref(Object.assign({}, { ...props.script, script_body: "" }))
+const $q = useQuasar();
      : ref({
          shell: "powershell",
          default_timeout: 90,
          args: [],
          script_body: "",
          run_as_user: false,
        });
-    if (props.clone) script.value.name = `(Copy) ${script.value.name}`;
+// setup store
-    const maximized = ref(false);
+const store = useStore();
-    const loading = ref(false);
+const openAIEnabled = computed(() => store.state.openAIIntegrationEnabled);
    const agentLoading = ref(false);
-    const missingShebang = computed(() => {
+// setup agent dropdown
-      if (script.value.shell === "shell" || script.value.shell === "python") {
+const { agent, agentOptions, getAgentOptions } = useAgentDropdown();
-        return !script.value.script_body.includes("#!");
+const hosted = computed(() => store.state.hosted);
-      } else {
+const server_scripts_enabled = computed(
-        return false;
+  () => store.state.server_scripts_enabled,
-      }
+);
 // script form logic
 const script: Script = props.script
  ? reactive(Object.assign({}, { ...props.script, script_body: "" }))
  : reactive({
      name: "",
      shell: "powershell",
      default_timeout: 90,
      args: [],
      script_body: "",
      run_as_user: false,
      env_vars: [],
    });
-    const title = computed(() => {
+if (props.clone) script.name = `(Copy) ${script.name}`;
-      if (props.script) {
+const loading = ref(false);
-        return props.readonly
+const agentLoading = ref(false);
          ? `Viewing ${script.value.name}`
          : props.clone
          ? `Copying ${script.value.name}`
          : `Editing ${script.value.name}`;
      } else {
        return "Adding new script";
      }
    });
-    // convert highlighter language to match what ace expects
+const missingShebang = computed(() => {
-    const lang = computed(() => {
+  if (script.shell === "shell" || script.shell === "python") {
-      if (script.value.shell === "cmd") return "batchfile";
+    return !script.script_body.startsWith("#!");
-      else if (script.value.shell === "powershell") return "powershell";
+  } else {
-      else if (script.value.shell === "python") return "python";
+    return false;
-      else if (script.value.shell === "shell") return "sh";
+  }
-      else return "";
+});
    });
-    // get code if editing or cloning script
+const title = computed(() => {
-    if (props.script)
+  if (props.script) {
-      downloadScript(script.value.id, { with_snippets: props.readonly }).then(
+    return props.readonly
-        (r) => {
+      ? `Viewing ${script.name}`
-          script.value.script_body = r.code;
+      : props.clone
-        }
+        ? `Copying ${script.name}`
-      );
+        : `Editing ${script.name}`;
  } else {
    return "Adding new script";
  }
 });
-    async function submitForm() {
+// convert highlighter language to match what ace expects
-      loading.value = true;
+const lang = computed(() => {
-      let result = "";
+  switch (script.shell) {
-      try {
+    case "cmd":
-        // edit existing script
+      return "bat";
-        if (props.script && !props.clone) {
+    case "powershell":
-          result = await editScript(script.value);
+      return "powershell";
    case "python":
      return "python";
    case "shell":
    case "nushell":
      return "shell";
    case "deno":
      return "typescript";
    default:
      return "";
  }
 });
-          // add or save cloned script
+async function submit() {
-        } else {
+  loading.value = true;
-          result = await saveScript(script.value);
+  let result = "";
-        }
+  try {
    // edit existing script
    if (props.script && !props.clone) {
      result = await editScript(script);
-        onDialogOK();
+      // add or save cloned script
-        notifySuccess(result);
+    } else {
-      } catch (e) {
+      result = await saveScript(script);
        console.error(e);
      }
      loading.value = false;
    }
-    function openTestScriptModal() {
+    onDialogOK();
-      $q.dialog({
+    notifySuccess(result);
-        component: TestScriptModal,
+  } catch (e) {
-        componentProps: {
+    console.error(e);
-          script: { ...script.value },
+  }
-          agent: agent.value,
+
  loading.value = false;
 }
 function openTestScriptModal(ctx: string) {
  if (ctx === "server" && !script.script_body.startsWith("#!")) {
    notifyError(
      "A shebang is required at the top of the script to specify the interpreter's path. Please ensure your script begins with a shebang line.",
      7000,
    );
    return;
  }
  $q.dialog({
    component: TestScriptModal,
    componentProps: {
      script: { ...script },
      agent: agent.value,
      ctx: ctx,
    },
  });
 }
 const scriptEditor = ref<HTMLElement | null>(null);
 let editor: monaco.editor.IStandaloneCodeEditor;
 function loadEditor() {
  var model = monaco.editor.createModel(script.script_body, lang.value);
  const theme = $q.dark.isActive ? "vs-dark" : "vs-light";
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  editor = monaco.editor.create(scriptEditor.value!, {
    readOnly: props.readonly,
    automaticLayout: true,
    model: model,
    theme: theme,
  });
  editor.onDidChangeModelContent(() => {
    script.script_body = editor.getValue();
  });
  // get code if editing or cloning script
  if (props.script)
    downloadScript(script.id, { with_snippets: props.readonly }).then((r) => {
      script.script_body = r.code;
      editor.setValue(r.code);
      // need to add this in the download function otherwise the above will trigger an edit
      watch(
        () => script.script_body,
        () => {
          edited.value = true;
        },
-      });
+      );
    }
    // component life cycle hooks
    onMounted(async () => {
      agentLoading.value = true;
      await getAgentOptions();
      agentLoading.value = false;
    });
  else {
    watch(
      () => script.script_body,
      () => {
        edited.value = true;
      },
    );
  }
-    return {
+  // watch for changes in language
-      // reactive data
+  watch(lang, () => {
-      formScript: script.value,
+    monaco.editor.setModelLanguage(model, lang.value);
-      maximized,
+  });
-      loading,
+}
      agentOptions,
      agent,
      agentLoading,
      lang,
      missingShebang,
-      // non-reactive data
+function unloadEditor() {
-      shellOptions,
+  editor.getModel()?.dispose();
-      agentPlatformOptions,
+  editor.dispose();
  onDialogHide();
 }
-      //computed
+function generateScriptOpenAI() {
-      title,
+  $q.dialog({
    title: "Ask ChatGPT what you need!",
    prompt: {
      model: `${lang.value} code that `,
      type: "text",
    },
    cancel: true,
    persistent: true,
  }).onOk(async (data) => {
    const completion = await generateScript({
      prompt: data,
    });
    script.script_body = completion;
  });
 }
-      //methods
+// add are you sure prompt to unsaved script
-      submitForm,
+const edited = ref(false);
      openTestScriptModal,
-      // quasar dialog plugin
+function closeEditor() {
-      dialogRef,
+  if (edited.value)
-      onDialogHide,
+    $q.dialog({
-    };
+      title: "You have unsaved changes. Are you sure you want to close?",
-  },
+      cancel: true,
-};
+      ok: true,
    }).onOk(async () => {
      unloadEditor();
    });
  else unloadEditor();
 }
 // component life cycle hooks
 onMounted(async () => {
  agentLoading.value = true;
  await getAgentOptions();
  agentLoading.value = false;
 });
 </script>
--- a/src/components/scripts/ScriptManager.vue
+++ b/src/components/scripts/ScriptManager.vue
@@ -175,6 +175,28 @@
              >
                <q-tooltip> Shell </q-tooltip>
              </q-icon>
              <q-icon
                v-else-if="props.node.shell === 'nushell'"
                name="mdi-code-greater-than"
                color="primary"
              >
                <q-tooltip> Nushell </q-tooltip>
              </q-icon>
              <q-icon
                v-else-if="props.node.shell === 'deno'"
                name="mdi-language-typescript"
                color="primary"
              >
                <q-tooltip> Deno </q-tooltip>
              </q-icon>
              <!-- is community script icon -->
              <img
                v-if="props.node.script_type === 'builtin'"
                class="vertical-middle"
                :src="trmmLogo"
                style="height: 20px; max-width: 20px"
              />
              <span
                class="q-pl-xs text-weight-bold"
@@ -286,15 +308,10 @@
          </template>
        </q-tree>
      </div>
-      <q-table
+      <tactical-table
        v-if="tableView"
        dense
        :table-class="{
          'table-bgcolor': !$q.dark.isActive,
          'table-bgcolor-dark': $q.dark.isActive,
        }"
        :style="{ 'max-height': `${$q.screen.height - 182}px` }"
        class="tbl-sticky"
        :rows="visibleScripts"
        :columns="columns"
        :loading="loading"
@@ -304,6 +321,7 @@
        binary-state-sort
        virtual-scroll
        :rows-per-page-options="[0]"
        column-select
      >
        <template v-slot:header-cell-favorite="props">
          <q-th :props="props" auto-width>
@@ -425,7 +443,7 @@
              </q-list>
            </q-menu>
            <!-- favorite -->
-            <q-td>
+            <q-td key="favorite" :props="props">
              <q-icon
                v-if="props.row.favorite"
                color="yellow-8"
@@ -434,7 +452,7 @@
              />
            </q-td>
            <!-- shell icon -->
-            <q-td>
+            <q-td key="shell" :props="props">
              <q-icon
                v-if="props.row.shell === 'powershell'"
                name="mdi-powershell"
@@ -467,9 +485,25 @@
              >
                <q-tooltip> Shell </q-tooltip>
              </q-icon>
              <q-icon
                v-else-if="props.row.shell === 'nushell'"
                size="sm"
                name="mdi-code-greater-than"
                color="primary"
              >
                <q-tooltip> Nushell </q-tooltip>
              </q-icon>
              <q-icon
                v-else-if="props.row.shell === 'deno'"
                size="sm"
                name="mdi-language-typescript"
                color="primary"
              >
                <q-tooltip> Deno </q-tooltip>
              </q-icon>
            </q-td>
            <!-- supported platforms -->
-            <q-td>
+            <q-td key="supported_platforms" :props="props">
              <q-badge
                v-if="
                  !props.row.supported_platforms ||
@@ -487,7 +521,17 @@
              >
            </q-td>
            <!-- name -->
-            <q-td :style="{ color: props.row.hidden ? 'grey' : '' }">
+            <q-td
              key="name"
              :props="props"
              :style="{ color: props.row.hidden ? 'grey' : '' }"
            >
              <!-- is community script icon -->
              <img
                v-if="props.row.script_type === 'builtin'"
                :src="trmmLogo"
                style="height: 20px; max-width: 20px"
              />
              {{ truncateText(props.row.name, 50) }}
              <q-tooltip
                v-if="props.row.name.length >= 50"
@@ -495,9 +539,10 @@
              >
                {{ props.row.name }}
              </q-tooltip>
              <q-tooltip :delay="600">ID: {{ props.row.id }}</q-tooltip>
            </q-td>
            <!-- args -->
-            <q-td>
+            <q-td key="args" :props="props">
              <span v-if="props.row.args.length > 0">
                {{ truncateText(props.row.args.toString(), 30) }}
                <q-tooltip
@@ -509,8 +554,8 @@
              </span>
            </q-td>
-            <q-td>{{ props.row.category }}</q-td>
+            <q-td key="category" :props="props">{{ props.row.category }}</q-td>
-            <q-td>
+            <q-td key="desc" :props="props">
              {{ truncateText(props.row.description, 30) }}
              <q-tooltip
                v-if="props.row.description.length >= 30"
@@ -518,10 +563,13 @@
                >{{ props.row.description }}</q-tooltip
              >
            </q-td>
-            <q-td>{{ props.row.default_timeout }}</q-td>
+            <q-td key="default_timeout" :props="props">{{
              props.row.default_timeout
            }}</q-td>
            <q-td></q-td>
          </q-tr>
        </template>
-      </q-table>
+      </tactical-table>
    </q-card>
  </q-dialog>
 </template>
@@ -545,12 +593,15 @@ import { notifySuccess } from "@/utils/notify";
 import ScriptUploadModal from "@/components/scripts/ScriptUploadModal.vue";
 import ScriptFormModal from "@/components/scripts/ScriptFormModal.vue";
 import ScriptSnippets from "@/components/scripts/ScriptSnippets.vue";
 import TacticalTable from "@/components/ui/TacticalTable.vue";
 import trmmLogo from "@/assets/trmm_256.png";
 // static data
 const columns = [
  {
    name: "favorite",
-    label: "",
+    label: "Favorites",
    field: "favorite",
    align: "left",
    sortable: true,
@@ -608,12 +659,15 @@ const columns = [
 export default {
  name: "ScriptManager",
  components: {
    TacticalTable,
  },
  emits: [...useDialogPluginComponent.emits],
  setup() {
    // setup vuex store
    const store = useStore();
    const showCommunityScripts = computed(
-      () => store.state.showCommunityScripts
+      () => store.state.showCommunityScripts,
    );
    // setup quasar plugins
@@ -714,7 +768,7 @@ export default {
        return showCommunityScripts.value
          ? scripts.value.filter((i) => !i.hidden)
          : scripts.value.filter(
-              (i) => i.script_type !== "builtin" && !i.hidden
+              (i) => i.script_type !== "builtin" && !i.hidden,
            );
      }
    });
@@ -867,7 +921,7 @@ export default {
    }
    // component life cycle hooks
-    onMounted(getScripts());
+    onMounted(getScripts);
    return {
      // reactive data
@@ -877,6 +931,7 @@ export default {
      loading,
      showCommunityScripts,
      showHiddenScripts,
      trmmLogo,
      // computed
      visibleScripts,
--- a/src/components/scripts/ScriptOutputCopyClip.vue
+++ b/src/components/scripts/ScriptOutputCopyClip.vue
@@ -0,0 +1,26 @@
 <template>
  <div class="row q-gutter-sm items-center">
    <div class="col-auto">{{ label }}</div>
    <div class="col-auto">
      <q-btn dense flat size="md" icon="content_copy" @click="copyText">
        <q-tooltip>Copy to Clipboard</q-tooltip>
      </q-btn>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import { copyOutput } from "@/utils/helpers";
 const props = defineProps({
  label: String,
  data: {
    type: String,
    required: true,
  },
 });
 const copyText = () => {
  copyOutput(props.data);
 };
 </script>
--- a/src/components/scripts/ScriptSnippetFormModal.vue
+++ b/src/components/scripts/ScriptSnippetFormModal.vue
@@ -1,192 +1,235 @@
 <template>
  <q-dialog
    ref="dialogRef"
    maximized
    @hide="onDialogHide"
-    persistent
+    @show="loadEditor"
-    @keydown.esc="onDialogHide"
+    @before-hide="unloadEditor"
    :maximized="maximized"
  >
-    <q-card
+    <q-card class="q-dialog-plugin">
      class="q-dialog-plugin"
      :style="maximized ? '' : 'width: 70vw; max-width: 90vw'"
    >
      <q-bar>
-        {{ title }}
+        <span class="q-pr-sm">{{ title }}</span>
        <q-btn
          v-if="!snippet && openAIEnabled"
          :disable="loading"
          dense
          size="xs"
          label="Generate Script"
          color="primary"
          no-caps
          @click="generateScriptOpenAI"
        />
        <q-space />
        <q-btn
          dense
          flat
          icon="minimize"
          @click="maximized = false"
          :disable="!maximized"
        >
          <q-tooltip v-if="maximized" class="bg-white text-primary"
            >Minimize</q-tooltip
          >
        </q-btn>
        <q-btn
          dense
          flat
          icon="crop_square"
          @click="maximized = true"
          :disable="maximized"
        >
          <q-tooltip v-if="!maximized" class="bg-white text-primary"
            >Maximize</q-tooltip
          >
        </q-btn>
        <q-btn dense flat icon="close" v-close-popup>
          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
        </q-btn>
      </q-bar>
-      <q-form @submit="submitForm">
+      <div class="row">
-        <div class="row">
+        <q-input
-          <q-input
+          :rules="[(val: string) => !!val || '*Required']"
-            :rules="[(val) => !!val || '*Required']"
+          class="q-pa-sm col-4"
-            class="q-pa-sm col-4"
+          v-model="snippet.name"
-            v-model="formSnippet.name"
+          label="Name"
-            label="Name"
+          filled
-            filled
+          dense
            dense
          />
          <q-select
            v-model="formSnippet.shell"
            :options="shellOptions"
            class="q-pa-sm col-2"
            label="Shell Type"
            options-dense
            filled
            dense
            emit-value
            map-options
          />
          <q-input
            class="q-pa-sm col-6"
            filled
            dense
            v-model="formSnippet.desc"
            label="Description"
          />
        </div>
        <v-ace-editor
          v-model:value="formSnippet.code"
          :lang="lang"
          :theme="$q.dark.isActive ? 'tomorrow_night_eighties' : 'tomorrow'"
          :style="{ height: `${maximized ? '80vh' : '70vh'}` }"
          wrap
          :printMargin="false"
          :options="{ fontSize: '14px' }"
        />
-        <q-card-actions align="right">
+        <q-select
-          <q-btn dense flat label="Cancel" v-close-popup />
+          v-model="snippet.shell"
-          <q-btn
+          :options="shellOptions"
-            :loading="loading"
+          class="q-pa-sm col-2"
-            dense
+          label="Shell Type"
-            flat
+          options-dense
-            label="Save"
+          filled
-            color="primary"
+          dense
-            type="submit"
+          emit-value
-          />
+          map-options
-        </q-card-actions>
+        />
-      </q-form>
+        <q-input
          class="q-pa-sm col-6"
          filled
          dense
          v-model="snippet.desc"
          label="Description"
        />
      </div>
      <div
        ref="snippetEditor"
        :style="{ height: `${$q.screen.height - 132}px` }"
      ></div>
      <q-card-actions align="right">
        <q-btn dense flat label="Cancel" v-close-popup />
        <q-btn
          :loading="loading"
          dense
          flat
          label="Save"
          color="primary"
          @click="submit"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
 </template>
-<script>
+<script setup lang="ts">
 // composable imports
-import { ref, computed } from "vue";
+import { ref, watch, reactive, computed } from "vue";
 import { useStore } from "vuex";
 import { useQuasar } from "quasar";
 import { generateScript } from "@/api/core";
 import { useDialogPluginComponent } from "quasar";
 import { saveScriptSnippet, editScriptSnippet } from "@/api/scripts";
 import { notifySuccess } from "@/utils/notify";
 // ui imports
-import { VAceEditor } from "vue3-ace-editor";
+import * as monaco from "monaco-editor";
-// imports for ace editor
+import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
-import "ace-builds/src-noconflict/mode-powershell";
+import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
-import "ace-builds/src-noconflict/mode-python";
+import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
-import "ace-builds/src-noconflict/mode-batchfile";
+import jsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
-import "ace-builds/src-noconflict/mode-sh";
+import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
-import "ace-builds/src-noconflict/theme-tomorrow_night_eighties";
+
-import "ace-builds/src-noconflict/theme-tomorrow";
+// https://github.com/microsoft/monaco-editor/issues/4045#issuecomment-1723787448
 self.MonacoEnvironment = {
  getWorker: function (workerId, label) {
    switch (label) {
      case "json":
        return new jsonWorker();
      case "css":
      case "scss":
      case "less":
        return new cssWorker();
      case "html":
      case "handlebars":
      case "razor":
        return new htmlWorker();
      case "typescript":
      case "javascript":
        return new jsWorker();
      default:
        return new editorWorker();
    }
  },
 };
 // types
 import type { ScriptSnippet } from "@/types/scripts";
 // static data
 import { shellOptions } from "@/composables/scripts";
-export default {
+// props
-  name: "ScriptFormModal",
+const props = defineProps<{ snippet?: ScriptSnippet }>();
  emits: [...useDialogPluginComponent.emits],
  components: {
    VAceEditor,
  },
  props: {
    snippet: Object,
  },
  setup(props) {
    // setup quasar plugins
    const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
-    // snippet form logic
+// emits
-    const snippet = props.snippet
+defineEmits([...useDialogPluginComponent.emits]);
      ? ref(Object.assign({}, props.snippet))
      : ref({ name: "", code: "", shell: "powershell" });
    const maximized = ref(false);
    const loading = ref(false);
-    const title = computed(() => {
+// quasar dialog setup
-      if (props.snippet) {
+const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
-        return `Editing ${snippet.value.name}`;
+
-      } else {
+// setup quasar
-        return "Adding New Script Snippet";
+const $q = useQuasar();
-      }
+
 // setup store
 const store = useStore();
 const openAIEnabled = computed(() => store.state.openAIIntegrationEnabled);
 // snippet form logic
 const snippet: ScriptSnippet = props.snippet
  ? reactive(Object.assign({}, props.snippet))
  : reactive({ name: "", code: "", shell: "powershell" });
 const loading = ref(false);
 const title = computed(() => {
  if (props.snippet) {
    return `Editing ${snippet.name}`;
  } else {
    return "Adding New Script Snippet";
  }
 });
 // convert highlighter language to match what ace expects
 const lang = computed(() => {
  switch (snippet.shell) {
    case "cmd":
      return "bat";
    case "powershell":
      return "powershell";
    case "python":
      return "python";
    case "shell":
    case "nushell":
      return "shell";
    case "deno":
      return "typescript";
    default:
      return "";
  }
 });
 async function submit() {
  loading.value = true;
  try {
    const result = props.snippet
      ? await editScriptSnippet(snippet)
      : await saveScriptSnippet(snippet);
    onDialogOK();
    notifySuccess(result);
  } catch (e) {
    console.error(e);
  }
  loading.value = false;
 }
 const snippetEditor = ref<HTMLElement | null>(null);
 let editor: monaco.editor.IStandaloneCodeEditor;
 function loadEditor() {
  var model = monaco.editor.createModel(snippet.code, lang.value);
  const theme = $q.dark.isActive ? "vs-dark" : "vs-light";
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  editor = monaco.editor.create(snippetEditor.value!, {
    automaticLayout: true,
    model: model,
    theme: theme,
  });
  editor.onDidChangeModelContent(() => {
    snippet.code = editor.getValue();
  });
  // watch for changes in language
  watch(lang, () => {
    monaco.editor.setModelLanguage(model, lang.value);
  });
 }
 function unloadEditor() {
  editor.getModel()?.dispose();
  editor.dispose();
  onDialogHide();
 }
 function generateScriptOpenAI() {
  $q.dialog({
    title: "Ask ChatGPT what you need!",
    prompt: {
      model: `${lang.value} code that `,
      type: "text",
    },
    cancel: true,
    persistent: true,
  }).onOk(async (data) => {
    const completion = await generateScript({
      prompt: data,
    });
-
+    snippet.code = completion;
-    // convert highlighter language to match what ace expects
+  });
-    const lang = computed(() => {
+}
      if (snippet.value.shell === "cmd") return "batchfile";
      else if (snippet.value.shell === "powershell") return "powershell";
      else if (snippet.value.shell === "python") return "python";
      else if (snippet.value.shell === "shell") return "sh";
      else return "";
    });
    async function submitForm() {
      loading.value = true;
      try {
        const result = props.snippet
          ? await editScriptSnippet(snippet.value)
          : await saveScriptSnippet(snippet.value);
        onDialogOK();
        notifySuccess(result);
      } catch (e) {
        console.error(e);
      }
      loading.value = false;
    }
    return {
      // reactive data
      formSnippet: snippet.value,
      maximized,
      lang,
      loading,
      // non-reactive data
      shellOptions,
      //computed
      title,
      //methods
      submitForm,
      // quasar dialog plugin
      dialogRef,
      onDialogHide,
    };
  },
 };
 </script>
--- a/src/components/scripts/ScriptSnippets.vue
+++ b/src/components/scripts/ScriptSnippets.vue
@@ -124,6 +124,22 @@
              >
                <q-tooltip> Shell </q-tooltip>
              </q-icon>
              <q-icon
                v-else-if="props.row.shell === 'nushell'"
                name="mdi-nushell"
                color="primary"
                size="sm"
              >
                <q-tooltip> Nushell </q-tooltip>
              </q-icon>
              <q-icon
                v-else-if="props.row.shell === 'deno'"
                name="mdi-typescript"
                color="primary"
                size="sm"
              >
                <q-tooltip> Deno </q-tooltip>
              </q-icon>
            </q-td>
            <!-- name -->
            <q-td>{{ props.row.name }}</q-td>
--- a/src/components/scripts/ScriptUploadModal.vue
+++ b/src/components/scripts/ScriptUploadModal.vue
@@ -42,15 +42,7 @@
        </q-card-section>
        <q-card-section>
-          <q-file
+          <q-file label="Script Upload" v-model="file" filled dense counter>
            label="Script Upload"
            v-model="file"
            hint="Supported file types: .ps1, .bat, .py, .sh"
            filled
            dense
            counter
            accept=".ps1, .bat, .py, .sh"
          >
            <template v-slot:prepend>
              <q-icon name="attach_file" />
            </template>
@@ -93,6 +85,20 @@
          />
        </q-card-section>
        <q-card-section>
          <tactical-dropdown
            v-model="script.env_vars"
            label="Environment Variables"
            placeholder="(press Enter after typing each key=value pair)"
            filled
            use-input
            multiple
            hide-dropdown-icon
            input-debounce="0"
            new-value-mode="add"
          />
        </q-card-section>
        <q-card-section>
          <q-input
            label="Default Timeout"
--- a/src/components/scripts/TestScriptModal.vue
+++ b/src/components/scripts/TestScriptModal.vue
@@ -8,8 +8,25 @@
          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
        </q-btn>
      </q-bar>
-      <q-card-section class="scroll" style="max-height: 70vh; height: 70vh">
+      <q-card-section style="height: 70vh" class="scroll">
-        <pre v-if="ret">{{ ret }}</pre>
+        <div>
          Run Time:
          <code>{{ ret.execution_time }} seconds</code>
          <br />Return Code:
          <code>{{ ret.retcode }}</code>
          <br />
        </div>
        <br />
        <div v-if="ret.stdout">
          <script-output-copy-clip label="Standard Output" :data="ret.stdout" />
          <q-separator />
          <pre>{{ ret.stdout }}</pre>
        </div>
        <div v-if="ret.stderr">
          <script-output-copy-clip label="Standard Error" :data="ret.stderr" />
          <q-separator />
          <pre>{{ ret.stderr }}</pre>
        </div>
        <q-inner-loading :showing="loading" />
      </q-card-section>
    </q-card>
@@ -19,22 +36,32 @@
 <script>
 // composition imports
 import { ref, onMounted } from "vue";
-import { testScript } from "@/api/scripts";
+import { testScript, testScriptOnServer } from "@/api/scripts";
 import { useDialogPluginComponent } from "quasar";
 import ScriptOutputCopyClip from "@/components/scripts/ScriptOutputCopyClip.vue";
 export default {
  name: "TestScriptModal",
  components: {
    ScriptOutputCopyClip,
  },
  emits: [...useDialogPluginComponent.emits],
  props: {
    script: !Object,
    agent: !String,
    ctx: !String,
  },
  setup(props) {
    // setup quasar dialog plugin
    const { dialogRef, onDialogHide } = useDialogPluginComponent();
    // main run script functionality
-    const ret = ref(null);
+    const ret = ref({
      execution_time: "",
      retcode: "",
      stdout: "",
      stderr: "",
    });
    const loading = ref(false);
    async function runTestScript() {
@@ -45,9 +72,14 @@ export default {
        args: props.script.args,
        shell: props.script.shell,
        run_as_user: props.script.run_as_user,
        env_vars: props.script.env_vars,
      };
      try {
-        ret.value = await testScript(props.agent, data);
+        if (props.ctx === "server") {
          ret.value = await testScriptOnServer(data);
        } else {
          ret.value = await testScript(props.agent, data);
        }
      } catch (e) {
        console.error(e);
      }
--- a/src/components/tasks/AutomatedTaskForm.vue
+++ b/src/components/tasks/AutomatedTaskForm.vue
@@ -87,163 +87,183 @@
          :done="step > 2"
          :error="!isValidStep2"
        >
-          <q-form @submit.prevent="addAction">
+          <div class="scroll" style="max-height: 60vh">
-            <div class="row q-pa-sm q-gutter-x-xs items-center">
+            <q-form @submit.prevent="addAction">
-              <div class="text-subtitle2 col-12">Action Type:</div>
+              <div class="row q-pa-sm q-gutter-x-xs items-center">
-              <q-option-group
+                <div class="text-subtitle2 col-12">Action Type:</div>
-                class="col-12"
+                <q-option-group
-                inline
+                  class="col-12"
-                v-model="actionType"
+                  inline
-                :options="[
+                  v-model="actionType"
-                  { label: 'Script', value: 'script' },
+                  :options="[
-                  { label: 'Command', value: 'cmd' },
+                    { label: 'Script', value: 'script' },
-                ]"
+                    { label: 'Command', value: 'cmd' },
-              />
+                  ]"
                />
-              <tactical-dropdown
+                <tactical-dropdown
-                v-if="actionType === 'script'"
+                  v-if="actionType === 'script'"
-                class="col-4"
+                  class="col-3"
-                label="Select script"
+                  label="Select script"
-                v-model="script"
+                  v-model="script"
-                :options="scriptOptions"
+                  :options="scriptOptions"
-                filled
+                  filled
-                mapOptions
+                  mapOptions
-                filterable
+                  filterable
-              />
+                />
-              <q-select
+                <q-select
-                v-if="actionType === 'script'"
+                  v-if="actionType === 'script'"
-                class="col-5"
+                  class="col-3"
-                dense
+                  dense
-                label="Script Arguments (press Enter after typing each argument)"
+                  label="Script Arguments (press Enter after typing each argument)"
-                filled
+                  filled
-                v-model="defaultArgs"
+                  v-model="defaultArgs"
-                use-input
+                  use-input
-                use-chips
+                  use-chips
-                multiple
+                  multiple
-                hide-dropdown-icon
+                  hide-dropdown-icon
-                input-debounce="0"
+                  input-debounce="0"
-                new-value-mode="add"
+                  new-value-mode="add"
-              />
+                />
-              <q-input
+                <q-select
-                v-if="actionType === 'script'"
+                  v-if="actionType === 'script'"
-                class="col-2"
+                  class="col-3"
-                filled
+                  dense
-                dense
+                  :label="envVarsLabel"
-                v-model.number="defaultTimeout"
+                  filled
-                type="number"
+                  v-model="defaultEnvVars"
-                label="Timeout (seconds)"
+                  use-input
-              />
+                  use-chips
                  multiple
                  hide-dropdown-icon
                  input-debounce="0"
                  new-value-mode="add"
                />
-              <q-input
+                <q-input
-                v-if="actionType === 'cmd'"
+                  v-if="actionType === 'script'"
-                label="Command"
+                  class="col-2"
-                v-model="command"
+                  filled
                  dense
                  v-model.number="defaultTimeout"
                  type="number"
                  label="Timeout (seconds)"
                />
                <q-input
                  v-if="actionType === 'cmd'"
                  label="Command"
                  v-model="command"
                  dense
                  filled
                  class="col-7"
                />
                <q-input
                  v-if="actionType === 'cmd'"
                  class="col-2"
                  filled
                  dense
                  v-model.number="defaultTimeout"
                  type="number"
                  label="Timeout (seconds)"
                />
                <q-option-group
                  v-if="actionType === 'cmd'"
                  class="col-2 q-pl-sm"
                  inline
                  v-model="shell"
                  :options="[
                    { label: 'Batch', value: 'cmd' },
                    { label: 'Powershell', value: 'powershell' },
                  ]"
                />
                <q-btn
                  class="col-1"
                  type="submit"
                  style="width: 50px"
                  flat
                  dense
                  icon="add"
                  color="primary"
                />
              </div>
            </q-form>
            <div class="text-subtitle2 q-pa-sm">
              Actions:
              <q-checkbox
                class="float-right"
                label="Continue on Errors"
                v-model="state.continue_on_error"
                dense
-                filled
+              >
-                class="col-7"
+                <q-tooltip>Continue task if an action fails</q-tooltip>
-              />
+              </q-checkbox>
              <q-input
                v-if="actionType === 'cmd'"
                class="col-2"
                filled
                dense
                v-model.number="defaultTimeout"
                type="number"
                label="Timeout (seconds)"
              />
              <q-option-group
                v-if="actionType === 'cmd'"
                class="col-2 q-pl-sm"
                inline
                v-model="shell"
                :options="[
                  { label: 'Batch', value: 'cmd' },
                  { label: 'Powershell', value: 'powershell' },
                ]"
              />
              <q-btn
                class="col-1"
                type="submit"
                style="width: 50px"
                flat
                dense
                icon="add"
                color="primary"
              />
            </div>
-          </q-form>
+            <div class="q-pt-sm" style="height: 150px">
-          <div class="text-subtitle2 q-pa-sm">
+              <draggable
-            Actions:
+                class="q-list"
-            <q-checkbox
+                handle=".handle"
-              class="float-right"
+                ghost-class="ghost"
-              label="Continue on Errors"
+                v-model="state.actions"
-              v-model="state.continue_on_error"
+                item-key="index"
-              dense
+              >
-            >
+                <template v-slot:item="{ index, element }">
-              <q-tooltip>Continue task if an action fails</q-tooltip>
+                  <q-item>
-            </q-checkbox>
+                    <q-item-section avatar>
          </div>
          <div class="scroll q-pt-sm" style="height: 40vh; max-height: 40vh">
            <draggable
              class="q-list"
              handle=".handle"
              ghost-class="ghost"
              v-model="state.actions"
              item-key="index"
            >
              <template v-slot:item="{ index, element }">
                <q-item>
                  <q-item-section avatar>
                    <q-icon
                      class="handle"
                      style="cursor: move"
                      name="drag_handle"
                    />
                  </q-item-section>
                  <q-item-section v-if="element.type === 'script'">
                    <q-item-label>
                      <q-icon size="sm" name="description" color="primary" />
                      &nbsp; {{ element.name }}
                    </q-item-label>
                    <q-item-label caption>
                      Arguments: {{ element.script_args }}
                    </q-item-label>
                    <q-item-label caption>
                      Timeout: {{ element.timeout }}
                    </q-item-label>
                  </q-item-section>
                  <q-item-section v-else>
                    <q-item-label>
                      <q-icon size="sm" name="terminal" color="primary" />
                      &nbsp;
                      <q-icon
-                        size="sm"
+                        class="handle"
-                        :name="
+                        style="cursor: move"
-                          element.shell === 'cmd'
+                        name="drag_handle"
                            ? 'mdi-microsoft-windows'
                            : 'mdi-powershell'
                        "
                        color="primary"
                      />
-                      {{ element.command }}
+                    </q-item-section>
-                    </q-item-label>
+                    <q-item-section v-if="element.type === 'script'">
-                    <q-item-label caption>
+                      <q-item-label>
-                      Timeout: {{ element.timeout }}
+                        <q-icon size="sm" name="description" color="primary" />
-                    </q-item-label>
+                        &nbsp; {{ element.name }}
-                  </q-item-section>
+                      </q-item-label>
-                  <q-item-section side>
+                      <q-item-label caption>
-                    <q-icon
+                        Arguments: {{ element.script_args }}
-                      class="cursor-pointer"
+                      </q-item-label>
-                      color="negative"
+                      <q-item-label caption>
-                      name="close"
+                        Env Vars: {{ element.env_vars }}
-                      @click="removeAction(index)"
+                      </q-item-label>
-                    />
+                      <q-item-label caption>
-                  </q-item-section>
+                        Timeout: {{ element.timeout }}
-                </q-item>
+                      </q-item-label>
-              </template>
+                    </q-item-section>
-            </draggable>
+                    <q-item-section v-else>
                      <q-item-label>
                        <q-icon size="sm" name="terminal" color="primary" />
                        &nbsp;
                        <q-icon
                          size="sm"
                          :name="
                            element.shell === 'cmd'
                              ? 'mdi-microsoft-windows'
                              : 'mdi-powershell'
                          "
                          color="primary"
                        />
                        {{ element.command }}
                      </q-item-label>
                      <q-item-label caption>
                        Timeout: {{ element.timeout }}
                      </q-item-label>
                    </q-item-section>
                    <q-item-section side>
                      <q-icon
                        class="cursor-pointer"
                        color="negative"
                        name="close"
                        @click="removeAction(index)"
                      />
                    </q-item-section>
                  </q-item>
                </template>
              </draggable>
            </div>
          </div>
        </q-step>
@@ -265,7 +285,7 @@
              <q-card-section
                v-if="
                  ['runonce', 'daily', 'weekly', 'monthly'].includes(
-                    state.task_type
+                    state.task_type,
                  )
                "
                class="row"
@@ -296,6 +316,22 @@
                />
              </q-card-section>
              <q-card-section
                v-if="
                  state.task_type === 'onboarding' ||
                  state.task_type === 'runonce'
                "
                class="row"
              >
                <span v-if="state.task_type === 'onboarding'"
                  >This task will run as soon as it's created on the
                  agent.</span
                >
                <span v-else-if="state.task_type === 'runonce'"
                  >Start Time must be in the future for run once tasks.</span
                >
              </q-card-section>
              <!-- daily options -->
              <q-card-section v-if="state.task_type === 'daily'" class="row">
                <!-- daily interval -->
@@ -561,7 +597,8 @@
              <q-card-section
                v-if="
                  state.task_type !== 'checkfailure' &&
-                  state.task_type !== 'manual'
+                  state.task_type !== 'manual' &&
                  state.task_type !== 'onboarding'
                "
                class="row"
              >
@@ -599,7 +636,7 @@
                    (val) =>
                      convertPeriodToSeconds(val) >=
                        convertPeriodToSeconds(
-                          state.task_repetition_interval
+                          state.task_repetition_interval,
                        ) ||
                      'Repetition duration must be greater than repetition interval',
                  ]"
@@ -694,7 +731,7 @@
          @click="
            validateStep(
              step === 1 ? $refs.taskGeneralForm : undefined,
-              $refs.stepper
+              $refs.stepper,
            )
          "
          color="primary"
@@ -718,7 +755,7 @@
 <script>
 // composition imports
-import { ref, watch, onMounted } from "vue";
+import { ref, watch, onMounted, defineComponent } from "vue";
 import { useDialogPluginComponent } from "quasar";
 import draggable from "vuedraggable";
 import { saveTask, updateTask } from "@/api/tasks";
@@ -727,6 +764,7 @@ import { useCheckDropdown } from "@/composables/checks";
 import { useCustomFieldDropdown } from "@/composables/core";
 import { notifySuccess, notifyError } from "@/utils/notify";
 import { validateTimePeriod } from "@/utils/validation";
 import { envVarsLabel } from "@/constants/constants";
 import {
  convertPeriodToSeconds,
  convertToBitArray,
@@ -750,6 +788,7 @@ const taskTypeOptions = [
  { label: "Monthly", value: "monthly" },
  { label: "Run Once", value: "runonce" },
  { label: "On check failure", value: "checkfailure" },
  { label: "Onboarding", value: "onboarding" },
  { label: "Manual", value: "manual" },
 ];
@@ -804,7 +843,7 @@ const taskInstancePolicyOptions = [
  { label: "Stop Existing", value: 3 },
 ];
-export default {
+export default defineComponent({
  components: { TacticalDropdown, draggable },
  name: "AddAutomatedTask",
  emits: [...useDialogPluginComponent.emits],
@@ -817,15 +856,21 @@ export default {
    const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
    // setup dropdowns
-    const { script, scriptOptions, defaultTimeout, defaultArgs } =
+    const {
-      useScriptDropdown(undefined, {
+      script,
-        onMount: true,
+      scriptName,
-      });
+      scriptOptions,
      defaultTimeout,
      defaultArgs,
      defaultEnvVars,
    } = useScriptDropdown({
      onMount: true,
    });
    // set defaultTimeout to 30
    defaultTimeout.value = 30;
-    const { checkOptions, getCheckOptions } = useCheckDropdown();
+    const { checkOptions, getCheckOptions } = useCheckDropdown(props.parent);
    const { customFieldOptions } = useCustomFieldDropdown({ onMount: true });
    // add task logic
@@ -908,12 +953,11 @@ export default {
      if (actionType.value === "script") {
        task.value.actions.push({
          type: "script",
-          name: scriptOptions.value.find(
+          name: scriptName.value,
            (option) => option.value === script.value
          ).label,
          script: script.value,
          timeout: defaultTimeout.value,
          script_args: defaultArgs.value,
          env_vars: defaultEnvVars.value,
        });
      } else if (actionType.value === "cmd") {
        task.value.actions.push({
@@ -927,6 +971,7 @@ export default {
      // clear fields after add
      script.value = null;
      defaultArgs.value = [];
      defaultEnvVars.value = [];
      defaultTimeout.value = 30;
      command.value = "";
    }
@@ -993,13 +1038,13 @@ export default {
      // remove milliseconds and Z to work with native date input
      task.value.run_time_date = formatDateInputField(
        task.value.run_time_date,
-        true
+        true,
      );
      if (task.value.expire_date)
        task.value.expire_date = formatDateInputField(
          task.value.expire_date,
-          true
+          true,
        );
      // set task type if monthlydow is being used
@@ -1043,7 +1088,7 @@ export default {
        task.value.monthly_weeks_of_month = [];
        task.value.task_instance_policy = 0;
        task.value.expire_date = null;
-      }
+      },
    );
    // check the collector box when editing task and custom field is set
@@ -1089,6 +1134,7 @@ export default {
      script,
      defaultTimeout,
      defaultArgs,
      defaultEnvVars,
      actionType,
      command,
      shell,
@@ -1116,6 +1162,7 @@ export default {
      monthOptions,
      taskTypeOptions,
      taskInstancePolicyOptions,
      envVarsLabel,
      // methods
      submit,
@@ -1131,7 +1178,7 @@ export default {
      onDialogHide,
    };
  },
-};
+});
 </script>
 <style scoped>
--- a/src/components/ui/IntegrationsContextMenu.vue
+++ b/src/components/ui/IntegrationsContextMenu.vue
@@ -0,0 +1,33 @@
 <template>
  <q-menu anchor="top end" self="top start">
    <q-list>
      <q-item
        v-for="integration in $integrations[type + 'MenuIntegrations']"
        :key="integration.name"
        dense
        clickable
        @click="
          integration.type === 'dialog'
            ? $q.dialog({
                component: integration.component,
                componentProps: integration.props
                  ? integration.props(id, type)
                  : undefined,
              })
            : undefined
        "
        :to="integration.type === 'route' ? integration.uri : undefined"
        v-close-popup
      >
        <q-item-section>{{ integration.name }}</q-item-section>
      </q-item>
    </q-list>
  </q-menu>
 </template>
 <script setup lang="ts">
 defineProps<{
  type: "client" | "agent" | "site";
  id: string | number;
 }>();
 </script>
--- a/src/components/ui/TacticalDropdown.vue
+++ b/src/components/ui/TacticalDropdown.vue
@@ -25,13 +25,21 @@
        :key="mapOptions ? scope.opt.value : scope.opt"
      >
        <q-item-section>
-          <q-item-label
+          <q-item-label v-html="mapOptions ? scope.opt.label : scope.opt" />
-            v-html="mapOptions ? scope.opt.label : scope.opt"
+        </q-item-section>
-          ></q-item-label>
+        <q-item-section
          v-if="
            (filtered && mapOptions && scope.opt.cat) || scope.opt.img_right
          "
          side
        >
          {{ scope.opt.cat || "" }}
          <img
            v-if="scope.opt.img_right"
            :src="scope.opt.img_right"
            style="height: 20px; max-width: 20px"
          />
        </q-item-section>
        <q-item-section v-if="filtered && mapOptions && scope.opt.cat" side>{{
          scope.opt.cat
        }}</q-item-section>
      </q-item>
      <q-item-label
        v-if="scope.opt.category"
@@ -80,7 +88,7 @@ export default {
          if (!props.mapOptions)
            filteredOptions.value = props.options.filter(
-              (v) => v.toLowerCase().indexOf(needle) > -1
+              (v) => v.toLowerCase().indexOf(needle) > -1,
            );
          else
            filteredOptions.value = props.options.filter((v) => {
--- a/src/components/ui/TacticalTable.vue
+++ b/src/components/ui/TacticalTable.vue
@@ -0,0 +1,107 @@
 <template>
  <q-table
    :columns="localColumns"
    :visible-columns="visibleColumns"
    :table-class="{
      'table-bgcolor': !$q.dark.isActive,
      'table-bgcolor-dark': $q.dark.isActive,
      'column-bgcolor-dark': $q.dark.isActive && columnSelect,
      'column-bgcolor': !$q.dark.isActive && columnSelect,
      'sticky-header-right-column': columnSelect,
      'tbl-sticky': !columnSelect,
    }"
    v-bind="$attrs"
  >
    <template v-for="(_, slot) in $slots" v-slot:[slot]="scope">
      <slot :name="slot" v-bind="scope || {}" />
    </template>
    <template v-slot:header-cell-columnSelect="props">
      <q-th :props="props" auto-width>
        <q-btn dense flat icon="more_horiz">
          <q-menu>
            <q-option-group
              v-model="visibleColumns"
              :options="columnOptions"
              type="checkbox"
            />
          </q-menu>
        </q-btn>
      </q-th>
    </template>
  </q-table>
 </template>
 <script lang="ts">
 import { defineComponent } from "vue";
 export default defineComponent({
  inheritAttrs: false,
 });
 </script>
 <script setup lang="ts">
 import { ref } from "vue";
 import { type QTableColumn } from "quasar";
 const props = withDefaults(
  defineProps<{
    columns: QTableColumn[];
    columnSelect?: boolean;
    excludeColumns?: string[];
  }>(),
  { columnSelect: false, excludeColumns: () => ["columnSelect"] }
 );
 // save a non-reactive copy of columns to modify
 const localColumns: QTableColumn[] = Object.assign([], props.columns);
 if (props.columnSelect)
  localColumns.push({
    name: "columnSelect",
    label: "Column Select",
    field: "columnSelect",
  });
 const visibleColumns = ref(localColumns.map((column) => column.name));
 const columnOptions = ref(
  localColumns
    .filter((column) => !props.excludeColumns.includes(column.name))
    .map((column) => ({ label: column.label, value: column.name }))
 );
 </script>
 <style lang="sass">
 .column-bgcolor-dark
  td:last-child
    /* bg color is important for td; just specify one */
    background-color: #1d1d1d
 .column-bgcolor
  td:last-child
    /* bg color is important for td; just specify one */
    background-color: #ffffff
 .sticky-header-right-column
  tr th
    position: sticky
    /* higher than z-index for td below */
    z-index: 2
  /* this will be the loading indicator */
  thead tr:last-child th
    /* height of all previous header rows */
    top: 48px
    /* highest z-index */
    z-index: 3
  thead tr:last-child th
    top: 0
    z-index: 1
  tr:last-child th:last-child
    /* highest z-index */
    z-index: 3
  td:last-child
    z-index: 1
  td:last-child, th:last-child
    position: sticky
    right: 0
  /* prevent scrolling behind sticky top row on focus */
  tbody
    /* height of all previous header rows */
    scroll-margin-top: 48px
 </style>
--- a/src/composables/accounts.js
+++ b/src/composables/accounts.js
@@ -31,7 +31,7 @@ export function useUserDropdown(onMount = false) {
  }
  if (onMount) {
-    onMounted(getUserOptions());
+    onMounted(getUserOptions);
  }
  return {
--- a/src/composables/agents.js
+++ b/src/composables/agents.js
@@ -1,9 +1,10 @@
-import { ref } from "vue";
+import { ref, computed, onMounted } from "vue";
 import { useStore } from "vuex";
 import { fetchAgents } from "@/api/agents";
 import { formatAgentOptions } from "@/utils/format";
 // agent dropdown
-export function useAgentDropdown() {
+export function useAgentDropdown(opts = {}) {
  const agent = ref(null);
  const agents = ref([]);
  const agentOptions = ref([]);
@@ -12,10 +13,14 @@ export function useAgentDropdown() {
  async function getAgentOptions(flat = false) {
    agentOptions.value = formatAgentOptions(
      await fetchAgents({ detail: false }),
-      flat
+      flat,
    );
  }
  if (opts.onMount) {
    onMounted(getAgentOptions);
  }
  return {
    //data
    agent,
@@ -28,13 +33,16 @@ export function useAgentDropdown() {
 }
 export function cmdPlaceholder(shell) {
-  if (shell === "cmd") return "rmdir /S /Q C:\\Windows\\System32";
+  const store = useStore();
-  else if (shell === "powershell")
+  const placeholders = computed(() => store.state.run_cmd_placeholder_text);
-    return "Remove-Item -Recurse -Force C:\\Windows\\System32";
+
-  else return "rm -rf --no-preserve-root /";
+  if (shell === "cmd") return placeholders.value.cmd;
  else if (shell === "powershell") return placeholders.value.powershell;
  else return placeholders.value.shell;
 }
 export const agentPlatformOptions = [
  { value: "windows", label: "Windows" },
  { value: "linux", label: "Linux" },
  { value: "darwin", label: "macOS" },
 ];
--- a/src/composables/core.js
+++ b/src/composables/core.js
@@ -1,28 +0,0 @@
 import { ref, onMounted } from "vue";
 import { fetchCustomFields } from "@/api/core";
 import { formatCustomFieldOptions } from "@/utils/format";
 export function useCustomFieldDropdown({ onMount = false }) {
  const customFieldOptions = ref([]);
  // type can be "client", "site", or "agent"
  async function getCustomFieldOptions(model = null, flat = false) {
    const params = {};
    if (model) params[model] = model;
    customFieldOptions.value = formatCustomFieldOptions(
      await fetchCustomFields(params),
      flat
    );
  }
  if (onMount) onMounted(getCustomFieldOptions);
  return {
    //data
    customFieldOptions,
    //methods
    getCustomFieldOptions,
  };
 }
--- a/src/composables/core.ts
+++ b/src/composables/core.ts
@@ -0,0 +1,88 @@
 import { ref, computed, onMounted } from "vue";
 import { fetchCustomFields, fetchURLActions } from "@/api/core";
 import {
  formatCustomFieldOptions,
  formatURLActionOptions,
 } from "@/utils/format";
 import type { CustomField } from "@/types/core/customfields";
 import type { URLAction } from "@/types/core/urlactions";
 export interface URLActionOption extends URLAction {
  value: number;
  label: string;
 }
 export interface CustomFieldOption extends CustomField {
  value: number;
  label: string;
 }
 export interface UseCustomFieldDropdownParams {
  onMount?: boolean;
 }
 export function useCustomFieldDropdown(opts: UseCustomFieldDropdownParams) {
  const customFieldOptions = ref([] as CustomFieldOption[]);
  // type can be "client", "site", or "agent"
  async function getCustomFieldOptions(model = null, flat = false) {
    const params = {};
    if (model) params[model] = model;
    customFieldOptions.value = formatCustomFieldOptions(
      await fetchCustomFields(params),
      flat,
    );
  }
  const restActionOptions = computed(() =>
    customFieldOptions.value.filter((option) => option.type === "rest"),
  );
  if (opts.onMount) onMounted(getCustomFieldOptions);
  return {
    customFieldOptions,
    restActionOptions,
    //methods
    getCustomFieldOptions,
  };
 }
 export interface UseURLActionDropdownParams {
  onMount?: boolean;
 }
 export function useURLActionDropdown(opts: UseURLActionDropdownParams) {
  const urlActionOptions = ref([] as URLActionOption[]);
  // type can be "client", "site", or "agent"
  async function getURLActionOptions(flat = false) {
    const params = {};
    urlActionOptions.value = formatURLActionOptions(
      await fetchURLActions(params),
      flat,
    );
  }
  const webActionOptions = computed(() =>
    urlActionOptions.value.filter((action) => action.action_type === "web"),
  );
  const restActionOptions = computed(() =>
    urlActionOptions.value.filter((action) => action.action_type === "rest"),
  );
  if (opts?.onMount) onMounted(getURLActionOptions);
  return {
    urlActionOptions,
    restActionOptions,
    webActionOptions,
    //methods
    getURLActionOptions,
  };
 }
--- a/src/composables/filebrowser.ts
+++ b/src/composables/filebrowser.ts
@@ -0,0 +1,58 @@
 import { uid } from "quasar";
 import type { QTreeFileNode } from "../types/filebrowser";
 export function useFileBrowser() {
  function createFileNode(
    name: string,
    path: string,
    size = "0",
    asset_id?: string
  ): QTreeFileNode {
    return {
      id: uid(),
      label: name,
      path: path,
      type: "file",
      icon: "description",
      asset_id: asset_id,
      size: `${size}b`,
    };
  }
  function createFolderNode(
    name: string,
    path: string,
    icon = "folder",
    color = "yellow-9"
  ): QTreeFileNode {
    return {
      id: uid(),
      label: name,
      path: path,
      type: "folder",
      icon: icon,
      iconColor: color,
      selectable: true,
      lazy: true,
    };
  }
  function getFile(path: string, separator: "/" | "\\" = "/"): string {
    const file = path.split(separator).pop();
    return file ? file : "";
  }
  function getPath(path: string, separator: "/" | "\\" = "/"): string {
    const pathArray = path.split(separator);
    pathArray.pop();
    return pathArray.join(separator);
  }
  return {
    createFolderNode,
    createFileNode,
    getFile,
    getPath,
  };
 }
--- a/src/composables/scripts.js
+++ b/src/composables/scripts.js
@@ -1,65 +0,0 @@
 import { ref, watch, computed, onMounted } from "vue";
 import { useStore } from "vuex";
 import { fetchScripts } from "@/api/scripts";
 import { formatScriptOptions } from "@/utils/format";
 // script dropdown
 export function useScriptDropdown(setScript = null, { onMount = false } = {}) {
  const scriptOptions = ref([]);
  const defaultTimeout = ref(30);
  const defaultArgs = ref([]);
  const script = ref(setScript);
  const syntax = ref("");
  const link = ref("");
  const baseUrl =
    "https://github.com/amidaware/community-scripts/blob/main/scripts/";
  // specify parameters to filter out community scripts
  async function getScriptOptions(showCommunityScripts = false) {
    scriptOptions.value = Object.freeze(
      formatScriptOptions(await fetchScripts({ showCommunityScripts }))
    );
  }
  // watch scriptPk for changes and update the default timeout and args
  watch([script, scriptOptions], () => {
    if (script.value && scriptOptions.value.length > 0) {
      const tmpScript = scriptOptions.value.find(
        (i) => i.value === script.value
      );
      defaultTimeout.value = tmpScript.timeout;
      defaultArgs.value = tmpScript.args;
      syntax.value = tmpScript.syntax;
      link.value =
        tmpScript.script_type === "builtin"
          ? `${baseUrl}${tmpScript.filename}`
          : null;
    }
  });
  // vuex show community scripts
  const store = useStore();
  const showCommunityScripts = computed(() => store.state.showCommunityScripts);
  if (onMount) onMounted(() => getScriptOptions(showCommunityScripts.value));
  return {
    //data
    script,
    scriptOptions,
    defaultTimeout,
    defaultArgs,
    syntax,
    link,
    //methods
    getScriptOptions,
  };
 }
 export const shellOptions = [
  { label: "Powershell", value: "powershell" },
  { label: "Batch", value: "cmd" },
  { label: "Python", value: "python" },
  { label: "Shell", value: "shell" },
 ];
--- a/src/composables/scripts.ts
+++ b/src/composables/scripts.ts
@@ -0,0 +1,141 @@
 import { ref, watch, computed, onMounted } from "vue";
 import { useStore } from "vuex";
 import { fetchScripts } from "@/api/scripts";
 import {
  formatScriptOptions,
  removeExtraOptionCategories,
 } from "@/utils/format";
 import type { Script } from "@/types/scripts";
 import { AgentPlatformType } from "@/types/agents";
 export interface ScriptOption extends Script {
  label: string;
  value: number;
 }
 export interface useScriptDropdownParams {
  script?: number; // set a selected script on init
  plat?: AgentPlatformType; // set a platform for filterByPlatform
  onMount?: boolean; // loads script options on mount
 }
 // script dropdown
 export function useScriptDropdown(opts?: useScriptDropdownParams) {
  const scriptOptions = ref([] as ScriptOption[]);
  const defaultTimeout = ref(30);
  const defaultArgs = ref([] as string[]);
  const defaultEnvVars = ref([] as string[]);
  const script = ref(opts?.script);
  const scriptName = ref("");
  const syntax = ref<string | undefined>("");
  const link = ref<string | undefined>("");
  const plat = ref<AgentPlatformType | undefined>(opts?.plat);
  const baseUrl =
    "https://github.com/amidaware/community-scripts/blob/main/scripts/";
  // specify parameters to filter out community scripts
  async function getScriptOptions() {
    scriptOptions.value = Object.freeze(
      formatScriptOptions(
        await fetchScripts({
          showCommunityScripts: showCommunityScripts.value,
        }),
      ),
    ) as ScriptOption[];
  }
  // watch scriptPk for changes and update the default timeout and args
  watch([script, scriptOptions], () => {
    if (script.value && scriptOptions.value.length > 0) {
      const tmpScript = scriptOptions.value.find(
        (i) => i.value === script.value,
      );
      if (tmpScript) {
        defaultTimeout.value = tmpScript.default_timeout;
        defaultArgs.value = tmpScript.args;
        defaultEnvVars.value = tmpScript.env_vars;
        syntax.value = tmpScript.syntax;
        scriptName.value = tmpScript.label;
        link.value =
          tmpScript.script_type === "builtin"
            ? `${baseUrl}${tmpScript.filename}`
            : undefined;
      }
    }
  });
  // vuex show community scripts
  const store = useStore();
  const showCommunityScripts = computed(() => store.state.showCommunityScripts);
  // filter for only getting server tasks
  const serverScriptOptions = computed(
    () =>
      removeExtraOptionCategories(
        scriptOptions.value.filter(
          (script) =>
            script.category ||
            !script.supported_platforms ||
            script.supported_platforms.length === 0 ||
            script.supported_platforms.includes("linux"),
        ),
      ) as ScriptOption[],
  );
  const filterByPlatformOptions = computed(() => {
    if (!plat.value) {
      return scriptOptions.value;
    } else {
      return removeExtraOptionCategories(
        scriptOptions.value.filter(
          (script) =>
            script.category ||
            !script.supported_platforms ||
            script.supported_platforms.length === 0 ||
            script.supported_platforms.includes(plat.value!),
        ),
      ) as ScriptOption[];
    }
  });
  function reset() {
    defaultTimeout.value = 30;
    defaultArgs.value = [];
    defaultEnvVars.value = [];
    script.value = undefined;
    syntax.value = "";
    link.value = "";
  }
  if (opts?.onMount) onMounted(() => getScriptOptions());
  return {
    //data
    script,
    defaultTimeout,
    defaultArgs,
    defaultEnvVars,
    scriptName,
    syntax,
    link,
    plat,
    scriptOptions, // unfiltered options
    serverScriptOptions, // only scripts that can run on server
    filterByPlatformOptions, // use the returned plat to change options
    //methods
    getScriptOptions,
    reset, // resets dropdown selection state
  };
 }
 export const shellOptions = [
  { label: "Powershell", value: "powershell" },
  { label: "Batch", value: "cmd" },
  { label: "Python", value: "python" },
  { label: "Shell", value: "shell" },
  { label: "Nushell", value: "nushell" },
  { label: "Deno", value: "deno" },
 ];
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -1,15 +1,10 @@
-const GOARCH_AMD64 = "amd64";
+export const GOARCH_AMD64 = "amd64";
-const GOARCH_i386 = "386";
+export const GOARCH_i386 = "386";
-const GOARCH_ARM64 = "arm64";
+export const GOARCH_ARM64 = "arm64";
-const GOARCH_ARM32 = "arm";
+export const GOARCH_ARM32 = "arm";
-const runAsUserToolTip =
+export const runAsUserToolTip =
-  "Run in the context of the logged in user. If no user is logged in, the script will not run and an error will be returned. Not supported on Windows Server.";
+  "Run in the context of the logged in user. If no user is logged in, the script will run as SYSTEM";
-export {
+export const envVarsLabel =
-  GOARCH_AMD64,
+  "Environment vars (press Enter after typing each key=value pair)";
  GOARCH_i386,
  GOARCH_ARM64,
  GOARCH_ARM32,
  runAsUserToolTip,
 };
--- a/src/ee/LICENSE.md
+++ b/src/ee/LICENSE.md
@@ -0,0 +1,30 @@
 ## Tactical RMM Enterprise Edition (EE) License Agreement (the "Agreement")
 Copyright (c) 2023 Amidaware Inc. All rights reserved.
 This Agreement is entered into between the licensee ("You" or the "Licensee") and Amidaware Inc. ("Amidaware") and governs the use of the enterprise features of the Tactical RMM Software (hereinafter referred to as the "Software").
 The EE features of the Software, including but not limited to Reporting and White-labeling, are exclusively contained within directories named "ee," "enterprise," or "premium" in Amidaware's repositories, or in any files bearing the EE License header. The use of the Software is also governed by the terms and conditions set forth in the Tactical RMM License, available at https://license.tacticalrmm.com, which terms are incorporated herein by reference.
 ## License Grant
 Subject to the terms of this Agreement and upon the Licensee's possession of a valid and authorized sponsorship token issued by Amidaware, Amidaware hereby grants to the Licensee a limited, non-exclusive, non-transferable, and revocable right and license to use the Software.
 ## Restrictions
 The Licensee acknowledges and agrees that, notwithstanding any other provision of this Agreement:
 a) The Licensee shall not copy, merge, publish, distribute, sublicense, or sell the Software or any derivative thereof;
 b) The Licensee shall not, in any manner, circumvent, bypass, or tamper with the license key functionality embedded in the Software, nor shall the Licensee remove, alter, or obscure any features that are protected by such license keys. For the avoidance of doubt, the Software's code contains protective measures that enable specific EE features, and the Licensee is strictly prohibited from modifying or removing any licensing code with the intent to enable or unlock these EE features without proper authorization.
 ## Termination
 1. **Breach**: If the Licensee breaches any term of this Agreement, Amidaware reserves the right to terminate this Agreement and the Licensee's rights granted hereunder immediately, without prior notice.
 2. **Legal Action**: Any breach of this Agreement may result in Amidaware pursuing legal action against the Licensee. The Licensee acknowledges and agrees that, upon any breach, Amidaware may seek remedies, including injunctive relief, damages, and legal fees, and will be entitled to prosecute the Licensee to the full extent of the law.
 3. **Effects of Termination**: Upon termination, the Licensee shall immediately cease all use of the Software and delete all copies of the Software from its systems and confirm such deletion in writing to Amidaware.
 ## Updates & Amendments
 1. **Software Updates**: Amidaware may, from time to time, release updates or upgrades to the Software. These updates or upgrades might be subject to additional terms presented to you at the time of download or installation.
 2. **Amendments to this Agreement**: Amidaware reserves the right to modify the terms of this Agreement at any given time. Any such modifications will be effective immediately upon posting on Amidaware's official website or by direct communication to the Licensee. The continued use of the Software after such modifications will constitute the Licensee's acceptance of the revised terms.
--- a/src/ee/reporting/api/reporting.ts
+++ b/src/ee/reporting/api/reporting.ts
@@ -0,0 +1,629 @@
 /*
 Copyright (c) 2023-present Amidaware Inc.
 This file is subject to the EE License Agreement.
 For details, see: https://license.tacticalrmm.com/ee
 */
 import axios from "axios";
 import { ref, type Ref } from "vue";
 import { router } from "@/router";
 import type {
  ReportFormat,
  ReportDependencies,
  ReportTemplate,
  ReportHTMLTemplate,
  ReportDataQuery,
  UploadAssetsResponse,
  RunReportPreviewRequest,
  RunReportRequest,
  VariableAnalysis,
  SharedTemplate,
 } from "../types/reporting";
 import type { QTreeFileNode } from "@/types/filebrowser";
 import { notifySuccess } from "@/utils/notify";
 import { exportFile, Dialog } from "quasar";
 import { until } from "@vueuse/shared";
 import ReportDependencyPrompt from "../components/ReportDependencyPrompt.vue";
 const baseUrl = "/reporting";
 export interface useReportingTemplates {
  reportTemplates: Ref<ReportTemplate[]>;
  isLoading: Ref<boolean>;
  isError: Ref<boolean>;
  getReportTemplates: (dependsOn?: string[]) => void;
  addReportTemplate: (payload: ReportTemplate) => void;
  editReportTemplate: (
    id: number,
    payload: ReportTemplate,
    options?: { dontNotify?: boolean },
  ) => void;
  deleteReportTemplate: (id: number) => void;
  renderedPreview: Ref<string>;
  renderedVariables: Ref<string>;
  runReportPreview: (payload: RunReportPreviewRequest) => void;
  runReportPreviewDebug: (payload: RunReportPreviewRequest) => void;
  reportData: Ref<string>;
  runReport: (
    id: number,
    payload: RunReportRequest,
    forDownload?: boolean,
  ) => void;
  openReport: (
    id: number,
    format: ReportFormat,
    dependsOn: string[],
    dependencies?: ReportDependencies,
    newWindow?: boolean,
  ) => void;
  exportReport: (id: number) => void;
  importReport: (payload: { overwrite: boolean; template: string }) => void;
  downloadReport: (
    template: ReportTemplate,
    format: ReportFormat,
    dependencies?: ReportDependencies,
  ) => void;
  getSharedTemplates: () => void;
  sharedTemplates: Ref<SharedTemplate[]>;
  importSharedTemplates: (payload: {
    templates: SharedTemplate[];
    overwrite: boolean;
  }) => void;
  variableAnalysis: Ref<VariableAnalysis>;
  getAllowedValues: (payload: {
    variables: string;
    dependencies: ReportDependencies;
  }) => void;
 }
 // reporting endpoints
 export function useReportTemplates(): useReportingTemplates {
  const reportTemplates = ref<ReportTemplate[]>([]);
  const isLoading = ref(false);
  const isError = ref(false);
  const renderedPreview = ref("");
  const renderedVariables = ref("");
  const reportData = ref("");
  const variableAnalysis = ref<VariableAnalysis>({});
  const sharedTemplates = ref<SharedTemplate[]>([]);
  function getReportTemplates(dependsOn?: string[]) {
    isLoading.value = true;
    isError.value = false;
    const query = {} as { dependsOn?: string[] };
    if (dependsOn) {
      query.dependsOn = dependsOn;
    }
    axios
      .get(`${baseUrl}/templates/`, { params: query })
      .then(({ data }) => {
        reportTemplates.value = data;
      })
      .catch(() => (isError.value = true))
      .finally(() => (isLoading.value = false));
  }
  function deleteReportTemplate(id: number) {
    isLoading.value = true;
    isError.value = false;
    axios
      .delete(`${baseUrl}/templates/${id}/`)
      .then(() => {
        reportTemplates.value = reportTemplates.value.filter(
          (template) => template.id != id,
        );
        notifySuccess("The report template was successfully removed");
      })
      .catch(() => (isError.value = true))
      .finally(() => (isLoading.value = false));
  }
  function addReportTemplate(payload: ReportTemplate) {
    isLoading.value = true;
    isError.value = false;
    axios
      .post(`${baseUrl}/templates/`, payload)
      .then(({ data }: { data: ReportTemplate }) => {
        reportTemplates.value.push(data);
        notifySuccess("The report template was added successfully");
      })
      .catch(() => (isError.value = true))
      .finally(() => (isLoading.value = false));
  }
  function editReportTemplate(
    id: number,
    payload: ReportTemplate,
    options?: { dontNotify?: boolean },
  ) {
    isLoading.value = true;
    isError.value = false;
    axios
      .put(`${baseUrl}/templates/${id}/`, payload)
      .then(({ data }: { data: ReportTemplate }) => {
        const index = reportTemplates.value.findIndex(
          (template) => template.id === id,
        );
        reportTemplates.value[index] = data;
        options?.dontNotify ||
          notifySuccess("The report template was edited successfully");
      })
      .catch(() => (isError.value = true))
      .finally(() => (isLoading.value = false));
  }
  function runReportPreviewDebug(payload: RunReportPreviewRequest) {
    isLoading.value = true;
    isError.value = false;
    renderedPreview.value = "";
    renderedVariables.value = "";
    axios
      .post(`${baseUrl}/templates/preview/`, payload)
      .then(({ data }) => {
        if (payload.format === "html") renderedPreview.value = data.template;
        else renderedPreview.value = `<pre>${data.template}</pre>`;
        renderedVariables.value = JSON.stringify(data.variables, undefined, 4);
      })
      .catch(() => (isError.value = true))
      .finally(() => (isLoading.value = false));
  }
  function runReportPreview(payload: RunReportPreviewRequest) {
    isLoading.value = true;
    isError.value = false;
    renderedPreview.value = "";
    axios
      .post(`${baseUrl}/templates/preview/`, payload, {
        responseType: payload.format !== "pdf" ? "json" : "blob",
      })
      .then(({ data }) => {
        if (payload.format === "html") renderedPreview.value = data;
        else if (payload.format === "pdf")
          renderedPreview.value = URL.createObjectURL(data);
        else renderedPreview.value = `<pre>${data}</pre>`;
      })
      .catch(() => (isError.value = true))
      .finally(() => (isLoading.value = false));
  }
  function runReport(
    id: number,
    payload: RunReportRequest,
    forDownload?: boolean,
  ): void {
    isLoading.value = true;
    isError.value = false;
    axios
      .post(`${baseUrl}/templates/${id}/run/`, payload, {
        responseType: payload.format !== "pdf" ? "json" : "blob",
      })
      .then(({ data }) => {
        if (payload.format === "html" || forDownload) reportData.value = data;
        else if (payload.format === "pdf")
          reportData.value = URL.createObjectURL(data);
        else reportData.value = `<pre>${data}</pre>`;
      })
      .catch(() => (isError.value = true))
      .finally(() => (isLoading.value = false));
  }
  function downloadReport(
    template: ReportTemplate,
    format: ReportFormat,
    dependencies: ReportDependencies = {},
  ) {
    isLoading.value = true;
    isError.value = false;
    reportData.value = "";
    const needsPrompt =
      template.depends_on?.filter((dep) => !dependencies[dep]) || [];
    let extension;
    if (format === "plaintext") extension = "csv";
    else extension = format;
    // get filename
    Dialog.create({
      title: "Confirm File Name",
      prompt: {
        model: `${template.name}.${extension}`,
        isValid: (val) => !!val,
        type: "text",
      },
      cancel: true,
      persistent: true,
    }).onOk(async (name: string) => {
      // get dependencies
      if (needsPrompt.length > 0) {
        Dialog.create({
          component: ReportDependencyPrompt,
          componentProps: { dependsOn: needsPrompt },
        })
          .onOk((deps) => (dependencies = { ...dependencies, ...deps }))
          .onDismiss(() => {
            runReport(
              template.id,
              {
                format: format,
                dependencies: dependencies,
              },
              true,
            );
          });
      } else {
        // no dependencies run report
        runReport(
          template.id,
          {
            format: format,
            dependencies: dependencies,
          },
          true,
        );
      }
      await until(isLoading).not.toBeTruthy();
      if (isError.value) return;
      exportFile(name, reportData.value);
    });
  }
  function openReport(
    id: number,
    format: ReportFormat,
    dependsOn: string[],
    dependencies?: ReportDependencies,
    newWindow?: boolean,
  ) {
    const dependencyString = JSON.stringify(dependencies) || "{}";
    const dependsOnString =
      dependsOn.length > 0 ? JSON.stringify(dependsOn) : null;
    const params = dependsOnString
      ? `format=${format}&dependsOn=${dependsOnString}&dependencies=${dependencyString}`
      : `format=${format}`;
    const url = router.resolve(`/reports/${id}?${params}`).href;
    if (newWindow === undefined || newWindow) {
      window.open(url, "_blank");
    } else {
      router.push(url);
    }
  }
  function exportReport(id: number) {
    isLoading.value = true;
    isError.value = false;
    axios
      .post(`${baseUrl}/templates/${id}/export/`)
      .then(({ data }) => {
        exportFile(
          `${data.template.name}-export.json`,
          JSON.stringify(data, null, 2),
        );
      })
      .catch(() => (isError.value = true))
      .finally(() => (isLoading.value = false));
  }
  function importReport(payload: { overwrite: boolean; template: string }) {
    isLoading.value = true;
    isError.value = false;
    axios
      .post(`${baseUrl}/templates/import/`, payload)
      .then(({ data }: { data: ReportTemplate }) => {
        const index = reportTemplates.value.findIndex(
          (report) => report.id === data.id,
        );
        if (index !== -1) reportTemplates.value[index] = data;
        else reportTemplates.value.push(data);
        notifySuccess("Report Template was successfully imported.");
      })
      .catch(() => (isError.value = true))
      .finally(() => (isLoading.value = false));
  }
  function getSharedTemplates() {
    isLoading.value = true;
    isError.value = false;
    axios
      .get(`${baseUrl}/templates/shared/`)
      .then(({ data }: { data: SharedTemplate[] }) => {
        sharedTemplates.value = data;
      })
      .catch(() => (isError.value = true))
      .finally(() => (isLoading.value = false));
  }
  function importSharedTemplates(payload: {
    templates: SharedTemplate[];
    overwrite: boolean;
  }) {
    isLoading.value = true;
    isError.value = false;
    axios
      .post(`${baseUrl}/templates/shared/`, payload)
      .then(() => {
        notifySuccess("Shared templates imported successfully");
      })
      .catch(() => (isError.value = true))
      .finally(() => (isLoading.value = false));
  }
  function getAllowedValues(payload: {
    variables: string;
    dependencies: ReportDependencies;
  }) {
    isLoading.value = true;
    isError.value = false;
    axios
      .post(`${baseUrl}/templates/preview/analysis/`, payload)
      .then(({ data }: { data: VariableAnalysis }) => {
        variableAnalysis.value = data;
      })
      .catch(() => (isError.value = true))
      .finally(() => (isLoading.value = false));
  }
  return {
    reportTemplates,
    isLoading,
    isError,
    getReportTemplates,
    addReportTemplate,
    editReportTemplate,
    deleteReportTemplate,
    renderedPreview,
    renderedVariables,
    runReportPreview,
    runReportPreviewDebug,
    reportData,
    runReport,
    openReport,
    exportReport,
    importReport,
    downloadReport,
    getSharedTemplates,
    sharedTemplates,
    importSharedTemplates,
    variableAnalysis,
    getAllowedValues,
  };
 }
 export const useSharedReportTemplates = useReportTemplates();
 // reporting asset endpoints
 export async function fetchReportAssets(
  path?: string,
  folderOnly?: boolean,
 ): Promise<QTreeFileNode[]> {
  const params = {} as { path?: string; folders?: boolean };
  if (path) params.path = path;
  if (folderOnly) params.folders = true;
  const { data } = await axios.get(`${baseUrl}/assets/`, { params: params });
  return data;
 }
 export async function fetchAllReportAssets(
  foldersOnly?: boolean,
 ): Promise<QTreeFileNode[]> {
  const params = {} as { onlyFolders?: boolean };
  if (foldersOnly) params.onlyFolders = true;
  const { data } = await axios.get(`${baseUrl}/assets/all/`, {
    params: params,
  });
  return data;
 }
 export async function renameReportAsset(
  path: string,
  newName: string,
 ): Promise<string> {
  const payload = { path, newName };
  const { data } = await axios.put(`${baseUrl}/assets/rename/`, payload);
  return data;
 }
 export async function createAssetFolder(path: string): Promise<string> {
  const payload = { path };
  const { data } = await axios.post(`${baseUrl}/assets/newfolder/`, payload);
  return data;
 }
 export async function deleteAssets(paths: string[]): Promise<undefined> {
  const payload = { paths };
  const { data } = await axios.post(`${baseUrl}/assets/delete/`, payload);
  return data;
 }
 export async function downloadAsset(path: string): Promise<Blob> {
  const params = path ? { path } : {};
  const { data } = await axios.get(`${baseUrl}/assets/download/`, {
    responseType: "blob",
    params: params,
  });
  return data;
 }
 export async function uploadAssets(
  form: FormData,
  path = "",
 ): Promise<UploadAssetsResponse> {
  form.append("parentPath", path);
  const { data } = await axios.post(`${baseUrl}/assets/upload/`, form);
  return data;
 }
 // reporting html templates endpoints
 export interface useReportingHTMLTemplates {
  reportHTMLTemplates: Ref<ReportHTMLTemplate[]>;
  isLoading: Ref<boolean>;
  isError: Ref<boolean>;
  getReportHTMLTemplates: () => void;
  addReportHTMLTemplate: (payload: ReportHTMLTemplate) => void;
  editReportHTMLTemplate: (id: number, payload: ReportHTMLTemplate) => void;
  deleteReportHTMLTemplate: (id: number) => void;
 }
 export function useReportingHTMLTemplates(): useReportingHTMLTemplates {
  const reportHTMLTemplates = ref<ReportHTMLTemplate[]>([]);
  const isLoading = ref(false);
  const isError = ref(false);
  function getReportHTMLTemplates() {
    axios
      .get(`${baseUrl}/htmltemplates/`)
      .then(({ data }) => {
        reportHTMLTemplates.value = data;
      })
      .catch(() => (isError.value = true))
      .finally(() => (isLoading.value = false));
  }
  function addReportHTMLTemplate(payload: ReportHTMLTemplate) {
    isLoading.value = true;
    axios
      .post(`${baseUrl}/htmltemplates/`, payload)
      .then(({ data }: { data: ReportHTMLTemplate }) => {
        reportHTMLTemplates.value.push(data);
        notifySuccess("HTML Template was added successfully");
      })
      .catch(() => (isError.value = true))
      .finally(() => (isLoading.value = false));
  }
  function editReportHTMLTemplate(id: number, payload: ReportHTMLTemplate) {
    isLoading.value = true;
    axios
      .put(`${baseUrl}/htmltemplates/${id}/`, payload)
      .then(({ data }: { data: ReportHTMLTemplate }) => {
        const index = reportHTMLTemplates.value.findIndex(
          (template) => template.id === id,
        );
        reportHTMLTemplates.value[index] = data;
        notifySuccess("HTML Template was edited successfully");
      })
      .catch(() => (isError.value = true))
      .finally(() => (isLoading.value = false));
  }
  function deleteReportHTMLTemplate(id: number) {
    isLoading.value = true;
    axios
      .delete(`${baseUrl}/htmltemplates/${id}/`)
      .then(() => {
        reportHTMLTemplates.value = reportHTMLTemplates.value.filter(
          (template) => template.id != id,
        );
        notifySuccess("The HTML template was successfully removed");
      })
      .catch(() => (isError.value = true))
      .finally(() => (isLoading.value = false));
  }
  return {
    reportHTMLTemplates,
    isLoading,
    isError,
    getReportHTMLTemplates,
    addReportHTMLTemplate,
    editReportHTMLTemplate,
    deleteReportHTMLTemplate,
  };
 }
 // Use if you want the state to be consistent across components
 export const useSharedReportHTMLTemplates = useReportingHTMLTemplates();
 // reporting data query endpoints
 export interface useReportingDataQueries {
  reportDataQueries: Ref<ReportDataQuery[]>;
  isLoading: Ref<boolean>;
  isError: Ref<boolean>;
  getReportDataQueries: () => void;
  addReportDataQuery: (payload: ReportDataQuery) => void;
  editReportDataQuery: (id: number, payload: ReportDataQuery) => void;
  deleteReportDataQuery: (id: number) => void;
 }
 export function useReportingDataQueries(): useReportingDataQueries {
  const reportDataQueries = ref<ReportDataQuery[]>([]);
  const isLoading = ref(false);
  const isError = ref(false);
  function getReportDataQueries() {
    axios
      .get(`${baseUrl}/dataqueries/`)
      .then(({ data }) => {
        isLoading.value = true;
        reportDataQueries.value = data;
      })
      .catch(() => (isError.value = true))
      .finally(() => (isLoading.value = false));
  }
  function addReportDataQuery(payload: ReportDataQuery) {
    axios
      .post(`${baseUrl}/dataqueries/`, payload)
      .then(({ data }: { data: ReportDataQuery }) => {
        isLoading.value = true;
        reportDataQueries.value.push(data);
        notifySuccess("Data Query was added successfully");
      })
      .catch(() => (isError.value = true))
      .finally(() => (isLoading.value = false));
  }
  function editReportDataQuery(id: number, payload: ReportDataQuery) {
    axios
      .put(`${baseUrl}/dataqueries/${id}/`, payload)
      .then(({ data }: { data: ReportDataQuery }) => {
        isLoading.value = true;
        const index = reportDataQueries.value.findIndex(
          (template) => template.id === id,
        );
        reportDataQueries.value[index] = data;
        notifySuccess("Data Query was edited successfully");
      })
      .catch(() => (isError.value = true))
      .finally(() => (isLoading.value = false));
  }
  function deleteReportDataQuery(id: number) {
    axios
      .delete(`${baseUrl}/dataqueries/${id}/`)
      .then(() => {
        reportDataQueries.value = reportDataQueries.value.filter(
          (template) => template.id != id,
        );
        notifySuccess("The Data Query was successfully removed");
      })
      .catch(() => (isError.value = true))
      .finally(() => (isLoading.value = false));
  }
  return {
    reportDataQueries,
    isLoading,
    isError,
    getReportDataQueries,
    addReportDataQuery,
    editReportDataQuery,
    deleteReportDataQuery,
  };
 }
 // Use if you want the state to be consistent across components
 export const useSharedReportDataQueries = useReportingDataQueries();
--- a/src/ee/reporting/components/AssetFileUpload.vue
+++ b/src/ee/reporting/components/AssetFileUpload.vue
@@ -0,0 +1,93 @@
 <!--
 Copyright (c) 2023-present Amidaware Inc.
 This file is subject to the EE License Agreement.
 For details, see: https://license.tacticalrmm.com/ee
 -->
 <template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card>
      <q-bar>
        File Upload
        <q-space />
        <q-btn v-close-popup dense flat icon="close">
          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
        </q-btn>
      </q-bar>
      <div class="q-pa-md column items-start q-gutter-y-md">
        <q-file
          v-model="files"
          label="Select files"
          outlined
          multiple
          :clearable="!loading"
          style="width: 400px"
        >
          <template #file="{ file }">
            <q-chip class="full-width q-my-xs" square>
              <q-avatar>
                <q-icon name="insert_drive_file" />
              </q-avatar>
              <div class="ellipsis relative-position">
                {{ file.name }}
              </div>
              <q-tooltip>
                {{ file.name }}
              </q-tooltip>
            </q-chip>
          </template>
        </q-file>
      </div>
      <q-card-actions align="right">
        <q-btn v-close-popup dense flat label="Cancel" />
        <q-btn
          color="primary"
          label="Upload"
          dense
          flat
          :loading="loading"
          @click="upload"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
 </template>
 <script lang="ts" setup>
 // composition imports
 import { ref } from "vue";
 import { useDialogPluginComponent } from "quasar";
 import { uploadAssets } from "../api/reporting";
 import { notifySuccess } from "@/utils/notify";
 // emits
 defineEmits([...useDialogPluginComponent.emits]);
 // props
 const props = defineProps<{ parentPath: string }>();
 // setup quasar dialog
 const { dialogRef, onDialogOK, onDialogHide } = useDialogPluginComponent();
 const files = ref<File[]>([]);
 const loading = ref(false);
 async function upload() {
  loading.value = true;
  let formData = new FormData();
  files.value.forEach((file) => {
    formData.append(file.name, file);
  });
  try {
    const result = await uploadAssets(formData, props.parentPath);
    notifySuccess("Files uploaded successfully");
    onDialogOK({ files: files.value, response: result });
  } finally {
    loading.value = false;
  }
 }
 </script>
--- a/src/ee/reporting/components/DataQuerySelect.vue
+++ b/src/ee/reporting/components/DataQuerySelect.vue
@@ -0,0 +1,96 @@
 <!--
 Copyright (c) 2023-present Amidaware Inc.
 This file is subject to the EE License Agreement.
 For details, see: https://license.tacticalrmm.com/ee
 -->
 <template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card style="width: 400px">
      <q-bar>
        Data Query Select
        <q-space />
        <q-btn v-close-popup dense flat icon="close">
          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
        </q-btn>
      </q-bar>
      <q-card-section>
        <tactical-dropdown
          v-model="selectedQuery"
          :options="queryOptions"
          label="Data Queries"
          outlined
        />
      </q-card-section>
      <q-card-actions>
        <q-space />
        <q-btn dense flat label="Cancel" v-close-popup />
        <q-btn
          :loading="loading"
          @click="submit"
          dense
          flat
          label="Select"
          color="primary"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
 </template>
 <script setup lang="ts">
 // composition imports
 import { ref, computed, onMounted } from "vue";
 import { useDialogPluginComponent } from "quasar";
 import { useSharedReportDataQueries } from "../api/reporting";
 import { notifyError } from "@/utils/notify";
 // ui imports
 import TacticalDropdown from "@/components/ui/TacticalDropdown.vue";
 // emits
 defineEmits([...useDialogPluginComponent.emits]);
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const props = defineProps<{ dataSources?: any }>();
 // quasar dialog setup
 const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
 const { reportDataQueries, getReportDataQueries } = useSharedReportDataQueries;
 const selectedQuery = ref<string | null>(null);
 const loading = ref(false);
 const queryOptions = computed(() => {
  if (props.dataSources === undefined)
    return reportDataQueries.value.map((query) => query.name);
  else return Object.keys(props.dataSources);
 });
 function submit() {
  if (selectedQuery.value === null)
    notifyError("Select a query from the dropdown");
  else {
    let dataQuery;
    if (props.dataSources === undefined) {
      dataQuery = reportDataQueries.value.find(
        (query) => query.name === selectedQuery.value,
      );
    } else {
      dataQuery = {
        id: 0,
        name: selectedQuery.value,
        json_query: props.dataSources[selectedQuery.value],
      };
    }
    onDialogOK(dataQuery);
  }
 }
 onMounted(() => {
  if (props.dataSources === undefined) {
    getReportDataQueries();
  }
 });
 </script>
--- a/src/ee/reporting/components/EditorToolbar.vue
+++ b/src/ee/reporting/components/EditorToolbar.vue
@@ -0,0 +1,670 @@
 <!--
 Copyright (c) 2023-present Amidaware Inc.
 This file is subject to the EE License Agreement.
 For details, see: https://license.tacticalrmm.com/ee
 -->
 <template>
  <q-bar>
    <q-btn-dropdown
      label="Formatting"
      flat
      dense
      auto-close
      :ripple="false"
      @hide="_editor.focus()"
    >
      <q-list dense>
        <q-item clickable @click="insertHeader('#')">
          <q-item-section>
            <q-item-label>Heading 1</q-item-label>
          </q-item-section>
        </q-item>
        <q-item clickable @click="insertHeader('##')">
          <q-item-section>
            <q-item-label>Heading 2</q-item-label>
          </q-item-section>
        </q-item>
        <q-item clickable @click="insertHeader('###')">
          <q-item-section>
            <q-item-label>Heading 3</q-item-label>
          </q-item-section>
        </q-item>
        <q-item clickable @click="insertHeader('####')">
          <q-item-section>
            <q-item-label>Heading 4</q-item-label>
          </q-item-section>
        </q-item>
        <q-item clickable @click="insertHeader('#####')">
          <q-item-section>
            <q-item-label>Heading 5</q-item-label>
          </q-item-section>
        </q-item>
        <q-item clickable @click="insertHeader('######')">
          <q-item-section>
            <q-item-label>Heading 6</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>
    <q-btn-dropdown
      label="Section"
      flat
      dense
      auto-close
      :ripple="false"
      @hide="_editor.focus()"
    >
      <q-list dense>
        <q-item clickable @click="insertSection('section')">
          <q-item-section>
            <q-item-label>Section</q-item-label>
          </q-item-section>
        </q-item>
        <q-item clickable @click="insertSection('chapter')">
          <q-item-section>
            <q-item-label>Chapter</q-item-label>
          </q-item-section>
        </q-item>
        <q-item clickable @click="insertSection('header')">
          <q-item-section>
            <q-item-label>Header</q-item-label>
          </q-item-section>
        </q-item>
        <q-item clickable @click="insertSection('footer')">
          <q-item-section>
            <q-item-label>Footer</q-item-label>
          </q-item-section>
        </q-item>
        <q-item clickable @click="insertSection('nav')">
          <q-item-section>
            <q-item-label>Nav</q-item-label>
          </q-item-section>
        </q-item>
        <q-item clickable @click="insertSection('div')">
          <q-item-section>
            <q-item-label>Div</q-item-label>
          </q-item-section>
        </q-item>
        <q-item clickable @click="insertSection('article')">
          <q-item-section>
            <q-item-label>Article</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>
    <q-btn flat dense :ripple="false" icon="format_bold" @click="insertBold">
      <q-tooltip :delay="500">Bold</q-tooltip>
    </q-btn>
    <q-btn
      flat
      dense
      :ripple="false"
      icon="format_italic"
      @click="insertItalic"
    >
      <q-tooltip :delay="500">Italic</q-tooltip>
    </q-btn>
    <q-separator vertical inset />
    <q-btn
      flat
      dense
      :ripple="false"
      icon="format_list_numbered"
      @click="insertNumberedList"
    >
      <q-tooltip :delay="500">Numbered List</q-tooltip>
    </q-btn>
    <q-btn
      flat
      dense
      :ripple="false"
      icon="format_list_bulleted"
      @click="insertBulletList"
    >
      <q-tooltip :delay="500">Bullet List</q-tooltip>
    </q-btn>
    <q-separator vertical inset />
    <q-btn
      flat
      dense
      :ripple="false"
      icon="format_quote"
      @click="insertBlockQuote"
    >
      <q-tooltip :delay="500">Block Quote</q-tooltip>
    </q-btn>
    <q-separator vertical inset />
    <q-btn flat dense :ripple="false" icon="undo" @click="undo">
      <q-tooltip :delay="500">Undo</q-tooltip>
    </q-btn>
    <q-btn flat dense :ripple="false" icon="redo" @click="redo">
      <q-tooltip :delay="500">Redo</q-tooltip>
    </q-btn>
    <q-separator vertical inset />
    <q-btn flat dense :ripple="false" icon="code" @click="insertCodeBlock">
      <q-tooltip :delay="500">Code Block</q-tooltip>
    </q-btn>
    <q-btn flat dense :ripple="false" icon="link">
      <q-tooltip :delay="500">Link</q-tooltip>
      <q-menu>
        <div class="no-wrap q-pa-md">
          <div class="text-subtitle1">Create Link</div>
          <q-input v-model="linkText" label="Text" type="text" />
          <q-input v-model="linkUrl" label="Url" type="text" />
          <q-btn
            v-close-popup
            color="primary"
            label="Insert Link"
            class="full-width q-mt-sm"
            flat
            dense
            @click="insertLink"
          />
        </div>
      </q-menu>
    </q-btn>
    <q-btn flat dense :ripple="false" icon="image" @click="insertImage">
      <q-tooltip :delay="500">Image</q-tooltip>
    </q-btn>
    <q-btn flat dense :ripple="false" icon="horizontal_rule" @click="insertHr">
      <q-tooltip :delay="500">Horizontal Rule</q-tooltip>
    </q-btn>
    <q-separator vertical inset />
    <!-- Jinja Block -->
    <q-btn
      flat
      dense
      :ripple="false"
      label="{% %}"
      no-caps
      @click="insertJinjaBlock('block [name]', 'endblock')"
    >
      <q-tooltip :delay="500">Jinja {% %} block</q-tooltip>
    </q-btn>
    <q-btn
      no-caps
      flat
      dense
      :ripple="false"
      label="{{ }}"
      @click="insertJinjaData()"
    >
      <q-tooltip :delay="500">Jinja template data</q-tooltip>
    </q-btn>
    <q-btn
      flat
      dense
      :ripple="false"
      label="{% for "
      no-caps
      @click="insertJinjaBlock('for item in items', 'endfor')"
    >
      <q-tooltip :delay="500">Jinja for loop</q-tooltip>
    </q-btn>
    <q-btn
      flat
      dense
      :ripple="false"
      label="{% if"
      no-caps
      @click="insertJinjaBlock('if [condition]', 'endif')"
    >
      <q-tooltip :delay="500">Jinja if condition</q-tooltip>
    </q-btn>
    <q-separator vertical inset />
    <q-btn
      flat
      dense
      :ripple="false"
      icon="mdi-database-plus-outline"
      @click="openQueryAddDialog"
    >
      <q-tooltip :delay="500">Add Data Query</q-tooltip>
    </q-btn>
    <q-btn
      flat
      dense
      :ripple="false"
      icon="mdi-database-arrow-down"
      @click="insertDataQuery"
    >
      <q-tooltip :delay="500">Insert Saved Data Query</q-tooltip>
    </q-btn>
    <q-btn
      flat
      dense
      :ripple="false"
      icon="mdi-database-edit"
      @click="editDataQuery"
    >
      <q-tooltip :delay="500">Edit Data Query</q-tooltip>
    </q-btn>
    <q-btn
      flat
      dense
      :ripple="false"
      icon="mdi-table-large-plus"
      @click="openTableMaker"
    >
      <q-tooltip :delay="500">Table</q-tooltip>
    </q-btn>
    <!-- <q-btn flat dense :ripple="false" icon="add_chart" @click="openChartDialog">
      <q-tooltip :delay="500">Add chart</q-tooltip>
    </q-btn> -->
    <slot name="buttons"></slot>
  </q-bar>
 </template>
 <script setup lang="ts">
 // composition imports
 import { ref, toRaw, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import * as monaco from "monaco-editor";
 import { parse, stringify } from "yaml";
 // ui import
 import ReportDataQueryForm from "./ReportDataQueryForm.vue";
 import DataQuerySelect from "./DataQuerySelect.vue";
 import ReportAssetSelect from "./ReportAssetSelect.vue";
 // import ReportChartSelect from "./ReportChartSelect.vue";
 import ReportTableMaker from "./ReportTableMaker.vue";
 // utils
 import { convertCamelCase } from "@/utils/format";
 // types
 import { ReportDataQuery, ReportTemplateType } from "../types/reporting";
 import { notifyWarning, notifySuccess } from "@/utils/notify";
 // props
 const props = defineProps<{
  editor: monaco.editor.IStandaloneCodeEditor;
  variablesEditor: monaco.editor.IStandaloneCodeEditor;
  templateType: ReportTemplateType;
 }>();
 const $q = useQuasar();
 const _editor = toRaw(props.editor);
 const isMultiLineSelection = ref(false);
 // link insert refs
 const linkUrl = ref("");
 const linkText = ref("");
 onMounted(() => {
  // disable certain toolbar options if a multiline text selection is made
  _editor.onDidChangeCursorSelection((evt) => {
    isMultiLineSelection.value = monaco.Selection.spansMultipleLines(
      evt.selection,
    );
  });
 });
 // toolbar actions
 function insertHeader(header: string) {
  if (props.templateType === "markdown") insertPrefix("#", header.length);
  else insertWrap(`<h${header.length}>`, `</h${header.length}>`);
  _editor.focus();
 }
 function insertBold() {
  if (props.templateType === "markdown") insertWrap("**", "**");
  else insertWrap("<b>", "</b>");
  _editor.focus();
 }
 function insertItalic() {
  if (props.templateType === "markdown") insertWrap("*", "*");
  else insertWrap("<i>", "</i>");
  _editor.focus();
 }
 function insertNumberedList() {
  if (props.templateType === "markdown") insertPrefix("1.");
  else insert("<ol>\n\t<li></li>\n\t<li></li>\n</ol>", true);
  _editor.focus();
 }
 function insertBulletList() {
  if (props.templateType === "markdown") insertPrefix("*");
  else insert("<ul>\n\t<li></li>\n\t<li></li>\n</ul>", true);
  _editor.focus();
 }
 function insertBlockQuote() {
  if (props.templateType === "markdown") insertPrefix(">");
  else insertWrap("<blockquote>", "</blockquote>", true);
  _editor.focus();
 }
 function insertCodeBlock() {
  if (props.templateType === "markdown") {
    if (isMultiLineSelection.value) {
      insertWrap("```\n", "\n```", true);
    } else {
      insertWrap("`", "`");
    }
  } else {
    insertWrap("<code>", "</code>");
  }
  _editor.focus();
 }
 function _getDataSourcesInTemplate() {
  let variablesJson = parse(props.variablesEditor.getValue()) || {};
  if (!("data_sources" in variablesJson) || !variablesJson.data_sources)
    return null;
  else return variablesJson["data_sources"];
 }
 function _saveDataSourcesInTemplate(
  dataQuery: ReportDataQuery,
  convertNameToCamelCase = true,
 ) {
  let variablesJson = parse(props.variablesEditor.getValue()) || {};
  if (!("data_sources" in variablesJson) || !variablesJson.data_sources) {
    variablesJson["data_sources"] = {};
  }
  const dataQueryName = convertNameToCamelCase
    ? convertCamelCase(dataQuery.name)
    : dataQuery.name;
  variablesJson["data_sources"][dataQueryName] = dataQuery.json_query;
  props.variablesEditor?.setValue(stringify(variablesJson));
 }
 function openQueryAddDialog() {
  $q.dialog({
    component: ReportDataQueryForm,
  }).onOk((dataQuery: ReportDataQuery) => {
    _saveDataSourcesInTemplate(dataQuery);
  });
 }
 function insertDataQuery() {
  $q.dialog({
    component: DataQuerySelect,
  }).onOk((dataQuery: ReportDataQuery) => {
    _saveDataSourcesInTemplate(dataQuery);
    notifySuccess(`${dataQuery.name} was saved successfully in template`);
  });
 }
 function editDataQuery() {
  const dataSources = _getDataSourcesInTemplate();
  if (!dataSources) {
    notifyWarning("No data sources exist in template variables");
    return;
  }
  $q.dialog({
    component: DataQuerySelect,
    componentProps: {
      dataSources,
    },
  }).onOk((dataQuery) => {
    $q.dialog({
      component: ReportDataQueryForm,
      componentProps: {
        dataQuery: dataQuery,
        editInTemplate: true,
      },
    }).onOk((dataQuery: ReportDataQuery) => {
      _saveDataSourcesInTemplate(dataQuery, false);
      notifySuccess(`${dataQuery.name} was saved successfully in template`);
    });
  });
 }
 // function openChartDialog() {
 //   $q.dialog({
 //     component: ReportChartSelect,
 //   }).onOk((data) => {
 //     let variablesJson = parse(props.variablesEditor.getValue()) || {};
 //     const optionsJson = parse(data.options);
 //     if (!("charts" in variablesJson) || !variablesJson.charts) {
 //       variablesJson["charts"] = {};
 //     }
 //     variablesJson["charts"][convertCamelCase(data.name)] = {
 //       chartType: data.chartType,
 //       outputType: data.outputType,
 //       options: optionsJson,
 //     };
 //     props.variablesEditor?.setValue(stringify(variablesJson));
 //   });
 // }
 function insertLink() {
  if (props.templateType === "markdown")
    insert(`[${linkText.value}](${linkUrl.value})`);
  else insert(`<a href="${linkUrl.value}">${linkText.value}</a>`);
  _editor.focus();
 }
 function insertImage() {
  $q.dialog({
    component: ReportAssetSelect,
    componentProps: {
      templateType: props.templateType,
    },
  })
    .onOk((text) => {
      insert(text);
    })
    .onDismiss(() => _editor.focus());
 }
 function redo() {
  _editor.trigger("toolbar", "redo", null);
  _editor.focus();
 }
 function undo() {
  _editor.trigger("toolbar", "undo", null);
  _editor.focus();
 }
 function insertHr() {
  if (props.templateType === "markdown") insert("---", true);
  else insert("<hr />", true);
  _editor.focus();
 }
 function openTableMaker() {
  $q.dialog({
    component: ReportTableMaker,
  }).onOk((table) => {
    insert(table, true);
    _editor.focus();
  });
  _editor.focus();
 }
 type Section =
  | "article"
  | "div"
  | "section"
  | "header"
  | "footer"
  | "nav"
  | "chapter";
 function insertSection(section: Section) {
  if (props.templateType === "markdown") {
    const tag = section.slice(0, 1).toUpperCase();
    insertWrap(`~~${tag}~~\n`, `\n~~/${tag}~~`, true);
  } else {
    insertWrap(`<${section}>`, `</${section}>`, true);
  }
  _editor.focus();
 }
 function insertJinjaBlock(open: string, end: string) {
  insertWrap(`{% ${open} %}`, `{% ${end} %}`, true);
  _editor.focus();
 }
 function insertJinjaData() {
  insertWrap("{{", "}}");
  _editor.focus();
 }
 // inserts text on a new line below the cursor position
 function insert(text: string, moveToNewLine = false) {
  const model = _editor.getModel();
  const selections = _editor.getSelections();
  if (!model || !selections) return;
  let operations = [] as monaco.editor.IIdentifiedSingleEditOperation[];
  for (let selection of selections) {
    const end = selection.getEndPosition();
    let editSelection = moveToNewLine
      ? monaco.Selection.fromPositions({
          lineNumber: end.lineNumber,
          column: model.getLineMaxColumn(end.lineNumber),
        })
      : selection;
    const editText = moveToNewLine ? `\n${text}\n` : text;
    operations.push({
      text: editText,
      range: editSelection,
      forceMoveMarkers: true,
    });
  }
  model.pushEditOperations(selections, operations, (/*operations*/) => {
    return selections;
  });
 }
 // inserts a prefix before selected text
 function insertPrefix(prefix: string, prefixCount = 1) {
  const model = _editor.getModel();
  const selections = _editor.getSelections();
  if (!model || !selections) return;
  let operations = [] as monaco.editor.IIdentifiedSingleEditOperation[];
  let newSelections = [] as monaco.Selection[];
  for (let selection of selections) {
    const start = selection.getStartPosition();
    const end = selection.getEndPosition();
    let editSelection = monaco.Selection.fromPositions(
      { lineNumber: start.lineNumber, column: 0 },
      {
        lineNumber: end.lineNumber,
        column: model.getLineMaxColumn(end.lineNumber),
      },
    );
    let replacementText = [] as string[];
    newSelections.push(editSelection);
    // loop over line numbers
    for (let i = start.lineNumber; i <= end.lineNumber; i++) {
      let text = model?.getLineContent(i).trimStart();
      // prefix and prefix character amount match so should toggle off prefix in editor
      const re_toggle = new RegExp(`^\\${prefix}{${prefixCount}}\\s`);
      const re_replace = new RegExp(`^\\${prefix}+\\s`);
      if (text.match(re_toggle)) {
        // remove prefix since it is present already (toggled off)
        text = text.replace(prefix.repeat(prefixCount), "").trimStart();
      } else {
        // add prefix
        text = `${prefix.repeat(prefixCount)} ${text
          ?.replace(re_replace, "")
          .trimStart()}`;
      }
      replacementText.push(text);
    }
    operations.push({
      text: replacementText.join("\n"),
      range: editSelection,
      forceMoveMarkers: true,
    });
  }
  model.pushEditOperations(selections, operations, (/*operations*/) => {
    return newSelections;
  });
 }
 // wraps selected text beginning with a prefix and ending with a suffix
 function insertWrap(prefix: string, suffix: string, includeWholeLine = false) {
  const model = _editor.getModel();
  const selections = _editor.getSelections();
  if (!model || !selections) return;
  let operations = [] as monaco.editor.IIdentifiedSingleEditOperation[];
  for (let selection of selections) {
    const start = selection.getStartPosition();
    const end = selection.getEndPosition();
    let editSelection = includeWholeLine
      ? monaco.Selection.fromPositions(
          { lineNumber: start.lineNumber, column: 0 },
          {
            lineNumber: end.lineNumber,
            column: model.getLineMaxColumn(end.lineNumber),
          },
        )
      : selection;
    const text = `${prefix}${model.getValueInRange(editSelection)}${suffix}`;
    operations.push({
      text: text,
      range: editSelection,
      forceMoveMarkers: true,
    });
  }
  model.pushEditOperations(selections, operations, (operations) => {
    return operations.map((operation) =>
      monaco.Selection.fromRange(
        operation.range,
        monaco.SelectionDirection.LTR,
      ),
    );
  });
 }
 </script>
--- a/src/ee/reporting/components/ReportAssetSelect.vue
+++ b/src/ee/reporting/components/ReportAssetSelect.vue
@@ -0,0 +1,134 @@
 <!--
 Copyright (c) 2023-present Amidaware Inc.
 This file is subject to the EE License Agreement.
 For details, see: https://license.tacticalrmm.com/ee
 -->
 <template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card style="width: 400px">
      <q-bar>
        Report Asset Select
        <q-space />
        <q-btn v-close-popup dense flat icon="close">
          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
        </q-btn>
      </q-bar>
      <q-card-section class="q-gutter-sm">
        <q-radio dense v-model="imageType" val="link" label="Link" />
        <q-radio dense v-model="imageType" val="asset" label="Report Asset" />
      </q-card-section>
      <q-card-section v-if="imageType === 'link'">
        <q-input
          v-model="linkText"
          label="Text"
          dense
          outlined
          class="q-pb-sm"
        />
        <q-input v-model="linkUrl" label="Url" dense outlined class="q-pb-sm" />
        <q-input v-model="output" label="Output" readonly dense />
      </q-card-section>
      <q-card-section
        v-if="imageType === 'asset'"
        style="max-height: 50vh"
        class="scroll"
      >
        <div v-if="tree.length === 0">
          No Report Assets found. Go to Reporting Manager and use the Report
          Assets button to upload
        </div>
        <q-tree
          v-else
          ref="qtree"
          :nodes="tree"
          v-model:selected="selected"
          node-key="path"
          label-key="name"
          dense
          default-expand-all
        />
      </q-card-section>
      <q-card-section v-if="imageType === 'asset'">
        <q-input
          v-model="output"
          label="Selected"
          readonly
          dense
          class="q-pb-sm"
        />
      </q-card-section>
      <q-card-actions>
        <q-space />
        <q-btn dense flat label="Cancel" v-close-popup />
        <q-btn
          @click="onDialogOK(output)"
          dense
          flat
          label="Select"
          color="primary"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
 </template>
 <script setup lang="ts">
 import { ref, watch, onMounted } from "vue";
 import { type QTree, type QTreeNode, useDialogPluginComponent } from "quasar";
 import { fetchAllReportAssets } from "../api/reporting";
 import { ReportTemplateType } from "../types/reporting";
 // props
 const props = defineProps<{ templateType: ReportTemplateType }>();
 // emits
 defineEmits([...useDialogPluginComponent.emits]);
 // quasar dialog setup
 const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
 const tree = ref([] as QTreeNode<unknown>[]);
 const imageType = ref("link");
 const linkText = ref("");
 const linkUrl = ref("");
 const selected = ref("");
 const output = ref("");
 const qtree = ref<InstanceType<typeof QTree> | null>(null);
 function formatImageLink(url: string, text: string) {
  if (props.templateType === "markdown") {
    return `![${text}](${url})`;
  } else {
    return `<img src="${url}" alt="${text}">`;
  }
 }
 watch([linkText, linkUrl, selected], ([newText, newLink, newSelected]) => {
  if (imageType.value === "link")
    output.value = formatImageLink(newLink, newText);
  else if (imageType.value === "asset") {
    if (newSelected) {
      const asset: QTreeNode<unknown> = qtree.value?.getNodeByKey(newSelected);
      output.value = formatImageLink(`asset://${asset.id}`, asset.name);
    }
  }
 });
 watch(imageType, () => {
  output.value = "";
  linkText.value = "";
  linkUrl.value = "";
  selected.value = "";
 });
 async function getAssets() {
  tree.value = await fetchAllReportAssets();
 }
 onMounted(getAssets);
 </script>
--- a/src/ee/reporting/components/ReportAssets.vue
+++ b/src/ee/reporting/components/ReportAssets.vue
@@ -0,0 +1,340 @@
 <!--
 Copyright (c) 2023-present Amidaware Inc.
 This file is subject to the EE License Agreement.
 For details, see: https://license.tacticalrmm.com/ee
 -->
 <template>
  <q-dialog ref="dialogRef" maximized @hide="onDialogHide">
    <q-card>
      <q-bar>
        Report Assets
        <q-space />
        <q-btn v-close-popup dense flat icon="close">
          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
        </q-btn>
      </q-bar>
      <FileBrowser
        ref="fileBrowser"
        :nodes="nodes"
        :height="`${$q.screen.height - 32}px`"
        :loading="isLoading"
        @lazy-load="loadAssets"
      >
        <template #action-bar="{ selectedTreeNode, selectedTableNodes }">
          <q-btn
            class="q-ml-sm"
            icon="add"
            label="Upload"
            no-caps
            dense
            flat
            @click="uploadFiles(selectedTreeNode)"
          />
          <q-btn
            class="q-ml-sm"
            label="New Folder"
            no-caps
            dense
            flat
            @click="newFolder(selectedTreeNode)"
          />
          <q-btn-dropdown
            :disable="selectedTableNodes.length === 0"
            class="q-ml-sm"
            flat
            outline
            dense
            no-caps
            label="Bulk Actions"
          >
            <q-list>
              <q-item
                v-close-popup
                clickable
                dense
                @click="deleteFiles(selectedTableNodes, selectedTreeNode)"
              >
                <q-item-section side>
                  <q-icon name="delete" />
                </q-item-section>
                <q-item-section>
                  <q-item-label>Delete</q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </q-btn-dropdown>
        </template>
        <template #table-menu="{ item, selectedTreeNode }">
          <q-menu context-menu>
            <q-list dense style="min-width: 200px">
              <q-item v-close-popup clickable @click="sendRename(item)">
                <q-item-section side>
                  <q-icon name="edit" />
                </q-item-section>
                <q-item-section>Rename</q-item-section>
              </q-item>
              <q-item v-close-popup clickable @click="downloadFile(item)">
                <q-item-section side>
                  <q-icon name="cloud_download" />
                </q-item-section>
                <q-item-section>Download</q-item-section>
              </q-item>
              <q-item
                v-close-popup
                clickable
                @click="deleteFiles([item], selectedTreeNode)"
              >
                <q-item-section side>
                  <q-icon name="delete" />
                </q-item-section>
                <q-item-section>Delete</q-item-section>
              </q-item>
              <q-separator></q-separator>
              <q-item v-close-popup clickable>
                <q-item-section>Close</q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </template>
      </FileBrowser>
    </q-card>
  </q-dialog>
 </template>
 <script lang="ts" setup>
 // composition imports
 import { ref } from "vue";
 import { useFileBrowser } from "@/composables/filebrowser";
 import {
  fetchReportAssets,
  renameReportAsset,
  createAssetFolder,
  deleteAssets,
  downloadAsset,
 } from "../api/reporting";
 import { useQuasar, useDialogPluginComponent, exportFile } from "quasar";
 // ui imports
 import FileBrowser from "@/components/FileBrowser.vue";
 import AssetFileUpload from "./AssetFileUpload.vue";
 // type imports
 import type {
  LazyLoadCallbackParams,
  FileSystemNodeTable,
  QTreeFileNode,
 } from "@/types/filebrowser";
 import { UploadAssetsResponse } from "../types/reporting";
 // emits
 defineEmits([...useDialogPluginComponent.emits]);
 // setup quasar
 const $q = useQuasar();
 // quasar dialog setup
 const { dialogRef, onDialogHide /* onDialogOK */ } = useDialogPluginComponent();
 // setup filebrowser
 const { createFileNode, createFolderNode, getFile } = useFileBrowser();
 // data
 const nodes = ref([
  createFolderNode("Assets", "/", "storage", "primary"),
 ] as QTreeFileNode[]);
 const fileBrowser = ref<InstanceType<typeof FileBrowser> | null>(null);
 const isLoading = ref(false);
 async function loadAssets({ path, isDone, isFail }: LazyLoadCallbackParams) {
  try {
    const result = await fetchReportAssets(path);
    isDone(parseNode(result));
  } catch (e) {
    isFail();
  }
 }
 function uploadFiles(node: QTreeFileNode) {
  $q.dialog({
    component: AssetFileUpload,
    componentProps: {
      parentPath: node.path,
    },
  }).onOk(
    ({
      files,
      response,
    }: {
      files: File[];
      response: UploadAssetsResponse;
    }) => {
      // the upload view returns an object with the old filename as the key and the
      // new filename as the value in case there are name conflicts
      files.forEach((file) => {
        const path = response[file.name].filename;
        const asset_id = response[file.name].id;
        const name = getFile(path);
        const fileNode = createFileNode(
          name,
          path,
          file.size.toString(),
          asset_id
        );
        node.children?.push(fileNode);
      });
      fileBrowser.value?.reloadTable();
    }
  );
 }
 function newFolder(node: QTreeFileNode) {
  $q.dialog({
    title: "Enter a folder name",
    prompt: {
      model: "",
      isValid: (val) => val.length > 0,
      type: "text",
    },
    cancel: true,
    persistent: true,
  }).onOk(async (data: string) => {
    isLoading.value = true;
    const folderName = data;
    const folderPath = `${node.path}/${folderName}`;
    try {
      const newPath = await createAssetFolder(folderPath);
      const folderNode = createFolderNode(getFile(newPath), newPath);
      node.children?.push(folderNode);
      fileBrowser.value?.reloadTable();
      isLoading.value = false;
    } catch (e) {
      isLoading.value = false;
    }
  });
 }
 function sendRename(node: FileSystemNodeTable) {
  $q.dialog({
    title: `Enter a new ${node.type} name`,
    prompt: {
      model: node.name,
      isValid: (val) => val.length > 0,
      type: "text",
    },
    cancel: true,
    persistent: true,
  }).onOk(async (data: string) => {
    isLoading.value = true;
    const oldPath = node.path;
    const newName = data;
    try {
      const newPath = await renameReportAsset(oldPath, newName);
      const treeNode = fileBrowser.value?.getNodeByKey(node.id);
      if (treeNode === undefined) {
        console.error("Node key not found");
        return;
      }
      treeNode.label = getFile(newPath);
      treeNode.path = newPath;
      if (treeNode.type === "folder" && treeNode.children) {
        updatePathOnChildNodes(treeNode.children, oldPath, newPath);
      }
      fileBrowser.value?.reloadTable();
      isLoading.value = false;
    } catch (e) {
      isLoading.value = false;
    }
  });
 }
 async function downloadFile(node: FileSystemNodeTable) {
  isLoading.value = true;
  try {
    const result = await downloadAsset(node.path);
    if (result.type === "application/zip")
      exportFile(`${node.name}.zip`, result);
    else exportFile(node.name, result);
    isLoading.value = false;
  } catch (e) {
    isLoading.value = false;
  }
 }
 function deleteFiles(
  nodes: FileSystemNodeTable[],
  selectedTreeNode: QTreeFileNode
 ) {
  $q.dialog({
    title: "Are you sure?",
    message: `You are about to delete ${
      nodes.length > 1 ? nodes.length + " assets" : "an asset"
    }. This action isn't reversible`,
    cancel: true,
    persistent: true,
  }).onOk(async () => {
    try {
      const paths = nodes.map((node) => node.path);
      await deleteAssets(paths);
      selectedTreeNode.children = selectedTreeNode.children?.filter(
        (node) => !paths.includes(node.path)
      );
      fileBrowser.value?.reloadTable();
      isLoading.value = false;
    } catch (e) {
      isLoading.value = false;
    }
  });
 }
 // recursive function to update path on child nodes
 function updatePathOnChildNodes(
  nodes: QTreeFileNode[],
  oldPath: string,
  newPath: string
 ) {
  nodes.forEach((node) => {
    node.path = node.path.replace(oldPath, newPath);
    if (node.children) {
      updatePathOnChildNodes(node.children, oldPath, newPath);
    }
  });
 }
 // recursive function to parse file system output into Quasar tree nodes
 function parseNode(nodes: QTreeFileNode[]): QTreeFileNode[] {
  let parsedNodes: QTreeFileNode[] = [];
  nodes.forEach((node) => {
    let tempNode: QTreeFileNode =
      node.type === "folder"
        ? createFolderNode(node.name, node.path)
        : createFileNode(node.name, node.path, node.size, node.asset_id);
    if (node.children) {
      const parsedNode = parseNode(node.children);
      if (tempNode.children) tempNode.children = parsedNode;
    }
    parsedNodes.push(tempNode);
  });
  return parsedNodes;
 }
 </script>
--- a/src/ee/reporting/components/ReportChartSelect.vue
+++ b/src/ee/reporting/components/ReportChartSelect.vue
@@ -0,0 +1,121 @@
 <!--
 Copyright (c) 2023-present Amidaware Inc.
 This file is subject to the EE License Agreement.
 For details, see: https://license.tacticalrmm.com/ee
 -->
 <template>
  <q-dialog ref="dialogRef" @hide="unloadEditor" @show="loadEditor">
    <q-card style="width: 600px">
      <q-bar>
        Add Chart
        <q-space />
        <q-btn v-close-popup dense flat icon="close">
          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
        </q-btn>
      </q-bar>
      <q-card-section>
        <q-input v-model="chartName" outlined dense label="Chart Name" />
      </q-card-section>
      <q-card-section>
        <q-select
          v-model="chartType"
          :options="chartOptions"
          outlined
          dense
          label="Chart Type"
          map-options
          emit-value
        />
      </q-card-section>
      <q-card-section>
        <q-option-group
          v-model="outputType"
          :options="outputOptions"
          dense
          inline
        />
      </q-card-section>
      <q-card-section>
        <div
          ref="chartEditor"
          :style="{ height: `${$q.screen.height / 2}px` }"
        ></div>
      </q-card-section>
      <q-card-actions>
        <q-space />
        <q-btn dense flat label="Cancel" v-close-popup />
        <q-btn @click="submit" dense flat label="Select" color="primary" />
      </q-card-actions>
    </q-card>
  </q-dialog>
 </template>
 <script lang="ts" setup>
 import { ref, computed } from "vue";
 import { useDialogPluginComponent, useQuasar } from "quasar";
 import * as monaco from "monaco-editor";
 // setup quasar
 const $q = useQuasar();
 // emits
 defineEmits([...useDialogPluginComponent.emits]);
 // quasar dialog setup
 const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
 const chartOptions = [
  { value: "bar", label: "Bar" },
  { value: "pie", label: "Pie" },
  { value: "line", label: "Line" },
 ];
 const outputOptions = [
  { value: "image", label: "Image" },
  { value: "html", label: "Html" },
 ];
 const chartName = ref("");
 const chartType = ref("bar");
 const outputType = ref("image");
 const options = ref("");
 const output = computed(() => ({
  name: chartName.value,
  chartType: chartType.value,
  outputType: outputType.value,
  options: options.value,
 }));
 function submit() {
  onDialogOK(output.value);
 }
 const chartEditor = ref<HTMLElement | null>(null);
 let editor: monaco.editor.IStandaloneCodeEditor;
 function loadEditor() {
  var modelUri = monaco.Uri.parse("model://new"); // a made up unique URI for our model
  var model = monaco.editor.createModel(options.value, "yaml", modelUri);
  const theme = $q.dark.isActive ? "vs-dark" : "vs-light";
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  editor = monaco.editor.create(chartEditor.value!, {
    model: model,
    theme: theme,
    minimap: { enabled: false },
  });
  editor.onDidChangeModelContent(() => {
    options.value = editor.getValue();
  });
 }
 function unloadEditor() {
  editor.getModel()?.dispose();
  editor.dispose();
  onDialogHide();
 }
 </script>
--- a/src/ee/reporting/components/ReportDataQueryForm.vue
+++ b/src/ee/reporting/components/ReportDataQueryForm.vue
@@ -0,0 +1,151 @@
 <!--
 Copyright (c) 2023-present Amidaware Inc.
 This file is subject to the EE License Agreement.
 For details, see: https://license.tacticalrmm.com/ee
 -->
 <template>
  <q-dialog
    ref="dialogRef"
    maximized
    @hide="onDialogHide"
    @show="loadEditor"
    @before-hide="cleanupEditors"
  >
    <q-card>
      <q-bar>
        {{ props.dataQuery ? "Edit Data Query" : "New Data Query" }}
        <q-space />
        <q-btn v-close-popup dense flat icon="close">
          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
        </q-btn>
      </q-bar>
      <q-toolbar>
        <q-input
          v-model="state.name"
          label="Data Query Name"
          filled
          dense
          style="width: 400px"
        />
        <q-space />
      </q-toolbar>
      <div
        ref="queryEditor"
        :style="{ height: `${$q.screen.height - 126}px` }"
      ></div>
      <q-card-actions align="right">
        <q-btn v-close-popup dense flat label="Cancel" />
        <q-btn
          :loading="isLoading"
          dense
          flat
          label="Save"
          color="primary"
          @click="submit"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
 </template>
 <script setup lang="ts">
 // composition imports
 import { reactive, ref } from "vue";
 import { useDialogPluginComponent, extend, useQuasar } from "quasar";
 import { useSharedReportDataQueries } from "../api/reporting";
 import { until } from "@vueuse/shared";
 import * as monaco from "monaco-editor";
 import axios from "axios";
 const $q = useQuasar();
 // type imports
 import { type ReportDataQuery } from "../types/reporting";
 import { notifyError } from "@/utils/notify";
 // props
 const props = defineProps<{
  dataQuery?: ReportDataQuery;
  editInTemplate?: boolean;
 }>();
 // emits
 defineEmits([...useDialogPluginComponent.emits]);
 // quasar dialog setup
 const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
 // new data query logic
 const state: ReportDataQuery = props.dataQuery
  ? reactive(extend({}, props.dataQuery))
  : reactive({
      id: 0,
      name: "",
      json_query: {},
    });
 const json_string = ref(JSON.stringify(state.json_query, null, 4));
 const { isLoading, isError, addReportDataQuery, editReportDataQuery } =
  useSharedReportDataQueries;
 async function submit() {
  try {
    state.json_query = JSON.parse(json_string.value);
  } catch (e) {
    notifyError(`There was an error parsing the json: ${e}`);
    return;
  }
  if (!props.editInTemplate) {
    props.dataQuery
      ? editReportDataQuery(state.id, state)
      : addReportDataQuery(state);
    await until(isLoading).not.toBeTruthy();
    if (isError.value) return;
  }
  onDialogOK(state);
 }
 const queryEditor = ref<HTMLElement | null>(null);
 let editor: monaco.editor.IStandaloneCodeEditor;
 async function loadEditor() {
  const r = await axios.get("/reporting/queryschema/");
  var modelUri = monaco.Uri.parse("model://new"); // a made up unique URI for our model
  var model = monaco.editor.createModel(json_string.value, "json", modelUri);
  monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
    validate: true,
    schemas: [
      {
        uri: "schema://model-schema",
        fileMatch: [modelUri.toString()],
        schema: r.data,
      },
    ],
  });
  const theme = $q.dark.isActive ? "vs-dark" : "vs-light";
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  editor = monaco.editor.create(queryEditor.value!, {
    model: model,
    theme: theme,
  });
  editor.onDidChangeModelContent(() => {
    json_string.value = editor.getValue();
  });
 }
 function cleanupEditors() {
  editor.getModel()?.dispose();
  editor.dispose();
 }
 </script>
--- a/src/ee/reporting/components/ReportDataQueryTable.vue
+++ b/src/ee/reporting/components/ReportDataQueryTable.vue
@@ -0,0 +1,193 @@
 <!--
 Copyright (c) 2023-present Amidaware Inc.
 This file is subject to the EE License Agreement.
 For details, see: https://license.tacticalrmm.com/ee
 -->
 <template>
  <q-dialog ref="dialogRef" maximized @hide="onDialogHide">
    <q-card>
      <q-bar>
        <q-btn
          class="q-mr-sm"
          dense
          flat
          push
          icon="refresh"
          @click="getReportDataQueries"
        />Data Queries
        <q-space />
        <q-btn v-close-popup dense flat icon="close">
          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
        </q-btn>
      </q-bar>
      <q-table
        dense
        :table-class="{
          'table-bgcolor': !$q.dark.isActive,
          'table-bgcolor-dark': $q.dark.isActive,
        }"
        :style="{ 'max-height': `${$q.screen.height - 24}px` }"
        class="tbl-sticky"
        :rows="reportDataQueries"
        :columns="columns"
        :loading="isLoading"
        :pagination="{ rowsPerPage: 0, sortBy: 'favorite', descending: true }"
        :filter="search"
        row-key="id"
        binary-state-sort
        virtual-scroll
        :rows-per-page-options="[0]"
      >
        <template #top>
          <q-btn
            class="q-ml-sm"
            icon="add"
            label="New"
            no-caps
            dense
            flat
            @click="openNewDataQueryForm"
          />
          <q-space />
          <q-input
            v-model="search"
            style="width: 300px"
            label="Search"
            dense
            outlined
            clearable
            class="q-pr-md q-pb-xs"
          >
            <template #prepend>
              <q-icon name="search" color="primary" />
            </template>
          </q-input>
        </template>
        <template #body="props">
          <q-tr
            :props="props"
            class="cursor-pointer"
            @dblclick="openEditDataQuery(props.row)"
          >
            <!-- Context Menu -->
            <q-menu context-menu>
              <q-list dense style="min-width: 200px">
                <q-item v-close-popup clickable @click="cloneQuery(props.row)">
                  <q-item-section side>
                    <q-icon name="content_copy" />
                  </q-item-section>
                  <q-item-section>Clone</q-item-section>
                </q-item>
                <q-item
                  v-close-popup
                  clickable
                  @click="openEditDataQuery(props.row)"
                >
                  <q-item-section side>
                    <q-icon name="edit" />
                  </q-item-section>
                  <q-item-section>Edit</q-item-section>
                </q-item>
                <q-item
                  v-close-popup
                  clickable
                  @click="deleteDataQuery(props.row)"
                >
                  <q-item-section side>
                    <q-icon name="delete" />
                  </q-item-section>
                  <q-item-section>Delete</q-item-section>
                </q-item>
                <q-separator></q-separator>
                <q-item v-close-popup clickable>
                  <q-item-section>Close</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
            <!-- rows -->
            <td>{{ props.row.name }}</td>
          </q-tr>
        </template>
      </q-table>
    </q-card>
  </q-dialog>
 </template>
 <script setup lang="ts">
 // composition imports
 import { ref, onMounted } from "vue";
 import { useQuasar, useDialogPluginComponent, type QTableColumn } from "quasar";
 import { useSharedReportDataQueries } from "../api/reporting";
 // ui imports
 import ReportDataQueryForm from "./ReportDataQueryForm.vue";
 // type imports
 import type { ReportDataQuery } from "../types/reporting";
 const columns: QTableColumn[] = [
  {
    name: "name",
    label: "Name",
    field: "name",
    align: "left",
    sortable: true,
  },
 ];
 // emits
 defineEmits([...useDialogPluginComponent.emits]);
 const { dialogRef, onDialogHide } = useDialogPluginComponent();
 const $q = useQuasar();
 // reports manager logic
 const {
  reportDataQueries,
  isLoading,
  getReportDataQueries,
  deleteReportDataQuery,
 } = useSharedReportDataQueries;
 const search = ref("");
 function openNewDataQueryForm() {
  $q.dialog({
    component: ReportDataQueryForm,
  });
 }
 function openEditDataQuery(dataQuery: ReportDataQuery) {
  $q.dialog({
    component: ReportDataQueryForm,
    componentProps: {
      dataQuery,
    },
  });
 }
 function deleteDataQuery(dataQuery: ReportDataQuery) {
  $q.dialog({
    title: `Delete Data Query: ${dataQuery.name}?`,
    message:
      "If this query is in use you will need to change it in every report template",
    cancel: true,
    ok: { label: "Delete", color: "negative" },
  }).onOk(() => {
    deleteReportDataQuery(dataQuery.id);
  });
 }
 async function cloneQuery(dataQuery: ReportDataQuery) {
  // TODO: fill out function
  console.log(dataQuery);
 }
 onMounted(getReportDataQueries);
 </script>
--- a/src/ee/reporting/components/ReportDependencyPrompt.vue
+++ b/src/ee/reporting/components/ReportDependencyPrompt.vue
@@ -0,0 +1,133 @@
 <!--
 Copyright (c) 2023-present Amidaware Inc.
 This file is subject to the EE License Agreement.
 For details, see: https://license.tacticalrmm.com/ee
 -->
 <template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card style="width: 400px">
      <q-bar>
        Select Report Dependencies
        <q-space />
        <q-btn v-close-popup dense flat icon="close">
          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
        </q-btn>
      </q-bar>
      <q-card-section v-for="(_, label) in dependencies" :key="label">
        <tactical-dropdown
          v-if="label === 'client'"
          v-model="dependencies[label]"
          :label="`${capitalize(label)}`"
          :options="clientOptions"
          outlined
          mapOptions
          filterable
        />
        <tactical-dropdown
          v-else-if="label === 'site'"
          v-model="dependencies[label]"
          :label="`${capitalize(label)}`"
          :options="siteOptions"
          outlined
          mapOptions
          filterable
        />
        <tactical-dropdown
          v-else-if="label === 'agent'"
          v-model="dependencies[label]"
          :label="`${capitalize(label)}`"
          :options="agentOptions"
          outlined
          mapOptions
          filterable
        />
        <q-input
          v-else
          v-model="dependencies[label]"
          :label="`${capitalize(label)}`"
          outlined
          dense
        />
      </q-card-section>
      <q-card-actions align="right">
        <q-btn v-close-popup dense flat label="Cancel" />
        <q-btn
          :loading="loading"
          dense
          flat
          label="Submit"
          color="primary"
          @click="submit"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
 </template>
 <script setup lang="ts">
 import { ref, reactive, onBeforeMount } from "vue";
 import { useDialogPluginComponent } from "quasar";
 import { notifyError } from "@/utils/notify";
 import { capitalize } from "@/utils/format";
 import { useAgentDropdown } from "@/composables/agents";
 import { useClientDropdown, useSiteDropdown } from "@/composables/clients";
 // ui imports
 import TacticalDropdown from "@/components/ui/TacticalDropdown.vue";
 // emits
 defineEmits([...useDialogPluginComponent.emits]);
 // props
 const props = defineProps<{
  dependsOn: string[];
 }>();
 // quasar dialog setup
 const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
 // setup dropdown options
 const { agentOptions, getAgentOptions } = useAgentDropdown();
 const { clientOptions, getClientOptions } = useClientDropdown();
 const { siteOptions, getSiteOptions } = useSiteDropdown();
 // logic
 const dependencies = reactive<{ [x: string]: string | number | null }>({});
 props.dependsOn.forEach((dep) => (dependencies[dep] = null));
 const loading = ref(false);
 function validate() {
  let valid = true;
  props.dependsOn.forEach((dep) => {
    if (!dependencies[dep]) valid = false;
  });
  return valid;
 }
 function submit() {
  if (validate()) onDialogOK(dependencies);
  else notifyError("All fields must have a value");
 }
 onBeforeMount(() => {
  if (props.dependsOn.includes("client")) {
    getClientOptions();
  }
  if (props.dependsOn.includes("site")) {
    getSiteOptions();
  }
  if (props.dependsOn.includes("agent")) {
    getAgentOptions();
  }
 });
 </script>
--- a/src/ee/reporting/components/ReportHTMLTemplateForm.vue
+++ b/src/ee/reporting/components/ReportHTMLTemplateForm.vue
@@ -0,0 +1,136 @@
 <!--
 Copyright (c) 2023-present Amidaware Inc.
 This file is subject to the EE License Agreement.
 For details, see: https://license.tacticalrmm.com/ee
 -->
 <template>
  <q-dialog
    ref="dialogRef"
    maximized
    @hide="onDialogHide"
    @show="loadEditor"
    @before-hide="cleanupEditors"
  >
    <q-card>
      <q-bar>
        New Base Template
        <q-space />
        <q-btn v-close-popup dense flat icon="close">
          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
        </q-btn>
      </q-bar>
      <q-toolbar>
        <q-input
          v-model="state.name"
          label="HTML Template Name"
          filled
          dense
          style="width: 400px"
        />
        <q-space />
      </q-toolbar>
      <div
        ref="htmlEditor"
        :style="{ height: `${$q.screen.height - 126}px` }"
      ></div>
      <q-card-actions align="right">
        <q-btn v-close-popup dense flat label="Cancel" />
        <q-btn
          :loading="isLoading"
          dense
          flat
          label="Save"
          color="primary"
          @click="submit"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
 </template>
 <script setup lang="ts">
 // composition imports
 import { ref, reactive } from "vue";
 import { useDialogPluginComponent, extend, useQuasar } from "quasar";
 import { useSharedReportHTMLTemplates } from "../api/reporting";
 import { until } from "@vueuse/shared";
 import * as monaco from "monaco-editor";
 const $q = useQuasar();
 // type imports
 import { type ReportHTMLTemplate } from "../types/reporting";
 // props
 const props = defineProps<{
  template?: ReportHTMLTemplate;
  cloneTemplate?: ReportHTMLTemplate;
 }>();
 // emits
 defineEmits([...useDialogPluginComponent.emits]);
 const defaultTemplate = `<html>
    <head>
        <style>
            {{ css }}
        </style>
    </head>
    <body>
        \{% block content %\}\{% endblock %\}
    </body>
 </html>
 `;
 // quasar dialog setup
 const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
 // new html template logic
 const state: ReportHTMLTemplate = props.template
  ? reactive(extend({}, props.template))
  : reactive({
      id: 0,
      name: props.cloneTemplate ? `Copy of ${props.cloneTemplate.name}` : "",
      html: props.cloneTemplate ? props.cloneTemplate.html : defaultTemplate,
    });
 const { isLoading, isError, addReportHTMLTemplate, editReportHTMLTemplate } =
  useSharedReportHTMLTemplates;
 async function submit() {
  props.template
    ? editReportHTMLTemplate(state.id, state)
    : addReportHTMLTemplate(state);
  // stops the dialog from closing when there is an error
  await until(isLoading).not.toBeTruthy();
  if (isError.value) return;
  onDialogOK();
 }
 const htmlEditor = ref<HTMLElement | null>(null);
 let editor: monaco.editor.IStandaloneCodeEditor;
 const theme = $q.dark.isActive ? "vs-dark" : "vs-light";
 function loadEditor() {
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  editor = monaco.editor.create(htmlEditor.value!, {
    language: "html",
    value: state.html,
    theme: theme,
  });
  editor.onDidChangeModelContent(() => {
    state.html = editor.getValue();
  });
 }
 function cleanupEditors() {
  editor.dispose();
 }
 </script>
--- a/src/ee/reporting/components/ReportHTMLTemplateTable.vue
+++ b/src/ee/reporting/components/ReportHTMLTemplateTable.vue
@@ -0,0 +1,201 @@
 <!--
 Copyright (c) 2023-present Amidaware Inc.
 This file is subject to the EE License Agreement.
 For details, see: https://license.tacticalrmm.com/ee
 -->
 <template>
  <q-dialog ref="dialogRef" maximized @hide="onDialogHide">
    <q-card>
      <q-bar>
        <q-btn
          class="q-mr-sm"
          dense
          flat
          push
          icon="refresh"
          @click="getReportHTMLTemplates"
        />Base Templates
        <q-space />
        <q-btn v-close-popup dense flat icon="close">
          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
        </q-btn>
      </q-bar>
      <q-table
        dense
        :table-class="{
          'table-bgcolor': !$q.dark.isActive,
          'table-bgcolor-dark': $q.dark.isActive,
        }"
        :style="{ 'max-height': `${$q.screen.height - 24}px` }"
        class="tbl-sticky"
        :rows="reportHTMLTemplates"
        :columns="columns"
        :loading="isLoading"
        :pagination="{ rowsPerPage: 0, sortBy: 'favorite', descending: true }"
        :filter="search"
        row-key="id"
        binary-state-sort
        virtual-scroll
        :rows-per-page-options="[0]"
      >
        <template #top>
          <q-btn
            class="q-ml-sm"
            icon="add"
            label="New"
            no-caps
            dense
            flat
            @click="openNewHTMLTemplateForm"
          />
          <q-space />
          <q-input
            v-model="search"
            style="width: 300px"
            label="Search"
            dense
            outlined
            clearable
            class="q-pr-md q-pb-xs"
          >
            <template #prepend>
              <q-icon name="search" color="primary" />
            </template>
          </q-input>
        </template>
        <template #body="props">
          <q-tr
            :props="props"
            class="cursor-pointer"
            @dblclick="openEditHTMLTemplate(props.row)"
          >
            <!-- Context Menu -->
            <q-menu context-menu>
              <q-list dense style="min-width: 200px">
                <q-item
                  v-close-popup
                  clickable
                  @click="openEditHTMLTemplate(props.row)"
                >
                  <q-item-section side>
                    <q-icon name="edit" />
                  </q-item-section>
                  <q-item-section>Edit</q-item-section>
                </q-item>
                <q-item
                  v-close-popup
                  clickable
                  @click="cloneHTMLTemplate(props.row)"
                >
                  <q-item-section side>
                    <q-icon name="content_copy" />
                  </q-item-section>
                  <q-item-section>Clone</q-item-section>
                </q-item>
                <q-item
                  v-close-popup
                  clickable
                  @click="deleteHTMLTemplate(props.row)"
                >
                  <q-item-section side>
                    <q-icon name="delete" />
                  </q-item-section>
                  <q-item-section>Delete</q-item-section>
                </q-item>
                <q-separator></q-separator>
                <q-item v-close-popup clickable>
                  <q-item-section>Close</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
            <!-- rows -->
            <td>{{ props.row.name }}</td>
          </q-tr>
        </template>
      </q-table>
    </q-card>
  </q-dialog>
 </template>
 <script setup lang="ts">
 // composition imports
 import { ref, onMounted } from "vue";
 import { useQuasar, useDialogPluginComponent, type QTableColumn } from "quasar";
 import { useSharedReportHTMLTemplates } from "../api/reporting";
 // ui imports
 import ReportHTMLTemplateForm from "./ReportHTMLTemplateForm.vue";
 // type imports
 import type { ReportHTMLTemplate } from "../types/reporting";
 const columns: QTableColumn[] = [
  {
    name: "name",
    label: "Name",
    field: "name",
    align: "left",
    sortable: true,
  },
 ];
 // emits
 defineEmits([...useDialogPluginComponent.emits]);
 const { dialogRef, onDialogHide } = useDialogPluginComponent();
 const $q = useQuasar();
 // reports manager logic
 const {
  reportHTMLTemplates,
  isLoading,
  getReportHTMLTemplates,
  deleteReportHTMLTemplate,
 } = useSharedReportHTMLTemplates;
 const search = ref("");
 function openNewHTMLTemplateForm() {
  $q.dialog({
    component: ReportHTMLTemplateForm,
  });
 }
 function openEditHTMLTemplate(template: ReportHTMLTemplate) {
  $q.dialog({
    component: ReportHTMLTemplateForm,
    componentProps: {
      template,
    },
  });
 }
 function deleteHTMLTemplate(template: ReportHTMLTemplate) {
  $q.dialog({
    title: `Delete HTML Template: ${template.name}?`,
    message:
      "If this template is in use you will need to change it in every report template",
    cancel: true,
    ok: { label: "Delete", color: "negative" },
  }).onOk(() => {
    deleteReportHTMLTemplate(template.id);
  });
 }
 async function cloneHTMLTemplate(template: ReportHTMLTemplate) {
  $q.dialog({
    component: ReportHTMLTemplateForm,
    componentProps: {
      cloneTemplate: template,
    },
  });
 }
 onMounted(getReportHTMLTemplates);
 </script>
--- a/src/ee/reporting/components/ReportTableMaker.vue
+++ b/src/ee/reporting/components/ReportTableMaker.vue
@@ -0,0 +1,159 @@
 <!--
 Copyright (c) 2023-present Amidaware Inc.
 This file is subject to the EE License Agreement.
 For details, see: https://license.tacticalrmm.com/ee
 -->
 <template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card style="width: 80vw">
      <q-bar>
        Insert Table
        <q-space />
        <q-btn v-close-popup dense flat icon="close">
          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
        </q-btn>
      </q-bar>
      <q-card-section>
        <q-option-group
          v-model="tableType"
          :options="tableTypeOptions"
          dense
          inline
        />
      </q-card-section>
      <q-card-section v-if="tableType === 'variables'">
        <q-select
          v-model="source"
          :options="arrayOptions"
          outlined
          dense
          label="Data Source"
        />
      </q-card-section>
      <q-card-section style="max-height: 60vh" class="scroll">
        <q-input v-model="output" filled type="textarea" autogrow />
      </q-card-section>
      <q-card-actions align="right">
        <q-btn v-close-popup dense flat label="Cancel" />
        <q-btn dense flat label="Insert" color="primary" @click="insert" />
      </q-card-actions>
    </q-card>
  </q-dialog>
 </template>
 <script setup lang="ts">
 import { ref, computed, watch } from "vue";
 import { useDialogPluginComponent } from "quasar";
 import { useSharedReportTemplates } from "../api/reporting";
 import { capitalize } from "@/utils/format";
 // emits
 defineEmits([...useDialogPluginComponent.emits]);
 const { variableAnalysis } = useSharedReportTemplates;
 // quasar dialog setup
 const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
 const tableTypeOptions = [
  { value: "blank", label: "Blank" },
  { value: "variables", label: "From Variables" },
 ];
 const blankOutput = `<table>
  <thead>
    <tr>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
 </table>`;
 const tableType = ref<"blank" | "variables">("blank");
 const source = ref("");
 const output = ref(blankOutput);
 // watch for source change and get list of columns
 watch(source, (newSource) => {
  let columns = [] as string[];
  for (let key in variableAnalysis.value)
    if (
      variableAnalysis.value[key] !== "Object" &&
      key.startsWith(newSource + "[0]")
    )
      columns.push(key.replace(newSource + "[0].", ""));
  generateTable(columns);
 });
 watch(tableType, (newValue) => {
  if (newValue === "blank") output.value = blankOutput;
 });
 // compute the arrayOptions
 const arrayOptions = computed(() => {
  let options = [];
  for (let key in variableAnalysis.value)
    if (variableAnalysis.value[key].toLowerCase().startsWith("array"))
      options.push(key);
  return options;
 });
 function capitalizeHeader(header: string) {
  let words = header.split("__");
  // get the last two words
  if (words.length > 1) {
    words = words.slice(-2);
  }
  const columnName = words.join("_");
  return columnName
    .split("_")
    .map((word) => capitalize(word))
    .join(" ");
 }
 function generateTable(columns: string[]) {
  let headers = "";
  let cells = "";
  columns.forEach((column) => {
    headers += `\t<th>${capitalizeHeader(column)}</th>\n`;
    cells += `\t<td>{{ item.${column} }}</td>\n`;
  });
  if (!headers) {
    headers = "\t<th>Column Name</th>";
  }
  if (!cells) {
    cells = "\t<td>{{ item }}</td>";
  }
  output.value = `<table>
  <thead>
    <tr>
 ${headers}
    </tr>
  </thead>
  <tbody>
    {% for item in ${source.value} %}
    <tr>
 ${cells}
    </tr>
    {% endfor %}
  </tbody>
 </table>
 `;
 }
 function insert() {
  onDialogOK(output.value);
 }
 </script>
--- a/src/ee/reporting/components/ReportTemplateForm.vue
+++ b/src/ee/reporting/components/ReportTemplateForm.vue
@@ -0,0 +1,734 @@
 <!--
 Copyright (c) 2023-present Amidaware Inc.
 This file is subject to the EE License Agreement.
 For details, see: https://license.tacticalrmm.com/ee
 -->
 <template>
  <q-dialog
    ref="dialogRef"
    maximized
    @hide="onDialogHide"
    @show="initializeEditor"
    @before-hide="cleanupEditors"
  >
    <q-card>
      <q-bar>
        New Report Template
        <!-- <q-btn
          icon="help"
          round
          flat
          color="info"
          @click="showHelp = !showHelp"
        /> -->
        <q-space />
        <q-btn dense flat icon="close" @click="openClosePrompt">
          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
        </q-btn>
      </q-bar>
      <q-toolbar>
        <q-input
          v-model="state.name"
          label="Report Name"
          class="q-pr-sm"
          filled
          dense
          style="width: 425px"
          :error="!isNameValid"
          hide-bottom-space
        />
        <q-select
          v-model="state.template_html"
          style="width: 250px"
          class="q-pr-sm"
          :options="HTMLTemplateOptions"
          label="Base Templates"
          map-options
          emit-value
          dense
          filled
          clearable
        />
        <q-select
          v-model="state.depends_on"
          style="width: 250px"
          class="q-pr-sm"
          :options="dependsOnFilterOptions"
          label="Template Dependencies"
          multiple
          dense
          filled
          use-input
          input-debounce="0"
          @new-value="createValue"
          @filter="filterFn"
        >
          <template v-slot:selected>
            <span v-if="state.depends_on && state.depends_on?.length > 0"
              >{{ state.depends_on?.length }} Selected</span
            >
          </template>
        </q-select>
        <q-option-group
          v-model="previewFormat"
          :options="formatOptions"
          dense
          color="primary"
          :disable="debug"
        />
        <q-toggle v-model="debug" dense label="Debug" class="q-pl-sm" />
        <q-space />
        <q-tabs v-model="tab" dense shrink>
          <q-tab
            v-if="templateType === 'markdown'"
            name="markdown"
            label="Markdown"
            :ripple="false"
          />
          <q-tab
            v-else-if="templateType === 'html'"
            name="html"
            label="Html"
            :ripple="false"
          />
          <q-tab v-else name="plaintext" label="Plain Text" :ripple="false" />
          <q-tab
            v-if="templateType !== 'plaintext'"
            name="css"
            label="CSS"
            :ripple="false"
          />
          <q-tab name="preview" label="Preview" :ripple="false" />
        </q-tabs>
      </q-toolbar>
      <!-- main editor -->
      <div v-show="tab !== 'preview'" class="q-px-sm">
        <q-layout
          view="lHh lpR lFf"
          :style="{ height: `${$q.screen.height - 132}px` }"
          container
        >
          <q-drawer
            v-model="showVariablesDrawer"
            :mini="drawerMiniState"
            side="left"
            bordered
            :width="500"
            :mini-width="40"
          >
            <q-btn
              icon="chevron_left"
              color="dark"
              class="absolute"
              style="top: 15px; right: -17px"
              @click="drawerMiniState = true"
              dense
              round
            />
            <template v-slot:mini>
              <div class="q-pt-sm">
                <q-btn
                  class=""
                  icon="chevron_right"
                  color="dark"
                  @click="drawerMiniState = false"
                  dense
                  round
                />
              </div>
            </template>
            <VariablesSelector
              :variables="state.template_variables"
              :template="state.template_md"
              :dependencies="dependencies"
              :dependsOn="state.depends_on"
              :base_template="state.template_html"
            />
          </q-drawer>
          <!-- <q-drawer
            v-model="showHelp"
            side="right"
            :width="600"
            overlay
            bordered
          >
            <ReportingHelpMenu section="template" />
          </q-drawer> -->
          <q-page-container>
            <q-splitter
              v-model="splitter"
              emit-immediately
              reverse
              :limits="[3, 45]"
            >
              <template v-slot:before>
                <EditorToolbar
                  v-if="
                    tab !== 'preview' &&
                    tab !== 'css' &&
                    editor &&
                    variablesEditor
                  "
                  :editor="editor"
                  :variablesEditor="variablesEditor"
                  :templateType="templateType"
                >
                  <template v-slot:buttons>
                    <q-btn
                      flat
                      dense
                      :ripple="false"
                      label="vars"
                      no-caps
                      @click="splitter > 3 ? (splitter = 3) : (splitter = 35)"
                    >
                      <q-tooltip :delay="500">{{
                        splitter >= 3 ? "Hide variables" : "Show variables"
                      }}</q-tooltip>
                    </q-btn>
                    <q-btn
                      flat
                      dense
                      :ripple="false"
                      label="base"
                      no-caps
                      @click="openBaseTemplateForm"
                    >
                      <q-tooltip :delay="500">Add Base Template</q-tooltip>
                    </q-btn>
                  </template>
                </EditorToolbar>
                <div
                  ref="editorDiv"
                  :style="{ height: `${$q.screen.height - 168}px` }"
                ></div>
              </template>
              <template v-slot:after>
                <q-bar>
                  <q-btn
                    v-if="splitter > 6"
                    round
                    dense
                    flat
                    icon="chevron_right"
                    @click="splitter = 3"
                  ></q-btn>
                  <q-btn
                    v-else
                    round
                    dense
                    flat
                    icon="chevron_left"
                    @click="splitter = 35"
                  ></q-btn>
                  <div v-if="splitter > 8" class="q-pl-xs text-subtitle">
                    Variables
                  </div>
                </q-bar>
                <div
                  ref="variablesDiv"
                  v-show="splitter > 8"
                  :style="{ height: `${$q.screen.height - 168}px` }"
                ></div>
              </template>
            </q-splitter>
          </q-page-container>
        </q-layout>
      </div>
      <!-- preview -->
      <ReportTemplatePreview
        v-if="tab == 'preview' && !isLoading"
        :previewFormat="previewFormat"
        :source="renderedPreview"
        :debug="debug"
        :variables="renderedVariables"
      />
      <q-inner-loading
        v-if="tab == 'preview'"
        :showing="isLoading"
        label="Generating Report..."
        label-class="text-teal"
        label-style="font-size: 1.1em"
      />
      <q-card-actions v-if="tab !== 'preview'">
        <q-toggle
          v-if="reportTemplate"
          v-model="autoSave"
          label="Auto-save"
          dense
        />
        <span class="q-pl-sm" v-if="showSaved">Template Saved!</span>
        <q-space />
        <q-btn dense flat label="Cancel" @click="openClosePrompt" />
        <q-btn
          v-if="reportTemplate"
          :loading="isLoading"
          dense
          flat
          label="Apply"
          color="primary"
          @click="applyChanges"
        />
        <q-btn
          :loading="isLoading"
          dense
          flat
          label="Save"
          color="primary"
          @click="submit"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
 </template>
 <script setup lang="ts">
 // composition imports
 import { ref, reactive, computed, watch, onBeforeMount, shallowRef } from "vue";
 import { until, useDebounceFn, useTimeoutFn } from "@vueuse/shared";
 import {
  useQuasar,
  useDialogPluginComponent,
  extend,
  type QSelectOption,
 } from "quasar";
 import {
  useSharedReportTemplates,
  useSharedReportHTMLTemplates,
 } from "../api/reporting";
 import { notifyError } from "@/utils/notify";
 import * as monaco from "monaco-editor";
 import { parseDocument } from "yaml";
 // ui imports
 import EditorToolbar from "./EditorToolbar.vue";
 import ReportTemplatePreview from "./ReportTemplatePreview.vue";
 import ReportDependencyPrompt from "./ReportDependencyPrompt.vue";
 import ReportHTMLTemplateForm from "./ReportHTMLTemplateForm.vue";
 import VariablesSelector from "./VariablesSelector.vue";
 //import ReportingHelpMenu from "./ReportingHelpMenu.vue";
 // type imports
 import type {
  ReportTemplate,
  ReportTemplateType,
  ReportFormat,
  ReportDependencies,
 } from "../types/reporting";
 // props
 const props = defineProps<{
  templateType: ReportTemplateType;
  reportTemplate?: ReportTemplate;
  cloneTemplate?: ReportTemplate;
 }>();
 // emits
 defineEmits([...useDialogPluginComponent.emits]);
 // quasar dialog setup
 const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
 // quasar setup
 const $q = useQuasar();
 // new report logic
 const state: ReportTemplate = props.reportTemplate
  ? reactive(extend({}, props.reportTemplate))
  : reactive({
      id: 0,
      name: props.cloneTemplate ? `Copy of ${props.cloneTemplate.name}` : "",
      template_md: props.cloneTemplate ? props.cloneTemplate.template_md : "",
      template_css: props.cloneTemplate ? props.cloneTemplate.template_css : "",
      template_html: props.cloneTemplate
        ? props.cloneTemplate.template_html
        : undefined,
      type: props.templateType,
      template_variables: props.cloneTemplate
        ? props.cloneTemplate.template_variables
        : "",
      depends_on: props.cloneTemplate ? props.cloneTemplate?.depends_on : [],
    });
 // are you sure? close prompt if work isn't saved
 const edited = ref(false);
 // watch variables and set the edited variable
 watch(
  state,
  () => {
    edited.value = true;
  },
  { deep: true },
 );
 function openClosePrompt() {
  if (edited.value) {
    $q.dialog({
      title: "You have unsaved changes",
      message: "Would you like to close?",
      cancel: true,
      persistent: true,
    }).onOk(() => {
      dialogRef.value?.hide();
    });
  } else {
    dialogRef.value?.hide();
  }
 }
 // help menu
 //const showHelp = ref(false);
 // variables drawer menu state
 const showVariablesDrawer = ref(true);
 const drawerMiniState = ref(true);
 // splitter
 const splitter = ref(35);
 const previewFormat = ref<ReportFormat>(
  props.templateType === "html" || props.templateType === "markdown"
    ? "html"
    : "plaintext",
 );
 const formatOptions = [
  {
    label:
      props.templateType === "html" || props.templateType === "markdown"
        ? "HTML"
        : "Text",
    value:
      props.templateType === "html" || props.templateType === "markdown"
        ? "html"
        : "plaintext",
  },
  { label: "PDF", value: "pdf" },
 ];
 const dependencies = ref<ReportDependencies>({});
 watch(
  () => state.depends_on,
  (newArray, oldArray) => {
    if (newArray && oldArray) {
      const removed = oldArray.filter((item) => newArray.indexOf(item) == -1);
      removed.forEach((item) => delete dependencies.value[item]);
    }
  },
 );
 // initial set of depends on options
 const dependsOnOptions = ["client", "site", "agent"];
 // will add any custom added depend_on options to the list
 state.depends_on?.forEach((item) =>
  !dependsOnOptions.includes(item) ? dependsOnOptions.push(item) : null,
 );
 // the filtered list that the select uses
 const dependsOnFilterOptions = ref(dependsOnOptions);
 function createValue(
  val: string,
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  done: (val: any, mode: "add-unique" | "add" | "toggle" | undefined) => void,
 ) {
  if (val.length > 0) {
    if (!dependsOnOptions.includes(val)) {
      dependsOnOptions.push(val);
    }
    done(val, "add-unique");
  }
 }
 function filterFn(val: string, update: (callback: () => void) => void) {
  update(() => {
    if (val === "") {
      dependsOnFilterOptions.value = dependsOnOptions;
    } else {
      const needle = val.toLowerCase();
      dependsOnFilterOptions.value = dependsOnOptions.filter(
        (v) => v.toLowerCase().indexOf(needle) > -1,
      );
    }
  });
 }
 const {
  isLoading,
  isError,
  renderedPreview,
  renderedVariables,
  addReportTemplate,
  editReportTemplate,
  runReportPreview,
  runReportPreviewDebug,
  getAllowedValues,
 } = useSharedReportTemplates;
 const { reportHTMLTemplates, getReportHTMLTemplates } =
  useSharedReportHTMLTemplates;
 const tab = ref(
  props.templateType === "markdown"
    ? "markdown"
    : props.templateType === "html"
    ? "html"
    : "plaintext",
 );
 onBeforeMount(() => {
  getReportHTMLTemplates();
  if (state.depends_on?.length === 0) {
    getAllowedValues({
      variables: state.template_variables,
      dependencies: dependencies.value,
    });
  }
 });
 const HTMLTemplateOptions = computed<QSelectOption<number>[]>(() =>
  reportHTMLTemplates.value.map((template) => ({
    label: template.name,
    value: template.id,
  })),
 );
 const debug = ref(false);
 watch(debug, (newValue) => {
  if (newValue)
    props.templateType === "html" || props.templateType === "markdown"
      ? (previewFormat.value = "html")
      : (previewFormat.value = "plaintext");
 });
 function openBaseTemplateForm() {
  $q.dialog({
    component: ReportHTMLTemplateForm,
  }).onOk(() => getReportHTMLTemplates);
 }
 function previewReport() {
  wrapDoubleQuotes();
  let needsPrompt: string[] = [];
  if (state.depends_on && state.depends_on.length > 0) {
    needsPrompt = state.depends_on.filter((dep) => !dependencies.value[dep]);
  }
  if (needsPrompt.length > 0) {
    $q.dialog({
      component: ReportDependencyPrompt,
      componentProps: { dependsOn: needsPrompt },
    })
      .onOk((deps: ReportDependencies) => {
        dependencies.value = { ...dependencies.value, ...deps };
      })
      .onDismiss(() => {
        const request = {
          ...state,
          format: previewFormat.value,
          dependencies: dependencies.value,
          debug: debug.value,
        };
        debug.value
          ? runReportPreviewDebug(request)
          : runReportPreview(request);
      });
  } else {
    const request = {
      ...state,
      format: previewFormat.value,
      dependencies: dependencies.value,
      debug: debug.value,
    };
    debug.value ? runReportPreviewDebug(request) : runReportPreview(request);
  }
 }
 // load preview when preview tab is selected
 watch(tab, (newValue) => {
  if (newValue === "preview") {
    previewReport();
  } else if (newValue === props.templateType) {
    editor.value?.setModel(templateModel);
  } else if (newValue === "css") {
    splitter.value = 3;
    editor.value?.setModel(cssModel);
  }
 });
 // load preview when preview format changes
 watch(previewFormat, () => {
  if (tab.value === "preview") {
    previewReport();
  }
 });
 // main editor
 const editorDiv = ref<HTMLElement | null>(null);
 const editor = shallowRef<monaco.editor.IStandaloneCodeEditor>();
 // saves state for template
 let templateModel: monaco.editor.ITextModel;
 const templateUri = monaco.Uri.parse(`editor://${props.templateType}`);
 // saves state for css
 let cssModel: monaco.editor.ITextModel;
 const cssUri = monaco.Uri.parse("editor://css");
 // saves state for variables editor
 const variablesDiv = ref<HTMLElement | null>(null);
 const variablesEditor = shallowRef<monaco.editor.IStandaloneCodeEditor>();
 let variablesModel: monaco.editor.ITextModel;
 const variablesUri = monaco.Uri.parse("editor://variables");
 function cleanupEditors() {
  editor.value?.dispose();
  variablesEditor.value?.dispose();
  templateModel?.dispose();
  cssModel?.dispose();
  variablesModel?.dispose();
  onDialogHide();
 }
 function initializeEditor() {
  templateModel = monaco.editor.createModel(
    state.template_md,
    props.templateType,
    templateUri,
  );
  cssModel = monaco.editor.createModel(state.template_css, "css", cssUri);
  const theme = $q.dark.isActive ? "vs-dark" : "vs-light";
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  editor.value = monaco.editor.create(editorDiv.value!, {
    automaticLayout: true,
    model: templateModel,
    theme: theme,
    minimap: { enabled: false },
    quickSuggestions: false,
  });
  editor.value?.onDidChangeModelContent(() => {
    const currentModel = editor.value?.getModel();
    if (currentModel) {
      if (currentModel?.uri === cssUri) {
        state.template_css = currentModel.getValue();
      } else {
        state.template_md = currentModel.getValue();
      }
      autoSave.value && applyChanges();
    }
  });
  variablesModel = monaco.editor.createModel(
    state.template_variables,
    "yaml",
    variablesUri,
  );
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  variablesEditor.value = monaco.editor.create(variablesDiv.value!, {
    automaticLayout: true,
    model: variablesModel,
    theme: theme,
    minimap: { enabled: false },
  });
  variablesEditor.value?.onDidChangeModelContent(() => {
    const currentModel = variablesEditor.value?.getModel();
    if (currentModel) {
      state.template_variables = currentModel.getValue();
      autoSave.value && applyChanges();
    }
  });
 }
 // make sure to put quotes around any variable values that have { or }
 function wrapDoubleQuotes() {
  const matchJsonCharacters = /([^:\s'"]+:\s*)([^'"]*[{}][^'"\n]*)/;
  const editorValue = variablesEditor.value?.getValue();
  if (editorValue && matchJsonCharacters.test(editorValue)) {
    state.template_variables = editorValue
      .split("\n")
      .map((line) => line.replace(matchJsonCharacters, "$1'$2'"))
      .join("\n");
    variablesEditor.value?.setValue(state.template_variables);
  }
 }
 const isNameValid = ref(true);
 function validate(dontNotify = false): boolean {
  let isValid = true;
  if (!state.template_md) {
    dontNotify || notifyError("Template Text is required");
    isValid = false;
  }
  if (!state.name) {
    dontNotify || notifyError("Template Name is required");
    isNameValid.value = false;
    isValid = false;
  }
  // check if yaml is valid
  const doc = parseDocument(state.template_variables, { prettyErrors: true });
  if (doc.errors.length > 0) {
    dontNotify ||
      notifyError("Error in variables: " + doc.errors[0].message, 5000);
    isValid = false;
  }
  isNameValid.value = true;
  return isValid;
 }
 const autoSave = ref(props.reportTemplate ? true : false);
 const showSaved = ref(false);
 const applyChanges = useDebounceFn(() => {
  isLoading.value = true;
  if (validate(true)) {
    wrapDoubleQuotes();
    editReportTemplate(state.id, state, { dontNotify: true });
    edited.value = false;
    showSaved.value = true;
    useTimeoutFn(() => (showSaved.value = false), 5000);
  }
  isLoading.value = false;
 }, 2000);
 async function submit() {
  if (validate()) {
    wrapDoubleQuotes();
    props.reportTemplate
      ? editReportTemplate(state.id, state)
      : addReportTemplate(state);
    // stops the dialog from closing when there is an error
    await until(isLoading).not.toBeTruthy();
    if (isError.value) return;
    onDialogOK();
  }
 }
 </script>
--- a/Show More
+++ b/Show More