Add searchable dropdowns for Granite Loader columns

RESPONSIBLE_TEAM, EQUIP_STATUS, and EQUIPMENT_CLASS now show searchable
dropdown selectors in both the Bulk Defaults section and per-row inline
editing. Type to filter options, use arrow keys to navigate, Enter to select.

Picklist values extracted from docs/Team_Device Loader.xlsx reference sheets.
Per-row cells remain click-to-edit for all columns — picklist columns show
the SearchableSelect, free-text columns show a plain input.

frontend/src/components/LoaderModal.js

@@ -15,6 +15,8 @@ import {
   getColumnsByGroup,
 } from '../utils/graniteLoaderConfig';
 import { generateLoaderXlsx, generateFilename } from '../utils/graniteLoaderExport';
+import { COLUMN_PICKLISTS } from '../utils/graniteLoaderPicklists';
+import SearchableSelect from './SearchableSelect';
 
 const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
 
@@ -477,12 +479,22 @@ export default function LoaderModal({ isOpen, onClose, initialDevices }) {
                     <label style={{ fontSize: '0.6rem', color: '#64748B', display: 'block', marginBottom: '0.15rem' }}>
                       {col.id}
                     </label>
+                    {COLUMN_PICKLISTS[col.id] ? (
+                      <SearchableSelect
+                        value={bulkDefaults[col.id] || ''}
+                        options={COLUMN_PICKLISTS[col.id]}
+                        onChange={(val) => setBulkDefault(col.id, val)}
+                        placeholder={`Default for all rows`}
+                        autoFocus={false}
+                      />
+                    ) : (
                       <input
                         style={INPUT}
                         value={bulkDefaults[col.id] || ''}
                         onChange={e => setBulkDefault(col.id, e.target.value)}
                         placeholder={`Default for all rows`}
                       />
+                    )}
                   </div>
                 ))}
               </div>
@@ -527,6 +539,21 @@ export default function LoaderModal({ isOpen, onClose, initialDevices }) {
                             onClick={() => !isEditing && startEdit(rowIdx, col.id)}
                           >
                             {isEditing ? (
+                              COLUMN_PICKLISTS[col.id] ? (
+                                <SearchableSelect
+                                  value={editValue}
+                                  options={COLUMN_PICKLISTS[col.id]}
+                                  onChange={(val) => {
+                                    setOverrides(prev => ({
+                                      ...prev,
+                                      [rowIdx]: { ...(prev[rowIdx] || {}), [col.id]: val },
+                                    }));
+                                    setEditingCell(null);
+                                  }}
+                                  onClose={() => setEditingCell(null)}
+                                  autoFocus
+                                />
+                              ) : (
                                 <input
                                   style={{ ...INPUT, padding: '0.2rem 0.4rem', fontSize: '0.7rem' }}
                                   value={editValue}
@@ -535,6 +562,7 @@ export default function LoaderModal({ isOpen, onClose, initialDevices }) {
                                   onKeyDown={e => { if (e.key === 'Enter') commitEdit(); if (e.key === 'Escape') setEditingCell(null); }}
                                   autoFocus
                                 />
+                              )
                             ) : (
                               <div style={{ display: 'flex', alignItems: 'center', gap: '0.2rem' }}>
                                 {hasOverride && <span style={{ color: '#F59E0B', fontSize: '0.5rem' }}>●</span>}

frontend/src/components/SearchableSelect.js

@@ -0,0 +1,148 @@
+/**
+ * SearchableSelect — Inline searchable dropdown for the Granite Loader Sheet.
+ *
+ * Supports:
+ * - Static options (small lists like EQUIP_STATUS)
+ * - Large searchable lists (RESPONSIBLE_TEAM, SITE_NAME, EQUIP_TEMPLATE)
+ * - Keyboard navigation (arrow keys, enter, escape)
+ * - Typeahead filtering
+ * - Portal-free (renders inline to avoid z-index issues in table cells)
+ */
+
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+
+const DROPDOWN_STYLE = {
+  position: 'absolute',
+  top: '100%',
+  left: 0,
+  right: 0,
+  zIndex: 100,
+  background: '#0F172A',
+  border: '1px solid #7C3AED',
+  borderRadius: '0 0 0.375rem 0.375rem',
+  maxHeight: '180px',
+  overflowY: 'auto',
+  boxShadow: '0 8px 24px rgba(0, 0, 0, 0.5)',
+};
+
+const OPTION_STYLE = {
+  padding: '0.3rem 0.6rem',
+  fontSize: '0.7rem',
+  color: '#E2E8F0',
+  cursor: 'pointer',
+  fontFamily: "'JetBrains Mono', monospace",
+};
+
+const OPTION_HIGHLIGHT = {
+  ...OPTION_STYLE,
+  background: 'rgba(124, 58, 237, 0.2)',
+};
+
+export default function SearchableSelect({ value, options, onChange, onClose, placeholder, autoFocus }) {
+  const [filter, setFilter] = useState(value || '');
+  const [highlightIdx, setHighlightIdx] = useState(-1);
+  const [isOpen, setIsOpen] = useState(true);
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+
+  useEffect(() => {
+    if (autoFocus && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [autoFocus]);
+
+  const filtered = useCallback(() => {
+    if (!filter.trim()) return options.slice(0, 50);
+    const lower = filter.toLowerCase();
+    return options.filter(o => o.toLowerCase().includes(lower)).slice(0, 50);
+  }, [filter, options]);
+
+  const filteredOptions = filtered();
+
+  // Scroll highlighted item into view
+  useEffect(() => {
+    if (highlightIdx >= 0 && listRef.current) {
+      const el = listRef.current.children[highlightIdx];
+      if (el) el.scrollIntoView({ block: 'nearest' });
+    }
+  }, [highlightIdx]);
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setHighlightIdx(prev => Math.min(prev + 1, filteredOptions.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setHighlightIdx(prev => Math.max(prev - 1, 0));
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      if (highlightIdx >= 0 && filteredOptions[highlightIdx]) {
+        onChange(filteredOptions[highlightIdx]);
+      } else if (filter.trim()) {
+        onChange(filter.trim());
+      }
+      if (onClose) onClose();
+    } else if (e.key === 'Escape') {
+      if (onClose) onClose();
+    } else if (e.key === 'Tab') {
+      // Accept current value on tab
+      if (highlightIdx >= 0 && filteredOptions[highlightIdx]) {
+        onChange(filteredOptions[highlightIdx]);
+      } else if (filter.trim()) {
+        onChange(filter.trim());
+      }
+      if (onClose) onClose();
+    }
+  };
+
+  const handleSelect = (opt) => {
+    onChange(opt);
+    if (onClose) onClose();
+  };
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <input
+        ref={inputRef}
+        style={{
+          background: '#0F172A', border: '1px solid #7C3AED', borderRadius: isOpen ? '0.375rem 0.375rem 0 0' : '0.375rem',
+          color: '#E2E8F0', padding: '0.3rem 0.5rem', fontSize: '0.7rem', width: '100%',
+          fontFamily: "'JetBrains Mono', monospace", outline: 'none', boxSizing: 'border-box',
+        }}
+        value={filter}
+        onChange={e => { setFilter(e.target.value); setHighlightIdx(-1); setIsOpen(true); }}
+        onKeyDown={handleKeyDown}
+        onBlur={() => {
+          // Delay close so click on option can fire
+          setTimeout(() => {
+            if (filter.trim() && filter.trim() !== value) {
+              onChange(filter.trim());
+            }
+            if (onClose) onClose();
+          }, 150);
+        }}
+        placeholder={placeholder || 'Search...'}
+      />
+      {isOpen && filteredOptions.length > 0 && (
+        <div ref={listRef} style={DROPDOWN_STYLE}>
+          {filteredOptions.map((opt, i) => (
+            <div
+              key={opt}
+              style={i === highlightIdx ? OPTION_HIGHLIGHT : OPTION_STYLE}
+              onMouseEnter={() => setHighlightIdx(i)}
+              onMouseDown={(e) => { e.preventDefault(); handleSelect(opt); }}
+            >
+              {opt}
+            </div>
+          ))}
+          {filteredOptions.length === 50 && (
+            <div style={{ ...OPTION_STYLE, color: '#64748B', fontStyle: 'italic' }}>
+              Type to filter more...
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/utils/graniteLoaderPicklists.js

@@ -0,0 +1,65 @@
+/**
+ * Granite Loader Sheet picklist values.
+ * Extracted from docs/Team_Device Loader.xlsx reference sheets.
+ * These values are used for searchable dropdowns in the LoaderModal.
+ */
+
+export const RESPONSIBLE_TEAMS = [
+  'AE-LESS-ENDS', 'AE-TI-LESS-PIES', 'APVS-PCDS-DIGITAL-ACCESS', 'APVS-PCDS-DIGITAL-IDENTITY',
+  'APVS-UNKNOWN', 'ARCHIVED', 'AVWO-NON-CHARTER', 'AVWO-UNKNOWN', 'CARD-ABANDONED-UNKNOWN',
+  'CARD-UNKNOWN', 'CTEC-LAB-SQUAD', 'CTEC-UNKNOWN', 'FOE-FIELD OPS', 'FOE-FIELD OPS-ROC',
+  'ISP-NDC-CENTENNIAL', 'ISP-NDC-CHARLOTTE', 'ISP-NDC-COUDERSPORT', 'ISP-NDC-SIMPSONVILLE',
+  'ISP-UNKNOWN', 'IT', 'IT-DSSS-EDP', 'IT-SA-OPS', 'IT-SOC', 'MTG-CORE-ENG',
+  'MTG-WSTC-SYSTEM CERTIFICATION', 'NEO-UNKNOWN', 'NOC-METRICS-DATA WAREHOUSE', 'NON-CHARTER',
+  'NTS-AEO-ACCESS-ENG', 'NTS-AEO-ACCESS-OPS', 'NTS-AEO-INTELDEV', 'NTS-AEO-STEAM',
+  'NTS-AVOC-AIA-ANALYTICS-OPS', 'NTS-AVOC-AIA-TOOLS', 'NTS-AVOC-AIA-TOOLS-CHANGEAUTO',
+  'NTS-AVOC-AIA-TOOLS-PERFMANAG', 'NTS-AVOC-CVO', 'NTS-AVOC-OPSINTEL',
+  'NTS-AVOC-OPSINTEL-NSIGHTS', 'NTS-AVOC-RC-KM', 'NTS-AVOC-RC-TICKETING',
+  'NTS-AVOC-SCM-ISS', 'NTS-AVOC-SCM-SAPO', 'NTS-AVOC-VCO',
+  'NTS-CPE-IRCS-DASDNS', 'NTS-CPE-IRCS-DATAENG', 'NTS-CPE-IRCS-DCMS',
+  'NTS-CPE-IRCS-DEVICE-AUTOMATION', 'NTS-CPE-IRCS-DEVICE-OPERATIONS',
+  'NTS-CPE-IRCS-INTERNETRELIABILITY', 'NTS-CPE-IRCS-SCP-OPERATIONS',
+  'NTS-CPE-WIFIHWDEV-CPEHW-AUTOMATION', 'NTS-CVWO-VOICE-LAB', 'NTS-CVWO-VOICE-OPS',
+  'NTS-CVWO-WIRELESS-HMNO-WHO', 'NTS-CVWO-WIRELESS-RANEA', 'NTS-CVWO-WIRELESS-WNBO',
+  'NTS-CVWO-WIRELESS-WNO-MWF', 'NTS-CVWO-WIRELESS-WOP-WCO', 'NTS-ISP-NDC', 'NTS-ISP-OPS',
+  'NTS-NEO-BB-IP', 'NTS-NEO-BB-OPTICAL', 'NTS-NEO-CORE-IP', 'NTS-NEO-CORE-OPTICAL',
+  'NTS-NEO-IP-MGMT', 'NTS-NEO-OPSENG-LAB', 'NTS-NEO-OPSENG-TOOLS',
+  'PRDCT-VSO-VDE-ADV-DEV', 'PRDCT-VSO-VDE-ADV-FOCUS', 'PRDCT-VSO-VDE-ADV-IPOIS',
+  'PRDCT-VSO-VDE-ADV-PQI', 'PRDCT-VSO-VDE-ADV-SRTA', 'PRDCT-VSO-VDE-CI',
+  'PRDCT-VSO-VDE-ENT', 'PRDCT-VSO-VDE-IPVENG', 'PRDCT-VSO-VDE-VCDT',
+  'PRDCT-VSO-VDE-VOD-CMS', 'PRDCT-VSO-VDE-VOD-DEV', 'PRDCT-VSO-VDE-VOD-LAB',
+  'PRDCT-VSO-VSW-AIS', 'PRDCT-VSO-VSW-CRESCENDO', 'PRDCT-VSO-VSW-ENTITLEMENTS',
+  'PRDCT-VSO-VSW-GSD', 'PRDCT-VSO-VSW-IPVS', 'PRDCT-VSO-VSW-LANTERN',
+  'PRDCT-VSO-VSW-LINEUPS', 'PRDCT-VSO-VSW-METADATA', 'PRDCT-VSO-VSW-NNS',
+  'PRDCT-VSO-VSW-SETTINGS', 'PRDCT-VSO-VSW-SPECFLOW', 'PRDCT-VSO-VSW-SRE',
+  'PRDCT-VSO-VSW-TEAM', 'PRDCT-VSO-VSW-TVE', 'PRDCT-VSO-VSW-VOD', 'PRDCT-VSO-VSW-VSI',
+  'SB-EPS-ENTDATA', 'SDIT-CSD-ITLS-ACT', 'SDIT-CSD-ITLS-ENDS', 'SDIT-CSD-ITLS-LABOPS',
+  'SDIT-CSD-ITLS-LNE', 'SDIT-CSD-ITLS-LPE', 'SDIT-CSD-ITLS-NSIE', 'SDIT-CSD-ITLS-PACE',
+  'SDIT-CSD-ITLS-PIES', 'SDIT-CSD-ITLS-VLEO', 'SDIT-CSD-OBO-RDE', 'SDIT-DATA-ASSETS',
+  'SDIT-DATAASSETS-MONGODBA', 'SDIT-DATAASSETS-ORACLEDBA', 'SDIT-EDIS-CDP-DAAS-DATALOGISTICS',
+  'SDIT-EDIS-CDP-DAAS-NDS', 'SDIT-EDIS-CDS-DIGITALSERVICES', 'SDIT-EDIS-CIC-NEBULA',
+  'SDIT-EDIS-ITEI-CLOUD', 'SDIT-EDIS-ITEI-EMAIL', 'SDIT-EDIS-ITEI-TAAS-CIE',
+  'SDIT-EDIS-ITEI-TAAS-DM', 'SDIT-EDIS-NAAS-DESIGN', 'SDIT-EDIS-NAAS-FIREWALL',
+  'SDIT-EDIS-NAAS-IMPLEMENTATION', 'SDIT-EDIS-NAAS-INSTALL', 'SDIT-EDIS-NAAS-NAT',
+  'SDIT-EDIS-NAAS-OPERATIONS', 'SDIT-EDIS-PAAS-PRIVATE-CLOUD', 'SDIT-EDIS-PAAS-PUBCLD',
+  'SDIT-ITSA-OPS', 'SDIT-ITSA-OPS-IDOS', 'SDIT-ITSA-OPS-PQR-SCI', 'SDIT-ITSA-TOO',
+  'SDIT-MOBILE', 'SDIT-MOBILE-ACTIVATION', 'SDIT-PCDS-SA-ACTIVATIONS',
+  'SDIT-PCDS-SA-ANALYSTS', 'SDIT-PCDS-SA-PROVISIONING', 'SDIT-PCDS-SA-SCI',
+  'SDIT-SVCEXP-VCT-DESIGN', 'SN-OPS-NEWS', 'SPECTRUM ENTERPRISE', 'SPECTRUM REACH',
+  'SROPS-DATA', 'SROPS-SPECTRUM REACH OPS', 'TEST-NEW-TEAM', 'TEST-OLD-TEAM',
+  'VDE-MAPD-DEV', 'VDE-MAPD-DEV2', 'VDE-VOD-NVIS', 'VDE-VOD-REPORTING',
+  'WTG-WAE-ACCESS ENGINEERING', 'WTG-WCE-SYS ENG', 'WTG-WDE-DEVICE ENGINEERING',
+  'WTG-WRD-CONNECTIVITY', 'WTG-WRD-RESEARCH AND DEVELOPMENT',
+];
+
+export const EQUIP_STATUSES = ['ACTIVE', 'DESIGNED', 'PENDING DECOMMISSION', 'DECOMMISSIONED'];
+
+export const EQUIPMENT_CLASSES = ['S', 'C'];
+
+// Small list — columns that should render as searchable dropdowns
+// Maps column ID → options array
+export const COLUMN_PICKLISTS = {
+  RESPONSIBLE_TEAM: RESPONSIBLE_TEAMS,
+  EQUIP_STATUS: EQUIP_STATUSES,
+  EQUIPMENT_CLASS: EQUIPMENT_CLASSES,
+};