@pfm-platform/goals-ui-mui 0.1.1 → 0.2.0

package/dist/index.cjs

@@ -6,11 +6,17 @@ var goalsDataAccess = require('@pfm-platform/goals-data-access');
 var jsxRuntime = require('react/jsx-runtime');
 var DeleteIcon = require('@mui/icons-material/Delete');
 var goalsFeature = require('@pfm-platform/goals-feature');
+var FlagIcon = require('@mui/icons-material/Flag');
+var AddIcon = require('@mui/icons-material/Add');
+var EmojiEventsIcon = require('@mui/icons-material/EmojiEvents');
 var iconsMaterial = require('@mui/icons-material');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var DeleteIcon__default = /*#__PURE__*/_interopDefault(DeleteIcon);
+var FlagIcon__default = /*#__PURE__*/_interopDefault(FlagIcon);
+var AddIcon__default = /*#__PURE__*/_interopDefault(AddIcon);
+var EmojiEventsIcon__default = /*#__PURE__*/_interopDefault(EmojiEventsIcon);
 
 // src/components/GoalCreateForm.tsx
 function GoalCreateForm({
@@ -453,12 +459,230 @@ function GoalEditForm({
     }
   );
 }
+function GoalsEmptyState({
+  onSetGoal,
+  title = "No Goals Yet",
+  message = "Set financial goals to stay motivated and track your progress.",
+  minHeight = 400
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Box,
+    {
+      "data-testid": "goals-empty-state",
+      sx: {
+        minHeight,
+        height: "100%",
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 3,
+        py: 6,
+        px: 2
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FlagIcon__default.default,
+          {
+            sx: {
+              fontSize: 80,
+              color: "primary.main",
+              opacity: 0.6
+            },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Typography,
+          {
+            variant: "h5",
+            component: "h2",
+            color: "text.primary",
+            sx: { fontWeight: "medium" },
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Typography,
+          {
+            variant: "body1",
+            color: "text.secondary",
+            align: "center",
+            sx: { maxWidth: 480, px: 2 },
+            children: message
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          material.Box,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 1,
+              mt: 1,
+              mb: 2
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", color: "text.secondary", sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "span", sx: { color: "success.main", fontWeight: "bold" }, children: "\u2713" }),
+                "Save for important purchases and milestones"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", color: "text.secondary", sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "span", sx: { color: "success.main", fontWeight: "bold" }, children: "\u2713" }),
+                "Pay off debt faster with targeted plans"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", color: "text.secondary", sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "span", sx: { color: "success.main", fontWeight: "bold" }, children: "\u2713" }),
+                "Track progress with visual charts and insights"
+              ] })
+            ]
+          }
+        ),
+        onSetGoal && /* @__PURE__ */ jsxRuntime.jsx(
+          material.Button,
+          {
+            variant: "contained",
+            color: "primary",
+            size: "large",
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(AddIcon__default.default, {}),
+            onClick: onSetGoal,
+            "aria-label": "Set your first goal",
+            sx: {
+              mt: 2,
+              px: 4,
+              py: 1.5,
+              fontSize: "1rem",
+              fontWeight: "medium",
+              textTransform: "none",
+              boxShadow: 2,
+              "&:hover": {
+                boxShadow: 4
+              }
+            },
+            children: "Set Your First Goal"
+          }
+        )
+      ]
+    }
+  );
+}
+function GoalsCompletedState({
+  onSetNewGoal,
+  title = "All Goals Completed!",
+  message = "Congratulations! You've achieved all your financial goals.",
+  minHeight = 400
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Box,
+    {
+      "data-testid": "goals-completed-state",
+      sx: {
+        minHeight,
+        height: "100%",
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 3,
+        py: 6,
+        px: 2
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EmojiEventsIcon__default.default,
+          {
+            sx: {
+              fontSize: 80,
+              color: "success.main",
+              opacity: 0.8
+            },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Typography,
+          {
+            variant: "h5",
+            component: "h2",
+            color: "success.main",
+            sx: { fontWeight: "medium" },
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Typography,
+          {
+            variant: "body1",
+            color: "text.secondary",
+            align: "center",
+            sx: { maxWidth: 480, px: 2 },
+            children: message
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          material.Box,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 1,
+              mt: 1,
+              mb: 2
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", color: "text.secondary", sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "span", sx: { color: "success.main", fontWeight: "bold" }, children: "\u{1F389}" }),
+                "Celebrate your financial discipline and achievement"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", color: "text.secondary", sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "span", sx: { color: "success.main", fontWeight: "bold" }, children: "\u{1F680}" }),
+                "Ready to set even more ambitious goals"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", color: "text.secondary", sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "span", sx: { color: "success.main", fontWeight: "bold" }, children: "\u{1F4AA}" }),
+                "Keep the momentum going with new challenges"
+              ] })
+            ]
+          }
+        ),
+        onSetNewGoal && /* @__PURE__ */ jsxRuntime.jsx(
+          material.Button,
+          {
+            variant: "contained",
+            color: "success",
+            size: "large",
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(AddIcon__default.default, {}),
+            onClick: onSetNewGoal,
+            "aria-label": "Set a new goal",
+            sx: {
+              mt: 2,
+              px: 4,
+              py: 1.5,
+              fontSize: "1rem",
+              fontWeight: "medium",
+              textTransform: "none",
+              boxShadow: 2,
+              "&:hover": {
+                boxShadow: 4
+              }
+            },
+            children: "Set New Goal"
+          }
+        )
+      ]
+    }
+  );
+}
 function GoalList({
   userId,
   type,
   title = "Goals",
   currencySymbol = "$",
-  maxItems
+  maxItems,
+  onSetGoal,
+  onSetNewGoal
 }) {
   const goals = goalsFeature.useGoalProgress({ userId, type });
   if (!goals) {
@@ -468,9 +692,10 @@ function GoalList({
     ] }) });
   }
   const displayGoals = maxItems ? goals.slice(0, maxItems) : goals;
+  const allGoalsCompleted = displayGoals.length > 0 && displayGoals.every((goal) => goal.percentComplete >= 100);
   return /* @__PURE__ */ jsxRuntime.jsx(material.Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", gutterBottom: true, children: title }),
-    displayGoals.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: "No goals found" }) : /* @__PURE__ */ jsxRuntime.jsx(material.List, { disablePadding: true, children: displayGoals.map((goal, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+    displayGoals.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(GoalsEmptyState, { onSetGoal }) : allGoalsCompleted ? /* @__PURE__ */ jsxRuntime.jsx(GoalsCompletedState, { onSetNewGoal }) : /* @__PURE__ */ jsxRuntime.jsx(material.List, { disablePadding: true, children: displayGoals.map((goal, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       material.ListItem,
       {
         divider: index < displayGoals.length - 1,
@@ -864,13 +1089,300 @@ function GoalMilestoneTracker({
     )
   ] }) });
 }
+function GoalItemCondensed({
+  name,
+  currentValue,
+  targetValue,
+  percentComplete,
+  goalType,
+  imageUrl,
+  currencySymbol = "$",
+  complete = false,
+  onClick
+}) {
+  const formatCurrency = (amount) => {
+    return `${currencySymbol}${amount.toLocaleString("en-US", {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    })}`;
+  };
+  const progressColor = complete ? "success" : percentComplete >= 75 ? "primary" : percentComplete >= 50 ? "info" : "warning";
+  const Icon = goalType === "savings" ? iconsMaterial.TrendingUp : iconsMaterial.TrendingDown;
+  const iconColor = goalType === "savings" ? "success.main" : "warning.main";
+  const handleKeyDown = (event) => {
+    if (onClick && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      onClick();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Box,
+    {
+      "data-testid": "goal-item-condensed",
+      onClick,
+      onKeyDown: handleKeyDown,
+      tabIndex: onClick ? 0 : void 0,
+      role: onClick ? "button" : void 0,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1.5,
+        py: 1,
+        px: 1.5,
+        borderRadius: 1,
+        cursor: onClick ? "pointer" : "default",
+        transition: "background-color 0.2s",
+        "&:hover": onClick ? {
+          backgroundColor: "action.hover"
+        } : void 0,
+        "&:focus": onClick ? {
+          outline: "2px solid",
+          outlineColor: "primary.main",
+          outlineOffset: "2px"
+        } : void 0
+      },
+      children: [
+        imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+          material.Avatar,
+          {
+            src: imageUrl,
+            alt: name,
+            sx: { width: 32, height: 32 },
+            variant: "rounded"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          material.Avatar,
+          {
+            sx: {
+              width: 32,
+              height: 32,
+              bgcolor: "transparent",
+              color: iconColor
+            },
+            variant: "rounded",
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { fontSize: "small" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5, mb: 0.5 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.Typography,
+              {
+                variant: "body2",
+                fontWeight: "medium",
+                sx: {
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  flex: 1
+                },
+                children: name
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.Chip,
+              {
+                label: goalType,
+                size: "small",
+                color: goalType === "savings" ? "success" : "warning",
+                sx: {
+                  height: 18,
+                  fontSize: "0.6875rem",
+                  "& .MuiChip-label": {
+                    px: 0.75,
+                    py: 0
+                  }
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.LinearProgress,
+            {
+              variant: "determinate",
+              value: Math.min(percentComplete, 100),
+              color: progressColor,
+              sx: {
+                height: 4,
+                borderRadius: 1,
+                backgroundColor: "action.hover"
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexDirection: "column", alignItems: "flex-end", minWidth: 80 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", fontWeight: "medium", color: "text.primary", children: formatCurrency(currentValue) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", color: "text.secondary", sx: { fontSize: "0.6875rem" }, children: [
+            percentComplete.toFixed(0),
+            "% of ",
+            formatCurrency(targetValue)
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function GoalImageDialog({
+  open,
+  onClose,
+  onSelectImage,
+  selectedImageName,
+  goalType,
+  title
+}) {
+  const theme = material.useTheme();
+  const isMobile = material.useMediaQuery(theme.breakpoints.down("sm"));
+  const isTablet = material.useMediaQuery(theme.breakpoints.down("md"));
+  const [tempSelectedImage, setTempSelectedImage] = react.useState(null);
+  const savingsImages = goalsDataAccess.useSavingsGoalImages({ enabled: goalType === "savings" && open });
+  const payoffImages = goalsDataAccess.usePayoffGoalImages({ enabled: goalType === "payoff" && open });
+  const imagesQuery = goalType === "savings" ? savingsImages : payoffImages;
+  const images = imagesQuery.data?.images || [];
+  const cols = isMobile ? 2 : isTablet ? 3 : 4;
+  const handleImageClick = (name, url) => {
+    setTempSelectedImage({ name, url });
+  };
+  const handleConfirm = () => {
+    if (tempSelectedImage) {
+      onSelectImage(tempSelectedImage.name, tempSelectedImage.url);
+      setTempSelectedImage(null);
+    }
+    onClose();
+  };
+  const handleCancel = () => {
+    setTempSelectedImage(null);
+    onClose();
+  };
+  const highlightedImageName = tempSelectedImage?.name || selectedImageName;
+  const dialogTitle = title || `Select ${goalType === "savings" ? "Savings" : "Payoff"} Goal Image`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Dialog,
+    {
+      open,
+      onClose: handleCancel,
+      maxWidth: "md",
+      fullWidth: true,
+      fullScreen: isMobile,
+      "aria-labelledby": "goal-image-dialog-title",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.DialogTitle, { id: "goal-image-dialog-title", children: dialogTitle }),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.DialogContent, { children: [
+          imagesQuery.isLoading && /* @__PURE__ */ jsxRuntime.jsx(
+            material.Box,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                minHeight: 200
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, {})
+            }
+          ),
+          imagesQuery.isError && /* @__PURE__ */ jsxRuntime.jsx(material.Alert, { severity: "error", sx: { mb: 2 }, children: "Failed to load goal images. Please try again." }),
+          !imagesQuery.isLoading && !imagesQuery.isError && images.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs(material.Alert, { severity: "info", children: [
+            "No images available for ",
+            goalType,
+            " goals."
+          ] }),
+          !imagesQuery.isLoading && !imagesQuery.isError && images.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: "Click an image to select it, then click Confirm." }),
+            /* @__PURE__ */ jsxRuntime.jsx(material.ImageList, { cols, gap: 16, sx: { maxHeight: isMobile ? "none" : 500 }, children: images.map((image) => {
+              const isSelected = highlightedImageName === image.name;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                material.ImageListItem,
+                {
+                  sx: {
+                    cursor: "pointer",
+                    border: isSelected ? `3px solid ${theme.palette.primary.main}` : "2px solid transparent",
+                    borderRadius: 1,
+                    overflow: "hidden",
+                    transition: "all 0.2s",
+                    position: "relative",
+                    "&:hover": {
+                      border: `3px solid ${isSelected ? theme.palette.primary.main : theme.palette.action.hover}`,
+                      transform: "scale(1.02)"
+                    }
+                  },
+                  onClick: () => handleImageClick(image.name, image.url),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "img",
+                      {
+                        src: image.url,
+                        alt: image.name,
+                        loading: "lazy",
+                        style: {
+                          width: "100%",
+                          height: "100%",
+                          objectFit: "cover",
+                          display: "block"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      material.ImageListItemBar,
+                      {
+                        title: image.name,
+                        sx: {
+                          background: isSelected ? "linear-gradient(to top, rgba(25, 118, 210, 0.9) 0%, rgba(25, 118, 210, 0.7) 70%, rgba(25, 118, 210, 0) 100%)" : "linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)"
+                        }
+                      }
+                    ),
+                    isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+                      material.Box,
+                      {
+                        sx: {
+                          position: "absolute",
+                          top: 8,
+                          right: 8,
+                          bgcolor: "primary.main",
+                          borderRadius: "50%",
+                          width: 32,
+                          height: 32,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          boxShadow: 2
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Check, { sx: { color: "white", fontSize: 20 } })
+                      }
+                    )
+                  ]
+                },
+                image.id
+              );
+            }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.DialogActions, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: handleCancel, color: "inherit", children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Button,
+            {
+              onClick: handleConfirm,
+              variant: "contained",
+              disabled: !tempSelectedImage && !selectedImageName,
+              "aria-label": "Confirm image selection",
+              children: "Confirm"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 
 exports.GoalCreateForm = GoalCreateForm;
 exports.GoalDeleteButton = GoalDeleteButton;
 exports.GoalEditForm = GoalEditForm;
+exports.GoalImageDialog = GoalImageDialog;
+exports.GoalItemCondensed = GoalItemCondensed;
 exports.GoalList = GoalList;
 exports.GoalMilestoneTracker = GoalMilestoneTracker;
 exports.GoalProgressCard = GoalProgressCard;
 exports.GoalSummary = GoalSummary;
+exports.GoalsCompletedState = GoalsCompletedState;
+exports.GoalsEmptyState = GoalsEmptyState;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map