@schandlergarcia/sf-web-components 1.9.63 → 1.9.64

package/.a4drules/skills/command-center-guide/SKILL.md

@@ -1,270 +1,36 @@
 ---
 name: command-center-guide
-description: Master guide for building command center dashboards. Routes to the appropriate specialized skills based on task type. Use this when starting any command center work to understand which skills to apply and in what order.
+description: Master guide for building command center dashboards. Routes to the appropriate phase file or reference skill.
 ---
 
 # Command Center Development Guide
 
-This is the master routing guide for building command center dashboards. It helps you understand which skills to use, when to use them, and how they work together.
+## Quick Start
 
-## Available Skills
+For the Engine Travel Command Center, use the phase files in `.a4drules/phases/`:
 
-### Project-Local Skills (in .a4drules/)
+| Phase | File | What to build |
+|-------|------|---------------|
+| 1 | `phase-1-layout.md` | Header, hero map, glass overlays, placeholder panels |
+| 2 | `phase-2-components.md` | Library components + sample data |
+| 3 | `phase-3-live-data.md` | GraphQL hooks + live Salesforce data |
+| 4 | `phase-4-agent.md` | Eva ChatBar + Salesforce signals |
 
-The command center codebase has **4 specialized skills** that work together:
+Each file is self-contained with a code template and exact imports. Complete phases in order.
 
-| Skill Name | Purpose | Line Count | When to Use |
-|------------|---------|------------|-------------|
-| **[component-library](#component-library)** | Complete component API reference | 55 + 8 sub-files | Looking up component props, data shapes, or choosing which component to use |
-| **[command-center-builder](#command-center-builder)** | Dashboard build rules and workflows | 46 + 6 sub-files | Building/editing dashboards, layouts, styling, validation |
-| **[command-center-project](#command-center-project)** | Project structure and routing | 100 lines | Understanding project organization, adding new pages to routes |
-| **[outer-app](#outer-app)** | App shell and global navigation | 61 lines | Modifying header, sidebar, global nav, or app wrapper |
+## Reference Skills (read on demand)
 
-Plus **1 feature rule**:
-- **command-center-dashboard-rule.md** (50 lines) — Automated validation rules for dashboards
+| Skill | When to use |
+|-------|-------------|
+| `component-library/SKILL.md` | Looking up component props or choosing which component to use |
+| `command-center-project/SKILL.md` | Understanding project structure, routing, tech stack |
+| `outer-app/SKILL.md` | Working on the app shell, navigation, or non-dashboard pages |
 
-### Global Skills (from VS Code)
+## Decision Tree
 
-These global Salesforce skills are automatically available and should be referenced when needed:
-
-| Skill Name | Purpose | When to Use |
-|------------|---------|-------------|
-| **accessing-webapp-data** | Data SDK patterns, GraphQL vs REST | Any data fetching from Salesforce |
-| **using-webapp-graphql** | GraphQL query workflow, codegen | Writing GraphQL queries for records |
-| **exploring-webapp-graphql-schema** | Schema exploration, field lookup | Finding available fields on objects |
-| **generating-webapp-graphql-read-query** | Query generation | Creating read queries |
-| **generating-webapp-graphql-mutation-query** | Mutation generation | Creating/updating records |
-| **managing-webapp-agentforce-conversation-client** | Agentforce chat integration | Adding Agentforce agent/chatbot |
-| **building-webapp-react-components** | React patterns, hooks | Building custom React components |
-| **building-webapp-data-visualization** | Charts, graphs, visualizations | Creating data visualizations |
-
-## Decision Tree: Which Skill to Use?
-
-Follow this decision tree to find the right skill:
-
-### 1. Are you building or editing a dashboard page?
-
-**YES** → Use **[command-center-builder](#command-center-builder)**
-
-Start with [getting-started.md](../command-center-builder/getting-started.md) to understand critical requirements, then follow the workflow:
-- Page structure & layout → [page-layout.md](../command-center-builder/page-layout.md)
-- Choosing components → [components-styling.md](../command-center-builder/components-styling.md)
-- Building charts → [charts-visualization.md](../command-center-builder/charts-visualization.md)
-- Validation → [completion-checklist.md](../command-center-builder/completion-checklist.md)
-
-**NO** → Continue to question 2
-
-### 2. Do you need to look up a component's props or data shape?
-
-**YES** → Use **[component-library](#component-library)**
-
-Start with [when-to-use.md](../component-library/when-to-use.md) decision matrix, then go to the relevant detail file:
-- Cards (MetricCard, ChartCard, TableCard, etc.) → [card-components.md](../component-library/card-components.md)
-- Charts & visualizations → [charts.md](../component-library/charts.md)
-- Forms & filters → [forms-filters.md](../component-library/forms-filters.md)
-- Chat & data → [chat-data.md](../component-library/chat-data.md)
-- Advanced components → [hero-ui.md](../component-library/hero-ui.md)
-- Troubleshooting props → [common-mistakes.md](../component-library/common-mistakes.md)
-
-**NO** → Continue to question 3
-
-### 3. Are you adding a new page or modifying routes?
-
-**YES** → Use **[command-center-project](#command-center-project)**
-
-This skill explains:
-- Project structure (`src/pages/`, `src/dashboards/`, etc.)
-- How to register new pages in the router
-- Route configuration
-- Where different file types live
-
-**NO** → Continue to question 4
-
-### 4. Are you connecting to live Salesforce data?
-
-**YES** → Use global skills: **accessing-webapp-data**, **exploring-webapp-graphql-schema**, **using-webapp-graphql**
-
-Workflow:
-1. Explore schema for custom objects
-2. Write GraphQL queries with actual field names
-3. Run codegen for TypeScript types
-4. Create hook with useDataSource for sample/live mode switching
-
-**NO** → Continue to question 5
-
-### 5. Are you adding an Agentforce agent or chatbot?
-
-**YES** → Use global skill: **managing-webapp-agentforce-conversation-client**
-
-Or for simpler chat UI: Use **[component-library](../component-library/chat-data.md)** (ChatBar component)
-
-**NO** → Continue to question 6
-
-### 6. Are you modifying the app shell (header, sidebar, global nav)?
-
-**YES** → Use **[outer-app](#outer-app)**
-
-This skill covers:
-- App wrapper layout
-- Global header component
-- Sidebar navigation
-- Theme/dark mode toggle
-- App-level configuration
-
-**NO** → If none of the above, ask for clarification or check **command-center-builder** as the default.
-
-## Common Workflows
-
-### Workflow 1: Build a New Dashboard from Scratch
-
-1. **[command-center-builder](../command-center-builder/getting-started.md)** — Read STOP and CRITICAL rules first
-2. **[command-center-project](../command-center-project/SKILL.md)** — Understand where to create the page file
-3. **[command-center-builder/page-layout.md](../command-center-builder/page-layout.md)** — Wire up the page and choose layout
-4. **[component-library/when-to-use.md](../component-library/when-to-use.md)** — Choose components from decision matrix
-5. **[component-library](../component-library/SKILL.md)** — Look up exact props for each component
-6. **[command-center-builder/charts-visualization.md](../command-center-builder/charts-visualization.md)** — If using charts, follow MANDATORY rules
-7. **[command-center-builder/completion-checklist.md](../command-center-builder/completion-checklist.md)** — Validate before reporting done
-
-### Workflow 1b: Connect Dashboard to Live Salesforce Data
-
-1. **accessing-webapp-data** (global) — Understand Data SDK requirements
-2. **exploring-webapp-graphql-schema** (global) — Explore schema for custom objects (Trip__c, Flight__c, etc.)
-3. **using-webapp-graphql** (global) — Write GraphQL queries, run codegen for types
-4. **[component-library/chat-data.md](../component-library/chat-data.md)** — Use DataModeProvider and useDataSource hook
-5. Create custom hook that transforms live data to match sample data shape
-6. Add DataModeToggle to switch between sample/live modes
-
-### Workflow 2: Add a Chart to an Existing Dashboard
-
-1. **[command-center-builder/charts-visualization.md](../command-center-builder/charts-visualization.md)** — Read chart requirements
-2. **[component-library/charts.md](../component-library/charts.md)** — Look up D3Chart props and templates
-3. **[component-library/card-components.md](../component-library/card-components.md)** — Look up ChartCard wrapper props
-4. **[command-center-builder/completion-checklist.md](../command-center-builder/completion-checklist.md)** — Validate chart implementation
-
-### Workflow 3: Troubleshoot a Component Error
-
-1. **[component-library/common-mistakes.md](../component-library/common-mistakes.md)** — Check "Do Not" list for common errors
-2. **[component-library](../component-library/SKILL.md)** — Look up the component in the relevant detail file
-3. Verify you're using exact prop names (not guessing)
-4. Check that you imported from `@/components/library` correctly
-
-### Workflow 4: Style or Theme a Dashboard
-
-1. **[command-center-builder/components-styling.md](../command-center-builder/components-styling.md)** — Brand colors, semantic colors, dark mode
-2. **[component-library/ui-primitives.md](../component-library/ui-primitives.md)** — UI primitives for styling consistency
-3. **[command-center-builder/getting-started.md](../command-center-builder/getting-started.md)** — Image requirements
-
-### Workflow 5: Add Global Navigation or Modify App Shell
-
-1. **[outer-app](../outer-app/SKILL.md)** — App shell structure and header/sidebar
-2. **[command-center-project](../command-center-project/SKILL.md)** — Router configuration if adding nav links
-
-### Workflow 6: Add Agentforce Agent/Chatbot
-
-1. **managing-webapp-agentforce-conversation-client** (global) — Complete integration guide
-2. **[component-library/chat-data.md](../component-library/chat-data.md)** — For ChatBar component (simpler alternative)
-3. Ask user for agent ID if not already configured
-4. Configure inline vs floating mode, styling, dimensions
-
-## Skill Interaction Rules
-
-### component-library vs command-center-builder
-
-- **component-library** = WHAT (exact props, data shapes, API reference)
-- **command-center-builder** = WHEN & HOW (which component to use, layout patterns, validation rules)
-
-**Use both together:** command-center-builder tells you which component to use, component-library tells you how to use it.
-
-### command-center-project vs outer-app
-
-- **command-center-project** = Dashboard pages and routing
-- **outer-app** = App wrapper and global navigation
-
-**Boundary:** If it's inside `src/dashboards/` → command-center-project. If it's in `App.tsx` or global layout → outer-app.
-
-### When to Read Multiple Skills
-
-Some tasks require multiple skills in sequence:
-
-- **Building a new dashboard** → command-center-builder + component-library + command-center-project
-- **Adding a chart** → command-center-builder + component-library
-- **Modifying navigation** → outer-app + command-center-project
-- **Troubleshooting** → component-library (common-mistakes) first, then command-center-builder
-
-## Critical Reminders
-
-1. **ALWAYS start with command-center-builder/getting-started.md** before building any dashboard
-2. **NEVER guess component prop names** — look them up in component-library
-3. **NEVER hand-roll HTML cards** — use library components only
-4. **ALWAYS run the completion checklist** before reporting done
-5. **Dark mode is MANDATORY** — check all color choices support it
-6. **Images are MANDATORY** — every dashboard needs visuals
-
-## Feature Rule
-
-The **command-center-dashboard-rule.md** feature provides automated validation. It checks:
-- Component usage (library components vs hand-rolled HTML)
-- Dark mode compliance
-- Image presence
-- Chart implementation
-- Navigation structure
-
-This rule runs automatically during validation. See [completion-checklist.md](../command-center-builder/completion-checklist.md) for details.
-
-## File Organization Summary
-
-All skills are split into sub-files (<300 lines each) for easier navigation:
-
-```
-.a4drules/
-├── features/
-│   └── command-center-dashboard-rule.md (50 lines)
-└── skills/
-    ├── command-center-guide/          ← YOU ARE HERE
-    │   └── SKILL.md (this file)
-    ├── component-library/
-    │   ├── SKILL.md (55 lines - routing file)
-    │   ├── when-to-use.md (39 lines)
-    │   ├── card-components.md (253 lines)
-    │   ├── charts.md (64 lines)
-    │   ├── ui-primitives.md (92 lines)
-    │   ├── forms-filters.md (130 lines)
-    │   ├── chat-data.md (184 lines)
-    │   ├── hero-ui.md (211 lines)
-    │   └── common-mistakes.md (25 lines)
-    ├── command-center-builder/
-    │   ├── SKILL.md (46 lines - routing file)
-    │   ├── getting-started.md (127 lines)
-    │   ├── page-layout.md (143 lines)
-    │   ├── components-styling.md (97 lines)
-    │   ├── data-forms-ai.md (43 lines)
-    │   ├── charts-visualization.md (136 lines)
-    │   └── completion-checklist.md (87 lines)
-    ├── command-center-project/
-    │   └── SKILL.md (100 lines)
-    └── outer-app/
-        └── SKILL.md (61 lines)
-```
-
-## Quick Reference Card
-
-| I need to... | Start here |
-|-------------|------------|
-| Build a new dashboard | [command-center-builder/getting-started.md](../command-center-builder/getting-started.md) |
-| Look up a component's props | [component-library/when-to-use.md](../component-library/when-to-use.md) → relevant detail file |
-| Add a new page to routes | [command-center-project](../command-center-project/SKILL.md) |
-| Modify header or sidebar | [outer-app](../outer-app/SKILL.md) |
-| Build a chart | [command-center-builder/charts-visualization.md](../command-center-builder/charts-visualization.md) |
-| Fix a component error | [component-library/common-mistakes.md](../component-library/common-mistakes.md) |
-| Validate before reporting done | [command-center-builder/completion-checklist.md](../command-center-builder/completion-checklist.md) |
-| Understand project structure | [command-center-project](../command-center-project/SKILL.md) |
-
-## Getting Help
-
-If you're unsure which skill to use:
-1. Start with this guide's decision tree
-2. Check the Quick Reference Card above
-3. When in doubt, start with **command-center-builder** for dashboard work
-4. Use **component-library** for any component prop lookups
-
-Remember: **Skills are split for easier navigation, not sequential reading.** Use the decision tree to jump directly to what you need.
+1. **Building the Engine dashboard?** → Read the phase file for your current phase
+2. **Need component API details?** → Read `component-library/SKILL.md` → relevant sub-file
+3. **Adding routes or pages?** → Read `command-center-project/SKILL.md`
+4. **Working on app shell/nav?** → Read `outer-app/SKILL.md`
+5. **Connecting to live data?** → Phase 3 file + global skills: `exploring-webapp-graphql-schema`, `using-webapp-graphql`
+6. **Adding Agentforce agent?** → Phase 4 file + global skill: `managing-webapp-agentforce-conversation-client`

package/.a4drules/skills/command-center-project/SKILL.md

@@ -79,7 +79,7 @@ Configured in both `vite.config.ts` and `tsconfig.json`:
 
 ## Key Conventions
 
-- **Dashboard pages** go in `src/components/pages/`. Wire into `CommandCenter.tsx` by importing and rendering.
+- **Dashboard pages** go in `src/pages/` (NOT `src/components/pages/`). Wire into `CommandCenter.tsx` by importing and rendering.
 - **Outer app pages** go in `src/pages/` or `src/features/*/pages/`. Wire into `src/routes.tsx`.
 - **TypeScript** preferred for all code (`.tsx`/`.ts`). Core UI components converted to TypeScript. Legacy `.jsx` files being migrated.
 - **Component library** is a vendored copy from command-center-starter — not an npm package. Changes sync manually.

package/CHANGELOG.md

@@ -5,6 +5,43 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.9.64] - 2026-04-01
+
+### Added
+- **New phase-based build system** - Self-contained step-by-step build instructions
+  - `.a4drules/phases/phase-1-layout.md` - Layout setup with code template
+  - `.a4drules/phases/phase-2-components.md` - Component implementation with exact imports
+  - `.a4drules/phases/phase-3-live-data.md` - GraphQL integration
+  - `.a4drules/phases/phase-4-agent.md` - Eva ChatBar implementation
+  - These phase files replace the scattered instructions in multiple skill/feature files
+
+### Fixed
+- **6 data bugs in engine-sample-data.js**:
+  1. Added ESCALATION_CARDS alias export (was missing)
+  2. Fixed MAP_OVERLAYS city→IATA lookup (was failing silently)
+  3. Changed 2 bookings to "Pending approval" status (were showing as confirmed)
+  4. Fixed EVA_ACTIONS to produce "pending" status correctly
+  5. Fixed rebooking a05R1 contact mismatch (Sarah Chen → Priya Patel)
+  6. Updated TXL → BER throughout (Berlin airport code change)
+
+### Updated
+- **PRD (engine-command-center-prd.md)**:
+  - Fixed "Sarah Chen" → "Priya Patel" in section 8c escalation example
+  - Rewrote section 13 build prompts to reference new phase files
+- **Simplified .a4drules documentation** - Removed redundancy and contradictions:
+  - `features/engine-dashboard-rule.md` - Reduced from 310 to ~65 lines (non-negotiable constraints + phase routing)
+  - `features/command-center-dashboard-rule.md` - Reduced from ~100 to ~30 lines (10 core constraints)
+  - `features/pre-code-checklist.md` - Reduced from 216 to ~25 lines (removed auto-load)
+  - `features/phase2-data-pattern.md` - Reduced from 167 to ~20 lines (redirects to phase file)
+  - `skills/command-center-builder/SKILL.md` - Fixed map layout contradiction, removed validator
+  - `skills/command-center-builder/page-layout.md` - Fixed map layout contradiction
+  - `skills/command-center-builder/completion-checklist.md` - Replaced validator "MUST run" with "DO NOT run"
+  - `skills/command-center-builder/improved-build-process.md` - Reduced from 341 to ~30 lines (redirects to phases)
+  - `skills/command-center-project/SKILL.md` - Fixed file path contradiction (src/components/pages/ → src/pages/)
+  - `skills/command-center-guide/SKILL.md` - Reduced from 270 to ~45 lines (simplified routing guide)
+
+**Context:** The phase-based system provides self-contained, copy-paste ready build instructions that eliminate the confusion caused by scattered, contradictory guidance across multiple files. All documentation now points to the phase files as the source of truth.
+
 ## [1.9.63] - 2026-04-01
 
 ### Updated

package/data/engine-command-center-prd.md

@@ -301,7 +301,7 @@ Each escalation has:
 Examples from sample data:
 - "Processing approval for Omar Hassan" - subtitle: "Paris trip over budget · escalated to manager" (status: pending)
 - "Monitoring weather delay for Elena Rodriguez" - subtitle: "AF 99 · CDG arrival delayed 45 min · No action yet" (status: working)
-- "Rebooked cancelled flight for Sarah Chen" - subtitle: "LH 431 → LH 433 · Same fare class" (status: complete)
+- "Rebooked cancelled flight for Priya Patel" - subtitle: "LH 431 → LH 433 · Same fare class" (status: complete)
 
 ### 8d. Monthly Spend Trend (1/2 width)
 
@@ -431,41 +431,39 @@ Mandatory on every element. The dashboard must work in both light and dark mode
 
 ## 13. Build Prompts
 
-**Build Methodology:** 4-phase incremental process (Layout → Components → Data → Agent). Run prompts in sequence. All detailed instructions are in the skills and PRD — the phase prompts should be simple triggers.
+**Build Methodology:** 4-phase incremental process (Layout → Components → Data → Agent). Each phase has a self-contained instruction file in `.a4drules/phases/` with code templates and exact imports.
 
 ---
 
 ### Phase 1: Layout & Structure
 
-> **Skills:** command-center-builder, command-center-project, component-library, outer-app
+> Read `.a4drules/phases/phase-1-layout.md` and follow the code template.
 >
-> Scaffold the Engine Travel Command Center skeleton. Build the structure from section 5 (visualization-hero layout) with placeholder cards. No real data or components yet, just the layout structure.
+> Scaffold the Engine Travel Command Center skeleton with header, hero map, glass KPI overlays, flight status strip, and 4 placeholder data panels.
 
 ---
 
 ### Phase 2: Components & Sample Data
 
-> **Skills:** command-center-builder, command-center-project, component-library
+> Read `.a4drules/phases/phase-2-components.md` and follow the instructions.
 >
-> Replace placeholders with library components. Import data from the pre-existing `src/data/engine-sample-data.js` file. Build the 4 data panels from section 8: Disruptions, Active Travelers, Escalations, and Monthly Spend Trend chart. Follow the EXACT code examples in section 8 - copy the code blocks exactly as shown.
->
-> **Add map data:** Import MAP_MARKERS, MAP_ARCS, MAP_OVERLAYS from sample data and pass to GeoMap component (see Section 7). The map should show where travelers are with markers for cities, arcs for flight routes, and overlays for disruptions.
+> Replace placeholders with library components. Import data from `src/data/engine-sample-data.js`. Add map data (markers, arcs, overlays). Build the 4 data panels: Disruptions, Active Travelers, Escalations, Monthly Spend Trend.
 
 ---
 
 ### Phase 3: Real Data Integration
 
-> Use the Salesforce GraphQL skills to connect the dashboard to live data. Read `src/data/engine-sample-data.js` to see which fields are needed, then use the skills to implement queries and hooks for Contact, Trip__c, Flight__c, Booking__c, Disruption__c, and Rebooking_Action__c. Update EngineDashboard.tsx to use live data with `useDataSource({ sample: X, live: liveData })`. Add loading and error states. UI stays identical - live data only, no toggle needed.
-
-**Data Strategy Note:** The app uses a sample data cache (`ENABLE_SAMPLE_DATA_CACHE = true` in `src/lib/dataStrategy.ts`) for optimal performance. This is production-appropriate — do not disable it or mention it as a limitation. Build all GraphQL queries and hooks as normal; the cache provides instant loading and offline capability.
+> Read `.a4drules/phases/phase-3-live-data.md` and follow the instructions.
+>
+> Connect to live Salesforce data via GraphQL. UI stays identical to Phase 2.
 
 ---
 
 ### Phase 4: Agentforce Integration
 
-> **Skills:** command-center-builder, command-center-project, component-library
+> Read `.a4drules/phases/phase-4-agent.md` and follow the instructions.
 >
-> Add Eva ChatBar to header. Add Salesforce signals throughout. Configure tool calls for filtering/highlighting. Fallback mode if Eva not configured.
+> Add Eva ChatBar to header. Add Salesforce signals throughout.
 
 ---
 

package/data/engine-sample-data.js

@@ -24,7 +24,7 @@ export const AIRPORTS = [
   { IATA_Code__c: "ATL", City__c: "Atlanta",        Latitude__c: 33.7490,  Longitude__c: -84.3880 },
   { IATA_Code__c: "LHR", City__c: "London",         Latitude__c: 51.5074,  Longitude__c: -0.1278 },
   { IATA_Code__c: "NRT", City__c: "Tokyo",          Latitude__c: 35.6895,  Longitude__c: 139.6917 },
-  { IATA_Code__c: "TXL", City__c: "Berlin",         Latitude__c: 52.5200,  Longitude__c: 13.4050 },
+  { IATA_Code__c: "BER", City__c: "Berlin",         Latitude__c: 52.5200,  Longitude__c: 13.4050 },
   { IATA_Code__c: "SIN", City__c: "Singapore",      Latitude__c: 1.3521,   Longitude__c: 103.8198 },
   { IATA_Code__c: "CDG", City__c: "Paris",          Latitude__c: 48.8566,  Longitude__c: 2.3522 },
   { IATA_Code__c: "DXB", City__c: "Dubai",          Latitude__c: 25.2048,  Longitude__c: 55.2708 },
@@ -51,7 +51,7 @@ export const TRAVELERS = [
 export const TRIPS = [
   { Id: "a00T1", Trip_Name__c: "Chen – London",     Contact__c: "003T1", Origin_City__c: "San Francisco", Origin_Airport__c: "SFO", Destination_City__c: "London",    Destination_Airport__c: "LHR", Start_Date__c: "2026-03-24", End_Date__c: "2026-03-28", Status__c: "In Progress", Total_Cost__c: 4200,  In_Policy__c: true,  Has_Disruption__c: false },
   { Id: "a00T2", Trip_Name__c: "Johnson – Tokyo",   Contact__c: "003T2", Origin_City__c: "New York",      Origin_Airport__c: "JFK", Destination_City__c: "Tokyo",     Destination_Airport__c: "NRT", Start_Date__c: "2026-03-24", End_Date__c: "2026-03-30", Status__c: "In Progress", Total_Cost__c: 5800,  In_Policy__c: true,  Has_Disruption__c: false },
-  { Id: "a00T3", Trip_Name__c: "Patel – Berlin",    Contact__c: "003T3", Origin_City__c: "Chicago",       Origin_Airport__c: "ORD", Destination_City__c: "Berlin",    Destination_Airport__c: "TXL", Start_Date__c: "2026-03-24", End_Date__c: "2026-03-27", Status__c: "In Progress", Total_Cost__c: 3400,  In_Policy__c: false, Has_Disruption__c: true },
+  { Id: "a00T3", Trip_Name__c: "Patel – Berlin",    Contact__c: "003T3", Origin_City__c: "Chicago",       Origin_Airport__c: "ORD", Destination_City__c: "Berlin",    Destination_Airport__c: "BER", Start_Date__c: "2026-03-24", End_Date__c: "2026-03-27", Status__c: "In Progress", Total_Cost__c: 3400,  In_Policy__c: false, Has_Disruption__c: true },
   { Id: "a00T4", Trip_Name__c: "Kim – Singapore",   Contact__c: "003T4", Origin_City__c: "Los Angeles",   Origin_Airport__c: "LAX", Destination_City__c: "Singapore", Destination_Airport__c: "SIN", Start_Date__c: "2026-03-25", End_Date__c: "2026-04-01", Status__c: "In Progress", Total_Cost__c: 6100,  In_Policy__c: true,  Has_Disruption__c: false },
   { Id: "a00T5", Trip_Name__c: "Rodriguez – Paris", Contact__c: "003T5", Origin_City__c: "Miami",         Origin_Airport__c: "MIA", Destination_City__c: "Paris",     Destination_Airport__c: "CDG", Start_Date__c: "2026-03-24", End_Date__c: "2026-03-26", Status__c: "In Progress", Total_Cost__c: 2900,  In_Policy__c: true,  Has_Disruption__c: true },
   { Id: "a00T6", Trip_Name__c: "Wright – Austin",   Contact__c: "003T6", Origin_City__c: "Seattle",       Origin_Airport__c: "SEA", Destination_City__c: "Austin",    Destination_Airport__c: "AUS", Start_Date__c: "2026-03-24", End_Date__c: "2026-03-25", Status__c: "In Progress", Total_Cost__c: 820,   In_Policy__c: true,  Has_Disruption__c: false },
@@ -63,7 +63,7 @@ export const TRIPS = [
 export const FLIGHTS = [
   { Id: "a01F1", Flight_Number__c: "BA 286",  Airline__c: "British Airways",   Departure_Airport__c: "SFO", Departure_City__c: "San Francisco", Departure_Longitude__c: -122.4194, Departure_Latitude__c: 37.7749,  Arrival_Airport__c: "LHR", Arrival_City__c: "London",    Arrival_Longitude__c: -0.1278,   Arrival_Latitude__c: 51.5074,  Departure_DateTime__c: "2026-03-25T22:45:00Z", Flight_Status__c: "In Air",    Delay_Minutes__c: 0,  Cabin_Class__c: "Business",        Contact__c: "003T1" },
   { Id: "a01F2", Flight_Number__c: "NH 109",  Airline__c: "All Nippon Airways", Departure_Airport__c: "JFK", Departure_City__c: "New York",      Departure_Longitude__c: -74.0060,  Departure_Latitude__c: 40.7128,  Arrival_Airport__c: "NRT", Arrival_City__c: "Tokyo",     Arrival_Longitude__c: 139.6917,  Arrival_Latitude__c: 35.6895,  Departure_DateTime__c: "2026-03-25T11:30:00Z", Flight_Status__c: "In Air",    Delay_Minutes__c: 0,  Cabin_Class__c: "Economy",         Contact__c: "003T2" },
-  { Id: "a01F3", Flight_Number__c: "LH 431",  Airline__c: "Lufthansa",         Departure_Airport__c: "ORD", Departure_City__c: "Chicago",       Departure_Longitude__c: -87.6298,  Departure_Latitude__c: 41.8781,  Arrival_Airport__c: "TXL", Arrival_City__c: "Berlin",    Arrival_Longitude__c: 13.4050,   Arrival_Latitude__c: 52.5200,  Departure_DateTime__c: "2026-03-25T17:15:00Z", Flight_Status__c: "Delayed",   Delay_Minutes__c: 95, Cabin_Class__c: "Economy",         Contact__c: "003T3" },
+  { Id: "a01F3", Flight_Number__c: "LH 431",  Airline__c: "Lufthansa",         Departure_Airport__c: "ORD", Departure_City__c: "Chicago",       Departure_Longitude__c: -87.6298,  Departure_Latitude__c: 41.8781,  Arrival_Airport__c: "BER", Arrival_City__c: "Berlin",    Arrival_Longitude__c: 13.4050,   Arrival_Latitude__c: 52.5200,  Departure_DateTime__c: "2026-03-25T17:15:00Z", Flight_Status__c: "Delayed",   Delay_Minutes__c: 95, Cabin_Class__c: "Economy",         Contact__c: "003T3" },
   { Id: "a01F4", Flight_Number__c: "SQ 37",   Airline__c: "Singapore Airlines", Departure_Airport__c: "LAX", Departure_City__c: "Los Angeles",   Departure_Longitude__c: -118.2437, Departure_Latitude__c: 34.0522,  Arrival_Airport__c: "SIN", Arrival_City__c: "Singapore", Arrival_Longitude__c: 103.8198,  Arrival_Latitude__c: 1.3521,   Departure_DateTime__c: "2026-03-25T23:00:00Z", Flight_Status__c: "Boarding",  Delay_Minutes__c: 0,  Cabin_Class__c: "Business",        Contact__c: "003T4" },
   { Id: "a01F5", Flight_Number__c: "AF 99",   Airline__c: "Air France",        Departure_Airport__c: "MIA", Departure_City__c: "Miami",         Departure_Longitude__c: -80.1918,  Departure_Latitude__c: 25.7617,  Arrival_Airport__c: "CDG", Arrival_City__c: "Paris",     Arrival_Longitude__c: 2.3522,    Arrival_Latitude__c: 48.8566,  Departure_DateTime__c: "2026-03-25T18:20:00Z", Flight_Status__c: "Delayed",   Delay_Minutes__c: 45, Cabin_Class__c: "Premium Economy",  Contact__c: "003T5" },
   { Id: "a01F6", Flight_Number__c: "AS 670",  Airline__c: "Alaska Airlines",   Departure_Airport__c: "SEA", Departure_City__c: "Seattle",       Departure_Longitude__c: -122.3321, Departure_Latitude__c: 47.6062,  Arrival_Airport__c: "AUS", Arrival_City__c: "Austin",    Arrival_Longitude__c: -97.7431,  Arrival_Latitude__c: 30.2672,  Departure_DateTime__c: "2026-03-25T08:05:00Z", Flight_Status__c: "Landed",    Delay_Minutes__c: 0,  Cabin_Class__c: "Economy",         Contact__c: "003T6" },
@@ -95,17 +95,17 @@ export const DISRUPTIONS = [
 export const BOOKINGS = [
   { Id: "a04B1", Contact__c: "003T9",  Booking_Type__c: "Flight",              Status__c: "Confirmed",         Cost__c: 824,  In_Policy__c: true,  _travelerName: "Lisa Park",       _destination: "Denver → Chicago",       _dates: "Mar 28–30" },
   { Id: "a04B2", Contact__c: "003T10", Booking_Type__c: "Flight",              Status__c: "Confirmed",         Cost__c: 412,  In_Policy__c: true,  _travelerName: "Ryan Foster",     _destination: "NYC → San Francisco",    _dates: "Mar 29" },
-  { Id: "a04B3", Contact__c: "003T11", Booking_Type__c: "Flight",              Status__c: "Confirmed",         Cost__c: 2340, In_Policy__c: false, _travelerName: "Mei Wong",        _destination: "Seattle → London",       _dates: "Apr 1–5" },
+  { Id: "a04B3", Contact__c: "003T11", Booking_Type__c: "Flight",              Status__c: "Pending approval",  Cost__c: 2340, In_Policy__c: false, _travelerName: "Mei Wong",        _destination: "Seattle → London",       _dates: "Apr 1–5" },
   { Id: "a04B4", Contact__c: "003T12", Booking_Type__c: "Hotel",               Status__c: "Confirmed",         Cost__c: 380,  In_Policy__c: true,  _travelerName: "Carlos Vega",     _destination: "Austin",                 _dates: "Apr 2–4" },
   { Id: "a04B5", Contact__c: "003T13", Booking_Type__c: "Flight",              Status__c: "Confirmed",         Cost__c: 1890, In_Policy__c: true,  _travelerName: "Nina Kowalski",   _destination: "Boston → Berlin",        _dates: "Apr 3–7" },
   { Id: "a04B6", Contact__c: "003T14", Booking_Type__c: "Flight",              Status__c: "Confirmed",         Cost__c: 298,  In_Policy__c: true,  _travelerName: "Andre Williams",  _destination: "LA → Miami",             _dates: "Apr 5" },
   { Id: "a04B7", Contact__c: "003T15", Booking_Type__c: "Flight",              Status__c: "Confirmed",         Cost__c: 3150, In_Policy__c: false, _travelerName: "Hannah Lee",      _destination: "Chicago → Tokyo",        _dates: "Apr 7–12" },
-  { Id: "a04B8", Contact__c: "003T16", Booking_Type__c: "Flight",              Status__c: "Confirmed",         Cost__c: 2100, In_Policy__c: false, _travelerName: "Omar Hassan",     _destination: "Denver → Paris",         _dates: "Apr 8–11" },
+  { Id: "a04B8", Contact__c: "003T16", Booking_Type__c: "Flight",              Status__c: "Pending approval",  Cost__c: 2100, In_Policy__c: false, _travelerName: "Omar Hassan",     _destination: "Denver → Paris",         _dates: "Apr 8–11" },
 ];
 
 // ─── REBOOKING ACTIONS (Eva activity) ───────────────────────────────────────
 export const REBOOKING_ACTIONS = [
-  { Id: "a05R1", Action_Type__c: "Manual Rebook",   Status__c: "Completed",  Handled_By__c: "Eva (Agent)", Contact__c: "003T1", Original_Flight__c: "LH 431", New_Flight__c: "LH 433", Cost_Difference__c: 0,    Notes__c: "Rebooked cancelled flight for Sarah Chen — LH 431 → LH 433 · Same fare class",                     Created_DateTime__c: "2026-03-25T14:58:00Z" },
+  { Id: "a05R1", Action_Type__c: "Manual Rebook",   Status__c: "Completed",  Handled_By__c: "Eva (Agent)", Contact__c: "003T3", Original_Flight__c: "LH 431", New_Flight__c: "LH 433", Cost_Difference__c: 0,    Notes__c: "Rebooked cancelled flight for Priya Patel — LH 431 → LH 433 · Same fare class",                    Created_DateTime__c: "2026-03-25T14:58:00Z" },
   { Id: "a05R2", Action_Type__c: "Manual Rebook",   Status__c: "Completed",  Handled_By__c: "Eva (Agent)", Contact__c: "003T11", Original_Flight__c: null,     New_Flight__c: null,      Cost_Difference__c: -221, Notes__c: "Found policy-compliant hotel for Mei Wong — Hotel Adlon ($410/n) → Motel One ($189/n)",            Created_DateTime__c: "2026-03-25T14:52:00Z" },
   { Id: "a05R3", Action_Type__c: "Escalation",      Status__c: "In Progress", Handled_By__c: "Eva (Agent)", Contact__c: "003T16", Original_Flight__c: null,     New_Flight__c: null,      Cost_Difference__c: 0,    Notes__c: "Processing approval for Omar Hassan — Paris trip over budget — escalated to manager",              Created_DateTime__c: "2026-03-25T14:48:00Z" },
   { Id: "a05R4", Action_Type__c: "Auto-Cancel",     Status__c: "Completed",  Handled_By__c: "Eva (Agent)", Contact__c: "003T14", Original_Flight__c: null,     New_Flight__c: null,      Cost_Difference__c: 0,    Notes__c: "Auto-approved Andre Williams flight — LA → Miami · $298 · Within policy",                         Created_DateTime__c: "2026-03-25T14:35:00Z" },
@@ -192,10 +192,15 @@ export const MAP_ARCS = FLIGHTS.map((f) => ({
 }));
 
 // ─── MAP: overlays (weather / disruption zones) ─────────────────────────────
+const cityToAirportCode = Object.fromEntries(
+  AIRPORTS.map((a) => [a.City__c, a.IATA_Code__c])
+);
+
 export const MAP_OVERLAYS = DISRUPTIONS.filter(
   (d) => d.Disruption_Type__c === "Weather Event"
 ).map((d) => {
-  const airport = airportByCode[d.City__c] ?? airportByCode["CDG"];
+  const code = cityToAirportCode[d.City__c] ?? "CDG";
+  const airport = airportByCode[code];
   return {
     id: d.Id,
     center: [airport?.Longitude__c ?? 2.35, airport?.Latitude__c ?? 48.86],
@@ -303,11 +308,18 @@ export const EVA_ACTIONS = REBOOKING_ACTIONS.map((r) => {
     id: r.Id,
     title: parts[0] ?? r.Notes__c,
     subtitle: parts[1] ?? "",
-    status: r.Status__c === "Completed" ? "complete" : "working",
+    status:
+      r.Status__c === "Completed"
+        ? "complete"
+        : r.Action_Type__c === "Escalation"
+          ? "pending"
+          : "working",
     timestamp: relativeTime(r.Created_DateTime__c),
   };
 });
 
+export const ESCALATION_CARDS = EVA_ACTIONS;
+
 // ─── BOOKING TABLE ──────────────────────────────────────────────────────────
 export const BOOKING_ROWS = BOOKINGS.map((b) => ({
   id: b.Id,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.9.63",
+  "version": "1.9.64",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",