@schandlergarcia/sf-web-components 1.9.62 → 1.9.63

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

@@ -26,7 +26,7 @@ The Engine dashboard uses a **strict 4-phase build process.** You MUST complete
    - **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)
+   - **Chart:** Bar chart showing monthly spend trend (see PRD Section 8d code block for exact options and data transformation)
    - **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/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.63] - 2026-04-01
+
+### Updated
+- **Synced latest .a4drules and PRD from reactapp4** - Final sync of all documentation
+  - All `.a4drules/features/` updated
+  - All `.a4drules/skills/` updated
+  - All `.a4drules/troubleshooting/` updated
+  - Root `.a4drules/*.md` files updated
+  - `data/engine-command-center-prd.md` updated to latest
+
 ## [1.9.62] - 2026-04-01
 
 ### Added

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

@@ -305,30 +305,31 @@ Examples from sample data:
 
 ### 8d. Monthly Spend Trend (1/2 width)
 
-`ChartCard` wrapping a `D3Chart` with `D3ChartTemplates.lineChart`.
+`ChartCard` wrapping a `D3Chart` with `D3ChartTemplates.groupedBarChart` (lineChart doesn't support categorical x-axis).
 
 **CRITICAL: Use this exact code structure:**
 
 ```tsx
+// Transform data to chart format
+const spendChartData = useDataSource({ 
+  sample: MONTHLY_SPEND.map(m => ({ x: m.month, spend: m.amount })), 
+  live: [] 
+});
+
 <ChartCard
   title="Travel Spend"
   subtitle="Monthly trend (6 months)"
   chart={
     <D3Chart
-      data={useDataSource({ sample: MONTHLY_SPEND, live: [] })}
-      renderChart={D3ChartTemplates.lineChart}
+      data={spendChartData}
+      renderChart={D3ChartTemplates.groupedBarChart}
       options={{
-        xKey: "month",
-        yKey: "amount",
-        color: "#5BC8C8",
-        lineWidth: 3,
-        showDots: true,
-        dotRadius: 4,
-        showArea: true,
-        areaOpacity: 0.1,
+        xKey: "x",
+        groups: ["spend"],
+        colors: ["#5BC8C8"],
+        barRadius: 6,
         margin: { top: 20, right: 20, bottom: 40, left: 60 },
         showGrid: true,
-        formatY: (d) => `$${(d / 1000).toFixed(0)}K`,
       }}
       responsive
       height={320}
@@ -337,19 +338,18 @@ Examples from sample data:
 />
 ```
 
-**Data source:** Import `MONTHLY_SPEND` from sample data
+**Data source:** Import `MONTHLY_SPEND` from sample data, transform to chart format
 
 **Requirements:**
-- X-axis: month names (Oct through Mar)
-- Y-axis: spend amount formatted as $XXK
+- X-axis: month names (Oct through Mar) - categorical
+- Y-axis: spend amount in dollars (will show as thousands: 98000, 128000, etc.)
 - 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)
+- Bar color: Engine teal (#5BC8C8)
+- Bar radius: 6 for rounded corners
+- **Data transformation:** map `{ month, amount }` to `{ x, spend }` format inline
 - responsive={true}
 
-**Why this chart:** Shows spend trends over time so travel managers can spot anomalies, budget overruns, or seasonal patterns. Actionable data for financial planning.
+**Why this chart:** Shows spend trends over time so travel managers can spot anomalies, budget overruns, or seasonal patterns. Using bars instead of line because D3 lineChart requires numeric x-axis.
 
 **That's it!** Only 4 panels total: Disruptions, Active Travelers, Escalations, and Monthly Spend Trend.
 

package/package.json

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