@hed-hog/finance 0.0.253 → 0.0.257

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

@@ -0,0 +1,572 @@
+'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 { 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';
+
+type FinanceCategory = {
+  id: number | string;
+  codigo?: string;
+  nome: string;
+  natureza?: string;
+};
+
+type CostCenter = {
+  id: number | string;
+  codigo?: string;
+  nome: string;
+};
+
+const extractCreatedId = (payload: any): string | null => {
+  const id =
+    payload?.id ??
+    payload?.data?.id ??
+    payload?.category_id ??
+    payload?.cost_center_id;
+
+  if (id === undefined || id === null || id === '') {
+    return null;
+  }
+
+  return String(id);
+};
+
+export function CategoryFieldWithCreate<TFieldValues extends FieldValues>({
+  form,
+  name,
+  label,
+  selectPlaceholder,
+  categories,
+  categoryKind,
+  onCreated,
+}: {
+  form: UseFormReturn<TFieldValues>;
+  name: Path<TFieldValues>;
+  label: string;
+  selectPlaceholder: string;
+  categories: FinanceCategory[];
+  categoryKind: 'receita' | 'despesa';
+  onCreated?: () => Promise<any> | 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];
+    const uniqueById = merged.filter(
+      (item, index, arr) =>
+        arr.findIndex(
+          (candidate) => String(candidate.id) === String(item.id)
+        ) === index
+    );
+
+    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,
+        },
+      });
+
+      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,
+        });
+      }
+
+      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();
+          }
+        }}
+      >
+        <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>
+                )}
+              />
+
+              <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>
+    </>
+  );
+}
+
+export function CostCenterFieldWithCreate<TFieldValues extends FieldValues>({
+  form,
+  name,
+  label,
+  selectPlaceholder,
+  costCenters,
+  onCreated,
+}: {
+  form: UseFormReturn<TFieldValues>;
+  name: Path<TFieldValues>;
+  label: string;
+  selectPlaceholder: string;
+  costCenters: CostCenter[];
+  onCreated?: () => Promise<any> | 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];
+
+    return merged.filter(
+      (item, index, arr) =>
+        arr.findIndex(
+          (candidate) => String(candidate.id) === String(item.id)
+        ) === index
+    );
+  }, [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,
+        },
+      });
+
+      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,
+        });
+      }
+
+      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();
+          }
+        }}
+      >
+        <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>
+                )}
+              />
+
+              <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>
+    </>
+  );
+}