@arqel-dev/ui 0.10.1 → 0.11.0

package/dist/pages.js

@@ -1,12 +1,13 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { useMemo, useState, useRef, useEffect, useCallback, useId } from 'react';
+import { useMemo, useState, useRef, useEffect, useCallback, Suspense, useId, lazy } from 'react';
 import { cva } from 'class-variance-authority';
 import { Slot, DropdownMenu as DropdownMenu$1, Dialog as Dialog$1 } from 'radix-ui';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { isFieldEntry, isLayoutEntry } from '@arqel-dev/types/forms';
 import { useArqelForm } from '@arqel-dev/hooks';
 import { usePage, router } from '@inertiajs/react';
+import { ResponsiveContainer, LineChart as LineChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Line, BarChart as BarChart$1, Bar, AreaChart as AreaChart$1, Area, PieChart as PieChart$1, Pie, Cell, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar } from 'recharts';
 import { XIcon } from 'lucide-react';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
 
@@ -808,6 +809,750 @@ var init_ArqelCreatePage = __esm({
     };
   }
 });
+function resolveColumnSpan(columnSpan) {
+  if (columnSpan === void 0) return void 0;
+  if (typeof columnSpan === "number") return `col-span-${columnSpan}`;
+  return columnSpan;
+}
+function WidgetWrapper({
+  heading,
+  description,
+  loading = false,
+  error = null,
+  onRetry,
+  columnSpan,
+  className,
+  children
+}) {
+  const baseClass = cn(
+    "rounded border bg-background p-4",
+    resolveColumnSpan(columnSpan),
+    className
+  );
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        "aria-label": heading,
+        "aria-busy": "true",
+        className: baseClass,
+        "data-widget-state": "loading",
+        children: /* @__PURE__ */ jsx("div", { className: "animate-pulse h-32 bg-muted rounded" })
+      }
+    );
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("section", { "aria-label": heading, className: baseClass, "data-widget-state": "error", children: /* @__PURE__ */ jsxs("div", { role: "alert", className: "flex flex-col gap-2 text-sm text-destructive", children: [
+      /* @__PURE__ */ jsx("p", { children: error.message }),
+      onRetry && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onRetry,
+          className: "self-start rounded border px-2 py-1 text-xs text-foreground hover:bg-muted",
+          children: "Retry"
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("section", { "aria-label": heading, className: baseClass, "data-widget-state": "ready", children: [
+    heading && /* @__PURE__ */ jsx("h2", { className: "text-sm font-medium text-muted-foreground", children: heading }),
+    description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: description }),
+    /* @__PURE__ */ jsx("div", { className: cn(heading || description ? "mt-3" : void 0), children })
+  ] });
+}
+var init_WidgetWrapper = __esm({
+  "src/widgets/WidgetWrapper.tsx"() {
+    init_cn();
+  }
+});
+
+// src/widgets/types.ts
+function toRowShape(data) {
+  return data.labels.map((label, i) => {
+    const row = { name: label };
+    data.datasets.forEach((ds, j) => {
+      row[`dataset${j}`] = ds.data[i] ?? 0;
+    });
+    return row;
+  });
+}
+function colorFor(dataset, index) {
+  return dataset.color ?? PALETTE[index % PALETTE.length] ?? "#2563eb";
+}
+var PALETTE;
+var init_types = __esm({
+  "src/widgets/types.ts"() {
+    PALETTE = [
+      "#2563eb",
+      "#10b981",
+      "#f59e0b",
+      "#ef4444",
+      "#8b5cf6",
+      "#ec4899",
+      "#14b8a6",
+      "#f97316"
+    ];
+  }
+});
+
+// src/widgets/charts/LineChart.tsx
+var LineChart_exports = {};
+__export(LineChart_exports, {
+  LineChart: () => LineChart
+});
+function LineChart({ chartData, height, showLegend, showGrid }) {
+  const rows = toRowShape(chartData);
+  return /* @__PURE__ */ jsx("div", { "data-testid": "chart-line", style: { width: "100%", height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart$1, { data: rows, children: [
+    showGrid ? /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }) : null,
+    /* @__PURE__ */ jsx(XAxis, { dataKey: "name" }),
+    /* @__PURE__ */ jsx(YAxis, {}),
+    /* @__PURE__ */ jsx(Tooltip, {}),
+    showLegend ? /* @__PURE__ */ jsx(Legend, {}) : null,
+    chartData.datasets.map((ds, i) => /* @__PURE__ */ jsx(
+      Line,
+      {
+        type: "monotone",
+        dataKey: `dataset${i}`,
+        name: ds.label,
+        stroke: colorFor(ds, i),
+        strokeWidth: 2,
+        dot: false
+      },
+      ds.label
+    ))
+  ] }) }) });
+}
+var init_LineChart = __esm({
+  "src/widgets/charts/LineChart.tsx"() {
+    init_types();
+  }
+});
+
+// src/widgets/charts/BarChart.tsx
+var BarChart_exports = {};
+__export(BarChart_exports, {
+  BarChart: () => BarChart
+});
+function BarChart({ chartData, height, showLegend, showGrid }) {
+  const rows = toRowShape(chartData);
+  return /* @__PURE__ */ jsx("div", { "data-testid": "chart-bar", style: { width: "100%", height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart$1, { data: rows, children: [
+    showGrid ? /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }) : null,
+    /* @__PURE__ */ jsx(XAxis, { dataKey: "name" }),
+    /* @__PURE__ */ jsx(YAxis, {}),
+    /* @__PURE__ */ jsx(Tooltip, {}),
+    showLegend ? /* @__PURE__ */ jsx(Legend, {}) : null,
+    chartData.datasets.map((ds, i) => /* @__PURE__ */ jsx(Bar, { dataKey: `dataset${i}`, name: ds.label, fill: colorFor(ds, i) }, ds.label))
+  ] }) }) });
+}
+var init_BarChart = __esm({
+  "src/widgets/charts/BarChart.tsx"() {
+    init_types();
+  }
+});
+
+// src/widgets/charts/AreaChart.tsx
+var AreaChart_exports = {};
+__export(AreaChart_exports, {
+  AreaChart: () => AreaChart
+});
+function AreaChart({ chartData, height, showLegend, showGrid }) {
+  const rows = toRowShape(chartData);
+  return /* @__PURE__ */ jsx("div", { "data-testid": "chart-area", style: { width: "100%", height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart$1, { data: rows, children: [
+    showGrid ? /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }) : null,
+    /* @__PURE__ */ jsx(XAxis, { dataKey: "name" }),
+    /* @__PURE__ */ jsx(YAxis, {}),
+    /* @__PURE__ */ jsx(Tooltip, {}),
+    showLegend ? /* @__PURE__ */ jsx(Legend, {}) : null,
+    chartData.datasets.map((ds, i) => {
+      const color = colorFor(ds, i);
+      return /* @__PURE__ */ jsx(
+        Area,
+        {
+          type: "monotone",
+          dataKey: `dataset${i}`,
+          name: ds.label,
+          stroke: color,
+          fill: color,
+          fillOpacity: 0.3
+        },
+        ds.label
+      );
+    })
+  ] }) }) });
+}
+var init_AreaChart = __esm({
+  "src/widgets/charts/AreaChart.tsx"() {
+    init_types();
+  }
+});
+
+// src/widgets/charts/PieChart.tsx
+var PieChart_exports = {};
+__export(PieChart_exports, {
+  PieChart: () => PieChart
+});
+function PieChart({
+  chartData,
+  height,
+  showLegend,
+  innerRadius = 0,
+  testId = "chart-pie"
+}) {
+  const first = chartData.datasets[0];
+  const slices = (first?.data ?? []).map((value, i) => ({
+    name: chartData.labels[i] ?? `Slice ${i + 1}`,
+    value
+  }));
+  return /* @__PURE__ */ jsx("div", { "data-testid": testId, style: { width: "100%", height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart$1, { children: [
+    /* @__PURE__ */ jsx(
+      Pie,
+      {
+        data: slices,
+        dataKey: "value",
+        nameKey: "name",
+        innerRadius,
+        outerRadius: "80%",
+        label: true,
+        children: slices.map((slice, i) => /* @__PURE__ */ jsx(Cell, { fill: colorFor(first ?? { }, i) }, slice.name))
+      }
+    ),
+    /* @__PURE__ */ jsx(Tooltip, {}),
+    showLegend ? /* @__PURE__ */ jsx(Legend, {}) : null
+  ] }) }) });
+}
+var init_PieChart = __esm({
+  "src/widgets/charts/PieChart.tsx"() {
+    init_types();
+  }
+});
+
+// src/widgets/charts/DonutChart.tsx
+var DonutChart_exports = {};
+__export(DonutChart_exports, {
+  DonutChart: () => DonutChart
+});
+function DonutChart(props) {
+  return /* @__PURE__ */ jsx(PieChart, { ...props, innerRadius: 60, testId: "chart-donut" });
+}
+var init_DonutChart = __esm({
+  "src/widgets/charts/DonutChart.tsx"() {
+    init_PieChart();
+  }
+});
+
+// src/widgets/charts/RadarChart.tsx
+var RadarChart_exports = {};
+__export(RadarChart_exports, {
+  RadarChart: () => RadarChart
+});
+function RadarChart({ chartData, height, showLegend, showGrid }) {
+  const rows = toRowShape(chartData);
+  return /* @__PURE__ */ jsx("div", { "data-testid": "chart-radar", style: { width: "100%", height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(RadarChart$1, { data: rows, children: [
+    showGrid ? /* @__PURE__ */ jsx(PolarGrid, {}) : null,
+    /* @__PURE__ */ jsx(PolarAngleAxis, { dataKey: "name" }),
+    /* @__PURE__ */ jsx(PolarRadiusAxis, {}),
+    chartData.datasets.map((ds, i) => {
+      const color = colorFor(ds, i);
+      return /* @__PURE__ */ jsx(
+        Radar,
+        {
+          dataKey: `dataset${i}`,
+          name: ds.label,
+          stroke: color,
+          fill: color,
+          fillOpacity: 0.3
+        },
+        ds.label
+      );
+    }),
+    /* @__PURE__ */ jsx(Tooltip, {}),
+    showLegend ? /* @__PURE__ */ jsx(Legend, {}) : null
+  ] }) }) });
+}
+var init_RadarChart = __esm({
+  "src/widgets/charts/RadarChart.tsx"() {
+    init_types();
+  }
+});
+function ChartCard({ widget }) {
+  const Chart = REGISTRY[widget.chartType] ?? LineChart2;
+  return /* @__PURE__ */ jsx(WidgetWrapper, { heading: widget.heading, description: widget.description, children: /* @__PURE__ */ jsx(
+    Suspense,
+    {
+      fallback: /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "status",
+          "aria-label": "Loading chart",
+          "data-testid": "chart-fallback",
+          className: "animate-pulse rounded bg-muted",
+          style: { height: widget.height }
+        }
+      ),
+      children: /* @__PURE__ */ jsx(
+        Chart,
+        {
+          chartData: widget.chartData,
+          chartOptions: widget.chartOptions,
+          height: widget.height,
+          showLegend: widget.showLegend,
+          showGrid: widget.showGrid
+        }
+      )
+    }
+  ) });
+}
+var LineChart2, BarChart2, AreaChart2, PieChart2, DonutChart2, RadarChart2, REGISTRY;
+var init_ChartCard = __esm({
+  "src/widgets/ChartCard.tsx"() {
+    init_WidgetWrapper();
+    LineChart2 = lazy(() => Promise.resolve().then(() => (init_LineChart(), LineChart_exports)).then((m) => ({ default: m.LineChart })));
+    BarChart2 = lazy(() => Promise.resolve().then(() => (init_BarChart(), BarChart_exports)).then((m) => ({ default: m.BarChart })));
+    AreaChart2 = lazy(() => Promise.resolve().then(() => (init_AreaChart(), AreaChart_exports)).then((m) => ({ default: m.AreaChart })));
+    PieChart2 = lazy(() => Promise.resolve().then(() => (init_PieChart(), PieChart_exports)).then((m) => ({ default: m.PieChart })));
+    DonutChart2 = lazy(
+      () => Promise.resolve().then(() => (init_DonutChart(), DonutChart_exports)).then((m) => ({ default: m.DonutChart }))
+    );
+    RadarChart2 = lazy(
+      () => Promise.resolve().then(() => (init_RadarChart(), RadarChart_exports)).then((m) => ({ default: m.RadarChart }))
+    );
+    REGISTRY = {
+      line: LineChart2,
+      bar: BarChart2,
+      area: AreaChart2,
+      pie: PieChart2,
+      donut: DonutChart2,
+      radar: RadarChart2
+    };
+  }
+});
+function DashboardFilters({ filters, values, onChange, className }) {
+  if (!filters || filters.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-2", className), "data-testid": "dashboard-filters", children: filters.map((filter) => /* @__PURE__ */ jsx(
+    FilterControl,
+    {
+      filter,
+      value: values[filter.name],
+      onChange: (v) => onChange(filter.name, v)
+    },
+    filter.name
+  )) });
+}
+function FilterControl({
+  filter,
+  value,
+  onChange
+}) {
+  if (filter.type === "select") {
+    return /* @__PURE__ */ jsx(SelectControl, { filter, value, onChange });
+  }
+  if (filter.type === "date_range") {
+    return /* @__PURE__ */ jsx(
+      DateRangeControl,
+      {
+        filter,
+        value,
+        onChange
+      }
+    );
+  }
+  return null;
+}
+function controlClasses() {
+  return cn(
+    "h-9 rounded-sm border border-[var(--input)]",
+    "bg-background px-2 text-sm",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+  );
+}
+function normaliseOptions2(raw) {
+  if (!raw) return [];
+  if (Array.isArray(raw)) {
+    return raw.map((o) => ({ value: String(o.value), label: String(o.label ?? o.value) }));
+  }
+  return Object.entries(raw).map(([k, v]) => ({ value: String(k), label: String(v) }));
+}
+function SelectControl({
+  filter,
+  value,
+  onChange
+}) {
+  const options = normaliseOptions2(filter.options);
+  return /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-xs text-muted-foreground", children: [
+    filter.label ?? filter.name,
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        "aria-label": filter.label ?? filter.name,
+        className: controlClasses(),
+        value: value === void 0 || value === null ? "" : String(value),
+        onChange: (e) => onChange(e.target.value === "" ? null : e.target.value),
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: "All" }),
+          options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+        ]
+      }
+    )
+  ] });
+}
+function DateRangeControl({
+  filter,
+  value,
+  onChange
+}) {
+  const range = value && typeof value === "object" ? value : {};
+  const fromValue = typeof range.from === "string" ? range.from : "";
+  const toValue = typeof range.to === "string" ? range.to : "";
+  return /* @__PURE__ */ jsxs("fieldset", { className: "flex flex-col gap-1 text-xs text-muted-foreground", children: [
+    /* @__PURE__ */ jsx("legend", { children: filter.label ?? filter.name }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "date",
+          "aria-label": `${filter.label ?? filter.name} from`,
+          className: controlClasses(),
+          value: fromValue,
+          onChange: (e) => onChange({ from: e.target.value || null, to: range.to ?? null })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2013" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "date",
+          "aria-label": `${filter.label ?? filter.name} to`,
+          className: controlClasses(),
+          value: toValue,
+          onChange: (e) => onChange({ from: range.from ?? null, to: e.target.value || null })
+        }
+      )
+    ] })
+  ] });
+}
+var init_DashboardFilters = __esm({
+  "src/widgets/DashboardFilters.tsx"() {
+    init_cn();
+  }
+});
+function Sparkline({ points, color }) {
+  if (points.length < 2) return null;
+  const min = Math.min(...points);
+  const max = Math.max(...points);
+  const range = max - min || 1;
+  const stepX = 100 / (points.length - 1);
+  const coords = points.map((value, index) => {
+    const x = index * stepX;
+    const y = 30 - (value - min) / range * 30;
+    return `${x.toFixed(2)},${y.toFixed(2)}`;
+  }).join(" ");
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 100 30",
+      preserveAspectRatio: "none",
+      className: cn("mt-3 h-8 w-full", COLOR_STROKE[color]),
+      role: "img",
+      "aria-label": "Trend sparkline",
+      "data-testid": "stat-card-sparkline",
+      children: /* @__PURE__ */ jsx(
+        "polyline",
+        {
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          points: coords
+        }
+      )
+    }
+  );
+}
+function StatCard({ widget, className, columnSpan }) {
+  const { heading, description, value, statDescription, descriptionIcon, color, chart, url } = widget;
+  const hasChart = Array.isArray(chart) && chart.length >= 2;
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: cn("text-4xl font-bold tabular-nums", COLOR_TEXT[color]), children: value ?? "\u2014" }),
+    statDescription && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-1 text-xs text-muted-foreground", children: [
+      descriptionIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-testid": "stat-card-icon", children: descriptionIcon }),
+      /* @__PURE__ */ jsx("span", { children: statDescription })
+    ] }),
+    hasChart && /* @__PURE__ */ jsx(Sparkline, { points: chart, color })
+  ] });
+  const inner = url ? /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: url,
+      className: "block rounded outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      "data-testid": "stat-card-link",
+      children: body
+    }
+  ) : body;
+  return /* @__PURE__ */ jsx(
+    WidgetWrapper,
+    {
+      heading,
+      description,
+      columnSpan,
+      className,
+      children: inner
+    }
+  );
+}
+var COLOR_TEXT, COLOR_STROKE;
+var init_StatCard = __esm({
+  "src/widgets/StatCard.tsx"() {
+    init_cn();
+    init_WidgetWrapper();
+    COLOR_TEXT = {
+      primary: "text-primary",
+      secondary: "text-secondary-foreground",
+      success: "text-green-600",
+      warning: "text-amber-600",
+      danger: "text-red-600",
+      info: "text-sky-600"
+    };
+    COLOR_STROKE = {
+      primary: "stroke-primary",
+      secondary: "stroke-secondary-foreground",
+      success: "stroke-green-500",
+      warning: "stroke-amber-500",
+      danger: "stroke-red-500",
+      info: "stroke-sky-500"
+    };
+  }
+});
+function TableCard({ widget, className }) {
+  return /* @__PURE__ */ jsx(
+    WidgetWrapper,
+    {
+      heading: widget.heading ?? void 0,
+      description: widget.description ?? void 0,
+      className,
+      children: widget.loadError ? /* @__PURE__ */ jsx("div", { role: "alert", className: "text-sm text-red-600", children: widget.loadError }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: cn("w-full border-collapse text-sm", "text-foreground"), children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-b border-border text-left", children: widget.columns.map((column) => /* @__PURE__ */ jsx(
+            "th",
+            {
+              scope: "col",
+              className: "px-2 py-1.5 font-medium text-muted-foreground",
+              children: column.label ?? column.name
+            },
+            column.name
+          )) }) }),
+          /* @__PURE__ */ jsx("tbody", { children: widget.records.map((record, rowIndex) => /* @__PURE__ */ jsx(
+            "tr",
+            {
+              className: "border-b border-border last:border-0",
+              children: widget.columns.map((column) => /* @__PURE__ */ jsx("td", { className: "px-2 py-1.5", children: formatCell(record[column.name]) }, column.name))
+            },
+            rowIndex
+          )) })
+        ] }) }),
+        widget.seeAllUrl && /* @__PURE__ */ jsx("div", { className: "mt-3 text-right", children: /* @__PURE__ */ jsx("a", { href: widget.seeAllUrl, className: "text-sm text-primary", children: "See all \u2192" }) })
+      ] })
+    }
+  );
+}
+function formatCell(value) {
+  if (value === null || value === void 0) return "";
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return "";
+  }
+}
+var init_TableCard = __esm({
+  "src/widgets/TableCard.tsx"() {
+    init_cn();
+    init_WidgetWrapper();
+  }
+});
+function WidgetRenderer({ widget, filterValues, fetcher }) {
+  const [data, setData] = useState(widget.data ?? null);
+  const filterRef = useRef(filterValues);
+  filterRef.current = filterValues;
+  const dashboardId = widget.dashboardId;
+  const widgetId = widget.widgetId ?? widget.name;
+  const poll = typeof widget.poll === "number" ? widget.poll : 0;
+  const deferred = widget.deferred === true;
+  const hasInlineDataRef = useRef(widget.data !== null && widget.data !== void 0);
+  useEffect(() => {
+    if (!dashboardId || !widgetId) return void 0;
+    const url = `/admin/dashboards/${dashboardId}/widgets/${widgetId}/data`;
+    const doFetch = async () => {
+      try {
+        const result = fetcher ? await fetcher(url) : await fetch(url, { headers: { Accept: "application/json" } }).then((r) => r.json());
+        setData(result);
+      } catch {
+      }
+    };
+    let interval;
+    if (deferred && !hasInlineDataRef.current) {
+      void doFetch();
+    }
+    if (poll > 0) {
+      interval = setInterval(() => {
+        void doFetch();
+      }, poll * 1e3);
+    }
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [dashboardId, widgetId, poll, deferred, fetcher]);
+  const merged = mergeData(widget, data);
+  switch (widget.type) {
+    case "stat":
+      return /* @__PURE__ */ jsx(StatCard, { widget: merged });
+    case "chart":
+      return /* @__PURE__ */ jsx(ChartCard, { widget: merged });
+    case "table":
+      return /* @__PURE__ */ jsx(TableCard, { widget: merged });
+    default:
+      return /* @__PURE__ */ jsxs("div", { role: "alert", className: "text-sm text-red-600", children: [
+        "Widget type ",
+        widget.type,
+        " not registered"
+      ] });
+  }
+}
+function mergeData(widget, data) {
+  if (data && typeof data === "object" && !Array.isArray(data)) {
+    return { ...widget, ...data };
+  }
+  return { ...widget, data };
+}
+var init_WidgetRenderer = __esm({
+  "src/widgets/WidgetRenderer.tsx"() {
+    init_ChartCard();
+    init_StatCard();
+    init_TableCard();
+  }
+});
+function DashboardGrid({
+  dashboard,
+  filterValues,
+  onFilterChange,
+  className
+}) {
+  const [internalValues, setInternalValues] = useState(filterValues ?? {});
+  const values = filterValues ?? internalValues;
+  const handleChange = (name, value) => {
+    if (onFilterChange) {
+      onFilterChange(name, value);
+    } else {
+      setInternalValues((prev) => ({ ...prev, [name]: value }));
+    }
+  };
+  const filterPayload = normaliseFilters(dashboard.filters);
+  const heading = dashboard.heading ?? dashboard.label;
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        heading && /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold", children: heading }),
+        dashboard.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: dashboard.description })
+      ] }),
+      filterPayload.length > 0 && /* @__PURE__ */ jsx(DashboardFilters, { filters: filterPayload, values, onChange: handleChange })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("grid gap-4", gridColsClass(dashboard.columns)),
+        "data-testid": "dashboard-grid",
+        children: dashboard.widgets.map((widget) => {
+          const rawSpan = widget.columnSpan;
+          const span = typeof rawSpan === "number" ? rawSpan : 1;
+          const style = { gridColumn: `span ${span}` };
+          return /* @__PURE__ */ jsx("div", { style, "data-widget-slot": widget.name, children: /* @__PURE__ */ jsx(WidgetRenderer, { widget, filterValues: values }) }, widget.name);
+        })
+      }
+    )
+  ] });
+}
+function gridColsClass(columns) {
+  if (typeof columns === "number") {
+    return `grid-cols-${Math.max(1, Math.min(12, columns))}`;
+  }
+  const parts = [];
+  parts.push("grid-cols-1");
+  for (const bp of ["sm", "md", "lg", "xl", "2xl"]) {
+    const value = columns[bp];
+    if (typeof value === "number") {
+      parts.push(`${BREAKPOINT_PREFIX[bp]}grid-cols-${Math.max(1, Math.min(12, value))}`);
+    }
+  }
+  return parts.join(" ");
+}
+function normaliseFilters(raw) {
+  if (!raw) return [];
+  if (Array.isArray(raw)) return raw;
+  return [];
+}
+var BREAKPOINT_PREFIX;
+var init_DashboardGrid = __esm({
+  "src/widgets/DashboardGrid.tsx"() {
+    init_cn();
+    init_DashboardFilters();
+    init_WidgetRenderer();
+    BREAKPOINT_PREFIX = {
+      sm: "sm:",
+      md: "md:",
+      lg: "lg:",
+      xl: "xl:",
+      "2xl": "2xl:"
+    };
+  }
+});
+
+// src/widgets/index.ts
+var init_widgets = __esm({
+  "src/widgets/index.ts"() {
+    init_DashboardGrid();
+  }
+});
+
+// src/pages/ArqelDashboardPage.tsx
+var ArqelDashboardPage_exports = {};
+__export(ArqelDashboardPage_exports, {
+  default: () => ArqelDashboardPage
+});
+function ArqelDashboardPage() {
+  const { dashboard, filterValues } = usePage().props;
+  const handleFilterChange = (name, value) => {
+    const current = filterValues ?? {};
+    const next = { ...current };
+    if (value === void 0 || value === null || value === "") {
+      delete next[name];
+    } else {
+      next[name] = value;
+    }
+    const path = dashboard.path ?? `/admin/dashboards/${dashboard.id}`;
+    const params = Object.keys(next).length > 0 ? { filters: next } : {};
+    router.get(path, params, {
+      preserveState: true,
+      preserveScroll: true,
+      replace: true
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    DashboardGrid,
+    {
+      dashboard,
+      filterValues: filterValues ?? {},
+      onFilterChange: handleFilterChange
+    }
+  );
+}
+var init_ArqelDashboardPage = __esm({
+  "src/pages/ArqelDashboardPage.tsx"() {
+    init_widgets();
+  }
+});
 
 // src/pages/ArqelEditPage.tsx
 var ArqelEditPage_exports = {};
@@ -1671,7 +2416,7 @@ function TableFilters({
   return /* @__PURE__ */ jsxs("fieldset", { className: cn("flex flex-wrap items-end gap-2 border-0 p-0", className), children: [
     /* @__PURE__ */ jsx("legend", { className: "sr-only", children: "Filters" }),
     filters.map((filter) => /* @__PURE__ */ jsx(
-      FilterControl,
+      FilterControl2,
       {
         filter,
         value: values[filter.name],
@@ -1686,7 +2431,7 @@ function TableFilters({
     ] })
   ] });
 }
-function FilterControl({
+function FilterControl2({
   filter,
   value,
   onChange
@@ -1705,7 +2450,7 @@ function FilterControl({
       return null;
   }
 }
-function controlClasses() {
+function controlClasses2() {
   return cn(
     "h-9 rounded-sm border border-[var(--input)]",
     "bg-background px-3 text-sm",
@@ -1722,7 +2467,7 @@ function SelectFilter({
     /* @__PURE__ */ jsxs(
       "select",
       {
-        className: controlClasses(),
+        className: controlClasses2(),
         value: value === void 0 || value === null ? "" : String(value),
         onChange: (e) => onChange(e.target.value === "" ? null : e.target.value),
         children: [
@@ -1745,7 +2490,7 @@ function MultiSelectFilter({
       "select",
       {
         multiple: true,
-        className: cn(controlClasses(), "h-auto min-h-[2.25rem] py-1"),
+        className: cn(controlClasses2(), "h-auto min-h-[2.25rem] py-1"),
         value: arr.map(String),
         onChange: (e) => {
           const next = Array.from(e.target.selectedOptions, (o) => o.value);
@@ -1767,7 +2512,7 @@ function TextFilter({
       "input",
       {
         type: "text",
-        className: controlClasses(),
+        className: controlClasses2(),
         value: typeof value === "string" ? value : "",
         onChange: (e) => onChange(e.target.value === "" ? null : e.target.value)
       }
@@ -1785,7 +2530,7 @@ function TernaryFilter({
     /* @__PURE__ */ jsxs(
       "select",
       {
-        className: controlClasses(),
+        className: controlClasses2(),
         value: current,
         onChange: (e) => {
           const v = e.target.value;
@@ -2270,6 +3015,7 @@ var init_ArqelShowPage = __esm({
 
 // src/pages/index.ts
 init_ArqelCreatePage();
+init_ArqelDashboardPage();
 init_ArqelEditPage();
 init_ArqelIndexPage();
 init_ArqelShowPage();
@@ -2277,9 +3023,10 @@ var arqelPages = {
   "arqel::index": () => Promise.resolve().then(() => (init_ArqelIndexPage(), ArqelIndexPage_exports)),
   "arqel::create": () => Promise.resolve().then(() => (init_ArqelCreatePage(), ArqelCreatePage_exports)),
   "arqel::edit": () => Promise.resolve().then(() => (init_ArqelEditPage(), ArqelEditPage_exports)),
-  "arqel::show": () => Promise.resolve().then(() => (init_ArqelShowPage(), ArqelShowPage_exports))
+  "arqel::show": () => Promise.resolve().then(() => (init_ArqelShowPage(), ArqelShowPage_exports)),
+  "arqel::dashboard": () => Promise.resolve().then(() => (init_ArqelDashboardPage(), ArqelDashboardPage_exports))
 };
 
-export { ArqelCreatePage, ArqelEditPage, ArqelIndexPage, ArqelShowPage, arqelPages };
+export { ArqelCreatePage, ArqelDashboardPage, ArqelEditPage, ArqelIndexPage, ArqelShowPage, arqelPages };
 //# sourceMappingURL=pages.js.map
 //# sourceMappingURL=pages.js.map