sunrise-cms/views/lotOccupancy-view.ejs

<%- include('_header'); -%>

<nav class="breadcrumb">
  <ul>
    <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
    <li>
      <a href="<%= urlPrefix %>/lotOccupancies">
        <span class="icon is-small">
          <span class="fa-layers fa-fw" aria-hidden="true">
            <i class="fas fa-vector-square"></i>
            <i class="fas fa-user" data-fa-transform="shrink-10"></i>
          </span>
        </span>
        <span><%= configFunctions.getProperty("aliases.occupancies") %></span>
      </a>
    </li>
    <li class="is-active">
      <a href="#" aria-current="page">
        <%= configFunctions.getProperty("aliases.occupancy") %> #<%= lotOccupancy.lotOccupancyId %>: <%= lotOccupancy.lotName || ("(No " + configFunctions.getProperty("aliases.lot") + ")") %>
      </a>
    </li>
  </ul>
</nav>

<h1 class="title is-1">
  <%= configFunctions.getProperty("aliases.occupancy") %>
  #<%= lotOccupancy.lotOccupancyId %>:
  <%= lotOccupancy.lotName || ("(No " + configFunctions.getProperty("aliases.lot") + ")") %>
</h1>

<div class="level is-fixed-bottom is-mobile has-background-white has-shadow is-hidden-print">
  <div class="level-left">
    <span class="level-item has-text-weight-bold">
      <%= configFunctions.getProperty("aliases.occupancy") %> #<%= lotOccupancy.lotOccupancyId %>:
      <%= lotOccupancy.lotName || ("(No " + configFunctions.getProperty("aliases.lot") + ")") %>
    </span>
  </div>
  <div class="level-right">
    <% if (occupancyTypePrints.length > 0) { %>
      <% if (occupancyTypePrints.length === 1) { %>
        <div class="level-item">
          <a href="<%= urlPrefix %>/print/<%= occupancyTypePrints[0] %>/?lotOccupancyId=<%= lotOccupancy.lotOccupancyId %>" target="_blank" aria-label="Print">
            <span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
            <span class="is-hidden-touch">Print</span>
          </a>
        </div>
      <% } else { %>
        <div class="level-item">
          <div class="dropdown is-right is-up">
            <div class="dropdown-trigger">
              <button class="button" type="button" aria-label="Print">
                <span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
                <span class="is-hidden-touch">Print</span>
                <span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
              </a>
            </div>
            <div class="dropdown-menu">
              <div class="dropdown-content">
                <% for (const printName of occupancyTypePrints) { %>
                  <% const printConfig = printFunctions.getPrintConfig(printName); %>
                  <% if (printConfig) { %>
                    <a class="dropdown-item" href="<%= urlPrefix %>/print/<%= printName %>/?lotOccupancyId=<%= lotOccupancy.lotOccupancyId %>" target="_blank">
                      <span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
                      <span><%= printConfig.title %></span>
                    </a>
                  <% } %>
                <% } %>
              </div>
            </div>
          </div>
        </div>
      <% } %>
    <% } %>
    <% if (user.userProperties.canUpdate) { %>
      <div class="level-item">
        <a class="button <%= (lotOccupancy.occupancyEndDate ? "is-warning" : "is-primary") %>"
          href="<%= urlPrefix %>/lotOccupancies/<%= lotOccupancy.lotOccupancyId %>/edit"
          accesskey="e">
          <span class="icon"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
          <span>Switch to Edit Mode</span>
        </a>
      </div>
    <% } %>
  </div>
</div>

<div class="panel">
  <div class="panel-block is-block">
    <div class="columns">
      <div class="column">
        <p>
          <strong><%= configFunctions.getProperty("aliases.occupancy") %> Type</strong><br />
          <%= lotOccupancy.occupancyType %>
        </p>
      </div>
      <div class="column">
          <p class="mb-2">
              <strong><%= configFunctions.getProperty("aliases.lot") %></strong><br />
              <% if (lotOccupancy.lotId) { %>
                  <a href="<%= urlPrefix %>/lots/<%= lotOccupancy.lotId %>"><%= lotOccupancy.lotName %></a>
              <% } else { %>
                  <span class="has-text-grey">(No <%= configFunctions.getProperty("aliases.lot") %>)</span>
              <% } %>
          </p>
          <p>
              <strong><%= configFunctions.getProperty("aliases.map") %></strong><br />
              <% if (lotOccupancy.mapId) { %>
                  <a href="<%= urlPrefix %>/maps/<%= lotOccupancy.mapId %>"><%= lotOccupancy.mapName %></a>
              <% } else { %>
                  <span class="has-text-grey">(No <%= configFunctions.getProperty("aliases.map") %>)</span>
              <% } %>
          </p>
      </div>
      <div class="column">
          <p class="mb-2">
              <strong><%= configFunctions.getProperty("aliases.occupancyStartDate") %></strong><br />
              <%= lotOccupancy.occupancyStartDateString %>
          </p>
          <p>
              <strong>End Date</strong><br />
              <% if (lotOccupancy.occupancyEndDateString === "") { %>
                  <span class="has-text-grey">(No End Date)</span>
              <% } else { %>
                  <%= lotOccupancy.occupancyEndDateString %>
              <% } %>
          </p>
      </div>
      <% if (lotOccupancy.lotOccupancyFields.length > 0) { %>
        <div class="column">
          <% for (const lotOccupancyField of lotOccupancy.lotOccupancyFields) { %>
            <p class="mb-2">
              <strong><%= lotOccupancyField.occupancyTypeField %></strong><br />
              <% if (lotOccupancyField.lotOccupancyFieldValue) { %>
                <%= lotOccupancyField.lotOccupancyFieldValue %>
              <% } else { %>
                <span class="has-text-grey">(No Value)</span>
              <% } %>
            </p>
          <% } %>
        </div>
      <% } %>
    </div>
  </div>
</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"><%= configFunctions.getProperty("aliases.occupants") %></h2>
        </div>
      </div>
      <div class="level-right">
        <div class="level-item">
          <a class="button is-link is-small is-hidden-print has-text-weight-normal" href="<%= urlPrefix %>/reports/lotOccupancyOccupants-byLotOccupancyId/?lotOccupancyId=<%= lotOccupancy.lotOccupancyId %>"  target="_blank" download>
            <span class="icon is-small"><i class="fas fa-download" aria-hidden="true"></i></span>
            <span>Export</span>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="panel-block is-block">
      <% if (lotOccupancy.lotOccupancyOccupants.length === 0) { %>
      <div class="message is-warning">
        <p class="message-body">
          There are no <%= configFunctions.getProperty("aliases.occupants").toLowerCase() %>
          associated with this record.
        </p>
      </div>
      <% } else { %>
      <table class="table is-fullwidth is-striped is-hoverable">
          <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>
                  <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>
              </tr>
              <% } %>
          </tbody>
      </table>
      <% } %>
  </div>
</div>

<% 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>
    </div>
<% } %>

<% if (lotOccupancy.workOrders.length > 0) { %>
    <%
        const workOrderOpenDateAlias = configFunctions.getProperty("aliases.workOrderOpenDate");
        const workOrderCloseDateAlias = configFunctions.getProperty("aliases.workOrderCloseDate");
    %>
    <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>
        </div>
    </div>
<% } %>

<div class="columns">
    <div class="column">
        <div class="panel">
            <h2 class="panel-heading">Fees</h2>
            <div class="panel-block is-block">
                <% if (lotOccupancy.lotOccupancyFees.length === 0) { %>
                    <div class="message is-info">
                        <p class="message-body">
                            There are no fees applied to this <%= configFunctions.getProperty("aliases.occupancy").toLowerCase() %> record.
                        </p>
                    </div>
                <% } else { %>
                    <%
                        let feeAmountTotal = 0;
                        let taxAmountTotal = 0;
                    %>
                    <table class="table is-fullwidth is-striped is-hoverable">
                        <thead>
                          <tr>
                            <th>Fee</th>
                            <th class="has-text-right"><span class="is-sr-only">Unit Cost</span></th>
                            <th class="has-width-1"><span class="is-sr-only">&times;</span></th>
                            <th class="has-width-1 has-text-right"><span class="is-sr-only">Quantity</span></th>
                            <th class="has-width-1"><span class="is-sr-only">=</span></th>
                            <th class="has-width-1 has-text-right">Total</th>
                          </tr>
                        </thead>
                        <tbody>
                            <% for (const lotOccupancyFee of lotOccupancy.lotOccupancyFees) { %>
                                <%
                                    feeAmountTotal += (lotOccupancyFee.feeAmount * lotOccupancyFee.quantity);
                                    taxAmountTotal += (lotOccupancyFee.taxAmount * lotOccupancyFee.quantity);
                                %>
                                <tr>
                                    <td colspan="<%= (lotOccupancyFee.quantity === 1 ? "5" : "1") %>">
                                        <%= lotOccupancyFee.feeName %><br />
                                        <span class="tag"><%= lotOccupancyFee.feeCategory %></span>
                                    </td>
                                    <% if (lotOccupancyFee.quantity !== 1) { %>
                                        <td class="has-text-right">$<%= lotOccupancyFee.feeAmount.toFixed(2) %></td>
                                        <td>&times;</td>
                                        <td class="has-text-right"><%= lotOccupancyFee.quantity %></td>
                                        <td>=</td>
                                    <% } %>
                                    <td class="has-text-right">$<%= (lotOccupancyFee.feeAmount * lotOccupancyFee.quantity).toFixed(2) %></td>
                                </tr>
                            <% } %>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th colspan="5">Subtotal</th>
                                <td class="has-text-right has-text-weight-bold">$<%= feeAmountTotal.toFixed(2) %></td>
                            </tr>
                            <tr>
                                <th colspan="5">Tax</th>
                                <td class="has-text-right">$<%= taxAmountTotal.toFixed(2) %></td>
                            </tr>
                            <tr>
                                <th colspan="5">Grand Total</th>
                                <td class="has-text-right has-text-weight-bold">$<%= (feeAmountTotal + taxAmountTotal).toFixed(2) %></td>
                            </tr>
                        </tfoot>
                    </table>
                <% } %>
            </div>
        </div>
    </div>
    <div class="column">
        <div class="panel">
            <h2 class="panel-heading">Transactions</h2>
            <div class="panel-block is-block">
                <% if (lotOccupancy.lotOccupancyTransactions.length === 0) { %>
                    <div class="message is-info">
                        <p class="message-body">
                            There are no transactions associated with this <%= configFunctions.getProperty("aliases.occupancy").toLowerCase() %> record.
                        </p>
                    </div>
                <% } else { %>
                    <table class="table is-fullwidth is-striped is-hoverable">
                        <thead>
                          <tr>
                            <th>Date</th>
                            <th><%= configFunctions.getProperty("aliases.externalReceiptNumber") %></th>
                            <th class="has-text-right">Amount</th>
                          </tr>
                        </thead>
                        <tbody>
                            <% let transactionTotal = 0; %>
                            <% for (const lotOccupancyTransaction of lotOccupancy.lotOccupancyTransactions) { %>
                                <% transactionTotal += lotOccupancyTransaction.transactionAmount; %>
                                <tr>
                                    <td><%= lotOccupancyTransaction.transactionDateString %></td>
                                    <td>
                                      <% if (lotOccupancyTransaction.externalReceiptNumber !== '') { %>
                                        <%= lotOccupancyTransaction.externalReceiptNumber %><br />
                                      <% } %>
                                      <small><%= lotOccupancyTransaction.transactionNote %></small>
                                    </td>
                                    <td class="has-text-right">
                                        $<%= lotOccupancyTransaction.transactionAmount.toFixed(2) %>
                                    </td>
                                </tr>
                            <% } %>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th colspan="2">Transaction Total</th>
                                <td class="has-text-weight-bold has-text-right">
                                    $<%= transactionTotal.toFixed(2) %>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                <% } %>
            </div>
        </div>
    </div>
</div>

<%- include('_footerA'); -%>

<%- include('_footerB'); -%>