64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import { FormDialog } from "@repo/shadcn-ui/components/form-dialog";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import type { CompanyDTO } from "../../common";
|
|
import type { RemoteConnectionDTO } from "../../common/remote-connections";
|
|
|
|
import { remoteEndpoints } from "./remote-summary";
|
|
|
|
export function RemoteConnectionHistoryDialog({
|
|
connection,
|
|
company,
|
|
inventory,
|
|
entries,
|
|
person,
|
|
onClose,
|
|
}: {
|
|
connection: RemoteConnectionDTO;
|
|
company: CompanyDTO;
|
|
inventory: Parameters<typeof remoteEndpoints>[2];
|
|
entries: Parameters<typeof remoteEndpoints>[3];
|
|
person: (id: string) => string;
|
|
onClose: () => void;
|
|
}) {
|
|
const { t, i18n } = useTranslation("companies");
|
|
|
|
return (
|
|
<FormDialog
|
|
cancelLabel={t("close")}
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
onClose();
|
|
}
|
|
}}
|
|
open
|
|
title={t("remote.history")}
|
|
wide
|
|
>
|
|
<p className="font-medium">{person(connection.values.personId)}</p>
|
|
<ol className="space-y-3">
|
|
{[...connection.history].reverse().map((r) => {
|
|
const route = remoteEndpoints(r.values, company, inventory, entries, t);
|
|
return (
|
|
<li className="rounded-md border p-3 text-sm" key={r.id}>
|
|
<p className="font-medium">
|
|
{new Intl.DateTimeFormat(i18n.language, {
|
|
dateStyle: "medium",
|
|
timeStyle: "short",
|
|
}).format(new Date(r.recordedAt))}{" "}
|
|
· {r.actorName}
|
|
</p>
|
|
<p>
|
|
{route.source} → {r.values.method} → {route.target}
|
|
</p>
|
|
<p>{t(`mail.${r.values.state}`)}</p>
|
|
{r.values.requiresVpn && <p>{t("remote.vpnRequired")}</p>}
|
|
{r.values.notes && <p className="mt-2 whitespace-pre-wrap">{r.values.notes}</p>}
|
|
</li>
|
|
);
|
|
})}
|
|
</ol>
|
|
</FormDialog>
|
|
);
|
|
}
|