@pfm-platform/budgets-ui-mui 0.1.1

package/dist/index.js

@@ -0,0 +1,1090 @@
+import { Card, CardContent, Typography, List, ListItem, Box, Chip, LinearProgress, Grid, Paper, TextField, Alert, Button, CircularProgress, Dialog, DialogTitle, DialogContent, DialogActions, Tooltip, IconButton, DialogContentText, FormControl, InputLabel, Select, MenuItem, useTheme, alpha, Divider } from '@mui/material';
+import { useBudgetProgress, useBudgetSummary } from '@pfm-platform/budgets-feature';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useMemo, useEffect } from 'react';
+import { useCreateBudget, useUpdateBudget, useDeleteBudget } from '@pfm-platform/budgets-data-access';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { Warning, TrendingUp, TrendingDown, ExpandMore, CheckCircle } from '@mui/icons-material';
+
+// src/components/BudgetList.tsx
+function BudgetList({
+  userId,
+  start_date,
+  end_date,
+  title = "Budgets",
+  currencySymbol = "$",
+  maxItems
+}) {
+  const budgets = useBudgetProgress({ userId, start_date, end_date });
+  if (!budgets) {
+    return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: title }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "Loading budgets..." })
+    ] }) });
+  }
+  const displayBudgets = maxItems ? budgets.slice(0, maxItems) : budgets;
+  return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: title }),
+    displayBudgets.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "No budgets found" }) : /* @__PURE__ */ jsx(List, { disablePadding: true, children: displayBudgets.map((budget, index) => /* @__PURE__ */ jsxs(
+      ListItem,
+      {
+        divider: index < displayBudgets.length - 1,
+        sx: { px: 0, display: "flex", flexDirection: "column", alignItems: "flex-start" },
+        children: [
+          /* @__PURE__ */ jsxs(Box, { sx: { width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", mb: 0.5 }, children: [
+            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "body2", fontWeight: "medium", children: budget.name }),
+              /* @__PURE__ */ jsx(
+                Chip,
+                {
+                  label: budget.state,
+                  size: "small",
+                  color: budget.state === "over" ? "error" : budget.state === "risk" ? "warning" : "success",
+                  variant: "outlined"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "body2", fontWeight: "medium", children: [
+              currencySymbol,
+              budget.spent.toFixed(2),
+              " / ",
+              currencySymbol,
+              budget.budgetAmount.toFixed(2)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { sx: { width: "100%" }, children: [
+            /* @__PURE__ */ jsx(
+              LinearProgress,
+              {
+                variant: "determinate",
+                value: Math.min(budget.percentSpent, 100),
+                color: budget.state === "over" ? "error" : budget.state === "risk" ? "warning" : "primary",
+                sx: { height: 8, borderRadius: 1 }
+              }
+            ),
+            /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", children: [
+              budget.percentSpent.toFixed(1),
+              "% \u2022 ",
+              currencySymbol,
+              budget.remaining.toFixed(2),
+              " remaining"
+            ] })
+          ] })
+        ]
+      },
+      budget.id
+    )) })
+  ] }) });
+}
+function BudgetSummary({
+  userId,
+  start_date,
+  end_date,
+  title = "Budget Summary",
+  currencySymbol = "$"
+}) {
+  const summary = useBudgetSummary({ userId, start_date, end_date });
+  if (!summary) {
+    return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: title }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "Loading budget summary..." })
+    ] }) });
+  }
+  if (!summary.hasBudgets) {
+    return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: title }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "No budgets found" })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2 }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h6", children: title }),
+      /* @__PURE__ */ jsx(
+        Chip,
+        {
+          label: summary.state,
+          size: "small",
+          color: summary.state === "over" ? "error" : summary.state === "risk" ? "warning" : "success"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Grid, { size: 6, children: /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", gutterBottom: true, children: "Total Budgets" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", children: summary.totalBudgets })
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid, { size: 6, children: /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", gutterBottom: true, children: "Total Budget" }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "h5", children: [
+          currencySymbol,
+          summary.totalBudget.toFixed(2)
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid, { size: 6, children: /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", gutterBottom: true, children: "Total Spent" }),
+        /* @__PURE__ */ jsxs(
+          Typography,
+          {
+            variant: "h6",
+            color: summary.state === "over" ? "error.main" : "text.primary",
+            children: [
+              currencySymbol,
+              summary.totalSpent.toFixed(2)
+            ]
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid, { size: 6, children: /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", gutterBottom: true, children: "Remaining" }),
+        /* @__PURE__ */ jsxs(
+          Typography,
+          {
+            variant: "h6",
+            color: summary.totalRemaining >= 0 ? "success.main" : "error.main",
+            children: [
+              currencySymbol,
+              summary.totalRemaining.toFixed(2)
+            ]
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid, { size: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", mb: 0.5 }, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "Overall Progress" }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "body2", fontWeight: "medium", children: [
+            summary.percentSpent.toFixed(1),
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          LinearProgress,
+          {
+            variant: "determinate",
+            value: Math.min(summary.percentSpent, 100),
+            color: summary.state === "over" ? "error" : summary.state === "risk" ? "warning" : "primary",
+            sx: { height: 10, borderRadius: 1 }
+          }
+        )
+      ] }) })
+    ] })
+  ] }) });
+}
+function BudgetCreateForm({
+  userId,
+  onSuccess
+}) {
+  const [name, setName] = useState("");
+  const [budgetAmount, setBudgetAmount] = useState("");
+  const [tagNames, setTagNames] = useState("");
+  const [error, setError] = useState(null);
+  const createBudget = useCreateBudget({
+    onSuccess: () => {
+      setName("");
+      setBudgetAmount("");
+      setTagNames("");
+      setError(null);
+      onSuccess?.();
+    },
+    onError: (err) => {
+      setError(err instanceof Error ? err.message : "Failed to create budget");
+    }
+  });
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!name.trim()) {
+      setError("Budget name is required");
+      return;
+    }
+    const amount = parseFloat(budgetAmount);
+    if (isNaN(amount) || amount <= 0) {
+      setError("Budget amount must be a positive number");
+      return;
+    }
+    const tags = tagNames.split(",").map((tag) => tag.trim()).filter((tag) => tag.length > 0);
+    if (tags.length === 0) {
+      setError("At least one tag is required");
+      return;
+    }
+    const data = {
+      name: name.trim(),
+      budget_amount: amount,
+      tag_names: tags,
+      show_on_dashboard: true
+    };
+    createBudget.mutate({ userId, data });
+  };
+  return /* @__PURE__ */ jsxs(Paper, { sx: { p: 3 }, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: "Create Budget" }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        component: "form",
+        onSubmit: handleSubmit,
+        sx: { display: "flex", flexDirection: "column", gap: 2 },
+        children: [
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              label: "Budget Name",
+              value: name,
+              onChange: (e) => {
+                setName(e.target.value);
+                setError(null);
+              },
+              required: true,
+              fullWidth: true,
+              disabled: createBudget.isPending,
+              error: !!error && !name.trim(),
+              helperText: "Enter a name for your budget (e.g., 'Monthly Groceries')",
+              inputProps: {
+                maxLength: 255
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              label: "Budget Amount",
+              type: "number",
+              value: budgetAmount,
+              onChange: (e) => {
+                setBudgetAmount(e.target.value);
+                setError(null);
+              },
+              required: true,
+              fullWidth: true,
+              disabled: createBudget.isPending,
+              error: !!error && (isNaN(parseFloat(budgetAmount)) || parseFloat(budgetAmount) <= 0),
+              helperText: "Enter the total budget amount (e.g., 500.00)",
+              inputProps: {
+                min: 0.01,
+                step: 0.01
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              label: "Tags (comma-separated)",
+              value: tagNames,
+              onChange: (e) => {
+                setTagNames(e.target.value);
+                setError(null);
+              },
+              required: true,
+              fullWidth: true,
+              disabled: createBudget.isPending,
+              error: !!error && tagNames.split(",").filter((t) => t.trim()).length === 0,
+              helperText: "Enter tags separated by commas (e.g., 'groceries, food, essentials')",
+              multiline: true,
+              rows: 2
+            }
+          ),
+          error && /* @__PURE__ */ jsx(Alert, { severity: "error", onClose: () => setError(null), children: error }),
+          /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: 1 }, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "submit",
+              variant: "contained",
+              disabled: createBudget.isPending || !name.trim() || !budgetAmount || !tagNames.trim(),
+              startIcon: createBudget.isPending ? /* @__PURE__ */ jsx(CircularProgress, { size: 20 }) : null,
+              children: createBudget.isPending ? "Creating..." : "Create Budget"
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+function BudgetEditForm({
+  userId,
+  budget,
+  open,
+  onClose
+}) {
+  const [name, setName] = useState(budget.name);
+  const [budgetAmount, setBudgetAmount] = useState(budget.budget_amount.toString());
+  const [tagNames, setTagNames] = useState(budget.tag_names.join(", "));
+  const [error, setError] = useState(null);
+  const updateBudget = useUpdateBudget({
+    onSuccess: () => {
+      setError(null);
+      onClose();
+    },
+    onError: (err) => {
+      setError(err instanceof Error ? err.message : "Failed to update budget");
+    }
+  });
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!name.trim()) {
+      setError("Budget name is required");
+      return;
+    }
+    const amount = parseFloat(budgetAmount);
+    if (isNaN(amount) || amount <= 0) {
+      setError("Budget amount must be a positive number");
+      return;
+    }
+    const tags = tagNames.split(",").map((tag) => tag.trim()).filter((tag) => tag.length > 0);
+    if (tags.length === 0) {
+      setError("At least one tag is required");
+      return;
+    }
+    const data = {
+      id: budget.id,
+      name: name.trim(),
+      budget_amount: amount,
+      tag_names: tags,
+      show_on_dashboard: true
+    };
+    updateBudget.mutate({ userId, budgetId: budget.id, data });
+  };
+  const handleClose = () => {
+    if (!updateBudget.isPending) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onClose: handleClose,
+      maxWidth: "sm",
+      fullWidth: true,
+      "aria-labelledby": "edit-budget-dialog-title",
+      children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ jsx(DialogTitle, { id: "edit-budget-dialog-title", children: "Edit Budget" }),
+        /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 2, pt: 1 }, children: [
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              label: "Budget Name",
+              value: name,
+              onChange: (e) => {
+                setName(e.target.value);
+                setError(null);
+              },
+              required: true,
+              fullWidth: true,
+              disabled: updateBudget.isPending,
+              error: !!error && !name.trim(),
+              helperText: "Enter a name for your budget",
+              inputProps: {
+                maxLength: 255
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              label: "Budget Amount",
+              type: "number",
+              value: budgetAmount,
+              onChange: (e) => {
+                setBudgetAmount(e.target.value);
+                setError(null);
+              },
+              required: true,
+              fullWidth: true,
+              disabled: updateBudget.isPending,
+              error: !!error && (isNaN(parseFloat(budgetAmount)) || parseFloat(budgetAmount) <= 0),
+              helperText: "Enter the total budget amount",
+              inputProps: {
+                min: 0.01,
+                step: 0.01
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              label: "Tags (comma-separated)",
+              value: tagNames,
+              onChange: (e) => {
+                setTagNames(e.target.value);
+                setError(null);
+              },
+              required: true,
+              fullWidth: true,
+              disabled: updateBudget.isPending,
+              error: !!error && tagNames.split(",").filter((t) => t.trim()).length === 0,
+              helperText: "Enter tags separated by commas",
+              multiline: true,
+              rows: 2
+            }
+          ),
+          error && /* @__PURE__ */ jsx(Alert, { severity: "error", onClose: () => setError(null), children: error })
+        ] }) }),
+        /* @__PURE__ */ jsxs(DialogActions, { children: [
+          /* @__PURE__ */ jsx(Button, { onClick: handleClose, disabled: updateBudget.isPending, children: "Cancel" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "submit",
+              variant: "contained",
+              disabled: updateBudget.isPending || !name.trim() || !budgetAmount || !tagNames.trim(),
+              startIcon: updateBudget.isPending ? /* @__PURE__ */ jsx(CircularProgress, { size: 20 }) : null,
+              children: updateBudget.isPending ? "Saving..." : "Save Changes"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function BudgetDeleteButton({
+  userId,
+  budgetId,
+  budgetName
+}) {
+  const [open, setOpen] = useState(false);
+  const deleteBudget = useDeleteBudget({
+    onSuccess: () => {
+      setOpen(false);
+    }
+  });
+  const handleDelete = () => {
+    deleteBudget.mutate({ userId, budgetId });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: "Delete budget", children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: () => setOpen(true),
+        color: "error",
+        size: "small",
+        "aria-label": `delete budget ${budgetName}`,
+        children: /* @__PURE__ */ jsx(DeleteIcon, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        open,
+        onClose: () => !deleteBudget.isPending && setOpen(false),
+        "aria-labelledby": "delete-budget-dialog-title",
+        children: [
+          /* @__PURE__ */ jsx(DialogTitle, { id: "delete-budget-dialog-title", children: "Delete Budget?" }),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(DialogContentText, { children: [
+            'Are you sure you want to delete the budget "',
+            budgetName,
+            '"? This action cannot be undone.'
+          ] }) }),
+          /* @__PURE__ */ jsxs(DialogActions, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: () => setOpen(false),
+                disabled: deleteBudget.isPending,
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: handleDelete,
+                color: "error",
+                variant: "contained",
+                disabled: deleteBudget.isPending,
+                autoFocus: true,
+                children: deleteBudget.isPending ? "Deleting..." : "Delete"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function BudgetProgressCard({
+  budget,
+  currentSpent,
+  currencySymbol = "$",
+  showTrend = false,
+  lastPeriodSpent
+}) {
+  const limit = budget.budget_amount;
+  const remaining = limit - currentSpent;
+  const percentage = currentSpent / limit * 100;
+  const getColor = () => {
+    if (percentage <= 70) return "success";
+    if (percentage <= 90) return "warning";
+    return "error";
+  };
+  const color = getColor();
+  const trend = lastPeriodSpent !== void 0 ? currentSpent - lastPeriodSpent : null;
+  const trendPercentage = trend !== null && lastPeriodSpent !== void 0 && lastPeriodSpent > 0 ? trend / lastPeriodSpent * 100 : null;
+  return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", mb: 2 }, children: [
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: budget.name }),
+        budget.tag_names.length > 0 && /* @__PURE__ */ jsx(
+          Chip,
+          {
+            label: budget.tag_names[0],
+            size: "small",
+            variant: "outlined",
+            sx: { mb: 1 }
+          }
+        )
+      ] }),
+      percentage > 90 && /* @__PURE__ */ jsx(
+        Chip,
+        {
+          icon: /* @__PURE__ */ jsx(Warning, {}),
+          label: "Over Budget",
+          color: "error",
+          size: "small"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { sx: { mb: 2 }, children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", mb: 1 }, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "Progress" }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "body2", fontWeight: "bold", color: `${color}.main`, children: [
+          percentage.toFixed(1),
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        LinearProgress,
+        {
+          variant: "determinate",
+          value: Math.min(percentage, 100),
+          color,
+          sx: { height: 8, borderRadius: 4 }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", mb: 2 }, children: [
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", display: "block", children: "Spent" }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "h6", color: `${color}.main`, children: [
+          currencySymbol,
+          currentSpent.toFixed(2)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { sx: { textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", display: "block", children: "Limit" }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "h6", children: [
+          currencySymbol,
+          limit.toFixed(2)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { sx: { textAlign: "right" }, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", display: "block", children: "Remaining" }),
+        /* @__PURE__ */ jsxs(
+          Typography,
+          {
+            variant: "h6",
+            color: remaining >= 0 ? "success.main" : "error.main",
+            children: [
+              currencySymbol,
+              Math.abs(remaining).toFixed(2)
+            ]
+          }
+        )
+      ] })
+    ] }),
+    showTrend && trend !== null && trendPercentage !== null && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+      trend > 0 ? /* @__PURE__ */ jsx(
+        Chip,
+        {
+          icon: /* @__PURE__ */ jsx(TrendingUp, {}),
+          label: `+${currencySymbol}${Math.abs(trend).toFixed(2)} (+${trendPercentage.toFixed(1)}%)`,
+          color: "error",
+          size: "small",
+          variant: "outlined"
+        }
+      ) : /* @__PURE__ */ jsx(
+        Chip,
+        {
+          icon: /* @__PURE__ */ jsx(TrendingDown, {}),
+          label: `-${currencySymbol}${Math.abs(trend).toFixed(2)} (${trendPercentage.toFixed(1)}%)`,
+          color: "success",
+          size: "small",
+          variant: "outlined"
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "vs last period" })
+    ] })
+  ] }) });
+}
+function BudgetProgressList({
+  budgets,
+  spentByBudget,
+  lastPeriodSpentByBudget,
+  currencySymbol = "$",
+  showTrends = false,
+  enableCategoryFilter = true
+}) {
+  const [statusFilter, setStatusFilter] = useState("all");
+  const [categoryFilter, setCategory] = useState("all");
+  const categories = useMemo(() => {
+    const uniqueCategories = /* @__PURE__ */ new Set();
+    budgets.forEach((budget) => {
+      budget.tag_names.forEach((tag) => {
+        uniqueCategories.add(tag);
+      });
+    });
+    return Array.from(uniqueCategories).sort();
+  }, [budgets]);
+  const filteredBudgets = useMemo(() => {
+    return budgets.filter((budget) => {
+      const spent = spentByBudget.get(budget.id) || 0;
+      const limit = budget.budget_amount;
+      const percentage = spent / limit * 100;
+      if (statusFilter === "on-track" && percentage > 70) return false;
+      if (statusFilter === "warning" && (percentage <= 70 || percentage > 90)) return false;
+      if (statusFilter === "over-budget" && percentage <= 90) return false;
+      if (categoryFilter !== "all" && !budget.tag_names.includes(categoryFilter)) return false;
+      return true;
+    });
+  }, [budgets, spentByBudget, statusFilter, categoryFilter]);
+  const stats = useMemo(() => {
+    const onTrack = budgets.filter((b) => {
+      const spent = spentByBudget.get(b.id) || 0;
+      const percentage = spent / b.budget_amount * 100;
+      return percentage <= 70;
+    }).length;
+    const warning = budgets.filter((b) => {
+      const spent = spentByBudget.get(b.id) || 0;
+      const percentage = spent / b.budget_amount * 100;
+      return percentage > 70 && percentage <= 90;
+    }).length;
+    const overBudget = budgets.filter((b) => {
+      const spent = spentByBudget.get(b.id) || 0;
+      const percentage = spent / b.budget_amount * 100;
+      return percentage > 90;
+    }).length;
+    return { onTrack, warning, overBudget };
+  }, [budgets, spentByBudget]);
+  if (budgets.length === 0) {
+    return /* @__PURE__ */ jsx(Alert, { severity: "info", children: "No budgets found. Create a budget to start tracking your spending." });
+  }
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { mb: 3 }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h5", gutterBottom: true, children: "Budget Progress" }),
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 2, mb: 2, flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
+          /* @__PURE__ */ jsx("strong", { children: stats.onTrack }),
+          " on track"
+        ] }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "warning.main", children: [
+          /* @__PURE__ */ jsx("strong", { children: stats.warning }),
+          " warning"
+        ] }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "error.main", children: [
+          /* @__PURE__ */ jsx("strong", { children: stats.overBudget }),
+          " over budget"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 2, flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsxs(FormControl, { size: "small", sx: { minWidth: 150 }, children: [
+          /* @__PURE__ */ jsx(InputLabel, { children: "Status" }),
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: statusFilter,
+              label: "Status",
+              onChange: (e) => setStatusFilter(e.target.value),
+              children: [
+                /* @__PURE__ */ jsx(MenuItem, { value: "all", children: "All Budgets" }),
+                /* @__PURE__ */ jsx(MenuItem, { value: "on-track", children: "On Track" }),
+                /* @__PURE__ */ jsx(MenuItem, { value: "warning", children: "Warning" }),
+                /* @__PURE__ */ jsx(MenuItem, { value: "over-budget", children: "Over Budget" })
+              ]
+            }
+          )
+        ] }),
+        enableCategoryFilter && categories.length > 0 && /* @__PURE__ */ jsxs(FormControl, { size: "small", sx: { minWidth: 150 }, children: [
+          /* @__PURE__ */ jsx(InputLabel, { children: "Category" }),
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: categoryFilter,
+              label: "Category",
+              onChange: (e) => setCategory(e.target.value),
+              children: [
+                /* @__PURE__ */ jsx(MenuItem, { value: "all", children: "All Categories" }),
+                categories.map((cat) => /* @__PURE__ */ jsx(MenuItem, { value: cat, children: cat }, cat))
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    filteredBudgets.length === 0 ? /* @__PURE__ */ jsx(Alert, { severity: "info", children: "No budgets match the selected filters." }) : /* @__PURE__ */ jsx(Grid, { container: true, spacing: 3, children: filteredBudgets.map((budget) => {
+      const spent = spentByBudget.get(budget.id) || 0;
+      const lastPeriodSpent = lastPeriodSpentByBudget?.get(budget.id);
+      return /* @__PURE__ */ jsx(Grid, { size: { xs: 12, sm: 6, lg: 4 }, children: /* @__PURE__ */ jsx(
+        BudgetProgressCard,
+        {
+          budget,
+          currentSpent: spent,
+          currencySymbol,
+          showTrend: showTrends,
+          lastPeriodSpent
+        }
+      ) }, budget.id);
+    }) })
+  ] });
+}
+var defaultCurrencyFormatter = (value) => {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(value);
+};
+function getInsightStyle(type, theme) {
+  switch (type) {
+    case "overspending":
+      return {
+        icon: /* @__PURE__ */ jsx(Warning, {}),
+        color: theme.palette.error.main,
+        bgColor: alpha(theme.palette.error.main, 0.1)
+      };
+    case "underspending":
+      return {
+        icon: /* @__PURE__ */ jsx(TrendingDown, {}),
+        color: theme.palette.info.main,
+        bgColor: alpha(theme.palette.info.main, 0.1)
+      };
+    case "on-track":
+      return {
+        icon: /* @__PURE__ */ jsx(CheckCircle, {}),
+        color: theme.palette.success.main,
+        bgColor: alpha(theme.palette.success.main, 0.1)
+      };
+    case "suggest-tag":
+      return {
+        icon: /* @__PURE__ */ jsx(TrendingUp, {}),
+        color: theme.palette.warning.main,
+        bgColor: alpha(theme.palette.warning.main, 0.1)
+      };
+    default:
+      return {
+        icon: /* @__PURE__ */ jsx(CheckCircle, {}),
+        color: theme.palette.text.secondary,
+        bgColor: alpha(theme.palette.text.secondary, 0.1)
+      };
+  }
+}
+function BudgetInsightsCard({
+  insights,
+  overallSummary,
+  initialVisibleCount = 2,
+  onInsightAction,
+  onInsightDismiss,
+  currencyFormatter = defaultCurrencyFormatter
+}) {
+  const theme = useTheme();
+  const [showAll, setShowAll] = useState(false);
+  const visibleInsights = showAll ? insights : insights.slice(0, initialVisibleCount);
+  const hasMore = insights.length > initialVisibleCount;
+  const overallStyle = overallSummary.state === "over" ? { color: theme.palette.error.main, icon: /* @__PURE__ */ jsx(Warning, {}) } : overallSummary.state === "under" ? { color: theme.palette.success.main, icon: /* @__PURE__ */ jsx(CheckCircle, {}) } : { color: theme.palette.info.main, icon: /* @__PURE__ */ jsx(CheckCircle, {}) };
+  return /* @__PURE__ */ jsx(Card, { "data-testid": "budget-insights-card", children: /* @__PURE__ */ jsxs(CardContent, { children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: "Budget Insights" }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 2,
+          p: 2,
+          mb: 2,
+          bgcolor: alpha(overallStyle.color, 0.1),
+          borderRadius: 1
+        },
+        children: [
+          /* @__PURE__ */ jsx(Box, { sx: { color: overallStyle.color }, children: overallStyle.icon }),
+          /* @__PURE__ */ jsxs(Box, { sx: { flex: 1 }, children: [
+            overallSummary.totalAmount > 0 && /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+              "You've been ",
+              /* @__PURE__ */ jsx("strong", { children: "under budget" }),
+              " by",
+              " ",
+              /* @__PURE__ */ jsx("strong", { children: currencyFormatter(overallSummary.totalAmount) }),
+              " ",
+              "on all budgets over the last",
+              " ",
+              /* @__PURE__ */ jsxs("strong", { children: [
+                overallSummary.months,
+                " months"
+              ] }),
+              "."
+            ] }),
+            overallSummary.totalAmount < 0 && /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+              "You have ",
+              /* @__PURE__ */ jsx("strong", { children: "overspent" }),
+              " by",
+              " ",
+              /* @__PURE__ */ jsx("strong", { children: currencyFormatter(Math.abs(overallSummary.totalAmount)) }),
+              " ",
+              "on all budgets over the last",
+              " ",
+              /* @__PURE__ */ jsxs("strong", { children: [
+                overallSummary.months,
+                " months"
+              ] }),
+              "."
+            ] }),
+            overallSummary.totalAmount === 0 && /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+              "You are ",
+              /* @__PURE__ */ jsx("strong", { children: "on track" }),
+              " with all budgets over the last",
+              " ",
+              /* @__PURE__ */ jsxs("strong", { children: [
+                overallSummary.months,
+                " months"
+              ] }),
+              "."
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider, { sx: { my: 2 } }),
+    insights.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { textAlign: "center", py: 2 }, children: "No insights available. Keep tracking your budgets!" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      visibleInsights.map((insight) => {
+        const style = getInsightStyle(insight.type, theme);
+        return /* @__PURE__ */ jsxs(
+          Box,
+          {
+            "data-testid": `budget-insight-${insight.id}`,
+            sx: {
+              p: 2,
+              mb: 1,
+              bgcolor: style.bgColor,
+              borderRadius: 1,
+              borderLeft: `4px solid ${style.color}`
+            },
+            children: [
+              /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "flex-start", gap: 1.5 }, children: [
+                /* @__PURE__ */ jsx(Box, { sx: { color: style.color, mt: 0.5 }, children: style.icon }),
+                /* @__PURE__ */ jsxs(Box, { sx: { flex: 1 }, children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: insight.budgetName }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: insight.recommendation }),
+                  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1, flexWrap: "wrap" }, children: [
+                    /* @__PURE__ */ jsx(
+                      Chip,
+                      {
+                        label: `${insight.occurrences} times`,
+                        size: "small",
+                        variant: "outlined"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Chip,
+                      {
+                        label: `${insight.monthsAnalyzed} months`,
+                        size: "small",
+                        variant: "outlined"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Chip,
+                      {
+                        label: `Avg: ${currencyFormatter(Math.abs(insight.averageAmount))}`,
+                        size: "small",
+                        variant: "outlined"
+                      }
+                    )
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1, mt: 2, justifyContent: "flex-end" }, children: [
+                onInsightDismiss && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "small",
+                    onClick: () => onInsightDismiss(insight),
+                    children: "Dismiss"
+                  }
+                ),
+                onInsightAction && insight.type !== "suggest-tag" && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "small",
+                    variant: "contained",
+                    onClick: () => onInsightAction(insight),
+                    children: "Adjust Budget"
+                  }
+                ),
+                onInsightAction && insight.type === "suggest-tag" && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "small",
+                    variant: "contained",
+                    onClick: () => onInsightAction(insight),
+                    children: "Add Tag"
+                  }
+                )
+              ] })
+            ]
+          },
+          insight.id
+        );
+      }),
+      hasMore && /* @__PURE__ */ jsx(Box, { sx: { textAlign: "center", mt: 2 }, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          endIcon: /* @__PURE__ */ jsx(
+            ExpandMore,
+            {
+              sx: {
+                transform: showAll ? "rotate(180deg)" : "rotate(0)",
+                transition: "transform 0.3s"
+              }
+            }
+          ),
+          onClick: () => setShowAll(!showAll),
+          children: showAll ? "Show Less" : `Show ${insights.length - initialVisibleCount} More`
+        }
+      ) })
+    ] })
+  ] }) });
+}
+var defaultCurrencyFormatter2 = (value) => {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(value);
+};
+function BudgetInsightDialog({
+  insight,
+  open,
+  onClose,
+  onSave,
+  saving = false,
+  currencyFormatter = defaultCurrencyFormatter2
+}) {
+  const [amount, setAmount] = useState("");
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (open && insight) {
+      const suggestedAmount = Math.abs(insight.averageAmount);
+      setAmount(suggestedAmount.toFixed(2));
+      setError(null);
+    }
+  }, [open, insight]);
+  const handleAmountChange = (value) => {
+    setAmount(value);
+    const numValue = parseFloat(value);
+    if (isNaN(numValue)) {
+      setError("Please enter a valid number");
+    } else if (numValue <= 0) {
+      setError("Amount must be greater than zero");
+    } else if (numValue > 1e6) {
+      setError("Amount is too large");
+    } else {
+      setError(null);
+    }
+  };
+  const handleSave = async () => {
+    if (!insight || error || !amount) return;
+    const numValue = parseFloat(amount);
+    if (isNaN(numValue) || numValue <= 0) return;
+    await onSave(insight, numValue);
+    onClose();
+  };
+  const handleCancel = () => {
+    setAmount("");
+    setError(null);
+    onClose();
+  };
+  if (!insight) {
+    return null;
+  }
+  const isOverspending = insight.type === "overspending";
+  const actionLabel = isOverspending ? "Increase Budget By" : "Decrease Budget By";
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open,
+      onClose: handleCancel,
+      maxWidth: "sm",
+      fullWidth: true,
+      "data-testid": "budget-insight-dialog",
+      children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: insight.budgetName }),
+        /* @__PURE__ */ jsxs(DialogContent, { children: [
+          isOverspending && /* @__PURE__ */ jsxs(DialogContentText, { sx: { mb: 3 }, children: [
+            "You've ",
+            /* @__PURE__ */ jsx("strong", { children: "exceeded" }),
+            " this budget",
+            " ",
+            /* @__PURE__ */ jsx("strong", { children: insight.occurrences }),
+            " times in the last",
+            " ",
+            /* @__PURE__ */ jsx("strong", { children: insight.monthsAnalyzed }),
+            " months by an average of",
+            " ",
+            /* @__PURE__ */ jsx("strong", { children: currencyFormatter(Math.abs(insight.averageAmount)) }),
+            " a month."
+          ] }),
+          !isOverspending && /* @__PURE__ */ jsxs(DialogContentText, { sx: { mb: 3 }, children: [
+            "You've been ",
+            /* @__PURE__ */ jsx("strong", { children: "under" }),
+            " this budget",
+            " ",
+            /* @__PURE__ */ jsx("strong", { children: insight.occurrences }),
+            " times in the last",
+            " ",
+            /* @__PURE__ */ jsx("strong", { children: insight.monthsAnalyzed }),
+            " months by an average of",
+            " ",
+            /* @__PURE__ */ jsx("strong", { children: currencyFormatter(Math.abs(insight.averageAmount)) }),
+            " a month."
+          ] }),
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              autoFocus: true,
+              fullWidth: true,
+              required: true,
+              type: "number",
+              label: actionLabel,
+              value: amount,
+              onChange: (e) => handleAmountChange(e.target.value),
+              error: !!error,
+              helperText: error || "Suggested amount based on your spending pattern",
+              disabled: saving,
+              inputProps: {
+                min: 0,
+                step: 0.01,
+                "aria-label": actionLabel
+              },
+              InputLabelProps: {
+                shrink: true
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(DialogActions, { children: [
+          /* @__PURE__ */ jsx(Button, { onClick: handleCancel, disabled: saving, children: "Cancel" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: handleSave,
+              variant: "contained",
+              disabled: saving || !!error || !amount,
+              children: saving ? "Saving..." : "Save"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export { BudgetCreateForm, BudgetDeleteButton, BudgetEditForm, BudgetInsightDialog, BudgetInsightsCard, BudgetList, BudgetProgressCard, BudgetProgressList, BudgetSummary };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map