Data display

import { useState } from "react";

import {
    NxDetailRow,
    NxOverviewBand,
    NxPagination,
    NxStatCard,
    NxStatusBadge,
    ResourceTable,
} from "@nexia/sdk/host";

const rows = [
    { id: "WO-1042", line: "Cutting", status: "Running" },
    { id: "WO-1043", line: "Assembly", status: "Waiting" },
];

export function DataDisplayExample() {
    const [page, setPage] = useState(1);

    return (
        <div className="grid gap-6">
            <NxOverviewBand
                title="Production overview"
                asOf="2026-08-15T09:30:00+09:00"
                cards={[
                    { key: "running", label: "Running", value: 12 },
                    { key: "attention", label: "Needs attention", value: 3 },
                    { key: "complete", label: "Completed today", value: 48 },
                ]}
            />
            <div className="grid gap-4 md:grid-cols-2">
                <NxStatCard
                    label="On-time completion"
                    value="94.8%"
                    hint="Previous 30 days"
                    bordered
                />
                <div className="rounded-control border border-border-subtle p-4">
                    <NxDetailRow label="Owner">Min Kim</NxDetailRow>
                    <NxDetailRow label="Plant">Seoul Plant</NxDetailRow>
                </div>
            </div>
            <ResourceTable
                label="Production work orders"
                rows={rows}
                getKey={(row) => row.id}
                columns={[
                    { key: "id", header: "Work order", cell: (row) => row.id },
                    { key: "line", header: "Line", cell: (row) => row.line },
                    {
                        key: "status",
                        header: "Status",
                        cell: (row) => (
                            <NxStatusBadge variant="info">
                                {row.status}
                            </NxStatusBadge>
                        ),
                    },
                ]}
            />
            <NxPagination current={page} total={5} onChange={setPage} />
        </div>
    );
}12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364