@hed-hog/finance 0.0.235 → 0.0.237

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

@@ -0,0 +1,627 @@
+'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, X } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { FieldValues, Path, UseFormReturn, useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+type PersonOption = {
+  id: number | string;
+  name: string;
+};
+
+const createPersonSchema = z.object({
+  name: z.string().trim().min(2, 'Nome é obrigatório'),
+  type: z.enum(['individual', 'company']),
+  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(),
+});
+
+type CreatePersonValues = z.infer<typeof createPersonSchema>;
+
+function CreatePersonSheet({
+  open,
+  onOpenChange,
+  onCreated,
+  entityLabel,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreated: (person: PersonOption) => void;
+  entityLabel: string;
+}) {
+  const { request, showToastHandler, currentLocaleCode } = useApp();
+
+  const form = useForm<CreatePersonValues>({
+    resolver: zodResolver(createPersonSchema),
+    defaultValues: {
+      name: '',
+      type: 'individual',
+      email: '',
+      phone: '',
+      document: '',
+      line1: '',
+      city: '',
+      state: '',
+    },
+  });
+
+  const selectedType = form.watch('type');
+
+  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: addressTypes = [] } = useQuery<any[]>({
+    queryKey: ['person-field-address-types', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<any>({
+        url: '/person-address-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 resolveAddressTypeId = () => {
+    const home = addressTypes.find(
+      (item) => String(item.code).toUpperCase() === 'HOME'
+    );
+    return home?.address_type_id || addressTypes[0]?.address_type_id;
+  };
+
+  const handleSubmit = async (values: CreatePersonValues) => {
+    try {
+      const createResponse = await request<any>({
+        url: '/person',
+        method: 'POST',
+        data: {
+          name: values.name,
+          type: values.type,
+          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(
+        values.type === 'individual' ? 'CPF' : 'CNPJ'
+      );
+      const addressTypeId = resolveAddressTypeId();
+
+      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 && addressTypeId
+          ? [
+              {
+                line1: values.line1.trim(),
+                city: values.city.trim(),
+                state: values.state.trim(),
+                is_primary: true,
+                address_type_id: addressTypeId,
+              },
+            ]
+          : [];
+
+      await request({
+        url: `/person/${personId}`,
+        method: 'PATCH',
+        data: {
+          name: values.name,
+          type: values.type,
+          status: 'active',
+          contacts,
+          documents,
+          addresses,
+        },
+      });
+
+      onCreated({ id: personId, name: values.name });
+      form.reset();
+      onOpenChange(false);
+      showToastHandler?.('success', `${entityLabel} criado com sucesso`);
+    } catch {
+      showToastHandler?.('error', `Não foi possível criar ${entityLabel}`);
+    }
+  };
+
+  return (
+    <Sheet
+      open={open}
+      onOpenChange={(nextOpen) => {
+        onOpenChange(nextOpen);
+        if (!nextOpen) {
+          form.reset();
+        }
+      }}
+    >
+      <SheetContent className="w-full overflow-y-auto sm:max-w-xl">
+        <SheetHeader>
+          <SheetTitle>Novo {entityLabel}</SheetTitle>
+          <SheetDescription>
+            Apenas nome e tipo são obrigatórios. Você pode completar os demais
+            dados agora ou depois.
+          </SheetDescription>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form
+            className="space-y-4 p-4"
+            onSubmit={form.handleSubmit(handleSubmit)}
+          >
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Nome</FormLabel>
+                  <FormControl>
+                    <Input placeholder={`Nome do ${entityLabel}`} {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="type"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Tipo</FormLabel>
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Selecione" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="individual">Pessoa Física</SelectItem>
+                      <SelectItem value="company">Pessoa Jurídica</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <FormField
+                control={form.control}
+                name="document"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      {selectedType === 'individual'
+                        ? 'CPF (opcional)'
+                        : 'CNPJ (opcional)'}
+                    </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>E-mail (opcional)</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={`${entityLabel}@empresa.com`}
+                        {...field}
+                        value={field.value || ''}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="phone"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Telefone (opcional)</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="(11) 99999-9999"
+                      {...field}
+                      value={field.value || ''}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="rounded-md border p-3">
+              <p className="mb-3 text-sm font-medium">Endereço (opcional)</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="Rua, número, complemento"
+                          {...field}
+                          value={field.value || ''}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="city"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input
+                          placeholder="Cidade"
+                          {...field}
+                          value={field.value || ''}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="state"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input
+                          placeholder="UF"
+                          {...field}
+                          value={field.value || ''}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </div>
+
+            <div className="flex justify-end gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+              >
+                Cancelar
+              </Button>
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                Salvar {entityLabel}
+              </Button>
+            </div>
+          </form>
+        </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 [personOpen, setPersonOpen] = useState(false);
+  const [personSearch, setPersonSearch] = useState('');
+  const [debouncedPersonSearch, setDebouncedPersonSearch] = useState('');
+  const [createPersonOpen, setCreatePersonOpen] = useState(false);
+  const [selectedPersonLabel, setSelectedPersonLabel] = useState('');
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDebouncedPersonSearch(personSearch);
+    }, 300);
+
+    return () => clearTimeout(timeout);
+  }, [personSearch]);
+
+  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 items-center gap-2">
+              <Popover open={personOpen} onOpenChange={setPersonOpen}>
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      role="combobox"
+                      className="w-full justify-between"
+                    >
+                      {field.value
+                        ? (personOptionsData.find(
+                            (person) =>
+                              String(person.id) === String(field.value)
+                          )?.name ??
+                          selectedPersonLabel ??
+                          `ID #${String(field.value)}`)
+                        : selectPlaceholder}
+                      <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="Digite para buscar pessoa..."
+                      value={personSearch}
+                      onValueChange={setPersonSearch}
+                    />
+                    <CommandList>
+                      <CommandEmpty>
+                        {isLoadingPersons ? (
+                          'Buscando pessoas...'
+                        ) : (
+                          <div className="space-y-2 p-2 text-center">
+                            <p className="text-sm text-muted-foreground">
+                              Nenhuma pessoa encontrada
+                            </p>
+                            <Button
+                              type="button"
+                              variant="outline"
+                              className="w-full"
+                              onClick={() => {
+                                setPersonOpen(false);
+                                setCreatePersonOpen(true);
+                              }}
+                            >
+                              Criar novo cadastro
+                            </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"
+                  onClick={() => {
+                    field.onChange('');
+                    setPersonSearch('');
+                    setSelectedPersonLabel('');
+                    setPersonOpen(false);
+                  }}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              ) : null}
+            </div>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <CreatePersonSheet
+        open={createPersonOpen}
+        onOpenChange={setCreatePersonOpen}
+        entityLabel={entityLabel}
+        onCreated={(person) => {
+          form.setValue(name, String(person.id) as any, {
+            shouldValidate: true,
+          });
+          setSelectedPersonLabel(person.name);
+          setPersonSearch(person.name);
+          setCreatePersonOpen(false);
+        }}
+      />
+    </>
+  );
+}