metis-desk/modules/companies/src/web/components/people-section.tsx

import { Button } from "@repo/shadcn-ui/components/button";
import { Card, CardContent } from "@repo/shadcn-ui/components/card";
import { Checkbox } from "@repo/shadcn-ui/components/checkbox";
import { FormDialog } from "@repo/shadcn-ui/components/form-dialog";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@repo/shadcn-ui/components/table";
import { useId, useState } from "react";
import { useTranslation } from "react-i18next";

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

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

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">
          <div className="flex flex-wrap items-center justify-between gap-4">
            <h3 className="text-lg font-semibold">{t("departmentAssignments")}</h3>
            <Button disabled={!person.active} onClick={() => setEditor("new")}>
              {t("addAssignment")}
            </Button>
          </div>
          {assignments.length ? (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>{t("department")}</TableHead>
                  <TableHead>{t("position")}</TableHead>
                  <TableHead>{t("startDate")}</TableHead>
                  <TableHead>{t("endDate")}</TableHead>
                  <TableHead>{t("primary")}</TableHead>
                  <TableHead>{t("actions")}</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {assignments.map((item) => (
                  <TableRow key={item.id}>
                    <TableCell>
                      {departmentName(item.departmentId)}
                      {company.departments.find((department) => department.id === item.departmentId)
                        ?.active === false && (
                        <span className="block text-xs text-muted-foreground">
                          {t("inactiveDepartment")}
                        </span>
                      )}
                    </TableCell>
                    <TableCell>{item.position ?? "—"}</TableCell>
                    <TableCell>{item.startDate}</TableCell>
                    <TableCell>{item.endDate ?? t("currentAssignment")}</TableCell>
                    <TableCell>{item.isPrimary ? t("yes") : "—"}</TableCell>
                    <TableCell>
                      <div className="flex gap-2">
                        <Button onClick={() => setEditor(item.id)} size="sm" variant="outline">
                          {t("edit")}
                        </Button>
                        <Button onClick={() => setHistoryId(item.id)} size="sm" variant="ghost">
                          {t("history")}
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          ) : (
            <p className="text-muted-foreground">{t("noAssignments")}</p>
          )}
          {!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>
  );
}
export function PeopleSection({ company, csrfToken }: { company: CompanyDTO; csrfToken: string }) {
  const { t } = useTranslation("companies");
  const filterId = useId();
  const [selection, setSelection] = useState<
    { mode: "new" | "detail" | "edit"; id?: string } | undefined
  >();
  const [search, setSearch] = useState("");
  const [contactsOnly, setContactsOnly] = useState(false);
  const selected = company.people.find((item) => item.id === selection?.id);
  const personEditor = (
    <FormDialog
      cancelLabel={t("cancel")}
      formActions
      onOpenChange={(open) => {
        if (!open) {
          setSelection(selected ? { mode: "detail", id: selected.id } : undefined);
        }
      }}
      open={selection?.mode === "new" || selection?.mode === "edit"}
      title={t(selected ? "editPerson" : "newPerson")}
      wide
    >
      <PersonForm
        companyId={company.id}
        csrfToken={csrfToken}
        key={selected?.id ?? "new"}
        onSaved={(id) => setSelection({ mode: "detail", id })}
        person={selected}
      />
    </FormDialog>
  );
  if (selected) {
    return (
      <>
        {personEditor}
        <PersonDetails
          company={company}
          csrfToken={csrfToken}
          key={selected.id}
          onBack={() => setSelection(undefined)}
          onEdit={() => setSelection({ mode: "edit", id: selected.id })}
          person={selected}
        />
      </>
    );
  }
  const people = company.people.filter(
    (person) =>
      (!contactsOnly || person.isContact) &&
      person.name.toLocaleLowerCase().includes(search.trim().toLocaleLowerCase())
  );
  return (
    <div className="space-y-4">
      {personEditor}
      <div className="flex flex-wrap items-center justify-between gap-4">
        <h2 className="text-lg font-semibold">{t("people")}</h2>
        <Button onClick={() => setSelection({ mode: "new" })}>{t("newPerson")}</Button>
      </div>
      <div className="flex flex-wrap items-center gap-4">
        <div className="space-y-2">
          <Label htmlFor={filterId}>{t("searchPerson")}</Label>
          <Input id={filterId} onChange={(event) => setSearch(event.target.value)} value={search} />
        </div>
        <div className="flex items-center gap-2">
          <Checkbox
            checked={contactsOnly}
            id={`${filterId}-contact`}
            onCheckedChange={(checked) => setContactsOnly(checked === true)}
          />
          <Label htmlFor={`${filterId}-contact`}>{t("contactsOnly")}</Label>
        </div>
      </div>
      <Card>
        <CardContent className="pt-6">
          {people.length ? (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>{t("name")}</TableHead>
                  <TableHead>{t("position")}</TableHead>
                  <TableHead>{t("departments")}</TableHead>
                  <TableHead>{t("status")}</TableHead>
                  <TableHead>{t("actions")}</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {people.map((person) => (
                  <TableRow key={person.id}>
                    <TableCell>
                      <span className="font-medium">{person.name}</span>
                      {person.isContact && (
                        <span className="block text-xs text-muted-foreground">
                          {t("isContact")}
                        </span>
                      )}
                    </TableCell>
                    <TableCell>{person.position ?? "—"}</TableCell>
                    <TableCell>
                      {company.assignments
                        .filter((item) => item.personId === person.id && item.endDate === null)
                        .map(
                          (item) =>
                            (company.departments.find(
                              (department) => department.id === item.departmentId
                            )?.name ?? "—") + (item.isPrimary ? " ★" : "")
                        )
                        .join(", ") || "—"}
                    </TableCell>
                    <TableCell>{t(person.active ? "active" : "inactive")}</TableCell>
                    <TableCell>
                      <Button
                        onClick={() => setSelection({ mode: "detail", id: person.id })}
                        size="sm"
                        variant="outline"
                      >
                        {t("open")}
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          ) : (
            <p className="text-muted-foreground">
              {t(search || contactsOnly ? "noResults" : "noPeople")}
            </p>
          )}
        </CardContent>
      </Card>
    </div>
  );
}