@wealthx/shadcn 1.5.43 → 1.5.44

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

@@ -725,7 +725,7 @@ function CategoryRow({
         isSelected && "bg-primary/10"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ItemIcon, { icon, active: isSelected }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ItemIcon, { icon, active: false }),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "flex-1", children: name }),
         isSelected && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react6.Check, { className: "size-3.5 shrink-0 text-primary" })
       ]
@@ -951,6 +951,7 @@ var import_jsx_runtime12 = require("react/jsx-runtime");
 function CategoryChip({
   label,
   canEdit,
+  colorScheme = "primary",
   onClick
 }) {
   if (canEdit) {
@@ -959,7 +960,10 @@ function CategoryChip({
       {
         asChild: true,
         variant: "secondary",
-        className: "cursor-pointer transition-colors hover:bg-muted",
+        className: cn(
+          "cursor-pointer transition-colors",
+          colorScheme === "secondary" ? "hover:bg-brand-secondary/10 hover:text-[var(--brand-secondary)]" : "hover:border-primary/40 hover:bg-primary/10 hover:text-primary"
+        ),
         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,40 +975,52 @@ function CategoryChip({
 }
 function TransactionRow({
   tx,
+  isDimmed,
   canEdit,
+  colorScheme = "primary",
   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: "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 })
-        ]
-      }
-    )
-  ] });
+  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-sm text-muted-foreground", children: formatDateShort(tx.date) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-0.5 truncate text-base font-medium text-foreground", children: tx.description }),
+          tx.merchant && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-0.5 truncate text-sm 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,
+              colorScheme,
+              onClick: onChipClick
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "span",
+          {
+            className: cn(
+              "shrink-0 text-base font-semibold",
+              isCredit ? "text-success" : "text-foreground"
+            ),
+            children: [
+              isCredit ? "+" : "",
+              formatCurrency(tx.amount, { showSign: false })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 function DashboardTransactionsTable({
   transactions = [],
@@ -1018,7 +1034,8 @@ function DashboardTransactionsTable({
   categories,
   onCategoryChange,
   showHeader = true,
-  showTab = true
+  showTab = true,
+  colorScheme = "primary"
 }) {
   const isFiltering = selectedCategoryId != null;
   const canEdit = !!(categories == null ? void 0 : categories.length);
@@ -1036,13 +1053,13 @@ function DashboardTransactionsTable({
         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.filter(
-          (tx) => !isFiltering || tx.categoryId === selectedCategoryId
-        ).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.map((tx) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           TransactionRow,
           {
             tx,
+            isDimmed: isFiltering && tx.categoryId !== selectedCategoryId,
             canEdit,
+            colorScheme,
             onChipClick: () => setEditingTx(tx)
           },
           tx.id

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

@@ -1,6 +1,6 @@
 import {
   CategoryEditDialog
-} from "../../chunk-3G6JUYRE.mjs";
+} from "../../chunk-7RMXM5O6.mjs";
 import {
   Chip
 } from "../../chunk-MPA2HV5U.mjs";
@@ -44,6 +44,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function CategoryChip({
   label,
   canEdit,
+  colorScheme = "primary",
   onClick
 }) {
   if (canEdit) {
@@ -52,7 +53,10 @@ function CategoryChip({
       {
         asChild: true,
         variant: "secondary",
-        className: "cursor-pointer transition-colors hover:bg-muted",
+        className: cn(
+          "cursor-pointer transition-colors",
+          colorScheme === "secondary" ? "hover:bg-brand-secondary/10 hover:text-[var(--brand-secondary)]" : "hover:border-primary/40 hover:bg-primary/10 hover:text-primary"
+        ),
         children: /* @__PURE__ */ jsxs("button", { type: "button", onClick, children: [
           label,
           /* @__PURE__ */ jsx(Pencil, { className: "size-2.5 shrink-0 opacity-60" })
@@ -64,40 +68,52 @@ function CategoryChip({
 }
 function TransactionRow({
   tx,
+  isDimmed,
   canEdit,
+  colorScheme = "primary",
   onChipClick
 }) {
   var _a;
   const isCredit = tx.amount >= 0;
   const categoryLabel = (_a = tx.editedCategoryName) != null ? _a : tx.category;
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 border-b border-border py-3 last:border-0", children: [
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: formatDateShort(tx.date) }),
-      /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-sm font-medium text-foreground", children: tx.description }),
-      tx.merchant && /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: tx.merchant }),
-      categoryLabel && /* @__PURE__ */ jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsx(
-        CategoryChip,
-        {
-          label: categoryLabel,
-          canEdit,
-          onClick: onChipClick
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      "span",
-      {
-        className: cn(
-          "shrink-0 text-sm font-semibold",
-          isCredit ? "text-success" : "text-foreground"
-        ),
-        children: [
-          isCredit ? "+" : "",
-          formatCurrency(tx.amount, { showSign: false })
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ 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__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: formatDateShort(tx.date) }),
+          /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-base font-medium text-foreground", children: tx.description }),
+          tx.merchant && /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-sm text-muted-foreground", children: tx.merchant }),
+          categoryLabel && /* @__PURE__ */ jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsx(
+            CategoryChip,
+            {
+              label: categoryLabel,
+              canEdit,
+              colorScheme,
+              onClick: onChipClick
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "shrink-0 text-base font-semibold",
+              isCredit ? "text-success" : "text-foreground"
+            ),
+            children: [
+              isCredit ? "+" : "",
+              formatCurrency(tx.amount, { showSign: false })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 function DashboardTransactionsTable({
   transactions = [],
@@ -111,7 +127,8 @@ function DashboardTransactionsTable({
   categories,
   onCategoryChange,
   showHeader = true,
-  showTab = true
+  showTab = true,
+  colorScheme = "primary"
 }) {
   const isFiltering = selectedCategoryId != null;
   const canEdit = !!(categories == null ? void 0 : categories.length);
@@ -129,13 +146,13 @@ function DashboardTransactionsTable({
         showTab && /* @__PURE__ */ jsx("div", { className: "mt-2 flex border-b border-border", children: /* @__PURE__ */ jsx("span", { className: "border-b-2 border-foreground pb-1.5 text-xs font-semibold text-foreground", children: "Account Transaction" }) })
       ] }),
       /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-1 flex-col px-4 pb-0 pt-0", children: [
-        isLoading ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center py-8", children: /* @__PURE__ */ jsx(Spinner, { size: "default" }) }) : transactions.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-8 text-center text-sm text-muted-foreground", children: "No transactions found" }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: transactions.filter(
-          (tx) => !isFiltering || tx.categoryId === selectedCategoryId
-        ).map((tx) => /* @__PURE__ */ jsx(
+        isLoading ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center py-8", children: /* @__PURE__ */ jsx(Spinner, { size: "default" }) }) : transactions.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-8 text-center text-sm text-muted-foreground", children: "No transactions found" }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: transactions.map((tx) => /* @__PURE__ */ jsx(
           TransactionRow,
           {
             tx,
+            isDimmed: isFiltering && tx.categoryId !== selectedCategoryId,
             canEdit,
+            colorScheme,
             onChipClick: () => setEditingTx(tx)
           },
           tx.id