@mongoosejs/studio 0.3.6 → 0.3.8

package/frontend/public/tw.css

@@ -1220,6 +1220,10 @@ video {
   width: 1rem;
 }
 
+.w-40 {
+  width: 10rem;
+}
+
 .w-44 {
   width: 11rem;
 }
@@ -1236,6 +1240,10 @@ video {
   width: 13rem;
 }
 
+.w-56 {
+  width: 14rem;
+}
+
 .w-6 {
   width: 1.5rem;
 }
@@ -3060,14 +3068,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.hover\:rounded-lg:hover {
-  border-radius: 0.5rem;
-}
-
-.hover\:border:hover {
-  border-width: 1px;
-}
-
 .hover\:border-edge-strong:hover {
   border-color: var(--color-edge-strong);
 }
@@ -3617,10 +3617,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.group:hover .group-hover\:text-content-secondary {
-  color: var(--color-content-secondary);
-}
-
 .group:hover .group-hover\:text-primary {
   color: var(--color-primary);
 }
@@ -3796,6 +3792,12 @@ video {
   }
 }
 
+@media (min-width: 1280px) {
+  .xl\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
 :is(:where(.dark) .dark\:bg-shark-800) {
   --tw-bg-opacity: 1;
   background-color: rgb(33 37 41 / var(--tw-bg-opacity));

package/frontend/src/api.js

@@ -191,6 +191,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     getTaskOverview: function getTaskOverview(params) {
       return client.post('', { action: 'Task.getTaskOverview', ...params }).then(res => res.data);
     },
+    getTasksOverTime: function getTasksOverTime(params) {
+      return client.post('', { action: 'Task.getTasksOverTime', ...params }).then(res => res.data);
+    },
     rescheduleTask: function rescheduleTask(params) {
       return client.post('', { action: 'Task.rescheduleTask', ...params }).then(res => res.data);
     },
@@ -531,6 +534,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     getTaskOverview: function getTaskOverview(params) {
       return client.post('/Task/getTaskOverview', params).then(res => res.data);
     },
+    getTasksOverTime: function getTasksOverTime(params) {
+      return client.post('/Task/getTasksOverTime', params).then(res => res.data);
+    },
     rescheduleTask: function rescheduleTask(params) {
       return client.post('/Task/rescheduleTask', params).then(res => res.data);
     },

package/frontend/src/dashboard-result/dashboard-primitive/dashboard-primitive.html

@@ -2,7 +2,7 @@
   <div v-if="header" class="border-b border-gray-100 px-2 pb-2 text-xl font-bold">
     {{header}}
   </div>
-  <div class="text-xl p-2">
+  <div class="text-xl p-2" :class="displayClass">
     {{displayValue}}
   </div>
-</div>
+</div>

package/frontend/src/dashboard-result/dashboard-primitive/dashboard-primitive.js

@@ -9,16 +9,28 @@ module.exports = app => app.component('dashboard-primitive', {
   props: ['value'],
   computed: {
     header() {
-      if (this.value != null && this.value.$primitive.header) {
+      if (this.value != null && this.value.$primitive?.header) {
         return this.value.$primitive.header;
       }
       return null;
     },
     displayValue() {
       if (this.value != null && this.value.$primitive) {
+        if (this.value.$primitive.value === null) {
+          return 'null';
+        }
         return this.value.$primitive.value;
       }
+      if (this.value === null) {
+        return 'null';
+      }
       return this.value;
+    },
+    displayClass() {
+      if (this.value == null) {
+        return 'text-content-tertiary';
+      }
+      return null;
     }
   }
 });

package/frontend/src/dashboard-result/dashboard-result.html

@@ -1,6 +1,6 @@
 <div>
   <div v-if="Array.isArray(result)">
-    <div v-for="el in result" :key="el._id || el.finishedEvaluatingAt">
+    <div v-for="(el, index) in result">
       <component
         class="bg-surface shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl"
         :is="getComponentForValue(el)"

package/frontend/src/dashboard-result/dashboard-table/dashboard-table.html

@@ -7,7 +7,27 @@
           :key="'column-' + index"
           class="bg-slate-50 p-3 text-left text-sm font-semibold text-content border-b border-edge"
         >
-          {{ column }}
+          <div v-if="index === columns.length - 1" class="relative flex items-center gap-2 w-full" ref="dropdown">
+            <span class="min-w-0 flex-1">{{ column }}</span>
+            <button
+              @click.stop="toggleDropdown"
+              class="ml-auto rounded p-1 text-content-secondary hover:bg-muted hover:text-content"
+              aria-label="Table actions">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M10 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4z" />
+              </svg>
+            </button>
+            <div
+              v-if="showDropdown"
+              class="absolute right-0 top-full z-10 mt-2 w-56 origin-top-right rounded-md bg-surface py-1 shadow-lg ring-1 ring-black/5">
+              <button
+                class="block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted"
+                @click="downloadCsv(); showDropdown = false">
+                Download as CSV
+              </button>
+            </div>
+          </div>
+          <template v-else>{{ column }}</template>
         </th>
       </tr>
     </thead>

package/frontend/src/dashboard-result/dashboard-table/dashboard-table.js

@@ -1,3 +1,4 @@
+/* global Blob, URL, document */
 'use strict';
 
 const template = require('./dashboard-table.html');
@@ -5,6 +6,11 @@ const template = require('./dashboard-table.html');
 module.exports = app => app.component('dashboard-table', {
   template,
   props: ['value'],
+  data() {
+    return {
+      showDropdown: false
+    };
+  },
   computed: {
     columns() {
       return Array.isArray(this.value?.$table?.columns) ? this.value.$table.columns : [];
@@ -20,6 +26,46 @@ module.exports = app => app.component('dashboard-table', {
     }
   },
   methods: {
+    toggleDropdown() {
+      this.showDropdown = !this.showDropdown;
+    },
+    handleBodyClick(event) {
+      const dropdownRefs = this.$refs.dropdown;
+      const dropdowns = Array.isArray(dropdownRefs) ? dropdownRefs : [dropdownRefs];
+      const hasClickInsideDropdown = dropdowns
+        .filter(dropdown => dropdown && typeof dropdown.contains === 'function')
+        .some(dropdown => dropdown.contains(event.target));
+
+      if (!hasClickInsideDropdown) {
+        this.showDropdown = false;
+      }
+    },
+    neutralizeCsvCell(cell) {
+      const value = this.displayValue(cell);
+      return /^\s*[=+\-@]/.test(value) ? `'${value}` : value;
+    },
+    escapeCsvCell(cell) {
+      const escapedCell = this.neutralizeCsvCell(cell).replaceAll('"', '""');
+      return `"${escapedCell}"`;
+    },
+    downloadCsv() {
+      const header = this.columns.map(this.escapeCsvCell).join(',');
+      const rows = this.rows
+        .map(row => row.map(this.escapeCsvCell).join(','))
+        .join('\n');
+
+      const csv = [header, rows].filter(v => v.length > 0).join('\n');
+      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+      const url = URL.createObjectURL(blob);
+      const anchor = document.createElement('a');
+      anchor.href = url;
+      anchor.download = 'table.csv';
+      document.body.appendChild(anchor);
+      anchor.click();
+      document.body.removeChild(anchor);
+      URL.revokeObjectURL(url);
+      this.$toast.success('CSV downloaded!');
+    },
     displayValue(cell) {
       if (cell == null) {
         return '';
@@ -33,5 +79,11 @@ module.exports = app => app.component('dashboard-table', {
       }
       return String(cell);
     }
+  },
+  mounted() {
+    document.body.addEventListener('click', this.handleBodyClick);
+  },
+  unmounted() {
+    document.body.removeEventListener('click', this.handleBodyClick);
   }
 });

package/frontend/src/detail-date/detail-date.html

@@ -0,0 +1 @@
+<pre class="w-full whitespace-pre-wrap break-words font-mono text-sm text-content-secondary m-0">{{displayValue}}</pre>

package/frontend/src/detail-date/detail-date.js

@@ -0,0 +1,123 @@
+'use strict';
+
+const template = require('./detail-date.html');
+
+module.exports = app => app.component('detail-date', {
+  template,
+  props: ['value', 'viewMode'],
+  emits: ['updated'],
+  watch: {
+    displayValue: {
+      immediate: true,
+      handler(val) {
+        this.$emit('updated', val);
+      }
+    }
+  },
+  computed: {
+    format() {
+      if (this.viewMode != null && typeof this.viewMode === 'object') {
+        return this.viewMode.format;
+      }
+      return this.viewMode;
+    },
+    timezone() {
+      if (this.viewMode != null && typeof this.viewMode === 'object') {
+        return this.viewMode.timezone || '';
+      }
+      return '';
+    },
+    parsedDate() {
+      if (this.value == null) {
+        return null;
+      }
+      const date = new Date(this.value);
+      return Number.isNaN(date.getTime()) ? null : date;
+    },
+    displayValue() {
+      if (this.value == null) {
+        return String(this.value);
+      }
+      if (!this.parsedDate) {
+        return 'Invalid Date';
+      }
+      return this.formatDateForDisplay(this.parsedDate);
+    }
+  },
+  methods: {
+    formatDateForDisplay(date) {
+      if (!(date instanceof Date) || Number.isNaN(date.getTime())) {
+        return 'Invalid Date';
+      }
+
+      if (this.format === 'utc_iso') {
+        return date.toISOString();
+      }
+
+      if (this.format === 'local_browser') {
+        return date.toLocaleString();
+      }
+
+      if (this.format === 'unix_ms') {
+        return String(date.getTime());
+      }
+
+      if (this.format === 'unix_seconds') {
+        return String(Math.floor(date.getTime() / 1000));
+      }
+
+      if (this.format === 'duration_relative') {
+        return this.formatRelativeDuration(date);
+      }
+
+      if (this.format === 'custom_tz') {
+        return this.formatCustomTimezone(date);
+      }
+
+      return date.toISOString();
+    },
+    formatRelativeDuration(date) {
+      const diffMs = date.getTime() - Date.now();
+      const absMs = Math.abs(diffMs);
+      const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' });
+      const units = [
+        { unit: 'year', ms: 365 * 24 * 60 * 60 * 1000 },
+        { unit: 'month', ms: 30 * 24 * 60 * 60 * 1000 },
+        { unit: 'day', ms: 24 * 60 * 60 * 1000 },
+        { unit: 'hour', ms: 60 * 60 * 1000 },
+        { unit: 'minute', ms: 60 * 1000 },
+        { unit: 'second', ms: 1000 }
+      ];
+
+      for (const { unit, ms } of units) {
+        if (absMs >= ms || unit === 'second') {
+          const value = Math.round(diffMs / ms);
+          return rtf.format(value, unit);
+        }
+      }
+
+      return 'now';
+    },
+    formatCustomTimezone(date) {
+      const tz = (this.timezone || '').trim();
+      if (!tz) {
+        return `${date.toISOString()} (enter an IANA timezone)`;
+      }
+
+      try {
+        return new Intl.DateTimeFormat(undefined, {
+          timeZone: tz,
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          timeZoneName: 'short'
+        }).format(date);
+      } catch (err) {
+        return `Invalid timezone: ${tz}`;
+      }
+    }
+  }
+});

package/frontend/src/document-details/date-view-mode-picker/date-view-mode-picker.html

@@ -0,0 +1,26 @@
+<div class="flex items-center gap-2" @click.stop>
+  <select
+    :value="format"
+    @input="onFormatChange($event.target.value)"
+    class="text-xs border border-edge rounded-md bg-surface px-2 py-1"
+  >
+    <option value="utc_iso">UTC (ISO)</option>
+    <option value="local_browser">Local (Browser)</option>
+    <option value="unix_ms">Unix (ms)</option>
+    <option value="unix_seconds">Unix (seconds)</option>
+    <option value="duration_relative">Duration relative to now</option>
+    <option value="custom_tz">Custom TZ...</option>
+  </select>
+  <input
+    v-if="format === 'custom_tz'"
+    :value="timezone"
+    @input="onTimezoneChange($event.target.value.trim())"
+    :list="timezoneDatalistId"
+    type="text"
+    placeholder="America/New_York"
+    class="text-xs border border-edge rounded-md bg-surface px-2 py-1 w-40"
+  >
+  <datalist v-if="format === 'custom_tz'" :id="timezoneDatalistId">
+    <option v-for="tz in timezones" :key="tz" :value="tz"></option>
+  </datalist>
+</div>

package/frontend/src/document-details/date-view-mode-picker/date-view-mode-picker.js

@@ -0,0 +1,41 @@
+'use strict';
+
+const template = require('./date-view-mode-picker.html');
+
+module.exports = app => app.component('date-view-mode-picker', {
+  template,
+  props: ['viewMode', 'path'],
+  emits: ['update:viewMode'],
+  computed: {
+    format() {
+      if (this.viewMode != null && typeof this.viewMode === 'object') {
+        return this.viewMode.format;
+      }
+      return this.viewMode;
+    },
+    timezone() {
+      if (this.viewMode != null && typeof this.viewMode === 'object') {
+        return this.viewMode.timezone || '';
+      }
+      return '';
+    },
+    timezoneDatalistId() {
+      return `timezone-options-${String(this.path?.path || '').replace(/[^a-zA-Z0-9_-]/g, '-')}`;
+    },
+    timezones() {
+      return Intl.supportedValuesOf('timeZone');
+    }
+  },
+  methods: {
+    onFormatChange(newFormat) {
+      if (newFormat === 'custom_tz') {
+        this.$emit('update:viewMode', { format: 'custom_tz', timezone: this.timezone });
+      } else {
+        this.$emit('update:viewMode', newFormat);
+      }
+    },
+    onTimezoneChange(newTimezone) {
+      this.$emit('update:viewMode', { format: 'custom_tz', timezone: newTimezone });
+    }
+  }
+});

package/frontend/src/document-details/document-property/document-property.html

@@ -70,6 +70,12 @@
       </div>
     </div>
     <div class="flex items-center gap-2">
+      <date-view-mode-picker
+        v-if="isDatePath"
+        :viewMode="dateViewMode"
+        :path="path"
+        @update:viewMode="dateViewMode = $event"
+      ></date-view-mode-picker>
       <button
         type="button"
         class="flex items-center gap-1 text-sm text-gray-600 hover:text-gray-800 px-2 py-1 rounded-md border border-transparent hover:border-edge-strong bg-surface"
@@ -125,7 +131,7 @@
         v-if="isGeoJsonGeometry"
         :is="getComponentForPath(path)"
         :value="getEditValueForPath(path)"
-        :view-mode="detailViewMode"
+        :viewMode="detailViewMode"
         :on-change="handleInputChange"
         >
       </component>
@@ -195,8 +201,9 @@
       <div v-else-if="needsTruncation && isValueExpanded" class="relative">
         <component
           :is="getComponentForPath(path)"
-          :value="getValueForPath(path.path)"
-          :view-mode="detailViewMode"></component>
+          :value="rawValue"
+          :viewMode="isDatePath ? dateViewMode : detailViewMode"
+          @updated="renderedValue = $event"></component>
         <button
           @click="toggleValueExpansion"
           class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5"
@@ -211,8 +218,9 @@
       <div v-else>
         <component
           :is="getComponentForPath(path)"
-          :value="getValueForPath(path.path)"
-          :view-mode="detailViewMode"></component>
+          :value="rawValue"
+          :viewMode="isDatePath ? dateViewMode : detailViewMode"
+          @updated="renderedValue = $event"></component>
       </div>
     </div>
   </div>

package/frontend/src/document-details/document-property/document-property.js

@@ -10,11 +10,15 @@ const appendCSS = require('../../appendCSS');
 
 appendCSS(require('./document-property.css'));
 
+const UNSET = Symbol('unset');
+
 module.exports = app => app.component('document-property', {
   template,
   data: function() {
     return {
       dateType: 'picker', // picker, iso
+      dateViewMode: 'utc_iso',
+      renderedValue: UNSET,
       isCollapsed: false, // Start uncollapsed by default
       isValueExpanded: false, // Track if the value is expanded
       detailViewMode: 'text',
@@ -31,8 +35,14 @@ module.exports = app => app.component('document-property', {
   },
   props: ['path', 'document', 'schemaPaths', 'editting', 'changes', 'invalid', 'highlight'],
   computed: {
+    isDatePath() {
+      return this.path?.instance === 'Date';
+    },
+    rawValue() {
+      return this.getValueForPath(this.path.path);
+    },
     valueAsString() {
-      const value = this.getValueForPath(this.path.path);
+      const value = this.renderedValue !== UNSET ? this.renderedValue : this.rawValue;
       if (value == null) {
         return String(value);
       }
@@ -164,6 +174,9 @@ module.exports = app => app.component('document-property', {
       if (schemaPath.instance === 'Array') {
         return 'detail-array';
       }
+      if (schemaPath.instance === 'Date') {
+        return 'detail-date';
+      }
       return 'detail-default';
     },
     getEditComponentForPath(path) {

package/frontend/src/tasks/tasks.html

@@ -79,63 +79,77 @@
                     <div class="text-2xl font-bold">{{cancelledCount}}</div>
                 </button>
             </div>
+
+            <!-- Tasks Over Time Chart -->
+            <!--
+              Canvas is gated by showOverTimeChart (v-if) so Chart.js is destroyed
+              and the DOM node is removed before each refresh. In-place Chart.js
+              updates during Vue re-renders from filter changes could freeze the UI
+              (dropdowns stuck, chart not updating). See tasks.js getTasks().
+            -->
+            <div class="mt-6">
+                <h2 class="text-lg font-semibold text-content-secondary mb-3">Tasks Over Time</h2>
+                <div class="bg-page border border-edge rounded-lg p-4" style="height: 260px;">
+                    <canvas v-if="showOverTimeChart && overTimeBuckets.length > 0" ref="overTimeChart" style="width:100%;height:100%;"></canvas>
+                    <div v-else class="flex items-center justify-center h-full text-content-tertiary text-sm">
+                        No task activity in the selected window
+                    </div>
+                </div>
+            </div>
             
             <!-- Grouped Task List -->
             <div class="mt-6">
                 <h2 class="text-lg font-semibold text-content-secondary mb-4">Tasks by Name</h2>
-                <ul class="divide-y divide-gray-200">
-                    <li v-for="group in tasksByName" :key="group.name" class="p-4 group hover:border hover:rounded-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200">
-                        <div class="flex items-center justify-between mb-3 ">
-                            <div class="flex-1 cursor-pointer" @click="openTaskGroupDetails(group)">
-                                <div class="flex items-center gap-2">
-                                    <div class="font-medium text-lg group-hover:text-primary transition-colors">{{ group.name }}</div>
-                                    <svg class="w-4 h-4 text-gray-400 group-hover:text-primary transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+                    <div v-for="group in tasksByName" :key="group.name" class="border border-edge rounded-lg p-4 group hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200">
+                        <div class="flex items-start justify-between mb-3">
+                            <div class="flex-1 cursor-pointer min-w-0 mr-2" @click="openTaskGroupDetails(group)">
+                                <div class="flex items-center gap-1">
+                                    <div class="font-medium text-sm group-hover:text-primary transition-colors truncate">{{ group.name }}</div>
+                                    <svg class="w-3 h-3 text-gray-400 group-hover:text-primary transition-colors flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                     </svg>
                                 </div>
-                                <div class="text-sm text-content-tertiary group-hover:text-content-secondary transition-colors">Total: {{ group.totalCount }} tasks</div>
-                                <div class="text-xs text-primary opacity-0 group-hover:opacity-100 transition-opacity mt-1">
-                                    Click to view details
-                                </div>
+                                <div class="text-xs text-content-tertiary">Total: {{ group.totalCount }} tasks</div>
                             </div>
-                            <div class="text-sm text-content-tertiary">
-                                Last run: {{ group.lastRun ? new Date(group.lastRun).toLocaleString() : 'Never' }}
+                            <div class="text-xs text-content-tertiary flex-shrink-0">
+                                {{ group.lastRun ? new Date(group.lastRun).toLocaleString() : 'Never' }}
                             </div>
                         </div>
                         
                         <!-- Status Counts -->
-                        <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
+                        <div class="grid grid-cols-2 gap-1.5">
                             <button 
                                 @click.stop="openTaskGroupDetailsWithFilter(group, 'pending')"
                                 class="bg-yellow-50 border border-yellow-200 rounded-md p-2 text-center shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 cursor-pointer hover:border-yellow-300"
                             >
                                 <div class="text-xs text-yellow-600 font-medium">Pending</div>
-                                <div class="text-lg font-bold text-yellow-700">{{ group.statusCounts.pending || 0 }}</div>
+                                <div class="text-base font-bold text-yellow-700">{{ group.statusCounts.pending || 0 }}</div>
                             </button>
                             <button 
                                 @click.stop="openTaskGroupDetailsWithFilter(group, 'succeeded')"
                                 class="bg-green-50 border border-green-200 rounded-md p-2 text-center shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 cursor-pointer hover:border-green-300"
                             >
                                 <div class="text-xs text-green-600 font-medium">Succeeded</div>
-                                <div class="text-lg font-bold text-green-700">{{ group.statusCounts.succeeded || 0 }}</div>
+                                <div class="text-base font-bold text-green-700">{{ group.statusCounts.succeeded || 0 }}</div>
                             </button>
                             <button 
                                 @click.stop="openTaskGroupDetailsWithFilter(group, 'failed')"
                                 class="bg-red-50 border border-red-200 rounded-md p-2 text-center shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 cursor-pointer hover:border-red-300"
                             >
                                 <div class="text-xs text-red-600 font-medium">Failed</div>
-                                <div class="text-lg font-bold text-red-700">{{ group.statusCounts.failed || 0 }}</div>
+                                <div class="text-base font-bold text-red-700">{{ group.statusCounts.failed || 0 }}</div>
                             </button>
                             <button 
                                 @click.stop="openTaskGroupDetailsWithFilter(group, 'cancelled')"
                                 class="bg-page border border-edge rounded-md p-2 text-center shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 cursor-pointer hover:border-edge-strong"
                             >
                                 <div class="text-xs text-gray-600 font-medium">Cancelled</div>
-                                <div class="text-lg font-bold text-content-secondary">{{ group.statusCounts.cancelled || 0 }}</div>
+                                <div class="text-base font-bold text-content-secondary">{{ group.statusCounts.cancelled || 0 }}</div>
                             </button>
                         </div>
-                    </li>
-                </ul>
+                    </div>
+                </div>
             </div>
         </div>
     </div>