@pfm-platform/goals-ui-mui 0.1.1

package/dist/index.js

@@ -0,0 +1,864 @@
+import { useState } from 'react';
+import { Paper, Typography, Box, FormControl, InputLabel, Select, MenuItem, TextField, Alert, Button, CircularProgress, Tooltip, IconButton, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Card, CardContent, List, ListItem, Chip, LinearProgress, Grid, Avatar, Stepper, Step, StepLabel, StepContent } from '@mui/material';
+import { useCreateSavingsGoal, useCreatePayoffGoal, useDeleteSavingsGoal, useDeletePayoffGoal, useUpdateSavingsGoal, useUpdatePayoffGoal } from '@pfm-platform/goals-data-access';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { useGoalProgress } from '@pfm-platform/goals-feature';
+import { TrendingUp, Flag, EmojiEvents, Timer, Stars, CheckCircle, RadioButtonUnchecked } from '@mui/icons-material';
+
+// src/components/GoalCreateForm.tsx
+function GoalCreateForm({
+  userId,
+  onSuccess
+}) {
+  const [goalType, setGoalType] = useState("savings");
+  const [name, setName] = useState("");
+  const [imageName, setImageName] = useState("");
+  const [targetValue, setTargetValue] = useState("");
+  const [targetCompletionOn, setTargetCompletionOn] = useState("");
+  const [error, setError] = useState(null);
+  const createSavingsGoal = useCreateSavingsGoal({
+    onSuccess: () => {
+      resetForm();
+      onSuccess?.();
+    },
+    onError: (err) => {
+      setError(err instanceof Error ? err.message : "Failed to create savings goal");
+    }
+  });
+  const createPayoffGoal = useCreatePayoffGoal({
+    onSuccess: () => {
+      resetForm();
+      onSuccess?.();
+    },
+    onError: (err) => {
+      setError(err instanceof Error ? err.message : "Failed to create payoff goal");
+    }
+  });
+  const resetForm = () => {
+    setName("");
+    setImageName("");
+    setTargetValue("");
+    setTargetCompletionOn("");
+    setError(null);
+  };
+  const handleGoalTypeChange = (event) => {
+    setGoalType(event.target.value);
+    setError(null);
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!name.trim()) {
+      setError("Goal name is required");
+      return;
+    }
+    if (!imageName.trim()) {
+      setError("Image name is required");
+      return;
+    }
+    const amount = parseFloat(targetValue);
+    if (isNaN(amount) || amount <= 0) {
+      setError("Target value must be a positive number");
+      return;
+    }
+    const formattedAmount = amount.toFixed(2);
+    const data = {
+      name: name.trim(),
+      image_name: imageName.trim(),
+      target_value: formattedAmount,
+      target_completion_on: targetCompletionOn || void 0
+    };
+    if (goalType === "savings") {
+      createSavingsGoal.mutate({ userId, data });
+    } else {
+      createPayoffGoal.mutate({ userId, data });
+    }
+  };
+  const isPending = createSavingsGoal.isPending || createPayoffGoal.isPending;
+  return /* @__PURE__ */ jsxs(Paper, { sx: { p: 3 }, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: "Create Goal" }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        component: "form",
+        onSubmit: handleSubmit,
+        sx: { display: "flex", flexDirection: "column", gap: 2 },
+        children: [
+          /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, disabled: isPending, children: [
+            /* @__PURE__ */ jsx(InputLabel, { id: "goal-type-label", children: "Goal Type" }),
+            /* @__PURE__ */ jsxs(
+              Select,
+              {
+                labelId: "goal-type-label",
+                id: "goal-type",
+                value: goalType,
+                label: "Goal Type",
+                onChange: handleGoalTypeChange,
+                children: [
+                  /* @__PURE__ */ jsx(MenuItem, { value: "savings", children: "Savings Goal (Save TO a target)" }),
+                  /* @__PURE__ */ jsx(MenuItem, { value: "payoff", children: "Payoff Goal (Pay DOWN debt)" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              label: "Goal Name",
+              value: name,
+              onChange: (e) => {
+                setName(e.target.value);
+                setError(null);
+              },
+              required: true,
+              fullWidth: true,
+              disabled: isPending,
+              error: !!error && !name.trim(),
+              helperText: goalType === "savings" ? "Enter a name for your savings goal (e.g., 'Emergency Fund', 'Vacation')" : "Enter a name for your payoff goal (e.g., 'Credit Card Debt', 'Student Loan')",
+              inputProps: {
+                maxLength: 255
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              label: "Image Name",
+              value: imageName,
+              onChange: (e) => {
+                setImageName(e.target.value);
+                setError(null);
+              },
+              required: true,
+              fullWidth: true,
+              disabled: isPending,
+              error: !!error && !imageName.trim(),
+              helperText: goalType === "savings" ? "Enter image name (e.g., 'piggy_bank', 'vacation', 'house')" : "Enter image name (e.g., 'credit_card', 'loan', 'debt')"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              label: goalType === "savings" ? "Target Amount" : "Debt Amount",
+              type: "number",
+              value: targetValue,
+              onChange: (e) => {
+                setTargetValue(e.target.value);
+                setError(null);
+              },
+              required: true,
+              fullWidth: true,
+              disabled: isPending,
+              error: !!error && (isNaN(parseFloat(targetValue)) || parseFloat(targetValue) <= 0),
+              helperText: goalType === "savings" ? "Enter the target amount to save (e.g., 5000.00)" : "Enter the total debt amount to pay off (e.g., 3000.00)",
+              inputProps: {
+                min: 0.01,
+                step: 0.01
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              label: "Target Completion Date (optional)",
+              type: "date",
+              value: targetCompletionOn,
+              onChange: (e) => {
+                setTargetCompletionOn(e.target.value);
+                setError(null);
+              },
+              fullWidth: true,
+              disabled: isPending,
+              helperText: "Enter the date you want to complete this goal by (YYYY-MM-DD)",
+              InputLabelProps: {
+                shrink: true
+              }
+            }
+          ),
+          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: isPending || !name.trim() || !imageName.trim() || !targetValue,
+              startIcon: isPending ? /* @__PURE__ */ jsx(CircularProgress, { size: 20 }) : null,
+              children: isPending ? "Creating..." : `Create ${goalType === "savings" ? "Savings" : "Payoff"} Goal`
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+function GoalDeleteButton({
+  userId,
+  goalId,
+  goalName,
+  goalType
+}) {
+  const [open, setOpen] = useState(false);
+  const deleteSavingsGoal = useDeleteSavingsGoal({
+    onSuccess: () => {
+      setOpen(false);
+    }
+  });
+  const deletePayoffGoal = useDeletePayoffGoal({
+    onSuccess: () => {
+      setOpen(false);
+    }
+  });
+  const handleDelete = () => {
+    if (goalType === "savings") {
+      deleteSavingsGoal.mutate({ userId, goalId });
+    } else {
+      deletePayoffGoal.mutate({ userId, goalId });
+    }
+  };
+  const isPending = deleteSavingsGoal.isPending || deletePayoffGoal.isPending;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: "Delete goal", children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: () => setOpen(true),
+        color: "error",
+        size: "small",
+        "aria-label": `delete ${goalType} goal ${goalName}`,
+        children: /* @__PURE__ */ jsx(DeleteIcon, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        open,
+        onClose: () => !isPending && setOpen(false),
+        "aria-labelledby": "delete-goal-dialog-title",
+        children: [
+          /* @__PURE__ */ jsxs(DialogTitle, { id: "delete-goal-dialog-title", children: [
+            "Delete ",
+            goalType === "savings" ? "Savings" : "Payoff",
+            " Goal?"
+          ] }),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(DialogContentText, { children: [
+            "Are you sure you want to delete the ",
+            goalType,
+            ' goal "',
+            goalName,
+            '"? This action cannot be undone.'
+          ] }) }),
+          /* @__PURE__ */ jsxs(DialogActions, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: () => setOpen(false),
+                disabled: isPending,
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: handleDelete,
+                color: "error",
+                variant: "contained",
+                disabled: isPending,
+                autoFocus: true,
+                children: isPending ? "Deleting..." : "Delete"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function GoalEditForm({
+  userId,
+  goal,
+  goalType,
+  open,
+  onClose
+}) {
+  const [name, setName] = useState(goal.name);
+  const [imageName, setImageName] = useState(goal.image_name);
+  const [targetValue, setTargetValue] = useState(goal.target_value);
+  const [targetCompletionOn, setTargetCompletionOn] = useState(
+    goal.target_completion_on || ""
+  );
+  const [error, setError] = useState(null);
+  const updateSavingsGoal = useUpdateSavingsGoal({
+    onSuccess: () => {
+      setError(null);
+      onClose();
+    },
+    onError: (err) => {
+      setError(err instanceof Error ? err.message : "Failed to update savings goal");
+    }
+  });
+  const updatePayoffGoal = useUpdatePayoffGoal({
+    onSuccess: () => {
+      setError(null);
+      onClose();
+    },
+    onError: (err) => {
+      setError(err instanceof Error ? err.message : "Failed to update payoff goal");
+    }
+  });
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!name.trim()) {
+      setError("Goal name is required");
+      return;
+    }
+    if (!imageName.trim()) {
+      setError("Image name is required");
+      return;
+    }
+    const amount = parseFloat(targetValue);
+    if (isNaN(amount) || amount <= 0) {
+      setError("Target value must be a positive number");
+      return;
+    }
+    const formattedAmount = amount.toFixed(2);
+    const data = {
+      id: goal.id,
+      name: name.trim(),
+      image_name: imageName.trim(),
+      target_value: formattedAmount,
+      target_completion_on: targetCompletionOn || void 0
+    };
+    if (goalType === "savings") {
+      updateSavingsGoal.mutate({ userId, goalId: goal.id, data });
+    } else {
+      updatePayoffGoal.mutate({ userId, goalId: goal.id, data });
+    }
+  };
+  const isPending = updateSavingsGoal.isPending || updatePayoffGoal.isPending;
+  const handleClose = () => {
+    if (!isPending) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onClose: handleClose,
+      maxWidth: "sm",
+      fullWidth: true,
+      "aria-labelledby": "edit-goal-dialog-title",
+      children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ jsxs(DialogTitle, { id: "edit-goal-dialog-title", children: [
+          "Edit ",
+          goalType === "savings" ? "Savings" : "Payoff",
+          " Goal"
+        ] }),
+        /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 2, pt: 1 }, children: [
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              label: "Goal Name",
+              value: name,
+              onChange: (e) => {
+                setName(e.target.value);
+                setError(null);
+              },
+              required: true,
+              fullWidth: true,
+              disabled: isPending,
+              error: !!error && !name.trim(),
+              helperText: "Enter a name for your goal",
+              inputProps: {
+                maxLength: 255
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              label: "Image Name",
+              value: imageName,
+              onChange: (e) => {
+                setImageName(e.target.value);
+                setError(null);
+              },
+              required: true,
+              fullWidth: true,
+              disabled: isPending,
+              error: !!error && !imageName.trim(),
+              helperText: "Enter image name"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              label: goalType === "savings" ? "Target Amount" : "Debt Amount",
+              type: "number",
+              value: targetValue,
+              onChange: (e) => {
+                setTargetValue(e.target.value);
+                setError(null);
+              },
+              required: true,
+              fullWidth: true,
+              disabled: isPending,
+              error: !!error && (isNaN(parseFloat(targetValue)) || parseFloat(targetValue) <= 0),
+              helperText: "Enter the target amount",
+              inputProps: {
+                min: 0.01,
+                step: 0.01
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              label: "Target Completion Date (optional)",
+              type: "date",
+              value: targetCompletionOn,
+              onChange: (e) => {
+                setTargetCompletionOn(e.target.value);
+                setError(null);
+              },
+              fullWidth: true,
+              disabled: isPending,
+              helperText: "Enter the target completion date (YYYY-MM-DD)",
+              InputLabelProps: {
+                shrink: true
+              }
+            }
+          ),
+          error && /* @__PURE__ */ jsx(Alert, { severity: "error", onClose: () => setError(null), children: error })
+        ] }) }),
+        /* @__PURE__ */ jsxs(DialogActions, { children: [
+          /* @__PURE__ */ jsx(Button, { onClick: handleClose, disabled: isPending, children: "Cancel" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "submit",
+              variant: "contained",
+              disabled: isPending || !name.trim() || !imageName.trim() || !targetValue,
+              startIcon: isPending ? /* @__PURE__ */ jsx(CircularProgress, { size: 20 }) : null,
+              children: isPending ? "Saving..." : "Save Changes"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function GoalList({
+  userId,
+  type,
+  title = "Goals",
+  currencySymbol = "$",
+  maxItems
+}) {
+  const goals = useGoalProgress({ userId, type });
+  if (!goals) {
+    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 goals..." })
+    ] }) });
+  }
+  const displayGoals = maxItems ? goals.slice(0, maxItems) : goals;
+  return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: title }),
+    displayGoals.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "No goals found" }) : /* @__PURE__ */ jsx(List, { disablePadding: true, children: displayGoals.map((goal, index) => /* @__PURE__ */ jsxs(
+      ListItem,
+      {
+        divider: index < displayGoals.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: goal.name }),
+              /* @__PURE__ */ jsx(
+                Chip,
+                {
+                  label: goal.type,
+                  size: "small",
+                  color: goal.type === "savings" ? "success" : "warning",
+                  variant: "outlined"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "body2", fontWeight: "medium", children: [
+              currencySymbol,
+              goal.currentValue.toFixed(2),
+              " / ",
+              currencySymbol,
+              goal.targetValue.toFixed(2)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { sx: { width: "100%" }, children: [
+            /* @__PURE__ */ jsx(
+              LinearProgress,
+              {
+                variant: "determinate",
+                value: Math.min(goal.percentComplete, 100),
+                color: goal.percentComplete >= 100 ? "success" : "primary",
+                sx: { height: 8, borderRadius: 1 }
+              }
+            ),
+            /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", children: [
+              goal.percentComplete.toFixed(1),
+              "% \u2022 ",
+              currencySymbol,
+              goal.remaining.toFixed(2),
+              " remaining \u2022 ",
+              currencySymbol,
+              goal.monthlyContribution.toFixed(2),
+              "/month"
+            ] })
+          ] })
+        ]
+      },
+      goal.id
+    )) })
+  ] }) });
+}
+function GoalSummary({
+  userId,
+  type,
+  title = "Goal Summary",
+  currencySymbol = "$"
+}) {
+  const goals = useGoalProgress({ userId, type });
+  if (!goals) {
+    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 goal summary..." })
+    ] }) });
+  }
+  if (goals.length === 0) {
+    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 goals found" })
+    ] }) });
+  }
+  const totalGoals = goals.length;
+  const totalCurrent = goals.reduce((sum, goal) => sum + goal.currentValue, 0);
+  const totalTarget = goals.reduce((sum, goal) => sum + goal.targetValue, 0);
+  const totalRemaining = totalTarget - totalCurrent;
+  const percentComplete = totalTarget > 0 ? totalCurrent / totalTarget * 100 : 0;
+  const totalMonthlyContribution = goals.reduce((sum, goal) => sum + goal.monthlyContribution, 0);
+  return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: title }),
+    /* @__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 Goals" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", children: totalGoals })
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid, { size: 6, children: /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", gutterBottom: true, children: "Target Amount" }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "h5", children: [
+          currencySymbol,
+          totalTarget.toFixed(2)
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid, { size: 6, children: /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", gutterBottom: true, children: "Current Amount" }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "h6", color: "primary.main", children: [
+          currencySymbol,
+          totalCurrent.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", children: [
+          currencySymbol,
+          totalRemaining.toFixed(2)
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid, { size: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", gutterBottom: true, children: "Monthly Contribution" }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "h6", color: "success.main", children: [
+          currencySymbol,
+          totalMonthlyContribution.toFixed(2),
+          "/month"
+        ] })
+      ] }) }),
+      /* @__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: [
+            percentComplete.toFixed(1),
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          LinearProgress,
+          {
+            variant: "determinate",
+            value: Math.min(percentComplete, 100),
+            color: percentComplete >= 100 ? "success" : "primary",
+            sx: { height: 10, borderRadius: 1 }
+          }
+        )
+      ] }) })
+    ] })
+  ] }) });
+}
+function GoalProgressCard({
+  name,
+  currentValue,
+  targetValue,
+  initialValue: _initialValue,
+  percentComplete,
+  goalType,
+  imageUrl,
+  currencySymbol = "$",
+  complete = false,
+  monthsRemaining,
+  monthlyContribution
+}) {
+  const current = parseFloat(currentValue);
+  const target = parseFloat(targetValue);
+  const remaining = goalType === "savings" ? target - current : current;
+  const progressColor = complete ? "success" : percentComplete >= 75 ? "primary" : percentComplete >= 50 ? "info" : percentComplete >= 25 ? "warning" : "error";
+  const formatCurrency = (amount) => {
+    return `${currencySymbol}${amount.toFixed(2)}`;
+  };
+  return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { children: [
+    /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "flex-start", gap: 2, mb: 2, children: [
+      imageUrl && /* @__PURE__ */ jsx(
+        Avatar,
+        {
+          src: imageUrl,
+          alt: name,
+          sx: { width: 56, height: 56 },
+          variant: "rounded"
+        }
+      ),
+      /* @__PURE__ */ jsxs(Box, { flex: 1, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: name }),
+        /* @__PURE__ */ jsx(
+          Chip,
+          {
+            label: goalType === "savings" ? "Savings Goal" : "Payoff Goal",
+            size: "small",
+            color: goalType === "savings" ? "success" : "warning",
+            icon: goalType === "savings" ? /* @__PURE__ */ jsx(TrendingUp, {}) : /* @__PURE__ */ jsx(Flag, {})
+          }
+        )
+      ] }),
+      complete && /* @__PURE__ */ jsx(EmojiEvents, { color: "success", sx: { fontSize: 40 } })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { sx: { mb: 2 }, children: [
+      /* @__PURE__ */ jsxs(Box, { 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: `${progressColor}.main`, children: [
+          percentComplete,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        LinearProgress,
+        {
+          variant: "determinate",
+          value: Math.min(percentComplete, 100),
+          color: progressColor,
+          sx: { height: 8, borderRadius: 4 }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr",
+        gap: 2,
+        sx: { mb: 2 },
+        children: [
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: goalType === "savings" ? "Current" : "Remaining" }),
+            /* @__PURE__ */ jsx(Typography, { variant: "h6", color: "text.primary", children: formatCurrency(goalType === "savings" ? current : remaining) })
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Target" }),
+            /* @__PURE__ */ jsx(Typography, { variant: "h6", color: "text.primary", children: formatCurrency(target) })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, children: [
+      monthlyContribution && parseFloat(monthlyContribution) > 0 && /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [
+        /* @__PURE__ */ jsx(TrendingUp, { fontSize: "small", color: "action" }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", children: [
+          formatCurrency(parseFloat(monthlyContribution)),
+          "/month"
+        ] })
+      ] }),
+      monthsRemaining !== void 0 && monthsRemaining > 0 && !complete && /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [
+        /* @__PURE__ */ jsx(Timer, { fontSize: "small", color: "action" }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", children: [
+          "~",
+          monthsRemaining,
+          " ",
+          monthsRemaining === 1 ? "month" : "months",
+          " remaining"
+        ] })
+      ] }),
+      complete && /* @__PURE__ */ jsx(
+        Chip,
+        {
+          label: "Goal Achieved!",
+          color: "success",
+          size: "small",
+          icon: /* @__PURE__ */ jsx(EmojiEvents, {}),
+          sx: { mt: 1 }
+        }
+      ),
+      !complete && remaining > 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", children: [
+        formatCurrency(remaining),
+        " to go"
+      ] })
+    ] })
+  ] }) });
+}
+function GoalMilestoneTracker({
+  goalName,
+  currentPercent,
+  milestones,
+  showProgressBar = true
+}) {
+  const defaultMilestones = [
+    {
+      name: "25% Complete",
+      targetPercent: 25,
+      achieved: currentPercent >= 25,
+      description: "Great start!"
+    },
+    {
+      name: "50% Complete",
+      targetPercent: 50,
+      achieved: currentPercent >= 50,
+      description: "Halfway there!"
+    },
+    {
+      name: "75% Complete",
+      targetPercent: 75,
+      achieved: currentPercent >= 75,
+      description: "Almost done!"
+    },
+    {
+      name: "Goal Achieved",
+      targetPercent: 100,
+      achieved: currentPercent >= 100,
+      description: "Congratulations!",
+      reward: "\u{1F389}"
+    }
+  ];
+  const activeMilestones = milestones || defaultMilestones;
+  const achievedCount = activeMilestones.filter((m) => m.achieved).length;
+  const currentMilestoneIndex = activeMilestones.findIndex((m) => !m.achieved);
+  const nextMilestone = currentMilestoneIndex >= 0 ? activeMilestones[currentMilestoneIndex] : null;
+  return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { children: [
+    /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "Milestones" }),
+      /* @__PURE__ */ jsx(
+        Chip,
+        {
+          label: `${achievedCount}/${activeMilestones.length}`,
+          color: achievedCount === activeMilestones.length ? "success" : "primary",
+          size: "small"
+        }
+      )
+    ] }),
+    showProgressBar && /* @__PURE__ */ jsxs(Box, { sx: { mb: 3 }, children: [
+      /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", mb: 1, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: goalName }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "body2", fontWeight: "bold", children: [
+          currentPercent,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        LinearProgress,
+        {
+          variant: "determinate",
+          value: Math.min(currentPercent, 100),
+          color: currentPercent >= 100 ? "success" : "primary",
+          sx: { height: 8, borderRadius: 4 }
+        }
+      )
+    ] }),
+    nextMilestone && /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          p: 2,
+          mb: 2,
+          bgcolor: "primary.light",
+          borderRadius: 1,
+          display: "flex",
+          alignItems: "center",
+          gap: 1
+        },
+        children: [
+          /* @__PURE__ */ jsx(Stars, { color: "primary" }),
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", color: "primary.dark", children: [
+              "Next Milestone: ",
+              nextMilestone.name
+            ] }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "primary.dark", children: [
+              nextMilestone.targetPercent - currentPercent,
+              "% to go"
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Stepper, { orientation: "vertical", activeStep: currentMilestoneIndex, children: activeMilestones.map((milestone) => /* @__PURE__ */ jsxs(Step, { completed: milestone.achieved, children: [
+      /* @__PURE__ */ jsx(
+        StepLabel,
+        {
+          optional: milestone.reward && milestone.achieved ? /* @__PURE__ */ jsx(Typography, { variant: "caption", children: milestone.reward }) : null,
+          StepIconComponent: () => milestone.achieved ? /* @__PURE__ */ jsx(CheckCircle, { color: "success" }) : /* @__PURE__ */ jsx(RadioButtonUnchecked, { color: "action" }),
+          children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", fontWeight: milestone.achieved ? "bold" : "normal", children: milestone.name }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", children: [
+              "(",
+              milestone.targetPercent,
+              "%)"
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs(StepContent, { children: [
+        milestone.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", paragraph: true, children: milestone.description }),
+        milestone.achieved && /* @__PURE__ */ jsx(
+          Chip,
+          {
+            label: "Achieved",
+            color: "success",
+            size: "small",
+            icon: /* @__PURE__ */ jsx(CheckCircle, {})
+          }
+        )
+      ] })
+    ] }, milestone.name)) }),
+    achievedCount === activeMilestones.length && /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          mt: 2,
+          p: 2,
+          bgcolor: "success.light",
+          borderRadius: 1,
+          textAlign: "center"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "h6", color: "success.dark", gutterBottom: true, children: "\u{1F389} All Milestones Achieved! \u{1F389}" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "success.dark", children: "Congratulations on reaching your goal!" })
+        ]
+      }
+    )
+  ] }) });
+}
+
+export { GoalCreateForm, GoalDeleteButton, GoalEditForm, GoalList, GoalMilestoneTracker, GoalProgressCard, GoalSummary };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map