@manta-eu/react 0.1.0

package/dist/components/rdf-insights/CampaignGrid.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { Circle, DollarSign, LayoutGrid, Target, TrendingUp } from "lucide-react";
+import { Line, LineChart } from "recharts";
+import { match } from "ts-pattern";
+import { InsightCardFooter } from "./InsightCardFooter.js";
+import { InsightCardHeader } from "./InsightCardHeader.js";
+import { Badge } from "#components/badge/index";
+import { Card, CardContent } from "#components/card/index";
+import { ChartContainer } from "#components/chart/index";
+import { formatMetric } from "#lib/rdf/insights";
+import { cn } from "#lib/utils";
+function getStatusColor(status) {
+    if (!status)
+        return "text-muted-foreground fill-muted-foreground";
+    const s = status.toLowerCase();
+    if (s === "active")
+        return "text-success-foreground fill-success-foreground";
+    if (s === "paused")
+        return "text-warning-foreground fill-warning-foreground";
+    return "text-error-foreground fill-error-foreground";
+}
+function getRoasTier(roas) {
+    const tier = match(roas)
+        .when((r) => r >= 4, () => "excellent")
+        .when((r) => r >= 2, () => "good")
+        .otherwise(() => "poor");
+    return match(tier)
+        .with("excellent", () => ({ label: "Excellent", color: "text-success-foreground" }))
+        .with("good", () => ({ label: "Good", color: "text-warning-foreground" }))
+        .with("poor", () => ({ label: "Poor", color: "text-error-foreground" }))
+        .exhaustive();
+}
+function Campaign(props) {
+    const { campaign } = props;
+    const roasTier = getRoasTier(campaign.roas);
+    const sparklineConfig = {
+        value: {
+            label: "Spend Trend",
+            color: "hsl(346 87% 43%)", // Red
+        },
+    };
+    const sparklineData = campaign.sparklineData.map((value, index) => ({
+        index,
+        value,
+    }));
+    return (_jsxs("div", { className: "rounded-lg border border-muted-border/50 p-4 space-y-3 hover:border-muted-border transition-colors", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "typography-small-semibold line-clamp-1", children: campaign.name || "Unnamed Campaign" }), _jsxs("div", { className: "flex items-center gap-2 typography-tiny", children: [_jsxs(Badge, { variant: "secondary", className: "gap-1", children: [_jsx(Circle, { className: cn("size-2", getStatusColor(campaign.status)) }), _jsx("span", { children: campaign.status || "Active" })] }), campaign.channel && _jsx("span", { className: "text-muted-foreground", children: campaign.channel })] })] }), _jsx("div", { className: "h-12 -mx-2", children: _jsx(ChartContainer, { config: sparklineConfig, className: "h-full w-full", children: _jsx(LineChart, { data: sparklineData, children: _jsx(Line, { type: "monotone", dataKey: "value", stroke: "var(--color-value)", strokeWidth: 2, dot: false, isAnimationActive: false }) }) }) }), _jsxs("div", { className: "space-y-2 pt-2 border-t border-muted-border/50", children: [_jsxs("div", { className: "flex items-center justify-between typography-tiny", children: [_jsxs("span", { className: "flex items-center gap-1.5 text-muted-foreground", children: [_jsx(DollarSign, { className: "size-3" }), "Spend"] }), _jsx("span", { className: "font-mono typography-small-semibold", children: formatMetric(campaign.spend, "currency") })] }), _jsxs("div", { className: "flex items-center justify-between typography-tiny", children: [_jsxs("span", { className: "flex items-center gap-1.5 text-muted-foreground", children: [_jsx(TrendingUp, { className: "size-3" }), "Revenue"] }), _jsx("span", { className: "font-mono typography-small-semibold", children: formatMetric(campaign.revenue, "currency") })] }), _jsxs("div", { className: "flex items-center justify-between typography-tiny", children: [_jsxs("span", { className: "flex items-center gap-1.5 text-muted-foreground", children: [_jsx(Target, { className: "size-3" }), "ROAS"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: cn("font-mono typography-small-semibold", roasTier.color), children: [campaign.roas.toFixed(2), "x"] }), _jsx(Badge, { variant: "secondary", className: cn("typography-tiny", roasTier.color), children: roasTier.label })] })] })] })] }, campaign.uri));
+}
+export function CampaignGrid(props) {
+    const { data } = props;
+    if (!isPresent(data.campaigns))
+        return null;
+    const totalSpend = data.campaigns.reduce((sum, c) => sum + c.spend, 0);
+    return (_jsxs(Card, { className: "shadow-none gap-4 py-4", children: [_jsx(InsightCardHeader, { icon: LayoutGrid, title: `Campaigns (${data.campaigns.length})` }), _jsxs(CardContent, { className: "pt-4", children: [_jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: data.campaigns.map((campaign) => (_jsx(Campaign, { campaign: campaign }, campaign.uri))) }), _jsx(InsightCardFooter, { left: `Showing ${data.campaigns.length} campaigns`, right: `Total Spend: ${formatMetric(totalSpend, "currency")}` })] })] }));
+}

package/dist/components/rdf-insights/CampaignPerformanceSummary.d.ts

@@ -0,0 +1,7 @@
+import type { CampaignPerformanceSummaryData } from "#lib/rdf/types";
+type CampaignPerformanceSummaryProps = {
+    data: CampaignPerformanceSummaryData;
+};
+export declare function CampaignPerformanceSummary(props: CampaignPerformanceSummaryProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CampaignPerformanceSummary.d.ts.map

package/dist/components/rdf-insights/CampaignPerformanceSummary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CampaignPerformanceSummary.d.ts","sourceRoot":"","sources":["../../../src/components/rdf-insights/CampaignPerformanceSummary.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,gBAAgB,CAAC;AAGrE,KAAK,+BAA+B,GAAG;IACrC,IAAI,EAAE,8BAA8B,CAAC;CACtC,CAAC;AAYF,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,+BAA+B,2CA2KhF"}

package/dist/components/rdf-insights/CampaignPerformanceSummary.js

@@ -0,0 +1,33 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Eye, MousePointerClick, Target, TrendingUp } from "lucide-react";
+import { isNotNil, sum } from "ramda";
+import { InsightCardHeader } from "./InsightCardHeader.js";
+import { Badge } from "#components/badge/index";
+import { Card, CardContent, CardFooter } from "#components/card/index";
+import { Progress } from "#components/progress/index";
+import { cn } from "#lib/utils";
+function getRoasTier(roas) {
+    if (roas >= 4) {
+        return { label: "Excellent", className: "bg-success text-success-foreground" };
+    }
+    if (roas >= 2) {
+        return { label: "Good", className: "bg-warning text-warning-foreground" };
+    }
+    return { label: "Poor", className: "bg-error text-error-foreground" };
+}
+export function CampaignPerformanceSummary(props) {
+    const { data } = props;
+    const { campaigns } = data;
+    const sortedCampaigns = [...campaigns].sort((a, b) => b.roas - a.roas);
+    const totalSpend = sum(campaigns.map(({ spendUsd }) => spendUsd));
+    const totalRevenue = sum(campaigns.map(({ revenueUsd }) => revenueUsd));
+    const overallRoas = totalSpend > 0 ? totalRevenue / totalSpend : 0;
+    const maxSpend = Math.max(...campaigns.map((c) => c.spendUsd));
+    const maxRevenue = Math.max(...campaigns.map((c) => c.revenueUsd));
+    return (_jsxs(Card, { className: "shadow-none gap-4 py-4", children: [_jsx(InsightCardHeader, { icon: Target, title: "Campaign Performance", badge: _jsxs(Badge, { variant: "secondary", className: "typography-tiny shrink-0", children: [campaigns.length, " ", campaigns.length === 1 ? "Campaign" : "Campaigns"] }) }), _jsx(CardContent, { className: "pt-4 space-y-4", children: sortedCampaigns.map((campaign, index) => {
+                    const tier = getRoasTier(campaign.roas);
+                    const spendShare = maxSpend > 0 ? (campaign.spendUsd / maxSpend) * 100 : 0;
+                    const revenueShare = maxRevenue > 0 ? (campaign.revenueUsd / maxRevenue) * 100 : 0;
+                    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("div", { className: "flex-1 min-w-0", children: _jsxs("div", { className: "flex items-center gap-2", children: [index < 3 && (_jsx("div", { className: cn("flex size-5 items-center justify-center rounded-full typography-tiny-semibold shrink-0", index === 0 && "bg-rank-1 text-rank-1-foreground", index === 1 && "bg-rank-2 text-rank-2-foreground", index === 2 && "bg-rank-3 text-rank-3-foreground"), children: index + 1 })), _jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx("div", { className: "typography-small-medium truncate", children: campaign.campaignName || "Unknown Campaign" }), campaign.status && (_jsx(Badge, { variant: "secondary", className: cn("typography-tiny shrink-0", campaign.status.toLowerCase() === "active" && "bg-success text-success-foreground", campaign.status.toLowerCase() === "paused" && "bg-muted text-muted-foreground"), children: campaign.status }))] })] }) }), _jsxs(Badge, { variant: "secondary", className: cn("typography-tiny shrink-0", tier.className), children: [campaign.roas.toFixed(2), "x ROAS"] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3 pl-7", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center justify-between typography-tiny", children: [_jsx("span", { className: "typography-tiny-medium tracking-wide text-muted-foreground/70 uppercase", children: "Spend" }), _jsxs("span", { className: "font-mono", children: ["$", campaign.spendUsd.toLocaleString("en-US", { maximumFractionDigits: 0 })] })] }), _jsx(Progress, { value: spendShare, className: "h-1.5 bg-[hsl(346_87%_43%)]/20 [&_[data-slot=progress-indicator]]:bg-[hsl(346_87%_43%)]" })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center justify-between typography-tiny", children: [_jsx("span", { className: "typography-tiny-medium tracking-wide text-muted-foreground/70 uppercase", children: "Revenue" }), _jsxs("span", { className: "font-mono", children: ["$", campaign.revenueUsd.toLocaleString("en-US", { maximumFractionDigits: 0 })] })] }), _jsx(Progress, { value: revenueShare, className: "h-1.5 bg-[hsl(142_76%_36%)]/20 [&_[data-slot=progress-indicator]]:bg-[hsl(142_76%_36%)]" })] })] }), (campaign.impressions !== null || campaign.clicks !== null || campaign.conversions !== null) && (_jsxs("div", { className: "grid grid-cols-3 gap-2 pl-7 pt-1", children: [isNotNil(campaign.impressions) && (_jsxs("div", { className: "flex items-center gap-1.5 typography-tiny text-muted-foreground", children: [_jsx(Eye, { className: "size-3" }), _jsx("span", { children: campaign.impressions.toLocaleString("en-US", { notation: "compact" }) })] })), isNotNil(campaign.clicks) && (_jsxs("div", { className: "flex items-center gap-1.5 typography-tiny text-muted-foreground", children: [_jsx(MousePointerClick, { className: "size-3" }), _jsx("span", { children: campaign.clicks.toLocaleString("en-US", { notation: "compact" }) })] })), isNotNil(campaign.ctr) && (_jsx("div", { className: "flex items-center gap-1.5 typography-tiny text-muted-foreground", children: _jsxs("span", { children: ["CTR: ", (campaign.ctr * 100).toFixed(2), "%"] }) }))] })), (campaign.conversions !== null || campaign.costPerConversion !== null) && (_jsxs("div", { className: "grid grid-cols-2 gap-2 pl-7 typography-tiny text-muted-foreground", children: [campaign.conversions !== null && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(TrendingUp, { className: "size-3" }), _jsxs("span", { children: [campaign.conversions, " conversions"] })] })), isNotNil(campaign.costPerConversion) && (_jsx("div", { className: "flex items-center gap-1.5", children: _jsxs("span", { children: ["$", campaign.costPerConversion.toFixed(2), " CPA"] }) }))] })), index < sortedCampaigns.length - 1 && _jsx("div", { className: "h-px bg-muted-border mt-2" })] }, campaign.uri));
+                }) }), _jsx(CardFooter, { className: "pt-0 border-t border-muted-border pt-4", children: _jsxs("div", { className: "grid grid-cols-3 gap-4 w-full", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "typography-tiny-medium tracking-wide text-muted-foreground/70 uppercase", children: "Total Spend" }), _jsxs("div", { className: "typography-large-body-semibold font-mono", children: ["$", totalSpend.toLocaleString("en-US", { maximumFractionDigits: 0 })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "typography-tiny-medium tracking-wide text-muted-foreground/70 uppercase", children: "Total Revenue" }), _jsxs("div", { className: "typography-large-body-semibold font-mono", children: ["$", totalRevenue.toLocaleString("en-US", { maximumFractionDigits: 0 })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "typography-tiny-medium tracking-wide text-muted-foreground/70 uppercase", children: "Overall ROAS" }), _jsxs("div", { className: cn("typography-large-body-semibold font-mono", getRoasTier(overallRoas).className), children: [overallRoas.toFixed(2), "x"] })] })] }) })] }));
+}

package/dist/components/rdf-insights/CodeView.d.ts

@@ -0,0 +1,6 @@
+type CodeViewProps = {
+    toolInput: unknown;
+};
+export declare function CodeView(props: CodeViewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CodeView.d.ts.map

package/dist/components/rdf-insights/CodeView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeView.d.ts","sourceRoot":"","sources":["../../../src/components/rdf-insights/CodeView.tsx"],"names":[],"mappings":"AAEA,KAAK,aAAa,GAAG;IACnB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA0C5C"}

package/dist/components/rdf-insights/CodeView.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "#lib/utils";
+export function CodeView(props) {
+    const { toolInput } = props;
+    if (!toolInput || typeof toolInput !== "object") {
+        return _jsx("div", { className: "typography-small text-muted-foreground p-4", children: "No query information available" });
+    }
+    const input = toolInput;
+    const sparql = "sparql" in input && typeof input.sparql === "string" ? input.sparql : null;
+    return (_jsxs("div", { className: "space-y-3 p-4", children: [sparql && (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "typography-tiny-medium tracking-wide text-muted-foreground/70 uppercase", children: "SPARQL Query" }), _jsx("pre", { className: cn("overflow-auto rounded-md bg-muted/50 p-3 typography-tiny font-mono leading-relaxed", "border border-muted-border/50"), children: _jsx("code", { children: sparql }) })] })), Object.entries(input)
+                .filter(([key]) => key !== "sparql")
+                .map(([key, value]) => (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "typography-tiny-medium tracking-wide text-muted-foreground/70 uppercase", children: key }), _jsx("pre", { className: cn("overflow-auto rounded-md bg-muted/50 p-3 typography-tiny font-mono leading-relaxed", "border border-muted-border/50"), children: _jsx("code", { children: typeof value === "string" ? value : JSON.stringify(value, null, 2) }) })] }, key)))] }));
+}

package/dist/components/rdf-insights/DailyPerformance.d.ts

@@ -0,0 +1,7 @@
+import type { DailyPerformanceData } from "#lib/rdf/types";
+type DailyPerformanceProps = {
+    data: DailyPerformanceData;
+};
+export declare function DailyPerformance(props: DailyPerformanceProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=DailyPerformance.d.ts.map

package/dist/components/rdf-insights/DailyPerformance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DailyPerformance.d.ts","sourceRoot":"","sources":["../../../src/components/rdf-insights/DailyPerformance.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAE3D,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,oBAAoB,CAAC;CAC5B,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,kDAsG5D"}

package/dist/components/rdf-insights/DailyPerformance.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { Calendar, DollarSign, ShoppingCart } from "lucide-react";
+import { CartesianGrid, Legend, Line, LineChart, XAxis, YAxis } from "recharts";
+import { InsightCardHeader } from "./InsightCardHeader.js";
+import { MetricDisplay } from "./MetricDisplay.js";
+import { Card, CardContent } from "#components/card/index";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "#components/chart/index";
+import { formatMetric } from "#lib/rdf/insights";
+export function DailyPerformance(props) {
+    const { data } = props;
+    if (!isPresent(data.days))
+        return null;
+    const totalRevenue = data.days.reduce((sum, day) => sum + day.revenue, 0);
+    const totalSpend = data.days.reduce((sum, day) => sum + day.spend, 0);
+    const totalOrders = data.days.reduce((sum, day) => sum + day.orders, 0);
+    const avgDailyRevenue = totalRevenue / data.days.length;
+    const avgDailySpend = totalSpend / data.days.length;
+    const avgDailyOrders = totalOrders / data.days.length;
+    const overallRoas = totalSpend > 0 ? totalRevenue / totalSpend : 0;
+    const chartData = data.days.map((day) => ({
+        date: new Date(day.date).toLocaleDateString("en-US", { month: "short", day: "numeric" }),
+        revenue: day.revenue,
+        spend: day.spend,
+        orders: day.orders,
+    }));
+    const chartConfig = {
+        revenue: {
+            label: "Revenue",
+            color: "hsl(142 76% 36%)", // Green
+        },
+        spend: {
+            label: "Spend",
+            color: "hsl(346 87% 43%)", // Red
+        },
+        orders: {
+            label: "Orders",
+            color: "hsl(221 83% 53%)", // Blue
+        },
+    };
+    const firstDay = data.days[0];
+    const lastDay = data.days[data.days.length - 1];
+    const startDate = firstDay ? new Date(firstDay.date) : null;
+    const endDate = lastDay ? new Date(lastDay.date) : null;
+    function formatDate(date) {
+        return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+    }
+    const dateRange = startDate && endDate ? `${formatDate(startDate)} - ${formatDate(endDate)}` : "";
+    return (_jsxs(Card, { className: "shadow-none gap-4 py-4", children: [_jsx(InsightCardHeader, { icon: Calendar, title: "Daily Performance", dateRange: dateRange }), _jsxs(CardContent, { className: "pt-4 space-y-4", children: [_jsx(ChartContainer, { config: chartConfig, className: "h-[300px]", children: _jsxs(LineChart, { data: chartData, margin: { left: 0, right: 0 }, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "date", tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => value }), _jsx(YAxis, { tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => `$${(value / 1000).toFixed(0)}k` }), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, {}) }), _jsx(Legend, {}), _jsx(Line, { dataKey: "revenue", type: "monotone", stroke: "var(--color-revenue)", strokeWidth: 2, dot: false }), _jsx(Line, { dataKey: "spend", type: "monotone", stroke: "var(--color-spend)", strokeWidth: 2, dot: false }), _jsx(Line, { dataKey: "orders", type: "monotone", stroke: "var(--color-orders)", strokeWidth: 2, strokeDasharray: "5 5", dot: false })] }) }), _jsxs("div", { className: "grid grid-cols-3 gap-4 pt-4", children: [_jsx(MetricDisplay, { icon: DollarSign, label: "Revenue", value: formatMetric(totalRevenue, "currency"), subtitle: `$${avgDailyRevenue.toFixed(0)}/day avg` }), _jsx(MetricDisplay, { icon: DollarSign, label: "Spend", value: formatMetric(totalSpend, "currency"), subtitle: `$${avgDailySpend.toFixed(0)}/day avg` }), _jsx(MetricDisplay, { icon: ShoppingCart, label: "Orders", value: totalOrders.toString(), subtitle: `${avgDailyOrders.toFixed(1)}/day avg` })] }), _jsxs("div", { className: "pt-2 border-t border-muted-border/50 flex items-center justify-between", children: [_jsx("span", { className: "typography-tiny text-muted-foreground", children: "Overall ROAS" }), _jsxs("span", { className: "typography-small-semibold font-mono", children: [overallRoas.toFixed(2), "x"] })] })] })] }));
+}

package/dist/components/rdf-insights/EntityRelationTreeInsight.d.ts

@@ -0,0 +1,12 @@
+export type EntityRelationTreeRoot = {
+    iri: string;
+    label: string;
+    typeIri?: string;
+};
+type EntityRelationTreeInsightProps = {
+    roots: EntityRelationTreeRoot[];
+};
+/** Renders relation trees for already-filtered connected-account roots. */
+export declare function EntityRelationTreeInsight(props: EntityRelationTreeInsightProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=EntityRelationTreeInsight.d.ts.map

package/dist/components/rdf-insights/EntityRelationTreeInsight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntityRelationTreeInsight.d.ts","sourceRoot":"","sources":["../../../src/components/rdf-insights/EntityRelationTreeInsight.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,sBAAsB,GAAG;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,KAAK,8BAA8B,GAAG;IACpC,KAAK,EAAE,sBAAsB,EAAE,CAAC;CACjC,CAAC;AAEF,2EAA2E;AAC3E,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,8BAA8B,kDAY9E"}

package/dist/components/rdf-insights/EntityRelationTreeInsight.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { EntityRelationTree } from "#ldo-ui";
+/** Renders relation trees for already-filtered connected-account roots. */
+export function EntityRelationTreeInsight(props) {
+    const { roots } = props;
+    if (!isPresent(roots))
+        return null;
+    return (_jsx("div", { className: "flex flex-col gap-3", children: roots.map((root) => (_jsx(EntityRelationTree, { rootIri: root.iri, rootLabel: root.label, rootTypeIri: root.typeIri }, root.iri))) }));
+}

package/dist/components/rdf-insights/InsightCard.d.ts

@@ -0,0 +1,7 @@
+type InsightCardProps = {
+    result: unknown;
+    toolInput?: unknown;
+};
+export declare function InsightCard(props: InsightCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=InsightCard.d.ts.map

package/dist/components/rdf-insights/InsightCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InsightCard.d.ts","sourceRoot":"","sources":["../../../src/components/rdf-insights/InsightCard.tsx"],"names":[],"mappings":"AAyBA,KAAK,gBAAgB,GAAG;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAwBlD"}

package/dist/components/rdf-insights/InsightCard.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { isSparqlJsonResults } from "@manta-eu/client/shared/tools";
+import { isJsonLdGraphDocument } from "@manta-eu/client/types/jsonld";
+import { isPresent } from "@manta-eu/lib/present";
+import { useMemo } from "react";
+import { match, P } from "ts-pattern";
+import { Graph } from "../graph/index.js";
+import { CampaignChannelMix } from "./CampaignChannelMix.js";
+import { CampaignGrid } from "./CampaignGrid.js";
+import { CampaignPerformanceSummary } from "./CampaignPerformanceSummary.js";
+import { DailyPerformance } from "./DailyPerformance.js";
+import { EntityRelationTreeInsight } from "./EntityRelationTreeInsight.js";
+import { InsightTabs } from "./InsightTabs.js";
+import { KpiDashboard } from "./KpiDashboard.js";
+import { MetaDailyInsights } from "./MetaDailyInsights.js";
+import { ProductCard } from "./ProductCard.js";
+import { ProductProfitability } from "./ProductProfitability.js";
+import { ProductSalesRanking } from "./ProductSalesRanking.js";
+import { ProductVariantsTable } from "./ProductVariantsTable.js";
+import { RoasBenchmark } from "./RoasBenchmark.js";
+import { SparqlResultsTable } from "./SparqlResultsTable.js";
+import { useExtractedInsights } from "./useExtractedInsights.js";
+import { useConnectedAccountEntityIris } from "#ldo-ui";
+import { extractProductVariant } from "#lib/rdf/index";
+import { cn } from "#lib/utils";
+export function InsightCard(props) {
+    const { result, toolInput } = props;
+    if (isSparqlJsonResults(result)) {
+        return _jsx(SparqlResultsTable, { results: result });
+    }
+    if (!isJsonLdGraphDocument(result)) {
+        return (_jsxs(_Fragment, { children: [_jsx("h5", { className: "typography-tiny-medium mb-1 text-muted-foreground", children: "Result:" }), _jsx("code", { className: cn("max-w-[450px] whitespace-pre-wrap break-words", "overflow-auto rounded-md bg-background/80 p-2 typography-tiny"), children: typeof result === "string" ? result : JSON.stringify(result, null, 2) })] }));
+    }
+    return _jsx(JsonLdInsightCard, { jsonLd: result, toolInput: toolInput });
+}
+function JsonLdInsightCard(props) {
+    const { jsonLd, toolInput } = props;
+    const insights = useExtractedInsights(jsonLd);
+    const { iris: connectedAccountIris, isLoading: isMembershipLoading } = useConnectedAccountEntityIris();
+    const treeRoots = useMemo(() => insights.entityRelationTree.filter((root) => connectedAccountIris.has(root.iri)), [insights.entityRelationTree, connectedAccountIris]);
+    const hasTreeInsight = !isMembershipLoading && isPresent(treeRoots);
+    const hasGraphData = isPresent(jsonLd["@graph"]);
+    const showGraph = hasGraphData;
+    const pureCardContent = match(insights)
+        .with({ productProfitability: P.not(P.nullish) }, (i) => _jsx(ProductProfitability, { data: i.productProfitability }))
+        .with({ productSalesRanking: P.not(P.nullish) }, (i) => _jsx(ProductSalesRanking, { data: i.productSalesRanking }))
+        .with({ campaignPerformance: P.not(P.nullish) }, (i) => _jsx(CampaignPerformanceSummary, { data: i.campaignPerformance }))
+        .with({ roasBenchmark: P.not(P.nullish) }, (i) => _jsx(RoasBenchmark, { data: i.roasBenchmark }))
+        .with({ metaDailyInsights: P.not(P.nullish) }, (i) => _jsx(MetaDailyInsights, { data: i.metaDailyInsights }))
+        .with({ dailyPerformance: P.not(P.nullish) }, (i) => _jsx(DailyPerformance, { data: i.dailyPerformance }))
+        .with({ campaignChannelMix: P.not(P.nullish) }, (i) => _jsx(CampaignChannelMix, { data: i.campaignChannelMix }))
+        .with({ productVariants: P.not(P.nullish) }, (i) => _jsx(ProductVariantsTable, { data: i.productVariants }))
+        .with({ campaignGrid: P.not(P.nullish) }, (i) => _jsx(CampaignGrid, { data: i.campaignGrid }))
+        .with({ product: P.not(P.nullish) }, (i) => {
+        const variant = extractProductVariant(jsonLd, i.product.uri);
+        return _jsx(ProductCard, { product: i.product, variant: variant });
+    })
+        .with({ kpis: P.not(P.nullish) }, (i) => _jsx(KpiDashboard, { kpis: i.kpis }))
+        .otherwise(() => null);
+    const treeInsight = hasTreeInsight ? _jsx(EntityRelationTreeInsight, { roots: treeRoots }) : null;
+    const cardContent = pureCardContent || treeInsight ? (_jsxs("div", { className: "flex flex-col gap-3", children: [pureCardContent, treeInsight] })) : null;
+    const hasCardInsights = insights.hasExtractableInsights || hasTreeInsight;
+    if (hasCardInsights && showGraph) {
+        return _jsx(InsightTabs, { cardContent: cardContent, jsonLd: jsonLd, toolInput: toolInput });
+    }
+    if (hasCardInsights) {
+        return cardContent;
+    }
+    if (showGraph) {
+        return _jsx(Graph, { jsonLd: jsonLd });
+    }
+    return null;
+}

package/dist/components/rdf-insights/InsightCardFooter.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+type InsightCardFooterProps = {
+    left: ReactNode;
+    right: ReactNode;
+};
+export declare function InsightCardFooter(props: InsightCardFooterProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=InsightCardFooter.d.ts.map

package/dist/components/rdf-insights/InsightCardFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InsightCardFooter.d.ts","sourceRoot":"","sources":["../../../src/components/rdf-insights/InsightCardFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,sBAAsB,GAAG;IAC5B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAS9D"}

package/dist/components/rdf-insights/InsightCardFooter.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function InsightCardFooter(props) {
+    const { left, right } = props;
+    return (_jsxs("div", { className: "pt-2 border-t border-muted-border/50 flex items-center justify-between typography-tiny", children: [_jsx("span", { className: "text-muted-foreground", children: left }), _jsx("span", { className: "font-mono typography-small-semibold", children: right })] }));
+}

package/dist/components/rdf-insights/InsightCardHeader.d.ts

@@ -0,0 +1,12 @@
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+type InsightCardHeaderProps = {
+    icon: LucideIcon;
+    title: string;
+    subtitle?: ReactNode;
+    dateRange?: string;
+    badge?: ReactNode;
+};
+export declare function InsightCardHeader(props: InsightCardHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=InsightCardHeader.d.ts.map

package/dist/components/rdf-insights/InsightCardHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InsightCardHeader.d.ts","sourceRoot":"","sources":["../../../src/components/rdf-insights/InsightCardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,sBAAsB,GAAG;IAC5B,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAgB9D"}

package/dist/components/rdf-insights/InsightCardHeader.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardHeader, CardTitle } from "#components/card/index";
+export function InsightCardHeader(props) {
+    const { icon: Icon, title, subtitle, dateRange, badge } = props;
+    return (_jsx(CardHeader, { className: "pb-0", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { className: "size-4 text-muted-foreground" }), _jsxs(CardTitle, { className: "typography-small-semibold tracking-tight", children: [title, subtitle && _jsxs("span", { className: "ml-2 text-muted-foreground", children: ["\u00B7 ", subtitle] }), dateRange && _jsxs("span", { className: "ml-2 text-muted-foreground", children: ["\u00B7 ", dateRange] }), badge && _jsx("span", { className: "ml-2", children: badge })] })] }) }));
+}

package/dist/components/rdf-insights/InsightTabs.d.ts

@@ -0,0 +1,10 @@
+import type { JsonLdGraphDocument } from "@manta-eu/client/types/jsonld";
+import type { ReactNode } from "react";
+type InsightTabsProps = {
+    cardContent: ReactNode;
+    jsonLd: JsonLdGraphDocument;
+    toolInput: unknown;
+};
+export declare function InsightTabs(props: InsightTabsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=InsightTabs.d.ts.map

package/dist/components/rdf-insights/InsightTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InsightTabs.d.ts","sourceRoot":"","sources":["../../../src/components/rdf-insights/InsightTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAEzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,KAAK,gBAAgB,GAAG;IACtB,WAAW,EAAE,SAAS,CAAC;IACvB,MAAM,EAAE,mBAAmB,CAAC;IAC5B,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA0DlD"}

package/dist/components/rdf-insights/InsightTabs.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Code2, LayoutGrid, Network } from "lucide-react";
+import { Graph } from "../graph/index.js";
+import { CodeView } from "./CodeView.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "#components/tabs/index";
+import { cn } from "#lib/utils";
+export function InsightTabs(props) {
+    const { cardContent, jsonLd, toolInput } = props;
+    return (_jsxs(Tabs, { defaultValue: "card", className: "relative", children: [_jsxs(TabsList, { className: cn("absolute top-4 right-4 z-10 flex gap-1", "bg-muted/80 backdrop-blur-sm rounded-md p-1 border border-muted-border/50 h-auto"), children: [_jsx(TabsTrigger, { value: "card", className: cn("p-1.5 h-auto", "data-[state=active]:bg-background data-[state=active]:text-default-foreground", "data-[state=active]:shadow-sm data-[state=inactive]:text-muted-foreground", "hover:text-default-foreground hover:bg-background/50"), "aria-label": "Card View", children: _jsx(LayoutGrid, { className: "size-3.5" }) }), _jsx(TabsTrigger, { value: "graph", className: cn("p-1.5 h-auto", "data-[state=active]:bg-background data-[state=active]:text-default-foreground", "data-[state=active]:shadow-sm data-[state=inactive]:text-muted-foreground", "hover:text-default-foreground hover:bg-background/50"), "aria-label": "Graph View", children: _jsx(Network, { className: "size-3.5" }) }), _jsx(TabsTrigger, { value: "code", className: cn("p-1.5 h-auto", "data-[state=active]:bg-background data-[state=active]:text-default-foreground", "data-[state=active]:shadow-sm data-[state=inactive]:text-muted-foreground", "hover:text-default-foreground hover:bg-background/50"), "aria-label": "Code View", children: _jsx(Code2, { className: "size-3.5" }) })] }), _jsx(TabsContent, { value: "card", children: cardContent }), _jsx(TabsContent, { value: "graph", children: _jsx(Graph, { jsonLd: jsonLd }) }), _jsx(TabsContent, { value: "code", children: _jsx(CodeView, { toolInput: toolInput }) })] }));
+}

package/dist/components/rdf-insights/KpiDashboard.d.ts

@@ -0,0 +1,7 @@
+import type { CompanyKpis } from "#lib/rdf/types";
+type KpiDashboardProps = {
+    kpis: CompanyKpis;
+};
+export declare function KpiDashboard(props: KpiDashboardProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=KpiDashboard.d.ts.map

package/dist/components/rdf-insights/KpiDashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KpiDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/rdf-insights/KpiDashboard.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,WAAW,CAAC;CACnB,CAAC;AAoDF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,kDA0CpD"}

package/dist/components/rdf-insights/KpiDashboard.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { Building2 } from "lucide-react";
+import { InsightCardHeader } from "./InsightCardHeader.js";
+import { Card, CardContent } from "#components/card/index";
+import { formatMetric } from "#lib/rdf/insights";
+const kpiMetadata = {
+    mer30d: {
+        label: "MER (30d)",
+        format: "multiplier",
+        description: "Marketing Efficiency Ratio - revenue generated per dollar spent",
+    },
+    blendedRoas30d: {
+        label: "ROAS (30d)",
+        format: "multiplier",
+        description: "Return on Ad Spend - 30-day blended ROAS",
+    },
+    blendedCac30dUsd: {
+        label: "CAC (30d)",
+        format: "currency",
+        description: "Customer Acquisition Cost - cost to acquire one customer",
+    },
+    last30dSpendUsd: {
+        label: "Spend (30d)",
+        format: "currency",
+        description: "Total advertising spend in the last 30 days",
+    },
+    last30dRevenueUsd: {
+        label: "Revenue (30d)",
+        format: "currency",
+        description: "Total revenue generated in the last 30 days",
+    },
+    avgAov30d: {
+        label: "AOV (30d)",
+        format: "currency",
+        description: "Average Order Value - average revenue per order",
+    },
+    grossMargin30d: {
+        label: "Gross Margin (30d)",
+        format: "percentage",
+        description: "Gross profit margin percentage",
+    },
+};
+export function KpiDashboard(props) {
+    const { kpis } = props;
+    const metrics = [];
+    Object.entries(kpis).forEach(([key, value]) => {
+        if (value !== null) {
+            const metadata = kpiMetadata[key];
+            if (metadata) {
+                metrics.push({
+                    label: metadata.label,
+                    value,
+                    format: metadata.format,
+                });
+            }
+        }
+    });
+    if (!isPresent(metrics)) {
+        return null;
+    }
+    return (_jsxs(Card, { className: "shadow-none gap-4 py-4", children: [_jsx(InsightCardHeader, { icon: Building2, title: "Your Performance (30 days)" }), _jsx(CardContent, { className: "pt-4", children: _jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-3", children: metrics.map((metric) => (_jsxs("div", { className: "space-y-0.5", children: [_jsx("div", { className: "typography-tiny-medium tracking-wide text-muted-foreground/70 uppercase", children: metric.label }), _jsx("div", { className: "typography-large-body-semibold font-mono leading-tight", children: formatMetric(metric.value, metric.format) })] }, metric.label))) }) })] }));
+}

package/dist/components/rdf-insights/MetaDailyInsights.d.ts

@@ -0,0 +1,7 @@
+import type { MetaDailyInsightsData } from "#lib/rdf/types";
+type MetaDailyInsightsProps = {
+    data: MetaDailyInsightsData;
+};
+export declare function MetaDailyInsights(props: MetaDailyInsightsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=MetaDailyInsights.d.ts.map

package/dist/components/rdf-insights/MetaDailyInsights.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetaDailyInsights.d.ts","sourceRoot":"","sources":["../../../src/components/rdf-insights/MetaDailyInsights.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAE5D,KAAK,sBAAsB,GAAG;IAC5B,IAAI,EAAE,qBAAqB,CAAC;CAC7B,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,kDA8G9D"}

package/dist/components/rdf-insights/MetaDailyInsights.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { Calendar, DollarSign, ShoppingCart, TrendingUp } from "lucide-react";
+import { CartesianGrid, Legend, Line, LineChart, XAxis, YAxis } from "recharts";
+import { InsightCardHeader } from "./InsightCardHeader.js";
+import { MetricDisplay } from "./MetricDisplay.js";
+import { Card, CardContent, CardFooter } from "#components/card/index";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "#components/chart/index";
+import { formatMetric } from "#lib/rdf/insights";
+export function MetaDailyInsights(props) {
+    const { data } = props;
+    if (!isPresent(data.days))
+        return null;
+    const totalSpend = data.days.reduce((sum, day) => sum + day.spend, 0);
+    const totalRevenue = data.days.reduce((sum, day) => sum + day.revenue, 0);
+    const avgDailySpend = totalSpend / data.days.length;
+    const avgDailyRevenue = totalRevenue / data.days.length;
+    const overallRoas = totalSpend > 0 ? totalRevenue / totalSpend : 0;
+    const totalPurchases = data.days.reduce((sum, day) => sum + (day.purchases || 0), 0);
+    const chartData = data.days.map((day) => ({
+        date: new Date(day.date).toLocaleDateString("en-US", { month: "short", day: "numeric" }),
+        revenue: day.revenue,
+        spend: day.spend,
+        roas: day.roas,
+    }));
+    const chartConfig = {
+        revenue: {
+            label: "Revenue",
+            color: "hsl(142 76% 36%)", // Green
+        },
+        spend: {
+            label: "Spend",
+            color: "hsl(346 87% 43%)", // Red
+        },
+        roas: {
+            label: "ROAS",
+            color: "hsl(221 83% 53%)", // Blue
+        },
+    };
+    const firstDay = data.days[0];
+    const lastDay = data.days[data.days.length - 1];
+    const startDate = firstDay ? new Date(firstDay.date) : null;
+    const endDate = lastDay ? new Date(lastDay.date) : null;
+    function formatDate(date) {
+        return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+    }
+    const dateRange = startDate && endDate ? `${formatDate(startDate)} - ${formatDate(endDate)}` : "";
+    return (_jsxs(Card, { className: "shadow-none gap-4 py-4", children: [_jsx(InsightCardHeader, { icon: Calendar, title: "Meta Campaign Daily Insights", subtitle: data.campaignName, dateRange: dateRange }), _jsxs(CardContent, { className: "pt-4 space-y-4", children: [_jsx("div", { className: "bg-muted/10 rounded-radius p-4", children: _jsx(ChartContainer, { config: chartConfig, className: "h-[300px]", children: _jsxs(LineChart, { data: chartData, margin: { left: 0, right: 0 }, children: [_jsx(CartesianGrid, { vertical: false, strokeOpacity: 0.3 }), _jsx(XAxis, { dataKey: "date", tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => value }), _jsx(YAxis, { tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => `$${(value / 1000).toFixed(0)}k` }), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, {}) }), _jsx(Legend, {}), _jsx(Line, { dataKey: "revenue", type: "monotone", stroke: "var(--color-revenue)", strokeWidth: 2, dot: false }), _jsx(Line, { dataKey: "spend", type: "monotone", stroke: "var(--color-spend)", strokeWidth: 2, dot: false }), _jsx(Line, { dataKey: "roas", type: "monotone", stroke: "var(--color-roas)", strokeWidth: 2, strokeDasharray: "5 5", dot: false })] }) }) }), _jsxs("div", { className: "grid grid-cols-3 gap-4 pt-4", children: [_jsx(MetricDisplay, { icon: DollarSign, label: "Spend", value: formatMetric(totalSpend, "currency"), subtitle: `$${avgDailySpend.toFixed(0)}/day avg` }), _jsx(MetricDisplay, { icon: TrendingUp, label: "Revenue", value: formatMetric(totalRevenue, "currency"), subtitle: `$${avgDailyRevenue.toFixed(0)}/day avg` }), _jsx(MetricDisplay, { icon: ShoppingCart, label: "Purchases", value: totalPurchases.toString(), subtitle: `${(totalPurchases / data.days.length).toFixed(1)}/day avg` })] })] }), _jsx(CardFooter, { className: "pt-0 border-t border-muted-border pt-4", children: _jsxs("div", { className: "flex items-center justify-between w-full typography-tiny", children: [_jsx("span", { className: "text-muted-foreground", children: "Overall ROAS" }), _jsxs("span", { className: "font-mono typography-small-semibold", children: [overallRoas.toFixed(2), "x"] })] }) })] }));
+}

package/dist/components/rdf-insights/MetricDisplay.d.ts

@@ -0,0 +1,9 @@
+import type { LucideIcon } from "lucide-react";
+export type MetricDisplayProps = {
+    icon: LucideIcon;
+    label: string;
+    value: string;
+    subtitle?: string;
+};
+export declare function MetricDisplay(props: MetricDisplayProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MetricDisplay.d.ts.map

package/dist/components/rdf-insights/MetricDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/rdf-insights/MetricDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAatD"}

package/dist/components/rdf-insights/MetricDisplay.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function MetricDisplay(props) {
+    const { icon: Icon, label, value, subtitle } = props;
+    return (_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-1.5 typography-tiny-medium tracking-wide uppercase text-muted-foreground/70", children: [_jsx(Icon, { className: "size-3" }), label] }), _jsx("div", { className: "typography-large-body-semibold font-mono leading-tight", children: value }), subtitle && _jsx("div", { className: "typography-tiny text-muted-foreground", children: subtitle })] }));
+}

package/dist/components/rdf-insights/ProductCard.d.ts

@@ -0,0 +1,8 @@
+import type { Product, ProductVariant } from "#lib/rdf/types";
+type ProductCardProps = {
+    product: Product;
+    variant: ProductVariant | null;
+};
+export declare function ProductCard(props: ProductCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ProductCard.d.ts.map

package/dist/components/rdf-insights/ProductCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCard.d.ts","sourceRoot":"","sources":["../../../src/components/rdf-insights/ProductCard.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAG9D,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,cAAc,GAAG,IAAI,CAAC;CAChC,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA8ElD"}

package/dist/components/rdf-insights/ProductCard.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { AlertCircle, ExternalLink, ShoppingBag, User } from "lucide-react";
+import { Badge } from "#components/badge/index";
+import { Card, CardContent, CardHeader, CardTitle } from "#components/card/index";
+import { determineAvailabilityStatus, formatMetric } from "#lib/rdf/insights";
+import { cn } from "#lib/utils";
+export function ProductCard(props) {
+    const { product, variant } = props;
+    const availabilityStatus = determineAvailabilityStatus(product.quantity);
+    const statusConfig = {
+        available: { color: "bg-success-foreground", text: "Available" },
+        "low-stock": { color: "bg-warning-foreground", text: "Low Stock" },
+        "made-to-order": { color: "bg-info-foreground", text: "Made to Order" },
+        "out-of-stock": { color: "bg-error-foreground", text: "Out of Stock" },
+    };
+    const status = statusConfig[availabilityStatus];
+    return (_jsxs(Card, { className: "shadow-none gap-4 py-4", children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(ShoppingBag, { className: "size-5 text-muted-foreground mt-0.5" }), _jsxs("div", { className: "flex-1", children: [_jsx(CardTitle, { className: "typography-body", children: product.name }), product.vendor && (_jsxs("div", { className: "flex items-center gap-1 mt-1 typography-small text-muted-foreground", children: [_jsx(User, { className: "size-3.5" }), _jsx("span", { children: product.vendor })] }))] })] }) }), _jsxs(CardContent, { className: "space-y-3", children: [variant?.price !== null && variant?.price !== undefined && (_jsx("div", { className: "typography-large-body-semibold font-mono", children: formatMetric(variant.price, "currency") })), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: `size-2 rounded-full ${status.color}` }), _jsx("span", { className: "typography-small text-muted-foreground", children: status.text }), product.quantity != null && product.quantity < 0 && (_jsx("span", { className: "typography-tiny text-muted-foreground", children: "(Negative inventory tracked)" }))] }), isPresent(product.tags) && (_jsx("div", { className: "flex flex-wrap gap-1", children: product.tags.map((tag) => (_jsx(Badge, { variant: "secondary", className: "typography-tiny", children: tag }, tag))) })), variant?.cost === 0 && (_jsxs("div", { className: cn("flex items-start gap-2 p-3 rounded-md", "bg-warning", "border border-muted-border"), children: [_jsx(AlertCircle, { className: "size-4 text-warning-foreground mt-0.5" }), _jsxs("div", { className: "flex-1 typography-small", children: [_jsx("p", { className: "typography-small-medium text-warning-foreground", children: "Missing cost data" }), _jsx("p", { className: "text-warning-foreground/80 typography-tiny mt-0.5", children: "Add cost to track profit margins" })] })] })), product.url && (_jsxs("a", { href: product.url, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 typography-small text-primary hover:underline", children: ["View in Shopify", _jsx(ExternalLink, { className: "size-3.5" })] }))] })] }));
+}