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

import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "@repo/shadcn-ui/components/button";
import { Checkbox } from "@repo/shadcn-ui/components/checkbox";
import {
  EntityAction,
  EntityListHeader,
  EntityRowActions,
  EntityStatus,
  EntityTable,
} from "@repo/shadcn-ui/components/entity-list";
import { FormActions, 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 { useMutation, useQueryClient } from "@tanstack/react-query";
import { useEffect, useId, useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";

import type { CompanyDTO, DepartmentDTO, DepartmentRequestDTO } from "../../common";
import { DepartmentRequestSchema } from "../../common";
import { EntityHelp } from "../access/entity-help";
import { companyApi, companyKeys } from "../api/company-api";

import { CompanyFeedback } from "./company-feedback";

export function DepartmentForm({
  companyId,
  department,
  csrfToken,
  onSaved,
  requireActive = false,
}: {
  companyId: string;
  department?: DepartmentDTO | undefined;
  csrfToken: string;
  onSaved: (id: string) => void;
  requireActive?: boolean;
}) {
  const { t } = useTranslation("companies");
  const id = useId();
  const client = useQueryClient();
  const mounted = useRef(true);
  useEffect(() => {
    mounted.current = true;
    return () => {
      mounted.current = false;
    };
  }, []);
  const form = useForm<DepartmentRequestDTO>({
    resolver: zodResolver(DepartmentRequestSchema),
    defaultValues: { name: department?.name ?? "", active: department?.active ?? true },
  });
  const mutation = useMutation({
    mutationFn: (values: DepartmentRequestDTO) =>
      companyApi.department(companyId, department?.id, values, csrfToken),
    onSuccess: (response) => {
      client.setQueryData(companyKeys.detail(companyId), response);
      const saved = department
        ? response.company.departments.find((item) => item.id === department.id)
        : response.company.departments.at(-1);
      if (saved && mounted.current) {
        onSaved(saved.id);
      }
    },
  });
  return (
    <form className="space-y-4" onSubmit={form.handleSubmit((values) => mutation.mutate(values))}>
      <div className="space-y-2">
        <Label htmlFor={id}>{t("name")}</Label>
        <Input id={id} maxLength={100} required {...form.register("name")} />
      </div>
      <div className="flex items-center gap-2">
        <Checkbox
          checked={form.watch("active")}
          disabled={requireActive}
          id={`${id}-active`}
          onCheckedChange={(checked) =>
            form.setValue("active", checked === true, { shouldDirty: true })
          }
        />
        <Label htmlFor={`${id}-active`}>{t("activeDepartment")}</Label>
      </div>
      {department && (
        <p className="text-sm text-muted-foreground">{t("departmentDeactivationHelp")}</p>
      )}
      <CompanyFeedback
        error={mutation.error}
        invalid={Object.keys(form.formState.errors).length > 0}
      />

      <EntityHelp kind="department" />
      <FormActions>
        <Button disabled={mutation.isPending} type="submit">
          {t(mutation.isPending ? "saving" : "save")}
        </Button>
      </FormActions>
    </form>
  );
}
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")}
      />
      <FormDialog
        cancelLabel={t("cancel")}
        formActions
        onOpenChange={(open) => {
          if (!open) {
            setEditor(undefined);
          }
        }}
        open={editor !== undefined}
        title={t(selected ? "editDepartment" : "newDepartment")}
      >
        <DepartmentForm
          companyId={company.id}
          csrfToken={csrfToken}
          department={selected}
          key={editor}
          onSaved={() => setEditor(undefined)}
        />
      </FormDialog>
    </div>
  );
}