+ {/* Morphing glow */}
+
+ );
+}
+
+function SkeletonPhase({ exiting }: { exiting: boolean }) {
+ return (
+
+
+
+
+
+
+
+ {/* App icon */}
+
+ 
+
+
+ {/* Loading text */}
+
+ + Creating your overview... +
+ + +
+
+ );
+}
+
+export function DashboardLoading({
+ children,
+ triggerReplay,
+}: DashboardLoadingProps) {
+ const [phase, setPhase] = useState
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {children}
+ );
+ }
+
+ return (
+
+ {phase === "logo" &&
+ );
+}
diff --git a/apps/apollo-vertex/templates/dashboard/DashboardRoutes.tsx b/apps/apollo-vertex/templates/dashboard/DashboardRoutes.tsx
new file mode 100644
index 000000000..30965402e
--- /dev/null
+++ b/apps/apollo-vertex/templates/dashboard/DashboardRoutes.tsx
@@ -0,0 +1,59 @@
+import { createRootRoute, createRoute, Outlet } from "@tanstack/react-router";
+import { DashboardContent } from "./DashboardContent";
+import { DashboardShellWrapper } from "./DashboardShellWrapper";
+
+export const dashboardRootRoute = createRootRoute();
+
+// --- Sidebar variant routes ---
+
+export const dashboardShellRoute = createRoute({
+ getParentRoute: () => dashboardRootRoute,
+ path: "/preview/dashboard",
+ component: () => (
+
+
+ );
+}
+
+function CategoryBreakdown() {
+ return (
+
+
+
+
+ Trend over time
+
+ + 8-week view of the top 3 return reasons +
+
+ {data.series.map((s) => (
+
+
+
+ {s.label}
+
+ ))}
+
+
+ {data.takeaway}
+
+
+ );
+}
+
+function TopProducts() {
+ return (
+
+
+
+ Category breakdown
+
+ + {`Where "Wrong size/fit" returns are concentrated`} +
+
+ {categoryBreakdown.map((cat) => (
+
+
+
+ ))}
+
+ {cat.category}
+ {cat.pct}%
+
+
+
+
+
+
+
+
+ {categoryInsight}
+
+
+ );
+}
+
+function Recommendations() {
+ return (
+
+
+
+ Top products driving issues
+
+ + Ranked by return rate with revenue impact +
+
+
+
+ Product
+ Return %
+ Issue
+ Impact
+
+ {topProducts.map((p) => (
+
+ {p.name}
+
+ {p.returnRate}%
+
+
+ {p.issue}
+
+
+ {p.impact}
+
+
+ ))}
+
+
+ );
+}
+
+// --- Exports ---
+
+export function DrilldownTabContent({ tab }: { tab: DrilldownTab }) {
+ if (tab === "trend") return
+
+
+ Recommended actions
+
+ + AI-assisted next steps based on current data +
+
+ {recommendations.map((rec, i) => (
+
+
+
+ ))}
+
+
+ {i + 1}
+
+
+ {rec.priority}
+
+
+ {rec.action}
++ {rec.impact} +
+
+
+ );
+}
diff --git a/apps/apollo-vertex/templates/dashboard/dashboard-data-context.ts b/apps/apollo-vertex/templates/dashboard/dashboard-data-context.ts
new file mode 100644
index 000000000..f628d6ac0
--- /dev/null
+++ b/apps/apollo-vertex/templates/dashboard/dashboard-data-context.ts
@@ -0,0 +1,22 @@
+"use client";
+
+import { createContext, useContext } from "react";
+import { ecommerceDataset, type DashboardDataset } from "./dashboard-data";
+
+export interface DashboardDataContextValue {
+ data: DashboardDataset;
+ setDataset: (data: DashboardDataset) => void;
+}
+
+export const DashboardDataContext = createContext
+ 
+ 
+ Ask Autopilot
+
+
+
+ Ask Autopilot
+
+ {suggestedPrompts.map((prompt) => (
+
+ ))}
+
+ + {children} +
+ ); + + if (!isTruncated) return textEl; + + return ( +
+
+ {cardData.kpiBadge}
+
+
+
+ {cardData.kpiNumber}
+
+
+ {cardData.kpiNumber}
+
+
+
+ {cardData.kpiBadge}
+
+
+
+ );
+}
+
+function HorizontalBarsContent({
+ cardData,
+ viewMode,
+ isExpanded = false,
+}: {
+ cardData: InsightCardData;
+ viewMode: ViewMode;
+ isExpanded?: boolean;
+}) {
+ const bars = cardData.bars ?? [];
+ const chartColors = [
+ "bg-chart-1",
+ "bg-chart-2",
+ "bg-chart-3",
+ "bg-chart-4",
+ "bg-chart-5",
+ ];
+ const barsWithColor = bars.map((b, i) => ({
+ ...b,
+ color: chartColors[i % chartColors.length],
+ }));
+
+ if (viewMode === "compact" && !isExpanded) {
+ const total = barsWithColor.reduce((sum, s) => sum + s.value, 0);
+ return (
+ + {cardData.kpiDescription} +
+
+
+ );
+ }
+
+ return (
+
+ {barsWithColor.map((issue) => (
+
+
+
+
+ ))}
+
+ {barsWithColor.map((issue) => {
+ const pct = Math.round((issue.value / total) * 100);
+ return (
+
+
+
+
+ {issue.label} {pct}%
+
+
+ );
+ })}
+
+ {barsWithColor.map((issue) => (
+
+ );
+}
+
+function StackedBarContent({
+ cardData,
+ viewMode,
+ isExpanded = false,
+}: {
+ cardData: InsightCardData;
+ viewMode: ViewMode;
+ isExpanded?: boolean;
+}) {
+ const chartColors = [
+ "bg-chart-1",
+ "bg-chart-2",
+ "bg-chart-3",
+ "bg-chart-4",
+ "bg-chart-5",
+ ];
+ const rawBars = cardData.stackedBars ?? [];
+ const legend = (cardData.stackedLegend ?? []).map((label, i) => ({
+ label,
+ color: chartColors[i % chartColors.length],
+ }));
+ const barData = rawBars.map((bar) => ({
+ label: bar.label,
+ segments: bar.segments.map((value, i) => ({
+ value,
+ color: chartColors[i % chartColors.length],
+ })),
+ }));
+ const maxTotal = Math.max(
+ ...barData.map((d) => d.segments.reduce((sum, s) => sum + s.value, 0)),
+ );
+
+ if (viewMode === "compact" && !isExpanded) {
+ // Summary: aggregate all days into one horizontal stacked bar
+ const totals = barData.reduce(
+ (acc, day) => {
+ for (const seg of day.segments) {
+ const key = seg.color;
+ acc[key] = (acc[key] ?? 0) + seg.value;
+ }
+ return acc;
+ },
+ {} as Record
+
+ ))}
+
+ {issue.label}
+ {issue.value}%
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+ {legend.map((item) => (
+
+
+
+
+ ))}
+
+ {legend.map((item) => {
+ const val = totals[item.color] ?? 0;
+ const pct = Math.round((val / grandTotal) * 100);
+ return (
+
+
+
+
+ {item.label} {pct}%
+
+
+ );
+ })}
+
+
+ );
+}
+
+export function InsightCardBody({
+ content,
+ cardIndex,
+ viewMode = "desktop",
+ isExpanded = false,
+}: {
+ content: InsightCardContent;
+ cardIndex: number;
+ viewMode?: ViewMode;
+ isExpanded?: boolean;
+}) {
+ const { data } = useDashboardData();
+ const cardData = data.insightCards[cardIndex] ?? data.insightCards[0];
+
+ if (content.type === "kpi") {
+ return
+ {barData.map((bar) => {
+ const total = bar.segments.reduce((sum, s) => sum + s.value, 0);
+ const pct = (total / maxTotal) * 100;
+ return (
+
+
+
+ );
+ })}
+
+
+
+ {bar.label}
+
+
+ {bar.segments.map((seg) => (
+
+ ))}
+
+
+ {bar.segments.map((seg) => (
+
+ ))}
+
+
+ {legend.map((item) => (
+
+
+
+
+ {item.label}
+
+
+ ))}
+