From 6d1cbc01c6881b14978906ff96df380345145bb6 Mon Sep 17 00:00:00 2001
From: cproudlock <cproudlock@localhost>
Date: Fri, 9 Jan 2026 14:18:13 -0500
Subject: [PATCH] Add employee search autocomplete and photo display for
 Recognition

- Add apiemployeesearch.asp for searching employees by name with Team info
- Update addnotification.asp with autocomplete dropdown showing photo, name, team, SSO
- Support custom names for non-system employees using NAME: prefix in employeesso field
- Add theme-aware CSS for selected employee chips (light/dark themes)
- Update apishopfloor.asp to detect NAME: prefix and extract custom names
- Update shopfloor-dashboard to display employee photos (140px) with GE logo fallback

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 addnotification.asp            | 343 ++++++++++++++++++++++++++++++---
 apiemployeesearch.asp          | 127 ++++++++++++
 apishopfloor.asp               |  90 ++++++++-
 savenotificationdirect.asp     |   6 +-
 shopfloor-dashboard/index.html | 105 ++++++++--
 5 files changed, 618 insertions(+), 53 deletions(-)
 create mode 100644 apiemployeesearch.asp
diff --git a/addnotification.asp b/addnotification.asp
index 40f2a0e..32708c1 100644
--- a/addnotification.asp
+++ b/addnotification.asp
@@ -3,6 +3,141 @@
 <head>
   <!--#include file="./includes/header.asp"-->
   <!--#include file="./includes/sql.asp"-->
+  <style>
+    .employee-search-container {
+      position: relative;
+    }
+    .employee-dropdown {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      background: #fff;
+      border: 1px solid #ced4da;
+      border-top: none;
+      border-radius: 0 0 .25rem .25rem;
+      max-height: 300px;
+      overflow-y: auto;
+      z-index: 1000;
+      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    }
+    .employee-option {
+      display: flex;
+      align-items: center;
+      padding: 10px 12px;
+      cursor: pointer;
+      border-bottom: 1px solid #eee;
+    }
+    .employee-option:hover {
+      background-color: #f8f9fa;
+    }
+    .employee-option:last-child {
+      border-bottom: none;
+    }
+    .employee-option img {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      object-fit: cover;
+      margin-right: 12px;
+      border: 2px solid #007bff;
+    }
+    .employee-option .ge-logo {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      margin-right: 12px;
+      background: #007bff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .employee-option .ge-logo img {
+      width: 24px;
+      height: 24px;
+      border: none;
+      border-radius: 0;
+    }
+    .employee-option-info {
+      flex: 1;
+    }
+    .employee-option-name {
+      font-weight: 600;
+      color: #333;
+    }
+    .employee-option-sso {
+      font-size: 12px;
+      color: #666;
+    }
+    .employee-option-custom {
+      color: #28a745;
+      font-style: italic;
+    }
+    .selected-employees {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+    .selected-employee {
+      display: flex;
+      align-items: center;
+      background: #ffffff;
+      border: 1px solid #dee2e6;
+      border-radius: 20px;
+      padding: 5px 10px 5px 5px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+    /* Dark theme support */
+    .bg-theme4 .selected-employee,
+    .bg-theme5 .selected-employee,
+    .bg-theme6 .selected-employee,
+    .bg-dark .selected-employee {
+      background: #2d3748;
+      border-color: #4a5568;
+    }
+    .selected-employee img {
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      object-fit: cover;
+      margin-right: 8px;
+    }
+    .selected-employee .ge-logo-small {
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      margin-right: 8px;
+      background: #007bff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .selected-employee .ge-logo-small img {
+      width: 18px;
+      height: 18px;
+    }
+    .selected-employee-name {
+      font-size: 14px;
+      margin-right: 8px;
+      color: #333;
+    }
+    /* Dark theme text */
+    .bg-theme4 .selected-employee-name,
+    .bg-theme5 .selected-employee-name,
+    .bg-theme6 .selected-employee-name,
+    .bg-dark .selected-employee-name {
+      color: #e2e8f0;
+    }
+    .selected-employee-remove {
+      cursor: pointer;
+      color: #dc3545;
+      font-weight: bold;
+      font-size: 16px;
+    }
+    .selected-employee-remove:hover {
+      color: #a71d2a;
+    }
+  </style>
 </head>
 
 <%
@@ -120,13 +255,19 @@
                 </div>
 
                 <div class="form-group" id="employeessoGroup" style="display:none;">
-                  <label for="employeesso">Employee SSO(s) <span class="text-danger">*</span></label>
-                  <input type="text" class="form-control" id="employeesso" name="employeesso"
-                         maxlength="100" placeholder="123456789 or 123456789, 987654321">
-                  <small class="form-text text-muted">Enter one or more SSOs separated by commas</small>
-                  <div id="employeePreview" class="mt-2" style="display:none;">
-                    <span class="badge badge-info" id="employeeNames"></span>
+                  <label for="employeeSearch">Employee(s) <span class="text-danger">*</span></label>
+                  <div class="employee-search-container">
+                    <input type="text" class="form-control" id="employeeSearch"
+                           placeholder="Search by name or type a custom name..."
+                           autocomplete="off">
+                    <div id="employeeDropdown" class="employee-dropdown" style="display:none;"></div>
                   </div>
+                  <small class="form-text text-muted">Search for employees or type a name for non-system users. Press Enter to add custom names.</small>
+
+                  <div id="selectedEmployees" class="selected-employees mt-2"></div>
+
+                  <!-- Hidden field for form submission (stores SSO or NAME:customname) -->
+                  <input type="hidden" id="employeesso" name="employeesso" value="">
                 </div>
 
                 <div class="form-row" id="timeFieldsRow">
@@ -288,44 +429,184 @@
       }
     }
 
-    // Lookup employee names by SSO
-    var lookupTimeout = null;
+    // Employee autocomplete functionality
+    var searchTimeout = null;
+    var selectedEmployees = []; // Array of {sso, name, picture, isCustom}
+    var EMPLOYEE_PHOTO_BASE = 'https://tsgwp00525.rd.ds.ge.com/EmployeeDBAPP/images/';
+    var GE_LOGO_URL = './shopfloor-dashboard/ge-aerospace-logo.svg';
+
     document.addEventListener('DOMContentLoaded', function() {
-      var ssoInput = document.getElementById('employeesso');
-      ssoInput.addEventListener('input', function() {
-        clearTimeout(lookupTimeout);
-        lookupTimeout = setTimeout(lookupEmployees, 500);
+      var searchInput = document.getElementById('employeeSearch');
+      var dropdown = document.getElementById('employeeDropdown');
+
+      // Search on input
+      searchInput.addEventListener('input', function() {
+        clearTimeout(searchTimeout);
+        var query = this.value.trim();
+
+        if (query.length < 2) {
+          dropdown.style.display = 'none';
+          return;
+        }
+
+        searchTimeout = setTimeout(function() {
+          searchEmployees(query);
+        }, 300);
+      });
+
+      // Handle Enter key for custom names
+      searchInput.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          var customName = this.value.trim();
+          if (customName.length > 0) {
+            addEmployee(null, customName, null, true);
+            this.value = '';
+            dropdown.style.display = 'none';
+          }
+        }
+      });
+
+      // Close dropdown when clicking outside
+      document.addEventListener('click', function(e) {
+        if (!e.target.closest('.employee-search-container')) {
+          dropdown.style.display = 'none';
+        }
       });
     });
 
-    function lookupEmployees() {
-      var ssoInput = document.getElementById('employeesso');
-      var ssos = ssoInput.value.trim();
-      var previewDiv = document.getElementById('employeePreview');
-      var namesSpan = document.getElementById('employeeNames');
+    function searchEmployees(query) {
+      var dropdown = document.getElementById('employeeDropdown');
 
-      if (!ssos) {
-        previewDiv.style.display = 'none';
-        return;
-      }
-
-      // Call AJAX endpoint to lookup names
-      fetch('./lookupemployee.asp?sso=' + encodeURIComponent(ssos))
+      fetch('./apiemployeesearch.asp?q=' + encodeURIComponent(query) + '&limit=8')
         .then(function(response) { return response.json(); })
         .then(function(data) {
-          if (data.success && data.names) {
-            namesSpan.textContent = data.names;
-            previewDiv.style.display = 'block';
+          if (data.success && data.results) {
+            renderDropdown(data.results, query);
           } else {
-            namesSpan.textContent = data.error || 'Employee not found';
-            namesSpan.className = 'badge badge-warning';
-            previewDiv.style.display = 'block';
+            renderDropdown([], query);
           }
         })
         .catch(function(err) {
-          previewDiv.style.display = 'none';
+          renderDropdown([], query);
         });
     }
+
+    function renderDropdown(results, query) {
+      var dropdown = document.getElementById('employeeDropdown');
+      var html = '';
+
+      // Show matching employees
+      results.forEach(function(emp) {
+        // Check if already selected
+        var isSelected = selectedEmployees.some(function(s) { return s.sso === emp.sso; });
+        if (isSelected) return;
+
+        var photoHtml;
+        if (emp.picture) {
+          photoHtml = '<img src="' + EMPLOYEE_PHOTO_BASE + emp.picture + '" onerror="this.parentNode.innerHTML=\'<div class=ge-logo><img src=' + GE_LOGO_URL + '></div>\'">';
+        } else {
+          photoHtml = '<div class="ge-logo"><img src="' + GE_LOGO_URL + '"></div>';
+        }
+
+        html += '<div class="employee-option" onclick="selectEmployee(\'' + emp.sso + '\', \'' + escapeHtml(emp.fullName) + '\', \'' + (emp.picture || '') + '\')">';
+        html += photoHtml;
+        html += '<div class="employee-option-info">';
+        html += '<div class="employee-option-name">' + escapeHtml(emp.fullName) + (emp.team ? ' - ' + escapeHtml(emp.team) : '') + '</div>';
+        html += '<div class="employee-option-sso">SSO: ' + emp.sso + '</div>';
+        html += '</div></div>';
+      });
+
+      // Always show option to add as custom name
+      if (query.length > 0) {
+        html += '<div class="employee-option" onclick="addCustomEmployee(\'' + escapeHtml(query) + '\')">';
+        html += '<div class="ge-logo"><img src="' + GE_LOGO_URL + '"></div>';
+        html += '<div class="employee-option-info">';
+        html += '<div class="employee-option-name employee-option-custom">Add "' + escapeHtml(query) + '" (not in system)</div>';
+        html += '</div></div>';
+      }
+
+      dropdown.innerHTML = html;
+      dropdown.style.display = html ? 'block' : 'none';
+    }
+
+    function selectEmployee(sso, name, picture) {
+      addEmployee(sso, name, picture, false);
+      document.getElementById('employeeSearch').value = '';
+      document.getElementById('employeeDropdown').style.display = 'none';
+    }
+
+    function addCustomEmployee(name) {
+      addEmployee(null, name, null, true);
+      document.getElementById('employeeSearch').value = '';
+      document.getElementById('employeeDropdown').style.display = 'none';
+    }
+
+    function addEmployee(sso, name, picture, isCustom) {
+      // Check for duplicates
+      var isDuplicate = selectedEmployees.some(function(s) {
+        if (sso && s.sso === sso) return true;
+        if (isCustom && s.isCustom && s.name === name) return true;
+        return false;
+      });
+      if (isDuplicate) return;
+
+      selectedEmployees.push({ sso: sso, name: name, picture: picture, isCustom: isCustom });
+      updateSelectedDisplay();
+      updateHiddenFields();
+    }
+
+    function removeEmployee(index) {
+      selectedEmployees.splice(index, 1);
+      updateSelectedDisplay();
+      updateHiddenFields();
+    }
+
+    function updateSelectedDisplay() {
+      var container = document.getElementById('selectedEmployees');
+      var html = '';
+
+      selectedEmployees.forEach(function(emp, index) {
+        var photoHtml;
+        if (emp.picture) {
+          photoHtml = '<img src="' + EMPLOYEE_PHOTO_BASE + emp.picture + '" onerror="this.parentNode.innerHTML=\'<div class=ge-logo-small><img src=' + GE_LOGO_URL + '></div>\'">';
+        } else {
+          photoHtml = '<div class="ge-logo-small"><img src="' + GE_LOGO_URL + '"></div>';
+        }
+
+        html += '<div class="selected-employee">';
+        html += photoHtml;
+        html += '<span class="selected-employee-name">' + escapeHtml(emp.name);
+        if (emp.isCustom) html += ' <small>(custom)</small>';
+        html += '</span>';
+        html += '<span class="selected-employee-remove" onclick="removeEmployee(' + index + ')">x</span>';
+        html += '</div>';
+      });
+
+      container.innerHTML = html;
+    }
+
+    function updateHiddenFields() {
+      var values = [];
+
+      selectedEmployees.forEach(function(emp) {
+        if (emp.sso) {
+          // System employee - use SSO
+          values.push(emp.sso);
+        } else if (emp.isCustom) {
+          // Custom name - use NAME: prefix
+          values.push('NAME:' + emp.name);
+        }
+      });
+
+      document.getElementById('employeesso').value = values.join(',');
+    }
+
+    function escapeHtml(text) {
+      var div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    }
   </script>
 
 </body>
diff --git a/apiemployeesearch.asp b/apiemployeesearch.asp
new file mode 100644
index 0000000..9805ac3
--- /dev/null
+++ b/apiemployeesearch.asp
@@ -0,0 +1,127 @@
+<%@ Language=VBScript %>
+<%
+'=============================================================================
+' FILE: apiemployeesearch.asp
+' PURPOSE: Search employees by name for recognition autocomplete
+' RETURNS: JSON array of matching employees with SSO, name, and picture
+' USAGE: apiemployeesearch.asp?q=john&limit=10
+'=============================================================================
+
+Response.ContentType = "application/json"
+Response.Charset = "UTF-8"
+Response.AddHeader "Access-Control-Allow-Origin", "*"
+Response.AddHeader "Cache-Control", "no-cache, no-store, must-revalidate"
+%>
+<!--#include file="./includes/sql.asp"-->
+<%
+On Error Resume Next
+
+Dim searchTerm, maxResults
+searchTerm = Trim(Request.QueryString("q"))
+maxResults = Request.QueryString("limit")
+
+If maxResults = "" Or Not IsNumeric(maxResults) Then
+    maxResults = 10
+Else
+    maxResults = CLng(maxResults)
+    If maxResults > 50 Then maxResults = 50
+    If maxResults < 1 Then maxResults = 10
+End If
+
+' Validate search term
+If Len(searchTerm) < 2 Then
+    Response.Write "{""success"":false,""error"":""Search term must be at least 2 characters"",""results"":[]}"
+    Response.End
+End If
+
+' Connect to employee database
+Dim empConn, empCmd, empRs
+Set empConn = Server.CreateObject("ADODB.Connection")
+empConn.ConnectionString = GetEmployeeConnectionString()
+empConn.Open
+
+If Err.Number <> 0 Then
+    Response.Write "{""success"":false,""error"":""" & JSEscape(Err.Description) & """,""results"":[]}"
+    Response.End
+End If
+
+' Search by first name, last name, or full name
+' Using parameterized query with LIKE
+Set empCmd = Server.CreateObject("ADODB.Command")
+empCmd.ActiveConnection = empConn
+empCmd.CommandText = "SELECT SSO, First_Name, Last_Name, Team, Picture FROM employees " & _
+                     "WHERE First_Name LIKE ? OR Last_Name LIKE ? " & _
+                     "OR CONCAT(First_Name, ' ', Last_Name) LIKE ? " & _
+                     "ORDER BY Last_Name, First_Name LIMIT ?"
+empCmd.CommandType = 1
+
+Dim searchPattern
+searchPattern = "%" & searchTerm & "%"
+
+empCmd.Parameters.Append empCmd.CreateParameter("@first", 200, 1, 100, searchPattern)
+empCmd.Parameters.Append empCmd.CreateParameter("@last", 200, 1, 100, searchPattern)
+empCmd.Parameters.Append empCmd.CreateParameter("@full", 200, 1, 100, searchPattern)
+empCmd.Parameters.Append empCmd.CreateParameter("@limit", 3, 1, , maxResults)
+
+Set empRs = empCmd.Execute()
+
+If Err.Number <> 0 Then
+    Response.Write "{""success"":false,""error"":""" & JSEscape(Err.Description) & """,""results"":[]}"
+    empConn.Close
+    Response.End
+End If
+
+' Build JSON response
+Dim jsonOutput, isFirst
+jsonOutput = "{""success"":true,""results"":["
+isFirst = True
+
+Do While Not empRs.EOF
+    If Not isFirst Then jsonOutput = jsonOutput & ","
+    isFirst = False
+
+    Dim sso, firstName, lastName, team, picture, fullName
+    sso = empRs("SSO") & ""
+    firstName = empRs("First_Name") & ""
+    lastName = empRs("Last_Name") & ""
+    team = empRs("Team") & ""
+    picture = empRs("Picture") & ""
+    fullName = firstName & " " & lastName
+
+    jsonOutput = jsonOutput & "{"
+    jsonOutput = jsonOutput & """sso"":""" & JSEscape(sso) & ""","
+    jsonOutput = jsonOutput & """firstName"":""" & JSEscape(firstName) & ""","
+    jsonOutput = jsonOutput & """lastName"":""" & JSEscape(lastName) & ""","
+    jsonOutput = jsonOutput & """team"":""" & JSEscape(team) & ""","
+    jsonOutput = jsonOutput & """fullName"":""" & JSEscape(fullName) & ""","
+    jsonOutput = jsonOutput & """picture"":""" & JSEscape(picture) & """"
+    jsonOutput = jsonOutput & "}"
+
+    empRs.MoveNext
+Loop
+
+jsonOutput = jsonOutput & "]}"
+
+empRs.Close
+empConn.Close
+Set empRs = Nothing
+Set empCmd = Nothing
+Set empConn = Nothing
+
+Response.Write jsonOutput
+
+Function JSEscape(s)
+    If IsNull(s) Then
+        JSEscape = ""
+        Exit Function
+    End If
+    Dim r
+    r = s & ""
+    r = Replace(r, "\", "\\")
+    r = Replace(r, """", "\""")
+    r = Replace(r, Chr(13), "")
+    r = Replace(r, Chr(10), "\n")
+    r = Replace(r, Chr(9), "\t")
+    JSEscape = r
+End Function
+%>
diff --git a/apishopfloor.asp b/apishopfloor.asp
index 7df6f5a..8a991a7 100644
--- a/apishopfloor.asp
+++ b/apishopfloor.asp
@@ -83,8 +83,22 @@ Do While Not rs.EOF
         jsonOutput = jsonOutput & """typename"":""" & JSEscape(rs("typename") & "") & ""","
         jsonOutput = jsonOutput & """typecolor"":""" & JSEscape(rs("typecolor") & "") & ""","
         jsonOutput = jsonOutput & """businessunit"":" & StrOrNull(rs("businessunit")) & ","
-        jsonOutput = jsonOutput & """employeesso"":" & StrOrNull(rs("employeesso")) & ","
-        jsonOutput = jsonOutput & """employeename"":" & StrOrNull(LookupEmployeeNames(rs("employeesso"))) & ""
+        ' Handle employeesso - can be SSO or NAME:customname
+        Dim empSsoRaw, empName, empPicture
+        empSsoRaw = rs("employeesso") & ""
+        If Left(empSsoRaw, 5) = "NAME:" Then
+            ' Custom name - extract name, no picture
+            empName = Mid(empSsoRaw, 6)
+            empPicture = ""
+            jsonOutput = jsonOutput & """employeesso"":null,"
+        Else
+            ' SSO - lookup name and picture
+            empName = LookupEmployeeNames(empSsoRaw)
+            empPicture = LookupEmployeePictures(empSsoRaw)
+            jsonOutput = jsonOutput & """employeesso"":" & StrOrNull(empSsoRaw) & ","
+        End If
+        jsonOutput = jsonOutput & """employeename"":" & StrOrNull(empName) & ","
+        jsonOutput = jsonOutput & """employeepicture"":" & StrOrNull(empPicture) & ""
         jsonOutput = jsonOutput & "}"
     End If
 
@@ -119,8 +133,21 @@ Do While Not rs.EOF
         jsonOutput = jsonOutput & """typename"":""" & JSEscape(rs("typename") & "") & ""","
         jsonOutput = jsonOutput & """typecolor"":""" & JSEscape(rs("typecolor") & "") & ""","
         jsonOutput = jsonOutput & """businessunit"":" & StrOrNull(rs("businessunit")) & ","
-        jsonOutput = jsonOutput & """employeesso"":" & StrOrNull(rs("employeesso")) & ","
-        jsonOutput = jsonOutput & """employeename"":" & StrOrNull(LookupEmployeeNames(rs("employeesso"))) & ""
+        ' Handle employeesso - can be SSO or NAME:customname
+        empSsoRaw = rs("employeesso") & ""
+        If Left(empSsoRaw, 5) = "NAME:" Then
+            ' Custom name - extract name, no picture
+            empName = Mid(empSsoRaw, 6)
+            empPicture = ""
+            jsonOutput = jsonOutput & """employeesso"":null,"
+        Else
+            ' SSO - lookup name and picture
+            empName = LookupEmployeeNames(empSsoRaw)
+            empPicture = LookupEmployeePictures(empSsoRaw)
+            jsonOutput = jsonOutput & """employeesso"":" & StrOrNull(empSsoRaw) & ","
+        End If
+        jsonOutput = jsonOutput & """employeename"":" & StrOrNull(empName) & ","
+        jsonOutput = jsonOutput & """employeepicture"":" & StrOrNull(empPicture) & ""
         jsonOutput = jsonOutput & "}"
     End If
 
@@ -227,4 +254,59 @@ Function LookupEmployeeNames(ssoInput)
         LookupEmployeeNames = "[Not found: " & ssoInput & "]"
     End If
 End Function
+
+' Look up employee picture(s) from SSO(s)
+Function LookupEmployeePictures(ssoInput)
+    If IsNull(ssoInput) Or Len(ssoInput & "") = 0 Then
+        LookupEmployeePictures = ""
+        Exit Function
+    End If
+
+    Dim empConn, empCmd, empRs, ssoList, pictures, i, sso, picture
+
+    On Error Resume Next
+    Set empConn = Server.CreateObject("ADODB.Connection")
+    empConn.ConnectionString = GetEmployeeConnectionString()
+    empConn.Open
+
+    If Err.Number <> 0 Then
+        LookupEmployeePictures = ""
+        Exit Function
+    End If
+
+    ssoList = Split(ssoInput & "", ",")
+    pictures = ""
+
+    For i = 0 To UBound(ssoList)
+        sso = Trim(ssoList(i))
+        If IsNumeric(sso) And Len(sso) > 0 Then
+            Set empCmd = Server.CreateObject("ADODB.Command")
+            empCmd.ActiveConnection = empConn
+            empCmd.CommandText = "SELECT Picture FROM employees WHERE SSO = ?"
+            empCmd.CommandType = 1
+            empCmd.Parameters.Append empCmd.CreateParameter("@sso", 3, 1, , CLng(sso))
+
+            Set empRs = empCmd.Execute()
+            If Err.Number = 0 And Not empRs.EOF Then
+                picture = empRs("Picture") & ""
+                If Len(picture) > 0 Then
+                    If Len(pictures) > 0 Then pictures = pictures & ","
+                    pictures = pictures & picture
+                End If
+            End If
+
+            If Not empRs Is Nothing Then
+                If empRs.State = 1 Then empRs.Close
+                Set empRs = Nothing
+            End If
+            Set empCmd = Nothing
+        End If
+    Next
+
+    empConn.Close
+    Set empConn = Nothing
+    On Error GoTo 0
+
+    LookupEmployeePictures = pictures
+End Function
 %>
diff --git a/savenotificationdirect.asp b/savenotificationdirect.asp
index 4b731f1..36a193c 100644
--- a/savenotificationdirect.asp
+++ b/savenotificationdirect.asp
@@ -55,10 +55,10 @@ Dim isRecognition
 isRecognition = (CLng(notificationtypeid) = RECOGNITION_TYPE_ID)
 
 If isRecognition Then
-	' Validate employeesso is provided for Recognition
+	' Validate that employeesso is provided for Recognition (can be SSO or NAME:customname)
 	If Len(employeesso) = 0 Then
 		objConn.Close
-		ShowError "Employee SSO is required for Recognition notifications.", "addnotification.asp"
+		ShowError "At least one employee must be selected for Recognition notifications.", "addnotification.asp"
 		Response.End
 	End If
 
@@ -134,7 +134,7 @@ Else
 	appidValue = CLng(appid)
 End If
 
-' Handle optional employeesso - only for Recognition type
+' Handle optional employeesso - can be SSO or NAME:customname
 Dim employeessoValue
 If Len(employeesso) = 0 Then
 	employeessoValue = Null
diff --git a/shopfloor-dashboard/index.html b/shopfloor-dashboard/index.html
index 180311b..d628339 100644
--- a/shopfloor-dashboard/index.html
+++ b/shopfloor-dashboard/index.html
@@ -421,10 +421,13 @@
             background: linear-gradient(135deg, #1e3a5f 0%, #0d2137 100%);
             border: 3px solid #0d6efd;
             border-radius: 12px;
-            padding: 25px 30px;
+            padding: 20px 25px;
             box-shadow: 0 4px 20px rgba(13, 110, 253, 0.3);
             transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
             width: 100%;
+            display: flex;
+            align-items: center;
+            gap: 25px;
         }
 
         .recognition-card:not(.active) {
@@ -449,10 +452,21 @@
             opacity: 0;
         }
 
+        .recognition-photo-container {
+            flex-shrink: 0;
+        }
+
+        .recognition-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+
         .recognition-header {
             display: flex;
             align-items: center;
-            margin-bottom: 15px;
+            margin-bottom: 10px;
         }
 
         .recognition-star {
@@ -468,17 +482,48 @@
             50% { transform: scale(1.1); }
         }
 
+        .recognition-photo {
+            width: 140px;
+            height: 140px;
+            border-radius: 50%;
+            object-fit: cover;
+            border: 4px solid #0d6efd;
+            background-color: #1a1a2e;
+            box-shadow: 0 4px 15px rgba(13, 110, 253, 0.4);
+        }
+
+        .recognition-photo.ge-logo-fallback {
+            object-fit: contain;
+            padding: 20px;
+            background-color: #fff;
+        }
+
+        .recognition-photo-placeholder {
+            width: 140px;
+            height: 140px;
+            border-radius: 50%;
+            border: 4px solid #0d6efd;
+            background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 48px;
+            font-weight: bold;
+            box-shadow: 0 4px 15px rgba(13, 110, 253, 0.4);
+        }
+
         .recognition-employee {
             font-size: 32px;
             font-weight: 700;
             color: #fff;
+            margin-bottom: 8px;
         }
 
         .recognition-achievement {
-            font-size: 24px;
+            font-size: 22px;
             color: #ccc;
             line-height: 1.4;
-            margin-left: 68px;
         }
 
         .recognition-counter {
@@ -674,7 +719,8 @@
             }
 
             .recognition-card {
-                padding: 15px 20px;
+                padding: 15px;
+                gap: 15px;
             }
 
             .recognition-star {
@@ -682,13 +728,21 @@
                 margin-right: 12px;
             }
 
+            .recognition-photo,
+            .recognition-photo-placeholder {
+                width: 80px;
+                height: 80px;
+                font-size: 28px;
+                border-width: 3px;
+            }
+
             .recognition-employee {
                 font-size: 18px;
+                margin-bottom: 5px;
             }
 
             .recognition-achievement {
                 font-size: 14px;
-                margin-left: 40px;
             }
 
             .recognition-counter {
@@ -818,7 +872,8 @@
             }
 
             .recognition-card {
-                padding: 50px 60px;
+                padding: 40px 50px;
+                gap: 50px;
             }
 
             .recognition-star {
@@ -826,13 +881,21 @@
                 margin-right: 40px;
             }
 
+            .recognition-photo,
+            .recognition-photo-placeholder {
+                width: 280px;
+                height: 280px;
+                font-size: 96px;
+                border-width: 6px;
+            }
+
             .recognition-employee {
                 font-size: 64px;
+                margin-bottom: 15px;
             }
 
             .recognition-achievement {
-                font-size: 48px;
-                margin-left: 136px;
+                font-size: 42px;
             }
 
             .recognition-counter {
@@ -1104,19 +1167,31 @@
                 html += '<div class="recognition-carousel-container">';
                 html += '<div class="recognition-carousel-wrapper" id="recognitionCarousel">';
 
+                // GE logo for fallback
+                const GE_LOGO_URL = 'ge-aerospace-logo.svg';
+
                 recognitions.forEach((event, index) => {
                     const activeClass = index === currentRecognitionIndex ? 'active' : 'enter-down';
                     const displayName = event.employeename || event.employeesso || 'Employee';
-                    console.log('Recognition event:', event);
-                    console.log('employeename:', event.employeename, 'employeesso:', event.employeesso, 'displayName:', displayName);
+                    const photoUrl = event.employeepicture
+                        ? `https://tsgwp00525.rd.ds.ge.com/EmployeeDBAPP/images/${event.employeepicture}`
+                        : null;
+
+                    // Use GE logo as fallback for missing pictures
+                    const photoHtml = photoUrl
+                        ? `<img class="recognition-photo" src="${photoUrl}" alt="${escapeHtml(displayName)}" onerror="this.onerror=null;this.src='${GE_LOGO_URL}';this.classList.add('ge-logo-fallback');">`
+                        : `<img class="recognition-photo ge-logo-fallback" src="${GE_LOGO_URL}" alt="GE Aerospace">`;
+
                     html += `
                         <div class="recognition-card ${activeClass}" data-index="${index}">
                             ${recognitions.length > 1 ? `<div class="recognition-counter">${index + 1} of ${recognitions.length}</div>` : ''}
-                            <div class="recognition-header">
-                                <span class="recognition-star">&#9733;</span>
-                                <span class="recognition-employee">${escapeHtml(displayName)}</span>
+                            <div class="recognition-photo-container">
+                                ${photoHtml}
+                            </div>
+                            <div class="recognition-content">
+                                <div class="recognition-employee">${escapeHtml(displayName)}</div>
+                                <div class="recognition-achievement">${escapeHtml(event.notification)}</div>
                             </div>
-                            <div class="recognition-achievement">${escapeHtml(event.notification)}</div>
                         </div>
                     `;
                 });
