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

import { Button } from "@repo/shadcn-ui/components/button";
import {
  EntityAction,
  EntityListHeader,
  EntityRowActions,
  EntityStatus,
  EntityTable,
} from "@repo/shadcn-ui/components/entity-list";
import { useState } from "react";
import { useTranslation } from "react-i18next";

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

import { DepartmentEditorDialog } from "./department-editor-dialog";

export function DepartmentSection({
  company,
  csrfToken,
}: {
  company: CompanyDTO;
  csrfToken: string;
}) {
  const { t, i18n } = useTranslation("companies");
  const [editor, setEditor] = useState<string | undefined>();
  const selected = company.departments.find((item) => item.id === editor);

  return (
    <div className="space-y-5">
      <EntityListHeader
        actions={<Button onClick={() => setEditor("new")}>{t("newDepartment")}</Button>}
        locale={i18n.language}
        title={t("departments")}
      />
      <EntityTable
        columns={[
          {
            id: "name",
            label: t("name"),
            value: (item) => item.name,
            hideable: false,
            render: (item) => <>{item.name}</>,
          },
          {
            id: "state",
            label: t("status"),
            value: (item) => t(item.active ? "active" : "inactive"),
            render: (item) => (
              <EntityStatus active={item.active}>
                {t(item.active ? "active" : "inactive")}
              </EntityStatus>
            ),
          },
          {
            id: "people",
            label: t("people"),
            value: (item) =>
              company.assignments.filter(
                (entry) => entry.departmentId === item.id && entry.endDate === null
              ).length,
            render: (item) => (
              <>
                {
                  company.assignments.filter(
                    (entry) => entry.departmentId === item.id && entry.endDate === null
                  ).length
                }
              </>
            ),
          },
          {
            id: "actions",
            label: t("actions"),
            hideable: false,
            render: (item) => (
              <EntityRowActions label={t("actions")}>
                <EntityAction onClick={() => setEditor(item.id)}>{t("edit")}</EntityAction>
              </EntityRowActions>
            ),
          },
        ]}
        emptyMessage={t("noDepartments")}
        items={company.departments}
        locale={i18n.language}
        title={t("departments")}
      />
      <DepartmentEditorDialog
        companyId={company.id}
        csrfToken={csrfToken}
        department={selected}
        onOpenChange={(open) => {
          if (!open) {
            setEditor(undefined);
          }
        }}
        onSaved={() => setEditor(undefined)}
        open={editor !== undefined}
      />
    </div>
  );
}