@schandlergarcia/sf-web-components 2.3.9 → 2.3.11

package/CHANGELOG.md

@@ -5,6 +5,19 @@ 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).
 
+## [2.3.11] - 2026-04-13
+
+### Added
+- **Eva agent ChatBar on Partner Hub** — Integrated the `ChatBar` component with the `useEvaAgent` hook above the booking stats grid. Connects to the Agentforce Agent REST API on mount, provides contextual suggestions ("Summarize my penalties", "Which property is growing fastest?", "Show overdue invoices"), and opens as a command-palette overlay (⌘K).
+
+## [2.3.10] - 2026-04-13
+
+### Changed
+- **Metric numbers now big in both themes** — `--dash-metric-size` is `3.25rem` in both neutral and Engine (no longer starts small). Subtitles bumped from `text-xs` to `text-sm` for readability.
+- **Badges stay fixed size** — removed per-theme badge sizing; instead Engine uses brighter semantic colors (`--dash-success: #34d399`, `--dash-info: #67e8f9`) so status chips pop more.
+- **Billing & Contract moved above Recent Activity** — section reorder puts revenue charts, invoices, and contract details higher in the page flow.
+- **Two charts side by side** — added "Total revenue growth" bar chart next to the existing "Revenue by property" multi-line chart. Bar chart computes monthly totals from live property data and uses the theme accent color, showing clear upward growth.
+
 ## [2.3.9] - 2026-04-13
 
 ### Changed

package/brands/engine/app/pages/PartnerHubDashboard.tsx

@@ -1,9 +1,10 @@
-import { ListCard, ActivityCard, D3Chart, Dropdown, Button, Modal, CardSkeleton } from "@/components/library";
+import { ListCard, ActivityCard, D3Chart, Dropdown, Button, Modal, CardSkeleton, ChatBar } from "@/components/library";
 import useDataSource from "@/components/library/data/useDataSource";
 import { useThemeMode } from "@/components/library/theme/AppThemeProvider";
 import { toast } from "sonner";
 import React from "react";
 import { usePartnerDashboardData } from "@/hooks/usePartnerDashboardData";
+import useEvaAgent from "@/hooks/useEvaAgent";
 import { ENABLE_SAMPLE_DATA_CACHE } from "@/lib/dataStrategy";
 import {
   PENALTY_TABLE_ITEMS,
@@ -32,6 +33,7 @@ import {
 } from "@heroicons/react/24/outline";
 import * as d3 from "d3";
 import engineLogo from "@/assets/images/engine_logo.png";
+import Data360Widget from "@/components/Data360Widget";
 
 /**
  * Partner Hub Dashboard
@@ -54,6 +56,9 @@ export default function PartnerHubDashboard() {
   const [isDisputesModalOpen, setIsDisputesModalOpen] = React.useState(false);
   const [isInvoicesModalOpen, setIsInvoicesModalOpen] = React.useState(false);
 
+  const eva = useEvaAgent();
+  React.useEffect(() => { eva.connect(); }, []);
+
   // Simulated logged-in partner (in real app, this comes from auth context)
   const currentPartner = {
     name: "Summit Hotels & Resorts",
@@ -662,6 +667,63 @@ export default function PartnerHubDashboard() {
       .style("fill", "currentColor");
   }, []);
 
+  const monthlyTotalRevenue = React.useMemo(() => {
+    if (!revenueTrendByProperty?.months || !revenueTrendByProperty?.properties) return null;
+    return revenueTrendByProperty.months.map((month: string, i: number) => ({
+      month,
+      total: revenueTrendByProperty.properties.reduce((sum: number, p: any) => sum + p.values[i], 0),
+    }));
+  }, [revenueTrendByProperty]);
+
+  const renderTotalRevenueGrowth = React.useCallback((svgEl: any, data: any, { width, height }: any) => {
+    if (!data || !data.length) return;
+    const margin = { top: 20, right: 20, bottom: 40, left: 70 };
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    if (innerWidth <= 0 || innerHeight <= 0) return;
+
+    const svg = d3.select(svgEl);
+    svg.selectAll("*").remove();
+    const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const x = d3.scaleBand().domain(data.map((d: any) => d.month)).range([0, innerWidth]).padding(0.35);
+    const maxVal = d3.max(data, (d: any) => d.total) || 0;
+    const y = d3.scaleLinear().domain([0, maxVal * 1.15]).range([innerHeight, 0]).nice();
+
+    g.append("g").attr("class", "grid")
+      .call(d3.axisLeft(y).ticks(5).tickSize(-innerWidth).tickFormat(() => ""))
+      .selectAll("line").style("stroke", "currentColor").style("stroke-opacity", "0.08");
+    g.select(".grid .domain").remove();
+
+    const accentColor = getComputedStyle(document.documentElement).getPropertyValue('--dash-accent').trim() || '#2563eb';
+
+    g.selectAll(".bar").data(data).join("rect")
+      .attr("x", (d: any) => x(d.month) ?? 0)
+      .attr("y", (d: any) => y(d.total))
+      .attr("width", x.bandwidth())
+      .attr("height", (d: any) => innerHeight - y(d.total))
+      .attr("rx", 4)
+      .attr("fill", accentColor)
+      .attr("fill-opacity", 0.85);
+
+    g.selectAll(".label").data(data).join("text")
+      .attr("x", (d: any) => (x(d.month) ?? 0) + x.bandwidth() / 2)
+      .attr("y", (d: any) => y(d.total) - 8)
+      .attr("text-anchor", "middle")
+      .style("font-size", "11px")
+      .style("font-weight", "600")
+      .style("fill", "currentColor")
+      .text((d: any) => `$${(d.total / 1000).toFixed(0)}K`);
+
+    g.append("g").attr("transform", `translate(0,${innerHeight})`)
+      .call(d3.axisBottom(x)).selectAll("text")
+      .style("font-size", "11px").style("fill", "currentColor").attr("dy", "1.2em");
+    g.select(".domain").style("stroke-opacity", "0.2");
+
+    g.append("g").call(d3.axisLeft(y).ticks(5).tickFormat(d3.format("$~s")))
+      .selectAll("text").style("font-size", "11px").style("fill", "currentColor");
+  }, []);
+
   return (
     <div className="heroui-scope min-h-screen bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-text)] transition-colors duration-300">
       {/* Header - Refined Engine Brand */}
@@ -777,6 +839,31 @@ export default function PartnerHubDashboard() {
 
       {/* Main Content */}
       <div className="max-w-[1600px] mx-auto px-8 -mt-12 space-y-10">
+        {/* Eva Agent ChatBar */}
+        <div className="relative z-10">
+          <ChatBar
+            title="Eva — Partner Assistant"
+            placeholder="Ask Eva anything about your properties, invoices, or penalties…"
+            suggestions={[
+              "Summarize my penalties",
+              "Which property is growing fastest?",
+              "Show overdue invoices",
+            ]}
+            onSend={async (text) => {
+              if (eva.isReady) {
+                await eva.sendMessage(text);
+              } else {
+                return "Eva is still connecting — please try again in a moment.";
+              }
+            }}
+            initialMessages={eva.messages.map((m) => ({
+              id: m.id,
+              role: m.role === "agent" ? "assistant" : "user",
+              content: m.text,
+            }))}
+          />
+        </div>
+
         {/* Quick Stats - Uniform metrics grid */}
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-5 animate-slide-up relative z-10">
           {/* Revenue */}
@@ -801,13 +888,13 @@ export default function PartnerHubDashboard() {
                     <div className="bg-[var(--color-dash-success)]/10 rounded-lg p-2">
                       <BanknotesIcon className="h-5 w-5 text-[var(--color-dash-success)]" />
                     </div>
-                    <span className="inline-flex items-center rounded-full font-bold bg-[var(--color-dash-success)]/10 text-[var(--color-dash-success)]" style={{ fontSize: 'var(--dash-pct-size)', padding: 'var(--dash-pct-py) var(--dash-pct-px)' }}>
+                    <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-bold bg-[var(--color-dash-success)]/10 text-[var(--color-dash-success)]">
                       +45%
                     </span>
                   </div>
-                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-xs font-semibold mb-2 uppercase tracking-wider">Total Revenue</p>
+                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-sm font-semibold mb-2 uppercase tracking-wider">Total Revenue</p>
                   <p className="font-black text-[var(--color-dash-text)] dark:text-white mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-size)' }}>${(myRevenue / 1000).toFixed(0)}K</p>
-                  <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">earned with Engine</p>
+                  <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">earned with Engine</p>
                 </>
               )}
             </div>
@@ -827,13 +914,13 @@ export default function PartnerHubDashboard() {
                     <div className="bg-[var(--color-dash-warning)]/10 rounded-lg p-2">
                       <ExclamationTriangleIcon className="h-5 w-5 text-[var(--color-dash-warning)]" />
                     </div>
-                    <span className="inline-flex items-center rounded-full font-bold bg-[var(--color-dash-warning)] text-white" style={{ fontSize: 'var(--dash-pct-size)', padding: 'var(--dash-pct-py) var(--dash-pct-px)' }}>
+                    <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-bold bg-[var(--color-dash-warning)] text-white">
                       REVIEW
                     </span>
                   </div>
-                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-xs font-semibold mb-2 uppercase tracking-wider">Things to Review</p>
+                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-sm font-semibold mb-2 uppercase tracking-wider">Things to Review</p>
                   <p className="font-black text-[var(--color-dash-text)] dark:text-white mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-size)' }}>{myOpenDisputes}</p>
-                  <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">items need attention</p>
+                  <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">items need attention</p>
                 </>
               )}
             </div>
@@ -854,9 +941,9 @@ export default function PartnerHubDashboard() {
                       <BuildingOfficeIcon className="h-5 w-5 text-[var(--color-dash-accent)]" />
                     </div>
                   </div>
-                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-xs font-semibold mb-2 uppercase tracking-wider">Properties</p>
+                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-sm font-semibold mb-2 uppercase tracking-wider">Properties</p>
                   <p className="font-black text-[var(--color-dash-text)] dark:text-white mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-size)' }}>{myProperties}</p>
-                  <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">active locations</p>
+                  <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">active locations</p>
                 </>
               )}
             </div>
@@ -877,9 +964,9 @@ export default function PartnerHubDashboard() {
                       <ClockIcon className="h-5 w-5 text-[var(--color-dash-info)]" />
                     </div>
                   </div>
-                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-xs font-semibold mb-2 uppercase tracking-wider">Reservations</p>
+                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-sm font-semibold mb-2 uppercase tracking-wider">Reservations</p>
                   <p className="font-black text-[var(--color-dash-text)] dark:text-white mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-size)' }}>{myReservations}</p>
-                  <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">through Engine</p>
+                  <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">through Engine</p>
                 </>
               )}
             </div>
@@ -900,15 +987,18 @@ export default function PartnerHubDashboard() {
                       <ShieldCheckIcon className="h-5 w-5 text-[var(--color-dash-danger)]" />
                     </div>
                   </div>
-                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-xs font-semibold mb-2 uppercase tracking-wider">Invoices</p>
+                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-sm font-semibold mb-2 uppercase tracking-wider">Invoices</p>
                   <p className="font-black text-[var(--color-dash-text)] dark:text-white mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-size)' }}>{myPendingInvoices}</p>
-                  <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">ready to pay</p>
+                  <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">ready to pay</p>
                 </>
               )}
             </div>
           </div>
         </div>
 
+        {/* Data 360 Widget */}
+        <Data360Widget />
+
         {/* Property Leaderboard - NEW SECTION */}
         {isLoading ? (
           <div className="bg-gradient-to-br from-white via-[var(--color-dash-surface)] to-white dark:from-[var(--color-dash-text)] dark:via-[var(--color-dash-dark)] dark:to-[var(--color-dash-text)] rounded-2xl p-8 shadow-xl border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
@@ -977,7 +1067,7 @@ export default function PartnerHubDashboard() {
                             <h3 className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white">
                               {property.name}
                             </h3>
-                            <span className="inline-flex items-center rounded-full font-bold bg-[var(--color-dash-success)]/20 text-[var(--color-dash-success)] border border-[var(--color-dash-success)]/30" style={{ fontSize: 'var(--dash-pct-size)', padding: 'var(--dash-pct-py) var(--dash-pct-px)' }}>
+                            <span className="inline-flex items-center rounded-full px-3 py-1 text-xs font-bold bg-[var(--color-dash-success)]/20 text-[var(--color-dash-success)] border border-[var(--color-dash-success)]/30">
                               +{property.growth}% growth
                             </span>
                           </div>
@@ -1044,7 +1134,7 @@ export default function PartnerHubDashboard() {
                       ATR-00001 · Summit Austin Convention Center · TechCorp Inc. booking
                     </p>
                   </div>
-                  <span className="inline-flex items-center rounded-full font-bold bg-[var(--color-dash-warning)] text-white flex-shrink-0" style={{ fontSize: 'var(--dash-pct-size)', padding: 'var(--dash-pct-py) var(--dash-pct-px)' }}>
+                  <span className="inline-flex items-center rounded-full px-3 py-1 text-xs font-bold bg-[var(--color-dash-warning)] text-white flex-shrink-0">
                     NEEDS REVIEW
                   </span>
                 </div>
@@ -1092,7 +1182,164 @@ export default function PartnerHubDashboard() {
           </div>
         )}
 
-        {/* Section - Conversational with Better Spacing */}
+        {/* Section — Billing & Contract Details */}
+        <div className="pt-8 space-y-2">
+          <h2 className="text-3xl font-bold text-[var(--color-dash-text)] dark:text-white tracking-tight">
+            Billing & contract details
+          </h2>
+          <p className="text-lg text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
+            Keep track of invoices and your partnership terms
+          </p>
+        </div>
+
+        {/* Two Charts Grid */}
+        {isLoading ? (
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <CardSkeleton lines={6} />
+            <CardSkeleton lines={6} />
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {/* Revenue Trend by Property (multi-line) */}
+            <div className="bg-white dark:bg-[var(--color-dash-text)] border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 rounded-xl shadow-sm hover:shadow-lg transition-shadow duration-300 overflow-hidden">
+              <div className="p-6 border-b border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
+                <h3 className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white mb-1">
+                  Revenue by property
+                </h3>
+                <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
+                  Monthly trend across {revenueTrendByProperty.properties?.length || 4} properties
+                </p>
+                <div className="flex flex-wrap gap-3 mt-3">
+                  {revenueTrendByProperty.properties.map((prop) => (
+                    <div key={prop.name} className="flex items-center gap-1.5">
+                      <span className="inline-block h-2 w-2 rounded-full flex-shrink-0" style={{ backgroundColor: prop.color }} />
+                      <span className="text-xs font-medium text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">{prop.name.replace('Summit ', '')}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className="p-4 w-full">
+                {revenueTrendByProperty?.months && revenueTrendByProperty?.properties ? (
+                  <div className="w-full" style={{ minHeight: '240px' }}>
+                    <D3Chart data={revenueTrendByProperty} renderChart={renderRevenueTrendByProperty} height={240} responsive={true} ariaLabel="Revenue trend by property" />
+                  </div>
+                ) : (
+                  <div className="h-[240px] flex items-center justify-center text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">Loading chart data...</div>
+                )}
+              </div>
+            </div>
+
+            {/* Total Monthly Revenue Growth (bar chart) */}
+            <div className="bg-white dark:bg-[var(--color-dash-text)] border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 rounded-xl shadow-sm hover:shadow-lg transition-shadow duration-300 overflow-hidden">
+              <div className="p-6 border-b border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
+                <h3 className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white mb-1">
+                  Total revenue growth
+                </h3>
+                <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
+                  Combined monthly revenue — up 67% over 6 months
+                </p>
+              </div>
+              <div className="p-4 w-full">
+                {monthlyTotalRevenue ? (
+                  <div className="w-full" style={{ minHeight: '240px' }}>
+                    <D3Chart data={monthlyTotalRevenue} renderChart={renderTotalRevenueGrowth} height={240} responsive={true} ariaLabel="Total revenue growth" />
+                  </div>
+                ) : (
+                  <div className="h-[240px] flex items-center justify-center text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">Loading chart data...</div>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Invoices & Contract */}
+        {isLoading ? (
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <CardSkeleton lines={5} />
+            <CardSkeleton lines={5} />
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <ListCard
+              title="Your invoices"
+              subtitle="Recent statements"
+              items={myInvoices.map((inv) => ({
+                id: inv.id,
+                title: inv.title,
+                description: inv.description,
+                status: inv.status,
+                value: `$${inv.amount.toLocaleString()}`,
+                timestamp: `Due ${inv.due}`,
+              }))}
+              maxBodyHeight={300}
+              showStatus={true}
+              showTimestamp={true}
+              dense={false}
+              divided={true}
+              onItemClick={(item) => {
+                toast.info(`Opening invoice ${item.title.split(' — ')[0]}`);
+              }}
+              emptyMessage="No invoices right now."
+              loading={isLoading}
+            />
+
+            <div className="bg-white dark:bg-[var(--color-dash-text)] border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 rounded-xl shadow-sm hover:shadow-lg transition-shadow duration-300 overflow-hidden">
+              <div className="p-6 border-b border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
+                <h3 className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white mb-1">
+                  Your Contract
+                </h3>
+                <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
+                  Partnership terms
+                </p>
+              </div>
+              <div className="p-6 space-y-4">
+                <div className="flex items-center justify-between pb-4 border-b border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
+                  <div>
+                    <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1 uppercase tracking-wider">Contract ID</p>
+                    <p className="text-lg font-bold text-[var(--color-dash-text)] dark:text-white">CNTR-00002</p>
+                  </div>
+                  <span className="inline-flex items-center rounded-full px-3 py-1 text-xs font-medium bg-[var(--color-dash-success)]/10 text-[var(--color-dash-success)] border border-[var(--color-dash-success)]/30">
+                    Active
+                  </span>
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1 uppercase tracking-wider">Commission Rate</p>
+                    <p className="text-2xl font-bold text-[var(--color-dash-success)]">17%</p>
+                  </div>
+                  <div>
+                    <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1 uppercase tracking-wider">Contract Term</p>
+                    <p className="text-sm font-semibold text-[var(--color-dash-text)] dark:text-white">Mar 2025 - Feb 2027</p>
+                  </div>
+                </div>
+
+                <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-lg p-4 space-y-3">
+                  <div>
+                    <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1 uppercase tracking-wider">Attrition Method</p>
+                    <p className="text-sm font-semibold text-[var(--color-dash-text)] dark:text-white">Per Night (80% threshold)</p>
+                  </div>
+                  <div>
+                    <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1 uppercase tracking-wider">Resale Credit Policy</p>
+                    <p className="text-sm font-semibold text-[var(--color-dash-text)] dark:text-white">Partial Credit (50%)</p>
+                  </div>
+                </div>
+
+                <div className="pt-2">
+                  <button
+                    onClick={() => toast.info("Opening full contract PDF...")}
+                    className="w-full inline-flex items-center justify-center gap-2 px-4 py-3 bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/20 hover:bg-[var(--color-dash-accent)]/10 dark:hover:bg-[var(--color-dash-accent)]/10 text-[var(--color-dash-text)] dark:text-white font-semibold rounded-lg border border-[var(--color-dash-label)]/30 dark:border-[var(--color-dash-muted)]/50 hover:border-[var(--color-dash-accent)] transition-colors text-sm"
+                  >
+                    <DocumentArrowDownIcon className="h-4 w-4" />
+                    Download Full Contract
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Section — Recent Activity */}
         <div className="pt-8 space-y-2">
           <h2 className="text-3xl font-bold text-[var(--color-dash-text)] dark:text-white tracking-tight">
             Recent activity
@@ -1102,8 +1349,6 @@ export default function PartnerHubDashboard() {
           </p>
         </div>
 
-        {/* Hero penalty section removed - now at top of page */}
-
         {/* Action Items Grid */}
         {isLoading ? (
           <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
@@ -1265,154 +1510,6 @@ export default function PartnerHubDashboard() {
         </div>
         )}
 
-        {/* Section */}
-        <div className="pt-8 space-y-2">
-          <h2 className="text-3xl font-bold text-[var(--color-dash-text)] dark:text-white tracking-tight">
-            Billing & contract details
-          </h2>
-          <p className="text-lg text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-            Keep track of invoices and your partnership terms
-          </p>
-        </div>
-
-        {/* Revenue Trend by Property */}
-        {isLoading ? (
-          <CardSkeleton lines={6} />
-        ) : (
-        <div className="bg-white dark:bg-[var(--color-dash-text)] border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 rounded-xl shadow-sm hover:shadow-lg transition-shadow duration-300 overflow-hidden">
-          <div className="p-8 border-b border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
-            <div className="flex items-start justify-between gap-4">
-              <div>
-                <h3 className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white mb-1">
-                  Revenue trend by property
-                </h3>
-                <p className="text-base text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-                  Monthly revenue earned through Engine across your {revenueTrendByProperty.properties?.length || 4} properties
-                </p>
-              </div>
-            </div>
-            {/* Legend */}
-            <div className="flex flex-wrap gap-4 mt-5">
-              {revenueTrendByProperty.properties.map((prop) => (
-                <div key={prop.name} className="flex items-center gap-2">
-                  <span
-                    className="inline-block h-2.5 w-2.5 rounded-full flex-shrink-0"
-                    style={{ backgroundColor: prop.color }}
-                  />
-                  <span className="text-xs font-medium text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-                    {prop.name}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </div>
-          <div className="p-6 w-full">
-            {revenueTrendByProperty && revenueTrendByProperty.months && revenueTrendByProperty.properties ? (
-              <div className="w-full" style={{ minHeight: '260px' }}>
-                <D3Chart
-                  data={revenueTrendByProperty}
-                  renderChart={renderRevenueTrendByProperty}
-                  height={260}
-                  responsive={true}
-                  ariaLabel="Revenue trend by property"
-                />
-              </div>
-            ) : (
-              <div className="h-[260px] flex items-center justify-center text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-                Loading chart data...
-              </div>
-            )}
-          </div>
-        </div>
-        )}
-
-        {/* Invoices & Contract */}
-        {isLoading ? (
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-            <CardSkeleton lines={5} />
-            <CardSkeleton lines={5} />
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-            <ListCard
-              title="Your invoices"
-              subtitle="Recent statements"
-              items={myInvoices.map((inv) => ({
-                id: inv.id,
-                title: inv.title,
-                description: inv.description,
-                status: inv.status,
-                value: `$${inv.amount.toLocaleString()}`,
-                timestamp: `Due ${inv.due}`,
-              }))}
-              maxBodyHeight={300}
-              showStatus={true}
-              showTimestamp={true}
-              dense={false}
-              divided={true}
-              onItemClick={(item) => {
-                toast.info(`Opening invoice ${item.title.split(' — ')[0]}`);
-              }}
-              emptyMessage="No invoices right now."
-              loading={isLoading}
-            />
-
-            <div className="bg-white dark:bg-[var(--color-dash-text)] border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 rounded-xl shadow-sm hover:shadow-lg transition-shadow duration-300 overflow-hidden">
-              <div className="p-6 border-b border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
-                <h3 className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white mb-1">
-                  Your Contract
-                </h3>
-                <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-                  Partnership terms
-                </p>
-              </div>
-              <div className="p-6 space-y-4">
-                <div className="flex items-center justify-between pb-4 border-b border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
-                  <div>
-                    <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1 uppercase tracking-wider">Contract ID</p>
-                    <p className="text-lg font-bold text-[var(--color-dash-text)] dark:text-white">CNTR-00002</p>
-                  </div>
-                  <span className="inline-flex items-center rounded-full px-3 py-1 text-xs font-medium bg-[var(--color-dash-success)]/10 text-[var(--color-dash-success)] border border-[var(--color-dash-success)]/30">
-                    Active
-                  </span>
-                </div>
-
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1 uppercase tracking-wider">Commission Rate</p>
-                    <p className="text-2xl font-bold text-[var(--color-dash-success)]">17%</p>
-                  </div>
-                  <div>
-                    <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1 uppercase tracking-wider">Contract Term</p>
-                    <p className="text-sm font-semibold text-[var(--color-dash-text)] dark:text-white">Mar 2025 - Feb 2027</p>
-                  </div>
-                </div>
-
-                <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-lg p-4 space-y-3">
-                  <div>
-                    <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1 uppercase tracking-wider">Attrition Method</p>
-                    <p className="text-sm font-semibold text-[var(--color-dash-text)] dark:text-white">Per Night (80% threshold)</p>
-                  </div>
-                  <div>
-                    <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1 uppercase tracking-wider">Resale Credit Policy</p>
-                    <p className="text-sm font-semibold text-[var(--color-dash-text)] dark:text-white">Partial Credit (50%)</p>
-                  </div>
-                </div>
-
-                <div className="pt-2">
-                  <button
-                    onClick={() => toast.info("Opening full contract PDF...")}
-                    className="w-full inline-flex items-center justify-center gap-2 px-4 py-3 bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/20 hover:bg-[var(--color-dash-accent)]/10 dark:hover:bg-[var(--color-dash-accent)]/10 text-[var(--color-dash-text)] dark:text-white font-semibold rounded-lg border border-[var(--color-dash-label)]/30 dark:border-[var(--color-dash-muted)]/50 hover:border-[var(--color-dash-accent)] transition-colors text-sm"
-                  >
-                    <DocumentArrowDownIcon className="h-4 w-4" />
-                    Download Full Contract
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-
         {/* Section */}
         <div className="pt-8 space-y-2">
           <h2 className="text-3xl font-bold text-[var(--color-dash-text)] dark:text-white tracking-tight">

package/brands/engine/global.css

@@ -98,8 +98,8 @@
   --dash-surface: #fef9ef;
   --dash-border:  #e2c97a;
   --dash-accent:  #FFB200;
-  --dash-success: #1E9D6D;
-  --dash-info:    #7DCBD9;
+  --dash-success: #34d399;
+  --dash-info:    #67e8f9;
   --dash-warning: #FD4B23;
   --dash-danger:  #dc2626;
   --dash-dark:    #0D1117;
@@ -110,9 +110,6 @@
   --dash-chart-4: #FD4B23;
   --dash-metric-size: 3.25rem;
   --dash-metric-sub: 2.25rem;
-  --dash-pct-size: 0.875rem;
-  --dash-pct-px: 0.75rem;
-  --dash-pct-py: 0.25rem;
   --color-dash-text:    var(--dash-text);
   --color-dash-muted:   var(--dash-muted);
   --color-dash-label:   var(--dash-label);

package/dist/styles/global.css

@@ -95,11 +95,8 @@
   --dash-chart-2: #16a34a;
   --dash-chart-3: #e11d48;
   --dash-chart-4: #7c3aed;
-  --dash-metric-size: 2.25rem;
-  --dash-metric-sub: 1.875rem;
-  --dash-pct-size: 0.75rem;
-  --dash-pct-px: 0.5rem;
-  --dash-pct-py: 0.125rem;
+  --dash-metric-size: 3.25rem;
+  --dash-metric-sub: 2.25rem;
   --color-dash-text:    var(--dash-text);
   --color-dash-muted:   var(--dash-muted);
   --color-dash-label:   var(--dash-label);

package/package.json

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

package/src/styles/global.css

@@ -95,11 +95,8 @@
   --dash-chart-2: #16a34a;
   --dash-chart-3: #e11d48;
   --dash-chart-4: #7c3aed;
-  --dash-metric-size: 2.25rem;
-  --dash-metric-sub: 1.875rem;
-  --dash-pct-size: 0.75rem;
-  --dash-pct-px: 0.5rem;
-  --dash-pct-py: 0.125rem;
+  --dash-metric-size: 3.25rem;
+  --dash-metric-sub: 2.25rem;
   --color-dash-text:    var(--dash-text);
   --color-dash-muted:   var(--dash-muted);
   --color-dash-label:   var(--dash-label);