added functionality to archive clients

website/js/pages/clients.js

@@ -1,12 +1,19 @@
 import { apiGet, apiPost, apiPut, apiDelete } from '../api.js';
 import { pageHeaderHTML, showToast } from '../app.js';
+import {
+    isClientArchived,
+    confirmAndPatchClientArchive,
+    clientTableActionsHTML,
+} from '../client-archive.js';
 
 const PAGE_SIZE = 50;
+const ARCHIVE_FILTER_KEY = 'clientsArchiveFilter';
 
 let clientsList = [];
 let coachesList = [];
 let scoringProfileCatalog = [];
 let filterSearch = '';
+let archiveFilter = localStorage.getItem(ARCHIVE_FILTER_KEY) || 'active';
 let page = 0;
 let expandedClientCode = null;
 let expandedQnKey = null;
@@ -36,8 +43,11 @@ export async function clientsPage() {
 
 async function loadClients() {
     try {
+        const archiveQuery = archiveFilter !== 'active'
+            ? `?archiveFilter=${encodeURIComponent(archiveFilter)}`
+            : '';
         const [clientsData, assignData] = await Promise.all([
-            apiGet('clients.php'),
+            apiGet(`clients.php${archiveQuery}`),
             apiGet('assignments.php'),
         ]);
         clientsList = clientsData.clients || [];
@@ -55,13 +65,23 @@ function renderClients() {
     const container = document.getElementById('clientsContent');
 
     if (!clientsList.length) {
+        const emptyMsg = archiveFilter === 'archived'
+            ? '<h3>No archived clients</h3><p>Archived clients are hidden from assignments and follow-up.</p>'
+            : archiveFilter === 'all'
+                ? '<h3>No clients found</h3><p>Create the first client above.</p>'
+                : '<h3>No active clients</h3><p>Create a client above or switch the filter to view archived clients.</p>';
         container.innerHTML = `
             <div class="card">
-                <div class="empty-state">
-                    <h3>No clients found</h3>
-                    <p>Create the first client above.</p>
+                <div class="filter-bar clients-list-filters">
+                    ${archiveFilterSelectHTML()}
+                    <input type="search" id="clientListSearch" class="filter-search" placeholder="Search client or counselor…" value="${esc(filterSearch)}">
                 </div>
+                <div class="empty-state">${emptyMsg}</div>
             </div>`;
+        bindArchiveFilterControl();
+        document.getElementById('clientListSearch')?.addEventListener('input', (e) => {
+            filterSearch = e.target.value.trim();
+        });
         return;
     }
 
@@ -70,7 +90,8 @@ function renderClients() {
 
     container.innerHTML = `
         <div class="card">
-            <div class="filter-bar">
+            <div class="filter-bar clients-list-filters">
+                ${archiveFilterSelectHTML()}
                 <input type="search" id="clientListSearch" class="filter-search" placeholder="Search client or counselor…" value="${esc(filterSearch)}">
                 <span class="data-toolbar-hint" id="clientListCount"></span>
             </div>
@@ -94,6 +115,7 @@ function renderClients() {
             <div class="pagination-bar" id="clientsPagination"></div>
         </div>`;
 
+    bindArchiveFilterControl();
     document.getElementById('clientListSearch').addEventListener('input', (e) => {
         filterSearch = e.target.value.trim();
         page = 0;
@@ -104,6 +126,31 @@ function renderClients() {
     renderClientTableBody();
 }
 
+function archiveFilterSelectHTML() {
+    return `
+        <select id="clientArchiveFilter" class="clients-archive-filter" aria-label="Client status filter">
+            <option value="active" ${archiveFilter === 'active' ? 'selected' : ''}>Active</option>
+            <option value="archived" ${archiveFilter === 'archived' ? 'selected' : ''}>Archived</option>
+            <option value="all" ${archiveFilter === 'all' ? 'selected' : ''}>All</option>
+        </select>`;
+}
+
+function bindArchiveFilterControl() {
+    const sel = document.getElementById('clientArchiveFilter');
+    if (!sel) return;
+    sel.addEventListener('change', async (e) => {
+        archiveFilter = e.target.value;
+        localStorage.setItem(ARCHIVE_FILTER_KEY, archiveFilter);
+        page = 0;
+        expandedClientCode = null;
+        expandedQnKey = null;
+        expandedVersionKey = null;
+        detailByClient = {};
+        document.getElementById('clientsContent').innerHTML = '<div class="spinner"></div>';
+        await loadClients();
+    });
+}
+
 function getFilteredClientsList() {
     let list = clientsList;
     if (filterSearch) {
@@ -149,6 +196,12 @@ function renderClientTableBody() {
         body.querySelectorAll('.delete-client-btn').forEach(btn => {
             btn.addEventListener('click', () => deleteClient(btn.dataset.code));
         });
+        body.querySelectorAll('.archive-client-btn').forEach(btn => {
+            btn.addEventListener('click', () => setClientArchived(btn.dataset.code, true));
+        });
+        body.querySelectorAll('.restore-client-btn').forEach(btn => {
+            btn.addEventListener('click', () => setClientArchived(btn.dataset.code, false));
+        });
         bindCoachBandPickerEvents(body);
     }
 
@@ -652,10 +705,18 @@ function clientHasResponseData(c) {
     return Number(c.hasResponseData) === 1;
 }
 
+function clientArchivedLabel(c) {
+    if (!isClientArchived(c) || !c.archivedAt) return '';
+    const d = new Date(Number(c.archivedAt) * 1000);
+    const when = Number.isNaN(d.getTime()) ? '' : d.toLocaleDateString();
+    return when ? ` <span class="client-archived-badge" title="Archived ${esc(when)}">Archived</span>` : '';
+}
+
 function clientRowHTML(c) {
     const coach = c.coachUsername
         ? `<strong>${esc(c.coachUsername)}</strong>`
         : `<span style="color:var(--text-secondary);font-style:italic">Unassigned</span>`;
+    const archived = isClientArchived(c);
     const canExpand = clientHasResponseData(c);
     const expanded = canExpand && expandedClientCode === c.clientCode;
     const expandControl = canExpand
@@ -665,17 +726,20 @@ function clientRowHTML(c) {
         ? `<td class="client-profile-dots-cell">${profileDotsHTML(c.scoringProfiles || [], c.clientCode)}</td>`
         : '';
     const colCount = scoringProfileCatalog.length > 0 ? 4 : 3;
+    const actions = clientTableActionsHTML({
+        clientCode: esc(c.clientCode),
+        archived,
+        showDelete: true,
+    });
 
     return `
-        <tr>
+        <tr class="${archived ? 'client-row-archived' : ''}">
             <td>
-                ${expandControl}<strong>${esc(c.clientCode)}</strong>
+                ${expandControl}<strong>${esc(c.clientCode)}</strong>${clientArchivedLabel(c)}
             </td>
             <td>${coach}</td>
             ${profileCol}
-            <td>
-                <button class="btn btn-sm btn-danger delete-client-btn" data-code="${esc(c.clientCode)}">Delete</button>
-            </td>
+            <td class="client-actions-cell">${actions}</td>
         </tr>
         ${expanded ? `
         <tr class="client-detail-row">
@@ -728,6 +792,30 @@ function toggleVersion(clientCode, questionnaireID, submissionID) {
     renderClientTableBody();
 }
 
+async function setClientArchived(clientCode, archived) {
+    const ok = await confirmAndPatchClientArchive(clientCode, archived);
+    if (!ok) return;
+
+    if (archived && archiveFilter === 'active') {
+        clientsList = clientsList.filter(c => c.clientCode !== clientCode);
+    } else if (!archived && archiveFilter === 'archived') {
+        clientsList = clientsList.filter(c => c.clientCode !== clientCode);
+    } else {
+        const row = clientsList.find(c => c.clientCode === clientCode);
+        if (row) {
+            row.archived = archived ? 1 : 0;
+            row.archivedAt = archived ? Math.floor(Date.now() / 1000) : 0;
+        }
+    }
+    if (expandedClientCode === clientCode && archived) {
+        expandedClientCode = null;
+        expandedQnKey = null;
+        expandedVersionKey = null;
+    }
+    if (!clientsList.length) renderClients();
+    else renderClientTableBody();
+}
+
 async function deleteClient(clientCode) {
     if (!confirm(`Delete client "${clientCode}"? This will also remove all their answers and results. This cannot be undone.`)) return;
     try {