diff --git a/handlers/workOrders-get/edit.js b/handlers/workOrders-get/edit.js
index 4f5bc25d..2d0e0746 100644
--- a/handlers/workOrders-get/edit.js
+++ b/handlers/workOrders-get/edit.js
@@ -1,4 +1,4 @@
-import { getLotStatuses, getWorkOrderTypes } from "../../helpers/functions.cache.js";
+import { getLotStatuses, getWorkOrderMilestoneTypes, getWorkOrderTypes } from "../../helpers/functions.cache.js";
 import * as configFunctions from "../../helpers/functions.config.js";
 import { getWorkOrder } from "../../helpers/lotOccupancyDB/getWorkOrder.js";
 export const handler = (request, response) => {
@@ -14,12 +14,14 @@ export const handler = (request, response) => {
             "/?error=workOrderIsClosed");
     }
     const workOrderTypes = getWorkOrderTypes();
+    const workOrderMilestoneTypes = getWorkOrderMilestoneTypes();
     const lotStatuses = getLotStatuses();
     response.render("workOrder-edit", {
         headTitle: "Work Order #" + workOrder.workOrderNumber,
         workOrder,
         isCreate: false,
         workOrderTypes,
+        workOrderMilestoneTypes,
         lotStatuses
     });
 };
diff --git a/handlers/workOrders-get/edit.ts b/handlers/workOrders-get/edit.ts
index c986543d..b90a287a 100644
--- a/handlers/workOrders-get/edit.ts
+++ b/handlers/workOrders-get/edit.ts
@@ -2,6 +2,7 @@ import type { RequestHandler } from "express";
 
 import {
     getLotStatuses,
+    getWorkOrderMilestoneTypes,
     getWorkOrderTypes
 } from "../../helpers/functions.cache.js";
 
@@ -30,6 +31,8 @@ export const handler: RequestHandler = (request, response) => {
 
     const workOrderTypes = getWorkOrderTypes();
 
+    const workOrderMilestoneTypes = getWorkOrderMilestoneTypes();
+
     const lotStatuses = getLotStatuses();
 
     response.render("workOrder-edit", {
@@ -37,6 +40,7 @@ export const handler: RequestHandler = (request, response) => {
         workOrder,
         isCreate: false,
         workOrderTypes,
+        workOrderMilestoneTypes,
         lotStatuses
     });
 };
diff --git a/handlers/workOrders-post/doAddWorkOrderMilestone.d.ts b/handlers/workOrders-post/doAddWorkOrderMilestone.d.ts
new file mode 100644
index 00000000..9621c611
--- /dev/null
+++ b/handlers/workOrders-post/doAddWorkOrderMilestone.d.ts
@@ -0,0 +1,3 @@
+import type { RequestHandler } from "express";
+export declare const handler: RequestHandler;
+export default handler;
diff --git a/handlers/workOrders-post/doAddWorkOrderMilestone.js b/handlers/workOrders-post/doAddWorkOrderMilestone.js
new file mode 100644
index 00000000..069dc191
--- /dev/null
+++ b/handlers/workOrders-post/doAddWorkOrderMilestone.js
@@ -0,0 +1,11 @@
+import { addWorkOrderMilestone } from "../../helpers/lotOccupancyDB/addWorkOrderMilestone.js";
+import { getWorkOrderMilestones } from "../../helpers/lotOccupancyDB/getWorkOrderMilestones.js";
+export const handler = async (request, response) => {
+    const success = addWorkOrderMilestone(request.body, request.session);
+    const workOrderMilestones = getWorkOrderMilestones(request.body.workOrderId);
+    response.json({
+        success,
+        workOrderMilestones
+    });
+};
+export default handler;
diff --git a/handlers/workOrders-post/doAddWorkOrderMilestone.ts b/handlers/workOrders-post/doAddWorkOrderMilestone.ts
new file mode 100644
index 00000000..9d931926
--- /dev/null
+++ b/handlers/workOrders-post/doAddWorkOrderMilestone.ts
@@ -0,0 +1,19 @@
+import type { RequestHandler } from "express";
+
+import { addWorkOrderMilestone } from "../../helpers/lotOccupancyDB/addWorkOrderMilestone.js";
+import { getWorkOrderMilestones } from "../../helpers/lotOccupancyDB/getWorkOrderMilestones.js";
+
+export const handler: RequestHandler = async (request, response) => {
+    const success = addWorkOrderMilestone(request.body, request.session);
+
+    const workOrderMilestones = getWorkOrderMilestones(
+        request.body.workOrderId
+    );
+
+    response.json({
+        success,
+        workOrderMilestones
+    });
+};
+
+export default handler;
diff --git a/handlers/workOrders-post/doDeleteWorkOrderMilestone.d.ts b/handlers/workOrders-post/doDeleteWorkOrderMilestone.d.ts
new file mode 100644
index 00000000..9621c611
--- /dev/null
+++ b/handlers/workOrders-post/doDeleteWorkOrderMilestone.d.ts
@@ -0,0 +1,3 @@
+import type { RequestHandler } from "express";
+export declare const handler: RequestHandler;
+export default handler;
diff --git a/handlers/workOrders-post/doDeleteWorkOrderMilestone.js b/handlers/workOrders-post/doDeleteWorkOrderMilestone.js
new file mode 100644
index 00000000..dab411dc
--- /dev/null
+++ b/handlers/workOrders-post/doDeleteWorkOrderMilestone.js
@@ -0,0 +1,11 @@
+import { deleteWorkOrderMilestone } from "../../helpers/lotOccupancyDB/deleteWorkOrderMilestone.js";
+import { getWorkOrderMilestones } from "../../helpers/lotOccupancyDB/getWorkOrderMilestones.js";
+export const handler = async (request, response) => {
+    const success = deleteWorkOrderMilestone(request.body.workOrderMilestoneId, request.session);
+    const workOrderMilestones = getWorkOrderMilestones(request.body.workOrderId);
+    response.json({
+        success,
+        workOrderMilestones
+    });
+};
+export default handler;
diff --git a/handlers/workOrders-post/doDeleteWorkOrderMilestone.ts b/handlers/workOrders-post/doDeleteWorkOrderMilestone.ts
new file mode 100644
index 00000000..008dba44
--- /dev/null
+++ b/handlers/workOrders-post/doDeleteWorkOrderMilestone.ts
@@ -0,0 +1,23 @@
+import type { RequestHandler } from "express";
+
+import { deleteWorkOrderMilestone } from "../../helpers/lotOccupancyDB/deleteWorkOrderMilestone.js";
+
+import { getWorkOrderMilestones } from "../../helpers/lotOccupancyDB/getWorkOrderMilestones.js";
+
+export const handler: RequestHandler = async (request, response) => {
+    const success = deleteWorkOrderMilestone(
+        request.body.workOrderMilestoneId,
+        request.session
+    );
+
+    const workOrderMilestones = getWorkOrderMilestones(
+        request.body.workOrderId
+    );
+
+    response.json({
+        success,
+        workOrderMilestones
+    });
+};
+
+export default handler;
diff --git a/helpers/lotOccupancyDB/deleteWorkOrderMilestone.d.ts b/helpers/lotOccupancyDB/deleteWorkOrderMilestone.d.ts
new file mode 100644
index 00000000..ad3a8c7c
--- /dev/null
+++ b/helpers/lotOccupancyDB/deleteWorkOrderMilestone.d.ts
@@ -0,0 +1,3 @@
+import type * as recordTypes from "../../types/recordTypes";
+export declare const deleteWorkOrderMilestone: (workOrderMilestoneId: number | string, requestSession: recordTypes.PartialSession) => boolean;
+export default deleteWorkOrderMilestone;
diff --git a/helpers/lotOccupancyDB/deleteWorkOrderMilestone.js b/helpers/lotOccupancyDB/deleteWorkOrderMilestone.js
new file mode 100644
index 00000000..6edef3e7
--- /dev/null
+++ b/helpers/lotOccupancyDB/deleteWorkOrderMilestone.js
@@ -0,0 +1,15 @@
+import sqlite from "better-sqlite3";
+import { lotOccupancyDB as databasePath } from "../../data/databasePaths.js";
+export const deleteWorkOrderMilestone = (workOrderMilestoneId, requestSession) => {
+    const database = sqlite(databasePath);
+    const rightNowMillis = Date.now();
+    const result = database
+        .prepare("update WorkOrderMilestones" +
+        " set recordDelete_userName = ?," +
+        " recordDelete_timeMillis = ?" +
+        " where workOrderMilestoneId = ?")
+        .run(requestSession.user.userName, rightNowMillis, workOrderMilestoneId);
+    database.close();
+    return result.changes > 0;
+};
+export default deleteWorkOrderMilestone;
diff --git a/helpers/lotOccupancyDB/deleteWorkOrderMilestone.ts b/helpers/lotOccupancyDB/deleteWorkOrderMilestone.ts
new file mode 100644
index 00000000..78e8b83e
--- /dev/null
+++ b/helpers/lotOccupancyDB/deleteWorkOrderMilestone.ts
@@ -0,0 +1,29 @@
+import sqlite from "better-sqlite3";
+
+import { lotOccupancyDB as databasePath } from "../../data/databasePaths.js";
+
+import type * as recordTypes from "../../types/recordTypes";
+
+export const deleteWorkOrderMilestone = (
+    workOrderMilestoneId: number | string,
+    requestSession: recordTypes.PartialSession
+): boolean => {
+    const database = sqlite(databasePath);
+
+    const rightNowMillis = Date.now();
+
+    const result = database
+        .prepare(
+            "update WorkOrderMilestones" +
+                " set recordDelete_userName = ?," +
+                " recordDelete_timeMillis = ?" +
+                " where workOrderMilestoneId = ?"
+        )
+        .run(requestSession.user.userName, rightNowMillis, workOrderMilestoneId);
+
+    database.close();
+
+    return result.changes > 0;
+};
+
+export default deleteWorkOrderMilestone;
diff --git a/helpers/lotOccupancyDB/getWorkOrderMilestones.js b/helpers/lotOccupancyDB/getWorkOrderMilestones.js
index 5c9fca70..05b2bbba 100644
--- a/helpers/lotOccupancyDB/getWorkOrderMilestones.js
+++ b/helpers/lotOccupancyDB/getWorkOrderMilestones.js
@@ -22,8 +22,8 @@ export const getWorkOrderMilestones = (workOrderId, connectedDatabase) => {
         " where m.recordDelete_timeMillis is null" +
         " and m.workOrderId = ?" +
         " order by" +
-        " m.workOrderMilestoneDate, m.workOrderMilestoneTime," +
         " m.workOrderMilestoneCompletionDate, m.workOrderMilestoneCompletionTime," +
+        " m.workOrderMilestoneDate, case when m.workOrderMilestoneTime = 0 then 9999 else m.workOrderMilestoneTime end," +
         " t.orderNumber, m.workOrderMilestoneId")
         .all(workOrderId);
     if (!connectedDatabase) {
diff --git a/helpers/lotOccupancyDB/getWorkOrderMilestones.ts b/helpers/lotOccupancyDB/getWorkOrderMilestones.ts
index 8d16c241..1aeeddb3 100644
--- a/helpers/lotOccupancyDB/getWorkOrderMilestones.ts
+++ b/helpers/lotOccupancyDB/getWorkOrderMilestones.ts
@@ -37,8 +37,8 @@ export const getWorkOrderMilestones = (
                 " where m.recordDelete_timeMillis is null" +
                 " and m.workOrderId = ?" +
                 " order by" +
-                " m.workOrderMilestoneDate, m.workOrderMilestoneTime," +
                 " m.workOrderMilestoneCompletionDate, m.workOrderMilestoneCompletionTime," +
+                " m.workOrderMilestoneDate, case when m.workOrderMilestoneTime = 0 then 9999 else m.workOrderMilestoneTime end," +
                 " t.orderNumber, m.workOrderMilestoneId"
         )
         .all(workOrderId);
diff --git a/public-typescript/workOrderEdit.js b/public-typescript/workOrderEdit.js
index f7e294e6..507dc5e2 100644
--- a/public-typescript/workOrderEdit.js
+++ b/public-typescript/workOrderEdit.js
@@ -594,6 +594,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
     if (!isCreate) {
         let workOrderMilestones = exports.workOrderMilestones;
         delete exports.workOrderMilestones;
+        const processMilestoneResponse = (responseJSON) => {
+            if (responseJSON.success) {
+                workOrderMilestones = responseJSON.workOrderMilestones;
+                renderMilestones();
+            }
+            else {
+                bulmaJS.alert({
+                    title: "Error Reopening Milestone",
+                    message: responseJSON.errorMessage,
+                    contextualColorName: "danger"
+                });
+            }
+        };
         const completeMilestone = (clickEvent) => {
             clickEvent.preventDefault();
             const currentDateString = cityssm.dateToString(new Date());
@@ -606,20 +619,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 cityssm.postJSON(urlPrefix + "/workOrders/doCompleteWorkOrderMilestone", {
                     workOrderId,
                     workOrderMilestoneId
-                }, (responseJSON) => {
-                    if (responseJSON.success) {
-                        workOrderMilestones =
-                            responseJSON.workOrderMilestones;
-                        renderMilestones();
-                    }
-                    else {
-                        bulmaJS.alert({
-                            title: "Error Completing Milestone",
-                            message: responseJSON.errorMessage,
-                            contextualColorName: "danger"
-                        });
-                    }
-                });
+                }, processMilestoneResponse);
             };
             bulmaJS.confirm({
                 title: "Complete Milestone",
@@ -643,20 +643,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 cityssm.postJSON(urlPrefix + "/workOrders/doReopenWorkOrderMilestone", {
                     workOrderId,
                     workOrderMilestoneId
-                }, (responseJSON) => {
-                    if (responseJSON.success) {
-                        workOrderMilestones =
-                            responseJSON.workOrderMilestones;
-                        renderMilestones();
-                    }
-                    else {
-                        bulmaJS.alert({
-                            title: "Error Reopening Milestone",
-                            message: responseJSON.errorMessage,
-                            contextualColorName: "danger"
-                        });
-                    }
-                });
+                }, processMilestoneResponse);
             };
             bulmaJS.confirm({
                 title: "Reopen Milestone",
@@ -670,6 +657,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
         };
         const deleteMilestone = (clickEvent) => {
             clickEvent.preventDefault();
+            const workOrderMilestoneId = clickEvent.currentTarget.closest(".container--milestone").dataset.workOrderMilestoneId;
+            const doDelete = () => {
+                cityssm.postJSON(urlPrefix + "/workOrders/doDeleteWorkOrderMilestone", {
+                    workOrderMilestoneId,
+                    workOrderId
+                }, processMilestoneResponse);
+            };
+            bulmaJS.confirm({
+                title: "Delete Milestone",
+                message: "Are you sure you want to delete this milestone?",
+                contextualColorName: "warning",
+                okButton: {
+                    text: "Yes, Delete Milestone",
+                    callbackFunction: doDelete
+                }
+            });
+        };
+        const editMilestone = (clickEvent) => {
+            clickEvent.preventDefault();
         };
         const renderMilestones = () => {
             const milestonesPanelElement = document.querySelector("#panel--milestones");
@@ -705,6 +711,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
                                     "</strong><br />"
                                 : "") +
                             milestone.workOrderMilestoneDateString +
+                            (milestone.workOrderMilestoneTime
+                                ? " " + milestone.workOrderMilestoneTimeString
+                                : "") +
                             "<br />" +
                             '<span class="is-size-7">' +
                             cityssm.escapeHTML(milestone.workOrderMilestoneDescription) +
@@ -723,9 +732,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
                                     ? '<a class="dropdown-item button--reopenMilestone" href="#">' +
                                         '<span class="icon is-small"><i class="fas fa-times" aria-hidden="true"></i></span>' +
                                         " <span>Reopen Milestone</span>" +
-                                        "</a>" +
-                                        '<hr class="dropdown-divider" />'
-                                    : "") +
+                                        "</a>"
+                                    : '<a class="dropdown-item button--editMilestone" href="#">' +
+                                        '<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' +
+                                        " <span>Edit Milestone</span>" +
+                                        "</a>") +
+                                '<hr class="dropdown-divider" />' +
                                 '<a class="dropdown-item button--deleteMilestone" href="#">' +
                                 '<span class="icon is-small"><i class="fas fa-trash has-text-danger" aria-hidden="true"></i></span>' +
                                 " <span>Delete Milestone</span>" +
@@ -741,6 +753,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
                         .addEventListener("click", reopenMilestone);
                 }
                 else {
+                    panelBlockElement
+                        .querySelector(".button--editMilestone")
+                        .addEventListener("click", editMilestone);
                     panelBlockElement
                         .querySelector(".button--completeMilestone")
                         .addEventListener("click", completeMilestone);
@@ -753,5 +768,42 @@ Object.defineProperty(exports, "__esModule", { value: true });
             bulmaJS.init(milestonesPanelElement);
         };
         renderMilestones();
+        document
+            .querySelector("#button--addMilestone")
+            .addEventListener("click", () => {
+            let addCloseModalFunction;
+            const doAdd = (submitEvent) => {
+                submitEvent.preventDefault();
+                cityssm.postJSON(urlPrefix + "/workOrders/doAddWorkOrderMilestone", submitEvent.currentTarget, (responseJSON) => {
+                    processMilestoneResponse(responseJSON);
+                    if (responseJSON.success) {
+                        addCloseModalFunction();
+                    }
+                });
+            };
+            cityssm.openHtmlModal("workOrder-addMilestone", {
+                onshow: (modalElement) => {
+                    modalElement.querySelector("#milestoneAdd--workOrderId").value = workOrderId;
+                    const milestoneTypeElement = modalElement.querySelector("#milestoneAdd--workOrderMilestoneTypeId");
+                    for (const milestoneType of exports.workOrderMilestoneTypes) {
+                        const optionElement = document.createElement("option");
+                        optionElement.value =
+                            milestoneType.workOrderMilestoneTypeId.toString();
+                        optionElement.textContent =
+                            milestoneType.workOrderMilestoneType;
+                        milestoneTypeElement.append(optionElement);
+                    }
+                    modalElement.querySelector("#milestoneAdd--workOrderMilestoneDateString").valueAsDate = new Date();
+                },
+                onshown: (modalElement, closeModalFunction) => {
+                    addCloseModalFunction = closeModalFunction;
+                    bulmaJS.toggleHtmlClipped();
+                    modalElement.querySelector("form").addEventListener("submit", doAdd);
+                },
+                onremoved: () => {
+                    bulmaJS.toggleHtmlClipped();
+                }
+            });
+        });
     }
 })();
diff --git a/public-typescript/workOrderEdit.ts b/public-typescript/workOrderEdit.ts
index 619384dc..4a24d639 100644
--- a/public-typescript/workOrderEdit.ts
+++ b/public-typescript/workOrderEdit.ts
@@ -6,6 +6,7 @@ import type { BulmaJS } from "@cityssm/bulma-js/types";
 import type * as globalTypes from "../types/globalTypes";
 import type * as recordTypes from "../types/recordTypes";
 import { response } from "express";
+import { closeDelimiter } from "ejs";
 
 declare const cityssm: cityssmGlobal;
 declare const bulmaJS: BulmaJS;
@@ -844,6 +845,23 @@ declare const bulmaJS: BulmaJS;
             exports.workOrderMilestones as recordTypes.WorkOrderMilestone[];
         delete exports.workOrderMilestones;
 
+        const processMilestoneResponse = (responseJSON: {
+            success: boolean;
+            errorMessage?: string;
+            workOrderMilestones?: recordTypes.WorkOrderMilestone[];
+        }) => {
+            if (responseJSON.success) {
+                workOrderMilestones = responseJSON.workOrderMilestones;
+                renderMilestones();
+            } else {
+                bulmaJS.alert({
+                    title: "Error Reopening Milestone",
+                    message: responseJSON.errorMessage,
+                    contextualColorName: "danger"
+                });
+            }
+        };
+
         const completeMilestone = (clickEvent: Event) => {
             clickEvent.preventDefault();
 
@@ -874,23 +892,7 @@ declare const bulmaJS: BulmaJS;
                         workOrderId,
                         workOrderMilestoneId
                     },
-                    (responseJSON: {
-                        success: boolean;
-                        errorMessage?: string;
-                        workOrderMilestones?: recordTypes.WorkOrderMilestone[];
-                    }) => {
-                        if (responseJSON.success) {
-                            workOrderMilestones =
-                                responseJSON.workOrderMilestones;
-                            renderMilestones();
-                        } else {
-                            bulmaJS.alert({
-                                title: "Error Completing Milestone",
-                                message: responseJSON.errorMessage,
-                                contextualColorName: "danger"
-                            });
-                        }
-                    }
+                    processMilestoneResponse
                 );
             };
 
@@ -927,23 +929,7 @@ declare const bulmaJS: BulmaJS;
                         workOrderId,
                         workOrderMilestoneId
                     },
-                    (responseJSON: {
-                        success: boolean;
-                        errorMessage?: string;
-                        workOrderMilestones?: recordTypes.WorkOrderMilestone[];
-                    }) => {
-                        if (responseJSON.success) {
-                            workOrderMilestones =
-                                responseJSON.workOrderMilestones;
-                            renderMilestones();
-                        } else {
-                            bulmaJS.alert({
-                                title: "Error Reopening Milestone",
-                                message: responseJSON.errorMessage,
-                                contextualColorName: "danger"
-                            });
-                        }
-                    }
+                    processMilestoneResponse
                 );
             };
 
@@ -961,6 +947,37 @@ declare const bulmaJS: BulmaJS;
 
         const deleteMilestone = (clickEvent: Event) => {
             clickEvent.preventDefault();
+
+            const workOrderMilestoneId = (
+                (clickEvent.currentTarget as HTMLElement).closest(
+                    ".container--milestone"
+                ) as HTMLElement
+            ).dataset.workOrderMilestoneId;
+
+            const doDelete = () => {
+                cityssm.postJSON(
+                    urlPrefix + "/workOrders/doDeleteWorkOrderMilestone",
+                    {
+                        workOrderMilestoneId,
+                        workOrderId
+                    },
+                    processMilestoneResponse
+                );
+            };
+
+            bulmaJS.confirm({
+                title: "Delete Milestone",
+                message: "Are you sure you want to delete this milestone?",
+                contextualColorName: "warning",
+                okButton: {
+                    text: "Yes, Delete Milestone",
+                    callbackFunction: doDelete
+                }
+            });
+        };
+
+        const editMilestone = (clickEvent: Event) => {
+            clickEvent.preventDefault();
         };
 
         const renderMilestones = () => {
@@ -1009,6 +1026,9 @@ declare const bulmaJS: BulmaJS;
                               "</strong><br />"
                             : "") +
                         milestone.workOrderMilestoneDateString +
+                        (milestone.workOrderMilestoneTime
+                            ? " " + milestone.workOrderMilestoneTimeString
+                            : "") +
                         "<br />" +
                         '<span class="is-size-7">' +
                         cityssm.escapeHTML(
@@ -1029,9 +1049,12 @@ declare const bulmaJS: BulmaJS;
                                 ? '<a class="dropdown-item button--reopenMilestone" href="#">' +
                                   '<span class="icon is-small"><i class="fas fa-times" aria-hidden="true"></i></span>' +
                                   " <span>Reopen Milestone</span>" +
-                                  "</a>" +
-                                  '<hr class="dropdown-divider" />'
-                                : "") +
+                                  "</a>"
+                                : '<a class="dropdown-item button--editMilestone" href="#">' +
+                                  '<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' +
+                                  " <span>Edit Milestone</span>" +
+                                  "</a>") +
+                            '<hr class="dropdown-divider" />' +
                             '<a class="dropdown-item button--deleteMilestone" href="#">' +
                             '<span class="icon is-small"><i class="fas fa-trash has-text-danger" aria-hidden="true"></i></span>' +
                             " <span>Delete Milestone</span>" +
@@ -1047,6 +1070,10 @@ declare const bulmaJS: BulmaJS;
                         .querySelector(".button--reopenMilestone")
                         .addEventListener("click", reopenMilestone);
                 } else {
+                    panelBlockElement
+                        .querySelector(".button--editMilestone")
+                        .addEventListener("click", editMilestone);
+
                     panelBlockElement
                         .querySelector(".button--completeMilestone")
                         .addEventListener("click", completeMilestone);
@@ -1063,5 +1090,71 @@ declare const bulmaJS: BulmaJS;
         };
 
         renderMilestones();
+
+        document
+            .querySelector("#button--addMilestone")
+            .addEventListener("click", () => {
+                let addCloseModalFunction: () => void;
+
+                const doAdd = (submitEvent: SubmitEvent) => {
+                    submitEvent.preventDefault();
+
+                    cityssm.postJSON(
+                        urlPrefix + "/workOrders/doAddWorkOrderMilestone",
+                        submitEvent.currentTarget,
+                        (responseJSON: {
+                            success: boolean;
+                            errorMessage?: string;
+                            workOrderMilestones?: recordTypes.WorkOrderMilestone[];
+                        }) => {
+                            processMilestoneResponse(responseJSON);
+
+                            if (responseJSON.success) {
+                                addCloseModalFunction();
+                            }
+                        }
+                    );
+                };
+
+                cityssm.openHtmlModal("workOrder-addMilestone", {
+                    onshow: (modalElement) => {
+                        (
+                            modalElement.querySelector(
+                                "#milestoneAdd--workOrderId"
+                            ) as HTMLInputElement
+                        ).value = workOrderId;
+
+                        const milestoneTypeElement = modalElement.querySelector(
+                            "#milestoneAdd--workOrderMilestoneTypeId"
+                        ) as HTMLSelectElement;
+
+                        for (const milestoneType of exports.workOrderMilestoneTypes as recordTypes.WorkOrderMilestoneType[]) {
+                            const optionElement =
+                                document.createElement("option");
+
+                            optionElement.value =
+                                milestoneType.workOrderMilestoneTypeId.toString();
+                            optionElement.textContent =
+                                milestoneType.workOrderMilestoneType;
+
+                            milestoneTypeElement.append(optionElement);
+                        }
+
+                        (
+                            modalElement.querySelector(
+                                "#milestoneAdd--workOrderMilestoneDateString"
+                            ) as HTMLInputElement
+                        ).valueAsDate = new Date();
+                    },
+                    onshown: (modalElement, closeModalFunction) => {
+                        addCloseModalFunction = closeModalFunction;
+                        bulmaJS.toggleHtmlClipped();
+                        modalElement.querySelector("form").addEventListener("submit", doAdd);
+                    },
+                    onremoved: () => {
+                        bulmaJS.toggleHtmlClipped();
+                    }
+                });
+            });
     }
 })();
diff --git a/public/html/workOrder-addMilestone.html b/public/html/workOrder-addMilestone.html
new file mode 100644
index 00000000..ec1af450
--- /dev/null
+++ b/public/html/workOrder-addMilestone.html
@@ -0,0 +1,58 @@
+<div class="modal">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+        <header class="modal-card-head">
+            <h3 class="modal-card-title">
+                Add Milestone
+            </h3>
+            <button class="delete is-close-modal-button" aria-label="close" type="button"></button>
+        </header>
+        <section class="modal-card-body">
+            <form id="form--milestoneAdd">
+                <input id="milestoneAdd--workOrderId" name="workOrderId" type="hidden" value="" />
+
+                <div class="field">
+                    <label class="label" for="milestoneAdd--workOrderMilestoneTypeId">Milestone Type</label>
+                    <div class="control">
+                        <div class="select is-fullwidth">
+                            <select id="milestoneAdd--workOrderMilestoneTypeId" name="workOrderMilestoneTypeId">
+                                <option value="">(No Milestone Type)</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="columns">
+                    <div class="column">
+                        <div class="field">
+                            <label class="label" for="milestoneAdd--workOrderMilestoneDateString">Milestone Date</label>
+                            <div class="control">
+                                <input class="input" id="milestoneAdd--workOrderMilestoneDateString" name="workOrderMilestoneDateString" type="date" required />
+                            </div>
+                        </div>
+                    </div>
+                    <div class="column">
+                        <div class="field">
+                            <label class="label" for="milestoneAdd--workOrderMilestoneTimeString">Milestone Time</label>
+                            <div class="control">
+                                <input class="input" id="milestoneAdd--workOrderMilestoneTimeString" name="workOrderMilestoneTimeString" type="time" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="field">
+                    <label class="label" for="milestoneAdd--workOrderMilestoneDescription">Description</label>
+                    <div class="control">
+                        <textarea class="textarea" id="milestoneAdd--workOrderMilestoneDescription" name="workOrderMilestoneDescription"></textarea>
+                    </div>
+                </div>
+            </form>
+        </section>
+        <footer class="modal-card-foot justify-right">
+            <button class="button is-success" type="submit" form="form--milestoneAdd">
+                <span class="icon"><i class="fas fa-plus" aria-hidden="true"></i></span>
+                <span>Add Milestone</span>
+            </button>
+            <button class="button is-close-modal-button" type="button">Cancel</button>
+        </footer>
+    </div>
+</div>
\ No newline at end of file
diff --git a/public/javascripts/workOrderEdit.min.js b/public/javascripts/workOrderEdit.min.js
index d9671d1f..c4479885 100644
--- a/public/javascripts/workOrderEdit.min.js
+++ b/public/javascripts/workOrderEdit.min.js
@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const e=exports.los,t=document.querySelector("main").dataset.urlPrefix,s=document.querySelector("#workOrderEdit--workOrderId").value,o=""===s;if(document.querySelector("#form--workOrderEdit").addEventListener("submit",e=>{e.preventDefault(),cityssm.postJSON(t+"/workOrders/"+(o?"doCreateWorkOrder":"doUpdateWorkOrder"),e.currentTarget,e=>{e.success?o?window.location.href=t+"/workOrders/"+e.workOrderId+"/edit":bulmaJS.alert({message:"Work Order Updated Successfully",contextualColorName:"success"}):bulmaJS.alert({title:"Error Updating Work Order",message:e.errorMessage,contextualColorName:"danger"})})}),!o){let o=exports.workOrderLots;delete exports.workOrderLots;let a=exports.workOrderLotOccupancies;delete exports.workOrderLotOccupancies;const r=e=>{const o=e.currentTarget.closest(".container--lotOccupancy").dataset.lotOccupancyId;bulmaJS.confirm({title:"Delete "+exports.aliases.lot+" "+exports.aliases.occupancy+" Relationship",message:"Are you sure you want to remove the relationship to this "+exports.aliases.lot.toLowerCase()+" "+exports.aliases.occupancy.toLowerCase()+" record from this work order?  Note that the record will remain.",contextualColorName:"warning",okButton:{text:"Yes, Delete Relationship",callbackFunction:()=>{cityssm.postJSON(t+"/workOrders/doDeleteWorkOrderLotOccupancy",{workOrderId:s,lotOccupancyId:o},e=>{e.success?(a=e.workOrderLotOccupancies,u()):bulmaJS.alert({title:"Error Deleting Relationship",message:e.errorMessage,contextualColorName:"danger"})})}}})},c=(e,a)=>{cityssm.postJSON(t+"/workOrders/doAddWorkOrderLot",{workOrderId:s,lotId:e},e=>{e.success?(o=e.workOrderLots,u()):bulmaJS.alert({title:"Error Adding "+exports.aliases.lot,message:e.errorMessage,contextualColorName:"danger"}),a&&a(e.success)})},n=(e,o)=>{cityssm.postJSON(t+"/workOrders/doAddWorkOrderLotOccupancy",{workOrderId:s,lotOccupancyId:e},e=>{e.success?(a=e.workOrderLotOccupancies,u()):bulmaJS.alert({title:"Error Adding "+exports.aliases.occupancy,message:e.errorMessage,contextualColorName:"danger"}),o&&o(e.success)})},l=e=>{const t=e.currentTarget.dataset.lotId;c(t)},i=()=>{const e=document.querySelector("#container--lotOccupancies");if(document.querySelector(".tabs a[href='#relatedTab--lotOccupancies'] .tag").textContent=a.length.toString(),0===a.length)return void(e.innerHTML='<div class="message is-info"><p class="message-body">There are no '+exports.aliases.occupancies.toLowerCase()+" associated with this work order.</p></div>");e.innerHTML='<table class="table is-fullwidth is-striped is-hoverable"><thead><tr><th class="has-width-1"></th><th>'+exports.aliases.occupancy+" Type</th><th>"+exports.aliases.lot+"</th><th>Start Date</th><th>End Date</th><th>"+exports.aliases.occupants+'</th><th class="has-width-1"></th></tr></thead><tbody></tbody></table>';const s=cityssm.dateToString(new Date);for(const c of a){const a=document.createElement("tr");a.className="container--lotOccupancy",a.dataset.lotOccupancyId=c.lotOccupancyId.toString();const n=!(c.occupancyEndDate&&c.occupancyEndDateString<s),i=c.lotId&&o.some(e=>c.lotId===e.lotId);a.innerHTML='<td class="has-text-centered">'+(n?'<i class="fas fa-play" title="Current '+cityssm.escapeHTML(exports.aliases.occupancy)+'"></i>':'<i class="fas fa-stop" title="Previous '+cityssm.escapeHTML(exports.aliases.occupancy)+'"></i>')+'</td><td><a class="has-text-weight-bold" href="'+cityssm.escapeHTML(t)+"/lotOccupancies/"+c.lotOccupancyId+'">'+cityssm.escapeHTML(c.occupancyType)+"</a></td>",c.lotId?a.insertAdjacentHTML("beforeend","<td>"+cityssm.escapeHTML(c.lotName)+(i?"":' <button class="button is-small is-light is-success button--addLot" data-lot-id="'+c.lotId+'" data-tooltip="Add '+cityssm.escapeHTML(exports.aliases.lot)+'" aria-label="Add '+cityssm.escapeHTML(exports.aliases.lot)+'" type="button"><i class="fas fa-plus" aria-hidden="true"></i></button>')+"</td>"):a.insertAdjacentHTML("beforeend",'<td><span class="has-text-grey">(No '+exports.aliases.lot+")</span></td>"),a.insertAdjacentHTML("beforeend","<td>"+c.occupancyStartDateString+"</td><td>"+(c.occupancyEndDate?c.occupancyEndDateString:'<span class="has-text-grey">(No End Date)</span>')+"</td><td>"+(0===c.lotOccupancyOccupants.length?'<span class="has-text-grey">(No '+cityssm.escapeHTML(exports.aliases.occupants)+")</span>":cityssm.escapeHTML(c.lotOccupancyOccupants[0].occupantName)+(c.lotOccupancyOccupants.length>1?" plus "+(c.lotOccupancyOccupants.length-1):""))+'</td><td><button class="button is-small is-light is-danger button--deleteLotOccupancy" data-tooltip="Delete Relationship" type="button"><i class="fas fa-trash" aria-hidden="true"></i></button></td>'),c.lotId&&!i&&a.querySelector(".button--addLot").addEventListener("click",l),a.querySelector(".button--deleteLotOccupancy").addEventListener("click",r),e.querySelector("tbody").append(a)}},d=e=>{const a=e.currentTarget.closest(".container--lot").dataset.lotId;bulmaJS.confirm({title:"Delete "+exports.aliases.lot+" "+exports.aliases.occupancy+" Relationship",message:"Are you sure you want to remove the relationship to this "+exports.aliases.lot.toLowerCase()+" "+exports.aliases.occupancy.toLowerCase()+" record from this work order?  Note that the record will remain.",contextualColorName:"warning",okButton:{text:"Yes, Delete Relationship",callbackFunction:()=>{cityssm.postJSON(t+"/workOrders/doDeleteWorkOrderLot",{workOrderId:s,lotId:a},e=>{e.success?(o=e.workOrderLots,u()):bulmaJS.alert({title:"Error Deleting Relationship",message:e.errorMessage,contextualColorName:"danger"})})}}})},p=()=>{const e=document.querySelector("#container--lots");if(document.querySelector(".tabs a[href='#relatedTab--lots'] .tag").textContent=o.length.toString(),0!==o.length){e.innerHTML='<table class="table is-fullwidth is-striped is-hoverable"><thead><tr><th>'+exports.aliases.lot+"</th><th>"+exports.aliases.map+"</th><th>"+exports.aliases.lot+' Type</th><th>Status</th><th class="has-width-1"></th></tr></thead><tbody></tbody></table>';for(const s of o){const o=document.createElement("tr");o.className="container--lot",o.dataset.lotId=s.lotId.toString(),o.innerHTML='<td><a class="has-text-weight-bold" href="'+cityssm.escapeHTML(t)+"/lots/"+s.lotId+'">'+cityssm.escapeHTML(s.lotName)+"</a></td><td>"+cityssm.escapeHTML(s.mapName)+"</td><td>"+cityssm.escapeHTML(s.lotType)+"</td><td>"+cityssm.escapeHTML(s.lotStatus)+'</td><td><button class="button is-small is-light is-danger button--deleteLot" data-tooltip="Delete Relationship" type="button"><i class="fas fa-trash" aria-hidden="true"></i></button></td>',o.querySelector(".button--deleteLot").addEventListener("click",d),e.querySelector("tbody").append(o)}}else e.innerHTML='<div class="message is-info"><p class="message-body">There are no '+exports.aliases.lots.toLowerCase()+" associated with this work order.</p></div>"},u=()=>{i(),p()};u(),document.querySelector("#button--addLotOccupancy").addEventListener("click",()=>{let o,a;const r=e=>{const t=e.currentTarget.closest("tr"),s=t.dataset.lotOccupancyId;n(s,e=>{e&&t.remove()})},c=e=>{e&&e.preventDefault(),a.innerHTML='<p class="has-text-centered has-text-grey-dark"><i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />Searching...</p>',cityssm.postJSON(t+"/lotOccupancies/doSearchLotOccupancies",o,e=>{if(0!==e.lotOccupancies.length){a.innerHTML='<table class="table is-fullwidth is-striped is-hoverable"><thead><tr><th class="has-width-1"></th><th>'+exports.aliases.occupancy+" Type</th><th>"+exports.aliases.lot+"</th><th>Start Date</th><th>End Date</th><th>"+exports.aliases.occupants+"</th></tr></thead><tbody></tbody></table>";for(const t of e.lotOccupancies){const e=document.createElement("tr");e.className="container--lotOccupancy",e.dataset.lotOccupancyId=t.lotOccupancyId.toString(),e.innerHTML='<td class="has-text-centered"><button class="button is-small is-success button--addLotOccupancy" data-tooltip="Add" type="button" aria-label="Add"><i class="fas fa-plus" aria-hidden="true"></i></button></td><td class="has-text-weight-bold">'+cityssm.escapeHTML(t.occupancyType)+"</td>",t.lotId?e.insertAdjacentHTML("beforeend","<td>"+cityssm.escapeHTML(t.lotName)+"</td>"):e.insertAdjacentHTML("beforeend",'<td><span class="has-text-grey">(No '+exports.aliases.lot+")</span></td>"),e.insertAdjacentHTML("beforeend","<td>"+t.occupancyStartDateString+"</td><td>"+(t.occupancyEndDate?t.occupancyEndDateString:'<span class="has-text-grey">(No End Date)</span>')+"</td><td>"+(0===t.lotOccupancyOccupants.length?'<span class="has-text-grey">(No '+cityssm.escapeHTML(exports.aliases.occupants)+")</span>":cityssm.escapeHTML(t.lotOccupancyOccupants[0].occupantName)+(t.lotOccupancyOccupants.length>1?" plus "+(t.lotOccupancyOccupants.length-1):""))+"</td>"),e.querySelector(".button--addLotOccupancy").addEventListener("click",r),a.querySelector("tbody").append(e)}}else a.innerHTML='<div class="message is-info"><p class="message-body">There are no records that meet the search criteria.</p></div>'})};cityssm.openHtmlModal("workOrder-addLotOccupancy",{onshow:t=>{e.populateAliases(t),o=t.querySelector("form"),a=t.querySelector("#resultsContainer--lotOccupancyAdd"),t.querySelector("#lotOccupancySearch--notWorkOrderId").value=s,t.querySelector("#lotOccupancySearch--occupancyEffectiveDateString").value=document.querySelector("#workOrderEdit--workOrderOpenDateString").value,c()},onshown:e=>{bulmaJS.toggleHtmlClipped(),e.querySelector("#lotOccupancySearch--occupantName").addEventListener("change",c),e.querySelector("#lotOccupancySearch--lotName").addEventListener("change",c),o.addEventListener("submit",c)},onremoved:()=>{bulmaJS.toggleHtmlClipped()}})}),document.querySelector("#button--addLot").addEventListener("click",()=>{let o,a;const r=e=>{const t=e.currentTarget.closest("tr"),s=t.dataset.lotId;c(s,e=>{e&&t.remove()})},n=e=>{e&&e.preventDefault(),a.innerHTML='<p class="has-text-centered has-text-grey-dark"><i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />Searching...</p>',cityssm.postJSON(t+"/lots/doSearchLots",o,e=>{if(0!==e.lots.length){a.innerHTML='<table class="table is-fullwidth is-striped is-hoverable"><thead><tr><th class="has-width-1"></th><th>'+exports.aliases.lot+"</th><th>"+exports.aliases.map+"</th><th>"+exports.aliases.lot+" Type</th><th>Status</th></tr></thead><tbody></tbody></table>";for(const t of e.lots){const e=document.createElement("tr");e.className="container--lot",e.dataset.lotId=t.lotId.toString(),e.innerHTML='<td class="has-text-centered"><button class="button is-small is-success button--addLot" data-tooltip="Add" type="button" aria-label="Add"><i class="fas fa-plus" aria-hidden="true"></i></button></td><td class="has-text-weight-bold">'+cityssm.escapeHTML(t.lotName)+"</td><td>"+cityssm.escapeHTML(t.mapName)+"</td><td>"+cityssm.escapeHTML(t.lotType)+"</td><td>"+cityssm.escapeHTML(t.lotStatus)+"</td>",e.querySelector(".button--addLot").addEventListener("click",r),a.querySelector("tbody").append(e)}}else a.innerHTML='<div class="message is-info"><p class="message-body">There are no records that meet the search criteria.</p></div>'})};cityssm.openHtmlModal("workOrder-addLot",{onshow:t=>{e.populateAliases(t),o=t.querySelector("form"),a=t.querySelector("#resultsContainer--lotAdd"),t.querySelector("#lotSearch--notWorkOrderId").value=s;const r=t.querySelector("#lotSearch--lotStatusId");for(const e of exports.lotStatuses){const t=document.createElement("option");t.value=e.lotStatusId.toString(),t.textContent=e.lotStatus,r.append(t)}n()},onshown:e=>{bulmaJS.toggleHtmlClipped(),e.querySelector("#lotSearch--lotName").addEventListener("change",n),e.querySelector("#lotSearch--lotStatusId").addEventListener("change",n),o.addEventListener("submit",n)},onremoved:()=>{bulmaJS.toggleHtmlClipped()}})})}if(!o){let e=exports.workOrderMilestones;delete exports.workOrderMilestones;const o=o=>{o.preventDefault();const a=cityssm.dateToString(new Date),r=Number.parseInt(o.currentTarget.closest(".container--milestone").dataset.workOrderMilestoneId,10),n=e.find(e=>e.workOrderMilestoneId===r);bulmaJS.confirm({title:"Complete Milestone",message:"Are you sure you want to complete this milestone?"+(n.workOrderMilestoneDateString>a?"<br /><strong>Note that this milestone is expected to be completed in the future.</strong>":""),messageIsHtml:!0,contextualColorName:"warning",okButton:{text:"Yes, Complete Milestone",callbackFunction:()=>{cityssm.postJSON(t+"/workOrders/doCompleteWorkOrderMilestone",{workOrderId:s,workOrderMilestoneId:r},t=>{t.success?(e=t.workOrderMilestones,c()):bulmaJS.alert({title:"Error Completing Milestone",message:t.errorMessage,contextualColorName:"danger"})})}}})},a=o=>{o.preventDefault();const a=o.currentTarget.closest(".container--milestone").dataset.workOrderMilestoneId;bulmaJS.confirm({title:"Reopen Milestone",message:"Are you sure you want to remove the completion status from this milestone, and reopen it?",contextualColorName:"warning",okButton:{text:"Yes, Reopen Milestone",callbackFunction:()=>{cityssm.postJSON(t+"/workOrders/doReopenWorkOrderMilestone",{workOrderId:s,workOrderMilestoneId:a},t=>{t.success?(e=t.workOrderMilestones,c()):bulmaJS.alert({title:"Error Reopening Milestone",message:t.errorMessage,contextualColorName:"danger"})})}}})},r=e=>{e.preventDefault()},c=()=>{const t=document.querySelector("#panel--milestones"),s=t.querySelectorAll(".panel-block");for(const e of s)e.remove();for(const s of e){const e=document.createElement("div");e.className="panel-block is-block container--milestone",e.dataset.workOrderMilestoneId=s.workOrderMilestoneId.toString(),e.innerHTML='<div class="columns"><div class="column is-narrow">'+(s.workOrderMilestoneCompletionDate?'<span class="button is-static" data-tooltip="Completed '+s.workOrderMilestoneCompletionDateString+'" aria-label="Completed '+s.workOrderMilestoneCompletionDateString+'"><span class="icon is-small"><i class="fas fa-check" aria-hidden="true"></i></span></span>':'<button class="button button--completeMilestone" data-tooltip="Incomplete" type="button" aria-label="Incomplete"><span class="icon is-small"><i class="far fa-square" aria-hidden="true"></i></span></button>')+'</div><div class="column">'+(s.workOrderMilestoneTypeId?"<strong>"+cityssm.escapeHTML(s.workOrderMilestoneType)+"</strong><br />":"")+s.workOrderMilestoneDateString+'<br /><span class="is-size-7">'+cityssm.escapeHTML(s.workOrderMilestoneDescription)+'</span></div><div class="column is-narrow"><div class="dropdown is-right"><div class="dropdown-trigger"><button class="button is-small" data-tooltip="Options" type="button" aria-label="Options"><i class="fas fa-ellipsis-v" aria-hidden="true"></i></button></div><div class="dropdown-menu"><div class="dropdown-content">'+(s.workOrderMilestoneCompletionDate?'<a class="dropdown-item button--reopenMilestone" href="#"><span class="icon is-small"><i class="fas fa-times" aria-hidden="true"></i></span> <span>Reopen Milestone</span></a><hr class="dropdown-divider" />':"")+'<a class="dropdown-item button--deleteMilestone" href="#"><span class="icon is-small"><i class="fas fa-trash has-text-danger" aria-hidden="true"></i></span> <span>Delete Milestone</span></a></div></div></div></div></div>',s.workOrderMilestoneCompletionDate?e.querySelector(".button--reopenMilestone").addEventListener("click",a):e.querySelector(".button--completeMilestone").addEventListener("click",o),e.querySelector(".button--deleteMilestone").addEventListener("click",r),t.append(e)}bulmaJS.init(t)};c()}})();
\ No newline at end of file
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const e=exports.los,t=document.querySelector("main").dataset.urlPrefix,s=document.querySelector("#workOrderEdit--workOrderId").value,o=""===s;if(document.querySelector("#form--workOrderEdit").addEventListener("submit",e=>{e.preventDefault(),cityssm.postJSON(t+"/workOrders/"+(o?"doCreateWorkOrder":"doUpdateWorkOrder"),e.currentTarget,e=>{e.success?o?window.location.href=t+"/workOrders/"+e.workOrderId+"/edit":bulmaJS.alert({message:"Work Order Updated Successfully",contextualColorName:"success"}):bulmaJS.alert({title:"Error Updating Work Order",message:e.errorMessage,contextualColorName:"danger"})})}),!o){let o=exports.workOrderLots;delete exports.workOrderLots;let a=exports.workOrderLotOccupancies;delete exports.workOrderLotOccupancies;const r=e=>{const o=e.currentTarget.closest(".container--lotOccupancy").dataset.lotOccupancyId;bulmaJS.confirm({title:"Delete "+exports.aliases.lot+" "+exports.aliases.occupancy+" Relationship",message:"Are you sure you want to remove the relationship to this "+exports.aliases.lot.toLowerCase()+" "+exports.aliases.occupancy.toLowerCase()+" record from this work order?  Note that the record will remain.",contextualColorName:"warning",okButton:{text:"Yes, Delete Relationship",callbackFunction:()=>{cityssm.postJSON(t+"/workOrders/doDeleteWorkOrderLotOccupancy",{workOrderId:s,lotOccupancyId:o},e=>{e.success?(a=e.workOrderLotOccupancies,u()):bulmaJS.alert({title:"Error Deleting Relationship",message:e.errorMessage,contextualColorName:"danger"})})}}})},n=(e,a)=>{cityssm.postJSON(t+"/workOrders/doAddWorkOrderLot",{workOrderId:s,lotId:e},e=>{e.success?(o=e.workOrderLots,u()):bulmaJS.alert({title:"Error Adding "+exports.aliases.lot,message:e.errorMessage,contextualColorName:"danger"}),a&&a(e.success)})},c=(e,o)=>{cityssm.postJSON(t+"/workOrders/doAddWorkOrderLotOccupancy",{workOrderId:s,lotOccupancyId:e},e=>{e.success?(a=e.workOrderLotOccupancies,u()):bulmaJS.alert({title:"Error Adding "+exports.aliases.occupancy,message:e.errorMessage,contextualColorName:"danger"}),o&&o(e.success)})},l=e=>{const t=e.currentTarget.dataset.lotId;n(t)},i=()=>{const e=document.querySelector("#container--lotOccupancies");if(document.querySelector(".tabs a[href='#relatedTab--lotOccupancies'] .tag").textContent=a.length.toString(),0===a.length)return void(e.innerHTML='<div class="message is-info"><p class="message-body">There are no '+exports.aliases.occupancies.toLowerCase()+" associated with this work order.</p></div>");e.innerHTML='<table class="table is-fullwidth is-striped is-hoverable"><thead><tr><th class="has-width-1"></th><th>'+exports.aliases.occupancy+" Type</th><th>"+exports.aliases.lot+"</th><th>Start Date</th><th>End Date</th><th>"+exports.aliases.occupants+'</th><th class="has-width-1"></th></tr></thead><tbody></tbody></table>';const s=cityssm.dateToString(new Date);for(const n of a){const a=document.createElement("tr");a.className="container--lotOccupancy",a.dataset.lotOccupancyId=n.lotOccupancyId.toString();const c=!(n.occupancyEndDate&&n.occupancyEndDateString<s),i=n.lotId&&o.some(e=>n.lotId===e.lotId);a.innerHTML='<td class="has-text-centered">'+(c?'<i class="fas fa-play" title="Current '+cityssm.escapeHTML(exports.aliases.occupancy)+'"></i>':'<i class="fas fa-stop" title="Previous '+cityssm.escapeHTML(exports.aliases.occupancy)+'"></i>')+'</td><td><a class="has-text-weight-bold" href="'+cityssm.escapeHTML(t)+"/lotOccupancies/"+n.lotOccupancyId+'">'+cityssm.escapeHTML(n.occupancyType)+"</a></td>",n.lotId?a.insertAdjacentHTML("beforeend","<td>"+cityssm.escapeHTML(n.lotName)+(i?"":' <button class="button is-small is-light is-success button--addLot" data-lot-id="'+n.lotId+'" data-tooltip="Add '+cityssm.escapeHTML(exports.aliases.lot)+'" aria-label="Add '+cityssm.escapeHTML(exports.aliases.lot)+'" type="button"><i class="fas fa-plus" aria-hidden="true"></i></button>')+"</td>"):a.insertAdjacentHTML("beforeend",'<td><span class="has-text-grey">(No '+exports.aliases.lot+")</span></td>"),a.insertAdjacentHTML("beforeend","<td>"+n.occupancyStartDateString+"</td><td>"+(n.occupancyEndDate?n.occupancyEndDateString:'<span class="has-text-grey">(No End Date)</span>')+"</td><td>"+(0===n.lotOccupancyOccupants.length?'<span class="has-text-grey">(No '+cityssm.escapeHTML(exports.aliases.occupants)+")</span>":cityssm.escapeHTML(n.lotOccupancyOccupants[0].occupantName)+(n.lotOccupancyOccupants.length>1?" plus "+(n.lotOccupancyOccupants.length-1):""))+'</td><td><button class="button is-small is-light is-danger button--deleteLotOccupancy" data-tooltip="Delete Relationship" type="button"><i class="fas fa-trash" aria-hidden="true"></i></button></td>'),n.lotId&&!i&&a.querySelector(".button--addLot").addEventListener("click",l),a.querySelector(".button--deleteLotOccupancy").addEventListener("click",r),e.querySelector("tbody").append(a)}},d=e=>{const a=e.currentTarget.closest(".container--lot").dataset.lotId;bulmaJS.confirm({title:"Delete "+exports.aliases.lot+" "+exports.aliases.occupancy+" Relationship",message:"Are you sure you want to remove the relationship to this "+exports.aliases.lot.toLowerCase()+" "+exports.aliases.occupancy.toLowerCase()+" record from this work order?  Note that the record will remain.",contextualColorName:"warning",okButton:{text:"Yes, Delete Relationship",callbackFunction:()=>{cityssm.postJSON(t+"/workOrders/doDeleteWorkOrderLot",{workOrderId:s,lotId:a},e=>{e.success?(o=e.workOrderLots,u()):bulmaJS.alert({title:"Error Deleting Relationship",message:e.errorMessage,contextualColorName:"danger"})})}}})},p=()=>{const e=document.querySelector("#container--lots");if(document.querySelector(".tabs a[href='#relatedTab--lots'] .tag").textContent=o.length.toString(),0!==o.length){e.innerHTML='<table class="table is-fullwidth is-striped is-hoverable"><thead><tr><th>'+exports.aliases.lot+"</th><th>"+exports.aliases.map+"</th><th>"+exports.aliases.lot+' Type</th><th>Status</th><th class="has-width-1"></th></tr></thead><tbody></tbody></table>';for(const s of o){const o=document.createElement("tr");o.className="container--lot",o.dataset.lotId=s.lotId.toString(),o.innerHTML='<td><a class="has-text-weight-bold" href="'+cityssm.escapeHTML(t)+"/lots/"+s.lotId+'">'+cityssm.escapeHTML(s.lotName)+"</a></td><td>"+cityssm.escapeHTML(s.mapName)+"</td><td>"+cityssm.escapeHTML(s.lotType)+"</td><td>"+cityssm.escapeHTML(s.lotStatus)+'</td><td><button class="button is-small is-light is-danger button--deleteLot" data-tooltip="Delete Relationship" type="button"><i class="fas fa-trash" aria-hidden="true"></i></button></td>',o.querySelector(".button--deleteLot").addEventListener("click",d),e.querySelector("tbody").append(o)}}else e.innerHTML='<div class="message is-info"><p class="message-body">There are no '+exports.aliases.lots.toLowerCase()+" associated with this work order.</p></div>"},u=()=>{i(),p()};u(),document.querySelector("#button--addLotOccupancy").addEventListener("click",()=>{let o,a;const r=e=>{const t=e.currentTarget.closest("tr"),s=t.dataset.lotOccupancyId;c(s,e=>{e&&t.remove()})},n=e=>{e&&e.preventDefault(),a.innerHTML='<p class="has-text-centered has-text-grey-dark"><i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />Searching...</p>',cityssm.postJSON(t+"/lotOccupancies/doSearchLotOccupancies",o,e=>{if(0!==e.lotOccupancies.length){a.innerHTML='<table class="table is-fullwidth is-striped is-hoverable"><thead><tr><th class="has-width-1"></th><th>'+exports.aliases.occupancy+" Type</th><th>"+exports.aliases.lot+"</th><th>Start Date</th><th>End Date</th><th>"+exports.aliases.occupants+"</th></tr></thead><tbody></tbody></table>";for(const t of e.lotOccupancies){const e=document.createElement("tr");e.className="container--lotOccupancy",e.dataset.lotOccupancyId=t.lotOccupancyId.toString(),e.innerHTML='<td class="has-text-centered"><button class="button is-small is-success button--addLotOccupancy" data-tooltip="Add" type="button" aria-label="Add"><i class="fas fa-plus" aria-hidden="true"></i></button></td><td class="has-text-weight-bold">'+cityssm.escapeHTML(t.occupancyType)+"</td>",t.lotId?e.insertAdjacentHTML("beforeend","<td>"+cityssm.escapeHTML(t.lotName)+"</td>"):e.insertAdjacentHTML("beforeend",'<td><span class="has-text-grey">(No '+exports.aliases.lot+")</span></td>"),e.insertAdjacentHTML("beforeend","<td>"+t.occupancyStartDateString+"</td><td>"+(t.occupancyEndDate?t.occupancyEndDateString:'<span class="has-text-grey">(No End Date)</span>')+"</td><td>"+(0===t.lotOccupancyOccupants.length?'<span class="has-text-grey">(No '+cityssm.escapeHTML(exports.aliases.occupants)+")</span>":cityssm.escapeHTML(t.lotOccupancyOccupants[0].occupantName)+(t.lotOccupancyOccupants.length>1?" plus "+(t.lotOccupancyOccupants.length-1):""))+"</td>"),e.querySelector(".button--addLotOccupancy").addEventListener("click",r),a.querySelector("tbody").append(e)}}else a.innerHTML='<div class="message is-info"><p class="message-body">There are no records that meet the search criteria.</p></div>'})};cityssm.openHtmlModal("workOrder-addLotOccupancy",{onshow:t=>{e.populateAliases(t),o=t.querySelector("form"),a=t.querySelector("#resultsContainer--lotOccupancyAdd"),t.querySelector("#lotOccupancySearch--notWorkOrderId").value=s,t.querySelector("#lotOccupancySearch--occupancyEffectiveDateString").value=document.querySelector("#workOrderEdit--workOrderOpenDateString").value,n()},onshown:e=>{bulmaJS.toggleHtmlClipped(),e.querySelector("#lotOccupancySearch--occupantName").addEventListener("change",n),e.querySelector("#lotOccupancySearch--lotName").addEventListener("change",n),o.addEventListener("submit",n)},onremoved:()=>{bulmaJS.toggleHtmlClipped()}})}),document.querySelector("#button--addLot").addEventListener("click",()=>{let o,a;const r=e=>{const t=e.currentTarget.closest("tr"),s=t.dataset.lotId;n(s,e=>{e&&t.remove()})},c=e=>{e&&e.preventDefault(),a.innerHTML='<p class="has-text-centered has-text-grey-dark"><i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />Searching...</p>',cityssm.postJSON(t+"/lots/doSearchLots",o,e=>{if(0!==e.lots.length){a.innerHTML='<table class="table is-fullwidth is-striped is-hoverable"><thead><tr><th class="has-width-1"></th><th>'+exports.aliases.lot+"</th><th>"+exports.aliases.map+"</th><th>"+exports.aliases.lot+" Type</th><th>Status</th></tr></thead><tbody></tbody></table>";for(const t of e.lots){const e=document.createElement("tr");e.className="container--lot",e.dataset.lotId=t.lotId.toString(),e.innerHTML='<td class="has-text-centered"><button class="button is-small is-success button--addLot" data-tooltip="Add" type="button" aria-label="Add"><i class="fas fa-plus" aria-hidden="true"></i></button></td><td class="has-text-weight-bold">'+cityssm.escapeHTML(t.lotName)+"</td><td>"+cityssm.escapeHTML(t.mapName)+"</td><td>"+cityssm.escapeHTML(t.lotType)+"</td><td>"+cityssm.escapeHTML(t.lotStatus)+"</td>",e.querySelector(".button--addLot").addEventListener("click",r),a.querySelector("tbody").append(e)}}else a.innerHTML='<div class="message is-info"><p class="message-body">There are no records that meet the search criteria.</p></div>'})};cityssm.openHtmlModal("workOrder-addLot",{onshow:t=>{e.populateAliases(t),o=t.querySelector("form"),a=t.querySelector("#resultsContainer--lotAdd"),t.querySelector("#lotSearch--notWorkOrderId").value=s;const r=t.querySelector("#lotSearch--lotStatusId");for(const e of exports.lotStatuses){const t=document.createElement("option");t.value=e.lotStatusId.toString(),t.textContent=e.lotStatus,r.append(t)}c()},onshown:e=>{bulmaJS.toggleHtmlClipped(),e.querySelector("#lotSearch--lotName").addEventListener("change",c),e.querySelector("#lotSearch--lotStatusId").addEventListener("change",c),o.addEventListener("submit",c)},onremoved:()=>{bulmaJS.toggleHtmlClipped()}})})}if(!o){let e=exports.workOrderMilestones;delete exports.workOrderMilestones;const o=t=>{t.success?(e=t.workOrderMilestones,l()):bulmaJS.alert({title:"Error Reopening Milestone",message:t.errorMessage,contextualColorName:"danger"})},a=a=>{a.preventDefault();const r=cityssm.dateToString(new Date),n=Number.parseInt(a.currentTarget.closest(".container--milestone").dataset.workOrderMilestoneId,10),c=e.find(e=>e.workOrderMilestoneId===n);bulmaJS.confirm({title:"Complete Milestone",message:"Are you sure you want to complete this milestone?"+(c.workOrderMilestoneDateString>r?"<br /><strong>Note that this milestone is expected to be completed in the future.</strong>":""),messageIsHtml:!0,contextualColorName:"warning",okButton:{text:"Yes, Complete Milestone",callbackFunction:()=>{cityssm.postJSON(t+"/workOrders/doCompleteWorkOrderMilestone",{workOrderId:s,workOrderMilestoneId:n},o)}}})},r=e=>{e.preventDefault();const a=e.currentTarget.closest(".container--milestone").dataset.workOrderMilestoneId;bulmaJS.confirm({title:"Reopen Milestone",message:"Are you sure you want to remove the completion status from this milestone, and reopen it?",contextualColorName:"warning",okButton:{text:"Yes, Reopen Milestone",callbackFunction:()=>{cityssm.postJSON(t+"/workOrders/doReopenWorkOrderMilestone",{workOrderId:s,workOrderMilestoneId:a},o)}}})},n=e=>{e.preventDefault();const a=e.currentTarget.closest(".container--milestone").dataset.workOrderMilestoneId;bulmaJS.confirm({title:"Delete Milestone",message:"Are you sure you want to delete this milestone?",contextualColorName:"warning",okButton:{text:"Yes, Delete Milestone",callbackFunction:()=>{cityssm.postJSON(t+"/workOrders/doDeleteWorkOrderMilestone",{workOrderMilestoneId:a,workOrderId:s},o)}}})},c=e=>{e.preventDefault()},l=()=>{const t=document.querySelector("#panel--milestones"),s=t.querySelectorAll(".panel-block");for(const e of s)e.remove();for(const s of e){const e=document.createElement("div");e.className="panel-block is-block container--milestone",e.dataset.workOrderMilestoneId=s.workOrderMilestoneId.toString(),e.innerHTML='<div class="columns"><div class="column is-narrow">'+(s.workOrderMilestoneCompletionDate?'<span class="button is-static" data-tooltip="Completed '+s.workOrderMilestoneCompletionDateString+'" aria-label="Completed '+s.workOrderMilestoneCompletionDateString+'"><span class="icon is-small"><i class="fas fa-check" aria-hidden="true"></i></span></span>':'<button class="button button--completeMilestone" data-tooltip="Incomplete" type="button" aria-label="Incomplete"><span class="icon is-small"><i class="far fa-square" aria-hidden="true"></i></span></button>')+'</div><div class="column">'+(s.workOrderMilestoneTypeId?"<strong>"+cityssm.escapeHTML(s.workOrderMilestoneType)+"</strong><br />":"")+s.workOrderMilestoneDateString+(s.workOrderMilestoneTime?" "+s.workOrderMilestoneTimeString:"")+'<br /><span class="is-size-7">'+cityssm.escapeHTML(s.workOrderMilestoneDescription)+'</span></div><div class="column is-narrow"><div class="dropdown is-right"><div class="dropdown-trigger"><button class="button is-small" data-tooltip="Options" type="button" aria-label="Options"><i class="fas fa-ellipsis-v" aria-hidden="true"></i></button></div><div class="dropdown-menu"><div class="dropdown-content">'+(s.workOrderMilestoneCompletionDate?'<a class="dropdown-item button--reopenMilestone" href="#"><span class="icon is-small"><i class="fas fa-times" aria-hidden="true"></i></span> <span>Reopen Milestone</span></a>':'<a class="dropdown-item button--editMilestone" href="#"><span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span> <span>Edit Milestone</span></a>')+'<hr class="dropdown-divider" /><a class="dropdown-item button--deleteMilestone" href="#"><span class="icon is-small"><i class="fas fa-trash has-text-danger" aria-hidden="true"></i></span> <span>Delete Milestone</span></a></div></div></div></div></div>',s.workOrderMilestoneCompletionDate?e.querySelector(".button--reopenMilestone").addEventListener("click",r):(e.querySelector(".button--editMilestone").addEventListener("click",c),e.querySelector(".button--completeMilestone").addEventListener("click",a)),e.querySelector(".button--deleteMilestone").addEventListener("click",n),t.append(e)}bulmaJS.init(t)};l(),document.querySelector("#button--addMilestone").addEventListener("click",()=>{let e;const a=s=>{s.preventDefault(),cityssm.postJSON(t+"/workOrders/doAddWorkOrderMilestone",s.currentTarget,t=>{o(t),t.success&&e()})};cityssm.openHtmlModal("workOrder-addMilestone",{onshow:e=>{e.querySelector("#milestoneAdd--workOrderId").value=s;const t=e.querySelector("#milestoneAdd--workOrderMilestoneTypeId");for(const e of exports.workOrderMilestoneTypes){const s=document.createElement("option");s.value=e.workOrderMilestoneTypeId.toString(),s.textContent=e.workOrderMilestoneType,t.append(s)}e.querySelector("#milestoneAdd--workOrderMilestoneDateString").valueAsDate=new Date},onshown:(t,s)=>{e=s,bulmaJS.toggleHtmlClipped(),t.querySelector("form").addEventListener("submit",a)},onremoved:()=>{bulmaJS.toggleHtmlClipped()}})})}})();
\ No newline at end of file
diff --git a/routes/workOrders.js b/routes/workOrders.js
index 489c170d..c2b20c76 100644
--- a/routes/workOrders.js
+++ b/routes/workOrders.js
@@ -10,8 +10,10 @@ import handler_doAddWorkOrderLotOccupancy from "../handlers/workOrders-post/doAd
 import handler_doDeleteWorkOrderLotOccupancy from "../handlers/workOrders-post/doDeleteWorkOrderLotOccupancy.js";
 import handler_doAddWorkOrderLot from "../handlers/workOrders-post/doAddWorkOrderLot.js";
 import handler_doDeleteWorkOrderLot from "../handlers/workOrders-post/doDeleteWorkOrderLot.js";
+import handler_doAddWorkOrderMilestone from "../handlers/workOrders-post/doAddWorkOrderMilestone.js";
 import handler_doCompleteWorkOrderMilestone from "../handlers/workOrders-post/doCompleteWorkOrderMilestone.js";
 import handler_doReopenWorkOrderMilestone from "../handlers/workOrders-post/doReopenWorkOrderMilestone.js";
+import handler_doDeleteWorkOrderMilestone from "../handlers/workOrders-post/doDeleteWorkOrderMilestone.js";
 export const router = Router();
 router.get("/", handler_search);
 router.post("/doSearchWorkOrders", handler_doSearchWorkOrders);
@@ -23,6 +25,8 @@ router.post("/doAddWorkOrderLotOccupancy", permissionHandlers.updatePostHandler,
 router.post("/doDeleteWorkOrderLotOccupancy", permissionHandlers.updatePostHandler, handler_doDeleteWorkOrderLotOccupancy);
 router.post("/doAddWorkOrderLot", permissionHandlers.updatePostHandler, handler_doAddWorkOrderLot);
 router.post("/doDeleteWorkOrderLot", permissionHandlers.updatePostHandler, handler_doDeleteWorkOrderLot);
+router.post("/doAddWorkOrderMilestone", permissionHandlers.updatePostHandler, handler_doAddWorkOrderMilestone);
 router.post("/doCompleteWorkOrderMilestone", permissionHandlers.updatePostHandler, handler_doCompleteWorkOrderMilestone);
 router.post("/doReopenWorkOrderMilestone", permissionHandlers.updatePostHandler, handler_doReopenWorkOrderMilestone);
+router.post("/doDeleteWorkOrderMilestone", permissionHandlers.updatePostHandler, handler_doDeleteWorkOrderMilestone);
 export default router;
diff --git a/routes/workOrders.ts b/routes/workOrders.ts
index 17b63aca..0c171aba 100644
--- a/routes/workOrders.ts
+++ b/routes/workOrders.ts
@@ -17,8 +17,10 @@ import handler_doDeleteWorkOrderLotOccupancy from "../handlers/workOrders-post/d
 import handler_doAddWorkOrderLot from "../handlers/workOrders-post/doAddWorkOrderLot.js";
 import handler_doDeleteWorkOrderLot from "../handlers/workOrders-post/doDeleteWorkOrderLot.js";
 
+import handler_doAddWorkOrderMilestone from "../handlers/workOrders-post/doAddWorkOrderMilestone.js";
 import handler_doCompleteWorkOrderMilestone from "../handlers/workOrders-post/doCompleteWorkOrderMilestone.js";
 import handler_doReopenWorkOrderMilestone from "../handlers/workOrders-post/doReopenWorkOrderMilestone.js";
+import handler_doDeleteWorkOrderMilestone from "../handlers/workOrders-post/doDeleteWorkOrderMilestone.js";
 
 export const router = Router();
 
@@ -70,6 +72,14 @@ router.post(
     handler_doDeleteWorkOrderLot
 );
 
+// Milestones
+
+router.post(
+    "/doAddWorkOrderMilestone",
+    permissionHandlers.updatePostHandler,
+    handler_doAddWorkOrderMilestone
+);
+
 router.post(
     "/doCompleteWorkOrderMilestone",
     permissionHandlers.updatePostHandler,
@@ -82,4 +92,10 @@ router.post(
     handler_doReopenWorkOrderMilestone
 );
 
+router.post(
+    "/doDeleteWorkOrderMilestone",
+    permissionHandlers.updatePostHandler,
+    handler_doDeleteWorkOrderMilestone
+);
+
 export default router;
diff --git a/views/workOrder-edit.ejs b/views/workOrder-edit.ejs
index aa726297..3920fe06 100644
--- a/views/workOrder-edit.ejs
+++ b/views/workOrder-edit.ejs
@@ -210,8 +210,9 @@
     exports.workOrderLots = <%- JSON.stringify(workOrder.workOrderLots) %>;
     exports.workOrderLotOccupancies = <%- JSON.stringify(workOrder.workOrderLotOccupancies) %>;
     exports.workOrderMilestones = <%- JSON.stringify(workOrder.workOrderMilestones) %>;
-
+    
     exports.lotStatuses = <%- JSON.stringify(lotStatuses) %>;
+    exports.workOrderMilestoneTypes = <%- JSON.stringify(workOrderMilestoneTypes) %>;
 </script>
 <script src="<% urlPrefix %>/javascripts/workOrderEdit.min.js"></script>