@open-mercato/core 0.7.1-develop.7203.1.9396450b78 → 0.8.1-develop.7204.1.83330e271e

package/dist/modules/design_system/gallery/demos/marketing-widgets.js

@@ -0,0 +1,586 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Line, LineChart, Pie, PieChart, PolarAngleAxis, PolarGrid, Radar, RadarChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis } from "recharts";
+import { ArrowDownLeft, ArrowUp, ArrowUpRight, ChevronLeft, ChevronRight, Clock3, Code, Info, Minus, Plus, Store, Target, UserRound } from "lucide-react";
+import { useLocale, useT } from "@open-mercato/shared/lib/i18n/context";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { ChartContainer, ChartTooltipContent } from "@open-mercato/ui/backend/charts";
+import { Avatar } from "@open-mercato/ui/primitives/avatar";
+import { Badge } from "@open-mercato/ui/primitives/badge";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Card } from "@open-mercato/ui/primitives/card";
+import { CompactButton } from "@open-mercato/ui/primitives/compact-button";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@open-mercato/ui/primitives/dialog";
+import { ScrollArea } from "@open-mercato/ui/primitives/scroll-area";
+import { SearchInput } from "@open-mercato/ui/primitives/search-input";
+import { SegmentedControl, SegmentedControlItem } from "@open-mercato/ui/primitives/segmented-control";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@open-mercato/ui/primitives/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@open-mercato/ui/primitives/tabs";
+import { marketingBrands, marketingProducts, marketingWorldMap, marketingActivityIcons } from "../assets/marketing-artwork.js";
+const key = (name) => `design_system.gallery.samples.marketing.${name}`;
+const chartColor = "var(--chart-orange)";
+const palette = ["var(--chart-orange)", "var(--chart-amber)", "var(--chart-teal)", "var(--chart-cyan)", "var(--chart-violet)", "var(--chart-indigo)"];
+function useMarketing() {
+  const t = useT();
+  const locale = useLocale();
+  const number = (value, digits = 0) => new Intl.NumberFormat(locale, { maximumFractionDigits: digits, minimumFractionDigits: digits }).format(value);
+  const money = (value) => new Intl.NumberFormat(locale, { style: "currency", currency: "USD", maximumFractionDigits: value % 1 ? 2 : 0 }).format(value);
+  const date = (value, options = { month: "short", day: "numeric", year: "numeric" }) => new Intl.DateTimeFormat(locale, { ...options, timeZone: "UTC" }).format(new Date(value));
+  return { t, locale, number, money, date };
+}
+function Trend({ value, badge = false, previous = false }) {
+  const { t, number } = useMarketing();
+  const label = `${value > 0 ? "+" : ""}${number(value, 1)}%`;
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 whitespace-nowrap text-sm", children: [
+    badge ? /* @__PURE__ */ jsx(Badge, { appearance: "light", tone: value < 0 ? "error" : "success", size: 20, children: label }) : /* @__PURE__ */ jsx("span", { className: value < 0 ? "text-status-error-icon" : "text-status-success-icon", children: label }),
+    previous ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t(key("versusWeek")) }) : null
+  ] });
+}
+function MarketingFrame({ children, compact = false, tall = false, flush = false, className }) {
+  return /* @__PURE__ */ jsx(Card, { "data-slot": "marketing-widget", className: cn("relative w-88 max-w-full overflow-hidden rounded-xl border-0 bg-background ring-1 ring-inset ring-border shadow-xs", tall ? "h-196" : compact ? "h-44.5" : "h-95", flush ? "gap-0 p-0" : "gap-5 p-5", className), children });
+}
+function Header({ title, value, action, children, info = false, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-14 shrink-0 items-start gap-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs("h3", { className: "flex items-center gap-1 text-sm font-medium leading-5 text-muted-foreground", children: [
+        title,
+        info ? /* @__PURE__ */ jsx(Info, { "aria-hidden": "true", className: "size-3 shrink-0 text-text-disabled" }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-2xl font-medium leading-8 tracking-tight", children: value }),
+        children
+      ] })
+    ] }),
+    action
+  ] });
+}
+function Details({ title, children, label, className }) {
+  const { t } = useMarketing();
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", className: cn("h-7 shrink-0 rounded-lg px-2.5 text-sm font-normal", className), children: /* @__PURE__ */ jsx(DialogTrigger, { children: label ?? t(key("details")) }) }),
+    /* @__PURE__ */ jsxs(DialogContent, { onKeyDownCapture: (event) => {
+      if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+        setOpen(false);
+      }
+    }, children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: t(key("localData")) })
+      ] }),
+      /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-96", scrollbarSize: "sm", children }),
+      /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setOpen(false), children: t(key("close")) }) })
+    ] })
+  ] });
+}
+function Period({ value, onChange, compact = false }) {
+  const { t } = useMarketing();
+  return compact ? /* @__PURE__ */ jsxs(Select, { value, onValueChange: onChange, children: [
+    /* @__PURE__ */ jsx(SelectTrigger, { "aria-label": t(key("period")), className: "h-7 w-auto gap-2 rounded-lg px-2.5 text-sm", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+    /* @__PURE__ */ jsx(SelectContent, { children: ["weekly", "monthly", "yearly"].map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option, children: t(key(option)) }, option)) })
+  ] }) : /* @__PURE__ */ jsx(SegmentedControl, { value, onValueChange: onChange, "aria-label": t(key("period")), className: "h-6 w-full shrink-0 rounded-sm bg-background p-0", children: ["1d", "1w", "1m", "3m", "1y"].map((option) => /* @__PURE__ */ jsx(SegmentedControlItem, { value: option, className: "h-6 flex-1 rounded-none border-r border-border p-0 text-xs last:border-0 data-[state=checked]:bg-muted data-[state=checked]:font-medium data-[state=checked]:shadow-none", children: t(key(`period${option}`)) }, option)) });
+}
+function Choices({ values, value, onChange, label }) {
+  const { t } = useMarketing();
+  return /* @__PURE__ */ jsx(SegmentedControl, { value, onValueChange: onChange, "aria-label": label, className: "h-7 max-w-full gap-2 rounded-none border-0 bg-transparent p-0", children: values.map((option) => /* @__PURE__ */ jsx(SegmentedControlItem, { value: option, className: "h-7 rounded-lg bg-muted px-2.5 text-sm font-normal data-[state=checked]:bg-accent-orange/10 data-[state=checked]:font-normal data-[state=checked]:text-accent-orange-text data-[state=checked]:shadow-none data-[state=unchecked]:bg-muted", children: t(key(option)) }, option)) });
+}
+function DataList({ rows }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: rows.map((row) => /* @__PURE__ */ jsxs("div", { className: "flex min-h-5 items-center gap-2 text-sm text-muted-foreground", children: [
+    row.icon,
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children: row.label }),
+    /* @__PURE__ */ jsx("span", { children: row.value }),
+    row.detail ? /* @__PURE__ */ jsx("span", { className: "ml-3 flex w-18 items-center justify-end gap-1", children: row.detail }) : null
+  ] }, row.label)) });
+}
+const salesSeries = [28, 14, 33, 11, 57, 26, 57, 7, 42, 39, 24, 44, 31, 36, 15, 25, 13, 21, 41, 46, 15, 30, 24, 44, 18];
+function TotalSales() {
+  const { t, money } = useMarketing();
+  const [period, setPeriod] = React.useState("1w");
+  const factor = { "1d": 0.4, "1w": 1, "1m": 2, "3m": 3, "1y": 7 }[period] ?? 1;
+  const rows = [{ label: t(key("onlineStore")), value: money(52.12 * factor), icon: /* @__PURE__ */ jsx(Store, { "aria-hidden": "true", className: "size-5" }), delta: 4.5 }, { label: "Facebook", value: money(38.45 * factor), icon: /* @__PURE__ */ jsx("img", { src: marketingBrands.facebook, alt: "", className: "size-5" }), delta: -2.8 }, { label: "Instagram", value: money(37.75 * factor), icon: /* @__PURE__ */ jsx("img", { src: marketingBrands.instagram, alt: "", className: "size-5" }), delta: 3.2 }].map((row) => ({ ...row, detail: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ArrowUp, { "aria-hidden": "true", className: cn("size-4", row.delta < 0 ? "rotate-180 text-status-error-icon" : "text-status-success-icon") }),
+    row.delta > 0 ? "+" : "",
+    row.delta,
+    "%"
+  ] }) }));
+  return /* @__PURE__ */ jsxs(MarketingFrame, { children: [
+    /* @__PURE__ */ jsx(Header, { title: t(key("totalSales")), value: money(128.32 * factor), action: /* @__PURE__ */ jsx(Details, { title: t(key("totalSales")), label: t(key("report")), children: /* @__PURE__ */ jsx(DataList, { rows }) }), children: /* @__PURE__ */ jsx(Trend, { value: 2, badge: true }) }),
+    /* @__PURE__ */ jsx(Period, { value: period, onChange: setPeriod }),
+    /* @__PURE__ */ jsx(ChartContainer, { config: { value: { label: t(key("sales")), color: chartColor } }, className: "h-27 min-h-0 w-full shrink-0", "aria-label": t(key("totalSales")), children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart, { data: salesSeries.map((value, index) => ({ index, value: value * factor })), margin: { top: 0, right: 0, bottom: 0, left: 0 }, children: [
+      /* @__PURE__ */ jsx(CartesianGrid, { stroke: "var(--border)", strokeDasharray: "3 3" }),
+      /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+      /* @__PURE__ */ jsx(Line, { dataKey: "value", type: "linear", stroke: chartColor, strokeWidth: 1.5, dot: false, isAnimationActive: false })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(DataList, { rows })
+  ] });
+}
+function TotalVisitors() {
+  const { t, number } = useMarketing();
+  const values = [{ key: "desktop", value: 27, delta: -3.2, color: "bg-chart-amber" }, { key: "tablet", value: 12, delta: -6.4, color: "bg-chart-cyan" }, { key: "mobile", value: 61, delta: 0.8, color: "bg-chart-violet" }];
+  return /* @__PURE__ */ jsxs(MarketingFrame, { children: [
+    /* @__PURE__ */ jsx(Header, { title: t(key("totalVisitors")), value: number(237456), children: /* @__PURE__ */ jsx(Trend, { value: -1.4, badge: true }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 border-t border-border pt-5", children: values.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col border-r border-dashed border-border px-4 first:pl-0 last:border-0 last:pr-0", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t(key(item.key)) }),
+      /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xl font-medium", children: [
+        item.value,
+        "%"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "mt-auto flex items-center gap-1 text-sm text-muted-foreground", children: [
+        item.delta > 0 ? "+" : "",
+        number(item.delta, 1),
+        "%",
+        item.delta < 0 ? /* @__PURE__ */ jsx(ArrowDownLeft, { "aria-hidden": "true", className: "size-3 text-status-error-icon" }) : /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": "true", className: "size-3 text-status-success-icon" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: cn("mt-4 h-2 w-full rounded-sm", item.color) })
+    ] }, item.key)) })
+  ] });
+}
+function ConversionRate() {
+  const { t, number } = useMarketing();
+  const rows = [["addedToCart", 3842, 1.8], ["reachedCheckout", 1256, -1.2], ["purchased", 649, 2.4]];
+  const list = /* @__PURE__ */ jsx(DataList, { rows: rows.map(([label, value, delta]) => ({ label: t(key(label)), value: number(value), detail: /* @__PURE__ */ jsx(Trend, { value: delta }) })) });
+  const series = [12, 9, 6, 12, 3, 8, 7, 6, 23, 19, 28, 3, 14, 4].map((value, index) => ({ month: index, value, previous: value + 8 + index % 3 * 5 }));
+  return /* @__PURE__ */ jsxs(MarketingFrame, { children: [
+    /* @__PURE__ */ jsx(Header, { title: t(key("conversionRate")), value: `${number(16.9, 1)}%`, action: /* @__PURE__ */ jsx(Details, { title: t(key("conversionRate")), children: list }), children: /* @__PURE__ */ jsx(Trend, { value: 2.1, badge: true }) }),
+    /* @__PURE__ */ jsx("div", { className: "border-t border-border pt-5", children: list }),
+    /* @__PURE__ */ jsx(ChartContainer, { config: { value: { label: t(key("purchased")), color: chartColor }, previous: { label: t(key("previousPeriod")), color: "var(--chart-orange)" } }, className: "min-h-0 flex-1", "aria-label": t(key("conversionRate")), children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart, { data: series, margin: { top: 0, right: 0, left: 0, bottom: 0 }, children: [
+      /* @__PURE__ */ jsx(CartesianGrid, { stroke: "var(--border)" }),
+      /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+      /* @__PURE__ */ jsx(Area, { dataKey: "previous", stroke: "none", fill: chartColor, fillOpacity: 0.18, isAnimationActive: false }),
+      /* @__PURE__ */ jsx(Area, { dataKey: "value", stroke: "none", fill: chartColor, fillOpacity: 1, isAnimationActive: false })
+    ] }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "-mt-3 flex justify-between text-overline text-muted-foreground", children: ["feb", "mar", "apr", "may", "jun", "jul"].map((month) => /* @__PURE__ */ jsx("span", { children: t(key(month)) }, month)) })
+  ] });
+}
+function Retention() {
+  const { t, number } = useMarketing();
+  const [selected, setSelected] = React.useState(null);
+  const cells = Array.from({ length: 12 }, (_, row) => Array.from({ length: 12 - row }, (_2, column) => ({ row, column, value: Math.max(8, 100 - row * 6 - column * 4 + row * column % 5 * 5) }))).flat();
+  return /* @__PURE__ */ jsxs(MarketingFrame, { children: [
+    /* @__PURE__ */ jsx(Header, { title: t(key("retention")), value: "24%", action: /* @__PURE__ */ jsx(Details, { title: t(key("retention")), children: /* @__PURE__ */ jsx(DataList, { rows: cells.filter((cell) => cell.column === 0).map((cell) => ({ label: t(key("month"), void 0, { month: cell.row + 1 }), value: `${cell.value}%` })) }) }), children: /* @__PURE__ */ jsx(Trend, { value: 2, badge: true }) }),
+    /* @__PURE__ */ jsx("div", { className: "grid h-48 shrink-0 grid-cols-12 grid-rows-12 gap-0.5", role: "group", "aria-label": t(key("retentionCohorts")), children: cells.map((cell) => /* @__PURE__ */ jsx("button", { type: "button", "aria-label": t(key("cohortCell"), void 0, { cohort: cell.row + 1, month: cell.column + 1, value: cell.value }), "aria-pressed": selected?.[0] === cell.row && selected?.[1] === cell.column, className: "min-h-0 min-w-0 bg-chart-orange outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-1", style: { gridRow: cell.row + 1, gridColumn: cell.column + 1, opacity: cell.value / 100 }, onClick: () => setSelected([cell.row, cell.column]) }, `${cell.row}-${cell.column}`)) }),
+    /* @__PURE__ */ jsx("div", { className: "-mt-3 grid grid-cols-12 text-center text-overline text-muted-foreground", children: Array.from({ length: 12 }, (_, index) => /* @__PURE__ */ jsx("span", { children: index + 1 }, index)) }),
+    /* @__PURE__ */ jsxs("p", { "aria-live": "polite", className: "mt-auto flex h-7 items-center gap-2 rounded-lg border border-border px-2 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Info, { "aria-hidden": "true", className: "size-3 shrink-0" }),
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: selected ? t(key("cohortCell"), void 0, { cohort: selected[0] + 1, month: selected[1] + 1, value: number(cells.find((cell) => cell.row === selected[0] && cell.column === selected[1])?.value ?? 0) }) : t(key("retentionUpdated")) })
+    ] })
+  ] });
+}
+function WeeklyVisitors() {
+  const { t, number } = useMarketing();
+  const values = ["happiness", "sadness", "anger", "fear", "surprise", "disgust", "love", "excitement"];
+  const [series, setSeries] = React.useState({ fresh: true, returning: true });
+  return /* @__PURE__ */ jsxs(MarketingFrame, { className: "gap-4", children: [
+    /* @__PURE__ */ jsx(Header, { title: t(key("weeklyVisitors")), value: number(16008), children: /* @__PURE__ */ jsx(Trend, { value: 1.1, badge: true }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex h-7 shrink-0 rounded-lg border border-border", children: ["fresh", "returning"].map((item, index) => /* @__PURE__ */ jsxs(Button, { variant: "ghost", "aria-pressed": series[item], onClick: () => setSeries((current) => ({ ...current, [item]: !current[item] })), className: "h-7 min-w-0 flex-1 gap-2 p-0 text-xs font-normal", children: [
+      /* @__PURE__ */ jsx("span", { className: cn("size-2 rounded-full", index ? "bg-chart-emerald" : "bg-chart-orange", !series[item] && "opacity-30") }),
+      t(key(item === "fresh" ? "newVisitors" : "returningVisitors"))
+    ] }, item)) }),
+    /* @__PURE__ */ jsx(ChartContainer, { config: { fresh: { label: t(key("newVisitors")), color: chartColor }, returning: { label: t(key("returningVisitors")), color: "var(--chart-emerald)" } }, className: "min-h-0 flex-1", "aria-label": t(key("weeklyVisitors")), children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(RadarChart, { data: values.map((label, index) => ({ label: t(key(label)), fresh: [76, 39, 84, 72, 40, 70, 74, 32][index], returning: [43, 75, 39, 40, 0, 54, 39, 75][index] })), outerRadius: "62%", children: [
+      /* @__PURE__ */ jsx(PolarGrid, { stroke: "var(--border)" }),
+      /* @__PURE__ */ jsx(PolarAngleAxis, { dataKey: "label", tick: { fontSize: 11, fill: "var(--muted-foreground)" } }),
+      series.fresh ? /* @__PURE__ */ jsx(Radar, { name: t(key("newVisitors")), dataKey: "fresh", stroke: chartColor, fill: chartColor, fillOpacity: 0.08, dot: { r: 2 }, isAnimationActive: false }) : null,
+      series.returning ? /* @__PURE__ */ jsx(Radar, { name: t(key("returningVisitors")), dataKey: "returning", stroke: "var(--chart-emerald)", fill: "var(--chart-emerald)", fillOpacity: 0.08, dot: { r: 2 }, isAnimationActive: false }) : null,
+      /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) })
+    ] }) }) })
+  ] });
+}
+function ChannelRows({ marketing = false }) {
+  const { t, money, number } = useMarketing();
+  const names = marketing ? ["acquisition", "conversion", "roi"] : ["Facebook", "Instagram", "Google"];
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { className: "flex-1", children: t(key("channels")) }),
+      /* @__PURE__ */ jsx("span", { className: "w-22", children: t(key(marketing ? "metric" : "percent")) }),
+      /* @__PURE__ */ jsx("span", { className: "w-12", children: t(key("total")) })
+    ] }),
+    names.map((name, index) => /* @__PURE__ */ jsxs("div", { className: "flex h-5 items-center gap-2 text-sm text-muted-foreground", children: [
+      marketing ? index === 0 ? /* @__PURE__ */ jsx(UserRound, { "aria-hidden": "true", className: "size-5" }) : index === 1 ? /* @__PURE__ */ jsx(Clock3, { "aria-hidden": "true", className: "size-5" }) : /* @__PURE__ */ jsx(Target, { "aria-hidden": "true", className: "size-5" }) : /* @__PURE__ */ jsx("img", { src: marketingBrands[name.toLowerCase()], alt: "", className: "size-5" }),
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children: marketing ? t(key(name)) : name }),
+      /* @__PURE__ */ jsx("span", { className: "w-18", children: marketing ? [money(38.25), t(key("days"), void 0, { count: 4.2 }), "324%"][index] : `${[28, 23, 32][index]}%` }),
+      /* @__PURE__ */ jsx("span", { className: "w-12 text-right", children: marketing ? /* @__PURE__ */ jsx(Trend, { value: [5.2, 3.8, 4.5][index] }) : number([6958, 5716, 7952][index]) })
+    ] }, name))
+  ] });
+}
+function Channels({ marketing = false }) {
+  const { t } = useMarketing();
+  const title = t(key(marketing ? "marketingChannels" : "visitorChannels"));
+  return /* @__PURE__ */ jsxs(MarketingFrame, { children: [
+    /* @__PURE__ */ jsx(Header, { title, info: marketing, value: marketing ? "82%" : "78%", action: marketing ? /* @__PURE__ */ jsx(Details, { title, children: /* @__PURE__ */ jsx(ChannelRows, { marketing: true }) }) : void 0, children: /* @__PURE__ */ jsx(Trend, { value: marketing ? 2.1 : -0.4, badge: !marketing, previous: marketing }) }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex h-2 gap-1", children: [41, 41, 16].map((width, index) => /* @__PURE__ */ jsx("span", { className: "rounded-sm", style: { width: `${width}%`, background: marketing ? palette[index] : ["var(--chart-amber)", "var(--chart-cyan)", "var(--chart-violet)"][index] } }, index)) }),
+      /* @__PURE__ */ jsx("div", { className: "flex justify-between gap-1 text-xs text-muted-foreground", children: (marketing ? ["organicSearch", "socialMedia", "direct"] : ["organic", "referral", "direct"]).map((name, index) => /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "size-2 shrink-0 rounded-full", style: { background: marketing ? palette[index] : ["var(--chart-amber)", "var(--chart-cyan)", "var(--chart-violet)"][index] } }),
+        t(key(name))
+      ] }, name)) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cn("border-t border-border pt-5", marketing && "border-dashed"), children: /* @__PURE__ */ jsx(ChannelRows, { marketing }) }),
+    /* @__PURE__ */ jsx(Details, { title, label: t(key("viewReports")), className: "mt-auto h-8 w-full", children: /* @__PURE__ */ jsx(ChannelRows, { marketing }) })
+  ] });
+}
+const mapPoints = [{ key: "greenland", x: 161, y: 7, visitors: 1032 }, { key: "usa", x: 80, y: 69, visitors: 8530 }, { key: "brazil", x: 129, y: 126, visitors: 3240 }, { key: "turkey", x: 222, y: 110, visitors: 6504 }, { key: "china", x: 276, y: 57, visitors: 9322 }];
+function Geography() {
+  const { t, number } = useMarketing();
+  const [selected, setSelected] = React.useState("turkey");
+  const [zoom, setZoom] = React.useState(1);
+  const place = mapPoints.find((point) => point.key === selected) ?? mapPoints[3];
+  return /* @__PURE__ */ jsxs(MarketingFrame, { className: "gap-4", children: [
+    /* @__PURE__ */ jsx(Header, { title: t(key("geography")), value: number(place.visitors), action: /* @__PURE__ */ jsx(Details, { title: t(key("geography")), children: /* @__PURE__ */ jsx(DataList, { rows: mapPoints.map((point) => ({ label: t(key(point.key)), value: number(point.visitors) })) }) }), children: /* @__PURE__ */ jsxs("span", { className: "flex h-6 items-center gap-1 rounded-sm border border-border px-1 text-xs text-muted-foreground", children: [
+      selected === "turkey" ? /* @__PURE__ */ jsx("img", { src: marketingBrands.turkey, alt: "", className: "size-4" }) : null,
+      t(key(selected))
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex h-7 shrink-0 items-center justify-around rounded-lg border border-border text-xs text-muted-foreground", children: ["men", "women", "other"].map((item, index) => /* @__PURE__ */ jsxs("span", { children: [
+      t(key(item)),
+      " ",
+      /* @__PURE__ */ jsxs("span", { className: "text-foreground", children: [
+        [32, 60, 8][index],
+        "%"
+      ] })
+    ] }, item)) }),
+    /* @__PURE__ */ jsxs("div", { "data-slot": "marketing-map", className: "relative h-56 w-full shrink-0 overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 origin-center transition-transform", style: { transform: `scale(${zoom})` }, children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "absolute left-0 top-0 h-56 w-83 bg-text-disabled", style: { maskImage: `url("${marketingWorldMap}")`, WebkitMaskImage: `url("${marketingWorldMap}")`, maskSize: "100% 100%", WebkitMaskSize: "100% 100%" } }),
+        mapPoints.map((point) => /* @__PURE__ */ jsx("button", { type: "button", "aria-label": t(key(point.key)), "aria-pressed": selected === point.key, onClick: () => setSelected(point.key), style: { left: `${point.x / 312 * 100}%`, top: `${point.y / 224 * 100}%` }, className: cn("absolute flex size-4 items-center justify-center rounded-full bg-background ring-1 ring-inset ring-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground", selected === point.key && "bg-accent-orange ring-4 ring-accent-orange/20"), children: /* @__PURE__ */ jsx("span", { className: cn("size-2 rounded-full", selected === point.key ? "bg-accent-orange-foreground" : "bg-text-disabled") }) }, point.key))
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 left-0 flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx(CompactButton, { "aria-label": t(key("zoomIn")), disabled: zoom >= 2, onClick: () => setZoom((current) => Math.min(2, current + 0.25)), children: /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx(CompactButton, { "aria-label": t(key("zoomOut")), disabled: zoom <= 1, onClick: () => setZoom((current) => Math.max(1, current - 0.25)), children: /* @__PURE__ */ jsx(Minus, { "aria-hidden": "true" }) })
+      ] }),
+      /* @__PURE__ */ jsx(CompactButton, { className: "absolute bottom-0 right-0", "aria-label": t(key("resetMap")), onClick: () => {
+        setZoom(1);
+        setSelected("turkey");
+      }, children: /* @__PURE__ */ jsx(Code, { "aria-hidden": "true" }) })
+    ] })
+  ] });
+}
+function RealtimeVisitors() {
+  const { t, number } = useMarketing();
+  return /* @__PURE__ */ jsxs(MarketingFrame, { children: [
+    /* @__PURE__ */ jsx(Header, { title: t(key("realtimeVisitors")), value: t(key("millions"), void 0, { value: number(32.6, 1) }), children: /* @__PURE__ */ jsx(Trend, { value: 8.4, badge: true }) }),
+    /* @__PURE__ */ jsxs("div", { className: "relative h-39 shrink-0", "aria-label": t(key("regionalVisitors")), children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 -ml-10.5 -mt-9.5 flex size-20 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-chart-emerald/25 text-xl text-status-success-foreground", children: "20%" }),
+      /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 ml-10 mt-1 flex size-33 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-chart-orange/25 text-title-4 font-medium text-accent-orange-text", children: "48%" }),
+      /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 -ml-14.5 mt-7.5 flex size-24 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-chart-amber/25 text-2xl font-medium text-status-warning-foreground", children: "32%" })
+    ] }),
+    /* @__PURE__ */ jsx(DataList, { rows: ["europe", "asia", "americas"].map((region, index) => ({ label: t(key(region)), value: t(key("millions"), void 0, { value: number([15.8, 10.2, 6.6][index], 1) }), icon: /* @__PURE__ */ jsx("span", { className: "ml-1 size-2 rounded-full", style: { background: [palette[0], palette[1], "var(--chart-emerald)"][index] } }), detail: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": "true", className: cn("size-4", index === 1 ? "rotate-90 text-status-error-icon" : "text-status-success-icon") }),
+      "+",
+      number([4.7, 6.2, 3.8][index], 1),
+      "%"
+    ] }) })) })
+  ] });
+}
+function ProductPerformance() {
+  const { t, number } = useMarketing();
+  const [period, setPeriod] = React.useState("1w");
+  const factor = period === "1w" ? 1 : period === "1d" ? 0.6 : 0.85;
+  return /* @__PURE__ */ jsxs(MarketingFrame, { children: [
+    /* @__PURE__ */ jsx(Header, { title: t(key("productPerformance")), value: `${number(22.8 * factor, 1)}%`, children: /* @__PURE__ */ jsx(Trend, { value: 8.4, badge: true }) }),
+    /* @__PURE__ */ jsx(Period, { value: period, onChange: setPeriod }),
+    /* @__PURE__ */ jsx("div", { className: "flex h-39.5 shrink-0 items-end gap-2.5", "aria-label": t(key("productPerformance")), children: [50, 80, 100, 60, 40].map((value, index) => /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col items-center justify-between rounded-lg bg-chart-orange px-1 py-2 text-xs font-medium text-accent-orange-foreground", style: { height: `${value * factor}%` }, children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        Math.round(value * factor),
+        "%"
+      ] }),
+      /* @__PURE__ */ jsx("span", { children: String.fromCharCode(65 + index) })
+    ] }, index)) }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-1", children: ["averageRating", "satisfaction", "returnRate"].map((name, index) => /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col items-center justify-center border-r border-border last:border-0", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-base font-medium text-muted-foreground", children: [number(4.7, 1), "92%", `${number(4.2, 1)}%`][index] }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: t(key(name)) })
+    ] }, name)) })
+  ] });
+}
+const productData = [{ image: 0, name: "Apple Watch S5 GPS 40MM", count: 500 }, { image: 4, name: "AirPods Max Green", count: 960 }, { image: 6, name: "iMac M1 24-inch Purple", count: 45 }, { image: 8, name: "iPhone 15 Pro 512GB", count: 150 }, { image: 1, name: "MacBook Air", count: 380 }, { image: 3, name: "AirPods Pro", count: 780 }];
+function ProductRows({ query = "" }) {
+  const { t, number } = useMarketing();
+  const matches = productData.filter((product) => product.name.toLocaleLowerCase().includes(query.toLocaleLowerCase()));
+  return matches.length ? /* @__PURE__ */ jsx("div", { children: matches.map((product) => /* @__PURE__ */ jsxs("div", { className: "flex min-h-17 items-center gap-3 border-b border-border px-5 py-3 last:border-0", children: [
+    /* @__PURE__ */ jsx("img", { src: marketingProducts[product.image].src, alt: "", className: "size-8 shrink-0 object-contain" }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: product.name }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: t(key("unitsSold"), void 0, { count: number(product.count) }) })
+    ] })
+  ] }, product.name)) }) : /* @__PURE__ */ jsx("p", { role: "status", className: "p-5 text-sm text-muted-foreground", children: t(key("noProducts")) });
+}
+function MyProducts() {
+  const { t, number } = useMarketing();
+  const [query, setQuery] = React.useState("");
+  return /* @__PURE__ */ jsxs(MarketingFrame, { flush: true, children: [
+    /* @__PURE__ */ jsx(Header, { title: t(key("myProducts")), info: true, value: number(468), className: "h-23 px-5 py-5", action: /* @__PURE__ */ jsx(Details, { title: t(key("myProducts")), label: t(key("seeAll")), children: /* @__PURE__ */ jsx(ProductRows, { query }) }), children: /* @__PURE__ */ jsx(Trend, { value: 2.1, previous: true }) }),
+    /* @__PURE__ */ jsx("div", { className: "border-y border-border px-5", children: /* @__PURE__ */ jsx(SearchInput, { "aria-label": t(key("searchProducts")), placeholder: t(key("searchProducts")), value: query, onChange: setQuery, className: "h-11 rounded-none border-0 px-0 shadow-none" }) }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "min-h-0 flex-1", scrollbarSize: "xs", children: /* @__PURE__ */ jsx(ProductRows, { query }) })
+  ] });
+}
+function ShippingTracking() {
+  const { t, number, date } = useMarketing();
+  const [period, setPeriod] = React.useState("weekly");
+  const [status, setStatus] = React.useState("delivered");
+  const [product, setProduct] = React.useState(0);
+  const factor = (status === "delivered" ? 1 : status === "inTransit" ? 0.55 : 0.2) * (period === "weekly" ? 1 : period === "monthly" ? 3 : 12);
+  const data = [0, 10, 44, 59, 0, 29, 0, 0, 45, 29, 29, 10, 29, 29, 0, 59, 29, 29].map((value, index) => ({ day: date(`2024-02-${String(19 + Math.floor(index / 3)).padStart(2, "0")}T00:00:00Z`, { weekday: "short" }), value: (value + product * 3) * factor }));
+  return /* @__PURE__ */ jsxs(MarketingFrame, { flush: true, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex h-35 shrink-0 flex-col gap-4 p-5", children: [
+      /* @__PURE__ */ jsx(Header, { title: t(key("shippingTracking")), value: number(Math.round(3844 * factor)), info: true, action: /* @__PURE__ */ jsx(Period, { compact: true, value: period, onChange: setPeriod }), children: /* @__PURE__ */ jsx(Trend, { value: 1.8, badge: true }) }),
+      /* @__PURE__ */ jsx(Choices, { values: ["delivered", "inTransit", "returned"], value: status, onChange: setStatus, label: t(key("shippingStatus")) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex h-12 shrink-0 items-center gap-2 border-y border-border px-5", children: [
+      /* @__PURE__ */ jsx("img", { src: marketingProducts[product].src, alt: "", className: "size-6" }),
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-muted-foreground", children: marketingProducts[product].name }),
+      /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+        /* @__PURE__ */ jsx(CompactButton, { "aria-label": t(key("previousProduct")), onClick: () => setProduct((current) => (current + marketingProducts.length - 1) % marketingProducts.length), children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx(CompactButton, { "aria-label": t(key("nextProduct")), onClick: () => setProduct((current) => (current + 1) % marketingProducts.length), children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ChartContainer, { config: { value: { label: t(key(status)), color: chartColor } }, className: "min-h-0 flex-1", "aria-label": t(key("shippingTracking")), children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart, { data, margin: { top: 0, right: 20, left: 20, bottom: 0 }, children: [
+      /* @__PURE__ */ jsx(CartesianGrid, { stroke: "var(--border)" }),
+      /* @__PURE__ */ jsx(XAxis, { dataKey: "day", interval: 2, tickLine: false, axisLine: false, tick: { fontSize: 12, fill: "var(--muted-foreground)" } }),
+      /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+      /* @__PURE__ */ jsx(Line, { type: "stepAfter", dataKey: "value", dot: false, stroke: chartColor, strokeWidth: 1.5, isAnimationActive: false })
+    ] }) }) })
+  ] });
+}
+function ProductCategories() {
+  const { t, number } = useMarketing();
+  const [category, setCategory] = React.useState(0);
+  const categories = ["accessories", "computers", "audio"];
+  const percentage = [58, 72, 34][category];
+  const details = /* @__PURE__ */ jsx(DataList, { rows: categories.map((name, index) => ({ label: t(key(name)), value: t(key("productsCount"), void 0, { count: [45, 32, 18][index] }) })) });
+  return /* @__PURE__ */ jsxs(MarketingFrame, { compact: true, className: "gap-4", children: [
+    /* @__PURE__ */ jsx(Header, { title: t(key("productCategories")), value: `${percentage}%`, info: true, action: /* @__PURE__ */ jsx(Details, { title: t(key("productCategories")), children: details }), children: /* @__PURE__ */ jsx(Trend, { value: 2.1, previous: true }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex h-7.5 shrink-0 gap-0.5", role: "meter", "aria-label": t(key("productCategories")), "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percentage, children: Array.from({ length: 36 }, (_, index) => /* @__PURE__ */ jsx("span", { className: cn("min-w-0 flex-1", index < Math.round(percentage / 100 * 36) ? "bg-chart-orange" : "bg-border") }, index)) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-5 items-center gap-2 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { children: t(key(categories[category])) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+        /* @__PURE__ */ jsx(CompactButton, { "aria-label": t(key("previousCategory")), onClick: () => setCategory((current) => (current + 2) % 3), children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx(CompactButton, { "aria-label": t(key("nextCategory")), onClick: () => setCategory((current) => (current + 1) % 3), children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }) })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "ml-auto whitespace-nowrap", children: t(key("productsCount"), void 0, { count: number([45, 32, 18][category]) }) }),
+      /* @__PURE__ */ jsx(Trend, { value: 3.2 })
+    ] })
+  ] });
+}
+function CustomerSegments() {
+  const { t, money } = useMarketing();
+  const data = [{ label: "premium", value: 32, amount: 9450 }, { label: "regular", value: 46, amount: 8320 }, { label: "new", value: 20, amount: 3280 }];
+  return /* @__PURE__ */ jsxs(MarketingFrame, { compact: true, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex h-5 shrink-0 items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs("h3", { className: "flex items-center gap-1 text-sm font-medium text-muted-foreground", children: [
+        t(key("customerSegments")),
+        /* @__PURE__ */ jsx(Info, { "aria-hidden": "true", className: "size-3 text-text-disabled" })
+      ] }),
+      /* @__PURE__ */ jsx(Trend, { value: 5.8, previous: true })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex h-25 items-center gap-5", children: [
+      /* @__PURE__ */ jsx(ChartContainer, { config: Object.fromEntries(data.map((item, index) => [item.label, { label: t(key(item.label)), color: palette[index] }])), className: "size-25 shrink-0", "aria-label": t(key("customerSegments")), children: /* @__PURE__ */ jsxs(PieChart, { width: 100, height: 100, children: [
+        /* @__PURE__ */ jsx(Pie, { data, dataKey: "value", nameKey: "label", cx: 45, cy: 45, innerRadius: 34, outerRadius: 49, paddingAngle: 3, stroke: "none", startAngle: 90, endAngle: 450, isAnimationActive: false, children: data.map((item, index) => /* @__PURE__ */ jsx(Cell, { fill: palette[index] }, item.label)) }),
+        /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: data.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { className: "size-2 shrink-0 rounded-full", style: { background: palette[index] } }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: t(key(item.label)) }),
+        /* @__PURE__ */ jsx("span", { children: money(item.amount) }),
+        /* @__PURE__ */ jsxs("span", { className: "text-xs", children: [
+          item.value,
+          "%"
+        ] })
+      ] }, item.label)) })
+    ] })
+  ] });
+}
+function SalesChannels() {
+  const { t, number, date } = useMarketing();
+  const [period, setPeriod] = React.useState("weekly");
+  const multiplier = period === "weekly" ? 1 : period === "monthly" ? 4 : 52;
+  return /* @__PURE__ */ jsxs(MarketingFrame, { compact: true, className: "gap-4", children: [
+    /* @__PURE__ */ jsx(Header, { title: t(key("salesChannels")), value: number(246 * multiplier), info: true, action: /* @__PURE__ */ jsx(Period, { compact: true, value: period, onChange: setPeriod }), children: /* @__PURE__ */ jsx(Trend, { value: 2.1, previous: true }) }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { children: date("2024-02-21T00:00:00Z") }),
+        /* @__PURE__ */ jsx("span", { children: date(period === "weekly" ? "2024-02-28T00:00:00Z" : period === "monthly" ? "2024-03-21T00:00:00Z" : "2025-02-21T00:00:00Z") })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex h-10.5 gap-1", "aria-label": t(key("salesChannels")), children: [26, 21, 16, 13, 10, 5, 2].map((width, index) => /* @__PURE__ */ jsx("span", { className: "rounded-sm", style: { flex: width, background: ["var(--chart-indigo)", "var(--chart-cyan)", "var(--chart-violet)", "var(--chart-orange)", "var(--chart-amber)", "var(--chart-emerald)", "var(--chart-teal)"][index] } }, index)) })
+    ] })
+  ] });
+}
+function CampaignData() {
+  const { t, money } = useMarketing();
+  return /* @__PURE__ */ jsxs(MarketingFrame, { compact: true, flush: true, children: [
+    /* @__PURE__ */ jsx(Header, { title: t(key("campaignData")), value: money(1750), info: true, className: "h-23.5 px-5 py-5", action: /* @__PURE__ */ jsx(Details, { title: t(key("campaignData")), children: /* @__PURE__ */ jsx(DataList, { rows: [{ label: t(key("campaignBudget")), value: money(1750) }, { label: t(key("usedBudget")), value: money(32900) }, { label: t(key("campaignProgress")), value: "45%" }] }) }), children: /* @__PURE__ */ jsx(Badge, { size: 20, appearance: "lighter", tone: "success", children: t(key("lastDays"), void 0, { count: 15 }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 border-t border-border", children: [
+      /* @__PURE__ */ jsx(ChartContainer, { config: { value: { label: t(key("campaignData")), color: chartColor } }, className: "w-44 min-w-0 shrink-0 border-r border-accent-orange-border", "aria-label": t(key("campaignData")), children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart, { data: salesSeries.slice(0, 18).map((value, index) => ({ index, value: value + index * 2 })), margin: { top: 0, left: 0, right: 0, bottom: 0 }, children: [
+        /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+        /* @__PURE__ */ jsx(Area, { dataKey: "value", type: "linear", stroke: chartColor, strokeWidth: 1.5, fill: chartColor, fillOpacity: 0.18, isAnimationActive: false })
+      ] }) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-end p-4", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-base font-medium", children: "45%" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t(key("budgetUsed"), void 0, { amount: money(32900) }) })
+      ] })
+    ] })
+  ] });
+}
+const ticketSamples = [{ name: "James Brown", status: "solved", minutes: 12, priority: "high", id: 98745 }, { name: "Sophia Williams", status: "inProgress", minutes: 48, priority: "medium", id: 98744 }, { name: "Matthew Johnson", status: "pending", minutes: 19, priority: "low", id: 98743 }];
+function SupportAnalytics() {
+  const { t, number, date } = useMarketing();
+  const [period, setPeriod] = React.useState("weekly");
+  const [category, setCategory] = React.useState("technical");
+  const [tab, setTab] = React.useState("allTickets");
+  const [tickets, setTickets] = React.useState(ticketSamples);
+  const [selected, setSelected] = React.useState(null);
+  const factor = (["technical", "billing", "account", "product"].indexOf(category) + 4) / 4 * (period === "weekly" ? 1 : period === "monthly" ? 4 : 52);
+  const current = tickets.find((ticket) => ticket.id === selected);
+  const visible = tickets.filter((ticket) => tab === "allTickets" || (tab === "openTickets" ? ticket.status !== "solved" : ticket.status === "solved"));
+  const metrics = [{ label: "firstResponse", detail: "belowSla", value: t(key("minutes"), void 0, { count: Math.round(15 * factor) }), delta: -22 }, { label: "resolutionTime", detail: "meetingSla", value: t(key("minutes"), void 0, { count: Math.round(48 * factor) }), delta: -18 }, { label: "csat", detail: "aboveTarget", value: "4.8/5", delta: -0.3 }];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(MarketingFrame, { tall: true, flush: true, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex h-34 shrink-0 flex-col gap-3 p-5", children: [
+        /* @__PURE__ */ jsxs(Header, { title: t(key("supportAnalytics")), value: number(Math.round(2450 * factor)), info: true, action: /* @__PURE__ */ jsx(Period, { compact: true, value: period, onChange: setPeriod }), children: [
+          /* @__PURE__ */ jsx(Trend, { value: 5.4 }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t(key("totalTickets")) })
+        ] }),
+        /* @__PURE__ */ jsx(Choices, { values: ["technical", "billing", "account", "product"], value: category, onChange: setCategory, label: t(key("ticketCategory")) })
+      ] }),
+      /* @__PURE__ */ jsx(ChartContainer, { config: { value: { label: t(key("responseTime")), color: chartColor } }, className: "h-44 shrink-0 border-y border-border px-3 pt-4", "aria-label": t(key("responseTime")), children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart, { data: [10, 34, 44, 58, 44, 34, 34].map((value, index) => ({ day: date(`2024-02-${19 + index}T00:00:00Z`, { weekday: "short" }), value: Math.round(value * factor) })), margin: { top: 0, right: 0, left: 0, bottom: 0 }, children: [
+        /* @__PURE__ */ jsx(XAxis, { dataKey: "day", axisLine: false, tickLine: false, tick: { fontSize: 12, fill: "var(--muted-foreground)" } }),
+        /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+        /* @__PURE__ */ jsx(ReferenceLine, { y: 30 * factor, stroke: "var(--muted-foreground)", strokeDasharray: "4 4", label: { value: t(key("targetMinutes"), void 0, { count: 30 }), fill: "var(--foreground)", fontSize: 12, position: "insideTopLeft" } }),
+        /* @__PURE__ */ jsx(Bar, { dataKey: "value", radius: [6, 6, 6, 6], isAnimationActive: false, children: Array.from({ length: 7 }, (_, index) => /* @__PURE__ */ jsx(Cell, { fill: index === 4 ? chartColor : "var(--border)" }, index)) })
+      ] }) }) }),
+      /* @__PURE__ */ jsxs(Tabs, { value: tab, onValueChange: setTab, variant: "underline", className: "min-h-0 flex-1 gap-0", children: [
+        /* @__PURE__ */ jsxs(TabsList, { className: "h-12 w-full shrink-0 justify-start gap-4 px-5", children: [
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "allTickets", className: "min-w-0 flex-auto justify-center px-0 text-sm font-normal data-[state=active]:border-accent-orange-border hover:text-accent-orange-text", children: t(key("allTickets")) }),
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "openTickets", className: "min-w-0 flex-auto justify-center px-0 text-sm font-normal data-[state=active]:border-accent-orange-border hover:text-accent-orange-text", children: t(key("openTickets")) }),
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "solvedTickets", className: "min-w-0 flex-auto justify-center px-0 text-sm font-normal data-[state=active]:border-accent-orange-border hover:text-accent-orange-text", children: t(key("solvedTickets")) })
+        ] }),
+        ["allTickets", "openTickets", "solvedTickets"].map((value) => /* @__PURE__ */ jsxs(TabsContent, { value, className: "m-0 flex min-h-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col gap-4 px-5 pb-5 pt-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsx("span", { className: "flex-1", children: t(key("channels")) }),
+              /* @__PURE__ */ jsx("span", { className: "w-18", children: t(key("actual")) }),
+              /* @__PURE__ */ jsx("span", { className: "w-10", children: t(key("average")) })
+            ] }),
+            metrics.map((metric, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center text-sm", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("p", { children: t(key(metric.label)) }),
+                /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: t(key(metric.detail)) })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "w-18 text-muted-foreground", children: metric.value }),
+              /* @__PURE__ */ jsxs("span", { className: cn("w-10", index === 2 ? "text-status-error-icon" : "text-status-success-icon"), children: [
+                number(metric.delta, index === 2 ? 1 : 0),
+                "%"
+              ] })
+            ] }, metric.label))
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 border-t border-border px-5 pt-4", children: [
+            /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-muted-foreground", children: t(key("recentTickets")) }),
+            /* @__PURE__ */ jsx(ScrollArea, { className: "h-40", scrollbarSize: "xs", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: visible.map((ticket, index) => /* @__PURE__ */ jsxs(Button, { variant: "ghost", onClick: () => setSelected(ticket.id), className: "h-auto min-h-10 w-full justify-start gap-3 p-0 text-left font-normal hover:bg-muted", children: [
+              /* @__PURE__ */ jsx(Avatar, { label: ticket.name, size: 32, className: index === 1 ? "bg-chart-amber/20 text-status-warning-foreground" : index === 2 ? "bg-chart-violet/20 text-accent-indigo" : "bg-muted" }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: ticket.name }),
+                /* @__PURE__ */ jsxs("p", { className: "mt-1 flex items-center gap-1 text-xs text-muted-foreground", children: [
+                  t(key(ticket.priority)),
+                  " \xB7 ",
+                  /* @__PURE__ */ jsx("span", { className: ticket.status === "solved" ? "text-status-success-icon" : "text-status-warning-icon", children: t(key(ticket.status)) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm", children: t(key("minutes"), void 0, { count: ticket.minutes }) }),
+                /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: [
+                  "#TKT-",
+                  ticket.id
+                ] })
+              ] })
+            ] }, ticket.id)) }) })
+          ] })
+        ] }, value))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Dialog, { open: selected !== null, onOpenChange: (open) => {
+      if (!open) setSelected(null);
+    }, children: /* @__PURE__ */ jsxs(DialogContent, { onKeyDownCapture: (event) => {
+      if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+        setSelected(null);
+      }
+    }, children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: current?.name }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: current ? `#TKT-${current.id}` : t(key("recentTickets")) })
+      ] }),
+      current ? /* @__PURE__ */ jsx(DataList, { rows: [{ label: t(key("status")), value: t(key(current.status)) }, { label: t(key("priority")), value: t(key(current.priority)) }] }) : null,
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setSelected(null), children: t(key("close")) }),
+        /* @__PURE__ */ jsx(Button, { disabled: current?.status === "solved", onClick: () => {
+          setTickets((items) => items.map((ticket) => ticket.id === selected ? { ...ticket, status: "solved" } : ticket));
+          setSelected(null);
+        }, children: t(key("resolveTicket")) })
+      ] })
+    ] }) })
+  ] });
+}
+const activityKinds = [{ key: "inventory", icon: "stack-line", color: "text-chart-violet", detail: "inventoryDetail" }, { key: "price", icon: "price-tag-line", color: "text-status-success-icon", detail: "priceDetail" }, { key: "newProduct", icon: "add-circle-line", color: "text-chart-violet", detail: "newProductDetail" }, { key: "images", icon: "image-line", color: "text-status-warning-icon", detail: "imagesDetail" }, { key: "descriptionUpdated", icon: "pencil-line", color: "text-muted-foreground", detail: "descriptionDetail" }];
+function RecentActivities() {
+  const { t, date } = useMarketing();
+  const [period, setPeriod] = React.useState("today");
+  const [query, setQuery] = React.useState("");
+  const records = Array.from({ length: period === "today" ? 7 : period === "yesterday" ? 2 : 9 }, (_, index) => ({ id: index, ...activityKinds[index % 5] })).filter((item) => [t(key(item.key)), t(key(item.detail)), t(key("activityProduct"))].join(" ").toLocaleLowerCase().includes(query.toLocaleLowerCase()));
+  const list = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
+    records.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "relative flex gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative flex w-7 shrink-0 justify-center", children: [
+        /* @__PURE__ */ jsx("span", { className: "z-10 flex size-7 items-center justify-center rounded-full border border-border bg-background shadow-xs", children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("size-4 bg-current", item.color), style: { maskImage: `url("${marketingActivityIcons[item.key]}")`, WebkitMaskImage: `url("${marketingActivityIcons[item.key]}")`, maskSize: "contain", WebkitMaskSize: "contain" } }) }),
+        index < records.length - 1 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "absolute bottom-0 top-8 w-px bg-border" }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 text-sm font-medium", children: t(key(item.key)) }),
+          /* @__PURE__ */ jsx("time", { className: "text-overline text-muted-foreground", children: date("2024-02-21T11:30:00Z", { hour: "numeric", minute: "2-digit" }) })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: item.key === "price" ? t(key("seasonalDiscount")) : t(key("activityProduct")) }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: t(key(item.detail)) })
+      ] })
+    ] }, item.id)),
+    !records.length ? /* @__PURE__ */ jsx("p", { role: "status", className: "text-sm text-muted-foreground", children: t(key("noActivities")) }) : null
+  ] });
+  return /* @__PURE__ */ jsxs(MarketingFrame, { tall: true, flush: true, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex h-33 shrink-0 flex-col gap-4 p-5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: t(key("recentActivities")) }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: t(key("newActivities"), void 0, { count: 5 }) })
+        ] }),
+        /* @__PURE__ */ jsx(Details, { title: t(key("recentActivities")), children: list })
+      ] }),
+      /* @__PURE__ */ jsx(Choices, { values: ["today", "yesterday", "thisWeek"], value: period, onChange: setPeriod, label: t(key("activityPeriod")) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "border-y border-border px-5", children: /* @__PURE__ */ jsx(SearchInput, { "aria-label": t(key("searchActivities")), placeholder: t(key("searchActivities")), value: query, onChange: setQuery, className: "h-12 rounded-none border-0 px-0 shadow-none" }) }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "min-h-0 flex-1 px-5 py-5", scrollbarSize: "xs", children: list })
+  ] });
+}
+const widgets = {
+  "total-sales": TotalSales,
+  "total-visitors": TotalVisitors,
+  "conversion-rate": ConversionRate,
+  "user-retention": Retention,
+  "weekly-visitors": WeeklyVisitors,
+  "visitor-channels": Channels,
+  geography: Geography,
+  "realtime-visitors": RealtimeVisitors,
+  "marketing-channels": () => /* @__PURE__ */ jsx(Channels, { marketing: true }),
+  "product-performance": ProductPerformance,
+  "shipping-tracking": ShippingTracking,
+  "my-products": MyProducts,
+  "product-categories": ProductCategories,
+  "customer-segments": CustomerSegments,
+  "sales-channels": SalesChannels,
+  "campaign-data": CampaignData,
+  "support-analytics": SupportAnalytics,
+  "recent-activities": RecentActivities
+};
+function MarketingWidgetDemo({ kind }) {
+  const Widget = widgets[kind];
+  return /* @__PURE__ */ jsx(Widget, {});
+}
+export {
+  MarketingWidgetDemo
+};
+//# sourceMappingURL=marketing-widgets.js.map