@hed-hog/finance 0.0.304 → 0.0.306

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

@@ -1,36 +1,10 @@
 'use client';
 
-import { Button } from '@/components/ui/button';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
+import { EntityPicker } from '@/components/ui/entity-picker';
 import { useApp } from '@hed-hog/next-app-provider';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Plus } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useMemo, useRef, useState } from 'react';
-import { FieldValues, Path, UseFormReturn, useForm } from 'react-hook-form';
-import { z } from 'zod';
+import { useMemo, useState } from 'react';
+import { FieldValues, Path, UseFormReturn } from 'react-hook-form';
 
 type FinanceCategory = {
   id: number | string;
@@ -45,7 +19,18 @@ type CostCenter = {
   nome: string;
 };
 
-const extractCreatedId = (payload: any): string | null => {
+type CreatedEntityResponse = {
+  id?: number | string | null;
+  data?: {
+    id?: number | string | null;
+  } | null;
+  category_id?: number | string | null;
+  cost_center_id?: number | string | null;
+};
+
+const extractCreatedId = (
+  payload: CreatedEntityResponse | null | undefined
+): string | null => {
   const id =
     payload?.id ??
     payload?.data?.id ??
@@ -74,23 +59,11 @@ export function CategoryFieldWithCreate<TFieldValues extends FieldValues>({
   selectPlaceholder: string;
   categories: FinanceCategory[];
   categoryKind: 'receita' | 'despesa';
-  onCreated?: () => Promise<any> | void;
+  onCreated?: () => Promise<unknown> | void;
 }) {
   const { request, showToastHandler } = useApp();
   const t = useTranslations('finance.FinanceEntityFieldWithCreate');
-  const [open, setOpen] = useState(false);
   const [localCategories, setLocalCategories] = useState<FinanceCategory[]>([]);
-  const parentScrollContainerRef = useRef<HTMLElement | null>(null);
-  const parentScrollTopRef = useRef(0);
-
-  const createSchema = z.object({
-    nome: z.string().trim().min(1, t('validation.nameRequired')),
-  });
-
-  const createForm = useForm<z.infer<typeof createSchema>>({
-    resolver: zodResolver(createSchema),
-    defaultValues: { nome: '' },
-  });
 
   const filteredCategories = useMemo(() => {
     const merged = [...(categories || []), ...localCategories];
@@ -104,217 +77,70 @@ export function CategoryFieldWithCreate<TFieldValues extends FieldValues>({
     return uniqueById.filter((item) => item.natureza === categoryKind);
   }, [categories, categoryKind, localCategories]);
 
-  const captureParentScrollPosition = (button: HTMLElement) => {
-    const parentSheetContent = button.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 handleCreate = async (values: z.infer<typeof createSchema>) => {
-    try {
-      const response = await request<any>({
-        url: '/finance/categories',
-        method: 'POST',
-        data: {
-          name: values.nome,
-          kind: categoryKind,
-          parent_id: null,
+  return (
+    <EntityPicker<FinanceCategory, TFieldValues>
+      form={form}
+      name={name}
+      label={label}
+      placeholder={selectPlaceholder}
+      searchPlaceholder={selectPlaceholder}
+      emptySelectionLabel={selectPlaceholder}
+      clearable
+      allowEmptySelection
+      options={filteredCategories}
+      createActionLabel={t('actions.createCategoryAria')}
+      createTitle={t('categorySheet.title')}
+      createDescription={t('categorySheet.description')}
+      createFields={[
+        {
+          name: 'nome',
+          label: t('fields.name'),
+          placeholder: t('categorySheet.namePlaceholder'),
+          required: true,
         },
-      });
-
-      const createdId = extractCreatedId(response?.data);
-
-      if (createdId) {
-        const normalizedCreatedId = String(createdId);
-
-        setLocalCategories((prev) => [
-          ...prev,
-          {
-            id: normalizedCreatedId,
-            nome: values.nome,
-            natureza: categoryKind,
-          },
-        ]);
-
-        form.setValue(name, normalizedCreatedId as any, {
-          shouldValidate: false,
-          shouldDirty: true,
-          shouldTouch: true,
-        });
-      }
-
-      await onCreated?.();
-
-      if (createdId) {
-        form.setValue(name, String(createdId) as any, {
-          shouldValidate: false,
-          shouldDirty: true,
-          shouldTouch: true,
-        });
+      ]}
+      getOptionValue={(category) => String(category.id)}
+      getOptionLabel={(category) =>
+        category.codigo
+          ? `${category.codigo} - ${category.nome}`
+          : category.nome
       }
-
-      createForm.reset({ nome: '' });
-      setOpen(false);
-      showToastHandler?.('success', t('messages.categoryCreateSuccess'));
-    } catch {
-      showToastHandler?.('error', t('messages.categoryCreateError'));
-    }
-  };
-
-  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">
-              <div className="min-w-0 flex-1">
-                <Select
-                  value={
-                    field.value === null || field.value === undefined
-                      ? ''
-                      : String(field.value)
-                  }
-                  onValueChange={field.onChange}
-                >
-                  <FormControl>
-                    <SelectTrigger className="w-full">
-                      <SelectValue placeholder={selectPlaceholder} />
-                    </SelectTrigger>
-                  </FormControl>
-                  <SelectContent>
-                    {filteredCategories.map((category) => (
-                      <SelectItem key={category.id} value={String(category.id)}>
-                        {category.codigo
-                          ? `${category.codigo} - ${category.nome}`
-                          : category.nome}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                className="shrink-0"
-                onClick={(event) => {
-                  captureParentScrollPosition(event.currentTarget);
-                  setOpen(true);
-                }}
-                aria-label={t('actions.createCategoryAria')}
-              >
-                <Plus className="h-4 w-4" />
-              </Button>
-            </div>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-
-      <Sheet
-        open={open}
-        onOpenChange={(nextOpen) => {
-          setOpen(nextOpen);
-          if (!nextOpen) {
-            createForm.reset({ nome: '' });
-            restoreParentScrollPosition();
+      onCreate={async (values) => {
+        try {
+          const createdName = values.nome?.trim() ?? '';
+          const response = await request<CreatedEntityResponse>({
+            url: '/finance/categories',
+            method: 'POST',
+            data: {
+              name: createdName,
+              kind: categoryKind,
+              parent_id: null,
+            },
+          });
+
+          const createdId = extractCreatedId(response?.data);
+          const createdCategory = createdId
+            ? {
+                id: String(createdId),
+                nome: createdName,
+                natureza: categoryKind,
+              }
+            : null;
+
+          if (createdCategory) {
+            setLocalCategories((prev) => [...prev, createdCategory]);
           }
-        }}
-      >
-        <SheetContent
-          className="w-full sm:max-w-lg"
-          onCloseAutoFocus={(event) => event.preventDefault()}
-        >
-          <SheetHeader>
-            <SheetTitle>{t('categorySheet.title')}</SheetTitle>
-            <SheetDescription>
-              {t('categorySheet.description')}
-            </SheetDescription>
-          </SheetHeader>
 
-          <Form {...createForm}>
-            <div className="space-y-4 p-4">
-              <FormField
-                control={createForm.control}
-                name="nome"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.name')}</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder={t('categorySheet.namePlaceholder')}
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+          await onCreated?.();
+          showToastHandler?.('success', t('messages.categoryCreateSuccess'));
 
-              <div className="flex justify-end gap-2">
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => setOpen(false)}
-                >
-                  {t('actions.cancel')}
-                </Button>
-                <Button
-                  type="button"
-                  disabled={createForm.formState.isSubmitting}
-                  onClick={() => {
-                    void createForm.handleSubmit(handleCreate)();
-                  }}
-                >
-                  {t('actions.save')}
-                </Button>
-              </div>
-            </div>
-          </Form>
-        </SheetContent>
-      </Sheet>
-    </>
+          return createdCategory;
+        } catch {
+          showToastHandler?.('error', t('messages.categoryCreateError'));
+          return null;
+        }
+      }}
+    />
   );
 }
 
@@ -331,23 +157,11 @@ export function CostCenterFieldWithCreate<TFieldValues extends FieldValues>({
   label: string;
   selectPlaceholder: string;
   costCenters: CostCenter[];
-  onCreated?: () => Promise<any> | void;
+  onCreated?: () => Promise<unknown> | void;
 }) {
   const { request, showToastHandler } = useApp();
   const t = useTranslations('finance.FinanceEntityFieldWithCreate');
-  const [open, setOpen] = useState(false);
   const [localCostCenters, setLocalCostCenters] = useState<CostCenter[]>([]);
-  const parentScrollContainerRef = useRef<HTMLElement | null>(null);
-  const parentScrollTopRef = useRef(0);
-
-  const createSchema = z.object({
-    nome: z.string().trim().min(1, t('validation.nameRequired')),
-  });
-
-  const createForm = useForm<z.infer<typeof createSchema>>({
-    resolver: zodResolver(createSchema),
-    defaultValues: { nome: '' },
-  });
 
   const mergedCostCenters = useMemo(() => {
     const merged = [...(costCenters || []), ...localCostCenters];
@@ -360,213 +174,64 @@ export function CostCenterFieldWithCreate<TFieldValues extends FieldValues>({
     );
   }, [costCenters, localCostCenters]);
 
-  const captureParentScrollPosition = (button: HTMLElement) => {
-    const parentSheetContent = button.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 handleCreate = async (values: z.infer<typeof createSchema>) => {
-    try {
-      const response = await request<any>({
-        url: '/finance/cost-centers',
-        method: 'POST',
-        data: {
-          name: values.nome,
+  return (
+    <EntityPicker<CostCenter, TFieldValues>
+      form={form}
+      name={name}
+      label={label}
+      placeholder={selectPlaceholder}
+      searchPlaceholder={selectPlaceholder}
+      emptySelectionLabel={selectPlaceholder}
+      clearable
+      allowEmptySelection
+      options={mergedCostCenters}
+      createActionLabel={t('actions.createCostCenterAria')}
+      createTitle={t('costCenterSheet.title')}
+      createDescription={t('costCenterSheet.description')}
+      createFields={[
+        {
+          name: 'nome',
+          label: t('fields.name'),
+          placeholder: t('costCenterSheet.namePlaceholder'),
+          required: true,
         },
-      });
-
-      const createdId = extractCreatedId(response?.data);
-
-      if (createdId) {
-        const normalizedCreatedId = String(createdId);
-
-        setLocalCostCenters((prev) => [
-          ...prev,
-          {
-            id: normalizedCreatedId,
-            nome: values.nome,
-          },
-        ]);
-
-        form.setValue(name, normalizedCreatedId as any, {
-          shouldValidate: false,
-          shouldDirty: true,
-          shouldTouch: true,
-        });
-      }
-
-      await onCreated?.();
-
-      if (createdId) {
-        form.setValue(name, String(createdId) as any, {
-          shouldValidate: false,
-          shouldDirty: true,
-          shouldTouch: true,
-        });
+      ]}
+      getOptionValue={(center) => String(center.id)}
+      getOptionLabel={(center) =>
+        center.codigo ? `${center.codigo} - ${center.nome}` : center.nome
       }
-
-      createForm.reset({ nome: '' });
-      setOpen(false);
-      showToastHandler?.('success', t('messages.costCenterCreateSuccess'));
-    } catch {
-      showToastHandler?.('error', t('messages.costCenterCreateError'));
-    }
-  };
-
-  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">
-              <div className="min-w-0 flex-1">
-                <Select
-                  value={
-                    field.value === null || field.value === undefined
-                      ? ''
-                      : String(field.value)
-                  }
-                  onValueChange={field.onChange}
-                >
-                  <FormControl>
-                    <SelectTrigger className="w-full">
-                      <SelectValue placeholder={selectPlaceholder} />
-                    </SelectTrigger>
-                  </FormControl>
-                  <SelectContent>
-                    {mergedCostCenters.map((center) => (
-                      <SelectItem key={center.id} value={String(center.id)}>
-                        {center.codigo
-                          ? `${center.codigo} - ${center.nome}`
-                          : center.nome}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                className="shrink-0"
-                onClick={(event) => {
-                  captureParentScrollPosition(event.currentTarget);
-                  setOpen(true);
-                }}
-                aria-label={t('actions.createCostCenterAria')}
-              >
-                <Plus className="h-4 w-4" />
-              </Button>
-            </div>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-
-      <Sheet
-        open={open}
-        onOpenChange={(nextOpen) => {
-          setOpen(nextOpen);
-          if (!nextOpen) {
-            createForm.reset({ nome: '' });
-            restoreParentScrollPosition();
+      onCreate={async (values) => {
+        try {
+          const createdName = values.nome?.trim() ?? '';
+          const response = await request<CreatedEntityResponse>({
+            url: '/finance/cost-centers',
+            method: 'POST',
+            data: {
+              name: createdName,
+            },
+          });
+
+          const createdId = extractCreatedId(response?.data);
+          const createdCostCenter = createdId
+            ? {
+                id: String(createdId),
+                nome: createdName,
+              }
+            : null;
+
+          if (createdCostCenter) {
+            setLocalCostCenters((prev) => [...prev, createdCostCenter]);
           }
-        }}
-      >
-        <SheetContent
-          className="w-full sm:max-w-lg"
-          onCloseAutoFocus={(event) => event.preventDefault()}
-        >
-          <SheetHeader>
-            <SheetTitle>{t('costCenterSheet.title')}</SheetTitle>
-            <SheetDescription>
-              {t('costCenterSheet.description')}
-            </SheetDescription>
-          </SheetHeader>
 
-          <Form {...createForm}>
-            <div className="space-y-4 p-4">
-              <FormField
-                control={createForm.control}
-                name="nome"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('fields.name')}</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder={t('costCenterSheet.namePlaceholder')}
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+          await onCreated?.();
+          showToastHandler?.('success', t('messages.costCenterCreateSuccess'));
 
-              <div className="flex justify-end gap-2">
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => setOpen(false)}
-                >
-                  {t('actions.cancel')}
-                </Button>
-                <Button
-                  type="button"
-                  disabled={createForm.formState.isSubmitting}
-                  onClick={() => {
-                    void createForm.handleSubmit(handleCreate)();
-                  }}
-                >
-                  {t('actions.save')}
-                </Button>
-              </div>
-            </div>
-          </Form>
-        </SheetContent>
-      </Sheet>
-    </>
+          return createdCostCenter;
+        } catch {
+          showToastHandler?.('error', t('messages.costCenterCreateError'));
+          return null;
+        }
+      }}
+    />
   );
 }