@hed-hog/finance 0.0.304 → 0.0.306

package/hedhog/frontend/app/_components/person-field-with-create.tsx.ejs

@@ -1,734 +0,0 @@
-'use client';
-
-import { Button } from '@/components/ui/button';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { ChevronsUpDown, Plus, X } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { FieldValues, Path, UseFormReturn, useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-type PersonOption = {
-  id: number | string;
-  name: string;
-};
-
-type CreatePersonValues = {
-  name: string;
-  type: 'individual' | 'company';
-  email?: string;
-  phone?: string;
-  document?: string;
-  line1?: string;
-  city?: string;
-  state?: string;
-};
-
-function CreatePersonSheet({
-  open,
-  onOpenChange,
-  onCreated,
-  entityLabel,
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onCreated: (person: PersonOption) => void;
-  entityLabel: string;
-}) {
-  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
-    useApp();
-  const t = useTranslations('finance.PersonFieldWithCreate');
-  const allowCompanyRegistration =
-    getSettingValue('contact-allow-company-registration') !== false;
-
-  const createPersonSchema = useMemo(
-    () =>
-      z.object({
-        name: z.string().trim().min(2, 'Nome é obrigatório'),
-        type: allowCompanyRegistration
-          ? z.enum(['individual', 'company'])
-          : z.literal('individual'),
-        email: z
-          .string()
-          .trim()
-          .email('E-mail inválido')
-          .optional()
-          .or(z.literal('')),
-        phone: z.string().trim().optional(),
-        document: z.string().trim().optional(),
-        line1: z.string().optional(),
-        city: z.string().optional(),
-        state: z.string().optional(),
-      }),
-    [allowCompanyRegistration]
-  );
-
-  const form = useForm<CreatePersonValues>({
-    resolver: zodResolver(createPersonSchema),
-    defaultValues: {
-      name: '',
-      type: 'individual',
-      email: '',
-      phone: '',
-      document: '',
-      line1: '',
-      city: '',
-      state: '',
-    },
-  });
-
-  const selectedType = allowCompanyRegistration ? form.watch('type') : 'individual';
-
-  useEffect(() => {
-    if (!allowCompanyRegistration) {
-      form.setValue('type', 'individual');
-    }
-  }, [allowCompanyRegistration, form]);
-
-  const { data: contactTypes = [] } = useQuery<any[]>({
-    queryKey: ['person-field-contact-types', currentLocaleCode],
-    queryFn: async () => {
-      const response = await request<any>({
-        url: '/person-contact-type?pageSize=100',
-        method: 'GET',
-      });
-      return response?.data?.data || [];
-    },
-    placeholderData: (old) => old ?? [],
-  });
-
-  const { data: documentTypes = [] } = useQuery<any[]>({
-    queryKey: ['person-field-document-types', currentLocaleCode],
-    queryFn: async () => {
-      const response = await request<any>({
-        url: '/person-document-type?pageSize=100',
-        method: 'GET',
-      });
-      return response?.data?.data || [];
-    },
-    placeholderData: (old) => old ?? [],
-  });
-
-  const resolveContactTypeId = (code: string, fallbackIndex = 0) => {
-    const found = contactTypes.find(
-      (item) => String(item.code).toUpperCase() === code
-    );
-    return (
-      found?.contact_type_id || contactTypes[fallbackIndex]?.contact_type_id
-    );
-  };
-
-  const resolveDocumentTypeId = (code: string) => {
-    const found = documentTypes.find(
-      (item) => String(item.code).toUpperCase() === code
-    );
-    return found?.document_type_id || documentTypes[0]?.document_type_id;
-  };
-
-  const resolveAddressType = () => 'residential';
-
-  const handleSubmit = async (values: CreatePersonValues) => {
-    try {
-      const normalizedType = allowCompanyRegistration ? values.type : 'individual';
-
-      const createResponse = await request<any>({
-        url: '/person',
-        method: 'POST',
-        data: {
-          name: values.name,
-          type: normalizedType,
-          status: 'active',
-        },
-      });
-
-      const personId = Number(
-        createResponse?.data?.id ?? createResponse?.data?.data?.id
-      );
-
-      if (!personId) {
-        throw new Error('Não foi possível identificar o cadastro criado');
-      }
-
-      const emailTypeId = resolveContactTypeId('EMAIL', 0);
-      const phoneTypeId =
-        resolveContactTypeId('PHONE', 1) || resolveContactTypeId('MOBILE', 1);
-      const documentTypeId = resolveDocumentTypeId(
-        normalizedType === 'individual' ? 'CPF' : 'CNPJ'
-      );
-      const addressType = resolveAddressType();
-
-      const contacts = [
-        values.email && emailTypeId
-          ? {
-              value: values.email.trim(),
-              is_primary: true,
-              contact_type_id: emailTypeId,
-            }
-          : null,
-        values.phone && phoneTypeId
-          ? {
-              value: values.phone.trim(),
-              is_primary: true,
-              contact_type_id: phoneTypeId,
-            }
-          : null,
-      ].filter(Boolean);
-
-      const documents = values.document?.trim()
-        ? [
-            {
-              value: values.document.trim(),
-              document_type_id: documentTypeId,
-            },
-          ]
-        : [];
-
-      const addresses =
-        values.line1 && values.city && values.state
-          ? [
-              {
-                line1: values.line1.trim(),
-                city: values.city.trim(),
-                state: values.state.trim(),
-                is_primary: true,
-                address_type: addressType,
-              },
-            ]
-          : [];
-
-      await request({
-        url: `/person/${personId}`,
-        method: 'PATCH',
-        data: {
-          name: values.name,
-          type: normalizedType,
-          status: 'active',
-          contacts,
-          documents,
-          addresses,
-        },
-      });
-
-      onCreated({ id: personId, name: values.name });
-      form.reset();
-      onOpenChange(false);
-      showToastHandler?.(
-        'success',
-        t('messages.createdSuccess', { entityLabel })
-      );
-    } catch {
-      showToastHandler?.('error', t('messages.createdError', { entityLabel }));
-    }
-  };
-
-  return (
-    <Sheet
-      open={open}
-      onOpenChange={(nextOpen) => {
-        onOpenChange(nextOpen);
-        if (!nextOpen) {
-          form.reset();
-        }
-      }}
-    >
-      <SheetContent
-        className="w-full overflow-y-auto sm:max-w-xl"
-        onCloseAutoFocus={(event) => event.preventDefault()}
-      >
-        <SheetHeader>
-          <SheetTitle>{t('sheet.title', { entityLabel })}</SheetTitle>
-          <SheetDescription>
-            {allowCompanyRegistration
-              ? t('sheet.description')
-              : t('sheet.descriptionIndividualOnly')}
-          </SheetDescription>
-        </SheetHeader>
-
-        <Form {...form}>
-          <div className="space-y-4 p-4">
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{t('fields.name')}</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder={t('placeholders.name', { entityLabel })}
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            {allowCompanyRegistration ? (
-              <FormField
-                control={form.control}
-                name="type"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.type')}</FormLabel>
-                    <Select value={field.value} onValueChange={field.onChange}>
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue placeholder={t('common.select')} />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="individual">
-                          {t('types.individual')}
-                        </SelectItem>
-                        <SelectItem value="company">
-                          {t('types.company')}
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            ) : null}
-
-            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-              <FormField
-                control={form.control}
-                name="document"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      {selectedType === 'individual'
-                        ? t('fields.documentIndividualOptional')
-                        : t('fields.documentCompanyOptional')}
-                    </FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder={
-                          selectedType === 'individual'
-                            ? '000.000.000-00'
-                            : '00.000.000/0000-00'
-                        }
-                        {...field}
-                        value={field.value || ''}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="email"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.emailOptional')}</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder={t('placeholders.email', { entityLabel })}
-                        {...field}
-                        value={field.value || ''}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-
-            <FormField
-              control={form.control}
-              name="phone"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{t('fields.phoneOptional')}</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder={t('placeholders.phone')}
-                      {...field}
-                      value={field.value || ''}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <div className="rounded-md border p-3">
-              <p className="mb-3 text-sm font-medium">
-                {t('fields.addressOptional')}
-              </p>
-              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-                <FormField
-                  control={form.control}
-                  name="line1"
-                  render={({ field }) => (
-                    <FormItem className="sm:col-span-2">
-                      <FormControl>
-                        <Input
-                          placeholder={t('placeholders.addressLine1')}
-                          {...field}
-                          value={field.value || ''}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name="city"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormControl>
-                        <Input
-                          placeholder={t('placeholders.city')}
-                          {...field}
-                          value={field.value || ''}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name="state"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormControl>
-                        <Input
-                          placeholder={t('placeholders.state')}
-                          {...field}
-                          value={field.value || ''}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-            </div>
-
-            <div className="flex justify-end gap-2">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => onOpenChange(false)}
-              >
-                {t('actions.cancel')}
-              </Button>
-              <Button
-                type="button"
-                disabled={form.formState.isSubmitting}
-                onClick={() => {
-                  void form.handleSubmit(handleSubmit)();
-                }}
-              >
-                {t('actions.saveEntity', { entityLabel })}
-              </Button>
-            </div>
-          </div>
-        </Form>
-      </SheetContent>
-    </Sheet>
-  );
-}
-
-export function PersonFieldWithCreate<TFieldValues extends FieldValues>({
-  form,
-  name,
-  label,
-  entityLabel,
-  selectPlaceholder,
-}: {
-  form: UseFormReturn<TFieldValues>;
-  name: Path<TFieldValues>;
-  label: string;
-  entityLabel: string;
-  selectPlaceholder: string;
-}) {
-  const { request } = useApp();
-  const t = useTranslations('finance.PersonFieldWithCreate');
-  const [personOpen, setPersonOpen] = useState(false);
-  const [personSearch, setPersonSearch] = useState('');
-  const [debouncedPersonSearch, setDebouncedPersonSearch] = useState('');
-  const [createPersonOpen, setCreatePersonOpen] = useState(false);
-  const [selectedPersonLabel, setSelectedPersonLabel] = useState('');
-  const parentScrollContainerRef = useRef<HTMLElement | null>(null);
-  const parentScrollTopRef = useRef(0);
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setDebouncedPersonSearch(personSearch);
-    }, 300);
-
-    return () => clearTimeout(timeout);
-  }, [personSearch]);
-
-  const captureParentScrollPosition = (trigger: HTMLElement) => {
-    const parentSheetContent = trigger.closest(
-      '[data-radix-dialog-content]'
-    ) as HTMLElement | null;
-
-    if (!parentSheetContent) {
-      parentScrollContainerRef.current = null;
-      parentScrollTopRef.current = 0;
-      return;
-    }
-
-    parentScrollContainerRef.current = parentSheetContent;
-    parentScrollTopRef.current = parentSheetContent.scrollTop;
-  };
-
-  const restoreParentScrollPosition = () => {
-    const fallbackOpenDialog = (
-      Array.from(
-        document.querySelectorAll(
-          '[data-radix-dialog-content][data-state="open"]'
-        )
-      ) as HTMLElement[]
-    ).at(-1);
-
-    const container =
-      parentScrollContainerRef.current &&
-      document.body.contains(parentScrollContainerRef.current)
-        ? parentScrollContainerRef.current
-        : fallbackOpenDialog || null;
-
-    if (!container) {
-      return;
-    }
-
-    const restore = () => {
-      container.scrollTop = parentScrollTopRef.current;
-    };
-
-    requestAnimationFrame(restore);
-    setTimeout(restore, 0);
-    setTimeout(restore, 120);
-  };
-
-  const { data: personOptionsData = [], isLoading: isLoadingPersons } =
-    useQuery<PersonOption[]>({
-      queryKey: [
-        'person-autocomplete-generic',
-        entityLabel,
-        debouncedPersonSearch,
-      ],
-      queryFn: async () => {
-        const params = new URLSearchParams();
-        params.set('page', '1');
-        params.set('pageSize', '20');
-        if (debouncedPersonSearch.trim()) {
-          params.set('search', debouncedPersonSearch.trim());
-        }
-
-        const response = await request<any>({
-          url: `/person?${params.toString()}`,
-          method: 'GET',
-        });
-
-        const payload = response?.data;
-        if (Array.isArray(payload?.data)) {
-          return payload.data as PersonOption[];
-        }
-
-        if (Array.isArray(payload)) {
-          return payload as PersonOption[];
-        }
-
-        return [];
-      },
-      placeholderData: (old) => old ?? [],
-    });
-
-  return (
-    <>
-      <FormField
-        control={form.control}
-        name={name}
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>{label}</FormLabel>
-            <div className="flex w-full min-w-0 items-center gap-2">
-              <Popover open={personOpen} onOpenChange={setPersonOpen}>
-                <PopoverTrigger asChild>
-                  <FormControl>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      role="combobox"
-                      className="flex-1 min-w-0 justify-between overflow-hidden"
-                    >
-                      <span className="truncate text-left">
-                        {field.value
-                          ? (personOptionsData.find(
-                              (person) =>
-                                String(person.id) === String(field.value)
-                            )?.name ??
-                            selectedPersonLabel ??
-                            `ID #${String(field.value)}`)
-                          : selectPlaceholder}
-                      </span>
-                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                    </Button>
-                  </FormControl>
-                </PopoverTrigger>
-                <PopoverContent
-                  className="p-0"
-                  style={{ width: 'var(--radix-popover-trigger-width)' }}
-                >
-                  <Command shouldFilter={false}>
-                    <CommandInput
-                      placeholder={t('search.placeholder')}
-                      value={personSearch}
-                      onValueChange={setPersonSearch}
-                    />
-                    <CommandList>
-                      <CommandEmpty>
-                        {isLoadingPersons ? (
-                          t('search.loading')
-                        ) : (
-                          <div className="space-y-2 p-2 text-center">
-                            <p className="text-sm text-muted-foreground">
-                              {t('search.noResults')}
-                            </p>
-                            <Button
-                              type="button"
-                              variant="outline"
-                              className="w-full"
-                              onClick={(event) => {
-                                captureParentScrollPosition(
-                                  event.currentTarget
-                                );
-                                setPersonOpen(false);
-                                setCreatePersonOpen(true);
-                              }}
-                            >
-                              {t('actions.createNew')}
-                            </Button>
-                          </div>
-                        )}
-                      </CommandEmpty>
-                      <CommandGroup>
-                        {personOptionsData.map((person) => (
-                          <CommandItem
-                            key={String(person.id)}
-                            value={`${person.name}-${person.id}`}
-                            onSelect={() => {
-                              field.onChange(String(person.id));
-                              setSelectedPersonLabel(person.name);
-                              setPersonOpen(false);
-                            }}
-                          >
-                            {person.name}
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-
-              {field.value ? (
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="icon"
-                  className="shrink-0"
-                  onClick={() => {
-                    field.onChange('');
-                    setPersonSearch('');
-                    setSelectedPersonLabel('');
-                    setPersonOpen(false);
-                  }}
-                  aria-label={t('actions.clearSelection')}
-                >
-                  <X className="h-4 w-4" />
-                </Button>
-              ) : null}
-
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                className="shrink-0"
-                onClick={(event) => {
-                  captureParentScrollPosition(event.currentTarget);
-                  setPersonOpen(false);
-                  setCreatePersonOpen(true);
-                }}
-                aria-label={t('actions.createEntityAria', { entityLabel })}
-              >
-                <Plus className="h-4 w-4" />
-              </Button>
-            </div>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-
-      <CreatePersonSheet
-        open={createPersonOpen}
-        onOpenChange={(nextOpen) => {
-          setCreatePersonOpen(nextOpen);
-          if (!nextOpen) {
-            restoreParentScrollPosition();
-          }
-        }}
-        entityLabel={entityLabel}
-        onCreated={(person) => {
-          form.setValue(name, String(person.id) as any, {
-            shouldValidate: false,
-            shouldDirty: true,
-            shouldTouch: true,
-          });
-          setSelectedPersonLabel(person.name);
-          setPersonSearch(person.name);
-          setCreatePersonOpen(false);
-        }}
-      />
-    </>
-  );
-}