diff --git a/public/javascripts/burialSiteStatuses.admin.d.ts b/public/javascripts/burialSiteStatuses.admin.d.ts
new file mode 100644
index 00000000..cb0ff5c3
--- /dev/null
+++ b/public/javascripts/burialSiteStatuses.admin.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/public/javascripts/burialSiteStatuses.admin.js b/public/javascripts/burialSiteStatuses.admin.js
new file mode 100644
index 00000000..81fb2430
--- /dev/null
+++ b/public/javascripts/burialSiteStatuses.admin.js
@@ -0,0 +1,170 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+(() => {
+    const sunrise = exports.sunrise;
+    let burialSiteStatuses = exports.burialSiteStatuses;
+    delete exports.burialSiteStatuses;
+    function updateBurialSiteStatus(submitEvent) {
+        submitEvent.preventDefault();
+        cityssm.postJSON(`${sunrise.urlPrefix}/admin/doUpdateBurialSiteStatus`, submitEvent.currentTarget, (rawResponseJSON) => {
+            const responseJSON = rawResponseJSON;
+            if (responseJSON.success) {
+                burialSiteStatuses = responseJSON.burialSiteStatuses;
+                bulmaJS.alert({
+                    message: 'Burial Site Status Updated Successfully',
+                    contextualColorName: 'success'
+                });
+            }
+            else {
+                bulmaJS.alert({
+                    title: 'Error Updating Burial Site Status',
+                    message: responseJSON.errorMessage ?? '',
+                    contextualColorName: 'danger'
+                });
+            }
+        });
+    }
+    function deleteBurialSiteStatus(clickEvent) {
+        const tableRowElement = clickEvent.currentTarget.closest('tr');
+        const burialSiteStatusId = tableRowElement.dataset.burialSiteStatusId;
+        function doDelete() {
+            cityssm.postJSON(`${sunrise.urlPrefix}/admin/doDeleteBurialSiteStatus`, {
+                burialSiteStatusId
+            }, (rawResponseJSON) => {
+                const responseJSON = rawResponseJSON;
+                if (responseJSON.success) {
+                    burialSiteStatuses = responseJSON.burialSiteStatuses;
+                    if (burialSiteStatuses.length === 0) {
+                        renderBurialSiteStatuses();
+                    }
+                    else {
+                        tableRowElement.remove();
+                    }
+                    bulmaJS.alert({
+                        message: 'Burial Site Status Deleted Successfully',
+                        contextualColorName: 'success'
+                    });
+                }
+                else {
+                    bulmaJS.alert({
+                        title: 'Error Deleting Burial Site Status',
+                        message: responseJSON.errorMessage ?? '',
+                        contextualColorName: 'danger'
+                    });
+                }
+            });
+        }
+        bulmaJS.confirm({
+            title: 'Delete Burial Site Status',
+            message: `Are you sure you want to delete this status?<br />
+          Note that no burial sites will be removed.`,
+            messageIsHtml: true,
+            contextualColorName: 'warning',
+            okButton: {
+                text: 'Yes, Delete Status',
+                callbackFunction: doDelete
+            }
+        });
+    }
+    function moveBurialSiteStatus(clickEvent) {
+        const buttonElement = clickEvent.currentTarget;
+        const tableRowElement = buttonElement.closest('tr');
+        const burialSiteStatusId = tableRowElement.dataset.burialSiteStatusId;
+        cityssm.postJSON(`${sunrise.urlPrefix}/admin/${buttonElement.dataset.direction === 'up'
+            ? 'doMoveBurialSiteStatusUp'
+            : 'doMoveBurialSiteStatusDown'}`, {
+            burialSiteStatusId,
+            moveToEnd: clickEvent.shiftKey ? '1' : '0'
+        }, (rawResponseJSON) => {
+            const responseJSON = rawResponseJSON;
+            if (responseJSON.success) {
+                burialSiteStatuses = responseJSON.burialSiteStatuses;
+                renderBurialSiteStatuses();
+            }
+            else {
+                bulmaJS.alert({
+                    title: 'Error Moving Burial Site Status',
+                    message: responseJSON.errorMessage ?? '',
+                    contextualColorName: 'danger'
+                });
+            }
+        });
+    }
+    function renderBurialSiteStatuses() {
+        const containerElement = document.querySelector('#container--burialSiteStatuses');
+        if (burialSiteStatuses.length === 0) {
+            containerElement.innerHTML = `<tr><td colspan="2">
+          <div class="message is-warning">
+            <p class="message-body">There are no active burial site statuses.</p>
+          </div>
+          </td></tr>`;
+            return;
+        }
+        containerElement.innerHTML = '';
+        for (const burialSiteStatus of burialSiteStatuses) {
+            const tableRowElement = document.createElement('tr');
+            tableRowElement.dataset.burialSiteStatusId =
+                burialSiteStatus.burialSiteStatusId.toString();
+            // eslint-disable-next-line no-unsanitized/property
+            tableRowElement.innerHTML = `<td>
+        <form>
+          <input name="burialSiteStatusId" type="hidden" value="${burialSiteStatus.burialSiteStatusId.toString()}" />
+          <div class="field has-addons">
+            <div class="control">
+              <input class="input" name="burialSiteStatus" type="text"
+                value="${cityssm.escapeHTML(burialSiteStatus.burialSiteStatus)}"
+                aria-label="Burial Site Status" maxlength="100" required />
+            </div>
+            <div class="control">
+              <button class="button is-success" type="submit" aria-label="Save">
+                <span class="icon"><i class="fas fa-save" aria-hidden="true"></i></span>
+              </button>
+            </div>
+          </div>
+        </form>
+      </td><td class="is-nowrap">
+        <div class="field is-grouped">
+          <div class="control">
+            ${sunrise.getMoveUpDownButtonFieldHTML('button--moveBurialSiteStatusUp', 'button--moveBurialSiteStatusDown', false)}
+          </div>
+          <div class="control">
+            <button class="button is-danger is-light button--deleteBurialSiteStatus" data-tooltip="Delete Status" type="button" aria-label="Delete Status">
+              <span class="icon"><i class="fas fa-trash" aria-hidden="true"></i></span>
+            </button>
+          </div>
+        </div>
+      </td>`;
+            tableRowElement
+                .querySelector('form')
+                ?.addEventListener('submit', updateBurialSiteStatus);
+            tableRowElement.querySelector('.button--moveBurialSiteStatusUp').addEventListener('click', moveBurialSiteStatus);
+            tableRowElement.querySelector('.button--moveBurialSiteStatusDown').addEventListener('click', moveBurialSiteStatus);
+            tableRowElement
+                .querySelector('.button--deleteBurialSiteStatus')
+                ?.addEventListener('click', deleteBurialSiteStatus);
+            containerElement.append(tableRowElement);
+        }
+    }
+    ;
+    document.querySelector('#form--addBurialSiteStatus').addEventListener('submit', (submitEvent) => {
+        submitEvent.preventDefault();
+        const formElement = submitEvent.currentTarget;
+        cityssm.postJSON(`${sunrise.urlPrefix}/admin/doAddBurialSiteStatus`, formElement, (rawResponseJSON) => {
+            const responseJSON = rawResponseJSON;
+            if (responseJSON.success) {
+                burialSiteStatuses = responseJSON.burialSiteStatuses;
+                renderBurialSiteStatuses();
+                formElement.reset();
+                formElement.querySelector('input')?.focus();
+            }
+            else {
+                bulmaJS.alert({
+                    title: 'Error Adding Burial Site Status',
+                    message: responseJSON.errorMessage ?? '',
+                    contextualColorName: 'danger'
+                });
+            }
+        });
+    });
+    renderBurialSiteStatuses();
+})();
diff --git a/public/javascripts/burialSiteStatuses.admin.ts b/public/javascripts/burialSiteStatuses.admin.ts
new file mode 100644
index 00000000..29bf54c4
--- /dev/null
+++ b/public/javascripts/burialSiteStatuses.admin.ts
@@ -0,0 +1,254 @@
+import type { BulmaJS } from '@cityssm/bulma-js/types.js'
+import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types.js'
+
+import type { BurialSiteStatus } from '../../types/record.types.js'
+
+import type { Sunrise } from './types.js'
+
+declare const exports: {
+  sunrise: Sunrise
+
+  burialSiteStatuses?: BurialSiteStatus[]
+}
+
+declare const cityssm: cityssmGlobal
+declare const bulmaJS: BulmaJS
+;(() => {
+  const sunrise = exports.sunrise as Sunrise
+
+  let burialSiteStatuses = exports.burialSiteStatuses as BurialSiteStatus[]
+  delete exports.burialSiteStatuses
+
+  type BurialSiteStatusResponseJSON =
+    | {
+        success: false
+        errorMessage?: string
+      }
+    | {
+        success: true
+        burialSiteStatuses: BurialSiteStatus[]
+      }
+
+  function updateBurialSiteStatus(submitEvent: SubmitEvent): void {
+    submitEvent.preventDefault()
+
+    cityssm.postJSON(
+      `${sunrise.urlPrefix}/admin/doUpdateBurialSiteStatus`,
+      submitEvent.currentTarget,
+      (rawResponseJSON) => {
+        const responseJSON = rawResponseJSON as BurialSiteStatusResponseJSON
+
+        if (responseJSON.success) {
+          burialSiteStatuses = responseJSON.burialSiteStatuses
+
+          bulmaJS.alert({
+            message: 'Burial Site Status Updated Successfully',
+            contextualColorName: 'success'
+          })
+        } else {
+          bulmaJS.alert({
+            title: 'Error Updating Burial Site Status',
+            message: responseJSON.errorMessage ?? '',
+            contextualColorName: 'danger'
+          })
+        }
+      }
+    )
+  }
+
+  function deleteBurialSiteStatus(clickEvent: Event): void {
+    const tableRowElement = (clickEvent.currentTarget as HTMLElement).closest(
+      'tr'
+    ) as HTMLTableRowElement
+
+    const burialSiteStatusId = tableRowElement.dataset.burialSiteStatusId
+
+    function doDelete(): void {
+      cityssm.postJSON(
+        `${sunrise.urlPrefix}/admin/doDeleteBurialSiteStatus`,
+        {
+          burialSiteStatusId
+        },
+        (rawResponseJSON) => {
+          const responseJSON = rawResponseJSON as BurialSiteStatusResponseJSON
+
+          if (responseJSON.success) {
+            burialSiteStatuses = responseJSON.burialSiteStatuses
+
+            if (burialSiteStatuses.length === 0) {
+              renderBurialSiteStatuses()
+            } else {
+              tableRowElement.remove()
+            }
+
+            bulmaJS.alert({
+              message: 'Burial Site Status Deleted Successfully',
+              contextualColorName: 'success'
+            })
+          } else {
+            bulmaJS.alert({
+              title: 'Error Deleting Burial Site Status',
+              message: responseJSON.errorMessage ?? '',
+              contextualColorName: 'danger'
+            })
+          }
+        }
+      )
+    }
+
+    bulmaJS.confirm({
+      title: 'Delete Burial Site Status',
+      message: `Are you sure you want to delete this status?<br />
+          Note that no burial sites will be removed.`,
+      messageIsHtml: true,
+      contextualColorName: 'warning',
+      okButton: {
+        text: 'Yes, Delete Status',
+        callbackFunction: doDelete
+      }
+    })
+  }
+
+  function moveBurialSiteStatus(clickEvent: MouseEvent): void {
+    const buttonElement = clickEvent.currentTarget as HTMLButtonElement
+
+    const tableRowElement = buttonElement.closest('tr') as HTMLTableRowElement
+
+    const burialSiteStatusId = tableRowElement.dataset.burialSiteStatusId
+
+    cityssm.postJSON(
+      `${sunrise.urlPrefix}/admin/${
+        buttonElement.dataset.direction === 'up'
+          ? 'doMoveBurialSiteStatusUp'
+          : 'doMoveBurialSiteStatusDown'
+      }`,
+      {
+        burialSiteStatusId,
+        moveToEnd: clickEvent.shiftKey ? '1' : '0'
+      },
+      (rawResponseJSON) => {
+        const responseJSON = rawResponseJSON as BurialSiteStatusResponseJSON
+
+        if (responseJSON.success) {
+          burialSiteStatuses = responseJSON.burialSiteStatuses
+          renderBurialSiteStatuses()
+        } else {
+          bulmaJS.alert({
+            title: 'Error Moving Burial Site Status',
+            message: responseJSON.errorMessage ?? '',
+            contextualColorName: 'danger'
+          })
+        }
+      }
+    )
+  }
+
+  function renderBurialSiteStatuses(): void {
+    const containerElement = document.querySelector(
+      '#container--burialSiteStatuses'
+    ) as HTMLTableSectionElement
+
+    if (burialSiteStatuses.length === 0) {
+      containerElement.innerHTML = `<tr><td colspan="2">
+          <div class="message is-warning">
+            <p class="message-body">There are no active burial site statuses.</p>
+          </div>
+          </td></tr>`
+
+      return
+    }
+
+    containerElement.innerHTML = ''
+
+    for (const burialSiteStatus of burialSiteStatuses) {
+      const tableRowElement = document.createElement('tr')
+
+      tableRowElement.dataset.burialSiteStatusId =
+        burialSiteStatus.burialSiteStatusId.toString()
+
+      // eslint-disable-next-line no-unsanitized/property
+      tableRowElement.innerHTML = `<td>
+        <form>
+          <input name="burialSiteStatusId" type="hidden" value="${burialSiteStatus.burialSiteStatusId.toString()}" />
+          <div class="field has-addons">
+            <div class="control">
+              <input class="input" name="burialSiteStatus" type="text"
+                value="${cityssm.escapeHTML(burialSiteStatus.burialSiteStatus)}"
+                aria-label="Burial Site Status" maxlength="100" required />
+            </div>
+            <div class="control">
+              <button class="button is-success" type="submit" aria-label="Save">
+                <span class="icon"><i class="fas fa-save" aria-hidden="true"></i></span>
+              </button>
+            </div>
+          </div>
+        </form>
+      </td><td class="is-nowrap">
+        <div class="field is-grouped">
+          <div class="control">
+            ${sunrise.getMoveUpDownButtonFieldHTML(
+              'button--moveBurialSiteStatusUp',
+              'button--moveBurialSiteStatusDown',
+              false
+            )}
+          </div>
+          <div class="control">
+            <button class="button is-danger is-light button--deleteBurialSiteStatus" data-tooltip="Delete Status" type="button" aria-label="Delete Status">
+              <span class="icon"><i class="fas fa-trash" aria-hidden="true"></i></span>
+            </button>
+          </div>
+        </div>
+      </td>`
+
+      tableRowElement
+        .querySelector('form')
+        ?.addEventListener('submit', updateBurialSiteStatus)
+      ;(
+        tableRowElement.querySelector(
+          '.button--moveBurialSiteStatusUp'
+        ) as HTMLButtonElement
+      ).addEventListener('click', moveBurialSiteStatus)
+      ;(
+        tableRowElement.querySelector(
+          '.button--moveBurialSiteStatusDown'
+        ) as HTMLButtonElement
+      ).addEventListener('click', moveBurialSiteStatus)
+
+      tableRowElement
+        .querySelector('.button--deleteBurialSiteStatus')
+        ?.addEventListener('click', deleteBurialSiteStatus)
+
+      containerElement.append(tableRowElement)
+    }
+  }
+  ;(
+    document.querySelector('#form--addBurialSiteStatus') as HTMLFormElement
+  ).addEventListener('submit', (submitEvent: SubmitEvent) => {
+    submitEvent.preventDefault()
+
+    const formElement = submitEvent.currentTarget as HTMLFormElement
+
+    cityssm.postJSON(
+      `${sunrise.urlPrefix}/admin/doAddBurialSiteStatus`,
+      formElement,
+      (rawResponseJSON) => {
+        const responseJSON = rawResponseJSON as BurialSiteStatusResponseJSON
+
+        if (responseJSON.success) {
+          burialSiteStatuses = responseJSON.burialSiteStatuses
+          renderBurialSiteStatuses()
+          formElement.reset()
+          formElement.querySelector('input')?.focus()
+        } else {
+          bulmaJS.alert({
+            title: 'Error Adding Burial Site Status',
+            message: responseJSON.errorMessage ?? '',
+            contextualColorName: 'danger'
+          })
+        }
+      }
+    )
+  })
+
+  renderBurialSiteStatuses()
+})()
diff --git a/public/javascripts/contract.edit.ts b/public/javascripts/contract.edit.ts
index 74b7540d..9eda7451 100644
--- a/public/javascripts/contract.edit.ts
+++ b/public/javascripts/contract.edit.ts
@@ -4,7 +4,6 @@
 import type { BulmaJS } from '@cityssm/bulma-js/types.js'
 import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types.js'
 
-import type { directionsOfArrival } from '../../data/dataLists.js'
 import type {
   BurialSite,
   BurialSiteStatus,
@@ -24,7 +23,7 @@ declare const exports: {
   burialSiteTypes: BurialSiteType[]
   cemeteries: Cemetery[]
 
-  directionsOfArrival: typeof directionsOfArrival
+  directionsOfArrival: string[]
 }
 ;(() => {
   const sunrise = exports.sunrise
diff --git a/public/javascripts/tables.admin.d.ts b/public/javascripts/tables.admin.d.ts
index cb0ff5c3..e69de29b 100644
--- a/public/javascripts/tables.admin.d.ts
+++ b/public/javascripts/tables.admin.d.ts
@@ -1 +0,0 @@
-export {};
diff --git a/public/javascripts/tables.admin.js b/public/javascripts/tables.admin.js
index 78a6f25d..577c19de 100644
--- a/public/javascripts/tables.admin.js
+++ b/public/javascripts/tables.admin.js
@@ -1,516 +1,17 @@
-"use strict";
-// eslint-disable-next-line @eslint-community/eslint-comments/disable-enable-pair
-/* eslint-disable max-lines */
-Object.defineProperty(exports, "__esModule", { value: true });
+;
 (() => {
-    const sunrise = exports.sunrise;
-    /**
-     * Work Order Types
-     */
-    let workOrderTypes = exports.workOrderTypes;
-    delete exports.workOrderTypes;
-    function updateWorkOrderType(submitEvent) {
-        submitEvent.preventDefault();
-        cityssm.postJSON(`${sunrise.urlPrefix}/admin/doUpdateWorkOrderType`, submitEvent.currentTarget, (rawResponseJSON) => {
-            const responseJSON = rawResponseJSON;
-            if (responseJSON.success) {
-                workOrderTypes = responseJSON.workOrderTypes;
-                bulmaJS.alert({
-                    message: 'Work Order Type Updated Successfully',
-                    contextualColorName: 'success'
-                });
-            }
-            else {
-                bulmaJS.alert({
-                    title: 'Error Updating Work Order Type',
-                    message: responseJSON.errorMessage ?? '',
-                    contextualColorName: 'danger'
-                });
-            }
-        });
-    }
-    function deleteWorkOrderType(clickEvent) {
-        const tableRowElement = clickEvent.currentTarget.closest('tr');
-        const workOrderTypeId = tableRowElement.dataset.workOrderTypeId;
-        function doDelete() {
-            cityssm.postJSON(`${sunrise.urlPrefix}/admin/doDeleteWorkOrderType`, {
-                workOrderTypeId
-            }, (rawResponseJSON) => {
-                const responseJSON = rawResponseJSON;
-                if (responseJSON.success) {
-                    workOrderTypes = responseJSON.workOrderTypes;
-                    if (workOrderTypes.length === 0) {
-                        renderWorkOrderTypes();
-                    }
-                    else {
-                        tableRowElement.remove();
-                    }
-                    bulmaJS.alert({
-                        message: 'Work Order Type Deleted Successfully',
-                        contextualColorName: 'success'
-                    });
-                }
-                else {
-                    bulmaJS.alert({
-                        title: 'Error Deleting Work Order Type',
-                        message: responseJSON.errorMessage ?? '',
-                        contextualColorName: 'danger'
-                    });
-                }
-            });
-        }
-        bulmaJS.confirm({
-            title: 'Delete Work Order Type',
-            message: `Are you sure you want to delete this work order type?<br />
-          Note that no work orders will be removed.`,
-            messageIsHtml: true,
-            contextualColorName: 'warning',
-            okButton: {
-                text: 'Yes, Delete Work Order Type',
-                callbackFunction: doDelete
-            }
-        });
-    }
-    function moveWorkOrderType(clickEvent) {
+    const toggleButtonElements = document.querySelectorAll('.is-toggle-button');
+    function toggleTableView(clickEvent) {
         const buttonElement = clickEvent.currentTarget;
-        const tableRowElement = buttonElement.closest('tr');
-        const workOrderTypeId = tableRowElement.dataset.workOrderTypeId;
-        cityssm.postJSON(`${sunrise.urlPrefix}/admin/${buttonElement.dataset.direction === 'up'
-            ? 'doMoveWorkOrderTypeUp'
-            : 'doMoveWorkOrderTypeDown'}`, {
-            workOrderTypeId,
-            moveToEnd: clickEvent.shiftKey ? '1' : '0'
-        }, (rawResponseJSON) => {
-            const responseJSON = rawResponseJSON;
-            if (responseJSON.success) {
-                workOrderTypes = responseJSON.workOrderTypes;
-                renderWorkOrderTypes();
-            }
-            else {
-                bulmaJS.alert({
-                    title: 'Error Moving Work Order Type',
-                    message: responseJSON.errorMessage ?? '',
-                    contextualColorName: 'danger'
-                });
-            }
-        });
+        const panelElement = buttonElement.closest('.panel');
+        const panelBlockElement = panelElement?.querySelector('.panel-block');
+        panelBlockElement.classList.toggle('is-hidden');
+        // eslint-disable-next-line no-unsanitized/property
+        buttonElement.innerHTML = panelBlockElement.classList.contains('is-hidden')
+            ? '<span class="icon"><i class="fas fa-plus" aria-hidden="true"></i></span>'
+            : '<span class="icon"><i class="fas fa-minus" aria-hidden="true"></i></span>';
     }
-    function renderWorkOrderTypes() {
-        const containerElement = document.querySelector('#container--workOrderTypes');
-        if (workOrderTypes.length === 0) {
-            containerElement.innerHTML = `<tr><td colspan="2">
-          <div class="message is-warning"><p class="message-body">There are no active work order types.</p></div>
-          </td></tr>`;
-            return;
-        }
-        containerElement.innerHTML = '';
-        for (const workOrderType of workOrderTypes) {
-            const tableRowElement = document.createElement('tr');
-            tableRowElement.dataset.workOrderTypeId =
-                workOrderType.workOrderTypeId.toString();
-            // eslint-disable-next-line no-unsanitized/property
-            tableRowElement.innerHTML = `<td>
-        <form>
-          <input name="workOrderTypeId" type="hidden" value="${workOrderType.workOrderTypeId.toString()}" />
-          <div class="field has-addons">
-            <div class="control">
-              <input class="input" name="workOrderType" type="text"
-                value="${cityssm.escapeHTML(workOrderType.workOrderType ?? '')}" maxlength="100" aria-label="Work Order Type" required />
-            </div>
-            <div class="control">
-              <button class="button is-success" type="submit" aria-label="Save">
-                <span class="icon"><i class="fas fa-save" aria-hidden="true"></i></span>
-              </button>
-            </div>
-          </div>
-        </form>
-      </td><td class="is-nowrap">
-        <div class="field is-grouped">
-          <div class="control">
-            ${sunrise.getMoveUpDownButtonFieldHTML('button--moveWorkOrderTypeUp', 'button--moveWorkOrderTypeDown', false)}
-          </div>
-          <div class="control">
-            <button class="button is-danger is-light button--deleteWorkOrderType" data-tooltip="Delete Work Order Type" type="button" aria-label="Delete Work Order Type">
-              <span class="icon"><i class="fas fa-trash" aria-hidden="true"></i></span>
-            </button>
-          </div>
-        </div>
-      </td>`;
-            tableRowElement
-                .querySelector('form')
-                ?.addEventListener('submit', updateWorkOrderType);
-            tableRowElement.querySelector('.button--moveWorkOrderTypeUp').addEventListener('click', moveWorkOrderType);
-            tableRowElement.querySelector('.button--moveWorkOrderTypeDown').addEventListener('click', moveWorkOrderType);
-            tableRowElement
-                .querySelector('.button--deleteWorkOrderType')
-                ?.addEventListener('click', deleteWorkOrderType);
-            containerElement.append(tableRowElement);
-        }
+    for (const toggleButtonElement of toggleButtonElements) {
+        toggleButtonElement.addEventListener('click', toggleTableView);
     }
-    ;
-    document.querySelector('#form--addWorkOrderType').addEventListener('submit', (submitEvent) => {
-        submitEvent.preventDefault();
-        const formElement = submitEvent.currentTarget;
-        cityssm.postJSON(`${sunrise.urlPrefix}/admin/doAddWorkOrderType`, formElement, (rawResponseJSON) => {
-            const responseJSON = rawResponseJSON;
-            if (responseJSON.success) {
-                workOrderTypes = responseJSON.workOrderTypes;
-                renderWorkOrderTypes();
-                formElement.reset();
-                formElement.querySelector('input')?.focus();
-            }
-            else {
-                bulmaJS.alert({
-                    title: 'Error Adding Work Order Type',
-                    message: responseJSON.errorMessage ?? '',
-                    contextualColorName: 'danger'
-                });
-            }
-        });
-    });
-    renderWorkOrderTypes();
-    /**
-     * Work Order Milestone Types
-     */
-    let workOrderMilestoneTypes = exports.workOrderMilestoneTypes;
-    delete exports.workOrderMilestoneTypes;
-    function updateWorkOrderMilestoneType(submitEvent) {
-        submitEvent.preventDefault();
-        cityssm.postJSON(`${sunrise.urlPrefix}/admin/doUpdateWorkOrderMilestoneType`, submitEvent.currentTarget, (rawResponseJSON) => {
-            const responseJSON = rawResponseJSON;
-            if (responseJSON.success) {
-                workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes;
-                bulmaJS.alert({
-                    message: 'Work Order Milestone Type Updated Successfully',
-                    contextualColorName: 'success'
-                });
-            }
-            else {
-                bulmaJS.alert({
-                    title: 'Error Updating Work Order Milestone Type',
-                    message: responseJSON.errorMessage ?? '',
-                    contextualColorName: 'danger'
-                });
-            }
-        });
-    }
-    function deleteWorkOrderMilestoneType(clickEvent) {
-        const tableRowElement = clickEvent.currentTarget.closest('tr');
-        const workOrderMilestoneTypeId = tableRowElement.dataset.workOrderMilestoneTypeId;
-        function doDelete() {
-            cityssm.postJSON(`${sunrise.urlPrefix}/admin/doDeleteWorkOrderMilestoneType`, {
-                workOrderMilestoneTypeId
-            }, (rawResponseJSON) => {
-                const responseJSON = rawResponseJSON;
-                if (responseJSON.success) {
-                    workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes;
-                    if (workOrderMilestoneTypes.length === 0) {
-                        renderWorkOrderMilestoneTypes();
-                    }
-                    else {
-                        tableRowElement.remove();
-                    }
-                    bulmaJS.alert({
-                        message: 'Work Order Milestone Type Deleted Successfully',
-                        contextualColorName: 'success'
-                    });
-                }
-                else {
-                    bulmaJS.alert({
-                        title: 'Error Deleting Work Order Milestone Type',
-                        message: responseJSON.errorMessage ?? '',
-                        contextualColorName: 'danger'
-                    });
-                }
-            });
-        }
-        bulmaJS.confirm({
-            title: 'Delete Work Order Milestone Type',
-            message: `Are you sure you want to delete this work order milestone type?<br />
-          Note that no work orders will be removed.`,
-            messageIsHtml: true,
-            contextualColorName: 'warning',
-            okButton: {
-                text: 'Yes, Delete Work Order Milestone Type',
-                callbackFunction: doDelete
-            }
-        });
-    }
-    function moveWorkOrderMilestoneType(clickEvent) {
-        const buttonElement = clickEvent.currentTarget;
-        const tableRowElement = buttonElement.closest('tr');
-        const workOrderMilestoneTypeId = tableRowElement.dataset.workOrderMilestoneTypeId;
-        cityssm.postJSON(`${sunrise.urlPrefix}/admin/${buttonElement.dataset.direction === 'up'
-            ? 'doMoveWorkOrderMilestoneTypeUp'
-            : 'doMoveWorkOrderMilestoneTypeDown'}`, {
-            workOrderMilestoneTypeId,
-            moveToEnd: clickEvent.shiftKey ? '1' : '0'
-        }, (rawResponseJSON) => {
-            const responseJSON = rawResponseJSON;
-            if (responseJSON.success) {
-                workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes;
-                renderWorkOrderMilestoneTypes();
-            }
-            else {
-                bulmaJS.alert({
-                    title: 'Error Moving Work Order Milestone Type',
-                    message: responseJSON.errorMessage ?? '',
-                    contextualColorName: 'danger'
-                });
-            }
-        });
-    }
-    function renderWorkOrderMilestoneTypes() {
-        const containerElement = document.querySelector('#container--workOrderMilestoneTypes');
-        if (workOrderMilestoneTypes.length === 0) {
-            containerElement.innerHTML = `<tr><td colspan="2">
-          <div class="message is-warning">
-            <p class="message-body">There are no active work order milestone types.</p>
-          </div>
-          </td></tr>`;
-            return;
-        }
-        containerElement.innerHTML = '';
-        for (const workOrderMilestoneType of workOrderMilestoneTypes) {
-            const tableRowElement = document.createElement('tr');
-            tableRowElement.dataset.workOrderMilestoneTypeId =
-                workOrderMilestoneType.workOrderMilestoneTypeId.toString();
-            // eslint-disable-next-line no-unsanitized/property, no-secrets/no-secrets
-            tableRowElement.innerHTML = `<td>
-        <form>
-          <input name="workOrderMilestoneTypeId" type="hidden"
-            value="${workOrderMilestoneType.workOrderMilestoneTypeId.toString()}" />
-          <div class="field has-addons">
-            <div class="control">
-              <input class="input"
-                name="workOrderMilestoneType" type="text"
-                value="${cityssm.escapeHTML(workOrderMilestoneType.workOrderMilestoneType)}"
-                maxlength="100"
-                aria-label="Work Order Milestone Type" required />
-            </div>
-            <div class="control">
-              <button class="button is-success" type="submit" aria-label="Save">
-                <span class="icon"><i class="fas fa-save" aria-hidden="true"></i></span>
-              </button>
-            </div>
-          </div>
-        </form>
-      </td><td class="is-nowrap">
-        <div class="field is-grouped">
-          <div class="control">
-            ${sunrise.getMoveUpDownButtonFieldHTML('button--moveWorkOrderMilestoneTypeUp', 'button--moveWorkOrderMilestoneTypeDown', false)}
-          </div>
-          <div class="control">
-            <button class="button is-danger is-light button--deleteWorkOrderMilestoneType" data-tooltip="Delete Milestone Type" type="button" aria-label="Delete Milestone Type">
-              <span class="icon"><i class="fas fa-trash" aria-hidden="true"></i></span>
-            </button>
-          </div>
-        </div>
-      </td>`;
-            tableRowElement
-                .querySelector('form')
-                ?.addEventListener('submit', updateWorkOrderMilestoneType);
-            tableRowElement
-                .querySelector('.button--moveWorkOrderMilestoneTypeUp')
-                ?.addEventListener('click', moveWorkOrderMilestoneType);
-            tableRowElement
-                .querySelector('.button--moveWorkOrderMilestoneTypeDown')
-                ?.addEventListener('click', moveWorkOrderMilestoneType);
-            tableRowElement
-                .querySelector('.button--deleteWorkOrderMilestoneType')
-                ?.addEventListener('click', deleteWorkOrderMilestoneType);
-            containerElement.append(tableRowElement);
-        }
-    }
-    document
-        .querySelector('#form--addWorkOrderMilestoneType')
-        ?.addEventListener('submit', (submitEvent) => {
-        submitEvent.preventDefault();
-        const formElement = submitEvent.currentTarget;
-        cityssm.postJSON(`${sunrise.urlPrefix}/admin/doAddWorkOrderMilestoneType`, formElement, (rawResponseJSON) => {
-            const responseJSON = rawResponseJSON;
-            if (responseJSON.success) {
-                workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes;
-                renderWorkOrderMilestoneTypes();
-                formElement.reset();
-                formElement.querySelector('input')?.focus();
-            }
-            else {
-                bulmaJS.alert({
-                    title: 'Error Adding Work Order Milestone Type',
-                    message: responseJSON.errorMessage ?? '',
-                    contextualColorName: 'danger'
-                });
-            }
-        });
-    });
-    renderWorkOrderMilestoneTypes();
-    /**
-     * Burial Site Statuses
-     */
-    let burialSiteStatuses = exports.burialSiteStatuses;
-    delete exports.burialSiteStatuses;
-    function updateBurialSiteStatus(submitEvent) {
-        submitEvent.preventDefault();
-        cityssm.postJSON(`${sunrise.urlPrefix}/admin/doUpdateBurialSiteStatus`, submitEvent.currentTarget, (rawResponseJSON) => {
-            const responseJSON = rawResponseJSON;
-            if (responseJSON.success) {
-                burialSiteStatuses = responseJSON.burialSiteStatuses;
-                bulmaJS.alert({
-                    message: 'Burial Site Status Updated Successfully',
-                    contextualColorName: 'success'
-                });
-            }
-            else {
-                bulmaJS.alert({
-                    title: 'Error Updating Burial Site Status',
-                    message: responseJSON.errorMessage ?? '',
-                    contextualColorName: 'danger'
-                });
-            }
-        });
-    }
-    function deleteBurialSiteStatus(clickEvent) {
-        const tableRowElement = clickEvent.currentTarget.closest('tr');
-        const burialSiteStatusId = tableRowElement.dataset.burialSiteStatusId;
-        function doDelete() {
-            cityssm.postJSON(`${sunrise.urlPrefix}/admin/doDeleteBurialSiteStatus`, {
-                burialSiteStatusId
-            }, (rawResponseJSON) => {
-                const responseJSON = rawResponseJSON;
-                if (responseJSON.success) {
-                    burialSiteStatuses = responseJSON.burialSiteStatuses;
-                    if (burialSiteStatuses.length === 0) {
-                        renderBurialSiteStatuses();
-                    }
-                    else {
-                        tableRowElement.remove();
-                    }
-                    bulmaJS.alert({
-                        message: 'Burial Site Status Deleted Successfully',
-                        contextualColorName: 'success'
-                    });
-                }
-                else {
-                    bulmaJS.alert({
-                        title: 'Error Deleting Burial Site Status',
-                        message: responseJSON.errorMessage ?? '',
-                        contextualColorName: 'danger'
-                    });
-                }
-            });
-        }
-        bulmaJS.confirm({
-            title: 'Delete Burial Site Status',
-            message: `Are you sure you want to delete this status?<br />
-          Note that no burial sites will be removed.`,
-            messageIsHtml: true,
-            contextualColorName: 'warning',
-            okButton: {
-                text: 'Yes, Delete Status',
-                callbackFunction: doDelete
-            }
-        });
-    }
-    function moveBurialSiteStatus(clickEvent) {
-        const buttonElement = clickEvent.currentTarget;
-        const tableRowElement = buttonElement.closest('tr');
-        const burialSiteStatusId = tableRowElement.dataset.burialSiteStatusId;
-        cityssm.postJSON(`${sunrise.urlPrefix}/admin/${buttonElement.dataset.direction === 'up'
-            ? 'doMoveBurialSiteStatusUp'
-            : 'doMoveBurialSiteStatusDown'}`, {
-            burialSiteStatusId,
-            moveToEnd: clickEvent.shiftKey ? '1' : '0'
-        }, (rawResponseJSON) => {
-            const responseJSON = rawResponseJSON;
-            if (responseJSON.success) {
-                burialSiteStatuses = responseJSON.burialSiteStatuses;
-                renderBurialSiteStatuses();
-            }
-            else {
-                bulmaJS.alert({
-                    title: 'Error Moving Burial Site Status',
-                    message: responseJSON.errorMessage ?? '',
-                    contextualColorName: 'danger'
-                });
-            }
-        });
-    }
-    function renderBurialSiteStatuses() {
-        const containerElement = document.querySelector('#container--burialSiteStatuses');
-        if (burialSiteStatuses.length === 0) {
-            containerElement.innerHTML = `<tr><td colspan="2">
-          <div class="message is-warning">
-            <p class="message-body">There are no active burial site statuses.</p>
-          </div>
-          </td></tr>`;
-            return;
-        }
-        containerElement.innerHTML = '';
-        for (const burialSiteStatus of burialSiteStatuses) {
-            const tableRowElement = document.createElement('tr');
-            tableRowElement.dataset.burialSiteStatusId =
-                burialSiteStatus.burialSiteStatusId.toString();
-            // eslint-disable-next-line no-unsanitized/property
-            tableRowElement.innerHTML = `<td>
-        <form>
-          <input name="burialSiteStatusId" type="hidden" value="${burialSiteStatus.burialSiteStatusId.toString()}" />
-          <div class="field has-addons">
-            <div class="control">
-              <input class="input" name="burialSiteStatus" type="text"
-                value="${cityssm.escapeHTML(burialSiteStatus.burialSiteStatus)}"
-                aria-label="Burial Site Status" maxlength="100" required />
-            </div>
-            <div class="control">
-              <button class="button is-success" type="submit" aria-label="Save">
-                <span class="icon"><i class="fas fa-save" aria-hidden="true"></i></span>
-              </button>
-            </div>
-          </div>
-        </form>
-      </td><td class="is-nowrap">
-        <div class="field is-grouped">
-          <div class="control">
-            ${sunrise.getMoveUpDownButtonFieldHTML('button--moveBurialSiteStatusUp', 'button--moveBurialSiteStatusDown', false)}
-          </div>
-          <div class="control">
-            <button class="button is-danger is-light button--deleteBurialSiteStatus" data-tooltip="Delete Status" type="button" aria-label="Delete Status">
-              <span class="icon"><i class="fas fa-trash" aria-hidden="true"></i></span>
-            </button>
-          </div>
-        </div>
-      </td>`;
-            tableRowElement
-                .querySelector('form')
-                ?.addEventListener('submit', updateBurialSiteStatus);
-            tableRowElement.querySelector('.button--moveBurialSiteStatusUp').addEventListener('click', moveBurialSiteStatus);
-            tableRowElement.querySelector('.button--moveBurialSiteStatusDown').addEventListener('click', moveBurialSiteStatus);
-            tableRowElement
-                .querySelector('.button--deleteBurialSiteStatus')
-                ?.addEventListener('click', deleteBurialSiteStatus);
-            containerElement.append(tableRowElement);
-        }
-    }
-    ;
-    document.querySelector('#form--addBurialSiteStatus').addEventListener('submit', (submitEvent) => {
-        submitEvent.preventDefault();
-        const formElement = submitEvent.currentTarget;
-        cityssm.postJSON(`${sunrise.urlPrefix}/admin/doAddBurialSiteStatus`, formElement, (rawResponseJSON) => {
-            const responseJSON = rawResponseJSON;
-            if (responseJSON.success) {
-                burialSiteStatuses = responseJSON.burialSiteStatuses;
-                renderBurialSiteStatuses();
-                formElement.reset();
-                formElement.querySelector('input')?.focus();
-            }
-            else {
-                bulmaJS.alert({
-                    title: 'Error Adding Burial Site Status',
-                    message: responseJSON.errorMessage ?? '',
-                    contextualColorName: 'danger'
-                });
-            }
-        });
-    });
-    renderBurialSiteStatuses();
 })();
diff --git a/public/javascripts/tables.admin.ts b/public/javascripts/tables.admin.ts
index c703c729..1b7aaaeb 100644
--- a/public/javascripts/tables.admin.ts
+++ b/public/javascripts/tables.admin.ts
@@ -1,748 +1,24 @@
-// eslint-disable-next-line @eslint-community/eslint-comments/disable-enable-pair
-/* eslint-disable max-lines */
-
-import type { BulmaJS } from '@cityssm/bulma-js/types.js'
-import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types.js'
-
-import type {
-  BurialSiteStatus,
-  WorkOrderMilestoneType,
-  WorkOrderType
-} from '../../types/record.types.js'
-
-import type { Sunrise } from './types.js'
-
-declare const exports: Record<string, unknown>
-
-declare const cityssm: cityssmGlobal
-declare const bulmaJS: BulmaJS
 ;(() => {
-  const sunrise = exports.sunrise as Sunrise
+  const toggleButtonElements = document.querySelectorAll('.is-toggle-button')
 
-  /**
-   * Work Order Types
-   */
-
-  let workOrderTypes = exports.workOrderTypes as WorkOrderType[]
-  delete exports.workOrderTypes
-
-  type WorkOrderTypeResponseJSON =
-    | {
-        success: true
-        workOrderTypes: WorkOrderType[]
-      }
-    | {
-        success: false
-        errorMessage?: string
-      }
-
-  function updateWorkOrderType(submitEvent: SubmitEvent): void {
-    submitEvent.preventDefault()
-
-    cityssm.postJSON(
-      `${sunrise.urlPrefix}/admin/doUpdateWorkOrderType`,
-      submitEvent.currentTarget,
-      (rawResponseJSON) => {
-        const responseJSON = rawResponseJSON as WorkOrderTypeResponseJSON
-
-        if (responseJSON.success) {
-          workOrderTypes = responseJSON.workOrderTypes
-
-          bulmaJS.alert({
-            message: 'Work Order Type Updated Successfully',
-            contextualColorName: 'success'
-          })
-        } else {
-          bulmaJS.alert({
-            title: 'Error Updating Work Order Type',
-            message: responseJSON.errorMessage ?? '',
-            contextualColorName: 'danger'
-          })
-        }
-      }
-    )
-  }
-
-  function deleteWorkOrderType(clickEvent: Event): void {
-    const tableRowElement = (clickEvent.currentTarget as HTMLElement).closest(
-      'tr'
-    ) as HTMLTableRowElement
-
-    const workOrderTypeId = tableRowElement.dataset.workOrderTypeId
-
-    function doDelete(): void {
-      cityssm.postJSON(
-        `${sunrise.urlPrefix}/admin/doDeleteWorkOrderType`,
-        {
-          workOrderTypeId
-        },
-        (rawResponseJSON) => {
-          const responseJSON = rawResponseJSON as WorkOrderTypeResponseJSON
-
-          if (responseJSON.success) {
-            workOrderTypes = responseJSON.workOrderTypes
-
-            if (workOrderTypes.length === 0) {
-              renderWorkOrderTypes()
-            } else {
-              tableRowElement.remove()
-            }
-
-            bulmaJS.alert({
-              message: 'Work Order Type Deleted Successfully',
-              contextualColorName: 'success'
-            })
-          } else {
-            bulmaJS.alert({
-              title: 'Error Deleting Work Order Type',
-              message: responseJSON.errorMessage ?? '',
-              contextualColorName: 'danger'
-            })
-          }
-        }
-      )
-    }
-
-    bulmaJS.confirm({
-      title: 'Delete Work Order Type',
-      message: `Are you sure you want to delete this work order type?<br />
-          Note that no work orders will be removed.`,
-      messageIsHtml: true,
-      contextualColorName: 'warning',
-      okButton: {
-        text: 'Yes, Delete Work Order Type',
-        callbackFunction: doDelete
-      }
-    })
-  }
-
-  function moveWorkOrderType(clickEvent: MouseEvent): void {
+  function toggleTableView(clickEvent: Event): void {
     const buttonElement = clickEvent.currentTarget as HTMLButtonElement
 
-    const tableRowElement = buttonElement.closest('tr') as HTMLTableRowElement
+    const panelElement = buttonElement.closest('.panel')
 
-    const workOrderTypeId = tableRowElement.dataset.workOrderTypeId
+    const panelBlockElement = panelElement?.querySelector(
+      '.panel-block'
+    ) as HTMLDivElement
 
-    cityssm.postJSON(
-      `${sunrise.urlPrefix}/admin/${
-        buttonElement.dataset.direction === 'up'
-          ? 'doMoveWorkOrderTypeUp'
-          : 'doMoveWorkOrderTypeDown'
-      }`,
-      {
-        workOrderTypeId,
-        moveToEnd: clickEvent.shiftKey ? '1' : '0'
-      },
-      (rawResponseJSON) => {
-        const responseJSON = rawResponseJSON as WorkOrderTypeResponseJSON
+    panelBlockElement.classList.toggle('is-hidden')
 
-        if (responseJSON.success) {
-          workOrderTypes = responseJSON.workOrderTypes
-          renderWorkOrderTypes()
-        } else {
-          bulmaJS.alert({
-            title: 'Error Moving Work Order Type',
-            message: responseJSON.errorMessage ?? '',
-            contextualColorName: 'danger'
-          })
-        }
-      }
-    )
+    // eslint-disable-next-line no-unsanitized/property
+    buttonElement.innerHTML = panelBlockElement.classList.contains('is-hidden')
+      ? '<span class="icon"><i class="fas fa-plus" aria-hidden="true"></i></span>'
+      : '<span class="icon"><i class="fas fa-minus" aria-hidden="true"></i></span>'
   }
 
-  function renderWorkOrderTypes(): void {
-    const containerElement = document.querySelector(
-      '#container--workOrderTypes'
-    ) as HTMLTableSectionElement
-
-    if (workOrderTypes.length === 0) {
-      containerElement.innerHTML = `<tr><td colspan="2">
-          <div class="message is-warning"><p class="message-body">There are no active work order types.</p></div>
-          </td></tr>`
-
-      return
-    }
-
-    containerElement.innerHTML = ''
-
-    for (const workOrderType of workOrderTypes) {
-      const tableRowElement = document.createElement('tr')
-
-      tableRowElement.dataset.workOrderTypeId =
-        workOrderType.workOrderTypeId.toString()
-
-      // eslint-disable-next-line no-unsanitized/property
-      tableRowElement.innerHTML = `<td>
-        <form>
-          <input name="workOrderTypeId" type="hidden" value="${workOrderType.workOrderTypeId.toString()}" />
-          <div class="field has-addons">
-            <div class="control">
-              <input class="input" name="workOrderType" type="text"
-                value="${cityssm.escapeHTML(workOrderType.workOrderType ?? '')}" maxlength="100" aria-label="Work Order Type" required />
-            </div>
-            <div class="control">
-              <button class="button is-success" type="submit" aria-label="Save">
-                <span class="icon"><i class="fas fa-save" aria-hidden="true"></i></span>
-              </button>
-            </div>
-          </div>
-        </form>
-      </td><td class="is-nowrap">
-        <div class="field is-grouped">
-          <div class="control">
-            ${sunrise.getMoveUpDownButtonFieldHTML(
-              'button--moveWorkOrderTypeUp',
-              'button--moveWorkOrderTypeDown',
-              false
-            )}
-          </div>
-          <div class="control">
-            <button class="button is-danger is-light button--deleteWorkOrderType" data-tooltip="Delete Work Order Type" type="button" aria-label="Delete Work Order Type">
-              <span class="icon"><i class="fas fa-trash" aria-hidden="true"></i></span>
-            </button>
-          </div>
-        </div>
-      </td>`
-
-      tableRowElement
-        .querySelector('form')
-        ?.addEventListener('submit', updateWorkOrderType)
-      ;(
-        tableRowElement.querySelector(
-          '.button--moveWorkOrderTypeUp'
-        ) as HTMLButtonElement
-      ).addEventListener('click', moveWorkOrderType)
-      ;(
-        tableRowElement.querySelector(
-          '.button--moveWorkOrderTypeDown'
-        ) as HTMLButtonElement
-      ).addEventListener('click', moveWorkOrderType)
-
-      tableRowElement
-        .querySelector('.button--deleteWorkOrderType')
-        ?.addEventListener('click', deleteWorkOrderType)
-
-      containerElement.append(tableRowElement)
-    }
+  for (const toggleButtonElement of toggleButtonElements) {
+    toggleButtonElement.addEventListener('click', toggleTableView)
   }
-
-  ;(
-    document.querySelector('#form--addWorkOrderType') as HTMLFormElement
-  ).addEventListener('submit', (submitEvent: SubmitEvent) => {
-    submitEvent.preventDefault()
-
-    const formElement = submitEvent.currentTarget as HTMLFormElement
-
-    cityssm.postJSON(
-      `${sunrise.urlPrefix}/admin/doAddWorkOrderType`,
-      formElement,
-      (rawResponseJSON) => {
-        const responseJSON = rawResponseJSON as WorkOrderTypeResponseJSON
-
-        if (responseJSON.success) {
-          workOrderTypes = responseJSON.workOrderTypes
-          renderWorkOrderTypes()
-          formElement.reset()
-          formElement.querySelector('input')?.focus()
-        } else {
-          bulmaJS.alert({
-            title: 'Error Adding Work Order Type',
-            message: responseJSON.errorMessage ?? '',
-            contextualColorName: 'danger'
-          })
-        }
-      }
-    )
-  })
-
-  renderWorkOrderTypes()
-
-  /**
-   * Work Order Milestone Types
-   */
-
-  let workOrderMilestoneTypes =
-    exports.workOrderMilestoneTypes as WorkOrderMilestoneType[]
-  delete exports.workOrderMilestoneTypes
-
-  type WorkOrderMilestoneTypeResponseJSON =
-    | {
-        success: true
-        workOrderMilestoneTypes: WorkOrderMilestoneType[]
-      }
-    | {
-        success: false
-        errorMessage?: string
-      }
-
-  function updateWorkOrderMilestoneType(submitEvent: SubmitEvent): void {
-    submitEvent.preventDefault()
-
-    cityssm.postJSON(
-      `${sunrise.urlPrefix}/admin/doUpdateWorkOrderMilestoneType`,
-      submitEvent.currentTarget,
-      (rawResponseJSON) => {
-        const responseJSON =
-          rawResponseJSON as WorkOrderMilestoneTypeResponseJSON
-
-        if (responseJSON.success) {
-          workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes
-
-          bulmaJS.alert({
-            message: 'Work Order Milestone Type Updated Successfully',
-            contextualColorName: 'success'
-          })
-        } else {
-          bulmaJS.alert({
-            title: 'Error Updating Work Order Milestone Type',
-            message: responseJSON.errorMessage ?? '',
-            contextualColorName: 'danger'
-          })
-        }
-      }
-    )
-  }
-
-  function deleteWorkOrderMilestoneType(clickEvent: Event): void {
-    const tableRowElement = (clickEvent.currentTarget as HTMLElement).closest(
-      'tr'
-    ) as HTMLTableRowElement
-
-    const workOrderMilestoneTypeId =
-      tableRowElement.dataset.workOrderMilestoneTypeId
-
-    function doDelete(): void {
-      cityssm.postJSON(
-        `${sunrise.urlPrefix}/admin/doDeleteWorkOrderMilestoneType`,
-        {
-          workOrderMilestoneTypeId
-        },
-        (rawResponseJSON) => {
-          const responseJSON =
-            rawResponseJSON as WorkOrderMilestoneTypeResponseJSON
-
-          if (responseJSON.success) {
-            workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes
-
-            if (workOrderMilestoneTypes.length === 0) {
-              renderWorkOrderMilestoneTypes()
-            } else {
-              tableRowElement.remove()
-            }
-
-            bulmaJS.alert({
-              message: 'Work Order Milestone Type Deleted Successfully',
-              contextualColorName: 'success'
-            })
-          } else {
-            bulmaJS.alert({
-              title: 'Error Deleting Work Order Milestone Type',
-              message: responseJSON.errorMessage ?? '',
-              contextualColorName: 'danger'
-            })
-          }
-        }
-      )
-    }
-
-    bulmaJS.confirm({
-      title: 'Delete Work Order Milestone Type',
-      message: `Are you sure you want to delete this work order milestone type?<br />
-          Note that no work orders will be removed.`,
-      messageIsHtml: true,
-      contextualColorName: 'warning',
-      okButton: {
-        text: 'Yes, Delete Work Order Milestone Type',
-        callbackFunction: doDelete
-      }
-    })
-  }
-
-  function moveWorkOrderMilestoneType(clickEvent: MouseEvent): void {
-    const buttonElement = clickEvent.currentTarget as HTMLButtonElement
-
-    const tableRowElement = buttonElement.closest('tr') as HTMLTableRowElement
-
-    const workOrderMilestoneTypeId =
-      tableRowElement.dataset.workOrderMilestoneTypeId
-
-    cityssm.postJSON(
-      `${sunrise.urlPrefix}/admin/${
-        buttonElement.dataset.direction === 'up'
-          ? 'doMoveWorkOrderMilestoneTypeUp'
-          : 'doMoveWorkOrderMilestoneTypeDown'
-      }`,
-      {
-        workOrderMilestoneTypeId,
-        moveToEnd: clickEvent.shiftKey ? '1' : '0'
-      },
-      (rawResponseJSON) => {
-        const responseJSON =
-          rawResponseJSON as WorkOrderMilestoneTypeResponseJSON
-
-        if (responseJSON.success) {
-          workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes
-          renderWorkOrderMilestoneTypes()
-        } else {
-          bulmaJS.alert({
-            title: 'Error Moving Work Order Milestone Type',
-            message: responseJSON.errorMessage ?? '',
-            contextualColorName: 'danger'
-          })
-        }
-      }
-    )
-  }
-
-  function renderWorkOrderMilestoneTypes(): void {
-    const containerElement = document.querySelector(
-      '#container--workOrderMilestoneTypes'
-    ) as HTMLTableSectionElement
-
-    if (workOrderMilestoneTypes.length === 0) {
-      containerElement.innerHTML = `<tr><td colspan="2">
-          <div class="message is-warning">
-            <p class="message-body">There are no active work order milestone types.</p>
-          </div>
-          </td></tr>`
-
-      return
-    }
-
-    containerElement.innerHTML = ''
-
-    for (const workOrderMilestoneType of workOrderMilestoneTypes) {
-      const tableRowElement = document.createElement('tr')
-
-      tableRowElement.dataset.workOrderMilestoneTypeId =
-        workOrderMilestoneType.workOrderMilestoneTypeId.toString()
-
-      // eslint-disable-next-line no-unsanitized/property, no-secrets/no-secrets
-      tableRowElement.innerHTML = `<td>
-        <form>
-          <input name="workOrderMilestoneTypeId" type="hidden"
-            value="${workOrderMilestoneType.workOrderMilestoneTypeId.toString()}" />
-          <div class="field has-addons">
-            <div class="control">
-              <input class="input"
-                name="workOrderMilestoneType" type="text"
-                value="${cityssm.escapeHTML(workOrderMilestoneType.workOrderMilestoneType)}"
-                maxlength="100"
-                aria-label="Work Order Milestone Type" required />
-            </div>
-            <div class="control">
-              <button class="button is-success" type="submit" aria-label="Save">
-                <span class="icon"><i class="fas fa-save" aria-hidden="true"></i></span>
-              </button>
-            </div>
-          </div>
-        </form>
-      </td><td class="is-nowrap">
-        <div class="field is-grouped">
-          <div class="control">
-            ${sunrise.getMoveUpDownButtonFieldHTML(
-              'button--moveWorkOrderMilestoneTypeUp',
-              'button--moveWorkOrderMilestoneTypeDown',
-              false
-            )}
-          </div>
-          <div class="control">
-            <button class="button is-danger is-light button--deleteWorkOrderMilestoneType" data-tooltip="Delete Milestone Type" type="button" aria-label="Delete Milestone Type">
-              <span class="icon"><i class="fas fa-trash" aria-hidden="true"></i></span>
-            </button>
-          </div>
-        </div>
-      </td>`
-
-      tableRowElement
-        .querySelector('form')
-        ?.addEventListener('submit', updateWorkOrderMilestoneType)
-
-      tableRowElement
-        .querySelector('.button--moveWorkOrderMilestoneTypeUp')
-        ?.addEventListener('click', moveWorkOrderMilestoneType)
-
-      tableRowElement
-        .querySelector('.button--moveWorkOrderMilestoneTypeDown')
-        ?.addEventListener('click', moveWorkOrderMilestoneType)
-
-      tableRowElement
-        .querySelector('.button--deleteWorkOrderMilestoneType')
-        ?.addEventListener('click', deleteWorkOrderMilestoneType)
-
-      containerElement.append(tableRowElement)
-    }
-  }
-
-  document
-    .querySelector('#form--addWorkOrderMilestoneType')
-    ?.addEventListener('submit', (submitEvent: SubmitEvent) => {
-      submitEvent.preventDefault()
-
-      const formElement = submitEvent.currentTarget as HTMLFormElement
-
-      cityssm.postJSON(
-        `${sunrise.urlPrefix}/admin/doAddWorkOrderMilestoneType`,
-        formElement,
-        (rawResponseJSON) => {
-          const responseJSON =
-            rawResponseJSON as WorkOrderMilestoneTypeResponseJSON
-
-          if (responseJSON.success) {
-            workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes
-            renderWorkOrderMilestoneTypes()
-            formElement.reset()
-            formElement.querySelector('input')?.focus()
-          } else {
-            bulmaJS.alert({
-              title: 'Error Adding Work Order Milestone Type',
-              message: responseJSON.errorMessage ?? '',
-              contextualColorName: 'danger'
-            })
-          }
-        }
-      )
-    })
-
-  renderWorkOrderMilestoneTypes()
-
-  /**
-   * Burial Site Statuses
-   */
-
-  let burialSiteStatuses = exports.burialSiteStatuses as BurialSiteStatus[]
-  delete exports.burialSiteStatuses
-
-  type BurialSiteStatusResponseJSON =
-    | {
-        success: true
-        burialSiteStatuses: BurialSiteStatus[]
-      }
-    | {
-        success: false
-        errorMessage?: string
-      }
-
-  function updateBurialSiteStatus(submitEvent: SubmitEvent): void {
-    submitEvent.preventDefault()
-
-    cityssm.postJSON(
-      `${sunrise.urlPrefix}/admin/doUpdateBurialSiteStatus`,
-      submitEvent.currentTarget,
-      (rawResponseJSON) => {
-        const responseJSON = rawResponseJSON as BurialSiteStatusResponseJSON
-
-        if (responseJSON.success) {
-          burialSiteStatuses = responseJSON.burialSiteStatuses
-
-          bulmaJS.alert({
-            message: 'Burial Site Status Updated Successfully',
-            contextualColorName: 'success'
-          })
-        } else {
-          bulmaJS.alert({
-            title: 'Error Updating Burial Site Status',
-            message: responseJSON.errorMessage ?? '',
-            contextualColorName: 'danger'
-          })
-        }
-      }
-    )
-  }
-
-  function deleteBurialSiteStatus(clickEvent: Event): void {
-    const tableRowElement = (clickEvent.currentTarget as HTMLElement).closest(
-      'tr'
-    ) as HTMLTableRowElement
-
-    const burialSiteStatusId = tableRowElement.dataset.burialSiteStatusId
-
-    function doDelete(): void {
-      cityssm.postJSON(
-        `${sunrise.urlPrefix}/admin/doDeleteBurialSiteStatus`,
-        {
-          burialSiteStatusId
-        },
-        (rawResponseJSON) => {
-          const responseJSON = rawResponseJSON as BurialSiteStatusResponseJSON
-
-          if (responseJSON.success) {
-            burialSiteStatuses = responseJSON.burialSiteStatuses
-
-            if (burialSiteStatuses.length === 0) {
-              renderBurialSiteStatuses()
-            } else {
-              tableRowElement.remove()
-            }
-
-            bulmaJS.alert({
-              message: 'Burial Site Status Deleted Successfully',
-              contextualColorName: 'success'
-            })
-          } else {
-            bulmaJS.alert({
-              title: 'Error Deleting Burial Site Status',
-              message: responseJSON.errorMessage ?? '',
-              contextualColorName: 'danger'
-            })
-          }
-        }
-      )
-    }
-
-    bulmaJS.confirm({
-      title: 'Delete Burial Site Status',
-      message: `Are you sure you want to delete this status?<br />
-          Note that no burial sites will be removed.`,
-      messageIsHtml: true,
-      contextualColorName: 'warning',
-      okButton: {
-        text: 'Yes, Delete Status',
-        callbackFunction: doDelete
-      }
-    })
-  }
-
-  function moveBurialSiteStatus(clickEvent: MouseEvent): void {
-    const buttonElement = clickEvent.currentTarget as HTMLButtonElement
-
-    const tableRowElement = buttonElement.closest('tr') as HTMLTableRowElement
-
-    const burialSiteStatusId = tableRowElement.dataset.burialSiteStatusId
-
-    cityssm.postJSON(
-      `${sunrise.urlPrefix}/admin/${
-        buttonElement.dataset.direction === 'up'
-          ? 'doMoveBurialSiteStatusUp'
-          : 'doMoveBurialSiteStatusDown'
-      }`,
-      {
-        burialSiteStatusId,
-        moveToEnd: clickEvent.shiftKey ? '1' : '0'
-      },
-      (rawResponseJSON) => {
-        const responseJSON = rawResponseJSON as BurialSiteStatusResponseJSON
-
-        if (responseJSON.success) {
-          burialSiteStatuses = responseJSON.burialSiteStatuses
-          renderBurialSiteStatuses()
-        } else {
-          bulmaJS.alert({
-            title: 'Error Moving Burial Site Status',
-            message: responseJSON.errorMessage ?? '',
-            contextualColorName: 'danger'
-          })
-        }
-      }
-    )
-  }
-
-  function renderBurialSiteStatuses(): void {
-    const containerElement = document.querySelector(
-      '#container--burialSiteStatuses'
-    ) as HTMLTableSectionElement
-
-    if (burialSiteStatuses.length === 0) {
-      containerElement.innerHTML = `<tr><td colspan="2">
-          <div class="message is-warning">
-            <p class="message-body">There are no active burial site statuses.</p>
-          </div>
-          </td></tr>`
-
-      return
-    }
-
-    containerElement.innerHTML = ''
-
-    for (const burialSiteStatus of burialSiteStatuses) {
-      const tableRowElement = document.createElement('tr')
-
-      tableRowElement.dataset.burialSiteStatusId =
-        burialSiteStatus.burialSiteStatusId.toString()
-
-      // eslint-disable-next-line no-unsanitized/property
-      tableRowElement.innerHTML = `<td>
-        <form>
-          <input name="burialSiteStatusId" type="hidden" value="${burialSiteStatus.burialSiteStatusId.toString()}" />
-          <div class="field has-addons">
-            <div class="control">
-              <input class="input" name="burialSiteStatus" type="text"
-                value="${cityssm.escapeHTML(burialSiteStatus.burialSiteStatus)}"
-                aria-label="Burial Site Status" maxlength="100" required />
-            </div>
-            <div class="control">
-              <button class="button is-success" type="submit" aria-label="Save">
-                <span class="icon"><i class="fas fa-save" aria-hidden="true"></i></span>
-              </button>
-            </div>
-          </div>
-        </form>
-      </td><td class="is-nowrap">
-        <div class="field is-grouped">
-          <div class="control">
-            ${sunrise.getMoveUpDownButtonFieldHTML(
-              'button--moveBurialSiteStatusUp',
-              'button--moveBurialSiteStatusDown',
-              false
-            )}
-          </div>
-          <div class="control">
-            <button class="button is-danger is-light button--deleteBurialSiteStatus" data-tooltip="Delete Status" type="button" aria-label="Delete Status">
-              <span class="icon"><i class="fas fa-trash" aria-hidden="true"></i></span>
-            </button>
-          </div>
-        </div>
-      </td>`
-
-      tableRowElement
-        .querySelector('form')
-        ?.addEventListener('submit', updateBurialSiteStatus)
-      ;(
-        tableRowElement.querySelector(
-          '.button--moveBurialSiteStatusUp'
-        ) as HTMLButtonElement
-      ).addEventListener('click', moveBurialSiteStatus)
-      ;(
-        tableRowElement.querySelector(
-          '.button--moveBurialSiteStatusDown'
-        ) as HTMLButtonElement
-      ).addEventListener('click', moveBurialSiteStatus)
-
-      tableRowElement
-        .querySelector('.button--deleteBurialSiteStatus')
-        ?.addEventListener('click', deleteBurialSiteStatus)
-
-      containerElement.append(tableRowElement)
-    }
-  }
-  ;(
-    document.querySelector('#form--addBurialSiteStatus') as HTMLFormElement
-  ).addEventListener('submit', (submitEvent: SubmitEvent) => {
-    submitEvent.preventDefault()
-
-    const formElement = submitEvent.currentTarget as HTMLFormElement
-
-    cityssm.postJSON(
-      `${sunrise.urlPrefix}/admin/doAddBurialSiteStatus`,
-      formElement,
-      (rawResponseJSON) => {
-        const responseJSON = rawResponseJSON as BurialSiteStatusResponseJSON
-
-        if (responseJSON.success) {
-          burialSiteStatuses = responseJSON.burialSiteStatuses
-          renderBurialSiteStatuses()
-          formElement.reset()
-          formElement.querySelector('input')?.focus()
-        } else {
-          bulmaJS.alert({
-            title: 'Error Adding Burial Site Status',
-            message: responseJSON.errorMessage ?? '',
-            contextualColorName: 'danger'
-          })
-        }
-      }
-    )
-  })
-
-  renderBurialSiteStatuses()
 })()
diff --git a/public/javascripts/workOrderMilestoneTypes.admin.d.ts b/public/javascripts/workOrderMilestoneTypes.admin.d.ts
new file mode 100644
index 00000000..cb0ff5c3
--- /dev/null
+++ b/public/javascripts/workOrderMilestoneTypes.admin.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/public/javascripts/workOrderMilestoneTypes.admin.js b/public/javascripts/workOrderMilestoneTypes.admin.js
new file mode 100644
index 00000000..99ac07cc
--- /dev/null
+++ b/public/javascripts/workOrderMilestoneTypes.admin.js
@@ -0,0 +1,178 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+(() => {
+    const sunrise = exports.sunrise;
+    let workOrderMilestoneTypes = exports.workOrderMilestoneTypes;
+    delete exports.workOrderMilestoneTypes;
+    function updateWorkOrderMilestoneType(submitEvent) {
+        submitEvent.preventDefault();
+        cityssm.postJSON(`${sunrise.urlPrefix}/admin/doUpdateWorkOrderMilestoneType`, submitEvent.currentTarget, (rawResponseJSON) => {
+            const responseJSON = rawResponseJSON;
+            if (responseJSON.success) {
+                workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes;
+                bulmaJS.alert({
+                    message: 'Work Order Milestone Type Updated Successfully',
+                    contextualColorName: 'success'
+                });
+            }
+            else {
+                bulmaJS.alert({
+                    title: 'Error Updating Work Order Milestone Type',
+                    message: responseJSON.errorMessage ?? '',
+                    contextualColorName: 'danger'
+                });
+            }
+        });
+    }
+    function deleteWorkOrderMilestoneType(clickEvent) {
+        const tableRowElement = clickEvent.currentTarget.closest('tr');
+        const workOrderMilestoneTypeId = tableRowElement.dataset.workOrderMilestoneTypeId;
+        function doDelete() {
+            cityssm.postJSON(`${sunrise.urlPrefix}/admin/doDeleteWorkOrderMilestoneType`, {
+                workOrderMilestoneTypeId
+            }, (rawResponseJSON) => {
+                const responseJSON = rawResponseJSON;
+                if (responseJSON.success) {
+                    workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes;
+                    if (workOrderMilestoneTypes.length === 0) {
+                        renderWorkOrderMilestoneTypes();
+                    }
+                    else {
+                        tableRowElement.remove();
+                    }
+                    bulmaJS.alert({
+                        message: 'Work Order Milestone Type Deleted Successfully',
+                        contextualColorName: 'success'
+                    });
+                }
+                else {
+                    bulmaJS.alert({
+                        title: 'Error Deleting Work Order Milestone Type',
+                        message: responseJSON.errorMessage ?? '',
+                        contextualColorName: 'danger'
+                    });
+                }
+            });
+        }
+        bulmaJS.confirm({
+            title: 'Delete Work Order Milestone Type',
+            message: `Are you sure you want to delete this work order milestone type?<br />
+          Note that no work orders will be removed.`,
+            messageIsHtml: true,
+            contextualColorName: 'warning',
+            okButton: {
+                text: 'Yes, Delete Work Order Milestone Type',
+                callbackFunction: doDelete
+            }
+        });
+    }
+    function moveWorkOrderMilestoneType(clickEvent) {
+        const buttonElement = clickEvent.currentTarget;
+        const tableRowElement = buttonElement.closest('tr');
+        const workOrderMilestoneTypeId = tableRowElement.dataset.workOrderMilestoneTypeId;
+        cityssm.postJSON(`${sunrise.urlPrefix}/admin/${buttonElement.dataset.direction === 'up'
+            ? 'doMoveWorkOrderMilestoneTypeUp'
+            : 'doMoveWorkOrderMilestoneTypeDown'}`, {
+            workOrderMilestoneTypeId,
+            moveToEnd: clickEvent.shiftKey ? '1' : '0'
+        }, (rawResponseJSON) => {
+            const responseJSON = rawResponseJSON;
+            if (responseJSON.success) {
+                workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes;
+                renderWorkOrderMilestoneTypes();
+            }
+            else {
+                bulmaJS.alert({
+                    title: 'Error Moving Work Order Milestone Type',
+                    message: responseJSON.errorMessage ?? '',
+                    contextualColorName: 'danger'
+                });
+            }
+        });
+    }
+    function renderWorkOrderMilestoneTypes() {
+        const containerElement = document.querySelector('#container--workOrderMilestoneTypes');
+        if (workOrderMilestoneTypes.length === 0) {
+            containerElement.innerHTML = `<tr><td colspan="2">
+          <div class="message is-warning">
+            <p class="message-body">There are no active work order milestone types.</p>
+          </div>
+          </td></tr>`;
+            return;
+        }
+        containerElement.innerHTML = '';
+        for (const workOrderMilestoneType of workOrderMilestoneTypes) {
+            const tableRowElement = document.createElement('tr');
+            tableRowElement.dataset.workOrderMilestoneTypeId =
+                workOrderMilestoneType.workOrderMilestoneTypeId.toString();
+            // eslint-disable-next-line no-unsanitized/property, no-secrets/no-secrets
+            tableRowElement.innerHTML = `<td>
+        <form>
+          <input name="workOrderMilestoneTypeId" type="hidden"
+            value="${workOrderMilestoneType.workOrderMilestoneTypeId.toString()}" />
+          <div class="field has-addons">
+            <div class="control">
+              <input class="input"
+                name="workOrderMilestoneType" type="text"
+                value="${cityssm.escapeHTML(workOrderMilestoneType.workOrderMilestoneType)}"
+                maxlength="100"
+                aria-label="Work Order Milestone Type" required />
+            </div>
+            <div class="control">
+              <button class="button is-success" type="submit" aria-label="Save">
+                <span class="icon"><i class="fas fa-save" aria-hidden="true"></i></span>
+              </button>
+            </div>
+          </div>
+        </form>
+      </td><td class="is-nowrap">
+        <div class="field is-grouped">
+          <div class="control">
+            ${sunrise.getMoveUpDownButtonFieldHTML('button--moveWorkOrderMilestoneTypeUp', 'button--moveWorkOrderMilestoneTypeDown', false)}
+          </div>
+          <div class="control">
+            <button class="button is-danger is-light button--deleteWorkOrderMilestoneType" data-tooltip="Delete Milestone Type" type="button" aria-label="Delete Milestone Type">
+              <span class="icon"><i class="fas fa-trash" aria-hidden="true"></i></span>
+            </button>
+          </div>
+        </div>
+      </td>`;
+            tableRowElement
+                .querySelector('form')
+                ?.addEventListener('submit', updateWorkOrderMilestoneType);
+            tableRowElement
+                .querySelector('.button--moveWorkOrderMilestoneTypeUp')
+                ?.addEventListener('click', moveWorkOrderMilestoneType);
+            tableRowElement
+                .querySelector('.button--moveWorkOrderMilestoneTypeDown')
+                ?.addEventListener('click', moveWorkOrderMilestoneType);
+            tableRowElement
+                .querySelector('.button--deleteWorkOrderMilestoneType')
+                ?.addEventListener('click', deleteWorkOrderMilestoneType);
+            containerElement.append(tableRowElement);
+        }
+    }
+    document
+        .querySelector('#form--addWorkOrderMilestoneType')
+        ?.addEventListener('submit', (submitEvent) => {
+        submitEvent.preventDefault();
+        const formElement = submitEvent.currentTarget;
+        cityssm.postJSON(`${sunrise.urlPrefix}/admin/doAddWorkOrderMilestoneType`, formElement, (rawResponseJSON) => {
+            const responseJSON = rawResponseJSON;
+            if (responseJSON.success) {
+                workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes;
+                renderWorkOrderMilestoneTypes();
+                formElement.reset();
+                formElement.querySelector('input')?.focus();
+            }
+            else {
+                bulmaJS.alert({
+                    title: 'Error Adding Work Order Milestone Type',
+                    message: responseJSON.errorMessage ?? '',
+                    contextualColorName: 'danger'
+                });
+            }
+        });
+    });
+    renderWorkOrderMilestoneTypes();
+})();
diff --git a/public/javascripts/workOrderMilestoneTypes.admin.ts b/public/javascripts/workOrderMilestoneTypes.admin.ts
new file mode 100644
index 00000000..ebbe408c
--- /dev/null
+++ b/public/javascripts/workOrderMilestoneTypes.admin.ts
@@ -0,0 +1,263 @@
+import type { BulmaJS } from '@cityssm/bulma-js/types.js'
+import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types.js'
+
+import type { WorkOrderMilestoneType } from '../../types/record.types.js'
+
+import type { Sunrise } from './types.js'
+
+declare const exports: {
+  sunrise: Sunrise
+
+  workOrderMilestoneTypes?: WorkOrderMilestoneType[]
+}
+
+declare const cityssm: cityssmGlobal
+declare const bulmaJS: BulmaJS
+;(() => {
+  const sunrise = exports.sunrise as Sunrise
+
+  let workOrderMilestoneTypes =
+    exports.workOrderMilestoneTypes as WorkOrderMilestoneType[]
+  delete exports.workOrderMilestoneTypes
+
+  type WorkOrderMilestoneTypeResponseJSON =
+    | {
+        success: false
+        errorMessage?: string
+      }
+    | {
+        success: true
+        workOrderMilestoneTypes: WorkOrderMilestoneType[]
+      }
+
+  function updateWorkOrderMilestoneType(submitEvent: SubmitEvent): void {
+    submitEvent.preventDefault()
+
+    cityssm.postJSON(
+      `${sunrise.urlPrefix}/admin/doUpdateWorkOrderMilestoneType`,
+      submitEvent.currentTarget,
+      (rawResponseJSON) => {
+        const responseJSON =
+          rawResponseJSON as WorkOrderMilestoneTypeResponseJSON
+
+        if (responseJSON.success) {
+          workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes
+
+          bulmaJS.alert({
+            message: 'Work Order Milestone Type Updated Successfully',
+            contextualColorName: 'success'
+          })
+        } else {
+          bulmaJS.alert({
+            title: 'Error Updating Work Order Milestone Type',
+            message: responseJSON.errorMessage ?? '',
+            contextualColorName: 'danger'
+          })
+        }
+      }
+    )
+  }
+
+  function deleteWorkOrderMilestoneType(clickEvent: Event): void {
+    const tableRowElement = (clickEvent.currentTarget as HTMLElement).closest(
+      'tr'
+    ) as HTMLTableRowElement
+
+    const workOrderMilestoneTypeId =
+      tableRowElement.dataset.workOrderMilestoneTypeId
+
+    function doDelete(): void {
+      cityssm.postJSON(
+        `${sunrise.urlPrefix}/admin/doDeleteWorkOrderMilestoneType`,
+        {
+          workOrderMilestoneTypeId
+        },
+        (rawResponseJSON) => {
+          const responseJSON =
+            rawResponseJSON as WorkOrderMilestoneTypeResponseJSON
+
+          if (responseJSON.success) {
+            workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes
+
+            if (workOrderMilestoneTypes.length === 0) {
+              renderWorkOrderMilestoneTypes()
+            } else {
+              tableRowElement.remove()
+            }
+
+            bulmaJS.alert({
+              message: 'Work Order Milestone Type Deleted Successfully',
+              contextualColorName: 'success'
+            })
+          } else {
+            bulmaJS.alert({
+              title: 'Error Deleting Work Order Milestone Type',
+              message: responseJSON.errorMessage ?? '',
+              contextualColorName: 'danger'
+            })
+          }
+        }
+      )
+    }
+
+    bulmaJS.confirm({
+      title: 'Delete Work Order Milestone Type',
+      message: `Are you sure you want to delete this work order milestone type?<br />
+          Note that no work orders will be removed.`,
+      messageIsHtml: true,
+      contextualColorName: 'warning',
+      okButton: {
+        text: 'Yes, Delete Work Order Milestone Type',
+        callbackFunction: doDelete
+      }
+    })
+  }
+
+  function moveWorkOrderMilestoneType(clickEvent: MouseEvent): void {
+    const buttonElement = clickEvent.currentTarget as HTMLButtonElement
+
+    const tableRowElement = buttonElement.closest('tr') as HTMLTableRowElement
+
+    const workOrderMilestoneTypeId =
+      tableRowElement.dataset.workOrderMilestoneTypeId
+
+    cityssm.postJSON(
+      `${sunrise.urlPrefix}/admin/${
+        buttonElement.dataset.direction === 'up'
+          ? 'doMoveWorkOrderMilestoneTypeUp'
+          : 'doMoveWorkOrderMilestoneTypeDown'
+      }`,
+      {
+        workOrderMilestoneTypeId,
+        moveToEnd: clickEvent.shiftKey ? '1' : '0'
+      },
+      (rawResponseJSON) => {
+        const responseJSON =
+          rawResponseJSON as WorkOrderMilestoneTypeResponseJSON
+
+        if (responseJSON.success) {
+          workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes
+          renderWorkOrderMilestoneTypes()
+        } else {
+          bulmaJS.alert({
+            title: 'Error Moving Work Order Milestone Type',
+            message: responseJSON.errorMessage ?? '',
+            contextualColorName: 'danger'
+          })
+        }
+      }
+    )
+  }
+
+  function renderWorkOrderMilestoneTypes(): void {
+    const containerElement = document.querySelector(
+      '#container--workOrderMilestoneTypes'
+    ) as HTMLTableSectionElement
+
+    if (workOrderMilestoneTypes.length === 0) {
+      containerElement.innerHTML = `<tr><td colspan="2">
+          <div class="message is-warning">
+            <p class="message-body">There are no active work order milestone types.</p>
+          </div>
+          </td></tr>`
+
+      return
+    }
+
+    containerElement.innerHTML = ''
+
+    for (const workOrderMilestoneType of workOrderMilestoneTypes) {
+      const tableRowElement = document.createElement('tr')
+
+      tableRowElement.dataset.workOrderMilestoneTypeId =
+        workOrderMilestoneType.workOrderMilestoneTypeId.toString()
+
+      // eslint-disable-next-line no-unsanitized/property, no-secrets/no-secrets
+      tableRowElement.innerHTML = `<td>
+        <form>
+          <input name="workOrderMilestoneTypeId" type="hidden"
+            value="${workOrderMilestoneType.workOrderMilestoneTypeId.toString()}" />
+          <div class="field has-addons">
+            <div class="control">
+              <input class="input"
+                name="workOrderMilestoneType" type="text"
+                value="${cityssm.escapeHTML(workOrderMilestoneType.workOrderMilestoneType)}"
+                maxlength="100"
+                aria-label="Work Order Milestone Type" required />
+            </div>
+            <div class="control">
+              <button class="button is-success" type="submit" aria-label="Save">
+                <span class="icon"><i class="fas fa-save" aria-hidden="true"></i></span>
+              </button>
+            </div>
+          </div>
+        </form>
+      </td><td class="is-nowrap">
+        <div class="field is-grouped">
+          <div class="control">
+            ${sunrise.getMoveUpDownButtonFieldHTML(
+              'button--moveWorkOrderMilestoneTypeUp',
+              'button--moveWorkOrderMilestoneTypeDown',
+              false
+            )}
+          </div>
+          <div class="control">
+            <button class="button is-danger is-light button--deleteWorkOrderMilestoneType" data-tooltip="Delete Milestone Type" type="button" aria-label="Delete Milestone Type">
+              <span class="icon"><i class="fas fa-trash" aria-hidden="true"></i></span>
+            </button>
+          </div>
+        </div>
+      </td>`
+
+      tableRowElement
+        .querySelector('form')
+        ?.addEventListener('submit', updateWorkOrderMilestoneType)
+
+      tableRowElement
+        .querySelector('.button--moveWorkOrderMilestoneTypeUp')
+        ?.addEventListener('click', moveWorkOrderMilestoneType)
+
+      tableRowElement
+        .querySelector('.button--moveWorkOrderMilestoneTypeDown')
+        ?.addEventListener('click', moveWorkOrderMilestoneType)
+
+      tableRowElement
+        .querySelector('.button--deleteWorkOrderMilestoneType')
+        ?.addEventListener('click', deleteWorkOrderMilestoneType)
+
+      containerElement.append(tableRowElement)
+    }
+  }
+
+  document
+    .querySelector('#form--addWorkOrderMilestoneType')
+    ?.addEventListener('submit', (submitEvent: SubmitEvent) => {
+      submitEvent.preventDefault()
+
+      const formElement = submitEvent.currentTarget as HTMLFormElement
+
+      cityssm.postJSON(
+        `${sunrise.urlPrefix}/admin/doAddWorkOrderMilestoneType`,
+        formElement,
+        (rawResponseJSON) => {
+          const responseJSON =
+            rawResponseJSON as WorkOrderMilestoneTypeResponseJSON
+
+          if (responseJSON.success) {
+            workOrderMilestoneTypes = responseJSON.workOrderMilestoneTypes
+            renderWorkOrderMilestoneTypes()
+            formElement.reset()
+            formElement.querySelector('input')?.focus()
+          } else {
+            bulmaJS.alert({
+              title: 'Error Adding Work Order Milestone Type',
+              message: responseJSON.errorMessage ?? '',
+              contextualColorName: 'danger'
+            })
+          }
+        }
+      )
+    })
+
+  renderWorkOrderMilestoneTypes()
+})()
diff --git a/public/javascripts/workOrderTypes.admin.d.ts b/public/javascripts/workOrderTypes.admin.d.ts
new file mode 100644
index 00000000..cb0ff5c3
--- /dev/null
+++ b/public/javascripts/workOrderTypes.admin.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/public/javascripts/workOrderTypes.admin.js b/public/javascripts/workOrderTypes.admin.js
new file mode 100644
index 00000000..ff2ccf0d
--- /dev/null
+++ b/public/javascripts/workOrderTypes.admin.js
@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+(() => {
+    const sunrise = exports.sunrise;
+    let workOrderTypes = exports.workOrderTypes;
+    delete exports.workOrderTypes;
+    function updateWorkOrderType(submitEvent) {
+        submitEvent.preventDefault();
+        cityssm.postJSON(`${sunrise.urlPrefix}/admin/doUpdateWorkOrderType`, submitEvent.currentTarget, (rawResponseJSON) => {
+            const responseJSON = rawResponseJSON;
+            if (responseJSON.success) {
+                workOrderTypes = responseJSON.workOrderTypes;
+                bulmaJS.alert({
+                    message: 'Work Order Type Updated Successfully',
+                    contextualColorName: 'success'
+                });
+            }
+            else {
+                bulmaJS.alert({
+                    title: 'Error Updating Work Order Type',
+                    message: responseJSON.errorMessage ?? '',
+                    contextualColorName: 'danger'
+                });
+            }
+        });
+    }
+    function deleteWorkOrderType(clickEvent) {
+        const tableRowElement = clickEvent.currentTarget.closest('tr');
+        const workOrderTypeId = tableRowElement.dataset.workOrderTypeId;
+        function doDelete() {
+            cityssm.postJSON(`${sunrise.urlPrefix}/admin/doDeleteWorkOrderType`, {
+                workOrderTypeId
+            }, (rawResponseJSON) => {
+                const responseJSON = rawResponseJSON;
+                if (responseJSON.success) {
+                    workOrderTypes = responseJSON.workOrderTypes;
+                    if (workOrderTypes.length === 0) {
+                        renderWorkOrderTypes();
+                    }
+                    else {
+                        tableRowElement.remove();
+                    }
+                    bulmaJS.alert({
+                        message: 'Work Order Type Deleted Successfully',
+                        contextualColorName: 'success'
+                    });
+                }
+                else {
+                    bulmaJS.alert({
+                        title: 'Error Deleting Work Order Type',
+                        message: responseJSON.errorMessage ?? '',
+                        contextualColorName: 'danger'
+                    });
+                }
+            });
+        }
+        bulmaJS.confirm({
+            title: 'Delete Work Order Type',
+            message: `Are you sure you want to delete this work order type?<br />
+          Note that no work orders will be removed.`,
+            messageIsHtml: true,
+            contextualColorName: 'warning',
+            okButton: {
+                text: 'Yes, Delete Work Order Type',
+                callbackFunction: doDelete
+            }
+        });
+    }
+    function moveWorkOrderType(clickEvent) {
+        const buttonElement = clickEvent.currentTarget;
+        const tableRowElement = buttonElement.closest('tr');
+        const workOrderTypeId = tableRowElement.dataset.workOrderTypeId;
+        cityssm.postJSON(`${sunrise.urlPrefix}/admin/${buttonElement.dataset.direction === 'up'
+            ? 'doMoveWorkOrderTypeUp'
+            : 'doMoveWorkOrderTypeDown'}`, {
+            workOrderTypeId,
+            moveToEnd: clickEvent.shiftKey ? '1' : '0'
+        }, (rawResponseJSON) => {
+            const responseJSON = rawResponseJSON;
+            if (responseJSON.success) {
+                workOrderTypes = responseJSON.workOrderTypes;
+                renderWorkOrderTypes();
+            }
+            else {
+                bulmaJS.alert({
+                    title: 'Error Moving Work Order Type',
+                    message: responseJSON.errorMessage ?? '',
+                    contextualColorName: 'danger'
+                });
+            }
+        });
+    }
+    function renderWorkOrderTypes() {
+        const containerElement = document.querySelector('#container--workOrderTypes');
+        if (workOrderTypes.length === 0) {
+            containerElement.innerHTML = `<tr><td colspan="2">
+          <div class="message is-warning"><p class="message-body">There are no active work order types.</p></div>
+          </td></tr>`;
+            return;
+        }
+        containerElement.innerHTML = '';
+        for (const workOrderType of workOrderTypes) {
+            const tableRowElement = document.createElement('tr');
+            tableRowElement.dataset.workOrderTypeId =
+                workOrderType.workOrderTypeId.toString();
+            // eslint-disable-next-line no-unsanitized/property
+            tableRowElement.innerHTML = `<td>
+        <form>
+          <input name="workOrderTypeId" type="hidden" value="${workOrderType.workOrderTypeId.toString()}" />
+          <div class="field has-addons">
+            <div class="control">
+              <input class="input" name="workOrderType" type="text"
+                value="${cityssm.escapeHTML(workOrderType.workOrderType ?? '')}" maxlength="100" aria-label="Work Order Type" required />
+            </div>
+            <div class="control">
+              <button class="button is-success" type="submit" aria-label="Save">
+                <span class="icon"><i class="fas fa-save" aria-hidden="true"></i></span>
+              </button>
+            </div>
+          </div>
+        </form>
+      </td><td class="is-nowrap">
+        <div class="field is-grouped">
+          <div class="control">
+            ${sunrise.getMoveUpDownButtonFieldHTML('button--moveWorkOrderTypeUp', 'button--moveWorkOrderTypeDown', false)}
+          </div>
+          <div class="control">
+            <button class="button is-danger is-light button--deleteWorkOrderType" data-tooltip="Delete Work Order Type" type="button" aria-label="Delete Work Order Type">
+              <span class="icon"><i class="fas fa-trash" aria-hidden="true"></i></span>
+            </button>
+          </div>
+        </div>
+      </td>`;
+            tableRowElement
+                .querySelector('form')
+                ?.addEventListener('submit', updateWorkOrderType);
+            tableRowElement.querySelector('.button--moveWorkOrderTypeUp').addEventListener('click', moveWorkOrderType);
+            tableRowElement.querySelector('.button--moveWorkOrderTypeDown').addEventListener('click', moveWorkOrderType);
+            tableRowElement
+                .querySelector('.button--deleteWorkOrderType')
+                ?.addEventListener('click', deleteWorkOrderType);
+            containerElement.append(tableRowElement);
+        }
+    }
+    ;
+    document.querySelector('#form--addWorkOrderType').addEventListener('submit', (submitEvent) => {
+        submitEvent.preventDefault();
+        const formElement = submitEvent.currentTarget;
+        cityssm.postJSON(`${sunrise.urlPrefix}/admin/doAddWorkOrderType`, formElement, (rawResponseJSON) => {
+            const responseJSON = rawResponseJSON;
+            if (responseJSON.success) {
+                workOrderTypes = responseJSON.workOrderTypes;
+                renderWorkOrderTypes();
+                formElement.reset();
+                formElement.querySelector('input')?.focus();
+            }
+            else {
+                bulmaJS.alert({
+                    title: 'Error Adding Work Order Type',
+                    message: responseJSON.errorMessage ?? '',
+                    contextualColorName: 'danger'
+                });
+            }
+        });
+    });
+    renderWorkOrderTypes();
+})();
diff --git a/public/javascripts/workOrderTypes.admin.ts b/public/javascripts/workOrderTypes.admin.ts
new file mode 100644
index 00000000..808159f7
--- /dev/null
+++ b/public/javascripts/workOrderTypes.admin.ts
@@ -0,0 +1,252 @@
+import type { BulmaJS } from '@cityssm/bulma-js/types.js'
+import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types.js'
+
+import type { WorkOrderType } from '../../types/record.types.js'
+
+import type { Sunrise } from './types.js'
+
+declare const exports: {
+  sunrise: Sunrise
+
+  workOrderTypes?: WorkOrderType[]
+}
+
+declare const cityssm: cityssmGlobal
+declare const bulmaJS: BulmaJS
+;(() => {
+  const sunrise = exports.sunrise as Sunrise
+
+  let workOrderTypes = exports.workOrderTypes as WorkOrderType[]
+  delete exports.workOrderTypes
+
+  type WorkOrderTypeResponseJSON =
+    | {
+        success: false
+        errorMessage?: string
+      }
+    | {
+        success: true
+        workOrderTypes: WorkOrderType[]
+      }
+
+  function updateWorkOrderType(submitEvent: SubmitEvent): void {
+    submitEvent.preventDefault()
+
+    cityssm.postJSON(
+      `${sunrise.urlPrefix}/admin/doUpdateWorkOrderType`,
+      submitEvent.currentTarget,
+      (rawResponseJSON) => {
+        const responseJSON = rawResponseJSON as WorkOrderTypeResponseJSON
+
+        if (responseJSON.success) {
+          workOrderTypes = responseJSON.workOrderTypes
+
+          bulmaJS.alert({
+            message: 'Work Order Type Updated Successfully',
+            contextualColorName: 'success'
+          })
+        } else {
+          bulmaJS.alert({
+            title: 'Error Updating Work Order Type',
+            message: responseJSON.errorMessage ?? '',
+            contextualColorName: 'danger'
+          })
+        }
+      }
+    )
+  }
+
+  function deleteWorkOrderType(clickEvent: Event): void {
+    const tableRowElement = (clickEvent.currentTarget as HTMLElement).closest(
+      'tr'
+    ) as HTMLTableRowElement
+
+    const workOrderTypeId = tableRowElement.dataset.workOrderTypeId
+
+    function doDelete(): void {
+      cityssm.postJSON(
+        `${sunrise.urlPrefix}/admin/doDeleteWorkOrderType`,
+        {
+          workOrderTypeId
+        },
+        (rawResponseJSON) => {
+          const responseJSON = rawResponseJSON as WorkOrderTypeResponseJSON
+
+          if (responseJSON.success) {
+            workOrderTypes = responseJSON.workOrderTypes
+
+            if (workOrderTypes.length === 0) {
+              renderWorkOrderTypes()
+            } else {
+              tableRowElement.remove()
+            }
+
+            bulmaJS.alert({
+              message: 'Work Order Type Deleted Successfully',
+              contextualColorName: 'success'
+            })
+          } else {
+            bulmaJS.alert({
+              title: 'Error Deleting Work Order Type',
+              message: responseJSON.errorMessage ?? '',
+              contextualColorName: 'danger'
+            })
+          }
+        }
+      )
+    }
+
+    bulmaJS.confirm({
+      title: 'Delete Work Order Type',
+      message: `Are you sure you want to delete this work order type?<br />
+          Note that no work orders will be removed.`,
+      messageIsHtml: true,
+      contextualColorName: 'warning',
+      okButton: {
+        text: 'Yes, Delete Work Order Type',
+        callbackFunction: doDelete
+      }
+    })
+  }
+
+  function moveWorkOrderType(clickEvent: MouseEvent): void {
+    const buttonElement = clickEvent.currentTarget as HTMLButtonElement
+
+    const tableRowElement = buttonElement.closest('tr') as HTMLTableRowElement
+
+    const workOrderTypeId = tableRowElement.dataset.workOrderTypeId
+
+    cityssm.postJSON(
+      `${sunrise.urlPrefix}/admin/${
+        buttonElement.dataset.direction === 'up'
+          ? 'doMoveWorkOrderTypeUp'
+          : 'doMoveWorkOrderTypeDown'
+      }`,
+      {
+        workOrderTypeId,
+        moveToEnd: clickEvent.shiftKey ? '1' : '0'
+      },
+      (rawResponseJSON) => {
+        const responseJSON = rawResponseJSON as WorkOrderTypeResponseJSON
+
+        if (responseJSON.success) {
+          workOrderTypes = responseJSON.workOrderTypes
+          renderWorkOrderTypes()
+        } else {
+          bulmaJS.alert({
+            title: 'Error Moving Work Order Type',
+            message: responseJSON.errorMessage ?? '',
+            contextualColorName: 'danger'
+          })
+        }
+      }
+    )
+  }
+
+  function renderWorkOrderTypes(): void {
+    const containerElement = document.querySelector(
+      '#container--workOrderTypes'
+    ) as HTMLTableSectionElement
+
+    if (workOrderTypes.length === 0) {
+      containerElement.innerHTML = `<tr><td colspan="2">
+          <div class="message is-warning"><p class="message-body">There are no active work order types.</p></div>
+          </td></tr>`
+
+      return
+    }
+
+    containerElement.innerHTML = ''
+
+    for (const workOrderType of workOrderTypes) {
+      const tableRowElement = document.createElement('tr')
+
+      tableRowElement.dataset.workOrderTypeId =
+        workOrderType.workOrderTypeId.toString()
+
+      // eslint-disable-next-line no-unsanitized/property
+      tableRowElement.innerHTML = `<td>
+        <form>
+          <input name="workOrderTypeId" type="hidden" value="${workOrderType.workOrderTypeId.toString()}" />
+          <div class="field has-addons">
+            <div class="control">
+              <input class="input" name="workOrderType" type="text"
+                value="${cityssm.escapeHTML(workOrderType.workOrderType ?? '')}" maxlength="100" aria-label="Work Order Type" required />
+            </div>
+            <div class="control">
+              <button class="button is-success" type="submit" aria-label="Save">
+                <span class="icon"><i class="fas fa-save" aria-hidden="true"></i></span>
+              </button>
+            </div>
+          </div>
+        </form>
+      </td><td class="is-nowrap">
+        <div class="field is-grouped">
+          <div class="control">
+            ${sunrise.getMoveUpDownButtonFieldHTML(
+              'button--moveWorkOrderTypeUp',
+              'button--moveWorkOrderTypeDown',
+              false
+            )}
+          </div>
+          <div class="control">
+            <button class="button is-danger is-light button--deleteWorkOrderType" data-tooltip="Delete Work Order Type" type="button" aria-label="Delete Work Order Type">
+              <span class="icon"><i class="fas fa-trash" aria-hidden="true"></i></span>
+            </button>
+          </div>
+        </div>
+      </td>`
+
+      tableRowElement
+        .querySelector('form')
+        ?.addEventListener('submit', updateWorkOrderType)
+      ;(
+        tableRowElement.querySelector(
+          '.button--moveWorkOrderTypeUp'
+        ) as HTMLButtonElement
+      ).addEventListener('click', moveWorkOrderType)
+      ;(
+        tableRowElement.querySelector(
+          '.button--moveWorkOrderTypeDown'
+        ) as HTMLButtonElement
+      ).addEventListener('click', moveWorkOrderType)
+
+      tableRowElement
+        .querySelector('.button--deleteWorkOrderType')
+        ?.addEventListener('click', deleteWorkOrderType)
+
+      containerElement.append(tableRowElement)
+    }
+  }
+
+  ;(
+    document.querySelector('#form--addWorkOrderType') as HTMLFormElement
+  ).addEventListener('submit', (submitEvent: SubmitEvent) => {
+    submitEvent.preventDefault()
+
+    const formElement = submitEvent.currentTarget as HTMLFormElement
+
+    cityssm.postJSON(
+      `${sunrise.urlPrefix}/admin/doAddWorkOrderType`,
+      formElement,
+      (rawResponseJSON) => {
+        const responseJSON = rawResponseJSON as WorkOrderTypeResponseJSON
+
+        if (responseJSON.success) {
+          workOrderTypes = responseJSON.workOrderTypes
+          renderWorkOrderTypes()
+          formElement.reset()
+          formElement.querySelector('input')?.focus()
+        } else {
+          bulmaJS.alert({
+            title: 'Error Adding Work Order Type',
+            message: responseJSON.errorMessage ?? '',
+            contextualColorName: 'danger'
+          })
+        }
+      }
+    )
+  })
+
+  renderWorkOrderTypes()
+})()
diff --git a/views/admin-tables.ejs b/views/admin-tables.ejs
index 1618a7d1..39b25d71 100644
--- a/views/admin-tables.ejs
+++ b/views/admin-tables.ejs
@@ -33,31 +33,24 @@
       </div>
     </div>
     
-    <div class="tabs is-boxed">
-      <ul role="presentation">
-        <li class="is-active">
-          <a href="#tab--workOrderTypes">
-            <span class="icon is-small"><i class="fas fa-table" aria-hidden="true"></i></span>
-            <span>Work Order Types</span>
-          </a>
-        </li>
-        <li>
-          <a href="#tab--workOrderMilestoneTypes">
-            <span class="icon is-small"><i class="fas fa-table" aria-hidden="true"></i></span>
-            <span>Work Order Milestone Types</span>
-          </a>
-        </li>
-        <li>
-          <a href="#tab--burialSiteStatuses">
-            <span class="icon is-small"><i class="fas fa-table" aria-hidden="true"></i></span>
-            <span>Burial Site Statuses</span>
-          </a>
-        </li>
-      </ul>
-    </div>
-    <div class="tabs-container">
-      <div id="tab--workOrderTypes">
-        <h2 class="title is-4">Work Order Types</h2>
+    <div class="panel">
+      <div class="panel-heading">
+        <div class="level is-mobile">
+          <div class="level-left">
+            <div class="level-item">
+              <button class="button is-small is-toggle-button" data-tooltip="Toggle Work Order Types" type="button" aria-label="Toggle Work Order Types">
+                <span class="icon">
+                  <i class="fas fa-plus" aria-hidden="true"></i>
+                </span>
+              </button>
+            </div>
+            <div class="level-item">
+              <h2 class="title is-5 has-text-white">Work Order Types</h2>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="panel-block is-hidden">
         <table class="table is-striped is-hoverable has-sticky-header">
           <thead>
             <tr>
@@ -86,8 +79,26 @@
           <tbody id="container--workOrderTypes"></tbody>
         </table>
       </div>
-      <div class="is-hidden" id="tab--workOrderMilestoneTypes">
-        <h2 class="title is-4">Work Order Milestone Types</h2>
+    </div>
+
+    <div class="panel">
+      <div class="panel-heading">
+        <div class="level is-mobile">
+          <div class="level-left">
+            <div class="level-item">
+              <button class="button is-small is-toggle-button" data-tooltip="Toggle Work Order Milestone Types" type="button" aria-label="Toggle Work Order Milestone Types">
+                <span class="icon">
+                  <i class="fas fa-plus" aria-hidden="true"></i>
+                </span>
+              </button>
+            </div>
+            <div class="level-item">
+              <h2 class="title is-5 has-text-white">Work Order Milestone Types</h2>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="panel-block is-block is-hidden">
         <table class="table is-striped is-hoverable has-sticky-header">
           <thead>
             <tr>
@@ -116,8 +127,26 @@
           <tbody id="container--workOrderMilestoneTypes"></tbody>
         </table>
       </div>
-      <div class="is-hidden" id="tab--burialSiteStatuses">
-        <h2 class="title is-4">Burial Site Statuses</h2>
+    </div>
+
+    <div class="panel">
+      <div class="panel-heading">
+        <div class="level is-mobile">
+          <div class="level-left">
+            <div class="level-item">
+              <button class="button is-small is-toggle-button" data-tooltip="Toggle Burial Site Statuses" type="button" aria-label="Toggle Burial Site Statuses">
+                <span class="icon">
+                  <i class="fas fa-plus" aria-hidden="true"></i>
+                </span>
+              </button>
+            </div>
+            <div class="level-item">
+              <h2 class="title is-5 has-text-white">Burial Site Statuses</h2>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="panel-block is-block is-hidden">
         <table class="table is-striped is-hoverable has-sticky-header">
           <thead>
             <tr>
@@ -160,4 +189,8 @@
 
 <script src="<%= urlPrefix %>/javascripts/tables.admin.js"></script>
 
+<script src="<%= urlPrefix %>/javascripts/burialSiteStatuses.admin.js"></script>
+<script src="<%= urlPrefix %>/javascripts/workOrderMilestoneTypes.admin.js"></script>
+<script src="<%= urlPrefix %>/javascripts/workOrderTypes.admin.js"></script>
+
 <%- include('_footerB'); -%>