From 1ba2f81192913932ef31b2b5383aa84517fccfc8 Mon Sep 17 00:00:00 2001
From: Dave Roberts <145559566+droberts-ctrlo@users.noreply.github.com>
Date: Wed, 29 Apr 2026 16:41:04 +0100
Subject: [PATCH 01/10] Js formatting (#612)

* Formatted test and config code and updated test files

Also removed extra yarn commands that weren't needed, and automated download of browserslist updates on build.

* Updated filter where typeahead is missed

* Update component.js

* Reset erroneous changes

* Updated error handler

* Formatted test and config code and updated test files

Also removed extra yarn commands that weren't needed, and automated download of browserslist updates on build.

* Added editorconfig and upgraded ESLint to current version

* Formatted and changed code with ESLint fixes - functionality has not changed

Removed cjs from eslint - cjs are used for internal development files, and should never be included

* Fixed formatting and code where this was broken on merge with current dev branch

Updated files where dev changes weren't included
---
 .../components/alert/lib/dangerAlert.ts       |   2 +-
 .../components/alert/lib/infoAlert.ts         |   4 +-
 .../components/alert/lib/successAlert.ts      |   2 +-
 .../components/alert/lib/warningAlert.ts      |   4 +-
 .../components/button/lib/RenderableButton.ts |   4 +-
 .../button/lib/submit-field-button.ts         |   9 +-
 .../form-group/autosave/lib/modal.js          | 240 +++++++++---------
 .../display-conditions/lib/component.js       |   4 +-
 .../form-group/filter/lib/component.js        |   2 +-
 .../form-group/input/lib/documentComponent.ts |   1 -
 src/frontend/js/lib/logging.js                |  10 +-
 src/frontend/js/lib/util/renderable/index.ts  |   4 +-
 .../js/lib/util/scriptErrorHandler/index.ts   |  14 +-
 .../scriptErrorHandler/lib/MessageUploader.ts |   4 +-
 src/frontend/js/lib/validation.js             |  26 +-
 15 files changed, 166 insertions(+), 164 deletions(-)

diff --git a/src/frontend/components/alert/lib/dangerAlert.ts b/src/frontend/components/alert/lib/dangerAlert.ts
index af77e65f3..177af9e96 100644
--- a/src/frontend/components/alert/lib/dangerAlert.ts
+++ b/src/frontend/components/alert/lib/dangerAlert.ts
@@ -1,4 +1,4 @@
-import { AlertBase } from "./alertBase";
+import { AlertBase } from './alertBase';
 
 export class DangerAlert extends AlertBase {
     /**
diff --git a/src/frontend/components/alert/lib/infoAlert.ts b/src/frontend/components/alert/lib/infoAlert.ts
index 6a9214dbb..1981226b1 100644
--- a/src/frontend/components/alert/lib/infoAlert.ts
+++ b/src/frontend/components/alert/lib/infoAlert.ts
@@ -12,6 +12,6 @@ export class InfoAlert extends AlertBase {
      * @param {string} message - The message to be displayed in the info alert.
      */
     constructor(message: string) {
-        super(message, "info");
+        super(message, 'info');
     }
-}
\ No newline at end of file
+}
diff --git a/src/frontend/components/alert/lib/successAlert.ts b/src/frontend/components/alert/lib/successAlert.ts
index ee49396b6..4f8965244 100644
--- a/src/frontend/components/alert/lib/successAlert.ts
+++ b/src/frontend/components/alert/lib/successAlert.ts
@@ -1,4 +1,4 @@
-import { AlertBase } from "./alertBase";
+import { AlertBase } from './alertBase';
 
 export class SuccessAlert extends AlertBase {
     /**
diff --git a/src/frontend/components/alert/lib/warningAlert.ts b/src/frontend/components/alert/lib/warningAlert.ts
index 2dce92e08..665ce6028 100644
--- a/src/frontend/components/alert/lib/warningAlert.ts
+++ b/src/frontend/components/alert/lib/warningAlert.ts
@@ -1,4 +1,4 @@
-import { AlertBase } from "./alertBase";
+import { AlertBase } from './alertBase';
 
 export class WarningAlert extends AlertBase {
     /**
@@ -12,6 +12,6 @@ export class WarningAlert extends AlertBase {
      * @param {string} message - The message to be displayed in the info alert.
      */
     constructor(message: string) {
-        super(message, "warning");
+        super(message, 'warning');
     }
 }
diff --git a/src/frontend/components/button/lib/RenderableButton.ts b/src/frontend/components/button/lib/RenderableButton.ts
index b8004011a..221f12045 100644
--- a/src/frontend/components/button/lib/RenderableButton.ts
+++ b/src/frontend/components/button/lib/RenderableButton.ts
@@ -1,4 +1,4 @@
-import { Renderable } from "util/renderable";
+import { Renderable } from 'util/renderable';
 
 export class RenderableButton implements Renderable<HTMLButtonElement> {
     classList: string[] = [];
@@ -12,7 +12,7 @@ export class RenderableButton implements Renderable<HTMLButtonElement> {
         button.textContent = this.text;
         button.addEventListener('click', this.onClick);
         button.classList.add(...this.classList, 'btn');
-        const btnType = this.classList.find(b=>b.startsWith('btn-')) ? '' : 'btn-default'
+        const btnType = this.classList.find(b=>b.startsWith('btn-')) ? '' : 'btn-default';
         if(btnType) {
             button.classList.add(btnType);
         }
diff --git a/src/frontend/components/button/lib/submit-field-button.ts b/src/frontend/components/button/lib/submit-field-button.ts
index d2107c83e..5d39b5013 100644
--- a/src/frontend/components/button/lib/submit-field-button.ts
+++ b/src/frontend/components/button/lib/submit-field-button.ts
@@ -43,7 +43,10 @@ export default class SubmitFieldButton {
             const $displayConditionsField = $('#displayConditions');
 
             const $instanceIDField = $('#refers_to_instance_id');
-            const $filterEl = $instanceIDField.length && $(`[data-builder-id='${$instanceIDField.val()}']`);
+            let $filterEl: JQuery<HTMLElement> | undefined = undefined;
+            if($instanceIDField.length) {
+                $filterEl =  $(`[data-builder-id='${$instanceIDField.val()}']`);
+            }
 
             const $permissionTable = $('#default_field_permissions_table');
 
@@ -69,7 +72,7 @@ export default class SubmitFieldButton {
                 bUpdateTree = true;
             }
 
-            if ($instanceIDField.length && !$instanceIDField.prop('disabled') && $filterEl.length) {
+            if ($instanceIDField.length && !$instanceIDField.prop('disabled') && $filterEl && $filterEl.length) {
                 bUpdateFilter = true;
             }
 
@@ -95,7 +98,7 @@ export default class SubmitFieldButton {
                     url: this.getURL(data),
                     data: { data: mytext, csrf_token: data.csrfToken }
                 }).done(() => {
-                     
+
                     alert('Tree has been updated');
                 });
             }
diff --git a/src/frontend/components/form-group/autosave/lib/modal.js b/src/frontend/components/form-group/autosave/lib/modal.js
index c292cb4d1..1fa3ab10f 100644
--- a/src/frontend/components/form-group/autosave/lib/modal.js
+++ b/src/frontend/components/form-group/autosave/lib/modal.js
@@ -1,8 +1,8 @@
 import { setFieldValues } from 'set-field-values';
 import AutosaveBase from './autosaveBase';
-import { fromJson } from "util/common";
-import { InfoAlert } from "components/alert/lib/infoAlert";
-import { RenderableButton } from "components/button/lib/RenderableButton";
+import { fromJson } from 'util/common';
+import { InfoAlert } from 'components/alert/lib/infoAlert';
+import { RenderableButton } from 'components/button/lib/RenderableButton';
 
 /**
  * A modal that allows the user to restore autosaved values.
@@ -35,135 +35,135 @@ class AutosaveModal extends AutosaveBase {
 
             let errored = false;
 
-      let $list = $("<ul></ul>");
-      const $body = $modal.find(".modal-body");
-      $body
-        .html("<p>Restoring values...</p><p><strong>Please be aware that linked records may take a moment to finish restoring.<strong><p>")
-        .append($list);
-      // Convert the fields to promise functions (using the fields) that are run in parallel
-      // This is only done because various parts of the codebase use the fields in different ways dependent on types (i.e. curval)
-      await Promise.all($form.find('.linkspace-field').map(async (_, field) => {
-        const $field = $(field);
-        // This was originally a bunch of promises, but as the code is async, we can await things here
-        try {
-          const json = await this.storage.getItem(this.columnKey($field))
-          let values = json ? JSON.parse(json) : undefined;
-          // If the value can't be parsed, ignore it
-          if (!values) return;
-          // If we are in view mode and we need to switch to edit mode, do that
-          const $editButton = $field.closest('.card--topic').find('.btn-js-edit');
-          if ($editButton && $editButton.length) $editButton.trigger('click');
-          if (Array.isArray(values)) {
-            const name = $field.data("name");
-            const type = $field.data("column-type");
-            if (type === "curval") {
-              // Curvals need to work event-driven - this is because the modal doesn't always load fully,
-              // meaning the setvalue doesn't work correctly for dropdowns (mainly)
-              $field.off("validationFailed");
-              $field.off("validationPassed");
-              $field.on("validationFailed", (e) => {
-                // Decrement the curval count
-                curvalCount--;
-                const $li = $(`<li class="li-error">Error restoring ${name}, please check these values before submission<ul><li class="warning">${e.message}</li></ul></li>`);
-                $list.append($li);
-                // If we've done all fields, turn off the recovery flag
-                if (!curvalCount) {
-                  // Hide the restore button and show the close button
-                  $modal.find(".modal-footer").find(".btn-cancel").text("Close").show();
-                  this.storage.removeItem('recovering');
+            let $list = $('<ul></ul>');
+            const $body = $modal.find('.modal-body');
+            $body
+                .html('<p>Restoring values...</p><p><strong>Please be aware that linked records may take a moment to finish restoring.<strong><p>')
+                .append($list);
+            // Convert the fields to promise functions (using the fields) that are run in parallel
+            // This is only done because various parts of the codebase use the fields in different ways dependent on types (i.e. curval)
+            await Promise.all($form.find('.linkspace-field').map(async (_, field) => {
+                const $field = $(field);
+                // This was originally a bunch of promises, but as the code is async, we can await things here
+                try {
+                    const json = await this.storage.getItem(this.columnKey($field));
+                    let values = json ? JSON.parse(json) : undefined;
+                    // If the value can't be parsed, ignore it
+                    if (!values) return;
+                    // If we are in view mode and we need to switch to edit mode, do that
+                    const $editButton = $field.closest('.card--topic').find('.btn-js-edit');
+                    if ($editButton && $editButton.length) $editButton.trigger('click');
+                    if (Array.isArray(values)) {
+                        const name = $field.data('name');
+                        const type = $field.data('column-type');
+                        if (type === 'curval') {
+                            // Curvals need to work event-driven - this is because the modal doesn't always load fully,
+                            // meaning the setvalue doesn't work correctly for dropdowns (mainly)
+                            $field.off('validationFailed');
+                            $field.off('validationPassed');
+                            $field.on('validationFailed', (e) => {
+                                // Decrement the curval count
+                                curvalCount--;
+                                const $li = $(`<li class="li-error">Error restoring ${name}, please check these values before submission<ul><li class="warning">${e.message}</li></ul></li>`);
+                                $list.append($li);
+                                // If we've done all fields, turn off the recovery flag
+                                if (!curvalCount) {
+                                    // Hide the restore button and show the close button
+                                    $modal.find('.modal-footer').find('.btn-cancel').text('Close').show();
+                                    this.storage.removeItem('recovering');
+                                }
+                            });
+                            $field.on('validationPassed', () => {
+                                // Decrement the curval count
+                                curvalCount--;
+                                const $li = $(`<li class="li-success">Restored ${name}</li>`);
+                                $list.append($li);
+                                // If we've done all fields, turn off the recovery flag
+                                if (!curvalCount) {
+                                    // Hide the restore button and show the close button
+                                    $modal.find('.modal-footer').find('.btn-cancel').text('Close').show();
+                                    this.storage.removeItem('recovering');
+                                }
+                            });
+                        }
+                        setFieldValues($field, values);
+                        if (type !== 'curval') {
+                            const $li = $(`<li class="li-success">Restored ${name}</li>`);
+                            $list.append($li);
+                        }
+                        $field.addClass('field--changed');
+                    }
+                } catch (e) {
+                    // Catch anything within the mapped promises
+                    const name = $field.data('name');
+                    const $li = $(`<li class="li-error">Failed to restore ${name}<ul><li class="warning">${e.message}</li></ul></li>`);
+                    console.error(e);
+                    $list.append($li);
+                    errored = true;
                 }
-              });
-              $field.on("validationPassed", () => {
-                // Decrement the curval count
-                curvalCount--;
-                const $li = $(`<li class="li-success">Restored ${name}</li>`);
-                $list.append($li);
-                // If we've done all fields, turn off the recovery flag
-                if (!curvalCount) {
-                  // Hide the restore button and show the close button
-                  $modal.find(".modal-footer").find(".btn-cancel").text("Close").show();
-                  this.storage.removeItem('recovering');
+            })).then(() => {
+                // If there are errors, show an appropriate message, otherwise show a success message
+                $body.append(`<p>${errored ? 'Values restored with errors.' : 'All values restored.'} Please check that all field values are as expected.</p>`);
+            }).catch(e => {
+                // If there are any errors that can't be handled in the mapped promises, show a critical error message
+                $body.append(`<div class="alert alert-danger"><h4>Critical error restoring values</h4><p>${e}</p></div>`);
+            }).finally(() => {
+                // Only allow to close once recovery is finished
+                if (!curvalCount || errored) {
+                    // Show the close button
+                    $modal.find('.modal-footer').find('.btn-cancel').text('Close').show();
+                    this.storage.removeItem('recovering');
                 }
-              });
-            }
-            setFieldValues($field, values);
-            if (type !== "curval") {
-              const $li = $(`<li class="li-success">Restored ${name}</li>`);
-              $list.append($li);
-            }
-            $field.addClass("field--changed");
-          }
-        } catch (e) {
-          // Catch anything within the mapped promises
-          const name = $field.data("name");
-          const $li = $(`<li class="li-error">Failed to restore ${name}<ul><li class="warning">${e.message}</li></ul></li>`);
-          console.error(e);
-          $list.append($li);
-          errored = true;
-        }
-      })).then(() => {
-        // If there are errors, show an appropriate message, otherwise show a success message
-        $body.append(`<p>${errored ? "Values restored with errors." : "All values restored."} Please check that all field values are as expected.</p>`);
-      }).catch(e => {
-        // If there are any errors that can't be handled in the mapped promises, show a critical error message
-        $body.append(`<div class="alert alert-danger"><h4>Critical error restoring values</h4><p>${e}</p></div>`);
-      }).finally(() => {
-        // Only allow to close once recovery is finished
-        if (!curvalCount || errored) {
-          // Show the close button
-          $modal.find(".modal-footer").find(".btn-cancel").text("Close").show();
-          this.storage.removeItem('recovering');
-        }
-      });
-    });
+            });
+        });
 
         // Do we need to run an autorecover?
         const item = await this.storage.getItem(this.table_key);
 
-    // If there is no item, or there are already alerts, do not show the alert
-    if ($('.alert-danger').text() || $('.alert-warning').text() || !item) return;
-    const alert = new InfoAlert("There are unsaved values from the last time you edited this record. Would you like to preview the changes?");
-    const alertElement = alert.render();
+        // If there is no item, or there are already alerts, do not show the alert
+        if ($('.alert-danger').text() || $('.alert-warning').text() || !item) return;
+        const alert = new InfoAlert('There are unsaved values from the last time you edited this record. Would you like to preview the changes?');
+        const alertElement = alert.render();
 
-    alertElement.classList.add('alert-restore');
+        alertElement.classList.add('alert-restore');
 
-    const restoreButton = new RenderableButton("Preview", () => {
-      const $display = $modal.find(".modal-autosave")
-      const list = $("<li></li>");
-      // Get a list of the field values to restore
-      Promise.all($form.find('.linkspace-field').map(async (_, field)=>{
-        const $field = $(field);
-        const key = this.columnKey($field);
-        const value = await this.storage.getItem(key)
-        if(!value) return;
-        const fieldName = $field.data('name');
-        const li = $(`<li>${fieldName}</li>`)
-        list.append(li);
-      })).then(()=> {
-        // Append the list to the modal display
-        $display.append(list)
-      }).then(()=>{
-        // Show the modal
-        $modal.modal('show');
-        alert.hide();
-      });
-    }, 'btn-primary', 'btn-inverted', 'btn-alert-restore');
-    const restoreButtonElement = restoreButton.render();
+        const restoreButton = new RenderableButton('Preview', () => {
+            const $display = $modal.find('.modal-autosave');
+            const list = $('<li></li>');
+            // Get a list of the field values to restore
+            Promise.all($form.find('.linkspace-field').map(async (_, field)=>{
+                const $field = $(field);
+                const key = this.columnKey($field);
+                const value = await this.storage.getItem(key);
+                if(!value) return;
+                const fieldName = $field.data('name');
+                const li = $(`<li>${fieldName}</li>`);
+                list.append(li);
+            })).then(()=> {
+                // Append the list to the modal display
+                $display.append(list);
+            }).then(()=>{
+                // Show the modal
+                $modal.modal('show');
+                alert.hide();
+            });
+        }, 'btn-primary', 'btn-inverted', 'btn-alert-restore');
+        const restoreButtonElement = restoreButton.render();
 
-    const cancelButton = new RenderableButton("Cancel", () => {
-      alert.hide();
-    }, 'btn-secondary', 'btn-inverted', 'btn-alert-restore-cancel');
-    const cancelButtonElement = cancelButton.render();
+        const cancelButton = new RenderableButton('Cancel', () => {
+            alert.hide();
+        }, 'btn-secondary', 'btn-inverted', 'btn-alert-restore-cancel');
+        const cancelButtonElement = cancelButton.render();
 
-    const buttonDiv = document.createElement('div');
-    buttonDiv.className = 'button-group d-flex justify-content-end';
-    buttonDiv.appendChild(restoreButtonElement);
-    buttonDiv.appendChild(cancelButtonElement);
+        const buttonDiv = document.createElement('div');
+        buttonDiv.className = 'button-group d-flex justify-content-end';
+        buttonDiv.appendChild(restoreButtonElement);
+        buttonDiv.appendChild(cancelButtonElement);
 
-    alertElement.appendChild(buttonDiv);
+        alertElement.appendChild(buttonDiv);
 
-    $('.content-block').prepend(alertElement);
-  }
+        $('.content-block').prepend(alertElement);
+    }
 }
 
 export default AutosaveModal;
diff --git a/src/frontend/components/form-group/display-conditions/lib/component.js b/src/frontend/components/form-group/display-conditions/lib/component.js
index 7c2156d54..8735f23c5 100644
--- a/src/frontend/components/form-group/display-conditions/lib/component.js
+++ b/src/frontend/components/form-group/display-conditions/lib/component.js
@@ -27,8 +27,8 @@ class DisplayConditionsComponent extends Component {
                 { type: 'not_contains', accept_values: true, apply_to: ['string'] }
             ],
             allow_empty: true
-        }).queryBuilder('setRules', builderData.filterBase 
-            ? JSON.parse(atob(builderData.filterBase)) 
+        }).queryBuilder('setRules', builderData.filterBase
+            ? JSON.parse(atob(builderData.filterBase))
             : {rules:[]});
     }
 }
diff --git a/src/frontend/components/form-group/filter/lib/component.js b/src/frontend/components/form-group/filter/lib/component.js
index f784ab1ff..4321dbae4 100644
--- a/src/frontend/components/form-group/filter/lib/component.js
+++ b/src/frontend/components/form-group/filter/lib/component.js
@@ -76,7 +76,7 @@ class FilterComponent extends Component {
             values: {
                 b_red: 'Red',
                 c_amber: 'Amber',
-7                c_yellow: 'Yellow',
+                c_yellow: 'Yellow',
                 d_green: 'Green',
                 a_grey: 'Grey',
                 e_purple: 'Purple',
diff --git a/src/frontend/components/form-group/input/lib/documentComponent.ts b/src/frontend/components/form-group/input/lib/documentComponent.ts
index 0e441a7bb..bc23a9978 100644
--- a/src/frontend/components/form-group/input/lib/documentComponent.ts
+++ b/src/frontend/components/form-group/input/lib/documentComponent.ts
@@ -3,7 +3,6 @@ import 'util/filedrag';
 import { upload } from 'util/upload/UploadControl';
 import { validateCheckboxGroup } from 'validation';
 import { formdataMapper } from 'util/mapper/formdataMapper';
-import { logging } from 'logging';
 import { RenameEvent } from 'components/button/lib/rename-button';
 import { FileDropEvent } from 'util/filedrag';
 import ErrorHandler from 'util/errorHandler';
diff --git a/src/frontend/js/lib/logging.js b/src/frontend/js/lib/logging.js
index 6c010120f..223648caa 100644
--- a/src/frontend/js/lib/logging.js
+++ b/src/frontend/js/lib/logging.js
@@ -1,12 +1,12 @@
-import { uploadMessage } from "util/scriptErrorHandler";
+import { uploadMessage } from 'util/scriptErrorHandler';
 
 class Logging {
     constructor() {
         this.allowLogging =
-                window.test ||
-                location.hostname === 'localhost' ||
-                location.hostname === '127.0.0.1' ||
-                location.hostname.endsWith('.peek.digitpaint.nl');
+            window.test ||
+            location.hostname === 'localhost' ||
+            location.hostname === '127.0.0.1' ||
+            location.hostname.endsWith('.peek.digitpaint.nl');
     }
 
     log(...message) {
diff --git a/src/frontend/js/lib/util/renderable/index.ts b/src/frontend/js/lib/util/renderable/index.ts
index 8cbafad73..d91e1d05d 100644
--- a/src/frontend/js/lib/util/renderable/index.ts
+++ b/src/frontend/js/lib/util/renderable/index.ts
@@ -1,2 +1,2 @@
-export { Renderable } from "./lib/Renderable";
-export { Hidable } from "./lib/Hidable";
\ No newline at end of file
+export { Renderable } from './lib/Renderable';
+export { Hidable } from './lib/Hidable';
diff --git a/src/frontend/js/lib/util/scriptErrorHandler/index.ts b/src/frontend/js/lib/util/scriptErrorHandler/index.ts
index 47cd1b857..b5812c89e 100644
--- a/src/frontend/js/lib/util/scriptErrorHandler/index.ts
+++ b/src/frontend/js/lib/util/scriptErrorHandler/index.ts
@@ -1,4 +1,4 @@
-import { uploadMessage } from "./lib/MessageUploader";
+import { uploadMessage } from './lib/MessageUploader';
 
 const createErrorString = (message: string, source: any, lineno: number, colno: number, error: Error | string | null) => {
     let errorString = `Error: ${message}\nSource: ${source}\nLine: ${lineno}, Column: ${colno}`;
@@ -6,26 +6,26 @@ const createErrorString = (message: string, source: any, lineno: number, colno:
         errorString += `\nStack: ${(error as Error)?.stack}`;
     }
     return errorString;
-}
+};
 
 window.onerror = function (message: string, source: any, lineno: number, colno: number, error: Error | string | null) {
     if (location.host === 'localhost') {
         // If we're on localhost, we log the error to the console. This is useful for development.
-        console.error("Script error occurred:", message, source, lineno, colno, error);
+        console.error('Script error occurred:', message, source, lineno, colno, error);
     }
     if (location.pathname === '/api/script_error' || location.pathname === '/login') {
         // If we're on the script error page, we don't want to log it again.
-        console.error("Script error occurred but not logged to avoid recursion.");
+        console.error('Script error occurred but not logged to avoid recursion.');
         console.error(createErrorString(message, source, lineno, colno, error));
         return;
     }
 
-    const description = createErrorString(message, source, lineno, colno, error)
+    const description = createErrorString(message, source, lineno, colno, error);
 
     uploadMessage(description)
         .catch(err => {
-            console.error("Failed to upload script error:", err);
+            console.error('Failed to upload script error:', err);
         });
-}
+};
 
 export { uploadMessage };
diff --git a/src/frontend/js/lib/util/scriptErrorHandler/lib/MessageUploader.ts b/src/frontend/js/lib/util/scriptErrorHandler/lib/MessageUploader.ts
index b362cfeb7..f6f108584 100644
--- a/src/frontend/js/lib/util/scriptErrorHandler/lib/MessageUploader.ts
+++ b/src/frontend/js/lib/util/scriptErrorHandler/lib/MessageUploader.ts
@@ -1,4 +1,4 @@
-import { Uploader } from "util/upload/UploadControl";
+import { Uploader } from 'util/upload/UploadControl';
 
 export const uploadMessage = async (message: string) => {
     const body = {
@@ -24,7 +24,7 @@ export class MessageUploader {
         try {
             return await this.uploader.upload(body);
         } catch (err) {
-            console.error("Failed to upload message:", err);
+            console.error('Failed to upload message:', err);
         }
     }
 }
diff --git a/src/frontend/js/lib/validation.js b/src/frontend/js/lib/validation.js
index fda6ce67f..93f2c1986 100644
--- a/src/frontend/js/lib/validation.js
+++ b/src/frontend/js/lib/validation.js
@@ -1,4 +1,4 @@
-import { DangerAlert } from "components/alert/lib/dangerAlert";
+import { DangerAlert } from 'components/alert/lib/dangerAlert';
 
 // Bind events to a field to trigger validation
 const initValidationOnField = (field) => {
@@ -312,18 +312,18 @@ const validateTree = (field) => {
 };
 
 const validateQueryBuilder = (field) => {
-  if(!(field && field.length)) return;
-  const result = field.queryBuilder('validate');
-  if(!result) {
-    if($('.display-conditions-error').length) return false;
-    const danger = new DangerAlert('There are errors in the conditions you have set, please fix these before submitting the form');
-    const banner = danger.render();
-    banner.classList.add('mb-3', 'mt-0', 'display-conditions-error');
-    field.closest('.card__content').prepend(banner);
-    return false;
-  }
-  return true;
-}
+    if(!(field && field.length)) return;
+    const result = field.queryBuilder('validate');
+    if(!result) {
+        if($('.display-conditions-error').length) return false;
+        const danger = new DangerAlert('There are errors in the conditions you have set, please fix these before submitting the form');
+        const banner = danger.render();
+        banner.classList.add('mb-3', 'mt-0', 'display-conditions-error');
+        field.closest('.card__content').prepend(banner);
+        return false;
+    }
+    return true;
+};
 
 // Expand the card with a certain field and scroll it into view
 const expandCardValidate = (field) => {

From 5931f95ec7088c8fa7368d985c185a8a97dc498c Mon Sep 17 00:00:00 2001
From: Dave Roberts <d.roberts@ctrlo.com>
Date: Wed, 13 May 2026 13:17:34 +0100
Subject: [PATCH 02/10] Fix conflicts and formatting from rebase

---
 package.json                                              | 4 +---
 src/frontend/components/button/lib/common.test.ts         | 1 +
 src/frontend/components/button/lib/component.test.ts      | 1 +
 .../components/button/lib/create-report-button.test.ts    | 2 +-
 .../components/button/lib/remove-curval-button.test.js    | 2 +-
 .../components/button/lib/show-blank-button.test.ts       | 2 +-
 .../components/button/lib/submit-field-button.test.ts     | 3 ++-
 src/frontend/components/collapsible/lib/component.test.ts | 2 +-
 src/frontend/components/data-table/lib/helper.test.ts     | 2 +-
 .../components/form-group/autosave/lib/autosave.test.ts   | 2 ++
 .../components/form-group/input/lib/documentComponent.ts  | 4 ++--
 .../components/form-group/select-widget/lib/component.js  | 1 +
 src/frontend/components/help-view/lib/component.test.ts   | 1 +
 src/frontend/js/lib/set-field-value.test.ts               | 2 ++
 src/frontend/js/lib/util/common.test.ts                   | 2 ++
 .../util/encryptedStorage/lib/encryptedStorage.test.ts    | 6 ++++++
 src/frontend/js/lib/util/filedrag/lib/filedrag.test.ts    | 1 +
 src/frontend/js/lib/util/formatters/lua.test.ts           | 4 ++--
 src/frontend/js/lib/util/formatters/markdown.test.ts      | 1 +
 src/frontend/js/lib/util/mapper/formdataMapper.test.ts    | 1 +
 src/frontend/js/lib/util/mapper/mapper.test.ts            | 1 +
 .../lib/util/storageProvider/lib/storageProvider.test.ts  | 2 +-
 .../js/lib/util/typeahead/lib/TypeaheadBuilder.test.ts    | 1 +
 src/frontend/js/lib/util/upload/UploadControl.test.ts     | 4 +---
 yarn.lock                                                 | 8 +++-----
 25 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index 00b471fd8..15a20e78d 100644
--- a/package.json
+++ b/package.json
@@ -8,9 +8,7 @@
     "test": "jest",
     "build:dev": "webpack --env development --progress -w",
     "test:watch": "jest --watch",
-    "e2e": "yarn cypress run",
-    "prebuild": "npx update-browserslist-db@latest",
-    "pretest": "npx update-browserslist-db@latest"
+    "e2e": "yarn cypress run"
   },
   "dependencies": {
     "@egjs/hammerjs": "^2.0.0",
diff --git a/src/frontend/components/button/lib/common.test.ts b/src/frontend/components/button/lib/common.test.ts
index 424e19510..ee0c1c25e 100644
--- a/src/frontend/components/button/lib/common.test.ts
+++ b/src/frontend/components/button/lib/common.test.ts
@@ -1,3 +1,4 @@
+import { describe, it, expect } from '@jest/globals';
 import { layoutId, recordId, table_key } from './common';
 
 describe('Common button tests', () => {
diff --git a/src/frontend/components/button/lib/component.test.ts b/src/frontend/components/button/lib/component.test.ts
index 9f1b49ba6..c2267c634 100644
--- a/src/frontend/components/button/lib/component.test.ts
+++ b/src/frontend/components/button/lib/component.test.ts
@@ -1,3 +1,4 @@
+import { describe, it, expect } from '@jest/globals';
 import ButtonComponent from './component';
 
 describe('Button Component', () => {
diff --git a/src/frontend/components/button/lib/create-report-button.test.ts b/src/frontend/components/button/lib/create-report-button.test.ts
index dc73d8b79..db5900a6e 100644
--- a/src/frontend/components/button/lib/create-report-button.test.ts
+++ b/src/frontend/components/button/lib/create-report-button.test.ts
@@ -1,6 +1,6 @@
 import { validateRequiredFields } from 'validation';
 import CreateReportButtonComponent from './create-report-button';
-import { describe, it, expect } from '@jest/globals';
+import { describe, it, expect, jest } from '@jest/globals';
 
 describe('create-report-button', () => {
     it('does not submit form if no checkboxes are checked', () => {
diff --git a/src/frontend/components/button/lib/remove-curval-button.test.js b/src/frontend/components/button/lib/remove-curval-button.test.js
index a22dd35f8..5d854852c 100644
--- a/src/frontend/components/button/lib/remove-curval-button.test.js
+++ b/src/frontend/components/button/lib/remove-curval-button.test.js
@@ -61,4 +61,4 @@ describe('RemoveCurvalButton', () => {
         button.click();
         expect(current.children.length).toBe(0);
     });
-});
\ No newline at end of file
+});
diff --git a/src/frontend/components/button/lib/show-blank-button.test.ts b/src/frontend/components/button/lib/show-blank-button.test.ts
index 3d13895ca..ee0237e2a 100644
--- a/src/frontend/components/button/lib/show-blank-button.test.ts
+++ b/src/frontend/components/button/lib/show-blank-button.test.ts
@@ -29,4 +29,4 @@ describe('ShowBlankButton', () => {
         button.trigger('click');
         expect(item.css('display')).toBe('none');
     });
-});
\ No newline at end of file
+});
diff --git a/src/frontend/components/button/lib/submit-field-button.test.ts b/src/frontend/components/button/lib/submit-field-button.test.ts
index 92799b361..420903408 100644
--- a/src/frontend/components/button/lib/submit-field-button.test.ts
+++ b/src/frontend/components/button/lib/submit-field-button.test.ts
@@ -1,3 +1,4 @@
+import { describe, it, expect, beforeEach } from '@jest/globals';
 import { initGlobals } from 'testing/globals.definitions';
 import SubmitFieldButtonComponent from './submit-field-button';
 
@@ -36,4 +37,4 @@ describe('Submit field button tests', () => {
         expect($.ajax).toHaveBeenCalled();
         expect(window.alert).toHaveBeenCalled();
     });
-});
\ No newline at end of file
+});
diff --git a/src/frontend/components/collapsible/lib/component.test.ts b/src/frontend/components/collapsible/lib/component.test.ts
index 34f3d67e3..d883d29c3 100644
--- a/src/frontend/components/collapsible/lib/component.test.ts
+++ b/src/frontend/components/collapsible/lib/component.test.ts
@@ -53,4 +53,4 @@ describe('Collapsible', () => {
         expect(titleCollapsed.classList.contains('hidden')).toBe(false);
         expect(titleExpanded.classList.contains('hidden')).toBe(true);
     });
-});
\ No newline at end of file
+});
diff --git a/src/frontend/components/data-table/lib/helper.test.ts b/src/frontend/components/data-table/lib/helper.test.ts
index 454cbc18a..e95dbd801 100644
--- a/src/frontend/components/data-table/lib/helper.test.ts
+++ b/src/frontend/components/data-table/lib/helper.test.ts
@@ -71,4 +71,4 @@ describe('helper', () => {
         clearTable($(target));
         expect(target.querySelectorAll('tbody tr').length).toBe(1);
     });
-});
\ No newline at end of file
+});
diff --git a/src/frontend/components/form-group/autosave/lib/autosave.test.ts b/src/frontend/components/form-group/autosave/lib/autosave.test.ts
index 896f1af4f..42ca664f2 100644
--- a/src/frontend/components/form-group/autosave/lib/autosave.test.ts
+++ b/src/frontend/components/form-group/autosave/lib/autosave.test.ts
@@ -1,5 +1,7 @@
 import AutosaveBase from './autosaveBase';
+import { describe, it, expect, beforeAll, afterAll } from '@jest/globals';
 
+// Mocking the AutosaveBase class for testing
 class TestAutosave extends AutosaveBase {
     initAutosave(): void {
         console.log('initAutosave');
diff --git a/src/frontend/components/form-group/input/lib/documentComponent.ts b/src/frontend/components/form-group/input/lib/documentComponent.ts
index bc23a9978..c46d3b9f0 100644
--- a/src/frontend/components/form-group/input/lib/documentComponent.ts
+++ b/src/frontend/components/form-group/input/lib/documentComponent.ts
@@ -22,8 +22,8 @@ class DocumentComponent {
     readonly type = 'document';
     readonly el: JQuery<HTMLElement>;
     readonly fileInput: JQuery<HTMLInputElement>;
-    errors: (string|Error)[];
-    handler: ErrorHandler;
+    errors!: (string|Error)[];
+    handler!: ErrorHandler;
 
     constructor(el: JQuery<HTMLElement> | HTMLElement) {
         this.el = $(el);
diff --git a/src/frontend/components/form-group/select-widget/lib/component.js b/src/frontend/components/form-group/select-widget/lib/component.js
index c86166e89..9961bcbc5 100644
--- a/src/frontend/components/form-group/select-widget/lib/component.js
+++ b/src/frontend/components/form-group/select-widget/lib/component.js
@@ -1,5 +1,6 @@
 // We import Bootstrap because there is an error that throws if we don't (this.collapse is not a function).
 /* eslint-disable @typescript-eslint/no-this-alias */
+import 'bootstrap';
 import { Component } from 'component';
 import { logging } from 'logging';
 import { fromJson } from 'util/common';
diff --git a/src/frontend/components/help-view/lib/component.test.ts b/src/frontend/components/help-view/lib/component.test.ts
index 1cc998301..1b4882cce 100644
--- a/src/frontend/components/help-view/lib/component.test.ts
+++ b/src/frontend/components/help-view/lib/component.test.ts
@@ -1,6 +1,7 @@
 import HelpView from './component';
 import { describe, it, expect } from '@jest/globals';
 
+// Mock class to test the HelpView component exposing private members
 class TestHelpView extends HelpView {
     public get button() {
         return this.$button;
diff --git a/src/frontend/js/lib/set-field-value.test.ts b/src/frontend/js/lib/set-field-value.test.ts
index ebf387b5d..1033d5872 100644
--- a/src/frontend/js/lib/set-field-value.test.ts
+++ b/src/frontend/js/lib/set-field-value.test.ts
@@ -13,6 +13,7 @@ import textAreaComponent from "components/form-group/textarea";
 import { describe, it, expect, beforeEach, jest } from '@jest/globals';
 import { setFieldValues } from "./set-field-values";
 
+// Mocking jQuery plugins
 declare global {
     interface JQuery<TElement = HTMLElement> {
         renameButton: (options?: any) => JQuery<TElement>;
@@ -27,6 +28,7 @@ declare global {
     $.fn.filedrag = jest.fn().mockReturnThis();
 })(jQuery);
 
+// DOM elements for testing
 const stringDom = `
 <div class="form-group linkspace-field" data-column-id="19" data-column-type="string" data-value-selector=""
     data-show-add="" data-modal-field-ids="" data-curval-instance-name="" data-name="text" data-name-short=""
diff --git a/src/frontend/js/lib/util/common.test.ts b/src/frontend/js/lib/util/common.test.ts
index e6f90308a..9474a0d64 100644
--- a/src/frontend/js/lib/util/common.test.ts
+++ b/src/frontend/js/lib/util/common.test.ts
@@ -77,12 +77,14 @@ describe('common functions', () => {
 
         it('returns an empty object for null', () => {
             const json = null;
+            // @ts-expect-error This is a test for null input
             const parsed = fromJson(json);
             expect(parsed).toEqual({});
         });
 
         it('returns an empty object for undefined', () => {
             const json = undefined;
+            // @ts-expect-error This is a test for undefined input
             const parsed = fromJson(json);
             expect(parsed).toEqual({});
         });
diff --git a/src/frontend/js/lib/util/encryptedStorage/lib/encryptedStorage.test.ts b/src/frontend/js/lib/util/encryptedStorage/lib/encryptedStorage.test.ts
index ee38150c0..5551b1aa1 100644
--- a/src/frontend/js/lib/util/encryptedStorage/lib/encryptedStorage.test.ts
+++ b/src/frontend/js/lib/util/encryptedStorage/lib/encryptedStorage.test.ts
@@ -1,6 +1,8 @@
 import { setupCrypto } from 'testing/globals.definitions';
 import { EncryptedStorage } from './encryptedStorage';
+import { describe, it, expect, beforeAll, beforeEach, afterEach } from '@jest/globals';
 
+// Mock implementation of the Storage interface for testing purposes
 class TestStorage implements Storage {
     private map = new Map<string, string>();
 
@@ -11,6 +13,7 @@ class TestStorage implements Storage {
         this.map.clear();
         this.length = 0;
     }
+
     getItem(key: string): string | null {
         const ret = this.map.get(key);
         if (ret === undefined) {
@@ -18,6 +21,7 @@ class TestStorage implements Storage {
         }
         return ret;
     }
+
     key(index: number): string | null {
         const keys = Array.from(this.map.keys());
         if (keys.length <= index) {
@@ -25,6 +29,7 @@ class TestStorage implements Storage {
         }
         return keys[index];
     }
+
     removeItem(key: string): void {
         if (this.map.has(key)) {
             this.map.delete(key);
@@ -32,6 +37,7 @@ class TestStorage implements Storage {
             this[key] = undefined;
         }
     }
+
     setItem(key: string, value: string): void {
         this.map.set(key, value);
         this[key] = value;
diff --git a/src/frontend/js/lib/util/filedrag/lib/filedrag.test.ts b/src/frontend/js/lib/util/filedrag/lib/filedrag.test.ts
index d815d4764..411f081cb 100644
--- a/src/frontend/js/lib/util/filedrag/lib/filedrag.test.ts
+++ b/src/frontend/js/lib/util/filedrag/lib/filedrag.test.ts
@@ -1,6 +1,7 @@
 import { describe, it, expect, jest } from '@jest/globals';
 import FileDrag from './filedrag';
 
+// Test class implementation to expose private methods for testing
 class FileDragTest extends FileDrag {
     constructor(element: HTMLElement, onDrop: (files: File, index?: number, length?: number) => void = ()=>{}) {
         super(element, { debug: true }, onDrop);
diff --git a/src/frontend/js/lib/util/formatters/lua.test.ts b/src/frontend/js/lib/util/formatters/lua.test.ts
index cc9d29e4b..2c67246b3 100644
--- a/src/frontend/js/lib/util/formatters/lua.test.ts
+++ b/src/frontend/js/lib/util/formatters/lua.test.ts
@@ -1,4 +1,4 @@
-/// <reference types="jest" />
+import { describe, it, expect } from '@jest/globals';
 import { LUA } from './lua';
 
 describe('LUA tests', () => {
@@ -35,4 +35,4 @@ describe('LUA tests', () => {
     it('Should return string with value', () => {
         expect(LUA`${new TestObject()}`).toBe('test');
     });
-});
\ No newline at end of file
+});
diff --git a/src/frontend/js/lib/util/formatters/markdown.test.ts b/src/frontend/js/lib/util/formatters/markdown.test.ts
index dacbed8d8..67a1db934 100644
--- a/src/frontend/js/lib/util/formatters/markdown.test.ts
+++ b/src/frontend/js/lib/util/formatters/markdown.test.ts
@@ -1,3 +1,4 @@
+import { describe, it, expect } from '@jest/globals';
 import { MarkDown } from './markdown';
 
 describe('Markdown formatter tests', () => {
diff --git a/src/frontend/js/lib/util/mapper/formdataMapper.test.ts b/src/frontend/js/lib/util/mapper/formdataMapper.test.ts
index ab50d2e4c..ee5f56211 100644
--- a/src/frontend/js/lib/util/mapper/formdataMapper.test.ts
+++ b/src/frontend/js/lib/util/mapper/formdataMapper.test.ts
@@ -1,3 +1,4 @@
+import { describe, it, expect } from '@jest/globals';
 import { formdataMapper } from './formdataMapper';
 
 describe('Basic formdata mapper tests', () => {
diff --git a/src/frontend/js/lib/util/mapper/mapper.test.ts b/src/frontend/js/lib/util/mapper/mapper.test.ts
index c44dd815d..0093d3e8c 100644
--- a/src/frontend/js/lib/util/mapper/mapper.test.ts
+++ b/src/frontend/js/lib/util/mapper/mapper.test.ts
@@ -1,3 +1,4 @@
+import { describe, it, expect } from '@jest/globals';
 import { map } from './mapper';
 
 describe('mapper', () => {
diff --git a/src/frontend/js/lib/util/storageProvider/lib/storageProvider.test.ts b/src/frontend/js/lib/util/storageProvider/lib/storageProvider.test.ts
index 4a497eab0..d1b93d78d 100644
--- a/src/frontend/js/lib/util/storageProvider/lib/storageProvider.test.ts
+++ b/src/frontend/js/lib/util/storageProvider/lib/storageProvider.test.ts
@@ -59,7 +59,7 @@ describe('StorageProvider', () => {
         await expect(storage.getItem('key')).resolves.toBe(undefined);
     });
 
-    it('should set multipe key value pairs on the same instance', async () => {
+    it('should set multiple key value pairs on the same instance', async () => {
         const storage = new StorageProvider('test', localStorage);
         await expect(storage.setItem('key1', 'value1')).resolves.toBeUndefined();
         await expect(storage.setItem('key2', 'value2')).resolves.toBeUndefined();
diff --git a/src/frontend/js/lib/util/typeahead/lib/TypeaheadBuilder.test.ts b/src/frontend/js/lib/util/typeahead/lib/TypeaheadBuilder.test.ts
index 8bc4680e4..a47d4e874 100644
--- a/src/frontend/js/lib/util/typeahead/lib/TypeaheadBuilder.test.ts
+++ b/src/frontend/js/lib/util/typeahead/lib/TypeaheadBuilder.test.ts
@@ -1,4 +1,5 @@
 import { TypeaheadBuilder } from './TypeaheadBuilder';
+import { describe, it, expect } from '@jest/globals';
 
 describe('builder', () => {
     it('should error on the typeahead input not being set', () => {
diff --git a/src/frontend/js/lib/util/upload/UploadControl.test.ts b/src/frontend/js/lib/util/upload/UploadControl.test.ts
index 94b02c3b7..dcbaf80eb 100644
--- a/src/frontend/js/lib/util/upload/UploadControl.test.ts
+++ b/src/frontend/js/lib/util/upload/UploadControl.test.ts
@@ -1,7 +1,5 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import { describe, it, expect } from '@jest/globals';
+import { describe, it, expect, beforeEach, afterEach, jest } from '@jest/globals';
 import { Uploader, XmlHttpRequestLike } from './UploadControl';
-/* @ts-ignore */
 import { initGlobals, MockXhr } from 'testing/globals.definitions';
 
 describe('UploadControl', () => {
diff --git a/yarn.lock b/yarn.lock
index 1a8464b93..2dc39fe9f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -717,8 +717,6 @@
   version "7.27.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.27.1.tgz#84c7341ebde35ccd36b137e9e45866825072a30c"
   integrity sha512-txEAEKzYrHEX4xSZN4kJ+OfKXFVSWKB2ZxM9dpcE3wT7smwkNmXo5ORRlVzMVdJbD+Q8ILTgSD7959uj+3Dm3Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.27.1"
 
 "@babel/plugin-transform-optional-chaining@^7.27.1", "@babel/plugin-transform-optional-chaining@^7.28.5":
   version "7.28.5"
@@ -3014,9 +3012,9 @@ camelcase@^6.2.0:
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
 caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001587, caniuse-lite@^1.0.30001754:
-  version "1.0.30001759"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001759.tgz"
-  integrity sha512-Pzfx9fOKoKvevQf8oCXoyNRQ5QyxJj+3O0Rqx2V5oxT61KGx8+n6hV/IUyJeifUci2clnmmKVpvtiqRzgiWjSw==
+  version "1.0.30001757"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001757.tgz#a46ff91449c69522a462996c6aac4ef95d7ccc5e"
+  integrity sha512-r0nnL/I28Zi/yjk1el6ilj27tKcdjLsNqAOZr0yVjWPrSQyHgKI2INaEWw21bAQSv2LXRt1XuCS/GomNpWOxsQ==
 
 caseless@~0.12.0:
   version "0.12.0"

From 00e7d209b5c607ee4ece23e7d2f40f3b988a3415 Mon Sep 17 00:00:00 2001
From: Dave Roberts <d.roberts@ctrlo.com>
Date: Wed, 16 Jul 2025 14:35:48 +0100
Subject: [PATCH 03/10] Formatted test and config code and updated test files

Also removed extra yarn commands that weren't needed, and automated download of browserslist updates on build.
---
 yarn.lock | 35 +++++++++++++++++++++++++++++++----
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 2dc39fe9f..1d3d8c4b2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -219,12 +219,22 @@
     "@babel/traverse" "^7.27.1"
     "@babel/types" "^7.27.1"
 
-"@babel/helper-string-parser@^7.23.4", "@babel/helper-string-parser@^7.27.1":
+"@babel/helper-string-parser@^7.23.4":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz#f99c36d3593db9540705d0739a1f10b5e20c696e"
+  integrity sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==
+
+"@babel/helper-string-parser@^7.27.1":
   version "7.27.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz#54da796097ab19ce67ed9f88b47bb2ec49367687"
   integrity sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==
 
-"@babel/helper-validator-identifier@^7.22.20", "@babel/helper-validator-identifier@^7.25.9", "@babel/helper-validator-identifier@^7.27.1", "@babel/helper-validator-identifier@^7.28.5":
+"@babel/helper-validator-identifier@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
+  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
+
+"@babel/helper-validator-identifier@^7.25.9", "@babel/helper-validator-identifier@^7.27.1", "@babel/helper-validator-identifier@^7.28.5":
   version "7.28.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz#010b6938fab7cb7df74aa2bbc06aa503b8fe5fb4"
   integrity sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==
@@ -243,7 +253,16 @@
     "@babel/traverse" "^7.28.3"
     "@babel/types" "^7.28.2"
 
-"@babel/helpers@^7.24.1", "@babel/helpers@^7.28.4":
+"@babel/helpers@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.24.1.tgz#183e44714b9eba36c3038e442516587b1e0a1a94"
+  integrity sha512-BpU09QqEe6ZCHuIHFphEFgvNSrubve1FtyMton26ekZ85gRGi6LrTF7zArARp2YvyFxloeiRmtSCq5sjh1WqIg==
+  dependencies:
+    "@babel/template" "^7.24.0"
+    "@babel/traverse" "^7.24.1"
+    "@babel/types" "^7.24.0"
+
+"@babel/helpers@^7.28.4":
   version "7.28.4"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.28.4.tgz#fe07274742e95bdf7cf1443593eeb8926ab63827"
   integrity sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==
@@ -1050,7 +1069,15 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.24.0", "@babel/types@^7.27.1", "@babel/types@^7.27.3", "@babel/types@^7.28.2", "@babel/types@^7.28.4", "@babel/types@^7.28.5", "@babel/types@^7.4.4":
+"@babel/types@^7.22.5":
+  version "7.29.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.29.0.tgz#9f5b1e838c446e72cf3cd4b918152b8c605e37c7"
+  integrity sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==
+  dependencies:
+    "@babel/helper-string-parser" "^7.27.1"
+    "@babel/helper-validator-identifier" "^7.28.5"
+
+"@babel/types@^7.24.0", "@babel/types@^7.27.1", "@babel/types@^7.27.3", "@babel/types@^7.28.2", "@babel/types@^7.28.5", "@babel/types@^7.4.4":
   version "7.28.5"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.28.5.tgz#10fc405f60897c35f07e85493c932c7b5ca0592b"
   integrity sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==

From 71181362cd19b773dbb41c16d8d686d4b9982341 Mon Sep 17 00:00:00 2001
From: Dave Roberts <d.roberts@ctrlo.com>
Date: Tue, 2 Dec 2025 15:06:15 +0000
Subject: [PATCH 04/10] Updated error handler

---
 eslint.config.mjs |  2 +-
 package.json      |  4 +++-
 yarn.lock         | 35 ++++-------------------------------
 3 files changed, 8 insertions(+), 33 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 62c1c1a35..b479d4547 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -8,7 +8,7 @@ import stylistic from "@stylistic/eslint-plugin";
 
 export default defineConfig([
     { settings: { react: { version: "detect" } } },
-    { ignores: ["*.cjs", "eslint.config.mjs", "**/public/**", "**/node_modules/**", "**/cypress/**", "cypress.config.ts", ".stylelintrc.js", "src/frontend/testing/**", "src/frontend/css/stylesheets/external/**", "src/frontend/components/dashboard/lib/react/polyfills/**", "babel.config.js", "webpack.config.js", "jest.config.js", "tsconfig.json", "src/frontend/js/lib/jqplot/**", "src/frontend/js/lib/jquery/**", "src/frontend/js/lib/plotly/**", "src/frontend/components/timeline/**", "fengari-web.js"] },
+    { ignores: ["eslint.config.mjs", "**/public/**", "**/node_modules/**", "**/cypress/**", "cypress.config.ts", ".stylelintrc.js", "src/frontend/testing/**", "src/frontend/css/stylesheets/external/**", "src/frontend/components/dashboard/lib/react/polyfills/**", "babel.config.js", "webpack.config.js", "jest.config.js", "tsconfig.json", "src/frontend/js/lib/jqplot/**", "src/frontend/js/lib/jquery/**", "src/frontend/js/lib/plotly/**", "src/frontend/components/timeline/**", "fengari-web.js"] },
     { files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], plugins: { js }, extends: ["js/recommended"] },
     { files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], languageOptions: { globals: { ...globals.browser, ...globals.jquery } } },
     tseslint.configs.recommended,
diff --git a/package.json b/package.json
index 15a20e78d..00b471fd8 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,9 @@
     "test": "jest",
     "build:dev": "webpack --env development --progress -w",
     "test:watch": "jest --watch",
-    "e2e": "yarn cypress run"
+    "e2e": "yarn cypress run",
+    "prebuild": "npx update-browserslist-db@latest",
+    "pretest": "npx update-browserslist-db@latest"
   },
   "dependencies": {
     "@egjs/hammerjs": "^2.0.0",
diff --git a/yarn.lock b/yarn.lock
index 1d3d8c4b2..2dc39fe9f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -219,22 +219,12 @@
     "@babel/traverse" "^7.27.1"
     "@babel/types" "^7.27.1"
 
-"@babel/helper-string-parser@^7.23.4":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz#f99c36d3593db9540705d0739a1f10b5e20c696e"
-  integrity sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==
-
-"@babel/helper-string-parser@^7.27.1":
+"@babel/helper-string-parser@^7.23.4", "@babel/helper-string-parser@^7.27.1":
   version "7.27.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz#54da796097ab19ce67ed9f88b47bb2ec49367687"
   integrity sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==
 
-"@babel/helper-validator-identifier@^7.22.20":
-  version "7.22.20"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
-  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
-
-"@babel/helper-validator-identifier@^7.25.9", "@babel/helper-validator-identifier@^7.27.1", "@babel/helper-validator-identifier@^7.28.5":
+"@babel/helper-validator-identifier@^7.22.20", "@babel/helper-validator-identifier@^7.25.9", "@babel/helper-validator-identifier@^7.27.1", "@babel/helper-validator-identifier@^7.28.5":
   version "7.28.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz#010b6938fab7cb7df74aa2bbc06aa503b8fe5fb4"
   integrity sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==
@@ -253,16 +243,7 @@
     "@babel/traverse" "^7.28.3"
     "@babel/types" "^7.28.2"
 
-"@babel/helpers@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.24.1.tgz#183e44714b9eba36c3038e442516587b1e0a1a94"
-  integrity sha512-BpU09QqEe6ZCHuIHFphEFgvNSrubve1FtyMton26ekZ85gRGi6LrTF7zArARp2YvyFxloeiRmtSCq5sjh1WqIg==
-  dependencies:
-    "@babel/template" "^7.24.0"
-    "@babel/traverse" "^7.24.1"
-    "@babel/types" "^7.24.0"
-
-"@babel/helpers@^7.28.4":
+"@babel/helpers@^7.24.1", "@babel/helpers@^7.28.4":
   version "7.28.4"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.28.4.tgz#fe07274742e95bdf7cf1443593eeb8926ab63827"
   integrity sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==
@@ -1069,15 +1050,7 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.22.5":
-  version "7.29.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.29.0.tgz#9f5b1e838c446e72cf3cd4b918152b8c605e37c7"
-  integrity sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==
-  dependencies:
-    "@babel/helper-string-parser" "^7.27.1"
-    "@babel/helper-validator-identifier" "^7.28.5"
-
-"@babel/types@^7.24.0", "@babel/types@^7.27.1", "@babel/types@^7.27.3", "@babel/types@^7.28.2", "@babel/types@^7.28.5", "@babel/types@^7.4.4":
+"@babel/types@^7.24.0", "@babel/types@^7.27.1", "@babel/types@^7.27.3", "@babel/types@^7.28.2", "@babel/types@^7.28.4", "@babel/types@^7.28.5", "@babel/types@^7.4.4":
   version "7.28.5"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.28.5.tgz#10fc405f60897c35f07e85493c932c7b5ca0592b"
   integrity sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==

From 834b9ca6b81f38b1283c3f14ccdb8813511a34cf Mon Sep 17 00:00:00 2001
From: Dave Roberts <d.roberts@ctrlo.com>
Date: Thu, 17 Jul 2025 12:09:37 +0100
Subject: [PATCH 05/10] Formatted and changed code with ESLint fixes -
 functionality has not changed

Removed cjs from eslint - cjs are used for internal development files, and should never be included
---
 eslint.config.mjs                             |  21 +-
 package.json                                  |   1 +
 .../components/alert/lib/alertBase.ts         |   3 +
 .../components/alert/lib/dangerAlert.ts       |   3 +
 .../components/alert/lib/infoAlert.ts         |   3 +
 .../components/alert/lib/successAlert.ts      |   3 +
 .../components/alert/lib/warningAlert.ts      |   3 +
 .../components/button/lib/RenderableButton.ts |  14 +
 .../components/button/lib/cancel-button.ts    |   7 +-
 src/frontend/components/button/lib/common.ts  |  19 +-
 .../components/button/lib/component.ts        |   6 +-
 .../components/button/lib/delete-button.ts    |   4 +-
 .../button/lib/remove-curval-button.test.js   |   2 +-
 .../button/lib/remove-curval-button.ts        |   2 +-
 .../button/lib/remove-unload-button.ts        |   2 +-
 .../components/button/lib/rename-button.ts    |   5 +
 .../components/button/lib/save-view-button.ts |   5 +-
 .../button/lib/show-blank-button.test.ts      |   2 +-
 .../button/lib/show-blank-button.ts           |   4 +-
 .../button/lib/submit-draft-record-button.ts  |   2 +-
 .../button/lib/submit-field-button.test.ts    |   3 +
 .../button/lib/submit-field-button.ts         |  15 +-
 .../button/lib/submit-record-button.ts        |   2 +-
 .../button/lib/toggle-all-fields-button.ts    |   2 +-
 .../components/calculator/lib/component.js    |  13 +
 src/frontend/components/card/lib/component.js |  28 +-
 .../components/collapsible/lib/component.js   |  14 +
 .../collapsible/lib/component.test.ts         |   2 +-
 .../dashboard-graph/lib/component.js          |  10 +
 .../components/dashboard/lib/component.js     |  10 +
 .../components/dashboard/lib/react/Footer.tsx |  12 +-
 .../components/dashboard/lib/react/Header.tsx |  12 +-
 .../components/dashboard/lib/react/Widget.tsx |  13 +-
 .../components/dashboard/lib/react/api.tsx    | 112 ++++++--
 .../components/dashboard/lib/react/app.tsx    |  23 +-
 .../components/data-table/lib/component.js    | 259 +++++++++++++++---
 .../components/data-table/lib/helper.js       |  20 ++
 .../components/data-table/lib/helper.test.ts  |   2 +-
 .../components/data-table/lib/toggle-table.js |  26 +-
 .../components/datepicker/lib/helper.js       |   4 +
 .../form-group/autosave/lib/autosave.test.ts  |   2 +-
 .../form-group/autosave/lib/autosaveBase.ts   |  27 +-
 .../form-group/autosave/lib/component.js      |   1 -
 .../form-group/autosave/lib/modal.js          |   4 +-
 .../form-group/calc-fields/lib/component.js   |  18 ++
 .../form-group/checkbox/lib/component.js      |  16 +-
 .../form-group/common/bootstrap-select.js     |   6 +-
 .../dependent-fields/lib/component.js         |  29 +-
 .../display-conditions/lib/component.js       |  10 +
 .../form-group/filter/lib/component.js        |  42 +++
 .../input/lib/autocompleteComponent.ts        |  18 ++
 .../form-group/input/lib/component.ts         |  28 +-
 .../form-group/input/lib/dateComponent.ts     |  14 +
 .../form-group/input/lib/documentComponent.ts |  80 +++++-
 .../form-group/input/lib/fileComponent.ts     |  27 +-
 .../form-group/input/lib/logoComponent.ts     |  18 ++
 .../form-group/input/lib/passwordComponent.ts |  17 ++
 .../multiple-select/lib/component.js          |  25 ++
 .../form-group/people-filter/lib/component.ts |  49 ++++
 .../form-group/radio-group/lib/component.js   |   7 +
 .../form-group/select-widget/lib/component.js |  85 +++++-
 .../form-group/select/lib/component.js        |  82 +++++-
 .../form-group/textarea/lib/component.js      |  12 +
 .../form-group/tree/lib/component.js          |  50 +++-
 .../form-group/value-lookup/lib/component.js  |  33 ++-
 .../components/globe/lib/component.js         |  10 +
 src/frontend/components/graph/lib/chart.js    |  14 +
 .../components/graph/lib/component.js         |  30 ++
 .../help-view/lib/component.test.ts           |   2 +-
 .../components/help-view/lib/component.ts     |  11 +-
 .../components/markdown/lib/component.js      |  16 ++
 .../components/modal/lib/component.js         | 192 +++++++++++--
 src/frontend/components/modal/lib/frame.js    |   9 +
 src/frontend/components/modal/lib/modal.js    |  78 ++++--
 .../modal/modals/curval/lib/component.js      |  60 +++-
 .../modal/modals/new-table/lib/component.js   | 112 +++++++-
 .../modal/modals/user/lib/component.js        |  45 ++-
 .../components/more-less/lib/component.js     |  38 ++-
 .../more-less/lib/disclosure-widgets.js       |  29 ++
 .../components/more-less/lib/more-less.js     |  24 +-
 .../components/popover/lib/component.js       |  20 +-
 .../components/record-popup/lib/component.js  |  14 +
 .../components/select-all/lib/component.ts    |  16 +-
 .../components/sidebar/lib/component.js       |  26 ++
 .../sidebar/lib/sidebarObservable.js          |  13 +
 .../components/sortable/lib/component.js      |  25 ++
 .../orderable-sortable/lib/component.js       |  19 ++
 .../components/summernote/lib/component.js    |  15 +
 src/frontend/js/lib/component.js              |  45 +--
 src/frontend/js/lib/get-field-values.js       |  16 +-
 src/frontend/js/lib/guid.js                   |   5 +
 src/frontend/js/lib/logging.js                |  25 +-
 src/frontend/js/lib/set-field-value.test.ts   |  18 +-
 src/frontend/js/lib/set-field-values.js       |  56 +++-
 .../util/actionsHandler/lib/actionsLoader.ts  |   4 +-
 .../lib/clearAutorecoverAction.ts             |   5 +-
 .../js/lib/util/actionsHandler/lib/handler.ts |   4 +-
 src/frontend/js/lib/util/common.test.ts       |   5 +-
 src/frontend/js/lib/util/common.ts            |  13 +
 .../lib/util/domutils/lib/elementFactory.ts   |   8 +-
 .../lib/encryptedStorage.test.ts              |  13 +-
 .../encryptedStorage/lib/encryptedStorage.ts  |  42 ++-
 .../js/lib/util/encryption/lib/encryption.ts  |  20 +-
 .../lib/util/errorHandler/lib/errorHandler.ts |  22 +-
 .../js/lib/util/filedrag/lib/filedrag.test.ts |   2 +-
 .../js/lib/util/filedrag/lib/filedrag.ts      |  32 +++
 .../js/lib/util/formatters/lua.test.ts        |   2 +
 src/frontend/js/lib/util/formatters/lua.ts    |   6 +-
 .../js/lib/util/formatters/markdown.ts        |   6 +
 .../util/gadsStorage/lib/AppStorage.test.ts   |  10 +-
 .../js/lib/util/gadsStorage/lib/AppStorage.ts |   4 +
 .../util/gadsStorage/lib/GadsStorage.test.ts  | 181 ++++++------
 .../lib/util/gadsStorage/lib/GadsStorage.ts   |  30 +-
 .../js/lib/util/mapper/formdataMapper.test.ts |   1 -
 .../js/lib/util/mapper/formdataMapper.ts      |  11 +-
 src/frontend/js/lib/util/mapper/mapper.ts     |  15 +-
 .../lib/MessageUploader.test.ts               |   1 +
 .../scriptErrorHandler/lib/MessageUploader.ts |  16 ++
 .../lib/storageProvider.test.ts               |   2 +-
 .../storageProvider/lib/storageProvider.ts    |  39 ++-
 .../js/lib/util/typeahead/lib/Typeahead.ts    |  23 +-
 .../typeahead/lib/TypeaheadBuilder.test.ts    |   1 -
 .../util/typeahead/lib/TypeaheadBuilder.ts    |  83 +++---
 .../typeahead/lib/TypeaheadSourceOptions.ts   |  13 +
 .../js/lib/util/upload/UploadControl.test.ts  |   4 +-
 .../js/lib/util/upload/UploadControl.ts       |  27 +-
 src/frontend/js/lib/validation.js             |  65 ++++-
 src/frontend/testing/globals.definitions.ts   |   2 +-
 yarn.lock                                     |  89 +++++-
 129 files changed, 2599 insertions(+), 578 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index b479d4547..b402bafb9 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -5,16 +5,17 @@ import pluginReact from "eslint-plugin-react";
 import css from "@eslint/css";
 import { defineConfig } from "eslint/config";
 import stylistic from "@stylistic/eslint-plugin";
+import jsdoc from "eslint-plugin-jsdoc";
 
 export default defineConfig([
     { settings: { react: { version: "detect" } } },
-    { ignores: ["eslint.config.mjs", "**/public/**", "**/node_modules/**", "**/cypress/**", "cypress.config.ts", ".stylelintrc.js", "src/frontend/testing/**", "src/frontend/css/stylesheets/external/**", "src/frontend/components/dashboard/lib/react/polyfills/**", "babel.config.js", "webpack.config.js", "jest.config.js", "tsconfig.json", "src/frontend/js/lib/jqplot/**", "src/frontend/js/lib/jquery/**", "src/frontend/js/lib/plotly/**", "src/frontend/components/timeline/**", "fengari-web.js"] },
+    { ignores: ["*.cjs", "eslint.config.mjs", "**/public/**", "**/node_modules/**", "**/cypress/**", "cypress.config.ts", ".stylelintrc.js", "src/frontend/testing/**", "src/frontend/css/stylesheets/external/**", "src/frontend/components/dashboard/lib/react/polyfills/**", "babel.config.js", "webpack.config.js", "jest.config.js", "tsconfig.json", "src/frontend/js/lib/jqplot/**", "src/frontend/js/lib/jquery/**", "src/frontend/js/lib/plotly/**", "src/frontend/components/timeline/**", "fengari-web.js"] },
     { files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], plugins: { js }, extends: ["js/recommended"] },
-    { files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], languageOptions: { globals: { ...globals.browser, ...globals.jquery } } },
+    { files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], languageOptions: { globals: { ...globals.browser, ...globals.jquery, ...globals.jest } } },
     tseslint.configs.recommended,
     pluginReact.configs.flat.recommended,
     { files: ["**/*.css"], plugins: { css }, language: "css/css", extends: ["css/recommended"] },
-    { plugins: {'@stylistic': stylistic} },
+    { plugins: {'@stylistic': stylistic, jsdoc} },
     {
         rules: {
             "@typescript-eslint/no-explicit-any": "off",
@@ -25,7 +26,19 @@ export default defineConfig([
             '@stylistic/semi': ['error', 'always'],
             '@stylistic/curly-newline': 'error',
             '@stylistic/indent': ['error', 4],
-            '@stylistic/comma-dangle': ['error', 'never']
+            '@stylistic/comma-dangle': ['error', 'never'],
+            "jsdoc/require-jsdoc": [
+                "error",
+                {
+                    require: {
+                        FunctionDeclaration: true,
+                        MethodDefinition: true,
+                        ClassDeclaration: true,
+                        ArrowFunctionExpression: false,
+                        FunctionExpression: false
+                    }
+                }
+            ],
         }
     }
 ]);
diff --git a/package.json b/package.json
index 00b471fd8..2bd6bc20f 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "css-loader": "^3.2.0",
     "cypress": "^13.7.2",
     "eslint": "^9.31.0",
+    "eslint-plugin-jsdoc": "^52.0.0",
     "eslint-plugin-react": "^7.37.5",
     "globals": "^16.3.0",
     "jest": "^29.7.0",
diff --git a/src/frontend/components/alert/lib/alertBase.ts b/src/frontend/components/alert/lib/alertBase.ts
index 9f5b0c617..d9550dfb9 100644
--- a/src/frontend/components/alert/lib/alertBase.ts
+++ b/src/frontend/components/alert/lib/alertBase.ts
@@ -1,6 +1,9 @@
 import { Hidable, Renderable } from 'util/renderable';
 import { AlertType } from './types';
 
+/**
+ * Base class for alert components that can be rendered to the DOM and hidden when necessary.
+ */
 export abstract class AlertBase extends Hidable implements Renderable<HTMLDivElement> {
     /**
      * Create an instance of AlertBase.
diff --git a/src/frontend/components/alert/lib/dangerAlert.ts b/src/frontend/components/alert/lib/dangerAlert.ts
index 177af9e96..8007d12d6 100644
--- a/src/frontend/components/alert/lib/dangerAlert.ts
+++ b/src/frontend/components/alert/lib/dangerAlert.ts
@@ -1,5 +1,8 @@
 import { AlertBase } from './alertBase';
 
+/**
+ * A danger alert component that extends the AlertBase class.
+ */
 export class DangerAlert extends AlertBase {
     /**
      * Create an instance of InfoAlert.
diff --git a/src/frontend/components/alert/lib/infoAlert.ts b/src/frontend/components/alert/lib/infoAlert.ts
index 1981226b1..f27a11902 100644
--- a/src/frontend/components/alert/lib/infoAlert.ts
+++ b/src/frontend/components/alert/lib/infoAlert.ts
@@ -1,5 +1,8 @@
 import { AlertBase } from './alertBase';
 
+/**
+ * An info alert component that extends the AlertBase class.
+ */
 export class InfoAlert extends AlertBase {
     /**
      * Create an instance of InfoAlert.
diff --git a/src/frontend/components/alert/lib/successAlert.ts b/src/frontend/components/alert/lib/successAlert.ts
index 4f8965244..273d42333 100644
--- a/src/frontend/components/alert/lib/successAlert.ts
+++ b/src/frontend/components/alert/lib/successAlert.ts
@@ -1,5 +1,8 @@
 import { AlertBase } from './alertBase';
 
+/**
+ * A success alert component that extends the AlertBase class.
+ */
 export class SuccessAlert extends AlertBase {
     /**
      * Create an instance of InfoAlert.
diff --git a/src/frontend/components/alert/lib/warningAlert.ts b/src/frontend/components/alert/lib/warningAlert.ts
index 665ce6028..4b86e7b72 100644
--- a/src/frontend/components/alert/lib/warningAlert.ts
+++ b/src/frontend/components/alert/lib/warningAlert.ts
@@ -1,5 +1,8 @@
 import { AlertBase } from './alertBase';
 
+/**
+ * A warning alert component that extends the AlertBase class.
+ */
 export class WarningAlert extends AlertBase {
     /**
      * Create an instance of InfoAlert.
diff --git a/src/frontend/components/button/lib/RenderableButton.ts b/src/frontend/components/button/lib/RenderableButton.ts
index 221f12045..c22778eb0 100644
--- a/src/frontend/components/button/lib/RenderableButton.ts
+++ b/src/frontend/components/button/lib/RenderableButton.ts
@@ -1,12 +1,26 @@
 import { Renderable } from 'util/renderable';
 
+/**
+ * A simple button component that can be rendered to the DOM.
+ * It accepts text, an onClick handler, and optional CSS classes.
+ */
 export class RenderableButton implements Renderable<HTMLButtonElement> {
     classList: string[] = [];
 
+    /**
+     * Create a new RenderableButton.
+     * @param text The button text
+     * @param onClick The click event to fire when the button is clicked
+     * @param classList Any classes to add to the button
+     */
     constructor(private readonly text: string, private readonly onClick: (ev: MouseEvent)=>void, ...classList: string[]) {
         this.classList = classList;
     }
 
+    /**
+     * Render the button to the DOM.
+     * @returns A button to add to the DOM
+     */
     render(): HTMLButtonElement {
         const button = document.createElement('button');
         button.textContent = this.text;
diff --git a/src/frontend/components/button/lib/cancel-button.ts b/src/frontend/components/button/lib/cancel-button.ts
index d7c7186a2..c9ba511cd 100644
--- a/src/frontend/components/button/lib/cancel-button.ts
+++ b/src/frontend/components/button/lib/cancel-button.ts
@@ -1,5 +1,10 @@
 import { clearSavedFormValues } from './common';
 
+/**
+ * Create a cancel button that navigates away from the page
+ * This component will navigate away to the parameter defined in the data-href attribute, or will navigate back
+ * @param { HTMLElement | JQuery<HTMLElement> } el The button element
+ */
 export default function createCancelButton(el: HTMLElement | JQuery<HTMLElement>) {
     const $el = $(el);
     if ($el[0].tagName !== 'BUTTON') return;
@@ -12,4 +17,4 @@ export default function createCancelButton(el: HTMLElement | JQuery<HTMLElement>
         else
             window.history.back();
     });
-}
\ No newline at end of file
+}
diff --git a/src/frontend/components/button/lib/common.ts b/src/frontend/components/button/lib/common.ts
index 90a277767..970a97fec 100644
--- a/src/frontend/components/button/lib/common.ts
+++ b/src/frontend/components/button/lib/common.ts
@@ -2,7 +2,6 @@ import StorageProvider from 'util/storageProvider';
 
 /**
  * Clear all saved form values for the current record
- * @param $form The form to clear the data for
  */
 export async function clearSavedFormValues() {
     const ls = storage();
@@ -13,33 +12,33 @@ export async function clearSavedFormValues() {
 
 /**
  * Get the layout identifier from the body data
- * @returns The layout identifier
+ * @returns { number } The layout identifier
  */
-export function layoutId() {
+export function layoutId(): number {
     return $('body').data('layout-identifier');
 }
 
 /**
  * Get the record identifier from the body data
- * @returns The record identifier
+ * @returns { number } The record identifier
  */
-export function recordId() {
+export function recordId(): number {
     return $('body').find('.form-edit')
         .data('current-id') || 0;
 }
 
 /**
  * Get the key for the table used for saving form values
- * @returns The key for the table
+ * @returns {string} The key for the table
  */
-export function table_key() {
+export function table_key(): string {
     return `linkspace-record-change-${layoutId()}-${recordId()}`;
 }
 
 /**
  * Get the storage object - this originally was used in debugging to allow for the storage object to be mocked
- * @returns The storage object
+ * @returns { StorageProvider } The storage object
  */
-export function storage() {
+export function storage(): StorageProvider {
     return new StorageProvider(table_key());
-}
\ No newline at end of file
+}
diff --git a/src/frontend/components/button/lib/component.ts b/src/frontend/components/button/lib/component.ts
index 420de8074..1e5ae7768 100644
--- a/src/frontend/components/button/lib/component.ts
+++ b/src/frontend/components/button/lib/component.ts
@@ -2,7 +2,6 @@ import {Component} from 'component';
 
 /**
  * Button component
- * @extends Component
  */
 class ButtonComponent extends Component {
     /**
@@ -19,6 +18,7 @@ class ButtonComponent extends Component {
 
     /**
      * Get the map of button components
+     * @returns {Map<string, (element: JQuery<HTMLElement>) => void>} The map of button components
      */
     private get buttonsMap(): Map<string, (element: JQuery<HTMLElement>) => void> {
         if (!ButtonComponent.staticButtonsMap) ButtonComponent.initMap();
@@ -27,7 +27,7 @@ class ButtonComponent extends Component {
 
     /**
      * Create a button component
-     * @param element {HTMLElement} The button element
+     * @param { HTMLElement } element The button element
      */
     constructor(element: HTMLElement) {
         super(element);
@@ -116,7 +116,7 @@ class ButtonComponent extends Component {
 
     /**
      * Initialize the button
-     * @param element {HTMLElement} The button element
+     * @param {HTMLElement} element The button element
      */
     private initButton(element: HTMLElement) {
         const el: JQuery<HTMLElement> = $(element);
diff --git a/src/frontend/components/button/lib/delete-button.ts b/src/frontend/components/button/lib/delete-button.ts
index a0ff639eb..a947171d2 100644
--- a/src/frontend/components/button/lib/delete-button.ts
+++ b/src/frontend/components/button/lib/delete-button.ts
@@ -1,10 +1,8 @@
-// noinspection ExceptionCaughtLocallyJS
-
 import { logging } from 'logging';
 
 /**
  * Create delete button
- * @param element {JQuery<HTMLElement>} - Element to act as a delete button
+ * @param {JQuery<HTMLElement>} element Element to act as a delete button
  */
 export default function createDeleteButton(element: JQuery<HTMLElement>) {
     element.on('click', (ev) => {
diff --git a/src/frontend/components/button/lib/remove-curval-button.test.js b/src/frontend/components/button/lib/remove-curval-button.test.js
index 5d854852c..a22dd35f8 100644
--- a/src/frontend/components/button/lib/remove-curval-button.test.js
+++ b/src/frontend/components/button/lib/remove-curval-button.test.js
@@ -61,4 +61,4 @@ describe('RemoveCurvalButton', () => {
         button.click();
         expect(current.children.length).toBe(0);
     });
-});
+});
\ No newline at end of file
diff --git a/src/frontend/components/button/lib/remove-curval-button.ts b/src/frontend/components/button/lib/remove-curval-button.ts
index 7d615bd19..3250be2bc 100644
--- a/src/frontend/components/button/lib/remove-curval-button.ts
+++ b/src/frontend/components/button/lib/remove-curval-button.ts
@@ -1,6 +1,6 @@
 /**
  * Create remove curval button
- * @param element {JQuery<HTMLElement>} - The element to function as a remove curval button
+ * @param {JQuery<HTMLElement>} element The element to function as a remove curval button
  */
 export default function createRemoveCurvalButton(element: JQuery<HTMLElement>) {
     element.on('click', (ev: JQuery.ClickEvent) => {
diff --git a/src/frontend/components/button/lib/remove-unload-button.ts b/src/frontend/components/button/lib/remove-unload-button.ts
index ddcd9adef..ffc6d39cd 100644
--- a/src/frontend/components/button/lib/remove-unload-button.ts
+++ b/src/frontend/components/button/lib/remove-unload-button.ts
@@ -1,6 +1,6 @@
 /**
  * Create a button that removes the unload event listener
- * @param element {JQuery<HTMLElement>} - The button element to add the click event to
+ * @param {JQuery<HTMLElement>} element The button element to add the click event to
  */
 export default function createRemoveUnloadButton(element: JQuery<HTMLElement>) {
     element.on('click', () => {
diff --git a/src/frontend/components/button/lib/rename-button.ts b/src/frontend/components/button/lib/rename-button.ts
index 023e5e611..09a205b1e 100644
--- a/src/frontend/components/button/lib/rename-button.ts
+++ b/src/frontend/components/button/lib/rename-button.ts
@@ -170,6 +170,11 @@ class RenameButton {
         this.hideRenameControls(id, button);
     }
 
+    /**
+     * Hides the rename controls
+     * @param {number} id The id of the field
+     * @param {JQuery<HTMLButtonElement>} button The button that was clicked
+     */
     private hideRenameControls(id: number, button: JQuery<HTMLButtonElement>) {
         $(`#current-${id}`).removeClass('hidden')
             .attr('aria-hidden', 'false');
diff --git a/src/frontend/components/button/lib/save-view-button.ts b/src/frontend/components/button/lib/save-view-button.ts
index 657522ab5..cb17960f3 100644
--- a/src/frontend/components/button/lib/save-view-button.ts
+++ b/src/frontend/components/button/lib/save-view-button.ts
@@ -2,7 +2,8 @@ import { validateRequiredFields } from 'validation';
 import '@lol768/jquery-querybuilder-no-eval';
 
 /**
- * SaveViewButtonComponent
+ * Button component for saving views for an instance.
+ * @param {JQuery<HTMLElement>} el The jQuery element that represents the Save View button.
  */
 export default function createSaveViewButtonComponent(el: JQuery<HTMLElement>) {
     const $form = el.closest('form');
@@ -34,4 +35,4 @@ export default function createSaveViewButtonComponent(el: JQuery<HTMLElement>) {
                 .val(JSON.stringify(res, null, 2));
         });
     });
-}
\ No newline at end of file
+}
diff --git a/src/frontend/components/button/lib/show-blank-button.test.ts b/src/frontend/components/button/lib/show-blank-button.test.ts
index ee0237e2a..3d13895ca 100644
--- a/src/frontend/components/button/lib/show-blank-button.test.ts
+++ b/src/frontend/components/button/lib/show-blank-button.test.ts
@@ -29,4 +29,4 @@ describe('ShowBlankButton', () => {
         button.trigger('click');
         expect(item.css('display')).toBe('none');
     });
-});
+});
\ No newline at end of file
diff --git a/src/frontend/components/button/lib/show-blank-button.ts b/src/frontend/components/button/lib/show-blank-button.ts
index 1a5346064..e668bc64d 100644
--- a/src/frontend/components/button/lib/show-blank-button.ts
+++ b/src/frontend/components/button/lib/show-blank-button.ts
@@ -1,6 +1,6 @@
 /**
  * Create a button that toggles the visibility of blank fields.
- * @param element {JQuery<HTMLElement>} The element to attach the button to.
+ * @param {JQuery<HTMLElement>} element The element to attach the button to.
  */
 export default function createShowBlankButton(element: JQuery<HTMLElement>) {
     element.on('click', (ev) => {
@@ -14,4 +14,4 @@ export default function createShowBlankButton(element: JQuery<HTMLElement>) {
             ? 'Hide blank values'
             : 'Show blank values';
     });
-}
\ No newline at end of file
+}
diff --git a/src/frontend/components/button/lib/submit-draft-record-button.ts b/src/frontend/components/button/lib/submit-draft-record-button.ts
index 540535a7b..0f6700592 100644
--- a/src/frontend/components/button/lib/submit-draft-record-button.ts
+++ b/src/frontend/components/button/lib/submit-draft-record-button.ts
@@ -2,7 +2,7 @@ import { clearSavedFormValues } from './common';
 
 /**
  * Create a submit draft record button
- * @param element {JQuery<HTMLElement>} The button element
+ * @param {JQuery<HTMLElement>} element The button element
  */
 export default function createSubmitDraftRecordButton(element: JQuery<HTMLElement>) {
     element.on('click', async (ev: JQuery.ClickEvent) => {
diff --git a/src/frontend/components/button/lib/submit-field-button.test.ts b/src/frontend/components/button/lib/submit-field-button.test.ts
index 420903408..ea0a4a3f3 100644
--- a/src/frontend/components/button/lib/submit-field-button.test.ts
+++ b/src/frontend/components/button/lib/submit-field-button.test.ts
@@ -1,4 +1,7 @@
 import { describe, it, expect, beforeEach } from '@jest/globals';
+/* eslint-disable jsdoc/require-jsdoc */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* @ts-ignore */
 import { initGlobals } from 'testing/globals.definitions';
 import SubmitFieldButtonComponent from './submit-field-button';
 
diff --git a/src/frontend/components/button/lib/submit-field-button.ts b/src/frontend/components/button/lib/submit-field-button.ts
index 5d39b5013..905c3885f 100644
--- a/src/frontend/components/button/lib/submit-field-button.ts
+++ b/src/frontend/components/button/lib/submit-field-button.ts
@@ -1,8 +1,7 @@
-/* eslint-disable */
-import "jstree";
-import "datatables.net";
-import "@lol768/jquery-querybuilder-no-eval";
-import { validateQueryBuilder } from "validation";
+import 'jstree';
+import 'datatables.net';
+import '@lol768/jquery-querybuilder-no-eval';
+import { validateQueryBuilder } from 'validation';
 
 declare global {
     interface Window {
@@ -25,7 +24,7 @@ export default class SubmitFieldButton {
 
     /**
      * Create a submit field button
-     * @param element The submit button element
+     * @param {JQuery<HTMLElement>} element The submit button element
      */
     constructor(element: JQuery<HTMLElement>) {
         element.on('click', (ev) => {
@@ -130,8 +129,8 @@ export default class SubmitFieldButton {
 
     /**
      * Get the URL for the tree API
-     * @param data The data for the tree
-     * @returns The URL for the tree API
+     * @param {JQuery.PlainObject} data The data for the tree
+     * @returns {string} The URL for the tree API
      */
     private getURL(data: JQuery.PlainObject): string {
         if (window.test) return '';
diff --git a/src/frontend/components/button/lib/submit-record-button.ts b/src/frontend/components/button/lib/submit-record-button.ts
index 71b0ae1d1..7cb42a193 100644
--- a/src/frontend/components/button/lib/submit-record-button.ts
+++ b/src/frontend/components/button/lib/submit-record-button.ts
@@ -10,7 +10,7 @@ export default class SubmitRecordButton {
 
     /**
      * Create a button to submit records
-     * @param el {JQuery<HTMLElement>} Element to create as a button
+     * @param {JQuery<HTMLElement>} el Element to create as a button
      */
     constructor(private el: JQuery<HTMLElement>) {
         this.el.on('click', async (ev: JQuery.ClickEvent) => {
diff --git a/src/frontend/components/button/lib/toggle-all-fields-button.ts b/src/frontend/components/button/lib/toggle-all-fields-button.ts
index 5caae265d..547e620e5 100644
--- a/src/frontend/components/button/lib/toggle-all-fields-button.ts
+++ b/src/frontend/components/button/lib/toggle-all-fields-button.ts
@@ -1,6 +1,6 @@
 /**
  * Toggles (switches) all fields from the source toggle table to the destination toggle table
- * @param element {JQuery<HTMLElement>} - The button element
+ * @param {JQuery<HTMLElement>} element The button element
  */
 export default function createToggleAllFieldsButton(element: JQuery<HTMLElement>) {
     element.on('click', (ev) => {
diff --git a/src/frontend/components/calculator/lib/component.js b/src/frontend/components/calculator/lib/component.js
index 068b80ce4..7dd9ef526 100644
--- a/src/frontend/components/calculator/lib/component.js
+++ b/src/frontend/components/calculator/lib/component.js
@@ -1,6 +1,14 @@
 import { Component } from 'component';
 
+/**
+ * CalculatorComponent class to handle calculator functionality in the UI.
+ * It initializes a calculator dropdown for input fields, allowing users to perform basic arithmetic operations.
+ */
 class CalculatorComponent extends Component {
+    /**
+     * Creates an instance of CalculatorComponent.
+     * @param {HTMLElement} element The element to be initialized as a calculator component.
+     */
     constructor(element) {
         super(element);
         this.el = $(this.element);
@@ -8,6 +16,11 @@ class CalculatorComponent extends Component {
         this.initCalculator();
     }
 
+    /**
+     * Initializes the calculator functionality by creating a dropdown
+     * with buttons for arithmetic operations and an input field for numbers.
+     * @todo This method should be refactored to improve readability and maintainability.
+     */
     initCalculator() {
         const selector = this.el.find('input:not([type="checkbox"])');
         const $nodes = this.el.find('label:not(.checkbox-label)');
diff --git a/src/frontend/components/card/lib/component.js b/src/frontend/components/card/lib/component.js
index 398a5c3f1..1bab1d970 100644
--- a/src/frontend/components/card/lib/component.js
+++ b/src/frontend/components/card/lib/component.js
@@ -1,7 +1,15 @@
-import { Component } from 'component';
 import 'bootstrap';
+import { Component } from 'component';
 
+/**
+ * Creates an expandable card component.
+ */
 class ExpandableCardComponent extends Component {
+
+    /**
+     * Creates an instance of ExpandableCardComponent.
+     * @param {HTMLElement} element The HTML element to attach the component to.
+     */
     constructor(element) {
         super(element);
         this.$el = $(this.element);
@@ -14,6 +22,9 @@ class ExpandableCardComponent extends Component {
         }
     }
 
+    /**
+     * Initializes the expandable card functionality.
+     */
     initExpandableCard() {
         const $collapsibleElm = this.$el.find('.collapse');
         const $btnEdit = this.$el.find('.btn-js-edit');
@@ -65,6 +76,9 @@ class ExpandableCardComponent extends Component {
         });
     }
 
+    /**
+     * Initializes the topic card functionality.
+     */
     initTopicCard() {
         // Now that fields are shown/hidden on page load, for each topic check
         // whether it has zero displayed fields, in which case hide the whole
@@ -85,6 +99,10 @@ class ExpandableCardComponent extends Component {
         }
     }
 
+    /**
+     * Checks if the edit class can be removed from the content block.
+     * @returns {boolean} True if the edit class can be removed, false otherwise.
+     */
     canRemoveEditClass() {
         return !this.$contentBlock.find('.card--edit').length;
     }
@@ -98,10 +116,10 @@ class ExpandableCardComponent extends Component {
         return message;
     };
 
-    /*
-      In order to ensure headers on the view filter tables are the correct width, we need to remove any styling that has been added to the header elements.
-      And for some reason, using JQuery and DataTables, the styling is not reset as we expect it to be.
-    */
+    /**
+     * In order to ensure headers on the view filter tables are the correct width, we need to remove any styling that has been added to the header elements.
+     * And for some reason, using JQuery and DataTables, the styling is not reset as we expect it to be.
+     */
     clearupStyling() {
         const tables = $('.table-toggle');
         tables.removeAttr('style');
diff --git a/src/frontend/components/collapsible/lib/component.js b/src/frontend/components/collapsible/lib/component.js
index f228b8749..3a323a203 100644
--- a/src/frontend/components/collapsible/lib/component.js
+++ b/src/frontend/components/collapsible/lib/component.js
@@ -1,6 +1,13 @@
 import { Component } from 'component';
 
+/**
+ *
+ */
 class CollapsibleComponent extends Component {
+    /**
+     * Creates an instance of CollapsibleComponent.
+     * @param {HTMLElement} element The element to be initialized as a collapsible component.
+     */
     constructor(element) {
         super(element);
         this.el = $(this.element);
@@ -11,6 +18,10 @@ class CollapsibleComponent extends Component {
         this.initCollapsible(this.button);
     }
 
+    /**
+     * Initializes the collapsible component.
+     * @param {HTMLElement} button The button element that will toggle the collapsible content.
+     */
     initCollapsible(button) {
         if (!button) {
             return;
@@ -20,6 +31,9 @@ class CollapsibleComponent extends Component {
         button.click(() => { this.handleClick(); });
     }
 
+    /**
+     * Handles the click event on the collapsible button.
+     */
     handleClick() {
         this.titleExpanded.toggleClass('hidden');
         this.titleCollapsed.toggleClass('hidden');
diff --git a/src/frontend/components/collapsible/lib/component.test.ts b/src/frontend/components/collapsible/lib/component.test.ts
index d883d29c3..b2ac1af55 100644
--- a/src/frontend/components/collapsible/lib/component.test.ts
+++ b/src/frontend/components/collapsible/lib/component.test.ts
@@ -19,7 +19,7 @@ describe('Collapsible', () => {
             <div class="attention">Please make a secure note of this content now, as it will not be displayed again.</div>
             </div>
         </div>
-  `;
+        `;
     });
 
     afterEach(() => {
diff --git a/src/frontend/components/dashboard/dashboard-graph/lib/component.js b/src/frontend/components/dashboard/dashboard-graph/lib/component.js
index 7c4ace897..77d0cf46d 100644
--- a/src/frontend/components/dashboard/dashboard-graph/lib/component.js
+++ b/src/frontend/components/dashboard/dashboard-graph/lib/component.js
@@ -1,12 +1,22 @@
 import { do_plot_json } from '../../../graph/lib/chart';
 import GraphComponent from '../../../graph/lib/component';
 
+/**
+ * DashboardGraphComponent class that initializes the dashboard graph and renders the graph using do_plot_json.
+ */
 class DashboardGraphComponent extends GraphComponent {
+    /**
+     * Create a DashboardGraphComponent instance.
+     * @param {HTMLElement} element The HTML element that this component will be attached to.
+     */
     constructor(element) {
         super(element);
         this.initDashboardGraph();
     }
 
+    /**
+     * Initialize the dashboard graph by rendering the graph using do_plot_json.
+     */
     initDashboardGraph() {
         const $graph = $(this.element);
         const graph_data = $graph.data('plot-data');
diff --git a/src/frontend/components/dashboard/lib/component.js b/src/frontend/components/dashboard/lib/component.js
index 3ed79d0cd..68ec6f9b4 100644
--- a/src/frontend/components/dashboard/lib/component.js
+++ b/src/frontend/components/dashboard/lib/component.js
@@ -15,7 +15,14 @@ import ReactDOM from 'react-dom';
 import App from './react/app';
 import ApiClient from './react/api';
 
+/**
+ * DashboardComponent class that initializes the dashboard and renders the App component.
+ */
 class DashboardComponent extends Component {
+    /**
+     * Create a DashboardComponent instance.
+     * @param {HTMLElement} element The HTML element that this component will be attached to.
+     */
     constructor(element) {
         super(element);
         this.el = $(this.element);
@@ -30,6 +37,9 @@ class DashboardComponent extends Component {
         this.initDashboard();
     }
 
+    /**
+     * Initialize the dashboard by rendering the App component with widgets and configurations.
+     */
     initDashboard() {
         this.element.className = '';
         const widgetsEls = Array.prototype.slice.call(document.querySelectorAll('#ld-app > div'));
diff --git a/src/frontend/components/dashboard/lib/react/Footer.tsx b/src/frontend/components/dashboard/lib/react/Footer.tsx
index 1ab39db38..e62ab4afe 100644
--- a/src/frontend/components/dashboard/lib/react/Footer.tsx
+++ b/src/frontend/components/dashboard/lib/react/Footer.tsx
@@ -1,6 +1,16 @@
 import React from 'react';
 
-const Footer = ({ addWidget, widgetTypes, currentDashboard, readOnly, noDownload }) => {
+/**
+ * Create a Footer component that displays options for downloading the dashboard and adding widgets.
+ * @param param0 The properties for the Footer component, including a function to add a widget, a list of widget types, the current dashboard, a read-only flag, and a no-download flag.
+ * @param {function} param0.addWidget Function to call when adding a widget.
+ * @param {Array} param0.widgetTypes The list of widget types available for addition.
+ * @param {object} param0.currentDashboard The currently active dashboard.
+ * @param {boolean} param0.readOnly A flag indicating whether the dashboard is in read-only mode.
+ * @param {boolean} param0.noDownload A flag indicating whether the download option
+ * @returns {JSX.Element} The rendered Footer component.
+ */
+const Footer = ({ addWidget, widgetTypes, currentDashboard, readOnly, noDownload }): JSX.Element => {
     return (
         <div className='ld-footer-container'>
             {noDownload ? null : <div className="btn-group mb-3 mb-md-0 mr-md-4">
diff --git a/src/frontend/components/dashboard/lib/react/Header.tsx b/src/frontend/components/dashboard/lib/react/Header.tsx
index 3c886d092..05a41b305 100644
--- a/src/frontend/components/dashboard/lib/react/Header.tsx
+++ b/src/frontend/components/dashboard/lib/react/Header.tsx
@@ -1,6 +1,16 @@
 import React from 'react';
 
-const Header = ({ hMargin, dashboards, currentDashboard, loading, includeH1 }) => {
+/**
+ * Create a Header component that displays a navigation header for dashboards.
+ * @param {object} param0 The properties for the Header component, including horizontal margin, list of dashboards, current dashboard, loading state, and a flag to include an H1 element.
+ * @param {number} param0.hMargin The horizontal margin to apply to the header.
+ * @param {Array} param0.dashboards The list of dashboards to display in the header.
+ * @param {{name: string}} param0.currentDashboard The currently active dashboard.
+ * @param {boolean} param0.loading A flag indicating whether the header is in a loading state.
+ * @param {boolean} param0.includeH1 A flag indicating whether to include an
+ * @returns {JSX.Element} The rendered Header component.
+ */
+const Header = ({ hMargin, dashboards, currentDashboard, loading, includeH1 }: { hMargin: number; dashboards: Array<any>; currentDashboard: {name: string}; loading: boolean; includeH1: boolean; }): JSX.Element => {
     const renderMenuItem = (dashboard) => {
         if (dashboard.name === currentDashboard.name) {
             if (includeH1) {
diff --git a/src/frontend/components/dashboard/lib/react/Widget.tsx b/src/frontend/components/dashboard/lib/react/Widget.tsx
index 6cc4aace3..c049f54cf 100644
--- a/src/frontend/components/dashboard/lib/react/Widget.tsx
+++ b/src/frontend/components/dashboard/lib/react/Widget.tsx
@@ -1,10 +1,17 @@
 import React from 'react';
 import { initializeRegisteredComponents } from 'component';
 
+/**
+ * Widget component that renders a widget with HTML content.
+ */
 export default class Widget extends React.Component<any, any> {
     private ref;
 
-    constructor(props) {
+    /**
+     * Create a Widget component.
+     * @param {*} props The properties passed to the component, including the widget HTML and a flag for read-only mode.
+     */
+    constructor(props: any) {
         super(props);
 
         this.ref = React.createRef();
@@ -25,6 +32,10 @@ export default class Widget extends React.Component<any, any> {
         initializeRegisteredComponents(this.ref.current);
     };
 
+    /**
+     * Render the Widget component.
+     * @returns {JSX.Element} The rendered widget component.
+     */
     render() {
         return (
             <React.Fragment>
diff --git a/src/frontend/components/dashboard/lib/react/api.tsx b/src/frontend/components/dashboard/lib/react/api.tsx
index 78eddc697..f199cddce 100644
--- a/src/frontend/components/dashboard/lib/react/api.tsx
+++ b/src/frontend/components/dashboard/lib/react/api.tsx
@@ -1,16 +1,32 @@
+/**
+ * API Client for interacting with the backend services.
+ * @todo Cleanup
+ */
 export default class ApiClient {
     private baseUrl;
     private headers;
     private isDev;
 
-    constructor(baseUrl = '') {
+    /**
+     * Creates a new instance of ApiClient.
+     * @param {string} baseUrl Base URL for the API endpoints.
+     */
+    constructor(baseUrl: string = '') {
         this.baseUrl = baseUrl;
         this.headers = {};
         // @ts-expect-error "isDev is not valid"
         this.isDev = window.siteConfig && window.siteConfig.isDev;
     }
 
-    async _fetch(route, method, body) {
+    /**
+     * Execute a fetch request to the API.
+     * @description This is a basic wrapper around the fetch API.
+     * @param {string} route The API route to fetch.
+     * @param { 'GET'|'POST'|'PUT'|'PATCH'|'DELETE' } method The API method (GET, POST, PUT, PATCH, DELETE).
+     * @param {*} body The body of the request, if applicable.
+     * @returns {Promise<Response>} The response from the fetch call.
+     */
+    async _fetch(route: string, method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE', body: any): Promise<Response> {
         if (!route) throw new Error('Route is undefined');
 
         let csrfParam = '';
@@ -35,40 +51,100 @@ export default class ApiClient {
         return fetch(fullRoute, opts);
     }
 
-    GET(route) { return this._fetch(route, 'GET', null); }
-
-    POST(route, body) { return this._fetch(route, 'POST', body); }
-
-    PUT(route, body) { return this._fetch(route, 'PUT', body); }
-
-    PATCH(route, body) { return this._fetch(route, 'PATCH', body); }
-
-    DELETE(route) { return this._fetch(route, 'DELETE', null); }
-
-    saveLayout = (id, layout) => {
+    /**
+     * Performs a GET request to the specified route.
+     * @param {string} route The API route to fetch.
+     * @returns {Promise<Response>} The response from the fetch call.
+     */
+    GET(route: string): Promise<Response> { return this._fetch(route, 'GET', null); }
+
+    /**
+     * Performs a POST request to the specified route.
+     * @param {string} route The API route to fetch.
+     * @param {*} body The body of the request, if applicable.
+     * @returns {Promise<Response>} The response from the fetch call.
+     */
+    POST(route: string, body: any): Promise<Response> { return this._fetch(route, 'POST', body); }
+
+    /**
+     * Performs a PUT request to the specified route.
+     * @param {string} route The API route to fetch.
+     * @param {*} body The body of the request, if applicable.
+     * @returns {Promise<Response>} The response from the fetch call.
+     */
+    PUT(route: string, body: any): Promise<Response> { return this._fetch(route, 'PUT', body); }
+
+    /**
+     * Performs a PATCH request to the specified route.
+     * @param {string} route The API route to fetch.
+     * @param {*} body The body of the request, if applicable.
+     * @returns {Promise<Response>} The response from the fetch call.
+     */
+    PATCH(route: string, body: any): Promise<Response> { return this._fetch(route, 'PATCH', body); }
+
+    /**
+     * Performs a DELETE request to the specified route.
+     * @param {string} route The API route to fetch.
+     * @returns {Promise<Response>} The response from the fetch call.
+     */
+    DELETE(route: string): Promise<Response> { return this._fetch(route, 'DELETE', null); }
+
+    /**
+     * Save the layout of a dashboard.
+     * @param {string} id The ID of the dashboard to save the layout for.
+     * @param {object} layout The layout to save, typically an array of widget configurations.
+     * @returns {Promise<Response>} The response from the save operation.
+     */
+    saveLayout = (id: string, layout: Array<any>): Promise<Response> => {
         if (!this.isDev) {
             const strippedLayout = layout.map(widget => ({ ...widget, moved: undefined }));
             return this.PUT(`/dashboard/${id}`, strippedLayout);
         }
     };
 
-    createWidget = async type => {
+    /**
+     * Create a new widget.
+     * @param {string} type The type of widget to create.
+     * @returns {Promise<Response>} The response from the widget creation request.
+     */
+    createWidget = async (type: string): Promise<Response> => {
         const response = this.isDev ? await this.GET(`/widget/create.json?type=${type}`) : await this.POST(`/widget?type=${type}`, null);
         return await response.json();
     };
 
-    getWidgetHtml = async id => {
+    /**
+     * Get the HTML content of a widget.
+     * @param {string} id The ID of the widget to retrieve HTML for.
+     * @returns {Promise<string>} The HTML content of the widget.
+     */
+    getWidgetHtml = async (id: string): Promise<string> => {
         const html = this.isDev ? await this.GET(`/widget/${id}/create`) : await this.GET(`/widget/${id}`);
         return html.text();
     };
 
-    deleteWidget = id => !this.isDev && this.DELETE(`/widget/${id}`);
-
-    getEditForm = async id => {
+    /**
+     * Delete a widget by its ID.
+     * @param {string} id The ID of the widget to delete.
+     * @returns {promise<Response>} A promise that resolves when the widget is deleted.
+     */
+    deleteWidget = (id: string): Promise<Response> => !this.isDev && this.DELETE(`/widget/${id}`);
+
+    /**
+     * Get the edit form for a widget.
+     * @param {string} id The ID of the widget to retrieve the edit form for.
+     * @returns {Promise<object>} The JSON response containing the edit form data for the widget.
+     */
+    getEditForm = async (id: string): Promise<object> => {
         const response = await this.GET(`/widget/${id}/edit`);
         return response.json();
     };
 
+    /**
+     * Save a widget.
+     * @param {string} url The URL to save the widget.
+     * @param {object} params The parameters to save the widget.
+     * @returns {Promise<object>} The JSON response containing the saved widget data.
+     */
     saveWidget = async (url, params) => {
         const result = this.isDev ? await this.GET('/widget/update.json') : await this.PUT(`${url}`, params);
         return await result.json();
diff --git a/src/frontend/components/dashboard/lib/react/app.tsx b/src/frontend/components/dashboard/lib/react/app.tsx
index 0537304db..d6fba359a 100644
--- a/src/frontend/components/dashboard/lib/react/app.tsx
+++ b/src/frontend/components/dashboard/lib/react/app.tsx
@@ -39,10 +39,18 @@ const modalStyle = {
     }
 };
 
+/**
+ * App component for the dashboard, managing widgets and layout.
+ */
 class App extends React.Component<any, any> {
     private formRef;
 
-    constructor(props) {
+    /**
+     * Create an instance of the App component.
+     * @param {any} props The properties passed to the component, including widgets, api, dashboardId, etc.
+     * @todo Use concrete types instead of `any` for better type safety.
+     */
+    constructor(props: any) {
         super(props);
         Modal.setAppElement('#ld-app');
 
@@ -66,7 +74,7 @@ class App extends React.Component<any, any> {
         this.initializeGlobeComponents();
     };
 
-    componentDidUpdate = (prevProps, prevState) => {
+    componentDidUpdate = (prevProps: any, prevState: any) => {
         window.requestAnimationFrame(this.overWriteSubmitEventListener);
 
         if (this.state.editModalOpen && prevState.loadingEditHtml && !this.state.loadingEditHtml && this.formRef) {
@@ -92,7 +100,7 @@ class App extends React.Component<any, any> {
         const arrGlobe = document.querySelectorAll('.globe');
         import('../../../globe/lib/component').then(({ default: GlobeComponent }) => {
             arrGlobe.forEach((globe) => {
-                new GlobeComponent(globe);
+                new GlobeComponent(globe as HTMLElement);
             });
         });
     };
@@ -135,7 +143,6 @@ class App extends React.Component<any, any> {
     };
 
     deleteActiveWidget = () => {
-     
         if (!window.confirm('Deleting a widget is permanent! Are you sure?'))
             return;
 
@@ -150,7 +157,6 @@ class App extends React.Component<any, any> {
         event.preventDefault();
         const formEl = this.formRef.current.querySelector('form');
         if (!formEl) {
-       
             console.error('No form element was found!');
             return;
         }
@@ -194,7 +200,6 @@ class App extends React.Component<any, any> {
         return { x, y };
     };
 
-   
     addWidget = async (type) => {
         this.setState({ loading: true });
         const result = await this.props.api.createWidget(type);
@@ -308,7 +313,11 @@ class App extends React.Component<any, any> {
         window.dispatchEvent(new Event('resize'));
     };
 
-    render() {
+    /**
+     * Renders the App component.
+     * @returns {React.JSX.Element} The rendered component, including the header, footer, and grid layout with widgets.
+     */
+    render(): React.JSX.Element {
         return (
             <div className="content-block">
                 {this.props.hideMenu ? null : <Header
diff --git a/src/frontend/components/data-table/lib/component.js b/src/frontend/components/data-table/lib/component.js
index c8dd6b8f6..28bcf1166 100644
--- a/src/frontend/components/data-table/lib/component.js
+++ b/src/frontend/components/data-table/lib/component.js
@@ -11,10 +11,17 @@ import { bindToggleTableClickHandlers } from './toggle-table';
 
 const MORE_LESS_TRESHOLD = 50;
 
-//TODO: It is worth noting that there are significant changes between DataTables.net v1 and v2 (hence the major version increase)
-//      We are currently using v2 in this component, but with various deprecated features in use that may need to be updated in the future
+/**
+ * Component for initializing and managing DataTables
+ * @todo It is worth noting that there are significant changes between DataTables.net v1 and v2 (hence the major version increase)
+         We are currently using v2 in this component, but with various deprecated features in use that may need to be updated in the future
+ */
 class DataTableComponent extends Component {
-    constructor(element)  {
+    /**
+     * Creates a new DataTable component
+     * @param {HTMLElement} element The element to attach the DataTable functionality to
+     */
+    constructor(element) {
         super(element);
         this.el = $(this.element);
         this.hasCheckboxes = this.el.hasClass('table-selectable');
@@ -26,8 +33,11 @@ class DataTableComponent extends Component {
         this.initTable();
     }
 
+    /**
+     * Initializes the DataTable component
+     */
     initTable() {
-        if(this.hasClearState) {
+        if (this.hasClearState) {
             this.clearTableStateForPage();
 
             const url = new URL(window.location.href);
@@ -39,7 +49,7 @@ class DataTableComponent extends Component {
         }
 
         const conf = this.getConf();
-        const {columns} = conf;
+        const { columns } = conf;
         this.columns = columns;
         this.el.DataTable(conf);
         this.initializingTable = true;
@@ -52,7 +62,7 @@ class DataTableComponent extends Component {
         if (this.el.hasClass('table-account-requests')) {
             this.modal = $.find('#userModal');
             this.initClickableTable();
-            this.el.on('draw.dt', ()=> {
+            this.el.on('draw.dt', () => {
                 this.initClickableTable();
             });
         }
@@ -76,9 +86,12 @@ class DataTableComponent extends Component {
         });
     }
 
+    /**
+     * Clears the table state for the current page
+     */
     clearTableStateForPage() {
         for (let i = 0; i < localStorage.length; i++) {
-            const storageKey = localStorage.key( i );
+            const storageKey = localStorage.key(i);
 
             if (!storageKey.startsWith('DataTables')) {
                 continue;
@@ -90,12 +103,15 @@ class DataTableComponent extends Component {
                 continue;
             }
 
-            if(window.location.href.indexOf('/' + keySegments.slice(1).join('/')) !== -1) {
+            if (window.location.href.indexOf('/' + keySegments.slice(1).join('/')) !== -1) {
                 localStorage.removeItem(storageKey);
             }
         }
     }
 
+    /**
+     * Initializes the clickable table functionality
+     */
     initClickableTable() {
         const links = this.el.find('tbody td .link');
         // Remove all existing click events to prevent multiple bindings
@@ -107,6 +123,11 @@ class DataTableComponent extends Component {
         links.on('blur', (ev) => { this.toggleFocus(ev, false); });
     }
 
+    /**
+     * Toggles focus on a row
+     * @param {JQuery.FocusEvent} ev The event that triggered the focus change
+     * @param {boolean} hasFocus Whether the row has focus or not
+     */
     toggleFocus(ev, hasFocus) {
         const row = $(ev.target).closest('tr');
         if (hasFocus) {
@@ -116,6 +137,10 @@ class DataTableComponent extends Component {
         }
     }
 
+    /**
+     * Handle click event on a row
+     * @param {JQuery.ClickEvent} ev The click event
+     */
     handleClick(ev) {
         const rowClicked = $(ev.target).closest('tr');
         ev.preventDefault();
@@ -123,6 +148,10 @@ class DataTableComponent extends Component {
         $(this.modal).modal('show');
     }
 
+    /**
+     * Fill the modal data from the clicked row
+     * @param {HTMLTableRowElement} row The row to fill the modal data from
+     */
     fillModalData(row) {
         const fields = $(this.modal).find('input, textarea');
         const btnReject = $(this.modal).find('.btn-js-reject-request-send');
@@ -156,15 +185,24 @@ class DataTableComponent extends Component {
         });
     }
 
+    /**
+     * Get a checkbox element as an HTML string
+     * @param {number } id The ID for the checkbox element
+     * @param {string} label  The label for the checkbox element
+     * @returns {string} The HTML string for the checkbox element
+     */
     getCheckboxElement(id, label) {
         return (
             '<div class=\'checkbox\'>' +
-        `<input id='dt_checkbox_${id}' type='checkbox' />` +
-        `<label for='dt_checkbox_${id}'><span>${label}</span></label>` +
-      '</div>'
+            `<input id='dt_checkbox_${id}' type='checkbox' />` +
+            `<label for='dt_checkbox_${id}'><span>${label}</span></label>` +
+            '</div>'
         );
     }
 
+    /**
+     * Add a select all checkbox to the table header
+     */
     addSelectAllCheckbox() {
         const $selectAllElm = this.el.find('thead th.check');
         const $checkBoxes = this.el.find('tbody .check .checkbox input');
@@ -181,10 +219,10 @@ class DataTableComponent extends Component {
         });
 
         // Check if the 'select all' checkbox is checked and all checkboxes need to be checked
-        $selectAllElm.find('input').on( 'click', (ev) => {
+        $selectAllElm.find('input').on('click', (ev) => {
             const checkbox = $(ev.target);
 
-            if ($(checkbox).is( ':checked' )) {
+            if ($(checkbox).is(':checked')) {
                 this.checkAllCheckboxes($checkBoxes, true);
             } else {
                 this.checkAllCheckboxes($checkBoxes, false);
@@ -192,14 +230,24 @@ class DataTableComponent extends Component {
         });
     }
 
+    /**
+     * Check or uncheck all checkboxes in the table
+     * @param {JQuery<HTMLInputElement>} $checkBoxes The checkboxes to check or uncheck
+     * @param {boolean} bCheckAll True to check all checkboxes, false to uncheck all
+     */
     checkAllCheckboxes($checkBoxes, bCheckAll) {
         if (bCheckAll) {
-            $checkBoxes.prop( 'checked', true );
+            $checkBoxes.prop('checked', true);
         } else {
             $checkBoxes.prop('checked', false);
         }
     }
 
+    /**
+     * Check or uncheck the 'select all' checkbox based on the state of the individual checkboxes
+     * @param {JQuery<HTMLInputElement>} $checkBoxes The checkboxes to check or uncheck
+     * @param {JQuery<HTMLInputElement>} $selectAllCheckBox The select all checkbox to update
+     */
     checkSelectAll($checkBoxes, $selectAllCheckBox) {
         let bSelectAll = true;
 
@@ -215,6 +263,12 @@ class DataTableComponent extends Component {
         }
     }
 
+    /**
+     * Add a sort button to the column header
+     * @param {DataTable} dataTable The DataTable instance
+     * @param {any} column The column to add the sort button to
+     * @param {any} headerContent The content of the column header
+     */
     addSortButton(dataTable, column, headerContent) {
         const $header = $(column.header());
         const $button = $(`
@@ -231,9 +285,13 @@ class DataTableComponent extends Component {
             .find('.data-table__header-wrapper')
             .html($button);
 
-        dataTable.order.listener($button, column.index() );
+        dataTable.order.listener($button, column.index());
     }
 
+    /**
+     * Toggle the filter for a column
+     * @param {any} column The column to toggle the filter for
+     */
     toggleFilter(column) {
         const $header = $(column.header());
 
@@ -246,15 +304,21 @@ class DataTableComponent extends Component {
         }
     }
 
-    // Self reference included due to scoping
+    /**
+     * Add a search dropdown to the column header
+     * @param {any} column The column to add the search dropdown to
+     * @param {string} id The ID of the column
+     * @param {number} index The index of the column
+     */
     async addSearchDropdown(column, id, index) {
+        // Self reference included due to scoping
         const $header = $(column.header());
         const title = $header.text().trim();
         const searchValue = column.search();
         const self = this;
-        const {context} = column;
-        const {oAjaxData} = context[0];
-        const {columns} = oAjaxData;
+        const { context } = column;
+        const { oAjaxData } = context[0];
+        const { columns } = oAjaxData;
         const columnId = columns[column.index()].name;
         const col = this.columns[column.index()];
 
@@ -313,6 +377,37 @@ class DataTableComponent extends Component {
 
         this.toggleFilter(column);
 
+        if (col && col.typeahead) {
+            import(/*webpackChunkName: "typeahead" */ 'util/typeahead')
+                .then(({default: TypeaheadBuilder})=>{
+                    const builder = new TypeaheadBuilder();
+                    builder
+                        .withAjaxSource(this.getApiEndpoint(columnId))
+                        .withMethod('POST')
+                        .withData({csrf_token: $('body').data('csrf')})
+                        .withInput($('input', $header))
+                        .withAppendQuery()
+                        .withDefaultMapper()
+                        .withName(columnId.replace(/\s+/g, '') + 'Search')
+                        .withCallback((data) => {
+                            if (col.typeahead_use_id) {
+                                $searchInput.val(data.name);
+                                $('input.search', $searchElement).val(data.id)
+                                    .trigger('change');
+                            } else {
+                                $('input', $searchElement).addClass('search')
+                                    .val(data.name)
+                                    .trigger('change');
+                            }
+                        })
+                        .build();
+                });
+        }
+
+        $header.find('.data-table__header-wrapper').prepend($searchElement);
+
+        this.toggleFilter(column);
+
         if (col && col.typeahead) {
             import(/*webpackChunkName: "typeahead" */ 'util/typeahead')
                 .then(({default: TypeaheadBuilder})=>{
@@ -352,7 +447,7 @@ class DataTableComponent extends Component {
             self.toggleFilter(column);
 
             // Update or add the filter to the searchParams
-            if(self.searchParams.has(id)) {
+            if (self.searchParams.has(id)) {
                 self.searchParams.set(id, this.value);
             } else {
                 self.searchParams.append(id, this.value);
@@ -390,21 +485,42 @@ class DataTableComponent extends Component {
         });
     }
 
+    /**
+     * Get the API endpoint for the column typeahead
+     * @param {number} columnId The ID of the column to get the API endpoint for
+     * @returns {string} The API endpoint for the column typeahead
+     */
     getApiEndpoint(columnId) {
         const table = $('body').data('layout-identifier');
         return `/${table}/match/layout/${columnId}?q=`;
     }
 
+    /**
+     * Encode HTML entities in a string
+     * @param {string} text The text to encode
+     * @returns {string} The encoded text
+     */
     encodeHTMLEntities(text) {
         return $('<textarea/>').text(text)
             .html();
     }
 
+    /**
+     * Decode HTML entities in a string
+     * @param {string} text The text to decode
+     * @returns {string} The decoded text
+     */
     decodeHTMLEntities(text) {
         return $('<textarea/>').html(text)
             .text();
     }
 
+    /**
+     * Render a more-less component if the HTML string exceeds the threshold
+     * @param {string} strHTML The HTML string to render
+     * @param {string} strColumnName The name of the column to render
+     * @returns {string} The rendered HTML string with more-less component if applicable
+     */
     renderMoreLess(strHTML, strColumnName) {
         if (strHTML.toString().length > MORE_LESS_TRESHOLD) {
             return (
@@ -416,6 +532,12 @@ class DataTableComponent extends Component {
         return strHTML;
     }
 
+    /**
+     * Render the default data type
+     * @param {object} data The data to render
+     * @returns {string} The rendered HTML string
+     * @todo Would it be better to use an abstract factory method here to handle different data types?
+     */
     renderDefault(data) {
         let strHTML = '';
 
@@ -431,6 +553,11 @@ class DataTableComponent extends Component {
         return this.renderMoreLess(strHTML, data.name);
     }
 
+    /**
+     * Render the ID data type
+     * @param {object} data The data to render
+     * @returns {string} The rendered HTML string for the ID
+     */
     renderId(data) {
         let retval = '';
         const id = data.values[0];
@@ -441,6 +568,11 @@ class DataTableComponent extends Component {
         return retval + `<a href="${this.base_url}/${id}">${id}</a>`;
     }
 
+    /**
+     * Render the person data type
+     * @param {string} data The data to render
+     * @returns {string} The rendered HTML string for the person data type
+     */
     renderPerson(data) {
         let strHTML = '';
 
@@ -459,7 +591,7 @@ class DataTableComponent extends Component {
                         thisHTML += `<p>${this.encodeHTMLEntities(detail.definition)}: ${strDecodedValue}</p>`;
                     }
                 });
-                thisHTML +=  '</div>';
+                thisHTML += '</div>';
                 strHTML += (
                     `<div class="position-relative">
             <button class="btn btn-small btn-inverted btn-info trigger" aria-expanded="false" type="button">
@@ -477,6 +609,11 @@ class DataTableComponent extends Component {
         return strHTML;
     }
 
+    /**
+     * Render the file data type
+     * @param {object} data The data to render
+     * @returns {string} The rendered HTML string for the file data type
+     */
     renderFile(data) {
         let strHTML = '';
 
@@ -497,6 +634,11 @@ class DataTableComponent extends Component {
         return strHTML;
     }
 
+    /**
+     * Render the RAG (Red-Amber-Green) status
+     * @param {object} data The data to render
+     * @returns {string} The rendered HTML string for the RAG (Red-Amber-Green) status
+     */
     renderRag(data) {
         let strRagType = '';
         const arrRagTypes = {
@@ -522,6 +664,11 @@ class DataTableComponent extends Component {
         return `<span class="rag rag--${strRagType}" title="${text}" aria-labelledby="rag_${strRagType}_meaning"><span>✗</span></span>`;
     }
 
+    /**
+     * Render curval data type
+     * @param {object} data The data to render
+     * @returns {string} The rendered HTML string for the curval data type
+     */
     renderCurCommon(data) {
         let strHTML = '';
 
@@ -533,6 +680,11 @@ class DataTableComponent extends Component {
         return this.renderMoreLess(strHTML, data.name);
     }
 
+    /**
+     * Render a curval table
+     * @param {object} data The data to render
+     * @returns {string} The rendered HTML string for the curval table
+     */
     renderCurCommonTable(data) {
         let strHTML = '';
 
@@ -573,6 +725,11 @@ class DataTableComponent extends Component {
         return strHTML;
     }
 
+    /**
+     * Render the data type based on its type
+     * @param {object} data The data to render
+     * @returns {string} The rendered HTML string for the data type
+     */
     renderDataType(data) {
         switch (data.type) {
             case 'id':
@@ -593,6 +750,13 @@ class DataTableComponent extends Component {
         }
     }
 
+    /**
+     * Render the data for a specific row and column type
+     * @param {string} type The type of data to render
+     * @param {JQuery<HTMLElement>} row The row to render the data for
+     * @param {any} meta The metadata for the row
+     * @returns {string} The rendered HTML string for the data
+     */
     renderData(type, row, meta) {
         const strColumnName = meta ? meta.settings.oAjaxData.columns[meta.col].name : '';
         const data = row[strColumnName];
@@ -604,6 +768,12 @@ class DataTableComponent extends Component {
         return this.renderDataType(data);
     }
 
+    /**
+     * Get the configuration object for the DataTable
+     * @import { Config } from 'datatables.net-bs4';
+     * @param {Parital<Config>} overrides Any values to override in the configuration
+     * @returns {Config} The configuration object for the DataTable
+     */
     getConf(overrides = undefined) {
         const confData = this.el.data('config');
         let conf = {};
@@ -614,8 +784,8 @@ class DataTableComponent extends Component {
             conf = confData;
         }
 
-        if(overrides) {
-            for(const key in overrides) {
+        if (overrides) {
+            for (const key in overrides) {
                 conf[key] = overrides[key];
             }
         }
@@ -639,7 +809,7 @@ class DataTableComponent extends Component {
             this.json = json || undefined;
 
             if (this.initializingTable || conf.reinitialize) {
-                dataTable.columns().every(function(index) {
+                dataTable.columns().every(function (index) {
                     const column = this;
                     const $header = $(column.header());
 
@@ -676,15 +846,15 @@ class DataTableComponent extends Component {
             }
         };
 
-        conf['footerCallback'] = function() {
+        conf['footerCallback'] = function () {
             const api = this.api();
             // Add aggregate values to table if configured
             const agg = api.ajax && api.ajax.json() && api.ajax.json().aggregate;
             if (agg) {
                 const cols = api.settings()[0].oAjaxData.columns;
-                api.columns().every( function () {
+                api.columns().every(function () {
                     const idx = this.index();
-                    const {name} = cols[idx];
+                    const { name } = cols[idx];
                     if (agg[name]) {
                         $(this.footer()).html(
                             self.renderDataType(agg[name])
@@ -716,7 +886,7 @@ class DataTableComponent extends Component {
                     id: 'full-screen-btn'
                 },
                 className: 'btn btn-small btn-toggle-off',
-                action: ( e ) => {
+                action: (e) => {
                     this.toggleFullScreenMode(e);
                 }
             }
@@ -725,12 +895,16 @@ class DataTableComponent extends Component {
         return conf;
     }
 
-    /*
-      For some reason, the current code that is present doesn't enable/disable the button as expected; it will disable the button, but will not re-enable the button.
-      I have tried manually changing the DOM, as well as the methods already present in the code, and I currently believe there is a bug within the DataTables button
-      code that is meaning that this won't change (although I am open to the fact that I am being a little slow and missing something glaringly obvious).
-    */
+    /**
+     * Toggle full screen mode for the DataTable
+     * @param {HTMLButtonElement} buttonElement The button element that was clicked to toggle full screen mode
+     */
     toggleFullScreenMode(buttonElement) {
+        /*
+            For some reason, the current code that is present doesn't enable/disable the button as expected; it will disable the button, but will not re-enable the button.
+            I have tried manually changing the DOM, as well as the methods already present in the code, and I currently believe there is a bug within the DataTables button
+            code that is meaning that this won't change (although I am open to the fact that I am being a little slow and missing something glaringly obvious).
+        */
         const table = document.querySelector('table.data-table');
         const currentTable = $(table);
         if(currentTable && $.fn.dataTable.isDataTable(currentTable)) {
@@ -746,12 +920,12 @@ class DataTableComponent extends Component {
             // Move data table into new modal
             newModal.append(table);
             document.body.appendChild(newModal);
-            if(currentTable && !($.fn.dataTable.isDataTable(currentTable))) {
-                currentTable.DataTable(this.getConf({responsive: false, reinitialize: true}));
+            if (currentTable && !($.fn.dataTable.isDataTable(currentTable))) {
+                currentTable.DataTable(this.getConf({ responsive: false, reinitialize: true }));
             }
 
-            $(document).on('keyup', (ev)=>{
-                if(ev.key === 'Escape') {
+            $(document).on('keyup', (ev) => {
+                if (ev.key === 'Escape') {
                     this.toggleFullScreenMode(buttonElement);
                 }
             });
@@ -764,8 +938,8 @@ class DataTableComponent extends Component {
             }
 
             mainContent.appendChild(table);
-            if(currentTable && !($.fn.dataTable.isDataTable(currentTable))) {
-                currentTable.DataTable(this.getConf({reinitialize: true}));
+            if (currentTable && !($.fn.dataTable.isDataTable(currentTable))) {
+                currentTable.DataTable(this.getConf({ reinitialize: true }));
             }
             // Remove the modal
             document.querySelector('#table-modal').remove();
@@ -779,9 +953,14 @@ class DataTableComponent extends Component {
         $('#full-screen-btn').addClass(this.isFullScreen ? 'btn-toggle': 'btn-toggle-off');
     }
 
+    /**
+     * Bind click handlers after the DataTable has been drawn
+     * @import { Config } from 'datatables.net-bs4';
+     * @param {Config} conf The configuration object for the DataTable
+     */
     bindClickHandlersAfterDraw(conf) {
         const tableElement = this.el;
-        const rows = tableElement.DataTable().rows( {page:'current'} )
+        const rows = tableElement.DataTable().rows({ page: 'current' })
             .data();
 
         if (rows && this.base_url) {
diff --git a/src/frontend/components/data-table/lib/helper.js b/src/frontend/components/data-table/lib/helper.js
index 6c4005c1b..34da18939 100644
--- a/src/frontend/components/data-table/lib/helper.js
+++ b/src/frontend/components/data-table/lib/helper.js
@@ -1,8 +1,19 @@
+/**
+ * Add a new row to the table.
+ * @param {object} rowData The row data to be added to the table.
+ * @param {JQuery} table The jQuery element of the table to which the row will be added.
+ */
 const addRow = (rowData, table) => {
     // Insert row at bottom of table
     table.DataTable().row.add(rowData).draw();
 };
 
+/**
+ * Update an existing row in the table.
+ * @param {object} rowData The updated row data.
+ * @param {JQuery} table The table to update.
+ * @param {string} id The ID of the row to update.
+ */
 const updateRow = (rowData, table, id) => {
     const rows = table.find('tbody > tr');
     rows.each((i, row) => {
@@ -14,11 +25,20 @@ const updateRow = (rowData, table, id) => {
     });
 };
 
+/**
+ * Clear all rows from the table.
+ * @param {JQuery} table The jQuery element of the table to clear.
+ */
 const clearTable = (table) => {
     table.DataTable().clear()
         .draw();
 };
 
+/**
+ * Get the order of a row in the table.
+ * @param {object} row The row to get the order from.
+ * @returns {number} The order value of the row, or -1 if not found.
+ */
 const getRowOrder = (row) => {
     try {
         const orderValue = $(row.node()).find('input')
diff --git a/src/frontend/components/data-table/lib/helper.test.ts b/src/frontend/components/data-table/lib/helper.test.ts
index e95dbd801..454cbc18a 100644
--- a/src/frontend/components/data-table/lib/helper.test.ts
+++ b/src/frontend/components/data-table/lib/helper.test.ts
@@ -71,4 +71,4 @@ describe('helper', () => {
         clearTable($(target));
         expect(target.querySelectorAll('tbody tr').length).toBe(1);
     });
-});
+});
\ No newline at end of file
diff --git a/src/frontend/components/data-table/lib/toggle-table.js b/src/frontend/components/data-table/lib/toggle-table.js
index f35962057..c5445a5a8 100644
--- a/src/frontend/components/data-table/lib/toggle-table.js
+++ b/src/frontend/components/data-table/lib/toggle-table.js
@@ -1,9 +1,13 @@
-/* Explanation of the Toggle Table:
-  A toggle table consist of two twin tables containing the same fields
-  One table contains hidden checkboxes while the other one contains text only
-  This is used to "move" fields between the tables (using display: none; for unchecked fields)
+/**
+  * @fileoverview A toggle table consist of two twin tables containing the same fields
+  * One table contains hidden checkboxes while the other one contains text only
+  * This is used to "move" fields between the tables (using display: none; for unchecked fields)
 */
 
+/**
+ * Bind click handlers to toggle table rows.
+ * @param {JQuery} tableElement The jQuery element of the table to bind click handlers to.
+ */
 const bindToggleTableClickHandlers = (tableElement) => {
     if (tableElement.hasClass('table-toggle')) {
         const fields = tableElement.find('tbody tr');
@@ -16,6 +20,10 @@ const bindToggleTableClickHandlers = (tableElement) => {
     }
 };
 
+/**
+ * Toggle a row in the table when clicked.
+ * @param {JQuery.ClickEvent} ev The click event triggered by the user.
+ */
 const toggleRow = (ev) => {
     ev.preventDefault();
     const clickedRow = $(ev.target).closest('tr')[0];
@@ -27,11 +35,11 @@ const toggleRow = (ev) => {
 
 /**
  * Toggles (switches) all fields from source table to destination table
- * @param clickedRow {HTMLTableRowElement} - The row element to toggle
- * @param sourceTable {JQuery<HTMLTableElement>} - The table of the clicked row (source)
- * @param destinationTableID {string} - ID of the table where it's twin field need to be toggled
- * @param forceCheck {boolean|null} When defined it will force the field be checked (true) or unchecked (false).
- *                                  Default = null, meaning it will toggle based on its currect check status)
+ * @param {HTMLTableRowElement} clickedRow The row element to toggle
+ * @param {HTMLTableElement} sourceTable The table of the clicked row (source)
+ * @param {string} destinationTableID ID of the table where it's twin field need to be toggled
+ * @param {boolean | null} forceCheck When defined it will force the field be checked (true) or unchecked (false).
+ *                                    Default = null, meaning it will toggle based on its currect check status)
  */
 const toggleRowInTable = (clickedRow, sourceTable, destinationTableID, forceCheck = null) => {
     // Retrieve the destination table
diff --git a/src/frontend/components/datepicker/lib/helper.js b/src/frontend/components/datepicker/lib/helper.js
index c90da8afd..27fda808e 100644
--- a/src/frontend/components/datepicker/lib/helper.js
+++ b/src/frontend/components/datepicker/lib/helper.js
@@ -1,5 +1,9 @@
 import  'bootstrap-datepicker';
 
+/**
+ * Initializes a date field as a datepicker.
+ * @param {JQuery} field The field to initialize as a datepicker.
+ */
 const initDateField = (field) => {
     field.datepicker({
         'format': field.data('dateformat-datepicker'),
diff --git a/src/frontend/components/form-group/autosave/lib/autosave.test.ts b/src/frontend/components/form-group/autosave/lib/autosave.test.ts
index 42ca664f2..e88811f25 100644
--- a/src/frontend/components/form-group/autosave/lib/autosave.test.ts
+++ b/src/frontend/components/form-group/autosave/lib/autosave.test.ts
@@ -1,7 +1,7 @@
+/* eslint-disable jsdoc/require-jsdoc */
 import AutosaveBase from './autosaveBase';
 import { describe, it, expect, beforeAll, afterAll } from '@jest/globals';
 
-// Mocking the AutosaveBase class for testing
 class TestAutosave extends AutosaveBase {
     initAutosave(): void {
         console.log('initAutosave');
diff --git a/src/frontend/components/form-group/autosave/lib/autosaveBase.ts b/src/frontend/components/form-group/autosave/lib/autosaveBase.ts
index 45cec5cfb..4bce818b4 100644
--- a/src/frontend/components/form-group/autosave/lib/autosaveBase.ts
+++ b/src/frontend/components/form-group/autosave/lib/autosaveBase.ts
@@ -2,12 +2,12 @@ import { Component } from 'component';
 import StorageProvider from 'util/storageProvider';
 
 /**
- * Base class for autosave
+ * Base class for autosave/recovery functionality.
  */
 export default abstract class AutosaveBase extends Component {
     /**
      * Creates a new autosave component
-     * @param element The element to attach the autosave functionality to
+     * @param {HTMLElement} element The element to attach the autosave functionality to
      */
     constructor(element: HTMLElement) {
         super(element);
@@ -16,47 +16,52 @@ export default abstract class AutosaveBase extends Component {
 
     /**
      * Whether the current form is a clone
+     * @returns {boolean} True if the form is a clone, false otherwise
      */
-    get isClone() {
+    get isClone(): boolean {
         return !!$('body').find('.form-edit')
             .data('from');
     }
 
     /**
      * The layout identifier of the current form
+     * @returns {string} The layout identifier of the current form
      */
-    get layoutId() {
+    get layoutId(): string {
         return $('body').data('layout-identifier');
     }
 
     /**
      * The record identifier of the current form
+     * @returns {number} The record identifier of the current form
      */
-    get recordId() {
+    get recordId(): number {
         return $('body').find('.form-edit')
             .data('current-id') || 0;
     }
 
     /**
      * The storage object to use for autosave - this is a variable to allow for mocking in testing
+     * @returns {StorageProvider} The storage provider for autosave
      */
-    get storage() {
+    get storage(): StorageProvider {
         return new StorageProvider(`linkspace-record-change-${this.layoutId}-${this.recordId}`);
     }
 
     /**
      * The key to use for storing the autosave data
+     * @returns {string} The key to use for storing the autosave data
      */
-    get table_key() {
+    get table_key(): string {
         return `linkspace-record-change-${this.layoutId}-${this.recordId}`;
     }
 
     /**
      * Get the key to use for storing the autosave data for a given field
-     * @param $field The field to get the column key for
-     * @returns The key to use for storing the autosave data for the given field
+     * @param {JQuery<HTMLElement>} $field The field to get the column key for
+     * @returns {string} The key to use for storing the autosave data for the given field
      */
-    columnKey($field: JQuery) {
+    columnKey($field: JQuery<HTMLElement>): string {
         return `linkspace-column-${$field.data('column-id')}-${this.layoutId}-${this.recordId}`;
     }
 
@@ -64,4 +69,4 @@ export default abstract class AutosaveBase extends Component {
      * Initialize the autosave functionality - this is implemented in the child classes
      */
     abstract initAutosave(): void;
-}
\ No newline at end of file
+}
diff --git a/src/frontend/components/form-group/autosave/lib/component.js b/src/frontend/components/form-group/autosave/lib/component.js
index a6e60108f..55f31e0e9 100644
--- a/src/frontend/components/form-group/autosave/lib/component.js
+++ b/src/frontend/components/form-group/autosave/lib/component.js
@@ -3,7 +3,6 @@ import AutosaveBase from './autosaveBase';
 
 /**
  * Autosave component
- * @inherits AutosaveBase
  */
 class AutosaveComponent extends AutosaveBase {
     /**
diff --git a/src/frontend/components/form-group/autosave/lib/modal.js b/src/frontend/components/form-group/autosave/lib/modal.js
index 1fa3ab10f..b4c742b25 100644
--- a/src/frontend/components/form-group/autosave/lib/modal.js
+++ b/src/frontend/components/form-group/autosave/lib/modal.js
@@ -8,9 +8,7 @@ import { RenderableButton } from 'components/button/lib/RenderableButton';
  * A modal that allows the user to restore autosaved values.
  */
 class AutosaveModal extends AutosaveBase {
-    /**
-   * @inheritdoc
-   */
+    /** @inheritdoc */
     async initAutosave() {
         const $modal = $(this.element);
         const $form = $('.form-edit');
diff --git a/src/frontend/components/form-group/calc-fields/lib/component.js b/src/frontend/components/form-group/calc-fields/lib/component.js
index 965dc8ea0..86d66a5be 100644
--- a/src/frontend/components/form-group/calc-fields/lib/component.js
+++ b/src/frontend/components/form-group/calc-fields/lib/component.js
@@ -1,17 +1,31 @@
 import { Component } from 'component';
 import { getFieldValues } from 'get-field-values';
 
+/**
+ * Component to handle calculation fields that depend on other fields.
+ */
 class CalcFieldsComponent extends Component {
+    /**
+     * Create a new instance of the CalcFieldsComponent.
+     * @param {HTMLElement} element The HTML element that this component is attached to.
+     */
     constructor(element) {
         super(element);
         this.initCalcFields();
     }
 
+    /**
+     * Initializes the calculation fields component.
+     */
     initCalcFields() {
         const field = this.getFieldCalc();
         this.setupCalcField(field);
     }
 
+    /**
+     * Get the calculation field data.
+     * @returns {object} An object containing the field, code, parameters, and dependencies for the calculation field.
+     */
     getFieldCalc() {
 
         const dependency = $(this.element).data('calc-depends-on');
@@ -29,6 +43,10 @@ class CalcFieldsComponent extends Component {
 
     }
 
+    /**
+     * Setup the calculation field by attaching change events to its dependencies.
+     * @param {object} field The field object containing the code and dependencies for the calculation field.
+     */
     setupCalcField(field) {
         let { code } = field;
         const { depends_on, params } = field;
diff --git a/src/frontend/components/form-group/checkbox/lib/component.js b/src/frontend/components/form-group/checkbox/lib/component.js
index 91abbce9a..4e2bb9bd4 100644
--- a/src/frontend/components/form-group/checkbox/lib/component.js
+++ b/src/frontend/components/form-group/checkbox/lib/component.js
@@ -1,6 +1,13 @@
 import { Component } from 'component';
 
+/**
+ * Component to handle checkbox functionality with reveal elements.
+ */
 class CheckboxComponent extends Component {
+    /**
+     * Create a new instance of the CheckboxComponent.
+     * @param {HTMLElement} element The HTML element that this component is attached to.
+     */
     constructor(element) {
         super(element);
         this.el = $(this.element);
@@ -8,7 +15,9 @@ class CheckboxComponent extends Component {
         this.initCheckbox();
     }
 
-    // Intializes the checkbox
+    /**
+     * Intializes the checkbox
+     */
     initCheckbox() {
         const inputEl = $(this.el).find('input');
         const id = $(inputEl).attr('id');
@@ -27,6 +36,11 @@ class CheckboxComponent extends Component {
         });
     }
 
+    /**
+     * Show or hide the reveal element based on the checkbox state.
+     * @param {JQuery<HTMLElement>} $revealEl The reveal element to show or hide
+     * @param {boolean} bShow True to show the reveal element, false to hide it
+     */
     showRevealElement($revealEl, bShow) {
         const strCheckboxRevealShowClassName = 'checkbox-reveal--show';
 
diff --git a/src/frontend/components/form-group/common/bootstrap-select.js b/src/frontend/components/form-group/common/bootstrap-select.js
index 7a7d8c877..668145d0e 100644
--- a/src/frontend/components/form-group/common/bootstrap-select.js
+++ b/src/frontend/components/form-group/common/bootstrap-select.js
@@ -1,3 +1,7 @@
+/**
+ * Set up event listeners for query builder rule filters and operators to initialise the bootstrap-select component.
+ * @param {JQuery} el The jQuery element to attach the event listeners to.
+ */
 export const refreshSelects = (el) => {
     const ruleFilterSelects = [];
     const operatorSelects = [];
@@ -47,4 +51,4 @@ export const refreshSelects = (el) => {
             $(operatorSelect).selectpicker('refresh');
         }
     });
-};
\ No newline at end of file
+};
diff --git a/src/frontend/components/form-group/dependent-fields/lib/component.js b/src/frontend/components/form-group/dependent-fields/lib/component.js
index d67f57111..ed3e53594 100644
--- a/src/frontend/components/form-group/dependent-fields/lib/component.js
+++ b/src/frontend/components/form-group/dependent-fields/lib/component.js
@@ -1,17 +1,31 @@
 import { Component } from 'component';
 import { getFieldValues } from 'get-field-values';
 
+/**
+ * Component to handle dependent fields in forms.
+ */
 class DependentFieldsComponent extends Component {
+    /**
+     * Create a new instance of the DependentFieldsComponent.
+     * @param {HTMLElement} element The HTML element that this component is attached to.
+     */
     constructor(element) {
         super(element);
         this.initDependentFields();
     }
 
+    /**
+     * Initialize the dependent fields by retrieving the field dependencies
+     */
     initDependentFields() {
         const field = this.getFieldDependency();
         this.setupDependentField(field);
     }
 
+    /**
+     * Get the field dependency from the element's data attribute.
+     * @returns {object} An object containing the field, condition, and rules for dependencies.
+     */
     getFieldDependency() {
         const dependency = $(this.element).data('dependency');
         const decoded = JSON.parse(atob(dependency));
@@ -46,16 +60,11 @@ class DependentFieldsComponent extends Component {
         };
     }
 
-    /***
-     *
-     * Handle the dependency connections between fields
-     * via regular expression checks on field values
-     *
-     * FIXME: It would be an improvement to abstract the
-     * different field types in GADS behind a common interface
-     * as opposed to using dom-attributes.
-     *
-    */
+    /**
+     * Handle the dependency connections between fields via regular expression checks on field values
+     * @todo It would be an improvement to abstract the different field types in GADS behind a common interface as opposed to using dom-attributes.
+     * @param {object} field The field object containing the condition and rules for dependencies.
+     */
     setupDependentField(field) {
         const condition = field.condition;
         const rules = field.rules;
diff --git a/src/frontend/components/form-group/display-conditions/lib/component.js b/src/frontend/components/form-group/display-conditions/lib/component.js
index 8735f23c5..c3c3c5d23 100644
--- a/src/frontend/components/form-group/display-conditions/lib/component.js
+++ b/src/frontend/components/form-group/display-conditions/lib/component.js
@@ -3,13 +3,23 @@ import '@lol768/jquery-querybuilder-no-eval/dist/js/query-builder.standalone.min
 import 'bootstrap-select/dist/js/bootstrap-select';
 import { refreshSelects } from 'components/form-group/common/bootstrap-select';
 
+/**
+ * Component for managing display conditions in form groups.
+ */
 class DisplayConditionsComponent extends Component {
+    /**
+     * Create a new DisplayConditionsComponent.
+     * @param {HTMLElement} element The HTML element for the component.
+     */
     constructor(element) {
         super(element);
         this.el = $(this.element);
         this.initDisplayConditions();
     }
 
+    /**
+     * Initialize the display conditions for the form group.
+     */
     initDisplayConditions() {
         const builderData = this.el.data();
         const filters = JSON.parse(atob(builderData.filters));
diff --git a/src/frontend/components/form-group/filter/lib/component.js b/src/frontend/components/form-group/filter/lib/component.js
index 4321dbae4..4dc1dc504 100644
--- a/src/frontend/components/form-group/filter/lib/component.js
+++ b/src/frontend/components/form-group/filter/lib/component.js
@@ -6,7 +6,14 @@ import { logging } from 'logging';
 import TypeaheadBuilder from 'util/typeahead';
 import { refreshSelects } from 'components/form-group/common/bootstrap-select';
 
+/**
+ * FilterComponent class for managing filter functionality in a query builder.
+ */
 class FilterComponent extends Component {
+    /**
+     * Create an instance of FilterComponent
+     * @param {HTMLElement} element The HTML element that contains the filter component
+     */
     constructor(element) {
         super(element);
         this.el = $(this.element);
@@ -88,6 +95,9 @@ class FilterComponent extends Component {
         this.initFilter();
     }
 
+    /**
+     * Initializes the filter component by setting up the query builder
+     */
     initFilter() {
         const self = this;
         const $builderEl = this.el;
@@ -193,6 +203,12 @@ class FilterComponent extends Component {
         }
     }
 
+    /**
+     * Get the URL for the filter API
+     * @param {number} layoutId The ID of the layout
+     * @param {string} urlSuffix The suffix for the URL to fetch filter data
+     * @returns {string} The complete URL for the filter API
+     */
     getURL(layoutId, urlSuffix) {
         const devEndpoint = window.siteConfig && window.siteConfig.urls.filterApi;
 
@@ -203,6 +219,9 @@ class FilterComponent extends Component {
         }
     }
 
+    /**
+     * Creates a global function to update the filter
+     */
     makeUpdateFilter() {
         window.UpdateFilter = (builder, ev) => {
             if (!builder.queryBuilder('validate')) ev.preventDefault();
@@ -211,6 +230,12 @@ class FilterComponent extends Component {
         };
     }
 
+    /**
+     * Build the filter object for the query builder
+     * @param {object} builderConfig The configuration object for the query builder
+     * @param {object} col The column object containing filter properties
+     * @returns {object} The filter object to be used in the query builder
+     */
     buildFilter = (builderConfig, col) => {
         return ({
             id: col.filterId,
@@ -225,6 +250,11 @@ class FilterComponent extends Component {
         });
     };
 
+    /**
+     * Build the operators for a filter based on its type
+     * @param {string} type The type of the filter (e.g., 'date', 'daterange')
+     * @returns {string[]} An array of operators for the filter type
+     */
     buildFilterOperators(type) {
         if (!['date', 'daterange'].includes(type)) return undefined;
         const operators = [
@@ -243,6 +273,10 @@ class FilterComponent extends Component {
         return operators;
     }
 
+    /**
+     * Get the properties for the typeahead used on this component
+     * @returns {object} Returns an object that renders the typeahead as expected
+     */
     get typeaheadProperties() {
         return {
             input: (container, input_name) => {
@@ -265,6 +299,14 @@ class FilterComponent extends Component {
         };
     }
 
+    /**
+     * Get the records based on the filter criteria
+     * @param {number} layoutId The ID of the layout
+     * @param {string} urlSuffix The suffix for the URL to fetch records
+     * @param {number} instanceId The ID of the instance
+     * @param {string} query The query string to filter records
+     * @returns {JQuery.jqXHR} An AJAX promise that resolves with the records
+     */
     getRecords = (layoutId, urlSuffix, instanceId, query) => {
         return (
             $.ajax({
diff --git a/src/frontend/components/form-group/input/lib/autocompleteComponent.ts b/src/frontend/components/form-group/input/lib/autocompleteComponent.ts
index 3660d985e..91685e36d 100644
--- a/src/frontend/components/form-group/input/lib/autocompleteComponent.ts
+++ b/src/frontend/components/form-group/input/lib/autocompleteComponent.ts
@@ -1,13 +1,23 @@
+/**
+ * A component for handling typeahead functionality
+ */
 class AutocompleteComponent {
     readonly type = 'autocomplete';
     input: JQuery<HTMLInputElement>;
     el: JQuery<HTMLElement>;
 
+    /**
+     * Create an instance of AutocompleteComponent
+     * @param {HTMLElement | JQuery<HTMLElement>} el The HTML element or jQuery object that contains the input field for autocomplete
+     */
     constructor(el: HTMLElement | JQuery<HTMLElement>) {
         this.el = $(el);
         this.input = this.el.find<HTMLInputElement>('.form-control');
     }
 
+    /**
+     * Initializes the autocomplete functionality by setting up the typeahead
+     */
     init() {
         const suggestionCallback = (suggestion: { id: number, name: string }) => {
             this.el.find('input[type="hidden"]').val(suggestion.id);
@@ -26,6 +36,10 @@ class AutocompleteComponent {
             });
     }
 
+    /**
+     * Create the URL for the autocomplete API endpoint
+     * @returns {string} The URL for the autocomplete API endpoint
+     */
     getURL(): string {
         //@ts-expect-error "Testing code used by Digitpaint."
         const devEndpoint = window.siteConfig?.urls?.autocompleteApi;
@@ -35,6 +49,10 @@ class AutocompleteComponent {
     }
 }
 
+/**
+ * Creates an instance of AutocompleteComponent and initializes it
+ * @param {HTMLElement | JQuery<HTMLElement>} el The HTML element or jQuery object that contains the input field for autocomplete
+ */
 export default function autocompleteComponent(el: HTMLElement | JQuery<HTMLElement>) {
     new AutocompleteComponent(el).init();
 }
diff --git a/src/frontend/components/form-group/input/lib/component.ts b/src/frontend/components/form-group/input/lib/component.ts
index c1e8882db..2a34ea95f 100644
--- a/src/frontend/components/form-group/input/lib/component.ts
+++ b/src/frontend/components/form-group/input/lib/component.ts
@@ -7,9 +7,25 @@ import dateComponent from './dateComponent';
 import autocompleteComponent from './autocompleteComponent';
 import { initValidationOnField } from 'validation';
 
+/**
+ * ComponentInitializer type for functions that initialize specific input components.
+ * @param {JQuery<HTMLElement> | HTMLElement} element The element to initialize the component on, can be a jQuery object or a native HTMLElement.
+ */
 type ComponentInitializer = (element: JQuery<HTMLElement> | HTMLElement) => void;
 
+/**
+ * InputComponent class to handle various input types.
+ * It initializes the appropriate component based on the class of the element.
+ */
 class InputComponent extends Component {
+    /**
+     * Map of component class names to their respective initializers.
+     * This allows for dynamic initialization of components based on the class of the element.
+     * @todo This could be changed to a Record<string, ComponentInitializer> for better type safety.
+     * @type { {[key: string]: ComponentInitializer} }
+     * @private
+     * @static
+     */
     private static componentMap: { [key: string]: ComponentInitializer } = {
         'input--password': passwordComponent,
         'input--logo': logoComponent,
@@ -19,12 +35,19 @@ class InputComponent extends Component {
         'input--autocomplete': autocompleteComponent
     };
 
+    /**
+     * Create an instance of InputComponent.
+     * @param {HTMLElement | JQuery<HTMLElement>} element The HTML element or jQuery object to initialize the component on.
+     */
     constructor(element: HTMLElement | JQuery<HTMLElement>) {
-        super(element);
+        super(element instanceof HTMLElement ? element : element[0]);
         this.initializeComponent();
         this.initializeValidation();
     }
 
+    /**
+     * Initializes the component based on the class of the element.
+     */
     private initializeComponent() {
         const $el = $(this.element);
 
@@ -36,6 +59,9 @@ class InputComponent extends Component {
         }
     }
 
+    /**
+     * Initializes validation on the input field if it has the 'input--required' class.
+     */
     private initializeValidation() {
         const $el = $(this.element);
 
diff --git a/src/frontend/components/form-group/input/lib/dateComponent.ts b/src/frontend/components/form-group/input/lib/dateComponent.ts
index 691c97e34..ced93dcea 100644
--- a/src/frontend/components/form-group/input/lib/dateComponent.ts
+++ b/src/frontend/components/form-group/input/lib/dateComponent.ts
@@ -1,20 +1,34 @@
 import initDateField from '../../../datepicker/lib/helper';
 
+/**
+ * DateComponent class to handle date input fields.
+ */
 class DateComponent {
     readonly type = 'date';
     el: JQuery<HTMLElement>;
     input: JQuery<HTMLInputElement>;
 
+    /**
+     * Creates an instance of DateComponent.
+     * @param {JQuery<HTMLElement> | HTMLElement} el The element to initialize the date component on, can be a jQuery object or a native HTMLElement.
+     */
     constructor(el: JQuery<HTMLElement> | HTMLElement) {
         this.el = el instanceof HTMLElement ? $(el) : el;
         this.input = this.el.find<HTMLInputElement>('.form-control');
     }
 
+    /**
+     * Initializes the date input field. This is really just a wrapper around the datepicker initialization.
+     */
     init() {
         initDateField(this.input);
     }
 }
 
+/**
+ * Create and initialize a date component.
+ * @param {JQuery<HTMLElement> | HTMLElement} el The element to initialize the date component on, can be a jQuery object or a native HTMLElement.
+ */
 export default function dateComponent(el: JQuery<HTMLElement> | HTMLElement) {
     (new DateComponent(el)).init();
 }
diff --git a/src/frontend/components/form-group/input/lib/documentComponent.ts b/src/frontend/components/form-group/input/lib/documentComponent.ts
index c46d3b9f0..22de37c25 100644
--- a/src/frontend/components/form-group/input/lib/documentComponent.ts
+++ b/src/frontend/components/form-group/input/lib/documentComponent.ts
@@ -7,17 +7,46 @@ import { RenameEvent } from 'components/button/lib/rename-button';
 import { FileDropEvent } from 'util/filedrag';
 import ErrorHandler from 'util/errorHandler';
 
+/**
+ * Interface for the file data returned from the server.
+ */
 interface FileData {
+    /**
+     * Identifier for the file.
+     * @type {number | string}
+     */
     id: number | string;
+    /**
+     * Name of the file.
+     * @type {string}
+     */
     filename: string;
 }
 
+/**
+ * Interface for the response received after renaming a file.
+ */
 interface RenameResponse {
+    /**
+     * Identifier for the file.
+     * @type {number | string}
+     */
     id: number | string;
+    /**
+     * Name of the file after renaming.
+     * @type {string}
+     */
     name: string;
+    /**
+     * Indicates whether the operation was successful.
+     * @type {boolean}
+     */
     is_ok: boolean;
 }
 
+/**
+ * DocumentComponent class for handling document upload functionality.
+ */
 class DocumentComponent {
     readonly type = 'document';
     readonly el: JQuery<HTMLElement>;
@@ -25,6 +54,10 @@ class DocumentComponent {
     errors!: (string|Error)[];
     handler!: ErrorHandler;
 
+    /**
+     * Create a new DocumentComponent.
+     * @param {JQuery<HTMLElement> | HTMLElement} el The HTML element for the document component, can be a jQuery object or a plain HTMLElement.
+     */
     constructor(el: JQuery<HTMLElement> | HTMLElement) {
         this.el = $(el);
         this.el.closest('.fieldset').find('.rename')
@@ -37,7 +70,11 @@ class DocumentComponent {
         this.fileInput = this.el.find<HTMLInputElement>('.form-control-file');
     }
 
-    init() {
+    /**
+     * Initialize the document component by setting up event listeners and drag-and-drop functionality.
+     * @throws {Error} If the file upload element cannot be found.
+     */
+    async init() {
         const url = this.el.data('fileupload-url');
 
         const tokenField = this.el.closest('form').find('input[name="csrf_token"]');
@@ -76,8 +113,14 @@ class DocumentComponent {
         });
     }
 
+    /**
+     * Show the progress of the file upload.
+     * @param {string} file The file the progress bar is for
+     * @param {number} loaded The number of bytes loaded so far.
+     * @param {number} total The total number of bytes to be loaded.
+     */
     showProgress(file: string, loaded: number, total: number) {
-        let uploadProgression = Math.round((loaded / total) * 100);
+        let uploadProgression = (loaded / total) * 100;
         if (uploadProgression == Infinity) {
             // This will occur when there is an error uploading the file or the file is empty
             uploadProgression = 100;
@@ -92,6 +135,11 @@ class DocumentComponent {
         barContainer.find('.progress-bar__progress').css('width', `${uploadProgression}%`);
     }
 
+    /**
+     * Create a progress bar for the file upload
+     * @param el The HTML element to create the progressbar in
+     * @param file The name of the file the progress bar is for
+     */
     createProgressBar(el: JQuery<HTMLElement>, file: string) {
         const progressBar = $(`
             <div class="progress-bar__container" data-file-name="${file}">
@@ -105,7 +153,14 @@ class DocumentComponent {
         progressBar.show();
     }
 
-    handleAjaxUpload(uri: string, csrf_token: string, file: File, columnId: number) {
+    /**
+     * Upload a file via AJAX.
+     * @param {string} uri The URI to which the file will be uploaded.
+     * @param {string} csrf_token The CSRF token for security.
+     * @param {File} file The file to be uploaded.
+     * @param {number} columnId The column ID the upload is for
+     */
+    async handleAjaxUpload(uri: string, csrf_token: string, file: File, columnId: number) {
         try {
             if (!file) this.showException(new Error('No file provided'));
 
@@ -132,6 +187,12 @@ class DocumentComponent {
         }
     }
 
+    /**
+     * Add a file to the field.
+     * @param {object} file The file to be added to the field.
+     * @param {number | string} file.id The ID of the file.
+     * @param {string} file.name The name of the file.
+     */
     addFileToField(file: { id: number | string; name: string }) {
         const $fieldset = this.el.closest('.fieldset');
         const $ul = $fieldset.find('.fileupload__files');
@@ -171,6 +232,14 @@ class DocumentComponent {
         });
     }
 
+    /**
+     * Rename a file.
+     * @param {number} fileId The ID of the file to be renamed.
+     * @param {string} oldName The current name of the file.
+     * @param {string} newName The new name for the file.
+     * @param {string} csrf_token The CSRF token for security.
+     * @param {boolean} is_new Indicates if the file is new (default is false).
+     */
     private async renameFile(fileId: number, oldName: string, newName: string, csrf_token: string, is_new: boolean = false) { // for some reason using the ev.target doesn't allow for changing of the data attribute - I don't know why, so I've used the button itself
         try {
             const filename = newName;
@@ -197,6 +266,10 @@ class DocumentComponent {
         }
     }
 
+    /**
+     * Show any errors client-side.
+     * @param e The error to be shown, can be a string or an Error object.
+     */
     showException(e: any) {
         this.handler.addError(e instanceof Error ? e.message : typeof e == 'object' && 'message' in e ? e.message : e.toString());
     }
@@ -205,6 +278,7 @@ class DocumentComponent {
 /**
  * Create a new document component
  * @param {JQuery<HTMLElement> | HTMLElement} el The element to attach the document component to
+ * @returns {DocumentComponent} The initialized document component
  */
 export default function documentComponent(el: JQuery<HTMLElement> | HTMLElement) {
     const component = new DocumentComponent(el);
diff --git a/src/frontend/components/form-group/input/lib/fileComponent.ts b/src/frontend/components/form-group/input/lib/fileComponent.ts
index f70d98449..45a47b30e 100644
--- a/src/frontend/components/form-group/input/lib/fileComponent.ts
+++ b/src/frontend/components/form-group/input/lib/fileComponent.ts
@@ -3,6 +3,9 @@ import { FileDropEvent } from 'util/filedrag';
 import { formdataMapper } from 'util/mapper/formdataMapper';
 import { upload } from 'util/upload/UploadControl';
 
+/**
+ * FileComponent class for handling file upload functionality.
+ */
 class FileComponent {
     el: JQuery<HTMLElement>;
     fileInput: JQuery<HTMLInputElement>;
@@ -12,6 +15,10 @@ class FileComponent {
 
     protected readonly type = 'file';
 
+    /**
+     * Create a new FileComponent.
+     * @param {HTMLElement | JQuery<HTMLElement>} el The HTML element for the file component, can be a jQuery object or a plain HTMLElement.
+     */
     constructor(el: HTMLElement | JQuery<HTMLElement>) {
         this.el = el instanceof HTMLElement ? $(el) : el;
         this.fileInput = this.el.find('.form-control-file') as JQuery<HTMLInputElement>;
@@ -20,6 +27,9 @@ class FileComponent {
         this.inputFileLabel = this.el.find('.input__file-label');
     }
 
+    /**
+     * Initialize the file component by setting up event listeners and drag-and-drop functionality.
+     */
     init() {
         const dropTarget = this.el.closest('.file-upload');
         if (dropTarget) {
@@ -63,6 +73,10 @@ class FileComponent {
         }
     };
 
+    /**
+     * Handle the change event when a file is selected.
+     * @param {JQuery.ChangeEvent<HTMLInputElement>} ev The change event triggered when a file is selected.
+     */
     changeFile = (ev: JQuery.ChangeEvent<HTMLInputElement>) => {
         const [file] = ev.target.files!;
         const { name: fileName } = file;
@@ -72,21 +86,32 @@ class FileComponent {
         this.fileDelete.removeClass('hidden');
     };
 
+    /**
+     * Upload the file when the input file label is focused and the space or enter key is pressed.
+     * @param {JQuery.KeyUpEvent} ev The keyup event triggered when the input file label is focused.
+     */
     uploadFile = (ev: JQuery.KeyUpEvent) => {
         if (ev.which === 32 || ev.which === 13) {
             this.fileInput.trigger('click');
         }
     };
 
+    /**
+     * Delete the selected file and reset the file input and display.
+     * @todo set focus back to input__file-label without triggering keyup event on it
+     */
     deleteFile = () => {
         this.fileName.text('No file chosen');
         this.fileName.attr('title', '');
         this.fileInput.val('');
         this.fileDelete.addClass('hidden');
-        // TO DO: set focus back to input__file-label without triggering keyup event on it
     };
 }
 
+/**
+ * Create a new FileComponent instance and initialize it.
+ * @param {HTMLElement | JQuery<HTMLElement>} el The HTML element for the file component, can be a jQuery object or a plain HTMLElement.
+ */
 export default function fileComponent(el: HTMLElement | JQuery<HTMLElement>) {
     const component = new FileComponent(el);
     component.init();
diff --git a/src/frontend/components/form-group/input/lib/logoComponent.ts b/src/frontend/components/form-group/input/lib/logoComponent.ts
index 2c23b5317..0d791b5d3 100644
--- a/src/frontend/components/form-group/input/lib/logoComponent.ts
+++ b/src/frontend/components/form-group/input/lib/logoComponent.ts
@@ -1,18 +1,28 @@
 import { formdataMapper } from 'util/mapper/formdataMapper';
 import { upload } from 'util/upload/UploadControl';
 
+/**
+ * LogoComponent class for handling logo upload functionality.
+ */
 class LogoComponent {
     el: JQuery<HTMLElement>;
     logoDisplay: JQuery<HTMLImageElement>;
     fileInput: JQuery<HTMLInputElement>;
     protected readonly type = 'logo';
 
+    /**
+     * Create a new LogoComponent.
+     * @param {JQuery<HTMLElement> | HTMLElement} el The HTML element for the logo component, can be a jQuery object or a plain HTMLElement.
+     */
     constructor(el: JQuery<HTMLElement> | HTMLElement) {
         this.el = $(el);
         this.logoDisplay = this.el.parent().find('img');
         this.fileInput = this.el.find('.form-control-file') as JQuery<HTMLInputElement>;
     }
 
+    /**
+     * Initialize the LogoComponent.
+     */
     init() {
         if (this.logoDisplay.attr('src') === '#') {
             this.logoDisplay.hide();
@@ -23,6 +33,10 @@ class LogoComponent {
         this.fileInput.on('change', this.handleFileChange);
     }
 
+    /**
+     * Handle the file input change event to upload the selected file.
+     * @param {JQuery.ChangeEvent<HTMLInputElement>} ev The change event triggered when a file is selected.
+     */
     handleFileChange = (ev: JQuery.ChangeEvent<HTMLInputElement>) => {
         ev.preventDefault();
         const url = this.el.data('fileupload-url');
@@ -41,6 +55,10 @@ class LogoComponent {
     };
 }
 
+/**
+ * Create a new LogoComponent.
+ * @param {HTMLElement} el The HTML element for the logo component.
+ */
 export default function logoComponent(el: JQuery<HTMLElement> | HTMLElement) {
     const component = new LogoComponent(el);
     component.init();
diff --git a/src/frontend/components/form-group/input/lib/passwordComponent.ts b/src/frontend/components/form-group/input/lib/passwordComponent.ts
index 47d09a6fe..d03096680 100644
--- a/src/frontend/components/form-group/input/lib/passwordComponent.ts
+++ b/src/frontend/components/form-group/input/lib/passwordComponent.ts
@@ -1,3 +1,6 @@
+/**
+ * PasswordComponent class for handling password input fields with reveal functionality.
+ */
 class PasswordComponent {
     // For testing purposes
     protected readonly type = 'password';
@@ -6,18 +9,28 @@ class PasswordComponent {
     btnReveal: JQuery<HTMLElement>;
     input: JQuery<HTMLInputElement>;
 
+    /**
+     * Create a new PasswordComponent.
+     * @param {JQuery<HTMLElement|HTMLElement>} el The HTML element for the password component, can be a jQuery object or a plain HTMLElement.
+     */
     constructor(el: JQuery<HTMLElement> | HTMLElement) {
         this.el = $(el);
         this.btnReveal = this.el.find('.input__reveal-password');
         this.input = this.el.find('.form-control') as JQuery<HTMLInputElement>;
     }
 
+    /**
+     * Initialize the PasswordComponent.
+     */
     init() {
         if (this.btnReveal.length === 0) return;
 
         this.btnReveal.removeClass('show').on('click', this.handleClickReveal);
     }
 
+    /**
+     * Handle the click event to toggle password visibility.
+     */
     private handleClickReveal = () => {
         const inputType = this.input.attr('type');
         this.input.attr('type', inputType === 'password' ? 'text' : 'password');
@@ -25,6 +38,10 @@ class PasswordComponent {
     };
 }
 
+/**
+ * Create a new PasswordComponent.
+ * @param {HTMLElement | JQuery<HTMLElement>} el The HTML element for the password component.
+ */
 export default function passwordComponent(el: JQuery<HTMLElement> | HTMLElement) {
     new PasswordComponent(el).init();
 }
diff --git a/src/frontend/components/form-group/multiple-select/lib/component.js b/src/frontend/components/form-group/multiple-select/lib/component.js
index 60c5831f1..18abec418 100644
--- a/src/frontend/components/form-group/multiple-select/lib/component.js
+++ b/src/frontend/components/form-group/multiple-select/lib/component.js
@@ -4,7 +4,14 @@ import initDateField from 'components/datepicker/lib/helper';
 const SELECT_PLACEHOLDER = 'select__placeholder';
 const SELECT_MENU_ITEM_ACTIVE = 'select__menu-item--active';
 
+/**
+ * Component for multiple select form elements.
+ */
 class MultipleSelectComponent extends Component {
+    /**
+     * Create a new MultipleSelectComponent.
+     * @param {HTMLElement} element The HTML element for the multiple select component.
+     */
     constructor(element) {
         super(element);
         this.el = $(this.element);
@@ -16,6 +23,9 @@ class MultipleSelectComponent extends Component {
         this.initMultipleSelect(this.el);
     }
 
+    /**
+     * Initialize the multiple select component.
+     */
     initMultipleSelect() {
         if (!this.multipleSelectList) {
             return;
@@ -32,6 +42,10 @@ class MultipleSelectComponent extends Component {
         this.addBtn.on('click', () => { this.handleClick(); });
     }
 
+    /**
+     * Handle the visibility of the delete button based on input values.
+     * @param {HTMLElement} row The row element to check for delete button visibility.
+     */
     handleDeleteButtonVisibility(row) {
         const delBtn = $(row).find('.btn-delete');
         const rowInputs = $(row).find('input[type="hidden"]');
@@ -45,6 +59,9 @@ class MultipleSelectComponent extends Component {
         });
     }
 
+    /**
+     * Handle the click event to add a new multiple select row.
+     */
     handleClick() {
         this.el.find('.btn-delete').removeClass('btn-delete--hidden');
 
@@ -90,6 +107,10 @@ class MultipleSelectComponent extends Component {
         $newMultipleSelectRow.appendTo(this.multipleSelectList);
     }
 
+    /**
+     * Handle the click event to delete a multiple select row.
+     * @param {JQuery.ClickEvent} ev The click event triggered by the delete button.
+     */
     handleClickDelete(ev) {
         const multipleSelectArray = this.multipleSelectList.find('> .multiple-select__row');
 
@@ -108,6 +129,10 @@ class MultipleSelectComponent extends Component {
         }
     }
 
+    /**
+     * Reset a row in the multiple select component.
+     * @param {HTMLElement} row The row element to reset.
+     */
     resetRow(row) {
         const rowInputs = $(row).find('input[type="hidden"]');
 
diff --git a/src/frontend/components/form-group/people-filter/lib/component.ts b/src/frontend/components/form-group/people-filter/lib/component.ts
index 377035058..799a582dc 100644
--- a/src/frontend/components/form-group/people-filter/lib/component.ts
+++ b/src/frontend/components/form-group/people-filter/lib/component.ts
@@ -2,29 +2,78 @@ import { Component } from 'component';
 import '@lol768/jquery-querybuilder-no-eval';
 
 declare global {
+    // Global interface for the window object to include the UpdatePeopleFilter method.
     interface Window {
+        /**
+         * Update the people filter based on the current query builder state.
+         * @param builder The jQuery QueryBuilder instance.
+         * @param ev The event that triggered the update.
+         */
         UpdatePeopleFilter: (builder: JQuery, ev: Event | JQuery.Event) => void;
     }
 
+    /**
+     * jQuery interface extension to include queryBuilder methods.
+     */
     interface JQuery<TElement = HTMLElement> {
+        /**
+         * Create or initialize a query builder with the given filters.
+         * @param filters The filter settings to initialize the query builder.
+         * @returns A jQuery object for chaining.
+         */
         queryBuilder(filters: any): JQuery<TElement>;
+        /**
+         * Perform a method call on the query builder.
+         * @param method The method to call on the query builder.
+         * @param args The arguments to pass to the method.
+         * @returns The result of the method call.
+         */
         queryBuilder(method: string, ...args: any[]): any;
     }
 }
 
+/**
+ * Interface for filter settings used in the query builder.
+ */
 interface FilterSettings {
+    /**
+     * Optional filter for items that are not done.
+     * @type {any}
+     */
     filterNotDone?: any;
+    /**
+     * Settings for the query builder filters.
+     * @type {any}
+     */
     filters: any;
+    /**
+     * List of operators available for the query builder.
+     * @type {string[]}
+     */
     operators: string[];
+    /**
+     * Whether to allow empty values in the query builder.
+     * @type {boolean}
+     */
     allow_empty: boolean;
 }
 
+/**
+ * Component for the people filter form group.
+ */
 class PeopleFilterComponent extends Component {
+    /**
+     * Create a new PeopleFilterComponent.
+     * @param {HTMLElement} element The HTML element for the people filter component.
+     */
     constructor(public element: HTMLElement) {
         super(element);
         this.init();
     }
 
+    /**
+     * Initialize the people filter component.
+     */
     init() {
         const elementData = $(this.element).data('filters');
         const peopleDisplayData = $('#people-display').data('filter-base64');
diff --git a/src/frontend/components/form-group/radio-group/lib/component.js b/src/frontend/components/form-group/radio-group/lib/component.js
index b7ee5e433..d23f26a3f 100644
--- a/src/frontend/components/form-group/radio-group/lib/component.js
+++ b/src/frontend/components/form-group/radio-group/lib/component.js
@@ -1,7 +1,14 @@
 import { Component } from 'component';
 import { initValidationOnField } from 'validation';
 
+/**
+ * Component for radio group form elements.
+ */
 class RadioGroupComponent extends Component {
+    /**
+     * Create a new RadioGroupComponent.
+     * @param {HTMLElement} element The HTML element for the radio group.
+     */
     constructor(element) {
         super(element);
         this.el = $(this.element);
diff --git a/src/frontend/components/form-group/select-widget/lib/component.js b/src/frontend/components/form-group/select-widget/lib/component.js
index 9961bcbc5..c2c6b0970 100644
--- a/src/frontend/components/form-group/select-widget/lib/component.js
+++ b/src/frontend/components/form-group/select-widget/lib/component.js
@@ -1,12 +1,11 @@
 // We import Bootstrap because there is an error that throws if we don't (this.collapse is not a function).
 /* eslint-disable @typescript-eslint/no-this-alias */
-import 'bootstrap';
 import { Component } from 'component';
-import { logging } from 'logging';
 import { fromJson } from 'util/common';
+import { logging } from 'logging';
 import { initValidationOnField } from 'validation';
 
-/*
+/**
  * A SelectWidget is a custom disclosure widget
  * with multi or single options selectable.
  * SelectWidgets can depend on each other;
@@ -14,6 +13,10 @@ import { initValidationOnField } from 'validation';
  * Widget "B" might not be displayed.
  */
 class SelectWidgetComponent extends Component {
+    /**
+     * Create a new SelectWidgetComponent.
+     * @param {HTMLElement} element - The HTML element that this component is attached to.
+     */
     constructor(element) {
         super(element);
         this.el = $(this.element);
@@ -45,6 +48,9 @@ class SelectWidgetComponent extends Component {
         }
     }
 
+    /**
+     * Initializes the SelectWidget component.
+     */
     initSelectWidget() {
         this.updateState();
         if (this.$widget.is('[readonly]')) return;
@@ -99,6 +105,9 @@ class SelectWidgetComponent extends Component {
         });
     }
 
+    /**
+     * Handles the click event on the widget.
+     */
     handleWidgetClick() {
         if (this.$trigger.attr('aria-expanded') === 'true') {
             this.collapse(this.$widget, this.$trigger, this.$target);
@@ -107,6 +116,9 @@ class SelectWidgetComponent extends Component {
         }
     }
 
+    /**
+     * Handles clicks outside the widget to collapse it.
+     */
     handleDocumentClick(e) {
         const clickedOutside = !this.el.is(e.target) && this.el.has(e.target).length === 0;
         if (clickedOutside) {
@@ -114,6 +126,9 @@ class SelectWidgetComponent extends Component {
         }
     }
 
+    /**
+     * Handles keyup events on the search input.
+     */
     handleKeyUp(e) {
         const searchValue = $(e.target)
             .val()
@@ -169,6 +184,9 @@ class SelectWidgetComponent extends Component {
         }
     }
 
+    /**
+     * Handles keydown events on the search input.
+     */
     handleKeyDown(e) {
         const key = e.which || e.keyCode;
 
@@ -214,11 +232,17 @@ class SelectWidgetComponent extends Component {
         }
     }
 
+    /**
+     * Handles the focus event on the search input to expand the widget.
+     */
     expandWidgetHandler(e) {
         e.stopPropagation();
         this.expand(this.$widget, this.$trigger, this.$target);
     }
 
+    /**
+     * Collapses the select widget.
+     */
     collapse($widget, $trigger) {
         this.$selectWidget.removeClass('select-widget--open');
         $trigger.attr('aria-expanded', false);
@@ -234,12 +258,18 @@ class SelectWidgetComponent extends Component {
         }, 50);
     }
 
+    /**
+     * Updates the state of the select widget based on the current items.
+     */
     updateState() {
         const $visible = this.$current.children('[data-list-item]:not([hidden])');
 
         this.$current.toggleClass('empty', $visible.length === 0);
     }
 
+    /**
+     * Checks if the widget should be closed based on focus changes.
+     */
     possibleCloseWidget(e) {
         const newlyFocussedElement = e.relatedTarget || document.activeElement;
 
@@ -253,6 +283,11 @@ class SelectWidgetComponent extends Component {
         }
     }
 
+    /**
+     * Connects the multi-select items to their associated checkboxes.
+     * @returns {(...*)=>*} A function that connects the multi-select items.
+     * @todo Remove deprecated key codes and ensure compatibility with modern browsers.
+     */
     connectMulti() {
         const self = this;
         return function () {
@@ -308,6 +343,10 @@ class SelectWidgetComponent extends Component {
         };
     }
 
+    /**
+     * Connects the single-select items to their associated checkboxes.
+     * @todo Remove deprecated key codes and ensure compatibility with modern browsers.
+     */
     connectSingle() {
         const self = this;
 
@@ -355,6 +394,9 @@ class SelectWidgetComponent extends Component {
         });
     }
 
+    /**
+     * Connects the select widget items to their associated checkboxes.
+     */
     connect() {
         if (this.multi) {
             this.$currentItems.each(this.connectMulti());
@@ -363,6 +405,16 @@ class SelectWidgetComponent extends Component {
         }
     }
 
+    /**
+     * Creates a list item for the currently selected value.
+     * @param {boolean} multi - Whether the widget is multi-select.
+     * @param {string} field - The field name for the select widget.
+     * @param {string|null} value_id - The ID of the selected value.
+     * @param {string} value_text - The text of the selected value.
+     * @param {string} value_html - The HTML representation of the selected value.
+     * @param {boolean} checked - Whether the item is checked.
+     * @returns {jQuery} - The jQuery object representing the list item.
+     */
     currentLi(multi, field, value_id, value_text, value_html, checked) {
         if (multi && !value_id) {
             return $('<li class="none-selected">blank</li>');
@@ -389,6 +441,16 @@ class SelectWidgetComponent extends Component {
         return $li;
     }
 
+    /**
+     * Creates a list item for the available options.
+     * @param {boolean} multi - Whether the widget is multi-select.
+     * @param {string} field - The field name for the select widget.
+     * @param {string|null} value_id - The ID of the available value.
+     * @param {string} value_text - The text of the available value.
+     * @param {string} label - The label for the available value.
+     * @param {boolean} checked - Whether the item is checked.
+     * @returns {jQuery|null} - The jQuery object representing the list item, or null if no value_id is provided in multi-select mode.
+     */
     availableLi(multi, field, value_id, value_text, label, checked) {
         if (this.multi && !value_id) {
             return null;
@@ -449,6 +511,11 @@ class SelectWidgetComponent extends Component {
     }
 
     //Some odd scoping issues here - but it works
+    /**
+     * Updates the JSON data for the select widget.
+     * @param {string} url - The URL to fetch the JSON data from.
+     * @param {boolean} typeahead - Whether the update is for a typeahead search
+     */
     updateJson(url, typeahead) {
         const formData = { 'csrf_token': $('body').data('csrf') };
         this.loadCounter++;
@@ -533,7 +600,8 @@ class SelectWidgetComponent extends Component {
                 });
 
             } else {
-                const errorMessage = data.message;
+                const errorMessage =
+                    data.error === 1 ? data.message : 'Oops! Something went wrong.';
                 const errorLi = $(
                     '<li class="answer answer--blank alert alert-danger d-flex flex-row justify-content-start"><span class="control"><label>' +
                     errorMessage +
@@ -566,6 +634,9 @@ class SelectWidgetComponent extends Component {
             });
     }
 
+    /**
+     * Fetches options for the select widget based on linked fields.
+     */
     fetchOptions() {
         const filterEndpoint = this.$selectWidget.data('filter-endpoint');
         const filterFields = this.$selectWidget.data('filter-fields');
@@ -618,6 +689,12 @@ class SelectWidgetComponent extends Component {
         this.lastFetchParams = fetchParams;
     }
 
+    /**
+     * Expands the select widget to show available options.
+     * @param {jQuery} $widget - The jQuery object representing the widget.
+     * @param {jQuery} $trigger - The jQuery object representing the trigger element.
+     * @param {jQuery} $target - The jQuery object representing the target element
+     */
     expand($widget, $trigger, $target) {
         if ($trigger.attr('aria-expanded') === 'true') {
             return;
diff --git a/src/frontend/components/form-group/select/lib/component.js b/src/frontend/components/form-group/select/lib/component.js
index 03885573c..36ab875dd 100644
--- a/src/frontend/components/form-group/select/lib/component.js
+++ b/src/frontend/components/form-group/select/lib/component.js
@@ -5,7 +5,14 @@ const SELECT_PLACEHOLDER = 'select__placeholder';
 const SELECT_MENU_ITEM_ACTIVE = 'select__menu-item--active';
 const SELECT_MENU_ITEM_HOVER = 'select__menu-item--hover';
 
+/**
+ * Select component that handles custom select functionality
+ */
 class SelectComponent extends Component {
+    /**
+     * Create a new SelectComponent instance
+     * @param {HTMLElement} element The select element
+     */
     constructor(element) {
         super(element);
         this.el = $(this.element);
@@ -24,9 +31,17 @@ class SelectComponent extends Component {
         }
     }
 
+    /**
+     * @type {SelectComponent} self
+     * @description Reference to the current instance for static methods
+     * @static
+     * @todo Why is this needed?
+     */
     static self = this;
 
-    // Intializes the select
+    /**
+     * Intializes the select
+     */
     initSelect() {
         if (!this.options) {
             return;
@@ -42,6 +57,11 @@ class SelectComponent extends Component {
         }
     }
 
+    /**
+     * Add an option to the select menu
+     * @param {string} name The name of the option to add
+     * @param {string} value The value of the option to add
+     */
     addOption(name, value) {
         const newOption = document.createElement('li');
 
@@ -57,6 +77,10 @@ class SelectComponent extends Component {
         this.options = this.el.find('.select__menu-item');
     }
 
+    /**
+     * Remove an option from the select menu
+     * @param {string} value The value of the option to remove
+     */
     removeOption(value) {
         this.options.each((i, option) => {
             if (parseInt(option.dataset.value) === value) {
@@ -65,6 +89,11 @@ class SelectComponent extends Component {
         });
     }
 
+    /**
+     * Update an option in the select menu
+     * @param {string} name The name of the option to update
+     * @param {string} value The value of the option to update
+     */
     updateOption(name, value) {
         this.options.each((i, option) => {
             if (parseInt(option.dataset.value) === value) {
@@ -74,23 +103,35 @@ class SelectComponent extends Component {
         });
     }
 
+    /**
+     * Bind a click handler to an option
+     * @param {HTMLElement} option The option element to bind the click handler to
+     */
     bindOptionHandler(option) {
         $(option).on('click', (ev) => { this.handleClick(ev); });
     }
 
-    // Handles the opening of the select
+    /**
+     * Handles the opening of the select
+     */
     handleOpen() {
         this.el.on('keydown', (ev) => { this.supportKeyboardNavigation(ev); });
     }
 
-    // Handles the closing of the select
+    /**
+     * Handles the closing of the select
+     * @param {JQuery.TriggeredEvent} ev The event that triggered the close
+     */
     handleClose(ev) {
         this.el.dropdown('hide');
         ev.stopPropagation();
         this.el.off('keydown');
     }
 
-    // Handles a change event of the (hidden) input
+    /**
+     * Handles a change event of the (hidden) input
+     * @param {JQuery.ChangeEvent} ev The event that triggered the change
+     */
     handleChange(ev) {
         const value = $(ev.target).val();
 
@@ -109,7 +150,10 @@ class SelectComponent extends Component {
         }
     }
 
-    // Handles a click event on one of the options
+    /**
+     * Handles a click event on one of the options
+     * @param {JQuery.ClickEvent} ev The event that triggered the click
+     */
     handleClick(ev) {
         const option = $(ev.target);
         const value = option.data('value');
@@ -132,6 +176,10 @@ class SelectComponent extends Component {
         this.toggleButton.trigger('focus');
     }
 
+    /**
+     * Reveals the instance associated with the clicked option
+     * @param {JQuery<HTMLElement>} $option The option that was clicked
+     */
     revealInstance($option) {
         const arrSelectRevealInstances = $(`.select-reveal--${this.input.attr('id')} > .select-reveal__instance`);
         let instanceID = '';
@@ -151,6 +199,11 @@ class SelectComponent extends Component {
         this.disableFields($(instanceID), false);
     }
 
+    /**
+     * Enable or disable fields within a container
+     * @param {HTMLElement} container The container element that holds the fields to disable
+     * @param {boolean} bDisable True to disable the fields, false to enable them
+     */
     disableFields(container, bDisable) {
         const $fields = $(container).find('input, textarea');
 
@@ -161,7 +214,10 @@ class SelectComponent extends Component {
         }
     }
 
-    // Updates the hovered option
+    /**
+     * Updates the hovered option
+     * @param {number} newIndex The index of the new hovered option
+     */
     updateHovered(newIndex) {
         const prevOption = this.options[this.optionHoveredIndex];
         const option = this.options[newIndex];
@@ -176,7 +232,10 @@ class SelectComponent extends Component {
         this.optionHoveredIndex = newIndex;
     }
 
-    // Updates the checked option
+    /**
+     * Updates the checked option
+     * @param {HTMLElement} option The option element to update
+     */
     updateChecked(option) {
         const value = $(option).data('value');
         const text = $(option).html();
@@ -193,7 +252,10 @@ class SelectComponent extends Component {
         this.optionChecked = value;
     }
 
-    // Handles the keyboard events
+    /**
+     * Handles the keyboard events for navigation within the select menu
+     * @param {JQuery.KeyDownEvent} ev The keyboard event
+     */
     supportKeyboardNavigation(ev) {
     // press down -> go next
         if (ev.keyCode === 40 && this.optionHoveredIndex < this.optionsCount - 1) {
@@ -229,7 +291,9 @@ class SelectComponent extends Component {
         }
     }
 
-    // Reset the select to it's initial state
+    /**
+     * Reset the select to it's initial state
+     */
     resetSelect() {
         const placeholder = this.input[0].placeholder;
 
diff --git a/src/frontend/components/form-group/textarea/lib/component.js b/src/frontend/components/form-group/textarea/lib/component.js
index 2e689dd82..af75d807b 100644
--- a/src/frontend/components/form-group/textarea/lib/component.js
+++ b/src/frontend/components/form-group/textarea/lib/component.js
@@ -1,7 +1,14 @@
 import { Component } from 'component';
 import { initValidationOnField } from 'validation';
 
+/**
+ * Text area component that handles auto-adjusting height
+ */
 class TextareaComponent extends Component {
+    /**
+     * Create a new TextareaComponent instance
+     * @param {HTMLElement} element The textarea element
+     */
     constructor(element) {
         super(element);
         this.el = $(this.element);
@@ -20,6 +27,10 @@ class TextareaComponent extends Component {
             });
         }
     }
+
+    /**
+     * Adjust the height of the textarea based on its content
+     */
     adjustTextareaHeight() {
         const $textarea = this.el.find('textarea.auto-adjust');
 
@@ -56,4 +67,5 @@ class TextareaComponent extends Component {
         $textarea.css('height', `${adjustedHeight}rem`);
     }
 }
+
 export default TextareaComponent;
diff --git a/src/frontend/components/form-group/tree/lib/component.js b/src/frontend/components/form-group/tree/lib/component.js
index ee6a4257e..ea010da60 100644
--- a/src/frontend/components/form-group/tree/lib/component.js
+++ b/src/frontend/components/form-group/tree/lib/component.js
@@ -2,7 +2,14 @@ import { Component } from 'component';
 import 'jstree';
 import { initValidationOnField, validateTree } from 'validation';
 
+/**
+ * Component to display a tree structure using jstree.
+ */
 class TreeComponent extends Component {
+    /**
+     * Create a new TreeComponent.
+     * @param {HTMLElement} element The HTML element that this component is attached to.
+     */
     constructor(element) {
         super(element);
         this.el = $(this.element);
@@ -24,6 +31,9 @@ class TreeComponent extends Component {
         }
     }
 
+    /**
+     * Initializes the jstree with the appropriate configuration.
+     */
     initTree() {
         const idsAsParams = this.$treeContainer.data('ids-as-params');
         const treeConfig = {
@@ -50,8 +60,7 @@ class TreeComponent extends Component {
         // The below fix is to prevent the tree from erroring when it is a multivalue and a value is deselected
         if (!this.multiValue) {
             //Deselect Fix - 26.04.24 - DR
-            //Unless you have a click event, the select_node event doesn't trigger when you click on the same node - I don't know why this is, 
-            //all I know is, it gave me a headache! Either way, it appears to work now, so I'm happy!!
+            //Unless you have a click event, the select_node event doesn't trigger when you click on the same node - I don't know why this is
             let node;
 
             this.$treeContainer.on('click', '.jstree-clicked', () => {
@@ -84,6 +93,12 @@ class TreeComponent extends Component {
         this.$treeContainer.jstree(true).settings.checkbox.cascade = 'undetermined';
     }
 
+    /**
+     * Get the data for the jstree.
+     * @param {number} id The ID of the tree to fetch data for.
+     * @param {string} idsAsParams The parameters in the request.
+     * @returns {object} The configuration object for the jstree data source.
+     */
     getData(id, idsAsParams) {
         const devEndpoint = window.siteConfig && window.siteConfig.urls.treeApi;
         const layout_identifier = $('body').data('layout-identifier');
@@ -105,6 +120,12 @@ class TreeComponent extends Component {
         );
     }
 
+    /**
+     * Handle the selection of a node in the jstree.
+     * @param {JQuery.TriggeredEvent} e The event triggered by the jstree.
+     * @param {object} data The data object containing the node information.
+     * @todo This method can have the event parameter removed, as it is not used.
+     */
     handleSelect(e, data) {
         if (data.node.children.length == 0) {
             return;
@@ -117,6 +138,12 @@ class TreeComponent extends Component {
         }
     }
 
+    /**
+     * Handle change to the jstree selection.
+     * @param {JQuery.TriggeredEvent} e The event triggered by the jstree.
+     * @param {object} data The data object containing the selected nodes.
+     * @todo This method can have the event parameter removed, as it is not used.
+     */
     handleChange(e, data) {
     // remove all existing hidden value fields
         this.$treeContainer.nextAll('.selected-tree-value').remove();
@@ -143,6 +170,10 @@ class TreeComponent extends Component {
             this.$treeContainer.trigger('change');
     }
 
+    /**
+     * Setup the jstree buttons for expand, collapse, reload, add, rename, and delete.
+     * @param {JQuery<HTMLElement>} $treeContainer The jstree container element.
+     */
     setupJStreeButtons($treeContainer) {
         const $btnExpand = this.el.find('.btn-js-tree-expand');
         const $btnCollapse = this.el.find('.btn-js-tree-collapse');
@@ -159,6 +190,9 @@ class TreeComponent extends Component {
         $btnDelete.on('click', () => { this.handleDelete(); });
     }
 
+    /**
+     * Handle the addition of a new node to the jstree.
+     */
     handleAdd() {
         const ref = this.$treeContainer.jstree(true);
         let sel = ref.get_selected();
@@ -176,6 +210,11 @@ class TreeComponent extends Component {
         }
     }
 
+    /**
+     * Handle the deletion of a node from the jstree.
+     * @returns {boolean} Returns true if a node was deleted, false otherwise.
+     * @todo Why does this have a return value?
+     */
     handleDelete() {
         const ref = this.$treeContainer.jstree(true);
         let sel = ref.get_selected();
@@ -185,8 +224,14 @@ class TreeComponent extends Component {
         }
 
         ref.delete_node(sel);
+        return true;
     }
 
+    /**
+     * Handle the renaming of a node in the jstree.
+     * @returns {boolean} Returns true if a node was renamed, false otherwise.
+     * @todo Why does this have a return value?
+     */
     handleRename() {
         const ref = this.$treeContainer.jstree(true);
         let sel = ref.get_selected();
@@ -197,6 +242,7 @@ class TreeComponent extends Component {
 
         sel = sel[0];
         ref.edit(sel);
+        return true;
     }
 }
 
diff --git a/src/frontend/components/form-group/value-lookup/lib/component.js b/src/frontend/components/form-group/value-lookup/lib/component.js
index 1eb2c7950..ad90ac077 100644
--- a/src/frontend/components/form-group/value-lookup/lib/component.js
+++ b/src/frontend/components/form-group/value-lookup/lib/component.js
@@ -2,20 +2,31 @@ import { Component } from 'component';
 import { getFieldValues } from 'get-field-values';
 import { setFieldValues } from 'set-field-values';
 
-/* Used to lookup a value at an external endpoint
- * and prefill other fields from the response */
-
+/**
+ * Component to lookup a value at an external endpoint and prefill other fields from the response
+ */
 class ValueLookupComponent extends Component {
+    /**
+     * Create a new ValueLookupComponent
+     * @param {HTMLElement} element The HTML element that this component is attached to
+     */
     constructor(element) {
         super(element);
         this.initLookupComponent();
     }
 
+    /**
+     * Initializes the value lookup component by setting up the endpoint and fields
+     */
     initLookupComponent() {
         const field = this.getLookupEndpoint();
         this.setupValueLookup(field);
     }
 
+    /**
+     * Get the lookup endpoint and fields from the component's data attributes
+     * @returns {object} An object containing the field element, endpoint URL, and fields to lookup
+     */
     getLookupEndpoint() {
         const lookup_endpoint = $(this.element).data('lookup-endpoint');
         const lookup_fields = $(this.element).data('lookup-fields');
@@ -26,6 +37,10 @@ class ValueLookupComponent extends Component {
         };
     }
 
+    /**
+     * Set up the value lookup functionality
+     * @param {object} field The field object containing the endpoint and fields to lookup
+     */
     setupValueLookup(field) {
         const endpoint = field.endpoint;
         const $field = field.field;
@@ -82,6 +97,14 @@ class ValueLookupComponent extends Component {
     }
 }
 
+/**
+ * Add a status message to the field
+ * @param {JQuery<HTMLElement>} $field The field element to add the status message to
+ * @param {string} message The message to display
+ * @param {boolean} spinner The flag to show a spinner
+ * @param {boolean} is_error Is the message an error message
+ * @todo Why is this not a method of the component?
+ */
 const addStatusMessage = ($field, message, spinner, is_error) => {
     let $notice = $field.find('.lookup-status');
     let $text = $notice.find('.status-text');
@@ -101,6 +124,10 @@ const addStatusMessage = ($field, message, spinner, is_error) => {
     $notice.removeClass('d-none');
 };
 
+/**
+ * Remove the status message from the field
+ * @param {JQuery<HTMLElement>} $field The field element to remove the status message from
+ */
 const removeStatusMessage = ($field) => {
     $field.find('.lookup-status').addClass('d-none');
 };
diff --git a/src/frontend/components/globe/lib/component.js b/src/frontend/components/globe/lib/component.js
index 9df91c265..86290902c 100644
--- a/src/frontend/components/globe/lib/component.js
+++ b/src/frontend/components/globe/lib/component.js
@@ -3,12 +3,22 @@ import * as Plotly from 'plotly/plotly-geo-2.26.0';
 // Use following line once patches merged upstream
 // import Plotly from 'plotly.js-geo-dist'
 
+/**
+ * Component for displaying a globe with Plotly.
+ */
 class GlobeComponent extends Component {
+    /**
+     * Create a new GlobeComponent.
+     * @param {HTMLElement} element The HTML element that this component will be attached to.
+     */
     constructor(element) {
         super(element);
         this.initGlobe();
     }
 
+    /**
+     * Initialize the globe component.
+     */
     initGlobe() {
         Plotly.setPlotConfig({ locale: 'en-GB' });
 
diff --git a/src/frontend/components/graph/lib/chart.js b/src/frontend/components/graph/lib/chart.js
index 46b43ecad..57e9627b9 100644
--- a/src/frontend/components/graph/lib/chart.js
+++ b/src/frontend/components/graph/lib/chart.js
@@ -1,3 +1,8 @@
+/**
+ * Plot the graph using the provided data and options.
+ * @param {object} plotData The data to plot on the graph.
+ * @param {object} options_in The options for the graph, including type, axis names, and legend visibility.
+ */
 const do_plot = (plotData, options_in) => {
     const ticks = plotData.xlabels;
     let plotOptions = {};
@@ -67,12 +72,21 @@ const do_plot = (plotData, options_in) => {
 // Phantomjs to produce PNG versions of the graphs. Once jqplot has been
 // replaced by a more modern graphing library, the PNG/Phantomjs functionality
 // will probably unneccessary if that functionality is built into the library.
+/**
+ * Function to perform a plot using JSON data.
+ * @param {string} plotData Base64 encoded JSON string of the plot data.
+ * @param {string} options_in Base64 encoded JSON string of the plot options.
+ */
 const do_plot_json = (window.do_plot_json = function(plotData, options_in) {
     plotData = JSON.parse(atob(plotData));
     options_in = JSON.parse(atob(options_in));
     do_plot(plotData, options_in);
 });
 
+/**
+ * Make default series options for different graph types.
+ * @returns {object} Default series options for different graph types.
+ */
 const makeSeriesDefaults = () => ({
     bar: {
         renderer: $.jqplot.BarRenderer,
diff --git a/src/frontend/components/graph/lib/component.js b/src/frontend/components/graph/lib/component.js
index 2687e400b..2581caa0c 100644
--- a/src/frontend/components/graph/lib/component.js
+++ b/src/frontend/components/graph/lib/component.js
@@ -9,7 +9,14 @@ import '../../../js/lib/jqplot/jqplot.canvasAxisLabelRenderer';
 import '../../../js/lib/jqplot/jqplot.canvasAxisTickRenderer';
 import '../../../js/lib/jqplot/jqplot.highlighter';
 
+/**
+ * Graph component that handles rendering of various types of graphs
+ */
 class GraphComponent extends Component {
+    /**
+     * Create a new GraphComponent.
+     * @param {HTMLElement} element The element to attach the component to.
+     */
     constructor(element) {
         super(element);
         this.graphContainer = $(this.element).find('.graph__container');
@@ -19,6 +26,9 @@ class GraphComponent extends Component {
         }
     }
 
+    /**
+     * Initialize the graph component.
+     */
     initGraph() {
         $.jqplot.config.enablePlugins = true;
         const data = this.graphContainer.data();
@@ -35,6 +45,11 @@ class GraphComponent extends Component {
         this.do_plot(plotData, options_in);
     }
 
+    /**
+     * Get the URL to fetch graph data based on the graph type.
+     * @param {object} data The data object containing graph information.
+     * @returns {string} The URL to fetch graph data.
+     */
     getURL(data) {
         let devEndpoint;
 
@@ -52,6 +67,12 @@ class GraphComponent extends Component {
         }
     }
 
+    /**
+     * Fetch graph data from the server using AJAX. This request is synchronous.
+     * @param {string} url The URL to fetch data from.
+     * @returns {object|null} The JSON data received from the server, or null if the request fails.
+     * @todo Would it not be better to use async/await here?
+     */
     ajaxDataRenderer(url) {
         let ret = null;
 
@@ -66,6 +87,11 @@ class GraphComponent extends Component {
         return ret;
     }
 
+    /**
+     * Plot the graph using the provided data and options.
+     * @param {object} plotData The data to plot on the graph.
+     * @param {object} options_in The options for the graph, including type, axis names, and legend visibility.
+     */
     do_plot(plotData, options_in) {
         const ticks = plotData.xlabels;
         let plotOptions = {};
@@ -131,6 +157,10 @@ class GraphComponent extends Component {
         $(`[data-chart-id=${options_in.id}]`).jqplot(plotData.points, plotOptions);
     }
 
+    /**
+     * Create default series options for different graph types.
+     * @returns {object} Default series options for different graph types.
+     */
     makeSeriesDefaults = () => ({
         bar: {
             renderer: $.jqplot.BarRenderer,
diff --git a/src/frontend/components/help-view/lib/component.test.ts b/src/frontend/components/help-view/lib/component.test.ts
index 1b4882cce..d5720a849 100644
--- a/src/frontend/components/help-view/lib/component.test.ts
+++ b/src/frontend/components/help-view/lib/component.test.ts
@@ -1,7 +1,7 @@
+/* eslint-disable jsdoc/require-jsdoc */
 import HelpView from './component';
 import { describe, it, expect } from '@jest/globals';
 
-// Mock class to test the HelpView component exposing private members
 class TestHelpView extends HelpView {
     public get button() {
         return this.$button;
diff --git a/src/frontend/components/help-view/lib/component.ts b/src/frontend/components/help-view/lib/component.ts
index b6d4e52fa..d63e95dd6 100644
--- a/src/frontend/components/help-view/lib/component.ts
+++ b/src/frontend/components/help-view/lib/component.ts
@@ -3,15 +3,15 @@ import { MarkDown } from 'util/formatters/markdown';
 
 /**
  * @class HelpView
- * @extends Component
  * @description A component that displays help text in a target.
  */
 export default class HelpView extends Component {
     // This is protected so that it can be accessed in tests.
     protected $button: JQuery<HTMLAnchorElement>;
+
     /**
-     * @constructor Create a new HelpView component.
-     * @param element The Element to attach the component to.
+     * Create a new HelpView component.
+     * @param {HTMLElement} element The Element to attach the component to.
      */
     constructor(element: HTMLElement) {
         super(element);
@@ -19,9 +19,8 @@ export default class HelpView extends Component {
     }
 
     /**
-     * @method initHelp
-     * @description Initialize the help view.
-     * @param element The element to attach the help view to.
+     * Initialize the help view.
+     * @param {HTMLElement} element The element to attach the help view to.
      */
     initHelp(element: HTMLElement) {
         const $el = $(element);
diff --git a/src/frontend/components/markdown/lib/component.js b/src/frontend/components/markdown/lib/component.js
index 0f3bd55b6..7b793afa0 100644
--- a/src/frontend/components/markdown/lib/component.js
+++ b/src/frontend/components/markdown/lib/component.js
@@ -1,18 +1,34 @@
 import { marked } from 'marked';
 import { Component } from 'component';
 
+/**
+ * Component for rendering markdown text.
+ */
 class MarkdownComponent extends Component {
+    /**
+     * Create a new MarkdownComponent.
+     * @param {HTMLElement} element The element to attach the component to.
+     */
     constructor(element) {
         super(element);
         this.initMarkdownEditor();
     }
 
+    /**
+     * Render markdown text to HTML.
+     * @param {string} md The markdown text to render.
+     * @returns {string} The rendered HTML.
+     * @todo Use Markdown templates rather than this method.
+     */
     renderMarkdown(md) {
         const mdEncoded = $('<span>').text(md)
             .html();
         return marked(mdEncoded);
     }
 
+    /**
+     * Initialize the markdown editor.
+     */
     initMarkdownEditor() {
         marked.use({ breaks: true });
 
diff --git a/src/frontend/components/modal/lib/component.js b/src/frontend/components/modal/lib/component.js
index 4d71641be..9ed71ca59 100644
--- a/src/frontend/components/modal/lib/component.js
+++ b/src/frontend/components/modal/lib/component.js
@@ -4,10 +4,22 @@ import { modal } from './modal';
 import { Frame } from './frame';
 import { logging } from 'logging';
 
+/**
+ * Modal component for handling wizards and forms.
+ */
 class ModalComponent extends Component {
 
+    /**
+     * Indicates whether the component can be reinitialized.
+     * @returns {boolean} true if reinitialization is allowed, false otherwise.
+     * @static
+     */
     static get allowReinitialization() { return true; }
 
+    /**
+     * Create a new ModalComponent instance.
+     * @param {HTMLElement} element The element to initialize the modal component on.
+     */
     constructor(element) {
         super(element);
         this.el = $(this.element);
@@ -18,7 +30,9 @@ class ModalComponent extends Component {
         if (!this.wasInitialized) this.initModal();
     }
 
-    // Initialize the modal
+    /**
+     * Initialize the modal
+     */
     initModal() {
         this.el.on('show.bs.modal', () => {
             modal.addSubscriber(this);
@@ -51,6 +65,10 @@ class ModalComponent extends Component {
         });
     }
 
+    /**
+     * Check if data in the modal has changed.
+     * @returns {boolean} true if data has changed, false otherwise.
+     */
     dataHasChanged() {
         const fields = $(this.el).find('input, textarea');
         let hasChanged = false;
@@ -78,6 +96,10 @@ class ModalComponent extends Component {
         return hasChanged;
     }
 
+    /**
+     * Hide or show the content of the body based on the modal visibility.
+     * @param {boolean} bHide true to hide content, false to show.
+     */
     hideContent(bHide) {
         if (bHide) {
             $('body').children()
@@ -88,7 +110,9 @@ class ModalComponent extends Component {
         }
     }
 
-    // Prevent the modal to open
+    /**
+     * Prevent the modal opening
+     */
     preventModalToOpen() {
         const modalId = this.el.attr('id') || '';
         $(`.btn[data-target="#${modalId}"]`).on('click', function (e) {
@@ -96,13 +120,31 @@ class ModalComponent extends Component {
         });
     }
 
-    // Clear all fields of the current frame
+    /**
+     * Clear all fields of the current frame
+     * @param {HTMLElement | JQuery<HTMLElement>} frame The frame to clear fields from.
+     */
     clearFields(frame) {
         const fields = $(frame).find('input, textarea');
 
         fields.each((i, field) => {
             const $field = $(field);
 
+            if ($field.attr('type') === 'radio') {
+                // Simple removal of checked property will suffice
+                $field.prop('checked', false);
+            } else if ($field.attr('type') === 'checkbox') {
+                // Need to trigger click event to ensure widget is updated
+                if ($field.is(':checked')) $field.trigger('click');
+            } else {
+                if ($field.data('restore-value')) {
+                    $field.val($field.data('restore-value'));
+                } else {
+                    $field.val('');
+                }
+                $(field).removeData('original-value');
+                $field.trigger('change');
+            }
             if ($field.attr('type') === 'radio') {
                 // Simple removal of checked property will suffice
                 $field.prop('checked', false);
@@ -126,7 +168,10 @@ class ModalComponent extends Component {
         });
     }
 
-    // Clear all fields in all frames
+    /**
+     * Clear all fields in a number of frames (normally all frames in it's current usage)
+     * @param {Array<number>} [arrFrameNumbers] Optional array of frame numbers to clear.
+     */
     clearFrames(arrFrameNumbers) {
         if (arrFrameNumbers) {
             $(arrFrameNumbers).each((i, frameNr) => {
@@ -140,9 +185,17 @@ class ModalComponent extends Component {
         }
     }
 
+    /**
+     * Get the frame number from a frame element.
+     * @param {HTMLElement | JQuery<HTMLElement>} frame The frame to get the frame number from.
+     * @returns {number | undefined} The frame number if available, otherwise undefined.
+     */
     getFrameNumber(frame) {
         const config = $(frame).data('config');
 
+        if (!config.frame || isNaN(config.frame)) {
+            return;
+        }
         if (!config.frame || isNaN(config.frame)) {
             return;
         }
@@ -150,6 +203,11 @@ class ModalComponent extends Component {
         return config.frame;
     }
 
+    /**
+     * Get a frame by its number.
+     * @param {number} frameNr The frame number to search for.
+     * @returns {HTMLElement | JQuery<HTMLElement> | null} The frame element if found, otherwise null.
+     */
     getFrameByNumber(frameNr) {
         let selectedFrame = null;
 
@@ -165,7 +223,13 @@ class ModalComponent extends Component {
         return selectedFrame;
     }
 
-    // Activate a frame by it's number
+
+    /**
+     * Activate a frame by it's number
+     * @param {number} frameNumber The frame number to activate.
+     * @param {number} previousFrameNumber The previous frame number.
+     * @param {boolean} clearFields Whether to clear the fields in the frame.
+     */
     activateFrame(frameNumber, previousFrameNumber, clearFields) {
         this.frames.each((i, frame) => {
             const config = $(frame).data('config');
@@ -204,7 +268,13 @@ class ModalComponent extends Component {
         });
     }
 
-    // Create a new frame object
+    /**
+     * Create a new frame object
+     * @param {HTMLElement | JQuery<HTMLElement>} frame The frame element to create the Frame object from.
+     * @param {number} previousFrameNumber The previous frame number.
+     * @returns {Frame} The created Frame object.
+     * @throws Will throw an error if the frame configuration is invalid.
+     */
     createFrame(frame, previousFrameNumber) {
         if (isNaN($(frame).data('config').step) || (isNaN($(frame).data('config').frame))) {
             throw 'createFrame: Parameter is not a number!';
@@ -215,7 +285,10 @@ class ModalComponent extends Component {
         return new Frame($(frame), previousFrameNumber);
     }
 
-    // Add event listeners to the buttons and required fields of the current frame
+    /**
+     * Add event listeners to the buttons and required fields of the current frame
+     * @todo Fix deprecation
+     */
     bindEventHandlers() {
         this.frame.buttons.next.click(() => { modal.next(this.frame.object); });
         this.frame.buttons.back.click(() => { modal.back(this.frame.object); });
@@ -227,6 +300,10 @@ class ModalComponent extends Component {
         this.frame.requiredFields.bind('blur.modalEvent', (ev) => { this.handleBlur(ev); });
     }
 
+    /**
+     * Handle keyup events on required fields.
+     * @param {JQuery.KeyUpEvent} ev The keyup event.
+     */
     handleKeyup(ev) {
         const doneTypingInterval = 1000;
         const field = ev.target;
@@ -239,10 +316,17 @@ class ModalComponent extends Component {
         doneTypingInterval);
     }
 
+    /**
+     * Handle keydown events on required fields.
+     */
     handleKeydown() {
         clearTimeout(this.typingTimer);
     }
 
+    /**
+     * Handle the blur event on required fields.
+     * @param {JQuery.BlurEvent} ev The blur event.
+     */
     handleBlur(ev) {
         const field = ev.target;
         clearTimeout(this.typingTimer);
@@ -251,7 +335,12 @@ class ModalComponent extends Component {
             this.validateField(field);
     }
 
-    // Check if a field is valid
+    /**
+     * Check if a field is valid
+     * @param {HTMLElement | JQuery<HTMLElement>} field The field to validate.
+     * @returns {boolean} true if the field is valid, false otherwise.
+     * @todo This can be simplified by just inverting the if statement
+     */
     isValidField(field) {
         if (($(field).is(':invalid')) || ($(field).val() == '')) {
             return false;
@@ -260,7 +349,10 @@ class ModalComponent extends Component {
         }
     }
 
-    // Validate a single field
+    /**
+     * Validate a single field
+     * @param {HTMLElement | JQuery<HTMLElement>} field The field to validate.
+     */
     validateField(field) {
         const isValid = this.isValidField(field);
         this.frame.error = [];
@@ -276,7 +368,9 @@ class ModalComponent extends Component {
         this.validateFrame();
     }
 
-    // Validate the required fields of the frame
+    /**
+     * Validate the required fields of the frame
+     */
     validateFrame() {
         if (!this.frame) return;
         this.frame.isValid = true;
@@ -290,6 +384,10 @@ class ModalComponent extends Component {
         this.setFrameState();
     }
 
+    /**
+     * Set the state of an input field based on its validity.
+     * @param {JQuery<HTMLElement>} $field The field to set the state for.
+     */
     setInputState($field) {
         if ($field.is(':invalid')) {
             $field.attr('aria-invalid', true);
@@ -300,6 +398,9 @@ class ModalComponent extends Component {
         }
     }
 
+    /**
+     * Set the state of the frame based on its validity and errors.
+     */
     setFrameState() {
         const alert = this.frame.object.find('.alert');
 
@@ -324,13 +425,19 @@ class ModalComponent extends Component {
         }
     }
 
-    // Unbind event handlers from all elements of this frame
+    /**
+     * Unbind event handlers from all elements of this frame
+     * @param {JQuery<HTMLElement>} frame The frame to unbind event handlers from.
+     */
     unbindEventHandlers(frame) {
         frame.find('.modal-footer .btn').unbind();
         frame.find('input[required]').unbind('.modalEvent');
     }
 
-    // Set the state of the next button
+    /**
+     * Set the state of the next button
+     * @param {boolean} valid Whether the next button should be enabled or disabled.
+     */
     setNextButtonState(valid) {
         if (valid) {
             this.frame.buttons.next.removeAttr('disabled');
@@ -343,7 +450,10 @@ class ModalComponent extends Component {
         }
     }
 
-    // Set the state of the invisible button
+    /**
+     * Set the state of the invisible button
+     * @param {boolean} valid Whether the invisible button should be enabled or disabled.
+     */
     setInvisibleButtonState(valid) {
         if (valid) {
             this.frame.buttons.invisible.removeClass('btn-invisible');
@@ -352,7 +462,10 @@ class ModalComponent extends Component {
         }
     }
 
-    // Activate the current step in the header of the modal
+    /**
+     * Activate the current step in the header of the modal
+     * @param {number} currentStep The step number to activate.
+     */
     activateStep(currentStep) {
         let steps = this.el.find('.modal__step');
 
@@ -365,7 +478,10 @@ class ModalComponent extends Component {
         });
     }
 
-    // Handle upload to server - reference to this is used here due to XMLHttpRequest scope issues
+    /**
+     * Handle upload to server - reference to this is used here due to XMLHttpRequest scope issues
+     * @param {object} dataObj The data object to upload.
+     */
     handleUpload(dataObj) {
         const self = this;
         const url = this.el.data('config').url;
@@ -392,6 +508,10 @@ class ModalComponent extends Component {
             });
     }
 
+    /**
+     * Show an error message in the modal
+     * @param {string} strError The error message to display.
+     */
     showError(strError) {
         const alert = this.frame.object.find('.alert');
 
@@ -402,7 +522,9 @@ class ModalComponent extends Component {
         this.el.animate({ scrollTop: alert.offset().top }, 500);
     }
 
-    // Handle next
+    /**
+     * Handle next
+     */
     handleNext() {
         const nextFrameNumber = this.frame.number + 1;
         if (this.frames.length >= (nextFrameNumber)) {
@@ -410,7 +532,9 @@ class ModalComponent extends Component {
         }
     }
 
-    // Handle back
+    /**
+     * Handle back
+     */
     handleBack() {
         const previousFrameNumber = this.frame.back;
         if (previousFrameNumber > 0) {
@@ -419,39 +543,59 @@ class ModalComponent extends Component {
         this.validateFrame();
     }
 
-    // Handle skip
+    /**
+     * Handle skip
+     * @param {number} skipToNumber The frame number to skip to.
+     */
     handleSkip(skipToNumber) {
         this.activateFrame(skipToNumber, this.frame.number);
     }
 
-    // Handle add
+    /**
+     * Handle add
+     * @param {HTMLElement | JQuery<HTMLElement>} frame The frame to add.
+     */
     handleAdd(frame) {
         modal.update(frame);
         this.clearFields(frame);
         this.validateFrame();
     }
 
-    // Handle activate
+    /**
+     * Handle activate
+     * @param {number} frameNumber The frame number to activate.
+     * @param {boolean} clearFields Whether to clear the fields in the frame.
+     */
     handleActivate(frameNumber, clearFields) {
         this.activateFrame(frameNumber, this.frame.number, clearFields);
     }
 
-    // Handle show
+    /**
+     * Handle show
+     * @param {HTMLElement | JQuery<HTMLElement>} modal The modal to show.
+     */
     handleShow(modal) {
         $(modal).modal('show');
     }
 
-    // Handle clear
+    /**
+     * Handle clear
+     * @param {number[]} arr The array of frame numbers to clear.
+     */
     handleClear(arr) {
         this.clearFrames(arr);
     }
 
-    // Handle validate
+    /**
+     * Handle validate
+     */
     handleValidate() {
         this.validateFrame();
     }
 
-    // Handle close
+    /**
+     * Handle close
+     */
     handleClose() {
         this.clearFrames();
 
diff --git a/src/frontend/components/modal/lib/frame.js b/src/frontend/components/modal/lib/frame.js
index 560db0397..5e7e5f54b 100644
--- a/src/frontend/components/modal/lib/frame.js
+++ b/src/frontend/components/modal/lib/frame.js
@@ -1,4 +1,13 @@
+/**
+ * Represents a single frame in a modal flow.
+ * @description A Frame holds configuration and DOM references for managing navigation and validation within a multi-step UI process.
+ */
 class Frame {
+    /**
+     * Creates a new Frame instance.
+     * @param {JQuery<HTMLElement>} frame - The jQuery object representing the frame DOM element.
+     * @param {number} previousFrameNumber - The number of the previous frame in the sequence.
+     */
     constructor(frame, previousFrameNumber) {
         this.object = frame;
         this.step = frame.data('config').step;
diff --git a/src/frontend/components/modal/lib/modal.js b/src/frontend/components/modal/lib/modal.js
index 63cd87731..320c286b8 100644
--- a/src/frontend/components/modal/lib/modal.js
+++ b/src/frontend/components/modal/lib/modal.js
@@ -1,76 +1,122 @@
+/**
+ * Base class for modal handling.
+ */
 class Modal {
-    // A list of observers
+    /**
+     * Constructor for the Modal class.
+     */
     constructor() {
         this.observers = [];
     }
 
-    // Method for subscribing to, or "observing" observable
+    /**
+     * Method for subscribing to, or "observing" observable
+     * @param {object} subscriber - The subscriber object that will handle modal events.
+     */
     addSubscriber(subscriber) {
         this.observers.push(subscriber);
     }
 
-    // Method for unsubscribing from observable
+    /**
+     * Method for unsubscribing from observable
+     * @param {object} subscriber - The subscriber object to be removed.
+     */
     unsubscribe(subscriber) {
         var index = this.observers.indexOf(subscriber);
         this.observers.splice(index, 1);
     }
 
-    // Activate
+    /**
+     * Handle the Activate event.
+     * @param {number} frameNr - The frame number to activate.
+     * @param {boolean} clearFields - Whether to clear fields.
+     * @param {number} id - The ID of the modal.
+     */
     activate(frameNr, clearFields, id) {
         this.observers.forEach(item => item.handleActivate?.(frameNr, clearFields, id));
     }
 
-    // Add
+    /**
+     * Handle Add
+     * @param {JQuery<HTMLElement>} frame - The frame object to be added.
+     */
     add(frame) {
         this.observers.forEach(item => item.handleAdd?.(frame));
     }
 
-    // Back
+    /**
+     * Handle Back
+     * @param {JQuery<HTMLElement>} frame - The frame object to go back to.
+     */
     back(frame) {
         this.observers.forEach(item => item.handleBack?.(frame));
     }
 
-    // Next
+    /**
+     * Handle Next
+     * @param {JQuery<HTMLElement>} frame - The frame object to go to next.
+     */
     next(frame) {
         this.observers.forEach(item => item.handleNext?.(frame));
     }
 
-    // Show
+    /**
+     * Handle Show
+     * @param {JQuery<HTMLElement>} modal - The modal object to be shown.
+     */
     show(modal) {
         this.observers.forEach(item => item.handleShow?.(modal));
     }
 
-    // Save
+    /**
+     * Handle Save
+     */
     save() {
         this.observers.forEach(item => item.handleSave?.());
     }
 
-    // Upload
+    /**
+     * Handle Upload
+     * @param {object} data - The data to be uploaded.
+     */
     upload(data) {
         this.observers.forEach(item => item.handleUpload?.(data));
     }
 
-    // Clear
+    /**
+     * Handle Clear
+     * @param {Array} arr - The array to be cleared.
+     */
     clear(arr) {
         this.observers.forEach(item => item.handleClear?.(arr));
     }
 
-    // Close
+    /**
+     * Handle Close
+     */
     close() {
         this.observers.forEach(item => item.handleClose?.());
     }
 
-    // Skip
+    /**
+     * Handle Skip
+     * @param {number} frameNr The number of the frame to skip to.
+     */
     skip(frameNr) {
         this.observers.forEach(item => item.handleSkip?.(frameNr));
     }
 
-    // Validate
+    /**
+     * Validate the modal
+     */
     validate() {
         this.observers.forEach(item => item.handleValidate?.());
     }
 
-    // Update
+    /**
+     * Update the modal frame
+     * @param {JQuery<HTMLElement>} frame The frame to update.
+     */
     update(frame) {
         this.observers.forEach(item => item.handleUpdate?.(frame));
     }
@@ -82,5 +128,3 @@ export {
     Modal,
     modal
 };
-
-
diff --git a/src/frontend/components/modal/modals/curval/lib/component.js b/src/frontend/components/modal/modals/curval/lib/component.js
index 9605d6825..e3cb49ed1 100644
--- a/src/frontend/components/modal/modals/curval/lib/component.js
+++ b/src/frontend/components/modal/modals/curval/lib/component.js
@@ -7,26 +7,43 @@ import { validateRadioGroup, validateCheckboxGroup } from 'validation';
 import { fromJson } from 'util/common';
 import StorageProvider from 'util/storageProvider';
 
+/**
+ * Component for handling the Curval Modal, which is used for editing curval fields in a modal dialogue.
+ * This component handles loading the modal content, submitting changes via AJAX, and updating the UI with the new values.
+ */
 class CurvalModalComponent extends ModalComponent {
 
+    /**
+     * Allow reinitialization of the component, as the modal may be removed and re-added to the DOM multiple times during the lifecycle of a page
+     */
     static get allowReinitialization() { return true; }
 
-    constructor(element)  {
+    /**
+     * Create a new instance of the Curval Modal Component
+     * @param {HTMLElement} element The element to attach the component to
+     */
+    constructor(element) {
         super(element);
         this.context = undefined; // Populated on modal show
         if (!this.wasInitialized) this.initCurvalModal();
     }
 
-    // Initialize the modal
+    /**
+     * Initialize the modal
+     */
     initCurvalModal() {
         this.setupModal();
         this.setupSubmit();
     }
 
-    // Set the value of a curval. In order to ensure consistent data, this
-    // function opens a modal edit for each curval, makes the changes, and then
-    // submits. It does this synchronously so that the modal is only processing
-    // one curval value at a time
+    /**
+     * Set the value of a curval. In order to ensure consistent data, this
+     * function opens a modal edit for each curval, makes the changes, and then
+     * submits. It does this synchronously so that the modal is only processing
+     * one curval value at a time
+     * @param {JQuery<HTMLElement>} $target The target to set the value for
+     * @param {any} rows Row data used
+     */
     setValue($target, rows) {
         const layout_id = $target.data('column-id');
         const $m = this.el;
@@ -34,8 +51,9 @@ class CurvalModalComponent extends ModalComponent {
         let index = 0;
         const self = this;
         autosaveLoadValue();
-        // Submit a single value for processing, and then once completed call the
-        // next one
+        /**
+         *  Submit a single value for processing, and then once completed call the next one
+         */
         function autosaveLoadValue() {
 
             if (index >= rows.length) return; // Finished?
@@ -72,6 +90,12 @@ class CurvalModalComponent extends ModalComponent {
         }
     }
 
+    /**
+     * Fired when validation of the curval modal form has succeeded.
+     * This function handles both the updating of the UI with the new value, and the storing of the value in local storage for autosave purposes.
+     * @param {JQuery<HTMLFormElement>} form The form on which validation has been performed
+     * @param {any} values The values used
+     */
     async curvalModalValidationSucceeded(form, values) {
         const form_data = form.serialize();
         const modal_field_ids = form.data('modal-field-ids');
@@ -244,6 +268,12 @@ class CurvalModalComponent extends ModalComponent {
         $formGroup.trigger('change', true);
     }
 
+    /**
+     * Update the state of the select widget based on the current selected values, and perform validation if required.
+     * @param {JQuery<HTMLElement>} $widget The widget to update the state for
+     * @param {boolean} multi Whether the component is a multi-value
+     * @param {boolean} required Whether the component input is required
+     */
     updateWidgetState($widget, multi, required) {
         const $current = $widget.find('.current');
         const $visible = $current.children('[data-list-item]:not([hidden])');
@@ -259,6 +289,11 @@ class CurvalModalComponent extends ModalComponent {
         }
     }
 
+    /**
+     * Handle validation failure for the curval modal.
+     * @param {JQuery<HTMLFormElement>} form The form for which validation has failed
+     * @param {any} errorMessage Any error messages
+     */
     curvalModalValidationFailed(form, errorMessage) {
         form
             .find('.alert')
@@ -271,6 +306,9 @@ class CurvalModalComponent extends ModalComponent {
         form.find('button[type=submit]').prop('disabled', false);
     }
 
+    /**
+     * Set up event listeners for the modal, including loading content when the modal is shown and confirming before hiding the modal.
+     */
     setupModal() {
         this.el.on('show.bs.modal', (ev) => {
             const button = ev.relatedTarget;
@@ -354,6 +392,9 @@ class CurvalModalComponent extends ModalComponent {
 
     }
 
+    /**
+     * Get the URL for the modal, including query parameters for the layout and draft status.
+     */
     getURL(current_id, instance_name, layout_id) {
 
         let url = current_id
@@ -364,6 +405,9 @@ class CurvalModalComponent extends ModalComponent {
         return url;
     }
 
+    /**
+     * Set up form submission handling for the modal, including validation and AJAX submission.
+     */
     setupSubmit() {
         const self = this;
 
diff --git a/src/frontend/components/modal/modals/new-table/lib/component.js b/src/frontend/components/modal/modals/new-table/lib/component.js
index 01fdf494b..1ab47452f 100644
--- a/src/frontend/components/modal/modals/new-table/lib/component.js
+++ b/src/frontend/components/modal/modals/new-table/lib/component.js
@@ -3,7 +3,14 @@ import * as DataTableHelper from 'components/data-table/lib/helper';
 import { modal } from 'components/modal/lib/modal';
 import SelectComponent from 'components/form-group/select/lib/component';
 
+/**
+ * Modal component for adding a new table
+ */
 class AddTableModalComponent extends ModalComponent {
+    /**
+     * Creates an instance of AddTableModalComponent
+     * @param {HTMLElement} element THe element to create the modal from
+     */
     constructor(element) {
         super(element);
         this.el = $(this.element);
@@ -15,12 +22,13 @@ class AddTableModalComponent extends ModalComponent {
         //No point doing this as an import if it's in the initialisation
         this.selectTopicComponent = new SelectComponent(this.selectTopic);
         this.currentFieldObject = {};
-        this.currentTopicObject = {};
 
         this.initNewTable(this.el);
     }
 
-    // Initialize the new table wizzard
+    /**
+     * Initialize the new table wizard
+     */
     initNewTable() {
         const btnCreateTopic = this.el.find('.modal-body .btn-js-create-topic');
         const btnCreateField = this.el.find('.modal-body .btn-js-create-field');
@@ -31,6 +39,9 @@ class AddTableModalComponent extends ModalComponent {
         this.setupDataObject();
     }
 
+    /**
+     * Setup the initial data object for the modal
+     */
     setupDataObject() {
         this.json = {
             table_permissions: [],
@@ -39,6 +50,12 @@ class AddTableModalComponent extends ModalComponent {
         };
     }
 
+    /**
+     * Add fields to an object from the given jQuery fields
+     * @param {JQuery<HTMLElement>} $fields The fields to add to the object
+     * @param {object} obj The base object to add the fields to
+     * @returns {object} The object with the fields added
+     */
     addFieldsToObject($fields, obj) {
         $fields.each((i, field) => {
             if ($(field).val()) {
@@ -59,7 +76,10 @@ class AddTableModalComponent extends ModalComponent {
         return obj;
     }
 
-    // Add a topic to the json and update the topics table
+    /**
+     * Add a topic to the json and update the topics table
+     * @param {JQuery<HTMLElement>} frame The frame containing the topic fields
+     */
     addTopic(frame) {
         const $fields = frame.find('input, textarea');
 
@@ -90,7 +110,6 @@ class AddTableModalComponent extends ModalComponent {
 
             DataTableHelper.addRow(row, this.topicsTable);
 
-            this.addHandlerToEditItemButton('topic');
         } else {
             // Update existing topic in json
             const currentTopic = this.json.topics.find(x => x.tempId === this.currentTopicObject.tempId);
@@ -118,6 +137,11 @@ class AddTableModalComponent extends ModalComponent {
         }
     }
 
+    /**
+     * Fill the fields in a container with the given data
+     * @param {JQuery<HTMLElement>} $container The container to fill the fields in
+     * @param {object} data The data to fill the fields with
+     */
     fillFields($container, data) {
         for (const [key, value] of Object.entries(data)) {
             const $field = $container.find(`[name=${key}]`);
@@ -136,6 +160,11 @@ class AddTableModalComponent extends ModalComponent {
         }
     }
 
+    /**
+     * Edit a topic in the modal
+     * @param {string} topic The topic to edit
+     * @param {HTMLElement | JQuery<HTMLElement>} frame The frame containing the topic fields
+     */
     editTopic(topic, frame) {
         this.currentTopicObject = topic;
 
@@ -143,6 +172,11 @@ class AddTableModalComponent extends ModalComponent {
         this.fillFields($(frame), topic);
     }
 
+    /**
+     * Edit a field in the modal
+     * @param {object} field The field object to edit
+     * @param {HTMLElement | JQuery<HTMLElement>} frame The frame containing the field fields
+     */
     editField(field, frame) {
         this.currentFieldObject = field;
         // Also clear frame 8 (field type settings) and 9 (custom field permissions)
@@ -170,12 +204,22 @@ class AddTableModalComponent extends ModalComponent {
         });
     }
 
+    /**
+     * Remove a node from the data
+     * @param {number} id The ID of the node to remove
+     * @param {object} data The initial data to filter
+     * @returns {object} The modified data with the node removed
+     */
     removeNode(id, data) {
         return data.filter((e) => {
             return e.tempId !== id;
         });
     }
 
+    /**
+     * Add the handler to the edit item button for a specific type
+     * @param {string} strType The field type to add the handler for
+     */
     addHandlerToEditItemButton(strType) {
         const $btnEditItem = this.el.find(`.modal-body .btn-js-edit-${strType}`);
 
@@ -189,11 +233,18 @@ class AddTableModalComponent extends ModalComponent {
         });
     }
 
+    /**
+     * Generate a unique ID based on the current time
+     * @returns {number} A unique ID based on the current time
+     */
     uniqueID() {
         return Math.floor(Math.random() * Date.now());
     }
 
-    // Add a field to the json and update the fields table
+    /**
+     * Add a field to the json and update the fields table
+     * @param {JQuery<HTMLElement>} frame The frame containing the field fields
+     */
     addField(frame) {
         const $fields = frame.find('input, textarea');
 
@@ -251,6 +302,10 @@ class AddTableModalComponent extends ModalComponent {
         }
     }
 
+    /**
+     * Add settings for the field type to the current field object
+     * @param {JQuery<HTMLElement>} frame The frame containing the field type settings
+     */
     addFieldTypeSettings(frame) {
         const $fieldTypeContainer = frame.find('[id^=field_type_].select-reveal__instance:visible');
         const $fields = $fieldTypeContainer.find('input, textarea');
@@ -332,7 +387,10 @@ class AddTableModalComponent extends ModalComponent {
         }
     }
 
-    // Add a table to the json
+    /**
+     * Add a table to the json
+     * @param {JQuery<HTMLElement>} frame The frame containing the table fields
+     */
     addTable(frame) {
         const $fields = frame.find('input, textarea');
         const $modalTitle = this.el.find('.modal-title');
@@ -348,7 +406,10 @@ class AddTableModalComponent extends ModalComponent {
         }
     }
 
-    // Add default_field_permissions to the json
+    /**
+     * Add default_field_permissions to the json
+     * @param {JQuery<HTMLElement>} frame The frame containing the field permissions
+     */
     addCustomFieldPermissions(frame) {
         const $customFieldPermissionsTable = frame.find('#custom_field_permissions_table');
         const $groups = $customFieldPermissionsTable.DataTable().rows();
@@ -378,7 +439,10 @@ class AddTableModalComponent extends ModalComponent {
         });
     }
 
-    // Add table_permissions to the json
+    /**
+     * Add table_permissions to the json
+     * @param {JQuery<HTMLElement>} frame The frame containing the table permissions
+     */
     addTablePermissions(frame) {
         const $groups = frame.find('.card--expandable');
 
@@ -410,7 +474,10 @@ class AddTableModalComponent extends ModalComponent {
         });
     }
 
-    // Handle next
+    /**
+     * Handle next
+     * @param {JQuery<HTMLElement>} frame The frame to handle next for
+     */
     handleNext(frame) {
         super.handleNext();
 
@@ -442,21 +509,32 @@ class AddTableModalComponent extends ModalComponent {
         }
     }
 
-    // Adjust column widths of datatables when they become visible
+    /**
+     * Adjust column widths of datatables when they become visible
+     * @param {JQuery<HTMLElement>} table The datatable to adjust
+     */
     recalculateDatatableColumnWidths(table) {
         table.DataTable().columns.adjust();
     }
 
-    // Handle back
+    /**
+     * Handle back
+     */
     handleBack() {
         super.handleBack();
     }
 
-    // TODO: Handle save
+    /**
+     * Handle save
+     */
     handleSave() {
         modal.upload(this.json);
     }
 
+    /**
+     * Handle update
+     * @param {JQuery<HTMLElement>} frame The frame to handle update for
+     */
     handleUpdate(frame) {
         if (frame.data('config').item === 'topic') {
             this.addTopic(frame);
@@ -467,6 +545,12 @@ class AddTableModalComponent extends ModalComponent {
         }
     }
 
+    /**
+     * Handle activation of a frame
+     * @param {number} frameNumber The frame number to activate
+     * @param {boolean} clearFields Whether to clear the fields in the frame
+     * @param {number} id The ID of the item to edit (if applicable)
+     */
     handleActivate(frameNumber, clearFields, id) {
         super.handleActivate(frameNumber, clearFields);
 
@@ -495,7 +579,9 @@ class AddTableModalComponent extends ModalComponent {
         super.validateFrame();
     }
 
-    // Handle close
+    /**
+     * Handle close
+     */
     handleClose() {
         // Collapse all collapsibles
         this.el.find('.collapse').collapse('hide');
diff --git a/src/frontend/components/modal/modals/user/lib/component.js b/src/frontend/components/modal/modals/user/lib/component.js
index 6062ec977..5a96823dc 100644
--- a/src/frontend/components/modal/modals/user/lib/component.js
+++ b/src/frontend/components/modal/modals/user/lib/component.js
@@ -1,7 +1,15 @@
 import { modal } from '../../../lib/modal';
 import ModalComponent from '../../../lib/component';
 
+/**
+ * Modal component for user management
+ * This component handles the account approval processes.
+ */
 class UserModalComponent extends ModalComponent {
+    /**
+     * Constructor for UserModalComponent
+     * @param {HTMLElement} element - The modal element
+     */
     constructor(element) {
         super(element);
         this.el = $(this.element);
@@ -11,7 +19,9 @@ class UserModalComponent extends ModalComponent {
         this.initUserModal();
     }
 
-    // Initialize the modal
+    /**
+     * Initialize the user modal
+     */
     initUserModal() {
         this.el.on('show.bs.modal', (ev) => {
             this.toggleContent(ev);
@@ -21,7 +31,10 @@ class UserModalComponent extends ModalComponent {
         });
     }
 
-    // Toggle the right content (add user or approve account)
+    /**
+     * Toggle the right content (add user or approve account)
+     * @param {Event} ev - The event triggered when the modal is shown
+     */
     toggleContent(ev) {
         this.target = $(ev.relatedTarget);
         if (this.target.hasClass('btn-add')) {
@@ -43,12 +56,17 @@ class UserModalComponent extends ModalComponent {
         }
     }
 
-    // Update the text container for the email address
+    /**
+     * Update the text container for the email address
+     */
     updateEmail() {
         this.emailText.html(this.emailField.val());
     }
 
-    // Get all data from all fields in the modal
+    /**
+     * Get all data from all fields in the modal
+     * @returns {object} An object containing the data from the modal fields
+     */
     getData() {
         const data = {
             view_limits: [],
@@ -80,21 +98,33 @@ class UserModalComponent extends ModalComponent {
         return data;
     }
 
+    /**
+     * Parse a value from the modal fields
+     * @param {string} val The value to parse
+     * @returns {boolean|string} The parsed value, converting 'true'/'false' strings to boolean or returning the original value if not a boolean string
+     */
     parseValue(val) {
         return val === 'true' ? true : val === 'false' ? false : val;
     }
 
-    // Handle save
+    /**
+     * Handle save
+     */
     handleSave() {
         modal.upload(this.getData());
     }
 
-    // Handle close
+    /**
+     * Handle close
+     */
     handleClose() {
         super.handleClose();
         this.emailText.html('USER');
     }
 
+    /**
+     * Handle back navigation
+     */
     handleBack() {
         super.handleBack();
         if (this.target.hasClass('btn-add')) return;
@@ -104,6 +134,9 @@ class UserModalComponent extends ModalComponent {
             });
     }
 
+    /**
+     * Handle next navigation
+     */
     handleNext() {
         super.handleNext();
         if (this.target.hasClass('btn-add')) return;
diff --git a/src/frontend/components/more-less/lib/component.js b/src/frontend/components/more-less/lib/component.js
index 7cbe3ef65..6c32e3297 100644
--- a/src/frontend/components/more-less/lib/component.js
+++ b/src/frontend/components/more-less/lib/component.js
@@ -5,8 +5,14 @@ import { moreLess } from './more-less';
 
 const MAX_HEIGHT = 50;
 
+/**
+ * MoreLessComponent is a class that manages the more/less functionality
+ */
 class MoreLessComponent extends Component {
-
+    /**
+     * Creates an instance of MoreLessComponent.
+     * @param {HTMLElement} element The element to attach the component to.
+     */
     constructor(element) {
         super(element);
         this.el = $(this.element);
@@ -14,6 +20,11 @@ class MoreLessComponent extends Component {
         this.initMoreLess();
     }
 
+    /**
+     * Generates a UUID.
+     * @returns {string} A UUID string.
+     * @deprecated Please use crypto.randomUUID() instead.
+     */
     uuid() {
         return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
             const r = (Math.random() * 16) | 0,
@@ -22,7 +33,11 @@ class MoreLessComponent extends Component {
         });
     }
 
-    // Traverse up through the tree and find the parent element that is hidden
+    /**
+     * Find the first parent element that is hidden
+     * @param {JQuery<HTMLElement>} $elem The jQuery element to check for hidden parents.
+     * @returns {JQuery<HTMLElement>|undefined} The first hidden parent element or undefined if no hidden parent is found.
+     */
     parentHidden($elem) {
     // Test parent first in case we have reached the root of the DOM, in which
     // case .css() will throw an error on the element
@@ -36,9 +51,13 @@ class MoreLessComponent extends Component {
         return this.parentHidden($parent);
     }
 
-    // We previously used a plugin for this
-    // (https://github.com/dreamerslab/jquery.actual) but its performance was slow
-    // when a page had many more-less divs
+    /**
+     * Get the actual height of an element.
+     * @param {JQuery<HTMLElement>} $elem The jQuery element to measure.
+     * @returns {number} The actual height of the element.
+     * @description We previously used a plugin for this but its performance was slow when a page had many more-less divs
+     * @see https://github.com/dreamerslab/jquery.actual
+     */
     getActualHeight($elem) {
         if ($elem.attr('data-actual-height')) {
             // cached heights from previous runs
@@ -97,11 +116,17 @@ class MoreLessComponent extends Component {
         return $elem.attr('data-actual-height');
     }
 
+    /**
+     * Reinitializes the more/less functionality.
+     */
     reInitMoreLess() {
         this.clearMoreLess();
         this.initMoreLess();
     }
 
+    /**
+     * Clears the more/less state from the element.
+     */
     clearMoreLess() {
         const $ml = $(this.el);
 
@@ -114,6 +139,9 @@ class MoreLessComponent extends Component {
         }
     }
 
+    /**
+     * Initializes the more/less functionality on the element.
+     */
     initMoreLess() {
         const $ml = $(this.el);
         const column = $ml.data('column');
diff --git a/src/frontend/components/more-less/lib/disclosure-widgets.js b/src/frontend/components/more-less/lib/disclosure-widgets.js
index d4d0144d8..0a6f284bf 100644
--- a/src/frontend/components/more-less/lib/disclosure-widgets.js
+++ b/src/frontend/components/more-less/lib/disclosure-widgets.js
@@ -1,3 +1,9 @@
+/**
+ * Position the disclosure widget relative to its trigger element.
+ * @param {number} offsetTop The top offset of the disclosure widget
+ * @param {number} offsetLeft The left offset of the disclosure widget
+ * @param {number} triggerHeight The height of the trigger element
+ */
 const positionDisclosure = function (offsetTop, offsetLeft, triggerHeight) {
     const left = offsetLeft + 'px';
     const top = offsetTop + triggerHeight + 'px';
@@ -18,6 +24,13 @@ const positionDisclosure = function (offsetTop, offsetLeft, triggerHeight) {
     }
 };
 
+/**
+ * Toggle the disclosure widget state.
+ * @param {JQuery.Event} e The event that triggered the disclosure toggle
+ * @param {JQuery} $trigger The jQuery object representing the trigger element
+ * @param {boolean} state The state to set for the disclosure (expanded or collapsed)
+ * @param {boolean} permanent Whether the disclosure should remain expanded permanently
+ */
 const toggleDisclosure = function (e, $trigger, state, permanent) {
     $trigger.attr('aria-expanded', state);
     $trigger.toggleClass('expanded--permanent', state && permanent);
@@ -55,12 +68,20 @@ const toggleDisclosure = function (e, $trigger, state, permanent) {
     e.stopPropagation();
 };
 
+/**
+ * Event handler for when the disclosure trigger is clicked.
+ * @param {JQuery.ClickEvent} e The click event that triggered the disclosure toggle
+ */
 const onDisclosureClick = function (e) {
     const $trigger = $(this);
     const currentlyPermanentExpanded = $trigger.hasClass('expanded--permanent');
     toggleDisclosure(e, $trigger, !currentlyPermanentExpanded, true);
 };
 
+/**
+ * Event handler for when the disclosure trigger is hovered over.
+ * @param {JQuery.MouseOverEvent} e The mouseover event that triggered the disclosure toggle
+ */
 const onDisclosureMouseover = function (e) {
     const $trigger = $(this);
     const currentlyExpanded = $trigger.attr('aria-expanded') === 'true';
@@ -70,6 +91,10 @@ const onDisclosureMouseover = function (e) {
     }
 };
 
+/**
+ * Event handler for when the disclosure trigger is hovered out.
+ * @param {JQuery.MouseOutEvent} e The mouseout event that triggered the disclosure toggle
+ */
 const onDisclosureMouseout = function (e) {
     const $trigger = $(this);
     const currentlyExpanded = $trigger.attr('aria-expanded') === 'true';
@@ -80,6 +105,10 @@ const onDisclosureMouseout = function (e) {
     }
 };
 
+/**
+ * Set up the disclosure widgets in the given context.
+ * @param {string | JQuery} context The context in which to set up the disclosure widgets
+ */
 const setupDisclosureWidgets = function (context) {
     $('.trigger[aria-expanded]', context).on('click keydown', function (ev) {
         if (ev.type === 'click' || (ev.type === 'keydown' && (ev.which === 13 || ev.which === 32))) {
diff --git a/src/frontend/components/more-less/lib/more-less.js b/src/frontend/components/more-less/lib/more-less.js
index 3e3f89a0b..8d3fbfc7c 100644
--- a/src/frontend/components/more-less/lib/more-less.js
+++ b/src/frontend/components/more-less/lib/more-less.js
@@ -1,21 +1,35 @@
+/**
+ * MoreLess is a class manage observers of the more/less functionality.
+ */
 class MoreLess {
-    // A list of observers
+    /**
+     * Creates an instance of MoreLess.
+     */
     constructor() {
         this.observers = [];
     }
 
-    // Method for subscribing to, or "observing" observable
+
+    /**
+     * Adds a subscriber to the MoreLess observable.
+     * @param {object} subscriber The subscriber to add.
+     */
     addSubscriber(subscriber) {
         this.observers.push(subscriber);
     }
 
-    // Method for unsubscribing from observable
+    /**
+     * Unsubscribes a subscriber from the MoreLess observable.
+     * @param {object} subscriber The subscriber to remove.
+     */
     unsubscribe(subscriber) {
         var index = this.observers.indexOf(subscriber);
         this.observers.splice(index, 1);
     }
 
-    // Reinitialize
+    /**
+     * Notifies all observers to reinitialize the more/less functionality.
+     */
     reinitialize() {
         this.observers.forEach(item => item.reInitMoreLess?.());
     }
@@ -24,5 +38,3 @@ class MoreLess {
 const moreLess = new MoreLess;
 
 export { moreLess };
-
-
diff --git a/src/frontend/components/popover/lib/component.js b/src/frontend/components/popover/lib/component.js
index b4ca81314..555f69d4e 100644
--- a/src/frontend/components/popover/lib/component.js
+++ b/src/frontend/components/popover/lib/component.js
@@ -1,6 +1,13 @@
 import { Component } from 'component';
 
+/**
+ * PopoverComponent class to manage the behavior of a popover.
+ */
 class PopoverComponent extends Component {
+    /**
+     * Creates an instance of PopoverComponent.
+     * @param {HTMLElement} element The parent HTML element for the popover.
+     */
     constructor(element) {
         super(element);
         this.el = $(this.element);
@@ -12,6 +19,10 @@ class PopoverComponent extends Component {
         this.initPopover(this.button);
     }
 
+    /**
+     * Initializes the popover by setting up event listeners for click and keydown events.
+     * @param {HTMLElement} button The button that triggers the popover.
+     */
     initPopover(button) {
         if (!button) {
             return;
@@ -27,6 +38,10 @@ class PopoverComponent extends Component {
         });
     }
 
+    /**
+     * Handles the click event on the popover button.
+     * @param {JQuery.ClickEvent} ev The click event object.
+     */
     handleClick(ev) {
         this.togglePopover();
         ev.stopPropagation();
@@ -35,13 +50,16 @@ class PopoverComponent extends Component {
     // (disabled for now because it caused errors)
     // $(document).on('click', (ev) => {
     //   if (!$(ev.target).hasClass('popover__btn')
-    //       && $(ev.target).parents('.popover-container').length === 0) { 
+    //       && $(ev.target).parents('.popover-container').length === 0) {
     //       this.togglePopover()
     //       $(document).off('click')
     //   }
     // })
     }
 
+    /**
+     * Toggle visibility of the popover and its arrow.
+     */
     togglePopover() {
 
         if (this.popover.hasClass(this.strShowClassName)) {
diff --git a/src/frontend/components/record-popup/lib/component.js b/src/frontend/components/record-popup/lib/component.js
index 1b3b5b2b8..3180eb236 100644
--- a/src/frontend/components/record-popup/lib/component.js
+++ b/src/frontend/components/record-popup/lib/component.js
@@ -1,13 +1,23 @@
 import { Component } from 'component';
 
+/**
+ * RecordPopupComponent class to manage the behavior of a record popup.
+ */
 class RecordPopupComponent extends Component {
 
+    /**
+     * Creates an instance of RecordPopupComponent.
+     * @param {HTMLElement} element The HTML element representing the record popup.
+     */
     constructor(element) {
         super(element);
         this.modal = $.find('#readMore');
         this.initRecordPopup();
     }
 
+    /**
+     * Initializes the record popup by setting up event listeners for click and keydown events.
+     */
     initRecordPopup() {
         $(this.element).on('click keydown', (ev) => {
             if (ev.type === 'click' || (ev.type === 'keydown' && (ev.which === 13 || ev.which === 32))) {
@@ -16,6 +26,10 @@ class RecordPopupComponent extends Component {
         });
     }
 
+    /**
+     * Handles the click event on the record popup element.
+     * @param {JQuery.ClickEvent} ev The click event object.
+     */
     handleClick(ev) {
         const record_id = $(this.element).data('record-id');
         const version_id = $(this.element).data('version-id');
diff --git a/src/frontend/components/select-all/lib/component.ts b/src/frontend/components/select-all/lib/component.ts
index 1ea475db5..91ba1c629 100644
--- a/src/frontend/components/select-all/lib/component.ts
+++ b/src/frontend/components/select-all/lib/component.ts
@@ -1,14 +1,24 @@
 import { Component } from 'component';
 
+/**
+ * SelectAllComponent class to manage the behavior of a "select all" checkbox.
+ */
 export default class SelectAllComponent extends Component {
     el: JQuery<HTMLInputElement>;
 
-    constructor(element) {
+    /**
+     * Creates an instance of SelectAllComponent.
+     * @param {HTMLElement} element The HTML element representing the "select all" checkbox.
+     */
+    constructor(element: HTMLElement) {
         super(element);
-        this.el = $(element);
+        this.el = $<HTMLInputElement>(element as HTMLInputElement);
         this.element.addEventListener('change', () => this.onChange());
     }
 
+    /**
+     * Handles the change event of the "select all" checkbox.
+     */
     onChange() {
         const parent = this.el.closest('fieldset');
         const boxes = parent.find('input[type=checkbox]');
@@ -19,4 +29,4 @@ export default class SelectAllComponent extends Component {
             i.checked = (<HTMLInputElement>this.el[0]).checked;
         });
     }
-}
\ No newline at end of file
+}
diff --git a/src/frontend/components/sidebar/lib/component.js b/src/frontend/components/sidebar/lib/component.js
index f972b778c..27dea6b4c 100644
--- a/src/frontend/components/sidebar/lib/component.js
+++ b/src/frontend/components/sidebar/lib/component.js
@@ -7,7 +7,14 @@ const KEY_NAV_STATE = 'main-menu::state';
 const NAV_STATE_EXPANDED = 'expanded';
 const NAV_STATE_COLLAPSED = 'collapsed';
 
+/**
+ * SidebarComponent class to manage the sidebar behavior.
+ */
 class SidebarComponent extends Component {
+    /**
+     * Creates an instance of SidebarComponent.
+     * @param {HTMLElement} element The HTML element representing the sidebar.
+     */
     constructor(element) {
         super(element);
         this.el = $(this.element);
@@ -19,6 +26,9 @@ class SidebarComponent extends Component {
         this.el.removeClass('hidden');
     }
 
+    /**
+     * Initializes the sidebar by setting up the toggle button and handling the initial state.
+     */
     initSidebar() {
         const sidebarToggle = this.el.find('.sidebar__toggle');
         sidebarObservable.addSubscriber(this);
@@ -40,6 +50,9 @@ class SidebarComponent extends Component {
         sidebarToggle.click(() => { this.handleClick(); });
     }
 
+    /**
+     * Handles the window resize event to adjust the sidebar state based on resolution.
+     */
     handleResize() {
         if (this.isMobileResolution()) {
             if (!this.isMobile) {
@@ -54,6 +67,9 @@ class SidebarComponent extends Component {
         }
     }
 
+    /**
+     * Handles the click event on the sidebar toggle button.
+     */
     handleClick() {
         if (this.el.hasClass(COLLAPSED_CLASS)) {
             this.expandSidebar();
@@ -63,6 +79,9 @@ class SidebarComponent extends Component {
         sidebarObservable.sideBarChange();
     }
 
+    /**
+     * Collapses the sidebar by adding the collapsed class and updating the main content area.
+     */
     collapseSidebar() {
         this.el.addClass(COLLAPSED_CLASS);
         $(this.toggle).attr('aria-expanded', 'false');
@@ -75,6 +94,9 @@ class SidebarComponent extends Component {
         }
     }
 
+    /**
+     * Expands the sidebar by removing the collapsed class and updating the main content area.
+     */
     expandSidebar() {
         this.el.removeClass(COLLAPSED_CLASS);
         $(this.toggle).attr('aria-expanded', 'true');
@@ -87,6 +109,10 @@ class SidebarComponent extends Component {
         }
     }
 
+    /**
+     * Checks if the current resolution is mobile.
+     * @returns {boolean} True if the resolution is mobile, false otherwise.
+     */
     isMobileResolution() {
         return window.matchMedia('(max-width: 991px)').matches;
     }
diff --git a/src/frontend/components/sidebar/lib/sidebarObservable.js b/src/frontend/components/sidebar/lib/sidebarObservable.js
index b74750ee4..8797510ba 100644
--- a/src/frontend/components/sidebar/lib/sidebarObservable.js
+++ b/src/frontend/components/sidebar/lib/sidebarObservable.js
@@ -1,12 +1,25 @@
+/**
+ * SidebarObservable class to manage subscribers for sidebar changes.
+ */
 class SidebarObservable {
+    /**
+     * Creates an instance of SidebarObservable.
+     */
     constructor() {
         this.observers = [];
     }
 
+    /**
+     * Adds a subscriber to the observers list.
+     * @param {object} subscriber The subscriber object that will handle sidebar changes.
+     */
     addSubscriber(subscriber) {
         this.observers.push(subscriber);
     }
 
+    /**
+     * Trigger sidebar change event for all subscribers.
+     */
     sideBarChange() {
         this.observers.forEach(item => item.handleSideBarChange?.());
     }
diff --git a/src/frontend/components/sortable/lib/component.js b/src/frontend/components/sortable/lib/component.js
index 1096aba3f..05939e2a1 100644
--- a/src/frontend/components/sortable/lib/component.js
+++ b/src/frontend/components/sortable/lib/component.js
@@ -7,7 +7,15 @@ const SORTABLE_HANDLE = 'sortable__handle';
 const SORTABLE_HANDLE_HIDDEN = 'sortable__handle--hidden';
 const SORTABLE_ROW = 'sortable__row';
 
+/**
+ * Class representing a Sortable component.
+ * This component allows users to add, delete, and reorder items in a sortable list.
+ */
 class SortableComponent extends Component {
+    /**
+     * Creates an instance of SortableComponent.
+     * @param {HTMLElement} element The HTML element where the sortable component will be initialized
+     */
     constructor(element) {
         super(element);
         this.el = $(this.element);
@@ -19,6 +27,9 @@ class SortableComponent extends Component {
         this.initSortable();
     }
 
+    /**
+     * Initializes the sortable component with event listeners.
+     */
     initSortable() {
         if (this.el.find(`.${SORTABLE_ROW}`).length === 1) {
             this.hideButtons();
@@ -32,6 +43,9 @@ class SortableComponent extends Component {
         this.delBtn.on('click', (ev) => { this.handleClickDelete(ev); });
     }
 
+    /**
+     * Handles the click event for adding a new sortable row.
+     */
     handleClickAdd() {
         this.el.find(`.${BTN_ICON_CLOSE}`).removeClass(BTN_ICON_CLOSE_HIDDEN);
         this.el.find(`.${SORTABLE_HANDLE}`).removeClass(SORTABLE_HANDLE_HIDDEN);
@@ -58,6 +72,10 @@ class SortableComponent extends Component {
         this.sortableList.sortable('refresh');
     }
 
+    /**
+     * Handles the click event for deleting a sortable row.
+     * @param {JQuery.ClickEvent} ev The click event triggered by the user.
+     */
     handleClickDelete(ev) {
         const target = $(ev.currentTarget);
 
@@ -68,10 +86,17 @@ class SortableComponent extends Component {
         }
     }
 
+    /**
+     * Generates a unique identifier based on the current time.
+     * @returns {number} A unique identifier based on the current time.
+     */
     uniqueID() {
         return Math.floor(Math.random() * Date.now());
     }
 
+    /**
+     * Hides the delete buttons and drag handles when there is only one sortable row.
+     */
     hideButtons() {
         this.el.find(`.${BTN_ICON_CLOSE}`).addClass(BTN_ICON_CLOSE_HIDDEN);
         this.el.find(`.${SORTABLE_HANDLE}`).addClass(SORTABLE_HANDLE_HIDDEN);
diff --git a/src/frontend/components/sortable/orderable-sortable/lib/component.js b/src/frontend/components/sortable/orderable-sortable/lib/component.js
index 201e549d8..23c943a27 100644
--- a/src/frontend/components/sortable/orderable-sortable/lib/component.js
+++ b/src/frontend/components/sortable/orderable-sortable/lib/component.js
@@ -1,6 +1,14 @@
 import { Component } from 'component';
 
+/**
+ * Class representing an OrderableSortable component.
+ * This component allows users to sort items in a list based on their input values.
+ */
 class OrderableSortableComponent extends Component {
+    /**
+     * Creates an instance of OrderableSortableComponent.
+     * @param {HTMLElement} element The HTML element where the sortable component will be initialized
+     */
     constructor(element) {
         super(element);
         this.el = $(this.element);
@@ -9,10 +17,17 @@ class OrderableSortableComponent extends Component {
         this.initSortable();
     }
 
+    /**
+     * Initializes the sortable component with event listeners.
+     */
     initSortable() {
         this.selectElement.on('click', (ev) => { this.handleOrder(ev); });
     }
 
+    /**
+     * Handles the click event for ordering items.
+     * @param {JQuery.ClickEvent} ev The click event triggered by the user.
+     */
     handleOrder(ev) {
         const target = $(ev.currentTarget);
 
@@ -23,6 +38,10 @@ class OrderableSortableComponent extends Component {
         }
     }
 
+    /**
+     * Order rows based on the input values of the sortable items.
+     * @param {boolean} ascending Whether to order rows in ascending or descending order.
+     */
     orderRows(ascending) {
         const items = $('.sortable__list').children('.sortable__row')
             .sort(function (a, b) {
diff --git a/src/frontend/components/summernote/lib/component.js b/src/frontend/components/summernote/lib/component.js
index 666479053..60e5ec293 100644
--- a/src/frontend/components/summernote/lib/component.js
+++ b/src/frontend/components/summernote/lib/component.js
@@ -3,12 +3,22 @@ import { Component } from 'component';
 import 'summernote/dist/summernote-bs4';
 import { logging } from 'logging';
 
+/**
+ * Class representing a SummerNote component.
+ */
 class SummerNoteComponent extends Component {
+    /**
+     * Creates an instance of SummerNoteComponent.
+     * @param {HTMLElement} element The HTML element where the Summernote editor will be initialized
+     */
     constructor(element) {
         super(element);
         this.initSummerNote();
     }
 
+    /**
+     * Initializes the Summernote editor with the specified configuration.
+     */
     initSummerNote() {
         const self = this;
         $(this.element).summernote({
@@ -50,6 +60,11 @@ class SummerNoteComponent extends Component {
         });
     }
 
+    /**
+     * Handles file upload for the HTML editor.
+     * @param {File} file The file to upload.
+     * @param {HTMLElement} el The HTML element where the editor is initialized.
+     */
     handleHtmlEditorFileUpload(file, el) {
         if (file.type.includes('image')) {
             const data = new FormData();
diff --git a/src/frontend/js/lib/component.js b/src/frontend/js/lib/component.js
index ea94b890b..56bb66090 100644
--- a/src/frontend/js/lib/component.js
+++ b/src/frontend/js/lib/component.js
@@ -5,8 +5,9 @@ const componentInitializedAttr = 'data-component-initialized';
 
 /**
  * The actual attribute name that's set on a component that's initialized.
- * This is appended with the component name, to allow multiple different
- * components to be initialized on the same element.
+ * @description This is appended with the component name, to allow multiple different components to be initialized on the same element.
+ * @param {string} component_name The name of the component
+ * @returns {string} The attribute name for the component
  */
 const componentInitializedAttrName = (component_name) => {
     return componentInitializedAttr + '-' + component_name;
@@ -14,6 +15,9 @@ const componentInitializedAttrName = (component_name) => {
 
 /**
  * Establish whether a component has already been initialized on an element
+ * @param {HTMLElement} element The element to check
+ * @param {string} name The name of the component
+ * @returns {boolean} True if the component has been initialized, false otherwise
  */
 const componentIsInitialized = (element, name) => {
     return element.getAttribute(componentInitializedAttrName(name)) ? true : false;
@@ -25,13 +29,22 @@ const componentIsInitialized = (element, name) => {
  */
 class Component {
 
-    // Whether a component can be reinitialized on an element. For legacy
-    // reasons, the default is not to be and initialization will only be run
-    // once. For components that set this to true, they must cleanly handle
-    // such a reinitialization (returning the object but not resetting up HTML
-    // elements etc)
+    /**
+     * Whether a component can be reinitialized on an element. For legacy
+     * reasons, the default is not to be and initialization will only be run
+     * once. For components that set this to true, they must cleanly handle
+     * such a reinitialization (returning the object but not resetting up HTML
+     * elements etc)
+     * @returns {boolean} True if the component can be reinitialized, false otherwise
+     * @static
+     */
     static get allowReinitialization() { return false; }
 
+    /**
+     * Create a new component instance.
+     * @param {HTMLElement} element The element to initialize the component on
+     * @throws {Error} If the element is not an HTMLElement
+     */
     constructor(element) {
         if (!(element instanceof HTMLElement)) {
             throw new Error(
@@ -46,14 +59,13 @@ class Component {
 }
 
 /**
- * All registered component
+ * All registered components
+ * @type {Array[Function]}
  */
 const registeredComponents = [];
 
 /**
  * Register a component that can be initialized
- *
- * @export
  * @param { Function } componentInitializer Function that will be called when component initializes
  */
 const registerComponent = (componentInitializer) => {
@@ -62,10 +74,7 @@ const registerComponent = (componentInitializer) => {
 
 /**
  * Initialize all registered components in the defined scope
- *
- * @export
- * @param {HTMLElement} scope The scope to initialize the components in (either
- *   JQuery elements or DOM).
+ * @param {HTMLElement | JQuery<HTMLElement>} scope The scope to initialize the components in (either JQuery elements or DOM).
  */
 const initializeRegisteredComponents = (scope) => {
     registeredComponents.forEach((componentInitializer) => {
@@ -75,10 +84,8 @@ const initializeRegisteredComponents = (scope) => {
 
 /**
  * Get an Array of elements matching `selector` within `scope`
- *
- * @export
  * @param {HTMLElement} scope The scope to select elements
- * @param {String} selector The selector to select elements
+ * @param {string} selector The selector to select elements
  * @returns {Array[HTMLElement]} An array of elements
  */
 const getComponentElements = (scope, selector) => {
@@ -93,10 +100,8 @@ const getComponentElements = (scope, selector) => {
 /**
  * Initialize component `Component` on all elements matching `selector` within `scope`
  * Will only initialize elements that have not been initialized.
- *
- * @export
  * @param {HTMLElement} scope The scope to initialize the objects on
- * @param {String|Function} selector The selector to select elements
+ * @param {string|Function} selector The selector to select elements
  * @param {Component} ComponentClass The Component class to initialize
  * @returns {Array[Component]} An array of initialized components
  */
diff --git a/src/frontend/js/lib/get-field-values.js b/src/frontend/js/lib/get-field-values.js
index f378e6a7c..ef33bc388 100644
--- a/src/frontend/js/lib/get-field-values.js
+++ b/src/frontend/js/lib/get-field-values.js
@@ -1,6 +1,11 @@
 import 'jstree';
 
-// General function to format date as per backend
+/**
+ * General function to format date as per backend
+ * @param {Date} date - The date to format
+ * @returns {Object} An object with year, month, day, hour, minute, second, and epoch properties
+ * @private
+ */
 const format_date = function (date) {
     if (!date) return undefined;
     return {
@@ -15,7 +20,14 @@ const format_date = function (date) {
     };
 };
 
-// get the value from a field, depending on its type
+/**
+ * get the value from a field, depending on its type
+ * @param {jQuery} $depends - The jQuery object representing the field
+ * @param {boolean} filtered - Whether the field is filtered
+ * @param {boolean} for_code - Whether to return the value for code generation
+ * @param {boolean} for_autosave - Whether to return the value for autosave
+ * @returns {string|Array|Object} The value(s) of the field, formatted according to the field type
+ */
 const getFieldValues = function ($depends, filtered, for_code, for_autosave) {
     const type = $depends.data('column-type');
 
diff --git a/src/frontend/js/lib/guid.js b/src/frontend/js/lib/guid.js
index e9df8d077..4298933e7 100644
--- a/src/frontend/js/lib/guid.js
+++ b/src/frontend/js/lib/guid.js
@@ -1,3 +1,8 @@
+/**
+ * Get a new GUID (Globally Unique Identifier).
+ * @returns {string} A new GUID (Globally Unique Identifier)
+ * @deprecated Use `crypto.randomUUID()` instead if available.
+ */
 const guid = function () {
     var S4 = function () {
         return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
diff --git a/src/frontend/js/lib/logging.js b/src/frontend/js/lib/logging.js
index 223648caa..7ad2f1e0b 100644
--- a/src/frontend/js/lib/logging.js
+++ b/src/frontend/js/lib/logging.js
@@ -1,6 +1,14 @@
 import { uploadMessage } from 'util/scriptErrorHandler';
 
+/**
+ * Class to manage logging in the application.
+ * It will log to the console if the application is running in a development environment,
+ * and will upload the logs to the server if it's running in production.
+ */
 class Logging {
+    /**
+     * Initializes the logging class and determines if logging is allowed based on the environment.
+     */
     constructor() {
         this.allowLogging =
             window.test ||
@@ -9,15 +17,21 @@ class Logging {
             location.hostname.endsWith('.peek.digitpaint.nl');
     }
 
+    /**
+     * Logs a message to the console or uploads it to the server based on the environment.
+     */
     log(...message) {
         if (this.allowLogging) {
-            console.log(...message);
+            console.log(message);
         } else {
             const message = this.formatMessage('log', ...message);
             uploadMessage(message);
         }
     }
 
+    /**
+     * Logs an informational message to the console or uploads it to the server based on the environment.
+     */
     info(...message) {
         if (this.allowLogging) {
             console.info(message);
@@ -27,6 +41,9 @@ class Logging {
         }
     }
 
+    /**
+     * Logs a warning message to the console or uploads it to the server based on the environment.
+     */
     warn(...message) {
         if (this.allowLogging) {
             console.warn(message);
@@ -36,6 +53,9 @@ class Logging {
         }
     }
 
+    /**
+     * Logs an error message to the console or uploads it to the server based on the environment.
+     */
     error(...message) {
         if (this.allowLogging) {
             console.error(message);
@@ -45,6 +65,9 @@ class Logging {
         }
     }
 
+    /**
+     * Formats a message by prefixing it with the log type and converting any objects to JSON strings.
+     */
     formatMessage(type, ...message) {
         let output = type + ': ';
         for (let i = 0; i < message.length; i++) {
diff --git a/src/frontend/js/lib/set-field-value.test.ts b/src/frontend/js/lib/set-field-value.test.ts
index 1033d5872..e7e852e3a 100644
--- a/src/frontend/js/lib/set-field-value.test.ts
+++ b/src/frontend/js/lib/set-field-value.test.ts
@@ -1,19 +1,18 @@
-/* eslint-disable */
-import "components/button/lib/rename-button";
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import 'components/button/lib/rename-button';
 /* @ts-ignore */
-import inputComponent from "components/form-group/input";
+import inputComponent from 'components/form-group/input';
 /* @ts-ignore */
-import buttonComponent from "components/button";
+import buttonComponent from 'components/button';
 /* @ts-ignore */
-import multipleSelectComponent from "components/form-group/multiple-select";
+import multipleSelectComponent from 'components/form-group/multiple-select';
 /* @ts-ignore */
-import selectWidgetComponent from "components/form-group/select-widget";
+import selectWidgetComponent from 'components/form-group/select-widget';
 /* @ts-ignore */
-import textAreaComponent from "components/form-group/textarea";
+import textAreaComponent from 'components/form-group/textarea';
 import { describe, it, expect, beforeEach, jest } from '@jest/globals';
-import { setFieldValues } from "./set-field-values";
+import { setFieldValues } from './set-field-values';
 
-// Mocking jQuery plugins
 declare global {
     interface JQuery<TElement = HTMLElement> {
         renameButton: (options?: any) => JQuery<TElement>;
@@ -28,7 +27,6 @@ declare global {
     $.fn.filedrag = jest.fn().mockReturnThis();
 })(jQuery);
 
-// DOM elements for testing
 const stringDom = `
 <div class="form-group linkspace-field" data-column-id="19" data-column-type="string" data-value-selector=""
     data-show-add="" data-modal-field-ids="" data-curval-instance-name="" data-name="text" data-name-short=""
diff --git a/src/frontend/js/lib/set-field-values.js b/src/frontend/js/lib/set-field-values.js
index a28dc6189..fcfd241ca 100644
--- a/src/frontend/js/lib/set-field-values.js
+++ b/src/frontend/js/lib/set-field-values.js
@@ -2,17 +2,19 @@ import CurvalModalComponent from 'components/modal/modals/curval';
 import documentComponent from 'components/form-group/input/lib/documentComponent';
 import 'jstree';
 
-/*
-  Set the value of a field, depending on its type.
-
-  curval fields not supported at the time of writing
-
+/**
+  @fileoverview Set the value of a field, depending on its type.
+  Curval fields not supported at the time of writing
   For text only values, accepts arrays of strings
-
   For enum-type values (enums, trees, people) accepts an object with either an
   "id" key or a "text" key, with the required value
 */
 
+/**
+ * Set the value of a field based on its type.
+ * @param {JQuery} $field The field to set values for
+ * @param {(string | object)[]} values
+ */
 const setFieldValues = function ($field, values) {
 
     const type = $field.data('column-type');
@@ -95,8 +97,12 @@ const setFieldValues = function ($field, values) {
     }
 };
 
-// Deal with either single value field or field with multiple inputs. Create as
-// many inputs as required
+/**
+ * Deal with either single value field or field with multiple inputs. Create as many inputs as required and return the input at the specified index.
+ * @param {JQuery} $field The field to prepare
+ * @param {number} index The index of the input to return
+ * @returns {JQuery} The input at the specified index, or the field itself if it is not a multi-value field
+ */
 const prepare_multi = function ($field, index) {
     if ($field.data('is-multivalue')) {
         let $multi_container = $field.find('.multiple-select__list');
@@ -110,6 +116,11 @@ const prepare_multi = function ($field, index) {
     }
 };
 
+/**
+ * Set the value of a single enum field.
+ * @param {JQuery} $element The element to set the value for
+ * @param {(string | object)[]} values The values to set, either as strings or objects with an "id" key or a "text" key
+ */
 const set_enum_single = function ($element, values) {
 
     const type = $element.data('column-type');
@@ -143,6 +154,11 @@ const set_enum_single = function ($element, values) {
 
 };
 
+/**
+ * Set the value of a multi-value enum field.
+ * @param {JQuery} $element The element to set the value for
+ * @param {(string|object)[]} values The values to set, either as strings or objects with an "id" key or a "text" key
+ */
 const set_enum_multi = function ($element, values) {
 
     const id_hash = {};
@@ -200,13 +216,18 @@ const set_enum_multi = function ($element, values) {
     }
 };
 
+/**
+ * Set the date for a date field.
+ * @param {JQuery} $element The element to set the date for
+ * @param {string | object} value The value to set, either as a string or an object with an "epoch" key or "year", "month", "day" keys
+ */
 const set_date = function ($element, value) {
     const $input = $element.find('input');
     if (/^\d+$/.test(value)) {
-    // Assume epoch
+        // Assume epoch
         $input.datepicker('update', new Date(value * 1000));
     } else {
-    // Otherwise assume string
+        // Otherwise assume string
         if (typeof value === 'object') {
             if (value.epoch) {
                 $input.datepicker('update', new Date(value.epoch * 1000));
@@ -219,16 +240,31 @@ const set_date = function ($element, value) {
     }
 };
 
+/**
+ * Set the date range for a date range field.
+ * @param {JQuery} $element The element to set the date range for
+ * @param {object} value The value to set, an object with "from" and "to" keys, each being a date string or an object with "epoch" or "year", "month", "day" keys
+ */
 const set_daterange = function ($element, value) {
     set_date($element.find('.input--from'), value.from);
     set_date($element.find('.input--to'), value.to);
 };
 
+/**
+ * Set the value of a string field.
+ * @param {JQuery} $element The element to set the value for
+ * @param {string} value The value to set
+ */
 const set_string = function ($element, value) {
     const $input = $element.find('input').length ? $element.find('input') : $element.find('textarea');
     $input.val(value).trigger('change');
 };
 
+/**
+ * Set the value of a tree field.
+ * @param {JQuery} $field The field to set values for
+ * @param {(string | object)} values The values to set, either as strings or objects with an "id" key or a "text" key
+ */
 const set_tree = function ($field, values) {
 
     let $jstree = $field.find('.jstree').jstree(true);
diff --git a/src/frontend/js/lib/util/actionsHandler/lib/actionsLoader.ts b/src/frontend/js/lib/util/actionsHandler/lib/actionsLoader.ts
index 474fd8647..61eb2a4ac 100644
--- a/src/frontend/js/lib/util/actionsHandler/lib/actionsLoader.ts
+++ b/src/frontend/js/lib/util/actionsHandler/lib/actionsLoader.ts
@@ -1,6 +1,6 @@
 /**
  * Load the actions object from the body data (Base64 encoded JSON)
- * @returns An object representing the actions or undefined if no actions are defined
+ * @returns { Promise<string[]> } An object representing the actions or undefined if no actions are defined
  */
 const loadActions = async () => {
     const $body = $('body');
@@ -12,4 +12,4 @@ const loadActions = async () => {
     return actions;
 };
 
-export default loadActions;
\ No newline at end of file
+export default loadActions;
diff --git a/src/frontend/js/lib/util/actionsHandler/lib/clearAutorecoverAction.ts b/src/frontend/js/lib/util/actionsHandler/lib/clearAutorecoverAction.ts
index b1d66dc9e..90181a614 100644
--- a/src/frontend/js/lib/util/actionsHandler/lib/clearAutorecoverAction.ts
+++ b/src/frontend/js/lib/util/actionsHandler/lib/clearAutorecoverAction.ts
@@ -2,7 +2,10 @@ import StorageProvider from 'util/storageProvider';
 import { addAction } from './handler';
 import loadActions from './actionsLoader';
 
-// Exported to be used in tests - return values are to be used in tests
+/**
+ * Action handler to clear the autorecover data for a record.
+ * @returns {Promise<boolean>} Returns a promise that resolves to true if the action was successful, false otherwise.
+ */
 export const clearAutorecoverAction = async () => {
     // Load the body as a jQuery object
     const $body = $('body');
diff --git a/src/frontend/js/lib/util/actionsHandler/lib/handler.ts b/src/frontend/js/lib/util/actionsHandler/lib/handler.ts
index 2979f5345..34a2942ce 100644
--- a/src/frontend/js/lib/util/actionsHandler/lib/handler.ts
+++ b/src/frontend/js/lib/util/actionsHandler/lib/handler.ts
@@ -9,7 +9,7 @@ const actions: (() => void)[] = [];
 
 /**
  * Add an action to the handler
- * @param action {()=>void} Action to add to the handler
+ * @param {()=>void} action Action to add to the handler
  */
 const addAction = (action: () => void) => {
     actions.push(action);
@@ -22,4 +22,4 @@ const handleActions: () => void = () => {
     actions.forEach(action => action?.());
 };
 
-export { addAction, handleActions };
\ No newline at end of file
+export { addAction, handleActions };
diff --git a/src/frontend/js/lib/util/common.test.ts b/src/frontend/js/lib/util/common.test.ts
index 9474a0d64..00d42450a 100644
--- a/src/frontend/js/lib/util/common.test.ts
+++ b/src/frontend/js/lib/util/common.test.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { fromJson, hideElement, showElement } from './common';
 import { describe, it, expect, beforeEach, afterEach, jest } from '@jest/globals';
 
@@ -77,14 +78,14 @@ describe('common functions', () => {
 
         it('returns an empty object for null', () => {
             const json = null;
-            // @ts-expect-error This is a test for null input
+            /* @ts-ignore */
             const parsed = fromJson(json);
             expect(parsed).toEqual({});
         });
 
         it('returns an empty object for undefined', () => {
             const json = undefined;
-            // @ts-expect-error This is a test for undefined input
+            /* @ts-ignore */
             const parsed = fromJson(json);
             expect(parsed).toEqual({});
         });
diff --git a/src/frontend/js/lib/util/common.ts b/src/frontend/js/lib/util/common.ts
index fad96f87b..64ee369d0 100644
--- a/src/frontend/js/lib/util/common.ts
+++ b/src/frontend/js/lib/util/common.ts
@@ -1,3 +1,7 @@
+/**
+ * Hides an element by adding the 'hidden' class and aria-hidden attribute.,
+ * @param { HTMLElement | JQuery<HTMLElement> } element HTMLElement or jQuery element to hide
+ */
 export const hideElement = (element: HTMLElement | JQuery<HTMLElement>) => {
     const $el = element instanceof HTMLElement ? $(element) : element;
     if ($el.hasClass('hidden')) return;
@@ -7,6 +11,10 @@ export const hideElement = (element: HTMLElement | JQuery<HTMLElement>) => {
     $el.css('visibility', 'hidden');
 };
 
+/**
+ * Show an element by removing the 'hidden' class and aria-hidden attribute.
+ * @param {HTMLElement | JQuery<HTMLElement>} element HTMLElement or jQuery element to show
+ */
 export const showElement = (element: HTMLElement | JQuery<HTMLElement>) => {
     const $el = element instanceof HTMLElement ? $(element) : element;
     if (!$el.hasClass('hidden')) return;
@@ -15,6 +23,11 @@ export const showElement = (element: HTMLElement | JQuery<HTMLElement>) => {
     $el.removeAttr('style');
 };
 
+/**
+ * Parse a JSON string or object and return an object.
+ * @param {string | object} json JSON string or object to parse
+ * @returns {object} Parsed object or an empty object if parsing fails
+ */
 export const fromJson = (json: string | object) => {
     try {
         // An empty string returns false in a boolean context, this also covers null and undefined
diff --git a/src/frontend/js/lib/util/domutils/lib/elementFactory.ts b/src/frontend/js/lib/util/domutils/lib/elementFactory.ts
index 61c8935ba..dcd83404a 100644
--- a/src/frontend/js/lib/util/domutils/lib/elementFactory.ts
+++ b/src/frontend/js/lib/util/domutils/lib/elementFactory.ts
@@ -1,3 +1,9 @@
+/**
+ * Creates a DOM element of the specified type and applies the given properties.
+ * @param {'button'|'div'|'input'} type The type of element to create.
+ * @param {object} definition An object containing properties to set on the element.
+ * @returns {JQuery<HTMLButtonElement | HTMLDivElement | HTMLInputElement>} A jQuery object containing the created element.
+ */
 function createElement(type: 'button', definition: object): JQuery<HTMLButtonElement>;
 function createElement(type: 'div', definition: object): JQuery<HTMLDivElement>;
 function createElement(type: 'input', definition: object): JQuery<HTMLInputElement>;
@@ -13,4 +19,4 @@ function createElement(type: 'button' | 'div' | 'input', definition: object): JQ
     return $(el);
 }
 
-export { createElement };
\ No newline at end of file
+export { createElement };
diff --git a/src/frontend/js/lib/util/encryptedStorage/lib/encryptedStorage.test.ts b/src/frontend/js/lib/util/encryptedStorage/lib/encryptedStorage.test.ts
index 5551b1aa1..675460122 100644
--- a/src/frontend/js/lib/util/encryptedStorage/lib/encryptedStorage.test.ts
+++ b/src/frontend/js/lib/util/encryptedStorage/lib/encryptedStorage.test.ts
@@ -1,19 +1,19 @@
+/* eslint-disable jsdoc/require-jsdoc */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* @ts-ignore */
 import { setupCrypto } from 'testing/globals.definitions';
 import { EncryptedStorage } from './encryptedStorage';
-import { describe, it, expect, beforeAll, beforeEach, afterEach } from '@jest/globals';
 
-// Mock implementation of the Storage interface for testing purposes
 class TestStorage implements Storage {
     private map = new Map<string, string>();
 
-    [name: string]: any;  
-    length: number;
+    [name: string]: any;
+    length: number = 0;
 
     clear(): void {
         this.map.clear();
         this.length = 0;
     }
-
     getItem(key: string): string | null {
         const ret = this.map.get(key);
         if (ret === undefined) {
@@ -21,7 +21,6 @@ class TestStorage implements Storage {
         }
         return ret;
     }
-
     key(index: number): string | null {
         const keys = Array.from(this.map.keys());
         if (keys.length <= index) {
@@ -29,7 +28,6 @@ class TestStorage implements Storage {
         }
         return keys[index];
     }
-
     removeItem(key: string): void {
         if (this.map.has(key)) {
             this.map.delete(key);
@@ -37,7 +35,6 @@ class TestStorage implements Storage {
             this[key] = undefined;
         }
     }
-
     setItem(key: string, value: string): void {
         this.map.set(key, value);
         this[key] = value;
diff --git a/src/frontend/js/lib/util/encryptedStorage/lib/encryptedStorage.ts b/src/frontend/js/lib/util/encryptedStorage/lib/encryptedStorage.ts
index d36eacee5..ec4263dee 100644
--- a/src/frontend/js/lib/util/encryptedStorage/lib/encryptedStorage.ts
+++ b/src/frontend/js/lib/util/encryptedStorage/lib/encryptedStorage.ts
@@ -8,34 +8,29 @@ class EncryptedStorage {
 
     /**
      * Returns the singleton instance of EncryptedStorage.
+     * @returns {EncryptedStorage} The singleton instance of EncryptedStorage
      */
-    static instance() {
+    static instance(): EncryptedStorage {
         if (!EncryptedStorage._instance) {
             EncryptedStorage._instance = new EncryptedStorage(encrypt, decrypt);
         }
         return EncryptedStorage._instance;
     }
 
-    /**
-     * The underlying storage object.
-     */
-    private storage: Storage;
-
     /**
      * Create a new EncryptedStorage instance.
-     * @param encrypt The function to encrypt data (this is to make it pluggable for different encryption algorithms should it be required)
-     * @param decrypt The function to decrypt data (this is to make it pluggable for different encryption algorithms should it be required)
-     * @param storage The storage provider to use (defaults to window.localStorage)
+     * @param {(string, string)=>Promise<string>} encrypt The function to encrypt data (this is to make it pluggable for different encryption algorithms should it be required)
+     * @param {(string,string)=>Promise<string>} decrypt The function to decrypt data (this is to make it pluggable for different encryption algorithms should it be required)
+     * @param {Storage} storage The storage provider to use (defaults to window.localStorage)
      */
-    constructor(private encrypt: (data: string, key: string) => Promise<string>, private decrypt: (data: string, key: string) => Promise<string>, storage?: Storage) {
-        this.storage = storage || window.localStorage;
+    constructor(private encrypt: (data: string, key: string) => Promise<string>, private decrypt: (data: string, key: string) => Promise<string>, private storage: Storage = localStorage) {
     }
 
     /**
      * Store an item in the encrypted storage.
-     * @param key The key to store the value under
-     * @param value The value to store
-     * @param encryptionKey The key to use to encrypt the value
+     * @param {string} key The key to store the value under
+     * @param {string} value The value to store
+     * @param {string} encryptionKey The key to use to encrypt the value
      */
     async setItem(key: string, value: string, encryptionKey: string) {
         const encryptedValue = await this.encrypt(value, encryptionKey);
@@ -44,11 +39,11 @@ class EncryptedStorage {
 
     /**
      * Get an item from the encrypted storage.
-     * @param key The key to retrieve the value for
-     * @param encryptionKey The key to use to decrypt the value
-     * @returns The decrypted value, or null if the key does not exist
+     * @param {string} key The key to retrieve the value for
+     * @param {string} encryptionKey The key to use to decrypt the value
+     * @returns {Promise<string | null>} The decrypted value, or null if the key does not exist
      */
-    async getItem(key: string, encryptionKey: string) {
+    async getItem(key: string, encryptionKey: string): Promise<string | null> {
         const encryptedValue = this.storage.getItem(key);
         if (!encryptedValue) {
             return null;
@@ -58,7 +53,7 @@ class EncryptedStorage {
 
     /**
      * Remove an item from the encrypted storage.
-     * @param key The key to remove from the storage
+     * @param {string} key The key to remove from the storage
      */
     removeItem(key: string) {
         this.storage.removeItem(key);
@@ -73,17 +68,18 @@ class EncryptedStorage {
 
     /**
      * Get the key at a given index in the encrypted storage.
-     * @param index The index of the key to retrieve
-     * @returns The key at the given index
+     * @param {number} index The index of the key to retrieve
+     * @returns {string} The key at the given index
      */
-    key(index: number) {
+    key(index: number): string | null {
         return this.storage.key(index);
     }
 
     /**
      * Get the number of items in the encrypted storage.
+     * @returns {number} The number of items in the storage
      */
-    get length() {
+    get length(): number {
         return this.storage.length;
     }
 }
diff --git a/src/frontend/js/lib/util/encryption/lib/encryption.ts b/src/frontend/js/lib/util/encryption/lib/encryption.ts
index 0bbbe81db..ceb487cb5 100644
--- a/src/frontend/js/lib/util/encryption/lib/encryption.ts
+++ b/src/frontend/js/lib/util/encryption/lib/encryption.ts
@@ -1,8 +1,8 @@
 /**
  * Encrypts data using AES-GCM
- * @param data The data to encrypt
- * @param password The password to encrypt the data with
- * @returns The encrypted data
+ * @param {string} data The data to encrypt
+ * @param {string} password The password to encrypt the data with
+ * @returns {Promise<string>} The encrypted data
  */
 export async function encrypt(data: string, password: string): Promise<string> {
     const key = createKey(password, 'encrypt');
@@ -25,9 +25,9 @@ export async function encrypt(data: string, password: string): Promise<string> {
 
 /**
  * Decrypts data using AES-GCM
- * @param data The data to decrypt
- * @param password The password to decrypt the data with
- * @returns The decrypted data
+ * @param {string} data The data to decrypt
+ * @param {string} password The password to decrypt the data with
+ * @returns {Promise<string>} The decrypted data
  */
 export async function decrypt(data: string, password: string): Promise<string> {
     const key = createKey(password, 'decrypt');
@@ -48,11 +48,11 @@ export async function decrypt(data: string, password: string): Promise<string> {
 
 /**
  * Creates a key for AES-GCM
- * @param password The password to create the key with
- * @param mode Whether to encrypt or decrypt
- * @returns The key
+ * @param {string} password The password to create the key with
+ * @param {'encrypt'|'decrypt'} mode Whether to encrypt or decrypt
+ * @returns {Promise<CryptoKey>} The key
  */
-async function createKey(password: string, mode: 'encrypt' | 'decrypt') {
+async function createKey(password: string, mode: 'encrypt' | 'decrypt'): Promise<CryptoKey> {
     const salt = new TextEncoder().encode('salt');
     const encoder = new TextEncoder();
     const deriver = crypto.subtle.importKey('raw', encoder.encode(password), 'PBKDF2', false, ['deriveKey']);
diff --git a/src/frontend/js/lib/util/errorHandler/lib/errorHandler.ts b/src/frontend/js/lib/util/errorHandler/lib/errorHandler.ts
index 3d09990a8..e57b35366 100644
--- a/src/frontend/js/lib/util/errorHandler/lib/errorHandler.ts
+++ b/src/frontend/js/lib/util/errorHandler/lib/errorHandler.ts
@@ -1,20 +1,34 @@
+/**
+ * Control to handle and display errors within the UI
+ */
 export class ErrorHandler {
     private el: JQuery<HTMLElement>;
     private errors: string[] = [];
     errorContainer: JQuery<HTMLElement>;
 
+    /**
+     * Create a new ErrorHandler instance
+     * @param element The element to attach the control to
+     */
     constructor(private element: HTMLElement) {
         this.el = $(element);
         this.el.data['errorHandler'] = this;
         this.initErrorDisplay();
     }
 
+    /**
+     * Initialise the display for the errors
+     */
     private initErrorDisplay() {
         this.errorContainer = $('<div class="error-container p-3 alert alert-danger font-weight-bold my-3 flex-column align-items-start"></div>');
         this.el.prepend(this.errorContainer);
         this.renderErrors();
     }
 
+    /**
+     * Add error(s) to the display
+     * @param errors The error(s) to add to the display
+     */
     addError(...errors: (string | Error)[]) {
         errors.forEach(error => {
             if (typeof error === 'string') {
@@ -29,11 +43,17 @@ export class ErrorHandler {
         this.renderErrors();
     }
 
+    /**
+     * Clear the errors from the display
+     */
     clearErrors() {
         this.errors = [];
         this.renderErrors();
     }
 
+    /**
+     * Render any errors present in the control
+     */
     private renderErrors() {
         this.errorContainer.empty();
         if (this.errors.length > 0) {
@@ -47,4 +67,4 @@ export class ErrorHandler {
             this.errorContainer.hide();
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/frontend/js/lib/util/filedrag/lib/filedrag.test.ts b/src/frontend/js/lib/util/filedrag/lib/filedrag.test.ts
index 411f081cb..0abedd382 100644
--- a/src/frontend/js/lib/util/filedrag/lib/filedrag.test.ts
+++ b/src/frontend/js/lib/util/filedrag/lib/filedrag.test.ts
@@ -1,7 +1,7 @@
+/* eslint-disable jsdoc/require-jsdoc */
 import { describe, it, expect, jest } from '@jest/globals';
 import FileDrag from './filedrag';
 
-// Test class implementation to expose private methods for testing
 class FileDragTest extends FileDrag {
     constructor(element: HTMLElement, onDrop: (files: File, index?: number, length?: number) => void = ()=>{}) {
         super(element, { debug: true }, onDrop);
diff --git a/src/frontend/js/lib/util/filedrag/lib/filedrag.ts b/src/frontend/js/lib/util/filedrag/lib/filedrag.ts
index 85da96bee..fbc1b310e 100644
--- a/src/frontend/js/lib/util/filedrag/lib/filedrag.ts
+++ b/src/frontend/js/lib/util/filedrag/lib/filedrag.ts
@@ -1,16 +1,39 @@
 import { hideElement, showElement } from 'util/common';
 
+/**
+ * FileDragOptions interface to define options for the FileDrag class.
+ */
 export interface FileDragOptions {
+    /**
+     * Whether to allow multiple files to be dropped.
+     * @default false
+     * @type {boolean}
+     */
     allowMultiple?: boolean;
+    /**
+     * Whether to enable debug mode for logging.
+     * @default false
+     * @type {boolean}
+     */
     debug?: boolean;
 }
 
+/**
+ * FileDrag class to handle drag and drop file uploads.
+ * @template T The type of the HTML element to be used for drag and drop.
+ */
 class FileDrag<T extends HTMLElement = HTMLElement> {
     private el: JQuery<T>;
     private dropZone: JQuery<HTMLElement>;
     // for testing
     protected dragging: boolean = false;
 
+    /**
+     * Creates an instance of FileDrag.
+     * @param {T} element The HTML element to attach the drag and drop functionality to.
+     * @param {FileDragOptions} options The options for the FileDrag instance.
+     * @param onDrop Callback function to be called when files are dropped.
+     */
     constructor(element: T, private options: FileDragOptions = {}, private onDrop: (files: File, index?: number, length?:number) => void) {
         if (options.debug) console.log('FileDrag', element, options);
         this.el = $(element);
@@ -19,6 +42,9 @@ class FileDrag<T extends HTMLElement = HTMLElement> {
         this.initElementEvents();
     }
 
+    /**
+     * Initializes the events for the drop zone elements.
+     */
     initElementEvents() {
         if (this.options.debug) console.log('initElementEvents');
         this.dropZone.on('dragenter', (e) => {
@@ -54,6 +80,9 @@ class FileDrag<T extends HTMLElement = HTMLElement> {
         });
     }
 
+    /**
+     * Initializes the document-wide drag and drop events.
+     */
     initDocumentEvents() {
         if (this.options.debug) console.log('initDocumentEvents');
         $(document).on('dragenter', () => {
@@ -84,6 +113,9 @@ class FileDrag<T extends HTMLElement = HTMLElement> {
         });
     }
 
+    /**
+     * Initializes the elements for the drag and drop functionality.
+     */
     initElements() {
         if (this.options.debug) console.log('initElements');
         this.el.data('draggable', 'true');
diff --git a/src/frontend/js/lib/util/formatters/lua.test.ts b/src/frontend/js/lib/util/formatters/lua.test.ts
index 2c67246b3..fcc060b5d 100644
--- a/src/frontend/js/lib/util/formatters/lua.test.ts
+++ b/src/frontend/js/lib/util/formatters/lua.test.ts
@@ -1,7 +1,9 @@
+/* eslint-disable jsdoc/require-jsdoc */
 import { describe, it, expect } from '@jest/globals';
 import { LUA } from './lua';
 
 describe('LUA tests', () => {
+    // Mock object to test string conversion
     class TestObject {
         toString() {
             return 'test';
diff --git a/src/frontend/js/lib/util/formatters/lua.ts b/src/frontend/js/lib/util/formatters/lua.ts
index 431406239..680b3715e 100644
--- a/src/frontend/js/lib/util/formatters/lua.ts
+++ b/src/frontend/js/lib/util/formatters/lua.ts
@@ -10,9 +10,9 @@ type stringLike = { toString(): string };
 
 /**
  * This is currently to purely mark where we expect LUA code to be present
- * @param strings Template to transform into LUA code
- * @param values The values to insert into the LUA code
- * @returns A string of LUA code
+ * @param {TemplateStringsArray} strings Template to transform into LUA code
+ * @param {(stringLike | string | number | LUACode)[]} values The values to insert into the LUA code
+ * @returns {LUACode} A string of LUA code
  */
 function LUA(strings: TemplateStringsArray, ...values: (stringLike | string | number | LUACode)[]): LUACode {
     let str = '';
diff --git a/src/frontend/js/lib/util/formatters/markdown.ts b/src/frontend/js/lib/util/formatters/markdown.ts
index 00f6c55dc..44c3fb363 100644
--- a/src/frontend/js/lib/util/formatters/markdown.ts
+++ b/src/frontend/js/lib/util/formatters/markdown.ts
@@ -4,6 +4,12 @@ type MarkdownCode = string;
 
 type stringLike = { toString(): string };
 
+/**
+ * Create a markdown string using template literals.
+ * @param { TemplateStringsArray } strings The template strings array containing the static parts of the markdown string.
+ * @param { (stringLike | string | number | MarkdownCode)[] } values The values to interpolate into the markdown string. These can be strings, numbers, or objects with a `toString` method.
+ * @returns {MarkdownCode} The formatted markdown string, processed by the marked library.
+ */
 function MarkDown(strings: TemplateStringsArray, ...values: (stringLike | string | number | MarkdownCode)[]): MarkdownCode {
     marked.use({ breaks: true });
     let str = '';
diff --git a/src/frontend/js/lib/util/gadsStorage/lib/AppStorage.test.ts b/src/frontend/js/lib/util/gadsStorage/lib/AppStorage.test.ts
index 39091a006..349e6f2ef 100644
--- a/src/frontend/js/lib/util/gadsStorage/lib/AppStorage.test.ts
+++ b/src/frontend/js/lib/util/gadsStorage/lib/AppStorage.test.ts
@@ -1,10 +1,10 @@
-/* eslint-disable */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { describe, it, expect, afterEach, jest } from '@jest/globals';
-import { AppStorage } from "./AppStorage";
-import { GadsStorage } from "./GadsStorage";
-import { NullStorage } from "./NullStorage";
+import { AppStorage } from './AppStorage';
+import { GadsStorage } from './GadsStorage';
+import { NullStorage } from './NullStorage';
 /* @ts-ignore */
-import { setupCrypto } from "testing/globals.definitions";
+import { setupCrypto } from 'testing/globals.definitions';
 
 describe('AppStorage', () => {
     afterEach(() => {
diff --git a/src/frontend/js/lib/util/gadsStorage/lib/AppStorage.ts b/src/frontend/js/lib/util/gadsStorage/lib/AppStorage.ts
index d4f6638ad..10915f2a4 100644
--- a/src/frontend/js/lib/util/gadsStorage/lib/AppStorage.ts
+++ b/src/frontend/js/lib/util/gadsStorage/lib/AppStorage.ts
@@ -5,6 +5,10 @@ import { NullStorage } from './NullStorage';
  * Interface for a storage object that can be used to store data in the browser.
  */
 export abstract class AppStorage {
+    /**
+     * Create an instance of the AppStorage class.
+     * @returns {AppStorage} An instance of the AppStorage class, which is either a GadsStorage or NullStorage instance.
+     */
     static CreateStorageInstance(): AppStorage {
         return crypto.subtle && typeof crypto.subtle != 'undefined' ? new GadsStorage() : new NullStorage();
     }
diff --git a/src/frontend/js/lib/util/gadsStorage/lib/GadsStorage.test.ts b/src/frontend/js/lib/util/gadsStorage/lib/GadsStorage.test.ts
index 9446ffe5c..f5c1df319 100644
--- a/src/frontend/js/lib/util/gadsStorage/lib/GadsStorage.test.ts
+++ b/src/frontend/js/lib/util/gadsStorage/lib/GadsStorage.test.ts
@@ -1,107 +1,100 @@
-/* eslint-disable */
-import { describe, it, expect, beforeAll, beforeEach, afterEach } from "@jest/globals";
-import { GadsStorage } from "./GadsStorage";
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { describe, it, expect, beforeAll, beforeEach, afterEach } from '@jest/globals';
+import { GadsStorage } from './GadsStorage';
 /* @ts-ignore */
-import { killNoMockCrypto, setupCrypto, setupNoMockCrypto } from "testing/globals.definitions";
+import { killNoMockCrypto, setupCrypto, setupNoMockCrypto } from 'testing/globals.definitions';
 
-if (!process.versions.node.startsWith('18')) {
-    describe('GadsStorage', () => {
-        const header = () => {
-            const ivArray = Array.from(new Uint8Array(12));
-            const result = ivArray;
-            return btoa(JSON.stringify(result));
-        };
+describe('GadsStorage', () => {
+    const header = () => {
+        const ivArray = Array.from(new Uint8Array(12));
+        const result = ivArray;
+        return btoa(JSON.stringify(result));
+    };
 
-        beforeAll(() => {
-            if (window.crypto && window.crypto.subtle) {
-                // @ts-expect-error This is a unit test, so this is not readonly
-                delete window.crypto.subtle;
-            } // We want to make sure the mock implementation of crypto is used
-        });
+    beforeAll(() => {
+        if (window.crypto && window.crypto.subtle) {
+            // @ts-expect-error This is a unit test, so this is not readonly
+            delete window.crypto.subtle;
+        } // We want to make sure the mock implementation of crypto is used
+    });
 
-        beforeEach(() => {
-            setupCrypto();
-        });
+    beforeEach(() => {
+        setupCrypto();
+    });
 
-        afterEach(() => {
-            try {
-                if (window.crypto && window.crypto.subtle) {
-                    // @ts-expect-error This is a unit test, so this is not readonly
-                    delete window.crypto.subtle; // We want to also clear the mock implementation of crypto
-                }
-            } catch {
-                // We don't care if this fails - if we're using the non-mock, it will!
+    afterEach(() => {
+        try {
+            if (window.crypto && window.crypto.subtle) {
+                // @ts-expect-error This is a unit test, so this is not readonly
+                delete window.crypto.subtle; // We want to also clear the mock implementation of crypto
             }
-        });
-
-        it('Should set an item', async () => {
-            const storage = new GadsStorage();
-            const key = 'key';
-            const value = 'value';
-            await storage.setItem(key, value);
-            const result = localStorage.getItem(key);
-            expect(result).not.toBeFalsy();
-            expect(crypto.subtle.encrypt).toHaveBeenCalled();
-            expect(result).toBe(header()); // As the function is a null function, we'll only really get the header back
-        });
+        } catch {
+            // We don't care if this fails - if we're using the non-mock, it will!
+        }
+    });
 
-        it('Should get an item', async () => {
-            const storage = new GadsStorage();
-            const key = 'key';
-            const value = 'value';
-            await storage.setItem(key, value);
-            const result = await storage.getItem(key);
-            expect(crypto.subtle.decrypt).toHaveBeenCalled();
-            expect(result).toBe('value');
-        });
+    it('Should set an item', async () => {
+        const storage = new GadsStorage();
+        const key = 'key';
+        const value = 'value';
+        await storage.setItem(key, value);
+        const result = localStorage.getItem(key);
+        expect(result).not.toBeFalsy();
+        expect(crypto.subtle.encrypt).toHaveBeenCalled();
+        expect(result).toBe(header()); // As the function is a null function, we'll only really get the header back
+    });
 
-        it('Should remove an item', async () => {
-            const storage = new GadsStorage();
-            const key = 'key';
-            const value = 'value';
-            await storage.setItem(key, value);
-            storage.removeItem(key);
-            const result = localStorage.getItem(key);
-            expect(result).toBeFalsy();
-        });
+    it('Should get an item', async () => {
+        const storage = new GadsStorage();
+        const key = 'key';
+        const value = 'value';
+        await storage.setItem(key, value);
+        const result = await storage.getItem(key);
+        expect(crypto.subtle.decrypt).toHaveBeenCalled();
+        expect(result).toBe('value');
+    });
 
-        it('Should clear all items', async () => {
-            const storage = new GadsStorage();
-            const key = 'key';
-            const value = 'value';
-            await storage.setItem(key, value);
-            storage.clear();
-            const result = localStorage.getItem(key);
-            expect(result).toBeFalsy();
-        });
+    it('Should remove an item', async () => {
+        const storage = new GadsStorage();
+        const key = 'key';
+        const value = 'value';
+        await storage.setItem(key, value);
+        storage.removeItem(key);
+        const result = localStorage.getItem(key);
+        expect(result).toBeFalsy();
+    });
 
-        it('Should get the length', async () => {
-            const storage = new GadsStorage();
-            const key = 'key';
-            const value = 'value';
-            await storage.setItem(key, value);
-            expect(storage.length).toBe(1);
-            storage.clear();
-            expect(storage.length).toBe(0);
-        });
+    it('Should clear all items', async () => {
+        const storage = new GadsStorage();
+        const key = 'key';
+        const value = 'value';
+        await storage.setItem(key, value);
+        storage.clear();
+        const result = localStorage.getItem(key);
+        expect(result).toBeFalsy();
+    });
 
-        it('Should do multiple read/writes to the same value without erroring', async () => {
-            await setupNoMockCrypto();
-            expect.assertions(10);
-            const myValues = [{ id: 1, value: 'value1', array: [1] }];
-            for (let i = 0; i < 10; i++) {
-                const storage = new GadsStorage();
-                const values = JSON.stringify(myValues);
-                await storage.setItem('myValues', values);
-                const result = await storage.getItem('myValues');
-                expect(JSON.parse(result)).toEqual(myValues);
-            }
-            killNoMockCrypto();
-        });
+    it('Should get the length', async () => {
+        const storage = new GadsStorage();
+        const key = 'key';
+        const value = 'value';
+        await storage.setItem(key, value);
+        expect(storage.length).toBe(1);
+        storage.clear();
+        expect(storage.length).toBe(0);
     });
-} else {
-    console.warn('GadsStorage tests are skipped because they are not compatible with Node 18');
-    describe.skip('GadsStorage', () => {
-        it('Should skip', () => { });
+
+    it('Should do multiple read/writes to the same value without erroring', async () => {
+        await setupNoMockCrypto();
+        expect.assertions(10);
+        const myValues = [{ id: 1, value: 'value1', array: [1] }];
+        for (let i = 0; i < 10; i++) {
+            const storage = new GadsStorage();
+            const values = JSON.stringify(myValues);
+            await storage.setItem('myValues', values);
+            const result = await storage.getItem('myValues');
+            expect(JSON.parse(result)).toEqual(myValues);
+        }
+        killNoMockCrypto();
     });
-}
+});
diff --git a/src/frontend/js/lib/util/gadsStorage/lib/GadsStorage.ts b/src/frontend/js/lib/util/gadsStorage/lib/GadsStorage.ts
index 840215342..0634dfb91 100644
--- a/src/frontend/js/lib/util/gadsStorage/lib/GadsStorage.ts
+++ b/src/frontend/js/lib/util/gadsStorage/lib/GadsStorage.ts
@@ -11,7 +11,7 @@ export class GadsStorage implements AppStorage {
     enabled: boolean = true;
 
     private storage: EncryptedStorage | Storage;
-    private storageKey: string;
+    private storageKey!: string;
 
     /**
      * Creates a new GadsStorage instance.
@@ -23,9 +23,9 @@ export class GadsStorage implements AppStorage {
 
     /**
      * Fetches the storage key used to encrypt data.
-     * @returns The storage key used to encrypt data.
+     * @returns {Promise<string>} The storage key used to encrypt data.
      */
-    private async getStorageKey() {
+    private async getStorageKey(): Promise<void> {
         if (window.test) {
             this.storageKey = 'test';
             return;
@@ -38,9 +38,7 @@ export class GadsStorage implements AppStorage {
         this.storageKey = data.key;
     }
 
-    /**
-     * @inheritdoc
-     */
+    /** @inheritdoc */
     async setItem(key: string, value: string) {
         // We turn off writing if we're performing a recovery to prevent extra write operations—this is more to prevent
         // the odd curval error with dropdowns. It's felt it's more sensible to do this here, rather than search through
@@ -53,9 +51,7 @@ export class GadsStorage implements AppStorage {
         await this.storage.setItem(key, value, this.storageKey);
     }
 
-    /**
-     * @inheritdoc
-     */
+    /** @inheritdoc */
     async getItem(key: string) {
         if (!this.storageKey) {
             await this.getStorageKey();
@@ -63,30 +59,22 @@ export class GadsStorage implements AppStorage {
         return await this.storage.getItem(key, this.storageKey);
     }
 
-    /**
-     * @inheritdoc
-     */
+    /** @inheritdoc */
     removeItem(key: string) {
         this.storage.removeItem(key);
     }
 
-    /**
-     * @inheritdoc
-     */
+    /** @inheritdoc */
     clear() {
         this.storage.clear();
     }
 
-    /**
-     * @inheritdoc
-     */
+    /** @inheritdoc */
     key(index: number) {
         return this.storage.key(index);
     }
 
-    /**
-     * @inheritdoc
-     */
+    /** @inheritdoc */
     get length() {
         return this.storage.length;
     }
diff --git a/src/frontend/js/lib/util/mapper/formdataMapper.test.ts b/src/frontend/js/lib/util/mapper/formdataMapper.test.ts
index ee5f56211..ab50d2e4c 100644
--- a/src/frontend/js/lib/util/mapper/formdataMapper.test.ts
+++ b/src/frontend/js/lib/util/mapper/formdataMapper.test.ts
@@ -1,4 +1,3 @@
-import { describe, it, expect } from '@jest/globals';
 import { formdataMapper } from './formdataMapper';
 
 describe('Basic formdata mapper tests', () => {
diff --git a/src/frontend/js/lib/util/mapper/formdataMapper.ts b/src/frontend/js/lib/util/mapper/formdataMapper.ts
index d12da9841..e47b4103f 100644
--- a/src/frontend/js/lib/util/mapper/formdataMapper.ts
+++ b/src/frontend/js/lib/util/mapper/formdataMapper.ts
@@ -1,4 +1,11 @@
-export const formdataMapper = <T>(data: FormData | T) => {
+/**
+ * Map an object or FormData to a FormData object.
+ * @param {FormData | T} data The data to be mapped, either FormData or an object
+ * @template T The type of the data being mapped
+ * @throws {Error} If the data is empty or not a valid FormData or object
+ * @returns {FormData} The mapped FormData object
+ */
+export const formdataMapper = <T extends object>(data: FormData | T): FormData => {
     if (data instanceof FormData) {
         let hasData = false;
         data.forEach(() => {
@@ -14,4 +21,4 @@ export const formdataMapper = <T>(data: FormData | T) => {
         formData.append(key, value);
     });
     return formData;
-};
\ No newline at end of file
+};
diff --git a/src/frontend/js/lib/util/mapper/mapper.ts b/src/frontend/js/lib/util/mapper/mapper.ts
index ab2736a8e..65812c7a6 100644
--- a/src/frontend/js/lib/util/mapper/mapper.ts
+++ b/src/frontend/js/lib/util/mapper/mapper.ts
@@ -1,5 +1,12 @@
+/**
+ * Mapper module for transforming script responses into a format suitable for typeahead suggestions
+ */
 export type MappedResponse = { name: string, id: number };
-export type MapperFunction = (any) => MappedResponse[];
+
+/**
+ * MapperFunction type for functions that map script responses to MappedResponse arrays
+ */
+export type MapperFunction = (any: any) => MappedResponse[];
 
 /**
  * ScriptResponse interface for Typeahead class script responses
@@ -23,10 +30,10 @@ interface Record {
 
 /**
  * Map the script response to a response that the typeahead can use
- * @param r The response from the script
- * @returns The mapped response
+ * @param {ScriptResponse} r The response from the script
+ * @returns {MappedResponse[]} The mapped response
  */
-export const map: MapperFunction = (r: ScriptResponse) => {
+export const map: MapperFunction = (r: ScriptResponse):MappedResponse[] => {
     const result = [];
     let i = 0;
     r.records.forEach((record) => {
diff --git a/src/frontend/js/lib/util/scriptErrorHandler/lib/MessageUploader.test.ts b/src/frontend/js/lib/util/scriptErrorHandler/lib/MessageUploader.test.ts
index b7725c100..96ac43be7 100644
--- a/src/frontend/js/lib/util/scriptErrorHandler/lib/MessageUploader.test.ts
+++ b/src/frontend/js/lib/util/scriptErrorHandler/lib/MessageUploader.test.ts
@@ -1,3 +1,4 @@
+/* eslint-disable jsdoc/require-jsdoc */
 import { describe, it, expect, jest } from '@jest/globals';
 import { MessageUploader } from './MessageUploader';
 
diff --git a/src/frontend/js/lib/util/scriptErrorHandler/lib/MessageUploader.ts b/src/frontend/js/lib/util/scriptErrorHandler/lib/MessageUploader.ts
index f6f108584..52f25c622 100644
--- a/src/frontend/js/lib/util/scriptErrorHandler/lib/MessageUploader.ts
+++ b/src/frontend/js/lib/util/scriptErrorHandler/lib/MessageUploader.ts
@@ -1,5 +1,9 @@
 import { Uploader } from 'util/upload/UploadControl';
 
+/**
+ * Upload a message to the server. It creates an instance of MessageUploader with a new Uploader and calls the uploadMessage method.
+ * @param message The message content to upload
+ */
 export const uploadMessage = async (message: string) => {
     const body = {
         description: message,
@@ -10,10 +14,22 @@ export const uploadMessage = async (message: string) => {
     return await messageUploader.uploadMessage(body.description);
 };
 
+/**
+ * Class to upload messages to the server. It takes an instance of Uploader to handle the actual upload process.
+ */
 export class MessageUploader {
+    /**
+     * Create an instance of MessageUploader.
+     * @param uploader The uploader to use when uploading messages
+     */
     constructor(private uploader: Uploader) {
     }
 
+    /**
+     * Upload a message to the server. It constructs the request body with the message description,
+     * current URL, and CSRF token, then uses the uploader to send the data. If the upload fails, it logs an error to the console.
+     * @param description The message content to be uploaded
+     */
     async uploadMessage(description: string): Promise<void> {
         const csrf_token = document.body.dataset.csrf;
         const body = {
diff --git a/src/frontend/js/lib/util/storageProvider/lib/storageProvider.test.ts b/src/frontend/js/lib/util/storageProvider/lib/storageProvider.test.ts
index d1b93d78d..4a497eab0 100644
--- a/src/frontend/js/lib/util/storageProvider/lib/storageProvider.test.ts
+++ b/src/frontend/js/lib/util/storageProvider/lib/storageProvider.test.ts
@@ -59,7 +59,7 @@ describe('StorageProvider', () => {
         await expect(storage.getItem('key')).resolves.toBe(undefined);
     });
 
-    it('should set multiple key value pairs on the same instance', async () => {
+    it('should set multipe key value pairs on the same instance', async () => {
         const storage = new StorageProvider('test', localStorage);
         await expect(storage.setItem('key1', 'value1')).resolves.toBeUndefined();
         await expect(storage.setItem('key2', 'value2')).resolves.toBeUndefined();
diff --git a/src/frontend/js/lib/util/storageProvider/lib/storageProvider.ts b/src/frontend/js/lib/util/storageProvider/lib/storageProvider.ts
index 4cb66b897..6eceea5e1 100644
--- a/src/frontend/js/lib/util/storageProvider/lib/storageProvider.ts
+++ b/src/frontend/js/lib/util/storageProvider/lib/storageProvider.ts
@@ -2,14 +2,35 @@ import gadsStorage from 'util/gadsStorage';
 import { AppStorage } from 'util/gadsStorage/lib/AppStorage';
 import { fromJson } from 'util/common';
 
+/**
+ * Type to represent a map of strings
+ * @todo This could be replaced with a record<string, string> type
+ */
 type StringMap = { [key: string]: string };
 
+/**
+ * StorageProvider class for managing storage operations
+ */
 class StorageProvider {
+    /**
+     * Get the storage provider instance
+     * @returns {Storage | AppStorage} The storage provider instance
+     */
     get provider() { return this.storage; }
 
+    /**
+     * Create a new StorageProvider instance
+     * @param {string} instance The instance name for the storage
+     * @param {Storage | AppStorage} storage The storage to use, defaults to gadsStorage
+     */
     constructor(private readonly instance: string, private readonly storage: Storage | AppStorage = gadsStorage) {
     }
 
+    /**
+     * Set an item in the storage
+     * @param {string} key The key to set the item for
+     * @param {string} value The value to set for the key
+     */
     async setItem(key: string, value: string) {
         let item = await this.storage.getItem(this.instance);
         if (!item) item = '{}';
@@ -18,6 +39,11 @@ class StorageProvider {
         await this.storage.setItem(this.instance, JSON.stringify(map));
     }
 
+    /**
+     * Get an item from the storage
+     * @param {string} key The key to get the item for
+     * @returns {Promise<string | undefined>} The value for the key, or undefined if not found
+     */
     async getItem(key: string): Promise<string | undefined> {
         const item = await this.storage.getItem(this.instance);
         if (!item) return undefined;
@@ -25,16 +51,27 @@ class StorageProvider {
         return map[key] || undefined;
     }
 
+    /**
+     * Get all items from the storage
+     * @returns {Promise<StringMap>} All items in the storage as a key-value map
+     */
     async getAll(): Promise<StringMap> {
         const item = await this.storage.getItem(this.instance);
         if (!item) return {};
         return fromJson(item);
     }
 
+    /**
+     * Clear all items in the storage for this instance
+     */
     async clear() {
         this.storage.removeItem(this.instance);
     }
 
+    /**
+     * Remove an item from the storage
+     * @param {string} key The key to remove the item for
+     */
     async removeItem(key: string) {
         const item = await this.storage.getItem(this.instance);
         if (!item) return;
@@ -44,4 +81,4 @@ class StorageProvider {
     }
 }
 
-export default StorageProvider;
\ No newline at end of file
+export default StorageProvider;
diff --git a/src/frontend/js/lib/util/typeahead/lib/Typeahead.ts b/src/frontend/js/lib/util/typeahead/lib/Typeahead.ts
index 79c0a88c1..1c7c080ca 100644
--- a/src/frontend/js/lib/util/typeahead/lib/Typeahead.ts
+++ b/src/frontend/js/lib/util/typeahead/lib/Typeahead.ts
@@ -5,16 +5,13 @@ import { MappedResponse } from 'util/mapper/mapper';
 
 /**
  * Typeahead class for creating a typeahead
- * @param $input - input element to attach typeahead to
- * @param callback - callback function to be called when a suggestion is selected
- * @param sourceOptions - options for the typeahead data source
  */
 export class Typeahead {
     /**
      * Create a new Typeahead class
-     * @param $input The input element to attach typeahead to
-     * @param callback The callback function to be called when a suggestion is selected - this function should take in a suggestion of type T and return void
-     * @param sourceOptions The options for the typeahead data source
+     * @param {JQuery<HTMLElement>} $input The input element to attach typeahead to
+     * @param {(MappedResponse)=>void} callback The callback function to be called when a suggestion is selected - this function should take in a suggestion of type T and return void
+     * @param {TypeaheadSourceOptions} sourceOptions The options for the typeahead data source
      */
     constructor(private $input: JQuery<HTMLInputElement>, private callback: (suggestion: MappedResponse) => void, private sourceOptions: TypeaheadSourceOptions) {
         this.init();
@@ -76,19 +73,5 @@ export class Typeahead {
         this.$input.on('typeahead:select', (ev: JQuery.TriggeredEvent, suggestion: MappedResponse) => {
             this.callback(suggestion);
         });
-
-        if (window.test) {
-            this.$input.on('typeahead:asyncrequest', () => {
-                console.log('Typeahead async request');
-            });
-
-            this.$input.on('typeahead:asyncreceive', () => {
-                console.log('Typeahead async receive');
-            });
-
-            this.$input.on('typeahead:asynccancel', () => {
-                console.log('Typeahead async cancel');
-            });
-        }
     }
 }
diff --git a/src/frontend/js/lib/util/typeahead/lib/TypeaheadBuilder.test.ts b/src/frontend/js/lib/util/typeahead/lib/TypeaheadBuilder.test.ts
index a47d4e874..8bc4680e4 100644
--- a/src/frontend/js/lib/util/typeahead/lib/TypeaheadBuilder.test.ts
+++ b/src/frontend/js/lib/util/typeahead/lib/TypeaheadBuilder.test.ts
@@ -1,5 +1,4 @@
 import { TypeaheadBuilder } from './TypeaheadBuilder';
-import { describe, it, expect } from '@jest/globals';
 
 describe('builder', () => {
     it('should error on the typeahead input not being set', () => {
diff --git a/src/frontend/js/lib/util/typeahead/lib/TypeaheadBuilder.ts b/src/frontend/js/lib/util/typeahead/lib/TypeaheadBuilder.ts
index 3c8e8a87c..c22134d88 100644
--- a/src/frontend/js/lib/util/typeahead/lib/TypeaheadBuilder.ts
+++ b/src/frontend/js/lib/util/typeahead/lib/TypeaheadBuilder.ts
@@ -6,25 +6,16 @@ type TypeaheadCallback = (suggestion: { name: string, id: number }) => void;
 
 /**
  * TypeaheadBuilder class for building Typeahead class
- * @type T - type of the suggestion extending `{ name: string, id: number }`
- * @param $input - input element to attach typeahead to
- * @param callback - callback function to be called when a suggestion is selected
- * @param name - name of the typeahead data source
- * @param ajaxSource - url to the ajax source
- * @param appendQuery - whether to append the query to the ajax source url
- * @param data - data to be sent with the ajax request (if any)
- * @returns Typeahead class
- * @throws Error if $input, callback, name, or ajaxSource is not set
  */
 export class TypeaheadBuilder {
-    private $input: JQuery<HTMLInputElement>;
-    private callback: TypeaheadCallback;
-    private name: string;
-    private ajaxSource: string;
+    private $input!: JQuery<HTMLInputElement>;
+    private callback!: TypeaheadCallback;
+    private name!: string;
+    private ajaxSource!: string;
     private appendQuery: boolean;
     private data: any;
-    private mapper: MapperFunction = (data: any) => {return data.map(d=> {return {name: d.name, id: d.id};});};
-    private dataBuilder: (...args: any[]) => any;
+    private mapper: MapperFunction = (data: any) => { return data.map(d => { return { name: d.name, id: d.id }; }); };
+    private dataBuilder?: (...args: any[]) => any;
     private method: 'GET' | 'POST' = 'GET';
 
     /**
@@ -40,8 +31,8 @@ export class TypeaheadBuilder {
      * @param method - The HTTP method to use for the ajax request, defaults to 'GET'
      * @returns The builder being used
      */
-    withMethod(method: 'GET'|'POST'='GET') {
-        if(method !== 'GET' && method !== 'POST') {
+    withMethod(method: 'GET' | 'POST' = 'GET') {
+        if (method !== 'GET' && method !== 'POST') {
             throw new Error('Method must be either \'GET\' or \'POST\'');
         }
         this.method = method;
@@ -50,59 +41,60 @@ export class TypeaheadBuilder {
 
     /**
      * Set the input element to attach typeahead to
-     * @param $input The input element to attach typeahead to
-     * @returns The builder being used
+     * @param {JQuery<HTMLElement>} $input The input element to attach typeahead to
+     * @returns {this} The builder being used
      */
-    withInput($input: JQuery<HTMLInputElement>) {
+    withInput($input: JQuery<HTMLInputElement>): this {
         this.$input = $input;
         return this;
     }
 
     /**
      * Set the callback function to be called when a suggestion is selected
-     * @param callback The callback function to be called when a suggestion is selected - this function should take in a suggestion of type T and return void
-     * @returns The builder being used
+     * @param {TypeaheadCallback} callback The callback function to be called when a suggestion is selected - this function should take in a suggestion of type T and return void
+     * @returns {this} The builder being used
      */
-    withCallback(callback: TypeaheadCallback) {
+    withCallback(callback: TypeaheadCallback): this {
         this.callback = callback;
         return this;
     }
 
     /**
      * Set the name of the typeahead data source
-     * @param name The name of the typeahead data source
-     * @returns The builder being used
+     * @param {string} name The name of the typeahead data source
+     * @returns {this} The builder being used
      */
-    withName(name: string) {
+    withName(name: string): this {
         this.name = name;
         return this;
     }
 
     /**
      * Set the URL to the typeahead ajax source
-     * @param ajaxSource The url to the ajax source
-     * @returns The builder being used
+     * @param {string} ajaxSource The url to the ajax source
+     * @returns {this} The builder being used
      */
-    withAjaxSource(ajaxSource: string) {
+    withAjaxSource(ajaxSource: string): this {
         this.ajaxSource = ajaxSource;
         return this;
     }
 
     /**
      * Sets the append query to true
-     * @returns The builder being used
+     * @param {boolean} appendQuery Whether to append the query to the ajax request
+     * @returns {this} The builder being used
      */
-    withAppendQuery(appendQuery: boolean = true) {
+    withAppendQuery(appendQuery: boolean = true): this {
         this.appendQuery = appendQuery;
         return this;
     }
 
     /**
      * Sets the data to be sent with the ajax request
-     * @param data The data to be sent with the ajax request
-     * @returns The builder being used
+     * @param {*} data The data to be sent with the ajax request
+     * @returns {this} The builder being used
      */
-    withData(data: any) {
+    withData(data: any): this {
         this.dataBuilder = undefined;
         this.data = data;
         return this;
@@ -110,25 +102,29 @@ export class TypeaheadBuilder {
 
     /**
      * Sets the mapper to use with the typeahead
-     * @param mapper The mapper function to be used to map the ajax response to the typeahead suggestion
-     * @returns The builder being used
+     * @param {MapperFunction} mapper The mapper function to be used to map the ajax response to the typeahead suggestion
+     * @returns {this} The builder being used
      */
-    withMapper(mapper: MapperFunction) {
+    withMapper(mapper: MapperFunction): this {
         this.mapper = mapper;
         return this;
     }
 
-    withDefaultMapper() {
+    /**
+     * Sets to use the default mapper function
+     * @returns {this} The builder being used
+     */
+    withDefaultMapper(): this {
         this.mapper = map;
         return this;
     }
 
     /**
      * Set the data builder function to be used to build the data to be sent with the ajax request
-     * @param dataBuilderFunction The function to be used to build the data to be sent with the ajax request
-     * @returns The builder being used
+     * @param {(...args: any[])=>any} dataBuilderFunction The function to be used to build the data to be sent with the ajax request
+     * @returns {this} The builder being used
      */
-    withDataBuilder(dataBuilderFunction: (...args: any[]) => any) {
+    withDataBuilder(dataBuilderFunction: (...args: any[]) => any): this {
         this.data = undefined;
         this.dataBuilder = dataBuilderFunction;
         return this;
@@ -136,9 +132,10 @@ export class TypeaheadBuilder {
 
     /**
      * Build the Typeahead class
-     * @returns The built Typeahead class
+     * @returns {Typeahead} The built Typeahead class
+     * @throws {Error} If input, callback, name, or ajax source is not set
      */
-    build() {
+    build(): Typeahead {
         if (!this.$input) throw new Error('Input not set');
         if (!this.callback) throw new Error('Callback not set');
         if (!this.name) throw new Error('Name not set');
diff --git a/src/frontend/js/lib/util/typeahead/lib/TypeaheadSourceOptions.ts b/src/frontend/js/lib/util/typeahead/lib/TypeaheadSourceOptions.ts
index 5a44c6683..22a396a79 100644
--- a/src/frontend/js/lib/util/typeahead/lib/TypeaheadSourceOptions.ts
+++ b/src/frontend/js/lib/util/typeahead/lib/TypeaheadSourceOptions.ts
@@ -1,6 +1,19 @@
 import { MapperFunction } from 'util/mapper/mapper';
 
+/**
+ * TypeaheadSourceOptions class for configuring typeahead data sources
+ */
 export class TypeaheadSourceOptions {
+    /**
+     * Create a new TypeaheadSourceOptions instance
+     * @param {string} name The name of the typeahead source
+     * @param {string} ajaxSource The URL for the AJAX source
+     * @param {MapperFunction} mapper The function to map the data
+     * @param {boolean} appendQuery Whether to append the query to the AJAX request
+     * @param {*} data Any additional data to send with the request
+     * @param {(...args:any[]) => any} dataBuilder A function to build the data for the request
+     * @param {'GET'|'POST'} method The request method to use
+     */
     constructor(
         public name: string,
         public ajaxSource: string,
diff --git a/src/frontend/js/lib/util/upload/UploadControl.test.ts b/src/frontend/js/lib/util/upload/UploadControl.test.ts
index dcbaf80eb..4555b92bd 100644
--- a/src/frontend/js/lib/util/upload/UploadControl.test.ts
+++ b/src/frontend/js/lib/util/upload/UploadControl.test.ts
@@ -1,5 +1,7 @@
-import { describe, it, expect, beforeEach, afterEach, jest } from '@jest/globals';
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { describe, it, expect, beforeEach, afterEach } from '@jest/globals';
 import { Uploader, XmlHttpRequestLike } from './UploadControl';
+/* @ts-ignore */
 import { initGlobals, MockXhr } from 'testing/globals.definitions';
 
 describe('UploadControl', () => {
diff --git a/src/frontend/js/lib/util/upload/UploadControl.ts b/src/frontend/js/lib/util/upload/UploadControl.ts
index ee141a654..23a8fc9cc 100644
--- a/src/frontend/js/lib/util/upload/UploadControl.ts
+++ b/src/frontend/js/lib/util/upload/UploadControl.ts
@@ -7,6 +7,9 @@ import { fromJson } from 'util/common';
  */
 type ProgressFunction = (loaded: number, total: number) => void;
 
+/**
+ * Type to represent the HTTP request methods that can be used for uploading data
+ */
 type RequestMethod = 'PUT' | 'POST' | 'GET' | 'DELETE' | 'PATCH';
 
 /**
@@ -30,11 +33,12 @@ type XmlHttpRequestLike = {
 
 /**
  * Upload data to a server endpoint
- * @param url The endpoint to upload to
- * @param data The form data to upload
- * @param method The method to use, either POST, PUT, or GET
- * @param onProgress A callback that is called when the upload progress changes
- * @returns The JSON response from the server
+ * @template T The type of the response data
+ * @param { string | URL } url The endpoint to upload to
+ * @param {FormData | object} data The form data or object to upload
+ * @param { RequestMethod } method The method to use, either POST, PUT, or GET
+ * @param { ProgressFunction } onProgress A callback that is called when the upload progress changes
+ * @returns { Promise<T> } The JSON response from the server
  */
 async function upload<T = unknown>(url: string | URL, data?: FormData | object, method: RequestMethod = 'POST', onProgress: ProgressFunction = () => { }): Promise<T> {
     const uploader = new Uploader(url, method);
@@ -44,12 +48,18 @@ async function upload<T = unknown>(url: string | URL, data?: FormData | object,
 
 /**
  * Helper class to upload form data to a server endpoint
+ * @todo The API class could be used within the Dashboard component rather than this class
  */
 class Uploader {
     private onProgressCallback?: ProgressFunction;
     private url: string | URL;
     private method: RequestMethod;
 
+    /**
+     * Create a new Uploader instance
+     * @param {string} url The endpoint to upload to
+     * @param {RequestMethod} method The method to use, either POST, PUT, or GET
+     */
     constructor(url: string | URL, method: RequestMethod) {
         this.url = url;
         this.method = method;
@@ -57,7 +67,7 @@ class Uploader {
 
     /**
      * Set a callback that is called when the upload progress changes
-     * @param callback A callback that is called when the upload progress changes
+     * @param {ProgressFunction} callback A callback that is called when the upload progress changes
      */
     onProgress(callback: ProgressFunction) {
         this.onProgressCallback = callback;
@@ -65,8 +75,9 @@ class Uploader {
 
     /**
      * Upload form data to a server endpoint
-     * @param data The form data or JSON object to upload
-     * @returns A promise that resolves to the JSON response from the server
+     * @template T The type of the response data
+     * @param { FormData | object } data The form data or JSON object to upload
+     * @returns { Promise<T> } A promise that resolves to the JSON response from the server
      */
     async upload<T>(data?: FormData | object): Promise<T> {
         return new Promise((resolve, reject) => {
diff --git a/src/frontend/js/lib/validation.js b/src/frontend/js/lib/validation.js
index 93f2c1986..b8890fb18 100644
--- a/src/frontend/js/lib/validation.js
+++ b/src/frontend/js/lib/validation.js
@@ -1,6 +1,9 @@
 import { DangerAlert } from 'components/alert/lib/dangerAlert';
 
-// Bind events to a field to trigger validation
+/**
+ * Bind events to a field to trigger validation
+ * @param {JQuery<HTMLElement>} field - The field to bind validation events to
+ */
 const initValidationOnField = (field) => {
     // Input
     if (field.hasClass('input--required')) {
@@ -103,7 +106,11 @@ const initValidationOnField = (field) => {
     }
 };
 
-// Validate the required fields of a form
+/**
+ * Validate the required fields of a form
+ * @param {JQuery<HTMLElement>} form - The form to validate
+ * @returns {boolean} - Returns true if the form is valid, false otherwise
+ */
 const validateRequiredFields = (form) => {
     let isValidForm = true;
 
@@ -168,6 +175,11 @@ const validateRequiredFields = (form) => {
     return isValidForm;
 };
 
+/**
+ * Check if at least one checkbox in a fieldset is checked
+ * @param {JQuery} fieldset The fieldset containing checkboxes to validate
+ * @returns {boolean} Returns true if at least one checkbox is checked, false otherwise
+ */
 const validateRequiredFieldsetCheckboxes = (fieldset) => {
     let isValid = false;
     fieldset.find('input[type=checkbox]').each((i, field) => {
@@ -179,6 +191,12 @@ const validateRequiredFieldsetCheckboxes = (fieldset) => {
     return isValid;
 };
 
+/**
+ * Add an error message to a field
+ * @param {JQuery} field The field to which the error message will be added
+ * @param {string} name The name of the field to be displayed in the error message
+ * @param {string} id The field's ID, used for the error message's ID
+ */
 const addErrorMessage = (field, name, id) => {
     const $errorDiv = $('<div class="error">');
     let $span = $(`<span id="${id}-err" class="form-text form-text--error" aria-live="off"></span>`);
@@ -187,15 +205,28 @@ const addErrorMessage = (field, name, id) => {
     field.append($errorDiv);
 };
 
+/**
+ * Remove the error message from a field
+ * @param {JQuery} field The field from which the error message will be removed
+ */
 const removeErrorMessage = (field) => {
     field.find('.error').remove();
 };
 
+/**
+ * Check if a field is hidden due to a dependency
+ * @param {JQuery} field The field to check if it is hidden due to a dependency
+ * @returns {boolean} Returns true if the field is hidden due to a dependency, false otherwise
+ */
 const isHiddenDependentField = (field) => {
     return (field.closest('.form-group[data-has-dependency=\'1\'][style*=\'display: none\']').length > 0);
 };
 
-// Validate input field
+/**
+ * Validate input field
+ * @param {JQuery} field The field to validate
+ * @returns {boolean} Returns true if the input is valid, false otherwise
+ */
 const validateInput = (field) => {
     const $inputEl = field.find('[required]');
     const strFieldName = field.find('label').text() || '';
@@ -220,7 +251,11 @@ const validateInput = (field) => {
     }
 };
 
-// Validate radio-group
+/**
+ * Validate radio-group
+ * @param {JQuery} field The field to validate
+ * @returns {boolean} Returns true if the radio group is valid, false otherwise
+ */
 const validateRadioGroup = (field) => {
     const $radioButtons = field.find('input[required]');
     const $fieldSet = field.closest('.fieldset--required');
@@ -253,7 +288,11 @@ const validateRadioGroup = (field) => {
     }
 };
 
-// Validate checkbox group
+/**
+ * Validate checkbox group
+ * @param {JQuery} field The field to validate
+ * @returns {boolean} Returns true if at least one checkbox is checked, false otherwise
+ */
 const validateCheckboxGroup = (field) => {
     const $checkBoxes = field.find('input[type="checkbox"]');
     const $fieldSet = field.closest('.fieldset--required');
@@ -284,7 +323,11 @@ const validateCheckboxGroup = (field) => {
 
 };
 
-// Validate tree
+/**
+ * Validate tree
+ * @param {JQuery} field The field to validate
+ * @returns {boolean} Returns true if the tree is valid, false otherwise
+ */
 const validateTree = (field) => {
     const $inputEl = field.find('input[type="hidden"]');
     const $fieldSet = field.closest('.fieldset--required');
@@ -311,6 +354,11 @@ const validateTree = (field) => {
     }
 };
 
+/**
+ * Validate query builder inputs
+ * @param {JQuery<HTMLElement>} field The querybuilder to validate
+ * @returns False if validation fails, otherwise true on success
+ */
 const validateQueryBuilder = (field) => {
     if(!(field && field.length)) return;
     const result = field.queryBuilder('validate');
@@ -325,7 +373,10 @@ const validateQueryBuilder = (field) => {
     return true;
 };
 
-// Expand the card with a certain field and scroll it into view
+/**
+ * Expand the card with a certain field and scroll it into view
+ * @param {JQuery} field The field to expand the card for
+ */
 const expandCardValidate = (field) => {
     const $collapse = $(field).closest('.card--expandable')
         .find('.collapse');
diff --git a/src/frontend/testing/globals.definitions.ts b/src/frontend/testing/globals.definitions.ts
index 6fde66023..8872775eb 100644
--- a/src/frontend/testing/globals.definitions.ts
+++ b/src/frontend/testing/globals.definitions.ts
@@ -91,4 +91,4 @@ export async function setupNoMockCrypto() {
 export function killNoMockCrypto() {
     // @ts-expect-error This is a unit test, so this is not readonly
     delete window.crypto;
-}
\ No newline at end of file
+}
diff --git a/yarn.lock b/yarn.lock
index 2dc39fe9f..6f9d00c42 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1112,6 +1112,17 @@
   dependencies:
     "@types/hammerjs" "^2.0.36"
 
+"@es-joy/jsdoccomment@~0.52.0":
+  version "0.52.0"
+  resolved "https://registry.yarnpkg.com/@es-joy/jsdoccomment/-/jsdoccomment-0.52.0.tgz#106945b6d1abed89597aa104b80ff8f9fb7038a6"
+  integrity sha512-BXuN7BII+8AyNtn57euU2Yxo9yA/KUDNzrpXyi3pfqKmBhhysR6ZWOebFh3vyPoqA3/j1SOvGgucElMGwlXing==
+  dependencies:
+    "@types/estree" "^1.0.8"
+    "@typescript-eslint/types" "^8.34.1"
+    comment-parser "1.4.1"
+    esquery "^1.6.0"
+    jsdoc-type-pratt-parser "~4.1.0"
+
 "@eslint-community/eslint-utils@^4.7.0", "@eslint-community/eslint-utils@^4.8.0", "@eslint-community/eslint-utils@^4.9.0":
   version "4.9.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.9.0.tgz#7308df158e064f0dd8b8fdb58aa14fa2a7f913b3"
@@ -1716,7 +1727,7 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
   integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
 
-"@types/estree@^1.0.6":
+"@types/estree@^1.0.6", "@types/estree@^1.0.8":
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.8.tgz#958b91c991b1867ced318bedea0e215ee050726e"
   integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==
@@ -2061,7 +2072,7 @@
     debug "^4.3.4"
     ts-api-utils "^2.1.0"
 
-"@typescript-eslint/types@8.48.1", "@typescript-eslint/types@^8.47.0", "@typescript-eslint/types@^8.48.1":
+"@typescript-eslint/types@8.48.1", "@typescript-eslint/types@^8.34.1", "@typescript-eslint/types@^8.47.0", "@typescript-eslint/types@^8.48.1":
   version "8.48.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.48.1.tgz#a9ff808f5f798f28767d5c0b015a88fa7ce46bd7"
   integrity sha512-+fZ3LZNeiELGmimrujsDCT4CRIbq5oXdHe7chLiW8qzqyPMnn1puNstCrMNVAqwcl2FdIxkuJ4tOs/RFDBVc/Q==
@@ -2404,6 +2415,11 @@ arch@^2.2.0:
   resolved "https://registry.yarnpkg.com/arch/-/arch-2.2.0.tgz#1bc47818f305764f23ab3306b0bfc086c5a29d11"
   integrity sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==
 
+are-docs-informative@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/are-docs-informative/-/are-docs-informative-0.0.2.tgz#387f0e93f5d45280373d387a59d34c96db321963"
+  integrity sha512-ixiS0nLNNG5jNQzgZJNoUpBKdo9yTYZMGJ+QgT2jmjR7G7+QHRCc4v6LQ3NgE7EBJq+o0ams3waJwkrlBom8Ig==
+
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -3012,9 +3028,9 @@ camelcase@^6.2.0:
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
 caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001587, caniuse-lite@^1.0.30001754:
-  version "1.0.30001757"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001757.tgz#a46ff91449c69522a462996c6aac4ef95d7ccc5e"
-  integrity sha512-r0nnL/I28Zi/yjk1el6ilj27tKcdjLsNqAOZr0yVjWPrSQyHgKI2INaEWw21bAQSv2LXRt1XuCS/GomNpWOxsQ==
+  version "1.0.30001792"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001792.tgz"
+  integrity sha512-hVLMUZFgR4JJ6ACt1uEESvQN1/dBVqPAKY0hgrV70eN3391K6juAfTjKZLKvOMsx8PxA7gsY1/tLMMTcfFLLpw==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -3208,6 +3224,11 @@ commander@^6.2.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
   integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
 
+comment-parser@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-1.4.1.tgz#bdafead37961ac079be11eb7ec65c4d021eaf9cc"
+  integrity sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==
+
 common-tags@^1.8.0:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6"
@@ -4166,6 +4187,22 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
+eslint-plugin-jsdoc@^52.0.0:
+  version "52.0.4"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-52.0.4.tgz#d391b33dd8d6808d573118588451229d4f41f20d"
+  integrity sha512-be5OzGlLExvcK13Il3noU7/v7WmAQGenTmCaBKf1pwVtPOb6X+PGFVnJad0QhMj4KKf45XjE4hbsBxv25q1fTg==
+  dependencies:
+    "@es-joy/jsdoccomment" "~0.52.0"
+    are-docs-informative "^0.0.2"
+    comment-parser "1.4.1"
+    debug "^4.4.1"
+    escape-string-regexp "^4.0.0"
+    espree "^10.4.0"
+    esquery "^1.6.0"
+    parse-imports-exports "^0.2.4"
+    semver "^7.7.2"
+    spdx-expression-parse "^4.0.0"
+
 eslint-plugin-react@^7.37.5:
   version "7.37.5"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz#2975511472bdda1b272b34d779335c9b0e877065"
@@ -4270,7 +4307,7 @@ esprima@^4.0.0, esprima@^4.0.1:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@^1.5.0:
+esquery@^1.5.0, esquery@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
   integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
@@ -6163,6 +6200,11 @@ jsbn@~0.1.0:
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
   integrity sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==
 
+jsdoc-type-pratt-parser@~4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.1.0.tgz#ff6b4a3f339c34a6c188cbf50a16087858d22113"
+  integrity sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==
+
 jsdom@^20.0.0:
   version "20.0.3"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-20.0.3.tgz#886a41ba1d4726f67a8858028c99489fed6ad4db"
@@ -6958,6 +7000,13 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+parse-imports-exports@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/parse-imports-exports/-/parse-imports-exports-0.2.4.tgz#e3fb3b5e264cfb55c25b5dfcbe7f410f8dc4e7af"
+  integrity sha512-4s6vd6dx1AotCx/RCI2m7t7GCh5bDRUtGNvRfHSP2wbBQdMi67pPe7mtzmgwcaQ8VKK/6IB7Glfyu3qdZJPybQ==
+  dependencies:
+    parse-statements "1.0.11"
+
 parse-json@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
@@ -6976,6 +7025,11 @@ parse-json@^5.2.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+parse-statements@1.0.11:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/parse-statements/-/parse-statements-1.0.11.tgz#8787c5d383ae5746568571614be72b0689584344"
+  integrity sha512-HlsyYdMBnbPQ9Jr/VgJ1YF4scnldvJpJxCVx6KgqPL4dxppsWrJHCIIxQXMJrqGnsRkNPATbeMJ8Yxu7JMsYcA==
+
 parse5@^7.0.0, parse5@^7.1.1:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.1.2.tgz#0736bebbfd77793823240a23b7fc5e010b7f8e32"
@@ -7829,6 +7883,11 @@ semver@^7.6.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.2.tgz#1e3b34759f896e8f14d6134732ce798aeb0c6e13"
   integrity sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==
 
+semver@^7.7.2:
+  version "7.7.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.3.tgz#4b5f4143d007633a8dc671cd0a6ef9147b8bb946"
+  integrity sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==
+
 send@0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
@@ -8078,6 +8137,24 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+spdx-exceptions@^2.1.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz#5d607d27fc806f66d7b64a766650fa890f04ed66"
+  integrity sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==
+
+spdx-expression-parse@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-4.0.0.tgz#a23af9f3132115465dac215c099303e4ceac5794"
+  integrity sha512-Clya5JIij/7C6bRR22+tnGXbc4VKlibKSVj2iHvVeX5iMW7s1SIQlqu699JkODJJIhh/pUu8L0/VLh8xflD+LQ==
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-license-ids@^3.0.0:
+  version "3.0.22"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.22.tgz#abf5a08a6f5d7279559b669f47f0a43e8f3464ef"
+  integrity sha512-4PRT4nh1EImPbt2jASOKHX7PB7I+e4IWNLvkKFDxNhJlfjbYlleYQh285Z/3mPTHSAK/AvdMmw5BNNuYH8ShgQ==
+
 spdy-transport@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-3.0.0.tgz#00d4863a6400ad75df93361a1608605e5dcdcf31"

From 2064c96daffee90d0e69b5a1601771dae8d59445 Mon Sep 17 00:00:00 2001
From: Dave Roberts <d.roberts@ctrlo.com>
Date: Tue, 24 Mar 2026 11:47:12 +0000
Subject: [PATCH 06/10] Updated JS and TS files with necessary ESLint changes

---
 src/frontend/components/alert/lib/dangerAlert.ts    |  2 +-
 src/frontend/components/alert/lib/infoAlert.ts      |  3 +--
 src/frontend/components/alert/lib/successAlert.ts   |  4 ++--
 src/frontend/components/alert/lib/warningAlert.ts   |  3 +--
 .../components/button/lib/RenderableButton.ts       | 13 ++++++-------
 5 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/frontend/components/alert/lib/dangerAlert.ts b/src/frontend/components/alert/lib/dangerAlert.ts
index 8007d12d6..b853554e3 100644
--- a/src/frontend/components/alert/lib/dangerAlert.ts
+++ b/src/frontend/components/alert/lib/dangerAlert.ts
@@ -1,7 +1,7 @@
 import { AlertBase } from './alertBase';
 
 /**
- * A danger alert component that extends the AlertBase class.
+ * Class representing a danger alert.
  */
 export class DangerAlert extends AlertBase {
     /**
diff --git a/src/frontend/components/alert/lib/infoAlert.ts b/src/frontend/components/alert/lib/infoAlert.ts
index f27a11902..1eff8111e 100644
--- a/src/frontend/components/alert/lib/infoAlert.ts
+++ b/src/frontend/components/alert/lib/infoAlert.ts
@@ -1,13 +1,12 @@
 import { AlertBase } from './alertBase';
 
 /**
- * An info alert component that extends the AlertBase class.
+ * InfoAlert class represents an informational alert in the application.
  */
 export class InfoAlert extends AlertBase {
     /**
      * Create an instance of InfoAlert.
      * This class extends AlertBase to provide a specific implementation for info alerts.
-     * It uses the AlertType.INFO to set the alert type.
      * @class
      * @public
      * @memberof alert.lib
diff --git a/src/frontend/components/alert/lib/successAlert.ts b/src/frontend/components/alert/lib/successAlert.ts
index 273d42333..99fdc280c 100644
--- a/src/frontend/components/alert/lib/successAlert.ts
+++ b/src/frontend/components/alert/lib/successAlert.ts
@@ -1,8 +1,8 @@
 import { AlertBase } from './alertBase';
 
 /**
- * A success alert component that extends the AlertBase class.
- */
+ * Class representing a success alert.
+*/
 export class SuccessAlert extends AlertBase {
     /**
      * Create an instance of InfoAlert.
diff --git a/src/frontend/components/alert/lib/warningAlert.ts b/src/frontend/components/alert/lib/warningAlert.ts
index 4b86e7b72..9a668c638 100644
--- a/src/frontend/components/alert/lib/warningAlert.ts
+++ b/src/frontend/components/alert/lib/warningAlert.ts
@@ -1,13 +1,12 @@
 import { AlertBase } from './alertBase';
 
 /**
- * A warning alert component that extends the AlertBase class.
+ * Class representing a warning alert. This class extends AlertBase to provide a specific implementation for warning alerts.
  */
 export class WarningAlert extends AlertBase {
     /**
      * Create an instance of InfoAlert.
      * This class extends AlertBase to provide a specific implementation for info alerts.
-     * It uses the AlertType.INFO to set the alert type.
      * @class
      * @public
      * @memberof alert.lib
diff --git a/src/frontend/components/button/lib/RenderableButton.ts b/src/frontend/components/button/lib/RenderableButton.ts
index c22778eb0..b67b43559 100644
--- a/src/frontend/components/button/lib/RenderableButton.ts
+++ b/src/frontend/components/button/lib/RenderableButton.ts
@@ -1,16 +1,15 @@
 import { Renderable } from 'util/renderable';
 
 /**
- * A simple button component that can be rendered to the DOM.
- * It accepts text, an onClick handler, and optional CSS classes.
+ * A simple button component that can be rendered to the DOM. It takes a text, an onClick handler, and an optional list of CSS classes.
  */
 export class RenderableButton implements Renderable<HTMLButtonElement> {
     classList: string[] = [];
 
     /**
-     * Create a new RenderableButton.
-     * @param text The button text
-     * @param onClick The click event to fire when the button is clicked
+     * Creates a new RenderableButton instance.
+     * @param text The text to display in the button
+     * @param onClick The onclick listener for when the button is clicked
      * @param classList Any classes to add to the button
      */
     constructor(private readonly text: string, private readonly onClick: (ev: MouseEvent)=>void, ...classList: string[]) {
@@ -18,8 +17,8 @@ export class RenderableButton implements Renderable<HTMLButtonElement> {
     }
 
     /**
-     * Render the button to the DOM.
-     * @returns A button to add to the DOM
+     * Renders the button to an HTMLButtonElement.
+     * @returns A button element to attach to the DOM
      */
     render(): HTMLButtonElement {
         const button = document.createElement('button');

From 4bffe43356fd175461df5d463002f5603e58aa9e Mon Sep 17 00:00:00 2001
From: Dave Roberts <d.roberts@ctrlo.com>
Date: Wed, 13 May 2026 14:50:28 +0100
Subject: [PATCH 07/10] Fix error in documentComponent where ASYNC not required

---
 .../components/form-group/input/lib/documentComponent.ts      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/components/form-group/input/lib/documentComponent.ts b/src/frontend/components/form-group/input/lib/documentComponent.ts
index 22de37c25..eb5ff051c 100644
--- a/src/frontend/components/form-group/input/lib/documentComponent.ts
+++ b/src/frontend/components/form-group/input/lib/documentComponent.ts
@@ -74,7 +74,7 @@ class DocumentComponent {
      * Initialize the document component by setting up event listeners and drag-and-drop functionality.
      * @throws {Error} If the file upload element cannot be found.
      */
-    async init() {
+    init() {
         const url = this.el.data('fileupload-url');
 
         const tokenField = this.el.closest('form').find('input[name="csrf_token"]');
@@ -120,7 +120,7 @@ class DocumentComponent {
      * @param {number} total The total number of bytes to be loaded.
      */
     showProgress(file: string, loaded: number, total: number) {
-        let uploadProgression = (loaded / total) * 100;
+        let uploadProgression = Math.round((loaded / total) * 100);
         if (uploadProgression == Infinity) {
             // This will occur when there is an error uploading the file or the file is empty
             uploadProgression = 100;

From a1eb594216849feaf1724a4cce0822f6eb342d51 Mon Sep 17 00:00:00 2001
From: Dave Roberts <d.roberts@ctrlo.com>
Date: Wed, 13 May 2026 14:58:13 +0100
Subject: [PATCH 08/10] fix error in modal from code repetition

---
 .../components/modal/lib/component.js         | 21 +------------------
 1 file changed, 1 insertion(+), 20 deletions(-)

diff --git a/src/frontend/components/modal/lib/component.js b/src/frontend/components/modal/lib/component.js
index 9ed71ca59..8036bf8e5 100644
--- a/src/frontend/components/modal/lib/component.js
+++ b/src/frontend/components/modal/lib/component.js
@@ -130,21 +130,6 @@ class ModalComponent extends Component {
         fields.each((i, field) => {
             const $field = $(field);
 
-            if ($field.attr('type') === 'radio') {
-                // Simple removal of checked property will suffice
-                $field.prop('checked', false);
-            } else if ($field.attr('type') === 'checkbox') {
-                // Need to trigger click event to ensure widget is updated
-                if ($field.is(':checked')) $field.trigger('click');
-            } else {
-                if ($field.data('restore-value')) {
-                    $field.val($field.data('restore-value'));
-                } else {
-                    $field.val('');
-                }
-                $(field).removeData('original-value');
-                $field.trigger('change');
-            }
             if ($field.attr('type') === 'radio') {
                 // Simple removal of checked property will suffice
                 $field.prop('checked', false);
@@ -193,9 +178,6 @@ class ModalComponent extends Component {
     getFrameNumber(frame) {
         const config = $(frame).data('config');
 
-        if (!config.frame || isNaN(config.frame)) {
-            return;
-        }
         if (!config.frame || isNaN(config.frame)) {
             return;
         }
@@ -486,8 +468,7 @@ class ModalComponent extends Component {
         const self = this;
         const url = this.el.data('config').url;
         const id = this.el.data('config').id;
-        const csrf = $('body').data('csrf')
-            .toString();
+        const csrf = $('body').data('csrf').toString();
         dataObj['csrf_token'] = csrf || '';
         const dataStr = JSON.stringify(dataObj);
         const strURL = id ? `${url}/${id}` : url;

From 5eaab62175b18ce5a01d39e70c1af970de47c0e4 Mon Sep 17 00:00:00 2001
From: Dave Roberts <d.roberts@ctrlo.com>
Date: Wed, 13 May 2026 15:00:12 +0100
Subject: [PATCH 09/10] Fix duplication in typeahead

---
 .../components/data-table/lib/component.js    | 31 -------------------
 1 file changed, 31 deletions(-)

diff --git a/src/frontend/components/data-table/lib/component.js b/src/frontend/components/data-table/lib/component.js
index 28bcf1166..b47401a6e 100644
--- a/src/frontend/components/data-table/lib/component.js
+++ b/src/frontend/components/data-table/lib/component.js
@@ -377,37 +377,6 @@ class DataTableComponent extends Component {
 
         this.toggleFilter(column);
 
-        if (col && col.typeahead) {
-            import(/*webpackChunkName: "typeahead" */ 'util/typeahead')
-                .then(({default: TypeaheadBuilder})=>{
-                    const builder = new TypeaheadBuilder();
-                    builder
-                        .withAjaxSource(this.getApiEndpoint(columnId))
-                        .withMethod('POST')
-                        .withData({csrf_token: $('body').data('csrf')})
-                        .withInput($('input', $header))
-                        .withAppendQuery()
-                        .withDefaultMapper()
-                        .withName(columnId.replace(/\s+/g, '') + 'Search')
-                        .withCallback((data) => {
-                            if (col.typeahead_use_id) {
-                                $searchInput.val(data.name);
-                                $('input.search', $searchElement).val(data.id)
-                                    .trigger('change');
-                            } else {
-                                $('input', $searchElement).addClass('search')
-                                    .val(data.name)
-                                    .trigger('change');
-                            }
-                        })
-                        .build();
-                });
-        }
-
-        $header.find('.data-table__header-wrapper').prepend($searchElement);
-
-        this.toggleFilter(column);
-
         if (col && col.typeahead) {
             import(/*webpackChunkName: "typeahead" */ 'util/typeahead')
                 .then(({default: TypeaheadBuilder})=>{

From 89e7d73d3b4093041c956e395e102a3cce91b9f6 Mon Sep 17 00:00:00 2001
From: Dave Roberts <d.roberts@ctrlo.com>
Date: Wed, 13 May 2026 15:12:10 +0100
Subject: [PATCH 10/10] Remove OOPS message

---
 .../components/form-group/select-widget/lib/component.js       | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/frontend/components/form-group/select-widget/lib/component.js b/src/frontend/components/form-group/select-widget/lib/component.js
index c2c6b0970..123224969 100644
--- a/src/frontend/components/form-group/select-widget/lib/component.js
+++ b/src/frontend/components/form-group/select-widget/lib/component.js
@@ -600,8 +600,7 @@ class SelectWidgetComponent extends Component {
                 });
 
             } else {
-                const errorMessage =
-                    data.error === 1 ? data.message : 'Oops! Something went wrong.';
+                const errorMessage = data.message;
                 const errorLi = $(
                     '<li class="answer answer--blank alert alert-danger d-flex flex-row justify-content-start"><span class="control"><label>' +
                     errorMessage +