metis-desk/modules/companies/src/web/people/detail/ui/person-details.tsx

import { inventoryApi, inventoryKeys } from "@metis/assets/client";
import { BrowserLink } from "@metis/core/client";
import {
  EntityAction,
  EntityListHeader,
  EntityRowActions,
  EntityTable,
} from "@repo/rdx-ui/components/entity-list";
import { PhoneLink } from "@repo/rdx-ui/components/phone-link";
import { BriefcaseIcon, ChevronLeftIcon, MailIcon, PhoneIcon } from "@repo/rdx-ui/lib/icons";
import { AvatarBadge } from "@repo/shadcn-ui/components/avatar";
import { Button } from "@repo/shadcn-ui/components/button";
import { Card, CardContent } from "@repo/shadcn-ui/components/card";
import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import { useTranslation } from "react-i18next";

import type { CompanyDTO, PersonDTO } from "../../../../common";
import { AssignmentEditorDialog, AssignmentHistoryDialog } from "../../../assignments";
import { deleteAssignment } from "../../../assignments/shared/api";
import { PersonAvatar } from "../../shared";
import { deletePerson } from "../../shared/api";

export function PersonDetails({
  company,
  person,
  csrfToken,
  onBack,
  onEdit,
}: {
  company: CompanyDTO;
  person: PersonDTO;
  csrfToken: string;
  onBack: () => void;
  onEdit: () => void;
}) {
  const { t, i18n } = useTranslation("companies");
  const [editor, setEditor] = useState<string | undefined>();
  const [historyId, setHistoryId] = useState<string | undefined>();
  const [deleting, setDeleting] = useState(false);
  const [deletingAssignment, setDeletingAssignment] = useState<string | undefined>();
  const assignments = company.assignments.filter((item) => item.personId === person.id);
  const selected = assignments.find((item) => item.id === editor);
  const history = assignments.find((item) => item.id === historyId);
  const departmentName = (id: string) =>
    company.departments.find((item) => item.id === id)?.name ?? "—";
  return (
    <div className="space-y-6">
      <button
        className="app-link inline-flex cursor-pointer items-center gap-1 text-sm font-medium"
        onClick={onBack}
        type="button"
      >
        <ChevronLeftIcon aria-hidden="true" className="size-4" />
        {t("backToPeople")}
      </button>
      <div className="flex flex-wrap items-start justify-between gap-4">
        <div className="flex min-w-0 flex-1 items-start gap-4">
          <PersonAvatar
            className="size-14"
            companyId={company.id}
            name={person.name}
            personId={person.id}
            photoVersion={person.photoVersion}
          >
            <AvatarBadge
              className={person.active ? "bg-emerald-500" : "bg-muted-foreground"}
              title={t(person.active ? "activePerson" : "inactivePerson")}
            >
              <span className="sr-only">
                {t(person.active ? "activePerson" : "inactivePerson")}
              </span>
            </AvatarBadge>
          </PersonAvatar>
          <div className="min-w-0 space-y-2">
            <h2 className="break-words text-2xl font-semibold">{person.name}</h2>
            <div className="flex flex-wrap gap-x-5 gap-y-2 text-sm text-muted-foreground">
              <span className="inline-flex min-w-0 items-center gap-2">
                <BriefcaseIcon aria-hidden="true" className="size-4 shrink-0" />
                <span className="sr-only">{t("generalPosition")}: </span>
                <span className="break-words">{person.position ?? "—"}</span>
              </span>
              <span className="inline-flex min-w-0 items-center gap-2">
                <MailIcon aria-hidden="true" className="size-4 shrink-0" />
                <span className="sr-only">{t("email")}: </span>
                {person.email ? (
                  <a className="app-link break-all" href={`mailto:${person.email}`}>
                    {person.email}
                  </a>
                ) : (
                  "—"
                )}
              </span>
              <span className="inline-flex min-w-0 items-center gap-2">
                <span
                  className="group/contact"
                  data-contact={person.isContact}
                  title={person.isContact ? t("isContact") : undefined}
                >
                  <PhoneIcon
                    aria-hidden="true"
                    className="size-4 shrink-0 group-data-[contact=true]/contact:text-primary"
                  />
                </span>
                {person.phone ? <PhoneLink label={t("phone")} phone={person.phone} /> : "—"}
              </span>
            </div>
          </div>
        </div>
        <div className="flex flex-wrap gap-2">
          <Button onClick={onEdit} variant="outline">
            {t("editPerson")}
          </Button>
          <Button
            disabled={deleting}
            onClick={async () => {
              if (!window.confirm(t("deletePersonConfirm", { name: person.name }))) {
                return;
              }
              setDeleting(true);
              try {
                await deletePerson(company.id, person.id, csrfToken);
                onBack();
              } catch {
                window.alert(t("deletePersonError"));
              } finally {
                setDeleting(false);
              }
            }}
            variant="destructive"
          >
            {t(deleting ? "deletingPerson" : "deletePerson")}
          </Button>
        </div>
      </div>
      {!person.active && assignments.some((item) => item.endDate === null) && (
        <p className="rounded-md border p-3" role="status">
          {t("inactiveMembershipWarning")}
        </p>
      )}
      <CurrentWorkstations company={company} personId={person.id} />
      <Card>
        <CardContent className="space-y-4 pt-6">
          <EntityListHeader
            actions={
              <Button disabled={!person.active} onClick={() => setEditor("new")}>
                {t("addAssignment")}
              </Button>
            }
            locale={i18n.language}
            title={t("departmentAssignments")}
          />
          <EntityTable
            columns={[
              {
                id: "department",
                label: t("department"),
                value: (item) => departmentName(item.departmentId),
                hideable: false,
                render: (item) => (
                  <p>
                    <span className="font-medium">{departmentName(item.departmentId)}</span>
                    {company.departments.find((entry) => entry.id === item.departmentId)?.active ===
                      false && <span className="text-xs">{t("inactiveDepartment")}</span>}
                  </p>
                ),
              },
              {
                id: "position",
                label: t("position"),
                value: (item) => item.position,
                render: (item) => <>{item.position ?? "—"}</>,
              },
              {
                id: "start",
                label: t("startDate"),
                value: (item) => item.startDate,
                render: (item) => <>{item.startDate}</>,
              },
              {
                id: "end",
                label: t("endDateColumn"),
                value: (item) => item.endDate,
                render: (item) => <>{item.endDate ?? "—"}</>,
              },
              {
                id: "primary",
                label: t("primary"),
                value: (item) => item.isPrimary,
                render: (item) => <>{item.isPrimary ? t("yes") : "—"}</>,
              },
              {
                id: "actions",
                label: t("actions"),
                hideable: false,
                render: (item) => (
                  <EntityRowActions label={t("actions")}>
                    <EntityAction onClick={() => setEditor(item.id)}>{t("edit")}</EntityAction>
                    <EntityAction onClick={() => setHistoryId(item.id)}>
                      {t("history")}
                    </EntityAction>
                    <EntityAction
                      onClick={async () => {
                        if (
                          !window.confirm(
                            t("deleteAssignmentConfirm", {
                              name: departmentName(item.departmentId),
                            })
                          )
                        ) {
                          return;
                        }
                        setDeletingAssignment(item.id);
                        try {
                          await deleteAssignment(company.id, person.id, item.id, csrfToken);
                          window.location.reload();
                        } catch {
                          window.alert(t("deleteAssignmentError"));
                        } finally {
                          setDeletingAssignment(undefined);
                        }
                      }}
                    >
                      {t(
                        deletingAssignment === item.id ? "deletingAssignment" : "deleteAssignment"
                      )}
                    </EntityAction>
                  </EntityRowActions>
                ),
              },
            ]}
            emptyMessage={t("noAssignments")}
            items={assignments}
            locale={i18n.language}
            title={t("departmentAssignments")}
          />
          {!company.departments.some((item) => item.active) && (
            <p className="text-sm text-muted-foreground">{t("createDepartmentFirst")}</p>
          )}
        </CardContent>
      </Card>
      <AssignmentEditorDialog
        company={company}
        csrfToken={csrfToken}
        editor={editor}
        onOpenChange={(open) => {
          if (!open) {
            setEditor(undefined);
          }
        }}
        onSaved={() => setEditor(undefined)}
        personId={person.id}
        selected={selected}
      />
      <AssignmentHistoryDialog
        departmentName={departmentName}
        history={history}
        onOpenChange={(open) => {
          if (!open) {
            setHistoryId(undefined);
          }
        }}
      />
    </div>
  );
}

function CurrentWorkstations({ company, personId }: { company: CompanyDTO; personId: string }) {
  const { t, i18n } = useTranslation("companies");
  const inventory = useQuery({
    queryKey: inventoryKeys.company(company.id),
    queryFn: () => inventoryApi.get(company.id),
  });
  const workstations = (inventory.data?.workstations ?? []).filter(
    (item) => item.values.active && item.values.personId === personId
  );
  const assetName = (id: string) =>
    inventory.data?.assets.find((item) => item.id === id)?.values.name ?? id;
  const siteName = (id: string | null) =>
    company.sites.find((item) => item.id === id)?.name ?? t("noAssignment");

  return (
    <Card>
      <CardContent className="space-y-4 pt-6">
        <EntityListHeader locale={i18n.language} title={t("currentWorkstations")} />
        {inventory.isPending && <p className="text-sm text-muted-foreground">{t("loading")}</p>}
        {inventory.isError && (
          <p className="text-sm text-muted-foreground">{t("workstationsLoadError")}</p>
        )}
        {inventory.data &&
          (workstations.length ? (
            <div className="divide-y">
              {workstations.map((workstation) => {
                const assetIds = [
                  ...workstation.values.assetIds,
                  ...workstation.values.sharedAssetIds,
                ];
                return (
                  <div className="py-4 first:pt-0 last:pb-0" key={workstation.id}>
                    <BrowserLink
                      className="app-link font-medium"
                      href={`/companies/${company.id}/workstations`}
                    >
                      {workstation.values.name}
                    </BrowserLink>
                    <p className="mt-1 text-sm text-muted-foreground">
                      {siteName(workstation.values.siteId)}
                    </p>
                    <div className="mt-3 flex flex-wrap gap-x-4 gap-y-2 text-sm">
                      {assetIds.length ? (
                        assetIds.map((assetId) => (
                          <BrowserLink
                            className="app-link"
                            href={`/companies/${company.id}/assets/${assetId}`}
                            key={assetId}
                          >
                            {assetName(assetId)}
                          </BrowserLink>
                        ))
                      ) : (
                        <span className="text-muted-foreground">{t("noWorkstationAssets")}</span>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          ) : (
            <p className="text-sm text-muted-foreground">{t("noCurrentWorkstations")}</p>
          ))}
      </CardContent>
    </Card>
  );
}