+
+
+ ) : (
+ t("plan.funnel.advance", { rate: percent(rate) })
+ )}
+
+ );
+
+ return (
+
+
+ );
+}
diff --git a/apps/web/src/components/plan/goals-view.tsx b/apps/web/src/components/plan/goals-view.tsx
new file mode 100644
index 0000000000..2b8c86126e
--- /dev/null
+++ b/apps/web/src/components/plan/goals-view.tsx
@@ -0,0 +1,1545 @@
+/**
+ * Goals: the store's web revenue by year against its targets, and a timeline
+ * from today to the end of next year. Each milestone projects the revenue
+ * from three levers (sessions, conversion, average ticket) the user can move
+ * from today's values to see what reaches the target.
+ */
+
+import { useState, type FormEvent } from "react";
+import { Plus, RefreshCw01, Trash01 } from "@untitledui/icons";
+import { Badge } from "@decocms/ui/components/badge.tsx";
+import { Button } from "@decocms/ui/components/button.tsx";
+import { Input } from "@decocms/ui/components/input.tsx";
+import { Slider } from "@decocms/ui/components/slider.tsx";
+import { cn } from "@decocms/ui/lib/utils.ts";
+import { usePreferences } from "@/hooks/use-preferences.ts";
+import { useT } from "@/i18n/use-t.ts";
+import type { MapStore } from "./site-map.tsx";
+
+/** Web revenue per year, in millions of reais. */
+export interface YearRevenue {
+ year: number;
+ actual?: number;
+ target?: number;
+}
+
+/** Levers today, until the analysis measures them. */
+const CONVERSION = 0.014;
+const AVERAGE_TICKET = 450;
+const EXAMPLE = [42, 56, 58, 72, 96];
+const MONTH_WIDTH = 96;
+const TIMELINE_START = 200;
+
+/** Past years of actual revenue the form starts with, and how far back it goes. */
+const DEFAULT_HISTORY = 2;
+const MAX_HISTORY = 10;
+
+function useFormats() {
+ const [{ language }] = usePreferences();
+ const money = new Intl.NumberFormat(language, {
+ style: "currency",
+ currency: "BRL",
+ notation: "compact",
+ maximumFractionDigits: 1,
+ });
+ return {
+ millions: (value: number) => money.format(value * 1_000_000),
+ count: new Intl.NumberFormat(language, {
+ notation: "compact",
+ maximumFractionDigits: 1,
+ }),
+ percent: new Intl.NumberFormat(language, {
+ style: "percent",
+ maximumFractionDigits: 1,
+ }),
+ ticket: new Intl.NumberFormat(language, {
+ style: "currency",
+ currency: "BRL",
+ maximumFractionDigits: 0,
+ }),
+ month: new Intl.DateTimeFormat(language, { month: "short" }),
+ language,
+ };
+}
+
+function parseMillions(value: string): number | undefined {
+ const number = Number(value.replace(",", "."));
+ return value.trim() && Number.isFinite(number) && number >= 0
+ ? number
+ : undefined;
+}
+
+function GoalForm({
+ current,
+ initial,
+ onSave,
+}: {
+ /** This year: actual so far plus a goal; next year takes only a goal. */
+ current: number;
+ initial: YearRevenue[] | null;
+ onSave: (goals: YearRevenue[]) => void;
+}) {
+ const t = useT();
+ const next = current + 1;
+ const [history, setHistory] = useState(() =>
+ initial
+ ? initial.filter((row) => row.year < current).length
+ : DEFAULT_HISTORY,
+ );
+ const oldest = current - history;
+ const years = [
+ ...Array.from({ length: history }, (_, index) => oldest + index),
+ current,
+ next,
+ ];
+ const [values, setValues] = useState
+
+
+
+ {t("plan.funnel.conversion")}
+
+
+ {new Intl.NumberFormat(language, {
+ maximumFractionDigits: 1,
+ }).format((top ? orders / top : 0) * 100)}
+ %
+
+
+ {t("plan.funnel.summary", {
+ orders: count.format(orders),
+ sessions: count.format(top),
+ })}
+
+
+ -
+ {steps.map((group, index) => (
+
- stage.id).join("+")}>
+ {index > 0 && transition(rates[index] ?? 1, index === worst)}
+ 1 && "flex-col", + )} + > + {group.map((stage) => ( ++
+ ))} +
+ ))}
+ -
+ {transition(last ? orders / last : 0, false)}
+ + + {t("plan.funnel.orders")} + + + {t("plan.funnel.ordersPeriod", { + count: count.format(orders), + })} + ++
+
+
+ + {t("plan.goals.chartTitle")} +
+
+
+
+ {t("plan.goals.actual")}
+
+
+
+ {t("plan.goals.target")}
+
+
+
+
+ {goals.map((row) => (
+
+
+
+ ))}
+
+ {goals.map((row) => (
+
+ {row.year}
+
+ ))}
+ {(
+ [
+ ["plan.goals.actual", "actual"],
+ ["plan.goals.target", "target"],
+ ] as const
+ ).map(([label, kind]) => (
+
+ {row.target !== undefined && (
+
+ )}
+ {row.actual !== undefined && (
+
+ )}
+
+
+ {[
+ row.actual !== undefined &&
+ t("plan.goals.tooltipActual", {
+ value: format.millions(row.actual),
+ }),
+ row.target !== undefined &&
+ t("plan.goals.tooltipTarget", {
+ value: format.millions(row.target),
+ }),
+ ]
+ .filter(Boolean)
+ .join(" · ")}
+
+
+
+ {t(label)}
+
+ {goals.map((row) => (
+
+ {row[kind] !== undefined ? format.millions(row[kind]) : "—"}
+
+ ))}
+
+ ))}
+
+ {t("plan.goals.growth")}
+
+ {goals.map((row, index) => {
+ const growth = growthOf(goals, index);
+ return (
+
+ {growth
+ ? growth.planned
+ ? t("plan.goals.plannedGrowth", {
+ rate: signed(growth.rate),
+ })
+ : signed(growth.rate)
+ : "—"}
+
+ );
+ })}
+
+
+ );
+}
+
+function MilestoneCard({
+ store,
+ title,
+ monthName,
+ target,
+ yearBanked,
+ yearTarget,
+ today,
+ saved,
+ onSave,
+}: {
+ store: MapStore;
+ title: string;
+ monthName: string;
+ /** This month's revenue goal, in millions. */
+ target: number;
+ /** The year's revenue before this month: made, or projected from earlier months. */
+ yearBanked: number;
+ /** The year's goal through this month. */
+ yearTarget: number;
+ today: Levers;
+ /** The goals set for this month, if any. */
+ saved: Levers | undefined;
+ onSave: (levers: Levers) => void;
+}) {
+ const t = useT();
+ const format = useFormats();
+ const [editing, setEditing] = useState(saved === undefined);
+ const [levers, setLevers] = useState(saved ?? today);
+ const shown = editing ? levers : (saved ?? levers);
+ const projection = (shown.sessions * shown.conversion * shown.ticket) / 1e6;
+ const changed = (Object.keys(today) as LeverKey[]).some(
+ (key) => levers[key] !== today[key],
+ );
+ const set = (key: LeverKey) => (value: number) =>
+ setLevers((current) => ({ ...current, [key]: value }));
+ const gap = target - projection;
+
+ const rows: {
+ key: LeverKey;
+ label: string;
+ step: number;
+ format: (value: number) => string;
+ }[] = [
+ {
+ key: "sessions",
+ label: t("plan.goals.sessions"),
+ step: 10_000,
+ format: (value) => format.count.format(value),
+ },
+ {
+ key: "conversion",
+ label: t("plan.goals.conversion"),
+ step: 0.0005,
+ format: (value) => format.percent.format(value),
+ },
+ {
+ key: "ticket",
+ label: t("plan.goals.ticket"),
+ step: 5,
+ format: (value) => format.ticket.format(value),
+ },
+ ];
+
+ return (
+
+ {label}
+
+ {value === today
+ ? format(value)
+ : `${format(today)} → ${format(value)}`}
+
+
+
+
+ {
+ if (next !== undefined) onChange(next);
+ }}
+ />
+
+
+
+ );
+}
+
+/** Scroll the timeline sideways so a newly opened month's card is in view. */
+function revealCard(element: HTMLDivElement | null) {
+ const scroller = element?.closest
+
+ {title}
+
+ {t("plan.goals.onTrack")}
+ ) : (
+
+ {t("plan.goals.gap", { value: format.millions(gap) })}
+
+ )}
+
+ {t("plan.goals.yearToDate", {
+ month: monthName,
+ actual: format.millions(yearBanked + projection),
+ target: format.millions(yearTarget),
+ })}
+
+
+ {editing ? (
+ <>
+ + {t("plan.goals.leversIntro")} +
+
+ {rows.map((row) => (
+
+
+ ) : (
+ <>
+ + {t("plan.goals.yourGoals")} +
+-
+ {rows.map((row) => (
+
- {row.label} +
- + {shown[row.key] === today[row.key] + ? row.format(shown[row.key]) + : `${row.format(today[row.key])} → ${row.format(shown[row.key])}`} + +
+
+ ))}
+
+ {editing ? (
+ <>
+ {changed ? (
+
+ ) : (
+
+ )}
+
+
+ ) : (
+ <>
+ {t("plan.goals.goalsSet")}
+
+
+ )}
+
+
+
+ );
+}
+
+function YearTimeline({
+ store,
+ goals,
+ now,
+ months,
+ actual,
+ today,
+ monthGoals,
+ split,
+ onPickMonth,
+ onSave,
+}: {
+ store: MapStore;
+ goals: YearRevenue[];
+ now: Date;
+ months: Date[];
+ actual: number;
+ today: Levers;
+ monthGoals: Record
+
+ {year}
+
+ {t("plan.goals.onTrack")}
+ ) : (
+
+ {t("plan.goals.gap", { value: format.millions(gap) })}
+
+ )}
+ {banked > 0 && (
+
+ {t("plan.goals.bankedSoFar", { value: format.millions(banked) })}
+
+ )}
+
+ {editing ? (
+ <>
+ + {t("plan.goals.yearLeversIntro")} +
+
+ {rows.map((row) => (
+
+
+ ) : (
+ -
+ {rows.map((row) => (
+
- {row.label} +
- + {row.format(shown[row.key])} + +
+
+ ))}
+
+
+
+ {t("plan.goals.byMonth")}
+
+
+
+ {t("plan.goals.projection")}
+
+
+
+ {t("plan.goals.target")}
+
+
+
+
+ {bars.map((bar) => (
+
+ ))}
+
+
+ {t("plan.goals.monthsWithGoals", {
+ count: withGoals,
+ total: open.length,
+ })}
+
+
+ {editing ? (
+ <>
+ {changed ? (
+
+ ) : (
+
+ )}
+
+
+ ) : (
+ <>
+ {t("plan.goals.goalsSet")}
+
+
+ )}
+
+
+
+ );
+}
+
+function Timeline({
+ store,
+ goals,
+ now,
+ monthGoals,
+ split,
+ onMonthGoals,
+ onYearGoals,
+}: {
+ store: MapStore;
+ goals: YearRevenue[];
+ now: Date;
+ monthGoals: Record
+
+
+
+
+
+ {years.map((item, index) => {
+ const target = goals.find((row) => row.year === item)?.target;
+ const open = months
+ .map((month, monthIndex) => ({ month, index: monthIndex }))
+ .filter(({ month }) => month.getFullYear() === item);
+ return (
+
+
+ );
+ })}
+
+
+
+ {item}
+
+
+ {target !== undefined && (
+
+
+ )}
+
+
+ {scale === "year" ? (
+
+
+ + {t("plan.goals.timelineTitle")} +
++ {t( + scale === "month" + ? "plan.goals.timelineHint" + : "plan.goals.timelineYearHint", + )} +
+
+ {(["month", "year"] as const).map((option) => (
+
+ ))}
+
+
+
+ )}
+
+
+
+
+
+
+ {months.map((month, index) => {
+ const milestone = index === yearEnd || index === nextEnd;
+ const showYear = month.getMonth() === 0 || index === 0;
+ const isSelected = index === selected;
+ const hasGoals = monthGoals[monthKey(month)] !== undefined;
+ return (
+
+ );
+ })}
+ {selectedMonth && selectedTarget !== undefined && (
+
+
+ onMonthGoals(monthKey(selectedMonth), levers)
+ }
+ />
+
+ )}
+
+
+
+
+ + {t("plan.goals.splitTitle")} +
++ {t("plan.goals.splitDescription")} +
+
+ {[year, year + 1].map((option) => (
+
+ ))}
+
+
+ {months.map((month, index) => {
+ const key = monthKey(month);
+ const value = values[index] ?? 0;
+ return (
+
+
+
+ );
+ })}
+
+
+
+
+ {format.month.format(month).replace(".", "")}
+
+
+ setDrafts((current) => ({
+ ...current,
+ [key]: event.target.value,
+ }))
+ }
+ onBlur={() => commit(key)}
+ onKeyDown={(event) => {
+ if (event.key === "Enter") commit(key);
+ }}
+ className="px-1 text-center tabular-nums"
+ />
+
+
+
+
+ {t("plan.goals.splitSum", {
+ sum: format.millions(sum),
+ target: format.millions(required),
+ })}
+
+ {Math.abs(diff) < 0.05 ? (
+ {t("plan.goals.splitMatches")}
+ ) : (
+
+ {diff < 0
+ ? t("plan.goals.splitShort", {
+ value: format.millions(-diff),
+ })
+ : t("plan.goals.splitOver", { value: format.millions(diff) })}
+
+ )}
+
+
+
+
+
+
+ {
+ onGoals(next);
+ // New yearly goals re-spread every month.
+ setSplitOverrides({});
+ setEditing(false);
+ }}
+ />
+
+ );
+ }
+
+ const split = { ...defaultSplit(goals, now), ...splitOverrides };
+ return (
+
+
+ );
+}
diff --git a/apps/web/src/components/plan/plan-page.tsx b/apps/web/src/components/plan/plan-page.tsx
new file mode 100644
index 0000000000..613dc7c995
--- /dev/null
+++ b/apps/web/src/components/plan/plan-page.tsx
@@ -0,0 +1,295 @@
+/**
+ * Plan opens on the map of the store. Starting a plan offers three ways in,
+ * from the most specific to the most open; none of them is wired yet.
+ */
+
+import { useState, type ComponentType, type ReactNode } from "react";
+import {
+ ArrowRight,
+ BarChartSquare02,
+ Compass03,
+ Lightbulb02,
+ Plus,
+} from "@untitledui/icons";
+import { Button } from "@decocms/ui/components/button.tsx";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "@decocms/ui/components/dialog.tsx";
+import { Textarea } from "@decocms/ui/components/textarea.tsx";
+import { cn } from "@decocms/ui/lib/utils.ts";
+import { Page } from "@/components/page";
+import { useT } from "@/i18n/use-t.ts";
+import { useAnalyticsStatus } from "@/components/monitor/deco-analytics";
+import { useSiteProjects } from "@/components/monitor/monitor-views";
+import { siteOrigin } from "@/layouts/main-panel-tabs/analytics-heatmap-model.ts";
+import { useProjectContext } from "@/sdk";
+import { Panel } from "@/components/panel";
+import { GoalsView, type YearRevenue } from "./goals-view.tsx";
+import { SiteMap, type MapStore } from "./site-map.tsx";
+import type { TranslationKey } from "@/i18n/use-t.ts";
+
+type Icon = ComponentType<{ size?: number; className?: string }>;
+
+const TOPICS: TranslationKey[] = [
+ "plan.topic.shipping",
+ "plan.topic.pdp",
+ "plan.topic.home",
+ "plan.topic.search",
+ "plan.topic.minicart",
+ "plan.topic.plp",
+ "plan.topic.checkout",
+ "plan.topic.payment",
+ "plan.topic.promotions",
+ "plan.topic.recommendations",
+ "plan.topic.reviews",
+ "plan.topic.performance",
+ "plan.topic.seo",
+ "plan.topic.mobile",
+ "plan.topic.account",
+ "plan.topic.accessibility",
+];
+
+const REPORT_POINTS: TranslationKey[] = [
+ "plan.full.pointFunnel",
+ "plan.full.pointPerformance",
+ "plan.full.pointSeo",
+ "plan.full.pointPriorities",
+];
+
+function Column({
+ Icon,
+ tone,
+ title,
+ description,
+ action,
+ children,
+}: {
+ Icon: Icon;
+ tone: string;
+ title: string;
+ description: string;
+ action: ReactNode;
+ children: ReactNode;
+}) {
+ return (
+
+
+ setSplitOverrides((current) => ({ ...current, ...values }))
+ }
+ />
+
+ setMonthGoals((current) => ({ ...current, [key]: levers }))
+ }
+ onYearGoals={(goals) =>
+ setMonthGoals((current) => ({ ...current, ...goals }))
+ }
+ />
+
+
+
+
+
+
+
+
+
+ {title}
++ {description} +
+{children}
+ {action}
+
+
+ {t("plan.idea.action")}
+
+
+ {t("plan.direction.action")}
+
+
+ {t("plan.full.action")}
+
+
+ );
+}
+
+type PlanView = "map" | "goals";
+
+/**
+ * An org's file through the Studio that is open: the stored URL names the
+ * deployment that uploaded it, which a local or preview Studio can't read
+ * with its own session.
+ */
+function orgFileUrl(url: string | null, orgSlug: string): string | null {
+ if (!url) return null;
+ try {
+ const parsed = new URL(url, window.location.origin);
+ return parsed.pathname.startsWith(`/api/${orgSlug}/files/`)
+ ? `${parsed.pathname}${parsed.search}`
+ : url;
+ } catch {
+ return url;
+ }
+}
+
+/** Map and Goals, in the panel's toolbar like the Monitor's views. */
+function PlanTabs({
+ view,
+ onView,
+}: {
+ view: PlanView;
+ onView: (view: PlanView) => void;
+}) {
+ const t = useT();
+ const tabs = (
+
+ {TOPICS.map((topic) => (
+
+ ))}
+
+ -
+ {REPORT_POINTS.map((point) => (
+
- + + {t(point)} + + ))} +
+
+ );
+}
diff --git a/apps/web/src/components/plan/stage-card.tsx b/apps/web/src/components/plan/stage-card.tsx
new file mode 100644
index 0000000000..16e6e19e26
--- /dev/null
+++ b/apps/web/src/components/plan/stage-card.tsx
@@ -0,0 +1,204 @@
+/**
+ * One funnel stage opened: the store's live page for it, framed the same way
+ * the heatmap frames it, beside what the agents found on that page.
+ */
+
+import { useState, type FormEvent } from "react";
+import { LinkExternal01, RefreshCw01, XClose } from "@untitledui/icons";
+import { Badge } from "@decocms/ui/components/badge.tsx";
+import { Button } from "@decocms/ui/components/button.tsx";
+import { Input } from "@decocms/ui/components/input.tsx";
+import { Spinner } from "@decocms/ui/components/spinner.tsx";
+import { cn } from "@decocms/ui/lib/utils.ts";
+import { usePreferences } from "@/hooks/use-preferences.ts";
+import { useT } from "@/i18n/use-t.ts";
+import { frameUrl } from "@/layouts/main-panel-tabs/analytics-heatmap-model.ts";
+import type { MapNode } from "./site-map-mock.ts";
+import { STATUS_BADGE, STATUS_LABEL, StatusDot } from "./status.tsx";
+
+/** The desktop width the heatmap renders at when it has no measured viewport. */
+const FRAME_WIDTH = 1440;
+
+function PagePreview({ origin, path }: { origin: string; path: string }) {
+ const t = useT();
+ const [box, setBox] = useState({ width: 0, height: 0 });
+ const [loaded, setLoaded] = useState(false);
+ const src = frameUrl(origin, path);
+
+ const measure = (element: HTMLDivElement | null) => {
+ if (!element) return;
+ const observer = new ResizeObserver(([entry]) => {
+ if (!entry) return;
+ setBox({
+ width: entry.contentRect.width,
+ height: entry.contentRect.height,
+ });
+ });
+ observer.observe(element);
+ return () => observer.disconnect();
+ };
+
+ const scale = box.width ? box.width / FRAME_WIDTH : 0;
+ return (
+
+ {leading}
+
+ {!inFunnel && (
+
+ {t("plan.map.hint")}
+
+ )}
+
+
+ {inFunnel && FUNNEL && stage ? (
+
+
+
+ ) : inFunnel && FUNNEL ? (
+
+ select(FUNNEL.node.id)}
+ />
+
+
+
+ ) : (
+
+ {ready && (
+
+ )}
+ {panelOpen && !stage && (
+
+
+ {PLACED.map((item) => (
+ 0}
+ onSelect={select}
+ />
+ ))}
+
+ )}
+ event.stopPropagation()}
+ >
+ {STATUSES.map((status) => (
+
+
+ event.stopPropagation()}
+ >
+
+
+ {Math.round(camera.k * 100)}%
+
+
+
+
+
+ {src && scale > 0 && (
+