Data Components

import { StatusDot } from "@/design-system/components/data";

export function Example() {
  return (
    <div className="data-docs-row">
      <StatusDot tone="success" label="Online" pulse />
      <StatusDot tone="warning" label="Degraded" />
      <StatusDot tone="danger" label="Blocked" />
      <StatusDot tone="neutral" label="Idle" />
    </div>
  );
}

import { PermissionBadge } from "@/design-system/components/data";

export function Example() {
  return (
    <div className="data-docs-row">
      <PermissionBadge level="owner" />
      <PermissionBadge level="admin" variant="outline" />
      <PermissionBadge level="editor" />
      <PermissionBadge level="viewer" />
      <PermissionBadge level="restricted" variant="solid" />
    </div>
  );
}

import { StatCard } from "@/design-system/components/data";

export function Example() {
  return (
    <div className="data-docs-grid">
      <StatCard
        tone="primary"
        icon={/* icon */ undefined}
        label="Active students"
        value="128"
        helper="Across 6 programs"
        trend={{ direction: "up", value: "+8%", label: "vs last week" }}
      />

      <StatCard
        tone="success"
        label="Sessions completed"
        value="42"
        helper="Last 24 hours"
        trend={{ direction: "up", value: "+12%", label: "vs yesterday" }}
      />

      <StatCard
        tone="warning"
        label="Needs review"
        value="7"
        helper="Supervisor queue"
        trend={{ direction: "flat", value: "Stable" }}
      />

      <StatCard
        tone="danger"
        label="Blocked exports"
        value="2"
        helper="Missing permissions"
        trend={{ direction: "down", value: "-1", label: "since Monday" }}
      />
    </div>
  );
}

import { DataToolbar } from "@/design-system/components/data";
import { Button } from "@/design-system/components/Button";

export function Example() {
  return (
    <DataToolbar
      title="Students"
      subtitle="Clinical workspace"
      meta="128 results"
      search={<input className="data-toolbar__searchInput" placeholder="Search students..." />}
      filters={
        <>
          <Button size="sm" variant="ghost">Program</Button>
          <Button size="sm" variant="ghost">Status</Button>
        </>
      }
      actions={
        <>
          <Button size="sm" variant="ghost">Export</Button>
          <Button size="sm" variant="primary">Add student</Button>
        </>
      }
    />
  );
}

import { EmptyState } from "@/design-system/components/data";
import { Button } from "@/design-system/components/Button";

export function Example() {
  return (
    <EmptyState
      icon={/* icon */ undefined}
      title="No results"
      description="Try adjusting your filters or search query."
      actions={
        <>
          <Button variant="ghost">Reset filters</Button>
          <Button variant="primary">Add student</Button>
        </>
      }
      variant="dashed"
    />
  );
}

import { Timeline } from "@/design-system/components/data";

export function Example() {
  return (
    <Timeline
      items={[
        { tone: "success", title: "Plan approved", description: "Supervisor approval recorded.", time: "2h ago" },
        { tone: "info", title: "Export generated", description: "Billing export created.", time: "Yesterday" },
      ]}
    />
  );
}

import { AuditLog } from "@/design-system/components/data";

export function Example() {
  return (
    <AuditLog
      caption="Recent actions"
      items={[
        { at: "2m ago", actor: "Clinical Team", action: "Updated", target: "Student Profile", status: { tone: "success", label: "Saved" } },
        { at: "1h ago", actor: "Finance Admin", action: "Denied", target: "Billing Export", status: { tone: "danger", label: "Blocked" } },
      ]}
    />
  );
}