@wealthx/shadcn 1.5.42 → 1.5.43

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { ChevronDown, ChevronRight } from "lucide-react";
+import { ChevronDown, ChevronRight, ListFilter } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle } from "./card";
 import { Spinner } from "./spinner";
 import { cn } from "@/lib/utils";
@@ -38,16 +38,42 @@ export interface DashboardExpenseCategoriesProps {
   selectedCategoryId?: string | null;
   /** Called with the category ID to filter by, or null to clear */
   onCategorySelect?: (id: string | null) => void;
+  /**
+   * Color scheme for progress bars and active states.
+   * Use "secondary" for the Expense tab to distinguish from Income (primary).
+   * Defaults to "primary".
+   */
+  colorScheme?: "primary" | "secondary";
 }
 
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const SECONDARY_ACTIVE_BG =
+  "color-mix(in oklch, var(--brand-secondary) 8%, transparent)";
+const SECONDARY_ACTIVE_HOVER_BG =
+  "color-mix(in oklch, var(--brand-secondary) 12%, transparent)";
+
 // ─── Progress bar ─────────────────────────────────────────────────────────────
 
-function ProgressBar({ pct, className }: { pct: number; className?: string }) {
+function ProgressBar({
+  pct,
+  className,
+  colorScheme = "primary",
+}: {
+  pct: number;
+  className?: string;
+  colorScheme?: "primary" | "secondary";
+}) {
   return (
     <div className={cn("h-1.5 w-full overflow-hidden bg-muted", className)}>
       <div
         className="h-full bg-primary transition-all"
-        style={{ width: `${Math.min(100, Math.max(0, pct))}%` }}
+        style={{
+          width: `${Math.min(100, Math.max(0, pct))}%`,
+          ...(colorScheme === "secondary" && {
+            backgroundColor: "var(--brand-secondary)",
+          }),
+        }}
         aria-hidden="true"
       />
     </div>
@@ -59,36 +85,60 @@ function ProgressBar({ pct, className }: { pct: number; className?: string }) {
 function SubCategoryRow({
   sub,
   isSelected,
+  colorScheme = "primary",
   onClick,
 }: {
   sub: ExpenseSubCategory;
   isSelected: boolean;
+  colorScheme?: "primary" | "secondary";
   onClick: () => void;
 }) {
+  const isSecondary = colorScheme === "secondary";
   return (
-    <button
-      type="button"
-      onClick={onClick}
+    <div
       className={cn(
-        "flex w-full flex-col gap-1 py-1.5 pl-8 text-left transition-colors",
-        isSelected ? "bg-primary/5" : "hover:bg-muted/50",
+        "flex w-full flex-col gap-1 py-1.5 pl-8",
+        isSelected && !isSecondary && "bg-primary/5",
       )}
+      style={
+        isSelected && isSecondary
+          ? { backgroundColor: SECONDARY_ACTIVE_BG }
+          : undefined
+      }
     >
       <div className="flex items-center justify-between gap-2 text-xs">
-        <span
-          className={cn(
-            "truncate",
-            isSelected ? "font-medium text-primary" : "text-muted-foreground",
-          )}
-        >
-          {sub.name}
-        </span>
+        <div className="flex min-w-0 items-center gap-1">
+          <span
+            className={cn(
+              "truncate text-muted-foreground",
+              isSelected && "font-medium",
+            )}
+          >
+            {sub.name}
+          </span>
+          <button
+            type="button"
+            onClick={onClick}
+            aria-label={`Filter by ${sub.name}`}
+            aria-pressed={isSelected}
+            className={cn(
+              "shrink-0 transition-colors",
+              isSelected
+                ? isSecondary
+                  ? "text-[var(--brand-secondary)]"
+                  : "text-primary"
+                : "text-muted-foreground/50 hover:text-muted-foreground",
+            )}
+          >
+            <ListFilter size={12} />
+          </button>
+        </div>
         <span className="shrink-0 font-medium text-foreground">
           {formatCurrency(sub.amount)}
         </span>
       </div>
-      <ProgressBar pct={sub.pct} />
-    </button>
+      <ProgressBar pct={sub.pct} colorScheme={colorScheme} />
+    </div>
   );
 }
 
@@ -97,48 +147,59 @@ function SubCategoryRow({
 function CategoryRow({
   item,
   selectedCategoryId,
+  colorScheme = "primary",
   onFilterClick,
 }: {
   item: ExpenseCategoryItem;
   selectedCategoryId?: string | null;
+  colorScheme?: "primary" | "secondary";
   onFilterClick: (id: string | null) => void;
 }) {
   const [expanded, setExpanded] = useState(false);
-  const hasChildren = (item.subCategories?.length ?? 0) > 0;
+  const [hovered, setHovered] = useState(false);
 
+  const hasChildren = (item.subCategories?.length ?? 0) > 0;
   const isSelected = selectedCategoryId === item.id;
-  const isChildSelected = hasChildren
-    ? (item.subCategories?.some((s) => s.id === selectedCategoryId) ?? false)
-    : false;
+  const isChildSelected =
+    hasChildren &&
+    (item.subCategories?.some((s) => s.id === selectedCategoryId) ?? false);
   const isActive = isSelected || isChildSelected;
+  const isSecondary = colorScheme === "secondary";
+
+  // Secondary scheme active background is set via inline style (color-mix not
+  // expressible as a Tailwind arbitrary value here). Hover darkens the tint.
+  const wrapperStyle =
+    isSecondary && isActive
+      ? {
+          backgroundColor: hovered
+            ? SECONDARY_ACTIVE_HOVER_BG
+            : SECONDARY_ACTIVE_BG,
+        }
+      : undefined;
 
   return (
     <div
       className={cn(
         "border-b border-border last:border-0 transition-colors",
-        isActive && "bg-primary/5",
+        isActive && !isSecondary && "bg-primary/5",
       )}
+      style={wrapperStyle}
     >
-      {/* Main row — full click = filter */}
+      {/* Main row — click expands/collapses; filter icon inside triggers filter */}
       <button
         type="button"
         className={cn(
-          "flex w-full items-start gap-3 py-3 text-left hover:bg-muted/40 transition-colors",
-          isActive && "hover:bg-primary/10",
+          "flex w-full items-start gap-3 py-3 text-left transition-colors",
+          !isSecondary && "hover:bg-muted/40",
+          !isSecondary && isActive && "hover:bg-primary/10",
         )}
-        onClick={() => onFilterClick(isSelected ? null : item.id)}
-        aria-pressed={isSelected}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        onClick={() => hasChildren && setExpanded((v) => !v)}
+        aria-expanded={hasChildren ? expanded : undefined}
       >
-        {/* Expand chevron — stops propagation, only expands */}
-        <span
-          className="mt-0.5 shrink-0 text-muted-foreground"
-          onClick={(e) => {
-            if (!hasChildren) return;
-            e.stopPropagation();
-            setExpanded((v) => !v);
-          }}
-          aria-label={expanded ? "Collapse" : "Expand"}
-        >
+        {/* Expand chevron */}
+        <span className="mt-0.5 shrink-0 text-muted-foreground">
           {hasChildren ? (
             expanded ? (
               <ChevronDown size={14} />
@@ -150,29 +211,41 @@ function CategoryRow({
           )}
         </span>
 
-        {/* Icon */}
+        {/* Domain icon */}
         {item.icon && (
-          <span
-            className={cn(
-              "mt-0.5 shrink-0",
-              isActive ? "text-primary" : "text-muted-foreground",
-            )}
-          >
+          <span className="mt-0.5 shrink-0 text-muted-foreground">
             {item.icon}
           </span>
         )}
 
-        {/* Name + progress */}
+        {/* Name + filter icon + amounts */}
         <div className="min-w-0 flex-1">
           <div className="flex items-center justify-between gap-2">
-            <span
-              className={cn(
-                "truncate text-sm font-medium",
-                isActive ? "text-primary" : "text-foreground",
-              )}
-            >
-              {item.name}
-            </span>
+            <div className="flex min-w-0 items-center gap-1">
+              <span className="truncate text-sm font-medium text-foreground">
+                {item.name}
+              </span>
+              {/* Filter icon — only this triggers the category filter */}
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onFilterClick(isSelected ? null : item.id);
+                }}
+                aria-label={`Filter by ${item.name}`}
+                aria-pressed={isSelected}
+                className={cn(
+                  "shrink-0 transition-colors",
+                  isActive
+                    ? isSecondary
+                      ? "text-[var(--brand-secondary)]"
+                      : "text-primary"
+                    : "text-muted-foreground/50 hover:text-muted-foreground",
+                )}
+              >
+                <ListFilter size={13} />
+              </button>
+            </div>
             <div className="flex shrink-0 items-center gap-2">
               <span className="text-xs text-muted-foreground">
                 {item.pct.toFixed(0)}%
@@ -182,7 +255,11 @@ function CategoryRow({
               </span>
             </div>
           </div>
-          <ProgressBar pct={item.pct} className="mt-1.5" />
+          <ProgressBar
+            pct={item.pct}
+            className="mt-1.5"
+            colorScheme={colorScheme}
+          />
         </div>
       </button>
 
@@ -194,6 +271,7 @@ function CategoryRow({
               key={sub.id}
               sub={sub}
               isSelected={selectedCategoryId === sub.id}
+              colorScheme={colorScheme}
               onClick={() =>
                 onFilterClick(selectedCategoryId === sub.id ? null : sub.id)
               }
@@ -215,11 +293,8 @@ export function DashboardExpenseCategories({
   className,
   selectedCategoryId,
   onCategorySelect,
+  colorScheme = "primary",
 }: DashboardExpenseCategoriesProps) {
-  const handleFilterClick = (id: string | null) => {
-    onCategorySelect?.(id);
-  };
-
   return (
     <Card className={cn("flex flex-col", className)}>
       <CardHeader className="pb-2">
@@ -251,7 +326,8 @@ export function DashboardExpenseCategories({
                 key={item.id}
                 item={item}
                 selectedCategoryId={selectedCategoryId}
-                onFilterClick={handleFilterClick}
+                colorScheme={colorScheme}
+                onFilterClick={(id) => onCategorySelect?.(id)}
               />
             ))}
           </div>

package/src/components/ui/dashboard-transactions-table.tsx

@@ -58,6 +58,18 @@ export interface DashboardTransactionsTableProps {
     categoryId: string,
     applyToFuture: boolean,
   ) => void;
+  /**
+   * Show or hide the card header (title + "Account Transaction" tab).
+   * Set to `false` when the surrounding layout already provides context.
+   * Defaults to `true`.
+   */
+  showHeader?: boolean;
+  /**
+   * Show or hide the "Account Transaction" underlined tab below the title.
+   * Set to `false` when the surrounding layout already provides tab context.
+   * Defaults to `true`.
+   */
+  showTab?: boolean;
 }
 
 // ─── Category chip ────────────────────────────────────────────────────────────
@@ -76,7 +88,7 @@ function CategoryChip({
       <Badge
         asChild
         variant="secondary"
-        className="cursor-pointer transition-colors hover:border-primary/40 hover:bg-primary/10 hover:text-primary"
+        className="cursor-pointer transition-colors hover:bg-muted"
       >
         <button type="button" onClick={onClick}>
           {label}
@@ -93,12 +105,10 @@ function CategoryChip({
 
 function TransactionRow({
   tx,
-  isDimmed,
   canEdit,
   onChipClick,
 }: {
   tx: DashboardTransaction;
-  isDimmed: boolean;
   canEdit: boolean;
   onChipClick?: () => void;
 }) {
@@ -106,12 +116,7 @@ function TransactionRow({
   const categoryLabel = tx.editedCategoryName ?? tx.category;
 
   return (
-    <div
-      className={cn(
-        "flex items-start justify-between gap-4 border-b border-border py-3 last:border-0 transition-opacity",
-        isDimmed && "opacity-30",
-      )}
-    >
+    <div className="flex items-start justify-between gap-4 border-b border-border py-3 last:border-0">
       <div className="min-w-0 flex-1">
         <p className="text-xs text-muted-foreground">
           {formatDateShort(tx.date)}
@@ -161,6 +166,8 @@ export function DashboardTransactionsTable({
   selectedCategoryId,
   categories,
   onCategoryChange,
+  showHeader = true,
+  showTab = true,
 }: DashboardTransactionsTableProps) {
   const isFiltering = selectedCategoryId != null;
   const canEdit = !!categories?.length;
@@ -177,16 +184,20 @@ export function DashboardTransactionsTable({
   return (
     <>
       <Card className={cn("flex flex-col", className)}>
-        <CardHeader className="pb-0">
-          <CardTitle className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-            {title}
-          </CardTitle>
-          <div className="mt-2 flex border-b border-border">
-            <span className="border-b-2 border-foreground pb-1.5 text-xs font-semibold text-foreground">
-              Account Transaction
-            </span>
-          </div>
-        </CardHeader>
+        {showHeader && (
+          <CardHeader className="pb-0">
+            <CardTitle className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+              {title}
+            </CardTitle>
+            {showTab && (
+              <div className="mt-2 flex border-b border-border">
+                <span className="border-b-2 border-foreground pb-1.5 text-xs font-semibold text-foreground">
+                  Account Transaction
+                </span>
+              </div>
+            )}
+          </CardHeader>
+        )}
 
         <CardContent className="flex flex-1 flex-col px-4 pb-0 pt-0">
           {isLoading ? (
@@ -199,15 +210,18 @@ export function DashboardTransactionsTable({
             </p>
           ) : (
             <div className="flex flex-col">
-              {transactions.map((tx) => (
-                <TransactionRow
-                  key={tx.id}
-                  tx={tx}
-                  isDimmed={isFiltering && tx.categoryId !== selectedCategoryId}
-                  canEdit={canEdit}
-                  onChipClick={() => setEditingTx(tx)}
-                />
-              ))}
+              {transactions
+                .filter(
+                  (tx) => !isFiltering || tx.categoryId === selectedCategoryId,
+                )
+                .map((tx) => (
+                  <TransactionRow
+                    key={tx.id}
+                    tx={tx}
+                    canEdit={canEdit}
+                    onChipClick={() => setEditingTx(tx)}
+                  />
+                ))}
             </div>
           )}
 

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

@@ -88,6 +88,12 @@ export interface ExpenseBarChartProps {
   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;
 }
 
 // ---------------------------------------------------------------------------
@@ -108,6 +114,7 @@ export function ExpenseBarChart({
   width = "100%",
   className,
   isLoading = false,
+  showPeriodSelector = true,
 }: ExpenseBarChartProps) {
   const periods = CHART_PERIODS[granularity];
   const [period, setPeriod] = useState<ExpensePeriod>(defaultPeriod);
@@ -215,7 +222,7 @@ export function ExpenseBarChart({
           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,
@@ -223,7 +230,7 @@ export function ExpenseBarChart({
           grid: { display: false },
           border: { display: false },
           ticks: {
-            font: { size: 10 },
+            font: { size: 12 },
             color: FALLBACK_TICK,
             maxTicksLimit: 5,
             padding: 8,
@@ -240,23 +247,29 @@ export function ExpenseBarChart({
       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 ? (