import { Card } from "../../components/Card";
import { Page } from "../../components/Page";

export function DashboardPage() {
  return (
    <Page title="Dashboard" subtitle="Operational visibility across users, devices, gateways, and policy activity.">
      <div className="grid three">
        <Card>
          <p className="metric-label">Active users</p>
          <strong className="metric-value">248</strong>
          <span>12 enrolled this week</span>
        </Card>
        <Card>
          <p className="metric-label">Connected devices</p>
          <strong className="metric-value">181</strong>
          <span>7 pending rotation</span>
        </Card>
        <Card>
          <p className="metric-label">Gateway health</p>
          <strong className="metric-value">Healthy</strong>
          <span>Last sync 36s ago</span>
        </Card>
      </div>
      <div className="grid two">
        <Card>
          <h4>Recent enrollments</h4>
          <p>New devices are issued profiles automatically after successful sign-in.</p>
        </Card>
        <Card>
          <h4>Policy posture</h4>
          <p>Gateway enforcement is generated from effective allow-lists backed by nftables.</p>
        </Card>
      </div>
    </Page>
  );
}
