@wealthx/shadcn 1.5.42 → 1.5.43

package/src/components/ui/expense-categories-bar.tsx

@@ -0,0 +1,178 @@
+import React, { useState } from "react";
+import { Info } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+import { cn } from "@/lib/utils";
+import { formatCurrency } from "@/lib/format-currency";
+
+/**
+ * ExpenseCategoriesBar — WealthX Design System
+ *
+ * Horizontal stacked percentage bar for categorical breakdowns.
+ * Used for both expense categories (`color="secondary"`, default)
+ * and income sources (`color="primary"`).
+ *
+ * - `color="secondary"` (default): segments use `--brand-secondary` (dark navy)
+ * - `color="primary"`: segments use `--primary` (tenant green)
+ *
+ * Hovering a segment shows a tooltip with the category name, icon, and amount.
+ *
+ * Mirrors the FE component at
+ * `frontend/src/components/ExpenseCategoriesBar/index.tsx`
+ */
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+export interface ExpenseCategoryPart {
+  id: string;
+  title: string;
+  /** Fraction of total (0–1). Used to size the segment. */
+  percentage: number;
+  /** Absolute amount in AUD. Shown in the hover tooltip. */
+  amount: number;
+}
+
+export interface ExpenseCategoriesBarProps {
+  /** Main heading above the bar (e.g. "Expense Categories"). Omit to hide the header row entirely. */
+  title?: string;
+  /** Secondary label shown next to the title (e.g. date range or period) */
+  subtitle?: string;
+  /** Text shown in the info-icon tooltip next to the subtitle */
+  tooltipText?: string;
+  /** Ordered list of category segments */
+  parts?: ExpenseCategoryPart[];
+  /** Icon node for each segment, indexed to match `parts` */
+  icons?: React.ReactNode[];
+  /**
+   * Bar segment colour scheme.
+   * - `"secondary"` (default) — `--brand-secondary` (dark navy); used for expenses
+   * - `"primary"` — `--primary` (tenant green); used for income sources
+   */
+  color?: "primary" | "secondary";
+  className?: string;
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export function ExpenseCategoriesBar({
+  title,
+  subtitle,
+  tooltipText,
+  parts = [],
+  icons = [],
+  color = "secondary",
+  className,
+}: ExpenseCategoriesBarProps) {
+  const [hoveredIndex, setHoveredIndex] = useState(-1);
+
+  const segmentBase = color === "primary" ? "bg-primary" : "bg-brand-secondary";
+  const segmentHover =
+    color === "primary"
+      ? "border-primary/50 bg-primary/60"
+      : "border-brand-secondary/50 bg-brand-secondary/60";
+  // Use *-foreground tokens so icons/text on a primary/secondary background
+  // always have sufficient contrast — avoids hardcoded colours that fail on
+  // custom tenant themes.
+  const iconDefault =
+    color === "primary"
+      ? "[&_svg]:stroke-primary-foreground [&_svg]:text-primary-foreground"
+      : "[&_svg]:stroke-brand-secondary-foreground [&_svg]:text-brand-secondary-foreground";
+  const iconHovered = "[&_svg]:stroke-foreground [&_svg]:text-foreground";
+
+  return (
+    <div className={cn("flex flex-col", className)}>
+      {/* ── Header ── */}
+      {(title || subtitle) && (
+        <div className="flex items-baseline gap-2">
+          {title && (
+            <p className="m-0 overflow-hidden text-ellipsis whitespace-nowrap text-[22px] font-normal leading-tight">
+              {title}
+            </p>
+          )}
+          {subtitle && (
+            <div className="flex min-w-0 items-center gap-1">
+              <span className="whitespace-nowrap text-sm text-muted-foreground">
+                {subtitle}
+              </span>
+              {tooltipText && (
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <button
+                        type="button"
+                        className="flex items-center text-muted-foreground transition-colors hover:text-foreground"
+                      />
+                    }
+                  >
+                    <Info className="size-4" />
+                  </TooltipTrigger>
+                  <TooltipContent side="top">{tooltipText}</TooltipContent>
+                </Tooltip>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* ── Bar ── */}
+      <div
+        className="mt-4 mb-6 flex h-8 w-full gap-px"
+        onMouseLeave={() => setHoveredIndex(-1)}
+      >
+        {parts.length === 0 ? (
+          <div className="grow bg-muted" />
+        ) : (
+          parts.map((part, index) => {
+            const isHovered = hoveredIndex === index;
+            const showIcon = part.percentage > 0.01;
+            const icon = icons[index];
+
+            return (
+              <Tooltip key={part.id} open={isHovered}>
+                <TooltipTrigger
+                  render={
+                    <div
+                      className={cn(
+                        "relative border border-transparent transition-colors duration-200",
+                        segmentBase,
+                        isHovered && segmentHover,
+                      )}
+                      style={{
+                        flexGrow: Math.max(part.percentage, 0.0001) * 10,
+                      }}
+                      onMouseEnter={() => setHoveredIndex(index)}
+                    />
+                  }
+                >
+                  {showIcon && icon && (
+                    <div
+                      className={cn(
+                        "absolute left-2 top-0 bottom-0 flex items-center [&_svg]:size-4",
+                        isHovered ? iconHovered : iconDefault,
+                      )}
+                    >
+                      {icon}
+                    </div>
+                  )}
+                </TooltipTrigger>
+
+                <TooltipContent side="top">
+                  <div className="flex flex-col gap-1.5 min-w-[120px]">
+                    <div className="flex items-center gap-2">
+                      {icon && <span className="[&_svg]:size-4">{icon}</span>}
+                      <span className="text-sm font-semibold leading-tight line-clamp-2">
+                        {part.title}
+                      </span>
+                    </div>
+                    <span className="self-end text-sm font-bold">
+                      {formatCurrency(part.amount)}
+                    </span>
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/income-bar-chart.tsx

@@ -88,6 +88,12 @@ export interface IncomeBarChartProps {
   className?: string;
   /** Show skeleton loading state instead of the chart */
   isLoading?: boolean;
+  /**
+   * Show the internal period selector buttons (3M / 6M / 12M).
+   * Set to `false` when the chart is driven by an external period control.
+   * Defaults to `true`.
+   */
+  showPeriodSelector?: boolean;
 }
 
 // ---------------------------------------------------------------------------
@@ -111,6 +117,7 @@ export function IncomeBarChart({
   width = "100%",
   className,
   isLoading = false,
+  showPeriodSelector = true,
 }: IncomeBarChartProps) {
   const periods = CHART_PERIODS[granularity];
   const [period, setPeriod] = useState<IncomePeriod>(defaultPeriod);
@@ -216,7 +223,7 @@ export function IncomeBarChart({
           stacked: true,
           grid: { display: false },
           border: { display: false },
-          ticks: { font: { size: 10 }, color: FALLBACK_TICK },
+          ticks: { font: { size: 12 }, color: FALLBACK_TICK },
         },
         y: {
           display: showYAxis,
@@ -224,7 +231,7 @@ export function IncomeBarChart({
           grid: { display: false },
           border: { display: false },
           ticks: {
-            font: { size: 10 },
+            font: { size: 12 },
             color: FALLBACK_TICK,
             maxTicksLimit: 5,
             padding: 8,
@@ -241,23 +248,29 @@ export function IncomeBarChart({
       className={cn("w-full py-4 sm:py-6 gap-2", className)}
       style={{ maxWidth: width, fontFamily }}
     >
-      <CardHeader className="px-3 sm:px-6">
-        <CardTitle className="text-xs font-semibold uppercase tracking-wide">
-          {title}
-        </CardTitle>
-        <CardAction>
-          <div className="flex gap-0.5 sm:gap-1">
-            {periods.map((p) => (
-              <ChartPeriodButton
-                key={p}
-                period={p}
-                active={period === p}
-                onClick={() => setPeriod(p)}
-              />
-            ))}
-          </div>
-        </CardAction>
-      </CardHeader>
+      {(title || showPeriodSelector) && (
+        <CardHeader className="px-3 sm:px-6">
+          {title && (
+            <CardTitle className="text-xs font-semibold uppercase tracking-wide">
+              {title}
+            </CardTitle>
+          )}
+          {showPeriodSelector && (
+            <CardAction>
+              <div className="flex gap-0.5 sm:gap-1">
+                {periods.map((p) => (
+                  <ChartPeriodButton
+                    key={p}
+                    period={p}
+                    active={period === p}
+                    onClick={() => setPeriod(p)}
+                  />
+                ))}
+              </div>
+            </CardAction>
+          )}
+        </CardHeader>
+      )}
 
       <CardContent className="px-3 sm:px-6">
         {isLoading ? (

package/src/components/ui/incoming-outgoings-card.tsx

@@ -75,7 +75,7 @@ export function IncomingOutgoingsCard({
           return (
             <div key={item.label} className="flex flex-col gap-1">
               <div className="flex items-center justify-between gap-2">
-                <span className="flex items-center gap-1.5 text-sm text-foreground">
+                <span className="flex items-center gap-1.5 text-sm font-medium text-foreground">
                   {Icon && (
                     <Icon
                       size={16}
@@ -85,7 +85,7 @@ export function IncomingOutgoingsCard({
                   )}
                   {item.label}
                 </span>
-                <span className="shrink-0 text-sm font-medium text-foreground">
+                <span className="shrink-0 text-sm font-semibold text-foreground">
                   {formatCurrency(item.value)}
                 </span>
               </div>

package/src/components/ui/property-mobile-estimate-line-chart.tsx

@@ -309,7 +309,7 @@ export function PropertyMobileEstimateLineChart({
             maxRotation: 0,
             minRotation: 0,
             color: FALLBACK_TICK,
-            font: { size: 10 },
+            font: { size: 12, family: fontFamily },
             maxTicksLimit: 12,
           },
         },
@@ -322,13 +322,13 @@ export function PropertyMobileEstimateLineChart({
             padding: 8,
             maxTicksLimit: 5,
             color: FALLBACK_TICK,
-            font: { size: 10 },
+            font: { size: 12, family: fontFamily },
             callback: (v) => formatAbbrev(Number(v)),
           },
         },
       },
     }),
-    [showXAxis, showYAxis, sliced],
+    [showXAxis, showYAxis, sliced, fontFamily],
   );
 
   return (
@@ -337,7 +337,7 @@ export function PropertyMobileEstimateLineChart({
       style={{ maxWidth: width, fontFamily }}
     >
       <CardHeader className="px-3 sm:px-6">
-        <CardTitle className="text-xs font-semibold uppercase tracking-wide">
+        <CardTitle className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
           {title}
         </CardTitle>
         {showPeriodSelector && (

package/src/components/ui/scenario-list.tsx

@@ -35,7 +35,7 @@ export interface ScenarioListProps {
   onDelete?: (id: string) => void;
   /** Called when the Add button is clicked */
   onAdd?: () => void;
-  /** Label for the add button (default: "Compare Loan Options") */
+  /** Label for the add button (default: "Add New Scenario") */
   addLabel?: string;
   /**
    * Maximum number of scenarios allowed. When `scenarios.length >= maxScenarios`
@@ -60,7 +60,7 @@ export function ScenarioList({
   onEdit,
   onDelete,
   onAdd,
-  addLabel = "Compare Loan Options",
+  addLabel = "Add New Scenario",
   maxScenarios,
   isDraggable = true,
   onReorder,

package/src/components/ui/transactions-liabilities-breakdown-doughnut-chart.tsx

@@ -128,11 +128,13 @@ export function TransactionsLiabilitiesBreakdownChart({
       className={cn("w-full py-4 sm:py-6 gap-2", className)}
       style={{ maxWidth: width, fontFamily }}
     >
-      <CardHeader className="px-3 sm:px-6">
-        <CardTitle className="text-xs font-semibold uppercase tracking-wide">
-          {title}
-        </CardTitle>
-      </CardHeader>
+      {title && (
+        <CardHeader className="px-3 sm:px-6">
+          <CardTitle className="text-xs font-semibold uppercase tracking-wide">
+            {title}
+          </CardTitle>
+        </CardHeader>
+      )}
 
       <CardContent className="px-3 sm:px-6">
         {isLoading ? (

package/src/components/ui/transactions-summary-block.tsx

@@ -4,29 +4,40 @@ import { cn } from "@/lib/utils";
 /**
  * Section header block used above each chart on the Money (Transactions) page.
  *
- * Matches the app design: large value at the top, category label below,
- * optional period text and footnote beneath.
+ * Two layout variants:
  *
- * Layout:
+ * `layout="vertical"` (default)
  * ┌─────────────────────────────────────────┐
  * │  $37,085            [optional action]    │
  * │  Cash Balance                            │
  * │  30 Days Total                           │
  * │  (Based on connected bank transactions)  │
  * └─────────────────────────────────────────┘
+ *
+ * `layout="horizontal"`
+ * ┌─────────────────────────────────────────┐
+ * │  CASH BALANCE               $37,085     │
+ * │  (Based on connected bank transactions) │
+ * └─────────────────────────────────────────┘
  */
 
 export interface TransactionsSummaryBlockProps {
-  /** Pre-formatted total value — e.g. "$37,085" — displayed prominently at top */
+  /** Pre-formatted total value — e.g. "$37,085" — displayed prominently */
   value: string;
   /** Section label — e.g. "Cash Balance", "Income", "Expense" */
   label: string;
-  /** Period text — e.g. "30 Days Total" */
+  /** Period text — e.g. "30 Days Total" (vertical layout only) */
   period?: string;
   /** Small footnote — e.g. "(Based on connected bank transactions)" */
   footnote?: string;
-  /** Optional trailing element — e.g. a Button for "Set Goal" */
+  /** Optional trailing element — e.g. a Button for "Set Goal" (vertical layout only) */
   action?: React.ReactNode;
+  /**
+   * Layout variant.
+   * - `"vertical"` (default): value large on top, label + period below
+   * - `"horizontal"`: label small-caps left, value large right — mirrors Borrowing Capacity style
+   */
+  layout?: "vertical" | "horizontal";
   className?: string;
 }
 
@@ -36,8 +47,30 @@ export function TransactionsSummaryBlock({
   period,
   footnote,
   action,
+  layout = "vertical",
   className,
 }: TransactionsSummaryBlockProps) {
+  if (layout === "horizontal") {
+    return (
+      <div className={cn("flex flex-col gap-0.5 py-3", className)}>
+        <div className="flex items-baseline justify-between gap-4">
+          <p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
+            {label}
+          </p>
+          <div className="flex shrink-0 items-baseline gap-3">
+            <p className="text-lg font-bold tabular-nums text-foreground">
+              {value}
+            </p>
+            {action && <div className="shrink-0">{action}</div>}
+          </div>
+        </div>
+        {footnote && (
+          <p className="text-sm text-muted-foreground">{footnote}</p>
+        )}
+      </div>
+    );
+  }
+
   return (
     <div
       className={cn("flex items-start justify-between gap-2 py-3", className)}