@pfm-platform/budgets-ui-mui 0.1.1 → 0.2.1

package/dist/index.cjs

@@ -15,13 +15,13 @@ var DeleteIcon__default = /*#__PURE__*/_interopDefault(DeleteIcon);
 // src/components/BudgetList.tsx
 function BudgetList({
   userId,
-  start_date,
-  end_date,
+  month,
+  year,
   title = "Budgets",
   currencySymbol = "$",
   maxItems
 }) {
-  const budgets = budgetsFeature.useBudgetProgress({ userId, start_date, end_date });
+  const budgets = budgetsFeature.useBudgetProgress({ userId, month, year });
   if (!budgets) {
     return /* @__PURE__ */ jsxRuntime.jsx(material.Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", gutterBottom: true, children: title }),
@@ -84,12 +84,12 @@ function BudgetList({
 }
 function BudgetSummary({
   userId,
-  start_date,
-  end_date,
+  month,
+  year,
   title = "Budget Summary",
   currencySymbol = "$"
 }) {
-  const summary = budgetsFeature.useBudgetSummary({ userId, start_date, end_date });
+  const summary = budgetsFeature.useBudgetSummary({ userId, month, year });
   if (!summary) {
     return /* @__PURE__ */ jsxRuntime.jsx(material.Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", gutterBottom: true, children: title }),
@@ -211,13 +211,16 @@ function BudgetCreateForm({
       setError("At least one tag is required");
       return;
     }
+    const now = /* @__PURE__ */ new Date();
     const data = {
+      user_id: userId,
       name: name.trim(),
+      month: now.getMonth() + 1,
+      year: now.getFullYear(),
       budget_amount: amount,
-      tag_names: tags,
       show_on_dashboard: true
     };
-    createBudget.mutate({ userId, data });
+    createBudget.mutate({ userId, data, tagNames: tags });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(material.Paper, { sx: { p: 3 }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", gutterBottom: true, children: "Create Budget" }),
@@ -310,7 +313,7 @@ function BudgetEditForm({
 }) {
   const [name, setName] = react.useState(budget.name);
   const [budgetAmount, setBudgetAmount] = react.useState(budget.budget_amount.toString());
-  const [tagNames, setTagNames] = react.useState(budget.tag_names.join(", "));
+  const [tagNames, setTagNames] = react.useState(budget.budget_tags.map((bt) => bt.tag_name).join(", "));
   const [error, setError] = react.useState(null);
   const updateBudget = budgetsDataAccess.useUpdateBudget({
     onSuccess: () => {
@@ -341,10 +344,9 @@ function BudgetEditForm({
       id: budget.id,
       name: name.trim(),
       budget_amount: amount,
-      tag_names: tags,
       show_on_dashboard: true
     };
-    updateBudget.mutate({ userId, budgetId: budget.id, data });
+    updateBudget.mutate({ userId, budgetId: budget.id, data, tagNames: tags });
   };
   const handleClose = () => {
     if (!updateBudget.isPending) {
@@ -525,10 +527,10 @@ function BudgetProgressCard({
     /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", mb: 2 }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", gutterBottom: true, children: budget.name }),
-        budget.tag_names.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        budget.budget_tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
           material.Chip,
           {
-            label: budget.tag_names[0],
+            label: budget.budget_tags[0].tag_name,
             size: "small",
             variant: "outlined",
             sx: { mb: 1 }
@@ -630,8 +632,8 @@ function BudgetProgressList({
   const categories = react.useMemo(() => {
     const uniqueCategories = /* @__PURE__ */ new Set();
     budgets.forEach((budget) => {
-      budget.tag_names.forEach((tag) => {
-        uniqueCategories.add(tag);
+      budget.budget_tags.forEach((bt) => {
+        uniqueCategories.add(bt.tag_name);
       });
     });
     return Array.from(uniqueCategories).sort();
@@ -644,7 +646,7 @@ function BudgetProgressList({
       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;
+      if (categoryFilter !== "all" && !budget.budget_tags.some((bt) => bt.tag_name === categoryFilter)) return false;
       return true;
     });
   }, [budgets, spentByBudget, statusFilter, categoryFilter]);
@@ -1090,6 +1092,668 @@ function BudgetInsightDialog({
     }
   );
 }
+function getStateConfig(state, theme) {
+  switch (state) {
+    case "under":
+      return {
+        color: theme.palette.success.main,
+        bgColor: material.alpha(theme.palette.success.main, 0.1),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.TrendingDown, {}),
+        label: "Under Budget",
+        chipColor: "success"
+      };
+    case "on-track":
+      return {
+        color: theme.palette.info.main,
+        bgColor: material.alpha(theme.palette.info.main, 0.1),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.CheckCircle, {}),
+        label: "On Track",
+        chipColor: "info"
+      };
+    case "over":
+      return {
+        color: theme.palette.warning.main,
+        bgColor: material.alpha(theme.palette.warning.main, 0.1),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Warning, {}),
+        label: "Over Budget",
+        chipColor: "warning"
+      };
+    case "critical":
+      return {
+        color: theme.palette.error.main,
+        bgColor: material.alpha(theme.palette.error.main, 0.1),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Error, {}),
+        label: "Critical",
+        chipColor: "error"
+      };
+  }
+}
+function getSizeConfig(size) {
+  switch (size) {
+    case "small":
+      return {
+        iconSize: 16,
+        fontSize: "0.75rem",
+        spacing: 0.5
+      };
+    case "medium":
+      return {
+        iconSize: 20,
+        fontSize: "0.875rem",
+        spacing: 1
+      };
+    case "large":
+      return {
+        iconSize: 24,
+        fontSize: "1rem",
+        spacing: 1.5
+      };
+  }
+}
+function BudgetStateIndicator({
+  state,
+  percentage,
+  variant = "chip",
+  size = "medium",
+  showPercentage = true,
+  showLabel = true,
+  customLabel
+}) {
+  const theme = material.useTheme();
+  const config = getStateConfig(state, theme);
+  const sizeConfig = getSizeConfig(size);
+  const label = customLabel || config.label;
+  const displayText = showPercentage ? `${label} (${percentage.toFixed(0)}%)` : label;
+  if (variant === "chip") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      material.Chip,
+      {
+        "data-testid": "budget-state-indicator",
+        icon: config.icon,
+        label: displayText,
+        color: config.chipColor,
+        size: size === "large" ? "medium" : "small",
+        sx: {
+          fontSize: sizeConfig.fontSize,
+          fontWeight: "medium"
+        }
+      }
+    );
+  }
+  if (variant === "inline") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      material.Box,
+      {
+        "data-testid": "budget-state-indicator",
+        sx: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: sizeConfig.spacing,
+          color: config.color
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Box,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                fontSize: sizeConfig.iconSize
+              },
+              children: config.icon
+            }
+          ),
+          showLabel && /* @__PURE__ */ jsxRuntime.jsx(
+            material.Typography,
+            {
+              component: "span",
+              sx: {
+                fontSize: sizeConfig.fontSize,
+                fontWeight: "medium"
+              },
+              children: displayText
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Box,
+    {
+      "data-testid": "budget-state-indicator",
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: sizeConfig.spacing * 2,
+        p: sizeConfig.spacing * 2,
+        bgcolor: config.bgColor,
+        borderRadius: 1,
+        borderLeft: `4px solid ${config.color}`
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Box,
+          {
+            sx: {
+              color: config.color,
+              display: "flex",
+              alignItems: "center",
+              fontSize: sizeConfig.iconSize * 1.5
+            },
+            children: config.icon
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { flex: 1 }, children: [
+          showLabel && /* @__PURE__ */ jsxRuntime.jsx(
+            material.Typography,
+            {
+              variant: "subtitle2",
+              sx: {
+                color: config.color,
+                fontWeight: "bold",
+                fontSize: sizeConfig.fontSize
+              },
+              children: label
+            }
+          ),
+          showPercentage && /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Typography,
+            {
+              variant: "body2",
+              color: "text.secondary",
+              sx: { fontSize: sizeConfig.fontSize },
+              children: [
+                percentage.toFixed(1),
+                "% of budget used"
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var defaultCurrencyFormatter3 = (value) => {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(value);
+};
+function getTrendConfig(trend, theme) {
+  switch (trend) {
+    case "increasing":
+      return {
+        color: theme.palette.warning.main,
+        bgColor: material.alpha(theme.palette.warning.main, 0.1),
+        label: "Increasing"
+      };
+    case "decreasing":
+      return {
+        color: theme.palette.success.main,
+        bgColor: material.alpha(theme.palette.success.main, 0.1),
+        label: "Decreasing"
+      };
+    case "stable":
+      return {
+        color: theme.palette.info.main,
+        bgColor: material.alpha(theme.palette.info.main, 0.1),
+        label: "Stable"
+      };
+  }
+}
+function BudgetTagInsight({
+  insights,
+  loading = false,
+  onCreateBudget,
+  onViewDetails,
+  onDismiss,
+  currencyFormatter = defaultCurrencyFormatter3,
+  maxVisible = 5
+}) {
+  const theme = material.useTheme();
+  const visibleInsights = insights.slice(0, maxVisible);
+  const unbudgetedCount = insights.filter((i) => !i.isBudgeted).length;
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(material.Card, { "data-testid": "budget-tag-insight", children: /* @__PURE__ */ jsxRuntime.jsx(material.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", sx: { textAlign: "center", py: 2 }, children: "Loading tag insights..." }) }) });
+  }
+  if (insights.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(material.Card, { "data-testid": "budget-tag-insight", children: /* @__PURE__ */ jsxRuntime.jsx(material.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { textAlign: "center", py: 3 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Info, { sx: { fontSize: 48, color: "text.disabled", mb: 1 } }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: "No tag insights available yet. Start tracking your expenses!" })
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Card, { "data-testid": "budget-tag-insight", children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 2 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.LocalOffer, { color: "primary" }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", children: "Tag Spending Insights" }),
+      unbudgetedCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        material.Chip,
+        {
+          label: `${unbudgetedCount} unbudgeted`,
+          size: "small",
+          color: "warning",
+          sx: { ml: "auto" }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: "Discover spending patterns and create budgets for frequently used tags." }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Divider, { sx: { mb: 2 } }),
+    visibleInsights.map((insight) => {
+      const trendConfig = getTrendConfig(insight.trend, theme);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        material.Box,
+        {
+          "data-testid": `tag-insight-${insight.id}`,
+          sx: {
+            p: 2,
+            mb: 2,
+            bgcolor: insight.isBudgeted ? material.alpha(theme.palette.success.main, 0.05) : material.alpha(theme.palette.warning.main, 0.05),
+            borderRadius: 1,
+            borderLeft: insight.isBudgeted ? `4px solid ${theme.palette.success.main}` : `4px solid ${theme.palette.warning.main}`
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.LocalOffer, { fontSize: "small", color: "action" }),
+              /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle2", sx: { fontWeight: "bold" }, children: insight.tagName }),
+              insight.isBudgeted && /* @__PURE__ */ jsxRuntime.jsx(material.Chip, { label: "Budgeted", size: "small", color: "success", variant: "outlined" }),
+              !insight.isBudgeted && /* @__PURE__ */ jsxRuntime.jsx(material.Chip, { label: "No Budget", size: "small", color: "warning", variant: "outlined" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mb: 2 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", sx: { mb: 0.5 }, children: insight.recommendation }),
+              /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1, mt: 1 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", color: "primary", children: currencyFormatter(insight.averageMonthlySpend) }),
+                /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "text.secondary", children: "avg/month" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", gap: 1, flexWrap: "wrap", mb: 2 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                material.Chip,
+                {
+                  label: `${insight.transactionCount} transactions`,
+                  size: "small",
+                  variant: "outlined"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                material.Chip,
+                {
+                  label: `${insight.monthsAnalyzed} months`,
+                  size: "small",
+                  variant: "outlined"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                material.Chip,
+                {
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.TrendingUp, {}),
+                  label: `${trendConfig.label} ${Math.abs(insight.trendPercentage).toFixed(0)}%`,
+                  size: "small",
+                  sx: {
+                    bgcolor: trendConfig.bgColor,
+                    color: trendConfig.color,
+                    borderColor: trendConfig.color
+                  },
+                  variant: "outlined"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", gap: 1, justifyContent: "flex-end" }, children: [
+              onDismiss && /* @__PURE__ */ jsxRuntime.jsx(material.Button, { size: "small", onClick: () => onDismiss(insight), children: "Dismiss" }),
+              onViewDetails && /* @__PURE__ */ jsxRuntime.jsx(material.Button, { size: "small", onClick: () => onViewDetails(insight), children: "View Details" }),
+              !insight.isBudgeted && onCreateBudget && /* @__PURE__ */ jsxRuntime.jsxs(
+                material.Button,
+                {
+                  size: "small",
+                  variant: "contained",
+                  startIcon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Add, {}),
+                  onClick: () => onCreateBudget(insight),
+                  children: [
+                    "Create Budget",
+                    insight.suggestedBudget && ` (${currencyFormatter(insight.suggestedBudget)})`
+                  ]
+                }
+              )
+            ] })
+          ]
+        },
+        insight.id
+      );
+    }),
+    insights.length > maxVisible && /* @__PURE__ */ jsxRuntime.jsxs(
+      material.Typography,
+      {
+        variant: "caption",
+        color: "text.secondary",
+        sx: { textAlign: "center", display: "block", mt: 1 },
+        children: [
+          "Showing ",
+          maxVisible,
+          " of ",
+          insights.length,
+          " insights"
+        ]
+      }
+    )
+  ] }) });
+}
+var defaultCurrencyFormatter4 = (value) => {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(Math.abs(value));
+};
+function getOverviewMessage(data, currencyFormatter) {
+  const { totalBudgets, budgetsOver, budgetsOnTrack, budgetsUnder, totalOverUnder, unbudgetedTagsCount } = data;
+  if (totalBudgets === 0) {
+    return {
+      type: "info",
+      title: "No Budgets Yet",
+      message: "Create your first budget to start tracking your spending and reach your financial goals.",
+      defaultActionLabel: "Create Budget"
+    };
+  }
+  if (budgetsOver === totalBudgets && totalOverUnder < 0) {
+    return {
+      type: "error",
+      title: "All Budgets Over Limit",
+      message: `You've exceeded all ${totalBudgets} budget${totalBudgets > 1 ? "s" : ""} by ${currencyFormatter(totalOverUnder)} total. Review your spending and adjust budgets as needed.`,
+      defaultActionLabel: "Review Budgets"
+    };
+  }
+  if (budgetsOver > 0) {
+    return {
+      type: "warning",
+      title: `${budgetsOver} Budget${budgetsOver > 1 ? "s" : ""} Over Limit`,
+      message: `You're over budget on ${budgetsOver} of ${totalBudgets} budgets by ${currencyFormatter(totalOverUnder)} total. Consider adjusting these budgets.`,
+      defaultActionLabel: "View Details"
+    };
+  }
+  if (budgetsOnTrack === totalBudgets) {
+    const unbudgetedMsg = unbudgetedTagsCount && unbudgetedTagsCount > 0 ? ` You have ${unbudgetedTagsCount} unbudgeted tag${unbudgetedTagsCount > 1 ? "s" : ""} worth reviewing.` : "";
+    return {
+      type: "success",
+      title: "All Budgets On Track",
+      message: `Great job! All ${totalBudgets} budget${totalBudgets > 1 ? "s are" : " is"} on track.${unbudgetedMsg}`,
+      defaultActionLabel: unbudgetedTagsCount && unbudgetedTagsCount > 0 ? "Review Tags" : "View Budgets"
+    };
+  }
+  if (budgetsUnder > 0 && budgetsOver === 0) {
+    return {
+      type: "success",
+      title: "Budgets Under Control",
+      message: `You're under budget by ${currencyFormatter(totalOverUnder)} total across ${budgetsUnder} budget${budgetsUnder > 1 ? "s" : ""}. Keep up the great work!`,
+      defaultActionLabel: "View Details"
+    };
+  }
+  return {
+    type: "info",
+    title: "Budgets Status",
+    message: `${budgetsOnTrack} on track, ${budgetsUnder} under budget. You're managing your budgets well overall.`,
+    defaultActionLabel: "View All Budgets"
+  };
+}
+function BudgetOverviewMessage({
+  data,
+  onAction,
+  actionLabel,
+  currencyFormatter = defaultCurrencyFormatter4,
+  hideAction = false
+}) {
+  const overview = getOverviewMessage(data, currencyFormatter);
+  const severityMap = {
+    success: "success",
+    warning: "warning",
+    error: "error",
+    info: "info"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Alert,
+    {
+      "data-testid": "budget-overview-message",
+      severity: severityMap[overview.type],
+      sx: {
+        "& .MuiAlert-message": {
+          width: "100%"
+        }
+      },
+      action: !hideAction && onAction ? /* @__PURE__ */ jsxRuntime.jsx(
+        material.Button,
+        {
+          color: "inherit",
+          size: "small",
+          onClick: onAction,
+          sx: { whiteSpace: "nowrap" },
+          children: actionLabel || overview.defaultActionLabel
+        }
+      ) : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle2", sx: { fontWeight: "bold", mb: 0.5 }, children: overview.title }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", children: overview.message })
+      ]
+    }
+  );
+}
+var steps = ["Basic Information", "Select Tags", "Review"];
+function validateBasicInfo(name, budgetAmount) {
+  if (!name.trim()) {
+    return "Budget name is required";
+  }
+  if (name.trim().length < 3) {
+    return "Budget name must be at least 3 characters";
+  }
+  const amount = parseFloat(budgetAmount);
+  if (isNaN(amount) || amount <= 0) {
+    return "Budget amount must be a positive number";
+  }
+  if (amount > 1e6) {
+    return "Budget amount cannot exceed $1,000,000";
+  }
+  return null;
+}
+function validateTags(tagNames) {
+  if (tagNames.length === 0) {
+    return "At least one tag is required";
+  }
+  if (tagNames.length > 10) {
+    return "Maximum 10 tags allowed";
+  }
+  return null;
+}
+function BudgetStepper({
+  initialData,
+  availableTags,
+  onSubmit,
+  onCancel,
+  editMode = false,
+  submitting = false,
+  error
+}) {
+  const [activeStep, setActiveStep] = react.useState(0);
+  const [name, setName] = react.useState(initialData?.name || "");
+  const [budgetAmount, setBudgetAmount] = react.useState(
+    initialData?.budgetAmount?.toString() || ""
+  );
+  const [tagNames, setTagNames] = react.useState(initialData?.tagNames || []);
+  const [validationError, setValidationError] = react.useState(null);
+  const handleNext = () => {
+    setValidationError(null);
+    if (activeStep === 0) {
+      const error2 = validateBasicInfo(name, budgetAmount);
+      if (error2) {
+        setValidationError(error2);
+        return;
+      }
+    } else if (activeStep === 1) {
+      const error2 = validateTags(tagNames);
+      if (error2) {
+        setValidationError(error2);
+        return;
+      }
+    }
+    setActiveStep((prevStep) => prevStep + 1);
+  };
+  const handleBack = () => {
+    setValidationError(null);
+    setActiveStep((prevStep) => prevStep - 1);
+  };
+  const handleSubmit = async () => {
+    const data = {
+      name: name.trim(),
+      budgetAmount: parseFloat(budgetAmount),
+      tagNames,
+      showOnDashboard: true
+    };
+    await onSubmit(data);
+  };
+  const renderStepContent = (step) => {
+    switch (step) {
+      case 0:
+        return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexDirection: "column", gap: 3 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: "Enter basic budget information" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.TextField,
+            {
+              label: "Budget Name",
+              value: name,
+              onChange: (e) => {
+                setName(e.target.value);
+                setValidationError(null);
+              },
+              required: true,
+              fullWidth: true,
+              disabled: submitting,
+              error: !!validationError && !name.trim(),
+              helperText: "e.g., Monthly Groceries, Car Maintenance",
+              inputProps: {
+                maxLength: 255
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.TextField,
+            {
+              label: "Budget Amount",
+              type: "number",
+              value: budgetAmount,
+              onChange: (e) => {
+                setBudgetAmount(e.target.value);
+                setValidationError(null);
+              },
+              required: true,
+              fullWidth: true,
+              disabled: submitting,
+              error: !!validationError && !budgetAmount,
+              helperText: "Maximum spending limit for this budget",
+              InputProps: {
+                startAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { mr: 0.5 }, children: "$" })
+              },
+              inputProps: {
+                min: 0,
+                step: 1
+              }
+            }
+          )
+        ] });
+      case 1:
+        return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexDirection: "column", gap: 3 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: "Select tags to track spending against this budget" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Autocomplete,
+            {
+              multiple: true,
+              options: availableTags,
+              value: tagNames,
+              onChange: (_, newValue) => {
+                setTagNames(newValue);
+                setValidationError(null);
+              },
+              disabled: submitting,
+              renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
+                material.TextField,
+                {
+                  ...params,
+                  label: "Tags",
+                  placeholder: "Select tags...",
+                  required: true,
+                  error: !!validationError && tagNames.length === 0,
+                  helperText: "Choose tags related to this budget (e.g., Groceries, Dining Out)"
+                }
+              ),
+              renderTags: (value, getTagProps) => value.map((option, index) => /* @__PURE__ */ react.createElement(
+                material.Chip,
+                {
+                  label: option,
+                  ...getTagProps({ index }),
+                  key: option
+                }
+              ))
+            }
+          ),
+          tagNames.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", color: "text.secondary", children: [
+            tagNames.length,
+            " tag",
+            tagNames.length > 1 ? "s" : "",
+            " selected"
+          ] }) })
+        ] });
+      case 2:
+        return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexDirection: "column", gap: 3 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", color: "text.secondary", children: [
+            "Review your budget before ",
+            editMode ? "saving changes" : "creating"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(material.Paper, { sx: { p: 2, bgcolor: "background.default" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle2", gutterBottom: true, children: "Budget Name" }),
+            /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", sx: { mb: 2, fontWeight: "medium" }, children: name }),
+            /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle2", gutterBottom: true, children: "Budget Amount" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "h6", color: "primary", sx: { mb: 2 }, children: [
+              "$",
+              parseFloat(budgetAmount).toLocaleString("en-US", {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2
+              })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "subtitle2", gutterBottom: true, children: [
+              "Tags (",
+              tagNames.length,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 1 }, children: tagNames.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(material.Chip, { label: tag, size: "small" }, tag)) })
+          ] })
+        ] });
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Paper, { "data-testid": "budget-stepper", sx: { p: 3 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", gutterBottom: true, children: editMode ? "Edit Budget" : "Create Budget" }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Stepper, { activeStep, sx: { my: 3 }, children: steps.map((label) => /* @__PURE__ */ jsxRuntime.jsx(material.Step, { children: /* @__PURE__ */ jsxRuntime.jsx(material.StepLabel, { children: label }) }, label)) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mt: 3, mb: 2 }, children: [
+      (validationError || error) && /* @__PURE__ */ jsxRuntime.jsx(material.Alert, { severity: "error", sx: { mb: 2 }, children: validationError || error }),
+      renderStepContent(activeStep)
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", justifyContent: "space-between", mt: 3 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: onCancel && /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: onCancel, disabled: submitting, children: "Cancel" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", gap: 1 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: handleBack, disabled: activeStep === 0 || submitting, children: "Back" }),
+        activeStep < steps.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx(material.Button, { variant: "contained", onClick: handleNext, disabled: submitting, children: "Next" }) : /* @__PURE__ */ jsxRuntime.jsx(
+          material.Button,
+          {
+            variant: "contained",
+            onClick: handleSubmit,
+            disabled: submitting,
+            children: submitting ? editMode ? "Saving..." : "Creating..." : editMode ? "Save Changes" : "Create Budget"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
 
 exports.BudgetCreateForm = BudgetCreateForm;
 exports.BudgetDeleteButton = BudgetDeleteButton;
@@ -1097,8 +1761,12 @@ exports.BudgetEditForm = BudgetEditForm;
 exports.BudgetInsightDialog = BudgetInsightDialog;
 exports.BudgetInsightsCard = BudgetInsightsCard;
 exports.BudgetList = BudgetList;
+exports.BudgetOverviewMessage = BudgetOverviewMessage;
 exports.BudgetProgressCard = BudgetProgressCard;
 exports.BudgetProgressList = BudgetProgressList;
+exports.BudgetStateIndicator = BudgetStateIndicator;
+exports.BudgetStepper = BudgetStepper;
 exports.BudgetSummary = BudgetSummary;
+exports.BudgetTagInsight = BudgetTagInsight;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map