views/dashboard.ejs
<%- include('_header'); -%>
<h1 class="title is-1 is-size-3-mobile">
<%= configFunctions.getConfigProperty("application.applicationName") %>
</h1>
<%
const includeAbsences = configFunctions.getConfigProperty('features.attendance.absences') && permissionFunctions.hasPermission(user, 'attendance.absences.canView')
const includeReturnsToWork = configFunctions.getConfigProperty('features.attendance.returnsToWork') && permissionFunctions.hasPermission(user, 'attendance.returnsToWork.canView')
const includeCallOuts = configFunctions.getConfigProperty('features.attendance.callOuts') && permissionFunctions.hasPermission(user, 'attendance.callOuts.canView')
const includeAfterHours = configFunctions.getConfigProperty('features.attendance.afterHours') && permissionFunctions.hasPermission(user, 'attendance.afterHours.canView')
%>
<div class="columns">
<% if (configFunctions.includeAttendance() && permissionFunctions.hasAttendance(user)) { %>
<div class="column">
<div class="box">
<div class="media">
<div class="media-left">
<span class="fa-layers fa-4x fa-fw" aria-hidden="true">
<i class="fas fa-hard-hat"></i>
<i class="fas fa-check" data-fa-transform="shrink-8 right-8 down-5" data-fa-glow="10"></i>
</span>
</div>
<a class="media-content" href="<%= urlPrefix %>/attendance">
<h2 class="title is-4 is-marginless has-text-link">
Employee Attendance
</h2>
<p>
<% if (includeAbsences) { %>
Track absence requests.
<% } %>
<% if (includeReturnsToWork) { %>
Record return to work notices.
<% } %>
<% if (includeCallOuts) { %>
Manage employee call outs.
<% } %>
<% if (includeAfterHours) { %>
Track after hours attendance.
<% } %>
</p>
</a>
</div>
</div>
<% if (includeCallOuts) { %>
<div class="panel" id="container--favouriteCallOutLists">
<div class="panel-heading">
<div class="is-flex is-justify-content-space-between">
<h2 class="has-text-weight-bold">Favourite Call Out Lists</h2>
<span class="icon"><i class="fas fa-star" aria-hidden="true"></i></span>
</div>
</div>
</div>
<% } %>
<% if (includeAbsences || includeReturnsToWork) { %>
<div class="panel">
<h2 class="panel-heading">Today's Incoming Calls</h2>
<div class="panel-block is-block">
<div class="tabs is-boxed">
<ul role="presentation">
<% if (includeAbsences) { %>
<li class="is-active">
<a href="#tab--attendance-absences">
<span>Absences</span>
<span class="tag ml-2"><%= absenceRecords.length %></span>
</a>
</li>
<% } %>
<% if (includeReturnsToWork) { %>
<li>
<a href="#tab--attendance-returnsToWork">
<span>Returns to Work</span>
<span class="tag ml-2"><%= returnToWorkRecords.length %></span>
</a>
</li>
<% } %>
</ul>
</div>
<div class="tabs-container">
<% if (includeAbsences) { %>
<div id="tab--attendance-absences">
<% if (absenceRecords.length === 0) { %>
<div class="message is-info">
<p class="message-body is-size-7">
There are no absence records for today.
</p>
</div>
<% } else { %>
<div class="panel is-shadowless">
<% for (const absenceRecord of absenceRecords) {%>
<div class="panel-block is-block" tabindex="0">
<div class="columns is-mobile">
<div class="column is-narrow">
<i class="fas fa-sign-out-alt" aria-hidden="true"></i>
</div>
<div class="column is-4">
<strong data-tooltip="Absence Date">
<%= dateTimeFunctions.dateToString(absenceRecord.absenceDateTime) %>
</strong>
</div>
<div class="column">
<strong><%= absenceRecord.employeeName %></strong><br />
<span data-tooltip="Absence Type"><%= absenceRecord.absenceType %></span>
</div>
<% if ((absenceRecord.callOutLists ?? []).length > 0) { %>
<div class="column is-narrow">
<div class="dropdown is-right">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true">
<span class="icon"><i class="fas fa-phone" aria-hidden="true"></i></span>
<span class="icon"><i class="fas fa-caret-down" aria-hidden="true"></i></span>
</button>
</div>
<div class="dropdown-menu">
<div class="dropdown-content">
<% for (const callOutList of absenceRecord.callOutLists) { %>
<a class="dropdown-item is-call-out-list" data-list-id="<%= callOutList.listId %>" href="#">
<%= callOutList.listName %>
</a>
<% } %>
</div>
</div>
</div>
</div>
<% } %>
</div>
</div>
<% } %>
</div>
<% } %>
</div>
<% } %>
<% if (includeReturnsToWork) { %>
<div class="is-hidden" id="tab--attendance-returnsToWork">
<% if (returnToWorkRecords.length === 0) { %>
<div class="message is-info">
<p class="message-body is-size-7">
There are no return to work records for today.
</p>
</div>
<% } else { %>
<div class="panel is-shadowless">
<% for (const returnToWorkRecord of returnToWorkRecords) {%>
<div class="panel-block is-block" tabindex="0">
<div class="columns is-mobile">
<div class="column is-narrow">
<i class="fas fa-sign-in-alt" aria-hidden="true"></i>
</div>
<div class="column is-4">
<strong data-tooltip="Return Date">
<%= dateTimeFunctions.dateToString(returnToWorkRecord.returnDateTime) %>
</strong>
</div>
<div class="column">
<strong><%= returnToWorkRecord.employeeName %></strong><br />
<span data-tooltip="Return Shift"><%= returnToWorkRecord.returnShift %></span>
</div>
</div>
</div>
<% } %>
</div>
<% } %>
</div>
<% } %>
</div>
</div>
</div>
<% } %>
</div>
<% } %>
<div class="column">
<div class="box">
<div class="media">
<div class="media-left">
<i class="fas fa-4x fa-fw fa-file" aria-hidden="true"></i>
</div>
<a class="media-content" href="<%= urlPrefix %>/reports">
<h2 class="title is-4 is-marginless has-text-link">
Report Library
</h2>
<p>Produce reports and export data.</p>
</a>
</div>
</div>
<% if (configFunctions.getConfigProperty('features.help') || configFunctions.getConfigProperty('features.selfService')) { %>
<% if (configFunctions.getConfigProperty('features.help')) { %>
<div class="box">
<div class="media">
<div class="media-left">
<i class="fas fa-4x fa-fw fa-question-circle" aria-hidden="true"></i>
</div>
<a class="media-content" href="https://cityssm.github.io/attendance-tracking/docs" target="_blank" rel="noopener noreferrer">
<h2 class="title is-4 is-marginless has-text-link">
Help
</h2>
<p>
Instructions on how to use this application.
</p>
</a>
</div>
</div>
<% } %>
<% if (configFunctions.getConfigProperty('features.selfService')) { %>
<div class="box">
<div class="media">
<div class="media-left">
<span class="fa-layers fa-4x fa-fw" aria-hidden="true">
<i class="fas fa-hard-hat"></i>
<i class="fas fa-exchange-alt" data-fa-transform="shrink-8 right-8 down-5" data-fa-glow="10"></i>
</span>
</div>
<a class="media-content"
<% if (employeeNumber !== '') { %>
data-employee-number="<%= employeeNumber %>"
data-last-four-digits="<%= lastFourDigits %>"
data-last-four-digits-bad="<%= lastFourDigitsBad %>"
<% } %>
href="<%= urlPrefix + configFunctions.getConfigProperty('settings.selfService.path') %>"
target="_blank"
rel="noopener noreferrer">
<h2 class="title is-4 is-marginless has-text-link">
Employee Self Service
</h2>
<p>The interface for employees to manage aspects of their employee records.</p>
</a>
</div>
</div>
<% } %>
<% } %>
<% if (user.isAdmin) { %>
<div class="panel">
<div class="panel-heading">
<a class="is-flex is-justify-content-space-between is-panel-block-toggle" href="#">
<h2 class="has-text-weight-bold">Administrator Tools</h2>
<span class="icon"><i class="fas fa-chevron-down" aria-hidden="true"></i></span>
</a>
</div>
<div class="panel-block is-block is-hidden">
<div class="media py-2">
<div class="media-left">
<span class="fa-layers fa-3x fa-fw" aria-hidden="true">
<i class="fas fa-hard-hat"></i>
<i class="fas fa-cog has-text-warning-dark" data-fa-transform="shrink-8 right-8 down-5" data-fa-glow="10"></i>
</span>
</div>
<a class="media-content" href="<%= urlPrefix %>/admin/employees">
<h2 class="title is-4 is-marginless has-text-link">
Employee Maintenance
</h2>
<p>
Manage employees and their attributes.
</p>
</a>
</div>
</div>
<div class="panel-block is-block is-hidden">
<div class="media py-2">
<div class="media-left">
<span class="fa-layers fa-3x fa-fw" aria-hidden="true">
<i class="fas fa-table"></i>
<i class="fas fa-cog has-text-warning-dark" data-fa-transform="shrink-8 right-8 down-5" data-fa-glow="10"></i>
</span>
</div>
<a class="media-content" href="<%= urlPrefix %>/admin/tables">
<h2 class="title is-4 is-marginless has-text-link">
Table Maintenance
</h2>
<p>
Maintain configuration tables.
</p>
</a>
</div>
</div>
<div class="panel-block is-block is-hidden">
<div class="media py-2">
<div class="media-left">
<span class="fa-layers fa-3x fa-fw" aria-hidden="true">
<i class="fas fa-users"></i>
<i class="fas fa-cog has-text-warning-dark" data-fa-transform="shrink-8 right-8 down-5" data-fa-glow="10"></i>
</span>
</div>
<a class="media-content" href="<%= urlPrefix %>/admin/users">
<h2 class="title is-4 is-marginless has-text-link">
User Maintenance
</h2>
<p>
Manage users and permissions.
</p>
</a>
</div>
</div>
</div>
<% } %>
</div>
</div>
<%- include('_footerA'); -%>
<% if (includeCallOuts) { %>
<script>
exports.callOutLists = <%- JSON.stringify(callOutLists) %>;
exports.callOutResponseTypes = <%- JSON.stringify(callOutResponseTypes) %>;
</script>
<script src="<%= urlPrefix %>/javascripts/main.callOuts.min.js"></script>
<% } %>
<script src="<%= urlPrefix %>/javascripts/dashboard.min.js"></script>
<%- include('_footerB'); -%>