@hed-hog/finance 0.0.239 → 0.0.244

package/hedhog/frontend/app/accounts-payable/installments/page.tsx.ejs

@@ -66,7 +66,8 @@ import {
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
-import { useEffect, useRef, useState } from 'react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { formatarData } from '../../_lib/formatters';
@@ -1055,9 +1056,641 @@ function NovoTituloSheet({
   );
 }
 
+function EditarTituloSheet({
+  open,
+  onOpenChange,
+  titulo,
+  pessoas,
+  categorias,
+  centrosCusto,
+  t,
+  onUpdated,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  titulo?: any;
+  pessoas: any[];
+  categorias: any[];
+  centrosCusto: any[];
+  t: ReturnType<typeof useTranslations>;
+  onUpdated: () => Promise<any> | void;
+}) {
+  const { request, showToastHandler } = useApp();
+  const [isInstallmentsEdited, setIsInstallmentsEdited] = useState(false);
+  const [autoRedistributeInstallments, setAutoRedistributeInstallments] =
+    useState(true);
+  const redistributionTimeoutRef = useRef<
+    Record<number, ReturnType<typeof setTimeout>>
+  >({});
+
+  const form = useForm<NewTitleFormValues>({
+    resolver: zodResolver(newTitleFormSchema),
+    defaultValues: {
+      documento: '',
+      fornecedorId: '',
+      competencia: '',
+      vencimento: '',
+      valor: 0,
+      installmentsCount: 1,
+      installments: [{ dueDate: '', amount: 0 }],
+      categoriaId: '',
+      centroCustoId: '',
+      metodo: '',
+      descricao: '',
+    },
+  });
+
+  const { fields: installmentFields, replace: replaceInstallments } =
+    useFieldArray({
+      control: form.control,
+      name: 'installments',
+    });
+
+  const watchedInstallmentsCount = form.watch('installmentsCount');
+  const watchedTotalValue = form.watch('valor');
+  const watchedDueDate = form.watch('vencimento');
+  const watchedInstallments = form.watch('installments');
+
+  const toDateInput = (value?: string) => {
+    if (!value) {
+      return '';
+    }
+
+    if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+      return value;
+    }
+
+    const parsed = new Date(value);
+    if (Number.isNaN(parsed.getTime())) {
+      return '';
+    }
+
+    return parsed.toISOString().slice(0, 10);
+  };
+
+  useEffect(() => {
+    if (!open || !titulo) {
+      return;
+    }
+
+    const installments = Array.isArray(titulo.parcelas) ? titulo.parcelas : [];
+    const normalizedInstallments =
+      installments.length > 0
+        ? installments.map((installment: any) => ({
+            dueDate: toDateInput(installment.vencimento),
+            amount: Number(installment.valor || 0),
+          }))
+        : [
+            {
+              dueDate: toDateInput(titulo?.vencimento),
+              amount: Number(titulo?.valorTotal || 0),
+            },
+          ];
+
+    form.reset({
+      documento: titulo.documento || '',
+      fornecedorId: titulo.fornecedorId || '',
+      competencia: titulo.competencia || '',
+      vencimento:
+        normalizedInstallments[0]?.dueDate || toDateInput(titulo?.vencimento),
+      valor: Number(titulo.valorTotal || 0),
+      installmentsCount: normalizedInstallments.length,
+      installments: normalizedInstallments,
+      categoriaId: titulo.categoriaId || '',
+      centroCustoId: titulo.centroCustoId || '',
+      metodo: installments[0]?.metodoPagamento || '',
+      descricao: titulo.descricao || '',
+    });
+
+    setIsInstallmentsEdited(true);
+  }, [form, open, titulo]);
+
+  useEffect(() => {
+    if (isInstallmentsEdited || !open) {
+      return;
+    }
+
+    replaceInstallments(
+      buildEqualInstallments(
+        watchedInstallmentsCount,
+        watchedTotalValue,
+        watchedDueDate
+      )
+    );
+  }, [
+    isInstallmentsEdited,
+    open,
+    replaceInstallments,
+    watchedDueDate,
+    watchedInstallmentsCount,
+    watchedTotalValue,
+  ]);
+
+  const installmentsTotal = (watchedInstallments || []).reduce(
+    (acc, installment) => acc + Number(installment?.amount || 0),
+    0
+  );
+  const installmentsDiffCents = Math.abs(
+    Math.round(installmentsTotal * 100) -
+      Math.round((watchedTotalValue || 0) * 100)
+  );
+
+  const clearScheduledRedistribution = (index: number) => {
+    const timeout = redistributionTimeoutRef.current[index];
+    if (!timeout) {
+      return;
+    }
+
+    clearTimeout(timeout);
+    delete redistributionTimeoutRef.current[index];
+  };
+
+  const runInstallmentRedistribution = (index: number) => {
+    if (!autoRedistributeInstallments) {
+      return;
+    }
+
+    const currentInstallments = form.getValues('installments');
+    const editedInstallmentAmount = Number(
+      currentInstallments[index]?.amount || 0
+    );
+
+    const redistributedInstallments = redistributeRemainingInstallments(
+      currentInstallments,
+      index,
+      editedInstallmentAmount,
+      form.getValues('valor')
+    );
+
+    replaceInstallments(redistributedInstallments);
+  };
+
+  const scheduleInstallmentRedistribution = (index: number) => {
+    clearScheduledRedistribution(index);
+
+    redistributionTimeoutRef.current[index] = setTimeout(() => {
+      runInstallmentRedistribution(index);
+      delete redistributionTimeoutRef.current[index];
+    }, INSTALLMENT_REDISTRIBUTION_DEBOUNCE_MS);
+  };
+
+  useEffect(() => {
+    if (autoRedistributeInstallments) {
+      return;
+    }
+
+    Object.values(redistributionTimeoutRef.current).forEach(clearTimeout);
+    redistributionTimeoutRef.current = {};
+  }, [autoRedistributeInstallments]);
+
+  useEffect(() => {
+    return () => {
+      Object.values(redistributionTimeoutRef.current).forEach(clearTimeout);
+      redistributionTimeoutRef.current = {};
+    };
+  }, []);
+
+  const handleSubmit = async (values: NewTitleFormValues) => {
+    if (!titulo?.id) {
+      showToastHandler?.('error', 'Título inválido para edição');
+      return;
+    }
+
+    try {
+      await request({
+        url: `/finance/accounts-payable/installments/${titulo.id}`,
+        method: 'PATCH',
+        data: {
+          document_number: values.documento,
+          person_id: Number(values.fornecedorId),
+          competence_date: values.competencia
+            ? `${values.competencia}-01`
+            : undefined,
+          due_date: values.vencimento,
+          total_amount: values.valor,
+          finance_category_id: values.categoriaId
+            ? Number(values.categoriaId)
+            : undefined,
+          cost_center_id: values.centroCustoId
+            ? Number(values.centroCustoId)
+            : undefined,
+          payment_channel: values.metodo || undefined,
+          description: values.descricao?.trim() || undefined,
+          installments: values.installments.map((installment, index) => ({
+            installment_number: index + 1,
+            due_date: installment.dueDate || values.vencimento,
+            amount: installment.amount,
+          })),
+        },
+      });
+
+      await onUpdated();
+      showToastHandler?.('success', 'Título atualizado com sucesso');
+      onOpenChange(false);
+    } catch {
+      showToastHandler?.('error', 'Não foi possível atualizar o título');
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
+        <SheetHeader>
+          <SheetTitle>{t('table.actions.edit')}</SheetTitle>
+          <SheetDescription>
+            Edite os dados do título enquanto estiver em rascunho.
+          </SheetDescription>
+        </SheetHeader>
+        <Form {...form}>
+          <form className="px-4" onSubmit={form.handleSubmit(handleSubmit)}>
+            <div className="grid gap-4">
+              <FormField
+                control={form.control}
+                name="documento"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.document')}</FormLabel>
+                    <FormControl>
+                      <Input placeholder="NF-00000" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="fornecedorId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.supplier')}</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder={t('common.select')} />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {pessoas.map((person) => (
+                          <SelectItem key={person.id} value={String(person.id)}>
+                            {person.nome}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="grid grid-cols-2 gap-4">
+                <FormField
+                  control={form.control}
+                  name="competencia"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('fields.competency')}</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="month"
+                          {...field}
+                          value={field.value || ''}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="vencimento"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('fields.dueDate')}</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="date"
+                          {...field}
+                          value={field.value || ''}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <FormField
+                control={form.control}
+                name="valor"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.totalValue')}</FormLabel>
+                    <FormControl>
+                      <InputMoney
+                        ref={field.ref}
+                        name={field.name}
+                        value={field.value}
+                        onBlur={field.onBlur}
+                        onValueChange={(value) => field.onChange(value ?? 0)}
+                        placeholder="0,00"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="installmentsCount"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Quantidade de Parcelas</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        min={1}
+                        max={120}
+                        value={field.value}
+                        onChange={(event) => {
+                          const nextValue = Number(event.target.value || 1);
+                          field.onChange(
+                            Number.isNaN(nextValue) ? 1 : nextValue
+                          );
+                          setIsInstallmentsEdited(false);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="space-y-3 rounded-md border p-3">
+                <div className="flex items-center justify-between gap-2">
+                  <p className="text-sm font-medium">Parcelas</p>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      setIsInstallmentsEdited(false);
+                      replaceInstallments(
+                        buildEqualInstallments(
+                          form.getValues('installmentsCount'),
+                          form.getValues('valor'),
+                          form.getValues('vencimento')
+                        )
+                      );
+                    }}
+                  >
+                    Recalcular automaticamente
+                  </Button>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <Checkbox
+                    id="auto-redistribute-installments-edit-payable"
+                    checked={autoRedistributeInstallments}
+                    onCheckedChange={(checked) =>
+                      setAutoRedistributeInstallments(checked === true)
+                    }
+                  />
+                  <Label
+                    htmlFor="auto-redistribute-installments-edit-payable"
+                    className="text-xs text-muted-foreground"
+                  >
+                    Redistribuir automaticamente o restante ao editar parcela
+                  </Label>
+                </div>
+
+                <div className="space-y-2">
+                  {installmentFields.map((installment, index) => (
+                    <div
+                      key={installment.id}
+                      className="grid grid-cols-1 gap-2 rounded-md border p-2 sm:grid-cols-[96px_1fr_160px]"
+                    >
+                      <div className="flex items-center text-sm text-muted-foreground">
+                        #{index + 1}
+                      </div>
+
+                      <FormField
+                        control={form.control}
+                        name={`installments.${index}.dueDate` as const}
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel className="text-xs">
+                              Vencimento
+                            </FormLabel>
+                            <FormControl>
+                              <Input
+                                type="date"
+                                {...field}
+                                value={field.value || ''}
+                                onChange={(event) => {
+                                  setIsInstallmentsEdited(true);
+                                  field.onChange(event);
+                                }}
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+
+                      <FormField
+                        control={form.control}
+                        name={`installments.${index}.amount` as const}
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel className="text-xs">Valor</FormLabel>
+                            <FormControl>
+                              <InputMoney
+                                ref={field.ref}
+                                name={field.name}
+                                value={field.value}
+                                onBlur={() => {
+                                  field.onBlur();
+
+                                  if (!autoRedistributeInstallments) {
+                                    return;
+                                  }
+
+                                  clearScheduledRedistribution(index);
+                                  runInstallmentRedistribution(index);
+                                }}
+                                onValueChange={(value) => {
+                                  setIsInstallmentsEdited(true);
+                                  field.onChange(value ?? 0);
+
+                                  if (!autoRedistributeInstallments) {
+                                    return;
+                                  }
+
+                                  scheduleInstallmentRedistribution(index);
+                                }}
+                                placeholder="0,00"
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    </div>
+                  ))}
+                </div>
+
+                <p
+                  className={`text-xs ${
+                    installmentsDiffCents === 0
+                      ? 'text-muted-foreground'
+                      : 'text-destructive'
+                  }`}
+                >
+                  Soma das parcelas: {installmentsTotal.toFixed(2)}
+                  {installmentsDiffCents > 0 && ' (ajuste necessário)'}
+                </p>
+                {form.formState.errors.installments?.message && (
+                  <p className="text-xs text-destructive">
+                    {form.formState.errors.installments.message}
+                  </p>
+                )}
+              </div>
+
+              <FormField
+                control={form.control}
+                name="categoriaId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.category')}</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder={t('common.select')} />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {categorias
+                          .filter((c) => c.natureza === 'despesa')
+                          .map((c) => (
+                            <SelectItem key={c.id} value={String(c.id)}>
+                              {c.codigo} - {c.nome}
+                            </SelectItem>
+                          ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="centroCustoId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.costCenter')}</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder={t('common.select')} />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {centrosCusto.map((c) => (
+                          <SelectItem key={c.id} value={String(c.id)}>
+                            {c.codigo} - {c.nome}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="metodo"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.paymentMethod')}</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder={t('common.select')} />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="boleto">
+                          {t('paymentMethods.boleto')}
+                        </SelectItem>
+                        <SelectItem value="pix">PIX</SelectItem>
+                        <SelectItem value="transferencia">
+                          {t('paymentMethods.transfer')}
+                        </SelectItem>
+                        <SelectItem value="cartao">
+                          {t('paymentMethods.card')}
+                        </SelectItem>
+                        <SelectItem value="dinheiro">
+                          {t('paymentMethods.cash')}
+                        </SelectItem>
+                        <SelectItem value="cheque">
+                          {t('paymentMethods.check')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="descricao"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.description')}</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder={t('newTitle.descriptionPlaceholder')}
+                        {...field}
+                        value={field.value || ''}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className="flex justify-end gap-2 pt-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+              >
+                {t('common.cancel')}
+              </Button>
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                {t('common.save')}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
 export default function TitulosPagarPage() {
   const t = useTranslations('finance.PayableInstallmentsPage');
   const { request, currentLocaleCode, showToastHandler } = useApp();
+  const pathname = usePathname();
+  const router = useRouter();
+  const searchParams = useSearchParams();
   const { data, refetch } = useFinanceData();
   const { titulosPagar, pessoas } = data;
 
@@ -1095,6 +1728,76 @@ export default function TitulosPagarPage() {
 
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState<string>('');
+  const [editingTitleId, setEditingTitleId] = useState<string | null>(null);
+  const [cancelingTitleId, setCancelingTitleId] = useState<string | null>(null);
+
+  const editingTitle = useMemo(
+    () => titulosPagar.find((item) => item.id === editingTitleId),
+    [editingTitleId, titulosPagar]
+  );
+
+  useEffect(() => {
+    const editId = searchParams.get('editId');
+    if (!editId || editingTitleId) {
+      return;
+    }
+
+    const foundTitle = titulosPagar.find((item) => item.id === editId);
+    if (!foundTitle) {
+      return;
+    }
+
+    if (foundTitle.status !== 'rascunho') {
+      showToastHandler?.(
+        'error',
+        'Apenas títulos em rascunho podem ser editados'
+      );
+      router.replace(pathname, { scroll: false });
+      return;
+    }
+
+    setEditingTitleId(editId);
+  }, [
+    editingTitleId,
+    pathname,
+    router,
+    searchParams,
+    showToastHandler,
+    titulosPagar,
+  ]);
+
+  const closeEditSheet = (open: boolean) => {
+    if (open) {
+      return;
+    }
+
+    setEditingTitleId(null);
+    if (searchParams.get('editId')) {
+      router.replace(pathname, { scroll: false });
+    }
+  };
+
+  const handleCancelTitle = async (titleId: string) => {
+    if (!titleId || cancelingTitleId) {
+      return;
+    }
+
+    setCancelingTitleId(titleId);
+    try {
+      await request({
+        url: `/finance/accounts-payable/installments/${titleId}/cancel`,
+        method: 'PATCH',
+        data: {},
+      });
+
+      await refetch();
+      showToastHandler?.('success', 'Título cancelado com sucesso');
+    } catch {
+      showToastHandler?.('error', 'Não foi possível cancelar o título');
+    } finally {
+      setCancelingTitleId(null);
+    }
+  };
 
   const filteredTitulos = titulosPagar.filter((titulo) => {
     const matchesSearch =
@@ -1142,12 +1845,24 @@ export default function TitulosPagarPage() {
           { label: t('breadcrumbs.current') },
         ]}
         actions={
-          <NovoTituloSheet
-            categorias={categorias}
-            centrosCusto={centrosCusto}
-            t={t}
-            onCreated={refetch}
-          />
+          <>
+            <NovoTituloSheet
+              categorias={categorias}
+              centrosCusto={centrosCusto}
+              t={t}
+              onCreated={refetch}
+            />
+            <EditarTituloSheet
+              open={!!editingTitleId && !!editingTitle}
+              onOpenChange={closeEditSheet}
+              titulo={editingTitle}
+              pessoas={pessoas}
+              categorias={categorias}
+              centrosCusto={centrosCusto}
+              t={t}
+              onUpdated={refetch}
+            />
+          </>
         }
       />
 
@@ -1164,7 +1879,6 @@ export default function TitulosPagarPage() {
             options: [
               { value: 'all', label: t('statuses.all') },
               { value: 'rascunho', label: t('statuses.rascunho') },
-              { value: 'aprovado', label: t('statuses.aprovado') },
               { value: 'aberto', label: t('statuses.aberto') },
               { value: 'parcial', label: t('statuses.parcial') },
               { value: 'liquidado', label: t('statuses.liquidado') },
@@ -1262,7 +1976,10 @@ export default function TitulosPagarPage() {
                             {t('table.actions.viewDetails')}
                           </Link>
                         </DropdownMenuItem>
-                        <DropdownMenuItem>
+                        <DropdownMenuItem
+                          disabled={titulo.status !== 'rascunho'}
+                          onClick={() => setEditingTitleId(titulo.id)}
+                        >
                           <Edit className="mr-2 h-4 w-4" />
                           {t('table.actions.edit')}
                         </DropdownMenuItem>
@@ -1275,9 +1992,7 @@ export default function TitulosPagarPage() {
                         </DropdownMenuItem>
                         <DropdownMenuItem
                           disabled={
-                            !['aprovado', 'aberto', 'parcial'].includes(
-                              titulo.status
-                            )
+                            !['aberto', 'parcial'].includes(titulo.status)
                           }
                         >
                           <Download className="mr-2 h-4 w-4" />
@@ -1292,7 +2007,15 @@ export default function TitulosPagarPage() {
                           {t('table.actions.reverse')}
                         </DropdownMenuItem>
                         <DropdownMenuSeparator />
-                        <DropdownMenuItem className="text-destructive">
+                        <DropdownMenuItem
+                          className="text-destructive"
+                          disabled={
+                            ['cancelado', 'liquidado'].includes(
+                              titulo.status
+                            ) || cancelingTitleId === titulo.id
+                          }
+                          onClick={() => void handleCancelTitle(titulo.id)}
+                        >
                           <XCircle className="mr-2 h-4 w-4" />
                           {t('table.actions.cancel')}
                         </DropdownMenuItem>