metis-desk/modules/companies/src/web/components/person-details.tsx

import { Button } from "@repo/shadcn-ui/components/button";
import { Card, CardContent } from "@repo/shadcn-ui/components/card";
import {
  EntityAction,
  EntityListHeader,
  EntityRowActions,
  EntityTable,
} from "@repo/shadcn-ui/components/entity-list";
import { FormDialog } from "@repo/shadcn-ui/components/form-dialog";
import { useState } from "react";
import { useTranslation } from "react-i18next";

import type { CompanyDTO, PersonDTO } from "../../common";

import { AssignmentForm } from "./assignment-form";

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 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>
        <Button onClick={onEdit} variant="outline">
          {t("editPerson")}
        </Button>
      </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>
                  </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>
      <FormDialog
        cancelLabel={t("cancel")}
        formActions
        onOpenChange={(open) => {
          if (!open) {
            setEditor(undefined);
          }
        }}
        open={editor !== undefined}
        title={t(selected ? "editAssignment" : "addAssignment")}
      >
        <AssignmentForm
          assignment={selected}
          company={company}
          csrfToken={csrfToken}
          key={editor}
          onSaved={() => setEditor(undefined)}
          personId={person.id}
        />
      </FormDialog>
      <FormDialog
        cancelLabel={t("close")}
        onOpenChange={(open) => {
          if (!open) {
            setHistoryId(undefined);
          }
        }}
        open={history !== undefined}
        title={t("assignmentHistory")}
      >
        {history && (
          <div className="space-y-4">
            <p>{departmentName(history.departmentId)}</p>
            {[...history.history].reverse().map((revision) => (
              <div className="space-y-1 rounded-md border p-3" key={revision.id}>
                <p className="text-sm font-medium">
                  {new Date(revision.recordedAt).toLocaleString(i18n.language)}
                </p>
                <p>
                  {t("position")}: {revision.position ?? "—"}
                </p>
                <p>
                  {revision.startDate} → {revision.endDate ?? t("currentAssignment")}
                </p>
                <p>
                  {t("primaryDepartment")}: {t(revision.isPrimary ? "yes" : "no")}
                </p>
              </div>
            ))}
          </div>
        )}
      </FormDialog>
    </div>
  );
}