myeasycms-v2/apps/web/app/[locale]/home/[account]/members-cms/departments/create-department-dialog.tsx

'use client';

import { useCallback, useState } from 'react';

import { useRouter } from 'next/navigation';

import { Plus } from 'lucide-react';
import { useTranslations } from 'next-intl';

import { createDepartment } from '@kit/member-management/actions/member-actions';
import { Button } from '@kit/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@kit/ui/dialog';
import { Input } from '@kit/ui/input';
import { Label } from '@kit/ui/label';
import { useActionWithToast } from '@kit/ui/use-action-with-toast';

interface CreateDepartmentDialogProps {
  accountId: string;
}

export function CreateDepartmentDialog({
  accountId,
}: CreateDepartmentDialogProps) {
  const t = useTranslations('members.departments');
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');

  const { execute, isPending } = useActionWithToast(createDepartment, {
    successMessage: t('created'),
    errorMessage: t('createError'),
    onSuccess: () => {
      setOpen(false);
      setName('');
      setDescription('');
      router.refresh();
    },
  });

  const handleSubmit = useCallback(
    (e: React.FormEvent) => {
      e.preventDefault();
      if (!name.trim()) return;
      execute({
        accountId,
        name: name.trim(),
        description: description.trim() || undefined,
      });
    },
    [execute, accountId, name, description],
  );

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger render={<Button size="sm" />}>
        <Plus className="mr-1 h-4 w-4" />
        {t('newDepartment')}
      </DialogTrigger>
      <DialogContent>
        <form onSubmit={handleSubmit}>
          <DialogHeader>
            <DialogTitle>{t('newDepartment')}</DialogTitle>
            <DialogDescription>
              {t('createDialogDescription')}
            </DialogDescription>
          </DialogHeader>
          <div className="mt-4 space-y-4">
            <div className="space-y-2">
              <Label htmlFor="dept-name">{t('name')}</Label>
              <Input
                id="dept-name"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder={t('namePlaceholder')}
                required
                minLength={1}
                maxLength={128}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="dept-description">{t('descriptionLabel')}</Label>
              <Input
                id="dept-description"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                placeholder={t('descriptionPlaceholder')}
              />
            </div>
          </div>
          <DialogFooter className="mt-4">
            <Button type="submit" disabled={isPending || !name.trim()}>
              {isPending ? t('creating') : t('create')}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}