@pfm-platform/accounts-ui-mui 0.1.1

package/dist/index.d.cts

@@ -0,0 +1,330 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Account, NetWorthAccountCreate } from '@pfm-platform/shared';
+
+interface AccountListProps {
+    userId: string;
+    /** Filter accounts by status */
+    filter?: 'all' | 'opened' | 'closed';
+    /** Group accounts by type */
+    groupByType?: boolean;
+    /** Custom title for the list */
+    title?: string;
+    /** Maximum number of accounts to display */
+    maxItems?: number;
+}
+/**
+ * AccountList component displays user accounts with optional filtering and grouping.
+ * Supports filtering by opened/closed status and grouping by account type.
+ */
+declare function AccountList({ userId, filter, groupByType, title, maxItems, }: AccountListProps): react_jsx_runtime.JSX.Element;
+
+interface AccountSummaryProps {
+    userId: string;
+    /** Custom title for the summary */
+    title?: string;
+    /** Currency symbol to display */
+    currencySymbol?: string;
+}
+/**
+ * AccountSummary component displays account statistics.
+ * Shows total count, opened/closed counts, and total balance.
+ */
+declare function AccountSummary({ userId, title, currencySymbol, }: AccountSummaryProps): react_jsx_runtime.JSX.Element;
+
+interface AccountCreateFormProps {
+    userId: string;
+    onSuccess?: () => void;
+}
+declare function AccountCreateForm({ userId, onSuccess }: AccountCreateFormProps): react_jsx_runtime.JSX.Element;
+
+interface AccountEditFormProps {
+    account: Account;
+    open: boolean;
+    onClose: () => void;
+    userId: string;
+}
+declare function AccountEditForm({ account, open, onClose, userId }: AccountEditFormProps): react_jsx_runtime.JSX.Element;
+
+interface AccountDeleteButtonProps {
+    accountId: number;
+    userId: string;
+    accountName: string;
+}
+declare function AccountDeleteButton({ accountId, userId, accountName, }: AccountDeleteButtonProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * AccountBalanceChart
+ *
+ * Account balance history line chart component.
+ * Migrated from legacy Accounts/LineChart.js (D3) to MUI X Charts.
+ *
+ * Features:
+ * - Time-based balance tracking
+ * - Multiple account support (multi-line)
+ * - Currency-formatted Y-axis
+ * - Hover tooltips with date and balance
+ * - Grid lines and axis labels
+ * - Responsive sizing
+ * - Material-UI v7 theming
+ *
+ * Migration Notes:
+ * - Legacy: D3-based SVG rendering (d3-scale, d3-axis, d3-shape)
+ * - Modern: MUI X Charts LineChart with declarative API
+ * - Removed: Complex D3 setup, manual SVG manipulation
+ * - Added: TypeScript types, responsive sizing, theme integration
+ */
+interface AccountBalanceDataPoint {
+    /**
+     * Date for this data point
+     */
+    date: Date;
+    /**
+     * Balance amount
+     */
+    balance: number;
+}
+interface AccountBalanceSeries {
+    /**
+     * Account identifier
+     */
+    accountId: string;
+    /**
+     * Account name for legend
+     */
+    accountName: string;
+    /**
+     * Data points for this account
+     */
+    data: AccountBalanceDataPoint[];
+    /**
+     * Optional custom color
+     */
+    color?: string;
+}
+interface AccountBalanceChartProps {
+    /**
+     * Account balance series to display
+     */
+    series: AccountBalanceSeries[];
+    /**
+     * Chart width
+     * @default '100%'
+     */
+    width?: number | string;
+    /**
+     * Chart height
+     * @default 150
+     */
+    height?: number;
+    /**
+     * Whether to show legend for multiple accounts
+     * @default true for multiple series
+     */
+    showLegend?: boolean;
+    /**
+     * Currency formatter
+     */
+    currencyFormatter?: (value: number) => string;
+    /**
+     * Callback when a data point is clicked
+     */
+    onPointClick?: (accountId: string, dataPoint: AccountBalanceDataPoint) => void;
+}
+/**
+ * Account balance history line chart
+ *
+ * Displays balance trends over time with support for multiple accounts.
+ * Migrated from D3-based LineChart to MUI X Charts for better integration.
+ *
+ * @example
+ * ```tsx
+ * <AccountBalanceChart
+ *   series={[
+ *     {
+ *       accountId: '1',
+ *       accountName: 'Checking',
+ *       data: [
+ *         { date: new Date('2024-01-01'), balance: 1000 },
+ *         { date: new Date('2024-02-01'), balance: 1500 },
+ *       ],
+ *     },
+ *   ]}
+ *   height={200}
+ *   showLegend={true}
+ * />
+ * ```
+ */
+declare function AccountBalanceChart({ series, width, height, showLegend, currencyFormatter, onPointClick, }: AccountBalanceChartProps): react_jsx_runtime.JSX.Element;
+
+interface NetWorthSummaryProps {
+    userId: string;
+    /** Custom title for the summary */
+    title?: string;
+    /** Currency symbol to display */
+    currencySymbol?: string;
+}
+/**
+ * NetWorthSummary component displays net worth statistics.
+ * Shows net worth, change, assets/debts totals, and account counts.
+ */
+declare function NetWorthSummary({ userId, title, currencySymbol, }: NetWorthSummaryProps): react_jsx_runtime.JSX.Element;
+
+interface NetWorthHistoryChartProps {
+    userId: string;
+    /** Custom title for the chart */
+    title?: string;
+    /** Height of the chart in pixels */
+    height?: number;
+    /** Currency symbol to display */
+    currencySymbol?: string;
+}
+/**
+ * NetWorthHistoryChart component displays net worth trends over time.
+ * Shows a line chart with total net worth, assets, and debts history.
+ */
+declare function NetWorthHistoryChart({ userId, title, height, currencySymbol, }: NetWorthHistoryChartProps): react_jsx_runtime.JSX.Element;
+
+interface NetWorthAccountFormProps {
+    userId: string;
+    /** If provided, form is in edit mode */
+    accountId?: number;
+    /** Initial values for edit mode */
+    initialValues?: Partial<NetWorthAccountCreate>;
+    onSuccess?: () => void;
+    onCancel?: () => void;
+}
+declare function NetWorthAccountForm({ userId, accountId, initialValues, onSuccess, onCancel, }: NetWorthAccountFormProps): react_jsx_runtime.JSX.Element;
+
+interface EnhancedNetWorthAccountData extends NetWorthAccountCreate {
+    category?: string;
+    notes?: string;
+    institution?: string;
+    lastUpdated?: string;
+}
+interface NetWorthAccountEnhancedFormProps {
+    userId: string;
+    /** If provided, form is in edit mode */
+    accountId?: number;
+    /** Initial values for edit mode */
+    initialValues?: Partial<EnhancedNetWorthAccountData>;
+    onSuccess?: () => void;
+    onCancel?: () => void;
+    /** Show multi-step wizard */
+    wizardMode?: boolean;
+    /** Currency symbol */
+    currencySymbol?: string;
+}
+/**
+ * NetWorthAccountEnhancedForm component with validation, categorization, and optional wizard mode.
+ * Features account categorization, notes, institution tracking, and step-by-step guidance.
+ *
+ * @example
+ * ```tsx
+ * <NetWorthAccountEnhancedForm
+ *   userId={userId}
+ *   wizardMode
+ *   currencySymbol="$"
+ *   onSuccess={() => console.log('Account created!')}
+ * />
+ * ```
+ */
+declare function NetWorthAccountEnhancedForm({ userId, accountId, initialValues, onSuccess, onCancel, wizardMode, currencySymbol, }: NetWorthAccountEnhancedFormProps): react_jsx_runtime.JSX.Element;
+
+interface NetWorthAccountDeleteButtonProps {
+    userId: string;
+    accountId: number;
+    accountName?: string;
+    /** Render as icon button instead of text button */
+    iconButton?: boolean;
+    onSuccess?: () => void;
+}
+/**
+ * NetWorthAccountDeleteButton component for deleting manual net worth accounts.
+ * Shows confirmation dialog before deletion.
+ */
+declare function NetWorthAccountDeleteButton({ userId, accountId, accountName, iconButton, onSuccess, }: NetWorthAccountDeleteButtonProps): react_jsx_runtime.JSX.Element;
+
+interface NetWorthAccountListProps {
+    userId: string;
+    /** Currency symbol to display */
+    currencySymbol?: string;
+    /** Enable bulk operations */
+    enableBulkOperations?: boolean;
+}
+/**
+ * NetWorthAccountList component displays manual net worth accounts.
+ * Supports viewing, editing, deleting, and bulk operations.
+ *
+ * @example
+ * ```tsx
+ * <NetWorthAccountList
+ *   userId="user123"
+ *   currencySymbol="$"
+ *   enableBulkOperations
+ * />
+ * ```
+ */
+declare function NetWorthAccountList({ userId, currencySymbol, enableBulkOperations, }: NetWorthAccountListProps): react_jsx_runtime.JSX.Element;
+
+interface NetWorthDashboardProps {
+    userId: string;
+    /** Custom title for the dashboard */
+    title?: string;
+    /** Currency symbol to display */
+    currencySymbol?: string;
+    /** Show chart by default */
+    showChart?: boolean;
+    /** Show account list by default */
+    showAccountList?: boolean;
+}
+/**
+ * NetWorthDashboard component integrates summary, chart, and account list.
+ * Provides comprehensive net worth visualization and management.
+ *
+ * @example
+ * ```tsx
+ * <NetWorthDashboard
+ *   userId="user123"
+ *   title="My Net Worth"
+ *   currencySymbol="$"
+ * />
+ * ```
+ */
+declare function NetWorthDashboard({ userId, title, currencySymbol, showChart, showAccountList, }: NetWorthDashboardProps): react_jsx_runtime.JSX.Element;
+
+interface NetWorthAccount {
+    id: number;
+    user_id: string;
+    name: string;
+    balance: string;
+    account_type: 'asset' | 'debt';
+}
+interface NetWorthAccountReconciliationDialogProps {
+    /** Account to reconcile */
+    account: NetWorthAccount | null;
+    /** Whether dialog is open */
+    open: boolean;
+    /** Callback when dialog should close */
+    onClose: () => void;
+    /** Callback on successful reconciliation */
+    onSuccess?: () => void;
+    /** Currency symbol */
+    currencySymbol?: string;
+}
+/**
+ * NetWorthAccountReconciliationDialog component for reconciling account balances.
+ * Allows users to update account balance based on actual bank/account statement.
+ *
+ * @example
+ * ```tsx
+ * <NetWorthAccountReconciliationDialog
+ *   account={selectedAccount}
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   currencySymbol="$"
+ * />
+ * ```
+ */
+declare function NetWorthAccountReconciliationDialog({ account, open, onClose, onSuccess, currencySymbol, }: NetWorthAccountReconciliationDialogProps): react_jsx_runtime.JSX.Element | null;
+
+export { AccountBalanceChart, type AccountBalanceChartProps, type AccountBalanceDataPoint, type AccountBalanceSeries, AccountCreateForm, AccountDeleteButton, AccountEditForm, AccountList, type AccountListProps, AccountSummary, type AccountSummaryProps, type NetWorthAccount, NetWorthAccountDeleteButton, type NetWorthAccountDeleteButtonProps, NetWorthAccountEnhancedForm, NetWorthAccountForm, NetWorthAccountList, type NetWorthAccountListProps, NetWorthAccountReconciliationDialog, type NetWorthAccountReconciliationDialogProps, NetWorthDashboard, type NetWorthDashboardProps, NetWorthHistoryChart, type NetWorthHistoryChartProps, NetWorthSummary, type NetWorthSummaryProps };

package/dist/index.d.ts

@@ -0,0 +1,330 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Account, NetWorthAccountCreate } from '@pfm-platform/shared';
+
+interface AccountListProps {
+    userId: string;
+    /** Filter accounts by status */
+    filter?: 'all' | 'opened' | 'closed';
+    /** Group accounts by type */
+    groupByType?: boolean;
+    /** Custom title for the list */
+    title?: string;
+    /** Maximum number of accounts to display */
+    maxItems?: number;
+}
+/**
+ * AccountList component displays user accounts with optional filtering and grouping.
+ * Supports filtering by opened/closed status and grouping by account type.
+ */
+declare function AccountList({ userId, filter, groupByType, title, maxItems, }: AccountListProps): react_jsx_runtime.JSX.Element;
+
+interface AccountSummaryProps {
+    userId: string;
+    /** Custom title for the summary */
+    title?: string;
+    /** Currency symbol to display */
+    currencySymbol?: string;
+}
+/**
+ * AccountSummary component displays account statistics.
+ * Shows total count, opened/closed counts, and total balance.
+ */
+declare function AccountSummary({ userId, title, currencySymbol, }: AccountSummaryProps): react_jsx_runtime.JSX.Element;
+
+interface AccountCreateFormProps {
+    userId: string;
+    onSuccess?: () => void;
+}
+declare function AccountCreateForm({ userId, onSuccess }: AccountCreateFormProps): react_jsx_runtime.JSX.Element;
+
+interface AccountEditFormProps {
+    account: Account;
+    open: boolean;
+    onClose: () => void;
+    userId: string;
+}
+declare function AccountEditForm({ account, open, onClose, userId }: AccountEditFormProps): react_jsx_runtime.JSX.Element;
+
+interface AccountDeleteButtonProps {
+    accountId: number;
+    userId: string;
+    accountName: string;
+}
+declare function AccountDeleteButton({ accountId, userId, accountName, }: AccountDeleteButtonProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * AccountBalanceChart
+ *
+ * Account balance history line chart component.
+ * Migrated from legacy Accounts/LineChart.js (D3) to MUI X Charts.
+ *
+ * Features:
+ * - Time-based balance tracking
+ * - Multiple account support (multi-line)
+ * - Currency-formatted Y-axis
+ * - Hover tooltips with date and balance
+ * - Grid lines and axis labels
+ * - Responsive sizing
+ * - Material-UI v7 theming
+ *
+ * Migration Notes:
+ * - Legacy: D3-based SVG rendering (d3-scale, d3-axis, d3-shape)
+ * - Modern: MUI X Charts LineChart with declarative API
+ * - Removed: Complex D3 setup, manual SVG manipulation
+ * - Added: TypeScript types, responsive sizing, theme integration
+ */
+interface AccountBalanceDataPoint {
+    /**
+     * Date for this data point
+     */
+    date: Date;
+    /**
+     * Balance amount
+     */
+    balance: number;
+}
+interface AccountBalanceSeries {
+    /**
+     * Account identifier
+     */
+    accountId: string;
+    /**
+     * Account name for legend
+     */
+    accountName: string;
+    /**
+     * Data points for this account
+     */
+    data: AccountBalanceDataPoint[];
+    /**
+     * Optional custom color
+     */
+    color?: string;
+}
+interface AccountBalanceChartProps {
+    /**
+     * Account balance series to display
+     */
+    series: AccountBalanceSeries[];
+    /**
+     * Chart width
+     * @default '100%'
+     */
+    width?: number | string;
+    /**
+     * Chart height
+     * @default 150
+     */
+    height?: number;
+    /**
+     * Whether to show legend for multiple accounts
+     * @default true for multiple series
+     */
+    showLegend?: boolean;
+    /**
+     * Currency formatter
+     */
+    currencyFormatter?: (value: number) => string;
+    /**
+     * Callback when a data point is clicked
+     */
+    onPointClick?: (accountId: string, dataPoint: AccountBalanceDataPoint) => void;
+}
+/**
+ * Account balance history line chart
+ *
+ * Displays balance trends over time with support for multiple accounts.
+ * Migrated from D3-based LineChart to MUI X Charts for better integration.
+ *
+ * @example
+ * ```tsx
+ * <AccountBalanceChart
+ *   series={[
+ *     {
+ *       accountId: '1',
+ *       accountName: 'Checking',
+ *       data: [
+ *         { date: new Date('2024-01-01'), balance: 1000 },
+ *         { date: new Date('2024-02-01'), balance: 1500 },
+ *       ],
+ *     },
+ *   ]}
+ *   height={200}
+ *   showLegend={true}
+ * />
+ * ```
+ */
+declare function AccountBalanceChart({ series, width, height, showLegend, currencyFormatter, onPointClick, }: AccountBalanceChartProps): react_jsx_runtime.JSX.Element;
+
+interface NetWorthSummaryProps {
+    userId: string;
+    /** Custom title for the summary */
+    title?: string;
+    /** Currency symbol to display */
+    currencySymbol?: string;
+}
+/**
+ * NetWorthSummary component displays net worth statistics.
+ * Shows net worth, change, assets/debts totals, and account counts.
+ */
+declare function NetWorthSummary({ userId, title, currencySymbol, }: NetWorthSummaryProps): react_jsx_runtime.JSX.Element;
+
+interface NetWorthHistoryChartProps {
+    userId: string;
+    /** Custom title for the chart */
+    title?: string;
+    /** Height of the chart in pixels */
+    height?: number;
+    /** Currency symbol to display */
+    currencySymbol?: string;
+}
+/**
+ * NetWorthHistoryChart component displays net worth trends over time.
+ * Shows a line chart with total net worth, assets, and debts history.
+ */
+declare function NetWorthHistoryChart({ userId, title, height, currencySymbol, }: NetWorthHistoryChartProps): react_jsx_runtime.JSX.Element;
+
+interface NetWorthAccountFormProps {
+    userId: string;
+    /** If provided, form is in edit mode */
+    accountId?: number;
+    /** Initial values for edit mode */
+    initialValues?: Partial<NetWorthAccountCreate>;
+    onSuccess?: () => void;
+    onCancel?: () => void;
+}
+declare function NetWorthAccountForm({ userId, accountId, initialValues, onSuccess, onCancel, }: NetWorthAccountFormProps): react_jsx_runtime.JSX.Element;
+
+interface EnhancedNetWorthAccountData extends NetWorthAccountCreate {
+    category?: string;
+    notes?: string;
+    institution?: string;
+    lastUpdated?: string;
+}
+interface NetWorthAccountEnhancedFormProps {
+    userId: string;
+    /** If provided, form is in edit mode */
+    accountId?: number;
+    /** Initial values for edit mode */
+    initialValues?: Partial<EnhancedNetWorthAccountData>;
+    onSuccess?: () => void;
+    onCancel?: () => void;
+    /** Show multi-step wizard */
+    wizardMode?: boolean;
+    /** Currency symbol */
+    currencySymbol?: string;
+}
+/**
+ * NetWorthAccountEnhancedForm component with validation, categorization, and optional wizard mode.
+ * Features account categorization, notes, institution tracking, and step-by-step guidance.
+ *
+ * @example
+ * ```tsx
+ * <NetWorthAccountEnhancedForm
+ *   userId={userId}
+ *   wizardMode
+ *   currencySymbol="$"
+ *   onSuccess={() => console.log('Account created!')}
+ * />
+ * ```
+ */
+declare function NetWorthAccountEnhancedForm({ userId, accountId, initialValues, onSuccess, onCancel, wizardMode, currencySymbol, }: NetWorthAccountEnhancedFormProps): react_jsx_runtime.JSX.Element;
+
+interface NetWorthAccountDeleteButtonProps {
+    userId: string;
+    accountId: number;
+    accountName?: string;
+    /** Render as icon button instead of text button */
+    iconButton?: boolean;
+    onSuccess?: () => void;
+}
+/**
+ * NetWorthAccountDeleteButton component for deleting manual net worth accounts.
+ * Shows confirmation dialog before deletion.
+ */
+declare function NetWorthAccountDeleteButton({ userId, accountId, accountName, iconButton, onSuccess, }: NetWorthAccountDeleteButtonProps): react_jsx_runtime.JSX.Element;
+
+interface NetWorthAccountListProps {
+    userId: string;
+    /** Currency symbol to display */
+    currencySymbol?: string;
+    /** Enable bulk operations */
+    enableBulkOperations?: boolean;
+}
+/**
+ * NetWorthAccountList component displays manual net worth accounts.
+ * Supports viewing, editing, deleting, and bulk operations.
+ *
+ * @example
+ * ```tsx
+ * <NetWorthAccountList
+ *   userId="user123"
+ *   currencySymbol="$"
+ *   enableBulkOperations
+ * />
+ * ```
+ */
+declare function NetWorthAccountList({ userId, currencySymbol, enableBulkOperations, }: NetWorthAccountListProps): react_jsx_runtime.JSX.Element;
+
+interface NetWorthDashboardProps {
+    userId: string;
+    /** Custom title for the dashboard */
+    title?: string;
+    /** Currency symbol to display */
+    currencySymbol?: string;
+    /** Show chart by default */
+    showChart?: boolean;
+    /** Show account list by default */
+    showAccountList?: boolean;
+}
+/**
+ * NetWorthDashboard component integrates summary, chart, and account list.
+ * Provides comprehensive net worth visualization and management.
+ *
+ * @example
+ * ```tsx
+ * <NetWorthDashboard
+ *   userId="user123"
+ *   title="My Net Worth"
+ *   currencySymbol="$"
+ * />
+ * ```
+ */
+declare function NetWorthDashboard({ userId, title, currencySymbol, showChart, showAccountList, }: NetWorthDashboardProps): react_jsx_runtime.JSX.Element;
+
+interface NetWorthAccount {
+    id: number;
+    user_id: string;
+    name: string;
+    balance: string;
+    account_type: 'asset' | 'debt';
+}
+interface NetWorthAccountReconciliationDialogProps {
+    /** Account to reconcile */
+    account: NetWorthAccount | null;
+    /** Whether dialog is open */
+    open: boolean;
+    /** Callback when dialog should close */
+    onClose: () => void;
+    /** Callback on successful reconciliation */
+    onSuccess?: () => void;
+    /** Currency symbol */
+    currencySymbol?: string;
+}
+/**
+ * NetWorthAccountReconciliationDialog component for reconciling account balances.
+ * Allows users to update account balance based on actual bank/account statement.
+ *
+ * @example
+ * ```tsx
+ * <NetWorthAccountReconciliationDialog
+ *   account={selectedAccount}
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   currencySymbol="$"
+ * />
+ * ```
+ */
+declare function NetWorthAccountReconciliationDialog({ account, open, onClose, onSuccess, currencySymbol, }: NetWorthAccountReconciliationDialogProps): react_jsx_runtime.JSX.Element | null;
+
+export { AccountBalanceChart, type AccountBalanceChartProps, type AccountBalanceDataPoint, type AccountBalanceSeries, AccountCreateForm, AccountDeleteButton, AccountEditForm, AccountList, type AccountListProps, AccountSummary, type AccountSummaryProps, type NetWorthAccount, NetWorthAccountDeleteButton, type NetWorthAccountDeleteButtonProps, NetWorthAccountEnhancedForm, NetWorthAccountForm, NetWorthAccountList, type NetWorthAccountListProps, NetWorthAccountReconciliationDialog, type NetWorthAccountReconciliationDialogProps, NetWorthDashboard, type NetWorthDashboardProps, NetWorthHistoryChart, type NetWorthHistoryChartProps, NetWorthSummary, type NetWorthSummaryProps };