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

import {
  EntityAction,
  EntityListHeader,
  EntityRowActions,
  EntityTable,
} from "@repo/rdx-ui/components/entity-list";
import { Button } from "@repo/shadcn-ui/components/button";
import { Card, CardContent } from "@repo/shadcn-ui/components/card";
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 { 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 onClick={onBack} variant="outline">
        {t("backToPeople")}
      </Button>
      <div className="flex flex-wrap items-start justify-between gap-4">
        <div>
          <h2 className="text-2xl font-semibold">{person.name}</h2>
          <p className="mt-1 text-muted-foreground">
            {t(person.active ? "activePerson" : "inactivePerson")}
            {person.isContact ? ` · ${t("isContact")}` : ""}
          </p>
        </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>
      <Card>
        <CardContent className="grid gap-4 pt-6 sm:grid-cols-3">
          <div>
            <p className="text-sm text-muted-foreground">{t("generalPosition")}</p>
            <p>{person.position ?? "—"}</p>
          </div>
          <div>
            <p className="text-sm text-muted-foreground">{t("email")}</p>
            <p className="break-all">{person.email ?? "—"}</p>
          </div>
          <div>
            <p className="text-sm text-muted-foreground">{t("phone")}</p>
            <p>{person.phone ?? "—"}</p>
          </div>
        </CardContent>
      </Card>
      <p className="text-sm text-muted-foreground">{t("personHelp")}</p>
      {!person.active && assignments.some((item) => item.endDate === null) && (
        <p className="rounded-md border p-3" role="status">
          {t("inactiveMembershipWarning")}
        </p>
      )}
      <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) => (
                  <>
                    {departmentName(item.departmentId)}
                    {company.departments.find((entry) => entry.id === item.departmentId)?.active ===
                      false && <p className="text-xs">{t("inactiveDepartment")}</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("endDate"),
                value: (item) => item.endDate,
                render: (item) => <>{item.endDate ?? t("currentAssignment")}</>,
              },
              {
                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>
  );
}