updated api

website/js/app.js

@@ -7,6 +7,7 @@ import { exportPage }     from './pages/export.js';
 import { usersPage }      from './pages/users.js';
 import { assignmentsPage } from './pages/assignments.js';
 import { clientsPage }     from './pages/clients.js';
+import { activityPage }    from './pages/activity.js';
 
 // Auth state
 export function isLoggedIn() {
@@ -88,6 +89,7 @@ addRoute('/export', authGuard(exportPage));
 addRoute('/users', roleGuard(['admin', 'supervisor'], usersPage));
 addRoute('/assignments', roleGuard(['admin', 'supervisor'], assignmentsPage));
 addRoute('/clients', roleGuard(['admin', 'supervisor'], clientsPage));
+addRoute('/activity', roleGuard(['admin', 'supervisor'], activityPage));
 
 // Nav link handling & logout
 document.addEventListener('DOMContentLoaded', () => {

website/js/pages/activity.js

@@ -0,0 +1,104 @@
+import { apiGet } from '../api.js';
+import { showToast } from '../app.js';
+
+export async function activityPage() {
+    const app = document.getElementById('app');
+    app.innerHTML = `
+        <div class="page-header">
+            <h1>Activity</h1>
+        </div>
+        <div class="card" style="margin-bottom:16px">
+            <div class="form-row" style="align-items:flex-end">
+                <div class="form-group">
+                    <label>Action</label>
+                    <select id="act_filter">
+                        <option value="">All actions</option>
+                        <option value="login">login</option>
+                        <option value="questionnaire_submitted">questionnaire_submitted</option>
+                        <option value="client_created">client_created</option>
+                        <option value="client_deleted">client_deleted</option>
+                        <option value="clients_assigned">clients_assigned</option>
+                        <option value="client_data_exported">client_data_exported</option>
+                        <option value="user_created">user_created</option>
+                        <option value="user_deleted">user_deleted</option>
+                        <option value="password_changed">password_changed</option>
+                    </select>
+                </div>
+                <button class="btn btn-primary btn-sm" id="act_refresh">Refresh</button>
+            </div>
+        </div>
+        <div id="activityContent"><div class="spinner"></div></div>
+    `;
+
+    document.getElementById('act_refresh').addEventListener('click', loadActivity);
+    document.getElementById('act_filter').addEventListener('change', loadActivity);
+    await loadActivity();
+}
+
+async function loadActivity() {
+    const container = document.getElementById('activityContent');
+    container.innerHTML = '<div class="spinner"></div>';
+    const action = document.getElementById('act_filter')?.value || '';
+    const qs = action ? `?limit=200&action=${encodeURIComponent(action)}` : '?limit=200';
+
+    try {
+        const data = await apiGet(`activity${qs}`);
+        renderActivity(data.events || [], data.total ?? 0);
+    } catch (e) {
+        showToast(e.message, 'error');
+        container.innerHTML = `<p class="error-text" style="padding:16px">${esc(e.message)}</p>`;
+    }
+}
+
+function renderActivity(events, total) {
+    const container = document.getElementById('activityContent');
+
+    if (!events.length) {
+        container.innerHTML = `
+            <div class="card"><div class="empty-state"><h3>No activity</h3></div></div>`;
+        return;
+    }
+
+    container.innerHTML = `
+        <div class="card">
+            <p style="margin-bottom:12px;color:var(--text-secondary)">Showing ${events.length} of ${total} events (newest first)</p>
+            <div class="table-wrapper">
+                <table class="data-table">
+                    <thead>
+                        <tr>
+                            <th>Time</th>
+                            <th>Actor</th>
+                            <th>Role</th>
+                            <th>Action</th>
+                            <th>Target</th>
+                            <th>Summary</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        ${events.map(e => `
+                            <tr>
+                                <td>${esc(formatTime(e.createdAt))}</td>
+                                <td>${esc(e.actorUsername || e.actorUserID || '—')}</td>
+                                <td>${esc(e.actorRole || '')}</td>
+                                <td><span class="badge">${esc(e.action)}</span></td>
+                                <td>${esc(e.targetType || '')}${e.targetID ? ': ' + esc(e.targetID) : ''}</td>
+                                <td>${esc(e.summary)}</td>
+                            </tr>
+                        `).join('')}
+                    </tbody>
+                </table>
+            </div>
+        </div>`;
+}
+
+function formatTime(ms) {
+    if (!ms) return '';
+    const d = new Date(Number(ms));
+    return d.toLocaleString();
+}
+
+function esc(s) {
+    const d = document.createElement('div');
+    d.textContent = s ?? '';
+    return d.innerHTML;
+}

website/js/pages/clients.js

@@ -11,6 +11,7 @@ export async function clientsPage() {
         <div class="page-header">
             <h1>Clients</h1>
             <div class="actions">
+                <button class="btn btn-sm" id="exportAllBtn">Download all client data</button>
                 <button class="btn btn-primary" id="showCreateFormBtn">+ Create Client</button>
             </div>
         </div>
@@ -18,6 +19,8 @@ export async function clientsPage() {
         <div id="clientsContent"><div class="spinner"></div></div>
     `;
 
+    document.getElementById('exportAllBtn').addEventListener('click', () => downloadClientExport('clients/export_all'));
+
     document.getElementById('showCreateFormBtn').addEventListener('click', () => {
         const wrapper = document.getElementById('createClientWrapper');
         if (wrapper.style.display === 'none') {
@@ -81,6 +84,35 @@ function renderClients() {
     container.querySelectorAll('.delete-client-btn').forEach(btn => {
         btn.addEventListener('click', () => deleteClient(btn.dataset.code));
     });
+    container.querySelectorAll('.download-client-btn').forEach(btn => {
+        btn.addEventListener('click', () => downloadClientExport(`clients/export?clientCode=${encodeURIComponent(btn.dataset.code)}`));
+    });
+}
+
+async function downloadClientExport(endpoint) {
+    try {
+        const token = localStorage.getItem('qdb_token');
+        const res = await fetch(`../api/${endpoint}`, {
+            headers: { Authorization: `Bearer ${token}` },
+        });
+        if (!res.ok) {
+            const err = await res.json().catch(() => ({ error: { message: 'Download failed' } }));
+            throw new Error(err.error?.message || err.error || 'Download failed');
+        }
+        const blob = await res.blob();
+        const disposition = res.headers.get('Content-Disposition') || '';
+        const match = disposition.match(/filename="([^"]+)"/);
+        const filename = match ? match[1] : 'client_export.csv';
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        a.click();
+        URL.revokeObjectURL(url);
+        showToast('Download started', 'success');
+    } catch (e) {
+        showToast(e.message, 'error');
+    }
 }
 
 function clientRowHTML(c) {
@@ -93,6 +125,7 @@ function clientRowHTML(c) {
             <td><strong>${esc(c.clientCode)}</strong></td>
             <td>${coach}</td>
             <td>
+                <button class="btn btn-sm download-client-btn" data-code="${esc(c.clientCode)}">Download</button>
                 <button class="btn btn-sm btn-danger delete-client-btn" data-code="${esc(c.clientCode)}">Delete</button>
             </td>
         </tr>`;