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 { 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 { useMutation, useQueryClient } from "@tanstack/react-query";
import { useId, 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 { companyApi, companyKeys } from "../api/company-api";

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

function DepartmentForm({
  companyId,
  department,
  csrfToken,
  onSaved,
}: {
  companyId: string;
  department?: DepartmentDTO | undefined;
  csrfToken: string;
  onSaved: () => void;
}) {
  const { t } = useTranslation("companies");
  const id = useId();
  const client = useQueryClient();
  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);
      onSaved();
    },
  });
  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")}
          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}
      />
      <Button disabled={mutation.isPending} type="submit">
        {t(mutation.isPending ? "saving" : "save")}
      </Button>
    </form>
  );
}
export function DepartmentSection({
  company,
  csrfToken,
}: {
  company: CompanyDTO;
  csrfToken: string;
}) {
  const { t } = useTranslation("companies");
  const [editor, setEditor] = useState<string | undefined>();
  const selected = company.departments.find((item) => item.id === editor);
  return (
    <Card>
      <CardContent className="space-y-4 pt-6">
        <div className="flex flex-wrap items-center justify-between gap-4">
          <h2 className="text-lg font-semibold">{t("departments")}</h2>
          <Button onClick={() => setEditor("new")}>{t("newDepartment")}</Button>
        </div>
        {company.departments.length ? (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>{t("name")}</TableHead>
                <TableHead>{t("status")}</TableHead>
                <TableHead>{t("people")}</TableHead>
                <TableHead>{t("actions")}</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {company.departments.map((department) => (
                <TableRow key={department.id}>
                  <TableCell>{department.name}</TableCell>
                  <TableCell>{t(department.active ? "active" : "inactive")}</TableCell>
                  <TableCell>
                    {
                      company.assignments.filter(
                        (item) => item.departmentId === department.id && item.endDate === null
                      ).length
                    }
                  </TableCell>
                  <TableCell>
                    <Button onClick={() => setEditor(department.id)} size="sm" variant="outline">
                      {t("edit")}
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        ) : (
          <p className="text-muted-foreground">{t("noDepartments")}</p>
        )}
        <FormDialog
          cancelLabel={t("cancel")}
          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>
      </CardContent>
    </Card>
  );
}