update lot occupancy transactions

2023-03-09 12:58:23 -05:00 · 2023-03-09 12:58:23 -05:00 · b4d7a59ff2
parent e919fc21e3
commit b4d7a59ff2
13 changed files with 521 additions and 40 deletions
--- a/handlers/lotOccupancies-post/doUpdateLotOccupancyTransaction.d.ts
+++ b/handlers/lotOccupancies-post/doUpdateLotOccupancyTransaction.d.ts
@ -0,0 +1,3 @@
+import type { Request, Response } from 'express';
+export declare function handler(request: Request, response: Response): Promise<void>;
+export default handler;
--- a/handlers/lotOccupancies-post/doUpdateLotOccupancyTransaction.js
+++ b/handlers/lotOccupancies-post/doUpdateLotOccupancyTransaction.js
@ -0,0 +1,11 @@
+import { updateLotOccupancyTransaction } from '../../helpers/lotOccupancyDB/updateLotOccupancyTransaction.js';
+import { getLotOccupancyTransactions } from '../../helpers/lotOccupancyDB/getLotOccupancyTransactions.js';
+export async function handler(request, response) {
+    await updateLotOccupancyTransaction(request.body, request.session);
+    const lotOccupancyTransactions = await getLotOccupancyTransactions(request.body.lotOccupancyId);
+    response.json({
+        success: true,
+        lotOccupancyTransactions
+    });
+}
+export default handler;
--- a/handlers/lotOccupancies-post/doUpdateLotOccupancyTransaction.ts
+++ b/handlers/lotOccupancies-post/doUpdateLotOccupancyTransaction.ts
@ -0,0 +1,23 @@
+import type { Request, Response } from 'express'
+
+import { updateLotOccupancyTransaction } from '../../helpers/lotOccupancyDB/updateLotOccupancyTransaction.js'
+
+import { getLotOccupancyTransactions } from '../../helpers/lotOccupancyDB/getLotOccupancyTransactions.js'
+
+export async function handler(
+  request: Request,
+  response: Response
+): Promise<void> {
+  await updateLotOccupancyTransaction(request.body, request.session)
+
+  const lotOccupancyTransactions = await getLotOccupancyTransactions(
+    request.body.lotOccupancyId
+  )
+
+  response.json({
+    success: true,
+    lotOccupancyTransactions
+  })
+}
+
+export default handler
--- a/helpers/lotOccupancyDB/updateLotOccupancyTransaction.d.ts
+++ b/helpers/lotOccupancyDB/updateLotOccupancyTransaction.d.ts
@ -0,0 +1,12 @@
+import type * as recordTypes from '../../types/recordTypes';
+interface UpdateLotOccupancyTransactionForm {
+    lotOccupancyId: string | number;
+    transactionIndex: string | number;
+    transactionDateString: string;
+    transactionTimeString: string;
+    transactionAmount: string | number;
+    externalReceiptNumber: string;
+    transactionNote: string;
+}
+export declare function updateLotOccupancyTransaction(lotOccupancyTransactionForm: UpdateLotOccupancyTransactionForm, requestSession: recordTypes.PartialSession): Promise<boolean>;
+export default updateLotOccupancyTransaction;
--- a/helpers/lotOccupancyDB/updateLotOccupancyTransaction.js
+++ b/helpers/lotOccupancyDB/updateLotOccupancyTransaction.js
@ -0,0 +1,21 @@
+import { acquireConnection } from './pool.js';
+import { dateStringToInteger, timeStringToInteger } from '@cityssm/expressjs-server-js/dateTimeFns.js';
+export async function updateLotOccupancyTransaction(lotOccupancyTransactionForm, requestSession) {
+    const database = await acquireConnection();
+    const result = database
+        .prepare(`update LotOccupancyTransactions
+        set transactionAmount = ?,
+        externalReceiptNumber = ?,
+        transactionNote = ?,
+        transactionDate = ?,
+        transactionTime = ?,
+        recordUpdate_userName = ?,
+        recordUpdate_timeMillis = ?
+        where recordDelete_timeMillis is null
+        and lotOccupancyId = ?
+        and transactionIndex = ?`)
+        .run(lotOccupancyTransactionForm.transactionAmount, lotOccupancyTransactionForm.externalReceiptNumber, lotOccupancyTransactionForm.transactionNote, dateStringToInteger(lotOccupancyTransactionForm.transactionDateString), timeStringToInteger(lotOccupancyTransactionForm.transactionTimeString), requestSession.user.userName, Date.now(), lotOccupancyTransactionForm.lotOccupancyId, lotOccupancyTransactionForm.transactionIndex);
+    database.release();
+    return result.changes > 0;
+}
+export default updateLotOccupancyTransaction;
--- a/helpers/lotOccupancyDB/updateLotOccupancyTransaction.ts
+++ b/helpers/lotOccupancyDB/updateLotOccupancyTransaction.ts
@ -0,0 +1,57 @@
+import { acquireConnection } from './pool.js'
+
+import {
+  dateStringToInteger,
+  timeStringToInteger
+} from '@cityssm/expressjs-server-js/dateTimeFns.js'
+
+import type * as recordTypes from '../../types/recordTypes'
+
+interface UpdateLotOccupancyTransactionForm {
+  lotOccupancyId: string | number
+  transactionIndex: string | number
+  transactionDateString: string
+  transactionTimeString: string
+  transactionAmount: string | number
+  externalReceiptNumber: string
+  transactionNote: string
+}
+
+export async function updateLotOccupancyTransaction(
+  lotOccupancyTransactionForm: UpdateLotOccupancyTransactionForm,
+  requestSession: recordTypes.PartialSession
+): Promise<boolean> {
+  const database = await acquireConnection()
+
+  const result = database
+    .prepare(
+      `update LotOccupancyTransactions
+        set transactionAmount = ?,
+        externalReceiptNumber = ?,
+        transactionNote = ?,
+        transactionDate = ?,
+        transactionTime = ?,
+        recordUpdate_userName = ?,
+        recordUpdate_timeMillis = ?
+        where recordDelete_timeMillis is null
+        and lotOccupancyId = ?
+        and transactionIndex = ?`
+    )
+    .run(
+      lotOccupancyTransactionForm.transactionAmount,
+      lotOccupancyTransactionForm.externalReceiptNumber,
+      lotOccupancyTransactionForm.transactionNote,
+      dateStringToInteger(lotOccupancyTransactionForm.transactionDateString),
+      timeStringToInteger(lotOccupancyTransactionForm.transactionTimeString),
+      requestSession.user!.userName,
+      Date.now(),
+      lotOccupancyTransactionForm.lotOccupancyId,
+      lotOccupancyTransactionForm.transactionIndex
+    )
+
+  database.release()
+
+  return result.changes > 0
+}
+
+export default updateLotOccupancyTransaction
--- a/public-typescript/lotOccupancyEdit.js
+++ b/public-typescript/lotOccupancyEdit.js
@ -1109,14 +1109,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
            const fee = lotOccupancyFees.find((possibleFee) => {
                return possibleFee.feeId === feeId;
            });
-            if (fee === undefined) {
-                bulmaJS.alert({
-                    title: 'Fee Not Found',
-                    message: 'Please refresh the page',
-                    contextualColorName: 'danger'
-                });
-                return;
-            }
            let updateCloseModalFunction;
            function doUpdateQuantity(formEvent) {
                formEvent.preventDefault();
@ -1146,10 +1138,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
                },
                onshown(modalElement, closeModalFunction) {
                    var _a;
+                    bulmaJS.toggleHtmlClipped();
                    updateCloseModalFunction = closeModalFunction;
                    modalElement.querySelector('#lotOccupancyFeeQuantity--quantity').focus();
                    (_a = modalElement
                        .querySelector('form')) === null || _a === void 0 ? void 0 : _a.addEventListener('submit', doUpdateQuantity);
+                },
+                onremoved() {
+                    bulmaJS.toggleHtmlClipped();
                }
            });
        }
@ -1447,6 +1443,56 @@ Object.defineProperty(exports, "__esModule", { value: true });
            }
            return transactionGrandTotal;
        }
+        function editLotOccupancyTransaction(clickEvent) {
+            const transactionIndex = Number.parseInt(clickEvent.currentTarget.closest('tr').dataset
+                .transactionIndex, 10);
+            const transaction = lotOccupancyTransactions.find((possibleTransaction) => {
+                return possibleTransaction.transactionIndex === transactionIndex;
+            });
+            let editCloseModalFunction;
+            function doEdit(formEvent) {
+                formEvent.preventDefault();
+                cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doUpdateLotOccupancyTransaction', formEvent.currentTarget, (rawResponseJSON) => {
+                    const responseJSON = rawResponseJSON;
+                    if (responseJSON.success) {
+                        lotOccupancyTransactions = responseJSON.lotOccupancyTransactions;
+                        renderLotOccupancyTransactions();
+                        editCloseModalFunction();
+                    }
+                    else {
+                        bulmaJS.alert({
+                            title: 'Error Updating Transaction',
+                            message: 'Please try again.',
+                            contextualColorName: 'danger'
+                        });
+                    }
+                });
+            }
+            cityssm.openHtmlModal('lotOccupancy-editTransaction', {
+                onshow(modalElement) {
+                    var _a, _b, _c, _d;
+                    los.populateAliases(modalElement);
+                    modalElement.querySelector('#lotOccupancyTransactionEdit--lotOccupancyId').value = lotOccupancyId;
+                    modalElement.querySelector('#lotOccupancyTransactionEdit--transactionIndex').value = transaction.transactionIndex.toString();
+                    modalElement.querySelector('#lotOccupancyTransactionEdit--transactionAmount').value = transaction.transactionAmount.toFixed(2);
+                    modalElement.querySelector('#lotOccupancyTransactionEdit--externalReceiptNumber').value = (_a = transaction.externalReceiptNumber) !== null && _a !== void 0 ? _a : '';
+                    modalElement.querySelector('#lotOccupancyTransactionEdit--transactionNote').value = (_b = transaction.transactionNote) !== null && _b !== void 0 ? _b : '';
+                    modalElement.querySelector('#lotOccupancyTransactionEdit--transactionDateString').value = (_c = transaction.transactionDateString) !== null && _c !== void 0 ? _c : '';
+                    modalElement.querySelector('#lotOccupancyTransactionEdit--transactionTimeString').value = (_d = transaction.transactionTimeString) !== null && _d !== void 0 ? _d : '';
+                },
+                onshown(modalElement, closeModalFunction) {
+                    var _a;
+                    bulmaJS.toggleHtmlClipped();
+                    los.initializeDatePickers(modalElement);
+                    modalElement.querySelector('#lotOccupancyTransactionEdit--transactionAmount').focus();
+                    (_a = modalElement.querySelector('form')) === null || _a === void 0 ? void 0 : _a.addEventListener('submit', doEdit);
+                    editCloseModalFunction = closeModalFunction;
+                },
+                onremoved() {
+                    bulmaJS.toggleHtmlClipped();
+                }
+            });
+        }
        function deleteLotOccupancyTransaction(clickEvent) {
            const transactionIndex = clickEvent.currentTarget.closest('.container--lotOccupancyTransaction').dataset.transactionIndex;
            function doDelete() {
@ -1480,7 +1526,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
            });
        }
        function renderLotOccupancyTransactions() {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e;
            if (lotOccupancyTransactions.length === 0) {
                lotOccupancyTransactionsContainerElement.innerHTML =
                    '<div class="message ' +
@ -1547,13 +1593,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
                            lotOccupancyTransaction.transactionAmount.toFixed(2) +
                            '</td>') +
                        ('<td class="is-hidden-print">' +
-                            '<button class="button is-small is-danger is-light" data-tooltip="Delete Transaction" type="button">' +
+                            '<div class="buttons are-small is-flex-wrap-nowrap is-justify-content-end">' +
+                            '<button class="button is-primary button--edit" type="button">' +
+                            '<span class="icon"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' +
+                            '<span>Edit</span>' +
+                            '</button>' +
+                            '<button class="button is-danger is-light button--delete" data-tooltip="Delete Transaction" type="button">' +
                            '<i class="fas fa-trash" aria-hidden="true"></i>' +
                            '</button>' +
+                            '</div>' +
                            '</td>');
-                tableRowElement
-                    .querySelector('button')
-                    .addEventListener('click', deleteLotOccupancyTransaction);
+                (_d = tableRowElement
+                    .querySelector('.button--edit')) === null || _d === void 0 ? void 0 : _d.addEventListener('click', editLotOccupancyTransaction);
+                (_e = tableRowElement
+                    .querySelector('.button--delete')) === null || _e === void 0 ? void 0 : _e.addEventListener('click', deleteLotOccupancyTransaction);
                lotOccupancyTransactionsContainerElement
                    .querySelector('tbody')
                    .append(tableRowElement);
--- a/public-typescript/lotOccupancyEdit/lotOccupancyEditFees.js
+++ b/public-typescript/lotOccupancyEdit/lotOccupancyEditFees.js
@ -19,14 +19,6 @@ function editLotOccupancyFeeQuantity(clickEvent) {
    const fee = lotOccupancyFees.find((possibleFee) => {
        return possibleFee.feeId === feeId;
    });
-    if (fee === undefined) {
-        bulmaJS.alert({
-            title: 'Fee Not Found',
-            message: 'Please refresh the page',
-            contextualColorName: 'danger'
-        });
-        return;
-    }
    let updateCloseModalFunction;
    function doUpdateQuantity(formEvent) {
        formEvent.preventDefault();
@ -56,10 +48,14 @@ function editLotOccupancyFeeQuantity(clickEvent) {
        },
        onshown(modalElement, closeModalFunction) {
            var _a;
+            bulmaJS.toggleHtmlClipped();
            updateCloseModalFunction = closeModalFunction;
            modalElement.querySelector('#lotOccupancyFeeQuantity--quantity').focus();
            (_a = modalElement
                .querySelector('form')) === null || _a === void 0 ? void 0 : _a.addEventListener('submit', doUpdateQuantity);
+        },
+        onremoved() {
+            bulmaJS.toggleHtmlClipped();
        }
    });
 }
@ -357,6 +353,56 @@ function getTransactionGrandTotal() {
    }
    return transactionGrandTotal;
 }
+function editLotOccupancyTransaction(clickEvent) {
+    const transactionIndex = Number.parseInt(clickEvent.currentTarget.closest('tr').dataset
+        .transactionIndex, 10);
+    const transaction = lotOccupancyTransactions.find((possibleTransaction) => {
+        return possibleTransaction.transactionIndex === transactionIndex;
+    });
+    let editCloseModalFunction;
+    function doEdit(formEvent) {
+        formEvent.preventDefault();
+        cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doUpdateLotOccupancyTransaction', formEvent.currentTarget, (rawResponseJSON) => {
+            const responseJSON = rawResponseJSON;
+            if (responseJSON.success) {
+                lotOccupancyTransactions = responseJSON.lotOccupancyTransactions;
+                renderLotOccupancyTransactions();
+                editCloseModalFunction();
+            }
+            else {
+                bulmaJS.alert({
+                    title: 'Error Updating Transaction',
+                    message: 'Please try again.',
+                    contextualColorName: 'danger'
+                });
+            }
+        });
+    }
+    cityssm.openHtmlModal('lotOccupancy-editTransaction', {
+        onshow(modalElement) {
+            var _a, _b, _c, _d;
+            los.populateAliases(modalElement);
+            modalElement.querySelector('#lotOccupancyTransactionEdit--lotOccupancyId').value = lotOccupancyId;
+            modalElement.querySelector('#lotOccupancyTransactionEdit--transactionIndex').value = transaction.transactionIndex.toString();
+            modalElement.querySelector('#lotOccupancyTransactionEdit--transactionAmount').value = transaction.transactionAmount.toFixed(2);
+            modalElement.querySelector('#lotOccupancyTransactionEdit--externalReceiptNumber').value = (_a = transaction.externalReceiptNumber) !== null && _a !== void 0 ? _a : '';
+            modalElement.querySelector('#lotOccupancyTransactionEdit--transactionNote').value = (_b = transaction.transactionNote) !== null && _b !== void 0 ? _b : '';
+            modalElement.querySelector('#lotOccupancyTransactionEdit--transactionDateString').value = (_c = transaction.transactionDateString) !== null && _c !== void 0 ? _c : '';
+            modalElement.querySelector('#lotOccupancyTransactionEdit--transactionTimeString').value = (_d = transaction.transactionTimeString) !== null && _d !== void 0 ? _d : '';
+        },
+        onshown(modalElement, closeModalFunction) {
+            var _a;
+            bulmaJS.toggleHtmlClipped();
+            los.initializeDatePickers(modalElement);
+            modalElement.querySelector('#lotOccupancyTransactionEdit--transactionAmount').focus();
+            (_a = modalElement.querySelector('form')) === null || _a === void 0 ? void 0 : _a.addEventListener('submit', doEdit);
+            editCloseModalFunction = closeModalFunction;
+        },
+        onremoved() {
+            bulmaJS.toggleHtmlClipped();
+        }
+    });
+}
 function deleteLotOccupancyTransaction(clickEvent) {
    const transactionIndex = clickEvent.currentTarget.closest('.container--lotOccupancyTransaction').dataset.transactionIndex;
    function doDelete() {
@ -390,7 +436,7 @@ function deleteLotOccupancyTransaction(clickEvent) {
    });
 }
 function renderLotOccupancyTransactions() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
    if (lotOccupancyTransactions.length === 0) {
        lotOccupancyTransactionsContainerElement.innerHTML =
            '<div class="message ' +
@ -457,13 +503,20 @@ function renderLotOccupancyTransactions() {
                    lotOccupancyTransaction.transactionAmount.toFixed(2) +
                    '</td>') +
                ('<td class="is-hidden-print">' +
-                    '<button class="button is-small is-danger is-light" data-tooltip="Delete Transaction" type="button">' +
+                    '<div class="buttons are-small is-flex-wrap-nowrap is-justify-content-end">' +
+                    '<button class="button is-primary button--edit" type="button">' +
+                    '<span class="icon"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' +
+                    '<span>Edit</span>' +
+                    '</button>' +
+                    '<button class="button is-danger is-light button--delete" data-tooltip="Delete Transaction" type="button">' +
                    '<i class="fas fa-trash" aria-hidden="true"></i>' +
                    '</button>' +
+                    '</div>' +
                    '</td>');
-        tableRowElement
-            .querySelector('button')
-            .addEventListener('click', deleteLotOccupancyTransaction);
+        (_d = tableRowElement
+            .querySelector('.button--edit')) === null || _d === void 0 ? void 0 : _d.addEventListener('click', editLotOccupancyTransaction);
+        (_e = tableRowElement
+            .querySelector('.button--delete')) === null || _e === void 0 ? void 0 : _e.addEventListener('click', deleteLotOccupancyTransaction);
        lotOccupancyTransactionsContainerElement
            .querySelector('tbody')
            .append(tableRowElement);
--- a/public-typescript/lotOccupancyEdit/lotOccupancyEditFees.ts
+++ b/public-typescript/lotOccupancyEdit/lotOccupancyEditFees.ts
@ -41,16 +41,7 @@ function editLotOccupancyFeeQuantity(clickEvent: Event): void {
  )
  const fee = lotOccupancyFees.find((possibleFee) => {
    return possibleFee.feeId === feeId
-  })
-
-  if (fee === undefined) {
-    bulmaJS.alert({
-      title: 'Fee Not Found',
-      message: 'Please refresh the page',
-      contextualColorName: 'danger'
-    })
-    return
-  }
+  })!

  let updateCloseModalFunction: () => void

@ -105,6 +96,8 @@ function editLotOccupancyFeeQuantity(clickEvent: Event): void {
      ).textContent = fee.quantityUnit!
    },
    onshown(modalElement, closeModalFunction) {
+      bulmaJS.toggleHtmlClipped()
+
      updateCloseModalFunction = closeModalFunction
      ;(
        modalElement.querySelector(
@ -115,6 +108,9 @@ function editLotOccupancyFeeQuantity(clickEvent: Event): void {
      modalElement
        .querySelector('form')
        ?.addEventListener('submit', doUpdateQuantity)
+    },
+    onremoved() {
+      bulmaJS.toggleHtmlClipped()
    }
  })
 }
@ -532,6 +528,105 @@ function getTransactionGrandTotal(): number {
  return transactionGrandTotal
 }

+function editLotOccupancyTransaction(clickEvent: Event): void {
+  const transactionIndex = Number.parseInt(
+    (clickEvent.currentTarget as HTMLButtonElement).closest('tr')!.dataset
+      .transactionIndex!,
+    10
+  )
+
+  const transaction = lotOccupancyTransactions.find((possibleTransaction) => {
+    return possibleTransaction.transactionIndex === transactionIndex
+  })!
+
+  let editCloseModalFunction: () => void
+
+  function doEdit(formEvent: SubmitEvent): void {
+    formEvent.preventDefault()
+
+    cityssm.postJSON(
+      los.urlPrefix + '/lotOccupancies/doUpdateLotOccupancyTransaction',
+      formEvent.currentTarget,
+      (rawResponseJSON) => {
+        const responseJSON = rawResponseJSON as {
+          success: boolean
+          lotOccupancyTransactions: recordTypes.LotOccupancyTransaction[]
+        }
+
+        if (responseJSON.success) {
+          lotOccupancyTransactions = responseJSON.lotOccupancyTransactions
+          renderLotOccupancyTransactions()
+          editCloseModalFunction()
+        } else {
+          bulmaJS.alert({
+            title: 'Error Updating Transaction',
+            message: 'Please try again.',
+            contextualColorName: 'danger'
+          })
+        }
+      }
+    )
+  }
+
+  cityssm.openHtmlModal('lotOccupancy-editTransaction', {
+    onshow(modalElement) {
+      los.populateAliases(modalElement)
+      ;(
+        modalElement.querySelector(
+          '#lotOccupancyTransactionEdit--lotOccupancyId'
+        ) as HTMLInputElement
+      ).value = lotOccupancyId
+      ;(
+        modalElement.querySelector(
+          '#lotOccupancyTransactionEdit--transactionIndex'
+        ) as HTMLInputElement
+      ).value = transaction.transactionIndex!.toString()
+      ;(
+        modalElement.querySelector(
+          '#lotOccupancyTransactionEdit--transactionAmount'
+        ) as HTMLInputElement
+      ).value = transaction.transactionAmount.toFixed(2)
+      ;(
+        modalElement.querySelector(
+          '#lotOccupancyTransactionEdit--externalReceiptNumber'
+        ) as HTMLInputElement
+      ).value = transaction.externalReceiptNumber ?? ''
+      ;(
+        modalElement.querySelector(
+          '#lotOccupancyTransactionEdit--transactionNote'
+        ) as HTMLTextAreaElement
+      ).value = transaction.transactionNote ?? ''
+      ;(
+        modalElement.querySelector(
+          '#lotOccupancyTransactionEdit--transactionDateString'
+        ) as HTMLInputElement
+      ).value = transaction.transactionDateString ?? ''
+      ;(
+        modalElement.querySelector(
+          '#lotOccupancyTransactionEdit--transactionTimeString'
+        ) as HTMLInputElement
+      ).value = transaction.transactionTimeString ?? ''
+    },
+    onshown(modalElement, closeModalFunction) {
+      bulmaJS.toggleHtmlClipped()
+
+      los.initializeDatePickers(modalElement)
+      ;(
+        modalElement.querySelector(
+          '#lotOccupancyTransactionEdit--transactionAmount'
+        ) as HTMLInputElement
+      ).focus()
+
+      modalElement.querySelector('form')?.addEventListener('submit', doEdit)
+
+      editCloseModalFunction = closeModalFunction
+    },
+    onremoved() {
+      bulmaJS.toggleHtmlClipped()
+    }
+  })
+}
+
 function deleteLotOccupancyTransaction(clickEvent: Event): void {
  const transactionIndex = (
    (clickEvent.currentTarget as HTMLElement).closest(
@ -663,14 +758,24 @@ function renderLotOccupancyTransactions(): void {
        lotOccupancyTransaction.transactionAmount.toFixed(2) +
        '</td>') +
      ('<td class="is-hidden-print">' +
-        '<button class="button is-small is-danger is-light" data-tooltip="Delete Transaction" type="button">' +
+        '<div class="buttons are-small is-flex-wrap-nowrap is-justify-content-end">' +
+        '<button class="button is-primary button--edit" type="button">' +
+        '<span class="icon"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' +
+        '<span>Edit</span>' +
+        '</button>' +
+        '<button class="button is-danger is-light button--delete" data-tooltip="Delete Transaction" type="button">' +
        '<i class="fas fa-trash" aria-hidden="true"></i>' +
        '</button>' +
+        '</div>' +
        '</td>')

    tableRowElement
-      .querySelector('button')!
-      .addEventListener('click', deleteLotOccupancyTransaction)
+      .querySelector('.button--edit')
+      ?.addEventListener('click', editLotOccupancyTransaction)
+
+    tableRowElement
+      .querySelector('.button--delete')
+      ?.addEventListener('click', deleteLotOccupancyTransaction)

    lotOccupancyTransactionsContainerElement
      .querySelector('tbody')!
--- a/public/html/lotOccupancy-editTransaction.html
+++ b/public/html/lotOccupancy-editTransaction.html
@ -0,0 +1,134 @@
+<div class="modal" role="dialog">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <h3 class="modal-card-title">Edit Transaction</h3>
+      <button
+        class="delete is-close-modal-button"
+        aria-label="close"
+        type="button"
+      ></button>
+    </header>
+    <section class="modal-card-body">
+      <form id="form--lotOccupancyTransactionEdit">
+        <input
+          id="lotOccupancyTransactionEdit--lotOccupancyId"
+          name="lotOccupancyId"
+          type="hidden"
+          value=""
+        />
+        <input
+          id="lotOccupancyTransactionEdit--transactionIndex"
+          name="transactionIndex"
+          type="hidden"
+          value=""
+        />
+
+        <div class="field">
+          <label
+            class="label"
+            for="lotOccupancyTransactionEdit--transactionAmount"
+            >Transaction Amount</label
+          >
+          <div class="control has-icons-left">
+            <input
+              class="input has-text-right"
+              id="lotOccupancyTransactionEdit--transactionAmount"
+              name="transactionAmount"
+              type="number"
+              step="0.01"
+              required
+            />
+            <span class="icon is-small is-left">
+              <i class="fas fa-dollar-sign" aria-hidden="true"></i>
+            </span>
+          </div>
+        </div>
+        <div class="field">
+          <label
+            class="label"
+            for="lotOccupancyTransactionEdit--externalReceiptNumber"
+          >
+            <span class="alias" data-alias="ExternalReceiptNumber"></span>
+          </label>
+          <div class="control">
+            <input
+              class="input"
+              id="lotOccupancyTransactionEdit--externalReceiptNumber"
+              name="externalReceiptNumber"
+              maxlength="100"
+              autocomplete="off"
+            />
+          </div>
+        </div>
+        <div class="field">
+          <label class="label" for="lotOccupancyTransactionEdit--transactionNote"
+            >Note</label
+          >
+          <div class="control">
+            <textarea
+              class="textarea"
+              id="lotOccupancyTransactionEdit--transactionNote"
+              name="transactionNote"
+            ></textarea>
+          </div>
+        </div>
+        <div class="columns">
+          <div class="column">
+            <div class="field">
+              <label
+                class="label"
+                for="lotOccupancyTransactionEdit--transactionDateString"
+                >Transaction Date</label
+              >
+              <div class="control has-icons-left">
+                <input
+                  class="input"
+                  id="lotOccupancyTransactionEdit--transactionDateString"
+                  name="transactionDateString"
+                  type="date"
+                  required
+                />
+                <span class="icon is-left">
+                  <i class="fas fa-calendar" aria-hidden="true"></i>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div class="column">
+            <div class="field">
+              <label
+                class="label"
+                for="lotOccupancyTransactionEdit--transactionTimeString"
+                >Transaction Time</label
+              >
+              <div class="control has-icons-left">
+                <input
+                  class="input"
+                  id="lotOccupancyTransactionEdit--transactionTimeString"
+                  name="transactionTimeString"
+                  type="time"
+                  required
+                />
+                <span class="icon is-left">
+                  <i class="fas fa-clock" aria-hidden="true"></i>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </section>
+    <footer class="modal-card-foot justify-right">
+      <button
+        class="button is-success"
+        type="submit"
+        form="form--lotOccupancyTransactionEdit"
+      >
+        <span class="icon"><i class="fas fa-save" aria-hidden="true"></i></span>
+        <span>Update Transaction</span>
+      </button>
+      <button class="button is-close-modal-button" type="button">Cancel</button>
+    </footer>
+  </div>
+</div>
--- a/public/javascripts/lotOccupancyEdit.min.js
+++ b/public/javascripts/lotOccupancyEdit.min.js
--- a/routes/lotOccupancies.js
+++ b/routes/lotOccupancies.js
@ -22,6 +22,7 @@ import handler_doUpdateLotOccupancyFeeQuantity from '../handlers/lotOccupancies-
 import handler_doDeleteLotOccupancyFee from '../handlers/lotOccupancies-post/doDeleteLotOccupancyFee.js';
 import handler_doGetDynamicsGPDocument from '../handlers/lotOccupancies-post/doGetDynamicsGPDocument.js';
 import handler_doAddLotOccupancyTransaction from '../handlers/lotOccupancies-post/doAddLotOccupancyTransaction.js';
+import handler_doUpdateLotOccupancyTransaction from '../handlers/lotOccupancies-post/doUpdateLotOccupancyTransaction.js';
 import handler_doDeleteLotOccupancyTransaction from '../handlers/lotOccupancies-post/doDeleteLotOccupancyTransaction.js';
 import * as permissionHandlers from '../handlers/permissions.js';
 import * as configFunctions from '../helpers/functions.config.js';
@ -51,5 +52,6 @@ if (configFunctions.getProperty('settings.dynamicsGP.integrationIsEnabled')) {
    router.post('/doGetDynamicsGPDocument', permissionHandlers.updatePostHandler, handler_doGetDynamicsGPDocument);
 }
 router.post('/doAddLotOccupancyTransaction', permissionHandlers.updatePostHandler, handler_doAddLotOccupancyTransaction);
+router.post('/doUpdateLotOccupancyTransaction', permissionHandlers.updatePostHandler, handler_doUpdateLotOccupancyTransaction);
 router.post('/doDeleteLotOccupancyTransaction', permissionHandlers.updatePostHandler, handler_doDeleteLotOccupancyTransaction);
 export default router;
--- a/routes/lotOccupancies.ts
+++ b/routes/lotOccupancies.ts
@ -30,6 +30,7 @@ import handler_doDeleteLotOccupancyFee from '../handlers/lotOccupancies-post/doD

 import handler_doGetDynamicsGPDocument from '../handlers/lotOccupancies-post/doGetDynamicsGPDocument.js'
 import handler_doAddLotOccupancyTransaction from '../handlers/lotOccupancies-post/doAddLotOccupancyTransaction.js'
+import handler_doUpdateLotOccupancyTransaction from '../handlers/lotOccupancies-post/doUpdateLotOccupancyTransaction.js'
 import handler_doDeleteLotOccupancyTransaction from '../handlers/lotOccupancies-post/doDeleteLotOccupancyTransaction.js'

 import * as permissionHandlers from '../handlers/permissions.js'
@ -185,6 +186,12 @@ router.post(
  handler_doAddLotOccupancyTransaction as RequestHandler
 )

+router.post(
+  '/doUpdateLotOccupancyTransaction',
+  permissionHandlers.updatePostHandler,
+  handler_doUpdateLotOccupancyTransaction as RequestHandler
+)
+
 router.post(
  '/doDeleteLotOccupancyTransaction',
  permissionHandlers.updatePostHandler,