@pfm-platform/budgets-ui-mui 0.1.1

package/dist/index.d.ts

@@ -0,0 +1,303 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Budget } from '@pfm-platform/shared';
+
+interface BudgetListProps {
+    userId: string;
+    /** Date range start */
+    start_date?: string;
+    /** Date range end */
+    end_date?: string;
+    /** Custom title for the list */
+    title?: string;
+    /** Currency symbol to display */
+    currencySymbol?: string;
+    /** Maximum number of budgets to display */
+    maxItems?: number;
+}
+/**
+ * BudgetList component displays budgets with progress bars.
+ * Shows budget name, amounts, and visual progress indicator.
+ */
+declare function BudgetList({ userId, start_date, end_date, title, currencySymbol, maxItems, }: BudgetListProps): react_jsx_runtime.JSX.Element;
+
+interface BudgetSummaryProps {
+    userId: string;
+    /** Date range start */
+    start_date?: string;
+    /** Date range end */
+    end_date?: string;
+    /** Custom title for the summary */
+    title?: string;
+    /** Currency symbol to display */
+    currencySymbol?: string;
+}
+/**
+ * BudgetSummary component displays aggregate budget statistics.
+ * Shows total budgets, budget amount, spent, remaining, and overall state.
+ */
+declare function BudgetSummary({ userId, start_date, end_date, title, currencySymbol, }: BudgetSummaryProps): react_jsx_runtime.JSX.Element;
+
+interface BudgetCreateFormProps {
+    userId: string;
+    onSuccess?: () => void;
+}
+declare function BudgetCreateForm({ userId, onSuccess, }: BudgetCreateFormProps): react_jsx_runtime.JSX.Element;
+
+interface BudgetEditFormProps {
+    userId: string;
+    budget: Budget;
+    open: boolean;
+    onClose: () => void;
+}
+declare function BudgetEditForm({ userId, budget, open, onClose, }: BudgetEditFormProps): react_jsx_runtime.JSX.Element;
+
+interface BudgetDeleteButtonProps {
+    userId: string;
+    budgetId: number;
+    budgetName: string;
+}
+declare function BudgetDeleteButton({ userId, budgetId, budgetName, }: BudgetDeleteButtonProps): react_jsx_runtime.JSX.Element;
+
+interface BudgetProgressCardProps {
+    budget: Budget;
+    /** Current spent amount */
+    currentSpent: number;
+    /** Currency symbol to display */
+    currencySymbol?: string;
+    /** Show trend indicator */
+    showTrend?: boolean;
+    /** Comparison to last period (optional) */
+    lastPeriodSpent?: number;
+}
+/**
+ * BudgetProgressCard component displays budget progress with visual indicators.
+ * Shows spent/limit/remaining with color-coded zones (green/yellow/red).
+ *
+ * Color zones:
+ * - Green: 0-70% of limit
+ * - Yellow: 70-90% of limit
+ * - Red: >90% of limit
+ *
+ * @example
+ * ```tsx
+ * <BudgetProgressCard
+ *   budget={budget}
+ *   currentSpent={450.75}
+ *   currencySymbol="$"
+ *   showTrend
+ *   lastPeriodSpent={380.50}
+ * />
+ * ```
+ */
+declare function BudgetProgressCard({ budget, currentSpent, currencySymbol, showTrend, lastPeriodSpent, }: BudgetProgressCardProps): react_jsx_runtime.JSX.Element;
+
+interface BudgetProgressListProps {
+    budgets: Budget[];
+    /** Map of budget ID to current spent amount */
+    spentByBudget: Map<number, number>;
+    /** Map of budget ID to last period spent amount (optional) */
+    lastPeriodSpentByBudget?: Map<number, number>;
+    /** Currency symbol to display */
+    currencySymbol?: string;
+    /** Show trend indicators */
+    showTrends?: boolean;
+    /** Enable category filtering */
+    enableCategoryFilter?: boolean;
+}
+/**
+ * BudgetProgressList component displays all budgets with progress indicators.
+ * Supports filtering by status (on-track, warning, over-budget).
+ *
+ * @example
+ * ```tsx
+ * const spentMap = new Map([
+ *   [1, 450.75],
+ *   [2, 1200.50],
+ * ]);
+ *
+ * <BudgetProgressList
+ *   budgets={budgets}
+ *   spentByBudget={spentMap}
+ *   currencySymbol="$"
+ *   showTrends
+ *   enableCategoryFilter
+ * />
+ * ```
+ */
+declare function BudgetProgressList({ budgets, spentByBudget, lastPeriodSpentByBudget, currencySymbol, showTrends, enableCategoryFilter, }: BudgetProgressListProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * BudgetInsightsCard
+ *
+ * Budget insights and recommendations component.
+ * Migrated from legacy Budgets/Insights.js with modern React patterns.
+ *
+ * Features:
+ * - Budget performance analysis
+ * - Overspending/underspending identification
+ * - Historical trend analysis
+ * - Actionable recommendations
+ * - Visual indicators (icons, colors)
+ * - Expandable insights list
+ *
+ * Migration Notes:
+ * - Legacy: MobX store with complex insight loading
+ * - Modern: Controlled component with callback props
+ * - Removed: MobX observables, store injection
+ * - Added: TypeScript types, modern hooks, Material-UI v7
+ */
+type InsightType = 'overspending' | 'underspending' | 'on-track' | 'suggest-tag';
+interface BudgetInsight {
+    /**
+     * Unique insight identifier
+     */
+    id: string;
+    /**
+     * Type of insight
+     */
+    type: InsightType;
+    /**
+     * Budget identifier
+     */
+    budgetId: string;
+    /**
+     * Budget name
+     */
+    budgetName: string;
+    /**
+     * Average amount over/under budget
+     */
+    averageAmount: number;
+    /**
+     * Number of months analyzed
+     */
+    monthsAnalyzed: number;
+    /**
+     * Number of times over/under budget
+     */
+    occurrences: number;
+    /**
+     * Recommendation message
+     */
+    recommendation: string;
+    /**
+     * Optional tag name (for suggest-tag type)
+     */
+    tagName?: string;
+}
+interface BudgetOverallSummary {
+    /**
+     * Total amount over/under all budgets
+     */
+    totalAmount: number;
+    /**
+     * Number of months in analysis
+     */
+    months: number;
+    /**
+     * Budget state: 'over' | 'under' | 'on-track'
+     */
+    state: 'over' | 'under' | 'on-track';
+}
+interface BudgetInsightsCardProps {
+    /**
+     * List of budget insights
+     */
+    insights: BudgetInsight[];
+    /**
+     * Overall budget summary
+     */
+    overallSummary: BudgetOverallSummary;
+    /**
+     * Whether insights are loading
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Maximum insights to show initially
+     * @default 2
+     */
+    initialVisibleCount?: number;
+    /**
+     * Callback when insight action is clicked
+     */
+    onInsightAction?: (insight: BudgetInsight) => void;
+    /**
+     * Callback when insight is dismissed
+     */
+    onInsightDismiss?: (insight: BudgetInsight) => void;
+    /**
+     * Currency formatter
+     */
+    currencyFormatter?: (value: number) => string;
+}
+/**
+ * Budget insights and recommendations card
+ *
+ * Displays budget performance analysis with actionable insights.
+ * Shows overall summary and individual budget insights with recommendations.
+ *
+ * @example
+ * ```tsx
+ * <BudgetInsightsCard
+ *   insights={budgetInsights}
+ *   overallSummary={{
+ *     totalAmount: -150,
+ *     months: 6,
+ *     state: 'over',
+ *   }}
+ *   onInsightAction={(insight) => handleAction(insight)}
+ *   onInsightDismiss={(insight) => dismissInsight(insight)}
+ * />
+ * ```
+ */
+declare function BudgetInsightsCard({ insights, overallSummary, initialVisibleCount, onInsightAction, onInsightDismiss, currencyFormatter, }: BudgetInsightsCardProps): react_jsx_runtime.JSX.Element;
+
+interface BudgetInsightDialogProps {
+    /**
+     * Insight to display in dialog
+     */
+    insight: BudgetInsight | null;
+    /**
+     * Whether dialog is open
+     */
+    open: boolean;
+    /**
+     * Callback when dialog is closed
+     */
+    onClose: () => void;
+    /**
+     * Callback when save is clicked
+     */
+    onSave: (insight: BudgetInsight, adjustmentAmount: number) => Promise<void>;
+    /**
+     * Whether save operation is in progress
+     * @default false
+     */
+    saving?: boolean;
+    /**
+     * Currency formatter
+     */
+    currencyFormatter?: (value: number) => string;
+}
+/**
+ * Budget insight adjustment dialog
+ *
+ * Allows users to adjust budget amounts based on spending insights.
+ * Provides context about overspending/underspending patterns.
+ *
+ * @example
+ * ```tsx
+ * <BudgetInsightDialog
+ *   insight={selectedInsight}
+ *   open={dialogOpen}
+ *   onClose={() => setDialogOpen(false)}
+ *   onSave={async (insight, amount) => {
+ *     await updateBudget(insight.budgetId, amount);
+ *   }}
+ * />
+ * ```
+ */
+declare function BudgetInsightDialog({ insight, open, onClose, onSave, saving, currencyFormatter, }: BudgetInsightDialogProps): react_jsx_runtime.JSX.Element | null;
+
+export { BudgetCreateForm, type BudgetCreateFormProps, BudgetDeleteButton, type BudgetDeleteButtonProps, BudgetEditForm, type BudgetEditFormProps, type BudgetInsight, BudgetInsightDialog, type BudgetInsightDialogProps, BudgetInsightsCard, type BudgetInsightsCardProps, BudgetList, type BudgetListProps, type BudgetOverallSummary, BudgetProgressCard, type BudgetProgressCardProps, BudgetProgressList, type BudgetProgressListProps, BudgetSummary, type BudgetSummaryProps, type InsightType };