From 8999805ec6c35df487a7aa86b6687f6a8f16e02a Mon Sep 17 00:00:00 2001
From: John Mizerek <mizerek@gmail.com>
Date: Thu, 15 Jan 2026 16:02:03 -0800
Subject: [PATCH] Add detailed modifier view with source tracking

Backend (analyzeMenuImages.cfm):
- Track which image each modifier was found on via sourceImageIndex
- Changed loop to use index to capture image number

Frontend (setup-wizard.html):
- Show detailed modifier information in expandable cards
- Display source image number for each modifier
- Show appliesTo status (category/uncertain) with badges
- Display all modifier options with prices in detail view
- Click modifier header to expand/collapse full option list
- Added comprehensive CSS for new modifier display:
  * Expandable card design with hover effects
  * Color-coded badges for source image, category assignment
  * Detailed option list with prices
  * Visual distinction for uncertain modifiers

Users can now:
- See which image each modifier came from
- View complete option list before confirming
- Understand how each modifier will be applied
- Make informed decisions about which modifiers to keep

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 api/setup/analyzeMenuImages.cfm |   4 +-
 portal/setup-wizard.html        | 162 ++++++++++++++++++++++++++++----
 2 files changed, 148 insertions(+), 18 deletions(-)

diff --git a/api/setup/analyzeMenuImages.cfm b/api/setup/analyzeMenuImages.cfm
index 66782d0..40e8052 100644
--- a/api/setup/analyzeMenuImages.cfm
+++ b/api/setup/analyzeMenuImages.cfm
@@ -223,7 +223,8 @@
 
     <!--- 3. Merge modifiers (dedupe by name) --->
     <cfset modifierMap = structNew()>
-    <cfloop array="#allResults#" index="result">
+    <cfloop from="1" to="#arrayLen(allResults)#" index="resultIndex">
+        <cfset result = allResults[resultIndex]>
         <cfif structKeyExists(result, "modifiers") AND isArray(result.modifiers)>
             <cfloop array="#result.modifiers#" index="mod">
                 <cfif isStruct(mod) AND structKeyExists(mod, "name") AND len(trim(mod.name))>
@@ -234,6 +235,7 @@
                         <cfset normalizedMod["name"] = trim(mod.name)>
                         <cfset normalizedMod["required"] = structKeyExists(mod, "required") AND mod.required EQ true>
                         <cfset normalizedMod["appliesTo"] = structKeyExists(mod, "appliesTo") ? mod.appliesTo : "uncertain">
+                        <cfset normalizedMod["sourceImageIndex"] = resultIndex>
                         <cfif structKeyExists(mod, "categoryName") AND len(trim(mod.categoryName))>
                             <cfset normalizedMod["categoryName"] = trim(mod.categoryName)>
                         </cfif>
diff --git a/portal/setup-wizard.html b/portal/setup-wizard.html
index f361fd8..7d1ca0e 100644
--- a/portal/setup-wizard.html
+++ b/portal/setup-wizard.html
@@ -291,27 +291,117 @@
       gap: 12px;
       padding: 12px 16px;
       background: #fff;
-      border-bottom: 1px solid var(--gray-200);
       cursor: pointer;
+      transition: background 0.2s;
+    }
+
+    .modifier-header:hover {
+      background: var(--gray-50);
     }
 
     .modifier-header input[type="checkbox"] {
       width: 18px;
       height: 18px;
+      flex-shrink: 0;
+    }
+
+    .modifier-info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .modifier-name-row {
+      display: flex;
+      align-items: center;
+      gap: 12px;
     }
 
     .modifier-name {
-      flex: 1;
       font-weight: 600;
       color: var(--gray-800);
+      font-size: 15px;
     }
 
     .modifier-type {
-      font-size: 12px;
+      font-size: 11px;
       color: var(--gray-500);
       background: var(--gray-100);
       padding: 2px 8px;
       border-radius: 10px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .modifier-meta {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+
+    .source-badge, .applies-to-badge, .options-count {
+      font-size: 12px;
+      padding: 2px 8px;
+      border-radius: 4px;
+      background: var(--gray-100);
+      color: var(--gray-600);
+    }
+
+    .source-badge {
+      background: rgba(99, 102, 241, 0.1);
+      color: var(--primary);
+    }
+
+    .applies-to-badge {
+      background: rgba(34, 197, 94, 0.1);
+      color: var(--success);
+    }
+
+    .applies-to-badge.uncertain {
+      background: rgba(245, 158, 11, 0.1);
+      color: #d97706;
+    }
+
+    .expand-icon {
+      font-size: 12px;
+      color: var(--gray-400);
+      transition: transform 0.2s;
+      flex-shrink: 0;
+    }
+
+    .modifier-details {
+      border-top: 1px solid var(--gray-200);
+      background: var(--gray-50);
+    }
+
+    .modifier-options-list {
+      padding: 12px 16px 12px 46px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .modifier-option-detail {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 12px;
+      background: #fff;
+      border: 1px solid var(--gray-200);
+      border-radius: 4px;
+    }
+
+    .option-name {
+      font-size: 14px;
+      color: var(--gray-700);
+    }
+
+    .option-price {
+      font-size: 13px;
+      color: var(--success);
+      font-weight: 500;
     }
 
     .modifier-options {
@@ -1432,22 +1522,47 @@
         return;
       }
 
-      let modifiersHtml = modifiers.map((mod, i) => `
-        <div class="modifier-template">
-          <div class="modifier-header">
-            <input type="checkbox" checked data-index="${i}">
-            <span class="modifier-name">${mod.name || 'Unnamed'}</span>
-            <span class="modifier-type">${mod.required ? 'Required' : 'Optional'}</span>
+      let modifiersHtml = modifiers.map((mod, i) => {
+        const sourceImg = mod.sourceImageIndex ? `Image ${mod.sourceImageIndex}` : 'Unknown source';
+        const appliesToInfo = mod.appliesTo === 'category' && mod.categoryName
+          ? `<span class="applies-to-badge">Applies to: ${mod.categoryName}</span>`
+          : mod.appliesTo === 'uncertain'
+          ? '<span class="applies-to-badge uncertain">Uncertain application</span>'
+          : '';
+
+        const optionsCount = (mod.options || []).length;
+        const optionsList = (mod.options || []).filter(opt => opt && opt.name).map(opt => `
+          <div class="modifier-option-detail">
+            <span class="option-name">${opt.name}</span>
+            <span class="option-price">${opt.price ? `+$${opt.price.toFixed(2)}` : '$0.00'}</span>
           </div>
-          <div class="modifier-options">
-            ${(mod.options || []).filter(opt => opt && opt.name).map(opt => `
-              <span class="modifier-option">
-                ${opt.name}${opt.price ? `<span class="price">+$${opt.price.toFixed(2)}</span>` : ''}
-              </span>
-            `).join('')}
+        `).join('');
+
+        return `
+          <div class="modifier-template" data-index="${i}">
+            <div class="modifier-header" onclick="toggleModifierDetails(${i})">
+              <input type="checkbox" checked data-index="${i}" onclick="event.stopPropagation()">
+              <div class="modifier-info">
+                <div class="modifier-name-row">
+                  <span class="modifier-name">${mod.name || 'Unnamed'}</span>
+                  <span class="modifier-type">${mod.required ? 'Required' : 'Optional'}</span>
+                </div>
+                <div class="modifier-meta">
+                  <span class="source-badge">${sourceImg}</span>
+                  ${appliesToInfo}
+                  <span class="options-count">${optionsCount} option${optionsCount !== 1 ? 's' : ''}</span>
+                </div>
+              </div>
+              <span class="expand-icon">▼</span>
+            </div>
+            <div class="modifier-details" id="mod-details-${i}" style="display: none;">
+              <div class="modifier-options-list">
+                ${optionsList}
+              </div>
+            </div>
           </div>
-        </div>
-      `).join('');
+        `;
+      }).join('');
 
       addMessage('ai', `
         <p>I found <strong>${modifiers.length} modifier templates</strong> that can be applied to menu items:</p>
@@ -1466,6 +1581,19 @@
       `);
     }
 
+    function toggleModifierDetails(index) {
+      const details = document.getElementById(`mod-details-${index}`);
+      const icon = details.previousElementSibling.querySelector('.expand-icon');
+
+      if (details.style.display === 'none') {
+        details.style.display = 'block';
+        icon.textContent = '▲';
+      } else {
+        details.style.display = 'none';
+        icon.textContent = '▼';
+      }
+    }
+
     function confirmModifiers() {
       const list = document.getElementById('modifiersList');
       const templates = list.querySelectorAll('.modifier-template');