@gntik-ai/templates 0.0.0-stage → 0.6.0

package/src/scorecard/Page.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import ScorecardPage from './Page';
+import { attainment, periodDelta, scorecardMetrics } from './data';
+
+describe('ScorecardPage', () => {
+  it('renders KPIs, targets, radar and commentary', { timeout: 15000 }, async () => {
+    render(<ScorecardPage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Quarterly scorecard' })).toBeInTheDocument();
+    expect(screen.getByText('Compared with Q2 2026')).toBeInTheDocument();
+    const table = screen.getByRole('table', { name: 'Metrics for Q3 2026 against target' });
+    expect(within(table).getAllByRole('meter')).toHaveLength(scorecardMetrics.length);
+    expect(screen.getByRole('complementary', { name: 'Commentary' })).toBeInTheDocument();
+    await expectNoAxeViolations();
+  });
+
+  it('switches period and posts a note', { timeout: 15000 }, async () => {
+    const onPeriodChange = vi.fn();
+    const onComment = vi.fn();
+    render(<ScorecardPage defaultPeriod="Q2 2026" onPeriodChange={onPeriodChange} onComment={onComment} />);
+    expect(screen.getByRole('table', { name: 'Metrics for Q2 2026 against target' })).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('combobox', { name: 'Period' }));
+    await userEvent.click(await screen.findByRole('option', { name: 'Q1 2026' }));
+    expect(onPeriodChange).toHaveBeenCalledWith('Q1 2026');
+    expect(screen.getByText('Compared with Q4 2025')).toBeInTheDocument();
+    await userEvent.type(screen.getByRole('textbox'), 'Revenue on track.');
+    await userEvent.click(screen.getByRole('button', { name: 'Post note' }));
+    expect(onComment).toHaveBeenCalledWith('Revenue on track.');
+  });
+
+  it('flips sentiment for lower-is-better metrics', () => {
+    const latency = scorecardMetrics.find((m) => m.id === 'latency')!;
+    expect(periodDelta(latency, 176, 205)?.sentiment).toBe('positive');
+    expect(attainment(latency, 180)).toBe(100);
+  });
+});

package/src/scorecard/Page.tsx

@@ -0,0 +1,160 @@
+import { CommentThread, KpiRow, PageHeader, type CommentAuthor, type ThreadComment } from '@gntik-ai/blocks';
+import { RadarChart } from '@gntik-ai/charts';
+import { Download } from '@gntik-ai/icons';
+import {
+  Card,
+  CardBody,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Grid,
+  HStack,
+  Page,
+  Section,
+  SimpleSelect,
+  Stack,
+  Text,
+  type BreadcrumbItem,
+} from '@gntik-ai/ui';
+import { useState } from 'react';
+import { ConsoleShell, type ConsoleShellProps } from '../shared/ConsoleShell';
+import {
+  periodKpis,
+  scorecardAuthor,
+  scorecardBreadcrumbs,
+  scorecardComments,
+  scorecardMetrics,
+  scorecardPeriods,
+  scorecardRadar,
+  type RadarPoint,
+  type ScorecardMetric,
+} from './data';
+import { TargetsTable } from './TargetsTable';
+
+export interface ScorecardProps {
+  title: string;
+  description: string;
+  /** Period labels, oldest first; every metric series is aligned with them. */
+  periods: string[];
+  /** Initially selected period (defaults to the latest). */
+  defaultPeriod: string;
+  onPeriodChange: (period: string) => void;
+  metrics: ScorecardMetric[];
+  /** Dimension scores: `dimension` plus one key per period label. */
+  radar: RadarPoint[];
+  comments: ThreadComment[];
+  currentUser: CommentAuthor;
+  onComment: (body: string) => void;
+  onExport: (period: string) => void;
+  breadcrumbs: BreadcrumbItem[];
+  currentHref: string;
+  shell: Omit<ConsoleShellProps, 'children'>;
+}
+
+/** Scorecard: period-over-period KPIs, targets with attainment and trends, a radar of dimensions and a commentary rail. */
+export default function ScorecardPage(props: Partial<ScorecardProps>) {
+  const {
+    title = 'Quarterly scorecard',
+    description = 'Company metrics against target, compared with the previous quarter.',
+    periods = scorecardPeriods,
+    defaultPeriod,
+    onPeriodChange,
+    metrics = scorecardMetrics,
+    radar = scorecardRadar,
+    comments = scorecardComments,
+    currentUser = scorecardAuthor,
+    onComment,
+    onExport,
+    breadcrumbs = scorecardBreadcrumbs,
+    currentHref = '/scorecard',
+    shell,
+  } = props;
+  const [period, setPeriod] = useState(defaultPeriod ?? periods[periods.length - 1] ?? '');
+  const index = Math.max(0, periods.indexOf(period));
+  const previous = periods[index - 1];
+  const compared = previous ? [period, previous] : [period];
+
+  return (
+    <ConsoleShell breadcrumbs={breadcrumbs} currentHref={currentHref} {...shell}>
+      <Page
+        width="wide"
+        header={
+          <PageHeader
+            breadcrumbs={null}
+            title={title}
+            description={description}
+            status=""
+            meta={[]}
+            tabs={null}
+            actions={[{ label: 'Export PDF', icon: Download, variant: 'secondary', onClick: () => onExport?.(period) }]}
+          />
+        }
+      >
+        <Stack gap={6}>
+          <HStack gap={3} wrap>
+            <SimpleSelect
+              aria-label="Period"
+              items={periods.map((p) => ({ value: p, label: p }))}
+              value={period}
+              onValueChange={(v) => {
+                if (!v) return;
+                setPeriod(v);
+                onPeriodChange?.(v);
+              }}
+              className="w-40"
+            />
+            <Text as="span" variant="supporting" tone="muted" aria-live="polite">
+              {previous ? `Compared with ${previous}` : 'No earlier period to compare with'}
+            </Text>
+          </HStack>
+          <KpiRow items={periodKpis(metrics, periods, index)} label={`Key metrics, ${period}`} showTrends={false} />
+          <Grid cols={{ base: 1, xl: 3 }} gap={6} align="start">
+            <Stack gap={6} className="min-w-0 xl:col-span-2">
+              <Section
+                title="Targets"
+                description="Attainment against this period’s targets; trend shows every quarter up to the selected one."
+              >
+                <TargetsTable metrics={metrics} periods={periods} index={index} />
+              </Section>
+              <Card>
+                <CardHeader>
+                  <CardTitle as="h2">Health by dimension</CardTitle>
+                  <CardDescription>Scores out of 100{previous ? `, ${period} vs. ${previous}` : ''}.</CardDescription>
+                </CardHeader>
+                <CardBody>
+                  <RadarChart<RadarPoint>
+                    data={radar}
+                    index="dimension"
+                    categories={compared}
+                    max={100}
+                    height={300}
+                    aria-label={`Health by dimension, ${compared.join(' vs. ')}`}
+                    dataTable
+                  />
+                </CardBody>
+              </Card>
+            </Stack>
+            <aside aria-label="Commentary" className="min-w-0">
+              <Card>
+                <CardHeader divided>
+                  <CardTitle as="h2">Commentary</CardTitle>
+                  <CardDescription>Notes from the review, newest last.</CardDescription>
+                </CardHeader>
+                <CardBody>
+                  <CommentThread
+                    comments={comments}
+                    currentUser={currentUser}
+                    onSubmit={onComment}
+                    label="Scorecard commentary"
+                    placeholder="Add a note for this period…"
+                    submitLabel="Post note"
+                  />
+                </CardBody>
+              </Card>
+            </aside>
+          </Grid>
+        </Stack>
+      </Page>
+    </ConsoleShell>
+  );
+}

package/src/scorecard/TargetsTable.tsx

@@ -0,0 +1,92 @@
+import { TrendDelta } from '@gntik-ai/blocks';
+import { MiniBar } from '@gntik-ai/charts';
+import { Meter, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@gntik-ai/ui';
+import { attainment, periodDelta, type ScorecardMetric } from './data';
+
+/** Attainment never turns amber/red: for targets, a full bar is the good outcome. */
+const NO_ALERT = { warning: 1000, destructive: 1000 };
+
+export interface TargetsTableProps {
+  metrics: readonly ScorecardMetric[];
+  periods: readonly string[];
+  index: number;
+}
+
+/** Period-over-period metrics against their targets, with attainment and a trend per row. */
+export function TargetsTable({ metrics, periods, index }: TargetsTableProps) {
+  const current = periods[index] ?? '';
+  const previous = periods[index - 1];
+  return (
+    <Table containerLabel="Targets">
+      <TableCaption srOnly>Metrics for {current} against target</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead scope="col">Metric</TableHead>
+          <TableHead scope="col" align="right">
+            {current}
+          </TableHead>
+          <TableHead scope="col" align="right">
+            {previous ?? 'Previous'}
+          </TableHead>
+          <TableHead scope="col" align="right">
+            Change
+          </TableHead>
+          <TableHead scope="col" align="right">
+            Target
+          </TableHead>
+          <TableHead scope="col" className="w-40">
+            Attainment
+          </TableHead>
+          <TableHead scope="col">Trend</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {metrics.map((m) => {
+          const value = m.series[index] ?? 0;
+          const prev = m.series[index - 1];
+          const delta = periodDelta(m, value, prev);
+          const att = attainment(m, value);
+          const series = m.series.slice(0, index + 1);
+          return (
+            <TableRow key={m.id}>
+              <TableHead scope="row" className="font-medium text-foreground">
+                {m.label}
+              </TableHead>
+              <TableCell align="right" className="font-mono tabular-nums text-foreground">
+                {m.format(value)}
+              </TableCell>
+              <TableCell align="right" className="font-mono tabular-nums text-muted-foreground">
+                {prev === undefined ? '—' : m.format(prev)}
+              </TableCell>
+              <TableCell align="right">{delta ? <TrendDelta {...delta} /> : '—'}</TableCell>
+              <TableCell align="right" className="font-mono tabular-nums text-muted-foreground">
+                {m.lowerIsBetter ? '≤ ' : ''}
+                {m.format(m.target)}
+              </TableCell>
+              <TableCell>
+                <Meter
+                  size="sm"
+                  value={Math.min(att, 100)}
+                  aria-label={`${m.label} attainment`}
+                  aria-valuetext={`${att}% of target`}
+                  valueLabel={`${att}%`}
+                  thresholds={NO_ALERT}
+                />
+              </TableCell>
+              <TableCell>
+                <MiniBar
+                  data={series}
+                  labels={periods.slice(0, index + 1)}
+                  formatValue={m.format}
+                  label={`${m.label} by quarter`}
+                  width={88}
+                  height={24}
+                />
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}

package/src/scorecard/data.ts

@@ -0,0 +1,118 @@
+import type { CommentAuthor, KpiDelta, KpiItem, ThreadComment } from '@gntik-ai/blocks';
+import type { BreadcrumbItem } from '@gntik-ai/ui';
+
+export interface ScorecardMetric {
+  id: string;
+  label: string;
+  /** One value per period, aligned with `periods`. */
+  series: number[];
+  target: number;
+  /** Lower is better (latency, churn): flips the delta sentiment and the attainment. */
+  lowerIsBetter?: boolean;
+  format: (value: number) => string;
+}
+
+export interface RadarPoint {
+  dimension: string;
+  [period: string]: number | string;
+}
+
+const pct = (v: number) => `${v.toFixed(1)}%`;
+const ms = (v: number) => `${Math.round(v)} ms`;
+const money = (v: number) => `$${(v / 1000).toFixed(0)}k`;
+const int = (v: number) => v.toLocaleString('en-US');
+
+export const scorecardPeriods = ['Q4 2025', 'Q1 2026', 'Q2 2026', 'Q3 2026'];
+
+export const scorecardMetrics: ScorecardMetric[] = [
+  {
+    id: 'revenue',
+    label: 'Recurring revenue',
+    series: [412_000, 438_000, 471_000, 503_000],
+    target: 520_000,
+    format: money,
+  },
+  { id: 'active', label: 'Active workspaces', series: [1_840, 1_910, 2_064, 2_190], target: 2_100, format: int },
+  {
+    id: 'uptime',
+    label: 'Uptime',
+    series: [99.92, 99.95, 99.87, 99.97],
+    target: 99.95,
+    format: (v) => `${v.toFixed(2)}%`,
+  },
+  { id: 'latency', label: 'p95 latency', series: [212, 198, 205, 176], target: 180, lowerIsBetter: true, format: ms },
+  { id: 'churn', label: 'Logo churn', series: [2.4, 2.1, 2.6, 1.9], target: 2.0, lowerIsBetter: true, format: pct },
+  { id: 'nps', label: 'Satisfaction (NPS)', series: [38, 41, 40, 46], target: 45, format: int },
+];
+
+/** Dimension scores (0–100) per period. */
+export const scorecardRadar: RadarPoint[] = [
+  { dimension: 'Growth', 'Q4 2025': 62, 'Q1 2026': 66, 'Q2 2026': 71, 'Q3 2026': 78 },
+  { dimension: 'Reliability', 'Q4 2025': 80, 'Q1 2026': 84, 'Q2 2026': 76, 'Q3 2026': 88 },
+  { dimension: 'Performance', 'Q4 2025': 70, 'Q1 2026': 74, 'Q2 2026': 72, 'Q3 2026': 83 },
+  { dimension: 'Retention', 'Q4 2025': 68, 'Q1 2026': 72, 'Q2 2026': 65, 'Q3 2026': 76 },
+  { dimension: 'Satisfaction', 'Q4 2025': 60, 'Q1 2026': 64, 'Q2 2026': 63, 'Q3 2026': 71 },
+];
+
+export const scorecardBreadcrumbs: BreadcrumbItem[] = [
+  { label: 'Acme Industries', href: '/overview' },
+  { label: 'Scorecard' },
+];
+
+export const scorecardAuthor: CommentAuthor = { name: 'Jordan Lee' };
+
+const DAY = 86_400_000;
+export const scorecardComments: ThreadComment[] = [
+  {
+    id: 'c1',
+    author: { name: 'Priya Natarajan' },
+    body: 'Latency is finally under target after the cache rollout in August. Keep an eye on the EU region.',
+    at: Date.now() - 3 * DAY,
+  },
+  {
+    id: 'c2',
+    author: { name: 'Marcus Chen' },
+    body: 'Revenue is 3% short of target; two enterprise renewals slipped into October.',
+    at: Date.now() - 2 * DAY,
+  },
+  {
+    id: 'c3',
+    author: { name: 'Ana Souza' },
+    body: 'Churn improved with the new onboarding checklist. Proposing we raise the NPS target to 50 for Q4.',
+    at: Date.now() - DAY / 2,
+  },
+];
+
+/** Change between two values, with sentiment following `lowerIsBetter`. */
+export function periodDelta(m: ScorecardMetric, current: number, previous: number | undefined): KpiDelta | undefined {
+  if (previous === undefined || previous === 0) return undefined;
+  const change = ((current - previous) / previous) * 100;
+  const direction = Math.abs(change) < 0.05 ? 'flat' : change > 0 ? 'up' : 'down';
+  const good = m.lowerIsBetter ? change < 0 : change > 0;
+  return {
+    value: `${change > 0 ? '+' : ''}${change.toFixed(1)}%`,
+    direction,
+    sentiment: direction === 'flat' ? 'neutral' : good ? 'positive' : 'negative',
+  };
+}
+
+/** Attainment of the target in percent (capped at 100 for the meter). */
+export function attainment(m: ScorecardMetric, value: number): number {
+  const ratio = m.lowerIsBetter ? m.target / value : value / m.target;
+  return Math.round(ratio * 1000) / 10;
+}
+
+/** KpiRow items for a period, compared with the one before it. */
+export function periodKpis(metrics: readonly ScorecardMetric[], periods: readonly string[], index: number): KpiItem[] {
+  const prevLabel = periods[index - 1];
+  return metrics.slice(0, 4).map((m) => {
+    const current = m.series[index] ?? 0;
+    const delta = periodDelta(m, current, m.series[index - 1]);
+    return {
+      id: m.id,
+      label: m.label,
+      value: m.format(current),
+      delta: delta && prevLabel ? { ...delta, note: `vs. ${prevLabel}` } : undefined,
+    };
+  });
+}

package/src/scorecard/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Scorecard',
+  family: 'Overview',
+  priority: 'P3',
+  status: 'experimental',
+  description:
+    'Period-over-period scorecard: period select, KpiRow with deltas vs. the previous period, a targets table (change, target, attainment Meter, MiniBar trend), a RadarChart of dimension scores and a commentary rail (CommentThread).',
+  layout: 'SidebarLayout · Page',
+  blocks: ['app-sidebar', 'app-topbar', 'page-header', 'kpi-row', 'comment-thread'],
+};

package/src/search-results/Page.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import SearchResultsPage from './Page';
+
+describe('SearchResultsPage', () => {
+  it('renders facets and grouped results', { timeout: 15000 }, async () => {
+    render(<SearchResultsPage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Search' })).toBeInTheDocument();
+    expect(screen.getByRole('complementary', { name: 'Filters' })).toBeInTheDocument();
+    for (const name of ['Projects', 'Deployments', 'Members', 'Documents']) {
+      expect(screen.getByRole('region', { name })).toBeInTheDocument();
+    }
+    await expectNoAxeViolations();
+  });
+
+  it('moves through results with the arrow keys', { timeout: 15000 }, async () => {
+    render(<SearchResultsPage />);
+    await userEvent.click(screen.getByRole('searchbox', { name: 'Search the workspace' }));
+    await userEvent.keyboard('{ArrowDown}');
+    expect(screen.getByRole('link', { name: 'billing-api' })).toHaveFocus();
+    await userEvent.keyboard('{ArrowDown}{ArrowDown}');
+    expect(screen.getByRole('link', { name: 'orders-api' })).toHaveFocus();
+    await userEvent.keyboard('{End}');
+    expect(screen.getByRole('link', { name: 'Usage-based billing guide' })).toHaveFocus();
+  });
+
+  it('filters with a facet and shows NoResultsEmpty', { timeout: 15000 }, async () => {
+    render(<SearchResultsPage />);
+    const facets = screen.getByRole('complementary', { name: 'Filters' });
+    await userEvent.click(within(facets).getByRole('checkbox', { name: /Members/ }));
+    expect(screen.queryByRole('region', { name: 'Projects' })).not.toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Riley Morgan' })).toBeInTheDocument();
+
+    const box = screen.getByRole('searchbox', { name: 'Search the workspace' });
+    await userEvent.clear(box);
+    await userEvent.type(box, 'zzz');
+    expect(screen.getByRole('heading', { level: 2, name: /No results match/ })).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: 'Clear filters' }));
+    expect(within(facets).getByRole('checkbox', { name: /Members/ })).not.toBeChecked();
+  });
+});