@hed-hog/operations 0.0.321 → 0.0.325

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

@@ -1,826 +1 @@
-'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 { Label } from '@/components/ui/label';
-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 { 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;
-};
-
-type PersonTypeFilter = 'individual' | 'company' | 'all';
-
-type ContactTypeLookup = {
-  code: string;
-  contact_type_id: number;
-};
-
-type DocumentTypeLookup = {
-  code: string;
-  document_type_id: number;
-};
-
-type CreatePersonResponse = {
-  id?: number;
-  data?: {
-    id?: number;
-  };
-};
-
-type PaginatedResponse<T> = {
-  data?: T[];
-};
-
-function usePersonFieldWithCreateTranslations() {
-  const tRoot = useTranslations();
-
-  return (
-    key: string,
-    values?: Record<string, string | number | boolean | null | undefined>
-  ) => {
-    const contactKey = `contact.PersonFieldWithCreate.${key}`;
-    const filteredValues = values
-      ? Object.fromEntries(
-          Object.entries(values).filter(
-            ([, value]) =>
-              typeof value === 'string' || typeof value === 'number'
-          )
-        )
-      : undefined;
-
-    if (tRoot.has(contactKey)) {
-      return tRoot(
-        contactKey,
-        filteredValues as Record<string, string | number> | undefined
-      );
-    }
-
-    return tRoot(
-      `finance.PersonFieldWithCreate.${key}`,
-      filteredValues as Record<string, string | number> | undefined
-    );
-  };
-}
-
-function CreatePersonSheet({
-  open,
-  onOpenChange,
-  onCreated,
-  entityLabel,
-  defaultCreateType = 'individual',
-  lockCreateType = false,
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onCreated: (person: PersonOption) => void;
-  entityLabel: string;
-  defaultCreateType?: Exclude<PersonTypeFilter, 'all'>;
-  lockCreateType?: boolean;
-}) {
-  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
-    useApp();
-  const t = usePersonFieldWithCreateTranslations();
-  const allowCompanyRegistration =
-    getSettingValue('contact-allow-company-registration') !== false;
-
-  const effectiveDefaultType: Exclude<PersonTypeFilter, 'all'> =
-    allowCompanyRegistration ? defaultCreateType : 'individual';
-
-  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: effectiveDefaultType,
-      email: '',
-      phone: '',
-      document: '',
-      line1: '',
-      city: '',
-      state: '',
-    },
-  });
-
-  const selectedType =
-    allowCompanyRegistration && !lockCreateType
-      ? form.watch('type')
-      : effectiveDefaultType;
-
-  useEffect(() => {
-    if (!allowCompanyRegistration || lockCreateType) {
-      form.setValue('type', effectiveDefaultType);
-    }
-  }, [allowCompanyRegistration, effectiveDefaultType, form, lockCreateType]);
-
-  const { data: contactTypes = [] } = useQuery<ContactTypeLookup[]>({
-    queryKey: ['operations-person-field-contact-types', currentLocaleCode],
-    queryFn: async () => {
-      const response = await request<PaginatedResponse<ContactTypeLookup>>({
-        url: '/person-contact-type?pageSize=100',
-        method: 'GET',
-      });
-      return response?.data?.data || [];
-    },
-    placeholderData: (old) => old ?? [],
-  });
-
-  const { data: documentTypes = [] } = useQuery<DocumentTypeLookup[]>({
-    queryKey: ['operations-person-field-document-types', currentLocaleCode],
-    queryFn: async () => {
-      const response = await request<PaginatedResponse<DocumentTypeLookup>>({
-        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 handleSubmit = async (values: CreatePersonValues) => {
-    try {
-      const normalizedType =
-        allowCompanyRegistration && !lockCreateType
-          ? values.type
-          : effectiveDefaultType;
-
-      const createResponse = await request<CreatePersonResponse>({
-        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('Could not identify the created person record');
-      }
-
-      const emailTypeId = resolveContactTypeId('EMAIL', 0);
-      const phoneTypeId =
-        resolveContactTypeId('PHONE', 1) || resolveContactTypeId('MOBILE', 1);
-      const documentTypeId = resolveDocumentTypeId(
-        normalizedType === 'individual' ? 'CPF' : 'CNPJ'
-      );
-
-      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: 'residential',
-              },
-            ]
-          : [];
-
-      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 && !lockCreateType ? (
-              <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 PersonSelectWithCreate({
-  label,
-  entityLabel,
-  value,
-  onChange,
-  selectPlaceholder,
-  personTypeFilter = 'all',
-  createType = 'individual',
-  lockCreateType = false,
-  initialSelectedLabel = '',
-  disabled = false,
-}: {
-  label: string;
-  entityLabel: string;
-  value?: string | number | null;
-  onChange: (personId: number | null, personName: string) => void;
-  selectPlaceholder: string;
-  personTypeFilter?: PersonTypeFilter;
-  createType?: Exclude<PersonTypeFilter, 'all'>;
-  lockCreateType?: boolean;
-  initialSelectedLabel?: string;
-  disabled?: boolean;
-}) {
-  const { request } = useApp();
-  const t = usePersonFieldWithCreateTranslations();
-  const [personOpen, setPersonOpen] = useState(false);
-  const [personSearch, setPersonSearch] = useState('');
-  const [debouncedPersonSearch, setDebouncedPersonSearch] = useState('');
-  const [createPersonOpen, setCreatePersonOpen] = useState(false);
-  const [selectedPersonLabel, setSelectedPersonLabel] =
-    useState(initialSelectedLabel);
-  const parentScrollContainerRef = useRef<HTMLElement | null>(null);
-  const parentScrollTopRef = useRef(0);
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setDebouncedPersonSearch(personSearch);
-    }, 300);
-
-    return () => clearTimeout(timeout);
-  }, [personSearch]);
-
-  useEffect(() => {
-    setSelectedPersonLabel(initialSelectedLabel);
-  }, [initialSelectedLabel]);
-
-  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: [
-        'operations-person-autocomplete',
-        entityLabel,
-        debouncedPersonSearch,
-        personTypeFilter,
-      ],
-      queryFn: async () => {
-        const params = new URLSearchParams();
-        params.set('page', '1');
-        params.set('pageSize', '20');
-        if (personTypeFilter !== 'all') {
-          params.set('type', personTypeFilter);
-        }
-        if (debouncedPersonSearch.trim()) {
-          params.set('search', debouncedPersonSearch.trim());
-        }
-
-        const response = await request<
-          PaginatedResponse<PersonOption> | PersonOption[]
-        >({
-          url: `/person?${params.toString()}`,
-          method: 'GET',
-        });
-
-        const payload = response?.data;
-        if (Array.isArray(payload)) {
-          return payload as PersonOption[];
-        }
-
-        if (payload && 'data' in payload && Array.isArray(payload.data)) {
-          return payload.data as PersonOption[];
-        }
-
-        return [];
-      },
-      placeholderData: (old) => old ?? [],
-    });
-
-  const normalizedValue =
-    value !== undefined && value !== null && String(value).length > 0
-      ? String(value)
-      : '';
-  const hasValue = normalizedValue.length > 0;
-  const displayLabel =
-    hasValue
-      ? (personOptionsData.find(
-          (person) => String(person.id) === normalizedValue
-        )?.name ??
-        selectedPersonLabel ??
-        `ID #${normalizedValue}`)
-      : selectedPersonLabel || selectPlaceholder;
-  const hasSelection = hasValue || Boolean(selectedPersonLabel);
-
-  return (
-    <>
-      <div className="grid min-w-0 gap-2">
-        {label ? <Label>{label}</Label> : null}
-
-        <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-2 sm:grid-cols-[minmax(0,1fr)_auto_auto]">
-          <Popover
-            open={!disabled && personOpen}
-            onOpenChange={(open) => {
-              if (!disabled) {
-                setPersonOpen(open);
-              }
-            }}
-          >
-            <PopoverTrigger asChild>
-              <Button
-                type="button"
-                variant="outline"
-                role="combobox"
-                disabled={disabled}
-                className="min-w-0 max-w-full justify-between overflow-hidden"
-              >
-                <span className="min-w-0 flex-1 truncate text-left">
-                  {displayLabel}
-                </span>
-                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-              </Button>
-            </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={() => {
-                          onChange(Number(person.id), person.name);
-                          setSelectedPersonLabel(person.name);
-                          setPersonOpen(false);
-                        }}
-                      >
-                        {person.name}
-                      </CommandItem>
-                    ))}
-                  </CommandGroup>
-                </CommandList>
-              </Command>
-            </PopoverContent>
-          </Popover>
-
-          {hasSelection ? (
-            <Button
-              type="button"
-              variant="outline"
-              size="icon"
-              className="shrink-0"
-              disabled={disabled}
-              onClick={() => {
-                onChange(null, '');
-                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"
-            disabled={disabled}
-            onClick={(event) => {
-              captureParentScrollPosition(event.currentTarget);
-              setPersonOpen(false);
-              setCreatePersonOpen(true);
-            }}
-            aria-label={t('actions.createEntityAria', { entityLabel })}
-          >
-            <Plus className="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-
-      <CreatePersonSheet
-        open={createPersonOpen}
-        onOpenChange={(nextOpen) => {
-          setCreatePersonOpen(nextOpen);
-          if (!nextOpen) {
-            restoreParentScrollPosition();
-          }
-        }}
-        entityLabel={entityLabel}
-        defaultCreateType={createType}
-        lockCreateType={lockCreateType}
-        onCreated={(person) => {
-          onChange(Number(person.id), person.name);
-          setSelectedPersonLabel(person.name);
-          setPersonSearch(person.name);
-          setCreatePersonOpen(false);
-        }}
-      />
-    </>
-  );
-}
+export { PersonPicker as PersonSelectWithCreate } from '../../contact/_components/person-picker';