interment container type maint

closes #8

database/addIntermentContainerType.d.ts

@@ -1,7 +1,7 @@
 export interface AddForm {
     intermentContainerType: string;
     intermentContainerTypeKey?: string;
-    isCremationType?: string;
+    isCremationType: '0' | '1';
-    orderNumber?: number;
+    orderNumber?: number | string;
 }
 export default function addIntermentContainerType(addForm: AddForm, user: User): number;

database/addIntermentContainerType.js

@@ -10,7 +10,7 @@ export default function addIntermentContainerType(addForm, user) {
         recordCreate_userName, recordCreate_timeMillis,
         recordUpdate_userName, recordUpdate_timeMillis)
         values (?, ?, ?, ?, ?, ?, ?, ?)`)
-        .run(addForm.intermentContainerType, addForm.intermentContainerTypeKey ?? '', addForm.isCremationType === undefined ? 0 : 1, addForm.orderNumber ?? -1, user.userName, rightNowMillis, user.userName, rightNowMillis);
+        .run(addForm.intermentContainerType, addForm.intermentContainerTypeKey ?? '', addForm.isCremationType, addForm.orderNumber ?? -1, user.userName, rightNowMillis, user.userName, rightNowMillis);
     database.close();
     clearCacheByTableName('IntermentContainerTypes');
     return result.lastInsertRowid;

database/addIntermentContainerType.ts

@@ -6,8 +6,8 @@ import { clearCacheByTableName } from '../helpers/functions.cache.js'
 export interface AddForm {
   intermentContainerType: string
   intermentContainerTypeKey?: string
-  isCremationType?: string
+  isCremationType: '0' | '1'
-  orderNumber?: number
+  orderNumber?: number | string
 }
 
 export default function addIntermentContainerType(
@@ -29,7 +29,7 @@ export default function addIntermentContainerType(
     .run(
       addForm.intermentContainerType,
       addForm.intermentContainerTypeKey ?? '',
-      addForm.isCremationType === undefined ? 0 : 1,
+      addForm.isCremationType,
       addForm.orderNumber ?? -1,
       user.userName,
       rightNowMillis,

database/deleteRecord.d.ts

@@ -1,3 +1,3 @@
-type RecordTable = 'BurialSiteComments' | 'BurialSiteStatuses' | 'BurialSiteTypeFields' | 'BurialSiteTypes' | 'CommittalTypes' | 'ContractComments' | 'Contracts' | 'ContractTypeFields' | 'ContractTypes' | 'FeeCategories' | 'Fees' | 'FuneralHomes' | 'WorkOrderComments' | 'WorkOrderMilestones' | 'WorkOrderMilestoneTypes' | 'WorkOrders' | 'WorkOrderTypes';
+type RecordTable = 'BurialSiteComments' | 'BurialSiteStatuses' | 'BurialSiteTypeFields' | 'BurialSiteTypes' | 'CommittalTypes' | 'ContractComments' | 'Contracts' | 'ContractTypeFields' | 'ContractTypes' | 'FeeCategories' | 'Fees' | 'FuneralHomes' | 'IntermentContainerTypes' | 'WorkOrderComments' | 'WorkOrderMilestones' | 'WorkOrderMilestoneTypes' | 'WorkOrders' | 'WorkOrderTypes';
 export declare function deleteRecord(recordTable: RecordTable, recordId: number | string, user: User): boolean;
 export {};

database/deleteRecord.js

@@ -14,6 +14,7 @@ const recordIdColumns = new Map([
     ['FeeCategories', 'feeCategoryId'],
     ['Fees', 'feeId'],
     ['FuneralHomes', 'funeralHomeId'],
+    ['IntermentContainerTypes', 'intermentContainerTypeId'],
     ['WorkOrderComments', 'workOrderCommentId'],
     ['WorkOrderMilestones', 'workOrderMilestoneId'],
     ['WorkOrderMilestoneTypes', 'workOrderMilestoneTypeId'],

database/deleteRecord.ts

@@ -16,6 +16,7 @@ type RecordTable =
   | 'FeeCategories'
   | 'Fees'
   | 'FuneralHomes'
+  | 'IntermentContainerTypes'
   | 'WorkOrderComments'
   | 'WorkOrderMilestones'
   | 'WorkOrderMilestoneTypes'
@@ -35,6 +36,7 @@ const recordIdColumns = new Map<RecordTable, string>([
   ['FeeCategories', 'feeCategoryId'],
   ['Fees', 'feeId'],
   ['FuneralHomes', 'funeralHomeId'],
+  ['IntermentContainerTypes', 'intermentContainerTypeId'],
   ['WorkOrderComments', 'workOrderCommentId'],
   ['WorkOrderMilestones', 'workOrderMilestoneId'],
   ['WorkOrderMilestoneTypes', 'workOrderMilestoneTypeId'],

database/moveRecord.d.ts

@@ -1,4 +1,4 @@
-type RecordTable = 'BurialSiteStatuses' | 'BurialSiteTypes' | 'CommittalTypes' | 'ContractTypes' | 'FeeCategories' | 'WorkOrderMilestoneTypes' | 'WorkOrderTypes';
+type RecordTable = 'BurialSiteStatuses' | 'BurialSiteTypes' | 'CommittalTypes' | 'ContractTypes' | 'FeeCategories' | 'IntermentContainerTypes' | 'WorkOrderMilestoneTypes' | 'WorkOrderTypes';
 export declare function moveRecordDown(recordTable: RecordTable, recordId: number | string): boolean;
 export declare function moveRecordDownToBottom(recordTable: RecordTable, recordId: number | string): boolean;
 export declare function moveRecordUp(recordTable: RecordTable, recordId: number | string): boolean;

database/moveRecord.js

@@ -8,6 +8,7 @@ const recordIdColumns = new Map([
     ['CommittalTypes', 'committalTypeId'],
     ['ContractTypes', 'contractTypeId'],
     ['FeeCategories', 'feeCategoryId'],
+    ['IntermentContainerTypes', 'intermentContainerTypeId'],
     ['WorkOrderMilestoneTypes', 'workOrderMilestoneTypeId'],
     ['WorkOrderTypes', 'workOrderTypeId']
 ]);

database/moveRecord.ts

@@ -11,6 +11,7 @@ type RecordTable =
   | 'CommittalTypes'
   | 'ContractTypes'
   | 'FeeCategories'
+  | 'IntermentContainerTypes'
   | 'WorkOrderMilestoneTypes'
   | 'WorkOrderTypes'
 
@@ -20,6 +21,7 @@ const recordIdColumns = new Map<RecordTable, string>([
   ['CommittalTypes', 'committalTypeId'],
   ['ContractTypes', 'contractTypeId'],
   ['FeeCategories', 'feeCategoryId'],
+  ['IntermentContainerTypes', 'intermentContainerTypeId'],
   ['WorkOrderMilestoneTypes', 'workOrderMilestoneTypeId'],
   ['WorkOrderTypes', 'workOrderTypeId']
 ])

database/updateIntermentContainerType.d.ts

@@ -0,0 +1,6 @@
+export interface UpdateIntermentContainerTypeForm {
+    intermentContainerTypeId: number | string;
+    intermentContainerType: string;
+    isCremationType: '0' | '1';
+}
+export default function updateIntermentContainerType(updateForm: UpdateIntermentContainerTypeForm, user: User): boolean;

database/updateIntermentContainerType.js

@@ -0,0 +1,18 @@
+import sqlite from 'better-sqlite3';
+import { sunriseDB } from '../helpers/database.helpers.js';
+import { clearCacheByTableName } from '../helpers/functions.cache.js';
+export default function updateIntermentContainerType(updateForm, user) {
+    const database = sqlite(sunriseDB);
+    const rightNowMillis = Date.now();
+    const result = database
+        .prepare(`update IntermentContainerTypes
+        set intermentContainerType = ?,
+          isCremationType = ?,
+          recordUpdate_userName = ?, recordUpdate_timeMillis = ?
+        where recordDelete_timeMillis is null
+          and intermentContainerTypeId = ?`)
+        .run(updateForm.intermentContainerType, updateForm.isCremationType, user.userName, rightNowMillis, updateForm.intermentContainerTypeId);
+    database.close();
+    clearCacheByTableName('IntermentContainerTypes');
+    return result.changes > 0;
+}

database/updateIntermentContainerType.ts

@@ -0,0 +1,43 @@
+import sqlite from 'better-sqlite3'
+
+import { sunriseDB } from '../helpers/database.helpers.js'
+import { clearCacheByTableName } from '../helpers/functions.cache.js'
+
+export interface UpdateIntermentContainerTypeForm {
+  intermentContainerTypeId: number | string
+
+  intermentContainerType: string
+  isCremationType: '0' | '1'
+}
+
+export default function updateIntermentContainerType(
+  updateForm: UpdateIntermentContainerTypeForm,
+  user: User
+): boolean {
+  const database = sqlite(sunriseDB)
+
+  const rightNowMillis = Date.now()
+
+  const result = database
+    .prepare(
+      `update IntermentContainerTypes
+        set intermentContainerType = ?,
+          isCremationType = ?,
+          recordUpdate_userName = ?, recordUpdate_timeMillis = ?
+        where recordDelete_timeMillis is null
+          and intermentContainerTypeId = ?`
+    )
+    .run(
+      updateForm.intermentContainerType,
+      updateForm.isCremationType,
+      user.userName,
+      rightNowMillis,
+      updateForm.intermentContainerTypeId
+    )
+
+  database.close()
+
+  clearCacheByTableName('IntermentContainerTypes')
+
+  return result.changes > 0
+}

handlers/admin-post/doAddIntermentContainerType.d.ts

@@ -0,0 +1,3 @@
+import type { Request, Response } from 'express';
+import { type AddIntermentContainerTypeForm } from '../../database/addIntermentContainerType.js';
+export default function handler(request: Request<unknown, unknown, AddIntermentContainerTypeForm>, response: Response): void;

handlers/admin-post/doAddIntermentContainerType.js

@@ -0,0 +1,11 @@
+import addIntermentContainerType from '../../database/addIntermentContainerType.js';
+import { getIntermentContainerTypes } from '../../helpers/functions.cache.js';
+export default function handler(request, response) {
+    const intermentContainerTypeId = addIntermentContainerType(request.body, request.session.user);
+    const intermentContainerTypes = getIntermentContainerTypes();
+    response.json({
+        success: true,
+        intermentContainerTypeId,
+        intermentContainerTypes
+    });
+}

handlers/admin-post/doAddIntermentContainerType.ts

@@ -0,0 +1,25 @@
+import type { Request, Response } from 'express'
+
+import addIntermentContainerType, {
+  type AddIntermentContainerTypeForm
+} from '../../database/addIntermentContainerType.js'
+import { getIntermentContainerTypes } from '../../helpers/functions.cache.js'
+
+export default function handler(
+  request: Request<unknown, unknown, AddIntermentContainerTypeForm>,
+  response: Response
+): void {
+  const intermentContainerTypeId = addIntermentContainerType(
+    request.body,
+    request.session.user as User
+  )
+
+  const intermentContainerTypes = getIntermentContainerTypes()
+
+  response.json({
+    success: true,
+
+    intermentContainerTypeId,
+    intermentContainerTypes
+  })
+}

handlers/admin-post/doDeleteIntermentContainerType.d.ts

@@ -0,0 +1,4 @@
+import type { Request, Response } from 'express';
+export default function handler(request: Request<unknown, unknown, {
+    intermentContainerTypeId: string;
+}>, response: Response): void;

handlers/admin-post/doDeleteIntermentContainerType.js

@@ -0,0 +1,10 @@
+import { deleteRecord } from '../../database/deleteRecord.js';
+import { getIntermentContainerTypes } from '../../helpers/functions.cache.js';
+export default function handler(request, response) {
+    const success = deleteRecord('IntermentContainerTypes', request.body.intermentContainerTypeId, request.session.user);
+    const intermentContainerTypes = getIntermentContainerTypes();
+    response.json({
+        success,
+        intermentContainerTypes
+    });
+}

handlers/admin-post/doDeleteIntermentContainerType.ts

@@ -0,0 +1,23 @@
+import type { Request, Response } from 'express'
+
+import { deleteRecord } from '../../database/deleteRecord.js'
+import { getIntermentContainerTypes } from '../../helpers/functions.cache.js'
+
+export default function handler(
+  request: Request<unknown, unknown, { intermentContainerTypeId: string }>,
+  response: Response
+): void {
+  const success = deleteRecord(
+    'IntermentContainerTypes',
+    request.body.intermentContainerTypeId as string,
+    request.session.user as User
+  )
+
+  const intermentContainerTypes = getIntermentContainerTypes()
+
+  response.json({
+    success,
+
+    intermentContainerTypes
+  })
+}

handlers/admin-post/doMoveIntermentContainerTypeDown.d.ts

@@ -0,0 +1,5 @@
+import type { Request, Response } from 'express';
+export default function handler(request: Request<unknown, unknown, {
+    intermentContainerTypeId: string;
+    moveToEnd: '0' | '1';
+}>, response: Response): void;

handlers/admin-post/doMoveIntermentContainerTypeDown.js

@@ -0,0 +1,12 @@
+import { moveRecordDown, moveRecordDownToBottom } from '../../database/moveRecord.js';
+import { getIntermentContainerTypes } from '../../helpers/functions.cache.js';
+export default function handler(request, response) {
+    const success = request.body.moveToEnd === '1'
+        ? moveRecordDownToBottom('IntermentContainerTypes', request.body.intermentContainerTypeId)
+        : moveRecordDown('IntermentContainerTypes', request.body.intermentContainerTypeId);
+    const intermentContainerTypes = getIntermentContainerTypes();
+    response.json({
+        success,
+        intermentContainerTypes
+    });
+}

handlers/admin-post/doMoveIntermentContainerTypeDown.ts

@@ -0,0 +1,35 @@
+import type { Request, Response } from 'express'
+
+import {
+  moveRecordDown,
+  moveRecordDownToBottom
+} from '../../database/moveRecord.js'
+import { getIntermentContainerTypes } from '../../helpers/functions.cache.js'
+
+export default function handler(
+  request: Request<
+    unknown,
+    unknown,
+    { intermentContainerTypeId: string; moveToEnd: '0' | '1' }
+  >,
+  response: Response
+): void {
+  const success =
+    request.body.moveToEnd === '1'
+      ? moveRecordDownToBottom(
+          'IntermentContainerTypes',
+          request.body.intermentContainerTypeId
+        )
+      : moveRecordDown(
+          'IntermentContainerTypes',
+          request.body.intermentContainerTypeId
+        )
+
+  const intermentContainerTypes = getIntermentContainerTypes()
+
+  response.json({
+    success,
+
+    intermentContainerTypes
+  })
+}

handlers/admin-post/doMoveIntermentContainerTypeUp.d.ts

@@ -0,0 +1,5 @@
+import type { Request, Response } from 'express';
+export default function handler(request: Request<unknown, unknown, {
+    intermentContainerTypeId: string;
+    moveToEnd: '0' | '1';
+}>, response: Response): void;

handlers/admin-post/doMoveIntermentContainerTypeUp.js

@@ -0,0 +1,12 @@
+import { moveRecordUp, moveRecordUpToTop } from '../../database/moveRecord.js';
+import { getIntermentContainerTypes } from '../../helpers/functions.cache.js';
+export default function handler(request, response) {
+    const success = request.body.moveToEnd === '1'
+        ? moveRecordUpToTop('IntermentContainerTypes', request.body.intermentContainerTypeId)
+        : moveRecordUp('IntermentContainerTypes', request.body.intermentContainerTypeId);
+    const intermentContainerTypes = getIntermentContainerTypes();
+    response.json({
+        success,
+        intermentContainerTypes
+    });
+}

handlers/admin-post/doMoveIntermentContainerTypeUp.ts

@@ -0,0 +1,32 @@
+import type { Request, Response } from 'express'
+
+import { moveRecordUp, moveRecordUpToTop } from '../../database/moveRecord.js'
+import { getIntermentContainerTypes } from '../../helpers/functions.cache.js'
+
+export default function handler(
+  request: Request<
+    unknown,
+    unknown,
+    { intermentContainerTypeId: string; moveToEnd: '0' | '1' }
+  >,
+  response: Response
+): void {
+  const success =
+    request.body.moveToEnd === '1'
+      ? moveRecordUpToTop(
+          'IntermentContainerTypes',
+          request.body.intermentContainerTypeId
+        )
+      : moveRecordUp(
+          'IntermentContainerTypes',
+          request.body.intermentContainerTypeId
+        )
+
+  const intermentContainerTypes = getIntermentContainerTypes()
+
+  response.json({
+    success,
+
+    intermentContainerTypes
+  })
+}

handlers/admin-post/doUpdateCommittalType.d.ts

@@ -1,5 +1,5 @@
 import type { Request, Response } from 'express';
 export default function handler(request: Request<unknown, unknown, {
-    committalTypeId: string;
     committalType: string;
+    committalTypeId: string;
 }>, response: Response): void;

handlers/admin-post/doUpdateCommittalType.ts

@@ -7,7 +7,7 @@ export default function handler(
   request: Request<
     unknown,
     unknown,
-    { committalTypeId: string; committalType: string }
+    { committalType: string; committalTypeId: string; }
   >,
   response: Response
 ): void {

handlers/admin-post/doUpdateIntermentContainerType.d.ts

@@ -0,0 +1,3 @@
+import type { Request, Response } from 'express';
+import { type UpdateIntermentContainerTypeForm } from '../../database/updateIntermentContainerType.js';
+export default function handler(request: Request<unknown, unknown, UpdateIntermentContainerTypeForm>, response: Response): void;

handlers/admin-post/doUpdateIntermentContainerType.js

@@ -0,0 +1,10 @@
+import updateIntermentContainerType from '../../database/updateIntermentContainerType.js';
+import { getIntermentContainerTypes } from '../../helpers/functions.cache.js';
+export default function handler(request, response) {
+    const success = updateIntermentContainerType(request.body, request.session.user);
+    const intermentContainerTypes = getIntermentContainerTypes();
+    response.json({
+        success,
+        intermentContainerTypes
+    });
+}

handlers/admin-post/doUpdateIntermentContainerType.ts

@@ -0,0 +1,24 @@
+import type { Request, Response } from 'express'
+
+import updateIntermentContainerType, {
+  type UpdateIntermentContainerTypeForm
+} from '../../database/updateIntermentContainerType.js'
+import { getIntermentContainerTypes } from '../../helpers/functions.cache.js'
+
+export default function handler(
+  request: Request<unknown, unknown, UpdateIntermentContainerTypeForm>,
+  response: Response
+): void {
+  const success = updateIntermentContainerType(
+    request.body,
+    request.session.user as User
+  )
+
+  const intermentContainerTypes = getIntermentContainerTypes()
+
+  response.json({
+    success,
+
+    intermentContainerTypes
+  })
+}

public/javascripts/burialSiteStatuses.admin.js

@@ -110,7 +110,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
         <form>
           <input name="burialSiteStatusId" type="hidden" value="${burialSiteStatus.burialSiteStatusId.toString()}" />
           <div class="field has-addons">
-            <div class="control">
+            <div class="control is-expanded">
               <input class="input" name="burialSiteStatus" type="text"
                 value="${cityssm.escapeHTML(burialSiteStatus.burialSiteStatus)}"
                 aria-label="Burial Site Status" maxlength="100" required />

public/javascripts/burialSiteStatuses.admin.ts

@@ -171,7 +171,7 @@ declare const bulmaJS: BulmaJS
         <form>
           <input name="burialSiteStatusId" type="hidden" value="${burialSiteStatus.burialSiteStatusId.toString()}" />
           <div class="field has-addons">
-            <div class="control">
+            <div class="control is-expanded">
               <input class="input" name="burialSiteStatus" type="text"
                 value="${cityssm.escapeHTML(burialSiteStatus.burialSiteStatus)}"
                 aria-label="Burial Site Status" maxlength="100" required />

public/javascripts/committalTypes.admin.js

@@ -110,7 +110,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
         <form>
           <input name="committalTypeId" type="hidden" value="${committalType.committalTypeId.toString()}" />
           <div class="field has-addons">
-            <div class="control">
+            <div class="control is-expanded">
               <input class="input" name="committalType" type="text"
                 value="${cityssm.escapeHTML(committalType.committalType)}"
                 aria-label="Committal Type" maxlength="100" required />

public/javascripts/committalTypes.admin.ts

@@ -171,7 +171,7 @@ declare const bulmaJS: BulmaJS
         <form>
           <input name="committalTypeId" type="hidden" value="${committalType.committalTypeId.toString()}" />
           <div class="field has-addons">
-            <div class="control">
+            <div class="control is-expanded">
               <input class="input" name="committalType" type="text"
                 value="${cityssm.escapeHTML(committalType.committalType)}"
                 aria-label="Committal Type" maxlength="100" required />

public/javascripts/intermentContainerTypes.admin.d.ts

@@ -0,0 +1 @@
+export {};

public/javascripts/intermentContainerTypes.admin.js

@@ -0,0 +1,181 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+(() => {
+    const sunrise = exports.sunrise;
+    let intermentContainerTypes = exports.intermentContainerTypes;
+    delete exports.intermentContainerTypes;
+    function updateIntermentContainerType(submitEvent) {
+        submitEvent.preventDefault();
+        cityssm.postJSON(`${sunrise.urlPrefix}/admin/doUpdateIntermentContainerType`, submitEvent.currentTarget, (rawResponseJSON) => {
+            const responseJSON = rawResponseJSON;
+            if (responseJSON.success) {
+                intermentContainerTypes = responseJSON.intermentContainerTypes;
+                bulmaJS.alert({
+                    message: 'Interment Container Type Updated Successfully',
+                    contextualColorName: 'success'
+                });
+            }
+            else {
+                bulmaJS.alert({
+                    title: 'Error Updating Interment Container Type',
+                    message: responseJSON.errorMessage ?? '',
+                    contextualColorName: 'danger'
+                });
+            }
+        });
+    }
+    function deleteIntermentContainerType(clickEvent) {
+        const tableRowElement = clickEvent.currentTarget.closest('tr');
+        const intermentContainerTypeId = tableRowElement.dataset.intermentContainerTypeId;
+        function doDelete() {
+            cityssm.postJSON(`${sunrise.urlPrefix}/admin/doDeleteIntermentContainerType`, {
+                intermentContainerTypeId
+            }, (rawResponseJSON) => {
+                const responseJSON = rawResponseJSON;
+                if (responseJSON.success) {
+                    intermentContainerTypes = responseJSON.intermentContainerTypes;
+                    if (intermentContainerTypes.length === 0) {
+                        renderIntermentContainerTypes();
+                    }
+                    else {
+                        tableRowElement.remove();
+                    }
+                    bulmaJS.alert({
+                        message: 'Interment Container Type Deleted Successfully',
+                        contextualColorName: 'success'
+                    });
+                }
+                else {
+                    bulmaJS.alert({
+                        title: 'Error Deleting Interment Container Type',
+                        message: responseJSON.errorMessage ?? '',
+                        contextualColorName: 'danger'
+                    });
+                }
+            });
+        }
+        bulmaJS.confirm({
+            title: 'Delete Interment Container Type',
+            message: `Are you sure you want to delete this type?<br />
+          Note that no contracts will be removed.`,
+            messageIsHtml: true,
+            contextualColorName: 'warning',
+            okButton: {
+                text: 'Yes, Delete Type',
+                callbackFunction: doDelete
+            }
+        });
+    }
+    function moveIntermentContainerType(clickEvent) {
+        const buttonElement = clickEvent.currentTarget;
+        const tableRowElement = buttonElement.closest('tr');
+        const intermentContainerTypeId = tableRowElement.dataset.intermentContainerTypeId;
+        cityssm.postJSON(`${sunrise.urlPrefix}/admin/${buttonElement.dataset.direction === 'up'
+            ? 'doMoveIntermentContainerTypeUp'
+            : 'doMoveIntermentContainerTypeDown'}`, {
+            intermentContainerTypeId,
+            moveToEnd: clickEvent.shiftKey ? '1' : '0'
+        }, (rawResponseJSON) => {
+            const responseJSON = rawResponseJSON;
+            if (responseJSON.success) {
+                intermentContainerTypes = responseJSON.intermentContainerTypes;
+                renderIntermentContainerTypes();
+            }
+            else {
+                bulmaJS.alert({
+                    title: 'Error Moving Interment Container Type',
+                    message: responseJSON.errorMessage ?? '',
+                    contextualColorName: 'danger'
+                });
+            }
+        });
+    }
+    function renderIntermentContainerTypes() {
+        const containerElement = document.querySelector('#container--intermentContainerTypes');
+        if (intermentContainerTypes.length === 0) {
+            containerElement.innerHTML = `<tr><td colspan="2">
+          <div class="message is-warning">
+            <p class="message-body">There are no active interment container types.</p>
+          </div>
+          </td></tr>`;
+            return;
+        }
+        containerElement.innerHTML = '';
+        for (const intermentContainerType of intermentContainerTypes) {
+            const tableRowElement = document.createElement('tr');
+            tableRowElement.dataset.intermentContainerTypeId =
+                intermentContainerType.intermentContainerTypeId.toString();
+            const formId = `form--updateIntermentContainerType_${intermentContainerType.intermentContainerTypeId.toString()}`;
+            // eslint-disable-next-line no-unsanitized/property
+            tableRowElement.innerHTML = `<td>
+        <form id="${formId}">
+          <input name="intermentContainerTypeId" type="hidden" value="${intermentContainerType.intermentContainerTypeId.toString()}" />
+          <div class="field">
+            <div class="control">
+              <input class="input" name="intermentContainerType" type="text"
+                value="${cityssm.escapeHTML(intermentContainerType.intermentContainerType)}"
+                aria-label="Interment Container Type" maxlength="100" required />
+            </div>
+          </div>
+        </form>
+      </td>
+      <td>
+        <div class="select is-fullwidth">
+          <select name="isCremationType" form="${formId}">
+            <option value="0" ${intermentContainerType.isCremationType ? '' : 'selected'}>No</option>
+            <option value="1" ${intermentContainerType.isCremationType ? 'selected' : ''}>Yes</option>
+          </select>
+        </div>
+      </td>
+      <td class="is-nowrap">
+        <div class="field is-grouped">
+          <div class="control">
+            <button class="button is-success" type="submit" form="${formId}" aria-label="Save">
+              <span class="icon"><i class="fas fa-save" aria-hidden="true"></i></span>
+            </button>
+          </div>
+          <div class="control">
+            ${sunrise.getMoveUpDownButtonFieldHTML('button--moveIntermentContainerTypeUp', 'button--moveIntermentContainerTypeDown', false)}
+          </div>
+          <div class="control">
+            <button class="button is-danger is-light button--deleteIntermentContainerType"
+              data-tooltip="Delete Type" type="button" aria-label="Delete Type">
+              <span class="icon"><i class="fas fa-trash" aria-hidden="true"></i></span>
+            </button>
+          </div>
+        </div>
+      </td>`;
+            tableRowElement
+                .querySelector('form')
+                ?.addEventListener('submit', updateIntermentContainerType);
+            tableRowElement.querySelector('.button--moveIntermentContainerTypeUp').addEventListener('click', moveIntermentContainerType);
+            tableRowElement.querySelector('.button--moveIntermentContainerTypeDown').addEventListener('click', moveIntermentContainerType);
+            tableRowElement
+                .querySelector('.button--deleteIntermentContainerType')
+                ?.addEventListener('click', deleteIntermentContainerType);
+            containerElement.append(tableRowElement);
+        }
+    }
+    ;
+    document.querySelector('#form--addIntermentContainerType').addEventListener('submit', (submitEvent) => {
+        submitEvent.preventDefault();
+        const formElement = submitEvent.currentTarget;
+        cityssm.postJSON(`${sunrise.urlPrefix}/admin/doAddIntermentContainerType`, formElement, (rawResponseJSON) => {
+            const responseJSON = rawResponseJSON;
+            if (responseJSON.success) {
+                intermentContainerTypes = responseJSON.intermentContainerTypes;
+                renderIntermentContainerTypes();
+                formElement.reset();
+                formElement.querySelector('input')?.focus();
+            }
+            else {
+                bulmaJS.alert({
+                    title: 'Error Adding Interment Container Type',
+                    message: responseJSON.errorMessage ?? '',
+                    contextualColorName: 'danger'
+                });
+            }
+        });
+    });
+    renderIntermentContainerTypes();
+})();

public/javascripts/intermentContainerTypes.admin.ts

@@ -0,0 +1,275 @@
+import type { BulmaJS } from '@cityssm/bulma-js/types.js'
+import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types.js'
+
+import type { IntermentContainerType } from '../../types/record.types.js'
+
+import type { Sunrise } from './types.js'
+
+declare const exports: {
+  sunrise: Sunrise
+
+  intermentContainerTypes?: IntermentContainerType[]
+}
+
+declare const cityssm: cityssmGlobal
+declare const bulmaJS: BulmaJS
+;(() => {
+  const sunrise = exports.sunrise as Sunrise
+
+  let intermentContainerTypes =
+    exports.intermentContainerTypes as IntermentContainerType[]
+  delete exports.intermentContainerTypes
+
+  type IntermentContainerTypeResponseJSON =
+    | {
+        success: false
+        errorMessage?: string
+      }
+    | {
+        success: true
+        intermentContainerTypes: IntermentContainerType[]
+      }
+
+  function updateIntermentContainerType(submitEvent: SubmitEvent): void {
+    submitEvent.preventDefault()
+
+    cityssm.postJSON(
+      `${sunrise.urlPrefix}/admin/doUpdateIntermentContainerType`,
+      submitEvent.currentTarget,
+      (rawResponseJSON) => {
+        const responseJSON =
+          rawResponseJSON as IntermentContainerTypeResponseJSON
+
+        if (responseJSON.success) {
+          intermentContainerTypes = responseJSON.intermentContainerTypes
+
+          bulmaJS.alert({
+            message: 'Interment Container Type Updated Successfully',
+            contextualColorName: 'success'
+          })
+        } else {
+          bulmaJS.alert({
+            title: 'Error Updating Interment Container Type',
+            message: responseJSON.errorMessage ?? '',
+            contextualColorName: 'danger'
+          })
+        }
+      }
+    )
+  }
+
+  function deleteIntermentContainerType(clickEvent: Event): void {
+    const tableRowElement = (clickEvent.currentTarget as HTMLElement).closest(
+      'tr'
+    ) as HTMLTableRowElement
+
+    const intermentContainerTypeId =
+      tableRowElement.dataset.intermentContainerTypeId
+
+    function doDelete(): void {
+      cityssm.postJSON(
+        `${sunrise.urlPrefix}/admin/doDeleteIntermentContainerType`,
+        {
+          intermentContainerTypeId
+        },
+        (rawResponseJSON) => {
+          const responseJSON =
+            rawResponseJSON as IntermentContainerTypeResponseJSON
+
+          if (responseJSON.success) {
+            intermentContainerTypes = responseJSON.intermentContainerTypes
+
+            if (intermentContainerTypes.length === 0) {
+              renderIntermentContainerTypes()
+            } else {
+              tableRowElement.remove()
+            }
+
+            bulmaJS.alert({
+              message: 'Interment Container Type Deleted Successfully',
+              contextualColorName: 'success'
+            })
+          } else {
+            bulmaJS.alert({
+              title: 'Error Deleting Interment Container Type',
+              message: responseJSON.errorMessage ?? '',
+              contextualColorName: 'danger'
+            })
+          }
+        }
+      )
+    }
+
+    bulmaJS.confirm({
+      title: 'Delete Interment Container Type',
+      message: `Are you sure you want to delete this type?<br />
+          Note that no contracts will be removed.`,
+      messageIsHtml: true,
+      contextualColorName: 'warning',
+      okButton: {
+        text: 'Yes, Delete Type',
+        callbackFunction: doDelete
+      }
+    })
+  }
+
+  function moveIntermentContainerType(clickEvent: MouseEvent): void {
+    const buttonElement = clickEvent.currentTarget as HTMLButtonElement
+
+    const tableRowElement = buttonElement.closest('tr') as HTMLTableRowElement
+
+    const intermentContainerTypeId =
+      tableRowElement.dataset.intermentContainerTypeId
+
+    cityssm.postJSON(
+      `${sunrise.urlPrefix}/admin/${
+        buttonElement.dataset.direction === 'up'
+          ? 'doMoveIntermentContainerTypeUp'
+          : 'doMoveIntermentContainerTypeDown'
+      }`,
+      {
+        intermentContainerTypeId,
+        moveToEnd: clickEvent.shiftKey ? '1' : '0'
+      },
+      (rawResponseJSON) => {
+        const responseJSON =
+          rawResponseJSON as IntermentContainerTypeResponseJSON
+
+        if (responseJSON.success) {
+          intermentContainerTypes = responseJSON.intermentContainerTypes
+          renderIntermentContainerTypes()
+        } else {
+          bulmaJS.alert({
+            title: 'Error Moving Interment Container Type',
+            message: responseJSON.errorMessage ?? '',
+            contextualColorName: 'danger'
+          })
+        }
+      }
+    )
+  }
+
+  function renderIntermentContainerTypes(): void {
+    const containerElement = document.querySelector(
+      '#container--intermentContainerTypes'
+    ) as HTMLTableSectionElement
+
+    if (intermentContainerTypes.length === 0) {
+      containerElement.innerHTML = `<tr><td colspan="2">
+          <div class="message is-warning">
+            <p class="message-body">There are no active interment container types.</p>
+          </div>
+          </td></tr>`
+
+      return
+    }
+
+    containerElement.innerHTML = ''
+
+    for (const intermentContainerType of intermentContainerTypes) {
+      const tableRowElement = document.createElement('tr')
+
+      tableRowElement.dataset.intermentContainerTypeId =
+        intermentContainerType.intermentContainerTypeId.toString()
+
+      const formId = `form--updateIntermentContainerType_${intermentContainerType.intermentContainerTypeId.toString()}`
+
+      // eslint-disable-next-line no-unsanitized/property
+      tableRowElement.innerHTML = `<td>
+        <form id="${formId}">
+          <input name="intermentContainerTypeId" type="hidden" value="${intermentContainerType.intermentContainerTypeId.toString()}" />
+          <div class="field">
+            <div class="control">
+              <input class="input" name="intermentContainerType" type="text"
+                value="${cityssm.escapeHTML(intermentContainerType.intermentContainerType)}"
+                aria-label="Interment Container Type" maxlength="100" required />
+            </div>
+          </div>
+        </form>
+      </td>
+      <td>
+        <div class="select is-fullwidth">
+          <select name="isCremationType" form="${formId}">
+            <option value="0" ${intermentContainerType.isCremationType ? '' : 'selected'}>No</option>
+            <option value="1" ${intermentContainerType.isCremationType ? 'selected' : ''}>Yes</option>
+          </select>
+        </div>
+      </td>
+      <td class="is-nowrap">
+        <div class="field is-grouped">
+          <div class="control">
+            <button class="button is-success" type="submit" form="${formId}" aria-label="Save">
+              <span class="icon"><i class="fas fa-save" aria-hidden="true"></i></span>
+            </button>
+          </div>
+          <div class="control">
+            ${sunrise.getMoveUpDownButtonFieldHTML(
+              'button--moveIntermentContainerTypeUp',
+              'button--moveIntermentContainerTypeDown',
+              false
+            )}
+          </div>
+          <div class="control">
+            <button class="button is-danger is-light button--deleteIntermentContainerType"
+              data-tooltip="Delete Type" type="button" aria-label="Delete Type">
+              <span class="icon"><i class="fas fa-trash" aria-hidden="true"></i></span>
+            </button>
+          </div>
+        </div>
+      </td>`
+
+      tableRowElement
+        .querySelector('form')
+        ?.addEventListener('submit', updateIntermentContainerType)
+      ;(
+        tableRowElement.querySelector(
+          '.button--moveIntermentContainerTypeUp'
+        ) as HTMLButtonElement
+      ).addEventListener('click', moveIntermentContainerType)
+      ;(
+        tableRowElement.querySelector(
+          '.button--moveIntermentContainerTypeDown'
+        ) as HTMLButtonElement
+      ).addEventListener('click', moveIntermentContainerType)
+
+      tableRowElement
+        .querySelector('.button--deleteIntermentContainerType')
+        ?.addEventListener('click', deleteIntermentContainerType)
+
+      containerElement.append(tableRowElement)
+    }
+  }
+  ;(
+    document.querySelector(
+      '#form--addIntermentContainerType'
+    ) as HTMLFormElement
+  ).addEventListener('submit', (submitEvent: SubmitEvent) => {
+    submitEvent.preventDefault()
+
+    const formElement = submitEvent.currentTarget as HTMLFormElement
+
+    cityssm.postJSON(
+      `${sunrise.urlPrefix}/admin/doAddIntermentContainerType`,
+      formElement,
+      (rawResponseJSON) => {
+        const responseJSON =
+          rawResponseJSON as IntermentContainerTypeResponseJSON
+
+        if (responseJSON.success) {
+          intermentContainerTypes = responseJSON.intermentContainerTypes
+          renderIntermentContainerTypes()
+          formElement.reset()
+          formElement.querySelector('input')?.focus()
+        } else {
+          bulmaJS.alert({
+            title: 'Error Adding Interment Container Type',
+            message: responseJSON.errorMessage ?? '',
+            contextualColorName: 'danger'
+          })
+        }
+      }
+    )
+  })
+
+  renderIntermentContainerTypes()
+})()

public/javascripts/workOrderMilestoneTypes.admin.js

@@ -111,7 +111,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
           <input name="workOrderMilestoneTypeId" type="hidden"
             value="${workOrderMilestoneType.workOrderMilestoneTypeId.toString()}" />
           <div class="field has-addons">
-            <div class="control">
+            <div class="control is-expanded">
               <input class="input"
                 name="workOrderMilestoneType" type="text"
                 value="${cityssm.escapeHTML(workOrderMilestoneType.workOrderMilestoneType)}"

public/javascripts/workOrderMilestoneTypes.admin.ts

@@ -178,7 +178,7 @@ declare const bulmaJS: BulmaJS
           <input name="workOrderMilestoneTypeId" type="hidden"
             value="${workOrderMilestoneType.workOrderMilestoneTypeId.toString()}" />
           <div class="field has-addons">
-            <div class="control">
+            <div class="control is-expanded">
               <input class="input"
                 name="workOrderMilestoneType" type="text"
                 value="${cityssm.escapeHTML(workOrderMilestoneType.workOrderMilestoneType)}"

public/javascripts/workOrderTypes.admin.js

@@ -108,7 +108,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
         <form>
           <input name="workOrderTypeId" type="hidden" value="${workOrderType.workOrderTypeId.toString()}" />
           <div class="field has-addons">
-            <div class="control">
+            <div class="control is-expanded">
               <input class="input" name="workOrderType" type="text"
                 value="${cityssm.escapeHTML(workOrderType.workOrderType ?? '')}" maxlength="100" aria-label="Work Order Type" required />
             </div>

public/javascripts/workOrderTypes.admin.ts

@@ -169,7 +169,7 @@ declare const bulmaJS: BulmaJS
         <form>
           <input name="workOrderTypeId" type="hidden" value="${workOrderType.workOrderTypeId.toString()}" />
           <div class="field has-addons">
-            <div class="control">
+            <div class="control is-expanded">
               <input class="input" name="workOrderType" type="text"
                 value="${cityssm.escapeHTML(workOrderType.workOrderType ?? '')}" maxlength="100" aria-label="Work Order Type" required />
             </div>

routes/admin.js

@@ -14,6 +14,7 @@ import handler_doAddContractTypeField from '../handlers/admin-post/doAddContract
 import handler_doAddContractTypePrint from '../handlers/admin-post/doAddContractTypePrint.js';
 import handler_doAddFee from '../handlers/admin-post/doAddFee.js';
 import handler_doAddFeeCategory from '../handlers/admin-post/doAddFeeCategory.js';
+import handler_doAddIntermentContainerType from '../handlers/admin-post/doAddIntermentContainerType.js';
 import handler_doAddWorkOrderMilestoneType from '../handlers/admin-post/doAddWorkOrderMilestoneType.js';
 import handler_doAddWorkOrderType from '../handlers/admin-post/doAddWorkOrderType.js';
 import handler_doBackupDatabase from '../handlers/admin-post/doBackupDatabase.js';
@@ -27,6 +28,7 @@ import handler_doDeleteContractTypeField from '../handlers/admin-post/doDeleteCo
 import handler_doDeleteContractTypePrint from '../handlers/admin-post/doDeleteContractTypePrint.js';
 import handler_doDeleteFee from '../handlers/admin-post/doDeleteFee.js';
 import handler_doDeleteFeeCategory from '../handlers/admin-post/doDeleteFeeCategory.js';
+import handler_doDeleteIntermentContainerType from '../handlers/admin-post/doDeleteIntermentContainerType.js';
 import handler_doDeleteWorkOrderMilestoneType from '../handlers/admin-post/doDeleteWorkOrderMilestoneType.js';
 import handler_doDeleteWorkOrderType from '../handlers/admin-post/doDeleteWorkOrderType.js';
 import handler_doMoveBurialSiteStatusDown from '../handlers/admin-post/doMoveBurialSiteStatusDown.js';
@@ -47,6 +49,8 @@ import handler_doMoveFeeCategoryDown from '../handlers/admin-post/doMoveFeeCateg
 import handler_doMoveFeeCategoryUp from '../handlers/admin-post/doMoveFeeCategoryUp.js';
 import handler_doMoveFeeDown from '../handlers/admin-post/doMoveFeeDown.js';
 import handler_doMoveFeeUp from '../handlers/admin-post/doMoveFeeUp.js';
+import handler_doMoveIntermentContainerTypeDown from '../handlers/admin-post/doMoveIntermentContainerTypeDown.js';
+import handler_doMoveIntermentContainerTypeUp from '../handlers/admin-post/doMoveIntermentContainerTypeUp.js';
 import handler_doMoveWorkOrderMilestoneTypeDown from '../handlers/admin-post/doMoveWorkOrderMilestoneTypeDown.js';
 import handler_doMoveWorkOrderMilestoneTypeUp from '../handlers/admin-post/doMoveWorkOrderMilestoneTypeUp.js';
 import handler_doMoveWorkOrderTypeDown from '../handlers/admin-post/doMoveWorkOrderTypeDown.js';
@@ -60,6 +64,7 @@ import handler_doUpdateContractTypeField from '../handlers/admin-post/doUpdateCo
 import handler_doUpdateFee from '../handlers/admin-post/doUpdateFee.js';
 import handler_doUpdateFeeAmount from '../handlers/admin-post/doUpdateFeeAmount.js';
 import handler_doUpdateFeeCategory from '../handlers/admin-post/doUpdateFeeCategory.js';
+import handler_doUpdateIntermentContainerType from '../handlers/admin-post/doUpdateIntermentContainerType.js';
 import handler_doUpdateWorkOrderMilestoneType from '../handlers/admin-post/doUpdateWorkOrderMilestoneType.js';
 import handler_doUpdateWorkOrderType from '../handlers/admin-post/doUpdateWorkOrderType.js';
 // Ntfy Startup
@@ -144,6 +149,12 @@ router.post('/doUpdateCommittalType', handler_doUpdateCommittalType);
 router.post('/doMoveCommittalTypeUp', handler_doMoveCommittalTypeUp);
 router.post('/doMoveCommittalTypeDown', handler_doMoveCommittalTypeDown);
 router.post('/doDeleteCommittalType', handler_doDeleteCommittalType);
+// Config Tables - Interment Container Types
+router.post('/doAddIntermentContainerType', handler_doAddIntermentContainerType);
+router.post('/doUpdateIntermentContainerType', handler_doUpdateIntermentContainerType);
+router.post('/doMoveIntermentContainerTypeUp', handler_doMoveIntermentContainerTypeUp);
+router.post('/doMoveIntermentContainerTypeDown', handler_doMoveIntermentContainerTypeDown);
+router.post('/doDeleteIntermentContainerType', handler_doDeleteIntermentContainerType);
 /*
  * Database Maintenance
  */

routes/admin.ts

@@ -15,6 +15,7 @@ import handler_doAddContractTypeField from '../handlers/admin-post/doAddContract
 import handler_doAddContractTypePrint from '../handlers/admin-post/doAddContractTypePrint.js'
 import handler_doAddFee from '../handlers/admin-post/doAddFee.js'
 import handler_doAddFeeCategory from '../handlers/admin-post/doAddFeeCategory.js'
+import handler_doAddIntermentContainerType from '../handlers/admin-post/doAddIntermentContainerType.js'
 import handler_doAddWorkOrderMilestoneType from '../handlers/admin-post/doAddWorkOrderMilestoneType.js'
 import handler_doAddWorkOrderType from '../handlers/admin-post/doAddWorkOrderType.js'
 import handler_doBackupDatabase from '../handlers/admin-post/doBackupDatabase.js'
@@ -28,6 +29,7 @@ import handler_doDeleteContractTypeField from '../handlers/admin-post/doDeleteCo
 import handler_doDeleteContractTypePrint from '../handlers/admin-post/doDeleteContractTypePrint.js'
 import handler_doDeleteFee from '../handlers/admin-post/doDeleteFee.js'
 import handler_doDeleteFeeCategory from '../handlers/admin-post/doDeleteFeeCategory.js'
+import handler_doDeleteIntermentContainerType from '../handlers/admin-post/doDeleteIntermentContainerType.js'
 import handler_doDeleteWorkOrderMilestoneType from '../handlers/admin-post/doDeleteWorkOrderMilestoneType.js'
 import handler_doDeleteWorkOrderType from '../handlers/admin-post/doDeleteWorkOrderType.js'
 import handler_doMoveBurialSiteStatusDown from '../handlers/admin-post/doMoveBurialSiteStatusDown.js'
@@ -48,6 +50,8 @@ import handler_doMoveFeeCategoryDown from '../handlers/admin-post/doMoveFeeCateg
 import handler_doMoveFeeCategoryUp from '../handlers/admin-post/doMoveFeeCategoryUp.js'
 import handler_doMoveFeeDown from '../handlers/admin-post/doMoveFeeDown.js'
 import handler_doMoveFeeUp from '../handlers/admin-post/doMoveFeeUp.js'
+import handler_doMoveIntermentContainerTypeDown from '../handlers/admin-post/doMoveIntermentContainerTypeDown.js'
+import handler_doMoveIntermentContainerTypeUp from '../handlers/admin-post/doMoveIntermentContainerTypeUp.js'
 import handler_doMoveWorkOrderMilestoneTypeDown from '../handlers/admin-post/doMoveWorkOrderMilestoneTypeDown.js'
 import handler_doMoveWorkOrderMilestoneTypeUp from '../handlers/admin-post/doMoveWorkOrderMilestoneTypeUp.js'
 import handler_doMoveWorkOrderTypeDown from '../handlers/admin-post/doMoveWorkOrderTypeDown.js'
@@ -61,6 +65,7 @@ import handler_doUpdateContractTypeField from '../handlers/admin-post/doUpdateCo
 import handler_doUpdateFee from '../handlers/admin-post/doUpdateFee.js'
 import handler_doUpdateFeeAmount from '../handlers/admin-post/doUpdateFeeAmount.js'
 import handler_doUpdateFeeCategory from '../handlers/admin-post/doUpdateFeeCategory.js'
+import handler_doUpdateIntermentContainerType from '../handlers/admin-post/doUpdateIntermentContainerType.js'
 import handler_doUpdateWorkOrderMilestoneType from '../handlers/admin-post/doUpdateWorkOrderMilestoneType.js'
 import handler_doUpdateWorkOrderType from '../handlers/admin-post/doUpdateWorkOrderType.js'
 
@@ -186,10 +191,7 @@ router.post('/doDeleteWorkOrderType', handler_doDeleteWorkOrderType)
 
 // Config Tables - Work Order Milestone Types
 
-router.post(
+router.post('/doAddWorkOrderMilestoneType', handler_doAddWorkOrderMilestoneType)
-  '/doAddWorkOrderMilestoneType',
-  handler_doAddWorkOrderMilestoneType
-)
 
 router.post(
   '/doUpdateWorkOrderMilestoneType',
@@ -235,6 +237,30 @@ router.post('/doMoveCommittalTypeDown', handler_doMoveCommittalTypeDown)
 
 router.post('/doDeleteCommittalType', handler_doDeleteCommittalType)
 
+// Config Tables - Interment Container Types
+
+router.post('/doAddIntermentContainerType', handler_doAddIntermentContainerType)
+
+router.post(
+  '/doUpdateIntermentContainerType',
+  handler_doUpdateIntermentContainerType
+)
+
+router.post(
+  '/doMoveIntermentContainerTypeUp',
+  handler_doMoveIntermentContainerTypeUp
+)
+
+router.post(
+  '/doMoveIntermentContainerTypeDown',
+  handler_doMoveIntermentContainerTypeDown
+)
+
+router.post(
+  '/doDeleteIntermentContainerType',
+  handler_doDeleteIntermentContainerType
+)
+
 /*
  * Database Maintenance
  */

views/admin-tables.ejs

@@ -48,10 +48,15 @@
               <h2 class="title is-5 has-text-white">Work Order Types</h2>
             </div>
           </div>
+          <div class="level-right">
+            <div class="level-item">
+              <i class="fas fa-hard-hat" aria-hidden="true"></i>
+            </div>
+          </div>
         </div>
       </div>
       <div class="panel-block is-hidden">
-        <table class="table is-striped is-hoverable has-sticky-header">
+        <table class="table is-fullwidth is-striped is-hoverable has-sticky-header">
           <thead>
             <tr>
               <th>Work Order Type</th>
@@ -96,10 +101,15 @@
               <h2 class="title is-5 has-text-white">Work Order Milestone Types</h2>
             </div>
           </div>
+          <div class="level-right">
+            <div class="level-item">
+              <i class="fas fa-hard-hat" aria-hidden="true"></i>
+            </div>
+          </div>
         </div>
       </div>
       <div class="panel-block is-block is-hidden">
-        <table class="table is-striped is-hoverable has-sticky-header">
+        <table class="table is-fullwidth is-striped is-hoverable has-sticky-header">
           <thead>
             <tr>
               <th>Work Order Milestone Type</th>
@@ -144,10 +154,15 @@
               <h2 class="title is-5 has-text-white">Committal Types</h2>
             </div>
           </div>
+          <div class="level-right">
+            <div class="level-item">
+              <i class="fas fa-file-contract" aria-hidden="true"></i>
+            </div>
+          </div>
         </div>
       </div>
       <div class="panel-block is-block is-hidden">
-        <table class="table is-striped is-hoverable has-sticky-header">
+        <table class="table is-fullwidth is-striped is-hoverable has-sticky-header">
           <thead>
             <tr>
               <th>Committal Type</th>
@@ -177,6 +192,68 @@
       </div>
     </div>
     
+    <div class="panel">
+      <div class="panel-heading">
+        <div class="level is-mobile">
+          <div class="level-left">
+            <div class="level-item">
+              <button class="button is-small is-toggle-button" data-tooltip="Toggle Interment Container Types" type="button" aria-label="Toggle Interment Container Types">
+                <span class="icon">
+                  <i class="fas fa-plus" aria-hidden="true"></i>
+                </span>
+              </button>
+            </div>
+            <div class="level-item">
+              <h2 class="title is-5 has-text-white">Interment Container Types</h2>
+            </div>
+          </div>
+          <div class="level-right">
+            <div class="level-item">
+              <i class="fas fa-file-contract" aria-hidden="true"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="panel-block is-block is-hidden">
+        <table class="table is-fullwidth is-striped is-hoverable has-sticky-header">
+          <thead>
+            <tr>
+              <th>Interment Container Type</th>
+              <th>Is Cremated</th>
+              <th class="has-text-centered has-width-1">Options</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <form id="form--addIntermentContainerType">
+                  <div class="field">
+                    <div class="control">
+                      <input class="input" name="intermentContainerType" type="text" maxlength="100" placeholder="New Interment Container Type" required />
+                    </div>
+                  </div>
+                </form>
+              </td>
+              <td>
+                <div class="select is-fullwidth">
+                  <select name="isCremationType" form="form--addIntermentContainerType">
+                    <option value="0">No</option>
+                    <option value="1">Yes</option>
+                  </select>
+                </div>
+              </td>
+              <td>
+                <button class="button is-success has-tooltip-bottom" data-tooltip="Add Type" type="submit" form="form--addIntermentContainerType" aria-label="Add Type">
+                  <span class="icon"><i class="fas fa-plus" aria-hidden="true"></i></span>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+          <tbody id="container--intermentContainerTypes"></tbody>
+        </table>
+      </div>
+    </div>
+    
     <div class="panel">
       <div class="panel-heading">
         <div class="level is-mobile">
@@ -192,10 +269,15 @@
               <h2 class="title is-5 has-text-white">Burial Site Statuses</h2>
             </div>
           </div>
+          <div class="level-right">
+            <div class="level-item">
+              <i class="fas fa-vector-square" aria-hidden="true"></i>
+            </div>
+          </div>
         </div>
       </div>
       <div class="panel-block is-block is-hidden">
-        <table class="table is-striped is-hoverable has-sticky-header">
+        <table class="table is-fullwidth is-striped is-hoverable has-sticky-header">
           <thead>
             <tr>
               <th>Burial Site Status</th>
@@ -241,6 +323,7 @@
 
 <script src="<%= urlPrefix %>/javascripts/burialSiteStatuses.admin.js"></script>
 <script src="<%= urlPrefix %>/javascripts/committalTypes.admin.js"></script>
+<script src="<%= urlPrefix %>/javascripts/intermentContainerTypes.admin.js"></script>
 <script src="<%= urlPrefix %>/javascripts/workOrderMilestoneTypes.admin.js"></script>
 <script src="<%= urlPrefix %>/javascripts/workOrderTypes.admin.js"></script>