Initial idea for dashboard (#109)

app/filters.js

@@ -10,6 +10,15 @@ module.exports = function (env) { /* eslint-disable-line no-unused-vars */
    */
   const filters = prototypeFilters;
 
+
+  filters.dayName = function(isoDate) {
+
+    const date = new Date(Date.parse(isoDate))
+    const dateFormatter = new Intl.DateTimeFormat('en-GB', {weekday: 'short'});
+
+    return dateFormatter.format(date)
+  }
+
   /* ------------------------------------------------------------------
     add your methods to the filters obj below this comment block:
     @example:

app/routes.js

@@ -12,5 +12,6 @@ require('./routes/reports')(router)
 require('./routes/prototype-admin')(router)
 require('./routes/support')(router)
 require('./routes/auth')(router)
+require('./routes/home')(router)
 
 module.exports = router;

app/routes/home.js

@@ -0,0 +1,92 @@
+module.exports = router => {
+
+  // Dashboard
+  router.get('/home', (req, res) => {
+
+    const dateToday = new Date()
+
+    const stats = []
+
+    let vaccines = ["RSV", "Pertussis"]
+
+    if (Math.random() > 0.5) { vaccines.push("Flu") }
+    if (Math.random() > 0.5) { vaccines.push("Covid") }
+
+    for (vaccine of vaccines) {
+
+      let vaccineStat = {
+        vaccine: vaccine,
+        days: []
+      }
+
+      for (let i = -1; i < 8; i++) {
+
+        let day = new Date(dateToday)
+        day.setDate(day.getDate() - i)
+
+        let count = Math.round(Math.random() * 20) + 1
+        if (i > 0) {
+          count += Math.round(Math.random() * 150)
+        }
+
+        vaccineStat.days.push({
+          date: day.toISOString().substring(0,10),
+          count: count
+        })
+      }
+
+      stats.push(vaccineStat)
+    }
+
+    res.render('home/index', {
+      stats
+    })
+  })
+
+  // Site-specific dashboard
+  router.get('/home/:siteId', (req, res) => {
+
+    const siteId = req.params.siteId
+    const site = req.session.data.sites[siteId]
+    const dateToday = new Date()
+    const stats = []
+
+    let vaccines = ["RSV", "Pertussis"]
+
+    if (Math.random() > 0.5) { vaccines.push("Flu") }
+    if (Math.random() > 0.5) { vaccines.push("Covid") }
+
+    for (vaccine of vaccines) {
+
+      let vaccineStat = {
+        vaccine: vaccine,
+        days: []
+      }
+
+      for (let i = -1; i < 8; i++) {
+
+        let day = new Date(dateToday)
+        day.setDate(day.getDate() - i)
+
+        let count = Math.round(Math.random() * 5) + 1
+        if (i > 0) {
+          count += Math.round(Math.random() * 30)
+        }
+
+        vaccineStat.days.push({
+          date: day.toISOString().substring(0,10),
+          count: count
+        })
+      }
+
+      stats.push(vaccineStat)
+    }
+
+
+    res.render('home/site', {
+      site,
+      siteId,
+      stats
+    })
+  })
+}

app/views/home/index.html

@@ -0,0 +1,169 @@
+{% extends 'layout.html' %}
+
+{% block pageTitle %}
+  {{ currentOrganisation.name }} – Home
+{% endblock %}
+
+{% set currentSection = "home" %}
+
+{% set sites = [] %}
+{% for vaccine in (data.vaccines) %}
+  {% if not (sites | arrayOrStringIncludes(vaccine.siteCode)) %}
+    {% set sites = (sites.push(vaccine.siteCode), sites) %}
+  {% endif %}
+{% endfor %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+      <h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-6">{{ currentOrganisation.name }}</h1>
+
+      <h2 class="nhsuk-heading-m">Total vaccinations</h2>
+
+    </div>
+  </div>
+
+
+<ul class="nhsuk-grid-row nhsuk-card-group">
+
+    <li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
+      {% set cardHtml %}
+        <p class="nhsuk-heading-xl nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1">38</p>
+        Today
+      {% endset %}
+
+      {{ card({
+        headingHtml: cardHtml
+      }) }}
+    </li>
+
+    <li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
+      {% set cardHtml %}
+        <p class="nhsuk-heading-xl nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1">134</p>
+        Past 7 days
+      {% endset %}
+
+      {{ card({
+        headingHtml: cardHtml
+      }) }}
+    </li>
+
+
+    <li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
+      {% set cardHtml %}
+        <p class="nhsuk-heading-xl nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1">546</p>
+        October so far
+      {% endset %}
+
+      {{ card({
+        headingHtml: cardHtml
+      }) }}
+    </li>
+
+
+    <li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
+      {% set cardHtml %}
+        <p class="nhsuk-heading-xl nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1"><span class="nhsuk-u-font-size-48">16,141</span></p>
+        Since 1 Sep 2024
+      {% endset %}
+
+      {{ card({
+        headingHtml: cardHtml
+      }) }}
+    </li>
+</ul>
+
+
+
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-three-quarters">
+
+      <table class="nhsuk-table">
+        <caption class="nhsuk-table__caption nhsuk-table__caption--m">Past 7 days by vaccine</caption>
+        <thead role="rowgroup" class="nhsuk-table__head">
+          <tr role="row">
+            <th role="columnheader" class="" scope="col">
+              Date
+            </th>
+            {% for vaccineStat in stats %}
+              <th role="columnheader" class=" nhsuk-table__header--numeric" scope="col">
+                {{ vaccineStat.vaccine }}
+              </th>
+            {% endfor %}
+            <th role="columnheader" class="nhsuk-table__header--numeric" scope="col">
+              Total
+            </th>
+          </tr>
+        </thead>
+        <tbody class="nhsuk-table__body">
+
+          {% set firstStat = (stats | first ) %}
+
+          {% for date in firstStat.days %}
+            {% if not loop.index0 == 0 %}
+              {% set total = 0 %}
+              <tr role="row" class="nhsuk-table__row">
+                <th class="nhsuk-table__header  nhsuk-u-font-weight-normal" scope="row">
+                  {% if loop.index0 == 1 %}
+                    Today
+                  {% else %}
+                    {{ date.date | dayName }} {{ date.date | govukDate("truncate") }}
+
+                    {% if loop.index0 == 2 %}(yesterday){% endif %}
+                  {% endif %}
+                </th>
+
+                {% set dayIndex = loop.index0 %}
+                {% for vaccineStat in stats %}
+                  {% set total = total + vaccineStat.days[dayIndex].count %}
+                  <td class="nhsuk-table__cell nhsuk-table__cell--numeric">{{ vaccineStat.days[dayIndex].count }}</td>
+                {% endfor %}
+                <td class="nhsuk-table__cell nhsuk-table__cell--numeric">{{ total }}</td>
+              </tr>
+            {% endif %}
+          {% endfor %}
+
+        </tbody>
+      </table>
+
+
+      {% if (sites | length) > 1 %}
+        <table class="nhsuk-table">
+          <caption class="nhsuk-table__caption nhsuk-table__caption--m">Past 7 days by site</caption>
+          <thead role="rowgroup" class="nhsuk-table__head">
+            <tr role="row">
+              <th role="columnheader" class="" scope="col">
+                Site
+              </th>
+              {% for vaccineStat in stats %}
+                <th role="columnheader" class=" nhsuk-table__header--numeric" scope="col">
+                  {{ vaccineStat.vaccine }}
+                </th>
+              {% endfor %}
+              <th role="columnheader" class="nhsuk-table__header--numeric" scope="col">
+                Total
+              </th>
+            </tr>
+          </thead>
+          <tbody class="nhsuk-table__body">
+            {% for site in sites %}
+              {% set runningTotal = 0 %}
+              <tr>
+                <th class="nhsuk-table__header nhsuk-u-font-weight-normal" scope="row"><a href="/home/{{ site }}">{{ data.sites[site].name }}</a></th>
+                {% for vaccineStat in stats %}
+                  {% set count = ((vaccineStat.days | first).count) * 3  %}
+                  {% set runningTotal = runningTotal + count %}
+                  <td class="nhsuk-table__cell nhsuk-table__cell--numeric">{{ count }}</td>
+                {% endfor %}
+                <td class="nhsuk-table__cell nhsuk-table__cell--numeric">{{ runningTotal }}</td>
+              </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      {% endif %}
+
+      <p>For a more detailed breakdown, <a href="/reports">create a report</a>.</p>
+
+    </div>
+  </div>
+{% endblock %}