@wealthx/shadcn 1.4.1 → 1.5.0

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

@@ -0,0 +1,262 @@
+import React, { useState } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "./card";
+import { Spinner } from "./spinner";
+import { cn } from "@/lib/utils";
+import { formatCurrency } from "@/lib/format-currency";
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+export interface ExpenseSubCategory {
+  id: string;
+  name: string;
+  /** Absolute dollar amount */
+  amount: number;
+  /** Percentage of parent category 0–100 */
+  pct: number;
+}
+
+export interface ExpenseCategoryItem {
+  id: string;
+  name: string;
+  /** Absolute dollar amount */
+  amount: number;
+  /** Percentage of total budget 0–100 */
+  pct: number;
+  /** Optional lucide-react icon element */
+  icon?: React.ReactNode;
+  subCategories?: ExpenseSubCategory[];
+}
+
+export interface DashboardExpenseCategoriesProps {
+  categories?: ExpenseCategoryItem[];
+  title?: string;
+  subtitle?: string;
+  isLoading?: boolean;
+  className?: string;
+  /** Currently active filter category ID (parent or sub-category) */
+  selectedCategoryId?: string | null;
+  /** Called with the category ID to filter by, or null to clear */
+  onCategorySelect?: (id: string | null) => void;
+}
+
+// ─── Progress bar ─────────────────────────────────────────────────────────────
+
+function ProgressBar({ pct, className }: { pct: number; className?: string }) {
+  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))}%` }}
+        aria-hidden="true"
+      />
+    </div>
+  );
+}
+
+// ─── Sub-category row ─────────────────────────────────────────────────────────
+
+function SubCategoryRow({
+  sub,
+  isSelected,
+  onClick,
+}: {
+  sub: ExpenseSubCategory;
+  isSelected: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={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",
+      )}
+    >
+      <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>
+        <span className="shrink-0 font-medium text-foreground">
+          {formatCurrency(sub.amount)}
+        </span>
+      </div>
+      <ProgressBar pct={sub.pct} />
+    </button>
+  );
+}
+
+// ─── Category row ─────────────────────────────────────────────────────────────
+
+function CategoryRow({
+  item,
+  selectedCategoryId,
+  onFilterClick,
+}: {
+  item: ExpenseCategoryItem;
+  selectedCategoryId?: string | null;
+  onFilterClick: (id: string | null) => void;
+}) {
+  const [expanded, setExpanded] = 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 isActive = isSelected || isChildSelected;
+
+  return (
+    <div
+      className={cn(
+        "border-b border-border last:border-0 transition-colors",
+        isActive && "bg-primary/5",
+      )}
+    >
+      {/* Main row — full click = 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",
+        )}
+        onClick={() => onFilterClick(isSelected ? null : item.id)}
+        aria-pressed={isSelected}
+      >
+        {/* 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"}
+        >
+          {hasChildren ? (
+            expanded ? (
+              <ChevronDown size={14} />
+            ) : (
+              <ChevronRight size={14} />
+            )
+          ) : (
+            <span className="inline-block size-3.5" />
+          )}
+        </span>
+
+        {/* Icon */}
+        {item.icon && (
+          <span
+            className={cn(
+              "mt-0.5 shrink-0",
+              isActive ? "text-primary" : "text-muted-foreground",
+            )}
+          >
+            {item.icon}
+          </span>
+        )}
+
+        {/* Name + progress */}
+        <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 shrink-0 items-center gap-2">
+              <span className="text-xs text-muted-foreground">
+                {item.pct.toFixed(0)}%
+              </span>
+              <span className="text-sm font-semibold text-foreground">
+                {formatCurrency(item.amount)}
+              </span>
+            </div>
+          </div>
+          <ProgressBar pct={item.pct} className="mt-1.5" />
+        </div>
+      </button>
+
+      {/* Sub-categories */}
+      {hasChildren && expanded && (
+        <div className="pb-2">
+          {item.subCategories!.map((sub) => (
+            <SubCategoryRow
+              key={sub.id}
+              sub={sub}
+              isSelected={selectedCategoryId === sub.id}
+              onClick={() =>
+                onFilterClick(selectedCategoryId === sub.id ? null : sub.id)
+              }
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function DashboardExpenseCategories({
+  categories = [],
+  title = "Expenses Categories",
+  subtitle,
+  isLoading = false,
+  className,
+  selectedCategoryId,
+  onCategorySelect,
+}: DashboardExpenseCategoriesProps) {
+  const handleFilterClick = (id: string | null) => {
+    onCategorySelect?.(id);
+  };
+
+  return (
+    <Card className={cn("flex flex-col", className)}>
+      <CardHeader className="pb-2">
+        <div className="flex items-baseline justify-between gap-2">
+          <CardTitle className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            {title}
+          </CardTitle>
+          {subtitle && (
+            <span className="shrink-0 text-xs text-muted-foreground">
+              {subtitle}
+            </span>
+          )}
+        </div>
+      </CardHeader>
+
+      <CardContent className="flex flex-1 flex-col p-0 px-4 pb-2">
+        {isLoading ? (
+          <div className="flex flex-1 items-center justify-center py-8">
+            <Spinner size="md" />
+          </div>
+        ) : categories.length === 0 ? (
+          <p className="py-8 text-center text-sm text-muted-foreground">
+            No expense categories available
+          </p>
+        ) : (
+          <div>
+            {categories.map((item) => (
+              <CategoryRow
+                key={item.id}
+                item={item}
+                selectedCategoryId={selectedCategoryId}
+                onFilterClick={handleFilterClick}
+              />
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,241 @@
+import React, { useState } from "react";
+import { Pencil } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "./card";
+import { Button } from "./button";
+import { Spinner } from "./spinner";
+import { Badge } from "./badge";
+import { Chip } from "./chip";
+import { CategoryEditDialog, type CategoryItem } from "./category-edit-dialog";
+import { cn } from "@/lib/utils";
+import { formatCurrency } from "@/lib/format-currency";
+import { formatDateShort } from "@/lib/format-date";
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+export interface DashboardTransaction {
+  id: string;
+  /** ISO date string — "2024-04-15" or full ISO */
+  date: string;
+  description: string;
+  /** Optional merchant / location sub-label */
+  merchant?: string;
+  /** Signed dollar amount — positive = credit, negative = debit */
+  amount: number;
+  /** Display label for the category chip */
+  category?: string;
+  /** Category ID used for filter matching */
+  categoryId?: string;
+  /** User-overridden category name — displayed instead of `category` when set */
+  editedCategoryName?: string;
+}
+
+export type { CategoryItem };
+
+export interface DashboardTransactionsTableProps {
+  transactions?: DashboardTransaction[];
+  title?: string;
+  /** Show a "Load More" button when more pages are available */
+  hasNextPage?: boolean;
+  isLoadingMore?: boolean;
+  onLoadMore?: () => void;
+  isLoading?: boolean;
+  className?: string;
+  /**
+   * Active category filter ID. Rows whose categoryId does not match are dimmed.
+   * Pass null / undefined to show all rows at full opacity.
+   */
+  selectedCategoryId?: string | null;
+  /**
+   * Category tree for the built-in CategoryEditDialog.
+   * When provided, clicking a category chip opens the dialog inline.
+   */
+  categories?: CategoryItem[];
+  /**
+   * Called after the user saves a category change via the built-in dialog.
+   */
+  onCategoryChange?: (
+    transactionId: string,
+    categoryId: string,
+    applyToFuture: boolean,
+  ) => void;
+}
+
+// ─── Category chip ────────────────────────────────────────────────────────────
+
+function CategoryChip({
+  label,
+  canEdit,
+  onClick,
+}: {
+  label: string;
+  canEdit: boolean;
+  onClick?: () => void;
+}) {
+  if (canEdit) {
+    return (
+      <Badge
+        asChild
+        variant="secondary"
+        className="cursor-pointer transition-colors hover:border-primary/40 hover:bg-primary/10 hover:text-primary"
+      >
+        <button type="button" onClick={onClick}>
+          {label}
+          <Pencil className="size-2.5 shrink-0 opacity-60" />
+        </button>
+      </Badge>
+    );
+  }
+
+  return <Chip variant="secondary">{label}</Chip>;
+}
+
+// ─── Transaction row ──────────────────────────────────────────────────────────
+
+function TransactionRow({
+  tx,
+  isDimmed,
+  canEdit,
+  onChipClick,
+}: {
+  tx: DashboardTransaction;
+  isDimmed: boolean;
+  canEdit: boolean;
+  onChipClick?: () => void;
+}) {
+  const isCredit = tx.amount >= 0;
+  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="min-w-0 flex-1">
+        <p className="text-xs text-muted-foreground">
+          {formatDateShort(tx.date)}
+        </p>
+        <p className="mt-0.5 truncate text-sm font-medium text-foreground">
+          {tx.description}
+        </p>
+        {tx.merchant && (
+          <p className="mt-0.5 truncate text-xs text-muted-foreground">
+            {tx.merchant}
+          </p>
+        )}
+        {categoryLabel && (
+          <div className="mt-1">
+            <CategoryChip
+              label={categoryLabel}
+              canEdit={canEdit}
+              onClick={onChipClick}
+            />
+          </div>
+        )}
+      </div>
+
+      <span
+        className={cn(
+          "shrink-0 text-sm font-semibold",
+          isCredit ? "text-success" : "text-foreground",
+        )}
+      >
+        {isCredit ? "+" : ""}
+        {formatCurrency(tx.amount, { showSign: false })}
+      </span>
+    </div>
+  );
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function DashboardTransactionsTable({
+  transactions = [],
+  title = "Transaction History",
+  hasNextPage = false,
+  isLoadingMore = false,
+  onLoadMore,
+  isLoading = false,
+  className,
+  selectedCategoryId,
+  categories,
+  onCategoryChange,
+}: DashboardTransactionsTableProps) {
+  const isFiltering = selectedCategoryId != null;
+  const canEdit = !!categories?.length;
+
+  const [editingTx, setEditingTx] = useState<DashboardTransaction | null>(null);
+
+  const handleSave = (categoryId: string, applyToFuture: boolean) => {
+    if (editingTx) {
+      onCategoryChange?.(editingTx.id, categoryId, applyToFuture);
+    }
+    setEditingTx(null);
+  };
+
+  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>
+
+        <CardContent className="flex flex-1 flex-col px-4 pb-0 pt-0">
+          {isLoading ? (
+            <div className="flex flex-1 items-center justify-center py-8">
+              <Spinner size="default" />
+            </div>
+          ) : transactions.length === 0 ? (
+            <p className="py-8 text-center text-sm text-muted-foreground">
+              No transactions found
+            </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)}
+                />
+              ))}
+            </div>
+          )}
+
+          {hasNextPage && onLoadMore && (
+            <div className="py-4 text-center">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={onLoadMore}
+                disabled={isLoadingMore}
+              >
+                {isLoadingMore ? "Loading…" : "Load More"}
+              </Button>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {canEdit && (
+        <CategoryEditDialog
+          open={editingTx !== null}
+          onOpenChange={(open) => !open && setEditingTx(null)}
+          transactionDescription={editingTx?.description}
+          currentCategoryId={editingTx?.categoryId}
+          categories={categories!}
+          onSave={handleSave}
+        />
+      )}
+    </>
+  );
+}