@wealthx/shadcn 1.4.1 → 1.5.1

package/dist/components/ui/savings-goal-modal.mjs

@@ -0,0 +1,160 @@
+import {
+  MoneyInputWithSlider
+} from "../../chunk-LLAGF6BA.mjs";
+import "../../chunk-ISUA7DSB.mjs";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "../../chunk-NCUH54IZ.mjs";
+import {
+  DatePicker
+} from "../../chunk-BFB3UH7V.mjs";
+import "../../chunk-C6SWS7OW.mjs";
+import "../../chunk-Q35PNFJ7.mjs";
+import "../../chunk-PV3Y7QGK.mjs";
+import {
+  ToggleGroup,
+  ToggleGroupItem
+} from "../../chunk-OWFQSXVD.mjs";
+import "../../chunk-6QAFGZC2.mjs";
+import "../../chunk-LBTHZSBT.mjs";
+import "../../chunk-WDTXHLYM.mjs";
+import "../../chunk-S4CTM3UE.mjs";
+import {
+  formatCurrency
+} from "../../chunk-MN5NYQCL.mjs";
+import {
+  Button
+} from "../../chunk-NOOEKOWY.mjs";
+import "../../chunk-R4HCRDU5.mjs";
+import {
+  cn
+} from "../../chunk-AFML43VJ.mjs";
+import "../../chunk-WNQUEZJF.mjs";
+
+// src/components/ui/savings-goal-modal.tsx
+import { useState } from "react";
+import { differenceInDays } from "date-fns";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PERIOD_OPTIONS = [
+  { id: "90d", label: "90 Days", days: 90 },
+  { id: "180d", label: "180 Days", days: 180 },
+  { id: "360d", label: "360 Days", days: 360 },
+  { id: "custom", label: "Custom", days: 0 }
+];
+var PERIOD_DAYS = Object.fromEntries(
+  PERIOD_OPTIONS.map((p) => [p.id, p.days])
+);
+function SummaryRow({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold tabular-nums text-foreground", children: formatCurrency(value) })
+  ] });
+}
+function SavingsGoalModal({
+  open,
+  onOpenChange,
+  currentMonthlyTrend = 0,
+  defaultGoalAmount = 0,
+  onSave,
+  className
+}) {
+  var _a;
+  const [goalAmount, setGoalAmount] = useState(defaultGoalAmount);
+  const [selectedPeriod, setSelectedPeriod] = useState("90d");
+  const [customStart, setCustomStart] = useState(void 0);
+  const [customEnd, setCustomEnd] = useState(void 0);
+  const isCustom = selectedPeriod === "custom";
+  const today = /* @__PURE__ */ new Date();
+  const periodDays = isCustom ? customStart && customEnd && customEnd > customStart ? differenceInDays(customEnd, customStart) : 0 : (_a = PERIOD_DAYS[selectedPeriod]) != null ? _a : 90;
+  const monthlyTarget = periodDays > 0 ? Math.round(goalAmount / periodDays * 30) : 0;
+  const canSave = goalAmount > 0 && (!isCustom || periodDays > 0);
+  const handleSave = () => {
+    onSave == null ? void 0 : onSave(goalAmount, periodDays);
+    onOpenChange(false);
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: cn("max-w-sm top-8 translate-y-0", className), children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Savings Target Setter" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 py-2", children: [
+      /* @__PURE__ */ jsx(
+        MoneyInputWithSlider,
+        {
+          label: "Savings Goal",
+          value: goalAmount,
+          min: 0,
+          max: 2e5,
+          step: 500,
+          onChange: setGoalAmount
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "End Goal Date" }),
+        /* @__PURE__ */ jsx(
+          ToggleGroup,
+          {
+            type: "single",
+            variant: "outline",
+            size: "sm",
+            className: "w-full",
+            value: [selectedPeriod],
+            onValueChange: (values) => {
+              const next = values[0];
+              if (next) setSelectedPeriod(next);
+            },
+            children: PERIOD_OPTIONS.map((option) => /* @__PURE__ */ jsx(
+              ToggleGroupItem,
+              {
+                value: option.id,
+                className: "flex-1",
+                children: option.label
+              },
+              option.id
+            ))
+          }
+        ),
+        isCustom && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Start Date" }),
+            /* @__PURE__ */ jsx(
+              DatePicker,
+              {
+                value: customStart,
+                onChange: setCustomStart,
+                placeholder: "Start date",
+                calendarProps: { disabled: { before: today } }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "End Date" }),
+            /* @__PURE__ */ jsx(
+              DatePicker,
+              {
+                value: customEnd,
+                onChange: setCustomEnd,
+                placeholder: "End date",
+                calendarProps: {
+                  disabled: { before: customStart != null ? customStart : today }
+                }
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 border-t border-border pt-4", children: [
+        /* @__PURE__ */ jsx(SummaryRow, { label: "Monthly Savings Target", value: monthlyTarget }),
+        /* @__PURE__ */ jsx(SummaryRow, { label: "Current Trend", value: currentMonthlyTrend })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: () => onOpenChange(false), children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleSave, disabled: !canSave, children: "Set Now" })
+    ] })
+  ] }) });
+}
+export {
+  SavingsGoalModal
+};