gitfor/platform

import { createFileRoute, Link } from "@tanstack/react-router";
import { getSecurityOverview, updateSecuritySettings } from "~/fns/security";
import { useAction } from "~/hooks/use-action";
import { Button, buttonClass } from "~/ui/Button";
import { CheckboxField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { EmptyState } from "~/ui/EmptyState";
import { Markdown } from "~/ui/Markdown";
import { Panel } from "~/ui/Panel";
import { TextLink } from "~/ui/TextLink";

export const Route = createFileRoute("/$owner/$repo/security/")({
  loader: ({ params }) => getSecurityOverview({ data: { owner: params.owner, repo: params.repo } }),
  component: SecurityOverview,
});

function Stat({ label, value, to }: { label: string; value: number | null; to: React.ReactNode }) {
  return (
    <Panel padding="md">
      <div className="label-small text-kumo-subtle">{label}</div>
      <div className="mt-1 font-mono text-2xl text-white">{value ?? "—"}</div>
      <div className="mt-2 text-xs">{to}</div>
    </Panel>
  );
}

function SettingsForm() {
  const { settings } = Route.useLoaderData();
  const params = Route.useParams();
  const save = useAction(updateSecuritySettings);
  return (
    <Panel title="Security settings">
      <form
        className="space-y-4 p-4"
        onSubmit={(event) => {
          event.preventDefault();
          const form = new FormData(event.currentTarget);
          void save.run({
            data: {
              ...params,