@wealthx/shadcn 1.5.41 → 1.5.43

package/dist/components/ui/dashboard-expense-categories.js

@@ -187,12 +187,22 @@ function formatCurrency(value, options) {
 
 // src/components/ui/dashboard-expense-categories.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function ProgressBar({ pct, className }) {
+var SECONDARY_ACTIVE_BG = "color-mix(in oklch, var(--brand-secondary) 8%, transparent)";
+var SECONDARY_ACTIVE_HOVER_BG = "color-mix(in oklch, var(--brand-secondary) 12%, transparent)";
+function ProgressBar({
+  pct,
+  className,
+  colorScheme = "primary"
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn("h-1.5 w-full overflow-hidden bg-muted", className), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
       className: "h-full bg-primary transition-all",
-      style: { width: `${Math.min(100, Math.max(0, pct))}%` },
+      style: __spreadValues({
+        width: `${Math.min(100, Math.max(0, pct))}%`
+      }, colorScheme === "secondary" && {
+        backgroundColor: "var(--brand-secondary)"
+      }),
       "aria-hidden": "true"
     }
   ) });
@@ -200,32 +210,49 @@ function ProgressBar({ pct, className }) {
 function SubCategoryRow({
   sub,
   isSelected,
+  colorScheme = "primary",
   onClick
 }) {
+  const isSecondary = colorScheme === "secondary";
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "button",
+    "div",
     {
-      type: "button",
-      onClick,
       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 } : void 0,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between gap-2 text-xs", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "span",
-            {
-              className: cn(
-                "truncate",
-                isSelected ? "font-medium text-primary" : "text-muted-foreground"
-              ),
-              children: sub.name
-            }
-          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex min-w-0 items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "span",
+              {
+                className: cn(
+                  "truncate text-muted-foreground",
+                  isSelected && "font-medium"
+                ),
+                children: sub.name
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                type: "button",
+                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"
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ListFilter, { size: 12 })
+              }
+            )
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "shrink-0 font-medium text-foreground", children: formatCurrency(sub.amount) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProgressBar, { pct: sub.pct })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProgressBar, { pct: sub.pct, colorScheme })
       ]
     }
   );
@@ -233,68 +260,67 @@ function SubCategoryRow({
 function CategoryRow({
   item,
   selectedCategoryId,
+  colorScheme = "primary",
   onFilterClick
 }) {
   var _a, _b, _c, _d;
   const [expanded, setExpanded] = (0, import_react.useState)(false);
+  const [hovered, setHovered] = (0, import_react.useState)(false);
   const hasChildren = ((_b = (_a = item.subCategories) == null ? void 0 : _a.length) != null ? _b : 0) > 0;
   const isSelected = selectedCategoryId === item.id;
-  const isChildSelected = hasChildren ? (_d = (_c = item.subCategories) == null ? void 0 : _c.some((s) => s.id === selectedCategoryId)) != null ? _d : false : false;
+  const isChildSelected = hasChildren && ((_d = (_c = item.subCategories) == null ? void 0 : _c.some((s) => s.id === selectedCategoryId)) != null ? _d : false);
   const isActive = isSelected || isChildSelected;
+  const isSecondary = colorScheme === "secondary";
+  const wrapperStyle = isSecondary && isActive ? {
+    backgroundColor: hovered ? SECONDARY_ACTIVE_HOVER_BG : SECONDARY_ACTIVE_BG
+  } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       className: cn(
         "border-b border-border last:border-0 transition-colors",
-        isActive && "bg-primary/5"
+        isActive && !isSecondary && "bg-primary/5"
       ),
+      style: wrapperStyle,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
           "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 : void 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "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",
-                  children: hasChildren ? expanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ChevronDown, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ChevronRight, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "inline-block size-3.5" })
-                }
-              ),
-              item.icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "span",
-                {
-                  className: cn(
-                    "mt-0.5 shrink-0",
-                    isActive ? "text-primary" : "text-muted-foreground"
-                  ),
-                  children: item.icon
-                }
-              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mt-0.5 shrink-0 text-muted-foreground", children: hasChildren ? expanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ChevronDown, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ChevronRight, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "inline-block size-3.5" }) }),
+              item.icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mt-0.5 shrink-0 text-muted-foreground", children: item.icon }),
               /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "min-w-0 flex-1", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    "span",
-                    {
-                      className: cn(
-                        "truncate text-sm font-medium",
-                        isActive ? "text-primary" : "text-foreground"
-                      ),
-                      children: item.name
-                    }
-                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex min-w-0 items-center gap-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "truncate text-sm font-medium text-foreground", children: item.name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "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"
+                        ),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ListFilter, { size: 13 })
+                      }
+                    )
+                  ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex shrink-0 items-center gap-2", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
                       item.pct.toFixed(0),
@@ -303,7 +329,14 @@ function CategoryRow({
                     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm font-semibold text-foreground", children: formatCurrency(item.amount) })
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProgressBar, { pct: item.pct, className: "mt-1.5" })
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  ProgressBar,
+                  {
+                    pct: item.pct,
+                    className: "mt-1.5",
+                    colorScheme
+                  }
+                )
               ] })
             ]
           }
@@ -313,6 +346,7 @@ function CategoryRow({
           {
             sub,
             isSelected: selectedCategoryId === sub.id,
+            colorScheme,
             onClick: () => onFilterClick(selectedCategoryId === sub.id ? null : sub.id)
           },
           sub.id
@@ -328,11 +362,9 @@ function DashboardExpenseCategories({
   isLoading = false,
   className,
   selectedCategoryId,
-  onCategorySelect
+  onCategorySelect,
+  colorScheme = "primary"
 }) {
-  const handleFilterClick = (id) => {
-    onCategorySelect == null ? void 0 : onCategorySelect(id);
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Card, { className: cn("flex flex-col", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CardHeader, { className: "pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-baseline justify-between gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CardTitle, { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: title }),
@@ -343,7 +375,8 @@ function DashboardExpenseCategories({
       {
         item,
         selectedCategoryId,
-        onFilterClick: handleFilterClick
+        colorScheme,
+        onFilterClick: (id) => onCategorySelect == null ? void 0 : onCategorySelect(id)
       },
       item.id
     )) }) })

package/dist/components/ui/dashboard-expense-categories.mjs

@@ -9,22 +9,34 @@ import {
 } from "../../chunk-JVMXMFBB.mjs";
 import {
   formatCurrency
-} from "../../chunk-MN5NYQCL.mjs";
+} from "../../chunk-XQDTFNVL.mjs";
 import {
   cn
 } from "../../chunk-AFML43VJ.mjs";
-import "../../chunk-WNQUEZJF.mjs";
+import {
+  __spreadValues
+} from "../../chunk-WNQUEZJF.mjs";
 
 // src/components/ui/dashboard-expense-categories.tsx
 import { useState } from "react";
-import { ChevronDown, ChevronRight } from "lucide-react";
+import { ChevronDown, ChevronRight, ListFilter } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-function ProgressBar({ pct, className }) {
+var SECONDARY_ACTIVE_BG = "color-mix(in oklch, var(--brand-secondary) 8%, transparent)";
+var SECONDARY_ACTIVE_HOVER_BG = "color-mix(in oklch, var(--brand-secondary) 12%, transparent)";
+function ProgressBar({
+  pct,
+  className,
+  colorScheme = "primary"
+}) {
   return /* @__PURE__ */ jsx("div", { className: cn("h-1.5 w-full overflow-hidden bg-muted", className), children: /* @__PURE__ */ jsx(
     "div",
     {
       className: "h-full bg-primary transition-all",
-      style: { width: `${Math.min(100, Math.max(0, pct))}%` },
+      style: __spreadValues({
+        width: `${Math.min(100, Math.max(0, pct))}%`
+      }, colorScheme === "secondary" && {
+        backgroundColor: "var(--brand-secondary)"
+      }),
       "aria-hidden": "true"
     }
   ) });
@@ -32,32 +44,49 @@ function ProgressBar({ pct, className }) {
 function SubCategoryRow({
   sub,
   isSelected,
+  colorScheme = "primary",
   onClick
 }) {
+  const isSecondary = colorScheme === "secondary";
   return /* @__PURE__ */ jsxs(
-    "button",
+    "div",
     {
-      type: "button",
-      onClick,
       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 } : void 0,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 text-xs", children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "truncate",
-                isSelected ? "font-medium text-primary" : "text-muted-foreground"
-              ),
-              children: sub.name
-            }
-          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "truncate text-muted-foreground",
+                  isSelected && "font-medium"
+                ),
+                children: sub.name
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                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"
+                ),
+                children: /* @__PURE__ */ jsx(ListFilter, { size: 12 })
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx("span", { className: "shrink-0 font-medium text-foreground", children: formatCurrency(sub.amount) })
         ] }),
-        /* @__PURE__ */ jsx(ProgressBar, { pct: sub.pct })
+        /* @__PURE__ */ jsx(ProgressBar, { pct: sub.pct, colorScheme })
       ]
     }
   );
@@ -65,68 +94,67 @@ function SubCategoryRow({
 function CategoryRow({
   item,
   selectedCategoryId,
+  colorScheme = "primary",
   onFilterClick
 }) {
   var _a, _b, _c, _d;
   const [expanded, setExpanded] = useState(false);
+  const [hovered, setHovered] = useState(false);
   const hasChildren = ((_b = (_a = item.subCategories) == null ? void 0 : _a.length) != null ? _b : 0) > 0;
   const isSelected = selectedCategoryId === item.id;
-  const isChildSelected = hasChildren ? (_d = (_c = item.subCategories) == null ? void 0 : _c.some((s) => s.id === selectedCategoryId)) != null ? _d : false : false;
+  const isChildSelected = hasChildren && ((_d = (_c = item.subCategories) == null ? void 0 : _c.some((s) => s.id === selectedCategoryId)) != null ? _d : false);
   const isActive = isSelected || isChildSelected;
+  const isSecondary = colorScheme === "secondary";
+  const wrapperStyle = isSecondary && isActive ? {
+    backgroundColor: hovered ? SECONDARY_ACTIVE_HOVER_BG : SECONDARY_ACTIVE_BG
+  } : void 0;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
         "border-b border-border last:border-0 transition-colors",
-        isActive && "bg-primary/5"
+        isActive && !isSecondary && "bg-primary/5"
       ),
+      style: wrapperStyle,
       children: [
         /* @__PURE__ */ jsxs(
           "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 : void 0,
             children: [
-              /* @__PURE__ */ jsx(
-                "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",
-                  children: hasChildren ? expanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 14 }) : /* @__PURE__ */ jsx("span", { className: "inline-block size-3.5" })
-                }
-              ),
-              item.icon && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    "mt-0.5 shrink-0",
-                    isActive ? "text-primary" : "text-muted-foreground"
-                  ),
-                  children: item.icon
-                }
-              ),
+              /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0 text-muted-foreground", children: hasChildren ? expanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 14 }) : /* @__PURE__ */ jsx("span", { className: "inline-block size-3.5" }) }),
+              item.icon && /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0 text-muted-foreground", children: item.icon }),
               /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: cn(
-                        "truncate text-sm font-medium",
-                        isActive ? "text-primary" : "text-foreground"
-                      ),
-                      children: item.name
-                    }
-                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [
+                    /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: item.name }),
+                    /* @__PURE__ */ jsx(
+                      "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"
+                        ),
+                        children: /* @__PURE__ */ jsx(ListFilter, { size: 13 })
+                      }
+                    )
+                  ] }),
                   /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
                     /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
                       item.pct.toFixed(0),
@@ -135,7 +163,14 @@ function CategoryRow({
                     /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: formatCurrency(item.amount) })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx(ProgressBar, { pct: item.pct, className: "mt-1.5" })
+                /* @__PURE__ */ jsx(
+                  ProgressBar,
+                  {
+                    pct: item.pct,
+                    className: "mt-1.5",
+                    colorScheme
+                  }
+                )
               ] })
             ]
           }
@@ -145,6 +180,7 @@ function CategoryRow({
           {
             sub,
             isSelected: selectedCategoryId === sub.id,
+            colorScheme,
             onClick: () => onFilterClick(selectedCategoryId === sub.id ? null : sub.id)
           },
           sub.id
@@ -160,11 +196,9 @@ function DashboardExpenseCategories({
   isLoading = false,
   className,
   selectedCategoryId,
-  onCategorySelect
+  onCategorySelect,
+  colorScheme = "primary"
 }) {
-  const handleFilterClick = (id) => {
-    onCategorySelect == null ? void 0 : onCategorySelect(id);
-  };
   return /* @__PURE__ */ jsxs(Card, { className: cn("flex flex-col", className), children: [
     /* @__PURE__ */ jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
       /* @__PURE__ */ jsx(CardTitle, { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: title }),
@@ -175,7 +209,8 @@ function DashboardExpenseCategories({
       {
         item,
         selectedCategoryId,
-        onFilterClick: handleFilterClick
+        colorScheme,
+        onFilterClick: (id) => onCategorySelect == null ? void 0 : onCategorySelect(id)
       },
       item.id
     )) }) })

package/dist/components/ui/dashboard-transactions-table.js

@@ -959,7 +959,7 @@ function CategoryChip({
       {
         asChild: true,
         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",
         children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { type: "button", onClick, children: [
           label,
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.Pencil, { className: "size-2.5 shrink-0 opacity-60" })
@@ -971,50 +971,40 @@ function CategoryChip({
 }
 function TransactionRow({
   tx,
-  isDimmed,
   canEdit,
   onChipClick
 }) {
   var _a;
   const isCredit = tx.amount >= 0;
   const categoryLabel = (_a = tx.editedCategoryName) != null ? _a : tx.category;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    "div",
-    {
-      className: cn(
-        "flex items-start justify-between gap-4 border-b border-border py-3 last:border-0 transition-opacity",
-        isDimmed && "opacity-30"
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xs text-muted-foreground", children: formatDateShort(tx.date) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-0.5 truncate text-sm font-medium text-foreground", children: tx.description }),
-          tx.merchant && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: tx.merchant }),
-          categoryLabel && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mt-1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            CategoryChip,
-            {
-              label: categoryLabel,
-              canEdit,
-              onClick: onChipClick
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-          "span",
-          {
-            className: cn(
-              "shrink-0 text-sm font-semibold",
-              isCredit ? "text-success" : "text-foreground"
-            ),
-            children: [
-              isCredit ? "+" : "",
-              formatCurrency(tx.amount, { showSign: false })
-            ]
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-start justify-between gap-4 border-b border-border py-3 last:border-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xs text-muted-foreground", children: formatDateShort(tx.date) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-0.5 truncate text-sm font-medium text-foreground", children: tx.description }),
+      tx.merchant && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: tx.merchant }),
+      categoryLabel && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mt-1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        CategoryChip,
+        {
+          label: categoryLabel,
+          canEdit,
+          onClick: onChipClick
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "span",
+      {
+        className: cn(
+          "shrink-0 text-sm font-semibold",
+          isCredit ? "text-success" : "text-foreground"
+        ),
+        children: [
+          isCredit ? "+" : "",
+          formatCurrency(tx.amount, { showSign: false })
+        ]
+      }
+    )
+  ] });
 }
 function DashboardTransactionsTable({
   transactions = [],
@@ -1026,7 +1016,9 @@ function DashboardTransactionsTable({
   className,
   selectedCategoryId,
   categories,
-  onCategoryChange
+  onCategoryChange,
+  showHeader = true,
+  showTab = true
 }) {
   const isFiltering = selectedCategoryId != null;
   const canEdit = !!(categories == null ? void 0 : categories.length);
@@ -1039,16 +1031,17 @@ function DashboardTransactionsTable({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Card, { className: cn("flex flex-col", className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(CardHeader, { className: "pb-0", children: [
+      showHeader && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(CardHeader, { className: "pb-0", children: [
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CardTitle, { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mt-2 flex border-b border-border", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "border-b-2 border-foreground pb-1.5 text-xs font-semibold text-foreground", children: "Account Transaction" }) })
+        showTab && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mt-2 flex border-b border-border", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "border-b-2 border-foreground pb-1.5 text-xs font-semibold text-foreground", children: "Account Transaction" }) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(CardContent, { className: "flex flex-1 flex-col px-4 pb-0 pt-0", children: [
-        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-1 items-center justify-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Spinner, { size: "default" }) }) : transactions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "py-8 text-center text-sm text-muted-foreground", children: "No transactions found" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-col", children: transactions.map((tx) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-1 items-center justify-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Spinner, { size: "default" }) }) : transactions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "py-8 text-center text-sm text-muted-foreground", children: "No transactions found" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-col", children: transactions.filter(
+          (tx) => !isFiltering || tx.categoryId === selectedCategoryId
+        ).map((tx) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           TransactionRow,
           {
             tx,
-            isDimmed: isFiltering && tx.categoryId !== selectedCategoryId,
             canEdit,
             onChipClick: () => setEditingTx(tx)
           },