metis-desk/modules/companies/src/web/remote-connections/detail/ui/remote-summary.tsx

import type { AssetDTO } from "@metis/assets/common";
import type { ResourceDTO } from "@metis/resources/common";
import { useTranslation } from "react-i18next";

import type { CompanyDTO } from "../../../../common";
import type {
  RemoteConnectionDTO,
  RemoteConnectionInput,
} from "../../../../common/remote-connections";

export function remoteEndpoints(
  values: RemoteConnectionInput,
  company: CompanyDTO,
  assets: readonly AssetDTO[],
  resources: readonly ResourceDTO[],
  t: (key: string) => string
) {
  const source =
    values.sourceKind === "company_asset"
      ? (assets.find((item) => item.id === values.sourceAssetId)?.values.name ??
        values.sourceAssetId ??
        "—")
      : t(`remote.${values.sourceKind}`);
  const target =
    values.targetKind === "network"
      ? `${t("remote.network")} · ${company.sites.find((site) => site.id === values.siteId)?.name ?? company.name}`
      : values.targetKind === "asset"
        ? (assets.find((item) => item.id === values.targetId)?.values.name ??
          values.targetId ??
          "—")
        : (resources.find((item) => item.id === values.targetId)?.values.name ??
          values.targetId ??
          "—");
  return { source, target };
}
export function RemoteSummary({
  connection,
  company,
  assets,
  resources,
}: {
  connection: RemoteConnectionDTO;
  company: CompanyDTO;
  assets: readonly AssetDTO[];
  resources: readonly ResourceDTO[];
}) {
  const { t } = useTranslation("companies");
  const endpoints = remoteEndpoints(connection.values, company, assets, resources, t);
  return (
    <div className="space-y-2 text-sm">
      <p className="break-words font-medium">
        {endpoints.source} → {connection.values.method} → {endpoints.target}
      </p>
      <p>{t(`mail.${connection.values.state}`)}</p>
      {connection.values.requiresVpn && (
        <p>
          {t("remote.vpnRequired")} · {t("remote.vpnNote")}
        </p>
      )}
      {!(
        connection.authorizationEffective ||
        ["removed", "never_configured"].includes(connection.values.state)
      ) && <p className="text-amber-700">{t("remote.authorizationMissing")}</p>}
      {connection.needsReview && <p className="text-amber-700">{t("remote.review")}</p>}
      {connection.values.notes && (
        <p className="whitespace-pre-wrap text-muted-foreground">{connection.values.notes}</p>
      )}
    </div>
  );
}