flxn-app/src/features/admin/components/dashboard/status-strip.tsx

import { useMemo } from "react";
import { Group, Stack, Text, UnstyledButton } from "@mantine/core";
import { useLingui } from "@lingui/react/macro";
import { useNavigate } from "@tanstack/react-router";
import {
  useClientErrorGroups,
  useRollupRange,
  useTelemetryRuntimeStatus,
} from "@/features/telemetry/queries";
import { isoDay, lastNDays } from "@/features/telemetry/range";

interface StatProps {
  value: string | number;
  label: string;
  alert?: boolean;
  onClick: () => void;
}

const Stat = ({ value, label, alert, onClick }: StatProps) => (
  <UnstyledButton className="flxn-press" onClick={onClick}>
    <Stack gap={0} align="center">
      <Text fz="lg" fw={700} lh={1.3} c={alert ? "red" : undefined}>
        {value}
      </Text>
      <Text size="xs" c="dimmed">
        {label}
      </Text>
    </Stack>
  </UnstyledButton>
);

export const StatusStrip = () => {
  const { t } = useLingui();
  const navigate = useNavigate();
  const today = useMemo(() => isoDay(new Date()), []);
  const month = useMemo(() => lastNDays(30), []);

  const { data: status } = useTelemetryRuntimeStatus();
  const { data: errorGroups } = useClientErrorGroups({ from: month.from, to: month.to });
  const { data: rollups } = useRollupRange({
    metrics: ["server_fn.count"],
    from: today,
    to: today,
  });

  const callsToday = useMemo(
    () => (rollups ?? []).reduce((sum, row) => sum + row.value, 0),
    [rollups]
  );
  const openErrors = errorGroups?.length ?? 0;

  return (
    <Group grow>
      <Stat
        value={status?.activeSseConnections ?? 0}
        label={t`Online`}
        onClick={() => navigate({ to: "/admin/telemetry/players" })}
      />
      <Stat
        value={openErrors}
        label={t`Open errors`}
        alert={openErrors > 0}
        onClick={() => navigate({ to: "/admin/telemetry/errors" })}
      />
      <Stat
        value={callsToday.toLocaleString()}
        label={t`Calls today`}
        onClick={() => navigate({ to: "/admin/telemetry/usage" })}
      />
    </Group>
  );
};

export default StatusStrip;