adding process completion logic

website/js/pages/questionnaires.js

@@ -463,6 +463,54 @@ function bandRangesEditorHTML(bands) {
         <div id="spBandPreview" class="scoring-band-labels"></div>`;
 }
 
+const SCORING_BAND_OPTIONS = [
+    { value: 'green', label: 'Green' },
+    { value: 'yellow', label: 'Yellow' },
+    { value: 'red', label: 'Red' },
+];
+
+function processCompleteBandsSummaryHTML(profile) {
+    const bands = (profile?.processCompleteBands || [])
+        .map(b => String(b).toLowerCase())
+        .filter(Boolean);
+    if (!bands.length) return '';
+    const chips = bands.map(b => {
+        const label = SCORING_BAND_OPTIONS.find(o => o.value === b)?.label || b;
+        return `<span class="band-badge band-${esc(b)}">${esc(label)}</span>`;
+    }).join('');
+    return `
+        <div class="scoring-profile-complete-bands">
+            <span class="scoring-profile-complete-label">Process complete when coach sets</span>
+            <span class="scoring-profile-complete-chips">${chips}</span>
+        </div>`;
+}
+
+function processCompleteBandsEditorHTML(selected, editable) {
+    const dis = editable ? '' : ' disabled';
+    const sel = new Set((selected || []).map(b => String(b).toLowerCase()));
+    return `
+        <div class="scoring-process-complete-panel">
+            <h4 class="scoring-modal-section-title">Process complete</h4>
+            <p class="scoring-process-complete-hint">
+                When the coach sets one of these categories during score review, the app shows the process-complete dialog for that client.
+            </p>
+            <div class="scoring-band-picker" id="spProcessCompleteBands">
+                ${SCORING_BAND_OPTIONS.map(b => {
+                    const checked = sel.has(b.value) ? ' checked' : '';
+                    return `<label class="scoring-band-picker-item">
+                        <input type="checkbox" value="${b.value}"${checked}${dis}>
+                        <span class="band-badge band-${b.value}">${esc(b.label)}</span>
+                    </label>`;
+                }).join('')}
+            </div>
+        </div>`;
+}
+
+function readProcessCompleteBandsFromModal(overlay) {
+    return [...(overlay.querySelectorAll('#spProcessCompleteBands input[type=checkbox]:checked') || [])]
+        .map(cb => cb.value);
+}
+
 function renderScoringProfilesSection(profiles, questionnaires) {
     const panel = document.getElementById('scoringProfilesPanel');
     if (!panel) return;
@@ -542,6 +590,7 @@ function scoringProfileCardHTML(profile, questionnaires) {
                     </div>
                     ${profile.description ? `<p class="scoring-profile-desc">${esc(profile.description)}</p>` : ''}
                     <p class="scoring-profile-bands">${bandSummary(profile)}</p>
+                    ${processCompleteBandsSummaryHTML(profile)}
                 </div>
                 ${canEdit() ? `
                     <div class="scoring-profile-card-actions">
@@ -584,6 +633,7 @@ function openScoringProfileModal(profile, questionnaires, allProfiles) {
                 </label>
             </div>
             ${bandRangesEditorHTML(initialBands)}
+            ${processCompleteBandsEditorHTML(profile?.processCompleteBands || [], canEdit())}
             <h4 class="scoring-modal-section-title">Questionnaires</h4>
             <p class="data-toolbar-hint" style="margin:0 0 10px">Add questionnaires and set weight. List order is the display order.</p>
             <div id="spQnPicker" class="scoring-profile-picker"></div>
@@ -724,6 +774,7 @@ function openScoringProfileModal(profile, questionnaires, allProfiles) {
             description,
             isActive,
             ...bands,
+            processCompleteBands: readProcessCompleteBandsFromModal(overlay),
             questionnaires: members.map((m, idx) => ({
                 questionnaireID: m.questionnaireID,
                 weight: parseFloat(picker.querySelector(`[data-qn="${m.questionnaireID}"] .sp-weight`)?.value) || m.weight || 1,