tango-app-api-trax 3.9.34 → 3.9.36

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "tango-app-api-trax",
-    "version": "3.9.34",
+    "version": "3.9.36",
     "description": "Trax",
     "main": "index.js",
     "type": "module",

package/src/controllers/internalTrax.controller.js

@@ -18,7 +18,7 @@ import timeZone from 'dayjs/plugin/timezone.js';
 import utc from 'dayjs/plugin/utc.js';
 import { logger } from 'tango-app-api-middleware';
 import mongoose from 'mongoose';
-import { sendPushNotification, sendAiPushNotification, sendEmailWithSES, signedUrl, fileUpload, getOpenSearchData } from 'tango-app-api-middleware';
+import { sendPushNotification, sendAiPushNotification, sendEmailWithSES, signedUrl, fileUpload } from 'tango-app-api-middleware';
 // import * as planoService from '../services/planogram.service.js';
 import * as clusterServices from '../services/cluster.service.js';
 import * as teamsServices from '../services/teams.service.js';
@@ -1703,6 +1703,85 @@ export async function saleUpdateCollection( req, res ) {
   }
 };
 
+/**
+ * One-off migration: in checklistquestionsconfigs, when a question's answerType
+ * is 'multiplechoicesingle' and one of its answers has validationType
+ * 'Capture Image', replace it with 'Capture Multiple Image with description'.
+ *
+ * Document shape: { question: [ { answerType, answers: [ { validationType } ] } ] }
+ * Defaults to a dry run; pass apply:true (body) or ?apply=true to write changes.
+ * @param {Object} req Express request — body.apply / query.apply toggles writing
+ * @param {Object} res Express response
+ * @return {Promise<void>}
+ */
+export async function updateMultipleChoiceSingleValidationType( req, res ) {
+  try {
+    const TARGET_ANSWER_TYPE = 'multiplechoicesingle';
+    const FROM_VALIDATION_TYPE = 'Capture Image';
+    const TO_VALIDATION_TYPE = 'Capture Multiple Image with description';
+
+    const apply = req.body?.apply === true || req.query?.apply === 'true';
+
+    // Only load docs that actually contain a matching question + answer.
+    const query = {
+      question: {
+        $elemMatch: {
+          answerType: TARGET_ANSWER_TYPE,
+          answers: { $elemMatch: { validationType: FROM_VALIDATION_TYPE } },
+        },
+      },
+    };
+
+    const docs = await CLquestions.find( query );
+
+    let documentsUpdated = 0;
+    let answersUpdated = 0;
+    const updatedIds = [];
+
+    for ( const doc of docs ) {
+      const questions = Array.isArray( doc.question ) ? doc.question : [];
+      let changedInDoc = 0;
+
+      for ( const q of questions ) {
+        if ( !q || q.answerType !== TARGET_ANSWER_TYPE ) continue;
+
+        const answers = Array.isArray( q.answers ) ? q.answers : [];
+        for ( const a of answers ) {
+          if ( a && a.validationType === FROM_VALIDATION_TYPE ) {
+            a.validationType = TO_VALIDATION_TYPE;
+            changedInDoc++;
+          }
+        }
+      }
+
+      if ( changedInDoc > 0 ) {
+        documentsUpdated++;
+        answersUpdated += changedInDoc;
+        updatedIds.push( doc._id );
+
+        // `question` is a Mixed array, so write the whole rebuilt array.
+        if ( apply ) {
+          await CLquestions.updateMany( { _id: doc._id }, { question: questions } );
+        }
+      }
+    }
+
+    return res.sendSuccess( {
+      message: apply ?
+        'Validation type updated successfully' :
+        'Dry run — pass apply:true to write these changes',
+      apply,
+      matchedDocuments: docs.length,
+      documentsUpdated,
+      answersUpdated,
+      updatedIds,
+    } );
+  } catch ( error ) {
+    logger.error( { function: 'updateMultipleChoiceSingleValidationType', error: error } );
+    return res.sendError( error, 500 );
+  }
+};
+
 export async function getUserStoreList( req, res ) {
   try {
     let details = [];
@@ -3601,7 +3680,7 @@ export async function runAIFlag( req, res ) {
             runAIFlag: store?.runAIFlag,
             questionFlag: store?.questionFlag,
             checklistName: store.checkListName?.trim(),
-            submittedBy: store?.userName,
+            submittedBy: store.timeFlag ? '--' : store?.userName,
             time: store?.submitTime_string ?? '--',
             domain: `${JSON.parse( process.env.URL ).domain}/manage/trax/flags?date=${dayjs().format( 'YYYY-MM-DD' )}`,
             status: store.checklistStatus,
@@ -3667,31 +3746,36 @@ export const downloadInsertPdf = async ( req, res ) => {
     const safeName = ( str ) =>
       ( str || '' ).toString().replace( /[<>:"/\\|?*]+/g, '_' );
 
-    const query = {
-      query: {
-        bool: {
-          must: [
-            {
-              term: {
-                _id: req.body.checklistId,
-              },
-            },
-          ],
-        },
-      },
-    };
+    // const query = {
+    //   query: {
+    //     bool: {
+    //       must: [
+    //         {
+    //           term: {
+    //             _id: req.body.checklistId,
+    //           },
+    //         },
+    //       ],
+    //     },
+    //   },
+    // };
+
 
     // 1) Launch browser page + fetch OpenSearch data in parallel
     const [ browser, aiDetails ] = await Promise.all( [
       getBrowserInstance(),
-      getOpenSearchData( JSON.parse( process.env.OPENSEARCH ).traxIndex, query ),
+      // getOpenSearchData( JSON.parse( process.env.OPENSEARCH ).traxIndex, query ),
+      processedchecklist.findOne( { _id: req.body.checklistId } ),
     ] );
+    console.log( aiDetails );
 
-    if ( aiDetails?.statusCode != 200 || !aiDetails?.body?.hits?.hits.length ) {
+    if ( !aiDetails ) {
       return res.sendError( 'Checklist not found', 404 );
     }
 
-    const doc = { ...aiDetails.body.hits.hits[0]._source };
+    const doc = { ...aiDetails?.toObject() };
+
+    console.log( doc );
 
     // 2) Fetch brandInfo + compliance data in parallel
     const complianceURL = JSON.parse( process.env.LAMBDAURL ).complianceHistory;

package/src/controllers/traxDashboard.controllers.js

@@ -428,14 +428,19 @@ export const checklistPerformance = async ( req, res ) => {
               $cond: [
                 { $gt: [ '$$divisor', 0 ] },
                 {
-                  $round: [
+                  $max: [
+                    0,
                     {
-                      $multiply: [
-                        { $divide: [ '$userComplianceCountTotal', '$$divisor' ] },
-                        100,
+                      $round: [
+                        {
+                          $multiply: [
+                            { $divide: [ '$userComplianceCountTotal', '$$divisor' ] },
+                            100,
+                          ],
+                        },
+                        0,
                       ],
                     },
-                    0,
                   ],
                 },
                 0,
@@ -463,7 +468,7 @@ export const checklistPerformance = async ( req, res ) => {
       },
     } );
     let getChecklistPerformanceData = await processedchecklistService.aggregate( findQuery );
-    if ( !getChecklistPerformanceData[0].data.length ) {
+    if ( !getChecklistPerformanceData[0].count[0].total ) {
       return res.sendError( 'no data found', 204 );
     }
 

package/src/hbs/visit-checklist.hbs

@@ -56,14 +56,16 @@
   .dp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid #00AEEF}
   .dp-header h2{font-size:18px;font-weight:700;color:#1a1a2e}
   .dp-score{font-size:15px;font-weight:700;color:#000000}
-  .q-row{display:flex;gap:12px;margin-bottom:14px;padding:12px;border-radius:8px;background:transparent}
-  .q-num{font-size:12px;font-weight:700;color:#000;min-width:22px}
-  .q-body{flex:1}
+  .q-row{position:relative;margin-bottom:14px;padding:12px 12px 12px 40px;border-radius:8px;background:transparent}
+  .q-num{position:absolute;left:12px;top:12px;font-size:12px;font-weight:700;color:#000}
   .q-text{font-size:13px;color:#444;margin-bottom:4px}
   .q-ans{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:12px}
   .ans-yes{background:#e1f5ee;color:#0f6e56}
   .ans-no{background:#fcebeb;color:#a32d2d}
   .flag-badge{background:#faeeda;color:#854f0b;font-size:10px;font-weight:600;padding:1px 6px;border-radius:8px;margin-left:6px}
+  .det-badge{display:inline-block;font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px;white-space:nowrap}
+  .det-matched{background:#e1f5ee;color:#0f6e56}
+  .det-notmatched{background:#fcebeb;color:#a32d2d}
   .q-answer-list{margin-top:6px}
   .q-answer-item{margin-top:6px;padding:0;background:transparent;border:none;border-radius:0}
   .q-answer-text{font-size:12px;color:#1a1a1a;line-height:1.5}
@@ -72,6 +74,11 @@
   .q-answer-media img,.q-answer-media video,.q-answer-item td img{display:block;width:200px;height:180px;object-fit:cover;border-radius:6px;margin-bottom:6px}
   .img-grid{display:flex;flex-wrap:wrap;gap:8px}
   .img-grid img{margin-bottom:0}
+  .answer-media-grid{margin-top:8px;font-size:0}
+  .answer-media-cell{display:inline-block;width:calc(50% - 6px);vertical-align:top;margin-bottom:12px;break-inside:avoid}
+  .answer-media-cell:nth-child(2n+1){margin-right:12px}
+  .answer-media-cell .q-answer-caption{margin-bottom:4px}
+  .answer-media-cell img{display:block;width:100%;height:200px;object-fit:fill;border-radius:6px;margin-bottom:0}
   .q-answer-link{font-size:12px;color:#0085D2;text-decoration:underline;word-break:break-all}
   .q-answer-caption{font-size:11px;color:#666;margin-bottom:4px}
   .q-answer-remarks{font-size:11px;color:#666;margin-top:6px;white-space:pre-line}
@@ -182,10 +189,10 @@
 <div class="q-row">
 <span class="q-num">{{this.qno}}</span>
 <div class="q-body">
-<div class="q-text" style="display:flex;justify-content:space-between">
+<div class="q-text" style="display:flex;justify-content:space-between;align-items:center;gap:8px">
   <div>{{this.qname}}</div>
   {{#if this.compliance}}
-  <div>Score:{{this.score}}</div>
+  <div style="flex-shrink:0">Score:{{this.score}}</div>
   {{/if}}
 </div>
 {{#if this.questionReferenceImage}}
@@ -211,7 +218,7 @@
 <div class="q-answer-item">
   {{#eq this.answerType 'text'}}
     {{#if this.answer}}
-    <div class="q-answer-text {{#if this.sopFlag}}flagged{{/if}}">{{this.answer}}</div>
+    <div class="q-answer-text {{#if this.sopFlag}}flagged{{/if}}">{{this.answer}}{{#if this.showDetectionStatus}} <span class="det-badge {{#eq this.detectionStatus 'Matched'}}det-matched{{else}}det-notmatched{{/eq}}">{{this.detectionStatus}}</span>{{/if}}</div>
     {{/if}}
   {{/eq}}
   {{#eq this.answerType 'video'}}
@@ -222,6 +229,20 @@
     </div>
     {{/if}}
   {{/eq}}
+  {{!-- This answer's own images (reference / uploaded / validation), grouped with its label, two per row --}}
+  {{#if this.answerMedia.length}}
+  <div class="answer-media-grid">
+    {{#each this.answerMedia}}
+    <div class="answer-media-cell">
+      <div class="q-answer-caption" style="display:flex;justify-content:space-between;align-items:center;gap:6px">
+        <span>{{this.label}}</span>
+        {{#if this.detectionStatus}}<span class="det-badge {{#eq this.detectionStatus 'Matched'}}det-matched{{else}}det-notmatched{{/eq}}">{{this.detectionStatus}}</span>{{/if}}
+      </div>
+      <img src="{{this.url}}" alt="{{this.label}}" />
+    </div>
+    {{/each}}
+  </div>
+  {{/if}}
   {{#eq this.validationDisplayType 'text'}}
     {{#if this.validationAnswer}}
     <div class="q-answer-text {{#if this.sopFlag}}flagged{{/if}}">validation Answer: {{this.validationAnswer}}</div>
@@ -234,127 +255,36 @@
     {{/if}}
   {{/eq}}
 
-  <table style="width:100%;margin-top:8px;table-layout:fixed"><tr>
-    <td style="width:50%;vertical-align:top;padding-right:8px">
-      {{#neq ../answerType 'image/video'}}
-        {{#neq ../answerType 'multipleImage'}}
-          {{#if this.multiReferenceImage.length}}
-          <div class="q-answer-media">
-            <div class="q-answer-caption">Reference Images</div>
-            {{#each this.multiReferenceImage}}
-            <img src="{{this}}" alt="Reference Image" />
-            {{/each}}
-          </div>
-          {{else}}
-            {{#if this.referenceImage}}
-            <div class="q-answer-media">
-              <div class="q-answer-caption">Reference Image</div>
-              <img src="{{this.referenceImage}}" alt="Reference Image" />
-            </div>
-            {{else}}
-              {{#eq this.answerType 'image'}}
-                {{#if this.answer}}
-                <div class="q-answer-media">
-                  <div class="q-answer-caption">Uploaded Image</div>
-                  <img src="{{this.answer}}" alt="Uploaded Image" />
-                </div>
-                {{/if}}
-              {{/eq}}
-            {{/if}}
-          {{/if}}
-        {{else}}
-          {{#eq this.answerType 'image'}}
-            {{#if this.answer}}
-            <div class="q-answer-media">
-              <div class="q-answer-caption">Uploaded Image</div>
-              <img src="{{this.answer}}" alt="Uploaded Image" />
-            </div>
-            {{/if}}
-          {{/eq}}
-        {{/neq}}
-      {{else}}
-        {{#eq this.answerType 'image'}}
-          {{#if this.answer}}
-          <div class="q-answer-media">
-            <div class="q-answer-caption">Uploaded Image</div>
-            <img src="{{this.answer}}" alt="Uploaded Image" />
-          </div>
-          {{/if}}
-        {{/eq}}
-      {{/neq}}
-      {{#unless this.hasReferenceImage}}
-        {{#if this.validation}}
-          {{#eq this.validationDisplayType 'image'}}
-            {{#if this.validationAnswer}}
-            <div class="q-answer-caption">Validation Image</div>
-            <img src="{{this.validationAnswer}}" alt="Validation Image" />
-            {{/if}}
-          {{/eq}}
-          {{#eq this.validationDisplayType 'multiImage'}}
-            {{#if this.validationImage.length}}
-            <div class="q-answer-caption">Validation Image</div>
-            {{#each this.validationImage}}
-            <img src="{{this}}" alt="Validation Image" />
-            {{/each}}
-            {{/if}}
-            {{#if this.validationVideo.length}}
-            <div class="q-answer-caption">Validation Video</div>
-            {{#each this.validationVideo}}
-            <a class="q-answer-link" href="{{this}}" target="_blank">{{this}}</a>
-            {{/each}}
-            {{/if}}
-          {{/eq}}
-        {{/if}}
-      {{/unless}}
-    </td>
-    <td style="width:50%;vertical-align:top;padding-left:8px">
-      {{#eq this.answerType 'image'}}
-        {{#if this.answer}}
-          {{#neq ../answerType 'image/video'}}
-            {{#neq ../answerType 'multipleImage'}}
-              {{#if this.multiReferenceImage.length}}
-              <div class="q-answer-caption">Uploaded Image</div>
-              <img src="{{this.answer}}" alt="Uploaded Image" />
-              {{else}}
-                {{#if this.referenceImage}}
-                <div class="q-answer-caption">Uploaded Image</div>
-                <img src="{{this.answer}}" alt="Uploaded Image" />
-                {{/if}}
-              {{/if}}
-            {{/neq}}
-          {{/neq}}
-        {{/if}}
-      {{/eq}}
-      {{#if this.hasReferenceImage}}
-      {{#if this.validation}}
-        {{#eq this.validationDisplayType 'image'}}
-          {{#if this.validationAnswer}}
-          <div class="q-answer-caption">Validation Image</div>
-          <img src="{{this.validationAnswer}}" alt="Validation Image" />
-          {{/if}}
-        {{/eq}}
-        {{#eq this.validationDisplayType 'multiImage'}}
-          {{#if this.validationImage.length}}
-          <div class="q-answer-caption">Validation Image</div>
-          {{#each this.validationImage}}
-          <img src="{{this}}" alt="Validation Image" />
-          {{/each}}
-          {{/if}}
-          {{#if this.validationVideo.length}}
-          <div class="q-answer-caption">Validation Video</div>
-          {{#each this.validationVideo}}
-          <a class="q-answer-link" href="{{this}}" target="_blank">{{this}}</a>
-          {{/each}}
-          {{/if}}
-        {{/eq}}
-      {{/if}}
-      {{/if}}
-    </td>
-  </tr></table>
+  {{!-- Validation videos captured with multi-image validation (shown as links) --}}
+  {{#eq this.validationDisplayType 'multiImage'}}
+    {{#if this.validationVideo.length}}
+    <div class="q-answer-media">
+      <div class="q-answer-caption">Validation Video</div>
+      {{#each this.validationVideo}}
+      <a class="q-answer-link" href="{{this}}" target="_blank">{{this}}</a>
+      {{/each}}
+    </div>
+    {{/if}}
+  {{/eq}}
+
 </div>
 {{/each}}
 </div>
 {{/if}}
+{{!-- All images for this question (reference / uploaded / validation), two per row --}}
+{{#if this.mediaItems.length}}
+<div class="answer-media-grid">
+  {{#each this.mediaItems}}
+  <div class="answer-media-cell">
+    <div class="q-answer-caption" style="display:flex;justify-content:space-between;align-items:center;gap:6px">
+      <span>{{this.label}}</span>
+      {{#if this.detectionStatus}}<span class="det-badge {{#eq this.detectionStatus 'Matched'}}det-matched{{else}}det-notmatched{{/eq}}">{{this.detectionStatus}}</span>{{/if}}
+    </div>
+    <img src="{{this.url}}" alt="{{this.label}}" />
+  </div>
+  {{/each}}
+</div>
+{{/if}}
 {{#if this.remarks}}
 <div class="q-answer-remarks">Remarks: {{this.remarks}}</div>
 {{/if}}
@@ -370,7 +300,7 @@
   <img class="user-verify-photo" src="{{userImage}}" alt="Submitted by photo" />
   {{/if}}
   {{#if submittedBy}}
-  <div class="user-verify-name">{{submittedBy}}</div>
+  <div class="user-verify-name">{{userSignature}}</div>
   {{/if}}
 </div>
 {{/if}}

package/src/routes/internalTraxApi.router.js

@@ -13,6 +13,7 @@ internalTraxRouter
     .get( '/list', isAllowedInternalAPIHandler, internalController.list )
     .post( '/updateAomDetails', isAllowedInternalAPIHandler, internalController.aomupdateCollection )
     .post( '/updateSaleManagerDetails', isAllowedInternalAPIHandler, internalController.saleUpdateCollection )
+    .post( '/updateValidationType', isAllowedInternalAPIHandler, internalController.updateMultipleChoiceSingleValidationType )
     .get( '/profile', isAllowedMobileSessionHandler, internalController.getUserStoreList )
     .post( '/pushNotification', isAllowedInternalAPIHandler, internalController.pushNotification )
     .post( '/taskPushNotification', isAllowedInternalAPIHandler, internalController.taskPushNotification )

package/src/utils/visitChecklistPdf.utils.js

@@ -146,6 +146,54 @@ function flattenImageRefs( arr ) {
       .filter( Boolean );
 }
 
+/**
+ * Builds the ordered media list (reference → uploaded → validation) for a SINGLE
+ * answer entry, deduped within that entry. Used to render each answer's images
+ * inline next to its own text/label, instead of pooling every answer's images
+ * into one question-level grid (which decoupled labels from their images).
+ * @param {Object} ua a single entry produced by buildQuestionAnswerEntries
+ * @return {Array} list of { type, label, url, detectionStatus } for this entry, in render order
+ */
+function buildEntryMediaItems( ua = {} ) {
+  const items = [];
+  const seen = new Set();
+
+  const push = ( type, label, url, detectionStatus = '' ) => {
+    if ( !url || typeof url !== 'string' ) return;
+    if ( seen.has( url ) ) return;
+    seen.add( url );
+    items.push( { type, label, url, detectionStatus } );
+  };
+
+  // Each uploaded/validation image shows its OWN runAI verdict (per-image, never
+  // aggregated). References are not AI-checked, so they carry no badge.
+  const statusByUrl = buildAnswerImageStatus( ua );
+  const statusFor = ( url ) => statusByUrl.get( url ) || '';
+
+  if ( ua.hasReferenceImage ) {
+    if ( Array.isArray( ua.multiReferenceImage ) && ua.multiReferenceImage.length ) {
+      ua.multiReferenceImage.forEach( ( url ) => push( 'reference', 'Reference Image', url ) );
+    } else if ( ua.referenceImage ) {
+      push( 'reference', 'Reference Image', ua.referenceImage );
+    }
+  }
+
+  if ( ua.answerType === 'image' && ua.answer ) {
+    push( 'uploaded', 'Uploaded Image', ua.answer, statusFor( ua.answer ) );
+  }
+
+  if ( ua.validation ) {
+    if ( ua.validationDisplayType === 'image' && ua.validationAnswer ) {
+      push( 'validation', 'Validation Image', ua.validationAnswer, statusFor( ua.validationAnswer ) );
+    }
+    if ( ua.validationDisplayType === 'multiImage' && Array.isArray( ua.validationImage ) ) {
+      ua.validationImage.forEach( ( url ) => push( 'validation', 'Validation Image', url, statusFor( url ) ) );
+    }
+  }
+
+  return items;
+}
+
 function buildQuestionAnswerEntries( question ) {
   const rawUserAnswers = getSourceUserAnswers( question );
   const uniqueUserAnswers = [];
@@ -190,7 +238,21 @@ function buildQuestionAnswerEntries( question ) {
       question?.answerType !== 'multipleImage' &&
       Boolean( referenceImage || multiReferenceImage.length );
 
-    return {
+    // runAI verdicts for this answer, in source order. Used to tag each uploaded /
+    // validation image with its OWN verdict (by answerImage filename, else by
+    // position) so multi-image answers don't all collapse to one aggregated status.
+    const isPerAnswerType = PER_ANSWER_DETECTION_TYPES.includes( question?.answerType );
+    const runAIValues = getRunAIMatchValues( userAnswer?.runAIData );
+    const imageStatus = buildImageStatusMap( userAnswer?.runAIData );
+
+    // Choice answers (yes/no, multiple choice, dropdown) take this answer's own
+    // verdict directly — never aggregated. Other types keep the aggregate only as
+    // a last-resort fallback.
+    const detectionStatus = isPerAnswerType ?
+      verdictFromValue( runAIValues[0] ) :
+      getDetectionStatus( userAnswer?.runAIData );
+
+    const entry = {
       answer: userAnswer?.answer || '',
       answerType: getMediaDisplayType( question?.answerType, userAnswer ),
       referenceImage,
@@ -198,6 +260,9 @@ function buildQuestionAnswerEntries( question ) {
       multiReferenceImage,
       remarks: userAnswer?.remarks || '',
       sopFlag: userAnswer?.sopFlag ?? matchedAnswer?.sopFlag ?? false,
+      detectionStatus,
+      imageStatus,
+      runAIValues,
       validation,
       validationType,
       validationAnswer,
@@ -205,7 +270,90 @@ function buildQuestionAnswerEntries( question ) {
       validationVideo,
       validationDisplayType: getValidationDisplayType( validationType ),
     };
+
+    // Text-label answers (e.g. "Attach the image of Cat") carry their own
+    // reference/validation images. Group those images with this entry so the
+    // label and its images render together, instead of pooling every answer's
+    // images into one question-level grid. Image/video answers keep flowing
+    // into the pooled grid (handled by buildQuestionMediaItems).
+    entry.answerMedia = entry.answerType === 'text' ? buildEntryMediaItems( entry ) : [];
+
+    // Choice answers with no media show their verdict next to the answer text;
+    // when they carry validation media the badge sits on that media instead.
+    entry.showDetectionStatus = isPerAnswerType && Boolean( detectionStatus ) && !entry.answerMedia.length;
+
+    return entry;
+  } );
+}
+
+
+/**
+ * Flattens a question's user answers into one ordered, deduped image list for the
+ * 2-per-row answer media grid. Order: reference images first, then uploaded images,
+ * then validation images. Videos are shown as links elsewhere, so only images are
+ * collected here. When a question has no reference image, the uploaded images simply
+ * fill the grid from the start (taking the reference slot).
+ * @param {Array} userAnswers entries produced by buildQuestionAnswerEntries
+ * @param {string} [forcedStatus] when set (image / image-video), every uploaded &
+ *   validation image shows this aggregated verdict instead of its own per-image one
+ * @return {Array} list of { type, label, url, detectionStatus } media items in render order
+ */
+function buildQuestionMediaItems( userAnswers = [], forcedStatus = '' ) {
+  const items = [];
+  const seen = new Set();
+
+  const push = ( type, label, url, detectionStatus = '' ) => {
+    if ( !url || typeof url !== 'string' ) return;
+    if ( seen.has( url ) ) return;
+    seen.add( url );
+    items.push( { type, label, url, detectionStatus } );
+  };
+
+  // Entries that render their media inline with the answer (answerMedia) are
+  // excluded here so their images are not duplicated in the pooled grid.
+  const pool = userAnswers.filter( ( ua ) => !( ua.answerMedia && ua.answerMedia.length ) );
+
+  // Resolve each image's status per answer (per-image; forcedStatus aggregates
+  // image / image-video). Built per answer so positional matching stays aligned.
+  const statusByUrl = new Map();
+  pool.forEach( ( ua ) => {
+    buildAnswerImageStatus( ua, forcedStatus ).forEach( ( status, url ) => statusByUrl.set( url, status ) );
+  } );
+  const statusFor = ( url ) => statusByUrl.get( url ) || '';
+
+  // 1. Reference images first (deduped, so a single shared reference shows once).
+  // Skipped for image/video & multipleImage upload questions (hasReferenceImage
+  // is false), which have no comparison reference — only uploaded answers.
+  pool.forEach( ( ua ) => {
+    if ( !ua.hasReferenceImage ) return;
+    if ( Array.isArray( ua.multiReferenceImage ) && ua.multiReferenceImage.length ) {
+      ua.multiReferenceImage.forEach( ( url ) => push( 'reference', 'Reference Image', url ) );
+    } else if ( ua.referenceImage ) {
+      push( 'reference', 'Reference Image', ua.referenceImage );
+    }
+  } );
+
+  // 2. Uploaded images — tagged with each image's own detection status (from runAIData).
+  pool.forEach( ( ua ) => {
+    if ( ua.answerType === 'image' && ua.answer ) {
+      push( 'uploaded', 'Uploaded Image', ua.answer, statusFor( ua.answer ) );
+    }
+  } );
+
+  // 3. Validation images (single 'Capture Image' and multi 'Capture Multiple Image').
+  pool.forEach( ( ua ) => {
+    if ( !ua.validation ) return;
+
+    if ( ua.validationDisplayType === 'image' && ua.validationAnswer ) {
+      push( 'validation', 'Validation Image', ua.validationAnswer, statusFor( ua.validationAnswer ) );
+    }
+
+    if ( ua.validationDisplayType === 'multiImage' && Array.isArray( ua.validationImage ) ) {
+      ua.validationImage.forEach( ( url ) => push( 'validation', 'Validation Image', url, statusFor( url ) ) );
+    }
   } );
+
+  return items;
 }
 
 
@@ -236,6 +384,125 @@ function getRunAIMatchValues( runAIData ) {
 }
 
 
+// Answer types whose runAI verdict is aggregated across all uploaded images:
+// if any image is not matched, the whole question reads 'Not Matched'. Every
+// other type shows each image's own verdict.
+const AGGREGATE_DETECTION_TYPES = [ 'image', 'image/video' ];
+
+// Choice answers: each selected answer carries its OWN runAI verdict and shows it
+// directly — never aggregated ('.every') across the question's other answers.
+const PER_ANSWER_DETECTION_TYPES = [ 'yes/no', 'multiplechoicesingle', 'multiplechoicemultiple', 'dropdown' ];
+
+
+/**
+ * Maps a single runAI value to a display status.
+ * @param {string|boolean} value
+ * @return {string} 'Matched' | 'Not Matched' | ''
+ */
+function verdictFromValue( value ) {
+  if ( value === 'True' || value === true ) return 'Matched';
+  if ( value === 'False' || value === false ) return 'Not Matched';
+  return '';
+}
+
+
+/**
+ * The filename of an image URL/path, ignoring any query string. Used to match an
+ * uploaded/validation image against its runAIData entry (whose answerImage may
+ * carry a different prefix / signed-URL query), regardless of CDN resolution.
+ * @param {string} url
+ * @return {string}
+ */
+function imageBasename( url ) {
+  return String( url || '' ).split( '?' )[0].split( '/' ).pop();
+}
+
+
+/**
+ * Builds a per-image detection status map from the nested runAIData shape
+ * ([ { answerImage, results: [ { featureName, value } ] } ]), keyed by the
+ * answerImage's filename. The flat shape has no per-image key, so it yields an
+ * empty map and callers fall back to the answer-level status.
+ * @param {Array} runAIData
+ * @return {Object} { [filename]: 'Matched' | 'Not Matched' }
+ */
+function buildImageStatusMap( runAIData ) {
+  const map = {};
+  if ( !Array.isArray( runAIData ) ) return map;
+
+  runAIData.forEach( ( item ) => {
+    if ( !item || !item.answerImage ) return;
+    const results = Array.isArray( item.results ) ? item.results : [ item ];
+    const values = results
+        .filter( ( r ) => r?.featureName === 'Matched/Not Matched' )
+        .map( ( r ) => r.value );
+    if ( !values.length ) return;
+    const matched = values.every( ( v ) => v === 'True' || v === true );
+    map[imageBasename( item.answerImage )] = matched ? 'Matched' : 'Not Matched';
+  } );
+
+  return map;
+}
+
+
+/**
+ * Resolves the detection status for each checked image (uploaded + validation) of a
+ * single answer, returned as a Map of url → 'Matched' | 'Not Matched' | ''.
+ *
+ * Each image gets its OWN verdict — never aggregated across the answer's other images:
+ *   1. matched explicitly by its answerImage filename (nested runAIData), else
+ *   2. matched positionally — the Nth checked image takes the Nth runAI verdict
+ *      (works for the flat runAIData shape and when filenames don't line up).
+ * For image / image-video, forcedStatus (the question-level aggregate) overrides all.
+ * @param {Object} ua a single entry produced by buildQuestionAnswerEntries
+ * @param {string} [forcedStatus] aggregated status applied to every image (image/image-video)
+ * @return {Map<string,string>} url → status
+ */
+function buildAnswerImageStatus( ua = {}, forcedStatus = '' ) {
+  const statusByUrl = new Map();
+  const byName = ua.imageStatus || {};
+  const values = Array.isArray( ua.runAIValues ) ? ua.runAIValues : [];
+  let idx = 0;
+
+  const assign = ( url ) => {
+    if ( !url || typeof url !== 'string' || statusByUrl.has( url ) ) return;
+    let status = forcedStatus;
+    if ( !status ) {
+      const key = imageBasename( url );
+      status = ( key in byName ) ? byName[key] : verdictFromValue( values[idx] );
+      idx++;
+    }
+    statusByUrl.set( url, status );
+  };
+
+  if ( ua.answerType === 'image' && ua.answer ) assign( ua.answer );
+
+  if ( ua.validation ) {
+    if ( ua.validationDisplayType === 'image' && ua.validationAnswer ) assign( ua.validationAnswer );
+    if ( ua.validationDisplayType === 'multiImage' && Array.isArray( ua.validationImage ) ) {
+      ua.validationImage.forEach( assign );
+    }
+  }
+
+  return statusByUrl;
+}
+
+
+/**
+ * Resolves a 'Matched' / 'Not Matched' detection status from runAIData. Handles both
+ * runAIData shapes (per-image nested results, and flat). Any non-match verdict makes
+ * the whole status 'Not Matched'. Returns '' when there is no runAI verdict to report.
+ * @param {Array} runAIData
+ * @return {string} 'Matched' | 'Not Matched' | ''
+ */
+function getDetectionStatus( runAIData ) {
+  const values = getRunAIMatchValues( runAIData );
+  if ( !values.length ) return '';
+  const allMatched = values.every( ( v ) => v === 'True' || v === true );
+  return allMatched ? 'Matched' : 'Not Matched';
+}
+
+
 /**
 
  * Map section array { sectionName, questions[] } (view API or processed checklist) to scores / template sections.
@@ -257,6 +524,8 @@ function mapSectionsFromQuestionAnswer( questionAnswer ) {
 
   const flags = [];
 
+  let hasSopFlag = false;
+
 
   ( questionAnswer || [] ).forEach( ( section, sectionIdx ) => {
     let sectionScore = 0;
@@ -278,6 +547,10 @@ function mapSectionsFromQuestionAnswer( questionAnswer ) {
 
       const ua = userAnswersWithRef[0];
 
+      if ( !hasSopFlag && userAnswersWithRef.some( ( entry ) => entry.sopFlag === true ) ) {
+        hasSopFlag = true;
+      }
+
 
       const max = q.compliance ? Math.max( ...q?.answers.map( ( o ) => o?.complianceScore ?? Math.max( o?.matchedCount ?? 0, o?.notMatchedCount ?? 0 ) ) ) : 0;
 
@@ -301,6 +574,22 @@ function mapSectionsFromQuestionAnswer( questionAnswer ) {
       }
 
 
+      // image / image-video aggregate their runAI verdict across all uploaded images
+      // (any 'Not Matched' → whole question 'Not Matched'). Every other type keeps
+      // each image's own verdict, so this stays '' for them.
+      let aggregateDetectionStatus = '';
+      if ( AGGREGATE_DETECTION_TYPES.includes( q.answerType ) ) {
+        const aiAnswers = q.answerType === 'image/video' ?
+          ( q.userAnswer || [] ).filter( ( a ) => a?.answerType === 'image' ) :
+          ( q.userAnswer || [] );
+        const matchValues = aiAnswers.flatMap( ( a ) => getRunAIMatchValues( a?.runAIData ) );
+        if ( matchValues.length ) {
+          aggregateDetectionStatus = matchValues.every( ( v ) => v === 'True' || v === true ) ?
+            'Matched' : 'Not Matched';
+        }
+      }
+
+
       sectionScore += score;
 
       sectionMax += max;
@@ -358,6 +647,8 @@ function mapSectionsFromQuestionAnswer( questionAnswer ) {
 
         answerDisplay: isYes ? 'Yes' : ( isNo ? 'No' : ( answerText && answerText.startsWith( 'http' ) ? 'Image' : ( answerText || '—' ) ) ),
 
+        mediaItems: buildQuestionMediaItems( userAnswersWithRef, aggregateDetectionStatus ),
+
         userAnswer: userAnswersWithRef.length ? userAnswersWithRef : [ {
           answer: '',
           answerType: 'text',
@@ -381,15 +672,15 @@ function mapSectionsFromQuestionAnswer( questionAnswer ) {
 
       sectionName: section.sectionName || `Section ${sectionIdx + 1}`,
 
-      targetScore: sectionMax,
+      targetScore: sectionMax ? sectionMax : '--',
 
-      actualScore: sectionScore,
+      actualScore: sectionMax ? sectionScore : '--',
 
       questionsCount,
 
       passedCount,
 
-      percentage: sectionMax > 0 ? Math.round( ( sectionScore / sectionMax ) * 100 ) : 0,
+      percentage: sectionMax > 0 ? Math.round( ( sectionScore / sectionMax ) * 100 ) : '--',
 
     } );
 
@@ -415,7 +706,7 @@ function mapSectionsFromQuestionAnswer( questionAnswer ) {
   const numQuestions = questionAnswer.reduce( ( sum, s ) => sum + ( s.questions?.length || 0 ), 0 );
 
 
-  return { totalScore, maxScore, sectionInsights, questionAnswers, flags, numQuestions };
+  return { totalScore, maxScore, sectionInsights, questionAnswers, flags, numQuestions, hasSopFlag };
 }
 
 
@@ -437,7 +728,7 @@ export function buildVisitChecklistTemplateDataFromProcessed( processedDoc, bran
 
   const {
 
-    totalScore, maxScore, sectionInsights, questionAnswers, flags, numQuestions,
+    totalScore, maxScore, sectionInsights, questionAnswers, flags, numQuestions, hasSopFlag,
 
   } = mapSectionsFromQuestionAnswer( questionAnswer );
 
@@ -551,7 +842,11 @@ export function buildVisitChecklistTemplateDataFromProcessed( processedDoc, bran
 
     numFlags: typeof doc.questionFlag === 'number' ? doc.questionFlag : flags.length,
 
-    aiBreached: typeof doc.runAIFlag === 'number' ? doc.runAIFlag : 0,
+    showFlags: hasSopFlag,
+
+    runAIFlag: typeof doc.runAIFlag === 'number' ? doc.runAIFlag : 0,
+
+    showRunAIFlag: ( typeof doc.runAIQuestionCount === 'number' ? doc.runAIQuestionCount : 0 ) > 0,
 
     submittedBy: doc.userName || '--',
 
@@ -618,7 +913,7 @@ function buildFromViewChecklistApi( getchecklistData, viewchecklistData, brandIn
 
   const {
 
-    totalScore, maxScore, sectionInsights, questionAnswers, flags, numQuestions,
+    totalScore, maxScore, sectionInsights, questionAnswers, flags, numQuestions, hasSopFlag,
 
   } = mapSectionsFromQuestionAnswer( questionAnswer );
 
@@ -704,7 +999,11 @@ function buildFromViewChecklistApi( getchecklistData, viewchecklistData, brandIn
 
     numFlags: checklistAnswer?.flagCount ?? flags.length,
 
-    aiBreached: checklistAnswer?.aiBreachedCount ?? 0,
+    showFlags: hasSopFlag,
+
+    runAIFlag: checklistAnswer?.runAIFlag ?? checklistInfo?.runAIFlag ?? checklistAnswer?.aiBreachedCount ?? 0,
+
+    showRunAIFlag: ( checklistInfo?.runAIQuestionCount ?? checklistAnswer?.runAIQuestionCount ?? 0 ) > 0,
 
     submittedBy: checklistInfo?.submittedBy || storeProfile?.userName || '--',
 
@@ -847,11 +1146,6 @@ export function createImageCache() {
     }
 
 
-    if ( resolvedData.userSignature && resolvedData.userSignature.startsWith( 'http' ) ) {
-      urls.add( resolvedData.userSignature );
-    }
-
-
     const collectFromSection = ( section ) => {
       section.questions?.forEach( ( q ) => {
         if ( q.questionReferenceImage && q.questionReferenceImage.startsWith( 'http' ) ) urls.add( q.questionReferenceImage );
@@ -875,6 +1169,14 @@ export function createImageCache() {
               if ( typeof u === 'string' && u.startsWith( 'http' ) ) urls.add( u );
             } );
           }
+
+          ua.answerMedia?.forEach( ( m ) => {
+            if ( typeof m.url === 'string' && m.url.startsWith( 'http' ) ) urls.add( m.url );
+          } );
+        } );
+
+        q.mediaItems?.forEach( ( m ) => {
+          if ( typeof m.url === 'string' && m.url.startsWith( 'http' ) ) urls.add( m.url );
         } );
       } );
     };
@@ -917,11 +1219,6 @@ export function createImageCache() {
     }
 
 
-    if ( resolvedData.userSignature ) {
-      resolvedData.userSignature = cache.get( resolvedData.userSignature ) || resolvedData.userSignature;
-    }
-
-
     const replaceInSection = ( section ) => {
       section.questions?.forEach( ( q ) => {
         if ( q.questionReferenceImage && cache.has( q.questionReferenceImage ) ) q.questionReferenceImage = cache.get( q.questionReferenceImage );
@@ -943,7 +1240,19 @@ export function createImageCache() {
           if ( ua.validationDisplayType === 'multiImage' && ua.validationImage?.length ) {
             ua.validationImage = ua.validationImage.map( ( u ) => ( cache.has( u ) ? cache.get( u ) : u ) );
           }
+
+          if ( ua.answerMedia?.length ) {
+            ua.answerMedia.forEach( ( m ) => {
+              if ( cache.has( m.url ) ) m.url = cache.get( m.url );
+            } );
+          }
         } );
+
+        if ( q.mediaItems?.length ) {
+          q.mediaItems.forEach( ( m ) => {
+            if ( cache.has( m.url ) ) m.url = cache.get( m.url );
+          } );
+        }
       } );
     };
 
@@ -1024,7 +1333,19 @@ export function resolveTemplateUrls( templateData, baseUrl = 'https://d1r0hc2ssk
         if ( ua.answer && ua.answerType !== 'text' ) {
           ua.answer = resolveUrl( ua.answer );
         }
+
+        if ( ua.answerMedia?.length ) {
+          ua.answerMedia.forEach( ( m ) => {
+            m.url = resolveUrl( m.url );
+          } );
+        }
       } );
+
+      if ( q.mediaItems?.length ) {
+        q.mediaItems.forEach( ( m ) => {
+          m.url = resolveUrl( m.url );
+        } );
+      }
     } );
   };
 
@@ -1046,10 +1367,6 @@ export function resolveTemplateUrls( templateData, baseUrl = 'https://d1r0hc2ssk
     resolvedData.userImage = resolveUrl( resolvedData.userImage );
   }
 
-  if ( resolvedData?.userSignature && !resolvedData.userSignature.startsWith( 'http' ) && !resolvedData.userSignature.startsWith( 'data:' ) ) {
-    resolvedData.userSignature = resolveUrl( resolvedData.userSignature );
-  }
-
 
   return resolvedData;
 }
@@ -1168,7 +1485,19 @@ export async function generateVisitChecklistPDF( templateData, baseUrl = 'https:
         if ( ua.answer && ua.answerType !== 'text' ) {
           ua.answer = resolveUrl( ua.answer );
         }
+
+        if ( ua.answerMedia?.length ) {
+          ua.answerMedia.forEach( ( m ) => {
+            m.url = resolveUrl( m.url );
+          } );
+        }
       } );
+
+      if ( q.mediaItems?.length ) {
+        q.mediaItems.forEach( ( m ) => {
+          m.url = resolveUrl( m.url );
+        } );
+      }
     } );
   };
 
@@ -1186,10 +1515,6 @@ export async function generateVisitChecklistPDF( templateData, baseUrl = 'https:
     resolvedData.userImage = resolveUrl( resolvedData.userImage );
   }
 
-  if ( resolvedData.userSignature && !resolvedData.userSignature.startsWith( 'http' ) && !resolvedData.userSignature.startsWith( 'data:' ) ) {
-    resolvedData.userSignature = resolveUrl( resolvedData.userSignature );
-  }
-
 
   const html = template( resolvedData );