// @bun
import{CodeBlock as a}from"@contractspec/lib.design-system";import i from"@contractspec/lib.ui-link";import{ChevronRight as n}from"lucide-react";import{jsx as e,jsxs as t}from"react/jsx-runtime";var s=`import { defineDataView } from '@contractspec/lib.contracts-spec/data-views';
import { ListTransactions } from './list-transactions';

export const TransactionHistory = defineDataView({
  meta: {
    key: 'billing.transactionHistory',
    version: '1.0.0',
    entity: 'transaction',
    title: 'Transaction History',
    description: 'Customer payment history',
    domain: 'billing',
    owners: ['team-billing'],
    tags: ['payments'],
    stability: 'stable',
  },
  source: {
    primary: {
      key: ListTransactions.meta.key,
      version: ListTransactions.meta.version,
    },
  },
  view: {
    kind: 'table',
    executionMode: 'client',
    selection: 'multiple',
    columnVisibility: true,
    columnResizing: true,
    columnPinning: true,
    rowExpansion: {
      fields: ['notes', 'renewalDate', 'lastActivityAt'],
    },
    initialState: {
      pageSize: 4,
      hiddenColumns: ['notes'],
      pinnedColumns: {
        left: ['account'],
      },
      sorting: [{ field: 'arr', desc: true }],
    },
    fields: [
      { key: 'account', label: 'Account', dataPath: 'account', sortable: true },
      { key: 'owner', label: 'Owner', dataPath: 'owner', sortable: true },
      { key: 'status', label: 'Status', dataPath: 'status', sortable: true },
      { key: 'notes', label: 'Notes', dataPath: 'notes' },
    ],
  },
});`;function c(){return t("div",{className:"space-y-8",children:[t("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"Display Data with DataViews"}),e("p",{className:"text-lg text-muted-foreground",children:"Define a filterable, sortable transaction history view that works across web and mobile without duplicating UI code."})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"1. Define the underlying query"}),e("p",{className:"text-muted-foreground",children:"First, create a query operation to fetch the data:"}),e(a,{language:"typescript",filename:"lib/specs/billing/list-transactions.ts",code:`import { defineQuery } from '@contractspec/lib.contracts-spec';

export const ListTransactions = defineQuery({
  meta: {
    key: 'billing.listTransactions',
    version: '1.0.0',
    description: 'Fetch customer transaction history',
  },
  io: {
    input: /* pagination + filters */,
    output: /* array of transactions */,
  },
  policy: { auth: 'user' },
});`})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"2. Define the DataView spec"}),e("p",{className:"text-muted-foreground",children:"Wrap your query with presentation metadata:"}),e(a,{language:"typescript",filename:"lib/specs/billing/transaction-history.data-view.ts",code:s}),t("p",{className:"text-muted-foreground text-sm",children:["The live version of this pattern is available in the canonical"," ",e(i,{href:"/docs/examples/data-grid-showcase",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Data Grid Showcase"}),"."]})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"3. Render on the frontend"}),e("p",{className:"text-muted-foreground",children:"Use the runtime renderer in your React or React Native app:"}),e(a,{language:"tsx",filename:"app/dashboard/transactions/page.tsx",code:`'use client';

import { DataViewRenderer } from '@contractspec/lib.design-system';
import { TransactionHistory } from '@/lib/specs/billing/transaction-history.data-view';
import { useQuery } from '@tanstack/react-query';

export function TransactionsPage() {
  const { data, isLoading } = useQuery({
    queryKey: ['transactions'],
    queryFn: () => fetch('/api/ops/billing.listTransactions').then(r => r.json()),
  });

  return (
    <div className="container py-8">
      <h1 className="text-3xl font-bold mb-6">Payment History</h1>
      <DataViewRenderer
        spec={TransactionHistory}
        data={data?.items ?? []}
        loading={isLoading}
        onFilterChange={(filters) => {
          // refetch with new filters
        }}
      />
    </div>
  );
}`})]}),t("div",{className:"card-subtle space-y-4 p-6",children:[e("h3",{className:"font-bold",children:"Why DataViews?"}),t("ul",{className:"space-y-2 text-muted-foreground text-sm",children:[e("li",{children:"Same spec renders on web (React) and mobile (React Native)"}),e("li",{children:"Filters, sorting, and pagination handled automatically"}),e("li",{children:"Column visibility, pinning, resizing, and row expansion stay contract-driven"}),e("li",{children:"Format rules (currency, dates, badges) applied consistently"}),e("li",{children:"Export to CSV/PDF using the same spec"}),e("li",{children:"A/B test different layouts without touching the backend"})]})]}),t("div",{className:"flex items-center gap-4 pt-4",children:[t(i,{href:"/docs/libraries/data-views",className:"btn-primary",children:["DataView API Reference ",e(n,{size:16})]}),e(i,{href:"/docs/specs/workflows",className:"btn-ghost",children:"Next: Workflows"})]})]})}export{c as DataViewTutorialPage};
