@@ -501,26 +537,15 @@ export default function EventDetailsPage() {
)}
-
+ Place Bet
+
diff --git a/app/(dashboard)/loading-patterns/page.tsx b/app/(dashboard)/loading-patterns/page.tsx
new file mode 100644
index 0000000..2a0e175
--- /dev/null
+++ b/app/(dashboard)/loading-patterns/page.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { useState } from "react"
+import { MarketsListSkeleton } from "@/components/skeletons/markets-skeleton"
+import { EventDetailSkeleton } from "@/components/skeletons/event-detail-skeleton"
+import { EventsTableSkeleton } from "@/components/events/events-table-skeleton"
+import { ErrorBanner } from "@/components/ui/error-banner"
+import { AsyncButton } from "@/components/ui/async-button"
+import { Separator } from "@/components/ui/separator"
+
+export default function LoadingPatternsPage() {
+ const [btnLoading, setBtnLoading] = useState(false)
+
+ function simulateAction() {
+ setBtnLoading(true)
+ setTimeout(() => setBtnLoading(false), 2000)
+ }
+
+ return (
+
+
+
Loading & Async State Patterns
+
Design reference for skeletons, inline loading, and error/retry states.
+
+
+
+
+ {/* Surface 1 β Markets list skeleton */}
+
+ 1. Markets List Skeleton
+ Shown while the markets widget fetches data.
+
+
+
+
+
+
+
+ {/* Surface 2 β Event detail skeleton */}
+
+ 2. Event Detail Skeleton
+ Shown while the event detail page loads.
+
+
+
+
+
+ {/* Surface 3 β Events table skeleton */}
+
+ 3. Events Table Skeleton
+ Shown via Next.js loading.tsx on the events list page.
+
+
+
+
+
+ {/* Inline loading button */}
+
+ Inline Loading β AsyncButton
+ Spinner replaces icon; text changes to loading copy.
+
+
+ Place Bet
+
+
+ Submit Form
+
+
+
+
+
+ {/* Error + retry banner */}
+
+ Error + Retry Banner
+ Inline banner with optional retry callback.
+ alert("Retryingβ¦")}
+ />
+
+
+
+ )
+}
diff --git a/components/analytics/chart-panel.tsx b/components/analytics/chart-panel.tsx
new file mode 100644
index 0000000..e5fe928
--- /dev/null
+++ b/components/analytics/chart-panel.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface ChartPanelProps {
+ title: string;
+ description?: string;
+ children: React.ReactNode;
+ className?: string;
+ /** Height of the chart area. Defaults to h-56 on mobile, h-72 on sm+ */
+ chartHeight?: string;
+}
+
+/**
+ * Wrapper for all chart panels.
+ * Enforces consistent padding, title/description placement, and responsive height.
+ */
+export function ChartPanel({ title, description, children, className, chartHeight }: ChartPanelProps) {
+ return (
+
+
+ {title}
+ {description && (
+ {description}
+ )}
+
+
+ {children}
+
+
+ );
+}
diff --git a/components/analytics/chart-styles.ts b/components/analytics/chart-styles.ts
new file mode 100644
index 0000000..4642e0f
--- /dev/null
+++ b/components/analytics/chart-styles.ts
@@ -0,0 +1,34 @@
+/**
+ * Shared chart style constants.
+ * Use these across all Recharts instances to keep axes, tooltips, and colors consistent.
+ */
+
+/** Palette β maps semantic series names to CSS custom properties from globals.css */
+export const CHART_COLORS = {
+ primary: "hsl(var(--chart-1))",
+ secondary: "hsl(var(--chart-2))",
+ tertiary: "hsl(var(--chart-3))",
+ quaternary: "hsl(var(--chart-4))",
+ quinary: "hsl(var(--chart-5))",
+} as const;
+
+/** Axis tick style β applied to XAxis and YAxis tickStyle / tick props */
+export const AXIS_TICK_STYLE = {
+ fontSize: 11,
+ fill: "hsl(var(--muted-foreground))",
+ fontFamily: "inherit",
+} as const;
+
+/** Cartesian grid style */
+export const GRID_STYLE = {
+ stroke: "hsl(var(--border))",
+ strokeDasharray: "3 3",
+ strokeOpacity: 0.5,
+} as const;
+
+/** Tooltip wrapper class β used via ChartTooltipContent className */
+export const TOOLTIP_CLASS =
+ "rounded-lg border border-border/50 bg-popover px-3 py-2 text-xs shadow-lg text-popover-foreground";
+
+/** Standard chart margins β keeps axis labels from clipping */
+export const CHART_MARGIN = { top: 4, right: 16, bottom: 0, left: 0 } as const;
diff --git a/components/analytics/distribution-chart.tsx b/components/analytics/distribution-chart.tsx
new file mode 100644
index 0000000..f1bd121
--- /dev/null
+++ b/components/analytics/distribution-chart.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Cell } from "recharts";
+import {
+ ChartContainer,
+ ChartTooltip,
+ ChartTooltipContent,
+ ChartLegend,
+ ChartLegendContent,
+ type ChartConfig,
+} from "@/components/ui/chart";
+import { AXIS_TICK_STYLE, CHART_COLORS, CHART_MARGIN, GRID_STYLE } from "./chart-styles";
+
+const data = [
+ { category: "Sports", count: 38 },
+ { category: "Politics", count: 24 },
+ { category: "Crypto", count: 19 },
+ { category: "Finance", count: 12 },
+ { category: "Other", count: 7 },
+];
+
+const COLORS = [
+ CHART_COLORS.primary,
+ CHART_COLORS.secondary,
+ CHART_COLORS.tertiary,
+ CHART_COLORS.quaternary,
+ CHART_COLORS.quinary,
+];
+
+const config: ChartConfig = {
+ count: { label: "Markets (%)" },
+};
+
+/**
+ * DistributionChart β horizontal bar chart showing market category share (%).
+ * Each bar is a distinct colour; Y-axis labels the category, X-axis shows percentage.
+ */
+export function DistributionChart() {
+ return (
+
+
+
+ `${v}%`}
+ />
+
+ [`${value}%`, "Share"]}
+ />
+ }
+ />
+
+ {data.map((_, i) => (
+ |
+ ))}
+
+
+
+ );
+}
diff --git a/components/analytics/kpi-card.tsx b/components/analytics/kpi-card.tsx
new file mode 100644
index 0000000..6bef29d
--- /dev/null
+++ b/components/analytics/kpi-card.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { Info } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface KpiCardProps {
+ label: string;
+ value: string | number;
+ unit?: string;
+ delta?: string;
+ deltaPositive?: boolean;
+ tooltip?: string;
+ className?: string;
+}
+
+export function KpiCard({ label, value, unit, delta, deltaPositive, tooltip, className }: KpiCardProps) {
+ return (
+
+
+
+
+ {label}
+
+ {tooltip && (
+
+
+
+
+
+
+ {tooltip}
+
+
+
+ )}
+
+
+
+
+ {value}
+
+ {unit && (
+ {unit}
+ )}
+
+
+ {delta && (
+
+ {delta}
+
+ )}
+
+
+ );
+}
diff --git a/components/analytics/volume-chart.tsx b/components/analytics/volume-chart.tsx
new file mode 100644
index 0000000..76df2d9
--- /dev/null
+++ b/components/analytics/volume-chart.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import {
+ LineChart, Line, XAxis, YAxis, CartesianGrid, ResponsiveContainer, Tooltip, Legend,
+} from "recharts";
+import {
+ ChartContainer,
+ ChartTooltip,
+ ChartTooltipContent,
+ ChartLegend,
+ ChartLegendContent,
+ type ChartConfig,
+} from "@/components/ui/chart";
+import { AXIS_TICK_STYLE, CHART_COLORS, CHART_MARGIN, GRID_STYLE } from "./chart-styles";
+
+const data = [
+ { month: "Oct", volume: 4200 },
+ { month: "Nov", volume: 6800 },
+ { month: "Dec", volume: 5900 },
+ { month: "Jan", volume: 9100 },
+ { month: "Feb", volume: 11400 },
+ { month: "Mar", volume: 14800 },
+];
+
+const config: ChartConfig = {
+ volume: { label: "Volume (XLM)", color: CHART_COLORS.primary },
+};
+
+/**
+ * VolumeChart β line chart showing monthly prediction volume in XLM.
+ * Axes are labelled with units; tooltip shows exact value + unit.
+ */
+export function VolumeChart() {
+ return (
+
+
+
+
+ `${(v / 1000).toFixed(0)}k`}
+ label={{
+ value: "XLM",
+ angle: -90,
+ position: "insideLeft",
+ offset: 12,
+ style: { ...AXIS_TICK_STYLE, textAnchor: "middle" },
+ }}
+ width={44}
+ />
+ [`${Number(value).toLocaleString()} XLM`, "Volume"]}
+ />
+ }
+ />
+ } />
+
+
+
+ );
+}
diff --git a/components/events/events-section.tsx b/components/events/events-section.tsx
index 238390f..4ba7c6a 100644
--- a/components/events/events-section.tsx
+++ b/components/events/events-section.tsx
@@ -15,13 +15,14 @@ import { EventsToolbar } from "./events-toolbar"
import { EventsTable } from "./events-table"
import { EventsPagination } from "./pagination"
import { useEventsStore, getEventCounts } from "@/lib/events-store"
+import { ErrorBanner } from "@/components/ui/error-banner"
interface EventsSectionProps {
className?: string
}
export function EventsSection({ className }: EventsSectionProps) {
- const { events, filters, setStatus, loadEvents } = useEventsStore()
+ const { events, filters, error, setStatus, loadEvents } = useEventsStore()
// Get event counts for each tab
const eventCounts = React.useMemo(() => getEventCounts(events), [events])
@@ -88,6 +89,15 @@ export function EventsSection({ className }: EventsSectionProps) {