@schandlergarcia/sf-web-components 1.9.60 → 1.9.61

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

@@ -17,14 +17,16 @@ These rules apply ONLY when building the Engine Travel Command Center dashboard
 The Engine dashboard uses a **strict 4-phase build process.** You MUST complete each phase fully before starting the next:
 
 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
+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, TRAVELER_CARDS, ESCALATION_CARDS, DESTINATION_CHART_DATA)
+   - 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 8c and 8d** - copy the code blocks as shown
-   - Panel titles: "Disruptions", "Active Travelers", "Escalations", "Travelers by Destination"
-   - Chart must use gradient color array, barRadius: 8, height: 320 (see PRD Section 8d code block)
+   - **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

package/.a4drules/features/pre-code-checklist.md

@@ -85,7 +85,7 @@ export default function EngineDashboard() {
             </div>
           </div>
 
-          {/* Row 2: Escalations (1/2) + Destination Chart (1/2) */}
+          {/* Row 2: Escalations (1/2) + Monthly Spend Chart (1/2) */}
           <div className="grid grid-cols-1 items-start gap-4 lg:grid-cols-2">
             <BaseCard>
               <div className="flex h-48 items-center justify-center text-slate-400">
@@ -94,7 +94,7 @@ export default function EngineDashboard() {
             </BaseCard>
             <BaseCard>
               <div className="flex h-48 items-center justify-center text-slate-400">
-                Travelers by Destination Panel
+                Travel Spend Panel
               </div>
             </BaseCard>
           </div>

package/CHANGELOG.md

@@ -5,6 +5,16 @@ 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.61] - 2026-04-01
+
+### Updated
+- **Synced latest .a4drules and PRD from reactapp4** - Pulled latest documentation updates
+  - All `.a4drules/features/` files updated
+  - All `.a4drules/skills/` files updated
+  - All `.a4drules/troubleshooting/` files updated
+  - Root `.a4drules/*.md` files updated
+  - `data/engine-command-center-prd.md` updated to latest version
+
 ## [1.9.60] - 2026-04-01
 
 ### Updated

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

@@ -99,8 +99,8 @@ This dashboard uses the **visualization-hero** layout. The live flight map is th
 │  └────────────────┘ └────────────────────────────┘         │  ↕
 │                                                             │  ↕
 │  ┌─── 1/2 ───────┐ ┌─── 1/2 ────────────────────┐         │  ↕
-│  │ Escalations    │ │ Travelers by Destination    │         │  ↕
-│  │ (ActivityCard) │ │ (ChartCard + D3Chart)       │         │  ↕
+│  │ Escalations    │ │ Travel Spend (Monthly)      │         │  ↕
+│  │ (ActivityCard) │ │ (ChartCard + D3Chart line)  │         │  ↕
 │  └────────────────┘ └────────────────────────────┘         │  ↕
 └─────────────────────────────────────────────────────────────┘
 ```
@@ -215,20 +215,26 @@ The `ChatBar` replaces any FAB or sliding panel. It opens inline as a command pa
 
 **Component:** `GeoMap` (from `@/components/library`)
 
-```jsx
+**Phase 1:** Render GeoMap with NO data props (no markers/arcs/overlays)
+**Phase 2:** Add markers, arcs, and overlays from sample data to show where travelers are
+
+```tsx
+import { MAP_MARKERS, MAP_ARCS, MAP_OVERLAYS } from "@/data/engine-sample-data";
+
+// Phase 2 - with map data
 <GeoMap
   width={960}
   height={520}
   theme={mode === "dark" ? "dark" : "light"}
-  markers={markers}
-  arcs={arcs}
-  overlays={overlays}
+  markers={useDataSource({ sample: MAP_MARKERS, live: [] })}
+  arcs={useDataSource({ sample: MAP_ARCS, live: [] })}
+  overlays={useDataSource({ sample: MAP_OVERLAYS, live: [] })}
   zoomable
   className="h-full w-full"
 />
 ```
 
-**Markers:** One per city (origin and destination). Each marker: `{ id, lon, lat, label, active: true }`.
+**Markers:** One per city (origin and destination). Each marker: `{ id, lon, lat, label, active: true }`. Shows where travelers are located.
 
 **Arcs:** One per active flight route. Each arc: `{ id, from: [lon, lat], to: [lon, lat], progress: 0–1 }`. Set `danger: true` on disrupted routes (delayed 60+ min or grounded). The `progress` value places an animated pulsing dot showing the flight's current position along the great circle arc.
 
@@ -273,17 +279,19 @@ Each traveler row:
 
 ### 8c. Escalations (1/2 width)
 
-`ActivityCard` showing escalations that require attention or can be sent to Eva for resolution.
-
-**Data source:** Import `ESCALATION_CARDS` from sample data (alias of `EVA_ACTIONS`)
+**CRITICAL: ActivityCard has no card styling by default. Must wrap in BaseCard for visible card background.**
 
 ```tsx
-<ActivityCard
-  title="Escalations"
-  actions={useDataSource({ sample: ESCALATION_CARDS, live: [] })}
-/>
+<BaseCard>
+  <ActivityCard
+    title="Escalations"
+    actions={useDataSource({ sample: ESCALATION_CARDS, live: [] })}
+  />
+</BaseCard>
 ```
 
+**Data source:** Import `ESCALATION_CARDS` from sample data (alias of `EVA_ACTIONS`)
+
 Each escalation has:
 - Title (issue description)
 - Subtitle (details + context)
@@ -295,28 +303,32 @@ Examples from sample data:
 - "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)
 
-### 8d. Travelers by Destination (1/2 width)
+### 8d. Monthly Spend Trend (1/2 width)
 
-`ChartCard` wrapping a `D3Chart` with `D3ChartTemplates.groupedBarChart`.
+`ChartCard` wrapping a `D3Chart` with `D3ChartTemplates.lineChart`.
 
 **CRITICAL: Use this exact code structure:**
 
 ```tsx
 <ChartCard
-  title="Travelers by Destination"
-  subtitle="Active trips by city"
+  title="Travel Spend"
+  subtitle="Monthly trend (6 months)"
   chart={
     <D3Chart
-      data={destinationData}
-      renderChart={D3ChartTemplates.groupedBarChart}
+      data={useDataSource({ sample: MONTHLY_SPEND, live: [] })}
+      renderChart={D3ChartTemplates.lineChart}
       options={{
-        xKey: "x",
-        groups: ["travelers"],
-        colors: ["#5BC8C8", "#34D3AB", "#0D9488", "#0F766E", "#16A34A", "#5BC8C8", "#34D3AB", "#0D9488"],
-        barRadius: 8,
-        barPadding: 0.3,
-        margin: { top: 20, right: 20, bottom: 40, left: 40 },
+        xKey: "month",
+        yKey: "amount",
+        color: "#5BC8C8",
+        lineWidth: 3,
+        showDots: true,
+        dotRadius: 4,
+        showArea: true,
+        areaOpacity: 0.1,
+        margin: { top: 20, right: 20, bottom: 40, left: 60 },
         showGrid: true,
+        formatY: (d) => `$${(d / 1000).toFixed(0)}K`,
       }}
       responsive
       height={320}
@@ -325,16 +337,21 @@ Examples from sample data:
 />
 ```
 
+**Data source:** Import `MONTHLY_SPEND` from sample data
+
 **Requirements:**
-- X-axis: destination city names (categorical — `scaleBand` via xKey: "x")
-- Y-axis: traveler count (from groups: ["travelers"])
-- Height: 320px (NOT 280px)
-- Colors: **Must use gradient array** (8 colors, teal/green gradient matching Engine brand)
-- barRadius: 8 (NOT 4)
-- barPadding: 0.3 (for better spacing)
+- X-axis: month names (Oct through Mar)
+- Y-axis: spend amount formatted as $XXK
+- Height: 320px
+- Line color: Engine teal (#5BC8C8)
+- Line width: 3px
+- Show dots at data points (radius: 4)
+- Show filled area under line (opacity: 0.1)
 - responsive={true}
 
-**That's it!** Only 4 panels total: Disruptions, Active Travelers, Escalations, and Travelers by Destination.
+**Why this chart:** Shows spend trends over time so travel managers can spot anomalies, budget overruns, or seasonal patterns. Actionable data for financial planning.
+
+**That's it!** Only 4 panels total: Disruptions, Active Travelers, Escalations, and Monthly Spend Trend.
 
 ---
 
@@ -406,9 +423,7 @@ Mandatory on every element. The dashboard must work in both light and dark mode
 
 **Escalation** — `id`, `title`, `subtitle`, `status` (complete | working | pending), `timestamp`
 
-**Monthly Spend** — `{ x: month, y: amount }` array
-
-**Destination Chart** — `{ x: city, travelers: count }` array
+**Monthly Spend** — `{ month: string, amount: number }` array. Six months of travel spend data (Oct through Mar). Amounts in dollars, typically $98K-$156K range.
 
 **Sample data:** 8–10 travelers, 8 flights, 4 disruptions, 8 bookings, 5 policy items, 8 escalations, 6 months of spend. All deterministic (no `Math.random()`). Include realistic names, routes, dollar amounts, and a mix of all status types.
 
@@ -432,7 +447,9 @@ Mandatory on every element. The dashboard must work in both light and dark mode
 
 > **Skills:** command-center-builder, command-center-project, component-library
 >
-> 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 Travelers by Destination chart. Follow the EXACT code examples in section 8 - copy the code blocks exactly as shown.
+> 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.
 
 ---
 

package/package.json

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