Add filters for attendance status

Author: edwardhorsford

app/lib/utils/status.js

@@ -45,7 +45,22 @@ const getStatusDescription = (status) => {
   return descriptions[status] || status;
 }
 
+
+  const filterEventsByStatus = (events, filter) => {
+    switch(filter) {
+      case 'scheduled':
+        return events.filter(e => e.status === 'scheduled');
+      case 'checked-in':
+        return events.filter(e => e.status === 'checked_in');
+      case 'attended':
+        return events.filter(e => ['attended', 'attended_not_screened'].includes(e.status));
+      default:
+        return events;
+    }
+  }
+
 module.exports = {
   getStatusTagColour,
-  getStatusDescription
+  getStatusDescription,
+  filterEventsByStatus
 };

app/routes/clinics.js

@@ -40,25 +40,6 @@ module.exports = router => {
     res.render('clinics/today');
   });
 
-  // Single clinic view
-  router.get('/clinics/:id', (req, res) => {
-    const clinicData = getClinicData(req.session.data, req.params.id);
-    
-    if (!clinicData) {
-      res.redirect('/clinics');
-      return;
-    }
-
-    res.render('clinics/show', {
-      clinicId: req.params.id,
-      clinic: clinicData.clinic,
-      events: clinicData.events,
-      unit: clinicData.unit,
-      formatDate: (date) => dayjs(date).format('D MMMM YYYY'),
-      formatTime: (date) => dayjs(date).format('HH:mm')
-    });
-  });
-
   // View participant within clinic context
   router.get('/clinics/:clinicId/participants/:participantId', (req, res) => {
     const participant = req.session.data.participants.find(p => p.id === req.params.participantId);
@@ -82,6 +63,53 @@ module.exports = router => {
     });
   });
 
+  function filterEvents(events, filter) {
+    switch(filter) {
+      case 'scheduled':
+        return events.filter(e => e.status === 'scheduled');
+      case 'checked-in':
+        console.log('filtering checked in')
+        return events.filter(e => e.status === 'checked_in');
+      case 'attended':
+        return events.filter(e => ['attended', 'attended_not_screened'].includes(e.status));
+      default:
+        return events;
+    }
+  }
 
+  // Single clinic view
+  const VALID_FILTERS = ['scheduled', 'checked-in', 'attended', 'all'];
+
+  // Support both /clinics/:id and /clinics/:id/:filter
+  router.get(['/clinics/:id', '/clinics/:id/:filter'], (req, res) => {
+    const clinicData = getClinicData(req.session.data, req.params.id);
+    
+    if (!clinicData) {
+      return res.redirect('/clinics');
+    }
+
+    // Check filter from either URL param or query string
+    let filter = req.params.filter || req.query.filter || 'all';
+
+    // Validate filter
+    if (!VALID_FILTERS.includes(filter)) {
+      return res.redirect(`/clinics/${req.params.id}`);
+    }
+
+    console.log(`Events before: ${clinicData.events.length}`)
+    const filteredEvents = filterEvents(clinicData.events, filter);
+    console.log(`Events after: ${filteredEvents.length}`)
+
+    res.render('clinics/show', {
+      clinicId: req.params.id,
+      clinic: clinicData.clinic,
+      allEvents: clinicData.events,
+      filteredEvents: filteredEvents,
+      unit: clinicData.unit,
+      currentFilter: filter,
+      formatDate: (date) => dayjs(date).format('D MMMM YYYY'),
+      formatTime: (date) => dayjs(date).format('HH:mm')
+    });
+  });
 
 };

app/views/clinics/show.html

@@ -3,17 +3,39 @@
 
 {% block pageContent %}
   {% set unit = data.breastScreeningUnits | findById(clinic.breastScreeningUnitId) %}
-  {% set events = data.events | getClinicEvents(clinicId) %}
+  {# {% set events = data.events | getClinicEvents(clinicId) %} #}
+  {% set events = allEvents %}
 
   <h1 class="nhsuk-heading-l">
     <span class="nhsuk-caption-l">{{ unit.name }}</span>
     {{ clinic.serviceType | sentenceCase }} clinic on {{ clinic.date | formatDate }}
   </h1>
 
-  {% if events.length === 0 %}
+  <nav class="nhsuk-tabs">
+    <ul class="nhsuk-tabs__list">
+      {% for filter in [
+        { id: 'all', label: 'All participants' },
+        { id: 'scheduled', label: 'Scheduled' },
+        { id: 'checked-in', label: 'Checked in' },
+        { id: 'attended', label: 'Attended' }
+      ] %}
+        <li class="nhsuk-tabs__list-item">
+          <a class="nhsuk-tabs__tab {% if currentFilter === filter.id %}nhsuk-tabs__tab--selected{% endif %}" 
+             href="/clinics/{{ clinicId }}/{{ filter.id if filter.id !== 'all' }}">
+            {{ filter.label }}
+            <span class="nhsuk-tag nhsuk-tag--grey">
+              {{ events | filterEventsByStatus(filter.id) | length }}
+            </span>
+          </a>
+        </li>
+      {% endfor %}
+    </ul>
+  </nav>
+
+  {% if filteredEvents.length === 0 %}
     <p>No participants scheduled for this clinic.</p>
   {% else %}
-    <p>{{ events.length }} scheduled participants</p>
+    <p>{{ filteredEvents.length }} scheduled participants</p>
 
     <table class="nhsuk-table">
       <thead class="nhsuk-table__head">
@@ -27,7 +49,7 @@ <h1 class="nhsuk-heading-l">
         </tr>
       </thead>
       <tbody class="nhsuk-table__body">
-        {% for event in events %}
+        {% for event in filteredEvents %}
           {% set participant = data.participants | findById(event.participantId) %}
           <tr>
             <td class="nhsuk-table__cell">{{ event.statusHistory[0].timestamp | formatTime }}</td>