@schandlergarcia/sf-web-components 1.9.62 → 1.9.64

package/.a4drules/features/command-center-dashboard-rule.md

@@ -1,59 +1,33 @@
 ---
 paths:
-  - "**/pages/*.jsx"
   - "**/pages/*.tsx"
   - "**/components/workspace/CommandCenter.tsx"
 ---
 
-# Command Center Dashboard Rules (MANDATORY)
+# Command Center Dashboard Rules
 
-These rules are non-negotiable for all dashboard files in `src/pages/` and workspace files in `src/components/workspace/`.
+These rules apply to all dashboard files. For Engine-specific rules, see `engine-dashboard-rule.md`.
 
-**For the Engine Travel Command Center specifically:** Also read `.a4drules/features/engine-dashboard-rule.md` and `engine-command-center-prd.md` at the project root.
+## Core Constraints
 
-## Before writing ANY code, load these skills
+1. Dashboard files: `.tsx` in `src/pages/` — never `.jsx`, never `src/components/pages/`
+2. Import components from `@/components/library` only — no shadcn (`@/components/ui/`)
+3. Charts: `ChartCard` + `D3Chart` or `GeoMap` only — no Recharts, Chart.js, or custom SVG
+4. Icons: Heroicons (`@heroicons/react`) only — no Lucide, no inline SVGs
+5. Colors: Slate scale — no `text-white`, `text-black`, `bg-black`
+6. Data: All data via `useDataSource({ sample, live })`
+7. Layout: Single scrollable page — no multi-tab navigation, no `<nav>` inside dashboards
+8. Providers: Never recreate `AppThemeProvider`, `DataModeProvider`, or `Toast.Provider` — `CommandCenter.tsx` provides them
+9. DO NOT run `npm run dev`, `npm run validate:dashboard`, or `npm run build` during builds
+10. DO NOT `npm install` any packages — everything needed is already installed
 
-You MUST load the **command-center-builder** and **component-library** skills before writing or editing dashboard pages. These skills contain the full component API reference and builder rules. Do not proceed without them.
+## Wiring
 
-**For Engine dashboard:** Also load **command-center-project** and **outer-app** skills, and read `engine-command-center-prd.md`.
+After creating a dashboard, update all 3 files:
+1. `CommandCenter.tsx` — import and render your dashboard
+2. `Home.tsx` — render `CommandCenter`
+3. `routes.tsx` — set `Home` as index route
 
-**For Phase 2 (sample data):** Read `.a4drules/features/phase2-data-pattern.md`. The sample data file already exists at `src/data/engine-sample-data.js` — do NOT create it, just import from it.
+## Component API
 
-## Critical constraints
-
-1. **File extension MUST be `.tsx`** — This is a TypeScript project. All React components MUST use `.tsx` extension, never `.jsx`. Dashboard files go in `src/pages/` (NOT `src/components/pages/`). All type definitions are available from the component library.
-
-2. **Use ONLY library components** from `@/components/library` for cards, charts, tables, lists. Never hand-roll HTML cards (`<div className="bg-white border rounded...">`).
-
-3. **Charts: ONLY `ChartCard` + `D3Chart` or `GeoMap`** — Do NOT use Recharts, Chart.js, or any third-party chart library. Do NOT `npm install` any chart or map packages (react-simple-maps, recharts, chart.js, nivo, etc.). Everything you need is in the library.
-
-4. **Maps: use `GeoMap`** from `@/components/library` — Do NOT install react-simple-maps or any other map library.
-
-5. **No shadcn imports** (`@/components/ui/`) — use library equivalents. No Lucide icons — use Heroicons (`@heroicons/react`). No `cn()` utility.
-
-6. **No dashboard-level navigation** — no `<nav>`, no tab bars, no `useState` for switching between page sections. Build a single scrollable page. The app shell handles navigation.
-
-7. **WidgetCard does NOT accept children** — pass content via `sections` prop: `<WidgetCard sections={[{ id: "main", content: <div>...</div> }]} />`. Children are silently ignored.
-
-8. **ListCard avatar** — do NOT pass initials strings (treated as image URL). Omit `avatar` to auto-generate initials from `title`/`name`.
-
-9. **BaseCard applies `p-4` padding** — do NOT add extra `p-5`/`p-6` to WidgetCard `header` or section `content`.
-
-10. **No forbidden colors** — never use `text-white`, `text-black`, `bg-black`. Use slate scale: `text-slate-50`, `text-slate-900`, `bg-slate-900`.
-
-11. **`useDataSource`** is required — wire all data through `useDataSource({ sample, live })` for sample/live mode.
-
-12. **Run `npm run validate:dashboard`** before reporting done — fix ALL errors, zero tolerance. Never dismiss errors as "justified". The validator MUST show zero errors before the dashboard is considered complete.
-
-```bash
-cd force-app/main/default/webapplications/reactapp4
-npm run validate:dashboard
-```
-
-If errors are reported, you MUST fix them by switching to library components, correct colors, or proper imports. Do not proceed until the validator shows zero errors.
-
-13. **Do NOT `npm install` any packages** for dashboard work. The component library and existing dependencies have everything needed.
-
-14. **Heroicon names** — common correct names: `PaperAirplaneIcon` (not PlaneIcon), `BuildingOfficeIcon` (not HotelIcon), `BanknotesIcon` (not MoneyIcon), `ExclamationTriangleIcon` (not AlertIcon), `UserIcon` (not PersonIcon).
-
-15. **Wire the dashboard as the home page.** After creating your dashboard and updating `CommandCenter.tsx`, you MUST also update `src/pages/Home.tsx` to render `CommandCenter` (replace any search interface with `import CommandCenter from "@/components/workspace/CommandCenter"; export default function HomePage() { return <CommandCenter />; }`), and update `src/routes.tsx` to set `Home` as the index route and move `Search` to `/search`. The dashboard must be the first thing users see at `/`.
+For full component props and data shapes, read `.a4drules/skills/component-library/SKILL.md`.

package/.a4drules/features/engine-dashboard-rule.md

@@ -4,306 +4,54 @@ paths:
   - "**/pages/Engine*.tsx"
 ---
 
-# Engine Travel Command Center Dashboard Rules
+# Engine Dashboard — Auto-Loaded Rules
 
-These rules apply ONLY when building the Engine Travel Command Center dashboard from `engine-command-center-prd.md`.
+These rules load automatically when editing Engine dashboard files. For full build instructions, use the phase files in `.a4drules/phases/`.
 
 ## Source of Truth
 
-**The PRD is law:** `engine-command-center-prd.md` at the project root is the complete specification. Follow it exactly. If the PRD conflicts with your assumptions, the PRD wins.
+**The PRD is law.** `engine-command-center-prd.md` is the complete specification. If anything conflicts with the PRD, the PRD wins.
 
-## Phase Discipline (MANDATORY)
+## Non-Negotiable Constraints
 
-The Engine dashboard uses a **strict 4-phase build process.** You MUST complete each phase fully before starting the next:
+1. **File:** `.tsx` extension, located in `src/pages/`
+2. **Imports:** ONLY from `@/components/library` and `@heroicons/react` — no shadcn (`@/components/ui/`), no Lucide, no Recharts
+3. **Colors:** Slate scale only — `text-slate-50` not `text-white`, `bg-slate-900` not `bg-black`. Exception: `bg-black/40` with opacity is OK for glass overlays
+4. **Layout:** Full-page scroll (no `h-screen`), visualization-hero pattern with full-width map
+5. **Data:** All data via `useDataSource({ sample, live })` — sample data imported from `src/data/engine-sample-data.js`
+6. **Dark mode:** Every custom element needs `dark:` variants
+7. **DO NOT** run `npm run dev`, `npm run validate:dashboard`, or `npm run build` during builds
 
-1. **Phase 1: Layout** — Complete layout structure (header, map, glass KPI overlays, flight strip) + data panel placeholders ONLY
-2. **Phase 2: Components + Sample Data** — Replace data panel placeholders with real library components + sample data AND add map data
-   - **CRITICAL:** Sample data file already exists at `src/data/engine-sample-data.js`
-   - **DO NOT create a new data file** — just import from the existing one
-   - Import dashboard-ready derivatives (MAP_MARKERS, MAP_ARCS, MAP_OVERLAYS, TRAVELER_CARDS, ESCALATION_CARDS, MONTHLY_SPEND)
-   - DO NOT define sample data inline in the dashboard — causes file truncation
-   - **FOLLOW THE EXACT CODE EXAMPLES in PRD Section 7 (map) and Section 8c/8d (panels)** - copy the code blocks as shown
-   - **Map data:** Add markers, arcs, overlays to GeoMap to show where travelers are (see PRD Section 7)
-   - **Panel titles:** "Disruptions", "Active Travelers", "Escalations", "Travel Spend"
-   - **Escalations panel:** ActivityCard must be wrapped in BaseCard for visible card styling
-   - **Chart:** Line chart showing monthly spend trend (see PRD Section 8d code block for exact options)
-   - **DO NOT run validation or dev server** — phase is complete after wiring files
-3. **Phase 3: Real Data** — Connect to Salesforce, keep UI identical to Phase 2
-4. **Phase 4: Agent** — Add Eva ChatBar integration
+## Phase Build Order
 
-### Phase 1 Scope
+| Phase | File | What it covers |
+|-------|------|----------------|
+| 1 | `.a4drules/phases/phase-1-layout.md` | Header, hero map, glass overlays, flight strip, placeholder panels |
+| 2 | `.a4drules/phases/phase-2-components.md` | Library components, sample data, map data, charts |
+| 3 | `.a4drules/phases/phase-3-live-data.md` | GraphQL hooks, live Salesforce data |
+| 4 | `.a4drules/phases/phase-4-agent.md` | Eva ChatBar, Salesforce signals |
 
-**What to build in Phase 1:**
-- ✅ Header bar with logo, title, and theme toggle (use slate scale colors, NO text-white)
-- ✅ Hero map (GeoMap component with NO markers/arcs/overlays PROPS passed)
-- ✅ Glass KPI overlays (4 hardcoded values, positioned absolutely over map)
-- ✅ Flight status strip (4 hardcoded flights, positioned at map bottom)
-- ✅ Data panel placeholders (BaseCard with centered text) - **ONLY these are placeholders**
+Complete each phase fully before starting the next. Read the relevant phase file for detailed instructions and code templates.
 
-**Data panel placeholders** use `BaseCard` with centered placeholder text. NO titles on placeholders:
+## Wiring Checklist
 
-```tsx
-<BaseCard>
-  <div className="h-48 flex items-center justify-center text-slate-400">
-    Disruptions Panel
-  </div>
-</BaseCard>
-```
+After creating or updating `EngineDashboard.tsx`:
 
-**Hero map** renders the actual GeoMap component (empty, no data):
+1. `CommandCenter.tsx` imports `EngineDashboard` (not `BlankDashboard`)
+2. `Home.tsx` renders `CommandCenter`
+3. `routes.tsx` has `Home` as index route, `Search` at `/search`
 
-```tsx
-import { GeoMap } from "@/components/library";
-import { useThemeMode } from "@/components/library/theme/AppThemeProvider";
+## Component Quick Reference
 
-export default function EngineDashboard() {
-  const { mode } = useThemeMode();
-  
-  return (
-    <div className="relative h-[520px]">
-      <GeoMap
-        width={960}
-        height={520}
-        theme={mode === "dark" ? "dark" : "light"}
-        className="h-full w-full"
-      />
-    </div>
-  );
-}
-```
+| Need | Use |
+|------|-----|
+| KPI number | `MetricCard` |
+| Data table | `TableCard` |
+| Item list | `ListCard` |
+| Activity feed | `ActivityCard` (wrap in `BaseCard` for card styling) |
+| Chart | `ChartCard` + `D3Chart` with `D3ChartTemplates` |
+| Map | `GeoMap` (direct, not wrapped in ChartCard) |
+| Status items | `StatusCard` |
+| Multi-section | `WidgetCard` |
 
-All data panel placeholders: BaseCard, no title, centered text, `h-48`, `text-slate-400`.
-
-Hero map in Phase 1: actual GeoMap component with NO `markers`/`arcs`/`overlays` props passed (these are GeoMap data props for Phase 2+). The base world map (land, sphere, graticule) will render even with no data. Glass KPI overlays and flight status strip ARE built in Phase 1 as separate `<div>` elements positioned absolutely over the map - these provide visual confirmation the map area is rendering. GeoMap is NOT wrapped in BaseCard.
-
-**Verify the map renders:** After building, check that you can see the world map base layer (blue land on dark theme, gray land on light theme). If the map area appears blank, check:
-- Container has fixed height (`className="relative h-[520px]"`)
-- GeoMap has `className="h-full w-full"`
-- No console errors from GeoMap component
-
-**DO NOT:**
-- Mix phases (don't add sample data in Phase 1, don't add Eva in Phase 2, etc.)
-- Run `npm run dev` or `npm run validate:dashboard` (wastes turns, not required)
-- Use BaseCard titles in Phase 1 placeholders (causes text to run together)
-- Use `h-screen` or viewport-locked layout (full-page scroll required)
-
-### Phase 3: Real Data Integration
-
-**CRITICAL:** You MUST explicitly use the Salesforce GraphQL skills by name. Declarative listing doesn't work - use imperative commands.
-
-**Goal:** Connect dashboard to live Salesforce data. No toggle needed - dashboard shows live data only.
-
-**Key insight:** The sample data file (`src/data/engine-sample-data.js`) already uses real Salesforce field names (Trip__c, Flight__c, Contact, etc.). Read the file header comment to understand the object schema.
-
-**Custom objects used:**
-- Contact (travelers, with custom fields: Home_Airport__c, Travel_Policy_Tier__c, etc.)
-- Trip__c (origin, destination, dates, cost, policy status)
-- Flight__c (flight number, airports, status, delay, traveler lookup)
-- Booking__c (upcoming reservations)
-- Disruption__c (delays, cancellations, severity)
-- Rebooking_Action__c (Eva activity log)
-- Travel_Policy__c (policy rules and status)
-
-**Implementation steps (FOLLOW EXACTLY):**
-
-1. **Read sample data file** (`src/data/engine-sample-data.js`) to understand which Salesforce fields are needed (e.g., Trip__c has Origin_City__c, Contact has FirstName, etc.)
-
-2. **Use the Salesforce GraphQL skills** to implement queries and hooks:
-   
-   - Use `exploring-webapp-graphql-schema` skill to look up each object
-     - Say: "Use the exploring-webapp-graphql-schema skill to look up Trip__c"
-     - The skill reads from schema.graphql (already checked into the repo)
-   
-   - Use `generating-webapp-graphql-read-query` skill to create queries
-     - Say: "Use the generating-webapp-graphql-read-query skill to create a query for Trip__c"
-     - The skill generates properly typed GraphQL code with @optional directives
-   
-   - Use `using-webapp-graphql` skill to implement hooks
-     - Say: "Use the using-webapp-graphql skill to create a useTravelers hook"
-     - The skill creates hooks that return { data, loading, error }
-
-3. **Update useDataSource calls** to use live data:
-   - Change: `useDataSource({ sample: TRAVELER_CARDS })`
-   - To: `useDataSource({ sample: TRAVELER_CARDS, live: liveTravelers ?? [] })`
-
-4. **No data mode toggle** - dashboard always shows live data (or falls back to sample on error)
-
-**Key insight:** The schema.graphql file is pre-built and checked into the repo. GraphQL skills and tooling work out of the box without any schema generation.
-
-**Example pattern:**
-
-```tsx
-// Phase 2 (sample data only)
-const travelers = useDataSource({ sample: TRAVELER_CARDS, live: [] });
-
-// Phase 3 (live data with sample fallback on error)
-const { data: liveTravelers, loading, error } = useTravelers();
-const travelers = useDataSource({ 
-  sample: TRAVELER_CARDS,  // Used as fallback if live data fails
-  live: liveTravelers ?? []  // Primary data source
-});
-```
-
-The `useDataSource` hook automatically uses `live` data when available, falling back to `sample` only on error. No toggle UI needed.
-
-**DO NOT:**
-- Ask the user about object names - they're in the sample data file
-- Create object metadata - objects already exist in org  
-- Change field names in queries - use exact names from sample data
-- Modify UI components - only change data sources
-- Add DataModeToggle - Phase 3 uses live data only (sample data is fallback for errors)
-- Panic if schema introspection fails - queries still work fine (see troubleshooting guide below)
-- List skills declaratively - use imperative commands ("Use the X skill to...")
-
-**Troubleshooting:** If you encounter GraphQL schema introspection failures, see `.a4drules/troubleshooting/graphql-introspection-failure.md` for the complete workaround pattern.
-
-## Phase Completion (NO VALIDATION REQUIRED)
-
-After wiring the dashboard into CommandCenter, Home, and routes, the phase is complete.
-
-**🚫 CRITICAL: DO NOT run `npm run dev` or `npm run validate:dashboard`** 
-
-These commands are NOT required for phase completion. Do NOT execute them. The phase is complete after wiring the files.
-
-## File Requirements
-
-- **Extension:** `.tsx` (TypeScript) — NEVER `.jsx`
-- **Location:** `src/pages/EngineDashboard.tsx` (NOT `src/components/pages/`)
-- **Imports:** ONLY from `@/components/library` — never shadcn, never Lucide, never Recharts
-
-## Layout Pattern: Visualization-Hero with Full-Page Scroll
-
-The Engine dashboard uses the **visualization-hero** layout (see PRD section 5). This means:
-
-1. **Hero map:** Full-width, fixed height (`h-[520px]`), GeoMap with glass overlays and flight status strip
-2. **Data panels below:** Natural flow with `px-4 py-5` (NO overflow constraints)
-3. **Full-page scroll:** Entire dashboard scrolls naturally (NO `h-screen` on outer container)
-
-**DO NOT:**
-- Put the map in a 1/3 or 1/2 grid column (it's hero, not sidebar)
-- Use `h-screen` or viewport-locked layout (full-page scroll required)
-- Use `overflow-y-auto` or flex height constraints on data panels
-- Wrap GeoMap in ChartCard (render directly)
-- Skip the glass KPI overlays or flight status strip
-- Make the map too small (minimum 400px height)
-
-## Component Selection
-
-Every section of the dashboard MUST use a library component. No hand-rolled HTML cards:
-
-| Content | Use | NOT |
-|---------|-----|-----|
-| KPI number | `MetricCard` | `<div className="bg-white ...">` |
-| Data table | `TableCard` | `<table>` HTML |
-| Item list | `ListCard` | Custom `.map()` divs |
-| Activity log | `ActivityCard` | Custom feed markup |
-| Chart | `ChartCard` + `D3Chart` | Recharts/Chart.js/custom SVG |
-| Map | `GeoMap` (direct) | react-simple-maps |
-| Status items | `StatusCard` | Custom status badges |
-| Multi-section panel | `WidgetCard` | Nested divs |
-| Expandable content | `WidgetCard` (single section) | Hand-rolled collapse logic |
-
-## Engine Brand Colors
-
-Update `src/styles/global.css` with Engine teal palette (PRD section 3). Use `engine-*` and `brand-*` Tailwind classes, never hardcoded hex values.
-
-## Dark Mode (MANDATORY)
-
-Every visible element MUST work in both light and dark mode. Test both before reporting complete.
-
-- GeoMap: pass `theme={mode === "dark" ? "dark" : "light"}`
-- Glass overlays: `bg-black/40 backdrop-blur-md` (works in both modes)
-- Text: use slate scale, never `text-black` or `text-white`
-- All custom elements: add `dark:` variants
-
-## Eva Integration (Phase 4 Only)
-
-Eva is a `ChatBar` in the header. NOT a FAB. NOT a ChatPanel in the grid. NOT a sliding panel.
-
-```tsx
-<ChatBar
-  title="Eva"
-  placeholder="Ask Eva..."
-  suggestions={CHAT_SUGGESTIONS}
-  onSend={handleChat}
-/>
-```
-
-## Data Mode (Sample vs Live)
-
-Every component must work in both data modes:
-
-```typescript
-// ✅ Correct
-const SAMPLE_TRAVELERS = [...];  // module scope
-const travelers = useDataSource({ sample: SAMPLE_TRAVELERS, live: liveTravelers });
-
-// ❌ Wrong — no mode switching
-const travelers = [...];  // always uses same data
-```
-
-## Wiring Steps (REQUIRED)
-
-After creating `EngineDashboard.tsx`, you MUST:
-
-1. Update `src/components/workspace/CommandCenter.tsx`:
-   ```tsx
-   import EngineDashboard from "../../pages/EngineDashboard";
-   // ... render <EngineDashboard />
-   ```
-
-2. Update `src/pages/Home.tsx`:
-   ```tsx
-   import CommandCenter from "@/components/workspace/CommandCenter";
-   export default function HomePage() { return <CommandCenter />; }
-   ```
-
-3. Update `src/routes.tsx`:
-   ```tsx
-   { index: true, element: <Home />, handle: { showInNavigation: true, label: 'Dashboard' } }
-   ```
-
-Verify all three files are updated before reporting complete.
-
-## Pre-Completion Checklist
-
-Before reporting ANY phase complete, verify ALL of these:
-
-- [ ] Validator shows zero errors (`npm run validate:dashboard`)
-- [ ] File is `.tsx` not `.jsx`
-- [ ] All cards are library components (MetricCard, ListCard, etc.)
-- [ ] No hand-rolled HTML cards (`<div className="bg-white border ...">`)
-- [ ] No shadcn imports (`@/components/ui/`)
-- [ ] No Lucide icons (use Heroicons)
-- [ ] No chart libraries (use D3Chart/GeoMap)
-- [ ] GeoMap rendered directly, not wrapped in ChartCard
-- [ ] Dark mode works on all elements
-- [ ] `useDataSource` used for all data
-- [ ] Sample data is module-scope constants
-- [ ] CommandCenter.tsx, Home.tsx, and routes.tsx are updated
-- [ ] Dev server starts without errors (`npm run dev`)
-
-## What Makes This Dashboard Unique
-
-The Engine dashboard's signature elements (must be present):
-
-1. **Hero map** — Full-width GeoMap with animated flight arcs, weather overlays, glass KPI pills, and flight status strip
-2. **Glass overlays** — Floating KPIs and flight chips with `bg-black/40 backdrop-blur-md`
-3. **Engine brand** — Teal color palette throughout
-4. **Eva integration** — ChatBar in header for AI queries
-5. **Disruptions panel** — Custom inline component showing severity dots and Eva actions
-
-These elements distinguish the Engine dashboard from generic dashboards. They must all be present and functional.
-
-## Anti-Patterns (NEVER DO THESE)
-
-- Creating BlankDashboard.tsx or GenericDashboard.tsx (name is EngineDashboard.tsx)
-- Multi-tab layout with content swapping (build one scrollable page)
-- `<nav>` or header bar inside the dashboard (AppLayout handles navigation)
-- Map in a sidebar grid (it's hero — full width)
-- **Using `h-screen` or viewport-locked layout** (full-page scroll required)
-- More than 4 KPIs in a row
-- Using `Math.random()` in sample data
-- **Running `npm run dev` or `npm run validate:dashboard`** (not required, wastes turns)
-- Reporting phase complete before wiring the dashboard into the app
-- Mixing phases (adding sample data in Phase 1, adding Eva in Phase 2, etc.)
+For full component API, read `.a4drules/skills/component-library/SKILL.md`.

package/.a4drules/features/phase2-data-pattern.md

@@ -1,166 +1,15 @@
----
-paths:
-  - "**/pages/*.tsx"
-  - "**/data/*.ts"
----
+# Phase 2: Sample Data Pattern
 
-# Phase 2: Sample Data Pattern (MANDATORY)
+For complete Phase 2 instructions, see `.a4drules/phases/phase-2-components.md`.
 
-When building Phase 2 (Components & Sample Data), you MUST use the pre-existing sample data file to avoid file truncation.
+## Key Rule
 
-**Important:** The sample data file uses real Salesforce field names (Trip__c, Flight__c, Contact, etc.) so Phase 3 can connect to live data without field name changes.
+The sample data file already exists at `src/data/engine-sample-data.js`. **DO NOT create a new data file.** Import from the existing one.
 
-## The Problem
+## Available exports
 
-**❌ WRONG:** Defining all sample data inline in the dashboard file causes:
-- Dashboard file becomes 500+ lines
-- File gets truncated during writing
-- Unclosed JSX tags and syntax errors
-- Agent has to retry multiple times
+**Base records:** `TRAVELERS`, `TRIPS`, `FLIGHTS`, `HOTELS`, `DISRUPTIONS`, `BOOKINGS`, `REBOOKING_ACTIONS`, `TRAVEL_POLICIES`, `ACCOUNT`, `MONTHLY_SPEND`
 
-## The Solution
+**Dashboard-ready derivatives:** `MAP_MARKERS`, `MAP_ARCS`, `MAP_OVERLAYS`, `FLIGHT_STATUS_LIST`, `TRAVELER_CARDS`, `DISRUPTION_CARDS`, `ESCALATION_CARDS`, `EVA_ACTIONS`, `BOOKING_ROWS`, `POLICY_ITEMS`, `DESTINATION_CHART_DATA`, `SPEND_CHART_DATA`, `METRICS`
 
-**✅ CORRECT:** The sample data file already exists at `src/data/engine-sample-data.js` — just import and use it.
-
-### Data File Already Exists
-
-The file `src/data/engine-sample-data.js` contains all sample data as exported constants:
-
-```javascript
-// src/data/engine-sample-data.js
-// THIS FILE ALREADY EXISTS - DO NOT CREATE IT
-
-// Sample data exports (already defined):
-export const TRAVELERS = [...];            // 8 travelers with Contact fields
-export const TRIPS = [...];                // 8 trips with Trip__c fields
-export const FLIGHTS = [...];              // 8 flights with Flight__c fields
-export const HOTELS = [...];               // 8 hotels with Reservation fields
-export const DISRUPTIONS = [...];          // 4 disruptions
-export const BOOKINGS = [...];             // 8 upcoming bookings
-export const REBOOKING_ACTIONS = [...];    // 8 Eva actions
-export const TRAVEL_POLICIES = [...];      // 5 policy items
-export const MONTHLY_SPEND = [...];        // 6 months of spend
-export const ACCOUNT = {...};              // Account stats
-
-// Dashboard-ready derivatives (already computed):
-export const MAP_MARKERS = [...];          // For GeoMap markers prop
-export const MAP_ARCS = [...];             // For GeoMap arcs prop
-export const MAP_OVERLAYS = [...];         // For GeoMap overlays prop
-export const FLIGHT_STATUS_LIST = [...];   // For flight status strip
-export const TRAVELER_CARDS = [...];       // For traveler ListCard
-export const DISRUPTION_CARDS = [...];     // For disruptions panel
-export const EVA_ACTIONS = [...];          // For ActivityCard
-export const BOOKING_ROWS = [...];         // For TableCard
-export const POLICY_ITEMS = [...];         // For StatusCard
-export const DESTINATION_CHART_DATA = [...]; // For destination chart
-export const SPEND_CHART_DATA = [...];     // For spend chart
-export const METRICS = {...};              // Computed KPIs
-```
-
-This file is ~370 lines and contains all sample data you need.
-
-### Import Into Dashboard
-
-In `src/pages/EngineDashboard.tsx`, import the pre-existing data:
-
-```typescript
-// src/pages/EngineDashboard.tsx
-import React from "react";
-import { BaseCard, ListCard, ActivityCard, ChartCard, TableCard, StatusCard, D3Chart, GeoMap } from "@/components/library";
-import {
-  MAP_MARKERS,
-  MAP_ARCS,
-  MAP_OVERLAYS,
-  FLIGHT_STATUS_LIST,
-  TRAVELER_CARDS,
-  DISRUPTION_CARDS,
-  EVA_ACTIONS,
-  BOOKING_ROWS,
-  POLICY_ITEMS,
-  DESTINATION_CHART_DATA,
-  SPEND_CHART_DATA,
-  METRICS
-} from "@/data/engine-sample-data";
-
-export default function EngineDashboard() {
-  return (
-    <div className="flex h-screen flex-col bg-slate-50 dark:bg-slate-950">
-      {/* Header - use METRICS for KPIs */}
-      
-      {/* Hero Map - use MAP_MARKERS, MAP_ARCS, MAP_OVERLAYS */}
-      <GeoMap markers={MAP_MARKERS} arcs={MAP_ARCS} overlays={MAP_OVERLAYS} />
-      
-      {/* Data Panels */}
-      <div className="px-4 py-5 space-y-6">
-        {/* Disruptions - use DISRUPTION_CARDS */}
-        {/* Active Travelers - use TRAVELER_CARDS */}
-        {/* Eva Activity - use EVA_ACTIONS */}
-        <ActivityCard title="Eva Activity" actions={EVA_ACTIONS} />
-        
-        {/* Charts - use DESTINATION_CHART_DATA, SPEND_CHART_DATA */}
-        {/* Bookings - use BOOKING_ROWS */}
-        <TableCard items={BOOKING_ROWS} />
-        
-        {/* Policy - use POLICY_ITEMS */}
-        <StatusCard items={POLICY_ITEMS} />
-      </div>
-    </div>
-  );
-}
-```
-
-Dashboard file stays ~150-200 lines because data is imported.
-
-## Phase 2 Workflow
-
-**DO NOT create the data file** — it already exists. Just:
-
-1. Read `src/data/engine-sample-data.js` to understand available exports
-2. Import the dashboard-ready derivatives into `src/pages/EngineDashboard.tsx`
-3. Replace BaseCard placeholders with library components using imported data
-
-## Benefits
-
-- ✅ Dashboard file stays small (no truncation)
-- ✅ Data file already prepared and tested
-- ✅ Clean separation of concerns
-- ✅ Easy to switch to live data in Phase 3 (just change imports)
-- ✅ Faster Phase 2 completion (no data creation needed)
-
-## Common Mistakes
-
-❌ **Creating a new data file:**
-```bash
-# WRONG - file already exists
-Write src/data/engine-sample-data.ts
-```
-
-❌ **Defining data inline in dashboard:**
-```typescript
-export default function EngineDashboard() {
-  const travelers = [
-    { id: "1", name: "Maya Rodriguez", ... }, // 500 more lines
-  ];
-  // File gets truncated here!
-```
-
-✅ **Importing from existing file:**
-```typescript
-import { TRAVELER_CARDS, EVA_ACTIONS } from "@/data/engine-sample-data";
-
-export default function EngineDashboard() {
-  // Use imported data
-  <ListCard items={TRAVELER_CARDS} />
-  <ActivityCard actions={EVA_ACTIONS} />
-}
-```
-
-## Complete Phase 2 Workflow
-
-1. **Read** `src/data/engine-sample-data.js` (understand exports)
-2. **Import** dashboard-ready derivatives into `src/pages/EngineDashboard.tsx`
-3. **Replace** BaseCard placeholders with library components using imported data
-4. **Run** validator (`npm run validate:dashboard`)
-5. **Test** in browser
-
-This pattern prevents truncation and keeps code clean.
+All derivatives are computed from the base records — not hardcoded separately.