@hed-hog/operations 0.0.299 → 0.0.301

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

@@ -0,0 +1,826 @@
+'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);
+        }}
+      />
+    </>
+  );
+}