From bbc61c25f624a17296866ad28d1fb7d1291737f9 Mon Sep 17 00:00:00 2001
From: Dan Gowans <d.gowans@cityssm.on.ca>
Date: Thu, 9 Mar 2023 15:43:59 -0500
Subject: [PATCH] more consistent panel headings

---
 views/lotOccupancy-edit.ejs | 291 ++++++++++++++++++------------------
 views/lotOccupancy-view.ejs | 212 +++++++++++++-------------
 2 files changed, 251 insertions(+), 252 deletions(-)

diff --git a/views/lotOccupancy-edit.ejs b/views/lotOccupancy-edit.ejs
index f8c6759c..df789b5c 100644
--- a/views/lotOccupancy-edit.ejs
+++ b/views/lotOccupancy-edit.ejs
@@ -309,120 +309,119 @@
       </div>
       <% if (isCreate) { %>
           <div class="panel-block is-block">
-              <h2 class="title is-4"><%= configFunctions.getProperty("aliases.occupant") %></h2>
-              <div class="columns">
-                  <div class="column">
-                      <div class="field">
-                          <label class="label" for="lotOccupancy--lotOccupantTypeId">
-                              <%= configFunctions.getProperty("aliases.occupant") %> Type
+            <h2 class="title is-4"><%= configFunctions.getProperty("aliases.occupant") %></h2>
+            <div class="columns">
+                <div class="column">
+                    <div class="field">
+                        <label class="label" for="lotOccupancy--lotOccupantTypeId">
+                            <%= configFunctions.getProperty("aliases.occupant") %> Type
+                        </label>
+                        <div class="control">
+                          <div class="select is-fullwidth">
+                            <select id="lotOccupancy--lotOccupantTypeId" name="lotOccupantTypeId">
+                              <option value="" data-occupant-comment-title="Comment">
+                                (Select a Type to Create a <%= configFunctions.getProperty("aliases.occupant") %>)
+                              </option>
+                              <% for (const lotOccupantType of lotOccupantTypes) { %>
+                                <option value="<%= lotOccupantType.lotOccupantTypeId %>"
+                                  data-occupant-comment-title="<%= lotOccupantType.occupantCommentTitle %>">
+                                  <%= lotOccupantType.lotOccupantType %>
+                                </option>
+                              <% } %>
+                            </select>
+                          </div>
+                        </div>
+                    </div>
+                    <div class="columns">
+                      <div class="column">
+                        <div class="field">
+                          <label class="label" for="lotOccupancy--occupantName">
+                            <%= configFunctions.getProperty("aliases.occupant") %> Name
                           </label>
                           <div class="control">
-                            <div class="select is-fullwidth">
-                              <select id="lotOccupancy--lotOccupantTypeId" name="lotOccupantTypeId">
-                                <option value="" data-occupant-comment-title="Comment">
-                                  (Select a Type to Create a <%= configFunctions.getProperty("aliases.occupant") %>)
-                                </option>
-                                <% for (const lotOccupantType of lotOccupantTypes) { %>
-                                  <option value="<%= lotOccupantType.lotOccupantTypeId %>"
-                                    data-occupant-comment-title="<%= lotOccupantType.occupantCommentTitle %>">
-                                    <%= lotOccupantType.lotOccupantType %>
-                                  </option>
-                                <% } %>
-                              </select>
-                            </div>
-                          </div>
-                      </div>
-                      <div class="columns">
-                        <div class="column">
-                          <div class="field">
-                            <label class="label" for="lotOccupancy--occupantName">
-                              <%= configFunctions.getProperty("aliases.occupant") %> Name
-                            </label>
-                            <div class="control">
-                              <input class="input" id="lotOccupancy--occupantName" data-table="LotOccupancyOccupant" name="occupantName" type="text" maxlength="200" autocomplete="off" required disabled />
-                            </div>
-                          </div>
-                        </div>
-                        <div class="column">
-                          <div class="field">
-                            <label class="label" for="lotOccupancy--occupantFamilyName">
-                              Family Name
-                            </label>
-                            <div class="control">
-                              <input class="input" id="lotOccupancy--occupantFamilyName" data-table="LotOccupancyOccupant" name="occupantFamilyName" type="text" maxlength="200" autocomplete="off" disabled />
-                            </div>
+                            <input class="input" id="lotOccupancy--occupantName" data-table="LotOccupancyOccupant" name="occupantName" type="text" maxlength="200" autocomplete="off" required disabled />
                           </div>
                         </div>
                       </div>
-                      <div class="field">
-                          <label class="label" for="lotOccupancy--occupantAddress1">Address</label>
+                      <div class="column">
+                        <div class="field">
+                          <label class="label" for="lotOccupancy--occupantFamilyName">
+                            Family Name
+                          </label>
                           <div class="control">
-                              <input class="input" id="lotOccupancy--occupantAddress1" data-table="LotOccupancyOccupant" name="occupantAddress1" type="text" maxlength="50" placeholder="Line 1" autocomplete="off" disabled />
+                            <input class="input" id="lotOccupancy--occupantFamilyName" data-table="LotOccupancyOccupant" name="occupantFamilyName" type="text" maxlength="200" autocomplete="off" disabled />
                           </div>
+                        </div>
                       </div>
-                      <div class="field">
-                          <div class="control">
-                              <input class="input" id="lotOccupancy--occupantAddress2" data-table="LotOccupancyOccupant" name="occupantAddress2" type="text" maxlength="50" placeholder="Line 2" autocomplete="off" aria-label="Address Line 2" disabled />
-                          </div>
-                      </div>
-                      <div class="columns">
-                          <div class="column">
-                              <div class="field">
-                                  <label class="label" for="lotOccupancy--occupantCity">City</label>
-                                  <div class="control">
-                                      <input class="input" id="lotOccupancy--occupantCity" data-table="LotOccupancyOccupant" name="occupantCity" type="text" maxlength="20" value="<%= configFunctions.getProperty("settings.lotOccupancy.occupantCityDefault") %>" disabled />
-                                  </div>
-                              </div>
-                          </div>
-                          <div class="column">
-                              <div class="field">
-                                  <label class="label" for="lotOccupancy--occupantProvince">Province</label>
-                                  <div class="control">
-                                      <input class="input" id="lotOccupancy--occupantProvince" data-table="LotOccupancyOccupant" name="occupantProvince" type="text" maxlength="2" value="<%= configFunctions.getProperty("settings.lotOccupancy.occupantProvinceDefault") %>" disabled />
-                                  </div>
-                              </div>
-                          </div>
-                          <div class="column">
-                              <div class="field">
-                                  <label class="label" for="lotOccupancy--occupantPostalCode">Postal Code</label>
-                                  <div class="control">
-                                      <input class="input" id="lotOccupancy--occupantPostalCode" data-table="LotOccupancyOccupant" name="occupantPostalCode" type="text" maxlength="7" autocomplete="off" disabled />
-                                  </div>
-                              </div>
-                          </div>
-                      </div>
-                      <div class="columns">
-                          <div class="column">
-                              <div class="field">
-                                  <label class="label" for="lotOccupancy--occupantPhoneNumber">Phone Number</label>
-                                  <div class="control">
-                                      <input class="input" id="lotOccupancy--occupantPhoneNumber" data-table="LotOccupancyOccupant" name="occupantPhoneNumber" type="text" maxlength="30" autocomplete="off" disabled />
-                                  </div>
-                              </div>
-                          </div>
-                          <div class="column">
-                              <div class="field">
-                                  <label class="label" for="lotOccupancy--occupantEmailAddress">Email Address</label>
-                                  <div class="control">
-                                      <input class="input" id="lotOccupancy--occupantEmailAddress" data-table="LotOccupancyOccupant" name="occupantEmailAddress" type="email" maxlength="200" autocomplete="off" disabled />
-                                  </div>
-                              </div>
-                          </div>
-                      </div>
-                      <div class="field">
-                          <label class="label" id="lotOccupancy--occupantCommentTitle" for="lotOccupancy--occupantComment">Comment</label>
-                          <div class="control">
-                              <textarea class="textarea" id="lotOccupancy--occupantComment" data-table="LotOccupancyOccupant" name="occupantComment" disabled></textarea>
-                          </div>
-                      </div>
-                  </div>
-                  <div class="column">
-                      <div class="message is-info">
-                          <p class="message-body">Additional <%= configFunctions.getProperty("aliases.occupants").toLowerCase() %> can be added after the record has been created.</p>
-                      </div>
-                  </div>
-              </div>
-              
+                    </div>
+                    <div class="field">
+                        <label class="label" for="lotOccupancy--occupantAddress1">Address</label>
+                        <div class="control">
+                            <input class="input" id="lotOccupancy--occupantAddress1" data-table="LotOccupancyOccupant" name="occupantAddress1" type="text" maxlength="50" placeholder="Line 1" autocomplete="off" disabled />
+                        </div>
+                    </div>
+                    <div class="field">
+                        <div class="control">
+                            <input class="input" id="lotOccupancy--occupantAddress2" data-table="LotOccupancyOccupant" name="occupantAddress2" type="text" maxlength="50" placeholder="Line 2" autocomplete="off" aria-label="Address Line 2" disabled />
+                        </div>
+                    </div>
+                    <div class="columns">
+                        <div class="column">
+                            <div class="field">
+                                <label class="label" for="lotOccupancy--occupantCity">City</label>
+                                <div class="control">
+                                    <input class="input" id="lotOccupancy--occupantCity" data-table="LotOccupancyOccupant" name="occupantCity" type="text" maxlength="20" value="<%= configFunctions.getProperty("settings.lotOccupancy.occupantCityDefault") %>" disabled />
+                                </div>
+                            </div>
+                        </div>
+                        <div class="column">
+                            <div class="field">
+                                <label class="label" for="lotOccupancy--occupantProvince">Province</label>
+                                <div class="control">
+                                    <input class="input" id="lotOccupancy--occupantProvince" data-table="LotOccupancyOccupant" name="occupantProvince" type="text" maxlength="2" value="<%= configFunctions.getProperty("settings.lotOccupancy.occupantProvinceDefault") %>" disabled />
+                                </div>
+                            </div>
+                        </div>
+                        <div class="column">
+                            <div class="field">
+                                <label class="label" for="lotOccupancy--occupantPostalCode">Postal Code</label>
+                                <div class="control">
+                                    <input class="input" id="lotOccupancy--occupantPostalCode" data-table="LotOccupancyOccupant" name="occupantPostalCode" type="text" maxlength="7" autocomplete="off" disabled />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="columns">
+                        <div class="column">
+                            <div class="field">
+                                <label class="label" for="lotOccupancy--occupantPhoneNumber">Phone Number</label>
+                                <div class="control">
+                                    <input class="input" id="lotOccupancy--occupantPhoneNumber" data-table="LotOccupancyOccupant" name="occupantPhoneNumber" type="text" maxlength="30" autocomplete="off" disabled />
+                                </div>
+                            </div>
+                        </div>
+                        <div class="column">
+                            <div class="field">
+                                <label class="label" for="lotOccupancy--occupantEmailAddress">Email Address</label>
+                                <div class="control">
+                                    <input class="input" id="lotOccupancy--occupantEmailAddress" data-table="LotOccupancyOccupant" name="occupantEmailAddress" type="email" maxlength="200" autocomplete="off" disabled />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="field">
+                        <label class="label" id="lotOccupancy--occupantCommentTitle" for="lotOccupancy--occupantComment">Comment</label>
+                        <div class="control">
+                            <textarea class="textarea" id="lotOccupancy--occupantComment" data-table="LotOccupancyOccupant" name="occupantComment" disabled></textarea>
+                        </div>
+                    </div>
+                </div>
+                <div class="column">
+                    <div class="message is-info">
+                        <p class="message-body">Additional <%= configFunctions.getProperty("aliases.occupants").toLowerCase() %> can be added after the record has been created.</p>
+                    </div>
+                </div>
+            </div>
           </div>
       <% } %>
   </div>
@@ -434,7 +433,7 @@
         <div class="level is-mobile">
           <div class="level-left">
             <div class="level-item">
-              <h2 class="title is-4">
+              <h2 class="has-text-weight-bold is-size-5">
                 <%= configFunctions.getProperty("aliases.occupants") %>
               </h2>
             </div>
@@ -459,53 +458,53 @@
     </div>
 
     <div class="panel">
-        <div class="panel-heading">
-            <div class="level is-mobile">
-                <div class="level-left">
-                    <div class="level-item">
-                        <h2 class="title is-4">Comments</h2>
-                    </div>
-                </div>
-                <div class="level-right">
-                    <div class="level-item">
-                        <button class="button is-small is-success is-hidden-print" id="button--addComment" type="button">
-                            <span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>
-                            <span>Add Comment</span>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="panel-block is-block" id="container--lotOccupancyComments"></div>
+      <div class="panel-heading">
+          <div class="level is-mobile">
+              <div class="level-left">
+                  <div class="level-item">
+                      <h2 class="has-text-weight-bold is-size-5">Comments</h2>
+                  </div>
+              </div>
+              <div class="level-right">
+                  <div class="level-item">
+                      <button class="button is-small is-success is-hidden-print" id="button--addComment" type="button">
+                          <span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>
+                          <span>Add Comment</span>
+                      </button>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <div class="panel-block is-block" id="container--lotOccupancyComments"></div>
     </div>
 
     <%
-        const workOrderOpenDateAlias = configFunctions.getProperty("aliases.workOrderOpenDate");
-        const workOrderCloseDateAlias = configFunctions.getProperty("aliases.workOrderCloseDate");
+      const workOrderOpenDateAlias = configFunctions.getProperty("aliases.workOrderOpenDate");
+      const workOrderCloseDateAlias = configFunctions.getProperty("aliases.workOrderCloseDate");
     %>
     <div class="panel">
         <div class="panel-heading">
-            <div class="level is-mobile">
-                <div class="level-left">
-                    <h2 class="title is-4">Work Orders</h2>
+          <div class="level is-mobile">
+              <div class="level-left">
+                  <h2 class="has-text-weight-bold is-size-5">Work Orders</h2>
+              </div>
+              <div class="level-right">
+                <div class="level-item">
+                  <button class="button is-small is-success is-hidden-print" id="button--createWorkOrder" type="button">
+                    <span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>
+                    <span>Create a Work Order</span>
+                  </button>
                 </div>
-                <div class="level-right">
-                    <div class="level-item">
-                        <button class="button is-small is-success is-hidden-print" id="button--createWorkOrder" type="button">
-                            <span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>
-                            <span>Create a Work Order</span>
-                        </button>
-                    </div>
-                </div>
-            </div>
+              </div>
+          </div>
         </div>
         <div class="panel-block is-block">
             <% if (lotOccupancy.workOrders.length === 0) { %>
-                <div class="message is-info">
-                    <p class="message-body">
-                        There are no work orders associated with this record.
-                    </p>
-                </div>
+              <div class="message is-info">
+                <p class="message-body">
+                  There are no work orders associated with this record.
+                </p>
+              </div>
             <% } else { %>
                 <table class="table is-fullwidth is-striped is-hoverable">
                     <thead>
@@ -556,7 +555,7 @@
               <div class="level is-mobile">
                 <div class="level-left">
                   <div class="level-item">
-                    <h2 class="title is-4">Fees</h2>
+                    <h2 class="has-text-weight-bold is-size-5">Fees</h2>
                   </div>
                 </div>
                 <div class="level-right">
@@ -578,7 +577,7 @@
                     <div class="level is-mobile">
                         <div class="level-left">
                             <div class="level-item">
-                                <h2 class="title is-4">Transactions</h2>
+                                <h2 class="has-text-weight-bold is-size-5">Transactions</h2>
                             </div>
                         </div>
                         <div class="level-right">
diff --git a/views/lotOccupancy-view.ejs b/views/lotOccupancy-view.ejs
index 6db5ecc9..ba94ff62 100644
--- a/views/lotOccupancy-view.ejs
+++ b/views/lotOccupancy-view.ejs
@@ -148,7 +148,7 @@
     <div class="level is-mobile">
       <div class="level-left">
         <div class="level-item">
-          <h2 class="title is-4"><%= configFunctions.getProperty("aliases.occupants") %></h2>
+          <h2 class="has-text-weight-bold is-size-5"><%= configFunctions.getProperty("aliases.occupants") %></h2>
         </div>
       </div>
       <div class="level-right">
@@ -171,51 +171,51 @@
       </div>
       <% } else { %>
       <table class="table is-fullwidth is-striped is-hoverable">
-          <thead>
+        <thead>
+          <tr>
+            <th><%= configFunctions.getProperty("aliases.occupant") %></th>
+            <th>Address</th>
+            <th>Other Contact</th>
+            <th>Comment</th>
+          </tr>
+        </thead>
+        <tbody>
+            <% for (const lotOccupancyOccupant of lotOccupancy.lotOccupancyOccupants) { %>
             <tr>
-              <th><%= configFunctions.getProperty("aliases.occupant") %></th>
-              <th>Address</th>
-              <th>Other Contact</th>
-              <th>Comment</th>
-            </tr>
-          </thead>
-          <tbody>
-              <% for (const lotOccupancyOccupant of lotOccupancy.lotOccupancyOccupants) { %>
-              <tr>
-                  <td>
-                    <%= lotOccupancyOccupant.occupantName %> <%= lotOccupancyOccupant.occupantFamilyName %><br />
-                    <span class="tag">
-                      <i class="fas fa-fw fa-<%= lotOccupancyOccupant.fontAwesomeIconClass %>" aria-hidden="true"></i>
-                      <span class="ml-1"><%= lotOccupancyOccupant.lotOccupantType %></span>
+                <td>
+                  <%= lotOccupancyOccupant.occupantName %> <%= lotOccupancyOccupant.occupantFamilyName %><br />
+                  <span class="tag">
+                    <i class="fas fa-fw fa-<%= lotOccupancyOccupant.fontAwesomeIconClass %>" aria-hidden="true"></i>
+                    <span class="ml-1"><%= lotOccupancyOccupant.lotOccupantType %></span>
+                  </span>
+                </td>
+                <td>
+                    <% if (lotOccupancyOccupant.occupantAddress1) { %>
+                        <%= lotOccupancyOccupant.occupantAddress1 %><br />
+                    <% } %>
+                    <% if (lotOccupancyOccupant.occupantAddress2) { %>
+                        <%= lotOccupancyOccupant.occupantAddress2 %><br />
+                    <% } %>
+                    <% if (lotOccupancyOccupant.occupantCity) { %>
+                        <%= lotOccupancyOccupant.occupantCity %>, 
+                    <% } %>
+                    <%= lotOccupancyOccupant.occupantProvince %><br />
+                    <%= lotOccupancyOccupant.occupantPostalCode %>
+                </td>
+                <td>
+                    <% if (lotOccupancyOccupant.occupantPhoneNumber) { %>
+                        <%= lotOccupancyOccupant.occupantPhoneNumber %><br />
+                    <% } %>
+                    <%= lotOccupancyOccupant.occupantEmailAddress %>
+                </td>
+                <td>
+                    <span data-tooltip="<%= (lotOccupancyOccupant.occupantCommentTitle ?? '') === '' ? 'Comment' : lotOccupancyOccupant.occupantCommentTitle %>">
+                    <%= lotOccupancyOccupant.occupantComment %>
                     </span>
-                  </td>
-                  <td>
-                      <% if (lotOccupancyOccupant.occupantAddress1) { %>
-                          <%= lotOccupancyOccupant.occupantAddress1 %><br />
-                      <% } %>
-                      <% if (lotOccupancyOccupant.occupantAddress2) { %>
-                          <%= lotOccupancyOccupant.occupantAddress2 %><br />
-                      <% } %>
-                      <% if (lotOccupancyOccupant.occupantCity) { %>
-                          <%= lotOccupancyOccupant.occupantCity %>, 
-                      <% } %>
-                      <%= lotOccupancyOccupant.occupantProvince %><br />
-                      <%= lotOccupancyOccupant.occupantPostalCode %>
-                  </td>
-                  <td>
-                      <% if (lotOccupancyOccupant.occupantPhoneNumber) { %>
-                          <%= lotOccupancyOccupant.occupantPhoneNumber %><br />
-                      <% } %>
-                      <%= lotOccupancyOccupant.occupantEmailAddress %>
-                  </td>
-                  <td>
-                      <span data-tooltip="<%= (lotOccupancyOccupant.occupantCommentTitle ?? '') === '' ? 'Comment' : lotOccupancyOccupant.occupantCommentTitle %>">
-                      <%= lotOccupancyOccupant.occupantComment %>
-                      </span>
-                  </td>
-              </tr>
-              <% } %>
-          </tbody>
+                </td>
+            </tr>
+            <% } %>
+        </tbody>
       </table>
       <% } %>
   </div>
@@ -223,30 +223,30 @@
 
 <% if (lotOccupancy.lotOccupancyComments.length > 0) { %>
     <div class="panel">
-        <h2 class="panel-heading">Comments</h2>
-        <div class="panel-block is-block">
-            <table class="table is-fullwidth is-striped is-hoverable">
-                <thead>
-                    <tr>
-                        <th>Commentor</th>
-                        <th>Comment Date</th>
-                        <th>Comment</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <% for (const lotOccupancyComment of lotOccupancy.lotOccupancyComments) { %>
-                        <tr>
-                            <td><%= lotOccupancyComment.recordCreate_userName %></td>
-                            <td>
-                                <%= lotOccupancyComment.lotOccupancyCommentDateString %>
-                                <%= (lotOccupancyComment.lotOccupancyCommentTime === 0 ? "" : lotOccupancyComment.lotOccupancyCommentTimeString) %>
-                            </td>
-                            <td><%= lotOccupancyComment.lotOccupancyComment %></td>
-                        </tr>
-                    <% } %>
-                </tbody>
-            </table>
-        </div>
+      <h2 class="panel-heading">Comments</h2>
+      <div class="panel-block is-block">
+          <table class="table is-fullwidth is-striped is-hoverable">
+              <thead>
+                  <tr>
+                      <th>Commentor</th>
+                      <th>Comment Date</th>
+                      <th>Comment</th>
+                  </tr>
+              </thead>
+              <tbody>
+                  <% for (const lotOccupancyComment of lotOccupancy.lotOccupancyComments) { %>
+                      <tr>
+                          <td><%= lotOccupancyComment.recordCreate_userName %></td>
+                          <td>
+                              <%= lotOccupancyComment.lotOccupancyCommentDateString %>
+                              <%= (lotOccupancyComment.lotOccupancyCommentTime === 0 ? "" : lotOccupancyComment.lotOccupancyCommentTimeString) %>
+                          </td>
+                          <td><%= lotOccupancyComment.lotOccupancyComment %></td>
+                      </tr>
+                  <% } %>
+              </tbody>
+          </table>
+      </div>
     </div>
 <% } %>
 
@@ -258,44 +258,44 @@
     <div class="panel">
         <h2 class="panel-heading">Work Orders</h2>
         <div class="panel-block is-block">
-            <table class="table is-fullwidth is-striped is-hoverable">
-                <thead>
-                    <tr>
-                        <th>Work Order Number</th>
-                        <th>Description</th>
-                        <th>Date</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <% for (const workOrder of lotOccupancy.workOrders) { %>
-                        <tr>
-                            <td>
-                                <a class="has-text-weight-bold" href="<%= urlPrefix %>/workOrders/<%= workOrder.workOrderId %>">
-                                    <%= workOrder.workOrderNumber %>
-                                </a>
-                            </td>
-                            <td>
-                                <%= workOrder.workOrderType %><br />
-                                <span class="is-size-7"><%= workOrder.workOrderDescription %></span>
-                            </td>
-                            <td class="is-nowrap">
-                                <span class="has-tooltip-left" data-tooltip="<%= workOrderOpenDateAlias %>">
-                                    <i class="fas fa-fw fa-play" aria-label="<%= workOrderOpenDateAlias %>"></i>
-                                    <%= workOrder.workOrderOpenDateString %>
-                                </span><br />
-                                <span class="has-tooltip-left" data-tooltip="<%= workOrderCloseDateAlias %>">
-                                    <i class="fas fa-fw fa-stop" aria-label="<%= workOrderCloseDateAlias %>"></i>
-                                    <% if (workOrder.workOrderCloseDate) { %>
-                                        <%= workOrder.workOrderCloseDateString %>
-                                    <% } else { %>
-                                        <span class="has-text-grey">(No <%= workOrderCloseDateAlias %>)</span>
-                                    <% } %>
-                                </span>
-                            </td>
-                        </tr>
-                    <% } %>
-                </tbody>
-            </table>
+          <table class="table is-fullwidth is-striped is-hoverable">
+              <thead>
+                <tr>
+                  <th>Work Order Number</th>
+                  <th>Description</th>
+                  <th>Date</th>
+                </tr>
+              </thead>
+              <tbody>
+                  <% for (const workOrder of lotOccupancy.workOrders) { %>
+                      <tr>
+                          <td>
+                              <a class="has-text-weight-bold" href="<%= urlPrefix %>/workOrders/<%= workOrder.workOrderId %>">
+                                  <%= workOrder.workOrderNumber %>
+                              </a>
+                          </td>
+                          <td>
+                              <%= workOrder.workOrderType %><br />
+                              <span class="is-size-7"><%= workOrder.workOrderDescription %></span>
+                          </td>
+                          <td class="is-nowrap">
+                              <span class="has-tooltip-left" data-tooltip="<%= workOrderOpenDateAlias %>">
+                                  <i class="fas fa-fw fa-play" aria-label="<%= workOrderOpenDateAlias %>"></i>
+                                  <%= workOrder.workOrderOpenDateString %>
+                              </span><br />
+                              <span class="has-tooltip-left" data-tooltip="<%= workOrderCloseDateAlias %>">
+                                  <i class="fas fa-fw fa-stop" aria-label="<%= workOrderCloseDateAlias %>"></i>
+                                  <% if (workOrder.workOrderCloseDate) { %>
+                                      <%= workOrder.workOrderCloseDateString %>
+                                  <% } else { %>
+                                      <span class="has-text-grey">(No <%= workOrderCloseDateAlias %>)</span>
+                                  <% } %>
+                              </span>
+                          </td>
+                      </tr>
+                  <% } %>
+              </tbody>
+          </table>
         </div>
     </div>
 <% } %>