Insight surfaces

import { useState } from "react";

import {
    NxInsightFilterBar,
    NxInsightSurface,
} from "@nexia/sdk/host";

type RangePreset = "7d" | "30d" | "90d" | "qtd" | "ytd" | "custom";

export function InsightSurfacesExample() {
    const [range, setRange] = useState<RangePreset>("30d");
    const [dates, setDates] = useState({
        from: "2026-07-17",
        through: "2026-08-15",
    });
    const filter = {
        range,
        ...dates,
        isCustom: range === "custom",
        setRange,
        setCustomRange: (from: string, through: string) => {
            setRange("custom");
            setDates({ from, through });
        },
        reset: () => setRange("30d"),
    };

    return (
        <div className="min-h-80 overflow-hidden rounded-control border border-border-subtle">
            <NxInsightSurface
                appKey="production"
                title="Production insight"
                subtitle="Review throughput for the selected range."
                context={{
                    isLoading: false,
                    isError: false,
                    legalEntityPublicId: "le_demo",
                }}
                canRead
                query={{ isLoading: false, isError: false }}
                asOf="2026-08-15T09:30:00+09:00"
                filter={
                    <NxInsightFilterBar
                        filter={filter}
                        presets={["7d", "30d", "90d", "custom"]}
                    />
                }
                stats={
                    <div className="rounded-control border border-border-subtle p-5">
                        Completed work orders: 148
                    </div>
                }
            />
        </div>
    );
}1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556